/* Additional content presentation for final.html.
   Visual system stays with experimental.css. Do not load this on experimental.html. */

.x-page .foot-grid {
  grid-template-columns: 1.5fr 1fr 1fr;
}

.x-page footer .foot-mail {
  color: #fff;
  font-weight: 600;
}

.x-follow {
  max-width: 820px;
  margin: 28px auto 0;
}

.x-follow-card,
.x-page .quiet-card {
  background: #fff;
  border: 1px solid var(--vn-line);
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 20px 60px #12111a0c;
}

.x-page .quiet-card {
  background: #f7f6fb;
  margin-top: 18px;
}

.x-follow-card h3,
.x-page .quiet-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.x-follow-card > p,
.x-page .quiet-card > p {
  margin: 0;
  color: var(--vn-muted);
  line-height: 1.7;
}

.x-follow-card .mini-flow,
.x-follow-card .check-list,
.x-follow-card .no-list,
.x-page .quiet-card .no-list {
  text-align: left;
}

.x-page .x-min-grid {
  margin: 28px 0 0;
}

.x-page .x-min-grid .card h3,
.x-page .x-verify .card h3,
.x-page .x-who .card h3 {
  margin-top: 16px;
}

.x-provider-follow {
  margin-top: 36px;
  max-width: 760px;
}

.x-provider-follow .actions {
  margin-top: 22px;
}

.x-finale .x-finale-sub {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;
  max-width: 640px;
  margin: 0 auto 14px;
}

.x-finale p {
  max-width: 640px;
}

.x-page .x-who .warn {
  background: #f3eefb;
}

@media (max-width: 980px) {
  .x-page .foot-grid {
    grid-template-columns: 1fr;
  }

  .x-follow-card,
  .x-page .quiet-card {
    padding: 24px 16px;
    border-radius: 24px;
  }
}