/* ==========================================================================
   Product detail template (.pd-*)
   Themed per product through custom properties set on .pd:
     --p     accent (glows, fills)          --p2 / --p3  gradient ends (glows only)
     --p-ink accent lifted to >= 4.6:1      --p-ui       accent lifted to >= 3.2:1
   Body text never uses --p; labels use --p-ink, rules/borders/icons use --p-ui.
   ========================================================================== */

.pd {
  --p: var(--ember);
  --p2: var(--p);
  --p3: var(--p);
  --p-ink: var(--ember);
  --p-ui: var(--ember);
  --pd-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.008)), var(--surface);
}

/* Product-coloured accents on shared components, inside the page only */
.pd :focus-visible { outline-color: var(--p-ui); }
.pd .eyebrow--ember { color: var(--p-ink); }
.pd .btn:not(.btn--ghost):hover { box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--p) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--p-ink) 50%, transparent); }
.pd .link-arrow:hover { border-color: var(--p-ui); }
.pd .section-head h2 { max-width: 16em; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.pd-hero { padding-top: calc(var(--header-h) + clamp(40px, 5.2vw, 76px)); padding-bottom: clamp(72px, 9vw, 128px); }
.pd-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pd-hero__glow::before {
  content: ""; position: absolute; right: -14%; top: -8%; width: min(1100px, 92vw); aspect-ratio: 1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--p2) 26%, transparent), color-mix(in srgb, var(--p3) 12%, transparent) 55%, transparent 78%);
  filter: blur(8px);
}
.pd-hero__glow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--p) 55%, transparent) 50%, transparent 96%);
  opacity: 0.8;
}
.pd-hero__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.pd-hero--orbit .pd-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.pd-hero__copy { position: relative; container-type: inline-size; }

/* Breadcrumb */
.pd-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-block: -11px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pd-crumbs li { display: inline-flex; align-items: center; gap: 12px; }
/* 11px block padding gives the crumb links a ~40px tap target without moving the layout. */
.pd-crumbs a { display: inline-block; color: var(--text-2); padding-block: 11px; transition: color 0.2s; }
.pd-crumbs a:hover { color: var(--text); }
.pd-crumbs__sep { color: var(--text-3); }
.pd-crumbs__here { color: var(--p-ink); }

/* Lockup: mark + wide-tracked name + status */
.pd-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(24px, 2.6vw, 32px); }
.pd-lockup .pmark { filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--p) 45%, transparent)); }
.pd-lockup__name { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text); margin-right: 2px; }

.pd-hero .pd-eyebrow { color: var(--p-ink); margin: clamp(24px, 2.6vw, 32px) 0 0; text-wrap: balance; }
.pd-hero .pd-eyebrow + .pd-title { margin-top: 18px; }
.pd-title { margin-top: clamp(22px, 2.6vw, 32px); letter-spacing: -0.035em; line-height: 1.04; }
/* The cqi cap keeps the title in proportion to the copy column between 1101px and 1440px, where the
   column narrows faster than the vw-based size ("Prior / authorization," at 1180px). */
.pd-title--xl { font-size: min(clamp(2.6rem, 1.55rem + 3.7vw, 4.6rem), 13.4cqi); }
.pd-title--l { font-size: min(clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem), 10.5cqi); }
.pd-title--m { font-size: min(clamp(2.1rem, 1.45rem + 2vw, 3.1rem), 9.1cqi); letter-spacing: -0.03em; }
/* inline-block: the coloured phrase wraps as a unit instead of leaving "A" at the end of the line above.
   --own (after a full sentence): the phrase starts its own line. */
.pd-hl {
  display: inline-block;
  color: var(--p-ink);
  background: linear-gradient(100deg, var(--p-ink) 10%, color-mix(in srgb, var(--p-ink) 62%, #fff) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pd-hl--own { display: block; width: fit-content; }
@media (forced-colors: active) { .pd-hl { -webkit-text-fill-color: currentColor; background: none; } }
.pd-hero .lede { max-width: 32em; }

/* Early-access note */
.pd-early {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; max-width: 34em;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid rgba(125, 180, 255, 0.32); background: rgba(125, 180, 255, 0.06);
  font-size: var(--fs-small); color: var(--text-2); line-height: 1.5;
}
.pd-early svg { width: 18px; height: 18px; color: var(--sky); flex: none; margin-top: 2px; }
.pd-early b { color: var(--text); font-weight: 600; }

/* Screen in the hero */
.pd-hero__media { position: relative; min-width: 0; }
/* shot() renders a <figure>; site.css has no figure reset, so drop the UA 40px side margins here. */
.pd figure { margin: 0; }
.pd-hero__shot .shot-wrap::before { inset: -4% -4% -10% 0; opacity: 0.95; }
.pd-hero__shot .shot { box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 90px -40px color-mix(in srgb, var(--p) 55%, transparent); }
@media (min-width: 1101px) {
  .pd-hero__shot { margin-right: calc(-1 * clamp(0px, (100vw - 1240px) / 2, 72px)); }
}
.pd-note { margin-top: 16px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.pd-hero__shot .pd-note { text-align: right; }

/* Orbit visual (no screens yet) */
.pd-orbit { position: relative; width: min(100%, 540px); margin-inline: auto; }
.pd-orbit__stage { position: relative; aspect-ratio: 1; }
.pd-orbit__glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--p) 34%, transparent), color-mix(in srgb, var(--p3) 14%, transparent) 62%, transparent); filter: blur(12px); }
.pd-orbit__ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--p) var(--a), transparent); }
.pd-orbit__ring--1 { inset: 0; --a: 20%; }
.pd-orbit__ring--2 { inset: 13%; --a: 32%; background: radial-gradient(closest-side, transparent 86%, color-mix(in srgb, var(--p) 6%, transparent)); }
.pd-orbit__ring--3 { inset: 25%; --a: 48%; }
.pd-orbit__spin { position: absolute; inset: 6.5%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--p) 26%, transparent); animation: pd-spin 80s linear infinite; }
.pd-orbit__spin i { position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--p-ink); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--p) 70%, transparent); }
.pd-orbit__dot { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: color-mix(in srgb, var(--p-ui) 80%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--p) 60%, transparent); }
.pd-orbit__core {
  position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; container-type: inline-size;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.07), rgba(9, 12, 16, 0.92) 68%);
  border: 1px solid color-mix(in srgb, var(--p) 42%, transparent);
  box-shadow: 0 0 90px -12px color-mix(in srgb, var(--p) 55%, transparent), inset 0 0 44px color-mix(in srgb, var(--p) 14%, transparent);
}
.pd-orbit__core .pmark { width: 66%; height: auto; filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--p) 45%, transparent)); }
.pd-orbit__core .pmark--fallback { height: auto; aspect-ratio: 1; font-size: 30cqi; border-radius: 26%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.pd-orbit__chips { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.pd-orbit__chips li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(var(--tx, -50%), -50%);
  display: flex; align-items: center; gap: 9px; width: max-content; max-width: 15rem;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgba(10, 14, 19, 0.86); border: 1px solid color-mix(in srgb, var(--p) 32%, var(--line));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.8125rem; line-height: 1.3; color: var(--text); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.9);
}
.pd-orbit__chips li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--p-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 22%, transparent); }
@keyframes pd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pd-orbit__spin { animation: none; } }

/* --------------------------------------------------------------------------
   Overview
   -------------------------------------------------------------------------- */
/* Desktop: heading and facts on the left, description on the right.
   Phones (see ≤860px): heading, description, then facts. */
.pd-overview__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
  grid-template-areas: "head body" "facts body"; column-gap: clamp(40px, 7vw, 112px); align-items: start;
}
.pd-overview__head { grid-area: head; }
.pd-overview__head h2 { margin-top: 18px; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.pd-facts { grid-area: facts; margin: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--line); }
.pd-facts > div { display: grid; grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pd-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.pd-facts dd { margin: 0; color: var(--text); font-size: 0.9375rem; }
/* Padding widens the tap target to ~44px; the negative margin keeps the row height. */
.pd-facts a { display: inline-block; padding-block: 10px; margin-block: -10px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.pd-facts a:hover { text-decoration-color: var(--p-ui); }
.pd-status { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.pd-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px rgba(125, 180, 255, 0.2); }

.pd-overview__body { grid-area: body; padding-top: clamp(0px, 3.4vw, 46px); }
/* With facts: the heading spans both columns (long names such as "What Owner Docket does" would
   otherwise break in the 5fr column), then facts and description start side by side. */
@media (min-width: 861px) {
  .pd-overview__grid--facts { grid-template-rows: auto auto; grid-template-areas: "head head" "facts body"; }
  .pd-overview__grid--facts .pd-overview__body { padding-top: 0; margin-top: clamp(32px, 4vw, 48px); }
}
.pd-desc { font-size: var(--fs-lede); line-height: 1.65; color: var(--text-2); max-width: 36em; }
.pd-desc__lead { color: var(--text); }
.pd-pull {
  position: relative; margin-top: clamp(40px, 5vw, 64px); padding: 6px 0 6px clamp(22px, 2.4vw, 32px);
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.025em; color: var(--text); max-width: 18em;
  text-wrap: balance;
}
/* One span per sentence: "Recover today. / Prevent tomorrow.", never "Recover today. Prevent / tomorrow." */
.pd-pull > span { display: inline-block; }
.pd-pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--p-ink), color-mix(in srgb, var(--p) 10%, transparent)); }

/* Proof strip: the company's own result with this product, one quiet line under the overview.
   Spans every column and auto-places after the head, body and facts at every breakpoint. */
.pd-proof {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.9375rem; line-height: 1.55; color: var(--text-2);
}
.pd-proof__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-ink); }
.pd-proof__v { color: var(--text); }
.pd-proof abbr { text-decoration: none; }
.pd-proof .pd-proof__link { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   Capabilities
   -------------------------------------------------------------------------- */
.pd-caps__grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.pd-cap {
  grid-column: span 2; position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--pd-glass);
  transition: border-color 0.35s var(--ease);
}
.pd-caps__grid[data-n="2"] .pd-cap, .pd-caps__grid[data-n="4"] .pd-cap, .pd-caps__grid[data-n="5"] .pd-cap:nth-child(n + 4) { grid-column: span 3; }
.pd-caps__grid[data-n="1"] .pd-cap { grid-column: 1 / -1; }
.pd-cap::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--p) 65%, transparent), transparent); opacity: 0.55; }
.pd-cap::after { content: ""; position: absolute; right: -30%; bottom: -70%; width: 90%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--p) 20%, transparent), transparent); opacity: 0; transition: opacity 0.5s var(--ease); }
.pd-cap:hover { border-color: color-mix(in srgb, var(--p) 34%, var(--line)); }
.pd-cap:hover::after { opacity: 1; }
.pd-cap__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--p-ink); border: 1px solid color-mix(in srgb, var(--p-ui) 45%, var(--line)); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--p) 16%, transparent), transparent 72%); }
.pd-cap__icon svg { width: 20px; height: 20px; }
.pd-cap h3 { margin-top: 24px; font-size: 1.1875rem; }
.pd-cap p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }
.pd-cap .pd-cap__link { margin-top: auto; padding-top: 20px; align-self: flex-start; font-size: 0.875rem; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; }
.pd-cap .pd-cap__link:hover { text-decoration-color: var(--p-ui); }

/* --------------------------------------------------------------------------
   Workflow rail
   -------------------------------------------------------------------------- */
/* min-content floor: a step column is never narrower than its longest word ("Auto-updates",
   kept whole by .pd-nowrap). */
.pd-steps { list-style: none; display: grid; grid-template-columns: repeat(var(--m), minmax(min-content, 1fr)) max-content; margin-top: clamp(40px, 5vw, 64px); }
.pd-step { position: relative; padding-right: 20px; }
.pd-step__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--p-ink);
  border: 1px solid color-mix(in srgb, var(--p-ui) 55%, var(--line)); background: var(--bg-2);
}
.section:not(.section--night) .pd-step__num { background: var(--bg); }
.pd-step::after {
  content: ""; position: absolute; top: 27px; left: 66px; right: 12px; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--p) 75%, transparent), color-mix(in srgb, var(--p) 18%, transparent));
}
.pd-step::before { content: ""; position: absolute; top: 24px; right: 10px; width: 7px; height: 7px; border-top: 1px solid color-mix(in srgb, var(--p) 45%, transparent); border-right: 1px solid color-mix(in srgb, var(--p) 45%, transparent); transform: rotate(45deg); }
.pd-step:last-child::after, .pd-step:last-child::before { display: none; }
.pd-step:last-child { padding-right: 0; }
.pd-step:last-child .pd-step__num { color: #fff; background: color-mix(in srgb, var(--p) 22%, var(--bg-2)); border-color: color-mix(in srgb, var(--p-ui) 80%, transparent); box-shadow: 0 0 44px -6px color-mix(in srgb, var(--p) 60%, transparent); }
.pd-step__label { display: block; margin-top: 24px; padding-right: 8px; font-family: var(--font-display); font-size: clamp(1.2rem, 0.9rem + 1vw, 1.8rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.pd-nowrap { white-space: nowrap; }
.pd-loop { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-2); }
.pd-loop svg { width: 18px; height: 18px; color: var(--p-ink); flex: none; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.pd-gallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.pd-gallery__head .pd-note { margin: 0 0 8px; }
.pd-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
/* data-n, not data-count: site.js treats [data-count] as a count-up number and would replace the grid's contents. */
.pd-gallery__grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.pd-gallery__grid > .pd-fig:nth-child(2) { margin-top: clamp(0px, 7vw, 104px); }
.pd-fig { margin: 0; }
.pd-fig .shot-wrap::before { opacity: 0.55; }
.pd-fig figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-top: 22px; font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); max-width: 40em; }
.pd-fig__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--p-ink); padding-top: 3px; }

/* --------------------------------------------------------------------------
   Values
   -------------------------------------------------------------------------- */
/* 5fr/7fr (single column at ≤1100px): room for "What Facility 360 stands for" beside the list. */
.pd-values__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pd-values__list { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px); padding-top: 8px; }
.pd-values__list li { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.pd-values__list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--p-ui); }
.pd-values__list h3 { font-size: 1.125rem; }
.pd-values__list p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Revenue pipeline
   -------------------------------------------------------------------------- */
.pd-pipe__wrap { margin-top: clamp(40px, 5vw, 64px); }
.pd-pipe__rail { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pd-pipe__node {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--pd-glass); isolation: isolate; overflow: visible;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pd-pipe__node:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -22px; width: 16px; height: 1px; background: var(--line-strong);
}
.pd-pipe__node:not(:last-child)::before {
  content: ""; position: absolute; top: calc(50% - 3px); right: -21px; width: 6px; height: 6px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); transform: rotate(45deg);
}
.pd-pipe__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pd-pipe__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.pd-pipe__node h3 { font-size: 1.15rem; }
.pd-pipe__node p { font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; }
.pd-pipe__here, .pd-pipe__go { margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pd-pipe__here { color: var(--p-ink); display: inline-flex; align-items: center; gap: 8px; }
.pd-pipe__here::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 25%, transparent); }
.pd-pipe__go { color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.pd-pipe__go svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.pd-pipe__cover { position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; }
.pd-pipe__cover:focus-visible { outline-offset: -3px; outline-color: var(--p-ui); }
.pd-pipe__node:not(.is-current):hover { border-color: color-mix(in srgb, var(--p) 40%, var(--line)); transform: translateY(-3px); }
.pd-pipe__node:not(.is-current):hover .pd-pipe__go { color: var(--text); }
.pd-pipe__node:not(.is-current):hover .pd-pipe__go svg { transform: translateX(3px); }
.pd-pipe__node.is-current {
  border-color: color-mix(in srgb, var(--p-ui) 70%, transparent);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--p) 14%, transparent), transparent 70%), var(--pd-glass);
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--p) 80%, transparent);
}
.pd-pipe__loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; margin-top: 4px; }
.pd-pipe__arc {
  grid-column: 3 / 5; grid-row: 1; justify-self: stretch; margin-inline: 22%; height: 30px; position: relative;
  border: 1px dashed color-mix(in srgb, var(--p-ui) 55%, transparent); border-top: 0; border-radius: 0 0 18px 18px;
}
.pd-pipe__arc::before { content: ""; position: absolute; left: -4px; top: -2px; width: 7px; height: 7px; border-left: 1px solid var(--p-ui); border-top: 1px solid var(--p-ui); transform: rotate(45deg); }
.pd-pipe__loop p { grid-column: 3 / 5; grid-row: 2; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; text-align: center; font-size: 0.875rem; color: var(--text-2); }
.pd-pipe__loop svg { width: 16px; height: 16px; color: var(--p-ink); flex: none; }

/* --------------------------------------------------------------------------
   Related
   -------------------------------------------------------------------------- */
.pd-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.pd-related__all { padding-bottom: 6px; }
/* Columns follow the card count (2-4) so short groups never leave empty slots. */
.pd-related__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4.4vw, 56px); }
.pd-related__grid[data-n="1"] { --cols: 1; max-width: 420px; }
.pd-related__grid[data-n="2"] { --cols: 2; }
.pd-related__grid[data-n="3"] { --cols: 3; }
/* Cards in a row share row tracks, so a label that wraps to two lines
   doesn't push one card's name below its neighbours'. Five in-flow children: mark row, label, name, text, link
   (four when the grid has no labels). */
@supports (grid-template-rows: subgrid) {
  .pd-related__grid .pcard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; }
  .pd-related__grid--nolabel .pcard { grid-row: span 4; }
  .pd-related__grid .pcard .link-arrow { justify-self: start; align-self: end; }
  .pd-related__grid .pcard__label { align-self: end; }
}

/* CTA band glows in the product colour */
.pd .cta-band::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--p) 24%, transparent), color-mix(in srgb, var(--p3) 10%, transparent) 55%, transparent); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .pd-hero__grid, .pd-hero--orbit .pd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); }
  .pd-hero__copy { max-width: 720px; }
  .pd-hero__shot .pd-note { text-align: left; }
  .pd-orbit { width: min(100%, 520px); }
  .pd-caps__grid .pd-cap, .pd-caps__grid[data-n] .pd-cap { grid-column: span 3; }
  .pd-caps__grid[data-n] .pd-cap:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pd-values__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-related__grid[data-n="4"] { --cols: 2; }
  .pd-pipe__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-pipe__node:nth-child(2)::after, .pd-pipe__node:nth-child(2)::before { display: none; }
  .pd-pipe__loop { grid-template-columns: minmax(0, 1fr); }
  .pd-pipe__arc { display: none; }
  .pd-pipe__loop p { grid-column: 1; grid-row: 1; justify-content: flex-start; text-align: left; margin-top: 20px; }
}
/* Without facts the heading sits in the 5fr column, too narrow for "What Mend does" below 1001px:
   stack from 1000px down, as the facts layout does from 860px. */
@media (max-width: 1000px) {
  .pd-overview__grid:not(.pd-overview__grid--facts) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "body" "facts"; }
  .pd-overview__grid:not(.pd-overview__grid--facts) .pd-overview__body { padding-top: 0; margin-top: 28px; }
}
@media (min-width: 1101px) { .pd-values__grid--wide-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 420px) { .pd-overview__head h2 { font-size: 1.7rem; } }
@media (max-width: 860px) {
  .pd-facts + .pd-proof { border-top: 0; padding-top: 0; margin-top: 28px; }
  .pd-overview__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-overview__grid { grid-template-rows: auto; grid-template-areas: "head" "body" "facts"; }
  .pd-overview__body { padding-top: 0; margin-top: 28px; }
  .pd-facts { margin-top: 40px; }
  .pd-related__grid[data-n="3"] { --cols: 2; }
  .pd-related__grid[data-n="3"] > :last-child { grid-column: 1 / -1; }
  .pd-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; align-items: center; padding: 0 0 28px; }
  .pd-step:last-child { padding-bottom: 0; }
  .pd-step::after { top: 54px; bottom: 0; left: 27px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--p-ui), color-mix(in srgb, var(--p-ui) 30%, transparent)); }
  .pd-step::before { display: none; }
  .pd-step__label { margin-top: 0; }
  .pd-gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery__grid > .pd-fig:nth-child(2) { margin-top: 0; }
  .pd-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pd-caps__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pd-cap { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 22px 20px; }
  .pd-cap__icon { width: 42px; height: 42px; }
  .pd-cap h3 { margin-top: 0; font-size: 1.125rem; }
  .pd-cap p, .pd-cap .pd-cap__link { grid-column: 1 / -1; }
  .pd-cap p { margin-top: 14px; }
  .pd-caps__grid .pd-cap, .pd-caps__grid[data-n] .pd-cap, .pd-caps__grid[data-n="5"] .pd-cap:nth-child(n + 4), .pd-caps__grid[data-n] .pd-cap:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pd-values__list { grid-template-columns: minmax(0, 1fr); }
  .pd-related__grid[data-n] { --cols: 1; }
  .pd-pipe__rail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pd-pipe__node::after, .pd-pipe__node::before { display: none; }
  .pd-pipe__node { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 18px; }
  .pd-pipe__top { display: contents; }
  .pd-pipe__node .pmark { grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; }
  .pd-pipe__node h3 { grid-column: 2; grid-row: 1; font-size: 1.05rem; }
  .pd-pipe__node p { grid-column: 2; grid-row: 2; font-size: 0.875rem; }
  .pd-pipe__n { grid-column: 3; grid-row: 1; justify-self: end; }
  .pd-pipe__here, .pd-pipe__go { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; padding: 0; }
  .pd-pipe__here { font-size: 0.625rem; letter-spacing: 0.08em; }
  .pd-pipe__go { font-size: 0; }
  .pd-pipe__go svg { width: 16px; height: 16px; }
  .pd-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* Orbit: rings above, capabilities as a wrapped list below */
  .pd-orbit { width: 100%; }
  .pd-orbit__stage { width: min(100%, 320px); margin-inline: auto; }
  .pd-orbit__chips { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
  .pd-orbit__chips li { position: static; transform: none; max-width: 100%; }
  .pd-lockup__name { letter-spacing: 0.24em; }
}