/* Homepage code → liquid → interface visual.
   Everything is scoped to #approval so shared cards, canvases and navigation
   keep their existing cascade and lifecycle. */

.home-page #approval .code-liquid-interface {
  --cli-code-opacity: 0;
  --cli-code-converge: 0;
  --cli-code-scale: 1;
  --cli-code-line-scale: 1;
  --cli-code-blur: 0px;
  --cli-phrase-opacity: 0;
  --cli-phrase-scale: .84;
  --cli-phrase-y: 12px;
  --cli-final-opacity: 0;
  --cli-final-scale: .965;
  --cli-final-blur: 7px;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 620px);
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  border-radius: clamp(22px, 4vw, 38px);
  background:
    radial-gradient(circle at 50% 48%, rgba(101, 228, 220, .075), transparent 45%),
    linear-gradient(150deg, rgba(7, 56, 79, .16), rgba(3, 16, 26, .05));
  box-shadow: inset 0 0 0 1px rgba(165, 255, 244, .045);
  pointer-events: none;
}

.home-page #approval .code-liquid-interface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(121, 183, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 183, 255, .04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
  opacity: .58;
}

.home-page #approval .code-liquid-interface__canvas,
.home-page #approval .code-liquid-interface__fallback,
.home-page #approval .code-liquid-interface__code,
.home-page #approval .code-liquid-interface__phrase,
.home-page #approval .code-liquid-interface__final {
  position: absolute;
  inset: 0;
}

.home-page #approval .code-liquid-interface__canvas {
  z-index: 2;
  opacity: 0;
}

.home-page #approval .code-liquid-interface__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* No-JS, Save-Data and WebGL failure state: a complete, sharp interface. */
.home-page #approval .code-liquid-interface__fallback {
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 1;
}

.home-page #approval .code-liquid-interface__code {
  z-index: 3;
  display: block;
  overflow: hidden;
  color: rgba(197, 234, 255, .7);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(.54rem, 1.15vw, .76rem);
  line-height: 1;
  letter-spacing: .012em;
  opacity: 0;
  filter: blur(var(--cli-code-blur));
  transform: scale(var(--cli-code-scale));
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 12%, #000 88%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 1%, #000 12%, #000 88%, transparent 99%);
}

.home-page #approval .code-liquid-interface__code > span {
  position: absolute;
  top: var(--line-y);
  left: var(--from);
  display: block;
  width: var(--length);
  white-space: nowrap;
  overflow: hidden;
  color: rgba(197, 234, 255, .64);
  text-shadow: 0 0 14px rgba(121, 183, 255, .28);
  transform: scaleX(var(--cli-code-line-scale));
  transform-origin: center;
}

.home-page #approval .code-liquid-interface__code > span::after {
  content: '';
  display: inline-block;
  width: clamp(28px, 7vw, 70px);
  height: 1px;
  margin-left: .65rem;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(101, 228, 220, .5), transparent);
}

.home-page #approval .code-liquid-interface__code b { color: #a5fff4; font-weight: 500; }
.home-page #approval .code-liquid-interface__code em { color: #79b7ff; font-style: normal; }

.home-page #approval .code-liquid-interface__phrase {
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e5f4ff;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(.78rem, 1.55vw, 1.08rem);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(121, 183, 255, .28);
  opacity: 0;
  transform: translate3d(0, var(--cli-phrase-y), 0) scale(var(--cli-phrase-scale));
  transform-origin: center;
}

.home-page #approval .code-liquid-interface__final {
  z-index: 5;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(var(--cli-final-blur));
  transform: scale(var(--cli-final-scale));
  transform-origin: center;
}

.home-page #approval .code-liquid-interface__page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: auto;
  height: 87%;
  aspect-ratio: 4 / 5;
  min-height: 0;
  overflow: hidden;
  padding: 5.4% 5.8%;
  border: 1px solid rgba(207, 253, 255, .38);
  border-radius: clamp(15px, 2.4vw, 25px);
  color: #f3fbfc;
  background:
    radial-gradient(circle at 76% 18%, rgba(121, 183, 255, .18), transparent 27%),
    linear-gradient(145deg, rgba(7, 56, 79, .98), rgba(3, 16, 26, .98) 76%);
  box-shadow:
    inset 0 0 38px rgba(165, 255, 244, .045),
    0 24px 70px rgba(0, 8, 18, .36),
    0 0 34px rgba(121, 183, 255, .075);
}

.home-page #approval .code-liquid-interface__page::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 15%, rgba(229, 255, 255, .055) 37%, transparent 54%),
    radial-gradient(circle at 18% 78%, rgba(101, 228, 220, .1), transparent 26%);
  pointer-events: none;
}

.home-page #approval .code-liquid-interface__page-head,
.home-page #approval .code-liquid-interface__page-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-page #approval .code-liquid-interface__page-head {
  padding-bottom: 5%;
  border-bottom: 1px solid rgba(165, 255, 244, .16);
}

.home-page #approval .code-liquid-interface__mark,
.home-page #approval .code-liquid-interface__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.home-page #approval .code-liquid-interface__mark i {
  display: block;
  width: clamp(13px, 2.1vw, 21px);
  height: 2px;
  border-radius: 999px;
  background: #65e4dc;
  transform: rotate(-8deg);
}

.home-page #approval .code-liquid-interface__mark i:nth-child(2) { width: clamp(8px, 1.25vw, 13px); opacity: .66; }
.home-page #approval .code-liquid-interface__mark i:nth-child(3) { width: clamp(5px, .8vw, 8px); opacity: .34; }
.home-page #approval .code-liquid-interface__nav i {
  display: block;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(243, 251, 252, .66);
}

.home-page #approval .code-liquid-interface__hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 2% 7%;
}

.home-page #approval .code-liquid-interface__hero span {
  color: #a5fff4;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(.38rem, .74vw, .58rem);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-page #approval .code-liquid-interface__hero strong {
  display: block;
  margin-top: 5%;
  font-size: clamp(.96rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}

.home-page #approval .code-liquid-interface__hero > i {
  display: block;
  width: 45%;
  height: 2px;
  margin-top: 7%;
  border-radius: 10px;
  background: linear-gradient(90deg, #79b7ff, rgba(121, 183, 255, 0));
}

.home-page #approval .code-liquid-interface__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 6%;
  min-height: 27%;
  padding-top: 7%;
  border-top: 1px solid rgba(165, 255, 244, .13);
}

.home-page #approval .code-liquid-interface__image {
  display: block;
  min-height: 66px;
  border-radius: clamp(8px, 1.4vw, 14px);
  background:
    radial-gradient(circle at 60% 36%, rgba(165, 255, 244, .48), transparent 8%),
    radial-gradient(ellipse at 54% 70%, rgba(101, 228, 220, .32), transparent 34%),
    linear-gradient(145deg, #0c5a73, #051d2e 72%);
  box-shadow: inset 0 0 0 1px rgba(165, 255, 244, .13);
}

.home-page #approval .code-liquid-interface__lines {
  display: flex;
  flex-direction: column;
  gap: 12%;
  padding-top: 6%;
}

.home-page #approval .code-liquid-interface__lines i {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 10px;
  background: rgba(197, 234, 255, .25);
}

.home-page #approval .code-liquid-interface__lines i:nth-child(2) { width: 82%; }
.home-page #approval .code-liquid-interface__lines i:nth-child(3) { width: 94%; }
.home-page #approval .code-liquid-interface__lines i:nth-child(4) { width: 58%; background: rgba(101, 228, 220, .42); }

.home-page #approval .code-liquid-interface__page-foot {
  align-self: end;
  gap: 6%;
  padding-top: 5%;
}

.home-page #approval .code-liquid-interface__page-foot i {
  display: block;
  width: 31%;
  height: 2px;
  border-radius: 10px;
  background: rgba(197, 234, 255, .14);
}

.home-page #approval .code-liquid-interface__page-foot i:last-child { width: 17%; }

.home-page #approval .liquid-bed__video {
  transition: opacity .45s ease;
}

.home-page #approval.code-liquid-interface-ready .liquid-bed__video {
  opacity: 0;
}

.home-page #approval.code-liquid-interface-ready .liquid-bed__mass {
  background: #06283a url('/assets/organic-water-poster.webp') center / cover no-repeat;
}

.home-page #approval.code-liquid-interface-ready .code-liquid-interface__fallback { opacity: 0; }
.home-page #approval.code-liquid-interface-ready .code-liquid-interface__canvas { opacity: 1; }
.home-page #approval .code-liquid-interface.is-webgl-ready .code-liquid-interface__code { opacity: var(--cli-code-opacity); }
.home-page #approval .code-liquid-interface.is-webgl-ready .code-liquid-interface__phrase { opacity: var(--cli-phrase-opacity); }
.home-page #approval .code-liquid-interface.is-webgl-ready .code-liquid-interface__final { opacity: var(--cli-final-opacity); }

.home-page #approval.code-liquid-interface-animating .code-liquid-interface__code,
.home-page #approval.code-liquid-interface-animating .code-liquid-interface__phrase,
.home-page #approval.code-liquid-interface-animating .code-liquid-interface__final {
  will-change: opacity, transform, filter;
}

/* This late, page-scoped block intentionally resolves the older approval-card
   rules without changing section height or any shared stylesheet. */
@media (min-width: 901px) {
  .home-page #approval .trust-panel {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .home-page #approval .trust-panel__copy { max-width: 34rem; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .home-page #approval .trust-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 4vh, 2.5rem);
    text-align: center;
  }

  .home-page #approval .code-liquid-interface { width: min(100%, 620px); max-height: 390px; }
  .home-page #approval .trust-panel__copy { max-width: 39rem; justify-self: center; }
  .home-page #approval .trust-panel__copy p:not(.eyebrow) { margin-inline: auto; }
}

@media (max-width: 700px) {
  .home-page #approval .trust-panel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(1.4rem, 5vw, 2rem);
    text-align: center;
  }

  .home-page #approval .code-liquid-interface {
    width: min(100%, 390px);
    min-height: 232px;
    max-height: 285px;
    border-radius: 22px;
  }

  .home-page #approval .trust-panel__copy { max-width: 35rem; justify-self: center; }
  .home-page #approval .trust-panel__copy p:not(.eyebrow) { margin-inline: auto; }
  .home-page #approval .code-liquid-interface__code { font-size: clamp(.44rem, 2vw, .58rem); }
  .home-page #approval .code-liquid-interface__code > span:nth-child(n+8) { display: none; }
  .home-page #approval .code-liquid-interface__hero strong { font-size: clamp(.78rem, 4vw, 1.05rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-page #approval .code-liquid-interface__fallback { opacity: 1 !important; }
  .home-page #approval .code-liquid-interface__canvas,
  .home-page #approval .code-liquid-interface__code,
  .home-page #approval .code-liquid-interface__phrase,
  .home-page #approval .code-liquid-interface__final { display: none !important; }
}

@media (forced-colors: active) {
  .home-page #approval .code-liquid-interface {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .home-page #approval .code-liquid-interface::before,
  .home-page #approval .code-liquid-interface__canvas,
  .home-page #approval .code-liquid-interface__code,
  .home-page #approval .code-liquid-interface__phrase,
  .home-page #approval .code-liquid-interface__final { display: none !important; }

  .home-page #approval .code-liquid-interface__fallback { display: grid !important; opacity: 1 !important; }
  .home-page #approval .code-liquid-interface__page { border: 2px solid CanvasText; color: CanvasText; background: Canvas; box-shadow: none; }
  .home-page #approval .code-liquid-interface__page::after { display: none; }
}