/* Shared with ecomhutsy.org app/glass.css — keep in sync. Offer + .com placements at the end. */
/* ==========================================================================
   EcomHutsy glass system — GlassIcon / GlassStage / GlassFlow
   Every object is built from layered glass: tinted back plate, frosted body,
   glowing glyph, specular highlight and a light sweep. Transforms only.
   ========================================================================== */

.glass-icon {
  --gs: 56px;
  --r: 30%;
  --gc: #2f6bff;
  --gc2: #8fb2ff;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--gs);
  height: var(--gs);
  transform-style: preserve-3d;
  vertical-align: middle;
}
.gi-sm { --gs: 38px; }
.gi-md { --gs: 56px; }
.gi-lg { --gs: 76px; }
.gi-xl { --gs: 132px; --r: 28%; }

.gi-tone-blue { --gc: #2f6bff; --g1: #2f6bff; --g2: #6d5dfc; --g3: #22d3ee; }
.gi-tone-violet { --gc: #6d4aff; --g1: #6d4aff; --g2: #c026d3; --g3: #60a5fa; }
.gi-tone-purple { --gc: #9333ea; --g1: #9333ea; --g2: #ec4899; --g3: #6366f1; }
.gi-tone-cyan { --gc: #0891b2; --g1: #06b6d4; --g2: #3b82f6; --g3: #2dd4bf; }
.gi-tone-green { --gc: #059669; --g1: #10b981; --g2: #14b8a6; --g3: #a3e635; }
.gi-tone-amber { --gc: #d97706; --g1: #f59e0b; --g2: #f97316; --g3: #fde047; }
.gi-tone-orange { --gc: #ea580c; --g1: #f97316; --g2: #ef4444; --g3: #fbbf24; }

.glass-icon > i { position: absolute; display: block; pointer-events: none; }

/* soft contact shadow */
.gi-shadow {
  left: 14%;
  right: 14%;
  bottom: -14%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc) 34%, transparent), transparent);
  transform: translateZ(-20px);
}
/* deeper coloured glass plate behind — gives thickness */
.gi-back {
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(150deg, var(--g2), var(--g1));
  opacity: .55;
  transform: translate3d(7%, 9%, -10px);
}
/* colourful glossy glass body — animated gradient, partly see-through */
.gi-body {
  inset: 0;
  border-radius: var(--r);
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--g1) 88%, transparent),
      color-mix(in srgb, var(--g2) 80%, transparent) 50%,
      color-mix(in srgb, var(--g3) 85%, transparent));
  background-size: 100% 100%, 240% 240%;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -12px 20px color-mix(in srgb, var(--g2) 45%, transparent),
    inset 0 10px 18px rgba(255, 255, 255, .22),
    0 16px 30px -14px color-mix(in srgb, var(--g1) 75%, transparent);
  animation: giHue 16s ease-in-out infinite alternate;
}
@keyframes giHue {
  0% { background-position: 0 0, 0% 30%; }
  100% { background-position: 0 0, 100% 70%; }
}
/* glowing glyph floats above the glass */
.gi-glyph {
  position: relative;
  width: 52%;
  height: 52%;
  overflow: visible;
  fill: none;
  stroke: var(--gglyph, #fff);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--gc) 80%, black)) drop-shadow(0 0 6px rgba(255, 255, 255, .55));
  transform: translateZ(14px);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.gi-xl .gi-glyph { stroke-width: 1.6; }
.gi-glyph > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) calc(.25s + var(--i, 0) * .12s);
}
/* draw-on when the parent card reveals */
.eh-pending .gi-glyph > * { stroke-dashoffset: 1; transition: none; }

/* specular highlight */
.gi-shine {
  top: 5%;
  left: 7%;
  right: 7%;
  height: 42%;
  border-radius: var(--r) var(--r) 50% 50% / var(--r) var(--r) 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0));
  opacity: .8;
  transform: translateZ(16px);
}
/* travelling light sweep */
.gi-sweep { inset: 0; border-radius: var(--r); overflow: hidden; transform: translateZ(17px); }
.gi-sweep::before {
  position: absolute;
  inset: -20% auto -20% -60%;
  width: 45%;
  content: "";
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: giSweep 7s ease-in-out infinite;
  animation-delay: var(--sweep-delay, 0s);
}
@keyframes giSweep { 0%, 72% { left: -60%; } 100% { left: 130%; } }

.gi-lg, .gi-xl { animation: giFloat 6s ease-in-out infinite; }
@keyframes giFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } }

/* 3D lift when the surrounding card tilts or is hovered */
.eh-tilt.is-tilting .glass-icon .gi-glyph,
a:hover > .glass-icon .gi-glyph,
a:hover > span > .glass-icon .gi-glyph { transform: translateZ(26px) scale(1.07); }
.eh-tilt.is-tilting .glass-icon .gi-back { transform: translate3d(9%, 12%, -14px); }
.eh-tilt.is-tilting > span:first-child .glass-icon svg,
.eh-tilt.is-tilting .solution-card-icon .glass-icon svg { rotate: none; }


/* ---------- GlassStage --------------------------------------------------- */

.glass-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 320px;
  perspective: 1400px;
  container-type: inline-size;
}
.gs-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-14deg);
  animation: gsSway 16s ease-in-out infinite alternate;
}
@keyframes gsSway { 0% { transform: rotateX(12deg) rotateY(-14deg); } 100% { transform: rotateX(8deg) rotateY(-6deg); } }

.gs-pane {
  position: absolute;
  display: block;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .75);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .7), transparent 50%),
    linear-gradient(135deg, rgba(9, 92, 255, .16), rgba(76, 59, 255, .1) 50%, rgba(147, 197, 253, .18));
  background-size: 100% 100%, 260% 260%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -24px 40px rgba(109, 74, 255, .14), 0 40px 80px -40px rgba(60, 40, 170, .5);
  animation: giHue 12s ease-in-out infinite alternate;
}
.gs-pane-1 { inset: 6% 8% 10% 4%; transform: translateZ(-90px); opacity: .7; }
.gs-pane-2 { inset: 14% 14% 16% 12%; transform: translateZ(-20px); }
.gs-pane-3 { width: 34%; height: 24%; right: 4%; bottom: 8%; transform: translateZ(70px); border-radius: 22px; }
.gs-pane-3::before, .gs-pane-3::after { position: absolute; left: 12%; height: 10%; border-radius: 6px; content: ""; background: linear-gradient(90deg, #6d8bff, #a78bfa); opacity: .55; }
.gs-pane-3::before { top: 28%; width: 62%; }
.gs-pane-3::after { top: 56%; width: 40%; opacity: .3; }
.gs-pane-1::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%);
  background-size: 250% 100%;
  animation: gsLight 9s ease-in-out infinite;
}
@keyframes gsLight { 0%, 40% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

.gs-orbit { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(10px); fill: none; stroke: rgba(91, 108, 255, .28); stroke-width: 1; stroke-dasharray: 3 6; }
.gs-spin { position: absolute; left: 50%; top: 50%; width: 76%; height: 32%; margin: -16% 0 0 -38%; transform: translateZ(30px); }
.gs-spin b { position: absolute; inset: 0; border-radius: 50%; animation: gsSpin 10s linear infinite; }
.gs-spin b::before { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; content: ""; background: #fff; box-shadow: 0 0 0 3px rgba(109, 74, 255, .35), 0 0 18px 4px rgba(109, 74, 255, .55); }
@keyframes gsSpin { to { transform: rotate(360deg); } }

.gs-core { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 10px; width: 60%; text-align: center; transform: translate3d(-50%, -55%, 90px); }
.gs-core b { font-size: clamp(1rem, 2.6cqi, 1.35rem); font-weight: 760; letter-spacing: -.02em; color: #0f1b3d; }
.gs-core small { font-size: .82rem; color: #55607a; }

.gs-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(244, 240, 255, .82)) padding-box,
    linear-gradient(120deg, rgba(9, 92, 255, .55), rgba(255, 255, 255, .9), rgba(76, 59, 255, .45)) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 16px 30px -18px rgba(60, 40, 170, .55);
  font-size: clamp(.68rem, 1.7cqi, .82rem);
  font-weight: 650;
  color: #1b2547;
  white-space: nowrap;
  animation: gsChip 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.gs-chip i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #2f6bff, #a78bfa); box-shadow: 0 0 10px rgba(80, 100, 255, .7); }
.gs-chip-1 { left: 2%; top: 14%; --z: 110px; }
.gs-chip-2 { right: 0; top: 10%; --z: 60px; }
.gs-chip-3 { left: 0; bottom: 22%; --z: 130px; }
.gs-chip-4 { right: 6%; top: 46%; --z: 150px; }
.gs-chip-5 { left: 28%; bottom: 4%; --z: 90px; }
@keyframes gsChip { 0%, 100% { transform: translate3d(0, 0, var(--z)); } 50% { transform: translate3d(0, -9px, var(--z)); } }

/* ---------- GlassFlow ---------------------------------------------------- */

.glass-flow {
  --dur: 5s;
  --pad: 40px;
  --icon: 88px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 12px;
  padding: var(--pad) 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .9);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .8), transparent 55%),
    linear-gradient(135deg, rgba(9, 92, 255, .1), rgba(76, 59, 255, .06) 50%, rgba(147, 197, 253, .12));
  background-size: 100% 100%, 260% 260%;
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -44px rgba(60, 40, 170, .5);
  animation: giHue 12s ease-in-out infinite alternate;
}
.gf-rail { position: absolute; left: 0; right: 0; top: calc(var(--pad) + var(--icon) / 2); width: 100%; height: 10px; margin-top: -5px; overflow: visible; }
.gf-rail line { stroke: rgba(91, 108, 255, .3); stroke-width: 2; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.gf-pulse {
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(var(--pad) + var(--icon) / 2 - 2px);
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #6d4aff 40%, #fff 50%, #2f6bff 60%, transparent) no-repeat;
  background-size: 22% 100%;
  animation: gfMove var(--dur) linear infinite;
  filter: drop-shadow(0 0 6px rgba(109, 74, 255, .7));
}
@keyframes gfMove { from { background-position: -30% 0; } to { background-position: 130% 0; } }
.gf-node .glass-icon { --gs: var(--icon); }
.gf-node { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.gf-node b { margin-top: 8px; font-size: .9rem; color: #0f1b3d; }
.gf-node small { font-size: .76rem; line-height: 1.4; color: #55607a; }
.gf-node .glass-icon { animation: gfLit var(--dur) ease-in-out infinite; animation-delay: calc(var(--i) * var(--dur) / var(--n)); }
@keyframes gfLit {
  0%, 30%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  12% { transform: translate3d(0, -8px, 0) scale(1.08); }
}
.gf-node .gi-body { transition: box-shadow .4s; }

@container (max-width: 520px) {
  .gs-chip-4, .gs-chip-5 { display: none; }
}
@media (max-width: 720px) {
  .glass-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .gf-rail, .gf-pulse { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-icon, .gi-body, .gi-sweep::before, .gs-scene, .gs-pane, .glass-flow, .gs-pane-1::after, .gs-spin b, .gs-chip, .gf-pulse, .gf-node .glass-icon { animation: none !important; }
}

/* ---------- placements ---------------------------------------------------- */
.feature-canvas.is-glass {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: linear-gradient(160deg, #fbfcff, #eef2ff);
}
.feature-glass-copy { display: grid; gap: 10px; align-content: center; }
.feature-glass-copy > span { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #4c5cff; }
.feature-glass-copy h3 { font-size: 1.5rem; }
.feature-glass-copy p { color: #55607a; line-height: 1.6; }
.feature-glass-copy > div { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-glass-copy b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: .78rem; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(91, 108, 255, .16); }
.feature-glass-copy b i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #2f6bff, #a78bfa); }
.solution-live-stage.has-glass { width: 100%; background: transparent; border: 0; box-shadow: none; padding: 0; }
.workspace-preview:has(.glass-stage), .service-route-scene:has(.glass-stage) { background: linear-gradient(160deg, #fbfcff, #eef2ff); }
.workspace-preview .glass-stage, .service-route-scene .glass-stage { min-height: 260px; }
.home-ai-art:has(.glass-flow) { display: block; min-height: 0; }
.page-hero :is(.glass-icon.gi-xl) { --gs: clamp(150px, 18vw, 230px); }
@media (max-width: 860px) {
  .feature-canvas.is-glass { grid-template-columns: minmax(0, 1fr); }
}
:is(.workspace-preview, .service-route-scene, .feature-canvas, .solution-live-stage):has(.glass-stage) > .screen-scan { display: none; }
.workspace-preview .glass-stage, .service-route-scene .glass-stage { margin: 14px 0 6px; }
.gs-chip-1 { left: 4%; top: 16%; }
.gs-chip-2 { right: 3%; top: 12%; }
.gs-chip-3 { left: 3%; bottom: 22%; }
/* FeatureMark containers: glass icon fills whatever box the layout gives it */
.v3-feature-mark { display: inline-grid; place-items: center; }
.v3-feature-mark > .glass-icon { width: 100%; height: auto; aspect-ratio: 1; max-width: 64px; }


/* ==========================================================================
   Professional colour themes — one colour family for every icon.
   Default = brand blue glass. Alternatives: data-glass="navy" | "frost".
   ========================================================================== */
.glass-icon[class*="gi-tone-"] { --g1: #0b5cff; --g2: #2747e0; --g3: #4c6bff; --gc: #1e40d8; --gglyph: #fff; }
.gi-back { opacity: .45; }
.gi-sweep::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); }

/* B — navy glass + orange glyph (matches the logo / hero core) */
[data-glass="navy"] .glass-icon[class*="gi-tone-"] { --g1: #0e1a3d; --g2: #18275c; --g3: #24408f; --gc: #0e1a3d; --gglyph: #ff9a1f; }
[data-glass="navy"] .gi-body { border-color: rgba(120, 150, 255, .35); }
[data-glass="navy"] .gi-shine { opacity: .35; }

/* C — frosted white glass + brand-blue glyph */
[data-glass="frost"] .glass-icon[class*="gi-tone-"] { --g1: #ffffff; --g2: #eef3ff; --g3: #dfe8ff; --gc: #6f8fd8; --gglyph: #0b5cff; }
[data-glass="frost"] .gi-body { border-color: rgba(11, 92, 255, .22); }
[data-glass="frost"] .gi-back { background: linear-gradient(150deg, #c9d8ff, #9db6ff); opacity: .5; }
[data-glass="frost"] .gi-glyph { filter: drop-shadow(0 1px 0 #fff); }

/* ---------- Team Monitoring video walkthrough ----------------------------- */
.tm-video { display: grid; gap: 22px; margin-top: 56px; }
.tm-video header { display: grid; gap: 8px; max-width: 760px; }
.tm-video header h2 { margin: 0; }
.tm-video header p { margin: 0; color: #55607a; }
.tm-video-frame {
  position: relative;
  padding: 10px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(244, 247, 255, .92)) padding-box,
    linear-gradient(130deg, rgba(9, 92, 255, .4), rgba(255, 255, 255, .95) 45%, rgba(76, 59, 255, .35)) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 50px 100px -50px rgba(20, 40, 140, .5);
}
.tm-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #eef2fb; }


/* ---------- original EcomHutsy artwork inside GlassIcon slots ------------- */
.glass-icon.is-original { display: inline-grid; place-items: center; animation: none; }
.glass-icon.is-original > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(28, 58, 139, .18)); }
.glass-icon.is-original > .v3-feature-mark { width: 100%; height: 100%; }
.glass-icon.is-original > .v3-feature-mark svg { width: 100%; height: 100%; }
.gs-core .glass-icon.is-original > img { filter: drop-shadow(0 24px 30px rgba(28, 58, 139, .28)); }


/* ---------- .com: Team Monitoring launch offer --------------------------- */
.eh-offer { display: flex; justify-content: center; padding: 34px 16px 10px; }
.eh-offer__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(880px, 100%);
  padding: 20px 26px;
  border-radius: 26px;
  border: 1px solid transparent;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .85), transparent 55%) padding-box,
    linear-gradient(120deg, rgba(9, 92, 255, .1), rgba(76, 59, 255, .06) 50%, rgba(147, 197, 253, .12)) padding-box,
    linear-gradient(#fbfaff, #f6f8ff) padding-box,
    linear-gradient(120deg, rgba(9, 92, 255, .6), rgba(255, 255, 255, .9) 50%, rgba(76, 59, 255, .5)) border-box;
  background-size: 100% 100%, 260% 260%, 100% 100%, 260% 260%;
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -34px rgba(60, 40, 170, .55);
  animation: ehOfferHue 10s ease-in-out infinite alternate;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
}
.eh-offer__card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: ehOfferSweep 6s ease-in-out infinite;
}
.eh-offer__card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 36px 70px -34px rgba(60, 40, 170, .65); }
@keyframes ehOfferHue { 0% { background-position: 0 0, 0% 40%, 0 0, 0% 50%; } 100% { background-position: 0 0, 100% 60%, 0 0, 100% 50%; } }
@keyframes ehOfferSweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.eh-offer__copy { display: grid; gap: 3px; flex: 1; min-width: 0; text-align: left; }
.eh-offer__copy small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #0b5cff; }
.eh-offer__copy b { font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: #0f1b3d; letter-spacing: -.02em; }
.eh-offer__copy b em { font-style: normal; background: linear-gradient(90deg, #0b5cff, #4c3bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eh-offer__copy > span { font-size: .9rem; color: #55607a; }
.eh-offer__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #6d4aff, #2f6bff); box-shadow: 0 12px 26px -12px rgba(76, 59, 255, .8); }
.eh-offer__cta i { font-style: normal; transition: transform .3s; }
.eh-offer__card:hover .eh-offer__cta i { transform: translateX(4px); }

.eh-offer-pill {
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(245, 240, 255, .9)) padding-box,
    linear-gradient(120deg, rgba(9, 92, 255, .55), rgba(255, 255, 255, .9), rgba(76, 59, 255, .45)) border-box;
  box-shadow: 0 18px 40px -18px rgba(60, 40, 170, .6);
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.96);
  pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.eh-offer-pill.is-in { opacity: 1; transform: none; pointer-events: auto; }
.eh-offer-pill a { display: flex; align-items: center; gap: 10px; padding-right: 6px; text-decoration: none; font-size: 12.5px; color: #33405f; }
.eh-offer-pill a b { color: #0f1b3d; }
.eh-offer-pill button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(15, 27, 61, .06); color: #33405f; font-size: 16px; line-height: 1; cursor: pointer; }
.eh-offer-pill button:hover { background: rgba(15, 27, 61, .12); }

/* product hero glass stage on .com */
.prod-detail-hero-visual.has-glass { padding: 0; background: none; box-shadow: none; border: 0; }

@media (max-width: 720px) {
  .eh-offer__card { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .eh-offer__cta { width: 100%; justify-content: center; }
  .eh-offer-pill { left: 10px; right: 84px; bottom: 12px; }
  .eh-offer-pill a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .eh-offer__card, .eh-offer__card::after { animation: none; }
}


.ach-media__frame:has(.glass-stage) { background: none !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; aspect-ratio: auto !important; }
.ach-media__frame:has(.glass-stage)::before, .ach-media__frame:has(.glass-stage)::after { display: none !important; }
figure:has(> .glass-stage) { overflow: visible !important; border: 0 !important; box-shadow: none !important; background: none !important; }

/* ---------- .com: narrated product film (Team Monitoring page) ---------- */
.eh-film__head { margin-bottom: 22px; }
.eh-film__frame {
  padding: 10px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(244, 247, 255, .92)) padding-box,
    linear-gradient(130deg, rgba(9, 92, 255, .4), rgba(255, 255, 255, .95) 45%, rgba(76, 59, 255, .35)) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 50px 100px -50px rgba(20, 40, 140, .5);
}
.eh-film__frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #eef2fb; }