/* =====================================================================================================================
   PaySalaryLoan - Apply Now page (/apply-now) and the OTP step (/journey/otp): the apply-specific bits only.

   Depends on public/css/psl-site.css (loaded first by templates/header.php): design tokens (--psl-*) and the shared
   components (.pl-hero, .pl-card, .pl-timeline, .pl-tabs, .pl-glance, .pl-faq, ...). This file keeps what only these
   two pages have: the minimal landing header and footer, the hero grid with the form card, the mobile / OTP fields,
   the clickwrap consent line, and the existing rates / calculator / legal blocks (.psl-*, wording unchanged).
   Layout is mobile-first; breakpoints 576 / 768 / 992 / 1200 px.
===================================================================================================================== */

.an-body { background: #fff; color: var(--psl-ink); overflow-x: hidden; }
.an-body :focus-visible,
.an :focus-visible { outline: 3px solid var(--psl-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- landing header (templates/header.php) */
.an-header { position: sticky; top: 0; z-index: 1020; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--psl-line); }
.an-header__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.an-header__logo img { display: block; width: 150px; height: auto; }
.an-header__help { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--psl-pill); font-size: .88rem; font-weight: 600;
    color: var(--psl-navy-800); background: var(--psl-mint-50); border: 1px solid var(--psl-mint-200); }
.an-header__help svg { color: var(--psl-mint-600); }
.an-header__help:hover { color: var(--psl-navy-900); background: #d6f2e6; }

/* ---------------------------------------------------------------- hero grid: form card first on mobile, beside the intro on desktop */
.an-hero__grid { grid-template-areas: "form" "intro"; }
.an-hero__intro { grid-area: intro; }
.an-hero__form { grid-area: form; }
.an-hero__art { display: none; grid-area: art; }
.an-hero .pl-h1 em { white-space: nowrap; }
/* three short facts under the lead: stacked on phones, one line with dividers from 1200px */
.an-facts { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.an-facts li { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--psl-ink); }
.an-facts svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--psl-mint-600); background: var(--psl-mint-50);
    border: 1px solid var(--psl-mint-200); }
.an-play { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 6px 14px; border-radius: 10px; line-height: 1.1;
    color: #fff; background: #000; border: 1px solid #555; }
.an-play span { font-size: 1.05rem; font-weight: 600; }
.an-play small { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .06em; }
.an-play:hover { color: #fff; border-color: #999; }

/* ---------------------------------------------------------------- form card (.pl-card) contents */
.an-card__step { margin: 0 0 10px; font-size: .78rem; font-weight: 600; color: var(--psl-ink-3); }
.an-card__step span { padding: 2px 8px; margin-right: 2px; border-radius: var(--psl-pill); color: var(--psl-navy-800); background: var(--psl-blue-100); }
.an-card__kicker { margin: 0 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--psl-mint-600); }
.an-card__title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 800; color: var(--psl-ink); }
.an-card__help { margin: 0 0 16px; font-size: .92rem; color: var(--psl-ink-2); }

.an-field { margin-bottom: 16px; }
.an-field__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.an-label { font-size: .9rem; font-weight: 600; color: var(--psl-ink); }
.an-count { font-size: .8rem; color: var(--psl-ink-3); font-variant-numeric: tabular-nums; }
.an-count.is-done { font-weight: 700; color: var(--psl-mint-600); }
.an-phone { display: flex; align-items: stretch; overflow: hidden; border-radius: var(--psl-radius-sm); background: #fff; border: 1.5px solid #c3cbdc;
    transition: border-color .15s, box-shadow .15s; }
.an-phone:focus-within { border-color: var(--psl-blue); box-shadow: 0 0 0 4px rgba(15, 98, 254, .15); }
.an-phone.is-invalid { border-color: var(--psl-red); }
.an-phone.is-invalid:focus-within { box-shadow: 0 0 0 4px rgba(198, 40, 40, .14); }
.an-phone__cc { display: flex; align-items: center; padding: 0 12px; font-weight: 600; color: var(--psl-ink-2); background: var(--psl-blue-50);
    border-right: 1px solid var(--psl-line); }
.an-phone__input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 12px; border: 0; outline: 0; background: transparent;
    font-size: 1.1rem; font-weight: 600; letter-spacing: .06em; color: var(--psl-ink); }
.an-phone__input::placeholder { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: #8a93a8; }
.an .an-phone__input:focus-visible { outline: 0; }   /* the ring is on .an-phone */
.an-note { margin: 6px 0 0; font-size: .82rem; color: var(--psl-ink-3); }
.an-error { display: none; margin-top: 6px; font-size: .84rem; font-weight: 500; color: var(--psl-red); }

/* consent: a clickwrap line under the Apply Now button (config/apply_consents.php) */
.an-clickwrap { margin: 10px 0 0; font-size: .85rem; line-height: 1.5; text-align: center; color: var(--psl-ink-3); }
.an-clickwrap a { font-weight: 600; color: var(--psl-blue); text-decoration: underline; text-underline-offset: 2px; }
.an-notice { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.5; color: var(--psl-ink-2); background: var(--psl-blue-50, #eef4ff); }
.an-notice a { font-weight: 600; color: var(--psl-blue); text-decoration: underline; text-underline-offset: 2px; }
.an-optional { color: var(--psl-ink-3); }

/* the submit is a full-width primary button (.pl-btn look) with a fixed height */
.an-submit { display: block; width: 100%; height: 54px; border: 0; border-radius: var(--psl-radius-sm); cursor: pointer; font-size: 1.02rem; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--psl-blue), var(--psl-navy-800)); box-shadow: var(--psl-shadow-btn);
    transition: filter .15s, box-shadow .15s; }
.an-submit:hover:not(:disabled) { filter: brightness(1.08); }
.an-submit:disabled { cursor: not-allowed; color: #4d5870; background: #dfe4ee; box-shadow: none; }

/* ---------------------------------------------------------------- 2. "Your loan in 30 seconds": the navy facts panel, open */
.an-short__grid { display: grid; gap: 20px; }
.an-short__head { margin-bottom: 0; }
.an-short__eg { max-width: 30em; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--psl-radius-sm); font-size: .98rem; font-weight: 600; line-height: 1.5;
    color: var(--psl-navy-900); background: var(--psl-mint-50); border-left: 4px solid var(--psl-mint); }
.an-short__panel { margin: 0; }
.an-short__panel .pl-glance__grid { border-top: 0; border-bottom: 0; }

/* ---------------------------------------------------------------- 4. "Is PaySalaryLoan right for you?" */
.an-fit { display: grid; gap: 14px; }
.an-fit__yes { border-top: 4px solid var(--psl-mint); }
.an-fit__no { background: #f7f8fb; border-top: 4px solid #c3cbdc; }
.an-nots { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.an-nots li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--psl-ink-2); }
.an-not { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--psl-ink-3); background: #e8ebf2; }
.an-not svg { stroke-width: 2.2; }

/* ---------------------------------------------------------------- 5. "What happens after you apply": vertical journey */
.an-journey-wrap { display: grid; gap: 8px; }
.an-journey-wrap__cta { margin-top: 18px; }
.an-journey { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: an-step; }
.an-journey li { position: relative; padding: 0 0 22px 62px; counter-increment: an-step; }
.an-journey li:last-child { padding-bottom: 0; }
/* the rail between the icons */
.an-journey li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--psl-blue-200), var(--psl-mint-200)); }
.an-journey li:last-child::before { display: none; }
.an-journey__ic { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--psl-blue);
    background: #fff; border: 1.5px solid var(--psl-blue-200); box-shadow: var(--psl-shadow-sm); }
.an-journey li:last-child .an-journey__ic { color: #fff; background: var(--psl-mint); border-color: var(--psl-mint); }
.an-journey h3 { margin: 0 0 4px; padding-top: 2px; font-family: var(--psl-font-display); font-size: 1.04rem; font-weight: 700; color: var(--psl-ink); }
.an-journey h3::before { content: counter(an-step) ". "; color: var(--psl-mint-600); }
.an-journey p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--psl-ink-2); }
.an-journey__need { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--psl-pill); font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--psl-navy-800); background: var(--psl-blue-100); }

/* ---------------------------------------------------------------- 6. "Our promises to you" (navy band) */
.an-promises { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.an-promises li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--psl-radius-sm); font-weight: 600; line-height: 1.4;
    color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.an-promises__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--psl-navy-900);
    background: var(--psl-mint-on-navy); }

/* ---------------------------------------------------------------- 8. "Questions people ask us": list left, answer right (992px+); accordion below */
.an-qa { overflow: hidden; border-radius: var(--psl-radius); background: #fff; border: 1px solid var(--psl-line); }
.an-qa__h { margin: 0; font-size: 1rem; }
.an-qa__h + .an-qa__a + .an-qa__h, .an-qa__a + .an-qa__h { border-top: 1px solid var(--psl-line); }
.an-qa__q { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 16px; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; line-height: 1.4; text-align: left; color: var(--psl-ink); }
.an-qa__q span { flex: 1 1 auto; }
.an-qa__q::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--psl-ink-3); border-bottom: 2px solid var(--psl-ink-3);
    transform: rotate(45deg); transition: transform .2s; }
.an-qa__q[aria-expanded="true"] { color: var(--psl-navy-800); }
.an-qa__q[aria-expanded="true"]::after { transform: rotate(-135deg); }
.an-qa__q:focus-visible { outline: 3px solid var(--psl-focus); outline-offset: -3px; }
.an-qa__a { padding: 0 16px 18px; font-size: .95rem; line-height: 1.6; color: var(--psl-ink-2); }
.an-qa__a p { margin: 0; }
.an-qa__a[hidden] { display: none; }

/* ---------------------------------------------------------------- 7. rates table, representative example, legal blocks (content unchanged) */
.psl-rates h2 { margin-bottom: .25rem; font-size: 1.35rem; font-weight: 800; }
.psl-rates .psl-sub { margin-bottom: 1.5rem; color: var(--psl-ink-2); }
.psl-rates .psl-card { height: 100%; padding: 1.1rem; border-radius: 14px; background: #fff; border: 1px solid var(--psl-line); }
.psl-rates .psl-card h3 { margin-bottom: 1rem; font-size: 1.1rem; font-weight: 700; }
.psl-rates .psl-range label { display: flex; justify-content: space-between; font-size: .95rem; font-weight: 600; }
.psl-rates .psl-range input[type=range] { width: 100%; accent-color: var(--psl-blue); }
.psl-rates .psl-out { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin-top: 1rem; font-size: .95rem; }
.psl-rates .psl-out .k { color: var(--psl-ink-2); }
.psl-rates .psl-out .v { font-weight: 700; text-align: right; }
.psl-rates .psl-out .total { padding-top: .45rem; border-top: 1px solid #e4ebfb; }
.psl-rates table { margin-bottom: 0; font-size: .92rem; }
.psl-rates th { white-space: nowrap; background: var(--psl-blue-50); }
.psl-rates .pl-legal-grievance th { white-space: normal; background: transparent; }   /* the legal block's labels wrap (owner bug 23 Oct) */
.psl-rates .psl-note { margin-top: .75rem; font-size: .85rem; color: #6b7690; }
.psl-rates .psl-example th { vertical-align: middle; white-space: normal; font-size: .82rem; color: #fff; background: var(--psl-navy-800); }
.psl-rates .psl-example td { font-weight: 600; white-space: nowrap; }
.psl-rates .psl-legal summary { cursor: pointer; list-style: revert; }
.psl-rates .psl-legal-body { max-height: 520px; margin-top: 1rem; overflow-y: auto; font-size: .92rem; }
.psl-rates .psl-legal-body h4 { margin-top: 1rem; font-size: 1rem; font-weight: 700; }
.psl-rates [id] { scroll-margin-top: 90px; }
#legal .psl-card { margin-bottom: 1rem; }
#legal .psl-card:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- floating buttons
   WhatsApp (.pl-wa) at the bottom right; back-to-top stacked above it on wide screens and hidden on phones. */
.an-body .back-to-top { right: 20px; bottom: 82px; color: #fff; background: var(--psl-navy-800); border-color: var(--psl-navy-800); }
.an-body .back-to-top { display: none !important; }   /* the longer CA footer and consent rows: it covered the last lines at the bottom (responsive audit) */
@media (max-width: 767.98px) {
    .an-body .back-to-top { display: none !important; }   /* overrides the inline display set by the footer script */
}

/* ---------------------------------------------------------------- landing footer: compact navy band */
.an-footer { font-size: .82rem; color: var(--psl-on-navy); background: var(--psl-navy-950); }   /* the WhatsApp button hides over it (apply-now.js) */
.an-footer a { color: #fff; }
.an-footer a:hover { color: var(--psl-mint-on-navy); text-decoration: underline; }
.an-footer__line { margin: 0 0 8px; line-height: 1.6; }
.an-footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12); }
.an-footer__copy { margin: 0; color: var(--psl-on-navy-2); }

/* ---------------------------------------------------------------- OTP step (journey/otp) */
.an-otp .pl-hero { padding-bottom: 48px; }
.an-otp-input { width: 100%; height: 56px; padding-left: .5em; border-radius: var(--psl-radius-sm); text-align: center; font-size: 1.5rem; font-weight: 700;
    letter-spacing: .5em; color: var(--psl-ink); background: #fff; border: 1.5px solid #c3cbdc; }
.an-otp-input:focus { outline: 0; border-color: var(--psl-blue); box-shadow: 0 0 0 4px rgba(15, 98, 254, .15); }
.an-resend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 4px; font-size: .88rem; color: var(--psl-ink-2); }
.an-resend a { font-weight: 600; color: var(--psl-blue); text-decoration: underline; text-underline-offset: 2px; }
.an-resend-status { min-height: 1.2em; margin-bottom: 12px; font-size: .84rem; color: var(--psl-ink-2); }

/* ---------------------------------------------------------------- breakpoints */
@media (min-width: 768px) {
    .an-fit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
    .an-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-hero__art { display: block; justify-self: end; align-self: end; }
    .an-hero__form { justify-self: center; width: 100%; max-width: 560px; }
    .an-hero__grid { grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "form form" "intro art"; }
}
@media (min-width: 992px) {
    .an-header__logo img { width: 170px; }
    .an-hero__grid { grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "intro form"; align-items: start; }   /* UX #23: no empty gap */
    .an-hero__art { display: none; }   /* no room beside the intro until 1200px */
    .an-hero__form { max-width: none; }
    .an-card__kicker { display: none; }
    .an-short__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 48px; }
    .an-journey-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
    .an-journey-wrap__head { position: sticky; top: 90px; }
    .an-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .an-promises li { align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px; }
    /* questions in the left column, the open answer in the right one */
    .an-qa[data-mode="split"] { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-rows: repeat(3, auto) 1fr; }
    .an-qa[data-mode="split"] .an-qa__h { grid-column: 1; border-top: 0; border-right: 1px solid var(--psl-line); }
    .an-qa[data-mode="split"] .an-qa__h + .an-qa__a + .an-qa__h { border-top: 1px solid var(--psl-line); }
    .an-qa[data-mode="split"] .an-qa__h:last-of-type { border-bottom: 1px solid var(--psl-line); }
    .an-qa[data-mode="split"]::after { content: ""; grid-column: 1; grid-row: 4; border-right: 1px solid var(--psl-line); }
    .an-qa[data-mode="split"] .an-qa__a { grid-column: 2; grid-row: 1 / span 4; padding: 26px 30px; font-size: 1.02rem; }
    .an-qa[data-mode="split"] .an-qa__q { padding: 20px 22px; }
    .an-qa[data-mode="split"] .an-qa__q::after { width: 9px; height: 9px; transform: rotate(-45deg); }
    .an-qa[data-mode="split"] .an-qa__q[aria-expanded="true"] { background: var(--psl-blue-50); box-shadow: inset 4px 0 0 var(--psl-mint); }
    .an-qa[data-mode="split"] .an-qa__q[aria-expanded="true"]::after { border-color: var(--psl-mint-600); }
}
@media (min-width: 1200px) {
    .an-hero__grid { grid-template-columns: minmax(0, 1fr) 450px; }
    /* the illustration shares the intro cell (bottom right), beside the narrower intro text */
    .an-hero__intro > * { max-width: 450px; }
    .an-hero__art { display: block; grid-area: intro; justify-self: end; align-self: end; width: 180px; margin-bottom: 4px; }
    .an-hero__art svg { width: 100%; height: auto; }
    .an-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; }
    .an-facts li { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .an-body *, .an * { transition: none !important; scroll-behavior: auto !important; }
}

/* responsive audit: 14 px minimum text on phones */
@media (max-width: 767.98px) {
    .an-play small, .an-card__step, .an-card__step span, .an-card__kicker, .an-count, .an-note, .an-error, .an-clickwrap, .an-clickwrap a, .an-optional, .an-notice, .an-journey__need, .an-journey dt, .an-journey dd small, .psl-rates .psl-note, .psl-rates .psl-example th, .an-footer, .an-footer__line, .an-footer__copy, .an-footer__links a, .an-resend-status { font-size: .875rem; }
}
/* responsive audit: 40 px tap targets (header, footer links); room for the WhatsApp button under the footer */
.an-header__logo { display: flex; align-items: center; min-height: 44px; }
.an-header__help { min-height: 44px; }
.an-footer__links { gap: 0 18px; }
.an-footer__links a { display: inline-flex; align-items: center; min-height: 40px; }
body:has(.pl-wa) .an-footer { padding-bottom: 88px; }

/* ---------------------------------------------------------------- 7. rates & charges in full (v4): price list + loan receipt
   Mobile: lender line, price list (1 column), receipt, note. >= 768px: price list in 2 columns. >= 1200px: list | receipt. */
.an-rates .psl-rates { display: grid; gap: 20px; }
.an-lender { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--psl-radius); font-size: .92rem;
    line-height: 1.55; color: var(--psl-ink-2); background: var(--psl-blue-50); border: 1px solid var(--psl-blue-200); }
.an-lender strong { color: var(--psl-ink); }
.an-lender__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--psl-blue);
    background: #fff; border: 1px solid var(--psl-blue-200); }
.an-rates__grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1200px) { .an-rates__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; } }

.an-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--psl-pill); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.an-badge--mint { color: var(--psl-mint-600); background: var(--psl-mint-50); border: 1px solid var(--psl-mint-200); }

.an-price { padding: 18px; border-radius: var(--psl-radius-lg); background: #fff; border: 1px solid var(--psl-line); box-shadow: var(--psl-shadow-sm); }
.an-price__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.an-price__title { margin: 0; font-family: var(--psl-font-display); font-size: 1.2rem; font-weight: 800; color: var(--psl-ink); }
.an-price__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .an-price__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-price__row { display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 14px; border-radius: var(--psl-radius-sm);
    background: var(--psl-blue-50); border: 1px solid transparent; transition: border-color .15s, background-color .15s; }
.an-price__row:hover { border-color: var(--psl-blue-200); background: #fff; }
.an-price__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--psl-blue);
    background: #fff; border: 1px solid var(--psl-blue-200); }
.an-price__row.is-free .an-price__icon { color: var(--psl-mint-600); border-color: var(--psl-mint-200); }
.an-price__row.is-free { background: var(--psl-mint-50); }
.an-price__text { display: grid; gap: 2px; min-width: 0; }
.an-price__label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--psl-ink-3); }
.an-price__value { font-family: var(--psl-font-display); font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--psl-ink); overflow-wrap: anywhere; }
.an-price__row.is-free .an-price__value { color: var(--psl-mint-600); }
.an-price__when { font-size: .86rem; line-height: 1.45; color: var(--psl-ink-2); }

/* the representative example as a loan receipt: navy card, perforated edge above the amount due */
.an-receipt { position: relative; padding: 20px 18px 18px; border-radius: var(--psl-radius-lg); color: #fff; background: var(--psl-grad-navy);
    box-shadow: var(--psl-shadow); overflow: hidden; }
@media (min-width: 1200px) { .an-receipt { position: sticky; top: calc(var(--psl-header-h) + 16px); } }
.an-receipt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.an-receipt__kicker { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--psl-mint-on-navy); }
.an-receipt__apr { padding: 4px 10px; border-radius: var(--psl-pill); font-size: .8rem; font-weight: 800; color: var(--psl-navy-900); background: var(--psl-mint-on-navy); }
.an-receipt__title { margin: 8px 0 14px; font-family: var(--psl-font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.25; color: #fff; }
.an-receipt__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.an-receipt__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: .95rem; color: var(--psl-on-navy);
    border-bottom: 1px dashed rgba(255, 255, 255, .18); }
.an-receipt__rows b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-receipt__rows .is-minus b { color: #ffc9c9; }
.an-receipt__rows .is-plus b { color: var(--psl-mint-on-navy); }
.an-receipt__rows .is-sub span { font-weight: 600; color: #fff; }
.an-receipt__rows .is-sub b { font-size: 1.05rem; }
.an-receipt__due { position: relative; display: grid; gap: 2px; margin: 16px -18px 0; padding: 18px 18px 16px; background: rgba(255, 255, 255, .08);
    border-top: 2px dashed rgba(255, 255, 255, .28); }
.an-receipt__due::before, .an-receipt__due::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.an-receipt__due::before { left: -10px; } .an-receipt__due::after { right: -10px; }
.an-receipt__due-label { font-size: .85rem; font-weight: 600; color: var(--psl-on-navy); }
.an-receipt__due-amt { font-family: var(--psl-font-display); font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.an-receipt__due-sub { font-size: .8rem; color: var(--psl-on-navy-2); }
.an-receipt__bar { display: flex; height: 10px; margin-top: 16px; overflow: hidden; border-radius: var(--psl-pill); background: rgba(255, 255, 255, .12); }
.an-receipt__bar-p { background: linear-gradient(90deg, #4f8bff, #7fb0ff); }
.an-receipt__bar-i { background: var(--psl-mint); }
.an-receipt__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: .8rem; color: var(--psl-on-navy); }
.an-receipt__legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-receipt__cost { margin-left: auto; font-weight: 700; color: #fff; }
.an-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.an-dot--p { background: #6ea2ff; } .an-dot--i { background: var(--psl-mint); }
.an-receipt__table { margin-top: 14px; font-size: .88rem; }
.an-receipt__table summary { cursor: pointer; font-weight: 600; color: var(--psl-mint-on-navy); }
.an-receipt__table summary:hover { color: #fff; }
.an-receipt__table .table-responsive { margin-top: 10px; border-radius: 10px; background: #fff; }
.an-receipt__table table { margin: 0; color: var(--psl-ink); }
.an-rates .psl-rates .an-rates__note { margin: 0; padding: 14px 16px; border-radius: var(--psl-radius-sm); font-size: .85rem; line-height: 1.6;
    color: var(--psl-ink-2); background: #fff; border: 1px solid var(--psl-line); }
@media (prefers-reduced-motion: reduce) { .an-price__row { transition: none; } }

/* phones: no body text under 14px in the rates section (responsive audit) */
@media (max-width: 767.98px) {
    .an-price__top .an-badge, .an-price__label, .an-price__when, .an-receipt__kicker, .an-receipt__apr, .an-receipt__due-label,
    .an-receipt__due-sub, .an-receipt__legend span, .psl-rates p.psl-note, .psl-rates p.psl-note strong, .psl-rates p.psl-note a,
    .an-rates .psl-rates .an-rates__note { font-size: .875rem; }
}

/* links inside notes are underlined (axe link-in-text-block) */
.psl-rates .psl-note a, .an-rates__note a { text-decoration: underline; text-underline-offset: 2px; }

/* Toast: the form validation summary pops here (top-right) instead of inline text; see templates/footer.php pslToast(). */
.psl-toasts { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px;
    max-width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.psl-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
    font-size: .92rem; line-height: 1.4; color: #fff; background: #11213f; box-shadow: 0 12px 30px rgba(11, 39, 104, .28);
    white-space: pre-line; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
.psl-toast.is-in { opacity: 1; transform: translateY(0); }
.psl-toast--error { background: var(--psl-red, #c62828); }
.psl-toast--success { background: var(--psl-mint-600, #07704a); }
.psl-toast__icon { flex: 0 0 auto; margin-top: 1px; }
.psl-toast__msg { flex: 1 1 auto; }
.psl-toast__close { flex: 0 0 auto; margin: -2px -4px 0 4px; padding: 0 4px; font-size: 1.1rem; line-height: 1.2; color: inherit;
    background: none; border: 0; cursor: pointer; opacity: .8; }
.psl-toast__close:hover { opacity: 1; }
@media (max-width: 480px) { .psl-toasts { left: 18px; right: 18px; max-width: none; } }

/* ---------------------------------------------------------------- submit button: loading state (spinner)
   Shown by pslBtnLoading() in templates/footer.php for the 1-2s step round-trip. The button is disabled
   while loading, but we keep the brand fill (not the grey :disabled look) so the spinner stays legible. */
.an-submit.is-loading, .submit.is-loading { display: flex; align-items: center; justify-content: center; gap: 10px;
    color: #fff; background: linear-gradient(135deg, var(--psl-blue, #0f62fe), var(--psl-navy-800, #0b2768));
    cursor: progress; opacity: .92; }
.psl-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: psl-spin .6s linear infinite; }
/* overlay spinner for an <input type=submit> (it can't hold a child): pinned to the button's right edge */
.psl-spin-ov { position: absolute; right: 18px; top: 50%; margin-top: -9px; pointer-events: none; }
@keyframes psl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .psl-spin { animation-duration: 1.4s; } }