/* ============================================================================
   PREVIEW ONLY. This stylesheet exists so the validation page can be reviewed
   standalone. On integration into pmairevolution.com, DROP this file entirely
   and bind the markup to the site's master layout, tokens, and components
   (see INTEGRATION-NOTE.md). Any literal value below that duplicates a site
   token is a defect in the integrated version, not a convenience.

   Color values mirror the AIPM brand tokens in
   site/src/styles/theme-pmairevolution.css:
     green #009966 | orange #ed7406 | red #ef3b39 | gold #ffcb05
     ink #2b2a29 | body #4b5563 | muted #6a7282 | bg #f5f5f4 | card #ffffff
   Font: the live site uses Acumin Pro Condensed (licensed, not shipped here);
   the preview substitutes a condensed-friendly system stack.
   ============================================================================ */

:root {
  --green: #009966;
  --green-700: #00734d;
  --orange: #ed7406;
  --red: #ef3b39;
  --gold: #ffcb05;
  --ink: #2b2a29;
  --body: #4b5563;
  --muted: #6a7282;
  --bg: #f5f5f4;
  --card: #ffffff;
  --pink: #fdeceb;
  --gradient: linear-gradient(90deg, #009966 0%, #ffcb05 50%, #ef3b39 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { color: var(--ink); line-height: 1.15; }

a { color: var(--green-700); }

/* Review banner (removed on integration) */
.preview-banner {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

/* Header / footer */
.site-header { background: var(--card); }
.site-header .wordmark {
  margin: 0;
  padding: 0.9rem 0;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.site-header .wordmark strong { color: var(--green); }
.brand-gradient { height: 5px; background: var(--gradient); }

.site-footer { background: var(--ink); color: #d6d3d1; margin-top: 3rem; }
.site-footer .container { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.site-footer p { margin: 0.35rem 0; }
.site-footer strong { color: #fff; }
.footer-note { font-size: 0.85rem; color: #a8a29e; }

/* Hero */
.hero { background: var(--card); padding: 3.5rem 0 3rem; text-align: center; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange);
  margin: 0 0 0.75rem;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0 0 1rem; }
.lede { font-size: 1.2rem; max-width: 42em; margin: 0 auto 1.75rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin: 0; }
.hero-note { color: var(--muted); font-weight: 600; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-700); }
.btn-lg { font-size: 1.1rem; padding: 0.9rem 2.2rem; }

/* Sections */
.section { padding: 3rem 0; }
.section-alt { background: var(--card); }
.section h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 1rem; }
.section-intro { max-width: 46em; }

/* Cards */
.card-grid { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card {
  background: var(--card);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.1rem;
  border-top: 4px solid var(--green);
}
.section-alt .card { background: #faf9f8; }
.card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.card p { margin: 0; font-size: 0.95rem; }
.card-accent-gold { border-top-color: var(--gold); }
.card-accent-green { border-top-color: var(--green); }
.card-accent-red { border-top-color: var(--red); }

/* Feature list */
.feature-list { padding-left: 1.2rem; max-width: 52em; }
.feature-list li { margin: 0.6rem 0; }
.feature-list strong { color: var(--ink); }

/* Timeline */
.timeline-title { margin: 2.25rem 0 1rem; font-size: 1.2rem; }
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.timeline-step {
  background: var(--card);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--green);
  position: relative;
}
.timeline-step:nth-child(2) { border-left-color: var(--gold); }
.timeline-step:nth-child(3) { border-left-color: var(--orange); }
.timeline-step:nth-child(4) { border-left-color: var(--red); }
.timeline-step:nth-child(5) { border-left-color: var(--orange); }
.timeline-step:nth-child(6) { border-left-color: var(--gold); }
.timeline-when { display: block; font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.timeline-what { display: block; font-size: 0.85rem; margin-top: 0.25rem; }

/* Integrity line */
.integrity-line {
  margin-top: 1.75rem;
  background: var(--pink);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  max-width: 52em;
  font-size: 0.95rem;
}

/* CTA band */
.section-cta { background: var(--green); text-align: center; }
.section-cta h2, .section-cta p { color: #fff; }
.section-cta .btn-primary { background: #fff; color: var(--green-700); }
.section-cta .btn-primary:hover { background: var(--gold); color: var(--ink); }
.section-cta p { max-width: 40em; margin-left: auto; margin-right: auto; }

/* Infographic */
.infographic { margin: 1.5rem 0 0; }
.infographic img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(43, 42, 41, 0.12);
}
.infographic figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; text-align: center; }

/* Reviewer downloads */
.section-reviewers { border-top: 4px dashed var(--muted); }
.download-list { list-style: none; padding: 0; max-width: 46em; }
.download-list li { margin: 0.5rem 0; }
.download-list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: #faf9f8;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.download-list a:hover { background: var(--pink); }
.dl-meta { color: var(--green-700); white-space: nowrap; font-weight: 700; }

@media (max-width: 600px) {
  .section { padding: 2.25rem 0; }
  .hero { padding: 2.5rem 0 2.25rem; }
}