/* The walkthrough player and the simulated Magnifire app. App colours follow the real app's tokens.
   Everything inside .app is sized in em from the screen's font-size, so a frame scales as one piece. */
.sim__live { display: grid; gap: 1.5rem; justify-items: center; }
.sim--phone .sim__live { grid-template-columns: minmax(0, 25rem) minmax(0, 32rem); justify-content: center; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); }
.sim__stage { width: 100%; }
.sim__side { width: 100%; display: grid; gap: 1.25rem; }
.sim--desk .sim__side { max-width: 60rem; justify-items: center; text-align: center; }
.sim__words { display: grid; gap: 0.75rem; min-height: 13rem; align-content: start; }
.sim--desk .sim__words { min-height: 6.5rem; max-width: 52rem; }
.sim__words.is-in > * { animation: sim-words 480ms var(--ease) both; }
.sim__words.is-in > .sim__caption { animation-delay: 60ms; }
.sim__words.is-in > .sim__say { animation-delay: 140ms; }
.sim__n { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--orange); font-variant-numeric: tabular-nums; }
.sim__caption { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.15; color: var(--head); font-weight: 600; text-wrap: balance; }
.sim__say { font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.6; color: var(--fg); }
.sim__bar { width: 100%; height: 0.25rem; border-radius: 0.125rem; background: var(--rule); overflow: hidden; }
.sim__bar i { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }
.sim__controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sim--desk .sim__controls { justify-content: center; }
.sim__controls button { min-width: 2.75rem; height: 2.75rem; border-radius: 1.4rem; border: 1px solid var(--rule); background: var(--card); color: var(--head); font-size: 1.125rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease); }
.sim__controls button:hover { border-color: var(--orange); }
.sim__controls .sim__play { background: var(--orange); border-color: var(--orange); color: #fff; font-size: 0.875rem; }
.sim__dots { display: inline-flex; gap: 6px; margin-left: 0.5rem; }
.sim__dots i { width: 1.4rem; height: 0.4rem; border-radius: 0.2rem; background: var(--rule); cursor: pointer; transition: background-color 200ms var(--ease); }
.sim__dots i.is-past { background: #fbc98f; }
.sim__dots i.is-on { background: var(--orange); }
.sim__stills { display: none; }
.sim__stage { position: relative; }
.sim.is-sound .sim--desk .device__screen > * { animation: sim-screen 420ms var(--ease) both; }
.is-press::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em; border-radius: 50%; background: rgba(254,143,29,0.45); animation: sim-ripple 600ms var(--ease) forwards; pointer-events: none; }
.a-btn, .a-lbtn, .a-opt { position: relative; }
@keyframes sim-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sim-words { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
@keyframes sim-screen { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes sim-ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sim__words.is-in > *, .device__screen > *, .is-press::after { animation: none; } }

.device { position: relative; container-type: inline-size; background: #f8f7fa; overflow: hidden; }
.device--phone { aspect-ratio: 9 / 18.5; border-radius: 2.4rem; border: 10px solid #15161f; box-shadow: 0 24px 60px rgba(21,22,31,0.28); }
.device__notch { position: absolute; z-index: 5; top: 8px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 12px; background: #15161f; }
.device--desk { aspect-ratio: 16 / 9.4; border-radius: 12px; border: 1px solid #d1d5db; box-shadow: 0 24px 60px rgba(21,22,31,0.18); display: flex; flex-direction: column; }
.device__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #ececf2; border-bottom: 1px solid #d9dbe3; flex-shrink: 0; }
.device__bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9cad6; }
.device__bar span { margin-left: 12px; font-size: 11px; color: #6d6f85; background: #fff; border-radius: 6px; padding: 2px 12px; }
.device__screen { position: absolute; inset: 0; overflow: hidden; }
.device--desk .device__screen { position: relative; inset: auto; flex: 1; min-height: 0; }

.app { font-family: var(--font); font-size: 3.55cqw; line-height: 1.4; color: #494a66; background: #f8f7fa; user-select: none; }
.app--desk { font-size: 1.08cqw; }
.app b, .app strong { font-weight: 600; color: #2f3349; }
.app h1, .app h2 { color: #2f3349; margin: 0; letter-spacing: 0; }
.app small { font-size: 0.85em; color: #6d6f85; }
.a-chip { display: inline-flex; align-items: center; padding: 0.15em 0.6em; border-radius: 0.3em; font-size: 0.82em; font-weight: 600; white-space: nowrap; background: #eeeef3; color: #494a66; }
.a-chip--ok { background: #dff3e9; color: #146a47; }
.a-chip--fault { background: #fff1b8; color: #6e5200; }
.a-chip--alarm { background: #fde3e4; color: #9b1c35; }
.a-chip--info { background: #e9ecf6; color: #3a4a85; }
.a-chip--pre { background: #eceafa; color: #4b3f97; }
.a-chip--solid { background: #e5484d; color: #fff; letter-spacing: 0.04em; }
.a-eyebrow { font-size: 0.78em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6d6f85; }
.a-small { font-size: 0.85em; color: #6d6f85; }
.a-small--alarm { color: #9b1c35; }
.a-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; min-height: 3em; padding: 0 1em; border-radius: 0.6em; font-weight: 600; transition: transform 160ms var(--ease), background-color 200ms var(--ease); }
.a-btn--solid { background: #fe8f1d; color: #fff; }
.a-btn--line { border: 1px solid #c9cad6; color: #494a66; background: #fff; }
.is-press { transform: scale(0.96); filter: brightness(0.92); }
.a-card { background: #fff; border-radius: 0.75em; box-shadow: 0 0.15em 0.45em rgba(39,40,61,0.08); }
.a-card--pad { padding: 1em; display: grid; gap: 0.6em; }
.a-bar { display: block; height: 0.45em; border-radius: 0.25em; background: #eeeef3; overflow: hidden; }
.a-bar i { display: block; height: 100%; border-radius: 0.25em; background: #fe8f1d; }
.a-av { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; font-size: 0.8em; font-weight: 600; color: #fff; flex-shrink: 0; background: #3a4a85; }
.a-av--teal { background: #2f7f86; } .a-av--plum { background: #7a4a78; } .a-av--clay { background: #a8644a; }

/* phone: QR scan */
.a-cam { position: absolute; inset: 0; background: linear-gradient(180deg, #5b5f6e, #474a59 70%, #3b3e4b); display: grid; place-items: center; }
/* The cabinet: a cream steel door with a red nameplate, a glazed fascia (display, status lights, keys, zone lights) and a key lock. */
.a-door { position: relative; width: 88%; background: linear-gradient(160deg, #eceae2, #d9d6cc); border-radius: 0.35em; border: 0.2em solid #b9b6ab; box-shadow: 0 1em 2em rgba(0,0,0,0.4), inset 0 0 0 0.12em rgba(255,255,255,0.5); padding: 1em 1.5em 1.8em; display: flex; flex-direction: column; align-items: center; gap: 1em; }
.a-door__hinge { position: absolute; left: -0.3em; width: 0.4em; height: 2.2em; border-radius: 0.15em; background: #9a978c; top: 12%; }
.a-door__hinge + .a-door__hinge { top: auto; bottom: 12%; }
.a-door__lock { position: absolute; right: 0.4em; top: 46%; width: 0.9em; height: 0.9em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e6e6e6, #8d8d8d); box-shadow: 0 0 0 0.12em #77756c; }
.a-door__lock::after { content: ""; position: absolute; left: 44%; top: 25%; width: 12%; height: 50%; background: #3b3b3b; border-radius: 0.1em; }
.a-door__label { align-self: stretch; text-align: center; font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; color: #fff; background: #c8102e; border-radius: 0.2em; padding: 0.35em 0; }
.a-fip { align-self: stretch; background: #23252e; border-radius: 0.3em; border: 0.15em solid #8f8c82; font-size: 1.3em; padding: 0.75em; display: grid; grid-template-columns: 1fr auto; gap: 0.6em 0.8em; box-shadow: inset 0 0.2em 0.6em rgba(0,0,0,0.5); }
.a-fip__lcd { background: linear-gradient(180deg, #b9d36a, #a5c254); border-radius: 0.15em; padding: 0.45em 0.6em; display: grid; gap: 0.15em; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.6em; font-weight: 700; letter-spacing: 0.06em; color: #1f2a12; box-shadow: inset 0 0.15em 0.4em rgba(0,0,0,0.35); white-space: nowrap; }
.a-fip__leds { grid-row: span 2; display: grid; align-content: space-between; gap: 0.3em; }
.a-fip__leds span { display: flex; align-items: center; gap: 0.5em; font-size: 0.42em; font-weight: 600; letter-spacing: 0.08em; color: #c9cad3; }
.a-fip__leds span::before { content: ""; width: 0.9em; height: 0.9em; border-radius: 50%; background: #4a4c57; box-shadow: inset 0 0 0 0.12em rgba(0,0,0,0.35); }
.a-fip__leds .is-green::before { background: #4fe07c; box-shadow: 0 0 0.6em #4fe07c; }
.a-fip__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.a-fip__keys b { font-size: 0.36em; font-weight: 700; letter-spacing: 0.04em; text-align: center; padding: 0.7em 0; border-radius: 0.3em; background: #dcdde3; color: #2a2c38; box-shadow: 0 0.15em 0 #8b8d98; }
.a-fip__keys b:first-child { background: #f2c230; } .a-fip__keys b:nth-child(2) { background: #e2574c; color: #fff; }
.a-fip__zones { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.25em; padding-top: 0.5em; border-top: 0.08em solid #444652; }
.a-fip__zones i { aspect-ratio: 1; border-radius: 50%; background: #4a4c57; }
.a-sticker { position: relative; width: 74%; aspect-ratio: 1; font-size: 0.8em; background: #27283d; border-radius: 0.25em; display: flex; flex-direction: column; align-items: center; padding: 5% 5% 4%; box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.35); }
.a-sticker__logo { width: 55%; display: block; }
.a-sticker__tag { margin-top: 2.5%; color: #fff; font-size: 0.62em; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; }
.a-sticker__qr { position: relative; margin-top: 3.5%; width: 56%; background: #fff; border-radius: 0.3em; padding: 3%; display: block; }
.a-sticker__qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.a-sticker__hint { margin-top: 3%; color: #fe8f1d; font-size: 0.5em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.45; text-align: center; }
.a-sticker__id { position: absolute; right: 4%; bottom: 4%; color: rgba(255,255,255,0.55); font-size: 0.42em; font-weight: 600; letter-spacing: 0.05em; }
.a-finder { position: absolute; inset: -3%; transform: scale(1.5); opacity: 0.5; transition: transform 700ms var(--ease), opacity 400ms var(--ease); }
.a-finder.is-lock { transform: scale(1); opacity: 1; }
.a-finder i { position: absolute; width: 22%; height: 22%; border: 0.25em solid #fe8f1d; }
.a-finder i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .a-finder i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.a-finder i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .a-finder i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.a-open { position: absolute; left: 5%; right: 5%; top: 9%; background: #fff; border-radius: 1em; padding: 0.8em 1em; display: grid; box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.3); transform: translateY(-160%); transition: transform 500ms var(--ease); }
.a-open.is-in { transform: none; } .a-open.is-in.is-press { transform: scale(0.96); }
.a-open span { font-size: 0.88em; }

/* phone: start + finished pages */
.a-page { position: absolute; inset: 0; padding: 3.2em 1.1em 1.1em; display: flex; flex-direction: column; gap: 0.6em; overflow: hidden; }
.a-h1 { font-size: 1.5em; font-weight: 600; } .a-sub { margin: -0.4em 0 0.2em; font-size: 0.9em; color: #6d6f85; }
.a-legend { font-weight: 600; color: #2f3349; }
.a-opt { display: flex; gap: 0.7em; align-items: flex-start; background: #fff; border: 1.5px solid #ececf2; border-radius: 0.7em; padding: 0.65em 0.8em; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
.a-opt span { display: grid; } .a-opt small { line-height: 1.35; }
.a-opt.is-on { border-color: #fe8f1d; background: #fff8ef; }
.a-radio { flex-shrink: 0; width: 1.2em; height: 1.2em; margin-top: 0.15em; border-radius: 50%; border: 1.5px solid #c9cad6; }
.a-opt.is-on .a-radio { border: 0.38em solid #fe8f1d; }
.a-field { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #ececf2; border-radius: 0.6em; padding: 0.6em 0.8em; font-size: 0.92em; }
.a-page > .a-btn { margin-top: 0.2em; }
.a-done__head { text-align: center; display: grid; justify-items: center; gap: 0.2em; }
.a-done__head h2 { font-size: 1.3em; } .a-done__head p { margin: 0; font-size: 0.85em; color: #6d6f85; }
.a-done__icon { width: 2.8em; height: 2.8em; border-radius: 50%; background: #dff3e9; position: relative; }
.a-done__icon::after, .a-tick::after { content: ""; position: absolute; left: 50%; top: 46%; width: 28%; height: 50%; border: solid #1f9d6b; border-width: 0 0.18em 0.18em 0; transform: translate(-50%, -50%) rotate(45deg); }
.a-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; text-align: center; }
.a-figs div { display: grid; } .a-figs b { font-size: 1.7em; line-height: 1.1; } .a-figs b.is-alarm { color: #c8213f; } .a-figs span { font-size: 0.82em; color: #6d6f85; }
.a-line, .a-circ { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.a-circ { font-weight: 500; color: #2f3349; }

/* phone: live test */
.a-live-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.a-band { background: #2f3349; color: #fff; padding: 3em 1.1em 1em; transition: box-shadow 400ms var(--ease); }
.a-band.is-glow { box-shadow: inset 0 0 0 0.25em #fe8f1d; }
.a-band__top { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.78em; color: rgba(255,255,255,0.72); }
.app .a-band__title { color: #fff; font-size: 1.35em; font-weight: 600; margin: 0.15em 0 0.6em; font-variant-numeric: tabular-nums; }
.a-band__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.a-tile { background: rgba(255,255,255,0.1); border-radius: 0.6em; padding: 0.55em 0.8em; display: grid; }
.a-tile b { color: #fff; font-size: 1.6em; line-height: 1.1; font-variant-numeric: tabular-nums; } .a-tile span { font-size: 0.78em; color: rgba(255,255,255,0.72); }
.a-live { display: inline-flex; align-items: center; gap: 0.35em; color: #7fe0b6; font-weight: 600; white-space: nowrap; }
.a-live i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #2fd08e; }
.a-live--dark { color: #146a47; } .a-live--dark i { background: #1f9d6b; }
.a-body { flex: 1; min-height: 0; overflow: hidden; padding: 0.8em; display: flex; flex-direction: column; gap: 0.7em; }
.a-seg { display: flex; gap: 0.3em; background: #eeeef3; border-radius: 0.6em; padding: 0.22em; flex-shrink: 0; }
.a-seg span { flex: 1; text-align: center; padding: 0.4em; border-radius: 0.45em; font-size: 0.88em; font-weight: 500; color: #6d6f85; }
.a-seg .is-on { background: #fff; color: #2f3349; box-shadow: 0 1px 2px rgba(39,40,61,0.12); }
.a-card__head { padding: 0.8em 0.9em 0.6em; display: grid; gap: 0.45em; }
.a-chips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.a-goal { padding: 0.2em 0.6em; border-radius: 0.35em; background: #fff1b8; color: #6e5200; font-size: 0.82em; font-weight: 600; transition: transform 300ms var(--ease), background-color 300ms var(--ease); }
.a-goal b { color: inherit; }
.a-goal.is-bump { background: #ffe38a; transform: scale(1.06); }
[data-circuit] { transition: box-shadow 400ms var(--ease); }
[data-circuit].is-focus { box-shadow: 0 0 0 0.22em #fe8f1d, 0 0.15em 0.45em rgba(39,40,61,0.08); }
.a-row { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 0.9em; border-top: 1px solid #ececf2; max-height: 5em; overflow: hidden; transition: max-height 500ms var(--ease) 500ms, padding 500ms var(--ease) 500ms, opacity 400ms var(--ease), background-color 300ms var(--ease); }
.a-row.is-done { background: #dff3e9; opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; }
.a-row__text { flex: 1; min-width: 0; display: grid; }
.a-row__name { color: #2f3349; } .a-row__sub { font-size: 0.82em; color: #6d6f85; }
.a-why { color: #9b1c35; font-weight: 500; }
.a-chev { width: 0.5em; height: 0.5em; border: solid #c9cad6; border-width: 0.12em 0.12em 0 0; transform: rotate(45deg); flex-shrink: 0; }
.a-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 0.7em 0.8em 1.1em; background: #fff; border-top: 1px solid #ececf2; flex-shrink: 0; font-size: 0.92em; }
.a-latest { background: #fff; border: 1.5px solid #b9e3cf; border-radius: 0.75em; padding: 0.7em 0.9em; display: grid; gap: 0.3em; flex-shrink: 0; animation: a-in 450ms var(--ease); }
.a-latest__head { display: flex; justify-content: space-between; align-items: center; }
.a-latest__title { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; color: #146a47; }
.a-tick { position: relative; width: 1.15em; height: 1.15em; border-radius: 50%; background: #dff3e9; display: inline-block; }
.a-latest__time { font-size: 0.82em; color: #6d6f85; }
.a-ask { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; flex-wrap: wrap; padding-top: 0.45em; border-top: 1px solid #ececf2; font-size: 0.92em; }
.a-btns { display: inline-flex; gap: 0.35em; }
.a-lbtn { padding: 0.25em 0.7em; border-radius: 0.45em; border: 1px solid #c9cad6; font-weight: 600; font-size: 0.92em; color: #2f3349; white-space: nowrap; transition: transform 160ms var(--ease); }
.a-lbtn--solid { background: #2f3349; border-color: #2f3349; color: #fff; }
.a-follow { background: #fff6d6; border: 1px solid #f2c230; border-radius: 0.75em; padding: 0.7em 0.9em; display: grid; gap: 0.5em; color: #6e5200; font-size: 0.92em; flex-shrink: 0; animation: a-in 450ms var(--ease); }
.a-follow strong { color: #6e5200; }
.a-meter { display: flex; align-items: center; gap: 0.6em; font-weight: 600; font-variant-numeric: tabular-nums; }
.a-meter__bar { flex: 1; height: 0.45em; border-radius: 0.25em; background: rgba(110,82,0,0.15); overflow: hidden; }
.a-meter__bar i { display: block; height: 100%; width: 0; background: #c79a00; border-radius: 0.25em; transition: width 600ms var(--ease); }
.a-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: #fff; border-radius: 1.2em 1.2em 0 0; padding: 1.1em 1.1em 1.4em; display: grid; gap: 0.6em; box-shadow: 0 -0.6em 2em rgba(39,40,61,0.25); transform: translateY(105%); transition: transform 500ms var(--ease); }
.a-sheet.is-in { transform: none; }
.a-sheet--pdf { top: 12%; align-content: start; }
.a-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.a-stats div { background: #f8f7fa; border-radius: 0.5em; padding: 0.5em; display: grid; text-align: center; }
.a-stats b { font-size: 1.3em; } .a-stats span { font-size: 0.68em; line-height: 1.25; color: #6d6f85; }
.a-log { display: grid; grid-template-columns: auto auto 1fr; gap: 0.25em 0.6em; font-size: 0.72em; font-family: ui-monospace, Menlo, monospace; color: #494a66; padding: 0.6em; background: #f8f7fa; border-radius: 0.5em; }
.a-sign { display: grid; gap: 0.9em; border: 1px dashed #c9cad6; border-radius: 0.5em; padding: 0.7em; font-size: 0.78em; color: #6d6f85; }
.a-sign span { border-bottom: 1px solid #c9cad6; padding-bottom: 0.9em; }
@keyframes a-in { from { opacity: 0; transform: translateY(-0.5em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .a-latest, .a-follow { animation: none; } .a-row, .a-sheet, .a-open, .a-finder { transition: none; } }

@media (max-width: 820px) {
  .sim--phone .sim__live { grid-template-columns: minmax(0, 1fr); }
  .sim--phone .sim__stage { max-width: 21rem; }
  .sim--phone .sim__side { text-align: center; justify-items: center; }
  .sim__words { min-height: 0; }
}
@media (max-width: 700px) {
  /* a desktop screen is unreadable at phone width, so it keeps a readable size and scrolls sideways */
  .sim--desk .sim__stage { overflow-x: auto; padding-bottom: 0.5rem; }
  .sim--desk .device--desk { min-width: 720px; }
}

/* panes: one step that moves through more than one screen (scan, start, live) */
.a-pane { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease); }
.a-pane.is-on { opacity: 1; }
.a-goal--done { background: #dff3e9; color: #146a47; }
@media (prefers-reduced-motion: reduce) { .a-pane { transition: none; } }