/* Stylus Design System — v2 content layout
   Same structural system as rally-uxr-observation-rooms.css /
   enterprise-settings.css. Header nav is the site-wide
   .site-navbar/.nav-pill from style.css; only the footer
   (rally-footer, ported here as stylus-footer) stays standalone. */

:root {
  --stylus-gray-200: #e5e7eb;
  --stylus-gray-600: #4b5563;
  --stylus-gray-700: #374151;
  --stylus-gray-800: #1f2937;
  --stylus-gray-900: #111827;
  --stylus-max-width: 1224px;
}

body.stylus-page {
  background-color: #fcfcfe;
}

.stylus-footer-nav a.stylus-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

.stylus-nav-btn:hover {
  background-color: #f8fafc;
}

.stylus-footer-nav a.stylus-nav-btn--primary {
  background: linear-gradient(180deg, #374151, #111827);
  border-color: rgba(17, 24, 39, 0.2);
  color: #ffffff;
  text-shadow: 0px 1px 1px rgba(49, 46, 129, 0.25);
}

.stylus-footer-nav a.stylus-nav-btn--primary:hover {
  background: linear-gradient(180deg, #3f4b5c, #1a2434);
}

.stylus-shell {
  padding: 0 24px;
}

.stylus-content {
  max-width: var(--stylus-max-width);
  margin: 0 auto;
  padding: 120px 0 80px;
}

.stylus-title-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.stylus-kicker {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--stylus-gray-600);
}

.stylus-h1 {
  margin: 4px 0 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.8px;
  color: var(--stylus-gray-900);
}

.stylus-overview {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  color: var(--stylus-gray-600);
}

/* Two-column section (Scope & Impact + Role/Team/Tools) */

.stylus-section {
  display: flex;
  gap: 126px;
  padding-top: 16px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--stylus-gray-200);
  margin-top: 40px;
}

.stylus-section-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 600px;
  max-width: 100%;
}

.stylus-label {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--stylus-gray-800);
}

.stylus-text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stylus-text {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  color: var(--stylus-gray-600);
}

.stylus-inline-link {
  align-self: flex-start;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.48;
  color: var(--stylus-gray-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.stylus-inline-link:hover {
  color: var(--stylus-gray-600);
}

.stylus-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 496px;
  max-width: 100%;
}

.stylus-info-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Component library block + images */

.stylus-block {
  padding-top: 48px;
  padding-bottom: 0;
}

.stylus-block .stylus-section-main {
  gap: 16px;
}

.stylus-image {
  margin-top: 48px;
  width: 100%;
  border: 1px solid var(--stylus-gray-200);
  border-radius: 16px;
}

.stylus-image-grid {
  display: flex;
  gap: 24px;
  margin-top: 48px;
}

.stylus-image-grid img {
  width: 600px;
  max-width: 100%;
  border-radius: 4px;
}

/* Footer (matches rally-uxr-observation-rooms.css / enterprise-settings.css) */

.stylus-footer {
  border-top: 1px solid var(--stylus-gray-200);
  padding: 40px 24px;
}

.stylus-footer-inner {
  max-width: var(--stylus-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.stylus-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.stylus-footer-heading {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: -0.8px;
  color: var(--stylus-gray-900);
}

.stylus-footer-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.stylus-footer-copyright {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28px;
  color: var(--stylus-gray-700);
}

/* Responsive fallback */

@media (max-width: 960px) {
  .stylus-content {
    padding-top: 64px;
  }

  .stylus-section,
  .stylus-image-grid {
    flex-direction: column;
    gap: 32px;
  }

  .stylus-section-main,
  .stylus-info {
    width: 100%;
  }

  .stylus-image-grid img {
    width: 100%;
  }

  .stylus-h1 {
    font-size: 32px;
    line-height: 36px;
  }

  .stylus-footer-heading {
    font-size: 32px;
    line-height: 36px;
  }
}

@media (max-width: 600px) {
  .stylus-footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .stylus-footer-inner {
    gap: 32px;
  }
}