/* Product pages (e.g. /control-tower/): hero with a dark preview card, feature cards,
   "where it fits" loop, use cases and a lime call-to-action band. Uses the site tokens. */
.pp-hero{max-width:var(--max);margin:auto;padding:90px 28px 100px;display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.pp-hero h1{margin:22px 0 24px;font-size:clamp(48px,5.6vw,82px)}
.pp-lede{font-size:19px;line-height:1.65;max-width:600px;color:#3f4944}
.pp-hero .hero-actions{margin-top:30px}
.pp-pip{display:inline-flex;align-items:center;margin-top:22px;padding:10px 14px;background:var(--ink);color:var(--acid);font:13px 'DM Mono',monospace;max-width:100%}

/* dark fleet preview */
.pp-fleet{background:var(--ink);color:#fff;padding:24px 26px;box-shadow:18px 18px 0 var(--acid)}
.pp-fleet-top{display:flex;justify-content:space-between;font:12px 'DM Mono',monospace;letter-spacing:.08em;color:#9aa59f}
.pp-fleet-top .pulse{display:inline-flex;align-items:center;gap:8px;color:var(--acid)}
.pp-fleet-total{display:flex;align-items:baseline;gap:10px;margin:26px 0 14px}
.pp-fleet-total strong{font-family:var(--font-display,inherit);font-size:54px;line-height:1;letter-spacing:-.04em}
.pp-fleet-total span{color:#9aa59f;font-size:14px}
.pp-fleet-bar{display:flex;gap:3px;height:10px}
.pp-fleet-bar i{display:block}
.ok{--c:var(--acid)}.warn{--c:#f2c94c}.bad{--c:#ff6b5b}
.pp-fleet-bar i,.pp-fleet-legend i{background:var(--c)}
.pp-fleet-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 22px;padding:0;font-size:13px;color:#cfd8d3}
.pp-fleet-legend li{display:flex;align-items:center;gap:7px}
.pp-fleet-legend i{width:8px;height:8px;border-radius:50%}
.pp-fleet-legend b{color:#fff}
.pp-fleet-rows{list-style:none;margin:0;padding:0;border-top:1px solid #1f2b25}
.pp-fleet-rows li{display:grid;grid-template-columns:1.15fr 1fr 110px 34px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #1f2b25;font-size:14px;transition:background .4s}
.pp-fleet-rows small{font:12px 'DM Mono',monospace;color:#9aa59f}
.pp-fleet-rows li[data-state=ok]{--c:var(--acid)}.pp-fleet-rows li[data-state=warn]{--c:#f2c94c}.pp-fleet-rows li[data-state=bad]{--c:#ff6b5b}
.pp-fleet-rows em{font:normal 11.5px 'DM Mono',monospace;color:var(--c);display:inline-flex;align-items:center;gap:6px;transition:color .4s}
.pp-fleet-rows em::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);transition:background .4s}
.pp-fleet-rows time{font:11.5px 'DM Mono',monospace;color:#7d8a84;text-align:right}
.pp-fleet-rows li.is-beat em::before{animation:pp-beat .7s ease-out}
.pp-fleet-rows li.is-changed{background:rgba(183,243,67,.07)}
@keyframes pp-beat{0%{box-shadow:0 0 0 0 var(--c)}100%{box-shadow:0 0 0 8px transparent}}
.pp-fleet-bar i{transition:flex-grow .6s cubic-bezier(.2,.72,.25,1)}
.pp-fleet-legend b{display:inline-block;min-width:1.4em}
.pp-fleet-note{margin:14px 0 0;font-size:12px;color:#7d8a84}

/* sections */
.pp-section{padding-top:100px;padding-bottom:100px}
.pp-section:not(.pp-band)+.pp-section:not(.pp-band){border-top:1px solid var(--line)}
.pp-section h2{margin:14px 0 0;font-size:clamp(36px,4.4vw,60px);line-height:1.02;letter-spacing:-.045em;max-width:820px}
.pp-section h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400}
.pp-sub{margin:16px 0 0;font-size:17px;line-height:1.6;max-width:680px;color:#3f4944}
.pp-num{font:12px 'DM Mono',monospace;color:#4c7b13}

.pp-loop{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:40px 0 0;padding:0;counter-reset:s}
.pp-loop li{position:relative;padding:18px 18px 20px;border:1px solid var(--ink);margin-left:-1px;background:#fff}
.pp-loop li:first-child{margin-left:0}
.pp-loop small{display:block;font:11px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#56605b}
.pp-loop b{display:block;margin-top:6px;font-size:16px;letter-spacing:-.015em}
.pp-loop li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;z-index:1;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;background:var(--paper);font-size:12px}
.pp-loop li.is-here{background:var(--ink);color:#fff}
.pp-loop li.is-here small{color:var(--acid)}

.pp-uc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px 0 0;padding:0}
.pp-uc a{display:flex;justify-content:space-between;align-items:center;gap:12px;height:100%;padding:22px;background:#fff;border:1px solid var(--ink);font-size:17px;font-weight:700;letter-spacing:-.015em;transition:background .2s,transform .22s var(--ease,ease),box-shadow .22s var(--ease,ease)}
.pp-uc a span{font-weight:500;transition:transform .2s}
.pp-uc a:hover{background:var(--mint);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.pp-uc a:hover span{transform:translateX(4px)}

.pp-cta{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.pp-cta h2{margin:12px 0 10px}
.pp-cta p:not(.section-label){margin:0;font-size:17px}

@media(max-width:1000px){.pp-loop{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-loop li{margin:0 0 -1px -1px}}
@media(max-width:900px){.pp-hero{grid-template-columns:1fr;gap:48px;padding-top:60px}.pp-uc{grid-template-columns:1fr}.pp-cta{grid-template-columns:1fr}}
@media(max-width:680px){
  .pp-hero{padding:44px 20px 70px}
  .pp-lede{font-size:17px}
  .pp-fleet{padding:20px;box-shadow:10px 10px 0 var(--acid)}
  .pp-fleet-rows li{grid-template-columns:1fr auto 34px}.pp-fleet-rows small{display:none}
  .pp-section{padding-top:60px;padding-bottom:60px}
  .pp-loop{grid-template-columns:1fr}
  .pp-loop li{margin:0 0 -1px 0}.pp-loop li::after{display:none}
}
@media(prefers-reduced-motion:reduce){.pp-uc a,.pp-uc a span{transition:none}}

/* ---- detailed sections ---- */
.pp-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;font:12px 'DM Mono',monospace;color:var(--muted)}
.pp-crumbs a:hover{color:var(--ink)}
.pp-crumbs b{font-weight:500;color:var(--ink)}
.pp-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;font-size:12.5px;color:var(--muted)}
.pp-facts li::before{content:"✓";color:#4c7b13;margin-right:6px}
.pp-head{max-width:760px}
.pp-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}

.pp-problems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.pp-problems article{padding:24px 22px;border:1px dashed #9aa59f;background:rgba(255,255,255,.55)}
.pp-problems h3{margin:0 0 8px;font-size:18px;letter-spacing:-.02em}
.pp-problems p{margin:0;font-size:14.5px;line-height:1.55;color:#46504b}
.pp-answer{margin:24px 0 0;padding:18px 22px;background:var(--ink);color:#dfe6e1;font-size:16px;line-height:1.5;box-shadow:8px 8px 0 var(--acid);max-width:760px}
.pp-answer b{color:var(--acid)}

.pp-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.pp-features article{padding:24px 22px;background:#fff;border:1px solid var(--ink);transition:transform .22s var(--ease,ease),box-shadow .22s var(--ease,ease)}
.pp-features article:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--acid)}
.pp-features h3{margin:14px 0 6px;font-size:19px;letter-spacing:-.02em}
.pp-features p{margin:0 0 14px;font-size:14.5px;color:#46504b}
.pp-features ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:7px}
.pp-features li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.4;color:#3f4944}
.pp-features li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--acid);border:1px solid var(--ink)}

.pp-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:40px 0 0;padding:0;border:1px solid var(--ink);background:#fff}
.pp-steps li{padding:26px 22px;border-left:1px solid var(--ink)}
.pp-steps li:first-child{border-left:0}
.pp-steps span{display:grid;place-items:center;width:34px;height:34px;background:var(--acid);border:1px solid var(--ink);font-weight:800}
.pp-steps h3{margin:16px 0 8px;font-size:18px;letter-spacing:-.02em}
.pp-steps p{margin:0;font-size:14.5px;line-height:1.55;color:#46504b}
.pp-steps code{font:12.5px 'DM Mono',monospace;background:var(--mint);padding:1px 4px}

.pp-states{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pp-states li{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;padding:18px 20px;background:var(--ink);color:#dfe6e1;border-left:6px solid var(--c)}
.pp-states b{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px}
.pp-states b::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.pp-states span{font-size:14.5px;line-height:1.5;color:#aeb9b3}

.pp-works{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
.pp-works-title{margin:0;font:12px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pp-works ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pp-works li{padding:7px 12px;border:1px solid var(--ink);background:#fff;font-size:13.5px;font-weight:600}

.pp-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.pp-status>div{padding:24px;border:1px solid var(--ink);background:#fff}
.pp-status-title{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-weight:800;font-size:17px}
.pp-status-title i{width:10px;height:10px;border-radius:50%;background:var(--c);border:1px solid var(--ink)}
.pp-status ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:14.5px;color:#3f4944}

.pp-faq{border-top:1px solid var(--ink)}
.pp-faq details{border-bottom:1px solid var(--ink)}
.pp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";flex:0 0 28px;height:28px;display:grid;place-items:center;border:1px solid var(--ink);font-weight:500;transition:transform .2s,background .2s}
.pp-faq details[open] summary::after{content:"−";background:var(--acid)}
.pp-faq p{margin:0 0 18px;font-size:15px;line-height:1.6;color:#46504b;max-width:620px}
.pp-faq a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){.pp-features{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-steps li:nth-child(3){border-left:0}.pp-steps li:nth-child(n+3){border-top:1px solid var(--ink)}}
@media(max-width:900px){.pp-split{grid-template-columns:1fr;gap:28px}.pp-problems{grid-template-columns:1fr}.pp-status{grid-template-columns:1fr}}
@media(max-width:680px){
  .pp-features,.pp-steps{grid-template-columns:1fr}
  .pp-steps li{border-left:0!important;border-top:1px solid var(--ink)}.pp-steps li:first-child{border-top:0}
  .pp-states li{grid-template-columns:1fr;gap:6px}
}
@media(prefers-reduced-motion:reduce){.pp-features article{transition:none}}

/* ---- section bands: full-width white and dark sections for rhythm ---- */
.pp-band{max-width:none;padding-left:max(28px,calc((100% - 1184px)/2));padding-right:max(28px,calc((100% - 1184px)/2))}
.pp-band-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pp-band-white .pp-features article,.pp-band-white .pp-status>div{background:var(--paper)}
.pp-band-dark{background:var(--ink);color:#fff}
.pp-band-dark h2{color:#fff}
.pp-band-dark h2 em{color:var(--acid)}
.pp-band-dark .section-label{color:var(--acid)}
.pp-band-dark .pp-sub{color:#aeb9b3}
/* how it works, on dark */
.pp-band-dark .pp-steps{position:relative;background:transparent;border-color:#2b3a33}
.pp-band-dark .pp-steps li{border-color:#2b3a33;background:#0d1914}
.pp-band-dark .pp-steps h3{color:#fff}
.pp-band-dark .pp-steps p{color:#aeb9b3}
.pp-band-dark .pp-steps code{background:#1a2a22;color:var(--acid)}
.pp-band-dark .pp-steps span{color:var(--ink)}
.pp-steps::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.72,.25,1) .2s;z-index:1}
.pp-steps.is-in::before{transform:none}
/* ecosystem loop, on dark */
.pp-band-dark .pp-loop li{background:#0d1914;border-color:#2b3a33}
.pp-band-dark .pp-loop small{color:#9aa59f}
.pp-band-dark .pp-loop b{color:#fff}
.pp-band-dark .pp-loop li:not(:last-child)::after{background:var(--ink);color:var(--acid)}
.pp-band-dark .pp-loop li.is-here{background:var(--acid);border-color:var(--acid)}
.pp-band-dark .pp-loop li.is-here small,.pp-band-dark .pp-loop li.is-here b{color:var(--ink)}
.pp-band-dark .pp-works-title{color:#9aa59f}
.pp-band-dark .pp-works li{background:transparent;border-color:#2b3a33;color:#dfe6e1}

/* ---- reveal on scroll (assets/js/product.js adds .is-in) ---- */
html.pp-js .pp-rv,html.pp-js .pp-rv-kids>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.72,.25,1);transition-delay:var(--d,0s)}
html.pp-js .pp-rv.is-in,html.pp-js .pp-rv-kids.is-in>*{opacity:1;transform:none}
html.pp-js .pp-features.is-in>article:hover{transform:translate(-3px,-3px);transition-delay:0s}
@media(prefers-reduced-motion:reduce){
  html.pp-js .pp-rv,html.pp-js .pp-rv-kids>*{opacity:1;transform:none;transition:none}
  .pp-steps::before{transform:none;transition:none}
  .pp-fleet-rows li,.pp-fleet-bar i{transition:none}
}

/* ---- real-content sections ---- */
.unk{--c:#9aa59f}.beta{--c:#6fd3a8}
.pp-states li.unk{border-left-color:#9aa59f}

/* inside the console: list of screens on the left, screenshot on the right */
.pp-show{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:40px;margin-top:44px;align-items:start}
.pp-show-list{display:grid;border-left:1px solid #2b3a33}
.pp-show-list button{display:block;text-align:left;padding:18px 0 18px 22px;margin-left:-1px;border:0;border-left:2px solid transparent;background:none;color:#9aa59f;font:inherit;cursor:pointer;transition:color .2s,border-color .2s}
.pp-show-list b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#cfd8d3;transition:color .2s}
.pp-show-list span{display:none;margin-top:8px;font-size:14.5px;line-height:1.55;color:#aeb9b3}
.pp-show-list button[aria-selected=true]{border-left-color:var(--acid)}
.pp-show-list button[aria-selected=true] b{color:#fff}
.pp-show-list button[aria-selected=true] span{display:block}
.pp-show-list button:hover b{color:#fff}
.pp-show-list button:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.pp-show-stage{position:relative;padding:22px;background:linear-gradient(135deg,#1a2a22,#0d1914 60%,#24331f);border:1px solid #2b3a33}
.pp-show-stage figure{margin:0}
.pp-show-stage figure.is-on{animation:pp-fade .35s ease}
.pp-show-stage img{display:block;width:100%;height:auto;border:1px solid #2b3a33;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
@keyframes pp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pp-show-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0}
.pp-show-chips li{padding:6px 12px;border-radius:999px;background:#1f2b25;color:#dfe6e1;font-size:12.5px;font-weight:600}

/* two ways to run it */
.pp-run{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.pp-run article{display:flex;flex-direction:column;padding:26px;background:#fff;border:1px solid var(--ink)}
.pp-run-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pp-run h3{margin:0;font-size:24px;letter-spacing:-.025em}
.pp-run-sub{margin:4px 0 12px;font-weight:700;color:#4c7b13}
.pp-run article>p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:#46504b}
.pp-run dl{margin:0 0 16px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);display:grid;gap:8px}
.pp-run dl div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:13.5px}
.pp-run dt{color:var(--muted)}
.pp-run dd{margin:0;color:var(--ink)}
.pp-run code{font:12.5px 'DM Mono',monospace;background:#fff;border:1px solid var(--line);padding:2px 6px}
.pp-run .pp-run-best{margin-top:auto;font-size:13.5px}
.pp-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--c);border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;color:var(--ink);background:#fff}
.pp-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}

/* commands in "how it works" */
.pp-steps li{display:flex;flex-direction:column}
.pp-cmd{display:block;margin-top:auto;padding-top:0;font:12px 'DM Mono',monospace;color:var(--acid);background:#14211b;border:1px solid #2b3a33;padding:9px 10px;overflow-wrap:anywhere;line-height:1.45}
.pp-steps p{margin-bottom:16px}
.pp-band-dark .pp-sub code{font:13px 'DM Mono',monospace;color:var(--acid)}

/* stack table */
.pp-stack{margin-top:40px}
.pp-stack table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14.5px}
.pp-stack th{padding:10px 14px;text-align:left;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#9aa59f;border-bottom:1px solid #2b3a33}
.pp-stack td{padding:13px 14px;border-bottom:1px solid #1f2b25;color:#cfd8d3}
.pp-stack td:first-child{font-weight:700;color:#fff}
.pp-stack td a{color:#fff;border-bottom:1px solid #3a4a42}
.pp-stack td a:hover{color:var(--acid);border-color:var(--acid);opacity:1}
.pp-stack code{font:12.5px 'DM Mono',monospace;color:var(--acid)}
.pp-stack tr.is-here td{background:rgba(183,243,67,.08)}
.pp-stack .pp-badge{background:transparent;color:#fff}
.pp-stack-note{margin:10px 0 0;font-size:12.5px;color:#7d8a84}

.pp-status-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-status code{font:12.5px 'DM Mono',monospace;background:var(--mint);padding:1px 5px}
.pp-faq code{font:13px 'DM Mono',monospace;background:var(--mint);padding:1px 5px}

@media(max-width:1100px){.pp-status-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .pp-show{grid-template-columns:1fr;gap:24px}
  .pp-run{grid-template-columns:1fr}
}
@media(max-width:680px){
  .pp-show-stage{padding:12px}
  .pp-show-list b{font-size:17px}
  .pp-status-4{grid-template-columns:1fr}
  .pp-run dl div{grid-template-columns:1fr;gap:2px}
  .pp-stack{overflow-x:auto}
  .pp-stack table{min-width:560px}
}
@media(prefers-reduced-motion:reduce){.pp-show-stage figure.is-on{animation:none}}
.pp-steps .pp-cmd,.pp-band-dark .pp-steps .pp-cmd{display:block;margin-top:auto;padding:10px 12px;background:#14211b;border:1px solid #2b3a33;color:var(--acid);font:12px/1.5 'DM Mono',monospace;overflow-wrap:anywhere}

/* console showcase v2: bigger screens, fixed frame, auto-advance progress, click to enlarge */
.pp-show{grid-template-columns:minmax(0,.62fr) minmax(0,1.8fr);gap:36px}
.pp-show-list button{position:relative;overflow:hidden}
.pp-show-bar{position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--acid);transform:scaleY(0);transform-origin:top}
.pp-show-list button[aria-selected=true]{border-left-color:#2b3a33}
.pp-show-list button[aria-selected=true] .pp-show-bar{transform:scaleY(var(--p,1))}
.pp-show-stage{padding:18px}
.pp-show-stage figure{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:#0b1511;border:1px solid #2b3a33;overflow:hidden;cursor:zoom-in}
.pp-show-stage figure[hidden]{display:none}
.pp-show-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border:0;box-shadow:none}
.pp-show-hint{margin:12px 0 0;text-align:center;font:11.5px 'DM Mono',monospace;color:#7d8a84}
.pp-show-chips{margin-top:10px}

/* lightbox */
.pp-zoom{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:4vh 4vw;background:rgba(7,17,14,.88);cursor:zoom-out;animation:pp-fade .2s ease}
.pp-zoom[hidden]{display:none}
.pp-zoom img{max-width:100%;max-height:92vh;border:1px solid #2b3a33;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.pp-zoom button{position:absolute;top:18px;right:18px;width:42px;height:42px;border:1px solid var(--acid);background:var(--ink);color:var(--acid);font-size:22px;cursor:pointer}
@media(max-width:900px){.pp-show{grid-template-columns:1fr}.pp-show-stage figure{aspect-ratio:auto;min-height:0}}
@media(prefers-reduced-motion:reduce){.pp-show-bar{transition:none}}

/* ---- "What it does": dark section, heading left + paragraph right, sideways-scrolling feature cards
   (each with a framed console view on top), progress line + arrows underneath ---- */
.pp-fx{overflow:hidden}
.pp-fx-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}
.pp-fx-head h2{margin-top:14px}
.pp-fx-lede{margin:0 0 6px;font-size:18px;line-height:1.6;color:#aeb9b3}
.pp-fx-track{display:flex;gap:24px;margin-top:48px;margin-right:calc(-1 * max(28px,(100vw - 1184px)/2));padding-right:max(28px,calc((100vw - 1184px)/2));
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;outline:none}
.pp-fx-track::-webkit-scrollbar{display:none}
.pp-fx-track.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.pp-fx-track:focus-visible{outline:2px solid var(--acid);outline-offset:6px}
.pp-fc{flex:0 0 min(480px,84vw);scroll-snap-align:start}
.pp-fc-visual{aspect-ratio:4/3;display:grid;place-items:center;padding:30px 26px;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,rgba(183,243,67,.28),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(76,123,19,.35),transparent 60%),linear-gradient(160deg,#1f2d24,#0b1511);
  border:1px solid #2b3a33;transition:transform .35s cubic-bezier(.2,.72,.25,1)}
.pp-fc:hover .pp-fc-visual{transform:translateY(-4px)}
.pp-fc-window{width:100%;max-height:100%;display:flex;flex-direction:column;background:#0f1a15;border:1px solid #33443b;border-radius:10px;overflow:hidden;box-shadow:0 26px 50px -22px rgba(0,0,0,.85)}
.pp-fc-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #2b3a33;background:#13201a;font:11px 'DM Mono',monospace;color:#9aa59f}
.pp-fc-bar i{width:8px;height:8px;border-radius:50%;background:#33443b}
.pp-fc-bar span{margin-left:8px;color:#dfe6e1}
.pp-fc-bar em{margin-left:auto;font-style:normal;padding:2px 8px;border:1px solid #2b3a33;border-radius:999px;color:var(--acid);font-size:10px}
.pp-fc-window img{display:block;width:100%;height:auto;min-height:0;object-fit:contain;object-position:top center;background:#fff}
.pp-fc:nth-child(4) .pp-fc-window{width:auto;max-width:62%;margin:auto}
.pp-fc h3{margin:24px 0 10px;font-size:26px;font-weight:600;letter-spacing:-.025em;color:#fff}
.pp-fc p{margin:0;font-size:16px;line-height:1.6;color:#aeb9b3;max-width:440px}
.pp-fx-nav{display:flex;align-items:center;gap:10px;margin-top:40px}
.pp-fx-progress{position:relative;flex:1;height:2px;background:#2b3a33;overflow:hidden}
.pp-fx-progress i{position:absolute;left:0;top:0;height:100%;width:30%;background:#fff;transition:transform .15s linear}
.pp-fx-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid #33443b;background:transparent;color:#fff;font-size:17px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pp-fx-btn:hover:not(:disabled){background:var(--acid);border-color:var(--acid);color:var(--ink)}
.pp-fx-btn:disabled{opacity:.35;cursor:default}
.pp-fx-btn:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
@media(max-width:900px){.pp-fx-head{grid-template-columns:1fr;gap:16px}}
@media(max-width:680px){.pp-fx-track{margin-right:-20px;padding-right:20px;gap:16px}.pp-fc h3{font-size:22px}.pp-fc-visual{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.pp-fx-track{scroll-behavior:auto}.pp-fc-visual{transition:none}}
/* carousel: bleed to both screen edges, wider cards, no native image dragging */
.pp-fx-track{--gut:max(28px,calc((100vw - 1184px)/2));margin-left:calc(-1 * var(--gut));padding-left:var(--gut);scroll-padding-left:var(--gut)}
.pp-fc{flex-basis:min(560px,84vw)}
.pp-fc-visual{padding:24px 20px}
.pp-fc-window img,.pp-fx-track img{-webkit-user-drag:none;user-select:none;pointer-events:none}
@media(max-width:680px){.pp-fx-track{--gut:20px}}

/* screenshots are cropped to the frame size (816x510) so they show at full sharpness */
.pp-show-stage figure{aspect-ratio:8/5;display:block;background:#fff}
.pp-show-stage img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:top left;image-rendering:auto}

/* ---- spacing: less empty space between sections ---- */
.pp-section{padding-top:80px;padding-bottom:80px}
.pp-hero{padding-bottom:36px}
#why{padding-top:56px}
@media(max-width:680px){.pp-section{padding-top:56px;padding-bottom:56px}#why{padding-top:36px}}

/* ---- two ways to run it: stronger contrast ---- */
.pp-run{gap:22px;align-items:stretch}
.pp-run-main{background:var(--ink)!important;border-color:var(--ink)!important;color:#dfe6e1;box-shadow:12px 12px 0 var(--acid)}
.pp-run-main h3{color:#fff}
.pp-run-main .pp-run-sub{color:var(--acid)}
.pp-run-main>p{color:#c3cdc8!important}
.pp-run-main dl{background:#13201a;border-color:#2b3a33}
.pp-run-main dt{color:#9aa59f}
.pp-run-main dd{color:#fff}
.pp-run-main code{background:#0b1511;border-color:#2b3a33;color:var(--acid)}
.pp-run-main .pp-run-best{color:#c3cdc8}
.pp-run-main .pp-run-best b{color:#fff}
.pp-run-main .pp-badge{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.pp-run-main .pp-badge::before{background:var(--ink)}
.pp-run-planned{background:rgba(255,255,255,.7)!important;border:1.5px dashed #7d8a84!important}
.pp-run-planned .pp-run-sub{color:#9a6a00}
.pp-run-planned>p{color:#3f4944!important}
.pp-run-planned dl{background:#fff;border-color:#d9dcd3}
.pp-run-planned dt{color:#56605b}
.pp-run-planned dd{color:var(--ink);font-weight:500}
.pp-run-planned .pp-badge{background:#fff4d6;border-color:#e0b43a;color:#6b4a00}
.pp-run-planned .pp-badge::before{background:#e0a400}
.pp-run dt{font-weight:500}

/* ---- how it works: one wide row per step (number · what to do · command) ---- */
.pp-steps{grid-template-columns:1fr;border:1px solid var(--ink)}
.pp-steps li{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"num title cmd" "num text cmd";column-gap:28px;row-gap:6px;align-items:center;
  padding:26px 30px;border-left:0;border-top:1px solid var(--line)}
.pp-steps li:first-child{border-top:0}
.pp-steps li:nth-child(3),.pp-steps li:nth-child(n+3){border-left:0}
.pp-steps li:nth-child(n+2){border-top:1px solid var(--line)}
.pp-steps li>span{grid-area:num;align-self:center;width:44px;height:44px;font-size:18px}
.pp-steps h3{grid-area:title;margin:0;align-self:end;font-size:20px}
.pp-steps p{grid-area:text;margin:0;align-self:start;max-width:440px}
.pp-steps .pp-cmd,.pp-band-dark .pp-steps .pp-cmd{grid-area:cmd;margin:0;align-self:center;font-size:13px;padding:14px 16px}
.pp-steps li:hover{background:#fafaf6}
@media(max-width:900px){
  .pp-steps li{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"num title" "num text" "cmd cmd";row-gap:8px;padding:22px}
  .pp-steps .pp-cmd{margin-top:8px}
}

/* ---- FAQ: use the left column ---- */
.pp-faq-help{margin-top:30px;padding:22px 24px;background:#fff;border:1px solid var(--ink);box-shadow:8px 8px 0 var(--acid);max-width:440px}
.pp-faq-help b{display:block;font-size:18px;letter-spacing:-.02em}
.pp-faq-help>span{display:block;margin:6px 0 16px;font-size:14.5px;line-height:1.55;color:#46504b}
.pp-faq-help-actions{display:flex;flex-wrap:wrap;gap:10px}
.pp-faq-help-actions .button{padding:11px 16px;font-size:14px}
.pp-faq summary{padding:20px 0;font-size:17px}

/* ---- hero: entrance animation, activity feed, numbers strip ---- */
@keyframes pp-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pp-slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes pp-sweep{from{background-size:0 100%}to{background-size:100% 100%}}
html.pp-js .pp-enter h1 .hl{animation:pp-sweep .9s cubic-bezier(.2,.72,.25,1) .45s both}
html.pp-js .pp-enter .pp-hero-copy>*{animation:pp-rise .7s cubic-bezier(.2,.72,.25,1) both}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(1){animation-delay:.05s}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(2){animation-delay:.12s}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(3){animation-delay:.2s}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(4){animation-delay:.42s}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(5){animation-delay:.52s}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(6){animation-delay:.62s}
html.pp-js .pp-enter .pp-hero-copy>:nth-child(7){animation-delay:.72s}
html.pp-js .pp-enter .pp-fleet{animation:pp-slide .9s cubic-bezier(.2,.72,.25,1) .35s both}
html.pp-js .pp-enter .pp-fleet-rows li{animation:pp-rise .5s ease both}
html.pp-js .pp-enter .pp-fleet-rows li:nth-child(1){animation-delay:.75s}
html.pp-js .pp-enter .pp-fleet-rows li:nth-child(2){animation-delay:.85s}
html.pp-js .pp-enter .pp-fleet-rows li:nth-child(3){animation-delay:.95s}
html.pp-js .pp-enter .pp-fleet-rows li:nth-child(4){animation-delay:1.05s}
html.pp-js .pp-enter .pp-fleet-bar i{animation:pp-grow 1s cubic-bezier(.2,.72,.25,1) .7s both;transform-origin:left}
@keyframes pp-grow{from{transform:scaleX(0)}to{transform:none}}

/* activity feed inside the fleet card */
.pp-feed{margin-top:18px;padding:14px 16px;background:#0f1a15;border:1px solid #1f2b25}
.pp-feed-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font:11px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#9aa59f}
.pp-feed-title i{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 0 rgba(183,243,67,.6);animation:pp-ping 1.8s ease-out infinite}
@keyframes pp-ping{0%{box-shadow:0 0 0 0 rgba(183,243,67,.55)}100%{box-shadow:0 0 0 8px rgba(183,243,67,0)}}
.pp-feed-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;min-height:66px;overflow:hidden}
.pp-feed-list li{display:flex;gap:10px;align-items:baseline;font-size:12.5px;line-height:1.35;color:#aeb9b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-feed-list li.is-new{animation:pp-feed-in .45s cubic-bezier(.2,.72,.25,1)}
@keyframes pp-feed-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.pp-feed-list time{flex:0 0 30px;font:11px 'DM Mono',monospace;color:#6d7a74}
.pp-feed-list b{font-weight:600;color:var(--c,#fff)}
.pp-feed-list b.ok{--c:var(--acid)}.pp-feed-list b.warn{--c:#f2c94c}.pp-feed-list b.bad{--c:#ff6b5b}

/* numbers strip under the hero */
.pp-stats{padding-top:8px;padding-bottom:40px}
.pp-stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pp-stats li{display:flex;align-items:center;gap:16px;padding:22px 22px;border-left:1px solid var(--line)}
.pp-stats li:first-child{border-left:0;padding-left:0}
.pp-stats b{font-family:var(--font-display,inherit);font-size:52px;line-height:1;letter-spacing:-.05em;font-weight:800;color:var(--ink);min-width:.65em;font-variant-numeric:tabular-nums}
.pp-stats li:nth-child(4) b{color:#4c7b13}
.pp-stats span{font-size:13.5px;line-height:1.45;color:#46504b}
.pp-stats code{font:11.5px 'DM Mono',monospace;background:var(--mint);padding:1px 4px;word-break:break-all}
#why{padding-top:64px}
@media(max-width:1000px){.pp-stats ul{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-stats li:nth-child(3){border-left:0;padding-left:0}.pp-stats li:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:560px){.pp-stats ul{grid-template-columns:1fr}.pp-stats li{border-left:0!important;padding-left:0}.pp-stats li+li{border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){
  html.pp-js .pp-enter .pp-hero-copy>*,html.pp-js .pp-enter h1 .hl,html.pp-js .pp-enter .pp-fleet,html.pp-js .pp-enter .pp-fleet-rows li,html.pp-js .pp-enter .pp-fleet-bar i,.pp-feed-title i,.pp-feed-list li.is-new{animation:none}
}
@media(max-width:560px){.pp-stats ul{grid-template-columns:minmax(0,1fr)}.pp-stats li{padding-right:0;min-width:0}.pp-stats span{min-width:0;overflow-wrap:anywhere}.pp-stats b{font-size:44px}}
.pp-stats{overflow-x:clip}
.pp-stats code{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-all;vertical-align:baseline}
/* the fleet card slides in from the right on wide screens only; never let it widen the page */
.pp-hero{overflow-x:clip}
@media(max-width:900px){html.pp-js .pp-enter .pp-fleet{animation-name:pp-rise}}