.about-hero {
  position: relative;
  isolation: isolate;
  color: #f3fff7;
  background: var(--gradient);
}

.about-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 35px, #abefd421 35px 36px),
    repeating-linear-gradient(90deg, transparent 0 35px, #abefd421 35px 36px);
  mask-image: radial-gradient(ellipse at 76% 55%, #000, transparent 63%);
  pointer-events: none;
  content: "";
}

.about-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(28px, 7vw, 106px);
  padding-block: clamp(52px, 8vw, 116px);
}

.about-story h1 {
  margin-block: 16px 20px;
  font-size: clamp(2.65rem, 6.1vw, 5.35rem);
  text-wrap: balance;
}

.about-story h1 span { color: #b7f8ce; }
.about-opening { max-width: 50ch; color: #ebf8ef; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.about-origin { max-width: 51ch; margin-top: 14px; color: #cee6d9; }

.about-ledger {
  min-width: 0;
  border: 1px solid #c9f8df73;
  border-radius: 24px;
  padding: clamp(17px, 3vw, 31px);
  background: linear-gradient(145deg, #33755d, #20513f 30%, #143d2e 85%);
  box-shadow: 0 27px 72px #061a1277, inset 0 1px #ecfff265;
}

.about-ledger-head { display: flex; align-items: center; gap: 12px; }
.about-ledger-head div { display: grid; gap: 4px; }
.about-ledger-head strong { line-height: 1.2; letter-spacing: -.025em; }
.about-ledger-head div > span { color: #e0f4e7; font-size: .84rem; }

.about-ledger-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid #d4ffe36b;
  border-radius: 11px;
  color: #e4ffef;
  background: #c0f5d62b;
}

.about-ledger-mark::after {
  width: 17px;
  height: 17px;
  background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 6px);
  content: "";
}

.about-ledger-rows { margin-top: 20px; }
.about-ledger-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid #cdeed63b;
  padding-block: 11px;
  color: #e2f5e9;
}

.about-ledger-rows dd { font-weight: 720; font-variant-numeric: tabular-nums; }
.about-ledger-rows .about-ledger-total {
  margin-top: 7px;
  padding: 14px clamp(10px, 2vw, 17px);
  border: 1px solid #ddffeaa1;
  border-radius: 12px;
  color: #123424;
  background: linear-gradient(115deg, #d1ffdd, #90ecc3);
  font-weight: 710;
  line-height: 1.25;
}

.about-ledger-total dd { font-size: clamp(1.4rem, 3vw, 2.15rem); line-height: 1; letter-spacing: -.05em; }

.about-next { background: radial-gradient(ellipse at 80% 15%, #dcf2e3, transparent 67%), #f4faf5; }
.about-next-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; }
.about-next .deck { max-width: 55ch; }
.about-next-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.about-next-links .text-link { margin-top: 0; }

@media (max-width: 760px) {
  .about-hero-inner { grid-template-columns: minmax(0, 1fr); max-width: 610px; }
}

@media (max-width: 380px) {
  .about-ledger-rows > div { font-size: .89rem; }
}