/* Shared visual system for the four public reading-stage pages. */
body.rpa-stage-page {
  --stage: #679436;
  --stage-soft: #f1f6eb;
  --stage-softer: #f8fbf4;
  --stage-ink: #4f7728;
  --stage-line: rgba(103, 148, 54, 0.35);
  --stage-button-text: #ffffff;
  background: #ffffff;
  color: #2a3d1c;
  font-family: "Nunito", system-ui, sans-serif;
}

body.rpa-stage-page.stage-beginning {
  --stage: #e8b262;
  --stage-soft: #fff4df;
  --stage-softer: #fffaf0;
  --stage-ink: #986812;
  --stage-line: rgba(232, 178, 98, 0.46);
  --stage-button-text: #064789;
}

body.rpa-stage-page.stage-readtolearn {
  --stage: #064789;
  --stage-soft: #edf4fb;
  --stage-softer: #f7faff;
  --stage-ink: #064789;
  --stage-line: rgba(6, 71, 137, 0.3);
}

body.rpa-stage-page.stage-advanced {
  --stage: #d87c74;
  --stage-soft: #fdf0ee;
  --stage-softer: #fff8f7;
  --stage-ink: #b9544d;
  --stage-line: rgba(216, 124, 116, 0.4);
}

.rpa-stage-page .stage-switcher-shell {
  width: 100%;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(6, 71, 137, 0.08);
  background: #ffffff;
}

.rpa-stage-page .stage-switcher {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rpa-stage-page .stage-switcher a {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid rgba(6, 71, 137, 0.1);
  border-radius: 16px 13px 17px 14px;
  background: #ffffff;
  color: #587054;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.rpa-stage-page .stage-switcher a:hover {
  transform: translateY(-1px);
  border-color: var(--stage-line);
}

.rpa-stage-page .stage-switcher a[aria-current="page"] {
  border-color: var(--stage);
  background: var(--stage-soft);
  color: var(--navy, #064789);
}

.rpa-stage-page .stage-switcher-number {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 10px 8px 11px 9px;
  font-family: "Fredoka One", "Nunito", sans-serif;
  font-size: 0.88rem;
}

.rpa-stage-page .stage-switcher a:nth-child(1) .stage-switcher-number { color: #679436; }
.rpa-stage-page .stage-switcher a:nth-child(2) .stage-switcher-number { color: #b77d24; }
.rpa-stage-page .stage-switcher a:nth-child(3) .stage-switcher-number { color: #064789; }
.rpa-stage-page .stage-switcher a:nth-child(4) .stage-switcher-number { color: #c76159; }

.rpa-stage-page .page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 72px;
}

.rpa-stage-page .stage-side-tab { display: none !important; }

.rpa-stage-page .hero {
  position: relative;
  min-height: 370px;
  margin: 0;
  padding: clamp(34px, 6vw, 70px);
  border: 1.5px solid rgba(42, 61, 28, 0.2);
  border-top: 8px solid var(--stage);
  border-radius: 34px 28px 38px 30px;
  background-color: #ffffff;
  background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 65%, rgba(255,255,255,.84) 78%, rgba(255,255,255,.55) 100%), url('/images/rpa-home-book-plant-accent-v2.webp');
  background-repeat: no-repeat;
  background-position: center, right -34px bottom -30px;
  background-size: auto, clamp(220px, 28vw, 350px) auto;
  box-shadow: 7px 9px 0 rgba(6, 71, 137, 0.06);
  overflow: hidden;
}

.rpa-stage-page .hero::after { display: none !important; }

.rpa-stage-page .hero > * { position: relative; z-index: 1; }

.rpa-stage-page.stage-prereader .hero { background-image: none; }

.rpa-stage-page .hero > div:first-child,
.rpa-stage-page .hero-lead,
.rpa-stage-page .hero-copy,
.rpa-stage-page .land-title {
  max-width: 760px;
}

.rpa-stage-page .stage-label {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 7px 12px;
  border: 1.5px solid var(--stage-line);
  border-radius: 999px;
  background: var(--stage-soft);
  color: var(--stage-ink);
  font-family: "Nunito", sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rpa-stage-page .eyebrow,
.rpa-stage-page .handwritten {
  color: var(--stage-ink);
  font-family: "Caveat", cursive;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
}

.rpa-stage-page h1,
.rpa-stage-page h2,
.rpa-stage-page h3 {
  color: #064789;
  font-family: "Fredoka One", "Nunito", sans-serif;
}

.rpa-stage-page h1,
.rpa-stage-page .land-title {
  margin: 10px 0 16px;
  font-size: clamp(3.1rem, 7.2vw, 6.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.rpa-stage-page .color-stage { color: var(--stage) !important; }

.rpa-stage-page .hero-copy,
.rpa-stage-page .hero-lead {
  color: rgba(42, 61, 28, 0.74);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.68;
}

.rpa-stage-page .hero-note {
  max-width: 350px;
  padding: 28px;
  border: 1.5px solid var(--stage-line);
  border-radius: 24px 20px 26px 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 5px 6px 0 var(--stage-soft);
}

.rpa-stage-page .hero-note::before {
  background: color-mix(in srgb, var(--stage) 32%, transparent);
}

.rpa-stage-page .primary-btn,
.rpa-stage-page .hero .btn.primary,
.rpa-stage-page .lib-strip .btn.primary {
  border-color: var(--stage) !important;
  background: var(--stage) !important;
  color: var(--stage-button-text) !important;
  box-shadow: 0 10px 22px rgba(42, 61, 28, 0.12);
}

.rpa-stage-page .section,
.rpa-stage-page .signs-section,
.rpa-stage-page .trail-section,
.rpa-stage-page .final-card,
.rpa-stage-page .check-card,
.rpa-stage-page .guide-feature {
  margin-top: 30px;
  padding: clamp(26px, 4.5vw, 44px);
  border: 1.5px solid rgba(42, 61, 28, 0.16);
  border-radius: 30px 25px 32px 27px;
  background: #ffffff;
  box-shadow: 5px 7px 0 rgba(6, 71, 137, 0.045);
}

.rpa-stage-page .stage-signs,
.rpa-stage-page .stage-tools { background: #fdf8f0; }
.rpa-stage-page .stage-path,
.rpa-stage-page .stage-resources { background: #ffffff; }
.rpa-stage-page .stage-library { background: var(--stage-soft); }
.rpa-stage-page .stage-library {
  width: 100%;
  text-align: left;
}
.rpa-stage-page .stage-library h2 { color: #064789; }
.rpa-stage-page .stage-library p { color: rgba(42, 61, 28, 0.74); }
.rpa-stage-page .stage-library .guide-line { color: var(--stage-ink); }

.rpa-stage-page .section-heading,
.rpa-stage-page .section-head {
  margin-bottom: 26px;
  text-align: left;
}

.rpa-stage-page .section-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--stage-ink);
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
}

.rpa-stage-page .sign-card,
.rpa-stage-page .module-card,
.rpa-stage-page .tool-card,
.rpa-stage-page .resource-card,
.rpa-stage-page .stop,
.rpa-stage-page .substage-card,
.rpa-stage-page .board-card,
.rpa-stage-page .infographic-card {
  border: 1.5px solid var(--stage-line);
  border-radius: 22px 18px 24px 20px;
  background: #ffffff;
  box-shadow: 3px 4px 0 var(--stage-soft);
}

.rpa-stage-page .sign-card:hover,
.rpa-stage-page .tool-card:hover,
.rpa-stage-page .resource-card:hover {
  border-color: var(--stage);
  background: var(--stage-softer);
}

.rpa-stage-page .module-num,
.rpa-stage-page .stop-number {
  background: var(--stage);
  color: var(--stage-button-text) !important;
}

.rpa-stage-page .lib-strip {
  border: 1.5px solid var(--stage-line);
  border-radius: 25px 21px 27px 23px;
  background: var(--stage-soft);
  color: #2a3d1c !important;
  box-shadow: none;
}

.rpa-stage-page .lib-strip-t { color: #064789 !important; }
.rpa-stage-page .lib-strip-s { color: rgba(42, 61, 28, 0.72) !important; }

.rpa-stage-page .cta-band,
.rpa-stage-page .check-card {
  border: 0;
  background: #064789;
  color: #ffffff;
  text-align: center;
  box-shadow: 7px 9px 0 rgba(6, 71, 137, 0.1);
}

.rpa-stage-page .cta-band h2,
.rpa-stage-page .check-card h2 { color: #ffffff; }

.rpa-stage-page .check-card .handwritten { color: #e8b262; }
.rpa-stage-page .check-card p { color: rgba(255,255,255,.78); }
.rpa-stage-page .cta-band .btn,
.rpa-stage-page .check-card .primary-btn {
  border-color: #679436 !important;
  background: #679436 !important;
  color: #ffffff !important;
}

.rpa-stage-page .site-footer {
  margin-top: 0;
  padding: 3.5rem 1.5rem 1.5rem;
  background: #064789;
  color: rgba(255,255,255,.75);
}

.rpa-stage-page .footer-container {
  width: min(1100px, 100%);
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2rem;
}

.rpa-stage-page .footer-logo {
  display: block;
  margin-bottom: .75rem;
  color: #ffffff;
  font-family: "Fredoka One", sans-serif;
}

.rpa-stage-page .footer-logo .w-r { color: #7fb3d3; }
.rpa-stage-page .footer-logo .w-p { color: #9dc46a; }
.rpa-stage-page .footer-logo .w-a { color: #e8b262; }
.rpa-stage-page .footer-col h4 { color: #ffffff; }
.rpa-stage-page .footer-col ul { list-style: none; padding: 0; }
.rpa-stage-page .footer-col li { margin-bottom: .4rem; }
.rpa-stage-page .footer-col a { color: rgba(255,255,255,.64); text-decoration: none; }
.rpa-stage-page .footer-col a:hover { color: #ffffff; }
.rpa-stage-page .footer-tagline,
.rpa-stage-page .footer-start-copy {
  margin-bottom: .85rem;
  color: rgba(255,255,255,.58);
  font-size: .86rem;
  line-height: 1.6;
}
.rpa-stage-page .footer-socials { display: flex; flex-direction: column; gap: .35rem; }
.rpa-stage-page .footer-socials a { font-size: .82rem; }
.rpa-stage-page .footer-cta-btn {
  display: inline-flex;
  margin-top: .4rem;
  padding: 9px 18px;
  border-radius: 999px;
  background: #679436;
  color: #ffffff !important;
  font-family: "Fredoka One", sans-serif;
}
.rpa-stage-page .footer-member-links {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.rpa-stage-page .footer-member-login,
.rpa-stage-page .footer-member-library {
  display: inline-flex;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #064789 !important;
  font-family: "Fredoka One", sans-serif;
  font-size: .82rem;
  cursor: pointer;
}
.rpa-stage-page .footer-member-logout {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.74);
  font-weight: 800;
  cursor: pointer;
}
.rpa-stage-page .footer-bottom {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.rpa-stage-page .footer-bottom,
.rpa-stage-page .footer-bottom a { color: rgba(255,255,255,.42); font-size: .78rem; }
.rpa-stage-page .rpa-legal-links {
  display: flex;
  justify-content: center;
  gap: .85rem;
  flex-wrap: wrap;
  width: min(1100px, 100%);
  margin: 1rem auto 0;
  font-size: .78rem;
}
.rpa-stage-page .rpa-legal-links a {
  color: rgba(255,255,255,.62);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 900px) {
  .rpa-stage-page .stage-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa-stage-page .hero {
    min-height: 0;
    background-image: none;
  }
  .rpa-stage-page .footer-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .rpa-stage-page .stage-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa-stage-page .stage-switcher a { min-height: 58px; padding: 8px 9px; font-size: .82rem; }
  .rpa-stage-page .page { width: min(100% - 22px, 1120px); }
  .rpa-stage-page .hero { padding: 30px 22px; border-radius: 26px 22px 28px 24px; }
  .rpa-stage-page .hero-note { margin-top: 24px; }
  .rpa-stage-page .section,
  .rpa-stage-page .signs-section,
  .rpa-stage-page .trail-section,
  .rpa-stage-page .final-card,
  .rpa-stage-page .check-card,
  .rpa-stage-page .guide-feature { padding: 26px 20px; }
  .rpa-stage-page .footer-container { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rpa-stage-page * { scroll-behavior: auto !important; transition: none !important; }
}