:root {
    --ink: #1f2a27;
    --muted: #68716c;
    --line: #d9ddd5;
    --paper: #f7f7f2;
    --cream: #eee9dc;
    --lime: #d6e85c;
    --coral: #e97159;
    --sage: #bfceb7;
    --moss: #79886a;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Manrope', Arial, sans-serif;
    --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { max-width: 1440px; margin: 0 auto; overflow: hidden; background: var(--paper); }
.topbar { height: 82px; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; letter-spacing: -.5px; }
.brand-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50% 50% 50% 0; color: var(--ink); background: var(--lime); font-family: var(--serif); font-size: 18px; font-style: italic; }
.main-nav { display: flex; gap: 37px; margin-left: 70px; color: #78807b; font-size: 12px; font-weight: 700; }
.main-nav a { position: relative; padding: 9px 0; }
.main-nav a.active, .main-nav a:hover { color: var(--ink); }
.main-nav a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--coral); }
.top-actions { display: flex; align-items: center; gap: 16px; }.icon-button { position: relative; border: 0; background: none; font-size: 22px; color: var(--ink); }.notification-dot { position: absolute; top: 2px; right: -1px; width: 5px; height: 5px; background: var(--coral); border-radius: 50%; }.avatar { border: 0; border-radius: 50%; background: var(--ink); color: white; width: 34px; height: 34px; font-family: var(--mono); font-size: 10px; }
.hero { display: grid; grid-template-columns: .86fr 1.14fr; min-height: 577px; padding: 70px 8% 60px; background: var(--cream); }.hero-copy { align-self: center; padding: 0 6% 20px 0; }.eyebrow { margin: 0 0 18px; color: #8b9185; font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; font-weight: 500; }.hero h1, h2 { margin: 0; letter-spacing: -2.2px; font-weight: 700; line-height: .99; }.hero h1 { font-size: clamp(49px, 5.1vw, 72px); }.hero h1 em, h2 em { color: var(--coral); font-family: var(--serif); font-weight: 600; }.hero-text { max-width: 380px; margin: 28px 0 30px; color: var(--muted); line-height: 1.75; }.hero-actions { display: flex; align-items: center; gap: 27px; }.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; border: 0; padding: 15px 18px; color: white; font-size: 11px; font-weight: 800; letter-spacing: .1px; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-2px); }.button-dark { background: var(--ink); }.button-dark:hover { background: #35423c; }.button span { font-size: 17px; }.text-button { padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 800; }.text-button span { margin-left: 10px; font-size: 17px; color: var(--coral); }
.hero-art { position: relative; min-height: 420px; }.hero-image-wrap { position: absolute; right: 9%; top: 0; width: 64%; height: 100%; overflow: hidden; background: var(--coral); }.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; mix-blend-mode: multiply; filter: saturate(.8) contrast(.95); }.hero-orbit { position: absolute; border: 1px solid rgba(31,42,39,.16); border-radius: 50%; }.orbit-one { width: 80%; height: 80%; top: 7%; right: 0; }.orbit-two { width: 55%; height: 55%; top: 20%; right: 14%; }.hero-sticker { position: absolute; right: 0; top: 13%; display: grid; gap: 5px; padding: 14px 15px; background: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: 1px; transform: rotate(7deg); }.hero-sticker strong { font-family: var(--serif); font-size: 23px; letter-spacing: -1px; }.hero-caption { position: absolute; bottom: 7%; left: 2%; display: flex; gap: 12px; font-size: 9px; line-height: 1.4; }.hero-caption span:first-child { color: var(--coral); font-family: var(--mono); font-size: 12px; }
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr; gap: 0; min-height: 106px; padding: 0 8%; align-items: center; background: var(--ink); color: white; }.stats-strip div { padding: 0 26px; border-right: 1px solid rgba(255,255,255,.18); }.stats-strip div:first-child { padding-left: 0; }.stats-strip strong, .stats-strip span { display: block; }.stats-strip strong { margin-bottom: 5px; color: var(--lime); font-family: var(--serif); font-size: 27px; }.stats-strip span { color: #abb4aa; font-size: 10px; }.stats-strip .strip-note { border: 0; padding-left: 42px; color: #d3d9d0; font-size: 11px; }.live-dot { display: inline-block!important; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--coral); }
.catalog-section { padding: 103px 8% 91px; }.section-heading, .rules-top { display: flex; justify-content: space-between; gap: 40px; }.section-heading h2, .rules-top h2 { font-size: clamp(38px, 4vw, 56px); }.heading-side { display: flex; flex-direction: column; justify-content: flex-end; max-width: 280px; }.heading-side p, .rules-top > p { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }.filter-trigger { align-self: flex-start; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 11px; font-weight: 800; }.filter-trigger span { margin-left: 18px; color: var(--coral); font-size: 17px; }.filter-row { display: flex; align-items: center; gap: 9px; margin: 64px 0 25px; }.filter-pill { border: 1px solid var(--line); padding: 9px 15px; border-radius: 30px; background: transparent; color: var(--muted); font-size: 10px; transition: .2s; }.filter-pill.selected, .filter-pill:hover { border-color: var(--ink); background: var(--ink); color: white; }.search-box { display: flex; align-items: center; gap: 8px; margin-left: auto; border-bottom: 1px solid var(--line); color: #848c84; }.search-box input { width: 175px; padding: 8px 0; border: 0; outline: 0; background: transparent; font-size: 11px; }.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 20px; }.listing-card { min-width: 0; animation: rise .5s ease both; }.listing-card:nth-child(2) { animation-delay: .08s; }.listing-card:nth-child(3) { animation-delay: .16s; }.listing-card[hidden] { display: none; }.listing-image { position: relative; width: 100%; aspect-ratio: .88; padding: 0; overflow: hidden; border: 0; background: #ddd; }.listing-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }.listing-image:hover img { transform: scale(1.04); }.image-tag { position: absolute; top: 13px; left: 13px; padding: 7px 9px; color: var(--ink); background: var(--lime); font-family: var(--mono); font-size: 8px; }.heart { position: absolute; top: 10px; right: 13px; color: white; font-size: 23px; text-shadow: 0 1px 6px rgba(0,0,0,.2); }.listing-info { padding-top: 14px; }.listing-title { display: flex; align-items: flex-start; justify-content: space-between; }.listing-title h3 { margin: 0 0 5px; font-size: 14px; }.listing-title p, .listing-meta { margin: 0; color: var(--muted); font-size: 10px; }.condition-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--lime); }.listing-meta { display: flex; gap: 14px; margin: 14px 0 16px; font-family: var(--mono); font-size: 9px; }.listing-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--line); }.listing-footer strong { font-family: var(--serif); font-size: 16px; }.listing-footer small { margin-left: 4px; color: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 400; }.small-arrow { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 16px; }.catalog-footer { display: flex; justify-content: space-between; margin-top: 53px; padding-top: 17px; border-top: 1px solid var(--line); color: #929991; font-family: var(--mono); font-size: 9px; }.catalog-footer a { color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 800; }.catalog-footer a span { margin-left: 14px; color: var(--coral); }.empty-state { padding: 48px 0; color: var(--muted); text-align: center; font-size: 12px; }
.how-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; padding: 96px 8%; background: var(--sage); }.how-intro h2, .owner-copy h2 { font-size: clamp(38px, 4vw, 53px); }.how-intro > p:last-child { max-width: 240px; margin-top: 27px; color: #526054; font-size: 12px; line-height: 1.75; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; align-items: start; }.step { padding-top: 9px; border-top: 1px solid rgba(31,42,39,.35); }.step span, .rules-grid span { color: var(--coral); font-family: var(--mono); font-size: 10px; }.step h3, .rules-grid h3 { margin: 46px 0 12px; font-size: 14px; }.step p, .rules-grid p { margin: 0; color: #526054; font-size: 11px; line-height: 1.7; }
.owner-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 575px; }.owner-art { position: relative; min-height: 400px; overflow: hidden; background: #af835f; }.owner-art img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(.8); }.owner-badge { position: absolute; top: 13%; right: 10%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--lime); font-family: var(--mono); font-size: 9px; text-align: center; transform: rotate(12deg); }.owner-copy { padding: 95px 14%; background: #f1d5c7; }.owner-copy > p:not(.eyebrow) { max-width: 270px; margin: 26px 0 30px; color: #716860; font-size: 12px; line-height: 1.7; }.owner-options { border-top: 1px solid rgba(31,42,39,.23); }.owner-option { display: grid; grid-template-columns: 25px 1fr 20px; gap: 12px; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid rgba(31,42,39,.23); background: transparent; color: var(--ink); text-align: left; }.option-number { font-family: var(--mono); font-size: 10px; }.owner-option strong, .owner-option small { display: block; }.owner-option strong { margin-bottom: 5px; font-size: 12px; }.owner-option small { max-width: 280px; color: #7c716b; font-size: 10px; line-height: 1.5; }.owner-option > span:last-child { color: var(--coral); font-size: 17px; }
.rules-section { padding: 96px 8% 105px; }.rules-top > p { align-self: end; max-width: 260px; }.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 65px; }.rules-grid > div { padding-top: 13px; border-top: 1px solid var(--line); }.rules-grid h3 { margin-top: 35px; }.footer { display: flex; justify-content: space-between; align-items: center; padding: 35px 8%; border-top: 1px solid var(--line); color: #8b928b; font-size: 10px; }.footer > div { display: flex; gap: 20px; }.footer .brand { color: var(--ink); }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(31,42,39,.65); backdrop-filter: blur(6px); }.modal-backdrop[hidden], .modal[hidden], .toast[hidden] { display: none; }.modal { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; width: min(780px, 100%); max-height: 90vh; overflow: auto; background: var(--paper); animation: rise .25s ease; }.modal-image { min-height: 440px; background: #ddd; }.modal-image img { width: 100%; height: 100%; object-fit: cover; }.modal-content { padding: 48px 36px; }.modal-close { position: absolute; z-index: 1; top: 13px; right: 15px; width: 29px; height: 29px; border: 0; border-radius: 50%; background: rgba(255,255,255,.75); font-size: 20px; }.modal-content h2, .listing-modal h2 { font-size: 38px; }.modal-owner, .modal-note, .modal-lead { color: var(--muted); font-size: 11px; line-height: 1.7; }.modal-price { margin: 22px 0; font-family: var(--serif); font-size: 22px; }.modal-price small { color: var(--muted); font-family: var(--sans); font-size: 10px; }.modal-specs { display: grid; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.modal-specs div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }.modal-specs span { color: var(--muted); }.modal-specs strong { font-size: 10px; text-align: right; }.modal-note { margin: 18px 0; }.full-button { width: 100%; }.modal-safe { display: block; margin-top: 12px; color: #909890; font-size: 9px; text-align: center; }.listing-modal { display: block; width: min(560px, 100%); padding: 48px; }.modal-lead { max-width: 390px; margin: 16px 0 27px; }.manage-choice { display: grid; gap: 10px; margin-bottom: 20px; }.manage-choice label { display: flex; gap: 12px; padding: 15px; border: 1px solid var(--line); cursor: pointer; }.manage-choice label:has(input:checked) { border-color: var(--coral); background: #fff7f2; }.manage-choice input { accent-color: var(--coral); }.manage-choice strong, .manage-choice small { display: block; }.manage-choice strong { margin-bottom: 4px; font-size: 11px; }.manage-choice small { color: var(--muted); font-size: 10px; }.form-grid { display: grid; gap: 13px; margin-bottom: 23px; }.form-grid label { color: var(--muted); font-size: 10px; }.form-grid input { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); outline-color: var(--coral); background: white; font-size: 11px; }.toast { position: fixed; z-index: 20; right: 25px; bottom: 25px; padding: 14px 19px; background: var(--ink); color: white; box-shadow: 0 9px 30px rgba(0,0,0,.15); font-size: 11px; animation: rise .3s ease; }
.auth-modal { display: block; width: min(460px, 100%); padding: 48px; }.auth-tabs { display: flex; gap: 20px; margin: 26px 0 20px; border-bottom: 1px solid var(--line); }.auth-tabs button { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }.auth-tabs button.selected { border-color: var(--coral); color: var(--ink); }.auth-modal form { display: grid; gap: 13px; }.auth-modal label { color: var(--muted); font-size: 10px; }.auth-modal label[hidden] { display: none; }.auth-modal input { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); outline-color: var(--coral); background: white; font-size: 11px; }.auth-feedback { margin: 0; padding: 10px; font-size: 10px; line-height: 1.5; }.auth-feedback.error { color: #a44a3b; background: #fbe6df; }.auth-feedback.success { color: #507049; background: #e7f0d4; }.auth-footnote { margin: 15px 0 0; color: #909890; font-size: 9px; line-height: 1.5; }.whatsapp-float { position: fixed; z-index: 8; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-radius: 30px; background: #1c9b63; color: white; box-shadow: 0 8px 25px rgba(28,155,99,.28); font-size: 11px; font-weight: 800; transition: transform .2s, background .2s; }.whatsapp-float:hover { transform: translateY(-3px); background: #14784c; }.whatsapp-float span { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; font-size: 15px; }.whatsapp-float small { font-size: 10px; }
.listing-form, .booking-form { display: grid; gap: 16px; }.form-grid.two-columns { grid-template-columns: repeat(2, 1fr); }.form-grid .full-span { grid-column: 1 / -1; }.form-grid select, .form-grid textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); outline-color: var(--coral); background: white; color: var(--ink); font-size: 11px; }.form-grid textarea { resize: vertical; }.booking-modal { display: block; width: min(500px, 100%); padding: 48px; }.booking-estimate { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.booking-estimate strong { color: var(--ink); font-family: var(--serif); font-size: 20px; }.auth-modal { display: block; width: min(460px, 100%); padding: 48px; }.auth-tabs { display: flex; gap: 20px; margin: 26px 0 20px; border-bottom: 1px solid var(--line); }.auth-tabs button { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }.auth-tabs button.selected { border-color: var(--coral); color: var(--ink); }.auth-modal form { display: grid; gap: 13px; }.auth-modal label { color: var(--muted); font-size: 10px; }.auth-modal label[hidden] { display: none; }.auth-modal input { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); outline-color: var(--coral); background: white; font-size: 11px; }.auth-feedback { margin: 0; padding: 10px; font-size: 10px; line-height: 1.5; }.auth-feedback.error { color: #a44a3b; background: #fbe6df; }.auth-feedback.success { color: #507049; background: #e7f0d4; }.auth-footnote { margin: 15px 0 0; color: #909890; font-size: 9px; line-height: 1.5; }.whatsapp-float { position: fixed; z-index: 8; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-radius: 30px; background: #1c9b63; color: white; box-shadow: 0 8px 25px rgba(28,155,99,.28); font-size: 11px; font-weight: 800; transition: transform .2s, background .2s; }.whatsapp-float:hover { transform: translateY(-3px); background: #14784c; }.whatsapp-float span { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; font-size: 15px; }.whatsapp-float small { font-size: 10px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) { .topbar { height: 70px; padding: 0 5%; }.main-nav { gap: 15px; margin-left: 0; }.main-nav a:nth-child(2), .main-nav a:nth-child(3) { display: none; }.hero { grid-template-columns: 1fr; padding: 55px 7% 0; }.hero-copy { padding-right: 0; }.hero-art { min-height: 350px; margin-top: 32px; }.hero-image-wrap { right: 8%; width: 72%; }.stats-strip { grid-template-columns: repeat(3, 1fr); padding: 22px 7%; }.stats-strip div { padding: 0 10px; }.stats-strip div:first-child { padding-left: 0; }.stats-strip .strip-note { display: none; }.catalog-section, .rules-section { padding: 70px 7%; }.section-heading, .rules-top { display: block; }.heading-side { margin-top: 25px; }.filter-row { flex-wrap: wrap; margin-top: 38px; }.search-box { order: -1; width: 100%; margin-left: 0; }.search-box input { width: 100%; }.listing-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 13px; }.listing-meta { gap: 6px; flex-wrap: wrap; }.how-section, .owner-section { grid-template-columns: 1fr; padding: 70px 7%; }.how-section { gap: 45px; }.steps { gap: 11px; }.owner-section { padding: 0; }.owner-copy { padding: 70px 9%; }.rules-grid { gap: 12px; margin-top: 45px; }.footer { flex-wrap: wrap; gap: 20px; padding: 28px 7%; }.modal { grid-template-columns: 1fr; max-height: 94vh; }.modal-image { min-height: 240px; height: 240px; }.modal-content { padding: 30px 25px; }.listing-modal, .booking-modal, .auth-modal { padding: 43px 25px 30px; } }
@media (max-width: 470px) { .top-actions { gap: 6px; }.hero h1 { font-size: 47px; }.hero-actions { gap: 15px; align-items: flex-start; flex-direction: column; }.stats-strip { gap: 4px; }.stats-strip strong { font-size: 21px; }.stats-strip span { font-size: 8px; }.listing-grid { grid-template-columns: 1fr; }.steps, .rules-grid { grid-template-columns: 1fr; gap: 30px; }.step h3, .rules-grid h3 { margin: 16px 0 8px; }.catalog-footer { gap: 15px; align-items: flex-start; flex-direction: column; } }