@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/static/fonts/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
.hh-home {
  --home-paper: #fff;
  --home-tint: #f3f6f5;
  --home-ink: #23332f;
  --home-secondary: #53625b;
  --home-rule: #d4dfd9;
  --home-green: #e1efe5;
  --home-blue: #2057d4;
  --home-yellow: #ffdc55;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background: var(--home-paper);
  color: var(--home-ink);
}
:root[data-theme="dark"] .hh-home {
  --home-paper: #171c1a;
  --home-tint: #202723;
  --home-ink: #f2f5ef;
  --home-secondary: #b8c8bd;
  --home-rule: #3d4b43;
  --home-green: #263d32;
  --home-blue: #abc6ff;
}
.hh-home *, .hh-home *::before, .hh-home *::after { letter-spacing: 0; }
.hh-home ::selection { color: #23332f; background: #ffdc55; }
.hh-home :focus-visible { outline: 3px solid var(--home-blue); outline-offset: 5px; }
.hh-home .topbar { background: var(--home-paper); border-color: var(--home-rule); }
.hh-home .nav a:not(.primary-button) { color: var(--home-ink); }
.hh-home .primary-button { background: #2057d4; color: #fff; }
.hh-home .primary-button:hover { background: #1745ac; }
.hh-home .footer { border-color: var(--home-rule); background: var(--home-paper); }
.hh-home h1, .hh-home h2, .hh-home h3, .home-tagline, .home-plan-price {
  font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;
  font-optical-sizing: auto;
}
.home-shell { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.home-alert { padding-block: 16px; }
.home-section { padding-block: 100px; scroll-margin-top: 100px; }
.home-section h2, .home-final h2 { margin: 0; font-size: 52px; line-height: 1.07; font-weight: 700; text-wrap: balance; }
.home-section p { font-size: 18px; line-height: 1.65; }
.home-heading > p { max-width: 43ch; color: var(--home-secondary); margin: 24px 0; }
.home-heading h2 span { color: var(--home-blue); }
.home-button { display: inline-flex; min-height: 52px; padding: 13px 22px; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: background-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1); }
.home-button .icon { transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.home-button-yellow { background: var(--home-yellow); color: #23332f; }
.home-button-yellow:hover { background: #ffe780; color: #23332f; }
.home-button-blue { background: #2057d4; color: #fff; }
.home-button-blue:hover { background: #1745ac; color: #fff; }
.home-button-ink { background: #23332f; color: #fff; }
.home-button-ink:hover { background: #364d43; color: #fff; }
.home-button:active { transform: scale(.98); }
.home-text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--home-blue); font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 6px; }
.home-text-link:hover { color: var(--home-ink); }

.home-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(640px, calc(100svh - 172px)); display: grid; background: #23332f; }
.home-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(13 30 27 / 61%); }
.home-hero-inner { position: relative; display: flex; align-items: center; padding-block: 48px; }
.home-hero-copy { max-width: 620px; }
.home-hero h1 { margin: 0 0 8px; color: #ffdc55; font-size: 84px; font-weight: 800; line-height: 1.07; }
.home-tagline { margin: 0; color: #fff; font-size: 48px; font-weight: 600; line-height: 1.08; }
.home-tagline span { position: relative; }
.home-intro { max-width: 41ch; margin: 24px 0 26px; font-size: 18px; line-height: 1.6; color: #fff; }
.home-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.home-hero-link { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.home-hero-link:hover { color: #ffdc55; }
.home-hero-note { margin: 24px 0 0; color: #fff; font-size: 14px; }
.home-photo-caption { position: absolute; bottom: 32px; right: 0; color: #fff; font-size: 14px; border-bottom: 1px solid #fff; padding-bottom: 6px; }
.home-hero :focus-visible { outline-color: #ffdc55; }
.home-arrive { animation: home-arrive 650ms cubic-bezier(.23,1,.32,1) both; }
.home-tagline.home-arrive { animation-delay: 60ms; }
.home-intro.home-arrive { animation-delay: 120ms; }
.home-actions.home-arrive { animation-delay: 180ms; }
.home-hero-note.home-arrive { animation-delay: 220ms; }
@keyframes home-arrive { from { transform: translateY(14px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }

.hh-home .home-launch { margin: 0; padding: 28px 0; background: #ffdc55; color: #23332f; border: 0; border-radius: 0; }
.home-launch-inner { display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 28px; }
.home-launch-title { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.home-launch p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.home-launch small { display: block; font-size: 13px; line-height: 1.5; color: #394a34; }
.hh-home .home-launch a { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; color: #23332f; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }

.home-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.home-how, .home-community, .home-final { background-image: url("/static/home-paper.png"); }
.home-heading .home-margin-note { margin-top: 48px; font-size: 16px; font-weight: 600; color: var(--home-ink); transform: rotate(-2deg); width: fit-content; border-bottom: 2px solid #e6bf33; padding-bottom: 8px; }
.home-steps { margin: 0; padding: 0; list-style: none; }
.home-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--home-rule); }
.home-steps li:first-child { padding-top: 4px; }
.home-step-number { font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; line-height: 1.2; color: var(--home-blue); }
.home-steps h3 { margin: 0 0 8px; font-size: 23px; font-weight: 700; }
.home-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--home-secondary); }
.home-search { background: var(--home-tint); border-block: 1px solid var(--home-rule); }
.home-search-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.home-checks { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; }
.home-checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.home-checks .icon { color: var(--home-blue); }
.home-search-preview { background: var(--home-paper); border: 1px solid var(--home-rule); border-radius: 8px; box-shadow: 0 18px 36px rgb(35 51 47 / 8%); }
.home-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--home-rule); font-weight: 700; font-size: 16px; }
.home-preview-top > span { display: flex; align-items: center; gap: 10px; }
.home-preview-top small { font-size: 13px; font-weight: 500; color: var(--home-secondary); }
.home-preview-content { padding: 30px 28px; }
.home-preview-location { display: flex; justify-content: space-between; gap: 12px; color: var(--home-secondary); font-size: 14px; }
.home-preview-location span { color: var(--home-blue); }
.home-preview-content h3 { margin: 20px 0; font-size: 29px; line-height: 1.2; font-weight: 700; }
.home-preview-content .home-preview-price { font-size: 30px; margin: 0 0 24px; line-height: 1.2; font-weight: 700; color: var(--home-ink); }
.home-preview-price small { font-size: 14px; font-weight: 400; color: var(--home-secondary); }
.home-preview-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 20px 0; border-block: 1px solid var(--home-rule); }
.home-preview-details dt { font-size: 13px; color: var(--home-secondary); margin-bottom: 7px; }
.home-preview-details dd { margin: 0; font-size: 15px; font-weight: 600; }
.home-match-reason { display: flex; gap: 12px; margin-top: 24px; }
.home-match-reason .icon { color: var(--home-blue); margin-top: 3px; }
.home-match-reason strong { font-size: 15px; }
.home-match-reason p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--home-secondary); }
.home-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 26px; font-size: 13px; border-top: 1px solid var(--home-rule); color: var(--home-secondary); }

.home-community { background: var(--home-green); }
.home-community-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.home-community-heading h2 span { color: var(--home-ink); text-decoration: underline; text-decoration-color: #99bca2; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.home-community-heading p { margin: 0 0 4px; max-width: 45ch; color: var(--home-ink); }
.home-city-list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 48px 0 28px; padding: 0; border-block: 1px solid var(--home-rule); }
.home-city-list li { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 12px; border-right: 1px solid var(--home-rule); }
.home-city-list li:last-child { border-right: 0; }
.home-city-list img { width: 52px; height: 64px; object-fit: contain; }
.home-city-list span { font-family: "Bricolage Grotesque", sans-serif; font-size: 23px; font-weight: 600; }
.home-community-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; font-size: 16px; align-items: center; }

.home-memberships { position: relative; background: var(--home-paper); }
.home-plans-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; margin-bottom: 42px; }
.home-plans-heading p { color: var(--home-secondary); margin: 0; max-width: 40ch; }
.home-plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.home-plan { padding: 32px; border: 1px solid var(--home-rule); border-radius: 8px; background: var(--home-paper); }
.home-plan-complete { border-color: var(--home-blue); background: var(--home-tint); }
.home-plan-name { display: flex; align-items: center; gap: 14px; }
.home-plan-name .icon { color: var(--home-blue); width: 26px; height: 26px; }
.home-plan h3 { margin: 0; font-size: 28px; }
.home-plan .home-plan-description { font-size: 16px; color: var(--home-secondary); margin: 12px 0 28px; }
.home-plan .home-plan-price { font-size: 42px; line-height: 1.2; font-weight: 700; margin: 0 0 28px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.home-plan-price span { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; color: var(--home-secondary); }
.home-plan ul { display: grid; gap: 16px; list-style: none; padding: 24px 0 0; margin: 0; border-top: 1px solid var(--home-rule); }
.home-plan li { display: flex; gap: 12px; align-items: start; line-height: 1.5; font-size: 16px; }
.home-plan li .icon { margin-top: 2px; color: var(--home-blue); }
.home-plan-bottom { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 28px; }
.home-plan-bottom small { max-width: 55ch; color: var(--home-secondary); font-size: 13px; line-height: 1.6; }
.home-final { background: #ffdc55; color: #23332f; padding-block: 64px; }
.home-final-inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.home-final h2 { color: #23332f; }
.home-final h2 span { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.home-final p { margin: 24px 0 0; font-size: 18px; }
.home-final :focus-visible { outline-color: #23332f; }

@media (hover: hover) and (pointer: fine) {
  .home-button:hover .icon { transform: translateX(3px); }
}
@media (min-width: 1800px) {
  .home-shell { width: min(1400px, calc(100% - 120px)); }
  .home-hero h1 { font-size: 96px; }
  .home-tagline { font-size: 56px; }
}
@media (max-width: 1000px) {
  .home-shell { width: calc(100% - 48px); }
  .home-how-grid, .home-search-grid, .home-community-heading { gap: 40px; }
  .home-section h2, .home-final h2 { font-size: 42px; }
  .home-launch-inner { grid-template-columns: 1fr auto; gap: 12px 28px; }
  .home-launch-title { grid-column: 1 / -1; }
  .home-city-list span { font-size: 20px; }
  .home-plan { padding: 26px; }
  .home-plan .home-plan-price { font-size: 36px; }
  .home-plans-heading { grid-template-columns: 1.2fr 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .home-shell { width: calc(100% - 40px); }
  .home-section { padding-block: 64px; scroll-margin-top: 90px; }
  .home-hero { min-height: max(420px, min(620px, calc(100svh - 150px))); }
  .home-hero-photo { object-position: 66% center; }
  .home-hero::before { background: rgb(13 30 27 / 67%); }
  .home-hero-inner { padding-block: 32px; }
  .home-hero-copy { max-width: 430px; }
  .home-hero h1 { font-size: 56px; }
  .home-tagline { font-size: 36px; }
  .home-intro { font-size: 16px; line-height: 1.55; margin-block: 20px; max-width: 35ch; }
  .home-actions { gap: 8px 20px; }
  .home-photo-caption { display: none; }
  .home-hero-note { font-size: 13px; margin-top: 16px; }
  .hh-home .home-launch { padding-block: 24px; }
  .home-launch-inner { display: flex; flex-direction: column; gap: 12px; align-items: start; }
  .home-launch-title { font-size: 17px; }
  .home-how-grid, .home-search-grid, .home-community-heading, .home-plans-heading { grid-template-columns: 1fr; gap: 32px; }
  .home-heading > p { max-width: 45ch; font-size: 17px; }
  .home-heading .home-margin-note { margin-top: 24px; font-size: 15px; }
  .home-steps li { gap: 16px; padding-block: 22px; }
  .home-steps h3 { font-size: 22px; }
  .home-preview-content { padding: 24px; }
  .home-community-heading { gap: 24px; }
  .home-community-heading p { font-size: 17px; }
  .home-city-list { grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .home-city-list li:nth-child(2) { border-right: 0; }
  .home-city-list li:nth-child(-n+2) { border-bottom: 1px solid var(--home-rule); }
  .home-community-footer { font-size: 15px; gap: 16px; }
  .home-plan-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-plan-bottom { flex-direction: column; align-items: start; gap: 20px; }
  .home-plans-heading { margin-bottom: 32px; gap: 20px; }
  .home-plans-heading p { font-size: 17px; }
  .home-final { padding-block: 48px; }
  .home-final-inner { flex-direction: column; align-items: start; gap: 28px; }
  .home-final p { font-size: 17px; }
}
@media (max-width: 370px) {
  .home-shell { width: calc(100% - 32px); }
  .home-hero h1 { font-size: 46px; }
  .home-tagline { font-size: 32px; }
  .home-intro { margin-block: 16px; }
  .home-button { padding-inline: 15px; font-size: 15px; gap: 10px; }
  .home-section h2, .home-final h2 { font-size: 36px; }
  .home-preview-top, .home-preview-content, .home-preview-footer { padding-inline: 20px; }
  .home-preview-content h3 { font-size: 25px; }
  .home-plan { padding: 22px; }
  .home-plan .home-plan-price { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-arrive { animation: none; }
  .home-button, .home-button .icon { transition: none; }
}