/* Proxy demo — the pieces site.css does not already have.
   Everything reads site.css's tokens (--neon, --panel, --border, --dim …) rather
   than declaring colours, so the page follows the marketing site's theme switch
   and cannot drift from it. Prefixed pd- so nothing can collide with site.css. */

.pd-shell{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- the console ---------- */
.pd-grid{display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:880px){.pd-grid{grid-template-columns:1fr}}
.pd-left{padding:34px 32px;border-right:1px solid var(--border)}
@media(max-width:880px){.pd-left{border-right:none;border-bottom:1px solid var(--border)}}
.pd-right{padding:24px 26px;min-width:0}

/* ---------- the verdict ---------- */
.pd-state{font-family:'JetBrains Mono',monospace;font-weight:700;line-height:1.02;
  letter-spacing:-.03em;font-size:clamp(30px,5.2vw,62px);color:var(--ink);
  margin:18px 0 0;word-break:break-word}
.pd-state.is-hit{color:var(--neon)}
.pd-state.is-wait{color:var(--dim)}
.pd-state.is-err{color:var(--red)}
.pd-sub{margin-top:16px;font-size:15px;line-height:1.65;color:var(--muted);max-width:46ch}
.pd-sub strong{color:var(--ink);font-weight:600}

/* Caret on the waiting state. Deliberately not gated on prefers-reduced-motion:
   a still page during a live test reads as a page that has stalled. */
.pd-caret{display:inline-block;width:.55em;height:.86em;background:var(--neon);
  vertical-align:-.06em;margin-left:.12em;animation:pdBlink 1s steps(1) infinite}
@keyframes pdBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

.pd-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border:1px solid var(--border)}
.pd-meta div{flex:1 1 120px;padding:12px 14px;border-right:1px solid var(--border);min-width:0}
.pd-meta div:last-child{border-right:none}
.pd-meta b{display:block;font:400 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.pd-meta span{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}

/* ---------- the scan log ---------- */
.pd-logcap{font:400 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.pd-log{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.75;
  color:var(--muted);margin:0;list-style:none;min-height:150px}
.pd-log li{display:flex;gap:10px;padding:3px 0;opacity:0;animation:pdIn .28s ease forwards}
@keyframes pdIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.pd-log .t{color:var(--faint);flex:none}
.pd-log .m{min-width:0;word-break:break-word}
.pd-log .ok{color:var(--neon)}
.pd-log .bad{color:var(--red)}

/* ---------- actions ---------- */
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pd-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);
  margin-top:14px;letter-spacing:.02em}

/* ---------- argument blocks ---------- */
.pd-sec{padding-top:72px}
.pd-sec h2{font-size:clamp(24px,3.4vw,38px);letter-spacing:-.02em;color:var(--ink);margin:10px 0 14px}
.pd-sec p{font-size:15.5px;line-height:1.7;color:var(--muted);max-width:70ch}
.pd-sec p+p{margin-top:14px}
.pd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);margin-top:28px}
.pd-cards article{background:var(--panel);padding:22px 22px 24px}
.pd-cards h3{font-size:15px;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.pd-cards p{font-size:13.5px;line-height:1.65;color:var(--muted);max-width:none}
.pd-num{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:var(--neon);display:block;margin-bottom:12px}

/* ---------- the honest note ---------- */
.pd-level{border:1px solid var(--border);background:var(--panel);padding:22px 24px;margin-top:30px;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
@media(max-width:640px){.pd-level{grid-template-columns:1fr}}
.pd-level .tag{font:700 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  background:var(--neon-solid);color:#000;padding:6px 8px;white-space:nowrap}
.pd-level p{font-size:14px;line-height:1.7;color:var(--muted);max-width:66ch}
.pd-level strong{color:var(--ink);font-weight:600}

/* ---------- contact ---------- */
.pd-form{display:grid;gap:10px;max-width:460px;margin-top:22px}
.pd-form input,.pd-form textarea{width:100%;background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:14px;padding:11px 13px}
.pd-form textarea{resize:vertical;min-height:96px}
.pd-form input:focus,.pd-form textarea:focus{outline:none;border-color:var(--neon)}
.pd-form .bad{border-color:var(--red)}
.pd-status{font-family:'JetBrains Mono',monospace;font-size:12px;margin-top:10px;color:var(--muted)}
.pd-status .ok{color:var(--neon)}
.pd-status .err{color:var(--red)}

/* ---------- variant switcher (preview only; strip before deploying) ---------- */
.pd-switch{position:fixed;right:14px;bottom:14px;z-index:400;display:flex;
  border:1px solid var(--border);background:var(--panel)}
.pd-switch a{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 11px;color:var(--dim);border-right:1px solid var(--border)}
.pd-switch a:last-child{border-right:none}
.pd-switch a.on,.pd-switch a:hover{color:var(--neon)}

/* ============================================================================
   Site chrome, shared. These reproduce the homepage's hero treatment so every
   variant starts from the same lit grid instead of a bare dark page, and so the
   treatment lives in ONE place rather than being pasted into each variant.
   Lifted from site.css's .hero / .hero::before / .hero-badge.
   ========================================================================= */

/* Three layers, and the order matters: a 40px grid, a gradient that is TRANSPARENT
   for the top 55% and fades to --bg below, then an acid bloom from the top edge.
   That transparency is load-bearing -- it is what lets the fixed z-index:-1 ambient
   blob show through. Paint --bg flat there and the pointer glow disappears. */
.pd-lit{position:relative;
  background-image:linear-gradient(to bottom,transparent 55%,var(--bg) 100%),
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:100% 100%,40px 40px,40px 40px}
.pd-lit::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(212,255,0,.06),transparent 65%)}
.pd-lit>*{position:relative;z-index:1}


/* ---- how to run it. The original page never said. ---- */
.pd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border)}
@media(max-width:760px){.pd-steps{grid-template-columns:1fr}}
.pd-steps > div{background:var(--panel);padding:20px 20px 22px}
.pd-steps .n{display:block;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.18em;
  color:var(--neon);margin-bottom:11px}
.pd-steps h4{font-size:15px;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em;font-weight:600}
.pd-steps p{font-size:13px;line-height:1.6;color:var(--muted);margin:0;max-width:none}

/* ============================================================================
   Small screens. Two problems, one cause: a fixed 196px wordmark plus three links
   and a button needs ~520px, so on a 375px phone the page could be dragged sideways.

   The wordmark now steps down at the HOMEPAGE's own breakpoints and to its own
   sizes -- site.css scales .logo-lockup with zoom .14 / .12 / .105 on a 1400x300
   viewBox, which is 196 / 168 / 147 wide. Matching those means the logo here is the
   same size as the homepage's at every width rather than merely smaller.

   site.css hides .nav-links AND .nav-cta at 820 and shows a burger. These pages keep
   the CTA -- it is the conversion on a landing page -- and drop only the secondary
   links, which still fits: 32 padding + 147 logo + 14 gap + ~106 button = ~299px.
   ========================================================================= */
@media(max-width:820px){
  .nav-inner{padding:0 16px;gap:14px}
  .logo img{width:168px;height:auto}
  .nav-sec{display:none}
}
@media(max-width:480px){
  .logo img{width:147px}
  .pd-shell{padding:0 16px}
}
@media(max-width:430px){
  .nav-inner .btn-neon{padding:8px 12px;font-size:13px}
}

/* Long single-line values must be allowed to clip rather than push the layout:
   a flex or grid item defaults to min-width:auto, which refuses to shrink below
   its content. Every readout on these pages can carry a raw JSON response. */
.pd-meta span,.pd-log .m{min-width:0}
.console-head,.console-head .path{min-width:0}