/* 01 — Page tokens and local baseline */
.pmc-page {
  --pmc-bg: #f7f7f2;
  --pmc-bg-soft: #edeee7;
  --pmc-text: #272b27;
  --pmc-muted: #62665f;
  --pmc-line: #d6d9cf;
  /* The same hairline where the ground is bg-soft rather than bg: on the
     softer field d6d9cf loses too much of its edge to read as a rule. */
  --pmc-line-strong: #c5cabb;
  /* Panel chrome — between bg and bg-soft, so a title bar reads as part of the
     panel rather than as a band laid over it. */
  --pmc-risk: #C0271A;
  /* Original hero headline emphasis. */
  --pmc-emphasis: #5f6b59;
  /* --pmc-text lifted, for the filled button's hover. */
  --pmc-button-hover: #444c41;
  /* Accent sits at ~70deg — a ripe pear, a few degrees off the olive and sage
     the diagrams are already made of, so it reads as the same family lit from
     the front rather than as a second brand colour laid on top. It is the
     page's one bright moment and it is spent on small things: an indicator, a
     marker, a ring. Four values because one hue cannot do every job:
       accent       the bright chip — a fill, a marker, a rule. Never text.
       accent-ink   the same hue carried down to 5.2:1 on paper, so it can be
                    a focus ring, an underline or a word.
       accent-soft  the palest tint, for the ground under a small badge.
       accent-dark  the value that holds up on charcoal (10.6:1). */
  --pmc-accent: #B7C84B;
  --pmc-accent-ink: #5F6C1A;
  --pmc-accent-soft: #EEF1D4;
  --pmc-accent-dark: #D2E166;
  --pmc-dark: #242824;
  --pmc-dark-muted: #b9bfb3;
  --pmc-light: #edf0e6;
  --pmc-dark-line: #4a5048;
  --pmc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pmc-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --pmc-ease: cubic-bezier(.22, 1, .36, 1);
  /* Motion: one small system, three speeds.
       ease       settle — arrivals decelerate into place, no overshoot
       ease-draw  lines — start and stop deliberately, like a pen, not a flick
       ease-ui    feedback — quick onset, soft landing
     Feedback is fast and never waits on anything; state changes are slower so
     the change can be followed; entrances are slower again and happen once.
     Parts of one diagram are spaced by a single step, so every sequence on the
     page keeps the same tempo. */
  --pmc-ease-draw: cubic-bezier(.65, 0, .35, 1);
  --pmc-ease-ui: cubic-bezier(.2, .8, .2, 1);
  --pmc-t-press: 90ms;   /* a press registering */
  --pmc-t-ui: 180ms;     /* hover, focus, colour */
  --pmc-t-soft: 320ms;   /* a surface or a line changing in answer to a hover */
  --pmc-t-link: 300ms;   /* a short connector drawing */
  --pmc-t-part: 480ms;   /* one part of a diagram arriving */
  --pmc-t-draw: 620ms;   /* a wire drawing toward what it feeds */
  --pmc-t-enter: 640ms;  /* the hero's text arriving */
  --pmc-step: 90ms;
  --pmc-rise: 12px;
  --pmc-rise-sm: 6px;
  /* Two radii, and every corner on the page is one of them. The drawn parts
     stay nearly square because they are drawings. Circles keep 50% inline:
     that is a shape, not a step on a scale. */
  --pmc-r-sm: 3px;   /* a node */
  --pmc-r: 4px;      /* a module, a card, a boundary, a button */
  /* One grid for the whole page: twelve columns, one gutter, one section
     rhythm. Every composition below places itself on these, so nothing is
     positioned with an arbitrary percentage any more. */
  --pmc-col-gap: clamp(20px, 2.2vw, 34px);
  /* Two sections meeting contribute this twice, so the number that matters is
     double what it reads as. At 150 the join was a 300px void and the page
     scanned as mostly empty; at 108 the sections still stand clearly apart. */
  --pmc-section-pad: clamp(84px, 7.5vw, 112px);
  /* One vertical scale, six steps, used for every gap on the page that is not
     a connector run. Before this the page carried twenty-one different values
     between 14 and 76px, which is why the rhythm read as accidental. On a
     phone the steps resolve to 8 / 16 / 24 / 32 / 48 / 72.
       s1 tight, inside one component
       s2 a heading and the paragraph that belongs to it
       s3 between the parts of a component
       s4 a block of text and the next thing
       s5 a head and its body; one subsection and the next
       s6 two major blocks inside one section                                */
  --pmc-s1: 8px;
  --pmc-s2: clamp(20px, 1.5vw, 22px);
  --pmc-s3: clamp(28px, 2.2vw, 32px);
  --pmc-s4: clamp(40px, 3vw, 44px);
  --pmc-s5: clamp(60px, 4.9vw, 72px);
  --pmc-s6: clamp(92px, 7.6vw, 112px);
  /* The head is two gaps, not one: the chapter marker sits further from the
     headline than the headline sits from its deck, and the head as a whole
     stands clear of the body below it. The first gap is wide on purpose — at
     close range the marker reads as a kicker attached to the title, which is
     the generic pattern. The distance is what makes it a chapter number. */
  --pmc-head-gap: clamp(48px, 5.6vw, 84px);
  --pmc-head-out: clamp(54px, 5.6vw, 86px);
  color: var(--pmc-text); background: var(--pmc-bg); font: 400 18px/1.6 var(--pmc-font);
  -webkit-font-smoothing: antialiased; isolation: isolate; text-align: left;
  /* Full-bleed surfaces are sized in vw, which counts a classic scrollbar;
     clip keeps that sliver from scrolling the page sideways. Clip, not hidden:
     it creates no scroll container, so sticky headings still stick. */
  overflow-x: clip;
}
.pmc-page *, .pmc-page *::before, .pmc-page *::after { box-sizing: border-box; }
/* Hidden must win over component display rules, including host-theme styles. */
.pmc-page [hidden] { display: none !important; }
.pmc-page h1, .pmc-page h2, .pmc-page h3, .pmc-page h4, .pmc-page p, .pmc-page ul, .pmc-page ol, .pmc-page dl, .pmc-page dd, .pmc-page figure { margin: 0; }
.pmc-page h1, .pmc-page h2, .pmc-page h3, .pmc-page h4 { color: inherit; font-family: var(--pmc-font); font-weight: 450; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.pmc-page h2 { font-size: clamp(38px, 4.6vw, 64px); }
.pmc-page h3 { font-size: 32px; }
.pmc-page p { text-wrap: pretty; }
.pmc-page a { color: inherit; text-decoration: none; }
.pmc-page button { font: inherit; color: inherit; cursor: pointer; }
.pmc-page button, .pmc-page a, .pmc-page summary { -webkit-tap-highlight-color: transparent; }
/* Keyboard focus: the ring appears a little wide and closes in on the control
   in one short beat, so it reads as the page answering, not a default box. The
   resting offset is invisible — there is no outline until focus arrives. */
.pmc-page :is(a, button, summary) { outline-offset: 9px; transition: outline-offset var(--pmc-t-ui) var(--pmc-ease-ui); }
.pmc-page :focus-visible { outline: 2px solid var(--pmc-accent-ink); outline-offset: 4px; }
.pmc-page .pmc-sovereignty :focus-visible { outline-color: var(--pmc-accent-dark); }
.pmc-page svg { display: block; width: 100%; height: auto; }
.pmc-page [id] { scroll-margin-top: 32px; }

/* 02 — Utilities, shared composition and type */
.pmc-page .pmc-wrap { width: min(100% - 112px, 1248px); margin-inline: auto; }
.pmc-page .pmc-section { padding-block: var(--pmc-section-pad); }
.pmc-page .pmc-head, .pmc-page .pmc-problem-row,
.pmc-page .pmc-people, .pmc-page .pmc-hero-grid,
.pmc-page .pmc-conversion-grid, .pmc-page .pmc-faq-grid, .pmc-page .pmc-hardware-grid,
.pmc-page .pmc-industries-rows > div {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pmc-col-gap);
}
/* One label form, declared once. Every small mono label on the page — chapter
   markers, figure captions, node names, list headings, callouts — is this, and
   the only thing a component states for itself is the line-height its own
   layout needs. 11px is a floor rather than a starting point: it is the
   smallest type on the page and the reason none of it has to be zoomed into.
   Nineteen rules used to restate this form in a `font:` shorthand, so the rule
   'one size, one case, everywhere' was enforced by hand in nineteen places.
   font-style and font-weight are spelled out because <em> and <b> carry UA
   defaults that the shorthand used to reset silently. */
.pmc-page .pmc-meta,
.pmc-page .pmc-annotation,
.pmc-page .pmc-fig-label,
.pmc-page .pmc-node,
.pmc-page .pmc-mod-sub,
.pmc-page .pmc-card-label,
.pmc-page .pmc-wait-mark,
.pmc-page .pmc-wait-span {
  font-family: var(--pmc-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .075em;
}
/* One note voice, declared once. Italic is the page's aside: a status, an
   instruction, or a remark about something rather than a claim: the hero
   status and "Next" on the phases, the interaction hints, every note beside a
   diagram and the architecture caption. Headings, body copy
   and the mono labels never take it. <em> is spelled out because a host
   theme may reset it; it marks the page's one stressed pair of words. */
.pmc-page .pmc-hero-eyebrow,
.pmc-page .pmc-hint,
.pmc-page .pmc-phase-next,
.pmc-page .pmc-external-note,
.pmc-page .pmc-appliance-note,
.pmc-page .pmc-layer-note,
.pmc-page .pmc-arch-out-note,
.pmc-page .pmc-arch-caption,
.pmc-page em {
  font-style: italic;
}
.pmc-page .pmc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The chapter marker: number, slash, name. Nothing else — a decorative rule
   above it had nothing to connect to and read as a stray mark. */
.pmc-page .pmc-annotation { color: var(--pmc-muted); margin-bottom: var(--pmc-head-gap); }
.pmc-page .pmc-annotation > span:first-child { color: var(--pmc-text); }
.pmc-page .pmc-annotation > span:first-child::after { content: " /"; color: var(--pmc-muted); }
.pmc-page .pmc-sovereignty .pmc-annotation { color: var(--pmc-dark-muted); }
.pmc-page .pmc-sovereignty .pmc-annotation > span:first-child { color: var(--pmc-light); }

/* Section head: eyebrow, then headline, then a deck that is always visibly
   secondary. Identical in every chapter, which is what makes the page scan. */
.pmc-page .pmc-head { align-items: end; margin-bottom: var(--pmc-head-out); }
.pmc-page .pmc-head > .pmc-annotation, .pmc-page .pmc-head > .pmc-development { grid-column: 1 / -1; }
.pmc-page .pmc-head > h2 { grid-column: 1 / span 6; }
.pmc-page .pmc-head-split > .pmc-deck { grid-column: 8 / -1; }
.pmc-page .pmc-deck { color: var(--pmc-muted); font-size: 17px; line-height: 1.65; max-width: 46ch; }
.pmc-page .pmc-deck .pmc-meta { display: block; margin-top: 14px; }
.pmc-page .pmc-sovereignty .pmc-deck { color: var(--pmc-dark-muted); }

.pmc-page .pmc-button, .pmc-page .pmc-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; font-size: 14px; line-height: 1.4; }
.pmc-page .pmc-button { background: var(--pmc-text); color: var(--pmc-bg); padding: 17px 22px; border: 1px solid transparent; border-radius: var(--pmc-r); transition: background var(--pmc-t-ui) var(--pmc-ease-ui), translate var(--pmc-t-press) var(--pmc-ease-ui), outline-offset var(--pmc-t-ui) var(--pmc-ease-ui); }
/* A press registers on every pointer, touch included: the button sets down by
   a pixel for as long as it is held. */
.pmc-page .pmc-button:active { translate: 0 1px; }
/* The secondary action's underline thickens from the left on hover — a second
   rule drawn along the first, zero-width until then. */
.pmc-page .pmc-text-link { border-bottom: 1px solid var(--pmc-text); background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--pmc-t-soft) var(--pmc-ease-draw), outline-offset var(--pmc-t-ui) var(--pmc-ease-ui); }
.pmc-page .pmc-button span, .pmc-page .pmc-text-link span { transition: transform var(--pmc-t-ui) var(--pmc-ease-ui), color var(--pmc-t-ui) var(--pmc-ease-ui); }
/* Hover only where there is hover. On touch a tapped element would otherwise
   keep its hover state after the finger has gone. */
@media (hover: hover) {
  .pmc-page .pmc-button:hover { background: var(--pmc-button-hover); }
  .pmc-page .pmc-text-link:hover { background-size: 100% 1px; }
  .pmc-page .pmc-button:hover span, .pmc-page .pmc-text-link:hover span { transform: translate(3px, -2px); }
  .pmc-page .pmc-button:hover span { color: var(--pmc-accent); }
}
.pmc-page .pmc-development { display: flex; align-items: center; gap: 10px; }
.pmc-page .pmc-development i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }

/* ==========================================================================
   03 — THE DIAGRAM KIT
   Every graphic on the page is assembled from the same seven parts: a node,
   the console module, a wire, a drop connector, a boundary, a result card and
   a risk marker. Learn them once in the hero and the rest of the page reads
   without a legend. Colour is doing one job only: red means a problem, a
   conflict, or a route that is closed.
   ========================================================================== */
.pmc-page {
  --pmc-dg-face: var(--pmc-bg);          /* what a node or boundary sits on */
  --pmc-dg-wire: #9ea497;               /* connectors */
  --pmc-dg-edge: #bcc2b1;               /* node and boundary outlines */
  --pmc-dg-mod: #e7e9dd;                /* the console module fill */
  --pmc-dg-ink: var(--pmc-text);
  --pmc-dg-soft: var(--pmc-muted);
  /* Connector runs. Four lengths, and every drop, stub, bus and leader on the
     page is one of them. All are roughly twice the distance a diagram strictly
     needs: the travel is what lets a flow read as a sequence rather than a
     stack, and it is where the composition gets its air. */
  --pmc-run-sm: clamp(46px, 4.6vw, 66px);
  --pmc-run: clamp(58px, 6vw, 86px);
  --pmc-run-lg: clamp(80px, 9vw, 130px);
}
.pmc-page .pmc-sovereignty {
  --pmc-dg-face: var(--pmc-dark);
  --pmc-dg-wire: #737b6d;
  --pmc-dg-edge: var(--pmc-dark-line);
  --pmc-dg-mod: #2f342e;
  --pmc-dg-ink: var(--pmc-light);
  --pmc-dg-soft: var(--pmc-dark-muted);
  /* The light-ground red drops below AA on charcoal, so the dark chapter
     carries its own. */
  --pmc-risk: #EB6D5B;
}

/* Labels. One size, one case, everywhere — 11px, never smaller, because the
   old 8px diagram type could not be read without zooming in. */
.pmc-page .pmc-fig-label { color: var(--pmc-dg-soft); }
.pmc-page .pmc-fig-label-split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.pmc-page .pmc-fig-label-split > span:first-child { color: var(--pmc-dg-ink); }

/* A node: something the organisation already has. */
.pmc-page .pmc-node { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 15px; border: 1px solid var(--pmc-dg-edge); border-radius: var(--pmc-r-sm); background: var(--pmc-dg-face); color: var(--pmc-dg-ink); line-height: 1.4; text-align: center; }
.pmc-page .pmc-node-strong { border-color: var(--pmc-dg-ink); }

/* The module. Rectangular, technical, always the same mark — the one shape
   the visitor should be able to point at and name by the end of the page. */
.pmc-page .pmc-mod { display: grid; gap: 7px; padding: 18px 20px; border: 1px solid var(--pmc-dg-ink); border-radius: var(--pmc-r-sm); background: var(--pmc-dg-mod); color: var(--pmc-dg-ink); text-align: left; }
.pmc-page .pmc-mod-mark { font-size: 19px; font-weight: 300; line-height: 1; }
.pmc-page .pmc-mod strong { font: 500 13px/1.2 var(--pmc-mono); text-transform: uppercase; letter-spacing: .1em; }
.pmc-page .pmc-mod-sub { line-height: 1.5; color: var(--pmc-dg-soft); }
.pmc-page .pmc-mod-lg { padding: clamp(20px, 2.2vw, 26px); gap: 9px; }
.pmc-page .pmc-mod-lg .pmc-mod-mark { font-size: 24px; }
.pmc-page .pmc-mod-lg strong { font-size: 15px; }
.pmc-page .pmc-mod-sm { padding: 13px 16px; gap: 4px; }
.pmc-page .pmc-mod-sm .pmc-mod-mark { font-size: 15px; }
.pmc-page .pmc-mod-sm strong { font-size: 12px; }

/* Wires. Lines only — never text — so the viewBox can stretch to whatever
   box the layout gives it while the stroke stays a true hairline. */
.pmc-page .pmc-wire { width: 100%; height: 100%; overflow: visible; }
.pmc-page .pmc-wire path { fill: none; stroke: var(--pmc-dg-wire); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Arrowheads. A square rotated 45 degrees puts its corner 0.707s from the
   centre, so an untouched box overshoots the edge it points at by 0.207s and
   its open arms cut across the target's border. Every head below is pulled
   back by exactly that, which lands the tip on the edge instead of past it. */
.pmc-page { --pmc-tip: 7px; }

/* The horizontal hand-off, with the head that marks an output. Its vertical
   twin is pmc-drop below; between them they carry every arrow on the page. */
.pmc-page .pmc-hop { position: relative; display: block; height: 1px; background: var(--pmc-dg-wire); color: var(--pmc-dg-wire); }
.pmc-page .pmc-hop::after { content: ""; position: absolute; right: 0; top: 50%; width: var(--pmc-tip); height: var(--pmc-tip); border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: translate(calc(var(--pmc-tip) * -0.2071), -50%) rotate(45deg); }

/* The vertical hand-off between two stacked parts of a flow. */
.pmc-page .pmc-drop { position: relative; display: block; width: 1px; height: var(--pmc-drop, var(--pmc-run)); justify-self: center; background: var(--pmc-dg-wire); color: var(--pmc-dg-wire); }
.pmc-page .pmc-drop::after { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--pmc-tip); height: var(--pmc-tip); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translate(-50%, calc(var(--pmc-tip) * -0.2071)) rotate(45deg); }
.pmc-page .pmc-drop-lg { --pmc-drop: var(--pmc-run-lg); }

/* A boundary: the system the customer controls. Containers are named in the
   page's sans, sentence case, so they read as scopes; the components inside
   them keep the small mono label. */
.pmc-page .pmc-bound { position: relative; border: 1px solid var(--pmc-dg-edge); border-radius: var(--pmc-r); padding: clamp(34px, 3.4vw, 44px) clamp(20px, 2.4vw, 34px) clamp(24px, 2.6vw, 32px); }
.pmc-page .pmc-bound-label, .pmc-page .pmc-appliance-label { position: absolute; top: 0; left: clamp(18px, 2.2vw, 30px); transform: translateY(-50%); padding: 0 10px; background: var(--pmc-dg-face); color: var(--pmc-dg-ink); font-size: 14px; font-weight: 500; letter-spacing: -.005em; line-height: 1; }
.pmc-page .pmc-bound-lg { padding: clamp(46px, 4.6vw, 62px) clamp(24px, 3vw, 46px) clamp(26px, 3vw, 36px); }

/* Outside a boundary: an ordinary node, drawn quieter — transparent, a soft
   edge, muted text — and joined to nothing. The missing connector is the
   statement, so there is no cross, no red and no "never": red stays reserved
   for real project risk. A short note in plain type says what it is. */
.pmc-page .pmc-external { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pmc-page .pmc-node-external { min-width: 160px; background: transparent; border-color: var(--pmc-dg-edge); color: var(--pmc-dg-soft); }
.pmc-page .pmc-external-note { max-width: 22ch; font-size: 13px; line-height: 1.45; color: var(--pmc-dg-soft); }
/* Plain-type labels: a group heading in a figure, and the instruction over
   an interactive figure. */
.pmc-page .pmc-group-label { font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: var(--pmc-dg-ink); }
.pmc-page .pmc-hint { font-size: 14px; color: var(--pmc-muted); }

/* The result card: what the visitor is buying. Never a dashboard. */
.pmc-page .pmc-card { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--pmc-dg-ink); border-radius: var(--pmc-r); background: var(--pmc-dg-face); padding: clamp(24px, 2.6vw, 36px); }
.pmc-page .pmc-card-label { color: var(--pmc-dg-soft); }
.pmc-page .pmc-card-title { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.08; letter-spacing: -.038em; margin-top: var(--pmc-s2); }
.pmc-page .pmc-card-facts { list-style: none; padding: 0; margin-top: var(--pmc-s2); }
.pmc-page .pmc-card-facts li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; font-size: 16px; color: var(--pmc-dg-soft); }
.pmc-page .pmc-card-facts b { min-width: 26px; font: 500 18px/1 var(--pmc-mono); font-variant-numeric: tabular-nums; color: var(--pmc-dg-ink); }
.pmc-page .pmc-card-facts li.is-risk, .pmc-page .pmc-card-facts li.is-risk b { color: var(--pmc-risk); }
.pmc-page .pmc-card-action { margin-top: var(--pmc-s2); padding-top: var(--pmc-s2); border-top: 1px solid var(--pmc-dg-edge); }
.pmc-page .pmc-card-do { margin-top: 8px; font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -.025em; }

/* 04 — Hero: the typography column, answered by the convergence diagram */
/* The hero closes the opening statement, so its join to chapter 01 is wider
   than an ordinary section boundary — but not by the full third gap it used to
   carry on top of the grid's own padding and 01's section pad. */
.pmc-page .pmc-hero { padding-bottom: clamp(24px, 2.8vw, 42px); }
/* The status, set as a plain editorial line above the headline: visible
   without scrolling on every screen (brief R-4, A-3), but clearly the
   headline's quieter companion — body type, muted, no dot or badge. */
.pmc-page .pmc-hero-eyebrow { margin-bottom: var(--pmc-s3); font-size: 17px; line-height: 1.5; color: var(--pmc-muted); }
/* The row gap is the only thing between the claim and the drawing that answers
   it, so it carries the beat between the two. The phone overrides it below. */
.pmc-page .pmc-hero-grid { align-items: end; row-gap: clamp(48px, 7.2vw, 108px); padding-block: clamp(40px, 4.4vw, 68px) clamp(52px, 5.5vw, 78px); }
.pmc-page .pmc-hero-copy { grid-column: 1 / span 7; }
.pmc-page .pmc-hero-aside { grid-column: 9 / -1; }
.pmc-page .pmc-hero-figure { grid-column: 1 / -1; }
/* The figure's two captions head their columns, so they are set as headings
   — the page's sans, sentence case — while the inputs under them keep the
   small mono label form, a step quieter. */
.pmc-page .pmc-hero-figure > .pmc-fig-label-split { font-family: var(--pmc-font); font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-transform: none; line-height: 1.4; color: var(--pmc-muted); }
.pmc-page .pmc-hero-figure > .pmc-fig-label-split > span:first-child { color: var(--pmc-text); }
.pmc-page h1 { font-size: clamp(38px, 5.4vw, 78px); line-height: 1.03; }
/* A lighter premise leads into the stronger, green sector line. */
.pmc-page .pmc-hero h1 { font-weight: 400; }
.pmc-page .pmc-lead { max-width: 46ch; font-size: 18px; line-height: 1.7; color: var(--pmc-muted); }
.pmc-page .pmc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pmc-s2) var(--pmc-s3); margin-top: var(--pmc-s4); }
/* What the primary action gets you, said once, just above it. */
.pmc-page .pmc-cta-label { margin-top: var(--pmc-s4); font-size: 14px; font-style: italic; font-weight: 500; line-height: 1.4; color: var(--pmc-text); }
.pmc-page .pmc-cta-label + .pmc-actions { margin-top: 8px; }

/* The invisible words reserve the tallest line, avoiding shifts while typing. */
.pmc-page .pmc-typewriter { display: grid; color: var(--pmc-emphasis); font-weight: 700; }
.pmc-page .pmc-typewriter-size, .pmc-page .pmc-typewriter-line { grid-area: 1 / 1; min-width: 0; padding-bottom: .1em; }
.pmc-page .pmc-typewriter-size { visibility: hidden; padding-right: .25em; pointer-events: none; }
.pmc-page .pmc-typewriter-line { text-wrap: initial; }
.pmc-page [data-pmc-typed] { text-decoration: none; }
.pmc-page .pmc-typewriter-cursor { display: inline-block; height: .8em; width: 2px; margin-left: .055em; vertical-align: -.015em; background: currentColor; }
.pmc-page .pmc-typewriter[data-running="true"] .pmc-typewriter-cursor { animation: pmc-caret 1s steps(1) infinite; }
/* Third item in the action row, so it costs no row of its own: it is a
   control the accessibility spec requires, not a step in the argument. */
.pmc-page .pmc-motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--pmc-muted); transition: color var(--pmc-t-ui) var(--pmc-ease-ui), outline-offset var(--pmc-t-ui) var(--pmc-ease-ui); }
.pmc-page .pmc-motion-toggle { font-size: 13px; line-height: 1.5; }
@media (hover: hover) { .pmc-page .pmc-motion-toggle:hover { color: var(--pmc-text); } }
@keyframes pmc-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }



@media (prefers-reduced-motion: reduce) {
  .pmc-page .pmc-typewriter-cursor { display: none; animation: none; }
}

/* The decision lens. One horizontal system: five streams enter distributed on
   the left, bend together at the module, and leave as a single line into the
   result. Every part sits in one grid row, so there is no upper or lower zone
   for the eye to jump between — and the card, stretched to the row and given
   the most width, is the heaviest thing in the frame. */
.pmc-page .pmc-lens {
  display: grid;
  /* The fan and the card both flex, so the rays keep a readable angle at
     1024 instead of collapsing to near-vertical while the card takes 500px. */
  grid-template-columns: auto minmax(130px, 1fr) minmax(150px, 190px) var(--pmc-run) minmax(280px, 1.5fr);
  align-items: center; margin-top: var(--pmc-s3);
}
.pmc-page .pmc-lens-streams { grid-column: 1; align-self: stretch; display: grid; grid-template-rows: repeat(5, minmax(38px, 1fr)); list-style: none; padding: 0; }
.pmc-page .pmc-lens-streams li { display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font: 12px/1.3 var(--pmc-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--pmc-muted); }
.pmc-page .pmc-lens-rays { grid-column: 2; align-self: stretch; }
/* Given real height so it reads as the plane the streams are bent through,
   not a label they happen to pass. */
.pmc-page .pmc-lens-core { grid-column: 3; min-height: clamp(150px, 15vw, 210px); align-content: center; }
.pmc-page .pmc-lens-out { grid-column: 4; }
.pmc-page .pmc-lens-result { grid-column: 5; align-self: stretch; }

/* 05 — 01 / Problem: editorial rows, each answered by one diagram */
.pmc-page .pmc-problem-row { position: relative; align-items: center; padding-block: clamp(44px, 4.8vw, 64px); border-top: 1px solid var(--pmc-line); }
.pmc-page .pmc-problem-row:last-of-type { border-bottom: 1px solid var(--pmc-line); }
/* The hover surface runs the full width of the viewport without moving the
   grid columns: the row stays in the wrap, only its band leaves it. */
.pmc-page .pmc-problem-row::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: transparent; transition: background var(--pmc-t-soft) var(--pmc-ease); }
@media (hover: hover) { .pmc-page .pmc-problem-row:hover::before { background: var(--pmc-bg-soft); } }
.pmc-page .pmc-problem-body { grid-column: 1 / span 5; align-self: start; }
.pmc-page .pmc-problem-figure { grid-column: 7 / -1; }
/* Each figure gets the measure its shape actually wants: the timeline needs
   length, the convergence is tall and narrow, the boundary sits between them.
   That, and not an alternating layout, is what keeps the three rows from
   reading as one template run three times. Only while the row is a row —
   below 980px every figure takes the full column. */
@media (min-width: 981px) {
  .pmc-page .pmc-problem-row:nth-of-type(1) .pmc-problem-body { grid-column: 1 / span 4; }
  .pmc-page .pmc-problem-row:nth-of-type(1) .pmc-problem-figure { grid-column: 6 / -1; }
  .pmc-page .pmc-problem-row:nth-of-type(2) .pmc-problem-figure { grid-column: 8 / -1; }
}
.pmc-page .pmc-problem-body h3 { font-size: clamp(30px, 3.1vw, 44px); }
.pmc-page .pmc-problem-body p { max-width: 44ch; margin-top: var(--pmc-s2); color: var(--pmc-muted); font-size: 17px; }

/* 01 — One timeline, marked off in days. The earlier figure drew reality and
   the record as two parallel rules and measured the distance between them,
   which asked the reader to decode two abstract tracks before the measurement
   meant anything, and spent most of its width on rule with nothing on it.
   There is one axis here. The change lands on it, the record lands on it much
   later, and the stretch between is named for what it is rather than called
   "the gap". The ticks do the real work: they turn that stretch from an empty
   length of line into a wait you can count. */
.pmc-page .pmc-wait { --a: 11.111%; --b: 77.778%; position: relative; padding-block: 58px 58px; }
/* The axis and its day marks are one painted box: a hairline down the middle,
   and a tick every ninth of the width standing across it. */
.pmc-page .pmc-wait-axis {
  position: relative; height: 21px;
  background:
    linear-gradient(var(--pmc-dg-edge), var(--pmc-dg-edge)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--pmc-dg-edge) 0 1px, transparent 1px calc(100% / 9));
}
/* The wait is the timeline, not a bracket drawn under it. The same two
   gradients are repainted in red over the whole width and then clipped to the
   interval, so the red days line up exactly with the grey ones on either side
   and the line itself changes colour for as long as nobody knows. */
.pmc-page .pmc-wait-axis::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--pmc-risk), var(--pmc-risk)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--pmc-risk) 0 1px, transparent 1px calc(100% / 9));
  clip-path: inset(0 calc(100% - var(--b)) 0 var(--a));
}
.pmc-page .pmc-wait-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--pmc-text); }
.pmc-page .pmc-wait-dot-a { left: var(--a); }
.pmc-page .pmc-wait-dot-b { left: var(--b); }
/* Each label runs away from its own dot — the first rightward, the second
   leftward — so neither can ever overflow the column it sits in. */
.pmc-page .pmc-wait-mark { position: absolute; bottom: 100%; margin-bottom: 19px; white-space: nowrap; color: var(--pmc-text); }
.pmc-page .pmc-wait-a { left: var(--a); }
.pmc-page .pmc-wait-b { right: calc(100% - var(--b)); }
/* Named under the stretch it belongs to. The red run above is already the
   statement, so this is a caption on it rather than a second bracket. */
.pmc-page .pmc-wait-span { position: absolute; top: 100%; margin-top: 17px; left: var(--a); right: calc(100% - var(--b)); text-align: center; letter-spacing: .16em; color: var(--pmc-risk); }

/* 02 — Three sources, one module, one answer. */
.pmc-page .pmc-join { display: grid; justify-items: center; }
/* Zero gap keeps each node centred on its share of the width, which is what
   the wire above aims at; the spacing lives on the nodes instead. */
.pmc-page .pmc-join-sources { width: 100%; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pmc-page .pmc-join-sources li { margin-inline: clamp(6px, 1.2vw, 11px); }
.pmc-page .pmc-join-wire { height: var(--pmc-run-lg); }
.pmc-page .pmc-join > .pmc-node-strong { min-width: min(100%, 168px); }

/* 03 — The constraint: project data inside the perimeter, the assistants
   outside it, and a clear run of empty ground between, where a connection
   would have to be. */
/* The outside node is level with the nodes inside the perimeter, not with the
   box as a whole: both sit one boundary-padding below the top of their
   column, so the two rows of nodes read on one line. */
.pmc-page .pmc-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--pmc-run-lg); align-items: start; }
.pmc-page .pmc-split .pmc-external { margin-top: clamp(34px, 3.4vw, 44px); }
.pmc-page .pmc-split-nodes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* 06 — 02 / Function: the perimeter graphic, then the four pillars */
.pmc-page .pmc-pillars-section { background: var(--pmc-bg-soft); }
/* The abstract graphic (brief G-1 to G-6). No text inside, so one drawing
   serves both languages; every colour is a diagram token, so it follows the
   ground it sits on. The standalone copy in graphics/ carries its own light
   and dark palette. Strokes stay hairlines at any width. */
.pmc-page .pmc-explore-hint { max-width: 1040px; margin: 0 auto var(--pmc-s3); text-align: right; }
/* The drawing and its four pillars. Without the script this is the drawing
   with the pillars as a row of four under it; the script adds .is-live,
   shows the numbered points and turns each pillar into a box beside its
   point, one open at a time. */
.pmc-page .pmc-explore { position: relative; max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--pmc-col-gap); row-gap: var(--pmc-s5); }
.pmc-page .pmc-explore > svg { grid-column: 1 / -1; overflow: visible; }
.pmc-page .pmc-explore svg :is(rect, path, circle) { vector-effect: non-scaling-stroke; }
.pmc-page .pmc-emblem-bound { fill: none; stroke: var(--pmc-dg-ink); stroke-width: 1.5; }
.pmc-page .pmc-emblem-node rect, .pmc-page .pmc-emblem-out { fill: var(--pmc-bg); stroke: var(--pmc-dg-edge); stroke-width: 1; }
.pmc-page .pmc-emblem-out { stroke: var(--pmc-dg-ink); }
.pmc-page .pmc-emblem-bar path { fill: none; stroke: var(--pmc-dg-edge); stroke-width: 3; stroke-linecap: round; }
.pmc-page .pmc-emblem-bar-strong path { stroke: var(--pmc-dg-soft); }
.pmc-page .pmc-emblem-wire path { fill: none; stroke: var(--pmc-dg-wire); stroke-width: 1; }
.pmc-page .pmc-emblem-mod { fill: var(--pmc-dg-mod); stroke: var(--pmc-dg-ink); stroke-width: 1; }
.pmc-page .pmc-emblem-vent path { stroke: var(--pmc-dg-soft); stroke-width: 1.5; }
.pmc-page .pmc-emblem-mark { fill: none; stroke: var(--pmc-dg-ink); stroke-width: 1.5; }
.pmc-page .pmc-emblem-led { fill: var(--pmc-accent); stroke: var(--pmc-accent-ink); stroke-width: 1; }
/* Four pillars, three phases: the same short card — a rule, a heading, a
   sentence or two. */
.pmc-page .pmc-phases { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pmc-col-gap); row-gap: var(--pmc-s4); }
.pmc-page .pmc-pillar { border-top: 1px solid var(--pmc-text); padding-top: 22px; }
/* The phases as numbered steps on one line, the first marked as next: the
   page says where the work goes from here without claiming a phase is done.
   The line runs from the first step's centre to the last's. */
.pmc-page .pmc-phases { position: relative; }
.pmc-page .pmc-phases::before { content: ""; position: absolute; top: 14px; left: 14px; right: calc((100% - 2 * var(--pmc-col-gap)) / 3 - 14px); height: 1px; background: var(--pmc-line-strong); }
.pmc-page .pmc-phases > li { position: relative; padding-top: 48px; }
.pmc-page .pmc-phase-num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--pmc-muted); border-radius: 50%; background: var(--pmc-bg-soft); font: 500 13px/1 var(--pmc-mono); color: var(--pmc-muted); }
.pmc-page .pmc-phases > li:first-child .pmc-phase-num { border-color: var(--pmc-text); background: var(--pmc-text); color: var(--pmc-bg); }
.pmc-page .pmc-phase-next { position: absolute; top: 3px; left: 34px; padding: 3px 8px; border-radius: var(--pmc-r-sm); background: var(--pmc-accent-soft); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--pmc-accent-ink); }
.pmc-page .pmc-phases > li:not(:first-child) h3 { color: var(--pmc-muted); }
.pmc-page .pmc-pillar h3, .pmc-page .pmc-phases h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -.03em; }
.pmc-page .pmc-pillar p, .pmc-page .pmc-phases h3 + p { margin-top: var(--pmc-s2); max-width: 38ch; font-size: 16px; color: var(--pmc-muted); }
/* A numbered point on the drawing. 30px, with an invisible 46px hit area;
   the halo keeps it legible over the lines it sits on. Filled while its box
   is open. */
.pmc-page .pmc-spot { --pmc-px: calc(var(--vx) / 808 * 100%); --pmc-py: calc(var(--vy) / 808 * 100%); }
.pmc-page .pmc-hotspot { position: absolute; left: var(--pmc-px); top: 0; margin-top: var(--pmc-py); z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; translate: -50% -50%; border: 1px solid var(--pmc-text); border-radius: 50%; background: var(--pmc-bg); color: var(--pmc-text); font: 500 12px/1 var(--pmc-mono); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pmc-bg-soft) 75%, transparent); transition: background var(--pmc-t-ui) var(--pmc-ease-ui), color var(--pmc-t-ui) var(--pmc-ease-ui), box-shadow var(--pmc-t-ui) var(--pmc-ease-ui), outline-offset var(--pmc-t-ui) var(--pmc-ease-ui); }
.pmc-page .pmc-hotspot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.pmc-page .pmc-hotspot[aria-expanded="true"] { background: var(--pmc-text); color: var(--pmc-bg); }
@media (hover: hover) { .pmc-page .pmc-hotspot:hover { box-shadow: 0 0 0 6px var(--pmc-line-strong); } }
.pmc-page .pmc-explore.is-live { row-gap: 0; }
/* The box sits beside its point, on the side with room: the two left points
   open to the right (the lower one upward, so it stays inside the drawing),
   the appliance below, the answer below and leftward. */
@media (min-width: 761px) {
  .pmc-page .pmc-explore.is-live .pmc-pillar { position: absolute; z-index: 3; width: min(320px, 44%); padding: 20px 22px 22px; border: 1px solid var(--pmc-text); border-radius: var(--pmc-r); background: var(--pmc-bg); box-shadow: 0 10px 30px rgba(36, 40, 36, .12); }
  .pmc-page .pmc-explore.is-live .pmc-pillar { top: 0; }
  .pmc-page .pmc-explore.is-live [data-place="right"] .pmc-pillar { left: calc(var(--pmc-px) + 30px); margin-top: calc(var(--pmc-py) - 24px); }
  .pmc-page .pmc-explore.is-live [data-place="right-up"] .pmc-pillar { left: calc(var(--pmc-px) + 30px); margin-top: calc(var(--pmc-py) + 24px); translate: 0 -100%; }
  .pmc-page .pmc-explore.is-live [data-place="below"] .pmc-pillar { left: var(--pmc-px); margin-top: calc(var(--pmc-py) + 32px); translate: -50% 0; }
  .pmc-page .pmc-explore.is-live [data-place="below-end"] .pmc-pillar { right: calc(100% - var(--pmc-px) - 24px); margin-top: calc(var(--pmc-py) + 32px); }
  .pmc-page .pmc-explore.is-live .pmc-pillar p { font-size: 15px; }
}

/* 07 — 04 / Control: three levels on one rule. Without the script the dot
   says how much the agent does alone: filled, half, empty. With it, the dots
   follow the slider (below). */
.pmc-page .pmc-levels { position: relative; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pmc-col-gap); row-gap: var(--pmc-s4); }
.pmc-page .pmc-levels::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--pmc-dg-edge); }
.pmc-page .pmc-level { position: relative; }
.pmc-page .pmc-level-dot { --pmc-fill: 0%; position: relative; display: block; width: 11px; height: 11px; border: 1px solid var(--pmc-text); border-radius: 50%; background: var(--pmc-bg); overflow: hidden; }
.pmc-page .pmc-level-dot::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--pmc-fill); background: var(--pmc-text); transition: width var(--pmc-t-soft) var(--pmc-ease); }
.pmc-page .pmc-level-1 .pmc-level-dot { --pmc-fill: 100%; }
.pmc-page .pmc-level-2 .pmc-level-dot { --pmc-fill: 50%; }
.pmc-page .pmc-level > .pmc-meta { margin-top: var(--pmc-s3); color: var(--pmc-muted); }
.pmc-page .pmc-level h3 { margin-top: var(--pmc-s1); font-size: clamp(26px, 2.6vw, 34px); }
.pmc-page .pmc-level h3 + p { margin-top: var(--pmc-s2); max-width: 36ch; font-size: 16px; color: var(--pmc-muted); }
/* The slider. Stops sit on the dots, which start each column, so the stops
   are one column-plus-gap apart and the input runs from the first dot to the
   last: the full width less one column, plus a thumb's width so the thumb's
   centre lands exactly on each dot. The thumb is a ring around the dot. */
.pmc-page .pmc-levels-hint { margin-bottom: var(--pmc-s3); }
.pmc-page .pmc-levels-wrap { --pmc-thumb: 28px; --level: 1; position: relative; }
.pmc-page .pmc-levels-slider { position: absolute; top: calc(5.5px - var(--pmc-thumb) / 2); left: calc(5.5px - var(--pmc-thumb) / 2); z-index: 2; width: calc(100% - (100% - 2 * var(--pmc-col-gap)) / 3 + var(--pmc-thumb)); height: var(--pmc-thumb); }
.pmc-page .pmc-levels-range { display: block; width: 100%; height: var(--pmc-thumb); margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pmc-page .pmc-levels-range:focus-visible { outline: none; }
.pmc-page .pmc-levels-range::-webkit-slider-runnable-track { height: var(--pmc-thumb); background: transparent; }
.pmc-page .pmc-levels-range::-moz-range-track { height: var(--pmc-thumb); background: transparent; }
.pmc-page .pmc-levels-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--pmc-thumb); height: var(--pmc-thumb); border: 2px solid var(--pmc-text); border-radius: 50%; background: transparent; cursor: grab; transition: box-shadow var(--pmc-t-ui) var(--pmc-ease-ui); }
.pmc-page .pmc-levels-range::-moz-range-thumb { box-sizing: border-box; width: var(--pmc-thumb); height: var(--pmc-thumb); border: 2px solid var(--pmc-text); border-radius: 50%; background: transparent; cursor: grab; }
.pmc-page .pmc-levels-range:active::-webkit-slider-thumb { cursor: grabbing; }
.pmc-page .pmc-levels-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pmc-bg), 0 0 0 5px var(--pmc-accent-ink); }
.pmc-page .pmc-levels-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pmc-bg), 0 0 0 5px var(--pmc-accent-ink); }
@media (hover: hover) { .pmc-page .pmc-levels-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--pmc-line); } }
/* The rule fills from the first dot to the chosen one. */
.pmc-page .pmc-levels-wrap.is-live .pmc-levels::after { content: ""; position: absolute; top: 5px; left: 5.5px; height: 1px; width: calc((var(--level) - 1) * (100% + var(--pmc-col-gap)) / 3); background: var(--pmc-text); transition: width var(--pmc-t-soft) var(--pmc-ease); }
/* The dots follow the boundary: the levels the rule has already passed are
   filled, the chosen one — where the boundary sits — is half, and the levels
   beyond it are empty. */
.pmc-page .pmc-levels-wrap.is-live .pmc-level .pmc-level-dot { --pmc-fill: 0%; }
.pmc-page .pmc-levels-wrap.is-live .pmc-level.is-current .pmc-level-dot { --pmc-fill: 50%; }
.pmc-page .pmc-levels-wrap.is-live .pmc-level.is-passed .pmc-level-dot { --pmc-fill: 100%; }
/* The chosen level in full contrast; the other two step back but stay
   readable (muted is 5.6:1 on this ground). */
.pmc-page .pmc-levels-wrap.is-live .pmc-level { cursor: pointer; }
.pmc-page .pmc-levels-wrap.is-live .pmc-level h3 { color: var(--pmc-muted); transition: color var(--pmc-t-soft) var(--pmc-ease-ui); }
.pmc-page .pmc-levels-wrap.is-live .pmc-level.is-current h3,
.pmc-page .pmc-levels-wrap.is-live .pmc-level.is-current > .pmc-meta { color: var(--pmc-text); }
.pmc-page .pmc-levels-wrap.is-live .pmc-level.is-current h3 + p { color: var(--pmc-text); }

/* The highlighted block: the line that never moves. */
/* The figure beside the copy spans rows 2 and 3, and two auto rows split its
   surplus height between them — which opened a 110px hole between the headline
   and the paragraph that belongs to it. A flexible last row takes the whole
   surplus instead: an item spanning an fr track stops contributing to the
   intrinsic rows above it, so row 2 settles on the headline and the leftover
   lands below the paragraph, which is where the argument wants it anyway. */
.pmc-page .pmc-people { margin-top: var(--pmc-s6); padding-top: var(--pmc-s5); border-top: 1px solid var(--pmc-text); align-items: start; row-gap: var(--pmc-s3); grid-template-rows: auto auto 1fr; }
.pmc-page .pmc-people h2 { grid-column: 1 / span 4; font-size: clamp(44px, 4.6vw, 66px); }
.pmc-page .pmc-people-side { grid-column: 1 / span 4; }
.pmc-page .pmc-people-side > p { color: var(--pmc-muted); max-width: 42ch; }
/* What the console evaluates, drawn as a scope: the project-level signals
   inside a boundary, feeding the console; individual performance outside it,
   unconnected. The empty ground between the two carries the argument. */
/* The figure runs beside the whole text column, from the headline's first
   line down: started on the second row it sat a headline lower than the
   text and the block read as a diagonal. */
.pmc-page .pmc-graphfig { grid-column: 6 / -1; grid-row: 1 / -1; align-self: start; }
.pmc-page .pmc-scope { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(30px, 5vw, 84px); align-items: center; }
.pmc-page .pmc-graph { --pmc-graph-gap: clamp(20px, 3.6vw, 38px); position: relative; display: grid; justify-items: center; padding: 30px 22px 22px; border: 1px solid var(--pmc-dg-edge); border-radius: var(--pmc-r); }
.pmc-page .pmc-graph-grid { position: relative; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pmc-page .pmc-graph-grid > .pmc-node { margin: var(--pmc-graph-gap) clamp(14px, 3vw, 34px); }
.pmc-page .pmc-graph-grid > .pmc-wire { position: absolute; inset: 0; z-index: 0; }
.pmc-page .pmc-graph-grid > .pmc-node { position: relative; z-index: 1; }
/* The grid's own edge sits one node margin below the bottom row, so the wire
   is pulled back up to start where the nodes actually end. */
.pmc-page .pmc-graph-wire { height: var(--pmc-run); margin-top: calc(-1 * var(--pmc-graph-gap)); }

/* 08 — 03 / Sovereignty: one architecture, at full width */
.pmc-page .pmc-sovereignty { background: var(--pmc-dark); color: var(--pmc-light); }
.pmc-page .pmc-arch { margin-top: var(--pmc-s5); }
.pmc-page .pmc-arch-flow { display: grid; justify-items: center; }
.pmc-page .pmc-arch-systems { width: 100%; }
.pmc-page .pmc-arch-systems > .pmc-group-label { text-align: center; margin-bottom: var(--pmc-s2); }
.pmc-page .pmc-arch-systems ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pmc-page .pmc-arch-systems li { margin-inline: clamp(7px, 1.1vw, 15px); }
.pmc-page .pmc-arch-wire { height: var(--pmc-run-lg); }
.pmc-page .pmc-arch-wire-stack { display: none; }
/* The appliance is the container, not a separate picture: the module and the
   model are drawn inside the box they run on. */
.pmc-page .pmc-appliance { position: relative; width: min(100%, 1050px); border: 1px solid var(--pmc-dg-edge); border-radius: var(--pmc-r); padding: clamp(30px, 3vw, 42px) clamp(22px, 2.6vw, 38px) clamp(24px, 2.6vw, 34px); }
.pmc-page .pmc-appliance-label { left: clamp(20px, 2.4vw, 32px); background: var(--pmc-dark); color: var(--pmc-light); }
/* One row: hardware, module and model share a single centre line, so both
   connectors are straight horizontals that meet every box on its own edge.
   The render's viewBox is cropped to the object's right corner, so the first
   line starts on the metal rather than in the artwork's empty margin. */
.pmc-page .pmc-appliance-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) var(--pmc-run-lg) minmax(190px, 250px) var(--pmc-run) minmax(120px, 176px); align-items: center; }
.pmc-page .pmc-appliance-art { grid-area: 1 / 1; }
.pmc-page .pmc-appliance-join { height: 1px; background: var(--pmc-dg-wire); }
.pmc-page .pmc-appliance-join-1 { grid-area: 1 / 2; }
.pmc-page .pmc-appliance-join-2 { grid-area: 1 / 4; }
.pmc-page .pmc-appliance-grid > .pmc-mod { grid-area: 1 / 3; }
/* The caption hangs out of flow, so the cell's height stays the node's
   height and the incoming connector still meets it on the centre line. */
.pmc-page .pmc-appliance-model { grid-area: 1 / 5; position: relative; }
.pmc-page .pmc-appliance-note { position: absolute; top: 100%; left: -24px; right: -24px; margin-top: 12px; text-align: center; font-size: 13px; color: var(--pmc-dg-soft); }
.pmc-page .pmc-arch-out { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pmc-page .pmc-arch-out .pmc-node { min-width: min(100%, 230px); }
.pmc-page .pmc-arch-out-note { font-size: 14px; color: var(--pmc-dg-soft); }
/* The external services stand outside the infrastructure boundary, level
   with its output edge, joined to nothing. Under the figure one sentence
   says the same thing in words. */
.pmc-page .pmc-arch-layout { display: grid; }
.pmc-page .pmc-external-arch { justify-self: center; margin-top: var(--pmc-s4); }
.pmc-page .pmc-arch-caption { margin-top: var(--pmc-s4); max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--pmc-dark-muted); }
.pmc-page .pmc-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--pmc-col-gap); row-gap: var(--pmc-s4); margin-top: var(--pmc-s6); }
.pmc-page .pmc-principles > div { border-top: 1px solid var(--pmc-dark-line); padding-top: 22px; }
.pmc-page .pmc-principles dt { margin-bottom: 8px; font-size: 18px; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; color: var(--pmc-light); }
.pmc-page .pmc-principles dd { font-size: 15px; color: var(--pmc-dark-muted); }

/* 09 — 05 / Hardware: the appliance, taken apart and read bottom to top, and
   the Inception membership set as plain text in the same style as the text
   around it (brief R-16 to R-18). */
/* Top-aligned so the chapter marker leads the column instead of starting
   level with the middle of the stack beside it. */
.pmc-page .pmc-hardware-grid { align-items: start; row-gap: 48px; }
.pmc-page .pmc-layers { grid-column: 1 / span 6; }
.pmc-page .pmc-hardware-copy { grid-column: 8 / -1; }
.pmc-page .pmc-hardware-copy h2 { font-size: clamp(34px, 3.2vw, 46px); }
/* :not() matters — the chapter marker is a <p> too, and without it this rule
   reached the marker and reset it to 16px muted with a 32px top margin, which
   is why 05 was the one chapter marker on the page set differently from the
   other five and sitting a line and a half below its own figure caption. */
.pmc-page .pmc-hardware-copy > p:not(.pmc-annotation) { margin-top: var(--pmc-s3); font-size: 16px; color: var(--pmc-muted); max-width: 44ch; }
.pmc-page .pmc-hardware-copy > h3 { margin-top: var(--pmc-s4); font-size: clamp(22px, 2vw, 26px); letter-spacing: -.03em; }
.pmc-page .pmc-hardware-copy > h3 + p:not(.pmc-annotation) { margin-top: var(--pmc-s2); }
/* The registered marks on the appliance's first mention (brief N-4). */
.pmc-page sup { font-size: .36em; line-height: 0; vertical-align: 1.35em; margin-left: .04em; letter-spacing: 0; font-weight: 400; }
/* The appliance is the boundary, and the two layers run inside it: the
   language model, embeddings and index at the bottom, the console on top,
   joined by a connector that points up because the lower layer carries. */
.pmc-page .pmc-layer-bound { margin-top: 14px; padding: clamp(34px, 3.4vw, 42px) clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 28px); }
.pmc-page .pmc-layer-stack { list-style: none; padding: 0; display: grid; row-gap: var(--pmc-run-sm); }
.pmc-page .pmc-layer { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding: 20px 24px; border: 1px solid var(--pmc-dg-edge); border-radius: var(--pmc-r); background: var(--pmc-dg-face); }
/* The console layer is set apart by its fill and mark alone. An ink outline
   here was the only bright edge in the stack and read as a selection. */
.pmc-page .pmc-layer.is-mod { background: var(--pmc-dg-mod); }
.pmc-page .pmc-layer-name { font-size: 19px; letter-spacing: -.025em; }
.pmc-page .pmc-layer-note { margin-left: auto; font-size: 14px; color: var(--pmc-dg-soft); }
/* The connector points up, because the layer below is the one that carries. */
.pmc-page .pmc-layer:not(:last-child)::before, .pmc-page .pmc-layer:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; }
.pmc-page .pmc-layer:not(:last-child)::before { width: 1px; height: var(--pmc-run-sm); background: var(--pmc-dg-wire); transform: translateX(-50%); }
.pmc-page .pmc-layer:not(:last-child)::after { width: 5px; height: 5px; border-left: 1px solid var(--pmc-dg-wire); border-top: 1px solid var(--pmc-dg-wire); transform: translate(-50%, 1px) rotate(45deg); }

/* 10 — 06 / Status: the phases ahead, on the page's soft ground */
.pmc-page .pmc-status { background: var(--pmc-bg-soft); }

/* 11 — 07 / Fit: the three sectors, stated as rows. The rows carry 30px
   headings, so they need real padding to read as a quiet, roomy beat. */
.pmc-page .pmc-industries-rows > div { align-items: baseline; padding-block: clamp(30px, 3.8vw, 54px); border-top: 1px solid var(--pmc-line); }
.pmc-page .pmc-industries-rows > div:last-child { border-bottom: 1px solid var(--pmc-line); }
/* A sector and its constraint are a pair, and they have to sit close enough to
   be read as one. On the chapter-01 split — term on six columns, detail out at
   column eight — a two-word name left 600px of empty field between itself and
   the sentence that defines it, three rows running. That split works in 01
   because a diagram fills the right column; here the right column holds one
   quiet line, so the row read as two stranded fragments. */
.pmc-page .pmc-industries dt { grid-column: 1 / span 4; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; }
.pmc-page .pmc-industries dd { grid-column: 6 / -1; font-size: 17px; color: var(--pmc-muted); max-width: 48ch; }
/* The industries list already closes on a rule, so a second one here read as a
   rendering fault. The qualification hangs off the list's own bottom edge.
   It is the page's one stated limit of the product, so it is set as a claim
   in full ink, not as small print: a limit said plainly earns more trust
   than a caveat tucked under the list. */
.pmc-page .pmc-qualification { margin-top: var(--pmc-s5); max-width: 40ch; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.45; letter-spacing: -.02em; color: var(--pmc-text); text-wrap: pretty; }

/* 12 — Conversion: two separate blocks side by side, deliberately unequal */
.pmc-page .pmc-conversion { background: var(--pmc-bg-soft); }
.pmc-page .pmc-conversion-grid { row-gap: var(--pmc-s5); }
.pmc-page .pmc-conversion-grid > div { display: flex; flex-direction: column; border-top: 1px solid var(--pmc-line-strong); padding-top: var(--pmc-s3); }
.pmc-page .pmc-conversion-primary { grid-column: 1 / span 7; }
.pmc-page .pmc-conversion-secondary { grid-column: 9 / -1; }
.pmc-page .pmc-conversion-primary { border-top-color: var(--pmc-text); }
.pmc-page .pmc-conversion-primary h2 { font-size: clamp(34px, 3.9vw, 52px); }
.pmc-page .pmc-conversion-secondary h2 { font-size: clamp(26px, 2.4vw, 32px); }
.pmc-page .pmc-conversion-grid h2 { margin-bottom: var(--pmc-s3); }
/* The gap belongs above the control, not inside it: padding-top on a filled
   button is painted, so it grew the button instead of spacing it. */
.pmc-page .pmc-conversion-grid p { max-width: 44ch; color: var(--pmc-muted); margin-bottom: var(--pmc-s4); }
.pmc-page .pmc-conversion-secondary p { font-size: 16px; }
.pmc-page .pmc-conversion-grid a { margin-top: auto; align-self: flex-start; }

/* 13 — FAQ: left-aligned like the rest of the page, heading held in view */
.pmc-page .pmc-faq h2 { grid-column: 1 / span 4; font-size: clamp(34px, 3.4vw, 46px); position: sticky; top: 40px; align-self: start; }
.pmc-page .pmc-faq-list { grid-column: 6 / -1; }
.pmc-page .pmc-faq details { border-top: 1px solid var(--pmc-line); }
.pmc-page .pmc-faq details:last-child { border-bottom: 1px solid var(--pmc-line); }
.pmc-page .pmc-faq summary { cursor: pointer; position: relative; list-style: none; padding: 22px 40px 22px 0; font-size: 18px; line-height: 1.5; transition: color var(--pmc-t-ui) var(--pmc-ease-ui), outline-offset var(--pmc-t-ui) var(--pmc-ease-ui); }
@media (hover: hover) { .pmc-page .pmc-faq summary:hover { color: var(--pmc-muted); } }
.pmc-page .pmc-faq summary::-webkit-details-marker { display: none; }
.pmc-page .pmc-faq summary::after { content: "+"; position: absolute; right: 6px; top: 22px; font-weight: 300; color: var(--pmc-muted); }
.pmc-page .pmc-faq details[open] summary::after { content: "−"; }
.pmc-page .pmc-faq details p { padding: 0 40px 26px 0; font-size: 16px; color: var(--pmc-muted); max-width: 60ch; }
/* The page's legal note (brief chapter 5), closing the page above the site
   footer. */
.pmc-page .pmc-legal { padding: 26px 0 34px; border-top: 1px solid var(--pmc-line); }
.pmc-page .pmc-legal p { max-width: 780px; color: var(--pmc-muted); font-size: 12px; }
.pmc-page .pmc-legal p + p { margin-top: 6px; }

/* 14 — Motion.
   One rule governs everything here: the page is finished without it. Every
   rule sits behind prefers-reduced-motion: no-preference and a screen query,
   every keyframe declares only its starting frame, and every animation fills
   backwards — so once it ends, the element is simply its static style again,
   pixel for pixel, with nothing left behind to remove.

   What moves, and why:
   - The hero states the claim, then draws its own proof: inputs, the lines
     that bend together, the module, then the result. It plays on load and
     needs no script.
   - The diagrams in 01, 03, 04 and 05 build in the order they are meant
     to be read — sources, connection, interpretation, output — once, when
     they first come into view.
   - Text never enters. Chapter heads, paragraphs, the sector rows, the
     principles, levels, phases and the two blocks are already where the eye
     needs them. The perimeter graphic in 02 is static; only a pillar's box
     settles in when its point is opened.

   Holding a diagram until it is seen is the dangerous part, so it is done
   narrowly. The script marks every reveal target already on screen or above
   it as .pmc-seen before arming anything, so nothing that may have been painted
   is ever blanked. Only then does it set data-pmc-motion, and only targets
   still wholly below the fold are held — at their first frame, paused, never
   hidden by any other means. A target the visitor skips past in one jump is
   shown finished rather than animated; focus arriving inside one releases it;
   print never sees any of this. If the script never runs, nothing is held. */
@keyframes pmc-rise { from { opacity: 0; translate: 0 var(--pmc-rise); } }
@keyframes pmc-settle { from { opacity: 0; translate: 0 var(--pmc-rise-sm); } }
@keyframes pmc-fade { from { opacity: 0; } }
/* Lines are drawn by uncovering them: a clip that starts at zero width and
   runs the way the line points, so a connector is laid down toward what it
   feeds and its arrowhead arrives last. Every edge of the clip sits 16px
   outside the element, which is more than the widest arrowhead or stroke
   overhang, so nothing is ever cut off.
   Not stroke dashes: the wires use pathLength="1" with non-scaling strokes,
   and in that combination browsers apply the dash in screen pixels rather
   than path length — the "single dash" became a repeating one that showed a
   stub at the bend before drawing, and a gap mid-draw. */
@keyframes pmc-draw-right { from { clip-path: inset(-16px calc(100% + 16px) -16px -16px); } to { clip-path: inset(-16px); } }
@keyframes pmc-draw-down { from { clip-path: inset(-16px -16px calc(100% + 16px) -16px); } to { clip-path: inset(-16px); } }
@keyframes pmc-draw-up { from { clip-path: inset(calc(100% + 16px) -16px -16px -16px); } to { clip-path: inset(-16px); } }

@media screen and (prefers-reduced-motion: no-preference) {
  /* Held targets wait at their first frame. Specific enough to win over any
     component rule below, and scoped so a nested target is held only by its
     own state, never by a parent that was shown finished. */
  .pmc-page[data-pmc-motion] [data-pmc-reveal]:not(.pmc-in-view):not(.pmc-seen):not(:focus-within),
  .pmc-page[data-pmc-motion] [data-pmc-reveal]:not(.pmc-in-view):not(.pmc-seen):not(:focus-within) *,
  .pmc-page[data-pmc-motion] [data-pmc-reveal]:not(.pmc-in-view):not(.pmc-seen):not(:focus-within) *::before,
  .pmc-page[data-pmc-motion] .pmc-drop-lg:not(.pmc-in-view):not(.pmc-seen) + .pmc-arch-out,
  .pmc-page[data-pmc-motion] [data-pmc-reveal]:not(.pmc-in-view):not(.pmc-seen):not(:focus-within) *::after { animation-play-state: paused !important; }

  /* Hero, on load. The claim first, its explanation and actions a beat later.
     Everything is readable inside ~0.8s and clickable from the first frame. */
  .pmc-page .pmc-hero-eyebrow { animation: pmc-rise var(--pmc-t-enter) var(--pmc-ease) backwards; }
  .pmc-page #pmc-title { animation: pmc-rise var(--pmc-t-enter) var(--pmc-ease) var(--pmc-step) backwards; }
  .pmc-page .pmc-lead { animation: pmc-rise var(--pmc-t-enter) var(--pmc-ease) calc(var(--pmc-step) * 2) backwards; }
  .pmc-page :is(.pmc-cta-label, .pmc-actions) { animation: pmc-rise var(--pmc-t-enter) var(--pmc-ease) calc(var(--pmc-step) * 3) backwards; }
  /* The lens resolves after the text: inputs, the bend, the module, the hand-
     off, the result. Declared outright, so it plays on load; if the lens
     starts below the fold (a short phone) the hold above keeps it for when it
     is reached. */
  .pmc-page .pmc-hero-figure > .pmc-fig-label-split > span:first-child,
  .pmc-page .pmc-lens-streams { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 4) backwards; }
  .pmc-page .pmc-lens-rays { animation: pmc-draw-right var(--pmc-t-draw) var(--pmc-ease-draw) calc(var(--pmc-step) * 5) backwards; }
  .pmc-page .pmc-lens-core { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 8) backwards; }
  .pmc-page .pmc-lens-out { animation: pmc-draw-right var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 10) backwards; }
  .pmc-page .pmc-hero-figure > .pmc-fig-label-split > span:last-child,
  .pmc-page .pmc-lens-result { animation: pmc-rise var(--pmc-t-enter) var(--pmc-ease) calc(var(--pmc-step) * 11) backwards; }

  /* 01 — Status is collected by hand. Chronological: the change lands, the days run red
     one by one while nobody knows, and only then is it recorded. The run is
     linear on purpose — it is time passing. */
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) :is(.pmc-wait-a, .pmc-wait-dot-a) { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-wait-axis::after { animation: pmc-wait-run var(--pmc-t-draw) linear calc(var(--pmc-step) * 3) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-wait-span { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 8) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) :is(.pmc-wait-b, .pmc-wait-dot-b) { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 3 + var(--pmc-t-draw)) backwards; }
  /* 01 — Knowledge is scattered: sources, the wires toward the module, the
     module, the hand-off, the answer. Cloud AI is off the table: the
     perimeter, then what stands outside it. */
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-split .pmc-bound { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-split .pmc-external { animation: pmc-fade var(--pmc-t-enter) var(--pmc-ease) calc(var(--pmc-step) * 5) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-join-sources { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-join-wire { animation: pmc-draw-down var(--pmc-t-draw) var(--pmc-ease-draw) calc(var(--pmc-step) * 2) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-join > .pmc-mod { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 7) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-join > .pmc-drop { animation: pmc-draw-down var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 9) backwards; }
  .pmc-page[data-pmc-motion] .pmc-problem-figure:not(.pmc-seen) .pmc-join > .pmc-node-strong { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 11) backwards; }

  /* 04 — The project-level signals resolve into the console; individual
     performance, outside the scope, arrives last and is joined to nothing. */
  .pmc-page[data-pmc-motion] .pmc-graphfig:not(.pmc-seen) .pmc-graph-grid > .pmc-node { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-graphfig:not(.pmc-seen) .pmc-graph-grid > .pmc-wire { animation: pmc-draw-down var(--pmc-t-draw) var(--pmc-ease-draw) calc(var(--pmc-step) * 2) backwards; }
  .pmc-page[data-pmc-motion] .pmc-graphfig:not(.pmc-seen) .pmc-graph-wire { animation: pmc-draw-down var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 7) backwards; }
  .pmc-page[data-pmc-motion] .pmc-graphfig:not(.pmc-seen) .pmc-scope > .pmc-external { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 11) backwards; }
  .pmc-page[data-pmc-motion] .pmc-graphfig:not(.pmc-seen) .pmc-graph > .pmc-mod { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 10) backwards; }

  /* 03 — The architecture builds top to bottom as it is reached: the systems
     and their bus, then the appliance and what runs on it, then what it
     answers with; the external services outside the boundary come last. Each part
     is its own target, so on a phone's long stack nothing plays out of sight. */
  .pmc-page[data-pmc-motion] .pmc-arch:not(.pmc-seen) .pmc-arch-systems { animation: pmc-fade var(--pmc-t-part) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-arch:not(.pmc-seen) :is(.pmc-arch-wire, .pmc-arch-wire-stack) { animation: pmc-draw-down var(--pmc-t-draw) var(--pmc-ease-draw) calc(var(--pmc-step) * 2) backwards; }
  .pmc-page[data-pmc-motion] .pmc-appliance:not(.pmc-seen) .pmc-appliance-art { animation: pmc-fade var(--pmc-t-enter) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-appliance:not(.pmc-seen) .pmc-appliance-join-1 { animation: pmc-draw-right var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 3) backwards; }
  .pmc-page[data-pmc-motion] .pmc-appliance:not(.pmc-seen) .pmc-appliance-grid > .pmc-mod { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 5) backwards; }
  .pmc-page[data-pmc-motion] .pmc-appliance:not(.pmc-seen) .pmc-appliance-join-2 { animation: pmc-draw-right var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 8) backwards; }
  .pmc-page[data-pmc-motion] .pmc-appliance:not(.pmc-seen) .pmc-appliance-model { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 10) backwards; }
  .pmc-page[data-pmc-motion] .pmc-drop-lg:not(.pmc-seen) { animation: pmc-draw-down var(--pmc-t-draw) var(--pmc-ease-draw) backwards; }
  .pmc-page[data-pmc-motion] .pmc-drop-lg:not(.pmc-seen) + .pmc-arch-out { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) calc(var(--pmc-step) * 5) backwards; }
  .pmc-page[data-pmc-motion] .pmc-arch:not(.pmc-seen) .pmc-external-arch { animation: pmc-fade var(--pmc-t-enter) var(--pmc-ease) calc(var(--pmc-step) * 12) backwards; }

  /* 05 — Taken apart, and put back together from the ground up: each layer
     lands on the one that carries it, then the carrying line rises into it. */
  .pmc-page[data-pmc-motion] .pmc-layers:not(.pmc-seen) .pmc-layer { animation: pmc-settle var(--pmc-t-part) var(--pmc-ease) backwards; }
  .pmc-page[data-pmc-motion] .pmc-layers:not(.pmc-seen) .pmc-layer:nth-child(2) { animation-delay: calc(var(--pmc-step) * 2); }
  .pmc-page[data-pmc-motion] .pmc-layers:not(.pmc-seen) .pmc-layer:nth-child(1) { animation-delay: calc(var(--pmc-step) * 4); }
  .pmc-page[data-pmc-motion] .pmc-layers:not(.pmc-seen) .pmc-layer:not(:last-child)::before { animation: pmc-draw-up var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 6) backwards; }
  .pmc-page[data-pmc-motion] .pmc-layers:not(.pmc-seen) .pmc-layer:not(:last-child)::after { animation: pmc-fade var(--pmc-t-ui) var(--pmc-ease) calc(var(--pmc-step) * 6 + var(--pmc-t-link)) backwards; }

  /* 02 — A pillar's box settles in when its point opens it. */
  .pmc-page .pmc-explore.is-live .pmc-pillar:not([hidden]) { animation: pmc-settle var(--pmc-t-soft) var(--pmc-ease) backwards; }
  /* 04 on a phone — the opened level's text settles in under its name. */
  .pmc-page .pmc-levels-wrap.is-live .pmc-level.is-current h3 + p { animation: pmc-settle var(--pmc-t-soft) var(--pmc-ease) backwards; }
  /* FAQ — an answer settles in under its question; closing is immediate. */
  .pmc-page .pmc-faq details[open] > p { animation: pmc-settle var(--pmc-t-soft) var(--pmc-ease) backwards; }
  .pmc-page.pmc-hero-seen :is(.pmc-hero-eyebrow, #pmc-title, .pmc-lead, .pmc-cta-label, .pmc-actions, .pmc-hero-figure *) { animation: none; }
}
/* Stacked layouts turn the horizontal connectors downward, so the lines that
   were drawn left to right are drawn top to bottom, and a line drawn as a CSS
   bar instead of an SVG path is uncovered rather than dashed. */
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 980px) {
  .pmc-page .pmc-lens-rays { animation: pmc-draw-down var(--pmc-t-link) var(--pmc-ease-draw) calc(var(--pmc-step) * 6) backwards; }
  .pmc-page .pmc-lens-out { animation-name: pmc-draw-down; }
  .pmc-page[data-pmc-motion] .pmc-appliance:not(.pmc-seen) :is(.pmc-appliance-join-1, .pmc-appliance-join-2) { animation-name: pmc-draw-down; }
}
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  /* Short stacks need less travel and a tighter sequence, not new geometry. */
  .pmc-page { --pmc-step: 60ms; --pmc-rise: 8px; --pmc-rise-sm: 4px; }
}
/* Component keyframes that read custom properties of the element they run on. */
@keyframes pmc-wait-run { from { clip-path: inset(0 calc(100% - var(--a)) 0 var(--a)); } }

/* 15 — Tablet and mobile compositions.
   Diagrams are never scaled down until they stop being readable: they are
   re-laid out. Horizontal flows become vertical ones and every label keeps
   its size. */
@media (min-width: 1600px) { .pmc-page .pmc-hero-grid { padding-block: 104px 92px; } }
@media (max-width: 1180px) {
  .pmc-page .pmc-wrap { width: calc(100% - 72px); }
  .pmc-page .pmc-hero-copy { grid-column: 1 / span 7; }
  .pmc-page .pmc-hero-aside { grid-column: 8 / -1; }
  /* At this width the lead wraps to five lines and the aside outgrows the
     headline block, so bottom alignment lifted its first line some 70px above
     the product name. Both columns start on the eyebrow's line instead. */
  .pmc-page .pmc-hero-grid { align-items: start; }
  .pmc-page .pmc-head > h2 { grid-column: 1 / span 7; }
  .pmc-page .pmc-head-split > .pmc-deck { grid-column: 1 / span 7; margin-top: var(--pmc-s3); }
  .pmc-page .pmc-problem-body { grid-column: 1 / span 5; }
  .pmc-page .pmc-problem-figure { grid-column: 7 / -1; }
  .pmc-page .pmc-principles, .pmc-page .pmc-explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmc-page .pmc-layers { grid-column: 1 / span 6; }
  .pmc-page .pmc-hardware-copy { grid-column: 8 / -1; }
  /* The outside column is never narrower than its own node, so the label
     stays on one line; the scope gives up the difference. */
  .pmc-page .pmc-scope { grid-template-columns: minmax(0, 420px) minmax(max-content, 1fr); }
  /* Row 3 of 01: the outside node drops under the perimeter. */
  .pmc-page .pmc-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--pmc-s4); }
  /* Stacked, there is no row of nodes to line up with, so the boundary's own
     padding is not owed on top of the row gap. */
  .pmc-page .pmc-split .pmc-external { justify-self: end; margin-top: 0; }
  /* Short definitions and questions that are not <p>, so the page's paragraph
     rule does not reach them; below 1180 several left a single word on their
     last line ("requirements.", "service.", "manager?"). */
  .pmc-page .pmc-industries dd, .pmc-page .pmc-principles dd, .pmc-page .pmc-faq summary { text-wrap: pretty; }
  /* Below 1180 the boundary keeps its width while the flow inside it does not
     grow: the labels and nodes are the size they are. Letting the two wire
     columns stay on fr meant they swallowed every spare pixel, so by 768 a
     three-word label was joined to a small module by a 230px run of empty
     rule. Capping them and centring the group keeps the connectors readable
     as connectors and spends the surplus as margin instead. */
  /* Below 1180 the figure loses about a third of its width and the two event
     labels start to meet in the middle of the axis, so the second one drops
     below the dimension rather than sharing the line above with the first. */
  .pmc-page .pmc-wait { padding-bottom: 86px; }
  .pmc-page .pmc-wait-b { bottom: auto; top: 100%; margin: 45px 0 0; }
}
@media (max-width: 980px) {
  /* The lens runs out of horizontal room before the copy does, so it turns
     into a vertical flow while the headline is still on two columns. */
  .pmc-page .pmc-hero-copy, .pmc-page .pmc-hero-aside { grid-column: 1 / -1; }
  .pmc-page h1 { font-size: clamp(44px, 7.4vw, 76px); }
  .pmc-page .pmc-lens { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 640px; margin-inline: auto; }
  /* Three inputs, not five. The point of the figure is that separate sources
     land on one plane and leave as one answer; a fourth and fifth label prove
     nothing extra and cost a whole row. The two that go are still named in the
     figure's accessible description. */
  .pmc-page .pmc-lens-streams li.pmc-lens-extra { display: none; }
  /* The three streams are collected, not merely stood on a line: a drop from
     each label onto a bus that runs centre to centre, and the stem below
     leaves from the middle of it. With a full-width rule under the labels and
     one stem from its middle, the stem read as coming from "Issues" alone.
     Equal thirds put the outer centres at a sixth in from each side, which is
     where the bus ends. */
  .pmc-page .pmc-lens-streams { grid-column: auto; width: 100%; align-self: auto; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .pmc-page .pmc-lens-streams li { position: relative; justify-content: center; padding: 0 0 18px; font-size: 12px; }
  .pmc-page .pmc-lens-streams li::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 11px; background: var(--pmc-dg-wire); transform: translateX(-50%); }
  .pmc-page .pmc-lens-streams::after { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); bottom: 0; height: 1px; background: var(--pmc-dg-wire); }
  /* Five rays over two stacked rows would say nothing; one line is honest. */
  .pmc-page .pmc-lens-rays { grid-column: auto; align-self: center; width: 1px; height: var(--pmc-run); background: var(--pmc-dg-wire); }
  .pmc-page .pmc-lens-rays path { display: none; }
  .pmc-page .pmc-lens-core { grid-column: auto; min-width: 220px; min-height: 0; }
  .pmc-page .pmc-lens-out { grid-column: auto; width: 1px; height: var(--pmc-run); }
  .pmc-page .pmc-lens .pmc-hop::after { right: auto; left: 50%; top: auto; bottom: 0; border-top: 0; border-bottom: 1px solid currentColor; transform: translate(-50%, calc(var(--pmc-tip) * -0.2071)) rotate(45deg); }
  .pmc-page .pmc-lens-result { grid-column: auto; width: 100%; align-self: auto; }
  .pmc-page .pmc-hero-figure > .pmc-fig-label-split { display: none; }
  .pmc-page .pmc-problem-body { grid-column: 1 / span 10; }
  .pmc-page .pmc-problem-figure { grid-column: 1 / -1; margin-top: var(--pmc-s5); }
  /* Stacked under its text, the timeline only needs headroom for its one top
     label, so it starts the same distance below the text as the other two
     figures do instead of 20px further down. */
  .pmc-page .pmc-wait { padding-top: 38px; }
  .pmc-page .pmc-people h2, .pmc-page .pmc-people-side, .pmc-page .pmc-graphfig { grid-column: 1 / -1; }
  .pmc-page .pmc-graphfig { grid-row: auto; margin-top: var(--pmc-s3); }
  .pmc-page .pmc-scope { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  /* Stacked: the same five parts, both connectors turned on their side. */
  .pmc-page .pmc-appliance-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pmc-page .pmc-appliance-art, .pmc-page .pmc-appliance-join,
  .pmc-page .pmc-appliance-grid > .pmc-mod, .pmc-page .pmc-appliance-model { grid-area: auto; }
  .pmc-page .pmc-appliance-note { position: static; margin-top: 13px; }
  .pmc-page .pmc-appliance-join { width: 1px; height: var(--pmc-run); justify-self: center; }
  .pmc-page .pmc-appliance-art { width: min(100%, 420px); }
  /* The drawing ends in a soft floor shadow, so a connector hung from the
     bottom of its box started in empty space under the machine. It is pulled
     up by the shadow's depth — 11.94% of the art's width, read off the
     artwork's own geometry where the front face meets the centre line — so it
     leaves from the metal. A percentage margin resolves against the same
     column width the art is sized from, so the two scale together. */
  .pmc-page .pmc-appliance-join-1 { margin-top: calc(min(100%, 420px) * -0.1194); position: relative; }
  .pmc-page .pmc-appliance-grid > .pmc-mod, .pmc-page .pmc-appliance-model { width: min(100%, 340px); }
  .pmc-page .pmc-layers, .pmc-page .pmc-hardware-copy { grid-column: 1 / -1; }
  .pmc-page .pmc-hardware-copy { grid-row: 1; }
  /* People, the two doors and the FAQ keep their desktop side-by-side down to
     here: between 981 and 1180 each still has the room, and stacking them
     early turned three compositions into long single columns with the right
     third of the page left empty. */
  .pmc-page .pmc-conversion-primary { grid-column: 1 / span 8; }
  .pmc-page .pmc-conversion-secondary { grid-column: 1 / span 8; }
  .pmc-page .pmc-faq h2 { grid-column: 1 / span 12; position: static; margin-bottom: var(--pmc-s5); }
  .pmc-page .pmc-faq-list { grid-column: 1 / -1; }
}
/* Small desktop / landscape tablet. On desktop the first Problem row gives its
   text four columns so the timeline can have seven; here the timeline's
   second label already drops below the axis, so it no longer needs the extra
   length, while four columns of text had shrunk to ~300px and stranded
   "check-in." on a line of its own. The row takes the 5 / 7 split of the
   other two. */
@media (min-width: 981px) and (max-width: 1180px) {
  .pmc-page .pmc-problem-row:nth-of-type(1) .pmc-problem-body { grid-column: 1 / span 5; }
  .pmc-page .pmc-problem-row:nth-of-type(1) .pmc-problem-figure { grid-column: 7 / -1; }
}
/* The people block keeps text and figure side by side from 981 up, so through
   this band the figure is about half the page — not enough for the scope to
   hold two columns of its own as well. Below 1180 the graph fell to ~300px and
   the node labels ran outside their boxes; between 1180 and 1320 the graph got
   its 420px but the outside column did not, so "Individual performance" broke
   over two lines and, at the bottom of the band, stood wider than the column it
   was in. Inside the figure the scope stacks instead: the graph gets the whole
   column, and what is outside the scope keeps the full width for its label.
   Above 1320 both fit side by side, which is where the distance between them
   says what it is meant to say. */
@media (min-width: 981px) and (max-width: 1320px) {
  .pmc-page .pmc-scope { grid-template-columns: minmax(0, 1fr); row-gap: var(--pmc-s4); justify-items: stretch; }
  .pmc-page .pmc-scope > .pmc-external { justify-self: center; }
}
/* Portrait tablet: the timeline figure spans the full column again, so both
   event labels fit on the line above the axis, as on desktop. The drop below
   is only for the narrower six-column figure above this band and for phones. */
@media (min-width: 761px) and (max-width: 980px) {
  .pmc-page .pmc-wait { padding-bottom: 58px; }
  .pmc-page .pmc-wait-b { top: auto; bottom: 100%; margin: 0 0 19px; }
}
@media (max-width: 760px) {
  .pmc-page {
    font-size: 17px; --pmc-section-pad: clamp(96px, 22vw, 116px);
    --pmc-head-gap: var(--pmc-s4); --pmc-head-out: var(--pmc-s5);
    /* Connector runs are halved on a phone. On a wide screen the travel is
       what makes a flow read as a sequence; on a 375px column the same travel
       is just empty space between two labels, and it is what made every
       diagram taller than the screen. */
    --pmc-run-sm: 32px; --pmc-run: 44px; --pmc-run-lg: 60px;
  }
  .pmc-page .pmc-wrap { width: calc(100% - 40px); }
  .pmc-page .pmc-hero-eyebrow { margin-bottom: var(--pmc-s3); }
  .pmc-page .pmc-hero { padding-bottom: var(--pmc-s5); }
  .pmc-page .pmc-hero-grid { padding-block: var(--pmc-s3) var(--pmc-s4); row-gap: var(--pmc-s5); }
  .pmc-page .pmc-card { padding: 26px; }
  .pmc-page .pmc-card-title { margin-top: var(--pmc-s1); }
  .pmc-page .pmc-card-facts li { padding: 9px 0; }
  /* Sized so "console for regulated" holds one line down to a 360px phone. */
  .pmc-page h1 { font-size: clamp(33px, 10.5vw, 66px); max-width: 640px; }
  .pmc-page .pmc-lead { font-size: 17px; }
  .pmc-page .pmc-actions { gap: var(--pmc-s2) var(--pmc-s3); margin-top: var(--pmc-s4); }
  .pmc-page .pmc-hero-eyebrow { font-size: 16px; }
  .pmc-page .pmc-actions .pmc-button { flex: 1 0 auto; }
  .pmc-page .pmc-head > h2, .pmc-page .pmc-head-split > .pmc-deck { grid-column: 1 / -1; }
  .pmc-page .pmc-problem-row { row-gap: 0; padding-block: var(--pmc-s5); }
  .pmc-page .pmc-problem-body, .pmc-page .pmc-problem-figure { grid-column: 1 / -1; }
  .pmc-page .pmc-problem-body h3 { font-size: clamp(28px, 6.8vw, 40px); }
  .pmc-page .pmc-problem-body p { font-size: 16px; }
  /* The three levels run down the left edge: the rule turns vertical and
     each dot sits on it, level with its label. */
  .pmc-page .pmc-levels { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .pmc-page .pmc-levels::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 1px; height: auto; }
  .pmc-page .pmc-level-dot { position: absolute; left: -30px; top: 4px; }
  /* The rule is vertical here, so the dot's fill turns with it: it runs from
     the top down, the same direction the levels are read in, and half a dot
     reads as half filled rather than half crossed. On desktop the rule runs
     across the page and the fill keeps its left-to-right travel. */
  .pmc-page .pmc-level-dot::before { top: 0; right: 0; bottom: auto; width: auto; height: var(--pmc-fill); transition: height var(--pmc-t-soft) var(--pmc-ease); }
  .pmc-page .pmc-level > .pmc-meta { margin-top: 0; }
  /* On a phone the slider turns vertical with the list: the rule runs down
     the dots, one segment per level, dark where the boundary has already
     passed. The chosen dot carries the thumb's ring. Levels are chosen by
     tapping them; the range input stays in the page, visually hidden, as the
     keyboard and screen-reader control, and its focus shows on the chosen
     dot. */
  .pmc-page .pmc-levels-slider { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pmc-page .pmc-levels-wrap.is-live .pmc-levels::after,
  .pmc-page .pmc-levels-wrap.is-live .pmc-levels::before { display: none; }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level:not(:last-child)::before { content: ""; position: absolute; left: -25px; top: 33px; bottom: -22px; width: 1px; background: var(--pmc-dg-edge); transition: background var(--pmc-t-soft) var(--pmc-ease-ui); }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level.is-passed::before { background: var(--pmc-text); }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level.is-current .pmc-level-dot { box-shadow: 0 0 0 4px var(--pmc-bg), 0 0 0 5px var(--pmc-text); }
  /* Resting ring and focus ring are both dark now, so focus cannot separate
     on hue the way the old accent did: it carries three times the weight. */
  .pmc-page .pmc-levels-wrap:has(.pmc-levels-range:focus-visible) .pmc-level.is-current .pmc-level-dot { box-shadow: 0 0 0 4px var(--pmc-bg), 0 0 0 7px var(--pmc-accent-ink); }
  /* One level open at a time: the chosen one at full size with its text, the
     other two folded to their names, each a tap away. */
  .pmc-page .pmc-levels-wrap.is-live .pmc-levels { row-gap: 0; }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level { padding-block: 18px; border-top: 1px solid var(--pmc-line); }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level:last-child { border-bottom: 1px solid var(--pmc-line); }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level-dot { top: 22px; }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level h3 { font-size: 26px; transition: font-size var(--pmc-t-soft) var(--pmc-ease), color var(--pmc-t-soft) var(--pmc-ease-ui); }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level:not(.is-current) h3 { font-size: 18px; margin-top: 4px; padding-right: 32px; }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level:not(.is-current) h3 + p { display: none; }
  .pmc-page .pmc-levels-wrap.is-live .pmc-level:not(.is-current)::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font-weight: 300; font-size: 20px; color: var(--pmc-muted); }
  .pmc-page .pmc-explore, .pmc-page .pmc-phases { grid-template-columns: minmax(0, 1fr); row-gap: var(--pmc-s4); }
  /* The steps run down the left edge. */
  .pmc-page .pmc-phases { row-gap: 28px; padding-left: 40px; }
  /* One segment between neighbouring steps, drawn from each step but the
     last: a single rule with a guessed bottom offset carried on past the
     third dot and ended in the middle of its text, pointing at nothing. */
  .pmc-page .pmc-phases::before { display: none; }
  .pmc-page .pmc-phases > li:not(:last-child)::before { content: ""; position: absolute; left: -26px; top: 31px; bottom: -22px; width: 1px; background: var(--pmc-line-strong); }
  .pmc-page .pmc-phases > li { padding-top: 0; }
  .pmc-page .pmc-phase-num { left: -40px; top: -2px; }
  .pmc-page .pmc-phase-next { position: static; margin-bottom: 4px; padding: 0; background: none; }
  /* On a phone the open box is read under the drawing, not over it. */
  .pmc-page .pmc-explore.is-live { row-gap: 0; }
  .pmc-page .pmc-explore.is-live .pmc-pillar { margin-top: var(--pmc-s4); }
  .pmc-page .pmc-hotspot { width: 26px; height: 26px; font-size: 11px; }
  .pmc-page .pmc-explore-hint { text-align: left; }
  .pmc-page .pmc-people { display: block; margin-top: var(--pmc-s6); padding-top: var(--pmc-s4); }
  .pmc-page .pmc-people-side { margin-top: var(--pmc-s3); }
  .pmc-page .pmc-graphfig { margin-top: var(--pmc-s5); }
  .pmc-page .pmc-people h2 { font-size: clamp(44px, 10vw, 66px); }
  /* The distance between the scope and what stands outside it is the
     argument, so it survives the stack. */
  .pmc-page .pmc-scope { grid-template-columns: minmax(0, 1fr); row-gap: var(--pmc-s5); justify-items: stretch; }
  .pmc-page .pmc-split-nodes { gap: 8px; }
  .pmc-page .pmc-graph-grid > .pmc-node { margin: calc(var(--pmc-run) / 2) 10px; }
  .pmc-page .pmc-node { padding: 11px 9px; letter-spacing: .05em; }
  .pmc-page .pmc-arch { margin-top: var(--pmc-s5); }
  /* Two by two, wired as one block. Zero column gap keeps each box centred on
     its own half, which is what the collector below aims at; the side inset
     lives on the box. The row gap is a stated value because the stub drawn
     across it has to be exactly as long. */
  .pmc-page .pmc-arch-systems { --pmc-stack-gap: 26px; }
  .pmc-page .pmc-arch-systems ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--pmc-stack-gap); }
  .pmc-page .pmc-arch-systems li { margin: 0 4px; }
  /* The top row feeds the bottom row: one stub per column, on the centre line
     the collector below continues from. */
  .pmc-page .pmc-arch-systems li:nth-child(n + 3) { position: relative; }
  .pmc-page .pmc-arch-systems li:nth-child(n + 3)::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--pmc-stack-gap); background: var(--pmc-dg-wire); }
  /* The wide bus is drawn for four boxes in a row and meets none of them here,
     so the stacked collector takes over — a line down out of each column,
     turned in to the centre, continuing down as one. */
  .pmc-page .pmc-arch-wire { display: none; }
  /* The stem lands on the appliance's top edge exactly where that edge carries
     its "Dedicated appliance" label, so run all the way down it ran into the
     lettering. It stops 14px short instead: it still aims squarely at the box
     it feeds, and the word keeps clear air above it. The whole collector
     shortens with it, so the bus stays midway between boxes and stem end. */
  .pmc-page .pmc-arch-wire-stack { display: block; height: calc(var(--pmc-run-lg) - 14px); margin-bottom: 14px; }
  .pmc-page .pmc-appliance-note { margin-top: 12px; }
  .pmc-page .pmc-principles { grid-template-columns: 1fr; row-gap: 0; margin-top: var(--pmc-s6); }
  .pmc-page .pmc-principles > div { padding-block: var(--pmc-s3); }
  .pmc-page .pmc-hardware-copy h2 { font-size: 34px; }
  .pmc-page .pmc-layer { padding: 16px 18px; }
  .pmc-page .pmc-layer-note { margin-left: 0; flex-basis: 100%; }
  .pmc-page .pmc-industries dt, .pmc-page .pmc-industries dd { grid-column: 1 / -1; }
  .pmc-page .pmc-industries dt { font-size: 22px; }
  .pmc-page .pmc-industries dd { margin-top: 12px; }
  .pmc-page .pmc-conversion-primary, .pmc-page .pmc-conversion-secondary { grid-column: 1 / -1; }
  .pmc-page .pmc-conversion-grid { row-gap: var(--pmc-s5); }
  .pmc-page .pmc-conversion-primary h2 { font-size: 36px; }
  .pmc-page .pmc-faq summary { font-size: 17px; padding-right: 32px; }
  .pmc-page .pmc-faq details p { padding-right: 0; }
  .pmc-page .pmc-legal { padding-block: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .pmc-page *, .pmc-page *::before, .pmc-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pmc-page .pmc-button:hover span, .pmc-page .pmc-text-link:hover span { transform: none; }
}
/* AI PM Console product page — integration into the excolabs.com Drupal
   theme (sandbox). Loaded after ai-pm-console.css, in the same Asset
   Injector, and only on the Product page content type. Everything the page
   itself needs lives in ai-pm-console.css; this file only adapts the site
   chrome around it:
   full-bleed content, the header and footer in the page's palette, and the
   theme's scroll-to-top button. Nothing here applies anywhere else on the site. */

/* ---------- Page ground and full-bleed content ---------- */

/* The page's ground behind everything, so no strip of the site's white shows
   between the header, the content and the footer. */
body.page-node-type-product-page {
  background: #f7f7f2;
  overflow-x: clip;
}

/* Pull the fragment out of the theme's 1320px container to the full viewport. */
.page-node-type-product-page .pmc-page {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* In-page links (#design-partner, #investor) land under the theme's sticky
   header copy, which is 76-81px tall once the page is scrolled. The page's
   own 32px of air is kept on top of that, so the target's first line is never
   hidden behind it. */
.page-node-type-product-page .pmc-page [id] {
  scroll-margin-top: 112px;
}

/* ---------- Header in the page's palette ----------
   Same header and links as the rest of the site, in the page's colours.
   No product lockup: the active "Product" item already says where the visitor
   is, and the hero names the product one line below. */

.page-node-type-product-page .navbar {
  background: #f7f7f2;
  border-bottom: 1px solid #d6d9cf;
}

/* ExCoLabs logo in solid black. */
.page-node-type-product-page .site-branding .logo-dark {
  filter: brightness(0);
}

/* The Contact button in the page's button colours. */
.page-node-type-product-page .navbar .btn-primary {
  background: #272b27;
  border-color: #272b27;
  color: #f7f7f2;
}
.page-node-type-product-page .navbar .btn-primary:hover,
.page-node-type-product-page .navbar .btn-primary:focus-visible {
  background: #444c41;
  border-color: #444c41;
  color: #f7f7f2;
}

/* Menu links on desktop only. On mobile the menu opens in the theme's dark
   off-canvas panel, where dark links would disappear. */
@media (min-width: 992px) {
  .page-node-type-product-page .navbar .navbar-nav .nav-link,
  .page-node-type-product-page .navbar .nav-link-search {
    color: #272b27;
  }
  .page-node-type-product-page .navbar .navbar-nav .nav-link:hover,
  .page-node-type-product-page .navbar .navbar-nav .nav-link:focus-visible,
  .page-node-type-product-page .navbar .nav-link-search:hover {
    color: #62665f;
  }
  /* The active "Product" item. */
  .page-node-type-product-page .navbar .navbar-nav .nav-link.is-active,
  .page-node-type-product-page .navbar .navbar-nav .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
  }
}

/* ---------- Footer in the page's palette ---------- */

.page-node-type-product-page .dialog-off-canvas-main-canvas > footer {
  background: #242824;
  color: #b9bfb3;
}
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer h5,
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer .lead {
  color: #edf0e6;
}
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer a {
  color: #edf0e6;
}
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer a:hover {
  color: #b9bfb3;
}

/* ExCoLabs logo in solid white. */
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer img {
  filter: brightness(0) invert(1);
}

/* Icons in the page's muted tone instead of the site blue. !important is
   required: Bootstrap's text-primary sets its colour with !important too. */
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer .icon,
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer .icon i {
  color: #b9bfb3 !important;
}

/* The rule above the copyright line. */
.page-node-type-product-page .dialog-off-canvas-main-canvas > footer hr {
  border-top-color: #4a5048;
  color: #4a5048;
  opacity: 1;
}

/* ---------- Status message after a product contact form ----------
   The design-partner and investor forms send the visitor back to this page,
   where the theme prints its "thank you" alert above the header. The theme's
   green on mint is 3.95:1, under the 4.5:1 WCAG AA needs for 16px text; in
   the page's palette it is 12.5:1. Error and warning alerts keep the theme's
   colours so they still read as errors. */
.page-node-type-product-page [data-drupal-messages] .alert-success {
  background: #edf0e6;
  border-color: #b9bfb3;
  color: #272b27;
}
.page-node-type-product-page [data-drupal-messages] .alert-success .btn-close {
  filter: none;
  opacity: .7;
}

/* ---------- Scroll-to-top button ----------
   The theme's ring with an arrow, bottom right. Given the page's ground so it
   stays legible as it passes over the dark sections and the dark footer. */

.page-node-type-product-page .progress-wrap {
  background: #f7f7f2;
  box-shadow: inset 0 0 0 2px #d6d9cf, 0 1px 3px rgba(36, 40, 36, .12);
}
.page-node-type-product-page .progress-wrap::after {
  color: #272b27;
}
.page-node-type-product-page .progress-wrap svg.progress-circle path {
  stroke: #272b27;
}