.sc-keypost-body .sc-page-hero {
  background-image: url('broken-key-1600.webp');
  background-position: center 48%;
  background-size: cover;
}
.sc-keypost-body .sc-page-hero::before {
  background: linear-gradient(90deg, rgba(7, 8, 8, .92) 0%, rgba(7, 8, 8, .76) 38%, rgba(7, 8, 8, .28) 78%, rgba(7, 8, 8, .25));
}
.sc-keypost-body .sc-page-hero__statement { max-width: 690px; }
.sc-keypost-body .sc-prose > figure.sc-reveal { display: none; }
.sc-keypost__lead { font-size: 1.15rem; line-height: 1.7; color: #202321; }
.sc-keypost__lead strong { color: #111411; }
.sc-keypost > p + p { margin-top: 1em; }
.sc-keypost > h2 + p { margin-top: .8em; }
.sc-keypost > h3 + p { margin-top: .6em; }
.sc-keypost__rule {
  margin: 2rem 0;
  padding: 16px 20px;
  border-left: 3px solid #c9a227;
  background: #f6f4ee;
}
.sc-keypost__rule p { margin: 0; }
.sc-keypost__end {
  margin-top: 2.6rem;
  padding: 26px 0;
  border-top: 1px solid #d1c9b8;
  border-bottom: 1px solid #d1c9b8;
}
.sc-keypost__end p { margin: 0 0 16px; }
.sc-prose .sc-keypost__call {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid #c9a227;
  border-radius: 4px;
  color: #171917;
  font: 700 .92rem/1.3 var(--font-d, system-ui, sans-serif);
  text-decoration: none;
  background: linear-gradient(120deg, #ffcf28, #e6b72a, #ffcf28);
  background-size: 200% 100%;
  animation: sc-keypost-gold 9s linear infinite;
}
.sc-keypost__call:focus-visible { outline: 3px solid #177d4d; outline-offset: 3px; }
.sc-keypost__sources {
  margin-top: 2rem;
  padding-top: 14px;
  border-top: 1px solid #e2ddd3;
  font-size: .82rem;
  line-height: 1.55;
  color: #555a55;
}
.sc-keypost__sources p + p { margin-top: 8px; }
@keyframes sc-keypost-gold { to { background-position: -200% 0; } }
@media (max-width: 700px) {
  .sc-keypost-body .sc-page-hero {
    background-image: url('broken-key-960.webp');
    background-size: auto 155%;
    background-position: 52% bottom;
  }
  .sc-keypost-body .sc-page-hero::before {
    background: linear-gradient(180deg, rgba(7, 8, 8, .08) 0%, rgba(7, 8, 8, .47) 32%, rgba(7, 8, 8, .94) 68%, #070808 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sc-prose .sc-keypost__call { animation: none; }
}
.sc-prose .sc-keydiag {
  --kd-gold: #e7c66b;
  --kd-green: #31c979;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 2.4rem 0;
  border: 1px solid #5d4a21;
  border-radius: 8px;
  background: #121413;
  color: #f8f8f5;
  box-shadow: 0 22px 55px -28px rgba(0, 0, 0, .55);
  container-type: inline-size;
}
.sc-keydiag::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #916b18, #f3ce4f 50%, #916b18);
}
.sc-keydiag__header {
  padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 38px) 23px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.sc-keydiag__header .sc-keydiag__eyebrow {
  margin: 0 0 12px;
  color: var(--kd-gold);
  font: 700 .69rem/1.4 var(--font-d, system-ui, sans-serif);
  letter-spacing: .11em;
}
.sc-prose .sc-keydiag__header h2 {
  margin: 0;
  color: #fff;
  font: 700 clamp(1.42rem, 1.15rem + 1vw, 1.85rem)/1.18 var(--font-d, system-ui, sans-serif);
  letter-spacing: 0;
}
.sc-keydiag__header > p:last-child {
  max-width: 55ch;
  margin: 12px 0 0;
  color: #c8ccc8;
  font-size: .94rem;
  line-height: 1.55;
}
.sc-keydiag__body {
  padding: 26px clamp(20px, 4vw, 38px) clamp(24px, 4vw, 34px);
}
.sc-keydiag__progress {
  height: 3px;
  overflow: hidden;
  background: #343934;
}
.sc-keydiag__progress span {
  display: block;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, var(--kd-green), var(--kd-gold));
  transition: width .35s ease;
}
.sc-keydiag__step {
  min-height: 1.5em;
  margin: 15px 0 12px;
  color: var(--kd-gold);
  font: 700 .75rem/1.4 var(--font-d, system-ui, sans-serif);
}
.sc-prose .sc-keydiag__screen h3 {
  margin: 0;
  color: #fff;
  font: 650 clamp(1.16rem, 1rem + .6vw, 1.43rem)/1.24 var(--font-d, system-ui, sans-serif);
  letter-spacing: 0;
}
.sc-keydiag__screen h3:focus { outline: none; }
.sc-keydiag__help,
.sc-keydiag__screen > p {
  margin: 10px 0 0;
  color: #c8ccc8;
  font-size: .93rem;
  line-height: 1.62;
}
.sc-keydiag__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  margin-top: 22px;
}
.sc-keydiag__choice {
  min-height: 62px;
  padding: 13px 17px;
  border: 1px solid #6b6f6a;
  border-radius: 5px;
  background: #f5f5f0;
  color: #151715;
  font: 650 .92rem/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-keydiag__choice:hover { background: #fff4d0; border-color: var(--kd-gold); transform: translateY(-2px); }
.sc-keydiag button:focus-visible,
.sc-keydiag a:focus-visible { outline: 3px solid var(--kd-green); outline-offset: 3px; }
.sc-keydiag__controls { display: flex; gap: 12px; margin-top: 22px; }
.sc-keydiag__controls button {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--kd-gold);
  font: 650 .84rem/1.35 var(--font-d, system-ui, sans-serif);
  cursor: pointer;
}
.sc-keydiag__controls button[hidden] { display: none; }
.sc-prose .sc-keydiag__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 22px;
  padding: 10px 18px;
  border-radius: 4px;
  background: #ffcc17;
  color: #131313;
  font: 700 .9rem/1.3 var(--font-d, system-ui, sans-serif);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.sc-keydiag__action:hover { background: #f4d660; transform: translateY(-2px); }
.sc-keydiag__screen .sc-keydiag__note { color: #aeb6af; font-size: .78rem; }
@container (max-width: 480px) {
  .sc-keydiag__choices { grid-template-columns: 1fr; }
  .sc-keydiag__choice { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-keydiag *, .sc-keydiag *::before, .sc-keydiag *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
