:root {
  --pub-page-width: 210mm;
  --pub-page-height: 297mm;
  --pub-margin-inner: 22mm;
  --pub-margin-outer: 18mm;
  --pub-margin-top: 20mm;
  --pub-margin-bottom: 23mm;
  --pub-mobile-margin: 22px;
  --pub-grid-columns: 12;
  --pub-grid-gap: 4mm;
  --pub-grid-gap-mobile: 22px;
  --pub-hairline: 1px;
  --pub-weight-display: 300;
  --pub-weight-text: 400;
  --pub-weight-technical: 500;
  --pub-type-label: 7.5px;
  --pub-type-small: 9px;
  --pub-type-body: 10.5px;
  --pub-type-subhead: 13px;
  --pub-type-lead: 17px;
  --pub-type-title: 31px;
  --pub-type-cover: 50px;
  --pub-media-photo-height: 118mm;
  --pub-system-mark-size: 24mm;
  --pub-media-gap: 8mm;
}

body[data-publication] {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: var(--pub-weight-text);
}

.publication-languages {
  position: fixed;
  z-index: 140;
  top: 16px;
  right: 18px;
  display: flex;
  gap: 9px;
  font: 500 8px/1.2 "Space Grotesk", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.publication-languages a {
  border-bottom: .5px solid transparent;
  color: #fff;
  text-decoration: none;
}

.publication-languages a[aria-current="page"] {
  border-bottom-color: currentColor;
}

@media screen and (max-width: 900px) {
  .publication-languages {
    top: 12px;
    right: 12px;
    gap: 7px;
    font-size: 7px;
  }
}

body[data-publication] .sheet,
body[data-publication] .page {
  width: var(--pub-page-width);
  height: var(--pub-page-height);
  min-height: var(--pub-page-height);
}

body[data-publication="sales-playbook"] .sheet:not(.cover):not(.toolkit-open),
body[data-publication="sales-playbook"] .sheet:nth-child(even):not(.cover):not(.toolkit-open) {
  padding-top: var(--pub-margin-top);
  padding-bottom: var(--pub-margin-bottom);
}

body[data-publication="sales-playbook"] .sheet:nth-child(odd):not(.cover):not(.toolkit-open) {
  padding-left: var(--pub-margin-inner);
  padding-right: var(--pub-margin-outer);
}

body[data-publication="sales-playbook"] .sheet:nth-child(even):not(.cover):not(.toolkit-open) {
  padding-left: var(--pub-margin-outer);
  padding-right: var(--pub-margin-inner);
}

body[data-publication="system-family"] .page:nth-child(odd):not(.hero) {
  padding: var(--pub-margin-top) var(--pub-margin-outer) var(--pub-margin-bottom) var(--pub-margin-inner);
}

body[data-publication="system-family"] .page:nth-child(even):not(.hero) {
  padding: var(--pub-margin-top) var(--pub-margin-inner) var(--pub-margin-bottom) var(--pub-margin-outer);
}

body[data-publication] .section-label,
body[data-publication] .kicker,
body[data-publication] .eyebrow,
body[data-publication] .inline-meta,
body[data-publication] .folio,
body[data-publication] .outcome-grid b,
body[data-publication] .family-card b,
body[data-publication] .stage-row b {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: var(--pub-type-label);
  font-weight: var(--pub-weight-technical);
  line-height: 1.3;
}

body[data-publication] p,
body[data-publication] li,
body[data-publication] dd,
body[data-publication] td,
body[data-publication] th {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: var(--pub-weight-text);
}

body[data-publication="sales-playbook"] h2,
body[data-publication="sales-playbook"] h3 {
  font-family: "Space Grotesk", Arial, sans-serif;
}

body[data-publication="system-family"] h2,
body[data-publication="system-family"] .manifest-quote,
body[data-publication="system-family"] .family-card h3,
body[data-publication="system-family"] .stage-row h3,
body[data-publication="system-family"] .system-register strong {
  font-family: Montserrat, Arial, sans-serif;
}

body[data-publication="system-family"] h3 {
  font-family: "Space Grotesk", Arial, sans-serif;
}

body[data-publication^="system-"] .function-effect-layout {
  display: grid;
  grid-template-columns: repeat(var(--pub-grid-columns), minmax(0, 1fr));
  column-gap: var(--pub-grid-gap);
  height: 100%;
}

body[data-publication^="system-"] .function-effect-intro {
  grid-column: 1 / span 4;
}

body[data-publication^="system-"] .function-effect-intro .lead {
  margin-top: 8mm;
}

body[data-publication^="system-"] .function-effect-list {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7mm;
  min-width: 0;
}

body[data-publication^="system-"] .function-effect-card {
  padding-top: 4mm;
  border-top: var(--pub-hairline) solid currentColor;
}

body[data-publication^="system-"] .function-effect-card > header {
  display: grid;
  grid-template-columns: 9mm minmax(0, 1fr);
  gap: 3mm;
  align-items: baseline;
}

body[data-publication^="system-"] .function-effect-card > header span,
body[data-publication^="system-"] .function-effect-card dt {
  color: #888;
  font-size: var(--pub-type-label);
  font-weight: var(--pub-weight-technical);
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body[data-publication^="system-"] .function-effect-card h3 {
  font-size: var(--pub-type-subhead);
}

body[data-publication^="system-"] .function-effect-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3mm 7mm;
  margin: 4mm 0 0 12mm;
}

body[data-publication^="system-"] .function-effect-card dl > div:last-child {
  grid-column: 1 / -1;
}

body[data-publication^="system-"] .function-effect-card dd {
  margin: 1.2mm 0 0;
  font-size: 8.1px;
  line-height: 1.38;
}

body[data-publication^="system-"] .function-effect-placement a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body[data-publication="system-family"] .contents,
body[data-publication="system-family"] .manifest,
body[data-publication="system-family"] .detail-layout,
body[data-publication="system-family"] .entry-layout,
body[data-publication="system-family"] .context-page,
body[data-publication="system-family"] .family-feature,
body[data-publication="system-family"] .contact {
  display: grid;
  grid-template-columns: repeat(var(--pub-grid-columns), minmax(0, 1fr));
  column-gap: var(--pub-grid-gap);
}

body[data-publication="system-family"] .contents > :first-child,
body[data-publication="system-family"] .detail-layout > :first-child,
body[data-publication="system-family"] .entry-layout > :first-child {
  grid-column: 1 / span 4;
}

body[data-publication="system-family"] .contents > :last-child,
body[data-publication="system-family"] .detail-layout > :last-child,
body[data-publication="system-family"] .entry-layout > :last-child {
  grid-column: 5 / -1;
}

body[data-publication="system-family"] .manifest > .kicker {
  grid-column: 1 / -1;
}

body[data-publication="system-family"] .manifest-copy,
body[data-publication="system-family"] .context-copy,
body[data-publication="system-family"] .family-feature-copy,
body[data-publication="system-family"] .contact-copy {
  grid-column: 1 / span 8;
}

body[data-publication="system-family"] .manifest-copy,
body[data-publication="system-family"] .family-feature-copy {
  grid-column: 1 / span 7;
}

body[data-publication="system-family"] .manifest-visual,
body[data-publication="system-family"] .context-mark,
body[data-publication="system-family"] .family-feature-visual,
body[data-publication="system-family"] .contact-side {
  grid-column: 9 / -1;
}

body[data-publication="system-family"] .manifest-visual,
body[data-publication="system-family"] .family-feature-visual {
  grid-column: 8 / -1;
}

body[data-publication="system-family"] .manifest-visual,
body[data-publication="system-family"] .family-feature-visual {
  position: static;
  display: grid;
  grid-template-rows: var(--pub-media-photo-height) var(--pub-system-mark-size);
  row-gap: var(--pub-media-gap);
  align-content: center;
  overflow: visible;
  min-width: 0;
}

body[data-publication="system-family"] .manifest-visual .portrait,
body[data-publication="system-family"] .family-feature-visual .portrait {
  position: static;
  display: block;
  width: 100%;
  height: var(--pub-media-photo-height);
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.72;
}

body[data-publication="system-family"] .manifest-visual .system-icon,
body[data-publication="system-family"] .family-feature-visual .system-icon {
  position: static;
  display: block;
  width: var(--pub-system-mark-size);
  height: var(--pub-system-mark-size);
  justify-self: start;
}

body[data-publication="system-family"] #perspective .portrait {
  object-position: 55% 45%;
}

body[data-publication="system-family"] #identity .portrait {
  object-position: 62% 50%;
}

body[data-publication="system-family"] #blueprint .portrait {
  object-position: 48% 50%;
}

body[data-publication="system-family"] #creation .portrait {
  object-position: 56% 50%;
}

body[data-publication="system-family"] #flow .portrait {
  object-position: 50% 55%;
}

body[data-publication="system-family"] #runtime .portrait {
  object-position: 35% 70%;
}

body[data-publication="system-family"] .family-catalog {
  display: grid;
  grid-template-columns: repeat(var(--pub-grid-columns), minmax(0, 1fr));
  column-gap: var(--pub-grid-gap);
  row-gap: calc(var(--pub-grid-gap) * 1.5);
}

body[data-publication="system-family"] .family-card {
  grid-column: span 6;
}

.system-register {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--pub-grid-gap) * 2);
  margin-top: 10mm;
}

.system-register a {
  display: grid;
  grid-template-columns: 10mm minmax(0, 1fr);
  gap: var(--pub-grid-gap);
  align-items: baseline;
  padding: 3.2mm 0;
  border-top: var(--pub-hairline) solid rgba(255, 255, 255, 0.28);
  color: inherit;
  text-decoration: none;
}

.system-register span {
  color: #8c8c8c;
  font-size: var(--pub-type-label);
  font-weight: var(--pub-weight-technical);
  letter-spacing: 0.13em;
}

.system-register strong {
  font-size: var(--pub-type-subhead);
  font-weight: var(--pub-weight-text);
  line-height: 1.3;
}

.system-name-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--pub-hairline);
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.18em;
}

body[data-publication="system-family"] .kicker .system-name-link {
  font-family: Montserrat, Arial, sans-serif;
  font-size: var(--pub-type-small);
  font-weight: var(--pub-weight-text);
  letter-spacing: 0;
  text-transform: none;
}

body[data-publication="system-family"] .folio .system-name-link {
  letter-spacing: 0.04em;
  text-transform: none;
}

.light .system-name-link {
  text-decoration-color: rgba(0, 0, 0, 0.28);
}

.system-register a:hover strong,
.system-register a:focus-visible strong,
.system-name-link:hover,
.system-name-link:focus-visible {
  text-decoration-color: currentColor;
}

@media screen and (max-width: 900px) {
  body[data-publication] .sheet,
  body[data-publication] .page {
    width: 100%;
    height: auto;
    min-height: 100svh;
  }

  body[data-publication] .sheet:not(.cover):not(.toolkit-open),
  body[data-publication] .sheet:nth-child(even):not(.cover):not(.toolkit-open),
  body[data-publication] .page:not(.hero),
  body[data-publication] .page:nth-child(even):not(.hero) {
    padding: 62px var(--pub-mobile-margin) 76px;
  }

  body[data-publication="system-family"] .page:nth-child(odd):not(.hero),
  body[data-publication="system-family"] .page:nth-child(even):not(.hero) {
    padding: 62px var(--pub-mobile-margin) 76px;
  }

  body[data-publication="system-family"] .contents,
  body[data-publication="system-family"] .manifest,
  body[data-publication="system-family"] .detail-layout,
  body[data-publication="system-family"] .entry-layout,
  body[data-publication="system-family"] .context-page,
  body[data-publication="system-family"] .family-feature,
  body[data-publication="system-family"] .contact,
  body[data-publication="system-family"] .family-catalog {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }

  body[data-publication="system-family"] .contents > *,
  body[data-publication="system-family"] .manifest > *,
  body[data-publication="system-family"] .detail-layout > *,
  body[data-publication="system-family"] .entry-layout > *,
  body[data-publication="system-family"] .context-page > *,
  body[data-publication="system-family"] .family-feature > *,
  body[data-publication="system-family"] .contact > *,
  body[data-publication="system-family"] .family-card {
    grid-column: 1;
  }

  body[data-publication^="system-"] .function-effect-layout {
    grid-template-columns: 1fr;
    row-gap: 42px;
    height: auto;
  }

  body[data-publication^="system-"] .function-effect-intro,
  body[data-publication^="system-"] .function-effect-list {
    grid-column: 1;
  }

  body[data-publication^="system-"] .function-effect-list {
    gap: 36px;
  }

  body[data-publication^="system-"] .function-effect-card {
    padding-top: 18px;
  }

  body[data-publication^="system-"] .function-effect-card > header {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
  }

  body[data-publication^="system-"] .function-effect-card h3 {
    font-size: 17px;
  }

  body[data-publication^="system-"] .function-effect-card dl {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 22px 0 0 46px;
  }

  body[data-publication^="system-"] .function-effect-card dl > div:last-child {
    grid-column: 1;
  }

  body[data-publication^="system-"] .function-effect-card dt {
    font-size: 9px;
  }

  body[data-publication^="system-"] .function-effect-card dd {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-publication="system-family"] .manifest-visual,
  body[data-publication="system-family"] .family-feature-visual {
    height: auto;
    min-height: 0;
    grid-template-rows: clamp(300px, 92vw, 420px) 72px;
    row-gap: var(--pub-grid-gap-mobile);
    align-content: start;
  }

  body[data-publication="system-family"] .manifest-visual .portrait,
  body[data-publication="system-family"] .family-feature-visual .portrait {
    height: clamp(300px, 92vw, 420px);
  }

  body[data-publication="system-family"] .manifest-visual .system-icon,
  body[data-publication="system-family"] .family-feature-visual .system-icon {
    width: 72px;
    height: 72px;
  }

  .system-register {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .system-register a {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--pub-grid-gap-mobile);
    padding: 16px 0;
  }

  .system-register span {
    font-size: 9px;
  }

  .system-register strong {
    font-size: 16px;
  }
}

@media print {
  body[data-publication] .sheet,
  body[data-publication] .sheet:nth-child(even),
  body[data-publication] .page,
  body[data-publication] .page:nth-child(even) {
    width: var(--pub-page-width);
    height: var(--pub-page-height);
    min-height: var(--pub-page-height);
  }
}