/* Reusable detail-tile presentation patterns */

@layer application {
/*
  Reusable detail-tile contract:
  - .detail-grid__tile--text: lightly filled information tile.
  - .detail-grid__tile--stats: compact key-value tile.
  - .detail-grid__tile--architecture: system diagram on the shared light surface.
  - .detail-grid__tile--with-image + .detail-grid__tile--image-full: gradient text.
  - .detail-grid__tile--with-image + .detail-grid__tile--image-over-text: stacked.
  - .detail-grid__tile--with-image + .detail-grid__tile--image-beside-text: split.
  - .detail-grid__tile--with-image + .detail-grid__tile--image-strip: image strip.
  - .detail-grid__tile--floating-visual: visual on the shared light surface.
  Position and size use .detail-grid__tile--at-N and .detail-grid__tile--size-WxH.
  Image tiles expand by default; data-tile-expand="off" is the explicit opt-out.
  Top-aligned flow text may reshape beside an expanded tile;
  data-tile-reflow="fixed" preserves a structurally bound text layout.
*/
.detail-grid__tile--floating-visual {
  --floating-visual-scale: 1;

  place-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.detail-grid__tile--floating-visual > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  transform: scale(var(--floating-visual-scale));
}

.detail-grid__tile-backdrop {
  position: absolute;
  z-index: 1;
  inset: -12%;
  display: block;
  inline-size: 124%;
  block-size: 124%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.76;
  filter: blur(1.35rem) saturate(1.18) brightness(0.78);
  transform: scale(1.04);
  pointer-events: none;
}

/*
 * Full-image tiles crop their source in the resting grid and become an
 * inspection surface when expanded. State is expressed through properties
 * on the tile so image geometry, backdrop visibility and studio visibility
 * change as one contract. Carousels own their separate expanded rendering.
 */
.detail-grid__tile--image-full {
  --detail-full-image-inset: 0;
  --detail-full-image-size: 100%;
  --detail-full-image-fit: cover;
  --detail-full-image-position: top center;
  --detail-full-image-backdrop-display: none;
  --detail-full-image-studio-opacity: 1;
}

.detail-grid__tile--image-full > .detail-grid__tile-image {
  inset: var(--detail-full-image-inset);
  inline-size: var(--detail-full-image-size);
  block-size: var(--detail-full-image-size);
  object-fit: var(--detail-full-image-fit);
  object-position: var(--detail-full-image-position);
}

.detail-grid__tile--image-full:not([data-tile-expand-mode="carousel"])::after {
  opacity: var(--detail-full-image-studio-opacity);
}

.detail-grid__tile--image-full:not([data-tile-expand-mode="carousel"])
  > .detail-grid__tile-backdrop {
  display: var(--detail-full-image-backdrop-display);
}

.detail-grid__tile--image-full:not(.detail-grid__tile--image-only) {
  align-content: end;
}

.detail-grid__tile--image-contain {
  --detail-image-scale: 0.9;
  --detail-image-hover-scale: 0.94;
}

.detail-grid__tile--image-full.detail-grid__tile--image-contain {
  --detail-full-image-fit: contain;
  --detail-full-image-position: center;
}

.detail-grid__tile--image-bleed {
  --detail-image-scale: 1.08;
  --detail-image-hover-scale: 1.12;
}

.detail-grid__tile--image-full.is-extended:not([data-tile-expand-mode="carousel"]) {
  --detail-full-image-inset: var(--detail-tile-padding);
  --detail-full-image-size: calc(100% - (2 * var(--detail-tile-padding)));
  --detail-full-image-fit: contain;
  --detail-full-image-position: center;
  --detail-full-image-backdrop-display: block;
  --detail-full-image-studio-opacity: 0;
  --detail-image-scale: 1;
  --detail-image-hover-scale: 1;
  --detail-image-translate-y: 0;
}

.detail-grid__tile--display-cutout {
  --detail-image-scale: 1.22;
  --detail-image-hover-scale: 1.27;
  --detail-image-translate-y: -15%;
}

.detail-grid__tile--display-cutout .detail-grid__tile-image {
  transform-origin: center;
}

.detail-grid__tile--image-shift-up {
  --detail-image-translate-y: -12%;
}

.detail-grid__tile--image-zoomed-up {
  --detail-image-scale: 1.16;
  --detail-image-hover-scale: 1.2;
  --detail-image-translate-y: -4%;
}

.detail-grid__tile--image-full.detail-grid__tile--image-anchor-bottom {
  --detail-full-image-position: center bottom;
}

.detail-grid__tile--image-full.detail-grid__tile--image-anchor-top-left {
  --detail-full-image-position: left top;
}

.detail-grid__tile--image-only {
  padding: 0;
}

.detail-grid__tile--image-only::before {
  content: none;
}

.detail-grid__tile--image-over-text.detail-grid__tile--tablet-split-reversed
  > .detail-grid__tile-text-frame {
  display: none;
}

.detail-document-stack {
  position: relative;
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  place-items: center;
  isolation: isolate;
}

.detail-document-stack__sheet {
  position: absolute;
  display: block;
  block-size: var(--detail-document-stack-height);
  inline-size: auto;
  max-inline-size: 72%;
  border-radius: clamp(0.16rem, calc(0.28 * var(--site-scale-unit)), 0.3rem);
  box-shadow:
    0 0.85rem 1.6rem rgb(0 0 0 / 0.16),
    0 0.18rem 0.42rem rgb(0 0 0 / 0.1);
  transform-origin: center center;
}

.detail-document-stack__sheet[data-document-stack-layer="back"] {
  z-index: 1;
  transform: translate(-15%, 3%) rotate(-7deg);
}

.detail-document-stack__sheet[data-document-stack-layer="middle"] {
  z-index: 2;
  transform: translate(14%, -2%) rotate(6deg);
}

.detail-document-stack__sheet[data-document-stack-layer="front"] {
  z-index: 3;
  transform: translate(0, 1%) rotate(0deg);
}

.detail-grid__tile--image-over-text {
  --detail-image-frame-padding: var(--detail-tile-padding);
  --detail-image-frame-padding-block-end: clamp(0.22rem, calc(0.42 * var(--site-scale-unit)), 0.46rem);
  --detail-image-text-padding-block-start: clamp(0.32rem, calc(0.58 * var(--site-scale-unit)), 0.62rem);
  --detail-image-text-frame-min-block-size: clamp(5rem, calc(7.4 * var(--site-scale-unit)), 7.4rem);
  --detail-image-scale: 1;
  --detail-image-hover-scale: 1.045;

  align-content: stretch;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
}

.detail-grid__tile--image-over-text::after {
  background: #fff;
}

.detail-grid__tile--image-over-text::before {
  content: none;
}

.detail-grid__tile--image-over-text .detail-grid__tile-image-frame {
  position: relative;
  z-index: 2;
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  padding: var(--detail-image-frame-padding);
  padding-block-end: var(--detail-image-frame-padding-block-end);
  place-items: center;
}

.detail-grid__tile--image-over-text .detail-grid__tile-image-frame .detail-grid__tile-image {
  position: static;
  inset: auto;
  display: block;
  align-self: stretch;
  justify-self: stretch;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  object-position: center center;
  filter: saturate(0.94);
  transform: scale(var(--detail-image-scale));
  transform-origin: center center;
}

.detail-grid__image-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  gap: clamp(0.45rem, calc(0.8 * var(--site-scale-unit)), 0.9rem);
}

.detail-grid__snippet-composition {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  gap: clamp(0.4rem, calc(0.8 * var(--site-scale-unit)), 0.8rem);
}

.detail-grid__snippet-composition img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 0.65rem 0.9rem rgb(0 0 0 / 0.18));
  transition: transform 520ms var(--site-ease-out);
}

.detail-grid__snippet-composition--stacked-opposed {
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.detail-grid__snippet-composition--stacked-opposed img {
  inline-size: 92%;
}

.detail-grid__snippet-composition--stacked-opposed img:first-child {
  justify-self: start;
  object-position: left center;
}

.detail-grid__snippet-composition--stacked-opposed img:last-child {
  justify-self: end;
  object-position: right center;
}

.detail-grid__tile--image-over-text:hover .detail-grid__snippet-composition img,
.detail-grid__tile--image-over-text:focus-visible .detail-grid__snippet-composition img {
  transform: scale(1.035);
}

.detail-grid__tile--image-over-text .detail-grid__tile-text-frame {
  position: relative;
  z-index: 4;
  display: grid;
  inline-size: 100%;
  min-block-size: var(--detail-image-text-frame-min-block-size);
  gap: clamp(0.34rem, calc(0.65 * var(--site-scale-unit)), 0.58rem);
  isolation: isolate;
  padding: var(--detail-tile-padding);
  padding-block-start: var(--detail-image-text-padding-block-start);
}

.detail-grid__tile-heading {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  gap: clamp(0.42rem, calc(0.68 * var(--site-scale-unit)), 0.68rem);
}

.detail-grid__tile-heading-icon {
  flex: 0 0 auto;
  inline-size: clamp(1.05rem, calc(1.35 * var(--site-scale-unit)), 1.35rem);
  block-size: clamp(1.05rem, calc(1.35 * var(--site-scale-unit)), 1.35rem);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.detail-grid__tile-title--with-icon {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.42rem, calc(0.68 * var(--site-scale-unit)), 0.68rem);
}

.detail-grid__tile--image-over-text .detail-grid__tile-text-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 0 0 var(--detail-tile-border-radius) var(--detail-tile-border-radius);
  background:
    linear-gradient(
      180deg,
      rgb(17 17 17 / 0) 0%,
      rgb(17 17 17 / 0.38) 10%,
      rgb(17 17 17 / 0.68) 34%,
      rgb(17 17 17 / 0.82) 72%,
      rgb(17 17 17 / 0.88) 100%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.56) 10%, #000 28%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.56) 10%, #000 28%, #000 100%);
  pointer-events: none;
}

.detail-grid__tile--image-beside-text {
  --detail-image-frame-padding: var(--detail-tile-padding);
  --detail-image-scale: 1;
  --detail-image-hover-scale: 1.045;

  align-content: stretch;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.detail-grid__tile--image-beside-text::before {
  content: none;
}

.detail-grid__tile--image-beside-text .detail-grid__tile-image-frame {
  position: relative;
  z-index: 2;
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  padding: var(--detail-image-frame-padding);
  place-items: center;
}

.detail-grid__tile--image-beside-text .detail-grid__tile-image-frame .detail-grid__tile-image {
  position: static;
  inset: auto;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(var(--detail-image-scale));
  transform-origin: center;
}

.detail-grid__tile--image-beside-text .detail-grid__tile-text-frame {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: center;
  min-inline-size: 0;
  gap: clamp(0.34rem, calc(0.65 * var(--site-scale-unit)), 0.58rem);
  isolation: isolate;
  padding: var(--detail-tile-padding);
}

.detail-grid__tile--image-beside-text .detail-grid__tile-text-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 0 var(--detail-tile-border-radius) var(--detail-tile-border-radius) 0;
  background:
    linear-gradient(
      90deg,
      rgb(17 17 17 / 0) 0%,
      rgb(17 17 17 / 0.46) 14%,
      rgb(17 17 17 / 0.78) 42%,
      rgb(17 17 17 / 0.88) 100%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.62) 16%, #000 38%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.62) 16%, #000 38%, #000 100%);
  pointer-events: none;
}

.detail-grid__tile--image-beside-text:hover .detail-grid__tile-image-frame .detail-grid__tile-image,
.detail-grid__tile--image-beside-text:focus-visible .detail-grid__tile-image-frame .detail-grid__tile-image,
.detail-grid__tile--image-over-text:hover .detail-grid__tile-image-frame .detail-grid__tile-image,
.detail-grid__tile--image-over-text:focus-visible .detail-grid__tile-image-frame .detail-grid__tile-image {
  transform: scale(var(--detail-image-hover-scale));
}

.detail-grid__tile--image-beside-text-reversed {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}

.detail-grid__tile--image-beside-text-reversed .detail-grid__tile-text-frame {
  grid-column: 1;
  grid-row: 1;
}

.detail-grid__tile--image-beside-text-reversed .detail-grid__tile-image-frame {
  grid-column: 2;
  grid-row: 1;
}

.detail-grid__tile--image-beside-text-reversed .detail-grid__tile-text-frame::before {
  border-radius: var(--detail-tile-border-radius) 0 0 var(--detail-tile-border-radius);
  background:
    linear-gradient(
      90deg,
      rgb(17 17 17 / 0.88) 0%,
      rgb(17 17 17 / 0.78) 58%,
      rgb(17 17 17 / 0.46) 86%,
      rgb(17 17 17 / 0) 100%
    );
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgb(0 0 0 / 0.62) 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgb(0 0 0 / 0.62) 84%, transparent 100%);
}

.detail-popup-composition {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.45rem, calc(0.7 * var(--site-scale-unit)), 0.7rem);
}

.detail-popup-composition__navigation,
.detail-popup-composition__trigger,
.detail-popup-composition__panel {
  display: block;
  object-fit: contain;
  object-position: center;
}

.detail-popup-composition__navigation {
  inline-size: 100%;
  block-size: auto;
  border-radius: clamp(0.32rem, calc(0.48 * var(--site-scale-unit)), 0.48rem);
}

.detail-popup-composition__controls {
  display: grid;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: 0;
  grid-template-columns: auto minmax(0, auto);
  gap: clamp(0.55rem, calc(0.9 * var(--site-scale-unit)), 0.9rem);
}

.detail-popup-composition__panel {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 96%;
  max-block-size: 100%;
}

.detail-popup-composition__trigger {
  inline-size: auto;
  block-size: 32%;
  max-block-size: 4.6rem;
  border-radius: clamp(0.5rem, calc(0.75 * var(--site-scale-unit)), 0.75rem);
}

.detail-grid__tile--popup-explainer .detail-popup-composition {
  gap: clamp(0.18rem, calc(0.3 * var(--site-scale-unit)), 0.3rem);
  transition: transform 420ms var(--site-ease-out);
}

.detail-grid__tile--popup-explainer {
  background:
    linear-gradient(rgb(17 17 17 / 0.14), rgb(17 17 17 / 0.14)),
    url("../images/shared/backgrounds/studio.webp") center / cover no-repeat;
}

.detail-grid__tile--popup-explainer::after {
  content: none;
}

.detail-grid__tile--popup-explainer .detail-grid__tile-image-frame {
  padding: clamp(0.72rem, calc(1.05 * var(--site-scale-unit)), 1.05rem);
}

.detail-grid__tile--popup-explainer .detail-popup-composition__navigation {
  inline-size: 92%;
  justify-self: center;
}

.detail-grid__tile--popup-explainer .detail-popup-composition__controls {
  inline-size: 90%;
  block-size: 80%;
  align-self: start;
  justify-self: center;
}

.detail-grid__tile--popup-explainer .detail-popup-composition__panel {
  block-size: 100%;
}

.detail-grid__tile--popup-explainer .detail-popup-composition__trigger {
  block-size: 33.33%;
  max-block-size: 3.8rem;
}

.detail-grid__tile--popup-explainer:hover .detail-popup-composition,
.detail-grid__tile--popup-explainer:focus-visible .detail-popup-composition {
  transform: scale(1.035);
}

.detail-grid__tile--architecture {
  display: block;
  padding-block: 0;
}

.detail-grid__tile--connection-sequence {
  --detail-image-frame-padding: clamp(0.82rem, calc(1.25 * var(--site-scale-unit)), 1.25rem);
  --detail-image-frame-padding-block-end: clamp(0.38rem, calc(0.62 * var(--site-scale-unit)), 0.62rem);
}

.detail-grid__tile--connection-sequence .detail-grid__tile-image-frame {
  overflow: visible;
}

.detail-grid__tile--image-strip {
  --detail-flow-inset: clamp(0.62rem, calc(0.95 * var(--site-scale-unit)), 0.95rem);
  --detail-image-scale: 1;
  --detail-image-hover-scale: 1.035;
  --detail-tile-background: #fff;

  align-content: stretch;
  padding: 0;
}

.detail-grid__tile--image-strip::after {
  background: #fff;
}

.detail-grid__tile--image-strip::before {
  content: none;
}

.detail-grid__flow-row {
  position: absolute;
  z-index: 3;
  inset: var(--detail-flow-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  gap: clamp(0.14rem, calc(0.3 * var(--site-scale-unit)), 0.3rem);
}

.detail-grid__flow-item {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  aspect-ratio: var(--detail-flow-aspect);
  inline-size: auto;
  block-size: var(--detail-flow-image-height, 100%);
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  overflow: visible;
  isolation: isolate;
}

.detail-grid__flow-backdrop-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.detail-grid__flow-backdrop-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.18);
  pointer-events: none;
}

.detail-grid__flow-backdrop {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: cover;
  object-position: center center;
  opacity: 0.78;
  filter: blur(1.55rem) saturate(1.24) brightness(0.78);
  transform: scale(1.22);
}

.detail-grid__flow-image {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  filter: saturate(0.96);
  transform: scale(var(--detail-image-scale));
  transition: transform 520ms var(--site-ease-out);
}

.detail-grid__connection-stack {
  display: grid;
  align-content: start;
  justify-items: center;
  inline-size: 100%;
  block-size: 100%;
  gap: clamp(0.16rem, calc(0.34 * var(--site-scale-unit)), 0.34rem);
  min-block-size: 0;
  transform: scale(1);
  transform-origin: center;
  transition: transform 520ms var(--site-ease-out);
}

.detail-grid__tile--image-strip:hover .detail-grid__flow-image,
.detail-grid__tile--image-strip:focus-visible .detail-grid__flow-image,
.detail-grid__tile--connection-sequence:hover .detail-grid__connection-stack,
.detail-grid__tile--connection-sequence:focus-visible .detail-grid__connection-stack {
  transform: scale(var(--detail-image-hover-scale));
  will-change: transform;
}

.detail-grid__connection-image {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  filter: saturate(0.96);
}

.detail-grid__connection-arrow {
  display: block;
  inline-size: clamp(0.48rem, calc(0.7 * var(--site-scale-unit)), 0.72rem);
  block-size: clamp(0.48rem, calc(0.7 * var(--site-scale-unit)), 0.72rem);
  justify-self: center;
  border-inline-end: 2px solid rgb(17 17 17 / 0.72);
  border-block-end: 2px solid rgb(17 17 17 / 0.72);
  opacity: 0.72;
  transform: rotate(45deg);
}

.detail-grid__tile--pastel-illustration {
  --detail-image-frame-padding: 0;
  --detail-image-frame-padding-block-end: 0;
  --detail-image-text-padding-block-start: clamp(0.42rem, calc(0.68 * var(--site-scale-unit)), 0.68rem);
  --detail-pastel-base: #eef2ef;
  --detail-pastel-primary: rgb(180 218 199 / 0.82);
  --detail-pastel-secondary: rgb(193 214 229 / 0.76);
  --detail-tile-background: #fff;
}

.detail-grid__tile--pastel-illustration::after {
  inset: -12%;
  background:
    radial-gradient(
      circle at 24% 28%,
      var(--detail-pastel-primary) 0%,
      transparent 52%
    ),
    radial-gradient(
      circle at 78% 62%,
      var(--detail-pastel-secondary) 0%,
      transparent 54%
    ),
    var(--detail-pastel-base);
  filter: blur(18px) saturate(0.88);
  transform: scale(1.06);
}

.detail-grid__tile--pastel-mint {
  --detail-pastel-base: #eef3ef;
  --detail-pastel-primary: rgb(176 216 194 / 0.86);
  --detail-pastel-secondary: rgb(190 219 224 / 0.72);
}

.detail-grid__tile--pastel-lilac {
  --detail-pastel-base: #f1eef4;
  --detail-pastel-primary: rgb(205 190 224 / 0.84);
  --detail-pastel-secondary: rgb(229 199 214 / 0.72);
}

.detail-grid__tile--pastel-peach {
  --detail-pastel-base: #f5f0eb;
  --detail-pastel-primary: rgb(236 200 176 / 0.86);
  --detail-pastel-secondary: rgb(226 213 170 / 0.74);
}

.detail-grid__tile--pastel-blue {
  --detail-pastel-base: #edf2f5;
  --detail-pastel-primary: rgb(178 207 229 / 0.86);
  --detail-pastel-secondary: rgb(185 219 207 / 0.74);
}

.detail-grid__tile--pastel-illustration .detail-grid__tile-image-frame .detail-grid__tile-image {
  object-position: center center;
  transform: scale(1);
}

.detail-grid__tile--pastel-illustration .detail-grid__tile-heading-icon {
  stroke-width: 2.35;
}

.detail-grid__tile--pastel-illustration:hover .detail-grid__tile-image-frame .detail-grid__tile-image,
.detail-grid__tile--pastel-illustration:focus-visible .detail-grid__tile-image-frame .detail-grid__tile-image {
  transform: scale(1.035);
}

.detail-grid__tile--with-image .detail-grid__tile-title,
.detail-grid__tile--with-image .detail-grid__tile-copy,
.detail-grid__tile--with-image .detail-grid__tile-facts {
  z-index: 3;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 0.35rem 1.05rem rgb(0 0 0 / 0.32);
}

.detail-grid__tile--with-image .detail-grid__tile-copy {
  font-style: italic;
}

.detail-grid__tile--with-image .detail-grid__tile-facts dt,
.detail-grid__tile--with-image .detail-grid__tile-facts dd {
  color: inherit;
}

.detail-grid__tile--with-image .detail-grid__tile-label {
  z-index: 3;
  color: rgb(255 255 255 / 0.72);
  text-shadow: 0 0.35rem 1.05rem rgb(0 0 0 / 0.32);
}
.detail-grid__tile--tone-blue {
  --detail-tile-background:
    linear-gradient(145deg, rgb(217 225 231 / 0.86), rgb(202 214 223 / 0.86));
}

.detail-grid__tile--tone-brown {
  --detail-tile-background:
    linear-gradient(145deg, rgb(226 218 211 / 0.84), rgb(213 203 195 / 0.84));
}

.detail-grid__tile--tone-mauve {
  --detail-tile-background:
    linear-gradient(145deg, rgb(226 215 222 / 0.84), rgb(214 201 210 / 0.84));
}

.detail-grid__tile.detail-grid__tile--text {
  --detail-tile-padding: var(--detail-content-tile-padding);

  align-content: center;
  padding: var(--detail-tile-padding);
}

.detail-grid__tile.detail-grid__tile--top-aligned {
  align-content: center;
}

.detail-grid__tile--text-flow {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  block-size: 100%;
  padding-block: 0;
}

/*
  One continuous text composition split across two coupled internal areas.
  The lead area can use its full height. The continuation starts in the
  second area, whose remaining space can hold centered supporting content.
*/
.detail-grid__tile--text-continuation {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: var(--detail-grid-gap);
  padding: 0;
  overflow: visible;
}

.detail-grid__text-continuation-column {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 100%;
  justify-content: center;
}

.detail-grid__text-continuation-column > .detail-grid__tile-title {
  display: block;
  margin-block-end: clamp(0.34rem, calc(0.65 * var(--site-scale-unit)), 0.58rem);
  padding-inline-end: var(--detail-tile-padding);
}

.detail-grid__text-continuation-column > .detail-grid__tile-copy-stack {
  display: grid;
  align-content: start;
  padding-inline-end: var(--detail-tile-padding);
}

.detail-grid__text-continuation-column .detail-grid__tile-copy {
  display: block;
}

.detail-grid__text-continuation-column--follow {
  padding-block-start: 0;
}

.detail-grid__text-continuation-remainder {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-block-size: 0;
  inline-size: 100%;
}

.detail-grid__text-continuation-tail {
  display: grid;
  align-items: center;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  padding-inline-end: var(--detail-tile-padding);
}

.detail-grid__tile--text-with-illustration {
  min-block-size: 0;
}

.detail-grid__text-illustration {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-block-size: 0;
  margin: clamp(0.55rem, calc(0.9 * var(--site-scale-unit)), 0.9rem) 0 0;
  overflow: hidden;
}

.detail-grid__text-illustration img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.detail-grid__text-illustration-media {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.detail-grid__text-illustration--slightly-inset
  .detail-grid__text-illustration-media {
  inline-size: auto;
  block-size: 75%;
}

.tools-environment-overview-media {
  aspect-ratio: 1397 / 474;
}

.tools-environment-overview-media > .image-source-label {
  inset-block-start: 0.3rem;
  inset-inline-start: auto;
  inset-inline-end: 0.3rem;
}

.detail-grid__tile-title,
.detail-grid__tile-copy,
.detail-grid__tile-facts,
.detail-grid__tile-stats,
.detail-grid__tile-metric-row {
  position: relative;
  z-index: 1;
}

.detail-grid__tile-title {
  max-inline-size: 100%;
  font-size: var(--type-size-detail-title);
  font-weight: var(--type-weight-medium);
  hyphens: auto;
  letter-spacing: -0.015em;
  line-height: var(--type-line-height-title);
  overflow-wrap: anywhere;
}

.detail-grid__tile--with-image:not([data-tile-expand="off"]) .detail-grid__tile-label::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  inline-size: clamp(0.62rem, calc(0.86 * var(--site-scale-unit)), 0.86rem);
  block-size: clamp(0.62rem, calc(0.86 * var(--site-scale-unit)), 0.86rem);
  margin-inline-start: 0.5em;
  opacity: 0.58;
  background:
    linear-gradient(currentColor 0 0) left top / 42% 1px no-repeat,
    linear-gradient(currentColor 0 0) left top / 1px 42% no-repeat,
    linear-gradient(currentColor 0 0) right top / 42% 1px no-repeat,
    linear-gradient(currentColor 0 0) right top / 1px 42% no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 42% 1px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 1px 42% no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 42% 1px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 1px 42% no-repeat;
  color: rgb(17 17 17 / 0.72);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.detail-grid__tile--with-image:not([data-tile-expand="off"]):hover .detail-grid__tile-label::after,
.detail-grid__tile--with-image:not([data-tile-expand="off"]):focus-visible .detail-grid__tile-label::after,
.detail-grid__tile--with-image:not([data-tile-expand="off"]).is-extended .detail-grid__tile-label::after {
  opacity: 0.9;
  transform: scale(1.08);
}

.detail-grid__tile-title span {
  color: rgb(17 17 17 / 0.5);
  font-weight: var(--type-weight-light);
}

.detail-grid__tile--with-image .detail-grid__tile-title span {
  color: rgb(255 255 255 / 0.86);
}

.detail-grid__tile-label {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--detail-tile-padding);
  inset-inline-end: var(--detail-tile-padding);
  display: none;
  align-items: center;
  justify-content: flex-end;
  color: rgb(17 17 17 / 0.58);
  min-block-size: var(--detail-tile-label-height);
  max-inline-size: calc(100% - (var(--detail-tile-padding) * 2));
  font-size: var(--type-size-detail-label);
  font-weight: var(--type-weight-light);
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-align: end;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-grid__tile-copy {
  color: rgb(17 17 17 / 0.72);
  font-size: var(--type-size-detail-copy);
  font-weight: var(--type-weight-light);
  hyphens: auto;
  line-height: 1.42;
  overflow-wrap: anywhere;
  text-align: justify;
  text-align-last: start;
}

.detail-grid__tile--text > .detail-grid__tile-copy,
.detail-grid__tile--text .detail-grid__tile-copy-stack {
  line-height: 1.54;
}

.detail-grid__tile-copy-stack {
  display: grid;
  gap: clamp(0.55rem, calc(0.9 * var(--site-scale-unit)), 0.9rem);
}

.detail-grid__tile-copy-stack .detail-grid__tile-copy {
  line-height: inherit;
}

/*
  Layered application composition: the smaller document stack sits behind a
  dominant device mockup. Both layers share one centered hover transform.
*/
.detail-grid__tile--application-composition {
  --detail-image-frame-padding: clamp(0.8rem, calc(1.2 * var(--site-scale-unit)), 1.2rem);
}

.detail-application-composition {
  --detail-application-composition-offset-y: 4%;

  position: relative;
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  place-items: center;
  isolation: isolate;
  transform: translateY(var(--detail-application-composition-offset-y)) scale(1);
  transform-origin: center;
  transition: transform 520ms var(--site-ease-out);
}

.detail-application-composition__documents {
  --detail-document-stack-height: 71%;

  position: absolute;
  z-index: 2;
  container-type: inline-size;
  inset-block-start: -2%;
  inset-inline-start: 50%;
  inline-size: 60%;
  block-size: 70%;
  transform: translateX(-50%);
}

.detail-application-composition__documents .detail-document-stack__sheet {
  block-size: min(var(--detail-document-stack-height), 101.72cqi);
  max-inline-size: none;
}

.detail-application-composition__imac {
  position: absolute;
  z-index: 4;
  inset: 57% auto auto 50%;
  display: block;
  inline-size: 84%;
  block-size: auto;
  max-inline-size: 84%;
  max-block-size: 76%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
}

.detail-grid__tile--application-composition:hover .detail-application-composition,
.detail-grid__tile--application-composition:focus-visible .detail-application-composition {
  transform:
    translateY(var(--detail-application-composition-offset-y))
    scale(1.045);
  will-change: transform;
}

.detail-grid__tile--system-context {
  align-content: center;
  grid-template-rows: auto auto auto;
}

.detail-grid__tile--system-context .detail-grid__tile-label {
  inset-block-start: 0;
}

.detail-grid__tile--system-context .detail-grid__tile-copy-block {
  display: grid;
  align-content: center;
  gap: clamp(0.55rem, calc(0.9 * var(--site-scale-unit)), 0.9rem);
  margin: 0;
}

.detail-grid__tile--system-context .detail-grid__tile-copy-block p {
  margin: 0;
}

.detail-grid__tile--metrics-bottom {
  align-content: stretch;
  grid-template-rows: auto auto 1fr;
  padding-block-end: 0;
}

.detail-grid__tile--metrics-bottom .detail-grid__tile-metric-row {
  grid-row: 3;
  align-self: center;
}

.detail-grid__tile--metric-strip {
  align-content: center;
  padding-block: 0;
}

.detail-grid__tile-meta {
  margin-block-start: clamp(0.5rem, calc(1.1 * var(--site-scale-unit)), 1rem);
}

.detail-grid__tile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.55rem, var(--site-scale-unit), 1rem) clamp(0.85rem, calc(1.5 * var(--site-scale-unit)), 1.35rem);
  margin: 0;
}

.detail-grid__tile-facts--stacked {
  grid-template-columns: 1fr;
}

.detail-grid__tile-facts div {
  display: grid;
  gap: clamp(0.12rem, calc(0.3 * var(--site-scale-unit)), 0.22rem);
}

.detail-grid__tile-facts--stacked div {
  grid-template-columns: clamp(3.9rem, calc(6.1 * var(--site-scale-unit)), 6.2rem) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(0.65rem, var(--site-scale-unit), 1rem);
  row-gap: clamp(0.12rem, calc(0.3 * var(--site-scale-unit)), 0.22rem);
}

.detail-grid__tile-facts dt {
  color: rgb(17 17 17 / 0.5);
  font-size: var(--type-size-detail-supporting-label);
  font-weight: var(--type-weight-light);
  line-height: 1.3;
}

.detail-grid__tile-facts dd {
  margin: 0;
  color: rgb(17 17 17 / 0.78);
  font-size: var(--type-size-detail-fact-value);
  font-weight: var(--type-weight-regular);
  line-height: 1.28;
  text-align: justify;
  text-align-last: start;
}

.detail-grid__source-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  inline-size: 100%;
}

.detail-grid__source {
  display: grid;
  align-content: center;
  gap: clamp(0.42rem, calc(0.78 * var(--site-scale-unit)), 0.74rem);
  min-inline-size: 0;
  padding-inline: clamp(0.8rem, calc(1.4 * var(--site-scale-unit)), 1.35rem);
}

.detail-grid__source:first-child {
  padding-inline-start: 0;
}

.detail-grid__source:last-child {
  padding-inline-end: 0;
}

.detail-grid__tile--data-source-strip .detail-grid__source {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.65rem, var(--site-scale-unit), 1rem);
  padding-inline: clamp(0.58rem, var(--site-scale-unit), 0.95rem);
}

.detail-grid__source-content {
  display: grid;
  gap: clamp(0.26rem, calc(0.45 * var(--site-scale-unit)), 0.42rem);
  min-inline-size: 0;
}

.detail-grid__source-icon {
  inline-size: clamp(2.35rem, calc(3.4 * var(--site-scale-unit)), 3.5rem);
  block-size: auto;
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.detail-grid__source:nth-child(1) .detail-grid__source-icon {
  color: #4ca733;
}

.detail-grid__source:nth-child(2) .detail-grid__source-icon {
  color: #28679e;
}

.detail-grid__source:nth-child(3) .detail-grid__source-icon {
  color: #c65117;
}

.detail-grid__tile--data-source-strip .detail-grid__tile-facts--stacked {
  row-gap: clamp(0.28rem, calc(0.42 * var(--site-scale-unit)), 0.42rem);
}

.detail-grid__tile--data-source-strip .detail-grid__tile-facts--stacked div {
  grid-template-columns: clamp(3.75rem, calc(4.7 * var(--site-scale-unit)), 4.75rem) minmax(0, 1fr);
  column-gap: clamp(0.45rem, calc(0.65 * var(--site-scale-unit)), 0.65rem);
  row-gap: 0;
}

.detail-grid__tile--data-source-strip .detail-grid__tile-facts dt {
  line-height: 1.12;
}

.detail-grid__tile--data-source-strip .detail-grid__tile-facts dd {
  line-height: 1.12;
  white-space: nowrap;
}

.detail-grid__tile--stats {
  align-content: center;
  padding: clamp(0.65rem, calc(1.05 * var(--site-scale-unit)), 1rem);
}

.detail-grid__tile-stats {
  display: grid;
  gap: clamp(0.42rem, calc(0.7 * var(--site-scale-unit)), 0.7rem);
  inline-size: 100%;
  margin: 0;
}

.detail-grid__tile-stat {
  display: grid;
  gap: clamp(0.12rem, calc(0.24 * var(--site-scale-unit)), 0.22rem);
  min-inline-size: 0;
  padding: 0;
  text-align: start;
}

.detail-grid__tile-stat dt {
  overflow: hidden;
  max-inline-size: 100%;
  color: rgb(17 17 17 / 0.48);
  font-size: var(--type-size-detail-stat-label);
  font-weight: var(--type-weight-light);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-grid__tile-stat dd {
  margin: 0;
  color: rgb(17 17 17 / 0.8);
  font-size: var(--type-size-detail-stat-value);
  font-weight: var(--type-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-grid__tile--entry-facts {
  align-content: center;
  justify-items: stretch;
  padding: 0;
}

.detail-grid__tile.detail-grid__tile--entry-facts-top-aligned {
  align-content: start;
}

.detail-grid__entry-facts,
.detail-grid__experience-facts {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: center;
  block-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-grid__entry-facts--four {
  grid-template-rows: repeat(4, auto);
}

.detail-grid__entry-facts--six {
  grid-template-rows: repeat(6, auto);
}

.detail-grid__tile--entry-facts-top-aligned .detail-grid__entry-facts {
  align-self: start;
  align-content: start;
  block-size: auto;
}

.detail-grid__tile--entry-facts-top-aligned .detail-grid__entry-fact:first-child {
  align-content: start;
  align-items: start;
  padding-block-start: 0;
}

.detail-grid__entry-fact,
.detail-grid__experience-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: clamp(0.42rem, calc(0.68 * var(--site-scale-unit)), 0.68rem);
  min-inline-size: 0;
  padding: clamp(0.62rem, calc(0.82 * var(--site-scale-unit)), 0.82rem) clamp(0.28rem, calc(0.46 * var(--site-scale-unit)), 0.46rem);
  padding-inline-start: 0;
}

.detail-grid__entry-fact-icon,
.detail-grid__experience-fact-icon,
.detail-grid__profile-stat-icon {
  inline-size: var(--detail-profile-icon-size);
  block-size: var(--detail-profile-icon-size);
  fill: none;
  stroke: rgb(17 17 17 / 0.72);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.detail-grid__profile-stat-icon { display: none; }

.detail-grid__entry-fact-copy,
.detail-grid__experience-fact-copy {
  display: grid;
  gap: clamp(0.18rem, calc(0.28 * var(--site-scale-unit)), 0.28rem);
  min-inline-size: 0;
}

.detail-grid__entry-fact-value,
.detail-grid__experience-fact-value {
  color: rgb(17 17 17 / 0.82);
  font-size: var(--type-size-detail-profile-value);
  font-weight: var(--type-weight-medium);
  line-height: 1.18;
}

.detail-grid__entry-fact-label,
.detail-grid__experience-fact-label {
  color: rgb(17 17 17 / 0.46);
  font-size: var(--type-size-detail-compact-label);
  font-weight: var(--type-weight-regular);
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

@media (width > 75rem) {
  .detail-grid__tile.detail-grid__tile--vertical-profile {
    align-content: center;
    justify-items: center;
    padding: clamp(0.32rem, calc(0.5 * var(--site-scale-unit)), 0.5rem);
  }
  .detail-grid__tile--vertical-profile :is(
    .detail-grid__entry-facts, .detail-grid__experience-facts, .detail-grid__tile-stats
  ) {
    place-self: center;
    justify-items: center;
    gap: clamp(0.72rem, calc(1.05 * var(--site-scale-unit)), 1.05rem);
    inline-size: 100%;
    block-size: auto;
  }
  .detail-grid__tile--vertical-profile :is(
    .detail-grid__entry-fact, .detail-grid__experience-fact, .detail-grid__tile-stat
  ) {
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    gap: clamp(0.16rem, calc(0.25 * var(--site-scale-unit)), 0.25rem);
    inline-size: 100%;
    min-inline-size: 0;
    padding: 0;
    text-align: center;
  }
  .detail-grid__tile--vertical-profile :is(.detail-grid__entry-fact-copy, .detail-grid__experience-fact-copy) {
    justify-items: center;
    inline-size: 100%;
  }
  .detail-grid__tile--vertical-profile :is(
    .detail-grid__entry-fact-value, .detail-grid__experience-fact-value,
    .detail-grid__tile-stat dd
  ) {
    overflow: visible;
    max-inline-size: 100%;
    text-overflow: clip;
    text-wrap: balance;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .detail-grid__tile--vertical-profile .detail-grid__tile-stat dt {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .detail-grid__tile--vertical-profile .detail-grid__profile-stat-icon { display: block; }
}

.detail-grid__tile--process-strip,
.detail-grid__tile--feature-strip {
  align-content: stretch;
  padding-inline: 0;
}

.detail-grid__process-list,
.detail-grid__feature-list {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: stretch;
  inline-size: 100%;
  block-size: 100%;
  grid-template-columns: repeat(var(--detail-list-columns), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-grid__feature-list {
  --detail-list-columns: 3;
}

.detail-grid__process-list {
  --detail-process-color-1: currentcolor;
  --detail-process-color-2: currentcolor;
  --detail-process-color-3: currentcolor;
  --detail-process-color-4: currentcolor;
  --detail-list-columns: 4;
}

.detail-grid__process-step,
.detail-grid__feature {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-inline-size: 0;
  padding-inline: clamp(0.8rem, calc(1.35 * var(--site-scale-unit)), 1.35rem);
  text-align: center;
}

.detail-grid__feature + .detail-grid__feature {
  border-inline-start: var(--detail-divider-size) solid var(--detail-divider-color);
}

.detail-grid__process-icon,
.detail-grid__feature-icon {
  display: block;
  margin-block-end: clamp(0.35rem, calc(0.58 * var(--site-scale-unit)), 0.58rem);
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.detail-grid__process-icon {
  inline-size: clamp(2.25rem, calc(3.4 * var(--site-scale-unit)), 3.5rem);
  block-size: clamp(2.25rem, calc(3.4 * var(--site-scale-unit)), 3.5rem);
  color: var(--detail-process-color, currentcolor);
}

.detail-grid__process-number {
  color: rgb(17 17 17 / 0.46);
  font-size: var(--type-size-detail-sequence-number);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.12em;
  line-height: 1;
}

.detail-grid__process-step strong,
.detail-grid__feature strong {
  margin-block-start: clamp(0.2rem, calc(0.35 * var(--site-scale-unit)), 0.35rem);
  color: rgb(17 17 17 / 0.82);
  font-size: var(--type-size-detail-sequence-title);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-line-height-detail-sequence-title);
}

.detail-grid__process-step > span:last-child,
.detail-grid__feature > span {
  margin-block-start: clamp(0.22rem, calc(0.38 * var(--site-scale-unit)), 0.38rem);
  color: rgb(17 17 17 / 0.62);
  font-size: var(--type-size-detail-sequence-copy);
  font-weight: var(--type-weight-light);
  line-height: var(--type-line-height-detail-sequence-copy);
}

.detail-grid__feature-list--four {
  --detail-list-columns: 4;
}

.detail-grid__feature-list--two-rows {
  --detail-list-columns: 1;

  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.detail-grid__feature-list--spaced-rows {
  row-gap: var(--detail-grid-gap);
}

.detail-grid__tile--feature-column {
  align-self: stretch;
  align-content: stretch;
  padding: 0;
}

.detail-grid__feature-list--column {
  --detail-list-columns: 1;
  --detail-list-rows: 4;

  grid-template-rows: repeat(var(--detail-list-rows), minmax(0, 1fr));
}

.detail-grid__feature-list--five-rows {
  --detail-list-rows: 5;
}

.detail-grid__feature-list--column .detail-grid__feature {
  align-content: center;
  padding: clamp(0.2rem, calc(0.45 * var(--site-scale-unit)), 0.45rem);
}

.detail-grid__feature-list--column
  .detail-grid__feature
  + .detail-grid__feature {
  border-inline-start: 0;
}

.detail-grid__feature-list--column .detail-grid__feature-icon {
  inline-size: clamp(1.55rem, calc(2 * var(--site-scale-unit)), 2rem);
  block-size: clamp(1.55rem, calc(2 * var(--site-scale-unit)), 2rem);
  margin-block-end: clamp(0.12rem, calc(0.22 * var(--site-scale-unit)), 0.22rem);
}

.detail-grid__feature-list--column .detail-grid__feature strong {
  margin-block-start: 0;
}

.detail-grid__feature-list--column .detail-grid__feature > span {
  margin-block-start: clamp(0.1rem, calc(0.18 * var(--site-scale-unit)), 0.18rem);
}

/*
 * Full-height feature columns anchor their first and last entries directly to
 * the tile bounds and distribute every intermediate entry evenly. The modifier
 * owns its regular project typography directly; the shared column rules only
 * provide geometry.
 */
.detail-grid__tile--feature-column
  .detail-grid__feature-list--column-standard {
  position: absolute;
  inset: var(--detail-tile-padding);
  align-content: space-between;
  inline-size: auto;
  block-size: auto;
  grid-template-rows: repeat(var(--detail-list-rows), auto);
}

.detail-grid__feature-list--column-standard .detail-grid__feature {
  padding-block: 0;
}

.detail-grid__feature-list--column-standard .detail-grid__feature-icon {
  inline-size: clamp(2.25rem, calc(3.4 * var(--site-scale-unit)), 3.5rem);
  block-size: clamp(2.25rem, calc(3.4 * var(--site-scale-unit)), 3.5rem);
  margin-block-end: clamp(0.28rem, calc(0.45 * var(--site-scale-unit)), 0.45rem);
}

.detail-grid__feature-list--column-standard .detail-grid__feature strong {
  font-size: var(--type-size-detail-sequence-title);
  line-height: var(--type-line-height-detail-sequence-title);
}

.detail-grid__feature-list--column-standard .detail-grid__feature > span {
  margin-block-start: clamp(0.22rem, calc(0.38 * var(--site-scale-unit)), 0.38rem);
  font-size: var(--type-size-detail-sequence-copy);
  line-height: var(--type-line-height-detail-sequence-copy);
}

.detail-grid__tile--feature-stack-column {
  align-self: stretch;
  align-content: stretch;
  padding-block: 0;
}

.detail-grid__tile--feature-stack-column .detail-grid__feature-list {
  --detail-list-columns: 2;

  position: absolute;
  inset: var(--detail-tile-padding);
  align-content: space-between;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  inline-size: auto;
  block-size: auto;
  padding-block: 0;
}

.detail-grid__tile--feature-stack-column .detail-grid__feature {
  align-content: start;
  padding-inline: clamp(0.45rem, calc(0.75 * var(--site-scale-unit)), 0.75rem);
}

.detail-grid__tile--feature-stack {
  padding-block: 0;
}

.detail-grid__tile--feature-stack .detail-grid__feature {
  padding-block: 0;
}

.detail-grid__feature-list--components .detail-grid__feature-icon {
  inline-size: clamp(1.65rem, calc(2.25 * var(--site-scale-unit)), 2.3rem);
  block-size: clamp(1.65rem, calc(2.25 * var(--site-scale-unit)), 2.3rem);
}

.detail-grid__feature-list--components
  .detail-grid__feature
  + .detail-grid__feature {
  border-inline-start: 0;
}

.detail-grid__feature-list--components {
  --detail-feature-color-1: #466f8d;
  --detail-feature-color-2: #d08a32;
  --detail-feature-color-3: #a52f35;
  --detail-feature-color-4: #5e8267;
}

.detail-grid__feature-list--components-column {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.detail-grid__feature-list--components-column .detail-grid__feature {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  column-gap: clamp(0.58rem, calc(0.9 * var(--site-scale-unit)), 0.9rem);
  padding-inline: var(--detail-tile-padding);
  text-align: start;
}

.detail-grid__feature-list--components-column .detail-grid__feature-icon {
  grid-row: 1 / -1;
  align-self: center;
  margin-block-end: 0;
}

.detail-grid__feature-list--components-column .detail-grid__feature strong {
  align-self: end;
  margin-block-start: 0;
}

.detail-grid__feature-list--components-column .detail-grid__feature > span {
  align-self: start;
}

.detail-grid__feature-icon {
  inline-size: clamp(2.55rem, calc(4 * var(--site-scale-unit)), 4rem);
  block-size: clamp(2.55rem, calc(4 * var(--site-scale-unit)), 4rem);
  color: var(--detail-feature-color, rgb(17 17 17 / 0.72));
}

.detail-grid__tile--brainfuel-icons {
  align-content: stretch;
  padding: 0;
  overflow: visible;
}

.detail-grid__feature-list--methods {
  --detail-feature-color-1: #477b98;
  --detail-feature-color-2: #b36f45;
  --detail-feature-color-3: #5e8267;
  --detail-feature-color-4: #79679a;
  --detail-feature-color-5: #a8525d;
  --detail-feature-color-6: #4f8583;
  --detail-feature-color-7: #5175a4;
  --detail-feature-color-8: #9a7440;
}

.detail-grid__feature:nth-child(1) {
  --detail-feature-color: var(--detail-feature-color-1, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(2) {
  --detail-feature-color: var(--detail-feature-color-2, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(3) {
  --detail-feature-color: var(--detail-feature-color-3, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(4) {
  --detail-feature-color: var(--detail-feature-color-4, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(5) {
  --detail-feature-color: var(--detail-feature-color-5, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(6) {
  --detail-feature-color: var(--detail-feature-color-6, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(7) {
  --detail-feature-color: var(--detail-feature-color-7, rgb(17 17 17 / 0.72));
}

.detail-grid__feature:nth-child(8) {
  --detail-feature-color: var(--detail-feature-color-8, rgb(17 17 17 / 0.72));
}

.detail-grid__tile--process-strip-inline .detail-grid__process-step {
  grid-template-areas:
    "icon number"
    "icon title"
    "icon copy";
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-content: center;
  justify-items: start;
  gap: 0 clamp(0.5rem, calc(0.75 * var(--site-scale-unit)), 0.75rem);
  padding-inline: clamp(0.65rem, var(--site-scale-unit), 1rem);
  text-align: start;
}

.detail-grid__tile--process-strip-inline {
  padding-inline: var(--detail-tile-padding);
}

.detail-grid__tile--process-strip-wide {
  padding-inline: clamp(0.12rem, calc(0.28 * var(--site-scale-unit)), 0.28rem);
}

.detail-grid__tile--process-strip-inline .detail-grid__process-step:not(:last-child)::after,
.detail-grid__process-arrow {
  color: rgb(17 17 17 / 0.42);
  font-family: var(--type-family-text);
  font-size: var(--type-size-diagram-process-arrow);
  font-weight: var(--type-weight-light);
  line-height: 1;
  pointer-events: none;
}

.detail-grid__tile--process-strip-inline .detail-grid__process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}

.detail-grid__process-list--with-arrows {
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr);
}

.detail-grid__tile--process-strip-inline
  .detail-grid__process-list--with-arrows
  .detail-grid__process-step::after {
  content: none;
}

.detail-grid__process-arrow {
  display: grid;
  place-items: center;
  align-self: stretch;
}

.detail-grid__tile--process-column {
  align-self: stretch;
  align-content: stretch;
  block-size: 100%;
  min-block-size: 0;
  padding: 0;
}

.detail-grid__tile--process-column .detail-grid__process-list--with-arrows {
  position: absolute;
  inset: var(--detail-tile-padding);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(7, auto);
  align-content: space-between;
  inline-size: auto;
  block-size: auto;
  min-block-size: 0;
}

.detail-grid__tile--process-column .detail-grid__process-step {
  align-content: center;
  padding: 0 clamp(0.3rem, calc(0.55 * var(--site-scale-unit)), 0.55rem);
}

.detail-grid__tile--process-column .detail-grid__process-icon {
  inline-size: clamp(1.65rem, calc(2.15 * var(--site-scale-unit)), 2.2rem);
  block-size: clamp(1.65rem, calc(2.15 * var(--site-scale-unit)), 2.2rem);
  margin-block-end: clamp(0.18rem, calc(0.3 * var(--site-scale-unit)), 0.3rem);
}

.detail-grid__tile--process-column .detail-grid__process-arrow {
  align-self: center;
  font-size: var(--type-size-diagram-process-arrow-column);
}

.detail-grid__tile--process-strip-inline .detail-grid__process-icon {
  grid-area: icon;
  align-self: center;
  inline-size: clamp(1.8rem, calc(2.5 * var(--site-scale-unit)), 2.5rem);
  block-size: clamp(1.8rem, calc(2.5 * var(--site-scale-unit)), 2.5rem);
  margin: 0;
}

.detail-grid__tile--process-strip-inline .detail-grid__process-number {
  grid-area: number;
}

.detail-grid__tile--process-strip-inline .detail-grid__process-step strong {
  grid-area: title;
}

.detail-grid__tile--process-strip-inline .detail-grid__process-step > span:last-child {
  grid-area: copy;
}

.detail-grid__process-list--smart-bin {
  --detail-process-color-1: #668d43;
  --detail-process-color-2: #b17843;
  --detail-process-color-3: #a95347;
  --detail-process-color-4: #477b98;
}

.detail-grid__process-list--smart-juicer {
  --detail-process-color-1: #d0a128;
  --detail-process-color-2: #c7793d;
  --detail-process-color-3: #668d43;
  --detail-process-color-4: #477b98;
}

.detail-grid__process-list--smart-cart {
  --detail-process-color-1: #b3262d;
  --detail-process-color-2: #c98a32;
  --detail-process-color-3: #466f8d;
  --detail-process-color-4: #873d48;
}

.detail-grid__process-list--kip {
  --detail-process-color-1: #58bed1;
  --detail-process-color-2: #176db1;
  --detail-process-color-3: #62676d;
  --detail-process-color-4: #1592bd;
}

.detail-grid__process-step:nth-child(1) {
  --detail-process-color: var(--detail-process-color-1);
}

.detail-grid__process-step:nth-child(3) {
  --detail-process-color: var(--detail-process-color-2);
}

.detail-grid__process-step:nth-child(5) {
  --detail-process-color: var(--detail-process-color-3);
}

.detail-grid__process-step:nth-child(7) {
  --detail-process-color: var(--detail-process-color-4);
}

.detail-grid__tile--process-strip-inline .detail-grid__process-step strong,
.detail-grid__tile--process-strip-inline .detail-grid__process-step > span:last-child {
  margin-block-start: 0.12rem;
}

.detail-grid__tile--feature-strip-compact .detail-grid__feature {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  gap: 0 clamp(0.55rem, calc(0.85 * var(--site-scale-unit)), 0.85rem);
  padding-inline: clamp(0.65rem, var(--site-scale-unit), 1rem);
  text-align: start;
}

.detail-grid__tile--feature-strip-compact .detail-grid__feature-icon {
  grid-row: 1 / -1;
  align-self: center;
  inline-size: clamp(1.8rem, calc(2.6 * var(--site-scale-unit)), 2.6rem);
  block-size: clamp(1.8rem, calc(2.6 * var(--site-scale-unit)), 2.6rem);
  margin: 0;
}

.detail-grid__feature-logo {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  mix-blend-mode: multiply;
  object-fit: contain;
}

.detail-grid__feature-logo--white-matte {
  filter: contrast(1.06);
  mix-blend-mode: multiply;
}

.detail-grid__feature-logos--pair .detail-grid__feature-logo {
  max-inline-size: calc(50% - 0.125rem);
  max-block-size: 72%;
}

.detail-grid__tile--feature-strip-brands .detail-grid__feature {
  grid-template-rows: minmax(clamp(1.65rem, calc(2.25 * var(--site-scale-unit)), 2.3rem), auto) auto auto;
  align-content: center;
}

.detail-grid__tile--feature-strip-brands .detail-grid__feature-logos {
  --detail-brand-logo-size: clamp(1.8rem, calc(2.45 * var(--site-scale-unit)), 2.5rem);
  --detail-brand-logo-gap: clamp(0.28rem, calc(0.42 * var(--site-scale-unit)), 0.42rem);

  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: calc((var(--detail-brand-logo-size) * 2) + var(--detail-brand-logo-gap));
  block-size: var(--detail-brand-logo-size);
  gap: var(--detail-brand-logo-gap);
  margin-block-end: clamp(0.28rem, calc(0.48 * var(--site-scale-unit)), 0.48rem);
}

.detail-grid__tile--feature-strip-brands .detail-grid__feature-logo,
.detail-grid__tile--feature-strip-brands
  .detail-grid__feature-logos--pair
  .detail-grid__feature-logo {
  flex: 0 0 var(--detail-brand-logo-size);
  inline-size: var(--detail-brand-logo-size);
  block-size: var(--detail-brand-logo-size);
  max-inline-size: none;
  max-block-size: none;
}

.detail-grid__tile--feature-strip-without-dividers .detail-grid__feature {
  border-inline-start: 0;
}

.detail-grid__tile--feature-strip-centered {
  align-self: center;
  block-size: fit-content;
  padding-block: 0;
  translate: 0 calc(var(--detail-grid-gap) * -0.65);
}

.detail-grid__tile--feature-strip-centered .detail-grid__feature-list {
  block-size: auto;
}

.detail-grid__tile--feature-strip-centered .detail-grid__feature {
  padding-block: clamp(0.3rem, calc(0.5 * var(--site-scale-unit)), 0.5rem);
}

.detail-grid__tile--feature-strip-compact .detail-grid__feature strong,
.detail-grid__tile--feature-strip-compact .detail-grid__feature > span {
  margin-block-start: 0;
}

.detail-grid__tile-metric-row {
  --detail-metric-gap: clamp(0.65rem, calc(1.35 * var(--site-scale-unit)), 1.5rem);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--detail-metric-gap);
  inline-size: 100%;
}

.detail-grid__tile-metric-row div {
  position: relative;
  display: grid;
  grid-template-rows: min-content min-content;
  align-content: center;
  justify-items: center;
  min-inline-size: 0;
  text-align: center;
}

.detail-grid__tile-metric-row div + div {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.detail-grid__tile-metric-row div + div::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--detail-metric-gap) * -0.5);
  inline-size: var(--detail-divider-size);
  border-radius: 999px;
  content: "";
  background: var(--detail-divider-color);
}

.detail-grid__tile-metric-row strong {
  display: block;
  inline-size: 100%;
  color: rgb(17 17 17 / 0.88);
  font-family: var(--type-family-display);
  font-size: var(--type-size-detail-metric-value);
  font-weight: var(--type-weight-medium);
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.detail-grid__tile-metric-row span {
  display: block;
  inline-size: 100%;
  margin-block-start: clamp(0.16rem, calc(0.36 * var(--site-scale-unit)), 0.32rem);
  color: rgb(17 17 17 / 0.58);
  font-size: var(--type-size-detail-supporting-label);
  font-weight: var(--type-weight-light);
  line-height: 1.15;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
}

/*
 * Reusable tablet variants own internal component rearrangement. Project
 * classes remain responsible only for the editorial grid coordinates.
 */
.detail-grid__media-pair {
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
}

@media (max-width: 75rem) {
  .detail-grid__tile.detail-grid__tile--compact-profile-matrix-six {
    --detail-content-tile-padding: 0;
    align-content: center;
  }

  .detail-grid__tile--compact-profile-matrix-six .detail-grid__entry-facts {
    align-self: center;
    align-content: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
    block-size: 100%;
  }

  .detail-grid__tile--compact-profile-matrix-six .detail-grid__entry-fact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    gap: clamp(0.12rem, calc(0.22 * var(--site-scale-unit)), 0.22rem);
    padding: clamp(0.16rem, calc(0.28 * var(--site-scale-unit)), 0.28rem);
    text-align: center;
  }

  .detail-grid__tile--compact-profile-matrix-six .detail-grid__entry-fact-icon {
    inline-size: clamp(1.25rem, calc(1.7 * var(--site-scale-unit)), 1.7rem);
    block-size: clamp(1.25rem, calc(1.7 * var(--site-scale-unit)), 1.7rem);
  }

  .detail-grid__tile--compact-profile-matrix-six .detail-grid__entry-fact-copy {
    justify-items: center;
    gap: 0.08rem;
  }
}

@media (46rem < width <= 75rem) {
  .detail-grid__tile--compact-profile-matrix-six .detail-grid__entry-fact-icon {
    inline-size: clamp(1.25rem, 20%, 1.45rem);
    block-size: auto;
  }
  .detail-grid__tile--tablet-split-reversed {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .detail-grid__tile--tablet-split-reversed .detail-grid__tile-image-frame {
    grid-column: 2;
    grid-row: 1;
    padding: var(--detail-image-frame-padding);
  }

  .detail-grid__tile--tablet-split-reversed .detail-grid__tile-image-frame > :first-child {
    align-self: center;
    block-size: auto;
    max-block-size: 100%;
  }

  .detail-grid__tile--image-over-text.detail-grid__tile--tablet-split-reversed
    > .detail-grid__tile-text-frame {
    position: relative;
    z-index: 4;
    display: grid;
    align-content: center;
    grid-column: 1;
    grid-row: 1;
    gap: clamp(0.34rem, calc(0.65 * var(--site-scale-unit)), 0.58rem);
    padding: var(--detail-tile-padding);
  }

  .detail-grid__tile .detail-grid__media-pair--tablet-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .detail-grid__tile.is-extended .detail-grid__media-pair--tablet-inline {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .detail-grid__tile--tablet-process-stacked
    .detail-grid__process-list--with-arrows,
  .detail-grid__tile--tablet-process-inline
    .detail-grid__process-list--with-arrows {
    grid-template-columns:
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .detail-grid__tile--tablet-process-stacked .detail-grid__process-step {
    grid-template-areas:
      "icon"
      "number"
      "title"
      "copy";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    justify-items: center;
    padding-inline: clamp(0.35rem, calc(0.6 * var(--site-scale-unit)), 0.6rem);
    text-align: center;
  }

  .detail-grid__tile--tablet-process-inline {
    padding-inline: var(--detail-tile-padding);
  }

  .detail-grid__tile--tablet-process-inline
    .detail-grid__process-list--with-arrows {
    position: relative;
    inset: auto;
    align-content: center;
    inline-size: 100%;
    block-size: 100%;
  }

  .detail-grid__tile--tablet-process-inline .detail-grid__process-step {
    grid-template-areas:
      "icon number"
      "icon title"
      "icon copy";
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-content: center;
    gap: 0 clamp(0.5rem, calc(0.75 * var(--site-scale-unit)), 0.75rem);
    padding-inline: clamp(0.35rem, calc(0.55 * var(--site-scale-unit)), 0.55rem);
    text-align: start;
  }

  .detail-grid__tile--tablet-process-inline .detail-grid__process-icon {
    grid-area: icon;
    align-self: center;
  }

  .detail-grid__tile--tablet-process-inline .detail-grid__process-number {
    grid-area: number;
  }

  .detail-grid__tile--tablet-process-inline .detail-grid__process-step strong {
    grid-area: title;
  }

  .detail-grid__tile--tablet-process-inline
    .detail-grid__process-step
    > span:last-child {
    grid-area: copy;
  }
}

/* Keep every content tile's outer inset identical on all four sides. */
.detail-grid > .detail-grid__tile:not(
  .detail-grid__tile--with-image,
  .title-profile,
  .detail-grid__tile--grid
) {
  --detail-tile-padding: var(--detail-content-tile-padding);

  padding: var(--detail-tile-padding);
}
}