/* FinPay Talent about styles for WordPress, scoped like site.css. Version 20261013h */
/* ================= about page: built on the same tokens, type and parts as the other pages ================= */
:is(#fp-nav,#finpay,#fp-foot) .links a[aria-current="page"] { color: var(--text); background: rgba(242, 243, 245, .07); }
:is(#fp-nav,#finpay,#fp-foot) .sheet a[aria-current="page"] { color: var(--accent); }
:is(#fp-nav,#finpay,#fp-foot) .eyebrow { justify-self: start; width: fit-content; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
:is(#fp-nav,#finpay,#fp-foot) .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); }

/* things that rise in once, the first time they are seen */
.js-rise :is(#fp-nav,#finpay,#fp-foot) .c-rise { opacity: 0; transform: translateY(26px); }
.js-rise :is(#fp-nav,#finpay,#fp-foot) .c-rise.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-expo); transition-delay: calc(var(--d, 0) * 90ms); }

/* ---------- hero: same frame as the clients and candidates pages ---------- */
:is(#fp-nav,#finpay,#fp-foot) .c-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: calc(var(--navh) + clamp(56px, 8vw, calc(112 * var(--u)))) clamp(56px, 7vw, calc(96 * var(--u)));
  background: radial-gradient(52% 72% at 80% 46%, #221A42 0%, #120E26 42%, var(--bg) 76%);
}
:is(#fp-nav,#finpay,#fp-foot) .c-hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, calc(96 * var(--u))); align-items: center; }
:is(#fp-nav,#finpay,#fp-foot) .c-hero-copy { display: grid; gap: 26px; justify-items: start; }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .h1 { font-size: clamp(38px, 3.8vw, calc(58 * var(--u))); }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .h1 .ln > span { display: block; text-wrap: balance; transition: transform 1s var(--ease-expo); }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .h1 .ln + .ln > span { transition-delay: .08s; }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .lead { max-width: 33em; }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .eyebrow,
:is(#fp-nav,#finpay,#fp-foot) .c-hero .lead,
:is(#fp-nav,#finpay,#fp-foot) .c-hero .ctas { transition: opacity .8s var(--ease-out) .3s, transform .8s var(--ease-out) .3s, filter .8s var(--ease-out) .3s; }
:is(#fp-nav,#finpay,#fp-foot) .c-hero .ctas { transition-delay: .4s; margin-top: 6px; }
.pre :is(#fp-nav,#finpay,#fp-foot) .c-hero .h1 .ln > span { transform: translateY(105%); }
.pre :is(#fp-nav,#finpay,#fp-foot) .c-hero .eyebrow,
.pre :is(#fp-nav,#finpay,#fp-foot) .c-hero .lead,
.pre :is(#fp-nav,#finpay,#fp-foot) .c-hero .ctas { opacity: 0; transform: translateY(10px); filter: blur(6px); }

:is(#fp-nav,#finpay,#fp-foot) .c-rails { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 68%); mask-image: linear-gradient(90deg, transparent 38%, #000 68%); }
@media (max-width: 900px) { :is(#fp-nav,#finpay,#fp-foot) .c-rails { -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 75%); mask-image: linear-gradient(180deg, transparent 52%, #000 75%); } }
:is(#fp-nav,#finpay,#fp-foot) .c-rails svg { width: 100%; height: 100%; }
:is(#fp-nav,#finpay,#fp-foot) .c-rails path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
:is(#fp-nav,#finpay,#fp-foot) .c-rails .base { stroke: rgba(232, 236, 248, .1); }
:is(#fp-nav,#finpay,#fp-foot) .c-rails .lit { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 91; opacity: .8; animation: railrun 9s linear infinite; filter: drop-shadow(0 0 5px currentColor); }
:is(#fp-nav,#finpay,#fp-foot) .c-rails .lit:nth-of-type(2n) { animation-duration: 11s; animation-delay: -4s; }
@keyframes railrun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- hero: Nathan, and his card. Turn it over for his details ---------- */
:is(#fp-nav,#finpay,#fp-foot) .a-vis { position: relative; width: min(100%, 440px); justify-self: center; padding: 0 0 6% 0; }
:is(#fp-nav,#finpay,#fp-foot) .a-portrait { width: 80%; margin-left: auto; transition: opacity 1s var(--ease-out) .2s, transform 1.2s var(--ease-expo) .2s; }
.pre :is(#fp-nav,#finpay,#fp-foot) .a-portrait { opacity: 0; transform: translateY(24px) scale(.97); }
:is(#fp-nav,#finpay,#fp-foot) .bc { position: absolute; left: 0; bottom: 0; z-index: 2; width: 64%; perspective: 1200px; animation: float 7s ease-in-out infinite; }
:is(#fp-nav,#finpay,#fp-foot) .bc-in { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform 1s var(--ease-expo); }
:is(#fp-nav,#finpay,#fp-foot) .bc.flip .bc-in { transform: rotateY(180deg); }
:is(#fp-nav,#finpay,#fp-foot) .bc-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
:is(#fp-nav,#finpay,#fp-foot) .bc-front.ccard { max-width: none; aspect-ratio: auto; padding: 8% 8.5%; cursor: pointer; }
:is(#fp-nav,#finpay,#fp-foot) .bc .cc-top img { width: 28px; height: 28px; }
:is(#fp-nav,#finpay,#fp-foot) .bc .cc-pill { padding: 5px 11px; font-size: 12.5px; }
:is(#fp-nav,#finpay,#fp-foot) .bc .cc-chip { width: 40px; height: 30px; border-radius: 6px; }
:is(#fp-nav,#finpay,#fp-foot) .bc .cc-mid .icon { font-size: 22px; }
:is(#fp-nav,#finpay,#fp-foot) .bc .cc-bot b { font-size: clamp(20px, 1.8vw, calc(26 * var(--u))); }
:is(#fp-nav,#finpay,#fp-foot) .bc .cc-bot span { margin-top: 3px; font-size: 13.5px; }
:is(#fp-nav,#finpay,#fp-foot) .bc-back {
  display: grid; align-content: center; gap: 9px; padding: 8% 9%; border-radius: 22px; cursor: pointer;
  background: linear-gradient(140deg, #242A3D, #10131A);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 40px 70px -30px rgba(0, 0, 0, .85); transform: rotateY(180deg);
}
:is(#fp-nav,#finpay,#fp-foot) .bc-k { margin-bottom: 2px; color: var(--muted); font-size: 13px; }
:is(#fp-nav,#finpay,#fp-foot) .bc-back a { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: clamp(13px, 1.05vw, 14.5px); text-decoration: none; overflow-wrap: anywhere; }
:is(#fp-nav,#finpay,#fp-foot) .bc-back a .icon { flex: none; font-size: 17px; color: var(--accent); }
@media (hover: hover) and (pointer: fine) { :is(#fp-nav,#finpay,#fp-foot) .bc-back a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; } }
:is(#fp-nav,#finpay,#fp-foot) .bc-flip { position: absolute; right: -12px; top: -12px; z-index: 3; width: 40px; height: 40px; background: var(--bg-2); }
:is(#fp-nav,#finpay,#fp-foot) .bc-flip .icon { font-size: 18px; transition: transform .6s var(--ease-expo); }
:is(#fp-nav,#finpay,#fp-foot) .bc.flip .bc-flip .icon { transform: rotate(180deg); }
.pre :is(#fp-nav,#finpay,#fp-foot) .bc { opacity: 0; }
:is(#fp-nav,#finpay,#fp-foot) .bc { transition: opacity .8s var(--ease-out) .6s; }
@media (max-width: 900px) {
  :is(#fp-nav,#finpay,#fp-foot) .c-hero-in { grid-template-columns: 1fr; }
  /* phones and tablets: keep the photo tall and hang the card below it, so it only overlaps the shoulders, not the face */
  :is(#fp-nav,#finpay,#fp-foot) .a-vis { width: min(100%, 380px); padding-bottom: calc(min(100%, 380px) * .34); }
  :is(#fp-nav,#finpay,#fp-foot) .a-vis .a-portrait { width: 78%; aspect-ratio: 4 / 5; }
  :is(#fp-nav,#finpay,#fp-foot) .bc { width: 66%; }
}

/* ---------- the numbers ---------- */
:is(#fp-nav,#finpay,#fp-foot) .c-proof { padding-block: clamp(8px, 2vw, calc(24 * var(--u))) 0; }
:is(#fp-nav,#finpay,#fp-foot) .c-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
:is(#fp-nav,#finpay,#fp-foot) .c-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(24px, 3vw, calc(40 * var(--u))) clamp(14px, 2vw, calc(28 * var(--u))); }
:is(#fp-nav,#finpay,#fp-foot) .c-stats > div + div { box-shadow: inset 1px 0 0 var(--line); }
:is(#fp-nav,#finpay,#fp-foot) .c-stats dd { font: 600 clamp(40px, 4.4vw, calc(64 * var(--u)))/1 var(--fd); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#fp-nav,#finpay,#fp-foot) .c-stats dt { color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 22ch; }
@media (max-width: 860px) {
  :is(#fp-nav,#finpay,#fp-foot) .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#fp-nav,#finpay,#fp-foot) .c-stats > div:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  :is(#fp-nav,#finpay,#fp-foot) .c-stats > div:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}

/* ---------- the story: the year holds still while the chapters go past ---------- */
:is(#fp-nav,#finpay,#fp-foot) .sy { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, calc(96 * var(--u))); }
:is(#fp-nav,#finpay,#fp-foot) .sy-stick { position: sticky; top: calc(16vh + 24px); display: grid; gap: 22px; }
:is(#fp-nav,#finpay,#fp-foot) .sy-yr { height: 1.08em; overflow: hidden; font: 600 clamp(44px, 5vw, calc(80 * var(--u)))/1.08 var(--fd); letter-spacing: -.045em; }
:is(#fp-nav,#finpay,#fp-foot) .sy-yr span { display: block; transition: transform .55s var(--ease-expo), opacity .3s ease; }
:is(#fp-nav,#finpay,#fp-foot) .sy-yr span.up { transform: translateY(-100%); opacity: 0; }
:is(#fp-nav,#finpay,#fp-foot) .sy-yr span.dn { transform: translateY(100%); opacity: 0; transition: none; }
:is(#fp-nav,#finpay,#fp-foot) .sy-bar { width: 64px; height: 4px; border-radius: 4px; background: var(--c, var(--blue)); transition: background-color .5s ease; }
:is(#fp-nav,#finpay,#fp-foot) .sy-dots { list-style: none; display: flex; gap: 8px; }
:is(#fp-nav,#finpay,#fp-foot) .sy-dots li { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .4s ease, box-shadow .4s ease; }
:is(#fp-nav,#finpay,#fp-foot) .sy-dots li.on { background: var(--text); box-shadow: none; }
:is(#fp-nav,#finpay,#fp-foot) .sy-list { list-style: none; }
:is(#fp-nav,#finpay,#fp-foot) .sy-ch { display: grid; align-content: center; gap: 14px; min-height: 46vh; padding-block: clamp(36px, 6vh, calc(72 * var(--u))); border-top: 1px solid var(--line); transition: opacity .5s ease; }
:is(#fp-nav,#finpay,#fp-foot) .sy-ch:first-child { border-top: 0; padding-top: 0; }
:is(#fp-nav,#finpay,#fp-foot) .sy-when { display: none; color: var(--c); font-size: 14px; font-weight: 600; }
:is(#fp-nav,#finpay,#fp-foot) .sy-ch p:not(.sy-when) { color: var(--text-2); font-size: clamp(18px, 1.4vw, calc(21 * var(--u))); line-height: 1.55; max-width: 46ch; }
:is(#fp-nav,#finpay,#fp-foot) .js-story .sy-ch:not(.on) { opacity: .32; }
:is(#fp-nav,#finpay,#fp-foot) .sy-quote { display: grid; gap: 22px; justify-items: center; margin-top: clamp(56px, 8vw, calc(120 * var(--u))); text-align: center; }
:is(#fp-nav,#finpay,#fp-foot) .sy-quote p { max-width: 24ch; font: 500 clamp(28px, 3.2vw, calc(46 * var(--u)))/1.22 var(--fd); letter-spacing: -.025em; text-wrap: balance; }
:is(#fp-nav,#finpay,#fp-foot) .sy-quote figcaption { display: grid; gap: 2px; color: var(--muted); font-size: 15px; }
:is(#fp-nav,#finpay,#fp-foot) .sy-quote figcaption b { color: var(--text); font-weight: 500; font-size: 16px; }
@media (max-width: 860px) {
  :is(#fp-nav,#finpay,#fp-foot) .sy { grid-template-columns: 1fr; }
  :is(#fp-nav,#finpay,#fp-foot) .sy-side { display: none; }
  :is(#fp-nav,#finpay,#fp-foot) .sy-when { display: block; }
  :is(#fp-nav,#finpay,#fp-foot) .sy-ch { min-height: 0; }
  :is(#fp-nav,#finpay,#fp-foot) .js-story .sy-ch:not(.on) { opacity: 1; }
}

/* ---------- six things we fixed: you read the old way first, then as you scroll on it gets struck out and the fix lands ---------- */
:is(#fp-nav,#finpay,#fp-foot) .fx { list-style: none; border-top: 1px solid var(--line); }
:is(#fp-nav,#finpay,#fp-foot) .fx-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px minmax(0, 1.1fr); align-items: center; gap: 14px clamp(16px, 2vw, calc(28 * var(--u))); padding-block: clamp(24px, 2.8vw, calc(34 * var(--u))); border-bottom: 1px solid var(--line); }
:is(#fp-nav,#finpay,#fp-foot) .fx-n { color: var(--faint); font: 600 15px/1 var(--fd); font-variant-numeric: tabular-nums; }
/* --s runs 0 to 1 as the line strikes through, --n as the fix lands; both sit at 1 if the script never runs */
:is(#fp-nav,#finpay,#fp-foot) .fx-old { min-width: 0; font-size: clamp(15px, 1.45vw, calc(21 * var(--u))); line-height: 1.4; color: color-mix(in srgb, var(--muted) calc(var(--s, 1) * 100%), var(--text)); }
:is(#fp-nav,#finpay,#fp-foot) .fx-w { position: relative; display: inline-block; max-width: 100%; white-space: nowrap; }
:is(#fp-nav,#finpay,#fp-foot) .fx-line { position: absolute; left: -3px; right: -3px; top: 55%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--pink); transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
:is(#fp-nav,#finpay,#fp-foot) .fx-arrow { display: grid; place-items: center; color: var(--faint); opacity: calc(.25 + var(--n, 1) * .75); }
:is(#fp-nav,#finpay,#fp-foot) .fx-arrow .icon { font-size: 20px; }
:is(#fp-nav,#finpay,#fp-foot) .fx-new { display: flex; align-items: center; gap: 12px; color: var(--text); font: 600 clamp(19px, 1.7vw, calc(24 * var(--u)))/1.25 var(--fd); letter-spacing: -.01em; opacity: var(--n, 1); transform: translateX(calc((1 - var(--n, 1)) * -16px)); }
:is(#fp-nav,#finpay,#fp-foot) .fx-new .icon { flex: none; font-size: 22px; color: var(--green); transform: scale(calc(.5 + var(--n, 1) * .5)); }
@media (max-width: 760px) {
  :is(#fp-nav,#finpay,#fp-foot) .fx-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; }
  :is(#fp-nav,#finpay,#fp-foot) .fx-arrow { display: none; }
  :is(#fp-nav,#finpay,#fp-foot) .fx-old,
:is(#fp-nav,#finpay,#fp-foot) .fx-new { grid-column: 2; }
  :is(#fp-nav,#finpay,#fp-foot) .fx-n { grid-row: 1; align-self: center; }
  :is(#fp-nav,#finpay,#fp-foot) .fx-old { font-size: clamp(14px, 3.9vw, 17px); }
}
@media (max-width: 370px) { :is(#fp-nav,#finpay,#fp-foot) .fx-w { white-space: normal; } }

/* ---------- both sides of the table: a door to each page ---------- */
:is(#fp-nav,#finpay,#fp-foot) .doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, calc(22 * var(--u))); }
:is(#fp-nav,#finpay,#fp-foot) .door {
  position: relative; display: grid; align-content: start; gap: 14px; min-height: clamp(260px, 25vw, calc(330 * var(--u))); padding: clamp(26px, 3vw, calc(44 * var(--u))); border-radius: 28px;
  color: var(--text); text-decoration: none;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%), var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease, transform .4s var(--ease-out);
}
:is(#fp-nav,#finpay,#fp-foot) .door-k { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; font-weight: 500; }
:is(#fp-nav,#finpay,#fp-foot) .door-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
:is(#fp-nav,#finpay,#fp-foot) .door-t { font: 600 clamp(28px, 3vw, calc(44 * var(--u)))/1.05 var(--fd); letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
:is(#fp-nav,#finpay,#fp-foot) .door-p { color: var(--muted); max-width: 42ch; }
:is(#fp-nav,#finpay,#fp-foot) .door-go { align-self: end; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 500; }
:is(#fp-nav,#finpay,#fp-foot) .door-go .icon { color: var(--c); transition: transform .3s var(--ease-out); }
:is(#fp-nav,#finpay,#fp-foot) .door:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  :is(#fp-nav,#finpay,#fp-foot) .door:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-4px); }
  :is(#fp-nav,#finpay,#fp-foot) .door:hover .door-go .icon { transform: translateX(6px); }
}
@media (max-width: 760px) { :is(#fp-nav,#finpay,#fp-foot) .doors { grid-template-columns: 1fr; } :is(#fp-nav,#finpay,#fp-foot) .door { min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  :is(#fp-nav,#finpay,#fp-foot) .c-rails .lit,
:is(#fp-nav,#finpay,#fp-foot) .bc { animation: none !important; }
}