/* Design tokens — single source of truth, shared with the console design
   language (static/css/console.css). Light values are WCAG-AA on white;
   html[data-theme="dark"] overrides below give every token-driven surface
   dark mode for free. */
:root{
  --pfx-bg:#FFFFFF;--pfx-surface:#FFFFFF;--pfx-well:#F4F6FB;
  --pfx-ink:#0F163A;--pfx-ink-2:#3A4258;--pfx-muted:#4B5565;--pfx-faint:#667085;
  --pfx-navy:#0B112E;--pfx-navy-2:#111C4B;
  --pfx-accent:#14AEDF;--pfx-accent-deep:#0879A1;--pfx-accent-soft:#EAF8FD;
  --pfx-accent-glow:rgba(20,174,223,.16);
  --pfx-btn-bg:#14AEDF;--pfx-btn-hover:#0E96C2;--pfx-btn-fg:#FFFFFF;
  --pfx-btn-grad:linear-gradient(180deg,#1BB5E6 0%,#0C86B2 100%);
  --pfx-btn-grad-hover:linear-gradient(180deg,#0E96C2 0%,#0B7DA6 100%);
  --pfx-ok:#0B7B55;--pfx-warn:#A16207;--pfx-danger:#C7431F;
  --pfx-ok-soft:#E7F8F0;--pfx-ok-line:#BEEBD6;
  --pfx-danger-soft:#FDECEC;--pfx-danger-line:#FBD5D5;
  --pfx-line:#E7EAF1;--pfx-line-2:#D6DCE6;
  --pfx-r-sm:10px;--pfx-r-md:14px;--pfx-r-lg:22px;
  --pfx-sans:Inter,system-ui,sans-serif;
  --pfx-display:'Space Grotesk',Inter,system-ui,sans-serif;
  --pfx-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --pfx-bg:#07090F;--pfx-surface:#111624;--pfx-well:#171D2C;
  --pfx-ink:#E7EAF2;--pfx-ink-2:#C6CCDB;--pfx-muted:#9AA3B8;--pfx-faint:#7A849C;
  --pfx-accent:#14AEDF;--pfx-accent-deep:#2CC0EE;--pfx-accent-soft:rgba(44,192,238,.12);
  --pfx-accent-glow:rgba(44,192,238,.22);
  --pfx-btn-bg:#14AEDF;--pfx-btn-hover:#0E96C2;--pfx-btn-fg:#FFFFFF;
  --pfx-btn-grad:linear-gradient(180deg,#1BB5E6 0%,#0C86B2 100%);
  --pfx-btn-grad-hover:linear-gradient(180deg,#0E96C2 0%,#0B7DA6 100%);
  --pfx-ok:#2FBE8A;--pfx-warn:#E5A343;--pfx-danger:#F0655C;
  --pfx-ok-soft:rgba(47,190,138,.14);--pfx-ok-line:rgba(47,190,138,.4);
  --pfx-danger-soft:rgba(240,101,92,.14);--pfx-danger-line:rgba(240,101,92,.4);
  --pfx-line:#212939;--pfx-line-2:#2F384D;
  color-scheme:dark;
}
.pfx-mono{font-family:var(--pfx-mono)}
/* Public theme toggle: sun shows in dark, moon in light */
.pfx-theme-sun{display:none}
html[data-theme="dark"] .pfx-theme-sun{display:block}
html[data-theme="dark"] .pfx-theme-moon{display:none}

/* Typography niceties: headings wrap symmetrically (no orphan words);
   .pfx-nowrap-lg keeps a heading on one line once there's desktop room. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.pfx-nowrap-lg{text-wrap:balance}
@media(min-width:1100px){.pfx-nowrap-lg{white-space:nowrap}}

/* Base resets */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--pfx-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:Inter,system-ui,sans-serif;color:var(--pfx-ink);line-height:1.6}
::selection{background:var(--pfx-btn-bg);color:var(--pfx-btn-fg)}
a{text-decoration:none;color:inherit}
input,select,textarea,button{font-family:inherit}
input[type=range]{accent-color:#14AEDF}
[x-cloak]{display:none!important}

/* Icons */
.pfx-ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pfx-fic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Keyframes */
@keyframes pfxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pfxFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes pfxRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pfxBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pfxSheen{from{background-position:-220% 0}to{background-position:220% 0}}

/* Animation helpers */
.pfx-rise{animation:pfxRise .7s cubic-bezier(.2,.7,.2,1) both}
.pfx-mosheen{background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);background-size:220% 100%;animation:pfxSheen 2.4s linear infinite}

/* Hover states — cards & sections */
.pfx-svc:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(15,22,58,.4);border-color:var(--pfx-accent-glow)}
.pfx-svc:hover .pfx-svcico{background:var(--unit,#14AEDF);color:#fff;transform:rotate(-6deg) scale(1.05)}
.pfx-prop:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(15,22,58,.45)}
.pfx-prop:hover .pfx-photo{transform:scale(1.06)}
.pfx-prod:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(15,22,58,.4)}
.pfx-search:focus-within{border-color:#14AEDF;box-shadow:0 0 0 4px rgba(20,174,223,.14)}
.pfx-search button:hover{background:var(--pfx-btn-hover)}
.pfx-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* Hover states — buttons */
/* Crisper white-on-brand CTAs: brand gradient (deepens toward the label
   baseline) + a whisper of ink shadow. background-image!important beats the
   inline flat fills still present on legacy templates. */
.pfx-btnp,.pfx-searchbtn,.pfx-mcta,.pfx-advapply,.pfx-dbtn-primary{
  text-shadow:0 1px 2px rgba(6,18,28,.35);
  background-image:var(--pfx-btn-grad)!important}
.pfx-btnp:hover,.pfx-searchbtn:hover,.pfx-mcta:hover,.pfx-advapply:hover,.pfx-dbtn-primary:hover{
  background-image:var(--pfx-btn-grad-hover)!important}
.pfx-btnp:hover{box-shadow:0 16px 34px -10px rgba(20,174,223,.7)!important;transform:translateY(-2px)}
.pfx-btns:hover{border-color:#14AEDF;color:#14AEDF;transform:translateY(-2px)}
.pfx-btnd:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.pfx-vcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(15,22,58,.4)}

/* Hover states — links & misc */
.pfx-link:hover{gap:12px;color:var(--pfx-accent-deep)}
.pfx-step:hover .pfx-stepnum{background:#14AEDF;color:#fff}
.pfx-fab:hover{transform:scale(1.06)}

/* Grid layout for Alpine x-show panels: display must come from a class —
   Alpine restores display:'' when re-showing, which would drop an inline
   display:grid and collapse the field gaps. */
.pfx-xgrid{display:grid}
/* Same reason, for the two shapes the contact page toggles: a flex row and a
   flex column. An inline display:flex on an x-show element survives exactly
   one hide. */
.pfx-xflex{display:flex}
.pfx-xflexcol{display:flex;flex-direction:column}

/* Stats strip: centred grid on desktop, horizontal snap-slider on mobile */
.pfx-statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;text-align:center}
@media(max-width:760px){
  .pfx-statstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;text-align:left;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .pfx-statstrip::-webkit-scrollbar{display:none}
  .pfx-statstrip>div{flex:0 0 64%;max-width:280px;scroll-snap-align:center;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:18px;padding:22px 24px}
}

/* Mobile sticky bottom nav */
.pfx-btmnav{display:none}
@media(max-width:760px){
  .pfx-btmnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(11,17,46,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.1);padding:6px 4px calc(6px + env(safe-area-inset-bottom));font-family:var(--pfx-display)}
  .pfx-btmnav-a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;border-radius:12px;color:#A9B4D6;font-size:10.5px;font-weight:700;letter-spacing:-.01em;text-align:center;line-height:1.1;transition:color .18s,background .18s}
  .pfx-btmnav-a .pfx-ic{width:21px;height:21px}
  .pfx-btmnav-a.is-active{color:#fff;background:rgba(20,174,223,.22)}
  .pfx-fab{bottom:calc(72px + env(safe-area-inset-bottom))!important}
  footer > div:last-child{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
.pfx-soc:hover{background:#14AEDF!important;color:#fff!important;border-color:#14AEDF!important}

/* The calculator's Start my application, pinned above the tab bar on a phone
   (owner, 29 Oct 2026). Ad traffic lands here, and on a phone the button sat
   two screens down, below the whole form; now it is in reach from the first
   screen and keeps the figures it carries as they change. 61px is the tab
   bar, measured at 390px. The contact button and the footer move up out of
   its way. */
/* The calculator's heading on a phone: a title and straight into the form
   (owner, 29 Oct 2026). The line under it and the desktop padding took most
   of the first screen before a single figure showed. */
@media(max-width:760px){
  .pfx-calchero{padding:18px 18px 0!important}
  section:has(> .pfx-calchero){background:none!important}
  .pfx-calchero h1{font-size:28px!important;margin:0!important}
  .pfx-calchero-sub{display:none}
}
@media(max-width:760px){
  .pfx-calc-cta{position:fixed!important;left:12px;right:12px;z-index:65;
    bottom:calc(61px + 10px + env(safe-area-inset-bottom));margin:0!important;
    box-shadow:0 12px 26px -10px rgba(8,121,161,.6)}
  body:has(.pfx-calc-cta) .pfx-fab{bottom:calc(61px + 10px + 54px + 14px + env(safe-area-inset-bottom))!important}
  body:has(.pfx-calc-cta) footer > div:last-child{padding-bottom:calc(61px + 10px + 54px + 20px + env(safe-area-inset-bottom))}
}

/* Footer links */
.pfx-fa{color:#AEB8D0}
.pfx-fa:hover{color:#14AEDF!important}
.pfx-credit:hover{color:#14AEDF!important}

/* FAQ */
details.pfx-faq summary::-webkit-details-marker{display:none}
details.pfx-faq[open] .pfx-faqchev{transform:rotate(180deg)}
details.pfx-faq[open] summary{color:#14AEDF}

/* Nav dropdown */
.pfx-dd{position:relative}
.pfx-ddmenu{display:none;position:absolute;top:100%;left:0;padding-top:14px;z-index:60}
.pfx-dd:hover .pfx-ddmenu,.pfx-dd:focus-within .pfx-ddmenu{display:block}
/* focus-within so a dropdown opens for a keyboard as well as a mouse;
   hover alone left the account menu's links unreachable by tab. */
.pfx-dd:hover .pfx-ddtrig{color:#14AEDF!important}
.pfx-ddlink:hover{background:var(--pfx-accent-soft)!important}
.pfx-ddlink:hover .pfx-ddlt{color:#14AEDF!important}

/* Responsive */
@media(max-width:1259px){.pfx-navlinks{display:none!important}.pfx-navcta{display:none!important}.pfx-burger{display:inline-flex!important}}
@media(max-width:920px){.pfx-herogrid{grid-template-columns:1fr!important}.pfx-heromock{display:none!important}.pfx-calcgrid{grid-template-columns:1fr!important}}
@media(max-width:560px){.pfx-h1{font-size:38px!important}.pfx-herocta{flex-direction:column!important;align-items:stretch!important}.pfx-trustrow{flex-wrap:wrap!important}}

/* Auth split layout (form + marketing aside) */
.pfx-authgrid{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
@media(max-width:860px){.pfx-authgrid{grid-template-columns:1fr}.pfx-aside{display:none!important}}

/* App shell (dashboard + account) */
.pfx-shell{font-family:Inter,system-ui,sans-serif;color:var(--pfx-ink);min-height:100vh;overflow-x:hidden;line-height:1.6;display:flex}
.pfx-shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
@media(min-width:981px){.pfx-shell{height:100vh;overflow:hidden}.pfx-shell-main{height:100%;overflow-y:auto}}

/* Account sidebar */
.pfx-side{width:256px;flex:none;background:var(--pfx-surface);border-right:1px solid var(--pfx-line);height:100%;overflow-y:auto;display:flex;flex-direction:column;padding:18px 16px}
.pfx-side-logo{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 16px}
.pfx-side-user{display:flex;align-items:center;gap:12px;padding:12px 10px;background:var(--pfx-well);border:1px solid var(--pfx-line);border-radius:14px;margin-bottom:14px}
.pfx-side-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--pfx-accent-deep),#0B4460);color:#fff;font-family:var(--pfx-display);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.pfx-side-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.pfx-side-div{height:1px;background:var(--pfx-line);margin:10px 4px}
.pfx-side-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:10px 0 2px;padding:7px 10px;border:none;background:transparent;border-radius:9px;cursor:pointer;font-family:var(--pfx-display);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pfx-muted);white-space:nowrap;transition:background .18s,color .18s}
.pfx-side-sec:hover{background:var(--pfx-well);color:var(--pfx-ink)}
.pfx-side-grp-items{display:flex;flex-direction:column;gap:2px}
.pfx-sec-chev{width:15px!important;height:15px!important;transition:transform .2s;opacity:.7}
.pfx-sec-chev.is-open{transform:rotate(180deg)}
.pfx-snav{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-weight:600;font-size:13.5px;padding:9px 12px;border-radius:10px;transition:background .18s,color .18s;background:transparent;color:var(--pfx-muted);text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.pfx-snav .pfx-ic{width:19px;height:19px;flex:none}
.pfx-snav:hover{background:var(--pfx-accent-soft);color:#0A8DB6}
.pfx-snav.is-active{background:var(--pfx-accent-soft);color:#0A8DB6}
.pfx-snav.is-active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#14AEDF}
.pfx-row:hover{background:var(--pfx-well)!important}
.pfx-qa:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(15,22,58,.4)!important;border-color:var(--pfx-accent-glow)!important}
@media(min-width:981px){.pfx-mtop{display:none!important}.pfx-backdrop{display:none!important}}
@media(max-width:980px){.pfx-side{position:fixed!important;left:0;top:0;height:100dvh!important;z-index:90;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 60px rgba(11,17,46,.4)}.pfx-side.pfx-open{transform:translateX(0)!important}.pfx-mclose{display:flex!important}}

/* Admin (dashboard) sidebar — dark variant */
.pfx-dside{width:252px;flex:none;background:#0B112E;height:100%;overflow-y:auto;display:flex;flex-direction:column;padding:20px 16px}
.pfx-dside-brand{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 20px}
.pfx-dside-logo{display:flex;align-items:center;gap:10px}
.pfx-dside-logo-chip{background:var(--pfx-surface);padding:7px 10px;border-radius:10px;display:flex}
.pfx-dside-tag{color:rgba(255,255,255,.66);font-size:12px;font-weight:700;letter-spacing:.05em}
.pfx-dside-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.pfx-dside-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:10px 0 2px;padding:7px 10px;border:none;background:transparent;border-radius:9px;cursor:pointer;font-family:var(--pfx-display);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;transition:background .18s,color .18s}
.pfx-dside-sec:hover{background:rgba(255,255,255,.06);color:#fff}
.pfx-dside-grp-items{display:flex;flex-direction:column;gap:2px}
.pfx-dnav{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-weight:600;font-size:13.5px;padding:8px 12px;border-radius:10px;transition:background .18s,color .18s;background:transparent;color:rgba(255,255,255,.82);text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.pfx-dnav .pfx-ic{width:18px;height:18px;flex:none}
.pfx-dnav:hover{background:rgba(255,255,255,.06);color:#fff}
.pfx-dnav.is-active{background:rgba(20,174,223,.18);color:#A5E6F9}
.pfx-dnav.is-active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#14AEDF}
.pfx-dnav-badge{margin-left:auto;background:#14AEDF;color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.pfx-dnav-foot{color:rgba(255,255,255,.78)}
.pfx-dnav-foot:hover{background:rgba(255,255,255,.06);color:#fff}
@media(max-width:980px){.pfx-dside{position:fixed!important;left:0;top:0;height:100dvh!important;z-index:90;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 60px rgba(11,17,46,.5)}.pfx-dside.pfx-open{transform:translateX(0)!important}}

/* Form wizard stepper */
.pfx-wsteps{display:flex;align-items:flex-start;gap:0;margin-bottom:26px;flex-wrap:wrap}
.pfx-wstep{display:flex;align-items:center;min-width:80px}
.pfx-wstep-btn{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.pfx-wstep-num{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:var(--pfx-surface);color:var(--pfx-faint);border:2px solid var(--pfx-line-2);transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.pfx-wstep-num .pfx-ic{width:16px;height:16px;stroke-width:2.5}
.pfx-wstep-num.is-active{color:#14AEDF;border-color:#14AEDF;box-shadow:0 0 0 4px rgba(20,174,223,.14)}
.pfx-wstep-num.is-done{background:var(--pfx-btn-bg);color:var(--pfx-btn-fg);border-color:var(--pfx-btn-bg)}
.pfx-wstep-label{font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--pfx-faint);transition:color .25s}
.pfx-wstep-label.is-active{color:#14AEDF}
.pfx-wstep-label.is-done{color:var(--pfx-ink)}
.pfx-wstep-line{height:2px;flex:1;margin:0 8px;margin-bottom:24px;background:var(--pfx-line-2);border-radius:2px;transition:background .3s}
.pfx-wstep-line.is-done{background:#14AEDF}
@media(max-width:560px){.pfx-wstep{min-width:34px}.pfx-wstep-label{display:none}}
@media(max-width:600px){.pfx-statgrid{grid-template-columns:1fr 1fr!important}.pfx-2col{grid-template-columns:1fr!important}}
.pfx-tcard:hover{border-color:var(--pfx-accent-glow)!important}
/* Selected state driven by the native radio the card wraps */
.pfx-tcard:has(input:checked),.pfx-selcard:has(input:checked){border-color:#14AEDF!important;background:var(--pfx-accent-soft)!important}
.pfx-tcard-check{display:none;position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:#14AEDF;color:#fff;align-items:center;justify-content:center}
.pfx-tcard:has(input:checked) .pfx-tcard-check{display:flex}
.pfx-upl:hover{border-color:#14AEDF!important;background:var(--pfx-accent-soft)!important}

/* ── Applying on somebody else's behalf ────────────────────────────────────
   An agent or branch officer can spend five steps on a customer's application,
   and nothing on those steps used to say whose. Deliberately loud: this is not
   a decoration, it is the answer to "am I typing into the right file", and it
   has to survive being glanced at rather than read. */
.pfx-actingbar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin-bottom:20px;padding:13px 16px;border-radius:14px;
  background:var(--pfx-accent-soft);border:1.5px solid var(--pfx-accent-glow)}
.pfx-actingbar-ic{width:34px;height:34px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--pfx-accent-deep);color:#fff}
.pfx-actingbar-ic svg{width:17px;height:17px}
.pfx-actingbar-txt{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pfx-actingbar-lead{font-size:12.5px;color:var(--pfx-accent-deep);font-weight:600;
  width:100%;letter-spacing:.02em}
.pfx-actingbar-who{font-family:var(--pfx-display);font-size:16px;color:var(--pfx-ink);line-height:1.2}
.pfx-actingbar-meta{font-size:12.5px;color:var(--pfx-muted);font-family:var(--pfx-mono)}
.pfx-actingbar-stop button{border:1.5px solid var(--pfx-accent-glow);background:var(--pfx-surface);
  color:var(--pfx-accent-deep);font-weight:700;font-size:13px;padding:8px 14px;
  border-radius:10px;cursor:pointer;font-family:inherit;transition:.18s}
.pfx-actingbar-stop button:hover{border-color:var(--pfx-accent-deep);background:var(--pfx-accent-soft)}
@media (max-width:560px){
  .pfx-actingbar{gap:10px;padding:11px 13px}
  .pfx-actingbar-who{font-size:15px;width:100%}
  /* The identifiers share one wrapping line rather than taking three. A line
     each read as a form rather than a label, and cost 58px on a screen where
     the loan-type cards had just been cut down to earn that space back. */
  .pfx-actingbar-meta{font-size:12px}
  /* The ID and the phone are what separate two walk-ins. The email is a third
     way of saying the same thing and is the one to drop when space is short. */
  .pfx-actingbar-meta--email{display:none}
  .pfx-actingbar-stop{width:100%}
  .pfx-actingbar-stop button{width:100%}
}

/* ── Payout method ─────────────────────────────────────────────────────────
   Where an approved loan is sent. Three cards rather than the radio strip this
   replaced: the strip put two anonymous field stacks under a segmented control,
   so the fields belonged to nothing you could see, and adding cash would have
   made a third orphan.

   Same shape as .pfx-tcard on step 1 deliberately. An applicant meets the
   loan-type cards, then two steps later meets this; making them look like the
   same kind of question is most of what "usable" means here.

   Selection is driven off the native radio with :has(), as .pfx-tcard is, so a
   card stays correct with JavaScript off and cannot disagree with what will
   actually be posted. */
.pfx-paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.pfx-paycard{position:relative;display:flex;flex-direction:column;gap:9px;cursor:pointer;
  padding:16px 15px;border:2px solid var(--pfx-line-2);border-radius:16px;
  background:var(--pfx-surface);transition:border-color .18s,background .18s,transform .18s}
.pfx-paycard:hover{border-color:var(--pfx-accent-glow);transform:translateY(-1px)}
.pfx-paycard:has(input:checked){border-color:#14AEDF;background:var(--pfx-accent-soft)}
/* Keyboard users get the same ring the fields get: the radio inside is visually
   hidden, so without this the card is reachable by Tab and gives no sign of it. */
.pfx-paycard:has(input:focus-visible){outline:2px solid #14AEDF;outline-offset:2px}
.pfx-paycard input{position:absolute;opacity:0;pointer-events:none}
.pfx-paycard-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--pfx-well);color:var(--pfx-ink-2);transition:.18s}
.pfx-paycard:has(input:checked) .pfx-paycard-ic{background:#14AEDF;color:#fff}
.pfx-paycard-ic svg{width:19px;height:19px}
.pfx-paycard-name{font-family:var(--pfx-display);font-weight:700;font-size:15px;color:var(--pfx-ink);line-height:1.25}
.pfx-paycard-sub{font-size:12.5px;color:var(--pfx-faint);line-height:1.4}
.pfx-paycard-check{display:none;position:absolute;top:12px;right:12px;width:20px;height:20px;
  border-radius:50%;background:#14AEDF;color:#fff;align-items:center;justify-content:center}
.pfx-paycard-check svg{width:12px;height:12px}
.pfx-paycard:has(input:checked) .pfx-paycard-check{display:flex}

/* The fields for the chosen method, in a well beneath the cards, so the section
   reads as one decision and its consequence rather than a control and some
   inputs that happen to follow it. */
.pfx-paypanel{margin-top:16px;padding:20px;border:1px solid var(--pfx-line);
  border-radius:16px;background:var(--pfx-well);animation:pfxPayIn .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes pfxPayIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pfx-paypanel .pfx-formfield:last-child{margin-bottom:0}
.pfx-paypanel .pfx-field{background:var(--pfx-surface)}

/* What we will actually do with the money, in words, under the fields they just
   filled. This is a payout destination: a typo here sends money to a stranger,
   and re-reading four inputs is not how anybody checks that. */
.pfx-paysummary{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;
  border-radius:12px;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);
  font-size:13px;font-weight:600;line-height:1.45}
.pfx-paysummary svg{width:17px;height:17px;flex:none;margin-top:1px}
@media (prefers-reduced-motion:reduce){
  .pfx-paycard,.pfx-paypanel{transition:none;animation:none}
  .pfx-paycard:hover{transform:none}
}
@keyframes pfxPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.pfx-pop{animation:pfxPop .35s cubic-bezier(.2,.7,.2,1) both}

/* Form components */
.pfx-field{width:100%;padding:13px 15px;border:1.5px solid var(--pfx-line-2);border-radius:12px;font-size:15px;background:var(--pfx-surface);color:var(--pfx-ink);transition:border-color .18s,box-shadow .18s;box-sizing:border-box}
.pfx-field::placeholder{color:var(--pfx-faint)}
.pfx-field:hover{border-color:var(--pfx-line-2)}
.pfx-field:focus{outline:none;border-color:#14AEDF;box-shadow:0 0 0 4px rgba(20,174,223,.14)}
/* A 6-digit code from an authenticator app, drawn as six boxes on a tray.
   pfx.js ([data-pfx-otp]) builds the boxes and lays the real input over them,
   transparent, so typing, pasting and a phone's one-time-code autofill all land
   in one ordinary field that submits as `code`. Without the script the input
   is left as a plain field and still works. The overlay selectors carry the
   console's four-class depth so `.cx .pfx-field` chrome cannot paint a border
   or a background back onto the transparent input. */
.pfx-otp{position:relative;display:inline-flex;gap:8px;padding:10px;border-radius:14px;background:var(--pfx-well);max-width:100%;box-sizing:border-box}
.pfx-otp-cell{width:44px;height:52px;flex:0 1 44px;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--pfx-surface);border:1.5px solid transparent;border-radius:8px;font-family:var(--pfx-display,inherit);font-size:26px;font-weight:700;line-height:1;color:var(--pfx-ink);transition:border-color .15s,box-shadow .15s}
.pfx-otp-cell.is-active{border-color:#14AEDF;box-shadow:0 0 0 3px rgba(20,174,223,.16)}
.pfx-otp-cell.is-active:empty::after{content:"";width:2px;height:26px;background:var(--pfx-ink);animation:pfxOtpCaret 1s steps(1) infinite}
@keyframes pfxOtpCaret{50%{opacity:0}}
.is-invalid .pfx-otp-cell{border-color:var(--pfx-danger,#D92D20)}
.pfx-otp>.pfx-otp-input,
.cx .pfx-formfield .pfx-otp>.pfx-field.pfx-otp-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:14px;background:transparent;box-shadow:none;outline:none;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;text-indent:0;cursor:text;-webkit-text-fill-color:transparent}
.pfx-otp>.pfx-otp-input::selection{background:transparent}
.pfx-otp>.pfx-otp-input::placeholder{color:transparent}
.pfx-otp>.pfx-otp-input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px transparent inset;transition:background-color 9999s}
@media (prefers-reduced-motion:reduce){.pfx-otp-cell.is-active:empty::after{animation:none}}
.pfx-otp+.pfx-error,.cx .pfx-otp+.pfx-error:empty{display:block;min-height:1.5em}
select.pfx-field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6378' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
textarea.pfx-field{min-height:96px;resize:vertical}
/* Forms are flat, at rest and on interaction. The elevation and glow shadows
   are gone from the form containers, controls and submit buttons above; this
   catches the shared button styles, which are used both in a hero (where the
   lift is the design) and as a form's submit (where it is not). Scoped to
   `form` so only the second case is flattened, and !important because
   .pfx-btnp:hover sets its shadow that way.

   Deliberately not listed here: the flat focus ring (0 0 0 Npx) on inputs, and
   the -webkit-box-shadow inset that overrides Chrome's autofill fill. Neither
   is elevation, and dropping the first would remove the visible focus state. */
/* Depth is not only box-shadow. A vertical light-to-dark gradient plus an
   embossed text-shadow is a raised button by any other name, so inside a form
   the submit gets a flat fill and flat text. Solid colours are taken from the
   ends of the gradient so the brand does not shift. */
/* The fill is for the primary button only. Applied to every submit it would
   repaint secondary and danger variants too, which is how a red Decline label
   ended up on a blue button in the console. Embossing is removed from all
   submits, since that changes no colour. */
form button[type=submit],
form input[type=submit]{text-shadow:none!important}
form .pfx-btnp,
form .pfx-searchbtn,
form .pfx-advapply,
form .pfx-dbtn-primary{text-shadow:none!important;
  background-image:none!important;background-color:#0B7DA6}
form .pfx-btnp:hover,
form .pfx-searchbtn:hover,
form .pfx-advapply:hover,
form .pfx-dbtn-primary:hover{background-image:none!important;
  background-color:#096A8A}
form .pfx-btnp,
form .pfx-btnp:hover,
form .pfx-btn-next,
form .pfx-btn-next:hover,
form button[type=submit]:hover,
form input[type=submit]:hover{box-shadow:none!important}
form .pfx-btnp:hover,
form .pfx-btn-next:hover{transform:none}
.pfx-field.is-invalid,.is-invalid .pfx-field{border-color:#E4572E;box-shadow:0 0 0 4px rgba(228,87,46,.12)}
.pfx-formfield{margin-bottom:18px}
.pfx-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.pfx-formgrid>.pfx-formfield:has(textarea),.pfx-formgrid>.pfx-formfield:has(.pfx-checkgrid){grid-column:1/-1}
/* Explicit full width, for fields the :has() rules can't detect — a choice
   list or a lone checkbox squeezed into half a column is unreadable. */
.pfx-formgrid>.pfx-formfield--wide{grid-column:1/-1}
/* A form with one field in it. The grid is two columns, so a lone field sat in
   the left half with dead space beside it and a full-width button underneath,
   which reads as a layout that failed rather than a choice. Password reset is
   the page where this shows: one email box, nothing to pair it with. Every
   other auth form has two fields, which is why it went unnoticed. */
.pfx-formgrid>.pfx-formfield:only-child{grid-column:1/-1}

/* Live password meter
   -------------------
   What stands in for the four-line rule list Django used to print above a
   new-password box. Built by pfx.js; see users.forms.live_password_meter for
   why the list went.

   Everything here is closed until the box has something in it. An empty field
   with a grey bar and three unticked rules underneath is the same paragraph of
   law in a different typeface, which is what we were asked to remove. */
.pfx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* A grid that holds a password meter stacks: two ~200px columns is not enough
   width for a strength bar and three rules, and a password form is read down
   the page anyway. Scoped to the grid that actually has one, so the login and
   register layouts (which pair their fields on purpose) are untouched. */
.pfx-formgrid:has([data-pfx-password])>.pfx-formfield{grid-column:1/-1}

.pfx-pw{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease,
             margin-top .3s cubic-bezier(.2,.7,.2,1)}
.pfx-pw.is-open{max-height:140px;opacity:1;margin-top:11px}
.pfx-pw-top{display:flex;align-items:center;gap:12px}
.pfx-pw-bar{display:flex;gap:4px;flex:1;min-width:0}
.pfx-pw-level{flex:none;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--pfx-faint);transition:color .25s ease}
.pfx-pw-level:empty{display:none}
.pfx-pw[data-level="1"] .pfx-pw-level{color:var(--pfx-danger)}
.pfx-pw[data-level="2"] .pfx-pw-level{color:var(--pfx-warn)}
.pfx-pw[data-level="3"] .pfx-pw-level{color:var(--pfx-accent-deep)}
.pfx-pw[data-level="4"] .pfx-pw-level{color:var(--pfx-ok)}
.pfx-pw-bar i{flex:1;height:4px;border-radius:999px;background:var(--pfx-line-2);
  transition:background .3s ease}
/* The bar is coloured by the score, not by how many segments are lit, so four
   green segments can never mean four red ones. */
.pfx-pw[data-level="1"] .pfx-pw-bar i.is-on{background:var(--pfx-danger)}
.pfx-pw[data-level="2"] .pfx-pw-bar i.is-on{background:var(--pfx-warn)}
.pfx-pw[data-level="3"] .pfx-pw-bar i.is-on{background:var(--pfx-accent)}
.pfx-pw[data-level="4"] .pfx-pw-bar i.is-on{background:var(--pfx-ok)}
.pfx-pw-rules{display:flex;flex-wrap:wrap;gap:5px 16px;list-style:none;margin:10px 0 0;padding:0}
.pfx-pw-rules li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  line-height:1.4;color:var(--pfx-faint);transition:color .22s ease}
.pfx-pw-rules li.is-met{color:var(--pfx-ok)}
.pfx-pw-ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pfx-pw-o{opacity:.55;transition:opacity .2s ease}
/* The tick draws itself rather than appearing, which is the whole signal: it
   reads as the rule being satisfied just now, by what was just typed. */
.pfx-pw-t{stroke-width:2;stroke-dasharray:14;stroke-dashoffset:14;
  transition:stroke-dashoffset .3s cubic-bezier(.2,.7,.2,1) .04s}
.pfx-pw-rules li.is-met .pfx-pw-o,.pfx-pw-match.is-ok .pfx-pw-o{opacity:0}
.pfx-pw-rules li.is-met .pfx-pw-t,.pfx-pw-match.is-ok .pfx-pw-t{stroke-dashoffset:0}

/* The confirm box speaks only once it could be wrong. */
.pfx-pw-match{display:none;align-items:center;gap:6px;margin:9px 0 0;
  font-size:12.5px;line-height:1.4;color:var(--pfx-danger)}
.pfx-pw-match.is-open{display:inline-flex}
.pfx-pw-match.is-ok{color:var(--pfx-ok)}

@media (prefers-reduced-motion:reduce){
  .pfx-pw,.pfx-pw-bar i,.pfx-pw-level,.pfx-pw-rules li,.pfx-pw-o,.pfx-pw-t{transition:none}
}
/* Django wraps a choice list in one div of bare divs; make that wrapper the
   grid. Descendant, not child: the labels sit one level deeper.

   :not(.pfx-choicerow) so a list that has asked to be a ROW is left alone. This
   is an exclusion rather than an override because the two cannot both win on
   specificity: this selector carries a :has() whose argument is itself
   specific, and a plain .pfx-choicerow could not outrank it without an
   escalation that the next person would have to unpick. Not matching at all is
   the honest way to say "this rule is the default, and there is an opt-out".

   .cx-pickgrid opts out for the same reason: the console's negotiator picker is
   a grid of cards with their own widths, padding and typography, and this rule
   outranks .cx .cx-pickgrid on specificity, so it was silently re-columning it
   to 220px and re-spacing the labels inside. */
.pfx-formfield--wide>div:not(.pfx-choicerow,.cx-pickgrid):has(label input[type=checkbox]),
.pfx-formfield--wide>div:not(.pfx-choicerow,.cx-pickgrid):has(label input[type=radio]){display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin-top:4px}
.pfx-formfield--wide>div:not(.pfx-choicerow,.cx-pickgrid) label{display:flex;align-items:center;
  gap:9px;font-size:14px;color:var(--pfx-ink-2);cursor:pointer}
.pfx-formfield--wide>div:not(.pfx-choicerow,.cx-pickgrid) label input{width:17px;height:17px;
  accent-color:#14AEDF;flex:none}
@media(max-width:640px){.pfx-formgrid{grid-template-columns:1fr}}
.pfx-label{display:block;font-weight:600;font-size:14px;color:var(--pfx-ink-2);margin-bottom:7px}
.pfx-label .req{color:#E4572E;margin-left:2px}
.pfx-help{font-size:12.5px;color:var(--pfx-faint);margin-top:6px}
.pfx-error{font-size:12.5px;color:var(--pfx-danger);margin-top:6px;font-weight:600}

/* ── Fieldsets ─────────────────────────────────────────────────────────────
   Grouping is what makes a fifteen-field form feel like four small asks
   instead of one long chore. The legend is the mono micro-label from §2 of
   the design system, which is what carries the console identity. */
.pfx-fieldset+.pfx-fieldset{margin-top:26px;padding-top:24px;border-top:1px solid var(--pfx-line)}
.pfx-legend{font-family:var(--pfx-mono,ui-monospace,monospace);font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--pfx-faint);
  margin:0 0 14px}

/* ── Wizard stepper ────────────────────────────────────────────────────────
   One implementation for every multi-step flow. */
.pfx-steps-list{display:flex;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0}
.pfx-step{display:flex;align-items:flex-start;flex:1;min-width:0;position:relative}
.pfx-step:last-child{flex:0 0 auto}
.pfx-step-dot{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13.5px;background:var(--pfx-surface);
  color:var(--pfx-faint);border:2px solid var(--pfx-line-2);transition:.28s}
.pfx-step-dot .pfx-ic{width:15px;height:15px}
.pfx-step.is-current .pfx-step-dot{color:var(--pfx-accent-deep);border-color:#14AEDF;
  box-shadow:0 0 0 4px rgba(20,174,223,.14)}
.pfx-step.is-done .pfx-step-dot{background:var(--pfx-btn-bg);color:var(--pfx-btn-fg);border-color:#14AEDF}
.pfx-step-label{font-size:12.5px;font-weight:600;color:var(--pfx-faint);white-space:nowrap;
  margin-left:10px;align-self:center}
.pfx-step.is-current .pfx-step-label{color:var(--pfx-accent-deep)}
.pfx-step.is-done .pfx-step-label{color:var(--pfx-ink)}
.pfx-step-bar{flex:1;height:2px;min-width:14px;margin:15px 12px 0;background:var(--pfx-line-2)}
.pfx-step.is-done .pfx-step-bar{background:#14AEDF}
.pfx-steps-count{font-family:var(--pfx-mono,ui-monospace,monospace);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--pfx-faint);margin:14px 0 0}
/* Labels are the first thing to go: a five-step bar must never wrap. */
@media (max-width:720px){
  .pfx-step-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pfx-step-bar{margin-left:8px;margin-right:8px}
}

/* ── Form page shell ───────────────────────────────────────────────────────
   One width for every single-column form page. These were 680, 760 and 840px
   — three measures for the same shape, which is why the wealth enquiry looked
   thinner than everything else.

   820px is set by the content: minus the card's clamp padding it leaves two
   ~366px columns in .pfx-formgrid, which is a comfortable field width and
   still a readable measure for help text.

   Pages with a genuine sidebar (contact, checkout) are wider on purpose and
   do not use this. */
:root{--pfx-form-measure:820px}
.pfx-formpage{max-width:var(--pfx-form-measure);margin:0 auto;
  padding:clamp(28px,4vw,52px) clamp(16px,4vw,24px) clamp(64px,8vw,96px)}
/* For a form sitting inside a wider section — the contact form spanned its
   full 1240px section, which gave it 525px-wide name fields and made every
   other form look thin beside it.

   Carries the same horizontal padding as .pfx-formpage on purpose: without it
   the card inside ends up 48px wider than the same card on a form page, so the
   two still would not line up. */
.pfx-formmeasure{max-width:var(--pfx-form-measure);margin-inline:auto;
  padding-inline:clamp(16px,4vw,24px)}

/* ── Wizard containers ─────────────────────────────────────────────────────
   One card for every step of every wizard. There were five variants of this
   before — 20/22/24px radii with four different padding clamps — which is why
   the flows never quite matched each other. */
.pfx-formcard{background:var(--pfx-surface);border:1px solid var(--pfx-line);
  border-radius:22px;padding:clamp(22px,3vw,34px);
  box-shadow:none}
/* The end-of-flow panel is a genuinely different thing: bigger, calmer. */
.pfx-donecard{background:var(--pfx-surface);border:1px solid var(--pfx-line);
  border-radius:24px;padding:clamp(32px,5vw,56px);
  box-shadow:none}

/* ── Wizard buttons ────────────────────────────────────────────────────────
   Same pair on every step, so "Back" and "Continue" never move or resize
   between one screen and the next. */
.pfx-btn-back,.pfx-btn-next{display:inline-flex;align-items:center;font-weight:700;
  border-radius:13px;cursor:pointer;text-decoration:none;transition:.22s}
.pfx-btn-back{gap:8px;background:var(--pfx-surface);color:var(--pfx-ink);
  font-size:15px;padding:14px 22px;border:1.5px solid var(--pfx-line-2)}
.pfx-btn-back:hover{border-color:#14AEDF;color:#14AEDF}
.pfx-btn-next{gap:9px;background:var(--pfx-btn-bg);color:var(--pfx-btn-fg);
  font-size:16px;padding:14px 30px;border:none;
  box-shadow:none}
.pfx-btn-next:hover{transform:translateY(-1px);box-shadow:none}
.pfx-btn-next:disabled{opacity:.55;cursor:not-allowed;transform:none}
@media (prefers-reduced-motion:reduce){.pfx-btn-next:hover{transform:none}}

/* ── Wizard footer ─────────────────────────────────────────────────────────
   Back on the left, primary on the right, everywhere. */
.pfx-wiznav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px}
.pfx-wizback{color:var(--pfx-muted);font-weight:600;font-size:15px;text-decoration:none}
.pfx-wizback:hover{color:var(--pfx-ink)}

/* On a handset the pair pins to the bottom of the viewport.

   Asked for on 18 Sep 2026: these steps are long, so Continue sat several
   swipes below the fold and moved every time an answer changed the height of
   the page above it. `position:sticky` is the whole mechanism — the bar is
   still the last thing in the form, so it settles into place at the end of the
   document instead of covering the final field, and it needs no JS and no
   scroll listener.

   It did not work for the first three days of its life, and the reason is
   worth keeping: `base_apply.html` wrapped the whole wizard in
   `overflow-x:hidden`, and CSS computes the other axis of that to
   `overflow-y:auto`. That makes the wrapper a scroll container, sticky then
   sticks to *it* rather than to the viewport, and since the wrapper is as tall
   as its content the bar never pins at all. It is `overflow-x:clip` now, which
   clips without creating a scroll container. Measured, not assumed: see
   tests/test_apply_mobile.py.

   Full-bleed via negative inline margins that cancel .pfx-formpage's padding,
   because a bar inset from the edges lets the form show through the gutters
   either side and reads as floating rather than as the foot of the screen. */
@media (max-width:820px){
  .pfx-wiznav{
    position:sticky;bottom:0;z-index:30;
    margin-inline:calc(-1 * clamp(16px,4vw,24px));
    padding:12px clamp(16px,4vw,24px) calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--pfx-well);
    box-shadow:0 -1px 0 var(--pfx-line),0 -14px 18px -14px rgba(0,0,0,.20);
  }
}

/* How far through, drawn as the top edge of the bar rather than as a row
   above it. Once the stepper at the top of the page has scrolled away — which
   on a phone is within the first swipe of a four-screen step — this is the
   only orientation left, and as a 3px rule it costs none of the screen the
   bar is already spending. */
.pfx-wiznav-track{position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--pfx-line);overflow:hidden;border-radius:3px}
.pfx-wiznav-fill{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--pfx-accent-deep),var(--pfx-accent));
  transition:width .45s cubic-bezier(.2,.7,.2,1)}
/* Only while the bar is pinned. On a desktop the stepper is in view the whole
   time and a second progress indicator is just another thing on the page. */
@media (min-width:821px){.pfx-wiznav-track{display:none}}
@media (prefers-reduced-motion:reduce){.pfx-wiznav-fill{transition:none}}

/* Side by side rather than stacked, which the narrow rule used to do.
   Two full-width buttons one above the other is 120px of a pinned bar, and on
   a short handset that is a quarter of the screen permanently spent on
   navigation. Back stays as wide as its label; Continue takes the rest. */
@media (max-width:520px){
  .pfx-wiznav{gap:10px}
  .pfx-wiznav .pfx-btn-back{flex:0 0 auto;padding:14px 16px}
  .pfx-wiznav .pfx-btn-next{flex:1 1 auto;justify-content:center;padding:14px 20px}
  .pfx-wizback{text-align:center}
}

/* The field a failed Continue sent us to. Held for a moment so the eye lands
   on it, then left alone: a permanent highlight becomes part of the design and
   stops meaning anything. */
@keyframes pfx-field-flash{
  0%{box-shadow:0 0 0 0 rgba(199,67,31,.38)}
  100%{box-shadow:0 0 0 14px rgba(199,67,31,0)}
}
.pfx-formfield.is-flagged>*{border-radius:12px}
.pfx-formfield.is-flagged{animation:pfx-field-flash 1.1s ease-out 1}
@media (prefers-reduced-motion:reduce){.pfx-formfield.is-flagged{animation:none}}
.pfx-file{width:100%;font-size:14px;color:var(--pfx-muted)}
.pfx-file::file-selector-button{font-family:inherit;font-weight:600;font-size:13px;color:var(--pfx-ink);background:var(--pfx-well);border:1.5px solid var(--pfx-line-2);border-radius:10px;padding:9px 14px;margin-right:12px;cursor:pointer;transition:.18s}
.pfx-file::file-selector-button:hover{border-color:#14AEDF;color:#14AEDF}
/* Hide native filename text, keep the choose-file button (used where a custom thumbnail already shows) */
.pfx-nofilename{color:transparent;width:auto}
.pfx-nofilename::file-selector-button{color:var(--pfx-ink)}
/* File-input previews */
.pfx-prev-slot{position:relative;display:inline-flex;align-items:center;justify-content:center}
.pfx-prev-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.pfx-prev-check{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--pfx-ok);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff}
.pfx-upl-slot{position:relative;overflow:hidden}
/* Apply-tile ready state when a file is picked client-side */
.pfx-upl[data-pfx-ready]{border-color:var(--pfx-ok-line)!important;background:var(--pfx-ok-soft)!important}
/* Scoped to `input` deliberately. Django puts the widget's class on the
   *wrapper* of a CheckboxSelectMultiple as well as on each box, so an
   unscoped rule sized the whole choice list to 18px — which is what crushed
   the wealth enquiry's six options into an unreadable column. */
input.pfx-check{width:18px;height:18px;accent-color:#14AEDF}
/* Inline messages & alerts */
.pfx-msg{border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px;background:var(--pfx-accent-soft);color:var(--pfx-ok)}
.pfx-msg-error,.pfx-msg-warning{background:#FDECEC;color:#C0392B}
.pfx-alert{border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px;text-align:left}
.pfx-alert-error{background:#FDECEC;color:#C0392B}
.pfx-alert-info{background:var(--pfx-accent-soft);color:var(--pfx-ink)}
/* Checkbox row (terms, remember-me, etc.) */
/* A radio or checkbox list: a ROW of options, not a stack.
   Own class rather than .pfx-check, because Django's ChoiceWidget puts the
   widget class on the wrapping div as well as on every input, and .pfx-check is
   a 17px box - which collapsed the container and drew the options underneath
   the next field.
   Wraps rather than scrolls: three short options sit on one line, and a longer
   set on a narrow screen falls onto a second line instead of being cut off. */
.pfx-choicerow{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:stretch}
.pfx-choicerow>div{flex:0 0 auto}
.pfx-choicerow label{display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13.5px;color:var(--pfx-muted);border:1px solid var(--pfx-line-2);
  border-radius:10px;padding:8px 14px;line-height:1.2;
  transition:border-color .15s,background .15s,color .15s}
.pfx-choicerow label:hover{border-color:#14AEDF}
.pfx-choicerow input{width:16px;height:16px;accent-color:#14AEDF;flex:none;margin:0}
/* The whole pill reads as selected, not just the dot. At a glance across a list
   of notes the grade is the thing being looked for. */
.pfx-choicerow label:has(input:checked){border-color:#14AEDF;
  background:rgba(20,174,223,.08);color:var(--pfx-text)}
.pfx-choicerow input:focus-visible{outline:2px solid #14AEDF;outline-offset:2px}
/* The three-point grade, coloured as a scale. Red, amber, green is the ramp
   people read without thinking, and the colour is carried on the unselected
   pill too so the scale is visible before anybody picks anything. */
.pfx-choicerow--grade label:has(input[value="bad"]){color:var(--pfx-danger);border-color:var(--pfx-danger-line)}
.pfx-choicerow--grade label:has(input[value="good"]){color:var(--pfx-warn,#A34D08);border-color:var(--pfx-warn-line,rgba(217,119,6,.35))}
.pfx-choicerow--grade label:has(input[value="great"]){color:var(--pfx-ok);border-color:var(--pfx-ok-line,rgba(11,123,85,.35))}
.pfx-choicerow--grade label:has(input[value="bad"]:checked){background:var(--pfx-danger-soft);border-color:var(--pfx-danger);font-weight:600}
.pfx-choicerow--grade label:has(input[value="good"]:checked){background:var(--pfx-warn-soft,rgba(217,119,6,.12));border-color:var(--pfx-warn,#A34D08);font-weight:600}
.pfx-choicerow--grade label:has(input[value="great"]:checked){background:var(--pfx-ok-soft,rgba(11,123,85,.12));border-color:var(--pfx-ok);font-weight:600}
.pfx-choicerow--grade label:has(input[value="bad"]) input{accent-color:var(--pfx-danger)}
.pfx-choicerow--grade label:has(input[value="good"]) input{accent-color:var(--pfx-warn,#A34D08)}
.pfx-choicerow--grade label:has(input[value="great"]) input{accent-color:var(--pfx-ok)}
.pfx-checkrow{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--pfx-muted);cursor:pointer}
.pfx-checkrow input{width:18px;height:18px;accent-color:#14AEDF;margin-top:1px;flex:none}
.pfx-checkgroup-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pfx-muted);margin:14px 0 8px}
.pfx-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
@media (max-width:560px){.pfx-checkgrid{grid-template-columns:1fr}}
.pfx-section{background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:16px;padding:22px;margin-bottom:18px}
.pfx-section-title{font-family:var(--pfx-display);font-weight:700;font-size:15px;color:var(--pfx-ink);margin:0 0 14px;letter-spacing:-.01em}
/* Segmented toggle control (loan calculator, etc.) */
.pfx-seg{display:flex;gap:6px;background:var(--pfx-well);padding:6px;border-radius:14px}
.pfx-calcgrid .pfx-seg{display:flex;width:100%}
.pfx-seg-btn{flex:1;border:none;cursor:pointer;padding:12px;border-radius:10px;font-weight:700;font-size:15px;background:transparent;color:var(--pfx-muted);box-shadow:none;transition:.2s;white-space:nowrap}
.pfx-seg-btn:hover{color:var(--pfx-ink)}
.pfx-seg-btn.is-active{background:var(--pfx-surface);color:var(--pfx-ink);box-shadow:none}
.pfx-pill{border:2px solid var(--pfx-line-2);background:var(--pfx-surface);border-radius:100px;padding:11px 20px;font-weight:700;font-size:15px;color:var(--pfx-ink-2);cursor:pointer;transition:.18s;font-family:inherit}
.pfx-pill:hover{border-color:#14AEDF}
.pfx-pill.pfx-on{border-color:#14AEDF;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep)}
/* Repayment term, as pills. One definition for every surface that asks the
   question: the calculator, the application wizard, the shop product page and
   the shop checkout. It used to be a stack of cards, copied into four templates
   with the CSS declared twice, and the four had already drifted on colour and
   padding. A customer who compares the calculator with the wizard should not
   have to wonder whether they are answering the same question.
   Matched by the app's own term pills, which use the same shape as its chips. */
.pfx-termpills{display:flex;flex-wrap:wrap;gap:8px}
.pfx-termpill{position:relative;cursor:pointer;border:1.5px solid var(--pfx-line-2);border-radius:999px;padding:10px 18px;display:inline-flex;align-items:baseline;gap:5px;transition:.18s;background:var(--pfx-surface);white-space:nowrap;line-height:1}
.pfx-termpill:hover{border-color:#14AEDF}
.pfx-termpill.pfx-on{border-color:#14AEDF;background:var(--pfx-accent-soft)}
.pfx-termpill.pfx-on span{color:var(--pfx-accent-deep)!important}
.pfx-termpill .pfx-termn{font-family:var(--pfx-display);font-weight:800;font-size:16px;color:var(--pfx-ink)}
.pfx-termpill .pfx-termu{font-size:12.5px;color:var(--pfx-muted)}
/* Keyboard focus has to be visible: the radio inside is invisible by design. */
.pfx-termpill:focus-within{outline:2px solid #14AEDF;outline-offset:2px}
.pfx-termpill-other.pfx-on:focus-within{outline:0;box-shadow:0 0 0 3px var(--pfx-accent-soft)}
.pfx-termpill .pfx-termo{font-size:14px;font-weight:600;color:var(--pfx-ink-2)}
.pfx-termpill.pfx-on input{color:var(--pfx-accent-deep)}
.pfx-termpill-other input{width:2ch;height:1em;line-height:1;padding:0;margin:0;border:0;outline:0;background:none;text-align:right;-moz-appearance:textfield;appearance:textfield}
.pfx-termpill-other input::-webkit-inner-spin-button,.pfx-termpill-other input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pfx-termpill-other input::placeholder{color:var(--pfx-faint)}
.pfx-termhint{font-size:12px;color:var(--pfx-faint);margin-top:8px}

/* Choice segments — a short list of exclusive answers, asked the same way on
   every surface that asks it (the employment question on the wizard and on both
   calculators).

   It used to be `.pfx-seg`, which is declared twice in this file and resolves to
   a rounded inline pill built for two answers. Given three, and a `flex-wrap`
   put there to stop them overflowing, the third dropped onto its own row and
   floated centred under the other two: a lozenge with a tab hanging off it,
   which is what the phone screenshot showed.

   So the row is a grid rather than a wrapping flex line. Three equal columns
   above 560px, and below it the segments stack into a radio list — full-width
   rows, a 44px target apiece, the label left-aligned where the eye already is
   rather than centred over a wrapped word. The dot is drawn on the span because
   the real radio is hidden; it is hidden and not removed because it is what
   makes the group keyboard-reachable and announced as a set of choices. */
.pfx-choiceseg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;
  background:var(--pfx-well);border:1px solid var(--pfx-line);border-radius:14px;padding:6px}
.pfx-choiceseg label{position:relative;display:block;cursor:pointer;min-width:0}
.pfx-choiceseg input{position:absolute;opacity:0;width:0;height:0}
/* Every cell carries its own surface and its own radio dot, at every width.
   Reported 14 Sep 2026: it was not obvious this was a choice of three that you
   could click. Only the selected cell had a background, so the other two read
   as plain text beside a highlighted word rather than as options — and the dot
   that says "pick one of these" only appeared under 560px, which is the width
   where it was least needed. */
.pfx-choiceseg span{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  height:100%;min-height:46px;padding:11px 13px;border-radius:10px;text-align:left;
  background:var(--pfx-surface);box-shadow:inset 0 0 0 1.5px var(--pfx-line-2);
  font-family:var(--pfx-display);font-weight:700;font-size:14px;line-height:1.25;
  color:var(--pfx-ink-2);transition:.18s}
.pfx-choiceseg span::before{content:'';flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--pfx-line-2);background:var(--pfx-surface);transition:.18s}
.pfx-choiceseg label:hover span{color:var(--pfx-ink);box-shadow:inset 0 0 0 1.5px var(--pfx-accent-glow)}
.pfx-choiceseg label:hover span::before{border-color:var(--pfx-accent-deep)}
.pfx-choiceseg input:checked+span{color:var(--pfx-accent-deep);
  box-shadow:inset 0 0 0 2px var(--pfx-accent-deep)}
.pfx-choiceseg input:checked+span::before{border-width:6px;border-color:var(--pfx-accent-deep)}
.pfx-choiceseg input:focus-visible+span{outline:2px solid #14AEDF;outline-offset:2px}
@media (max-width:560px){
  .pfx-choiceseg{grid-template-columns:1fr;gap:4px}
  .pfx-choiceseg span{padding:12px 14px;font-size:15px}
}

/* ── The hire-purchase explainer ───────────────────────────────────────────
   Four steps and a worked example, on the microfinance page. It is the one
   product that needs explaining beyond its card, and it was explained in a
   shape that only worked on a desktop: four steps side by side that collapsed
   into eight undifferentiated lines on a phone, and a 460px-wide table the
   reader had to drag sideways to reach the instalment, which is the column
   they came for.

   So the steps are cards at any width — numbered, spaced, one per row on a
   phone — and below 640px each table row becomes a card with the deposit as
   its heading and every figure labelled. Same markup, same numbers; the table
   stays a table, which is what keeps it readable to a screen reader and
   selectable as a grid on a desktop. */
.pfx-hpx{margin-top:40px;background:var(--pfx-surface);border:1px solid var(--pfx-line);
  border-radius:22px;padding:clamp(20px,3vw,36px)}
.pfx-hpx-h{font-family:var(--pfx-display);font-weight:800;font-size:clamp(20px,2.6vw,26px);
  letter-spacing:-.01em;margin:0 0 8px}
.pfx-hpx-lede{color:var(--pfx-muted);font-size:15px;margin:0 0 22px;max-width:640px}
.pfx-hpx-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:0 0 26px;padding:0}
.pfx-hpx-steps li{display:flex;align-items:flex-start;gap:12px;background:var(--pfx-well);
  border:1px solid var(--pfx-line);border-radius:16px;padding:16px}
.pfx-hpx-n{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:10px;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);
  font-family:var(--pfx-mono);font-size:12px;font-weight:700;letter-spacing:.02em}
.pfx-hpx-s{font-weight:600;font-size:14.5px;line-height:1.45;color:var(--pfx-ink)}
.pfx-hpx-scroll{overflow-x:auto}
.pfx-hpx-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
.pfx-hpx-table caption{text-align:left;color:var(--pfx-muted);font-size:13.5px;padding-bottom:12px}
.pfx-hpx-table th{text-align:left;font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--pfx-faint);padding:0 14px 10px 0}
.pfx-hpx-table th:last-child{padding-right:0}
.pfx-hpx-table tbody tr{border-top:1px solid var(--pfx-line)}
.pfx-hpx-table td{padding:12px 14px 12px 0;color:var(--pfx-ink-2)}
.pfx-hpx-table td:last-child{padding-right:0;font-weight:700;color:var(--pfx-ink)}
.pfx-hpx-table .pfx-hpx-pct{font-weight:700;color:var(--pfx-accent-deep)}
.pfx-hpx-note{margin-top:20px;display:flex;gap:11px;align-items:flex-start;padding:14px 16px;
  border-radius:14px;background:var(--pfx-well);font-size:13.5px;color:var(--pfx-ink-2);line-height:1.55}
.pfx-hpx-note p{margin:0}
.pfx-hpx-note .pfx-ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--pfx-accent-deep)}
@media (max-width:640px){
  .pfx-hpx-steps{grid-template-columns:1fr;gap:8px;margin-bottom:22px}
  .pfx-hpx-steps li{padding:12px 14px;border-radius:14px;align-items:center;gap:11px}
  .pfx-hpx-n{width:26px;height:26px;border-radius:9px;font-size:11px}
  .pfx-hpx-s{font-size:14px}
  /* The row-as-card. The header stays in the DOM for assistive technology and
     is taken off the screen, and each cell carries its column name in data-l
     so the figure is never orphaned from what it means. */
  .pfx-hpx-scroll{overflow-x:visible}
  .pfx-hpx-table{min-width:0;display:block}
  /* A caption inside a table turned into a block shrink-wraps to its
     longest word, so the line describing the example came out one word
     per row. It has to be told it is a block of its own width. */
  .pfx-hpx-table caption{display:block;width:100%;padding-bottom:10px}
  .pfx-hpx-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pfx-hpx-table tbody{display:block}
  .pfx-hpx-table tbody tr{display:block;border:1px solid var(--pfx-line);border-radius:14px;
    padding:4px 14px 8px;margin-bottom:10px;background:var(--pfx-well)}
  .pfx-hpx-table tbody tr:last-child{margin-bottom:0}
  .pfx-hpx-table td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:9px 0 0;border-top:1px solid var(--pfx-line);margin-top:9px}
  .pfx-hpx-table td::before{content:attr(data-l);font-size:12.5px;font-weight:600;color:var(--pfx-faint)}
  .pfx-hpx-table td:first-child{border-top:none;margin-top:0;padding:10px 0 2px;font-size:17px}
}

/* Dashboard action buttons — one shared scale for every /dashboard/* form and toolbar */
.pfx-dbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:15px;padding:13px 26px;border-radius:13px;border:none;cursor:pointer;transition:.18s;white-space:nowrap}
.pfx-dbtn-primary{background:var(--pfx-btn-bg);color:var(--pfx-btn-fg)}
.pfx-dbtn-primary:hover{background:var(--pfx-btn-hover);box-shadow:none;transform:translateY(-1px)}
.pfx-dbtn-secondary{background:var(--pfx-surface);color:var(--pfx-ink);border:1.5px solid var(--pfx-line-2);padding:12.5px 24px}
.pfx-dbtn-secondary:hover{border-color:#14AEDF;color:var(--pfx-accent-deep)}
.pfx-dbtn-danger{background:#FDECEC;color:#C0392B;border:1px solid #FDD}
.pfx-dbtn-danger:hover{background:#FBDCDC;border-color:#F5B5B5}
.pfx-dbtn-sm{padding:7px 14px;border-radius:9px;font-size:13px}
.pfx-dbtn[disabled],.pfx-dbtn.is-loading{opacity:.6;cursor:not-allowed;pointer-events:none;transform:none!important}
.pfx-dbtn-spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:pfxSpin .7s linear infinite;flex:none}
.pfx-dbtn-secondary .pfx-dbtn-spinner,.pfx-dbtn-danger .pfx-dbtn-spinner{border-color:rgba(15,22,58,.25);border-top-color:var(--pfx-ink)}
@keyframes pfxSpin{to{transform:rotate(360deg)}}

/* Dashboard GET filter/search bars — one shared look across every list toolbar */
.pfx-dsearch{display:flex;align-items:center;gap:10px;background:var(--pfx-well);border:1px solid var(--pfx-line);border-radius:11px;padding:9px 14px;min-width:240px}
.pfx-dsearch input{border:none;background:transparent;outline:none;font-size:14px;color:var(--pfx-ink);width:100%;font-family:inherit}
.pfx-dsearch .pfx-ic{width:18px;height:18px;color:var(--pfx-faint);flex:none}
.pfx-dselect{border:1px solid var(--pfx-line);background:var(--pfx-well);border-radius:10px;padding:9px 14px;font-size:13px;color:var(--pfx-ink);font-family:inherit}

/* Toggle switch — styles a native checkbox input directly (no wrapper markup needed) */
.pfx-check.pfx-toggle{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;background:var(--pfx-line-2);position:relative;cursor:pointer;transition:background .2s;flex:none;margin:0}
.pfx-check.pfx-toggle::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--pfx-surface);transition:transform .2s;box-shadow:none}
.pfx-check.pfx-toggle:checked{background:#14AEDF}
.pfx-check.pfx-toggle:checked::before{transform:translateX(18px)}
.pfx-check.pfx-toggle:focus-visible{outline:2px solid #14AEDF;outline-offset:2px}

/* Currency input — $ prefix via padding, JS (Task 9) formats/unformats the display value */
.pfx-field.pfx-currency{padding-left:30px}
div:has(>input.pfx-currency)::before{content:"$";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--pfx-muted);font-weight:600;font-size:15px;pointer-events:none}

/* Live-validation success indicator (Task 10) — only shown next to text-like
   .pfx-field inputs, never checkboxes/toggles/file inputs (no sensible place
   to put a checkmark on those), using :has() the same way .pfx-tcard already does above */
.pfx-valid-icon{display:none;position:absolute;right:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--pfx-ok);pointer-events:none}
.pfx-formfield.is-valid:has(.pfx-field) .pfx-valid-icon{display:block}

/* Hero carousel (home + service pages) */
.pfx-hero{position:relative;overflow:hidden}
.pfx-hero-slide{position:absolute;inset:0;display:flex;align-items:center;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s ease;pointer-events:none}
.pfx-hero-slide.is-active{opacity:1;pointer-events:auto}
.pfx-hero-slide::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,22,58,.70),rgba(15,22,58,.32))}
.pfx-hero-slide--fallback{background:
  radial-gradient(1100px 540px at 78% -8%,#12385f 0%,rgba(18,56,95,0) 60%),
  radial-gradient(900px 500px at -8% 8%,#14AEDF 0%,rgba(20,174,223,0) 55%),#0F163A}
.pfx-hero-slide--fallback::before{background:linear-gradient(90deg,rgba(15,22,58,.55),rgba(15,22,58,.15))}
.pfx-hero-inner{position:relative;width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(28px,4vw,48px) clamp(18px,4vw,48px);color:#fff}
.pfx-hero-eyebrow{display:inline-block;font-size:14px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#8fe0f7;margin:0 0 12px}
.pfx-hero h1,.pfx-hero h2{font-family:var(--pfx-display);font-weight:800;
  font-size:clamp(38px,5.5vw,68px);line-height:1.05;letter-spacing:-.02em;
  margin:0;max-width:16ch}
.pfx-hero p{font-size:clamp(16px,1.9vw,20px);color:#DDE3F0;
  max-width:560px;margin:18px 0 0}
.pfx-hero-cta{display:flex;gap:14px;margin:30px 0 0;flex-wrap:wrap}
.pfx-hero-cta a{white-space:nowrap}
/* A hero that carries the loan calculator, the way the old product homepage
   did: the card is the hero's right-hand side, inside the same band, with the
   slide photograph behind it. It is a flex child in normal flow, not an
   absolutely positioned overlay, and it adds no background of its own beyond
   the card's own fill. The slides stay absolute and crossfade underneath, which
   is why the card sits outside the slide loop. */
.pfx-hero--calc{display:flex;align-items:center;justify-content:flex-end;
  /* The card is taller than the carousel's fixed height, and .pfx-hero clips
     its overflow, so a fixed height cut 29px off the top and bottom of it. The
     height becomes a floor and the band grows to hold the card; the slides are
     absolute with inset:0, so the photograph grows with it. */
  height:auto!important;min-height:clamp(560px,78vh,730px);
  padding:clamp(24px,3.5vw,44px) 0;
  /* Right edge lands on the 1240px content column, not the viewport edge, so
     the card lines up with the slide text and every other section below it.
     Pinned to the viewport it read as shoved into the corner. */
  padding-right:calc(max(0px, (100% - 1240px) / 2) + clamp(18px,4vw,48px))}
.pfx-herocalc{position:relative;z-index:3;flex:none;width:clamp(460px,38vw,540px)}
/* The slide text takes the rest of that column: percentages here resolve
   against .pfx-hero-inner (1240px at most), not the viewport, so the two never
   collide on a wide screen. */
.pfx-hero--calc .pfx-hero-inner h1,
.pfx-hero--calc .pfx-hero-inner h2,
.pfx-hero--calc .pfx-hero-inner p,
.pfx-hero--calc .pfx-hero-cta{max-width:min(calc(100% - clamp(460px,38vw,540px) - 56px),660px)}

/* The card sits inside .pfx-hero now, so hero typography was landing on it:
   .pfx-hero h2 (0,1,1) outranks .pfx-deckcalc-title (0,1,0) and set "Estimate
   your loan" in 68px display type, and .pfx-hero p recoloured the small print
   for a dark background. Restated at .pfx-herocalc depth to win it back. */
.pfx-herocalc .pfx-deckcalc-title{font-family:var(--pfx-display);font-weight:800;
  font-size:16px;line-height:1.3;letter-spacing:-.01em;margin:0;max-width:none}
.pfx-herocalc .pfx-deckcalc p{font-size:12px;color:var(--pfx-faint);
  max-width:none;margin:12px 0 0}
.pfx-herocalc .pfx-deckcalc-per{font-size:11.5px;margin:0;max-width:none}

@media(max-width:1100px){
  /* One column on a phone: the slides keep the top of the band and the card
     flows underneath them, still inside the hero and still overlapping
     nothing. The hero grows to fit rather than the card being floated over it. */
  .pfx-hero--calc{display:block;height:auto!important;
    padding-top:clamp(460px,74vh,580px)}
  .pfx-hero--calc .pfx-hero-slide{bottom:auto;height:clamp(460px,74vh,580px)}
  .pfx-herocalc{width:auto;max-width:560px;margin:0 auto;
    padding:clamp(20px,5vw,28px) clamp(18px,4vw,24px) clamp(24px,6vw,34px)}
  .pfx-hero--calc h1, .pfx-hero--calc h2,
  .pfx-hero--calc .pfx-hero-inner p,
  .pfx-hero--calc .pfx-hero-cta{max-width:none}
  /* The dots and arrows belong to the slide area, not the bottom of the card. */
  .pfx-hero--calc .pfx-hero-dots{top:calc(clamp(460px,74vh,580px) - 34px);bottom:auto}
  .pfx-hero--calc .pfx-hero-arrows{top:calc(clamp(460px,74vh,580px) - 68px);bottom:auto}
  /* Presets and the mode switch came over at 36px; scoped so the shared pill
     component is untouched everywhere else. */
  .pfx-herocalc .pfx-pill-sm,
  .pfx-herocalc .pfx-seg-btn{min-height:44px}
}
.pfx-hero-arrows{position:absolute;right:clamp(18px,4vw,48px);bottom:24px;
  display:flex;gap:10px;z-index:3}
.pfx-hero-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(15,22,58,.35);color:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.2s}
.pfx-hero-arrow:hover{background:var(--pfx-accent);border-color:var(--pfx-accent)}
.pfx-hero-dots{position:absolute;left:clamp(18px,4vw,48px);bottom:30px;
  display:flex;gap:9px;z-index:3}
.pfx-hero-dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;
  background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.pfx-hero-dot.is-active{background:#14AEDF;width:26px;border-radius:6px}
@media (max-width:640px){.pfx-hero-cta{flex-direction:column;align-items:stretch}.pfx-hero-cta a{width:100%;justify-content:center}.pfx-hero-inner{padding-bottom:84px}}

/* Secondary top bar with contact and social links */
.pfx-topbar{background:#0A1030;color:#A9B4D6;font-family:Inter,system-ui,sans-serif;font-size:13px}
.pfx-topbar-inner{max-width:none;margin:0;padding:9px clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.pfx-topbar-contact{display:flex;align-items:center;gap:18px}
.pfx-topbar-a{display:flex;align-items:center;gap:7px;color:#A9B4D6;transition:.2s}
.pfx-topbar-a:hover{color:#fff}
.pfx-topbar-a .pfx-ic{width:14px;height:14px;flex-shrink:0}
.pfx-topbar-soc{display:flex;align-items:center;gap:12px}
.pfx-topbar-soc a{color:#A9B4D6;transition:.2s;display:flex}
.pfx-topbar-soc a:hover{color:#14AEDF}
.pfx-topbar-soc .pfx-ic{width:15px;height:15px}
@media(max-width:1120px){.pfx-topbar-a-label{display:none}}

/* Full-width primary-color nav */
.pfx-header{position:sticky;top:0;z-index:50;
  background:var(--pfx-surface);border-bottom:1px solid var(--pfx-line);
  box-shadow:0 10px 30px -24px rgba(8,12,34,.18)}

/* A page somebody is filling in rather than browsing.

   Set by the loan wizard (templates/apply/base_apply.html). Three things go,
   and they are the same decision three times: on a 740px handset the site
   header holds 81px at the top and the quick-links bar 61px at the bottom,
   permanently, while the form itself has to fit in what is left — and both of
   them are ways out of a flow we have just asked somebody to finish. The
   wizard pins its own Continue bar and nothing else.

   The header is still there, at the top of the page, a scroll away. It simply
   stops following you down a form.

   Phone widths only. On a desktop the header costs a sliver of a tall window
   rather than a ninth of a short one, and a form that loses its way out on a
   1440px screen has given up something for nothing. */
@media (max-width:820px){
  body.pfx-focus .pfx-header{position:static}
}
.pfx-logo{margin-right:14px}
/* A real, chosen gap. The old one was 39-53px of empty pixels inside the
   logo's own image box, which changed with every height breakpoint. */
.pfx-navlinks{flex:1;display:flex;align-items:center;justify-content:flex-start;gap:clamp(3px,.6vw,10px);padding:0;font-family:var(--pfx-display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.pfx-navlinks .pfx-nav-a{white-space:nowrap;color:var(--pfx-muted);padding:9px 12px;border-radius:10px;transition:color .18s,background .18s}
.pfx-navlinks .pfx-nav-a:hover{color:var(--pfx-ink);background:rgba(15,22,58,.06)}
.pfx-navlinks .pfx-nav-a.is-active{color:var(--pfx-accent-deep);background:rgba(20,174,223,.12);box-shadow:inset 0 0 0 1px rgba(20,174,223,.35)}
.pfx-navsep{width:1px;height:22px;background:linear-gradient(180deg,transparent,rgba(15,22,58,.16),transparent);flex:none}
.pfx-login{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;font-weight:600;font-size:14px;color:var(--pfx-muted);transition:color .18s,background .18s}
.pfx-login:hover{background:rgba(15,22,58,.06);color:var(--pfx-ink)}
/* Compact the desktop nav on smaller laptops before collapsing to the burger
   (which happens under 1260px, in the Responsive block above).

   The threshold was 1600px, which was enough for eight items. Nine (Holdings
   joined them) need 1230px of links at full size, and with the logo and a
   signed-in account button that is ~1760px of bar: between 1600 and 1770 the
   account button was pushed past the edge and every page scrolled sideways.
   Compacting from 1840 keeps the full-size nav for the widths that can hold
   it: the uncompacted bar needs 1803px, so a 1800px threshold left a couple of
   pixels where neither treatment fit; 1840 leaves real margin. */
@media(max-width:1840px){
  .pfx-navbar{gap:4px!important;padding:0 clamp(12px,1.6vw,24px)!important}
  .pfx-logo img{height:52px!important;width:auto!important}
  /* Spacing measured against the real budget rather than guessed: at 1440 the
     links have 1047px to fill and needed 953px, so the spare goes into the
     gutters between items: 21px between two labels, up from 14px. Not all 94px
     of it, because the band's tightest point is 1401px, not 1440px, and
     spending the lot left only 4px before the account button. */
  .pfx-navlinks{font-size:12.5px;gap:5px}
  .pfx-navlinks .pfx-nav-a{padding:8px 8px}
  .pfx-login{font-size:13px;padding:8px 10px}
  .pfx-navcta .pfx-btnp{font-size:13px!important;padding:9px 14px!important}
  /* Nine items plus a signed-in account button needed 1482px and had 1425, so
     the account area was pushed off-screen and the whole page scrolled
     sideways. The trigger drops to avatar + chevron here rather than only
     below 1400px; "My account" is the widest thing in the bar that is safe to
     shorten, and its own dropdown still names the user. */
  .pfx-acctrig{font-size:0;gap:5px;padding:8px 10px}
}
@media(max-width:1400px){
  .pfx-navbar{gap:2px!important;padding:0 12px!important}
  .pfx-logo img{height:46px!important;width:auto!important}
  .pfx-navlinks{font-size:12px;letter-spacing:-.015em}
  /* Narrowest desktop band, and the tightest: nine items at 12px leave about
     25px spare at 1260px, so this buys what there is and no more. Spacing here
     tops out around 15px; below 1260 the burger takes over. */
  .pfx-navlinks .pfx-nav-a{padding:6px 5px}
  .pfx-navsep{display:none}
  .pfx-login{padding:8px 8px}
  .pfx-navcta .pfx-btnp{padding:9px 12px!important}
  /* Account trigger: avatar + chevron only (font-size:0 hides its text node) */
  .pfx-acctrig{font-size:0;gap:5px;padding:8px 10px}
}
/* Account dropdown */
.pfx-acctrig{border:1px solid rgba(15,22,58,.14);background:rgba(15,22,58,.04);color:var(--pfx-muted)}
.pfx-dd:hover .pfx-acctrig{color:var(--pfx-ink)!important;background:rgba(15,22,58,.08)}
.pfx-avatar{width:24px;height:24px;border-radius:50%;background:var(--pfx-btn-bg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.pfx-ddmenu-r{left:auto;right:0}
.pfx-acc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:var(--pfx-ink-2);transition:background .15s,color .15s}

/* Mobile navigation sheet */
.pfx-mnav{background:linear-gradient(180deg,#0C1330 0%,#0F1740 100%);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 24px 40px -18px rgba(6,10,30,.7)}
.pfx-msheet{padding:14px clamp(14px,4vw,26px) 20px;display:flex;flex-direction:column;gap:4px;font-family:Inter,sans-serif}
.pfx-mrow{display:flex;align-items:center;gap:14px;width:100%;padding:11px 12px;border-radius:14px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:15.5px;font-weight:600;color:#DCE3F4;text-align:left;transition:background .16s,color .16s}
.pfx-mrow:hover,.pfx-mrow:active,.pfx-mrow.is-open{background:rgba(255,255,255,.06);color:#fff}
.pfx-mico{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#7FD9F4;transition:background .16s,border-color .16s}
.pfx-mrow:hover .pfx-mico,.pfx-mrow.is-open .pfx-mico{background:rgba(20,174,223,.18);border-color:rgba(127,217,244,.35)}
.pfx-mico .pfx-ic{width:19px;height:19px}
.pfx-mlabel{flex:1;min-width:0}
.pfx-mchev{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#8892AC;transition:transform .22s}
.pfx-mchev.flip{transform:rotate(180deg)}
.pfx-msub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 52px;padding-left:14px;border-left:1px solid rgba(255,255,255,.1)}
.pfx-msub a{padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:#AEB8D4;transition:background .15s,color .15s}
.pfx-msub a:hover{background:rgba(255,255,255,.05);color:#fff}
.pfx-mdiv{height:1px;background:rgba(255,255,255,.08);margin:8px 6px}
.pfx-mcta{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;padding:15px;border-radius:14px;background:var(--pfx-btn-bg);color:#fff;font-family:var(--pfx-display);font-weight:700;font-size:15.5px;box-shadow:0 14px 28px -12px rgba(20,174,223,.7);transition:filter .16s}
.pfx-mcta:hover{filter:brightness(1.06)}
.pfx-mcta .pfx-ic{stroke:currentColor;fill:none;stroke-width:2}

/* Property segmented search bar (overlaid on the hero slider) */
.pfx-searchwrap{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(1180px,calc(100% - clamp(32px,8vw,96px)));z-index:6}
.pfx-prop-hero .pfx-hero-dots,.pfx-prop-hero .pfx-hero-arrows{bottom:auto;top:24px}
/* Search-only hero: drop the slide copy and CTAs, keep imagery + search console */
.pfx-prop-hero .pfx-hero-inner{display:none}
@media(min-width:761px){
  .pfx-prop-hero .pfx-searchwrap{top:50%;bottom:auto;transform:translate(-50%,-50%)}
}
.pfx-searchbar{background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:20px;padding:8px;box-shadow:none}
.pfx-searchrow{display:flex;align-items:stretch;gap:0}
.pfx-searchcell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:11px 20px;border-radius:14px;position:relative;cursor:pointer;transition:background .18s}
.pfx-searchcell+.pfx-searchcell::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--pfx-line)}
.pfx-searchcell:hover{background:var(--pfx-accent-soft)}
.pfx-searchcell:focus-within{background:var(--pfx-accent-soft)}
.pfx-searchlbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pfx-faint)}
.pfx-searchsel{border:none;background:transparent;padding:0 20px 0 0;margin:0;font-family:inherit;font-size:15px;font-weight:600;color:var(--pfx-ink);cursor:pointer;width:100%;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314AEDF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center}
.pfx-searchsel:focus{outline:none}
.pfx-searchbtn{flex:none;margin-left:6px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pfx-btn-bg);color:#fff;font-weight:700;font-size:15px;padding:0 28px;border-radius:14px;border:none;cursor:pointer;transition:box-shadow .2s,transform .2s}
.pfx-searchbtn:hover{box-shadow:none;transform:translateY(-1px)}
@media(max-width:760px){
  /* Drop the hero slider entirely on mobile — just show the search console */
  .pfx-prop-hero .pfx-hero{display:none}
  .pfx-searchwrap{position:static;transform:none;width:auto;margin:16px clamp(14px,4vw,20px) 0}
  .pfx-searchbar{border-radius:18px}
  /* Fields become tidy bordered boxes in a compact 2-up grid */
  .pfx-searchrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pfx-searchcell{padding:9px 13px;border:1.5px solid var(--pfx-line-2);border-radius:13px;background:var(--pfx-surface)}
  .pfx-searchcell:focus-within{border-color:#14AEDF;background:var(--pfx-surface)}
  .pfx-searchcell+.pfx-searchcell::before{display:none}
  .pfx-searchcell--price,.pfx-searchcell--kw{grid-column:1/-1}
  .pfx-searchbtn{grid-column:1/-1;margin-left:0;margin-top:2px;padding:15px}
}

/* Advanced property search console */
.pfx-fsearch{background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:22px;padding:14px;
  box-shadow:none}
.pfx-fsearch-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 6px 12px}
.pfx-seg{display:inline-flex;background:var(--pfx-well);border-radius:999px;padding:4px;gap:2px}
.pfx-seg label{cursor:pointer;display:inline-flex}
.pfx-seg input{position:absolute;opacity:0;width:0;height:0}
.pfx-seg span{display:inline-flex;align-items:center;justify-content:center;padding:9px 22px;border-radius:999px;
  font-family:var(--pfx-display);font-weight:700;font-size:14px;color:var(--pfx-muted);transition:.2s;white-space:nowrap}
.pfx-seg label:hover span{color:var(--pfx-ink)}
.pfx-seg input:checked+span{background:var(--pfx-surface);color:var(--pfx-accent-deep);box-shadow:none}
.pfx-seg input:focus-visible+span{outline:2px solid #14AEDF;outline-offset:2px}
.pfx-advtoggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid var(--pfx-line-2);
  border-radius:12px;padding:9px 16px;font-family:inherit;font-weight:700;font-size:14px;color:var(--pfx-ink-2);
  cursor:pointer;transition:.18s;white-space:nowrap}
.pfx-advtoggle:hover{border-color:#14AEDF;color:var(--pfx-accent-deep)}
.pfx-advtoggle .pfx-ic{color:#14AEDF}

.pfx-priceinputs{display:flex;align-items:center;gap:6px}
.pfx-priceinputs input{border:none;background:transparent;font-family:inherit;font-size:15px;font-weight:600;
  color:var(--pfx-ink);width:100%;min-width:0;padding:0}
.pfx-priceinputs input:focus{outline:none}
.pfx-priceinputs input::placeholder{color:var(--pfx-faint);font-weight:500}
.pfx-priceinputs input::-webkit-outer-spin-button,.pfx-priceinputs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pfx-priceinputs input[type=number]{-moz-appearance:textfield}
.pfx-pricedash{color:var(--pfx-faint);font-weight:600;flex:none}
.pfx-searchinp{background-image:none!important;padding-right:0}

.pfx-advpanel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 34px;
  border-top:1px solid var(--pfx-line);margin-top:4px;padding:18px 8px 6px}
.pfx-advcell{flex:0 0 auto}
.pfx-advcell--size{flex:1 1 180px;min-width:160px;max-width:260px}
.pfx-advcell--actions{flex:1 1 auto}
.pfx-advlbl{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pfx-faint);margin:0 0 10px}
.pfx-chips{display:flex;gap:8px;flex-wrap:wrap}
.pfx-chip{cursor:pointer}
.pfx-chip input{position:absolute;opacity:0;width:0;height:0}
.pfx-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:9px 14px;
  border:1.5px solid var(--pfx-line-2);border-radius:12px;font-weight:600;font-size:14px;color:var(--pfx-ink-2);transition:.16s}
.pfx-chip:hover span{border-color:var(--pfx-line-2)}
.pfx-chip input:checked+span{border-color:#14AEDF;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);box-shadow:inset 0 0 0 1px #14AEDF}
.pfx-chip input:focus-visible+span{outline:2px solid #14AEDF;outline-offset:2px}
.pfx-advinp{width:100%;padding:12px 14px;border:1.5px solid var(--pfx-line-2);border-radius:12px;font-family:inherit;
  font-size:15px;font-weight:600;color:var(--pfx-ink);background:var(--pfx-surface);transition:border-color .18s,box-shadow .18s}
.pfx-advinp:focus{outline:none;border-color:#14AEDF;box-shadow:0 0 0 4px rgba(20,174,223,.14)}
.pfx-advcell--actions{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.pfx-advreset{display:inline-flex;align-items:center;gap:6px;color:var(--pfx-faint);font-weight:600;font-size:14px;transition:color .18s}
.pfx-advreset:hover{color:#E4572E}
.pfx-advapply{display:inline-flex;align-items:center;gap:8px;background:var(--pfx-btn-bg);color:var(--pfx-btn-fg);font-weight:700;
  font-size:14px;padding:12px 22px;border-radius:12px;border:none;cursor:pointer;transition:.2s}
.pfx-advapply:hover{background:var(--pfx-btn-hover);box-shadow:none;transform:translateY(-1px)}

@media(max-width:760px){
  .pfx-fsearch-top{flex-wrap:wrap}
  .pfx-seg{width:100%}
  .pfx-seg label{flex:1}
  .pfx-seg span{width:100%;padding:11px 12px}
  .pfx-advtoggle{width:100%;justify-content:center}
  .pfx-advcell--actions{flex-direction:column-reverse;align-items:stretch}
  .pfx-advapply{justify-content:center}
  .pfx-advreset{justify-content:center}
}

/* ---- Team slider (full-bleed, banner cards) ---- */
.pfx-team{position:relative;padding:clamp(56px,7vw,100px) 0;
  background:radial-gradient(1100px 520px at 82% -8%,#17306E,rgba(23,48,110,0) 60%),
             linear-gradient(160deg,#0B1233,#0F163A 45%,#111C4B)}
.pfx-team-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  max-width:1240px;margin:0 auto clamp(28px,3.4vw,40px);padding:0 clamp(18px,4vw,48px)}
.pfx-team-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(127,217,244,.12);
  color:#7FD9F4;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px}
.pfx-team-title{font-family:var(--pfx-display);font-weight:800;font-size:clamp(28px,4vw,44px);
  letter-spacing:-.02em;margin:16px 0 8px;color:#fff}
.pfx-team-sub{font-size:17px;color:#A9B4D6;margin:0;max-width:460px}
.pfx-team-nav{display:flex;gap:10px;flex-shrink:0}
.pfx-team-arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s}
.pfx-team-arrow .pfx-ic{width:20px;height:20px}
.pfx-team-arrow:first-child .pfx-ic{transform:rotate(180deg)}
.pfx-team-arrow:hover:not(:disabled){background:#14AEDF;border-color:#14AEDF;color:#fff}
.pfx-team-arrow:disabled{opacity:.32;cursor:default}

.pfx-team-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  max-width:1240px;margin:0 auto;scroll-padding-left:clamp(18px,4vw,48px);
  padding:8px clamp(18px,4vw,48px) 24px;scrollbar-width:none;-ms-overflow-style:none}
.pfx-team-track::-webkit-scrollbar{display:none}
.pfx-team-card{scroll-snap-align:start;flex:0 0 clamp(280px,82vw,340px);text-align:left;
  background:var(--pfx-surface);border-radius:22px;overflow:hidden;padding:0;cursor:pointer;
  transition:transform .26s ease,box-shadow .26s ease;
  box-shadow:0 20px 48px -28px rgba(0,0,0,.55)}
.pfx-team-card:hover{transform:translateY(-6px);box-shadow:0 34px 66px -30px rgba(0,0,0,.6)}

.pfx-team-photo{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(140deg,#1B2A6B,#14AEDF)}
.pfx-team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.pfx-team-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--pfx-display);font-weight:800;font-size:52px;letter-spacing:.02em}
.pfx-team-body{padding:22px 24px 24px}
.pfx-team-name{font-family:var(--pfx-display);font-weight:700;font-size:20px;margin:0 0 4px;color:var(--pfx-ink)}
.pfx-team-role{color:var(--pfx-muted);font-size:14px;line-height:1.45;margin:0}
.pfx-team-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--pfx-accent-deep);
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;transition:gap .26s}
.pfx-team-more .pfx-ic{width:14px;height:14px}
.pfx-team-card:hover .pfx-team-more{gap:10px}

.pfx-team-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.pfx-team-scrim{position:absolute;inset:0;background:rgba(11,17,46,.62);backdrop-filter:blur(3px)}
.pfx-team-dialog{position:relative;background:var(--pfx-surface);border-radius:24px;max-width:520px;width:100%;
  max-height:90vh;overflow:auto;padding:0;text-align:center}
.pfx-team-dialog .pfx-team-photo{border-radius:24px 24px 0 0}
.pfx-team-dialog .pfx-team-initials{font-size:46px}
.pfx-team-close{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(15,22,58,.55);color:#fff;cursor:pointer;font-size:20px;line-height:1;transition:.2s}
.pfx-team-close:hover{background:rgba(15,22,58,.8)}
.pfx-team-dialog-body{padding:26px 34px 36px}
.pfx-team-dialog-name{font-family:var(--pfx-display);font-weight:800;font-size:23px;margin:0 0 5px}
.pfx-team-dialog-role{color:var(--pfx-accent-deep);font-weight:600;font-size:14px;margin:0 0 18px}
.pfx-team-dialog-bio{color:var(--pfx-ink-2);font-size:15px;line-height:1.72;margin:0;text-align:left;white-space:pre-line}

@media (max-width:640px){
  .pfx-team-head{flex-direction:column;align-items:flex-start}
  .pfx-team-nav{align-self:flex-end;margin-top:-8px}
}
@media (prefers-reduced-motion:reduce){
  .pfx-team-card,.pfx-team-more{transition:none}
  .pfx-team-track{scroll-behavior:auto}
}

/* Property showcase: horizontal scrollable list (scrollbar hidden) + More CTA */
.pfx-show{max-width:1240px;margin:0 auto;padding:clamp(8px,2vw,20px) 0 clamp(24px,3vw,40px)}
.pfx-show-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding:0 clamp(18px,4vw,48px);margin:0 0 22px}
.pfx-show-title{font-family:var(--pfx-display);font-weight:800;font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-.02em;margin:0}
.pfx-show-morelink{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;color:var(--pfx-accent-deep);
  font-weight:700;font-size:14px;transition:gap .2s}
.pfx-show-morelink .pfx-ic{width:16px;height:16px}
.pfx-show-morelink:hover{gap:10px}

.pfx-show-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:clamp(18px,4vw,48px);padding:8px clamp(18px,4vw,48px) 20px;
  scrollbar-width:none;-ms-overflow-style:none}
.pfx-show-track::-webkit-scrollbar{display:none}

.pfx-show-card{scroll-snap-align:start;flex:0 0 clamp(268px,80vw,306px);display:flex;flex-direction:column;
  background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:22px;overflow:hidden;color:inherit;
  box-shadow:0 12px 36px -24px rgba(15,22,58,.3);transition:transform .26s ease,box-shadow .26s ease}
.pfx-show-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(15,22,58,.45)}
.pfx-show-photo{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,#1B2A6B,#14AEDF)}
.pfx-show-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pfx-show-card:hover .pfx-show-photo img{transform:scale(1.06)}
.pfx-show-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pfx-show-fallback .pfx-ic{width:46px;height:46px;color:rgba(255,255,255,.4);stroke-width:1.3}
.pfx-show-badge{position:absolute;bottom:14px;left:14px;background:rgba(15,22,58,.78);color:#fff;
  font-weight:800;font-size:18px;padding:8px 14px;border-radius:11px;font-family:var(--pfx-display)}
.pfx-show-tag{position:absolute;top:14px;left:14px;background:rgba(20,174,223,.95);color:#fff;
  font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.pfx-show-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.pfx-show-name{font-family:var(--pfx-display);font-weight:700;font-size:17px;margin:0 0 4px}
.pfx-show-loc{color:var(--pfx-muted);font-size:13px;margin:0 0 12px}
.pfx-show-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}
.pfx-show-dl dt{color:var(--pfx-faint)}
.pfx-show-dl dd{margin:0;font-weight:600;color:var(--pfx-ink);text-align:right}

.pfx-show-morewrap{display:flex;justify-content:center;padding:clamp(14px,2vw,22px) clamp(18px,4vw,48px) 0}
.pfx-show-morebtn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:14px;
  font-weight:700;font-size:15px;background:var(--pfx-surface);color:var(--pfx-ink);border:1.5px solid var(--pfx-line-2);transition:.2s}
.pfx-show-morebtn:hover{border-color:#14AEDF;color:var(--pfx-accent-deep)}

@media (prefers-reduced-motion:reduce){
  .pfx-show-card,.pfx-show-photo img,.pfx-show-morelink{transition:none}
  .pfx-show-track{scroll-behavior:auto}
}

/* Property developments band (top of /properties/) */
.pfx-dev{background:radial-gradient(120% 120% at 0% 0%,#EFF7FF 0%,#F8FBFF 45%,#fff 100%);
  border-bottom:1px solid var(--pfx-line);padding:clamp(40px,5vw,68px) 0 clamp(30px,4vw,52px)}
.pfx-dev-head{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.pfx-dev-eyebrow{display:inline-block;color:var(--pfx-accent-deep);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 10px}
.pfx-dev-title{font-family:var(--pfx-display);font-weight:800;font-size:clamp(26px,3.6vw,38px);
  letter-spacing:-.02em;margin:0}
.pfx-dev-sub{color:var(--pfx-muted);font-size:15px;line-height:1.6;margin:8px 0 0;max-width:600px}
.pfx-dev-track{max-width:1240px;margin:22px auto 0}

/* Dashboard native file inputs: keep the choose button, hide the OS filename text, show slot */
.pfx-file[data-pfx-preview]{color:transparent;width:auto}
.pfx-file[data-pfx-preview]::file-selector-button{color:var(--pfx-ink)}
.pfx-file[data-pfx-preview] + .pfx-prev-slot{width:44px;height:44px;border-radius:12px;background:var(--pfx-accent-soft);margin-left:12px;vertical-align:middle;overflow:hidden}
.pfx-formfield[data-pfx-ready] .pfx-prev-slot{background:var(--pfx-ok-soft)}

/* Document upload cards (partials/_upload_card.html) — apply, checkout,
   careers. State lives on .pfx-doc: .is-picked (file chosen this visit),
   .is-done (already on file server-side), .is-invalid, .is-drag. */
.pfx-doc{position:relative}
.pfx-doc-card{cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:1.5px dashed var(--pfx-line-2);background:var(--pfx-well);border-radius:14px;padding:18px;transition:.2s}
.pfx-doc-card:hover{border-color:var(--pfx-accent-deep)}
.pfx-doc.is-drag .pfx-doc-card{border-color:#14AEDF;background:var(--pfx-accent-soft)}
.pfx-doc.is-done .pfx-doc-card,.pfx-doc.is-picked .pfx-doc-card{border-style:solid;border-color:var(--pfx-ok-line);background:var(--pfx-ok-soft)}
.pfx-doc.is-invalid .pfx-doc-card{border-color:var(--pfx-danger)}
.pfx-doc-slot{width:44px;height:44px;border-radius:12px;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);
  display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;position:relative}
.pfx-doc.is-done .pfx-doc-slot,.pfx-doc.is-picked .pfx-doc-slot{background:var(--pfx-ok-soft);color:var(--pfx-ok)}
.pfx-doc-slot .pfx-ic{width:21px;height:21px}
.pfx-doc-ic-check{display:none}
.pfx-doc.is-done .pfx-doc-ic-check,.pfx-doc.is-picked .pfx-doc-ic-check{display:block}
.pfx-doc.is-done .pfx-doc-ic-file,.pfx-doc.is-picked .pfx-doc-ic-file{display:none}
.pfx-doc-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfx-doc-txt{flex:1;min-width:0}
.pfx-doc-name{display:block;font-weight:700;font-size:15px;color:var(--pfx-ink)}
.pfx-doc-req{color:var(--pfx-accent-deep)}
.pfx-doc-opt{color:var(--pfx-faint);font-weight:400;font-size:13px}
.pfx-doc-sub{display:block;font-size:13px;color:var(--pfx-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfx-doc.is-picked .pfx-doc-sub{color:var(--pfx-ok);font-weight:600}
.pfx-doc-up{width:20px;height:20px;color:var(--pfx-faint);flex:none}
.pfx-doc.is-picked .pfx-doc-up{visibility:hidden}
/* Sits over the card but outside the <label>, so clicking it never opens the picker. */
.pfx-doc-clear{position:absolute;right:15px;top:29px;width:34px;height:34px;border-radius:50%;
  border:none;background:var(--pfx-surface);color:var(--pfx-faint);display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 4px 12px -4px rgba(15,22,58,.25)}
.pfx-doc-clear:hover{color:var(--pfx-danger)}
.pfx-doc-clear .pfx-ic{width:16px;height:16px}
.pfx-doc-clear[hidden]{display:none}
.pfx-doc .pfx-error{margin-top:6px}

/* Property detail gallery (owner, 30 Sep 2026: modern, usable, elegant).
   Wide screens: one large photo and up to four beside it, laid out by count
   (.pfx-gal-n1..n5). Phones: the grid gives way to a scroll-snap strip. Every
   tile opens .pfx-gal-box, the full-screen viewer (pfxGallery in pfx.js).
   Tiles are min-height:0 with the photo absolutely filling them, so a tall
   photo can never grow a row past the gallery's fixed height. */
.pfx-gal{position:relative;margin-bottom:14px}
.pfx-gal-grid{position:relative;display:grid;gap:8px;height:clamp(320px,42vw,520px);
  border-radius:22px;overflow:hidden}
.pfx-gal-n1{grid-template-columns:1fr}
.pfx-gal-n2{grid-template-columns:2fr 1fr}
.pfx-gal-n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.pfx-gal-n4{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.pfx-gal-n5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.pfx-gal-n3 .pfx-gal-main,.pfx-gal-n4 .pfx-gal-main,.pfx-gal-n5 .pfx-gal-main{grid-row:1/3}
.pfx-gal-n4 .pfx-gal-tile:nth-child(2){grid-column:2/4}
.pfx-gal-tile{position:relative;min-height:0;min-width:0;padding:0;border:0;margin:0;
  background:var(--pfx-well);cursor:zoom-in;overflow:hidden;display:block}
.pfx-gal-tile img,.pfx-gal-slide img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.pfx-gal-tile:hover img{transform:scale(1.035);filter:brightness(.94)}
.pfx-gal-tile:focus-visible{outline:3px solid var(--pfx-accent);outline-offset:-3px}
.pfx-gal-flag{position:absolute;top:16px;left:16px;z-index:2;background:var(--pfx-btn-bg);
  color:var(--pfx-btn-fg);font-weight:700;font-size:12px;padding:6px 13px;border-radius:100px;
  pointer-events:none}
.pfx-gal-all{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;
  align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid rgba(15,22,58,.12);
  background:rgba(255,255,255,.94);color:#0F163A;font:600 14px/1 Inter,system-ui,sans-serif;
  cursor:pointer;box-shadow:0 8px 24px -10px rgba(15,22,58,.45);backdrop-filter:blur(6px);transition:.2s}
.pfx-gal-all:hover{background:#fff;transform:translateY(-1px)}
.pfx-gal-all .pfx-ic{width:16px;height:16px}
.pfx-gal-swipe{display:none}
.pfx-gal-count{font:600 13px/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.pfx-gal-count--swipe{display:none}
.pfx-gal-empty{position:relative;height:clamp(220px,30vw,340px);margin-bottom:14px;border-radius:22px;
  background:linear-gradient(135deg,#1B2A6B,#14AEDF);color:rgba(255,255,255,.75);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;font-weight:600}
.pfx-gal-empty .pfx-ic{width:64px;height:64px;stroke-width:1.1;color:rgba(255,255,255,.5)}

/* The viewer. Dark whatever the site theme: photos read best on near-black. */
.pfx-gal-box{position:fixed;inset:0;z-index:1000;background:rgba(8,10,20,.97);color:#fff;
  display:flex;flex-direction:column}
.pfx-gal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.pfx-gal-x,.pfx-gal-nav{width:44px;height:44px;border-radius:50%;border:0;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;
  cursor:pointer;transition:background .2s}
.pfx-gal-x:hover,.pfx-gal-nav:hover{background:rgba(255,255,255,.2)}
.pfx-gal-x svg,.pfx-gal-nav svg{width:22px;height:22px}
.pfx-gal-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  gap:16px;padding:0 18px}
.pfx-gal-fig{margin:0;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;pointer-events:none}
.pfx-gal-fig img{max-width:100%;max-height:calc(100% - 30px);object-fit:contain;border-radius:6px;
  user-select:none;pointer-events:auto}
.pfx-gal-fig figcaption{font-size:14px;color:rgba(255,255,255,.75);text-align:center}
.pfx-gal-nav{flex:none}
.pfx-gal-strip{display:flex;gap:8px;padding:14px 18px 18px;overflow-x:auto;justify-content:safe center;
  scrollbar-width:none}
.pfx-gal-strip::-webkit-scrollbar{display:none}
.pfx-gal-thumb{flex:none;width:72px;height:52px;padding:0;border:2px solid transparent;border-radius:8px;
  overflow:hidden;background:#222;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s}
.pfx-gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pfx-gal-thumb:hover{opacity:.85}
.pfx-gal-thumb.is-on{opacity:1;border-color:#fff}

@media(max-width:860px){
  .pfx-gal-grid{display:none}
  .pfx-gal-swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;
    height:min(72vw,380px);scrollbar-width:none;overscroll-behavior-x:contain}
  .pfx-gal-swipe::-webkit-scrollbar{display:none}
  .pfx-gal-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;padding:0;border:0;
    background:var(--pfx-well);overflow:hidden}
  .pfx-gal-count--swipe{display:block;position:absolute;right:12px;bottom:12px;z-index:2;
    padding:6px 11px;border-radius:100px;background:rgba(8,10,20,.62);color:#fff;pointer-events:none}
  .pfx-gal-nav{display:none!important}
  .pfx-gal-stage{padding:0}
  .pfx-gal-fig img{border-radius:0}
}
@media(prefers-reduced-motion:reduce){
  .pfx-gal-tile img,.pfx-gal-all{transition:none}
  .pfx-gal-tile:hover img{transform:none}
}

/* Property detail: collapse the two-column layout and gallery on mobile
   (!important needed to beat the templates' inline grid-template-columns) */
@media(max-width:860px){
  .pfx-pgrid{grid-template-columns:1fr!important}
  .pfx-paside{position:static!important}
}

/* Card image slider: prev/next + dots overlay for pfx-prop/pfx-prod cards */
.pfx-card-link{position:absolute;inset:0;z-index:1}
.pfx-cardnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:32px;height:32px;
  border-radius:50%;border:none;background:rgba(15,22,58,.55);color:#fff;display:flex;
  align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.pfx-cardnav .pfx-ic{width:16px;height:16px}
.pfx-cardnav--prev{left:10px}
.pfx-cardnav--prev .pfx-ic{transform:rotate(180deg)}
.pfx-cardnav--next{right:10px}
.pfx-cardnav:hover{background:#14AEDF}
.pfx-carddots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:6px}
.pfx-carddot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);border:none;padding:0;cursor:pointer;transition:.2s}
.pfx-carddot.is-active{background:var(--pfx-surface);width:16px;border-radius:3px}

/* Generic light-theme horizontal slider (similar properties / also-like sections) */
.pfx-slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 22px}
.pfx-slider-nav{display:flex;gap:10px;flex-shrink:0}
.pfx-slider-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--pfx-line-2);background:var(--pfx-surface);
  color:var(--pfx-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;
  box-shadow:0 8px 20px -14px rgba(15,22,58,.3)}
.pfx-slider-arrow .pfx-ic{width:18px;height:18px}
.pfx-slider-arrow:first-child .pfx-ic{transform:rotate(180deg)}
.pfx-slider-arrow:hover:not(:disabled){border-color:#14AEDF;color:var(--pfx-accent-deep)}
.pfx-slider-arrow:disabled{opacity:.32;cursor:default}
.pfx-slider-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 4px 20px;scrollbar-width:none;-ms-overflow-style:none}
.pfx-slider-track::-webkit-scrollbar{display:none}
.pfx-slidecard{scroll-snap-align:start;flex:0 0 clamp(270px,80vw,340px)}

@media (prefers-reduced-motion:reduce){
  .pfx-slider-track{scroll-behavior:auto}
}

/* ============================================================
   Ops-console layer — dashboard-scoped upgrades. Everything here
   applies inside any .pfx-console container (dashboard shell, apply
   wizard) so untagged public forms are untouched.
   ============================================================ */

/* Blueprint grid over the shell background */
[data-pfx-scope=dashboard] .pfx-shell-main{
  background-image:linear-gradient(rgba(20,174,223,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,174,223,.04) 1px,transparent 1px);
  background-size:28px 28px}

/* Console labels: micro-caps with a status LED that tracks field state */
.pfx-console .pfx-label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pfx-muted)}
.pfx-console .pfx-label::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:8px;vertical-align:1px;background:#C7D0DE;
  box-shadow:0 0 0 3px rgba(199,208,222,.22);transition:background .2s,box-shadow .2s}
.pfx-console .pfx-formfield:focus-within .pfx-label::before{
  background:var(--pfx-accent);box-shadow:none;animation:pfxBlink 1.4s infinite}
.pfx-console .pfx-formfield.is-valid .pfx-label::before{
  background:var(--pfx-ok);box-shadow:none;animation:none}
.pfx-console .pfx-formfield.is-invalid .pfx-label::before{
  background:var(--pfx-danger);box-shadow:none;animation:none}

/* Console fields: quieter at rest, glowing when armed */
.pfx-console .pfx-field{
  background:var(--pfx-well);border-color:#DCE3EE;border-radius:11px;font-size:14.5px}
.pfx-console .pfx-field:focus{
  background:var(--pfx-surface);border-color:var(--pfx-accent);
  box-shadow:0 0 0 4px var(--pfx-accent-glow)}
.pfx-console .pfx-formgrid{gap:4px 22px}

/* Fieldset legend chips: `01 · IDENTITY` section markers inside forms */
.pfx-legend{display:flex;align-items:center;gap:11px;margin:26px 0 16px;
  font-family:var(--pfx-display);font-weight:800;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pfx-ink)}
.pfx-legend:first-child{margin-top:0}
.pfx-legend-num{font-family:var(--pfx-mono);font-weight:700;font-size:11px;
  color:var(--pfx-accent-deep);background:var(--pfx-accent-soft);
  border:1px solid var(--pfx-accent-glow);border-radius:7px;padding:3px 8px}
.pfx-legend::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--pfx-line-2),transparent)}

/* On a handset the section heading follows you down its own section.

   "About you" is four sections and 3,100px — four screens — and the stepper
   that says where you are in the wizard scrolls away in the first swipe. This
   is the smaller question underneath it: which part of *this* step am I in.
   Sticky costs nothing, because the heading is on the page either way, and it
   answers that question without adding a single pixel of chrome.

   It sticks inside its own <section>, so it hands over rather than stacking:
   "Where you live" pushes "How to reach you" up and off as you reach it. */
@media (max-width:820px){
  .pfx-fieldset{position:relative}
  .pfx-legend{position:sticky;top:0;z-index:5;
    /* Pulled out to the card's padding, not the page's — the heading lives
       inside .pfx-formcard, and cancelling the wrong one left it hanging over
       the page background with its corners past the card's edge. */
    margin-inline:calc(-1 * clamp(22px,3vw,34px));
    padding:11px clamp(22px,3vw,34px) 10px;
    background:var(--pfx-surface);
    /* The hairline the desktop draws with ::after becomes the underline of
       what is now a bar sitting over content. */
    box-shadow:0 1px 0 var(--pfx-line)}
  .pfx-legend::after{display:none}
}

/* Commit bar: sticky dark strip that carries a form's submit actions */
.pfx-commitbar{position:sticky;bottom:14px;z-index:30;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;margin-top:24px;padding:12px 14px 12px 20px;
  background:linear-gradient(120deg,var(--pfx-navy),var(--pfx-navy-2));
  border:1px solid rgba(127,217,244,.22);border-radius:16px;
  box-shadow:none}
.pfx-commitbar-msg{flex:1;min-width:180px;font-family:var(--pfx-mono);font-size:11.5px;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#7FD9F4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfx-commitbar-msg::before{content:"▮";margin-right:9px;animation:pfxBlink 1.6s infinite}
.pfx-commitbar .pfx-dbtn-secondary{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.24)}
.pfx-commitbar .pfx-dbtn-secondary:hover{border-color:#7FD9F4;color:#A5E6F9}
.pfx-commitbar .pfx-dbtn-primary:hover{box-shadow:none}

/* Form + context-rail layout (application detail, record editors) */
.pfx-formlayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media(max-width:1100px){.pfx-formlayout{grid-template-columns:1fr}}
.pfx-ctxrail{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px}
.pfx-ctxcard{background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:16px;padding:18px}
.pfx-ctxcard-title{font-family:var(--pfx-display);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pfx-faint);margin:0 0 12px}
.pfx-ctxrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;
  border-bottom:1px dashed var(--pfx-line)}
.pfx-ctxrow:last-child{border-bottom:none}
.pfx-ctxrow dt{color:var(--pfx-faint);margin:0}
.pfx-ctxrow dd{margin:0;font-family:var(--pfx-mono);font-size:12.5px;font-weight:500;
  color:var(--pfx-ink);text-align:right;overflow-wrap:anywhere}

/* Role badge (topbar): mono chip with a live LED */
.pfx-rolebadge{display:inline-flex;align-items:center;gap:8px;font-family:var(--pfx-mono);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pfx-accent-deep);background:var(--pfx-accent-soft);
  border:1px solid var(--pfx-accent-glow);border-radius:9px;padding:7px 11px;white-space:nowrap}
.pfx-rolebadge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--pfx-accent);box-shadow:0 0 8px rgba(20,174,223,.9);animation:pfxBlink 2.2s infinite}
.pfx-rolebadge--ok::before{background:var(--pfx-ok);box-shadow:0 0 8px rgba(18,163,112,.9)}

/* Reference numbers, amounts, statuses — anything machine-flavored */
.pfx-console .pfx-ref{font-family:var(--pfx-mono);font-size:.92em;font-weight:500;letter-spacing:.01em}

/* Stage rail: chain-of-custody pipeline across the top of a record */
.pfx-stagerail{display:flex;align-items:flex-start;gap:0;background:var(--pfx-surface);
  border:1px solid var(--pfx-line);border-radius:18px;padding:20px 22px 16px;
  overflow-x:auto;margin-bottom:18px}
.pfx-stage{display:flex;align-items:flex-start;flex:1;min-width:118px}
.pfx-stage-node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;
  min-width:96px;text-align:center}
.pfx-stage-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--pfx-mono);font-weight:700;font-size:12px;
  background:var(--pfx-surface);color:var(--pfx-faint);border:2px solid var(--pfx-line-2);transition:.25s}
.pfx-stage-dot .pfx-ic{width:14px;height:14px;stroke-width:2.5}
.pfx-stage.is-done .pfx-stage-dot{background:var(--pfx-btn-bg);color:var(--pfx-btn-fg);border-color:var(--pfx-btn-bg)}
.pfx-stage.is-current .pfx-stage-dot{color:var(--pfx-accent);border-color:var(--pfx-accent);
  box-shadow:0 0 0 4px var(--pfx-accent-glow),0 0 16px -4px rgba(20,174,223,.6);
  animation:pfxBlink 2.4s infinite}
.pfx-stage-label{font-family:var(--pfx-display);font-weight:700;font-size:12px;color:var(--pfx-faint)}
.pfx-stage.is-done .pfx-stage-label{color:var(--pfx-ink)}
.pfx-stage.is-current .pfx-stage-label{color:var(--pfx-accent-deep)}
.pfx-stage-meta{font-family:var(--pfx-mono);font-size:10px;color:var(--pfx-faint);
  line-height:1.5;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.pfx-stage-line{height:2px;flex:1;margin:14px 6px 0;background:var(--pfx-line-2);
  border-radius:2px;min-width:14px}
.pfx-stage.is-done .pfx-stage-line{background:var(--pfx-accent)}
.pfx-stagerail-declined{display:inline-flex;align-items:center;gap:8px;flex:none;
  margin:8px 0 0 6px;font-family:var(--pfx-mono);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--pfx-danger);
  background:var(--pfx-danger-soft);border:1px solid var(--pfx-danger-line);border-radius:9px;padding:7px 11px}

/* Locked action: rendered (process stays legible) but not usable.
   Pair with a title attr naming the role, e.g. "Requires: Verifier". */
.pfx-locked{display:inline-flex;align-items:center;gap:7px;font-family:var(--pfx-mono);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pfx-faint);background:var(--pfx-well);border:1px dashed var(--pfx-line-2);
  border-radius:10px;padding:8px 13px;cursor:not-allowed;user-select:none;white-space:nowrap}
.pfx-locked .pfx-ic{width:13px;height:13px}

/* ============================================================
   Command deck — landing hero with the calculator in viewport one
   ============================================================ */
.pfx-deck{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(1100px 540px at 78% -8%,#12385f 0%,rgba(18,56,95,0) 60%),
  radial-gradient(900px 520px at -10% 110%,rgba(20,174,223,.5),rgba(20,174,223,0) 55%),#0F163A}
.pfx-deck::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(127,217,244,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,217,244,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(1000px 640px at 68% 32%,#000,transparent 78%);
  mask-image:radial-gradient(1000px 640px at 68% 32%,#000,transparent 78%)}
.pfx-deck-inner{position:relative;max-width:1240px;margin:0 auto;
  padding:clamp(40px,6vw,88px) clamp(18px,4vw,48px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.pfx-deck-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--pfx-mono);
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7FD9F4;margin:0 0 18px}
.pfx-deck-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--pfx-accent);box-shadow:0 0 10px rgba(20,174,223,.95);animation:pfxBlink 2.2s infinite}
.pfx-deck h1{font-family:var(--pfx-display);font-weight:800;
  font-size:clamp(36px,4.8vw,60px);line-height:1.04;letter-spacing:-.02em;margin:0;max-width:15ch}
.pfx-deck-sub{font-size:clamp(16px,1.8vw,19px);color:#C6CFE8;max-width:520px;margin:18px 0 0}
.pfx-deck-cta{display:flex;gap:13px;margin:28px 0 0;flex-wrap:wrap}

/* Group hero. The two-column deck exists to sit a loan calculator beside the
   headline; the holdings page has no calculator and no product to quote, so
   its hero is one centred column that states who the group is. */
.pfx-deck-inner--group{display:block;max-width:900px;text-align:center;
  padding-top:clamp(44px,7vw,104px);padding-bottom:clamp(36px,6vw,88px)}
.pfx-deck--group{min-height:min(86svh,760px);display:flex;align-items:center}
.pfx-deck-inner--group h1{max-width:20ch;margin:0 auto}

/* The group's name is the homepage's headline, so it is set as one: display
   weight, tight tracking, and larger than any other type on the site. The
   lower bound is 12vw rather than a fixed px so "Probfix Holdings" still fits
   a 320px screen instead of overflowing it. */
.pfx-deck-wordmark{font-size:clamp(38px,12vw,92px)!important;line-height:.98!important;
  letter-spacing:-.035em!important;max-width:none!important;text-wrap:balance}
.pfx-deck-tagline{font-family:var(--pfx-display);font-weight:700;
  font-size:clamp(18px,4.4vw,28px);line-height:1.25;letter-spacing:-.01em;
  color:#fff;max-width:26ch;margin:16px auto 0;text-wrap:balance}
/* Body copy over a photograph is the hard case: it needs 4.5 where the display
   type needs 3.0, and it is the reason the veil used to be opaque. Giving this
   one paragraph a backdrop buys the other 90% of the frame its photograph back.
   The colour lifts from #A9B4D6, which failed its own worst case at 4.05 even
   under the old heavy veil. */
.pfx-deck-inner--group .pfx-deck-sub{max-width:640px;margin:18px auto 0;color:#E6EBF8;
  background:rgba(11,17,46,.58);padding:13px 20px;border-radius:15px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ── the six doors in the hero ────────────────────────────────────────────
   A holding company's front door should let somebody through it. This was a
   wordmark, a sentence and a scroll cue: beautiful enough and useless to
   anybody who came for a rate or a stand.

   Each door carries its own translucent surface, which is what lets the veil
   above stay light: the type sits on the chip rather than on the photograph, so
   legibility no longer argues with letting the picture show. The unit's own
   colour rides in on the icon only, because six coloured chips would be a
   fruit bowl. */
.pfx-deckdoors{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:30px auto 0;max-width:760px}
.pfx-deckdoor{display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 11px 12px;border-radius:14px;
  background:rgba(11,17,46,.58);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  color:#fff;font-family:var(--pfx-display);font-weight:600;font-size:14.5px;
  letter-spacing:-.005em;white-space:nowrap;
  /* 44px tall including the border: a real target on a phone. */
  min-height:44px;box-sizing:border-box;
  transition:background .2s,border-color .2s,transform .2s}
.pfx-deckdoor:hover{background:rgba(11,17,46,.76);border-color:rgba(255,255,255,.34);
  transform:translateY(-2px)}
.pfx-deckdoor:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pfx-deckdoor-ic{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;border-radius:9px;
  background:rgba(255,255,255,.12);color:var(--unit,#7FD9F4)}
.pfx-deckdoor-ic .pfx-ic{width:16px;height:16px}
.pfx-deckdoor-go{width:14px;height:14px;opacity:0;margin-left:-4px;
  transition:opacity .2s,transform .2s;transform:translateX(-4px)}
.pfx-deckdoor:hover .pfx-deckdoor-go{opacity:.8;transform:translateX(0)}



@media(max-width:560px){
  /* Two per row, which needs the label to be allowed to wrap: `nowrap` plus a
     name like "Infrastructure Development" gives a min-content width wider than
     half the screen, so all six took a row each and the hero grew past one
     screenful. The arrow goes too — on a phone the whole chip is the target and
     there is no hover to reveal anything. */
  .pfx-deckdoors{gap:8px;max-width:none}
  .pfx-deckdoor{font-size:13px;padding:9px 11px;line-height:1.25;
    flex:1 1 calc(50% - 8px);min-width:0;white-space:normal;
    justify-content:flex-start;text-align:left}
  .pfx-deckdoor-ic{width:26px;height:26px}
  .pfx-deckdoor-go{display:none}
}


/* Hero film: crossfading stills behind a wordmark that never moves. The frames
   sit under their own veil so the type keeps its contrast whatever the photo
   underneath is doing. */
.pfx-deckfilm{position:absolute;inset:0;overflow:hidden}
.pfx-deckframe{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease-in-out;transform:scale(1.06)}
.pfx-deckframe.is-on{opacity:1;animation:pfxDrift 9s ease-out forwards}
/* Pre-boot: show the first still so the hero is never a bare gradient.
   Alpine's bound opacity takes over the moment it initialises. */
.pfx-deckframe:first-child{opacity:1}
@keyframes pfxDrift{from{transform:scale(1.06)}to{transform:scale(1)}}
/* The veil was 72% to 95% opaque navy, which is to say the photographs behind
   it were decoration nobody could see. It is now roughly half that, with the
   darkness gathered where the type sits instead of spread flat over the whole
   frame: a soft ellipse behind the wordmark, and the corners left nearly clear.
   Centred at 30% rather than 46% since 22 Aug 2026: the six company doors moved
   the wordmark and tagline up, and they are the only type here still reading
   off the veil rather than off a backdrop of its own.

   The numbers are not taste. Each candidate was composited over the four real
   hero photographs and measured per element, at the band each one occupies, and
   then over a pure white frame as the worst case for any photograph somebody
   adds later. This one clears AA everywhere: the wordmark and the tagline are
   large text at 3.0 and come out at 4.76 or better on the real stills (3.59 on
   a white frame), and the sub paragraph is body copy at 4.5 and comes out at
   8.71 or better, which it manages by having a backdrop of its own below.

   Corners land around rgb(143,146,159) over white, against rgb(28,33,60)
   before, which is the whole point: there is a photograph there now. */
.pfx-deckveil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,17,46,.46) 0%,rgba(15,22,58,.40) 46%,rgba(13,25,66,.34) 100%),
             radial-gradient(62% 52% at 50% 30%,rgba(15,22,58,.58) 0%,rgba(15,22,58,0) 100%),
             radial-gradient(900px 520px at -10% 110%,rgba(20,174,223,.22),rgba(20,174,223,0) 55%)}
/* On a handset the same words run nearly edge to edge while the ellipse above,
   being sized in percentages, narrows with the viewport. Measured on a 375 by
   680 hero the wordmark fell to 2.79:1, so the scrim widens past the frame and
   the base lifts a little. Still half the old flat veil, and the photograph
   still reads at the corners. */
@media (max-width:760px){
  .pfx-deckveil{background:linear-gradient(100deg,rgba(11,17,46,.52) 0%,rgba(15,22,58,.46) 46%,rgba(13,25,66,.40) 100%),
                radial-gradient(130% 60% at 50% 46%,rgba(15,22,58,.50) 0%,rgba(15,22,58,0) 100%),
                radial-gradient(900px 520px at -10% 110%,rgba(20,174,223,.18),rgba(20,174,223,0) 55%)}
}

/* One control bar: arrows, the dots, and pause. Every button is at least 44px
   in both directions, which is the touch-target floor, while the visible dot
   stays a 4px rule. */
.pfx-deckbar{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:clamp(22px,4vw,34px) 0 0;flex-wrap:wrap}
.pfx-deckarrow{width:44px;height:44px;flex:none;display:flex;align-items:center;
  justify-content:center;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#fff;transition:background .22s,border-color .22s}
.pfx-deckarrow:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.pfx-deckarrow:focus-visible{outline:2px solid var(--pfx-accent);outline-offset:2px}
.pfx-deckarrow .pfx-ic{width:17px;height:17px}
.pfx-deckdots{display:flex;align-items:center;gap:2px}
.pfx-deckdot{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.pfx-deckdot-bar{display:block;width:26px;height:4px;border-radius:100px;
  background:rgba(255,255,255,.3);transition:background .25s,width .25s}
.pfx-deckdot.is-on .pfx-deckdot-bar{background:var(--pfx-accent);width:36px}
.pfx-deckdot:hover .pfx-deckdot-bar{background:rgba(255,255,255,.55)}
.pfx-deckdot:focus-visible{outline:2px solid var(--pfx-accent);outline-offset:-6px;border-radius:12px}

.pfx-deck-scroll{display:inline-flex;align-items:center;gap:9px;margin:28px 0 0;
  background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:15.5px;
  padding:14px 26px;border-radius:14px;border:1px solid rgba(255,255,255,.22);transition:.22s}
.pfx-deck-scroll:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
/* Placed after the base rule deliberately: same specificity, so the one
   written later wins. Above it, this modifier lost and the cue rendered
   with the base background of rgba(255,255,255,.08) — which measures 2.4:1
   against the photographs while the stylesheet said otherwise.
   The scroll cue steps back now that the doors are the thing to press — but it
   keeps a backdrop. Demoting it to bare text took it to 2.38:1 against the
   photographs: it sits lowest in the frame, where the veil is at its lightest,
   and it is small text needing 4.5. Quieter than a door by having no border and
   smaller type, not by giving up its ground. */
.pfx-deck-scroll--quiet{background:rgba(11,17,46,.58);border:none;color:#E6EBF8;
  font-weight:600;font-size:14px;padding:10px 16px;border-radius:12px;
  box-shadow:none;margin-top:20px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pfx-deck-scroll--quiet:hover{color:#fff;background:rgba(11,17,46,.74)}

@media (max-width:640px){
  /* A swipe does what the arrows do, so they stop taking up the bar. */
  .pfx-deckarrow:not(.pfx-deckpause){display:none}
  .pfx-deck--group{min-height:min(92svh,680px)}
  .pfx-deck-inner--group .pfx-deck-sub{font-size:15px}
  .pfx-deck-scroll{width:100%;justify-content:center}
  /* Pause leaves the flow so the dots read as centred rather than shunted
     left by the width of a button sitting beside them. */
  .pfx-deckbar{gap:2px;position:relative}
  .pfx-deckbar .pfx-deckpause{position:absolute;right:0;top:50%;transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .pfx-deckframe{transition:none;transform:none}
  .pfx-deckframe.is-on{animation:none;transform:none}
  .pfx-deckdot-bar{transition:none}
  .pfx-deck-scroll:hover{transform:none}
}
.pfx-deck--group .pfx-deck-inner{position:relative}

/* #i-chev already points down, so it needs no rotation here: turning it 90deg
   made the scroll cue point left, away from the section it leads to. */
@media (prefers-reduced-motion:reduce){.pfx-deck-scroll{transition:none}
  .pfx-deck-scroll:hover{transform:none}}
.pfx-deck-trust{display:flex;gap:clamp(16px,2.5vw,32px);flex-wrap:wrap;margin:34px 0 0;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.pfx-deck-trust span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#A9B4D6}
.pfx-deck-trust .pfx-ic{width:16px;height:16px;color:#7FD9F4}

/* Mini calculator card */
.pfx-deckcalc{position:relative;background:var(--pfx-surface);color:var(--pfx-ink);border-radius:24px;
  padding:clamp(20px,2.4vw,28px);border:1px solid rgba(127,217,244,.4);
  box-shadow:none}
.pfx-deckcalc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.pfx-deckcalc-title{font-family:var(--pfx-display);font-weight:800;font-size:16px;letter-spacing:-.01em;margin:0}
.pfx-deckcalc-live{font-family:var(--pfx-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--pfx-accent-deep);
  background:var(--pfx-accent-soft);border:1px solid var(--pfx-accent-glow);border-radius:7px;padding:4px 8px}
.pfx-deckcalc .pfx-seg{margin-bottom:16px;width:100%}
.pfx-deckcalc .pfx-seg-btn{padding:10px;font-size:14px}
.pfx-deckcalc-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pfx-muted);margin:0 0 8px}
.pfx-pill-sm{padding:9px 15px;font-size:13.5px;border-width:1.5px}
.pfx-deckcalc-readout{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:18px 0 0;padding:15px 18px;border-radius:15px;color:#fff;
  background:linear-gradient(120deg,var(--pfx-navy),var(--pfx-navy-2))}
.pfx-deckcalc-readout small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#A9B4D6;margin-bottom:3px}
.pfx-deckcalc-amt{font-family:var(--pfx-mono);font-weight:700;font-size:clamp(24px,2.6vw,30px);
  letter-spacing:-.02em;color:#7FD9F4;line-height:1}
.pfx-deckcalc-per{font-family:var(--pfx-mono);font-size:11.5px;color:#A9B4D6;text-align:right}
@media(max-width:960px){
  .pfx-deck-inner{grid-template-columns:1fr;gap:32px}
  .pfx-deck h1{max-width:none}
}

/* Compact how-it-works strip */
.pfx-stepstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.pfx-stepstrip-item{display:flex;gap:13px;align-items:flex-start;background:var(--pfx-surface);
  border:1px solid var(--pfx-line);border-radius:16px;padding:18px}
.pfx-stepstrip-num{font-family:var(--pfx-mono);font-weight:700;font-size:13px;flex:none;
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);border:1px solid var(--pfx-accent-glow)}
.pfx-stepstrip-item h3{font-family:var(--pfx-display);font-weight:700;font-size:15.5px;margin:1px 0 3px}
.pfx-stepstrip-item p{color:var(--pfx-muted);font-size:13.5px;line-height:1.5;margin:0}

/* Marketplace tabs (properties | shop) */
.pfx-mkt-tabs{display:inline-flex;background:var(--pfx-well);border-radius:999px;padding:5px;gap:3px}
.pfx-mkt-tab{border:none;cursor:pointer;padding:10px 24px;border-radius:999px;
  font-family:var(--pfx-display);font-weight:700;font-size:14.5px;color:var(--pfx-muted);
  background:transparent;transition:.2s;white-space:nowrap}
.pfx-mkt-tab:hover{color:var(--pfx-ink)}
.pfx-mkt-tab.is-active{background:var(--pfx-surface);color:var(--pfx-accent-deep);
  box-shadow:0 6px 16px -8px rgba(15,22,58,.45)}

/* Forex converter: From / swap / To. Side by side where there is room; on a
   phone each side collapses to one row — amount|currency and result|currency
   — so the whole card stays about two fields tall. The select is narrow
   there, but options lead with the code so truncation only costs the long
   name. The app mirrors this same compact shape. */
.pfx-fx-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.pfx-fx-side{display:grid;gap:8px}
.pfx-fx-side .pfx-label{margin:0}
.pfx-fx-grid #fx-swap{width:42px;height:42px;margin-bottom:6px;border-radius:12px;
  border:1.5px solid var(--pfx-line-2);background:var(--pfx-well);
  color:var(--pfx-accent-deep);font-size:17px;cursor:pointer}
@media(max-width:640px){
  .pfx-fx-grid{grid-template-columns:1fr;gap:6px}
  .pfx-fx-side{grid-template-columns:minmax(0,1fr) 122px;column-gap:8px;align-items:center}
  .pfx-fx-side .pfx-label{grid-column:1/-1}
  .pfx-fx-grid #fx-swap{margin:2px auto;width:44px;height:36px;border-radius:999px}
}

/* Honeypot wrapper for the contact form. Positioned off-screen rather than
   display:none: some bots skip hidden inputs but fill anything they can see in
   the DOM, and this must stay fillable by them while being unreachable for
   anybody using the page. aria-hidden and tabindex=-1 in the markup keep it out
   of the accessibility tree and the tab order. */
.pfx-nothanks{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}

/* Notifications bell + panel (9 Oct 2026). The same messages as the app's
   inbox; see push/web.py. On phones it stays in the bar beside the burger. */
.pfx-inbox{position:relative;flex:none}
.pfx-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(15,22,58,.14);background:rgba(15,22,58,.04);color:var(--pfx-muted);cursor:pointer;transition:background .15s,color .15s}
.pfx-bell:hover,.pfx-bell[aria-expanded="true"]{color:var(--pfx-ink);background:rgba(15,22,58,.08)}
.pfx-bell .pfx-ic{width:19px;height:19px}
.pfx-bell-n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#D64545;color:#fff;font:700 10.5px/18px Inter,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--pfx-bg)}
.pfx-inbox-panel{position:absolute;top:calc(100% + 12px);right:0;width:384px;max-width:calc(100vw - 32px);background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:18px;box-shadow:0 28px 60px -24px rgba(8,12,34,.5);overflow:hidden;z-index:70;font-family:Inter,sans-serif}
.pfx-inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--pfx-line)}
.pfx-inbox-head>span{font-family:var(--pfx-display);font-weight:700;font-size:16px;color:var(--pfx-ink)}
.pfx-inbox-all{background:none;border:0;padding:4px 6px;border-radius:8px;font:600 13px Inter,sans-serif;color:var(--pfx-accent-deep);cursor:pointer}
.pfx-inbox-all:hover{background:var(--pfx-accent-soft)}
.pfx-inbox-body{max-height:min(480px,calc(100vh - 160px));overflow-y:auto;overscroll-behavior:contain}
.pfx-inbox-list{list-style:none;margin:0;padding:6px}
.pfx-note{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:inherit;transition:background .12s}
.pfx-note:hover{background:var(--pfx-well)}
.pfx-note-ic{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep)}
.pfx-note-ic .pfx-ic{width:17px;height:17px}
.pfx-note-ic.is-action{background:rgba(161,98,7,.12);color:var(--pfx-warn)}
.pfx-note-ic.is-payment{background:var(--pfx-ok-soft);color:var(--pfx-ok)}
.pfx-note-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pfx-note-top{display:flex;align-items:baseline;gap:10px}
.pfx-note-title{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--pfx-ink);line-height:1.35}
.pfx-note.is-unread .pfx-note-title{font-weight:700}
.pfx-note-when{flex:none;font-size:12px;color:var(--pfx-faint);white-space:nowrap}
.pfx-note-body{font-size:13px;line-height:1.45;color:var(--pfx-muted)}
.pfx-note-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--pfx-accent)}
.pfx-inbox-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 28px 38px}
.pfx-inbox-empty-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);margin-bottom:14px}
.pfx-inbox-empty-ic .pfx-ic{width:24px;height:24px}
.pfx-inbox-empty strong{font-family:var(--pfx-display);font-size:16px;color:var(--pfx-ink)}
.pfx-inbox-empty p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--pfx-muted);max-width:260px}
.pfx-inbox-err{margin:0;padding:28px 22px;text-align:center;font-size:13.5px;color:var(--pfx-muted)}
.pfx-inbox-loading{padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.pfx-inbox-loading i{display:block;height:44px;border-radius:12px;background:var(--pfx-well);animation:pfxInboxPulse 1.2s ease-in-out infinite}
@keyframes pfxInboxPulse{50%{opacity:.5}}
html[data-theme="dark"] .pfx-bell{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
html[data-theme="dark"] .pfx-bell:hover,html[data-theme="dark"] .pfx-bell[aria-expanded="true"]{background:rgba(255,255,255,.1)}
@media(max-width:1259px){
  .pfx-inbox{margin-left:auto}
  .pfx-inbox+.pfx-burger{margin-left:8px!important}
  .pfx-bell{width:44px;height:44px}
}
@media(max-width:560px){
  /* A phone: the panel spans the screen under the bar, 16px each side.
     Placed against the sticky header, so a topbar above it does not matter. */
  .pfx-inbox{position:static}
  .pfx-inbox-panel{top:calc(100% - 6px);left:16px;right:16px;width:auto;max-width:none}
  .pfx-inbox-body{max-height:calc(100vh - 170px)}
}
/* On the account pages it is one of the topbar's icon buttons, and keeps its
   panel anchored to itself at every width (it is the last button). */
.pfx-bell.cx-iconbtn{position:relative;padding:0}
.pfx-inbox--cx .pfx-bell-n{box-shadow:0 0 0 2px var(--surface,#fff)}
@media(max-width:1259px){.pfx-inbox--cx{margin-left:0}.pfx-inbox--cx .pfx-bell{width:38px;height:38px}}
@media(max-width:560px){
  .pfx-inbox--cx{position:relative}
  .pfx-inbox--cx .pfx-inbox-panel{top:calc(100% + 10px);left:auto;right:0;width:calc(100vw - 32px)}
}

/* ── The loan wizard on a phone, drawn like the app's Apply screen ────────
   Owner, 9 Oct 2026: the website on a phone should look and behave like the
   app. The site's top bar, header and footer stand down; the page opens on the
   app's tinted band (round back button, centred title) and a slim step bar
   with "Step 1 of 5" and what comes next. The numbered stepper and the step's
   eyebrow are the desktop's. The Back/Continue bar steps aside while the
   keyboard is up (base_apply.html), as the app's does. Solid fills only. */
.pfx-apband,.pfx-apsteps{display:none}
@media (max-width:760px){
  body.pfx-focus .pfx-topbar,body.pfx-focus .pfx-header,body.pfx-focus>footer{display:none}
  body.pfx-focus .pfx-formpage{padding-top:0}
  .pfx-apband{display:flex;align-items:center;min-height:48px;background:#DDF0F8;
    border-radius:0 0 28px 28px;margin:0 calc(-1 * clamp(16px,4vw,24px)) 18px;
    padding:calc(10px + env(safe-area-inset-top)) clamp(16px,4vw,24px) 16px}
  html[data-theme="dark"] .pfx-apband{background:#0E1A2C}
  .pfx-apband-back{width:42px;height:42px;border-radius:50%;background:var(--pfx-surface);
    color:var(--pfx-ink);display:flex;align-items:center;justify-content:center;flex:none}
  .pfx-apband-back .pfx-ic{width:20px;height:20px}
  .pfx-apband-title{flex:1;text-align:center;margin-right:42px;font-family:var(--pfx-display);
    font-weight:700;font-size:19px;color:var(--pfx-ink)}
  .pfx-apsteps{display:block;margin-bottom:18px}
  .pfx-apsteps-top{display:flex;align-items:center;font-size:13px}
  .pfx-apsteps-top b{flex:1;color:var(--pfx-accent-deep);font-weight:600}
  .pfx-apsteps-top span{color:var(--pfx-faint);font-size:12.5px}
  .pfx-apsteps-bar{display:flex;gap:6px;margin-top:10px}
  .pfx-apsteps-bar i{flex:1;height:4px;border-radius:9px;background:var(--pfx-line)}
  .pfx-apsteps-bar i.on{background:#0879A1}
  .pfx-dotsteps,.pfx-stepeyebrow{display:none!important}
  /* The bar stays above the keyboard while typing, as the app's does (owner,
     12 Oct 2026); it used to hide. The focused field is scrolled clear of
     it rather than left underneath. */
  html:has(body.pfx-focus){scroll-padding-bottom:110px}
}

/* ── Loan guides: how to apply, one page per product (11 Oct 2026) ───────── */
.pfx-lg{font-family:Inter,system-ui,sans-serif;color:var(--pfx-ink);background:var(--pfx-surface);line-height:1.6;overflow-x:hidden}
.pfx-lg-wrap{max-width:960px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.pfx-lg-hero{background:var(--pfx-well);border-bottom:1px solid var(--pfx-line);padding:clamp(28px,5vw,56px) 0 clamp(32px,5vw,56px)}
.pfx-lg-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--pfx-muted);margin-bottom:22px}
.pfx-lg-crumbs a{color:var(--pfx-muted)}
.pfx-lg-crumbs a:hover{color:var(--pfx-accent-deep)}
.pfx-lg-eyebrow{display:inline-flex;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
.pfx-lg-h1{font-family:var(--pfx-display);font-weight:800;font-size:clamp(30px,5vw,50px);line-height:1.08;letter-spacing:-.02em;margin:16px 0 14px;max-width:780px}
.pfx-lg-lede{font-size:clamp(16px,2vw,18.5px);color:var(--pfx-muted);margin:0 0 26px;max-width:700px}
.pfx-lg-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pfx-lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pfx-btn-bg);color:var(--pfx-btn-fg);font-weight:700;padding:14px 22px;border-radius:12px;transition:.22s}
.pfx-lg-btn .pfx-ic{width:16px;height:16px}
.pfx-lg-btn2{display:inline-flex;align-items:center;padding:13px 20px;border-radius:12px;border:1px solid var(--pfx-line-2);color:var(--pfx-ink);font-weight:600;background:var(--pfx-surface)}
.pfx-lg-btn2:hover{border-color:var(--pfx-accent-deep);color:var(--pfx-accent-deep)}
.pfx-lg-facts{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:720px}
.pfx-lg-facts li{background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column}
.pfx-lg-facts b{font-family:var(--pfx-display);font-size:17px}
.pfx-lg-facts span{font-size:13px;color:var(--pfx-muted)}
.pfx-lg-body{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(40px,6vw,80px)}
.pfx-lg-sec{margin-bottom:clamp(40px,5vw,60px)}
.pfx-lg-sec h2,.pfx-lg-band h2{font-family:var(--pfx-display);font-weight:800;font-size:clamp(23px,3vw,30px);line-height:1.15;letter-spacing:-.01em;margin:0 0 14px}
.pfx-lg-sec > p{color:var(--pfx-muted);margin:0 0 18px;max-width:700px}
.pfx-lg-checks,.pfx-lg-docs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.pfx-lg-checks li,.pfx-lg-docs li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.pfx-lg-checks .pfx-ic,.pfx-lg-docs .pfx-ic{width:20px;height:20px;flex:none;margin-top:3px;color:var(--pfx-accent-deep)}
.pfx-lg-docs li{background:var(--pfx-well);border:1px solid var(--pfx-line);border-radius:12px;padding:12px 14px;align-items:center}
.pfx-lg-docs .pfx-ic{margin-top:0}
.pfx-lg-tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--pfx-muted);background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:100px;padding:2px 10px;white-space:nowrap}
.pfx-lg-steps{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
.pfx-lg-steps li{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--pfx-line);border-radius:16px;padding:18px}
.pfx-lg-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);font-weight:800;display:flex;align-items:center;justify-content:center}
.pfx-lg-steps h3{font-family:var(--pfx-display);font-size:17.5px;margin:4px 0 4px}
.pfx-lg-steps p{margin:0;color:var(--pfx-muted);font-size:15px}
.pfx-lg-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.pfx-lg-two p{color:var(--pfx-muted)}
.pfx-lg-example{margin:0 0 10px;border:1px solid var(--pfx-line);border-radius:16px;overflow:hidden}
.pfx-lg-example div{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--pfx-line)}
.pfx-lg-example dt{color:var(--pfx-muted)}
.pfx-lg-example dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.pfx-lg-example .pfx-lg-example-total{background:var(--pfx-well);border-bottom:0}
.pfx-lg-example-total dt{color:var(--pfx-ink);font-weight:700}
.pfx-lg-example-total dd{font-family:var(--pfx-display);font-size:19px;font-weight:800;color:var(--pfx-accent-deep)}
.pfx-lg-small{font-size:13.5px}
.pfx-lg-faqs{display:flex;flex-direction:column;gap:12px}
.pfx-lg-faqs details{background:var(--pfx-surface);border:1px solid var(--pfx-line);border-radius:14px;padding:4px 18px}
.pfx-lg-faqs summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:15px 0;font-family:var(--pfx-display);font-weight:700;font-size:17px}
.pfx-lg-faqs .pfx-faqchev{width:20px;height:20px;flex:none;color:var(--pfx-accent-deep);transition:.25s}
.pfx-lg-faqs details p{margin:0 0 16px;color:var(--pfx-muted);font-size:15px}
.pfx-lg-band{background:var(--pfx-well);border:1px solid var(--pfx-line);border-radius:22px;padding:clamp(24px,4vw,40px);text-align:center;margin-bottom:clamp(40px,5vw,60px)}
.pfx-lg-band p{color:var(--pfx-muted);margin:0 auto 20px;max-width:520px}
.pfx-lg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pfx-lg-card{display:flex;flex-direction:column;border:1px solid var(--pfx-line);border-radius:20px;padding:24px;background:var(--pfx-surface);color:var(--pfx-ink);transition:.25s;box-shadow:0 10px 30px -24px rgba(15,22,58,.3)}
.pfx-lg-card:hover{border-color:var(--pfx-accent-deep);transform:translateY(-2px)}
.pfx-lg-cardico{width:48px;height:48px;border-radius:14px;background:var(--pfx-accent-soft);color:var(--pfx-accent-deep);display:flex;align-items:center;justify-content:center}
.pfx-lg-cardico .pfx-ic{width:24px;height:24px}
.pfx-lg-card h3{font-family:var(--pfx-display);font-size:19px;margin:14px 0 6px}
.pfx-lg-card p{color:var(--pfx-muted);font-size:15px;margin:0 0 16px}
.pfx-lg-card .pfx-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--pfx-accent-deep);font-weight:700;font-size:15px}
.pfx-lg-card .pfx-link .pfx-ic{width:16px;height:16px}
@media (max-width:720px){
  .pfx-lg-facts{grid-template-columns:1fr}
  .pfx-lg-two{grid-template-columns:1fr}
  .pfx-lg-ctas > a{flex:1 1 100%}
}

/* ── Hero calculator, wider and calmer (owner, 11 Oct 2026) ─────────────────
   At 430px the presets broke onto two rows, "Civil Servant" wrapped inside its
   button and every row touched the next. Scoped to .pfx-herocalc: the full
   calculator and the wizard share these components and keep their own look. */
.pfx-herocalc .pfx-deckcalc{padding:28px 30px 24px;border-radius:26px;border:1px solid var(--pfx-line)}
.pfx-herocalc .pfx-deckcalc-head{margin-bottom:18px}
.pfx-herocalc .pfx-deckcalc-title{font-size:19px}
.pfx-herocalc .pfx-seg{margin-bottom:22px}
.pfx-herocalc .pfx-seg-btn{padding:11px;font-size:14.5px}
.pfx-herocalc .pfx-deckcalc-lbl{margin-bottom:10px}
/* Every amount on one row, as an even strip of equal buttons. */
.pfx-calc-amounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:6px}
.pfx-herocalc .pfx-calc-amounts .pfx-pill-sm{padding:10px 4px;justify-content:center;text-align:center;
  font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:12px}
/* How you are paid: a three-way switch. The radio circles took a third of
   each button, which is what pushed "Civil Servant" onto two lines. */
.pfx-herocalc .pfx-choiceseg{grid-template-columns:repeat(3,minmax(0,1fr))}
.pfx-herocalc .pfx-choiceseg span{justify-content:center;text-align:center;white-space:nowrap;padding:11px 6px}
.pfx-herocalc .pfx-choiceseg span::before{display:none}
.pfx-herocalc .pfx-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.pfx-herocalc .pfx-calc-row .pfx-field{padding:12px 14px}
.pfx-herocalc .pfx-deckcalc-readout{margin-top:22px;padding:20px 22px;border-radius:18px;align-items:flex-end}
.pfx-herocalc .pfx-deckcalc-amt{font-size:clamp(32px,3vw,40px)}
.pfx-herocalc .pfx-deckcalc-per{font-size:12.5px;line-height:1.5}
.pfx-herocalc .pfx-deckcalc-per b{display:block;color:#fff;font-weight:700}
@media(max-width:480px){
  .pfx-herocalc .pfx-deckcalc{padding:22px 18px 20px}
  .pfx-calc-amounts{grid-template-columns:repeat(3,1fr)}
  .pfx-herocalc .pfx-choiceseg span{font-size:13.5px}
}

/* ── How the business is set up, and a company's papers (26 Oct 2026) ──────
   The two cards are .pfx-tcard, the loan-type cards' shape, two across. The
   papers open beneath as one soft panel: a head saying what to have to hand,
   then a two-column grid that folds to one on a phone. No coloured stripe:
   the panel is set apart by its tint and its corner, like the rest. */
.pfx-tgrid.pfx-tgrid--two{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
@media (max-width:560px){.pfx-tgrid.pfx-tgrid--two{grid-template-columns:1fr}}
.pfx-papers{margin-top:18px;border:1.5px solid var(--pfx-line-2);border-radius:16px;
  background:var(--pfx-accent-soft);padding:18px 18px 6px}
.pfx-papers-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.pfx-papers-ic{flex:none;width:36px;height:36px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--pfx-surface,#fff);
  color:var(--pfx-accent-deep)}
.pfx-papers-title{font-weight:700;font-size:15px;color:var(--pfx-ink)}
.pfx-papers-sub{font-size:13px;color:var(--pfx-muted);margin-top:2px}
.pfx-papers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
@media (max-width:560px){.pfx-papers-grid{grid-template-columns:1fr}}
.pfx-paper{margin-bottom:14px;min-width:0}
.pfx-paper .pfx-field{width:100%;padding:12px 14px;border-radius:12px;font-size:15px;
  background:var(--pfx-surface,#fff)}
.pfx-paper .pfx-help{margin-top:5px;font-size:12.5px}
.pfx-upper{text-transform:uppercase}.pfx-upper::placeholder{text-transform:none}
.pfx-tgrid.pfx-tgrid--three{margin-bottom:0}