/* =====================================================================
   DIGITAL FLOW — design pass for generated pages (opt-in per page)
   Loaded after pages.css, only on pages the manifest marks "design".
   Brand System 2026 · Evidence Register · MEDIUM expression mode.

   Two signals, each with one job:
     green   action and "you are here" (buttons, links, current section)
     yellow  the marked friction (the H1 field, the symptom register)
   Everything else is carbon, warm white and one sheet of warm paper.

   Spacing, type scale and radius are implementation-level decisions in
   the Brand System; the values chosen here are the tokens below.
   ===================================================================== */

.pg-d {
  --sp-2xs: 4px;  --sp-xs: 8px;   --sp-sm: 12px;  --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px;  --sp-2xl: 48px; --sp-3xl: 64px;
  --sp-4xl: clamp(64px, 9vw, 120px);

  --t-display: clamp(2.3rem, 1.15rem + 5vw, 4.75rem);
  --t-h2: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  --t-large: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h3: 1.1875rem;
  --t-label: 0.75rem;

  --rule: rgba(244, 240, 231, 0.14);
  --rule-strong: rgba(244, 240, 231, 0.34);
  --quiet: rgba(244, 240, 231, 0.66);
  --radius: 4px;
  --rail: 208px;
  --gutter: clamp(32px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* warm paper sheet */
  --paper: var(--df-cream, #F4F0E7);
  --paper-ink: var(--df-ink, #1D1D1B);
  --paper-quiet: #55544F;
  --paper-rule: rgba(29, 29, 27, 0.2);
}

.pg-d .pg-main { padding-top: clamp(24px, 4vw, 56px); }
.pg-d .pg-article, .pg-d .pg-footer__inner, .pg-d .pg-footer__legal { max-width: 1200px; }
/* The header pads inside its box, so it is wider by that padding to share the content's left edge. */
.pg-d .pg-header__inner { max-width: calc(1200px + 2 * clamp(16px, 4vw, 32px)); }
.pg-d .pg-btn { border-radius: var(--radius); transition: background-color 0.16s ease, transform 0.12s ease; }
.pg-d .pg-btn:active { transform: scale(0.98); }

/* ------------------------------------------------------------- hero */
.pg-d .pg-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0;
  padding-bottom: var(--sp-4xl); border-bottom: 0;
}
.pg-d .pg-crumbs { margin-bottom: var(--sp-xl); }
.pg-d .pg-eyebrow { color: var(--quiet); margin-bottom: var(--sp-md); letter-spacing: 0.12em; }
.pg-d .pg-hero h1 {
  font-size: var(--t-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.028em;
  margin: 0 0 var(--sp-2xl); max-width: 21ch; text-wrap: balance;
}
/* The marked friction: a filled signal field with Ink text, never yellow text. */
.pg-mark {
  color: var(--df-ink, #1D1D1B);
  background: linear-gradient(var(--df-signal-yellow, #F2FF24), var(--df-signal-yellow, #F2FF24)) no-repeat 0 60% / 100% 80%;
  padding: 0 0.14em; margin: 0 -0.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pg-d .pg-lead { font-size: var(--t-large); line-height: 1.5; max-width: 34em; margin-bottom: var(--sp-xl); }
.pg-d .pg-hero .pg-btn { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }

@media (min-width: 1024px) {
  .pg-d .pg-hero {
    grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter);
    grid-template-areas: "crumbs crumbs" "h1 h1" "eyebrow lead" ". actions";
  }
  .pg-d .pg-crumbs { grid-area: crumbs; }
  .pg-d .pg-hero h1 { grid-area: h1; }
  .pg-d .pg-eyebrow { grid-area: eyebrow; margin: 0.5em 0 0; line-height: 1.6; }
  .pg-d .pg-lead { grid-area: lead; }
  .pg-d .pg-hero__actions { grid-area: actions; }
}

/* ----------------------------------------------- body grid and index */
.pg-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.pg-body { min-width: 0; container-type: inline-size; }
.pg-toc { display: none; }

@media (min-width: 1024px) {
  .pg-layout { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); }
  .pg-toc {
    display: block; position: sticky; top: 96px; align-self: start;
    max-height: calc(100vh - 120px); overflow: auto;
    padding-top: var(--sp-lg); border-top: 1px solid var(--rule-strong);
  }
  .pg-toc ol { list-style: none; margin: 0; padding: 0; }
  .pg-toc a {
    display: grid; grid-template-columns: 2.2em minmax(0, 1fr); padding: 7px 0;
    font-family: var(--df-font-mono, monospace); font-size: var(--t-label); line-height: 1.45;
    color: var(--quiet); text-decoration: none; transition: color 0.16s ease;
  }
  .pg-toc a:hover { color: var(--df-text-headline, #F2EEE6); }
  .pg-toc__n { position: relative; }
  .pg-toc a[aria-current="true"] { color: var(--df-text-headline, #F2EEE6); }
  .pg-toc a[aria-current="true"] .pg-toc__n { color: var(--df-signal-green, #B6FF2E); }
}

/* --------------------------------------------------------- sections */
.pg-d .pg-s { padding: var(--sp-lg) 0 var(--sp-4xl); border-top: 1px solid var(--rule-strong); }
.pg-num {
  margin: 0 0 var(--sp-lg) !important;
  font-family: var(--df-font-mono, monospace); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.08em; color: var(--quiet) !important;
}
.pg-d .pg-s h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--sp-xl); max-width: 22ch; }
.pg-d .pg-s h3 { font-size: var(--t-h3); line-height: 1.3; }
.pg-d .pg-s p { max-width: 38em; line-height: 1.7; }
.pg-d .pg-intro { font-size: var(--t-large); line-height: 1.5; max-width: 34em !important; margin-bottom: var(--sp-xl) !important; }

/* Symptoms: the buyer's own sentences, kept as a numbered register. */
.pg-d .pg-symptoms__list { counter-reset: sym; gap: 0 var(--gutter); margin: 0 0 var(--sp-2xl); grid-template-columns: minmax(0, 1fr); }
.pg-d .pg-symptoms__list li {
  counter-increment: sym; display: grid; grid-template-columns: 2.6em minmax(0, 1fr);
  padding: var(--sp-lg) 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none;
  font-size: 1.125rem; line-height: 1.5;
}
.pg-d .pg-symptoms__list li::before {
  content: counter(sym, decimal-leading-zero); padding-top: 0.3em;
  font-family: var(--df-font-mono, monospace); font-size: var(--t-label); font-weight: 600;
  color: var(--df-signal-yellow, #F2FF24);
}
@container (min-width: 720px) {
  .pg-d .pg-symptoms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The quiet conclusion after the dense register. */
.pg-d .pg-symptoms > p:last-child {
  font-size: var(--t-large); line-height: 1.4; color: var(--df-text-headline, #F2EEE6); max-width: 26em; margin: 0;
}

/* Prose: the first paragraph carries the statement. */
.pg-d .pg-s--prose > h2 + p { font-size: var(--t-large); line-height: 1.5; color: var(--df-text-headline, #F2EEE6); max-width: 30em; margin-bottom: var(--sp-lg); }

/* What we can build: a ruled list, name on the left, plain description on the right. */
.pg-d .pg-s--cards .pg-cards { display: block; margin: 0; }
.pg-d .pg-s--cards .pg-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs);
  padding: var(--sp-lg) 0; background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
}
.pg-d .pg-s--cards .pg-card h3 { margin: 0; }
.pg-d .pg-s--cards .pg-card p { font-size: 1.0625rem; max-width: 34em; }
@container (min-width: 720px) {
  .pg-d .pg-s--cards .pg-card { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--gutter); }
}
/* Applications and portals: three interfaces side by side. */
@container (min-width: 720px) {
  .pg-d #apps-portals .pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xl); margin-bottom: var(--sp-2xl); }
  .pg-d #apps-portals .pg-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); border-top: 2px solid var(--df-text-headline, #F2EEE6); padding: var(--sp-md) 0 0; align-content: start; }
  .pg-d #apps-portals .pg-card p { font-size: 1rem; }
}
.pg-d .pg-s--cards > p:last-child { margin: var(--sp-xl) 0 0; color: var(--df-text-headline, #F2EEE6); }

/* Evidence: one sheet of warm paper. Each entry states what kind of evidence it is. */
.pg-d .pg-evidence {
  background: var(--paper); color: var(--paper-ink); border-top: 0; border-radius: var(--radius);
  padding: clamp(24px, 5cqw, 56px); margin-bottom: var(--sp-4xl);
}
.pg-d .pg-evidence h2, .pg-d .pg-evidence h3 { color: var(--paper-ink); }
.pg-d .pg-evidence .pg-num { color: var(--paper-quiet) !important; }
.pg-d .pg-evidence p { color: #3A3936; }
.pg-d .pg-evidence .pg-intro { color: var(--paper-ink) !important; }
.pg-d .pg-evidence__list { grid-template-columns: minmax(0, 1fr); gap: 0 var(--gutter); margin: 0 0 var(--sp-lg); }
.pg-d .pg-evidence__item { background: none; border: 0; border-top: 1px solid var(--paper-rule); border-radius: 0; padding: var(--sp-lg) 0 var(--sp-xl); }
.pg-d .pg-evidence__item h3 { font-size: 1.375rem; letter-spacing: -0.01em; margin-bottom: var(--sp-sm); }
@container (min-width: 720px) {
  .pg-d .pg-evidence__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Proof labels are states, told apart by words and by shape, not by colour. */
.pg-d .pg-tag { border-radius: 2px; padding: 4px 9px; font-size: 0.6875rem !important; margin-bottom: var(--sp-md) !important; }
.pg-d .pg-tag--own { color: var(--paper) !important; background: var(--paper-ink); border: 1px solid var(--paper-ink); }
.pg-d .pg-tag--anon, .pg-d .pg-tag--illustrative { color: var(--paper-ink) !important; background: none; border: 1px dashed var(--paper-ink); }
.pg-d .pg-evidence .pg-note { color: var(--paper-quiet) !important; font-size: 0.9375rem; max-width: 44em; margin: 0; padding-top: var(--sp-lg); border-top: 1px solid var(--paper-rule); }
.pg-d .pg-evidence :focus-visible { outline-color: var(--paper-ink); }
.pg-d .pg-evidence + .pg-s { border-top: 0; }

/* How we work: a sequence, so it reads left to right when there is room. */
.pg-d .pg-steps { gap: 0; margin: 0; }
.pg-d .pg-steps li { padding: var(--sp-lg) 0 var(--sp-lg) 3.4em; border-top: 1px solid var(--rule); }
.pg-d .pg-steps li::before { top: calc(var(--sp-lg) + 0.25em); font-size: var(--t-label); color: var(--quiet); }
.pg-d .pg-steps h3 { margin-bottom: var(--sp-xs); }
@container (min-width: 860px) {
  .pg-d .pg-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-lg); }
  .pg-d .pg-steps li { padding: var(--sp-2xl) 0 0; border-top: 2px solid var(--df-text-headline, #F2EEE6); }
  .pg-d .pg-steps li::before { top: var(--sp-md); }
  .pg-d .pg-steps h3 { min-height: 2.6em; }
  .pg-d .pg-steps p { font-size: 0.9375rem; line-height: 1.6; }
}

/* Scope: three plain lists, each with its own mark. */
.pg-d .pg-columns { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); margin: 0 0 var(--sp-xl); }
.pg-d .pg-column { padding: var(--sp-md) 0 0; border: 0; border-top: 1px solid var(--rule-strong); border-radius: 0; }
.pg-d .pg-column h3 { margin-bottom: var(--sp-md); }
.pg-d .pg-column .pg-list { list-style: none; padding: 0; font-size: 1rem; }
.pg-d .pg-column .pg-list li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); margin: 0; padding: 6px 0; line-height: 1.5; }
.pg-d .pg-column .pg-list li::before { font-family: var(--df-font-mono, monospace); color: var(--quiet); }
.pg-d .pg-column:nth-child(1) .pg-list li::before { content: "+"; }
.pg-d .pg-column:nth-child(2) .pg-list li::before { content: "✓"; }
.pg-d .pg-column:nth-child(3) .pg-list li::before { content: "→"; }
@container (min-width: 720px) {
  .pg-d .pg-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg-d .pg-s--columns > p:last-child { color: var(--df-text-headline, #F2EEE6); margin: 0; }

.pg-d .pg-s a { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.16s ease; }

/* ---------------------------------------------------------- contact */
.pg-d .pg-contact {
  margin-top: 0; padding: clamp(24px, 5cqw, 56px); border: 0; border-radius: var(--radius);
  background: var(--df-surface-card, #252623);
}
.pg-d .pg-contact h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--sp-md); }
.pg-d .pg-contact .pg-intro { margin-bottom: var(--sp-2xl) !important; }
.pg-d .pg-contact__ways { grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); gap: var(--sp-xl); margin: 0 0 var(--sp-xl); }
.pg-d .pg-contact__way { padding-top: var(--sp-md); border-top: 1px solid var(--rule-strong); }
.pg-d .pg-contact__value { font-size: 1.125rem; overflow-wrap: normal; transition: color 0.16s ease; }

/* ----------------------------------------------------------- mobile */
@media (max-width: 1023px) {
  .pg-d .pg-s h2 { margin-bottom: var(--sp-lg); }
}
@media (max-width: 600px) {
  .pg-d .pg-main { padding-left: 20px; padding-right: 20px; }
  .pg-d .pg-hero h1 { letter-spacing: -0.022em; margin-bottom: var(--sp-xl); }
  .pg-d .pg-hero .pg-btn { width: 100%; }
  .pg-d .pg-symptoms__list li { font-size: 1.0625rem; padding: var(--sp-md) 0; }
  /* The paper sheet and the contact block run edge to edge. */
  .pg-d .pg-evidence, .pg-d .pg-contact { margin-left: -20px; margin-right: -20px; border-radius: 0; padding-left: 20px; padding-right: 20px; }
  .pg-d .pg-contact .pg-btn { width: 100%; }
}

/* ----------------------------------------------------------- motion
   One load sequence: read the line, then the friction gets marked.
   Nothing moves on scroll except the "you are here" state of the index. */
@media (prefers-reduced-motion: no-preference) {
  .pg-d .pg-hero > * { animation: pg-rise 0.6s var(--ease-out) both; }
  .pg-d .pg-hero > h1 { animation-delay: 0.05s; }
  .pg-d .pg-hero > .pg-lead { animation-delay: 0.14s; }
  .pg-d .pg-hero > .pg-hero__actions { animation-delay: 0.22s; }
  .pg-d .pg-mark { animation: pg-mark 0.5s var(--ease-out) 0.55s both; }
}
@keyframes pg-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pg-mark { from { background-size: 0% 80%; color: var(--df-text-headline, #F2EEE6); } }

/* =====================================================================
   PASS 2 — depth, continuity, motion grammar

   Same world as the homepage (carbon, blueprint grid, conduits, points of
   signal), different chapter: here the points are a system being put in
   order, and nothing runs on a timer.

   Layers, back to front:
     1  .pg-env__field   the trace plate. Drawn once. Travels one screen
                         over the whole page (slow far plane).
     2  .pg-env__light   one broad light from the top left, shade at the foot
     3  .pg-spine        the conduit that joins the sections and fills as
                         the page is read
     4  content
     5  the paper sheet and the contact plane, lifted off the surface
   ===================================================================== */

.pg-env { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.pg-env__field {
  position: absolute; top: 0; left: 0; width: 100%; height: 200vh; will-change: transform;
  opacity: 0.7; transition: opacity 1.2s ease;
}
.pg-env[data-level="open"] .pg-env__field { opacity: 1; }
.pg-env[data-level="mid"] .pg-env__field { opacity: 0.7; }
.pg-env[data-level="quiet"] .pg-env__field { opacity: 0.45; }
.pg-env[data-level="low"] .pg-env__field { opacity: 0.3; }
.pg-env__light {
  position: absolute; inset: 0;
  background:
    radial-gradient(95% 75% at 0% 0%, rgba(244, 240, 231, 0.06), rgba(244, 240, 231, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28));
}
@media (min-width: 1024px) {
  /* The field steps back behind the reading column and is fullest in the margins. */
  .pg-env__field {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 23%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 91%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 23%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 91%, #000 100%);
  }
}
.pg-d .pg-main, .pg-d .pg-footer { position: relative; z-index: 1; }

/* ------------------------------------------------------------ spine */
.pg-layout { position: relative; }
.pg-spine { position: absolute; top: 0; bottom: 0; left: -11px; width: 1px; background: var(--rule); }
.pg-spine__fill {
  position: absolute; inset: 0; background: var(--df-signal-green, #B6FF2E); opacity: 0.85;
  transform: scaleY(0); transform-origin: 0 0; will-change: transform;
}
.pg-d .pg-s { border-top: 0; position: relative; --reach: 11px; }
/* The rule of each section leaves the spine at a node. */
.pg-d .pg-s::before {
  content: ""; position: absolute; top: 0; left: calc(var(--reach) * -1); right: 0; height: 1px;
  background: var(--rule-strong); transform-origin: 0 50%;
}
.pg-d .pg-s::after {
  content: ""; position: absolute; top: -3px; left: calc(var(--reach) * -1 - 3px); width: 7px; height: 7px;
  border-radius: 50%; background: var(--df-text-headline, #F2EEE6);
  box-shadow: 0 0 0 4px var(--df-surface-deep, #181917);
}
@media (min-width: 1024px) {
  .pg-spine { left: calc(var(--rail) + var(--gutter) / 2); }
  .pg-d .pg-s { --reach: calc(var(--gutter) / 2); }
}

/* Rules that can be drawn are backgrounds, not borders. */
.pg-d .pg-symptoms__list li,
.pg-d .pg-s--cards .pg-card,
.pg-d .pg-column {
  border-top: 0;
  background: linear-gradient(var(--rule), var(--rule)) no-repeat 0 0 / 100% 1px;
}
.pg-d .pg-column { background-image: linear-gradient(var(--rule-strong), var(--rule-strong)); }
@container (min-width: 720px) {
  .pg-d #apps-portals .pg-card {
    border-top: 0;
    background: linear-gradient(var(--df-text-headline, #F2EEE6), var(--df-text-headline, #F2EEE6)) no-repeat 0 0 / 100% 2px;
  }
}

/* ------------------------------------------- process: the connection */
.pg-d .pg-steps { position: relative; --p: 1; }
.pg-d .pg-steps::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--df-signal-green, #B6FF2E);
  transform: scaleY(var(--p)); transform-origin: 0 0;
}
.pg-d .pg-steps li::before { transition: color 0.3s ease; }
.pg-d .pg-steps li.is-on::before { color: var(--df-signal-green, #B6FF2E); }
@container (min-width: 860px) {
  .pg-d .pg-steps li { border-top: 2px solid var(--rule-strong); }
  .pg-d .pg-steps::before { right: 0; bottom: auto; width: auto; height: 2px; transform: scaleX(var(--p)); z-index: 1; }
}

/* ------------------------------------------- lifted surfaces (depth) */
.pg-d .pg-evidence {
  box-shadow: 9px 11px 0 -3px #D8D3C7, 0 2px 3px rgba(0, 0, 0, 0.3), 0 28px 64px -14px rgba(0, 0, 0, 0.6);
}
.pg-d .pg-evidence::before, .pg-d .pg-evidence::after { content: none; }
@media (min-width: 1024px) {
  /* The sheet lies over the spine: the conduit runs underneath it. */
  .pg-d .pg-evidence {
    margin-left: calc(var(--gutter) / -2 - 20px);
    padding-left: calc(clamp(24px, 5cqw, 56px) + var(--gutter) / 2 + 20px);
  }
}
.pg-d .pg-contact {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(244, 240, 231, 0.1), 0 2px 3px rgba(0, 0, 0, 0.25), 0 24px 56px -16px rgba(0, 0, 0, 0.55);
}

/* =====================================================================
   MOTION GRAMMAR
   A block gets data-rv only if it was below the screen when the script
   ran, so this never hides something the visitor is already reading.

   head      rule draws out of the spine, node sets, number, heading
             comes up through a mask
   text      statements simply appear (the quiet beat between builds)
   register  rows are ruled one after another, then numbered in yellow
   rows      rule, name from the left, then its description
   sequence  steps appear in order; the connection is driven by scroll
   marks     the +, check and arrow are set first, then the lines of text
   sheet     the paper is laid down
   plane     the contact block is brought forward
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pg-d { --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-draw: cubic-bezier(0.65, 0, 0.35, 1); }

  /* head */
  [data-rv~="head"]::before { transform: scaleX(0); transition: transform 0.9s var(--e-draw); }
  [data-rv~="head"]::after { transform: scale(0); transition: transform 0.4s var(--e-out); }
  [data-rv~="head"] > .pg-num { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s ease 0.3s, transform 0.5s var(--e-out) 0.3s; }
  [data-rv~="head"] > h2 { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); transition: clip-path 0.8s var(--e-out) 0.35s, transform 0.8s var(--e-out) 0.35s; }
  [data-rv~="head"].is-in::before { transform: none; }
  [data-rv~="head"].is-in::after { transform: none; }
  [data-rv~="head"].is-in > .pg-num { opacity: 1; transform: none; }
  [data-rv~="head"].is-in > h2 { clip-path: inset(-12% -4% -12% -4%); transform: none; }

  /* text */
  [data-rv~="text"] { opacity: 0; transition: opacity 0.7s ease 0.1s; }
  [data-rv~="text"].is-in { opacity: 1; }

  /* register */
  [data-rv~="register"] > li {
    opacity: 0; background-size: 0% 1px;
    transition: opacity 0.5s ease calc(var(--i) * 70ms + 0.1s), background-size 0.7s var(--e-draw) calc(var(--i) * 70ms);
  }
  [data-rv~="register"] > li::before { color: var(--quiet); transition: color 0.4s ease calc(var(--i) * 70ms + 0.75s); }
  [data-rv~="register"].is-in > li { opacity: 1; background-size: 100% 1px; }
  [data-rv~="register"].is-in > li::before { color: var(--df-signal-yellow, #F2FF24); }

  /* rows */
  [data-rv~="rows"] > .pg-card { background-size: 0% 1px; transition: background-size 0.8s var(--e-draw) calc(var(--i) * 110ms); }
  [data-rv~="rows"] > .pg-card h3 { opacity: 0; transform: translateX(-16px); transition: opacity 0.5s ease calc(var(--i) * 110ms + 0.15s), transform 0.6s var(--e-out) calc(var(--i) * 110ms + 0.15s); }
  [data-rv~="rows"] > .pg-card p { opacity: 0; transition: opacity 0.6s ease calc(var(--i) * 110ms + 0.32s); }
  [data-rv~="rows"].is-in > .pg-card { background-size: 100% 1px; }
  [data-rv~="rows"].is-in > .pg-card h3 { opacity: 1; transform: none; }
  [data-rv~="rows"].is-in > .pg-card p { opacity: 1; }
  @container (min-width: 720px) {
    #apps-portals [data-rv~="rows"] > .pg-card { background-size: 0% 2px; transition-delay: calc(var(--i) * 160ms); }
    #apps-portals [data-rv~="rows"] > .pg-card h3 { transform: none; }
    #apps-portals [data-rv~="rows"].is-in > .pg-card { background-size: 100% 2px; }
  }

  /* sequence */
  [data-rv~="sequence"] > li { opacity: 0; transition: opacity 0.6s ease calc(var(--i) * 90ms); }
  [data-rv~="sequence"].is-in > li { opacity: 1; }

  /* marks */
  [data-rv~="marks"] > .pg-column { background-size: 0% 1px; transition: background-size 0.8s var(--e-draw) calc(var(--i) * 140ms); }
  [data-rv~="marks"] > .pg-column h3 { opacity: 0; transition: opacity 0.5s ease calc(var(--i) * 140ms + 0.15s); }
  [data-rv~="marks"] .pg-list li { --d: calc(var(--i) * 140ms + 0.3s + var(--n) * 60ms); color: transparent; transition: color 0.5s ease calc(var(--d) + 0.12s); }
  [data-rv~="marks"] .pg-list li::before { transform: scale(0); transition: transform 0.35s var(--e-out) var(--d); }
  [data-rv~="marks"] .pg-list li:nth-child(1) { --n: 0; } [data-rv~="marks"] .pg-list li:nth-child(2) { --n: 1; }
  [data-rv~="marks"] .pg-list li:nth-child(3) { --n: 2; } [data-rv~="marks"] .pg-list li:nth-child(4) { --n: 3; }
  [data-rv~="marks"] .pg-list li:nth-child(5) { --n: 4; } [data-rv~="marks"] .pg-list li:nth-child(6) { --n: 5; }
  [data-rv~="marks"].is-in > .pg-column { background-size: 100% 1px; }
  [data-rv~="marks"].is-in > .pg-column h3 { opacity: 1; }
  [data-rv~="marks"].is-in .pg-list li { color: var(--df-text-muted, rgba(244, 240, 231, 0.76)); }
  [data-rv~="marks"].is-in .pg-list li::before { transform: none; }

  /* sheet */
  [data-rv~="sheet"] {
    opacity: 0; transform: translateY(56px) rotate(-0.8deg) scale(0.985); transform-origin: 20% 0;
    transition: opacity 0.5s ease, transform 1.1s var(--e-out);
  }
  [data-rv~="sheet"].is-in { opacity: 1; transform: none; }
  [data-rv~="sheet"] > .pg-num, [data-rv~="sheet"] > h2 { opacity: 1; transform: none; clip-path: none; }

  /* plane */
  [data-rv~="plane"] { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.9s var(--e-out); }
  [data-rv~="plane"].is-in { opacity: 1; transform: none; }
}

/* Pass 2 corrections */
.pg-d .pg-header { background: var(--df-carbon, #1C1D1B); }
/* Vertical sequence: the connection runs in its own gutter, clear of the numbers. */
.pg-d .pg-steps li { padding-left: 4.4em; }
.pg-d .pg-steps li::before { left: 18px; }
@container (min-width: 860px) {
  .pg-d .pg-steps li { padding-left: 0; }
  .pg-d .pg-steps li::before { left: 0; }
}

/* ---------------------------------------------------------------------
   Pass 2, after independent review
   1  The field never runs under words: it is held well back behind the
      reading column, kept out of the index, and coloured only in the margins.
   2  The build is shown again in the gap after each section (.pg-band), in
      the flow of the page, so a phone has it too.
   3  The joined state is reached before the end and closes the page.
   --------------------------------------------------------------------- */
@property --col-a { syntax: "<number>"; inherits: false; initial-value: 0.26; }
.pg-env__field { height: 240vh; }
@media (min-width: 1024px) {
  .pg-env__field {
    --col-a: 0.26; transition: opacity 1.2s ease, --col-a 1.2s ease;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 23%, rgba(0, 0, 0, var(--col-a)) 30%, rgba(0, 0, 0, var(--col-a)) 91%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 23%, rgba(0, 0, 0, var(--col-a)) 30%, rgba(0, 0, 0, var(--col-a)) 91%, #000 100%);
  }
  /* Beside the headline there is room, so the field comes forward there. */
  .pg-env[data-level="open"] .pg-env__field { --col-a: 0.42; }
  /* The index is a foreground object with its own ground. */
  .pg-toc { background: var(--df-surface-deep, #181917); box-shadow: 0 0 0 14px var(--df-surface-deep, #181917); }
}
@media (max-width: 1023px) {
  /* On a phone the text fills the width, so the plate stays far back; the bands carry the build. */
  .pg-env__field { opacity: 0.32; }
  .pg-env[data-level] .pg-env__field { opacity: 0.32; }
  .pg-env[data-level="open"] .pg-env__field { opacity: 0.6; }
}

.pg-band {
  position: absolute; right: 0; width: 100%; pointer-events: none;
  height: clamp(36px, 5vw, 56px); bottom: calc((var(--sp-4xl) - clamp(36px, 5vw, 56px)) / 2);
}
@media (min-width: 1024px) { .pg-band { width: 62%; } }

@media (prefers-reduced-motion: no-preference) {
  /* band: the cells come in from the reading side, as if set down in a row */
  [data-rv~="band"] { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 0.4s ease, clip-path 1.1s var(--e-draw); }
  [data-rv~="band"].is-in { opacity: 1; clip-path: inset(0 0 0 0); }

  /* sheet: laid down as an object, from further off and slightly turned */
  [data-rv~="sheet"] {
    transform: translateY(110px) rotate(-1.6deg) scale(0.975); transform-origin: 12% 0;
    transition: opacity 0.3s ease, transform 1.15s var(--e-out);
  }
  /* plane: brought forward from below */
  [data-rv~="plane"] { transform: translateY(72px) scale(0.985); transition: opacity 0.45s ease, transform 1s var(--e-out); }
}

/* =====================================================================
   PASS 3 — components

   Different content, different composition:
     symptoms        loose working objects on the desk (expressive)
     apps / portals  three interfaces, each with a small schematic (structured)
   Everything else keeps its pass 1 / pass 2 form on purpose: the prose
   sections, the capability list and the scope lists stay quiet.
   ===================================================================== */

/* ------------------------------------------------------- 01 symptoms
   Each symptom is the thing it talks about: a spreadsheet cell range, a
   sheet of paper, a message, a tool that is not joined to anything. They
   lie loose, off the grid and at different heights, the way the trace
   plate behind them does at this point of the page. Pointing at one
   squares it up. Adapted from the library: M-40 (objects occupying depth,
   without sticky stacking: eight short lines are not eight screens) and
   M-03 (lift on hover, here also straightening). */
.pg-d .pg-symptoms__list { gap: var(--sp-md); margin-bottom: var(--sp-3xl); }
.pg-d .pg-symptoms__list > li.pg-sym {
  --r: 0deg;
  display: block; position: relative; padding: 18px 20px 20px;
  border: 0; border-radius: 3px; background: var(--df-surface-dossier, #20211E);
  color: var(--df-text-headline, #F2EEE6); font-size: 1.0625rem; line-height: 1.5;
  transform: rotate(var(--r));
  box-shadow: 0 1px 0 rgba(244, 240, 231, 0.06) inset, 0 2px 3px rgba(0, 0, 0, 0.3), 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}
.pg-d .pg-symptoms__list > li.pg-sym::before {
  display: block; width: max-content; padding: 0; margin: 0 0 12px;
  font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--df-signal-yellow, #F2FF24);
}

/* spreadsheet: cell lines, and the number sits in the selected cell */
.pg-d .pg-symptoms__list > li.pg-sym--cell {
  background:
    linear-gradient(rgba(244, 240, 231, 0.055) 1px, transparent 1px) 0 -1px / 100% 30px,
    linear-gradient(90deg, rgba(244, 240, 231, 0.055) 1px, transparent 1px) -1px 0 / 76px 100%,
    var(--df-surface-dossier, #20211E);
}
.pg-d .pg-symptoms__list > li.pg-sym--cell::before {
  padding: 3px 8px; margin: -4px 0 12px -6px; outline: 1px solid var(--df-signal-yellow, #F2FF24);
  background: var(--df-surface-dossier, #20211E);
}
/* paper */
.pg-d .pg-symptoms__list > li.pg-sym--paper {
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 6px 7px 0 -3px #D8D3C7, 0 2px 3px rgba(0, 0, 0, 0.3), 0 18px 36px -14px rgba(0, 0, 0, 0.65);
}
.pg-d .pg-symptoms__list > li.pg-sym--paper::before { color: var(--paper-quiet); }
/* message */
.pg-d .pg-symptoms__list > li.pg-sym--message {
  background: var(--df-surface-card-hover, #2E2F2B); border-radius: 18px 18px 18px 4px;
}
/* tool: a panel with a link that leaves it and stops short */
.pg-d .pg-symptoms__list > li.pg-sym--panel {
  background: var(--df-carbon, #1C1D1B); box-shadow: 0 0 0 1px var(--rule-strong), 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}
.pg-d .pg-symptoms__list > li.pg-sym--panel::after {
  /* two cells and a link between them that does not meet */
  content: ""; position: absolute; right: 20px; top: 19px; width: 84px; height: 9px;
  background:
    linear-gradient(var(--quiet), var(--quiet)) 0 0 / 9px 9px no-repeat,
    linear-gradient(var(--quiet), var(--quiet)) 100% 0 / 9px 9px no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) 13px 4px / 22px 1px no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) calc(100% - 13px) 4px / 22px 1px no-repeat;
}
/* message: the tail of a speech bubble */
.pg-d .pg-symptoms__list > li.pg-sym--message::after {
  content: ""; position: absolute; left: 0; bottom: -9px; width: 16px; height: 10px;
  background: var(--df-surface-card-hover, #2E2F2B); clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* phone: one column, the objects lapping slightly, barely turned */
.pg-d .pg-symptoms__list > li.pg-sym:nth-child(odd) { --r: -0.5deg; margin-right: 14px; }
.pg-d .pg-symptoms__list > li.pg-sym:nth-child(even) { --r: 0.45deg; margin-left: 14px; }

@container (min-width: 720px) {
  .pg-d .pg-symptoms__list { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--sp-lg); align-items: start; padding: var(--sp-md) 0 var(--sp-lg); }
  .pg-d .pg-symptoms__list > li.pg-sym { margin: 0; padding: 20px 24px 24px; }
  /* placed by hand: pairs that do not line up, each lapping the one before */
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(1) { grid-column: 1 / 7;  --r: -1.1deg; z-index: 2; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(2) { grid-column: 7 / 12; --r: 0.9deg;  margin-top: 44px; z-index: 3; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(3) { grid-column: 2 / 7;  --r: 0.6deg;  margin-top: -6px; z-index: 4; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(4) { grid-column: 8 / 13; --r: -0.8deg; margin-top: 30px; z-index: 2; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(5) { grid-column: 1 / 6;  --r: 1deg;    margin-top: 6px;  z-index: 5; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(6) { grid-column: 6 / 11; --r: -0.6deg; margin-top: 40px; z-index: 4; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(7) { grid-column: 3 / 8;  --r: -0.9deg; margin-top: 2px;  z-index: 6; }
  .pg-d .pg-symptoms__list > li.pg-sym:nth-child(8) { grid-column: 8 / 13; --r: 0.7deg;  margin-top: 34px; z-index: 5; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The objects are put down one after another, each a little more turned
     than it ends up; then its number is marked. */
  .pg-d [data-rv~="register"] > li.pg-sym {
    opacity: 0; background-size: auto; transform: translateY(34px) rotate(calc(var(--r) * 2.4));
    transition: opacity 0.4s ease calc(var(--i) * 80ms), transform 0.8s var(--e-out) calc(var(--i) * 80ms);
  }
  .pg-d [data-rv~="register"].is-in > li.pg-sym { opacity: 1; background-size: auto; transform: rotate(var(--r)); }
  .pg-d [data-rv~="register"] > li.pg-sym--cell,
  .pg-d [data-rv~="register"].is-in > li.pg-sym--cell { background-size: 100% 30px, 76px 100%, auto; }
  .pg-d [data-rv~="register"] > li.pg-sym::before { color: var(--quiet); transition: color 0.4s ease calc(var(--i) * 80ms + 0.6s); }
  .pg-d [data-rv~="register"].is-in > li.pg-sym::before { color: var(--df-signal-yellow, #F2FF24); }
  .pg-d [data-rv~="register"] > li.pg-sym--paper::before,
  .pg-d [data-rv~="register"].is-in > li.pg-sym--paper::before { color: var(--paper-quiet); }
}

/* ------------------------------------------------ 04 apps / portals
   Three interfaces, so each opens with a schematic of the screen it is:
   a status list for customers, a workspace with a side bar for the team,
   one screen on a phone for one process. Lines only, no device mockup. */
.pg-d #apps-portals .pg-card::before {
  content: ""; display: block; height: 76px; margin: var(--sp-md) 0 var(--sp-sm);
  border: 1px solid var(--rule-strong); border-radius: 3px; background-color: var(--df-carbon, #1C1D1B);
  background-repeat: no-repeat;
}
/* customer portal: three jobs, each with its state */
.pg-d #apps-portals .pg-card:nth-child(1)::before {
  background-image:
    linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--df-signal-green, #B6FF2E), var(--df-signal-green, #B6FF2E)), linear-gradient(var(--quiet), var(--quiet)), linear-gradient(var(--quiet), var(--quiet)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule));
  background-size: 52% 2px, 38% 2px, 46% 2px, 7px 7px, 7px 7px, 7px 7px, 100% 1px, 100% 1px;
  background-position: 14px 15px, 14px 37px, 14px 59px, calc(100% - 14px) 12px, calc(100% - 14px) 34px, calc(100% - 14px) 56px, 0 26px, 0 48px;
}
/* internal portal: side bar and a working area */
.pg-d #apps-portals .pg-card:nth-child(2)::before {
  background-image:
    linear-gradient(rgba(244, 240, 231, 0.07), rgba(244, 240, 231, 0.07)),
    linear-gradient(var(--quiet), var(--quiet)), linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong));
  background-size: 30% 100%, 16% 2px, 14% 2px, 12% 2px, 44% 2px, 54% 2px, 36% 2px;
  background-position: 0 0, 12px 16px, 12px 30px, 12px 44px, calc(30% + 46px) 18px, calc(30% + 58px) 36px, calc(30% + 38px) 54px;
}
/* one process on a phone: one screen, one action */
.pg-d #apps-portals .pg-card:nth-child(3)::before {
  width: 46px; border-radius: 7px;
  background-image:
    linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--df-signal-green, #B6FF2E), var(--df-signal-green, #B6FF2E));
  background-size: 24px 2px, 18px 2px, 28px 9px;
  background-position: 8px 16px, 8px 26px, 8px calc(100% - 10px);
}
@container (min-width: 720px) {
  .pg-d #apps-portals .pg-card::before { margin-top: var(--sp-sm); }
}

/* A turned block that is taller than the screen is wider than the screen:
   below the desktop layout the sheet is laid down straight, and nothing that
   is waiting to arrive may widen the page. */
.pg-d .pg-main { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  [data-rv~="sheet"] { transform: translateY(72px); }
}

/* =====================================================================
   DESIGN LANGUAGE — shared by every generated page

   Signal grammar (neutral foundation, controlled signals):
     green   action, "you are here", what is joined or working
     yellow  the marked friction: what is loose, stuck or highlighted
     orange  editorial voice: kickers, process and scope numbers,
             drawn underlines on statements, evidence labels on paper
   Pink is not used on these pages. Prose sections carry no signal.
   ===================================================================== */

/* ------------------------------------------------ header and footer
   One navigation language with the homepage: mono capitals, pill
   language switch, dark call-to-action with the green edge and signal. */
.pg-d .pg-header { background: rgba(23, 24, 22, 0.97); }
.pg-d .pg-brand { font-size: 14px; letter-spacing: 0.12em; gap: 12px; }
.pg-d .pg-nav { gap: 2px; }
.pg-d .pg-nav a {
  font-family: var(--df-font-mono, monospace); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pg-d .pg-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--df-signal-green, #B6FF2E); }
.pg-d .lang { gap: 4px; }
.pg-d .lang__opt {
  min-height: 32px; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--df-font-sans, sans-serif); font-size: 0.7rem; font-weight: 700; color: rgba(242, 238, 230, 0.7);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pg-d a.lang__opt:hover { background: rgba(242, 238, 230, 0.1); color: #F2EEE6; }
.pg-d .lang__opt--active { border-color: rgba(242, 238, 230, 0.35); color: #F2EEE6; }
.pg-d .lang__flag { border: 1px solid rgba(242, 238, 230, 0.12); }
.pg-d .pg-header .pg-btn--small {
  min-height: 36px; padding: 0 16px; gap: 7px; border-radius: 6px;
  font-family: var(--df-font-mono, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: #F4F0E7; border: 1.2px solid rgba(182, 255, 46, 0.7);
  background: linear-gradient(135deg, rgba(182, 255, 46, 0.12) 0%, rgba(29, 29, 27, 0.94) 80%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.pg-d .pg-header .pg-btn--small::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #B6FF2E; }
.pg-d .pg-header .pg-btn--small:hover { color: #F4F0E7; border-color: rgba(182, 255, 46, 0.95); background: linear-gradient(135deg, rgba(182, 255, 46, 0.22) 0%, rgba(29, 29, 27, 0.98) 80%); }
@media (pointer: coarse) { .pg-d .lang__opt { min-height: 44px; } .pg-d .pg-header .pg-btn--small { min-height: 44px; } }

.pg-d .pg-footer { background: var(--df-surface-footer, #141412); font-size: 0.88rem; }
.pg-d .pg-footer__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.pg-d .pg-footer__identity { display: flex; align-items: baseline; gap: 16px; }
.pg-d .pg-footer__brand { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; text-transform: none; }
.pg-d .pg-footer__nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 28px; }
.pg-d .pg-footer__nav a { transition: color 0.2s ease; }
.pg-d .pg-footer__nav a:hover { color: var(--df-signal-green, #B6FF2E); }
.pg-d .pg-footer__nav + .pg-footer__nav { flex-basis: 100%; padding-top: 8px; border-top: 1px solid var(--rule); }
.pg-d .pg-footer__label { padding: 0; color: var(--df-electric-orange, #FF6A1A); }
.pg-d .pg-footer__legal { font-size: 0.78rem; color: rgba(242, 238, 230, 0.6); margin-top: 18px; }

/* ----------------------------------------------- signals in the text */
.pg-d .pg-num { font-weight: 700; }
.pg-d .pg-s--symptoms > .pg-num { color: var(--df-signal-yellow, #F2FF24) !important; }
.pg-d .pg-s--cards > .pg-num, .pg-d .pg-s--steps > .pg-num { color: var(--df-signal-green, #B6FF2E) !important; }
.pg-d .pg-s--columns > .pg-num, .pg-d .pg-s--people > .pg-num { color: var(--df-electric-orange, #FF6A1A) !important; }
.pg-d .pg-evidence > .pg-num { color: var(--df-signal-orange-contrast, #A43A00) !important; }
/* prose, related and facts keep the quiet number */

.pg-d--systems .pg-eyebrow, .pg-d--about .pg-eyebrow { color: var(--df-electric-orange, #FF6A1A); }
.pg-d--websites .pg-eyebrow { color: var(--df-signal-green, #B6FF2E); }

/* the marked H1 phrase: a filled field (yellow or orange) or a drawn stroke */
.pg-mark--orange { background-image: linear-gradient(var(--df-electric-orange, #FF6A1A), var(--df-electric-orange, #FF6A1A)); }
.pg-mark--stroke { color: inherit; background: none; padding: 0; margin: 0; }
.pg-mark--stroke, .pg-stroke {
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.34em; padding-bottom: 0.14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* drawn underlines, the homepage's editorial mark: one curve per colour */
.pg-stroke--yellow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C 50 1.5, 120 7.5, 199 3.5' stroke='%23F2FF24' stroke-width='2.4' stroke-linecap='round' fill='none' opacity='0.8'/%3E%3C/svg%3E"); }
.pg-stroke--orange, .pg-mark--stroke { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 3.5 C 60 6.5, 140 1.5, 199 4.5' stroke='%23FF6A1A' stroke-width='2.4' stroke-linecap='round' fill='none' opacity='0.85'/%3E%3C/svg%3E"); }
.pg-stroke--green { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C 70 2, 130 6.5, 199 3' stroke='%23B6FF2E' stroke-width='2.4' stroke-linecap='round' fill='none' opacity='0.8'/%3E%3C/svg%3E"); }

/* scope lists: what adds, what you get, what we need */
.pg-d .pg-column:nth-child(1) .pg-list li::before { color: var(--df-electric-orange, #FF6A1A); }
.pg-d .pg-column:nth-child(2) .pg-list li::before { color: var(--df-signal-green, #B6FF2E); }
.pg-d .pg-column:nth-child(1) { background-image: linear-gradient(90deg, var(--df-electric-orange, #FF6A1A) 0 36px, var(--rule-strong) 36px); }
.pg-d .pg-column:nth-child(2) { background-image: linear-gradient(90deg, var(--df-signal-green, #B6FF2E) 0 36px, var(--rule-strong) 36px); }
/* process: the step that is not reached yet is quiet, the reached ones are green (pass 2) */
.pg-d .pg-role { color: var(--df-electric-orange, #FF6A1A) !important; }

/* ---------------------------------------- related pages and note slips
   Real links, so they answer to the pointer: the top line is traced in
   green and the arrow moves (library M-08). A link to a field note is a
   paper slip, the same material as the evidence sheet it leads to. */
.pg-d .pg-s--related .pg-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); margin: 0; }
.pg-d .pg-s--related .pg-card--link {
  position: relative; display: block; padding: var(--sp-lg) 0 var(--sp-md); border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 1px 0 var(--rule-strong);
}
.pg-d .pg-s--related .pg-card--link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--df-signal-green, #B6FF2E);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.22s var(--ease-out);
}
.pg-d .pg-s--related .pg-card--link:hover::before, .pg-d .pg-s--related .pg-card--link:focus-visible::before { transform: none; }
.pg-d .pg-s--related .pg-card--link h3 { font-size: 1.375rem; letter-spacing: -0.01em; }
.pg-d .pg-s--related .pg-card--link h3::after { display: inline-block; transition: transform 0.22s var(--ease-out); }
.pg-d .pg-s--related .pg-card--link:hover h3::after { transform: translateX(5px); }
.pg-d .pg-s--related .pg-card--link:hover { background: none; }
@container (min-width: 720px) {
  .pg-d .pg-s--related .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-xl); }
}
.pg-kicker {
  display: block; margin: 0 0 var(--sp-sm); font-family: var(--df-font-mono, monospace); font-size: 0.6875rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--df-signal-orange-contrast, #A43A00);
}
.pg-d .pg-s--related .pg-card--note {
  max-width: 34rem; padding: var(--sp-lg) var(--sp-lg) var(--sp-lg); background: var(--paper); border-radius: 3px; transform: rotate(-0.6deg);
  box-shadow: 6px 7px 0 -3px #D8D3C7, 0 2px 3px rgba(0, 0, 0, 0.3), 0 18px 36px -14px rgba(0, 0, 0, 0.65);
  transition: transform 0.26s var(--ease-out);
}
.pg-d .pg-s--related .pg-card--note h3 { color: var(--paper-ink); }
.pg-d .pg-s--related .pg-card--note p { color: #3A3936; }
.pg-d .pg-s--related .pg-card--note h3::after { color: var(--paper-ink); }
.pg-d .pg-s--related .pg-card--note::before { background: var(--paper-ink); left: var(--sp-lg); right: var(--sp-lg); top: auto; bottom: 14px; height: 1px; }
.pg-d .pg-s--related .pg-card--note:hover { background: var(--paper); transform: rotate(0deg) translateY(-2px); }
.pg-d .pg-s--related .pg-card--note:focus-visible { outline-color: var(--df-signal-green, #B6FF2E); }

/* =====================================================================
   WEBSITES — a different chapter: the page as a route
   ===================================================================== */
/* Where it gets stuck: stops along a broken route, left and right of it. */
.pg-d--websites .pg-symptoms__list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 30px; margin-bottom: var(--sp-lg); }
.pg-d--websites .pg-symptoms__list::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; transform-origin: 0 0;
  background: repeating-linear-gradient(180deg, var(--rule-strong) 0 10px, transparent 10px 17px);
}
.pg-d--websites .pg-symptoms__list > li {
  position: relative; display: block; padding: var(--sp-md) 0; background: none; border: 0;
  font-size: 1.125rem; line-height: 1.45; color: var(--df-text-headline, #F2EEE6);
}
.pg-d--websites .pg-symptoms__list > li::before { display: block; padding: 0; margin-bottom: 6px; }
.pg-d--websites .pg-symptoms__list > li::after {
  content: ""; position: absolute; left: -30px; top: calc(var(--sp-md) + 2px); width: 11px; height: 11px;
  background: var(--df-surface-deep, #181917); outline: 1.5px solid var(--df-signal-yellow, #F2FF24); outline-offset: -1.5px;
}
@container (min-width: 720px) {
  .pg-d--websites .pg-symptoms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 112px; padding: var(--sp-md) 0; }
  .pg-d--websites .pg-symptoms__list::before { left: 50%; }
  .pg-d--websites .pg-symptoms__list > li { padding: var(--sp-lg) 0; max-width: 23em; }
  .pg-d--websites .pg-symptoms__list > li:nth-child(odd) { justify-self: end; text-align: right; }
  .pg-d--websites .pg-symptoms__list > li:nth-child(odd)::before { margin-left: auto; width: max-content; }
  .pg-d--websites .pg-symptoms__list > li:nth-child(even) { margin-top: 72px; }
  .pg-d--websites .pg-symptoms__list > li:nth-child(odd)::after { left: auto; right: -62px; top: calc(var(--sp-lg) + 2px); }
  .pg-d--websites .pg-symptoms__list > li:nth-child(even)::after { left: -61px; top: calc(var(--sp-lg) + 2px); }
}
/* "One job: lead a person to the next step": the order of a page, as a wireframe */
@container (min-width: 860px) {
  .pg-d--websites #s-02 > h2 + p::after {
    content: ""; position: absolute; right: 0; top: var(--sp-3xl); width: 168px; height: 212px;
    border: 1px solid var(--rule-strong); border-radius: 3px; background-color: var(--df-carbon, #1C1D1B); background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--df-text-headline, #F2EEE6), var(--df-text-headline, #F2EEE6)), linear-gradient(var(--df-text-headline, #F2EEE6), var(--df-text-headline, #F2EEE6)),
      linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
      linear-gradient(var(--rule), var(--rule)),
      linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
      linear-gradient(var(--df-signal-green, #B6FF2E), var(--df-signal-green, #B6FF2E));
    background-size: 96px 5px, 66px 5px, 124px 2px, 110px 2px, 118px 2px, 100% 1px, 124px 2px, 86px 2px, 76px 18px;
    background-position: 20px 24px, 20px 36px, 20px 62px, 20px 72px, 20px 82px, 0 106px, 20px 124px, 20px 134px, 20px 166px;
  }
}

/* =====================================================================
   ABOUT — calmer and human
   ===================================================================== */
.pg-founders { margin: 0 0 var(--sp-2xl); overflow: hidden; border-radius: var(--radius); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 28px 64px -14px rgba(0, 0, 0, 0.6); }
.pg-founders img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pg-d .pg-s--people .pg-cards { gap: var(--sp-xl); margin: 0; }
.pg-d .pg-s--people .pg-card { padding: var(--sp-md) 0 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--rule-strong); }
.pg-d .pg-s--people .pg-card h3 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--sp-xs); }
.pg-d .pg-s--people .pg-card p:last-child { font-size: 1.0625rem; }
/* How we think: three statements, each said once and large */
.pg-d--about .pg-s--prose .pg-list { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: principle; }
.pg-d--about .pg-s--prose .pg-list li {
  counter-increment: principle; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); margin: 0; padding: var(--sp-lg) 0;
  box-shadow: inset 0 1px 0 var(--rule); color: var(--df-text-muted, rgba(244, 240, 231, 0.76)); line-height: 1.6;
}
.pg-d--about .pg-s--prose .pg-list li::before {
  content: counter(principle, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 0.5em;
  font-family: var(--df-font-mono, monospace); font-size: var(--t-label); font-weight: 600; color: var(--df-electric-orange, #FF6A1A);
}
.pg-d--about .pg-s--prose .pg-list li strong { display: block; font-size: var(--t-large); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 6px; }
.pg-d .pg-facts { margin: 0 0 var(--sp-lg); }
.pg-d .pg-facts > div { border-top: 0; box-shadow: inset 0 1px 0 var(--rule); padding: 14px 0; }

/* =====================================================================
   FIELD NOTES — an evidence record, not an article
   The steps lie on one sheet of paper. The step label sits in the margin
   like a note on a file; findings are highlighted; what is not known is
   set apart as a dashed note.
   ===================================================================== */
.pg-d--note .pg-hero { padding-bottom: var(--sp-3xl); }
.pg-d--note .pg-eyebrow {
  width: max-content; padding: 4px 10px; color: var(--df-ink, #1D1D1B); background: var(--df-signal-yellow, #F2FF24); letter-spacing: 0.12em;
}
.pg-d--note .pg-hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem); max-width: 20ch; }
.pg-d--note .pg-meta { font-size: 0.8125rem; }
.pg-d--note .pg-spine { display: none; }
.pg-record {
  background: var(--paper); color: var(--paper-ink); border-radius: var(--radius); margin-bottom: var(--sp-4xl);
  padding: clamp(8px, 2cqw, 24px) clamp(20px, 5cqw, 56px);
  box-shadow: 9px 11px 0 -3px #D8D3C7, 0 2px 3px rgba(0, 0, 0, 0.3), 0 28px 64px -14px rgba(0, 0, 0, 0.6);
}
.pg-d--note .pg-s--step { margin: 0; padding: var(--sp-xl) 0 var(--sp-2xl); border: 0; }
.pg-d--note .pg-s--step::before { left: 0; background: var(--paper-rule); }
.pg-d--note .pg-s--step:first-child::before { content: none; }
.pg-d--note .pg-s--step::after { content: none; }
.pg-d--note .pg-step__label {
  margin: 0 0 var(--sp-md); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--df-signal-orange-contrast, #A43A00);
}
.pg-d--note .pg-s--step h2 { color: var(--paper-ink); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); max-width: 24ch; margin-bottom: var(--sp-lg); }
.pg-d--note .pg-s--step p { color: #2F2E2B; max-width: 36em; }
.pg-d--note .pg-s--step > h2 + p { font-size: 1.125rem; }
.pg-d--note .pg-s--step .pg-list { list-style: none; padding: 0; margin: var(--sp-md) 0; max-width: 38em; color: #2F2E2B; }
.pg-d--note .pg-s--step .pg-list li { position: relative; margin: 0; padding: 12px 0 12px 26px; box-shadow: inset 0 1px 0 var(--paper-rule); line-height: 1.6; }
.pg-d--note .pg-s--step .pg-list li::before { content: ""; position: absolute; left: 2px; top: 1.25em; width: 7px; height: 7px; background: var(--paper-ink); }
/* a finding: highlighted as with a marker pen */
.pg-d--note .pg-s--step .pg-list strong {
  color: var(--paper-ink); font-weight: 600; padding: 0 2px;
  background: linear-gradient(var(--df-signal-yellow, #F2FF24), var(--df-signal-yellow, #F2FF24)) no-repeat 0 62% / 100% 76%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* what came later, or what is not known: a dashed note beside the record */
.pg-d--note .pg-s--step > .pg-list + p {
  margin-top: var(--sp-lg); padding: 12px 16px; border: 1px dashed var(--paper-ink); border-radius: 2px;
  font-size: 0.9375rem; color: var(--paper-ink); max-width: 34em;
}
.pg-d--note .pg-s--step a { color: var(--paper-ink); font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--df-signal-orange-contrast, #A43A00); }
.pg-d--note .pg-s--step a:hover { color: var(--df-signal-orange-contrast, #A43A00); }
.pg-d--note .pg-record :focus-visible { outline-color: var(--paper-ink); }
@container (min-width: 760px) {
  /* label in the margin, the record beside it */
  .pg-d--note .pg-s--step { display: grid; grid-template-columns: 172px minmax(0, 1fr); column-gap: var(--sp-xl); }
  .pg-d--note .pg-s--step > * { grid-column: 2; }
  .pg-d--note .pg-s--step > .pg-step__label { grid-column: 1; grid-row: 1 / span 6; margin: 0.55em 0 0; line-height: 1.6; }
}
@media (min-width: 1024px) {
  .pg-record { margin-left: calc(var(--gutter) / -2 - 20px); }
}
@media (max-width: 600px) {
  .pg-record { margin-left: -20px; margin-right: -20px; border-radius: 0; padding-left: 20px; padding-right: 20px; }
}

/* ---------------------------------------------------- motion additions */
@media (prefers-reduced-motion: no-preference) {
  /* strokes and highlights are drawn after the words they sit under have arrived */
  .pg-stroke, .pg-mark--stroke { transition: background-size 0.9s var(--e-draw, ease) 0.7s; }
  [data-rv]:not(.is-in) .pg-stroke { background-size: 0% 0.34em; }
  .pg-d .pg-hero .pg-mark--stroke { animation: pg-stroke 0.9s var(--ease-out) 0.6s both; }
  .pg-d--note .pg-s--step .pg-list strong { transition: background-size 0.7s var(--e-draw, ease) 0.35s; }
  .pg-d--note [data-rv]:not(.is-in) strong { background-size: 0% 76%; }
  [data-rv~="head"] > .pg-step__label { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s ease 0.25s, transform 0.5s var(--e-out) 0.25s; }
  [data-rv~="head"].is-in > .pg-step__label { opacity: 1; transform: none; }

  /* websites: the route is walked, each stop comes in from its own side */
  .pg-d--websites [data-rv~="register"]::before { transform: scaleY(0); transition: transform 1.5s var(--e-draw); }
  .pg-d--websites [data-rv~="register"].is-in::before { transform: none; }
  .pg-d--websites [data-rv~="register"] > li { opacity: 0; background-size: auto; transform: translateX(14px); transition: opacity 0.5s ease calc(var(--i) * 110ms + 0.2s), transform 0.6s var(--e-out) calc(var(--i) * 110ms + 0.2s); }
  .pg-d--websites [data-rv~="register"] > li:nth-child(odd) { transform: translateX(-14px); }
  .pg-d--websites [data-rv~="register"].is-in > li { opacity: 1; transform: none; }
  .pg-d--websites [data-rv~="register"] > li::after { transform: scale(0); transition: transform 0.3s var(--e-out) calc(var(--i) * 110ms + 0.1s); }
  .pg-d--websites [data-rv~="register"].is-in > li::after { transform: none; }

  /* about: the photograph is uncovered, nothing else performs */
  [data-rv~="photo"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--e-out); }
  [data-rv~="photo"] img { transform: scale(1.06); transition: transform 1.6s var(--e-out); }
  [data-rv~="photo"].is-in { clip-path: inset(0); }
  [data-rv~="photo"].is-in img { transform: none; }
}
@keyframes pg-stroke { from { background-size: 0% 0.34em; } }

/* note kicker is a label, not a column */
.pg-d--note .pg-eyebrow { align-self: start; justify-self: start; }

/* =====================================================================
   FIELD NOTES HUB — a register of evidence, not a blog index
   One sheet of paper; one ruled entry per note: type and topic in the
   margin, the title as the way in, a line of summary, and the service
   the note belongs to. No thumbnails, no categories without notes.
   ===================================================================== */
.pg-t--hub .pg-eyebrow { color: var(--df-electric-orange, #FF6A1A); }
.pg-d .pg-notes {
  background: var(--paper); color: var(--paper-ink); border-radius: var(--radius); margin-bottom: var(--sp-4xl);
  padding: clamp(24px, 5cqw, 56px);
  box-shadow: 9px 11px 0 -3px #D8D3C7, 0 2px 3px rgba(0, 0, 0, 0.3), 0 28px 64px -14px rgba(0, 0, 0, 0.6);
}
.pg-d .pg-notes::before, .pg-d .pg-notes::after { content: none; }
.pg-d .pg-notes > h2 { color: var(--paper-ink); }
.pg-d .pg-notes > .pg-num { color: var(--df-signal-orange-contrast, #A43A00) !important; }
.pg-d .pg-notes + .pg-s { border-top: 0; }
.pg-entries { list-style: none; margin: 0; padding: 0; }
.pg-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); padding: var(--sp-xl) 0; box-shadow: inset 0 1px 0 var(--paper-rule); }
.pg-entry__meta {
  display: grid; gap: 4px; margin: 0 0 var(--sp-xs) !important;
  font-family: var(--df-font-mono, monospace); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.pg-entry__meta span:first-child { color: var(--df-signal-orange-contrast, #A43A00) !important; font-weight: 600; }
.pg-entry__meta span:last-child { color: var(--paper-quiet); }
.pg-d .pg-entry h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 22ch; }
.pg-d .pg-entry h3 a {
  color: var(--paper-ink); text-decoration: none;
  background: linear-gradient(var(--paper-ink), var(--paper-ink)) no-repeat 0 100% / 0% 2px; transition: background-size 0.3s var(--ease-out);
}
.pg-d .pg-entry h3 a::after { content: " →"; color: var(--df-signal-orange-contrast, #A43A00); }
.pg-d .pg-entry h3 a:hover, .pg-d .pg-entry h3 a:focus-visible { background-size: 100% 2px; color: var(--paper-ink); }
.pg-d .pg-entry p { color: #2F2E2B; margin: 0; max-width: 36em; }
.pg-d .pg-entry__owner { font-size: 0.9375rem; padding-top: var(--sp-xs); }
.pg-d .pg-entry__owner a { color: var(--paper-ink); font-weight: 600; text-decoration-color: var(--df-signal-orange-contrast, #A43A00); text-decoration-thickness: 2px; }
.pg-d .pg-entry__owner a:hover { color: var(--df-signal-orange-contrast, #A43A00); }
.pg-d .pg-notes :focus-visible { outline-color: var(--paper-ink); }
@container (min-width: 760px) {
  .pg-entry { grid-template-columns: 172px minmax(0, 1fr); column-gap: var(--sp-xl); }
  .pg-entry > * { grid-column: 2; }
  .pg-entry > .pg-entry__meta { grid-column: 1; grid-row: 1 / span 4; margin-top: 0.7em !important; }
}
@media (min-width: 1024px) {
  .pg-d .pg-notes { margin-left: calc(var(--gutter) / -2 - 20px); padding-left: calc(clamp(24px, 5cqw, 56px) + var(--gutter) / 2 + 20px); }
}
@media (max-width: 600px) {
  .pg-d .pg-notes { margin-left: -20px; margin-right: -20px; border-radius: 0; padding-left: 20px; padding-right: 20px; }
}
/* "How to read them": the same large statements as on About */
.pg-t--hub .pg-s--prose .pg-list { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: principle; }
.pg-t--hub .pg-s--prose .pg-list li {
  counter-increment: principle; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); margin: 0; padding: var(--sp-lg) 0;
  box-shadow: inset 0 1px 0 var(--rule); color: var(--df-text-muted, rgba(244, 240, 231, 0.76)); line-height: 1.6;
}
.pg-t--hub .pg-s--prose .pg-list li::before {
  content: counter(principle, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 0.5em;
  font-family: var(--df-font-mono, monospace); font-size: var(--t-label); font-weight: 600; color: var(--df-electric-orange, #FF6A1A);
}
.pg-t--hub .pg-s--prose .pg-list li strong { display: block; font-size: var(--t-large); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 6px; }
/* crumbs with three levels, and the footer label as a link to the hub */
.pg-d .pg-crumbs a + span + a { color: var(--df-text-muted, rgba(244, 240, 231, 0.76)); }
.pg-d a.pg-footer__label { text-decoration: none; }
.pg-d a.pg-footer__label:hover { color: var(--df-text-headline, #F2EEE6); }
/* four navigation entries: keep the header on one line */
@media (max-width: 1180px) and (min-width: 861px) {
  .pg-d .pg-nav a { padding: 0 8px; letter-spacing: 0.05em; }
  .pg-d .pg-header .pg-btn--small { padding: 0 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-rv~="entries"] > li { opacity: 0; transition: opacity 0.6s ease calc(var(--i) * 160ms + 0.15s); }
  [data-rv~="entries"] > li h3 { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); transition: clip-path 0.8s var(--e-out) calc(var(--i) * 160ms + 0.2s), transform 0.8s var(--e-out) calc(var(--i) * 160ms + 0.2s); }
  [data-rv~="entries"].is-in > li { opacity: 1; }
  [data-rv~="entries"].is-in > li h3 { clip-path: inset(-12% -4%); transform: none; }
}

/* ---- after the rollout review */
/* the header is a solid surface: nothing reads through it */
.pg-d .pg-header { background: #171816; }
.pg-d .pg-menu { background: #171816; }
/* small phones: the symbol alone, as the brand book allows, so the language switch has room */
@media (max-width: 380px) {
  .pg-d .pg-brand { font-size: 0; gap: 0; }
  .pg-d .lang__opt { padding: 5px 7px; }
}
/* websites: the page wireframe stays with its paragraph on narrow screens */
@container (max-width: 859px) {
  .pg-d--websites #s-02 > h2 + p::after {
    content: ""; display: block; width: 132px; height: 150px; margin: var(--sp-lg) 0 var(--sp-xs);
    border: 1px solid var(--rule-strong); border-radius: 3px; background-color: var(--df-carbon, #1C1D1B); background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--df-text-headline, #F2EEE6), var(--df-text-headline, #F2EEE6)), linear-gradient(var(--df-text-headline, #F2EEE6), var(--df-text-headline, #F2EEE6)),
      linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
      linear-gradient(var(--rule), var(--rule)),
      linear-gradient(var(--rule-strong), var(--rule-strong)),
      linear-gradient(var(--df-signal-green, #B6FF2E), var(--df-signal-green, #B6FF2E));
    background-size: 78px 4px, 54px 4px, 96px 2px, 86px 2px, 100% 1px, 96px 2px, 60px 14px;
    background-position: 16px 18px, 16px 28px, 16px 48px, 16px 58px, 0 76px, 16px 92px, 16px 116px;
  }
}
/* links on paper are Ink with the dark-orange underline, never a vivid signal */
.pg-d .pg-evidence a, .pg-d .pg-notes a, .pg-record a { color: var(--paper-ink); font-weight: 600; text-decoration-color: var(--df-signal-orange-contrast, #A43A00); text-decoration-thickness: 2px; }
.pg-d .pg-evidence a:hover { color: var(--df-signal-orange-contrast, #A43A00); }
@media (max-width: 860px) { .pg-d .lang__opt { min-height: 44px; } }