/* ===========================================================
   MOBILE & iPAD APP SHOWCASE — slides 7,8,9
   =========================================================== */
.ms-board { display: flex; flex-direction: column; font-family: system-ui, -apple-system, 'Hanken Grotesk', sans-serif; }
.ms-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  gap: 26px; background: #F8F8F8; padding: 16px;
}
.ms-stage--wrap { flex-direction: column; gap: 14px; }
.ms-cap { text-align: center; font-size: 12px; color: #8a8a8a; padding: 0 40px 14px; background: #F8F8F8; }

/* Phone frame */
.ms-phone {
  width: 208px; height: 416px; background: #fff; border: 2px solid #E0E0E0;
  border-radius: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.ms-phone--sm { width: 158px; height: 408px; border-radius: 22px; }
.ms-ipad {
  width: 252px; height: 408px; background: #fff; border: 2px solid #E0E0E0;
  border-radius: 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}

/* Status bar */
.ms-sb { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px 3px; font-size: 10px; font-weight: 700; color: #1A1A1A; flex-shrink: 0; }
.ms-sb-ic { display: flex; align-items: center; gap: 4px; }
.ms-sb-ic svg { width: 13px; height: 11px; }
.ms-phone--sm .ms-sb { padding: 6px 11px 2px; font-size: 8.5px; }

/* Screen */
.ms-screen { flex: 1; min-height: 0; padding: 8px 12px; overflow: hidden; display: flex; flex-direction: column; }
.ms-phone--sm .ms-screen { padding: 6px 9px; }

/* Generic primitives */
.ms-title { font-size: 15px; font-weight: 800; color: #1A1A1A; }
.ms-phone--sm .ms-title { font-size: 12.5px; }
.ms-powered { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; color: #9a9a9a; }
.ms-powered b { border: 1px solid #E8450A; color: #E8450A; font-weight: 800; border-radius: 4px; padding: 1px 4px; font-size: 8px; }
.ms-plate { display: inline-block; background: #FDE68A; color: #1A1A1A; font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 4px; border: 1px solid #EAC94A; }
.ms-phone--sm .ms-plate { font-size: 8.5px; padding: 1px 5px; }

.ms-pill { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 100px; white-space: nowrap; }
.ms-pill.green { background: #DCFCE7; color: #166534; }
.ms-pill.blue { background: #EFF6FF; color: #1D4ED8; }
.ms-pill.red { background: #FEE2E2; color: #991B1B; }
.ms-pill.amber { background: #FEF3C7; color: #92400E; }
.ms-pill.gray { background: #F3F3F3; color: #555; }
.ms-pill.orange { background: #FCEDE7; color: #E8450A; }

.ms-card { border: 1px solid #EEE; border-radius: 10px; padding: 10px; }
.ms-divider { height: 1px; background: #F0F0F0; margin: 7px 0; }
.ms-muted { color: #9a9a9a; }
.ms-orange { color: #E8450A; }
.ms-link-orange { color: #E8450A; font-weight: 600; }

/* Tabs */
.ms-tabs { display: flex; gap: 14px; border-bottom: 1px solid #EEE; margin-bottom: 8px; }
.ms-tabs span { font-size: 10px; color: #9a9a9a; padding-bottom: 6px; position: relative; }
.ms-tabs .active { color: #1A1A1A; font-weight: 700; border-bottom: 2px solid #E8450A; }
.ms-phone--sm .ms-tabs { gap: 8px; }
.ms-phone--sm .ms-tabs span { font-size: 8.5px; }

/* Stat rows */
.ms-statrow { display: flex; align-items: center; justify-content: space-between; font-size: 10px; padding: 4px 0; }
.ms-statrow b { font-weight: 700; }

/* Donut rings */
.ms-donut { position: relative; width: 78px; height: 78px; }
.ms-donut-ring { width: 78px; height: 78px; border-radius: 50%; }
.ms-donut-hole { position: absolute; inset: 17px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.ms-donut-hole b { font-size: 14px; font-weight: 800; }
.ms-donut-hole span { font-size: 7px; color: #9a9a9a; }

/* Bottom nav */
.ms-nav { display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #EEE; padding-top: 7px; margin-top: auto; }
.ms-nav span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 7.5px; color: #b0b0b0; }
.ms-nav span svg { width: 15px; height: 15px; }
.ms-nav .active { color: #E8450A; }

/* Route strip */
.ms-route { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.ms-route-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ms-route-dot.from { background: #22C55E; }
.ms-route-dot.to { background: #EF4444; }
.ms-route-line { flex: 1; border-top: 1.5px dashed #D0D0D0; }

/* Map */
.ms-map { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #E6E6E6; background: linear-gradient(135deg, #EAF1E8, #E4EDEF); }
.ms-map svg.ms-map-grid path { stroke: #CBD8CF; fill: none; }
.ms-map .ms-road { stroke: #fff; stroke-width: 3; fill: none; }
.ms-truck { position: absolute; width: 16px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* Buttons */
.ms-btn { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; font-size: 10px; font-weight: 700; padding: 8px; }
.ms-btn.orange { background: #E8450A; color: #fff; }
.ms-btn.navy { background: #1E3A5F; color: #fff; }
.ms-btn.outline { border: 1px solid #D0D0D0; color: #444; }

/* Login hero */
.ms-login-hero { position: relative; height: 54%; background: linear-gradient(160deg, #3a3f45, #15171a); display: flex; align-items: flex-end; padding: 14px; }
.ms-login-hero b { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; }
.ms-input { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #E0E0E0; padding: 7px 2px; font-size: 10px; color: #9a9a9a; }
.ms-input svg { width: 13px; height: 13px; color: #b0b0b0; }

/* Work order / case rows */
.ms-meta { font-size: 8.5px; color: #9a9a9a; }
.ms-fab { position: absolute; right: 14px; bottom: 58px; width: 34px; height: 34px; border-radius: 50%; background: #1E3A5F; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
.ms-fab svg { width: 16px; height: 16px; }

/* Progress circle */
.ms-prog { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #FCEDE7; border-top-color: #E8450A; }

/* Van illustration */
.ms-van { display: block; }
.ms-dmg { position: absolute; width: 14px; height: 14px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; }
.ms-dmg.orange { background: #E8450A; }
.ms-dmg.blue { background: #3B82F6; }
.ms-dmg.green { background: #22C55E; }

/* Toggle */
.ms-toggle { width: 26px; height: 15px; border-radius: 100px; background: #E0E0E0; position: relative; flex-shrink: 0; }
.ms-toggle.on { background: #E8450A; }
.ms-toggle i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .2s; }
.ms-toggle.on i { left: 13px; }

/* iPad checksheet */
.ms-ipad-split { display: flex; flex: 1; min-height: 0; }
.ms-ipad-l { width: 38%; border-right: 1px solid #EEE; padding: 9px 8px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.ms-ipad-r { width: 62%; padding: 9px; overflow: hidden; display: flex; flex-direction: column; }
.ms-check-item { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #555; padding: 4px 5px; border-radius: 6px; }
.ms-check-item.active { background: #FCEDE7; color: #E8450A; font-weight: 700; }
.ms-check-item .ms-chk { width: 12px; height: 12px; border-radius: 50%; background: #DCFCE7; color: #16A34A; display: flex; align-items: center; justify-content: center; font-size: 7px; flex-shrink: 0; }
.ms-vans-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0; }
.ms-vans-grid .ms-vanbox { position: relative; border: 1px solid #EEE; border-radius: 7px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ms-vanbox span { font-size: 7px; color: #9a9a9a; }

/* ===========================================================
   LOGISTICS APP — landscape iPad (Job summary + Job list)
   + iPhone tyre checksheet  (slide 7)
   =========================================================== */
.lg-ipad {
  width: 498px; height: 432px; background: #fff; border: 2px solid #E0E0E0;
  border-radius: 22px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.lg-ipad-split { display: flex; flex: 1; min-height: 0; }
.lg-sum { width: 41%; border-right: 1px solid #EEE; padding: 9px 11px 0; display: flex; flex-direction: column; }
.lg-list { width: 59%; padding: 9px 11px 0; display: flex; flex-direction: column; min-width: 0; }
.lg-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #EEE; border-radius: 8px; overflow: hidden; }
.lg-2x2 > div { padding: 6px 8px; }
.lg-2x2 > div:nth-child(odd) { border-right: 1px solid #F0F0F0; }
.lg-2x2 > div:nth-child(1), .lg-2x2 > div:nth-child(2) { border-bottom: 1px solid #F0F0F0; }
.lg-2x2 .lbl { font-size: 7.5px; color: #9a9a9a; line-height: 1.2; }
.lg-2x2 .val { font-size: 12px; font-weight: 800; color: #1A1A1A; margin-top: 1px; }
.lg-donuts { display: flex; gap: 6px; margin-top: 8px; }
.lg-donuts > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.lg-legend { font-size: 7px; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.lg-legend.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
.lg-legend span { display: flex; align-items: center; gap: 3px; color: #555; }
.lg-legend i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* iPhone tyre checksheet */
.lg-phone {
  width: 232px; height: 444px; background: #fff; border: 2px solid #E0E0E0;
  border-radius: 36px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.lg-phone .ms-screen { padding: 9px 13px; }
.lg-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lg-secnav { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; padding: 7px 0; margin: 0 -13px 11px; padding-left: 13px; padding-right: 13px; font-size: 10px; }
.lg-secnav .mut { color: #b0b0b0; }
.lg-secnav .act { color: #E8450A; font-weight: 800; }
.lg-step { display: flex; align-items: flex-start; gap: 8px; }
.lg-num { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #1A1A1A; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; }
.lg-step b { font-size: 11px; display: block; }
.lg-step .sub { font-size: 8.5px; color: #9a9a9a; }

/* Tyre diagram */
.lg-diag { margin: 12px 2px; }
.lg-axlebar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; font-size: 8.5px; color: #555; font-weight: 700; }
.lg-axlebar b { font-size: 10px; color: #1A1A1A; letter-spacing: 0.04em; }
.lg-axlebar.front { border-radius: 40px 40px 0 0; border: 1.5px solid #F6CFC2; border-bottom: none; background: #FFF6F2; }
.lg-axlebar.back { border-radius: 0 0 8px 8px; border: 1.5px solid #F6CFC2; border-top: none; background: #FFF6F2; }
.lg-row { display: flex; align-items: center; padding: 0 4px; margin: 14px 0; }
.lg-side { display: flex; gap: 3px; }
.lg-tyre { width: 19px; height: 48px; border-radius: 5px; background: #6B7280; position: relative; }
.lg-tyre.active { background: #E8450A; width: 26px; }
.lg-tyre.empty { background: #F4F4F4; border: 1px solid #D8D8D8; width: 26px;
  background-image: repeating-linear-gradient(45deg,#CFCFCF 0,#CFCFCF 1.3px,transparent 1.3px,transparent 5px); }
.lg-tyre .mic { position: absolute; top: 5px; left: 4px; font-size: 6.5px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: 0; }
.lg-tyre .tread { position: absolute; bottom: -11px; left: 1px; font-size: 8px; font-weight: 800; color: #1A1A1A; }
.lg-emptylbl { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #9a9a9a; }
.lg-axle { flex: 1; position: relative; height: 48px; display: flex; align-items: center; justify-content: center; }
.lg-axle-line { position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; background: #F6CFC2; border-radius: 2px; }
.lg-axle-lbl { position: relative; background: #fff; padding: 0 7px; font-size: 11px; font-weight: 700; color: #1A1A1A; }

/* ===========================================================
   VALET APP — slide 9 (reuses .ms-phone primitives)
   =========================================================== */
.va-numrow { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: #1A1A1A; padding: 3px 0; }
.va-numdot { width: 15px; height: 15px; border-radius: 50%; background: #E8450A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; flex-shrink: 0; }
.va-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.va-status > div { display: flex; flex-direction: column; gap: 2px; }
.va-status .k { font-size: 8.5px; color: #777; }
.va-status .v { font-size: 11px; font-weight: 800; }
.va-status .v em { font-style: normal; color: #E8450A; }
.va-status .v b { color: #16A34A; }
.va-thumb { width: 46px; height: 38px; border-radius: 6px; background: #EEF1F4; border: 1px solid #E2E6EA; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #9aa7b2; }
.va-thumb svg { width: 22px; height: 22px; }

/* ===========================================================
   WORKSHOP APP — larger phones + orange accent (slide 8)
   =========================================================== */
.ms-stage--ws, .ms-stage--va { gap: 28px; }
.ms-stage--ws .ms-phone, .ms-stage--va .ms-phone { width: 260px; height: 500px; }
/* Valet & Field slides: enlarge mockups proportionally to fill the card, trim vertical padding */
.ms-stage--va, .ms-stage--fa { padding: 6px 16px; gap: 30px; }
.ms-stage--va .ms-phone, .ms-stage--fa .fa-phone { zoom: 1.22; }
@media (max-width: 1180px) {
  .ms-stage--va .ms-phone, .ms-stage--fa .fa-phone { zoom: 1.08; }
}
@media (max-width: 940px) {
  .ms-stage--va, .ms-stage--fa { gap: 22px; }
  .ms-stage--va .ms-phone, .ms-stage--fa .fa-phone { zoom: 1; }
}
.ws-orange .ms-btn.navy { background: #E8450A; }
.ws-orange .ms-fab { background: #E8450A; }
.ms-login-grad { position: relative; height: 50%; display: flex; align-items: flex-end; padding: 16px;
  background: linear-gradient(160deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%); }
.ms-login-grad b { color: #fff; font-size: 16px; font-weight: 800; line-height: 1.2; }
.ms-login-photo { background-image: linear-gradient(to bottom, rgba(15,18,24,0.05) 30%, rgba(15,18,24,0.78) 100%), url('../workshop-login.jpg'); background-size: cover; background-position: center 28%; }

/* ===========================================================
   FIELD & ASSESSMENT APP — 3 iPhone mockups (slide 10)
   =========================================================== */
.ms-stage--fa { gap: 28px; }
.fa-phone {
  width: 260px; height: 500px; background: #fff; border: 2px solid #E0E0E0;
  border-radius: 36px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; position: relative;
}
.fa-phone .ms-sb { padding: 9px 18px 4px; font-size: 11px; }
.fa-phone .ms-sb-ic svg { width: 15px; height: 12px; }
.fa-screen { flex: 1; min-height: 0; padding: 10px 14px; overflow: hidden; display: flex; flex-direction: column; }
.fa-screen.tight { padding: 0; }

/* small-caps section labels */
.fa-sec { font-size: 9px; font-weight: 700; letter-spacing: 0.13em; color: #9a9a9a; text-transform: uppercase; }

/* dashboard cards */
.fa-card { background: #fff; border: 1px solid #ECECEC; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.fa-open { background: #FEF0EE; border-radius: 14px; padding: 12px 13px; }
.fa-bignum { font-size: 30px; font-weight: 800; color: #E8450A; line-height: 1; }
.fa-circ { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.fa-circ.hgv { background: #F4C12E; } .fa-circ.lcv { background: #2C7BE0; } .fa-circ.oth { background: #6B7280; }
.fa-vdiv { width: 2px; background: #EFEFEF; align-self: stretch; }
.fa-dots { display: flex; gap: 4px; justify-content: center; }
.fa-dots i { width: 5px; height: 5px; border-radius: 50%; background: #E3D5CF; }
.fa-dots i.on { width: 14px; border-radius: 3px; background: #E8450A; }

/* bottom nav with center FAB */
.fa-nav { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid #EFEFEF; padding: 8px 26px 4px; margin-top: auto; position: relative; }
.fa-nav .it { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9px; color: #b0b0b0; }
.fa-nav .it svg { width: 17px; height: 17px; }
.fa-nav .it.active { color: #E8450A; }
.fa-navfab { width: 46px; height: 46px; border-radius: 50%; background: #3A3F45; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.22); margin-top: -22px; }
.fa-navfab svg { width: 20px; height: 20px; }

/* case detail */
.fa-statpill { font-size: 9px; font-weight: 700; padding: 2px 9px; border-radius: 100px; display: inline-block; }
.fa-statpill.pend { background: #FEE2E2; color: #C2554A; }
.fa-statpill.done { background: #EFF6FF; color: #2C7BE0; }
.fa-truckph { width: 80px; height: 70px; border-radius: 8px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fa-tile { background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 9px 11px; flex: 1; }
.fa-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 11px 12px; }
.fa-fab-navy { position: absolute; right: 16px; bottom: 18px; width: 48px; height: 48px; border-radius: 50%; background: #16213E; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 14px rgba(22,33,62,0.4); }
.fa-fab-navy svg { width: 22px; height: 22px; }

/* defects view */
.fa-vanwrap { position: relative; padding: 6px 24px; }
.fa-vanarrow { position: absolute; top: 50%; transform: translateY(-50%); color: #C9CDD2; }
.fa-vanarrow svg { width: 16px; height: 16px; }
.fa-thumb { width: 48px; height: 48px; border-radius: 7px; object-fit: cover; flex-shrink: 0; border: 1px solid #E4E4E4; }
.fa-thumb.dark { background: #4A4F55; }
.fa-toggle { width: 40px; height: 22px; border-radius: 100px; background: #E0E0E0; position: relative; flex-shrink: 0; }
.fa-toggle.on { background: #E8450A; }
.fa-toggle i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.fa-toggle.on i { left: 20px; }