/* ============================================================
   Products — a software launch, not consulting content.
   Dark stage throughout, screenshots at large scale, one accent
   hue per product. Deliberately unlike Industries (editorial)
   and Solutions (case study).
   ============================================================ */

/* The whole section runs dark regardless of the viewer's theme: the products
   are shown the way they actually look, and the inversion is the point. */
.pstage{
  --cream:#0A0B0A; --paper:#141714; --ink:#F2F4F1; --soft:#A6ADA6; --faint:#6E756E;
  --line:#242824; --line-soft:#1C201C; --accent-text:#22A876;
  background:var(--cream);color:var(--ink);min-height:100vh}
.pstage h1,.pstage h2,.pstage h3{color:var(--ink)}

/* ---------- index masthead ---------- */
.px-hero{padding-top:clamp(8rem,13vw,11rem);padding-bottom:clamp(2rem,4vw,3rem)}
.px-hero h1{max-width:16ch;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.03}
.px-hero .lead{margin-top:1.4rem;max-width:48ch}

/* ---------- the six, as one composed stack ---------- */
.px-tier{margin-top:clamp(2.4rem,5vw,3.6rem)}
.px-tier-label{display:flex;align-items:baseline;gap:.9rem;padding-bottom:.9rem;
  border-bottom:1px solid var(--line)}
.px-tier-label b{font-family:var(--s);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.px-tier-label span{font-family:var(--s);font-size:.84rem;color:var(--soft)}
.px-row{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-top:0;border-radius:0 0 14px 14px;overflow:hidden}
.px-row.two{grid-template-columns:1fr 1fr}
@media(max-width:780px){.px-row.two{grid-template-columns:1fr}}
.px-cell{display:block;background:#0F120F;padding:clamp(1.5rem,3vw,2.2rem);
  text-decoration:none;transition:background .25s}
.px-cell:hover{background:#141914}
.px-cell-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.px-name{display:inline-flex;align-items:baseline;gap:.14em;font-family:var(--s);
  font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:700;letter-spacing:-.015em}
.px-name i{font-family:var(--d);font-style:italic;font-weight:520;font-size:1.34em;line-height:1}
.px-status{font-family:var(--s);font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:.24rem .55rem;border-radius:100px;
  background:rgba(255,255,255,.06);color:var(--faint);flex:none;white-space:nowrap}
.px-status.live{background:rgba(34,168,118,.16);color:#5FD3A6}
.px-say{display:block;margin-top:.85rem;font-family:var(--s);font-size:.98rem;color:var(--soft);
  line-height:1.62;max-width:44ch}
.px-go{display:inline-flex;clear:both;align-items:center;gap:.4rem;margin-top:1.1rem;font-family:var(--s);
  font-size:.88rem;font-weight:600}
.px-go .a{transition:transform .25s}
.px-cell:hover .px-go .a{transform:translateX(5px)}

/* ---------- detail page ---------- */
.pd-hero{padding-top:clamp(7.5rem,12vw,10rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.pd-name{margin:0;display:inline-flex;align-items:baseline;gap:.15em;font-family:var(--s);
  font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.pd-name i{font-family:var(--d);font-style:italic;font-weight:520;font-size:1.3em}
.pd-line{margin-top:1.2rem;font-family:var(--d);font-weight:440;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.12;max-width:20ch;color:var(--ink)}
.pd-say{margin-top:1.2rem;font-family:var(--s);font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--soft);line-height:1.68;max-width:50ch}

/* a screenshot gets the room it deserves */
.pd-shot{margin-top:clamp(2rem,4.5vw,3.2rem);border-radius:var(--r-md);overflow:hidden;
  border:1px solid #2A2F2A;background:#0F120F;box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.pd-shot img{width:100%;height:auto;display:block}
.pd-shot figcaption{padding:.9rem 1.2rem;border-top:1px solid #2A2F2A;
  font-family:var(--s);font-size:.82rem;color:var(--soft)}
.pd-shot figcaption b{color:var(--ink);font-weight:600}

/* capabilities: each paired with the screen that demonstrates it */
.pd-cap{border-top:1px solid var(--line);padding-block:clamp(2.6rem,5.5vw,4.5rem);
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.pd-cap.flip .pd-cap-media{order:-1}
@media(max-width:880px){.pd-cap{grid-template-columns:1fr;gap:1.5rem}
  .pd-cap.flip .pd-cap-media{order:0}}
.pd-cap h3{font-family:var(--d);font-weight:500;font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1;max-width:18ch}
.pd-cap p{margin-top:1rem;font-family:var(--s);font-size:1.01rem;color:var(--soft);
  line-height:1.68;max-width:46ch}
.pd-cap-media{border-radius:14px;overflow:hidden;border:1px solid #2A2F2A;background:#0F120F}
.pd-cap-media img{width:100%;height:auto;display:block}

/* how it composes with the other five */
.pd-compose{border-top:1px solid var(--line);padding-block:clamp(2.6rem,5.5vw,4.5rem)}
.pd-compose h2{max-width:20ch}
.pd-compose .lead{margin-top:1rem;max-width:52ch;color:var(--soft)}

/* grounded in real work */
.pd-ground{border-top:1px solid var(--line);padding-block:clamp(2.6rem,5.5vw,4.5rem)}
.pd-ground-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:clamp(1.6rem,3vw,2.2rem)}
@media(max-width:760px){.pd-ground-grid{grid-template-columns:1fr}}
.pd-ground .xlink{background:#0F120F;border-color:#242824;margin-top:0}
.pd-ground .xlink:hover{border-color:#22A876}
.pd-ground .xlink-title{color:var(--ink)}
.pd-ground .xlink-note{color:var(--soft)}

/* security & governance — short, factual, procurement-facing */
.pd-sec{border-top:1px solid var(--line);padding-block:clamp(2.6rem,5.5vw,4.5rem)}
.pd-sec-list{list-style:none;margin-top:clamp(1.6rem,3vw,2.2rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(max-width:700px){.pd-sec-list{grid-template-columns:1fr}}
.pd-sec-list li{background:#0F120F;padding:clamp(1.2rem,2.4vw,1.7rem)}
.pd-sec-list b{display:block;font-family:var(--s);font-size:.95rem;font-weight:700;color:var(--ink)}
.pd-sec-list span{display:block;margin-top:.45rem;font-family:var(--s);font-size:.9rem;
  color:var(--soft);line-height:1.6}

/* a product page that is still being written says so */
.pd-pending{border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,3rem)}
.pd-pending h2{max-width:20ch}
.pd-pending p{margin-top:1.1rem;font-family:var(--s);font-size:1.02rem;color:var(--soft);
  line-height:1.68;max-width:52ch}
.pd-pending .btn-line{color:var(--ink);border-color:var(--ink);margin-top:1.8rem}
.pd-pending .btn-line:hover{background:var(--ink);color:#0A0B0A}
/* every demo on this page says what it is */
.aid-illu{margin-top:.9rem;font-family:var(--m,ui-monospace),ui-monospace,monospace;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}