/* Magento hosting. Shared tokens and components (comparison, plan sheet, effort columns) live in landing.css. */

.lp section[id] { scroll-margin-top: 80px; }

/* Hero: the stack, from the visitor (top) down to the database. Each layer is a shade from magenta to plum. */

.lp .w-stack-wrap { margin-top: 12px; }
.lp .w-stack { margin: 0; padding: 22px 22px calc(22px + var(--zz)); }

.lp .w-stack figcaption {
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--rule);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
}

.lp .w-stack-layers { margin-top: 14px; }

.lp .w-stack-layers li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--magenta) calc(100% - var(--i) * 16%), var(--plum));
  color: #fff;
}

.lp .w-stack-layers b { flex: none; font-size: 0.95rem; }
.lp .w-stack-layers span { flex: 1; min-width: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }

.lp .w-stack-layers i {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--good);
  font-size: 0.6rem;
  color: #fff;
}

.lp .w-stack-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed var(--rule);
  font-size: 0.88rem;
  font-weight: 600;
  color: #2f5410;
}

@media (max-width: 560px) {
  .lp .w-stack { padding: 18px 16px calc(20px + var(--zz)); }
  .lp .w-stack-layers li { gap: 10px; padding: 9px 12px; }
  .lp .w-stack-layers b { font-size: 0.88rem; }
  .lp .w-stack-layers span { font-size: 0.78rem; }
}