@import url("../tokens.css");

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-VariableFont_opsz,wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* —— Deck page —— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body.deck {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* —— Viewport + stage (1920×1080 scaled to fit above chrome) —— */
:root {
  /* Equal inset above + below nav controls (screen px, not scaled) */
  --deck-chrome-pad: 16px;
  /* Fallback until JS measures .deck-chrome / computes content inset */
  --deck-chrome-h: calc(var(--deck-chrome-pad) * 2 + 40px);
  --deck-chrome-inline-inset: max(24px, 4.5vw);
}

.deck-viewport {
  position: fixed;
  inset: 0;
  /* Top-aligned; horizontal center via stage left/translateX */
  display: block;
  overflow: hidden;
  padding-bottom: var(--deck-chrome-h);
  box-sizing: border-box;
  background-color: var(--color-bg);
}

/* Like .page__layers — solid + gradient; z-index only here so washes can soft-light */
.deck-layers {
  position: fixed;
  inset: 0;
  z-index: var(--page-bg-z-index);
  pointer-events: none;
}

.deck-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
}

/* Wiki center-crop: 3600×2025 native, width-only --gradient-scale (never layout-scale) */
.deck-gradient-clip {
  position: absolute;
  inset: 0;
  overflow: clip;
  z-index: var(--gradient-z-index);
}

.deck-gradient-stack {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--gradient-native-width);
  height: var(--gradient-native-height);
  transform: translateX(-50%) scale(var(--gradient-scale, 1));
  transform-origin: top center;
  opacity: var(--gradient-opacity, 1);
}

.deck-gradient-slice {
  display: block;
  width: var(--gradient-native-width);
  height: var(--gradient-native-height);
  pointer-events: none;
}

/* Soft-light washes — no z-index (stacking trap). Viewport-fixed; sync from card rects. */
.deck-blend-layers {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html.blend-enhanced .deck-blend-layers {
  mix-blend-mode: var(--soft-light-wash-blend-mode);
}

.deck-card-wash,
.roi-stat-table-highlight-wash {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.deck-card-wash__fill,
.roi-stat-table-highlight-wash__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--soft-light-wash-fill-enhanced);
  transition: background-color var(--motion-duration-medium) var(--motion-ease-out);
}

.deck-card-wash.is-hover .deck-card-wash__fill {
  background-color: var(--soft-light-wash-fill-hover-enhanced);
}

html:not(.blend-enhanced) .deck-blend-layers {
  display: none;
}

html.blend-enhanced .deck-card__body {
  opacity: 0;
  mix-blend-mode: normal;
  filter: none;
  background-color: transparent;
}

.deck-stage {
  /* Design canvas = one page section (layout-max × 1080) — same scale shell as
     .page-section__scale > .page-section__inner / .hero-scale__inner */
  --deck-w: var(--layout-max-width);
  --deck-h: var(--layout-design-height);
  --deck-coord-scale: 1;
  /* Standard section gutters (88px design) */
  --deck-pad-x: var(--layout-margin-design);
  --deck-pad-y: calc(72px * var(--deck-coord-scale));
  --deck-content-w: var(--layout-content-width);
  /* Type + spacing aliases (dev-wiki scale @ design basis) */
  --deck-space-xs: calc(8px * var(--deck-coord-scale));
  --deck-space-sm: calc(16px * var(--deck-coord-scale));
  --deck-space-md: calc(24px * var(--deck-coord-scale));
  --deck-space-lg: calc(40px * var(--deck-coord-scale));
  --deck-space-xl: calc(48px * var(--deck-coord-scale));
  --deck-space-2xl: calc(63px * var(--deck-coord-scale));
  --deck-card-pad-inline: calc(32px * var(--deck-coord-scale));
  --deck-card-pad-block: calc(32px * var(--deck-coord-scale));
  position: relative;
  left: 50%;
  /* no z-index — transform stacking + DOM order; keeps soft-light free to hit .deck-layers */
  width: var(--deck-w);
  height: var(--deck-h);
  margin-inline: 0;
  flex-shrink: 0;
  transform: translateX(-50%) scale(var(--layout-scale, 1));
  transform-origin: top center;
}

/* —— Slides —— */
.deck-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-medium) var(--motion-ease-out),
    visibility var(--motion-duration-medium) var(--motion-ease-out);
}

.deck-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.deck-slide__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--deck-w);
  margin-inline: auto;
  padding: var(--deck-pad-y) var(--deck-pad-x);
  min-height: 0;
  box-sizing: border-box;
}

/* —— Typography (dev-wiki scale) —— */
.deck-eyebrow {
  margin: 0 0 var(--deck-space-lg);
  font-size: calc(var(--h1-medium-size) * var(--deck-coord-scale));
  font-weight: var(--h1-medium-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.deck-title {
  margin: 0 0 var(--deck-space-lg);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.deck-title__line {
  display: block;
  font-size: calc(var(--h3-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h3-bold-weight);
  line-height: var(--h3-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
}

.deck-title--display .deck-title__line {
  font-size: calc(var(--t1-bold-size) * var(--deck-coord-scale));
  font-weight: var(--t1-bold-weight);
  line-height: var(--t1-line-height-ratio);
  letter-spacing: calc(3px * var(--deck-coord-scale));
}

.deck-title__line--accent {
  color: var(--color-accent);
}

.deck-segment__logo {
  margin: 0;
}

.deck-segment__logo-img {
  display: block;
  width: auto;
  max-width: calc(360px * var(--deck-coord-scale));
  height: calc(90px * var(--deck-coord-scale));
  object-fit: contain;
  object-position: left center;
}

.deck-lead {
  margin: 0 0 var(--deck-space-xl);
  max-width: calc(920px * var(--deck-coord-scale));
  font-size: calc(var(--h1-light-size) * var(--deck-coord-scale));
  font-weight: var(--h1-light-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
}

/* —— Cards (Pattern B + soft-light wash fill) —— */
html:not(.blend-enhanced) {
  --soft-light-wash-fallback-filter: brightness(var(--color-accent-fallback-brightness))
    saturate(var(--color-accent-fallback-saturate));
  --soft-light-wash-fallback-filter-hover: brightness(
      var(--color-accent-fallback-brightness-hover)
    )
    saturate(var(--color-accent-fallback-saturate-hover));
}

.deck-card {
  --deck-card-radius: var(--service-card-border-radius);
  --deck-card-body-bg: var(--soft-light-wash-fill-enhanced);
  --deck-card-body-bg-hover: var(--soft-light-wash-fill-hover-enhanced);
  position: relative;
  /* no isolation — soft-light must composite with slide gradient */
  width: 100%;
}

.deck-stat-row .deck-card,
.deck-problem-grid .deck-card,
.deck-product-grid .deck-card,
.deck-trust-row .deck-card {
  height: 100%;
}

.deck-card__body,
.deck-card__outline {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: var(--deck-card-radius);
  box-sizing: border-box;
}

.deck-card__body {
  z-index: var(--layer-body-z-index);
  background-color: var(--deck-card-body-bg);
  mix-blend-mode: var(--soft-light-wash-blend-mode);
  transition:
    background-color var(--motion-duration-medium) var(--motion-ease-out),
    filter var(--motion-duration-medium) var(--motion-ease-out);
}

html:not(.blend-enhanced) .deck-card__body {
  mix-blend-mode: normal;
  background-color: var(--soft-light-wash-fill-fallback);
  filter: var(--soft-light-wash-fallback-filter);
}

.deck-card__outline {
  z-index: var(--layer-outline-z-index);
  border: var(--outline-width) solid var(--outline-color);
  background-color: transparent;
}

.deck-card__content {
  position: relative;
  z-index: calc(var(--layer-outline-z-index) + 1);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* —— Title: ROI stat table (homepage component) —— */
.deck-slide__content--title {
  justify-content: flex-start;
}

.deck-slide__content--title .deck-title--display {
  max-width: calc(1400px * var(--deck-coord-scale));
}

.deck-slide__content--title .deck-lead {
  max-width: calc(920px * var(--deck-coord-scale));
}

.deck-slide .roi-stat-table {
  position: relative;
  width: 100%;
  margin-top: auto;
  /* Height = width / 4 */
  aspect-ratio: 4 / 1;
  box-sizing: border-box;
  border: var(--outline-width) solid var(--outline-color);
}

.deck-slide .roi-stat-table__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  pointer-events: none;
}

.deck-slide .roi-stat-table__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: var(--roi-stat-cell-gap);
  padding-inline: var(--roi-stat-cell-padding-inline);
  text-align: center;
  box-sizing: border-box;
}

.deck-slide .roi-stat-table__cell:not(:last-child) {
  border-right: var(--outline-width) solid var(--outline-color);
}

.deck-slide .roi-stat-table__cell:not(.roi-stat-table__cell--cta) {
  justify-content: flex-start;
  gap: 0;
}

.deck-slide .roi-stat-table__cell-spacer-top {
  flex: 0 0 auto;
  width: 100%;
  height: calc((100% - var(--roi-stat-cell-standard-stack-height)) / 2);
}

.deck-slide .roi-stat-table__cell-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--roi-stat-cell-gap);
  flex: 0 0 auto;
  width: 100%;
}

.deck-slide .roi-stat-table__cell-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 100%;
  margin-top: var(--roi-stat-cell-gap);
}

.deck-slide .roi-stat-table__cell-foot .roi-stat-table__suffix + .roi-stat-table__suffix {
  margin-top: 0;
}

.deck-slide .roi-stat-table__cell-spacer-bottom {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.deck-slide .roi-stat-table__prefix,
.deck-slide .roi-stat-table__suffix,
.deck-slide .roi-stat-table__value {
  display: block;
  max-width: 100%;
  text-align: center;
}

.deck-slide .roi-stat-table__prefix,
.deck-slide .roi-stat-table__suffix {
  font-size: var(--roi-stat-prefix-size);
  line-height: var(--roi-stat-prefix-line-height);
  font-weight: var(--roi-stat-prefix-weight);
  letter-spacing: var(--roi-stat-prefix-letter-spacing);
}

.deck-slide .roi-stat-table__suffix {
  text-wrap: balance;
}

.deck-slide .roi-stat-table__suffix + .roi-stat-table__suffix {
  margin-top: calc(-1 * var(--roi-stat-cell-gap));
}

.deck-slide .roi-stat-table__value:has(.roi-stat-table__value-num) {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--roi-stat-value-inline-gap);
}

.deck-slide .roi-stat-table__value-num {
  font-size: var(--roi-stat-value-num-size);
  line-height: var(--roi-stat-value-num-line-height);
  font-weight: var(--roi-stat-value-num-weight);
  letter-spacing: var(--roi-stat-value-num-letter-spacing);
}

.deck-slide .roi-stat-table__value-mult {
  font-size: var(--roi-stat-value-mult-size);
  line-height: var(--roi-stat-value-mult-line-height);
  font-weight: var(--roi-stat-value-mult-weight);
}

.deck-slide .roi-stat-table__value-unit {
  font-size: var(--roi-stat-value-unit-size);
  line-height: var(--roi-stat-value-unit-line-height);
  font-weight: var(--roi-stat-value-unit-weight);
  letter-spacing: var(--roi-stat-value-unit-letter-spacing);
}

.deck-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--deck-space-xl);
  margin-top: auto;
  width: 100%;
}

.deck-stat .deck-card__content {
  padding: var(--deck-card-pad-block) var(--deck-card-pad-inline);
  min-height: calc(160px * var(--deck-coord-scale));
  justify-content: center;
}

.deck-stat__value {
  margin: 0 0 var(--deck-space-sm);
  font-size: calc(var(--h2-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h2-bold-weight);
  line-height: var(--h2-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
}

.deck-stat__label {
  margin: 0;
  font-size: calc(var(--h1-light-size) * var(--deck-coord-scale));
  font-weight: var(--h1-light-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: rgb(255 255 255 / 0.85);
}

.deck-stat--link {
  text-decoration: none;
  color: inherit;
}

.deck-stat--link .deck-card__body {
  transition:
    background-color var(--motion-duration-medium) var(--motion-ease-out),
    filter var(--motion-duration-medium) var(--motion-ease-out);
}

.deck-stat--link:hover .deck-card__body,
.deck-stat--link:focus-visible .deck-card__body {
  background-color: var(--deck-card-body-bg-hover);
}

html:not(.blend-enhanced) .deck-stat--link:hover .deck-card__body,
html:not(.blend-enhanced) .deck-stat--link:focus-visible .deck-card__body {
  background-color: var(--soft-light-wash-fill-hover-fallback);
  filter: var(--soft-light-wash-fallback-filter-hover);
}

.deck-stat--link:focus-visible {
  outline: none;
}

.deck-stat--link:focus-visible .deck-card__outline {
  border-color: var(--color-accent);
}

.deck-stat--link .deck-stat__value {
  font-size: calc(var(--h1-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h1-bold-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  overflow-wrap: anywhere;
}

/* —— Diagnosis problems (physics process card structure + wash blend) —— */
.deck-problem-block {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--deck-space-md);
  width: 100%;
}

.deck-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--deck-space-lg);
  margin-top: 0;
  width: 100%;
  align-items: stretch;
}

.deck-problem .deck-card__content {
  display: flex;
  flex-direction: column;
  padding: var(--deck-space-lg);
  height: 100%;
  box-sizing: border-box;
}

.deck-problem__icon {
  display: block;
  width: calc(49px * var(--deck-coord-scale));
  height: calc(49px * var(--deck-coord-scale));
  align-self: center;
  transform: translateY(calc(-80px * var(--deck-coord-scale))) scale(4);
  transform-origin: center bottom;
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
}

.deck-problem__title {
  margin: 0 0 calc(40px * var(--deck-coord-scale));
  font-size: calc(40px * var(--deck-coord-scale));
  line-height: 1.1;
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  opacity: 1;
}

.deck-problem__divider {
  height: 1px;
  flex-shrink: 0;
  background: var(--color-text);
}

.deck-problem__row {
  display: flex;
  gap: var(--deck-space-lg);
  align-items: flex-start;
  margin-block: var(--deck-space-lg);
  flex: 1;
}

.deck-problem__num {
  flex-shrink: 0;
  font-size: calc(20px * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  color: var(--color-text);
  opacity: 1;
}

.deck-problem__text {
  margin: 0;
  font-size: calc(var(--text-md) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  letter-spacing: var(--text-md-letter-spacing);
  color: var(--color-text);
  opacity: 1;
}

/* —— How it works split —— */
.deck-slide__content--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "eyebrow eyebrow"
    "title ."
    "main pressure";
  column-gap: var(--deck-space-xl);
  row-gap: 0;
  align-items: start;
}

.deck-slide__content--split > .deck-eyebrow {
  grid-area: eyebrow;
  margin-bottom: calc(40px * var(--deck-coord-scale));
}

.deck-slide__content--split > .deck-title {
  grid-area: title;
  margin-top: 0;
  margin-bottom: calc(44px * var(--deck-coord-scale));
}

.deck-slide__content--split > .deck-title .deck-title__line:first-child {
  white-space: nowrap;
}

.deck-split__main {
  grid-area: main;
  min-width: 0;
  margin-top: calc(10px * var(--deck-coord-scale));
}

.deck-tech-pressure {
  grid-area: pressure;
  --subpage-coord-scale: var(--deck-coord-scale);
  align-self: start;
  min-width: 0;
  width: 100%;
}

.deck-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--deck-space-lg);
}

.deck-slide__content--split .deck-steps {
  margin-top: calc(70px * var(--deck-coord-scale));
}

.deck-steps__item {
  display: grid;
  grid-template-columns: calc(40px * var(--deck-coord-scale)) 1fr;
  gap: var(--deck-space-md);
  align-items: start;
}

.deck-steps__num {
  font-size: calc(var(--h2-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h2-bold-weight);
  line-height: var(--h2-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-accent);
}

.deck-steps__title {
  margin: 0 0 var(--deck-space-xs);
  font-size: calc(var(--h1-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h1-bold-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: #ffffff;
  opacity: 1;
}

.deck-steps__text {
  margin: 0;
  font-size: calc(var(--text-md) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: var(--text-md-line-height);
  letter-spacing: var(--text-md-letter-spacing);
  color: #ffffff;
  opacity: 1;
}

/* Interactive pressure chart — jak-dziala #pressure panel (deck-scoped) */
.deck-tech-pressure__panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text);
  margin-top: calc(-60px * var(--deck-coord-scale));
}

.deck-tech-pressure__readout {
  display: flex;
  align-items: stretch;
  gap: var(--deck-space-md);
  margin-bottom: var(--deck-space-md);
  flex-wrap: wrap;
}

.deck-tech-pressure__readout-box.deck-card {
  --deck-card-radius: calc(var(--btn-radius) * var(--deck-coord-scale));
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  border-radius: var(--deck-card-radius);
  overflow: hidden;
}

.deck-tech-pressure__readout-box .deck-card__content {
  padding-inline: calc(20px * var(--deck-coord-scale));
  padding-block: calc(10px * var(--deck-coord-scale));
  text-align: center;
  min-height: calc(48px * var(--deck-coord-scale));
  justify-content: center;
  box-sizing: border-box;
}

.deck-tech-pressure__readout-box .deck-card__content span:not([class]) {
  display: block;
  font-size: calc(16px * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  margin-bottom: calc(5px * var(--deck-coord-scale));
}

.deck-tech-pressure__readout-num {
  display: inline;
  font-size: calc(32px * var(--deck-coord-scale));
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.deck-tech-pressure__readout-unit {
  display: inline;
  font-size: calc(16px * var(--deck-coord-scale));
  font-weight: var(--font-weight-medium);
  line-height: 1;
  margin-left: calc(4px * var(--deck-coord-scale));
  vertical-align: baseline;
}

.deck-tech-pressure__chart {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(6px * var(--deck-coord-scale));
}

.deck-tech-pressure__chart text {
  fill: var(--color-text);
}

.deck-tech-pressure__chart polyline {
  stroke: var(--color-accent);
}

.deck-tech-pressure__chart #ind-dot {
  fill: var(--color-accent);
  stroke: var(--color-text);
}

.deck-tech-pressure__chart #ind-line {
  stroke: var(--color-accent);
}

.deck-tech-pressure__chart #zone-rect {
  fill: var(--color-accent);
  fill-opacity: 0.08;
}

.deck-tech-pressure__chart #zone-line-l,
.deck-tech-pressure__chart #zone-line-r {
  stroke: var(--color-accent);
}

.deck-tech-pressure__chart #zone-lbl {
  fill: var(--color-accent);
}

.deck-tech-pressure__chart stop {
  stop-color: var(--color-accent);
}

.deck-tech-pressure__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(4px * var(--deck-coord-scale));
  border-radius: calc(2px * var(--deck-coord-scale));
  background: linear-gradient(
    to right,
    var(--color-accent) 0%,
    var(--color-accent) var(--slider-pct, 100%),
    rgb(255 255 255 / 0.1) var(--slider-pct, 100%)
  );
  outline: none;
  cursor: pointer;
  margin-top: 0;
}

.deck-tech-pressure__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(24px * var(--deck-coord-scale));
  height: calc(24px * var(--deck-coord-scale));
  border-radius: 50%;
  background: var(--color-accent);
  border: calc(3px * var(--deck-coord-scale)) solid #fff;
  cursor: pointer;
}

.deck-tech-pressure__slider::-moz-range-thumb {
  width: calc(24px * var(--deck-coord-scale));
  height: calc(24px * var(--deck-coord-scale));
  border-radius: 50%;
  background: var(--color-accent);
  border: calc(3px * var(--deck-coord-scale)) solid #fff;
  cursor: pointer;
}

.deck-tech-pressure__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--deck-space-sm);
  font-size: calc(var(--text-sm) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: var(--text-sm-line-height);
  margin-top: var(--deck-space-xs);
  margin-bottom: var(--deck-space-xs);
  color: var(--color-text);
  opacity: 1;
}

.deck-tech-pressure__zone-wrap {
  position: relative;
  display: grid;
  grid-template-areas: "zone";
  margin: 0;
}

.deck-tech-pressure__zone-wrap > * {
  grid-area: zone;
}

.deck-tech-pressure__zone--spacer {
  visibility: hidden;
  pointer-events: none;
}

.deck-tech-pressure__zone {
  margin: 0;
  align-self: start;
  border-left: 1.5px solid #ffffff;
  padding-inline-start: var(--deck-space-md);
  font-size: calc(var(--text-sm) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: var(--text-sm-line-height);
  color: var(--color-text);
  opacity: 1;
}

.deck-tech-pressure__zone.is-green {
  border-left-color: #ffffff;
}

/* —— Effects —— */
.deck-slide__content--effects {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--deck-space-lg);
}

.deck-effects__intro {
  min-width: 0;
}

.deck-effects__intro .deck-title {
  margin-bottom: 0;
}

.deck-effects__body {
  --deck-effects-side-w: calc((100% - 3 * var(--deck-space-md)) / 4);
  display: grid;
  grid-template-columns:
    var(--deck-effects-side-w)
    minmax(0, 1fr)
    var(--deck-effects-side-w);
  gap: 0;
  align-items: stretch;
  min-width: 0;
  flex: 1;
}

.deck-effects__visual {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin-inline: 0;
}

.deck-effect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--deck-space-md);
  margin-top: 0;
  width: 100%;
  max-width: none;
}

.deck-slide__content--effects .deck-effect-grid--side {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  align-self: center;
  align-content: start;
  align-items: stretch;
  width: 100%;
  max-width: none;
}

.deck-slide__content--effects .deck-effect {
  height: 100%;
  align-self: stretch;
}

.deck-slide__content--effects .deck-effect .deck-card__content {
  height: 100%;
}

.deck-effect .deck-card__content {
  padding: var(--deck-card-pad-block) var(--deck-card-pad-inline);
  gap: var(--deck-space-sm);
}

/* System logistics brochure — same assets + behaviour as /system/ #logistics */
.deck-brochure {
  position: relative;
  width: 100%;
}

.deck-effects__body .deck-brochure {
  /* 20% smaller than system logistics (scale 1.2 → 0.96) */
  transform: scale(0.96);
  transform-origin: center center;
  margin-block: 0;
  max-width: 100%;
  max-height: none;
  width: 100%;
  flex-shrink: 0;
}

.deck-brochure__img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: auto;
}

.deck-brochure__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deck-brochure__flow-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity calc(225ms * var(--motion-duration-scale, 1))
    var(--motion-ease-out);
}

.deck-brochure__flow-arrow.is-lit {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .deck-brochure__flow-arrow {
    opacity: 1;
    transition: none;
  }
}

html.perf-tier-low .deck-brochure__flow-arrow {
  opacity: 1;
  transition: none;
}

.deck-effect__label {
  margin: 0;
  font-size: calc(var(--h1-medium-size) * var(--deck-coord-scale));
  font-weight: var(--h1-medium-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 1;
}

.deck-effect__value {
  margin: 0;
  font-size: calc(var(--h2-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h2-bold-weight);
  line-height: var(--h2-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
  opacity: 1;
}

.deck-effect__text {
  margin: 0;
  font-size: calc(var(--text-md) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: var(--text-md-line-height);
  letter-spacing: var(--text-md-letter-spacing);
  color: var(--color-text);
  opacity: 1;
}

/* —— Segment (Bakery / Catering / Liquids) —— */
.deck-slide__content--segment {
  /* Same footprint as the 2×2 card block (two of four 1×4 card widths + one gap) */
  --deck-segment-cards-w: calc(
    2 * ((100% - 3 * var(--deck-space-md)) / 4) + var(--deck-space-md)
  );
  display: grid;
  grid-template-columns: var(--deck-segment-cards-w) minmax(0, 1fr);
  /* Match page 4: intro on top, cards vertically centered in remaining space */
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "intro visual"
    "cards visual";
  column-gap: var(--deck-space-xl);
  row-gap: var(--deck-space-lg);
  align-items: start;
  min-height: 0;
}

.deck-segment__intro {
  grid-area: intro;
  align-self: start;
  min-width: 0;
}

.deck-segment__intro .deck-eyebrow {
  white-space: nowrap;
}

.deck-segment__visual {
  grid-area: visual;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.deck-segment__visual-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(560px * var(--deck-coord-scale));
  height: auto;
  object-fit: contain;
  object-position: right center;
  transform: scale(1.4);
  transform-origin: right center;
  pointer-events: none;
}

/* Bakery + Catering only — +30% on top of base packshot scale */
.deck-slide[data-slide="6"] .deck-segment__visual-img,
.deck-slide[data-slide="7"] .deck-segment__visual-img {
  transform: scale(1.82);
}

.deck-slide__content--segment .deck-effect-grid {
  grid-area: cards;
  margin-top: 0;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  /* Same card width as 1×4; layout → 2×2 within cards footprint */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* —— Product line —— */
.deck-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--deck-space-xl);
  margin-top: var(--deck-space-xs);
  width: 100%;
}

.deck-product .deck-card__content {
  /* Wiki rhythm: 40px card internal / element gaps (layout-scaling-system) */
  padding: var(--deck-space-lg);
  gap: 0;
  min-height: calc(340px * var(--deck-coord-scale));
  height: 100%;
}

.deck-product__name {
  margin: 0;
}

.deck-product__logo {
  display: block;
  width: auto;
  max-width: calc(240px * var(--deck-coord-scale));
  height: calc(66px * var(--deck-coord-scale));
  object-fit: contain;
  object-position: left center;
}

.deck-product__audience {
  margin: calc(15px * var(--deck-coord-scale)) 0;
  font-size: calc(var(--h1-light-size) * var(--deck-coord-scale));
  font-weight: var(--h1-light-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
  opacity: 1;
  white-space: nowrap;
}

.deck-product__models {
  list-style: none;
  margin: 0;
  margin-top: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--deck-space-md);
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
}

.deck-product__model.deck-card {
  --deck-card-radius: calc(var(--btn-radius) * var(--deck-coord-scale));
  width: 100%;
}

.deck-product__model .deck-card__body,
html.blend-enhanced .deck-product__model .deck-card__body,
html:not(.blend-enhanced) .deck-product__model .deck-card__body {
  opacity: 1;
  background-color: rgb(255 255 255 / 0.2);
  filter: none;
  mix-blend-mode: normal;
}

.deck-product__model .deck-card__content {
  padding: calc(24px * var(--deck-coord-scale));
  gap: var(--deck-space-xs);
  min-height: 0;
  height: auto;
}

.deck-product__model-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--deck-space-sm);
  width: 100%;
}

.deck-product__model-name {
  margin: 0;
  font-size: calc(var(--text-md) * var(--deck-coord-scale));
  font-weight: var(--font-weight-medium);
  line-height: var(--text-md-line-height);
  letter-spacing: var(--text-md-letter-spacing);
  color: var(--color-text);
}

.deck-product__model-code {
  margin: 0;
  flex-shrink: 0;
  font-size: calc(var(--text-sm) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: var(--text-sm-line-height);
  letter-spacing: var(--text-sm-letter-spacing);
  color: var(--color-text);
  opacity: 1;
}

.deck-product__model-desc {
  margin: 0;
  font-size: calc(var(--text-sm) * var(--deck-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: var(--text-sm-line-height);
  letter-spacing: var(--text-sm-letter-spacing);
  color: var(--color-text);
  opacity: 1;
}

.deck-trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--deck-space-md);
  margin-top: var(--deck-space-lg);
  width: 100%;
}

.deck-trust .deck-card__body,
html.blend-enhanced .deck-trust .deck-card__body,
html:not(.blend-enhanced) .deck-trust .deck-card__body {
  opacity: 1;
  background-color: var(--service-card-body-bg);
  filter: none;
  mix-blend-mode: normal;
}

.deck-trust .deck-card__content {
  padding: var(--deck-card-pad-block) var(--deck-card-pad-inline);
  min-height: calc(140px * var(--deck-coord-scale));
  height: 100%;
  justify-content: center;
  text-align: left;
}

.deck-trust__value {
  margin: 0 0 var(--deck-space-xs);
  font-size: calc(var(--h2-bold-size) * var(--deck-coord-scale));
  font-weight: var(--h2-bold-weight);
  line-height: var(--h2-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
}

.deck-trust__label {
  margin: 0;
  font-size: calc(var(--h1-light-size) * var(--deck-coord-scale));
  font-weight: var(--h1-light-weight);
  line-height: var(--h1-line-height-ratio);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
  opacity: 1;
}

/* —— CTA slide —— */
.deck-slide__content--cta {
  justify-content: flex-start;
}

.deck-cta__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--deck-space-xl);
  align-items: start;
  margin-top: auto;
  width: 100%;
  min-height: 0;
}

.deck-cta-checklist {
  max-width: calc(780px * var(--deck-coord-scale));
  width: 100%;
}

.deck-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.deck-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--service-checklist-item-gap);
  padding-block: var(--service-checklist-item-padding-top);
}

.deck-checklist__item:first-child {
  padding-top: 0;
}

.deck-checklist__item:not(:first-child) {
  border-top: var(--separator-width) solid var(--separator-color);
}

.deck-checklist__tick {
  flex-shrink: 0;
  width: var(--service-tick-icon-width);
  height: var(--service-tick-icon-height);
  margin-top: calc(4px * var(--deck-coord-scale));
}

.deck-checklist__copy {
  min-width: 0;
}

.deck-checklist__title {
  margin: 0 0 var(--service-checklist-title-margin-bottom);
  font-size: calc(var(--h1-medium-size) * var(--deck-coord-scale));
  line-height: var(--h1-line-height-ratio);
  font-weight: var(--service-checklist-title-weight);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
}

.deck-checklist__text {
  margin: 0;
  font-size: calc(var(--text-md) * var(--deck-coord-scale));
  line-height: var(--text-md-line-height);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--text-md-letter-spacing);
  color: var(--color-text);
}

/* Hero-style cascade (contact cards) */
.deck-cascade {
  position: relative;
  margin-top: 0;
  margin-left: 0;
  width: calc(
    var(--hero-card-width) - 2 * var(--hero-card-cascade-dx)
  );
  height: calc(
    var(--hero-card-height) + 2 * var(--hero-card-cascade-dy)
  );
  flex-shrink: 0;
}

.deck-cascade__card {
  position: absolute;
  width: var(--hero-card-width);
  height: var(--hero-card-height);
  left: calc(100% - var(--hero-card-width));
  top: 0;
  transition: transform var(--hero-card-hover-duration) var(--motion-ease-out);
}

.deck-cascade__card[data-card="1"] {
  z-index: var(--hero-card-content-z-1);
}

.deck-cascade__card[data-card="2"] {
  z-index: var(--hero-card-content-z-2);
  left: calc(100% - var(--hero-card-width) + var(--hero-card-cascade-dx));
  top: var(--hero-card-cascade-dy);
}

.deck-cascade__card[data-card="3"] {
  z-index: var(--hero-card-content-z-3);
  left: calc(100% - var(--hero-card-width) + 2 * var(--hero-card-cascade-dx));
  top: calc(2 * var(--hero-card-cascade-dy));
}

.deck-cascade__card:hover,
.deck-cascade__card:focus-within {
  transform: translateX(var(--hero-card-hover-shift-x));
}

.deck-cascade__outline,
.deck-cascade__body {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.deck-cascade__outline {
  z-index: 2;
  background: center / 100% 100% no-repeat var(--hero-card-outline-image);
}

.deck-cascade__body {
  z-index: 1;
  -webkit-mask-image: url("../../assets/svg/hero_card_body.svg");
  mask-image: url("../../assets/svg/hero_card_body.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.deck-cascade__body-fill {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--soft-light-wash-fill-fallback);
  filter: brightness(var(--color-accent-fallback-brightness))
    saturate(var(--color-accent-fallback-saturate));
  transition: background-color var(--hero-card-hover-duration) var(--motion-ease-out),
    filter var(--hero-card-hover-duration) var(--motion-ease-out);
}

html.blend-enhanced .deck-cascade__body {
  opacity: 0;
}

.deck-cascade__card:hover .deck-cascade__body-fill,
.deck-cascade__card:focus-within .deck-cascade__body-fill {
  background-color: var(--soft-light-wash-fill-hover-fallback);
  filter: brightness(var(--color-accent-fallback-brightness-hover))
    saturate(var(--color-accent-fallback-saturate-hover));
}

.deck-cascade__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--hero-card-text-gap);
  box-sizing: border-box;
  padding: var(--hero-card-content-padding);
  padding-left: calc(
    var(--hero-card-content-padding) + var(--hero-card-content-inset-x) +
      40px * var(--deck-coord-scale)
  );
  padding-right: var(--hero-card-content-padding-right);
  color: var(--color-text);
  text-decoration: none;
}

.deck-cascade__upper {
  margin: 0;
  font-size: calc(40px * var(--deck-coord-scale));
  line-height: var(--hero-card-text-upper-line-height);
  font-weight: var(--h2-bold-weight);
  letter-spacing: var(--hero-card-text-upper-letter-spacing);
}

.deck-cascade__lower {
  margin: 0;
  font-size: calc(30px * var(--deck-coord-scale));
  line-height: var(--hero-card-text-lower-line-height);
  font-weight: var(--hero-card-text-lower-weight);
  letter-spacing: var(--hero-card-text-lower-letter-spacing);
  white-space: nowrap;
  color: var(--color-text);
}

.deck-cascade__arrow {
  position: absolute;
  right: var(--hero-card-arrow-offset-right);
  top: 50%;
  width: var(--hero-card-arrow-width);
  height: var(--hero-card-arrow-height);
  transform: translateY(-50%);
  transition: transform var(--hero-card-hover-duration) var(--motion-ease-out);
}

.deck-cascade__card:hover .deck-cascade__arrow,
.deck-cascade__card:focus-within .deck-cascade__arrow {
  transform: translateY(-50%) translateX(var(--hero-card-hover-arrow-shift-x));
}

.deck-blend-layers .deck-cascade-wash {
  position: absolute;
  pointer-events: none;
  -webkit-mask-image: url("../../assets/svg/hero_card_body.svg");
  mask-image: url("../../assets/svg/hero_card_body.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.deck-blend-layers .deck-cascade-wash__fill {
  width: 100%;
  height: 100%;
  background-color: var(--soft-light-wash-fill-enhanced);
  transition: background-color var(--hero-card-hover-duration) var(--motion-ease-out);
}

.deck-blend-layers .deck-cascade-wash.is-hover .deck-cascade-wash__fill {
  background-color: var(--soft-light-wash-fill-hover-enhanced);
}

/* —— Chrome UI (fixed screen band below scaled stage) —— */
.deck-chrome {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  padding-top: var(--deck-chrome-pad);
  padding-bottom: var(--deck-chrome-pad);
  padding-inline: var(--deck-chrome-inline-inset);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  background-color: var(--color-bg);
  border-top: var(--outline-width) solid var(--outline-color);
}

.deck-chrome__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  width: 100%;
}

.deck-chrome__contact {
  margin: 0;
  justify-self: start;
  max-width: 100%;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.55);
  text-wrap: balance;
}

.deck-chrome__link {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.deck-chrome__link:hover,
.deck-chrome__link:focus-visible {
  opacity: var(--color-text-hover-opacity);
  outline: none;
}

.deck-chrome__balance {
  justify-self: stretch;
  min-width: 0;
}

.deck-dots {
  display: flex;
  gap: 8px;
  justify-self: center;
  pointer-events: auto;
}

.deck-dots__btn {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.35);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    transform var(--motion-duration-fast) var(--motion-ease-out);
}

.deck-dots__btn.is-active {
  background: var(--color-text);
  transform: scale(1.25);
}

.deck-dots__btn:hover,
.deck-dots__btn:focus-visible {
  background: rgb(255 255 255 / 0.85);
  outline: none;
}

.deck-counter {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.55);
  font-variant-numeric: tabular-nums;
}

.deck-counter__sep {
  margin: 0 4px;
  opacity: 0.6;
}

.deck-hint {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.4);
  opacity: 1;
  transition: opacity 600ms var(--motion-ease-out);
}

.deck-hint.is-hidden {
  /* Keep chrome height stable — equal pad above/below nav */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .deck-slide {
    transition: none;
  }

  .deck-hint {
    transition: none;
  }
}