.domain-card {
  color: var(--ink);
  text-decoration: none;
  gap: 28px;
  transition: background-color 180ms ease, color 180ms ease;
}
.domain-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid currentColor;
  padding-top: 12px;
  font: 500 12px var(--font);
}
.domain-action span {
  font-size: 19px;
  transition: transform 180ms ease;
}
@media (hover: hover) {
  .domain-card:hover { background: #16382c; color: #f1f5ec; }
  .domain-card:hover p { color: #d2e1d5; }
  .domain-card:hover .domain-action span { transform: translateX(3px); }
}
.domain-card:focus-visible {
  background: #16382c;
  color: #f1f5ec;
  outline: 3px solid #6ab189;
  outline-offset: -4px;
}
.domain-card:focus-visible p { color: #d2e1d5; }
.domain-page { background: #edf2eb; }
.domain-bar, .domain-cover { background: #102720; color: #edf4ec; }
.domain-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(22px, 5vw, 88px);
  border-bottom: 1px solid #ffffff30;
}
.domain-bar .wordmark { width: 117px; }
.domain-page a { color: inherit; text-underline-offset: 4px; }
.domain-bar a, .domain-return a { font-size: 14px; }
.domain-width { width: min(90%, 1190px); margin-inline: auto; }
.domain-cover { padding: clamp(44px, 7vw, 96px) 0; }
.domain-cover .section-index { color: #b2dabe; }
.domain-cover h1 {
  margin: 22px 0;
  font-size: clamp(50px, 7vw, 102px);
  line-height: 1.03;
}
.domain-intro { max-width: 68ch; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; }
.domain-workflow {
  padding-block: clamp(40px, 6vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 7vw, 100px);
}
.domain-workflow h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 500; line-height: 1.08; margin: 16px 0; }
.domain-workflow p:not(.section-index) { color: #475b50; line-height: 1.65; }
.domain-workflow ol { list-style: decimal-leading-zero; margin: 0; padding-left: 2.2rem; }
.domain-workflow li { border-top: 1px solid #b3c3b6; padding: 18px 0 12px 8px; }
.domain-workflow li::marker { color: #337453; font: 12px var(--mono); }
.domain-workflow h3 { font-size: 21px; margin: 0; }
.domain-workflow li p { margin: 8px 0; }
.domain-return { border-top: 1px solid #b3c3b6; padding: 24px 0 38px; }
@media (max-width: 700px) {
  .domain-workflow { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .domain-card, .domain-action span { transition: none; }
}
