/* Homepage presentation: one type scale, spacing rhythm, and control system. */
:is(.homepage, .local-site) {
  --home-gap: 24px;
  --home-section-space: 48px;
  --home-radius: 16px;
  --home-border: var(--brand-e1e5df,#e2e2e2);
  --home-secondary: #586670;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.homepage :where(.hero-copy, .carousel-heading, .therapist-heading-actions, .footer-group) { min-width: 0; }
.homepage :where(.support, .reading, .therapist-section, .places, .treatment-types) {
  padding-bottom: var(--home-section-space);
}
:is(.homepage, .local-site) .hero { padding-bottom: var(--home-section-space); }
:is(.homepage, .local-site) .hero h1 {
  font-size: clamp(2.25rem, 3.7vw, 3rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.18;
}
/* Both entry points use the same shallow photo frame at every width. */
:is(.homepage, .local-site) .hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.8;
  max-height: 320px;
  overflow: hidden;
  border-radius: var(--home-radius);
}
:is(.homepage, .local-site) .hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
:is(.homepage, .local-site) .hero .search-island {
  min-height: 64px;
  padding: 8px 8px 8px 18px;
  gap: 12px;
  border-radius: var(--home-radius);
  border-color: var(--home-border);
  box-shadow: 0 4px 16px #293b3308;
}
:is(.homepage, .local-site) .hero .search-island:focus-within { border-color: var(--brand-bbc5b8,#bdbdbd); box-shadow: 0 0 0 3px var(--brand-f5f6f3,#f5f5f5); }
:is(.homepage, .local-site) .hero .search-button {
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
}
:is(.homepage, .local-site) .hero .suggested { gap: 8px; margin-top: 14px; }
:is(.homepage, .local-site) .hero .suggested :is(button,a) {
  min-height: 40px;
  padding: 8px 14px;
  font-size: .875rem;
  line-height: 1.5;
  border: 1px solid var(--home-border);
  background: #fff;
}
:is(.homepage, .local-site) .hero .suggested :is(button,a):hover { background: var(--surface); }
.homepage .search-results { border-radius: var(--home-radius); border-color: var(--home-border); padding: 24px; }
.homepage .carousel-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
.homepage .carousel-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.homepage .carousel-controls { gap: 8px; }
.homepage .carousel-controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border-color: var(--home-border);
  box-shadow: none;
  background: #fff;
}
.homepage .carousel-controls button:hover { background: var(--surface); }
.homepage .carousel-controls button[aria-disabled="true"] { opacity: .35; }
.homepage .support-carousel-controls { margin-bottom: 16px; }
.homepage :where(.support-paths, .reading-grid, .therapist-grid, .places-grid, .treatment-grid) {
  gap: var(--home-gap);
  padding-top: 4px;
  padding-bottom: 18px;
  scrollbar-color: var(--brand-e1e5df,#e2e2e2) transparent;
  scroll-padding-inline: 1px;
}
.homepage :where(.support-paths .support-card, .reading-grid .reading-card, .therapist-grid .therapist-card) {
  flex: 0 0 calc((100% - 2 * var(--home-gap)) / 3);
  min-width: 0;
}
.homepage :where(.support-card, .therapist-card) {
  padding: 24px;
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  background: #fff;
}
.homepage :where(.support-card, .therapist-card):hover { border-color: var(--brand-bbc5b8,#bdbdbd); background: #fcfcfc; }
.homepage .support-card { gap: 14px; }
.homepage .support-card h3, .homepage .therapist-info h3 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.015em;
  white-space: normal;
}
.homepage .support-card h3 { margin: 0 0 8px; }
.homepage .support-card p, .homepage .therapist-card > .therapist-focus, .homepage .reading-card > p:not(.category) {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--home-secondary);
}
.homepage .support-card .support-dot { margin-top: 4px; }
.homepage .therapist-card > .therapist-focus { margin: 20px 0 22px; }
.homepage .therapist-info .therapist-credentials { font-size: .8125rem; }
.homepage .therapist-details { font-size: .8125rem; line-height: 1.5; color: var(--home-secondary); }
.homepage .therapist-heading-actions { gap: 20px; }
.homepage .therapist-directory-link { min-height: 44px; font-size: .875rem; line-height: 1.5; font-weight: 500; white-space: normal; }
.homepage .therapist-directory-link:hover { color: var(--blue); text-decoration: none; }
.homepage .reading-card .article-image { border-radius: var(--home-radius); margin-bottom: 16px; }
.homepage .reading-card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.4; margin: 0 0 8px; }
.homepage .reading-card > p:not(.category) { margin: 0 0 20px; }
.homepage .reading-card .article-image .topic-tag, .homepage .places-grid .photo-badge {
  padding: 5px 10px;
  border: 1px solid #ffffffb3;
  box-shadow: none;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
}
.homepage .reading-card .author { gap: 12px; }
.homepage .reading-card .author .author-name { font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.homepage .reading-card .author .author-role { font-size: .8125rem; color: var(--home-secondary); margin-top: 3px; }
.homepage .places-grid .place-card { flex-basis: calc((100% - 3 * var(--home-gap)) / 4); border-radius: var(--home-radius); }
.homepage .place-card img, .homepage .treatment-photo { border-radius: var(--home-radius); }
.homepage .places-grid .place-name, .homepage .treatment-name { font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; margin-top: 12px; }
.homepage .places-grid .place-state { font-size: .875rem; line-height: 1.5; margin-top: 2px; color: var(--home-secondary); }
.homepage .treatment-card { flex-basis: calc((100% - 4 * var(--home-gap)) / 5); }
.homepage .treatment-name { margin-bottom: 0; }
.homepage :where(.support-paths, .reading-grid, .therapist-grid, .places-grid, .treatment-grid):focus-visible,
.homepage :where(.support-card, .therapist-card, .treatment-card):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
.homepage footer { background: #fff; border-color: var(--home-border); padding-top: 40px; }
.homepage .footer-main { gap: 32px; padding-bottom: 32px; }
.homepage .footer-group h2 { font-size: .9375rem; font-weight: 500; line-height: 1.5; margin-bottom: 12px; }
.homepage .footer-group a { font-size: .9375rem; line-height: 1.6; margin-bottom: 8px; color: var(--home-secondary); }
.homepage .footer-brand p { font-size: .9375rem; line-height: 1.6; color: var(--home-secondary); }
.homepage .footer-bottom { font-size: .8125rem; border-color: var(--home-border); padding-top: 20px; }
@media (min-width: 701px) and (max-width: 1000px) {
  :is(.homepage, .local-site) { --home-gap: 20px; }
  .homepage :where(.support-paths .support-card, .reading-grid .reading-card, .therapist-grid .therapist-card) { flex-basis: calc((100% - var(--home-gap)) / 2); }
  .homepage .places-grid .place-card { flex-basis: calc((100% - 2 * var(--home-gap)) / 3); }
  .homepage .treatment-card { flex-basis: calc((100% - 3 * var(--home-gap)) / 4); }
}
@media (max-width: 700px) {
  :is(.homepage, .local-site) { --home-gap: 16px; --home-section-space: 32px; }
  :is(.homepage, .local-site) .hero h1 { font-size: 2.25rem; }
  :is(.homepage, .local-site) .hero .search-island { padding-left: 14px; gap: 8px; }
  :is(.homepage, .local-site) .hero .search-button { padding-inline: 16px; }
  .homepage .carousel-heading { gap: 16px; margin-bottom: 16px; align-items: center; }
  .homepage .carousel-heading h2 { font-size: 1.5rem; }
  .homepage :where(.support-paths .support-card, .reading-grid .reading-card, .therapist-grid .therapist-card) { flex-basis: 86%; }
  .homepage :where(.support-card, .therapist-card) { padding: 22px; }
  .homepage .therapist-heading-actions { width: 100%; justify-content: space-between; }
  .homepage .places-grid .place-card { flex-basis: 70%; }
  .homepage .treatment-card { flex-basis: 44%; }
  .homepage .reading-card h3 { font-size: 1.1875rem; }
  .homepage .footer-main { gap: 24px; }
  .homepage .footer-bottom { align-items: flex-start; }
}
@media (max-width: 370px) {
  :is(.homepage, .local-site) .hero h1 { font-size: 2rem; }
  .homepage :where(.support-card, .therapist-card) { padding: 20px; }
}

.homepage .reading-image-link { display: block; height: 100%; }
.homepage .reading-image-link:focus-visible { outline: 3px solid var(--blue); outline-offset: -5px; border-radius: var(--home-radius); }

/* Featured reads: five square covers and a single title line. */
.homepage .reading-grid{align-items:flex-start}
.homepage .reading-grid .reading-card{flex-basis:calc((100% - 4 * var(--home-gap)) / 5)}
.homepage .reading-card .article-image{aspect-ratio:1;margin-bottom:12px}
.homepage .reading-card h3{margin:0;font-size:1rem;line-height:1.5;font-weight:500;letter-spacing:-.01em;min-width:0}
.homepage .reading-card h3 a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homepage .reading-card .article-image .topic-tag{top:10px;left:10px;max-width:calc(100% - 20px);font-size:.75rem;padding:4px 8px}
@media(min-width:701px) and (max-width:1000px){.homepage .reading-grid .reading-card{flex-basis:calc((100% - 3 * var(--home-gap)) / 4)}}
@media(max-width:700px){.homepage .reading-grid .reading-card{flex-basis:44%}}

/* Four square support pathways across the desktop row. */
.homepage .support-paths{align-items:flex-start}
.homepage .support-paths .support-card{aspect-ratio:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px}
.homepage .support-paths .support-card .support-dot{margin-top:0}
@media(min-width:1001px){.homepage .support-paths .support-card{flex-basis:calc((100% - 3 * var(--home-gap)) / 4)}}
@media(max-width:700px){.homepage .support-paths .support-card{gap:16px}}

/* People previews use the same square desktop rhythm as support pathways. */
.homepage .therapist-grid{align-items:flex-start}
.homepage .therapist-grid .therapist-card{aspect-ratio:1;padding:20px}
.homepage .therapist-identity{gap:10px}
.homepage .therapist-card .therapist-avatar{width:40px;height:40px;flex-basis:40px}
.homepage .therapist-info h3{font-size:1rem;line-height:1.4;letter-spacing:-.01em}
.homepage .therapist-card>.therapist-focus{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;font-size:.875rem;line-height:1.5;margin:14px 0}
.homepage .therapist-details{margin-top:auto;align-items:flex-start;flex-direction:column;gap:3px;padding-top:10px}
.homepage .therapist-format{padding:0;background:transparent;border-radius:0}
@media(min-width:1001px){.homepage .therapist-grid .therapist-card{flex-basis:calc((100% - 3 * var(--home-gap)) / 4)}}

/* Browse quietly without a scrollbar appearing beneath each lane. */
.homepage .support-paths,.homepage .reading-grid,.homepage .therapist-grid,.homepage .places-grid,.homepage .treatment-grid{scrollbar-width:none;-ms-overflow-style:none}
.homepage .support-paths::-webkit-scrollbar,.homepage .reading-grid::-webkit-scrollbar,.homepage .therapist-grid::-webkit-scrollbar,.homepage .places-grid::-webkit-scrollbar,.homepage .treatment-grid::-webkit-scrollbar{display:none;width:0;height:0}

/* Support tiles: a quiet marker above a grounded block of useful text. */
.homepage .support-paths .support-card{padding:24px;gap:20px;background:linear-gradient(180deg,#fff 35%,var(--brand-f5f6f3,#f5f5f5));border-color:var(--brand-e1e5df,#e2e2e2);transition:border-color .18s ease,background-color .18s ease}
.homepage .support-paths .support-card>div{width:100%;margin-top:auto}
.homepage .support-paths .support-card .support-dot{width:18px;height:18px;flex-basis:18px}
.homepage .support-paths .support-card h3{font-size:1.25rem;line-height:1.25;font-weight:500;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
.homepage .support-paths .support-card p{font-size:.9375rem;line-height:1.55;color:#5b6872;margin:0;text-wrap:pretty}
.homepage .support-paths .support-card:hover{border-color:var(--brand-bbc5b8,#bdbdbd);background:var(--brand-f5f6f3,#f5f5f5)}
.homepage .support-paths .support-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px;background:var(--brand-f5f6f3,#f5f5f5)}
@media(max-width:700px){.homepage .support-paths .support-card{padding:22px;gap:18px}}
@media(max-width:370px){.homepage .support-paths .support-card{padding:20px}.homepage .support-paths .support-card h3{font-size:1.1875rem}}
@media(prefers-reduced-motion:reduce){.homepage .support-paths .support-card{transition:none}}
/* Distinct pathway accents within the shared white tile system. */
.homepage .support-paths .support-card:nth-child(4n+2) .support-dot{background:#da945e}
.homepage .support-paths .support-card:nth-child(4n+3) .support-dot{background:#8971b0}
.homepage .support-paths .support-card:nth-child(4n) .support-dot{background:#579a91}

/* The surrounding search field supplies the focus indicator. */
.platform-system :is(.search-island,.header-search,.mhc-mobile-input) input:focus,
.platform-system :is(.search-island,.header-search,.mhc-mobile-input) input:focus-visible {
  outline: none;
  box-shadow: none;
}
.hero .suggested a { display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;color:var(--ink); }

.homepage .therapist-card .therapist-silhouette{opacity:1;display:block;width:100%;height:100%;object-fit:contain}
.homepage .therapist-card .therapist-avatar{background:transparent;overflow:hidden}
