/* ── p-providers.css — providers.html (the platform for service providers) ────
   On top of inner-pages.css. Scoped under main.pv. Everything here renders its
   FINISHED state by default; html.fx-motion (set by fx.js) adds the hidden
   start states that app/p-providers.js then plays (stage ticks, the ranking,
   line draw-ins). Tokens only (theme.css).                                   */

/* .p6-hero carries its own 128 px top padding; drop theme.css's generic 96 px on main (as the sibling pages do) */
body.s6-body:not(.has-hero) .s6-page > main.pv { padding-top: 0; }

/* buttons with an arrow chip, as on the landing's feature bands */
/* in-page jumps ("How it works" → #how) land with air under the floating nav, not jammed against it */
.pv section[id] { scroll-margin-top: 28px; }

.pv .btn:has(.ic) { padding: 0 10px 0 20px; gap: 14px; }
.pv .btn .ic { margin-right: 0; transition: transform .2s var(--ease); }
.pv .btn .ic svg { width: 15px; height: 15px; }
@media (hover: hover) { .pv .btn:hover .ic { transform: translateX(3px); } }

/* the socket a digital line plugs into (hero photo edge, step and rung tops) */
.pv-port {
  position: absolute; z-index: 3; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 57, 108, .18), 0 3px 8px -2px rgba(0, 57, 108, .3); pointer-events: none;
}
.pv-port::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--gold); transition: background .4s ease var(--pd, 0ms); }
html.fx-motion .pv-track .pv-port:not(.is-on)::after { background: rgba(0, 57, 108, .28); }

/* ── hero ── */
.pv-hero .pv-hline { left: 0; top: 0; }
.pv-hero .pv-hport { display: none; }
.pv-hero .pv-hport.is-set { display: block; }
.pv-htext { position: relative; z-index: 1; min-width: 0; }
.pv .ln { display: block; }
.pv-who { margin: 16px 0 0; font: 500 14px/1.45 var(--font); color: var(--muted); }
.pv-mwrap { position: relative; z-index: 1; min-width: 0; }
.pv-hero .p6-media { margin: 0; }
.pv-hero .p6-media img { object-position: 50% 50%; }

/* the "new job" card that floats on the photo's corner (a sample, not live data) */
.pv-jobcard {
  position: absolute; z-index: 2; left: clamp(-36px, -2.4vw, -16px); bottom: clamp(20px, 3vw, 36px); width: 276px;
  background: var(--card); border-radius: 18px; padding: 14px; border: 1px solid rgba(0, 57, 108, .06); box-shadow: var(--shadow-lift);
}
.pv-jc-top { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-jc-top em, .pv-sbar em { margin-left: auto; font: 600 9.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: #1D4F80; background: #DDE9F6; padding: 5px 7px 4px; border-radius: 6px; }
.pv-live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(247, 183, 68, .2); flex: none; }
html.fx-motion .pv-live { animation: pvLive 2.2s ease-in-out infinite; }
@keyframes pvLive { 50% { box-shadow: 0 0 0 7px rgba(247, 183, 68, .06); } }
.pv-jc-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center; }
.pv-jc-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--navy); display: grid; place-items: center; flex: none; }
.pv-jc-ic .i2 { width: 20px; height: 20px; color: #fff; --acc: var(--gold); }
.pv-jc-row b { display: block; font: 700 14.5px/1.25 var(--font); color: var(--ink); }
.pv-jc-row small { display: block; margin-top: 3px; font: 500 12px/1.35 var(--font); color: var(--muted); }
/* a status, not an action: a gold "Accept job" here read as a second, dead CTA beside the real one */
.pv-jc-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; margin-top: 12px; border-radius: 10px; background: #DDF3E6; color: #17663A; font: 700 13px/1 var(--font); }
.pv-jc-btn .i2 { width: 16px; height: 16px; color: #17803F; flex: none; }

/* the three allowed numbers, under the hero */
.pv-statsw { position: relative; z-index: 1; width: min(var(--s6-max), 100% - 2 * var(--s6-gutter)); margin: clamp(44px, 6.5vh, 76px) auto 0; }
.pv-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-navy); border-bottom: 1px solid var(--line-navy); }
.pv-stats li { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px; min-width: 0; }
.pv-stats li + li { border-left: 1px solid var(--line-navy); }
.pv-stats strong { font: 700 clamp(22px, 2vw, 30px)/1.1 var(--font); letter-spacing: -.02em; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-stats span { font: 500 14px/1.4 var(--font); color: var(--muted); text-wrap: pretty; }

/* ── what you get ── */
.pv-get { padding-top: clamp(40px, 6vh, 80px); }
.pv .pv-points { list-style: none; margin: 0; padding: 0; }   /* inner-pages.css's .p6-points does not reset a ul */
.pv-points .p6-point { min-width: 0; }
.pv .nw { white-space: nowrap; }
.pv .p6-head .s6-lede { max-width: 46ch; }

/* ── the partner app: a sample phone on a light studio plate ── */
.pv-appsec .p6-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pv-plate {
  position: relative; margin: 0; isolation: isolate; overflow: hidden; min-width: 0;
  min-height: clamp(540px, 46vw, 660px); padding: 36px clamp(18px, 2.4vw, 36px); display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.2vw, 32px);
  border-radius: 26px; border: 1px solid rgba(0, 57, 108, .07); background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
}
.pv-plate::before {   /* instrument dot-grid, fading out from the phone */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(0, 57, 108, .16) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(55% 60% at 50% 50%, #000 0%, transparent 78%); mask-image: radial-gradient(55% 60% at 50% 50%, #000 0%, transparent 78%);
}
.pv-plate::after { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(247, 183, 68, .16), rgba(247, 183, 68, 0)); }

.pv-phone { flex: none; container-type: inline-size; width: clamp(236px, 19.5vw, 282px); aspect-ratio: 282 / 580; padding: 9px; border-radius: 40px; background: var(--ink); box-shadow: var(--shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.pv-scr { position: relative; height: 100%; overflow: hidden; border-radius: 32px; background: var(--page); font-size: 4.45cqw; padding: 2.9em 1.1em 1.1em; display: flex; flex-direction: column; gap: .8em; }
.pv-scr::before { content: ""; position: absolute; top: .75em; left: 50%; width: 6em; height: 1.6em; margin-left: -3em; border-radius: 1em; background: var(--ink); }
.pv-sbar { display: flex; align-items: center; }
.pv-sbar b { font: 800 1.35em/1 var(--font); letter-spacing: -.01em; color: var(--ink); }
.pv-sbar em { font-size: .74em; }
.pv-job { background: var(--card); border-radius: 1.3em; padding: 1em; box-shadow: 0 1px 2px rgba(0, 57, 108, .06), 0 10px 24px -16px rgba(0, 57, 108, .3); }
.pv-job-h { display: grid; grid-template-columns: 2.7em minmax(0, 1fr); gap: .8em; align-items: center; }
.pv-job-h .pv-jc-ic { width: 2.7em; height: 2.7em; border-radius: .8em; }
.pv-job-h .pv-jc-ic .i2 { width: 1.45em; height: 1.45em; }
.pv-job-h b { display: block; font: 700 1.04em/1.25 var(--font); color: var(--ink); }
.pv-job-h small { display: block; margin-top: .2em; font: 500 .86em/1.3 var(--font); color: var(--muted); }
.pv-stages { list-style: none; margin: 1.1em 0 0; padding: 1em 0 0; border-top: 1px solid var(--line); display: grid; gap: .95em; }
.pv-stages li { position: relative; display: grid; grid-template-columns: 1.35em minmax(0, 1fr); column-gap: .8em; }
.pv-stages li i { grid-row: 1 / 3; position: relative; z-index: 1; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--gold); display: grid; place-items: center; box-shadow: 0 0 0 .25em rgba(247, 183, 68, .16); }
.pv-stages li i::after { content: ""; width: .5em; height: .27em; border-left: .14em solid var(--navy); border-bottom: .14em solid var(--navy); transform: translateY(-.06em) rotate(-45deg); }
.pv-stages li:not(:last-child)::before { content: ""; position: absolute; left: .625em; top: 1.35em; bottom: -.95em; width: .1em; background: var(--gold); }
.pv-stages b { font: 700 .98em/1.3 var(--font); color: var(--ink); }
.pv-stages small { font: 500 .82em/1.3 var(--font); color: var(--muted); }
.pv-next { display: grid; gap: .45em; }
.pv-next p { margin: 0 0 .1em; font: 600 .74em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-next div { display: flex; align-items: center; gap: .65em; padding: .75em .85em; border-radius: .9em; background: var(--card); border: 1px solid var(--line); font: 600 .9em/1.2 var(--font); color: var(--text); }
.pv-dot { width: .5em; height: .5em; border-radius: 50%; background: var(--mist); flex: none; }
.pv-wal { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .85em 1em; border-radius: 1em; background: var(--navy); color: #fff; }
.pv-wal .i2 { width: 1.4em; height: 1.4em; color: #fff; --acc: var(--gold); flex: none; }
.pv-wal b { font: 700 .98em/1 var(--font); }
.pv-wal span { margin-left: auto; font: 600 .78em/1 var(--font); color: var(--gold-60); }

/* motion: the job walks through its stages (p-providers.js adds .on / .cur) */
html.fx-motion .pv-stages li i { transition: background .45s ease, box-shadow .45s ease; }
html.fx-motion .pv-stages li i::after { transition: opacity .3s ease .15s; }
html.fx-motion .pv-stages li::before { transition: background .45s ease; }
html.fx-motion .pv-stages li:not(.on) i { background: #fff; box-shadow: inset 0 0 0 .12em var(--mist); }
html.fx-motion .pv-stages li:not(.on) i::after { opacity: 0; }
html.fx-motion .pv-stages li:not(:has(+ li.on))::before { background: var(--line); }
html.fx-motion .pv-stages li:not(.on) b { color: var(--muted); }
html.fx-motion .pv-stages li.cur i { animation: pvRing 1.3s var(--ease) both; }
@keyframes pvRing { 0% { box-shadow: 0 0 0 0 rgba(247, 183, 68, .55); } 100% { box-shadow: 0 0 0 .7em rgba(247, 183, 68, 0); } }

/* the two notes beside the phone (the first tucks over its bezel, for depth) */
.pv-fcs { position: relative; z-index: 2; flex: none; width: clamp(180px, 15vw, 216px); display: flex; flex-direction: column; gap: 14px; }
.pv-fc { position: relative; background: var(--card); border-radius: 18px; padding: 16px 18px; border: 1px solid rgba(0, 57, 108, .07); box-shadow: var(--shadow-card); }
.pv-fc.f1 { margin-left: calc(-1 * clamp(16px, 2.2vw, 32px) - 12px); margin-right: 12px; }
.pv-fc .lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-fc .lbl::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--gold); flex: none; }
.pv-fc .t { margin: 0; font: 700 16px/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
html.fx-motion .pv-fc { animation: pvBob 6s ease-in-out infinite; }
html.fx-motion .pv-fc.f2 { animation-delay: -3s; }
@keyframes pvBob { 50% { transform: translateY(-6px); } }
.pv-apptext { min-width: 0; }
.pv-apptext .s6-lede { margin-top: 16px; }
.pv-apptext .p6-list { margin-top: 24px; }

/* ── ranked by results: the navy panel ── */
.pv-panel {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-panel);
  padding: clamp(36px, 5.2vw, 76px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 4.4vw, 68px); align-items: center;
  background:
    radial-gradient(55% 60% at 96% 30%, rgba(10, 74, 133, .95) 0%, rgba(10, 74, 133, 0) 72%),
    radial-gradient(50% 45% at 4% 100%, rgba(0, 57, 108, .95) 0%, rgba(0, 57, 108, 0) 70%),
    radial-gradient(38% 30% at 70% 100%, rgba(247, 183, 68, .10) 0%, rgba(247, 183, 68, 0) 70%),
    var(--navy-deep);
}
.pv-panel::before {   /* blueprint grid, as on the landing's navy panels */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 206, 223, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 206, 223, .055) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 70% at 60% 40%, #000 0%, transparent 80%);
}
.pv-panel .mut { color: var(--mist); }
.pv-rtext { min-width: 0; }
.pv-rtext .s6-lede { margin-top: 16px; max-width: 44ch; }
.pv-measures { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv-measures li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 14px 11px 11px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font: 600 14.5px/1.3 var(--font); color: #fff; }
.pv-measures .ib { width: 34px; height: 34px; border-radius: 10px; background: rgba(247, 183, 68, .14); display: grid; place-items: center; flex: none; }
.pv-measures .i2 { width: 19px; height: 19px; color: #fff; --acc: var(--gold); }

.pv-rank { margin: 0; min-width: 0; border-radius: 22px; padding: clamp(18px, 2vw, 26px); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .13); }
.pv-rank-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.pv-rank-top em { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--navy); background: var(--gold); padding: 6px 9px 5px; border-radius: 999px; }
.pv-board { --rh: 68px; --rg: 10px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.pv-pos { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: var(--rh); row-gap: var(--rg); }
.pv-pos li { display: grid; place-items: center; font: 600 13px/1 var(--mono); color: var(--mist); }
.pv-pos li:first-child { color: var(--gold); }
.pv-rows { position: relative; height: calc(3 * var(--rh) + 2 * var(--rg)); }
.pv-row {
  position: absolute; left: 0; right: 0; top: 0; height: var(--rh); padding: 0 16px 0 14px;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(calc(var(--to) * (var(--rh) + var(--rg))));
}
.pv-row .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; font: 700 14px/1 var(--font); }
.pv-row .av .i2 { width: 20px; height: 20px; color: var(--navy); --acc: var(--navy); }
.pv-row .nm { min-width: 0; }
.pv-row .nm b { display: block; font: 700 15px/1.2 var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row .nm small { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--font); color: #A9BDD1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row .bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pv-row .bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: rgba(186, 206, 223, .55); }
/* opaque (the same tint over the panel's own blues), so when it slides up past B and C their text does not show through it */
.pv-row.me { z-index: 1; background: linear-gradient(rgba(247, 183, 68, .1), rgba(247, 183, 68, .1)), linear-gradient(90deg, #143B5E, #134369); border-color: rgba(247, 183, 68, .5); box-shadow: 0 18px 40px -26px rgba(247, 183, 68, .6); }
.pv-row.me .av { background: var(--gold); }
.pv-row.me .bar i { background: linear-gradient(90deg, var(--gold), var(--gold-60)); }
.pv-row .more { position: absolute; top: -9px; right: 14px; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 5px 8px 4px; border-radius: 999px; }
/* motion: your firm's bar fills, then it rises to the top and wins "More jobs" */
html.fx-motion .pv-row { transition: transform .9s var(--ease) 1.15s; }
html.fx-motion .pv-row .bar i { transition: width 1.1s var(--ease) .3s; }
html.fx-motion .pv-row .more { transition: opacity .5s ease 2s, transform .6s var(--ease) 2s; }
html.fx-motion .pv-rank:not(.is-in) .pv-row { transform: translateY(calc(var(--from) * (var(--rh) + var(--rg)))); }
html.fx-motion .pv-rank:not(.is-in) .pv-row .bar i { width: calc(var(--w0) * 100%); }
html.fx-motion .pv-rank:not(.is-in) .pv-row .more { opacity: 0; transform: translateY(5px); }

/* ── the two lined tracks: joining steps and the growth ladder ── */
.pv-track { position: relative; }
.pv-track > ol { position: relative; z-index: 1; }
.pv-tline { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.pv-tline path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pv-tline .b { stroke: var(--line-navy); stroke-width: 1; }
.pv-tline .pk { stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 54 99999; stroke-dashoffset: 54; }

/* steps */
.pv-join .pv-track { padding-top: 30px; }
.pv .pv-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-steps .p6-step { min-width: 0; padding: 24px 22px 26px; }
.pv-steps .pv-port { left: 28px; top: 0; }
.pv-steps .pv-sic { position: absolute; top: 20px; right: 20px; width: 22px; height: 22px; color: var(--navy); --acc: var(--gold); }
.pv-steps .p6-step b { padding-right: 20px; }

/* ladder: four cards that rise to the right, a line running along their tops */
.pv-grow .pv-track { padding-top: 34px; }
.pv-rungs { --rise: clamp(28px, 3.4vw, 52px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: end; }
.pv-rung {
  position: relative; min-width: 0; min-height: calc(236px + var(--k) * var(--rise)); padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--card) 60%, #F7F9FC); border: 1px solid var(--line);
}
.pv-rung .pv-port { left: 47px; top: 0; }
.pv-rung .ib { width: 46px; height: 46px; border-radius: 13px; background: #EAF1F8; display: grid; place-items: center; margin-bottom: 8px; }
.pv-rung .ib .i2 { width: 24px; height: 24px; color: var(--navy); --acc: var(--gold); }
.pv-rung .lv { margin: 0; font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.pv-rung h3 { margin: 0; font: 700 clamp(19px, 1.5vw, 22px)/1.2 var(--font); letter-spacing: -.012em; color: var(--ink); }
.pv-rung p:not(.lv) { margin: 0; font: 500 14.5px/1.5 var(--font); color: var(--muted); }
.pv-rung.top { background: radial-gradient(90% 80% at 90% 10%, rgba(26, 90, 150, .6), transparent 70%), var(--navy); border-color: transparent; box-shadow: var(--shadow-lift); }
.pv-rung.top .ib { background: rgba(255, 255, 255, .1); }
.pv-rung.top .ib .i2 { color: #fff; }
.pv-rung.top .lv { color: var(--gold); }
.pv-rung.top h3 { color: #fff; }
.pv-rung.top p:not(.lv) { color: #A9BDD1; }
.pv-academy { margin: 28px 0 0; font: 500 15px/1.5 var(--font); color: var(--muted); }
.pv-academy a { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-weight: 700; color: var(--navy); text-decoration: none; }
.pv-academy a svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.pv-academy a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pv-academy a:hover svg { transform: translateX(3px); }

/* ── the end: the application (application/views/forms/provider.php, styled by assets/css/forms.css) ── */
.pv-end { padding-top: clamp(24px, 4vh, 56px); scroll-margin-top: 90px; }
.pv-call { margin: 18px 0 0; font: 500 15px/1.5 var(--font); color: var(--muted); }
.pv-call a { font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--navy) 30%, transparent); text-underline-offset: 3px; white-space: nowrap; }
.pv-call a:hover { text-decoration-color: currentColor; }
.pv-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.pv-also a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 52px 18px 22px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.pv-also span { font: 500 13.5px/1.3 var(--font); color: var(--muted); }
.pv-also b { font: 700 16px/1.3 var(--font); color: var(--navy); }
.pv-also svg { position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--navy); transition: transform .2s var(--ease); }
@media (hover: hover) { .pv-also a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: transparent; } .pv-also a:hover svg { transform: translateX(3px); } }

/* ── widths ── */
@media (max-width: 1100px) {
  .pv-stats li { flex-direction: column; gap: 4px; }
  .pv-measures { grid-template-columns: minmax(0, 1fr); }
  .pv-row { grid-template-columns: 38px minmax(0, 1fr) minmax(0, .8fr); }
}
@media (max-width: 1023px) {
  .pv-panel { grid-template-columns: minmax(0, 1fr); }
  .pv-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pv-jobcard { left: 14px; bottom: 14px; }
  .pv-appsec .p6-split { grid-template-columns: minmax(0, 1fr); }
  /* ladder: one column, the line runs down a rail on the left */
  .pv-grow .pv-track { padding-top: 0; }
  .pv-rungs { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 30px; }
  .pv-rung { min-height: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; }
  .pv-rung .ib { grid-row: 1 / 4; margin: 0; }
  .pv-rung .pv-port { left: 0; top: 34px; }
  .pv-also { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 819px) {
  /* steps: one column on the same kind of rail */
  .pv-join .pv-track { padding-top: 0; }
  .pv .pv-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 30px; }
  .pv-steps .pv-port { left: 0; top: 30px; }
}
@media (max-width: 600px) {
  .pv-jobcard { left: 12px; bottom: -30px; width: min(252px, calc(100% - 24px)); padding: 12px; }
  .pv-jc-btn { display: none; }
  .pv-statsw { margin-top: 56px; }
  .pv-stats { grid-template-columns: minmax(0, 1fr); }
  .pv-stats li { flex-direction: row; align-items: center; gap: 14px; padding: 13px 4px; }
  .pv-stats li + li { border-left: 0; border-top: 1px solid var(--line-navy); }
  .pv-stats strong { flex: none; width: 86px; font-size: 24px; }
  .pv-plate { min-height: 0; padding: 26px 14px 14px; flex-direction: column; gap: 18px; }
  .pv-fcs { width: 100%; flex-direction: row; gap: 10px; }
  .pv-fc { flex: 1; min-width: 0; padding: 14px; border-radius: 16px; }
  .pv-fc.f1 { margin: 0; }
  .pv-fc .t { font-size: 14.5px; }
  html.fx-motion .pv-fc { animation: none; }
  .pv-measures { grid-template-columns: minmax(0, 1fr); }
  .pv-panel { padding: 30px 20px 22px; border-radius: 28px; }
  .pv-rank { padding: 16px 12px; }
  .pv-board { --rh: 72px; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
  .pv-row { grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 8px; column-gap: 10px; padding: 0 12px; align-content: center; }
  .pv-row .av { grid-row: 1 / 3; width: 34px; height: 34px; }
  .pv-row .nm small { display: none; }
  .pv-row .bar { grid-column: 2; }
  .pv-rung { padding: 20px 18px; }
}

/* calm (app/fx.js): the floating cards hold still; the ranking's rows stand in their final places from the start (no
   sliding past each other) while their bars still grow and the badge fades in; the live dot and the stage rings keep
   pulsing */
html.fx-calm .pv-fc { animation: none; }
html.fx-calm .pv-rank:not(.is-in) .pv-row { transform: translateY(calc(var(--to) * (var(--rh) + var(--rg)))); }
html.fx-calm .pv-rank:not(.is-in) .pv-row .more { transform: none; }