/* Illustrative product screens for the four operational examples. */
.work-card .work-visual { min-height: 430px; padding: 28px; }
.operations-visual { background: radial-gradient(circle at 5% 0%, #d6eaff, transparent 46%), linear-gradient(140deg, #e4effd, #f2f6fc); }
.document-visual { background: radial-gradient(circle at 96% 4%, #d4e9e4, transparent 45%), linear-gradient(140deg, #e9f0ed, #f3f7f5); }
.hospitality-visual { background: radial-gradient(circle at 10% 0%, #e8e2f6, transparent 46%), linear-gradient(140deg, #ebe9f7, #f6f4fa); }
.transaction-visual { background: radial-gradient(circle at 94% 0%, #dceafa, transparent 46%), linear-gradient(140deg, #e4edf9, #eef4fb); }
.case-screen { width: 100%; max-width: 645px; min-width: 0; overflow: hidden; border: 1px solid #d6e1ed; border-radius: 13px; background: #f7f9fc; box-shadow: 0 26px 48px rgba(28, 54, 95, .17), 0 3px 9px rgba(28, 54, 95, .06); color: #1c304b; font-family: Inter, Arial, sans-serif; transform: perspective(1100px) rotateX(1deg) rotateY(-2deg); }
.work-card:nth-child(even) .case-screen { transform: perspective(1100px) rotateX(1deg) rotateY(2deg); }
.case-topbar { height: 41px; display: flex; align-items: center; gap: 15px; padding: 0 17px; border-bottom: 1px solid #e5ebf3; background: #fff; }
.case-mark { color: #1956ab; font-size: 11px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.case-mark span { color: #59728d; font-weight: 600; }
.case-crumb { flex: 1; min-width: 0; overflow: hidden; color: #78899d; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.case-crumb b { padding: 0 5px; color: #b8c4d3; }
.case-avatar { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; background: #e5effe; color: #2f66b1; font-size: 8px; font-weight: 800; }
.case-body { padding: 17px; }
.case-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.case-heading > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.case-kicker { color: #8b9cb0; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.case-heading strong { color: #1b304b; font-size: 17px; line-height: 1.15; letter-spacing: -.035em; }
.case-pill { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 8px; border-radius: 100px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.case-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.case-pill-green { background: #e5f6ee; color: #197452; }
.case-pill-amber { background: #fff4dc; color: #a46112; }
.case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.case-metrics > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 11px; border: 1px solid #e6ecf3; border-radius: 7px; background: #fff; }
.case-metrics small { color: #687d94; font-size: 9px; font-weight: 600; white-space: nowrap; }
.case-metrics b { color: #18334f; font-size: 22px; line-height: 1.1; letter-spacing: -.05em; }
.case-metrics em { overflow: hidden; color: #8a9caf; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.case-ops-bottom, .case-hotel-bottom, .case-transaction-bottom { display: grid; grid-template-columns: 1.08fr .92fr; gap: 9px; }
.case-hotel-bottom { grid-template-columns: 1.15fr .85fr; }
.case-panel { min-width: 0; padding: 12px; border: 1px solid #e6ecf3; border-radius: 7px; background: #fff; }
.case-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; }
.case-panel-heading strong { overflow: hidden; color: #253a54; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.case-panel-heading > span { color: #9aaabb; font-size: 7px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.case-chart { display: flex; align-items: end; gap: 7px; height: 88px; margin-top: 14px; padding: 0 3px 1px; border-bottom: 1px solid #dce5ef; background: repeating-linear-gradient(to top, transparent 0, transparent 27px, #f0f4f8 28px, transparent 29px); }
.case-chart span { flex: 1; height: var(--bar); border-radius: 3px 3px 0 0; background: #c4d8f8; }
.case-chart span:nth-child(n+5) { background: #8bb8fa; }
.case-chart span:last-child { background: #2871df; }
.case-axis { display: flex; justify-content: space-between; margin-top: 5px; color: #9aaabb; font-size: 7px; font-weight: 700; }
.case-activity-row, .case-event-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 0; border-bottom: 1px solid #eff2f6; }
.case-activity-row:last-child, .case-event-row:last-child { border-bottom: 0; padding-bottom: 0; }
.case-activity-row i, .case-event-row i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.case-dot-blue { background: #4587e5; }.case-dot-green { background: #37b487; }.case-dot-amber { background: #e4aa4e; }
.case-activity-row > span, .case-event-row > span { flex: 1; min-width: 0; overflow: hidden; color: #344a63; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.case-activity-row small, .case-event-row small { display: block; margin-top: 2px; color: #9ba9b8; font-size: 7px; font-weight: 500; }
.case-activity-row > b { padding: 3px 5px; border-radius: 4px; background: #edf4ff; color: #3972bd; font-size: 7px; }
.case-activity-row:nth-child(3) > b { background: #e9f7ef; color: #26805a; }
.case-activity-row:nth-child(4) > b { background: #fff4e4; color: #a16d20; }
.case-document-layout { display: grid; grid-template-columns: .87fr 1.13fr; gap: 11px; align-items: stretch; }
.case-paper { position: relative; min-width: 0; min-height: 250px; padding: 15px; border: 1px solid #e5e9ee; border-radius: 4px; background: #fff; box-shadow: 0 8px 19px rgba(46, 64, 79, .07); }
.case-paper-top { display: flex; justify-content: space-between; gap: 5px; color: #9aa8b5; font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.case-paper-top b { color: #5d7188; }
.case-paper-brand { margin: 19px 0 23px; color: #213c55; font-size: 15px; font-weight: 800; letter-spacing: -.05em; }
.case-paper-brand small { display: block; color: #668598; font-size: 7px; letter-spacing: .18em; }
.case-paper-meta { display: flex; justify-content: space-between; gap: 8px; color: #9caaba; font-size: 7px; line-height: 1.7; }
.case-paper-meta b { color: #334e69; font-size: 8px; }
.case-paper-rule { height: 1px; margin: 12px 0; background: #e5eaf0; }
.case-paper-line, .case-paper-total { display: flex; justify-content: space-between; gap: 5px; margin: 8px 0; color: #688096; font-size: 8px; }
.case-paper-line b { color: #34516c; }
.case-paper-total { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5eaf0; color: #243c54; font-weight: 800; }
.case-paper-total b { font-size: 11px; white-space: nowrap; }
.case-paper-stamp { position: absolute; right: 15px; bottom: 10px; color: #a9b5c1; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.case-fields { min-width: 0; padding: 12px; border: 1px solid #e6ecf3; border-radius: 7px; background: #fff; }
.case-fields > .case-panel-heading { margin-bottom: 13px; }
.case-field { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 10px; align-items: center; gap: 4px; min-height: 34px; border-top: 1px solid #edf1f5; }
.case-field span { color: #8293a5; font-size: 8px; }
.case-field b { overflow: hidden; color: #38516b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.case-field i { color: #259669; font-size: 10px; font-style: normal; font-weight: 800; }
.case-field-review { margin: 0 -5px; padding: 0 5px; border: 1px solid #f8db9e; border-radius: 4px; background: #fffbf2; }
.case-field-review i { color: #d18c22; }
.case-review-action { display: flex; justify-content: space-between; margin-top: 13px; padding: 8px 10px; border-radius: 5px; background: #276cd0; color: #fff; font-size: 8px; font-weight: 700; }
.case-review-foot { margin-top: 7px; color: #a0adbb; font-size: 7px; text-align: center; }
.case-table-head, .case-booking-row { display: grid; grid-template-columns: 1.35fr .45fr .8fr; align-items: center; gap: 4px; }
.case-table-head { margin-top: 13px; padding: 6px 0; border-bottom: 1px solid #e8eef4; color: #9aa9b9; font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.case-booking-row { padding: 10px 0; border-bottom: 1px solid #edf1f5; color: #4a5e74; font-size: 9px; }
.case-booking-row:last-child { border-bottom: 0; padding-bottom: 0; }
.case-booking-row b { display: block; color: #2a4058; font-size: 9px; }
.case-booking-row small { display: block; margin-top: 2px; color: #9baaba; font-size: 7px; }
.case-booking-row em { justify-self: start; padding: 4px 5px; border-radius: 4px; background: #e6f7ee; color: #27825e; font-size: 7px; font-style: normal; font-weight: 700; }
.case-channel-row { display: flex; align-items: center; gap: 7px; padding: 9px 0; border-bottom: 1px solid #edf1f5; color: #546a80; font-size: 8px; }
.case-channel-row:last-child { border-bottom: 0; padding-bottom: 0; }
.case-channel-icon { display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 4px; background: #e9edfb; color: #716fc1; font-size: 8px; font-weight: 800; }
.case-channel-row:nth-child(3) .case-channel-icon { background: #e9f2fc; color: #3976bc; }
.case-channel-row:nth-child(4) .case-channel-icon { background: #f0eafb; color: #936ac0; }
.case-channel-row > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-channel-row b { color: #2cac7c; font-size: 11px; }
.case-line-chart { position: relative; height: 90px; margin-top: 12px; overflow: hidden; }
.case-gridlines { position: absolute; inset: 0; background: repeating-linear-gradient(to top, #eaf0f7 0 1px, transparent 1px 30px); }
.case-line-chart svg { position: relative; width: 100%; height: 100%; }
.case-event-row time { color: #9caabb; font-size: 7px; font-weight: 700; }
@media (max-width: 900px) { .work-card .work-visual { min-height: 430px; } .case-screen, .work-card:nth-child(even) .case-screen { transform: none; } }
@media (max-width: 700px) {
  .work-card .work-visual { min-height: 340px; padding: 12px; }
  .case-topbar { height: 35px; gap: 8px; padding: 0 11px; }
  .case-body { padding: 11px; }
  .case-heading { margin-bottom: 10px; }
  .case-heading strong { font-size: 14px; }
  .case-kicker { font-size: 7px; }
  .case-pill { padding: 4px 6px; font-size: 7px; }
  .case-metrics { gap: 5px; margin-bottom: 7px; }
  .case-metrics > div { padding: 7px; }
  .case-metrics small { font-size: 7px; }
  .case-metrics b { font-size: 17px; }
  .case-metrics em { font-size: 6px; }
  .case-ops-bottom, .case-hotel-bottom, .case-transaction-bottom { gap: 5px; }
  .case-panel, .case-fields { padding: 8px; }
  .case-panel-heading strong { font-size: 8px; }
  .case-panel-heading > span { font-size: 6px; }
  .case-chart { gap: 4px; height: 76px; margin-top: 10px; }
  .case-activity-row, .case-event-row { gap: 4px; padding: 7px 0; }
  .case-activity-row > span, .case-event-row > span { font-size: 7px; }
  .case-activity-row > b { font-size: 6px; }
  .case-document-layout { gap: 6px; }
  .case-paper { min-height: 240px; padding: 10px; }
  .case-paper-brand { margin: 17px 0 22px; font-size: 11px; }
  .case-paper-meta { font-size: 6px; }
  .case-paper-meta b { font-size: 6px; }
  .case-paper-line, .case-paper-total { font-size: 6px; }
  .case-paper-total b { font-size: 8px; }
  .case-field { min-height: 32px; }
  .case-field span, .case-field b { font-size: 7px; }
  .case-table-head { font-size: 6px; }
  .case-booking-row b { font-size: 7px; }
  .case-booking-row em { font-size: 6px; }
  .case-channel-row { gap: 4px; font-size: 7px; }
}
@media (max-width: 370px) {
  .case-crumb { font-size: 8px; }
  .case-pill { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
  .case-panel-heading > span { display: none; }
  .case-metrics em { display: none; }
  .case-activity-row > b { display: none; }
}