/* User guide — public tour page. Rides the app tokens so it follows the
   visitor's light/dark preference like the rest of the site. */

.ug-body { margin: 0; background: var(--hwy-sand, #f4f1ea); color: var(--hwy-ink, #1b1b1b); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.ug-hero {
   background: var(--hwy-green, #0b3d2e); color: #fff; text-align: center;
   padding: 44px 20px 52px;
}
.ug-brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; }
.ug-hero h1 { margin: 18px 0 8px; font-size: clamp(26px, 4.5vw, 42px); }
.ug-hero p { margin: 0 auto 22px; max-width: 560px; opacity: 0.9; line-height: 1.5; }
.ug-cta {
   display: inline-block; background: #fff; color: var(--hwy-green, #0b3d2e);
   font-weight: 800; text-decoration: none; padding: 11px 22px; border-radius: 999px;
}
.ug-cta:hover { filter: brightness(0.94); }

.ug-main { max-width: 980px; margin: 0 auto; padding: 12px 20px 60px; }

.ug-step { margin: 44px 0; }
.ug-step h2 { font-size: 22px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.ug-num {
   flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
   align-items: center; justify-content: center; font-size: 15px;
   background: var(--hwy-green, #0b3d2e); color: #fff;
}
.ug-text p { line-height: 1.6; margin: 8px 0; max-width: 680px; }

.ug-shot { margin: 18px 0 0; }
.ug-shot img {
   max-width: 100%; height: auto; border-radius: 12px;
   border: 1px solid var(--hwy-line, rgba(0, 0, 0, 0.12));
   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}
.ug-shot-tall img { max-height: 560px; width: auto; }
.ug-shot-small img { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); }

.ug-faq { margin-top: 56px; border-top: 1px solid var(--hwy-line, rgba(0, 0, 0, 0.12)); padding-top: 26px; }
.ug-faq h2 { font-size: 22px; }
.ug-faq dt { font-weight: 800; margin-top: 18px; }
.ug-faq dd { margin: 6px 0 0; line-height: 1.6; max-width: 680px; }

.ug-foot { text-align: center; margin-top: 54px; }