:root {
  --test-green: #0f9343;
  --test-ink: #f7fff9;
  --test-mint: #8ff0bc;
  --test-panel: #052d22;
  --test-panel-deep: #031b16;
  --test-page: #edf7f0;
  --test-blue-x: -.938%;
  --test-blue-y: 28.403%;
  --test-green-x: 0%;
  --test-green-y: 16.825%;
  --test-base-x: 0%;
  --test-base-y: 6.2%;
  --test-layer-top: -104px;
  --test-visual-shift-y: 0px;
  --test-intro-opacity: 1;
  --test-intro-shift: 0px;
  --test-step-one-opacity: 0;
  --test-step-two-opacity: 0;
  --test-step-three-opacity: 0;
  --test-step-one-shift: 32px;
  --test-step-two-shift: 32px;
  --test-step-three-shift: 32px;
  --test-steps-shift-y: 0px;
  --test-step-one-layer-shift: 0px;
  --test-step-two-layer-shift: 0px;
  --test-step-three-layer-shift: 0px;
  --test-step-one-top: 28px;
  --test-step-two-top: 174px;
  --test-step-three-top: 366px;
  --test-connector-one-width: 180px;
  --test-connector-two-width: 110px;
  --test-connector-three-width: 110px;
  --test-connector-one-draw: 0;
  --test-connector-two-draw: 0;
  --test-connector-three-draw: 0;
  --test-connector-one-angle: 0deg;
  --test-connector-two-angle: 0deg;
  --test-connector-three-angle: 0deg;
  --test-cta-opacity: 1;
  --test-cta-shift: 0px;
  --test-benefits-opacity: 1;
  --test-benefits-shift: 0px;
  --test-benefit-one-opacity: 1;
  --test-benefit-two-opacity: 1;
  --test-benefit-three-opacity: 1;
  --test-benefit-one-shift: 0px;
  --test-benefit-two-shift: 0px;
  --test-benefit-three-shift: 0px;
  --test-dust-opacity: 0;
  --test-dust-shift: 18px;
  --test-dust-shift-inverse: -18px;
  --test-glow-opacity: .22;
  --test-blue-scale: 1;
  --test-green-scale: 1;
  --test-base-scale: 1;
}

.tablet-test-page,
.tablet-test-page *,
.tablet-test-animation,
.tablet-test-animation *,
.tablet-composition-modal,
.tablet-composition-modal * {
  box-sizing: border-box;
}

html.tablet-test-document {
  min-height: 100%;
  color-scheme: light;
  background: var(--test-green);
}

body.tablet-test-body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--test-ink);
  background: var(--test-page);
  font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.tablet-composition-lock {
  overflow: hidden;
}

.tablet-test-page img,
.tablet-test-animation img,
.tablet-composition-modal img {
  display: block;
  max-width: 100%;
}

.tablet-test-page {
  min-height: 100vh;
  overflow-x: clip;
}

.tablet-test-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #ffffff;
  background: var(--test-green);
}

.tablet-test-screen p {
  max-width: 720px;
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
  text-align: center;
}

.tablet-test-animation {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: clip;
  background: var(--test-panel);
}

.tablet-test-sticky {
  position: relative;
  top: auto;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--test-panel);
}

.tablet-test-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, clamp(320px, 20vw, 390px)) minmax(300px, 1fr) minmax(clamp(330px, 23.7vw, 455px), clamp(330px, 23.7vw, 455px));
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy visual steps"
    "benefits benefits benefits";
  column-gap: 28px;
  padding: 0 max(95px, calc((100vw - 1500px) / 2)) 28px;
  overflow: hidden;
  contain: layout paint style;
  border: 0;
  border-radius: 0;
  background: var(--test-panel-deep);
  box-shadow: none;
}

.tablet-test-scene::before,
.tablet-test-scene::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: clamp(84px, 13svh, 144px);
  pointer-events: none;
}

.tablet-test-scene::before {
  top: 0;
  background: linear-gradient(
    180deg,
    var(--test-green) 0%,
    rgba(15, 147, 67, .76) 26%,
    rgba(7, 75, 49, .36) 62%,
    rgba(3, 27, 22, 0) 100%
  );
}

.tablet-test-scene::after {
  bottom: 0;
  background: linear-gradient(
    0deg,
    var(--test-green) 0%,
    rgba(15, 147, 67, .76) 26%,
    rgba(7, 75, 49, .36) 62%,
    rgba(3, 27, 22, 0) 100%
  );
}

.tablet-test-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--test-panel-deep);
  background-image: none;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.tablet-test-animation.is-tablet-test-ready .tablet-test-backdrop {
  background-image: url("/assets/images/tablet-animation-test/tablet-podium-background-2560.webp?v=20260813-1");
}

.tablet-test-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 17, 14, .3), transparent 24% 76%, rgba(0, 17, 14, .3));
  pointer-events: none;
}

.tablet-test-autoplay-trigger {
  position: absolute;
  top: var(--test-podium-contact-y, 62%);
  left: 50%;
  z-index: -1;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.tablet-test-animation.is-tablet-test-reassembling .tablet-test-steps {
  pointer-events: none;
}

.tablet-test-copy {
  grid-area: copy;
  z-index: 4;
  align-self: center;
  max-width: 330px;
  margin-top: -18px;
  opacity: var(--test-intro-opacity);
  transform: translate3d(var(--test-intro-shift), 0, 0);
}

.tablet-test-eyebrow {
  margin: 0 0 32px;
  color: #43d990;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

.tablet-test-copy h1 {
  position: relative;
  margin: 0;
  color: #ffffff;
  font-size: 42px;
  font-weight: 780;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
}

.tablet-test-copy h1::after {
  content: "";
  display: block;
  width: 104px;
  height: 1px;
  margin-top: 34px;
  background: linear-gradient(90deg, #a8ffd0, rgba(82, 239, 157, .08));
  box-shadow: 0 0 9px rgba(102, 255, 176, .65);
}

.tablet-test-copy h1 span {
  display: block;
  white-space: nowrap;
}

.tablet-test-description {
  max-width: 330px;
  margin: 34px 0 0;
  color: rgba(244, 255, 248, .88);
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: 0;
}

.tablet-test-composition-trigger {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 18px;
  border: 1px solid rgba(143, 240, 188, .68);
  border-radius: 8px;
  color: #063d25;
  background: linear-gradient(180deg, #f8fffb, #dff9ea);
  box-shadow: 0 10px 26px rgba(1, 18, 12, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
}

.tablet-test-composition-trigger:hover {
  color: #032d1b;
  background: linear-gradient(180deg, #ffffff, #c9f6dc);
}

.tablet-test-composition-trigger:focus-visible {
  outline: 3px solid #8ff0bc;
  outline-offset: 4px;
}

.tablet-test-visual {
  grid-area: visual;
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  transform: translate3d(0, var(--test-visual-shift-y), 0);
}

.tablet-test-animation.is-tablet-test-complete .tablet-test-visual {
  cursor: pointer;
}

.tablet-test-animation.is-tablet-test-reassembling .tablet-test-visual {
  cursor: default;
}

.tablet-test-stage {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: visible;
}

.tablet-test-layer {
  position: absolute;
  top: var(--test-layer-top);
  left: 50%;
  width: min(146%, 720px, 72vh);
  height: auto;
  max-width: none;
  pointer-events: none;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: filter 220ms ease, opacity 220ms ease;
}

.tablet-test-animation.is-tablet-test-active .tablet-test-visual,
.tablet-test-animation.is-tablet-test-active .tablet-test-layer {
  will-change: transform;
}

.tablet-test-layer--base,
.tablet-test-layer--base-front {
  transform: translate3d(calc(-50% + var(--test-base-x)), var(--test-base-y), 0) scale(var(--test-base-scale));
  transform-origin: 49.844% 56.602%;
}

.tablet-test-layer--green,
.tablet-test-layer--green-front {
  transform: translate3d(calc(-50% + var(--test-green-x)), var(--test-green-y), 0) scale(var(--test-green-scale));
  transform-origin: 49.792% 37.227%;
}

.tablet-test-layer--blue {
  transform: translate3d(calc(-50% + var(--test-blue-x)), var(--test-blue-y), 0) scale(var(--test-blue-scale));
  transform-origin: 51.042% 22.539%;
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus] .tablet-test-layer {
  opacity: .42;
  filter: grayscale(1) saturate(.08) brightness(.66);
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="one"] {
  --test-blue-scale: 1.15;
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] {
  --test-green-scale: 1.15;
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] {
  --test-base-scale: 1.15;
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="one"] .tablet-test-layer--blue,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] .tablet-test-layer--green,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] .tablet-test-layer--green-front,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] .tablet-test-layer--base,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] .tablet-test-layer--base-front {
  opacity: 1;
  filter: none;
}

.tablet-test-layer--base {
  z-index: 1;
}

.tablet-test-layer--green {
  z-index: 2;
}

.tablet-test-layer--blue {
  z-index: 3;
}

.tablet-test-layer--green-front {
  z-index: 4;
}

.tablet-test-layer--base-front {
  z-index: 5;
}

.tablet-test-glow {
  position: absolute;
  left: 50%;
  bottom: 17%;
  z-index: 0;
  width: 76%;
  height: 18%;
  border-radius: 50%;
  opacity: var(--test-glow-opacity);
  transform: translate3d(-50%, 0, 0);
  background: radial-gradient(ellipse at center, rgba(72, 247, 161, .56), rgba(22, 174, 103, .16) 42%, transparent 72%);
  pointer-events: none;
}

.tablet-test-dust {
  position: absolute;
  z-index: 6;
  opacity: var(--test-dust-opacity);
  transform: translate3d(0, var(--test-dust-shift), 0);
  background-image:
    radial-gradient(circle at 8% 19%, rgba(220, 255, 235, .92) 0 1px, transparent 1.7px),
    radial-gradient(circle at 17% 72%, rgba(124, 255, 188, .78) 0 1.2px, transparent 2px),
    radial-gradient(circle at 26% 34%, rgba(240, 255, 246, .82) 0 .9px, transparent 1.8px),
    radial-gradient(circle at 34% 86%, rgba(140, 245, 189, .74) 0 1.1px, transparent 2px),
    radial-gradient(circle at 42% 12%, rgba(244, 255, 249, .9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 49% 58%, rgba(126, 255, 188, .82) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 57% 82%, rgba(235, 255, 243, .86) 0 .9px, transparent 1.8px),
    radial-gradient(circle at 64% 27%, rgba(149, 255, 201, .78) 0 1.2px, transparent 2px),
    radial-gradient(circle at 73% 67%, rgba(238, 255, 245, .9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 81% 13%, rgba(129, 255, 188, .74) 0 1.2px, transparent 2px),
    radial-gradient(circle at 89% 48%, rgba(244, 255, 248, .9) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 95% 84%, rgba(142, 255, 197, .78) 0 1.1px, transparent 2px);
  pointer-events: none;
}

.tablet-test-dust--upper {
  top: 8%;
  left: 18%;
  width: 64%;
  height: 42%;
}

.tablet-test-dust--lower {
  top: 34%;
  left: 10%;
  width: 80%;
  height: 46%;
  transform: translate3d(0, var(--test-dust-shift-inverse), 0) scaleX(-1);
}

.tablet-test-steps {
  grid-area: steps;
  z-index: 4;
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 18px;
  padding: 46px 0 24px;
  transition: opacity 220ms ease, transform 260ms ease;
}

.tablet-test-step {
  --test-connector-line: rgba(126, 245, 181, .98);
  --test-connector-fade: rgba(174, 255, 212, .42);
  --test-connector-tip: rgba(204, 255, 226, .92);
  --test-connector-dot: #8ff0bc;
  --test-connector-halo: rgba(102, 237, 167, .16);
  --test-connector-glow: rgba(113, 255, 181, .86);
  position: relative;
  width: 100%;
  max-width: 330px;
  min-height: 116px;
  align-self: center;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(188, 255, 219, .38);
  border-radius: 8px;
  color: #effff5;
  background: rgba(4, 47, 36, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 24px rgba(29, 179, 105, .07);
  cursor: default;
  transition: filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.tablet-test-step:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

.tablet-test-connector {
  position: absolute;
  top: 50%;
  right: 100%;
  z-index: -1;
  width: 100px;
  height: 24px;
  transform: translate3d(0, -50%, 0);
  transform-origin: 100% 50%;
  pointer-events: none;
}

.tablet-test-connector svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: var(--test-connector-draw, 0);
}

.tablet-test-connector__line {
  fill: none;
  stroke: var(--test-connector-line);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px var(--test-connector-glow));
}

.tablet-test-connector__tip {
  fill: var(--test-connector-line);
  stroke: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px var(--test-connector-glow));
}

.tablet-test-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  opacity: var(--test-connector-draw, 0);
  background: var(--test-connector-dot);
  box-shadow: 0 0 0 5px var(--test-connector-halo), 0 0 18px var(--test-connector-glow);
  transform: translate3d(-50%, -50%, 0);
}

.tablet-test-step__icon,
.tablet-test-benefit__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(116, 245, 179, .42);
  border-radius: 50%;
  color: var(--test-mint);
  box-shadow: inset 0 0 18px rgba(31, 198, 113, .06);
}

.tablet-test-step__icon {
  width: 62px;
  height: 62px;
}

.tablet-test-benefit__icon {
  width: 74px;
  height: 56px;
  border: 0;
  border-radius: 0;
  color: inherit;
  box-shadow: none;
}

.tablet-test-step__icon svg {
  width: 31px;
  height: 31px;
}

.tablet-test-benefit__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(142, 255, 196, .18));
}

.tablet-test-step__icon svg,
.tablet-test-benefit__icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tablet-test-step__content {
  min-width: 0;
}

.tablet-test-step h2 {
  margin: 0;
  color: var(--test-mint);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0;
}

.tablet-test-step p {
  margin: 8px 0 0;
  color: rgba(244, 255, 248, .86);
  font-size: 15px;
  line-height: 1.42;
  letter-spacing: 0;
}

.tablet-test-step--one {
  --test-connector-line: rgba(111, 163, 255, 1);
  --test-connector-fade: rgba(154, 194, 255, .42);
  --test-connector-tip: rgba(190, 216, 255, .96);
  --test-connector-dot: #76a8ff;
  --test-connector-halo: rgba(82, 139, 255, .2);
  --test-connector-glow: rgba(91, 151, 255, .96);
  border-color: rgba(157, 200, 255, .96);
  color: #ffffff;
  background: rgba(18, 91, 219, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 28px rgba(52, 126, 255, .3);
  opacity: var(--test-step-one-opacity);
  transform: translate3d(var(--test-step-one-shift), 0, 0);
}

.tablet-test-step--one .tablet-test-connector {
  --test-connector-draw: var(--test-connector-one-draw);
}

.tablet-test-step--two {
  --test-connector-line: rgba(101, 255, 151, 1);
  --test-connector-fade: rgba(153, 255, 186, .42);
  --test-connector-tip: rgba(192, 255, 212, .96);
  --test-connector-dot: #68ff9c;
  --test-connector-halo: rgba(73, 255, 134, .19);
  --test-connector-glow: rgba(84, 255, 143, .92);
  border-color: rgba(144, 255, 185, .92);
  color: #ffffff;
  background: rgba(12, 157, 72, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 28px rgba(43, 232, 119, .24);
  opacity: var(--test-step-two-opacity);
  transform: translate3d(var(--test-step-two-shift), 0, 0);
}

.tablet-test-step--two .tablet-test-connector {
  --test-connector-draw: var(--test-connector-two-draw);
}

.tablet-test-step--three {
  --test-connector-line: rgba(255, 255, 255, 1);
  --test-connector-fade: rgba(241, 255, 247, .4);
  --test-connector-tip: rgba(255, 255, 255, .98);
  --test-connector-dot: #ffffff;
  --test-connector-halo: rgba(230, 255, 240, .2);
  --test-connector-glow: rgba(236, 255, 244, .94);
  border-color: rgba(255, 255, 255, .98);
  color: #073a28;
  background: rgba(250, 255, 252, .97);
  box-shadow: inset 0 1px 0 #ffffff, 0 0 28px rgba(229, 255, 240, .22);
  opacity: var(--test-step-three-opacity);
  transform: translate3d(var(--test-step-three-shift), 0, 0);
}

.tablet-test-step--three .tablet-test-connector {
  --test-connector-draw: var(--test-connector-three-draw);
}

.tablet-test-step--one h2,
.tablet-test-step--two h2,
.tablet-test-step--one p,
.tablet-test-step--two p {
  color: #ffffff;
}

.tablet-test-step--one .tablet-test-step__icon,
.tablet-test-step--two .tablet-test-step__icon {
  border-color: rgba(255, 255, 255, .62);
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
}

.tablet-test-step--three h2 {
  color: #075d32;
}

.tablet-test-step--three p {
  color: rgba(7, 58, 40, .82);
}

.tablet-test-step--three .tablet-test-step__icon {
  border-color: rgba(7, 93, 50, .34);
  color: #0b8d4c;
  background: rgba(15, 147, 67, .06);
}

.tablet-test-animation.is-tablet-test-complete .tablet-test-step {
  cursor: pointer;
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus] .tablet-test-step {
  filter: grayscale(1) saturate(0) brightness(.58);
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="one"] .tablet-test-step--one,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] .tablet-test-step--two,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] .tablet-test-step--three {
  filter: none;
}

@media (min-width: 1201px) {
  .tablet-test-steps {
    position: relative;
    display: block;
    padding: 0;
  }

  .tablet-test-step {
    position: absolute;
    right: -28px;
  }

  .tablet-test-step--one {
    top: var(--test-step-one-top);
    transform: translate3d(var(--test-step-one-shift), var(--test-steps-shift-y), 0);
  }

  .tablet-test-step--two {
    top: var(--test-step-two-top);
    transform: translate3d(var(--test-step-two-shift), var(--test-steps-shift-y), 0);
  }

  .tablet-test-step--three {
    top: var(--test-step-three-top);
    transform: translate3d(var(--test-step-three-shift), var(--test-steps-shift-y), 0);
  }

  .tablet-test-step--one .tablet-test-connector {
    width: var(--test-connector-one-width);
    transform: translate3d(0, -50%, 0) rotate(var(--test-connector-one-angle));
  }

  .tablet-test-step--two .tablet-test-connector {
    width: var(--test-connector-two-width);
    transform: translate3d(0, -50%, 0) rotate(var(--test-connector-two-angle));
  }

  .tablet-test-step--three .tablet-test-connector {
    width: var(--test-connector-three-width);
    transform: translate3d(0, -50%, 0) rotate(var(--test-connector-three-angle));
  }

}

.tablet-test-benefits {
  grid-area: benefits;
  position: relative;
  z-index: 6;
  min-height: 112px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(270px, 310px);
  align-items: center;
  gap: 0;
  padding: 14px 16px;
  border: 1px solid rgba(132, 241, 182, .35);
  border-radius: 8px;
  opacity: var(--test-benefits-opacity);
  background: rgba(4, 43, 34, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 16px 42px rgba(0, 12, 9, .18);
  transform: translate3d(0, var(--test-benefits-shift), 0);
}

.tablet-test-benefit {
  min-width: 0;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 22px;
  border-right: 1px solid rgba(126, 224, 173, .18);
}

.tablet-test-benefit:nth-child(1) {
  opacity: var(--test-benefit-one-opacity);
  transform: translate3d(var(--test-benefit-one-shift), 0, 0);
}

.tablet-test-benefit:nth-child(2) {
  opacity: var(--test-benefit-two-opacity);
  transform: translate3d(var(--test-benefit-two-shift), 0, 0);
}

.tablet-test-benefit:nth-child(3) {
  opacity: var(--test-benefit-three-opacity);
  transform: translate3d(var(--test-benefit-three-shift), 0, 0);
}

.tablet-test-benefit__icon {
  width: 54px;
  height: 54px;
}

.tablet-test-benefit__icon svg {
  width: 28px;
  height: 28px;
}

.tablet-test-benefit p {
  margin: 0;
  color: rgba(246, 255, 249, .88);
  font-size: 14px;
  line-height: 1.42;
}

.tablet-test-cta {
  z-index: 10;
  width: calc(100% - 16px);
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-left: 16px;
  padding: 16px 22px;
  border-radius: 8px;
  color: #075d32;
  background: #8ff0bc;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  opacity: var(--test-cta-opacity);
  transform: translate3d(0, var(--test-cta-shift), 0);
  box-shadow: 0 12px 28px rgba(0, 17, 9, .16);
}

.tablet-test-cta:hover {
  color: #034522;
  background: #b4ffd3;
}

.tablet-test-cta:focus-visible {
  outline: 3px solid #8ff0bc;
  outline-offset: 4px;
}

.tablet-test-cta__arrow {
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.tablet-composition-modal[hidden] {
  display: none;
}

.tablet-composition-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tablet-composition-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 14, .62);
  backdrop-filter: blur(6px);
}

.tablet-composition-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(7, 93, 50, .14);
  border-radius: 8px;
  color: #123b2b;
  background:
    linear-gradient(135deg, rgba(143, 240, 188, .16), transparent 42%),
    #ffffff;
  box-shadow: 0 28px 90px rgba(0, 19, 13, .32);
}

.tablet-composition-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(7, 93, 50, .14);
  border-radius: 50%;
  color: #075d32;
  background: #f3fbf6;
  font: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.tablet-composition-modal__close:hover {
  background: #e3f8ec;
}

.tablet-composition-modal__close:focus-visible {
  outline: 3px solid #8ff0bc;
  outline-offset: 3px;
}

.tablet-composition-modal__eyebrow {
  margin: 0 54px 12px 0;
  color: #0f9343;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tablet-composition-modal h2 {
  margin: 0;
  color: #062a1d;
  font-size: 34px;
  font-weight: 820;
  line-height: 1.12;
  letter-spacing: 0;
}

.tablet-composition-modal__lead {
  margin: 16px 0 0;
  color: rgba(18, 59, 43, .78);
  font-size: 17px;
  line-height: 1.55;
}

.tablet-composition-modal__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
}

.tablet-composition-modal__ingredient {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(7, 93, 50, .12);
  border-radius: 8px;
  background: #f7fcf9;
}

.tablet-composition-modal__ingredient--primary {
  border-color: rgba(15, 147, 67, .3);
  background: rgba(15, 147, 67, .1);
}

.tablet-composition-modal__ingredient--micro {
  min-height: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  background: #eef8f2;
}

.tablet-composition-modal__list dt {
  margin: 0;
  color: #133f2d;
  font-weight: 760;
  line-height: 1.35;
}

.tablet-composition-modal__list dd {
  align-self: flex-start;
  margin: 0;
  padding: 8px 11px;
  border-radius: 999px;
  color: #075d32;
  background: rgba(143, 240, 188, .24);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.tablet-composition-modal__ingredient--micro dd {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  white-space: normal;
}

.tablet-composition-modal__ingredient--micro dd span {
  padding: 8px 10px;
  border: 1px solid rgba(7, 93, 50, .1);
  border-radius: 999px;
  color: #075d32;
  background: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.15;
}

@media (max-width: 1200px) and (min-width: 761px) {
  .tablet-test-scene {
    grid-template-columns: minmax(0, 1fr) 236px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "copy steps"
      "visual steps"
      "benefits benefits";
    column-gap: 22px;
    padding: 30px;
  }

  .tablet-test-copy {
    position: relative;
    z-index: 8;
    align-self: start;
    max-width: 390px;
    padding: 16px 18px 18px 0;
    background: linear-gradient(90deg, rgba(1, 24, 19, .96), rgba(1, 24, 19, .78) 72%, transparent);
  }

  .tablet-test-eyebrow {
    margin-bottom: 18px;
    font-size: 14px;
  }

  .tablet-test-copy h1 {
    font-size: 36px;
    line-height: 1.12;
  }

  .tablet-test-description {
    max-width: 380px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.45;
  }

  .tablet-test-composition-trigger {
    min-height: 44px;
    margin-top: 16px;
    padding: 11px 15px;
    font-size: 14px;
  }

  .tablet-test-visual {
    min-height: 410px;
  }

  .tablet-test-stage {
    transform: translate3d(calc(50vw - 317px), 0, 0);
  }

  .tablet-test-layer {
    top: var(--test-layer-top);
    width: min(100%, 450px);
  }

  .tablet-test-backdrop {
    background-size: auto 118%;
  }

  .tablet-test-steps {
    gap: 10px;
    padding: 8px 0 18px;
  }

  .tablet-test-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    min-height: 102px;
    padding: 15px 16px;
  }

  .tablet-test-step__icon {
    width: 44px;
    height: 44px;
  }

  .tablet-test-step__icon svg {
    width: 23px;
    height: 23px;
  }

  .tablet-test-connector {
    display: none;
  }

  .tablet-test-step h2 {
    font-size: 15px;
  }

  .tablet-test-step p {
    margin-top: 7px;
    font-size: 13px;
  }

  .tablet-test-cta {
    width: 100%;
    min-height: 54px;
    margin-left: 0;
    padding: 12px 14px;
    font-size: 14px;
  }

  .tablet-test-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .tablet-test-benefit {
    min-height: 58px;
    padding: 4px 10px;
    border-right: 0;
  }

  .tablet-test-benefit__icon {
    width: 56px;
    height: 48px;
  }

  .tablet-test-benefit__icon img {
    width: 100%;
    height: 100%;
  }

  .tablet-test-benefit p {
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  :root {
    --test-blue-x: 0%;
    --test-blue-y: 0%;
    --test-green-x: 0%;
    --test-green-y: 0%;
    --test-base-x: 0%;
    --test-base-y: 0%;
    --test-visual-shift-y: 0px;
    --test-intro-opacity: 1;
    --test-intro-shift: 0px;
    --test-step-one-opacity: 1;
    --test-step-two-opacity: 1;
    --test-step-three-opacity: 1;
    --test-step-one-shift: 0px;
    --test-step-two-shift: 0px;
    --test-step-three-shift: 0px;
    --test-cta-opacity: 1;
    --test-cta-shift: 0px;
    --test-benefits-opacity: 1;
    --test-benefits-shift: 0px;
    --test-benefit-one-opacity: 1;
    --test-benefit-two-opacity: 1;
    --test-benefit-three-opacity: 1;
    --test-benefit-one-shift: 0px;
    --test-benefit-two-shift: 0px;
    --test-benefit-three-shift: 0px;
    --test-dust-opacity: .72;
    --test-dust-shift: 0px;
    --test-dust-shift-inverse: 0px;
    --test-glow-opacity: .35;
  }

  .tablet-test-screen p {
    font-size: 38px;
  }

  .tablet-test-animation {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .tablet-test-sticky {
    position: relative;
    top: auto;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .tablet-test-scene {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 30px 18px 24px;
    border-radius: 0;
  }

  .tablet-test-backdrop {
    background-position: center 82px;
    background-size: auto 760px;
    opacity: .82;
  }

  .tablet-test-animation.is-tablet-test-ready .tablet-test-backdrop {
    background-image: url("/assets/images/tablet-animation-test/tablet-podium-background-1600.webp?v=20260813-1");
  }

  .tablet-test-backdrop::after {
    background: linear-gradient(180deg, rgba(0, 17, 14, .1), rgba(0, 17, 14, .3));
  }

  .tablet-test-copy {
    width: 100%;
    max-width: 500px;
    align-self: flex-start;
  }

  .tablet-test-eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
  }

  .tablet-test-copy h1 {
    font-size: 32px;
    line-height: 1.12;
  }

  .tablet-test-description {
    max-width: 500px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.45;
  }

  .tablet-test-composition-trigger {
    width: 100%;
    min-height: 46px;
    margin-top: 16px;
    font-size: 14px;
  }

  .tablet-test-visual {
    width: 100%;
    height: 370px;
    flex: 0 0 370px;
    margin-top: 4px;
  }

  .tablet-test-layer {
    top: -86px;
    width: min(112%, 440px);
  }

  .tablet-test-glow {
    bottom: 2%;
    height: 32%;
  }

  .tablet-test-steps {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }

  .tablet-test-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    max-width: none;
    min-height: 0;
    padding: 15px 16px;
    background: rgba(8, 58, 43, .84);
  }

  .tablet-test-step__icon {
    width: 44px;
    height: 44px;
  }

  .tablet-test-step__icon svg {
    width: 23px;
    height: 23px;
  }

  .tablet-test-connector {
    display: none;
  }

  .tablet-test-step h2 {
    font-size: 16px;
  }

  .tablet-test-step p {
    margin-top: 6px;
    font-size: 14px;
  }

  .tablet-test-cta {
    width: 100%;
    min-height: 56px;
    margin-top: 14px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .tablet-test-benefits {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    background: rgba(4, 43, 34, .88);
  }

  .tablet-test-benefit {
    min-height: 54px;
    padding: 4px 6px;
    border-right: 0;
  }

  .tablet-test-benefit__icon {
    width: 58px;
    height: 48px;
  }

  .tablet-test-benefit__icon img {
    width: 100%;
    height: 100%;
  }

  .tablet-test-benefit p {
    font-size: 13px;
  }

  .tablet-composition-modal {
    padding: 14px;
  }

  .tablet-composition-modal__dialog {
    padding: 24px 20px 20px;
  }

  .tablet-composition-modal h2 {
    padding-right: 38px;
    font-size: 28px;
  }

  .tablet-composition-modal__lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.42;
  }

  .tablet-composition-modal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 104px;
    gap: 12px;
    padding: 14px;
  }

  .tablet-composition-modal__ingredient--primary,
  .tablet-composition-modal__ingredient--micro {
    grid-column: 1 / -1;
  }

  .tablet-composition-modal__ingredient--primary {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .tablet-composition-modal__ingredient--micro {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tablet-composition-modal__ingredient--micro dd {
    gap: 6px;
  }

  .tablet-composition-modal__ingredient--micro dd span {
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .tablet-test-scene {
    padding-inline: 15px;
  }

  .tablet-test-copy h1 {
    font-size: 29px;
  }

  .tablet-test-description {
    font-size: 15px;
  }

  .tablet-composition-modal {
    padding: 14px;
  }

  .tablet-composition-modal__dialog {
    padding: 26px 18px 20px;
  }

  .tablet-composition-modal h2 {
    font-size: 25px;
  }

  .tablet-composition-modal__lead {
    font-size: 15px;
  }

  .tablet-composition-modal__list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tablet-composition-modal__list dd {
    justify-self: start;
  }

  .tablet-test-visual {
    height: 344px;
    flex-basis: 344px;
  }
}

@media (min-width: 761px) and (max-height: 720px) {
  .tablet-test-scene {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .tablet-test-eyebrow {
    margin-bottom: 18px;
  }

  .tablet-test-description {
    margin-top: 22px;
  }

  .tablet-test-layer {
    top: var(--test-layer-top);
    width: min(146%, 560px, 68vh);
  }

  .tablet-test-step {
    min-height: 92px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --test-blue-x: 0%;
    --test-blue-y: -3.6%;
    --test-green-x: 0%;
    --test-green-y: 0%;
    --test-base-x: 0%;
    --test-base-y: 6.2%;
    --test-visual-shift-y: 0px;
    --test-intro-opacity: 1;
    --test-intro-shift: 0px;
    --test-step-one-opacity: 1;
    --test-step-two-opacity: 1;
    --test-step-three-opacity: 1;
    --test-step-one-shift: 0px;
    --test-step-two-shift: 0px;
    --test-step-three-shift: 0px;
    --test-cta-opacity: 1;
    --test-cta-shift: 0px;
    --test-benefits-opacity: 1;
    --test-benefits-shift: 0px;
    --test-benefit-one-opacity: 1;
    --test-benefit-two-opacity: 1;
    --test-benefit-three-opacity: 1;
    --test-benefit-one-shift: 0px;
    --test-benefit-two-shift: 0px;
    --test-benefit-three-shift: 0px;
    --test-dust-opacity: .55;
    --test-dust-shift: 0px;
    --test-dust-shift-inverse: 0px;
    --test-glow-opacity: .35;
  }
}

.tablet-test-composition-trigger {
  min-height: 40px;
  gap: 22px;
  padding: 9px 16px;
  border-color: rgba(72, 192, 137, .72);
  color: #74edaa;
  background: rgba(1, 18, 15, .7);
  box-shadow: inset 0 0 18px rgba(40, 218, 125, .035), 0 0 18px rgba(40, 218, 125, .035);
  font-size: 13px;
  font-weight: 720;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.tablet-test-composition-trigger span:last-child {
  color: #75f0ac;
  font-size: 22px;
  font-weight: 400;
  line-height: .8;
}

.tablet-test-composition-trigger:hover {
  color: #9cffc7;
  border-color: rgba(112, 246, 173, .96);
  background: rgba(2, 27, 21, .82);
  box-shadow: inset 0 0 20px rgba(56, 239, 143, .07), 0 0 18px rgba(56, 239, 143, .12);
}

.tablet-test-copy {
  max-width: 390px;
}

.tablet-test-copy h1 {
  font-size: clamp(42px, 3.25vw, 54px);
  line-height: 1.08;
}

.tablet-test-copy h1::after {
  margin-top: 30px;
}

.tablet-test-copy h1 span:last-child {
  color: #66d092;
  text-shadow: 0 0 13px rgba(102, 208, 146, .3);
}

.tablet-test-step {
  max-width: min(100%, clamp(330px, 23.7vw, 455px));
  min-height: clamp(92px, 11.6svh, 125px);
  grid-template-columns: clamp(56px, 3.85vw, 74px) minmax(0, 1fr);
  gap: clamp(13px, 1.05vw, 20px);
  padding: clamp(13px, .94vw, 18px) clamp(15px, 1.15vw, 22px);
  border-color: rgba(91, 179, 142, .42);
  background: linear-gradient(90deg, rgba(2, 24, 22, .93), rgba(1, 15, 14, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 25px rgba(0, 8, 7, .22);
}

.tablet-test-step__icon {
  width: clamp(50px, 3.4vw, 65px);
  height: clamp(50px, 3.4vw, 65px);
}

.tablet-test-step__icon svg {
  width: clamp(26px, 1.78vw, 34px);
  height: clamp(26px, 1.78vw, 34px);
  stroke-width: 1.45;
}

.tablet-test-step h2 {
  font-size: clamp(16px, 1.1vw, 21px);
  line-height: 1.2;
}

.tablet-test-step p {
  margin-top: clamp(6px, .42vw, 8px);
  color: rgba(237, 249, 243, .73);
  font-size: clamp(13px, .94vw, 18px);
  line-height: 1.36;
}

.tablet-test-step--one {
  border-color: rgba(83, 140, 230, .68);
  color: #79aaff;
  background: linear-gradient(90deg, rgba(3, 20, 31, .94), rgba(1, 15, 17, .88));
  box-shadow: inset 0 1px 0 rgba(143, 186, 255, .04), 0 0 22px rgba(44, 108, 226, .08);
}

.tablet-test-step--two {
  border-color: rgba(67, 206, 124, .66);
  color: #5af098;
  background: linear-gradient(90deg, rgba(2, 29, 21, .94), rgba(1, 17, 15, .88));
  box-shadow: inset 0 1px 0 rgba(128, 255, 181, .035), 0 0 22px rgba(35, 210, 106, .07);
}

.tablet-test-step--three {
  border-color: rgba(207, 233, 224, .68);
  color: #effff9;
  background: linear-gradient(90deg, rgba(11, 28, 27, .94), rgba(2, 17, 16, .89));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 22px rgba(220, 255, 242, .055);
}

.tablet-test-step--one h2 {
  color: #79aaff;
}

.tablet-test-step--two h2 {
  color: #5af098;
}

.tablet-test-step--three h2 {
  color: #effff9;
}

.tablet-test-step--one p,
.tablet-test-step--two p,
.tablet-test-step--three p {
  color: rgba(237, 249, 243, .73);
}

.tablet-test-step--one .tablet-test-step__icon {
  border-color: rgba(105, 162, 255, .9);
  color: #dbe8ff;
  background: radial-gradient(circle at 45% 38%, rgba(61, 111, 226, .95), rgba(9, 35, 93, .96) 68%, rgba(2, 14, 32, .98));
  box-shadow: inset 0 0 12px rgba(87, 143, 255, .32), 0 0 14px rgba(54, 118, 255, .44);
}

.tablet-test-step--two .tablet-test-step__icon {
  border-color: rgba(74, 241, 137, .88);
  color: #d9ffe8;
  background: radial-gradient(circle at 45% 38%, rgba(25, 177, 84, .92), rgba(3, 76, 36, .98) 68%, rgba(1, 25, 17, .98));
  box-shadow: inset 0 0 12px rgba(61, 240, 130, .24), 0 0 14px rgba(36, 234, 112, .36);
}

.tablet-test-step--three .tablet-test-step__icon {
  border-color: rgba(223, 247, 239, .8);
  color: #ffffff;
  background: radial-gradient(circle at 45% 38%, rgba(110, 129, 126, .92), rgba(39, 55, 53, .98) 70%, rgba(8, 22, 20, .98));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .14), 0 0 14px rgba(224, 255, 244, .22);
}

.tablet-test-benefits {
  min-height: clamp(132px, 17.6svh, 190px);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(clamp(250px, 19.3vw, 370px), clamp(250px, 19.3vw, 370px));
  column-gap: clamp(14px, 1.46vw, 28px);
  padding: clamp(14px, 1.15vw, 22px) clamp(16px, 1.25vw, 24px);
  border-color: rgba(75, 188, 137, .48);
  background: rgba(1, 25, 21, .88);
  box-shadow: inset 0 1px 0 rgba(151, 255, 201, .025), 0 10px 34px rgba(0, 9, 7, .2);
}

.tablet-test-benefit {
  position: relative;
  min-height: clamp(76px, 11.3svh, 122px);
  display: grid;
  grid-template-columns: clamp(36px, 2.6vw, 54px) clamp(50px, 4.1vw, 78px) minmax(0, 1fr);
  gap: clamp(9px, .94vw, 18px);
  padding: clamp(7px, .62vw, 12px) clamp(10px, 1.04vw, 20px);
  border: 0;
}

.tablet-test-benefit:nth-child(3) {
  border: 0;
}

.tablet-test-benefit:nth-child(-n+2)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(-32px, -1.67vw, -18px);
  width: clamp(22px, 2.2vw, 42px);
  height: clamp(11px, 1.1vw, 21px);
  background: url("/assets/images/tablet-animation-test/benefit-flow-arrow.svg?v=20260813-1") center / contain no-repeat;
  transform: translate3d(0, -50%, 0);
}

.tablet-test-benefit__number {
  width: clamp(34px, 2.6vw, 50px);
  height: clamp(34px, 2.6vw, 50px);
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #7dafff;
  background: rgba(9, 41, 79, .9);
  box-shadow: inset 0 0 11px rgba(76, 134, 255, .22), 0 0 10px rgba(54, 117, 255, .2);
  font-size: clamp(14px, 1.1vw, 21px);
  font-weight: 850;
  line-height: 1;
}

.tablet-test-benefit--two .tablet-test-benefit__number {
  color: #6af2a2;
  background: rgba(4, 66, 35, .92);
  box-shadow: inset 0 0 11px rgba(51, 224, 120, .18), 0 0 10px rgba(45, 224, 117, .14);
}

.tablet-test-benefit--three .tablet-test-benefit__number {
  color: #dff7ef;
  background: rgba(27, 52, 48, .94);
  box-shadow: inset 0 0 11px rgba(221, 255, 243, .1), 0 0 10px rgba(221, 255, 243, .1);
}

.tablet-test-benefit__icon {
  width: clamp(48px, 3.96vw, 76px);
  height: clamp(50px, 3.96vw, 76px);
}

.tablet-test-benefit__icon img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none;
}

.tablet-test-benefit--one .tablet-test-benefit__icon img {
  width: clamp(42px, 3.55vw, 68px);
  height: clamp(42px, 3.55vw, 68px);
}

.tablet-test-benefit--two .tablet-test-benefit__icon img {
  width: clamp(41px, 3.45vw, 66px);
  height: clamp(42px, 3.55vw, 68px);
}

.tablet-test-benefit--three .tablet-test-benefit__icon img {
  width: clamp(31px, 2.55vw, 49px);
  height: clamp(40px, 3.34vw, 64px);
}

.tablet-test-benefit p {
  margin: 0;
  color: rgba(239, 251, 245, .82);
  font-size: clamp(12px, .89vw, 17px);
  line-height: 1.34;
}

.tablet-test-benefit p span,
.tablet-test-benefit p strong {
  display: block;
}

.tablet-test-benefit p strong {
  color: #f4fff8;
  font-weight: 780;
}

.tablet-test-cta {
  width: calc(100% - clamp(10px, 1.04vw, 20px));
  min-height: clamp(58px, 7.8svh, 84px);
  gap: clamp(12px, .94vw, 18px);
  margin-left: clamp(10px, 1.04vw, 20px);
  padding: clamp(14px, 1.04vw, 20px) clamp(16px, 1.35vw, 26px);
  border: 1px solid rgba(163, 255, 206, .5);
  color: #07542e;
  background: linear-gradient(90deg, #8aefb8, #a7f7ca);
  font-size: clamp(15px, .99vw, 19px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 0 20px rgba(87, 240, 158, .12);
}

.tablet-test-cta__arrow {
  font-size: clamp(20px, 1.46vw, 28px);
}

@media (min-width: 1201px) {
  .tablet-test-step {
    right: 0;
  }

  .tablet-test-steps::before {
    content: "";
    position: absolute;
    top: 9%;
    bottom: 11%;
    left: -76px;
    width: 18px;
    opacity: .35;
    background: repeating-linear-gradient(to bottom, rgba(92, 213, 157, .7) 0 1px, transparent 1px 9px);
    -webkit-mask-image: linear-gradient(transparent, #000 12% 88%, transparent);
    mask-image: linear-gradient(transparent, #000 12% 88%, transparent);
    pointer-events: none;
  }
}

@media (min-width: 1801px) {
  .tablet-test-copy h1 {
    font-size: clamp(44px, 2.5vw, 48px);
  }
}

@media (min-width: 1601px) and (max-width: 1800px) {
  .tablet-test-copy h1 {
    font-size: clamp(40px, 2.5vw, 44px);
  }
}

@media (min-width: 1201px) and (max-width: 1600px) {
  .tablet-test-copy h1 {
    font-size: clamp(36px, 2.56vw, 41px);
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .tablet-test-scene {
    column-gap: clamp(20px, 2vw, 28px);
    padding-right: max(95px, calc((100vw - 1500px) / 2));
    padding-bottom: clamp(18px, 3svh, 24px);
    padding-left: max(95px, calc((100vw - 1500px) / 2));
  }

  .tablet-test-copy {
    margin-top: 0;
  }

  .tablet-test-copy h1 {
    font-size: clamp(35px, 2.56vw, 41px);
    line-height: 1.06;
  }

  .tablet-test-copy h1::after {
    margin-top: clamp(20px, 3.4svh, 28px);
  }

  .tablet-test-description {
    margin-top: clamp(20px, 3.4svh, 28px);
    font-size: 17px;
    line-height: 1.45;
  }

  .tablet-test-composition-trigger {
    min-height: 44px;
    margin-top: 16px;
    padding: 10px 16px;
    font-size: 14px;
  }

  .tablet-test-layer {
    top: var(--test-layer-top);
    width: min(132%, 540px, 66svh);
  }

  .tablet-test-steps {
    gap: clamp(8px, 1.6svh, 14px);
    padding-top: clamp(16px, 3svh, 24px);
    padding-bottom: 12px;
  }

  .tablet-test-step {
    min-height: clamp(96px, 13svh, 106px);
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 13px;
    padding: 12px 15px;
  }

  .tablet-test-step__icon {
    width: 52px;
    height: 52px;
  }

  .tablet-test-step__icon svg {
    width: 27px;
    height: 27px;
  }

  .tablet-test-step h2 {
    font-size: 16px;
  }

  .tablet-test-step p {
    margin-top: 6px;
    font-size: 14px;
  }

  .tablet-test-benefits {
    min-height: clamp(118px, 18svh, 146px);
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 320px);
    padding: 12px 14px;
  }

  .tablet-test-benefit {
    min-height: clamp(70px, 10.8svh, 88px);
    grid-template-columns: 34px 50px minmax(0, 1fr);
    gap: 9px;
    padding: 6px 9px;
  }

  .tablet-test-benefit__number {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .tablet-test-benefit__icon {
    width: 48px;
    height: 50px;
  }

  .tablet-test-benefit p {
    font-size: 13px;
  }

  .tablet-test-cta {
    width: 100%;
    min-height: clamp(58px, 8.5svh, 70px);
    margin-left: 0;
    padding: 13px 16px;
    font-size: 16px;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .tablet-test-animation,
  .tablet-test-sticky {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .tablet-test-scene {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 38%);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy copy"
      "visual steps"
      "benefits benefits";
    gap: clamp(18px, 2.5vw, 26px) clamp(18px, 2.5vw, 28px);
    padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px) clamp(24px, 3vw, 34px);
    overflow: visible;
    contain: layout style;
  }

  .tablet-test-copy {
    width: 100%;
    max-width: none;
    align-self: start;
    margin: 0;
    padding: 0;
    background: none;
  }

  .tablet-test-copy h1 {
    font-size: 44px;
    line-height: 1.06;
  }

  .tablet-test-copy h1::after {
    margin-top: 22px;
  }

  .tablet-test-copy h1 span {
    white-space: nowrap;
  }

  .tablet-test-description {
    max-width: 760px;
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.48;
  }

  .tablet-test-composition-trigger {
    min-height: 48px;
    margin-top: 18px;
    padding: 11px 18px;
    font-size: 14px;
  }

  .tablet-test-visual {
    min-height: clamp(450px, 50vw, 500px);
    align-self: stretch;
    overflow: clip;
  }

  .tablet-test-stage {
    transform: none;
  }

  .tablet-test-layer {
    top: clamp(-82px, -7vw, -64px);
    width: min(74%, 410px);
  }

  .tablet-test-steps {
    display: grid;
    grid-template-rows: repeat(3, auto);
    align-content: center;
    gap: 12px;
    padding: 0;
  }

  .tablet-test-step {
    position: relative;
    right: auto;
    width: 100%;
    max-width: none;
    min-height: 104px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }

  .tablet-test-step__icon {
    width: 54px;
    height: 54px;
  }

  .tablet-test-step__icon svg {
    width: 28px;
    height: 28px;
  }

  .tablet-test-step h2 {
    font-size: 17px;
    line-height: 1.2;
  }

  .tablet-test-step p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.35;
  }

  .tablet-test-connector,
  .tablet-test-steps::before,
  .tablet-test-benefit:nth-child(-n+2)::after {
    display: none;
  }

  .tablet-test-benefits {
    min-height: 184px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
    padding: 14px;
  }

  .tablet-test-benefit {
    min-height: 82px;
    grid-template-columns: 36px 52px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 10px;
  }

  .tablet-test-benefit__number {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .tablet-test-benefit__icon {
    width: 50px;
    height: 54px;
  }

  .tablet-test-benefit p {
    font-size: 13px;
    line-height: 1.3;
  }

  .tablet-test-cta {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 15px 18px;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .tablet-test-animation,
  .tablet-test-sticky {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .tablet-test-scene {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 28px clamp(18px, 4vw, 30px) 28px;
    overflow: visible;
    contain: layout style;
  }

  .tablet-test-copy {
    width: 100%;
    max-width: 680px;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    background: none;
  }

  .tablet-test-copy h1 {
    font-size: 40px;
    line-height: 1.08;
  }

  .tablet-test-copy h1::after {
    margin-top: 22px;
  }

  .tablet-test-copy h1 span {
    white-space: nowrap;
  }

  .tablet-test-description {
    max-width: 680px;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.48;
  }

  .tablet-test-composition-trigger {
    min-height: 48px;
    margin-top: 18px;
    padding: 11px 18px;
    font-size: 14px;
  }

  .tablet-test-visual {
    width: 100%;
    height: clamp(350px, 80vw, 430px);
    min-height: 0;
    flex: 0 0 clamp(350px, 80vw, 430px);
    margin-top: 8px;
    overflow: clip;
  }

  .tablet-test-stage {
    transform: none;
  }

  .tablet-test-layer {
    top: clamp(-70px, -10vw, -48px);
    width: min(72%, 360px);
  }

  .tablet-test-glow {
    bottom: 2%;
    height: 30%;
  }

  .tablet-test-steps {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 10px;
    margin-top: 10px;
    padding: 0;
  }

  .tablet-test-step {
    position: relative;
    right: auto;
    width: 100%;
    max-width: none;
    min-height: 96px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }

  .tablet-test-step__icon {
    width: 54px;
    height: 54px;
  }

  .tablet-test-step__icon svg {
    width: 28px;
    height: 28px;
  }

  .tablet-test-step h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  .tablet-test-step p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.35;
  }

  .tablet-test-connector,
  .tablet-test-steps::before,
  .tablet-test-benefit:nth-child(-n+2)::after {
    display: none;
  }

  .tablet-test-benefits {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
    padding: 12px;
  }

  .tablet-test-benefit {
    min-height: 78px;
    grid-template-columns: 40px 56px minmax(0, 1fr);
    gap: 11px;
    padding: 8px 10px;
    border: 0;
  }

  .tablet-test-benefit:nth-child(3) {
    border: 0;
  }

  .tablet-test-benefit__number {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .tablet-test-benefit__icon {
    width: 54px;
    height: 58px;
  }

  .tablet-test-benefit p {
    font-size: 14px;
    line-height: 1.32;
  }

  .tablet-test-cta {
    width: 100%;
    min-height: 64px;
    margin: 8px 0 0;
    padding: 15px 17px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .tablet-test-scene {
    padding: 20px 14px 22px;
  }

  .tablet-test-copy h1 {
    font-size: 32px;
  }

  .tablet-test-copy h1::after {
    margin-top: 16px;
  }

  .tablet-test-description {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.44;
  }

  .tablet-test-composition-trigger {
    min-height: 44px;
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .tablet-test-visual {
    height: clamp(280px, 76vw, 330px);
    flex-basis: clamp(280px, 76vw, 330px);
    margin-top: 4px;
  }

  .tablet-test-layer {
    width: min(76%, 340px);
  }

  .tablet-test-steps {
    gap: 8px;
    margin-top: 8px;
  }

  .tablet-test-step {
    min-height: 76px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }

  .tablet-test-step__icon {
    width: 44px;
    height: 44px;
  }

  .tablet-test-step__icon svg {
    width: 24px;
    height: 24px;
  }

  .tablet-test-step h2 {
    font-size: 16px;
  }

  .tablet-test-step p {
    margin-top: 4px;
    font-size: 13px;
  }

  .tablet-test-benefits {
    gap: 4px;
    margin-top: 14px;
    padding: 8px;
  }

  .tablet-test-benefit {
    min-height: 62px;
    grid-template-columns: 32px 42px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 6px;
  }

  .tablet-test-benefit__number {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .tablet-test-benefit__icon {
    width: 40px;
    height: 44px;
  }

  .tablet-test-benefit p {
    font-size: 13px;
    line-height: 1.25;
  }

  .tablet-test-cta {
    min-height: 54px;
    margin-top: 4px;
    padding: 12px 14px;
    font-size: 15px;
  }
}

@media (min-width: 1201px) and (max-width: 1450px) {
  .tablet-test-layer {
    width: min(128%, 500px, 68svh);
  }
}

@media (max-width: 380px) {
  .tablet-test-scene {
    padding: 18px 12px 20px;
  }

  .tablet-test-copy h1 {
    font-size: 29px;
  }

  .tablet-test-description {
    font-size: 14px;
  }

  .tablet-test-visual {
    height: 274px;
    flex-basis: 274px;
  }

  .tablet-test-step {
    min-height: 72px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px;
  }

  .tablet-test-step__icon {
    width: 42px;
    height: 42px;
  }

  .tablet-test-step__icon svg {
    width: 22px;
    height: 22px;
  }

  .tablet-test-step h2 {
    font-size: 15px;
  }

  .tablet-test-step p {
    font-size: 12px;
  }

  .tablet-test-benefit {
    min-height: 58px;
    grid-template-columns: 30px 38px minmax(0, 1fr);
    gap: 7px;
  }

  .tablet-test-benefit__number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .tablet-test-benefit__icon {
    width: 36px;
    height: 40px;
  }

  .tablet-test-benefit p {
    font-size: 12px;
  }

  .tablet-test-cta {
    min-height: 52px;
    font-size: 14px;
  }
}

/* Match the embedded scene edges to the adjacent home landing sections. */
.home-page .tablet-test-scene::before {
  height: clamp(210px, 30svh, 320px);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafcfb 9%,
    rgba(235, 242, 238, .98) 20%,
    rgba(206, 220, 212, .90) 34%,
    rgba(151, 177, 163, .72) 48%,
    rgba(87, 122, 104, .52) 62%,
    rgba(35, 75, 57, .32) 76%,
    rgba(3, 27, 22, 0) 100%
  );
}

.home-page .tablet-test-scene::after {
  height: clamp(220px, 32svh, 340px);
  background: linear-gradient(
    0deg,
    #effbf1 0%,
    rgba(238, 248, 241, .99) 9%,
    rgba(223, 236, 227, .94) 22%,
    rgba(189, 210, 195, .82) 38%,
    rgba(135, 168, 148, .64) 53%,
    rgba(77, 117, 95, .44) 68%,
    rgba(29, 75, 56, .26) 80%,
    rgba(3, 27, 22, 0) 100%
  );
}

@media (max-width: 900px) {
  .home-page .tablet-test-scene::before {
    height: 112px;
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(229, 239, 233, .98) 8%,
      rgba(144, 173, 157, .82) 20%,
      rgba(58, 95, 76, .58) 38%,
      rgba(17, 52, 39, .28) 62%,
      rgba(3, 27, 22, 0) 92%
    );
  }

  .home-page .tablet-test-scene::after {
    height: 120px;
    background: linear-gradient(
      0deg,
      #effbf1 0%,
      rgba(225, 238, 229, .96) 10%,
      rgba(158, 184, 168, .80) 24%,
      rgba(68, 104, 84, .54) 44%,
      rgba(19, 55, 41, .26) 66%,
      rgba(3, 27, 22, 0) 94%
    );
  }
}

/* Light podium scene based on the supplied FINIUS reference background. */
.tablet-test-animation,
.tablet-test-sticky,
.tablet-test-scene {
  color: #153f2e;
  background: #f8fbf9;
}

.tablet-test-backdrop {
  background-color: #f8fbf9;
  background-position: center center;
  background-size: cover;
}

.tablet-test-animation.is-tablet-test-ready .tablet-test-backdrop {
  background-image: url("/assets/images/tablet-animation-test/tablet-podium-background-light-2560.webp?v=20260814-light-1");
}

.tablet-test-backdrop::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .34), transparent 22% 78%, rgba(255, 255, 255, .34)),
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 38% 76%, rgba(227, 248, 235, .2));
}

.tablet-test-scene::before,
.home-page .tablet-test-scene::before {
  height: clamp(64px, 8svh, 96px);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .86) 34%, rgba(255, 255, 255, 0) 100%);
}

.tablet-test-scene::after,
.home-page .tablet-test-scene::after {
  height: clamp(72px, 9svh, 112px);
  background: linear-gradient(0deg, #effbf1 0%, rgba(239, 251, 241, .82) 32%, rgba(239, 251, 241, 0) 100%);
}

.tablet-test-copy h1 {
  color: #123e2c;
  text-shadow: none;
}

.tablet-test-copy h1 span:last-child {
  color: #17a75b;
  text-shadow: 0 10px 28px rgba(23, 167, 91, .15);
}

.tablet-test-copy h1::after {
  background: linear-gradient(90deg, #20ae63, rgba(32, 174, 99, .08));
  box-shadow: none;
}

.tablet-test-description {
  color: rgba(25, 64, 48, .76);
}

.tablet-test-composition-trigger {
  border-color: rgba(109, 225, 160, .68);
  color: #a0f2c3;
  background-color: #073821;
  background-image: linear-gradient(135deg, #041f14 0%, #073821 48%, #0c5231 100%);
  box-shadow: inset 0 1px 0 rgba(204, 255, 226, .09), 0 12px 28px rgba(7, 56, 33, .22);
}

.tablet-test-composition-trigger span:last-child {
  color: #72edaa;
}

.tablet-test-composition-trigger:hover {
  border-color: rgba(112, 246, 173, .94);
  color: #b6ffd5;
  background-color: #0a482b;
  background-image: linear-gradient(135deg, #05291a 0%, #0a482b 48%, #10703f 100%);
  box-shadow: inset 0 1px 0 rgba(213, 255, 232, .08), 0 14px 30px rgba(7, 56, 33, .26);
}

.tablet-test-layer--base {
  filter: drop-shadow(0 20px 18px rgba(31, 92, 65, .18));
}

.tablet-test-layer--green {
  filter: drop-shadow(0 16px 16px rgba(30, 125, 72, .13));
}

.tablet-test-layer--blue {
  filter: drop-shadow(0 14px 15px rgba(38, 92, 177, .13));
}

.tablet-test-glow {
  background: radial-gradient(ellipse at center, rgba(59, 218, 135, .38), rgba(79, 224, 148, .1) 46%, transparent 74%);
  filter: opacity(.4);
}

.tablet-test-dust {
  filter: brightness(.72) saturate(.82);
}

.tablet-test-step {
  border-color: rgba(117, 191, 151, .48);
  color: #effff8;
  background-color: #073821;
  background-image: linear-gradient(135deg, #041f14 0%, #073821 48%, #0b4b2d 100%);
  box-shadow: inset 0 1px 0 rgba(225, 255, 238, .07), 0 16px 36px rgba(7, 56, 33, .23);
  backdrop-filter: none;
}

.tablet-test-step:focus-visible {
  outline-color: #8ff0bc;
}

.tablet-test-step--one {
  --test-connector-line: #477fd4;
  --test-connector-dot: #5b8fe0;
  --test-connector-halo: rgba(71, 127, 212, .13);
  --test-connector-glow: rgba(71, 127, 212, .34);
  border-color: rgba(83, 140, 230, .72);
  color: #79aaff;
  background-image: linear-gradient(135deg, #05231b 0%, #073821 50%, #0a482e 100%);
  box-shadow: inset 0 1px 0 rgba(143, 186, 255, .05), 0 16px 36px rgba(22, 77, 52, .23);
}

.tablet-test-step--two {
  --test-connector-line: #18a45a;
  --test-connector-dot: #24b966;
  --test-connector-halo: rgba(24, 164, 90, .13);
  --test-connector-glow: rgba(24, 164, 90, .31);
  border-color: rgba(67, 206, 124, .7);
  color: #5af098;
  background-image: linear-gradient(135deg, #042417 0%, #073821 47%, #0d5832 100%);
  box-shadow: inset 0 1px 0 rgba(128, 255, 181, .05), 0 16px 36px rgba(7, 73, 39, .24);
}

.tablet-test-step--three {
  --test-connector-line: #58776b;
  --test-connector-dot: #66877a;
  --test-connector-halo: rgba(88, 119, 107, .12);
  --test-connector-glow: rgba(88, 119, 107, .24);
  border-color: rgba(181, 218, 204, .64);
  color: #effff9;
  background-image: linear-gradient(135deg, #05251c 0%, #073821 50%, #0a452c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 16px 36px rgba(7, 56, 33, .22);
}

.tablet-test-step--one h2 {
  color: #8ab7ff;
}

.tablet-test-step--two h2 {
  color: #70f0a8;
}

.tablet-test-step--three h2 {
  color: #effff9;
}

.tablet-test-step--one p,
.tablet-test-step--two p,
.tablet-test-step--three p {
  color: rgba(231, 247, 238, .78);
}

.tablet-test-step--one .tablet-test-step__icon {
  border-color: rgba(105, 162, 255, .9);
  color: #dbe8ff;
  background: radial-gradient(circle at 45% 38%, rgba(61, 111, 226, .95), rgba(9, 35, 93, .98) 68%, rgba(2, 14, 32, .99));
  box-shadow: inset 0 0 12px rgba(87, 143, 255, .32), 0 0 14px rgba(54, 118, 255, .42);
}

.tablet-test-step--two .tablet-test-step__icon {
  border-color: rgba(74, 241, 137, .88);
  color: #d9ffe8;
  background: radial-gradient(circle at 45% 38%, rgba(25, 177, 84, .92), rgba(3, 76, 36, .98) 68%, rgba(1, 25, 17, .99));
  box-shadow: inset 0 0 12px rgba(61, 240, 130, .24), 0 0 14px rgba(36, 234, 112, .34);
}

.tablet-test-step--three .tablet-test-step__icon {
  border-color: rgba(223, 247, 239, .8);
  color: #ffffff;
  background: radial-gradient(circle at 45% 38%, rgba(110, 129, 126, .92), rgba(39, 55, 53, .98) 70%, rgba(8, 22, 20, .99));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .14), 0 0 14px rgba(224, 255, 244, .2);
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus] .tablet-test-step {
  opacity: .48;
  filter: saturate(.25);
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="one"] .tablet-test-step--one,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] .tablet-test-step--two,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] .tablet-test-step--three {
  opacity: 1;
  filter: none;
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus] .tablet-test-layer {
  opacity: .38;
  filter: grayscale(1) saturate(.08) brightness(.92);
}

.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="one"] .tablet-test-layer--blue,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] .tablet-test-layer--green,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="two"] .tablet-test-layer--green-front,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] .tablet-test-layer--base,
.tablet-test-animation.is-tablet-test-complete[data-tablet-focus="three"] .tablet-test-layer--base-front {
  opacity: 1;
  filter: none;
}

.tablet-test-benefits {
  border-color: rgba(104, 198, 146, .5);
  background-color: #073821;
  background-image: linear-gradient(110deg, #041f14 0%, #073821 45%, #0c5231 100%);
  box-shadow: inset 0 1px 0 rgba(183, 255, 215, .08), 0 18px 44px rgba(7, 56, 33, .25);
  backdrop-filter: none;
}

.tablet-test-benefit p {
  color: rgba(230, 247, 237, .82);
}

.tablet-test-benefit p strong {
  color: #f7fff9;
}

.tablet-test-benefit__number {
  color: #7dafff;
  background: rgba(9, 41, 79, .94);
  box-shadow: inset 0 0 11px rgba(76, 134, 255, .22), 0 0 10px rgba(54, 117, 255, .2);
}

.tablet-test-benefit--two .tablet-test-benefit__number {
  color: #6af2a2;
  background: rgba(4, 66, 35, .95);
  box-shadow: inset 0 0 11px rgba(51, 224, 120, .18), 0 0 10px rgba(45, 224, 117, .14);
}

.tablet-test-benefit--three .tablet-test-benefit__number {
  color: #dff7ef;
  background: rgba(27, 52, 48, .96);
  box-shadow: inset 0 0 11px rgba(221, 255, 243, .1), 0 0 10px rgba(221, 255, 243, .1);
}

.tablet-test-benefit--three .tablet-test-benefit__icon img {
  filter: none;
}

.tablet-test-cta {
  border-color: rgba(8, 116, 58, .24);
  color: #ffffff;
  background: linear-gradient(135deg, #0b8742, #16a257);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 30px rgba(10, 117, 59, .2);
}

.tablet-test-cta:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #08763a, #12944f);
}

.tablet-test-cta:focus-visible {
  outline-color: #0b8742;
}

@media (max-width: 900px) {
  .tablet-test-backdrop {
    background-position: center 82px;
    background-size: auto 760px;
    opacity: 1;
  }

  .tablet-test-animation.is-tablet-test-ready .tablet-test-backdrop {
    background-image: url("/assets/images/tablet-animation-test/tablet-podium-background-light-1600.webp?v=20260814-light-1");
  }

  .tablet-test-scene::before,
  .home-page .tablet-test-scene::before {
    height: 78px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .82) 38%, rgba(255, 255, 255, 0) 100%);
  }

  .tablet-test-scene::after,
  .home-page .tablet-test-scene::after {
    height: 86px;
    background: linear-gradient(0deg, #effbf1 0%, rgba(239, 251, 241, .78) 36%, rgba(239, 251, 241, 0) 100%);
  }

  .tablet-test-step,
  .tablet-test-benefits {
    background-color: #073821;
  }
}

@media (max-width: 560px) {
  .tablet-test-copy h1 span {
    white-space: normal;
  }

  .tablet-test-backdrop {
    background-position: center 140px;
    background-size: auto 690px;
  }

  .tablet-test-step,
  .tablet-test-benefits {
    backdrop-filter: none;
  }
}

/* Composition modal matched to the approved reference, 2026-08-14. */
.tablet-composition-modal {
  z-index: 100000;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tablet-composition-modal__backdrop {
  background: rgba(18, 31, 27, .78);
  backdrop-filter: blur(9px);
}

.tablet-composition-modal__dialog {
  width: min(1320px, 100%);
  max-height: calc(100dvh - 48px);
  margin: auto;
  overflow: auto;
  padding: 56px 60px 48px;
  border: 1px solid rgba(10, 70, 45, .12);
  border-radius: 16px;
  color: #0a422c;
  background: linear-gradient(145deg, #ffffff 0%, #fcfefd 54%, #f3faf6 100%);
  box-shadow: 0 30px 76px rgba(1, 23, 15, .42), 0 8px 24px rgba(1, 23, 15, .16);
  scrollbar-width: thin;
  scrollbar-color: rgba(25, 156, 82, .42) transparent;
  animation: tabletCompositionDialogIn 240ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes tabletCompositionDialogIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tablet-composition-modal__close {
  top: 30px;
  right: 30px;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0a4a32;
  background: #eef8f2;
  box-shadow: inset 0 0 0 1px rgba(10, 91, 55, .1);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.tablet-composition-modal__close:hover {
  color: #08733f;
  background: #e1f4e9;
  transform: rotate(4deg);
}

.tablet-composition-modal__close:focus-visible {
  outline: 3px solid rgba(37, 184, 104, .58);
  outline-offset: 4px;
}

.tablet-composition-icon {
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-image: url("/assets/images/tablet-animation-test/composition-icons.svg?v=20260817-tablet-test-64");
  mask-image: url("/assets/images/tablet-animation-test/composition-icons.svg?v=20260817-tablet-test-64");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
}

.tablet-composition-icon--flask {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.tablet-composition-icon--carbonate {
  -webkit-mask-position: 50% 0;
  mask-position: 50% 0;
}

.tablet-composition-icon--chloride {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.tablet-composition-icon--percarbonate {
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
}

.tablet-composition-icon--polycarboxylates {
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.tablet-composition-icon--complexing {
  -webkit-mask-position: 100% 50%;
  mask-position: 100% 50%;
}

.tablet-composition-icon--surfactants {
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}

.tablet-composition-icon--enzymes {
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
}

.tablet-composition-icon--close {
  width: 52px;
  height: 52px;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
}

.tablet-composition-modal__header {
  position: relative;
  z-index: 2;
  padding-right: 92px;
}

.tablet-composition-modal__eyebrow {
  margin: 0 0 20px;
  color: #22ad62;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}

.tablet-composition-modal__header h2 {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  color: #07452e;
  font-size: clamp(48px, 4.1vw, 64px);
  font-weight: 850;
  line-height: .94;
}

.tablet-composition-modal__header h2 span {
  display: block;
  white-space: nowrap;
}

.tablet-composition-modal__main {
  position: relative;
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 122px;
  min-height: 440px;
  margin-top: 12px;
}

.tablet-composition-modal__connectors {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tablet-composition-modal__connector-set--mid,
.tablet-composition-modal__connector-set--compact {
  display: none;
}

.tablet-composition-modal__connector {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.tablet-composition-modal__connector--one {
  stroke: #075238;
}

.tablet-composition-modal__connector-dot--one {
  fill: #075238;
}

.tablet-composition-modal__connector--two {
  stroke: #31b96c;
}

.tablet-composition-modal__connector-dot--two {
  fill: #31b96c;
}

.tablet-composition-modal__connector--three {
  stroke: #b8ebd0;
}

.tablet-composition-modal__connector-dot--three {
  fill: #b8ebd0;
}

.tablet-composition-modal__diagram,
.tablet-composition-modal__list {
  position: relative;
  z-index: 1;
}

.tablet-composition-modal__diagram {
  width: 440px;
  height: 440px;
  display: grid;
  place-items: center;
}

.tablet-composition-modal__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tablet-composition-modal__ring {
  fill: none;
  stroke-linecap: round;
}

.tablet-composition-modal__ring--outer {
  stroke: #06492f;
  stroke-width: 25;
  stroke-dasharray: 53 47;
  filter: drop-shadow(0 5px 6px rgba(3, 64, 39, .12));
}

.tablet-composition-modal__ring--middle {
  stroke: #31b96c;
  stroke-width: 25;
  stroke-dasharray: 61 39;
}

.tablet-composition-modal__ring--inner {
  stroke: #bcefd3;
  stroke-width: 22;
  stroke-dasharray: 54 46;
}

.tablet-composition-modal__core {
  position: relative;
  z-index: 2;
  width: 228px;
  height: 228px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 2px solid rgba(93, 210, 145, .22);
  border-radius: 50%;
  color: #8bdcae;
  background: radial-gradient(circle at 52% 42%, #ffffff 0%, #f8fcf9 60%, #edf8f1 100%);
  box-shadow: inset 0 0 0 10px rgba(110, 219, 157, .035), 0 18px 44px rgba(9, 94, 54, .08);
  text-align: center;
}

.tablet-composition-modal__core .tablet-composition-icon {
  width: 84px;
  height: 84px;
}

.tablet-composition-modal__core strong {
  color: #0b4932;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.18;
}

.tablet-composition-modal__list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
}

.tablet-composition-modal__ingredient {
  position: relative;
  z-index: 2;
  min-height: 128px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 16px 22px;
  border: 1px solid rgba(13, 91, 56, .13);
  border-radius: 12px;
  background: linear-gradient(105deg, #ffffff 0%, #fcfefd 44%, #f2faf6 100%);
  box-shadow: 0 10px 24px rgba(7, 62, 38, .025);
}

.tablet-composition-modal__ingredient dt {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0;
  color: #0a472f;
  font-size: clamp(20px, 1.65vw, 26px);
  font-weight: 800;
  line-height: 1.12;
}

.tablet-composition-modal__ingredient dt > span:last-child {
  min-width: 0;
}

.tablet-composition-modal__ingredient dd {
  position: relative;
  min-width: 150px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #0c4b33, #075d3b);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.tablet-composition-modal__ingredient dd::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -29px;
  width: 1px;
  height: 82px;
  background: rgba(12, 82, 51, .14);
  transform: translateY(-50%);
}

.tablet-composition-modal__ingredient--primary {
  color: #075238;
}

.tablet-composition-modal__ingredient--secondary {
  color: #31b96c;
}

.tablet-composition-modal__ingredient--secondary dd {
  background: linear-gradient(135deg, #28a95f, #38c576);
}

.tablet-composition-modal__ingredient--tertiary {
  color: #91dc9a;
}

.tablet-composition-modal__ingredient--tertiary dd {
  color: #155039;
  background: linear-gradient(135deg, #dff6e8, #bcebd1);
}

.tablet-composition-modal__micro {
  min-height: 160px;
  margin-top: 34px;
  padding: 20px 24px 24px;
  border: 1px solid rgba(13, 91, 56, .13);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(244, 251, 247, .88), rgba(234, 247, 239, .68));
}

.tablet-composition-modal__micro h3 {
  margin: 0 0 18px;
  color: #0a472f;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.tablet-composition-modal__micro-list {
  display: grid;
  grid-template-columns: 1.15fr 1.4fr .7fr .78fr;
  gap: 28px;
}

.tablet-composition-modal__micro-item {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border: 1px solid rgba(13, 91, 56, .12);
  border-radius: 999px;
  color: #0a472f;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 20px rgba(7, 62, 38, .025);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.15;
}

.tablet-composition-modal__micro-item .tablet-composition-icon {
  width: 36px;
  height: 36px;
  color: #25b466;
}

@media (max-width: 1200px) {
  .tablet-composition-modal__dialog {
    padding: 46px 40px 38px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(46px, 5vw, 58px);
  }

  .tablet-composition-modal__main {
    grid-template-columns: minmax(380px, 42%) minmax(0, 1fr);
    gap: 38px;
    margin-top: 22px;
  }

  .tablet-composition-modal__diagram {
    width: min(440px, 100%);
    height: auto;
    aspect-ratio: 1;
  }

  .tablet-composition-modal__ingredient {
    gap: 18px;
    padding-inline: 18px;
  }

  .tablet-composition-modal__ingredient dt {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    font-size: 19px;
  }

  .tablet-composition-modal__ingredient dt .tablet-composition-icon {
    width: 62px;
    height: 62px;
  }

  .tablet-composition-modal__ingredient dd {
    min-width: 120px;
    padding-inline: 14px;
    font-size: 17px;
  }

  .tablet-composition-modal__ingredient dd::before {
    left: -19px;
  }

  .tablet-composition-modal__micro-list {
    gap: 14px;
  }

  .tablet-composition-modal__micro-item {
    gap: 10px;
    padding-inline: 14px;
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  .tablet-composition-modal {
    place-items: start center;
    padding: 12px;
  }

  .tablet-composition-modal__dialog {
    max-height: calc(100dvh - 24px);
    padding: 38px 28px 28px;
  }

  .tablet-composition-modal__close {
    top: 20px;
    right: 20px;
    width: 58px;
    height: 58px;
  }

  .tablet-composition-icon--close {
    width: 44px;
    height: 44px;
  }

  .tablet-composition-modal__header {
    padding-right: 68px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(40px, 8vw, 54px);
  }

  .tablet-composition-modal__main {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    margin-top: 24px;
  }

  .tablet-composition-modal__connectors {
    display: none;
  }

  .tablet-composition-modal__diagram {
    justify-self: center;
    width: min(420px, 100%);
  }

  .tablet-composition-modal__list {
    gap: 14px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 112px;
  }

  .tablet-composition-modal__micro-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tablet-composition-modal {
    padding: 8px;
  }

  .tablet-composition-modal__dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 24px 16px 18px;
    border-radius: 14px;
  }

  .tablet-composition-modal__close {
    top: 13px;
    right: 13px;
    width: 48px;
    height: 48px;
  }

  .tablet-composition-icon--close {
    width: 36px;
    height: 36px;
  }

  .tablet-composition-modal__header {
    padding-right: 48px;
  }

  .tablet-composition-modal__eyebrow {
    margin-bottom: 12px;
    font-size: 13px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(31px, 9.4vw, 40px);
    line-height: .96;
  }

  .tablet-composition-modal__main {
    gap: 16px;
    margin-top: 18px;
  }

  .tablet-composition-modal__diagram {
    width: min(300px, 92%);
  }

  .tablet-composition-modal__ring--outer,
  .tablet-composition-modal__ring--middle {
    stroke-width: 22;
  }

  .tablet-composition-modal__ring--inner {
    stroke-width: 19;
  }

  .tablet-composition-modal__core {
    width: 162px;
    height: 162px;
    gap: 4px;
  }

  .tablet-composition-modal__core .tablet-composition-icon {
    width: 58px;
    height: 58px;
  }

  .tablet-composition-modal__core strong {
    font-size: 15px;
  }

  .tablet-composition-modal__list {
    gap: 10px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 86px;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .tablet-composition-modal__ingredient dt {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px;
    font-size: 14px;
    line-height: 1.12;
  }

  .tablet-composition-modal__ingredient dt .tablet-composition-icon {
    width: 46px;
    height: 46px;
  }

  .tablet-composition-modal__ingredient dd {
    min-width: 80px;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .tablet-composition-modal__ingredient dd::before {
    display: none;
  }

  .tablet-composition-modal__micro {
    min-height: 0;
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
  }

  .tablet-composition-modal__micro h3 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .tablet-composition-modal__micro-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tablet-composition-modal__micro-item {
    min-height: 48px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .tablet-composition-modal__micro-item .tablet-composition-icon {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tablet-composition-modal__dialog {
    animation: none;
  }
}

/* Composition modal fit pass, 2026-08-14. */
.tablet-composition-modal {
  place-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: clamp(10px, 2dvh, 20px);
}

.tablet-composition-modal__dialog {
  width: min(1240px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: clamp(30px, 3.8dvh, 44px) clamp(34px, 3vw, 52px) clamp(26px, 3.2dvh, 38px);
}

.tablet-composition-modal__close {
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.tablet-composition-modal__close:hover {
  background: transparent;
}

.tablet-composition-icon--close {
  display: none;
}

.tablet-composition-modal__close::before,
.tablet-composition-modal__close::after {
  content: "";
  grid-area: 1 / 1;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.tablet-composition-modal__close::before {
  transform: rotate(45deg);
}

.tablet-composition-modal__close::after {
  transform: rotate(-45deg);
}

.tablet-composition-modal__header {
  padding-right: 62px;
}

.tablet-composition-modal__eyebrow {
  margin-bottom: 15px;
  font-size: 16px;
}

.tablet-composition-modal__header h2 {
  font-size: clamp(42px, 3.7vw, 58px);
  line-height: .95;
}

.tablet-composition-modal__main {
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 108px;
  min-height: 386px;
  margin-top: 6px;
}

.tablet-composition-modal__diagram {
  width: 386px;
  height: 386px;
}

.tablet-composition-modal__core {
  width: 200px;
  height: 200px;
}

.tablet-composition-modal__core .tablet-composition-icon {
  width: 74px;
  height: 74px;
}

.tablet-composition-modal__core strong {
  font-size: 18px;
}

.tablet-composition-modal__list {
  gap: 18px;
}

.tablet-composition-modal__ingredient {
  min-height: 112px;
  gap: 24px;
  padding: 13px 20px;
}

.tablet-composition-modal__ingredient dt {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 18px;
  font-size: clamp(19px, 1.45vw, 24px);
}

.tablet-composition-modal__ingredient dt .tablet-composition-icon {
  width: 60px;
  height: 60px;
  justify-self: center;
  transform: translateX(var(--composition-icon-nudge, 0));
}

.tablet-composition-modal__ingredient dt .tablet-composition-icon--carbonate {
  --composition-icon-nudge: -1px;
}

.tablet-composition-modal__ingredient dt .tablet-composition-icon--chloride {
  --composition-icon-nudge: -6px;
}

.tablet-composition-modal__ingredient dt .tablet-composition-icon--percarbonate {
  --composition-icon-nudge: 9px;
}

.tablet-composition-modal__ingredient dd {
  min-width: 132px;
  min-height: 44px;
  padding: 9px 18px;
  font-size: 18px;
}

.tablet-composition-modal__ingredient dd::before {
  left: -25px;
  height: 72px;
}

.tablet-composition-modal__micro {
  min-height: 128px;
  margin-top: 22px;
  padding: 16px 24px 20px;
}

.tablet-composition-modal__micro h3 {
  margin-bottom: 14px;
  font-size: 20px;
}

.tablet-composition-modal__micro-list {
  gap: 22px;
}

.tablet-composition-modal__micro-item {
  min-height: 54px;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 18px;
  font-size: 15.5px;
}

.tablet-composition-modal__micro-item .tablet-composition-icon {
  width: 30px;
  height: 30px;
}

@media (max-height: 820px) and (min-width: 901px) {
  .tablet-composition-modal {
    padding: 10px;
  }

  .tablet-composition-modal__dialog {
    width: min(1160px, calc(100vw - 24px));
    max-height: calc(100dvh - 20px);
    padding: 28px 40px 26px;
  }

  .tablet-composition-modal__close {
    top: 16px;
    right: 18px;
  }

  .tablet-composition-modal__eyebrow {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(38px, 3.3vw, 48px);
  }

  .tablet-composition-modal__main {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 76px;
    min-height: 310px;
    margin-top: 4px;
  }

  .tablet-composition-modal__diagram {
    width: 310px;
    height: 310px;
  }

  .tablet-composition-modal__ring--outer,
  .tablet-composition-modal__ring--middle {
    stroke-width: 22;
  }

  .tablet-composition-modal__ring--inner {
    stroke-width: 19;
  }

  .tablet-composition-modal__core {
    width: 158px;
    height: 158px;
  }

  .tablet-composition-modal__core .tablet-composition-icon {
    width: 56px;
    height: 56px;
  }

  .tablet-composition-modal__core strong {
    font-size: 14px;
  }

  .tablet-composition-modal__list {
    gap: 14px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 94px;
    gap: 18px;
    padding: 10px 16px;
  }

  .tablet-composition-modal__ingredient dt {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    font-size: 18px;
  }

  .tablet-composition-modal__ingredient dt .tablet-composition-icon {
    width: 50px;
    height: 50px;
  }

  .tablet-composition-modal__ingredient dd {
    min-width: 112px;
    min-height: 38px;
    font-size: 16px;
  }

  .tablet-composition-modal__micro {
    min-height: 96px;
    margin-top: 14px;
    padding: 12px 18px 14px;
  }

  .tablet-composition-modal__micro h3 {
    margin-bottom: 10px;
    font-size: 17px;
  }

  .tablet-composition-modal__micro-list {
    gap: 12px;
  }

  .tablet-composition-modal__micro-item {
    min-height: 42px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .tablet-composition-modal__micro-item .tablet-composition-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 1200px) {
  .tablet-composition-modal__dialog {
    width: min(1120px, calc(100vw - 24px));
    padding: 34px 34px 30px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(38px, 4.2vw, 50px);
  }

  .tablet-composition-modal__main {
    grid-template-columns: minmax(320px, 41%) minmax(0, 1fr);
    gap: clamp(50px, 6vw, 68px);
    min-height: 342px;
  }

  .tablet-composition-modal__diagram {
    width: 342px;
    height: 342px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 100px;
  }

  .tablet-composition-modal__ingredient dt {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    font-size: 18px;
  }

  .tablet-composition-modal__ingredient dt .tablet-composition-icon {
    width: 52px;
    height: 52px;
  }

  .tablet-composition-modal__ingredient dd {
    min-width: 110px;
    font-size: 16px;
  }

  .tablet-composition-modal__micro-list {
    gap: 12px;
  }

  .tablet-composition-modal__micro-item {
    font-size: 13.5px;
  }
}

@media (max-width: 900px) {
  .tablet-composition-modal {
    padding: 10px;
  }

  .tablet-composition-modal__dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 26px 24px 22px;
  }

  .tablet-composition-modal__close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .tablet-composition-icon--close {
    width: 30px;
    height: 30px;
  }

  .tablet-composition-modal__header {
    padding-right: 48px;
  }

  .tablet-composition-modal__eyebrow {
    margin-bottom: 9px;
    font-size: 13px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(34px, 5.2vw, 44px);
  }

  .tablet-composition-modal__main {
    grid-template-columns: minmax(230px, 36%) minmax(0, 1fr);
    gap: 28px;
    min-height: 288px;
    margin-top: 6px;
  }

  .tablet-composition-modal__connectors {
    display: none;
  }

  .tablet-composition-modal__diagram {
    width: min(286px, 100%);
    height: auto;
    aspect-ratio: 1;
  }

  .tablet-composition-modal__core {
    width: 144px;
    height: 144px;
  }

  .tablet-composition-modal__core .tablet-composition-icon {
    width: 50px;
    height: 50px;
  }

  .tablet-composition-modal__core strong {
    font-size: 13px;
  }

  .tablet-composition-modal__list {
    gap: 10px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 82px;
    gap: 12px;
    padding: 9px 12px;
  }

  .tablet-composition-modal__ingredient dt {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    font-size: 14.5px;
  }

  .tablet-composition-modal__ingredient dt .tablet-composition-icon {
    width: 40px;
    height: 40px;
  }

  .tablet-composition-modal__ingredient dd {
    min-width: 78px;
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .tablet-composition-modal__ingredient dd::before {
    display: none;
  }

  .tablet-composition-modal__micro {
    min-height: 0;
    margin-top: 10px;
    padding: 11px 12px 12px;
  }

  .tablet-composition-modal__micro h3 {
    margin-bottom: 9px;
    font-size: 15px;
  }

  .tablet-composition-modal__micro-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .tablet-composition-modal__micro-item {
    min-height: 40px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 8px;
    font-size: 11.5px;
  }

  .tablet-composition-modal__micro-item .tablet-composition-icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 620px) {
  .tablet-composition-modal {
    padding: 8px;
  }

  .tablet-composition-modal__dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 20px 16px 16px;
  }

  .tablet-composition-modal__close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }

  .tablet-composition-icon--close {
    width: 26px;
    height: 26px;
  }

  .tablet-composition-modal__header {
    padding-right: 40px;
  }

  .tablet-composition-modal__eyebrow {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .tablet-composition-modal__main {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    margin-top: 8px;
  }

  .tablet-composition-modal__diagram {
    justify-self: center;
    width: min(190px, 58vw);
  }

  .tablet-composition-modal__ring--outer,
  .tablet-composition-modal__ring--middle {
    stroke-width: 20;
  }

  .tablet-composition-modal__ring--inner {
    stroke-width: 17;
  }

  .tablet-composition-modal__core {
    width: 96px;
    height: 96px;
    gap: 2px;
  }

  .tablet-composition-modal__core .tablet-composition-icon {
    width: 34px;
    height: 34px;
  }

  .tablet-composition-modal__core strong {
    font-size: 10px;
  }

  .tablet-composition-modal__ingredient {
    min-height: 56px;
    padding: 7px 9px;
  }

  .tablet-composition-modal__ingredient dt {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    font-size: 12px;
  }

  .tablet-composition-modal__ingredient dt .tablet-composition-icon {
    width: 32px;
    height: 32px;
  }

  .tablet-composition-modal__ingredient dd {
    min-width: 64px;
    min-height: 28px;
    padding: 5px 7px;
    font-size: 10.5px;
  }

  .tablet-composition-modal__micro {
    margin-top: 8px;
    padding: 9px;
  }

  .tablet-composition-modal__micro h3 {
    margin-bottom: 7px;
    font-size: 13px;
  }

  .tablet-composition-modal__micro-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .tablet-composition-modal__micro-item {
    min-height: 34px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 5px;
    padding: 5px 7px;
    font-size: 10.5px;
  }

  .tablet-composition-modal__micro-item .tablet-composition-icon {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 420px) {
  .tablet-composition-modal__dialog {
    padding: 18px 12px 12px;
    overflow-x: hidden;
  }

  .tablet-composition-modal__header h2 {
    font-size: clamp(25px, 7.6vw, 30px);
  }

  .tablet-composition-modal__diagram {
    width: min(164px, 52vw);
  }

  .tablet-composition-modal__ingredient dt {
    font-size: 11px;
  }

  .tablet-composition-modal__micro-list {
    grid-template-columns: 1fr;
  }

  .tablet-composition-modal__micro-item {
    font-size: 9.5px;
  }
}

/* Tablet animation: wholesale-style dark gradient panels with subtle stripe texture. */
.tablet-test-step,
.tablet-test-benefits {
  background-color: #073821;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 36%),
    repeating-linear-gradient(152deg, rgba(197, 255, 222, .055) 0 1px, transparent 1px 17px),
    radial-gradient(circle at 16% 0%, rgba(94, 245, 158, .18), transparent 34%),
    linear-gradient(132deg, #042516 0%, #073821 48%, #0c6637 100%);
  border-color: rgba(136, 238, 180, .26);
  box-shadow:
    inset 0 1px 0 rgba(225, 255, 238, .08),
    0 18px 38px rgba(7, 56, 33, .25);
}

.tablet-test-step--one {
  border-color: rgba(95, 153, 255, .62);
  background-image:
    linear-gradient(135deg, rgba(123, 178, 255, .13), rgba(255, 255, 255, 0) 35%),
    repeating-linear-gradient(152deg, rgba(197, 255, 222, .05) 0 1px, transparent 1px 17px),
    radial-gradient(circle at 11% 8%, rgba(71, 127, 212, .24), transparent 35%),
    linear-gradient(132deg, #042414 0%, #073821 50%, #0b5832 100%);
  box-shadow:
    inset 0 1px 0 rgba(143, 186, 255, .075),
    0 18px 38px rgba(7, 56, 33, .25);
}

.tablet-test-step--two {
  border-color: rgba(85, 225, 139, .58);
  background-image:
    linear-gradient(135deg, rgba(112, 240, 168, .14), rgba(255, 255, 255, 0) 35%),
    repeating-linear-gradient(152deg, rgba(197, 255, 222, .058) 0 1px, transparent 1px 17px),
    radial-gradient(circle at 12% 8%, rgba(52, 235, 124, .2), transparent 35%),
    linear-gradient(132deg, #042516 0%, #073821 48%, #0d693a 100%);
  box-shadow:
    inset 0 1px 0 rgba(128, 255, 181, .075),
    0 18px 38px rgba(7, 56, 33, .25);
}

.tablet-test-step--three {
  border-color: rgba(214, 244, 232, .48);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 35%),
    repeating-linear-gradient(152deg, rgba(197, 255, 222, .05) 0 1px, transparent 1px 17px),
    radial-gradient(circle at 13% 8%, rgba(213, 255, 238, .13), transparent 35%),
    linear-gradient(132deg, #042516 0%, #073821 50%, #0a5330 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    0 18px 38px rgba(7, 56, 33, .23);
}

.tablet-test-benefits {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 34%),
    repeating-linear-gradient(152deg, rgba(197, 255, 222, .052) 0 1px, transparent 1px 19px),
    radial-gradient(circle at 82% 6%, rgba(83, 239, 145, .16), transparent 36%),
    radial-gradient(circle at 8% 100%, rgba(128, 255, 190, .1), transparent 36%),
    linear-gradient(132deg, #042516 0%, #073821 48%, #0c6537 100%);
  border-color: rgba(136, 238, 180, .28);
  box-shadow:
    inset 0 1px 0 rgba(225, 255, 238, .08),
    0 20px 44px rgba(7, 56, 33, .28);
}

@media (min-width: 901px) and (max-width: 1200px) and (min-height: 821px) {
  .tablet-composition-modal__connector-set--default,
  .tablet-composition-modal__connector-set--compact {
    display: none;
  }

  .tablet-composition-modal__connector-set--mid {
    display: inline;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  .tablet-composition-modal__connector-set--default,
  .tablet-composition-modal__connector-set--mid {
    display: none;
  }

  .tablet-composition-modal__connector-set--compact {
    display: inline;
  }
}

/* Tablet animation: final CTA and benefit color pass, 2026-08-17. */
.tablet-test-composition-trigger {
  min-height: 48px;
  gap: 26px;
  padding: 11px 19px;
  font-size: 16px;
}

.tablet-test-composition-trigger span:last-child {
  font-size: 26px;
}

.tablet-test-benefit--one .tablet-test-benefit__number {
  color: #f6fff9;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 11px rgba(255, 255, 255, .14), 0 0 10px rgba(255, 255, 255, .1);
}

.tablet-test-benefit--three .tablet-test-benefit__number {
  color: #7dafff;
  background: rgba(9, 41, 79, .94);
  box-shadow: inset 0 0 11px rgba(76, 134, 255, .22), 0 0 10px rgba(54, 117, 255, .2);
}

@media (max-width: 900px) {
  .tablet-test-composition-trigger {
    min-height: 46px;
    gap: 20px;
    padding: 10px 16px;
    font-size: 14.5px;
  }

  .tablet-test-composition-trigger span:last-child {
    font-size: 23px;
  }
}

@media (max-width: 560px) {
  .tablet-test-composition-trigger {
    min-height: 44px;
    gap: 16px;
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .tablet-test-composition-trigger span:last-child {
    font-size: 21px;
  }
}