/*
 * Page-specific styles for the Measure U page.
 *
 * Requires main-style.css to be loaded FIRST (shared tokens + base hero,
 * section, animation and disclaimer rules), which itself sits on top of the
 * City framework (mv-main.css / mv-style.css).
 *
 * Contents:
 *   1. Page tokens (:root)        3. Page-specific layout (.ps-*)
 *   2. Hero variant               4. Responsive adjustments
 */

/* ==========================================================================
   1. PAGE TOKENS  — page-specific colors (with fallbacks to brand tokens)
   ========================================================================== */
:root {
  --ps-blue:    var(--brand-blue, #1a3a6b);
  --ps-orange:  var(--vims-accent, #f5a800);
  --ps-green:   #2e7d32;
  --ps-red:     #b3261e;
  --ps-surface: var(--neutral-gray-light, #f1f1f2);
  --ps-text:    var(--neutral-gray-dark, #4d515f);
  --ps-radius:  10px;
}


/* ==========================================================================
   2. HERO VARIANT  (overrides the base hero from main-style.css)
   ========================================================================== */
.hero--ps { min-height: 400px; }

.hero-bg--ps {
  background-image: url("../../measureU/img/2026_CMO-MeasureU-HeroBanner[61].jpg");
  background-attachment: scroll;
  background-position: center;
}

.hero--ps .hero-title { margin-top: 0; }

.hero-overlay {
	clip-path: polygon(0% 0%, 0% 100%, 60% 100%, 45% 0%);
}



/* ==========================================================================
   3. PAGE-SPECIFIC LAYOUT
   ========================================================================== */

/* ---------- Responsive grid ---------- */
.ps-grid { display: grid; gap: 1.6rem; }
.ps-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ps-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ps-grid.pad-top { margin-top: 1.5rem; }


/*----------- Sections ---------------------------------*/
.ps-section-2 {
	background-image: linear-gradient( to bottom, rgba(14, 30, 70, 0.65), rgba(14, 30, 70, 0.85)),
url('../../measureU/img/2026_CMO-MeasureU-HeroBanner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 500px;
	align-items: center;
	justify-content: center;
}

.ps-section-3 {
	background-image: linear-gradient( to bottom, rgba(14, 30, 70, 0.65), rgba(14, 30, 70, 0.85)),
url('../../measureU/img/2026_CMO-MeasureU-HeroBanner.jpg');
	min-height: 500px;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ps-partnership {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ps-partnership img {
	position: relative;
	z-index: 0;
}

.ps-partnership p {
	margin-top: 10px;
	margin-bottom: -45px;
	z-index: 1;
}
/* ---------- Inline links ---------- */
.ps-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ps-blue);
  text-decoration: none; margin-top: 0.6rem;
  transition: gap 0.2s ease, color 0.2s ease;
}

.ps-link:hover { gap: 0.7rem; color: var(--ps-orange); text-decoration: none; }

/* ---------- Rule cards (sidewalks / trails) ---------- */
.ps-rule-card {
  background: var(--vims-white, #fff);
  border-radius: var(--ps-radius);
  border-top: 4px solid var(--ps-green);
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  padding: 1.6rem 1.7rem 1.8rem;
}
.ps-rule-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.ps-rule-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--ps-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.ps-rule-title {
  font-family: var(--font-display, sans-serif);
  font-size: 2rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ps-blue); margin: 0;
}
.ps-rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.ps-rule-list li {
  position: relative; padding-left: 1.6rem;
  font-size: 1.45rem; line-height: 1.6; color: var(--ps-text);
}
.ps-rule-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--ps-green); font-weight: 700;
}
.ps-rule-list li.ps-prohibited { color: var(--ps-red); }
.ps-rule-list li.ps-prohibited::before { content: "\2715"; color: var(--ps-red); }

/* ---------- Binary contrast (legal vs not) ---------- */
.ps-binary { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.6rem; align-items: stretch; }
.ps-binary-col {
  background: var(--vims-white, #fff);
  border-radius: var(--ps-radius);
  box-shadow: var(--vims-shadow-md, 0 6px 20px rgba(0,0,0,0.13));
  overflow: hidden; display: flex; flex-direction: column;
}
.ps-binary-head {
  color: #fff; padding: 1rem 1.4rem;
  font-family: var(--font-display, sans-serif);
  font-size: 1.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.ps-binary-head--legal { background: var(--ps-green); }
.ps-binary-head--illegal { background: var(--ps-red); }
.ps-binary-cite {
  font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; opacity: 0.9; width: 100%;
}
.ps-class-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: #e2e2e6; padding: 1px; flex: 1;
}
.ps-class-card { background: #fff; padding: 1.2rem 1rem; text-align: center; }
.ps-class-card--mandate { background: #fbf6e7; }
.ps-class-icon { font-size: 2.6rem; color: var(--ps-blue); margin-bottom: 0.5rem; }
.ps-class-icon--red { color: var(--ps-red); }
.ps-class-name {
  font-family: var(--font-display, sans-serif);
  font-size: 1.7rem; font-weight: 700; text-transform: uppercase;
  color: var(--ps-blue); margin: 0 0 0.2rem;
}
.ps-class-tag { font-size: 1.25rem; font-weight: 600; color: var(--ps-text); margin: 0 0 0.3rem; }
.ps-class-speed {
  font-family: var(--font-display, sans-serif);
  font-size: 1.6rem; font-weight: 700; color: var(--ps-orange); margin: 0 0 0.6rem;
}
.ps-class-card ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.ps-class-card ul li {
  font-size: 1.2rem; line-height: 1.45; color: var(--ps-text);
  padding-left: 0.9rem; position: relative; margin-bottom: 0.3rem;
}
.ps-class-card ul li::before { content: "\2022"; position: absolute; left: 0; color: var(--ps-green); }
.ps-class-card--mandate p { font-size: 1.25rem; line-height: 1.5; color: var(--ps-text); text-align: left; margin: 0; }

.ps-illegal-body { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; }
.ps-illegal-vehicle { text-align: center; }
.ps-illegal-vehicle .ps-class-icon { font-size: 3.4rem; }
.ps-illegal-vehicle p { font-size: 1.35rem; line-height: 1.55; color: var(--ps-text); margin: 0.3rem 0 0; }
.ps-illegal-subhead {
  font-family: var(--font-display, sans-serif);
  font-size: 1.5rem; font-weight: 700; text-transform: uppercase;
  color: var(--ps-red); margin: 0.4rem 0 0;
}
.ps-illegal-list { list-style: none; margin: 0; padding: 0; }
.ps-illegal-list li {
  font-size: 1.35rem; line-height: 1.5; color: var(--ps-text);
  padding-left: 1.2rem; position: relative; margin-bottom: 0.3rem;
}
.ps-illegal-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--ps-red); font-weight: 700; }
.ps-warning-line { color: var(--ps-red); font-size: 1.3rem; line-height: 1.5; margin: 0.4rem 0 0; }

/* ---------- Callout boxes ---------- */
.ps-callout {
  border-radius: var(--ps-radius); padding: 1.6rem 1.5rem;
  border-top: 5px solid;
  background: var(--brand-blue);
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}

.ps-callout--blue { border-top-color: var(--ps-blue); }
.ps-callout--orange { border-top-color: var(--ps-orange); }
.ps-callout--yellow { border-top-color: var(--ps-yellow); }
.ps-callout--red { border-top-color: var(--ps-red); }
.ps-callout-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.ps-callout--blue .ps-callout-icon { color: var(--ps-blue); }
.ps-callout--orange .ps-callout-icon { color: var(--ps-orange); }
.ps-callout--yellow .ps-callout-icon { color: var(--ps-yellow); }
.ps-callout--red .ps-callout-icon { color: var(--ps-red); }

.ps-callout-title {
  font-family: var(--font-display, sans-serif);
  font-size: 1.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: #fff; margin: 0 0 0.5rem;
}

.ps-callout p { font-size: 1.4rem; line-height: 1.6; color: #fff; margin: 0; }

.ps-badge {
  display: inline-block; margin-top: 0.9rem; padding: 0.35rem 0.8rem;
  background: rgba(26,58,107,0.08); color: var(--ps-blue);
  font-size: 1.2rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 999px;
}

/* ---------- Resource cards ---------- */
.ps-resource-card {
  display: block; background: var(--vims-white, #fff);
  border-radius: var(--ps-radius); padding: 1.6rem 1.5rem;
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  border-left: 4px solid transparent; text-decoration: none; color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.ps-resource-card:hover {
  transform: translateY(-3px); text-decoration: none;
  box-shadow: var(--vims-shadow-md, 0 6px 20px rgba(0,0,0,0.13));
  border-left-color: var(--ps-orange);
}
.ps-resource-icon { font-size: 2.4rem; color: var(--ps-blue); margin-bottom: 0.6rem; }
.ps-resource-card h3 {
  font-family: var(--font-display, sans-serif);
  font-size: 1.85rem; font-weight: 700; color: var(--ps-blue); margin: 0 0 0.4rem;
}
.ps-resource-card p { font-size: 1.4rem; line-height: 1.6; color: var(--ps-text); margin: 0 0 0.6rem; }

/* ---------- Partner network ---------- */
.ps-subsection-title {
  font-family: var(--font-display, sans-serif);
  font-size: 2.2rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ps-blue);
  margin: 3rem 0 1.4rem; padding-top: 1.6rem; border-top: 2px solid #e2e2e6;
}
.ps-partner-card {
  background: var(--ps-surface); border-radius: var(--ps-radius);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
  border-bottom: 4px solid var(--ps-blue);
}
.ps-partner-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--ps-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 0.8rem;
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}
.ps-partner-card h4 {
  font-family: var(--font-display, sans-serif);
  font-size: 1.7rem; font-weight: 700; color: var(--ps-blue);
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 0.5rem;
}
.ps-partner-card p { font-size: 1.35rem; line-height: 1.55; color: var(--ps-text); margin: 0 0 0.8rem; flex: 1; }
.ps-partner-card .ps-link { margin-top: 0; display: flex; }
.ps-partner-card .ps-link + .ps-link { margin-left: 0; margin-top: 0.4rem; }

/* ---------- Report + workshop ---------- */
.ps-report-row { align-items: flex-start; }
.ps-report-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ps-report-list li {
  font-size: 1.6rem; line-height: 1.6; color: rgba(255,255,255,0.9);
  padding-left: 1.7rem; position: relative;
}
.ps-report-list li::before {
  content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; color: var(--ps-orange); font-size: 1.2rem; top: 2px;
}
.ps-report-list a { color: var(--ps-orange); }
.ps-workshop {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 4px solid var(--ps-orange);
  border-radius: var(--ps-radius);
  box-shadow: var(--vims-shadow-md, 0 6px 20px rgba(0,0,0,0.13));
  padding: 1.6rem 1.6rem 1.8rem;
  color: var(--ps-blue);
  position: relative;
  z-index: 2;
}
.ps-workshop-icon { font-size: 2.4rem; color: var(--ps-orange); margin-bottom: 0.5rem; }
.ps-workshop-title {
  font-family: var(--font-display, sans-serif);
  font-size: 2rem; font-weight: 700; text-transform: uppercase;
 margin: 0 0 0.6rem;
}
.ps-workshop p { font-size: 1.4rem; line-height: 1.6; margin: 0 0 0.6rem; }
.ps-workshop-meta { display: flex; align-items: flex-start; gap: 0.6rem; }
.ps-workshop-meta i { color: var(--ps-orange); margin-top: 3px; }

/* ==========================================================================
   iFrame
   ========================================================================== */

iframe {
	min-height: 550px;
}
/* ---------- In-page jump targets ----------
   Offset for the sticky sub-nav so anchored sections aren't hidden behind it */
#where-to-ride,
#partners,
#trail-map { scroll-margin-top: 90px; }

/* Interactive map embed */
.ps-map-embed iframe { width: 100%; display: block; border: 0; }

/* ==========================================================================
   4. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 900px) {
  .ps-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ps-binary { grid-template-columns: 1fr; }
  .ps-class-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ps-report-row { flex-direction: column; }
  .ps-report-row .seven.columns,
  .ps-report-row .five.columns { width: 100%; margin-left: 0; }

  /* Hero overlay: drop the diagonal clip so the dark gradient covers the
     entire hero image for legible text on small screens */
  .hero--ps .hero-overlay {
    clip-path: none;
    background: linear-gradient(
      to bottom,
      rgba(14, 30, 70, 0.65),
      rgba(14, 30, 70, 0.95)
    );
  }

  /* Workshop card: full width on mobile */
  .ps-section-1 .five.columns {
    width: 100%;
    margin-left: 0;
    float: none;
  }
  .ps-section-1 .ps-workshop { width: 100%; }
}
@media (max-width: 670px) {
  .ps-grid--2, .ps-grid--3, .ps-grid--4 { grid-template-columns: 1fr; }
  .ps-class-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   5. FAQ ACCORDION  (awsAccordion plugin — scoped overrides, page blue theme)
   ========================================================================== */
.ps-faq { margin-top: 1.5rem; }
.ps-faq ul { list-style: none; margin: 0; padding: 0; }

/* Question bar (the clickable header) */
#faqAccordion.accordion-ver > ul > li {
  position: relative;
  margin: 0 0 10px;
  background: var(--ps-blue);
  border-radius: var(--ps-radius);
  padding-top: 0 !important; /* cancel the plugin's inline title spacing */
  overflow: hidden;
  transition: background-color .2s ease;
}
#faqAccordion.accordion-ver > ul > li:hover,
#faqAccordion.accordion-ver > ul > li.active { background: #16335f; }
#faqAccordion.accordion-ver > ul > li.last { margin-bottom: 0; }

#faqAccordion.accordion-ver > ul > li > h3 {
  position: static;
  margin: 0;
  padding: 16px 48px 16px 18px;       /* right padding leaves room for the chevron */
  color: #fff;
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
#faqAccordion.accordion-ver > ul > li > h3:focus {
  outline: 3px solid var(--ps-orange);
  outline-offset: -3px;
}

/* Chevron icon — plugin emits FA4-style names; FA6 needs family + glyph set */
#faqAccordion.accordion-ver > ul > li > i {
  position: absolute;
  right: 18px;
  top: 18px;
  margin: 0;
  padding: 0 !important;
  color: #fff;
  font-size: 16px;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal;
  line-height: 1.4;
}
#faqAccordion.accordion-ver > ul > li > i.fa-chevron-down::before { content: "\f078"; }
#faqAccordion.accordion-ver > ul > li > i.fa-chevron-up::before   { content: "\f077"; }

/* Answer panel */
#faqAccordion.accordion-ver > ul > li > div {
  background: #fff;
  border-radius: 0 0 var(--ps-radius) var(--ps-radius);
}
.ps-faq-answer { padding: 16px 18px; color: var(--ps-text); }
.ps-faq-answer p { margin: 0; line-height: 1.6; font-size: 1.8rem;}
.ps-faq-answer p + p { margin-top: .75rem; }

.ps-hero-logo {
	margin-left: 3.5%;
}


/* ==========================================================================
   5. MEASURE U PAGE COMPONENTS  (.mu-*)
   Added for the Measure U landing page update. Everything below is scoped
   to mu- classes so it cannot affect the shared ps- components above.
   ========================================================================== */

/* ---------- Clickable cards (built on card-styles.css) ----------
   .mu-card-link turns the whole card into one link target rather than
   asking the user to hit a small "Learn more" hyperlink.               */
.mu-card-link > a.card__body {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  /* roomier than the shared --card-pad; these cards are short on text and
     look pinched at 4-up without it */
  padding: 2.4rem 2.2rem 2.6rem;
}
.mu-card-link .card__title { margin-bottom: 0.9rem; line-height: 1.3; }
.mu-card-link .card__text  { line-height: 1.7; }
.mu-card-link { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mu-card-link:hover,
.mu-card-link:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover, 0 8px 24px rgba(0,0,0,0.15));
}
.mu-card-link > a.card__body:focus-visible {
  outline: 3px solid var(--ps-orange);
  outline-offset: -3px;
  border-radius: var(--card-radius, 10px);
}

.mu-card-icon {
  display: block;
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 1.2rem;
  color: #fff;
}
.mu-card-icon--dark { color: var(--ps-blue); }

.mu-card--soon { opacity: 0.9; }
.mu-card--soon > .card__body { padding: 2.4rem 2.2rem 2.6rem; }

/* ==========================================================================
   TIMELINE  —  horizontal on desktop, vertical on mobile
   Markers sit on a connecting rail; the matching panel opens below the rail.
   With JavaScript disabled every panel is visible (see .no-js fallback).
   ========================================================================== */
.mu-timeline { margin: 3.5rem 0 0; }

.mu-tl-track {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

/* the connecting rail behind the dots */
.mu-tl-track::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 0;
}

.mu-tl-item { position: relative; z-index: 1; }

.mu-tl-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0 0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: #fff;
  transition: transform 0.2s ease;
}
.mu-tl-marker:hover { transform: translateY(-2px); }
.mu-tl-marker:focus-visible {
  outline: 3px solid var(--ps-orange);
  outline-offset: 4px;
  border-radius: 6px;
}

.mu-tl-dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--ps-blue);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.mu-tl-marker:hover .mu-tl-dot { background: var(--ps-orange); }

/* the open milestone */
.mu-tl-item.is-open .mu-tl-dot {
  background: var(--ps-orange);
  box-shadow: 0 0 0 6px rgba(245, 168, 0, 0.3);
}
.mu-tl-item.is-open .mu-tl-date { color: var(--ps-orange); }

/* the milestone the City is currently in */
.mu-tl-item--current .mu-tl-dot { border-color: var(--ps-orange); }

.mu-tl-date {
  font-family: var(--font-display, sans-serif);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin-top: 0.5rem;
  transition: color 0.2s ease;
}
.mu-tl-title {
  font-size: 1.35rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Panels ---------- */
/* Progressive enhancement: with no JavaScript every panel is visible. The
   script adds .js-tl to the container, which turns them into an accordion. */
.mu-tl-panel {
  display: block;
  margin-bottom: 1.2rem;
  background: #fff;
  border-radius: var(--ps-radius);
  border-top: 5px solid var(--ps-orange);
  box-shadow: var(--vims-shadow-md, 0 6px 20px rgba(0,0,0,0.13));
  padding: 1.8rem 2rem;
}
.mu-timeline.js-tl .mu-tl-panel { display: none; margin-bottom: 0; }
.mu-timeline.js-tl .mu-tl-panel.is-open { display: block; }
.mu-tl-panel-head {
  font-family: var(--font-display, sans-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ps-blue);
  margin: 0 0 0.5rem;
}
.mu-tl-panel p { font-size: 1.5rem; line-height: 1.65; color: var(--ps-text); margin: 0; }


/* ==========================================================================
   IMPLEMENTATION AT A GLANCE  —  impact cards + status badges
   To update a status, change BOTH the modifier class and the badge text:
     mu-status--planned      "Planned"
     mu-status--progress     "In Progress"
     mu-status--complete     "Complete"
   ========================================================================== */
.mu-impact-card {
  background: #fff;
  border-radius: var(--ps-radius);
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  border-top: 4px solid var(--ps-blue);
  padding: 2.2rem 2.2rem 2.4rem;
}
.mu-impact-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e2e6;
}
.mu-impact-icon { font-size: 2.2rem; color: var(--ps-blue); line-height: 1; }
.mu-impact-title {
  font-family: var(--font-display, sans-serif);
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--ps-blue);
  margin: 0;
  flex: 1;
}

.mu-status {
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.mu-status--planned  { background: #eef2f8; color: #2c4a7c; border: 1px solid #c9d8ec; }
.mu-status--progress { background: #fdf3dd; color: #8a5a00; border: 1px solid #f0d79a; }
.mu-status--complete { background: #e8f4e9; color: #1f5c23; border: 1px solid #bcdcbe; }

.mu-impact-list { list-style: none; margin: 0; padding: 0; }
.mu-impact-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.7rem;
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--ps-text);
}
.mu-impact-list li:last-child { margin-bottom: 0; }
.mu-impact-list li::before {
  content: "\f058";                       /* circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ps-green);
  font-size: 1.3rem;
}

.mu-fineprint {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--ps-text);
  font-style: italic;
  margin: 2rem 0 0;
}

/* the receipt-driven callout */
.mu-callout { margin-top: 2.6rem; text-align: center; }


/* ---------- Badges ---------- */
.mu-soon,
.mu-filetype {
  display: inline-block;
  font-family: var(--font-body, inherit);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.mu-soon     { background: #fdf3dd; color: #8a5a00; border: 1px solid #f0d79a; }
.mu-filetype { background: #f4e7e6; color: #8a1620; border: 1px solid #e3c6c4; }


/* ==========================================================================
   HISTORY / ARCHIVE LIST  (light background — do not reuse .ps-report-list,
   which is styled for the dark sections)
   ========================================================================== */
.mu-archive-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.mu-archive-row { margin-bottom: 0.9rem; }
.mu-archive-row a {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e2e2e6;
  border-left: 4px solid var(--ps-orange);
  border-radius: var(--ps-radius);
  padding: 1.1rem 1.4rem;
  font-size: 1.55rem;
  line-height: 1.5;
  color: var(--ps-blue);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mu-archive-row a:hover,
.mu-archive-row a:focus-visible {
  background: var(--ps-surface);
  border-left-color: var(--ps-blue);
  transform: translateX(3px);
}
.mu-archive-row a > i { color: var(--ps-red); font-size: 1.8rem; flex: 0 0 auto; }
.mu-archive-row a > span:first-of-type { flex: 1; }

.mu-note {
  margin-top: 2.4rem;
  background: var(--ps-surface);
  border-left: 5px solid var(--ps-blue);
  border-radius: 0 var(--ps-radius) var(--ps-radius) 0;
  padding: 1.4rem 1.6rem;
}
.mu-note p { font-size: 1.35rem; line-height: 1.65; color: var(--ps-text); margin: 0; }


/* ==========================================================================
   MEASURE U — RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {

  /* Timeline flips to a vertical rail with the panel under each milestone. */
  .mu-tl-track {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }
  .mu-tl-track::before {
    left: 11px;
    right: auto;
    top: 12px;
    bottom: 12px;
    width: 3px;
    height: auto;
  }
  .mu-tl-item { padding-bottom: 1.6rem; }
  .mu-tl-marker {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 0;
    text-align: left;
    flex-wrap: wrap;
  }
  .mu-tl-dot { margin-top: 2px; }
  .mu-tl-date { margin-top: 0; }
  .mu-tl-title { flex-basis: 100%; padding-left: 3.5rem; }

  .mu-tl-panels { margin-top: 1.4rem; }
  .mu-tl-panel { margin-left: 0; }

  .mu-impact-head { gap: 0.6rem; }
  .mu-impact-title { flex-basis: 100%; }
  .mu-archive-row a { align-items: flex-start; font-size: 1.45rem; }
}

@media (max-width: 480px) {
  .mu-tl-date { font-size: 1.35rem; }
  .mu-tl-panel { padding: 1.4rem 1.5rem; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .mu-card-link, .mu-tl-marker, .mu-archive-row a { transition: none; }
  .mu-card-link:hover, .mu-tl-marker:hover, .mu-archive-row a:hover { transform: none; }
}

/* ==========================================================================
   6. CARD SIZING FIX  —  why the cards were overlapping
   --------------------------------------------------------------------------
   The site has no global `box-sizing: border-box` reset; everything is
   content-box. card-styles.css is written assuming border-box, so a .card
   ends up with:

       width: 100%            (mv-main.css)
     + padding: 10px          (card-styles.css)
     + border: 1px            (mv-main.css)
     = 22px WIDER than its grid column

   Grid tracks don't shrink to accommodate that, so every card overflowed its
   column and its row, eating the gap and lapping over its neighbours. The
   same maths applied vertically because .card also sets height: 100%.

   Scoped to this page. If it holds up, the real fix belongs in the shared
   sheets — see the note passed along with this change.
   ========================================================================== */
.card,
.card__body,
.card > *,
.mu-impact-card { box-sizing: border-box; }

/* mv-main.css puts margin-bottom on every .card; inside a grid the gap
   already handles the spacing, and the margin desyncs the rows. */
.grid > .card { margin-bottom: 0; }