#project-guides-heading { scroll-margin-top: 90px; }

.project-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.project-guide-card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--app-page-line);
  border-radius: 1rem;
  background: var(--app-page-surface);
  color: var(--app-page-ink);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.project-guide-card:hover {
  transform: translateY(-3px);
  border-color: var(--app-page-green);
  box-shadow: var(--app-page-shadow);
  color: var(--app-page-ink);
}

.project-guide-card:focus-visible,
.project-guide-page a:focus-visible,
.project-guide-page button:focus-visible {
  outline: 3px solid var(--app-page-green);
  outline-offset: 4px;
}

.project-guide-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .3rem;
}

.project-guide-card-icon {
  display: grid;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: .8rem;
  background: var(--app-page-green-soft);
  color: var(--app-page-green-dark);
  font-size: 1.4rem;
}

.project-guide-card-count { color: var(--app-page-muted); font-size: .78rem; }
.project-guide-card h3 { margin: 0; font-size: 1.24rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.2; }
.project-guide-card p { margin: 0; color: var(--app-page-muted); font-size: .88rem; line-height: 1.65; }
.project-guide-card-conditions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.project-guide-card-conditions > span { padding: .28rem .5rem; border-radius: .4rem; background: var(--app-page-canvas); color: var(--app-page-muted); font-size: .72rem; line-height: 1.5; }
.project-guide-card-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .85rem; border-top: 1px solid var(--app-page-line); color: var(--app-page-green-dark); font-size: .84rem; font-weight: 650; }
.project-guide-hero .app-page-hero-copy { max-width: 850px; }
.project-guide-hero h1 { max-width: 780px; }
.project-guide-hero-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; font-size: .82rem; }
.project-guide-hero-meta > span, .project-guide-hero-meta > a { display: inline-flex; align-items: center; gap: .45rem; color: var(--app-page-green-dark); }
.project-guide-hero-meta > a { text-underline-offset: .2em; }
.project-guide-jump-links { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; margin-bottom: 2.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--app-page-line); }
.project-guide-jump-links a { padding: .35rem 0; color: var(--app-page-muted); font-size: .82rem; text-decoration: none; }
.project-guide-jump-links a:hover { color: var(--app-page-green-dark); text-decoration: underline; text-underline-offset: .25em; }
.project-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: clamp(1.5rem, 4vw, 3rem); }
.project-guide-main { min-width: 0; }
.project-guide-section { margin-bottom: 3.5rem; scroll-margin-top: 90px; }
.project-guide-section > .app-page-eyebrow { margin-bottom: .6rem; }
.project-guide-section h2, .project-guide-related h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 720; letter-spacing: -.03em; }
.project-guide-region, .project-guide-section-intro { margin-bottom: 1.25rem; color: var(--app-page-muted); line-height: 1.7; }
.project-guide-conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; margin: 0; padding: .5rem 1.5rem; border: 1px solid var(--app-page-line); border-radius: 1rem; background: var(--app-page-surface); }
.project-guide-conditions > div { padding: 1rem 0; border-bottom: 1px solid var(--app-page-line); }
.project-guide-conditions > div:last-child, .project-guide-conditions > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.project-guide-conditions dt { margin-bottom: .3rem; color: var(--app-page-muted); font-size: .73rem; font-weight: 550; }
.project-guide-conditions dd { margin: 0; font-size: .9rem; font-weight: 650; line-height: 1.5; }
.project-guide-plants { display: flex; flex-direction: column; gap: 1rem; }
.project-guide-design-brief { margin: 1.25rem 0 0; color: var(--app-page-muted); line-height: 1.7; }
.project-guide-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.project-guide-zone { min-width: 0; padding: 1.25rem; border: 1px solid var(--app-page-line); border-radius: 1rem; background: var(--app-page-green-soft); }
.project-guide-zone h3 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--app-page-ink); }
.project-guide-zone p { margin: 0 0 .8rem; font-size: .84rem; line-height: 1.7; color: var(--app-page-muted); }
.project-guide-zone ul { display: flex; flex-wrap: wrap; gap: .4rem .8rem; list-style: none; padding: 0; margin: 0; }
.project-guide-zone li { min-width: 0; max-width: 100%; }
.project-guide-zone a { display: inline-block; padding: .35rem 0; font-size: .81rem; line-height: 1.5; color: var(--app-page-green-dark); text-underline-offset: .2em; overflow-wrap: anywhere; }
.project-guide-plant { scroll-margin-top: 90px; }
.project-guide-plant > .project-guide-plant-zone { margin: 0 0 .85rem; font-size: .75rem; color: var(--app-page-muted); }
.project-guide-plant { padding: 1.5rem; border: 1px solid var(--app-page-line); border-radius: 1rem; background: var(--app-page-surface); }
.project-guide-plant-heading { display: flex; align-items: start; gap: .8rem; margin-bottom: 1rem; }
.project-guide-plant-heading > div { flex: 1; min-width: 0; }
.project-guide-plant-number { padding-top: .15rem; color: var(--app-page-green); font-size: .78rem; font-weight: 700; }
.project-guide-plant h3 { margin: 0 0 .2rem; font-size: 1.2rem; font-weight: 720; letter-spacing: -.02em; line-height: 1.3; }
.project-guide-plant h3 a { color: var(--app-page-ink); text-decoration: none; }
.project-guide-plant h3 a:hover { color: var(--app-page-green-dark); text-decoration: underline; text-underline-offset: .2em; }
.project-guide-plant .project-guide-scientific-name { margin: 0; color: var(--app-page-muted); font-size: .83rem; }
.project-guide-layer { flex-shrink: 0; max-width: 38%; padding: .3rem .6rem; border-radius: .45rem; background: var(--app-page-green-soft); color: var(--app-page-green-dark); font-size: .69rem; line-height: 1.5; }
.project-guide-plant > p { color: var(--app-page-muted); font-size: .9rem; line-height: 1.7; }
.project-guide-plant > .project-guide-role { margin-bottom: .35rem; color: var(--app-page-green-dark); font-size: .81rem; font-weight: 650; }
.project-guide-placement { display: flex; gap: .65rem; padding: .8rem 1rem; border-radius: .65rem; background: var(--app-page-canvas); }
.project-guide-placement > i { color: var(--app-page-green); }
.project-guide-placement p { margin: 0; color: var(--app-page-muted); font-size: .82rem; line-height: 1.65; }
.project-guide-placement strong { display: block; margin-bottom: .2rem; color: var(--app-page-ink); font-size: .75rem; }
.project-guide-plant-footer { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.project-guide-plant-footer > a { align-self: start; color: var(--app-page-green-dark); font-size: .81rem; font-weight: 650; text-decoration: none; }
.project-guide-plant-footer > a:hover { text-decoration: underline; text-underline-offset: .2em; }
.project-guide-plant-footer > a > i { margin-left: .4rem; }
.project-guide-evidence { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; color: var(--app-page-muted); font-size: .7rem; line-height: 1.6; }
.project-guide-evidence a { color: var(--app-page-muted); text-underline-offset: .18em; }
.project-guide-sequence { counter-reset: guide-step; margin: 0; padding: 0; list-style: none; }
.project-guide-sequence li { position: relative; display: flex; align-items: start; gap: 1rem; counter-increment: guide-step; padding: 0 0 1.5rem; }
.project-guide-sequence li::before { content: counter(guide-step); display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--app-page-line); border-radius: 50%; background: var(--app-page-surface); color: var(--app-page-green-dark); font-size: .8rem; font-weight: 650; }
.project-guide-sequence li:last-child { padding-bottom: 0; }
.project-guide-sequence p { margin: .2rem 0 0; color: var(--app-page-muted); font-size: .91rem; line-height: 1.8; }
.project-guide-spatial-sequence { padding: 1.5rem; border-radius: 1rem; background: var(--app-page-green-soft); }
.project-guide-spatial-sequence li::before { border-color: var(--app-page-green); }
.project-guide-care-list { display: grid; gap: 1rem; padding-left: 1.2rem; color: var(--app-page-muted); font-size: .91rem; line-height: 1.8; }
.project-guide-care-list li::marker { color: var(--app-page-green); }
.project-guide-sidebar { position: sticky; top: 90px; }
.project-guide-save-card { padding: 1.5rem; border: 1px solid var(--app-page-line); border-radius: 1rem; background: var(--app-page-surface); box-shadow: var(--app-page-shadow); }
.project-guide-save-card > .project-guide-card-icon { margin-bottom: 1.5rem; }
.project-guide-save-card > .app-page-eyebrow { margin-bottom: .35rem; }
.project-guide-save-card h2 { margin-bottom: .8rem; font-size: 1.5rem; font-weight: 720; letter-spacing: -.03em; }
.project-guide-save-card p { color: var(--app-page-muted); font-size: .86rem; line-height: 1.7; }
.project-guide-save-card .btn { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 44px; padding: .75rem; white-space: normal; font-size: .84rem; }
/* Override legacy global button colors with the shared theme tokens. */
[data-bs-theme] .project-guide-page .btn.btn-success {
  background: var(--app-page-green) !important;
  border-color: var(--app-page-green) !important;
  color: var(--app-page-surface) !important;
}
[data-bs-theme] .project-guide-page .btn.btn-success:hover,
[data-bs-theme] .project-guide-page .btn.btn-success:focus-visible {
  background: var(--app-page-green-dark) !important;
  border-color: var(--app-page-green-dark) !important;
}
.project-guide-secondary-link { display: block; margin-top: 1rem; color: var(--app-page-muted); font-size: .76rem; line-height: 1.6; text-align: center; text-underline-offset: .2em; }
.project-guide-save-card .project-guide-saved { color: var(--app-page-green-dark); font-weight: 600; }
.project-guide-save-card .project-guide-update-note { margin: 1.25rem 0 .75rem; font-size: .8rem; }
.project-guide-capacity { padding: .75rem; border-radius: .5rem; background: var(--app-page-green-soft); }
.project-guide-sources { padding-top: 2rem; border-top: 1px solid var(--app-page-line); }
.project-guide-sources > ol { margin: 0; padding-left: 1.2rem; }
.project-guide-sources li { margin-bottom: 1.5rem; padding-left: .3rem; scroll-margin-top: 90px; }
.project-guide-sources li::marker { color: var(--app-page-muted); font-size: .8rem; }
.project-guide-sources li > a { color: var(--app-page-green-dark); font-size: .9rem; font-weight: 600; text-underline-offset: .2em; }
.project-guide-sources li > a > i { margin-left: .25rem; font-size: .7rem; }
.project-guide-sources li > p { margin: .5rem 0 .2rem; color: var(--app-page-muted); font-size: .84rem; line-height: 1.7; }
.project-guide-sources li > small { color: var(--app-page-muted); font-size: .72rem; }
.project-guide-related { margin-top: 1rem; padding-top: 2.5rem; border-top: 1px solid var(--app-page-line); }
.project-guide-related h2 { margin-bottom: 1.5rem; }
.project-guide-review { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--app-page-line); border-radius: 1rem; background: var(--app-page-surface); }
.project-guide-review > .project-guide-card-icon { margin-bottom: 1.25rem; }
.project-guide-review > p { max-width: 38rem; margin-bottom: 1.5rem; color: var(--app-page-muted); line-height: 1.7; }
.project-guide-review .btn { margin: 0 .5rem .5rem 0; }

@media (max-width: 1100px) {
  .project-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-guide-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; }
  .project-guide-save-card { padding: 1.2rem; }
}

@media (max-width: 850px) {
  .project-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .project-guide-sidebar { position: static; grid-row: 1; }
  .project-guide-save-card > .project-guide-card-icon { display: none; }
  .project-guide-save-card { padding: 1.5rem; }
  .project-guide-save-card .btn { width: fit-content; max-width: 100%; }
  .project-guide-secondary-link { text-align: left; }
  .project-guide-jump-links { margin-bottom: 1.5rem; }
}

@media (max-width: 575px) {
  .project-guide-zones { grid-template-columns: minmax(0, 1fr); }
  .project-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .project-guide-card { padding: 1.25rem; }
  .project-guide-hero-meta { flex-direction: column; align-items: start; }
  .project-guide-jump-links { column-gap: 1rem; }
  .project-guide-section { margin-bottom: 2.5rem; }
  .project-guide-conditions { grid-template-columns: minmax(0, 1fr); padding: .25rem 1.1rem; }
  .project-guide-conditions > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--app-page-line); }
  .project-guide-plant { padding: 1.1rem; }
  .project-guide-plant-heading { flex-wrap: wrap; column-gap: .6rem; }
  .project-guide-plant-heading > div { min-width: calc(100% - 2rem); }
  .project-guide-layer { max-width: 100%; margin-left: 1.8rem; }
  .project-guide-spatial-sequence { padding: 1.15rem; }
  .project-guide-sequence li { gap: .75rem; }
  .project-guide-save-card .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .project-guide-card { transition: none; }
  .project-guide-card:hover { transform: none; }
}