/* =============================================================
   SiloTech — SiloForge program detail pages.
   Loaded after site.css and service.css (reuses titleblock,
   wb-hero, band-lead, wb-intro, register, rel-grid).
   ============================================================= */

/* numbered "what it checks" register */
.checkreg { border-top: 1px solid rgba(249,249,242,0.16); margin-top: 24px; }
.checkreg .row { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(249,249,242,0.13); align-items: baseline; }
.checkreg .row .n { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--accent-soft); }
.checkreg .row .t { font-size: 1.02rem; color: var(--st-navy-100); }

/* code chips */
.codes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.codes span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--st-navy-100); border: 1px solid rgba(249,249,242,0.2); padding: 9px 14px; }

/* output + codes split */
.oc-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items: start; }
.oc-grid .out p { font-size: 1.05rem; line-height: 1.6; color: var(--st-navy-100); margin: 14px 0 0; max-width: 46ch; }
.oc-grid .out .pkg { margin-top: 22px; border-top: 3px solid var(--accent); background: var(--st-charcoal-200); padding: 20px 22px; }
.oc-grid .out .pkg .l { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-navy-200); }
.oc-grid .out .pkg .v { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; color: var(--st-cream); font-size: 1.05rem; margin-top: 6px; }
@media (max-width: 820px){ .oc-grid { grid-template-columns: 1fr; gap: 30px; } }

/* hero secondary line under title block icon: governs pill */
.tb-mid .governs { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); }
.tb-mid .governs::before { content: ""; width: 14px; height: 2px; background: var(--accent); }

/* program hero: center the rendered title itself, not only its text column */
body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal:first-child {
  display: grid;
  justify-items: center;
  width: 100vw;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  text-align: center;
}

body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal:first-child h1 {
  width: max-content;
  max-width: 100vw;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 760px) {
  body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal:first-child h1 {
    width: max-content;
    max-width: 100vw;
    font-size: clamp(1.85rem, 9.6vw, 3.4rem) !important;
  }
}

/* Bare demo film fills the laptop screen edge-to-edge. The film is 1476×950
   (≈1.554); the default .pdemo-screen is 16/10 (1.60, wider), which letterboxed
   ~1.45% of black on each side. Match the screen to the film aspect so the video
   (object-fit:cover) fills with no side dead space and no crop. Scoped to screens
   that actually hold a demo video, so any fake .pdemo mockup is untouched. */
.pdemo-screen:has(> video.pdemo-video) { aspect-ratio: 1476 / 950; }

/* Each film carries a ~4px FULLY-TRANSPARENT border on its left and right edges
   (opaque UI spans cols 4–1471 of 1476). Matched 1:1, that border sits at the
   screen edge and shows the black screen as a thin sliver. A tiny uniform overscan
   (~1.3%, clipped by the screen's overflow:hidden) pushes the transparent border
   off-screen — buried with ~2.4× margin, viewport-independent. The few px of real
   UI lost top/bottom is imperceptible. */
.pdemo-screen > video.pdemo-video { object-fit: cover; transform: scale(1.013); }