/* Fleet demo: real device enclosures (MacBook, Windows laptop, iPhone, Android) with OS-style screens.
   Everything inside a device scales with its width (container query units), so one set of rules fits every breakpoint. */

.setup-stage { position: relative; height: 385px; padding: 0; }
.dev { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 12px)) scale(.94); opacity: 0; container-type: inline-size; pointer-events: none; transition: opacity .45s ease, transform .65s cubic-bezier(.2, .7, .2, 1); will-change: transform, opacity; }
.dev.is-on { opacity: 1; transform: translate(-50%, -50%); }


/* ---- MacBook: silver unibody, thin black bezel, notch, thumb scoop on the base ---- */
.dev--mac { width: min(95%, 510px); }
.dev--mac .lid { position: relative; padding: .8cqw .8cqw 0; border-radius: 3.4cqw 3.4cqw .8cqw .8cqw; background: linear-gradient(180deg, #dadde2 0%, #c3c7cd 60%, #aeb3ba 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 26px 44px -18px rgba(0, 0, 0, .6); }
.dev--mac .bezel { position: relative; padding: 2.6cqw 2.4cqw 2.4cqw; border-radius: 2.8cqw 2.8cqw .4cqw .4cqw; background: #0a0a0c; }
.dev--mac .notch { position: absolute; top: 2.6cqw; left: 50%; translate: -50% 0; width: 21%; height: 3cqw; border-radius: 0 0 1.6cqw 1.6cqw; background: #0a0a0c; z-index: 6; }
.dev--mac .scr { aspect-ratio: 16 / 10; border-radius: 1.4cqw 1.4cqw .6cqw .6cqw; }
.dev--mac .base { position: relative; height: 2.7cqw; margin: 0 -2.2%; border-radius: .4cqw .4cqw 3cqw 3cqw; background: linear-gradient(180deg, #eef0f3 0%, #cfd3d9 40%, #a9aeb6 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 26px -10px rgba(0, 0, 0, .6); }
.dev--mac .base::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 16%; height: 1.1cqw; border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #8f959d, #b8bdc4); }

/* ---- Windows laptop: graphite body, squarer corners, camera + IR pill, visible hinge, deeper chin ---- */
.dev--win { width: min(95%, 510px); }
.dev--win .lid { position: relative; padding: .8cqw .8cqw 0; border-radius: 2cqw 2cqw .6cqw .6cqw; background: linear-gradient(180deg, #454a52 0%, #2c3037 70%, #23272d 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 44px -18px rgba(0, 0, 0, .65); }
.dev--win .bezel { position: relative; padding: 4.4cqw 3cqw 5.6cqw; border-radius: 1.5cqw 1.5cqw .3cqw .3cqw; background: #101215; }
.dev--win .cam { position: absolute; top: 1.7cqw; left: 50%; translate: -50% 0; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #1b2f4b; box-shadow: inset 0 0 0 .35cqw #070a0f, 0 0 0 .35cqw #1c2026, -2.8cqw 0 0 -.25cqw #3a1d1d; }
.dev--win .scr { aspect-ratio: 16 / 9; border-radius: .5cqw; }
.dev--win .base { position: relative; height: 3.2cqw; margin: 0 -1.4%; border-radius: 0 0 1.8cqw 1.8cqw; background: linear-gradient(180deg, #555b64 0%, #2f343b 55%, #1d2126 100%); box-shadow: 0 16px 28px -10px rgba(0, 0, 0, .65); }
.dev--win .base::before { content: ""; position: absolute; top: 0; left: 26%; right: 26%; height: 1cqw; border-radius: 0 0 .6cqw .6cqw; background: #0d0f12; }

/* ---- iPhone: flat titanium band, Dynamic Island, action + volume buttons left, side button right, home indicator ---- */
.dev--ios { width: min(48%, 170px); }
.dev--ios .body { position: relative; aspect-ratio: 9 / 19.4; border-radius: 15cqw; background: #0b0b0d; box-shadow: inset 0 0 0 1.3cqw #5a5a60, inset 0 0 0 2.3cqw #151517, 0 28px 46px -18px rgba(0, 0, 0, .7); }
.dev--ios .scr { position: absolute; inset: 3.9cqw; border-radius: 11.6cqw; }
.dev--ios .island { position: absolute; top: 6.2cqw; left: 50%; translate: -50% 0; width: 31%; height: 6.4cqw; border-radius: 99px; background: #000; box-shadow: inset 0 0 0 .5cqw #0e0e10; z-index: 6; }
.dev--ios .home { position: absolute; bottom: 5.4cqw; left: 50%; translate: -50% 0; width: 36%; height: 1.3cqw; border-radius: 99px; background: rgba(0, 0, 0, .78); z-index: 6; }
.dev .k { position: absolute; width: 1.5cqw; border-radius: .4cqw; background: #4a4a50; }
.dev--ios .k-act { left: -1.4cqw; top: 21%; height: 5%; }
.dev--ios .k-up { left: -1.4cqw; top: 30%; height: 9.5%; }
.dev--ios .k-dn { left: -1.4cqw; top: 41.5%; height: 9.5%; }
.dev--ios .k-pw { right: -1.4cqw; top: 33%; height: 14%; }

/* ---- Android: matte frame, tighter corners, punch-hole camera, buttons on the right only, gesture pill ---- */
.dev--and { width: min(48%, 170px); }
.dev--and .body { position: relative; aspect-ratio: 9 / 19.6; border-radius: 11cqw; background: #1c1d20; box-shadow: inset 0 0 0 1.2cqw #3d4046, inset 0 0 0 2.1cqw #121315, 0 28px 46px -18px rgba(0, 0, 0, .7); }
.dev--and .scr { position: absolute; inset: 4.2cqw 3.4cqw 4.8cqw; border-radius: 8.4cqw; }
.dev--and .hole { position: absolute; top: 7.6cqw; left: 50%; translate: -50% 0; width: 5cqw; height: 5cqw; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1cqw #0a0a0b, 0 0 0 .5cqw rgba(0, 0, 0, .35); z-index: 6; }
.dev--and .pill { position: absolute; bottom: 6.6cqw; left: 50%; translate: -50% 0; width: 30%; height: 1.2cqw; border-radius: 99px; background: rgba(0, 0, 0, .6); z-index: 6; }
.dev--and .k { right: -1.4cqw; background: #3d4046; }
.dev--and .k-pw { top: 23%; height: 8.5%; background: #7a7f88; }
.dev--and .k-vol { top: 34.5%; height: 15%; }

/* Screens use native UI typography; the outer portfolio retains its own identity. */
.scr { position: relative; overflow: hidden; background: #000; color: #202124; font-size: 2.15cqw; line-height: 1.35; text-align: left; }
.dev--ios .scr, .dev--and .scr { font-size: 6cqw; }
.dev--mac .scr, .dev--ios .scr { --f: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.dev--win .scr { --f: "Segoe UI Variable", "Segoe UI", Arial, sans-serif; }
.dev--and .scr { --f: Roboto, Arial, sans-serif; }
.os { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--f); animation: screen-appear .28s ease-out both; }
.os *, .os *::before, .os *::after { box-sizing: border-box; }
.os p, .os h4, .os ul { margin: 0; padding: 0; list-style: none; }
.os h4 { font-size: 1.55em; line-height: 1.2; letter-spacing: -.02em; color: #202124; font-weight: 600; }
.os p { line-height: 1.45; }
.os .sub { color: #6a6e74; font-size: .92em; }
.os .a { animation: screen-appear .35s ease-out both; }
@keyframes screen-appear { from { opacity: 0; transform: translateY(.35em); } }
.os .app-icon { display: block; width: 3em; height: 3em; object-fit: contain; border-radius: 23%; flex: none; }
.os .org { display: inline-flex; align-items: center; gap: .4em; color: #282828; font-size: .88em; font-weight: 600; }
.os .org img { width: 2em; height: 2em; }
.os .ck { display: block; width: 1.45em; height: 1.45em; fill: none; stroke: #16863e; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.os .spin { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; border: .15em solid #d5d9df; border-top-color: var(--os, #007aff); animation: setup-spin .9s linear infinite; flex: none; }
@keyframes setup-spin { to { rotate: 360deg; } }
.os .dot { width: .5em; height: .5em; border-radius: 50%; background: #9198a2; display: inline-block; }
.os .bar { display: block; height: .42em; border-radius: 9em; background: #e0e3e8; overflow: hidden; }
.os .bar i { display: block; height: 100%; width: var(--w, 64%); border-radius: inherit; background: var(--os, #007aff); transform-origin: left; animation: setup-fill 3s ease-out both; }
@keyframes setup-fill { from { transform: scaleX(.15); } }
.os .btns { display: flex; justify-content: flex-end; gap: .6em; }
.os .b { display: inline-block; font-size: .96em; padding: .4em 1.4em; border-radius: .4em; background: var(--os, #007aff); color: #fff; font-weight: 500; line-height: 1.3; }
.os .b-sec { background: #e9e9ed; color: #222; }
.os .tl { display: flex; align-items: center; gap: .4em; }
.os .tl i { width: .8em; height: .8em; border-radius: 50%; background: #ff5f57; }
.os .tl i:nth-child(2) { background: #febc2e; } .os .tl i:nth-child(3) { background: #28c840; }
.os .window-actions { margin-left: auto; font-size: 1em; white-space: nowrap; }
.os .g-wifi { width: 1em; height: .8em; background: radial-gradient(circle at 50% 100%,currentColor 17%,transparent 20% 36%,currentColor 38% 47%,transparent 49% 64%,currentColor 66% 75%,transparent 77%); }
.os .g-batt { width: 1.5em; height: .75em; border: .1em solid currentColor; border-radius: .2em; position: relative; }
.os .g-batt::before { content: ""; position: absolute; inset: .1em .25em .1em .1em; background: currentColor; border-radius: .07em; }
.os .g-batt::after { content: ""; position: absolute; right: -.24em; top: .2em; width: .12em; height: .25em; background: currentColor; }
.os .g-sig { width: 1.15em; height: .8em; background: currentColor; clip-path: polygon(0 65%,20% 65%,20% 100%,30% 100%,30% 43%,50% 43%,50% 100%,60% 100%,60% 22%,80% 22%,80% 100%,90% 100%,90% 0,100% 0,100% 100%,0 100%); }
.os .mbar-r, .os .sbar-r { display: inline-flex; align-items: center; gap: .5em; }

/* macOS Setup Assistant, Jamf Setup Manager, System Settings and the desktop. */
.os-mac { --os: #007aff; background: linear-gradient(150deg,#12304c 5%,#1b6876 40%,#80c1bd 64%,#d7b19b 85%); }
.os-mac .mbar { height: 2.2em; display: flex; align-items: center; justify-content: space-between; padding: 0 1em 0 2em; background: #ffffff8a; font-size: .88em; }
.os-mac .win { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: 76%; padding: 1.5em; border-radius: .85em; background: #f6f6f6; box-shadow: 0 1em 3em #0004; }
.os-mac .remote-management { text-align: center; }
.os-mac .remote-icon { margin: .2em auto .8em; width: 4.4em; height: 4.4em; color: #007aff; background: #e3efff; border-radius: 1em; display: grid; place-items: center; }
.os-mac .remote-icon svg { width: 3.1em; height: 3.1em; fill: none; stroke: currentColor; stroke-width: 1.3; }
.os-mac .remote-management p { margin-top: .9em; font-size: .97em; }
.os-mac .remote-management .remote-detail { font-size: .85em; color: #6b6b70; margin: 1em 0 .6em; }
.os-mac .remote-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; margin: 1.2em -1.5em -1.5em; padding: .9em 1.2em; font-size: .85em; color: #007aff; }
.os .jamf-window { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: 87%; border-radius: .95em; background: #fff; overflow: hidden; box-shadow: 0 1em 3em #0005; }
.os .jamf-welcome { display: flex; align-items: center; justify-content: center; gap: 1em; padding: 1.05em; background: #073c87; color: #fff; }
.os .jamf-welcome .app-icon { width: 3.5em; height: 3.5em; }
.os .jamf-welcome h4 { color: #fff; font-size: 1.35em; }
.os .jamf-welcome p { color: #e1edff; font-size: .95em; margin-top: .3em; }
.os .jamf-message { text-align: center; font-size: .85em; margin: 1.1em .5em; }
.os .jamf-carousel { display: flex; align-items: center; justify-content: center; gap: .8em; padding: .1em 1.2em .8em; }
.os .jamf-app { position: relative; padding: .8em .7em .6em; border-radius: 1em; background: #f0f3f7; width: 6.2em; text-align: center; }
.os .jamf-app.current { background: #e0efff; box-shadow: 0 .3em .8em #0002; scale: 1.05; }
.os .jamf-app .app-icon { width: 3.65em; height: 3.65em; margin: 0 auto .5em; }
.os .jamf-app b, .os .jamf-app small { display: block; font-size: .85em; }
.os .jamf-app small { color: #696f78; font-size: .7em; margin-top: .2em; }
.os .install-status { position: absolute; top: 3.55em; right: .3em; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.os .jamf-progress { display: grid; gap: .5em; text-align: center; margin: .6em 3.5em; font-size: .82em; }
.os .jamf-footer { display: flex; justify-content: space-between; padding: .9em 1.2em; font-size: .75em; color: #667080; }
.os .jamf-footer span:first-child { color: #007aff; }
.os .mac-settings { position: absolute; width: 88%; top: 52%; left: 50%; translate: -50% -50%; background: #f5f5f6; border: 1px solid #b1b5b6; border-radius: .8em; overflow: hidden; box-shadow: 0 1em 3em #0004; }
.os .settings-title { display: flex; align-items: center; gap: 4em; padding: .9em; font-weight: 600; font-size: .85em; border-bottom: 1px solid #d6d6da; }
.os .settings-layout { display: grid; grid-template-columns: 28% 1fr; min-height: 17em; }
.os .settings-sidebar { background: #e8e9ec; padding: 1em .5em; font-size: .82em; }
.os .settings-sidebar span { display: block; padding: .65em .6em; }
.os .settings-sidebar .active { background: #007aff; color: #fff; border-radius: .4em; }
.os .settings-content { padding: 1.15em 1.4em; }
.os .settings-content h4 { font-size: 1.35em; }
.os .filevault-state { display: flex; gap: .8em; align-items: center; margin: .8em 0; }
.os .filevault-state svg { width: 2.4em; height: 2.4em; fill: none; stroke: #178547; stroke-width: 1.5; }
.os .settings-content p { font-size: .8em; color: #60666f; margin-bottom: 1em; }
.os .settings-line { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-top: 1px solid #d9dadd; font-size: .79em; }
.os .settings-line b { font-weight: 500; color: #676c74; }
.os .dock { position: absolute; bottom: .5em; left: 50%; translate: -50% 0; display: flex; gap: .7em; padding: .5em .7em; border-radius: 1em; background: #ffffff65; backdrop-filter: blur(12px); border: 1px solid #ffffff8a; }
.os .dock .app-icon { width: 2.7em; height: 2.7em; box-shadow: 0 .2em .4em #0002; }
.os .dock-app { position: relative; display: block; }
.os .dock .dock-app:first-child::after { content: ""; position: absolute; bottom: -.35em; left: 45%; width: .3em; height: .3em; background: #333; border-radius: 50%; }

/* Windows 11: actual ESP hierarchy, then Company Portal and a centered taskbar. */
.os-win { --os: #0067c0; background: radial-gradient(ellipse at 55% 110%,#90d8ff 0%,#3482dc 36%,#113678 66%,#071e44 100%); }
.os-win.win-step-0, .os-win.win-step-1 { background: #dfeafa; }
.os .windows-mark { width: 2em; height: 2em; display: grid; grid-template-columns: 1fr 1fr; gap: .13em; flex: none; }
.os .windows-mark i { background: #087cde; }
.os .oobe { position: absolute; inset: 1.6em; display: grid; grid-template-columns: 37% 1fr; border: 1px solid #fff9; border-radius: .8em; background: #fcfdff; overflow: hidden; }
.os .oobe-art { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2em; background: #e9f1fc; color: #21517d; padding: 1em; }
.os .oobe-art .windows-mark { width: 5.4em; height: 5.4em; gap: .3em; }
.os .oobe-art b { font-size: 1.08em; font-weight: 500; line-height: 1.5; }
.os .oobe-content { padding: 1.6em 1.6em 1em; font-size: .87em; }
.os .oobe-content h4 { margin: .8em 0; font-size: 1.65em; font-weight: 600; }
.os .oobe-content p { font-size: .89em; color: #4d5663; }
.os .sign-in-field { margin: 1.2em 0 .65em; padding: .5em .6em; background: #f8fafc; border: 1px solid #aab2be; border-bottom: .15em solid #0067c0; border-radius: .25em; }
.os .oobe-link { color: #0067c0; font-size: .82em; }
.os .oobe-content .btns { margin: 1em 0 .6em; }
.os .oobe-content > small { font-size: .68em; color: #6b7380; }
.os .esp .oobe-content { padding-top: 1.1em; }
.os .esp h4 { font-size: 1.5em; margin: 0 0 .55em; }
.os .esp-phase { display: flex; align-items: center; gap: .85em; margin-top: 1em; font-size: .94em; }
.os .esp-phase span { display: flex; flex-direction: column; gap: .2em; }
.os .esp-phase b { font-weight: 600; }
.os .esp-phase small { font-size: .8em; color: #5a6470; }
.os .esp-phase.waiting { color: #69737e; }
.os .esp-details { margin: .5em 0 0 2.3em; font-size: .78em; }
.os .esp-details span { display: flex; justify-content: space-between; gap: 1em; margin-top: .3em; }
.os .esp-details b { font-weight: 400; color: #667689; }
.os .esp-apps { display: flex; align-items: center; gap: .5em; margin-top: 1em; font-size: .65em; color: #606c7b; }
.os .esp-apps .app-icon { width: 2em; height: 2em; }
.os .tbar { position: absolute; inset: auto 0 0; height: 3.4em; display: flex; align-items: center; justify-content: center; gap: .75em; background: #eff5fbe8; border-top: 1px solid #fff; }
.os .tbar .app-icon { width: 2em; height: 2em; border-radius: 18%; }
.os .tbar .windows-mark { width: 1.8em; height: 1.8em; }
.os .task-search { padding: .35em .8em; background: #fff9; border: 1px solid #d9dfe8; border-radius: 1em; color: #5c6672; font-size: .8em; }
.os .tb-r { position: absolute; right: .8em; text-align: right; font-size: .65em; }

/* Real app catalog and device status vocabulary, with company/personal ownership. */
.os .desktop-portal { position: absolute; inset: 1.6em 2.8em; border-radius: .65em; box-shadow: 0 1em 3em #0004; overflow: hidden; }
.os .portal-window { height: 100%; background: #fff; display: flex; flex-direction: column; }
.os .portal-top { display: flex; align-items: center; gap: .65em; padding: .7em 1em; border-bottom: 1px solid #dce1e8; background: #fbfcfd; }
.os .portal-top .app-icon { width: 1.7em; height: 1.7em; border-radius: .25em; }
.os .portal-top b { font-weight: 500; }
.os .portal-layout { display: flex; flex: 1; min-height: 0; }
.os .portal-sidebar { width: 25%; padding: .9em .6em; background: #f0f3f7; font-size: .8em; }
.os .portal-sidebar span { display: block; padding: .8em .4em; }
.os .portal-sidebar > b { display: block; margin: 0 0 .6em .4em; }
.os .portal-sidebar .active { background: #e0e8f1; border-left: .22em solid #0067c0; font-weight: 600; }
.os .portal-content { flex: 1; padding: 1em 1.3em; min-width: 0; }
.os .portal-breadcrumb { color: #616b78; font-size: .78em; margin-bottom: 1em; }
.os .device-outline { float: right; width: 3.4em; height: 3.4em; color: #607990; }
.os .device-outline svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.2; fill: none; }
.os .portal-content h4 { font-size: 1.55em; margin-bottom: .8em; }
.os .portal-status { display: flex; align-items: flex-start; gap: .6em; font-size: .85em; margin: 1em 0; }
.os .portal-status b { display: block; color: #167c37; font-weight: 500; }
.os .portal-status small { display: block; font-size: .85em; color: #67727f; margin-top: .4em; }
.os .portal-check { color: #0067c0; font-size: .8em; }
.os .device-properties { margin-top: 1.2em; }
.os .device-properties > span { display: flex; justify-content: space-between; gap: .7em; border-top: 1px solid #e6e9ed; padding: .55em 0; font-size: .8em; color: #606a78; }
.os .device-properties b { font-weight: 500; color: #333e4c; }

/* Browser chrome; the pages are captures of the four public sites. */
.os .browser-win { position: absolute; left: 1.2em; right: 1.2em; top: 3em; bottom: 4.6em; background: #fff; border-radius: .7em; overflow: hidden; box-shadow: 0 1em 3em #0005; }
.os-win .browser-win { top: .8em; left: .8em; right: .8em; bottom: 3.8em; border-radius: .5em; }
.os .browser-tabs { display: flex; align-items: center; gap: .9em; padding: .5em .8em 0; background: #dfe6ee; font-size: .85em; height: 2.7em; }
.os .browser-tab { display: flex; align-items: center; gap: .5em; background: #f8fafc; padding: .45em .8em; border-radius: .6em .6em 0 0; width: 47%; align-self: flex-end; }
.os .browser-tab > span { margin-left: auto; }
.os .browser-tab .app-icon { width: 1.15em; height: 1.15em; }
.os .address-row { display: flex; align-items: center; gap: .7em; padding: .45em .8em; background: #f8fafc; font-size: .82em; }
.os .address { flex: 1; background: #e9eef5; border-radius: 1em; padding: .35em .9em; color: #465569; text-align: center; }
.os .avatar { width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #516b8e; font-size: .9em; }
.os .bookmark-bar { display: flex; gap: 1.3em; padding: .4em 1em; border-bottom: 1px solid #e8e8e8; font-size: .72em; }
.os .bookmark-bar > span { display: flex; align-items: center; gap: .45em; }
.os .bookmark-bar .app-icon { width: 1.25em; height: 1.25em; border-radius: .2em; }
.os .destination-page { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; background: #f6f6f6; }
.os .destination-page img { display: block; width: 100%; height: auto; }
.os .browser-win { display: flex; flex-direction: column; }
.os .safari-toolbar { display: flex; align-items: center; gap: 1em; background: #eef0f3; padding: .7em .9em; font-size: .84em; }
.os .safari-toolbar .address { border-radius: .5em; border: 1px solid #d9dce2; background: #fff; }
.os .browser-load { height: .14em; position: absolute; left: 0; top: 0; background: #007aff; width: 100%; transform-origin: left; animation: page-load .8s ease-out both; z-index: 1; }
@keyframes page-load { 0% { transform: scaleX(.02); opacity: 1; } 85% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }

/* iOS Settings / account-driven enrollment; no Android work badges on iPhone. */
.os-ios { --os: #007aff; background: #f2f2f7; }
.os .sbar { display: flex; flex: none; align-items: center; justify-content: space-between; height: 3.7em; padding: .15em 1.2em 0; font-size: .85em; font-weight: 600; }
.os-ios .ios-settings { padding: 0 1em; }
.os .ios-navigation { color: #007aff; font-size: .9em; padding: .4em 0 .7em; }
.os .ios-settings > h4 { text-align: center; font-size: 1.22em; margin-bottom: 1.3em; }
.os .ios-group { background: #fff; border-radius: .85em; margin: .8em 0; padding: .85em .7em; font-size: .95em; }
.os .ios-group small { font-size: .75em; color: #7b7d84; float: right; }
.os .ios-link { color: #007aff; }
.os .ios-helper { color: #777b84; font-size: .78em; padding: 0 .5em; }
.os .account-sheet { position: absolute; bottom: 0; left: 0; right: 0; padding: .65em 1.2em 2.2em; background: #fafafa; border-radius: 1.4em 1.4em 0 0; box-shadow: 0 -.6em 3em #0002; text-align: center; }
.os .sheet-handle { display: block; width: 3em; height: .4em; margin: 0 auto 1.3em; border-radius: 1em; background: #c5c5c9; }
.os .account-sheet h4 { font-size: 1.12em; margin-bottom: .8em; }
.os .account-sheet p { color: #676b73; font-size: .84em; }
.os .account-field { background: #ececf0; border-radius: .65em; padding: .8em; text-align: left; font-size: .95em; margin: 1.2em 0; }
.os .account-sheet .b { width: 100%; border-radius: .75em; padding: .75em; }
.os-ios.ios-step-1, .os-ios.ios-step-3 { background: linear-gradient(150deg,#7baaa8,#d4dcc4 42%,#98c8d6 65%,#2e83a4); }
.os .phone-notice { display: flex; align-items: center; gap: .6em; padding: .8em; margin: .4em .9em .9em; border-radius: 1em; background: #ffffffe0; font-size: .8em; }
.os .phone-notice .app-icon { width: 2.5em; height: 2.5em; }
.os .phone-notice b, .os .phone-notice small { display: block; }
.os .phone-notice small { margin-top: .3em; font-size: .86em; color: #5c6972; }
.os .app-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.35em .45em; padding: 1em .8em; }
.os .app-tile { min-width: 0; text-align: center; }
.os .app-art { position: relative; display: block; width: 2.7em; height: 2.7em; margin: auto; }
.os .app-art .app-icon { width: 100%; height: 100%; box-shadow: 0 .18em .35em #0002; }
.os .app-name { display: block; font-size: .67em; line-height: 1.25; margin-top: .6em; color: #122b39; }
.os .app-waiting .app-icon { filter: brightness(.55); }
.os .app-installing .app-icon { filter: brightness(.5); }
.os .install-ring { position: absolute; inset: .6em; border: .23em solid #fffc; border-right-color: transparent; border-radius: 50%; animation: setup-spin 1.3s linear infinite; }
.os .phone-install-note { display: flex; justify-content: center; align-items: center; gap: .7em; font-size: .8em; margin-top: 2em; color: #254555; }
.os .date-widget { text-align: center; padding: .6em 0 1em; color: #163d49; }
.os .date-widget span { display: block; font-size: .85em; }
.os .date-widget b { font-size: 3.8em; font-weight: 400; letter-spacing: -.05em; }
.os .idock { position: absolute; left: .7em; right: .7em; bottom: 1.6em; display: flex; justify-content: space-around; padding: .75em .3em; border-radius: 1.8em; background: #ffffff60; }
.os .idock .app-icon { width: 2.65em; height: 2.65em; }
.os .home-search { font-size: .75em; margin: auto auto 8.5em; padding: .4em 1em; background: #fff5; border-radius: 2em; }
.os .portal-mobile { flex: 1; min-height: 0; }
.os .portal-mobile .portal-top { font-size: .82em; padding: .85em .9em; }
.os .portal-mobile .portal-content { padding: .8em 1em; }
.os .portal-mobile h4 { clear: both; font-size: 1.45em; padding-top: .6em; }
.os .portal-mobile .device-outline { float: none; display: block; margin: .6em auto; width: 2.8em; height: 2.8em; }
.os .portal-mobile .portal-breadcrumb { font-size: .8em; }
.os .portal-mobile .device-properties { margin-top: 1em; }
.os .portal-mobile .device-properties > span { flex-wrap: wrap; font-size: .84em; padding-block: .55em; }
.os .portal-nav { display: flex; justify-content: space-around; padding: .8em .5em 1.8em; border-top: 1px solid #e3e7ee; font-size: .8em; color: #68727f; }
.os .portal-nav b { color: #0067c0; font-weight: 600; }

/* Android Enterprise setup and the work profile app drawer. */
.os-and { --os: #0b57d0; background: #f7f9fd; }
.os .android-enroll { padding: .6em 1.2em; }
.os .android-enroll h4 { font-size: 1.45em; font-weight: 400; line-height: 1.25; margin: .65em 0; }
.os .android-enroll p { font-size: .91em; color: #4b5665; }
.os .android-enterprise { width: 3em; height: 3em; color: #0b57d0; }
.os .android-enterprise svg, .os .profile-diagram svg, .os .work-profile-control svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.os .profile-diagram { display: flex; gap: 1em; margin: 1.2em 0; }
.os .profile-diagram > span { flex: 1; background: #e7edf7; padding: 1em; border-radius: 1.2em; text-align: center; font-size: .8em; color: #335890; }
.os .profile-diagram b, .os .profile-diagram svg { display: block; width: 2.5em; height: 2.5em; margin: .6em auto 0; }
.os .profile-diagram b { font-size: 2em; line-height: 1; width: 1.25em; height: 1.25em; font-weight: 400; }
.os .android-management { display: flex; align-items: center; gap: .8em; font-size: .8em; }
.os .android-management .app-icon { width: 2.7em; height: 2.7em; }
.os .android-enroll .android-privacy { margin-top: 1em; font-size: .78em; }
.os-and > .btns { position: absolute; left: 1.1em; right: 1.1em; bottom: 2.6em; justify-content: space-between; font-size: .8em; }
.os-and .b { border-radius: 2em; padding: .8em 1.25em; }
.os-and .b-sec { background: transparent; color: #0b57d0; }
.os .managed-apps { margin: 1em 0; }
.os .managed-apps > div { display: flex; align-items: center; gap: .8em; padding: .55em 0; border-bottom: 1px solid #e0e5ee; }
.os .managed-apps .app-icon { width: 2.25em; height: 2.25em; }
.os .managed-apps > div > span { flex: 1; }
.os .managed-apps b, .os .managed-apps small { display: block; font-size: .88em; font-weight: 500; }
.os .managed-apps small { color: #657489; font-weight: 400; font-size: .75em; margin-top: .3em; }
.os .android-search { margin: .5em 1em .8em; padding: .9em 1em; border-radius: 2em; background: #e8eef7; color: #53657e; font-size: .83em; }
.os .wtabs { display: flex; border-bottom: 1px solid #d9e0e9; margin: 0 1em; }
.os .wtabs span { flex: 1; text-align: center; padding: .8em; font-size: .9em; color: #657489; }
.os .wtabs .on { color: #0b57d0; border-bottom: .23em solid #0b57d0; font-weight: 600; }
.os-and .app-grid { padding-top: 1.7em; gap: 1.7em .5em; }
.os-and .app-art .app-icon { border-radius: 50%; }
.os .work-badge { position: absolute; right: -.2em; bottom: -.2em; width: 1.15em; height: 1.15em; padding: .2em; border: .12em solid #f7f9fd; border-radius: 50%; background: #1a73e8; color: #fff; }
.os .work-badge svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.os .work-profile-control { display: flex; align-items: center; gap: .75em; margin: auto 1.3em 0; padding: 1em 0; border-top: 1px solid #dde4ec; color: #405670; font-size: .85em; }
.os .work-profile-control svg { width: 1.5em; height: 1.5em; }
.os .profile-toggle { display: block; width: 2.65em; height: 1.5em; border-radius: 2em; background: #0b57d0; margin-left: auto; padding: .2em; }
.os .profile-toggle::after { content: ""; display: block; width: 1.1em; height: 1.1em; background: #fff; border-radius: 50%; margin-left: auto; }
.os .work-profile-caption { margin: 0 1.5em 3.4em; font-size: .7em; color: #697a90; }

/* Mobile Safari / Chrome. Browser bars stay separate from captured page content. */
.os .phone-browser { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; }
.os .phone-browser .address { font-size: .8em; flex: none; padding: .8em .7em; margin: .5em .7em; border-radius: 1.5em; background: #eceef2; color: #344455; }
.os .phone-browser.safari-mobile .address { border-radius: .8em; margin-bottom: .3em; }
.os .phone-browser .phone-browser-tools { display: flex; justify-content: space-around; padding: .7em .5em 1.7em; font-size: 1.3em; color: #3475c2; background: #f4f5f7; }
.os .phone-browser.chrome-mobile .phone-browser-top { display: flex; align-items: center; font-size: .9em; padding: 0 .8em; background: #f4f5f7; }
.os .phone-browser.chrome-mobile .address { flex: 1; margin-left: 0; }
.os .phone-browser .destination-page img { min-height: 100%; object-fit: cover; object-position: top center; }
.os .phone-browser .destination-page { display: flex; align-items: flex-start; }
.os .phone-browser .destination-page img { height: auto; min-height: 0; }
.setup-site-link { display: inline-block; color: var(--ink-2); text-underline-offset: 3px; font-size: 12px; }
.setup-site-link[hidden] { display: none; }
.setup-bottom { flex-wrap: wrap; }
.setup-bottom > p { flex: 1; min-width: 140px; }
.setup-bottom .setup-site-link { flex-basis: 100%; order: 3; }

/* Brief boot states. Browsing and setup both stop offscreen or when paused. */
.os.os-boot { background: #08090b; align-items: center; justify-content: center; gap: 2em; padding: 0; }
.os .boot-name { color: #fff; font-size: 1.3em; letter-spacing: -.025em; }
.os .bootbar { width: 30%; height: .4em; border-radius: 9em; background: #303035; overflow: hidden; }
.os .bootbar i { display: block; height: 100%; background: #eee; transform-origin: left; animation: setup-fill 1s ease-out both; }
.os .boot-mark { width: 3.6em; height: 3.6em; }
.os .ring { position: relative; width: 2em; height: 2em; border: .18em solid #555; border-top-color: #eee; border-radius: 50%; animation: setup-spin 1s linear infinite; }
.os .ring i { display: none; }
.os .hello { color: #fff; font: italic 300 3em/1 "Snell Roundhand","Apple Chancery",cursive; }
.os .dots3 { display: flex; gap: .5em; }
.os .dots3 i { width: .55em; height: .55em; border-radius: 50%; background: #fff; }

@media (max-width: 1100px) { .setup-stage { height: 350px; } .dev--ios, .dev--and { width: min(48%,155px); } }
@media (max-width: 850px) { .setup-stage { height: 385px; } .dev--ios, .dev--and { width: min(48%,170px); } }
@media (max-width: 520px) { .setup-stage { height: 320px; } .dev--ios, .dev--and { width: min(48%,142px); } }
@media (prefers-reduced-motion: reduce) {
 .setup-stage *, .setup-stage *::before, .setup-stage *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
}
:root[data-motion="paused"] .setup-stage *, :root[data-motion="paused"] .setup-stage *::before, :root[data-motion="paused"] .setup-stage *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }

.os .desktop-notice { position: absolute; top: 3.3em; right: 1em; display: flex; align-items: center; gap: .9em; padding: 1em 1.2em; background: #fffffff0; border: 1px solid #fff; border-radius: 1em; box-shadow: 0 1em 2em #0003; }
.os .desktop-notice b, .os .desktop-notice small { display: block; }
.os .desktop-notice small { margin-top: .3em; font-size: .8em; color: #616973; }
.os .chrome-gesture-space { height: 1.8em; flex: none; background: #f5f6f8; }
.setup-browser-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; min-height: 44px; }
.setup-browser-controls[hidden] { display: flex; visibility: hidden; }
.setup-browser-controls button { min-height: 44px; border: 0; background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer; padding: 8px; }
.setup-browser-controls button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.os-ios.browser-open { background: #f4f5f7; }
.os .settings-managed { font-size: .8em; color: #667078; margin: 1.1em 0; }
.os .settings-disabled { display: inline-block; float: right; padding: .4em 1em; border-radius: .4em; border: 1px solid #ddd; background: #eee; color: #999; font-size: .8em; }
.setup-stage[data-active="false"] *, .setup-stage[data-active="false"] *::before, .setup-stage[data-active="false"] *::after { animation-play-state: paused !important; }
.os .and-step-1 .android-enroll { padding-top: .4em; }
.os-and.and-step-1 .android-enroll > .app-icon { width: 2.2em; height: 2.2em; }
.os-and.and-step-1 .android-enroll h4 { font-size: 1.35em; margin: .5em 0; }
.os-and.and-step-1 .android-enroll > p { font-size: .85em; }
.os-and.and-step-1 .managed-apps { margin: .8em 0; }
.os-and.and-step-1 .managed-apps > div { padding-block: .4em; }