/* The four Product pages. Layout and the product's own pictures only: headings, body type, colour
   and section rhythm come from the shared system (`page-hero`, `story-section`, `story-heading`,
   `mono`) and from industry.css (comparison, bands, glass windows, review marks). Pictures of the
   product may round their corners because they show the product's interface; the page around
   them keeps square planes. */

/* ---- heroes ---- */
.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
.pd-hero-wide,
.pd-hero-text {
  grid-template-columns: minmax(0, 1fr);
}
.pd-hero-wide .pd-hero-copy,
.pd-hero-text .pd-hero-copy {
  max-width: 820px;
}
.pd-hero h1 {
  text-wrap: balance;
}
.pd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
}
/* The window and the Tower share one grid cell, so the stack is as tall as the window needs and
   neither picture spills over the copy or the figures below (test plan, Packet PHS). */
.pd-hero-stack {
  display: grid;
}
.pd-hero-stack > * {
  grid-area: 1 / 1;
}
.pd-hero-stack .pd-window-launcher-mini {
  justify-self: end;
  width: 82%;
  /* The tilt lifts and drops the corners by sin(2.5deg) x half the width: at most 2.2% of the
     stack's width, which a percentage margin measures. */
  margin-block: 2.2%;
  transform: rotate(-2.5deg);
  opacity: 0.88;
}
.pd-hero-stack .pd-hero-machine {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: start;
  width: 46%;
  height: auto;
  margin: 0 0 16% 2%;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
}
.pd-hero-machine-wrap {
  display: grid;
  place-items: center;
}
.pd-hero-machine-wrap .pd-hero-machine {
  width: min(420px, 80%);
  height: auto;
}
.pd-hero-wide > .pd-window {
  margin-top: var(--space-md);
}
.pd-caption {
  margin: 12px 0 0;
  color: var(--lp-faint);
}

/* ---- numbers ---- */
.pd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.pd-stats > div {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
}
.pd-stats > div + div {
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-rule);
}
.pd-stats strong,
.pd-stat-tiles strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.pd-result strong,
.pd-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--color-ink);
}
.pd-stats span,
.pd-stat-tiles span,
.pd-facts span {
  display: block;
  margin-top: 8px;
  color: var(--color-muted);
}

/* ---- three layers ---- */
.pd-layers {
  display: grid;
  gap: 10px;
}
.pd-layer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 6px var(--space-xl);
  align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
  text-decoration: none;
  transition:
    border-color var(--dur-feedback) var(--ease-out),
    background var(--dur-feedback) var(--ease-out);
}
.pd-layer:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-raised);
}
.pd-layer > .mono {
  grid-column: 1;
  color: var(--color-accent);
}
.pd-layer strong {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.pd-layer p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--color-body);
}
.pd-layer-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
  white-space: nowrap;
}
.pd-layer .pd-layer-go {
  grid-column: 3;
  grid-row: 1 / span 2;
}
/* The slabs widen toward the base, the way the system is built up. */
.pd-layer-1 {
  margin-inline: 6%;
}
.pd-layer-2 {
  margin-inline: 3%;
}
.pd-layer-3 {
  border-color: rgba(74, 163, 255, 0.4);
}

/* ---- a flow of steps: numbered stops on one line, the step a person takes lit ---- */
.pd-flow {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.pd-flow li {
  position: relative;
  padding: 26px var(--space-sm) 0 0;
  color: var(--color-body);
  counter-increment: flow;
}
.pd-flow li::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-rule-strong);
}
.pd-flow li::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper);
}
.pd-flow li:nth-last-child(2) {
  color: var(--color-ink);
}
.pd-flow li:nth-last-child(2)::after {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(74, 163, 255, 0.18);
}

/* ---- tiles ---- */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.pd-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pd-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pd-tile {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.pd-tile-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  border: 1px solid rgba(74, 163, 255, 0.35);
  background: rgba(74, 163, 255, 0.08);
  color: var(--color-accent);
}
.pd-tile > .mono {
  display: block;
  margin-bottom: 10px;
  color: var(--lp-faint);
}
body main .pd-tile h3 {
  margin: 0;
}
body main .pd-tile p {
  margin: 10px 0 0;
  color: var(--color-muted);
}
.pd-build-card .pd-proof,
body main .pd-build-card .pd-proof {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
  color: var(--color-accent);
}

/* ---- timeline ---- */
.pd-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-timeline li {
  position: relative;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule-strong);
}
.pd-timeline li::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}
.pd-timeline .mono {
  display: block;
  color: var(--color-accent);
}
body main .pd-timeline h3 {
  margin: 10px 0 0;
}
body main .pd-timeline p {
  margin: 10px 0 0;
  color: var(--color-muted);
}

/* ---- results and prices ---- */
.pd-result-cards,
.pd-price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.pd-price-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pd-result,
.pd-price {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  text-decoration: none;
}
.pd-result:hover {
  border-color: var(--color-rule-strong);
  background: var(--color-surface-raised);
}
.pd-result > .mono,
.pd-price > .mono {
  color: var(--color-accent);
}
body main .pd-result p,
body main .pd-price p {
  margin: 0;
  color: var(--color-muted);
}
.pd-result .pd-layer-go {
  margin-top: auto;
  padding-top: var(--space-sm);
}
body main .pd-price h3 {
  margin: 0;
}
.pd-price-notes {
  display: grid;
  gap: 10px;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-body);
}
.pd-price-notes li::before,
.pd-ticks li::before {
  content: '✓';
  content: '✓' / '';
  margin-right: 10px;
  color: var(--color-accent);
}
.pd-pricing .text-link,
.pd-support .text-link,
.ind-control > .text-link {
  margin-top: var(--space-md);
}

/* ---- workspace catalog ---- */
.pd-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: 96px;
}
.pd-catalog-head .mono {
  color: var(--color-accent);
}
body main .pd-catalog-head h3 {
  margin: 8px 0 0;
}
.pd-catalog-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.pd-app-card {
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.pd-app-card.is-custom {
  border-color: rgba(74, 163, 255, 0.35);
}
body main .pd-app-card h4 {
  margin: 12px 0 0;
  font-size: 17px;
  color: var(--color-ink);
}
.pd-app-card h4 i,
.pd-app i {
  margin-left: 6px;
  font-style: normal;
  font-size: 10px;
  color: var(--color-accent);
}
body main .pd-app-card p {
  margin: 8px 0 0;
  color: var(--color-muted);
}
.pd-app-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(74, 163, 255, 0.12);
  color: var(--color-accent);
}
.pd-catalog-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-body);
}
.pd-catalog-note .text-link {
  margin-left: 8px;
}

/* ---- side by side: copy and a product view ---- */
.pd-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
}
.pd-split.is-flipped {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.pd-split-tight {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.pd-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-features li {
  padding-top: 14px;
  border-top: 1px solid var(--color-rule);
}
body main .pd-features h3 {
  margin: 0;
  font-size: 17px;
}
body main .pd-features p {
  margin: 4px 0 0;
  color: var(--color-muted);
}
.pd-facts,
.pd-stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}
.pd-stat-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--color-rule);
}
.pd-stat-tiles > div {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
  border-bottom: 1px solid var(--color-rule);
}
.pd-file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.pd-file-chips li {
  padding: 8px 12px;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-body);
}

/* ---- hardware ---- */
.pd-configs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  align-items: stretch;
}
.pd-config {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.pd-config.is-featured {
  border: 1px solid rgba(74, 163, 255, 0.55);
  border-top: 3px solid var(--color-accent);
  background: linear-gradient(180deg, rgba(74, 163, 255, 0.08), var(--color-surface) 60%);
}
.pd-config-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 8px;
  border: 1px solid rgba(74, 163, 255, 0.5);
  color: var(--color-accent);
}
body main .pd-config h3 {
  margin: 0;
}
body main .pd-config .pd-config-fit {
  margin: 8px 0 0;
  color: var(--color-muted);
}
.pd-config ul {
  display: grid;
  gap: 10px;
  margin: var(--space-md) 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
  color: var(--color-body);
}
.pd-config li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 2px 0;
  background: var(--color-accent);
}
.pd-config .pd-config-quote {
  margin-top: auto;
  padding-top: var(--space-sm);
}
.pd-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pd-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body main .pd-two p {
  margin: 0;
  color: var(--color-body);
}
#compare {
  margin-top: var(--space-xl);
}
.pd-spec-table th[scope='row'] {
  white-space: nowrap;
}
.pd-inside {
  margin-top: 0;
}
.pd-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
}
.pd-steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-md);
  padding: 0 0 var(--space-lg);
  border-left: 1px solid var(--color-rule-strong);
}
.pd-steps li:last-child {
  border-left-color: transparent;
}
.pd-steps .mono {
  margin-left: -14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-accent);
  background: var(--color-paper);
  color: var(--color-accent);
}
body main .pd-steps h3 {
  margin: 2px 0 0;
}
body main .pd-steps p {
  margin: 8px 0 0;
  color: var(--color-muted);
}
.pd-note {
  max-width: 640px;
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
}
.pd-note b {
  color: var(--color-ink);
}
body main .pd-note p {
  margin: 6px 0 0;
  color: var(--color-muted);
}

/* ---- custom workflows ---- */
.pd-coverage {
  margin: 0;
}
.pd-coverage-bar {
  display: grid;
  grid-template-columns: 40fr 35fr 25fr;
  height: 44px;
  border: 1px solid var(--color-rule-strong);
}
.pd-coverage-bar span {
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.pd-coverage-bar b {
  font-weight: 500;
}
.is-ai {
  --tone: var(--color-accent);
}
.is-expert {
  --tone: #8b9cff;
}
.is-open {
  --tone: #5b6270;
}
.pd-coverage-bar span {
  background: color-mix(in srgb, var(--tone) 30%, transparent);
  color: var(--color-ink);
}
.pd-coverage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--space-lg);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-body);
}
.pd-coverage-legend li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  background: var(--tone);
}
body main .pd-proof-line {
  margin: var(--space-lg) 0 0;
  color: var(--color-body);
}
.pd-ticks {
  display: grid;
  gap: 8px;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-body);
}
.pd-share {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.pd-share > div {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.pd-share .mono {
  color: var(--color-accent);
}
.pd-share ul {
  display: grid;
  gap: 8px;
  margin: var(--space-sm) 0 0;
  padding-left: 18px;
  color: var(--color-body);
}

/* ---- pictures of the product (inside the glass window) ---- */
.pd-window {
  margin: 0;
}
.pd-launcher {
  padding: 22px 22px 24px;
}
.pd-launcher-hello {
  margin: 0;
  font-size: 13px;
  color: var(--lp-faint);
}
.pd-launcher-title {
  margin: 4px 0 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.pd-launcher-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 10px;
  background: rgba(10, 13, 20, 0.5);
  font-size: 13px;
  color: var(--lp-faint);
}
.pd-launcher-search kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}
.pd-chips span {
  padding: 5px 10px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 999px;
  font-size: 12px;
  color: var(--color-body);
}
.pd-chips .is-on {
  border-color: var(--color-accent);
  background: rgba(74, 163, 255, 0.14);
  color: var(--color-ink);
}
.pd-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pd-launcher.is-compact .pd-apps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pd-app {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 10px;
  background: rgba(150, 170, 210, 0.04);
}
.pd-app.is-custom {
  border-color: rgba(74, 163, 255, 0.35);
}
.pd-app .pd-app-icon {
  grid-row: span 2;
}
.pd-app b {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}
.pd-app small {
  grid-column: 2;
  font-size: 11px;
  line-height: 1.4;
  color: var(--lp-faint);
}
.pd-app i {
  grid-column: 2;
  margin: 0;
}

.pd-meeting {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.pd-transcript {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--lp-glass-rule);
}
.pd-line-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--lp-faint);
}
.pd-line-head b {
  color: var(--color-ink);
}
.pd-line p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--color-body);
}
.pd-line .pd-line-translated {
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(74, 163, 255, 0.1);
  color: var(--color-ink);
}
/* A line spoken in the reader's language needs no translation under it. */
.pd-line[data-said='en'] .pd-line-translated:lang(en),
.pd-line[data-said='es'] .pd-line-translated:lang(es) {
  display: none;
}
.pd-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-accent);
}
.pd-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-error);
}
.pd-meeting-panel {
  padding: 18px;
  font-size: 13px;
  color: var(--color-ink);
}
.pd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0;
  font-size: 10.5px;
  color: var(--lp-faint);
}
.pd-tabs span {
  padding: 3px 7px;
  border-radius: 4px;
}
.pd-tabs .is-on {
  background: rgba(74, 163, 255, 0.16);
  color: var(--color-ink);
}
.pd-meeting-panel ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-meeting-panel li {
  padding: 9px 10px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
}
.pd-meeting-panel li small {
  display: block;
  margin-top: 3px;
  color: var(--lp-faint);
}

.pd-contract {
  display: grid;
  gap: 14px;
  padding: 20px;
}
.pd-drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed var(--lp-glass-rule);
  border-radius: 10px;
  color: var(--color-body);
  font-size: 13px;
}
.pd-drop small {
  color: var(--lp-faint);
}
.pd-option > .mono {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  color: var(--lp-faint);
}
.pd-option div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-option div span {
  padding: 8px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--color-body);
}
.pd-option div .is-on {
  border-color: var(--color-accent);
  background: rgba(74, 163, 255, 0.14);
  color: var(--color-ink);
}
.pd-contract-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--lp-glass-rule);
  font-size: 12.5px;
  color: var(--color-ink);
}
.pd-contract-result > span:first-child {
  margin-right: auto;
  font-family: var(--font-mono);
}
.pd-risk {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
}
.pd-risk.is-high {
  background: rgba(241, 175, 152, 0.18);
  color: var(--color-error);
}
.pd-risk.is-medium {
  background: rgba(223, 189, 135, 0.16);
  color: var(--color-warning);
}
.pd-risk.is-low {
  background: rgba(153, 207, 177, 0.16);
  color: var(--color-positive);
}

.pd-audit td:first-child {
  font-family: var(--font-mono);
}
/* In a narrow window the usage records read as the shared cards (industry.css), arranged for their four
   columns: the time and the user on one line, then the app and the use across the card. */
@container ind-table (max-width: 599px) {
  .ind-mock-table.pd-audit td:nth-child(1) {
    grid-area: 1 / 1;
  }
  .ind-mock-table.pd-audit td:nth-child(2) {
    grid-area: 1 / 2;
  }
  .ind-mock-table.pd-audit td:nth-child(3) {
    grid-area: 2 / 1 / auto / -1;
  }
  .ind-mock-table.pd-audit td:nth-child(4) {
    grid-area: 3 / 1 / auto / -1;
  }
}

.pd-erp {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.pd-erp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-erp-steps li {
  padding: 6px 10px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 999px;
  font-size: 12px;
  color: var(--lp-faint);
}
.pd-erp-steps .is-done {
  color: var(--color-body);
}
.pd-erp-steps .is-done::before {
  content: '✓ ';
  content: '✓ ' / '';
  color: var(--color-positive);
}
.pd-erp-steps .is-current {
  border-color: var(--color-accent);
  background: rgba(74, 163, 255, 0.14);
  color: var(--color-ink);
}
.pd-erp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pd-erp-stats div {
  padding: 10px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
}
.pd-erp-stats b {
  display: block;
  font-size: 22px;
  color: var(--color-ink);
}
.pd-erp-stats span {
  font-size: 11.5px;
  color: var(--color-muted);
}

/* ---- workspace: hero, numbers, assistant, catalog, admin rows ---- */
.pd-hero-workspace {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  padding-bottom: var(--space-xl);
}
.pd-hero-custom {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.pd-hero-view .pd-window {
  margin: 0;
}
.pd-hero-view .pd-launcher.is-compact .pd-apps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pd-perf {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: 130px;
}
body main .pd-perf-head h2 {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}
body main .pd-perf-head p {
  margin: 14px 0 0;
  color: var(--color-muted);
}
.pd-perf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pd-perf-stats > div {
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-left: 1px solid var(--color-rule);
}
.pd-perf-stats > div:nth-child(-n + 3) {
  border-bottom: 1px solid var(--color-rule);
}
.pd-perf-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.pd-perf-stats span {
  display: block;
  margin-top: 6px;
  color: var(--color-muted);
}
.pd-heading-split {
  margin-bottom: var(--space-lg);
}
.pd-heading-split > p {
  color: var(--color-body);
}
/* The three conversations sit side by side, flatter than on their own: one screen holds them. */
body.page-inner main .pd-tasks {
  gap: var(--space-md);
}
body.page-inner main .pd-tasks article {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  border-top: 0;
}
body.page-inner main .pd-tasks article .pm-case {
  margin-bottom: 0;
}
.pd-tasks .pm-avatar {
  display: none;
}
.pd-tasks .pm-reply {
  gap: 0;
}
.pd-tasks .pm-case-body {
  gap: 12px;
  padding: 14px 16px 16px;
}
.pd-tasks .pm-diff-row {
  padding-block: 6px;
}
body main .pd-tasks h3 {
  order: 0;
  margin: 0;
}
body main .pd-tasks article > p {
  margin: 6px 0 var(--space-sm);
  color: var(--color-muted);
}
.pd-split-even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.pd-split-even.is-flipped {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.pd-split-copy .story-heading {
  margin-bottom: var(--space-md);
}
.pd-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.pd-cat {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  scroll-margin-top: 130px;
}
.pd-cat.is-custom {
  border-color: rgba(74, 163, 255, 0.35);
}
.pd-cat > .mono {
  display: block;
  margin-bottom: 4px;
  color: var(--color-accent);
}
.pd-cat > ul:not(.pd-file-chips) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-cat > ul:not(.pd-file-chips) li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-rule);
}
.pd-cat > ul li:first-child {
  border-top: 0;
}
body main .pd-cat h4 {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--color-ink);
}
.pd-cat h4 i {
  margin-left: 6px;
  font-style: normal;
  font-size: 10px;
  color: var(--color-accent);
}
body main .pd-cat p {
  margin: 4px 0 0;
  color: var(--color-muted);
}
.pd-cat > .text-link {
  margin: 4px 0 8px;
}
body main .pd-cat-files .pd-file-chips {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0;
}
body main .pd-cat-files .pd-file-chips li {
  display: block;
  width: auto;
}
.pd-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-rows li {
  display: grid;
  grid-template-columns: 30px minmax(0, 11fr) minmax(0, 20fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--color-rule);
}
.pd-rows li:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.pd-rows .pd-app-icon {
  align-self: center;
}
body main .pd-rows h3 {
  margin: 0;
  font-size: 16px;
}
body main .pd-rows p {
  margin: 0;
  color: var(--color-muted);
}

/* ---- control: the commitment, four points, one quiet line ---- */
.pd-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-2xl);
  align-items: start;
}
.pd-control-head .story-heading {
  margin-bottom: 0;
}
.pd-control-head .story-heading h2 {
  font-size: clamp(30px, 2.8vw, 40px);
}
.pd-control-head .story-heading > p {
  color: var(--color-ink);
}
.pd-control-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-control-points li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-sm);
}
.pd-control-points .pd-tile-icon {
  margin: 0;
}
body main .pd-control-points h3 {
  margin: 0;
  font-size: 17px;
}
body main .pd-control-points p {
  margin: 6px 0 0;
  color: var(--color-muted);
}
.pd-control-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
body main .pd-control-foot p {
  margin: 0;
  color: var(--lp-faint);
}

/* ---- hardware: sizing row, spec strip, compact table, steps in a row ---- */
.pd-sizing-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
body main .pd-sizing-row > p {
  margin: 4px 0 0;
  color: var(--color-accent);
}
.pd-sizing-row ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
body main .pd-sizing-row h3 {
  margin: 0;
  font-size: 16px;
}
body main .pd-sizing-row p {
  margin: 4px 0 0;
  color: var(--color-muted);
}
/* Matrix in a company IT room beside the four things that size a system, as on the earlier
   /matrix/ page: the picture on the left and the four as ruled rows on the right; stacked, with
   the four back in their grid, on narrower screens. The figure keeps its solutions.css styles. */
.pd-sizing-row.has-picture {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
body main .pd-sizing-list > p {
  color: var(--color-accent);
}
.pd-sizing-row.has-picture ul {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-sm);
}
.pd-sizing-row.has-picture li {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-rule);
}
@media (max-width: 1023px) {
  .pd-sizing-row.has-picture {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .pd-sizing-row.has-picture ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
  .pd-sizing-row.has-picture li {
    padding: 0;
    border-top: 0;
  }
}
@media (max-width: 767px) {
  .pd-sizing-row.has-picture ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pd-configs-section .overview-boundary {
  margin-top: var(--space-md);
}
.pd-spec-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.pd-spec-strip li {
  padding: var(--space-md) var(--space-sm) var(--space-md) 0;
}
.pd-spec-strip li + li {
  padding-left: var(--space-sm);
  border-left: 1px solid var(--color-rule);
}
.pd-spec-strip .mono {
  color: var(--lp-faint);
}
.pd-spec-strip strong {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}
body main .pd-spec-strip p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-muted);
}
#compare {
  margin-top: var(--space-lg);
}
.pd-spec-table :is(th, td) {
  padding: 11px var(--space-md);
}
.pd-steps-row li::before {
  top: -5px;
}
.pd-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.pd-notes .pd-note {
  max-width: none;
  margin: 0;
}
.pd-support-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-support-row .pd-tile-icon {
  margin-bottom: var(--space-sm);
}
body main .pd-support-row h3 {
  margin: 0;
  font-size: 18px;
}
body main .pd-support-row p {
  margin: 6px 0 0;
  color: var(--color-muted);
}

/* ---- custom workflows: two examples side by side ---- */
.pd-example-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
body main .pd-example-pair h3 {
  margin: 0;
}
body main .pd-example-pair h3 + p {
  margin: 4px 0 12px;
  color: var(--color-muted);
}
.pd-where ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pd-project .pd-share {
  margin-top: var(--space-lg);
}

/* ---- what every Matrix includes: an icon list, not boxes ---- */
.pd-included .pd-grid {
  gap: var(--space-lg) var(--space-xl);
}
.pd-included .pd-tile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 var(--space-sm);
  padding: 0;
  border: 0;
  background: none;
}
.pd-included .pd-tile-icon {
  grid-row: span 2;
  margin: 0;
}
body main .pd-included .pd-tile h3 {
  align-self: center;
  font-size: 18px;
}
body main .pd-included .pd-tile p {
  grid-column: 2;
  margin-top: 4px;
}
.pd-included .overview-boundary {
  margin-top: var(--space-lg);
}

/* ---- custom workflows: levers, results, rule library ---- */
.pd-levers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.pd-lever {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule-strong);
  border-top: 2px solid var(--color-accent);
  background: var(--color-surface);
}
.pd-lever > .mono {
  color: var(--color-accent);
}
body main .pd-lever h3 {
  margin: 10px 0 0;
}
body main .pd-lever p {
  margin: 10px 0 0;
  color: var(--color-muted);
}
body main .pd-lever .pd-proof {
  margin-top: auto;
  padding-top: var(--space-md);
  color: var(--color-ink);
}
.pd-lever .text-link {
  margin-top: 12px;
}
.pd-results-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
body main .pd-results-strip > p {
  margin: 0;
  color: var(--color-accent);
}
.pd-results-strip ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-results-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.pd-results-strip span {
  display: block;
  margin-top: 8px;
  color: var(--color-muted);
}
.pd-results-strip small {
  display: block;
  margin-top: 8px;
  color: var(--lp-faint);
}
.pd-project .pd-share {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pd-project .overview-boundary {
  margin-top: var(--space-md);
}
.pd-rules .overview-boundary {
  margin-top: 12px;
}
.pd-rulelib {
  display: grid;
  gap: 18px;
  padding: 20px;
}
.pd-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-stepper li {
  position: relative;
  padding-top: 30px;
  padding-right: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-body);
}
.pd-stepper li::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lp-glass-rule);
}
.pd-stepper i {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 50%;
  background: #0d121a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  color: var(--lp-faint);
}
.pd-stepper .is-ai {
  color: var(--color-ink);
}
.pd-stepper .is-ai i {
  border-color: var(--color-accent);
  background: rgba(74, 163, 255, 0.2);
  color: var(--color-ink);
}
.pd-rule-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-rule-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
}
.pd-rule-rows b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}
.pd-rule-rows small {
  font-size: 10.5px;
  color: var(--lp-faint);
}
.pd-rule-rows em {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  font-size: 11.5px;
  font-style: normal;
  color: var(--color-ink);
}
.pd-rulelib .pd-coverage-bar {
  height: 34px;
}
.pd-rulelib .pd-coverage-legend {
  font-size: 11px;
}

/* ---- Look inside: the model opens on its own; only its controls stay in view ---- */
.pd-inside .ws-stage-bottom {
  display: none;
}
.pd-inside #scan-instructions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pd-inside .ws-toolbar {
  justify-content: flex-end;
}
.pd-inside .workstation-scan:not([data-model-state='error']) .ws-status-row {
  display: none;
}

/* ---- a call to action inside a section, as one band ---- */
.pd-cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid rgba(74, 163, 255, 0.35);
  background: linear-gradient(110deg, rgba(74, 163, 255, 0.12), rgba(74, 163, 255, 0.02) 70%);
}
.pd-cta-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
body main .pd-cta-strip p {
  max-width: 640px;
  margin: 6px 0 0;
  color: var(--color-body);
}
/* The two examples end on one line: each view fills its column. */
.pd-example-pair > div {
  display: flex;
  flex-direction: column;
}
.pd-example-pair > div > .pm {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.pd-example-pair > div > .pm > .pm-frame {
  flex: 1;
}
.pd-example-pair > div > .pm .pm-window {
  height: 100%;
}
.pd-examples > .pd-caption {
  margin-top: var(--space-sm);
}

/* ---- hero facts: three short facts with an icon each, under the actions ---- */
.pd-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}
.pd-hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--color-ink);
}
.pd-hero-facts svg {
  flex: none;
  color: var(--color-accent);
}
/* ---- pricing: each card ends on its own quote action ---- */
.pd-price .pd-cta {
  align-self: flex-start;
  margin-top: auto;
}
body main .pd-price > p {
  margin-bottom: var(--space-md);
}
.pd-heading-split > div > .text-link {
  margin-top: 12px;
}
body main .pd-facts-label {
  margin: var(--space-md) 0 0;
  color: var(--lp-faint);
}
.pd-facts-label + .pd-facts {
  margin-top: 12px;
}

/* ---- the in-section call to action: brand-tinted, borderless; the white button stays the
   page's one main action (hero and header) ---- */
.pd-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(74, 163, 255, 0.16);
  color: #9ccbff;
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--dur-feedback) var(--ease-out),
    color var(--dur-feedback) var(--ease-out);
}
.pd-cta:hover {
  background: rgba(74, 163, 255, 0.26);
  color: var(--color-ink);
}
.pd-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.pd-cta svg {
  transition: transform var(--dur-feedback) var(--ease-out);
}
.pd-cta:hover svg {
  transform: translateX(3px);
}

/* ---- narrow screens ---- */
@media (max-width: 1023px) {
  .pd-hero,
  .pd-split,
  .pd-split.is-flipped,
  .pd-split-tight {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-split.is-flipped .pd-split-view {
    order: 2;
  }
  .pd-hero-stack {
    justify-self: center;
    width: min(100%, 640px);
  }
  .pd-stats,
  .pd-grid-4,
  .pd-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-stats > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .pd-timeline,
  .pd-grid,
  .pd-result-cards,
  .pd-configs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pd-layer {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-layer p,
  .pd-layer .pd-layer-go {
    grid-column: 1;
    grid-row: auto;
  }
  .pd-catalog-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .pd-perf,
  .pd-control,
  .pd-example-pair,
  .pd-split-even,
  .pd-split-even.is-flipped {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-cats,
  .pd-support-row,
  .pd-sizing-row ul,
  .pd-results-strip ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-results-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }
  .pd-levers,
  .pd-project .pd-share {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-sizing-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }
  .pd-spec-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pd-spec-strip li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
  .pd-spec-strip li:nth-child(-n + 3) {
    border-bottom: 1px solid var(--color-rule);
  }
}

@media (max-width: 767px) {
  .pd-timeline,
  .pd-grid,
  .pd-grid-2,
  .pd-grid-4,
  .pd-four,
  .pd-two,
  .pd-result-cards,
  .pd-price-cards,
  .pd-configs,
  .pd-share,
  .pd-meeting,
  .pd-stat-tiles,
  .pd-cats,
  .pd-control-points {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-perf-stats,
  .pd-spec-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-spec-strip li,
  .pd-spec-strip li + li {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .pd-notes,
  .pd-support-row,
  .pd-sizing-row ul,
  .pd-where ul {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The specification table keeps its columns and scrolls sideways in its own box. */
  .pd-spec-table :is(table, tbody, tr, th, td) {
    display: revert;
  }
  .pd-spec-table table {
    min-width: 600px;
    border: 1px solid var(--color-rule);
  }
  .pd-spec-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  .pd-spec-table tbody tr {
    border: 0;
  }
  .pd-spec-table tbody tr + tr {
    margin-top: 0;
  }
  .pd-spec-table :is(th, td) {
    padding: 10px 12px;
    border-right: 1px solid var(--color-rule);
  }
  .pd-spec-table .ind-why-label {
    display: none;
  }
  .pd-perf-stats > div {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .pd-rows li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px 14px;
  }
  .pd-rows li p {
    grid-column: 2;
  }
  .pd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-apps,
  .pd-launcher.is-compact .pd-apps,
  .pd-erp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-transcript {
    border-right: 0;
    border-bottom: 1px solid var(--lp-glass-rule);
  }
  .pd-layer-1,
  .pd-layer-2 {
    margin-inline: 0;
  }
  .pd-hero-stack .pd-window-launcher-mini {
    width: 100%;
  }
  .pd-flow {
    grid-auto-flow: row;
    gap: 0;
  }
  .pd-flow li {
    padding: 0 0 14px 26px;
  }
  .pd-flow li::before {
    top: 0;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .pd-flow li::after {
    top: 4px;
  }
  .pd-stepper {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .pd-stepper li {
    padding: 2px 0 0 32px;
    min-height: 22px;
  }
  .pd-stepper li::before {
    display: none;
  }
  .pd-rule-rows li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* A workflow's price is agreed with its scope: one line and the way to a quote. */
body.page-inner main .pd-quote-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
  color: var(--color-body);
}