/* Ospito website shell, "Warm Boutique". Used by every public marketing page (and legal/blog pages).
   Load order in <head>:
     <meta name="color-scheme" content="light"><meta name="theme-color" content="#F4EFE6">
     <script src="/app/shared/theme-init.js"></script>
     <link rel="stylesheet" href="/app/shared/tokens.css">          (colours, fonts, radii)
     <link rel="stylesheet" href="/app/shared/components.css">      (buttons, chips, cards, panels, banner, lamp, language menu, forms)
     <link rel="stylesheet" href="/site/ospito-site.css">           (this file: page layout)
     <script type="module" src="/site/ospito-site.js"></script>     (header, footer, lamp, language menu, mobile menu)
   Class names start with os-. No hard-coded colours except the three booking-site brand colours below. */

:root {
  /* The ONLY literal colours on the site: real booking-site brand colours, used for the platform header strips in example chats. */
  --brand-airbnb: #FF5A5F;
  --brand-vrbo: #1A3A7A;
  --brand-booking: #003580;
  --brand-booking-accent: #F9A825;
  --os-w: 1080px;
  --os-gutter: 24px;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body.os-body { min-height: 100vh; line-height: 1.55; }

.os-container { width: min(var(--os-w), 100% - 2 * max(var(--os-gutter), env(safe-area-inset-left), env(safe-area-inset-right))); margin-inline: auto; }
.os-skip { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.os-skip:focus { top: 12px; }

/* ------------------------------------------------------------------ header */
.os-nav { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.os-nav__in { position: relative; width: min(var(--os-w), 100% - 2 * max(var(--os-gutter), env(safe-area-inset-left), env(safe-area-inset-right))); margin-inline: auto; padding-top: 18px; }
.os-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-right: 56px; }
.os-nav__rule { margin-top: 12px; border-bottom: 1px solid var(--line); }
.os-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: 0 0 auto; min-height: var(--tap); }
.os-logo__word { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.os-nav__links { display: none; align-items: center; gap: 0 22px; }
.os-nav__links a { box-sizing: border-box; min-height: var(--tap); display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; }
.os-nav__links a:hover { color: var(--ink); }
.os-nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.os-nav__end { display: flex; align-items: center; gap: 8px 16px; flex: 0 0 auto; font-size: 14px; color: var(--ink-2); }
.os-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 10px; }
.os-menu-btn svg { display: block; }
.os-nav__panel { display: none; padding: 8px 0 12px; border-bottom: 1px solid var(--line); }
.os-nav__panel.is-open { display: grid; }
.os-nav__panel a { min-height: var(--tap); display: flex; align-items: center; text-decoration: none; color: var(--ink); font-size: 16px; border-bottom: 1px solid var(--line); }
.os-nav__panel a:last-child { border-bottom: 0; }
.os-nav .btn--cta { white-space: nowrap; }
.os-nav__signin { display: none; min-height: var(--tap); align-items: center; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.os-nav__signin:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.os-nav__cta-text-short { display: none; }
@media (min-width: 960px) {
  .os-nav__links { display: flex; }
  .os-menu-btn, .os-nav__panel, .os-nav__panel.is-open { display: none; }
  .os-nav__signin { display: inline-flex; }
  .os-nav__in { padding-top: 22px; }
  .os-nav__rule { margin-top: 14px; }
  .os-nav .lamp { top: -24px; }
}
@media (max-width: 599px) {
  .os-nav__end .lang-btn > span { display: none; }
  .os-nav__cta-text { display: none; }
  .os-nav__cta-text-short { display: inline; }
  /* Portuguese labels are ~25% longer: tighten the header row so the Get Started button never pushes past 390px */
  html[lang^="pt"] .os-nav__end { gap: 4px 6px; }
  html[lang^="pt"] .os-nav .btn--cta { padding-inline: 12px; }
  /* Visual fix: the header row needs 371px today (logo + language + Start + menu + 56px kept free for the lamp),
     so on 320-370px phones the menu button sits off screen and on 390px phones the lamp cord crosses it. */
  .os-nav__row { margin-right: 48px; gap: 4px; }
  .os-nav__end { gap: 0; }
  .os-logo { gap: 6px; }
  .os-logo__word { font-size: 21px; }
}
@media (max-width: 389px) { .os-logo__word { font-size: 18px; } }
@media (max-width: 359px) { .os-logo__word { display: none; } }

/* ------------------------------------------------------------------ sections and type */
.os-main { display: block; }
.os-section { padding: 64px 0 0; }
.os-section--tight { padding-top: 40px; }
@media (min-width: 900px) { .os-section { padding-top: 84px; } }
.os-h1 { margin: 22px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6vw, 54px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.os-h1 em, .os-h2 em { font-style: italic; }
/* Balanced wrapping for every heading on the website, so a heading never ends on one lonely word. Browsers that do not know it just wrap as before. */
main h1, main h2, main h3, main h4 { text-wrap: balance; }
.os-h2 { margin: 10px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 34px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.os-h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.os-lead { margin: 16px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.4; color: var(--ink-2); max-width: 40rem; }
.os-p { margin: 14px 0 0; color: var(--ink-2); max-width: 36rem; }
.os-p strong { color: var(--ink); font-weight: 600; }
.os-pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border-radius: 999px; background: var(--sage); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.os-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.os-dot--terra { background: var(--terra); }
.os-btn-row { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.btn--lg { min-height: 48px; padding: 0 24px; }

/* Hero: text left, scene right */
.os-hero { display: grid; gap: 40px; align-items: center; padding: 48px 0 56px; }
@media (min-width: 960px) { .os-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding: 56px 0 64px; } }
.os-hero--center { text-align: center; justify-items: center; }
.os-hero--center .os-lead, .os-hero--center .os-p { margin-inline: auto; }

/* Grids */
.os-grid { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 700px) { .os-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .os-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .os-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .os-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .os-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .os-grid { gap: 24px; } }

/* Cards: paper by default; --sage / --clay / --sand / --deep for coloured panels */
.os-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
@media (min-width: 700px) { .os-card { padding: 28px; } }
.os-card--sage { background: var(--sage); border-color: transparent; }
.os-card--clay { background: var(--clay); border-color: transparent; }
.os-card--sand { background: var(--sand); border-color: transparent; }
.os-card--deep { background: var(--deep); border-color: transparent; color: var(--deep-ink); }
.os-card--deep .os-p, .os-card--deep .muted { color: var(--deep-ink-2); }
.os-card__title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.os-card__text { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.os-numtile { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sand); color: var(--ink-2); font-family: var(--font-display); font-style: italic; font-size: 18px; }
.os-iconrow { display: flex; gap: 14px; align-items: flex-start; }
.os-list { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.os-list li { display: flex; gap: 12px; align-items: flex-start; }
.os-list .os-tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--sage); color: var(--accent); display: inline-grid; place-items: center; }
.os-list .os-tick--no { background: var(--clay); color: var(--terra); }

/* Stats and ticker */
.os-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 800px) { .os-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.os-stat__value { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.os-stat__label { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.os-ticker { margin-top: 8px; background: var(--sand); overflow: hidden; }
.os-ticker__track { display: flex; width: max-content; gap: 44px; padding: 16px 0; white-space: nowrap; animation: os-tick 48s linear infinite; }
.os-ticker__item { font-size: 14px; color: var(--ink-2); }
.os-ticker__item b { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--ink); margin-right: 6px; }
@keyframes os-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .os-ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 12px 32px; padding-inline: var(--os-gutter); } .os-ticker__item[aria-hidden="true"] { display: none; } }

/* Chat mock (hero and scenario cards): guest bubbles sand, Homie bubbles GREEN */
.os-chat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.os-chat__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.os-chat__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.os-chat__body { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 18px; }
.os-bubble { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; background: var(--sand); color: var(--ink); align-self: flex-start; }
.os-bubble--homie { align-self: flex-end; background: var(--hg); color: var(--hg-ink); }
.os-bubble--typing { align-self: flex-end; background: var(--sage); display: flex; gap: 4px; padding: 11px 14px; }
.os-bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.os-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.os-badge small { color: var(--ink-3); font-size: inherit; }
.os-platform { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; color: #fff; font-weight: 800; font-size: 19px; line-height: 1.2; }
.os-platform--airbnb { background: var(--brand-airbnb); }
.os-platform--vrbo { background: var(--brand-vrbo); }
.os-platform--booking { background: var(--brand-booking); }

/* FAQ: native <details>, no script needed */
.os-faq { margin-top: 22px; }
.os-faq details { border-top: 1px solid var(--line); }
.os-faq details:last-child { border-bottom: 1px solid var(--line); }
.os-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; font-family: var(--font-display); font-size: 19px; }
.os-faq summary::-webkit-details-marker { display: none; }
.os-faq summary::after { content: "+"; flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sand); color: var(--ink-2); font-family: var(--font); font-size: 18px; line-height: 1; transition: transform .2s ease; }
.os-faq details[open] summary::after { transform: rotate(45deg); }
.os-faq p { margin: 0; padding: 0 56px 22px 0; color: var(--ink-2); max-width: 760px; }

/* CTA band: sage panel with Homie */
.os-cta { display: grid; gap: 28px; align-items: center; background: var(--sage); border-radius: var(--radius-lg); padding: 32px 24px; }
@media (min-width: 800px) { .os-cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: 48px; } .os-cta__art { justify-self: center; } }
.os-cta--deep { background: var(--deep); color: var(--deep-ink); }
.os-cta--deep .os-p { color: var(--deep-ink-2); }
.os-cta--deep .label { color: var(--deep-ink-2); }
.os-link { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent); min-height: 44px; display: inline-flex; align-items: center; }
.os-link:hover { border-bottom-width: 2.5px; }

/* Long text pages (privacy, terms, blog posts) */
.os-prose { max-width: 46rem; }
.os-prose h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; }
.os-prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -.015em; margin: 40px 0 8px; }
.os-prose p, .os-prose li { color: var(--ink); }
.os-prose p { margin: 12px 0 0; }
.os-prose ul { margin: 12px 0 0; padding-left: 22px; list-style: disc; }
.os-prose a { color: var(--accent); text-underline-offset: 3px; }
.os-note { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sand); font-size: 14px; }

/* Forms on public pages (contact, questionnaire, login) */
.os-form { display: grid; gap: 18px; margin-top: 24px; }
.os-form label { font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; }
.os-form .hint { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ------------------------------------------------------------------ footer */
.os-footer { margin-top: 84px; padding-bottom: 40px; }
.os-footer__top { border-top: 1px solid var(--ink); padding-top: 32px; display: grid; gap: 32px 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.os-footer__brand { grid-column: 1 / -1; }
@media (min-width: 800px) { .os-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .os-footer__brand { grid-column: auto; } }
.os-footer__word { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
.os-footer__tag { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); max-width: 260px; }
.os-footer__h { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.os-footer__col { display: flex; flex-direction: column; margin-top: 10px; }
.os-footer__col a { min-height: var(--tap); display: inline-flex; align-items: center; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.os-footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.os-footer__bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.os-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.os-footer__bottom a { color: var(--ink-2); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.os-footer__bottom a:hover { color: var(--ink); text-decoration: underline; }

/* Utility */
.os-center { text-align: center; }
.os-mt-0 { margin-top: 0; }
.os-hide-sm { display: none; }
@media (min-width: 700px) { .os-hide-sm { display: initial; } }