.shell {
  width: min(var(--shell), calc(100% - 56px));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 104px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 44px;
}

.section-heading > p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted-text);
  font-size: 1.04rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(42px, 6vw, 82px);
  align-items: start;
}

.surface-muted {
  background: var(--surface-muted);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.page-hero,
.tool-hero,
.dashboard-hero,
.search-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 92px 0 86px;
  border-bottom: 1px solid rgba(194, 154, 82, .34);
  background:
    radial-gradient(circle at 82% 10%, rgba(217, 130, 18, .13), transparent 28%),
    linear-gradient(135deg, var(--ivory), var(--warm-white));
}

.page-hero::after,
.tool-hero::after,
.dashboard-hero::after,
.search-hero::after {
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -150px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(86, 38, 87, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(86, 38, 87, .03), 0 0 0 88px rgba(194, 154, 82, .035);
  content: "";
}

.page-hero p:last-child,
.tool-hero p,
.dashboard-hero p,
.search-hero p {
  max-width: 780px;
  color: var(--muted-text);
  font-size: 1.12rem;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  color: var(--muted-text);
  font-size: .76rem;
  font-weight: 700;
}

.breadcrumbs a {
  color: var(--plum);
}

.breadcrumbs a:hover {
  color: var(--saffron-700);
}

.not-found {
  padding: 120px 0;
}

.not-found .shell {
  max-width: 980px;
}

.not-found-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 44px 0;
}

.not-found-links a {
  position: relative;
  min-height: 150px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.not-found-links a::after {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: var(--antique-gold);
  content: "↗";
  font-size: 1.2rem;
}

.not-found-links strong,
.not-found-links span {
  display: block;
}

.not-found-links span {
  margin-top: 8px;
  color: var(--muted-text);
  font-size: .82rem;
}