/* Hosting for law and accounting offices. Shared tokens and components live in landing.css. */

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

/* Hero: the office systems' access log. The motion writes the entries in one by one. */

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

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

.lp .w-log figcaption i { margin-inline-end: 6px; font-size: 1rem; vertical-align: 0.2em; color: var(--magenta); }

.lp .w-log-list li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
}

.lp .w-log-list time { font-size: 0.82rem; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.lp .w-log-list span { font-size: 0.82rem; color: var(--mute); }
.lp .w-log-list b { display: block; font-size: 0.92rem; color: var(--ink); }

.lp .w-log-list em {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.lp .w-log-list .is-ok em { background: #edf5e2; color: #2f5410; }
.lp .w-log-list .is-bad em { background: #fde8e8; color: #b42328; }
.lp .w-log-list .is-bad b { color: #b42328; }

.lp .w-log-foot { margin-top: 12px; font-size: 0.88rem; font-weight: 600; color: #2f5410; }

@media (max-width: 560px) {
  .lp .w-log { padding: 20px 16px calc(20px + var(--zz)); }
  .lp .w-log figcaption { font-size: 1.55rem; }
  .lp .w-log-list li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
}