/* ============================================================================
   hospitality.css — CARTaja Booking pricing page (hotels & guest houses).
   Reuses the design tokens defined on :root in home.css (loaded before this),
   plus its nav / footer / .price-card / .cmp-table / .faq / .cta chrome.
   Only what home.css has no equivalent for lives here.

   Page shape: teal brand hero → ivory commission-math band → ivory pricing →
   dark feature grid → ivory comparison + FAQ → crimson CTA.
   ========================================================================== */

.hs-body {
  background: var(--ivory);
  color: var(--text-primary);
  font-family: "DM Sans", system-ui, sans-serif;
  margin: 0;
}

/* Nav sits on the teal hero here and on ivory once scrolled past it, so it
   carries its own always-on glass rather than home.css's transparent-at-top
   treatment. Same approach as scenarios.css. */
.hs-body nav {
  background: rgba(4, 58, 60, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-glass);
}
.hs-body .nav-links a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════ HERO ═══════════════════ */
/* Hospitality's own artwork — the same cothon harbour as index/scenarios with
   the shopping cart swapped for a bellhop's luggage trolley, so the page reads
   as a sibling rather than a different brand.
   The teal wash is deliberately lighter than scenarios.css's: that one is
   tuned for the dark, high-contrast ecommerce graphic, and the same opacities
   over this paler illustration flatten the trolley and kill the cyan hologram
   entirely. Don't "resync" these values with scenarios.css.
   Also, unlike the ecommerce graphic this one has no wordmark baked in, so
   `70%` is now about keeping the trolley in frame, not cropping a logo out. */
.hs-hero {
  background-color: var(--bg-darkest);
  background-image:
    radial-gradient(100% 78% at 50% 52%, rgba(4, 58, 60, 0.66) 0%, rgba(4, 58, 60, 0.3) 52%, transparent 82%),
    linear-gradient(
      90deg,
      rgba(4, 58, 60, 0.78) 0%,
      rgba(10, 138, 142, 0.5) 34%,
      rgba(10, 138, 142, 0.22) 62%,
      rgba(4, 58, 60, 0.34) 100%
    ),
    url("../assets/cothon-trolley.webp");
  background-size: auto, auto, cover;
  /* 38% vertical, not center: the hologram is the focal point and sits high in
     the frame, so a centred crop cuts it off in a short hero. */
  background-position: center, center, 70% 38%;
  background-repeat: no-repeat;
  color: var(--ivory);
  padding: 132px 24px 72px;
  text-align: center;
}
.hs-hero__inner { max-width: 820px; margin: 0 auto; }
.hs-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd9c7;
  background: rgba(215, 111, 75, 0.18);
  border: 1px solid rgba(255, 217, 199, 0.28);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hs-hero__title {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #fff;
}
.hs-hero__lede {
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  line-height: 1.6;
  color: rgba(245, 241, 229, 0.86);
  max-width: 640px;
  margin: 0 auto 30px;
}
.hs-hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hs-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.hs-hero__btn--primary {
  background: var(--crimson);
  color: var(--ivory);
  box-shadow: 0 6px 20px rgba(45, 14, 38, 0.35);
}
.hs-hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(45, 14, 38, 0.42); }
.hs-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.hs-hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }

/* ═══════════════════ COMMISSION MATH BAND ═══════════════════ */
/* The load-bearing argument of the page: price CARTaja against what the OTAs
   already take, not against ecommerce software. Three cards, last one wins. */
.hs-math {
  background: var(--ivory-warm);
  border-bottom: 1px solid var(--border-light);
}
/* home.css gives .ss `max-width:560px` with no auto margins, so inside a
   centred 720px head it sits 80px left of its own heading. home.css patches
   this per-block (.pricing-header .ss, .features-header .ss, …); these are the
   three heads this page adds, so they need the same patch. */
.hs-math__head .ss,
.hs-features__head .ss,
.hs-compare__head .ss { margin-left: auto; margin-right: auto; }

.hs-math__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.hs-math__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.hs-math__card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-math__card--win {
  background: linear-gradient(160deg, rgba(10, 138, 142, 0.08), var(--white) 60%);
  border-color: rgba(10, 138, 142, 0.35);
  box-shadow: 0 10px 30px rgba(10, 138, 142, 0.1);
}
.hs-math__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hs-math__card--win .hs-math__label { color: var(--bg-main); }
.hs-math__figure {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--heading-color);
}
.hs-math__card--win .hs-math__figure { color: var(--bg-main); }
.hs-math__figure--struck { color: #BF2937; }
.hs-math__note { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); }
.hs-math__punch {
  margin-top: 34px;
  text-align: center;
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--heading-color);
}
.hs-math__punch em { font-style: normal; color: var(--bg-main); }
.hs-math__fineprint {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* ═══════════════════ PRICING EXTRAS ═══════════════════ */
/* home.css owns .price-card / .price-badge / .price-amount / .price-features.
   These add the room-capacity line every lodging card leads with. */
.hs-rooms {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bg-main);
  margin: -6px 0 10px;
}
.price-badge-rooms { background: rgba(10, 138, 142, 0.1); color: var(--bg-main); }
.hs-unlimited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bg-main);
  background: rgba(10, 138, 142, 0.09);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
}

/* ── Room calculator ──
   Continuous pricing has no tier grid to read, so the calculator IS the price
   list: the buyer types their room count and sees their actual bill. Same
   pattern Sirvoy / Beds24 / Hotelogix / OwnerRez use. */
.hs-calc {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 10px 34px rgba(42, 60, 66, 0.07);
}
.hs-calc__left { padding: 34px 34px 30px; }
.hs-calc__right {
  padding: 34px;
  background: linear-gradient(160deg, rgba(10, 138, 142, 0.09), rgba(10, 138, 142, 0.03));
  border-left: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.hs-calc__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.hs-calc__stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hs-calc__btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--ivory);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--heading-color);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hs-calc__btn:hover { background: var(--ivory-warm); border-color: var(--bg-main); }
.hs-calc__input {
  width: 96px; height: 42px;
  text-align: center;
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--heading-color);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--white);
}
/* Number spinners duplicate the +/- buttons */
.hs-calc__input::-webkit-outer-spin-button,
.hs-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs-calc__input { -moz-appearance: textfield; appearance: textfield; }
.hs-calc__range {
  width: 100%;
  accent-color: var(--bg-main);
  margin-bottom: 12px;
}
.hs-calc__hint { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }
.hs-calc__price {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bg-main);
}
.hs-calc__per { font-size: 1rem; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.hs-calc__each { font-size: 0.9rem; color: var(--text-secondary); }
.hs-calc__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--ivory);
  font-weight: 600;
  font-size: 0.92rem;
  transition: transform 0.18s ease;
}
.hs-calc__cta:hover { transform: translateY(-2px); }

.hs-formula {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 40px;
}
.hs-formula strong { color: var(--bg-main); }

/* ── What's included ──
   One plan means no tier grid to compare, so this is a flat feature list
   rather than a price card. */
.hs-included {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 30px 34px;
  max-width: 880px;
  margin: 0 auto;
}
.hs-included__title {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 20px;
  text-align: center;
}
.hs-included__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 26px;
}
.hs-included__list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.hs-included__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(10, 138, 142, 0.12);
  box-shadow: inset 0 0 0 1px rgba(10, 138, 142, 0.35);
}

/* ── Free-tier strip ──
   Deliberately NOT a pricing card: one room is a sandbox, and giving it a card
   next to the paid plan would imply a property could be run on it. */
.hs-freeline {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 880px;
  margin: 20px auto 0;
  padding: 20px 26px;
  background: var(--ivory-warm);
  border: 1px dashed rgba(10, 138, 142, 0.4);
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hs-freeline strong { color: var(--heading-color); }
.hs-freeline__icon { color: var(--bg-main); font-size: 26px; flex-shrink: 0; }

/* Group / multi-property strip under the cards. */
.hs-custom {
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hs-custom__title {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: 1.25rem;
  color: var(--heading-color);
  margin-bottom: 6px;
}
.hs-custom__copy { font-size: 0.92rem; color: var(--text-secondary); max-width: 560px; }
.hs-custom__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--ivory);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: transform 0.18s ease;
}
.hs-custom__btn:hover { transform: translateY(-2px); }

.hs-pricing-note {
  margin-top: 26px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

/* ═══════════════════ FEATURE GRID (dark) ═══════════════════ */
.hs-features { background: var(--bg-darkest); }
.hs-features__head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.hs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hs-card {
  background: var(--glass-bg);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 26px 24px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hs-card:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-3px);
}
.hs-card__icon {
  font-size: 30px;
  color: var(--terracotta);
  margin-bottom: 14px;
  display: block;
}
.hs-card__title {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--ivory);
  margin-bottom: 9px;
  line-height: 1.3;
}
.hs-card__desc {
  font-size: 0.88rem;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
}
/* home.css styles .cs-tag for the ivory pricing cards (teal on pale teal);
   on the dark feature cards that is near-invisible, so re-tint to the
   terracotta-on-dark treatment used by the hero eyebrow. */
.hs-card .cs-tag {
  background: rgba(215, 111, 75, 0.18);
  border: 1px solid rgba(255, 217, 199, 0.28);
  color: #ffd9c7;
}

/* ═══════════════════ COMPARISON ═══════════════════ */
.hs-compare { background: var(--ivory); }
.hs-compare__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.hs-compare__wrap { max-width: 760px; margin: 0 auto; }
.hs-compare__note {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.85;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 900px) {
  .hs-math__grid { grid-template-columns: 1fr; }
  .hs-grid { grid-template-columns: repeat(2, 1fr); }
  .hs-calc { grid-template-columns: 1fr; }
  .hs-calc__right { border-left: 0; border-top: 1px solid var(--border-light); align-items: center; text-align: center; }
  .hs-included__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hs-hero {
    padding-top: 108px;
    /* A phone-shaped box crops `cover` down to a narrow slice, and at 70% that
       slice is just trolley rails and luggage — unreadable. Panning left trades
       the subject for the harbour, which survives the zoom. */
    background-position: center, center, 52% 38%;
  }
  .hs-grid { grid-template-columns: 1fr; }
  .hs-included__list { grid-template-columns: 1fr; }
  .hs-custom { flex-direction: column; align-items: flex-start; }
  .hs-calc__left, .hs-calc__right { padding: 26px 22px; }
  .hs-included { padding: 24px 22px; }
  .hs-freeline { flex-direction: column; gap: 10px; padding: 20px 22px; }
}

/* ═══════════════════ RTL ═══════════════════ */
[dir="rtl"] .hs-card,
[dir="rtl"] .hs-math__card { text-align: right; }

/* home.css right-aligns .st/.ss/.sl in RTL, which is right for its own
   left-aligned hero but wrong here — every section head on this page is
   centred, in every language. Scoped to .hs-body so index.html keeps its. */
[dir="rtl"] .hs-body .sl,
[dir="rtl"] .hs-body .st,
[dir="rtl"] .hs-body .ss { text-align: center; }

/* Checkmark bullets: the tick is absolutely positioned off the inline start. */
[dir="rtl"] .hs-included__list li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .hs-included__list li::before { left: auto; right: 0; }

/* Divider between the calculator's two halves follows the flip. */
[dir="rtl"] .hs-calc__right { border-left: 0; border-right: 1px solid var(--border-light); }
[dir="rtl"] .hs-calc__per { margin-left: 0; margin-right: 4px; }

/* The stepper is a number line, not prose — keep −/+ in their LTR order so
   "−" stays on the side that decreases. */
[dir="rtl"] .hs-calc__stepper { direction: ltr; }