#methodology {
  --sopa-ink: #152130;
  --sopa-muted: #51646b;
  --sopa-line: #d4dbd9;
  --sopa-accent: #3e705b;
  background: #f1f2ec;
  color: var(--sopa-ink);
  padding: 70px 0;
  scroll-margin-top: 76px;
}
.sopa-section h2 { margin: 16px 0 8px; }
.sopa-kicker,
.sopa-step .num,
.sopa-tag { font: 700 12px/1.5 ui-monospace, monospace; }
.sopa-kicker {
  margin: 0;
  letter-spacing: .1em;
  color: var(--sopa-accent);
  text-transform: uppercase;
}
.sopa-subtitle {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -.04em;
  margin: 0 0 16px;
}
.sopa-accent { color: var(--sopa-accent); }
.sopa-lede { font-size: 17px; max-width: 880px; }
.sopa-lede,
.sopa-detail p:not(.sopa-kicker),
.sopa-case p:not(.sopa-kicker) { color: var(--sopa-muted); line-height: 1.75; }
.sopa-layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 20px;
  margin-top: 32px;
}
.sopa-panel,
.sopa-case {
  background: #fbfcf8;
  border: 1px solid var(--sopa-line);
  border-radius: 9px;
  padding: 28px;
}
.sopa-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.sopa-step {
  background: #f1f2ed;
  color: var(--sopa-ink);
  border: 1px solid var(--sopa-line);
  text-align: left;
  padding: 16px;
  border-radius: 6px;
  min-height: 87px;
}
.sopa-step .num { display: block; color: var(--sopa-accent); margin-bottom: 8px; }
.sopa-step[aria-selected="true"], .sopa-step:hover {
  background: #e6efe8;
  border-color: var(--sopa-accent);
}
.sopa-step[aria-selected="true"] { box-shadow: inset 3px 0 var(--sopa-accent); }
.sopa-step:focus-visible, .sopa-detail:focus-visible { outline: 3px solid var(--sopa-accent); outline-offset: 2px; }
.sopa-detail { display: flex; flex-direction: column; justify-content: center; }
.sopa-detail h4 { font-size: clamp(27px, 3vw, 42px); letter-spacing: -.045em; line-height: 1.15; margin: 12px 0 0; }
.sopa-tag {
  align-self: flex-start;
  border: 1px solid #bbd1c7;
  background: #f1f5ef;
  color: #365b4c;
  padding: 9px 11px;
  border-radius: 4px;
  font-weight: 400;
}
.sopa-case { margin-top: 25px; }
.sopa-case h4 { font-size: clamp(24px, 3vw, 35px); letter-spacing: -.035em; line-height: 1.2; margin: 14px 0; }
.sopa-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 25px;
}
.sopa-flow-stage { display: grid; gap: 9px; }
.sopa-box {
  background: #f5f6f2;
  border: 1px solid var(--sopa-line);
  border-radius: 5px;
  padding: 16px;
}
.sopa-box strong, .sopa-capability strong { display: block; color: var(--sopa-ink); }
.sopa-box small { display: block; color: var(--sopa-muted); margin-top: 6px; font-size: 12px; }
.sopa-box.emphasis { background: #edf4ee; border-left: 3px solid #609985; }
.sopa-flow-arrow { font-size: 28px; color: var(--sopa-accent); text-align: center; }
.sopa-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.sopa-capability {
  border: 1px solid var(--sopa-line);
  background: #fbfcf8;
  border-radius: 5px;
  padding: 16px;
  font-size: 13px;
  color: var(--sopa-muted);
  line-height: 1.5;
}
.sopa-capability strong { margin-bottom: 7px; }
.sopa-note { font-size: 12px; margin-bottom: 0; }
@media (max-width: 780px) {
  .sopa-layout, .sopa-flow { grid-template-columns: minmax(0, 1fr); }
  .sopa-flow-arrow { transform: rotate(90deg); }
  .sopa-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  #methodology { padding: 52px 0; }
  .sopa-panel, .sopa-case { padding: 18px; }
  .sopa-step { padding: 12px; }
  .sopa-capabilities { grid-template-columns: minmax(0, 1fr); }
}

#review-framework {
  margin-top: 2rem;
  scroll-margin-top: 90px;
}
.review-framework__eyebrow,
.review-framework__number {
  font: 700 .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sopa-accent);
}
.review-framework__eyebrow { margin: 0 0 .7rem; }
.review-framework__heading {
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.035em;
  margin: 0 0 .75rem;
}
.review-framework__intro {
  max-width: 75ch;
  color: var(--sopa-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
.review-framework__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.review-framework__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fbfcf8;
  border: 1px solid var(--sopa-line);
  border-radius: 8px;
  padding: 21px 19px;
}
.review-framework__card h4 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 750;
  margin: 12px 0 10px;
}
.review-framework__card p { font-size: .91rem; line-height: 1.6; color: var(--sopa-muted); margin: 0; }
.review-framework__card .review-framework__question {
  color: var(--sopa-ink);
  font-weight: 650;
  margin-bottom: .65rem;
}
.review-framework__card .review-framework__output {
  margin-top: auto;
  padding-top: 1rem;
}
.review-framework__output strong {
  display: block;
  border-top: 1px solid var(--sopa-line);
  padding-top: .75rem;
  margin-bottom: .2rem;
  color: var(--sopa-ink);
}
.review-framework__basis {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sopa-line);
}
.review-framework__basis h4 { margin: 0; font-size: 1.2rem; }
.review-framework__basis p { max-width: 82ch; color: var(--sopa-muted); line-height: 1.7; margin: .65rem 0; }
.review-framework__basis ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; margin: .8rem 0 0; list-style: none; }
.review-framework__basis a { color: var(--sopa-accent); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 700px) {
  .review-framework__grid { grid-template-columns: 1fr; }
}

.sopa-practice {
  margin-top: 25px;
  scroll-margin-top: 90px;
}
.sopa-practice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.35fr);
  gap: 1rem 2.25rem;
  padding-top: 1.25rem;
}
.sopa-practice-row + .sopa-practice-row {
  border-top: 1px solid var(--sopa-line);
  margin-top: 1.5rem;
}
.sopa-practice-row h4 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.sopa-practice-row p {
  margin: 0;
  max-width: 76ch;
  color: var(--sopa-muted);
  line-height: 1.7;
}
.sopa-practice-row p + p { margin-top: .85rem; }
@media (max-width: 780px) {
  .sopa-practice-row { grid-template-columns: 1fr; gap: .65rem; }
}

/* Colour markers supplement the review-function labels. */
.review-framework__card h4 { display: flex; align-items: center; gap: 9px; }
.review-framework__dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; }
.review-framework__dot--blue { background: #3676bc; }
.review-framework__dot--red { background: #c64747; }
.review-framework__dot--purple { background: #8655a9; }
.review-framework__dot--gold { background: #b48826; }