/* KNOQ Signal Glass. The HTML remains the authoritative, stable content layer. */
.h-audience-phone,
.h-handset,
.h-tablet,
.knoq-tablet,
.phone-frame,
.support-tablet-shell {
  transform: translateZ(0);
}

.knoq-signal-glass-device {
  position: relative;
  isolation: isolate;
}

.h-audience-phone,
.h-handset { overflow: hidden; }

.h-audience-phone > .h-kicker,
.h-audience-phone > h3,
.h-audience-phone > p,
.h-audience-phone > ul,
.h-audience-phone > a,
.support-tablet-shell > .form-head,
.support-tablet-shell > .field-grid,
.support-tablet-shell > p:not(.honeypot),
.support-tablet-shell > label,
.support-tablet-shell > button {
  position: relative;
  z-index: 2;
}

.h-audience-phone .h-audience-motif { z-index: 1; }

/* Text-led tablets keep readable content above the optical layer. */
.h-tablet > .h-kicker,
.h-tablet > h3,
.h-tablet > ul,
.h-tablet > .h-tablet-note,
.privacy-quick-read.knoq-tablet > :not(.knoq-liquid-glass):not(.tablet-hardware):not(.tablet-status) {
  position: relative;
  z-index: 2;
}

/* Screenshot and portrait devices receive the cover glass above the image. */
.h-handset > img,
.phone-frame > .phone-screen,
.founder-tablet > .portrait-screen {
  position: relative;
  z-index: 1;
}

.h-handset > .knoq-liquid-glass,
.phone-frame > .knoq-liquid-glass,
.founder-tablet > .knoq-liquid-glass { z-index: 5; }

.tablet-camera,
.tablet-side-keys,
.tablet-home-bar,
.tablet-status { z-index: 7; }

.knoq-liquid-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 31px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(239,255,247,.11), transparent 4%, transparent 95%, rgba(208,239,221,.08)),
    linear-gradient(150deg, rgba(255,255,255,.08), transparent 16%, transparent 76%, rgba(161,218,186,.035));
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.32),
    inset -1px 0 0 rgba(174,226,197,.11),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.45);
  transform: translateZ(0);
}

.knoq-liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(218,246,229,.16);
  border-radius: inherit;
  background:
    radial-gradient(ellipse 42% 28% at 24% 14%, rgba(255,255,255,.18), rgba(205,246,223,.06) 40%, transparent 73%),
    radial-gradient(ellipse 46% 12% at 76% 85%, rgba(139,124,255,.025), transparent 75%);
  mix-blend-mode: screen;
}

@supports ((backdrop-filter: saturate(1.05)) or (-webkit-backdrop-filter: saturate(1.05))) {
  .knoq-liquid-glass::before {
    backdrop-filter: saturate(1.06) brightness(1.02) contrast(1.02);
    -webkit-backdrop-filter: saturate(1.06) brightness(1.02) contrast(1.02);
  }
}

.knoq-liquid-glass::after {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -39%;
  width: 31%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.035) 30%, rgba(255,255,255,.2) 50%, rgba(196,238,214,.055) 70%, transparent);
  filter: blur(1.5px);
  opacity: 0;
  transform: skewX(-13deg) translate3d(-20%,0,0);
  mix-blend-mode: screen;
}

.knoq-signal-glass-device.is-glass-energised > .knoq-liquid-glass::after {
  animation: knoq-glass-glint 1.45s cubic-bezier(.25,.1,.25,1) 1;
}

.knoq-liquid-glass__lens {
  position: absolute;
  inset: -9%;
  border-radius: 38%;
  background: conic-gradient(from 218deg at 25% 15%, transparent 0 18%, rgba(255,201,40,.025) 25%, rgba(139,124,255,.025) 31%, transparent 39% 100%);
  mask-image: radial-gradient(ellipse 62% 43% at 25% 15%, #000 0 48%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 43% at 25% 15%, #000 0 48%, transparent 78%);
  mix-blend-mode: screen;
}

.knoq-liquid-glass__edge {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(233,255,242,.12);
  border-radius: 27px;
  box-shadow:
    inset 8px 0 12px -12px rgba(255,255,255,.8),
    inset -8px 0 14px -12px rgba(103,195,145,.55),
    inset 0 10px 14px -15px rgba(255,255,255,.85);
}

@keyframes knoq-glass-glint {
  0% { transform: skewX(-13deg) translate3d(-20%,0,0); opacity: 0; }
  18% { opacity: .58; }
  82% { opacity: .4; }
  100% { transform: skewX(-13deg) translate3d(510%,0,0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .knoq-signal-glass-device.is-glass-energised > .knoq-liquid-glass::after { animation: none; }
}

/* Geometry-specific cover glass. */
.h-handset > .knoq-liquid-glass {
  inset: 10px;
  border-radius: 25px;
}

.h-handset > .knoq-liquid-glass .knoq-liquid-glass__edge { border-radius: 21px; }

.h-finish-phones .h-handset > .knoq-liquid-glass {
  inset: 8px;
  border-radius: 21px;
}

.h-finish-phones .h-handset > .knoq-liquid-glass .knoq-liquid-glass__edge { border-radius: 17px; }

.h-tablet > .knoq-liquid-glass { border-radius: 32px; }
.h-tablet > .knoq-liquid-glass .knoq-liquid-glass__edge { border-radius: 28px; }

.knoq-tablet > .knoq-liquid-glass { border-radius: 26px; }
.knoq-tablet > .knoq-liquid-glass .knoq-liquid-glass__edge { border-radius: 22px; }

.phone-frame > .knoq-liquid-glass {
  inset: 9px;
  border-radius: 29px;
}

.phone-frame > .knoq-liquid-glass .knoq-liquid-glass__edge { border-radius: 25px; }

/* The support form is a tablet, not a generic card. */
.support-tablet-shell {
  position: relative;
  overflow: visible;
  padding-top: clamp(76px, 7vw, 94px) !important;
  padding-bottom: clamp(58px, 6vw, 72px) !important;
  border: 8px solid #25312e !important;
  border-radius: 42px !important;
  outline: 1px solid #83948c;
  background: radial-gradient(ellipse at 82% 14%, rgba(37,88,61,.3), transparent 46%), linear-gradient(145deg,#19231f,#0e1512) !important;
  box-shadow: inset 0 0 0 1px #060c09, inset 1px 1px 3px rgba(255,255,255,.25), 0 1px 0 2px #43534b, 7px 9px 0 1px #080e0b, 12px 18px 0 -2px #19221d, 0 34px 70px rgba(0,0,0,.5) !important;
}

.support-tablet-shell .knoq-liquid-glass {
  inset: 0;
  border-radius: 33px;
}

.support-tablet-status {
  position: absolute;
  top: 18px;
  left: 30px;
  right: 30px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #edf3ee;
  font: 650 11px/1.2 "DM Mono", monospace;
  pointer-events: none;
}

.support-tablet-status__network { display: flex; align-items: center; gap: 7px; }
.support-tablet-status svg { display: block; width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.support-tablet-status .support-tablet-battery { width: 25px; }
.support-tablet-status .support-tablet-battery rect:last-child { fill: currentColor; stroke: none; }

.support-tablet-camera {
  position: absolute;
  top: 17px;
  left: 50%;
  z-index: 7;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #55777b, #06100d 45%);
  box-shadow: inset 1px 1px 2px rgba(154,203,204,.55), 0 0 0 3px #090f0c;
}

.support-tablet-homebar {
  position: absolute;
  bottom: 18px;
  left: 39%;
  z-index: 6;
  width: 22%;
  height: 4px;
  border-radius: 8px;
  background: rgba(216,231,221,.65);
}

.support-tablet-hardware {
  position: absolute;
  left: -12px;
  top: 20%;
  width: 4px;
  height: 52px;
  border-radius: 2px;
  background: linear-gradient(90deg,#75877e,#24392e);
  box-shadow: 0 67px 0 #506459;
}

@media (max-width: 470px) {
  .support-tablet-shell { border-width: 6px !important; border-radius: 32px !important; padding-top: 70px !important; padding-bottom: 56px !important; }
  .support-tablet-shell .knoq-liquid-glass { border-radius: 25px; }
  .support-tablet-status { left: 21px; right: 21px; font-size: 9px; }
}

@media (prefers-reduced-transparency: reduce) {
  .knoq-liquid-glass { background: none; }
  .knoq-liquid-glass::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }
  .knoq-liquid-glass__lens { display: none; }
}

@media (forced-colors: active) {
  .knoq-liquid-glass { display: none; }
}

@media (max-width: 760px) {
  .knoq-liquid-glass { opacity: .78; }
}