.safety-guide-page {
  --guide-navy: #092a58;
  --guide-cobalt: #356bf4;
  --guide-cobalt-dark: #1947b8;
  --guide-success: #15803d;
  --guide-yellow: #ffcc00;
  --guide-coral: #e76f51;
  --guide-blue: #3a86c8;
  --guide-paper: #fffdfa;
  --guide-cream: #fff8e8;
  --guide-line: #dce2df;
  --guide-muted: #51617a;
  --guide-max: 1180px;
  --journey-gutter: 64px;
  --guide-radius: 18px;
  color: var(--guide-navy);
  background: var(--guide-paper);
}

.safety-guide-page .guide-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
  max-width: var(--guide-max);
  min-height: 400px;
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 1px solid var(--guide-line);
  background: var(--guide-cream);
}

.safety-guide-page .hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(34px, 5vw, 72px) clamp(28px, 3vw, 44px);
  background: var(--guide-cream);
}

.safety-guide-page .guide-kicker,
.safety-guide-page .section-label {
  margin: 0;
  color: var(--guide-cobalt);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.safety-guide-page .hero-copy h1 {
  max-width: 100%;
  margin: 0;
  color: var(--guide-navy);
  font-size: clamp(46px, 6vw, 76px);
  line-height: .94;
  letter-spacing: -.04em;
}

.safety-guide-page .hero-summary {
  margin: 0;
  color: var(--guide-navy);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 750;
  line-height: 1.35;
}

.safety-guide-page .hero-actions {
  display: grid;
  gap: 10px;
  max-width: 280px;
}

.safety-guide-page .guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid var(--guide-navy);
  border-radius: 8px;
  padding: 11px 18px;
  color: var(--guide-navy);
  background: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.safety-guide-page .guide-button.primary {
  border-color: var(--guide-yellow);
  background: var(--guide-yellow);
}

.safety-guide-page .guide-button:hover,
.safety-guide-page .guide-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(9, 42, 88, .14);
}

.safety-guide-page .hero-illustration {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  object-position: 48% center;
}

.safety-guide-page .guide-journey {
  position: relative;
  max-width: calc(var(--guide-max) + var(--journey-gutter));
  margin: 0 auto;
  padding: 28px 20px 0 var(--journey-gutter);
}

.safety-guide-page .guide-journey::before {
  position: absolute;
  top: 56px;
  bottom: 40px;
  left: 30px;
  width: 0;
  border-left: 3px dashed rgba(0, 107, 89, .62);
  content: "";
}

.safety-guide-page .journey-section {
  position: relative;
  padding: 0 0 14px;
  scroll-margin-top: 100px;
}

.safety-guide-page .journey-number {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: calc(var(--journey-gutter) * -1 + 4px);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 4px solid var(--guide-paper);
  border-radius: 50%;
  color: #fff;
  background: var(--guide-cobalt);
  font-size: 20px;
  font-weight: 950;
}

.safety-guide-page .section-card {
  overflow: hidden;
  border: 1px solid var(--guide-line);
  border-radius: var(--guide-radius);
  background: #fff;
  box-shadow: 0 2px 10px rgba(9, 42, 88, .045);
}

.safety-guide-page .section-heading {
  display: grid;
  gap: 4px;
  padding: 20px 22px 14px;
}

.safety-guide-page .section-heading h2,
.safety-guide-page .local-call h2 {
  margin: 0;
  color: var(--guide-navy);
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.safety-guide-page .progress-heading,
.safety-guide-page .quiz-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}

.safety-guide-page .progress-copy {
  display: grid;
  gap: 7px;
  width: min(260px, 25vw);
  color: var(--guide-cobalt);
  font-size: 13px;
  text-align: right;
}

.safety-guide-page .progress-track {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceeeb;
}

.safety-guide-page .progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--guide-yellow);
  transition: width .25s ease;
}

.safety-guide-page .section-art {
  display: block;
  width: calc(100% - 44px);
  height: auto;
  max-height: 390px;
  margin: 0 22px 18px;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
}

.safety-guide-page .checklist-art { max-height: 190px; }
.safety-guide-page .helmet-art { max-height: 340px; }
.safety-guide-page .group-art { max-height: 360px; }
.safety-guide-page .roles-art { max-height: 390px; }
.safety-guide-page .signals-art { max-height: 310px; }

.safety-guide-page .crossing-art {
  width: 100%;
  max-height: 480px;
  margin-inline: 0;
  border-color: rgba(255, 255, 255, .3);
}

.safety-guide-page .checklist {
  margin: 0 22px;
  overflow: hidden;
  border: 1px solid var(--guide-line);
  border-radius: 12px;
}

.safety-guide-page .check-row {
  display: grid;
  grid-template-columns: 26px minmax(120px, .42fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 60px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--guide-line);
  cursor: pointer;
}

.safety-guide-page .check-row:last-child { border-bottom: 0; }
.safety-guide-page .check-row:has(input:checked) { background: #f0faf5; }

.safety-guide-page .check-row input {
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: var(--guide-cobalt);
}

.safety-guide-page .check-row strong { font-size: 16px; }

.safety-guide-page .check-row > span:last-child {
  color: var(--guide-muted);
  font-size: 14px;
}

.safety-guide-page .completion-note {
  margin: 12px 22px 18px;
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 750;
}

.safety-guide-page .completion-note.complete { color: var(--guide-success); }

.safety-guide-page .helmet-grid,
.safety-guide-page .signal-grid,
.safety-guide-page .role-grid {
  display: grid;
  gap: 18px;
  padding: 0 22px 22px;
}

.safety-guide-page .helmet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.safety-guide-page .helmet-step {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 100px;
  padding: 16px;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.safety-guide-page .helmet-step h3,
.safety-guide-page .helmet-step p { margin: 0; }
.safety-guide-page .helmet-step h3 { font-size: 16px; }
.safety-guide-page .helmet-step h3 span { color: var(--guide-cobalt); }

.safety-guide-page .helmet-step p {
  max-width: 190px;
  color: var(--guide-muted);
  font-size: 14px;
  line-height: 1.35;
}

.safety-guide-page .group-rules {
  display: grid;
  grid-template-columns: 1.35fr repeat(5, 1fr);
  gap: 1px;
  margin: 0 22px 22px;
  overflow: hidden;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  background: var(--guide-line);
}

.safety-guide-page .group-rules article {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-height: 110px;
  padding: 16px 10px;
  background: #fff;
  text-align: center;
}

.safety-guide-page .group-rules h3,
.safety-guide-page .group-rules p { margin: 0; }
.safety-guide-page .group-rules h3 { font-size: 15px; }

.safety-guide-page .group-rules p {
  color: var(--guide-muted);
  font-size: 12px;
  line-height: 1.35;
}

.safety-guide-page .group-rules .leader-rule {
  border: 2px solid #f3c45a;
  background: #fffaf0;
}

.safety-guide-page .leader-rule h3 { font-size: 19px; }
.safety-guide-page .leader-rule p { font-size: 13px; }
.safety-guide-page .role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.safety-guide-page .role {
  min-height: 130px;
  padding: 15px;
  border: 2px solid;
  border-radius: 13px;
}

.safety-guide-page .role h3,
.safety-guide-page .role p { margin: 0; }
.safety-guide-page .role h3 { font-size: 15px; }

.safety-guide-page .role h3 small {
  display: block;
  margin-top: 3px;
  color: var(--guide-muted);
  font-size: 12px;
}

.safety-guide-page .role p {
  margin-top: 7px;
  color: var(--guide-muted);
  font-size: 13px;
  line-height: 1.4;
}

.safety-guide-page .leader-role { border-color: #f4c239; background: #fffaf0; }
.safety-guide-page .sweeper-role { border-color: #f0a087; background: #fff7f4; }
.safety-guide-page .crossing-role { border-color: #9fc9e9; background: #f4faff; }
.safety-guide-page .adult-role { border-color: #b9ccff; background: #eaf0ff; }
.safety-guide-page .signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.safety-guide-page .signal-grid article {
  min-height: 88px;
  padding: 15px;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  background: linear-gradient(#fff, #f7faf7);
}

.safety-guide-page .signal-grid h3,
.safety-guide-page .signal-grid p { margin: 0; }
.safety-guide-page .signal-grid h3 { font-size: 16px; }
.safety-guide-page .signal-grid p { color: var(--guide-muted); font-size: 12px; }
.safety-guide-page .crossing-section { margin-inline: 0; }

.safety-guide-page .crossing-band {
  padding: 6px 22px 18px;
  color: #fff;
  background: var(--guide-cobalt-dark);
}

.safety-guide-page .section-heading.inverse { padding-inline: 0; }
.safety-guide-page .section-heading.inverse .section-label { color: var(--guide-yellow); }
.safety-guide-page .section-heading.inverse h2 { color: #fff; }

.safety-guide-page .crossing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.safety-guide-page .crossing-grid li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
}

.safety-guide-page .crossing-grid li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--guide-cobalt-dark);
  background: var(--guide-yellow);
  font-weight: 950;
}

.safety-guide-page .crossing-grid h3,
.safety-guide-page .crossing-grid p { margin: 0; }
.safety-guide-page .crossing-grid h3 { padding-top: 3px; font-size: 17px; }

.safety-guide-page .crossing-grid p {
  grid-column: 2;
  min-height: 66px;
  color: #eaf0ff;
  font-size: 13px;
  line-height: 1.4;
}

.safety-guide-page .crossing-mantra {
  margin: 14px 0 0;
  color: var(--guide-yellow);
  font-weight: 900;
  text-align: center;
}

.safety-guide-page .quiz-heading strong {
  align-self: center;
  color: var(--guide-cobalt);
  font-size: 13px;
}

.safety-guide-page #safety-quiz { padding: 0 22px 22px; }

.safety-guide-page .quiz-question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--guide-line);
}

.safety-guide-page .quiz-question legend { display: contents; }

.safety-guide-page .quiz-question legend button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  border: 0;
  padding: 8px 10px;
  color: var(--guide-navy);
  background: #fff;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.safety-guide-page .quiz-question legend button > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #f0f3f1;
}

.safety-guide-page .quiz-question legend button i {
  font-size: 22px;
  transition: transform .2s ease;
}

.safety-guide-page.js-enabled .quiz-question:not(.open) legend button i { transform: rotate(0); }
.safety-guide-page.js-enabled .quiz-question.open legend button i { transform: rotate(180deg); }

.safety-guide-page .quiz-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 10px 14px 49px;
}

.safety-guide-page.js-enabled .quiz-question:not(.open) .quiz-options { display: none; }

.safety-guide-page .quiz-options label {
  display: flex;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--guide-line);
  border-radius: 9px;
  padding: 10px;
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.safety-guide-page .quiz-options input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--guide-cobalt);
}

.safety-guide-page .quiz-question.correct { background: #f0faf5; }
.safety-guide-page .quiz-question.incorrect,
.safety-guide-page .quiz-question.needs-answer { background: #fff5f0; }
.safety-guide-page .quiz-submit { width: 100%; margin-top: 12px; }

.safety-guide-page .quiz-message {
  min-height: 24px;
  margin: 12px 0 0;
  font-weight: 800;
  text-align: center;
}

.safety-guide-page .quiz-message.success { color: var(--guide-success); }
.safety-guide-page .quiz-message.error { color: #a43e24; }

.safety-guide-page .local-call {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: 24px;
  max-width: var(--guide-max);
  margin: 18px auto 28px;
  padding: 24px;
  border: 2px solid var(--guide-yellow);
  border-radius: 18px;
  background: #fffdf7;
}

.safety-guide-page .local-call p {
  max-width: 750px;
  margin: 8px 0 0;
  color: var(--guide-muted);
  line-height: 1.5;
}

.safety-guide-page .local-call ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.safety-guide-page .local-call li {
  border: 1px solid var(--guide-line);
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--guide-muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.safety-guide-page .local-call-art {
  width: 100%;
  height: 240px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 980px) {
  .safety-guide-page .guide-hero { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); }
  .safety-guide-page .hero-copy { padding-left: 28px; }
  .safety-guide-page .group-rules { grid-template-columns: repeat(3, 1fr); }
  .safety-guide-page .role-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-guide-page .crossing-band { padding-inline: 24px; }
  .safety-guide-page .crossing-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-guide-page .local-call { margin-inline: 20px; }
}

@media (max-width: 760px) {
  .safety-guide-page .guide-hero { grid-template-columns: 1fr; }
  .safety-guide-page .hero-copy { padding: 28px 22px 22px; }
  .safety-guide-page .hero-copy h1 { font-size: 48px; }
  .safety-guide-page .hero-actions { grid-template-columns: 1fr 1fr; max-width: none; }

  .safety-guide-page .hero-illustration {
    min-height: 280px;
    max-height: 380px;
    object-position: 44% center;
  }

  .safety-guide-page .guide-journey { padding: 20px 12px 0 46px; }
  .safety-guide-page .guide-journey::before { left: 24px; }

  .safety-guide-page .journey-number {
    left: -42px;
    width: 36px;
    height: 36px;
    border-width: 3px;
    font-size: 16px;
  }

  .safety-guide-page .section-heading { padding: 18px 16px 12px; }
  .safety-guide-page .progress-heading,
  .safety-guide-page .quiz-heading { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .safety-guide-page .progress-copy { width: 100%; text-align: left; }
  .safety-guide-page .checklist { margin-inline: 16px; }
  .safety-guide-page .section-art { width: calc(100% - 32px); margin-inline: 16px; }
  .safety-guide-page .crossing-art { width: 100%; margin-inline: 0; }
  .safety-guide-page .check-row { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 9px 10px; }
  .safety-guide-page .check-row > span:last-child { grid-column: 2; margin-top: -7px; }
  .safety-guide-page .completion-note { margin-inline: 16px; }
  .safety-guide-page .helmet-grid,
  .safety-guide-page .signal-grid { grid-template-columns: repeat(2, 1fr); padding-inline: 16px; }
  .safety-guide-page .group-rules { grid-template-columns: repeat(2, 1fr); margin-inline: 16px; }
  .safety-guide-page .group-rules .leader-rule { grid-column: 1 / -1; }
  .safety-guide-page .role-grid { padding-inline: 16px; }
  .safety-guide-page .crossing-grid { grid-template-columns: 1fr; }
  .safety-guide-page .crossing-grid p { min-height: auto; }
  .safety-guide-page #safety-quiz { padding-inline: 16px; }
  .safety-guide-page .quiz-options { grid-template-columns: 1fr; padding-left: 10px; }
  .safety-guide-page .local-call { grid-template-columns: 1fr; margin-inline: 12px; }
  .safety-guide-page .local-call-art { height: 270px; }
  .safety-guide-page .local-call ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .safety-guide-page .hero-actions { grid-template-columns: 1fr; }
  .safety-guide-page .hero-illustration { min-height: 245px; }
  .safety-guide-page .helmet-grid,
  .safety-guide-page .role-grid,
  .safety-guide-page .signal-grid { grid-template-columns: 1fr; }
  .safety-guide-page .group-rules { grid-template-columns: 1fr; }
  .safety-guide-page .group-rules .leader-rule { grid-column: auto; }
  .safety-guide-page .crossing-band { padding-inline: 16px; }
  .safety-guide-page .local-call-art { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .safety-guide-page .guide-button,
  .safety-guide-page .progress-track span,
  .safety-guide-page .quiz-question legend button i { transition: none; }
}