@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   /de/ki-fuer-kmu, German ad landing page.

   Loaded only for pageView 'landing-kmu' (see layouts/main.php), so the rest
   of the site pays nothing for the animations below.

   Everything is namespaced .lkmu-*. The page otherwise reuses the site's own
   components: .h2-section, .h2-section-head, .h2-btn-primary, .h2-btn-ghost,
   .h2-faq-item, .mockup-window / .mockup-titlebar / .dot-*, and .reveal.

   ⚠ Tokens only, never a hardcoded brand colour: --accent, --cream, --black,
   --gray-*, --radius* all come from style.css :root.
   ⚠ Every looping animation is switched off under prefers-reduced-motion at the
   very bottom of this file. Add new keyframes ABOVE that block.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────────────────── */
.lkmu-hero {
  padding: 160px 32px 90px;
  background: var(--white);
  text-align: center;
}
.lkmu-hero-inner { max-width: 880px; margin: 0 auto; }

.lkmu-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}
.lkmu-h1 {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--black);
  margin: 0 0 24px;
}
.lkmu-sub {
  font-size: 18px; line-height: 1.62;
  color: var(--gray-600);
  max-width: 660px; margin: 0 auto 36px;
}

.lkmu-cta-row {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.lkmu-cta-center { margin-top: 32px; }
.lkmu-hero-note {
  font-size: 13px; color: var(--gray-400);
  margin: 18px 0 0;
}

.lkmu-trust {
  list-style: none; padding: 0;
  margin: 44px 0 0;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.lkmu-trust li {
  font-size: 12px; font-weight: 600; color: var(--gray-800);
  background: var(--accent-lighter);
  border: 1px solid var(--accent-light);
  border-radius: 100px;
  padding: 7px 14px;
}
.lkmu-trust li::before {
  content: "✓"; color: var(--accent);
  margin-right: 7px; font-weight: 700;
}

/* ── PROBLEM ────────────────────────────────────────────────────── */
.lkmu-prob-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 54px;
}
.lkmu-prob-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.lkmu-prob-num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--gray-400); margin-bottom: 16px;
}
.lkmu-prob-card h3 {
  font-size: 17px; font-weight: 700; color: var(--black);
  margin: 0 0 10px; letter-spacing: -0.01em;
}
.lkmu-prob-card p {
  font-size: 15px; line-height: 1.62; color: var(--gray-600); margin: 0;
}

/* ── MOCKUP ROWS ────────────────────────────────────────────────── */
.lkmu-mock-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px; align-items: center;
  margin-top: 76px;
}
.lkmu-mock-row:first-of-type { margin-top: 54px; }
/* Alternate the side the illustration sits on.
   ⚠ `order` moves items between the SAME tracks, so on a flipped row the
   illustration would land in the narrow 0.85fr column and come out ~180px
   smaller than on an unflipped one. Reverse the track sizes too, so the
   illustration always gets the wide track whichever side it sits on. */
.lkmu-mock-flip                   { grid-template-columns: 1.15fr 0.85fr; }
.lkmu-mock-flip .lkmu-mock-text   { order: 2; }
.lkmu-mock-flip .lkmu-mock-visual { order: 1; }

.lkmu-mock-step {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 14px;
}
.lkmu-mock-text h3 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--black); margin: 0 0 14px; line-height: 1.2;
}
.lkmu-mock-text p {
  font-size: 15px; line-height: 1.66; color: var(--gray-600); margin: 0;
}
.lkmu-mock-note {
  font-size: 11px; font-weight: 500; color: var(--gray-400);
  text-align: right; margin-top: 10px; letter-spacing: 0.02em;
}

/* Shared window shell. .mockup-window/.mockup-titlebar/.dot-* are from style.css. */
.lkmu-win { width: 100%; }
.lkmu-win-body {
  padding: 22px 20px;
  background: var(--white);
  font-size: 13px; color: var(--black);
}

/* ── 1. Sensitive Data Guard ────────────────────────────────────── */
.lkmu-guard-prompt {
  line-height: 2.1;
  font-size: 13.5px;
  color: var(--gray-800);
  padding-bottom: 18px;
}
.lkmu-guard-static { color: var(--gray-600); }

/* Two stacked spellings of the same value; the masked one fades in over the
   clear one, so the swap reads as "this is what leaves the building". */
.lkmu-swap {
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
}
.lkmu-swap > i {
  grid-area: 1 / 1;
  font-style: normal;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  animation: lkmu-swap-a 9s ease-in-out infinite;
}
.lkmu-swap .lkmu-swap-a {
  background: var(--problem-red-bg);
  color: var(--black);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.22);
}
.lkmu-swap .lkmu-swap-b {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--accent-medium);
  animation-name: lkmu-swap-b;
}
/* Stagger the four values so they mask one after another. */
.lkmu-swap-2 > i { animation-delay: 0.35s; }
.lkmu-swap-3 > i { animation-delay: 0.7s; }
.lkmu-swap-4 > i { animation-delay: 1.05s; }

@keyframes lkmu-swap-a {
  0%, 22%   { opacity: 1; }
  30%, 78%  { opacity: 0; }
  86%, 100% { opacity: 1; }
}
@keyframes lkmu-swap-b {
  0%, 22%   { opacity: 0; }
  30%, 78%  { opacity: 1; }
  86%, 100% { opacity: 0; }
}

.lkmu-guard-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--gray-100);
  padding-top: 16px;
}
.lkmu-guard-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--white); background: var(--accent);
  border-radius: 100px; padding: 6px 13px;
}
.lkmu-guard-arrow { color: var(--gray-400); font-size: 15px; }
.lkmu-guard-dest {
  font-size: 11px; font-weight: 600; color: var(--gray-600);
  border: 1px dashed var(--gray-200);
  border-radius: 100px; padding: 6px 13px;
}

/* ── 2. Antwort mit Quellen ─────────────────────────────────────── */
.lkmu-ask {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 13px; font-weight: 600; color: var(--black);
  margin-bottom: 16px;
}
.lkmu-answer { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.lkmu-line {
  display: block; height: 9px; border-radius: 5px;
  background: var(--gray-100);
  transform-origin: left center;
  animation: lkmu-grow 9s ease-out infinite;
}
.lkmu-line.short { width: 62%; }
.lkmu-l1 { width: 100%; }
.lkmu-l2 { width: 92%; animation-delay: 0.45s; }
.lkmu-l3 { width: 66%; animation-delay: 0.9s; }

@keyframes lkmu-grow {
  0%        { transform: scaleX(0); opacity: 0; }
  14%, 80%  { transform: scaleX(1); opacity: 1; }
  92%, 100% { transform: scaleX(1); opacity: 0; }
}

.lkmu-sources {
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  background: var(--cream);
}
.lkmu-sources-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 11px;
}
.lkmu-source {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  opacity: 0;
  animation: lkmu-fade-up 9s ease-out infinite;
}
.lkmu-source + .lkmu-source { border-top: 1px solid var(--gray-100); }
.lkmu-s1 { animation-delay: 1.4s; }
.lkmu-s2 { animation-delay: 1.7s; }
.lkmu-source-name {
  font-size: 12px; font-weight: 600; color: var(--gray-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lkmu-source-score {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 100px; padding: 3px 9px;
}

@keyframes lkmu-fade-up {
  0%, 8%    { opacity: 0; transform: translateY(6px); }
  18%, 80%  { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(0); }
}

/* ── 3. Rechnung → Buchungsvorschlag ────────────────────────────── */
.lkmu-inv {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 18px;
}
.lkmu-inv-doc {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.lkmu-inv-doc-t {
  font-size: 11px; font-weight: 700; color: var(--gray-600);
  margin-bottom: 4px;
}
.lkmu-inv-doc .lkmu-line { animation: none; background: var(--gray-200); height: 7px; }
.lkmu-inv-qr {
  margin-top: auto;
  width: 46px; height: 46px; border-radius: 4px;
  background-image:
    linear-gradient(var(--gray-800) 2px, transparent 2px),
    linear-gradient(90deg, var(--gray-800) 2px, transparent 2px);
  background-size: 8px 8px, 8px 8px;
  opacity: 0.55;
}

.lkmu-inv-fields { display: flex; flex-direction: column; gap: 7px; }
.lkmu-field {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 11px;
  background: var(--cream);
  border-radius: var(--radius-xs);
  opacity: 0;
  animation: lkmu-fade-up 9s ease-out infinite;
}
.lkmu-field span { font-size: 11px; color: var(--gray-400); font-weight: 600; }
.lkmu-field b {
  font-size: 12.5px; color: var(--black); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lkmu-f1 { animation-delay: 0.2s; }
.lkmu-f2 { animation-delay: 0.45s; }
.lkmu-f3 { animation-delay: 0.7s; }
.lkmu-f4 { animation-delay: 0.95s; }
.lkmu-f5 { animation-delay: 1.2s; }
.lkmu-f6 { animation-delay: 1.6s; }

/* The Total is the line the reader checks against the other two. */
.lkmu-field-total {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gray-200);
}
.lkmu-field-total span { color: var(--gray-600); }
.lkmu-field-total b { font-size: 13.5px; }

.lkmu-inv-post {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding: 11px;
  background: var(--accent-lighter);
  border: 1px solid var(--accent-light);
  border-radius: var(--radius-xs);
  opacity: 0;
  animation: lkmu-fade-up 9s ease-out infinite;
}
.lkmu-inv-post-l { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.lkmu-inv-post-v {
  font-size: 12.5px; font-weight: 700; color: var(--black);
  font-variant-numeric: tabular-nums;
}
/* Names the three accounts, so the numbers are not a riddle. */
.lkmu-inv-post-n {
  flex: 1 1 100%;
  font-size: 10.5px; font-weight: 600; color: var(--gray-400);
  order: 3;
}
.lkmu-inv-approve {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: var(--white);
  background: var(--accent);
  border-radius: 100px; padding: 5px 12px;
}

/* ── 4. QR-Rechnung + CAMT ──────────────────────────────────────── */
.lkmu-qr-bill {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.lkmu-qr-code {
  position: relative;
  flex: 0 0 auto;
  width: 78px; height: 78px;
  border-radius: 4px;
  background-image:
    linear-gradient(var(--black) 2px, transparent 2px),
    linear-gradient(90deg, var(--black) 2px, transparent 2px);
  background-size: 9px 9px, 9px 9px;
  opacity: 0.8;
}
/* The Swiss cross that marks a QR bill. */
.lkmu-qr-cross {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--black); color: var(--white);
  font-size: 15px; font-weight: 700; line-height: 1;
}
.lkmu-qr-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lkmu-qr-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lkmu-qr-meta span { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-400); }
.lkmu-qr-meta b {
  font-size: 12px; font-weight: 700; color: var(--black);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.lkmu-camt { padding-top: 15px; }
.lkmu-camt-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px;
}
.lkmu-camt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 600; color: var(--gray-800);
}
.lkmu-camt-match {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-light);
  border-radius: 100px; padding: 4px 11px;
  opacity: 0;
  animation: lkmu-stamp 9s ease-out infinite 1.9s;
}
@keyframes lkmu-stamp {
  0%, 16%   { opacity: 0; transform: scale(0.9); }
  24%, 80%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(1); }
}

/* ── 5. Audit-Kette ─────────────────────────────────────────────── */
.lkmu-chain { display: flex; flex-direction: column; gap: 0; }
.lkmu-block {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 13px;
  background: var(--cream);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
}
.lkmu-block b { font-size: 12.5px; font-weight: 700; color: var(--black); }
.lkmu-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--gray-400);
}
/* The link between two blocks: a short vertical rule. */
.lkmu-link {
  width: 2px; height: 14px; margin-left: 24px;
  background: var(--accent-medium);
}
/* The newest block seals itself onto the chain on each loop. */
.lkmu-block-new {
  border-color: var(--accent-light);
  background: var(--accent-lighter);
  opacity: 0;
  animation: lkmu-fade-up 9s ease-out infinite 2.4s;
}
.lkmu-link-new {
  transform-origin: top center;
  animation: lkmu-link-grow 9s ease-out infinite 2.2s;
}
@keyframes lkmu-link-grow {
  0%, 18%   { transform: scaleY(0); }
  26%, 80%  { transform: scaleY(1); }
  92%, 100% { transform: scaleY(0); }
}

/* ── DATENSCHUTZ, vier Stationen ────────────────────────────────── */
.lkmu-protect-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 54px;
}
.lkmu-protect-step {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 26px 22px;
  position: relative;
}
.lkmu-protect-num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 14px;
}
.lkmu-protect-step h3 {
  font-size: 15px; font-weight: 700; color: var(--black);
  margin: 0 0 9px; line-height: 1.3;
}
.lkmu-protect-step p {
  font-size: 13.5px; line-height: 1.6; color: var(--gray-600); margin: 0;
}

/* ── PREISE ─────────────────────────────────────────────────────── */
/* Two tariffs, so a pair rather than a row of three: same edges, same
   baselines, and the recurring parts sit in the same place on both cards. */
.lkmu-price-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 48px;
  max-width: 820px; margin-left: auto; margin-right: auto;
  align-items: start;
}
/* Anchor target has to clear the fixed nav. */
#preise { scroll-margin-top: 90px; }

.lkmu-price-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 28px 26px;
}
/* Only the recommended tariff is lifted, so the emphasis still means something. */
.lkmu-price-card-lead {
  border-color: var(--accent-medium);
  box-shadow: 0 10px 34px rgba(27, 67, 50, 0.07);
}
.lkmu-price-ribbon {
  position: absolute; top: -11px; left: 26px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--white);
  background: var(--accent);
  border-radius: 100px; padding: 4px 11px;
}
.lkmu-price-tag {
  display: inline-block; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-light);
  border-radius: 100px; padding: 4px 11px;
  margin-bottom: 14px;
}
.lkmu-price-name {
  font-size: 19px; font-weight: 800; letter-spacing: -0.015em;
  color: var(--black); margin-bottom: 7px;
}
.lkmu-price-desc {
  font-size: 13.5px; line-height: 1.55; color: var(--gray-600);
  margin: 0 0 20px;
}

.lkmu-price-amount {
  display: flex; align-items: baseline; gap: 7px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--gray-100);
}
.lkmu-price-cur { font-size: 15px; font-weight: 700; color: var(--gray-600); }
.lkmu-price-num {
  font-size: 44px; font-weight: 900; letter-spacing: -0.04em;
  line-height: 1; color: var(--black);
  font-variant-numeric: tabular-nums;
}
.lkmu-price-unit {
  font-size: 11px; font-weight: 600; line-height: 1.35;
  color: var(--gray-400);
}

.lkmu-price-feat {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.lkmu-price-feat li {
  position: relative;
  padding-left: 21px;
  font-size: 13.5px; line-height: 1.5; color: var(--gray-800);
}
.lkmu-price-feat li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; font-size: 12px;
}
.lkmu-price-feat-lead { font-weight: 700; color: var(--black); }

.lkmu-price-cta { text-align: center; margin-top: 34px; }

/* ── ABSCHLUSS ──────────────────────────────────────────────────── */
.lkmu-final {
  padding: 110px 32px 120px;
  background: var(--white);
  text-align: center;
}
.lkmu-final-inner { max-width: 680px; margin: 0 auto; }
.lkmu-final h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12; letter-spacing: -0.025em; font-weight: 900;
  color: var(--black); margin: 0 0 16px;
}
.lkmu-final p { font-size: 17px; line-height: 1.6; color: var(--gray-600); margin: 0; }

/* ── STICKY CTA, phone only ─────────────────────────────────────── */
.lkmu-sticky { display: none; }

/* The nav ships its own floating sticky CTA (#stickyCta / .sticky-cta) on every
   page, which becomes visible on scroll. This page has a full-width bar instead,
   and two stacked demo buttons on one phone screen is one too many, so the
   shared pill is suppressed HERE ONLY. Scoped through :has() so no shared file
   needs a page-specific body class. */
body:has(.lkmu-sticky) .sticky-cta { display: none !important; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lkmu-protect-grid { grid-template-columns: repeat(2, 1fr); }
  .lkmu-mock-row { grid-template-columns: 1fr; gap: 28px; }
  /* With one column the illustration always follows its text. */
  .lkmu-mock-flip .lkmu-mock-text   { order: 0; }
  .lkmu-mock-flip .lkmu-mock-visual { order: 0; }
}

@media (max-width: 768px) {
  .lkmu-hero { padding: 120px 22px 70px; }
  .lkmu-sub { font-size: 16px; }
  .lkmu-prob-grid,
  .lkmu-price-row { grid-template-columns: 1fr; }
  .lkmu-protect-grid { grid-template-columns: 1fr; }
  .lkmu-inv { grid-template-columns: 1fr; }
  .lkmu-mock-text h3 { font-size: 22px; }

  /* The two hero buttons go full width so neither is a thumb-sized target. */
  .lkmu-cta-row { flex-direction: column; align-items: stretch; }
  .lkmu-cta-row > * { width: 100%; text-align: center; }

  /* Sticky bar appears, and the page gets room so it cannot cover the footer. */
  .lkmu-sticky {
    display: block;
    position: fixed; inset: auto 0 0 0;
    z-index: 900;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(250, 250, 250, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--gray-100);
  }
  .lkmu-sticky-btn { width: 100%; }
  .lkmu-final { padding-bottom: 150px; }
}

@media (max-width: 420px) {
  .lkmu-guard-prompt { font-size: 12.5px; line-height: 2.2; }
  .lkmu-qr-bill { flex-direction: column; }
  .lkmu-block { flex-direction: column; gap: 3px; }
  .lkmu-mock-note { text-align: left; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────
   Everything above loops forever, which is exactly what someone who asked
   the OS for less motion does not want. Freeze every loop at its finished
   state so the illustrations still read correctly, just without movement.
   Keep this block LAST. */
@media (prefers-reduced-motion: reduce) {
  .lkmu-swap > i,
  .lkmu-line,
  .lkmu-source,
  .lkmu-field,
  .lkmu-inv-post,
  .lkmu-camt-match,
  .lkmu-block-new,
  .lkmu-link-new {
    animation: none !important;
  }
  /* Show the masked spelling, that is the point of the illustration. */
  .lkmu-swap .lkmu-swap-a { opacity: 0; }
  .lkmu-swap .lkmu-swap-b { opacity: 1; }
  .lkmu-line { transform: none; opacity: 1; }
  .lkmu-source,
  .lkmu-field,
  .lkmu-inv-post,
  .lkmu-camt-match,
  .lkmu-block-new { opacity: 1; transform: none; }
  .lkmu-link-new { transform: scaleY(1); }
}