/* =========================================================
   Mountain View ATP page — small set of new components only.

   This page otherwise reuses the existing .rengstorff-microsite
   system verbatim (.section-block, .section-intro, .study-breadcrumb,
   .onpage-nav, .evidence-cards/.evidence-card, .bufp-compare,
   .bufp-doc-card, .bufp-missing-note, .evidence-nav-grid,
   .connected-project-cta, .category-tag) -- see cities/mountainview-ca/
   plans/bufp/index.html for the shared component set this borrows.
   Only genuinely new pieces live here: status badges for the
   recommendations-comparison table, a small "Table 7" source tag, and
   a simple timeline stepper. Same color logic as the existing
   .phase-status badges (distinct hues, not shades of one color;
   neutral sand for "not yet" rather than red/yellow).
   ========================================================= */

.rengstorff-microsite .atp-status {
  display: inline-block;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.rengstorff-microsite .atp-status--partial {
  background: #d9ebe9;
  color: #1f5854 !important;
}

.rengstorff-microsite .atp-status--not-added {
  background: #f2e9d8;
  color: #6b5a37 !important;
}

.rengstorff-microsite .atp-status--substantial {
  background: #cdead1;
  color: #0b5c3a !important;
}

/* ---------- "Table 7" source tag ---------- */

.rengstorff-microsite .atp-table7-tag {
  display: inline-block;
  margin: 0 0.5rem 0.35rem 0;
  border-radius: 4px;
  background: #e8ede5;
  color: #4d5850 !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  vertical-align: middle;
}

/* ---------- Timeline stepper ---------- */

.rengstorff-microsite .atp-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 0;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-timeline__step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 11rem;
}

.rengstorff-microsite .atp-timeline__label {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gcs-text, #1f2420);
}

.rengstorff-microsite .atp-timeline__step--done .atp-timeline__label {
  color: #16704d;
}

.rengstorff-microsite .atp-timeline__step--upcoming .atp-timeline__label {
  color: #6b5a37;
}

.rengstorff-microsite .atp-timeline__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: #9fb5a5;
}

.rengstorff-microsite .atp-timeline__step--done .atp-timeline__dot {
  background: #16704d;
}

.rengstorff-microsite .atp-timeline__step--upcoming .atp-timeline__dot {
  background: #c9a35a;
}

.rengstorff-microsite .atp-timeline__arrow {
  align-self: center;
  margin: 0 0.6rem;
  color: #9fb5a5;
}

/* A milestone can be a link to its own source/version page (e.g.
   September 22 -> the Council Adoption page, August 2026 -> the
   Revised ATP PDF) -- same color as the step's own --done/--upcoming
   state (inherited), just without the default browser underline
   until hover/focus. */
.rengstorff-microsite .atp-timeline__label a {
  color: inherit;
  text-decoration: none;
}

.rengstorff-microsite .atp-timeline__label a:hover,
.rengstorff-microsite .atp-timeline__label a:focus-visible {
  text-decoration: underline;
}

/* Compact post-adoption update card -- a summary, not a full section
   (the detailed coalition/staff/Council record lives on its own page,
   linked from the CTA below). Same pale card language as
   .atp-process__step elsewhere on this page, capped to a readable
   measure rather than stretching full width, so it reads as "a card"
   at a glance. */
.rengstorff-microsite .atp-adoption-card {
  background: #f5f8f4;
  border: 1px solid #d4e2d7;
  border-radius: 8px;
  margin: 0 0 1.5rem;
  max-width: 36rem;
  padding: 1.25rem 1.5rem;
}

.rengstorff-microsite .atp-adoption-card__eyebrow {
  color: #4e745c !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem !important;
  text-transform: uppercase;
}

.rengstorff-microsite .atp-adoption-card__title {
  color: #16412e !important;
  font-size: 1.25rem !important;
  margin: 0 0 0.6rem !important;
}

.rengstorff-microsite .atp-adoption-card__text {
  color: #33483a !important;
  font-size: 0.88rem !important;
  line-height: 1.55;
  margin: 0 0 0.6rem !important;
}

.rengstorff-microsite .atp-adoption-card__text:last-of-type {
  margin-bottom: 0.9rem !important;
}

.rengstorff-microsite .atp-adoption-card__cta {
  color: #16704d !important;
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 700;
}

.rengstorff-microsite .atp-adoption-card__cta:hover,
.rengstorff-microsite .atp-adoption-card__cta:focus-visible {
  text-decoration: underline;
}

.rengstorff-microsite .atp-adoption-card__meta {
  color: #6e8577 !important;
  font-size: 0.76rem !important;
  margin: 0.75rem 0 0 !important;
}

/* Compact variant, used for the "coming soon" 4-step preview under the
   August 31 table -- same shape, quieter (no dots/color-coding, since
   none of those steps have happened yet). */

.rengstorff-microsite .atp-timeline--preview .atp-timeline__label {
  font-weight: 600;
  color: #8a978c;
}

.rengstorff-microsite .atp-timeline--preview .atp-timeline__dot {
  display: none;
}

/* ---------- Hero -- matches the Standard Details page's design
   system (.sd-hero/.sd-status-grid in main.css): same dark green
   #193c2b, same white status-card treatment, same restraint. Scoped
   under .atp-hero-page so it can never leak onto sd-page or any other
   .rengstorff-hero use on the site. Unlike sd-page's engineering-
   drawing texture (grayscale/invert/screen-blend suits a line
   drawing), this hero's image is a real color photo, so it gets a
   plain dark tint + a green gradient fade toward the copy side
   instead -- same effect (subdued, doesn't fight the title), right
   technique for a photo. */

/* Image is now a full-bleed absolutely-positioned layer spanning the
   right ~55-58% of the FULL hero width (edge to edge, no side inset),
   so .atp-hero drops the grid entirely -- copy and status stack in
   normal block flow (their own combined height is what determines
   the hero's total height), and the image just fills that height via
   top/right/bottom:0. This is what makes the hero read as one
   continuous field rather than a photo card floating next to text. */
.atp-hero-page .atp-hero {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.atp-hero-page .atp-hero__copy {
  position: relative;
  z-index: 2;
  box-sizing: content-box;
  max-width: 29rem;
  padding: 3rem 1.5rem 0 max(1.5rem, calc((100vw - 1120px) / 2));
}

.atp-hero-page .atp-hero h1 {
  font-size: clamp(1.9rem, 3vw, 2.75rem) !important;
  line-height: 1.12 !important;
}

.atp-hero-page .atp-hero__copy .hero-subtitle {
  max-width: 26rem;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* Breadcrumb: now the shared .rengstorff-hero__breadcrumb in main.css
   (see that file) -- this page just pairs that class with
   .study-breadcrumb in its HTML instead of keeping a page-scoped
   .atp-hero__breadcrumb copy of the same rules. */

.atp-hero-page .atp-hero__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.atp-hero-page .atp-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 32%;
  filter: saturate(0.9) brightness(0.88);
}

.atp-hero-page .atp-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #193c2b 0%, rgba(25, 60, 43, 0.96) 10%, rgba(25, 60, 43, 0.55) 24%, rgba(25, 60, 43, 0) 42%),
    linear-gradient(rgba(10, 20, 15, 0.14), rgba(10, 20, 15, 0.14));
}

.atp-hero-page .atp-timeline-shell {
  padding-top: 1.75rem;
  padding-bottom: 1.25rem;
}

.atp-hero-page .atp-hero__status {
  position: relative;
  z-index: 2;
  margin: 1.75rem 0 0 0;
  padding: 0 max(1.5rem, calc((100vw - 1120px) / 2)) 1.75rem max(1.5rem, calc((100vw - 1120px) / 2));
}

.atp-hero-page .atp-status-grid {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(10, 20, 15, 0.24);
  column-gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.1rem 1.5rem;
  row-gap: 0.85rem;
  margin: 0;
}

.atp-hero-page .atp-status-item dt {
  color: #5a6c60 !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.3rem;
  text-transform: uppercase;
}

.atp-hero-page .atp-status-item dd {
  color: #1a2b20 !important;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.atp-hero-page .atp-status-item__note {
  margin: 0.25rem 0 0 0 !important;
  color: #8a978c !important;
  font-size: 0.76rem !important;
  line-height: 1.3;
}

/* A note can itself be the action (e.g. "Explore the adoption &
   amendments") rather than a muted caption under one -- give it real
   link weight/color instead of inheriting the muted italic caption
   treatment above. */
.atp-hero-page .atp-status-item__note a {
  color: #16704d !important;
  font-weight: 700;
  font-style: normal;
}

.atp-hero-page .atp-status-item__note a:hover,
.atp-hero-page .atp-status-item__note a:focus-visible {
  text-decoration: underline;
}

.atp-hero-page .atp-status-pill {
  background: #cdead1;
  border-radius: 999px;
  color: #0b5c3a !important;
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.22rem 0.7rem;
}

.atp-hero-page .atp-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid #16704d;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: #16704d !important;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.atp-hero-page .atp-status-btn:hover,
.atp-hero-page .atp-status-btn:focus-visible {
  background: #eef4ee;
}

.atp-hero-page .atp-status-btn--pending {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  border-style: dashed;
  border-color: #c9d4cb;
  color: #8a978c !important;
  cursor: default;
  white-space: normal;
}

.atp-hero-page .atp-status-btn__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.atp-hero-page .atp-status-btn--pending:hover {
  background: none;
}

.atp-hero-page .atp-status-btn--pending .atp-status-item__note {
  margin: 0 !important;
  font-size: 0.68rem !important;
  font-style: italic;
  color: #a9b3ab !important;
}

@media screen and (max-width: 900px) {
  .atp-hero-page .atp-hero__image {
    display: none;
  }

  .atp-hero-page .atp-hero__copy {
    max-width: none;
    padding-right: max(1.5rem, calc((100vw - 1120px) / 2));
  }
}

@media screen and (max-width: 700px) {
  .atp-hero-page .atp-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .atp-hero-page .atp-status-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pending document card (no hosted file/URL yet) ---------- */

.rengstorff-microsite .bufp-doc-card.atp-doc-pending {
  cursor: default;
}

.rengstorff-microsite .bufp-doc-card.atp-doc-pending:hover {
  border-color: #d4ded4;
}

.rengstorff-microsite .atp-doc-pending .bufp-doc-card__action {
  color: #8a978c !important;
  font-style: italic;
  font-weight: 600;
}

@media screen and (max-width: 736px) {
  .rengstorff-microsite .atp-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .rengstorff-microsite .atp-timeline__arrow {
    display: none;
  }
}

/* =========================================================
   September 22, 2026 Council Meeting -- post-adoption record.
   Three stages (coalition asked / staff responded / council acted),
   each set off by a thin top rule and a small colored stage marker
   (not a heading -- the real h3 for each stage carries the actual
   heading text, or is omitted where the user gave none, rather than
   inventing one). .atp-meeting__role-label reuses the exact small
   uppercase micro-label treatment already established on this page
   (.atp-vision__label) to mark which of the two artifacts inside
   "Staff responded" is the primary-source screenshot vs. this site's
   own interpretation/crosswalk table -- restrained text, not a
   colored pill, so it doesn't compete with the status dots below.
   ========================================================= */

.rengstorff-microsite .atp-meeting__stage {
  border-top: 1px solid #d4e2d7;
  margin-top: 2.5rem;
  padding-top: 2rem;
}

.rengstorff-microsite .atp-meeting__stage-marker {
  color: #16704d !important;
  font-size: 0.8rem !important;
  font-weight: 800;
  letter-spacing: 0.07em;
  margin: 0 0 0.75rem !important;
  text-transform: uppercase;
}

.rengstorff-microsite .atp-meeting__role-label {
  margin: 0 0 0.5rem !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4e745c !important;
}

.rengstorff-microsite .atp-meeting h3 {
  color: #16412e;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.rengstorff-microsite .atp-meeting__stage p.atp-meeting__lede {
  color: #33483a !important;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 46rem;
}

/* Stage 1: coalition letter reference. A pending source card (no
   verified URL yet -- see the HTML comment), not a styled link, so it
   never implies a working citation that doesn't exist. */
.rengstorff-microsite .atp-meeting__source-ref {
  margin-top: 1rem;
  max-width: 28rem;
}

/* Stage 2: staff presentation screenshot -- restrained document/
   evidence treatment (plain border + thin frame, not a decorative
   photo card), matching the technical tone of the rest of the page.
   Clickable, opening the sitewide #evidence-modal lightbox already
   used elsewhere on the site rather than a new viewer. */
.rengstorff-microsite .atp-evidence-figure {
  margin: 0 0 2rem;
  max-width: 34rem;
}

.rengstorff-microsite .atp-evidence-figure__frame {
  background: #eef1ee;
  border: 1px solid #c9d4cb;
  border-radius: 4px;
  display: block;
  overflow: hidden;
  position: relative;
}

.rengstorff-microsite .atp-evidence-figure__frame img {
  display: block;
  width: 100%;
}

.rengstorff-microsite .atp-evidence-figure__zoom {
  align-items: center;
  background: rgba(25, 60, 43, 0.82);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  font-size: 0.85rem;
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.5rem;
}

.rengstorff-microsite .atp-evidence-figure__frame:hover .atp-evidence-figure__zoom,
.rengstorff-microsite .atp-evidence-figure__frame:focus-visible .atp-evidence-figure__zoom {
  background: rgba(22, 112, 77, 0.92);
}

.rengstorff-microsite .atp-evidence-figure figcaption {
  margin-top: 0.65rem;
}

.rengstorff-microsite .atp-evidence-figure__title {
  color: #16412e !important;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.rengstorff-microsite .atp-evidence-figure__caption {
  color: #5a6c60 !important;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

/* Pending-evidence placeholder: same restrained "documented gap"
   treatment used elsewhere on the site (dashed border, muted ink) --
   not a broken image, not an invented one. Swappable for the real
   .atp-evidence-figure__frame + img once the screenshot file exists. */
.rengstorff-microsite .atp-evidence-figure__frame.pending {
  align-items: center;
  aspect-ratio: 16 / 10;
  color: #65736a !important;
  display: flex;
  font-size: 0.85rem;
  font-style: italic;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

/* Legend + comparison table ("Coalition requests compared with
   staff's response"). Deliberately muted/desaturated status colors
   -- not saturated traffic-light red/yellow/green -- consistent with
   the rest of the site's restrained palette (see .bufp-missing-note's
   amber/cream choice elsewhere for the same "documentary, not
   alarming" reasoning). */
.rengstorff-microsite .atp-compare-legend {
  align-items: center;
  color: #45594c !important;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  font-weight: 600;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1.25rem;
}

.rengstorff-microsite .atp-compare-legend__item {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.rengstorff-microsite .atp-status-dot {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.65rem;
  width: 0.65rem;
}

.rengstorff-microsite .atp-status-dot--as-is { background: #1f7a4d; }
.rengstorff-microsite .atp-status-dot--modified { background: #a9822f; }
.rengstorff-microsite .atp-status-dot--narrowed { background: #b56a2c; }
.rengstorff-microsite .atp-status-dot--not-included { background: #a8503c; }

.rengstorff-microsite .atp-compare-wrap {
  margin: 0 0 1rem;
  overflow-x: auto;
}

.rengstorff-microsite .atp-compare {
  background: #ffffff;
  border: 1px solid #d4ded4;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.rengstorff-microsite .atp-compare th,
.rengstorff-microsite .atp-compare td {
  border-bottom: 1px solid #d4ded4;
  padding: 1.35rem 1.5rem;
  text-align: left;
  vertical-align: top;
}

.rengstorff-microsite .atp-compare tbody tr:last-child th,
.rengstorff-microsite .atp-compare tbody tr:last-child td {
  border-bottom: 0;
}

.rengstorff-microsite .atp-compare thead th {
  background: #f4f8f4;
  color: #193c2b !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rengstorff-microsite .atp-compare__num-col {
  color: #8a978c !important;
  font-weight: 700;
  text-align: center;
  width: 2.75rem;
}

.rengstorff-microsite .atp-compare__request-title {
  color: #16412e !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.rengstorff-microsite .atp-compare__request-ref {
  color: #6e8577 !important;
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0.35rem 0 0;
}

.rengstorff-microsite .atp-compare__status {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  white-space: nowrap;
}

.rengstorff-microsite .atp-compare__status-text {
  color: #26392d !important;
  font-size: 0.88rem;
  font-weight: 700;
}

.rengstorff-microsite .atp-compare td.atp-compare__said {
  color: #33483a !important;
  font-size: 0.88rem;
  line-height: 1.6;
}

.rengstorff-microsite .atp-compare__footnote {
  color: #6e8577 !important;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.75rem 0 0;
  max-width: 44rem;
}

@media screen and (max-width: 900px) {
  .rengstorff-microsite .atp-compare,
  .rengstorff-microsite .atp-compare tbody,
  .rengstorff-microsite .atp-compare tr,
  .rengstorff-microsite .atp-compare td {
    display: block;
    width: 100%;
  }

  .rengstorff-microsite .atp-compare thead {
    display: none;
  }

  .rengstorff-microsite .atp-compare tr {
    border-bottom: 6px solid #eef3ee;
    padding: 1.25rem 1.5rem;
  }

  .rengstorff-microsite .atp-compare tbody tr:last-child {
    border-bottom: 0;
  }

  .rengstorff-microsite .atp-compare td {
    border-bottom: 0;
    padding: 0.55rem 0 0;
  }

  .rengstorff-microsite .atp-compare td:first-child {
    padding-top: 0;
  }

  .rengstorff-microsite .atp-compare__num-col {
    text-align: left;
    width: auto;
  }

  .rengstorff-microsite .atp-compare td[data-label]::before {
    color: #4e745c;
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
  }
}

/* Stage 3: final decision record -- structural placeholder only.
   Same restrained "documented gap" treatment as the pending evidence
   frame above, ready to hold the actual Council motion/direction once
   available rather than inferring it from the staff recommendations. */
.rengstorff-microsite .atp-meeting__council-pending {
  background: #f9f3e6;
  border: 1px dashed #c9a86a;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

.rengstorff-microsite .atp-meeting__council-pending p {
  color: #6b5423 !important;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

/* Sources / provenance strip at the foot of the meeting section --
   reuses .evidence-nav-grid/.evidence-nav-card as-is (already generic,
   used elsewhere on the site) for real links, combined with the
   sitewide .pending class for the two references that don't have a
   verified URL yet. */
.rengstorff-microsite .atp-meeting__sources {
  margin-top: 2.5rem;
}

.rengstorff-microsite .atp-meeting__sources-label {
  color: #4e745c !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem !important;
  text-transform: uppercase;
}

/* Cross-reference line on the Council Adoption page, pointing back to
   the coalition's earlier rounds tracked on the Community Advocacy
   page -- small and quiet, a pointer rather than a callout. */
.rengstorff-microsite .atp-meeting__crossref {
  color: #6e8577 !important;
  font-size: 0.85rem !important;
  font-style: italic;
  margin: 1.25rem 0 0 !important;
  max-width: 44rem;
}

.rengstorff-microsite .atp-meeting__crossref a {
  color: #4e8f6a !important;
}

/* =========================================================
   Table 5 -- "How projects are prioritized" scoring framework.
   Each category keeps its own icon color (matching the source
   Table 5 graphic) rather than the page's single green accent, since
   the whole point of the row is to distinguish five categories at a
   glance. Point VALUES (32/27/22/10/9) are the real 100-point scale;
   bar fill WIDTHS are set inline per row normalized against the
   largest category (32 = 100%) purely so the five weights are easy to
   compare visually -- the numbers, not the bars, carry the "out of
   100" meaning.
   ========================================================= */

.rengstorff-microsite .atp-priority__deck {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #3f7a56 !important;
  letter-spacing: 0.01em;
  margin: 0 0 0.85rem 0 !important;
}

.rengstorff-microsite .atp-priority__cols {
  display: flex;
  gap: 2rem;
  margin: 1.75rem 0 0.5rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #d4e2d7;
}

.rengstorff-microsite .atp-priority__colhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #748076;
}

.rengstorff-microsite .atp-priority__colhead--points {
  flex: 0 0 340px;
}

.rengstorff-microsite .atp-priority__colhead--measures {
  flex: 1;
}

.rengstorff-microsite .atp-priority__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-priority-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e4ebe4;
}

.rengstorff-microsite .atp-priority-row:last-child {
  border-bottom: none;
}

.rengstorff-microsite .atp-priority-row__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.rengstorff-microsite .atp-priority-row__icon--safety {
  background: #f6dede;
  color: #a34848;
}

.rengstorff-microsite .atp-priority-row__icon--access {
  background: #d9ecd9;
  color: #3f7a56;
}

.rengstorff-microsite .atp-priority-row__icon--mobility {
  background: #dbe6ef;
  color: #3d6c8f;
}

.rengstorff-microsite .atp-priority-row__icon--feasibility {
  background: #f2e9d0;
  color: #8a6d2f;
}

.rengstorff-microsite .atp-priority-row__icon--sustainability {
  background: #e3ecdc;
  color: #5c7a3f;
}

.rengstorff-microsite .atp-priority-row__score {
  flex: 0 0 340px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.65rem;
  padding-top: 0.15rem;
}

.rengstorff-microsite .atp-priority-row__num {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.9rem;
  color: #16412e;
  line-height: 1;
}

.rengstorff-microsite .atp-priority-row__unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: #748076;
}

.rengstorff-microsite .atp-priority-row__bar {
  flex: 1 1 100%;
  height: 18px;
  border-radius: 999px;
  background: #e4ebe4;
  overflow: hidden;
}

.rengstorff-microsite .atp-priority-row__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3f7a56;
}

.rengstorff-microsite .atp-priority-row__meta {
  flex: 1;
  min-width: 0;
  padding-top: 0.15rem;
}

.rengstorff-microsite .atp-priority-row__title {
  display: block;
  margin: 0 0 0.35rem 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #16412e;
}

.rengstorff-microsite .atp-priority-row__desc {
  display: block;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #3c463e;
}

/* ---------- Per-category "View scoring details" disclosure ---------- */

.rengstorff-microsite .atp-priority-row__toggle {
  flex-basis: 100%;
  margin: 0.9rem 0 0 calc(52px + 1.25rem);
  padding: 0.15rem 0.1rem;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #3f7a56;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
}

.rengstorff-microsite .atp-priority-row__toggle:hover {
  color: #235939;
  text-decoration: underline;
}

.rengstorff-microsite .atp-priority-row__toggle:focus-visible {
  outline: 2px solid #3f7a56;
  outline-offset: 3px;
  border-radius: 3px;
}

.rengstorff-microsite .atp-priority-row__chevron {
  display: inline-block;
  font-size: 0.75em;
  transition: transform 0.15s ease;
}

.rengstorff-microsite .atp-priority-row__toggle[aria-expanded="true"] .atp-priority-row__chevron {
  transform: rotate(180deg);
}

.rengstorff-microsite .atp-priority-row__details {
  flex-basis: 100%;
  margin: 1.1rem 0 0 calc(52px + 1.25rem);
  padding-top: 1.1rem;
  border-top: 1px dashed #d4e2d7;
}

.rengstorff-microsite .atp-priority-row__details[hidden] {
  display: none;
}

.rengstorff-microsite .atp-priority-row__details-source {
  margin: 1.1rem 0 0 0 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a978c !important;
}

.rengstorff-microsite .atp-priority-crit + .atp-priority-crit {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid #eef2ee;
}

.rengstorff-microsite .atp-priority-crit__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.rengstorff-microsite .atp-priority-crit__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #16412e;
}

.rengstorff-microsite .atp-priority-crit__max {
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: #748076;
  white-space: nowrap;
}

.rengstorff-microsite .atp-priority-crit__source {
  margin: 0.3rem 0 0 0 !important;
  font-size: 0.78rem !important;
  color: #8a978c !important;
}

.rengstorff-microsite .atp-priority-crit__note {
  margin: 0.5rem 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #3c463e !important;
}

.rengstorff-microsite .atp-priority-crit__thresholds {
  margin: 0.65rem 0 0 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-priority-crit__threshold {
  display: flex;
  gap: 0.85rem;
  padding: 0.3rem 0;
}

.rengstorff-microsite .atp-priority-crit__threshold .atp-priority-crit__score {
  flex: none;
  width: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #16704d;
}

.rengstorff-microsite .atp-priority-crit__desc {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #3c463e;
}

.rengstorff-microsite .atp-priority__footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #eef4ee;
  border: 1px solid #d4e2d7;
  border-radius: 16px;
}

.rengstorff-microsite .atp-priority__footer-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dbe6df;
  color: #3f7a56;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.rengstorff-microsite .atp-priority__footer-text {
  flex: 1;
  min-width: 0;
}

.rengstorff-microsite .atp-priority__footer-title {
  margin: 0 0 0.35rem 0 !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #16412e !important;
}

.rengstorff-microsite .atp-priority__footer-text p {
  margin: 0 0 0.2rem 0 !important;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #3c463e !important;
}

.rengstorff-microsite .atp-priority__footer-source {
  margin-top: 0.4rem !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a978c !important;
}

.rengstorff-microsite .atp-priority__footer-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: #cdead1;
  font-size: 0.88rem;
  font-weight: 700;
  color: #16412e !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.rengstorff-microsite .atp-priority__footer-cta:hover,
.rengstorff-microsite .atp-priority__footer-cta:focus-visible {
  background: #b8dcbe;
}

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-priority__cols {
    display: none;
  }

  .rengstorff-microsite .atp-priority-row {
    flex-wrap: wrap;
  }

  .rengstorff-microsite .atp-priority-row__score {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rengstorff-microsite .atp-priority-row__meta {
    flex: 1 1 100%;
    padding-top: 0.85rem;
  }

  .rengstorff-microsite .atp-priority-row__toggle,
  .rengstorff-microsite .atp-priority-row__details {
    margin-left: 0;
  }

  .rengstorff-microsite .atp-priority__footer {
    flex-wrap: wrap;
  }

  .rengstorff-microsite .atp-priority__footer-cta {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   "Where are the 100 points?" -- same 17 criteria as Table 5 above,
   regrouped by weight rather than by category. Category color pairs
   here are copied verbatim from .atp-priority-row__icon--* above so
   one category keeps exactly one color for the whole ATP page. The
   three point groups (55 / 22.5 / 22.5) are deliberately left
   uncolored (neutral ink) -- color's only job on this page is category.
   ========================================================= */

.rengstorff-microsite .atp-points {
  background: #ffffff;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 1.75rem;
}

.rengstorff-microsite .atp-points__head {
  max-width: none;
}

.rengstorff-microsite .atp-points__title {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #14181a !important;
  margin: 0 0 0.35rem 0 !important;
}

.rengstorff-microsite .atp-points__subtitle {
  font-size: 0.94rem !important;
  line-height: 1.45;
  color: #4a5650 !important;
  margin: 0 0 0.25rem 0 !important;
}

.rengstorff-microsite .atp-points__subtitle em {
  font-style: italic;
}

.rengstorff-microsite .atp-points__source {
  font-size: 0.76rem !important;
  color: #8a978c !important;
  margin: 0 !important;
}

/* ---------- Compact two-column analytical panel ---------- */

.rengstorff-microsite .atp-points__panel {
  display: grid;
  grid-template-columns: minmax(150px, 30%) 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid #dde6de;
}

.rengstorff-microsite .atp-points__stat-num {
  display: block;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #14181a;
}

.rengstorff-microsite .atp-points__stat-unit {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #748076;
}

.rengstorff-microsite .atp-points__stat-desc {
  margin: 0.6rem 0 0 0 !important;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #3c463e !important;
}

.rengstorff-microsite .atp-points__stat-sub {
  margin: 0.5rem 0 0 0 !important;
  padding-top: 0.5rem;
  border-top: 1px solid #eef2ee;
  font-size: 0.8rem !important;
  color: #7c8a7e !important;
}

.rengstorff-microsite .atp-points__stat-sub strong {
  color: #3c463e !important;
}

.rengstorff-microsite .atp-points__row-head {
  display: grid;
  grid-template-columns: 3rem 1fr minmax(130px, 170px);
  gap: 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #d4e2d7;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #748076;
}

.rengstorff-microsite .atp-points__row {
  display: grid;
  grid-template-columns: 3rem 1fr minmax(130px, 170px);
  gap: 0.85rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid #eef2ee;
}

.rengstorff-microsite .atp-points__more .atp-points__row:last-child {
  border-bottom: none;
}

.rengstorff-microsite .atp-points__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: #14181a;
}

.rengstorff-microsite .atp-points__name {
  font-size: 0.85rem;
  font-weight: 400;
  color: #23281f;
}

.rengstorff-microsite .atp-points__cat {
  display: inline-block;
  width: fit-content;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}

.rengstorff-microsite .atp-points__cat--safety {
  background: #f6dede;
  color: #a34848 !important;
}

.rengstorff-microsite .atp-points__cat--access {
  background: #d9ecd9;
  color: #3f7a56 !important;
}

.rengstorff-microsite .atp-points__cat--mobility {
  background: #dbe6ef;
  color: #3d6c8f !important;
}

.rengstorff-microsite .atp-points__cat--feasibility {
  background: #f2e9d0;
  color: #8a6d2f !important;
}

.rengstorff-microsite .atp-points__cat--sustainability {
  background: #e3ecdc;
  color: #5c7a3f !important;
}

.rengstorff-microsite .atp-points__threshold {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.rengstorff-microsite .atp-points__threshold-line {
  flex: 1;
  height: 1px;
  background-image: repeating-linear-gradient(to right, #b7c3ba 0, #b7c3ba 4px, transparent 4px, transparent 8px);
}

.rengstorff-microsite .atp-points__threshold-pts {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  color: #748076;
  white-space: nowrap;
}

.rengstorff-microsite .atp-points__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0 0;
  padding: 0.55rem 0.3rem;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  color: #16704d;
  cursor: pointer;
}

.rengstorff-microsite .atp-points__toggle:hover {
  color: #0f5a3d;
  text-decoration: underline;
}

.rengstorff-microsite .atp-points__toggle:focus-visible {
  outline: 2px solid #16704d;
  outline-offset: 2px;
  border-radius: 3px;
}

.rengstorff-microsite .atp-points__chevron {
  display: inline-block;
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}

.rengstorff-microsite .atp-points__toggle[aria-expanded="true"] .atp-points__chevron {
  transform: rotate(180deg);
}

.rengstorff-microsite .atp-points__more[hidden] {
  display: none;
}

/* ---------- Single-line takeaway strip ---------- */

.rengstorff-microsite .atp-points__takeaway {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  background: #f5f8f4;
  border: 1px solid #e3e9e2;
  border-radius: 8px;
  min-height: 50px;
}

.rengstorff-microsite .atp-points__takeaway .fas {
  flex: none;
  color: #5c7a3f;
  font-size: 0.85rem;
}

.rengstorff-microsite .atp-points__takeaway p {
  margin: 0 !important;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #3c463e !important;
}

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-points__panel {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .rengstorff-microsite .atp-points__row-head {
    display: none;
  }

  .rengstorff-microsite .atp-points__row {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    grid-template-areas: "value name" ". cat";
    column-gap: 0.6rem;
    row-gap: 0.3rem;
    align-items: baseline;
    padding: 0.5rem 0;
  }

  .rengstorff-microsite .atp-points__value {
    grid-area: value;
  }

  .rengstorff-microsite .atp-points__name {
    grid-area: name;
    min-width: 0;
  }

  .rengstorff-microsite .atp-points__cat {
    grid-area: cat;
    justify-self: start;
  }
}

/* =========================================================
   MVATP Scoring Criteria Framework -- compact accordion redesign.
   Replaces the old tall .atp-priority layout on the main ATP page
   (that markup/CSS is kept below, unused here, because the detailed
   per-criterion threshold breakdown moved to its own subpage,
   scoring-criteria/, which still renders with it verbatim).

   Cognitive goal: at a glance, 100 points -> 17 criteria -> 5
   categories -> relative weights. Category rows are the primary
   information and stay compact (~72px collapsed) with a redundant
   point value + proportional bar (literal percent-of-100, not
   normalized to the largest category) so the number and the bar tell
   the same story two ways. Individual criteria are progressive
   disclosure only -- collapsed by default, revealed per-row on click,
   independently (not an exclusive accordion), because the whole
   point of the row list is to keep all five weights comparable at
   once even while one is expanded. Category colors are the exact
   same swatches used everywhere else on this page
   (.atp-priority-row__icon--* / .atp-points__cat--*). ---------- */

.rengstorff-microsite .atp-scoring {
  background: #ffffff;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 1.4rem;
}

.rengstorff-microsite .atp-scoring__title {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 2.4vw, 2rem) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #14181a !important;
  margin: 0 0 0.4rem 0 !important;
}

.rengstorff-microsite .atp-scoring__deck {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #3f7a56 !important;
  margin: 0 0 0.5rem 0 !important;
}

.rengstorff-microsite .atp-scoring__intro {
  font-size: 1rem !important;
  line-height: 1.5;
  color: #4a5650 !important;
  max-width: 48rem;
  margin: 0 !important;
}

.rengstorff-microsite .atp-scoring__list {
  margin: 1rem 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rengstorff-microsite .atp-scoring__item {
  border: 1px solid #e4ebe4;
  border-radius: 10px;
  background: #fafcfa;
  overflow: hidden;
}

.rengstorff-microsite .atp-scoring__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0.55rem 1rem;
  min-height: 64px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rengstorff-microsite .atp-scoring__row:hover {
  background: #f2f6f2;
}

.rengstorff-microsite .atp-scoring__row:focus-visible {
  outline: 2px solid #16704d;
  outline-offset: -2px;
}

.rengstorff-microsite .atp-scoring__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.rengstorff-microsite .atp-scoring__icon--safety {
  background: #f6dede;
  color: #a34848;
}

.rengstorff-microsite .atp-scoring__icon--access {
  background: #d9ecd9;
  color: #3f7a56;
}

.rengstorff-microsite .atp-scoring__icon--mobility {
  background: #dbe6ef;
  color: #3d6c8f;
}

.rengstorff-microsite .atp-scoring__icon--sustainability {
  background: #e3ecdc;
  color: #5c7a3f;
}

.rengstorff-microsite .atp-scoring__icon--feasibility {
  background: #f2e9d0;
  color: #8a6d2f;
}

.rengstorff-microsite .atp-scoring__score {
  flex: none;
  width: 130px;
}

.rengstorff-microsite .atp-scoring__value {
  display: block;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #14181a;
  line-height: 1;
}

.rengstorff-microsite .atp-scoring__unit {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a978c;
}

.rengstorff-microsite .atp-scoring__bar {
  display: block;
  margin-top: 0.35rem;
  height: 6px;
  border-radius: 999px;
  background: #e4ebe4;
  overflow: hidden;
}

.rengstorff-microsite .atp-scoring__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3f7a56;
}

.rengstorff-microsite .atp-scoring__meta {
  flex: 1;
  min-width: 0;
}

.rengstorff-microsite .atp-scoring__name {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: #16412e;
}

.rengstorff-microsite .atp-scoring__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #748076;
}

.rengstorff-microsite .atp-scoring__chevron {
  flex: none;
  font-size: 1.02rem;
  color: #9fb5a5;
  transition: transform 0.15s ease;
}

.rengstorff-microsite .atp-scoring__row[aria-expanded="true"] .atp-scoring__chevron {
  transform: rotate(180deg);
}

.rengstorff-microsite .atp-scoring__panel {
  padding: 0 1rem 1rem calc(1rem + 36px + 1.1rem);
  border-top: 1px solid #e4ebe4;
  margin: 0 1rem;
}

.rengstorff-microsite .atp-scoring__panel[hidden] {
  display: none;
}

.rengstorff-microsite .atp-scoring__panel-label {
  margin: 0.75rem 0 0.5rem 0 !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a978c !important;
}

.rengstorff-microsite .atp-scoring__crit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-scoring__crit {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-areas: "pts name" ". desc";
  column-gap: 0.75rem;
  row-gap: 0.1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #eef2ee;
}

.rengstorff-microsite .atp-scoring__crit:last-child {
  border-bottom: none;
}

.rengstorff-microsite .atp-scoring__crit-pts {
  grid-area: pts;
  font-weight: 700;
  font-size: 0.88rem;
  color: #16704d;
  font-variant-numeric: tabular-nums;
}

.rengstorff-microsite .atp-scoring__crit-name {
  grid-area: name;
  font-weight: 700;
  font-size: 0.9rem;
  color: #16412e;
}

.rengstorff-microsite .atp-scoring__crit-desc {
  grid-area: desc;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #667069;
}

.rengstorff-microsite .atp-scoring__panel-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #16704d !important;
  text-decoration: none !important;
}

.rengstorff-microsite .atp-scoring__panel-link:hover {
  text-decoration: underline !important;
}

.rengstorff-microsite .atp-scoring__footer {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: #8a978c;
}

.rengstorff-microsite .atp-scoring__footer p {
  margin: 0 !important;
  color: #8a978c !important;
}

.rengstorff-microsite .atp-scoring__footer a {
  color: #16704d;
  font-weight: 700;
}

.rengstorff-microsite .atp-scoring__footer-icon {
  flex: none;
  color: #9fb5a5;
  font-size: 0.78rem;
}

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-scoring__row {
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 0;
  }

  .rengstorff-microsite .atp-scoring__score {
    width: 76px;
  }

  .rengstorff-microsite .atp-scoring__panel {
    padding-left: 1rem;
  }

  .rengstorff-microsite .atp-scoring__crit {
    grid-template-columns: 2rem 1fr;
  }
}

/* =========================================================
   NEW PAGE ARCHITECTURE -- everything below this line is new,
   unlocked component work for the page-level redesign. It does not
   modify, extend, or override any selector under .atp-priority or
   .atp-points (the two locked components above) -- those stay exactly
   as shipped. New components reuse the same five category colors as
   .atp-priority-row__icon--* / .atp-points__cat--* so category color
   stays a single stable mapping across the whole page.
   ========================================================= */

/* ---------- "Explore the Plan" -- calm source-document index, moved
   to the bottom of the page. Same white-panel treatment as Vision and
   "Where are the 100 points?" above; rows, not cards -- number/letter
   is a subtle anchor, not a graphic. ---------- */

.rengstorff-microsite .atp-docs {
  background: #ffffff;
  padding: 3.5rem clamp(1.25rem, 4vw, 3rem) 3.75rem;
}

.rengstorff-microsite .atp-docs__title {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #14181a !important;
  margin: 0 0 0.85rem 0 !important;
}

.rengstorff-microsite .atp-docs__intro {
  font-size: 1.08rem !important;
  line-height: 1.6;
  color: #4a5650 !important;
  max-width: 42rem;
  margin: 0 !important;
}

.rengstorff-microsite .atp-docs__group-label {
  margin: 3rem 0 0.5rem 0 !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4e745c !important;
}

.rengstorff-microsite .atp-docs__group-label--appendices {
  margin-top: 3.25rem !important;
}

.rengstorff-microsite .atp-docs__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-docs__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  grid-template-areas:
    "num title action"
    "num desc action";
  column-gap: 1.5rem;
  row-gap: 0.3rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid #eef2ee;
}

.rengstorff-microsite .atp-docs__row:last-child {
  border-bottom: none;
}

.rengstorff-microsite .atp-docs__head {
  display: contents;
}

.rengstorff-microsite .atp-docs__num {
  grid-area: num;
  align-self: start;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #9fb5a5;
  padding-top: 0.15rem;
}

.rengstorff-microsite .atp-docs__item-title {
  grid-area: title;
  font-weight: 700;
  font-size: 1.05rem;
  color: #16412e;
}

.rengstorff-microsite .atp-docs__desc {
  grid-area: desc;
  margin: 0 !important;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #526258 !important;
}

.rengstorff-microsite .atp-docs__action {
  grid-area: action;
  justify-self: end;
  font-weight: 700;
  font-size: 0.92rem;
  color: #16704d !important;
  white-space: nowrap;
  text-decoration: none !important;
}

.rengstorff-microsite .atp-docs__action:hover,
.rengstorff-microsite .atp-docs__action:focus-visible {
  text-decoration: underline !important;
}

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-docs__row {
    display: block;
    padding: 1.1rem 0;
  }

  .rengstorff-microsite .atp-docs__head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
  }

  .rengstorff-microsite .atp-docs__desc {
    display: block;
    margin-bottom: 0.6rem !important;
  }

  .rengstorff-microsite .atp-docs__action {
    display: inline-block;
  }
}

/* ---------- A small solid CTA for real, working links (distinct from
   .connected-project-cta, whose dashed border + default cursor signal
   "not available yet" -- these link somewhere real) ---------- */

.rengstorff-microsite .atp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  background: #16704d;
  color: #ffffff !important;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none !important;
}

.rengstorff-microsite .atp-cta:hover,
.rengstorff-microsite .atp-cta:focus-visible {
  background: #0f5a3d;
}

/* ---------- 02. Vision & guiding principles ----------
   White background so this reads as a distinct panel, same treatment
   as the "Where are the 100 points?" figure elsewhere on this page. */

.rengstorff-microsite .atp-vision {
  background: #ffffff;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 1.75rem;
}

.rengstorff-microsite .atp-vision__title {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.375rem, 2.7vw, 2.625rem) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #14181a !important;
  margin: 0 0 0.5rem 0 !important;
}

.rengstorff-microsite .atp-vision__intro {
  font-size: 1.0625rem !important;
  line-height: 1.5;
  color: #4a5650 !important;
  max-width: 47.5rem;
  margin: 0 !important;
}

.rengstorff-microsite .atp-vision__statement {
  margin: 1.5rem 0 0 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid #16704d;
  background: #f2f7f2;
}

.rengstorff-microsite .atp-vision__statement p {
  margin: 0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
  color: #16412e !important;
}

.rengstorff-microsite .atp-vision__statement cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #748076;
}

.rengstorff-microsite .atp-vision__divider {
  margin: 1.5rem 0 0 0;
  border: none;
  border-top: 1px solid #dde6de;
}

.rengstorff-microsite .atp-vision__label {
  margin: 1rem 0 0.5rem 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4e745c !important;
}

.rengstorff-microsite .atp-vision__principles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-vision__principle-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.rengstorff-microsite .atp-vision__principle-tag--safety {
  background: #f6dede;
  color: #a34848 !important;
}

.rengstorff-microsite .atp-vision__principle-tag--access {
  background: #d9ecd9;
  color: #3f7a56 !important;
}

.rengstorff-microsite .atp-vision__principle-tag--mobility {
  background: #dbe6ef;
  color: #3d6c8f !important;
}

.rengstorff-microsite .atp-vision__principle-tag--sustainability {
  background: #e3ecdc;
  color: #5c7a3f !important;
}

.rengstorff-microsite .atp-vision__principle-tag--neutral {
  background: #ece6f7;
  color: #6b4fa0 !important;
}

.rengstorff-microsite .atp-vision__note {
  margin: 0.85rem 0 0 0 !important;
  font-size: 0.8rem !important;
  color: #6e8577 !important;
  max-width: 48rem;
}

/* ---------- 04. Compact network-to-projects process strip ---------- */

.rengstorff-microsite .atp-process__steps {
  display: flex;
  align-items: stretch;
  margin: 1.5rem 0 0 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-process__step {
  flex: 1 1 0;
  min-width: 8rem;
  padding: 0.8rem 0.75rem;
  border: 1px solid #d4e2d7;
  border-radius: 6px;
  background: #f5f8f4;
  text-align: left;
}

.rengstorff-microsite .atp-process__number { display: block; color: #16704d; font-size: 1.35rem; font-weight: 800; line-height: 1; }

.rengstorff-microsite .atp-process__label {
  display: block;
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #16412e;
}

.rengstorff-microsite .atp-process__label a {
  color: #16412e;
}

.rengstorff-microsite .atp-process__desc {
  display: none;
}

.rengstorff-microsite .atp-process__arrow {
  align-self: center;
  padding: 0 0.35rem;
  color: #9fb5a5;
  font-size: 1.1rem;
  line-height: 1;
}

/* ---------- Priority bikeway results: summary first, segments on demand ---------- */
.rengstorff-microsite .atp-bikeways { margin-top: 2rem; }
.rengstorff-microsite .atp-bikeways h3 { margin: 0 0 0.25rem; color: #16412e; font-size: 1.35rem; }
.rengstorff-microsite .atp-bikeways__source { margin: 0 0 0.9rem !important; color: #748076 !important; font-size: 0.75rem !important; }
.rengstorff-microsite .atp-bikeways__head,
.rengstorff-microsite .atp-bikeways__row,
.rengstorff-microsite .atp-bikeways__total { display: grid; grid-template-columns: minmax(12rem, 1.8fr) repeat(5, minmax(5.6rem, 0.8fr)) 1.2rem; gap: 0.7rem; align-items: center; }
.rengstorff-microsite .atp-bikeways__head { padding: 0.45rem 0.8rem; color: #526258; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.rengstorff-microsite .atp-bikeways__list { margin: 0; padding: 0; list-style: none; }
.rengstorff-microsite .atp-bikeways__item { margin: 0 0 0.45rem; border-left: 5px solid #1d9168; border-radius: 4px; overflow: hidden; background: #eaf6ef; }
.rengstorff-microsite .atp-bikeways__item--class-iii { border-color: #1878d1; background: #e9f3fc; }
.rengstorff-microsite .atp-bikeways__item--class-ii { border-color: #8c61c4; background: #f1ebfa; }
.rengstorff-microsite .atp-bikeways__row { width: 100%; min-height: 4.6rem; padding: 0.65rem 0.8rem; border: 0; background: transparent; color: #12251a; font: inherit; font-size: 0.88rem; font-weight: 700; text-align: left; cursor: pointer; }
.rengstorff-microsite .atp-bikeways__row:hover { filter: brightness(0.98); }
.rengstorff-microsite .atp-bikeways__row:focus-visible { outline: 2px solid #16704d; outline-offset: -2px; }
.rengstorff-microsite .atp-bikeways__class strong { display: block; font-size: 1.08rem; }
.rengstorff-microsite .atp-bikeways__class span { display: block; margin-top: 0.15rem; color: #31543e; font-size: 0.73rem; font-weight: 600; }
.rengstorff-microsite .atp-bikeways__chevron { justify-self: end; color: #183c2a; transition: transform 0.15s ease; }
.rengstorff-microsite .atp-bikeways__row[aria-expanded="true"] .atp-bikeways__chevron { transform: rotate(180deg); }
.rengstorff-microsite .atp-bikeways__panel { padding: 0.7rem 0.8rem 0.9rem; border-top: 1px solid rgba(22, 65, 46, 0.15); background: rgba(255, 255, 255, 0.55); }
.rengstorff-microsite .atp-bikeways__panel[hidden] { display: none; }
.rengstorff-microsite .atp-bikeways__panel-note { margin: 0 0 0.45rem !important; color: #526258 !important; font-size: 0.75rem !important; }
.rengstorff-microsite .atp-bikeways__segments { margin: 0; padding: 0; list-style: none; }
.rengstorff-microsite .atp-bikeways__segments li { display: grid; grid-template-columns: minmax(10rem, 1.2fr) minmax(15rem, 2fr) repeat(4, minmax(4rem, 0.55fr)); gap: 0.65rem; padding: 0.4rem 0; border-top: 1px solid rgba(22, 65, 46, 0.1); font-size: 0.75rem; }
.rengstorff-microsite .atp-bikeways__total { grid-template-columns: minmax(12rem, 1.8fr) repeat(5, minmax(5.6rem, 0.8fr)); margin-top: 0.7rem; padding: 0.8rem; border-radius: 4px; background: #eceeef; font-size: 0.88rem; }

@media screen and (max-width: 900px) {
  .rengstorff-microsite .atp-bikeways__head, .rengstorff-microsite .atp-bikeways__row { grid-template-columns: minmax(10rem, 1.5fr) repeat(5, minmax(4.5rem, 0.8fr)) 1rem; gap: 0.4rem; font-size: 0.76rem; }
}

/* ---------- 06. Priority projects (unchanged) ---------- */

/* ---------- 07. Policies & programs -- categorized accordion.
   Modeled closely on .atp-scoring's row/panel pattern (same compact
   density, same independent-toggle behavior), but with its own icon
   color palette: these 7 policy/program categories are a different
   taxonomy from the 5 ATP scoring categories used elsewhere on this
   page, so reusing those exact colors here would wrongly imply they
   are the same classification. The one deliberate exception is
   Greening / Tree Canopy, which reuses the Sustainability &
   Biodiversity green -- that overlap is real, not coincidental. ---------- */

.rengstorff-microsite .atp-polcat__orient {
  margin: 0.5rem 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #667069 !important;
}

.rengstorff-microsite .atp-polcat__list {
  margin: 1.1rem 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rengstorff-microsite .atp-polcat__item {
  border: 1px solid #e4ebe4;
  border-radius: 10px;
  background: #fafcfa;
  overflow: hidden;
}

.rengstorff-microsite .atp-polcat__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0.55rem 1rem;
  min-height: 64px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rengstorff-microsite .atp-polcat__row:hover {
  background: #f2f6f2;
}

.rengstorff-microsite .atp-polcat__row:focus-visible {
  outline: 2px solid #16704d;
  outline-offset: -2px;
}

.rengstorff-microsite .atp-polcat__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
}

.rengstorff-microsite .atp-polcat__icon--street-safety {
  background: #f7dcd5;
  color: #a1462e;
}

.rengstorff-microsite .atp-polcat__icon--bicycling {
  background: #dcebf0;
  color: #2d6e82;
}

.rengstorff-microsite .atp-polcat__icon--walking {
  background: #fbe4d5;
  color: #a15c2e;
}

.rengstorff-microsite .atp-polcat__icon--saferoutes {
  background: #f7ecc9;
  color: #8a7422;
}

.rengstorff-microsite .atp-polcat__icon--design {
  background: #e2e8f2;
  color: #3c5a80;
}

.rengstorff-microsite .atp-polcat__icon--tdm {
  background: #eae2f6;
  color: #6a4f99;
}

.rengstorff-microsite .atp-polcat__icon--staff {
  background: #e6eaec;
  color: #4a5d68;
}

.rengstorff-microsite .atp-polcat__icon--greening {
  background: #e3ecdc;
  color: #5c7a3f;
}

.rengstorff-microsite .atp-polcat__icon--ops {
  background: #f8e0e3;
  color: #a34a5a;
}

.rengstorff-microsite .atp-polcat__icon--measure {
  background: #dceae7;
  color: #2f6e63;
}

.rengstorff-microsite .atp-polcat__meta {
  flex: 1;
  min-width: 0;
}

.rengstorff-microsite .atp-polcat__title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rengstorff-microsite .atp-polcat__name {
  font-weight: 700;
  font-size: 0.98rem;
  color: #16412e;
}

.rengstorff-microsite .atp-polcat__count {
  font-size: 0.76rem;
  color: #8a978c;
}

.rengstorff-microsite .atp-polcat__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #748076;
}

.rengstorff-microsite .atp-polcat__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #16704d;
  white-space: nowrap;
}

.rengstorff-microsite .atp-polcat__chevron {
  font-size: 0.7rem;
  color: #9fb5a5;
  transition: transform 0.15s ease;
}

.rengstorff-microsite .atp-polcat__row[aria-expanded="true"] .atp-polcat__chevron {
  transform: rotate(180deg);
}

.rengstorff-microsite .atp-polcat__panel {
  padding: 0 1rem 1rem calc(1rem + 36px + 1.1rem);
  border-top: 1px solid #e4ebe4;
  margin: 0 1rem;
}

.rengstorff-microsite .atp-polcat__panel[hidden] {
  display: none;
}

.rengstorff-microsite .atp-polcat__policies {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-polcat__policies li {
  padding: 0.6rem 0;
  border-bottom: 1px solid #eef2ee;
}

.rengstorff-microsite .atp-polcat__policies li:last-child {
  border-bottom: none;
}

.rengstorff-microsite .atp-polcat__policy-name {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: #16412e;
}

.rengstorff-microsite .atp-polcat__policy-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #526258;
}

.rengstorff-microsite .atp-polcat__footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #f5f8f4;
  border: 1px solid #e3e9e2;
  border-radius: 8px;
}

.rengstorff-microsite .atp-polcat__footer .fa-info-circle {
  flex: none;
  color: #9fb5a5;
  font-size: 0.85rem;
}

.rengstorff-microsite .atp-polcat__footer-text {
  flex: 1;
  min-width: 0;
}

.rengstorff-microsite .atp-polcat__footer-text p {
  margin: 0 !important;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #3c463e !important;
}

.rengstorff-microsite .atp-polcat__footer-sub {
  color: #8a978c !important;
}

.rengstorff-microsite .atp-polcat__footer-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid #16704d;
  border-radius: 999px;
  background: #eef4ee;
  color: #16704d !important;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.rengstorff-microsite .atp-polcat__footer-link:hover,
.rengstorff-microsite .atp-polcat__footer-link:focus-visible {
  background: #dfeade;
}

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-polcat__row {
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 0;
  }

  .rengstorff-microsite .atp-polcat__action-label {
    display: none;
  }

  .rengstorff-microsite .atp-polcat__panel {
    padding-left: 1rem;
  }

  .rengstorff-microsite .atp-polcat__footer {
    flex-wrap: wrap;
  }

  .rengstorff-microsite .atp-polcat__footer-link {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 10. Measuring progress -- simple outcome blocks, still
   used by the section below Green Complete Streets even after that
   section's redesign (kept minimal now that the status pill/question/
   list/source variants live under .atp-gce-table__* instead). ---------- */

.rengstorff-microsite .atp-gcs__outcome {
  max-width: 56rem;
  padding: 1.25rem 0;
  border-top: 1px solid #dde6de;
}

.rengstorff-microsite .atp-gcs__outcome:first-of-type {
  margin-top: 1.5rem;
}

.rengstorff-microsite .atp-gcs__outcome-head h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
}

/* ---------- 08. Green Complete Streets -- hero, "what makes a
   Green Complete Street" diagram, and the element table. Card colors
   reuse the site's existing category palette (safety=red, mobility/
   accessibility=blue, sustainability/trees/biodiversity=green,
   equity/heat=tan-orange) so this reads as one system with the
   Scoring Framework section above it, not a separate visual
   language. ---------- */

.rengstorff-microsite .atp-gce {
  background: #ffffff;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 1.4rem;
}

/* -- Hero: copy + card/photo aside -- */

.rengstorff-microsite .atp-gce-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 1.5rem;
}

.rengstorff-microsite .atp-gce-hero__copy h2 {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #14181a !important;
  margin: 0 0 0.9rem 0 !important;
}

.rengstorff-microsite .atp-gce-hero .atp-gce-hero__copy p {
  font-size: 1rem !important;
  line-height: 1.6;
  color: #4a5650 !important;
  margin: 0 0 0.9rem 0 !important;
}

.rengstorff-microsite .atp-gce-hero .atp-gce-hero__copy p:last-child {
  margin-bottom: 0 !important;
}

.rengstorff-microsite .atp-gce-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rengstorff-microsite .atp-gce-hero__card {
  background: #16412e;
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  color: #eaf3ec;
}

.rengstorff-microsite .atp-gce-hero__card p.atp-gce-hero__card-lead {
  font-weight: 800 !important;
  font-size: 1.08rem !important;
  line-height: 1.3;
  color: #ffffff !important;
  margin: 0 0 0.75rem 0 !important;
}

.rengstorff-microsite .atp-gce-hero__card p.atp-gce-hero__card-note {
  font-size: 0.86rem !important;
  font-style: italic;
  line-height: 1.5;
  color: #cfe3d5 !important;
  margin: 0 0 0.6rem 0 !important;
}

.rengstorff-microsite .atp-gce-hero__card p.atp-gce-hero__card-note:last-child {
  margin-bottom: 0 !important;
}

.rengstorff-microsite .atp-gce-hero__photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.rengstorff-microsite .atp-gce-hero__photo img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
}

/* -- "What makes a Green Complete Street?" diagram -- */

.rengstorff-microsite .atp-gce-diagram {
  margin-top: 3rem;
}

.rengstorff-microsite .atp-gce-diagram > .category-tag {
  margin-bottom: 0.6rem;
}

.rengstorff-microsite .atp-gce-diagram h2 {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #14181a !important;
  margin: 0 0 0.6rem 0 !important;
}

.rengstorff-microsite .atp-gce-diagram p.atp-gce-diagram__intro {
  font-size: 1rem !important;
  line-height: 1.55;
  color: #4a5650 !important;
  max-width: 52rem;
  margin: 0 0 1.5rem 0 !important;
}

.rengstorff-microsite .atp-gce-diagram__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0 0.55rem;
  /* Breaks out of .atp-gce's own side padding (up to 3rem each side)
     so the three cards use the full sidebar-adjusted content column
     instead of a further-inset one -- matched by .atp-gce-outcome
     below so the band stays flush with the cards above it. Doesn't
     touch .rengstorff-shell/.page-sidebar-layout, so the sidebar and
     every other section on the page are unaffected. */
  margin-left: clamp(-3rem, -4vw, -1.25rem);
  margin-right: clamp(-3rem, -4vw, -1.25rem);
}

.rengstorff-microsite .atp-gce-diagram__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 300;
  color: #9fb5a5;
  line-height: 1;
}

.rengstorff-microsite .atp-gce-card {
  border-radius: 14px;
  padding: 0.78rem 1.1rem 0.88rem;
  min-width: 0;
}

.rengstorff-microsite .atp-gce-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.rengstorff-microsite .atp-gce-card h3 {
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  line-height: 1.15;
  min-height: 2.55rem;
  margin: 0 0 0.28rem 0 !important;
}

.rengstorff-microsite .atp-gce-card p.atp-gce-card__subtitle {
  font-size: 0.82rem !important;
  line-height: 1.32;
  color: inherit !important;
  opacity: 0.75;
  margin: 0 0 0.5rem 0 !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(20, 24, 26, 0.12);
}

.rengstorff-microsite .atp-gce-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-gce-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.28;
  margin-bottom: 0.36rem;
}

.rengstorff-microsite .atp-gce-card li:last-child {
  margin-bottom: 0;
}

.rengstorff-microsite .atp-gce-card li .fas {
  flex: none;
  width: 1.1em;
  margin-top: 0.15em;
  text-align: center;
  font-size: 0.85em;
}

.rengstorff-microsite .atp-gce-card--people {
  background: #e5eef8;
  color: #1f3a54;
}

.rengstorff-microsite .atp-gce-card--people .atp-gce-card__icon {
  background: #c4dbf0;
  color: #275c8a;
}

.rengstorff-microsite .atp-gce-card--people h3 {
  color: #1f3a54 !important;
}

.rengstorff-microsite .atp-gce-card--people li .fas {
  color: #275c8a;
}

.rengstorff-microsite .atp-gce-card--climate {
  background: #e4efe2;
  color: #2c4a30;
}

.rengstorff-microsite .atp-gce-card--climate .atp-gce-card__icon {
  background: #c3ddc0;
  color: #3f7a3f;
}

.rengstorff-microsite .atp-gce-card--climate h3 {
  color: #2c4a30 !important;
}

.rengstorff-microsite .atp-gce-card--climate li .fas {
  color: #3f7a3f;
}

.rengstorff-microsite .atp-gce-card--equity {
  background: #f5ecd9;
  color: #5c4a1f;
}

.rengstorff-microsite .atp-gce-card--equity .atp-gce-card__icon {
  background: #ecdcb3;
  color: #8a6d2f;
}

.rengstorff-microsite .atp-gce-card--equity h3 {
  color: #5c4a1f !important;
}

.rengstorff-microsite .atp-gce-card--equity li .fas {
  color: #8a6d2f;
}

.rengstorff-microsite .atp-gce-diagram__arrow-down {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0;
  font-size: 1.15rem;
  color: #16412e;
}

.rengstorff-microsite .atp-gce-outcome {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #eef5ec;
  border-left: 4px solid #16412e;
  border-radius: 10px;
  padding: 0.9rem 1.5rem;
  /* Matches .atp-gce-diagram__cards' breakout so the band stays flush
     with the cards above it instead of sitting narrower. */
  margin-left: clamp(-3rem, -4vw, -1.25rem);
  margin-right: clamp(-3rem, -4vw, -1.25rem);
}

.rengstorff-microsite .atp-gce-outcome__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #16412e;
  color: #cdead1;
  font-size: 1.05rem;
}

.rengstorff-microsite .atp-gce-outcome__label {
  flex: none;
  padding-right: 1.25rem;
  border-right: 1px solid #c9d9cd;
}

.rengstorff-microsite .atp-gce-outcome__label h3 {
  font-weight: 800 !important;
  font-size: 1.08rem !important;
  color: #16412e !important;
  margin: 0 !important;
  white-space: nowrap;
}

.rengstorff-microsite .atp-gce-outcome p.atp-gce-outcome__tagline {
  font-size: 0.78rem !important;
  font-weight: 600;
  color: #4e745c !important;
  margin: 0.15rem 0 0 0 !important;
  white-space: nowrap;
}

.rengstorff-microsite .atp-gce-outcome p.atp-gce-outcome__desc {
  font-size: 0.88rem !important;
  line-height: 1.45;
  color: #3c463e !important;
  margin: 0 !important;
}

/* -- Element table -- */

.rengstorff-microsite .atp-gce-table-wrap {
  margin-top: 2.75rem;
}

.rengstorff-microsite .atp-gce-table-wrap h3 {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  color: #14181a !important;
  margin: 0 0 0.35rem 0 !important;
}

.rengstorff-microsite .atp-gce-table-wrap p.atp-gce-table__intro {
  font-size: 0.95rem !important;
  color: #4a5650 !important;
  max-width: 48rem;
  margin: 0 0 1.1rem 0 !important;
}

.rengstorff-microsite .atp-gce-table {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rengstorff-microsite .atp-gce-table__item {
  border: 1px solid #e4ebe4;
  border-radius: 10px;
  background: #fafcfa;
  overflow: hidden;
}

.rengstorff-microsite .atp-gce-table__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0.65rem 1rem;
  min-height: 64px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rengstorff-microsite .atp-gce-table__row:hover {
  background: #f2f6f2;
}

.rengstorff-microsite .atp-gce-table__row:focus-visible {
  outline: 2px solid #16704d;
  outline-offset: -2px;
}

.rengstorff-microsite .atp-gce-table__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.rengstorff-microsite .atp-gce-table__icon--safety {
  background: #f6dede;
  color: #a34848;
}

.rengstorff-microsite .atp-gce-table__icon--mobility {
  background: #dbe6ef;
  color: #3d6c8f;
}

.rengstorff-microsite .atp-gce-table__icon--accessibility {
  background: #e6def2;
  color: #6b4f96;
}

.rengstorff-microsite .atp-gce-table__icon--trees {
  background: #e3ecdc;
  color: #5c7a3f;
}

.rengstorff-microsite .atp-gce-table__icon--biodiversity {
  background: #d9ecd9;
  color: #3f7a56;
}

.rengstorff-microsite .atp-gce-table__icon--green-infra {
  background: #d6ecec;
  color: #2f7a7a;
}

.rengstorff-microsite .atp-gce-table__icon--equity {
  background: #f2e9d0;
  color: #8a6d2f;
}

.rengstorff-microsite .atp-gce-table__icon--heat {
  background: #fbe0cc;
  color: #b1591f;
}

.rengstorff-microsite .atp-gce-table__meta {
  flex: 1;
  min-width: 0;
}

.rengstorff-microsite .atp-gce-table__name {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: #16412e;
}

.rengstorff-microsite .atp-gce-table__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #748076;
}

.rengstorff-microsite .atp-gce-table__assessment {
  flex: none;
  width: 216px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.rengstorff-microsite .atp-gce-table__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* Four-tier assessment taxonomy: how far each element travels through
   implementation, not just whether the ATP mentions it. Integrated =
   strongest (carried through multiple stages); Explicit but limited =
   present but concentrated in one stage; Linked through another plan =
   substantively depends on a different City plan/process; Weak
   implementation connection = goal/criterion exists but little carries
   it into design, delivery or measurement. */

.rengstorff-microsite .atp-gce-table__assessment--integrated {
  color: #0b5c3a;
}

.rengstorff-microsite .atp-gce-table__assessment--integrated .atp-gce-table__dot {
  background: #16704d;
}

.rengstorff-microsite .atp-gce-table__assessment--explicit-limited {
  color: #6b5a37;
}

.rengstorff-microsite .atp-gce-table__assessment--explicit-limited .atp-gce-table__dot {
  background: #a67c27;
}

.rengstorff-microsite .atp-gce-table__assessment--linked {
  color: #2f5a72;
}

.rengstorff-microsite .atp-gce-table__assessment--linked .atp-gce-table__dot {
  background: #3d7ba0;
}

.rengstorff-microsite .atp-gce-table__assessment--weak {
  color: #8a4a3a;
}

.rengstorff-microsite .atp-gce-table__assessment--weak .atp-gce-table__dot {
  background: #b1591f;
}

.rengstorff-microsite .atp-gce-table__chevron {
  flex: none;
  width: 1.4rem;
  text-align: right;
  font-size: 1.02rem;
  color: #9fb5a5;
  transition: transform 0.15s ease;
  padding: 0.55rem 0;
  margin: -0.55rem 0;
}

.rengstorff-microsite .atp-gce-table__row[aria-expanded="true"] .atp-gce-table__chevron {
  transform: rotate(180deg);
}

.rengstorff-microsite .atp-gce-table__panel {
  padding: 0.15rem 1.25rem 1.25rem calc(1rem + 36px + 1.1rem);
  border-top: 1px solid #e4ebe4;
  margin: 0 1rem;
}

.rengstorff-microsite .atp-gce-table__panel[hidden] {
  display: none;
}

/* -- Evidence panel: WHAT / WHERE / CHAIN / READING -- a technical
   evidence layout, not prose. Each block is introduced by a small
   uppercase label so the hierarchy (finding -> evidence -> chain ->
   interpretation) stays legible at a glance. -- */

.rengstorff-microsite .atp-gce-evidence__block {
  margin-top: 1rem;
}

.rengstorff-microsite .atp-gce-evidence__block:first-child {
  margin-top: 0.9rem;
}

.rengstorff-microsite .atp-gce-evidence__label {
  display: block;
  font-size: 0.7rem !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a978c !important;
  margin: 0 0 0.4rem 0 !important;
}

.rengstorff-microsite .atp-gce-table__panel .atp-gce-evidence__block p {
  font-size: 0.9rem !important;
  line-height: 1.55;
  color: #3c463e !important;
  margin: 0 !important;
}

.rengstorff-microsite .atp-gce-evidence__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-gce-evidence__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.4rem 0;
  border-bottom: 1px solid #eef2ee;
}

.rengstorff-microsite .atp-gce-evidence__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rengstorff-microsite .atp-gce-evidence__type {
  flex: none;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #4e745c;
}

.rengstorff-microsite .atp-gce-evidence__sep {
  color: #b7c3ba;
}

.rengstorff-microsite .atp-gce-evidence__title {
  color: #3c463e;
  flex: 1 1 auto;
  min-width: 0;
}

.rengstorff-microsite .atp-gce-evidence__page {
  flex: none;
  color: #8a978c;
  font-size: 0.82rem;
  margin-left: auto;
  white-space: nowrap;
}

/* -- Implementation chain: GOAL -> PRIORITIZATION -> DESIGN ->
   DELIVERY -> MEASUREMENT. Strength is double-coded (fill/border
   style, not color alone): strong = solid fill; indirect = tinted
   fill, solid border; weak/absent = no fill, dashed border. -- */

.rengstorff-microsite .atp-gce-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rengstorff-microsite .atp-gce-chain__stage {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.rengstorff-microsite .atp-gce-chain__stage--strong {
  background: #cdead1;
  border: 1px solid #16704d;
  color: #0b5c3a;
}

.rengstorff-microsite .atp-gce-chain__stage--indirect {
  background: #f2e9d0;
  border: 1px solid #a67c27;
  color: #6b5a37;
}

.rengstorff-microsite .atp-gce-chain__stage--weak {
  background: none;
  border: 1px dashed #b7bfb9;
  color: #8a978c;
}

.rengstorff-microsite .atp-gce-chain__arrow {
  font-size: 0.72rem;
  color: #b7c3ba;
}

@media screen and (max-width: 900px) {
  .rengstorff-microsite .atp-gce-hero {
    grid-template-columns: 1fr;
  }

  .rengstorff-microsite .atp-gce-diagram__cards {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .rengstorff-microsite .atp-gce-diagram__plus {
    justify-self: center;
  }

  .rengstorff-microsite .atp-gce-outcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .rengstorff-microsite .atp-gce-outcome__label {
    border-right: none;
    padding-right: 0;
  }
}

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-gce-table__row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    min-height: 0;
  }

  .rengstorff-microsite .atp-gce-table__meta {
    flex: 1 1 100%;
    order: 1;
  }

  .rengstorff-microsite .atp-gce-table__assessment {
    width: auto;
    order: 2;
  }

  .rengstorff-microsite .atp-gce-table__chevron {
    order: 3;
    margin-left: auto;
  }

  .rengstorff-microsite .atp-gce-table__panel {
    padding-left: 1rem;
  }

  .rengstorff-microsite .atp-gce-evidence__page {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ---------- 13. Small closing footer -- replaces the former "How the
   plan changed" section, "What's still missing?" placeholder and the
   large Documents & Sources card grid. Deliberately minimal: one
   contextual link out to the advocacy/history subpage, one line of
   source attribution, the existing back-link. ---------- */

.rengstorff-microsite .atp-footer {
  margin-top: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid #d4ded4;
}

.rengstorff-microsite .atp-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #16704d;
}

.rengstorff-microsite .atp-footer__source {
  margin: 1rem 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #8a978c !important;
  max-width: 48rem;
}

.rengstorff-microsite .atp-footer .study-back-link {
  margin-top: 1.5rem;
}

/* =========================================================
   "On this page" -- sticky left sidebar (desktop). This used to be a
   page-scoped .atp-layout/.atp-sidebar copy of the Standard Details
   page's .sd-layout/.sd-sidebar; it's now the shared
   .page-sidebar-layout/.page-sidebar/.page-sidebar__list/
   .page-onpage-nav-mobile component in main.css (see that file),
   reused here and by the Biodiversity & Urban Forest Plan page rather
   than each page keeping its own copy. This page's HTML uses those
   shared class names directly, so nothing further is needed here.
   ========================================================= */

@media screen and (max-width: 700px) {
  .rengstorff-microsite .atp-vision__statement {
    padding: 1.25rem;
  }

  .rengstorff-microsite .atp-process__steps { flex-wrap: wrap; gap: 0.35rem; }
  .rengstorff-microsite .atp-process__step { flex: 1 1 calc(50% - 0.35rem); min-width: 0; }
  .rengstorff-microsite .atp-process__arrow { flex: 0 0 1rem; padding: 0; }
  .rengstorff-microsite .atp-bikeways__head { display: none; }
  .rengstorff-microsite .atp-bikeways__row { grid-template-columns: minmax(0, 1fr) repeat(2, auto) 1rem; gap: 0.35rem; }
  .rengstorff-microsite .atp-bikeways__row > span:nth-child(4), .rengstorff-microsite .atp-bikeways__row > span:nth-child(5), .rengstorff-microsite .atp-bikeways__row > span:nth-child(6) { display: none; }
  .rengstorff-microsite .atp-bikeways__segments li { grid-template-columns: 1fr 1fr; gap: 0.25rem 0.7rem; }
  .rengstorff-microsite .atp-bikeways__segments li span:nth-last-child(-n+4) { color: #526258; }
  .rengstorff-microsite .atp-bikeways__total { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
}