/* Reference homepage. The private portal and wizard keep their existing styles. */
.homepage { --container: 80rem; }
.home-hero { position: relative; background: #eff6f7; isolation: isolate; overflow: hidden; }
.home-hero-photo { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.home-hero-wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #ffffffea 0%, #ffffffd9 29%, #ffffff80 47%, #ffffff00 66%); }
.home-hero-inner { position: relative; min-height: 32rem; display: flex; align-items: center; padding: 3.5rem 1.75rem 2rem; }
.home-hero-copy { width: 57%; }
.home-hero h1 { position: relative; font-size: clamp(2.75rem, 4.7vw, 4.45rem); line-height: .99; letter-spacing: -.045em; margin: 0 0 1.05rem; }
.home-hero-copy > p { font-size: 1.2rem; line-height: 1.4; margin-bottom: 1.5rem; }
.home-search-label { color: var(--navy); }
.home-search { display: flex; align-items: center; gap: .8rem; max-width: 40rem; min-height: 3.7rem; padding: .25rem .3rem .25rem 1.3rem; background: white; border: 1px solid #b9ced9; border-radius: 3rem; box-shadow: 0 3px 14px #082c4c10; }
.home-search > .icon { color: #345978; }
.home-search input { width: 100%; min-width: 0; padding: .5rem 0; color: var(--navy); background: white; border: 0; border-radius: .3rem; font-size: 1rem; }
.home-search input::placeholder { color: #526b80; opacity: 1; }
.home-search button { display: grid; place-items: center; min-width: 3.1rem; height: 3.1rem; padding: .75rem; border: 0; border-radius: 50%; background: var(--teal); color: white; cursor: pointer; }
.home-search-shortcuts { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin-top: .65rem; }
.home-search-shortcuts form { display: flex; margin: 0; }
.home-search-shortcuts :is(button, a) { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .85rem; background: #e9f5f9f5; color: var(--navy); font-size: .875rem; font-weight: 650; border: 0; border-radius: 1rem; text-decoration: none; cursor: pointer; }
.home-search-shortcuts :is(button,a):hover { background: #d8eef3; }
.home-content { display: grid; gap: 1.2rem; margin-block: 1.2rem; }
.home-panel { background: #edf8fa; border-radius: 1rem; padding: 1.45rem; min-width: 0; }
.homepage .home-panel h2, .homepage .home-community-banner h2 { font-size: clamp(1.5rem, 2.15vw, 1.85rem); line-height: 1.15; margin-bottom: .5rem; }
.home-panel > p, .home-panel-heading p, .home-theme-intro p { font-size: 1rem; line-height: 1.35; margin: 0; color: #3e6079; }
.home-theme-strip { display: grid; grid-template-columns: 1.55fr repeat(6, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.homepage .home-theme-intro h2 { font-size: 1.55rem; }
.home-theme-intro { align-self: center; }
.home-theme-strip form { margin: 0; min-width: 0; }
.home-theme { display: grid; grid-template-columns: 1fr auto; align-content: start; align-items: end; gap: .6rem .25rem; width: 100%; min-height: 8.3rem; height: 100%; padding: .9rem; text-align: left; border: 1px solid transparent; border-radius: 1.2rem; background: #fff; color: var(--navy); font-size: .9375rem; font-weight: 700; line-height: 1.25; cursor: pointer; }
.home-theme:hover { border-color: var(--teal); background: #faffff; }
.home-theme > .icon { width: 1rem; height: 1rem; }
.home-icon { display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 1rem; }
.home-theme .home-icon { grid-column: 1 / -1; }
.home-icon .icon { width: 2rem; height: 2rem; }
.home-icon-amber { background: #fff2dd; color: #b76800; }
.home-icon-orange { background: #fff0e2; color: #ba5d0a; }
.home-icon-purple { background: #f0ebff; color: #6550c7; }
.home-icon-pink { background: #ffebf4; color: #cb2878; }
.home-icon-green { background: #e3f6ef; color: #008264; }
.home-discover-row { display: grid; grid-template-columns: 1.87fr 1fr; gap: .9rem; }
.home-panel-heading { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.home-panel-heading > .text-link { margin-left: auto; align-self: center; font-size: .875rem; }
.home-carousel-controls { display: flex; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.home-carousel-controls button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid #e0ebef; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; }
.home-carousel-controls button:first-child .icon { transform: rotate(180deg); }
.home-carousel-controls button:disabled { color: #889ba7; cursor: default; }
.home-events-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; }
.home-events-intro { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.home-events-heading > .home-carousel-controls { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.home-events-heading > .text-link { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; margin-left: 0; }
.home-activity-track { display: grid; grid-auto-columns: calc((100% - 1rem) / 2); grid-auto-flow: column; align-items: stretch; gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: .25rem .15rem .4rem; }
.home-activity-track .activity-card { scroll-snap-align: start; }
/* Compact homepage variant; the shared cards on other pages keep their full size. */
.home-activity-track .activity-visual { aspect-ratio: 2.6 / 1; min-height: 8rem; }
.home-activity-track .activity-date { left: .85rem; bottom: -.75rem; width: 3.5rem; padding: .45rem .25rem; gap: .1rem; }
.home-activity-track .activity-date span { font-size: .75rem; }
.home-activity-track .activity-date strong { font-size: 1.65rem; }
.home-activity-track .activity-visual .places { top: .65rem; right: .65rem; padding: .4rem .6rem; font-size: .8125rem; }
.home-activity-track .activity-card-body { padding: 1.6rem .85rem .75rem; }
.home-activity-track .activity-info h3 { margin-bottom: .5rem; font-size: 1.125rem; line-height: 1.3; }
.home-activity-track .activity-info p { margin-bottom: .75rem; line-height: 1.4; }
.home-activity-track .metadata { font-size: .875rem; }
.home-activity-track .activity-card-footer { gap: .6rem; padding: .65rem .85rem; }
.home-activity-track .activity-card-footer .price { min-height: 2.75rem; padding-block: .45rem; font-size: .9375rem; }
.home-activity-track .activity-card-footer .activity-card-link { min-height: 2.75rem; padding-block: .5rem; font-size: .875rem; }
.home-nearby { container: nearby / inline-size; position: relative; isolation: isolate; overflow: hidden; min-height: 36rem; background: #003643; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.home-nearby::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(115deg, rgba(0, 34, 47, .94) 0%, rgba(0, 34, 47, .86) 23%, rgba(0, 34, 47, .08) 63%), linear-gradient(180deg, rgba(0, 37, 48, .5), rgba(0, 37, 48, .02) 65%, rgba(0, 37, 48, .15)); pointer-events: none; }
.home-nearby img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: 50% center; pointer-events: none; }
.home-nearby .home-nearby-markers { z-index: 1; }
.home-nearby-copy { position: relative; z-index: 2; width: 100%; min-width: 0; color: #fff; }
.home-nearby-label { display: inline-block; max-width: 100%; padding: .35rem .75rem; margin-bottom: 1rem; border: 1px solid #527b86; border-radius: 2rem; color: #d6eef4; background: #073c4ac9; font-size: .625rem; line-height: 1.3; letter-spacing: .3em; font-weight: 750; text-transform: uppercase; }
.homepage .home-nearby h2 { margin: 0 0 .9rem; color: #fff; font-size: clamp(1.875rem, 8cqi, 3.7rem); line-height: 1.02; letter-spacing: -.035em; }
.home-nearby h2 > span { display: block; }
.home-nearby h2 em { color: #63efdb; font-style: normal; }
.home-nearby-copy > p { margin: 0 0 1.25rem; color: #fff; font-size: 1rem; line-height: 1.45; }
.home-nearby .home-nearby-button { display: inline-flex; width: max-content; max-width: 100%; justify-content: space-between; gap: .7rem; min-height: 3.4rem; margin: 0; padding: .3rem .35rem .3rem 1rem; border: 1px solid #dbe9eb; border-radius: 1.15rem; color: var(--navy); background: #fff; font-size: .9375rem; line-height: 1.25; text-align: left; }
.home-nearby-button > span:first-child { min-width: 0; }
.home-nearby-arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border-radius: 50%; background: var(--teal); color: #fff; }
.home-nearby-arrow .icon { width: 1.3rem; height: 1.3rem; }
.home-nearby .home-nearby-button:hover { color: var(--navy); background: #e8fbf8; border-color: #63efdb; transform: none; }
.home-nearby-note { position: relative; z-index: 2; display: flex; align-items: flex-start; align-self: flex-end; gap: .75rem; width: 17rem; max-width: 100%; min-width: 0; margin-top: auto; padding: 1rem; border: 1px solid #75909880; border-radius: .95rem; color: #fff; background: #1c404b; box-shadow: 0 3px 12px #001d271a; }
.home-nearby-note > div { min-width: 0; }
.home-nearby-note-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #007589; }
.home-nearby-note-icon .icon { width: 1.2rem; height: 1.2rem; }
.home-nearby-note strong { display: block; margin-bottom: .5rem; font-size: .9375rem; line-height: 1.35; }
.home-nearby-note p { margin: 0; color: #e1edf0; font-size: .875rem; line-height: 1.45; }
.home-help-row { display: grid; grid-template-columns: 1.1fr .96fr 1.06fr; gap: .9rem; }
.home-portrait { position: relative; min-width: 0; min-height: 29rem; border-radius: 1rem; overflow: hidden; background: #c5d4cf; }
.home-portrait > img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center 30%; }
.home-portrait-note { position: absolute; left: 1.1rem; bottom: 5.2rem; max-width: 16rem; padding: 1.1rem; background: #fffffff5; border-radius: 1.6rem .8rem 1.6rem .8rem; }
.home-portrait-note p { font-size: 1.2rem; font-weight: 750; font-style: italic; line-height: 1.3; margin: 0 0 .4rem; }
.home-portrait-note a { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; min-height: 2.75rem; }
.home-how { display: flex; flex-direction: column; }
.home-how ol { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.5rem; }
.home-how li { position: relative; display: flex; align-items: start; gap: .85rem; }
.home-how li:not(:last-child)::after { content: ''; position: absolute; top: 3rem; bottom: -1.5rem; left: 1.5rem; border-left: 1px solid #b4dce3; }
.home-how li > span { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; color: white; background: var(--teal); border-radius: 50%; font-weight: 750; }
.home-how h3 { font-size: 1rem; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 .25rem; }
.home-how li p { color: #3e6079; font-size: 1rem; line-height: 1.4; margin: 0; }
.home-how > .button { margin-top: auto; font-size: .9375rem; }
.home-quick { background: #fff7eb; display: flex; flex-direction: column; }
.home-quick-links { display: grid; gap: .35rem; margin-bottom: 1rem; }
.home-quick-links button { display: flex; width: 100%; align-items: center; gap: .55rem; min-height: 2.75rem; border: 1px solid transparent; padding: .25rem .6rem; border-radius: .65rem; background: white; color: #345978; text-align: left; font-size: .875rem; cursor: pointer; }
.home-quick-links button:hover { border-color: #87b5bf; }
.home-quick-links button > .icon { margin-left: auto; width: .95rem; }
.home-quick-links .topic-icon { width: 1.7rem; height: 1.7rem; flex-shrink: 0; border-radius: .5rem; }
.home-quick-links .topic-icon .icon { width: 1.1rem; height: 1.1rem; }
.home-advice { text-align: center; padding: 1rem .6rem .5rem; border-radius: 1rem; background: #e7f3fa; margin-top: auto; }
.home-advice h3 { font-size: .9375rem; margin: 0 0 .3rem; }
.home-advice p { font-size: .875rem; margin-bottom: .15rem; color: #426681; }
.home-advice a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .75rem; font-weight: 750; color: var(--navy); text-decoration: none; }
.home-inspiration-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: .9rem; }
.home-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.home-article-grid article { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; border-radius: 1rem; background: white; min-width: 0; }
.home-article-grid .home-icon { width: 2rem; height: 2rem; flex-shrink: 0; }
.home-article-grid .icon { width: 1.2rem; height: 1.2rem; }
.home-article-grid h3 { font-size: .9375rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; margin-bottom: .5rem; }
.home-article-grid .text-link { font-size: .875rem; line-height: 1.4; }
.home-article-grid .text-link .icon { width: .85rem; }
.home-all-information { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; min-height: 2.75rem; margin-top: .4rem; }
.home-lisa { position: relative; overflow: hidden; isolation: isolate; min-height: 25rem; background: #007f95; }
.home-lisa::after { display: none; }
.home-lisa-copy { position: relative; z-index: 2; width: 61%; min-width: 0; }
.home-lisa-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .75rem; color: #c9fff7; font-size: .75rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.home-lisa-eyebrow .icon { width: 1rem; height: 1rem; }
.homepage .home-lisa h2 { color: #fff; font-size: clamp(1.65rem, 2.4vw, 2.3rem); line-height: 1.08; }
.home-lisa p { color: #fff; font-size: .9375rem; line-height: 1.48; }
.home-lisa .home-lisa-privacy { color: #dcfaf6; font-size: .8125rem; }
.home-lisa .button { font-size: .875rem; padding-inline: 1rem; }
.home-lisa-number { display: inline-flex; align-items: center; gap: .7rem; min-height: 3.75rem; margin-top: .25rem; padding: .65rem 1rem; border-radius: 1rem; color: var(--navy); background: #fff; text-decoration: none; }
.home-lisa-number:hover { color: #006779; transform: translateY(-1px); }
.home-lisa-number:focus-visible { outline-color: #fff; outline-offset: .2rem; }
.home-lisa-number > .icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; color: #007e91; }
.home-lisa-number span { display: grid; gap: .05rem; }
.home-lisa-number small { color: #47677e; font-size: .6875rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.home-lisa-number strong { color: var(--navy); font-size: 1.1rem; line-height: 1.2; white-space: nowrap; }
.home-lisa > img { position: absolute; z-index: 1; width: 58%; max-width: none; height: auto; right: -4%; bottom: -17%; pointer-events: none; filter: drop-shadow(0 .8rem 1rem #002c3652); }
.home-community-banner { background: linear-gradient(90deg, #e1f3faf0, #e1f3faac), url('../images/home-family.webp') center 37% / cover; }
.home-community-banner > .container { padding: 1.8rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.home-community-banner p { margin: 0; font-size: 1rem; line-height: 1.4; }
.home-community-banner .button { background: #ffb51d; color: #082c4c; border-color: #ffb51d; border-radius: 2rem; flex-shrink: 0; font-size: .9375rem; }
@media (max-width: 74rem) {
    .home-lisa p { max-width: calc(100% - 1rem); }
    .home-theme-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .home-theme-intro { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; }
    .home-theme-intro br { display: none; }
    .home-theme-intro h2 { margin: 0; }
    .home-panel-heading { flex-wrap: wrap; }
    .home-panel-heading > .text-link { margin-left: 0; }
    .home-carousel-controls { margin-left: auto; }
    .home-hero-inner { padding-inline: 1rem; }
    .home-hero-copy { width: 62%; }
    .home-article-grid { grid-template-columns: 1fr; }
    .home-article-grid article { padding: .6rem; }
    .home-article-grid h3 { margin: 0; }
}
@media (max-width: 58rem) {
    .home-events-intro { grid-row: 1; }
    .home-events-heading > .text-link { grid-column: 1 / -1; }
    html:is([data-text-size="150"], [data-text-size="200"]) .home-events-intro { grid-column: 1 / -1; grid-row: 2; }
    html:is([data-text-size="150"], [data-text-size="200"]) .home-events-heading > .text-link { grid-row: 3; }
    .home-discover-row { grid-template-columns: 1.5fr 1fr; }
    .home-help-row { grid-template-columns: 1fr 1fr; }
    .home-portrait { grid-row: span 2; }
    .home-quick { grid-column: 2; }
    .home-advice { margin-top: 0; }
    .home-theme-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-inspiration-row { grid-template-columns: 1fr 1fr; }
    .home-community-banner > .container { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .home-lisa { min-height: 27rem; }
    .home-lisa-copy { width: 65%; }
    .home-lisa > img { width: 62%; right: -7%; bottom: -13%; }
}
@media (max-width: 40rem) {
    .home-hero-photo { position: relative; height: 17rem; object-position: right center; }
    .home-hero-wash { display: none; }
    .home-hero-inner { min-height: 0; padding: 1.5rem .25rem; }
    .home-hero-copy { width: 100%; }
    .home-hero h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
    .desktop-break { display: none; }
    .home-content { gap: 1rem; }
    .home-panel { padding: 1rem; }
    .home-theme-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .home-theme-intro { display: block; margin-bottom: .5rem; }
    .home-theme-intro h2 { margin-bottom: .4rem; }
    .home-theme { min-height: 7rem; }
    .home-discover-row, .home-help-row, .home-inspiration-row { grid-template-columns: minmax(0,1fr); gap: 1rem; }
    .home-activity-track { grid-auto-columns: 100%; }
    .home-nearby { min-height: 36rem; }
    .home-portrait { grid-row: auto; min-height: 27rem; }
    .home-quick { grid-column: auto; }
    .home-lisa { min-height: 35rem; padding-bottom: 14rem; }
    .home-lisa-copy { width: 100%; }
    .home-lisa > img { width: 78%; right: -10%; bottom: -14%; }
    .home-community-banner > .container { padding-inline: 0; }
}
@media (max-width: 22rem) {
    .home-lisa { min-height: 38rem; padding-bottom: 16rem; }
    .home-lisa > img { width: 90%; right: -18%; bottom: -11%; }
}
html[data-text-size="150"] .home-hero-copy, html[data-text-size="200"] .home-hero-copy { width: 100%; }
html[data-text-size="150"] .home-hero-wash, html[data-text-size="200"] .home-hero-wash { background: #ffffffed; }
html[data-text-size="200"] .home-theme-strip { grid-template-columns: minmax(0, 1fr); }
html[data-text-size="200"] :is(.home-discover-row, .home-help-row, .home-inspiration-row) { grid-template-columns: minmax(0, 1fr); }
html[data-text-size="200"] .home-quick { grid-column: auto; }
html[data-text-size="200"] .home-portrait { min-height: 22rem; }
html[data-text-size="200"] .home-lisa { min-height: 0; padding-bottom: 1.5rem; }
html[data-text-size="200"] .home-lisa-copy { width: 100%; }
html[data-text-size="200"] .home-lisa > img { display: none; }
html[data-text-size="200"] .home-nearby { min-height: 0; }
html[data-text-size="200"] .home-nearby img { display: none; }
html[data-text-size="200"] .home-nearby::before { display: none; }
html:is([data-text-size="150"],[data-text-size="200"],.display-spacing) .home-nearby-note { width: 100%; max-width: none; }
html:is([data-text-size="150"],.display-spacing) .home-nearby::before { background: #00222fde; }
html[data-text-size="200"] .home-activity-track { grid-auto-columns: 100%; }
html[data-text-size="200"] .home-theme-intro, html[data-text-size="200"] .home-community-banner > .container { display: block; }
html.display-contrast .home-hero-photo { display: none; }
html.display-contrast .home-nearby img, html.display-contrast .home-nearby::before, html.display-contrast .home-lisa > img, html.display-contrast .home-lisa::after { display: none; }
html.display-contrast .home-portrait-note { position: relative; left: auto; bottom: auto; margin: 1rem; }
@media (prefers-reduced-motion: reduce) { .home-activity-track { scroll-behavior: auto; } }
@media (forced-colors: active) { .home-nearby img, .home-nearby::before { display: none; } }
