/* 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}

/* 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(4,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}

/* 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)}
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}
/* 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. */
.pfx-formfield--wide>div:has(label input[type=checkbox]),
.pfx-formfield--wide>div: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 label{display:flex;align-items:center;gap:9px;font-size:14px;
  color:var(--pfx-ink-2);cursor:pointer}
.pfx-formfield--wide 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)}
@media (max-width:520px){
  .pfx-wiznav{flex-direction:column-reverse;align-items:stretch}
  .pfx-wiznav .pfx-btn,.pfx-wiznav button[type=submit]{width:100%;justify-content:center}
  .pfx-wizback{text-align:center}
}
.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}
/* Checkbox row (terms, remember-me, etc.) */
.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}

/* 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:min(430px,34vw)}
/* 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(58%,700px)}

/* 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:980px){
  /* 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{background:var(--pfx-surface);border-bottom:1px solid var(--pfx-line);box-shadow:0 10px 30px -24px rgba(8,12,34,.18)}
.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: the container height is fixed (inline clamp()),
   but grid rows auto-size to their content and an item's min-height:auto
   refuses to shrink below a photo's intrinsic height — so tall-ratio photos
   grew the row past the container and spilled over the enquiry card below.
   Pin the row to the container and let tiles shrink; their overflow:hidden
   then crops the photos as intended. Desktop only: on mobile the container
   height is auto (see below), and a 100% row against an auto height would
   push the thumbs row outside the box. */
@media(min-width:861px){
  .pfx-pgallery{grid-template-rows:100%}
}
.pfx-pgallery-main,.pfx-pgallery-thumbs,.pfx-pgallery-thumbs>div{min-height:0;min-width:0}

/* 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-pgallery{grid-template-columns:1fr!important;height:auto!important}
  .pfx-pgallery-main{height:min(62vw,320px)}
  .pfx-pgallery-thumbs{grid-template-rows:1fr!important;grid-template-columns:1fr 1fr;height:104px}
  .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)}

/* 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}