/* Glavbook marketing landing — prototype.
   Colors mirror resources/styles/glavbook-theme.scss so the site and the app
   read as one product; layout rhythm follows the Ramp / Attio reference. */
:root {
  --bg-canvas: #EEF0F4;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F4F6F9;
  --bg-surface-3: #EEF1F5;
  --bg-sidebar: #12151B;
  --border-subtle: #EFF1F5;
  --border: #E4E7EC;
  --border-strong: #C9D0DA;
  --text-primary: #171A20;
  --text-secondary: #5B6472;
  --text-muted: #8A909B;
  --text-faint: #A2A8B3;
  --brand: #12A17A;
  --brand-hover: #0C7A5C;
  --brand-soft: #E6F5F0;
  --brand-ring: rgba(18, 161, 122, .18);
  --mark-yellow: #EFC03A;
  --mark-orange: #E1922B;
  --st-ok-bg: #D7F0E7;   --st-ok-stripe: #12A17A;   --st-ok-fg: #0B4A39;
  --st-warn-bg: #FBEDD5; --st-warn-stripe: #D98E1F; --st-warn-fg: #5A3B08;
  --st-info-bg: #DCE9F9; --st-info-stripe: #2E7FD1; --st-info-fg: #123A62;
  --st-block-bg: #E7EAEF; --st-block-stripe: #8A909B; --st-block-fg: #3A414C;
  --shadow-overlay: 0 18px 44px rgba(15, 23, 42, .16);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .10);

  --gutter: 64px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: 400 16px/1.5 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

section[id], .dcard[id] { scroll-margin-top: 88px; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--ghost { color: var(--text-primary); }
.btn--ghost:hover { background: var(--bg-surface-2); }
.btn--dark { background: var(--text-primary); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--lg { height: 48px; font-size: 16px; width: 100%; }

/* ---------- Announcement ---------- */
.announce {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 48px; background: var(--bg-sidebar); color: #E8EBF0;
  font-size: 14px;
}
.announce__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.announce__tag { padding: 2px 8px; border-radius: 6px; background: rgba(18, 161, 122, .22); color: #6FD9B5; font-size: 12px; font-weight: 600; }
.announce__text { color: #C9CED6; }
.announce__link { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.announce__link:hover { text-decoration-color: #fff; }
.announce__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: #98A0AE; cursor: pointer;
}
.announce__close:hover { background: rgba(255,255,255,.08); color: #fff; }
.announce__close .ic { width: 16px; height: 16px; }
.announce.is-hidden { display: none; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.header.is-scrolled, .header.is-open { border-bottom-color: var(--border); }
.header.is-open { background: #fff; }
.header__bar { display: flex; align-items: center; height: var(--header-h); gap: 40px; }

.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.logo img { width: 30px; height: 30px; margin-left: -4px; }

.nav { flex: 1; }
.nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__trigger, .nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; font-size: 15px; font-weight: 500;
  color: var(--text-primary); cursor: pointer; transition: color .15s, background-color .15s;
}
/* Chevron matches the Ramp reference: ~10px glyph in the label's own colour.
   Cyrillic labels are mostly lowercase with descenders (р, д, у), so the
   chevron sits on the x-height centre, 1px below the cap centre. */
.nav__trigger .ic--chev { position: relative; top: 1px; width: 20px; height: 20px; stroke-width: 2; transition: transform .2s var(--ease); }
.nav__trigger[aria-expanded="true"] .ic--chev { transform: rotate(180deg); }
/* Ramp-style focus: while a menu is open, the other items recede */
.nav.has-open .nav__trigger:not([aria-expanded="true"]), .nav.has-open .nav__link { color: var(--text-muted); }
.nav__trigger:hover, .nav__link:hover { color: var(--text-primary) !important; }

.header__actions { display: flex; align-items: center; gap: 8px; }

.burger {
  display: none; place-items: center; width: 44px; height: 44px; margin-left: auto; margin-right: -10px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.burger .ic { width: 24px; height: 24px; }
.burger .ic--close { display: none; }
.burger[aria-expanded="true"] .ic--open { display: none; }
.burger[aria-expanded="true"] .ic--close { display: block; }

/* ---------- Mega menu ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 8px; }
.mega[hidden] { display: none; }
.mega__surface {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-overlay);
  transform-origin: top center;
  animation: megaIn .22s var(--ease);
  transition: height .26s var(--ease);
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.mega__panel { display: grid; grid-template-columns: 1fr 300px; }
.mega__panel:has(.mega__cols--4) { grid-template-columns: 1fr 264px; }
.mega__panel[hidden] { display: none; }
.mega__panel.is-entering { animation: panelIn .22s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateX(var(--dir, 0)); } to { opacity: 1; transform: none; } }

.mega__cols { display: grid; gap: 8px 16px; padding: 28px 24px 24px; }
/* auto tracks: free space is shared equally, so the air after each column's text is the same */
.mega__cols--4 { grid-template-columns: repeat(4, auto); }
.mega__cols--2 { grid-template-columns: repeat(2, auto); }
.mega__title {
  margin: 0 0 8px; padding: 0 8px 10px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.mega__group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mitem { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 12px; transition: background-color .15s; }
.mitem:hover, .mitem:focus-visible { background: var(--bg-surface-2); }
.mitem__ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: background-color .15s, color .15s, border-color .15s;
}
.mitem:hover .mitem__ic { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.mitem__ic--logo { background: #fff; border-color: var(--border); }
.mitem:hover .mitem__ic--logo { background: #fff; border-color: var(--border); }
.mitem__ic--logo img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.mitem b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.mitem small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--text-muted); }

.mega__feature { padding: 28px 24px 24px; background: var(--bg-surface-2); border-left: 1px solid var(--border-subtle); }
.mega__feature .mega__title { border-bottom-color: var(--border); }
.fcard { display: flex; flex-direction: column; gap: 4px; padding: 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .15s; }
.fcard:hover { background: #fff; }
.fcard > b { margin-top: 10px; font-size: 15px; font-weight: 500; }
.fcard > small { font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.fcard__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--brand-hover); }
.fcard__more .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fcard:hover .fcard__more .ic { transform: translateX(3px); }
.fcard__art {
  position: relative; display: flex; height: 132px; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  background-image: radial-gradient(circle, #DDE2E9 1px, transparent 1.3px); background-size: 12px 12px;
}
.fcard__art--finance { align-items: flex-end; gap: 10px; padding: 18px 22px 0; }
.fbar { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: #D7F0E7; }
.fbar--hi { background: var(--brand); }
.fcard__art--bars { flex-direction: column; justify-content: center; gap: 10px; padding: 0 22px; }
.fcard__art--bars span { display: block; width: var(--w); height: 18px; margin-left: var(--x, 0); border-radius: 9px; background: var(--c); }
.fcard__art--logos { align-items: center; justify-content: center; gap: 12px; }
.fcard__art--logos img { width: 40px; height: 40px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(15,23,42,.06); object-fit: contain; }
.fcard__art--assistant { align-items: center; justify-content: center; }
.fcard__art--assistant img { width: 104px; height: 104px; }

.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(23, 26, 32, .16);
  animation: fadeIn .2s ease;
}
.scrim[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed; z-index: 49; left: 0; right: 0; bottom: 0; top: var(--mmenu-top, var(--header-h));
  display: flex; flex-direction: column; background: #fff; overflow-y: auto;
  animation: fadeIn .18s ease;
}
.mmenu[hidden] { display: none; }
.mmenu__body { flex: 1; padding: 8px 16px; }
.mmenu__sec { border-bottom: 1px solid var(--border-subtle); }
.mmenu__sec summary, .mmenu__plain {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-size: 18px; font-weight: 500; list-style: none; cursor: pointer;
}
.mmenu__sec summary::-webkit-details-marker { display: none; }
.mmenu__sec summary .ic { color: var(--text-muted); transition: transform .2s var(--ease); }
.mmenu__sec[open] summary .ic { transform: rotate(180deg); }
.mmenu__plain { border-bottom: 1px solid var(--border-subtle); }
.mmenu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 0 16px; }
.mmenu__links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text-secondary); }
.mmenu__foot { display: grid; gap: 8px; padding: 16px; border-top: 1px solid var(--border); background: #fff; position: sticky; bottom: 0; }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 72px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
.hero__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(18, 161, 122, 0); } }
.hero__title {
  margin: 0;
  /* Sized so the longest rotating line («Больше свободного времени.», ≈14.5em) fits the container */
  font-size: clamp(38px, 6vw, 88px); font-weight: 500; line-height: 1.1; letter-spacing: -.045em;
}
.br-phone { display: none; }

/* Rotating benefit pill, drawn like a booking bar in the Glavbook calendar:
   soft status fill, text in the status ink, and a left stripe that follows
   the rounded corner like a bracket. Proportions copy the calendar bar
   (radius ≈ .25 and stripe ≈ .07 of its height).
   Geometry for Golos Text: with line-height 1 the word's line box spans
   baseline −.88em…+.12em; .14em of extra bottom padding puts the pill centre
   at baseline −.31em, the optical centre between cap height (.70) and
   x-height (.53). Pill top stays at −.88em so it never touches the
   descenders of the line above (line pitch 1.1em). */
.swap {
  display: inline-flex; align-items: baseline;
  padding: 0 .26em .14em .3em; border-radius: .28em;
  background: var(--swap-bg); color: var(--swap-fg);
  box-shadow: inset .08em 0 0 var(--swap-stripe);
  line-height: 1; font-weight: 400; letter-spacing: -.035em;
  vertical-align: baseline; white-space: nowrap;
  clip-path: inset(0 round .28em);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
}
.swap__track { display: inline-grid; transition: width .55s var(--ease); }
.swap__word {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  transition: transform .55s var(--ease), opacity .4s ease, filter .55s var(--ease);
}
.swap__word.is-in { transform: translateY(.7em); opacity: 0; filter: blur(6px); transition: none; }
.swap__word.is-out { transform: translateY(-.7em); opacity: 0; filter: blur(6px); }
.hero__lead {
  margin: 24px 0 0; max-width: 34em;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.45; color: var(--text-secondary); text-wrap: balance;
}

.signup {
  display: flex; gap: 6px; width: 100%; max-width: 500px; margin-top: 36px; padding: 6px;
  background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.signup:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); background: #fff; }
.signup__input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--text-primary); outline: none;
}
.signup__input::placeholder { color: var(--text-muted); }
.signup__btn {
  /* 1px bottom padding centres the cap height exactly (measured: equal gaps above caps and below baseline) */
  height: 48px; padding: 0 22px 1px; border: 0; border-radius: 10px; background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .15s;
}
.signup__btn:hover { background: var(--brand-hover); }
.signup__btn:active { transform: translateY(1px); }

/* ---------- Product stage ---------- */
.stage {
  position: relative; margin-top: 64px; height: 600px; border-radius: 20px; overflow: hidden;
  background-color: var(--bg-surface-2);
  background-image: radial-gradient(circle, #D5DAE2 1px, transparent 1.4px);
  background-size: 16px 16px;
  border: 1px solid var(--border-subtle);
}
.app {
  position: absolute; left: 17%; right: 4%; top: 64px; bottom: -24px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
  overflow: hidden;
}
.app__top { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.app__title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.app__title span { margin-left: 6px; font-weight: 400; color: var(--text-muted); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #F1F3F6; margin-left: 8px; }
.seg span { display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.seg .is-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.app__search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 280px; height: 34px; margin-left: auto; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-faint); white-space: nowrap; overflow: hidden;
}
.app__search .ic { width: 15px; height: 15px; }
.app__new { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 500; }
.app__new .ic { width: 15px; height: 15px; stroke-width: 2.2; }

/* Calendar grid: 1 label column + 14 days; bookings sit on 28 half-day tracks */
.cal { --label: 176px; --row: 46px; position: relative; flex: 1; display: grid; grid-template-columns: var(--label) 1fr; grid-auto-rows: var(--row); font-size: 12px; overflow: hidden; }
.cal__corner { display: flex; align-items: center; padding: 0 16px; height: 44px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.cal__days { display: grid; grid-template-columns: repeat(14, 1fr); height: 44px; border-bottom: 1px solid var(--border); }
.cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; border-left: 1px solid var(--border-subtle); color: var(--text-secondary); }
.cal__day small { font-size: 10.5px; color: var(--text-muted); text-transform: lowercase; }
.cal__day b { font-size: 13px; font-weight: 500; }
.cal__day.is-weekend { background: #F7F8FA; }
.cal__day.is-today b { display: grid; place-items: center; width: 24px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff; }
.cal__label { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border); min-width: 0; }
.cal__label b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__label small { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cal__row { position: relative; display: grid; grid-template-columns: repeat(28, 1fr); align-items: center; border-bottom: 1px solid var(--border-subtle);
  background-image: linear-gradient(to right, var(--border-subtle) 1px, transparent 1px); background-size: calc(100% / 14) 100%; }
.cal__row .wk { position: absolute; top: 0; bottom: 0; background: rgba(247, 248, 250, .9); z-index: 0; }
.cal__row .today { position: absolute; top: 0; bottom: 0; background: rgba(18, 161, 122, .07); z-index: 0; }

.bk {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 32px; margin: 0 2px; padding: 0 8px 0 10px;
  border-radius: 8px; background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden;
  box-shadow: inset 3px 0 0 var(--stripe);
}
.bk img { width: 14px; height: 14px; flex: none; border-radius: 3px; }
.bk span { overflow: hidden; text-overflow: ellipsis; }
.bk--ok { --bg: var(--st-ok-bg); --fg: var(--st-ok-fg); --stripe: var(--st-ok-stripe); }
.bk--warn { --bg: var(--st-warn-bg); --fg: var(--st-warn-fg); --stripe: var(--st-warn-stripe); }
.bk--info { --bg: var(--st-info-bg); --fg: var(--st-info-fg); --stripe: var(--st-info-stripe); }
.bk--block { --bg: var(--st-block-bg); --fg: var(--st-block-fg); --stripe: var(--st-block-stripe);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(138,144,155,.12) 6px 12px); }
.bk--cut { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; box-shadow: none; }

/* The animated "new booking" bar */
.bk--new { transform-origin: left center; transform: scaleX(0); opacity: 0; transition: opacity .4s, transform 0s .4s; }
.stage.s-accept .bk--new { transform: scaleX(1); opacity: 1; transition: transform .55s var(--ease), opacity .2s; animation: glow 1.6s .4s ease-out; }
@keyframes glow { 0% { box-shadow: inset 3px 0 0 var(--stripe), 0 0 0 0 rgba(18,161,122,.45); } 100% { box-shadow: inset 3px 0 0 var(--stripe), 0 0 0 10px rgba(18,161,122,0); } }

/* Floating cards */
.fl {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
  font-size: 13px;
}
.fl small { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.fl b { font-weight: 600; }
.ava { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #FCF2E2; color: #8A5A10; font-size: 13px; font-weight: 600; }
.ava--sm { width: 24px; height: 24px; font-size: 11px; background: var(--brand-soft); color: var(--brand-hover); }

.fl--stat { left: 2.5%; top: 132px; width: 176px; padding: 14px 16px 10px; }
.fl__big { margin-top: 2px; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.fl__big span { font-size: 18px; color: var(--text-muted); font-weight: 500; }
.spark { width: 100%; height: 34px; margin-top: 6px; overflow: visible; }
.spark path { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .spark__fill { fill: rgba(18,161,122,.10); stroke: none; }

.fl--request { right: 2%; top: 150px; width: 312px; padding: 14px; }
.fl__head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.fl__head img { width: 18px; height: 18px; border-radius: 4px; }
.fl__head time { margin-left: auto; color: var(--text-faint); font-weight: 400; }
.fl__guest { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.fl__guest b { font-size: 15px; }
.fl__row { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-surface-2); }
.fl__row span { color: var(--text-secondary); }
.fl__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fl__btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; font-weight: 500; transition: transform .15s, background-color .15s, box-shadow .2s; }
.fl__btn .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.fl__btn--ghost { border: 1px solid var(--border); color: var(--text-secondary); }
.fl__btn--ok { background: var(--brand); color: #fff; }
.stage.s-press .fl__btn--ok { transform: scale(.96); background: var(--brand-hover); box-shadow: 0 0 0 4px var(--brand-ring); }

.fl--tg { left: 2.5%; bottom: 48px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; max-width: 360px; }
.fl--tg img { width: 36px; height: 36px; }
.fl--tg b { display: block; font-size: 14px; }

.fl--clean { right: 5%; bottom: 56px; width: 268px; padding: 14px; }
.fl--clean > b { display: block; margin-top: 8px; font-size: 15px; }
.fl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark-yellow); }
.fl__who { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-weight: 500; }
.fl__chip { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--bg-surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 500; }

/* Scene choreography: JS toggles s-request → s-press → s-accept → s-tg → s-clean */
.fl--request, .fl--tg, .fl--clean { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.stage.s-request .fl--request { opacity: 1; transform: none; }
.stage.s-accept .fl--request { opacity: 0; transform: translateY(-10px) scale(.97); }
.stage.s-tg .fl--tg { opacity: 1; transform: none; }
.stage.s-clean .fl--clean { opacity: 1; transform: none; }

/* Static, fully-revealed scene for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Placement platforms (under the product stage, Notion-style logo row) ---------- */
.platforms { margin-top: 56px; text-align: center; }
.platforms__title { margin: 0; font-size: 15px; color: var(--text-muted); }
.platforms__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 56px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.platforms__list li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text-secondary);
  transition: color .2s;
}
.platforms__list img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.platforms__list li:hover { color: var(--text-primary); }
.platforms__list li:hover img { filter: none; opacity: 1; }

/* ---------- Features (Ramp-style bento) ---------- */
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--xl { height: 48px; padding: 0 22px; font-size: 16px; }

.features { padding: 120px 0 40px; }
.features__head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; margin-bottom: 56px; }
.features__title {
  margin: 0; max-width: 21em;
  font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em;
}
.features__title span { display: block; color: var(--text-muted); }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.fcell {
  position: relative; display: block; grid-column: span 2; height: 480px; padding: 32px; overflow: hidden;
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: 20px;
  transition: border-color .2s, box-shadow .2s;
}
.fcell--wide { grid-column: span 3; height: 520px; }
.fcell:hover { border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.fcell__head { position: relative; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.fcell__title { margin: 0; max-width: 15em; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.fcell__title span { color: var(--text-muted); }
.fcell:hover .fcell:hover 
.fcell__art { position: absolute; inset: 0; z-index: 1; }

/* Shared UI window used inside cards */
.mock {
  position: absolute; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-card); font-size: 13px; color: var(--text-primary);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mock__bar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mock__bar b { font-size: 14px; font-weight: 600; }
.mock__bar > span { color: var(--text-muted); }
.mock__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); font-weight: 500; }
.mock__muted { margin-left: auto; color: var(--text-muted); font-weight: 400; }

.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; white-space: nowrap;
  background: var(--bg-surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 500;
}
.chip--ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.chip--warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.chip--info { background: var(--st-info-bg); color: var(--st-info-fg); }

.toast {
  position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 12px; max-width: 320px; padding: 12px 16px 12px 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
}
.toast b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.toast small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.toast__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.toast__ic .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.toast--warn .toast__ic { background: #FDEBE8; color: #C9432F; }

/* 1. Calendar card: the same half-day booking bars as the hero */
.art-cal .mock { left: 32px; right: -40px; top: 140px; bottom: -24px; }
.mcal { --lab: 140px; position: relative; }
.mcal::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--border-subtle) 1px, transparent 1px); background-size: calc(100% / 7) 100%;
}
.mcal::after {
  content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none;
  left: calc(var(--lab) + (100% - var(--lab)) * 3 / 7); width: calc((100% - var(--lab)) / 7); background: rgba(18, 161, 122, .07);
}
.mcal__row {
  position: relative; display: grid; grid-template-columns: var(--lab) repeat(14, minmax(0, 1fr)); align-items: center;
  height: 52px; border-bottom: 1px solid var(--border-subtle);
}
.mcal__row > span { grid-column: 1; padding: 0 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; }
.mcal__row--head { height: 48px; }
.mcal__row--head i { grid-column: span 2; display: flex; flex-direction: column; align-items: center; font-style: normal; font-size: 11px; line-height: 1.2; color: var(--text-muted); }
.mcal__row--head i b { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.mcal__row--head i.is-today b { display: grid; place-items: center; width: 24px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff; }
.mcal__row--head i.is-we { color: var(--text-faint); }
.mcal .bk { grid-row: 1; height: 30px; font-style: normal; }
.bk--draw { transform-origin: left center; }
.toast--cal { right: 28px; top: 116px; }

/* 2. Requests card */
.art-req .mock { left: 32px; right: 32px; top: 140px; bottom: -24px; }
.mseg { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 10px; background: #F1F3F6; }
.mseg i { display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.mseg i.is-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.reqs { margin: 0; padding: 0; list-style: none; }
.req {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 128px; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
}
.req img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.req b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.req small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req__when { text-align: right; }
.req .chip { justify-self: end; }
.req--new { background: #F6FAFE; box-shadow: inset 3px 0 0 var(--st-info-stripe); }

/* 3. Cleaning card */
.art-clean .mock { left: 28px; right: 28px; top: 172px; bottom: -24px; }
.tasks { margin: 0; padding: 0; list-style: none; }
.task { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); }
.task b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); color: #fff; }
.task__box .ic { width: 13px; height: 13px; stroke-width: 3; }
.task.is-done .task__box { background: var(--brand); border-color: var(--brand); }
.task.is-done b { color: var(--text-secondary); }

/* 4. Finance card */
.art-fin .mock { left: 28px; right: 28px; top: 172px; bottom: -24px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-subtle); }
.kpis div { padding: 12px; }
.kpis div + div { border-left: 1px solid var(--border-subtle); }
.kpis small { display: block; font-size: 12px; color: var(--text-muted); }
.kpis b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 168px; padding: 20px 20px 32px; }
.bars span { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: #D7F0E7; transform-origin: bottom; transition: transform .45s var(--ease); }
.bars span.is-now { background: var(--brand); }
.bars i { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--text-muted); }

/* 5. Guests card */
.guest { left: 28px; right: 28px; top: 172px; padding: 18px; }
.guest__top { display: flex; align-items: center; gap: 12px; }
.guest__top b { display: block; font-size: 15px; font-weight: 600; }
.ava--lg { width: 48px; height: 48px; font-size: 16px; background: var(--brand-soft); color: var(--brand-hover); }
.stars { display: flex; gap: 2px; margin-top: 4px; color: #EFC03A; }
.stars .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.guest__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--border-subtle); }
.guest__stats b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; }
.guest__stats small { display: block; font-size: 12px; color: var(--text-muted); }
.guest__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.toast--warn { left: 44px; right: 20px; bottom: 28px; max-width: none; }

/* Hover: the window lifts, the toast follows with a little parallax, and each
   card performs its own small action, as if the system just did the work. */
/* Hover: the cards and windows stay put; only the content changes, in two
   steps ~1.4s apart so each one can be read (e.g. a CIAN booking lands,
   then an Avito one). Keyframe animations, because a transition can only
   show one change. Leaving the card resets it instantly. */
@media (hover: hover) {
  /* Step 1, immediately */
  .fcell:hover :is(.xswap, .chip-swap):not(.s2) > :first-child { animation: swapOut .35s ease both; }
  .fcell:hover :is(.xswap, .chip-swap):not(.s2) > :nth-child(2) { animation: swapIn .45s var(--ease) both; }
  .fcell:hover .bk--hover { animation: drawIn .6s var(--ease) both; }
  .fcell:hover .req--new { animation: toConfirmed .4s ease both; }
  .fcell:hover .task--next .task__box { animation: tickBox .3s ease both; }
  .fcell:hover .task--next .task__box .ic { animation: tickIcon .3s var(--ease) .1s both; }
  .js .fcell.is-visible:hover .bars span { transform: scaleY(1.22); }
  .fcell:hover .stars .ic { animation: starPop .55s var(--ease) both; }
  .fcell:hover .stars .ic:nth-child(2) { animation-delay: .07s; }
  .fcell:hover .stars .ic:nth-child(3) { animation-delay: .14s; }
  .fcell:hover .stars .ic:nth-child(4) { animation-delay: .21s; }
  .fcell:hover .stars .ic:nth-child(5) { animation-delay: .28s; }
  /* Step 2, after a pause */
  .fcell:hover :is(.xswap, .chip-swap).s2 > :first-child { animation: swapOut .35s ease 1.4s both; }
  .fcell:hover :is(.xswap, .chip-swap).s2 > :nth-child(2) { animation: swapIn .45s var(--ease) 1.4s both; }
  .fcell:hover .xswap.xswap3:not(.s2) > :nth-child(2) { animation: swapIn .45s var(--ease) both, swapOut .35s ease 1.4s forwards; }
  .fcell:hover .xswap.xswap3:not(.s2) > :nth-child(3) { animation: swapIn .45s var(--ease) 1.4s both; }
  .fcell:hover .bk--hover2 { animation: drawIn .6s var(--ease) 1.4s both; }
  .fcell:hover .req--incoming { animation: rowIn .55s var(--ease) 1.4s both; }
}
@keyframes swapOut { to { opacity: 0; transform: translateY(-.6em); filter: blur(3px); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(.6em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drawIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes toConfirmed { to { background: #F2FAF7; box-shadow: inset 3px 0 0 var(--st-ok-stripe); } }
@keyframes rowIn {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-width: 0; }
  to { max-height: 80px; padding-top: 14px; padding-bottom: 14px; opacity: 1; border-bottom-width: 1px; }
}
@keyframes tickBox { to { background: var(--brand); border-color: var(--brand); } }
@keyframes tickIcon { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes starPop { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }

/* Resting state of everything the hover reveals */
.bk--hover, .bk--hover2 { transform-origin: left center; transform: scaleX(0); opacity: 0; }
.chip-swap { display: inline-grid; justify-self: end; justify-items: end; }
.xswap { display: inline-grid; }
.kpis .xswap, .guest__stats .xswap { display: grid; }
.chip-swap > *, .xswap > * { grid-area: 1 / 1; }
.chip-swap > :not(:first-child), .xswap > :not(:first-child) { opacity: 0; transform: translateY(.6em); filter: blur(3px); }
/* Incoming request is collapsed until step 2 opens it on top of the list */
.req--incoming {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; border-bottom-width: 0;
  background: #F6FAFE; box-shadow: inset 3px 0 0 var(--st-info-stripe);
}
.task--next .task__box .ic { opacity: 0; transform: scale(.6); }

/* Scroll reveal. Hidden only when JS runs, so the page still reads without it. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .fcell .toast { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease) .8s, transform .5s var(--ease) .8s; }
.js .fcell.is-visible .toast { opacity: 1; transform: none; }
.js .fcell .bk--draw { transform: scaleX(0); transition: transform .7s var(--ease) .45s; }
.js .fcell.is-visible .bk--draw { transform: none; }
.js .fcell .req--new { opacity: 0; transform: translateY(-10px); transition: opacity .5s var(--ease) .45s, transform .5s var(--ease) .45s, background-color .35s ease, box-shadow .35s ease; }
.js .fcell.is-visible .req--new { opacity: 1; transform: none; }
.js .fcell .bars span { transform: scaleY(0); transition: transform .7s var(--ease); }
.js .fcell.is-visible .bars span { transform: none; }
.js .fcell.is-visible .bars span:nth-child(2) { transition-delay: .06s; }
.js .fcell.is-visible .bars span:nth-child(3) { transition-delay: .12s; }
.js .fcell.is-visible .bars span:nth-child(4) { transition-delay: .18s; }
.js .fcell.is-visible .bars span:nth-child(5) { transition-delay: .24s; }
.js .fcell.is-visible .bars span:nth-child(6) { transition-delay: .3s; }
/* After the first reveal the entrance delays must not slow hover feedback */
.js .fcell.is-settled .toast, .js .fcell.is-settled .req--new, .js .fcell.is-settled .bk--draw { transition-delay: 0s; }
.js .fcell.is-settled { transition-delay: 0s; }

@media (max-width: 1279px) {
  .fcell { padding: 28px; }
  .fcell__title { font-size: 24px; }
}
/* Three regular cards get too narrow for their windows below 1200px */
@media (max-width: 1199px) {
  /* Header: tighter nav items so logo, menu and buttons keep clear gaps down to 1024px */
  .header__bar { gap: 20px; }
  .nav__trigger, .nav__link { padding: 0 8px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fcell { grid-column: span 1; height: 440px; }
  .fcell--wide, .fcell:last-child { grid-column: span 2; }
  .fcell--wide { height: 480px; }
}
@media (max-width: 1023px) {
  .features { padding: 88px 0 24px; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fcell, .fcell--wide, .fcell:last-child { grid-column: auto; height: 440px; }
  .art-clean .mock, .art-fin .mock, .guest { top: 140px; }
}
@media (max-width: 639px) {
  .features { padding: 72px 0 16px; }
  .features__head { margin-bottom: 32px; }
  .fcell, .fcell--wide, .fcell:last-child { height: 440px; padding: 24px; border-radius: 16px; }
  .fcell__title { font-size: 22px; }
    .kpis b { font-size: 15px; }
  .art-cal .mock { left: 20px; right: auto; width: 600px; top: 140px; }
  .art-req .mock { left: 20px; right: 20px; top: 140px; }
  .req { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .req__when { display: none; }
  .art-clean .mock, .art-fin .mock { left: 20px; right: 20px; top: 156px; }
  .guest { left: 20px; right: 20px; top: 156px; }
  .toast--cal { left: 20px; right: 20px; top: auto; bottom: 20px; max-width: none; }
  .toast--warn { left: 28px; right: 12px; bottom: 20px; }
}

/* ---------- Mobile app banner ---------- */
.appcta { padding: 40px 0 120px; }
.appcta__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 480px; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2); /* neutral, like the final call block */
}
.appcta__text { position: relative; z-index: 2; align-self: center; padding: 64px 0 64px 64px; }
.appcta__eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-hover); }
.appcta__title { margin: 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.appcta__lead { margin: 18px 0 0; max-width: 30em; font-size: 18px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.appcta__actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 12px; border-radius: 14px;
  background: var(--text-primary); color: #fff; transition: background-color .15s, transform .15s;
}
.store:hover { background: #000; }
.store:active { transform: translateY(1px); }
.store .store__logo { width: 32px; height: 32px; stroke: none; }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.store b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.appcta__qr { display: flex; align-items: center; gap: 14px; }
.appcta__qr img { width: 88px; height: 88px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--border); image-rendering: pixelated; }
.appcta__qr small { max-width: 9.5em; font-size: 13px; line-height: 1.35; color: var(--text-secondary); }
.appcta__meta { margin: 20px 0 0; font-size: 14px; color: var(--text-muted); }

/* Phone mock, cropped by the card's bottom edge */
.appcta__art { position: relative; min-height: 480px; }
.phone {
  position: absolute; left: 50%; top: 56px; width: 292px; height: 600px; margin-left: -146px;
  padding: 10px; border-radius: 46px; background: #171A20;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 30px 60px rgba(15, 23, 42, .22);
}
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 37px; background: #F4F6F9; padding: 0 14px; font-size: 12px; color: var(--text-primary); }
.phone__status { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; font-size: 13px; }
.phone__sig { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.phone__sig i { width: 3px; border-radius: 1px; background: var(--text-primary); }
.phone__sig i:nth-child(1) { height: 4px; } .phone__sig i:nth-child(2) { height: 6px; } .phone__sig i:nth-child(3) { height: 8px; } .phone__sig i:nth-child(4) { height: 10px; }
.papp__head { display: flex; align-items: center; gap: 10px; margin: 6px 2px 14px; }
.papp__head img { width: 32px; height: 32px; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.papp__head b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.papp__head small { display: block; font-size: 11.5px; color: var(--text-muted); }
.papp__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.papp__sum span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-muted); }
.papp__sum b { font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.papp__label { margin: 14px 4px 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.papp__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border-subtle); }
.papp__item > img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.papp__item b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papp__item small { display: block; margin-top: 1px; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papp__item .chip { height: 22px; padding: 0 7px; font-size: 11px; }

.push {
  position: absolute; z-index: 3; left: 4%; top: 120px; display: flex; align-items: flex-start; gap: 12px; width: 300px; padding: 14px;
  border-radius: 18px; background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .14);
}
.push img { width: 36px; height: 36px; flex: none; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.push__app { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.push__app time { color: var(--text-faint); }
.push b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
.push small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-secondary); }

/* Entrance: the phone rises, then the push drops in */
.js .appcta__card .phone { transform: translateY(40px); transition: transform .9s var(--ease) .15s; }
.js .appcta__card.is-visible .phone { transform: none; }
.js .appcta__card .push { opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .5s var(--ease) .8s, transform .6s var(--ease) .8s; }
.js .appcta__card.is-visible .push { opacity: 1; transform: none; }

@media (max-width: 1199px) {
  .appcta__text { padding: 56px 0 56px 48px; }
  .appcta__qr small { display: none; }
  /* The narrower art column would push the toast over the title; tuck it onto the phone's right side */
  .push { left: auto; right: 16px; width: 272px; top: 92px; }
}
@media (max-width: 1023px) {
  .appcta { padding: 24px 0 88px; }
  .appcta__card { grid-template-columns: minmax(0, 1fr); }
  .appcta__text { padding: 48px 40px 8px; }
  .appcta__art { min-height: 420px; }
  .phone { top: 40px; }
  .push { left: 50%; margin-left: -300px; top: 92px; }
}
@media (max-width: 767px) {
  .appcta__qr { display: none; }
  .push { left: 16px; right: 16px; margin-left: 0; width: auto; top: 24px; }
  .phone { top: 72px; }
}
@media (max-width: 639px) {
  .appcta { padding: 16px 0 72px; }
  .appcta__card { border-radius: 18px; }
  .appcta__text { padding: 36px 24px 4px; }
  .appcta__lead { font-size: 16px; }
  .appcta__actions { margin-top: 24px; }
  .store { width: 100%; justify-content: center; }
  .appcta__art { min-height: 400px; }
}

/* ---------- Shared section heading ---------- */
.section-title {
  margin: 0 0 40px; max-width: 21em;
  font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance;
}

/* ---------- Directions («Для кого»): approved miniature cards ----------
   Composition follows design-previews/accommodation-cards/*-v2.png: pastel
   card, icon + label top-left over the empty corner of the miniature, the
   miniature (cut from the approved art, label erased), then title and text. */
.segments { padding: 80px 0 40px; }
.dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 7%;
  border-radius: 24px; border: 1px solid rgba(23, 26, 32, .07); background: var(--tone-bg);
  container-type: inline-size;
}
.dcard--flats { --tone-bg: #F4F9F2; --tone-ink: #24391B; --tone-icon: #24391B; }
.dcard--hotels { --tone-bg: #EFF7FD; --tone-ink: #1F3561; --tone-icon: #1F3561; }
.dcard--houses { --tone-bg: #FAF9F1; --tone-ink: #3D3415; --tone-icon: #8B681B; }
.dcard__label { position: absolute; left: 7.2cqw; top: 6.6cqw; z-index: 1; display: inline-flex; align-items: center; gap: 2.4cqw; font-size: clamp(12px, 3.9cqw, 18px); font-weight: 600; letter-spacing: -.01em; color: var(--tone-ink); }
.dcard__label .ic { width: 6.6cqw; height: 6.6cqw; color: var(--tone-icon); stroke-width: 1.6; }
.ic--solid { fill: currentColor; stroke: none; }
.dcard__img { display: block; width: 89.5%; height: auto; margin: 3.5% 0 0 5.2%; }
.dcard__body { padding: 2cqw 7.2cqw 0; }
.dcard h3 { margin: 0; font-size: 6.6cqw; font-weight: 600; line-height: 1.12; letter-spacing: -.03em; color: var(--text-primary); text-wrap: balance; }
.dcard p { margin: 2.8cqw 0 0; font-size: clamp(14px, 3.7cqw, 17px); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty; }

/* ---------- Proof: facts and testimonials ---------- */
.proof { padding: 96px 0 40px; }
.proof__head { margin-bottom: 48px; text-align: center; }
.proof__eyebrow { margin: 0 0 12px; font-size: 16px; color: var(--text-muted); }
.proof__title { margin: 0; font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }

/* Testimonial marquee: three rows drifting in alternate directions; the set is
   cloned once in JS, so each track loops by moving exactly half its width. */
.marquee {
  display: grid; gap: 16px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__row { overflow: hidden; }
.marquee__track { --gap: 16px; display: flex; gap: var(--gap); width: max-content; animation: marquee var(--dur, 72s) linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee__row:nth-child(2) .marquee__track { --dur: 84s; animation-direction: reverse; animation-delay: -30s; }
.marquee__row:nth-child(3) .marquee__track { --dur: 66s; animation-delay: -18s; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.tcard { flex: none; display: flex; flex-direction: column; width: 320px; min-height: 184px; margin: 0; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.tcard__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tcard__head > span:last-child { min-width: 0; }
.tcard__demo { align-self: flex-start; margin-top: auto; padding: 2px 7px; border-radius: 6px; background: var(--bg-surface-2); font-size: 11px; font-weight: 500; color: var(--text-muted); }
.tcard__logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-muted); }
.tcard__logo .ic { width: 20px; height: 20px; }
.tcard__logo--photo { overflow: hidden; border-radius: 50%; border: 0; }
.tcard__logo--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcard b { display: block; font-size: 15px; font-weight: 500; }
.tcard small { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.3; color: var(--text-muted); }
.tcard blockquote { margin: 16px 0 14px; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.facts--after { margin-top: 48px; }
.proof .container > .facts:first-child { margin-top: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fact { padding: 32px; border-radius: 20px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); }
.fact b { display: block; font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.fact span { display: block; margin-top: 14px; max-width: 22em; font-size: 16px; line-height: 1.45; color: var(--text-secondary); }
.fact__stars { display: inline-flex; gap: .06em; margin-left: .22em; vertical-align: .12em; }
.fact__stars .ic { width: .34em; height: .34em; fill: #EFC03A; stroke: #EFC03A; stroke-width: 1.5; }

/* ---------- Pricing page ---------- */
/* Check-mark list (pricing plan) */
.checks { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; color: var(--text-secondary); }
.checks .ic { width: 24px; height: 24px; padding: 4px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); stroke-width: 2.6; }
.nav__link[aria-current="page"] { background: var(--bg-surface-2); color: var(--text-primary); }
.mmenu__plain[aria-current="page"] { color: var(--brand-hover); }
.phero { padding: 88px 0 48px; text-align: center; }
.phero__eyebrow { justify-content: center; }
.phero__h1 { margin: 0; font-size: inherit; font-weight: inherit; }
.phero__h1 > .phero__title, .phero__h1 > .ahero__title { display: block; }
.hero__title > .hero__eyebrow { display: flex; width: fit-content; min-height: 20px; margin: 4px 0 19px; letter-spacing: .06em; line-height: normal; }
.phero__title { margin: 0 auto; max-width: 14em; font-size: clamp(40px, 5.4vw, 76px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.phero__lead { margin: 22px auto 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-secondary); text-wrap: balance; }

.pplan { padding: 24px 0 40px; }
/* Plan block «Сейчас и позже» (variant D): the live free plan next to a muted
   card that says tariffs come later, with included features as chips below. */
.vD { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vD__now { padding: 40px; border-radius: 24px; border: 2px solid var(--brand); background: #fff; box-shadow: 0 0 0 6px var(--brand-ring); }
.vD__later { padding: 40px; border-radius: 24px; border: 2px dashed var(--border-strong); background: var(--bg-surface-2); color: var(--text-secondary); }
.vD__top { display: flex; align-items: center; gap: 12px; }
/* The 20px title sits ~1px below its line-box centre (Golos metrics), so the badge follows it down */
.vD__top > :first-child { margin-top: 2px; }
.vD__name { font-size: 20px; font-weight: 500; color: var(--text-primary); }
.vD__soon { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: #E7EAEF; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.vD__cta { width: 100%; margin-top: 28px; }
.vD__clock { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 32px; border-radius: 18px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); }
.vD__clock .ic { width: 30px; height: 30px; }
.vD__text { margin: 20px 0 0; max-width: 26em; font-size: 18px; line-height: 1.5; }
.vD__incl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.vD__inclLabel { margin-right: 8px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.vD__chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--text-secondary); }
.vD__chip .ic { width: 18px; height: 18px; color: var(--brand); }
.price__amount { display: flex; align-items: baseline; gap: 10px; margin-top: 24px; }
.price__amount b { font-size: clamp(56px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.price__amount span { font-size: 17px; color: var(--text-muted); }
.pcard__badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-hover); font-size: 13px; font-weight: 600; }
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.incl li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; color: var(--text-primary); }
.incl__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--border-subtle); color: var(--brand); }
.incl__ic .ic { width: 18px; height: 18px; }

.pfaq { padding: 80px 0 0; }
.faq { max-width: 860px; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 16px 0;
  font-size: 19px; font-weight: 500; letter-spacing: -.01em; list-style: none; cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ic { flex: none; color: var(--text-muted); transition: transform .25s var(--ease); }
.faq__item[open] summary .ic { transform: rotate(180deg); color: var(--text-primary); }
.faq__item p { margin: -4px 0 24px; max-width: 44em; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }

@media (max-width: 1023px) {
  .phero { padding: 64px 0 32px; }
  .pfaq { padding-top: 64px; }
  .vD { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .phero { padding: 44px 0 24px; }
  .vD__now, .vD__later { padding: 28px 20px; border-radius: 20px; }
  .vD__text { font-size: 16px; }
  .vD__inclLabel { flex-basis: 100%; margin: 0 0 4px; }
  .faq__item summary { font-size: 17px; min-height: 64px; }
  .faq__item p { font-size: 16px; }
}

/* ---------- News page (changelog) ---------- */
.news { padding: 24px 0 40px; }
.post {
  display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 48px; padding: 40px 0;
  border-top: 1px solid var(--border); scroll-margin-top: 88px;
}
.post:first-child { border-top: 0; }
.post__date { position: sticky; top: 104px; align-self: start; padding-top: 3px; font-size: 15px; color: var(--text-muted); }
.post__title { margin: 14px 0 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.post__title a { transition: color .15s; }
.post__title a:hover, .post:target .post__title a { color: var(--brand-hover); }
.post__lead { margin: 12px 0 0; font-size: 18px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.post__points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.post__points li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.post__points li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.post--teaser { position: relative; }
.post--teaser .post__title a::after { content: ''; position: absolute; inset: 0; }
.post--teaser:hover .post__title a { color: var(--brand-hover); }
.post__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--brand-hover); }
.post__more .ic { width: 16px; height: 16px; transition: transform .15s; }
.post--teaser:hover .post__more .ic { transform: translateX(3px); }
.nart { padding: 64px 0 96px; }
.nart__in { max-width: 808px; }
.nart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 15px; color: var(--text-muted); }
.nart__title { margin: 16px 0 0; font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.nart__lead { margin: 20px 0 0; font-size: 20px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.nart .post__points { gap: 14px; margin-top: 32px; }
.nart .post__points li { font-size: 17px; }
.nart__all { margin: 32px 0 0; text-align: center; }
@media (max-width: 767px) {
  .post { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0; }
  .post__date { position: static; font-size: 14px; }
  .post__lead { font-size: 16px; }
  .post__points li { font-size: 15px; }
  .nart { padding: 40px 0 64px; }
  .nart__lead { font-size: 17px; }
  .nart .post__points li { font-size: 15px; }
  .hpager { grid-template-columns: minmax(0, 1fr); }
  .hpager__next { grid-column: 1; text-align: left; }
}

/* ---------- Help centre (generated by tools/build-help.mjs) ---------- */
.hhero { padding-bottom: 40px; }
.hsearch {
  display: flex; align-items: center; gap: 12px; max-width: 620px; height: 60px; margin: 32px auto 0; padding: 0 20px;
  border-radius: 16px; border: 1px solid var(--border); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
  transition: border-color .15s, box-shadow .15s;
}
.hsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.hsearch .ic { width: 20px; height: 20px; color: var(--text-muted); }
.hsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--text-primary); }
.hsearch input::placeholder { color: var(--text-muted); }
.hresults { max-width: 620px; margin: 10px auto 0; padding: 8px; text-align: left; border-radius: 16px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-overlay); }
.hresults a { display: block; padding: 12px 14px; border-radius: 10px; transition: background-color .15s; }
.hresults a:hover, .hresults a:focus-visible { background: var(--bg-surface-2); }
.hresults b { display: block; font-size: 15px; font-weight: 500; }
.hresults small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.hresults p { margin: 0; padding: 12px 14px; color: var(--text-muted); }

.hsections { padding: 8px 0 40px; }
.hsections__title { margin: 0 0 18px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.hsections__title:not(:first-child) { margin-top: 56px; }
.hstart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hstep { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid var(--border); transition: border-color .2s, background-color .2s; }
.hstep:hover { border-color: var(--brand); background: var(--brand-soft); }
.hstep__n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-hover); font-size: 14px; font-weight: 600; }
.hstep b { font-size: 17px; font-weight: 500; }
.hstep > span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.htiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.htile { display: flex; flex-direction: column; padding: 24px; border-radius: 18px; border: 1px solid transparent; background: var(--bg-surface-2); transition: border-color .2s, background-color .2s; }
.htile:hover { border-color: var(--border); background: #fff; }
.htile .hsec__ic { margin-bottom: 18px; }
.htile b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.htile__note { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--text-secondary); }
.htile__count { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 22px; font-size: 14px; color: var(--text-muted); }
.htile__count .ic { width: 18px; height: 18px; color: var(--tone); transition: transform .2s; }
.htile:hover .htile__count .ic { transform: translateX(3px); }
.hsec__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.hsec__ic .ic { width: 22px; height: 22px; }
.hsec--blue { --tone: #2E7FD1; --tone-bg: #DCE9F9; }
.hsec--orange { --tone: #D98E1F; --tone-bg: #FBEDD5; }
.hsec--grey { --tone: #5B6472; --tone-bg: #E7EAEF; }
.hsec--green { --tone: #12A17A; --tone-bg: #D7F0E7; }
.hsec--purple { --tone: #7C5CE0; --tone-bg: #ECE6FB; }
.hhelp { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 28px 32px; border-radius: 20px; border: 1px solid var(--border); }
.hhelp b { display: block; font-size: 19px; font-weight: 500; }
.hhelp p { margin: 6px 0 0; max-width: 40em; font-size: 16px; color: var(--text-secondary); }

/* Article page: sidebar · article · on-this-page */
.hdoc { padding: 48px 0 40px; }
.hdoc__grid { display: grid; grid-template-columns: 248px minmax(0, 1fr) 208px; gap: 48px; align-items: start; }
.hnav { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; padding-right: 8px; font-size: 14px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.hnav__home { display: inline-flex; margin-bottom: 18px; font-weight: 500; color: var(--brand-hover); }
.hnav__sec { margin: 18px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hnav__sec a { color: inherit; transition: color .15s; }
.hnav__sec a:hover, .hnav__sec a[aria-current="page"] { color: var(--brand-hover); }
.hnav ul, .hnav-m ul { margin: 0; padding: 0; list-style: none; }
.hnav li a, .hnav-m li a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px; line-height: 1.35; color: var(--text-secondary); transition: background-color .15s, color .15s; }
.hnav li a:hover, .hnav-m li a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.hnav li a[aria-current="page"], .hnav-m li a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-hover); font-weight: 500; }
.hart { min-width: 0; max-width: 760px; }
.hcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; color: var(--text-muted); }
.hcrumbs a { color: var(--text-secondary); }
.hcrumbs a:hover { color: var(--brand-hover); }
.hart h1 { margin: 14px 0 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.hart__title { display: flex; align-items: center; gap: 16px; }
.hart__title .hsec__ic { width: 52px; height: 52px; border-radius: 14px; }
.hart__title .hsec__ic .ic { width: 26px; height: 26px; }
.hrows { margin-top: 28px; border-top: 1px solid var(--border); }
.hrow { display: block; padding: 18px 0 20px; border-bottom: 1px solid var(--border); }
.hrow b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 500; transition: color .15s; }
.hrow:hover b { color: var(--brand-hover); }
.hrow > span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--text-secondary); }
.hart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.hart__lead { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.hart__body { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--text-primary); }
.hart__body h2 { margin: 40px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -.02em; scroll-margin-top: 96px; }
.hart__body p { margin: 14px 0 0; color: var(--text-secondary); }
.hlist { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hlist li { position: relative; padding-left: 22px; color: var(--text-secondary); }
.hlist li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.hsteps { counter-reset: step; margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hsteps li { counter-increment: step; position: relative; padding-left: 42px; color: var(--text-secondary); }
.hsteps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-hover); font-size: 14px; font-weight: 600; line-height: 1;
}
.hnote { display: flex; gap: 14px; margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--st-info-bg); color: var(--st-info-fg); }
.hnote .ic { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--st-info-stripe); }
.hnote b { display: block; font-weight: 600; }
.hnote p { margin: 4px 0 0 !important; color: inherit !important; opacity: .9; }
.hnote--warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.hnote--warn .ic { color: var(--st-warn-stripe); }
.hnote--tip { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.hnote--tip .ic { color: var(--st-ok-stripe); }
.htable { margin: 18px 0 0; overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); }
.htable table { width: 100%; border-collapse: collapse; font-size: 15px; }
.htable th { padding: 12px 16px; text-align: left; font-weight: 600; background: var(--bg-surface-2); border-bottom: 1px solid var(--border); }
.htable td { padding: 12px 16px; vertical-align: top; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.htable tr:last-child td { border-bottom: 0; }
.hart__body .faq { margin-top: 12px; }
.hart__body .faq__item summary { font-size: 17px; min-height: 60px; }
.hart__body .faq__item p { font-size: 16px; }
.hpager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.hpager a { display: block; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); font-weight: 500; transition: border-color .15s, background-color .15s; }
.hpager a:hover { border-color: var(--brand); background: var(--brand-soft); }
.hpager small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.hpager__next { grid-column: 2; text-align: right; }
.hnav-m { display: none; }
.htoc { position: sticky; top: 96px; font-size: 14px; }
.htoc p { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.htoc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }
.htoc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; line-height: 1.35; color: var(--text-secondary); border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.htoc a:hover { color: var(--text-primary); }
.htoc a.is-active { color: var(--brand-hover); border-left-color: var(--brand); font-weight: 500; }

@media (max-width: 1199px) {
  .hdoc__grid { grid-template-columns: 232px minmax(0, 1fr); }
  .htoc { display: none; }
}
@media (max-width: 1023px) {
  .hstart, .htiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdoc { padding-top: 32px; }
  .hdoc__grid { grid-template-columns: minmax(0, 1fr); }
  .hnav { display: none; }
  .hnav-m { display: block; margin-top: 24px; border-radius: 14px; border: 1px solid var(--border); padding: 0 18px; }
  .hnav-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 500; list-style: none; cursor: pointer; }
  .hnav-m summary::-webkit-details-marker { display: none; }
  .hnav-m[open] summary .ic { transform: rotate(180deg); }
  .hnav-m ul { padding-bottom: 8px; }
  .hnav-m .hnav__sec { margin-top: 14px; }
}
@media (max-width: 639px) {
  .hsearch { height: 54px; }
  .hstart { gap: 10px; }
  .hstep { padding: 16px 16px 18px; }
  .hstep__n { margin-bottom: 6px; }
  .hstep b { font-size: 16px; }
  .hstep > span:last-child { font-size: 13.5px; }
  .htiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .htile { padding: 20px; }
  .htile .hsec__ic { margin-bottom: 14px; }
  .hsections__title:not(:first-child) { margin-top: 40px; }
  .hart__title .hsec__ic { width: 44px; height: 44px; }
  .hhelp { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .hart__lead { font-size: 17px; }
  .hart__body { font-size: 16px; }
  .hart__body h2 { font-size: 21px; }
  .hpager { grid-template-columns: minmax(0, 1fr); }
  .hpager__next { grid-column: auto; }
}

/* ---------- Final call to action ---------- */
.final { padding: 80px 0 120px; }
/* Text and form on the left; the Glavbook mark on the right, drawn as three bookings in a small calendar */
.final__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: 56px; padding: 56px 64px; border-radius: 24px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); }
.final__title { margin: 0; max-width: 14em; font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.final__lead { margin: 16px 0 0; max-width: 30em; font-size: 17px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.final__form { margin-top: 28px; background: #fff; }
.final__alt { margin: 16px 0 0; font-size: 14px; color: var(--text-muted); }
.final__alt a { color: var(--brand-hover); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(12, 122, 92, .35); }
.final__alt a:hover { text-decoration-color: currentColor; }
.final__cal { padding: 16px 18px 18px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .07); }
.final__days { display: grid; grid-template-columns: repeat(10, 1fr); margin-bottom: 8px; font-size: 11px; font-weight: 500; text-align: center; color: var(--text-muted); }
.final__row { position: relative; height: 44px; border-top: 1px solid #F1F3F6; background-image: linear-gradient(90deg, #F1F3F6 1px, transparent 1px); background-size: 10% 100%; }
.final__row b { position: absolute; top: 9px; bottom: 9px; left: calc(var(--s) * 10% + 3px); width: calc(var(--n) * 10% - 6px); border-radius: 13px; background: var(--c); }
.final__cap { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.final__cap b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 40px; border-top: 1px solid var(--border); background: #fff; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 48px; }
.footer__brand p { margin: 16px 0 24px; max-width: 18em; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.store--sm { height: 48px; padding: 0 18px 0 10px; border-radius: 12px; }
.store--sm .store__logo { width: 28px; height: 28px; }
.store--sm b { font-size: 16px; }
.store--sm small { font-size: 11px; }
.footer__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__title { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.footer__cols ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer__cols a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; color: var(--text-secondary); transition: color .15s; }
.footer__cols a:hover { color: var(--text-primary); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-muted);
}
.footer__bottom a { margin-left: auto; color: var(--text-secondary); }
.footer__bottom a:hover { color: var(--text-primary); }

/* ---------- Responsive for the new blocks ---------- */
@media (max-width: 1199px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .segments, .proof { padding: 64px 0 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .dirs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%);
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .dirs::-webkit-scrollbar { display: none; }
  .dcard { scroll-snap-align: start; }
  .fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 20px; padding: 24px 28px; }
  .fact span { margin-top: 0; }
  .final { padding: 64px 0 88px; }
  .final__card { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 48px 40px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .section-title { margin-bottom: 28px; }
  .fact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dirs { grid-auto-columns: 84%; gap: 12px; }
  .dcard { border-radius: 20px; }
  /* Small cards: the label sits a bit higher, where the roof/building starts further right */
  .dcard__label { top: 5.2cqw; font-size: clamp(11.5px, 3.9cqw, 18px); }
  .final__card { padding: 32px 20px; border-radius: 18px; }
  .final__lead { font-size: 16px; }
  .footer { padding: 48px 0 32px; }
  .footer__cols { gap: 24px 12px; }
  .footer__cols a { font-size: 14px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__bottom a { margin-left: 0; }
}

@media (max-width: 374px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .proof__head { margin-bottom: 32px; }
  .marquee { gap: 12px; }
  .marquee__track { --gap: 12px; }
  .tcard { width: 272px; min-height: 168px; padding: 18px; }
  .tcard blockquote { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__row { overflow-x: auto; }
}

/* ---------- Optical text centering ----------
   Golos Text has asymmetric metrics (ascent .98em, descent .22em, cap .70em,
   x-height .53em), so flex centering puts mostly-lowercase Cyrillic below
   the visual middle while icons sit exactly in it. Measured in the browser,
   a .05em lift (padding-bottom .1em) centres the text; icons are pushed back
   down by the same amount. line-height 1.2 equals the font's own ascent +
   descent, so no half-leading rounding shifts the text by half a pixel.
   Native <button>s (.signup__btn) centre their own content and are measured
   centred on cap height without the lift, so they stay out of this list. */
.btn, .nav__trigger, .nav__link, .fl__btn, .app__new, .seg span,
.platforms__list li, .fcard__more, .bk, .chip, .mseg i, .vD__chip, .mmenu__sec summary, .mmenu__plain, .mmenu__links a { padding-bottom: .1em; line-height: 1.2; }
.nav__trigger .ic, .fl__btn .ic, .app__new .ic, .fcard__more .ic, .mmenu__sec summary .ic,
.platforms__list img, .bk img { margin-top: .1em; }
.announce__tag, .fl__chip { padding: calc(4px - .05em) 8px calc(4px + .05em); line-height: 1.2; }

/* 48px buttons with 16px text are already centred on cap height without the lift (measured) */
.btn.btn--xl, .btn.btn--lg { padding-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  :root { --gutter: 40px; }
  .header__bar { gap: 24px; }
  .mega__cols--4 { grid-template-columns: repeat(2, auto); }
  .mega__panel { grid-template-columns: 1fr 280px; }
  .app { left: 6%; right: 6%; }
  .fl--stat { display: none; }
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; --header-h: 64px; }
  .nav, .header__actions { display: none; }
  .burger { display: grid; }
  .mega { display: none !important; }
  .hero { padding: 56px 0 48px; }
  .stage { height: 520px; margin-top: 48px; }
  .app { left: 24px; right: -120px; top: 40px; }
  .cal { --label: 148px; }
  .app__search { display: none; }
  .fl--request { right: 16px; top: auto; bottom: 120px; }
  .fl--clean { display: none; }
  .fl--tg { left: 16px; bottom: 20px; right: 16px; max-width: none; }
}

@media (max-width: 639px) {
  :root { --gutter: 16px; }
  .announce { justify-content: flex-start; padding: 8px 48px 8px 16px; font-size: 13px; }
  .announce__inner { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; min-width: 0; }
  .announce__tag { display: none; }
  .announce__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce__link { flex: none; }
  .hero { padding: 40px 0 32px; }
  .hero__eyebrow { font-size: 12px; margin-bottom: 16px; }
  .hero__title { font-size: clamp(28px, 7.9vw, 40px); }
  /* Phones: the pill gets its own line so rotating words never re-wrap the headline */
  .br-phone { display: inline; }
  .hero__lead { margin-top: 16px; }
  .signup { flex-direction: column; margin-top: 28px; padding: 6px; }
  .signup__btn { width: 100%; }
  .stage { height: 330px; margin-top: 36px; border-radius: 16px; }
  .platforms { margin-top: 40px; }
  .platforms__title { font-size: 14px; padding: 0 12px; }
  .platforms__list { gap: 14px 28px; margin-top: 18px; }
  .platforms__list li { font-size: 18px; gap: 8px; }
  .platforms__list img { width: 22px; height: 22px; border-radius: 6px; }
  /* On phones the product reads as a scaled screenshot rather than a cramped live grid */
  .app { left: 16px; right: auto; top: 20px; bottom: auto; width: 920px; height: 560px; transform: scale(.5); transform-origin: 0 0; }
  .app__search { display: flex; }
  .fl--request { left: 16px; right: 16px; width: auto; top: 40px; bottom: auto; }
  .fl--tg { bottom: 16px; }
  .fl--tg small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Support and AI assistant pages ---------- */
.btn--line { border: 1px solid var(--border); background: #fff; color: var(--text-primary); }
.btn--line:hover { border-color: var(--text-muted); }
.sways { padding: 8px 0 40px; }
.sways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sway { display: flex; flex-direction: column; padding: 32px; border-radius: 22px; background: var(--bg-surface-2); }
.sway .hsec__ic { margin-bottom: 22px; }
.sway h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.sway p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.sway p a { color: var(--brand-hover); font-weight: 500; }
.sway__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.snote { margin-top: 20px; }

.ahero { padding: 72px 0 56px; }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; }
.ahero__title { margin: 0; font-size: clamp(40px, 4.8vw, 68px); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; }
.ahero__lead { margin: 22px 0 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

.chat { display: flex; flex-direction: column; height: 560px; border-radius: 24px; border: 1px solid var(--border); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .08); overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); }
.chat__ava { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #ECE6FB; color: #7C5CE0; }
.chat__ava .ic { width: 22px; height: 22px; }
.chat__head b { display: block; font-size: 16px; font-weight: 500; }
.chat__head small { display: block; margin-top: 1px; font-size: 13px; color: var(--text-muted); }
.chat__log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.msg p { margin: 0; }
.msg p + p { margin-top: 8px; }
.msg--bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--bg-surface-2); color: var(--text-primary); }
.msg--me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--brand); color: #fff; }
.msg__links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.msg__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 14px; font-weight: 500; color: var(--text-primary); transition: border-color .15s, color .15s; }
.msg__link small { display: block; font-weight: 400; color: var(--text-muted); }
.msg__link .ic { flex: none; width: 16px; height: 16px; color: var(--brand); }
.msg__link:hover { border-color: var(--brand); color: var(--brand-hover); }
.msg--typing { display: inline-flex; gap: 4px; padding: 15px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.chat__chips[hidden] { display: none; }
.chat__chips button { height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; transition: border-color .15s, color .15s; }
.chat__chips button:hover { border-color: var(--brand); color: var(--brand-hover); }
.chat__form { display: flex; gap: 8px; margin: 0 16px; padding: 6px 6px 6px 16px; border-radius: 14px; border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s; }
.chat__form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.chat__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text-primary); }
.chat__form input::placeholder { color: var(--text-muted); }
.chat__send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; cursor: pointer; transition: background-color .15s; }
.chat__send:hover { background: var(--brand-hover); }
.chat__send:disabled { background: var(--border); cursor: default; }
.chat__send .ic { width: 18px; height: 18px; }
.chat__note { margin: 0; padding: 10px 20px 14px; font-size: 12.5px; color: var(--text-muted); text-align: center; }

.afeat { padding: 24px 0 40px; }
.afeat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.afeat__card { padding: 28px; border-radius: 22px; background: var(--bg-surface-2); }
.afeat__card .hsec__ic { margin-bottom: 20px; }
.afeat__card h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.afeat__card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); }
.afeat__where { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; font-size: 15px; color: var(--text-secondary); }
.afeat__where .ic { flex: none; width: 20px; height: 20px; color: var(--text-muted); }

@media (max-width: 1023px) {
  .sways__grid, .afeat__grid { grid-template-columns: minmax(0, 1fr); }
  .ahero { padding-top: 48px; }
  .ahero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 639px) {
  .sway, .afeat__card { padding: 24px 20px; }
  .sway__actions .btn { flex: 1; }
  .chat { height: 520px; border-radius: 20px; }
  .chat__log { padding: 16px; }
  .chat__chips { padding: 0 16px 10px; }
  .chat__form { margin: 0 12px; }
  .chat__form input { font-size: 16px; }
  .afeat__where { align-items: flex-start; }
}

/* ---------- Calendar product page ---------- */
.cflow { padding: 0; }
.cpage .phero { padding-bottom: 40px; }
@media (max-width: 767px) {
    }

/* ---------- Calendar page blocks ---------- */
/* every block on the calendar page sits the same distance from the one above */
.cpage { --gap: 136px; } /* close to Ramp (128 to 170 px between blocks) */
@media (max-width: 1100px) { .cpage { --gap: 112px; } }
.cblock { padding: var(--gap) 0 0; }
.cblock__head { max-width: 40em; margin-bottom: 36px; }
.cblock__title { margin: 0; font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.cblock__lead { margin: 14px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.csplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.csplit--rev .csplit__text { order: 2; }
.cchecks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cchecks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.cchecks .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--brand); stroke-width: 2.4; }
.csplit__text .store { margin-top: 28px; }

/* interactive calendar mock */
.cspot { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: stretch; }
.cspot__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cspot__list button { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; background: none; font: inherit; text-align: left; color: var(--text-secondary); cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.cspot__list button > span:last-child { font-size: 14.5px; line-height: 1.45; }
.cspot__list b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 500; color: var(--text-primary); }
.cspot__list button:hover { background: var(--bg-surface-2); }
.cspot__list button.is-on { background: #fff; border-color: var(--border); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.cspot__n { display: grid; place-items: center; flex: none; align-self: flex-start; margin-top: 2px; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-surface-2); font-size: 13px; font-weight: 600; color: var(--text-muted); transition: background-color .2s, color .2s; }
.cspot__list button.is-on .cspot__n { background: var(--brand); color: #fff; }
.ccal-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--border); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .07); scrollbar-width: thin; }
.ccal { position: relative; min-width: 720px; padding: 6px; font-size: 12.5px; color: var(--text-primary); }
.ccal [data-zone] { position: relative; border-radius: 9px; transition: box-shadow .3s; }
.ccal__pin { position: absolute; z-index: 3; left: -6px; top: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: var(--text-primary); color: #fff; font-size: 11px; font-weight: 600; font-style: normal; line-height: 1; transition: background-color .3s, transform .3s; }
.ccal[data-active="filters"] [data-zone="filters"], .ccal[data-active="search"] [data-zone="search"], .ccal[data-active="booking"] [data-zone="booking"], .ccal[data-active="summary"] [data-zone="summary"] { box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px var(--brand-ring); }
.ccal[data-active="filters"] [data-zone="filters"] .ccal__pin, .ccal[data-active="search"] [data-zone="search"] .ccal__pin, .ccal[data-active="booking"] [data-zone="booking"] .ccal__pin .ccal__pin, .ccal[data-active="summary"] [data-zone="summary"] .ccal__pin { background: var(--brand); transform: scale(1.15); }
.ccal__bar { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.ccal__month { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ccal__month .ic { width: 14px; height: 14px; color: var(--text-muted); }
.ccal__month .ic:first-child { transform: rotate(90deg); }
.ccal__month .ic:last-child { transform: rotate(-90deg); }
.ccal__today, .ccal__scale span, .ccal__chips span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--bg-surface-2); color: var(--text-secondary); }
.ccal__chips { display: flex; gap: 4px; padding: 3px; margin-left: 6px; }
.ccal__chips .is-on, .ccal__scale .is-on { background: var(--text-primary); color: #fff; }
.ccal__search { display: flex; align-items: center; gap: 6px; flex: 1; height: 32px; padding: 0 10px; border: 1px solid var(--border); color: var(--text-muted); }
.ccal__search .ic { width: 14px; height: 14px; }
.ccal__scale { display: flex; gap: 3px; }
.ccal__scale span { padding: 0 8px; }
.ccal__grid { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.ccal__corner { border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
.ccal__days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); border-bottom: 1px solid var(--border-subtle); }
.ccal__days span { display: flex; flex-direction: column; align-items: center; padding: 7px 0 6px; font-weight: 500; }
.ccal__days small { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.ccal__days .is-we { background: #FAFBFC; }
.ccal__days .is-today { color: var(--brand-hover); }
.ccal__group { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 6px 6px 2px; padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ccal__group .ic { width: 12px; height: 12px; }
.ccal__group small { font-weight: 500; color: var(--text-muted); }
.ccal__row { display: contents; }
.ccal__obj { display: flex; align-items: center; height: 40px; padding: 0 12px 0 14px; border-right: 1px solid var(--border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.ccal__cells { position: relative; height: 40px; border-bottom: 1px solid #F1F3F6; background-image: linear-gradient(90deg, #F1F3F6 1px, transparent 1px); background-size: calc(100% / 14) 100%; }
.ccal__b { position: absolute; top: 7px; bottom: 7px; left: calc(var(--s) * 100% / 14 + 2px); width: calc(var(--n) * 100% / 14 - 4px); display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; border-radius: 7px; background: var(--bg); box-shadow: inset 3px 0 0 var(--st); overflow: hidden; white-space: nowrap; font-weight: 500; color: var(--fg); }
.ccal__b em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.ccal__b .ccal__x { display: none; font-weight: 400; opacity: .75; }
.ccal[data-active="booking"] .ccal__x { display: inline; }
.ccal__b--ok { --bg: var(--st-ok-bg); --st: var(--st-ok-stripe); --fg: var(--st-ok-fg); }
.ccal__b--info { --bg: var(--st-info-bg); --st: var(--st-info-stripe); --fg: var(--st-info-fg); }
.ccal__b--warn { --bg: var(--st-warn-bg); --st: var(--st-warn-stripe); --fg: var(--st-warn-fg); }
.ccal__b--block { --bg: repeating-linear-gradient(135deg, #EEF0F3 0 6px, #E4E7EC 6px 12px); --st: var(--st-block-stripe); --fg: var(--st-block-fg); }
.ccal__b[data-zone] { overflow: visible; }
.ccal__b .ccal__pin { left: auto; right: -8px; top: -10px; }
.ccal__tip { position: absolute; z-index: 4; left: 0; top: calc(100% + 10px); font-weight: 400; white-space: normal; display: grid; gap: 3px; width: 210px; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--text-secondary); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 16px 36px rgba(15, 23, 42, .16); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s, transform .3s; }
.ccal__tip b { font-size: 13.5px; color: var(--text-primary); }
.ccal__tip > * { display: block; }
.ccal[data-active="booking"] .ccal__tip { opacity: 1; transform: none; }
.ccal__sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding: 10px 10px 6px; border-top: 1px solid var(--border-subtle); }
.ccal__stats { display: flex; gap: 22px; padding: 4px 8px 4px 18px; }
.ccal__stats span { display: flex; flex-direction: column; }
.ccal__stats small, .ccal__show small { font-size: 10.5px; color: var(--text-muted); }
.ccal__stats b { font-size: 14px; font-weight: 600; }
.ccal__show { display: flex; align-items: center; gap: 4px; padding: 4px 6px; }
.ccal__show .ccal__pin { left: -8px; }
.ccal__show small { margin-right: 4px; }
.ccal__show span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-muted); }
.ccal__show .is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hover); }

/* platforms and the calendar they fill (illustration) */
.csync-img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* scenario cards with tiny animated calendars */
.ccases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ccase { display: flex; flex-direction: column; padding: 18px 18px 24px; border-radius: 20px; background: var(--bg-surface-2); }
.ccase h3 { margin: 18px 4px 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.ccase p { margin: 8px 4px 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.ccase__art { padding: 18px 16px; border-radius: 14px; background: #fff; }
.mini { position: relative; height: 96px; background-image: linear-gradient(90deg, #EEF0F3 1px, transparent 1px); background-size: 12.5% 100%; }
.mini i { display: block; height: 32px; border-bottom: 1px solid #EEF0F3; }
.mini__b { position: absolute; height: 22px; border-radius: 6px; background: var(--bg); box-shadow: inset 3px 0 0 var(--st); }
.mini__cur { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(27, 31, 39, .85); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .3); }
.ccase__art--extend .mini__b { top: 37px; left: 12.5%; width: 37.5%; animation: caseExtend 5s infinite; }
.ccase__art--extend .mini__b::after { content: ''; position: absolute; right: 3px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--st); opacity: .6; }
.ccase__art--extend .mini__cur { top: 48px; left: 50%; animation: caseExtendCur 5s infinite; }
@keyframes caseExtend { 0%, 25% { width: 37.5%; } 55%, 85% { width: 62.5%; } 100% { width: 37.5%; } }
@keyframes caseExtendCur { 0%, 15% { left: 50%; opacity: 0; } 25% { left: 50%; opacity: 1; } 55% { left: 75%; opacity: 1; } 65%, 100% { left: 75%; opacity: 0; } }
.ccase__art--move .mini__b { top: 5px; left: 25%; width: 37.5%; animation: caseMove 5s infinite; }
.ccase__art--move .mini__cur { top: 16px; left: 44%; animation: caseMoveCur 5s infinite; }
@keyframes caseMove { 0%, 25% { top: 5px; transform: none; } 30% { transform: translateY(-3px); } 60% { top: 69px; transform: translateY(-3px); } 66%, 90% { top: 69px; transform: none; } 100% { top: 5px; } }
@keyframes caseMoveCur { 0%, 15% { top: 16px; opacity: 0; } 25% { top: 16px; opacity: 1; } 60% { top: 80px; opacity: 1; } 68%, 100% { top: 80px; opacity: 0; } }
.mini__b--soft { top: 37px; left: 25%; width: 50%; transform-origin: left center; animation: caseSoft 5s infinite; } /* soft booking is yellow, as in the app */
@keyframes caseSoft { 0%, 15% { transform: scaleX(0); opacity: 0; } 40%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.mini__b--block { top: 37px; left: 37.5%; width: 37.5%; --bg: repeating-linear-gradient(135deg, #EEF0F3 0 6px, #E1E4E9 6px 12px); --st: #8A909B; transform-origin: left center; animation: caseBlock 5s infinite; }
@keyframes caseBlock { 0%, 15% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* booking card */
.cbook { display: grid; gap: 14px; justify-self: center; width: 100%; max-width: 480px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .08); }
.cbook__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.cbook__head b { display: block; font-size: 18px; font-weight: 500; }
.cbook__head span:not(.chip) { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-muted); }
.cbook__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--text-secondary); }
.cbook__row b { font-weight: 500; color: var(--text-primary); }
.cbook__check { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--st-ok-bg); color: var(--st-ok-fg); font-size: 13px; font-weight: 500; }
.cbook__check .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.cbook__money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cbook__money div { padding: 10px 12px; border-radius: 12px; background: var(--bg-surface-2); }
.cbook__money span { display: block; font-size: 12px; color: var(--text-muted); }
.cbook__money b { font-size: 15.5px; font-weight: 600; }
.cbook__line { height: 8px; border-radius: 4px; background: var(--bg-surface-2); overflow: hidden; }
.cbook__line i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.cbook__legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.cbook__legend b { font-weight: 600; color: var(--text-primary); }
.cbook__foot { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-muted); }
.cbook__foot .ic { width: 15px; height: 15px; }

/* phone mock (static) */
.cphone-wrap { justify-self: center; }
/* phones follow the pointer slightly and drift on scroll (set by landing.js) */
.cphone { transform: perspective(1100px) translate3d(var(--mx, 0px), var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; width: 300px; height: 560px; padding: 10px; border-radius: 46px; background: #171A20; box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 30px 60px rgba(15, 23, 42, .2); }
.cphone__screen { height: 100%; overflow: hidden; border-radius: 37px; background: #F4F6F9; padding: 22px 14px; font-size: 12.5px; }
.cphone__top { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 6px; }
.cphone__top b { font-size: 18px; font-weight: 600; }
.cphone__top span { color: var(--text-muted); }
.ctask { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.ctask + .ctask { margin-top: 10px; }
.ctask--next { opacity: .7; }
.ctask__head { display: flex; align-items: center; justify-content: space-between; }
.ctask__head b { font-size: 14px; font-weight: 600; }
.ctask__addr { color: var(--text-muted); }
.ctask__times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ctask__times span { padding: 8px 10px; border-radius: 10px; background: var(--bg-surface-2); font-weight: 600; }
.ctask__times small { display: block; font-weight: 400; color: var(--text-muted); }
.ctask__access { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #F7F4FE; color: #4A3A86; }
.ctask__access small { color: #7C5CE0; font-weight: 600; }
.ctask__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ctask__btn { display: grid; place-items: center; height: 34px; border-radius: 10px; border: 1px solid var(--border); font-weight: 500; }
.ctask__btn--go { border-color: var(--brand); background: var(--brand); color: #fff; }
.cmcal { padding: 10px 8px; border-radius: 16px; background: #fff; }
.cmcal__days { display: grid; grid-template-columns: 40px repeat(6, minmax(0, 1fr)); margin-bottom: 6px; font-size: 11px; font-weight: 500; text-align: center; color: var(--text-muted); }
.cmcal__days .is-today { color: var(--brand-hover); }
.cmcal__row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; height: 46px; border-top: 1px solid #F1F3F6; }
.cmcal__row > i { width: 32px; height: 32px; border-radius: 9px; background: var(--c); }
.cmcal__track { position: relative; height: 100%; background-image: linear-gradient(90deg, #F1F3F6 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.cmcal__track .ccal__b { top: 11px; bottom: 11px; left: calc(var(--s) * 100% / 6 + 2px); width: calc(var(--n) * 100% / 6 - 4px); }
.cmcal__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.cmcal__sum span { padding: 8px 10px; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; }
.cmcal__sum small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.cmcal__drag { z-index: 2; animation: cmcalDrag 5s infinite; }
@keyframes cmcalDrag { 0%, 30% { transform: none; } 40% { transform: translateY(-3px) scale(1.04); } 65% { transform: translateY(43px) scale(1.04); } 72%, 92% { transform: translateY(46px); } 100% { transform: none; } }

.cfaq { padding-top: var(--gap); }
.cpage .final { padding-top: var(--gap); }

@media (prefers-reduced-motion: reduce) {
  .ccase *, .cmcal__drag { animation: none !important; }
}
@media (max-width: 1100px) {
  .ccases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cspot { grid-template-columns: minmax(0, 1fr); }
  .cspot__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}
@media (max-width: 900px) {
  .csplit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .csplit--rev .csplit__text { order: 0; }
}
@media (max-width: 639px) {
  .cpage { --gap: 80px; }
  .ccases { grid-template-columns: minmax(0, 1fr); }
  .cspot__list { grid-template-columns: minmax(0, 1fr); }
  .cspot__list button { height: auto; }
  .cbook { padding: 18px; }
  .cbook__money { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Product menu: live preview of the hovered item ---------- */
.mprev__art { display: block; height: 150px; padding: 14px; }
.mp { display: none; position: relative; height: 100%; }
.mp.is-on { display: block; animation: mpIn .35s var(--ease) both; }
@keyframes mpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mp .ok { --bg: var(--st-ok-bg); --st: var(--st-ok-stripe); }
.mp .info { --bg: var(--st-info-bg); --st: var(--st-info-stripe); }
.mp .warn { --bg: var(--st-warn-bg); --st: var(--st-warn-stripe); }
.mp small { font-size: 10.5px; color: var(--text-muted); }
.mp b { font-weight: 600; }
.mp .ic { width: 14px; height: 14px; }
@keyframes mpGrow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mpDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes mpSlide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes mpPop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }

/* calendar */
.mp-grid { position: relative; display: block; height: 100%; padding-top: 4px; background-image: linear-gradient(90deg, #EEF0F3 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.mp-grid i { display: block; height: 28px; border-bottom: 1px solid #EEF0F3; }
.mp-b { position: absolute; top: calc(var(--r) * 28px + 9px); left: calc(var(--s) * 100% / 7 + 2px); width: calc(var(--n) * 100% / 7 - 4px); height: 18px; border-radius: 5px; background: var(--bg); box-shadow: inset 3px 0 0 var(--st); transform-origin: left center; animation: mpGrow .5s var(--ease) var(--d) both; }
.mp-b--new { box-shadow: inset 3px 0 0 var(--st), 0 0 0 2px var(--brand-ring); }

/* requests */
.mp-req { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; padding: 4px 8px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); animation: mpDrop .45s var(--ease) var(--d) both; }
/* preview text: the card title styles no longer leak in (.fcard > b), so small text is sized here */
.mp-req small, .mp-note small, .mp-person small:not(.mp-role) { display: block; font-size: 10.5px; line-height: 1.3; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-note > span, .mp-req > b, .mp-req > small { min-width: 0; }
.mp-role { font-size: 10px; line-height: 1.4; }
.mp-kpi small { font-size: 11px; color: var(--text-muted); }
.mp-req + .mp-req { margin-top: 5px; }
.mp-req img { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }
.mp-req b { font-size: 11.5px; line-height: 1.2; }
.mp-req small { line-height: 1.2; }

/* booking widget */
/* prepayments preview: one booking goes soft (yellow) → prepaid (orange, amount) → checked in (green), on a loop */
.mp-pp { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6px; height: 100%; }
.mp-pp__cal { display: grid; gap: 3px; padding: 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.mp-pp__row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 18px; }
.mp-pp__row > i { width: 16px; height: 16px; border-radius: 5px; background: var(--c); }
.mp-pp__track { position: relative; height: 100%; background-image: linear-gradient(90deg, #F1F3F6 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.mp-pp__bar { position: absolute; top: 2px; bottom: 2px; left: calc(var(--s) * 100% / 6 + 1px); width: calc(var(--n) * 100% / 6 - 2px); display: grid; border-radius: 6px; font-size: 9.5px; font-weight: 700; }
.mp-pp__bar--paid { background: #FFD3A1; }
.mp-pp__bar--in { background: #BFE6D5; }
.mp-pp__bar--live { animation: ppBar 6s infinite; }
.mp-pp__bar em, .mp-pp__sum em, .mp-pp__status em { grid-area: 1 / 1; align-self: center; font-style: normal; white-space: nowrap; }
.mp-pp__bar em { padding-left: 6px; }
.mp-pp__pay { display: grid; gap: 5px; padding: 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.mp-pp__line { display: block; height: 6px; border-radius: 3px; background: #EEF0F3; overflow: hidden; }
.mp-pp__line i { display: block; height: 100%; border-radius: 3px; background: var(--brand); animation: ppLine 6s infinite; }
.mp-pp__legend { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9.5px; color: var(--text-muted); }
.mp-pp__sum { display: inline-grid; margin-left: 2px; font-weight: 700; color: var(--text-primary); }
.mp-pp__legend > span:last-child { white-space: nowrap; }
.mp-pp__sum { vertical-align: bottom; }
.mp-pp__status { font-size: 9.5px; white-space: nowrap; }
.mp-pp__status { display: grid; padding: 2px 6px; border-radius: 5px; font-weight: 700; animation: ppStatus 6s infinite; }
.mp-pp__bar em:nth-child(1), .mp-pp__sum em:nth-child(1), .mp-pp__status em:nth-child(1) { animation: ppA 6s infinite; }
.mp-pp__bar em:nth-child(2), .mp-pp__sum em:nth-child(2), .mp-pp__status em:nth-child(2) { animation: ppB 6s infinite; }
.mp-pp__bar em:nth-child(3), .mp-pp__sum em:nth-child(3), .mp-pp__status em:nth-child(3) { animation: ppC 6s infinite; }
@keyframes ppBar { 0%, 30% { background: #FFE9A6; color: #7A5600; } 33%, 63% { background: #FFD3A1; color: #8A4B00; } 66%, 97% { background: #BFE6D5; color: #0B4A39; } 100% { background: #FFE9A6; color: #7A5600; } }
@keyframes ppStatus { 0%, 30% { background: #FFF4D6; color: #7A5600; } 33%, 63% { background: #FFE7CC; color: #8A4B00; } 66%, 97% { background: var(--st-ok-bg); color: var(--st-ok-fg); } 100% { background: #FFF4D6; color: #7A5600; } }
@keyframes ppLine { 0%, 30% { width: 0; } 33%, 63% { width: 50%; } 66%, 97% { width: 100%; } 100% { width: 0; } }
@keyframes ppA { 0%, 30% { opacity: 1; } 33%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ppB { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes ppC { 0%, 63% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }
/* app preview: a phone with the calendar; bookings grow in row by row, then a push drops in */
.mp-ap { display: block; width: 100px; height: 122px; margin: 0 auto; padding: 5px; border-radius: 18px; background: #171A20; }
.mp-ap__screen { position: relative; display: grid; align-content: start; gap: 3px; height: 100%; padding: 7px 6px 5px; overflow: hidden; border-radius: 13px; background: #F4F6F9; }
.mp-ap__top { display: flex; align-items: center; justify-content: space-between; height: 8px; margin-bottom: 2px; }
.mp-ap__title { width: 34px; height: 6px; border-radius: 3px; background: #1A1D23; }
.mp-ap__chip { width: 14px; height: 6px; border-radius: 3px; background: var(--brand); }
.mp-ap__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-left: 17px; }
.mp-ap__days span { height: 3px; border-radius: 2px; background: #D5DAE1; }
.mp-ap__days .is-today { background: var(--brand); }
.mp-ap__row { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 3px; height: 17px; padding: 2px; border-radius: 5px; background: #fff; }
.mp-ap__thumb { width: 13px; height: 13px; border-radius: 4px; background: var(--c); }
.mp-ap__track { position: relative; display: block; height: 100%; background-image: linear-gradient(90deg, #EEF0F3 1px, transparent 1px); background-size: 20% 100%; }
.mp-ap__bar { position: absolute; top: 3px; bottom: 3px; left: calc(var(--s) * 20% + 1px); width: calc(var(--n) * 20% - 2px); border-radius: 3px; transform-origin: left center; animation: mpGrow .5s var(--ease) var(--d) both; }
.mp-ap__bar--ok { background: #BFE6D5; box-shadow: inset 2px 0 0 #12A17A; }
.mp-ap__bar--info { background: #D6E4FB; box-shadow: inset 2px 0 0 #3B82F6; }
.mp-ap__bar--warn { background: #FFE0B8; box-shadow: inset 2px 0 0 #F59E0B; }
.mp-ap__push { position: absolute; left: 4px; right: 4px; top: 4px; display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: 7px; background: #fff; box-shadow: 0 4px 10px rgba(15, 23, 42, .18); animation: mpApPush 4s var(--ease) 1.4s infinite both; }
.mp-ap__pushdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.mp-ap__pushlines { display: grid; gap: 2px; flex: 1; }
.mp-ap__pushlines span { height: 3px; border-radius: 2px; background: #1A1D23; }
.mp-ap__pushlines span + span { width: 70%; background: #C3C8D0; }
@keyframes mpApPush { 0% { opacity: 0; transform: translateY(-24px); } 12%, 70% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-24px); } }
/* solutions preview: the property miniature with events popping in */
.mp-sol { position: relative; display: grid; place-items: center; height: 100%; }
.mp-sol img { display: block; height: 116px; width: auto; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); }
.mp-sol__chip { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 14px rgba(15, 23, 42, .1); font-size: 10px; font-weight: 600; white-space: nowrap; animation: mpDrop .45s var(--ease) var(--d) both; }
.mp-sol__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.mp-sol__chip--0 { left: 0; top: 6px; }
.mp-sol__chip--1 { right: 0; bottom: 6px; }
/* integrations and help previews (.mq-*): small cards, calendar strips, code, chat, popping in with --d delays */
.mq { display: grid; align-content: center; gap: 5px; height: 100%; }
.mq > *, .mq-code i, .mq-days i { animation: mpDrop .45s var(--ease) var(--d, 0s) both; }
.mq-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 14px rgba(15, 23, 42, .06); }
.mq-card > span { min-width: 0; }
.mq-card img { flex: none; width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.mq-card b { display: block; overflow: hidden; font-size: 11px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mq-card small { display: block; overflow: hidden; font-size: 10px; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.mq-ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--st-ok-bg); color: var(--st-ok-fg); }
.mq-ic .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.mq-cal { display: grid; gap: 6px; padding: 8px 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.mq-cal__head { display: flex; align-items: center; gap: 6px; }
.mq-cal__head img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.mq-cal__head b { font-size: 10.5px; font-weight: 600; }
.mq-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mq-days i { height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border); }
.mq-days i.is-busy { animation: mqBusy .4s ease var(--d) both; }
@keyframes mqBusy { from { background: #fff; } to { background: repeating-linear-gradient(135deg, #C9CFD8 0 3px, #DDE1E7 3px 6px); box-shadow: none; } }
.mq-chat__head { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.mq-chat__head img { width: 20px; height: 20px; border-radius: 50%; }
.mq-chat__head b { font-weight: 600; }
.mq-bubble { justify-self: start; max-width: 92%; padding: 7px 9px; border-radius: 10px 10px 10px 3px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); font-size: 10.5px; line-height: 1.35; }
.mq-bubble b { display: block; font-weight: 600; }
.mq-bubble--me { justify-self: end; border-radius: 10px 10px 3px 10px; background: #1A1D23; color: #fff; }
.mq-bubble--bot { display: grid; }
.mq-dots, .mq-answer { grid-area: 1 / 1; }
.mq-dots { display: flex; gap: 3px; align-items: center; animation: mqHide .2s ease 1.8s both; }
.mq-dots i { width: 5px; height: 5px; border-radius: 50%; background: #B4BAC4; animation: mqDot 1s ease-in-out infinite; }
.mq-dots i:nth-child(2) { animation-delay: .15s; }
.mq-dots i:nth-child(3) { animation-delay: .3s; }
.mq-answer { opacity: 0; animation: mpFade .3s ease 1.9s forwards; }
@keyframes mqDot { 50% { transform: translateY(-3px); } }
@keyframes mqHide { to { opacity: 0; } }
.mq-code { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: #14171C; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #C9CED6; }
.mq-code i { font-style: normal; white-space: nowrap; }
.mq-code em { font-style: normal; color: #FDD663; }
.mq-code .is-ok { color: #81C995; }
.mq-search { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand); font-size: 11px; }
.mq-search .ic { flex: none; width: 13px; height: 13px; color: var(--text-muted); }
.mq-type { display: inline-block; overflow: hidden; width: 0; white-space: nowrap; animation: mqType 1s steps(15) .3s forwards; }
@keyframes mqType { to { width: 16ch; } }
.mq-form { display: grid; gap: 6px; padding: 8px 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.mq-form small { font-size: 10px; color: var(--text-muted); }
.mq-lines { display: grid; gap: 4px; }
.mq-lines i { height: 5px; border-radius: 3px; background: #E3E6EB; }
.mq-lines i:nth-child(2) { width: 80%; }
.mq-lines i:nth-child(3) { width: 55%; }
.mq-new { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--st-ok-bg); font-size: 10px; font-weight: 700; color: var(--st-ok-fg); }
.mq-lock { justify-self: center; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 10px; background: #1A1D23; color: #fff; }
.mq-lock .ic { width: 14px; height: 14px; }
.mp-site { display: block; height: 100%; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); overflow: hidden; }
.mp-site__bar { display: flex; gap: 4px; padding: 6px 8px; background: #F4F6F9; }
.mp-site__bar i { width: 6px; height: 6px; border-radius: 50%; background: #D5DBE3; }
.mp-site__body { display: grid; gap: 7px; padding: 8px 10px; }
.mp-days { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mp-days i { position: relative; z-index: 1; display: grid; place-items: center; height: 22px; font-size: 11px; font-style: normal; font-weight: 500; }
.mp-range { position: absolute; left: calc(100% / 7 * 2); top: 0; width: calc(100% / 7 * 3); height: 22px; border-radius: 6px; background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); transform-origin: left center; animation: mpGrow .6s var(--ease) .3s both; }
.mp-site__btn { position: relative; display: grid; height: 26px; border-radius: 7px; background: var(--text-primary); color: #fff; font-size: 11px; font-weight: 600; overflow: hidden; }
.mp-site__btn em { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-style: normal; }
.mp-site__btn em:first-child { animation: mpOut .3s ease 1.6s both; }
.mp-site__btn em:last-child { background: var(--brand); animation: mpIn .35s var(--ease) 1.7s both; }
.mp-site__btn .ic { width: 12px; height: 12px; stroke-width: 2.6; }
@keyframes mpOut { to { opacity: 0; transform: translateY(-6px); } }

/* guests */
.mp-guest { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #EEF0F3; animation: mpDrop .4s var(--ease) var(--d) both; }
.mp-guest i { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); font-size: 10px; font-style: normal; font-weight: 600; color: var(--text-secondary); }
.mp-guest b { font-size: 11.5px; line-height: 1.15; }
.mp-guest small { line-height: 1.15; }
.mp-star { position: absolute; right: 2px; top: 50%; margin-top: -8px; width: 16px !important; height: 16px !important; color: var(--warn, #D98E1F); fill: #F2B632; stroke: #D98E1F; animation: mpPop .45s var(--ease) 1.2s both; }

/* blacklist */
.mp-field { display: grid; gap: 4px; padding: 8px 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.mp-type { display: block; width: 14ch; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 600; animation: mpType 1s steps(14) .2s both; }
@keyframes mpType { from { width: 0; } to { width: 14ch; } }
.mp-alert { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: #FDECEC; color: #8F1D21; animation: mpPop .45s var(--ease) 1.5s both; }
.mp-alert .ic { flex: none; margin-top: 1px; color: #E5484D; stroke-width: 2.4; }
.mp-alert b { display: block; font-size: 11.5px; }
.mp-alert small { color: #B4464A; }

/* notifications */
.mp-note { display: flex; gap: 8px; padding: 8px 10px; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 14px rgba(15, 23, 42, .06); animation: mpSlide .45s var(--ease) var(--d) both; }
.mp-note + .mp-note { margin-top: 8px; }
.mp-note i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #E3F1FB; color: #2E8BD1; }
.mp-note b { display: block; font-size: 11.5px; }

/* cleaning */
.mp-task { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #EEF0F3; font-size: 11.5px; }
.mp-task b { font-weight: 500; }
.mp-task i { position: relative; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--border); animation: mpTick .3s ease var(--d) both; }
.mp-task i::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); animation: mpTickMark .25s ease var(--d) both; }
@keyframes mpTick { to { background: var(--brand); box-shadow: none; } }
@keyframes mpTickMark { to { transform: rotate(45deg) scale(1); } }

/* staff */
.mp-person { display: flex; align-items: center; gap: 8px; padding: 3px 0; animation: mpDrop .4s var(--ease) both; }
.mp-person + .mp-person { animation-delay: .3s; }
.mp-person i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); font-size: 10px; font-style: normal; font-weight: 600; color: var(--text-secondary); }
.mp-person b { display: block; font-size: 11.5px; line-height: 1.2; }
.mp-role { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--st-info-bg); color: var(--st-info-fg) !important; font-weight: 500; }
.mp-role--purple { background: #ECE6FB; color: #4A3A86 !important; }
.mp-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 5px 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.mp-toggle small { font-size: 11px; color: var(--text-secondary); }
.mp-toggle i { position: relative; width: 28px; height: 16px; border-radius: 8px; background: #D5DBE3; animation: mpSwitch .3s ease 1.2s both; }
.mp-toggle i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .2); animation: mpKnob .3s ease 1.2s both; }
@keyframes mpSwitch { to { background: var(--brand); } }
@keyframes mpKnob { to { transform: translateX(12px); } }

/* app */

/* finance */
.mp-bars { display: flex; align-items: flex-end; gap: 8px; height: 82px; padding: 0 6px; }
.mp-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: #D7F0E7; transform-origin: bottom; animation: mpRise .55s var(--ease) var(--d) both; }
.mp-bars i.is-hi { background: var(--brand); }
@keyframes mpRise { from { transform: scaleY(0); } to { transform: none; } }
.mp-sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding: 0 4px; animation: mpDrop .4s var(--ease) .9s both; }
.mp-sum b { font-size: 15px; }

/* reports */
.mp-kpi { display: flex; align-items: baseline; gap: 8px; }
.mp-kpi b { font-size: 26px; letter-spacing: -.02em; animation: mpDrop .4s var(--ease) .2s both; }
.mp-line { display: block; width: 100%; height: 72px; margin-top: 6px; overflow: visible; }
.mp-line__path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: mpDraw 1.2s var(--ease) .3s forwards; vector-effect: non-scaling-stroke; }
.mp-line__area { fill: var(--brand-soft); opacity: 0; animation: mpFade .6s ease 1.1s forwards; }
@keyframes mpDraw { to { stroke-dashoffset: 0; } }
@keyframes mpFade { to { opacity: 1; } }

/* prepayments */

@media (prefers-reduced-motion: reduce) {
  .mp, .mp * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---------- Channel manager page ---------- */
.chhero-art__img { display: block; width: 100%; max-width: 1180px; height: auto; margin: 0 auto; border-radius: 26px; }
.chlogos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 32px; }
.chlogos__label { margin-right: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.chlogos__item { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); font-size: 15px; font-weight: 500; }
.chlogos__item img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }


.chcal, .chguard, .chsrc { padding: 16px 16px 10px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .07); font-size: 12px; }
.chcal__days, .chcal__row, .chguard__row { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
.chcal__days { grid-template-columns: 116px repeat(7, minmax(0, 1fr)); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); font-weight: 500; text-align: center; color: var(--text-muted); }
.chcal__row, .chguard__row { align-items: center; height: 48px; border-bottom: 1px solid #F1F3F6; }
.chcal__row:last-child { border-bottom: 0; }
.chcal__row > span, .chguard__row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.chcal__row > div, .chguard__row > div { position: relative; height: 100%; background-image: linear-gradient(90deg, #F1F3F6 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.chcal .ccal__b, .chguard .ccal__b { top: 9px; bottom: 9px; left: calc(var(--s) * 100% / 7 + 2px); width: calc(var(--n) * 100% / 7 - 4px); gap: 6px; padding: 0 8px; font-size: 11.5px; }
.chcal .ccal__b img, .chguard .ccal__b img { flex: none; width: 15px; height: 15px; border-radius: 4px; object-fit: contain; background: #fff; }
.chcal .ccal__b .ic { flex: none; width: 14px; height: 14px; }
.chguard { padding-bottom: 16px; }
.chguard__row { border-bottom: 0; }

.chguard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; }
.chguard__head b { font-size: 14px; font-weight: 600; }
.chguard__head span { font-size: 12.5px; color: var(--text-muted); }
.chguard__sub { margin: 14px 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.chguard__ch { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-surface-2); font-size: 13px; font-weight: 500; }
.chguard__ch + .chguard__ch { margin-top: 8px; }
.chguard__ch img { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.chguard__days { display: flex; gap: 3px; }
.chguard__days i { width: 18px; height: 18px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.chguard__days i.is-closed { background: repeating-linear-gradient(135deg, #C9CFD8 0 4px, #DDE1E7 4px 8px); box-shadow: none; }
.chguard__ch em { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--st-ok-bg); color: var(--st-ok-fg); font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.chguard__ch em .ic { width: 12px; height: 12px; stroke-width: 2.8; }

.chsrc { display: grid; gap: 12px; padding: 22px 22px 24px; }
.chsrc__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.chsrc__head b { font-size: 15px; font-weight: 600; }
.chsrc__head span { font-size: 13px; color: var(--text-muted); }
.chsrc__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 13.5px; }
.chsrc__row span { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.chsrc__row img { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.chsrc__row .ic { width: 18px; height: 18px; color: var(--text-muted); }
.chsrc__row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--brand) var(--w), var(--bg-surface-2) var(--w)); }
.chsrc__row b { text-align: right; font-weight: 600; }

@media (max-width: 639px) {
  .chhero-art__img { border-radius: 18px; }
  .chlogos__label { flex-basis: 100%; margin: 0; text-align: center; }
  .chcal__days, .chcal__row, .chguard__row { grid-template-columns: 88px minmax(0, 1fr); }
  .chcal__days { grid-template-columns: 88px repeat(7, minmax(0, 1fr)); }
  .chsrc__row { grid-template-columns: 104px minmax(0, 1fr) 40px; }
  .chguard__head { flex-direction: column; gap: 2px; }
  .chguard__ch { gap: 8px; padding: 10px; }
  .chguard__days i { width: 14px; height: 14px; border-radius: 4px; }
  .chguard__ch em { font-size: 0; gap: 0; padding: 0 6px; }
}

/* ---------- Booking module page (.bk* prefix; .bk itself is the main-page booking bar) ---------- */
.bkhero__note { margin: 14px 0 0; font-size: 13px; text-align: center; color: var(--text-muted); }

/* live demo: a mock site with the widget; data-state = search | results | form | done */
.bkdemo { max-width: 1180px; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 70px rgba(15, 23, 42, .09); }
.bkdemo__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: var(--bg-surface-2); border-bottom: 1px solid var(--border); }
.bkdemo__bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.bkdemo__bar i:nth-child(2) { background: #FEBC2E; }
.bkdemo__bar i:nth-child(3) { background: #28C840; }
.bkdemo__bar span { width: min(320px, 50%); height: 24px; margin: 0 auto; padding-top: 4px; border-radius: 8px; background: #fff; font-size: 12px; text-align: center; color: var(--text-muted); }
.bkdemo__site { position: relative; padding-bottom: 40px; background: #F8F4EE; color: #2B2620; }
.bkdemo__nav { display: flex; align-items: center; gap: 36px; height: 76px; padding: 0 56px; font-size: 15px; color: #5E5245; }
.bkdemo__nav b { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #1A1D23; }
.bkdemo__nav img { width: 30px; height: 30px; }
.bkdemo__photo { display: block; width: 100%; height: auto; aspect-ratio: 1444 / 550; object-fit: cover; }

/* the widget's search bar */
.bkw--search { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .55fr) auto; gap: 12px; width: min(1000px, calc(100% - 48px)); margin: -60px auto 0; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(43, 38, 32, .06), 0 16px 40px rgba(43, 38, 32, .12); }
.bkw__f, .bkform__f { display: grid; gap: 2px; margin: 0; padding: 8px 14px; border-radius: 10px; border: 1px solid #E3E6EB; }
.bkw__f small, .bkform__f small { font-size: 11px; color: var(--text-muted); }
.bkw__f span, .bkform__f span { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.bkw--search .bkw__f { padding: 10px 18px; }
.bkw--search .bkw__f span { font-size: 17px; }
.bkw__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 32px; border: 0; border-radius: 10px; background: #155239; font: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: background-color .2s var(--ease); }
.bkw__btn:hover { background: #0E3F2B; }
.bkw__btn .ic { width: 16px; height: 16px; }
.bkw__btn--sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.bkdemo[data-state="search"] .bkw--search .bkw__btn { animation: bkPulse 2.4s infinite; }
@keyframes bkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 82, 57, .32); } 60% { box-shadow: 0 0 0 10px rgba(21, 82, 57, 0); } }

/* autoplay: date picker above the search bar, a cursor that drives the demo */
.bkw__f { transition: border-color .2s, box-shadow .2s; }
.bkw__f.is-active { border-color: #155239; box-shadow: 0 0 0 3px rgba(21, 82, 57, .12); }
.bkw__f span.is-empty { color: var(--text-muted); }
.bkw__f[data-bk-f] { cursor: pointer; }
.bkpop { position: absolute; left: 14px; bottom: calc(100% + 10px); z-index: 3; width: 360px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(43, 38, 32, .08), 0 22px 50px rgba(43, 38, 32, .22); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.bkpop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.bkpop__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 15px; }
.bkpop__head b { font-weight: 600; }
.bkpop__head span { font-size: 20px; line-height: 1; color: var(--text-muted); }
.bkpop__wd, .bkpop__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.bkpop__wd { margin: 12px 0 6px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.bkpop__grid i { display: grid; place-content: center; justify-items: center; gap: 1px; height: 46px; border: 1.5px solid transparent; border-radius: 10px; font-style: normal; transition: background-color .2s, color .2s; }
.bkpop__grid i[data-d] { cursor: pointer; }
.bkpop__grid i[data-d]:hover { background: #F2F4F1; }
.bkpop__grid b { font-size: 14px; font-weight: 600; line-height: 1.1; }
.bkpop__grid small { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.bkpop__grid .is-past, .bkpop__grid .is-busy { cursor: default; color: #BCC2CB; }
.bkpop__grid .is-past:hover, .bkpop__grid .is-busy:hover { background: none; }
.bkpop__grid .is-busy b { text-decoration: line-through; }
.bkpop__grid .is-today { border-color: #155239; }
.bkpop__grid .is-range, .bkpop__grid .is-range:hover { background: #E3EFE8; }
.bkpop__grid .is-in, .bkpop__grid .is-out, .bkpop__grid .is-in:hover, .bkpop__grid .is-out:hover { background: #155239; color: #fff; }
.bkpop__grid .is-in small, .bkpop__grid .is-out small { color: rgba(255, 255, 255, .8); }
.bkcur { position: absolute; left: 0; top: 0; z-index: 6; width: 24px; height: 24px; pointer-events: none; opacity: 0; transform: translate(var(--x, 70%), var(--y, 40%)); transition: transform .8s cubic-bezier(.45, .05, .25, 1), opacity .3s; }
.bkcur.is-on { opacity: 1; }
.bkcur svg { display: block; width: 24px; height: 24px; fill: #fff; stroke: #1A1D23; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); transform-origin: 4px 2px; transition: transform .12s; }
.bkcur.is-down svg { transform: scale(.82); }
.bkcur i { position: absolute; left: -9px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(21, 82, 57, .7); opacity: 0; }
.bkcur.is-click i { animation: bkRing .55s ease-out; }
@keyframes bkRing { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.5); } }

/* results, form and success open over the site, like the widget's modal */
.bkdemo__modal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 28px; background: rgba(32, 27, 21, .32); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.bkdemo:not([data-state="search"]) .bkdemo__modal { opacity: 1; pointer-events: auto; }
.bkdemo__panel { width: min(880px, 100%); max-height: 100%; overflow: auto; padding: 20px 22px 22px; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(15, 23, 42, .25); color: var(--text-primary); transform: translateY(14px); transition: transform .35s var(--ease); }
.bkdemo:not([data-state="search"]) .bkdemo__panel { transform: none; }
.bkdemo__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bkdemo__head b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.bkdemo__x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--bg-surface-2); color: var(--text-secondary); cursor: pointer; }
.bkdemo__x .ic { width: 16px; height: 16px; }
[data-bk-step] { display: none; }
.bkdemo[data-state="results"] [data-bk-step="results"], .bkdemo[data-state="form"] [data-bk-step="form"], .bkdemo[data-state="done"] [data-bk-step="done"] { display: grid; }

/* results as horizontal rows, like the module's list layout: photo, details, total and button */
.bkres { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bkcard { display: grid; grid-template-columns: 176px minmax(0, 1fr); overflow: hidden; border-radius: 14px; border: 1px solid var(--border); }
.bkcard img { display: block; width: 100%; height: 100%; max-height: 124px; object-fit: contain; padding: 8px; background: #F6F2EB; }
.bkcard { align-items: stretch; }
.bkcard__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name total" "meta total" "night btn"; align-items: center; gap: 4px 20px; padding: 14px 18px; }
.bkcard__body b { grid-area: name; font-size: 15.5px; font-weight: 600; }
.bkcard__body small { grid-area: meta; font-size: 12.5px; color: var(--text-muted); }
.bkcard__body p { display: contents; }
.bkcard__body p span { grid-area: night; align-self: end; font-size: 13px; color: var(--text-secondary); }
.bkcard__body p strong { grid-area: total; justify-self: end; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.bkcard__body .bkw__btn { grid-area: btn; }

.bkform { gap: 10px; max-width: 420px; margin: 0 auto; }
.bkform__pick { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-surface-2); font-size: 13.5px; font-weight: 500; }
.bkform__check { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 12.5px; color: var(--text-secondary); }
.bkform__check i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: #155239; color: #fff; }
.bkform__check .ic { width: 12px; height: 12px; stroke-width: 3; }

.bkdone { justify-items: center; gap: 8px; padding: 14px 0 6px; text-align: center; }
.bkdone__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; background: var(--st-ok-bg); color: var(--st-ok-fg); }
.bkdone__ic .ic { width: 24px; height: 24px; stroke-width: 2.6; }
.bkdone b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.bkdone p { margin: 0; max-width: 26em; color: var(--text-secondary); }
.bkhold { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: #FFF4D6; font-size: 13.5px; font-weight: 500; color: #8A6100; }
.bkhold .ic { width: 16px; height: 16px; }
.bkhold em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.bkdone__again { margin-top: 6px; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-hover); cursor: pointer; }

/* calendar with nightly prices */
.bkcal, .bkreq { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .07); }
.bkcal__head, .bkreq__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bkcal__head b, .bkreq__head b { font-size: 16px; font-weight: 600; }
.bkcal__head span { font-size: 12.5px; color: var(--text-muted); }
.bkcal__wd, .bkcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bkcal__wd { margin: 14px 0 6px; font-size: 11px; font-weight: 500; text-align: center; color: var(--text-muted); }
.bkcal__grid i { display: grid; place-content: center; justify-items: center; gap: 1px; height: 54px; border-radius: 10px; font-style: normal; }
.bkcal__grid b { font-size: 14px; font-weight: 500; }
.bkcal__grid small { font-size: 10.5px; color: var(--text-muted); }
.bkcal__grid .is-off { opacity: .35; }
.bkcal__grid .is-busy { background: repeating-linear-gradient(135deg, #F1F3F6 0 5px, #F8F9FB 5px 10px); }
.bkcal__grid .is-busy b { color: var(--text-muted); text-decoration: line-through; }
.bkcal__grid .is-sel { background: var(--st-ok-bg); }
.bkcal__grid .is-start, .bkcal__grid .is-end { background: var(--brand); color: #fff; }
.bkcal__grid .is-start small, .bkcal__grid .is-end small { color: rgba(255, 255, 255, .8); }
.bkcal__sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-surface-2); font-size: 14px; color: var(--text-secondary); }
.bkcal__sum b { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.bkcal__rule { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 13px; color: var(--text-muted); }
.bkcal__rule .ic { flex: none; width: 16px; height: 16px; }

/* request with held dates (soft booking colours: yellow) */
.bkreq { width: 100%; max-width: 460px; justify-self: center; }
.bkreq__chip { padding: 5px 10px; border-radius: 8px; background: #FFF4D6; font-size: 12.5px; font-weight: 600; color: #8A6100; white-space: nowrap; }
.bkreq__timer { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.bkreq__timer .ic { flex: none; width: 24px; height: 24px; color: #D49A00; }
.bkreq__timer em { font-size: 40px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bkreq__timer small { font-size: 13px; color: var(--text-muted); }
.bkreq__rows { margin: 0; }
.bkreq__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #F1F3F6; font-size: 14px; }
.bkreq__rows dt { color: var(--text-muted); }
.bkreq__rows dd { margin: 0; font-weight: 500; text-align: right; }
.bkreq__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 6px 0 16px; }
.bkreq__strip span { display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--bg-surface-2); font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.bkreq__strip .is-held { background: repeating-linear-gradient(135deg, #FCE6A4 0 5px, #FFF2CC 5px 10px); color: #8A6100; }
.bkreq__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bkreq__btns span { display: grid; place-items: center; height: 42px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.bkreq__btns .is-go { border-color: var(--brand); background: var(--brand); color: #fff; }

/* requests in the phone */
.bkpush { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.bkpush img { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.bkpush b { display: block; font-size: 12.5px; font-weight: 600; }
.bkpush small { display: block; font-size: 11.5px; color: var(--text-muted); }
.bkmreq { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.bkmreq + .bkmreq { margin-top: 10px; }
.bkmreq--done { opacity: .7; }
.bkmreq__head { display: flex; align-items: center; justify-content: space-between; }
.bkmreq__head b { font-size: 15px; font-weight: 600; }
.bkmreq__new, .bkmreq__ok { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.bkmreq__new { background: #E6EEFF; color: #1D4FB8; }
.bkmreq__ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.bkmreq p { margin: 0; line-height: 1.45; color: var(--text-secondary); }
.bkmreq__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bkmreq__meta span { padding: 8px 10px; border-radius: 10px; background: var(--bg-surface-2); font-weight: 600; }
.bkmreq__meta small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.bkmreq__who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.bkmreq__who i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EEE8FD; font-size: 10px; font-style: normal; font-weight: 600; color: #6B4FD8; }

/* appearance: the hero's search bar over the same photo, restyled on its own (landing.js cycles data-look) */
.bklook { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 22px; background: #EDE5D7; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .08);
  --w-bar: #fff; --w-fg: #15181E; --w-muted: #6B7280; --w-field: #fff; --w-border: #E3E6EB; --w-bw: 1px; --w-accent: #155239; --w-accent-fg: #fff;
  --w-r: 10px; --w-rb: 10px; --w-rc: 16px; --w-font: inherit; --w-shadow: 0 16px 40px rgba(43, 38, 32, .18); --w-up: none; }
.bklook[data-look="soft"] { --w-bar: #FBF7F1; --w-fg: #3A2F25; --w-muted: #8C7B6A; --w-border: #EADFD2; --w-accent: #C2774C; --w-r: 16px; --w-rb: 999px; --w-rc: 26px; --w-font: Georgia, "PT Serif", serif; }
.bklook[data-look="contrast"] { --w-fg: #000; --w-muted: #3F3F46; --w-border: #000; --w-bw: 2px; --w-accent: #0047FF; --w-r: 0px; --w-rb: 0px; --w-rc: 0px; --w-shadow: 8px 8px 0 rgba(0, 0, 0, .9); }
.bklook[data-look="dark"] { --w-bar: #16191F; --w-fg: #F2F4F7; --w-muted: #9AA3AF; --w-field: #22262E; --w-border: #2E333C; --w-accent: #12A17A; --w-r: 12px; --w-rb: 12px; --w-rc: 18px; --w-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.bklook[data-look="sea"] { --w-bar: rgba(255, 255, 255, .9); --w-field: #EEF3FF; --w-border: transparent; --w-accent: #1E5BD8; --w-r: 999px; --w-rb: 999px; --w-rc: 40px; }
.bklook[data-look="mono"] { --w-field: #F3F3F1; --w-border: transparent; --w-accent: #1A1D23; --w-r: 4px; --w-rb: 4px; --w-rc: 6px; --w-up: uppercase; }
.bklook__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bklook__bar { position: absolute; left: 50%; bottom: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr) auto; gap: 8px; width: calc(100% - 40px); padding: 10px; transform: translateX(-50%); border-radius: var(--w-rc); border: var(--w-bw) solid var(--w-border); background: var(--w-bar); color: var(--w-fg); font-family: var(--w-font); box-shadow: var(--w-shadow); transition: background-color .5s, color .5s, border-radius .5s, border-color .5s, box-shadow .5s; }
.bklook[data-look="sea"] .bklook__bar { backdrop-filter: blur(8px); }
.bklook__f { display: grid; gap: 1px; min-width: 0; padding: 7px 12px; border-radius: var(--w-r); border: var(--w-bw) solid var(--w-border); background: var(--w-field); font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .5s, border-radius .5s, border-color .5s; }
.bklook__f small { font-size: 10.5px; font-weight: 400; letter-spacing: .02em; text-transform: var(--w-up); color: var(--w-muted); transition: color .5s; }
.bklook__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px; border-radius: var(--w-rb); background: var(--w-accent); font-size: 14px; font-weight: 600; letter-spacing: .01em; text-transform: var(--w-up); color: var(--w-accent-fg); transition: background-color .5s, border-radius .5s; }
.bklook__btn .ic { width: 15px; height: 15px; }

/* embed code */
.bkcode { min-width: 0; overflow: hidden; border-radius: 20px; background: #14171C; color: #E6E9EE; box-shadow: 0 24px 56px rgba(15, 23, 42, .14); }
.bkcode__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #262B33; font-size: 13px; color: #9AA3AF; }
.bkcode__head span { display: inline-flex; align-items: center; gap: 8px; }
.bkcode__head .ic { width: 16px; height: 16px; }
.bkcode__head b { padding: 5px 10px; border-radius: 8px; background: #262B33; font-size: 12.5px; font-weight: 500; color: #fff; }
.bkcode pre { margin: 0; padding: 20px 16px; overflow-x: auto; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.bkcode .t { color: #F28B82; }
.bkcode .a { color: #FDD663; }
.bkcode .s { color: #81C995; }
.bkcode__sites { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.bkcode__sites span { padding: 6px 10px; border-radius: 8px; background: #20242B; font-size: 12.5px; color: #C9CED6; }
.bkcode__guard { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-top: 1px solid #262B33; font-size: 13px; color: #81C995; }
.bkcode__guard .ic { flex: none; width: 15px; height: 15px; stroke-width: 2.6; }

@media (max-width: 900px) {
  .bkdemo__site { padding-bottom: 20px; }
  .bkdemo__nav { height: 60px; padding: 0 20px; }
  .bkdemo__nav span { display: none; }
  .bkdemo__nav b { font-size: 18px; }
  .bkdemo__nav img { width: 26px; height: 26px; }
  .bkdemo__photo { aspect-ratio: 16 / 10; }
  .bkw--search { width: calc(100% - 24px); margin-top: -36px; padding: 10px; gap: 8px; }
  .bkw--search .bkw__f { padding: 8px 12px; }
  .bkw--search .bkw__f span { font-size: 15px; }
  .bkpop { left: 10px; width: calc(100% - 20px); padding: 10px 12px; }
  .bkpop__wd { margin: 6px 0 2px; }
  .bkpop__grid { gap: 2px; }
  .bkpop__grid i { height: 32px; border-radius: 8px; }
  .bkpop__grid b { font-size: 12.5px; }
  .bkpop__grid small { font-size: 8.5px; letter-spacing: -.02em; }
  .bkw--search { grid-template-columns: 1fr 1fr; }
  .bkw__btn { height: 48px; }
  .bkdemo__modal { padding: 10px; }
  .bkdemo__panel { padding: 16px; }
  .bkcard { grid-template-columns: 110px minmax(0, 1fr); }
  .bkcard img { max-height: none; }
  .bkcard__body { grid-template-areas: "name name" "meta meta" "night night" "total btn"; gap: 3px 10px; padding: 10px 12px 12px; }
  .bkcard__body p strong { justify-self: start; margin-top: 4px; font-size: 16px; }
  .bkcard__body .bkw__btn { margin-top: 4px; }
}
@media (max-width: 639px) {
  .bkdemo { border-radius: 18px; }
  .bkdemo__bar span { width: 60%; }
  .bkdemo__site { min-height: 430px; }
  .bkcard { grid-template-columns: 76px minmax(0, 1fr); }
  .bkcard img { padding: 4px; }
  .bkcard__body { column-gap: 8px; padding: 10px; }
  .bkcard__body .bkw__btn { padding: 0 12px; font-size: 12.5px; }
  .bkcard__body small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .bkcard__body p span { font-size: 11.5px; }
  .bkw__btn--sm { height: 34px; }
  .bkcal { padding: 14px; }
  .bkcal__grid i { height: 48px; }
  .bkcal__grid small { font-size: 9.5px; }
  .bkreq { padding: 16px; }
  .bkreq__timer em { font-size: 34px; }
  .bklook { aspect-ratio: 4 / 5; }
  .bklook__bar { bottom: 16px; width: calc(100% - 24px); grid-template-columns: 1fr 1fr; }
}

/* ---------- Guest base page (.gs* prefix) ---------- */
/* hero: new booking form + guest card; data-step drives the autofill animation (landing.js) */
.gsdemo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; padding: 28px; border-radius: 24px; background: var(--bg-surface-2); }
.gsform, .gscard, .gsmerge__out, .gslist, .gsrate, .gsblack { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px rgba(15, 23, 42, .06); }
.gsform { display: grid; gap: 10px; align-content: start; }
.gsform__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.gsform__head b { font-size: 16px; font-weight: 600; }
.gsform__head span { font-size: 12.5px; color: var(--text-muted); }
.gsf { position: relative; display: grid; gap: 2px; padding: 8px 14px; border-radius: 10px; border: 1px solid #E3E6EB; }
.gsf small { font-size: 11px; color: var(--text-muted); }
.gsf span { min-height: 21px; font-size: 15px; font-weight: 500; }
.gsf--phone { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 161, 122, .12); }
.gsf em { font-style: normal; }
.gsf__caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--text-primary); animation: gsCaret 1s steps(1) infinite; }
@keyframes gsCaret { 50% { opacity: 0; } }
.gsfound { position: absolute; right: 10px; top: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 7px; background: var(--st-ok-bg); font-size: 12px; font-weight: 600; color: var(--st-ok-fg); opacity: 0; transform: translateY(-50%) scale(.9); transition: opacity .3s, transform .3s var(--ease); }
.gsfound .ic { width: 13px; height: 13px; stroke-width: 2.8; }
.gsf--fill span { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--d), transform .35s var(--ease) var(--d); }
.gsf--fill { transition: background-color .35s var(--d); }
.gsslot { position: relative; display: grid; border: 1.5px dashed #D5DAE1; border-radius: 18px; transition: border-color .3s; }
.gsslot__hint { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; font-size: 14px; text-align: center; color: var(--text-muted); transition: opacity .3s; }
.gsslot__hint .ic { width: 28px; height: 28px; }
.gsdemo[data-step="3"] .gsslot { border-color: transparent; }
.gsdemo[data-step="3"] .gsslot__hint { opacity: 0; }
.gscard { position: relative; z-index: 1; margin: -1.5px; opacity: 0; transform: translateX(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.gsdemo[data-step="2"] .gsfound, .gsdemo[data-step="3"] .gsfound { opacity: 1; transform: translateY(-50%); }
.gsdemo[data-step="2"] .gsf--fill span, .gsdemo[data-step="3"] .gsf--fill span { opacity: 1; transform: none; }
.gsdemo[data-step="2"] .gsf--fill, .gsdemo[data-step="3"] .gsf--fill { background: #F6FBF9; }
.gsdemo[data-step="3"] .gscard { opacity: 1; transform: none; }
.gsdemo:not([data-step="1"]) .gsf__caret { visibility: hidden; }

.gscard__top { display: flex; align-items: center; gap: 12px; }
.gscard__top b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.gscard__ava { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c, #EEE8FD); font-size: 14px; font-style: normal; font-weight: 600; color: var(--f, #6B4FD8); }
.gsvip { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 8px; border-radius: 7px; background: #FFF4D6; font-size: 12px; font-weight: 600; color: #8A6100; }
.gsvip .ic { width: 12px; height: 12px; fill: currentColor; }
.gscard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.gscard__stats span, .gsm__stats span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-surface-2); font-size: 16px; font-weight: 600; }
.gscard__stats small, .gsm__stats small { flex-basis: 100%; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.gscard__stats .ic { width: 14px; height: 14px; fill: #F5B400; stroke: #F5B400; }
.gscard__label { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.gshist { margin: 0; padding: 0; list-style: none; }
.gshist li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px solid #F1F3F6; font-size: 13.5px; }
.gshist span { color: var(--text-muted); }
.gshist b { font-weight: 500; }
.gshist em { font-style: normal; font-weight: 600; }

/* one card per guest */
.gsmerge { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.gsmerge__in { display: grid; gap: 8px; }
.gsmerge__in span { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border); font-size: 13px; font-weight: 500; }
.gsmerge__in img, .gsmerge__in .ic { width: 20px; height: 20px; border-radius: 5px; color: var(--text-secondary); }
.gsmerge__in small { grid-column: 2; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.gsmerge__arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--st-ok-bg); color: var(--st-ok-fg); }
.gsmerge__arrow .ic { width: 18px; height: 18px; }
.gsmerge__out { display: grid; justify-items: center; gap: 4px; text-align: center; }
.gsmerge__out .gscard__ava { width: 52px; height: 52px; margin-bottom: 6px; font-size: 16px; }
.gsmerge__out b { font-size: 16px; font-weight: 600; }
.gsmerge__out small { font-size: 12.5px; color: var(--text-muted); }
.gsmerge__out span { margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: var(--st-ok-bg); font-size: 12.5px; font-weight: 600; color: var(--st-ok-fg); }

/* stay history */
.gslist__head, .gsrate__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.gslist__head b { font-size: 16px; font-weight: 600; }
.gslist__head span { font-size: 13px; color: var(--text-muted); }
.gslist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F1F3F6; }
.gslist__row b { display: block; font-size: 14px; font-weight: 500; }
.gslist__row small { display: block; font-size: 12.5px; color: var(--text-muted); }
.gslist__row em { padding: 4px 8px; border-radius: 7px; background: var(--bg-surface-2); font-size: 12px; font-style: normal; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.gslist__row em.is-soon { background: #E6EEFF; color: #1D4FB8; }
.gslist__row em.is-miss { background: #FDECEC; color: #A3343A; }
.gslist__row strong { font-size: 14.5px; font-weight: 600; text-align: right; }

/* rating: bars fill when the card scrolls into view */
.gsrate__head small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.gsrate__head b { font-size: 16px; font-weight: 600; }
.gsrate__head strong { display: inline-flex; align-items: center; gap: 4px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.gsrate__head strong .ic { width: 22px; height: 22px; fill: #F5B400; stroke: #F5B400; }
.gsrate__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; }
.gsrate__row span { color: var(--text-secondary); }
.gsrate__row i { height: 8px; border-radius: 4px; background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--bg-surface-2), var(--bg-surface-2)); background-repeat: no-repeat; background-size: 0% 100%, 100% 100%; transition: background-size 1.1s var(--ease) .3s; }
.gsrate.is-visible .gsrate__row i { background-size: calc(var(--v) * 100%) 100%, 100% 100%; }
.gsrate__row:nth-child(3) i { transition-delay: .4s; }
.gsrate__row:nth-child(4) i { transition-delay: .5s; }
.gsrate__row:nth-child(5) i { transition-delay: .6s; }
.gsrate__row b { font-weight: 600; text-align: right; }
.gsrate__maid { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--st-ok-bg); font-size: 13px; font-weight: 500; color: var(--st-ok-fg); }
.gsrate__maid .ic { flex: none; width: 16px; height: 16px; }

/* regular guests in the phone */
.gsm { padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.gsm + .gsm { margin-top: 10px; }
.gsm .gscard__top b { font-size: 15px; }
.gsm .gscard__ava { width: 38px; height: 38px; font-size: 12.5px; }
.gsm__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
.gsm__stats span { padding: 8px 10px; font-size: 15px; }
.gsm__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gsm__btns span { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; border-radius: 10px; border: 1px solid var(--border); font-size: 11.5px; font-weight: 500; }
.gsm__btns .ic { width: 13px; height: 13px; }
.gsm__note { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #F7F4FE; font-size: 12px; color: #4A3A86; }
.gsm__note small { display: block; font-size: 10.5px; font-weight: 600; color: #7C5CE0; }
.gsm--row { display: flex; align-items: center; gap: 10px; }
.gsm--row b { display: block; font-size: 14px; font-weight: 600; }
.gsm--row small { display: block; font-size: 11.5px; color: var(--text-muted); }
.gsm__star { width: 16px; height: 16px; margin-left: auto; fill: #F5B400; stroke: #F5B400; }

/* blacklist warning */
.gsblack { display: grid; gap: 12px; max-width: 480px; width: 100%; justify-self: center; }
.gsblack .gsf { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .1); }
.gsblack__tag { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #8F1D21; }
.gsblack__tag .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #E5484D; }
.gsblack__tag b { display: block; font-size: 14px; font-weight: 600; }
.gsblack__tag small { display: block; margin-top: 2px; font-size: 12.5px; color: #A3434A; }
.gsblack__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gsblack__btns span { display: grid; place-items: center; height: 42px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.gsblack__btns .is-go { border-color: var(--brand); background: var(--brand); color: #fff; }

@media (max-width: 900px) {
  .gsdemo { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .gsmerge { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .gsmerge__arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 639px) {
  .gsdemo { border-radius: 18px; }
  .gsform, .gscard, .gsmerge__out, .gslist, .gsrate, .gsblack { padding: 16px; }
  .gsform__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .gscard__stats { gap: 6px; }
  .gscard__stats span { padding: 8px; font-size: 13px; }
  .gscard__stats small { font-size: 10px; }
  .gshist li { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
  .gslist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .gslist__row em { grid-row: 2; grid-column: 1; justify-self: start; }
  .gslist__row strong { grid-row: 1 / 3; grid-column: 2; }
  .gsrate__row { grid-template-columns: 120px minmax(0, 1fr) 16px; font-size: 13px; }
}

/* ---------- Blacklist page (.bl* prefix; reuses .gsform, .gsf, .gsblack__* from the guest page) ---------- */
/* hero: typed phone → warning tag → save confirmation; data-step drives it (landing.js) */
.bldemo { position: relative; display: grid; place-items: center; max-width: 1080px; min-height: 440px; margin: 0 auto; padding: 32px 28px; border-radius: 24px; background: var(--bg-surface-2); overflow: hidden; }
.bldemo .gsform { width: min(460px, 100%); }
.bldemo__phone { transition: border-color .3s, box-shadow .3s; }
.bldemo[data-step="1"] .bldemo__phone { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 161, 122, .12); }
.bldemo[data-step="2"] .bldemo__phone, .bldemo[data-step="3"] .bldemo__phone { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .1); }
.bldemo:not([data-step="1"]) .gsf__caret { visibility: hidden; }
.bldemo__tag { max-height: 0; margin-top: -10px; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), margin .4s var(--ease), padding .4s var(--ease), opacity .3s; }
.bldemo[data-step="2"] .bldemo__tag, .bldemo[data-step="3"] .bldemo__tag { max-height: 90px; margin-top: 0; padding-top: 12px; padding-bottom: 12px; opacity: 1; }
.bldemo__save { display: grid; place-items: center; height: 44px; margin-top: 4px; border-radius: 10px; background: var(--brand); font-size: 14px; font-weight: 600; color: #fff; }
.bldialog { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; justify-items: center; gap: 8px; width: min(380px, calc(100% - 40px)); padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .28), 0 30px 70px rgba(15, 23, 42, .3); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(.97); transition: opacity .3s, transform .35s var(--ease); }
.bldemo[data-step="3"] .bldialog { opacity: 1; transform: translate(-50%, -50%); }
.bldialog__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FDECEC; color: #E5484D; }
.bldialog__ic .ic { width: 22px; height: 22px; }
.bldialog b { font-size: 18px; font-weight: 600; }
.bldialog p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.bldialog .gsblack__btns { width: 100%; }

/* shared base: list with reason tabs */
.bllist, .blrec, .blpriv { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px rgba(15, 23, 42, .06); }
.bllist__search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #E3E6EB; font-size: 14px; color: var(--text-muted); }
.bllist__search .ic { width: 16px; height: 16px; }
.bllist__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.bllist__tabs span { padding: 5px 10px; border-radius: 8px; background: var(--bg-surface-2); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.bllist__tabs .is-on { background: #1A1D23; color: #fff; }
.bllist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F1F3F6; }
.bllist__row b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.bllist__row small { display: block; font-size: 12px; color: var(--text-muted); }
.bllist__row em, .blrec__top em { padding: 4px 8px; border-radius: 7px; background: var(--bg-surface-2); font-size: 12px; font-style: normal; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.bllist__row em.is-debt, .blrec__top em.is-debt { background: #FDECEC; color: #A3343A; }
.bllist__row em.is-riot { background: #FFF1E0; color: #9A5B00; }
.bllist__row i { font-size: 12px; font-style: normal; color: var(--text-muted); text-align: right; }

/* record with facts */
.blrec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.blrec__head b { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.blrec__head span { font-size: 13px; color: var(--text-muted); }
.blrec__item { padding: 14px; border-radius: 14px; background: var(--bg-surface-2); }
.blrec__item + .blrec__item { margin-top: 10px; }
.blrec__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.blrec__top span { font-size: 12.5px; color: var(--text-muted); }
.blrec__top em { background: #fff; }
.blrec__item p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.blrec__sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E6E9EE; font-size: 16px; font-weight: 600; }
.blrec__sum small { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }

/* personal data */
.blpriv { display: grid; gap: 8px; }
.blpriv__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-surface-2); }
.blpriv__row small { font-size: 13px; color: var(--text-muted); }
.blpriv__row b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.blpriv__row .ic { width: 16px; height: 16px; color: var(--brand-hover); }

@media (max-width: 639px) {
  .bldemo { min-height: 470px; padding: 16px; border-radius: 18px; }
  .bllist, .blrec, .blpriv { padding: 16px; }
  .bllist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .bllist__row em { grid-row: 2; grid-column: 1; justify-self: start; }
  .bllist__row i { grid-row: 1 / 3; grid-column: 2; }
  .blpriv__row { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.cblock__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--brand-hover); }
.cblock__more .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.cblock__more:hover .ic { transform: translateX(3px); }

/* ---------- Notifications page (.nt* prefix) ---------- */
/* hero: lock screen, pushes slide in from the top one by one (landing.js) */
.ntdemo { display: grid; place-items: center; max-width: 1080px; margin: 0 auto; padding: 40px 24px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, #E3F2EC 0%, #F4F6F9 60%); }
.ntphone { width: 320px; height: 600px; padding: 10px; border-radius: 48px; background: #171A20; box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 40px 80px rgba(15, 23, 42, .22); }
.ntphone__screen { position: relative; height: 100%; overflow: hidden; padding: 56px 12px 16px; border-radius: 39px; background: linear-gradient(170deg, #2C5B4C 0%, #1E3E5A 55%, #2B2F48 100%); color: #fff; }
.ntphone__time { margin: 0; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.03em; text-align: center; }
.ntphone__date { margin: 6px 0 22px; font-size: 14px; font-weight: 500; text-align: center; color: rgba(255, 255, 255, .8); }
.ntstack { display: grid; gap: 8px; }
.ntpush { display: flex; gap: 10px; padding: 11px 12px; border-radius: 18px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); color: #15181E; animation: ntIn .55s var(--ease) both; }
.ntpush.is-old { animation: none; }
.ntpush__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; }
.ntpush__ic img { width: 22px; height: 22px; }
.ntpush small { display: block; font-size: 11px; color: #6B7280; }
.ntpush b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ntpush em { display: block; font-size: 12.5px; font-style: normal; line-height: 1.35; color: #3F4652; }
.ntpush--urgent b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #E5484D; vertical-align: 2px; }
@keyframes ntIn { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }

/* web bell feed */
.ntbell, .ntset, .ntrole, .nttg { border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px rgba(15, 23, 42, .06); }
.ntbell { padding: 18px 20px 12px; }
.ntbell__head { display: flex; align-items: baseline; justify-content: space-between; }
.ntbell__head b { font-size: 16px; font-weight: 600; }
.ntbell__head span { font-size: 13px; font-weight: 500; color: var(--brand-hover); }
.ntbell__tabs { display: flex; gap: 6px; margin: 12px 0 4px; }
.ntbell__tabs span { padding: 5px 10px; border-radius: 8px; background: var(--bg-surface-2); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.ntbell__tabs .is-on { background: #1A1D23; color: #fff; }
.ntbell__day { margin: 12px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ntbell__row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F1F3F6; }
.ntbell__row i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: var(--f); }
.ntbell__row i .ic { width: 16px; height: 16px; }
.ntbell__row b { display: block; font-size: 14px; font-weight: 600; }
.ntbell__row small { display: block; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--text-muted); }
.ntbell__row em { font-size: 12px; font-style: normal; color: var(--text-muted); }
.ntbell__row.is-new em::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--brand); vertical-align: 1px; }

/* roles */
.ntroles { display: grid; gap: 10px; }
.ntrole { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; }
.ntrole b { display: block; font-size: 15px; font-weight: 600; }
.ntrole small { display: block; font-size: 12.5px; color: var(--text-muted); }
.ntrole em { padding: 5px 10px; border-radius: 8px; background: var(--bg-surface-2); font-size: 12.5px; font-style: normal; font-weight: 500; white-space: nowrap; }

/* settings */
.ntset { padding: 18px 20px; }
.ntset__title { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; }
.ntset__row, .ntset__quiet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #F1F3F6; font-size: 14px; }
.ntset__row i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #D5DAE1; }
.ntset__row i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ntset__row i.is-on { background: var(--brand); }
.ntset__row i.is-on::after { left: 19px; }
.ntset__quiet { margin: 4px 0; padding: 12px 14px; border: 0; border-radius: 12px; background: #EEF1FA; }
.ntset__quiet b { display: block; font-size: 14px; font-weight: 600; }
.ntset__quiet small { display: block; font-size: 12px; color: var(--text-muted); }
.ntset__quiet strong { font-size: 15px; font-weight: 600; }
.ntset__row--accent span { font-weight: 600; }

/* telegram */
.nttg { overflow: hidden; }
.nttg__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.nttg__bar img { width: 32px; height: 32px; border-radius: 50%; }
.nttg__bar b { display: block; font-size: 14.5px; font-weight: 600; }
.nttg__bar small { display: block; font-size: 12px; color: var(--text-muted); }
.nttg__chat { display: grid; gap: 10px; padding: 16px; background: #E4ECF2; }
.nttg__msg { position: relative; max-width: 330px; padding: 10px 12px 22px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: 13.5px; line-height: 1.5; box-shadow: 0 1px 1px rgba(15, 23, 42, .08); }
.nttg__msg b { display: block; margin-bottom: 2px; font-weight: 600; }
.nttg__msg span { display: block; margin-top: 4px; color: #2A7DC4; }
.nttg__msg small { position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: var(--text-muted); }

@media (max-width: 639px) {
  .ntdemo { padding: 24px 12px; border-radius: 18px; }
  .ntphone { width: 290px; height: 560px; }
  .ntphone__time { font-size: 56px; }
  .ntbell { padding: 14px 16px 8px; }
  .ntrole { grid-template-columns: 40px minmax(0, 1fr); }
  .ntrole em { grid-column: 2; justify-self: start; }
}

/* ---------- Cleaning page (.cl* prefix; reuses .ntphone, .ntpush__ic, .gsblack__btns) ---------- */
.clst { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 7px; background: var(--bg-surface-2); font-size: 12px; font-style: normal; font-weight: 600; color: var(--text-secondary); white-space: nowrap; transition: background-color .3s, color .3s; }
.clst--ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.clst--work { background: #E6EEFF; color: #1D4FB8; }
.clst--review { background: #EEE8FD; color: #5B3FC4; }
.clst--urgent { background: #FFF1E0; color: #9A5B00; }
.clst--alert { background: #FDECEC; color: #A3343A; }

/* hero: housekeeper phone + owner toast */
.cldemo { position: relative; display: grid; place-items: center; max-width: 1080px; margin: 0 auto; padding: 40px 24px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, #EEE8FD 0%, #F4F6F9 60%); }
.clphone__screen { height: 100%; overflow: hidden; padding: 40px 12px 16px; border-radius: 39px; background: #F4F6F9; }
.clphone__top { display: flex; align-items: baseline; justify-content: space-between; margin: 0 6px 12px; }
.clphone__top b { font-size: 20px; font-weight: 600; }
.clphone__top span { font-size: 12.5px; color: var(--text-muted); }
.cltask { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.cltask--next { margin-top: 10px; opacity: .6; }
.cltask__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cltask__head b { display: block; font-size: 15px; font-weight: 600; }
.cltask__head small { display: block; font-size: 12px; color: var(--text-muted); }
.cltask__times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cltask__times span { padding: 8px 10px; border-radius: 10px; background: var(--bg-surface-2); font-size: 15px; font-weight: 600; }
.cltask__times small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.clurgent { justify-self: start; padding: 4px 8px; border-radius: 7px; background: #FFF1E0; font-size: 12px; font-weight: 600; color: #9A5B00; }
.cltask__access { padding: 9px 10px; border-radius: 10px; background: #F7F4FE; font-size: 12.5px; color: #4A3A86; }
.cltask__access small { display: block; font-size: 10.5px; font-weight: 600; color: #7C5CE0; }
.clphotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.clphotos i { aspect-ratio: 1; border-radius: 9px; border: 1.5px dashed #D5DAE1; background: no-repeat center / cover; transition: border-color .3s; }
.cltask__btn { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--brand); font-size: 14.5px; font-weight: 600; color: #fff; transition: background-color .3s; }
.cldemo[data-step="1"] .cltask__btn, .cldemo[data-step="2"] .cltask__btn { background: #1D4FB8; }
.cldemo[data-step="4"] .cltask__btn { background: #5B3FC4; }
.cltoast { position: absolute; right: max(24px, calc(50% - 400px)); top: 50%; display: flex; gap: 10px; width: 280px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(15, 23, 42, .16); opacity: 0; transform: translate(12px, -50%); transition: opacity .4s, transform .45s var(--ease); }
.cltoast small { display: block; font-size: 11px; color: var(--text-muted); }
.cltoast b { display: block; font-size: 14px; font-weight: 600; }
.cltoast em { display: block; font-size: 12.5px; font-style: normal; color: var(--text-secondary); }
.cldemo[data-step="4"] .cltoast { opacity: 1; transform: translate(0, -50%); }

/* plan */
.clplan, .clreport, .clcheck { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px rgba(15, 23, 42, .06); }
.clplan__head, .clreport__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.clplan__head b, .clreport__head b { font-size: 16px; font-weight: 600; }
.clplan__head span, .clreport__head span { font-size: 13px; color: var(--text-muted); }
.clplan__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.clplan__sum span { padding: 10px 12px; border-radius: 12px; background: var(--bg-surface-2); font-size: 12.5px; color: var(--text-muted); }
.clplan__sum b { display: block; font-size: 20px; font-weight: 600; color: var(--text-primary); }
.clplan__row { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-top: 1px solid #F1F3F6; }
.clplan__row > span { flex: 1; min-width: 0; }
.clplan__row b { display: block; font-size: 14px; font-weight: 600; }
.clplan__row small { display: block; font-size: 12.5px; color: var(--text-muted); }

/* housekeeper task details in the phone */
.clinfo { padding: 12px; border-radius: 16px; background: #fff; }
.clinfo + .clinfo { margin-top: 10px; }
.clinfo__label { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.clinfo__row { padding: 6px 0; font-size: 13.5px; font-weight: 500; }
.clinfo__row small, .clinfo__grid small, .clswap small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.clinfo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0; }
.clinfo__grid span { padding: 8px; border-radius: 10px; background: var(--bg-surface-2); font-size: 14px; font-weight: 600; }
.clswap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.clswap span { padding: 8px 10px; border-radius: 10px; background: var(--bg-surface-2); font-size: 12px; color: var(--text-secondary); }
.clswap b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.cphone .cltask__btn { margin-top: 10px; }

/* report */
.clreport__photos { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 8px; margin: 14px 0 8px; }
.clreport__photos i { aspect-ratio: 1; border-radius: 10px; background: url(/site-assets/booking-site-room.webp) no-repeat var(--p) 50% / auto 100%; }
.clreport__photos span { font-size: 12.5px; color: var(--text-muted); }
.clreport__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #F1F3F6; }
.clreport__row small { font-size: 13.5px; color: var(--text-secondary); }
.clstars { font-size: 17px; letter-spacing: 2px; color: #F5B400; }
.clstars i { font-style: normal; color: #D5DAE1; }
.clchips { display: flex; gap: 6px; }
.clchips em { padding: 4px 8px; border-radius: 7px; background: var(--bg-surface-2); font-size: 12px; font-style: normal; font-weight: 500; }
.clreport__note { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-surface-2); font-size: 13.5px; line-height: 1.5; }

/* approval */
.clcheck__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.clcheck__head b { display: block; font-size: 16px; font-weight: 600; }
.clcheck__head small { display: block; font-size: 12.5px; color: var(--text-muted); }
.clcheck .clreport__photos { grid-template-columns: repeat(4, 1fr); }
.clrules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 14px; }
.clrules span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--bg-surface-2); font-size: 12.5px; font-weight: 500; }
.clrules .ic { flex: none; width: 14px; height: 14px; stroke-width: 2.6; color: var(--brand-hover); }

@media (max-width: 900px) {
  .cltoast { position: static; width: 100%; max-width: 320px; margin-top: 16px; transform: none; opacity: .35; }
  .cldemo[data-step="4"] .cltoast { transform: none; }
}
@media (max-width: 639px) {
  .cldemo { padding: 24px 12px; border-radius: 18px; }
  .clplan, .clreport, .clcheck { padding: 16px; }
  .clplan__row { flex-wrap: wrap; }
  .clplan__row > span { flex-basis: 100%; }
  .clrules { grid-template-columns: 1fr; }
}

/* ---------- Staff page (.sf* prefix) ---------- */
.sfdemo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; padding: 28px; border-radius: 24px; background: var(--bg-surface-2); }
.sflist, .sfcard, .sfrole, .sfobj, .sfact, .sfoffcard { border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px rgba(15, 23, 42, .06); }
.sflist { align-self: start; padding: 16px; }
.sflist__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sflist__head b { font-size: 16px; font-weight: 600; }
.sfadd { padding: 5px 9px; border-radius: 8px; background: var(--st-ok-bg); font-size: 11.5px; font-weight: 600; color: var(--st-ok-fg); }
.sflist__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px; border-radius: 12px; }
.sflist__row.is-on { background: #F2F7F5; }
.sflist__row .gscard__ava, .sfcard__top .gscard__ava { width: 38px; height: 38px; font-size: 12.5px; }
.sflist__row b, .sfcard__top b, .sfrole b, .sfobj__row b, .sfact__row b { display: block; font-size: 14px; font-weight: 600; }
.sflist__row small, .sfcard__top small, .sfrole small, .sfobj__row small, .sfact__row small { display: block; font-size: 12.5px; color: var(--text-muted); }
.sfdot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.sfoff { padding: 3px 7px; border-radius: 6px; background: var(--bg-surface-2); font-size: 11px; font-style: normal; font-weight: 600; color: var(--text-muted); }
.sfcard { padding: 18px 20px; }
.sfcard__top { display: flex; align-items: center; gap: 12px; }
.sfcard__top .sfoff { margin-left: auto; }
.sftabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 6px; }
.sftabs span { padding: 6px 10px; border-radius: 8px; background: var(--bg-surface-2); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.sftabs .is-on { background: #1A1D23; color: #fff; }
.sfcard__label { margin: 12px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sfsw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #F1F3F6; font-size: 14px; }
.sfsw i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #D5DAE1; transition: background-color .3s; }
.sfsw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .3s var(--ease); }
.sfsw i.is-on { background: var(--brand); }
.sfsw i.is-on::after { left: 19px; }
.sfsw i.is-fixed { opacity: .55; }
.sfsaved { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 9px; border-radius: 8px; background: var(--st-ok-bg); font-size: 12px; font-weight: 600; color: var(--st-ok-fg); opacity: 0; transition: opacity .3s; }
.sfsaved .ic { width: 13px; height: 13px; stroke-width: 2.8; }
.sfdemo.is-saved .sfsaved { opacity: 1; }

.sfroles { display: grid; gap: 10px; }
.sfrole { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; }
.sfrole b { font-size: 15px; }

.sfobj, .sfact { padding: 18px 20px 10px; }
.sfobj__head, .sfact__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sfobj__head b, .sfact__head b { display: block; font-size: 16px; font-weight: 600; }
.sfobj__head span { font-size: 13px; color: var(--text-muted); }
.sfact__head small { display: block; font-size: 12.5px; color: var(--text-muted); }
.sfobj__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F1F3F6; }
.sfobj__row i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #D5DAE1; color: #fff; }
.sfobj__row.is-on i { border-color: var(--brand); background: var(--brand); }
.sfobj__row i .ic { width: 13px; height: 13px; stroke-width: 3; }
.sfobj__row:not(.is-on) b { color: var(--text-secondary); }
.sfact__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #F1F3F6; }
.sfact__row em { font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--text-muted); }

.sfoffcard { display: grid; gap: 14px; width: 100%; max-width: 460px; justify-self: center; padding: 20px; }
.sfoffcard__msg { display: flex; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-surface-2); font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.sfoffcard__msg .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--text-muted); }

@media (max-width: 900px) {
  .sfdemo { grid-template-columns: minmax(0, 1fr); padding: 16px; }
}
@media (max-width: 639px) {
  .sfdemo { border-radius: 18px; }
  .sflist, .sfcard, .sfobj, .sfact, .sfoffcard { padding: 14px 16px; }
}

/* ---------- Mobile app page (.mx* prefix; reuses .cphone, .cmcal, .cltask, .clreport, .ntpush) ---------- */
.mxhero__store { display: flex; justify-content: center; margin-top: 28px; }
.mxphones { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px 0 8px; }
.mxphone--side { transform: scale(.9); opacity: .96; }
.mxphones .cphone { animation: mxFloat 6s ease-in-out infinite; }
.mxphone--side:first-child .cphone { animation-delay: -2s; }
.mxphone--side:last-child .cphone { animation-delay: -4s; }
@keyframes mxFloat { 50% { translate: 0 -10px; } }
.mxkpi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mxkpi span { padding: 10px; border-radius: 12px; background: #fff; font-size: 11.5px; color: var(--text-muted); }
.mxkpi b { display: block; font-size: 20px; font-weight: 600; color: var(--text-primary); }
.mxlabel { margin: 14px 6px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mxrow { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; }
.mxrow + .mxrow { margin-top: 6px; }
.mxrow > i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--c); }
.mxrow > span { flex: 1; min-width: 0; }
.mxrow b { display: block; font-size: 13.5px; font-weight: 600; }
.mxrow small { display: block; font-size: 11.5px; color: var(--text-muted); }
.mxrow .clst { font-size: 10.5px; padding: 3px 6px; }
.mxphotos { margin: 0; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.mxbook { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; }
.mxbook .gscard__top b { font-size: 15px; }
.mxbook .gscard__ava { width: 40px; height: 40px; font-size: 13px; }
.mxbook__rows div { padding: 8px 0; border-top: 1px solid #F1F3F6; font-size: 13.5px; font-weight: 500; }
.mxbook__rows small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.mxmoney { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mxmoney span { padding: 8px; border-radius: 10px; background: var(--bg-surface-2); font-size: 13px; font-weight: 600; }
.mxmoney small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }

.mxreport { width: 100%; max-width: 460px; justify-self: center; }
.mxreport .cltask__btn { margin-top: 12px; }
.mxpush { display: grid; gap: 10px; width: 100%; max-width: 440px; justify-self: center; padding: 28px 22px; border-radius: 24px; background: linear-gradient(170deg, #2C5B4C 0%, #1E3E5A 55%, #2B2F48 100%); }

.mxdl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 48px 56px; border-radius: 24px; background: var(--bg-surface-2); }
.mxdl .store { margin-top: 24px; }
.mxdl__qr { display: grid; justify-items: center; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(15, 23, 42, .08); }
.mxdl__qr img { display: block; width: 160px; height: 160px; }
.mxdl__qr small { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .mxphone--side { display: none; }
}
@media (max-width: 639px) {
  .mxdl { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; }
  .mxdl__qr { display: none; }
  .mxpush { padding: 18px 12px; }
}

/* ---------- Finance, reports and prepayment pages (.lc* shared cards, .fn*, .rp*, .py*) ---------- */
.lcard { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px rgba(15, 23, 42, .06); }
.lcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lcard__head b { display: block; font-size: 16px; font-weight: 600; }
.lcard__head small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.lcard__head strong { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.lcrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #F1F3F6; }
.lcrow b { display: block; font-size: 14px; font-weight: 600; }
.lcrow small { display: block; font-size: 12.5px; color: var(--text-muted); }
.lcrow strong { font-size: 15px; font-weight: 600; white-space: nowrap; }
.lcrow--total { border-top: 1.5px solid #E3E6EB; }
.lcrow--total strong { font-size: 18px; color: var(--brand-hover); }
.is-down { color: #C2410C; }
.lcnote { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--st-ok-bg); font-size: 13px; font-weight: 500; color: var(--st-ok-fg); }
.lcnote .ic { flex: none; width: 16px; height: 16px; }
.lcfilters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.lcfilters span { padding: 8px 10px; border-radius: 10px; border: 1px solid #E3E6EB; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcfilters small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.lcbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 84px; align-items: center; gap: 12px; padding: 9px 0; font-size: 13.5px; }
.lcbar span { color: var(--text-secondary); }
.lcbar i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--c) var(--w), var(--bg-surface-2) var(--w)); }
.lcbar b { font-weight: 600; text-align: right; }
.lcsum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.lcsum span { padding: 10px 12px; border-radius: 12px; background: var(--bg-surface-2); font-size: 18px; font-weight: 600; }
.lcsum small { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.lcgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #F1F3F6; font-size: 13.5px; }
.lcgrid > * { min-width: 0; }
.lcgrid b { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lcgrid span, .lcgrid strong { text-align: right; white-space: nowrap; }
.lcgrid strong { font-weight: 600; }
.lcgrid .is-up { color: var(--brand-hover); }
.lcgrid--head { padding-top: 0; border-top: 0; font-size: 12px; color: var(--text-muted); }
.lcgrid--head span:first-child { text-align: left; }
.lcgrid--total { border-top: 1.5px solid #E3E6EB; }

/* finance hero: journal */
.fndemo { max-width: 860px; margin: 0 auto; padding: 28px; border-radius: 24px; background: var(--bg-surface-2); }
.fnjournal .lcard__head strong { transition: color .3s; }
.fndemo.is-bump .fnjournal .lcard__head strong { color: var(--brand-hover); }
.fncats { display: flex; gap: 4px; margin: 6px 0 4px; }
.fncats span { flex: 0 0 var(--w); min-width: 0; padding: 10px 10px 8px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); border-top: 3px solid var(--c); transition: flex-basis .6s var(--ease); overflow: hidden; }
.fncats small { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fncats b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.fntable { margin-top: 12px; }
.fntable__head, .fnrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.1fr) 104px; align-items: center; gap: 10px; }
.fntable__head { padding: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.fntable__head span:last-child { text-align: right; }
.fnrow { position: relative; padding: 11px 0; border-top: 1px solid #F1F3F6; font-size: 13.5px; }
.fnrow span:first-child { color: var(--text-muted); }
.fnrow span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fnrow i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--c); }
.fnrow b { font-weight: 600; text-align: right; }
.fnrow em { position: absolute; right: 112px; padding: 2px 6px; border-radius: 6px; background: var(--bg-surface-2); font-size: 11px; font-style: normal; color: var(--text-muted); }
.fnrow.is-new { animation: fnIn .6s var(--ease) both; background: linear-gradient(90deg, rgba(18, 161, 122, .08), transparent 70%); }
@keyframes fnIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* reports hero: dashboard */
.rpdemo { max-width: 1000px; margin: 0 auto; padding: 28px; border-radius: 24px; background: var(--bg-surface-2); }
.rpdash__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; }
.rpdash__top > b { font-size: 18px; font-weight: 600; }
.rptabs, .rpperiod { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg-surface-2); }
.rptabs span, .rpperiod span { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); transition: background-color .3s, color .3s; }
.rptabs span:first-child, .rpperiod .is-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.rpperiod { margin-left: auto; }
.rpkpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rpkpi span { position: relative; padding: 14px; border-radius: 14px; background: var(--bg-surface-2); }
.rpkpi small { display: block; font-size: 12px; color: var(--text-muted); }
.rpkpi b { display: block; margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.rpkpi em { position: absolute; right: 12px; top: 12px; padding: 2px 6px; border-radius: 6px; background: var(--st-ok-bg); font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--st-ok-fg); }
.rpchart { margin-top: 16px; }
.rpchart__title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rpchart__plot { position: relative; height: 180px; border-bottom: 1px solid #E3E6EB; background-image: linear-gradient(#F1F3F6 1px, transparent 1px); background-size: 100% 45px; }
.rpbars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 6px; padding: 0 4px; }
.rpbars i { flex: 1; height: var(--h, 10%); border-radius: 6px 6px 2px 2px; background: #BFE6D5; transition: height .7s var(--ease); }
.rpline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rpline path { fill: none; stroke: #1D4FB8; stroke-width: 2; vector-effect: non-scaling-stroke; transition: d .7s var(--ease); }

.rpsrc { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 28px; }
.rpdonut { display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(#12A17A 0 46%, #3B82F6 46% 74%, #F59E0B 74% 88%, #8B5CF6 88% 100%); }
.rpdonut span { display: grid; place-content: center; justify-items: center; gap: 4px; width: 116px; height: 116px; border-radius: 50%; background: #fff; text-align: center; }
.rpdonut b { display: block; font-size: 28px; font-weight: 600; line-height: 1; }
.rpdonut small { display: block; font-size: 12px; color: var(--text-muted); }
.rplegend { display: grid; gap: 10px; }
.rplegend span { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rplegend i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.rplegend b { margin-left: auto; font-weight: 600; }
/* sublet economics: nights of the month fill in, the first 14 cover the rent, the rest is margin */
.rpsub__kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 16px; }
.rpsub__kpi span { padding: 12px 14px; border-radius: 12px; background: var(--bg-surface-2); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.rpsub__kpi small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-muted); }
.rpsub__kpi .is-up { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.rpsub__kpi .is-up small { color: var(--st-ok-fg); opacity: .8; }
.rpnights__cells { position: relative; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; padding-top: 26px; }
.rpnights__cells i { height: 30px; border-radius: 4px; background: var(--bg-surface-2); transition: background-color .3s calc(var(--i) * 55ms); }
.rpsub.is-visible .rpnights__cells i.is-rent { background: #F5B971; }
.rpsub.is-visible .rpnights__cells i.is-margin { background: var(--brand); }
.rpnights__mark { position: absolute; top: 0; left: calc(14 / 31 * 100%); padding: 3px 8px; border-radius: 7px; background: #1A1D23; font-size: 11.5px; font-style: normal; font-weight: 600; color: #fff; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .4s calc(15 * 55ms); }
.rpnights__mark::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: #1A1D23; transform: translateX(-50%) rotate(45deg); }
.rpsub.is-visible .rpnights__mark { opacity: 1; }
.rpnights__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.rpnights__legend span { display: inline-flex; align-items: center; gap: 6px; }
.rpnights__legend i { position: relative; top: -1px; width: 12px; height: 12px; border-radius: 3px; background: var(--bg-surface-2); }
.rpnights__legend i.is-rent { background: #F5B971; }
.rpnights__legend i.is-margin { background: var(--brand); }
@media (max-width: 639px) {
  .rpsub__kpi span { font-size: 16px; }
  .rpnights__cells { gap: 2px; }
  .rpnights__cells i { height: 24px; border-radius: 3px; }
}
.rpmini { display: inline-block; width: 40px; height: 6px; margin-right: 6px; border-radius: 3px; vertical-align: 2px; background: linear-gradient(90deg, var(--brand) var(--w), var(--bg-surface-2) var(--w)); }

/* prepayments */
.pydemo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 20px; max-width: 1080px; margin: 0 auto; padding: 28px; border-radius: 24px; background: var(--bg-surface-2); }
.pygrid__days, .pygrid__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.pygrid__days { grid-template-columns: 120px repeat(7, minmax(0, 1fr)); padding-bottom: 8px; border-bottom: 1px solid #F1F3F6; font-size: 12px; font-weight: 500; text-align: center; color: var(--text-muted); }
.pygrid__row { align-items: center; height: 54px; border-bottom: 1px solid #F1F3F6; }
.pygrid__row:last-child { border-bottom: 0; }
.pygrid__row > span { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.pygrid__row > div { position: relative; height: 100%; background-image: linear-gradient(90deg, #F1F3F6 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.pybar { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; transition: background-color .45s, color .45s; }
.pygrid .pybar { position: absolute; top: 11px; left: calc(var(--s) * 100% / 7 + 2px); width: calc(var(--n) * 100% / 7 - 4px); }
.pybar em { font-style: normal; }
.pybar--soft { background: #FFE9A6; color: #7A5600; }
.pybar--paid { background: #FFD3A1; color: #8A4B00; }
.pybar--in { background: #BFE6D5; color: #0B4A39; }
.pybar--block { background: #E6E9EE; color: #5B6472; }
.pydemo[data-step="0"] .pybar--main { background: #FFE9A6; color: #7A5600; }
.pydemo[data-step="1"] .pybar--main { background: #FFD3A1; color: #8A4B00; }
.pydemo[data-step="2"] .pybar--main { background: #BFE6D5; color: #0B4A39; }
.pystatus { padding: 4px 9px; border-radius: 8px; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; transition: background-color .45s, color .45s; }
.pydemo[data-step="0"] .pystatus { background: #FFF4D6; color: #7A5600; }
.pydemo[data-step="1"] .pystatus { background: #FFE7CC; color: #8A4B00; }
.pydemo[data-step="2"] .pystatus { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.pymoney { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.pymoney span { padding: 10px; border-radius: 12px; background: var(--bg-surface-2); font-size: 15px; font-weight: 600; }
.pymoney small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pyprogress { height: 8px; margin-top: 10px; border-radius: 4px; background: var(--bg-surface-2); overflow: hidden; }
.pyprogress i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--brand); transition: width .7s var(--ease); }
.pyprogress__cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.pyprogress__cap b { font-weight: 600; color: var(--text-primary); }
.pylegend { display: grid; gap: 10px; }
.pylegend__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 14px; font-size: 14px; color: var(--text-secondary); }
.pylegend__row .pybar { justify-content: center; }
.pylogo { width: 32px; height: 32px; border-radius: 8px; }

@media (max-width: 900px) {
  .pydemo { grid-template-columns: minmax(0, 1fr); }
  .rpkpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .fndemo, .rpdemo, .pydemo { padding: 14px; border-radius: 18px; }
  .lcard { padding: 16px; }
  .fncats { flex-wrap: wrap; }
  .fncats span { flex: 1 1 45%; }
  .fntable__head, .fnrow { grid-template-columns: 52px minmax(0, 1fr) 84px; }
  .fntable__head span:nth-child(3), .fnrow span:nth-child(3), .fnrow em { display: none; }
  .lcfilters { grid-template-columns: 1fr 1fr; }
  .lcfilters span:last-child { grid-column: 1 / -1; }
  .lcbar { grid-template-columns: 96px minmax(0, 1fr) 76px; gap: 8px; font-size: 12.5px; }
  .lcgrid { grid-template-columns: minmax(0, 1fr) repeat(2, auto); font-size: 12.5px; }
  .lcgrid > :nth-child(3) { display: none; }
  .rpdash__top { gap: 8px; }
  .rptabs { display: none; }
  .rpperiod { margin-left: 0; }
  .rpkpi b { font-size: 18px; }
  .rpchart__plot { height: 140px; }
  .rpsrc { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rplegend { width: 100%; }
  .pygrid__days, .pygrid__row { grid-template-columns: 76px minmax(0, 1fr); }
  .pygrid__days { grid-template-columns: 76px repeat(7, minmax(0, 1fr)); }
  .pybar { padding: 0 6px; font-size: 11px; }
  .pylegend__row { grid-template-columns: 112px minmax(0, 1fr); font-size: 13px; }
}

/* ---------- Solutions pages (.so* prefix) ---------- */
.dcard { position: relative; }
.dcard__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.sohero { position: relative; display: grid; place-items: center; max-width: 900px; margin: 0 auto; padding: 32px 24px; border-radius: 24px; background: radial-gradient(110% 90% at 50% 10%, #EEF6F2 0%, #F4F6F9 65%); }
.sohero__img { display: block; width: min(440px, 100%); height: auto; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); }
.sohero__chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px rgba(15, 23, 42, .1); animation: soFloat 6s ease-in-out var(--d) infinite; }
.sohero__chip > i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--c); }
.sohero__chip b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sohero__chip small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.sohero__chip--0 { left: 4%; top: 16%; }
.sohero__chip--1 { right: 4%; top: 42%; }
.sohero__chip--2 { left: 8%; bottom: 12%; }
@keyframes soFloat { 50% { translate: 0 -8px; } }
.sodash { max-width: 980px; margin: 0 auto; padding: 28px; border-radius: 24px; background: var(--bg-surface-2); }
.sofeed { margin-top: 14px; }
.sogroup { padding: 10px 0 8px; border-bottom: 1px solid #F1F3F6; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.sopage .lcrow em { font-size: 12px; font-style: normal; color: var(--text-muted); }
@media (max-width: 639px) {
  .sohero { gap: 8px; padding: 20px 14px; border-radius: 18px; }
  .sohero__chip { position: static; width: 100%; animation: none; }
  .sodash { padding: 14px; border-radius: 18px; }
}

/* ---------- API page: request/response lines appear one by one ---------- */
.apcode { overflow: hidden; border-radius: 18px; background: #14171C; box-shadow: 0 24px 56px rgba(15, 23, 42, .18); }
.apcode__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid #262B33; }
.apcode__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3F48; }
.apcode__bar span { margin-left: 8px; font-size: 12.5px; color: #9AA3AF; }
.apcode pre { margin: 0; padding: 18px 18px 22px; overflow-x: auto; font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #C9CED6; }
.apl { display: block; min-height: 1.8em; white-space: pre; animation: apIn .35s ease var(--d) both; }
@keyframes apIn { from { opacity: 0; transform: translateY(4px); } }
.apl .m { font-style: normal; color: #FDD663; }
.apl .ok { font-style: normal; color: #81C995; }
@media (max-width: 639px) {
  .apcode pre { padding: 14px; font-size: 11.5px; }
}