/* Decorative, illustrative product UIs. Page layout lives in styles.css. */
.product-window {
  overflow:hidden;
  border:1px solid #dce3ee;
  border-radius:14px;
  background:white;
  box-shadow:0 35px 65px rgba(16,24,40,.16),0 10px 25px rgba(16,24,40,.07)
}

.hero-window {
  width:100%;
  min-height:355px
}

.window-topbar {
  height:40px;
  padding:0 15px 0 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e9edf3;
  background:#fafbfc
}

.window-brand {
  color:#344054;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em
}
.window-brand>span {
  color:var(--blue)
}
.window-brand em {
  color:#98a2b3;
  font-style:normal;
  font-weight:600
}

.window-top-right {
  display:flex;
  gap:5px
}
.window-top-right i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d0d5dd
}

.dashboard-layout {
  display:grid;
  grid-template-columns:49px 1fr;
  min-height:314px
}

.dashboard-sidebar {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:18px;
  padding-top:22px;
  border-right:1px solid #e9edf3;
  background:#f8fafc;
  color:#a5afbc;
  font-size:17px
}
.dashboard-sidebar .sidebar-active {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  margin-top:-5px;
  border-radius:5px;
  background:#e8f0ff;
  color:var(--blue)
}

.dashboard-main {
  min-width:0;
  padding:23px 25px
}

.dashboard-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.dashboard-heading div {
  display:flex;
  flex-direction:column;
  gap:5px
}
.dashboard-heading small {
  color:#98a2b3;
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em
}
.dashboard-heading strong {
  font-size:16px;
  letter-spacing:-.04em
}
.dashboard-date {
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:5px;
  color:#667085;
  font-size:9px
}

.dashboard-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:20px 0 12px
}
.dashboard-metrics>div {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:6px
}
.dashboard-metrics small {
  white-space:nowrap;
  color:#667085;
  font-size:9px
}
.dashboard-metrics strong {
  font-size:21px;
  letter-spacing:-.04em
}
.dashboard-metrics span {
  color:#98a2b3;
  font-size:8px
}
.dashboard-metrics .metric-delta {
  color:#168063
}

.dashboard-bottom {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:10px
}
.chart-panel,.activity-panel {
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px
}
.panel-title {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.panel-title strong,.activity-panel>strong {
  font-size:10px
}
.panel-title span {
  color:#98a2b3;
  font-size:12px
}
.chart-grid {
  height:95px;
  margin-top:10px;
  background:repeating-linear-gradient(to bottom,#eef1f5 0 1px,transparent 1px 27px)
}
.chart-grid svg {
  display:block;
  width:100%;
  height:100%
}
.chart-labels {
  display:flex;
  justify-content:space-between;
  color:#98a2b3;
  font-size:7px
}
.activity-panel>div {
  display:flex;
  align-items:center;
  gap:6px;
  padding:11px 0;
  border-bottom:1px solid #f2f4f7;
  color:#475467;
  font-size:8px
}
.activity-panel>div:last-child {
  border:0
}
.activity-panel small {
  margin-left:auto;
  color:#98a2b3;
  font-size:7px
}
.activity-dot {
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%
}
.activity-dot.blue {
  background:#175cd3
}
.activity-dot.green {
  background:#16a37b
}
.activity-dot.amber {
  background:#edaa39
}

.floating-card {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:1px solid #e5eaf1;
  border-radius:8px;
  background:white;
  box-shadow:0 15px 35px rgba(16,24,40,.12);
  transform:translateZ(58px)
}
.floating-card span:last-child {
  display:flex;
  flex-direction:column;
  gap:4px
}
.floating-card strong {
  white-space:nowrap;
  font-size:10px
}
.floating-card small {
  white-space:nowrap;
  color:#98a2b3;
  font-size:8px
}
.float-icon {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:6px;
  background:#e9f1ff;
  color:var(--blue);
  font-size:14px;
  font-weight:700
}
.float-icon.green {
  background:#e6f6ef;
  color:#099366
}
.floating-card-top {
  top:-28px;
  right:-10px
}
.floating-card-bottom {
  bottom:-27px;
  left:-26px
}
.scene-caption {
  position:absolute;
  bottom:8px;
  right:3px;
  color:#98a2b3;
  font-size:10px
}


.visual-system {
  background:linear-gradient(145deg,#eaf1fa,#f8fafc)
}
.mini-app {
  width:80%;
  max-width:400px;
  transform:rotateY(-4deg) rotateX(2deg);
  border:1px solid #dce5ef;
  border-radius:8px;
  background:white;
  box-shadow:0 24px 40px rgba(30,66,116,.13)
}
.mini-app-top {
  display:flex;
  justify-content:space-between;
  padding:14px 17px;
  border-bottom:1px solid var(--line);
  color:#344054;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em
}
.mini-app-row {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  padding:12px 17px;
  border-bottom:1px solid #f2f4f7;
  color:#667085;
  font-size:10px
}
.mini-app-row b {
  color:#344054;
  font-weight:600
}
.mini-app-row i {
  color:#128266;
  font-style:normal
}
.mini-app-foot {
  display:flex;
  justify-content:space-around;
  padding:12px;
  color:#98a2b3;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em
}

.visual-flow {
  display:flex;
  gap:0;
  padding:28px;
  background:linear-gradient(120deg,#f8fafc,#eef4fb)
}
.flow-step {
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:100px;
  padding:17px 14px;
  border:1px solid #dfe5ed;
  border-radius:7px;
  background:white;
  box-shadow:0 12px 28px rgba(16,24,40,.06)
}
.flow-step.active {
  border-color:#bdd1f2;
  box-shadow:0 12px 28px rgba(23,92,211,.12)
}
.flow-step span {
  color:var(--blue);
  font-size:9px;
  font-weight:800
}
.flow-step strong {
  font-size:10px
}
.flow-step small {
  color:#98a2b3;
  font-size:9px
}
.flow-connector {
  width:36px;
  height:1px;
  background:#95b9eb
}

.visual-app {
  background:linear-gradient(135deg,#eaf0f8,#f8fafc)
}
.app-desktop {
  position:relative;
  width:57%;
  height:165px;
  left:-22px;
  border:1px solid #ced8e6;
  border-radius:8px;
  background:white;
  box-shadow:0 17px 30px rgba(16,24,40,.1)
}
.app-bar {
  height:25px;
  border-bottom:1px solid var(--line);
  background:#f8fafc
}
.app-content {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:18px
}
.app-content span {
  height:94px;
  border:1px solid #e7ecf4;
  border-radius:5px;
  background:linear-gradient(to bottom,#eaf1fc 0 28px,#fff 28px)
}
.app-phone {
  position:absolute;
  right:18%;
  bottom:19px;
  width:82px;
  height:163px;
  padding:17px 9px;
  border:5px solid #1f2937;
  border-radius:16px;
  background:white;
  box-shadow:0 18px 28px rgba(16,24,40,.18)
}
.phone-notch {
  position:absolute;
  top:3px;
  left:50%;
  width:24px;
  height:4px;
  border-radius:5px;
  background:#475467;
  transform:translateX(-50%)
}
.phone-line {
  height:6px;
  margin-bottom:9px;
  border-radius:3px;
  background:#dfe8f4
}
.phone-line.short {
  width:60%
}
.phone-block {
  height:57px;
  margin-bottom:10px;
  border-radius:4px;
  background:#dceafc
}

.visual-integration {
  background:radial-gradient(circle,#f4f8fe 0%,#eaf1f9 100%)
}
.integration-core {
  z-index:1;
  display:grid;
  place-items:center;
  width:84px;
  height:84px;
  border:1px solid #bdd1f1;
  border-radius:10px;
  background:#fff;
  color:var(--blue);
  font-size:24px;
  font-weight:800;
  box-shadow:0 16px 28px rgba(23,92,211,.12)
}
.integration-node {
  position:absolute;
  display:grid;
  place-items:center;
  min-width:74px;
  height:34px;
  padding:0 10px;
  border:1px solid #d8e3f1;
  border-radius:5px;
  background:#fff;
  color:#475467;
  font-size:10px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(16,24,40,.05)
}
.integration-node:before {
  content:"";
  position:absolute;
  z-index:-1;
  width:72px;
  height:1px;
  background:#b7c9e4
}
.node-one {
  top:18%;
  left:17%
}
.node-one:before {
  top:52%;
  left:98%;
  transform:rotate(27deg);
  transform-origin:left
}
.node-two {
  top:18%;
  right:17%
}
.node-two:before {
  top:52%;
  right:98%;
  transform:rotate(-27deg);
  transform-origin:right
}
.node-three {
  bottom:18%;
  left:17%
}
.node-three:before {
  top:50%;
  left:98%;
  transform:rotate(-27deg);
  transform-origin:left
}
.node-four {
  bottom:18%;
  right:17%
}
.node-four:before {
  top:50%;
  right:98%;
  transform:rotate(27deg);
  transform-origin:right
}


.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; }
.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: 700px) {
  .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; }
}