/* ── Footer ── */
.site-footer {
  text-align: center;
  padding: 24px 20px;
  color: #888;
  font-size: 0.8rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 0;
}
/* Fair Housing + ADA compliance mark — small, muted to sit alongside the gray
   footer copy rather than read as a stark black block on the light footer. */
.footer-compliance {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.footer-compliance img {
  height: 34px;
  width: auto;
  opacity: 0.5;
}

/* Map skeleton loader */
.map-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.map-skeleton p {
  color: var(--muted);
  font-size: 0.9rem;
  z-index: 1;
}
.map-skeleton-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Property page styles */
.property-page-hero {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.property-page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-page-hero {
  height: auto;
  aspect-ratio: 21 / 9;
  max-height: 480px;
}
.team-page-hero img {
  object-position: center;
}
.property-page-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(transparent, rgba(31,39,48,0.85));
  color: #fff;
}
.property-page-hero-overlay h1 {
  font-size: 2.2rem;
  margin: 0 0 8px;
  font-family: var(--font-display);
}
.property-page-hero-overlay .hero-meta {
  font-size: 0.95rem;
  opacity: 0.9;
}
.property-page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.property-page-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 48px 0 20px;
  color: var(--ink);
}
.property-page-content h2:first-of-type {
  margin-top: 0;
}
/* ── Highlight blurb (single line under hero) ── */
.property-highlight {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 32px;
}

/* ── Compact photo gallery: 1 hero + 2 stacked, with "+N more" overlay ── */
/* Height is driven by the lead tile's aspect ratio rather than a fixed 420px,
   so a 16:9 photo isn't cropped to fit an arbitrary box. The lead tile matches
   the source exactly; the two stacked tiles land within ~3% of it, because a
   tile spanning two rows is always short by one gap (hero = 2*tile + gap
   vertically, but 2*tile horizontally) — only a zero gap makes all three exact. */
/* The lead tile's aspect-ratio is what gives this grid its height — see
   `.gallery-tile img`, which is absolutely positioned so the stacked tiles
   contribute no intrinsic height of their own. Without that, `fr` rows resolve
   against content (the container height is indefinite), the stacked images push
   the rows taller than the lead tile, and its bottom edge floats short of
   theirs — 130px adrift on 4:3 sources. */
.property-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 0;
  margin-bottom: 32px;
}
.gallery-tile {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.gallery-tile:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow);
}
.gallery-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* --tile-aspect is set per property from its own photos (ssr.js, fed by
   `galleryAspect` in properties.json), so a community shot in 4:3 gets 4:3 tiles
   and one shot in 16:9 gets 16:9 tiles — neither is cropped to suit the other.
   The fallback only applies to a record with no galleryAspect. */
.gallery-tile-hero {
  grid-row: 1 / span 2;
  aspect-ratio: var(--tile-aspect, 16 / 9);
}
.gallery-tile-more {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 33, 58, 0.7), rgba(20, 33, 58, 0.25));
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.gallery-tile-more span {
  background: rgba(20, 33, 58, 0.65);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ── Photo grid (team office gallery, generic auto-fill grid) ── */
.property-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.property-gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.property-gallery-grid img:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow);
}

/* ── Amenity icon-tile grid ── */
.amenities-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.amenity-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.amenity-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-deep);
}
.amenity-label {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.3;
  /* Amenity names are marketing copy of unpredictable length; let them wrap
     inside the tile rather than setting the column's minimum width. */
  min-width: 0;
  overflow-wrap: break-word;
}
/* A custom amenity can carry an external link (e.g. "Flex Rent Payments" → the
   Flex site). The tile becomes an anchor; keep it looking like a tile but give it
   an affordance + a small out-arrow so it reads as clickable. */
.amenity-tile-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.amenity-tile-link:hover,
.amenity-tile-link:focus-visible {
  border-color: var(--accent-deep);
  box-shadow: var(--shadow);
}
.amenity-tile-link .amenity-label { text-decoration: none; }
.amenity-link-icon {
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--accent-deep);
  opacity: .55;
}
.amenity-disclaimer {
  font-size: 0.82rem;
  color: var(--ink-mute, #6b6b6b);
  font-style: italic;
  margin: -16px 0 32px;
  line-height: 1.4;
}

/* ── Floor plans + available units (property detail page) ── */
.floorplans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.floorplans-empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.floorplans-empty h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.floorplans-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 420px;
}
.floorplans-empty-meta {
  font-size: 0.85rem !important;
  color: var(--muted);
  font-style: italic;
  opacity: 0.8;
}
.floorplans-empty .button {
  margin-top: 10px;
}
.floorplan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 0;
}
.floorplan-image-wrap {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.floorplan-image {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.floorplan-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-strong);
  border-radius: var(--radius-md);
}
.floorplan-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.floorplan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.floorplan-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
  font-family: var(--font-display);
}
.floorplan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 0.92rem;
}
.floorplan-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  opacity: 0.5;
}
.floorplan-rent {
  text-align: right;
  white-space: nowrap;
}
.floorplan-rent-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-deep);
}
.floorplan-rent-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
/* Right side of the floorplan header: starting rent stacked above the
   per-floorplan "Schedule a Consultation" CTA, both right-aligned. */
.floorplan-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* Per-floorplan consultation CTA — secondary/outline so it reads as the softer
   action next to the solid "Apply Now" on the unit rows. */
.floorplan-consult-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-deep);
  background: transparent;
  border: 1.5px solid var(--accent-deep);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.floorplan-consult-cta:hover,
.floorplan-consult-cta:focus-visible {
  background: var(--accent-deep);
  color: #fff;
}
.floorplan-tour-link {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.floorplan-tour-link:hover {
  border-bottom-color: var(--accent);
}
.floorplan-units-heading {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.floorplan-units {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.floorplan-unit {
  background: var(--surface-strong);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.floorplan-unit-row {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.floorplan-unit-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
}
.floorplan-unit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 0.85rem;
}
.floorplan-unit-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  opacity: 0.5;
}
.floorplan-unit-rent {
  font-weight: 700;
  color: var(--accent-deep);
  font-size: 1rem;
  white-space: nowrap;
}
/* Per-unit "Apply Now" — solid accent, the primary conversion action. Opens the
   unit's RentCafe online-application deep link in a new tab. */
.floorplan-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-deep);
  border: 1.5px solid var(--accent-deep);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(45, 91, 87, 0.22);
  transition: background-color 0.15s ease;
}
.floorplan-apply-btn:hover,
.floorplan-apply-btn:focus-visible {
  background: #1f4744;
}
.floorplan-unit-special {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(64, 120, 116, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .floorplan-card {
    grid-template-columns: 1fr;
  }
  .floorplan-image-wrap {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .floorplan-unit-row {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }
  .floorplan-unit-name { grid-column: 1; grid-row: 1; }
  .floorplan-unit-rent { grid-column: 2; grid-row: 1; justify-self: end; }
  .floorplan-unit-meta {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  /* Apply Now spans full width beneath the unit on narrow screens. */
  .floorplan-apply-btn {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
  }
  .property-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  /* Full-width lead tile keeps the source ratio; the pair below it sits in
     16:9 boxes of their own rather than being squeezed into a fixed row. */
  .gallery-tile-hero {
    grid-row: 1;
    grid-column: 1 / -1;
  }
  .gallery-tile {
    aspect-ratio: var(--tile-aspect, 16 / 9);
  }
  /* minmax(0, ...) not 1fr: a bare 1fr floors at min-content, so one long
     amenity name ("Homes with South-Facing Windows Available") widens its
     column past its share and pushes the grid off-screen. */
  .amenities-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.nearby-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.nearby-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.nearby-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.nearby-card-body {
  padding: 16px;
}
.nearby-card-body strong {
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}
.nearby-card-body span {
  color: var(--muted);
  font-size: 0.85rem;
}
.property-cta-section {
  background: var(--surface-strong);
  padding: 40px;
  border-radius: var(--radius-xl);
  text-align: center;
  margin-top: 48px;
}
.property-cta-section h2 {
  margin-top: 0;
}
.property-cta-section .button {
  margin: 8px;
}
.breadcrumb {
  padding: 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--accent-deep);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span {
  color: var(--muted);
  margin: 0 8px;
}

@media (max-width: 768px) {
  /* Mobile hero: stack, don't overlay. On a phone the gradient caption filled
     most of the frame and buried the photo, so marketing asked for the full
     photo with the community name and address in dark text below it. The box is
     unpinned (a fixed height would clip the now in-flow caption), and the ratio
     moves onto the <img>. It is a flat 2/1 — the shape every hero photo is now
     cut to (scripts/generate-hero-crops.js) — so the phone shows the whole
     photo with nothing cropped, and every community is identical. This used to
     read var(--hero-aspect, 16/9), where the custom property came from a
     per-property `heroAspect` that only six communities set; that field is gone. */
  .property-page-hero:not(.team-page-hero) {
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible;
    border-radius: 0;
  }
  .property-page-hero:not(.team-page-hero) img {
    height: auto;
    aspect-ratio: 2 / 1;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
  .property-page-hero:not(.team-page-hero) .property-page-hero-overlay {
    position: static;
    background: none;
    color: var(--ink);
    padding: 20px 16px 0;
  }
  .property-page-hero:not(.team-page-hero) .property-page-hero-overlay h1 {
    color: var(--ink);
  }
  .property-page-hero:not(.team-page-hero) .property-page-hero-overlay .hero-meta {
    color: var(--muted);
    opacity: 0.8;
  }
  /* The team hero keeps the old fixed strip + gradient caption. */
  .team-page-hero { height: 280px; }
  .property-page-hero-overlay { padding: 20px; }
  .property-page-hero-overlay h1 { font-size: 1.6rem; }
  .property-page-content { padding: 24px 16px 60px; }
  .property-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .property-gallery-grid img { height: 140px; }
  .property-cta-section { padding: 24px; }
}

/* ── Team Page ── */
.team-page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.team-page-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 48px 0 20px;
  color: var(--ink);
}
.team-intro-card {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: 32px 40px;
  margin: 0 0 56px;
  border-left: 3px solid var(--accent);
}
.team-intro {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  max-width: 760px;
}
.team-member-grid {
  display: grid;
  gap: 24px;
}
.team-detail-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: 28px;
}
.team-detail-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.team-detail-avatar-photo {
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 10px rgba(31, 39, 48, 0.12);
}
.team-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-detail-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}
.team-detail-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-deep);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.team-detail-bio {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 768px) {
  .team-page-content { padding: 24px 16px 60px; }
  /* The team photo is wide (~2.3:1); cropping it to a tall mobile frame
     chops the people on the ends. Show it whole at its natural ratio. */
  .team-page-hero { aspect-ratio: auto; max-height: none; height: auto; }
  .team-page-hero img { height: auto; }
  .team-detail-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .team-intro-card { padding: 24px 20px; margin-bottom: 40px; }
  .team-intro { font-size: 1rem; }
}

/* ── Property Grid (3×4 card layout) ─────────────────────────── */
.property-grid-browse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.grid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.grid-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
/* Deliberately ONE ratio for every card, not each photo's own. Per-photo ratios
   were tried and abandoned: they show the whole frame but give each card a
   different image height, so titles within a row start at different heights and
   the grid reads as broken. A thumbnail's job is to be scannable — the full
   frame is one click away on the property page and in the lightbox. */
.grid-card-image-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.grid-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.grid-card:hover .grid-card-image-wrap img {
  transform: scale(1.04);
}
.grid-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.grid-card-body h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--text, #2c2520);
}
.grid-card-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-deep, #8a4528);
  margin: 0;
}
.grid-card-units {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted, #6b6356);
}
.grid-card-neighborhood {
  font-size: 0.85rem;
  color: var(--text-muted, #6b6356);
  margin: 0;
}
.grid-card-detail {
  font-size: 0.82rem;
  color: var(--text-muted, #6b6356);
  margin: 0;
}
.grid-card-commute {
  font-size: 0.82rem;
  color: var(--text-muted, #6b6356);
  margin: 2px 0 0;
}
.grid-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.grid-btn-primary,
.grid-btn-secondary {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}
.grid-btn-primary {
  background: var(--accent, #b45c38);
  color: #fff;
}
.grid-btn-primary:hover {
  background: var(--accent-hover, #9a4c2f);
}
.grid-btn-secondary {
  background: var(--surface-alt, #f5f0eb);
  color: var(--text, #2c2520);
}
.grid-btn-secondary:hover {
  background: var(--border, #e0d6cc);
}

/* ── Hero CTA Card ────────────────────────────────────────────── */
.hero-cta-card.panel-card {
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.hero-cta-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-deep, #8a4528);
  margin: 0;
  padding: 0 28px;
}
.hero-cta-card h2 {
  font-size: 2rem;
  margin: 0;
  padding: 32px 32px 8px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero-cta-subtext {
  color: var(--text-muted, #6b6356);
  font-size: 0.95rem;
  margin: 0;
  padding: 0 32px 28px;
  line-height: 1.55;
  flex: 0.4;
  display: flex;
  align-items: center;
}
.hero-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 32px 28px;
  /* Center the button in the slack between the headline and the features:
     the features below carry margin-top:auto, so a matching auto here splits
     the card's free space evenly above and below the button. No-op on mobile,
     where the card collapses to content height and there's no slack to share. */
  margin-top: auto;
}
/* Coming Soon overlay for disabled features */
.coming-soon-wrapper {
  position: relative;
  width: 100%;
}
.coming-soon-wrapper .hero-cta-btn {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.coming-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}

.hero-cta-btn {
  width: 100%;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  line-height: 1.3;
  /* Stack the label over the description as two centered lines. The base
     .button is a flex row (gap 10px), which otherwise sits the two spans
     side-by-side; switch this button to a column and tighten the gap. */
  flex-direction: column;
  gap: 4px;
}
.hero-btn-label {
  display: block;
  font-weight: 700;
}
.hero-btn-desc {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  opacity: 0.85;
}
.hero-cta-btn.button-primary .hero-btn-desc {
  color: rgba(255,255,255,0.8);
}
.hero-cta-btn.button-secondary .hero-btn-desc {
  color: var(--text-muted, #6b6356);
}
.hero-cta-divider {
  display: none;
}
.hero-cta-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  padding: 4px 32px 32px;
  /* Pinned to the bottom of the card so the slack left by the removed
     hero subtext falls between the button and the features (not below
     them) — keeps the features where they sat before. */
  margin-top: auto;
}
.hero-cta-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-muted, #6b6356);
  line-height: 1.5;
}
.hero-cta-feature-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent-deep, #2d5b57);
  margin-top: 2px;
}