/* ============================================================
   StudioDesk — landing page
   Ported from the Claude Design project "StudioDesk landing page"
   (StudioDesk Landing HE.dc.html + its design system) into plain
   static CSS. Design tokens below are copied verbatim from the DS
   token files; components are reconstructed from the DS component
   sources. RTL Hebrew.
   ============================================================ */

/* ---------------- Design tokens ---------------- */
:root {
  /* Brand indigo (primary) */
  --indigo-50:#EEF0FF; --indigo-100:#E0E4FF; --indigo-200:#C7CCFF; --indigo-300:#A5ABFF;
  --indigo-400:#8188FA; --indigo-500:#6366F1; --indigo-600:#4F46E5; --indigo-700:#4038C7;
  --indigo-800:#332CA0; --indigo-900:#272178;

  /* Accent cyan */
  --cyan-50:#DEFCFC; --cyan-100:#B4F8F8; --cyan-200:#79F1F1; --cyan-300:#35E6E6;
  --cyan-400:#00D6D6; --cyan-500:#00BBBB; --cyan-600:#009C9C; --cyan-700:#037A7A; --cyan-neon:#00FFFF;

  /* Success green */
  --green-50:#E9FBF0; --green-100:#C8F5DA; --green-200:#93EBB6; --green-300:#57DE8E;
  --green-400:#26CB65; --green-500:#12B457; --green-600:#0E9A4A; --green-700:#0B7C3C;
  --green-800:#0A5F30; --green-900:#084C28;

  /* Cool neutrals (ink) */
  --ink-950:#070B12; --ink-900:#0C1420; --ink-800:#16202F; --ink-700:#263143; --ink-600:#3A475B;
  --ink-500:#5C6B80; --ink-400:#8593A6; --ink-300:#B2BECD; --ink-200:#D6DDE6; --ink-100:#E9EEF3;
  --ink-50:#F4F7FA; --white:#FFFFFF;

  /* Semantic hues */
  --amber-100:#FDEECB; --amber-400:#F5A524; --amber-600:#C77C08;
  --red-100:#FCDCE0; --red-400:#F04A5C; --red-600:#CE2338;
  --blue-100:#D6E9FE; --blue-400:#2E90FA; --blue-600:#1667C7;

  /* Signature gradients */
  --gradient-spark:linear-gradient(120deg, var(--indigo-500) 0%, var(--cyan-400) 100%);
  --gradient-spark-soft:linear-gradient(120deg, var(--indigo-50) 0%, var(--cyan-50) 100%);
  --gradient-ink:linear-gradient(160deg, var(--ink-900) 0%, var(--ink-950) 100%);

  /* Surfaces */
  --surface-page:var(--ink-50); --surface-card:var(--white); --surface-sunken:var(--ink-100);
  --surface-raised:var(--white); --surface-inverse:var(--ink-900); --surface-brand-soft:var(--indigo-50);

  /* Text */
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-subtle:var(--ink-400); --text-on-brand:var(--white); --text-inverse:var(--ink-50);
  --text-link:var(--indigo-600);

  /* Brand / interactive */
  --brand:var(--indigo-600); --brand-hover:var(--indigo-700); --brand-active:var(--indigo-800);
  --brand-subtle:var(--indigo-50); --accent:var(--cyan-500); --accent-hover:var(--cyan-600);

  /* Borders */
  --border-subtle:var(--ink-100); --border-default:var(--ink-200); --border-strong:var(--ink-300);
  --border-brand:var(--indigo-400); --focus-ring:color-mix(in srgb, var(--indigo-600) 45%, transparent);

  /* Feedback */
  --success:var(--green-500); --success-soft:var(--green-50); --warning:var(--amber-400);
  --warning-soft:var(--amber-100); --danger:var(--red-400); --danger-soft:var(--red-100);
  --info:var(--blue-400); --info-soft:var(--blue-100);

  /* Type scale */
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:4rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:0em; --tracking-normal:0em; --tracking-wide:0.02em; --tracking-caps:0.08em;

  /* Fonts — Hebrew build: Assistant for display + body, Hanken Grotesk for numerals/mono. */
  --font-display:"Assistant", system-ui, sans-serif;
  --font-sans:"Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Hanken Grotesk", system-ui, sans-serif;
  --font-heading:var(--font-display); --font-body:var(--font-sans); --font-numeric:var(--font-mono);

  /* Radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --radius-2xl:28px; --radius-pill:999px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(12,20,32,.06);
  --shadow-sm:0 1px 3px rgba(12,20,32,.08), 0 1px 2px rgba(12,20,32,.04);
  --shadow-md:0 4px 12px rgba(12,20,32,.08), 0 2px 4px rgba(12,20,32,.05);
  --shadow-lg:0 12px 28px rgba(12,20,32,.12), 0 4px 8px rgba(12,20,32,.06);
  --shadow-xl:0 24px 56px rgba(12,20,32,.16), 0 8px 16px rgba(12,20,32,.08);
  --glow-brand:0 6px 20px color-mix(in srgb, var(--brand) 35%, transparent);
  --glow-cyan:0 6px 20px rgba(0,187,187,.32);

  /* Motion */
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-base:220ms; --duration-fast:140ms;
  --transition-base:all var(--duration-base) var(--ease-out);
  --transition-color:color var(--duration-fast) var(--ease-out),
                     background-color var(--duration-fast) var(--ease-out),
                     border-color var(--duration-fast) var(--ease-out);
}

/* ---------------- Reset / base ---------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--indigo-100); color: var(--indigo-800); }

/* ---------------- Keyframes ---------------- */
@keyframes sd-spin { to { transform: rotate(360deg); } }
@keyframes sd-typing { 0%,60%,100% { transform: translateY(0); opacity:.4; } 30% { transform: translateY(-4px); opacity:1; } }
@keyframes sd-float  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(0,-26px) scale(1.05); } }
@keyframes sd-float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,20px) scale(1.08); } }
@keyframes sd-drift  { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes sd-sparkle { 0%,100% { opacity:.8; transform: scale(1) rotate(0deg); } 50% { opacity:1; transform: scale(1.2) rotate(10deg); } }
@keyframes sd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-pop  { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
/* hero deck: one-shot entrance (each preserves its own resting tilt) + gentle idle float */
@keyframes sd-deck-l { from { opacity: 0; transform: translateY(30px) rotate(-6deg) scale(.92); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes sd-deck-r { from { opacity: 0; transform: translateY(30px) rotate(6deg) scale(.92); }  to { opacity: 1; transform: rotate(6deg); } }
@keyframes sd-deck-c { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sd-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------------- Layout ---------------- */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 88px; }
.section-sm { padding-block: 64px; }
.surface-page { background: var(--surface-page); }
.bordered-y { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.bordered-t { border-top: 1px solid var(--border-subtle); }
.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 60px;
  align-items: center;
}
.split-hero { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
.split-wide-visual { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); }
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}
.h2 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1;
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0;
}
.lead { font-size: 1.08rem; line-height: var(--leading-relaxed); color: var(--text-body); }

/* Feature list rows (icon + title + copy) */
.feature { display: flex; gap: 12px; align-items: flex-start; }
.feature .ft-title { font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: 2px; }
.feature .ft-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }

/* ---------------- Nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, white 82%, transparent);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow .3s var(--ease-out);
}
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.nav-links { display: flex; gap: 26px; margin-inline-start: 20px; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.nav-links a { color: var(--text-body); text-decoration: none; transition: var(--transition-color); }
.nav-links a:hover { color: var(--brand); }
.nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; width: auto;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-lg);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: var(--transition-base);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { height: 34px; padding: 0 14px; gap: 6px; border-radius: var(--radius-md); }
.btn-lg { height: 52px; padding: 0 28px; gap: 10px; font-size: var(--text-md); }
.btn-full { width: 100%; }

.btn-primary { background: var(--brand); color: var(--text-on-brand); box-shadow: var(--glow-brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-gradient { background: var(--gradient-spark); color: var(--ink-950); box-shadow: var(--glow-cyan); font-weight: var(--weight-bold); }
.btn-gradient:hover { filter: brightness(1.04); }
.btn-secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--ink-50); }
.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: color-mix(in srgb, white 12%, transparent); }

/* ---------------- Card ---------------- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}
.card-lg { box-shadow: var(--shadow-lg); }
.card-accent {
  border-top: 3px solid transparent;
  background-image: linear-gradient(var(--surface-card), var(--surface-card)), var(--gradient-spark);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Three-up grid of feature/testimonial/pricing cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-3.tight { gap: 20px; align-items: stretch; }
.card-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.card-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.15rem; color: var(--text-strong); }

/* ---------------- Pricing ---------------- */
/* Four-up grid of optional AI-agent volume tiers (below the per-room base card). */
.price-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
/* Capability pills on the base card. */
.price-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--radius-pill); background: var(--ink-50); border: 1px solid var(--border-subtle);
  font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--text-body);
}
/* Per-tier message-volume callout. */
.price-vol {
  display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 10px;
  background: var(--ink-50); border: 1px solid var(--border-subtle);
  font-size: 13px; color: var(--text-body);
}
.price-vol b { font-weight: var(--weight-bold); }
.price-vol-brand { background: var(--brand-subtle); border-color: var(--indigo-100); color: var(--indigo-800); }

/* ---------------- Badge ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 10px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); line-height: 1; white-space: nowrap;
}
.badge-sm { font-size: var(--text-2xs); padding: 2px 8px; min-height: 18px; }
.badge-success { background: var(--success-soft); color: var(--green-700); }
.badge-brand { background: var(--indigo-50); color: var(--indigo-700); }
.badge-brand-solid { background: var(--brand); color: var(--white); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------- Time slot ---------------- */
.time-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 78px; height: 56px; padding: 0 12px; border-radius: var(--radius-md);
  background: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-strong);
  font-family: var(--font-mono); cursor: pointer; transition: var(--transition-base);
}
.time-slot .t { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.time-slot .p { font-size: var(--text-2xs); font-family: var(--font-sans); opacity: .7; }
.time-slot.selected { background: var(--brand); border-color: var(--brand); color: var(--white); box-shadow: var(--glow-brand); }
.time-slot.selected .p { opacity: .9; }
.time-slot.unavailable {
  background: var(--ink-50); border-color: var(--border-subtle); color: var(--text-subtle);
  text-decoration: line-through; cursor: not-allowed;
}

/* ---------------- Avatar ---------------- */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--brand); color: var(--text-on-brand);
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: 12px;
  letter-spacing: var(--tracking-tight); overflow: visible;
  border: 1px solid rgba(12,20,32,.06); flex-shrink: 0;
}
.avatar-xs { width: 26px; height: 26px; font-size: 10px; }
.avatar.is-online::after {
  content: ""; position: absolute; inset-inline-end: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--success);
  border: 2px solid var(--surface-card);
}

/* ---------------- Icons / sparkle ---------------- */
.icon { display: inline-block; flex-shrink: 0; }
.spark { display: inline-block; flex-shrink: 0; }

/* ---------------- Hero ---------------- */
.hero { position: relative; overflow: hidden; background: var(--white); }
.hero-inner { position: relative; padding-block: 72px 88px; }
.blob { position: absolute; border-radius: 999px; filter: blur(20px); pointer-events: none; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill); background: var(--brand-subtle); border: 1px solid var(--indigo-100);
  margin-bottom: 22px;
}
.hero-badge span { font-size: 13px; font-weight: var(--weight-semibold); color: var(--indigo-700); }
.hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.06;
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin-bottom: 20px;
}
.gradient-text {
  background: var(--gradient-spark); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sd-drift 6s linear infinite alternate;
}
.hero-sub { font-size: 1.18rem; line-height: var(--leading-relaxed); color: var(--text-body); max-width: 30rem; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-trust { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); }

/* ---------------- Hero — feature chips ---------------- */
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--radius-pill); background: var(--brand-subtle); border: 1px solid var(--indigo-100);
  font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--indigo-700);
}
.hero-chip--cyan { background: var(--cyan-50); border-color: var(--cyan-100); color: var(--cyan-700); }

/* ---------------- Hero — three-part layered deck (design 1b) ----------------
   Three overlapping product surfaces: dashboard tilted back on the start side,
   booking site tilted back on the end side, WhatsApp chat phone front-and-center.
   Entrance animation lives on .deck-card (preserves each card's resting tilt);
   the idle float lives on the inner .deck-float so it never fights the rotation.
   The phone's chat is driven by the shared setupChats() engine (data-chat). */
/* Fixed width so the deck never collapses (its cards are all position:absolute);
   left/right anchor to real edges in every layout, keeping the arrangement stable. */
.hero-deck { position: relative; width: 468px; max-width: 100%; margin-inline: auto; height: 344px; }
.deck-card { position: absolute; }
.deck-card--dash { left: 0;  top: 58px; width: 258px; transform: rotate(-6deg); z-index: 1;
  animation: sd-deck-l .7s var(--ease-out) .15s both; }
.deck-card--web  { right: 0; top: 50px; width: 252px; transform: rotate(6deg);  z-index: 2;
  animation: sd-deck-r .7s var(--ease-out) .28s both; }
.deck-card--chat { left: 50%; top: 4px; width: 222px; margin-left: -111px; z-index: 3;
  animation: sd-deck-c .7s var(--ease-out) .42s both; }
.deck-float { position: relative; animation: sd-bob 7s var(--ease-out) 1.2s infinite; }
.deck-card--web  .deck-float { animation-duration: 8s;   animation-delay: 1.6s; }
.deck-card--chat .deck-float { animation-duration: 6.5s; animation-delay: 1.4s; }

/* floating label pills */
.deck-tag {
  position: absolute; top: -13px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.deck-card--dash .deck-tag { left: 14px; }
.deck-card--web  .deck-tag { right: 14px; }
.deck-card--chat .deck-tag { left: 50%; transform: translateX(-50%); }
.deck-tag--brand { border: 1px solid var(--indigo-100); color: var(--brand); }
.deck-tag--cyan  { border: 1px solid var(--cyan-100);   color: var(--cyan-700); }
.deck-tag--green { border: 1px solid var(--green-200);  color: var(--green-700); }

/* mini dashboard — echoes the "03 · dashboard" room-colored calendar (.db-app) */
.deck-dash { display: flex; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.md-side { flex-shrink: 0; width: 32px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 0; background: var(--surface-card); border-inline-end: 1px solid var(--border-subtle); }
.md-brand { width: 18px; height: 18px; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.md-brand img { width: 100%; height: 100%; }
.md-nav { width: 16px; height: 16px; border-radius: 5px; background: var(--ink-100); }
.md-nav.on { background: var(--brand-subtle); box-shadow: inset 0 0 0 1px var(--indigo-200); }
.md-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.md-day { font-size: 9.5px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.md-today { margin-inline-start: auto; padding: 2px 7px; border: 1px solid var(--border-default); border-radius: 6px; background: #fff; font-size: 8px; font-weight: 600; color: var(--text-body); }
.md-grid { flex: 1; }
.md-ghead, .md-body { display: grid; grid-template-columns: 18px 1fr 1fr 1fr; }
.md-corner { background: var(--surface-page); }
.md-colhead { padding: 4px 2px; font-size: 8px; font-weight: 700; color: #f8f8f8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-start: 1px solid rgba(255,255,255,.25); }
.md-body { position: relative; height: 118px; }
.md-gutter { position: relative; background: var(--surface-page); display: flex; flex-direction: column; justify-content: space-between; padding: 3px 0; }
.md-gutter span { font-family: var(--font-mono); font-size: 7px; color: var(--text-subtle); text-align: center; }
.md-col { position: relative; border-inline-start: 1px solid var(--border-subtle); background-image: linear-gradient(to bottom, rgba(12,20,32,.05) 0 1px, transparent 1px); background-size: 100% 29px; }
.md-ev { position: absolute; inset-inline-start: 2px; inset-inline-end: 2px; padding: 2px 3px; border-radius: 4px; border: 1px solid rgba(12,20,32,.12); font-size: 7px; font-weight: 600; color: #f8f8f8; line-height: 1.15; overflow: hidden; white-space: nowrap; }
.md-now { position: absolute; inset-inline-start: 18px; inset-inline-end: 0; height: 0; border-top: 1.5px solid var(--danger); z-index: 6; }
.md-now::before { content: ""; position: absolute; inset-inline-start: -3px; top: -3px; width: 5px; height: 5px; border-radius: 999px; background: var(--danger); }

/* mini booking widget — echoes the "02 · widget" room×time grid (.sb-modal) */
.deck-widget { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.mw-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--border-subtle); }
.mw-logo { width: 22px; height: 22px; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 8px rgba(240,69,126,.28); flex-shrink: 0; }
.mw-logo img { width: 100%; height: 100%; }
.mw-brand { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--text-strong); line-height: 1.15; }
.mw-brand span { font-family: var(--font-sans); font-weight: 500; font-size: 8.5px; color: var(--text-subtle); }
.mw-seg { margin-inline-start: auto; display: flex; padding: 2px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.mw-seg span { padding: 2px 6px; border-radius: var(--radius-pill); font-size: 8px; font-weight: 600; color: var(--text-subtle); }
.mw-seg span.on { background: var(--indigo-50); color: var(--indigo-700); font-weight: 700; }
.mw-grid { display: grid; grid-template-columns: 24px 1fr 1fr 1fr; grid-auto-rows: 19px; }
.mw-corner { background: var(--ink-50); border-bottom: 1px solid var(--border-subtle); }
.mw-hcell { display: flex; align-items: center; justify-content: center; padding: 5px 2px; font-size: 8.5px; font-weight: 700; color: var(--text-strong); border-bottom: 1px solid var(--border-default); border-inline-start: 1px solid var(--border-subtle); white-space: nowrap; }
.mw-time { display: flex; align-items: flex-start; justify-content: flex-end; padding: 1px 4px 0 0; font-family: var(--font-mono); font-size: 7.5px; color: var(--text-subtle); background: var(--ink-50); border-bottom: 1px solid var(--border-subtle); }
.mw-cell { background: #fff; border-inline-start: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.mw-cell.booked { background: repeating-linear-gradient(45deg, var(--ink-100), var(--ink-100) 3px, var(--ink-50) 3px, var(--ink-50) 6px); }
.mw-sel { background: var(--brand); border-inline-start: 1px solid var(--brand); border-bottom: 1px solid var(--brand); }
.mw-sel.start { position: relative; z-index: 1; display: flex; align-items: flex-start; padding: 2px 4px; border-top-left-radius: 7px; border-top-right-radius: 7px; font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; color: #fff; white-space: nowrap; box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 34%, transparent); }
.mw-sel.end { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }
.mw-foot { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: var(--ink-50); border-top: 1px solid var(--border-subtle); }
.mw-sum { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mw-sum b { font-size: 9.5px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.mw-sum span { font-size: 8px; color: var(--text-subtle); white-space: nowrap; }
.mw-total { margin-inline-start: auto; font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--text-strong); }

/* mini WhatsApp chat — reuses the real .chat-card (01 · assistant) at compact scale */
.chat-card--mini { max-width: none; width: 100%; border-radius: 18px; }
.chat-card--mini .chat-head { padding: 8px 10px; gap: 8px; }
.chat-card--mini .wa-ava { width: 28px; height: 28px; }
.chat-card--mini .wa-name { font-size: 12px; }
.chat-card--mini .chat-head .status { font-size: 9.5px; }
.chat-card--mini .chat-body { height: 190px; padding: 10px 9px; gap: 5px; background-size: 160px 160px; }
.chat-card--mini .wa-day { font-size: 9.5px; padding: 3px 9px; margin: 0 0 2px; }
.chat-card--mini .b-me, .chat-card--mini .b-agent { max-width: 172px; font-size: 10.5px; padding: 5px 7px 4px; }
.chat-card--mini .b-time { font-size: 8.5px; }
.chat-card--mini .wa-tick { font-size: 9px; }
.chat-card--mini .ai-spark { font-size: 10px; }
.chat-card--mini .chat-input { padding: 6px 7px; gap: 6px; }
.chat-card--mini .wa-field { height: 32px; padding: 0 10px; gap: 7px; border-radius: 16px; }
.chat-card--mini .wa-field svg { width: 16px; height: 16px; }
.chat-card--mini .wa-ph { font-size: 11px; }
.chat-card--mini .chat-send { width: 32px; height: 32px; }
.chat-card--mini .chat-send svg { width: 15px; height: 15px; }

/* ---------------- WhatsApp chat card ----------------
   Restyled to read as a real WhatsApp conversation: teal-green header,
   beige doodle wallpaper, green/white bubbles with tails, read ticks,
   and a real composer bar. AI (business) replies carry ✨ sparkles. */
.chat-card {
  width: 100%; max-width: 392px; margin-inline: auto; background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: 22px; box-shadow: var(--shadow-xl); overflow: hidden;
}
/* header */
.chat-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--indigo-600); color: #fff; }
.wa-back { flex-shrink: 0; margin-inline-end: -2px; }
.wa-ava { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--indigo-500); }
.wa-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-id { flex: 1; min-width: 0; }
.wa-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.2; color: #fff; }
.chat-head .status { font-size: 12px; color: rgba(255,255,255,.82); }
.wa-actions { display: flex; align-items: center; gap: 17px; }
.wa-actions svg { flex-shrink: 0; }
/* wallpaper body */
.chat-body {
  position: relative; height: 372px; overflow: hidden;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 7px;
  background-color: #E9EBFB;
  background-image: url("assets/whatsapp-bg.svg");
  background-size: 240px 240px; background-repeat: repeat;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chat-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* system chips (date + encryption notice) */
.wa-day { align-self: center; margin: 2px 0 3px; background: #fff; color: #54656F; font-size: 11.5px; font-weight: 500; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
/* bubbles */
.bubble { display: flex; }
.bubble.me { justify-content: flex-end; }
.bubble.agent { justify-content: flex-start; }
.b-me, .b-agent {
  position: relative; max-width: 270px; padding: 6px 9px 5px;
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  font-size: 14px; line-height: 1.4; color: #111B21;
}
.b-me { background: #CFF1F1; border-radius: 8px; border-top-left-radius: 0; }
.b-agent { background: #fff; border-radius: 8px; border-top-right-radius: 0; }
/* little bubble tails */
.b-me::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: #CFF1F1; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.b-agent::before { content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 13px; background: #fff; clip-path: polygon(0 0, 0 100%, 100% 0); }
.b-txt { white-space: normal; }
.b-txt strong { font-weight: 700; }
/* meta row: timestamp + tick / sparkle */
.b-meta { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.b-agent .b-meta { justify-content: space-between; }
.b-me .b-meta { justify-content: flex-start; }
.b-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10.5px; color: #667781; }
.wa-tick { font-size: 11px; color: #2E90FA; letter-spacing: -3px; margin-inline-start: 1px; }

/* AI sparkle marks — inside the bubble (top-right corner + bottom-right of the meta row) */
.ai-spark { font-size: 12.5px; line-height: 1; font-style: normal; pointer-events: none; user-select: none; animation: sd-sparkle 2.6s ease-in-out infinite; }
.ai-spark-top { align-self: flex-start; margin: -1px -1px 0 0; animation-delay: .3s; }

/* typing indicator (WhatsApp incoming bubble with animated dots) */
.typing { display: none; justify-content: flex-start; }
.b-typing { padding: 11px 13px; }
.b-typing .dots { display: flex; gap: 5px; align-items: center; }
.b-typing .dots span { width: 7px; height: 7px; border-radius: 999px; background: #90A4AE; animation: sd-typing 1.1s infinite ease-in-out; }
.b-typing .dots span:nth-child(2) { animation-delay: .18s; }
.b-typing .dots span:nth-child(3) { animation-delay: .36s; }
/* composer bar */
.chat-input { display: flex; align-items: center; gap: 7px; padding: 8px 9px; background: #E4E6F6; }
.wa-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: #fff; border-radius: 22px; box-shadow: 0 1px .5px rgba(11,20,26,.06); }
.wa-field svg { flex-shrink: 0; color: var(--ink-400); }
.wa-ph { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-400); }
.chat-send { width: 42px; height: 42px; border-radius: 50%; background: var(--indigo-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------------- Chips (assistant metrics) ---------------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill);
  background: var(--ink-50); border: 1px solid var(--border-subtle);
  font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-body);
}
.chip .n { font-family: var(--font-mono); color: var(--brand); }

/* ---------------- Stats row ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stats .num { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--text-strong); }
.stats .lbl { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ---------------- Footer CTA ---------------- */
.cta { background: var(--gradient-ink); position: relative; overflow: hidden; }
.cta-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.cta h2 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: var(--tracking-tight);
  color: #fff; margin: 18px 0 16px;
}
.cta p { font-size: 1.12rem; line-height: var(--leading-relaxed); color: var(--ink-200); margin: 0 auto 30px; max-width: 34rem; }

/* ---------------- Footer ---------------- */
.footer { background: var(--ink-950); color: var(--ink-300); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer h4 { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-400); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--ink-300); text-decoration: none; font-size: 13.5px; margin-bottom: 10px; transition: var(--transition-color); }
.footer-col a:hover { color: #fff; }
/* Legal entity identification (Meta business verification) */
.footer-legal { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-legal-line { font-size: 13px; line-height: 1.8; color: var(--ink-300); margin: 0; }
.footer-legal-line strong { color: #fff; font-weight: var(--weight-semibold); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-500); }

/* Browser / dashboard mock chrome shared bits */
.mock { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); background: #fff; }
.dots-3 { display: flex; gap: 6px; }
.dots-3 span { width: 11px; height: 11px; border-radius: 999px; }

/* ---------------- Booking widget mock (02 · widget) ----------------
   Ported from the Claude Design project "Studio Booking"
   (Studio Booking.dc.html) — day view, Hebrew, "אולפן B" selected.
   Tokens map 1:1 onto the DS palette already defined above. */
.sb-modal {
  max-width: 600px; margin-inline: auto; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
}
/* header */
.sb-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.sb-logo {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(240,69,126,.28);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sb-logo img { width: 100%; height: 100%; display: block; }
.sb-brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.015em; color: var(--text-strong); line-height: 1.15; }
.sb-sub { font-size: 12px; color: var(--text-subtle); white-space: nowrap; }
.sb-x { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--border-strong); font-size: 19px; cursor: pointer; }
/* pill segmented control (lang, day/week) */
.sb-seg { display: flex; align-items: center; padding: 2px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.sb-seg > span { padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--text-subtle); cursor: pointer; white-space: nowrap; }
.sb-seg > span.on { background: var(--indigo-50); color: var(--indigo-700); font-weight: 700; }
.sb-seg-lg > span { padding: 6px 15px; font-size: 13px; color: var(--text-muted); }
/* stepper */
.sb-steps { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--ink-50); }
.sb-step { display: flex; align-items: center; gap: 8px; }
.sb-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: #fff; color: var(--border-strong); border: 1px solid var(--border-default); }
.sb-dot.on { background: var(--brand); color: #fff; border: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
.sb-step-lbl { font-size: 13px; font-weight: 500; color: var(--text-subtle); }
.sb-step-lbl.on { font-weight: 700; color: var(--text-strong); }
.sb-bar { width: 22px; height: 1px; background: var(--border-default); }
/* toolbar */
.sb-tools { display: flex; align-items: center; gap: 14px; padding: 14px 22px 12px; }
.sb-today { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer; }
.sb-nav { width: 32px; height: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; }
.sb-date { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--text-strong); cursor: pointer; white-space: nowrap; }
.sb-caret { color: var(--border-strong); font-size: 11px; }
/* grid */
.sb-grid-wrap { overflow-x: auto; border-top: 1px solid var(--border-subtle); }
.sb-grid { display: grid; grid-template-columns: 54px repeat(5, minmax(90px, 1fr)); grid-template-rows: 42px; grid-auto-rows: 30px; min-width: 100%; --acc: var(--brand); }
.sb-cell { display: flex; align-items: center; justify-content: flex-start; font-size: 10px; background: #fff; border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; user-select: none; white-space: nowrap; }
.sb-cell.avail { cursor: pointer; transition: var(--transition-color); }
.sb-cell.avail:hover { background: var(--indigo-50); box-shadow: inset 0 0 0 1.5px var(--acc); }
.sb-cell.booked { background: repeating-linear-gradient(45deg, var(--ink-100), var(--ink-100) 4px, var(--ink-50) 4px, var(--ink-50) 8px); }
.sb-corner { background: var(--ink-50); border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.sb-hcell { background: #fff; border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 7px 9px; display: flex; flex-direction: column; justify-content: center; gap: 1px; font-size: 12px; font-weight: 700; color: var(--text-strong); }
.sb-hcell .rate { font-size: 10px; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.sb-time { justify-content: flex-end; align-items: flex-start; padding-top: 2px; padding-inline-end: 7px; font-size: 9px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-subtle); background: var(--ink-50); }
.sb-sel { background: var(--brand); color: #fff; font-family: var(--font-mono); border-inline-end: 1px solid var(--brand); border-bottom: 1px solid var(--brand); }
.sb-sel.start { align-items: flex-start; padding-top: 4px; padding-inline-start: 7px; font-weight: 700; border-top-left-radius: 9px; border-top-right-radius: 9px; box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 34%, transparent); z-index: 1; }
.sb-sel.end { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
/* legend + summary bar */
.sb-legend { display: flex; align-items: center; gap: 18px; padding: 10px 22px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted); }
.sb-legend .lg { display: flex; align-items: center; gap: 7px; }
.sb-sw { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.sb-foot { display: flex; align-items: center; gap: 18px; padding: 16px 22px; background: var(--ink-50); border-top: 1px solid var(--border-subtle); }
.sb-next { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-lg); padding: 11px 26px; font-size: 15px; font-weight: 700; background: var(--brand); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 32%, transparent); cursor: pointer; }

/* ---------------- Reveal (JS drives the animation; visible by default) ---------------- */
[data-reveal] { opacity: 1; transform: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
  .split, .split-hero, .split-wide-visual { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split .order-visual { order: 1; }
  .grid-3 { grid-template-columns: 1fr; }
  .price-tiers { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .section { padding-block: 64px; }
  .hero-inner { padding-block: 48px 64px; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 18px; }
  .price-tiers { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-inner { gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
  .hero-sub { font-size: 1.08rem; }
  .hero-chips { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- Dashboard preview (03 · dashboard) ----------------
   A faithful recreation of the real owner dashboard's calendar screen
   (dashboard/src/components/screens/CalendarScreen.tsx + App.css): app
   nav sidebar + day grid with room-colored columns, event cards and the
   live "now" line. Class names are db-* scoped so they don't collide
   with the page's own .nav-* chrome; room colors + geometry (48px/hour,
   here compacted to 34px) mirror calendarColors.ts / dayGridLayout.ts. */
.db-app { display: flex; height: 432px; background: var(--surface-page); }

/* app nav sidebar (mirrors dashboard Sidebar.tsx) */
.db-side {
  flex-shrink: 0; width: 158px; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px; background: var(--surface-card); border-inline-end: 1px solid var(--border-subtle);
}
.db-brand {
  display: flex; align-items: center; gap: 9px; padding: 4px 8px 12px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text-strong); white-space: nowrap;
}
.db-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.db-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-md); color: var(--text-body);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.db-nav-item svg { flex-shrink: 0; color: var(--text-subtle); }
.db-nav-item.active { background: var(--brand-subtle); color: var(--indigo-700); font-weight: 700; }
.db-nav-item.active svg { color: var(--indigo-700); }
.db-side-foot {
  margin-top: 8px; display: flex; align-items: center; gap: 9px;
  padding: 10px; border-top: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 12.5px;
}
.db-side-foot svg { flex-shrink: 0; }

/* calendar screen */
.db-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.db-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
}
.db-datenav { display: flex; align-items: center; gap: 6px; }
.db-step {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: #fff; color: var(--text-muted); font-size: 15px; cursor: pointer;
}
.db-day { font-size: 13px; font-weight: 600; color: var(--text-strong); min-width: 118px; text-align: center; }
.db-today {
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-body); cursor: pointer;
}

/* day grid (mirrors DayGrid.tsx / EventBlock.tsx) */
.db-grid { flex: 1; overflow: auto; position: relative; --db-gutter: 44px; --db-hh: 34px; }
.db-ghead,
.db-body { display: grid; grid-template-columns: var(--db-gutter) repeat(3, minmax(76px, 1fr)); }
.db-ghead { position: sticky; top: 0; z-index: 3; background: var(--surface-card); }
.db-corner { background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.db-colhead {
  padding: 7px 6px; font-size: 11.5px; font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--border-default); border-inline-start: 1px solid var(--border-subtle);
}
.db-body { position: relative; }
.db-gutter { position: relative; background: var(--surface-page); }
.db-hour { height: var(--db-hh); border-top: 1px solid var(--border-subtle); position: relative; }
.db-hour span {
  position: absolute; top: -7px; inset-inline-end: 5px; padding: 0 2px;
  background: var(--surface-page); font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10px; color: var(--text-subtle);
}
.db-col {
  position: relative; border-inline-start: 1px solid var(--border-subtle);
  background-image: linear-gradient(to bottom, rgba(12,20,32,.05) 0 1px, transparent 1px);
  background-size: 100% var(--db-hh); background-position: 0 0;
}
.db-event {
  position: absolute; inset-inline-start: 2px; inset-inline-end: 2px;
  display: flex; flex-direction: column; padding: 3px 6px;
  border-radius: var(--radius-sm); border: 1px solid rgba(12,20,32,.12); box-shadow: var(--shadow-xs);
  font-size: 11px; line-height: 1.25; overflow: hidden;
}
.db-event .t { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 700; opacity: .85; }
.db-event .n { font-weight: 600; overflow-wrap: anywhere; }
.db-pay {
  /* time is dir=ltr (left-aligned) at the block's start, so pin the paid marker to
     the opposite top corner rather than the real app's inline-end (they'd collide here). */
  position: absolute; top: 2px; inset-inline-start: 5px; font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--green-400); pointer-events: none;
  text-shadow: 1px 0 0 rgba(0,0,0,.5), -1px 0 0 rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(0,0,0,.5);
}
.db-now { position: absolute; inset-inline-start: var(--db-gutter); inset-inline-end: 0; height: 0; border-top: 2px solid var(--danger); z-index: 6; }
.db-now::before { content: ""; position: absolute; inset-inline-start: -4px; top: -4px; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); }

/* Narrow screens: collapse the nav to an icon rail so the grid keeps its room columns. */
@media (max-width: 560px) {
  .db-side { width: 50px; padding: 12px 6px; align-items: center; }
  .db-nav-item { justify-content: center; padding: 8px; }
  .db-side-foot { justify-content: center; padding: 10px 0; }
  .db-t { display: none; }

  /* Booking widget: tighten the chrome and show 3 rooms (instead of 5) so the
     grid fits the phone width fully rather than becoming a cramped side-scroll.
     Each logical grid row is [time + 5 rooms] = 6 cells; hide the 5th (room D)
     and 6th (room E) of every group and drop the two rightmost columns. */
  .sb-head, .sb-steps, .sb-tools, .sb-legend, .sb-foot { padding-inline: 14px; }
  .sb-tools { gap: 8px; }
  .sb-steps { gap: 6px; }
  .sb-step { gap: 6px; }
  .sb-bar { width: 10px; }
  .sb-step-lbl { font-size: 12px; }
  .sb-seg-lg > span { padding: 6px 11px; }
  .sb-grid { grid-template-columns: 54px repeat(3, minmax(0, 1fr)); }
  .sb-grid > *:nth-child(6n+5),
  .sb-grid > *:nth-child(6n) { display: none; }
}

/* ---------------- Contact modal ("start a free trial") ----------------
   Ported from the design's <sc-if value="{{ contactOpen }}"> block. Opened by
   every trial CTA; closes on the ✕, on a backdrop click, or on Escape (script.js). */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(7,11,18,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: sd-fade .18s var(--ease-out);
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal-card {
  width: 100%; max-width: 500px; background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: 24px;
  box-shadow: var(--shadow-xl); overflow: hidden;
  animation: sd-pop .34s var(--ease-spring);
}
.modal-card:focus { outline: none; }

/* header */
.modal-head { position: relative; padding: 28px 28px 22px; background: var(--gradient-ink); overflow: hidden; }
.modal-head-glow {
  position: absolute; top: -70px; left: -40px; width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(circle, rgba(0,214,214,.4), transparent 68%); filter: blur(24px); pointer-events: none;
}
.modal-x {
  position: absolute; top: 16px; left: 16px; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ease-out);
}
.modal-x:hover { background: rgba(255,255,255,.18); }
.modal-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.2;
  color: #fff; margin: 14px 0 8px;
}
.modal-desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-200); margin: 0; max-width: 26rem; }

/* option rows */
.modal-opts { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-opt {
  display: flex; align-items: center; gap: 15px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--border-subtle); background: var(--white); text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.modal-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.modal-opt-wa:hover { border-color: var(--green-300); }
.modal-opt-mail:hover { border-color: var(--indigo-300); }
.modal-opt-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.modal-opt-ico.wa { background: var(--green-100); border: 1px solid var(--green-200); }
.modal-opt-ico.mail { background: var(--brand-subtle); border: 1px solid var(--indigo-100); }
.modal-opt-body { flex: 1; min-width: 0; }
.modal-opt-title-row { display: flex; align-items: center; gap: 8px; }
.modal-opt-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-strong); }
.modal-opt-badge {
  font-size: 11px; font-weight: 700; color: var(--green-700); background: var(--green-50);
  border: 1px solid var(--green-200); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.modal-opt-desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.modal-opt-contact { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-body); margin-top: 5px; text-align: right; }
.modal-opt-chev { flex-shrink: 0; color: var(--text-subtle); }

/* footer note */
.modal-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px 20px; font-size: 12.5px; color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-card { animation: none; }
  .modal-opt { transition: none; }
}

/* ============================================================
   Legal pages (privacy.html, terms.html)
   Standalone Hebrew/RTL prose pages that reuse the tokens above.
   ============================================================ */
.legal-page { background: var(--surface-page); color: var(--text-body); min-height: 100vh; }
.legal-topbar {
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border-subtle);
}
.legal-topbar-inner {
  max-width: 820px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.legal-topbar a.legal-home { display: inline-flex; align-items: center; }
.legal-topbar img { height: 24px; }
.legal-back {
  font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--brand);
  text-decoration: none; white-space: nowrap;
}
.legal-back:hover { color: var(--brand-hover); }
.legal {
  max-width: 820px; margin: 0 auto; padding: 44px 24px 88px;
  font-family: var(--font-body); font-size: 16px; line-height: var(--leading-relaxed);
}
.legal h1 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.9rem, 4vw, var(--text-2xl)); color: var(--text-strong);
  line-height: var(--leading-snug); margin: 0 0 8px;
}
.legal .legal-updated { font-size: 13.5px; color: var(--text-muted); margin: 0 0 8px; }
.legal .legal-intro { color: var(--text-body); margin: 20px 0 4px; }
.legal h2 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); color: var(--text-strong); margin: 34px 0 10px;
}
.legal p, .legal li { color: var(--text-body); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-inline-start: 22px; }
.legal li { margin: 0 0 6px; }
.legal a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brand-hover); }
.legal .legal-entity-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px 22px; margin: 22px 0; box-shadow: var(--shadow-xs);
}
.legal .legal-entity-card p { margin: 0 0 4px; font-size: 14.5px; }
.legal .legal-entity-card .ltr { unicode-bidi: isolate; }
.legal .legal-entity-card strong { color: var(--text-strong); }
.legal .legal-note {
  font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-subtle);
  margin-top: 40px; padding-top: 18px;
}
.legal .ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); }