.sc-lockpost-body .sc-page-hero {
  background-color: #0b0d0c;
  background-repeat: no-repeat;
  background-size: auto 145%;
  background-position: right 48%;
}
.sc-lockpost-body .sc-page-hero::before {
  background: linear-gradient(90deg, #080a09 0%, rgba(8, 10, 9, .96) 31%, rgba(8, 10, 9, .66) 56%, rgba(8, 10, 9, .08) 100%);
}
.sc-lockpost-body .sc-page-hero__statement { max-width: 740px; }
.sc-lockpost-body .sc-prose > figure.sc-reveal { display: none; }
.sc-lockpost__lead { font-size: 1.15rem; line-height: 1.7; color: #202321; }
.sc-lockpost__rule {
  margin: 2rem 0;
  padding: 17px 20px;
  border-left: 3px solid #caa12c;
  background: #f6f4ee;
}
.sc-lockpost__rule p { margin: 0; }
.sc-lockpost__end {
  margin-top: 2.6rem;
  padding: 26px 0;
  border-top: 1px solid #d1c9b8;
  border-bottom: 1px solid #d1c9b8;
}
.sc-lockpost__end p { margin: 0 0 16px; }
.sc-prose .sc-lockpost__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid #c9a227;
  border-radius: 4px;
  background: #ffce28;
  color: #171917;
  font: 700 .92rem/1.3 var(--font-d, system-ui, sans-serif);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.sc-prose .sc-lockpost__call:hover { background: #f4dd89; transform: translateY(-2px); }
.sc-prose .sc-lockpost__call:focus-visible { outline: 3px solid #167747; outline-offset: 3px; }
.sc-lockpost__sources {
  margin-top: 2rem;
  padding-top: 14px;
  border-top: 1px solid #e2ddd3;
  color: #555a55;
  font-size: .82rem;
  line-height: 1.55;
}
.sc-lockpost__sources p + p { margin-top: 8px; }

.sc-prose .sc-lockdiag {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 2.4rem 0;
  border: 1px solid #735a2a;
  border-radius: 8px;
  background: #111513;
  color: #f6f7f3;
  box-shadow: 0 20px 48px -30px rgba(0, 0, 0, .6);
  container-type: inline-size;
}
.sc-lockdiag::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #9b791e 0%, #f1cf63 48%, #2c9f67 100%);
  content: '';
}
.sc-lockdiag__intro { padding: 31px 34px 25px; border-bottom: 1px solid #3a413d; }
.sc-lockdiag__intro .sc-lockdiag__eyebrow {
  margin: 0 0 10px;
  color: #e7c66b;
  font: 700 .71rem/1.4 var(--font-d, system-ui, sans-serif);
  letter-spacing: .08em;
}
.sc-prose .sc-lockdiag__intro h2 {
  margin: 0;
  color: #fff;
  font: 700 1.7rem/1.2 var(--font-d, system-ui, sans-serif);
  letter-spacing: 0;
}
.sc-lockdiag__intro > p:last-child {
  max-width: 60ch;
  margin: 11px 0 0;
  color: #c9ceca;
  font-size: .94rem;
  line-height: 1.55;
}
.sc-lockdiag__panel { padding: 26px 34px 31px; }
.sc-lockdiag__meter { height: 3px; overflow: hidden; background: #444d46; }
.sc-lockdiag__meter span {
  display: block;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, #28b66d, #ecc860);
  transition: width .28s ease;
}
.sc-lockdiag__progress {
  min-height: 1.35em;
  margin: 14px 0 12px;
  color: #e7c66b;
  font: 700 .77rem/1.4 var(--font-d, system-ui, sans-serif);
}
.sc-prose .sc-lockdiag__screen h3 {
  margin: 0;
  color: #fff;
  font: 650 1.38rem/1.24 var(--font-d, system-ui, sans-serif);
  letter-spacing: 0;
}
.sc-lockdiag__screen h3:focus { outline: none; }
.sc-lockdiag__hint,
.sc-lockdiag__result { margin: 10px 0 0; color: #d3d9d3; font-size: .95rem; line-height: 1.62; }
.sc-lockdiag__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  margin-top: 22px;
}
.sc-lockdiag__choice {
  min-height: 58px;
  padding: 13px 16px;
  border: 1px solid #8b938a;
  border-radius: 5px;
  background: #f6f7f2;
  color: #171917;
  font: 650 .91rem/1.35 var(--font-d, system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sc-lockdiag__choice:hover { border-color: #f1cf63; background: #fff3d0; transform: translateY(-2px); }
.sc-lockdiag button:focus-visible,
.sc-lockdiag a:focus-visible { outline: 3px solid #35cc80; outline-offset: 3px; }
.sc-lockdiag__controls { display: flex; gap: 18px; margin-top: 21px; }
.sc-lockdiag__controls button {
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: #e7c66b;
  font: 650 .85rem/1.35 var(--font-d, system-ui, sans-serif);
  cursor: pointer;
}
.sc-lockdiag__controls button[hidden] { display: none; }
.sc-prose .sc-lockdiag__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 21px;
  padding: 10px 17px;
  border-radius: 4px;
  background: #ffce28;
  color: #171917;
  font: 700 .91rem/1.3 var(--font-d, system-ui, sans-serif);
  text-decoration: none;
}
.sc-lockdiag__screen .sc-lockdiag__note { margin-top: 17px; color: #aeb8af; font-size: .8rem; line-height: 1.5; }
@container (max-width: 480px) {
  .sc-lockdiag__choices { grid-template-columns: 1fr; }
  .sc-lockdiag__choice { min-height: 52px; }
}
@media (max-width: 700px) {
  .sc-lockpost-body .sc-page-hero {
    background-size: auto 81%;
    background-position: center top;
  }
  .sc-lockpost-body .sc-page-hero::before {
    background: linear-gradient(180deg, rgba(8, 10, 9, .08) 0%, rgba(8, 10, 9, .36) 32%, rgba(8, 10, 9, .95) 67%, #080a09 100%);
  }
  .sc-lockdiag__intro { padding: 24px 20px 20px; }
  .sc-lockdiag__panel { padding: 21px 20px 24px; }
  .sc-prose .sc-lockdiag__intro h2 { font-size: 1.42rem; }
  .sc-prose .sc-lockdiag__screen h3 { font-size: 1.18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-lockdiag *, .sc-lockdiag *::before, .sc-lockdiag *::after,
  .sc-prose .sc-lockpost__call { transition-duration: 0s !important; animation-duration: 0s !important; }
}
