/* Structural guides sit in the gutters and never change content geometry. */
:root { --grid-rule: #17191b15; --grid-outset: 16px; }
main { position: relative; }
main::before, main::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grid-rule);
  pointer-events: none;
}
main::before { left: calc(-1 * var(--grid-outset)); }
main::after { right: calc(-1 * var(--grid-outset)); }
.section-pad::before {
  left: calc(-1 * var(--grid-outset));
  right: calc(-1 * var(--grid-outset));
}
.analysis-context::after, .method-copy::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: var(--grid-rule);
}
.analysis-context::after { right: -20px; }
.method-copy { position: relative; }
.method-copy::after { right: -40px; }
.report-result + .report-result { border-left-color: var(--grid-rule); }
@media (max-width: 1100px) { .method-copy::after { right: -20px; } }
@media (max-width: 1100px) and (min-width: 761px) { .analysis-context::after { right: -16px; } }
@media (max-width: 760px) {
  :root { --grid-outset: 10px; }
  .analysis-context::after, .method-copy::after { display: none; }
}
@media (forced-colors: active) {
  main::before, main::after, .analysis-context::after, .method-copy::after { display: none; }
}

/* Close the frame through the sticky menu and the footer. */
.header::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gutter) - var(--grid-outset));
  border: 1px solid var(--grid-rule);
  border-bottom: 0;
  pointer-events: none;
}
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  inset: -1px calc(-1 * var(--grid-outset)) 0;
  border: 1px solid var(--grid-rule);
  pointer-events: none;
}
@media (forced-colors: active) {
  .header::before, .footer::before { display: none; }
}