/* Static copies of real TeamSure screens (am-*). Colours follow the app: menu boxes, indigo actions, rota grid tints. */
.am-scale { position: relative; overflow: hidden; }
.am-scale-in { transform-origin: 0 0; }
.am-app, .am-card, .am-phone { font-family: 'Inter', system-ui, sans-serif; color: #111827; text-align: left; line-height: 1.35; }
.am-app .ic, .am-card .ic, .am-phone .ic { flex: 0 0 auto; }

/* Window */
.am-desk { display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #f6f7fb; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08); height: 640px; }

/* Menu */
.am-side { background: #fff; border-right: 1px solid #e5e7eb; padding: 16px 10px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.am-org { display: flex; gap: 10px; align-items: center; padding: 0 6px; }
.am-org img { width: 38px; height: 38px; }
.am-org b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.am-org small { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }
.am-caret { color: #9ca3af; font-size: 10px; }
.am-band { align-self: flex-start; margin: 0 6px 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #374151; border: 1px solid #e5e7eb; background: #f8fafc; border-radius: 6px; padding: 3px 7px; }
.am-band i { width: 5px; height: 5px; border-radius: 50%; background: #2563eb; display: block; }
.am-sec { border: 1px solid #dbe4ff; background: #f7f9ff; border-radius: 12px; padding: 6px; }
.am-sec-h { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #1d4ed8; padding: 5px 4px 8px; border-bottom: 1px solid #e0e7ff; margin-bottom: 4px; }
.am-sec-ic { width: 22px; height: 22px; border-radius: 6px; background: #2563eb; color: #fff; display: grid; place-items: center; }
.am-sec-green { border-color: #c9f0d6; background: #f3fcf6; }
.am-sec-green .am-sec-h { color: #15803d; border-bottom-color: #d1fae5; }
.am-sec-green .am-sec-ic { background: #15803d; }
.am-it { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 12.5px; color: #1f2937; border-radius: 8px; position: relative; }
.am-it .ic { color: #6b7280; width: 14px; height: 14px; }
.am-it.on { background: #fff; border: 1px solid #e0e7ff; color: #4338ca; font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.am-it.on .ic { color: #4f46e5; }
.am-it.on::before { content: ""; position: absolute; left: -7px; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: #4f46e5; }

/* Top bar and page parts */
.am-main { display: flex; flex-direction: column; min-width: 0; }
.am-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 18px; background: #fff; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.am-top-t { font-size: 13.5px; color: #111827; }
.am-top-r { display: flex; align-items: center; gap: 14px; }
.am-help { width: 30px; height: 30px; border-radius: 50%; background: #7c6cf0; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 5px rgba(124,108,240,.18); }
.am-bell { color: #6b7280; display: flex; }
.am-user { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 5px 10px 5px 6px; font-size: 13px; }
.am-user i { width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; }
.am-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.am-crumb { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.am-crumb a { color: #2563eb; font-weight: 600; }
.am-crumb i { width: 4px; height: 4px; border-radius: 50%; background: #9ca3af; display: block; }
.am-crumb b { font-weight: 700; }
.am-head { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.am-hic { width: 38px; height: 38px; border-radius: 10px; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.am-hic-green { background: linear-gradient(135deg, #10b981, #059669); }
.am-hic-purple { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.am-hic-red { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.am-ht { flex: 1; min-width: 0; }
.am-ht b { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.am-ht small { display: block; font-size: 12px; color: #6b7280; margin-top: 3px; }
.am-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }
.am-pill-green { background: #d1fae5; color: #047857; }
.am-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; font-size: 12.5px; font-weight: 700; color: #111827; white-space: nowrap; }
.am-btn-pdf { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.am-btn-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); border: 0; color: #fff; box-shadow: 0 6px 14px -8px rgba(79,70,229,.8); }
.am-btn-sm { padding: 6px 10px; font-size: 11.5px; }
.am-seg { align-self: flex-start; display: inline-flex; background: #eef0f4; border-radius: 10px; padding: 3px; gap: 2px; }
.am-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #6b7280; }
.am-seg span.on { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.am-seg-sm span { padding: 5px 10px; font-size: 11.5px; }

/* Rota grid */
.am-grid-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.am-grid-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 13px; }
.am-grid-nav span { width: 26px; height: 26px; border-radius: 8px; background: #f3f4f6; color: #9ca3af; display: grid; place-items: center; font-size: 16px; }
.am-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.am-grid th { background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 10px; letter-spacing: .03em; padding: 7px 4px; text-align: center; border-left: 1px solid #e0e7ff; }
.am-grid th b { display: block; color: #111827; font-size: 12px; letter-spacing: 0; margin-top: 2px; }
.am-grid th.nm { width: 112px; text-align: left; padding-left: 10px; }
.am-grid th.hr { width: 52px; }
.am-grid td { border-top: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; padding: 7px 4px; text-align: center; vertical-align: middle; height: 58px; }
.am-grid td.nm { background: #dbeafe; text-align: left; font-weight: 700; font-size: 11.5px; padding-left: 10px; vertical-align: top; border-left: 0; }
.am-grid td.hr { background: #dbeafe; font-weight: 700; color: #374151; }
.am-grid td.off { color: #9ca3af; }
.am-grid td.hol { background: #fed7aa; color: #9a3412; font-weight: 700; border-color: #fdba74; }
.am-grid td.sh b { display: block; font-size: 11.5px; margin-bottom: 3px; }
.am-grid td.sh span { display: block; color: #6b7280; font-size: 9.5px; line-height: 1.35; }
.am-grid td.sh span i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.sh-teal { background: #e6f6f1; } .sh-teal i { background: #14b8a6; }
.sh-blue { background: #e0ecff; } .sh-blue i { background: #2563eb; }
.sh-purple { background: #f3e8ff; } .sh-purple i { background: #a855f7; }

/* Phone (My rota) */
.am-phone { width: 300px; background: #0f172a; border-radius: 38px; padding: 10px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.12); }
.am-phone-screen { background: #f6f7fb; border-radius: 30px; overflow: hidden; height: 600px; }
.am-top-phone { height: 52px; padding: 0 12px; gap: 10px; }
.am-top-phone .am-top-t { flex: 1; font-size: 13.5px; }
.am-burger { display: flex; flex-direction: column; gap: 3px; }
.am-burger i { width: 15px; height: 2px; background: #374151; border-radius: 2px; display: block; }
.am-user-sm { padding: 3px 6px 3px 3px; }
.am-body-phone { padding: 12px; gap: 10px; }
.am-body-phone .am-crumb { padding: 9px 12px; font-size: 12px; }
.am-head-phone { flex-wrap: wrap; padding: 14px; }
.am-head-phone .am-ht b { font-size: 17px; }
.am-btn-wide { margin-left: 50px; padding: 9px 14px; }
.am-tabs { display: flex; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 4px; gap: 2px; }
.am-tabs span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.am-tabs span.on { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.am-tabs em { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: #e0e7ff; color: #4338ca; }
.am-tabs span.on em { background: rgba(255,255,255,.25); color: #fff; }
.am-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9ca3af; margin-top: 2px; }
.am-shift { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #2563eb; border-radius: 12px; padding: 10px 12px; }
.am-date { width: 34px; text-align: left; }
.am-date small { display: block; font-size: 9.5px; font-weight: 800; color: #2563eb; }
.am-date small.m { color: #6b7280; font-weight: 500; }
.am-date b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.am-shift-t b { display: block; font-size: 13px; font-weight: 700; }
.am-shift-t small { display: block; font-size: 10.5px; color: #6b7280; margin-top: 3px; }

/* Cards used in feature sections */
.am-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.am-stack { display: flex; flex-direction: column; gap: 10px; }
.am-head-flat { border: 0; padding: 0 0 12px; }
.am-cal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.am-sq { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e5e7eb; display: grid; place-items: center; color: #374151; font-size: 16px; }
.am-leg { margin-left: auto; display: flex; gap: 6px; }
.am-leg span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #374151; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 9px; }
.am-leg i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.am-leg i.g { background: #10b981; }
.am-leg i.p { border: 1.5px dashed #f59e0b; }
.am-cal { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.am-cal-h, .am-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.am-cal-h span { background: #f8fafc; font-size: 9.5px; font-weight: 700; color: #6b7280; padding: 7px 6px; border-left: 1px solid #e5e7eb; }
.am-cal-h span:first-child, .am-cal-d:first-child { border-left: 0; }
.am-cal-d { min-height: 82px; border-top: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.am-cal-n { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.am-cal-n em { font-style: normal; font-size: 9px; font-weight: 700; background: #f3f4f6; color: #374151; padding: 1px 5px; border-radius: 6px; }
.am-chip { font-size: 9.5px; font-weight: 700; padding: 3px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-chip-staff { background: #d1fae5; color: #065f46; }
.am-chip-pend { background: #fff; color: #92400e; border: 1.5px dashed #f59e0b; }
.am-item { display: flex; gap: 12px; align-items: flex-start; }
.am-item-t { flex: 1; min-width: 0; }
.am-item-t b { display: block; font-size: 15px; font-weight: 700; }
.am-item-t small { display: block; color: #4b5563; font-size: 12px; margin-top: 3px; }
.am-item-t em { display: block; font-style: normal; font-size: 11px; color: #9ca3af; margin-top: 8px; }
.am-item-b { display: flex; gap: 6px; }
.am-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.am-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; }
.am-tag-doc { background: #dbeafe; color: #1e40af; }
.am-tag-up { background: #dcfce7; color: #166534; }
.am-nmw { margin-bottom: 10px; }
.am-nmw p { font-size: 12px; color: #4b5563; margin: 6px 0 10px; }
.am-card-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.am-card-t em { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.am-green { color: #166534; font-size: 13.5px; margin-bottom: 8px; }
.am-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.am-rates div { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 10px; padding: 9px 10px; }
.am-rates small { display: block; font-size: 9.5px; font-weight: 800; color: #166534; letter-spacing: .03em; }
.am-rates b { display: block; font-size: 16px; font-weight: 800; margin-top: 3px; }
.am-muted { font-size: 11px; color: #6b7280; }
.am-nmw-row { position: relative; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 10px; padding: 9px 26px 9px 12px; margin-top: 7px; }
.am-nmw-row b { display: block; font-size: 13px; }
.am-nmw-row small { display: block; font-size: 11px; color: #6b7280; }
.am-nmw-row span { display: block; font-size: 11.5px; color: #166534; margin-top: 4px; }
.am-nmw-row i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-style: normal; font-size: 16px; }

/* Hero stage: the desktop window with the phone in front */
.hero-stage { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(56px, 7vw, 96px); max-width: 1440px; margin: 0 auto; }
.hero-stage .am-scale-desk { max-width: 1120px; margin: 0 auto; border-radius: 16px; }
.hero-stage .hero-phone { position: absolute; right: max(12px, calc(50% - 640px)); bottom: clamp(30px, 4vw, 64px); transform: scale(.82); transform-origin: 100% 100%; }
@media (max-width: 1100px) { .hero-stage .hero-phone { display: none; } }
@media (max-width: 760px) {
  .hero-stage .am-scale-desk { display: none; }
  .hero-stage .hero-phone { display: block; position: static; margin: 0 auto; width: 300px; transform: none; }
}