.syo-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.syo-wa-demo,
.syo-crm-demo,
.syo-inventory-demo,
.syo-agenda-demo,
.syo-team-demo {
  margin: 0;
  width: 100%;
  min-width: 0;
  text-align: left;
  font-family: inherit;
  color: #152820;
}
.syo-demo-caption {
  color: #6c8177;
  font-size: 10px;
  line-height: 1.5;
  margin: 13px 0 0;
  text-align: center;
  letter-spacing: 0.02em;
}
.syo-wa-demo *,
.syo-crm-demo *,
.syo-inventory-demo *,
.syo-agenda-demo *,
.syo-team-demo * {
  box-sizing: border-box;
}
.syo-wa-demo p,
.syo-crm-demo p,
.syo-inventory-demo p,
.syo-agenda-demo p,
.syo-team-demo p {
  margin: 0;
}
.syo-crm-demo button {
  font-family: inherit;
  cursor: pointer;
}
.syo-crm-demo button:focus-visible {
  outline: 3px solid #1b9770;
  outline-offset: 4px;
}
.syo-wa-demo {
  max-width: 414px;
  margin-inline: auto;
}
.syo-wa-window {
  background: #f7f9f5;
  border: 1px solid #d8e5dd;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 24px 70px #08150f17,
    0 2px 5px #08150f0a;
}
.syo-wa-header {
  min-height: 70px;
  display: flex;
  gap: 11px;
  align-items: center;
  background: #075e54;
  color: white;
  padding: 13px 17px;
}
.syo-wa-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dceee5;
  color: #075e54;
}
.syo-wa-avatar .syo-icon {
  width: 23px;
  height: 23px;
}
.syo-wa-avatar > img {
  width: 32px;
  height: 32px;
}
.syo-dealer-logo {
  display: block;
  width: 156px;
  max-width: 52%;
  height: auto;
}
.syo-crm-company {
  display: flex;
  align-items: center;
  gap: 5px;
}
.syo-crm-company > img {
  flex: 0 0 20px;
}
.syo-crm-model {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: #64766c;
}
.syo-crm-scroll-hint {
  display: none;
}
.syo-crm-columns:focus-visible {
  outline: 3px solid #1b9770;
  outline-offset: 3px;
}
.syo-wa-link {
  padding: 5px;
  width: 90%;
}
.syo-wa-link-preview {
  padding: 18px 12px 13px;
  border-radius: 5px;
  background: #f7faf7;
  border-left: 3px solid #80958a;
}
.syo-wa-link-preview .syo-dealer-logo {
  width: 152px;
  max-width: 100%;
  margin-bottom: 14px;
}
.syo-wa-link-preview strong,
.syo-wa-link-preview > span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.syo-wa-link-preview > span {
  color: #62786b;
  margin-top: 5px;
}
.syo-wa-link > p {
  padding: 9px 7px 3px;
  font-size: 12px;
}
.syo-wa-contact {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.syo-wa-contact strong {
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.syo-wa-contact span {
  font-size: 10px;
  color: #d3e8df;
}
.syo-wa-header-tools {
  display: flex;
  gap: 14px;
  margin-left: auto;
}
.syo-wa-header-tools .syo-icon {
  width: 16px;
  height: 16px;
}
.syo-wa-header-tools .syo-icon:first-child {
  display: none;
}
.syo-wa-chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 17px 19px 21px;
  min-height: 320px;
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130' fill='none' stroke='%23cfc8bc' stroke-width='1' opacity='.42'%3E%3Cpath d='m15 16 2-5h13l2 5m-18 0h19v9H14zm4 9v3m11-3v3M55 53c-8-8-17 4 0 15 17-11 8-23 0-15Z'/%3E%3Cpath d='m99 15 2 7 7 2-7 2-2 7-2-7-7-2 7-2Zm-7 70h20v13H99l-7 5zM18 90c9-6 17 10 23 3M21 103c10-6 17 9 23 3'/%3E%3Ccircle cx='80' cy='115' r='5'/%3E%3Cpath d='m117 54 6 6m0-6-6 6M65 17l5-3m-2 7 5-3'/%3E%3C/svg%3E");
}
.syo-wa-day {
  align-self: center;
  background: #fffef2;
  padding: 5px 10px;
  border-radius: 6px;
  color: #54635d;
  box-shadow: 0 1px 1px #0000000e;
  font-size: 9px;
  line-height: 1.2;
}
.syo-wa-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 5px;
  padding-bottom: 3px;
  color: #6a7465;
  font-size: 9px;
}
.syo-wa-secure .syo-icon {
  width: 11px;
  height: 11px;
}
.syo-wa-bubble {
  position: relative;
  max-width: 87%;
  padding: 10px 11px 7px;
  font-size: 12px;
  line-height: 1.5;
  color: #18251e;
  box-shadow: 0 1px 1px #00000017;
  border-radius: 0 9px 9px;
  background: #fff;
}
.syo-wa-bubble p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.syo-wa-bubble.is-outgoing {
  align-self: flex-end;
  border-radius: 9px 0 9px 9px;
  background: #d9fdd3;
}
.syo-wa-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 0;
  height: 0;
  border-top: 6px solid #fff;
  border-left: 6px solid transparent;
}
.syo-wa-bubble.is-outgoing::before {
  right: -5px;
  left: auto;
  border-left: 0;
  border-top-color: #d9fdd3;
  border-right: 6px solid transparent;
}
.syo-wa-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  color: #728073;
  font-size: 8px;
  line-height: 1;
  margin-top: 5px;
  text-align: right;
}
.syo-wa-time .syo-icon {
  width: 15px;
  height: 13px;
  color: #32a5cf;
}
.syo-wa-bubble.syo-wa-car {
  padding: 4px;
  width: 82%;
}
.syo-wa-car > img {
  width: 100%;
  height: 129px;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}
.syo-wa-car > div {
  padding: 9px 7px 5px;
}
.syo-wa-car strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
}
.syo-wa-car > div > span {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
.syo-wa-car p {
  font-size: 11px;
  margin-top: 8px;
}
.syo-wa-input {
  padding: 12px 14px;
  display: flex;
  gap: 11px;
  align-items: center;
  background: #f5f6f2;
  color: #7d8a81;
}
.syo-wa-input > span:not(.syo-wa-send) {
  flex: 1;
  font-size: 12px;
}
.syo-wa-send {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #075e54;
  color: #fff;
  display: grid;
  place-items: center;
}
.syo-wa-send .syo-icon {
  width: 16px;
  height: 16px;
}
.syo-wa-location {
  padding: 4px;
  width: 82%;
}
.syo-wa-location > div:last-child {
  padding: 9px 7px 5px;
}
.syo-wa-location strong {
  font-size: 11px;
}
.syo-wa-location p {
  margin-top: 4px;
  font-size: 11px;
}
.syo-wa-map {
  position: relative;
  height: 110px;
  background:
    repeating-linear-gradient(4deg, transparent 0 28px, #fff 29px 34px, transparent 35px 64px),
    repeating-linear-gradient(93deg, #e4eada 0 31px, #f7f6ef 32px 40px, #e4eada 41px 66px);
  overflow: hidden;
  border-radius: 6px;
}
.syo-wa-map-road {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 160px;
  background: #fffaf0;
  transform: rotate(34deg) translate(90px, -50px);
  border-inline: 1px solid #dacfae;
}
.syo-wa-map-pin {
  position: absolute;
  top: 27px;
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #176a49;
  border-radius: 50%;
  box-shadow: 0 3px 4px #00000015;
}
.syo-wa-map-label {
  position: absolute;
  top: 65px;
  left: calc(50% - 27px);
  background: #fff;
  color: #475947;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 9px;
}
.syo-wa-demo--compact {
  max-width: 372px;
}
.syo-wa-demo--compact .syo-wa-chat {
  gap: 9px;
  padding: 13px 16px 17px;
}
.syo-wa-demo--compact .syo-wa-bubble {
  font-size: 11px;
}
.syo-wa-demo--compact .syo-wa-car > img {
  height: 115px;
}

/* The layout follows the existing sales workspace: rail, KPI ruler, pipeline, next action. */
.syo-crm-window {
  display: flex;
  width: 100%;
  background: #fff;
  border: 1px solid #d9e5df;
  border-radius: 15px;
  box-shadow:
    0 30px 90px #123b1c12,
    0 3px 8px #0a281808;
  overflow: hidden;
}
.syo-crm-rail {
  width: 54px;
  flex: 0 0 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 18px 7px;
  background: #f8faf9;
  border-right: 1px solid #e6ece8;
  color: #81938a;
}
.syo-crm-rail > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 7px;
}
.syo-crm-rail > .syo-crm-mark {
  margin-bottom: 9px;
  background: #0b120e url('/syo-kavo/logo-syo-kavo.png') center / 90% auto no-repeat;
}
.syo-crm-rail > .is-active {
  background: #dff5eb;
  color: #17724c;
}
.syo-crm-rail .syo-icon {
  width: 19px;
  height: 19px;
}
.syo-crm-rail > .syo-crm-rail-bottom {
  margin-top: auto;
  border-radius: 50%;
  background: #e3ece7;
  color: #52655b;
  font-size: 10px;
  font-weight: 650;
}
.syo-crm-main {
  flex: 1;
  min-width: 0;
}
.syo-crm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 19px 21px 15px;
  border-bottom: 1px solid #edf1ee;
}
.syo-crm-top > div {
  display: grid;
  gap: 6px;
}
.syo-crm-eyebrow {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #73877a;
}
.syo-crm-top strong {
  font-size: 20px;
  font-weight: 570;
  letter-spacing: -0.04em;
  color: #172e22;
}
.syo-crm-top-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #27734f;
  background: #ecf8f1;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 10px;
  white-space: nowrap;
}
.syo-crm-top-label .syo-icon {
  width: 14px;
  height: 14px;
}
.syo-crm-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px 21px;
  gap: 21px;
}
.syo-crm-kpis > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.syo-crm-kpis > div + div {
  border-left: 1px solid #e3eae5;
  padding-left: 20px;
}
.syo-crm-kpis span {
  font-size: 10px;
  color: #65796b;
}
.syo-crm-kpis strong {
  font-size: 24px;
  letter-spacing: -0.06em;
  font-weight: 570;
  color: #163a27;
  font-variant-numeric: tabular-nums;
}
.syo-crm-kpis small {
  font-size: 9px;
  color: #7b8e81;
  font-weight: 450;
  letter-spacing: 0;
}
.syo-crm-ai-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin: 0 20px 13px;
  background: #f0faf5;
  border: 1px solid #d8eee2;
  border-radius: 7px;
}
.syo-crm-ai-banner > .syo-icon {
  width: 24px;
  height: 24px;
  color: #268754;
}
.syo-crm-ai-banner p {
  font-size: 10px;
  line-height: 1.6;
  color: #5b7162;
}
.syo-crm-ai-banner p strong {
  color: #23633e;
  font-weight: 650;
}
.syo-crm-ai-banner > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8px;
  color: #34734e;
}
.syo-crm-ai-banner > span .syo-icon {
  width: 13px;
  height: 13px;
}
.syo-crm-workspace {
  display: flex;
  border-top: 1px solid #e4eae6;
}
.syo-crm-board {
  min-width: 0;
  flex: 1;
  padding: 0 12px 14px;
  background: #f7f9f8;
}
.syo-crm-board-tools {
  display: flex;
  align-items: center;
  gap: 17px;
  height: 44px;
  font-size: 9px;
  color: #7d9083;
}
.syo-crm-board-tools span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.syo-crm-board-tools .syo-icon {
  width: 12px;
  height: 12px;
}
.syo-crm-board-tools span:last-child {
  margin-left: auto;
}
.syo-crm-board-tools .is-active {
  height: 44px;
  color: #20663e;
  font-weight: 650;
  border-bottom: 2px solid #3dba85;
}
.syo-crm-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.syo-crm-column {
  border-radius: 7px;
  min-width: 0;
  background: #edf2ef;
  border: 1px solid #e5ece7;
  padding: 8px;
}
.syo-crm-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  gap: 5px;
  margin: 3px 0 11px;
  color: #5e7465;
}
.syo-crm-column-title > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.syo-crm-column-title i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #589fcd;
  flex-shrink: 0;
}
.syo-crm-column--1 .syo-crm-column-title i {
  background: #bf9950;
}
.syo-crm-column--2 .syo-crm-column-title i {
  background: #28ae79;
}
.syo-crm-column-title b {
  font-size: 8px;
  font-weight: 600;
  color: #536e5e;
  background: #e2eae5;
  border-radius: 4px;
  padding: 2px 5px;
}
.syo-crm-lead {
  background: #fff;
  border: 1px solid #e5ece7;
  border-radius: 6px;
  padding: 10px;
  margin-top: 8px;
  box-shadow: 0 1px 2px #17382204;
  min-width: 0;
}
.syo-crm-progress {
  display: flex;
  gap: 3px;
  margin-bottom: 9px;
}
.syo-crm-progress i {
  height: 2px;
  width: 17px;
  background: #d9efe2;
  border-radius: 1px;
}
.syo-crm-progress i:first-child {
  background: #39b987;
}
.syo-crm-column--2 .syo-crm-progress i:nth-child(2) {
  background: #39b987;
}
.syo-crm-lead-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.syo-crm-lead-name strong {
  font-size: 11px;
  font-weight: 650;
}
.syo-crm-lead-name .syo-icon {
  width: 12px;
  height: 12px;
  color: #97a69d;
}
.syo-crm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 9px;
  padding: 4px 5px;
  border-radius: 4px;
  background: #eff8f2;
  color: #337448;
  font-size: 7px;
  white-space: nowrap;
}
.syo-crm-badge .syo-icon {
  width: 10px;
  height: 10px;
}
.syo-crm-badge--visit {
  background: #faf5e9;
  color: #876a27;
}
.syo-crm-car {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px !important;
  font-size: 9px;
  color: #7a8a80;
}
.syo-crm-car .syo-icon {
  width: 13px;
  height: 13px;
}
.syo-crm-value {
  display: block;
  margin: 4px 0 11px;
  font-size: 13px;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #213e2c;
  font-variant-numeric: tabular-nums;
}
.syo-crm-owner {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #76897b;
  font-size: 8px;
  padding-top: 9px;
  border-top: 1px solid #eef2ef;
}
.syo-crm-avatar {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e4f2e9;
  color: #427757;
  font-size: 8px;
}
.syo-crm-owner > span:last-child {
  margin-left: auto;
  font-size: 6px;
  max-width: 65px;
  text-align: right;
  line-height: 1.4;
}
.syo-crm-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 4px;
  min-height: 34px;
  font-size: 9px;
  font-weight: 620;
  border: 1px solid #c9e9d6;
  border-radius: 5px;
  background: #eefaf3;
  color: #17794a;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.syo-crm-whatsapp .syo-icon {
  width: 14px;
  height: 14px;
}
.syo-crm-whatsapp .syo-icon:last-child {
  width: 11px;
  height: 11px;
  margin-left: auto;
}
.syo-crm-whatsapp .syo-icon:first-child {
  margin-right: auto;
}
.syo-crm-whatsapp:hover {
  background: #d9f5e5;
  border-color: #87cea5;
}
.syo-crm-recommendations {
  width: 210px;
  flex: 0 0 210px;
  padding: 20px 17px;
  border-left: 1px solid #e2eae4;
  background: #fff;
}
.syo-crm-ai-title {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 24px;
}
.syo-crm-ai-title > span {
  display: grid;
  place-items: center;
  background: #e7f6ed;
  color: #2e8854;
  width: 33px;
  height: 33px;
  border-radius: 8px;
}
.syo-crm-ai-title strong {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.syo-crm-recommendations > strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 9px 0;
  font-weight: 590;
}
.syo-crm-recommendations > p {
  font-size: 10px;
  color: #7a8c80;
  line-height: 1.7;
}
.syo-crm-next-action {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 5px;
  background: #f6f8f5;
  padding: 10px;
  margin: 14px 0;
  font-size: 9px;
  line-height: 1.5;
  color: #4d6655;
}
.syo-crm-next-action .syo-icon {
  width: 20px;
  height: 20px;
  color: #73957c;
}
.syo-crm-recommendations > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  width: 100%;
  border: 1px solid #197447;
  border-radius: 5px;
  background: #187247;
  color: #fff;
  font-size: 9px;
  font-weight: 550;
  padding: 8px 5px;
}
.syo-crm-recommendations > button .syo-icon {
  width: 14px;
  height: 14px;
}
.syo-crm-recommendations > button:hover {
  background: #0a5a33;
}
.syo-crm-ai-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid #eaf0e9;
  color: #7d9081;
}
.syo-crm-ai-note .syo-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}
.syo-crm-ai-note p {
  font-size: 9px;
  line-height: 1.7;
}
.syo-crm-ai-note strong {
  color: #4e6c58;
  font-weight: 550;
}
.syo-crm-dialog {
  width: min(430px, calc(100vw - 28px));
  max-height: min(850px, calc(100dvh - 40px));
  border: 1px solid #cfddd4;
  border-radius: 19px;
  padding: 15px;
  background: #fff;
  color: #183822;
  overflow-y: auto;
  box-shadow: 0 35px 100px #00000030;
}
.syo-crm-dialog::backdrop {
  background: #06150e9c;
  backdrop-filter: blur(5px);
}
.syo-crm-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
.syo-crm-dialog-header > div {
  display: grid;
  gap: 5px;
}
.syo-crm-dialog-header span {
  font-size: 8px;
  color: #799080;
  letter-spacing: 0.08em;
}
.syo-crm-dialog-header strong {
  font-size: 13px;
  letter-spacing: -0.02em;
  font-weight: 650;
}
.syo-crm-dialog-header button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #dee7e0;
  background: #f6f9f5;
  color: #69806f;
  border-radius: 50%;
}
.syo-crm-dialog .syo-wa-window {
  box-shadow: none;
}
.syo-crm-dialog .syo-wa-demo {
  max-width: none;
}
.syo-crm-dialog .syo-demo-caption {
  display: none;
}
.syo-crm-dialog .syo-crm-dialog-note {
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
  color: #758b7a;
  padding: 14px 6px 2px;
}
.syo-crm-demo--compact .syo-crm-recommendations {
  display: none;
}
.syo-crm-demo--compact .syo-crm-rail {
  width: 40px;
  flex-basis: 40px;
  padding-inline: 3px;
  gap: 9px;
}
.syo-crm-demo--compact .syo-crm-top {
  padding: 15px;
}
.syo-crm-demo--compact .syo-crm-top strong {
  font-size: 18px;
}
.syo-crm-demo--compact .syo-crm-top-label {
  font-size: 8px;
}
.syo-crm-demo--compact .syo-crm-kpis {
  padding: 14px 15px;
  gap: 10px;
}
.syo-crm-demo--compact .syo-crm-kpis > div + div {
  padding-left: 10px;
}
.syo-crm-demo--compact .syo-crm-kpis strong {
  font-size: 18px;
}
.syo-crm-demo--compact .syo-crm-kpis span {
  font-size: 8px;
}
.syo-crm-demo--compact .syo-crm-kpis small {
  display: none;
}
.syo-crm-demo--compact .syo-crm-ai-banner {
  margin: 0 14px 10px;
  padding: 8px;
}
.syo-crm-demo--compact .syo-crm-ai-banner p {
  font-size: 9px;
}
.syo-crm-demo--compact .syo-crm-ai-banner > span {
  display: none;
}
.syo-crm-demo--compact .syo-crm-column {
  padding: 6px;
}
.syo-crm-demo--compact .syo-crm-column-title {
  font-size: 8px;
}
.syo-crm-demo--compact .syo-crm-lead {
  padding: 8px;
}
.syo-crm-demo--compact .syo-crm-owner > span:last-child {
  display: none;
}

.syo-inventory-window,
.syo-agenda-window,
.syo-team-window {
  border: 1px solid #dce7df;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 23px 60px #1735230d;
  overflow: hidden;
}
.syo-inventory-window > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  color: #294e37;
  font-size: 11px;
}
.syo-inventory-window > header > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.syo-inventory-window > header > span:first-child {
  font-weight: 620;
}
.syo-inventory-window > header > span:last-child {
  font-size: 9px;
  color: #789482;
}
.syo-inventory-window > header .syo-icon {
  width: 17px;
  height: 17px;
}
.syo-inventory-whatsapp {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #cce8d8;
  color: #287d4b;
  background: #eff9f3;
  border-radius: 6px;
  padding: 10px;
  font-size: 11px;
}
.syo-inventory-window > header {
  padding: 20px 24px;
  border-bottom: 1px solid #e8ece9;
}
.syo-inventory-window > header > span:last-child {
  font-size: 11px;
  text-align: right;
}
.syo-inventory-intro {
  padding: 28px 24px 20px;
  text-align: center;
}
.syo-inventory-intro > span {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #708176;
}
.syo-inventory-intro > strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  font-weight: 520;
  letter-spacing: -0.055em;
}
.syo-inventory-intro > p {
  margin-top: 8px;
  color: #6c7a71;
  font-size: 12px;
  line-height: 1.6;
}
.syo-inventory-cars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px 20px;
}
.syo-inventory-tile {
  overflow: hidden;
  border: 1px solid #e9edeb;
  border-radius: 9px;
  min-width: 0;
  background: #fafbfa;
}
.syo-inventory-tile > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.syo-inventory-tile > div {
  padding: 13px 12px;
}
.syo-inventory-tile strong {
  display: block;
  font-size: 13px;
  font-weight: 580;
  letter-spacing: -0.025em;
}
.syo-inventory-tile div > span {
  display: block;
  margin-top: 6px;
  color: #6b7a71;
  font-size: 10px;
  line-height: 1.5;
}
.syo-inventory-tile b {
  display: block;
  margin-top: 13px;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.syo-inventory-tile:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44% 1fr;
  align-items: center;
}
.syo-inventory-tile:last-child > img {
  height: 100%;
  min-height: 125px;
}
.syo-inventory-window > .syo-inventory-whatsapp {
  margin: 0 20px 16px;
  min-height: 44px;
  font-size: 12px;
}
.syo-inventory-whatsapp .syo-icon {
  width: 17px;
  height: 17px;
}
.syo-inventory-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 20px;
  border-top: 1px solid #eaf0e9;
  color: #7b8e7e;
  font-size: 9px;
}
.syo-inventory-link .syo-icon {
  width: 14px;
  height: 14px;
}
.syo-agenda-window > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 23px;
  border-bottom: 1px solid #ecf0e9;
}
.syo-agenda-window > header > span:first-child,
.syo-team-window > header > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #dfede2;
  background: #eff8f1;
  color: #357a4a;
  border-radius: 10px;
}
.syo-agenda-window > header > div {
  display: grid;
  gap: 5px;
}
.syo-agenda-window > header strong {
  font-size: 16px;
  font-weight: 570;
  letter-spacing: -0.035em;
}
.syo-agenda-window > header > div > span {
  font-size: 10px;
  color: #809081;
}
.syo-agenda-month {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #819182;
}
.syo-agenda-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 20px 24px;
  gap: 10px;
}
.syo-agenda-days > span {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 11px;
  color: #80947e;
  font-size: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
}
.syo-agenda-days strong {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.syo-agenda-days > .is-selected {
  background: #e6f8ec;
  color: #1f7e44;
  border-color: #bee6cd;
}
.syo-agenda-times {
  padding: 0 24px 25px;
}
.syo-agenda-times > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 15px;
  padding: 11px 0;
}
.syo-agenda-times time {
  font-size: 10px;
  color: #8d9c8a;
  padding-top: 9px;
}
.syo-agenda-free {
  padding-top: 8px;
  font-size: 10px;
  color: #a0ad9c;
  border-top: 1px solid #edf2e9;
}
.syo-agenda-event {
  background: #f0f9f0;
  border: 1px solid #daecd7;
  border-left: 3px solid #53b981;
  border-radius: 7px;
  padding: 16px;
}
.syo-agenda-event > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #54885a;
}
.syo-agenda-event .syo-icon {
  width: 13px;
  height: 13px;
}
.syo-agenda-event strong {
  display: block;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.04em;
  margin: 12px 0 6px;
  color: #2f5933;
}
.syo-agenda-event p {
  font-size: 11px;
  color: #789271;
  margin-bottom: 15px;
}
.syo-team-window {
  padding: 24px;
}
.syo-team-window > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
}
.syo-team-window > header strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 570;
  letter-spacing: -0.03em;
}
.syo-team-window > header p {
  font-size: 9px;
  color: #80917f;
  margin-top: 5px;
}
.syo-team-list {
  display: grid;
  gap: 9px;
}
.syo-team-person {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 15px;
  border: 1px solid #e8eee3;
  border-radius: 9px;
}
.syo-team-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9f4e8;
  color: #577746;
  font-size: 13px;
}
.syo-team-person:nth-child(2) .syo-team-avatar {
  background: #f0ede2;
  color: #8b7a4b;
}
.syo-team-person:nth-child(3) .syo-team-avatar {
  background: #e7f0f1;
  color: #51808a;
}
.syo-team-person > div {
  display: grid;
  gap: 4px;
}
.syo-team-person strong {
  font-size: 13px;
  font-weight: 580;
}
.syo-team-person > div > span {
  font-size: 9px;
  color: #83927c;
}
.syo-team-person b {
  font-size: 12px;
  font-weight: 550;
  color: #59804f;
}
.syo-team-person > span:last-child {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #87a07b;
}
.syo-team-person > span:last-child .syo-icon {
  width: 12px;
  height: 12px;
}
.syo-team-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 15px 0;
  font-size: 10px;
  color: #819779;
  line-height: 1.7;
}
.syo-team-summary > .syo-icon {
  color: #54aa6d;
  width: 24px;
  height: 24px;
}
.syo-team-summary strong {
  color: #4c7540;
  font-weight: 550;
}

@media (max-width: 1050px) {
  .syo-crm-recommendations {
    width: 180px;
    flex-basis: 180px;
    padding: 19px 14px;
  }
  .syo-crm-owner > span:last-child {
    display: none;
  }
  .syo-crm-ai-banner > span {
    display: none;
  }
}
@media (max-width: 850px) {
  .syo-crm-workspace {
    flex-wrap: wrap;
  }
  .syo-crm-board {
    flex-basis: 100%;
  }
  .syo-crm-recommendations {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 5px 15px;
    width: 100%;
    flex-basis: 100%;
    border-left: 0;
    border-top: 1px solid #e2eae4;
    padding: 17px;
  }
  .syo-crm-ai-title {
    grid-column: 1 / -1;
    margin-bottom: 5px;
  }
  .syo-crm-ai-title strong br {
    display: none;
  }
  .syo-crm-ai-title strong {
    font-size: 11px;
  }
  .syo-crm-recommendations > .syo-crm-eyebrow,
  .syo-crm-next-action,
  .syo-crm-ai-note {
    display: none;
  }
  .syo-crm-recommendations > strong {
    grid-column: 1;
    grid-row: 2;
    margin: 3px 0;
    font-size: 12px;
  }
  .syo-crm-recommendations > p {
    grid-column: 1;
    grid-row: 3;
    font-size: 9px;
  }
  .syo-crm-recommendations > button {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    min-height: 40px;
  }
  .syo-crm-kpis strong {
    font-size: 21px;
  }
  .syo-crm-kpis small {
    display: none;
  }
}
@media (max-width: 560px) {
  .syo-wa-contact strong {
    font-size: 14px;
  }
  .syo-wa-demo .syo-wa-contact span {
    font-size: 11px;
  }
  .syo-wa-demo .syo-wa-bubble {
    font-size: 13px;
    line-height: 1.55;
  }
  .syo-wa-demo .syo-wa-car strong,
  .syo-wa-demo .syo-wa-car p {
    font-size: 12px;
  }
  .syo-wa-demo .syo-wa-car > div > span {
    font-size: 11px;
  }
  .syo-wa-secure {
    font-size: 10px;
  }
  .syo-wa-demo .syo-wa-car > img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .syo-demo-caption {
    font-size: 11px;
  }
  .syo-inventory-window > header {
    padding: 16px;
  }
  .syo-inventory-intro {
    padding: 22px 16px 18px;
  }
  .syo-inventory-intro > strong {
    font-size: 25px;
  }
  .syo-inventory-cars {
    padding: 0 14px 14px;
    gap: 9px;
  }
  .syo-inventory-tile > div {
    padding: 11px 9px;
  }
  .syo-inventory-tile strong {
    font-size: 12px;
  }
  .syo-inventory-tile div > span {
    font-size: 11px;
  }
  .syo-inventory-tile b {
    font-size: 16px;
  }
  .syo-inventory-window > .syo-inventory-whatsapp {
    margin-inline: 14px;
  }
  .syo-crm-column .syo-crm-lead ~ .syo-crm-lead {
    display: none;
  }
  .syo-crm-demo .syo-crm-lead-name strong {
    font-size: 13px;
  }
  .syo-crm-demo .syo-crm-car {
    font-size: 11px;
    line-height: 1.45;
  }
  .syo-crm-demo .syo-crm-model {
    font-size: 10px;
  }
  .syo-crm-demo .syo-crm-badge {
    font-size: 10px;
    white-space: normal;
    line-height: 1.4;
    padding: 5px;
  }
  .syo-crm-demo .syo-crm-owner {
    font-size: 11px;
  }
  .syo-crm-demo .syo-crm-whatsapp {
    min-height: 44px;
    font-size: 12px;
  }
  .syo-crm-demo .syo-crm-top-label {
    font-size: 10px;
  }
  .syo-crm-demo .syo-crm-eyebrow {
    font-size: 9px;
  }
  .syo-crm-demo .syo-crm-column-title {
    font-size: 10px;
  }
  .syo-crm-demo .syo-crm-kpis span {
    font-size: 10px;
  }
  .syo-crm-demo .syo-crm-ai-banner p {
    font-size: 11px;
  }
  .syo-crm-demo .syo-crm-board-tools {
    font-size: 11px;
  }
  .syo-crm-demo .syo-crm-recommendations {
    display: grid;
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .syo-crm-demo .syo-crm-recommendations > strong {
    grid-row: auto;
    font-size: 14px;
  }
  .syo-crm-demo .syo-crm-recommendations > p {
    grid-row: auto;
    font-size: 12px;
    line-height: 1.6;
  }
  .syo-crm-demo .syo-crm-recommendations > button {
    grid-column: 1;
    grid-row: auto;
    min-height: 44px;
    font-size: 12px;
    margin-top: 8px;
  }
  .syo-crm-demo .syo-crm-ai-title strong {
    font-size: 12px;
  }
  .syo-crm-dialog-header button {
    width: 44px;
    height: 44px;
  }
  .syo-wa-header {
    padding: 12px 13px;
    gap: 9px;
  }
  .syo-wa-contact strong {
    font-size: 12px;
  }
  .syo-wa-contact span {
    font-size: 9px;
  }
  .syo-wa-header-tools {
    gap: 10px;
  }
  .syo-wa-chat {
    padding: 14px 15px 18px;
  }
  .syo-wa-bubble {
    max-width: 91%;
  }
  .syo-wa-bubble.syo-wa-car {
    width: 87%;
  }
  .syo-crm-rail,
  .syo-crm-demo--compact .syo-crm-rail {
    display: none;
  }
  .syo-crm-window {
    border-radius: 10px;
  }
  .syo-crm-top,
  .syo-crm-demo--compact .syo-crm-top {
    padding: 15px;
  }
  .syo-crm-top strong {
    font-size: 18px;
  }
  .syo-crm-top-label,
  .syo-crm-demo--compact .syo-crm-top-label {
    font-size: 8px;
    padding: 7px;
  }
  .syo-crm-top-label .syo-icon {
    width: 11px;
    height: 11px;
  }
  .syo-crm-kpis,
  .syo-crm-demo--compact .syo-crm-kpis {
    padding: 15px;
    gap: 7px;
  }
  .syo-crm-kpis > div + div,
  .syo-crm-demo--compact .syo-crm-kpis > div + div {
    padding-left: 8px;
  }
  .syo-crm-kpis span,
  .syo-crm-demo--compact .syo-crm-kpis span {
    font-size: 8px;
    line-height: 1.5;
  }
  .syo-crm-kpis strong,
  .syo-crm-demo--compact .syo-crm-kpis strong {
    font-size: 17px;
  }
  .syo-crm-ai-banner,
  .syo-crm-demo--compact .syo-crm-ai-banner {
    margin: 0 13px 13px;
    gap: 7px;
    padding: 9px;
  }
  .syo-crm-ai-banner p {
    font-size: 9px;
  }
  .syo-crm-ai-banner > .syo-icon {
    width: 19px;
    height: 19px;
  }
  .syo-crm-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .syo-crm-column:last-child {
    display: none;
  }
  .syo-crm-column,
  .syo-crm-demo--compact .syo-crm-column {
    padding: 7px;
  }
  .syo-crm-lead,
  .syo-crm-demo--compact .syo-crm-lead {
    padding: 9px;
  }
  .syo-crm-column-title,
  .syo-crm-demo--compact .syo-crm-column-title {
    font-size: 8px;
  }
  .syo-crm-column-title > span {
    gap: 4px;
  }
  .syo-crm-value {
    font-size: 15px;
  }
  .syo-crm-badge {
    font-size: 7px;
    padding: 4px;
  }
  .syo-crm-whatsapp {
    min-height: 39px;
    font-size: 10px;
  }
  .syo-crm-board {
    padding-inline: 9px;
  }
  .syo-crm-board-tools {
    gap: 13px;
  }
  .syo-inventory-window > header {
    padding: 15px;
    font-size: 10px;
  }
  .syo-inventory-window > header > span:last-child {
    font-size: 8px;
  }
  .syo-agenda-window > header {
    padding: 18px;
    gap: 10px;
  }
  .syo-agenda-window > header strong {
    font-size: 15px;
  }
  .syo-agenda-month {
    font-size: 7px;
  }
  .syo-agenda-days {
    padding: 17px;
    gap: 6px;
  }
  .syo-agenda-days > span {
    padding: 9px 5px;
  }
  .syo-agenda-times {
    padding: 0 17px 18px;
  }
  .syo-agenda-times > div {
    gap: 9px;
    grid-template-columns: 33px 1fr;
  }
  .syo-team-window {
    padding: 17px;
  }
  .syo-team-window > header strong {
    font-size: 14px;
  }
  .syo-team-person {
    padding: 12px;
  }
}
/* Final mobile CRM rules keep the sales cards readable instead of shrinking them. */
@media (max-width: 560px) {
  .syo-crm-demo .syo-crm-workspace,
  .syo-crm-demo .syo-crm-board {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .syo-crm-demo .syo-crm-board {
    flex: 0 0 100%;
    padding-inline: 12px;
  }
  .syo-crm-demo .syo-crm-columns {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 84%);
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 3px 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #b0c9bc #edf3ef;
  }
  .syo-crm-demo .syo-crm-column,
  .syo-crm-demo .syo-crm-column:last-child {
    display: block;
    min-width: 0;
    padding: 9px;
    scroll-snap-align: start;
  }
  .syo-crm-demo .syo-crm-lead {
    padding: 13px;
  }
  .syo-crm-demo .syo-crm-lead ~ .syo-crm-lead {
    display: none;
  }
  .syo-crm-demo .syo-crm-column-title,
  .syo-crm-demo .syo-crm-board-tools {
    font-size: 12px;
  }
  .syo-crm-demo .syo-crm-column-title b {
    font-size: 11px;
  }
  .syo-crm-demo .syo-crm-lead-name strong {
    font-size: 14px;
  }
  .syo-crm-demo .syo-crm-car {
    font-size: 13px;
    line-height: 1.5;
  }
  .syo-crm-demo .syo-crm-model,
  .syo-crm-demo .syo-crm-owner {
    font-size: 12px;
  }
  .syo-crm-demo .syo-crm-badge {
    font-size: 12px;
    line-height: 1.45;
    padding: 6px 7px;
    white-space: normal;
  }
  .syo-crm-demo .syo-crm-badge .syo-icon {
    width: 13px;
    height: 13px;
  }
  .syo-crm-demo .syo-crm-value {
    margin-block: 8px 15px;
    font-size: 21px;
  }
  .syo-crm-demo .syo-crm-whatsapp,
  .syo-crm-demo .syo-crm-recommendations > button {
    min-height: 44px;
    font-size: 13px;
  }
  .syo-crm-demo .syo-crm-scroll-hint {
    display: block;
    margin: 0 0 10px;
    color: #64786c;
    font-size: 11px;
    line-height: 1.5;
  }
  .syo-crm-demo .syo-crm-recommendations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 100%;
  }
  .syo-crm-demo .syo-crm-recommendations > p {
    font-size: 12px;
  }
  .syo-inventory-demo .syo-inventory-cars {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .syo-inventory-demo .syo-inventory-tile,
  .syo-inventory-demo .syo-inventory-tile:last-child {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    grid-column: auto;
    align-items: stretch;
  }
  .syo-inventory-demo .syo-inventory-tile > img,
  .syo-inventory-demo .syo-inventory-tile:last-child > img {
    width: 100%;
    height: 100%;
    min-height: 106px;
    aspect-ratio: auto;
    object-fit: contain;
    background: #eee;
  }
  .syo-inventory-demo .syo-inventory-tile > div {
    padding: 13px 10px;
  }
  .syo-inventory-demo .syo-inventory-tile strong,
  .syo-inventory-demo .syo-inventory-tile div > span {
    font-size: 12px;
    line-height: 1.5;
  }
  .syo-inventory-demo .syo-inventory-tile b {
    margin-top: 8px;
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .syo-crm-demo button {
    transition: none;
  }
  .syo-crm-dialog::backdrop {
    backdrop-filter: none;
  }
}
@media print {
  .syo-crm-dialog {
    display: none !important;
  }
  .syo-crm-window,
  .syo-wa-window,
  .syo-inventory-window,
  .syo-agenda-window,
  .syo-team-window {
    box-shadow: none;
    break-inside: avoid;
  }
}