.interactive-experience {
  padding: clamp(72px, 8vw, 118px) clamp(14px, 3vw, 44px);
  background:
    radial-gradient(circle at 8% 12%, rgba(21, 166, 106, 0.12), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(36, 88, 211, 0.08), transparent 24%),
    #071611;
  color: #fff;
  overflow: hidden;
}

.premium-landing #funcoes.interactive-experience {
  width: 100%;
  max-width: none;
  margin: 0;
}

.experience-heading {
  width: min(100%, 1480px);
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 48px;
  align-items: end;
}

.experience-heading .eyebrow { color: #65e6b1; }

.experience-heading h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(38px, 5vw, 70px);
  line-height: 1.02;
}

.experience-heading p {
  margin: 0;
  color: #b9cbc4;
  font-size: 18px;
  line-height: 1.7;
}

.experience-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #e8fff5;
  font-size: 13px;
  font-weight: 800;
}

.experience-hint i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35dc94;
  box-shadow: 0 0 0 7px rgba(53, 220, 148, 0.13);
}

.experience-frame {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: #111b18;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.demo-feedback-toast {
  position: absolute;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  max-width: min(360px, calc(100% - 36px));
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(101, 230, 177, .35);
  border-radius: 10px;
  background: rgba(5, 37, 27, .96);
  color: #fff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

.demo-feedback-toast.visible { opacity: 1; transform: translateY(0); }
.demo-feedback-toast strong { font-size: 11px; }
.demo-feedback-toast span { color: #b9d7ca; font-size: 9px; line-height: 1.35; }

.experience-window-bar {
  min-height: 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #101a17;
  color: #9fb2aa;
  font-size: 12px;
}

.experience-window-bar div { display: flex; gap: 7px; }

.experience-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b67;
}

.experience-window-bar i:nth-child(2) { background: #f4bd4e; }
.experience-window-bar i:nth-child(3) { background: #43c85a; }
.experience-window-bar strong { justify-self: end; color: #dff8ec; }

.experience-scroll {
  width: 100%;
  overflow: hidden;
}

.experience-app {
  width: 100%;
  min-width: 0;
  height: 820px;
  display: grid;
  grid-template-columns:
    clamp(46px, 3.25vw, 54px)
    clamp(180px, 18vw, 300px)
    minmax(280px, 1fr)
    clamp(510px, 38vw, 680px);
  background: #fff;
  color: #17212b;
}

.whatsapp-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 6px;
  border-right: 1px solid #e4e7e9;
  background: #f0f2f5;
}

.whatsapp-rail button {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #54656f;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.whatsapp-rail button.active { background: #dfe4e7; color: #111b21; }

.whatsapp-rail button span {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 10px;
}

.whatsapp-rail > div { flex: 1; }

.whatsapp-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #0e7657, #27b783);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.whatsapp-list {
  border-right: 1px solid #e1e5e7;
  background: #fff;
  overflow: hidden;
}

.whatsapp-list > header {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.whatsapp-list > header strong { font-size: 22px; }
.whatsapp-list > header div { display: flex; gap: 18px; font-size: 20px; }

.whatsapp-search {
  height: 40px;
  margin: 0 14px 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  background: #f0f2f5;
  color: #667781;
}

.whatsapp-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #667781;
  font: inherit;
  font-size: 12px;
}

.whatsapp-filters { display: flex; gap: 7px; padding: 0 14px 10px; }

.whatsapp-filters span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0f2f5;
  color: #54656f;
  font-size: 11px;
  font-weight: 700;
}

.whatsapp-filters span.active { background: #e7fce9; color: #008069; }

.archived-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  color: #54656f;
  font-size: 12px;
}

.archived-row span { color: #00a884; font-size: 18px; }
.archived-row small { color: #667781; }
.demo-chat-list { display: grid; }

.demo-chat-list article {
  min-height: 72px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid #eef0f1;
}

.demo-chat-list article.active { background: #f0f2f5; }
.demo-chat-list article > div { min-width: 0; }

.demo-chat-list strong,
.demo-chat-list p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-chat-list strong { font-size: 13px; }
.demo-chat-list p { margin: 5px 0 0; color: #667781; font-size: 11px; }
.demo-chat-list small { align-self: start; margin-top: 8px; color: #8696a0; font-size: 9px; }

.chat-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.chat-avatar.green { background: linear-gradient(135deg, #0d8d64, #5ed5a8); }
.chat-avatar.blue { background: linear-gradient(135deg, #1757a6, #4db0e8); }
.chat-avatar.purple { background: linear-gradient(135deg, #6d45aa, #b08ae8); }
.chat-avatar.orange { background: linear-gradient(135deg, #d16924, #f3ab5a); }
.chat-avatar.dark { background: linear-gradient(135deg, #263944, #6b7d86); }
.chat-avatar.pink { background: linear-gradient(135deg, #b24378, #ef8ab9); }

.whatsapp-conversation {
  min-width: 0;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 62px;
  background: #efeae2;
  overflow: hidden;
}

.conversation-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #d9dedf;
  background: #f0f2f5;
}

.conversation-header > div { min-width: 0; }
.conversation-header strong, .conversation-header small { display: block; }
.conversation-header strong { font-size: 13px; }
.conversation-header small { margin-top: 3px; color: #667781; font-size: 10px; }
.conversation-actions { display: flex; gap: 20px; color: #54656f; font-size: 19px; }

.conversation-canvas {
  position: relative;
  min-height: 0;
  padding: 26px 32px 30px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 20% 18%, rgba(106, 129, 122, 0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 56%, rgba(106, 129, 122, 0.07) 0 2px, transparent 3px),
    linear-gradient(rgba(239, 234, 226, 0.94), rgba(239, 234, 226, 0.94));
  background-size: 44px 44px, 52px 52px, auto;
}

.conversation-day {
  width: max-content;
  display: block;
  margin: 0 auto 18px;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #667781;
  font-size: 10px;
  box-shadow: 0 1px 2px rgba(11, 20, 17, 0.08);
}

.demo-message {
  position: relative;
  width: max-content;
  max-width: 66%;
  margin-bottom: 8px;
  padding: 9px 12px 18px;
  border-radius: 8px;
  background: #fff;
  color: #26333a;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(11, 20, 17, 0.1);
}

.demo-message.outgoing { margin-left: auto; background: #d9fdd3; }

.demo-message small {
  position: absolute;
  right: 7px;
  bottom: 4px;
  color: #667781;
  font-size: 8px;
}

.feature-story {
  width: min(100%, 520px);
  margin: 22px auto 0;
  padding: 24px;
  border: 1px solid rgba(0, 128, 105, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 50px rgba(44, 62, 55, 0.16);
}

.feature-story-top { display: flex; align-items: center; justify-content: space-between; }

.feature-story-top span {
  color: #008069;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-story-top i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e4f8ef;
  color: #08765b;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.experience-module-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.feature-story h3 { margin: 12px 0 8px; color: #17212b; font-size: 24px; line-height: 1.08; }
.feature-story > p { margin: 0; color: #58666d; font-size: 12px; line-height: 1.55; }
.feature-story > strong { display: block; margin-top: 10px; color: #08765b; font-size: 12px; }
.feature-story-benefits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.feature-story-benefits span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #f0f7f4;
  color: #40544c;
  font-size: 9px;
  font-weight: 800;
}

.feature-story-video { margin-top: 14px; border-radius: 12px; overflow: hidden; }
.feature-story-video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }

.feature-story-video .empty-media {
  min-height: 92px;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px dashed #b8cdc4;
  background: #f6fbf9;
  color: #61706b;
  text-align: center;
}

.feature-story-video .empty-media::before {
  content: "▶";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #dff8ec;
  color: #08765b;
}

.feature-story-video .empty-media strong { color: #284039; font-size: 10px; }
.feature-story-video .empty-media span { font-size: 9px; }
.feature-story > a { display: block; margin-top: 14px; color: #008069; font-size: 11px; font-weight: 900; }

.conversation-composer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 9px 14px;
  background: #f0f2f5;
  color: #54656f;
  font-size: 20px;
}

.conversation-composer div {
  padding: 12px 16px;
  border-radius: 9px;
  background: #fff;
  color: #8696a0;
  font-size: 10px;
}

.crm-demo {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 194px;
  border-left: 1px solid #d8e1e6;
  background: #f6f9fb;
  overflow: hidden;
}

.crm-demo:not(.rail-labels-open) {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.crm-demo.rail-labels-open {
  grid-template-columns: minmax(0, 1fr) 194px;
}

.crm-demo.rail-labels-open .experience-tool-rail button {
  width: 100%;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  padding-inline: 9px;
}

.crm-demo.rail-labels-open .experience-tool-rail button span {
  display: block;
}

.crm-demo:not(.rail-labels-open) .experience-tool-rail button {
  width: 38px;
  grid-template-columns: 1fr;
  place-items: center;
  padding-inline: 0;
}

.crm-demo:not(.rail-labels-open) .experience-tool-rail button span {
  display: none;
}

.crm-demo-panel {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 82px 76px 48px minmax(0, 1fr);
  overflow: hidden;
}

.crm-demo-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #dce5ea;
  background: #fff;
}

.crm-demo-header img { width: 132px; }
.crm-demo-header > span { grid-column: 1; color: #557087; font-size: 9px; font-weight: 800; text-align: center; }
.crm-demo-header > div { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 5px; }

.crm-demo-header button {
  width: 29px;
  height: 29px;
  border: 1px solid #ccd8e2;
  border-radius: 7px;
  background: #fff;
  color: #526779;
  font-weight: 900;
}

.crm-demo-lead {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 9px;
  align-items: center;
  margin: 10px 10px 6px;
  padding: 10px;
  border: 1px solid #d5e0e6;
  border-radius: 10px;
  background: #fff;
}

.crm-demo-lead div { min-width: 0; }
.crm-demo-lead strong, .crm-demo-lead small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-demo-lead strong { font-size: 11px; }
.crm-demo-lead small { margin-top: 4px; color: #60778b; font-size: 9px; }

.crm-demo-lead button,
.sample-primary {
  border: 1px solid #a9e4cf;
  border-radius: 8px;
  background: #e8fbf4;
  color: #08765b;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  padding: 8px 9px;
}

.crm-demo-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin: 0 10px 7px;
  padding: 4px;
  border-radius: 9px;
  background: #e9eff3;
}

.crm-demo-tabs span {
  padding: 7px 4px;
  border-radius: 6px;
  color: #607287;
  font-size: 8px;
  font-weight: 900;
  text-align: center;
}

.crm-demo-tabs span.active { background: #fff; color: #08765b; box-shadow: 0 3px 8px rgba(40, 58, 70, 0.1); }

.crm-module-preview {
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #0e9f73 #e8f0ed;
  overscroll-behavior: contain;
  color: #1f2d38;
}

.crm-module-preview::-webkit-scrollbar { width: 7px; }
.crm-module-preview::-webkit-scrollbar-track { border-radius: 999px; background: #e8f0ed; }
.crm-module-preview::-webkit-scrollbar-thumb { border-radius: 999px; background: #0e9f73; }

.demo-module-heading { margin-bottom: 10px; }
.demo-module-heading > span { color: #08765b; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-module-heading h3 { margin: 4px 0 3px; font-size: 16px; }
.demo-module-heading p { margin: 0; color: #698092; font-size: 9px; }

.experience-tool-rail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 7px;
  border-left: 1px solid #d8e3e7;
  background: #f5fffb;
  overflow-y: hidden;
  scrollbar-width: none;
}

.experience-tool-rail button {
  position: relative;
  width: 100%;
  min-height: 31px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid #bce7d6;
  border-radius: 8px;
  background: #fff;
  color: #08765b;
  cursor: pointer;
}

.experience-tool-rail button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.experience-tool-rail button span {
  min-width: 0;
  overflow: hidden;
  color: #245448;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.experience-tool-rail button.active {
  border-color: #0e9f73;
  background: #0e9f73;
  color: #fff;
  box-shadow: 0 5px 12px rgba(14, 159, 115, 0.24);
}

.experience-tool-rail button.active span { color: #fff; }
.experience-tool-rail button:last-child { margin-top: auto; }

.sample-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 9px; }

.demo-reminder-popup {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #f9c784;
  border-left: 5px solid #f59e0b;
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}

.demo-reminder-popup > header,
.demo-reminder-popup > footer { display: flex; align-items: center; gap: 5px; }
.demo-reminder-popup > header { justify-content: space-between; }
.demo-reminder-popup > header span { padding: 3px 7px; border-radius: 999px; background: #fff0c2; color: #9a5a06; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.demo-reminder-popup > header button { width: 22px; height: 22px; padding: 0; border: 1px solid #d7e2ea; border-radius: 50%; background: #fff; color: #64748b; }
.demo-reminder-popup > div > strong { display: block; font-size: 11px; }
.demo-reminder-popup > div > p { margin: 3px 0; color: #475569; font-size: 8px; }
.demo-reminder-popup > div > small { color: #9a5a06; font-size: 8px; font-weight: 800; }
.demo-reminder-popup > footer { flex-wrap: wrap; }
.demo-reminder-popup button { min-height: 25px; padding: 4px 7px; border: 1px solid #d6e0e8; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 7px; font-weight: 900; }
.demo-reminder-popup button.primary { border-color: #0f8f6f; background: #0f8f6f; color: #fff; }
.demo-reminder-popup button.danger { border-color: #fecaca; background: #fff1f2; color: #b42318; }

.demo-reminder-confirm { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.demo-reminder-confirm > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fee2e2; color: #b42318; font-size: 16px; font-weight: 900; }
.demo-reminder-confirm p { margin: 3px 0 0; color: #64748b; font-size: 8px; line-height: 1.35; }
.demo-reminder-confirm footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 5px; }
.demo-reminder-deleted { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px; border: 1px solid #9ddcc9; border-radius: 10px; background: #ecfdf5; }
.demo-reminder-deleted > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #0f8f6f; color: #fff; font-weight: 900; }
.demo-reminder-deleted strong { font-size: 10px; }
.demo-reminder-deleted p { margin: 2px 0 0; color: #52657d; font-size: 8px; }

.demo-daily-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #f0cf8c;
  border-left: 5px solid #f59e0b;
  border-radius: 12px;
  background: #fffdf7;
}

.demo-daily-heading span { color: #e98500; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-daily-heading h3 { margin: 3px 0; font-size: 18px; line-height: 1; }
.demo-daily-heading p { margin: 0; color: #5b6c82; font-size: 9px; line-height: 1.35; }

.demo-daily-heading > b {
  min-width: 74px;
  padding: 8px;
  border-radius: 12px;
  background: #f59e0b;
  color: #fff;
  font-size: 7px;
  line-height: 1.1;
  text-align: center;
}

.demo-daily-heading > b strong { display: block; font-size: 20px; line-height: .9; }
.demo-daily-refresh { display: flex; justify-content: flex-end; padding: 10px 0; }

.demo-daily-refresh button {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: #0e9f73;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
}

.demo-daily-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }

.demo-daily-kpis article {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 7px 16px rgba(15, 23, 42, .11);
}

.demo-daily-kpis .total { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.demo-daily-kpis .overdue { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.demo-daily-kpis .today { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.demo-daily-kpis strong { font-size: 20px; line-height: 1; }
.demo-daily-kpis span { font-size: 7px; font-weight: 900; line-height: 1.15; }
.demo-daily-list { display: grid; gap: 10px; }

.demo-daily-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d7e2ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
}

.demo-daily-card.has-items { border-color: #fecaca; background: linear-gradient(180deg, #fff1f2, #fff); }
.demo-daily-card header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }

.demo-daily-card header > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #dcfce7;
  color: #047857;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.demo-daily-card.has-overdue header > i { background: #fee2e2; color: #b91c1c; }
.demo-daily-card header strong { display: block; font-size: 12px; }
.demo-daily-card header span { display: block; margin-top: 2px; color: #64748b; font-size: 8px; line-height: 1.25; }

.demo-daily-card header > b {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding-inline: 5px;
  border-radius: 999px;
  background: #0f9f79;
  color: #fff;
  font-size: 12px;
}

.demo-daily-card.has-overdue header > b { background: #ef4444; }
.demo-daily-empty { padding: 9px; border-radius: 9px; background: #f8fafc; color: #64748b; font-size: 9px; text-align: center; }
.demo-daily-items { display: grid; gap: 7px; }

.demo-daily-item {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  border-radius: 10px;
  background: #fff7f7;
}

.demo-daily-item > strong { font-size: 10px; line-height: 1.25; }
.demo-daily-item > span { color: #52657d; font-size: 8px; line-height: 1.3; }
.demo-daily-item > p { margin: 0; color: #334155; font-size: 9px; line-height: 1.35; }
.demo-daily-item > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.demo-daily-item button,
.demo-daily-card footer button {
  padding: 6px 7px;
  border: 1px solid #d6e0e8;
  border-radius: 7px;
  background: #fff;
  color: #263642;
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
}

.demo-daily-card footer { display: flex; justify-content: flex-end; }

.demo-calendar-actions { display: flex; justify-content: flex-end; gap: 5px; margin-bottom: 9px; }
.demo-calendar-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #9bbafa;
  border-left: 5px solid #2563eb;
  border-radius: 12px;
  background: #f7faff;
}
.demo-calendar-heading span { color: #2563eb; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-calendar-heading h3 { margin: 3px 0; font-size: 18px; line-height: 1; }
.demo-calendar-heading p { margin: 0; color: #5b6c82; font-size: 9px; }
.demo-calendar-heading > b { min-width: 78px; padding: 8px; border-radius: 12px; background: #2563eb; color: #fff; font-size: 7px; line-height: 1.1; text-align: center; box-shadow: 0 7px 16px rgba(37, 99, 235, .2); }
.demo-calendar-heading > b strong { display: block; font-size: 20px; line-height: .95; }
.demo-calendar-actions button,
.demo-appointment-filters button,
.demo-appointment-form button,
.demo-appointment-list button { padding: 6px 8px; border: 1px solid #d3dfe7; border-radius: 7px; background: #fff; color: #263642; font-family: inherit; font-size: 8px; font-weight: 800; line-height: 1; }
.demo-calendar-actions button.primary,
.demo-appointment-form > button { border-color: #0e9f73; background: #0e9f73; color: #fff; }
.demo-calendar-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 9px; padding: 8px; border: 1px solid #d7e2e8; border-radius: 9px; background: #fff; }
.demo-calendar-filter label { display: grid; gap: 4px; color: #64748b; font-size: 7px; }
.demo-calendar-filter strong { padding: 6px; border: 1px solid #dce5ea; border-radius: 6px; color: #263642; font-size: 8px; font-weight: 700; }
.demo-calendar-filter > span { grid-column: 1 / -1; color: #2563eb; font-size: 8px; font-weight: 900; }
.demo-calendar-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 9px; }
.demo-calendar-kpis article { min-width: 0; padding: 7px 4px; border-radius: 8px; color: #fff; text-align: center; }
.demo-calendar-kpis .total { background: linear-gradient(135deg,#0f766e,#14b8a6); }
.demo-calendar-kpis .appointment { background: linear-gradient(135deg,#0e7490,#22d3ee); }
.demo-calendar-kpis .task { background: linear-gradient(135deg,#2563eb,#38bdf8); }
.demo-calendar-kpis .finance { background: linear-gradient(135deg,#059669,#34d399); }
.demo-calendar-kpis .note { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.demo-calendar-kpis .birthday { background: linear-gradient(135deg,#f59e0b,#f97316); }
.demo-calendar-kpis strong, .demo-calendar-kpis span { display: block; }
.demo-calendar-kpis strong { font-size: 14px; }
.demo-calendar-kpis span { margin-top: 2px; overflow: hidden; font-size: 6px; font-weight: 900; text-overflow: ellipsis; }
.demo-calendar-board { padding: 8px; border: 1px solid #d5e0ea; border-radius: 10px; background: #fff; }
.demo-calendar-board > header,
.demo-calendar-board > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.demo-calendar-board > header strong { padding: 3px; color: #64748b; font-size: 7px; text-align: center; }
.demo-calendar-board article { min-height: 52px; padding: 5px; border: 1px solid #e1e8ef; border-radius: 7px; background: #f8fafc; overflow: hidden; }
.demo-calendar-board article.today { border-color: #34d399; background: #ecfdf5; }
.demo-calendar-board article.has-item { background: #fff; }
.demo-calendar-board article > strong { display: block; font-size: 9px; }
.demo-calendar-board article > span { display: block; margin-top: 13px; color: #94a3b8; font-size: 6px; text-align: center; }
.demo-calendar-board article > i { display: block; width: 6px; height: 6px; margin: 4px 0; border-radius: 50%; background: #2563eb; }
.demo-calendar-board article > i.appointment { background: #0e7490; }
.demo-calendar-board article > i.finance { background: #059669; }
.demo-calendar-board article > i.note { background: #7c3aed; }
.demo-calendar-board article > i.birthday { background: #f59e0b; }
.demo-calendar-board article > small { display: block; overflow: hidden; font-size: 6px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.demo-calendar-board.full-month > div > article { position: relative; min-height: 88px; overflow: visible; }
.demo-calendar-board.full-month > div > article.empty { min-height: 88px; border-color: transparent; background: transparent; }
.demo-calendar-board.full-month > div > article:hover,
.demo-calendar-board.full-month > div > article:focus-within { z-index: 30; }
.demo-calendar-board.full-month article > header { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.demo-calendar-board.full-month article > header b { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: #0f766e; color: #fff; font-size: 7px; }
.demo-calendar-dots { display: flex; gap: 3px; min-height: 6px; margin: 4px 0; }
.demo-calendar-dots i { width: 6px; height: 6px; border-radius: 50%; background: #2563eb; }
.demo-calendar-dots i.finance { background: #059669; }
.demo-calendar-dots i.appointment { background: #0e7490; }
.demo-calendar-dots i.note { background: #7c3aed; }
.demo-calendar-dots i.birthday { background: #f59e0b; }

.demo-calendar-entry {
  position: relative;
  width: 100%;
  display: grid;
  gap: 1px;
  margin-top: 3px;
  padding: 5px;
  overflow: visible;
  border: 1px solid #dce5ed;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  background: #fff;
  color: #17212f;
  font-family: inherit;
  text-align: left;
  cursor: help;
}

.demo-calendar-entry.finance { border-left-color: #059669; }
.demo-calendar-entry.appointment { border-left-color: #0e7490; }
.demo-calendar-entry.note { border-left-color: #7c3aed; }
.demo-calendar-entry.birthday { border-left-color: #f59e0b; }
.demo-calendar-entry > span:first-child { color: #64748b; font-size: 5px; font-weight: 900; }
.demo-calendar-entry > strong { overflow: hidden; font-size: 7px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.demo-calendar-entry > small { overflow: hidden; color: #64748b; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.demo-calendar-more { display: block; margin-top: 3px; color: #08765b; font-size: 6px; font-weight: 900; }

.demo-calendar-popover {
  position: absolute;
  z-index: 100;
  top: calc(100% + 7px);
  left: 50%;
  width: min(270px, calc(100vw - 52px));
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d7e2ea;
  border-radius: 10px;
  background: #fff;
  color: #1f2d38;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity .14s ease, transform .14s ease;
}

.demo-calendar-entry.edge-left .demo-calendar-popover { left: -4px; transform: translate(0, 5px); }
.demo-calendar-entry.edge-right .demo-calendar-popover { right: -4px; left: auto; transform: translate(0, 5px); }
.demo-calendar-entry:hover .demo-calendar-popover,
.demo-calendar-entry:focus-visible .demo-calendar-popover { opacity: 1; transform: translate(-50%, 0); }
.demo-calendar-entry.edge-left:hover .demo-calendar-popover,
.demo-calendar-entry.edge-left:focus-visible .demo-calendar-popover,
.demo-calendar-entry.edge-right:hover .demo-calendar-popover,
.demo-calendar-entry.edge-right:focus-visible .demo-calendar-popover { transform: translate(0, 0); }
.demo-calendar-popover > i { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-style: normal; }
.demo-calendar-popover > i em,
.demo-calendar-popover > i b { padding: 4px 6px; border-radius: 999px; font-size: 7px; font-style: normal; }
.demo-calendar-popover > i em { background: #dbeafe; color: #2563eb; }
.demo-calendar-popover > i b { background: #fee2e2; color: #dc2626; }
.demo-calendar-popover > strong { font-size: 11px; white-space: normal; }
.demo-calendar-popover dl { display: grid; grid-template-columns: .65fr 1.35fr; gap: 7px; margin: 0; }
.demo-calendar-popover dl div { min-width: 0; }
.demo-calendar-popover dt { color: #64748b; font-size: 7px; font-weight: 900; }
.demo-calendar-popover dd { margin: 3px 0 0; color: #263642; font-size: 8px; font-weight: 800; overflow-wrap: anywhere; }
.demo-calendar-popover > p { margin: 0; padding-top: 8px; border-top: 1px solid #dce5ea; color: #334155; font-size: 8px; line-height: 1.4; }
.demo-appointment-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 9px; }
.demo-appointment-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #9dd9cc;
  border-left: 5px solid #0f806c;
  border-radius: 12px;
  background: #f5fffb;
}
.demo-appointment-heading span { color: #0f806c; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-appointment-heading h3 { margin: 3px 0; font-size: 18px; line-height: 1; }
.demo-appointment-heading p { margin: 0; color: #5b6c82; font-size: 8px; line-height: 1.35; }
.demo-appointment-heading > b { min-width: 70px; padding: 9px 7px; border-radius: 12px; background: #0f806c; color: #fff; font-size: 7px; line-height: 1.1; text-align: center; box-shadow: 0 7px 16px rgba(15, 128, 108, .2); }
.demo-appointment-heading > b strong { display: block; font-size: 19px; line-height: .95; }
.demo-appointment-kpis article { min-height: 48px; padding: 9px; border: 1px solid #cfe3dc; border-radius: 9px; background: #fff; color: #0f806c; }
.demo-appointment-kpis article.empty strong { visibility: hidden; }
.demo-appointment-kpis strong, .demo-appointment-kpis span { display: block; }
.demo-appointment-kpis strong { font-size: 17px; }
.demo-appointment-kpis span { margin-top: 3px; color: #587068; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.demo-appointment-filters { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr) auto; gap: 5px; align-items: end; margin-bottom: 9px; padding: 8px; border: 1px solid #d7e2e8; border-radius: 9px; background: #fff; }
.demo-appointment-filters label { min-width: 0; color: #64748b; font-size: 7px; }
.demo-appointment-filters strong { display: block; margin-top: 3px; padding: 6px; overflow: hidden; border: 1px solid #dce5ea; border-radius: 6px; color: #263642; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.demo-appointment-form { margin-bottom: 9px; padding: 9px; border: 1px solid #bfe5d8; border-radius: 10px; background: #f3fcf8; }
.demo-appointment-form > strong { display: block; margin-bottom: 7px; font-size: 9px; }
.demo-appointment-form > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.demo-appointment-form label { color: #64748b; font-size: 7px; }
.demo-appointment-form label span { display: block; margin-top: 3px; padding: 6px; border: 1px solid #d5e4df; border-radius: 6px; background: #fff; color: #263642; font-size: 7px; }
.demo-appointment-form label.message { grid-column: 1 / -1; }
.demo-appointment-form label.message span { min-height: 70px; }
.demo-appointment-form > button { width: 100%; margin-top: 7px; }
.demo-appointment-list { display: grid; gap: 7px; }
.demo-appointment-list > article { padding: 9px; border: 1px solid #d7e2e8; border-left: 4px solid #0e7490; border-radius: 9px; background: #fff; }
.demo-appointment-list header { display: flex; justify-content: space-between; align-items: center; }
.demo-appointment-list header span { color: #0e7490; font-size: 10px; font-weight: 900; }
.demo-appointment-list header b { padding: 4px 6px; border-radius: 999px; background: #e5f8f1; color: #08765b; font-size: 6px; text-transform: uppercase; }
.demo-appointment-list > article > strong, .demo-appointment-list > article > small { display: block; }
.demo-appointment-list > article > strong { margin-top: 6px; font-size: 10px; }
.demo-appointment-list > article > small { margin-top: 3px; color: #64748b; font-size: 7px; }
.demo-appointment-list p { margin: 6px 0; color: #334155; font-size: 8px; line-height: 1.35; }
.demo-appointment-list article > div { display: flex; flex-wrap: wrap; gap: 5px; }

.demo-appointment-week-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #b9cafa;
  border-radius: 9px;
  background: #eef2ff;
}
.demo-appointment-week-nav button { width: 28px; height: 28px; border: 1px solid #d7e0e7; border-radius: 7px; background: #fff; color: #263642; font-weight: 900; }
.demo-appointment-week-nav div { text-align: center; }
.demo-appointment-week-nav strong, .demo-appointment-week-nav span { display: block; }
.demo-appointment-week-nav strong { color: #4338ca; font-size: 9px; }
.demo-appointment-week-nav span { margin-top: 2px; color: #6366f1; font-size: 7px; }
.demo-appointment-week { padding: 9px; border: 1px solid #99ead6; border-radius: 10px; background: #f7fffc; }
.demo-appointment-week > header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #0f6f61; font-size: 8px; }
.demo-appointment-week .week-labels,
.demo-appointment-week .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.demo-appointment-week .week-labels b { padding: 3px; color: #607287; font-size: 7px; text-align: center; }
.demo-appointment-week .week-grid > article { position: relative; min-height: 92px; padding: 6px; border: 1px solid #dce5ed; border-radius: 8px; background: #f8fafc; }
.demo-appointment-week .week-grid > article.today { z-index: 2; border-color: #34d399; background: #effdf7; }
.demo-appointment-week .week-grid > article > header { display: flex; align-items: center; justify-content: space-between; }
.demo-appointment-week .week-grid > article > header strong { font-size: 9px; }
.demo-appointment-week .week-grid > article > header b { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: #0f806c; color: #fff; font-size: 7px; }
.demo-appointment-week .week-grid > article > span { display: block; margin-top: 24px; color: #94a3b8; font-size: 7px; font-weight: 800; text-align: center; }
.demo-appointment-week .week-grid > article > i { display: block; width: 6px; height: 6px; margin: 5px 0; border-radius: 50%; background: #0e7490; }
.demo-appointment-entry {
  position: relative;
  width: 100%;
  display: grid;
  gap: 1px;
  padding: 5px;
  overflow: visible;
  border: 1px solid #cfe1e9;
  border-left: 3px solid #0e7490;
  border-radius: 6px;
  background: #fff;
  color: #17212f;
  font-family: inherit;
  text-align: left;
  cursor: help;
}
.demo-appointment-entry > span:first-child { color: #64748b; font-size: 5px; font-weight: 900; }
.demo-appointment-entry > strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.demo-appointment-entry > small { overflow: hidden; color: #64748b; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.demo-appointment-entry .demo-calendar-popover { top: auto; bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, -5px); }
.demo-appointment-entry:hover .demo-calendar-popover,
.demo-appointment-entry:focus-visible .demo-calendar-popover { opacity: 1; transform: translate(-50%, 0); }

.sample-kpis article {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid #d6e1e7;
  border-radius: 9px;
  background: #fff;
}

.sample-kpis strong { color: #08765b; font-size: 16px; }
.sample-kpis span { color: #718391; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.sample-kpis.finance { grid-template-columns: repeat(2, 1fr); }
.sample-rows { display: grid; gap: 6px; }

.sample-rows article {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #d7e2e8;
  border-radius: 9px;
  background: #fff;
}

.sample-rows article > span { color: #08765b; font-size: 9px; font-weight: 900; }
.sample-rows article div { min-width: 0; }
.sample-rows strong, .sample-rows small { display: block; }
.sample-rows strong { font-size: 9px; }
.sample-rows small { margin-top: 3px; color: #718391; font-size: 8px; }

.sample-rows em {
  padding: 5px 6px;
  border-radius: 999px;
  background: #e9f9f2;
  color: #08765b;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.sample-primary { width: 100%; margin-top: 9px; cursor: default; }
.sample-helper, .phone-opener-sample > small { color: #70818d; font-size: 8px; line-height: 1.5; }

.sample-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #d6e1e7;
  border-radius: 9px 9px 0 0;
  background: #fff;
  font-size: 9px;
}

.sample-calendar-head button { border: 0; background: transparent; color: #08765b; }

.sample-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 8px;
  padding: 7px;
  border: 1px solid #d6e1e7;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: #fff;
}

.sample-calendar span {
  position: relative;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #647887;
  font-size: 7px;
}

.sample-calendar span.today { background: #0e9f73; color: #fff; font-weight: 900; }

.sample-calendar span.busy::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff934e;
}

.privacy-preview,
.sample-textarea,
.note-sample,
.quote-sample,
.phone-opener-sample,
.signature-sample,
.ai-analysis,
.ai-suggestion,
.campaign-card,
.sample-balance {
  margin-bottom: 8px;
  padding: 11px;
  border: 1px solid #d6e1e7;
  border-radius: 10px;
  background: #fff;
}

.blurred { width: 55%; height: 12px; margin-bottom: 8px; border-radius: 5px; background: #9ba8b0; filter: blur(4px); }
.blurred.wide { width: 72%; }
.blurred.message { width: 100%; height: 40px; margin: 0; }

.sample-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px;
  border: 1px solid #d6e1e7;
  border-radius: 9px;
  background: #fff;
  font-size: 9px;
  font-weight: 900;
}

.sample-toggle i { width: 29px; height: 16px; padding: 2px; border-radius: 999px; background: #aab7be; }
.sample-toggle i::after { content: ""; width: 12px; height: 12px; display: block; border-radius: 50%; background: #fff; }
.sample-toggle.active i { background: #0e9f73; }
.sample-toggle.active i::after { margin-left: 13px; }

.demo-privacy-overlay {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(56, 68, 84, .55);
  backdrop-filter: blur(4px);
}

.demo-privacy-dialog {
  width: min(100%, 540px);
  max-height: calc(100% - 4px);
  overflow: auto;
  border-radius: 14px;
  background: #fff;
  color: #17212b;
  box-shadow: 0 24px 58px rgba(15, 23, 42, .32);
}

.demo-privacy-dialog > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 17px 18px 13px;
  border-bottom: 1px solid #dce4eb;
}

.demo-privacy-dialog > header span { color: #08765b; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-privacy-dialog > header h3 { margin: 4px 0; font-size: 20px; line-height: 1; }
.demo-privacy-dialog > header p { margin: 0; color: #5c7085; font-size: 9px; }
.demo-privacy-dialog > header button { width: 30px; height: 30px; border: 1px solid #d3dde5; border-radius: 8px; background: #fff; color: #162432; font-size: 19px; font-weight: 700; }
.demo-privacy-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 18px 10px; }

.demo-privacy-groups fieldset {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid #d4dee7;
  border-radius: 11px;
}

.demo-privacy-groups legend { padding: 0 5px; color: #324459; font-size: 9px; font-weight: 900; }
.demo-privacy-groups label { min-height: 51px; display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 5px; padding: 9px; border-radius: 8px; background: #f7f8fa; cursor: pointer; }
.demo-privacy-groups label:last-child { margin-bottom: 0; }
.demo-privacy-groups input { width: 15px; height: 15px; margin: 0; accent-color: #0e9f73; }
.demo-privacy-groups label span { color: #324259; font-size: 8px; font-weight: 900; line-height: 1.15; }
.demo-privacy-bulk { display: flex; gap: 7px; padding: 2px 18px 13px; }
.demo-privacy-bulk button { padding: 8px 10px; border: 1px solid #a9e4cf; border-radius: 7px; background: #effdf7; color: #08765b; font-family: inherit; font-size: 9px; font-weight: 900; }

.demo-privacy-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 13px 18px;
  border-top: 1px solid #dce4eb;
  background: #f8fafc;
}

.demo-privacy-dialog > footer button { padding: 10px 12px; border: 1px solid #d3dde5; border-radius: 8px; background: #fff; color: #253443; font-family: inherit; font-size: 9px; font-weight: 900; }
.demo-privacy-dialog > footer button.primary { border-color: #0e9f73; background: #0e9f73; color: #fff; }
.demo-privacy-saved { margin-bottom: 9px; padding: 8px; border: 1px solid #a9e4cf; border-radius: 8px; background: #effdf7; color: #08765b; font-size: 8px; font-weight: 900; }

.demo-products-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #9dd9cc;
  border-left: 5px solid #148764;
  border-radius: 12px;
  background: #f5fffb;
}
.demo-products-heading span { color: #148764; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-products-heading h3 { margin: 3px 0; font-size: 18px; line-height: 1; }
.demo-products-heading p { margin: 0; color: #5b6c82; font-size: 9px; }
.demo-products-heading > b { min-width: 70px; padding: 9px 7px; border-radius: 12px; background: #148764; color: #fff; font-size: 7px; line-height: 1.1; text-align: center; box-shadow: 0 7px 16px rgba(20, 135, 100, .2); }
.demo-products-heading > b strong { display: block; font-size: 19px; line-height: .95; }
.demo-product-filters { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) auto; gap: 6px; align-items: end; margin-bottom: 9px; padding: 9px; border: 1px solid #d5dfe7; border-radius: 9px; background: #fff; }
.demo-product-filters label { min-width: 0; color: #52657d; font-size: 8px; font-weight: 900; }
.demo-product-filters label span { min-height: 32px; display: flex; align-items: center; margin-top: 4px; padding: 7px; overflow: hidden; border: 1px solid #d6e0e8; border-radius: 7px; color: #334155; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.demo-product-filters button { min-height: 32px; padding: 7px 9px; border: 1px solid #d6e0e8; border-radius: 7px; background: #fff; color: #263642; font-family: inherit; font-size: 8px; font-weight: 900; }
.demo-product-target { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 9px 11px; border: 1px solid #d5dfe7; border-radius: 9px; background: #fff; }
.demo-product-target strong, .demo-product-target span { display: block; }
.demo-product-target strong { font-size: 9px; }
.demo-product-target span, .demo-product-target small { margin-top: 3px; color: #536881; font-size: 8px; }
.demo-product-list { display: grid; gap: 8px; }
.demo-product-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding: 9px; overflow: hidden; border: 1px solid #d5dfe7; border-radius: 9px; background: #fff; }
.demo-product-photo { width: 64px; height: 64px; display: grid; place-content: center; padding: 5px; overflow: hidden; border-radius: 8px; color: #fff; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.demo-product-photo.yellow { background: linear-gradient(145deg, #050505 0 38%, #f5d500 39% 70%, #111 71%); }
.demo-product-photo.blue { background: linear-gradient(145deg, #1066b2, #09b8df 58%, #f5c743); }
.demo-product-photo.orange { background: linear-gradient(145deg, #06162f 0 52%, #f4a20a 53%); }
.demo-product-photo.green { background: linear-gradient(145deg, #e2fff3, #75d4ae 55%, #0b6f55); color: #073d2f; }
.demo-product-photo span, .demo-product-photo small { display: block; font-weight: 950; line-height: 1; }
.demo-product-photo span { font-size: 11px; }
.demo-product-photo small { margin-top: 4px; font-size: 7px; }
.demo-product-body { min-width: 0; }
.demo-product-body > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: start; }
.demo-product-body strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.demo-product-body b { color: #08765b; font-size: 9px; white-space: nowrap; }
.demo-product-body > span { width: fit-content; display: block; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: #dff5ef; color: #08765b; font-size: 7px; font-weight: 900; }
.demo-product-body p { margin: 9px 0 0; color: #52657d; font-size: 8px; line-height: 1.35; }
.demo-product-card footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.demo-product-card footer button { padding: 7px 8px; border: 1px solid #d5dfe7; border-radius: 7px; background: #fff; color: #263642; font-family: inherit; font-size: 8px; font-weight: 900; }
.demo-product-card footer button.primary { flex: 1 1 180px; border-color: #148764; background: #148764; color: #fff; }
.expanded-menu-sample { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.expanded-menu-sample span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d6e1e7;
  border-radius: 8px;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
}

.expanded-menu-sample i { width: 20px; color: #08765b; font-style: normal; text-align: center; }
.sample-search { margin-bottom: 8px; padding: 9px 11px; border: 1px solid #d5e0e6; border-radius: 8px; background: #fff; color: #778895; font-size: 8px; }
.sample-products { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.sample-products article {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #d6e1e7;
  border-radius: 9px;
  background: #fff;
}

.product-art { height: 54px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 13px; font-weight: 900; }
.product-art.green { background: linear-gradient(135deg, #0e7657, #4fd3a3); }
.product-art.blue { background: linear-gradient(135deg, #2458d3, #6fa0ff); }
.sample-products strong { font-size: 9px; }
.sample-products small { color: #718391; font-size: 7px; }
.sample-products b { color: #08765b; font-size: 9px; }

.ai-analysis > span,
.ai-suggestion > span,
.campaign-card > span,
.note-sample > span,
.phone-opener-sample > span {
  color: #08765b;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ai-analysis > strong, .campaign-card > strong { display: block; margin: 6px 0; font-size: 10px; }
.ai-analysis > div, .campaign-progress { height: 6px; border-radius: 999px; background: #e1e8eb; overflow: hidden; }
.ai-analysis > div i, .campaign-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #0e9f73, #42d5a0); }
.campaign-progress i { width: 70%; }
.ai-analysis small, .campaign-card small { display: block; margin-top: 5px; color: #70818d; font-size: 7px; }
.ai-suggestion p, .note-sample p { margin: 6px 0; color: #526774; font-size: 9px; line-height: 1.5; }
.ai-suggestion button { border: 0; background: transparent; color: #08765b; font-size: 8px; font-weight: 900; }
.sample-textarea span { color: #718391; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.sample-textarea p { margin: 7px 0 0; color: #526774; font-size: 9px; line-height: 1.45; }
.sample-textarea.improved { border-color: #9edbc5; background: #f1fcf7; }
.sample-ai-arrow { margin: 6px 0; color: #6c43be; font-size: 8px; font-weight: 900; text-align: center; }

.push-phone {
  margin: 0 auto 9px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, #202a32, #364651);
  color: #fff;
  box-shadow: 0 8px 20px rgba(20, 32, 40, 0.18);
}

.push-phone span, .push-phone small { color: #b8c8d1; font-size: 7px; }
.push-phone strong { display: block; margin: 8px 0 4px; font-size: 10px; }
.push-phone p { margin: 0 0 8px; color: #e1e8ec; font-size: 8px; }
.quote-sample header, .quote-sample footer, .quote-sample > div { display: flex; justify-content: space-between; gap: 8px; }
.quote-sample header span, .quote-sample header em { color: #08765b; font-size: 7px; font-style: normal; font-weight: 900; }
.quote-sample > strong { display: block; margin: 10px 0; font-size: 10px; }
.quote-sample > div { padding: 6px 0; border-top: 1px solid #edf1f3; font-size: 8px; }
.quote-sample footer { margin-top: 6px; padding-top: 8px; border-top: 2px solid #dce5e9; color: #08765b; font-size: 10px; }
.sample-balance { color: #fff; background: linear-gradient(135deg, #08765b, #16aa7d); }
.sample-balance span, .sample-balance small { display: block; font-size: 8px; opacity: 0.82; }
.sample-balance strong { display: block; margin: 5px 0; font-size: 19px; }
.sample-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; overflow: hidden; }
.sample-kanban section { min-width: 0; padding: 7px; border-radius: 8px; background: #edf2f5; }
.sample-kanban section > strong { display: flex; justify-content: space-between; color: #5e7180; font-size: 7px; }
.sample-kanban article { margin-top: 7px; padding: 8px; border-radius: 7px; background: #fff; font-size: 8px; box-shadow: 0 3px 8px rgba(35, 50, 58, 0.08); }
.sample-kanban small { display: block; margin-top: 6px; color: #08765b; font-size: 7px; font-weight: 900; }
.sample-flow { display: grid; gap: 3px; }

.sample-flow article {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 7px;
  padding: 8px;
  border: 1px solid #d7e2e8;
  border-radius: 9px;
  background: #fff;
}

.sample-flow article > span {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e8f9f2;
  color: #08765b;
  font-size: 8px;
  font-weight: 900;
}

.sample-flow article strong { font-size: 9px; }
.sample-flow article small { color: #70818d; font-size: 7px; }
.sample-flow > i { width: 2px; height: 7px; margin-left: 20px; background: #b7c8cf; }
.sample-flow.followup article.current { border-color: #8a66dc; background: #f8f5ff; }
.sample-flow.followup article.current > span { background: #e9e1ff; color: #6c43be; }
.phone-opener-sample label { display: grid; gap: 5px; margin: 10px 0; color: #70818d; font-size: 8px; }
.phone-opener-sample label div { padding: 9px; border: 1px solid #d5e0e6; border-radius: 8px; color: #657885; }
.phone-opener-sample .sample-primary { margin: 0 0 7px; }
.note-sample footer { display: flex; justify-content: space-between; color: #70818d; font-size: 7px; }
.lead-form-sample { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.account-sample { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px; border: 1px solid #d7e2e8; border-radius: 9px; background: #fff; }
.account-sample strong, .account-sample small { display: block; }
.account-sample strong { font-size: 10px; }
.account-sample small { margin-top: 3px; color: #70818d; font-size: 8px; }

.lead-form-sample label {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #d7e2e8;
  border-radius: 8px;
  background: #fff;
  color: #70818d;
  font-size: 7px;
}

.lead-form-sample strong { color: #233640; font-size: 8px; }
.sample-timeline { margin-top: 9px; display: grid; grid-template-columns: 8px 1fr; gap: 5px 8px; }
.sample-timeline > span { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #0e9f73; }
.sample-timeline p { margin: 0; color: #70818d; font-size: 7px; }
.sample-timeline strong { color: #31444f; }
.signature-sample .demo-message { max-width: 100%; margin: 0; background: #d9fdd3; font-size: 8px; }
.signature-sample > strong { display: block; margin-top: 10px; color: #08765b; font-size: 8px; line-height: 1.5; }
.demo-readonly { margin-top: 10px; padding: 7px; border-radius: 7px; background: #edf3f5; color: #768895; font-size: 7px; font-weight: 800; text-align: center; text-transform: uppercase; }
.experience-mobile-modules { display: none; }

.crm-web-showcase {
  width: 100%;
  margin: 0;
  padding: clamp(78px, 8vw, 124px) max(20px, calc((100vw - 1660px) / 2));
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(560px, 1.22fr);
  gap: clamp(46px, 6vw, 96px);
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(50, 229, 157, .2), transparent 27%),
    radial-gradient(circle at 8% 85%, rgba(29, 78, 216, .13), transparent 28%),
    #061a13;
  color: #fff;
  overflow: hidden;
}

.crm-web-copy { position: relative; z-index: 2; }
.crm-web-copy .eyebrow { color: #68e5b4; }
.crm-web-copy h2 { max-width: 700px; margin: 0; font-size: clamp(40px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -.045em; }
.crm-web-copy > p { max-width: 650px; margin: 22px 0 0; color: #b9cdc5; font-size: 17px; line-height: 1.65; }
.crm-web-copy ul { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }
.crm-web-copy li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; align-items: start; color: #a8bdb5; font-size: 13px; line-height: 1.45; }
.crm-web-copy li i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(62, 227, 161, .13); color: #65e6b1; font-style: normal; font-weight: 900; }
.crm-web-copy li strong { display: block; margin-bottom: 2px; color: #f1fff8; font-size: 14px; }
.crm-web-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.crm-web-actions .button.ghost { border-color: rgba(101, 230, 177, .28); background: rgba(255, 255, 255, .05); color: #e8fff5; }
.crm-web-device-wrap { position: relative; z-index: 1; min-width: 0; padding-top: 28px; }
.crm-web-device-wrap::before { content: ""; position: absolute; z-index: -1; inset: 8% -10% 16%; border-radius: 50%; background: rgba(35, 214, 145, .12); filter: blur(54px); }
.crm-web-device-badge { position: absolute; z-index: 4; top: 0; right: 4%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(101, 230, 177, .25); border-radius: 999px; background: rgba(8, 38, 28, .92); color: #dffff1; font-size: 10px; font-weight: 900; box-shadow: 0 12px 30px rgba(0, 0, 0, .24); }
.crm-web-device-badge i { width: 8px; height: 8px; border-radius: 50%; background: #36df99; box-shadow: 0 0 0 6px rgba(54, 223, 153, .12); }
.crm-web-computer { position: relative; padding: 9px; border: 1px solid #43534e; border-radius: 22px 22px 10px 10px; background: linear-gradient(145deg, #293631, #0b110f 68%); box-shadow: 0 38px 90px rgba(0, 0, 0, .52); }
.crm-web-computer-bar { height: 31px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 13px 13px 0 0; background: #111a17; }
.crm-web-computer-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #ff6b67; }
.crm-web-computer-bar > span:nth-child(2) { background: #f4bd4e; }
.crm-web-computer-bar > span:nth-child(3) { background: #43c85a; }
.crm-web-computer-bar strong { flex: 1; color: #84978f; font-size: 8px; font-weight: 700; text-align: center; }
.crm-web-screen { position: relative; overflow: hidden; border-radius: 0 0 5px 5px; background: #eef3f5; aspect-ratio: 1920 / 1263; }
.crm-web-screen img { width: 100%; height: 100%; display: block; object-fit: contain; }
.crm-web-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 18% 78%, rgba(255,255,255,.05)); }
.crm-web-stand { position: relative; height: 48px; }
.crm-web-stand i { width: 15%; height: 42px; display: block; margin: 0 auto; background: linear-gradient(90deg, #131d1a, #4b5b55 48%, #131d1a); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.crm-web-stand span { width: 34%; height: 8px; display: block; margin: -1px auto 0; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, #53615d, #17201d); box-shadow: 0 10px 20px rgba(0,0,0,.28); }
.crm-web-device-wrap > p { max-width: 650px; margin: 22px auto 0; color: #8fa79e; font-size: 11px; line-height: 1.45; text-align: center; }

@media (max-width: 1100px) {
  .experience-heading { grid-template-columns: 1fr; gap: 20px; }
  .crm-web-showcase { grid-template-columns: 1fr; }
  .crm-web-copy { max-width: 820px; }
  .crm-web-device-wrap { width: min(100%, 980px); margin: 0 auto; }
}

@media (max-width: 1080px) {
  .experience-app {
    height: 760px;
    grid-template-columns: minmax(280px, 1fr) minmax(400px, 1.15fr);
  }

  .whatsapp-rail,
  .whatsapp-list {
    display: none;
  }

  .crm-demo,
  .crm-demo.rail-labels-open { grid-template-columns: minmax(0, 1fr) 54px; }
  .experience-tool-rail { gap: 4px; padding: 8px 7px; }

  .experience-tool-rail button,
  .crm-demo.rail-labels-open .experience-tool-rail button {
    width: 38px;
    min-height: 28px;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }

  .experience-tool-rail button span,
  .crm-demo.rail-labels-open .experience-tool-rail button span { display: none; }
  .experience-tool-rail button svg { width: 16px; height: 16px; }

  .conversation-canvas { padding-inline: clamp(16px, 3vw, 28px); }
  .feature-story { padding: 20px; }
  .feature-story h3 { font-size: 21px; }
}

@media (max-width: 680px) {
  .interactive-experience { padding-inline: 12px; }
  .experience-heading { padding-inline: 6px; }
  .experience-heading p { font-size: 16px; }
  .experience-window-bar { grid-template-columns: auto 1fr; }
  .experience-window-bar > span { justify-self: end; text-align: right; }
  .experience-window-bar > strong { display: none; }
  .experience-frame { border-radius: 15px; }

  .experience-app {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .whatsapp-conversation {
    min-height: 710px;
    grid-template-rows: 62px minmax(586px, auto) 62px;
  }

  .conversation-canvas { overflow: visible; }

  .crm-demo {
    height: 720px;
    grid-template-columns: minmax(0, 1fr);
    border-top: 8px solid #071611;
    border-left: 0;
  }

  .crm-demo-panel {
    height: 720px;
    grid-template-rows: 82px 76px 48px minmax(0, 1fr);
  }

  .experience-tool-rail { display: none; }
  .conversation-header { padding-inline: 12px; }
  .conversation-actions { gap: 12px; }
  .conversation-canvas { padding: 22px 14px 26px; }
  .feature-story { padding: 18px; }
  .feature-story h3 { font-size: 20px; }
  .conversation-composer { gap: 8px; padding-inline: 10px; }
  .conversation-composer div { padding-inline: 10px; }
  .demo-privacy-overlay { padding: 8px; }
  .demo-privacy-groups { grid-template-columns: 1fr; }
  .demo-privacy-groups label { min-height: 44px; }
  .demo-product-filters { grid-template-columns: 1fr 1fr; }
  .demo-product-filters button { grid-column: 1 / -1; }

  .experience-mobile-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    padding: 2px;
  }

  .experience-mobile-modules button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid rgba(101, 230, 177, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #cde0d8;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: left;
  }

  .experience-mobile-modules button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: #65e6b1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .experience-mobile-modules button.active { border-color: #45dda0; background: #0e9f73; color: #fff; }
  .experience-mobile-modules button.active svg { stroke: #fff; }
  .crm-web-showcase { padding: 64px 12px; }
  .crm-web-actions { display: grid; }
  .crm-web-actions .button { width: 100%; }
  .crm-web-computer { padding: 5px; border-radius: 14px 14px 7px 7px; }
  .crm-web-computer-bar { height: 25px; border-radius: 9px 9px 0 0; }
  .crm-web-computer-bar strong { font-size: 6px; }
  .crm-web-device-badge { right: 0; }
  .crm-web-stand { height: 35px; }
  .crm-web-stand i { height: 30px; }
}

@media (max-width: 420px) {
  .experience-window-bar { padding-inline: 10px; font-size: 10px; }
  .experience-window-bar div { gap: 5px; }
  .experience-window-bar i { width: 8px; height: 8px; }
  .conversation-composer > span:nth-child(2) { display: none; }
  .conversation-composer { grid-template-columns: auto 1fr auto; }
  .crm-demo-header img { width: 118px; }
  .crm-demo-header button { width: 26px; height: 26px; }
  .crm-demo-tabs span { font-size: 7px; }
  .experience-mobile-modules { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .interactive-experience { padding-inline: 8px; }
  .experience-heading { padding-inline: 4px; }
  .experience-heading h2 { font-size: 34px; }
  .experience-window-bar { min-height: 40px; padding-inline: 8px; }
  .experience-window-bar > span { font-size: 9px; }
  .whatsapp-conversation { min-height: 660px; grid-template-rows: 58px minmax(544px, auto) 58px; }
  .crm-demo,
  .crm-demo-panel { height: 680px; }
  .crm-demo-panel { grid-template-rows: 76px 70px 44px minmax(0, 1fr); }
  .experience-mobile-modules button { min-height: 42px; font-size: 11px; }
}

/* A demonstração é uma janela de produto, não uma captura em tela cheia.
   Limitamos sua largura e altura para ela ficar centralizada e inteira na LP. */
.premium-landing .interactive-experience {
  padding-inline: clamp(24px, 5vw, 88px);
}

.premium-landing .interactive-experience .experience-heading,
.premium-landing .interactive-experience .experience-frame {
  width: min(100%, 1380px);
}

.premium-landing .interactive-experience .experience-frame {
  margin-inline: auto;
  border-radius: 20px;
}

@media (min-width: 1081px) {
  .premium-landing .interactive-experience .experience-app {
    height: 680px;
    grid-template-columns:
      48px
      clamp(190px, 17vw, 250px)
      minmax(300px, 1fr)
      clamp(450px, 34vw, 560px);
  }
}

@media (max-width: 680px) {
  .premium-landing .interactive-experience {
    padding-inline: 12px;
  }

  .premium-landing .interactive-experience .experience-frame {
    width: 100%;
  }
}