/* HOAQM Marketing Site — shared styles
   Source of truth for tokens: docs/style-tokens.md
   Source of truth for brand: assets/wordmark/README.md
*/

/* ---------- Self-hosted fonts (Latin only) ---------- */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --color-navy: #1F2D3D;
  --color-green: #4A5D4F;
  --color-warm-white: #FAFAF7;
  --color-black: #000000;

  --font-serif: "Source Serif 4", "Source Serif 4 Display", Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: 1.125rem;
  --text-h4: 1.25rem;
  --text-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-h1: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --text-hero: clamp(2.75rem, 1.8rem + 4.2vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.18em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --content-max: 72rem;
  --prose-max: 38rem;
  --gutter: 1.25rem;

  --rule-hairline: 1px solid var(--color-green);
  --radius-subtle: 4px;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-default: 220ms;
}

@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }
}

/* ---------- Reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-warm-white);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-navy);
  margin: 0;
  line-height: var(--leading-tight);
}

h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-green); }
a:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-subtle);
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Account for the sticky header height when jumping to in-page anchors. */
:target,
[id] { scroll-margin-top: 6rem; }

/* Skip-to-content link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy);
  color: var(--color-warm-white);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { left: var(--space-2); }

/* ---------- Layout primitives ---------- */

.shell {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

.section-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-4);
}

.section-heading {
  font-size: var(--text-h2);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-warm-white);
  border-bottom: var(--rule-hairline);
  transition: box-shadow var(--duration-default) var(--ease-default),
              background var(--duration-default) var(--ease-default);
}

/* Header row gets more horizontal room than the body content max so the
   wordmark and the seven nav items + sign-in button never need to compress. */
@media (min-width: 1024px) {
  .site-header .shell { max-width: 84rem; }
}

.site-header.scrolled {
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 1px 0 rgba(31, 45, 61, 0.06), 0 4px 12px rgba(31, 45, 61, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  flex-wrap: wrap;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__brand img {
  height: 2rem;
  width: auto;
}

@media (min-width: 1024px) {
  .site-header__inner { flex-wrap: nowrap; }
  .site-header__brand img { height: 2.25rem; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .site-nav { flex-wrap: nowrap; gap: var(--space-4); }
}

.site-nav a,
.nav-group__parent {
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-navy);
  white-space: nowrap;
}

/* Header nav links — green + underline on hover. Matches the footer link pattern.
   Excludes .btn-link (the Resident sign-in entry) which has its own bold-by-default + slide-on-hover treatment. */
.site-nav a:not(.btn-link):not(.nav-group__parent):hover,
.nav-group__menu a:hover,
.nav-group__menu a:focus-visible,
.nav-group__parent:hover .nav-link__label,
.nav-group__parent:focus-visible .nav-link__label {
  color: var(--color-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Active-page indicator — green + bold on the nav link matching the current page.
   aria-current="page" is set on the matching <a> in the page's HTML; community
   sub-pages set aria-current="true" on the dropdown parent (.nav-group__parent)
   to indicate the user is *in* the Communities section even though the parent
   itself is not the current page. The [aria-current] attribute selector matches
   either value. */
.site-nav a[aria-current],
.nav-group__parent[aria-current] .nav-link__label {
  color: var(--color-green);
  font-weight: 700;
}

/* Resident sign-in (.btn-link) inside the nav — match nav font-size, keep no-wrap.
   Defensive: explicitly suppress any text-decoration: underline on hover. The .btn-link
   only renders its border-bottom (the static + sliding underline); the surrounding nav
   links' green+underline hover pattern must not double up here. */
.site-nav .btn-link {
  font-size: var(--text-sm);
  white-space: nowrap;
}
.site-nav .btn-link:hover {
  text-decoration: none;
}

/* Communities dropdown — CSS-only, hover + focus-within */

.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-group__parent {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-navy);
}

.nav-group__parent:hover { color: var(--color-green); }

.nav-group__caret {
  font-size: 1em;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-default);
}

.nav-group:hover .nav-group__caret,
.nav-group:focus-within .nav-group__caret {
  transform: translateY(1px);
  color: var(--color-green);
}

.nav-group__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  background: var(--color-warm-white);
  border: var(--rule-hairline);
  border-radius: var(--radius-subtle);
  box-shadow: 0 4px 16px rgba(31, 45, 61, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              visibility 0s linear var(--duration-fast);
  z-index: 50;
}

.nav-group:hover .nav-group__menu,
.nav-group:focus-within .nav-group__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              visibility 0s;
}

.nav-group__menu li { margin: 0; }

.nav-group__menu a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
}

.nav-group__menu a:hover,
.nav-group__menu a:focus-visible { color: var(--color-green); }

@media (max-width: 1023px) {
  .nav-group { width: 100%; }
  .nav-group__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: var(--space-2) 0 0 var(--space-5);
    background: transparent;
    transition: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-subtle);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-warm-white);
}
.btn--primary:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-warm-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-navy);
}
.btn--secondary:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-warm-white);
}

/* Inverted secondary for the dark footer surface. */
.btn--secondary--reverse {
  border-color: var(--color-warm-white);
  color: var(--color-warm-white);
}
.btn--secondary--reverse:hover {
  background: var(--color-warm-white);
  border-color: var(--color-warm-white);
  color: var(--color-navy);
}

/* Secondary buttons that wrap their label in a <span> get a slide-right
   gesture on hover, matching the site's text-link motion language. The
   button's outer box stays the same shape; only the label transforms. */
.btn--secondary > span,
.btn--secondary--reverse > span {
  display: inline-block;
  transition: transform var(--duration-default) var(--ease-default);
}
.btn--secondary:hover > span,
.btn--secondary--reverse:hover > span {
  transform: translateX(var(--space-3));
}

.btn-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-default) var(--ease-default),
              margin-right var(--duration-default) var(--ease-default);
}
.btn-link:hover {
  color: var(--color-green);
  padding-left: var(--space-3);
  margin-right: calc(-1 * var(--space-3));
}

/* ---------- Hero (type-only) ---------- */

.hero {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  text-align: center;
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

.hero .shell {
  max-width: 64rem;
}

.hero__wordmark {
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin: 0 auto var(--space-8);
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 auto var(--space-5);
  max-width: none;
}

.hero__subhead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  margin: 0 auto var(--space-8);
  max-width: none;
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ---------- Reusable: definition-list row (h3 left, body right) ----------
   Used by .credential (about) and .expectation (about, services).
   Pair with a wrapping list (.credentials__list, .expectations__list)
   that handles vertical rhythm between rows. */

.def-row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .def-row {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

@media (min-width: 1024px) {
  .def-row {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr);
    gap: var(--space-10);
  }
}

.def-row > h3 {
  margin: 0;
}

/* ---------- Communities list ---------- */

.communities {
  border-top: var(--rule-hairline);
  background: var(--color-warm-white);
}

/* Reusable: vertical row-list with hairlines between rows.
   Shared by .communities__list (home) and .milestones__list (about). */
.communities__list,
.milestones__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--rule-hairline);
}

.communities__list { margin-bottom: var(--space-8); }

.communities__list > li,
.milestones__list > li {
  border-bottom: var(--rule-hairline);
}

.communities__list a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  text-decoration: none;
  color: var(--color-navy);
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-default) var(--ease-default);
}

@media (min-width: 640px) {
  .communities__list a {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.communities__list a:hover,
.communities__list a:focus-visible {
  color: var(--color-green);
  padding-left: var(--space-3);
}

.community-list__name {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.community-list__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
}

.communities__see-all {
  margin: 0;
  font-size: var(--text-sm);
}

.communities__see-all a {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-navy);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-default) var(--ease-default);
}

.communities__see-all a:hover {
  color: var(--color-green);
  padding-left: var(--space-3);
}

/* ---------- Founder section (green surface) ---------- */

.founders {
  background: var(--color-green);
  color: var(--color-warm-white);
}

.founders .section-eyebrow {
  color: var(--color-warm-white);
  opacity: 0.75;
}

.founders .section-heading,
.founders h3 {
  color: var(--color-warm-white);
}

.founders__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .founders__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

.founder h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.founder p {
  max-width: var(--prose-max);
  line-height: var(--leading-relaxed);
}

/* ---------- Testimonials (home — kudos wall) ----------
   Warm-white surface between the green founders section and the navy
   closing CTA (warm-white → green → warm-white → navy rhythm). No
   border-top: the green→warm-white surface change is the divider.
   Two explicit columns (.testimonials__col), NOT CSS multicol, so the
   Ryan-approved quote order is deterministic at every width — col 1
   carries quotes 1-4, col 2 carries 5-8. Below 768px the wall collapses
   to a single column and the quotes read 1-8 top to bottom. */

.testimonials {
  background: var(--color-warm-white);
}

.testimonials__wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .testimonials__wall {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.testimonials__col {
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.testimonial { margin: 0; }

.testimonial__quote {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy);
  margin: 0;
}

/* The oversized opening mark is decorative (aria-hidden in the markup).
   line-height: 0 keeps it from inflating the first line's box; the
   negative vertical-align drops it onto the text baseline. */
.testimonial__mark {
  color: var(--color-green);
  font-size: 2.625rem;
  line-height: 0;
  vertical-align: -0.36em;
  margin-right: 0.08em;
}

.testimonial__role {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green);
  margin-top: var(--space-3);
}

/* ---------- Closing CTA ---------- */

.closing {
  border-top: var(--rule-hairline);
  background: var(--color-navy);
  color: var(--color-warm-white);
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .closing { padding-bottom: var(--space-10); }
}

.closing .shell { max-width: 56rem; }

.closing__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: var(--leading-snug);
  color: var(--color-warm-white);
  margin: 0 0 var(--space-6);
}

.closing__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  font-weight: 700;
  color: var(--color-warm-white);
  text-decoration: none;
  border-bottom: 1px solid var(--color-warm-white);
  padding-bottom: 4px;
  transition: padding-left var(--duration-default) var(--ease-default);
}
.closing__cta:hover {
  color: var(--color-warm-white);
  padding-left: var(--space-3);
}

/* ---------- About page ---------- */

/* Hero — quieter than home: left-aligned, content-first, no oversized wordmark */
.about-hero {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .about-hero { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

.about-hero h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
}

.about-hero__intro {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-width: var(--prose-max);
  margin: 0;
}

/* Two intro paragraphs in the hero get a half-em breath between them so each
   reads as its own audience cue rather than one continuous block. Used on
   /contact and /portal. */
.about-hero__intro + .about-hero__intro {
  margin-top: 0.5em;
}

/* Founders bio — h3 on top, body paragraphs below; full-column blocks stacked */
.founders-bio {
  border-top: var(--rule-hairline);
}

.bio {
  margin-bottom: var(--space-10);
}

.bio:last-child {
  margin-bottom: 0;
}

.bio h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.bio p {
  max-width: var(--prose-max);
  line-height: var(--leading-relaxed);
}

/* Credentials — uses .def-row pattern; right column has italic meta line + body paragraph */
.credentials {
  border-top: var(--rule-hairline);
}

.credentials__list {
  display: grid;
  gap: var(--space-10);
}

.credential__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: 0 0 var(--space-3);
}

.credential__body {
  margin: 0;
  max-width: var(--prose-max);
}

/* Milestones — typographic list; year left, event right; uses the row-list primitive */
.milestones {
  border-top: var(--rule-hairline);
}

.milestones__list > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
}

@media (min-width: 640px) {
  .milestones__list > li {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-8);
  }
}

.milestone__year {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-green);
}

@media (min-width: 640px) {
  .milestone__year { flex: 0 0 5rem; }
}

.milestone__event {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

/* How we work — three statement blocks; uses .def-row pattern */
.expectations {
  border-top: var(--rule-hairline);
}

.expectations__list {
  display: grid;
  gap: var(--space-10);
}

.expectation > p {
  margin: 0;
  max-width: var(--prose-max);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-navy);
  color: var(--color-warm-white);
  padding-top: var(--space-8);
  padding-bottom: var(--space-5);
}

.site-footer a { color: var(--color-warm-white); text-decoration: none; }
.site-footer a:hover { color: var(--color-warm-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.site-footer a.btn:hover { text-decoration: none; }
.site-footer a.btn--secondary--reverse:hover { color: var(--color-navy); }

.site-footer__signin {
  margin: 0 0 var(--space-5);
}

/* Footer grid — 5 outer cells at desktop:
   col 1: brand wordmark + tagline + Residents sign-in
   col 2: Site nav
   col 3: Contact (heading) + Carol/Ryan/Assessments emails
   col 4: continuation of Contact (no heading) — phone/fax/hours + address
   col 5: Legal (Privacy + Terms)
   Tablet collapses to 2 cols (3 rows with col 5 in the last row alone);
   mobile to a single stacked column. */
.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); }
}

@media (min-width: 1024px) {
  /* Col 4 (contact-cont) is the widest after the brand col — needs to fit
     "After-hours emergency:" and "HOA Quality Management, LLC" on single
     lines. The brand col gives up some room since the stacked wordmark
     comfortably fits in ~180px. */
  .site-footer__grid { grid-template-columns: 1.1fr 0.85fr 1fr 1.3fr 0.85fr; gap: var(--space-8); }
}

/* Contact continuation column (col 4 at desktop) has no visible heading
   — visually reads as the right-hand continuation of col 3. The hidden
   heading inside it occupies vertical space at desktop only so col 4's
   first list item aligns with col 3's first list item. On tablet and
   mobile the alignment spacer collapses (display: none) and the
   continuation column flows naturally beneath the emails block. */
.site-footer__contact-cont .footer-heading[aria-hidden="true"] {
  display: none;
}

@media (min-width: 1024px) {
  .site-footer__contact-cont .footer-heading[aria-hidden="true"] {
    display: block;
    visibility: hidden;
  }
}

/* Section-spacing inside the brand column when Residents stacks under
   the tagline — keeps the Residents heading from sitting too close to
   the tagline above it. */
.site-footer__brand-col .footer-heading + .site-footer__signin {
  margin-top: 0;
}

.site-footer__brand-col .site-footer__tagline + .footer-heading {
  margin-top: var(--space-6);
}

/* Email rows in the Contact column: label on its own line, address on
   the next line. Matches the natural wrap of "Assessments/payments:"
   but applied consistently to all three rows via an explicit <br>. */
.site-footer__contact .footer-list a[href^="mailto:"] {
  display: inline-block;
}

/* NOTE (2026-08-18): the old `.site-footer__brand img { height: 3rem/4rem }`
   rules were DELETED as dead code — the class sits ON the <img> itself, so the
   descendant selector never matched, and the live wordmark has always been
   sized by the base `img { max-width: 100%; height: auto }` (it shrinks with
   its grid column). "Fixing" the selector instead would have RESIZED the live
   footer; the portal's ported footer replicates the max-width behavior. */

.site-footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 22rem;
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-warm-white);
  margin: 0 0 var(--space-4);
  opacity: 0.7;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* Selector matches address blocks anywhere inside the footer (Contact
   column or Contact-continuation column after the round-3 split). The
   browser default for <address> is italic-serif, which leaks through
   if the rule isn't applied. */
.site-footer address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin-top: var(--space-3);
}

.site-footer__contact .footer-list,
.site-footer__contact-cont .footer-list { gap: var(--space-3); }

.site-footer__bottom {
  border-top: 1px solid rgba(250, 250, 247, 0.15);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-warm-white);
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__bottom a { font-size: var(--text-xs); }

/* ---------- Contact page ---------- */

.contact-section {
  border-top: var(--rule-hairline);
}

.contact-section--alt {
  background: var(--color-warm-white);
}

.contact-section__lead {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-width: var(--prose-max);
  margin: 0 0 var(--space-8);
}

/* Two adjacent .contact-section__lead paragraphs collapse the first one's
   bottom margin and use a half-em breath between them — same convention as
   .about-hero__intro, applied to Section 2's homeowner lead paragraph. */
.contact-section__lead:has(+ .contact-section__lead) {
  margin-bottom: 0;
}
.contact-section__lead + .contact-section__lead {
  margin-top: 0.5em;
}

/* Proposal request form */
.proposal-form-wrap[hidden],
.proposal-success[hidden] { display: none; }

.proposal-form__heading {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-5);
}

.proposal-form {
  display: grid;
  gap: var(--space-5);
  max-width: 36rem;
}

.proposal-form__field {
  display: grid;
  gap: var(--space-2);
}

.proposal-form__field label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-navy);
}

.proposal-form__req { color: var(--color-green); }

.proposal-form__opt {
  font-weight: 400;
  color: var(--color-green);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  margin-left: var(--space-1);
}

.proposal-form input[type="text"],
.proposal-form input[type="email"],
.proposal-form input[type="tel"],
.proposal-form input[type="number"],
.proposal-form textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy);
  background: var(--color-warm-white);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-subtle);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.proposal-form input:focus,
.proposal-form textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(74, 93, 79, 0.18);
}

.proposal-form textarea { resize: vertical; }

.proposal-form input::placeholder,
.proposal-form textarea::placeholder {
  color: var(--color-green);
  opacity: 0.65;
  font-style: italic;
}

.proposal-form__help {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: var(--space-1) 0 0;
  line-height: var(--leading-snug);
}

.proposal-form__honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.proposal-form__submit { margin-top: var(--space-2); }

.proposal-form__privacy {
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: 0;
  max-width: var(--prose-max);
}

.proposal-success {
  max-width: var(--prose-max);
}

.proposal-success p {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
}

/* Homeowner contact details */
.contact-details {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-base);
  max-width: 36rem;
}

.contact-details__address {
  font-style: normal;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: 0;
}

/* ---------- Escrow page ---------- */

.escrow-instructions { border-top: var(--rule-hairline); }
.escrow-pricing { border-top: var(--rule-hairline); }
.escrow-coming-soon { border-top: var(--rule-hairline); }
.escrow-coming-soon__body { max-width: var(--prose-max); }

/* Instructions: label-left / value-right rows. Two-column at 768px+,
   stacked at narrow widths. Labels match the eyebrow's small-caps styling. */
.instructions-list {
  margin: 0;
  display: grid;
  gap: var(--space-6);
}

.instructions-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .instructions-row {
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

.instructions-row dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0;
}

.instructions-row dd {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  margin: 0;
}

.instructions-row dd address {
  font-style: normal;
  line-height: var(--leading-snug);
  margin: 0;
}

/* Pricing menu — typographic list. No bullets, no row dividers (per
   2026-05-06 round-4 review pass; vertical padding alone separates rows).
   Body on the left, price right-aligned at desktop. */
.price-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-menu__row {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}

@media (min-width: 640px) {
  .price-menu__row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

.price-menu__body h3 {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-3);
}

.price-menu__body p {
  margin: 0 0 var(--space-2);
  max-width: var(--prose-max);
}

.price-menu__body p:last-child { margin-bottom: 0; }

.price-menu__note {
  font-size: var(--text-sm);
  color: var(--color-green);
  margin-top: var(--space-3);
}

/* Sublist for the per-community meetings cadence under
   "Meetings per year by community:" — small bulleted list. */
.price-menu__sublist {
  list-style: disc;
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}

.price-menu__sublist li {
  margin-bottom: var(--space-1);
}

.price-menu__sublist li:last-child { margin-bottom: 0; }

.price-menu__price {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-navy);
}

@media (min-width: 640px) {
  .price-menu__price {
    text-align: right;
  }
}

.price-menu__price p {
  margin: 0 0 var(--space-2);
}
.price-menu__price p:last-child { margin-bottom: 0; }

/* Dollar amounts in the price column — serif, larger size, regular
   weight (un-bolded per 2026-05-06 round-4 review pass). The size and
   serif treatment alone make them anchor a quick scan. */
.price-menu__amount {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h3);
  color: var(--color-navy);
}

/* Two-tier blocks (Demand, Minutes, Newsletters) — a parent heading
   anchors two nested tier rows, each its own body|price pair. No divider
   between tiers; the page-wide menu rhythm applies within the block too.
   The parent-tier relationship reads through a half-step-smaller tier
   label (h4 vs the parent h3) plus a small indent on the tier rows. */
.price-menu__row--tiered {
  display: block;
}

.price-menu__block-heading {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-5);
}

.price-menu__tiers {
  display: grid;
  gap: var(--space-5);
}

.price-menu__tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-left: var(--space-5);
}

@media (min-width: 640px) {
  .price-menu__tier {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

.price-menu__tier h4 {
  font-size: var(--text-h4);
  margin: 0 0 var(--space-2);
}

.price-menu__tier .price-menu__body p:last-child { margin-bottom: 0; }

/* Footnote-style notes below the pricing menu (Cancellations,
   Certificates of Insurance). Small note, bold lead-in, prose body. */
.escrow-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.escrow-closing {
  border-top: var(--rule-hairline);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.escrow-closing__line {
  font-size: var(--text-lead);
  margin: 0;
}

/* ---------- Community sub-page ---------- */

.community-hero { padding: 0; }

.community-hero__photo {
  width: 100%;
  background: var(--color-navy);
  border-bottom: var(--rule-hairline);
  overflow: hidden;
}

.community-hero__photo img {
  display: block;
  width: 100%;
  height: clamp(14rem, 25vw, 22rem);
  object-fit: cover;
}

.community-hero .shell {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .community-hero .shell {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

.community-hero h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 var(--space-3);
  max-width: 26ch;
}

.community-hero__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: 0;
}

/* Sub-meta line beneath the hero meta — italic serif, slightly smaller-feeling
   register than the meta line above it. Carries the "Continuously managed by
   HOA Quality Management since YYYY." credibility statement that previously
   lived in a dedicated "By the numbers" section (removed 2026-05-10 along
   with .community-numbers + .fact-box, since the cadence half of that section
   was redundant with the "Next board meeting" block in Section 4 and the
   managed-since fact alone didn't justify a whole section). */
.community-hero__sub-meta {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-navy);
  margin: var(--space-2) 0 0;
  max-width: var(--prose-max);
}

.community-about {
  border-top: var(--rule-hairline);
}

.community-about__body {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-width: var(--prose-max);
  margin: 0;
}

/* NOTE (2026-08-29): the .signup-placeholder rule was DELETED — its only
   consumers were the Mailchimp placeholder blocks in the community pages'
   "For homeowners" sections, removed wholesale that day (see decisions.md). */

/* Community photo gallery — a 3-up grid of real community photos placed
   directly under the About paragraph (no eyebrow, no divider above it; the
   section border below carried the break to the since-removed "For homeowners"
   section — now to the closing CTA). Tiles are
   uniform 4:3 via aspect-ratio + object-fit cover; each tile is a button that
   opens a larger view (lightbox, wired in assets/js/site.js). Single column
   on mobile, three across at 700px+. Last row is left-aligned when a
   community has 4 or 5 photos — that's intentional. */
.community-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (min-width: 700px) {
  .community-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.gallery-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.gallery-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-navy);
}

.gallery-tile:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
}

/* Lightbox overlay — created and toggled by site.js; hidden until activated. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(31, 45, 61, 0.92);
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-warm-white);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(250, 250, 247, 0.4);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__close:hover { background: rgba(0, 0, 0, 0.5); }

/* Prev/next browse arrows — vertically centered on the left and right edges. */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-warm-white);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(250, 250, 247, 0.4);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__nav:hover { background: rgba(0, 0, 0, 0.5); }
.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }

/* At the first/last photo the matching arrow greys out and stops (no looping). */
.lightbox__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.lightbox__nav:disabled:hover { background: rgba(0, 0, 0, 0.3); }

/* ---------- For Homeowners — sectioned FAQ ----------
   Sectioned FAQ primitive (per the 2026-04-30 FAQ-structure decision;
   established 2026-05-09 on /homeowners; redesigned 2026-05-09 to use
   native <details>/<summary> accordion; consolidated 2026-05-09 to two
   sections; layout iteration 2026-05-09 added section-top dividers and
   moved expand-all into the hero; second layout iteration 2026-05-09
   reverted .faq-section padding to .section defaults, capped the
   .faq-list as a unit so questions and answers share the same visual
   width, restored TOC links in the hero alongside a bolded "Expand
   all answers" toggle, added per-section eyebrows + per-section
   "Expand all answers" toggles right-aligned with the section h2).
   Each Q is a <details class="faq-entry"> with a <summary> (italic
   serif question + small +/- indicator) and a <div class="faq-entry__a">
   wrapping the answer prose. .faq-section gets a hairline border-top
   that marks each section boundary (after the hero AND between
   sections), matching the section-divider pattern used elsewhere on
   the site. .faq-list is max-width capped at 52rem so the entire
   list (Qs + dividers + As) reads as one constrained block.
   .faq-toolbar (in the hero) and .faq-section__head (next to each
   section h2) carry the TOC + expand-all controls. The inline script
   on the page handles both global and per-section toggles via
   data-action="expand-all" + data-target attributes. */

.faq-section {
  border-top: var(--rule-hairline);
}

.faq-toolbar {
  margin: var(--space-4) 0 0;
  max-width: 52rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.faq-toolbar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.faq-toolbar__nav a {
  font-family: var(--font-sans);
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.faq-toolbar__nav a:hover { color: var(--color-green); }

.faq-toolbar__expand,
.faq-section__head .faq-expand {
  margin: 0;
}

.faq-section__head {
  max-width: 52rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.faq-section__head .faq-section__title {
  flex: 1 1 auto;
  min-width: 0;
}

.faq-section__head .section-eyebrow,
.faq-section__head .section-heading {
  margin-bottom: 0;
}

.faq-section__head .section-eyebrow {
  margin-bottom: var(--space-3);
}

.faq-expand {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.faq-expand-link {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  cursor: pointer;
}

.faq-expand-link:hover { color: var(--color-navy); }

.faq-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: 52rem;
}

.faq-entry {
  border-bottom: var(--rule-hairline);
}

.faq-entry > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.faq-entry > summary::-webkit-details-marker { display: none; }
.faq-entry > summary::marker { content: ""; }

.faq-entry > summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-h3);
  color: var(--color-green);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-default);
}

.faq-entry[open] > summary::after { content: "\2212"; /* minus sign */ }

.faq-entry > summary:hover { color: var(--color-green); }
.faq-entry > summary:hover::after { color: var(--color-navy); }

.faq-entry > summary:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-subtle);
}

.faq-entry__a {
  padding: 0 0 var(--space-5);
}

.faq-entry__a > p {
  margin: 0 0 var(--space-3);
  line-height: var(--leading-relaxed);
}

.faq-entry__a > p:last-child { margin-bottom: 0; }

.faq-entry__a address {
  font-style: normal;
  line-height: var(--leading-snug);
  margin: var(--space-3) 0;
}

.faq-section__close {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-navy);
  max-width: var(--prose-max);
  margin: var(--space-6) 0 0;
}

/* ---------- Portal placeholder ---------- */

.portal-callout-section {
  padding-top: var(--space-6);
  padding-bottom: 0;
}

.portal-callout {
  border: var(--rule-hairline);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-subtle);
  background: rgba(74, 93, 79, 0.04);
  padding: var(--space-4) var(--space-5);
}

.portal-callout p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* ---------- Legal pages (/privacy, /terms) ---------- */

/* Last-updated stamp in the legal-page hero. Small, green, sans-serif
   so it reads as metadata rather than body prose. */
.legal-last-updated {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
}

/* Sectioned long-form legal content. No hairline dividers between
   sections — the eyebrow + h2 typography carries the section-break
   work on its own, so the page reads as one continuous policy rather
   than a stack of independent FAQ-style blocks. Padding is tighter
   than the default .section rhythm (which is tuned for marketing
   pages) to match a typical web privacy-policy register.
   .legal-section__body caps prose at 52rem to keep line lengths
   readable — wider than the default 38rem prose-max because legal
   sections include sub-headed paragraphs and bulleted lists that
   benefit from a bit more room. */
.legal-section {
  /* Asymmetric padding — more on top than bottom — so each new section's
     eyebrow visibly "claims" the white space above it. Magnitudes dialed
     in: previous symmetric attempt looked too tight (used an undefined
     --space-7 var that fell back to 0); first asymmetric attempt at
     space-10/space-6 looked too generous. These values land between. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .legal-section { padding-top: var(--space-8); padding-bottom: var(--space-5); }
}

/* The last legal section on the page needs noticeably more bottom padding
   so the closing content doesn't crowd the dark surface below. Two cases:
   (a) the legal section is the literal last <section> in <main> (privacy,
   terms — the contact/housekeeping sections close the page); (b) the
   legal section is immediately followed by a .section.closing CTA block
   (boards essay — Section 4's last paragraph sits directly above the
   dark navy closing CTA, which is functionally the same visual transition
   as the dark footer in the (a) case). Without case (b), :last-of-type
   matches no element on the boards page and the gap reads as tight. */
.legal-section:last-of-type,
.legal-section:has(+ .section.closing) {
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .legal-section:last-of-type,
  .legal-section:has(+ .section.closing) { padding-bottom: var(--space-12); }
}

.legal-section .section-heading {
  margin-bottom: var(--space-4);
}

.legal-section__body {
  max-width: 52rem;
}

.legal-section__body > p,
.legal-section__body > ul {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

.legal-section__body > p:last-child,
.legal-section__body > ul:last-child {
  margin-bottom: 0;
}

.legal-section__body > ul {
  padding-left: var(--space-5);
}

.legal-section__body > ul > li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.legal-section__body > ul > li:last-child {
  margin-bottom: 0;
}

/* Run-in subheadings inside a section paragraph — e.g. "Informational
   only." on /terms Section 1. Slightly heavier weight; same color as
   surrounding prose. */
.legal-section__body strong {
  color: var(--color-navy);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  .communities__list a:hover,
  .communities__list a:focus-visible { padding-left: 0; }
}