/* The guest application has its own type and spacing, like the live product. */
.forest-app {
  --app-bg: #f7f6f1;
  --app-ink: #1f2a22;
  --app-muted: #81877e;
  --app-green: #1c3e2e;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  border: 6px solid #263c30;
  border-radius: 36px;
  isolation: isolate;
}
.forest-app button, .forest-app input {font-family: inherit}
.forest-app button:focus-visible, .forest-app input:focus-visible, .forest-app summary:focus-visible {outline: 2px solid #ba9440; outline-offset: -3px}
.forest-app .icon {width: 6cqw; height: 6cqw; stroke-width: 1.7}
.forest-app.hero-phone {--phone-scale: 1; height: 570px; top: 18px; transform: rotate(-6deg) scale(var(--phone-scale))}
.hero-visual:hover .forest-app.hero-phone {transform: rotate(-3deg) translateY(-4px) scale(var(--phone-scale))}
.forest-app.interactive-phone {width: min(348px, 100%); height: 672px; border-width: 5px; border-radius: 33px}
.forest-content {min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--app-bg)}
.forest-content::-webkit-scrollbar {display: none}
.forest-content-home {overflow: hidden}
.forest-home {height: 100%; position: relative; display: flex; align-items: flex-end; padding: 7cqw 5.6cqw; color: #fff; background: #233f31; overflow: hidden}
.forest-home::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #14231b15 0%, transparent 28%, #1322190a 40%, #101e15a6 68%, #0d1b11ed 100%); pointer-events: none}
.forest-home .forest-home-photo {position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 61% center}
.forest-hotel-name {position: absolute; z-index: 1; top: 6.7cqw; left: 5.6cqw; color: #fff; font-size: 3.7cqw; font-weight: 600; letter-spacing: .06em; text-shadow: 0 1px 8px #0007}
.forest-bell {position: absolute; top: 4cqw; right: 4cqw; z-index: 2; width: 10cqw; height: 10cqw; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fffffff0; color: var(--app-ink); padding: 0}
.forest-bell .icon {width: 5.4cqw; height: 5.4cqw}
.forest-welcome {position: relative; z-index: 1; width: 100%}
.forest-welcome h3 {color: #fff; font-family: inherit; font-size: 5.65cqw; line-height: 1.3; font-weight: 700; letter-spacing: -.035em; margin: 0 0 3.7cqw}
.forest-welcome h3 span {display: inline-block; margin-left: .8cqw; font-size: 5.6cqw}
.forest-welcome p {font-size: 4cqw; line-height: 1.6; margin: 0 0 4.9cqw; color: #f8f9f7; font-weight: 400; letter-spacing: -.015em}
.forest-welcome .forest-arrival {font-size: 3.8cqw; line-height: 1.55; margin-bottom: 3.7cqw}
.forest-arrival strong {display: block; font-size: 3.85cqw; font-weight: 700; margin-top: 1cqw}
.forest-booking-link {display: flex; align-items: center; justify-content: space-between; gap: 2cqw; width: 100%; padding: 4.4cqw 4.6cqw; border: 1px solid #e7e7e2; border-radius: 5cqw; background: #fff; color: var(--app-ink); font-size: 4.3cqw; font-weight: 500; line-height: 1.5; text-align: left}
.forest-booking-link .icon {width: 4.7cqw; height: 4.7cqw; color: var(--app-muted)}
.forest-composer {display: flex; align-items: center; gap: 2cqw; flex: 0 0 auto; width: 100%; padding: 2cqw 3.2cqw; border: 0; border-top: 1px solid #ecece7; background: #fffffffa; color: var(--app-muted); margin: 0}
.forest-bot, .forest-send {display: grid; place-items: center; flex: 0 0 auto; width: 8.5cqw; height: 8.5cqw; border: 0; border-radius: 50%; background: #e9eeeb; color: var(--app-green); padding: 0}
.forest-bot .icon {width: 4.8cqw; height: 4.8cqw}
.forest-composer input, .forest-input-preview {flex: 1; min-width: 0; width: 0; padding: 2.8cqw 3cqw; font-size: 3.75cqw; line-height: 1.4; color: var(--app-ink); background: var(--app-bg); border: 1px solid #e7e6df; border-radius: 3cqw; font-weight: 400; text-align: left}
.forest-composer input::placeholder, .forest-input-preview {color: var(--app-muted); opacity: 1}
.forest-input-preview {white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.forest-send {background: var(--app-green); color: #fff}
.forest-send .icon {width: 5.3cqw; height: 5.3cqw}
.forest-send:disabled, .forest-composer-preview .forest-send {background: #a7b3ac; color: #fff}
.forest-send:disabled {cursor: default}
.forest-nav {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 0 0 auto; gap: 0; padding: 2cqw 1.5cqw 3.3cqw; background: #fff; border-top: 1px solid #eeeee8}
.forest-nav button {display: flex; flex-direction: column; align-items: center; justify-content: start; gap: .6cqw; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--app-muted); font-size: 3cqw; line-height: 1.5; font-weight: 500; letter-spacing: -.03em}
.forest-nav-icon {display: grid; place-items: center; width: 8.8cqw; height: 7cqw; border-radius: 2.2cqw}
.forest-nav .icon {width: 5.4cqw; height: 5.4cqw}
.forest-nav button[aria-pressed=true] {color: var(--app-green); font-weight: 600}
.forest-nav button[aria-pressed=true] .forest-nav-icon {background: var(--app-green); color: #fff}
.forest-nav button:hover {color: var(--app-green)}
.forest-page {padding: 0 3.8cqw 5cqw; font-size: 3.8cqw}
.forest-page h4 {font-size: 4.1cqw; margin: 3.2cqw 0 1.3cqw; letter-spacing: -.02em; font-weight: 600}
.forest-page p {font-size: 3.65cqw; margin: 0 0 3cqw; line-height: 1.6; color: var(--app-muted)}
.forest-page-header {display: grid; grid-template-columns: 9cqw 1fr 9cqw; align-items: center; min-height: 15cqw; margin: 0 -1.5cqw; position: sticky; top: 0; background: #f7f6f1f5; z-index: 3; backdrop-filter: blur(10px)}
.forest-page-header h3 {font-size: 4.4cqw; font-weight: 600; text-align: center; margin: 0; letter-spacing: -.025em}
.forest-page-header button {display: grid; place-items: center; border: 0; padding: 0; min-height: 10cqw; background: transparent; color: var(--app-ink)}
.forest-page-header .icon {width: 4.6cqw; height: 4.6cqw}
.forest-banner {width: 100%; height: 30cqw; object-fit: cover; object-position: 60% center; border-radius: 4.5cqw; margin: 0}
.forest-rows {display: grid; gap: 2.8cqw; margin: 4cqw 0}
.forest-row {display: flex; align-items: center; gap: 3cqw; width: 100%; border: 1px solid #e8e9e2; border-radius: 4.7cqw; padding: 4.3cqw; background: #fff; color: var(--app-ink); text-align: left}
.forest-row > span:not(.forest-row-icon) {min-width: 0; flex: 1}
.forest-row b {display: block; font-size: 3.9cqw; font-weight: 500; line-height: 1.5}
.forest-row small {display: block; font-size: 3.2cqw; line-height: 1.5; color: var(--app-muted); margin-top: 1cqw}
.forest-row-icon {display: grid; place-items: center; flex: 0 0 auto; width: 10cqw; height: 10cqw; background: #f1f1e9; border-radius: 3cqw}
.forest-row-icon .icon {width: 5.3cqw; height: 5.3cqw}
.forest-row > .icon {width: 3.8cqw; height: 3.8cqw; margin-left: auto; color: var(--app-muted)}
button.forest-row:hover, .forest-filter button:hover {border-color: #c8d0c2}
.forest-wifi-card {padding: 4.5cqw; background: linear-gradient(125deg, #eeefea, #fff); border: 1px solid #e1e4dc; border-radius: 5cqw}
.forest-wifi-top {display: flex; align-items: center; gap: 3cqw; margin-bottom: 2.5cqw}
.forest-wifi-top > .forest-row-icon {border-radius: 50%; background: #fff; border: 1px solid #d9ded5}
.forest-wifi-card b {display: block; font-size: 4cqw}
.forest-wifi-card small, .forest-wifi-card p {font-size: 3.4cqw; color: var(--app-muted); margin: 0}
.forest-details {background: #fff; border: 1px solid #e8e9e2; border-radius: 4.5cqw; overflow: hidden; margin: 3cqw 0}
.forest-details details + details {border-top: 1px solid #eeeee8}
.forest-details summary {padding: 4cqw; display: flex; align-items: center; gap: 2.5cqw; cursor: pointer; list-style: none; font-size: 3.8cqw; font-weight: 500}
.forest-details summary::-webkit-details-marker {display: none}
.forest-details summary > .icon {width: 5cqw; height: 5cqw}
.forest-details summary::after {content: '+'; margin-left: auto; color: var(--app-muted)}
.forest-details details[open] summary::after {content: '−'}
.forest-details details p {padding: 0 4cqw 4cqw; margin: 0; color: #677166; font-size: 3.6cqw}
.forest-note {padding: 3cqw 3.5cqw; border-radius: 3cqw; font-size: 3.1cqw!important; line-height: 1.6; color: #747c72!important; background: #ecefe7; margin: 3.5cqw 0 0!important}
.forest-action {width: 100%; border: 0; padding: 3.5cqw 4cqw; border-radius: 3.4cqw; background: var(--app-green); color: #fff; font-size: 3.8cqw; font-weight: 500; margin: 1cqw 0}
.forest-action:hover {background: #2a4b37}
.forest-filter {display: flex; gap: 2cqw; margin-bottom: 4cqw}
.forest-filter button {padding: 1.6cqw 4cqw; font-size: 3.4cqw; border: 1px solid #e4e6de; border-radius: 10cqw; color: var(--app-muted); background: transparent}
.forest-filter button[aria-pressed=true] {color: var(--app-green); border-color: #546e58; font-weight: 600}
.forest-event {position: relative; display: flex; align-items: flex-end; width: 100%; min-height: 49cqw; padding: 4.5cqw; border-radius: 4.5cqw; overflow: hidden; border: 0; color: #fff; text-align: left; background: #233f31; margin-bottom: 3cqw}
.forest-event > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
.forest-event::after {content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, #152318bf)}
.forest-event-copy {position: relative; z-index: 1}
.forest-event-copy b {display: block; font-size: 5cqw; font-weight: 600; line-height: 1.3}
.forest-event-copy small {display: inline-block; border: 1px solid #ffffffa0; border-radius: 10cqw; padding: 1cqw 3cqw; font-size: 3cqw; margin-top: 3cqw}
.forest-event-label {position: absolute; z-index: 1; top: 4cqw; left: 4cqw; padding: 1cqw 2.7cqw; color: #8b652d; border-radius: 10cqw; background: #f4e6c9; font-size: 2.9cqw}
.forest-profile {display: flex; align-items: center; gap: 4cqw; margin: 2cqw 0 5cqw}
.forest-profile-avatar {display: grid; place-items: center; height: 16cqw; width: 16cqw; background: #e7ece3; border-radius: 50%; color: #667c5e; font-size: 6cqw}
.forest-profile h4 {margin: 0; font-size: 4.7cqw}
.forest-profile p {margin: 1cqw 0 0; font-size: 3.2cqw}
.forest-stay {padding: 4.5cqw; margin: 3.5cqw 0; border: 1px solid #e3e6dd; border-radius: 4.5cqw; background: #fff}
.forest-stay-header {display: flex; justify-content: space-between; align-items: center; gap: 2cqw; font-size: 3cqw; color: var(--app-muted)}
.forest-status {display: inline-block; background: #eaf0e5; color: #40603a; border-radius: 10cqw; padding: 1cqw 2cqw; font-size: 2.6cqw}
.forest-stay h4 {font-size: 4.5cqw; margin: 3cqw 0 2cqw}
.forest-stay-dates {display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #eceee6; padding-top: 3cqw; gap: 3cqw; margin-top: 3cqw}
.forest-stay-dates small {display: block; color: var(--app-muted); font-size: 3cqw}
.forest-stay-dates b {display: block; font-size: 3.7cqw; font-weight: 600; margin-top: .5cqw}
.forest-chat-log {display: flex; flex-direction: column; gap: 3cqw; padding: 2cqw 0; min-height: 45cqw}
.forest-bubble {font-size: 3.8cqw; line-height: 1.6; border: 1px solid #e2e6dc; border-radius: 4.5cqw 4.5cqw 4.5cqw 1cqw; padding: 3.6cqw 4cqw; align-self: flex-start; width: fit-content; max-width: 92%; background: #fff; color: var(--app-ink); overflow-wrap: anywhere}
.forest-bubble.user {align-self: flex-end; border: 0; border-radius: 4.5cqw 4.5cqw 1cqw 4.5cqw; background: var(--app-green); color: #fff}
.forest-chat-options {display: flex; flex-wrap: wrap; gap: 2cqw; margin: 4cqw 0}
.forest-chat-options button {font-size: 3.2cqw; border: 1px solid #d5ddcd; border-radius: 9cqw; background: #fff; padding: 2cqw 3cqw; color: #465b40}
.forest-service-meta {display: flex; flex-wrap: wrap; gap: 2cqw; margin: 3cqw 0 4cqw}
.forest-service-meta span {font-size: 3.1cqw; color: #62765a; background: #edf0e8; padding: 1.5cqw 3cqw; border-radius: 2cqw}
.forest-chat, .journey-preview {font-family: 'Inter', ui-sans-serif, system-ui, sans-serif}
.forest-chat {background: #f7f6f1; border-color: #e3e6db}
.forest-chat .chat-header {background: #f7f6f1}
.forest-chat .chat-avatar {background: #e5ece5; border-radius: 50%; color: #264934}
.forest-chat .chat-bubble.assistant {background: #fff; border: 1px solid #e3e6dd}
.forest-chat .chat-bubble.user {background: #1c3e2e}
.journey-preview {background: #fff; border: 1px solid #e3e6dd}
.hero-visual .request-float {left: -20px; bottom: 70px; z-index: 3}
.hero-visual .ai-float {right: -16px; top: 110px}
@media (min-width: 1500px) {
  .forest-app.hero-phone {--phone-scale: 1.04; top: 10px}
}
@media (max-width: 1100px) and (min-width: 801px) {
  .forest-app.hero-phone {--phone-scale: .9; top: -2px}
  .hero-visual .request-float {left: -7px; bottom: 48px}
}
@media (max-width: 800px) {
  .forest-app.hero-phone {--phone-scale: .94; top: 0}
  .forest-app.interactive-phone {height: 656px; width: min(348px, 100%)}
  .hero-visual .request-float {left: 0; bottom: 38px}
  .hero-visual .ai-float {right: -3px; top: 108px}
}
@media (max-width: 420px) {
  .forest-app.hero-phone {--phone-scale: .86; top: -4px}
  .hero-visual .request-float {bottom: 32px}
  .forest-app.interactive-phone {height: 618px; border-width: 4px; border-radius: 29px}
  .hero-visual .ai-float {top: 111px}
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual:hover .forest-app.hero-phone {transform: rotate(-6deg) scale(var(--phone-scale))}
}