/* ============================================================
   People's Wallet — Platform (Concordium-integration blueprint)
   Partner/investor-rettet side. Genbygget 1-1 fra blueprintet i
   People's design-system. Off/on-chain-kodning bruger KUN People's-
   paletten: off chain = lys periwinkle (din platform), on chain =
   dyb periwinkle/navy (Concordium-skinnen). Skellet bæres af labels
   + tonedybde, ikke en 2. farve. Alle farver fra design-system-tokens.
   ============================================================ */

.pf {
  /* Off/on-chain semantik — KUN People's-palette (navy / periwinkle / lavender).
     Off chain (din platform) = lys periwinkle. On chain (Concordium-skinnen) =
     dyb periwinkle/navy. Skellet bæres af labels + tonedybde, ikke en 2. farve. */
  --pf-off:       var(--color-periwinkle-500);
  --pf-off-ink:   var(--color-periwinkle-900);
  --pf-off-wash:  var(--color-lavender-100);
  --pf-off-line:  var(--color-periwinkle-300);

  --pf-on:        var(--color-periwinkle-900);
  --pf-on-ink:    var(--color-navy-900);
  --pf-on-wash:   color-mix(in srgb, var(--color-periwinkle-900) 16%, var(--color-white));
  --pf-on-line:   var(--color-periwinkle-500);

  --pf-maxw: 1180px;
  --pf-line: var(--alpha-peri-10);
  background: var(--color-white);
}

.pf-wrap {
  width: 100%;
  max-width: var(--pf-maxw);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Shared typography ------------------------------------------------ */
.pf-eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.pf-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.pf-eyebrow--on-dark { color: var(--color-periwinkle-500); }

.pf-h2 {
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  max-width: 24ch;
}
.pf-h2--on-dark { color: var(--color-white); }

.pf-sub {
  margin-top: 14px;
  max-width: 62ch;
  font-size: var(--text-body);
  line-height: var(--lh-prose);
  color: var(--color-navy-500);
}
.pf-sub--on-dark { color: var(--color-periwinkle-300); }

.pf-head { margin-bottom: clamp(32px, 5vw, 46px); }

.pf code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--pf-on-ink);
  background: var(--pf-on-wash);
  padding: 2px 7px;
  border-radius: 6px;
}

/* Off / on accent text (H1) — tonal duality within periwinkle */
.pf-off { color: var(--pf-off); }
.pf-on  { color: var(--pf-on); }

/* Section frame --------------------------------------------------- */
.pf-section { padding: var(--section-py) 0; }
.pf-section--soft { background: var(--color-lavender-50); }

/* ============================================================
   Co-brand lockup
   ============================================================ */
.pf-cobrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-weight: 500;
}
.pf-cobrand__a { color: var(--color-navy-900); font-size: 1.02rem; }
.pf-cobrand__x { color: var(--color-periwinkle-700); font-size: 1.1rem; }
.pf-cobrand__b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-navy-900);
  font-size: 1.02rem;
}
.pf-cobrand__mark { color: var(--color-periwinkle-900); flex: 0 0 auto; }
.pf-cobrand--on-dark { margin: 34px 0 0; }
.pf-cobrand--on-dark .pf-cobrand__a,
.pf-cobrand--on-dark .pf-cobrand__b { color: var(--color-white); }
.pf-cobrand--on-dark .pf-cobrand__x { color: var(--color-periwinkle-500); }
.pf-cobrand--on-dark .pf-cobrand__mark { color: var(--color-periwinkle-500); }

/* ============================================================
   1. HERO
   ============================================================ */
.pf-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 84px) 0 clamp(40px, 6vw, 60px);
  background: var(--grad-hero-light);
}
.pf-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-lavender-300) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-lavender-300) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 25%, transparent 72%);
}
.pf-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--pf-maxw);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.pf-hero__title {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  max-width: 16ch;
}
.pf-hero__lede {
  margin-top: 22px;
  max-width: 56ch;
  font-size: var(--text-h5);
  line-height: var(--lh-prose);
  color: var(--color-navy-500);
}
.pf-hero__tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pf-tag {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  background: var(--color-white);
  border: 1px solid var(--pf-line);
  border-left: 3px solid var(--pf-on);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
}
.pf-tag b { color: var(--color-navy-900); font-weight: 500; }

/* Seam demo */
.pf-seam {
  margin-top: clamp(36px, 5vw, 52px);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-white);
}
.pf-seam__col { padding: 24px var(--card-padding-tight); }
.pf-seam__col--off { background: var(--pf-off-wash); }
.pf-seam__col--on  { background: var(--pf-on-wash); }
.pf-seam__zone {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.pf-seam__col--off .pf-seam__zone { color: var(--pf-off-ink); }
.pf-seam__col--on  .pf-seam__zone { color: var(--pf-on-ink); }
.pf-seam__h { font-size: var(--text-3xl); font-weight: 500; margin-bottom: 6px; }
.pf-seam__col--off .pf-seam__h { color: var(--pf-off-ink); }
.pf-seam__col--on  .pf-seam__h { color: var(--pf-on-ink); }
.pf-seam__col p { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); }
.pf-seam__bar {
  background: var(--color-navy-900);
  position: relative;
  padding: 11px 16px;
  text-align: center;
}
.pf-seam__bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pf-off), var(--pf-on));
}
.pf-seam__bar span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-white);
}

/* ============================================================
   2. MODEL ANCHOR (dark)
   ============================================================ */
.pf-anchor {
  background: var(--grad-navy-rich);
  color: var(--color-white);
  padding: var(--section-py-tight) 0;
}
.pf-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 30px;
}
.pf-pillar {
  border: 1px solid var(--alpha-white-15);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--alpha-white-10);
}
.pf-pillar__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-periwinkle-300);
  letter-spacing: var(--track-wide);
}
.pf-pillar__h { color: var(--color-white); font-size: var(--text-3xl); font-weight: 500; margin: 8px 0 4px; }
.pf-pillar p { font-size: var(--text-md); color: var(--color-periwinkle-300); line-height: var(--lh-prose); }
.pf-pillar--exec {
  background: var(--pf-on-wash);
  border-color: var(--pf-on-line);
}
.pf-pillar--exec .pf-pillar__n { color: var(--pf-on-ink); }
.pf-pillar--exec .pf-pillar__h { color: var(--color-navy-900); }
.pf-pillar--exec p { color: var(--color-navy-500); }
.pf-pillar__tag {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--pf-on-line);
}
.pf-pillar__tag b { color: var(--pf-on-ink); font-weight: 500; }

.pf-reach {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 30px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px dashed var(--alpha-white-15);
}
.pf-reach__item { display: flex; flex-direction: column; }
.pf-reach__v { font-size: var(--text-6xl); font-weight: 500; color: var(--color-white); line-height: 1; }
.pf-reach__l { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-periwinkle-300); margin-top: 4px; }
.pf-reach__src {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-periwinkle-500);
  line-height: var(--lh-prose);
}

/* ============================================================
   3. ACTORS
   ============================================================ */
.pf-actors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.pf-actor {
  border: 1px solid var(--pf-line);
  border-top: 3px solid var(--pf-on);
  border-radius: var(--radius-lg);
  padding: var(--card-padding-tight);
  background: var(--color-white);
  transition: transform var(--dur-slower) var(--ease-out), box-shadow var(--dur-slower) var(--ease-out);
}
.pf-actor:hover { transform: var(--card-hover-lift); box-shadow: var(--shadow-lg); }
.pf-actor__ico {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--pf-on-wash);
  color: var(--pf-on-ink);
  font-size: 20px;
}
.pf-actor__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  color: var(--pf-on-ink);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pf-actor__h { font-size: var(--text-3xl); font-weight: 500; margin-bottom: 6px; color: var(--color-navy-900); }
.pf-actor p { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); }
.pf-actor__holds {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--pf-line);
  font-size: var(--text-sm) !important;
  color: var(--color-periwinkle-700) !important;
}
.pf-actor__holds b { color: var(--color-navy-500); font-family: var(--font-mono); font-weight: 400; }

/* Note callout */
.pf-note {
  margin-top: 30px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--pf-line);
  border-left: 4px solid var(--color-periwinkle-900);
  border-radius: var(--radius-lg);
  padding: 22px var(--card-padding-tight);
  background: var(--color-white);
}
.pf-note__ico {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--alpha-peri-10);
  color: var(--color-periwinkle-900);
  font-size: 22px;
}
.pf-note p { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); margin: 0; }

/* ============================================================
   4. BUILDING BLOCKS
   ============================================================ */
.pf-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.pf-block {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
  padding: var(--card-padding-tight);
  background: var(--color-white);
  transition: transform var(--dur-slower) var(--ease-out), box-shadow var(--dur-slower) var(--ease-out);
}
.pf-block::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pf-on);
}
.pf-block:hover { transform: var(--card-hover-lift); box-shadow: var(--shadow-lg); }
.pf-block__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--pf-on-ink); letter-spacing: var(--track-wide); }
.pf-block__h { font-size: var(--text-4xl); font-weight: 500; margin: 8px 0 4px; color: var(--color-navy-900); }
.pf-block__what { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); margin-bottom: 12px; }
.pf-block__fit { font-size: var(--text-md); color: var(--color-navy-900); line-height: var(--lh-prose); }
.pf-block__fit b { color: var(--pf-on-ink); font-weight: 500; }
.pf-block__live {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--pf-on-wash);
  color: var(--pf-on-ink);
}
.pf-block__live--soon { background: var(--alpha-peri-10); color: var(--color-periwinkle-900); }

/* ============================================================
   5. ARCHITECTURE — view toggle, diagram, text bands
   ============================================================ */
.pf-viewbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.pf-viewseg {
  display: inline-flex;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-pill);
  padding: 4px;
  background: var(--color-white);
  gap: 2px;
}
.pf-viewseg__btn {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.pf-viewseg__btn.is-active { background: var(--color-navy-900); color: var(--color-white); }

.pf-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  background: var(--color-white);
  transition: color var(--dur-fast);
}
.pf-switch:hover { color: var(--color-navy-900); }
.pf-switch__sw {
  width: 34px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-lavender-300);
  position: relative;
  transition: background var(--dur-normal);
  flex: 0 0 auto;
}
.pf-switch__sw::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-periwinkle-700);
  transition: transform var(--dur-normal), background var(--dur-normal);
}
.pf-arch.show-onchain .pf-switch__sw { background: var(--pf-on); }
.pf-arch.show-onchain .pf-switch__sw::after { transform: translateX(16px); background: var(--color-white); }

/* view switching */
.pf-arch--diagram .pf-stack { display: none; }
.pf-arch--text .pf-archdiag { display: none; }

/* diagram */
.pf-zone { border-radius: var(--radius-lg); padding: 18px; border: 1px solid; }
.pf-zone--off { background: var(--pf-off-wash); border-color: var(--pf-off-line); }
.pf-zone--on  { background: var(--pf-on-wash);  border-color: var(--pf-on-line); }
.pf-zone__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.pf-zone--off .pf-zone__tag { color: var(--pf-off-ink); }
.pf-zone--on  .pf-zone__tag { color: var(--pf-on-ink); }
.pf-zone__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-node { background: var(--color-white); border: 1px solid var(--pf-line); border-radius: var(--radius-sm); padding: 12px 13px; }
.pf-node b { font-weight: 500; color: var(--color-navy-900); display: block; margin-bottom: 3px; font-size: var(--text-md); }
.pf-node span { font-size: var(--text-sm); color: var(--color-navy-500); line-height: 1.4; display: block; }
.pf-zone__base {
  margin-top: 14px;
  background: var(--color-navy-900);
  color: var(--color-periwinkle-300);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.pf-zone__base b { color: var(--color-white); font-weight: 500; }
.pf-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
  color: var(--color-navy-500);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
}
.pf-cross span { color: var(--pf-on); font-size: 1.1rem; line-height: 1; }
.pf-bridge {
  background: var(--color-white);
  border: 1px dashed var(--color-periwinkle-500);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.pf-bridge b { font-weight: 500; color: var(--color-navy-900); font-size: var(--text-lg); }
.pf-bridge span { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-periwinkle-900); margin-top: 5px; }
.pf-seamstrip { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--pf-off), var(--pf-on)); margin: 14px 0; }

/* on-chain highlight */
.pf-arch.show-onchain .pf-zone--off { opacity: 0.4; }
.pf-arch.show-onchain .pf-bridge { opacity: 0.5; }
.pf-arch.show-onchain .pf-band--off { opacity: 0.4; }
.pf-arch.show-onchain .pf-band--on { box-shadow: inset 3px 0 0 var(--pf-on); }

/* text bands */
.pf-stack { border: 1px solid var(--pf-line); border-radius: var(--radius-lg); overflow: hidden; }
.pf-band {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-primary);
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid var(--pf-line);
  cursor: pointer;
  background: var(--color-white);
  transition: opacity var(--dur-normal);
}
.pf-band:last-child { border-bottom: none; }
.pf-band__head { display: flex; align-items: center; gap: 12px; }
.pf-band__zone {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pf-band--off .pf-band__zone { background: var(--pf-off-wash); color: var(--pf-off-ink); }
.pf-band--on .pf-band__zone  { background: var(--pf-on-wash);  color: var(--pf-on-ink); }
.pf-band__title { font-weight: 500; font-size: var(--text-lg); flex: 1; color: var(--color-navy-900); }
.pf-band__items { font-size: var(--text-sm); color: var(--color-periwinkle-700); text-align: right; max-width: 46%; }
.pf-band__chev { width: 16px; height: 16px; color: var(--color-periwinkle-700); transition: transform var(--dur-normal); flex: 0 0 auto; }
.pf-band.is-open .pf-band__chev { transform: rotate(90deg); }
.pf-band__detail { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); margin-top: 12px; display: none; }
.pf-band.is-open .pf-band__detail { display: block; }
.pf-band--off { background: linear-gradient(90deg, var(--pf-off-wash), var(--color-white) 70%); }
.pf-band--on  { background: linear-gradient(90deg, var(--pf-on-wash), var(--color-white) 70%); }
.pf-band--bridge { background: var(--color-lavender-50); cursor: default; }
.pf-band--bridge .pf-band__zone { background: var(--alpha-peri-10); color: var(--color-periwinkle-900); }
.pf-band--base { background: var(--color-navy-900); cursor: default; }
.pf-band--base .pf-band__title { color: var(--color-white); }
.pf-band--base .pf-band__zone { background: var(--color-navy-700); color: var(--color-periwinkle-300); }
.pf-band--base .pf-band__items { color: var(--color-periwinkle-300); }

/* ============================================================
   6. FLOWS — tabs, view toggle, metro, steps
   ============================================================ */
.pf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pf-tab {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--color-navy-900);
  cursor: pointer;
  border: 1px solid var(--pf-line);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.pf-tab__d { width: 8px; height: 8px; border-radius: 50%; background: var(--color-periwinkle-300); }
.pf-tab.is-active { background: var(--color-navy-900); color: var(--color-white); border-color: var(--color-navy-900); }
.pf-tab.is-active .pf-tab__d { background: var(--pf-on); }

.pf-flow { display: none; }
.pf-flow.is-active { display: block; }
.pf-flow__lede { font-size: var(--text-body); color: var(--color-navy-500); margin-bottom: 26px; max-width: 62ch; line-height: var(--lh-prose); }

.pf-flows--diagram .pf-flow__text { display: none; }
.pf-flows--text .pf-flow__diagram { display: none; }

/* metro diagram */
.pf-metro__legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-navy-500);
}
.pf-metro__legend span { display: inline-flex; align-items: center; gap: 7px; }
.pf-metro__legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.pf-dot-off { background: var(--pf-off); }
.pf-dot-on  { background: var(--pf-on); }
.pf-metro {
  position: relative;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
  padding: 8px 6px;
  background: linear-gradient(180deg, var(--pf-off-wash) 0 50%, var(--pf-on-wash) 50% 100%);
  overflow-x: auto;
}
.pf-metro__track { display: flex; min-width: max-content; position: relative; padding: 0 14px; }
.pf-metro__track::before {
  content: "";
  position: absolute;
  left: 36px; right: 36px; top: 50%;
  height: 3px;
  background: linear-gradient(90deg, var(--pf-off), var(--pf-on));
  transform: translateY(-50%);
  border-radius: 2px;
}
.pf-stop { flex: 1; min-width: 128px; display: flex; flex-direction: column; align-items: center; }
.pf-stop__lab {
  height: 64px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0 8px;
  line-height: 1.25;
}
.pf-stop__lab--top { align-items: flex-end; }
.pf-stop__lab--bot { align-items: flex-start; }
.pf-stop--off .pf-stop__lab--top { color: var(--pf-off-ink); }
.pf-stop--on .pf-stop__lab--bot { color: var(--pf-on-ink); }
.pf-stop__dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-white);
  z-index: 1;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-sm);
}
.pf-stop--off .pf-stop__dot { background: var(--pf-off); }
.pf-stop--on .pf-stop__dot { background: var(--pf-on); }

/* text steps */
.pf-steps { display: flex; flex-direction: column; }
.pf-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; position: relative; padding-bottom: 24px; }
.pf-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px; top: 42px; bottom: 0;
  width: 2px;
  background: var(--pf-line);
}
.pf-step__n {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--color-white);
  border: 2px solid var(--color-navy-900);
  color: var(--color-navy-900);
  z-index: 1;
}
.pf-step__body h4 { font-size: var(--text-lg); font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--color-navy-900); }
.pf-step__body p { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); }
.pf-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.pf-chip--on  { background: var(--pf-on-wash);  color: var(--pf-on-ink); }
.pf-chip--off { background: var(--pf-off-wash); color: var(--pf-off-ink); }

/* ============================================================
   7. COMMERCE — escrow strip
   ============================================================ */
.pf-escrow {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pf-estep { padding: 22px 20px; border-bottom: 1px solid var(--pf-line); background: var(--color-white); }
.pf-estep:last-child { border-bottom: none; }
.pf-estep__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-periwinkle-900); letter-spacing: var(--track-wide); }
.pf-estep__h { font-size: var(--text-3xl); font-weight: 500; margin: 10px 0 8px; color: var(--color-navy-900); }
.pf-estep p { font-size: var(--text-md); color: var(--color-navy-500); line-height: var(--lh-prose); }
.pf-estep--locked { background: var(--pf-on-wash); }
.pf-estep__state {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--pf-on-ink);
}

/* ============================================================
   8. DATA MARKET
   ============================================================ */
.pf-market { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pf-mcard {
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  background: var(--color-white);
}
.pf-mcard--seller { border-top: 3px solid var(--pf-off); }
.pf-mcard--buyer  { border-top: 3px solid var(--pf-on); }
.pf-mcard__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pf-mcard--seller .pf-mcard__role { color: var(--pf-off-ink); }
.pf-mcard--buyer .pf-mcard__role  { color: var(--pf-on-ink); }
.pf-mcard__h { font-size: var(--text-4xl); font-weight: 500; margin-bottom: 18px; color: var(--color-navy-900); }
.pf-mcard__list { list-style: none; display: flex; flex-direction: column; gap: 13px; padding: 0; margin: 0; }
.pf-mcard__list li { font-size: var(--text-md); color: var(--color-navy-500); padding-left: 24px; position: relative; line-height: var(--lh-prose); }
.pf-mcard__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; }
.pf-mcard--seller .pf-mcard__list li::before { background: var(--pf-off); }
.pf-mcard--buyer .pf-mcard__list li::before  { background: var(--pf-on); }
.pf-mcard__list li b { color: var(--color-navy-900); font-weight: 500; }

/* ============================================================
   9. PRINCIPLE (dark)
   ============================================================ */
.pf-principle {
  background: var(--grad-section-navy-deep);
  color: var(--color-white);
  padding: var(--section-py) 0;
}
.pf-two { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
.pf-col { border: 1px solid var(--alpha-white-15); border-radius: var(--radius-lg); padding: var(--card-padding-tight); background: var(--alpha-white-10); }
.pf-col__h { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--track-wide); text-transform: uppercase; margin-bottom: 16px; font-weight: 500; }
.pf-col--stays .pf-col__h { color: var(--color-periwinkle-300); }
.pf-col--crosses .pf-col__h { color: var(--color-periwinkle-500); }
.pf-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.pf-col li { font-size: var(--text-md); color: var(--color-periwinkle-300); padding-left: 20px; position: relative; line-height: var(--lh-prose); }
.pf-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }

/* ============================================================
   10. CLOSING (dark)
   ============================================================ */
.pf-closing {
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: var(--section-py) 0;
}
.pf-closing__top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.pf-closing__h { font-size: var(--text-h2-tight); font-weight: 500; color: var(--color-white); max-width: 18ch; }
.pf-closing__p { color: var(--color-periwinkle-300); margin-top: 12px; max-width: 46ch; font-size: var(--text-md); line-height: var(--lh-prose); }
.pf-closing__meta { font-size: var(--text-sm); color: var(--color-periwinkle-500); text-align: left; }
.pf-closing__meta span { display: block; margin-top: 6px; font-family: var(--font-mono); color: var(--color-periwinkle-300); }
.pf-perf {
  display: flex;
  gap: 24px 34px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px dashed var(--alpha-white-15);
}
.pf-perf__item { display: flex; flex-direction: column; }
.pf-perf__v { font-size: var(--text-6xl); font-weight: 500; color: var(--color-periwinkle-300); line-height: 1; }
.pf-perf__l { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-periwinkle-500); margin-top: 4px; }

/* ============================================================
   Scroll-reveal (scoped) — works with global scroll-reveal.js
   ============================================================ */
.pf .reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
}
.pf .reveal-on-scroll.is-revealed { opacity: 1; transform: none; }

/* ============================================================
   Responsive — tablet & desktop
   ============================================================ */
@media (min-width: 600px) {
  .pf-actors { grid-template-columns: 1fr 1fr; }
  .pf-blocks { grid-template-columns: 1fr 1fr; }
  .pf-market { grid-template-columns: 1fr 1fr; }
  .pf-two { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .pf-wrap, .pf-hero__inner { padding-left: var(--space-8); padding-right: var(--space-8); }
  .pf-seam { display: grid; grid-template-columns: 1fr auto 1fr; }
  .pf-seam__bar { display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); }
  .pf-seam__bar::before { width: 3px; height: auto; top: 0; bottom: 0; left: 0; right: auto; background: linear-gradient(180deg, var(--pf-off), var(--pf-on)); }
  .pf-pillars { grid-template-columns: repeat(3, 1fr); }
  .pf-actors { grid-template-columns: repeat(3, 1fr); }
  .pf-zone--on .pf-zone__nodes { grid-template-columns: repeat(3, 1fr); }
  .pf-escrow { grid-template-columns: repeat(5, 1fr); }
  .pf-estep { border-bottom: none; border-right: 1px solid var(--pf-line); }
  .pf-estep:last-child { border-right: none; }
  .pf-cross { gap: 14px; }
}

@media (min-width: 900px) {
  .pf-zone--off .pf-zone__nodes { grid-template-columns: repeat(4, 1fr); }
  .pf-zone--on .pf-zone__nodes { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 640px) {
  .pf-band__items { display: none; }
  .pf-closing__meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pf .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
  .pf-actor, .pf-block { transition: none; }
}