.access-page {
  background: var(--surface);
  color: var(--ink);
}

.access-topbar {
  border-color: #3e4940;
}

.access-hero,
.access-story,
.access-interest,
.access-boundary {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.access-hero {
  min-height: 690px;
  padding-top: 96px;
  padding-bottom: 104px;
  background: var(--dark);
  color: white;
}

.access-hero h1 {
  max-width: 980px;
  font-size: clamp(43px, 5vw, 66px);
  line-height: 1.01;
}

.access-hero > p {
  max-width: 730px;
  margin: 28px 0 0;
  color: var(--dark-muted);
  font: 19px/1.65 var(--serif);
}

.access-hero > p + p {
  margin-top: 14px;
}

.hero-operation {
  max-width: 760px;
  margin-top: 54px;
  padding: 25px 0 27px 28px;
  border-top: 1px solid #4b594d;
  border-bottom: 1px solid #4b594d;
  border-left: 4px solid var(--orange);
}

.hero-operation span,
.hero-operation small {
  display: block;
}

.hero-operation span {
  margin-bottom: 13px;
  color: #9cad9e;
  font-size: 10px;
  font-weight: 700;
}

.hero-operation code {
  color: white;
  font: 700 clamp(20px, 3vw, 31px)/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.hero-operation small {
  margin-top: 13px;
  color: #f2b49f;
  font-size: 11px;
}

.access-hero .hero-actions {
  margin-top: 38px;
}

.access-story {
  background: var(--surface);
}

.story-section {
  max-width: 800px;
  padding-top: 103px;
  padding-bottom: 108px;
  border-bottom: 1px solid var(--line);
}

.story-section > p {
  max-width: 730px;
  margin: 25px 0 0;
  color: var(--muted);
  font: 18px/1.72 var(--serif);
}

.story-section > p + p {
  margin-top: 18px;
}

.story-section p code {
  color: var(--green);
  font-size: .8em;
  font-weight: 700;
}

.problem-costs {
  max-width: 730px;
  margin: 43px 0 39px;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.problem-costs li {
  position: relative;
  padding: 18px 0 19px 27px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 15px/1.55 var(--serif);
}

.problem-costs li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 1px;
  width: 7px;
  height: 7px;
  background: var(--orange);
}

.operation-answer {
  padding-top: 112px;
  padding-bottom: 116px;
}

.operation-statement {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 47px 0 42px;
}

.operation-statement i {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: var(--orange);
}

.operation-statement code {
  color: var(--green);
  font: 700 clamp(22px, 3vw, 35px)/1.3 var(--mono);
  overflow-wrap: anywhere;
}

.early-note {
  padding-top: 23px;
  border-top: 1px solid var(--line);
  font: 11px/1.55 var(--sans) !important;
}

.binding-story {
  max-width: 740px;
  margin: 48px 0 45px 5px;
  padding-left: 34px;
  border-left: 1px solid var(--line);
}

.binding-story > div {
  position: relative;
  padding: 2px 0 0;
}

.binding-story > div::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -39px;
  width: 9px;
  height: 9px;
  background: var(--green);
}

.binding-story > div:last-child::before {
  background: var(--orange);
}

.binding-story > span {
  display: block;
  height: 52px;
}

.binding-story figcaption {
  margin-bottom: 15px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.binding-story > div > code {
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}

.binding-story dl {
  max-width: 680px;
  margin: 0;
  border-top: 1px solid var(--line);
}

.binding-story dl div {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 23px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.binding-story dt,
.binding-story dd {
  margin: 0;
}

.binding-story dt {
  color: var(--ink);
  font: 700 10px/1.5 var(--mono);
}

.binding-story dd {
  color: var(--muted);
  font: 14px/1.5 var(--serif);
}

.product-line {
  margin-top: 40px !important;
  color: var(--green) !important;
  font-weight: 700 !important;
}

.plain-note {
  max-width: 740px;
  margin-top: 61px;
  padding: 29px 0 0 22px;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--orange);
}

.plain-note h3 {
  margin-bottom: 15px;
}

.plain-note p {
  margin: 0;
  color: var(--muted);
  font: 15px/1.7 var(--serif);
}

.plain-note p + p {
  margin-top: 15px;
}

.other-operations > p code {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.other-operations > p + p {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.runbook-distinction {
  padding-top: 91px;
  padding-bottom: 97px;
}

.operations-teams .team-capabilities {
  margin-top: 39px;
  padding: 21px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--green);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}

.access-interest {
  padding-top: 105px;
  padding-bottom: 112px;
  background: var(--green-soft);
  border-top: 1px solid var(--line);
}

.access-interest > div {
  max-width: 760px;
}

.access-interest > div > p {
  max-width: 680px;
  margin: 25px 0;
  color: var(--muted);
  font: 18px/1.64 var(--serif);
}

.access-interest > div > small {
  display: block;
  max-width: 560px;
  padding-left: 16px;
  border-left: 2px solid var(--orange);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.access-contact {
  margin-top: 48px;
}

.access-contact p {
  max-width: 560px;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.access-contact code {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.access-boundary {
  padding-top: 28px;
  padding-bottom: 30px;
  background: var(--surface);
  color: var(--muted);
  font: 11px/1.62 var(--sans);
}

.access-boundary strong {
  color: var(--ink);
}

.access-footer {
  background: var(--dark);
  color: white;
  border-color: #3e4940;
}

.access-footer p {
  color: var(--dark-muted);
}

@media (max-width: 760px) {
  .access-hero,
  .access-story,
  .access-interest,
  .access-boundary {
    padding-left: 20px;
    padding-right: 20px;
  }

  .access-topbar nav a:not(:last-child) {
    display: none;
  }

  .access-hero {
    min-height: 0;
    padding-top: 70px;
    padding-bottom: 79px;
  }

  .access-hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .access-hero > p,
  .story-section > p,
  .access-interest > div > p {
    font-size: 17px;
  }

  .access-hero .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .story-section {
    padding-top: 77px;
    padding-bottom: 82px;
  }

  .operation-statement {
    gap: 14px;
  }

  .operation-statement i {
    width: 10px;
    height: 10px;
  }

  .binding-story {
    padding-left: 27px;
  }

  .binding-story > div::before {
    left: -32px;
  }

  .binding-story dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .access-interest {
    padding-top: 78px;
    padding-bottom: 84px;
  }

}