.omsag-lp-pc {
  --b:    var(--omsag-lp-brand, #50aa3c);
  --bl:   var(--omsag-lp-lime, #a1d337);
  --bd:   var(--omsag-lp-brand-deep, #50aa3c);
  --bs:   var(--omsag-lp-brand-soft, rgba(80,170,60,.12));
  --ink:  var(--omsag-lp-ink, #232730);
  --ts:   var(--omsag-lp-text-soft, #5a6270);
  --mut:  var(--omsag-lp-muted, #8a93a3);
  --ln:   var(--omsag-lp-line, #e6e8ec);
  --bga:  var(--omsag-lp-bg-alt, #f9faf8);
  --bgc:  var(--omsag-lp-bg-cream, #f0f4ee);
  --pill: var(--omsag-lp-pill, 999px);
  --r:    var(--omsag-lp-radius, 20px);
  --rl:   var(--omsag-lp-radius-lg, 28px);
  --grad: var(--omsag-lp-brand-grad, linear-gradient(135deg,#50aa3c 0%,#a1d337 100%));
  --font: var(--omsag-lp-font, 'Outfit', system-ui, sans-serif);
  --bad:  #b6bcc8;
  --bad-strong: #e80000;
  background: #fff;
  font-family: var(--font);
  color: var(--ink);
  padding: 120px 0;
  overflow: hidden; /* keep drop-in animation contained */
}
.omsag-lp-pc,
.omsag-lp-pc *,
.omsag-lp-pc *::before,
.omsag-lp-pc *::after { box-sizing: border-box; }

.omsag-lp-pc__container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }

.omsag-lp-pc__head { max-width: 947px; margin-bottom: 56px; }
.omsag-lp-pc__eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--b); margin-bottom: 14px; }
.omsag-lp-pc__h2 { margin: 0; font-size: clamp(34px, 4.4vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: 0; }
.omsag-lp-pc__accent { color: var(--b); }


/* ============ COMPARE GRID ============ */
.omsag-lp-pc__compare {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  grid-template-areas:
    "bad arrow good"
    ".   .     conclusion";
  gap: 32px;
  align-items: stretch;
}
.omsag-lp-pc__side--bad  { grid-area: bad; }
.omsag-lp-pc__arrow      { grid-area: arrow; }
.omsag-lp-pc__side--good { grid-area: good; }
.omsag-lp-pc__conclusion { grid-area: conclusion; }

.omsag-lp-pc__side {
  position: relative;
  padding: 28px 28px 24px;
  border-radius: var(--rl);
  display: flex; flex-direction: column;
  min-height: 100%;
}
.omsag-lp-pc__side--bad {
  background: #f3f4f6;
  border: 1px solid #e2e4ea;
}
.omsag-lp-pc__side--good {
  background: linear-gradient(180deg, #fff 0%, #f3fbf0 100%);
  border: 1px solid rgba(80,170,60,.28);
  box-shadow: 0 24px 64px -32px rgba(80,170,60,.35);
}

.omsag-lp-pc__label {
  display: inline-block; align-self: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center;
  padding: 8px 16px; border-radius: var(--pill);
  margin-bottom: 24px;
}
.omsag-lp-pc__label--bad  { background: #e2e4ea; color: var(--mut); }
.omsag-lp-pc__label--good { background: var(--bs); color: var(--bd); }


/* ============ BAD ITEMS — gray, drift-in ============ */
.omsag-lp-pc__items--bad {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-content: center;
  flex: 1;
}
.omsag-lp-pc__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e2e4ea;
  border-radius: var(--pill);
  font-size: 14px; font-weight: 500;
  color: var(--mut);
  /* initial state (before scroll-into-view) */
  opacity: 0;
  transform: translateY(-30px) scale(.95);
  filter: grayscale(40%);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0ms);
}
.omsag-lp-pc__chip:nth-child(3n+1) { transform: translateY(-30px) translateX(-12px) rotate(-3deg) scale(.95); }
.omsag-lp-pc__chip:nth-child(3n+2) { transform: translateY(-30px) translateX(8px)  rotate(2deg)  scale(.95); }
.omsag-lp-pc__chip-icon {
  display: inline-flex; align-items: center;
  width: 18px; height: 18px;
  color: var(--bad-strong);
  flex-shrink: 0;
}
.omsag-lp-pc__chip-icon svg { width: 18px; height: 18px; }


/* ============ GOOD CARDS — process rail + bouncy drop ============ */
.omsag-lp-pc__items--good {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
  padding-left: 44px;
}
/* vertical process line */
.omsag-lp-pc__items--good::before {
  content: ""; position: absolute; left: 12px; top: 12px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, var(--b), var(--bl));
  border-radius: 2px;
}
/* down arrow at the bottom of the rail */
.omsag-lp-pc__items--good::after {
  content: ""; position: absolute; left: 7px; bottom: 8px;
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--b);
}
.omsag-lp-pc__card {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 18px;
  gap: 16px; align-items: center;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 14px;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 4px 18px -10px rgba(15,17,21,.10);
  /* initial state */
  opacity: 0;
  transform: translateY(-30px) scale(.96);
  transition: opacity .55s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--d, 0ms);
}
/* node dot on the rail */
.omsag-lp-pc__card::before {
  content: ""; position: absolute; left: -38px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--b);
  z-index: 1;
}
.omsag-lp-pc__card-icon {
  width: 30px; height: 30px;
  color: var(--b);
  display: inline-flex; align-items: center; justify-content: center;
}
.omsag-lp-pc__card-icon svg { width: 28px; height: 28px; }
.omsag-lp-pc__card-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.omsag-lp-pc__card-body strong { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.omsag-lp-pc__card-body span   { font-size: 13px; color: var(--ts); }
.omsag-lp-pc__card-chevron {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mut); opacity: .6;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.omsag-lp-pc__card-chevron svg { width: 18px; height: 18px; }
.omsag-lp-pc__card:hover { border-color: rgba(80,170,60,.45); }
.omsag-lp-pc__card:hover .omsag-lp-pc__card-chevron { color: var(--b); opacity: 1; transform: translateX(3px); }


/* ============ SIDE FOOTERS ============ */
.omsag-lp-pc__side-foot {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid currentColor;
  border-image: linear-gradient(to right, transparent, currentColor, transparent) 1;
  font-size: 14px; font-weight: 600;
  align-self: center;
}
.omsag-lp-pc__side-foot--bad  { color: var(--bad-strong); }
.omsag-lp-pc__side-foot--good { color: var(--bd); }
.omsag-lp-pc__side-foot-icon  { display: inline-flex; width: 22px; height: 22px; }
.omsag-lp-pc__side-foot-icon svg { width: 22px; height: 22px; }


/* ============ ARROW ============ */
.omsag-lp-pc__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 64px;
  color: var(--b);
  opacity: 0;
  transform: translateX(-12px) scale(.85);
  transition: opacity .6s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: 400ms;
}
.omsag-lp-pc__arrow svg { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px rgba(80,170,60,.30)); }


/* ============ CONCLUSION — clean & light ============ */
.omsag-lp-pc__conclusion {
  margin-top: 8px;
  padding: 30px 34px;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: var(--rl);
}
.omsag-lp-pc__conclusion-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bd);
  margin: 0 auto 22px;
}
.omsag-lp-pc__conclusion-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b);
}
.omsag-lp-pc__conclusion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.omsag-lp-pc__conclusion-item {
  display: block;
  padding: 4px 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--d, 0ms);
}
.omsag-lp-pc__conclusion-item:first-child { padding-left: 0; }
.omsag-lp-pc__conclusion-item:last-child  { padding-right: 0; }
.omsag-lp-pc__conclusion-item + .omsag-lp-pc__conclusion-item { border-left: 1px solid var(--ln); }
.omsag-lp-pc__conclusion-item > div { display: flex; flex-direction: column; line-height: 1.4; }
.omsag-lp-pc__conclusion-item strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.omsag-lp-pc__conclusion-item span { font-size: 13px; color: var(--ts); margin-top: 3px; }


/* ============ IS-VISIBLE STATE (triggered by JS via IntersectionObserver) ============ */
.omsag-lp-pc.is-visible .omsag-lp-pc__chip {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1) !important;
  filter: grayscale(0);
}
.omsag-lp-pc.is-visible .omsag-lp-pc__chip {
  /* re-apply default for those without nth-child rotation */
  filter: grayscale(0);
}
.omsag-lp-pc.is-visible .omsag-lp-pc__card {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.omsag-lp-pc.is-visible .omsag-lp-pc__arrow {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.omsag-lp-pc.is-visible .omsag-lp-pc__conclusion-item {
  opacity: 1;
  transform: translateY(0);
}


/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .omsag-lp-pc__compare {
    grid-template-columns: 1fr;
    grid-template-areas: "bad" "arrow" "good" "conclusion";
  }
  .omsag-lp-pc__arrow {
    width: 100%; height: 64px;
    transform: rotate(90deg);
  }
  .omsag-lp-pc.is-visible .omsag-lp-pc__arrow {
    transform: rotate(90deg) scale(1);
  }
}
@media (max-width: 760px) {
  .omsag-lp-pc { padding: 64px 0; }
  .omsag-lp-pc__container { padding: 0 20px; }
  .omsag-lp-pc__head { margin-bottom: 36px; }
  .omsag-lp-pc__h2   { font-size: 28px; }
  .omsag-lp-pc__compare { gap: 16px; }
  .omsag-lp-pc__side { padding: 22px 20px; }
  .omsag-lp-pc__chip { font-size: 13px; padding: 8px 14px; }
  .omsag-lp-pc__card-body strong { font-size: 14px; }
  .omsag-lp-pc__conclusion { margin-top: 8px; padding: 24px 22px; }
  .omsag-lp-pc__conclusion-grid { grid-template-columns: 1fr; gap: 18px; }
  .omsag-lp-pc__conclusion-item { padding: 0; }
  .omsag-lp-pc__conclusion-item + .omsag-lp-pc__conclusion-item { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-pc__chip,
  .omsag-lp-pc__card,
  .omsag-lp-pc__arrow,
  .omsag-lp-pc__conclusion-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}