/* ==========================================================================
   YouSlotz — site styles
   ========================================================================== */

:root {
  --bg: #F8F1EF;
  --surface: #FFFFFF;
  --ink: #1D1820;
  --muted: #4F4650;
  --muted-2: #5E5560;
  --line: #EADFDC;
  --line-2: #F1E8E6;
  --field: #DCCBC7;

  --coral: #D13B22;
  --coral-text: #B3321C;
  --coral-dark: #8E2614;
  --coral-tint: #FBE7E2;

  --plum: #6E2A45;
  --plum-tint: #F3E4EA;

  --night: #24141C;
  --night-2: #3A2530;
  --night-3: #2E1A24;
  --night-line: #47303A;
  --night-text: #D9C8CE;
  --peach: #FFB4A3;

  --green: #1F7A4D;
  --green-tint: #E3F1EA;
  --amber: #8A4B00;
  --amber-tint: #FFF1DC;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 30px 60px -35px rgba(60, 20, 30, 0.45);

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--coral-text); }
a:hover { color: var(--coral-dark); }
/* No browser focus ring on links, buttons or panels. Form fields keep their
   coral border and glow (input:focus below). */
:focus, :focus-visible { outline: none; }

h1, h2, h3 { margin: 0; letter-spacing: -0.035em; line-height: 1.05; font-weight: 800; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
h3 { font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; font-weight: 700; }
p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--night); color: #fff; padding: 12px 16px; border-radius: 10px; font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 900px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 700 16px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--coral); color: #fff; }
.btn--primary:hover { background: #B9321B; color: #fff; }
.btn--dark { background: var(--night); color: #fff; }
.btn--dark:hover { background: #3A2230; color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border-color: var(--field); }
.btn--light:hover { color: var(--ink); border-color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { background: var(--line); color: #6B6170; cursor: not-allowed; transform: none; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 15px; }

.link-arrow { font-weight: 700; text-decoration: none; padding: 12px 0; display: inline-block; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Announcement + header ---------- */
.announce {
  background: var(--night); color: #F6E9EC; text-align: center;
  padding: 10px 16px; font-size: 14px; line-height: 1.5;
}
.announce a { color: var(--peach); font-weight: 700; }
.announce .tag {
  display: inline-block; background: var(--coral); color: #fff; font-weight: 700; font-size: 12px;
  padding: 2px 9px; border-radius: 999px; margin-right: 8px;
}

.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__name { font-weight: 800; font-size: 23px; letter-spacing: -0.03em; }
.brand svg { width: 36px; height: auto; }

.nav__links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: inline-block; padding: 12px 0; text-decoration: none; color: var(--muted);
  font-weight: 500; font-size: 15px; border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__login { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 10px; }
.nav__login:hover { color: var(--coral-text); }

.nav__toggle {
  display: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--field);
  background: #fff; color: var(--ink); align-items: center; justify-content: center; cursor: pointer;
}

@media (max-width: 1020px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 24px 24px;
    box-shadow: 0 20px 30px -20px rgba(60, 20, 30, .3);
  }
  .nav__menu.is-open { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 17px; }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--line-2); color: var(--coral-text); }
  .nav__actions { margin-top: 16px; }
  .nav__actions .btn { flex: 1; }
}
@media (min-width: 1021px) {
  .nav__menu { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: space-between; margin-left: 32px; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb { padding-top: 28px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 14px; color: var(--muted-2); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #A99CA3; }
.breadcrumb a { color: var(--muted-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--coral-text); text-decoration: underline; }

/* ---------- Generic sections ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 48px 0; }
.section--white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--dark { background: var(--night); color: #F6E9EC; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark p { color: var(--night-text); }

.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--coral-text);
}
.section--dark .eyebrow { color: var(--peach); }
.lead { font-size: 19px; line-height: 1.6; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--lg { gap: 24px; }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 44px; }
.section-head > :first-child { flex: 1 1 520px; min-width: 0; }
.section-head .lead { flex: 1 1 320px; max-width: 420px; font-size: 17px; }

.page-hero { padding: 72px 0 64px; text-align: center; }
.page-hero .container { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.page-hero .lead { max-width: 640px; }
.page-hero .btn-row { justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.split > * { flex: 1 1 440px; min-width: 0; }
.split--reverse { flex-wrap: wrap-reverse; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { flex: 0 0 auto; margin-top: 2px; color: var(--coral-text); }
.check-list--plum svg { color: var(--plum); }
.section--dark .check-list li { color: #F6E9EC; }
.section--dark .check-list svg { color: var(--peach); }

.trust-row { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: var(--muted-2); list-style: none; margin: 0; padding: 0; }
.trust-row li { display: flex; align-items: center; gap: 6px; }
.trust-row svg { color: var(--coral-text); }

/* ---------- Cards ---------- */
.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card {
  flex: 1 1 300px; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 14px;
}
.card p { color: var(--muted); font-size: 16px; }
.card--wide { flex: 2 1 560px; }
.card--full { flex: 1 1 100%; }
.card--dark { background: var(--night); border-color: var(--night); color: #F6E9EC; }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--night-text); }
.card--coral { background: var(--coral); border-color: var(--coral); color: #fff; }
.card--coral p { color: #fff; }
.card--tint { background: var(--coral-tint); border-color: var(--coral-tint); }
.card--outline-dark { background: transparent; border-color: var(--night-line); }
/* Text on the dark outline cards (How it works > For your customers): the dark sections' light text, not .card p's grey. */
.card--outline-dark p { color: var(--night-text); }
.card__foot { margin-top: auto; padding-top: 6px; }
.card a.card__link { margin-top: auto; }

.icon-tile {
  width: 48px; height: 48px; border-radius: 14px; background: var(--coral-tint); color: var(--coral-text);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.icon-tile--plum { background: var(--plum-tint); color: var(--plum); }
.icon-tile--night { background: var(--night-2); color: var(--peach); }
.icon-tile--lg { width: 52px; height: 52px; border-radius: 16px; }

.step-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--coral-text); }
.card--coral .step-num { color: #fff; }
.step-dot {
  width: 40px; height: 40px; border-radius: 999px; background: var(--coral); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips a, .chips span {
  display: inline-block; font-size: 14px; font-weight: 600; padding: 9px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none;
}
.chips a:hover { border-color: var(--coral); color: var(--coral-text); }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; background: var(--coral-tint); color: var(--coral-dark); }
.tag--plum { background: var(--plum-tint); color: #4A1B2E; }
.tag--plain { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.badge--coral { background: var(--coral); color: #fff; }
.badge--green { background: var(--green-tint); color: var(--green); }
.badge--amber { background: var(--amber-tint); color: var(--amber); }
.badge--soft { background: var(--coral-tint); color: var(--coral-text); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 76px); }
.hero .lead { max-width: 520px; }

.signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.signup input { flex: 1 1 240px; min-width: 0; }
/* Home page email boxes (top and bottom): no focus glow or border change. */
.signup input:focus, .signup input:focus-visible { outline: none; box-shadow: none; border-color: var(--field); }
.signup .btn { flex: 0 0 auto; }
.signup__msg { flex: 1 1 100%; font-size: 15px; font-weight: 600; color: var(--green); }
.signup__msg:empty { display: none; }
.cta-band .signup__msg { color: #fff; }

/* ---------- Laptop mock ---------- */
.mock { position: relative; padding: 28px 0 20px; }
.mock__screen { background: var(--ink); border-radius: 20px; padding: 10px; box-shadow: 0 40px 70px -35px rgba(60, 20, 30, .55); }
.mock__app { display: flex; background: #fff; border-radius: 12px; overflow: hidden; min-height: 360px; }
.mock__side { flex: 0 0 140px; background: var(--night); color: #E9DCE0; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.mock__side .on { background: var(--coral); color: #fff; font-weight: 700; border-radius: 8px; }
.mock__side span { padding: 7px 9px; }
.mock__biz { display: flex; align-items: center; gap: 8px; padding: 0 0 12px !important; font-weight: 700; color: #fff; }
.mock__main { flex: 1 1 auto; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock__bar b { font-size: 15px; display: block; }
.mock__bar small { font-size: 11px; color: #6B6170; }
.mock__pills { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.mock__pills span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; }
.mock__pills .add { background: var(--coral); color: #fff; border-color: var(--coral); font-weight: 700; }
.mock__cal { position: relative; font-size: 10px; color: #8A7F86; }
.mock__cal > div.hr { height: 42px; border-top: 1px solid var(--line-2); }
.mock__now { position: absolute; left: 44px; right: 0; top: 118px; height: 2px; background: var(--coral); }
.mock__ev { position: absolute; height: 34px; border-radius: 7px; font-size: 11px; font-weight: 700; padding: 4px 8px; overflow: hidden; white-space: nowrap; }
.mock__ev--c { background: var(--coral-tint); border-left: 3px solid var(--coral); color: #7A2312; }
.mock__ev--p { background: var(--plum-tint); border-left: 3px solid var(--plum); color: #4A1B2E; }
.mock__base { height: 14px; margin: 0 -4%; background: #D9CBCB; border-radius: 0 0 16px 16px; }
.float {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  box-shadow: 0 18px 30px -16px rgba(60, 20, 30, .55); font-size: 12px; line-height: 1.35;
}
.float b { font-size: 14px; display: block; }
.float--coral { background: var(--coral); color: #fff; left: -10px; top: 46%; }
.float--plum { background: var(--plum); color: #fff; right: -6px; top: 4px; }
.float--white { background: #fff; color: var(--ink); border: 1px solid var(--line); right: 6%; bottom: 0; }
.float--white span { color: var(--muted-2); }
.float__ok { width: 22px; height: 22px; border-radius: 999px; background: var(--green-tint); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .mock__side { display: none; }
  .float { position: static; margin-top: 10px; }
  .mock { display: flex; flex-direction: column; }
}

/* ---------- Gift card ---------- */
.giftcard {
  width: 100%; max-width: 420px; aspect-ratio: 1.6; border-radius: 22px; padding: 28px; margin: 0 auto;
  background: var(--coral); color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
}
.giftcard__top, .giftcard__bottom { display: flex; justify-content: space-between; gap: 12px; }
.giftcard__top { align-items: flex-start; }
.giftcard__bottom { align-items: flex-end; }
.giftcard small { font-size: 13px; display: block; }
.giftcard__name { font-size: 24px; font-weight: 700; }
.giftcard__amount { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.giftcard__code { font-size: 13px; letter-spacing: .12em; }

/* ---------- Panels used as product illustrations ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.panel__head b { font-size: 17px; font-weight: 800; }
.panel__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.panel__row:last-child { border-bottom: 0; }
.panel__row .who { flex: 1 1 160px; min-width: 0; }
.panel__row .who b { font-size: 15px; display: block; }
.panel__row .who small { font-size: 13px; color: #6B6170; }
.mini-btn { font-size: 13px; font-weight: 700; padding: 9px 12px; border: 1px solid var(--field); border-radius: 9px; }
.mini-btn--on { background: var(--coral); border-color: var(--coral); color: #fff; }
.panel__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.link-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.link-field span { flex: 1; font-weight: 600; }
.link-field em { font-style: normal; font-weight: 700; color: var(--coral-text); }
.kv { display: flex; flex-direction: column; font-size: 14px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.kv div:last-child { border-bottom: 0; }
.kv dt { font-weight: 600; }
.kv dd { margin: 0; color: var(--muted); text-align: right; }
.ledger { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px 18px; }
.ledger div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.ledger div:last-child { border-bottom: 0; }
.ledger span { font-weight: 600; }
.ledger .plus { font-weight: 700; color: var(--green); }
.ledger .minus { font-weight: 700; }

/* Bar chart illustration */
.bars-box { flex: 1 1 260px; min-width: 0; padding: 18px; border-radius: 18px; background: var(--night-3); border: 1px solid var(--night-line); display: flex; flex-direction: column; gap: 10px; }
.bars-box__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--night-text); }
.bars-box__head b { color: var(--peach); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: #5A3A48; }
.bars i.peak { background: var(--coral); }
.bars-days { display: flex; gap: 8px; font-size: 11px; color: #BFAAB2; text-align: center; }
.bars-days span { flex: 1; }
.bars-days .peak { color: #fff; font-weight: 700; }

.avatars { display: flex; align-items: center; }
.avatars span {
  width: 40px; height: 40px; border-radius: 999px; border: 3px solid #fff; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.avatars span + span { margin-left: -10px; }

.devices { display: flex; gap: 10px; }
.devices span { flex: 1; height: 64px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--coral-text); }

.locations { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.locations div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--coral-text); }
.locations b { flex: 1; color: var(--ink); font-weight: 600; }
.locations small { color: var(--muted-2); font-size: 14px; }

.help-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.help-band__text { display: flex; align-items: center; gap: 18px; flex: 1 1 420px; min-width: 0; }
.help-band__icon { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 16px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }

/* ---------- Divider label ---------- */
.label-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.label-rule span { font-size: 14px; font-weight: 700; color: #fff; background: var(--coral); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.label-rule::after { content: ""; flex: 1; height: 1px; background: #E3D5D2; }
.section--dark .label-rule span { background: var(--peach); color: var(--night); }
.section--dark .label-rule::after { background: var(--night-line); }

/* ---------- Timeline ---------- */
.timeline { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 24px; list-style: none; margin: 0; }
.timeline li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.timeline li:last-child { border-bottom: 0; }
.timeline i { width: 12px; height: 12px; margin-top: 6px; border-radius: 999px; border: 2px solid var(--coral); flex: 0 0 auto; }
.timeline li:first-child i { background: var(--coral); }
.timeline b { display: block; font-size: 16px; }
.timeline span { font-size: 15px; color: var(--muted); }

/* ---------- Pricing ---------- */
.plans { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.plan { flex: 1 1 300px; min-width: 0; padding: 32px; border-radius: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.plan--featured { background: var(--night); border-color: var(--night); color: #fff; box-shadow: 0 30px 60px -30px rgba(60, 20, 30, .6); }
.plan__head { display: flex; flex-direction: column; gap: 6px; }
.plan__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan h2 { font-size: 22px; letter-spacing: -0.01em; }
.plan__desc { font-size: 15px; color: var(--muted-2); }
.plan--featured .plan__desc { color: var(--night-text); }
.plan__price { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.plan__price small { font-size: 15px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.plan--featured .plan__price small { color: var(--night-text); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.plan li::before { content: "✓"; font-weight: 800; color: var(--coral-text); margin-right: 8px; }
.plan--featured li::before { color: var(--peach); }
.plan .btn { margin-top: auto; }

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 12px; text-align: center; border-top: 1px solid var(--line-2); }
.compare thead th { background: var(--bg); font-weight: 700; border-top: 0; padding: 16px 12px; }
.compare thead th.hl { color: var(--coral-text); }
.compare th[scope="row"] { text-align: left; padding-left: 20px; font-weight: 500; }
.compare .no { color: #8A7F86; }

.qa-grid { display: flex; flex-wrap: wrap; gap: 28px 20px; }
.qa-grid > div { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.qa-grid h3 { font-size: 19px; }
.qa-grid p { font-size: 15px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-group { display: flex; flex-direction: column; gap: 12px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: 22px; letter-spacing: -0.01em; color: var(--coral-text); }
.faq { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 24px; }
.faq details { border-bottom: 1px solid var(--line-2); padding: 20px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 18px; font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--coral-text); transition: transform .2s; flex: 0 0 auto; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--muted); }
.todo { background: #FFF6D6; padding: 0 4px; border-radius: 4px; }

/* Legal pages (terms): numbered headings, plain lists, the company block. */
.legal { gap: 12px; color: var(--muted); line-height: 1.65; }
.legal h2 { margin: 18px 0 2px; font-size: 20px; color: var(--ink); }
.legal h3 { margin: 8px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.legal li::marker { color: var(--coral); }
.legal strong { color: var(--ink); }
.legal__meta { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.legal__contact { font-style: normal; }
/* Terms of use + Privacy policy: legal document */
.legal-doc-wrap { padding: 0 0 96px; }
.legal-doc { max-width: 852px; margin: 0 auto; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 24px; line-height: 1.65; color: var(--muted); }
.legal-doc__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.legal-doc__head p { margin: 0; }
.legal-doc__head strong { color: var(--ink); }
.legal-doc a { color: var(--coral-text); }
.legal-doc__clauses { list-style: none; margin: 0; padding: 0; }
.legal-doc__clause { padding-top: 34px; scroll-margin-top: 96px; }
.legal-doc__clause h2 { margin: 0 0 10px; display: flex; gap: 14px; font-size: 20px; line-height: 1.35; color: var(--ink); }
.legal-doc__no { flex: none; width: 34px; color: var(--coral); }
.legal-doc__body { padding-left: 48px; display: flex; flex-direction: column; gap: 10px; }
.legal-doc__body p { margin: 0; }
.legal-doc__body h3 { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.legal-doc__items { list-style: none; margin: 0; padding: 0 0 0 4px; counter-reset: item; display: flex; flex-direction: column; gap: 4px; }
.legal-doc__items li { counter-increment: item; position: relative; padding-left: 34px; }
.legal-doc__items li::before { content: "(" counter(item, lower-alpha) ")"; position: absolute; left: 0; color: var(--muted-2); }
.legal-doc__contact { margin-top: 2px; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--ink); font-style: normal; line-height: 1.7; }
/* Content published from Super Admin (Legal Content): an introduction before
   clause 1, highlighted notes, and nested lists inside a lettered point. */
.legal-doc__intro { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.legal-doc__intro p { margin: 0; }
.legal-doc__note { margin: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.legal-doc__note p { margin: 0; }
.legal-doc__body strong, .legal-doc__intro strong { color: var(--ink); }
.legal-doc__items .legal-doc__items { margin-top: 4px; }
.legal-doc__items .legal-doc__items li::before { content: "(" counter(item, lower-roman) ")"; }
/* Tables in a legal document (Privacy policy: cookies, retention), also when
   published from Super Admin: full width, scrolling sideways on a phone. */
.legal-doc__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-doc table { width: 100%; min-width: 480px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; line-height: 1.5; }
.legal-doc th, .legal-doc td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-doc th { background: var(--bg); color: var(--ink); font-weight: 700; }
.legal-doc td:first-child { color: var(--ink); font-weight: 600; }
.legal-doc tbody tr:last-child td { border-bottom: 0; }
.legal-doc__intro .legal-doc__note { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .legal-doc { padding: 24px 20px; }
  .legal-doc__body { padding-left: 0; }
  .legal-doc__no { width: auto; }
  .legal-doc__clause h2 { gap: 8px; }
}
@media print {
  body:has(.legal-doc) .announce, body:has(.legal-doc) .site-header, body:has(.legal-doc) .breadcrumb, body:has(.legal-doc) .site-footer, body:has(.legal-doc) .skip-link { display: none; }
  .legal-doc-wrap { padding: 0; }
  .legal-doc { max-width: none; padding: 0; border: 0; box-shadow: none; }
  .legal-doc__clause { break-inside: avoid-page; }
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted-2); }
/* Per-field errors (the Contact page's early-access card), worded as in the app. */
.field__error { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--coral-text); }
.field__error:empty { display: none; }
.field input[aria-invalid="true"] { border-color: var(--coral-text); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 52px; padding: 0 16px; font: 400 16px/1.4 var(--font); color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: var(--radius-sm);
}
textarea { padding: 12px 16px; resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: #8A7F86; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(209, 59, 34, .18); }
/* No browser autofill tint (the pale blue a saved name or email paints the
   field): a white inset covers it and the text keeps the site's ink. */
input:-webkit-autofill, input:-webkit-autofill:hover,
select:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px #fff; transition: background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus, select:-webkit-autofill:focus, textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 0 0 1000px #fff, 0 0 0 3px rgba(209, 59, 34, .18);
}
.signup input:-webkit-autofill:focus { box-shadow: inset 0 0 0 1000px #fff; }
input:autofill { background: #fff; }

/* Themed dropdown (main.js draws it over each form <select>). */
.dd { position: relative; }
.dd__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dd__btn {
  width: 100%; min-height: 52px; padding: 0 14px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 400 16px/1.4 var(--font); color: var(--ink); text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--field); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dd__btn:hover { border-color: #C9B2AD; }
.dd__btn:focus-visible, .dd.is-open .dd__btn { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(209, 59, 34, .18); }
.dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__chev { flex: none; color: var(--coral); transition: transform .2s ease; }
.dd.is-open .dd__chev { transform: rotate(180deg); }
.dd__list {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(60, 20, 30, .35), 0 2px 6px rgba(60, 20, 30, .06);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.dd.is-open .dd__list { opacity: 1; visibility: visible; transform: none; }
/* The list's scrollbar in the site's colours: hidden until the pointer is on
   the list, then a slim rose thumb, on no track. The space stays, so the
   options never shift.
   The standard properties first: Chrome and Edge redraw them the moment the
   pointer comes and goes, where a ::-webkit-scrollbar style switched by
   :hover on the list can stay hidden until the list is scrolled. Browsers
   with the standard properties ignore the ::-webkit-scrollbar rules below;
   those are for Safari. */
.dd__list { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.dd__list:hover { scrollbar-color: var(--field) transparent; }
.dd__list::-webkit-scrollbar { width: 10px; }
.dd__list::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.dd__list::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; border: 3px solid #fff; }
.dd__list:hover::-webkit-scrollbar-thumb { background: var(--field); }
.dd__list::-webkit-scrollbar-thumb:hover { background: var(--coral); }
.dd__list::-webkit-scrollbar-button { display: none; height: 0; }
.dd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--ink); cursor: pointer;
}
.dd__opt.is-active { background: var(--coral-tint); color: var(--coral-dark); }
.dd__opt[aria-selected="true"] { font-weight: 700; color: var(--coral-text); }
.dd__tick { flex: none; color: var(--coral); visibility: hidden; }
.dd__opt[aria-selected="true"] .dd__tick { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .dd__list, .dd__chev, .dd__btn { transition: none; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.form-card--lift { box-shadow: var(--shadow); }
.form-success { display: none; padding: 20px; border-radius: 16px; background: var(--coral-tint); flex-direction: column; gap: 8px; }
.form-success b { font-size: 20px; }
.form-success span { color: var(--muted); }
form.is-sent { display: none; }
form.is-sent + .form-success { display: flex; }
.contact-dark { background: var(--night); color: #F6E9EC; border-radius: 24px; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.contact-dark b { font-size: 18px; color: #fff; }
.contact-dark .btn-row a { color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 11px 16px; border: 1px solid var(--night-line); border-radius: 12px; }
.contact-dark .btn-row a:hover { border-color: var(--peach); }

/* ---------- CTA band ---------- */
.cta-band {
  border-radius: var(--radius-lg); background: var(--coral); color: #fff;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cta-band > div { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cta-band p { font-size: 18px; }
.cta-band .signup { flex: 1 1 380px; }
.cta-band input { border: 0; }
.cta-band--dark { background: var(--night); }
.cta-band--dark p { color: var(--night-text); }

/* ---------- Industries ---------- */
.industry p strong { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--night-text); }
.site-footer .container { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.footer__brand { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.footer__brand .brand { color: #fff; }
.footer__brand p { font-size: 15px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--night-line); display: flex; align-items: center; justify-content: center; color: #E9DCE0; }
.footer__social a:hover { border-color: var(--peach); color: #fff; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 56px; }
.footer__cols h2 { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0; margin-bottom: 14px; line-height: 1.4; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer__cols a { color: var(--night-text); text-decoration: none; }
.footer__cols a:hover { color: #fff; text-decoration: underline; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--night-2); font-size: 14px; color: #BFAAB2; }

/* ==========================================================================
   Booking widget
   ========================================================================== */
.bk { width: 100%; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #E3E7E4; border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.bk__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #EEF0ED; }
.bk__logo { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--plum); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.bk__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bk__title b { font-size: 18px; }
.bk__title small { font-size: 13px; color: var(--muted-2); }
.bk__step { font-size: 12px; font-weight: 600; color: var(--muted-2); background: #F1F3F1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.bk__body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.bk__label { font-size: 13px; font-weight: 600; color: #3B4743; display: block; margin-bottom: 10px; }
.bk__parties { display: flex; flex-wrap: wrap; gap: 8px; }
.bk__chip {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; font: 600 14px var(--font);
  background: #fff; color: var(--ink); border: 1px solid #D6DBD8; cursor: pointer;
}
.bk__chip[aria-pressed="true"] { background: var(--coral); color: #fff; border-color: var(--coral); }
.bk__month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk__month b { font-size: 17px; }
.bk__nav { display: flex; gap: 6px; }
.bk__nav button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #D6DBD8; background: #fff; color: var(--ink); cursor: pointer; }
.bk__nav button:disabled { color: #C3CAC6; cursor: default; }
.bk__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk__dow { font-size: 12px; font-weight: 600; color: var(--muted-2); text-align: center; padding-bottom: 4px; }
.bk__day {
  height: 44px; width: 100%; border: 0; border-radius: 10px; font: 600 14px var(--font);
  background: var(--coral-tint); color: var(--coral-text); cursor: pointer;
}
.bk__day:disabled { background: transparent; color: #A3ACA8; font-weight: 400; cursor: default; }
.bk__day[aria-pressed="true"] { background: var(--coral); color: #fff; font-weight: 700; }
.bk__hint { font-size: 12px; color: var(--muted-2); margin-top: 10px; }
.bk__times { padding-top: 16px; border-top: 1px solid #EEF0ED; }
.bk__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk__slot {
  height: 44px; border-radius: 10px; font: 600 14px var(--font); cursor: pointer;
  background: #fff; color: var(--coral-text); border: 1px solid var(--coral);
}
.bk__slot:disabled { background: #F4F5F3; color: #A3ACA8; border-color: #ECEEEB; text-decoration: line-through; cursor: default; }
.bk__slot[aria-pressed="true"] { background: var(--coral); color: #fff; }
.bk__empty { font-size: 14px; color: var(--muted-2); }
.bk__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #F4F7F5; }
.bk__summary b { display: block; font-size: 15px; }
.bk__summary small { font-size: 13px; color: var(--muted-2); }
.bk__done { padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.bk__done .ok { width: 56px; height: 56px; border-radius: 999px; background: var(--coral-tint); color: var(--coral); display: flex; align-items: center; justify-content: center; }
.bk__done h3 { font-size: 24px; }
.bk__done p { color: var(--muted); max-width: 380px; font-size: 15px; }
.bk__done .bk__summary { width: 100%; text-align: left; }
.bk__foot { padding: 12px 20px; border-top: 1px solid #EEF0ED; font-size: 12px; color: var(--muted-2); text-align: center; }
.bk__foot b { color: var(--ink); }
.bk__note { font-size: 12px; color: var(--muted-2); text-align: center; }

.demo-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--coral-text); background: var(--coral-tint); padding: 6px 12px; border-radius: 999px; align-self: flex-start; }
.demo-label i { width: 8px; height: 8px; border-radius: 999px; background: var(--coral); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: flex; align-items: center; text-align: center; }
.notfound .container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.notfound .big { font-size: clamp(80px, 14vw, 160px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--coral); }

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .hero { padding: 48px 0 64px; }
  .page-hero { padding: 48px 0 48px; }
  .card, .plan, .form-card { padding: 24px; }
  .signup .btn { flex: 1 1 100%; }
}

/* Fixes */
.card.help-band { flex-direction: row; }
.mock__pills span { white-space: nowrap; }
.notfound { padding: 48px 0 72px; }