.hero { align-items:center; display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1.45fr .65fr; min-height:min(42rem,calc(100vh - 5.25rem)); padding-block:clamp(3rem,8vw,7rem); position:relative; }
.hero__content,.hero-card { position:relative; z-index:1; }
.hero__content { grid-column:1; }
.hero h1 { max-width:18ch; }
.hero-card { align-self:start; grid-column:2; justify-self:start; margin-left:clamp(-6.25rem,-7vw,-2rem); margin-top:0; width:min(100%,22rem); }
.hero__landscape { bottom:clamp(2rem,13vw,5rem); pointer-events:none; position:absolute; right:clamp(-7rem,-4vw,-4rem); transform:none; width:clamp(24rem,39vw,41rem); z-index:0; }
.hero__landscape img { display:block; filter:drop-shadow(.45rem .55rem 0 rgb(185 208 188 / 65%)); height:auto; width:100%; }
.hero__copy { color:#40564e; font-size:clamp(1.08rem,2vw,1.3rem); max-width:38rem; }
.hero__actions { align-items:center; display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:2rem; }
.hero__project-note { align-items:flex-start; background:#edf5ec; border:1px solid #c7dcc8; border-radius:.85rem; display:flex; gap:.75rem; margin:2rem 0 0; max-width:31rem; padding:.85rem 1rem; }
.hero__project-note > span { color:#2f6d52; font-size:1.25rem; line-height:1; }
.hero__project-note p { color:#2f6d52; font-size:.72rem; font-weight:800; letter-spacing:.08em; margin:0 0 .25rem; text-transform:uppercase; }
.hero__project-note strong { color:#17362e; font-size:.92rem; line-height:1.35; }
.hero-card { background:#d9e6d8; border-radius:1.25rem; box-shadow:.75rem .75rem 0 #b9d0bc; padding:2rem; transform:rotate(2deg); }
.hero-card__tag { color:#2f6d52; font-size:.78rem; font-weight:800; letter-spacing:.08em; margin-bottom:1rem; text-transform:uppercase; }
.hero-card h2 { font-size:clamp(1.8rem,3vw,2.5rem); max-width:8ch; }
.hero-card p:not(.hero-card__tag) { color:#40564e; }
.hero-card__host-meta { align-items:center; display:flex; font-size:.85rem; gap:.45rem; margin-top:.9rem; }
.hero-card__host { font-size:inherit; gap:.4rem; }
.hero-card__host-meta .experience-card__places { margin:0; }
.avatar-stack { display:flex; margin-top:1.75rem; }
.avatar-stack span { align-items:center; background:#fff; border:2px solid #d9e6d8; border-radius:50%; display:flex; font-size:.75rem; font-weight:800; height:2rem; justify-content:center; margin-right:-.45rem; width:2rem; }
.avatar-stack span:nth-child(2) { background:#f7d6aa; }
.avatar-stack span:nth-child(3) { background:#c8d5ef; }
.steps { display:grid; gap:clamp(3rem,6vw,5.5rem); grid-template-columns:repeat(3,1fr); list-style:none; margin:2.5rem 0 0; padding:0; }
.steps li { background:#fff; border:1px solid #d8ddd5; border-radius:1.25rem; display:flex; flex-direction:column; gap:.75rem; min-height:100%; padding:1.5rem; position:relative; }
.steps li:nth-child(2) { background:#edf5ec; }
.steps li:nth-child(3) { background:#f4eee3; }
.steps li::before { content:none; }
.steps li:not(:last-child)::after { border-radius:50%; border-top:2px dashed #9ab99b; content:""; height:1.25rem; left:100%; position:absolute; top:7.5rem; transform:rotate(-4deg); width:clamp(3rem,6vw,5.5rem); z-index:1; }
.steps li:nth-child(2)::after { border-bottom:2px dashed #9ab99b; border-top:0; top:calc(7.5rem + 1.25rem); transform:rotate(4deg); }
.steps img { height:auto; object-fit:contain; object-position:center; width:100%; }
.steps strong { font-size:1.2rem; }
.steps li > span { color:#52635b; }
.steps__link { color:#1f634a; font-weight:800; text-underline-offset:.2rem; }
.activity-shortcuts__grid { display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); }
.activity-shortcuts__grid a { align-items:center; background:#fff; border:1px solid #d8ddd5; border-radius:1rem; color:#17362e; display:flex; font-size:.95rem; font-weight:800; gap:.75rem; min-height:5.5rem; overflow:hidden; padding:1rem; position:relative; text-decoration:none; transition:box-shadow .2s ease,transform .2s ease; }
.activity-shortcuts__grid a:hover { box-shadow:0 .6rem 1.5rem rgb(23 54 46 / 10%); transform:translateY(-.18rem); }
.activity-shortcuts__icon { align-items:center; background:#d9e6d8; border-radius:.75rem; display:flex; flex:0 0 auto; height:3rem; justify-content:center; width:3rem; }
.activity-shortcuts__icon svg { fill:none; height:1.65rem; stroke:#1f634a; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:1.65rem; }
.activity-shortcuts__grid a:nth-child(2n) .activity-shortcuts__icon { background:#f4eee3; }.activity-shortcuts__grid a:nth-child(3n) .activity-shortcuts__icon { background:#e6ebf6; }
.activity-shortcuts__grid .activity-shortcuts__browse-all { background:#edf3ed; border-style:dashed; }
.activity-shortcuts__grid .activity-shortcuts__browse-all .activity-shortcuts__icon { background:#fff; color:#1f634a; font-size:1.5rem; font-weight:500; }
.more-experiences { margin-top:2.5rem; }
.activity-shortcuts__browse { border-top:1px solid #d8ddd5; margin-top:2.5rem; padding-top:2rem; }
.homepage-faq { max-width:var(--layout-width); }
.homepage-faq__featured { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin-top:2rem; }
.homepage-faq__featured article { background:#fff; border:1px solid #d8ddd5; border-radius:1.25rem; padding:1.5rem; }
.homepage-faq__featured article:nth-child(2) { background:#edf5ec; }
.homepage-faq__featured article:nth-child(3) { background:#f4eee3; }
.homepage-faq__icon { align-items:center; background:#d9e6d8; border-radius:.75rem; display:flex; height:3rem; justify-content:center; margin-bottom:1.5rem; width:3rem; }
.homepage-faq__featured article:nth-child(2) .homepage-faq__icon { background:#fff; }
.homepage-faq__featured article:nth-child(3) .homepage-faq__icon { background:#f7e5bf; }
.homepage-faq__icon svg { fill:none; height:1.65rem; stroke:#1f634a; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:1.65rem; }
.homepage-faq__featured h3 { font-size:1.2rem; margin-bottom:.65rem; }
.homepage-faq__featured p { color:#52635b; margin:0; }
.homepage-faq__list { border-top:1px solid #d8ddd5; margin:3rem auto 0; max-width:54rem; }
.homepage-faq details { border-bottom:1px solid #d8ddd5; }
.homepage-faq summary { align-items:center; cursor:pointer; display:flex; font-weight:800; gap:1rem; list-style:none; padding:1.2rem 0; }
.homepage-faq summary::-webkit-details-marker { display:none; }
.homepage-faq summary::after { color:#1f634a; content:"+"; font-size:1.4rem; font-weight:500; margin-left:auto; }
.homepage-faq details[open] summary::after { content:"−"; }
.homepage-faq details p { color:#52635b; margin:0 2rem 1.2rem 0; }
.homepage-faq__privacy-note { background:#edf5ec; border:1px solid #c7dcc8; border-radius:.85rem; color:#40564e; margin:1.5rem auto 0; max-width:54rem; padding:1rem 1.2rem; }
.homepage-faq__privacy-note strong { color:#17362e; }
.hosting-invitation { background:#1f634a; color:#fff; margin:0; max-width:none; overflow:hidden; padding:clamp(4rem,8vw,7rem) 0; }
.hosting-invitation__inner { align-items:center; display:flex; gap:clamp(2rem,6vw,5rem); justify-content:center; margin-inline:auto; max-width:var(--layout-width); padding-inline:clamp(1.25rem,4vw,3rem); }
.hosting-invitation__copy { position:static; }
.hosting-invitation .eyebrow,.hosting-invitation p { color:#d9e6d8; }
.hosting-invitation .eyebrow { margin-bottom:.65rem; }
.hosting-invitation h2 { margin-bottom:1rem; max-width:18ch; }
.hosting-invitation p:not(.eyebrow) { margin-top:0; margin-bottom:0; max-width:37rem; }
.hosting-invitation .button { align-items:center; background:#f3c969; color:#17362e; display:inline-flex; flex:0 0 auto; gap:.5rem; }
.hosting-invitation .button:hover { background:#ffe08a; }
.hosting-invitation__button-icon { fill:none; height:1.15rem; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; width:1.15rem; }
@media (max-width:48rem) { .hero { grid-template-columns:1fr; min-height:auto; } .hero__content { align-self:start; grid-column:1; grid-row:1; } .hero-card { grid-column:1; grid-row:2; margin:1rem .75rem; width:auto; } .hero__landscape { display:none; } .steps,.activity-shortcuts__grid,.homepage-faq__featured { grid-template-columns:1fr; } .steps { gap:4rem; } .steps li:not(:last-child)::after,.steps li:nth-child(2)::after { border-bottom:0; border-left:2px dashed #9ab99b; border-top:0; bottom:-4rem; height:4rem; left:50%; top:auto; transform:none; width:0; } .hosting-invitation__inner { align-items:flex-start; flex-direction:column; } }