/* Homepage: live hero board, product tour, Smart Cover diagram, system map and final call to
   action. Built on the existing VaultHQ look: paper background, ink outlines, offset shadows,
   cobalt, coral, lemon and lilac. The approved header is not styled here. */


/* ---------- Hero board: a live Smart Cover story ---------- */
.hero .board { overflow: visible; }
.open-shift { position: relative; overflow: hidden; transition: border-color .4s, background .4s; }
.open-shift .os-filled { position: absolute; inset: 0; display: flex; gap: 10px; padding: 14px 12px; background: var(--lilac); color: var(--ink); font-size: 11px; opacity: 0; transform: scale(.6); transition: opacity .45s, transform .55s cubic-bezier(.3, 1.6, .5, 1); }
.open-shift .os-filled b { font-size: 10px; }
.open-shift .os-filled span { font-weight: 700; font-size: 11px; line-height: 1.3; }
.open-shift .os-filled small { font-weight: 400; font-size: 10px; }
.open-shift.is-searching { animation: needs 1.1s ease-in-out infinite; }
.open-shift.is-filled { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.open-shift.is-filled .os-filled { opacity: 1; transform: none; }
.open-shift.is-filled .os-plus, .open-shift.is-filled .os-label { opacity: 0; }
@keyframes needs { 50% { background: rgba(255, 107, 87, .14); } }
.board-foot .foot-num { display: inline-block; transition: transform .3s; }
.board-foot .foot-num.bump { animation: bump .5s; }
.board-foot .foot-needs.done .dot { background: #12b76a; }
.board-foot .foot-notified { margin-left: auto; color: #087f5b; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.board-foot .foot-notified.show { opacity: 1; transform: none; }
@keyframes bump { 40% { transform: scale(1.5); } }

.cover-panel { position: absolute; right: -26px; bottom: 58px; z-index: 3; width: min(330px, 62%); padding: 14px; background: #fff; border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--cobalt); transform: rotate(-1.4deg) translateY(16px) scale(.96); opacity: 0; pointer-events: none; transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .2, 1); }
.cover-panel.show { opacity: 1; transform: rotate(-1.4deg); }
.cp-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 9px; border-bottom: 1px solid #e6e3dc; }
.cp-head span { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; color: var(--cobalt); }
.cp-head b { font-size: 13px; }
.cp-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.cp-list li { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; opacity: 0; transform: translateX(14px); transition: opacity .35s, transform .35s, background .35s, box-shadow .35s; }
.cp-list li.in { opacity: 1; transform: none; }
.cp-list li.pick { background: #f3f0ff; box-shadow: inset 3px 0 0 var(--cobalt); }
.cp-av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 9px; font-weight: 800; }
.cp-av.lilac { background: var(--lilac); } .cp-av.lemon { background: var(--lemon); } .cp-av.coral { background: var(--coral); }
.cp-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.25; }
.cp-name small { display: block; font-size: 10px; font-weight: 400; color: #6a6772; }
.cp-badge { flex: none; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; font-style: normal; }
.cp-badge.ok { background: #e3f6ec; color: #087f5b; } .cp-badge.warn { background: #fff1d6; color: #8a4f00; } .cp-badge.no { background: #ffe8e4; color: #b42318; }
.cp-status { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid #e6e3dc; font-size: 11px; font-weight: 700; }
.cp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); animation: blink 1s infinite; }
.cp-status.good .cp-dot { background: #12b76a; animation: none; }
.cp-text { transition: opacity .2s; }
@keyframes blink { 50% { opacity: .25; } }
.board .motion-pause { left: -16px; top: -16px; }

/* ---------- Ticker track fix (the original rule styles every div inside) ---------- */
.ticker .ticker-track { padding: 0; gap: 0; }

/* ---------- Product tour ---------- */
.tour { margin-top: 48px; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.25fr); gap: 34px; align-items: start; }
.tour-steps { display: grid; gap: 8px; }
.tour-step { position: relative; display: flex; gap: 16px; align-items: flex-start; width: 100%; padding: 16px 18px 18px; text-align: left; font: inherit; color: var(--ink); background: transparent; border: 1.5px solid transparent; border-radius: 14px; cursor: pointer; overflow: hidden; transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; }
.tour-step:hover { background: rgba(255, 255, 255, .6); }
.tour-step[aria-selected="true"] { background: #fff; border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.tour-step:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.tour-step .step-number { font-family: "DM Serif Display", serif; font-size: 26px; line-height: 1; color: var(--cobalt); min-width: 34px; }
.ts-copy strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.ts-copy span { display: block; max-height: 0; overflow: hidden; color: #5f5c66; font-size: 14px; line-height: 1.55; transition: max-height .45s ease, margin .45s ease; }
.tour-step[aria-selected="true"] .ts-copy span { max-height: 120px; margin-top: 6px; }
.ts-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cobalt); transform-origin: 0 50%; transform: scaleX(0); }
.tour-step[aria-selected="true"] .ts-bar { animation: tourbar var(--tour-ms, 7000ms) linear forwards; }
.tour.is-paused .ts-bar, .tour.is-holding .ts-bar { animation-play-state: paused; }
@keyframes tourbar { to { transform: scaleX(1); } }
.no-autoplay .ts-bar { display: none; }

.device { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 12px 12px 0 var(--lilac); overflow: hidden; }
.device-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1.5px solid var(--ink); background: #faf9f6; }
.device-bar i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.device-bar i:nth-child(1) { background: var(--coral); } .device-bar i:nth-child(2) { background: var(--lemon); } .device-bar i:nth-child(3) { background: #8ee0b5; }
.device-url { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #efede7; font-size: 11px; color: #5f5c66; }
.device-screen { position: relative; min-height: 470px; padding: 22px 22px 74px; }
.scr[hidden] { display: none !important; }
.tour .motion-pause { right: 14px; top: 8px; width: 28px; height: 28px; box-shadow: none; font-size: 10px; }

.scr { animation: scr-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes scr-in { from { opacity: 0; transform: translateY(14px); } }
.scr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.scr-head b { font-size: 17px; letter-spacing: -.02em; }
.pill { padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #2749ba; font-size: 11px; font-weight: 700; }
.pill.amber { background: #fff1d6; color: #8a4f00; }
.scr-btn { padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 9px; font-size: 11px; font-weight: 700; background: #fff; }
.scr-btn.primary { background: var(--cobalt); color: #fff; }
.scr-toast { position: absolute; left: 22px; right: 22px; bottom: 18px; padding: 11px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(12px); }

/* step 1: setup */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid #e6e3dc; border-radius: 11px; font-size: 13px; font-weight: 700; }
.checklist li small { display: block; color: #6a6772; font-weight: 400; font-size: 11px; }
.checklist li i { position: relative; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; }
.checklist li:not(.todo) i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: #12b76a; border-radius: 50%; transform: scale(0); }
.checklist li.todo { border-style: dashed; }
.scr-progress { margin-top: 16px; height: 8px; border-radius: 9px; background: #efede7; overflow: hidden; }
.scr-progress span { display: block; height: 100%; width: 80%; background: var(--cobalt); border-radius: 9px; transform-origin: 0 50%; }
.motion .scr-setup.is-active .checklist li:not(.todo) i::after { animation: tick .35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.motion .scr-setup.is-active .checklist li:nth-child(2) i::after { animation-delay: .5s; }
.motion .scr-setup.is-active .checklist li:nth-child(3) i::after { animation-delay: 1s; }
.motion .scr-setup.is-active .checklist li:nth-child(4) i::after { animation-delay: 1.5s; }
.motion .scr-setup.is-active .checklist li:first-child i::after { animation-delay: .1s; }
.motion .scr-setup.is-active .scr-progress span { animation: grow 2s .1s cubic-bezier(.2, .8, .2, 1) both; }
.scr-setup .checklist li:not(.todo) i::after { transform: scale(1); }
.motion .scr-setup .checklist li:not(.todo) i::after { transform: scale(0); }
@keyframes tick { to { transform: scale(1); } }
@keyframes grow { from { transform: scaleX(0); } }

/* step 2: people */
.people-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.people-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e6e3dc; border-radius: 11px; }
.pr-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.pr-name small { display: block; color: #6a6772; font-weight: 400; font-size: 11px; }
.flip { position: relative; display: inline-grid; background: #f1f0ec; color: #5f5c66; }
.flip > span { grid-area: 1 / 1; transition: opacity .3s; }
.flip .f-b { opacity: 0; color: #8a4f00; }
.motion .scr-people.is-active .people-rows li { animation: row-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.motion .scr-people.is-active .people-rows li:nth-child(2) { animation-delay: .1s; }
.motion .scr-people.is-active .people-rows li:nth-child(3) { animation-delay: .2s; }
.motion .scr-people.is-active .people-rows li:nth-child(4) { animation-delay: .3s; }
.motion .scr-people.is-active .scr-head .scr-btn { animation: press .5s 1.8s; }
.motion .scr-people.is-active .flip { animation: flipbg .01s 2.3s forwards; }
.motion .scr-people.is-active .flip .f-a { animation: fade-out .3s 2.3s forwards; }
.motion .scr-people.is-active .flip .f-b { animation: fade-in .3s 2.3s forwards; }
@keyframes row-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes press { 40% { transform: scale(.94); background: var(--lemon); } }
@keyframes flipbg { to { background: #fff1d6; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* step 3: rota */
.mini-rota { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 26px 48px 48px; gap: 6px; }
.mr-day { font-size: 10px; font-weight: 800; color: #6a6772; border-top: 1.5px solid var(--ink); padding-top: 6px; }
.mr-chip { grid-column: var(--c); grid-row: var(--r); display: flex; align-items: center; padding: 6px 8px; border: 1.5px solid var(--ink); border-radius: 8px; font-style: normal; font-size: 10px; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); }
.mr-chip.c1 { background: var(--cobalt); color: #fff; } .mr-chip.c2 { background: var(--lemon); } .mr-chip.c3 { background: var(--lilac); }
.mr-chip.warn { outline: 2.5px solid #f79009; outline-offset: 2px; }
.mr-chip.bad { outline: 2.5px solid #f04438; outline-offset: 2px; }
.warn-line { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.4; }
.warn-line b { display: block; font-size: 11px; }
.warn-line.amber { background: #fff1d6; color: #7a4500; }
.warn-line.red { background: #ffe8e4; color: #a01c12; }
.motion .scr-rota.is-active .mr-chip { animation: drop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.motion .scr-rota.is-active .mr-chip:nth-of-type(2) { animation-delay: .15s; }
.motion .scr-rota.is-active .mr-chip:nth-of-type(3) { animation-delay: .3s; }
.motion .scr-rota.is-active .mr-chip:nth-of-type(4) { animation-delay: .45s; }
.motion .scr-rota.is-active .mr-chip:nth-of-type(5) { animation-delay: .6s; }
.motion .scr-rota.is-active .mr-chip:nth-of-type(6) { animation-delay: .75s; }
.motion .scr-rota.is-active .warn-line { animation: rise-in .45s both; }
.motion .scr-rota.is-active .warn-line.amber { animation-delay: 1.4s; }
.motion .scr-rota.is-active .warn-line.red { animation-delay: 2s; }
.motion .scr-rota.is-active .scr-head .scr-btn { animation: press .5s 3.6s; }
.motion .scr-rota.is-active .scr-toast, .motion .scr-cover.is-active .scr-toast { animation: toast 2.6s forwards; }
.motion .scr-rota.is-active .scr-toast { animation-delay: 4s; }
@keyframes drop { from { opacity: 0; transform: translateY(-22px) rotate(-4deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast { 0% { opacity: 0; transform: translateY(12px); } 12%, 100% { opacity: 1; transform: none; } }
.scr-toast { opacity: 1; transform: none; }
.motion .scr-toast { opacity: 0; transform: translateY(12px); }

/* step 4: staff portal */
.scr-portal { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.phone { padding: 14px; border: 2px solid var(--ink); border-radius: 26px; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.ph-url { margin: 0 auto 10px; width: max-content; padding: 2px 10px; border-radius: 999px; background: #fff; font-size: 9px; color: #6a6772; }
.ph-hello { margin: 2px 4px 10px; font-weight: 800; font-size: 15px; }
.ph-card { margin-bottom: 9px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #e0ddd5; display: grid; gap: 2px; font-size: 12px; }
.ph-card small { font-size: 9px; font-weight: 800; letter-spacing: 1.1px; color: #6a6772; }
.ph-card b { font-size: 15px; }
.ph-req { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #fff1d6; color: #7a4500; font-size: 10px; font-weight: 700; }
.ph-clock { position: relative; display: grid; margin-bottom: 9px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--cobalt); color: #fff; text-align: center; font-weight: 800; font-size: 14px; }
.ph-clock > span { grid-area: 1 / 1; }
.ph-clock .pc-b { opacity: 0; }
.motion .scr-portal.is-active .ph-clock { animation: clockbg .01s 1.6s forwards, press .5s 1.2s; }
.motion .scr-portal.is-active .pc-a { animation: fade-out .25s 1.6s forwards; }
.motion .scr-portal.is-active .pc-b { animation: fade-in .25s 1.6s forwards; }
.motion .scr-portal.is-active .ph-req { animation: rise-in .45s 2.8s both; }
.scr-portal .ph-clock .pc-a { opacity: 0; } .scr-portal .ph-clock .pc-b { opacity: 1; }
.motion .scr-portal .ph-clock .pc-a { opacity: 1; } .motion .scr-portal .ph-clock .pc-b { opacity: 0; }
@keyframes clockbg { to { background: #12b76a; } }
.portal-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.portal-notes li { padding: 12px 14px; border-left: 3px solid var(--cobalt); background: #faf9f6; font-size: 13px; line-height: 1.5; }
.motion .scr-portal.is-active .portal-notes li { animation: rise-in .45s both; }
.motion .scr-portal.is-active .portal-notes li:nth-child(2) { animation-delay: .15s; }
.motion .scr-portal.is-active .portal-notes li:nth-child(3) { animation-delay: .3s; }

/* step 5: Smart Cover */
.cand { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cand li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 11px; border: 1px solid #e6e3dc; border-radius: 11px; }
.cand li.muted { background: #faf9f6; }
.cand .tick { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--cobalt); position: relative; }
.cand .tick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; }
.cand .tick.off { background: #e9e7e1; border-color: #c9c6bd; }
.cand .tick.off::after { content: ""; }
.cd-name { flex: 1; min-width: 140px; font-size: 13px; font-weight: 700; }
.cd-name small { display: block; color: #6a6772; font-weight: 400; font-size: 11px; }
.offer { display: inline-grid; opacity: 0; }
.offer > span { grid-area: 1 / 1; }
.offer .o-b { opacity: 0; }
.cover-actions { position: relative; margin-top: 12px; display: grid; justify-items: start; }
.cover-actions > span { grid-area: 1 / 1; }
.cover-actions .confirm { opacity: 0; }
.motion .scr-cover.is-active .cand li { animation: row-in .4s both; }
.motion .scr-cover.is-active .cand li:nth-child(2) { animation-delay: .12s; }
.motion .scr-cover.is-active .cand li:nth-child(3) { animation-delay: .24s; }
.motion .scr-cover.is-active .cand li:nth-child(4) { animation-delay: .36s; }
.motion .scr-cover.is-active .send { animation: press .5s 1.2s, fade-out .2s 1.8s forwards; }
.motion .scr-cover.is-active .offer { animation: fade-in .3s 1.8s forwards; }
.motion .scr-cover.is-active .best .offer .o-a { animation: fade-out .3s 3s forwards; }
.motion .scr-cover.is-active .best .offer .o-b { animation: fade-in .3s 3s forwards; }
.motion .scr-cover.is-active .best .offer { background: #e3f6ec; color: #087f5b; }
.motion .scr-cover.is-active .confirm { animation: fade-in .25s 3.2s forwards, press .5s 4s; }
.motion .scr-cover.is-active .best { animation: row-in .4s both, pick .01s 3s forwards; }
.motion .scr-cover.is-active .scr-toast { animation-delay: 4.6s; }
.scr-cover .offer { opacity: 1; } .motion .scr-cover .offer { opacity: 0; }
@keyframes pick { to { background: #f3f0ff; box-shadow: inset 3px 0 0 var(--cobalt); } }

/* step 6: reports */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { padding: 12px; border-radius: 12px; background: #f4f2ec; display: grid; gap: 3px; }
.tile.blue { background: var(--cobalt); color: #fff; }
.tile small { font-size: 9px; font-weight: 800; letter-spacing: 1px; opacity: .8; }
.tile b { font-size: 26px; letter-spacing: -.03em; }
.tile span { font-size: 11px; opacity: .8; }
.bars { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; }
.bt { display: grid; gap: 3px; }
.bt i { display: block; height: 7px; width: var(--w); border-radius: 9px; transform-origin: 0 50%; }
.bt i.s, .bars-key i.s { background: #c9c6bd; } .bt i.w, .bars-key i.w { background: var(--cobalt); }
.bars-key { margin: 12px 0 0; font-size: 11px; color: #6a6772; display: flex; align-items: center; gap: 6px; }
.bars-key i { width: 14px; height: 7px; border-radius: 9px; display: inline-block; }
.bars-key i.w { margin-left: 10px; }
.motion .scr-reports.is-active .bt i { animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.motion .scr-reports.is-active .bt i.w { animation-delay: .35s; }
.motion .scr-reports.is-active .tile { animation: rise-in .45s both; }
.motion .scr-reports.is-active .tile:nth-child(2) { animation-delay: .1s; }
.motion .scr-reports.is-active .tile:nth-child(3) { animation-delay: .2s; }

/* ---------- Smart Cover diagram ---------- */
.cover-flow { padding: 120px 7vw 40px; }
.cf-intro { max-width: 760px; }
.cf-intro h2, .sm-intro h2, .final-cta h2 { margin: 18px 0 0; font-size: clamp(40px, 4.4vw, 70px); line-height: .98; letter-spacing: -.05em; }
.cf-intro h2 em, .sm-intro h2 em, .final-cta h2 em { font-family: "DM Serif Display", serif; font-weight: 400; color: var(--cobalt); letter-spacing: -.03em; }
.cf-intro > p:last-child, .sm-intro > p:last-child { max-width: 600px; margin: 22px 0 0; color: #5a5862; font-size: 17px; line-height: 1.55; }
.cf-diagram { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px; position: relative; }
.cf-card { position: relative; padding: 22px 20px 20px; background: #fff; border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
.cf-card h3 { margin: 10px 0 12px; font-size: 18px; letter-spacing: -.02em; }
.cf-card > p { margin: 12px 0 0; color: #5f5c66; font-size: 13px; line-height: 1.5; }
.cf-step { position: absolute; top: -16px; left: 18px; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--lemon); font-family: "DM Serif Display", serif; font-size: 17px; }
.cf-card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -42px; width: 42px; height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 13px); background-size: 13px 3px; }
.motion .cf-diagram.is-in .cf-card:not(:last-child)::after { animation: flow 0.6s linear infinite; }
@keyframes flow { to { background-position: 13px 0; } }
.cf-shift { display: grid; gap: 3px; padding: 12px; border: 2px dashed var(--coral); border-radius: 12px; font-size: 12px; }
.cf-shift small { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #6a6772; }
.cf-shift b { font-size: 18px; }
.cf-shift .b { justify-self: start; margin-top: 4px; }
.motion .cf-diagram.is-in .cf-shift { animation: needs 1.2s ease-in-out 3; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; gap: 9px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.checks li small { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; color: #8a8790; font-style: italic; }
.checks li i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); background: #12b76a; }
.checks li i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; font-style: normal; }
.cf-small { font-size: 11px !important; }
.ranked { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ranked li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #e6e3dc; border-radius: 10px; font-size: 12px; font-weight: 700; }
.ranked li .b { margin-left: auto; }
.cf-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; counter-reset: none; }
.cf-timeline li { position: relative; padding: 0 0 14px 24px; font-size: 13px; font-weight: 700; }
.cf-timeline li::before { content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.cf-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1.5px; background: var(--ink); }
.cf-timeline li:last-child { padding-bottom: 0; }
.motion .cf-diagram .cf-card { opacity: 0; transform: translateY(26px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.motion .cf-diagram.is-in .cf-card { opacity: 1; transform: none; }
.motion .cf-diagram.is-in .cf-card:nth-child(2) { transition-delay: .5s; }
.motion .cf-diagram.is-in .cf-card:nth-child(3) { transition-delay: 1.9s; }
.motion .cf-diagram.is-in .cf-card:nth-child(4) { transition-delay: 2.7s; }
.motion .cf-diagram .checks li i { transform: scale(0); }
.motion .cf-diagram.is-in .checks li i { animation: tick .35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.motion .cf-diagram.is-in .checks li:nth-child(1) i { animation-delay: .9s; }
.motion .cf-diagram.is-in .checks li:nth-child(2) i { animation-delay: 1.05s; }
.motion .cf-diagram.is-in .checks li:nth-child(3) i { animation-delay: 1.2s; }
.motion .cf-diagram.is-in .checks li:nth-child(4) i { animation-delay: 1.35s; }
.motion .cf-diagram.is-in .checks li:nth-child(5) i { animation-delay: 1.5s; }
.motion .cf-diagram.is-in .checks li:nth-child(6) i { animation-delay: 1.65s; }
.motion .cf-diagram .ranked li { opacity: 0; transform: translateX(14px); }
.motion .cf-diagram.is-in .ranked li { animation: slide-in .4s forwards; }
.motion .cf-diagram.is-in .ranked li:nth-child(1) { animation-delay: 2.1s; }
.motion .cf-diagram.is-in .ranked li:nth-child(2) { animation-delay: 2.2s; }
.motion .cf-diagram.is-in .ranked li:nth-child(3) { animation-delay: 2.3s; }
.motion .cf-diagram.is-in .ranked li:nth-child(4) { animation-delay: 2.4s; }
.motion .cf-diagram .cf-timeline li::before { transition: background .3s; }
.motion .cf-diagram.is-in .cf-timeline li::before { animation: dot-on .3s forwards; }
.motion .cf-diagram.is-in .cf-timeline li:nth-child(1)::before { animation-delay: 3.1s; }
.motion .cf-diagram.is-in .cf-timeline li:nth-child(2)::before { animation-delay: 3.6s; }
.motion .cf-diagram.is-in .cf-timeline li:nth-child(3)::before { animation-delay: 4.1s; }
.motion .cf-diagram.is-in .cf-timeline li:nth-child(4)::before { animation-delay: 4.6s; }
@keyframes slide-in { to { opacity: 1; transform: none; } }
@keyframes dot-on { to { background: #12b76a; } }
.cf-timeline li::before { background: #12b76a; }
.motion .cf-timeline li::before { background: #fff; }

/* ---------- System map ---------- */
.system-map { padding: 120px 7vw 40px; }
.sm-intro { max-width: 760px; }
.sm-canvas { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 96px 12%; padding: 10px 0; }
.sm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sm-lines path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 6 7; }
.motion .sm-canvas.is-in .sm-lines path { animation: dash 1.2s linear infinite; }
.sm-lines .pulse { fill: var(--coral); stroke: var(--ink); stroke-width: 1.2; }
.sm-canvas.is-paused .sm-lines path { animation-play-state: paused; }
@keyframes dash { to { stroke-dashoffset: -26; } }
.sm-node { position: relative; z-index: 1; grid-column: var(--x); grid-row: var(--y); align-self: center; display: grid; gap: 4px; padding: 16px 18px; background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); transition: transform .25s, box-shadow .25s, background .25s; }
.sm-node b { font-size: 16px; letter-spacing: -.02em; }
.sm-node span { font-size: 12px; color: #5f5c66; line-height: 1.4; }
.sm-node.sm-hub { padding: 26px 22px; background: var(--cobalt); color: #fff; box-shadow: 7px 7px 0 var(--lilac); text-align: center; }
.sm-node.sm-hub b { font-size: 26px; font-family: "DM Serif Display", serif; font-weight: 400; }
.sm-node.sm-hub span { color: #dfe6ff; }
.sm-node.is-hot { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--ink); background: #fffbe0; }
.sm-node.sm-hub.is-hot { background: #1f45d1; box-shadow: 9px 10px 0 var(--lilac); }
.sm-edges { list-style: none; margin: 0; padding: 0; }
.sm-edges li { position: absolute; z-index: 2; max-width: 190px; padding: 5px 9px; border: 1px solid var(--ink); border-radius: 8px; background: var(--lemon); font-size: 11px; font-weight: 700; line-height: 1.3; transform: translate(-50%, -50%); white-space: normal; text-align: center; opacity: 0; transition: opacity .4s; }
.sm-canvas.has-lines .sm-edges li { opacity: 1; }
.motion .sm-canvas.has-lines .sm-edges li { opacity: 0; }
.motion .sm-canvas.has-lines.is-in .sm-edges li { animation: fade-in .5s forwards; animation-delay: calc(.4s + var(--i, 0) * .25s); }
.sm-canvas:not(.has-lines) .sm-edges { display: none; }
.sm-canvas .motion-pause { right: 0; top: -46px; }

/* ---------- Final call to action ---------- */
.final-cta { padding: 60px 4.5vw 110px; }
.fc-inner { position: relative; overflow: hidden; padding: 80px 7vw; border: 2px solid var(--ink); border-radius: 26px; background: var(--ink); color: #fff; text-align: center; box-shadow: 12px 12px 0 var(--coral); }
.final-cta h2 { margin-top: 0; color: #fff; }
.final-cta h2 em { color: var(--lemon); }
.fc-inner p { margin: 22px auto 0; max-width: 520px; color: #d7d5de; font-size: 17px; }
.fc-inner .hero-actions { justify-content: center; }
.fc-inner .cta-secondary { color: var(--ink); }
.fc-inner .fc-primary { box-shadow: 3px 3px 0 var(--lemon); border-color: #fff; }
.motion .fc-inner::before, .motion .fc-inner::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .14); pointer-events: none; }
.motion .fc-inner::before { width: 340px; height: 340px; left: -120px; top: -140px; animation: orbit 14s linear infinite; }
.motion .fc-inner::after { width: 220px; height: 220px; right: -60px; bottom: -110px; animation: orbit 10s linear infinite reverse; }
@keyframes orbit { to { transform: rotate(360deg) translateX(12px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cf-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 34px; }
  .cf-card:not(:last-child)::after { display: none; }
}
@media (max-width: 1000px) {
  .tour { grid-template-columns: 1fr; }
  .tour-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tour-step { padding: 12px; flex-direction: column; gap: 6px; }
  .ts-copy strong { font-size: 14px; }
  .tour-step .ts-copy span { display: none; }
  .cover-panel { right: 10px; }
}
@media (max-width: 1000px) {
  .sm-canvas { grid-template-columns: 1fr; gap: 24px; max-width: 560px; }
  .sm-node { grid-column: 1 !important; grid-row: auto !important; }
  .sm-node[data-node="people"] { order: 1; } .sm-node[data-node="leave"] { order: 2; } .sm-node[data-node="rota"] { order: 3; }
  .sm-node[data-node="cover"] { order: 4; } .sm-node[data-node="attendance"] { order: 5; } .sm-node[data-node="timesheets"] { order: 6; }
  .sm-node[data-node="reports"] { order: 7; } .sm-node[data-node="notes"] { order: 8; }
  .sm-node:not([data-node="notes"])::after { content: "↓"; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); font-weight: 800; font-size: 14px; line-height: 1; color: var(--ink); }
  .sm-lines, .sm-edges { display: none !important; }
}
@media (max-width: 760px) {
  .scr-portal { grid-template-columns: 1fr; }
  .portal-notes { display: none; }
}
@media (max-width: 620px) {
  .cover-panel { left: 8px; right: 8px; width: auto; bottom: 44px; padding: 10px; transform: translateY(16px) scale(.96); box-shadow: 5px 5px 0 var(--cobalt); }
  .cover-panel.show { transform: none; }
  .cp-name small { display: none; }
  .open-shift .os-filled { flex-direction: column; gap: 2px; padding: 8px 7px; }
  .open-shift .os-filled span { font-size: 8.5px; letter-spacing: -.01em; }
  .open-shift .os-filled { padding: 8px 5px; }
  .board .motion-pause { left: auto; right: -6px; top: -14px; }
  .board-foot .foot-notified { display: none; }
  .tour { margin-top: 30px; }
  .tour-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-screen { min-height: 500px; padding: 16px 16px 70px; }
  .scr-toast { left: 16px; right: 16px; }
  .cover-flow, .system-map { padding: 80px 22px 20px; }
  .cf-diagram { grid-template-columns: 1fr; gap: 40px; }
  .tiles b { font-size: 20px; }
  .final-cta { padding: 40px 18px 80px; }
  .fc-inner { padding: 56px 22px; }
  .phone { max-width: 240px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .open-shift.is-searching, .cp-dot { animation: none; }
}