/* Pulpería - one stylesheet for every page.
   Rules: one heading typeface (Fraunces 500) on one scale; Manrope for everything else;
   no italic accent words, no all-caps labels; section spacing lives ONLY on .section. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); }

:root {
  --jungle: #1F3D2C; --jungle-2: #29503A; --jungle-line: rgba(246, 239, 227, .16);
  --paper: #FBF7EE; --sand: #EFE6D4; --cream: #F6EFE3;
  --ink: #1A1612; --ink-2: #4A3F33; --mute: #786959;
  --clay: #C0552B; --clay-deep: #9D4321; --gold: #B89968;
  --rule: rgba(26, 22, 18, .12); --rule-strong: rgba(26, 22, 18, .22);
  --display: 'Fraunces', Georgia, serif; --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --h1: clamp(2.45rem, 1.55rem + 3.7vw, 4.3rem); --h2: clamp(1.9rem, 1.35rem + 2vw, 2.8rem); --h3: 1.3rem; --h3-lg: clamp(1.4rem, 1.25rem + .45vw, 1.6rem);
  --lead: clamp(1.08rem, 1rem + .35vw, 1.22rem);
  --r-paper: 4px; --r-frame: 10px; --r-card: 16px; --r-pill: 999px;
  --wrap: 1160px; --gutter: clamp(20px, 4vw, 40px);
  --space: clamp(72px, 9vw, 124px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type: ONE scale, used everywhere ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: inherit; margin: 0; letter-spacing: -.012em; font-optical-sizing: auto; }
h1 { font-size: var(--h1); line-height: 1.04; }
h2 { font-size: var(--h2); line-height: 1.1; }
h3 { font-size: var(--h3); line-height: 1.28; letter-spacing: -.005em; }
p { margin: 0; }
.lead { font-size: var(--lead); line-height: 1.6; color: var(--ink-2); }
.small { font-size: .9rem; color: var(--mute); }
.dark .lead, .dark .small { color: rgba(246, 239, 227, .78); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; }
.section--sand { background: var(--sand); }
.dark { background: var(--jungle); color: var(--cream); }
.head { max-width: 760px; }
.head .lead { margin-top: 18px; }
.head { margin-bottom: clamp(40px, 5vw, 64px); }
.hero .head { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-pill);
  font: 600 1rem/1.2 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn--primary { background: var(--clay); color: #fff; }
.btn--primary:hover { background: var(--clay-deep); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.dark .btn--ghost { border-color: rgba(246, 239, 227, .4); color: var(--cream); }
.dark .btn--ghost:hover { border-color: var(--cream); }
.textlink { font-weight: 600; color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.dark .textlink { color: #F2B08F; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 238, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; }
.brand { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; font: 600 1.55rem/1 var(--display); letter-spacing: -.02em; color: var(--jungle); }
.brand-dot { color: var(--clay); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--ink-2); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--clay); }
.nav .btn { min-height: 42px; padding: 9px 18px; font-size: .95rem; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill); min-height: 42px; padding: 8px 16px; font: 600 .95rem var(--body); color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px;
    background: var(--paper); border-bottom: 1px solid var(--rule); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s, visibility .18s; }
  .nav.open { visibility: visible; opacity: 1; transform: none; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .nav .btn { margin-top: 18px; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero .lead { margin-top: 24px; max-width: 590px; }
.hero .btns { margin-top: 34px; }
.hero-note { margin-top: 22px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- the ledger (the one memorable element) ---------- */
.ledger { background: var(--cream); color: var(--ink); border-radius: var(--r-paper); padding: 26px 26px 22px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 24px 60px rgba(8, 20, 13, .35);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, rgba(184, 153, 104, .35) 43px, rgba(184, 153, 104, .35) 44px);
  background-position: 0 58px; position: relative; }
.ledger::before { content: ''; position: absolute; top: 0; bottom: 0; left: 54px; width: 1px; background: rgba(192, 85, 43, .35); }
.ledger-top { display: flex; justify-content: space-between; align-items: baseline; padding-left: 40px; margin-bottom: 10px; }
.ledger-title { font: 500 1.35rem/1.2 var(--display); }
.ledger-tag { font-size: .8rem; font-weight: 600; color: var(--mute); }
.ledger table { width: 100%; border-collapse: collapse; font-size: .9rem; table-layout: fixed; }
.ledger col.c1 { width: 43%; } .ledger col.c2 { width: 33%; } .ledger col.c3 { width: 24%; }
.ledger th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--mute); padding: 0 0 8px; }
.ledger th:first-child, .ledger td:first-child { padding-left: 40px; }
.ledger td { height: 44px; padding: 0 8px 0 0; vertical-align: middle; line-height: 1.2; }
.ledger td:nth-child(2) { color: var(--ink-2); }
.via { font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.ledger .return td { font-weight: 600; }
.ledger .return .via { color: var(--clay-deep); }
.ledger .return td:first-child { position: relative; }
.ledger .return td:first-child::before { content: ''; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--clay); }
.ledger .return td:first-child::after { content: ''; position: absolute; left: 15px; top: 50%; width: 8px; height: 4px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.ledger-foot { margin-top: 14px; padding-left: 40px; font-size: .88rem; color: var(--ink-2); }
.ledger-foot strong { color: var(--clay-deep); }
@media (prefers-reduced-motion: no-preference) {
  .js .ledger .return { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
  .js .ledger .return.in { opacity: 1; transform: none; }
  .js .ledger-foot { opacity: 0; transition: opacity .6s ease .5s; }
  .js .ledger-foot.in { opacity: 1; }
}
@media (max-width: 520px) {
  .ledger { padding: 20px 14px 18px; }
  .ledger::before { left: 34px; }
  .ledger-top, .ledger-foot { padding-left: 30px; }
  .ledger th:first-child, .ledger td:first-child { padding-left: 30px; }
  .ledger .return td:first-child::before { left: 3px; } .ledger .return td:first-child::after { left: 8px; }
  .ledger table { font-size: .8rem; }
}

/* ---------- the loop: a real sequence, so it is numbered ---------- */
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; position: relative; }
.loop li { position: relative; padding: 0 28px 0 0; counter-increment: step; }
.loop li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--jungle); color: var(--jungle); font: 500 1.25rem/1 var(--display); position: relative; z-index: 1; margin-bottom: 22px; }
.section--sand .loop li::before { background: var(--sand); }
.loop li:last-child::before { background: var(--jungle); color: var(--cream); }
.loop li:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 46px; right: 0; height: 1.5px; background: var(--rule-strong); }
.loop h3 { margin-bottom: 10px; }
.loop p { color: var(--ink-2); font-size: 1rem; }
@media (max-width: 900px) {
  .loop { grid-template-columns: 1fr; gap: 34px; }
  .loop li { padding: 0 0 0 70px; min-height: 46px; }
  .loop li::before { position: absolute; left: 0; top: -4px; margin: 0; }
  .loop li:not(:last-child)::after { top: 46px; bottom: -34px; left: 22px; right: auto; width: 1.5px; height: auto; }
}

/* ---------- two doors ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.door { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(28px, 3.5vw, 40px); display: flex; flex-direction: column; }
.door-for { font-weight: 600; font-size: .95rem; color: var(--clay-deep); margin-bottom: 12px; }
.door h3 { font-size: var(--h3-lg); line-height: 1.22; }
.door ul { margin: 22px 0 28px; }
.door .textlink { margin-top: auto; }
@media (max-width: 820px) { .doors { grid-template-columns: 1fr; } }

/* ---------- lists with a tick ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 12px; height: 6px; border-left: 2px solid var(--clay); border-bottom: 2px solid var(--clay); transform: rotate(-45deg); }
.dark .ticks li { color: rgba(246, 239, 227, .86); }
.dark .ticks li::before { border-color: #F2B08F; }

/* ---------- three parts of the engine ---------- */
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.part { border-top: 2px solid var(--jungle); padding-top: 24px; }
.part-icon { width: 40px; height: 40px; color: var(--clay); margin-bottom: 18px; }
.part h3 { margin-bottom: 10px; }
.part p { color: var(--ink-2); }
.part .small { margin-top: 12px; }
@media (max-width: 860px) { .parts { grid-template-columns: 1fr; } }

/* ---------- platform diagram ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1.15fr); align-items: stretch; }
.flow-col { border: 1px solid var(--jungle-line); border-radius: var(--r-card); padding: 24px; background: rgba(255, 255, 255, .03); }
.flow-col h3 { margin-bottom: 4px; }
.flow-col .small { margin-bottom: 16px; }
.flow-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.flow-col li { padding: 10px 14px; border-radius: 8px; background: rgba(246, 239, 227, .07); font-weight: 600; font-size: .95rem; }
.flow-col--us { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.flow-col--us .small { color: var(--mute); }
.flow-col--us li { background: #fff; border: 1px solid var(--rule); }
.flow-arrow { display: flex; align-items: center; justify-content: center; }
.flow-arrow svg { width: 40px; height: 16px; color: #F2B08F; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { height: 48px; } .flow-arrow svg { transform: rotate(90deg); }
}
.flow-note { margin-top: 28px; max-width: 760px; }

/* ---------- proof ---------- */
.work { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.work figure { margin: 0; grid-column: span 2; }
.work figure.wide { grid-column: span 3; }
.work .frame { display: block; border-radius: var(--r-frame); overflow: hidden; border: 1px solid var(--rule); background: #fff; aspect-ratio: 16 / 10; }
.work .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work figcaption { margin-top: 12px; font-size: .95rem; color: var(--ink-2); }
.work figcaption strong { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) { .work { grid-template-columns: 1fr 1fr; } .work figure, .work figure.wide { grid-column: span 1; } }
@media (max-width: 560px) { .work { grid-template-columns: 1fr; } }

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(48px, 6vw, 72px); }
.quote { margin: 0; padding: 28px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); display: flex; flex-direction: column; }
.quote blockquote { margin: 0; font: 400 1.08rem/1.6 var(--display); color: var(--ink); }
.quote figcaption { margin-top: auto; padding-top: 20px; font-size: .92rem; color: var(--mute); }
.quote figcaption strong { color: var(--ink); display: block; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- name story ---------- */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.story p + p { margin-top: 18px; }
.story .lead { color: var(--ink-2); }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.team img { border-radius: var(--r-frame); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.team .lead { margin-top: 18px; }
.team p + p { margin-top: 16px; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } .team img { max-width: 340px; } }

/* ---------- prices ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plan { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(26px, 3.4vw, 38px); display: flex; flex-direction: column; }
.plan-for { font-weight: 600; font-size: .95rem; color: var(--clay-deep); }
.plan h3 { margin-top: 10px; font-size: var(--h3-lg); line-height: 1.22; }
.plan .price { margin-top: 18px; font: 500 2.4rem/1 var(--display); color: var(--jungle); }
.plan .price span { font: 500 1rem/1.4 var(--body); color: var(--mute); }
.plan .ticks { margin: 22px 0 26px; }
.plan .textlink, .plan .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

.bands { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.bands th, .bands td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.bands thead th { background: var(--cream); font-size: .9rem; font-weight: 700; color: var(--ink-2); }
.bands tbody th { font-weight: 600; }
.bands td { font-variant-numeric: tabular-nums; }
.bands tr:last-child th, .bands tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); }
.bands .num { font: 500 1.3rem/1.2 var(--display); color: var(--jungle); }

/* ---------- guest page phone ---------- */
.phone { width: min(330px, 100%); margin: 0 auto; background: #0f1a14; border-radius: 42px; padding: 12px; box-shadow: 0 30px 70px rgba(8, 20, 13, .45); }
.phone-screen { background: var(--paper); color: var(--ink); border-radius: 32px; overflow: hidden; }
.phone-hero { height: 150px; position: relative; background: linear-gradient(160deg, #6f9a7c 0%, #2f5a43 55%, #1f3d2c 100%); }
.phone-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to top, rgba(0,0,0,.35), transparent); }
.phone-hero span { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: #fff; font: 500 1.2rem/1.2 var(--display); }
.phone-body { padding: 16px 16px 20px; }
.phone-hi { font: 500 1.15rem/1.3 var(--display); }
.phone-dates { font-size: .82rem; color: var(--mute); margin-top: 2px; }
.pitems { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.pitems li { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 11px 13px; font-size: .84rem; }
.pitems b { font-weight: 700; }
.pitems em { font-style: normal; font-weight: 700; font-size: .76rem; color: var(--jungle); background: rgba(31, 61, 44, .09); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.pitems em.wait { color: var(--clay-deep); background: rgba(192, 85, 43, .1); }
.pback { margin-top: 12px; background: var(--jungle); color: var(--cream); border-radius: 14px; padding: 14px; font-size: .84rem; line-height: 1.45; }
.pback b { display: block; font: 500 1rem/1.3 var(--display); margin-bottom: 2px; }
.phone-caption { text-align: center; margin-top: 16px; }

/* ---------- the fee fact ---------- */
.fact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.fact-num { font: 500 clamp(5rem, 3rem + 9vw, 10rem)/.9 var(--display); color: var(--clay); letter-spacing: -.03em; }
.fact .lead { margin-top: 18px; }
.fact .small { margin-top: 18px; }
@media (max-width: 760px) { .fact { grid-template-columns: 1fr; } }

/* ---------- situations ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 28px; }
.card-for { font-weight: 600; font-size: .95rem; color: var(--clay-deep); margin-bottom: 10px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-2); }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.two h3 { margin-bottom: 18px; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }

/* ---------- compare ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare > div { border-radius: var(--r-card); padding: 30px; }
.compare .them { background: #fff; border: 1px solid var(--rule); }
.compare .us { background: var(--jungle); color: var(--cream); }
.compare h3 { margin-bottom: 6px; }
.compare .figure { font: 500 2rem/1.1 var(--display); margin: 14px 0 16px; }
.compare .them .figure { color: var(--ink); }
.compare .us .figure { color: #F2B08F; }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }

/* ---------- questions ---------- */
.faq { max-width: 820px; border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule-strong); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 500 1.18rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 24px; color: var(--ink-2); max-width: 700px; }

/* ---------- call ---------- */
.call { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.call .lead { margin-top: 18px; }
.call .ticks { margin-top: 28px; }
.cal { background: #fff; border-radius: var(--r-card); overflow: hidden; min-height: 640px; }
.cal iframe { display: block; width: 100%; height: 700px; border: 0; }
.call-alt { margin-top: 26px; }
@media (max-width: 900px) { .call { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(246, 239, 227, .8); padding: 56px 0 40px; font-size: .95rem; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)); gap: 36px; }
.site-footer .brand { color: var(--cream); }
.site-footer p { margin-top: 12px; max-width: 360px; }
.site-footer h4 { margin: 0 0 12px; font: 600 .95rem var(--body); color: var(--cream); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; } .site-footer a:hover { text-decoration: underline; }
.footer-base { grid-column: 1 / -1; border-top: 1px solid rgba(246, 239, 227, .14); padding-top: 22px; margin-top: 10px; font-size: .85rem; color: rgba(246, 239, 227, .6); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > div:first-child { grid-column: 1 / -1; } }

/* price bands: one card per band on phones, no sideways scrolling */
@media (max-width: 640px) {
  .bands, .bands tbody, .bands tr, .bands th, .bands td { display: block; width: 100%; }
  .bands { background: none; border: 0; }
  .bands thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bands tbody { display: grid; gap: 14px; }
  .bands tr { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 18px 20px; }
  .bands tbody th { padding: 0 0 10px; border: 0; font: 500 var(--h3)/1.28 var(--display); }
  .bands td { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border: 0; border-top: 1px solid var(--rule); }
  .bands td::before { content: attr(data-label); color: var(--ink-2); font-size: .92rem; }
  .bands td[colspan]::before { content: none; }
  .table-scroll { overflow: visible; }
}

/* the dark comparison card carries dark-section text colours */
.compare .us .ticks li { color: rgba(246, 239, 227, .88); }
.compare .us .ticks li::before { border-color: #F2B08F; }
/* footer rule spans the full width */
.site-footer .footer-base { max-width: none; }
/* ledger on phones: give the platform column room for "Booking.com" */
@media (max-width: 520px) { .ledger col.c1 { width: 38%; } .ledger col.c2 { width: 30%; } .ledger col.c3 { width: 32%; } .ledger .via { font-size: .78rem; } }

/* call card - replaces the Google embed, which cannot be styled */
.cal-card { background: var(--cream); color: var(--ink); border-radius: var(--r-card); padding: clamp(28px, 4vw, 44px); }
.cal-when { font-weight: 600; font-size: .95rem; color: var(--clay-deep); }
.cal-title { margin-top: 10px; font: 500 var(--h3-lg)/1.22 var(--display); }
.cal-text { margin: 12px 0 26px; color: var(--ink-2); max-width: 460px; }

/* =================== 2026-09-27: services menu, tours pages =================== */

/* services dropdown */
.has-menu { position: relative; }
.menu-btn { background: none; border: 0; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; font: 600 .98rem var(--body); color: var(--ink-2); cursor: pointer; }
.menu-btn:hover { color: var(--ink); }
.menu-btn .chev { width: 12px; height: 12px; transition: transform .15s; }
.has-menu.open .menu-btn .chev { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 14px); left: -18px; width: 360px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: 0 18px 50px rgba(26, 22, 18, .14); padding: 8px; display: grid; gap: 2px; visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-menu.open .menu { visibility: visible; opacity: 1; transform: none; }
@media (hover: hover) and (min-width: 861px) { .has-menu:hover .menu { visibility: visible; opacity: 1; transform: none; } }
.nav .menu a:not(.btn) { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; border: 0; }
.nav .menu a:not(.btn):hover, .nav .menu a:not(.btn):focus-visible { background: var(--paper); text-decoration: none; }
.menu b { display: block; font-weight: 700; color: var(--ink); font-size: .98rem; }
.menu span { display: block; margin-top: 2px; font-size: .88rem; font-weight: 500; color: var(--mute); }
@media (max-width: 860px) {
  .has-menu { border-bottom: 1px solid var(--rule); }
  .menu-btn { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1.05rem; color: var(--ink-2); }
  .menu { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 10px; display: none; visibility: visible; opacity: 1; transform: none; }
  .menu::before { content: none; }
  .has-menu.open .menu { display: grid; }
  .nav .menu a:not(.btn) { padding: 10px 12px; border-bottom: 0; font-size: 1rem; }
}

/* four service parts */
.parts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 1080px) { .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .parts { grid-template-columns: 1fr; } }
.part { scroll-margin-top: 90px; }

/* linked cards */
.card--link, .door--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.card--link:hover, .door--link:hover { border-color: var(--ink-2); box-shadow: 0 10px 30px rgba(26, 22, 18, .08); }
.card--link .textlink { margin-top: auto; padding-top: 16px; }
.door--link .textlink { margin-top: auto; }

/* receipts (switch hero) */
.receipts { display: grid; gap: 14px; max-width: 460px; justify-self: end; width: 100%; }
.receipt { background: var(--cream); color: var(--ink); border-radius: var(--r-paper); padding: 20px 22px 18px; box-shadow: 0 20px 50px rgba(8, 20, 13, .32); }
.receipt--you { background: #fff; }
.receipt-h { font: 500 1.15rem/1.3 var(--display); margin-bottom: 8px; }
.receipt dl { margin: 0; }
.receipt dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(26, 22, 18, .2); font-size: .95rem; }
.receipt dt { color: var(--ink-2); }
.receipt dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt .tot { border-bottom: 0; }
.receipt .tot dt, .receipt .tot dd { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.receipt--you .tot dd { color: var(--clay-deep); }
.receipt-n { margin-top: 6px; font-size: .86rem; color: var(--ink-2); }
.receipts-foot { font-size: .82rem; color: rgba(246, 239, 227, .7); }
@media (max-width: 960px) { .receipts { justify-self: start; } }

/* chat card (direct hero) */
.chatcard { background: var(--cream); color: var(--ink); border-radius: var(--r-card); padding: 24px 24px 22px; box-shadow: 0 24px 60px rgba(8, 20, 13, .35); max-width: 440px; justify-self: end; width: 100%; }
.chat-label { font-weight: 700; font-size: .85rem; color: var(--mute); margin-bottom: 10px; }
.bubble { background: #fff; border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px; padding: 12px 14px 8px; max-width: 92%; font-size: .96rem; line-height: 1.45; }
.chatcard .t { display: block; margin-top: 4px; text-align: right; font-size: .75rem; color: var(--mute); }
.chat-wait { font-size: .88rem; color: var(--ink-2); margin: 8px 0 22px; }
.chatcard .chat-wait:last-child { margin-bottom: 0; }
.slip { background: var(--jungle); color: var(--cream); border-radius: 14px; padding: 14px 16px 10px; display: grid; gap: 2px; }
.slip b { font: 500 1.15rem/1.3 var(--display); }
.slip span { font-size: .92rem; }
.slip .t { color: rgba(246, 239, 227, .65); }
@media (max-width: 960px) { .chatcard { justify-self: start; } }

/* hero screenshot (tours hub) */
.hero-shot { margin: 0; justify-self: end; max-width: 340px; width: 100%; }
.hero-shot img { border-radius: 18px; box-shadow: 0 24px 60px rgba(8, 20, 13, .4); }
.hero-shot figcaption { margin-top: 12px; font-size: .88rem; color: rgba(246, 239, 227, .7); text-align: center; }
@media (max-width: 960px) { .hero-shot { justify-self: center; } }

/* see it working (Legend) */
.demo-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 22px; border: 7px solid #16221B; background: #fff; }
.shot figcaption { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.demo-text h3 { margin-bottom: 16px; }
.steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.steps li { counter-increment: s; position: relative; padding-left: 44px; min-height: 30px; display: flex; align-items: center; color: var(--ink-2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--jungle); color: var(--jungle); display: flex; align-items: center; justify-content: center; font: 500 .95rem/1 var(--display); }
.ops { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ops-text h3 { margin-bottom: 12px; }
.ops-text p { color: var(--ink-2); }
.ops-text .textlink { display: inline-block; margin-top: 16px; }
.ops-text .small { margin-top: 8px; }
.ops .frame { display: block; border-radius: var(--r-frame); overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 16px 40px rgba(26, 22, 18, .1); }
@media (max-width: 900px) { .demo-grid, .ops { grid-template-columns: 1fr; } .ops .frame { order: -1; } }

/* stays / moves */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split > div { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(24px, 3vw, 34px); }
.split h3 { margin-bottom: 16px; }
.split .split-you { background: var(--jungle); border-color: var(--jungle); color: var(--cream); }
.split-you .ticks li { color: rgba(246, 239, 227, .88); }
.split-you .ticks li::before { border-color: #F2B08F; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.note { margin-top: 24px; max-width: 780px; color: var(--ink-2); font-size: .98rem; }

/* three questions */
.qa3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.qa3 > div { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 26px; }
.qa-q { font: 500 var(--h3)/1.3 var(--display); margin-bottom: 10px; }
.qa3 p:not(.qa-q) { color: var(--ink-2); }
@media (max-width: 900px) { .qa3 { grid-template-columns: 1fr; } }

/* keep what works */
.trio { margin-top: 20px; font: 500 var(--h3-lg)/1.4 var(--display); color: var(--clay-deep); }
.trio span { display: block; }

/* call band */
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.band { background: var(--jungle); color: var(--cream); border-radius: var(--r-card); padding: clamp(28px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.band .lead { margin-top: 12px; max-width: 640px; color: rgba(246, 239, 227, .8); }
.band .btn { flex: none; }
@media (max-width: 820px) { .band { flex-direction: column; align-items: flex-start; } }

/* fee table */
.fees caption { caption-side: top; text-align: left; padding: 0 0 14px; font-weight: 600; color: var(--ink-2); }
.fees tbody th { width: 22%; }
.fees tr.us th, .fees tr.us td { background: var(--cream); }
@media (max-width: 640px) {
  .fees caption { display: block; }
  .fees td { flex-direction: column; gap: 2px; }
  .fees tbody th { width: auto; }
  .fees tr.us { background: var(--cream); }
}

/* mobile menu scrolls when the services list is open; footer with five columns */
@media (max-width: 860px) { .nav { max-height: calc(100vh - 70px); overflow-y: auto; } }
.site-footer .wrap { grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); }
@media (max-width: 960px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > div:first-child { grid-column: 1 / -1; } }

/* =================== 2026-09-27 (b): Lars's review - motion, green bands, proof =================== */

/* green section band */
.section--green { background: var(--jungle); color: var(--cream); }
.section--green .lead { color: rgba(246, 239, 227, .8); }
.section--green .card { background: var(--cream); border-color: transparent; color: var(--ink); }
.section--green .card--link:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .28); border-color: transparent; transform: translateY(-3px); }
.section--green .card--link { transition: transform .2s, box-shadow .2s; }
.card-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--jungle); color: var(--cream); align-items: center; justify-content: center; font: 500 1rem/1 var(--display); margin-bottom: 16px; }

/* hero: "today" feed (homepage) */
.feed { background: var(--cream); color: var(--ink); border-radius: var(--r-card); padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(8, 20, 13, .35); max-width: 460px; width: 100%; justify-self: end; }
.feed-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.feed-title { font: 500 1.3rem/1.2 var(--display); }
.feed-tag { font-size: .8rem; font-weight: 600; color: var(--mute); }
.feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feed li { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; }
.feed .ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(31, 61, 44, .09); color: var(--jungle); }
.feed .ic svg { width: 20px; height: 20px; }
.feed b { display: block; font-weight: 700; font-size: .93rem; line-height: 1.3; }
.feed span { display: block; font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.feed time { font-size: .76rem; color: var(--mute); white-space: nowrap; align-self: start; }
.feed li.hi { background: var(--jungle); border-color: var(--jungle); }
.feed li.hi b, .feed li.hi span { color: var(--cream); } .feed li.hi time { color: rgba(246, 239, 227, .65); }
.feed li.hi .ic { background: var(--clay); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .feed li { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
  .js .feed li.in { opacity: 1; transform: none; }
}
@media (max-width: 960px) { .feed { justify-self: start; } }
@media (max-width: 420px) { .feed li { grid-template-columns: 34px 1fr; } .feed time { grid-column: 2; } }

/* hero: the guest's stay, told in steps (rentals) */
.stay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; justify-self: end; }
.stay-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 220px; }
.stay-steps li { font-size: .88rem; line-height: 1.35; color: rgba(246, 239, 227, .55); padding: 8px 0 8px 18px; border-left: 2px solid rgba(246, 239, 227, .18); transition: color .35s, border-color .35s; }
.stay-steps li b { display: block; font-weight: 700; font-size: .78rem; color: rgba(246, 239, 227, .45); transition: color .35s; }
.stay-steps li.on { color: var(--cream); border-color: #F2B08F; }
.stay-steps li.on b { color: #F2B08F; }
.phone [data-s] { transition: box-shadow .35s, border-color .35s, transform .35s; }
.phone .lit { border-color: var(--clay) !important; box-shadow: 0 0 0 3px rgba(192, 85, 43, .18); transform: scale(1.02); }
.pback.lit { box-shadow: 0 0 0 3px rgba(242, 176, 143, .55); }
.ptoast { margin-top: 10px; background: #fff; border: 1.5px solid var(--clay); border-radius: 12px; padding: 10px 12px; font-size: .8rem; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.ptoast b { display: block; color: var(--clay-deep); font-size: .82rem; }
.ptoast.in { opacity: 1; transform: none; }
.pitems em { transition: background-color .35s, color .35s; }
@media (max-width: 960px) { .stay { justify-self: start; } }
@media (max-width: 640px) { .stay { grid-template-columns: 1fr; } .stay-steps { max-width: none; grid-template-columns: 1fr 1fr; } .stay-steps li { padding: 6px 0 6px 12px; font-size: .82rem; } }

/* hero: chat card plays out (tours direct) */
@media (prefers-reduced-motion: no-preference) {
  .js .chatcard [data-c] { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
  .js .chatcard [data-c].in { opacity: 1; transform: none; }
}
.typing { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.chatcard .typing[hidden] { display: none; }
.chat-wait .moon { display: inline-block; margin-right: 6px; }

/* receipts: red for the platform, green for your own site */
.receipt { background: #FBE4DB; }
.receipt .tot dd { color: #9D2F13; }
.receipt--you { background: #E2F0E4; }
.receipt--you .tot dd { color: var(--jungle); }

/* which bookings move (switch) */
.routes { display: grid; gap: 12px; }
.route { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.route > div { padding: 18px 20px; }
.route-who b { display: block; font: 500 1.08rem/1.3 var(--display); }
.route-who span { font-size: .9rem; color: var(--mute); }
.route-now { background: #FBE4DB; }
.route-new { background: #E2F0E4; }
.route-stay .route-now, .route-stay .route-new { background: var(--cream); }
.route small { display: block; font-weight: 700; font-size: .78rem; color: var(--mute); margin-bottom: 4px; }
.route p { font-size: .95rem; line-height: 1.45; color: var(--ink); }
.route p strong { font-variant-numeric: tabular-nums; }
.routes-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); padding: 0 20px; font-weight: 700; font-size: .85rem; color: var(--ink-2); }
@media (max-width: 820px) { .route, .routes-head { grid-template-columns: 1fr; } .routes-head { display: none; } }
.seats { margin-top: 36px; background: var(--cream); border-radius: var(--r-card); padding: clamp(22px, 3vw, 30px); }
.seats h3 { margin-bottom: 6px; }
.seats > p { color: var(--ink-2); max-width: 680px; }
.seatbar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 20px 0 12px; }
.seatbar i { height: 34px; border-radius: 8px; background: var(--jungle); }
.seatbar i.p { background: #E3A58A; }
.seatkey { display: flex; flex-wrap: wrap; gap: 18px; font-size: .9rem; color: var(--ink-2); }
.seatkey span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--jungle); }
.seatkey span.p::before { background: #E3A58A; }

/* see it working: bigger, and the dashboard on green */
.demo-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.shots { gap: 22px; }
.shot img { aspect-ratio: 3 / 4.2; }
.ops { margin-top: clamp(40px, 5vw, 64px); background: var(--jungle); color: var(--cream); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 44px); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.ops-text p { color: rgba(246, 239, 227, .82); }
.ops-text .textlink { color: #F2B08F; }
.ops-text .small { color: rgba(246, 239, 227, .6); }
.ops .frame { border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }

/* what's included (rentals) */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.incl-panel { border-radius: var(--r-card); padding: clamp(24px, 3.4vw, 40px); background: #fff; border: 1px solid var(--rule); }
.incl-panel--you { background: var(--jungle); color: var(--cream); border-color: var(--jungle); }
.incl-panel h3 { font-size: var(--h3-lg); margin-bottom: 22px; }
.incl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.incl-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.incl-list svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(192, 85, 43, .1); color: var(--clay-deep); }
.incl-panel--you .incl-list svg { background: rgba(246, 239, 227, .1); color: #F2B08F; }
.incl-list b { display: block; font-weight: 700; line-height: 1.35; }
.incl-list span { display: block; font-size: .93rem; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.incl-panel--you .incl-list span { color: rgba(246, 239, 227, .75); }
@media (max-width: 860px) { .incl { grid-template-columns: 1fr; } }

/* local suppliers (rentals) */
.extras { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 22px; box-shadow: 0 18px 44px rgba(26, 22, 18, .08); }
.extras-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.extras-h b { font: 500 1.2rem/1.2 var(--display); }
.extras-h span { font-size: .82rem; color: var(--mute); font-weight: 600; }
.extra { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: center; }
.extra b { font-weight: 700; } .extra span { font-size: .88rem; color: var(--mute); grid-column: 1; }
.extra .price { font: 500 1.15rem/1 var(--display); color: var(--jungle); grid-row: 1; grid-column: 2; }
.extra em { grid-column: 2; font-style: normal; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(31, 61, 44, .09); color: var(--jungle); justify-self: end; }
.extra em.wait { background: rgba(192, 85, 43, .1); color: var(--clay-deep); }
.extras-foot { margin-top: 12px; font-size: .86rem; color: var(--ink-2); }
.supp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.supp .lead + .lead { margin-top: 16px; }
.supp .ticks { margin-top: 24px; }
@media (max-width: 860px) { .supp { grid-template-columns: 1fr; } }

/* sites we built: rows with a scrolling preview (same as pulperiastudio.com/work) */
.wrows { border-top: 1px solid var(--rule); }
.wrow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; padding: clamp(36px, 5vw, 56px) 0; border-bottom: 1px solid var(--rule); }
.wrow:nth-child(even) .wmedia { order: 2; }
.wframe { display: block; border-radius: 13px; overflow: hidden; background: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(26, 22, 18, .14), 0 18px 44px -20px rgba(26, 22, 18, .45); transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s; }
.wrow:hover .wframe { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(26, 22, 18, .18), 0 28px 56px -22px rgba(26, 22, 18, .5); }
.wchrome { display: flex; align-items: center; gap: 7px; background: #E6DDCC; padding: 9px 13px; border-bottom: 1px solid var(--rule); }
.wchrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(26, 22, 18, .2); }
.wchrome span { margin-left: 8px; font-size: .72rem; font-weight: 600; color: var(--mute); background: var(--paper); padding: 3px 12px; border-radius: var(--r-pill); }
.wview { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.wstrip { width: 100%; max-width: none; transform: translateY(0); transition: transform 6.5s cubic-bezier(.35, 0, .32, 1); }
.wframe.playing .wstrip { transform: translateY(var(--pull, -60%)); }
.whint { position: absolute; right: 11px; bottom: 11px; font-size: .7rem; font-weight: 700; padding: 6px 11px; border-radius: var(--r-pill); background: rgba(26, 22, 18, .74); color: var(--cream); transition: opacity .3s; pointer-events: none; }
.wframe.playing .whint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wstrip { transition: none; } .wframe.playing .wstrip { transform: none; } }
.wbody .wkick { font-weight: 600; font-size: .92rem; color: var(--clay-deep); margin-bottom: 10px; }
.wbody h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.12; margin-bottom: 14px; }
.wbody p { color: var(--ink-2); }
.wfacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.wfacts span { font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--cream); border: 1px solid var(--rule); padding: 6px 12px; border-radius: var(--r-pill); }
@media (max-width: 900px) { .wrow { grid-template-columns: 1fr; } .wrow:nth-child(even) .wmedia { order: 0; } }

/* what clients say */
.says { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; }
.says-main { background: var(--jungle); color: var(--cream); border-radius: var(--r-card); padding: clamp(28px, 4vw, 48px); margin: 0; display: flex; flex-direction: column; }
.says-main blockquote { margin: 0; font: 400 clamp(1.3rem, 1.1rem + .9vw, 1.75rem)/1.4 var(--display); }
.says-main blockquote::before, .says-side blockquote::before { content: '\201C'; display: block; font: 500 4rem/.6 var(--display); color: #F2B08F; margin-bottom: 14px; }
.says-side { display: grid; gap: 22px; }
.says-side figure { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; }
.says-side blockquote { margin: 0; font: 400 1.08rem/1.55 var(--display); }
.says-side blockquote::before { color: var(--clay); font-size: 3rem; margin-bottom: 8px; }
.who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; font-size: .92rem; }
.who i { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 1rem/1 var(--display); font-style: normal; background: var(--cream); color: var(--jungle); }
.says-main .who i { background: #F2B08F; color: var(--jungle); }
.who strong { display: block; } .who span { color: var(--mute); } .says-main .who span { color: rgba(246, 239, 227, .7); }
@media (max-width: 900px) { .says { grid-template-columns: 1fr; } }

/* rentals hero: one caption above the phone, changing with each step */
.stay { display: block; width: min(360px, 100%); justify-self: end; }
.stay-steps { position: relative; list-style: none; margin: 0 0 16px; padding: 0; height: 74px; max-width: none; display: block; counter-reset: st; }
.stay-steps li { position: absolute; inset: 0; padding: 12px 16px 12px 58px; border: 1px solid rgba(246, 239, 227, .22); border-radius: 14px; background: rgba(246, 239, 227, .06);
  color: var(--cream); font-size: .92rem; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; counter-increment: st; }
.stay-steps li::before { content: counter(st); position: absolute; left: 14px; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #F2B08F; color: var(--jungle);
  display: flex; align-items: center; justify-content: center; font: 500 1rem/1 var(--display); }
.stay-steps li b { display: block; color: #F2B08F; font-size: .82rem; }
.stay-steps li.on { opacity: 1; transform: none; }
.phone-hi.lit { box-shadow: none; transform: none; border: 0; color: var(--clay-deep); }
@media (max-width: 960px) { .stay { justify-self: center; } }
@media (max-width: 640px) { .stay-steps { grid-template-columns: none; } .stay-steps li { padding: 12px 14px 12px 56px; font-size: .9rem; } }
.feed-title { font-size: 1.4rem; }
.ptoast { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; transition: opacity .4s, transform .4s, max-height .4s, margin-top .4s, padding .4s; }
.ptoast.in { max-height: 90px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; border-width: 1.5px; }

/* =================== /pricing =================== */
.pricing-hero .lead { max-width: 720px; }
.ptabs { display: inline-flex; gap: 6px; margin-top: 34px; background: rgba(246, 239, 227, .08); border: 1px solid rgba(246, 239, 227, .2); padding: 6px; border-radius: var(--r-pill); }
.ptab { border: 0; background: none; color: var(--cream); font: 600 1rem var(--body); padding: 11px 22px; border-radius: var(--r-pill); cursor: pointer; }
.ptab[aria-selected="true"] { background: var(--cream); color: var(--jungle); }
.pgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
.pcard, .calc { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(24px, 3.2vw, 38px); }
.pbig { margin-top: 12px; font: 500 3.4rem/1 var(--display); color: var(--jungle); }
.pbig span { font: 500 1.05rem var(--body); color: var(--mute); }
.pplus { margin-top: 8px; font-weight: 700; font-size: 1.08rem; }
.pcaps { margin: 22px 0; padding: 16px 18px; background: var(--cream); border-radius: 12px; }
.pcaps-h { font-weight: 700; font-size: .9rem; color: var(--ink-2); margin-bottom: 8px; }
.pcaps dl { margin: 0; }
.pcaps dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; font-size: .96rem; transition: background-color .2s; }
.pcaps dt { color: var(--ink-2); } .pcaps dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcaps dl div.on { background: var(--jungle); color: var(--cream); } .pcaps dl div.on dt { color: var(--cream); }
.calc-h { font-size: var(--h3-lg); margin-bottom: 22px; }
.rng, .sel { display: block; margin-bottom: 22px; }
.rng > span, .sel > span { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .95rem; color: var(--ink-2); margin-bottom: 10px; }
.rng output { font: 500 1.2rem/1 var(--display); color: var(--jungle); font-variant-numeric: tabular-nums; }
.rng input[type=range] { width: 100%; accent-color: var(--clay); height: 28px; }
.sel select { width: 100%; min-height: 46px; border: 1.5px solid var(--rule-strong); border-radius: 12px; padding: 0 12px; font: 500 1rem var(--body); background: #fff; color: var(--ink); }
.calc-out { background: var(--jungle); color: var(--cream); border-radius: 14px; padding: 20px 22px; }
.calc-num { font: 500 2.8rem/1 var(--display); font-variant-numeric: tabular-nums; }
.calc-sub { margin-top: 4px; font-size: .9rem; color: rgba(246, 239, 227, .7); }
.calc-how { margin-top: 12px; font-size: .95rem; color: rgba(246, 239, 227, .88); }
.calc-vs { margin-top: 8px; font-size: .95rem; color: #F2B08F; font-weight: 600; }
.calc-vs:empty { display: none; }
.calc-setup { margin-top: 20px; }
.calc-setup-h { font-weight: 700; margin-bottom: 8px; }
.setup-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.setup-row b { font-variant-numeric: tabular-nums; }
.calc-setup .small { margin-top: 8px; }
.pinc { margin-top: clamp(56px, 7vw, 88px); }
.pinc h2 { margin-bottom: 28px; }
.pinc .incl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pinc .incl-panel h3 { font-size: var(--h3); margin-bottom: 18px; }
.pex { margin-top: 20px; }
.incl-panel--you .textlink { color: #F2B08F; }
.msgs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; counter-reset: m; }
.msgs li { position: relative; padding: 0 0 16px 38px; counter-increment: m; }
.msgs li::before { content: counter(m); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); color: var(--jungle); display: flex; align-items: center; justify-content: center; font: 500 .85rem/1 var(--display); }
.msgs li:not(:last-child)::after { content: ''; position: absolute; left: 12.5px; top: 28px; bottom: 2px; width: 1px; background: var(--rule-strong); }
.msgs b { display: block; font-weight: 700; } .msgs span { display: block; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 1000px) { .pinc .incl { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .pgrid { grid-template-columns: 1fr; } }
/* compact price band on service pages */
.pband { display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(24px, 3.4vw, 40px); }
.pband .pbig { font-size: 2.6rem; margin-top: 8px; }
.pband .lead { margin-top: 10px; }
@media (max-width: 760px) { .pband { grid-template-columns: 1fr; } }
.incl-panel--you .ticks li { color: rgba(246, 239, 227, .88); }
.incl-panel--you .ticks li::before { border-color: #F2B08F; }

/* =================== guides =================== */
.gtop { padding-top: clamp(40px, 6vw, 72px); }
.gwrap { max-width: 780px; }
.gcrumb { font-size: .92rem; color: var(--mute); margin-bottom: 18px; }
.gcrumb a { color: var(--clay-deep); text-decoration: none; font-weight: 600; }
.gh1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); line-height: 1.08; }
.gtop .lead { margin-top: 18px; }
.gmeta { margin-top: 14px; font-size: .9rem; color: var(--mute); padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.prose { margin-top: 32px; font-size: 1.08rem; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); color: var(--ink); margin-top: 44px; }
.prose h3 { color: var(--ink); margin-top: 30px; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.prose strong { color: var(--ink); }
.prose .small { font-size: .92rem; }
.gsrc { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }
.gsrc h2 { font-size: 1.1rem; margin-bottom: 12px; }
.gsrc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .95rem; }
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gcard { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 26px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gcard:hover { border-color: var(--ink-2); box-shadow: 0 12px 30px rgba(26, 22, 18, .08); transform: translateY(-2px); }
.gcard b { font: 500 1.22rem/1.3 var(--display); color: var(--ink); }
.gcard span { color: var(--ink-2); font-size: .96rem; }
.gcard .gaud { font-weight: 600; font-size: .85rem; color: var(--clay-deep); }
.gcard .gmore { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .gcards { grid-template-columns: 1fr; } }

/* =================== 2026-09-28: Lars's review, round 2 =================== */

/* rentals hero v3: nothing moves the layout - only highlights change */
.stay--v3 { width: min(360px, 100%); }
.stay--v3 .stay-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.stay--v3 .phone-screen { position: relative; }
.phone-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 9px; background: #fff; border-bottom: 1px solid var(--rule); }
.phone-bar img { height: 30px; width: auto; }
.phone-bar span { font-size: .68rem; font-weight: 700; color: var(--mute); border: 1px dashed var(--rule-strong); border-radius: var(--r-pill); padding: 3px 8px; }
.phone-hero--img { background: #2f5a43; overflow: hidden; }
.phone-hero--img picture, .phone-hero--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone-hero--img::after { height: 70px; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }
.stay--v3 .phone .lit { transform: none; }
.stay--v3 .ptoast { position: absolute; left: 14px; right: 14px; bottom: 16px; max-height: none; margin: 0; padding: 12px 14px; border-width: 1.5px; overflow: visible;
  box-shadow: 0 14px 34px rgba(8, 20, 13, .28); opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; pointer-events: none; }
.stay--v3 .ptoast.in { opacity: 1; transform: none; }
.stay-now { margin-top: 18px; min-height: 3.6em; text-align: center; color: rgba(246, 239, 227, .86); font-size: .95rem; line-height: 1.4; }
.stay-now b { display: block; color: #F2B08F; font-size: .85rem; }

/* the sites we build: a calmer scroll on hover */
.wstrip { transition: transform 16s cubic-bezier(.45, .05, .55, .95); }
.wframe:not(.playing) .wstrip { transition-duration: 1.2s; }

/* homepage: platforms diagram on a light band, only our column is green */
.flow--light .flow-col { background: #fff; border: 1px solid var(--rule); color: var(--ink); }
.flow--light .flow-col .small { color: var(--mute); }
.flow--light .flow-col li { background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); }
.flow--light .flow-col--us { background: var(--jungle); color: var(--cream); border-color: var(--jungle); }
.flow--light .flow-col--us .small { color: rgba(246, 239, 227, .72); }
.flow--light .flow-col--us li { background: rgba(246, 239, 227, .1); border-color: rgba(246, 239, 227, .18); color: var(--cream); }
.flow--light .flow-arrow svg { color: var(--clay); }

/* tours: the two outcomes, light red and light green */
.chat-wait { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); font-weight: 600; }
.chat-wait--no { background: #FBE1D8; color: #8E2E12; }
.chat-wait--yes { background: #DDEFE1; color: #1F5A32; }

/* switch: two receipts, a red line and a green line, same paper */
.receipt, .receipt--you { background: #fff; box-shadow: 0 20px 50px rgba(8, 20, 13, .28); border-radius: 12px; }
.receipt { border: 2px solid #E08A6E; }
.receipt--you { border: 2px solid #6FAE82; }
.receipt .tot dd { color: #9D2F13; }
.receipt--you .tot dd { color: var(--jungle); }
.receipt-keep { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-weight: 700; font-size: .95rem; }
.receipt .receipt-keep { background: #FDF0EB; color: #8E2E12; }
.receipt--you .receipt-keep { background: #EEF6F0; color: #1F5A32; }

/* switch: which bookings move - calm cards, colour only as a thin marker */
.route-now, .route-new, .route-stay .route-now, .route-stay .route-new { background: #fff; }
.route > div + div { border-left: 1px solid var(--rule); }
.route-now small, .route-new small { display: inline-flex; align-items: center; gap: 6px; }
.route-now small::before, .route-new small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #E08A6E; }
.route-new small::before { background: #5E9E72; }
.route-stay .route-now small::before, .route-stay .route-new small::before { background: var(--rule-strong); }
.route-stay .route-who b { color: var(--ink-2); }
@media (max-width: 820px) { .route > div + div { border-left: 0; border-top: 1px solid var(--rule); } }
.seatbar i.p { background: #CFC6B4; }
.seatkey span.p::before { background: #CFC6B4; }

/* pricing: a call to action under every calculator */
.pcta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 22px; padding: 22px 26px; background: var(--cream); border-radius: var(--r-card); }
.pcta p { color: var(--ink-2); max-width: 560px; }
.pcta .btn { flex: none; }
.pnote { margin-top: 14px; font-size: .9rem; color: var(--mute); max-width: 780px; }

/* pricing: what we handle for your guests - a timeline, not a list */
.comms { margin-top: clamp(48px, 6vw, 72px); background: var(--jungle); color: var(--cream); border-radius: var(--r-card); padding: clamp(26px, 4vw, 48px); }
.comms h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.comms .lead { margin-top: 12px; color: rgba(246, 239, 227, .8); max-width: 680px; }
.tline { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: tl; }
.tline li { position: relative; background: rgba(246, 239, 227, .07); border: 1px solid rgba(246, 239, 227, .16); border-radius: 14px; padding: 18px 16px 16px; counter-increment: tl; }
.tline li::before { content: counter(tl); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #F2B08F; color: var(--jungle); font: 500 .9rem/1 var(--display); margin-bottom: 12px; }
.tline b { display: block; font-weight: 700; } .tline span { display: block; margin-top: 4px; font-size: .9rem; color: rgba(246, 239, 227, .78); line-height: 1.45; }
.tline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.comms .small { margin-top: 18px; color: rgba(246, 239, 227, .6); }
@media (max-width: 960px) { .tline, .tline--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tline, .tline--4 { grid-template-columns: 1fr; } }
.comms--light { background: var(--cream); color: var(--ink); }
.comms--light .lead { color: var(--ink-2); }
.comms--light .tline li { background: #fff; border-color: var(--rule); }
.comms--light .tline li::before { background: var(--jungle); color: var(--cream); }
.comms--light .tline span { color: var(--ink-2); }
.comms--light .small { color: var(--mute); }

/* pricing: included, three panels with a "see all" */
.pinc .incl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.incl-panel--own { background: var(--cream); border-color: transparent; }
.more { margin-top: 14px; }
.more summary { cursor: pointer; font-weight: 600; color: var(--clay-deep); list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ' +'; }
.more[open] summary::after { content: ' -'; }
.more .ticks { margin-top: 12px; }
.incl-panel--you .more summary { color: #F2B08F; }
@media (max-width: 1000px) { .pinc .incl--3 { grid-template-columns: 1fr; } }
.incl-foot { margin-top: 18px; font-size: .88rem; color: rgba(246, 239, 227, .7); }
.incl-panel:not(.incl-panel--you) .incl-foot { color: var(--mute); }
.incl-panel--you .btns { margin-top: 24px; }
.incl-list .opt { font-size: .75rem; font-weight: 700; color: var(--mute); background: var(--cream); border-radius: var(--r-pill); padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }
.more-work { margin-top: 30px; }

/* WhatsApp button, bottom right on every page */
.wa-float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); transition: transform .15s, box-shadow .15s; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.wa-float svg { width: 30px; height: 30px; }

/* /work: the short case notes under each site */
.case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.case > div { background: var(--cream); border-radius: var(--r-card); padding: 24px; }
.section--sand .case > div { background: #fff; }
.case h3 { font-size: 1.12rem; margin-bottom: 8px; }
.case p { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }
.incl-list .opt { display: inline-block; margin-top: 0; }
.incl-panel--you .btn--ghost { border-color: rgba(246, 239, 227, .45); color: var(--cream); }
.incl-panel--you .btn--ghost:hover { border-color: var(--cream); }

/* homepage engine: four linked parts, lit in turn */
.parts--live .part { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); border-radius: var(--r-card); padding: 26px 24px 24px; background: #fff; transition: border-color .4s, box-shadow .4s, transform .4s; }
.parts--live .part .textlink { margin-top: auto; padding-top: 16px; }
.parts--live .part p:not(.part-when) { margin-bottom: 4px; }
.part-when { font-size: .82rem; font-weight: 700; color: var(--mute); margin-bottom: 6px; }
.parts--live .part.on, .parts--live .part:hover { border-top-color: var(--clay); box-shadow: 0 18px 44px rgba(26, 22, 18, .1); transform: translateY(-4px); }
.parts--live .part.on .part-icon, .parts--live .part:hover .part-icon { color: var(--clay-deep); }
.parts--live .part-icon { transition: color .4s; }

/* service pages */
.phone--static { justify-self: end; }
@media (max-width: 960px) { .phone--static { justify-self: center; } }
.bubble--us { margin: 10px 0 0 auto; background: var(--jungle); color: var(--cream); border-color: var(--jungle); border-radius: 16px 16px 4px 16px; }
.bubble--us .t { color: rgba(246, 239, 227, .65); }
.chatcard .bubble + .bubble:not(.bubble--us) { margin-top: 10px; }
.chatcard .chat-wait--yes { margin: 14px 0 0; }
.hero-frame { max-width: 520px; width: 100%; justify-self: end; }
.hero-frame .wview { aspect-ratio: 4 / 3.4; }
@media (max-width: 960px) { .hero-frame { justify-self: start; } }

/* tours: three ways operators take bookings */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.way { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(24px, 3vw, 32px); }
.way--us { background: var(--jungle); border-color: var(--jungle); color: var(--cream); }
.way h3 { margin-bottom: 4px; }
.way-sub { font-size: .92rem; color: var(--mute); margin-bottom: 18px; }
.way--us .way-sub { color: rgba(246, 239, 227, .7); }
.ways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ways-list li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: .98rem; }
.way--us .ways-list li { color: rgba(246, 239, 227, .9); }
.ways-list li::before { position: absolute; left: 0; top: .05em; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; line-height: 1; }
.ways-list li.plus::before { content: '+'; background: #DDEFE1; color: #1F5A32; }
.ways-list li.minus::before { content: '-'; background: #FBE1D8; color: #8E2E12; }
.way--us .ways-list li.plus::before { background: #F2B08F; color: var(--jungle); }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }

/* 2026-09-28: EN/ES switch */
.nav a.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 32px; padding: 4px 10px; border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill); font-size: .85rem; letter-spacing: .04em; text-decoration: none; }
.nav a.lang-switch:hover { border-color: var(--ink); text-decoration: none; }
.lang-switch--m { display: none; }
@media (max-width: 860px) {
  .nav a.lang-switch { display: none; }
  .lang-switch--m { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 42px; margin-left: auto; margin-right: 10px; padding: 0 12px; border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill); font: 600 .9rem var(--body); letter-spacing: .04em; color: var(--ink); text-decoration: none; }
}

/* 2026-09-28: brand mark - the accent on the i and the dot, both in clay */
.brand-word { white-space: nowrap; }
.brand-i { position: relative; display: inline-block; }
.brand-i::after { content: "\00ED"; position: absolute; left: 0; top: 0; color: var(--clay); clip-path: inset(-.5em -.5em var(--acc-cut, 58%) -.5em); pointer-events: none; }

/* 2026-09-28: "Ask us" site agent, bottom right; WhatsApp sits just above it */
.wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
.ask-launch { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 71; display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: var(--r-pill); background: var(--jungle); color: var(--cream); font: 700 .98rem var(--body); cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); transition: transform .18s, box-shadow .18s; }
.ask-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.ask-launch i { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); }
.ask-launch.hide, .ask-open .wa-float { display: none; }
.ask-panel { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 36px); display: none; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.ask-panel.open { display: flex; }
.ask-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--jungle); color: var(--cream); }
.ask-head b { flex: 1; font: 600 1.1rem/1.2 var(--display); }
.ask-head span { display: block; font: 500 .8rem var(--body); opacity: .8; }
.ask-x { background: none; border: 0; color: var(--cream); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.ask-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.ask-msg { max-width: 86%; padding: 10px 13px; border-radius: 15px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--rule); border-bottom-left-radius: 5px; color: var(--ink); }
.ask-msg.out { align-self: flex-end; background: var(--jungle); color: var(--cream); border-bottom-right-radius: 5px; }
.ask-msg a { color: var(--clay-deep); }
.ask-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--rule); border-radius: 15px; }
.ask-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: askBlink 1.2s infinite; }
.ask-typing span:nth-child(2) { animation-delay: .2s; } .ask-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes askBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.ask-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 10px; }
.ask-chip { font: 600 .85rem var(--body); color: var(--jungle); background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; }
.ask-chip:hover { border-color: var(--jungle); }
.ask-note { padding: 0 16px 8px; font-size: .75rem; color: var(--mute); }
.ask-note a { color: inherit; }
.ask-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--rule); background: #fff; }
.ask-foot input { flex: 1; min-width: 0; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); padding: 11px 15px; font: 500 16px var(--body); outline: none; }
.ask-foot input:focus { border-color: var(--jungle); }
.ask-send { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--clay); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ask-send:disabled { opacity: .5; }
.ask-send svg { width: 19px; height: 19px; }
@media (max-width: 520px) { .ask-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } .ask-launch span { display: none; } .ask-launch { padding: 0 16px; } .ask-launch i { width: 12px; height: 12px; } }
.ask-launch svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* 2026-09-28: rentals pricing - flat by size, "start small" option, two-option calculator */
.pcard-h { margin-top: 10px; font-size: var(--h3-lg, 1.6rem); line-height: 1.2; }
.pcaps--flat { margin: 18px 0 16px; }
.pcaps--flat dd { font-size: 1.05rem; }
.pstart { margin: 0 0 18px; padding: 14px 18px; border: 1.5px dashed var(--rule-strong); border-radius: 12px; }
.pstart-h { font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: 4px; }
.pstart p:last-child { font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
.calc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-opt { border-radius: 14px; padding: 16px 18px; background: var(--cream); color: var(--ink); border: 2px solid transparent; transition: background-color .2s, border-color .2s, color .2s; }
.calc-opt .calc-num { font-size: 2.3rem; }
.calc-opt .calc-sub { color: var(--mute); font-size: .85rem; }
.calc-opt-h { font-weight: 800; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.calc-opt.best { background: var(--jungle); color: var(--cream); }
.calc-opt.best .calc-opt-h, .calc-opt.best .calc-sub { color: rgba(246, 239, 227, .78); }
.pgrid--rentals .calc-how { margin-top: 12px; color: var(--ink-2); font-size: .93rem; min-height: 2.9em; }
.pinc .incl:not(.incl--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pinc .incl:not(.incl--3) { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .calc-two { grid-template-columns: 1fr; } }

/* 2026-09-28: /es/mexico - the checkout card in the hero */
.mxpay { background: var(--paper); color: var(--ink); border-radius: 20px; padding: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); max-width: 420px; justify-self: end; width: 100%; }
.mxpay-top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.mxpay-top span { color: var(--mute); }
.mxpay-h { margin: 14px 0 10px; font-weight: 700; }
.mxpay-opt { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 40px; margin-bottom: 8px; border: 1.5px solid var(--rule-strong); border-radius: 12px; position: relative; background: #fff; }
.mxpay-opt::before { content: ""; position: absolute; left: 14px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule-strong); }
.mxpay-opt.on { border-color: var(--jungle); }
.mxpay-opt.on::before { border-color: var(--jungle); background: radial-gradient(var(--jungle) 45%, transparent 50%); }
.mxpay-opt span { font-size: .85rem; color: var(--mute); }
.mxpay-fact { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .92rem; font-weight: 600; }
.mxpay-fact i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--rule-strong); }
@media (max-width: 860px) { .mxpay { justify-self: stretch; max-width: none; } }

/* 2026-09-28: service pages - related products, "what you see" screenshots, setup cards */
.rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rel { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.rel:hover { border-color: var(--jungle); transform: translateY(-2px); }
.rel b { font: 600 1.15rem var(--display); color: var(--jungle); }
.rel span { font-size: .92rem; color: var(--ink-2); }
.svc-rel[data-cur="direct"] [data-k="direct"], .svc-rel[data-cur="guest-pages"] [data-k="guest-pages"], .svc-rel[data-cur="concierge"] [data-k="concierge"],
.svc-rel[data-cur="websites"] [data-k="websites"], .svc-rel[data-cur="owners"] [data-k="owners"] { display: none; }
@media (max-width: 900px) { .rel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rel-grid { grid-template-columns: 1fr; } }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.shot { margin: 0; }
.shot .wframe { display: block; }
.shot figcaption { margin-top: 12px; font-size: .95rem; color: var(--ink-2); }
.shot figcaption b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
@media (max-width: 860px) { .shots { grid-template-columns: 1fr; } }
.setup3 .card { display: flex; flex-direction: column; }
.setup3 .ticks { margin: 14px 0 16px; font-size: .95rem; }
.setup3 .textlink { margin-top: auto; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 30px; }
.feat h3 { font-size: var(--h3); margin-bottom: 6px; }
.feat p { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.shot .wview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shots--one { grid-template-columns: minmax(0, 760px); }

/* 2026-09-28: "Ask us" nudge after 20 seconds */
.ask-nudge { position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 72; max-width: 260px; padding: 14px 34px 14px 16px; border-radius: 16px 16px 4px 16px; background: #fff; color: var(--ink); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); cursor: pointer; opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .3s, transform .3s; }
.ask-nudge.in { opacity: 1; transform: none; pointer-events: auto; }
.ask-nudge b { display: block; font: 600 1.05rem var(--display); color: var(--jungle); }
.ask-nudge span { display: block; margin-top: 3px; font-size: .9rem; color: var(--ink-2); }
.ask-nudge-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mute); cursor: pointer; padding: 2px 4px; }
.ask-open .ask-nudge { display: none; }
.ask-launch.wiggle { animation: askWiggle 1.2s ease 2; }
@keyframes askWiggle { 0%, 100% { transform: none; } 20% { transform: translateY(-4px) rotate(-3deg); } 40% { transform: translateY(0) rotate(3deg); } 60% { transform: translateY(-2px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .ask-launch.wiggle { animation: none; } }
.section--fine { padding-top: 0; padding-bottom: 28px; }

/* 2026-09-28: the wordmark is an outlined SVG (scripts/make_logo_svg.py) */
.brand-svg { display: block; height: 34px; width: auto; }
.site-footer .brand-svg { height: 30px; }
@media (max-width: 520px) { .brand-svg { height: 30px; } }

/* 2026-09-28: Legend demo - mobile fixes and the dashboard as a scrolling phone */
@media (max-width: 900px) { .demo-grid, .ops { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .demo-grid .shots { gap: 12px; } .demo-grid .shot img { border-width: 5px; border-radius: 16px; } .demo-text .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; } }
.phone-scroll { display: block; justify-self: center; width: 290px; max-width: 100%; padding: 10px; border-radius: 38px; background: #16221B; box-shadow: 0 24px 60px rgba(8, 20, 13, .35); }
.ps-screen { display: block; height: 560px; overflow: hidden; border-radius: 28px; background: #fff; }
.ps-screen img { display: block; width: 100%; height: auto; animation: psScroll 26s ease-in-out 1s infinite alternate; }
.phone-scroll:hover .ps-screen img { animation-play-state: paused; }
@keyframes psScroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 560px)); } }
@media (prefers-reduced-motion: reduce) { .ps-screen img { animation: none; } .ps-screen { overflow-y: auto; } }
.ops { align-items: center; }
@media (max-width: 900px) { .ops .phone-scroll { order: -1; } }

/* 2026-09-28: how your customer pays - tabs with a phone showing each way to pay */
.mxv { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 5vw, 64px); align-items: center; }
.mxv-tabs { display: grid; gap: 10px; }
.mxv-tab { text-align: left; display: grid; gap: 2px; padding: 16px 18px; border: 1.5px solid var(--rule); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; font: inherit; position: relative; overflow: hidden; transition: border-color .2s, background-color .2s; }
.mxv-tab b { font: 600 1.15rem var(--display); color: var(--jungle); }
.mxv-when { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--clay-deep); }
.mxv-txt { font-size: .93rem; color: var(--ink-2); max-height: 0; opacity: 0; transition: max-height .35s, opacity .35s; }
.mxv-tab.on { border-color: var(--jungle); background: var(--paper); }
.mxv-tab.on .mxv-txt { max-height: 120px; opacity: 1; margin-top: 4px; }
.mxv-tab.on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--clay); transform-origin: left; animation: mxvBar 4.2s linear; }
.mxv.paused .mxv-tab.on::after { animation: none; transform: scaleX(0); }
@keyframes mxvBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mxv-phone { position: relative; width: 300px; height: 520px; justify-self: center; padding: 16px; border-radius: 38px; background: #fff; border: 10px solid #16221B; box-shadow: 0 24px 60px rgba(8, 20, 13, .25); overflow: hidden; }
.mxv-bar { padding-bottom: 12px; border-bottom: 1px solid var(--rule); display: grid; font-size: .9rem; }
.mxv-bar span { color: var(--mute); font-size: .85rem; }
.mxv-scr { position: absolute; inset: 70px 16px 16px; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; pointer-events: none; display: flex; flex-direction: column; gap: 9px; }
.mxv-scr.on { opacity: 1; transform: none; }
.mxv-h { font-weight: 800; margin: 4px 0; }
.mxv-scr label { font-size: .75rem; color: var(--mute); margin-bottom: -6px; }
.mxv-field { border: 1.5px solid var(--rule-strong); border-radius: 10px; padding: 9px 11px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mxv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mxv-pay { margin-top: auto; background: var(--clay); color: #fff; border-radius: 12px; padding: 12px; text-align: center; font-weight: 700; }
.mxv-ok { color: #2F7D4F; font-weight: 700; font-size: .88rem; }
.mxv-ok::before { content: "\2713  "; }
.mxv-opt { border: 1.5px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }
.mxv-opt.on { border-color: var(--jungle); background: var(--paper); font-weight: 700; }
.mxv-note { font-size: .8rem; color: var(--mute); }
.mxv-voucher { border: 1.5px dashed var(--rule-strong); border-radius: 14px; padding: 16px; display: grid; gap: 8px; text-align: center; }
.mxv-oxxo { justify-self: center; background: #E3001B; color: #FFE300; font-weight: 900; letter-spacing: .06em; padding: 4px 12px; border-radius: 6px; }
.mxv-voucher b { font-size: 1.05rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.mxv-barcode { display: block; height: 46px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 8px, #111 8px 11px, #fff 11px 12px); }
@media (max-width: 860px) { .mxv { grid-template-columns: 1fr; } .mxv-phone { order: -1; } }
@media (prefers-reduced-motion: reduce) { .mxv-scr, .mxv-txt { transition: none; } .mxv-tab.on::after { animation: none; } }

/* 2026-09-28: "We do the work" strip - modest, one line of three steps */
.wedo-sec { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(28px, 4vw, 44px); }
.wedo { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: 26px 30px; border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.wedo-h { font: 600 1.35rem/1.25 var(--display); color: var(--jungle); }
.wedo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wedo-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; position: relative; }
.wedo-steps li + li::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.wd-n { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--clay-deep); font: 600 1rem/1 var(--display); }
.wedo-steps b { display: block; font-weight: 700; line-height: 1.3; }
.wedo-steps span:not(.wd-n) { display: block; margin-top: 3px; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 900px) { .wedo { grid-template-columns: 1fr; } .wedo-steps { grid-template-columns: 1fr; gap: 16px; } .wedo-steps li + li::before { display: none; } }

/* 2026-09-28: link to the tour booking demo under the Legend button */
.demo-text .demo-alt { margin-top: 14px; font-size: 0.95rem; color: var(--ink-2, #555); }


/* ================= 2026-09-28 landing-page pass ================= */
/* "We do the work" - a full-width green strip, no frame */
.wedo-band { padding: clamp(34px, 4.5vw, 52px) 0; }
.wedo-band .wedo { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px 48px; align-items: center; padding-top: 0; padding-bottom: 0; border: 0; border-radius: 0; background: none; }
.wedo-band .wedo-h { font: 500 clamp(1.45rem, 1.2rem + .9vw, 1.9rem)/1.2 var(--display); color: var(--cream); margin: 0; }
.wedo-band .wedo-steps li + li::before { background: rgba(246, 239, 227, .18); }
.wedo-band .wd-n { background: rgba(246, 239, 227, .12); color: #F2B08F; }
.wedo-band .wedo-steps b { color: var(--cream); }
.wedo-band .wedo-steps span:not(.wd-n) { color: rgba(246, 239, 227, .75); }
@media (max-width: 900px) { .wedo-band .wedo { grid-template-columns: 1fr; } }

/* How your customer pays - picked by the visitor, fixed heights, the choice also inside the phone */
.mxv-pick { font-size: .88rem; color: var(--mute); margin-bottom: 10px; }
.mxv-tab .mxv-txt { max-height: none; opacity: 1; margin-top: 2px; transition: none; }
.mxv-tab.on .mxv-txt { max-height: none; margin-top: 2px; }
.mxv-tab.on::after, .mxv.paused .mxv-tab.on::after { content: none; animation: none; }
.mxv-tab { transition: border-color .2s, background-color .2s; }
.mxv-tab:hover { border-color: var(--rule-strong); }
.mxv-tab.on { border-color: var(--jungle); box-shadow: inset 4px 0 0 var(--clay); }
.mxv-phone { height: 560px; }
.mxv-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--cream); border-radius: 12px; padding: 4px; margin-top: 12px; }
.mxv-sb { border: 0; background: none; border-radius: 9px; padding: 8px 2px; font: 600 .78rem var(--body); color: var(--ink-2); cursor: pointer; }
.mxv-sb.on { background: #fff; color: var(--jungle); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.mxv-scr { inset: 122px 16px 16px; }
.mxv-cap { display: none; }
@media (max-width: 860px) {
  .mxv-side { display: none; }
  .mxv-phone { order: 0; width: min(320px, 100%); }
  .mxv-cap { display: block; text-align: center; font-size: .95rem; color: var(--ink-2); min-height: 3em; margin: 4px auto 0; max-width: 320px; }
}

/* Which bookings move: column labels line up with the columns */
.routes-head { padding: 0; margin-bottom: 8px; }
.routes-head span { padding: 0 21px; }

/* No big gap above "The messages we send for you" */
.section > .wrap > .comms:first-child { margin-top: 0; }
#messages { padding-top: clamp(36px, 4.5vw, 56px); }

/* Pricing: what is included, the dropdown, the call */
.pinc { margin-top: 22px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(22px, 3vw, 34px); }
.pinc h3 { font-size: 1.35rem; margin-bottom: 14px; }
.pinc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.pinc-list li { position: relative; padding-left: 28px; color: var(--ink); line-height: 1.45; }
.pinc-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #E2F0E4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7D4F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 700px) { .pinc-list { grid-template-columns: 1fr; } }
.sel-box { position: relative; display: block; }
.sel-box::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--jungle); border-bottom: 2px solid var(--jungle); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sel select { -webkit-appearance: none; appearance: none; min-height: 50px; padding: 10px 44px 10px 14px; border: 1.5px solid var(--rule-strong); border-radius: 12px; background: var(--paper, #fff); font: 500 .98rem/1.3 var(--body); color: var(--ink); cursor: pointer; white-space: normal; }
.sel select:hover { border-color: var(--jungle); }
.sel select:focus { outline: none; border-color: var(--jungle); box-shadow: 0 0 0 3px rgba(31, 61, 46, .15); }
.calc-lbl { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #F2B08F; margin-bottom: 6px; }
.calc-lbl:empty { display: none; }
.calc-rows { margin-top: 16px; border-top: 1px solid rgba(246, 239, 227, .18); padding-top: 10px; display: grid; gap: 6px; }
.calc-rows div { display: flex; justify-content: space-between; gap: 14px; font-size: .93rem; color: rgba(246, 239, 227, .82); }
.calc-rows b { color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing--addon .setup-site { display: none; }
.pcta { justify-content: space-between; background: var(--jungle); color: var(--cream); padding: clamp(22px, 3vw, 32px); }
.pcta p { color: rgba(246, 239, 227, .8); }
.pcta .pcta-h { font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.25 var(--display); color: var(--cream); margin-bottom: 6px; }
@media (max-width: 700px) { .pcta { flex-direction: column; align-items: flex-start; } }

/* pricing order: grid, what is included, then the call, then the note */
#pricing > .wrap { display: flex; flex-direction: column; }
#pricing > .wrap > .head { order: 0; } #pricing > .wrap > .pgrid { order: 1; } #pricing > .wrap > .pinc { order: 2; } #pricing > .wrap > .pcta { order: 3; } #pricing > .wrap > .pnote { order: 4; }

.pcta-direct { display: none; }
.pricing--addon:not(.pricing--platform) .pcta-direct { display: block; }
.pricing--addon:not(.pricing--platform) .pcta-plat { display: none; }


/* 2026-09-29 "What is included": first 5 lines, the rest fades, a clear button opens the full list */
.pinc.is-collapsed .pinc-list li:nth-child(n+6) { display: none; }
.pinc.is-collapsed .pinc-list { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.pinc-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1.5px solid var(--jungle); border-radius: 999px; background: #fff; color: var(--jungle); font: 600 .95rem var(--body); cursor: pointer; }
.pinc-more:hover { background: var(--jungle); color: var(--cream); }
.pinc-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pinc:not(.is-collapsed) .pinc-more::after { transform: translateY(2px) rotate(-135deg); }