/* =========================================================
   BLUEROOK — SELECTED WORK (single-scroll showcase)
   Layers on top of tokens.css + styles.css so the ambient
   orbs, cursor bloom, glass and buttons are literally the
   same system as the main site.
   ========================================================= */

.pf-body {
  --pf-gutter: clamp(20px, 5vw, 88px);
  --pf-max: 1520px;
  --pf-rule: color-mix(in srgb, var(--color-text) 12%, transparent);

  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.pf-shell {
  width: min(100%, var(--pf-max));
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

.pf-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 12px 18px;
  color: var(--color-bg);
  background: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.pf-skip:focus { transform: translateY(0); }

.pf-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:where(.pf-body) :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Scroll progress ---------- */
.pf-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--pf-p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-mark), var(--color-accent));
  pointer-events: none;
}

/* ---------- Mobile menu ---------- */
.pf-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: var(--pf-gutter);
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pf-menu[hidden] { display: none; }
.pf-menu nav { display: grid; gap: 4px; margin-bottom: 26px; }
.pf-menu nav a {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-style: italic;
  line-height: 1.15;
  text-decoration: none;
}
.pf-menu nav a:hover { color: var(--color-accent); }
.pf-menu__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 48px; height: 48px;
  color: var(--color-text);
  background: none;
  border: 1px solid var(--pf-rule);
  font-size: 1.5rem;
  cursor: pointer;
}

/* =========================================================
   HERO
   ========================================================= */
.pf-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 12vh, 140px);
  isolation: isolate;
  overflow: clip;
}

.pf-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.pf-hero__grid {
  position: absolute;
  inset: 38% -30% -34%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-mark) 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-mark) 42%, transparent) 1px, transparent 1px);
  background-size: 78px 78px;
  transform: perspective(560px) rotateX(64deg);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  opacity: 0.5;
}

.pf-hero__particles { position: absolute; inset: 0; }
.pf-particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  animation: pf-drift var(--dur, 16s) linear var(--delay, 0s) infinite;
}
@keyframes pf-drift {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 0.55; }
  85%  { opacity: 0.28; }
  100% { opacity: 0; transform: translateY(-190px); }
}

.pf-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 32%, var(--color-bg) 88%);
}

.pf-hero__inner { position: relative; z-index: 1; }

.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(22px, 4vh, 40px);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.pf-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-glow);
  animation: pf-beat 2.6s ease-out infinite;
}
@keyframes pf-beat {
  0%, 70%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
  35%           { box-shadow: 0 0 0 7px transparent; }
}

.pf-hero__title {
  margin: 0;
  font-size: clamp(2.7rem, 7.6vw, 7.4rem);
  font-weight: var(--fw-medium);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pf-hero__title .pf-line { display: block; }
.pf-hero__title em {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: -0.01em;
}

/* Word-level entrance (JS wraps words in .pf-w > span) */
.pf-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pf-w > span { display: inline-block; transform: translateY(105%); }
.pf-js .pf-w > span { will-change: transform; }

.pf-hero__lead {
  max-width: 34ch;
  margin: clamp(26px, 4vh, 42px) 0 0;
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: var(--lh-base);
}

.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(34px, 6vh, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--pf-rule);
  color: var(--color-text-dim); /* 4.7:1 on Midnight — fade (2.6:1) fails at this size */
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pf-scrollhint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--color-text-fade);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
}
.pf-scrollhint i {
  width: 1px; height: 46px;
  background: linear-gradient(var(--color-accent), transparent);
  animation: pf-fall 2.4s var(--ease-in-out) infinite;
}
@keyframes pf-fall {
  0%, 100% { transform: scaleY(0.25); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.pf-marquee {
  position: relative;
  padding: clamp(18px, 2.6vw, 30px) 0;
  border-block: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pf-marquee__track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: pf-scroll 34s linear infinite;
}
.pf-marquee__track span {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-style: italic;
  white-space: nowrap;
}
.pf-marquee__track b {
  flex: none;
  width: 7px; height: 7px;
  rotate: 45deg;
  background: var(--color-accent);
}
@keyframes pf-scroll { to { transform: translateX(-50%); } }

/* =========================================================
   STATEMENTS (word-brightening on scroll)
   ========================================================= */
.pf-thesis { padding: clamp(96px, 16vh, 190px) 0; }

.pf-statement {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.85rem, 5.1vw, 4.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pf-statement--big { max-width: 16ch; }
.pf-statement .pf-word { color: color-mix(in srgb, var(--color-text) 20%, transparent); transition: color 260ms linear; }
.pf-statement .pf-word.is-lit { color: var(--color-text); }
.pf-body:not(.pf-js) .pf-statement .pf-word { color: var(--color-text); }

/* =========================================================
   CHAPTERS
   ========================================================= */
.pf-chapter {
  position: relative;
  padding: clamp(80px, 12vh, 150px) 0;
  border-top: 1px solid var(--pf-rule);
}
.pf-chapter--alt { background: color-mix(in srgb, var(--color-surface) 34%, transparent); }

.pf-chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(38px, 5vw, 84px);
  align-items: center;
}
.pf-chapter__grid--flip > .pf-chapter__copy { order: 2; }

.pf-chapter__num {
  margin: 0 0 18px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
}

.pf-chapter__title {
  margin: 0;
  font-size: clamp(1.85rem, 4.3vw, 4rem);
  font-weight: var(--fw-medium);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.pf-chapter__title em {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: -0.005em;
}

.pf-chapter__lead {
  max-width: 42ch;
  margin: clamp(20px, 3vh, 30px) 0 0;
  color: var(--color-text-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(26px, 4vh, 40px);
}
.pf-status {
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-mark) 30%, transparent);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pf-deep {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--color-text);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
}
.pf-deep i { font-style: normal; transition: translate var(--dur-base) var(--ease-out); }
.pf-deep:hover { color: var(--color-accent); }
.pf-deep:hover i { translate: 5px 0; }

/* =========================================================
   LIVE PANELS
   ========================================================= */
.pf-panel {
  position: relative;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.pf-panel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pf-rule);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pf-panel__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-mark);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-mark) 60%, transparent);
  animation: pf-live 2.8s ease-out infinite;
}
@keyframes pf-live { 62%, 100% { box-shadow: 0 0 0 9px transparent; } }

.pf-panel__body { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); }

.pf-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pf-btn-sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.pf-panel__log {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* ---------- 01 · sync ---------- */
.pf-sync__control { display: grid; gap: 12px; }
.pf-sync__control > label {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-sync__input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.pf-sync__input > span { color: var(--color-text-dim); font-family: var(--font-mono); }
.pf-sync__input output {
  min-width: 4.5ch;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  text-align: right;
}
.pf-sync__input input[type="range"] {
  width: 100%;
  height: 30px;
  accent-color: var(--color-accent);
  background: none;
  cursor: pointer;
}
.pf-sync__control .pf-btn-sm { justify-self: start; }

.pf-sync__surfaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--pf-rule); }
.pf-surface {
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto 1fr;
  gap: 8px;
  padding: 16px 14px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  transition: background var(--dur-base) var(--ease-out);
}
/* Keep the three surfaces on one baseline: only the storefront carries art,
   so the other two reserve the same block. */
.pf-surface:not(:first-child)::before {
  content: "";
  height: 62px;
  border: 1px solid transparent;
}
.pf-surface small {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-surface strong { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: var(--fw-medium); }
.pf-surface span { color: var(--color-text-muted); font-size: 0.75rem; line-height: 1.4; }
.pf-surface__art {
  height: 62px;
  border: 1px solid var(--pf-rule);
  background:
    linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--color-text) 9%, transparent) 42% 58%, transparent 58%),
    color-mix(in srgb, var(--color-surface-2) 80%, transparent);
}
.pf-surface.is-stale { background: color-mix(in srgb, var(--portfolio-danger, #C4553D) 13%, transparent); }
.pf-surface.is-synced { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* ---------- 02 · journey ---------- */
.pf-journey {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pf-rule);
}
.pf-journey li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 92px;
  padding: 14px 12px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base);
}
.pf-journey li span { font-size: 0.86rem; font-weight: var(--fw-medium); }
.pf-journey li small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.4; }
.pf-journey li.is-done { background: color-mix(in srgb, var(--color-mark) 30%, transparent); }
.pf-journey li.is-live {
  background: color-mix(in srgb, var(--color-accent) 17%, transparent);
  box-shadow: inset 0 2px 0 0 var(--color-accent);
}
.pf-journey li.is-human.is-live { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

.pf-journey__readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-journey__readout small {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-journey__readout strong { font-size: 0.94rem; font-weight: var(--fw-medium); line-height: 1.35; }

/* ---------- 03 · flow ---------- */
.pf-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.pf-node {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 88px;
  padding: 13px 11px;
  border: 1px solid var(--pf-rule);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 74%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.pf-node small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-node strong { font-size: 0.84rem; font-weight: var(--fw-medium); }
.pf-node:hover, .pf-node.is-picked { border-color: var(--color-accent); }
.pf-node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-mark) 0 34%, color-mix(in srgb, var(--color-text) 62%, var(--color-mark)) 50%, var(--color-mark) 66% 100%);
  background-size: 200% 100%;
  animation: pf-current 2.2s linear infinite;
}
.pf-node:last-child::after { display: none; }
@keyframes pf-current { to { background-position: -200% 0; } }

.pf-flow.is-broken .pf-node::after { background-image: linear-gradient(90deg, var(--portfolio-danger, #C4553D) 0 34%, color-mix(in srgb, var(--color-text) 45%, var(--portfolio-danger, #C4553D)) 50%, var(--portfolio-danger, #C4553D) 66% 100%); }
.pf-flow.is-broken .pf-node[data-flow-node="2"] {
  border-color: var(--portfolio-danger, #C4553D);
  animation: pf-alarm 1.1s var(--ease-in-out) infinite alternate;
}
@keyframes pf-alarm {
  from { box-shadow: 0 0 0 1px var(--portfolio-danger, #C4553D); }
  to   { box-shadow: 0 0 0 1px var(--portfolio-danger, #C4553D), 0 0 24px color-mix(in srgb, var(--portfolio-danger, #C4553D) 45%, transparent); }
}

.pf-flow__recovery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--pf-rule); }
.pf-flow__recovery[hidden] { display: none; }
.pf-flow__recovery span {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 11px;
  background: color-mix(in srgb, var(--portfolio-danger, #C4553D) 12%, var(--color-bg));
  color: var(--color-text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
  animation: pf-rise 420ms var(--ease-out) backwards;
}
.pf-flow__recovery span:nth-child(2) { animation-delay: 0.1s; }
.pf-flow__recovery span:nth-child(3) { animation-delay: 0.2s; }
.pf-flow__recovery span:nth-child(4) { animation-delay: 0.3s; }
@keyframes pf-rise { from { opacity: 0; translate: 0 -7px; } }

/* ---------- 04 · scan ---------- */
.pf-scan { display: grid; gap: 1px; background: var(--pf-rule); }
.pf-scan__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  transition: background var(--dur-base) var(--ease-out);
}
.pf-scan__row span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.74rem; }
.pf-scan__row small { color: var(--color-text-muted); font-size: 0.8rem; }
.pf-scan__row.is-scanning { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.pf-scan__row.is-flagged { background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.pf-scan__row.is-flagged small { color: var(--color-accent); }
.pf-scan__row.is-healthy small { color: var(--color-text-dim); }

.pf-scan__meter { display: flex; align-items: baseline; gap: 12px; }
.pf-scan__meter strong { color: var(--color-accent); font-family: var(--font-mono); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: var(--fw-regular); line-height: 1; }
.pf-scan__meter span { color: var(--color-text-muted); font-size: 0.85rem; }
.pf-scan__meter b { color: var(--color-text); font-weight: var(--fw-medium); }

/* =========================================================
   CAPABILITIES
   ========================================================= */
.pf-caps { padding: clamp(90px, 14vh, 170px) 0; border-top: 1px solid var(--pf-rule); }
.pf-caps__title {
  margin: 0 0 clamp(38px, 6vh, 66px);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
}

.pf-caps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.pf-cap {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-base), background var(--dur-base), translate var(--dur-base) var(--ease-out);
}

/* Each capability carries its own diagram, drawn in CSS so the four cards
   read as four different objects rather than one repeated card. */
.pf-cap::before {
  content: "";
  position: absolute;
  inset: auto -30px -30px auto;
  width: 132px;
  height: 132px;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), rotate 900ms var(--ease-out);
}
.pf-cap:hover::before { opacity: 0.85; }

/* Voice — concentric emission */
.pf-cap:nth-child(1)::before {
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 30%, color-mix(in srgb, var(--color-accent) 40%, transparent) 31% 33%, transparent 34%),
    radial-gradient(circle, transparent 46%, color-mix(in srgb, var(--color-mark) 65%, transparent) 47% 49%, transparent 50%),
    radial-gradient(circle, transparent 62%, color-mix(in srgb, var(--color-mark) 42%, transparent) 63% 65%, transparent 66%);
}
/* Speed — a clock sweep */
.pf-cap:nth-child(2)::before {
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, color-mix(in srgb, var(--color-accent) 55%, transparent) 0 62deg, transparent 62deg 360deg),
    radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--color-mark) 55%, transparent) 59% 61%, transparent 62%);
  mask-image: radial-gradient(circle, transparent 34%, #000 35%);
  -webkit-mask-image: radial-gradient(circle, transparent 34%, #000 35%);
}
/* Desk — loose items settling into aligned rows */
.pf-cap:nth-child(3)::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-mark) 75%, transparent) 0 46%, transparent 46%) 0 12px / 100% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 50%, transparent) 0 68%, transparent 68%) 0 40px / 100% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--color-mark) 75%, transparent) 0 58%, transparent 58%) 0 68px / 100% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--color-mark) 45%, transparent) 0 34%, transparent 34%) 0 96px / 100% 2px no-repeat;
  mask-image: linear-gradient(100deg, #000 55%, transparent 90%);
  -webkit-mask-image: linear-gradient(100deg, #000 55%, transparent 90%);
}
/* Shape — a branching path */
.pf-cap:nth-child(4)::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-mark) 70%, transparent) 0 2px, transparent 2px) 0 50% / 100% 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--color-accent) 55%, transparent) 0 2px, transparent 2px) 46% 0 / 2px 100% no-repeat,
    radial-gradient(circle at 46% 50%, var(--color-accent) 0 4px, transparent 5px);
}
.pf-cap:hover:nth-child(2)::before { rotate: 62deg; }
.pf-cap:hover { border-color: var(--color-accent); background: var(--glass-bg-strong); translate: 0 -4px; }
.pf-cap__num { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; }
.pf-cap strong { font-size: clamp(1.1rem, 1.7vw, 1.42rem); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -0.015em; }
.pf-cap p { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; line-height: var(--lh-base); }
.pf-cap i { font-style: normal; color: var(--color-accent); transition: translate var(--dur-base) var(--ease-out); }
.pf-cap:hover i { translate: 6px 0; }

.pf-caps__more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: clamp(32px, 5vh, 54px);
  padding-top: 24px;
  border-top: 1px solid var(--pf-rule);
}
.pf-caps__more a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.pf-caps__more a:hover { color: var(--color-accent); }

/* =========================================================
   CLOSE + FOOT
   ========================================================= */
.pf-close { padding: clamp(100px, 17vh, 210px) 0; border-top: 1px solid var(--pf-rule); }
.pf-close__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(38px, 6vh, 60px); }
.pf-close__note { max-width: 52ch; margin: clamp(28px, 4vh, 40px) 0 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: var(--lh-base); }

.pf-foot { padding: 34px 0; border-top: 1px solid var(--pf-rule); }
.pf-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 30px;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

/* =========================================================
   SCROLL REVEALS  (enhance an already-visible default)
   ========================================================= */
.pf-js [data-pf-fade] { opacity: 0; translate: 0 22px; }
.pf-js [data-pf-fade].is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .pf-chapter__grid { grid-template-columns: 1fr; gap: 34px; }
  .pf-chapter__grid--flip > .pf-chapter__copy { order: 0; }
  .pf-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .pf-node::after { display: none; }
  .pf-flow__recovery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .pf-hero { min-height: 100svh; padding: 104px 0 60px; align-items: center; }
  .pf-hero__lead { max-width: none; }
  .pf-hero__meta { gap: 6px 20px; }
  .pf-scrollhint { display: none; }
  .pf-sync__surfaces { grid-template-columns: 1fr; }
  .pf-surface__art { height: 46px; }
  .pf-journey { grid-template-columns: 1fr; }
  .pf-journey li { min-height: 0; grid-template-columns: 1fr auto; grid-auto-flow: column; align-items: center; }
  .pf-journey__readout { grid-template-columns: 1fr; gap: 12px; }
  .pf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-scan__row { grid-template-columns: 68px minmax(0, 1fr); }
  .pf-foot__inner { flex-direction: column; }
}

@media (max-width: 920px) {
  .pf-menu nav a { font-size: clamp(1.9rem, 8vw, 2.8rem); }
}

@media (min-width: 921px) {
  .pf-menu, .pf-menu[hidden] { display: none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .pf-marquee__track,
  .pf-particle,
  .pf-scrollhint i,
  .pf-dot,
  .pf-panel__live,
  .pf-node::after,
  .pf-flow.is-broken .pf-node[data-flow-node="2"],
  .pf-flow__recovery span { animation: none !important; }

  .pf-js [data-pf-fade] { opacity: 1 !important; translate: none !important; }
  .pf-js .pf-w > span { transform: none !important; }
  .pf-statement .pf-word { color: var(--color-text) !important; }
  .pf-particle { opacity: 0.3; }
  html { scroll-behavior: auto !important; }
}

/* =========================================================
   LIVE · SPEED TO LEAD
   The only section that touches a real service. Styled to feel
   warmer and closer than the simulated chapters above it.
   ========================================================= */
.pf-live-section {
  position: relative;
  padding: clamp(90px, 14vh, 170px) 0;
  border-top: 1px solid var(--color-accent);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 62%),
    color-mix(in srgb, var(--color-surface) 40%, transparent);
}

.pf-live-head { max-width: 62ch; margin-bottom: clamp(38px, 6vh, 62px); }
.pf-live-title {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  font-weight: var(--fw-medium);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.pf-live-title em {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: -0.005em;
}
.pf-live-lead {
  max-width: 52ch;
  margin: clamp(18px, 3vh, 28px) 0 0;
  color: var(--color-text-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

.pf-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }

.pf-live-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--dur-base) var(--ease-out);
}
.pf-live-card.is-armed { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.pf-live-card.is-running { border-color: var(--color-accent); }
.pf-live-card header { display: grid; gap: 8px; }
.pf-live-card__tag {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pf-live-card h3 { margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: var(--fw-medium); letter-spacing: -0.015em; }
.pf-live-card > p { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; line-height: var(--lh-base); }

.pf-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  cursor: pointer;
}
.pf-consent input {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.pf-consent:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--pf-rule)); }

.pf-live-card .btn[aria-disabled="true"],
.pf-live-card .btn[disabled] { opacity: 0.4; pointer-events: none; }
.pf-live-card .btn { justify-self: start; }

.pf-live-note { margin: 0; color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5; }

/* Response clock */
.pf-live-card--clock { background: color-mix(in srgb, var(--color-bg) 74%, transparent); }
.pf-clock {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pf-clock.is-running { color: var(--color-accent); }
.pf-clock__steps { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--pf-rule); }
.pf-clock__steps li {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  color: var(--color-text-dim);
  font-size: 0.78rem;
  transition: color var(--dur-base), background var(--dur-base);
}
.pf-clock__steps li.is-done { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 13%, transparent); }

.pf-live-foot {
  max-width: 68ch;
  margin: clamp(30px, 5vh, 48px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--pf-rule);
  color: var(--color-text-dim);
  font-size: 0.85rem;
  line-height: var(--lh-base);
}

/* ---------- Channel 03 · text assistant ---------- */
.pf-chat {
  margin-top: 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.pf-chat.is-offline { opacity: 0.72; }

.pf-chat__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pf-rule);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pf-chat__state { margin-left: auto; color: var(--color-accent); }

.pf-chat__log {
  display: grid;
  gap: 14px;
  max-height: 340px;
  min-height: 150px;
  padding: clamp(16px, 2.2vw, 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pf-msg { max-width: 68ch; display: grid; gap: 5px; }
.pf-msg small {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-msg p {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--pf-rule);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: var(--lh-base);
  white-space: pre-wrap;
}
.pf-msg--bot p { background: color-mix(in srgb, var(--color-bg) 62%, transparent); }
.pf-msg--you { justify-self: end; text-align: right; }
.pf-msg--you p {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-mark) 26%, transparent);
  border-color: color-mix(in srgb, var(--color-mark) 55%, transparent);
  text-align: left;
}
.pf-msg--error p { border-color: color-mix(in srgb, var(--portfolio-danger, #C4553D) 55%, transparent); }

/* Thinking indicator */
.pf-msg--typing p { display: flex; gap: 5px; align-items: center; min-height: 44px; }
.pf-msg--typing i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pf-think 1.15s ease-in-out infinite;
}
.pf-msg--typing i:nth-child(2) { animation-delay: 0.16s; }
.pf-msg--typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes pf-think { 0%, 60%, 100% { opacity: 0.28; } 30% { opacity: 1; } }

.pf-chat__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--pf-rule);
}
.pf-chat__form input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}
.pf-chat__form input::placeholder { color: var(--color-text-dim); opacity: 1; }
.pf-chat__form input:focus-visible { border-color: var(--color-accent); }
.pf-chat__form input:disabled { opacity: 0.5; }
.pf-chat [data-chat-note] { padding: 0 clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pf-msg--typing i { animation: none; opacity: 0.6; }
}

/* ---- Speed to lead · outbound form ---- */
.pf-live-card--wide { grid-column: span 2; }
.pf-live-card h3 em {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-style: italic;
}
.pf-stl__form { display: grid; gap: 14px; }
.pf-field { display: grid; gap: 6px; }
.pf-field label {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-field input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.pf-field input::placeholder { color: var(--color-text-dim); opacity: 1; }
.pf-field input:focus-visible { border-color: var(--color-accent); }
.pf-field input:invalid:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--portfolio-danger, #C4553D) 65%, transparent); }
.pf-live-card--wide .pf-consent strong { color: var(--color-text); font-weight: var(--fw-medium); }
.pf-live-card.is-running .pf-live-card__tag { color: var(--color-text); }

@media (max-width: 900px) {
  .pf-live-card--wide { grid-column: span 1; }
}

/* =========================================================
   SCROLL-DRIVEN STAGE
   The narrative column scrolls; the console stays pinned and
   advances from scroll position alone. No buttons.
   ========================================================= */
.pf-stage {
  position: relative;
  padding: clamp(70px, 10vh, 130px) 0 clamp(90px, 14vh, 180px);
  border-top: 1px solid var(--pf-rule);
}

.pf-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(38px, 5vw, 90px);
  align-items: start;
}

.pf-stage__title {
  margin: 0 0 clamp(34px, 5vh, 56px);
  font-size: clamp(1.85rem, 4.3vw, 4rem);
  font-weight: var(--fw-medium);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.pf-stage__title em {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-style: italic;
}

/* --- Narrative beats --- */
.pf-beats { display: grid; gap: clamp(46px, 9vh, 96px); margin: 0 0 clamp(34px, 5vh, 52px); padding: 0; list-style: none; }
.pf-beat {
  padding-left: 22px;
  border-left: 1px solid var(--pf-rule);
  opacity: 0.32;
  transition: opacity 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.pf-beat.is-live { opacity: 1; border-left-color: var(--color-accent); }
.pf-beat h3 { margin: 0 0 10px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: var(--fw-medium); letter-spacing: -0.015em; }
.pf-beat p { margin: 0; max-width: 46ch; color: var(--color-text-muted); font-size: 0.94rem; line-height: var(--lh-base); text-wrap: pretty; }

/* --- Pinned console --- */
.pf-stage__sticky { position: sticky; top: 96px; }

.pf-console {
  border: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 78% 0%, color-mix(in srgb, var(--color-mark) 20%, transparent), transparent 62%),
    var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.pf-console__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pf-rule);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pf-console__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-mark); }
.pf-console__step { margin-left: auto; color: var(--color-accent); }

.pf-surfaces { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(20px, 3vw, 34px); padding: clamp(18px, 2.4vw, 28px); }
.pf-srf { padding: 0; background: none; }
.pf-srf header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pf-srf__tag { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pf-srf__state { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.58rem; }
.pf-srf--records { grid-column: 1 / -1; display: grid; gap: 5px; }

/* back-office rows */
.pf-row { display: grid; gap: 2px; padding: 0 0 13px; font-size: 0.8rem; }
.pf-row span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-row b { font-size: 1rem; font-weight: var(--fw-regular); letter-spacing: -0.01em; }
.pf-row--hot b { color: var(--color-accent); font-size: 1.35rem; }
.pf-console[data-beat-state="0"] .pf-row--hot b { text-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 55%, transparent); }

.pf-approval { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--color-text) 5%, transparent); transition: background 320ms var(--ease-out); }
.pf-approval__who { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.6rem; }
.pf-approval__pill { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; transition: background 320ms var(--ease-out), color 320ms var(--ease-out); }
.pf-console[data-beat-state="1"] .pf-approval { background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.pf-console[data-beat-state="1"] .pf-approval__pill { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.pf-console:is([data-beat-state="2"], [data-beat-state="3"]) .pf-approval__pill { color: var(--color-bg); background: var(--color-accent); }

/* storefront product */
.pf-product { display: grid; gap: 7px; }
.pf-product__art {
  display: block;
  aspect-ratio: 1;
  max-height: 150px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface-2) 85%, transparent);
  overflow: hidden;
}
.pf-product__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The plate is warm; cool it slightly so it sits inside the Midnight world. */
  filter: saturate(0.82) brightness(0.92) contrast(1.04);
}
.pf-product strong { font-size: 0.86rem; font-weight: var(--fw-medium); }
.pf-product__price { color: var(--color-accent); font-family: var(--font-mono); font-size: 1.1rem; }
.pf-product__badge { justify-self: start; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* connected records */
.pf-rec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  transition: background 320ms var(--ease-out), color 320ms var(--ease-out);
}
.pf-rec span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; }
.pf-rec b { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: 0.92rem; }
.pf-rec.is-stale { background: color-mix(in srgb, var(--portfolio-danger, #C4553D) 14%, transparent); }
.pf-rec.is-stale b { color: var(--portfolio-danger, #C4553D); }
.pf-rec.is-synced { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.pf-rec.is-synced b { color: var(--color-accent); }

/* event stream */
.pf-stream {
  min-height: 104px;
  max-height: 104px;
  padding: 13px clamp(18px, 2.4vw, 28px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.42) 22%);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.75;
  overflow: hidden;
}
.pf-stream i { display: block; font-style: normal; animation: pf-rise 320ms var(--ease-out); }
.pf-stream i::before { content: "› "; color: var(--color-accent); }
.pf-stream i.is-ok::before { content: "✓ "; color: var(--portfolio-safe, #5C8A5A); }
.pf-stream i.is-hold::before { content: "‖ "; color: var(--color-accent); }

@media (max-width: 1080px) {
  .pf-stage__grid { grid-template-columns: 1fr; gap: 34px; }
  .pf-stage__sticky { position: static; }
  .pf-beats { gap: 30px; }
  .pf-beat { opacity: 1; border-left-color: var(--color-accent); }
}
@media (max-width: 640px) {
  .pf-surfaces { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-beat { opacity: 1; }
  .pf-stream i { animation: none; }
}

/* Atmospheric hero plate. Sits furthest back and is masked away from the left
   third so the display type keeps its contrast ratio against Midnight. */
.pf-hero__plate {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.pf-hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  opacity: 0.55;
  filter: saturate(0.9) contrast(1.05);
  mask-image: linear-gradient(100deg, transparent 0 26%, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0 26%, #000 62%, #000 100%);
}
@media (max-width: 720px) {
  .pf-hero__plate img { opacity: 0.4; object-position: 70% 45%; }
}

/* ---- Enrollment stage ---- */
.pf-stage--alt { background: color-mix(in srgb, var(--color-surface) 34%, transparent); }
.pf-stage__grid--flip > .pf-stage__script { order: 2; }

.pf-pipe {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px) 0;
}
.pf-pipe::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 9px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-mark), color-mix(in srgb, var(--color-mark) 30%, transparent));
}
.pf-pipe__node {
  position: relative;
  padding: 22px 2px 0;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  transition: color 320ms var(--ease-out);
}
.pf-pipe__node::before {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 11px; height: 11px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-mark);
  transition: background 320ms var(--ease-out), box-shadow 320ms var(--ease-out), scale 320ms var(--ease-out);
}
.pf-pipe__node.is-done { color: var(--color-text-muted); }
.pf-pipe__node.is-done::before { background: var(--color-mark); box-shadow: inset 0 0 0 1px var(--color-mark); }
.pf-pipe__node.is-live { color: var(--color-accent); }
.pf-pipe__node.is-live::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 22%, transparent);
  scale: 1.15;
}

.pf-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-cap-slot {
  padding: 8px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-align: center;
  transition: background 320ms var(--ease-out), color 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.pf-cap-slot.is-held { color: var(--color-bg); background: var(--color-accent); }
.pf-cap-slot.is-gone { opacity: 0.35; text-decoration: line-through; }

@media (max-width: 1080px) {
  .pf-stage__grid--flip > .pf-stage__script { order: 0; }
}

/* ---- Workflow canvas ---- */
.pf-canvas {
  position: relative;
  aspect-ratio: 420 / 300;
  padding: 4px;
  background:
    radial-gradient(80% 70% at 30% 20%, color-mix(in srgb, var(--color-mark) 22%, transparent), transparent 70%),
    radial-gradient(70% 60% at 80% 85%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 72%);
}
.pf-canvas__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-canvas__wires path {
  fill: none;
  stroke: color-mix(in srgb, var(--color-mark) 70%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  opacity: 0.45;
  transition: stroke 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.pf-canvas__wires path.is-hot {
  stroke: var(--color-accent);
  opacity: 1;
  animation: pf-wire 900ms linear infinite;
}
@keyframes pf-wire { to { stroke-dashoffset: -16; } }

.pf-node {
  position: absolute;
  left: var(--nx); top: var(--ny);
  display: grid;
  gap: 2px;
  min-width: 88px;
  padding: 8px 13px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
  transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.pf-node small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-node strong { font-size: 0.72rem; font-weight: var(--fw-medium); white-space: nowrap; }
.pf-node.is-hot {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 0 1px var(--color-accent), 0 0 26px color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translateY(-3px);
}
.pf-node--human.is-hot { background: color-mix(in srgb, var(--color-accent) 26%, var(--color-surface)); }
.pf-node.is-dim { opacity: 0.42; }

.pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px clamp(18px, 2.4vw, 28px);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}
.pf-legend span:first-child { color: var(--color-accent); }

@media (max-width: 640px) {
  .pf-node { min-width: 0; padding: 5px 6px; }
  .pf-node strong { font-size: 0.62rem; }
  /* Was 0.46rem (7.4px). Uppercase mono reads larger than lowercase, but not
     that much larger — below ~9px a phone stops rendering it as words. */
  .pf-node small { font-size: 0.58rem; }
}

/* ---- Wayfinding parity with the deep-dive routes ---- */
.nav__links a { position: relative; padding-block: 6px; }
.nav__links a[aria-current="page"] { color: var(--color-text); }
.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-glow);
}
@keyframes pf-page-in { from { opacity: 0; transform: translateY(8px); } }
.pf-body main, .pf-body .pf-foot { animation: pf-page-in 460ms var(--ease-out) both; }
html[data-leaving="true"] body { opacity: 0; transition: opacity 240ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .pf-body main, .pf-body .pf-foot { animation: none; }
  html[data-leaving="true"] body { opacity: 1; transition: none; }
}

/* =========================================================
   PICKER — the explicit route into the detail pages.
   Previously the deep-dives were reachable only from the nav,
   so most visitors never found them.
   ========================================================= */
.pf-picker {
  padding: clamp(90px, 14vh, 170px) 0;
  border-top: 1px solid var(--pf-rule);
  background:
    radial-gradient(90% 70% at 20% 0%, color-mix(in srgb, var(--color-mark) 16%, transparent), transparent 70%);
}
.pf-picker__title {
  margin: 14px 0 0;
  max-width: 20ch;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  font-weight: var(--fw-medium);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.pf-picker__title em {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-style: italic;
}
.pf-picker__lead {
  max-width: 46ch;
  margin: clamp(18px, 3vh, 26px) 0 clamp(38px, 6vh, 60px);
  color: var(--color-text-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: var(--lh-base);
}

.pf-picker__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
/* When a section skips the lead paragraph, the grid still needs air below the title. */
.pf-picker__title + .pf-picker__grid { margin-top: clamp(30px, 5vh, 52px); }

.pf-pick {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  color: var(--color-text);
  text-decoration: none;
  transition: background 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.pf-pick:hover {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.4), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.pf-pick__kicker { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
.pf-pick strong { font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: var(--fw-medium); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.pf-pick__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}
.pf-pick__meta i { font-style: normal; color: var(--color-accent); transition: translate 320ms var(--ease-out); }
.pf-pick:hover .pf-pick__meta i { translate: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .pf-pick, .pf-pick:hover { transform: none; }
}

/* ---- Products: Process to SOP console ---- */
.pf-sop { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(18px, 2.6vw, 30px); padding: clamp(18px, 2.4vw, 28px); }
.pf-sop__raw { display: grid; align-content: start; gap: 9px; }
.pf-sop__raw i {
  font-style: italic;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 1;
  animation: pf-rise 380ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: opacity 400ms var(--ease-out);
}
.pf-sop__raw i.is-dim { opacity: 0.3; }
.pf-sop__doc { display: grid; align-content: start; }
.pf-sop__doc .pf-row b.is-empty { color: var(--color-text-dim); }
.pf-sop__doc .pf-row b.is-question { color: var(--color-accent); font-style: italic; }

/* ---- Products: Gap Detector console ---- */
.pf-gap { display: grid; gap: 5px; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px) 0; }
.pf-gap__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  transition: background 320ms var(--ease-out);
}
.pf-gap__row span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.68rem; }
.pf-gap__row small { color: var(--color-text-muted); font-size: 0.78rem; }
.pf-gap__row.is-scanning { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.pf-gap__row.is-flagged { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.pf-gap__row.is-flagged small { color: var(--color-accent); }
.pf-gap__row.is-healthy small { color: var(--color-text-dim); }
.pf-gap__meter { display: flex; align-items: baseline; gap: 12px; padding: 14px clamp(18px, 2.4vw, 28px); }
.pf-gap__meter strong { color: var(--color-accent); font-family: var(--font-mono); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: var(--fw-regular); line-height: 1; }
.pf-gap__meter span { color: var(--color-text-muted); font-size: 0.84rem; }
.pf-gap__meter b { color: var(--color-text); font-weight: var(--fw-medium); }

/* Non-link cards in the library grid should not look clickable. */
.pf-pick:not([href]) { cursor: default; }
.pf-pick:not([href]):hover { transform: none; background: color-mix(in srgb, var(--color-surface) 62%, transparent); box-shadow: none; }

@media (max-width: 640px) { .pf-sop { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pf-sop__raw i { animation: none; } }

/* =========================================================
   LIVE · restructured
   Was four competing cards of different widths and content
   types. Now one primary action with the clock inside it,
   and two quiet alternatives beside it.
   ========================================================= */
.pf-stl { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); gap: clamp(18px, 2.6vw, 30px); align-items: start; }

.pf-stl__main {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 18px;
  background:
    radial-gradient(110% 80% at 85% 0%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 62%),
    var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
  transition: box-shadow 320ms var(--ease-out);
}
.pf-stl__main.is-armed { box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.pf-stl__main.is-running { box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 0 0 1px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 22%, transparent); }

.pf-stl__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.pf-stl__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pf-stl__clock { display: grid; gap: 2px; text-align: right; }
.pf-stl__clock strong {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-text);
}
.pf-stl__main.is-running .pf-stl__clock strong { color: var(--color-accent); }
.pf-stl__clock span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.6rem; }

.pf-stl__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-stl__steps li {
  padding: 6px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 320ms var(--ease-out), color 320ms var(--ease-out);
}
.pf-stl__steps li.is-done { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent); }

/* Quiet alternatives ------------------------------------- */
.pf-stl__alts {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
}
.pf-stl__alts-title { margin: 0 0 4px; color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pf-alt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-bg) 52%, transparent);
}
.pf-alt strong { display: block; font-size: 0.88rem; font-weight: var(--fw-medium); }
.pf-alt span { display: block; color: var(--color-text-dim); font-size: 0.74rem; line-height: 1.4; }
.pf-alt__consent { display: grid; place-items: center; }
.pf-alt__consent input { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
.pf-alt .btn { min-height: 38px; padding: 0 14px; font-size: 0.72rem; }
.pf-alt .btn[aria-disabled="true"], .pf-alt .btn[disabled] { opacity: 0.4; pointer-events: none; }

@media (max-width: 900px) {
  .pf-stl { grid-template-columns: 1fr; }
  .pf-stl__go { justify-content: flex-start; }
  .pf-stl__clock { text-align: left; }
}

/* ---- Capabilities: speed-to-lead decay console ---- */
.pf-decay { display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 28px) 0; }
.pf-decay__clock {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}
.pf-decay__bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 8%, transparent); overflow: hidden; }
.pf-decay__bar i {
  display: block;
  width: var(--w, 100%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 35%, transparent));
  transition: width 620ms var(--ease-out);
}
.pf-decay__note { margin: 0; color: var(--color-text-muted); font-size: 0.86rem; }
.pf-decay__action { padding: 0 clamp(18px, 2.4vw, 28px) 16px; }

.pf-outcomes { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px clamp(18px, 2.4vw, 28px); }
.pf-outcome {
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  transition: background 320ms var(--ease-out), color 320ms var(--ease-out);
}
.pf-outcome.is-on { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent); }

/* ---- Capabilities: reactivation console ---- */
.pf-surfaces--single { grid-template-columns: 1fr; }
.pf-channels { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 clamp(18px, 2.4vw, 28px) 18px; }
.pf-channel {
  position: relative;
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  transition: background 320ms var(--ease-out), color 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.pf-channel.is-allowed { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent); }
.pf-channel.is-blocked { opacity: 0.45; text-decoration: line-through; }

/* ---- Technical: signal trace + refusal log ---- */
.pf-trace {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: clamp(20px, 2.6vw, 28px) clamp(18px, 2.4vw, 28px) 0;
}
.pf-trace::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 9px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-mark), color-mix(in srgb, var(--color-mark) 25%, transparent));
}
.pf-trace__node {
  position: relative;
  padding: 22px 2px 0;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  transition: color 320ms var(--ease-out);
}
.pf-trace__node::before {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 11px; height: 11px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-mark);
  transition: background 320ms var(--ease-out), box-shadow 320ms var(--ease-out), scale 320ms var(--ease-out);
}
.pf-trace__node.is-on { color: var(--color-text-muted); }
.pf-trace__node.is-on::before { background: var(--color-mark); }
.pf-trace__node.is-live { color: var(--color-accent); }
.pf-trace__node.is-live::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 22%, transparent);
  scale: 1.15;
}

.pf-refusals { display: grid; gap: 6px; padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.4vw, 28px); }
.pf-refusal {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  transition: background 320ms var(--ease-out);
}
.pf-refusal span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pf-refusal small { color: var(--color-text-muted); font-size: 0.78rem; text-align: right; }
.pf-refusal.is-on { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.pf-refusal.is-on span { color: var(--color-accent); }
.pf-refusal.is-on small { color: var(--color-text); }

/* =========================================================
   TOOL SURFACES
   Recreations of the interfaces clients actually recognise —
   a Notion-style doc, an n8n-style canvas, a dashboard. Each
   keeps that tool's own colour world, which is what stops the
   portfolio reading as one endless blue page.
   ========================================================= */

/* ---- Notion-style document (light) ---- */
.tool-notion {
  --nt-ink: #37352f;
  --nt-dim: #9b9a97;
  --nt-line: #ebeae8;
  border-radius: 12px;
  background: #ffffff;
  color: var(--nt-ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  overflow: hidden;
}
.tool-notion__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--nt-line);
  color: var(--nt-dim);
  font-size: 11px;
}
.tool-notion__dots { display: flex; gap: 5px; }
.tool-notion__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e0dedb; }
.tool-notion__dots i:first-child { background: #ff5f57; }
.tool-notion__dots i:nth-child(2) { background: #febc2e; }
.tool-notion__dots i:nth-child(3) { background: #28c840; }
.tool-notion__body { padding: 20px 22px 24px; }
.tool-notion h4 { margin: 0 0 14px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.tool-notion__prop { display: grid; grid-template-columns: 116px 1fr; gap: 10px; padding: 6px 0; font-size: 13px; }
.tool-notion__prop dt { display: flex; align-items: center; gap: 6px; color: var(--nt-dim); }
.tool-notion__prop dd { margin: 0; color: var(--nt-ink); }
.tool-notion__prop dd.is-empty { color: #c9c7c4; }
.tool-notion__prop dd.is-question { color: #d9730d; }
.tool-notion__tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #f1f0ef; font-size: 12px; }
.tool-notion__tag--go { background: #dbeddb; color: #1c3829; }
.tool-notion__tag--wait { background: #fadec9; color: #5c3b23; }
.tool-notion__divider { height: 1px; margin: 14px 0; background: var(--nt-line); }
.tool-notion__cb { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-size: 13.5px; }
.tool-notion__cb i {
  flex: none; width: 15px; height: 15px; margin-top: 1px;
  border: 1.4px solid #c9c7c4; border-radius: 3px;
}
.tool-notion__cb.is-done i { border-color: #2383e2; background: #2383e2; }
.tool-notion__cb.is-done span { color: var(--nt-dim); text-decoration: line-through; }

/* ---- n8n-style canvas (dark, its own palette) ---- */
.tool-n8n {
  --n8-bg: #1a1a24;
  --n8-line: #2f2f3d;
  border-radius: 12px;
  background:
    radial-gradient(#2b2b3a 1px, transparent 1px) 0 0 / 18px 18px,
    var(--n8-bg);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.tool-n8n__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px;
  background: #16161f;
  color: #8b8b9e;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-n8n__bar b { color: #ff6d5a; font-weight: 500; }
.tool-n8n__canvas { position: relative; aspect-ratio: 16 / 10; }
.tool-n8n__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.tool-n8n__wires path { fill: none; stroke: #3d3d4f; stroke-width: 1.6; stroke-linecap: round; transition: stroke 320ms var(--ease-out); }
.tool-n8n__wires path.is-hot { stroke: #ff6d5a; }
.tool-n8n__node {
  position: absolute; left: var(--nx); top: var(--ny);
  display: grid; gap: 2px;
  min-width: 84px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #262635;
  box-shadow: inset 0 0 0 1px #35354a;
  transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.tool-n8n__node small { color: #8a8aa0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.tool-n8n__node strong { color: #e9e9f2; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tool-n8n__node.is-hot { background: #33202a; box-shadow: inset 0 0 0 1px #ff6d5a, 0 0 22px rgba(255,109,90,0.28); transform: translateY(-2px); }
.tool-n8n__node.is-dim { opacity: 0.45; }
.tool-n8n__node::before {
  content: ""; position: absolute; left: -4px; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%; background: #3d3d4f;
}
.tool-n8n__node.is-hot::before { background: #ff6d5a; }

/* ---- Dashboard surface (its own cool slate) ---- */
.tool-dash {
  --db-bg: #0f1420;
  border-radius: 12px;
  background: var(--db-bg);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5), inset 0 0 0 1px #1e2636;
  overflow: hidden;
}
.tool-dash__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; background: #131a29; color: #6f7d95; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.tool-dash__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #1b2333; }
.tool-dash__tile { padding: 15px; background: var(--db-bg); }
.tool-dash__tile small { display: block; color: #7d8ba4; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.tool-dash__tile strong { display: block; margin-top: 8px; color: #e6ecf5; font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tool-dash__tile span { color: #58c9a0; font-size: 11px; }
.tool-dash__tile span.is-warn { color: #e0a34a; }
.tool-dash__chart { display: flex; align-items: flex-end; gap: 4px; height: 74px; padding: 15px; }
.tool-dash__chart i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #3d7fd6, #23456f); transition: height 520ms var(--ease-out); }
.tool-dash__chart i.is-peak { background: linear-gradient(180deg, #58c9a0, #2c6b56); }

@media (max-width: 640px) {
  .tool-dash__grid { grid-template-columns: 1fr 1fr; }
  .tool-n8n__node { min-width: 0; padding: 5px 7px; }
  .tool-n8n__node strong { font-size: 10.5px; }
}

/* ---- CRM / spreadsheet surface (Airtable-ish light) ---- */
.tool-crm {
  --cr-line: #e3e6ea;
  --cr-ink: #1f2733;
  --cr-dim: #6b7684;
  border-radius: 12px;
  background: #fff;
  color: var(--cr-ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  overflow: hidden;
}
.tool-crm__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--cr-line);
  color: var(--cr-dim);
  font-size: 11.5px;
}
.tool-crm__bar b { color: #2d7ff9; font-weight: 600; }
.tool-crm__head, .tool-crm__row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--cr-line);
}
.tool-crm__head span {
  padding: 8px 13px;
  color: var(--cr-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-crm__row span { padding: 11px 13px; font-size: 13px; }
.tool-crm__row:last-child { border-bottom: 0; }
.tool-crm__pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.tool-crm__pill--go { background: #d7f0e2; color: #14683c; }
.tool-crm__pill--wait { background: #fdeacb; color: #7a4c11; }
.tool-crm__pill--stop { background: #fadcdc; color: #8d2020; }
.tool-crm__pill--idle { background: #eceef1; color: #66707d; }
.tool-crm__row.is-focus { background: #f2f7ff; box-shadow: inset 3px 0 0 0 #2d7ff9; }

/* ---- Terminal surface ---- */
.tool-term {
  border-radius: 12px;
  background: #0b0e14;
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 0 0 1px #1b2130;
  overflow: hidden;
}
.tool-term__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #11151f;
  color: #5c6a80;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.tool-term__dots { display: flex; gap: 5px; }
.tool-term__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a3242; }
.tool-term__dots i:first-child { background: #ff5f57; }
.tool-term__dots i:nth-child(2) { background: #febc2e; }
.tool-term__dots i:nth-child(3) { background: #28c840; }
.tool-term__body {
  min-height: 240px;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
}
.tool-term__line { display: block; color: #8fa0b8; animation: pf-rise 300ms var(--ease-out) backwards; }
.tool-term__line::before { content: "$ "; color: #4d5b70; }
.tool-term__line.is-out::before { content: "  "; }
.tool-term__line.is-ok { color: #5ddc9a; }
.tool-term__line.is-ok::before { content: "✓ "; color: #5ddc9a; }
.tool-term__line.is-warn { color: #f0b354; }
.tool-term__line.is-warn::before { content: "! "; color: #f0b354; }
.tool-term__line b { color: #e8eef7; font-weight: 500; }
.tool-term__caret { color: #5ddc9a; animation: caret-blink 1.1s steps(2, jump-none) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---- Chat surface (WhatsApp-ish) ---- */
.tool-chat {
  --wa-bg: #0b141a;
  border-radius: 12px;
  background: var(--wa-bg);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.tool-chat__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #1f2c33; color: #e9edef; font-size: 13px; }
.tool-chat__avatar { width: 30px; height: 30px; border-radius: 50%; background: #6a7175; display: grid; place-items: center; color: #e9edef; font-size: 12px; }
.tool-chat__bar small { display: block; color: #8696a0; font-size: 11px; }
.tool-chat__body { display: grid; gap: 8px; min-height: 210px; padding: 16px; align-content: start; }
.tool-chat__msg { max-width: 76%; padding: 7px 11px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; animation: pf-rise 300ms var(--ease-out) backwards; }
.tool-chat__msg--in { justify-self: start; background: #202c33; color: #e9edef; border-top-left-radius: 2px; }
.tool-chat__msg--out { justify-self: end; background: #005c4b; color: #e9edef; border-top-right-radius: 2px; }
.tool-chat__msg small { display: block; margin-top: 3px; color: #8696a0; font-size: 10.5px; text-align: right; }

@media (max-width: 640px) {
  .tool-crm__head, .tool-crm__row { grid-template-columns: 1fr 1fr; }
  .tool-crm__head span:last-child, .tool-crm__row span:last-child { display: none; }
}

/* =========================================================
   DEEP-DIVE ADDITIONS
   Shared by the four case-study routes. Everything below reuses
   the tool-surface palettes above; no new brand colours.
   ========================================================= */

/* ---- n8n: a deliberately disabled node and its severed wire ---- */
.tool-n8n__node.is-off { opacity: 0.55; background: #1f1f2b; box-shadow: inset 0 0 0 1px #3a3a4e; }
.tool-n8n__node.is-off strong { color: #8b8b9e; text-decoration: line-through; }
.tool-n8n__node.is-off::before { background: #3a3a4e; }
.tool-n8n__wires path.is-cut { stroke-dasharray: 5 7; opacity: 0.5; }

/* ---- chat: system notes + call variant ---- */
.tool-chat__msg--sys {
  justify-self: center;
  max-width: 92%;
  padding: 4px 12px;
  border-radius: 6px;
  background: #182229;
  color: #8696a0;
  font-size: 11px;
  text-align: center;
}
/* Transcript window: fixed height, programmatically pinned to the newest
   message (renderChat sets scrollTop) — no user-facing nested scroller. */
.tool-chat__body { max-height: 320px; overflow: hidden; }

/* =========================================================
   NOTION-STYLE CRM BOARD (dark) — mirrors the real lead
   tracker's shape: status columns, lead cards, and a
   client detail panel with the agent-collected fields.
   All names, numbers and records are synthetic.
   ========================================================= */
.tool-board {
  --bd-bg: #191919;
  --bd-card: #232323;
  --bd-line: #2f2f2f;
  --bd-ink: #e8e6e3;
  --bd-dim: #9b9a97;
  border-radius: 12px;
  background: var(--bd-bg);
  color: var(--bd-ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.tool-board__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--bd-line);
  color: var(--bd-dim);
  font-size: 11.5px;
}
.tool-board__bar b { color: var(--bd-ink); font-weight: 600; }
.tool-board__tabs { display: flex; gap: 10px; margin-left: auto; font-size: 10.5px; }
.tool-board__tabs span { padding: 3px 8px; border-radius: 4px; }
.tool-board__tabs span.is-on { background: #2f2f2f; color: var(--bd-ink); }

.tool-board__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.tool-board__col { display: grid; align-content: start; gap: 7px; min-height: 150px; }
.tool-board__colhead { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--bd-dim); }
.tool-board__colhead i { width: 8px; height: 8px; border-radius: 50%; background: #4d5460; }
.tool-board__col[data-tone="blue"] .tool-board__colhead i { background: #4d79c9; }
.tool-board__col[data-tone="red"] .tool-board__colhead i { background: #c9504d; }
.tool-board__col[data-tone="green"] .tool-board__colhead i { background: #4dab72; }
.tool-board__colhead b { color: var(--bd-ink); font-weight: 500; }
.tool-board__colhead small { margin-left: auto; font-size: 10.5px; }

.tool-board__card {
  display: grid; gap: 5px;
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--bd-card);
  box-shadow: inset 0 0 0 1px #303030;
  font-size: 12px;
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.tool-board__card strong { font-weight: 500; font-size: 12.5px; }
.tool-board__card small { color: var(--bd-dim); font-size: 11px; }
.tool-board__tag {
  justify-self: start;
  padding: 1px 7px; border-radius: 4px;
  background: #3a3325; color: #d3b264;
  font-size: 10px;
}
.tool-board__tag--season { background: #253338; color: #7fb3c4; }
.tool-board__card.is-focus {
  box-shadow: inset 0 0 0 1.5px var(--color-accent), 0 0 24px color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translateY(-1px);
}
.tool-board__card.is-ghost { opacity: 0.4; }
button.tool-board__card { text-align: left; cursor: pointer; color: inherit; border: 0; }
button.tool-board__card:hover { box-shadow: inset 0 0 0 1px #4a4a4a; }

/* client detail panel — the agent-collected record */
.tool-board__detail {
  border-top: 1px solid var(--bd-line);
  padding: 12px 14px 14px;
  display: grid;
  gap: 3px;
}
.tool-board__dhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.tool-board__dhead strong { font-size: 15px; font-weight: 600; }
.tool-board__dhead small { color: var(--bd-dim); font-size: 11px; }
.tool-board__props { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.tool-board__prop {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 10px; align-items: baseline;
  min-height: 24px;
  font-size: 12px;
}
.tool-board__prop--wide { grid-column: 1 / -1; grid-template-columns: 92px 1fr; }
@media (max-width: 640px) { .tool-board__props { grid-template-columns: 1fr; } }
.tool-board__prop dt { color: var(--bd-dim); }
.tool-board__prop dd { margin: 0; }
.tool-board__prop dd.is-empty { color: #6b6a67; }
.tool-board__pill { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; background: #2f2f2f; color: var(--bd-dim); }
.tool-board__pill--bot { background: #3a3325; color: #d3b264; }
.tool-board__pill--human { background: #3d2626; color: #e08a86; }
.tool-board__pill--go { background: #24382c; color: #7cc394; }
.tool-board__log {
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 7px;
  background: #202020;
  display: grid; gap: 5px;
  font-size: 11.5px;
  color: var(--bd-dim);
}
.tool-board__log i { font-style: normal; animation: pf-rise 300ms var(--ease-out) backwards; }
.tool-board__log b { color: var(--bd-ink); font-weight: 500; }

@media (max-width: 640px) {
  .tool-board__cols { grid-template-columns: 1fr 1fr; }
  .tool-board__col:nth-child(3) { display: none; }
  .tool-board__prop { grid-template-columns: 96px 1fr; }
}

/* =========================================================
   CALL UI — a phone screen, not a chat: status, timer,
   waveform, live transcript, call controls.
   ========================================================= */
.tool-callui {
  border-radius: 14px;
  background:
    radial-gradient(140% 100% at 50% 0%, #16233c 0%, #0b1220 55%, #080d18 100%);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 0 0 1px #1c2942;
  overflow: hidden;
  color: #dfe7f4;
}
.tool-callui__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7d8ca6;
}
.tool-callui__timer { color: #dfe7f4; font-size: 0.78rem; letter-spacing: 0.06em; }
.tool-callui__id { display: grid; justify-items: center; gap: 6px; padding: 14px 16px 4px; text-align: center; }
.tool-callui__avatar {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #1C3F8A, #12264f);
  color: #f4ede0;
  font-size: 20px;
  font-family: var(--font-display);
}
.tool-callui.is-live .tool-callui__avatar::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  animation: callui-ring 2.2s ease-out infinite;
}
@keyframes callui-ring { from { transform: scale(0.82); opacity: 1; } to { transform: scale(1.18); opacity: 0; } }
.tool-callui__id strong { font-size: 0.98rem; font-weight: var(--fw-medium); letter-spacing: -0.01em; }
.tool-callui__id small { color: #7d8ca6; font-size: 0.72rem; }

.tool-callui__wave {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 34px;
  padding: 2px 16px 8px;
}
.tool-callui__wave i {
  width: 3px; height: 30%;
  border-radius: 999px;
  background: #35507e;
  transition: height 260ms var(--ease-out), background 260ms var(--ease-out);
}
.tool-callui.is-live .tool-callui__wave i {
  background: color-mix(in srgb, var(--color-accent) 75%, #35507e);
  animation: callui-wave 1.15s ease-in-out infinite;
  animation-delay: calc(var(--w, 0) * 90ms);
}
@keyframes callui-wave { 0%, 100% { height: 22%; } 50% { height: var(--wh, 78%); } }

/* transcript: pinned to the newest line programmatically */
.tool-callui__log {
  max-height: 240px;
  overflow: hidden;
  display: grid; gap: 9px;
  padding: 12px 18px;
  border-top: 1px solid #1c2942;
  background: rgba(4, 8, 16, 0.45);
}
.tool-callui__line { display: grid; gap: 2px; font-size: 0.85rem; line-height: 1.5; animation: pf-rise 320ms var(--ease-out) backwards; }
.tool-callui__line small {
  color: #7d8ca6;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tool-callui__line--arden small { color: color-mix(in srgb, var(--color-accent) 80%, #7d8ca6); }
.tool-callui__line--sys {
  padding: 5px 10px;
  border-radius: 6px;
  background: #101a2e;
  color: #8fa0be;
  font-size: 0.74rem;
  justify-self: center;
  text-align: center;
}
.tool-callui__line p { margin: 0; color: #dfe7f4; }

.tool-callui__controls {
  display: flex; justify-content: center; gap: 18px;
  padding: 12px 16px 16px;
  border-top: 1px solid #1c2942;
}
.tool-callui__controls i {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #131e33;
  color: #7d8ca6;
  font-style: normal;
  font-size: 15px;
}
.tool-callui__controls i.is-end { background: #52201f; color: #f0b1ad; }

/* =========================================================
   OPERATIONS COCKPIT — the owner's dashboard shape:
   greeting, hot counters, priorities, risk.
   ========================================================= */
.tool-cockpit {
  border-radius: 12px;
  background: #0c0d10;
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 0 0 1px #1d1f26;
  color: #e7e3da;
  overflow: hidden;
}
.tool-cockpit__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #1d1f26;
  color: #8b8878;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tool-cockpit__hots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px 6px; }
.tool-cockpit__hot {
  display: grid; gap: 2px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid #26282f;
  background: #101116;
}
.tool-cockpit__hot small { color: #8b8878; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tool-cockpit__hot strong { font-size: 1.5rem; font-weight: 500; color: #e3c069; font-variant-numeric: tabular-nums; }
.tool-cockpit__hot--calm strong { color: #79c79b; }
.tool-cockpit__rows { display: grid; gap: 1px; padding: 10px 16px 14px; }
.tool-cockpit__row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-left: 2px solid #2c2e36;
  background: #101116;
  font-size: 0.82rem;
}
.tool-cockpit__row strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tool-cockpit__row span { color: #a9a496; }
.tool-cockpit__row em { font-style: normal; padding: 2px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tool-cockpit__row--hot { border-left-color: #c9504d; }
.tool-cockpit__row--hot em { background: #33201f; color: #e08a86; }
.tool-cockpit__row--warm { border-left-color: #e3c069; }
.tool-cockpit__row--warm em { background: #322b18; color: #e3c069; }
.tool-cockpit__row--ok { border-left-color: #4dab72; }
.tool-cockpit__row--ok em { background: #1d2f24; color: #79c79b; }

/* =========================================================
   HANDOFF QUEUE — bot paused, human owed a reply
   ========================================================= */
.pf-handq { display: grid; gap: 8px; }
.pf-handq__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--pf-rule);
  border-left: 2px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  transition: border-color var(--dur-base), opacity var(--dur-base);
}
.pf-handq__row strong { display: block; font-size: 0.9rem; font-weight: var(--fw-medium); }
.pf-handq__row small { color: var(--color-text-muted); font-size: 0.76rem; }
.pf-handq__row button {
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--pf-rule); border-radius: 999px;
  background: none; color: var(--color-text);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.pf-handq__row button:hover { border-color: var(--color-accent); }
.pf-handq__row.is-taken { border-left-color: #58c9a0; }
.pf-handq__row.is-taken button { border-color: transparent; color: #58c9a0; cursor: default; }
.pf-handq__empty {
  padding: 18px 15px;
  border: 1px dashed var(--pf-rule);
  color: var(--color-text-dim);
  font-size: 0.82rem;
  text-align: center;
}

/* =========================================================
   SWIPE DECK — the closing picker. One problem in focus,
   neighbours dimmed; sideways scroll with snap. The track is
   a native horizontal scroller (no wheel hijack, page keeps
   scrolling vertically).
   ========================================================= */
.pf-decksec { position: relative; padding: clamp(80px, 12vh, 150px) 0 clamp(90px, 13vh, 160px); border-top: 1px solid var(--pf-rule); overflow: hidden; }
.pf-deck { position: relative; margin-top: clamp(30px, 5vh, 54px); }
.pf-deck__track {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 8px max(calc(50% - min(240px, 39vw)), 20px) 22px;
  scrollbar-width: none;
}
.pf-deck__track::-webkit-scrollbar { display: none; }
.pf-deckcard {
  --focus: 0;
  flex: 0 0 min(480px, 78vw);
  scroll-snap-align: center;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--color-text);
  text-decoration: none;
  transform: scale(calc(0.9 + var(--focus) * 0.1));
  opacity: calc(0.38 + var(--focus) * 0.62);
  filter: blur(calc((1 - var(--focus)) * 2px));
  transition: border-color var(--dur-base);
  will-change: transform, opacity, filter;
}
.pf-deckcard[style*="--focus: 1"], .pf-deckcard:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.pf-deckcard__kicker { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pf-deckcard strong { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.pf-deckcard p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.55; }
.pf-deckcard__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  color: var(--color-text);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-accent);
  align-self: start; justify-self: start;
  min-height: 34px;
}
.pf-deckcard__go i { font-style: normal; transition: translate var(--dur-base) var(--ease-out); }
.pf-deckcard:hover .pf-deckcard__go i { translate: 4px 0; }
.pf-deckcard__meta { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; }

.pf-deck__nav { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.pf-deck__nav button {
  width: 46px; height: 46px;
  border: 1px solid var(--pf-rule); border-radius: 50%;
  background: none; color: var(--color-text);
  font-size: 17px; cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.pf-deck__nav button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pf-deck::before, .pf-deck::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(20px, 6vw, 90px); z-index: 2; pointer-events: none;
}
.pf-deck::before { left: 0; background: linear-gradient(90deg, var(--color-bg), transparent); }
.pf-deck::after { right: 0; background: linear-gradient(270deg, var(--color-bg), transparent); }

/* =========================================================
   HERO MOTIFS — one distinct atmosphere per case study
   ========================================================= */
/* chat bubbles drifting (enrollment) */
.pf-hero__motif { position: absolute; inset: 0; pointer-events: none; }
.pf-hero__motif--chat i {
  position: absolute;
  width: clamp(120px, 16vw, 230px);
  height: clamp(34px, 4.4vw, 56px);
  border-radius: 14px;
  opacity: 0.1;
  background: #58c9a0;
  animation: motif-drift 14s ease-in-out infinite alternate;
}
.pf-hero__motif--chat i:nth-child(odd) { border-top-left-radius: 3px; background: #7fb3c4; }
.pf-hero__motif--chat i:nth-child(even) { border-top-right-radius: 3px; }
.pf-hero__motif--chat i:nth-child(1) { right: 8%; top: 22%; }
.pf-hero__motif--chat i:nth-child(2) { right: 16%; top: 38%; animation-delay: -4s; }
.pf-hero__motif--chat i:nth-child(3) { right: 5%; top: 55%; animation-delay: -8s; }
@keyframes motif-drift { from { transform: translateY(0); } to { transform: translateY(-16px); } }

/* node canvas (gap detector) */
.pf-hero__motif--canvas {
  background:
    radial-gradient(#2b2b3a 1px, transparent 1.4px) 0 0 / 26px 26px;
  mask-image: linear-gradient(100deg, transparent 0 30%, #000 70%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0 30%, #000 70%);
  opacity: 0.55;
}
.pf-hero__motif--canvas i {
  position: absolute;
  width: 84px; height: 34px;
  border-radius: 7px;
  background: #262635;
  box-shadow: inset 0 0 0 1px #35354a;
  opacity: 0.5;
  animation: motif-drift 16s ease-in-out infinite alternate;
}
.pf-hero__motif--canvas i:nth-child(1) { right: 12%; top: 26%; }
.pf-hero__motif--canvas i:nth-child(2) { right: 24%; top: 46%; animation-delay: -6s; box-shadow: inset 0 0 0 1px #ff6d5a; }
.pf-hero__motif--canvas i:nth-child(3) { right: 7%; top: 62%; animation-delay: -11s; }

/* waveform (voice) */
.pf-hero__motif--wave { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 9%; }
.pf-hero__motif--wave i {
  width: 4px; height: 12%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
  opacity: 0.5;
  animation: callui-wave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--w, 0) * 130ms);
}
@media (max-width: 900px) {
  .pf-hero__motif { opacity: 0.5; }
  .pf-hero__motif--wave { padding-right: 4%; }
}

/* =========================================================
   ALSO-RUNNING CARDS — distinct mini-surfaces per card
   ========================================================= */
.pf-cap__mini { display: grid; gap: 5px; margin-top: 6px; }
.pf-cap__mini--call { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.pf-cap__mini--call b {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #131e33; color: var(--color-accent);
  font-family: var(--font-display); font-weight: var(--fw-regular);
}
.pf-cap__mini--call span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.5; }
.pf-cap__mini--bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.pf-cap__mini--bars i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #3d7fd6, #23456f); }
.pf-cap__mini--rows { gap: 4px; }
.pf-cap__mini--rows i {
  height: 9px; border-radius: 3px;
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
  font-style: normal;
}
.pf-cap__mini--rows i:first-child { width: 82%; background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.pf-cap__mini--rows i:nth-child(2) { width: 64%; }
.pf-cap__mini--rows i:last-child { width: 73%; }
.pf-cap__mini--nodes { grid-template-columns: repeat(4, auto) 1fr; align-items: center; gap: 0; }
.pf-cap__mini--nodes i {
  width: 11px; height: 11px; border-radius: 3px;
  background: #262635; box-shadow: inset 0 0 0 1px #35354a;
  font-style: normal;
}
.pf-cap__mini--nodes i:nth-child(2) { box-shadow: inset 0 0 0 1px var(--color-accent); }
.pf-cap__mini--nodes b { height: 1px; width: 16px; margin: 0 2px; background: #35354a; }

/* =========================================================
   STICKY FIT — a pinned console must never be taller than
   the window it is pinned inside, or its head scrolls up
   under the navigation and the visitor never sees it.
   ========================================================= */
.pf-stage__sticky { max-height: calc(100vh - 116px); display: flex; }
.pf-stage__sticky > .pf-console { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.pf-console > * { flex: none; }
/* The surface is the part that gives: it compresses, the chrome never does. */
.pf-console > .tool-board,
.pf-console > .tool-chat,
.pf-console > .tool-callui,
.pf-console > .tool-n8n,
.pf-console > .tool-crm,
.pf-console > .tool-notion,
.pf-console > .pf-surfaces { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tool-board__cols { flex: none; }
.tool-board__detail { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tool-callui__log, .tool-chat__body { flex: 1 1 auto; min-height: 0; }

@media (max-height: 900px) {
  .pf-stream { min-height: 76px; max-height: 76px; padding-top: 9px; padding-bottom: 9px; }
  .tool-board__cols { padding: 9px; gap: 7px; }
  .tool-board__col { min-height: 0; }
  .tool-board__log { max-height: 84px; overflow: hidden; }
  /* Compact the record rather than clip it: every field the story refers to
     has to survive a laptop-height window. */
  .tool-board__detail { padding: 9px 12px 11px; }
  .tool-board__prop { min-height: 20px; font-size: 11.5px; }
  .tool-board__dhead { margin-bottom: 4px; }
  .tool-board__dhead strong { font-size: 13.5px; }
  .tool-board__card { padding: 7px 9px; }
  .tool-board__card small { display: none; }
  .tool-callui__id { padding-top: 9px; }
  .tool-callui__avatar { width: 44px; height: 44px; font-size: 17px; }
  .tool-callui__wave { height: 26px; }
}
@media (max-height: 760px) {
  .pf-stream { min-height: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  .tool-board__log { display: none; }
  .tool-callui__controls { padding: 8px 16px 10px; }
  .tool-callui__controls i { width: 34px; height: 34px; font-size: 13px; }
}

/* =========================================================
   REALISTIC n8n CANVAS — node tiles with icons and ports,
   bezier wires that carry a running pulse, and the toolbar
   the tool actually has.
   ========================================================= */
.tool-n8n__bar { justify-content: flex-start; gap: 14px; }
.tool-n8n__tabs { display: flex; gap: 12px; margin-left: auto; }
.tool-n8n__tabs span { opacity: 0.5; }
.tool-n8n__tabs span.is-on { opacity: 1; color: #e9e9f2; box-shadow: inset 0 -1px 0 0 #ff6d5a; }
.tool-n8n__zoom { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 5px; z-index: 3; }
.tool-n8n__zoom i {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: #22222f;
  box-shadow: inset 0 0 0 1px #33334a;
  color: #7c7c93;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

/* node: icon tile + stacked labels, ports on both edges */
.tool-n8n__node {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 11px 8px 8px;
  border-radius: 8px;
  background: #2a2a3a;
  box-shadow: inset 0 0 0 1px #383850, 0 6px 16px rgba(0,0,0,0.35);
}
.tool-n8n__node b {
  grid-row: 1 / 3;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: #1d1d29;
  box-shadow: inset 0 0 0 1px #3d3d55;
  color: #9a9ab5;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.tool-n8n__node.is-hot { background: #33202a; box-shadow: inset 0 0 0 1px #ff6d5a, 0 0 26px rgba(255,109,90,0.3); transform: translateY(-2px); }
.tool-n8n__node.is-hot b { background: #ff6d5a; color: #1a1a24; box-shadow: none; }
.tool-n8n__node::after {
  content: ""; position: absolute; right: -4px; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%; background: #3d3d4f;
  transition: background 300ms var(--ease-out);
}
.tool-n8n__node.is-hot::after { background: #ff6d5a; }
.tool-n8n__node.is-off::after, .tool-n8n__node.is-off::before { background: #34344a; }

/* wires: idle grey, hot coral, and a pulse that travels while running */
.tool-n8n__wires path { stroke-width: 1.8; }
.tool-n8n__wires path.is-hot { stroke: #ff6d5a; filter: drop-shadow(0 0 4px rgba(255,109,90,0.4)); }
.tool-n8n__wires path.is-hot.is-running {
  stroke-dasharray: 5 9;
  animation: n8n-flow 700ms linear infinite;
}
@keyframes n8n-flow { to { stroke-dashoffset: -14; } }

/* the disabled node reads as switched off, not merely dim */
.tool-n8n__node.is-off { background: #202029; box-shadow: inset 0 0 0 1px #33334a; }
.tool-n8n__node.is-off b { background: #191921; color: #55556e; }
.tool-n8n__node.is-off strong { color: #6f6f88; text-decoration: line-through; }

/* =========================================================
   CINEMATIC FOCUS — the landing page's diagnosis grammar,
   reused: a tall section pins its stage and scroll decides
   which card is lit. Neighbours blur out of the way.
   ========================================================= */
.pf-cine { position: relative; }
.pf-cine__rail { height: 340vh; }
.pf-cine__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
  gap: clamp(20px, 3vh, 38px);
  overflow: hidden;
}
.pf-cine__head { text-align: center; }
.pf-cine__head .pf-chapter__num { justify-content: center; }
.pf-cine__deck { position: relative; min-height: clamp(280px, 42vh, 420px); }
.pf-cine__card {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  padding: 0 clamp(20px, 5vw, 60px);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 34px, 0) scale(0.96);
  transition: opacity 620ms var(--ease-out), filter 620ms var(--ease-out), transform 620ms var(--ease-out);
  pointer-events: none;
}
.pf-cine__card.is-live { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }
.pf-cine__card.is-past { opacity: 0; filter: blur(10px); transform: translate3d(0, -34px, 0) scale(0.96); }
.pf-cine__card .pf-deckcard__kicker { letter-spacing: 0.2em; }
.pf-cine__card strong {
  max-width: 18ch;
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pf-cine__card p { max-width: 52ch; margin: 0; color: var(--color-text-muted); font-size: clamp(0.95rem, 1.2vw, 1.12rem); line-height: 1.6; }
.pf-cine__card .pf-deckcard__meta { color: var(--color-text-dim); }
.pf-cine__card .pf-deckcard__go {
  margin-top: 8px;
  padding: 0 22px;
  min-height: 50px;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  font-size: 0.9rem;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.pf-cine__card .pf-deckcard__go:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); transform: translateY(-2px); }

/* the progress rail: one tick per card, filling as you pass it */
.pf-cine__ticks { display: flex; justify-content: center; gap: 9px; }
.pf-cine__ticks button {
  position: relative;
  width: 44px; height: 26px;
  padding: 0;
  border: 0; background: none;
  cursor: pointer;
}
.pf-cine__ticks button::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px;
  translate: 0 -50%;
  background: color-mix(in srgb, var(--color-text) 16%, transparent);
  transition: background 380ms var(--ease-out), scale 380ms var(--ease-out);
}
.pf-cine__ticks button.is-live::after { background: var(--color-accent); scale: 1 2; }
.pf-cine__ticks button.is-past::after { background: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.pf-cine__hint {
  display: grid; justify-items: center; gap: 7px;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pf-cine__hint i { width: 1px; height: 22px; background: linear-gradient(var(--color-accent), transparent); animation: cine-hint 2.4s ease-in-out infinite; }
@keyframes cine-hint { 0%, 100% { opacity: 0.25; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  /* No pinning on phones: the cards become a plain readable stack. */
  .pf-cine__rail { height: auto; }
  .pf-cine__stage { position: static; height: auto; padding: clamp(50px, 8vh, 90px) 0; }
  .pf-cine__deck { min-height: 0; display: grid; gap: 18px; }
  /* .is-live / .is-past carry higher specificity than a bare class, so the
     stacked fallback has to name them or passed cards stay invisible here. */
  .pf-cine__card,
  .pf-cine__card.is-live,
  .pf-cine__card.is-past {
    position: static;
    opacity: 1; filter: none; transform: none; pointer-events: auto;
    justify-items: start; text-align: left;
    gap: 11px;
    padding: clamp(22px, 5vw, 30px);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
  }
  .pf-cine__card strong { font-size: clamp(1.3rem, 5.6vw, 1.7rem); max-width: none; }
  .pf-cine__ticks, .pf-cine__hint { display: none; }
}

/* =========================================================
   MOTION LAYER — entrances, hovers, presses, loading.
   Everything here is decoration: it never gates content,
   and it all stops under prefers-reduced-motion.
   ========================================================= */

/* --- entrance: stagger children of a revealed group --- */
[data-pf-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-pf-stagger].is-in > * { opacity: 1; transform: none; }

/* --- hover: cards lift and their edge catches the light --- */
.pf-pick, .pf-cap, .pf-trail a, .pf-deckcard, .tool-board__card, .pf-handq__row {
  will-change: transform;
}
.pf-cap:hover, .pf-trail a:hover { transform: translateY(-3px); }
.pf-cap { transition: border-color var(--dur-base), background var(--dur-base), transform 420ms var(--ease-out); }
.pf-trail a { transition: border-color var(--dur-base), background var(--dur-base), transform 420ms var(--ease-out); }
.pf-cap::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}
.pf-cap:hover::after { opacity: 1; }

/* --- press: buttons acknowledge the click physically --- */
.btn, .pf-chip, .pf-handq__row button, .pf-scan__row--lab button, .pf-deck__nav button {
  transition: transform 160ms var(--ease-out), border-color var(--dur-base), background var(--dur-base), color var(--dur-base), opacity var(--dur-base);
}
.btn:active:not(:disabled), .pf-chip:active:not(:disabled), .pf-handq__row button:active, .pf-scan__row--lab button:active { transform: scale(0.965); }
.btn:disabled { opacity: 0.42; }

/* ripple from the pointer position */
.pf-ripple { position: relative; overflow: hidden; }
.pf-ripple > .pf-ripple__ink {
  position: absolute;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 26%, transparent);
  pointer-events: none;
  animation: pf-ripple 620ms var(--ease-out) forwards;
}
@keyframes pf-ripple { to { transform: scale(24); opacity: 0; } }

/* --- loading: a working strip while a lab computes --- */
.pf-working {
  position: relative;
  overflow: hidden;
  height: 2px;
  margin: -2px 0 0;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.pf-working::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform: translateX(-100%);
  animation: pf-sweep 1.05s var(--ease-out) infinite;
}
@keyframes pf-sweep { to { transform: translateX(100%); } }
.pf-skeleton {
  border-radius: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-text) 6%, transparent) 25%,
    color-mix(in srgb, var(--color-text) 13%, transparent) 37%,
    color-mix(in srgb, var(--color-text) 6%, transparent) 63%);
  background-size: 340% 100%;
  animation: pf-shimmer 1.35s ease-in-out infinite;
  color: transparent !important;
}
@keyframes pf-shimmer { from { background-position: 100% 0; } to { background-position: -140% 0; } }

/* --- micro-interaction: a value that just changed says so --- */
.pf-pop { animation: pf-pop 620ms var(--ease-out); }
@keyframes pf-pop {
  0% { transform: scale(1); }
  28% { transform: scale(1.09); color: var(--color-accent); }
  100% { transform: scale(1); }
}
.pf-shake { animation: pf-shake 420ms var(--ease-out); }
@keyframes pf-shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
/* an old value crossed out beside its replacement */
.pf-was {
  margin-left: 8px;
  color: var(--color-text-dim);
  font-size: 0.78em;
  text-decoration: line-through;
  animation: pf-rise 320ms var(--ease-out) backwards;
}

/* --- toast: the sentence that explains what just happened --- */
.pf-toasts {
  position: fixed;
  left: 50%; bottom: 24px;
  translate: -50% 0;
  z-index: 60;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.pf-toast {
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 560px);
  padding: 12px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  color: var(--color-text);
  font-size: 0.86rem;
  line-height: 1.4;
  animation: pf-toast-in 420ms var(--ease-out) backwards;
}
.pf-toast.is-out { animation: pf-toast-out 320ms var(--ease-out) forwards; }
.pf-toast i {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.pf-toast--ok i { background: #58c9a0; }
.pf-toast--hold i { background: var(--color-accent); }
.pf-toast--stop i { background: var(--portfolio-danger, #C4553D); }
@keyframes pf-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes pf-toast-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* --- mouse: consoles tilt a degree toward the pointer --- */
.pf-tilt { transition: transform 520ms var(--ease-out); transform-style: preserve-3d; }
.pf-tilt.is-tracking { transition: transform 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  [data-pf-stagger] > * { opacity: 1; transform: none; transition: none; }
  .pf-cap:hover, .pf-trail a:hover { transform: none; }
  .pf-working::after, .pf-skeleton, .pf-cine__hint i { animation: none; }
  .pf-pop, .pf-shake, .pf-toast { animation: none; }
  .pf-tilt { transform: none !important; }
  .tool-n8n__wires path.is-hot.is-running { animation: none; }
}

/* =========================================================
   FILMSTRIP — the second cinematic grammar. Vertical scroll
   drives a horizontal pan across the running capabilities,
   so it reads differently from the crossfade deck above it.
   ========================================================= */
.pf-strip__rail { height: 300vh; position: relative; }
.pf-strip__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: grid;
  /* minmax(0, 1fr) keeps the track at viewport width so its cards overflow
     sideways and there is something left to pan. A default auto track would
     simply grow to fit them and nothing would ever move. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(22px, 4vh, 44px);
  overflow: hidden;
}
.pf-strip__head { padding: 0 clamp(20px, 5vw, 80px); }
.pf-strip__head h2 { margin: 10px 0 0; }
.pf-strip__track {
  display: flex;
  gap: clamp(16px, 2.4vw, 30px);
  /* Half a card of gutter, so the first card is centred at rest and the last
     one is centred when the pan finishes. */
  padding: 0 max(calc(50% - min(200px, 37vw)), 20px);
  min-width: 0;
  will-change: transform;
}
/* No transform transition here: the pan is repainted every scroll frame, and a
   transition would only make the card highlight trail the movement. */
.pf-stripcard { transition: border-color var(--dur-base), background var(--dur-base), opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.pf-stripcard {
  --lit: 0;
  flex: 0 0 min(400px, 74vw);
  display: grid;
  align-content: start;
  gap: 13px;
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--color-text);
  text-decoration: none;
  opacity: calc(0.42 + var(--lit) * 0.58);
  transform: scale(calc(0.94 + var(--lit) * 0.06));
  transition: border-color var(--dur-base), background var(--dur-base);
}
.pf-stripcard:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.pf-stripcard__num {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pf-stripcard strong { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: var(--fw-medium); letter-spacing: -0.02em; line-height: 1.18; }
.pf-stripcard p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.55; }
.pf-stripcard .pf-cap__mini { margin-top: 2px; }
.pf-stripcard__go {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  color: var(--color-text);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-accent);
  justify-self: start;
}
.pf-stripcard__go i { font-style: normal; transition: translate var(--dur-base) var(--ease-out); }
.pf-stripcard:hover .pf-stripcard__go i { translate: 4px 0; }
.pf-strip__progress { height: 2px; margin: 0 clamp(20px, 5vw, 80px); background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.pf-strip__progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--color-accent); transition: width 120ms linear; }

@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  .pf-strip__rail { height: auto; }
  .pf-strip__stage { position: static; height: auto; padding: clamp(60px, 9vh, 100px) 0; }
  .pf-strip__track { flex-direction: column; transform: none !important; }
  .pf-stripcard { flex: none; opacity: 1; transform: none; }
  .pf-strip__progress { display: none; }
}

/* trail: end-of-page routes into the rest of the portfolio */
.pf-trail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(30px, 5vh, 48px); }
.pf-trail a {
  display: grid; gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--pf-rule);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.pf-trail a:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.pf-trail small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; }
.pf-trail strong { font-size: 0.92rem; font-weight: var(--fw-medium); }
@media (max-width: 760px) { .pf-trail { grid-template-columns: 1fr; } }

/* ---- operational state strip under a tool surface ---- */
.pf-ops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--pf-rule);
  border-top: 1px solid var(--pf-rule);
}
.pf-ops > div { display: grid; align-content: start; gap: 5px; padding: 12px 16px; background: color-mix(in srgb, var(--color-bg) 78%, transparent); }
.pf-ops small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; }
.pf-ops strong { color: var(--color-text); font-size: 0.84rem; font-weight: var(--fw-medium); letter-spacing: -0.01em; line-height: 1.35; }
.pf-ops strong.is-hold { color: var(--color-accent); }

/* ---- selectable chips (products, sessions, scenarios, reasons) ---- */
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--pf-rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.pf-chip small { display: block; color: var(--color-text-dim); font-size: 0.6rem; }
.pf-chip:hover { border-color: color-mix(in srgb, var(--color-text) 30%, transparent); color: var(--color-text); }
.pf-chip[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-text); }
.pf-chip:disabled { opacity: 0.4; cursor: default; }
.pf-chip.is-gone { opacity: 0.4; text-decoration: line-through; cursor: default; }

/* ---- hands-on lab: two-column panel body ---- */
.pf-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 30px); align-items: start; min-width: 0; }
.pf-lab__col { display: grid; gap: 14px; align-content: start; min-width: 0; }
/* Form controls must shrink with their grid track: number inputs otherwise
   refuse to go below their ~20ch default and blow the panel open on phones. */
.pf-field input, .pf-field select { width: 100%; min-width: 0; }
.pf-fields-row > * { min-width: 0; }
.pf-lab__title { margin: 0; color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pf-field select,
.pf-field input[type="number"] {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.pf-field select:focus-visible,
.pf-field input[type="number"]:focus-visible { border-color: var(--color-accent); outline: none; }
.pf-field select option { background: #0d1626; color: #f4ede0; }
.pf-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- storefront card art (only AV-104 has photography) ---- */
.pf-art { position: relative; aspect-ratio: 1; margin-bottom: 12px; border-radius: 10px; overflow: hidden; background: #121a2a; }
.pf-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-art--vessel { background: radial-gradient(95% 75% at 32% 24%, #35507e 0%, #16223a 58%, #0c1424 100%); }
.pf-art--vessel::after {
  content: "";
  position: absolute; left: 50%; top: 56%;
  width: 34%; height: 54%;
  translate: -50% -50%;
  border-radius: 46% 46% 40% 40% / 62% 62% 32% 32%;
  background: linear-gradient(163deg, #ddd6c7 8%, #a49b87 52%, #6f6753 100%);
}
.pf-art--archive { background: linear-gradient(150deg, #1a2436, #0a101d 65%); }
.pf-art--archive::after {
  content: "";
  position: absolute; inset: 20% 24%;
  background:
    linear-gradient(0deg, transparent 0 8%, #d4a437 8% 10%, transparent 10%),
    repeating-linear-gradient(0deg, #202c42 0 16%, #141d30 16% 20%);
  border-radius: 4px;
}

/* ---- gap-lab table rows: name + reason + inspect ---- */
.pf-scan__row--lab { grid-template-columns: 64px minmax(0, 1fr) auto; }
.pf-scan__row--lab button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--pf-rule);
  border-radius: 999px;
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.pf-scan__row--lab button:hover { color: var(--color-text); }
.pf-scan__row--lab button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-text); }
.pf-scan__row.is-approved { background: color-mix(in srgb, #58c9a0 10%, transparent); }
.pf-scan__row.is-approved small { color: #58c9a0; }

/* ---- lab activity log (same voice as the console stream) ---- */
.pf-lablog {
  display: grid;
  gap: 4px;
  min-height: 70px;
  max-height: 132px;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--pf-rule);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
}
.pf-lablog i { display: block; color: var(--color-text-muted); font-style: normal; animation: pf-rise 300ms var(--ease-out) backwards; }
.pf-lablog i.is-ok { color: #58c9a0; }
.pf-lablog i.is-hold { color: var(--color-accent); }

@media (max-width: 900px) {
  .pf-lab { grid-template-columns: 1fr; }
  .pf-ops { grid-template-columns: 1fr; }
  .pf-ops > div { padding: 10px 14px; }
}

/* ============================================================
   SECTION LIGHT & DEPTH
   Several sections were flat colour with only a hairline rule
   between them: correct, but lifeless, and the page read as
   simpler than the work it describes. The fix is atmosphere,
   not decoration — one soft bloom per section, alternating
   side so the eye travels, plus a lifted edge on surfaces that
   were previously drawn with a single 1px border.

   Palette stays Blue (structure) and Brass (the jewel). Nothing
   here introduces a new hue, and every bloom is under 8% alpha.
   ============================================================ */

/* --- one soft light per section, alternating side --- */
.pf-stage,
.pf-chapter,
.pf-decksec,
.pf-strip__rail {
  position: relative;
  isolation: isolate;
  /* The blooms bleed past the section edge on purpose. `clip` contains that
     without creating a scroll container, so the pinned consoles inside keep
     working — `hidden` or `auto` here would silently kill position: sticky. */
  overflow-x: clip;
  overflow-y: visible;
}

.pf-stage::before,
.pf-chapter::before,
.pf-decksec::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -10%;
  width: min(760px, 78vw);
  height: min(760px, 70vh);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-mark) 34%, transparent) 0%,
    transparent 68%);
  opacity: 0.5;
  filter: blur(var(--amb-blur, 80px));
  pointer-events: none;
}
/* Alternate the side so consecutive sections don't stack the same glow. */
.pf-stage--alt::before,
.pf-chapter--alt::before {
  right: auto;
  left: -12%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 20%, transparent) 0%,
    transparent 66%);
  opacity: 0.34;
}

/* The closing statement earns a warmer, centred light. */
.pf-close { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
.pf-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 50%;
  translate: -50% 0;
  width: min(900px, 92vw);
  height: min(560px, 62vh);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 16%, transparent) 0%,
    transparent 70%);
  filter: blur(var(--amb-blur, 80px));
  pointer-events: none;
}

/* --- surfaces that were a bare 1px box now catch a top light --- */
.pf-trail a,
.pf-pick,
.pf-deckcard,
.pf-stripcard,
.pf-handq__row {
  position: relative;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-text) 4%, transparent) 0%,
    transparent 42%);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--color-text) 9%, transparent),
    0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.pf-trail a:hover,
.pf-pick:hover,
.pf-deckcard:hover,
.pf-stripcard:hover {
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--color-accent) 30%, transparent),
    0 26px 56px -30px rgba(0, 0, 0, 0.95);
}

/* --- the live/accent moments actually glow --- */
.pf-status,
.pf-chip[aria-pressed="true"] {
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.pf-panel__live {
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--color-mark) 60%, transparent),
    0 0 18px 2px color-mix(in srgb, var(--color-mark) 45%, transparent);
}
.pf-cine__card.is-live strong { text-shadow: 0 0 60px color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* The tool surfaces are lit from their own world, so they only need to sit
   more convincingly on the page rather than glow. */
.tool-board, .tool-callui, .tool-cockpit, .tool-crm, .tool-notion, .tool-n8n, .tool-term, .tool-chat {
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--color-text) 6%, transparent),
    0 0 90px -40px color-mix(in srgb, var(--color-mark) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  /* Blooms are static, so they stay; only remove them if the user has also
     asked for a lighter page via the data attribute the shell sets. */
  [data-reduced-visuals="true"] .pf-stage::before,
  [data-reduced-visuals="true"] .pf-chapter::before,
  [data-reduced-visuals="true"] .pf-close::before { display: none; }
}

/* ============================================================
   n8n CANVAS ON PHONES
   The canvas positions eight nodes by percentage inside a 16:10
   box. At 375px that box is ~334x209, and once the node labels
   were raised to a readable 10px the nodes collided in eight
   places and two of them left the canvas entirely.

   Shrinking the text back is the wrong trade. A positioned graph
   simply does not fit a phone, so on small screens it becomes a
   vertical stack of the same nodes, in execution order. The wires
   carry no meaning once stacked, so they go; the shape of the
   workflow is still legible from the sequence and the labels.
   ============================================================ */
@media (max-width: 640px) {
  .tool-n8n__canvas {
    aspect-ratio: auto;
    display: grid;
    gap: 7px;
    padding: 12px;
  }
  .tool-n8n__wires,
  .tool-n8n__zoom { display: none; }
  .tool-n8n__node {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
  }
  /* The ports read as graph connectors; stacked, they are just dots. */
  .tool-n8n__node::before,
  .tool-n8n__node::after { display: none; }
  .tool-n8n__node strong { white-space: normal; font-size: 12px; }
  .tool-n8n__node small { font-size: 10px; }
  /* The hot node still leads the eye down the stack. */
  .tool-n8n__node.is-hot { transform: none; }
}

/* ============================================================
   "ALSO HERE" — plain navigation, deliberately not a section.
   The page previously ended with two blocks that both said
   "here are more things to explore" (a pinned deck and a
   filmstrip), and Voice appeared in both. The deck is the
   pitch; this row is just a way out to the smaller pages, and
   it is styled as links so it never competes for the same click.
   ============================================================ */
.pf-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  margin-top: clamp(34px, 6vh, 60px);
  padding-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--pf-rule);
}
.pf-more > span {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pf-more a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.pf-more a:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* The closing note carries the secondary contact now that the second
   button is gone; it should still read as a link. */
.pf-close__note a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); text-decoration: none; }
.pf-close__note a:hover { color: var(--color-accent); }