@import url("../../../_ds/fonts.css");
@import url("../../../_ds/theme.css");
@import url("../../../_shared/chrome.css");
@import url("../../../_shared/components.css");
@import url("../../../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /workflows/playwright-migration — the migration / the delta.
   A brittle Playwright scraper collapses into one Zenrows call,
   and the cost + maintenance you reclaim. Purple = the thesis /
   what you drop; teal = what's now ours to run / a 200.
─────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.back-to-top, .back-to-top * { cursor: none; }
code { font-family: var(--font-code); }

.pw-h1 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 0.96; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); }
.pw-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-h2); line-height: 0.98; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); }
.pw-blur[data-reveal] { opacity: 0; filter: blur(16px); transform: translateZ(0); backface-visibility: hidden;
  will-change: filter, opacity; transition: opacity 0.7s ease, filter 0.7s ease; }
.pw-blur[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateZ(0); }

/* code token colors */
.pw-c-kw { color: #b69cff; } .pw-c-str { color: #7ADAE6; } .pw-c-fn { color: var(--text-primary); }
.pw-c-n { color: #e0a878; } .pw-c-flag { color: #b69cff; } .pw-c-k { color: var(--text-tertiary); }
.pw-c-p { color: var(--text-quaternary); }

/* ═══ Act 1 — The collapse (sticky scroll-scrub) ═══ */
.pw-collapse { position: relative; min-height: 320vh; }
.pw-collapse-stage { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(24px, 4vh, 44px); padding: clamp(104px, 13vh, 150px) var(--page-gutter, 7vw) clamp(40px, 6vh, 72px); }
.pw-collapse-head { max-width: 1360px; margin: 0 auto; width: 100%; display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.pw-collapse-sub { grid-column: 1; margin: 16px 0 0; font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: var(--text-secondary); max-width: 50ch; }
.pw-counter { grid-column: 2; grid-row: 1 / span 2; justify-self: end; text-align: right; display: flex; flex-direction: column; }
.pw-counter-n { font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 9vw, 132px); line-height: 0.9;
  letter-spacing: -0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
.pw-counter.is-min .pw-counter-n { color: #7ADAE6; }
.pw-counter-l { font-family: var(--font-code); font-size: var(--mkt-body-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary); margin-top: 6px; }

.pw-diff { max-width: 1360px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 30px); align-items: start; }
.pw-pane-bar { display: flex; align-items: center; gap: 9px; padding: 11px clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--border-subtle); }
.pw-pane-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-quaternary); }
.pw-pane-dot--teal { background: #7ADAE6; }
.pw-pane-name { font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); }
.pw-code { margin: 0; padding: clamp(14px, 1.6vw, 22px); overflow-x: auto; }
.pw-code code { font-family: var(--font-code); font-size: var(--mkt-body-xs); line-height: 1.7; color: var(--text-secondary); white-space: normal; display: block; }
.pw-line, .pw-new-line { white-space: pre; }
.pw-line { display: block; transition: opacity 0.45s ease, color 0.45s ease; }
.pw-line.is-cut { opacity: 0.28; text-decoration: line-through; text-decoration-color: var(--text-quaternary); color: var(--text-quaternary); }
.pw-line.is-cut .pw-c-kw, .pw-line.is-cut .pw-c-str, .pw-line.is-cut .pw-c-fn, .pw-line.is-cut .pw-c-n { color: inherit; }
.pw-new-line { display: block; transition: opacity 0.5s ease, transform 0.5s ease; }
.pw-new-line[data-when] { opacity: 0; transform: translateX(-8px); }
.pw-new-line[data-when].is-on { opacity: 1; transform: none; }
.pw-new-note { margin: clamp(14px, 2vh, 20px) clamp(14px, 1.6vw, 22px) clamp(16px, 2vh, 22px);
  font-family: var(--font-base); font-size: var(--mkt-body-sm); line-height: 1.5; color: var(--text-tertiary);
  opacity: 0; transition: opacity 0.5s ease; }
.pw-new-note.is-on { opacity: 1; }

/* ═══ Saturated bands (teal delete / purple thesis) ═══ */
.pw-band { position: relative; }
.pw-band-fill { position: absolute; inset: 0; z-index: 0; clip-path: circle(0% at 50% 110%); }
.pw-band--teal .pw-band-fill { background: #7ADAE6; }
.pw-band--purple .pw-band-fill { background: #7C4FE8; }
.pw-band.is-in .pw-band-fill { clip-path: circle(155% at 50% 110%); transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.pw-band-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  padding: clamp(110px, 19vh, 210px) var(--page-gutter, 7vw); }
.pw-band-inner--center { display: grid; justify-items: center; text-align: center; }
.pw-band-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.94; letter-spacing: var(--tracking-denser, -0.03em); }
.pw-band-lead { margin: clamp(22px, 3vh, 34px) 0 0; font-family: var(--font-base); font-size: var(--mkt-lead);
  line-height: 1.5; max-width: 54ch; }
.pw-band--teal .pw-band-h2 { color: #1D1612; }
.pw-band--teal .pw-band-lead { color: rgba(29, 22, 18, 0.82); }
.pw-band--purple .pw-band-h2 { color: #fff; }
.pw-band--purple .pw-band-lead { color: rgba(255, 255, 255, 0.86); }
.pw-band-inner--center .pw-band-lead { margin-left: auto; margin-right: auto; }

/* Act 2 — delete list on the teal band */
.pw-delete { list-style: none; margin: clamp(44px, 6vh, 72px) 0 0; padding: 0; max-width: 980px; }
.pw-delete-item { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: clamp(18px, 2.4vh, 26px) 0; border-top: 1px solid rgba(29, 22, 18, 0.22);
  transition: opacity 0.5s ease; position: relative; }
.pw-delete-item:last-child { border-bottom: 1px solid rgba(29, 22, 18, 0.22); }
.pw-delete-k { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.022em); color: #1D1612; transition: color 0.4s ease; position: relative; }
.pw-delete-k::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: #1D1612;
  transform: scaleX(0); transform-origin: left; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pw-delete-item.is-struck .pw-delete-k { color: rgba(29, 22, 18, 0.5); }
.pw-delete-item.is-struck .pw-delete-k::after { transform: scaleX(1); }
.pw-delete-v { font-family: var(--font-code); font-size: var(--mkt-body-xs); color: rgba(29, 22, 18, 0.62); }

/* ═══ Act 3 — concern -> flag switcher ═══ */
.pw-map { padding: clamp(96px, 15vh, 180px) var(--page-gutter, 7vw); }
.pw-map-inner { max-width: 1200px; margin: 0 auto; }
.pw-map-head { max-width: 680px; }
.pw-map-lead { margin: 16px 0 0; font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); }
.pw-map-stage { margin: clamp(40px, 6vh, 64px) 0 0; }
.pw-map-tabs { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); margin-bottom: clamp(28px, 4vh, 40px); }
.pw-map-tab { font-family: var(--font-base); font-size: var(--mkt-body); color: var(--text-tertiary);
  background: none; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 9px 18px; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease; }
.pw-map-tab:hover { color: var(--text-primary); }
.pw-map-tab.is-active { color: var(--text-primary); border-color: var(--text-tertiary); }
.pw-map-panes { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 2.4vw, 40px); align-items: center; }
.pw-map-old, .pw-map-new { display: flex; flex-direction: column; gap: 12px; }
.pw-map-tag { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.pw-map-tag--flag { color: #b69cff; }
.pw-map-code { margin: 0; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--border-subtle); border-radius: 14px; overflow-x: auto; min-height: 120px; }
.pw-map-code code { font-family: var(--font-code); font-size: clamp(12.5px, 1.05vw, 15px); line-height: 1.7; white-space: pre-wrap; color: var(--text-secondary); }
.pw-map-new .pw-map-code code { color: #b69cff; font-size: var(--mkt-body); }
.pw-map-arrow { font-family: var(--font-code); font-size: var(--mkt-h4); color: var(--text-quaternary); }
.pw-map-note { margin: 0; font-family: var(--font-base); font-size: var(--mkt-body-sm); line-height: 1.5; color: var(--text-tertiary); }

/* ═══ Act 4 — the delta (before/after stage, ported from /compare/apify) ═══ */
.pw-delta { padding: clamp(96px, 14vh, 170px) var(--page-gutter, 7vw) clamp(110px, 16vh, 190px); }
.pw-delta-head { max-width: 760px; margin: 0 auto clamp(44px, 6vh, 70px); text-align: center; }
.pw-delta-lead { margin: 16px 0 0; font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); }

.pw-stage { --reveal-x: 50%; position: relative; width: 100%; max-width: 1320px; margin: 0 auto; user-select: none; isolation: isolate; }
.pw-stage-frame { position: relative; border: 1px solid var(--border-subtle); border-radius: 22px; overflow: hidden; height: clamp(440px, 56vh, 640px); }
.pw-stage-layer { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--background); }
.pw-stage-layer--zr { z-index: 1; }
.pw-stage-layer--own { z-index: 2; clip-path: inset(0 0 0 var(--reveal-x)); transition: clip-path 60ms linear; }
.pw-stage.is-dragging .pw-stage-layer--own { transition: none; }
.pw-stage-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 48px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.pw-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.32); flex-shrink: 0; }
.pw-stage-bar--zr .pw-stage-dot { background: #7ADAE6; }
.pw-stage-bar-name { margin-left: 8px; font-family: var(--font-code); font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pw-stage-bar-tag { margin-left: auto; font-family: var(--font-base); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
.pw-stage-bar-tag--zr { color: #5BE0AC; padding: 3px 8px; border-radius: 999px; background: rgba(91,224,172,0.1); border: 1px solid rgba(91,224,172,0.32); }
.pw-stage-body { position: relative; flex: 1; padding: clamp(24px, 3vw, 48px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.pw-stage-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px); align-content: center; }
.pw-stage-list li { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.3; color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: 10px; padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px); }
.pw-stage-call { margin: 0 auto; max-width: 640px; width: 100%; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--border-subtle); border-radius: 14px; overflow-x: auto; }
.pw-stage-call code { font-family: var(--font-code); font-size: clamp(12.5px, 1.1vw, 15px); line-height: 1.75; color: var(--text-primary); white-space: pre; }
.pw-stage-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
.pw-stage-credit { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); }
.pw-stage-credit--zr { color: #C7B0FF; background: rgba(124,79,232,0.14); border-color: rgba(124,79,232,0.4); }
.pw-stage-includes { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }
.pw-stage-handle { position: absolute; top: -10px; bottom: -10px; left: var(--reveal-x); width: 48px; transform: translateX(-50%); z-index: 5; cursor: ew-resize; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; }
.pw-stage-handle, .pw-stage-handle * { cursor: ew-resize; }
.pw-stage-handle-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,0.32); transform: translateX(-0.5px); }
.pw-stage-handle-knob { position: relative; width: clamp(40px, 3.6vw, 52px); height: clamp(40px, 3.6vw, 52px); border-radius: 50%; background: var(--background); border: 1px solid var(--border, var(--border-subtle)); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.7); transition: border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.22,1,.36,1); }
.pw-stage-handle-knob svg { width: 18px; height: 18px; }
.pw-stage-handle:hover .pw-stage-handle-knob, .pw-stage.is-dragging .pw-stage-handle-knob { border-color: var(--text-primary); color: var(--text-primary); transform: scale(1.06); }
.pw-stage-handle:focus-visible .pw-stage-handle-knob { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(255,255,255,0.2); }
@keyframes pw-stage-hint { 0%,100% { transform: scale(1); } 40% { transform: scale(1.08); } }
.pw-stage.is-revealed:not(.is-dragging):not(:hover) .pw-stage-handle-knob { animation: pw-stage-hint 1.6s ease-in-out 0.6s 2; }

/* ═══ Act 5 — same output + marquee ═══ */
.pw-same { padding: clamp(96px, 15vh, 180px) 0 0; }
.pw-same-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--page-gutter, 7vw); display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.pw-same-lead { margin: clamp(20px, 2.6vh, 30px) 0 0; font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); max-width: 46ch; }
.pw-payload { margin: 0; padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--border-subtle); border-radius: 16px; overflow-x: auto; }
.pw-payload code { font-family: var(--font-code); font-size: var(--mkt-body-sm); line-height: 1.9; color: var(--text-secondary); white-space: pre; }
.pw-marquee { margin-top: clamp(72px, 11vh, 130px); padding: clamp(26px, 3.5vh, 40px) 0; border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pw-marquee-track { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 32px); white-space: nowrap; will-change: transform; }
.pw-marquee-item { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h3); color: var(--text-tertiary); letter-spacing: var(--tracking-dense, -0.022em); }
.pw-marquee-sep { color: #7ADAE6; font-size: var(--mkt-h4); }

/* ═══ Topbar inversion: dark chrome on teal, white chrome on purple ═══ */

/* ═══ Act 7 — Closer (dark) ═══ */
.pw-end { padding: clamp(120px, 20vh, 220px) var(--page-gutter, 7vw) clamp(90px, 13vh, 150px); max-width: 1000px; margin: 0 auto; }
.pw-end-h { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero);
  line-height: 0.95; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); }
.pw-end-sub { margin: clamp(22px, 3vh, 32px) 0 0; font-family: var(--font-base); font-size: var(--mkt-lead);
  line-height: 1.5; color: var(--text-secondary); max-width: 56ch; }
.pw-end-cta { margin: clamp(34px, 5vh, 52px) 0 0; }
.pw-end-link { margin: clamp(28px, 4vh, 40px) 0 0; }

/* ═══ Breakpoints ═══ */
@media (max-width: 1000px) {
  .pw-collapse { min-height: 0; }
  .pw-collapse-stage { position: static; min-height: 0; }
  .pw-collapse-head { grid-template-columns: 1fr; align-items: start; }
  .pw-counter { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; flex-direction: row; align-items: baseline; gap: 14px; }
  .pw-diff { grid-template-columns: 1fr; }
  .pw-map-panes { grid-template-columns: 1fr; }
  .pw-map-arrow { transform: rotate(90deg); justify-self: start; }
  .pw-same-inner { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
}
@media (max-width: 720px) {
  .pw-stage-frame { height: clamp(380px, 72vh, 540px); }
  .pw-delete-item { flex-direction: column; gap: 6px; }
}
@media (min-width: 1600px) {
  .pw-collapse-head, .pw-diff { max-width: 1520px; }
  .pw-band-inner { max-width: 1440px; }
  .pw-stage { max-width: 1480px; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-band.is-in .pw-band-fill { transition: none; }
  .pw-delete-item.is-struck .pw-delete-k::after { transition: none; }
}