/* Product pages (01 Market, 02 Onboard, 03 Manage, 04 Settle): one template, always dark.
   Built on /products/marketing; linked by <!--@group:product--> on every product page.

   Page order: hero with the app mockup, The difference (.vs), How it works (.flow, five steps),
   What's included (.inc), Where it sits (.st, the four-stage navigator), then the shared contact
   (#talk) and footer.

   Reveal: sections use the site's .rv / .is-in (the page's inline script). Without JS, or with
   reduced motion, everything is drawn complete and still. Hidden starting states only apply under
   html.js and prefers-reduced-motion: no-preference.

   The mockup (.win) is HTML sized in design pixels: --u is one design pixel, worked out from the
   window's own width with container units, so it scales crisply at any size with no script.
   Three states keep every label at 9px or more: 1200px and wider, the full app (1200 design px,
   with sidebar); 900-1199px, the main panel only (1000 design px); below 900px, the compact
   window (360 design px). Its figures are illustrative, carry no prices, and the caption says so. */

:root:has(body.pdp) { background: var(--void); }
.pdp {
  --pp-acc: #8fb4ff;
  --pp-text: rgb(255 255 255 / .72);
  --pp-soft: rgb(255 255 255 / .6);
  --pp-line: rgb(255 255 255 / .08);
  --pp-line-2: rgb(255 255 255 / .14);
  --pp-ease: cubic-bezier(.22, .61, .36, 1);
  background: var(--void);
  color: var(--paper);
}
.pdp ::selection { background: rgb(0 98 254 / .55); color: #fff; }
.pp-main { color-scheme: dark; }
.pp-main :focus-visible { outline-color: var(--pp-acc); }

/* ---------- sections and their heads ---------- */
.pp {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  scroll-margin-top: calc(var(--nav-h) - 1px);
}
/* Section labels match the shared contact eyebrow (.contact__eyebrow) and the home section heads: a plain
   7px dot, then the title, so each product page reads as one system down to the contact form. */
.pp-k {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: rgb(255 255 255 / .66);
}
.pp-k__dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pp-acc); box-shadow: none;
}
.pp-head { margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.pp-head__grid { display: grid; gap: 1.25rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* James (15 Oct 2026): the description always sits under the headline, never beside it. */
.pp-h {
  max-width: 18ch;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.04;
  color: var(--paper); text-wrap: balance;
}
.pp-sub {
  max-width: 44ch;
  font-size: var(--step-1); font-weight: 300; line-height: 1.55; color: var(--pp-text); text-wrap: pretty;
}

/* ---------- 1. hero ---------- */
.pp--hero { padding-block: clamp(3.25rem, 6.5vw, 6rem) clamp(.5rem, 2vw, 1.5rem); overflow-x: clip; }
.pp-hero { display: grid; gap: 1.5rem; }
/* The intro and the CTAs sit under the title (James, 15 Oct 2026: never beside it). */
.pp-hero__h { max-width: 14ch; }
.pp-hero__h {
  margin-top: 1.5rem;
  font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); font-weight: 300; letter-spacing: -.045em; line-height: .98;
  color: #fff; text-wrap: balance;
}
.pp-hero__sub { max-width: 42ch; font-size: var(--step-1); font-weight: 300; line-height: 1.55; color: var(--pp-text); }
.pp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.pp-cta .alink { position: relative; }
.pp-cta .alink::after { content: ""; position: absolute; inset: -10px -8px; } /* 44px tap target */

.pp-shot { position: relative; margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.pp-shot__stage { position: relative; }
.pp-shot__stage::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -8%; height: 70%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgb(0 98 254 / .3), transparent 75%);
  filter: blur(30px);
}
.pp-shot__cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .375rem 1.5rem;
  margin-top: 1.125rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .04em; color: var(--pp-soft);
}
.pp-shot__cap span + span { color: var(--mute-dark); }

/* the app window */
.win {
  position: relative; z-index: 1; overflow: hidden;
  container-type: inline-size;
  border: 1px solid rgb(255 255 255 / .11); border-radius: 14px;
  background: #0e1013;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .55),
    0 50px 100px -30px rgb(0 0 0 / .9),
    0 30px 80px -40px rgb(0 98 254 / .45);
}
.win::after { /* lit top edge */
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(143 180 255 / .6), transparent);
}
.win--tall { display: none; max-width: 440px; margin-inline: auto; border-radius: 18px; }
@media (width <= 899px) {
  .win--wide { display: none; }
  .win--tall { display: block; }
}
@media (width >= 720px) and (width <= 899px) { .win--tall { max-width: 540px; } }
.win--wide .win__in { --u: calc(100cqw / 1200); }
.win--tall .win__in { --u: calc(100cqw / 360); }
@media (width >= 720px) and (width <= 899px) { .win--tall .win__in { --u: calc(100cqw / 400); } }
/* 900-1199px: the main panel alone, drawn larger */
@media (width >= 900px) and (width <= 1199px) {
  .win--wide .win__in { --u: calc(100cqw / 1000); }
  .win--wide .mk { grid-template-columns: minmax(0, 1fr); }
  .win--wide .mk__side { display: none; }
}
.win__in {
  font-family: var(--sans); color: #e9eaec; letter-spacing: -.005em; line-height: 1.3;
  -webkit-font-smoothing: antialiased; user-select: none;
}
.win__in p { margin: 0; }
.win__bar {
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * 7);
  height: calc(var(--u) * 38); padding-inline: calc(var(--u) * 16);
  border-bottom: 1px solid rgb(255 255 255 / .06); background: #121418;
}
.win__bar > i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #2a2e35; }
.win__url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  height: calc(var(--u) * 22); padding-inline: calc(var(--u) * 12); border-radius: calc(var(--u) * 6);
  background: rgb(255 255 255 / .045);
  font-family: var(--mono); font-size: calc(var(--u) * 11); color: #8a9098; white-space: nowrap;
}
.win__lock { width: calc(var(--u) * 9); height: calc(var(--u) * 11); fill: none; stroke: #8a9098; stroke-width: 1.3; }

/* desktop app */
.mk { display: grid; grid-template-columns: calc(var(--u) * 200) minmax(0, 1fr); }
.mk__side {
  display: flex; flex-direction: column; gap: calc(var(--u) * 18);
  padding: calc(var(--u) * 18) calc(var(--u) * 14);
  border-right: 1px solid rgb(255 255 255 / .06); background: #0b0d10;
}
.mk__brand { display: flex; align-items: center; gap: calc(var(--u) * 9); padding-inline: calc(var(--u) * 4); font-size: calc(var(--u) * 14); }
.mk__brand b { font-weight: 400; letter-spacing: -.03em; color: #fff; }
.mk__mark { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; }
.mk__mark .l { fill: #fff; }
.mk__mark .b { fill: var(--blue); }
.mk__ws {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 8);
  border: 1px solid rgb(255 255 255 / .06); background: rgb(255 255 255 / .035);
  font-size: calc(var(--u) * 12);
}
.mk__ws span { color: #7d838c; }
.mk__ws b { font-weight: 500; color: #fff; }
.mk__nav { display: grid; gap: calc(var(--u) * 2); }
.mk__nav li {
  display: flex; align-items: center; gap: calc(var(--u) * 10);
  height: calc(var(--u) * 32); padding-inline: calc(var(--u) * 10); border-radius: calc(var(--u) * 7);
  font-size: calc(var(--u) * 13); color: #9a9fa7;
}
.mk__nav li > i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #3a3f47; }
.mk__nav li.is-on { background: rgb(255 255 255 / .06); color: #fff; }
.mk__nav li.is-on > i { background: var(--pp-acc); }
.mk__nav em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 11); color: #8a9098; }
.mk__goal {
  padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 10);
  border: 1px solid rgb(255 255 255 / .06); background: rgb(255 255 255 / .03);
}
.mk__goal p { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--u) * 12); color: #8a9098; }
.mk__goal b { font-size: calc(var(--u) * 15); font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.mk__gbar { display: block; height: calc(var(--u) * 5); margin-top: calc(var(--u) * 9); border-radius: 99px; background: rgb(255 255 255 / .07); overflow: hidden; }
.mk__gbar > i {
  display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--pp-acc)); transform-origin: left center;
}
.mk__goal small { display: block; margin-top: calc(var(--u) * 8); font-family: var(--mono); font-size: calc(var(--u) * 11); color: #7d838c; white-space: nowrap; }
.mk__sync {
  display: flex; align-items: flex-start; gap: calc(var(--u) * 10); margin-top: auto;
  padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 10);
  border: 1px solid rgb(143 180 255 / .22); background: rgb(0 98 254 / .1);
}
.mk__sync-dot {
  flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin-top: calc(var(--u) * 4); border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 calc(var(--u) * 3) rgb(0 98 254 / .28);
}
.mk__sync b { display: block; font-size: calc(var(--u) * 12.5); font-weight: 500; color: #fff; }
.mk__sync small { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 11); color: #9aa6bd; }

.mk__main {
  display: flex; flex-direction: column; gap: calc(var(--u) * 16); min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 24);
  background: radial-gradient(90% 50% at 100% 0%, rgb(0 98 254 / .07), transparent 70%);
}
.mk__top { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 16); }
.mk__crumb { font-family: var(--mono); font-size: calc(var(--u) * 11); letter-spacing: .04em; color: #7d838c; }
.mk__crumb span { margin-inline: calc(var(--u) * 4); color: #4a4f57; }
.mk__title {
  display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 8);
  font-size: calc(var(--u) * 22); font-weight: 400; letter-spacing: -.025em; color: #fff; white-space: nowrap;
}
.mk__live {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
  height: calc(var(--u) * 20); padding-inline: calc(var(--u) * 8); border-radius: 999px;
  background: rgb(0 98 254 / .18); color: var(--pp-acc);
  font-size: calc(var(--u) * 11); font-weight: 500; letter-spacing: 0;
}
.mk__live::before { content: ""; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--pp-acc); }
.mk__meta { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: #8a9098; white-space: nowrap; }
.mk__meta span { margin-inline: calc(var(--u) * 3); color: #4a4f57; }
.mk__tools { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.mk__seg {
  display: flex; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 8);
  border: 1px solid rgb(255 255 255 / .06); background: rgb(255 255 255 / .035);
}
.mk__seg i { padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: calc(var(--u) * 6); font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 11); color: #8a9098; }
.mk__seg i.is-on { background: rgb(255 255 255 / .09); color: #fff; }
.mk__btn { padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: calc(var(--u) * 8); border: 1px solid rgb(255 255 255 / .1); font-size: calc(var(--u) * 12); color: #d9dbdf; }

.mk__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.mk__kpi {
  position: relative; overflow: hidden;
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 13); border-radius: calc(var(--u) * 12);
  border: 1px solid rgb(255 255 255 / .06); background: #13161a;
}
.mk__kpi p { font-size: calc(var(--u) * 12); color: #8a9098; white-space: nowrap; }
.mk__kpi b {
  display: block; margin-top: calc(var(--u) * 8);
  font-size: calc(var(--u) * 27); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums;
}
.mk__kpi b small { margin-left: calc(var(--u) * 5); font-size: calc(var(--u) * 14); font-weight: 400; letter-spacing: 0; color: #8a9098; }
.mk__d { display: inline-block; margin-top: calc(var(--u) * 7); font-family: var(--mono); font-size: calc(var(--u) * 11); color: var(--pp-acc); white-space: nowrap; }
.mk__kpi--on { border-color: rgb(143 180 255 / .3); background: linear-gradient(180deg, rgb(0 98 254 / .22), rgb(0 98 254 / .07)); }
.mk__spark { position: absolute; right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); width: calc(var(--u) * 84); height: calc(var(--u) * 30); }
.mk__spark polyline { fill: none; stroke: var(--pp-acc); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk__spark polygon { fill: rgb(143 180 255 / .07); }

.mk__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * 12); min-height: 0; }
.mk__card {
  padding: calc(var(--u) * 16) calc(var(--u) * 18); border-radius: calc(var(--u) * 12);
  border: 1px solid rgb(255 255 255 / .06); background: #111418;
}
.mk__ch { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 10); }
.mk__ch b { font-size: calc(var(--u) * 13.5); font-weight: 500; color: #fff; }
.mk__ch span { font-family: var(--mono); font-size: calc(var(--u) * 11); letter-spacing: .05em; text-transform: uppercase; color: #6f757e; white-space: nowrap; }
.mk__tr {
  display: grid; grid-template-columns: 1.7fr .75fr .8fr .8fr 1.15fr; align-items: center; gap: calc(var(--u) * 12);
  height: calc(var(--u) * 35); border-top: 1px solid rgb(255 255 255 / .05);
  font-size: calc(var(--u) * 12.5); color: #c3c7cd; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk__tr > span:nth-child(2), .mk__tr > span:nth-child(3), .mk__tr > span:nth-child(4) { text-align: right; }
.mk__th { height: calc(var(--u) * 28); border-top: 0; font-family: var(--mono); font-size: calc(var(--u) * 11); letter-spacing: .05em; text-transform: uppercase; color: #6f757e; }
.mk__tr > span:first-child { display: flex; align-items: center; gap: calc(var(--u) * 8); overflow: hidden; color: #fff; }
.mk__tr > span:first-child > i {
  flex: none; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: rgb(143 180 255 / var(--o, 1));
}
.mk__th > span:first-child { color: #6f757e; }
.mk__best { color: var(--pp-acc); }
.mk__bar { display: block; height: calc(var(--u) * 6); border-radius: 99px; background: rgb(255 255 255 / .06); overflow: hidden; }
.mk__bar > i {
  display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--pp-acc));
  transform-origin: left center;
}
.mk__fun { display: flex; flex-direction: column; }
.mk__fun ol { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 13); margin-top: calc(var(--u) * 4); }
.mk__fun li p { display: flex; align-items: baseline; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); color: #c3c7cd; white-space: nowrap; }
.mk__fun li p span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mk__fun li b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.mk__fun li em { width: calc(var(--u) * 44); font-style: normal; text-align: right; font-family: var(--mono); font-size: calc(var(--u) * 11); color: #7d838c; }
.mk__fbar { display: block; height: calc(var(--u) * 12); margin-top: calc(var(--u) * 7); border-radius: calc(var(--u) * 3); background: rgb(255 255 255 / .035); }
.mk__fbar > i {
  display: block; width: calc(var(--w) * 100%); height: 100%; margin-inline: auto; border-radius: inherit;
  background: rgb(143 180 255 / .32);
  transform-origin: center;
}
.mk__fun li.is-on p span { color: #fff; }
.mk__fun li.is-on .mk__fbar > i { background: linear-gradient(90deg, var(--blue), var(--pp-acc)); }

/* phone-width app */
.mkm { display: flex; flex-direction: column; padding: calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 18); }
.mkm .mk__title { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 19); }
.mkm .mk__meta { margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 12); }
.mkm__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 16); }
.mkm .mk__kpi { padding: calc(var(--u) * 12) calc(var(--u) * 13) calc(var(--u) * 11); }
.mkm .mk__kpi p { font-size: calc(var(--u) * 11.5); }
.mkm .mk__kpi b { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 23); }
.mkm .mk__d { margin-top: calc(var(--u) * 5); }
.mkm .mk__fun { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 16); }
.mkm .mk__fun ol { gap: calc(var(--u) * 11); }
.mkm .mk__fbar { height: calc(var(--u) * 9); margin-top: calc(var(--u) * 5); }

/* bars grow once as the window comes into view */
@media (prefers-reduced-motion: no-preference) {
  .mk__bar > i, .mk__fbar > i, .mk__gbar > i { transition: transform 1s var(--pp-ease) .45s; }
  .mk__fun li:nth-child(2) .mk__fbar > i { transition-delay: .55s; }
  .mk__fun li:nth-child(3) .mk__fbar > i { transition-delay: .65s; }
  .mk__fun li:nth-child(4) .mk__fbar > i { transition-delay: .75s; }
  .mk__fun li:nth-child(5) .mk__fbar > i { transition-delay: .85s; }
  .js .pp-shot.rv:not(.is-in) .mk__bar > i,
  .js .pp-shot.rv:not(.is-in) .mk__gbar > i,
  .js .pp-shot.rv:not(.is-in) .mk__fbar > i { transform: scaleX(0); }
}

/* ---------- 2. the difference ---------- */
.vs { display: grid; gap: 1rem; }
@media (width >= 820px) {
  .vs { grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(5, auto); column-gap: clamp(1rem, 2vw, 1.5rem); row-gap: 0; }
  .vs__col { grid-row: span 6; display: grid; grid-template-rows: subgrid; }
  .vs__list { grid-row: span 5; display: grid; grid-template-rows: subgrid; }
}
.vs__col {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.5rem) clamp(.5rem, 1.2vw, 1rem);
  border: 1px solid var(--pp-line); border-radius: 18px;
}
.vs__col--with {
  border-color: rgb(143 180 255 / .3);
  background: linear-gradient(180deg, rgb(0 98 254 / .17), rgb(0 98 254 / .05) 60%, rgb(0 98 254 / .03));
  box-shadow: 0 30px 60px -48px rgb(0 98 254 / .5);
}
.vs__col--with::before {
  content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(143 180 255 / .8), transparent);
}
.vs__top { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.375rem; }
.vs__fig { flex: none; width: 40px; height: 40px; }
.vs__col--without .vs__fig circle { fill: rgb(255 255 255 / .26); }
.vs__fig--ring .l { fill: #fff; }
.vs__fig--ring .b { fill: var(--blue); }
.vs__h {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute-dark);
}
.vs__col--with .vs__h { color: var(--pp-acc); }
.vs__list li {
  display: flex; align-items: center; gap: 1rem;
  padding-block: clamp(1rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--pp-line);
  font-size: var(--step-1); font-weight: 300; line-height: 1.4; color: var(--mute-dark);
}
.vs__col--with .vs__list li { border-top-color: rgb(143 180 255 / .14); color: #fff; font-weight: 400; }
.vs__list li::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / .26);
}
.vs__col--with .vs__list li::before { border: 0; background: var(--pp-acc); box-shadow: 0 0 0 4px rgb(143 180 255 / .15); }
@media (prefers-reduced-motion: no-preference) and (width >= 820px) {
  .vs__col--with { transition: opacity .7s var(--pp-ease) .2s, transform .7s var(--pp-ease) .2s; }
  .js .vs.rv:not(.is-in) .vs__col--with { opacity: 0; transform: translateY(14px); }
}
/* below 820px: the two headings become a stacked legend and each "without" line sits directly
   above its "with" answer, so the comparison reads pair by pair */
@media (width < 820px) {
  .vs { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .vs__col, .vs__list { display: contents; }
  .vs__col--with::before { display: none; }
  /* legend: the same markers as the rows, so hollow = without, filled = with */
  .vs__top { gap: .875rem; padding: 0 0 .5rem 1rem; }
  .vs__col--with .vs__top { padding-bottom: 1.25rem; }
  .vs__fig { display: none; }
  .vs__top::before {
    content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid rgb(255 255 255 / .26);
  }
  .vs__col--with .vs__top::before { border: 0; background: var(--pp-acc); box-shadow: 0 0 0 4px rgb(143 180 255 / .15); }
  .vs__h { font-size: .6875rem; letter-spacing: .12em; line-height: 1.35; }
  .vs__list li { font-size: var(--step-0); border-top: 0; }
  .vs__col--without .vs__list li { gap: .875rem; padding: 1.5rem .25rem .625rem 1rem; }
  .vs__col--with .vs__list li {
    gap: .875rem; padding: .875rem 1rem;
    border: 1px solid rgb(143 180 255 / .28); border-radius: 12px;
    background: linear-gradient(180deg, rgb(0 98 254 / .2), rgb(0 98 254 / .08));
  }
  .vs__col--without li:nth-child(1) { order: 1; padding-top: .5rem; }
  .vs__col--with li:nth-child(1) { order: 2; }
  .vs__col--without li:nth-child(2) { order: 3; }
  .vs__col--with li:nth-child(2) { order: 4; }
  .vs__col--without li:nth-child(3) { order: 5; }
  .vs__col--with li:nth-child(3) { order: 6; }
  .vs__col--without li:nth-child(4) { order: 7; }
  .vs__col--with li:nth-child(4) { order: 8; }
  .vs__col--without li:nth-child(5) { order: 9; }
  .vs__col--with li:nth-child(5) { order: 10; }
}

/* ---------- 3. how it works: five connected steps ---------- */
.flow { --node: 15px; display: grid; }
.flow__s { position: relative; padding: 0 0 2.25rem 2.75rem; }
.flow__s:last-child { padding-bottom: 0; }
.flow__node {
  position: absolute; z-index: 1; left: 0; top: .2rem;
  width: var(--node); height: var(--node); border-radius: 50%;
  border: 1.5px solid var(--pp-acc); background: var(--blue);
  box-shadow: 0 0 0 5px rgb(0 98 254 / .2);
}
.flow__s:last-child .flow__node { box-shadow: 0 0 0 5px rgb(0 98 254 / .2), 0 0 24px 2px rgb(0 98 254 / .5); }
/* the line to the next step: ::before is the rail, ::after the lit part */
.flow__s:not(:last-child)::before, .flow__s:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(var(--node) / 2 - .5px); top: calc(.2rem + var(--node)); bottom: -.2rem; width: 1px;
}
.flow__s::before { background: var(--pp-line-2); }
.flow__s::after { background: rgb(143 180 255 / .75); transform-origin: top center; }
/* step 05 hands the claimant to stage 02: its node is the Flush ring, and a link names the next stage */
.flow__node--ring, .flow__s:last-child .flow__node--ring {
  left: calc(var(--node) / 2 - 12px); top: calc(.2rem + var(--node) / 2 - 12px);
  width: 24px; height: 24px; border: 0; background: none; box-shadow: none;
}
.flow__ring { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgb(0 98 254 / .55)); }
.flow__ring .l { fill: #fff; }
.flow__ring .b { fill: var(--blue); }
.flow__next {
  position: relative; display: inline-flex; align-items: center; gap: .625rem;
  height: 2.25rem; margin-top: 1.125rem; padding-inline: .875rem 1rem; border-radius: 999px;
  border: 1px solid rgb(143 180 255 / .3); background: rgb(0 98 254 / .1);
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #fff;
  transition: background .25s, border-color .25s;
}
.flow__next::after { content: ""; position: absolute; inset: -4px; } /* 44px tap target */
.flow__next-k { color: var(--pp-soft); }
.flow__next-a { color: var(--pp-acc); transition: transform .25s var(--pp-ease); }
.flow__next:hover { border-color: var(--blue); background: rgb(0 98 254 / .24); }
.flow__next:hover .flow__next-a { transform: translateX(3px); }
.flow__next:focus-visible { outline: 2px solid var(--pp-acc); outline-offset: 3px; }
/* Pay's step 05 ends the journey, so its link is the site's call to action rather than a next stage: set like the
   header's "Speak to a consultant" (sentence case, Geist), which also keeps it inside one of the five columns at 1280px */
.flow__next--talk { font-family: var(--sans); font-size: .875rem; letter-spacing: 0; text-transform: none; }
.flow__n { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--pp-acc); }
.flow__t {
  margin-top: .5rem;
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.25;
  color: #fff; text-wrap: balance;
}
.flow__d { max-width: 42ch; margin-top: .625rem; font-size: var(--step-0); font-weight: 300; line-height: 1.6; color: var(--pp-text); }
.flow__d a {
  color: #fff; text-decoration: underline 1px; text-decoration-color: rgb(143 180 255 / .55); text-underline-offset: .22em;
  transition: color .2s, text-decoration-color .2s;
}
.flow__d a:hover { color: var(--pp-acc); text-decoration-color: currentColor; }
@media (width >= 640px) and (width < 1280px) {
  .flow__s { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 2.5rem; align-items: baseline; }
  .flow__n { grid-column: 1; }
  .flow__t { grid-column: 1; }
  .flow__d { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; }
  .flow__next { grid-column: 1; justify-self: start; }
}
@media (width >= 1280px) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flow__s, .flow__s:last-child { padding: 2.75rem 1.5rem 0 0; }
  .flow__t { font-size: clamp(1.1875rem, .6rem + .75vw, 1.375rem); }
  .flow__node { top: 0; }
  .flow__s:last-child .flow__node--ring { top: calc(var(--node) / 2 - 12px); }
  .flow__s:not(:last-child)::before, .flow__s:not(:last-child)::after {
    left: var(--node); right: 0; top: calc(var(--node) / 2 - .5px); bottom: auto; width: auto; height: 1px;
  }
  .flow__s::after { transform-origin: left center; }
}
/* the steps light up in order as the list comes into view (about 2.5 s, once) */
@media (prefers-reduced-motion: no-preference) {
  .flow__node { transition: background .35s, border-color .35s, box-shadow .5s; }
  .flow__s::after { transition: transform .45s linear; }
  .flow__s:nth-child(1) .flow__node { transition-delay: .3s; }
  .flow__s:nth-child(1)::after { transition-delay: .4s; }
  .flow__s:nth-child(2) .flow__node { transition-delay: .8s; }
  .flow__s:nth-child(2)::after { transition-delay: .9s; }
  .flow__s:nth-child(3) .flow__node { transition-delay: 1.3s; }
  .flow__s:nth-child(3)::after { transition-delay: 1.4s; }
  .flow__s:nth-child(4) .flow__node { transition-delay: 1.8s; }
  .flow__s:nth-child(4)::after { transition-delay: 1.9s; }
  .flow__s:nth-child(5) .flow__node { transition-delay: 2.3s; }
  .flow__ring circle { transition: fill .4s 2.3s, opacity .4s 2.3s; }
  .js .flow.rv:not(.is-in) .flow__ring circle { fill: rgb(255 255 255 / .3); }
  .js .flow.rv:not(.is-in) .flow__node { border-color: rgb(255 255 255 / .3); background: var(--void); box-shadow: 0 0 0 0 rgb(0 98 254 / 0); }
  .js .flow.rv:not(.is-in) .flow__s::after { transform: scaleY(0); }
}
@media (prefers-reduced-motion: no-preference) and (width >= 1280px) {
  .js .flow.rv:not(.is-in) .flow__s::after { transform: scaleX(0); }
}

/* ---------- 4. what's included: one hairline band, a dot figure beside each line ---------- */
.inc {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  border: 1px solid var(--pp-line); border-radius: 18px; overflow: hidden;
  background: var(--pp-line);
}
@media (width >= 600px) { .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 1100px) { .inc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ten items (Onboarding): at four columns the last two span two columns each, so the band has no empty cells */
@media (width >= 1100px) { .inc__i:nth-child(n+9):nth-last-child(-n+2) { grid-column: span 2; } }
.inc__i {
  display: flex; align-items: flex-start; gap: 1.125rem;
  padding: clamp(1.125rem, 1.7vw, 1.625rem) clamp(1.125rem, 1.7vw, 1.5rem);
  background: #0e1013;
}
.dm { flex: none; width: 40px; height: 40px; }
.dm .l { fill: rgb(255 255 255 / .9); }
.dm .b { fill: var(--blue); }
.inc__t {
  max-width: 26ch; padding-top: .3rem;
  font-size: clamp(1rem, .96rem + .18vw, 1.125rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.4;
  color: #fff; text-wrap: pretty;
}
.inc__t .nw { white-space: nowrap; } /* keeps hyphenated terms whole */
@media (width < 600px) {
  .inc__i { align-items: center; gap: 1rem; padding: 1rem 1.125rem; }
  .dm { width: 32px; height: 32px; }
  .inc__t { padding-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .inc__i > * { transition: opacity .6s var(--pp-ease), transform .6s var(--pp-ease); }
  .inc__i:nth-child(2) > * { transition-delay: .06s; }
  .inc__i:nth-child(3) > * { transition-delay: .12s; }
  .inc__i:nth-child(4) > * { transition-delay: .18s; }
  .inc__i:nth-child(5) > * { transition-delay: .24s; }
  .inc__i:nth-child(6) > * { transition-delay: .3s; }
  .inc__i:nth-child(7) > * { transition-delay: .36s; }
  .inc__i:nth-child(8) > * { transition-delay: .42s; }
  .inc__i:nth-child(9) > * { transition-delay: .48s; }
  .inc__i:nth-child(10) > * { transition-delay: .54s; }
  .js .inc.rv:not(.is-in) .inc__i > * { opacity: 0; transform: translateY(8px); }
}

/* ---------- 5. where it sits: the four-stage navigator ---------- */
.st__list { --node: 15px; --gap: .75rem; display: grid; gap: var(--gap); }
.st__i { position: relative; padding-left: 2.25rem; }
.st__node {
  position: absolute; z-index: 1; left: 0; top: 1.5rem;
  width: var(--node); height: var(--node); border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / .32); background: var(--void);
  transition: border-color .25s, background .25s;
}
.st__i:not(:last-child)::before { /* rail to the next stage */
  content: ""; position: absolute;
  left: calc(var(--node) / 2 - .5px); top: calc(1.5rem + var(--node)); bottom: calc(-1 * (var(--gap) + 1.5rem)); width: 1px;
  background: var(--pp-line-2);
}
.st__card {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.25rem 1.25rem 1.125rem;
  border: 1px solid var(--pp-line); border-radius: 16px;
  background: rgb(255 255 255 / .015); color: inherit;
  transition: background .25s, border-color .25s;
}
.st__n { display: flex; gap: .625rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-soft); }
.st__n span { color: var(--mute-dark); }
.st__name { margin-top: 1rem; font-size: clamp(1.375rem, 1.1rem + .85vw, 1.875rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.st__d { margin-top: .5rem; font-size: var(--step-0); font-weight: 300; line-height: 1.5; color: var(--pp-text); }
.st__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.125rem; }
.st__fig { flex: none; width: 64px; height: 40px; }
.st__fig circle { fill: rgb(255 255 255 / .32); transition: fill .3s; }
.st__fig .b { fill: var(--blue); }
.st__go {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--pp-line-2); color: #fff; font-size: .9375rem;
  transition: transform .25s var(--pp-ease), background .25s, border-color .25s;
}
a.st__card:hover { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .045); }
a.st__card:hover .st__name { color: var(--pp-acc); }
a.st__card:hover .st__fig circle:not(.b) { fill: rgb(255 255 255 / .62); }
a.st__card:hover .st__go, a.st__card:focus-visible .st__go { border-color: var(--blue); background: var(--blue); transform: translateX(3px); }
a.st__card:focus-visible { outline: 2px solid var(--pp-acc); outline-offset: 3px; border-radius: 16px; }
.st__i:has(a.st__card:hover) .st__node { border-color: rgb(255 255 255 / .6); }
.st__i.is-here .st__card {
  border-color: rgb(143 180 255 / .4);
  background: linear-gradient(180deg, rgb(0 98 254 / .22), rgb(0 98 254 / .06));
  box-shadow: 0 24px 50px -40px rgb(0 98 254 / .55);
}
.st__i.is-here .st__n, .st__i.is-here .st__n span { color: var(--pp-acc); }
.st__i.is-here .st__fig circle:not(.b) { fill: var(--pp-acc); }
.st__i.is-here .st__node { border-color: var(--pp-acc); background: var(--blue); box-shadow: 0 0 0 6px rgb(0 98 254 / .22); }
.st__here {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-acc); white-space: nowrap;
}
.st__here::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-acc); }
@media (width >= 600px) and (width < 900px) {
  /* one row per stage: words on the left, the formation and arrow on the right */
  .st__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; padding: 1.375rem 1.5rem; }
  .st__n, .st__name, .st__d { grid-column: 1; }
  .st__foot { grid-column: 2; grid-row: 1 / span 3; align-self: center; align-items: center; gap: 1.5rem; margin: 0; padding: 0; }
  .st__name { margin-top: .75rem; }
}
@media (width >= 900px) {
  .st__foot { padding-top: 1.5rem; }
  .st__list { --gap: clamp(.75rem, 1.2vw, 1rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st__i { padding: 2.5rem 0 0; }
  .st__node { top: 0; }
  .st__i:not(:last-child)::before {
    left: var(--node); right: calc(-1 * var(--gap)); top: calc(var(--node) / 2 - .5px); bottom: auto; width: auto; height: 1px;
  }
  .st__card { min-height: clamp(14rem, 18vw, 16rem); padding: clamp(1.25rem, 1.8vw, 1.75rem); }
  .st__name { min-height: 2.2em; margin-top: 1.5rem; }
}

@media (width <= 639px) {
  .pp { padding-block: 4rem; }
  .pp--hero { padding-block: 2.75rem .5rem; }
}