/* ============================================================
   PRODUCTS PAGE (/products) — DOSSIER REGISTER
   Scoped to this route only. Loaded in addition to main.css.
   Deliberately does NOT reuse .cap-table/.capability-grid (the
   homepage showcase's card grid) — this page gets its own
   editorial index-list treatment: a vertical dossier of full-width
   rows with strong typographic hierarchy, not equal-width cards.
   Every class here is prefixed .pcat- so it can never collide with,
   or be confused for, a shared/homepage component.
   ============================================================ */

.pcat-register{position:relative;padding:var(--sp-6) 0 0;}

/* ---- Header (additive to the shared .page-header — that base rule is untouched) ---- */
.pcat-header{overflow:hidden;}
.pcat-header-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 82% 20%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 82% 20%,#000 0%,transparent 72%);}
/* inset top = var(--sp-7); the 28px sides/bottom are a deliberate, consistently-reused
   "fixed-chrome edge inset" used by every viewport-edge-hugging HUD/nav element on this
   page (.pcat-rail's left offset below matches it too) — a distinct convention from the
   --sp-N content-rhythm scale, not an inconsistency. */
.pcat-header-hud{position:absolute;inset:var(--sp-7) 28px 28px;pointer-events:none;z-index:1;}
.pcat-header-hud span{position:absolute;width:16px;height:16px;border-color:var(--border-mid);border-style:solid;border-width:0;}
.pcat-header-hud .tl{top:0;left:0;border-top-width:1px;border-left-width:1px;}
.pcat-header-hud .tr{top:0;right:0;border-top-width:1px;border-right-width:1px;}
.pcat-header-hud .bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;}
.pcat-header-hud .br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;}
.pcat-header .canvas{position:relative;z-index:2;}
.pcat-header-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--border-hairline);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);}

/* ---- Sticky system-index rail: fixed HUD-style navigator, scroll-tracked via inline script ---- */
/* left:28px — the same fixed-chrome edge inset as .pcat-header-hud, not the --sp scale. */
.pcat-rail{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;gap:var(--sp-2);opacity:0;transition:opacity .4s ease;pointer-events:none;}
.pcat-rail.is-visible{opacity:1;pointer-events:auto;}
.pcat-rail a{position:relative;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--text-faint);padding-left:var(--sp-2);transition:color .35s ease;}
.pcat-rail a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--border-mid);
  transform:translateY(-50%);transition:background-color .35s ease,width .35s ease;}
.pcat-rail a:hover{color:var(--text-primary);}
.pcat-rail a.is-active{color:var(--accent-signal);}
.pcat-rail a.is-active::before{background:var(--accent-signal);width:14px;}
/* The rail may only exist where the viewport has a genuinely free gutter left of the
   1440px canvas: rail box ends at x≈57, so the canvas must start at ≥60 → viewport
   ≥1560px. Below that the fixed rail floats over the register rows' own number
   column (rows start their content at x≈50) and the two number stacks interleave
   into one illegible column — the exact "rail numbers overlap/misaligned" defect
   reported against this page. Better absent than colliding. */
@media (max-width:1559px){.pcat-rail{display:none;}}
.pcat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border-mid);margin-bottom:0;}
.pcat-head .l{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}
/* margin-right:12px — tight inline gap between the bold "SEC. 01" run-in label and the
   text that follows it, deliberately smaller than --sp-2 for a run-in-label feel. */
.pcat-head .l b{color:var(--accent-signal);font-weight:500;margin-right:12px;}
.pcat-head .r{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);}

.pcat-rows{position:relative;display:flex;flex-direction:column;}
.pcat-rows::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;z-index:0;
  background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 92% 50%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 100% at 92% 50%,#000 0%,transparent 72%);}

.pcat-row{position:relative;z-index:1;display:block;border-bottom:1px solid var(--border-hairline);overflow:hidden;
  transition:background-color .4s ease;}
.pcat-row:hover,.pcat-row:focus-visible{background-color:rgba(79,120,255,.04);}
.pcat-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--color-brand-hover);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out);}
.pcat-row:hover::before,.pcat-row:focus-visible::before{transform:scaleY(1);}
/* Mechanical top-to-bottom scan-line, linear timing — an instrument sweep, not a decorative shine. */
.pcat-row::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(79,120,255,.65),transparent);
  transition:top .6s linear;}
.pcat-row:hover::after,.pcat-row:focus-visible::after{top:100%;}

.pcat-row-inner{position:relative;display:grid;
  grid-template-columns:64px 168px minmax(0,1fr) auto;column-gap:var(--sp-4);align-items:center;
  padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 2px);}
.pcat-row.pcat-lead .pcat-row-inner{padding-top:var(--sp-6);padding-bottom:var(--sp-6);}

.pcat-num{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--text-faint);
  font-variant-numeric:tabular-nums;transition:color .4s ease;align-self:start;padding-top:.5em;}
.pcat-row:hover .pcat-num,.pcat-row:focus-visible .pcat-num{color:var(--accent-signal);}

.pcat-id{display:flex;flex-direction:column;gap:var(--sp-1);align-self:start;padding-top:.35em;}
.pcat-glyph{width:30px;height:30px;color:var(--text-secondary);transition:color .4s ease;}
.pcat-row:hover .pcat-glyph,.pcat-row:focus-visible .pcat-glyph{color:var(--accent-signal);}
.pcat-id .pcat-code{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-secondary);}
.pcat-id .pcat-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);
  writing-mode:vertical-rl;transform:rotate(180deg);height:120px;}
.pcat-row.pcat-lead .pcat-id .pcat-cat{color:var(--accent-alert);}

.pcat-main h3{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-0.015em;
  font-size:clamp(24px,2.6vw,34px);line-height:1.08;margin:0 0 var(--sp-1);color:var(--text-primary);}
.pcat-row.pcat-lead .pcat-main h3{font-size:clamp(32px,3.6vw,48px);}
.pcat-main h3 em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-primary);}
.pcat-main p{font-size:14.5px;line-height:1.7;color:var(--text-secondary);max-width:var(--measure-prose);margin:0 0 var(--sp-2);}
.pcat-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);}
/* padding:5px 10px — a compact mono tag/chip, deliberately tighter than --sp-1 so a row
   of chips reads as small UI atoms, not spacing-rhythm blocks. */
.pcat-chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-secondary);
  border:1px solid var(--border-mid);padding:5px 10px;white-space:nowrap;transition:border-color .4s ease,color .4s ease;}
.pcat-row:hover .pcat-chip,.pcat-row:focus-visible .pcat-chip{border-color:rgba(79,120,255,.4);color:var(--text-primary);}

.pcat-go{align-self:start;padding-top:.5em;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-signal);display:flex;align-items:center;gap:var(--sp-1);white-space:nowrap;opacity:.55;
  transition:opacity .4s ease;}
.pcat-row:hover .pcat-go,.pcat-row:focus-visible .pcat-go{opacity:1;}
.pcat-go .a{transition:transform var(--dur-hover) ease;}
.pcat-row:hover .pcat-go .a,.pcat-row:focus-visible .pcat-go .a{transform:translateX(4px);}

/* ---- Secondary tier: capability areas as a compact index strip, not a card grid ---- */
/* Vertical longhands only — this element also carries .canvas, whose horizontal
   padding must survive (a padding shorthand here shifted the whole block to x=0
   at ≥1280 and erased its vertical rhythm at ≤1279). */
.pcat-caps{padding-top:var(--sp-7);padding-bottom:var(--sp-6);}
.pcat-caps-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-mid);margin-bottom:var(--sp-4);}
.pcat-caps-head h2{font-size:20px;}
.pcat-caps-head span{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}
.pcat-ruler{display:flex;justify-content:space-between;margin-bottom:var(--sp-2);}
.pcat-ruler span{width:1px;height:6px;background:var(--border-mid);}
.pcat-strip{display:grid;grid-template-columns:repeat(4,1fr);}
.pcat-strip-item{padding:0 var(--sp-4) 0 0;border-left:1px solid var(--border-hairline);padding-left:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-1);transition:background-color .35s ease;}
.pcat-strip-item:hover{background-color:rgba(79,120,255,.035);}
.pcat-strip-item:first-child{border-left:none;padding-left:0;}
.pcat-strip-item .pcat-rn{font-family:var(--font-serif);font-style:italic;font-size:28px;color:var(--accent-alert);line-height:1;transition:color .35s ease;}
.pcat-strip-item:hover .pcat-rn{color:var(--accent-signal);}
.pcat-strip-item h4{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-0.005em;}
/* gap:6px — tighter than --sp-1, deliberate: this is a short list of one-line capability
   bullets, meant to read as a single tight block, not spaced-out rhythm items. */
.pcat-strip-item ul{display:flex;flex-direction:column;gap:6px;}
/* padding-left:14px — sized to clear the "—" bullet glyph placed via ::before, a functional
   indent tied to the marker's own width, not a spacing-rhythm gap. */
.pcat-strip-item li{font-size:12.5px;line-height:1.6;color:var(--text-secondary);padding-left:14px;position:relative;}
.pcat-strip-item li::before{content:"—";position:absolute;left:0;color:var(--text-faint);}

@media (max-width:1023px){
  .pcat-row-inner{grid-template-columns:44px 1fr;row-gap:var(--sp-2);}
  .pcat-id{flex-direction:row;align-items:center;gap:var(--sp-2);padding-top:0;}
  .pcat-id .pcat-cat{writing-mode:horizontal-tb;transform:none;height:auto;}
  .pcat-main{grid-column:1/-1;}
  .pcat-go{grid-column:1/-1;padding-top:0;}
  .pcat-strip{grid-template-columns:1fr 1fr;row-gap:var(--sp-4);}
  .pcat-strip-item:nth-child(2){border-left:1px solid var(--border-hairline);}
  .pcat-strip-item:nth-child(3){border-left:none;padding-left:0;}
}
@media (max-width:640px){
  .pcat-row-inner{padding:var(--sp-4);}
  .pcat-row.pcat-lead .pcat-row-inner{padding:var(--sp-4);}
  .pcat-main h3,.pcat-row.pcat-lead .pcat-main h3{font-size:clamp(24px,8vw,32px);}
  .pcat-strip{grid-template-columns:1fr;row-gap:var(--sp-4);}
  .pcat-strip-item{border-left:none!important;padding-left:0!important;border-top:1px solid var(--border-hairline);padding-top:var(--sp-3);}
  .pcat-strip-item:first-child{border-top:none;padding-top:0;}
  .pcat-header-hud{display:none;}
  .pcat-header-meta{gap:var(--sp-3);font-size:9.5px;}
}

/* ============================================================
   PRODUCTS PAGE — FEATURED SHOWCASE (product-first composition).
   Scoped .pshow-* classes, additive. Data-driven: the inline page
   script renders one product at a time from products[]; pagination
   swaps the current index. Reuses tokens, .btn/.btn-primary, the
   .page-header h1 type, and the navy-grid "cover visual" idiom for
   image frames (drop a real photo via product.image — object-fit
   keeps it undistorted). No shared component is restyled.
   ============================================================ */
.pshow-section{padding:var(--sp-6) 0 var(--sp-8);}

/* Showcase: visual dominates (~62%), info supports (~38%); stacks on tablet/mobile */
.pshow{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:var(--sp-6);align-items:center;}
.pshow-visual{min-width:0;}
.pshow-info{min-width:0;}

/* Premium image frame — fixed aspect ratio, object-fit keeps any source undistorted */
.pshow-frame{position:relative;aspect-ratio:16/11;border:1px solid var(--border-mid);border-radius:14px;overflow:hidden;
  background:radial-gradient(58% 54% at 50% 46%, rgba(111,156,255,.15), rgba(79,120,255,.05) 45%, transparent 72%),
    linear-gradient(135deg,#0C142A,#0A1428);display:flex;align-items:center;justify-content:center;}
.pshow-frame::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 42%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 74% 74% at 50% 42%,#000,transparent 76%);}
.pshow-frame__glyph{position:relative;z-index:1;width:30%;max-width:210px;color:var(--accent-signal);opacity:.55;}
.pshow-frame__glyph svg{width:100%;height:auto;display:block;}
.pshow-frame__img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;padding:var(--sp-5);
  filter:drop-shadow(-14px 22px 40px rgba(0,0,0,.5));}
.pshow-frame__tag{position:absolute;z-index:3;left:16px;bottom:14px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}

/* Info column — readable measure, existing type scale */
.pshow-eyebrow{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-signal);margin-bottom:var(--sp-2);}
.pshow-name{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-0.02em;
  font-size:clamp(30px,3.4vw,50px);line-height:1.02;color:var(--text-primary);margin:0 0 var(--sp-3);text-wrap:balance;}
.pshow-desc{font-family:var(--font-body);font-size:15.5px;line-height:1.7;color:var(--text-secondary);margin:0 0 var(--sp-4);max-width:46ch;}
.pshow-specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-5);}
.pshow-spec{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--border-mid);padding:5px 10px;}

/* Subtle crossfade on product swap (honours reduced motion) */
.pshow-visual,.pshow-info{transition:opacity var(--dur-hover) var(--ease-out);}
.pshow.is-swapping .pshow-visual,.pshow.is-swapping .pshow-info{opacity:0;}

/* Pagination — subtle, reuses the mono/hairline idiom; future products plug in via data */
.pshow-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-7);flex-wrap:wrap;}
.pshow-arrow{width:42px;height:42px;flex:none;border:1px solid var(--border-mid);background:transparent;color:var(--text-secondary);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color var(--dur-hover) ease,color var(--dur-hover) ease,background-color var(--dur-hover) ease;}
.pshow-arrow:hover,.pshow-arrow:focus-visible{border-color:var(--accent-signal);color:var(--text-primary);background:var(--surface-secondary);}
.pshow-arrow svg{width:18px;height:18px;}
.pshow-dots{display:flex;align-items:center;gap:10px;}
.pshow-dot{width:9px;height:9px;padding:0;flex:none;border:1px solid var(--color-border-strong);border-radius:50%;background:transparent;
  cursor:pointer;transition:background-color var(--dur-hover) ease,width var(--dur-hover) ease,border-color var(--dur-hover) ease;}
.pshow-dot:hover{border-color:var(--accent-signal);}
.pshow-dot.is-active{background:var(--accent-signal);border-color:var(--accent-signal);width:24px;border-radius:999px;cursor:default;}
.pshow-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text-faint);margin-left:var(--sp-2);}

@media (max-width:900px){
  .pshow{grid-template-columns:1fr;gap:var(--sp-5);}
  .pshow-info{max-width:60ch;}
}
@media (prefers-reduced-motion:reduce){
  .pshow-visual,.pshow-info{transition:none;}
  .pshow.is-swapping .pshow-visual,.pshow.is-swapping .pshow-info{opacity:1;}
}