/* LEVREN — illustrative interfaces. Scoped away from working website controls. */
.ev-visual {
  --ev-blue: #1a4dff;
  --ev-ink: #18304f;
  --ev-muted: #61758f;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 286px;
  height: auto;
  padding-block: 20px;
  overflow: hidden;
  background: #f0f5fc;
  border-bottom: 1px solid #e3ebf5;
  color: var(--ev-ink);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -.01em;
  user-select: none;
  pointer-events: none;
}
.ev-visual *, .ev-visual *::before, .ev-visual *::after { box-sizing: border-box; }
.ev-visual :is(span,div,small,b,i) { min-width: 0; }
.ev-visual b { font-weight: 500; }
.ev-visual small { font-size: 11px; }
.ev-visual .ev-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; }
.ev-sheet {
  position: relative;
  width: calc(100% - 44px);
  max-width: 304px;
  border: 1px solid #dce5f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 3px #16335305, 0 12px 20px -14px #16335336, 0 24px 40px -22px #16335325;
}
.ev-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.ev-panel-heading > .ev-icon { color: #6983a7; }
.ev-kicker { display: block; color: var(--ev-muted); font-size: 11px; font-weight: 400; }
.ev-step-caption { color: var(--ev-muted); font-size: 11px; font-weight: 400; white-space: nowrap; }

/* Website mockups: three views of one considered, responsive sample website. */
.ev-visual.ev-websites { container-type: inline-size; background: radial-gradient(ellipse at 50% 30%,#fff 0%,#edf2f9 80%); }
.ev-websites .ev-sheet { width: calc(100% - 32px); max-width: 350px; padding: 0; border: 1px solid #cfd8e5; border-radius: 11px; overflow: hidden; box-shadow: 0 2px 3px #172d4906,0 8px 12px -8px #172d4933,0 22px 28px -20px #172d4960; }
.ev-browser-bar { display: grid; grid-template-columns: 39px minmax(0,1fr) 15px; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-bottom: 1px solid #e0e4ea; background: linear-gradient(#fcfcfd,#f0f1f4); }
.ev-window-controls { display: flex; gap: 4px; }
.ev-window-controls > i { display: block; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0000000d; }
.ev-browser-address { display: flex; justify-content: center; align-items: center; gap: 4px; height: 17px; border: 1px solid #e5e8ec; border-radius: 4px; background: #ffffffb3; color: #737a85; font: 9px/1 Arial,sans-serif; white-space: nowrap; overflow: hidden; }
.ev-browser-address .ev-icon { width: 10px; height: 10px; flex-basis: 10px; }
.ev-browser-toolbar { color: #8a909a; font: 16px/1 Arial,sans-serif; text-align: right; }
.ev-site-nav { display: flex; align-items: center; gap: 13px; height: 40px; padding: 0 13px; background: #fffefa; color: #424946; font-size: 9px; }
.ev-brand { display: block; margin-right: auto; color: #1c2823; font: 600 10px/1.3 Arial,sans-serif; letter-spacing: .09em; white-space: nowrap; }
.ev-brand > span { display: block; margin-top: 3px; color: #859088; font: 5px/1 Arial,sans-serif; letter-spacing: .14em; }
.ev-site-nav > span:last-child { display: flex; align-items: center; gap: 4px; }
.ev-site-nav .ev-icon { width: 10px; height: 10px; flex-basis: 10px; }
.ev-project-composition { display: grid; grid-template-columns: 1fr 1fr; height: 147px; background: #f7f5ee; overflow: hidden; }
.ev-project-copy { align-self: center; padding: 8px 8px 8px 13px; }
.ev-project-copy .ev-kicker { color: #6e776c; font-size: 8px; line-height: 1.4; }
.ev-project-title { display: block; margin: 7px 0 6px; color: #23392e; font: 27px/.99 Georgia,'Times New Roman',serif; font-size: clamp(20px,7.3cqw,27px); letter-spacing: -.05em; }
.ev-project-description { display: block; color: #6e776c; font: 9px/1.45 Arial,sans-serif; }
.ev-project-link { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: #2b4034; font-size: 9px; font-weight: 500; white-space: nowrap; }
.ev-project-link .ev-icon { width: 13px; height: 13px; flex-basis: 13px; }
.ev-project-photo { position: relative; overflow: hidden; }
.ev-project-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.ev-project-photo > span { position: absolute; bottom: 9px; left: 9px; padding: 4px 6px; border-radius: 3px; color: #fff; background: #1c302db3; font: 7px/1 Arial,sans-serif; letter-spacing: .07em; }
.ev-site-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 27px; padding: 0 13px; background: #fffefa; color: #69746b; font-size: 8px; }
.ev-project-pagination { display: flex; align-items: center; gap: 6px; font: 8px/1 Arial,sans-serif; }
.ev-project-pagination b { color: #253b2e; }
.ev-project-pagination i { width: 28px; height: 1px; background: linear-gradient(90deg,#314b3b 30%,#d7dfd9 30%); }
.ev-service-content { padding: 13px 12px 11px; }
.ev-service-heading { margin-bottom: 10px; }
.ev-service-heading .ev-kicker { color: #788398; font-size: 9px; }
.ev-service-heading > span:last-child { display: block; margin-top: 3px; color: #1c2d47; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
.ev-service-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 9px; border: 1px solid #e7ebf1; border-radius: 7px; background: #fafbfd; }
.ev-service-option + .ev-service-option { margin-top: 5px; }
.ev-service-option--selected { border-color: #b3c7f4; background: #edf3ff; box-shadow: 0 2px 4px #23488c06; }
.ev-service-icon { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border: 1px solid #e1e6ed; border-radius: 7px; background: #fff; color: #637a95; }
.ev-service-icon .ev-icon { width: 18px; height: 18px; }
.ev-service-option--selected .ev-service-icon { background: #1a4dff; color: #fff; border-color: #1a4dff; box-shadow: 0 2px 4px #1a4dff26; }
.ev-option-title { display: block; color: #21354f; font-size: 12px; font-weight: 500; }
.ev-option-detail { display: block; margin-top: 2px; color: #718095; font-size: 9px; }
.ev-service-option > .ev-icon { margin-left: auto; width: 14px; height: 14px; flex-basis: 14px; color: #8c9aaa; }
.ev-service-go { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; margin-left: auto; border-radius: 50%; background: #fff; color: #1a4dff; }
.ev-service-go .ev-icon { width: 13px; height: 13px; }
.ev-enquiry-content { padding: 12px 14px; }
.ev-enquiry-progress { display: flex; align-items: center; gap: 8px; color: #8a96a7; font-size: 9px; }
.ev-enquiry-progress > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ev-enquiry-progress b { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #e1e7ef; border-radius: 50%; font-size: 8px; }
.ev-enquiry-progress .ev-progress-current { color: #2455bf; }
.ev-progress-current b { background: #edf3ff; border-color: #c7d7f9; }
.ev-enquiry-progress > i { height: 1px; flex: 1; background: #e5eaf2; }
.ev-enquiry-title { margin: 10px 0 9px; color: #1c2d47; font-size: 15px; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; }
.ev-field-label { display: block; margin-bottom: 4px; color: #798699; font-size: 9px; }
.ev-input-display { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 29px; padding: 6px 8px; border: 1px solid #e0e6ef; border-radius: 5px; background: #fafbfd; color: #364c67; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.ev-input-selected { background: #f7f9ff; border-color: #bdd0f7; }
.ev-input-selected > span:first-child { display: flex; align-items: center; gap: 7px; }
.ev-input-selected .ev-icon { color: #5c7eba; width: 14px; height: 14px; flex-basis: 14px; }
.ev-enquiry-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: 8px; }
.ev-enquiry-fields .ev-icon { color: #41996c; width: 12px; height: 12px; flex-basis: 12px; }
.ev-action-display { display: flex; justify-content: space-between; align-items: center; min-height: 31px; padding: 8px 11px; margin-top: 10px; border: 1px solid #1648e8; border-radius: 5px; background: #1a4dff; box-shadow: inset 0 1px 0 #ffffff26,0 2px 3px #1a4dff16; color: #fff; font-size: 11px; font-weight: 500; }
.ev-action-display .ev-icon { width: 15px; height: 15px; flex-basis: 15px; }
@media (max-width: 380px) {
  .ev-websites .ev-sheet { width: calc(100% - 22px); }
  .ev-site-nav { gap: 8px; padding-inline: 11px; }
  .ev-project-copy { padding-left: 11px; }
}

/* App examples share the same native controls and a single task per screen. */
.ev-visual.ev-apps, .ev-visual.ev-maatwerksoftware { background: #f0f5fc; }
.ev-apps .ev-sheet { width: calc(100% - 32px); max-width: 314px; padding: 15px; border-radius: 14px; color: #23354d; }
.ev-app-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ev-app-heading .ev-kicker { font-size: 10px; line-height: 1.4; }
.ev-app-title { display: block; margin-top: 3px; font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.ev-app-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid #dde7fa; border-radius: 9px; background: #f1f5ff; color: #3566c5; }
.ev-app-icon .ev-icon { width: 17px; height: 17px; }
.ev-month-label { display: flex; align-items: center; justify-content: space-between; margin: 11px 0 7px; color: #62748c; font-size: 10px; line-height: 1.4; }
.ev-calendar-nav { display: flex; gap: 17px; color: #526c93; font-size: 17px; line-height: 1; }
.ev-calendar-days { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.ev-calendar-days > span { display: grid; justify-items: center; gap: 4px; padding: 6px 0; border: 1px solid #e6ebf2; border-radius: 8px; background: #fafbfd; color: #5b6f8b; }
.ev-calendar-days small { font-size: 9px; line-height: 1; }
.ev-calendar-days b { font-size: 16px; line-height: 1.1; color: #293f5c; font-variant-numeric: tabular-nums; }
.ev-calendar-days .ev-day-selected { background: #0b49f5; color: #fff; border-color: #0b49f5; }
.ev-calendar-days .ev-day-selected b { color: #fff; }
.ev-time-label { margin: 10px 0 6px; color: #62748c; font-size: 10px; }
.ev-times { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.ev-times > span { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 27px; border: 1px solid #e0e7f0; border-radius: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.ev-times .ev-time-selected { color: #164eaf; background: #edf3ff; border-color: #adc5f4; }
.ev-times .ev-icon { width: 12px; height: 12px; flex-basis: 12px; }
.ev-booking-summary { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e9edf3; }
.ev-summary-icon { color: #5275a6; }
.ev-booking-summary b, .ev-confirmation-detail b { display: block; font-size: 11px; font-weight: 500; }
.ev-booking-summary small, .ev-confirmation-detail small { display: block; margin-top: 2px; color: #62748c; font-size: 10px; }
.ev-booking-summary > .ev-icon { margin-left: auto; width: 15px; height: 15px; flex-basis: 15px; color: #0b49f5; }
.ev-job-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ev-job-meta > span:first-child { display: flex; align-items: center; gap: 4px; color: #6c7a8e; font-size: 10px; }
.ev-job-meta > span:first-child .ev-icon { width: 13px; height: 13px; flex-basis: 13px; }
.ev-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 5px; background: #edf6f0; color: #357250; font-size: 9px; white-space: nowrap; }
.ev-status > i { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: #4a966d; }
.ev-task-progress { display: flex; justify-content: space-between; gap: 8px; margin: 17px 0 6px; font-size: 10px; color: #66798f; }
.ev-task-progress > span:last-child { color: #3c6eaf; }
.ev-task-row { display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 8px 0; border-top: 1px solid #edf1f6; font-size: 11px; }
.ev-task-check { display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid #0b49f5; border-radius: 5px; color: #fff; background: #0b49f5; }
.ev-task-check .ev-icon { width: 14px; height: 14px; }
.ev-task-check--empty { background: #fff; border-color: #c5d3e3; }
.ev-attachment { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px; border: 1px solid #e4eaf2; border-radius: 7px; background: #f8fafc; }
.ev-attachment-icon { display: grid; place-items: center; width: 27px; height: 30px; flex: 0 0 27px; border: 1px solid #dde5ef; border-radius: 4px; background: #edf3fa; color: #6e89aa; }
.ev-attachment b { display: block; font-size: 10px; line-height: 1.4; }
.ev-attachment small { display: block; margin-top: 2px; font-size: 9px; color: #66798f; line-height: 1.4; }
.ev-attachment > .ev-icon { margin-left: auto; width: 13px; height: 13px; flex-basis: 13px; color: #428162; }
.ev-app-steps { display: flex; align-items: center; gap: 6px; color: #6c7d92; font-size: 9px; }
.ev-app-steps > span { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.ev-app-steps .ev-icon { width: 11px; height: 11px; flex-basis: 11px; color: #548266; }
.ev-app-steps > i { height: 1px; min-width: 6px; flex: 1; background: #dde6f1; }
.ev-app-steps .ev-step-current { color: #3266b5; font-weight: 500; }
.ev-confirmation { display: grid; justify-items: center; gap: 8px; margin: 20px 0 16px; text-align: center; }
.ev-confirmation-check { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d8e9dd; border-radius: 50%; color: #3c8660; background: #edf6ef; }
.ev-confirmation-check .ev-icon { width: 22px; height: 22px; }
.ev-confirmation .ev-app-title { margin: 2px 0 0; }
.ev-confirmation > span:last-child { color: #66798f; font-size: 10px; }
.ev-confirmation-detail { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e3eaf4; border-radius: 8px; background: #f8fafd; }
.ev-confirmation-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: #225cbd; font-size: 11px; }
.ev-confirmation-action .ev-icon { width: 14px; height: 14px; flex-basis: 14px; }

/* Software examples use the same desktop workspace, not overlapping data cards. */
.ev-maatwerksoftware .ev-desktop-sheet { width: calc(100% - 32px); max-width: 350px; border-radius: 11px; overflow: hidden; }
.ev-customer-sheet, .ev-progress-sheet, .ev-sync-content { padding: 14px; }
.ev-customer-top { display: flex; gap: 9px; align-items: center; }
.ev-customer-monogram { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; color: #456a9c; border: 1px solid #d7e1ee; border-radius: 9px; background: #eff4fa; font-size: 12px; font-weight: 500; }
.ev-customer-top .ev-kicker, .ev-progress-sheet > .ev-kicker { font-size: 10px; }
.ev-customer-name { display: block; margin-top: 3px; color: #203650; font-size: 13px; font-weight: 500; }
.ev-customer-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #5b9b73; margin-left: auto; }
.ev-tabs { display: flex; gap: 16px; margin-top: 15px; border-bottom: 1px solid #e4ebf4; font-size: 10px; color: #718095; }
.ev-tabs > span { padding-bottom: 8px; }
.ev-tabs .ev-tab-active { border-bottom: 2px solid #0b49f5; color: #2457b4; }
.ev-dossier-row { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #edf1f7; }
.ev-record-icon { display: grid; place-items: center; width: 25px; height: 28px; flex: 0 0 25px; color: #6384b2; border: 1px solid #e4eaf3; border-radius: 5px; background: #fafbfd; }
.ev-record-icon .ev-icon { width: 15px; height: 15px; }
.ev-dossier-row > span:nth-child(2) { flex: 1; }
.ev-dossier-row b { display: block; font-size: 11px; line-height: 1.4; }
.ev-dossier-row small { display: block; margin-top: 3px; font-size: 9px; line-height: 1.4; color: #75869d; }
.ev-record-value { color: #345172; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.ev-dossier-owner { display: flex; align-items: center; gap: 6px; padding-top: 10px; color: #4e6890; font-size: 10px; }
.ev-dossier-owner .ev-icon { margin-left: auto; width: 13px; height: 13px; flex-basis: 13px; }
.ev-owner-initial { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 1px solid #d4e0ef; background: #eaf0f8; color: #4b6e9f; font-size: 10px; }
.ev-progress-sheet .ev-panel-heading { margin-top: 4px; font-size: 13px; gap: 8px; }
.ev-software-status { color: #3e63a3; background: #edf3ff; border: 1px solid #dce6f9; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 400; }
.ev-workflow { display: grid; grid-template-columns: 1fr .4fr 1fr .4fr 1fr; align-items: start; margin: 18px 0 15px; }
.ev-phase { display: grid; justify-items: center; gap: 6px; color: #7a8fa9; font-size: 10px; }
.ev-phase > span:first-child { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #d7e1ed; border-radius: 50%; background: #f8fafc; font-size: 11px; }
.ev-phase--done > span:first-child { border-color: #dce7fb; background: #eef4ff; color: #4c78b5; }
.ev-phase--done .ev-icon { width: 14px; height: 14px; }
.ev-phase.ev-phase--active { color: #1f50b4; }
.ev-phase--active > span:first-child { border-color: #0b49f5; background: #0b49f5; color: #fff; box-shadow: 0 0 0 3px #e9f0ff; }
.ev-workflow > i { display: block; height: 1px; background: #d7e3f3; margin: 12px -7px 0; }
.ev-next-step { padding: 11px; border: 1px solid #dfe9f9; border-radius: 7px; background: #f6f9ff; }
.ev-next-step .ev-kicker { font-size: 9px; }
.ev-next-title { display: block; margin-top: 4px; color: #274366; font-size: 13px; font-weight: 500; }
.ev-next-step > div { display: flex; align-items: center; gap: 6px; color: #516d90; margin-top: 10px; font-size: 10px; }
.ev-due-date { margin-left: auto; color: #76859a; font-size: 9px; }
.ev-sync-content .ev-panel-heading { font-size: 13px; }
.ev-connection { display: grid; grid-template-columns: 1fr .9fr 1fr; align-items: start; margin: 16px 5px 14px; }
.ev-connection > span:not(.ev-connection-line) { display: grid; justify-items: center; gap: 7px; color: #62748c; font-size: 10px; }
.ev-connection i { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #dce6f6; border-radius: 9px; background: #f3f7ff; color: #426dac; }
.ev-connection-line { position: relative; display: grid; place-items: center; height: 35px; color: #4c8c6a; }
.ev-connection-line::before { content: ''; position: absolute; height: 1px; inset: 17px -10px auto; background: #d6e8dc; }
.ev-connection-line .ev-icon { position: relative; width: 23px; height: 23px; padding: 4px; border: 1px solid #d6e8dc; border-radius: 50%; background: #f2f8f4; }
.ev-sync-record { padding: 10px; border: 1px solid #e2e9f2; border-radius: 7px; background: #fafcfe; }
.ev-sync-record-title { display: block; margin-bottom: 7px; color: #2a4364; font-size: 11px; font-weight: 500; }
.ev-data-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 10px; line-height: 1.4; }
.ev-data-row > span { color: #7b8ba1; }
.ev-data-row b { color: #466180; text-align: right; }
.ev-sync-result { display: flex; align-items: center; gap: 5px; margin-top: 11px; color: #52806a; font-size: 10px; }
.ev-sync-result .ev-icon { width: 13px; height: 13px; flex-basis: 13px; }
@media (max-width:380px) {
  .ev-apps .ev-sheet, .ev-maatwerksoftware .ev-desktop-sheet { width: calc(100% - 24px); }
  .ev-apps .ev-sheet { padding: 13px; }
  .ev-app-title { font-size: 16px; }
}