/* Smartphone-only adaptations for complex detail-tile compositions. */

@layer application {
@media (max-width: 46rem) {
  /* Explicit heights requested on the one-column reference raster. */
  .brainfuel-overview-domains-tile,
  .brainfuel-context-tile--quickstart,
  .smart-cart-modular-build-tile,
  .zde-dashboard-stack-tile,
  .zde-scvs-tile,
  .tools-methods-workflow-tile {
    --detail-tile-smartphone-row-span: 6;
  }

  .kip-notebook-tile,
  .thesis-connection-sequence-tile {
    --detail-tile-smartphone-row-span: 7;
  }

  .kip-technology-tile {
    --detail-tile-smartphone-row-span: 2;
  }

  .brainfuel-structure-trainer-tile,
  .smart-juicer-fruit-glass-tile,
  .smart-juicer-product-tile {
    --detail-tile-smartphone-row-span: 5;
  }

  .smart-juicer-components-tile {
    --detail-tile-smartphone-row-span: 4;
  }

  .kip-logo-tile {
    --detail-tile-smartphone-row-span: 3;
  }

  .zde-sensor-landscape-tile {
    --detail-tile-smartphone-row-span: 8;
  }

  .route-document--detail .detail-grid__tile--text-continuation {
    grid-template-columns: minmax(0, 1fr);
    block-size: auto;
    overflow: hidden;
  }

  .route-document--detail
    .detail-grid__tile--text-continuation
    .detail-grid__text-continuation-column {
    block-size: auto;
  }

  .route-document--detail
    .detail-grid__tile--process-strip
    .detail-grid__process-list--with-arrows {
    position: relative;
    inset: auto;
    inline-size: 100%;
    block-size: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .route-document--detail .detail-grid__tile--process-strip {
    align-self: auto;
    block-size: auto;
  }

  .route-document--detail
    .detail-grid__tile--process-strip
    .detail-grid__process-arrow {
    justify-self: center;
    inline-size: 1.5rem;
    min-block-size: 1.5rem;
    transform: rotate(90deg);
  }

  /* Keep process symbols uniform across all smartphone detail routes. */
  .route-document--detail
    .detail-grid__tile--process-strip
    .detail-grid__process-icon {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .route-document--detail
    :is(
      .smart-bin-journey-process-tile,
      .smart-juicer-journey-process-tile,
      .nataschka-journey-process-tile
    )
    .detail-grid__process-list--with-arrows {
    align-content: space-between;
  }

  .route-document--detail
    :is(
      .smart-bin-journey-process-tile,
      .smart-juicer-journey-process-tile,
      .nataschka-journey-process-tile
    )
    .detail-grid__process-step {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    justify-content: center;
    justify-items: center;
    inline-size: 100%;
    padding-inline: clamp(0.3rem, calc(0.55 * var(--site-scale-unit)), 0.55rem);
    text-align: center;
  }

  .route-document--detail
    :is(
      .smart-bin-journey-process-tile,
      .smart-juicer-journey-process-tile,
      .nataschka-journey-process-tile
    )
    .detail-grid__process-step
    > :is(svg, span, strong) {
    grid-area: auto;
  }

  .route-document--detail
    :is(
      .smart-bin-journey-process-tile,
      .smart-juicer-journey-process-tile,
      .nataschka-journey-process-tile
    )
    .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);
  }

  .route-document--detail
    .smart-cart-journey-process-tile
    .detail-grid__process-arrow {
    transform: none;
  }

  .route-document--detail .brainfuel-overview-domains-tile {
    min-block-size: 32rem;
    overflow: visible;
  }

  .brainfuel-overview-domains-tile .brainfuel-icon-gallery {
    block-size: auto;
    min-block-size: 100%;
    padding: 1rem 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: clamp(2rem, calc(4 * var(--site-scale-unit)), 3rem);
  }

  .brainfuel-overview-domains-tile .brainfuel-icon-gallery__item {
    grid-column: span 3;
    block-size: auto;
  }

  .brainfuel-overview-domains-tile .brainfuel-icon-gallery__cluster {
    inline-size: min(7rem, 100%);
    block-size: 7.5rem;
  }

  .brainfuel-overview-domains-tile .brainfuel-icon-gallery__satellites {
    inline-size: 100%;
  }

  .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery.is-brainfuel-gallery-tap-mode.is-brainfuel-gallery-active
    > .brainfuel-icon-gallery__item {
    grid-column: span 2;
    grid-row: 2;
  }

  .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery.is-brainfuel-gallery-tap-mode.is-brainfuel-gallery-active
    > .brainfuel-icon-gallery__item.is-brainfuel-gallery-item-active {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 10;
    justify-self: center;
    inline-size: min(100%, 10rem);
    transform: none;
  }

  .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery.is-brainfuel-gallery-tap-mode.is-brainfuel-gallery-active
    > .brainfuel-icon-gallery__item:not(.is-brainfuel-gallery-item-active) {
    transform: scale(0.66);
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__item.is-brainfuel-gallery-item-active
    .brainfuel-icon-gallery__icon {
    transform: translateX(-50%) rotate(var(--brainfuel-main-icon-rotation)) scale(1.12);
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__item.is-brainfuel-gallery-item-active
    .brainfuel-icon-gallery__satellites {
    inline-size: 190%;
    transform: translate(-50%, -0.7rem);
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__item.is-brainfuel-gallery-item-active
    .brainfuel-icon-gallery__satellite {
    transform: translateY(var(--brainfuel-satellite-active-y));
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__item.is-brainfuel-gallery-item-active
    .brainfuel-icon-gallery__satellite
    svg {
    transform: scale(2.05);
    stroke-width: 1.15;
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__item.is-brainfuel-gallery-item-active
    .brainfuel-icon-gallery__satellite-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .brainfuel-overview-domains-tile .brainfuel-icon-gallery__label {
    inline-size: min(7.5rem, 100%);
    padding-inline: 0.35rem;
    white-space: normal;
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__satellite-label {
    padding-inline: 0.2rem;
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__cluster--four
    .brainfuel-icon-gallery__satellite:nth-child(2)
    .brainfuel-icon-gallery__satellite-label {
    inset-inline-start: 42%;
  }

  .route-document--detail
    .brainfuel-overview-domains-tile
    .brainfuel-icon-gallery__cluster--four
    .brainfuel-icon-gallery__satellite:nth-child(3)
    .brainfuel-icon-gallery__satellite-label {
    inset-inline-start: 58%;
  }

  .route-document--detail .brainfuel-overview-facts-tile {
    place-content: center;
    place-items: center;
  }

  .route-document--detail
    .brainfuel-overview-facts-tile
    .detail-grid__entry-facts {
    place-self: center;
    column-gap: clamp(1.25rem, calc(5 * var(--site-scale-unit)), 3.5rem);
    inline-size: min(100%, 28rem);
    block-size: auto;
  }

  .route-document--detail .brainfuel-needs-scope-tile {
    min-block-size: 22rem;
    overflow: hidden;
  }

  .brainfuel-needs-scope-tile .brainfuel-scope-map__layout {
    --brainfuel-scope-offset-x: 5.2rem;
    --brainfuel-scope-offset-y: 5rem;
    --brainfuel-scope-connector-gap: 3.8rem;
    --brainfuel-scope-connector-length: 1.8rem;
  }

  .brainfuel-needs-scope-tile .brainfuel-scope-map__logo {
    inline-size: 5rem;
    block-size: 5rem;
  }

  .brainfuel-needs-scope-tile .brainfuel-scope-map__point {
    min-inline-size: 6.5rem;
  }

  .brainfuel-needs-scope-tile .brainfuel-scope-map__point strong {
    max-inline-size: 7rem;
    padding-inline: 0.42rem;
    white-space: normal;
  }

  .route-document--detail
    .brainfuel-debug-pipeline-tile
    .brainfuel-artifact-flow--strip {
    align-content: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 1rem var(--detail-grid-gap);
    inline-size: 100%;
    padding: var(--detail-tile-padding);
  }

  .route-document--detail
    .brainfuel-debug-pipeline-tile
    .brainfuel-artifact-flow__step {
    align-content: center;
    min-block-size: 5.5rem;
  }

  .route-document--detail
    .brainfuel-debug-pipeline-tile
    .brainfuel-artifact-flow__step strong {
    white-space: normal;
  }

  .route-document--detail
    .brainfuel-debug-pipeline-tile
    .brainfuel-artifact-flow__step:not(:last-child)::after {
    color: rgb(17 17 17 / 0.62);
    font-size: var(--type-size-diagram-artifact-arrow);
    font-weight: var(--type-weight-medium);
    scale: 1.35 1.2;
  }

  /* Three-item profiles always use the same centered two-row composition. */
  .route-document--detail
    :is(.detail-grid__experience-facts, .detail-grid__entry-facts):has(
      > :is(.detail-grid__experience-fact, .detail-grid__entry-fact):nth-child(3):last-child
    ) {
    place-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    inline-size: 100%;
    block-size: auto;
  }

  .route-document--detail
    :is(.detail-grid__experience-facts, .detail-grid__entry-facts)
    > :is(.detail-grid__experience-fact, .detail-grid__entry-fact):nth-child(3):last-child {
    grid-column: 1;
    justify-self: stretch;
    inline-size: auto;
  }

  .route-document--detail
    :is(.detail-grid__experience-facts, .detail-grid__entry-facts):has(
      > :is(.detail-grid__experience-fact, .detail-grid__entry-fact):nth-child(3):last-child
    )
    > :is(.detail-grid__experience-fact, .detail-grid__entry-fact) {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
    padding-inline: clamp(
      0.28rem,
      calc(0.46 * var(--site-scale-unit)),
      0.46rem
    );
  }

  /* Four-item stat profiles retain the established tablet 2 × 2 layout. */
  .route-document--detail
    :is(.thesis-overview-facts-tile, .tools-software-languages-tile) {
    align-content: center;
    justify-items: center;
  }

  .tools-software-languages-tile {
    --detail-tile-smartphone-order: -1;
    place-items: center;
  }

  .tools-software-languages-group {
    display: grid;
    place-self: center;
    justify-items: start;
    inline-size: 100%;
    max-inline-size: 100%;
    text-align: start;
  }

  .route-document--detail
    .tools-software-languages-tile
    .detail-grid__tile-stats {
    place-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    align-content: center;
    inline-size: 100%;
    max-inline-size: 100%;
    text-align: start;
  }

  .route-document--detail
    .tools-software-languages-tile
    .detail-grid__tile-stat {
    justify-self: center;
    inline-size: max-content;
    max-inline-size: 100%;
  }

  .route-document--detail
    .thesis-overview-facts-tile
    .thesis-overview-stats {
    display: none;
  }

  .route-document--detail
    .thesis-overview-facts-tile
    .thesis-overview-profile {
    display: grid;
    place-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: clamp(0.8rem, calc(1.5 * var(--site-scale-unit)), 1.25rem)
      clamp(1rem, calc(2.4 * var(--site-scale-unit)), 2rem);
    inline-size: 100%;
    block-size: auto;
  }

  .route-document--detail
    .thesis-overview-facts-tile
    .thesis-overview-profile
    .detail-grid__entry-fact {
    grid-template-columns: var(--detail-profile-icon-size) minmax(0, 1fr);
    justify-content: stretch;
    justify-items: start;
    inline-size: 100%;
    padding: 0;
    text-align: start;
  }

  /* Compact feature matrices keep the last odd item centered. */
  .route-document--detail
    .zde-overview-fields-tile
    .detail-grid__feature-list--column-standard {
    --detail-list-columns: 2;
    --detail-list-rows: 3;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-content: center;
    gap: var(--detail-grid-gap);
  }

  .route-document--detail
    .zde-overview-fields-tile
    .detail-grid__feature:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: 50%;
  }

  .route-document--detail
    .zde-overview-fields-tile
    .detail-grid__feature
    + .detail-grid__feature {
    border-block-start: 0;
    border-inline-start: 0;
  }

  .route-document--detail .zde-network-visual {
    --floating-visual-scale: 0.94;
  }

  .route-document--detail .zde-overview-image-tile:not(.is-extended) {
    --detail-full-image-position: left center;
  }

  /* Preserve the semantic no-divider modifiers after compact stacking. */
  .route-document--detail
    .detail-grid__feature-list--components
    .detail-grid__feature
    + .detail-grid__feature,
  .route-document--detail
    .detail-grid__tile--feature-strip-without-dividers
    .detail-grid__feature
    + .detail-grid__feature {
    border-block-start: 0;
    border-inline-start: 0;
  }

  .route-document--detail
    .smart-juicer-components-tile
    .detail-grid__feature-list {
    place-self: center;
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  .route-document--detail
    .smart-juicer-components-tile
    .detail-grid__feature {
    grid-template-columns: 2rem auto;
    grid-template-rows: auto auto;
    justify-items: start;
    column-gap: clamp(0.75rem, calc(2 * var(--site-scale-unit)), 1.25rem);
    text-align: start;
  }

  .route-document--detail
    .smart-juicer-components-tile
    .detail-grid__feature-icon {
    grid-row: 1 / -1;
    align-self: center;
    margin-block-end: 0;
  }

  .route-document--detail
    .tools-software-focus-tile
    .detail-grid__feature-list {
    justify-self: center;
    inline-size: min(100%, 22rem);
  }

  .route-document--detail
    .tools-environment-brands-tile
    .detail-grid__feature-list {
    place-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, calc(2 * var(--site-scale-unit)), 1.5rem);
    inline-size: 100%;
    block-size: auto;
  }

  .route-document--detail
    .tools-environment-brands-tile
    .detail-grid__feature {
    min-block-size: 8rem;
    padding-inline: clamp(
      0.35rem,
      var(--site-scale-unit),
      0.75rem
    );
    border: 0;
  }

  .route-document--detail
    .tools-environment-design-tools-tile
    .detail-grid__feature-list {
    place-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(1rem, calc(2.5 * var(--site-scale-unit)), 2rem);
    inline-size: 100%;
    block-size: auto;
  }

  .route-document--detail
    .tools-environment-design-tools-tile
    .detail-grid__feature {
    min-block-size: 7rem;
    padding-inline: clamp(
      0.35rem,
      var(--site-scale-unit),
      0.75rem
    );
  }

  .detail-grid__tile.detail-grid__tile--architecture:has(
      .applicant-architecture
    ) {
    min-block-size: 36rem;
  }

  .applicant-overview-facts-tile {
    --detail-tile-smartphone-order: 1;
  }

  .applicant-overview-copy-tile {
    --detail-tile-smartphone-order: 2;
  }

  .applicant-application-tile {
    --detail-tile-smartphone-order: 3;
    --detail-tile-smartphone-row-span: 5;
  }

  .applicant-timeline-devices-tile {
    --detail-tile-smartphone-order: 4;
    --detail-tile-smartphone-row-span: 4;
  }

  .detail-grid__tile--image-over-text.applicant-timeline-devices-tile
    > .detail-grid__tile-text-frame {
    display: grid;
  }

  .applicant-overview-metrics-tile {
    --detail-tile-smartphone-order: 5;
  }

  .applicant-breakpoint-grid-tile {
    --detail-tile-smartphone-order: 1;
  }

  .applicant-modular-grid-tile {
    --detail-tile-smartphone-order: 2;
  }

  .applicant-interface-system-tile {
    --detail-tile-smartphone-order: 3;
  }

  .applicant-navigation-tile {
    --detail-tile-smartphone-order: 6;
    --detail-tile-smartphone-row-span: 6;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .applicant-navigation-tile .detail-grid__tile-image-frame {
    grid-column: 1;
    grid-row: 1;
  }

  .applicant-navigation-tile .detail-grid__tile-text-frame {
    grid-column: 1;
    grid-row: 2;
  }

  .applicant-navigation-tile .detail-grid__tile-text-frame::before {
    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.46) 14%,
      rgb(17 17 17 / 0.78) 42%,
      rgb(17 17 17 / 0.88) 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgb(0 0 0 / 0.62) 16%,
      #000 38%,
      #000 100%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgb(0 0 0 / 0.62) 16%,
      #000 38%,
      #000 100%
    );
  }

  .applicant-polaroid-transition-tile {
    --detail-tile-smartphone-order: 5;
    --detail-tile-smartphone-row-span: 4;
  }

  .applicant-accordion-transition-tile {
    --detail-tile-smartphone-order: 4;
  }

  .applicant-responsive-tile {
    --detail-tile-smartphone-order: 7;
  }

  .applicant-technology-copy-tile {
    --detail-tile-smartphone-order: 1;
  }

  .applicant-architecture-tile {
    --detail-tile-smartphone-order: 2;
    --detail-tile-smartphone-row-span: 8;

    display: grid;
  }

  .applicant-architecture-tile .applicant-architecture__node svg {
    inline-size: clamp(1.45rem, calc(6 * var(--site-scale-unit)), 1.75rem);
    block-size: clamp(1.45rem, calc(6 * var(--site-scale-unit)), 1.75rem);
  }

  .applicant-logo-strip-tile {
    --detail-tile-smartphone-order: 3;
    --detail-tile-smartphone-row-span: 2;
  }

  .applicant-quality-copy-tile {
    --detail-tile-smartphone-order: 4;
  }

  .applicant-access-protection-tile {
    --detail-tile-smartphone-order: 5;
  }

  .applicant-architecture-composition {
    position: relative;
    inset: auto;
    inline-size: 100%;
    max-inline-size: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    justify-self: center;
    row-gap: 0.75rem;
    block-size: 100%;
    padding: var(--detail-tile-padding);
  }

  .applicant-architecture {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    justify-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:
      repeat(2, minmax(0, 1fr))
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      auto
      repeat(2, minmax(0, 1fr));
  }

  .applicant-architecture__node--content {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .applicant-architecture__node--data {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .applicant-architecture__arrow--into-server {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .applicant-architecture__node--server {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .applicant-architecture__arrow--into-template {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .applicant-architecture__node--template {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  .applicant-architecture__arrow--into-interface {
    grid-column: 1 / -1;
    grid-row: 7;
  }

  .applicant-architecture__node--interface {
    grid-column: 1;
    grid-row: 8 / 10;
  }

  .applicant-architecture__node--interaction {
    grid-column: 2;
    grid-row: 8 / 10;
  }

  .applicant-architecture__arrow {
    position: relative;
    place-items: center;
    color: transparent;
    font-size: var(--type-size-diagram-architecture-arrow);
    line-height: 1;
    transform: none;
  }

  .applicant-architecture__arrow::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    content: "↓";
    color: rgb(17 17 17 / 0.52);
    font-size: var(--type-size-diagram-architecture-arrow);
    transform: translate(-50%, -50%);
  }

  .applicant-architecture__custom {
    align-items: center;
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
    writing-mode: horizontal-tb;
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__source-list {
    place-self: center start;
    inline-size: 100%;
    block-size: max-content;
    transform: translateX(-2rem);
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__source {
    position: relative;
    justify-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    inline-size: 100%;
    min-inline-size: 0;
    padding-inline: clamp(
      0.58rem,
      var(--site-scale-unit),
      0.95rem
    );
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__source-icon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: clamp(0.58rem, var(--site-scale-unit), 0.95rem);
    translate: 0.25rem 0;
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__source-content {
    inline-size: 100%;
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__source-content
    > .detail-grid__tile-title {
    display: grid;
    align-items: center;
    min-block-size: clamp(2.75rem, calc(3.4 * var(--site-scale-unit)), 3.5rem);
    padding-inline-start: clamp(3.25rem, calc(4.1 * var(--site-scale-unit)), 4.25rem);
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__tile-facts
    dd {
    overflow-wrap: normal;
    text-align: start;
    text-align-last: auto;
    white-space: nowrap;
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__tile-facts--stacked
    div {
    grid-template-columns: clamp(3.45rem, calc(4.1 * var(--site-scale-unit)), 4.1rem) minmax(0, 1fr);
    column-gap: clamp(0.3rem, calc(0.48 * var(--site-scale-unit)), 0.48rem);
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__tile-facts--stacked {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__tile-facts--stacked
    dd {
    position: static;
    inline-size: auto;
    max-inline-size: 100%;
    transform: translateX(-0.5rem);
  }

  .route-document--detail
    .thesis-data-sources-tile
    .detail-grid__tile-facts--stacked
    dt {
    transform: translateX(0.25rem);
  }

  .route-document--detail .kip-technology-stack {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, calc(1.4 * var(--site-scale-unit)), 1.15rem);
  }

  .route-document--detail .kip-technology-stack img {
    inline-size: min(27%, 4.5rem);
    block-size: auto;
    max-block-size: calc(100% - 0.5rem);
  }

  /* Center vertical icon/text columns as a unit while keeping icon rails aligned. */
  .route-document--detail
    :is(.kip-overview-process-tile, .smart-bin-components-tile) {
    place-content: center;
    place-items: center;
  }

  .route-document--detail
    :is(
      .kip-overview-process-tile .detail-grid__process-list,
      .smart-bin-components-tile .detail-grid__feature-list
    ) {
    place-self: center;
    inline-size: min(100%, 22rem);
    block-size: auto;
  }

  .route-document--detail
    :is(
      .kip-overview-process-tile .detail-grid__process-step,
      .smart-bin-components-tile .detail-grid__feature
    ) {
    grid-template-columns: 2rem minmax(0, 1fr);
    align-content: center;
    justify-items: start;
    column-gap: clamp(0.75rem, calc(2 * var(--site-scale-unit)), 1.25rem);
    text-align: start;
  }

  .route-document--detail
    .kip-overview-process-tile
    .detail-grid__process-step {
    grid-template-areas:
      "icon number"
      "icon title"
      "icon copy";
    grid-template-rows: auto auto auto;
  }

  .route-document--detail
    .smart-bin-components-tile
    .detail-grid__feature {
    grid-template-areas:
      "icon title"
      "icon copy";
    grid-template-rows: auto auto;
  }

  .route-document--detail
    :is(
      .kip-overview-process-tile .detail-grid__process-icon,
      .smart-bin-components-tile .detail-grid__feature-icon
    ) {
    grid-area: icon;
    align-self: center;
    margin: 0;
  }

  .route-document--detail
    .kip-overview-process-tile
    .detail-grid__process-number {
    grid-area: number;
  }

  .route-document--detail
    :is(
      .kip-overview-process-tile .detail-grid__process-step,
      .smart-bin-components-tile .detail-grid__feature
    )
    strong {
    grid-area: title;
  }

  .route-document--detail
    :is(
      .kip-overview-process-tile .detail-grid__process-step,
      .smart-bin-components-tile .detail-grid__feature
    )
    > span:last-child {
    grid-area: copy;
  }

  .route-document--detail
    .kip-technology-stack
    .kip-technology-stack__jupyter {
    inline-size: min(31%, 5rem);
  }

  .route-document--detail
    :is(.smart-bin-components-tile, .nataschka-components-tile)
    .detail-grid__feature-list {
    block-size: max-content;
  }

  .route-document--detail
    :is(
      .smart-bin-overview-facts-tile,
      .smart-cart-overview-facts-tile,
      .smart-juicer-overview-facts-tile,
      .nataschka-overview-facts-tile
    ) {
    place-content: center;
    place-items: center;
  }

  .route-document--detail
    :is(
      .smart-bin-overview-facts-tile,
      .smart-cart-overview-facts-tile,
      .smart-juicer-overview-facts-tile,
      .nataschka-overview-facts-tile
    )
    .detail-grid__entry-facts {
    place-self: center;
    block-size: auto;
  }

  .route-document--detail
    :is(
      .smart-bin-proof-tile,
      .smart-bin-overview-visual-tile,
      .smart-juicer-product-tile,
      .smart-juicer-fruit-glass-tile,
      .nataschka-terrarium-tile
    ) {
    --detail-image-translate-y: -4.5%;
  }

  .route-document--detail
    .thesis-connection-sequence-tile
    .detail-grid__connection-stack {
    grid-template-rows:
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr);
    align-content: stretch;
  }

  .route-document--detail
    .thesis-connection-sequence-tile
    .detail-grid__connection-image {
    inline-size: auto;
    block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
    justify-self: center;
  }

  .brainfuel-overview-facts-tile {
    --detail-tile-smartphone-order: 1;
  }

  .brainfuel-overview-visual-tile {
    --detail-tile-smartphone-order: 2;
  }

  .brainfuel-overview-visual-tile
    + .detail-grid__tile--text {
    --detail-tile-smartphone-order: 3;
  }

  .brainfuel-overview-domains-tile {
    --detail-tile-smartphone-order: 4;
  }

  .route-document--detail
    .zde-dashboard-stack-tile
    .zde-dashboard-stack {
    align-self: center;
    justify-self: center;
    grid-template-rows: auto auto;
    block-size: auto;
    max-block-size: 100%;
    translate: 0 -0.45rem;
  }

  /* Explicit one-column reading order; every section starts again at one. */
  :is(
    .kip-overview-facts-tile,
    .kip-result-tile,
    .thesis-overview-facts-tile,
    .smart-bin-overview-facts-tile,
    .smart-cart-overview-facts-tile,
    .smart-juicer-overview-facts-tile,
    .nataschka-overview-facts-tile
  ) {
    --detail-tile-smartphone-order: 1;
  }

  :is(
    .kip-logo-tile,
    .kip-technology-tile,
    .thesis-overview-copy-tile,
    .smart-bin-proof-tile,
    .smart-cart-concept-proof-tile,
    .smart-juicer-overview-copy-tile,
    .nataschka-terrarium-tile
  ) {
    --detail-tile-smartphone-order: 2;
  }

  :is(
    .kip-overview-copy-tile,
    .kip-notebook-tile,
    .thesis-overview-scope-tile,
    .smart-bin-overview-copy-tile,
    .smart-cart-overview-copy-tile,
    .smart-juicer-product-tile,
    .nataschka-overview-copy-tile
  ) {
    --detail-tile-smartphone-order: 3;
  }

  :is(
    .kip-overview-process-tile,
    .kip-flow-dashboard-tile,
    .thesis-scope-metrics-tile,
    .smart-bin-journey-process-tile,
    .smart-cart-prototyping-decision-tile,
    .smart-juicer-personalization-tile,
    .nataschka-journey-process-tile
  ) {
    --detail-tile-smartphone-order: 4;
  }

  :is(
    .kip-overview-dashboard-tile,
    .kip-ckan-tile,
    .thesis-overview-hero-tile,
    .smart-bin-overview-visual-tile,
    .smart-cart-modular-build-tile,
    .smart-juicer-fruit-glass-tile,
    .nataschka-water-tank-tile
  ) {
    --detail-tile-smartphone-order: 5;
  }

  :is(
    .kip-overview-briefing-tile,
    .smart-bin-modularity-tile,
    .smart-cart-journey-process-tile,
    .smart-juicer-journey-process-tile,
    .nataschka-system-copy-tile
  ) {
    --detail-tile-smartphone-order: 6;
  }

  /* ZDE: explicit smartphone reading order; tile spans remain unchanged. */
  .zde-overview-facts-tile,
  .zde-tasks-intro-tile,
  .zde-scvs-contribution-tile,
  .zde-coordination-intro-tile {
    --detail-tile-smartphone-order: 1;
  }

  .zde-overview-image-tile,
  .zde-dashboard-task-tile,
  .zde-sensor-landscape-tile,
  .zde-coordination-tile {
    --detail-tile-smartphone-order: 2;
  }

  .zde-overview-copy-tile,
  .zde-workshops-tile,
  .zde-scvs-intro-tile,
  .zde-coordination-copy-tile {
    --detail-tile-smartphone-order: 3;
  }

  .zde-westhausen-tile,
  .zde-sensor-task-tile,
  .zde-dashboard-stack-tile,
  .zde-field-practice-tile {
    --detail-tile-smartphone-order: 4;
  }

  .zde-overview-profile-tile,
  .zde-scvs-tile,
  .zde-network-visual {
    --detail-tile-smartphone-order: 5;
  }

  .zde-overview-fields-tile,
  .zde-field-installation-tile {
    --detail-tile-smartphone-order: 6;
  }
}
}