/* Partner pages: /for-agencies/, /workflow-usage/, /404.html.
   Same hand as the homepage: big editorial headings, a pixel stage in the
   hero that morphs from scene to scene, hairline rows instead of boxes,
   one continuous night (no colour bands; a quiet dotted seam between
   sections), and an arcade-at-night close.
   Rhythm, shared with the other inner pages: every section and close pads
   var(--sec-y) and opens on the dotted horizon (.seam, drawn in qs.css);
   page h1 66px, regular h2 44px, close h2 55px.
   Tokens only, so every theme works. */


/* ---------- Hero ---------- */
.pt-hero { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 96px); }
.pt-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pt-hero__in--stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 72px); align-items: center; }
.pt-hero__in--stage .pt-for { grid-column: 1 / -1; }
.pt-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pt-h1 { font: 400 66px/1.08 var(--pixel); letter-spacing: -.01em; max-width: 17ch; color: var(--fg-0); }   /* the site's page h1 */
.pt-h1--xl { font-size: 88px; line-height: 1.04; max-width: 15ch; }
.pt-nw { white-space: nowrap; }
.pt-cta { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 6px; }
.pt-cta .btn, .nf__book .btn { max-width: 100%; }
.pt-hero .lede { max-width: 58ch; }

/* ---------- The pixel stage ----------
   A canvas drawn by /for-agencies/pxstage.js: a low-resolution buffer at an
   integer scale, so every frame stays on the pixel grid. Without the script
   the fallback inside it shows instead. */
.pxs { position: relative; width: 100%; min-width: 0; margin: 0; }
.pxs canvas { display: none; margin: 0; image-rendering: pixelated; }
.pxs.is-live canvas { display: block; }
.pxs.is-live .pxs__alt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pt-hero__in--stage .pxs canvas, .pt-wu .pxs canvas, .nf__grid .pxs canvas { margin-inline: auto; }
/* pause: a quiet two-bar button in the stage's corner (a play arrow while paused) */
.pxs__pause { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--fg-2); cursor: pointer; }
.pxs__pause::before { content: ""; width: 3px; height: 12px; background: currentColor; box-shadow: 6px 0 0 currentColor; transform: translateX(-3px); }
.pxs__pause[aria-pressed="true"]::before { width: 10px; height: 12px; box-shadow: none; transform: none; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pxs__pause:hover, .pxs__pause:focus-visible { color: var(--fg-0); }
.pxs__pause:focus-visible { outline: 2px solid var(--fg-0); outline-offset: 2px; }
.pxs__pause[hidden] { display: none; }

/* Terminal window around a stage (for-agencies, 404), the homepage's hand:
   a 2px border with the title and the pause control set into it (btop
   style), a flat deep-night fill. */
.pxwin { --win-bg: var(--bg-0); position: relative; min-width: 0; padding: 26px 16px 24px; border: 2px solid var(--line-2); background: color-mix(in srgb, var(--bg-0) 52%, #020507); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-0) 80%, #000); }
.pxwin .win__t, .pxwin .pxs__pause { position: absolute; z-index: 2; padding: 0 8px; font: 400 11px/14px var(--pixel); letter-spacing: .06em; background: var(--win-bg); white-space: nowrap; }
.pxwin .win__t { top: -8px; left: 16px; color: var(--fg-1); }
.pxwin .win__t::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--rose, var(--accent)); animation: pulse 2.4s steps(2) infinite; }
.pxwin .pxs { position: static; }
.pxwin .pxs__pause { right: 16px; bottom: -8px; display: block; width: auto; height: 14px; color: var(--fg-2); }
.pxwin .pxs__pause[hidden] { display: none; }
.pxwin .pxs__pause::before, .pxwin .pxs__pause[aria-pressed="true"]::before { content: "pause"; width: auto; height: auto; background: none; box-shadow: none; transform: none; clip-path: none; }
.pxwin .pxs__pause[aria-pressed="true"]::before { content: "play"; }
.pxwin .pxs__pause::after { content: ""; position: absolute; inset: -15px 0; }
.pxwin .pxs__pause:focus-visible { outline-offset: 4px; }
[data-theme="paper"] .pxwin { background: var(--bg-1); box-shadow: 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) { .pxwin .win__t::before { animation: none; } }

/* The banded wordmark, the no-script fallback inside a stage. */
.pxw {
  --pb1: var(--fg-0); --pb2: var(--accent); --pb3: var(--info);
  --pb4: color-mix(in srgb, var(--accent) 58%, var(--bg-0)); --pb5: color-mix(in srgb, var(--accent) 36%, var(--bg-0));
  margin: 0; font: 400 66px/.9 var(--pixel); letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--pb1) 0 40%, var(--pb2) 40% 58%, var(--pb3) 58% 72%, var(--pb4) 72% 84%, var(--pb5) 84% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Who it's for: a hairline row at the foot of the hero ---------- */
.pt-for { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pt-for li { padding: 22px 28px 0 0; color: var(--fg-1); font-size: 16px; }
.pt-for b { display: block; font: 400 22px/1.2 var(--pixel); color: var(--fg-0); margin-bottom: 8px; font-weight: 400; }

/* ---------- Section rhythm ---------- */
.pt-sec { padding: var(--sec-y) 0; }
.pt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.pt-head--single { grid-template-columns: minmax(0, 1fr); max-width: 820px; gap: 18px; }
.pt-head .body-l { max-width: 52ch; }
.pt-h2 { font: 400 44px/1.14 var(--pixel); letter-spacing: -.01em; max-width: 20ch; }

/* ---------- Editorial rows (what you can resell) ---------- */
.pt-rows { list-style: none; margin: 0; padding: 0; }
.pt-rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 80px); padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.pt-rows > li:last-child { border-bottom: 1px solid var(--line); }
.pt-rows__tag { font: 500 15px/1.4 var(--sans); color: var(--fg-2); margin-bottom: 12px; }
.pt-rows__t { font: 400 44px/1.1 var(--pixel); }
.pt-rows__body { display: grid; gap: 18px; align-content: start; }
.pt-rows__body > p { color: var(--fg-1); font-size: 17px; max-width: 60ch; }
.pt-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--fg-1); font-size: 16px; }
.pt-ticks li { padding-left: 24px; position: relative; }
.pt-ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; background: var(--accent); }
.pt-ticks a { color: var(--fg-0); text-decoration-color: var(--accent); }

/* ---------- Plain rows (what the partner owns) ---------- */
.pt-sign { margin: 0 0 18px; font: 400 22px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
/* the homepage's closer sign: the full six-layer echo, one whole pixel per step */
.pt-sign.echo { margin-bottom: 26px; color: var(--fg-0); --es: 1px; }
.pt-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
.pt-duo--one { grid-template-columns: minmax(0, 760px); }
.pt-duo h3 { font: 400 22px/1.2 var(--pixel); color: var(--fg-0); padding-bottom: 16px; }
.pt-duo ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
.pt-duo li { padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); color: var(--fg-1); font-size: 16px; }
.pt-duo li b { display: block; font: 400 22px/1.2 var(--pixel); color: var(--fg-0); margin-bottom: 6px; }
.pt-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.pt-split .pt-head { margin: 0; }
.pt-note { margin-top: 28px; color: var(--fg-2); font-size: 15px; max-width: 72ch; }

/* ---------- The handoff: four stops on a rail that lights up ---------- */
.pt-rail { height: 4px; position: relative; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 12px); }
.pt-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(1); }
.pt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-steps li { display: flex; flex-direction: column; gap: 14px; padding: 34px 28px 0 0; position: relative; }
.pt-steps li::before { content: ""; position: absolute; top: -10px; left: 0; width: 12px; height: 16px; background: var(--accent); }
.pt-steps__n { font: 400 66px/1 var(--pixel); color: var(--accent); }
.pt-steps h3 { font: 400 22px/1.2 var(--pixel); }
.pt-steps p { color: var(--fg-1); font-size: 16px; }
/* With the site script, the rail fills and the stops light in order as it scrolls in. */
.js .pt-handoff[data-reveal] { opacity: 1; transform: none; }
.js .pt-handoff[data-reveal] .pt-rail i { transform: scaleX(0); transition: transform 1.4s var(--ease) .1s; }
.js .pt-handoff[data-reveal] .pt-steps li::before { background: var(--line-2); transition: background .3s; }
.js .pt-handoff[data-reveal] .pt-steps__n { color: var(--line-2); transition: color .3s; }
.js .pt-handoff[data-reveal].is-in .pt-rail i { transform: scaleX(1); }
.js .pt-handoff[data-reveal].is-in .pt-steps li::before { background: var(--accent); }
.js .pt-handoff[data-reveal].is-in .pt-steps__n { color: var(--accent); }
.js .pt-handoff.is-in .pt-steps li:nth-child(1) .pt-steps__n, .js .pt-handoff.is-in .pt-steps li:nth-child(1)::before { transition-delay: .15s; }
.js .pt-handoff.is-in .pt-steps li:nth-child(2) .pt-steps__n, .js .pt-handoff.is-in .pt-steps li:nth-child(2)::before { transition-delay: .5s; }
.js .pt-handoff.is-in .pt-steps li:nth-child(3) .pt-steps__n, .js .pt-handoff.is-in .pt-steps li:nth-child(3)::before { transition-delay: .85s; }
.js .pt-handoff.is-in .pt-steps li:nth-child(4) .pt-steps__n, .js .pt-handoff.is-in .pt-steps li:nth-child(4)::before { transition-delay: 1.2s; }

/* ---------- Questions, set open instead of hidden in accordions ---------- */
.pt-qa { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pt-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.pt-faq .pt-head { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; position: sticky; top: 110px; }
.pt-faq .pt-qa > div:last-child { border-bottom: 1px solid var(--line); }
.pt-qa > div { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.pt-qa dt { font: 400 22px/1.3 var(--pixel); color: var(--fg-0); margin-bottom: 10px; }
.pt-qa dd { margin: 0; color: var(--fg-1); font-size: 16.5px; max-width: 56ch; }

/* ---------- The total (workflow usage) ---------- */
.pt-wu { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: end; }
.pt-wu__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pt-wu .pt-h1--xl { font-size: 66px; }
.pt-wu__total { min-width: 0; }
.pt-stat { margin: 0; font: 400 77px/.9 var(--pixel); letter-spacing: -.03em; color: var(--fg-0); }
.pt-total__cap { margin-top: 18px; font-size: 17px; color: var(--fg-1); max-width: 40ch; }
.pt-total__cap a { color: var(--fg-0); text-decoration-color: var(--accent); }
/* the counter's pause: the site's text control ("pause" in 11px pixel type), under the caption */
.pt-wu__pause { position: relative; display: block; width: auto; height: auto; margin-top: 12px; padding: 6px 0; font: 400 11px/14px var(--pixel); letter-spacing: .06em; color: var(--fg-2); }
.pt-wu__pause::before, .pt-wu__pause[aria-pressed="true"]::before { content: "pause"; width: auto; height: auto; background: none; box-shadow: none; transform: none; clip-path: none; }
.pt-wu__pause[aria-pressed="true"]::before { content: "play"; }
.pt-wu__pause::after { content: ""; position: absolute; inset: -10px -6px; }
.pt-datahead { margin-bottom: clamp(36px, 4vw, 52px); }
.pt-facts { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pt-facts li { padding: 20px 20px 0 0; display: grid; gap: 6px; align-content: start; }
.pt-facts span { font: 400 14px/1.4 var(--sans); color: var(--fg-2); }
.pt-facts b { font: 400 22px/1.2 var(--pixel); color: var(--fg-0); font-weight: 400; }

/* ---------- Method: four answers ---------- */
.pt-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
.pt-method > div { padding: 28px 0 34px; border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
.pt-method h3 { font: 400 27.5px/1.15 var(--pixel); margin-bottom: 14px; scroll-margin-top: 90px; }
.pt-method p, .pt-method li { color: var(--fg-1); font-size: 16.5px; }
.pt-method a { color: var(--fg-0); text-decoration-color: var(--accent); }
.pt-method ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pt-method li { padding-left: 22px; position: relative; }
.pt-method li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--accent); }
.pt-quote { margin: clamp(36px, 4vw, 56px) 0 0; font: 400 27.5px/1.4 var(--pixel); color: var(--fg-0); max-width: 44ch; }
.pt-quote span { display: block; margin-bottom: 12px; font: 400 16px/1.5 var(--sans); color: var(--fg-1); }

/* ---------- The table ---------- */
.pt-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pt-table caption { caption-side: bottom; text-align: left; padding-top: 18px; font-size: 14.5px; color: var(--fg-2); }
.pt-table th, .pt-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.pt-table th { font: 500 14px/1.4 var(--sans); color: var(--fg-2); border-bottom-color: var(--line-2); padding-bottom: 12px; }
.pt-table td { color: var(--fg-1); }
.pt-table .n { width: 4ch; padding-left: 0; font: 400 16.5px/1 var(--pixel); color: var(--fg-2); }
.pt-table .num { text-align: right; white-space: nowrap; padding-right: 0; font: 400 22px/1 var(--pixel); color: var(--fg-0); }
.pt-table th.num, .pt-table th.n { font: 500 14px/1.4 var(--sans); color: var(--fg-2); }
.pt-table tbody tr { transition: background .15s; }
.pt-table tbody tr:hover td { background: color-mix(in srgb, var(--fg-0) 4%, transparent); }
.pt-table tfoot td { border-bottom: 0; padding-top: 18px; color: var(--fg-0); font-weight: 500; }
.pt-table tfoot .num { font-size: 27.5px; }

/* ---------- Close: the call, with one arcade cabinet standing by ----------
   The site's one closer (home, services, approach, posts): the cabinet, the
   flat 16x28 sprite at 6x, stands on the dotted horizon (2px dots every 8px)
   inside the text column, its right edge on the column's edge. Phones and
   tablets drop the cabinet and its floor. */
.pt-close { --floor: 44px; position: relative; overflow: hidden; padding: var(--sec-y) 0 clamp(112px, 11vw, 152px); }
.pt-close::after { content: ""; position: absolute; bottom: var(--floor); height: 2px; pointer-events: none;
  left: max(var(--wrap-pad), calc((100% - var(--wrap)) / 2 + var(--wrap-pad))); right: max(var(--wrap-pad), calc((100% - var(--wrap)) / 2 + var(--wrap-pad)));
  background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 8px); }
.pt-close__cab { position: absolute; right: max(var(--wrap-pad), calc((100% - var(--wrap)) / 2 + var(--wrap-pad))); bottom: calc(var(--floor) + 2px); width: 96px; height: auto; image-rendering: pixelated; pointer-events: none; }
/* a close with no cabinet (workflow usage) has no floor either */
.pt-close--plain { padding-bottom: var(--sec-y); }
.pt-close--plain::after { display: none; }
.pt-close .wrap { position: relative; }
.pt-close__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 760px; }
.pt-close__h { font: 400 55px/1.06 var(--pixel); letter-spacing: -.01em; max-width: 15ch; }
.pt-close__h--m { max-width: 20ch; }
.pt-close__alt { color: var(--fg-2); font-size: 15px; }
.pt-close__alt a { color: var(--fg-1); }

/* ---------- 404 ---------- */
.nf { position: relative; overflow: hidden; display: grid; align-items: start; padding: clamp(56px, 7vw, 96px) 0 clamp(88px, 10vw, 144px); }
.nf__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.nf__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.nf .lede code { font: 400 .9em var(--mono); color: var(--fg-0); background: var(--bg-2); padding: .1em .4em; word-break: break-all; }
.nf__book { display: grid; gap: 12px; justify-items: start; margin-top: 10px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--fg-1); font-size: 16px; }
.nf__fix { color: var(--fg-2); font-size: 15px; }
.nf__fix a { color: var(--fg-1); }
.nf__stage .pxw { font-size: 132px; line-height: .86; }

/* ---------- Responsive ---------- */
/* Departure Mono stays on its 11px grid: sizes step, they don't slide. */
@media (max-width: 1200px) { .pt-h1 { font-size: 55px; } }
@media (max-width: 1100px) {
  .pt-h1 { font-size: 44px; }
  .pt-h1--xl { font-size: 66px; }
  .pt-close__h { font-size: 49.5px; }
  .pt-stat { font-size: 66px; }
  .pt-wu .pt-h1--xl { font-size: 55px; }
}
@media (max-width: 1000px) {
  .pt-hero__in--stage, .pt-head, .pt-rows > li, .pt-duo, .pt-method, .pt-faq, .pt-wu, .pt-split, .nf__grid { grid-template-columns: minmax(0, 1fr); }
  .pt-hero__stage, .nf__stage { order: -1; }
  .pxs { max-width: 480px; }
  .pxwin { width: 100%; max-width: 516px; }
  .pxwin .pxs { max-width: none; }
  .pt-faq .pt-head { position: static; }
  .pt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .pt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .pt-close__cab, .pt-close::after { display: none; }
  .pt-close { padding-bottom: var(--sec-y); }
}
@media (max-width: 760px) {
  .pt-for { grid-template-columns: minmax(0, 1fr); }
  .pt-for li { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .pt-for li:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .pt-h1 { font-size: 38.5px; }
  .pt-h1--xl { font-size: 44px; }
  .pt-close__h { font-size: 38.5px; }
  .pt-h2, .pt-rows__t { font-size: 33px; }
  .pt-stat { font-size: 55px; }
  .pt-wu .pt-h1--xl { font-size: 44px; }
  .pt-quote { font-size: 22px; }
  .pt-method h3 { font-size: 22px; }
  /* the handoff rail turns vertical */
  .pt-rail { display: none; }
  .pt-steps { grid-template-columns: minmax(0, 1fr); border-left: 4px solid transparent; border-image: repeating-linear-gradient(180deg, var(--line-2) 0 8px, transparent 8px 12px) 4; padding-left: 26px; }
  .pt-steps li { padding: 0 0 36px; }
  .pt-steps li::before { top: 6px; left: -34px; width: 12px; height: 12px; }
  .pt-steps__n { font-size: 55px; }
  .pt-table { font-size: 15px; }
  .pt-table th, .pt-table td { padding: 12px 6px; }
  .pt-table .n { display: none; }
  .pt-table .num { font-size: 16.5px; }
  .pt-table tfoot .num { font-size: 22px; }
  .pt-facts { grid-template-columns: minmax(0, 1fr); }
  .pt-facts li { grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .pt-facts b { font-size: 16.5px; }
  .pxw { font-size: 44px; }
  .nf__stage .pxw { font-size: 88px; }
  .pt-hero, .nf { padding-top: 40px; }
}
/* Small phones: the arcade button steps down a size so it never runs past the edge. */
@media (max-width: 400px) {
  .pt-cta .btn--arcade, .nf__book .btn--arcade { font-size: 16.5px; padding: 0 18px; }
  .pt-cta .btn--xl { min-height: 56px; padding: 0 22px; }
}
@media (max-width: 420px) { .pt-h1:not(.pt-h1--xl) { font-size: 33px; } }