/* Product pages, v3 (research/v2/DESIGN-v3.md, 29 Oct 2026; lane P): hosted EVE-NG (/eve-ng-online/) and native
   access (/native-access.html). Barry: "where is the professional touch?", "add a dark mode", "more cool things".
   So: left-aligned heroes with the real product window on the right, crisp cards with a product-colour top edge,
   patch.css type at normal width, dense real facts from build tokens, and both themes from tokens only (the patch
   panel is anodised hardware, so its own dark colours stay in both themes, as on the home page). Native access
   reuses the ways in (css/ways.css, js/ways.mjs) with the home page's 1U patch panel above them. Parts copied from
   home.css (proof row, section heads, ticker, patch panel) keep their rules so they can be promoted as they are. */

/* ---------- Hero: copy left, the real product right ---------- */
.pp-hero{padding:clamp(40px,6vw,88px) 0 0;overflow-x:clip}
.pp-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center}
.pp-hero__copy{display:grid;gap:var(--s-5);align-content:center}
.pp-hero__copy .t-title{max-width:12.5em}
.pp-hero__status{display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:34px;padding:0 14px 0 12px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);box-shadow:var(--shadow-card);font-size:14px;color:var(--c-ink-2)}
.pp-hero__status .live{min-height:0;font-size:14px}
.live--bare::before{display:none}
.pp-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.pp-hero__meta{font-size:15px;color:var(--c-ink-3)}
.pp-hero__meta strong{color:var(--c-ink);font-weight:600}
.pp-hero__cmd{max-width:30em;box-shadow:var(--shadow-card)}
.pp-hero__cmd code{font-size:14.5px}
.pp-hero__media,.pp-hero__device{position:relative;display:grid;min-width:0}
.pp-hero__device{padding-bottom:var(--s-4)}
.pp-hero__window{position:relative;z-index:2}
.pp-hero__device .pp-hero__window{border-radius:var(--r-win) var(--r-win) 6px 6px}
.pp-hero__device .pp-hero__window .footage__frame{border-radius:inherit}
@media (prefers-reduced-motion:no-preference){
 .pp-hero__media,.pp-hero__device{animation:pp-device-in .9s var(--ease-out) .1s both}
 @keyframes pp-device-in{from{opacity:0;transform:translateY(28px)}}
}

/* ---------- The 1U patch panel under the console server (native access): the same hardware as the home page ---------- */
.panel{position:relative;z-index:3;display:flex;align-items:center;gap:14px;height:76px;margin:10px 6px 0;padding:0 14px;border-radius:6px;
 background:linear-gradient(180deg,#2b3446 0%,#1d2533 46%,#171e2a 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4),0 10px 24px -10px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35)}
.panel::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.panel__ear{display:grid;place-items:center;flex:none;width:18px;height:46px;border-radius:3px;background:linear-gradient(180deg,#2a3243,#1a212d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.panel__ear i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a95a8,#3b4456 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.panel__ear i::after{content:'';display:block;width:7px;height:1.5px;margin:3.75px auto 0;background:rgba(0,0,0,.55);transform:rotate(-35deg)}
.panel__name{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);font:600 9.5px/1 var(--f-mono);letter-spacing:.08em;color:#7d889b}
.panel__ports{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.pport{position:relative;display:grid;justify-items:center;gap:5px;padding:6px 0 4px;border-radius:6px;text-decoration:none;color:#9aa6b8;outline-offset:2px}
.pport__led{width:7px;height:7px;border-radius:50%;background:#2f3a2f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:background-color .2s,box-shadow .2s}
.pport__jack{position:relative;width:38px;height:28px;border-radius:4px;background:#0a0e14;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
.pport__jack i{position:absolute;left:5px;right:5px;top:4px;bottom:3px;border-radius:3px;background:var(--k);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.25)}
.pport__jack i::after{content:'';position:absolute;left:9px;right:9px;top:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.55)}
.pport__label{font:600 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#9aa6b8}
.pport:hover .pport__label,.pport:focus-visible .pport__label{color:#e7edf5}
.pport:hover .pport__jack i{filter:brightness(1.12)}
.pport[data-link] .pport__led{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.75),0 0 0 1px rgba(0,0,0,.35)}
.pport[data-act] .pport__led{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.7),0 0 0 1px rgba(0,0,0,.35)}

/* ---------- Proof row: real numbers from build tokens ---------- */
.pp-proof{position:relative;z-index:1;padding:clamp(40px,5vw,72px) 0 0}
.pp-proof__row{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));margin:0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.pp-proof__row>div{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border-left:1px solid var(--c-line)}
.pp-proof__row>div:first-child{border-left:0}
.pp-proof__row dt{order:2;font-size:14px;color:var(--c-ink-3)}
.pp-proof__row dd{order:1;margin:0;font:650 clamp(24px,2.3vw,32px)/1.1 var(--f-display);letter-spacing:-.012em;color:var(--c-ink);white-space:nowrap}
.pp-proof__row dd.t-mono{font:600 clamp(20px,1.9vw,26px)/1.25 var(--f-mono);letter-spacing:-.01em}
.pg-native .pp-proof{padding-bottom:var(--s-10)}

/* ---------- Section heads ---------- */
.pp-head{display:grid;gap:var(--s-4);max-width:40em;margin-bottom:var(--s-8)}
.pp-head--split{max-width:none;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-7);align-items:end}
.pp-head--split .t-lede{max-width:none}

/* ---------- Crisp cards and small mono tags ---------- */
.pp-card{position:relative;display:grid;align-content:start;gap:var(--s-3);padding:28px 28px 30px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.pp-card--edge::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k)}
.pp-card p{font-size:15.5px;color:var(--c-ink-2)}
.pp-tag{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--f-mono);letter-spacing:.02em;color:var(--c-ink-3)}
.pp-tag::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--k,var(--k-blue))}

/* ---------- What it's like: real steps beside one window (a radio group picks the screen; no script) ---------- */
.steps{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head head" "list view" "more view";column-gap:var(--s-8);row-gap:var(--s-5);align-items:start}
.steps__head{grid-area:head;display:grid;gap:var(--s-4);max-width:35.5em;margin-bottom:var(--s-6)}
.steps__list{grid-area:list;display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
.steps__view{grid-area:view;display:grid;gap:var(--s-6);min-width:0}
.steps__more{grid-area:more;align-self:start;min-width:0;padding:var(--s-3) 0 0 18px}
.step{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px 18px;border:1px solid transparent;border-radius:var(--r-card);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.step input{position:absolute;opacity:0;pointer-events:none}
.step:hover{background:var(--c-hover)}
.step:has(input:checked){background:var(--c-surface);border-color:var(--c-line);box-shadow:var(--shadow-card)}
.step:has(input:focus-visible){outline:2px solid var(--c-focus);outline-offset:2px}
.step__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-signal-wash);font:640 13.5px/1 var(--f-sans);font-variant-numeric:tabular-nums;color:var(--c-signal)}
.step:has(input:checked) .step__n{background:var(--c-act);color:var(--c-act-ink)}
.step__text{display:grid;gap:4px;padding-top:3px}
.step__text strong{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--c-ink)}
.step__text span{font-size:15px;line-height:1.5;color:var(--c-ink-3)}
/* Only the chosen step's screen shows; where :has() isn't supported, every screen shows in order. */
.steps:has(input[value=canvas]:checked) .step-shot:not([data-step=canvas]),
.steps:has(input[value=add]:checked) .step-shot:not([data-step=add]),
.steps:has(input[value=console]:checked) .step-shot:not([data-step=console]){display:none}
@media (prefers-reduced-motion:no-preference){
 .steps:has(input:checked) .step-shot{animation:pp-shot-in .38s var(--ease-out)}
 @keyframes pp-shot-in{from{opacity:0;transform:translateY(10px)}}
}

/* ---------- The guided labs in the Shared folder: a dated spec table beside the real folder ---------- */
.pp-lib{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:center}
.pp-lib__text{display:grid;gap:var(--s-4)}
.pp-spec{margin:var(--s-2) 0 0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.pp-spec>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);padding:10px 16px;border-top:1px solid var(--c-line);font-size:15px}
.pp-spec>div:first-child{border-top:0}
.pp-spec dt{color:var(--c-ink-2)}
.pp-spec dd{margin:0;font:600 14px/1.4 var(--f-mono);color:var(--c-ink);font-variant-numeric:tabular-nums}
.pp-spec>.pp-spec__total{background:var(--c-surface-2)}
.pp-spec__total dt,.pp-spec__total dd{color:var(--c-ink);font-weight:600}

/* ---------- Image ticker and finder ---------- */
.ticker{display:grid;gap:10px;margin:0 0 var(--s-7);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__row{overflow:hidden}
.ticker__track{display:flex;gap:10px;width:max-content}
.ticker__track span{flex:none;padding:8px 14px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-surface);font:500 13.5px/1 var(--f-mono);color:var(--c-ink-2);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
 .ticker__track{animation:pp-tick 90s linear infinite}
 .ticker__row--rev .ticker__track{animation-direction:reverse;animation-duration:110s}
 .ticker:hover .ticker__track{animation-play-state:paused}
 @keyframes pp-tick{to{transform:translateX(-50%)}}
}
.pp-find{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
.pp-find__text{display:grid;gap:var(--s-4);position:sticky;top:calc(var(--header-h) + 40px)}
.pp-find .note{margin-top:var(--s-1)}
.pp-find .finder{border-color:var(--c-line);border-radius:var(--r-card);padding:var(--s-6);background:var(--c-surface);box-shadow:var(--shadow-card)}

/* ---------- Plans: the shared plan cards, with this page's sizing line under them ---------- */
.pp-plans__note{max-width:36.5em;margin:var(--s-6) auto 0;text-align:center;font-size:15.5px;color:var(--c-ink-2)}
.pp-plans__more{margin-top:var(--s-4);text-align:center}

/* ---------- The free demo: the shared panel as a crisp card (copy left, the action right) ---------- */
.pp-cta{padding:var(--s-10) 0}
.band:not(.band--alt)+.pp-cta,.pp-cta+.band:not(.band--alt){padding-top:0}
.cta__panel--card{position:relative;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"title act" "lede act" "live act";justify-items:start;align-items:center;column-gap:var(--s-8);row-gap:var(--s-3);padding:clamp(32px,4vw,56px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);text-align:left;overflow:hidden}
.cta__panel--card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k,var(--k-blue))}
.cta__panel--card>h2{grid-area:title}
.cta__panel--card>.t-lede{grid-area:lede;max-width:34em}
.cta__panel--card>.live{grid-area:live}
.cta__panel--card>.cta__actions{grid-area:act;justify-self:end;margin:0}

/* ---------- Questions (and troubleshooting): heading beside native disclosures ---------- */
.pp-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8);align-items:start}
.pp-faq__head{display:grid;gap:var(--s-4);position:sticky;top:calc(var(--header-h) + 40px)}
.pp-faq__q{margin:0;font:inherit;letter-spacing:inherit}
.pp-faq__list .disclosure__body p+p{margin-top:var(--s-3)}

/* ---------- Native access: ways, help text stand-ins (a dark terminal, as real ones are), how it works ---------- */
.pg-native .ways{padding-top:clamp(112px,13vw,184px)}
.pp-term-body{background:var(--c-term-bg)}
.pp-term{position:absolute;inset:0;margin:0;padding:clamp(18px,2.6vw,32px) clamp(18px,2.8vw,36px);overflow:hidden;font:400 clamp(11.5px,1.15vw,15px)/1.65 var(--f-mono);font-variant-ligatures:none;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--c-term-fg)}
.pp-term__p{color:var(--c-term-hi);font-weight:560}
.way-panel kbd{font-size:.8em}

.pp-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center}
.pp-how__text{display:grid;gap:var(--s-5)}
.pp-how__steps{margin-top:var(--s-2)}
.pp-how__steps strong{font-size:17px;font-weight:600;letter-spacing:-.01em}
.pp-how__steps p{font-size:15.5px;color:var(--c-ink-2)}

.pp-clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}

.pp-reach{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-8);align-items:start}
.pp-reach__text{display:grid;gap:var(--s-5)}
/* What the console server reaches: each service as a labelled port, like the jacks on a patch panel. */
.pp-ports{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-2);list-style:none}
.pp-ports li{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--c-line);border-radius:var(--r-fig);background:var(--c-surface);box-shadow:var(--shadow-card);font-size:14.5px;color:var(--c-ink-2)}
.pp-ports b{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 8px;border-radius:6px;background:var(--c-socket);box-shadow:inset 0 1px 2px rgba(0,0,0,.22);font:600 13px/1 var(--f-mono);color:var(--c-ink)}
.pp-key code{font-size:13px}

/* Names and commands: EVE-NG never breaks at its hyphen; long commands in running text wrap at their spaces. */
.nw{white-space:nowrap}
.way-panel__cap code,.pp-how__steps code,.pp-card code,.pp-lib code,.pp-faq__list code,.pp-reach code,.pp-hero__meta code{white-space:normal;overflow-wrap:anywhere}

/* ---------- Sections below the fold skip work while far off screen ---------- */
.pp main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 900px}
@media print{.pp main>section{content-visibility:visible}}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
 .pp-hero__grid{grid-template-columns:1fr}
 .pp-hero__copy .t-title{max-width:15em}
 .steps{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"head" "list" "view" "more";column-gap:0}
 .steps__head{margin-bottom:var(--s-2)}
 .steps__more{padding-left:0}
 .pp-lib,.pp-find,.pp-faq,.pp-how,.pp-reach{grid-template-columns:1fr;gap:var(--s-6)}
 .pp-find__text,.pp-faq__head{position:static}
 .pp-head--split{grid-template-columns:1fr;gap:var(--s-4)}
 .pp-proof__row{grid-template-columns:repeat(3,minmax(0,1fr))}
 .pp-proof__row>div:nth-child(4){border-left:0}
 .pp-proof__row>div:nth-child(n+4){border-top:1px solid var(--c-line)}
 .pg-native .pp-proof__row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-native .pp-proof__row>div:nth-child(3){border-left:0;border-top:1px solid var(--c-line)}
 .pg-native .pp-proof__row>div:nth-child(4){border-left:1px solid var(--c-line)}
 .pp-clients{grid-template-columns:1fr}
 .pg-native .ways{padding-top:var(--s-9)}
 .cta__panel--card{grid-template-columns:1fr;grid-template-areas:"title" "lede" "live" "act"}
 .cta__panel--card>.cta__actions{justify-self:start;margin-top:var(--s-2)}
}
@media (max-width:620px){
 .panel{height:auto;padding:10px;gap:8px}
 .panel__name,.panel__ear{display:none}
 .panel__ports{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}
 .pp-proof__row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-proof__row>div{border-left:0;border-top:1px solid var(--c-line);padding:18px 18px}
 .pp-proof__row>div:nth-child(-n+2){border-top:0}
 .pp-proof__row>div:nth-child(even){border-left:1px solid var(--c-line)}
 .pp-proof__row>div:last-child:nth-child(odd){grid-column:1/-1;border-left:0}
 .pp-proof__row dd{white-space:normal}
}
@media (max-width:520px){
 .pp-hero__actions .btn{flex:1 1 100%}
 .pp-hero__cmd code{font-size:13px}
 .step{padding:14px 12px 16px;gap:12px}
 .pp-cta{padding:var(--s-8) 0}
 .pp-card{padding:22px 20px 24px}
 .pp-spec>div{padding:10px 12px}
 /* Phone: the help text needs its own height rather than a fixed box. */
 .pp-term-body{aspect-ratio:auto}
 .pp-term{position:static;padding:16px 16px 18px;font-size:12px}
}
@media (forced-colors:active){
 .pp-card,.pp-ports li,.step,.pp-proof__row,.pp-spec,.panel,.cta__panel--card{border:1px solid CanvasText}
 .step:has(input:checked){outline:2px solid Highlight;outline-offset:1px}
 .step__n,.pp-tag::before,.pp-card--edge::before,.cta__panel--card::before,.pport__jack i,.pport__led{forced-color-adjust:none}
}