.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:not(.rail-labels-open) .experience-tool-rail {
  width: 54px;
  min-width: 54px;
  box-sizing: border-box;
  align-items: center;
}

.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-leads-intro{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;padding:11px 12px;border:1px solid #8bd7cb;border-left:5px solid #0e9f73;border-radius:10px;background:linear-gradient(135deg,#f5fffb,#e9fff6)}.demo-leads-intro span{color:#008d69;font-size:7px;font-weight:900;letter-spacing:.1em}.demo-leads-intro h3{margin:3px 0;color:#263942;font-size:18px}.demo-leads-intro p{margin:0;color:#536a85;font-size:8px}.demo-leads-intro>b{min-width:45px;padding:8px 6px;border-radius:10px;background:#09a77a;color:#fff;font-size:6px;text-align:center}.demo-leads-intro>b strong{display:block;font-size:16px}.demo-leads-toolbar{display:flex;justify-content:flex-end;gap:5px;margin-bottom:9px}.demo-leads-toolbar span{flex:1}.demo-leads-toolbar button,.demo-leads-filter button,.demo-lead-card footer button{padding:7px 8px;border:1px solid #d4e0e8;border-radius:7px;background:#fff;color:#293943;font:inherit;font-size:8px;font-weight:900}.demo-leads-toolbar .primary,.demo-leads-filter .primary,.demo-lead-card footer .primary{border-color:#0e9f73;background:#0e9f73;color:#fff}.demo-leads-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:9px}.demo-leads-stats article{padding:8px;border:1px solid #b9e9db;border-radius:9px;background:#f5fffb}.demo-leads-stats article:nth-child(2){border-color:#a7e3e9;background:#f2feff}.demo-leads-stats article:nth-child(3){border-color:#f7cf96;background:#fffaf1}.demo-leads-stats article:nth-child(4){border-color:#f0bfdc;background:#fff8fc}.demo-leads-stats strong,.demo-leads-stats span{display:block}.demo-leads-stats strong{color:#078561;font-size:17px}.demo-leads-stats article:nth-child(3) strong{color:#c46700}.demo-leads-stats article:nth-child(4) strong{color:#cf2c73}.demo-leads-stats span{margin-top:2px;color:#5b7089;font-size:6px;font-weight:900}.demo-leads-filter{display:grid;grid-template-columns:1.5fr .75fr .8fr .8fr .75fr auto auto;gap:5px;margin-bottom:9px;padding:9px;border:1px solid #d5e0e8;border-radius:9px;background:#fff}.demo-leads-filter label{display:grid;gap:3px;min-width:0}.demo-leads-filter label span{color:#5a7089;font-size:6px;font-weight:900}.demo-leads-filter label b{overflow:hidden;padding:7px;border:1px solid #d3dee7;border-radius:6px;color:#52616e;font-size:7px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}.demo-leads-filter button{align-self:end}.demo-leads-list>header{display:flex;justify-content:space-between;margin:0 2px 7px;color:#293943;font-size:9px}.demo-leads-list>header small{color:#5b7089;font-size:7px}.demo-leads-list{display:grid;gap:7px}.demo-lead-card{display:grid;grid-template-columns:37px minmax(0,1fr) 140px;gap:8px;align-items:center;padding:9px;border:1px solid #d5e0e8;border-left:4px solid #0e9f73;border-radius:9px;background:#fff}.demo-lead-card>i{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#c9f5e3;color:#087e5b;font-size:12px;font-style:normal;font-weight:900}.demo-lead-card div{min-width:0}.demo-lead-card strong,.demo-lead-card small,.demo-lead-card em{display:block}.demo-lead-card strong{overflow:hidden;color:#293943;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.demo-lead-card small,.demo-lead-card em{margin-top:3px;color:#5a7089;font-size:7px;font-style:normal}.demo-lead-card p{display:flex;gap:4px;margin:4px 0 0}.demo-lead-card p b,.demo-lead-card p span{padding:2px 5px;border-radius:99px;background:#ddf8ed;color:#078561;font-size:6px}.demo-lead-card p span{background:#eef2f7;color:#61748b}.demo-lead-card footer{display:grid;gap:4px}.demo-lead-card footer button{width:100%}

.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: 3px;
  min-height: 0;
  padding: 6px;
  border-left: 1px solid #d8e3e7;
  background: #f5fffb;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #0e9f73 #e8f0ed;
}

.experience-tool-rail::-webkit-scrollbar { width: 6px; }
.experience-tool-rail::-webkit-scrollbar-track { border-radius: 999px; background: #e8f0ed; }
.experience-tool-rail::-webkit-scrollbar-thumb { border-radius: 999px; background: #0e9f73; }

.experience-tool-rail button {
  position: relative;
  width: 100%;
  min-height: 25px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid #bce7d6;
  border-radius: 7px;
  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: 9px;
  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-bottom: 1px; }

.demo-copilot-intro,
.demo-copilot-diagnosis,
.demo-copilot-chatbot,
.demo-copilot-warning,
.demo-copilot-specific,
.demo-copilot-test,
.demo-copilot-actions button {
  border: 1px solid #d4e0e8;
  border-radius: 9px;
  background: #fff;
}

.demo-copilot-intro {
  margin-bottom: 8px;
  padding: 11px 12px;
  border-left: 5px solid #13a8ed;
  background: linear-gradient(110deg, #fff, #edf7ff);
}

.demo-copilot-intro span,
.demo-copilot-diagnosis span { color: #078cd0; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.demo-copilot-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }
.demo-copilot-intro p,
.demo-copilot-diagnosis p,
.demo-copilot-warning p,
.demo-copilot-specific p { margin: 0; color: #506985; font-size: 9px; line-height: 1.4; }

.demo-copilot-diagnosis { margin-bottom: 8px; padding: 10px; border-left: 4px solid #14a8ed; }
.demo-copilot-diagnosis header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.demo-copilot-diagnosis strong,
.demo-copilot-chatbot strong,
.demo-copilot-specific strong { display: block; color: #253541; font-size: 11px; }
.demo-copilot-diagnosis header button,
.demo-copilot-specific button { padding: 7px 10px; border: 1px solid #d2dfe8; border-radius: 7px; background: #fff; color: #273642; font: inherit; font-size: 9px; font-weight: 900; }
.demo-copilot-diagnosis p { margin-top: 8px; padding: 8px; border-radius: 6px; background: #f5f9fc; }

.demo-copilot-chatbot { margin-bottom: 8px; padding: 10px; }
.demo-copilot-chatbot label { display: flex; align-items: flex-start; gap: 7px; cursor: default; }
.demo-copilot-chatbot input { width: 15px; height: 15px; margin: 0; accent-color: #0e9f73; }
.demo-copilot-chatbot small { display: block; margin-top: 3px; color: #5c718c; font-size: 9px; font-weight: 700; line-height: 1.35; }

.demo-copilot-warning { margin-bottom: 8px; padding: 10px; border-color: #facda5; background: #fff7ed; }
.demo-copilot-warning strong { color: #ba5306; font-size: 10px; }
.demo-copilot-warning p { margin-top: 4px; color: #93420a; }

.demo-copilot-test { display: block; width: 100%; margin-bottom: 8px; padding: 10px; color: #293843; font: inherit; font-size: 10px; font-weight: 900; }
.demo-copilot-specific { margin-bottom: 8px; padding: 10px; }
.demo-copilot-specific p { margin: 4px 0 9px; }
.demo-copilot-specific button { width: 100%; }
.demo-copilot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.demo-copilot-actions button { min-height: 36px; padding: 7px; color: #273642; font: inherit; font-size: 9px; font-weight: 900; }
.demo-copilot-actions .primary { border-color: #0e9f73; background: #0e9f73; color: #fff; }

.demo-improve-intro,
.demo-improve-form,
.demo-improve-result {
  border: 1px solid #d9d0fc;
  border-radius: 10px;
  background: #fff;
}

.demo-improve-intro { margin-bottom: 9px; padding: 11px 12px; border-left: 5px solid #8147f5; background: linear-gradient(110deg, #fff, #f5f1ff); }
.demo-improve-intro span { color: #7441d8; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.demo-improve-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }
.demo-improve-intro p { margin: 0; color: #536a85; font-size: 9px; line-height: 1.4; }

.demo-improve-form { display: grid; gap: 9px; margin-bottom: 9px; padding: 11px; }
.demo-improve-form label > span,
.demo-improve-result > span { display: block; margin-bottom: 5px; color: #5b7089; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.demo-improve-form label > div,
.demo-improve-editor { min-height: 34px; padding: 9px; border: 1px solid #d5e0e8; border-radius: 8px; color: #34424d; font-size: 9px; line-height: 1.35; }
.demo-improve-editor { min-height: 94px; color: #718091; }
.demo-improve-form button { min-height: 35px; border: 0; border-radius: 8px; background: #0e9f73; color: #fff; font: inherit; font-size: 10px; font-weight: 900; }
.demo-improve-result { padding: 11px; }
.demo-improve-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.demo-improve-actions button { min-height: 31px; border: 1px solid #d5e0e8; border-radius: 8px; background: #fff; color: #34424d; font: inherit; font-size: 9px; font-weight: 900; }
.demo-improve-actions .primary { border-color: #0e9f73; background: #0e9f73; color: #fff; }

.demo-campaign-intro { margin-bottom: 8px; padding: 11px 12px; border: 1px solid #8dc6e7; border-left: 5px solid #007cb7; border-radius: 10px; background: linear-gradient(110deg, #fff, #eff9ff); }
.demo-campaign-intro span { color: #0075ae; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.demo-campaign-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }
.demo-campaign-intro p, .demo-campaign-toolbar small, .demo-campaign-form header p, .demo-campaign-interval p, .demo-campaign-empty p { margin: 0; color: #536a85; font-size: 9px; line-height: 1.35; }
.demo-campaign-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 8px; padding: 9px 10px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }
.demo-campaign-toolbar strong, .demo-campaign-toolbar small { display: block; }
.demo-campaign-toolbar strong, .demo-campaign-form header strong { color: #253541; font-size: 11px; }
.demo-campaign-toolbar span { display: flex; gap: 4px; }
.demo-campaign-toolbar button, .demo-campaign-form header button { padding: 6px 7px; border: 1px solid #d5e0e8; border-radius: 7px; background: #f8fbfd; color: #263641; font: inherit; font-size: 8px; font-weight: 900; }
.demo-campaign-form { padding: 10px; border: 1px solid #9ee0c8; border-radius: 9px; background: #f8fffc; }
.demo-campaign-form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.demo-campaign-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px; }
.demo-campaign-fields label > span, .demo-campaign-interval label > span, .demo-campaign-wide > span, .demo-campaign-message > span { display: block; margin-bottom: 4px; color: #5b7089; font-size: 8px; font-weight: 900; }
.demo-campaign-fields label > div, .demo-campaign-interval label > div, .demo-campaign-wide > div { min-height: 29px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; background: #fff; color: #334550; font-size: 8px; }
.demo-campaign-interval { display: grid; gap: 7px; margin: 9px 0; padding: 9px; border: 1px solid #bcb7ff; border-radius: 8px; background: #f8f7ff; }
.demo-campaign-interval > strong { color: #4935bb; font-size: 10px; }
.demo-campaign-interval > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.demo-campaign-interval > div label b { display: block; padding: 8px 6px; border: 1px solid #d3dee7; border-radius: 7px; background: #fff; color: #334550; font-size: 9px; font-weight: 500; }
.demo-campaign-fields.compact { margin: 9px 0; }
.demo-campaign-wide { display: block; margin: 8px 0; }
.demo-campaign-authorized { display: flex; align-items: center; gap: 7px; margin: 9px 0; color: #2c3b45; font-size: 9px; font-weight: 800; }
.demo-campaign-authorized input { accent-color: #0e9f73; }
.demo-campaign-message { display: block; }
.demo-campaign-message > div { min-height: 60px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; background: #fff; color: #334550; font-size: 9px; line-height: 1.35; }
.demo-campaign-message small { display: block; margin-top: 6px; color: #5b7089; font-size: 7px; font-weight: 900; }
.demo-campaign-save { width: 100%; margin-top: 9px; min-height: 35px; border: 0; border-radius: 8px; background: #0e9f73; color: #fff; font: inherit; font-size: 10px; font-weight: 900; }
.demo-campaign-empty { margin-top: 9px; padding: 10px; border: 1px solid #d5e0e8; border-radius: 8px; background: #fff; }
.demo-campaign-empty strong { color: #c65709; font-size: 10px; }
.demo-campaign-empty p { margin-top: 4px; }

.demo-email-intro { margin-bottom: 9px; padding: 11px 12px; border: 1px solid #9acdb1; border-left: 5px solid #158245; border-radius: 10px; background: linear-gradient(110deg, #fff, #effcf4); }
.demo-email-intro span, .demo-email-lead > div > span, .demo-email-enroll > span { color: #237849; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.demo-email-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }
.demo-email-intro p, .demo-email-banner p, .demo-email-lead small, .demo-email-enroll small { margin: 0; color: #536a85; font-size: 9px; line-height: 1.4; }
.demo-email-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 13px; border-radius: 10px; background: linear-gradient(120deg, #08735b, #015747); color: #fff; }
.demo-email-banner strong { font-size: 11px; }
.demo-email-banner p { margin-top: 3px; color: #d1f3e4; }
.demo-email-banner button { flex: 0 0 auto; padding: 10px; border: 0; border-radius: 8px; background: #fff; color: #2d3c46; font: inherit; font-size: 9px; font-weight: 900; }
.demo-email-lead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 12px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }
.demo-email-lead > div > span, .demo-email-lead strong, .demo-email-lead small { display: block; }
.demo-email-lead strong { margin: 3px 0; color: #283841; font-size: 10px; }
.demo-email-lead b { padding: 5px 8px; border-radius: 999px; background: #ecf3f0; color: #687b76; font-size: 8px; white-space: nowrap; }
.demo-email-enroll { padding: 12px; border: 1px solid #cae9da; border-radius: 10px; background: #f5fcf8; }
.demo-email-enroll > span { display: block; margin-bottom: 6px; color: #5b7089; }
.demo-email-enroll > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.demo-email-enroll strong { min-height: 35px; display: flex; align-items: center; padding: 0 9px; border: 1px solid #d3dee7; border-radius: 8px; background: #fff; color: #334550; font-size: 9px; font-weight: 500; }
.demo-email-enroll button { padding: 0 10px; border: 0; border-radius: 8px; background: #8ac9b1; color: #fff; font: inherit; font-size: 9px; font-weight: 900; }
.demo-email-enroll small { display: block; margin-top: 7px; }

.demo-push-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding: 11px 12px; border: 1px solid #dfc1a2; border-left: 5px solid #ca6606; border-radius: 10px; background: linear-gradient(110deg, #fff, #fff7ed); }
.demo-push-intro span { color: #c15e08; font-size: 8px; font-weight: 900; letter-spacing: .09em; }.demo-push-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }.demo-push-intro p { margin: 0; color: #536a85; font-size: 9px; }.demo-push-intro b { min-width: 47px; padding: 7px; border-radius: 10px; background: #cc6708; color: #fff; font-size: 7px; text-align: center; }.demo-push-intro b strong { display: block; font-size: 16px; }
.demo-push-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }.demo-push-form label.wide, .demo-push-form fieldset, .demo-push-form button, .demo-push-filters { grid-column: 1 / -1; }.demo-push-form label > span, .demo-push-filters label > span { display: block; margin-bottom: 4px; color: #5b7089; font-size: 8px; font-weight: 900; }.demo-push-form label > div, .demo-push-filters label > div { min-height: 30px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; color: #52616e; font-size: 9px; }.demo-push-form label:nth-child(2) > div { min-height: 62px; }
.demo-push-form fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }.demo-push-form legend { margin-bottom: 5px; color: #5b7089; font-size: 8px; font-weight: 900; }.demo-push-form fieldset label { display: flex; align-items: center; gap: 7px; color: #566a82; font-size: 8px; font-weight: 800; }.demo-push-form input { accent-color: #087dff; }.demo-push-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.demo-push-form > button { min-height: 35px; border: 0; border-radius: 8px; background: #0e9f73; color: #fff; font: inherit; font-size: 10px; font-weight: 900; }
.demo-push-history { display: grid; gap: 8px; margin-top: 9px; }.demo-push-history article { padding: 9px; border: 1px solid #d4c5ff; border-left: 4px solid #7841ec; border-radius: 8px; background: #fff; }.demo-push-history small, .demo-push-history strong, .demo-push-history p { display: block; }.demo-push-history small { color: #5a708a; font-size: 8px; }.demo-push-history strong { margin: 2px 0; color: #293943; font-size: 10px; }.demo-push-history p { margin: 0; color: #566d86; font-size: 8px; font-weight: 800; }

.demo-birthday-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding: 11px 12px; border: 1px solid #ebb2d2; border-left: 5px solid #df1c83; border-radius: 10px; background: linear-gradient(110deg, #fff, #fff2fa); }.demo-birthday-intro span { color: #de197f; font-size: 8px; font-weight: 900; letter-spacing: .09em; }.demo-birthday-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }.demo-birthday-intro p, .demo-birthday-toolbar small, .demo-birthday-empty p { margin: 0; color: #536a85; font-size: 9px; }.demo-birthday-intro b { padding: 7px; border-radius: 11px; background: #df1c83; color: #fff; font-size: 7px; line-height: 1.1; text-align: center; }.demo-birthday-intro b strong { display: block; font-size: 16px; }
.demo-birthday-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 9px 10px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }.demo-birthday-toolbar strong, .demo-birthday-toolbar small { display: block; }.demo-birthday-toolbar strong { color: #2a3944; font-size: 10px; }.demo-birthday-toolbar span { display: flex; gap: 5px; }.demo-birthday-toolbar button, .demo-birthday-list button { padding: 6px 8px; border: 1px solid #d5e0e8; border-radius: 7px; background: #fff; color: #293943; font: inherit; font-size: 8px; font-weight: 900; }.demo-birthday-empty { margin-bottom: 9px; padding: 10px; border: 1px solid #f0d4a8; border-left: 4px solid #c56209; border-radius: 8px; background: #fff8ed; }.demo-birthday-empty strong { color: #293943; font-size: 10px; }.demo-birthday-empty p { margin-top: 4px; }
.demo-birthday-filters { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 7px; margin-bottom: 9px; padding: 10px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }.demo-birthday-filters span { display: block; margin-bottom: 4px; color: #5b7089; font-size: 8px; font-weight: 900; }.demo-birthday-filters div { min-height: 30px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; color: #52616e; font-size: 8px; }.demo-birthday-list { display: grid; gap: 8px; }.demo-birthday-list article { display: flex; gap: 9px; padding: 10px; border: 1px solid #eab8d5; border-left: 4px solid #df1c83; border-radius: 9px; background: #fff; }.demo-birthday-list article > span { width: 37px; height: 37px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #fde5f1; color: #c21d6e; font-size: 10px; font-weight: 900; }.demo-birthday-list strong, .demo-birthday-list small, .demo-birthday-list p { display: block; }.demo-birthday-list strong { color: #293943; font-size: 10px; }.demo-birthday-list small, .demo-birthday-list p { color: #586e88; font-size: 8px; }.demo-birthday-list p { margin: 3px 0 7px; }.demo-birthday-list footer { display: flex; gap: 5px; }.demo-birthday-list .primary { border-color: #0e9f73; background: #0e9f73; color: #fff; }

.demo-quote-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 11px 12px; border: 1px solid #b2c2ff; border-left: 5px solid #5f53ed; border-radius: 10px; background: linear-gradient(110deg, #fff, #f2f4ff); }.demo-quote-intro span { color: #5d4ff0; font-size: 8px; font-weight: 900; letter-spacing: .09em; }.demo-quote-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }.demo-quote-intro p, .demo-quote-toolbar small, .demo-quote-card p, .demo-quote-card small { margin: 0; color: #536a85; font-size: 9px; }.demo-quote-intro b { padding: 7px; border-radius: 11px; background: #5d50ed; color: #fff; font-size: 7px; text-align: center; }.demo-quote-intro b strong { display: block; font-size: 16px; }
.demo-quote-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }.demo-quote-toolbar strong { color: #293943; font-size: 10px; }.demo-quote-toolbar strong small { margin-left: 2px; font-weight: 500; }.demo-quote-toolbar span, .demo-quote-card footer { display: flex; flex-wrap: wrap; gap: 5px; }.demo-quote-toolbar button, .demo-quote-search button, .demo-quote-card button, .demo-quote-week button { padding: 6px 8px; border: 1px solid #d5e0e8; border-radius: 7px; background: #fff; color: #293943; font: inherit; font-size: 8px; font-weight: 900; }
.demo-quote-search { display: grid; gap: 8px; margin-bottom: 8px; padding: 10px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }.demo-quote-search label > span { display: block; margin-bottom: 4px; color: #5b7089; font-size: 8px; font-weight: 900; }.demo-quote-search label > div, .demo-quote-search label > b { display: block; min-height: 30px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; color: #52616e; font-size: 8px; font-weight: 500; }.demo-quote-search > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.demo-quote-create { margin-bottom: 8px; padding: 10px; border: 1px solid #a6e3ce; border-radius: 9px; background: #effff8; }.demo-quote-create div { display: flex; justify-content: space-between; gap: 10px; color: #293943; font-size: 9px; }.demo-quote-create small { font-size: 8px; }.demo-quote-create button { width: 100%; min-height: 34px; margin-top: 8px; border: 0; border-radius: 8px; background: #0e9f73; color: #fff; font: inherit; font-size: 10px; font-weight: 900; }
.demo-quote-card { margin-bottom: 8px; padding: 10px; border: 1px solid #f7a94b; border-left: 4px solid #10a261; border-radius: 9px; background: #f1fff9; }.demo-quote-card.admin { border-left-color: #f3a21c; background: #fff7ec; }.demo-quote-card header { display: flex; justify-content: space-between; gap: 8px; color: #293943; font-size: 10px; }.demo-quote-card header b { padding: 3px 6px; border-radius: 99px; background: #fff0d7; color: #bf5b09; font-size: 7px; }.demo-quote-card > span { display: inline-block; margin: 7px 0; padding: 3px 6px; border-radius: 99px; background: #d8f9e8; color: #16864d; font-size: 7px; font-weight: 900; }.demo-quote-card.admin > span { background: #e9eff4; color: #58718b; }.demo-quote-card h4 { margin: 0 0 6px; color: #098a4a; font-size: 17px; }.demo-quote-card footer { margin-top: 8px; }.demo-quote-card .danger { color: #d92424; border-color: #ffc2c2; }.demo-quote-week { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px; border: 1px solid #c9d1ff; border-radius: 8px; background: #f1f3ff; text-align: center; }.demo-quote-week div strong, .demo-quote-week div span { display: block; }.demo-quote-week div strong { color: #5045d9; font-size: 10px; }.demo-quote-week div span { color: #6b61e8; font-size: 8px; }.demo-quote-day { padding: 9px; border-radius: 9px; background: #594ce5; }.demo-quote-day > header { display: flex; justify-content: space-between; margin-bottom: 8px; color: #fff; font-size: 10px; }.demo-quote-day > .demo-quote-card { margin-bottom: 0; }

.demo-finance-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 11px 12px; border: 1px solid #98d7bd; border-left: 5px solid #12ae72; border-radius: 10px; background: linear-gradient(110deg, #fff, #edfff6); }.demo-finance-intro span { color: #108c5f; font-size: 8px; font-weight: 900; letter-spacing: .09em; }.demo-finance-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }.demo-finance-intro p, .demo-finance-empty p { margin: 0; color: #536a85; font-size: 9px; }.demo-finance-intro b { padding: 7px; border-radius: 11px; background: #0cbd78; color: #fff; font-size: 7px; text-align: center; }.demo-finance-intro b strong { display: block; font-size: 16px; }
.demo-finance-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 9px; padding: 4px; border: 1px solid #cedce8; border-radius: 9px; background: #eef3f7; }.demo-finance-tabs button { min-height: 29px; border: 0; border-radius: 7px; background: transparent; color: #5d7089; font: inherit; font-size: 9px; font-weight: 900; }.demo-finance-tabs .active { background: #fff; color: #0d7c57; box-shadow: 0 2px 5px #cddde566; }.demo-finance-empty { margin-bottom: 9px; padding: 11px; border: 1px solid #3f7df7; border-left: 4px solid #2368ed; border-radius: 9px; background: #f3f8ff; }.demo-finance-empty strong { color: #24499a; font-size: 10px; }.demo-finance-empty p { margin-top: 5px; }.demo-finance-empty button { width: 100%; min-height: 34px; margin-top: 9px; border: 0; border-radius: 8px; background: #0e9f73; color: #fff; font: inherit; font-size: 10px; font-weight: 900; }
.demo-finance-summary, .demo-finance-search { margin-bottom: 9px; padding: 11px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }.demo-finance-summary > strong { color: #293943; font-size: 10px; }.demo-finance-summary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; }.demo-finance-summary article { padding: 9px; border: 1px solid #f4c993; border-radius: 9px; }.demo-finance-summary article.open { border-color: #a4dfc7; }.demo-finance-summary article span, .demo-finance-summary article b { display: block; }.demo-finance-summary article span { color: #5c718a; font-size: 8px; font-weight: 800; }.demo-finance-summary article b { margin-top: 7px; color: #ce5709; font-size: 14px; }.demo-finance-summary .open b { color: #087f55; }.demo-finance-summary footer { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.demo-finance-summary button, .demo-finance-search button, .demo-finance-invoice button { min-height: 29px; border: 1px solid #d5e0e8; border-radius: 7px; background: #fff; color: #293943; font: inherit; font-size: 8px; font-weight: 900; }
.demo-finance-search { display: grid; gap: 8px; }.demo-finance-search label > span { display: block; margin-bottom: 4px; color: #5b7089; font-size: 8px; font-weight: 900; }.demo-finance-search label > div, .demo-finance-search label > b { display: block; min-height: 30px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; color: #52616e; font-size: 8px; font-weight: 500; }.demo-finance-search > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.demo-finance-day { margin-bottom: 9px; padding: 9px; border-radius: 9px; }.demo-finance-day.purple { background: #594ce5; }.demo-finance-day.blue { background: #0b9bd6; }.demo-finance-day > header { display: flex; justify-content: space-between; margin-bottom: 8px; color: #fff; font-size: 10px; }.demo-finance-invoice { padding: 10px; border: 1px solid #ff7d7d; border-radius: 8px; background: #fff3f3; }.demo-finance-invoice header { display: flex; justify-content: space-between; gap: 8px; color: #293943; font-size: 10px; }.demo-finance-invoice header b { padding: 3px 6px; border-radius: 99px; background: #ffe6e6; color: #d42121; font-size: 7px; }.demo-finance-invoice p, .demo-finance-invoice small, .demo-finance-invoice span { display: block; margin: 4px 0; color: #293943; font-size: 8px; }.demo-finance-invoice h4 { margin: 5px 0; color: #d42020; font-size: 16px; }.demo-finance-invoice footer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }.demo-finance-invoice .primary { border-color: #0e9f73; background: #0e9f73; color: #fff; }.demo-finance-invoice .danger { border-color: #ffb8b8; color: #d92424; }

.demo-kanban-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding: 11px 12px; border: 1px solid #8ecbe3; border-left: 5px solid #0493bd; border-radius: 10px; background: linear-gradient(110deg, #fff, #effdff); }.demo-kanban-intro span { color: #008eb9; font-size: 8px; font-weight: 900; letter-spacing: .09em; }.demo-kanban-intro h3 { margin: 3px 0; color: #1f2d38; font-size: 17px; }.demo-kanban-intro p { margin: 0; color: #536a85; font-size: 9px; }.demo-kanban-intro b { padding: 8px; border-radius: 10px; background: #0496bd; color: #fff; font-size: 7px; text-align: center; }.demo-kanban-intro b strong { display: block; font-size: 16px; }
.demo-kanban-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 9px; }.demo-kanban-toolbar button, .demo-kanban-search button, .demo-kanban-board button { min-height: 28px; padding: 6px 8px; border: 1px solid #d5e0e8; border-radius: 7px; background: #fff; color: #293943; font: inherit; font-size: 8px; font-weight: 900; }.demo-kanban-toolbar .primary { border-color: #0e9f73; background: #0e9f73; color: #fff; }.demo-kanban-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 9px; padding: 10px; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }.demo-kanban-search span { display: block; margin-bottom: 4px; color: #5b7089; font-size: 8px; font-weight: 900; }.demo-kanban-search b { display: block; min-height: 30px; padding: 8px; border: 1px solid #d3dee7; border-radius: 7px; color: #52616e; font-size: 8px; font-weight: 500; }
.demo-kanban-board { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }.demo-kanban-board > section { min-width: 150px; padding: 8px; border: 1px solid #9bd5e7; border-radius: 9px; background: #ecfcff; }.demo-kanban-board > section.progress { border-color: #9fdcc9; background: #effff7; }.demo-kanban-board > section.cold { border-color: #aac9ff; background: #f1f6ff; }.demo-kanban-board > section > header { display: flex; justify-content: space-between; gap: 5px; color: #263942; font-size: 9px; }.demo-kanban-board > section > header b { padding: 4px 6px; border-radius: 99px; background: #0496bd; color: #fff; font-size: 8px; }.demo-kanban-board > section.progress > header b { background: #0a9f73; }.demo-kanban-board > section > small { display: block; margin: 5px 0; color: #0c9fc7; letter-spacing: 1px; font-size: 9px; }.demo-kanban-column-actions { display: flex; gap: 4px; }.demo-kanban-column-actions button { min-height: 19px; padding: 2px 5px; font-size: 7px; }.demo-kanban-board article { margin-top: 8px; padding: 8px; border-left: 4px solid #059bc4; border-radius: 8px; background: #fff; box-shadow: 0 3px 8px #38576b14; }.demo-kanban-board .progress article { border-left-color: #0b9c70; }.demo-kanban-board article header { display: flex; justify-content: space-between; gap: 4px; }.demo-kanban-board article strong { color: #273942; font-size: 9px; }.demo-kanban-board article header b { color: #168ac2; font-size: 7px; }.demo-kanban-board article p { margin: 4px 0; color: #4c617b; font-size: 8px; }.demo-kanban-board article > span { display: inline-block; margin-right: 3px; padding: 3px 4px; border-radius: 99px; background: #edf2f6; color: #4d6178; font-size: 6px; font-weight: 800; }.demo-kanban-board article footer { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }.demo-kanban-board article footer button:last-child { grid-column: 1 / -1; }.demo-kanban-empty { margin: 10px 0 0; padding: 18px 6px; border: 1px dashed #aac7df; border-radius: 7px; color: #8294aa; font-size: 8px; text-align: center; }

.demo-ticket-intro { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;padding:11px 12px;border:1px solid #92d7c1;border-left:5px solid #078b78;border-radius:10px;background:linear-gradient(110deg,#fff,#edfff8)}.demo-ticket-intro span,.demo-ticket-lead span,.demo-ticket-new label>span,.demo-ticket-new aside>span{color:#087d70;font-size:8px;font-weight:900;letter-spacing:.08em}.demo-ticket-intro h3{margin:3px 0;color:#1f2d38;font-size:17px}.demo-ticket-intro p{margin:0;color:#536a85;font-size:9px}.demo-ticket-intro>b,.demo-ticket-lead header>b{padding:8px;border-radius:10px;background:#078b78;color:#fff;font-size:7px;text-align:center}.demo-ticket-intro>b strong{display:block;font-size:16px}.demo-ticket-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}.demo-ticket-toolbar button,.demo-ticket-list button{padding:7px 9px;border:1px solid #d5e0e8;border-radius:7px;background:#fff;color:#293943;font:inherit;font-size:8px;font-weight:900}.demo-ticket-lead{margin-bottom:9px;padding:10px;border:1px solid #9be4cf;border-radius:10px;background:#effff8}.demo-ticket-lead header{display:flex;justify-content:space-between;gap:8px}.demo-ticket-lead header strong,.demo-ticket-lead header small{display:block;color:#293943;font-size:10px}.demo-ticket-lead header small{margin-top:3px;color:#536a85;font-size:8px}.demo-ticket-lead>div{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px;margin:9px 0}.demo-ticket-lead article{padding:8px;border:1px solid #f2ca8d;border-radius:7px;background:#fffaf1}.demo-ticket-lead article strong{display:block;margin:4px 0;color:#293943;font-size:9px}.demo-ticket-lead article p,.demo-ticket-lead footer p{margin:0;color:#5a7089;font-size:7px}.demo-ticket-lead footer{padding:7px;border:1px dashed #9ed8c7;border-radius:7px;text-align:center;color:#087d70;font-size:8px}.demo-ticket-lead footer strong{display:block}
.demo-ticket-list,.demo-ticket-new{margin-bottom:9px;padding:10px;border:1px solid #d5e0e8;border-radius:9px;background:#fff}.demo-ticket-list>header{display:flex;justify-content:space-between;color:#293943;font-size:10px}.demo-ticket-list>header span{color:#5a7089;font-size:8px}.demo-ticket-counts{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}.demo-ticket-counts b{padding:5px;border:1px solid #d7e2eb;border-radius:6px;color:#526982;font-size:7px;text-align:center}.demo-ticket-counts b:first-child{border-color:#f4bc62;color:#ae6504}.demo-ticket-selects{display:grid;grid-template-columns:1fr 1.4fr;gap:7px;margin-bottom:8px;color:#5b7089;font-size:7px;font-weight:900}.demo-ticket-selects b{display:block;margin-top:3px;padding:8px;border:1px solid #d3dee7;border-radius:7px;color:#334550;font-size:8px;font-weight:500}.demo-ticket-list>article{position:relative;margin-top:7px;padding:9px;border:1px solid #d5e0e8;border-left:4px solid #0b9c70;border-radius:8px}.demo-ticket-list>article.answered{border-color:#f7b54d;background:#fffaf0}.demo-ticket-list>article.closed{border-left-color:#99a8b8;background:#f7f9fb}.demo-ticket-list article small,.demo-ticket-list article strong{display:block}.demo-ticket-list article small{color:#59708a;font-size:7px}.demo-ticket-list article strong{margin-top:4px;color:#273942;font-size:9px}.demo-ticket-list article>b{position:absolute;right:8px;top:8px;padding:4px;border-radius:99px;background:#e1fff0;color:#058451;font-size:6px}.demo-ticket-list .answered>b{background:#fff0ce;color:#b56600}.demo-ticket-list .closed>b{background:#edf2f6;color:#65798e}
.demo-ticket-new h4{margin:0 0 9px;color:#293943;font-size:12px}.demo-ticket-new label{display:block;margin-top:8px}.demo-ticket-new label>span{display:block;margin-bottom:4px;color:#5b7089}.demo-ticket-new label>div{min-height:30px;padding:8px;border:1px solid #d3dee7;border-radius:7px;color:#52616e;font-size:8px}.demo-ticket-new label>.editor{min-height:60px}.demo-ticket-new aside{margin-top:8px;padding:8px;border-top:1px solid #f4bc62;border-bottom:1px solid #f4bc62;background:#fff8eb}.demo-ticket-new aside strong{display:block;margin:3px 0;color:#293943;font-size:9px}.demo-ticket-new aside p{margin:0;color:#5c7089;font-size:7px}.demo-ticket-new>button{width:100%;min-height:35px;margin-top:9px;border:0;border-radius:8px;background:#0e9f73;color:#fff;font:inherit;font-size:10px;font-weight:900}

.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; }

.demo-phone-intro { margin-bottom: 9px; padding: 11px 12px; border: 1px solid #8fc7e7; border-left: 5px solid #0789ac; border-radius: 10px; background: #effbff; }
.demo-phone-intro span { color: #0789ac; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-phone-intro h3 { margin: 3px 0; color: #293943; font-size: 17px; }
.demo-phone-intro p { margin: 0; color: #536a85; font-size: 9px; }
.demo-phone-open { display: grid; grid-template-columns: 1fr 170px auto; gap: 8px; align-items: center; padding: 11px; border: 1px solid #a5e3cf; border-radius: 9px; background: #effff8; }
.demo-phone-open strong, .demo-phone-open small { display: block; color: #087e56; font-size: 9px; }.demo-phone-open small { margin-top: 3px; font-size: 7px; }
.demo-phone-open > span { padding: 9px; border: 1px solid #d3dee7; border-radius: 7px; background: #fff; color: #52616e; font-size: 8px; }
.demo-phone-open button { padding: 9px; border: 0; border-radius: 7px; background: #0e9f73; color: #fff; font: inherit; font-size: 8px; font-weight: 900; }

.demo-followup-alerts,.demo-alert-restore{display:none!important}.demo-global-alert-restore{position:absolute;z-index:82;right:174px;bottom:12px;padding:8px;border:1px solid #f6ac3b;border-left:4px solid #f59e0b;border-radius:8px;background:#fffaf0;color:#293943;font:inherit;font-size:8px}.demo-global-alerts{position:absolute;z-index:81;right:12px;bottom:12px;width:270px;display:grid;justify-items:end;gap:7px}.demo-global-alerts article{width:100%;box-sizing:border-box;padding:9px;border:1px solid #f6ac3b;border-left:4px solid #f59e0b;border-radius:9px;background:#fffaf0;box-shadow:0 8px 20px #0002;transition:width .18s ease,padding .18s ease}.demo-global-alerts article.is-minimized{width:154px;padding:6px 8px;cursor:pointer}.demo-global-alerts article.is-minimized>:not(header){display:none}.demo-global-alerts header{display:flex;align-items:center;justify-content:space-between}.demo-global-alerts header>div{display:flex;gap:4px}.demo-global-alerts header span{color:#b86605;font-size:7px;font-weight:900}.demo-global-alerts header button{width:23px;height:23px;padding:0;border:1px solid #d5e0e8;border-radius:50%;background:#fff;color:#536a85;font-size:16px;line-height:1}.demo-global-alerts strong{display:block;margin-top:3px;color:#293943;font-size:10px}.demo-global-alerts p,.demo-global-alerts small{display:block;margin:3px 0;color:#536a85;font-size:8px}.demo-global-alerts small{color:#a45402;font-weight:800}.demo-global-alerts footer{display:flex;gap:4px}.demo-global-alerts footer button{padding:6px;border:1px solid #d5e0e8;border-radius:6px;background:#fff;color:#293943;font:inherit;font-size:7px;font-weight:900}.demo-global-alerts .primary{border:0;background:#0e9f73;color:#fff}

.demo-followup-alerts{position:fixed;z-index:30;right:18px;bottom:18px;width:270px;display:grid;gap:7px}.demo-followup-alerts article{padding:9px;border:1px solid #f6ac3b;border-left:4px solid #f59e0b;border-radius:9px;background:#fffaf0;box-shadow:0 8px 20px #0002}.demo-followup-alerts header{display:flex;justify-content:space-between}.demo-followup-alerts header span{color:#b86605;font-size:7px;font-weight:900;text-transform:uppercase}.demo-followup-alerts header button{width:23px;height:23px;border:1px solid #d5e0e8;border-radius:50%;background:#fff;color:#536a85;font-size:16px}.demo-followup-alerts strong{display:block;margin-top:3px;color:#293943;font-size:10px}.demo-followup-alerts p,.demo-followup-alerts small{display:block;margin:3px 0;color:#536a85;font-size:8px}.demo-followup-alerts small{color:#a45402;font-weight:800}.demo-followup-alerts footer{display:flex;gap:4px}.demo-followup-alerts footer button{padding:6px;border:1px solid #d5e0e8;border-radius:6px;background:#fff;color:#293943;font:inherit;font-size:7px;font-weight:900}.demo-followup-alerts .primary{border:0;background:#0e9f73;color:#fff}.demo-alert-restore{position:fixed;z-index:31;right:18px;bottom:18px;padding:9px;border:1px solid #f6ac3b;border-left:4px solid #f59e0b;border-radius:8px;background:#fffaf0;color:#293943;font:inherit;font-size:8px}.demo-alert-restore strong{margin-right:5px}

.demo-notes-intro{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;padding:11px 12px;border:1px solid #91d9d0;border-left:5px solid #09ad9b;border-radius:10px;background:#effffc}.demo-notes-intro span{color:#08a994;font-size:8px;font-weight:900;letter-spacing:.08em}.demo-notes-intro h3{margin:3px 0;color:#293943;font-size:17px}.demo-notes-intro p{margin:0;color:#536a85;font-size:9px}.demo-notes-intro>b{padding:8px;border-radius:10px;background:#09ad9b;color:#fff;font-size:7px;text-align:center}.demo-notes-intro>b strong{display:block;font-size:16px}.demo-notes-toolbar{display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px}.demo-notes-toolbar button,.demo-notes-search button,.demo-notes-list button{padding:7px 9px;border:1px solid #d5e0e8;border-radius:7px;background:#fff;color:#293943;font:inherit;font-size:8px;font-weight:900}.demo-notes-toolbar button:first-child,.demo-notes-list footer button:first-child{border:0;background:#0e9f73;color:#fff}.demo-notes-search{margin-bottom:8px;padding:10px;border:1px solid #d5e0e8;border-radius:9px;background:#fff;color:#536a85;font-size:8px}.demo-notes-search b{display:block;margin-top:7px;padding:8px;border:1px solid #d3dee7;border-radius:7px;color:#52616e;font-size:8px;font-weight:500}.demo-notes-search button{width:100%;margin-top:7px}.demo-notes-list{display:grid;gap:8px}.demo-notes-list article{padding:10px;border:1px solid #8bd7cb;border-left:4px solid #0e9f73;border-radius:9px;background:#effffc}.demo-notes-list header{display:flex;align-items:center;gap:6px}.demo-notes-list header strong{color:#293943;font-size:9px}.demo-notes-list header span,.demo-notes-list article>b{padding:3px 6px;border-radius:99px;background:#fff0bf;color:#a76500;font-size:7px}.demo-notes-list header small{margin-left:auto;color:#536a85;font-size:7px}.demo-notes-list article>b{display:inline-block;margin-top:6px;background:#9caec2;color:#fff}.demo-notes-list p{margin:8px 0;color:#354f66;font-size:9px}.demo-notes-list footer{display:flex;gap:5px}.demo-notes-list footer button:last-child{color:#d92424;border-color:#ffc2c2}
.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: 1909 / 902; }
.crm-web-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.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 { width: 54px; min-width: 54px; box-sizing: border-box; align-items: center; gap: 3px; padding: 6px; }

  .experience-tool-rail button,
  .crm-demo.rail-labels-open .experience-tool-rail button {
    width: 38px;
    min-height: 25px;
    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: 620px;
    display: block;
  }

  /* No celular mostramos o painel real da extensão em vez de comprimir a
     simulação larga do WhatsApp Web. Os módulos continuam selecionáveis logo abaixo. */
  .whatsapp-rail,
  .whatsapp-list,
  .whatsapp-conversation { display: none; }

  .crm-demo {
    height: 620px;
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    border-left: 0;
  }

  .crm-demo-panel {
    height: 620px;
    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; }
  .demo-global-alerts { width: min(250px, calc(100% - 20px)); }
  .demo-global-alerts article.is-minimized { width: 144px; }
  .demo-global-alert-restore { right: 162px; }
  .demo-leads-toolbar { flex-wrap: wrap; }
  .demo-leads-toolbar span { display: none; }
  .demo-leads-stats { grid-template-columns: repeat(2, 1fr); }
  .demo-leads-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-leads-filter .wide { grid-column: 1 / -1; }
  .demo-lead-card { grid-template-columns: 35px minmax(0, 1fr); }
  .demo-lead-card footer { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .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; }
}

.demo-flow-overview,.demo-flow-editor{padding:11px;border-radius:10px;background:#f2f7fa}.demo-flow-overview h3,.demo-flow-editor h3{margin:3px 0;color:#263942;font-size:17px}.demo-flow-overview p{margin:0 0 8px;color:#536a85;font-size:9px}.demo-flow-overview>button,.demo-flow-overview article button,.demo-flow-editor header button{padding:7px 9px;border:1px solid #d5e0e8;border-radius:7px;background:#fff;color:#293943;font:inherit;font-size:8px;font-weight:900}.demo-flow-overview>button,.demo-flow-editor .primary{border:0;background:#0e9f73;color:#fff}.demo-flow-overview article{display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px;border:1px solid #d5e0e8;border-radius:8px;background:#fff}.demo-flow-overview article strong{font-size:10px}.demo-flow-overview article span{color:#5c53ed;font-size:8px}.demo-flow-overview article button{margin-left:auto}.demo-flow-editor>header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:9px;padding:9px;border-radius:9px;background:#fff}.demo-flow-editor header span,.demo-flow-meta label{color:#008eb9;font-size:8px;font-weight:900}.demo-flow-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}.demo-flow-meta b{display:block;margin-top:4px;padding:8px;border:1px solid #d3dee7;border-radius:7px;background:#fff;color:#334550;font-size:8px;font-weight:500}.demo-flow-canvas{position:relative;min-height:330px;overflow:hidden;background-color:#f4fbff;background-image:radial-gradient(#9cc3dc 1px,transparent 1px);background-size:16px 16px;border:1px solid #cadce8}.demo-flow-start{position:absolute;top:145px;left:18px;display:grid;gap:3px;padding:10px;border-radius:9px;background:#005a49;color:#fff}.demo-flow-start strong{font-size:9px}.demo-flow-start span{font-size:7px}.demo-flow-step{position:absolute;top:38px;left:160px;width:195px;padding:9px;border:1px solid #0aa3de;border-radius:9px;background:#fff}.demo-flow-step.second{top:95px;left:385px;width:155px}.demo-flow-step header{display:flex;gap:7px;align-items:center}.demo-flow-step header b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#0aa3de;color:#fff;font-size:8px}.demo-flow-step header strong{font-size:8px}.demo-flow-step label{display:block;margin-top:7px;color:#5b7089;font-size:7px;font-weight:900}.demo-flow-step label div{min-height:28px;margin-top:3px;padding:7px;border:1px solid #d3dee7;border-radius:6px;color:#293943;font-size:8px;font-weight:500}.demo-flow-step aside{margin-top:7px;padding:7px;border:1px solid #9ee4c7;border-radius:7px;background:#effff8;color:#087e56;font-size:7px}.demo-flow-step aside strong,.demo-flow-step aside span{display:block}.demo-flow-step aside span{margin-top:4px}

@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; }
  .crm-demo,
  .crm-demo-panel { height: 580px; }
  .experience-app { height: 580px; }
  .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%;
  }
}