/* Shared by the server-rendered pages outside the landing page (blog, contact). */
.site-page {
  --page-text: var(--default-color);
  --page-muted: #5c6b7a;
  --page-border: color-mix(in srgb, var(--accent-color), transparent 88%);
  background: #f3f9ff;
}

/* Header: same markup as the landing page; these add the pressed states. */
.navmenu a:active,
.header .header-action-link:active,
.mobile-nav-toggle:active,
.dropdown-item:active {
  opacity: 0.7;
}
.btn-getstarted:active {
  opacity: 0.75;
  transform: scale(0.98);
}
[dir="rtl"] .flip-rtl {
  display: inline-block;
  transform: scaleX(-1);
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 64px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-color), transparent 90%) 0,
    color-mix(in srgb, var(--accent-color), transparent 96%) 45%,
    #fff 100%
  );
  color: var(--page-text);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 70% at 85% 30%,
    color-mix(in srgb, var(--accent-color), transparent 85%) 0,
    transparent 70%
  );
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: linear-gradient(var(--accent-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-color) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--page-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.page-breadcrumb a {
  color: var(--accent-color);
}
.page-breadcrumb a:hover,
.page-breadcrumb a:focus-visible {
  color: color-mix(in srgb, var(--accent-color), #000 20%);
}
.page-breadcrumb a:active {
  opacity: 0.7;
}
/* A long article title is cut with an ellipsis instead of wrapping the breadcrumb. */
.page-breadcrumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  font-size: 0.85rem;
  font-weight: 500;
}
.page-hero-tag::before {
  content: "●";
  font-size: 0.6rem;
}
.page-hero h1 {
  max-width: 860px;
  margin-bottom: 16px;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}
.page-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--page-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}
.page-meta {
  display: flex;
  flex-wrap: wrap;
}
.page-meta span + span::before {
  content: "·";
  margin-inline: 10px;
}

.page-section {
  padding-block: 56px 88px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  justify-content: space-between;
}
.site-footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer-links li {
  margin-bottom: 6px;
}
.site-footer-links a:active {
  opacity: 0.7;
}
.site-footer-links p {
  margin-bottom: 6px;
}

@media (max-width: 575px) {
  .page-hero {
    padding: 120px 0 44px;
  }
  .page-section {
    padding-block: 32px 48px;
  }
}