body.guide-stage-active {
  max-width: none;
  padding: 76px clamp(18px, 5vw, 72px) 88px;
  color: var(--charcoal);
  background: var(--cream);
}

body.guide-stage-active #step-guide.active {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 0 0 24px;
  color: var(--charcoal);
}

#step-guide .guide-root { color: var(--charcoal); }
#step-guide .guide-eyebrow {
  margin: 0 0 14px;
  color: var(--red-press);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}
#step-guide .guide-title {
  max-width: 850px;
  margin: 0 0 16px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .99;
}
#step-guide .guide-intro {
  max-width: 760px;
  margin: 0;
  color: var(--charcoal-80);
  font-size: 1.06rem;
  line-height: 1.65;
}
#step-guide .guide-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 32px 0 24px;
  border: 1px solid var(--rule);
  background: var(--rule);
}
#step-guide .guide-fact {
  min-height: 104px;
  padding: 18px;
  background: var(--white);
}
#step-guide .guide-fact-label {
  display: block;
  margin-bottom: 8px;
  color: var(--charcoal-50);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#step-guide .guide-fact-value {
  margin: 0;
  color: var(--charcoal);
  font-size: .87rem;
  line-height: 1.45;
}
#step-guide .guide-video {
  margin: 0 0 44px;
  padding: 20px 24px;
  border-left: 3px solid var(--red);
  background: #fff;
}
#step-guide .guide-video-description { margin: 0 0 14px; color: var(--charcoal-80); }
#step-guide .guide-youtube-player {
  display: block;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #171717;
}
#step-guide .guide-video-player {
  display: block;
  width: 100%;
  max-width: 1040px;
  max-height: 74vh;
  margin-top: 10px;
  background: #171717;
  object-fit: contain;
}
#step-guide .guide-video-label {
  display: block;
  margin-bottom: 5px;
  color: var(--red-press);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#step-guide .guide-part { margin: 0 0 38px; }
#step-guide .guide-part-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
  margin: 0 0 8px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  font-weight: 300;
  line-height: 1.08;
}
#step-guide .guide-part-number {
  color: var(--red-press);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: right;
  white-space: nowrap;
}
#step-guide .guide-part-intro {
  margin: 0 0 15px;
  padding-left: 72px;
  color: var(--charcoal-80);
  font-size: .91rem;
}
#step-guide .guide-steps { border-top: 1px solid var(--rule); }
#step-guide .guide-step {
  border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,.62);
}
#step-guide .guide-step summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  padding: 15px 20px;
  color: var(--charcoal);
  cursor: pointer;
  list-style: none;
}
#step-guide .guide-step summary::-webkit-details-marker { display: none; }
#step-guide .guide-step summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin-left: auto;
  border-right: 2px solid var(--red-press);
  border-bottom: 2px solid var(--red-press);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .18s ease;
}
#step-guide .guide-step[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
#step-guide .guide-step summary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -3px;
}
#step-guide .guide-step-number {
  flex: 0 0 42px;
  color: var(--red-press);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-style: italic;
  white-space: nowrap;
}
#step-guide .guide-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 2.6vw, 1.45rem);
  line-height: 1.2;
}
#step-guide .guide-step-body {
  max-width: 760px;
  padding: 0 60px 23px 78px;
  color: var(--charcoal-80);
  font-size: .94rem;
  line-height: 1.65;
}
#step-guide .guide-step-body p { margin: 0 0 10px; color: inherit; }
#step-guide .guide-step-body ul {
  margin: 0 0 12px;
  padding-left: 21px;
}
#step-guide .guide-step-body li + li { margin-top: 5px; }
#step-guide .guide-step-note {
  padding: 12px 15px;
  border-left: 2px solid var(--red);
  background: var(--cream);
  color: var(--charcoal);
}
#step-guide .guide-image-intro { margin-top: 16px; color: var(--charcoal); }
#step-guide .guide-step-screenshot {
  max-width: 760px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--rule);
  background: var(--white);
}
#step-guide .guide-screenshot-image {
  display: block;
  width: 100%;
  height: auto;
}
#step-guide .guide-notes { margin: 46px 0; }
#step-guide .guide-section-heading {
  margin: 0 0 16px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
}
#step-guide .guide-note {
  margin: 0 0 12px;
  padding: 21px 24px;
  border: 1px solid var(--rule);
  background: var(--white);
}
#step-guide .guide-note h3 {
  margin: 0 0 8px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
}
#step-guide .guide-note p { margin: 0 0 9px; color: var(--charcoal-80); font-size: .91rem; line-height: 1.6; }
#step-guide .guide-note p:last-child { margin-bottom: 0; }
#step-guide .guide-done {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  margin: 48px 0 0;
  padding: clamp(22px, 4vw, 38px);
  border-left: 3px solid var(--red);
  background: var(--white);
}
#step-guide .guide-done h2 {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 300;
}
#step-guide .guide-done ul { margin: 0; padding-left: 22px; color: var(--charcoal-80); line-height: 1.7; }
#step-guide .guide-done li + li { margin-top: 7px; }
#step-guide .guide-bottom-line {
  margin: 40px 0 0;
  padding: 25px 0 0;
  border-top: 1px solid var(--rule);
}
#step-guide .guide-bottom-line p { margin: 0; color: var(--charcoal-80); line-height: 1.65; }
#step-guide .guide-bottom-line strong { color: var(--charcoal); }
#step-guide .guide-support { margin-top: 14px !important; font-size: .84rem; }

@media (max-width: 700px) {
  body.guide-stage-active { padding: 70px 18px 54px; }
  #step-guide .guide-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #step-guide .guide-fact { min-height: 94px; padding: 14px; }
  #step-guide .guide-video { padding: 17px; }
  #step-guide .guide-video-player { max-height: 54vh; }
  #step-guide .guide-part-heading {
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 12px;
  }
  #step-guide .guide-part-intro { padding-left: 58px; }
  #step-guide .guide-step summary { min-height: 66px; gap: 11px; padding: 13px 12px; }
  #step-guide .guide-step-number { flex-basis: 32px; }
  #step-guide .guide-step-body { padding: 0 18px 20px 55px; font-size: .9rem; }
  #step-guide .guide-note { padding: 18px; }
  #step-guide .guide-done { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #step-guide .guide-step summary::after { transition: none; }
}