/* ==========================================================================
   Product family — shared grammar and per-product identity (.pdp-*)
   Loaded after the homepage's style.css, which supplies the shared chrome,
   tokens and fonts and is never edited for these pages. Every selector here
   is scoped to .pdp-* (or to a .pdp-page body), so nothing reaches the
   homepage or Governed Bit Intervention.

   Shared (the site): grid and annotation margin, type scale, the product
   field ledger's typography, the standing note, the signing field, the
   phone running head, print. Per product (.pdp--aide / --cke / --rul): the
   ledger's arrangement, the artifact, its ground, material and accent.
   STATUS: .pdp--aide, .pdp--cke and .pdp--rul are all APPROVED — LOCKED
   (commit "Approve and lock product family"; record:
   PRODUCT_FAMILY_FINAL_QA.md). Any change needs an explicit reopen.
   ========================================================================== */

.pdp-page {
  --pdp-ink: #f6f5f2;
  --pdp-ink-2: rgba(246, 245, 242, 0.74);
  --pdp-ink-3: rgba(246, 245, 242, 0.58);
  --pdp-label: #9c968b;
  --pdp-rule: rgba(255, 255, 255, 0.16);
  --pdp-gutter: 32px;
  background: #0a0a0a;
}

.pdp-page a:focus-visible,
.pdp-page button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.pdp-page) {
    scroll-behavior: auto;
  }
}

/* ---- Grid and annotation margin (the GBI / homepage grammar) ------------- */
.pdp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pdp-gutter);
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 var(--pdp-gutter);
}

.pdp-margin {
  grid-column: 1 / span 3;
  padding-top: 0.45em;
}

.pdp-main {
  grid-column: 4 / span 8;
}

.pdp-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--pdp-label);
}

.pdp-nowrap {
  white-space: nowrap;
}

/* Phone running head (01 §3): phones only; a fixed label on product pages. */
.pdp-running-head {
  display: none;
}

/* ---- Document head --------------------------------------------------------- */
.pdp-head {
  padding: clamp(148px, 19vh, 188px) 0 clamp(64px, 6vw, 96px);
  background: #0a0a0a;
}

.pdp-head .pdp-main {
  grid-column: 4 / -1;
}

.pdp-title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(42px, 4.6vw, 66px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.034em;
  color: #ffffff;
  text-wrap: balance;
}

.pdp-deck {
  margin: 24px 0 0;
  max-width: 40ch;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: rgba(246, 245, 242, 0.8);
  text-wrap: pretty;
}

/* ---- Product field ledger (shared typography; arrangement per product) --- */
.pdp-ledger {
  margin: 52px 0 0;
}

.pdp-ledger dt {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--pdp-label);
}

.pdp-ledger dd {
  margin: 8px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.52;
  color: var(--pdp-ink);
  text-wrap: pretty;
}

/* ---- Why this matters: the editorial clause ---------------------------- */
.pdp-clause {
  padding: clamp(104px, 9.5vw, 144px) 0 clamp(104px, 9.5vw, 140px);
}

.pdp-heading {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--pdp-ink);
  text-wrap: balance;
}

.pdp-lede {
  margin: 22px 0 0;
  max-width: 50ch;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.46;
  letter-spacing: -0.006em;
  color: var(--pdp-ink-2);
  text-wrap: pretty;
}

.pdp-body {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--pdp-ink-3);
  text-wrap: pretty;
}

/* The standing note: its own rule, reading size, full ink, never collapsed
   and never styled as an alert (GBI's treatment). */
.pdp-standing {
  margin: 40px 0 0;
  max-width: 62ch;
  padding-top: 16px;
  border-top: 1px solid var(--pdp-rule);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--pdp-ink);
}

/* The page's one action, and — on the first two products — the hand to the
   next product beside it. */
.pdp-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  margin: 36px 0 0;
}

/* The next product in the family. A plain cross-reference in the filing
   strip's treatment, deliberately not a second signing field: the page keeps
   one action, and this is navigation, not an action. The last product has
   none, because there is nothing after it. */
.pdp-next {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pdp-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--pdp-rule);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.pdp-next:hover {
  color: var(--pdp-ink);
  text-decoration-color: currentColor;
}

/* ---- Artifact grammar (shared): schematic linework, labels ------------- */
.pdp-art {
  display: block;
  overflow: visible;
  /* Its own compositing layer, so its paths never join the root layer's
     antialiasing (Phase 1F lesson). */
  will-change: transform;
}

.pdp-art-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: rgba(244, 243, 240, 0.52);
}

.pdp-art-note {
  font-size: 13.5px;
  font-weight: 500;
  fill: #8cc7bc;
}

/* ==========================================================================
   Agentic Intelligent Document Extraction — "the sheet"
   A pale source sheet (the only light object among the product pages) runs
   off the left edge; marked spans stay tethered to structured facts on the
   dark ground. Teal carries provenance; shapes carry identity.
   ========================================================================== */

/* Ledger as a 2×2 title block: ruled cells, like a drawing's corner block. */
.pdp--aide .pdp-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
  border-top: 1.5px solid rgba(246, 245, 242, 0.42);
  border-bottom: 1px solid rgba(246, 245, 242, 0.2);
}

.pdp--aide .pdp-ledger-row {
  padding: 18px 28px 22px 0;
}

.pdp--aide .pdp-ledger-row:nth-child(2n) {
  padding: 18px 0 22px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.pdp--aide .pdp-ledger-row:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The artifact shelf: graphite, a step lifted from the head. The frame runs
   from the viewport's left edge to the grid's right edge, so the sheet bleeds
   off the page while the fact register stays on the text columns. */
.pdp-plate-shelf {
  overflow: clip;
  padding: clamp(40px, 4vw, 60px) 0 clamp(56px, 5vw, 76px);
  background: linear-gradient(180deg, #0a0a0a 0%, #0f1012 20%, #121315 80%, #101113 100%);
}

.pdp-sheet-frame {
  width: calc(50% + min(50% - var(--pdp-gutter), var(--frame-text) / 2 - var(--pdp-gutter)));
}

/* 1:1 at wide widths (height 600), scaled down proportionally below. */
.pdp-art--wide {
  width: 100%;
  height: auto;
  aspect-ratio: 1068 / 600;
  max-height: 600px;
}

.pdp-sheet-narrow {
  display: none;
}

.pdp-sheet-back1 { fill: #8f8b84; }
.pdp-sheet-back2 { fill: #5a5854; }
.pdp-glyph-back rect { fill: rgba(20, 22, 25, 0.22); }
.pdp-rule-back path { fill: none; stroke: rgba(20, 22, 25, 0.26); }
.pdp-sheet-fold { fill: #cbc6bc; stroke: rgba(20, 22, 25, 0.18); }
.pdp-glyph rect { fill: rgba(24, 26, 29, 0.24); }
.pdp-sheet-rule { fill: none; stroke: rgba(24, 26, 29, 0.3); stroke-width: 1; }
.pdp-hatch path { fill: none; stroke: rgba(24, 26, 29, 0.2); stroke-width: 1; }

/* Provenance: a dark teal on the paper (contrast on a light ground), the
   site's teal off it. The marks' shapes, not their colour, say which fact
   came from which span. */
.pdp-span-fill { fill: #2b766b; opacity: 0.72; }
.pdp-span-mark { fill: rgba(43, 118, 107, 0.1); stroke: #2b766b; stroke-width: 1.5; }
.pdp-span-node { fill: #e3dfd6; stroke: #2b766b; stroke-width: 1.6; }
.pdp-tether-on { fill: none; stroke: #2b766b; stroke-width: 1.5; }
.pdp-tether { fill: none; stroke: #8cc7bc; stroke-width: 1.5; }

.pdp-reg-top { fill: none; stroke: rgba(246, 245, 242, 0.38); stroke-width: 1.5; }
.pdp-reg-rule { fill: none; stroke: rgba(255, 255, 255, 0.1); }
.pdp-fact-key rect { fill: rgba(246, 245, 242, 0.26); }
.pdp-fact-value rect { fill: rgba(246, 245, 242, 0.74); }
.pdp-fact-node { fill: #121315; stroke: #8cc7bc; stroke-width: 1.6; }

/* The clause on a lifted charcoal, a different object from the artifact. */
.pdp--aide .pdp-clause {
  background: linear-gradient(180deg, #101113 0%, #151619 40%, #141517 100%);
}

/* ==========================================================================
   Cognitive Knowledge Engine — "the column"
   The site's one "heading left, artifact right" head, on a cool slate
   ground. The artifact reads top to bottom: a question reaches several
   sources (dashed); only relevant passages are bracketed, marked and pinned
   to the citation rail; the grounded answer's runs carry the same marks.
   Line drawing only (no paper), blue-cyan apparatus; shape carries identity,
   dashed vs solid carries "reached" vs "used".
   ========================================================================== */
.pdp--cke {
  --pdp-label: #97a3ad;
}

.pdp-head--split {
  padding: clamp(136px, 17vh, 168px) 0 clamp(96px, 8.5vw, 128px);
  background: linear-gradient(180deg, #0b0e11 0%, #0f141a 28%, #111820 100%);
}

.pdp-split-copy {
  grid-column: 1 / span 5;
}

.pdp-split-copy .pdp-label {
  margin-bottom: 22px;
}

.pdp--cke .pdp-title {
  max-width: none;
}

.pdp--cke .pdp-deck {
  max-width: 34ch;
}

/* The ledger as one ruled column under the deck. */
.pdp--cke .pdp-ledger {
  margin-top: 44px;
  border-top: 1.5px solid rgba(200, 220, 236, 0.4);
  border-bottom: 1px solid rgba(200, 220, 236, 0.2);
}

.pdp--cke .pdp-ledger-row {
  padding: 16px 0 18px;
}

.pdp--cke .pdp-ledger-row + .pdp-ledger-row {
  border-top: 1px solid rgba(200, 220, 236, 0.12);
}

/* The head's right half held the old side artifact; the signature visual is
   now its own plate below the head (.pdp-plate-shelf). The copy block starts
   on the same grid column as the clause below it (.pdp-main), so the page has
   one text edge from the title down to the closing section, and keeps its
   width. Only where the grid has columns: the single-column rules still
   stand, and there the two already share an edge. */
@media (min-width: 1101px) {
  .pdp--cke .pdp-split-copy {
    grid-column: 4 / span 7;
  }

  /* The label stays in the annotation margin, where it was before the copy
     moved: it is carried back the three columns and three gutters the block
     travelled. Solved from the block's own width (7 columns + 6 gutters), so
     it holds at every width in this range. It shifts nothing vertically —
     the label keeps its place in the flow, so the title does not move up. */
  .pdp--cke .pdp-split-copy .pdp-label {
    margin-left: calc((-3 * 100% - 3 * var(--pdp-gutter)) / 7);
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .pdp--cke .pdp-split-copy {
    grid-column: 3 / span 6;
  }

  /* Two columns and two gutters here, from a block of 6 columns + 5 gutters. */
  .pdp--cke .pdp-split-copy .pdp-label {
    margin-left: calc((-2 * 100% - 2 * var(--pdp-gutter)) / 6);
  }
}

.pdp-column {
  grid-column: 7 / -1;
  grid-row: 1;
  align-self: start;
  padding-top: 4px;
}

.pdp-art--column {
  width: 100%;
  height: auto;
}

.pdp-art--column-narrow {
  display: none;
}

.pdp-art-q { font-size: 17px; font-weight: 600; fill: #8fc3e6; }
.cke-question { fill: rgba(18, 26, 34, 0.85); stroke: rgba(196, 216, 232, 0.5); stroke-width: 1.2; }
.cke-q-glyph rect { fill: rgba(226, 236, 244, 0.7); }
.cke-reach path { fill: none; stroke: rgba(143, 195, 230, 0.42); stroke-width: 1.1; stroke-dasharray: 3 4; }
.cke-anchor { fill: #8fc3e6; }
.cke-doc { fill: rgba(20, 29, 38, 0.92); stroke: rgba(196, 216, 232, 0.26); stroke-width: 1; }
.cke-doc-fold { fill: none; stroke: rgba(196, 216, 232, 0.26); }
.cke-glyph rect { fill: rgba(214, 226, 236, 0.2); }
.cke-src--used .cke-doc { stroke: rgba(196, 216, 232, 0.6); }
.cke-src--used .cke-doc-fold { stroke: rgba(196, 216, 232, 0.6); }
.cke-src--used .cke-glyph rect { fill: rgba(214, 226, 236, 0.36); }
.cke-passage rect { fill: #8fc3e6; opacity: 0.9; }
.cke-bracket { fill: none; stroke: #8fc3e6; stroke-width: 1.4; }
.cke-pin path { fill: none; stroke: #8fc3e6; stroke-width: 1.4; }
.cke-mark-src,
.cke-mark-rail { fill: #111820; stroke: #8fc3e6; stroke-width: 1.6; }
.cke-mark-inline { fill: #8fc3e6; }
.cke-rail { fill: none; stroke: rgba(196, 216, 232, 0.45); stroke-width: 1.5; }
.cke-answer rect { fill: rgba(226, 236, 244, 0.36); }
.cke-run rect { fill: rgba(236, 242, 247, 0.92); }
.cke-run path { fill: none; stroke: #8fc3e6; stroke-width: 1.2; }

/* The clause: a hard step down from slate to the deepest ground. */
.pdp--cke .pdp-clause {
  background: #0a0a0a;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .pdp-margin { grid-column: 1 / span 2; }
  .pdp-main,
  .pdp-head .pdp-main { grid-column: 3 / -1; }
  .pdp-split-copy { grid-column: 1 / span 6; }
  .pdp-column { grid-column: 7 / -1; }
}

/* The split head's column scales to 0.68–0.85 here; the apparatus labels are
   set larger so they stay readable (≥ 11 px rendered). The labels sit left
   of the drawing, so the composition does not move. */
@media (min-width: 900px) and (max-width: 1100px) {
  .pdp-art--column .pdp-art-label { font-size: 16px; }
}

/* Single column: the margin folds into the flow above each heading, and the
   artifact turns vertical. */
@media (max-width: 899px) {
  .pdp-page {
    --pdp-gutter: 28px;
  }

  .pdp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-margin,
  .pdp-main,
  .pdp-head .pdp-main {
    grid-column: 1;
  }

  .pdp-margin {
    padding-top: 0;
    margin-bottom: 18px;
  }

  .pdp-head {
    padding-top: 132px;
  }

  .pdp-split-copy,
  .pdp-column {
    grid-column: 1;
    grid-row: auto;
  }

  /* The column follows the ledger (source order), set against the right
     edge so the page stays asymmetric. */
  .pdp-column {
    width: 100%;
    max-width: 592px;
    margin: 64px 0 0 auto;
    padding-top: 0;
  }
}

@media (max-width: 599px) {
  .pdp-art--column {
    display: none;
  }

  .pdp-art--column-narrow {
    display: block;
    width: 100%;
    height: auto;
  }

  .pdp-art--column-narrow .pdp-art-label {
    font-size: 14.5px;
  }

  .pdp-column {
    max-width: none;
    margin: 48px 0 0;
  }
}

/* The sheet stays horizontal down to tablet width (about 0.8x at 899) and
   turns vertical below it: the page above, the facts below, the tethers
   dropping in nested lanes. The vertical drawing is capped so it never
   grows past a phone-scale composition. */
@media (max-width: 859px) {
  .pdp-sheet-frame {
    display: none;
  }

  .pdp-sheet-narrow {
    display: block;
    max-width: var(--frame-artifact);
    margin: 0 auto;
    padding: 0 var(--pdp-gutter);
  }

  .pdp-art--narrow {
    width: min(100%, 420px);
    height: auto;
  }

  .pdp-art--narrow .pdp-art-label,
  .pdp-art--narrow .pdp-art-note {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .pdp-page {
    --pdp-gutter: 24px;
  }

  /* Running head: a thin strip under the header bar (01 §3). */
  .pdp-running-head {
    display: block;
    margin: 0;
    padding: 7px var(--pdp-gutter) 8px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(10, 10, 10, 0.9);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: var(--pdp-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pdp-head {
    padding: 136px 0 48px;
  }

  .pdp-title {
    font-size: clamp(34px, 9.6vw, 42px);
  }

  .pdp-deck {
    margin-top: 16px;
    font-size: 17px;
  }

  .pdp-ledger {
    margin-top: 36px;
  }

  /* The title block becomes four label-over-entry rows. */
  .pdp--aide .pdp-ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp--aide .pdp-ledger-row,
  .pdp--aide .pdp-ledger-row:nth-child(2n) {
    padding: 15px 0 17px;
    border-left: 0;
  }

  .pdp--aide .pdp-ledger-row + .pdp-ledger-row {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .pdp-heading {
    font-size: clamp(27px, 8vw, 32px);
  }

  .pdp-lede {
    font-size: 17.5px;
  }

  .pdp-body {
    font-size: 16px;
    line-height: 1.62;
  }

  .pdp-clause {
    padding: 88px 0 96px;
  }

  .pdp-sign .signing-field {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Print (01 §14): paper, not the dark screen. Header in flow with the
   primary navigation; running head, compact navigation, Menu, skip link and
   the close band's image are not printed; link destinations are appended.
   The artifact prints as dark linework on white.
   ========================================================================== */
@media print {
  @page {
    margin: 16mm 15mm 18mm;
  }

  .pdp-page {
    --pdp-ink: #111111;
    --pdp-ink-2: #2b2b2b;
    --pdp-ink-3: #444444;
    --pdp-label: #555555;
    --pdp-rule: #8a8a8a;
    background: #ffffff;
    color: #111111;
  }

  html:has(.pdp-page) {
    background: #ffffff;
  }

  .pdp-page *,
  .pdp-page *::before,
  .pdp-page *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .skip-link,
  .pdp-running-head,
  .compact-nav-panel,
  .nav-disclosure,
  .close-horizon {
    display: none !important;
  }

  .pdp-page a[href^="/"]::after,
  .pdp-page a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.86em;
    font-weight: 400;
    color: #444444;
    overflow-wrap: anywhere;
  }

  .pdp-page .site-header {
    position: static;
    background: none;
    border-bottom: 1px solid #c8c8c8;
  }

  .pdp-page .site-header-inner {
    display: block;
    padding: 0 0 12px;
  }

  .pdp-page .wordmark {
    color: #111111;
  }

  .pdp-page .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 20px;
    margin-top: 8px;
  }

  .pdp-page .site-nav-link {
    font-size: 11.5px;
    white-space: normal;
    color: #333333;
  }

  .pdp-head,
  .pdp-plate-shelf,
  .pdp-clause,
  .site-close,
  .site-footer {
    background: none !important;
  }

  .pdp-grid,
  .pdp-sheet-narrow {
    padding-left: 0;
    padding-right: 0;
  }

  .pdp-head {
    padding: 24px 0 18px;
  }

  .pdp-title {
    font-size: 34px;
    color: #111111;
  }

  .pdp-deck {
    font-size: 16px;
    color: #2b2b2b;
  }

  .pdp--aide .pdp-ledger {
    border-top-color: #555555;
    border-bottom-color: #8a8a8a;
  }

  .pdp--aide .pdp-ledger-row + .pdp-ledger-row,
  .pdp--aide .pdp-ledger-row:nth-child(2n),
  .pdp--aide .pdp-ledger-row:nth-child(n + 3) {
    border-color: #c8c8c8;
  }

  .pdp-plate-shelf {
    padding: 8px 0 16px;
    break-inside: avoid;
  }

  .pdp-art--narrow {
    width: 300px;
  }

  .pdp-art-label { fill: #555555; }
  .pdp-art-note { fill: #1f5f56; }
  .pdp-sheet { stroke: #555555; stroke-width: 1; }
  .pdp-sheet-back1,
  .pdp-sheet-back2 { fill: #ffffff; stroke: #9a9a9a; stroke-width: 1; }
  .pdp-tether { stroke: #1f5f56; }
  .pdp-reg-top { stroke: #555555; }
  .pdp-reg-rule { stroke: #c8c8c8; }
  .pdp-fact-key rect { fill: #b5b5b5; }
  .pdp-fact-value rect { fill: #444444; }
  .pdp-fact-node { fill: #ffffff; stroke: #1f5f56; }

  .pdp-head--split {
    background: none !important;
  }

  .pdp--cke .pdp-ledger,
  .pdp--cke .pdp-ledger-row + .pdp-ledger-row {
    border-color: #8a8a8a;
  }

  .pdp-column {
    margin: 16px 0 0;
    break-inside: avoid;
  }

  .pdp-art--column { width: 460px; }
  .pdp-art-q { fill: #1f4f6e; }
  .cke-question { fill: #ffffff; stroke: #555555; }
  .cke-q-glyph rect { fill: #555555; }
  .cke-reach path { stroke: #7f9bb0; }
  .cke-anchor { fill: #1f4f6e; }
  .cke-doc { fill: #ffffff; stroke: #9a9a9a; }
  .cke-doc-fold { stroke: #9a9a9a; }
  .cke-glyph rect { fill: #c4c4c4; }
  .cke-src--used .cke-doc,
  .cke-src--used .cke-doc-fold { stroke: #444444; }
  .cke-src--used .cke-glyph rect { fill: #a8a8a8; }
  .cke-passage rect,
  .cke-mark-inline { fill: #1f4f6e; }
  .cke-bracket,
  .cke-pin path,
  .cke-run path { stroke: #1f4f6e; }
  .cke-mark-src,
  .cke-mark-rail { fill: #ffffff; stroke: #1f4f6e; }
  .cke-rail { stroke: #555555; }
  .cke-answer rect { fill: #b5b5b5; }
  .cke-run rect { fill: #333333; }

  .pdp-clause {
    padding: 22px 0 18px;
    border-top: 1px solid #c8c8c8;
  }

  .pdp-heading {
    font-size: 25px;
  }

  .pdp-body {
    font-size: 13.5px;
  }

  .pdp-standing {
    font-size: 13.5px;
    border-top-color: #555555;
    break-inside: avoid;
  }

  .pdp-page .signing-field {
    width: auto;
    padding: 9px 14px;
    color: #111111;
    background: none;
    border-color: #555555;
  }

  .site-close {
    padding: 22px 0 18px;
    border-top: 1px solid #c8c8c8;
  }

  .site-close .close-inner {
    margin-top: 0;
    padding: 0;
  }

  .site-close .close-spine {
    font-size: 15px;
    color: #111111;
  }

  .pdp-page .site-footer {
    --sf-ink: #111111;
    --sf-ink-2: #333333;
    --sf-ink-3: #555555;
    padding: 18px 0 0;
    border-top-color: #c8c8c8;
    /* The company details stay together on one sheet. */
    break-inside: avoid;
  }

  .pdp-page .site-footer-grid {
    padding: 0;
  }

  .pdp-page p,
  .pdp-page dd {
    orphans: 3;
    widows: 3;
  }

  .pdp-ledger-row,
  .pdp-heading,
  .pdp-margin {
    break-inside: avoid;
  }

  .pdp-heading,
  .pdp-margin {
    break-after: avoid;
  }
}

/* ==========================================================================
   Drilling Bit RUL — "the axis"
   The darkest product environment. A wide head whose ledger is a four-cell
   data-plate strip, then a contained instrument plate read left to right in
   time: observed telemetry up to one vertical cut, Now; beyond it a dashed
   forecast inside an uncertainty band that widens; remaining life marked on
   the time axis as a range that stays open. Bone linework, a pale teal band.
   Line style carries meaning (solid observed, dashed forecast, dotted
   limit), never colour alone. Every rule here is scoped to .pdp--rul.
   ========================================================================== */
.pdp--rul {
  --rul-ground: #07080a;
  --rul-plate: #030405;
  --rul-bone: 236, 230, 216;
  background: var(--rul-ground);
}

.pdp--rul .pdp-head {
  padding-bottom: 0;
  background: var(--rul-ground);
}

/* The ledger as one ruled strip of four cells, the width of the plate. */
.pdp--rul .rul-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr 1.25fr 1fr 1fr;
  margin: 64px 0 0;
  border-top: 1.5px solid rgba(var(--rul-bone), 0.42);
  border-bottom: 1px solid rgba(var(--rul-bone), 0.2);
}

.pdp--rul .rul-strip .pdp-ledger-row {
  padding: 18px 28px 22px;
}

.pdp--rul .rul-strip .pdp-ledger-row:first-child {
  padding-left: 0;
}

.pdp--rul .rul-strip .pdp-ledger-row + .pdp-ledger-row {
  border-left: 1px solid rgba(var(--rul-bone), 0.12);
}

.pdp--rul .rul-strip dd {
  max-width: 34ch;
}

/* The instrument plate: contained, on the darkest ground. */
.rul-axis-shelf {
  padding: 40px 0 clamp(88px, 8vw, 120px);
  background: var(--rul-ground);
}

.rul-plate {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid rgba(var(--rul-bone), 0.14);
  border-radius: 14px;
  background: var(--rul-plate);
}

.rul-art {
  width: 100%;
  height: auto;
}

.rul-art--medium,
.rul-art--narrow {
  display: none;
}

.rul-past { fill: rgba(var(--rul-bone), 0.024); }
.rul-lane-base path { fill: none; stroke: rgba(var(--rul-bone), 0.07); stroke-width: 1; }
.rul-lane polyline { fill: none; stroke: rgba(var(--rul-bone), 0.42); stroke-width: 1; stroke-linejoin: round; }
.rul-last circle { fill: rgba(var(--rul-bone), 0.72); }
.rul-axis { fill: none; stroke: rgba(var(--rul-bone), 0.3); stroke-width: 1; }
.rul-band-inner { fill: rgba(140, 199, 188, 0.12); }
.rul-edge { fill: none; stroke: rgba(140, 199, 188, 0.62); stroke-width: 1; stroke-dasharray: 4 4; }
.rul-projection { fill: none; stroke: rgba(var(--rul-bone), 0.82); stroke-width: 1.5; stroke-dasharray: 7 5; }
.rul-limit { fill: none; stroke: rgba(var(--rul-bone), 0.56); stroke-width: 1.3; stroke-dasharray: 0.5 5; stroke-linecap: round; }
.rul-drop { fill: none; stroke: rgba(140, 199, 188, 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
.rul-trace { fill: none; stroke: rgba(242, 238, 230, 0.92); stroke-width: 1.75; stroke-linejoin: round; }
.rul-now { fill: none; stroke: #f6f5f2; stroke-width: 1.5; }
.rul-node { fill: var(--rul-plate); stroke: #f6f5f2; stroke-width: 1.6; }

.pdp--rul .rul-label-now { fill: #f6f5f2; }

.rul-note {
  font-size: 13.5px;
  font-weight: 500;
  fill: rgba(var(--rul-bone), 0.66);
}

.rul-note--range { fill: #8cc7bc; }

/* The page's one cross-reference: under the margin label, a plain
   underlined link (GBI's margin treatment). */
.pdp--rul .pdp-xref {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pdp--rul .pdp-xref a {
  font-size: 14px;
  font-weight: 500;
  color: var(--pdp-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: text-decoration-color var(--transition-fast);
}

.pdp--rul .pdp-xref a:hover {
  text-decoration-color: currentColor;
}

/* The clause on a warm near-black: a different ground from the instrument. */
.pdp--rul .pdp-clause {
  background: #0f0e0d;
}

@media (max-width: 1099px) {
  .rul-art--wide { display: none; }
  .rul-art--medium { display: block; }
  .rul-art--medium .pdp-art-label,
  .rul-art--medium .rul-note { font-size: 14.5px; }

  .pdp--rul .rul-strip .pdp-ledger-row {
    padding: 16px 20px 20px;
  }
}

@media (max-width: 899px) {
  .pdp--rul .rul-strip {
    margin-top: 48px;
  }

  .pdp--rul .pdp-margin .pdp-xref {
    margin-top: 12px;
    padding-top: 10px;
  }
}

/* Phone: the strip becomes four label-over-entry rows, and the plate is
   recomposed (a shorter window of history, Now left of centre, so the
   forecast keeps the room to widen). The plate runs a little wider than the
   text column. */
@media (max-width: 699px) {
  .rul-art--medium { display: none; }
  .rul-art--narrow { display: block; }
  .rul-art--narrow .pdp-art-label,
  .rul-art--narrow .rul-note { font-size: 14px; }

  .pdp--rul .rul-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp--rul .rul-strip .pdp-ledger-row,
  .pdp--rul .rul-strip .pdp-ledger-row:first-child {
    padding: 15px 0 17px;
  }

  .pdp--rul .rul-strip .pdp-ledger-row + .pdp-ledger-row {
    border-left: 0;
    border-top: 1px solid rgba(var(--rul-bone), 0.12);
  }

  .rul-plate {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  .pdp--rul .pdp-head {
    padding-bottom: 0;
  }

  .pdp--rul .rul-strip {
    margin-top: 36px;
  }

  .rul-axis-shelf {
    padding: 32px 0 72px;
  }

  .rul-plate {
    width: auto;
    max-width: none;
    margin: 0 -12px;
  }
}

@media print {
  .pdp--rul,
  .pdp--rul .pdp-head,
  .rul-axis-shelf,
  .pdp--rul .pdp-clause {
    background: none !important;
  }

  .pdp--rul .rul-strip {
    margin-top: 20px;
    border-top-color: #555555;
    border-bottom-color: #8a8a8a;
  }

  .pdp--rul .rul-strip .pdp-ledger-row + .pdp-ledger-row {
    border-color: #c8c8c8;
  }

  .rul-axis-shelf {
    padding: 16px 0;
    break-inside: avoid;
  }

  .rul-plate {
    margin: 0;
    border-color: #8a8a8a;
    background: #ffffff;
  }

  .rul-past { fill: #f3f3f3; }
  .rul-lane-base path { stroke: #e2e2e2; }
  .rul-lane polyline { stroke: #777777; }
  .rul-last circle { fill: #555555; }
  .rul-axis { stroke: #8a8a8a; }
  .rul-band-inner { fill: rgba(31, 95, 86, 0.12); }
  .rul-edge,
  .rul-drop { stroke: #1f5f56; }
  .rul-projection,
  .rul-limit { stroke: #333333; }
  .rul-trace { stroke: #111111; }
  .rul-now { stroke: #111111; }
  .rul-node { fill: #ffffff; stroke: #111111; }
  .pdp--rul .rul-label-now { fill: #111111; }
  .rul-note { fill: #444444; }
  .rul-note--range { fill: #1f5f56; }

  .pdp--rul .pdp-xref {
    border-top-color: #c8c8c8;
  }
}

/* ==========================================================================
   Light mineral treatment (screen) — the three standalone product pages
   --------------------------------------------------------------------------
   The product family reads as a document on a warm mineral ground rather
   than as a dark screen: bone page, graphite ink, pale steel surfaces, and
   the site's own teal and deep blue as the only accents. The re-inking
   follows the light rendering this file already defines for print, warmed
   (bone instead of paper white, graphite instead of pure black), so the
   three pages stay one family rather than three colour systems.

   Everything is scoped to .pdp-page, so no other page is touched. The dark
   chrome is deliberately kept: the site header, the drilling-rig site close
   before the footer (style.css, .site-close) and the footer are untouched
   and still read as the dark bands that bracket the light body.

   Screen only: the print block above continues to own the printed sheet.
   ========================================================================== */
@media screen {
  .pdp-page {
    /* Ground: warm light mineral, never pure white. */
    --pdp-bone: #e9e5dc;
    --pdp-bone-2: #efece4;
    --pdp-mineral: #e1ddd3;
    /* Surfaces: pale steel / soft slate, a touch cooler than the ground. */
    --pdp-steel: #e7e8e5;
    --pdp-paper: #f3f1ec;
    /* Ink: graphite, deep charcoal. */
    --pdp-ink: #1c1f21;
    --pdp-ink-2: #3a3e40;
    --pdp-ink-3: #55595b;
    --pdp-label: #6e6a61;
    --pdp-rule: rgba(28, 31, 33, 0.2);
    --pdp-hairline: rgba(28, 31, 33, 0.12);
    /* Accents already in the site's palette. */
    --pdp-teal: #1f5f56;
    --pdp-blue: #1f4f6e;

    background: var(--pdp-bone);
    color: var(--pdp-ink);
  }

  /* The overscroll ground behind the page, so the bone does not end early. */
  html:has(.pdp-page) {
    background: var(--pdp-bone);
  }

  /* ---- Chrome ------------------------------------------------------------
     The header is transparent over the homepage's dark hero. Over a light
     page its own light type would have no ground, so on these pages it
     carries the graphite it otherwise takes on scroll. */
  .pdp-page .site-header {
    background-color: rgba(10, 10, 10, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  /* Focus rings: graphite on the light body, unchanged on the dark bands. */
  .pdp-page a:focus-visible,
  .pdp-page button:focus-visible {
    outline-color: rgba(28, 31, 33, 0.66);
  }

  .pdp-page .site-header a:focus-visible,
  .pdp-page .site-header button:focus-visible,
  .pdp-page .site-close a:focus-visible,
  .pdp-page .site-footer a:focus-visible {
    outline-color: rgba(255, 255, 255, 0.6);
  }

  /* ---- Document head and editorial --------------------------------------- */
  .pdp-head,
  .pdp-head--split {
    background: var(--pdp-bone-2);
  }

  .pdp-title {
    color: var(--pdp-ink);
  }

  .pdp-deck {
    color: var(--pdp-ink-2);
  }

  .pdp--aide .pdp-clause,
  .pdp--cke .pdp-clause,
  .pdp--rul .pdp-clause {
    background: var(--pdp-bone);
  }

  /* The action in the light body is a ruled graphite field, not a dark pill.
     The one inside the site close keeps its own treatment. */
  .pdp-page .pdp-sign .signing-field {
    color: var(--pdp-ink);
    background: rgba(255, 255, 255, 0.34);
    border-color: rgba(28, 31, 33, 0.34);
  }

  .pdp-page .pdp-sign .signing-field:hover,
  .pdp-page .pdp-sign .signing-field:focus-visible {
    color: #000000;
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(28, 31, 33, 0.58);
  }

  /* Phone running head: the same strip, in mineral. */
  .pdp-running-head {
    border-top-color: var(--pdp-hairline);
    background: rgba(233, 229, 220, 0.94);
  }

  /* ---- Shared artifact grammar -------------------------------------------- */
  .pdp-art-label {
    fill: rgba(28, 31, 33, 0.56);
  }

  .pdp-art-note {
    fill: var(--pdp-teal);
  }

  /* ---- Extraction: the sheet ---------------------------------------------- */
  .pdp--aide .pdp-ledger {
    border-top-color: rgba(28, 31, 33, 0.42);
    border-bottom-color: rgba(28, 31, 33, 0.2);
  }

  .pdp--aide .pdp-ledger-row:nth-child(2n),
  .pdp--aide .pdp-ledger-row:nth-child(n + 3),
  .pdp--aide .pdp-ledger-row + .pdp-ledger-row {
    border-color: var(--pdp-hairline);
  }

  .pdp-plate-shelf {
    background: linear-gradient(180deg, var(--pdp-bone-2) 0%, var(--pdp-mineral) 22%, var(--pdp-mineral) 80%, var(--pdp-bone) 100%);
  }

  /* The stacked sheets behind the source document: pale steel, not slate. */
  .pdp-sheet-back1 { fill: #d7d3ca; }
  .pdp-sheet-back2 { fill: #c6c2b9; }
  .pdp-sheet { stroke: rgba(28, 31, 33, 0.26); stroke-width: 1; }
  .pdp-sheet-fold { fill: #cbc6bc; stroke: rgba(28, 31, 33, 0.24); }

  /* The cast shadow under the sheet is drawn in the markup; on a light
     ground it only needs to be a suggestion. */
  .pdp-art path[filter] {
    opacity: 0.14;
  }

  .pdp-tether { stroke: var(--pdp-teal); }
  .pdp-reg-top { stroke: rgba(28, 31, 33, 0.42); }
  .pdp-reg-rule { stroke: rgba(28, 31, 33, 0.16); }
  .pdp-fact-key rect { fill: rgba(28, 31, 33, 0.34); }
  .pdp-fact-value rect { fill: rgba(28, 31, 33, 0.74); }
  .pdp-fact-node { fill: var(--pdp-paper); stroke: var(--pdp-teal); }

  /* ---- Knowledge engine: question, sources, answer ------------------------ */
  .pdp--cke {
    --pdp-label: #64707a;
  }

  .pdp--cke .pdp-ledger {
    border-top-color: rgba(28, 31, 33, 0.4);
    border-bottom-color: rgba(28, 31, 33, 0.2);
  }

  .pdp--cke .pdp-ledger-row + .pdp-ledger-row {
    border-top-color: var(--pdp-hairline);
  }

  .pdp-art-q { fill: var(--pdp-blue); }
  .cke-question { fill: var(--pdp-paper); stroke: rgba(28, 31, 33, 0.3); }
  .cke-q-glyph rect { fill: rgba(28, 31, 33, 0.46); }
  .cke-reach path { stroke: rgba(31, 79, 110, 0.38); }
  .cke-anchor { fill: var(--pdp-blue); }
  .cke-doc { fill: var(--pdp-paper); stroke: rgba(28, 31, 33, 0.26); }
  .cke-doc-fold { stroke: rgba(28, 31, 33, 0.26); }
  .cke-glyph rect { fill: rgba(28, 31, 33, 0.2); }
  .cke-src--used .cke-doc { stroke: rgba(28, 31, 33, 0.54); }
  .cke-src--used .cke-doc-fold { stroke: rgba(28, 31, 33, 0.54); }
  .cke-src--used .cke-glyph rect { fill: rgba(28, 31, 33, 0.36); }
  .cke-passage rect { fill: var(--pdp-blue); }
  .cke-bracket { stroke: var(--pdp-blue); }
  .cke-pin path { stroke: var(--pdp-blue); }
  .cke-mark-src,
  .cke-mark-rail { fill: var(--pdp-paper); stroke: var(--pdp-blue); }
  .cke-mark-inline { fill: var(--pdp-blue); }
  .cke-rail { stroke: rgba(28, 31, 33, 0.42); }
  .cke-answer rect { fill: rgba(28, 31, 33, 0.34); }
  .cke-run rect { fill: rgba(28, 31, 33, 0.78); }
  .cke-run path { stroke: var(--pdp-blue); }

  /* ---- Bit RUL: the axis --------------------------------------------------
     --rul-bone is the linework's colour as an rgb triplet, so the whole
     instrument re-inks from graphite here; the plate becomes pale steel. */
  .pdp--rul {
    --rul-ground: #e9e5dc;
    --rul-plate: #e7e8e5;
    --rul-bone: 28, 31, 33;
  }

  .rul-plate {
    border-color: rgba(28, 31, 33, 0.18);
  }

  .rul-band-inner { fill: rgba(31, 95, 86, 0.14); }
  .rul-edge { stroke: rgba(31, 95, 86, 0.66); }
  .rul-drop { stroke: rgba(31, 95, 86, 0.6); }
  .rul-trace { stroke: rgba(28, 31, 33, 0.92); }
  .rul-now { stroke: var(--pdp-ink); }
  .rul-node { fill: var(--rul-plate); stroke: var(--pdp-ink); }
  .pdp--rul .rul-label-now { fill: var(--pdp-ink); }
  .rul-note--range { fill: var(--pdp-teal); }

  .pdp--rul .pdp-xref {
    border-top-color: var(--pdp-hairline);
  }

  .pdp--rul .pdp-xref a {
    color: var(--pdp-ink);
    text-decoration-color: rgba(28, 31, 33, 0.38);
  }
}

/* ==========================================================================
   Product plate — the signature visual of each product page as one raster,
   inside the shared artifact shelf (.pdp-plate-shelf). The same component on
   all three pages, so the family reads as one: on the text grid, generously
   rounded, its own hairline edge and a soft ambient shadow, so it sits on the
   mineral page as a mounted plate rather than as a screenshot. The radius
   scales with the viewport and is deliberately pronounced.
   ========================================================================== */
.pdp-plate {
  max-width: var(--frame-artifact);
  margin: 0 auto;
  padding: 0 var(--pdp-gutter);
}

.pdp-plate-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(28, 31, 33, 0.12);
  border-radius: clamp(20px, 2.4vw, 38px);
  box-shadow: 0 26px 56px -34px rgba(28, 31, 33, 0.45);
  background: #ebe7de;
}

@media print {
  .pdp-plate-img {
    box-shadow: none;
    border-color: #c8c8c8;
    border-radius: 6px;
  }
}