/* Atlas v2 · Act 3, "the calls come in" (V2.md §2.8, §2.1d; act3.js). Every class carries the a3- prefix. The screens
   are laid out at their devices' true size (390 × 844, 1280 × 800) and scaled by devices.js, so the laptop's type is
   set large to read at a third of its size. Red marks what slipped away; frost blue marks what he answers. */
.a3-stage { --a3-red: #ff7a6b; --a3-ok: #c8a978; }
.a3-on { opacity: 1 !important; transform: none !important; }

/* the camera (act3.js): a window under the title, soft at its edges, that clips the devices while it is in close;
   the row sits inside it at 0.79 of the stage's width, the laptop 1.5x its old size beside phones of the same size */
.a3-trio { position: relative; z-index: 1; align-self: stretch; min-height: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 18px), transparent); }
.a3-cam { position: absolute; left: 0; top: 0; width: 79%; transform-origin: 0 0; will-change: transform; }
.a3-cam .devices { grid-template-columns: minmax(0, 1fr) minmax(0, 3.5fr) minmax(0, 1fr); }
/* each device dark until its own light channel reaches it, then lit, its glow flaring up */
.a3-cam .dev { filter: grayscale(1) brightness(.34); transition: filter .7s ease; }
.a3-cam .dev.a3-lit { filter: none; }
.a3-cam .dev.a3-lit .aura { animation: aura-on 1.5s cubic-bezier(.2,.7,.2,1) forwards, aura-breathe 4.6s 1.5s ease-in-out infinite; }

/* the red X over each failed device: it waits behind the device's top edge and slides up out from behind it
   (act3.js moves it), then blinks */
.a3-tag { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 0; pointer-events: none; transform: translate(-50%, 130%); }
.a3-tag b.a3-xb { width: clamp(46px, 4.4vw, 68px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 40%, #ff7a6b, #c9301f 70%); box-shadow: 0 0 0 3px rgba(255,122,107,.35), 0 0 34px rgba(255,70,52,.6); }
.a3-tag b.a3-xb svg { width: 56%; height: 56%; }
.a3-tag.a3-bad b.a3-xb { animation: a3-xblink 1.1s steps(1, end) infinite; }
@keyframes a3-xblink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .28; box-shadow: 0 0 0 3px rgba(255,122,107,.15), 0 0 12px rgba(255,70,52,.25); } }
.laptop-dev .a3-tag { bottom: calc(100% + 18px); }
@media (max-width: 720px) { .a3-tag { bottom: calc(100% + 8px); } .a3-tag b.a3-xb { width: 26px; box-shadow: 0 0 0 2px rgba(255,122,107,.35), 0 0 16px rgba(255,70,52,.6); } }

/* ——— the conversations, shared by all three screens ——— */
.a3-thr { position: absolute; overflow: hidden; }
.a3-thr-in { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 12px; padding: 14px 16px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.a3-msg, .a3-sep, .a3-fcard { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.a3-msg { max-width: 80%; display: grid; gap: 4px; }
.a3-msg p { margin: 0; padding: 11px 15px; border-radius: 20px; font: 400 17px/1.32 -apple-system, "Inter", system-ui, sans-serif; color: #fff; }
.a3-msg small { font: 400 11.5px/1 -apple-system, "Inter", system-ui, sans-serif; color: #8e8e93; }
.a3-me { justify-self: end; justify-items: end; } .a3-me p { background: #1f8bff; border-bottom-right-radius: 6px; }
.a3-them { justify-self: start; } .a3-them p { background: #2c2c2e; border-bottom-left-radius: 6px; }
.a3-sep { justify-self: center; font: 500 12px/1 -apple-system, "Inter", system-ui, sans-serif; color: #8e8e93; padding: 4px 0; }
.a3-fcard { justify-self: end; max-width: 80%; display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: #15212f; border: 1px solid #2c4560; color: #dfe9f3; }
.a3-fcard span { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); color: #8fc6ff; letter-spacing: .02em; }
.a3-fcard span svg { width: 16px; height: 16px; }
.a3-fcard b { font: 400 16px/1.35 var(--sans); } .a3-fcard small { font: 400 12px/1 var(--sans); color: #8e8e93; }

/* the outcome on each screen: a red stamp when it slipped away */
.a3-stamp { position: absolute; left: 50%; top: 46%; z-index: 4; padding: 10px 20px; border: 4px solid var(--a3-red); border-radius: 10px; color: var(--a3-red); white-space: nowrap;
  font: 700 34px/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; background: rgba(30,8,8,.55); box-shadow: 0 0 40px rgba(255,90,70,.35);
  opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.6) !important; transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.a3-stamp.a3-on { transform: translate(-50%, -50%) rotate(-9deg) scale(1) !important; }
/* on a phone the failure takes the whole screen: it goes red, and the stamp, in white, is all that's left on it */
.a3-redout { position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity .25s; background: radial-gradient(110% 80% at 50% 42%, #ff7a6b 0%, #e2493b 50%, #a8261b 100%); }
.a3-redout ~ .a3-stamp { color: #fff; border-color: #fff; background: rgba(120,16,10,.28); box-shadow: 0 0 40px rgba(90,0,0,.35); }

/* the phones' status bar and text field */
.a3-sb { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 8px 32px 0; font: 600 16px/1 -apple-system, "Inter", system-ui, sans-serif; color: #fff; z-index: 3; }
.a3-sb span { font-size: 11px; letter-spacing: 2px; font-weight: 400; }
.a3-input { position: absolute; left: 14px; right: 14px; bottom: 34px; height: 44px; border-radius: 22px; border: 1px solid #3a3a3c; padding: 0 18px; display: flex; align-items: center; font: 400 16px/1 -apple-system, "Inter", system-ui, sans-serif; color: #6c6c70; background: #0d0d0f; }

/* ——— the left phone: the call ——— */
.a3-call { position: absolute; inset: 0; color: #fff; font-family: -apple-system, "Inter", system-ui, sans-serif; background: radial-gradient(120% 70% at 50% 0%, #3a4a5e 0%, #1c2430 45%, #0b0f14 100%); }
.a3-call.a3-ended { background: radial-gradient(120% 70% at 50% 0%, #4a2a2a 0%, #241818 45%, #0f0b0b 100%); }
.a3-head { position: absolute; top: 92px; left: 0; right: 0; display: grid; justify-items: center; gap: 8px; }
.a3-av { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #6c7a8c, #3c4656); margin-bottom: 10px; }
.a3-av span { font: 500 46px/1 var(--sans); color: #fff; z-index: 1; }
.a3-av i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #9fd6ff; opacity: 0; }
.a3-cname { font: 500 32px/1.1 -apple-system, "Inter", system-ui, sans-serif; letter-spacing: -.01em; }
.a3-cstat { font: 400 19px/1 -apple-system, "Inter", system-ui, sans-serif; color: #c7ccd3; }
.a3-ended .a3-cstat { color: var(--a3-red); font-weight: 600; }
.a3-ringrow { display: flex; gap: 8px; margin-top: 6px; }
.a3-ringrow i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); opacity: 1; transition: background .2s; }
.a3-ringrow i.a3-on { background: #9fd6ff; box-shadow: 0 0 8px #9fd6ff; }
.a3-ended .a3-ringrow i.a3-on { background: var(--a3-red); box-shadow: none; }
.a3-vm { position: absolute; left: 22px; right: 22px; top: 390px; padding: 20px; border-radius: 22px; background: #2a2f37; border: 1px solid rgba(255,255,255,.12); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; z-index: 2; }
.a3-vm-k { font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ffb0a6; }
.a3-vm p { margin: 10px 0 14px; font: 400 17px/1.4 -apple-system, "Inter", system-ui, sans-serif; color: #e6e8eb; }
.a3-wave { display: flex; align-items: center; gap: 3px; height: 54px; } .a3-wave i { flex: 1; border-radius: 2px; background: #ffb0a6; opacity: .75; }
.a3-keys { position: absolute; left: 34px; right: 34px; top: 500px; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 22px; justify-items: center; opacity: 0; transition: opacity .3s; }
.a3-ended .a3-keys, .a3-call .a3-vm.a3-on ~ .a3-keys { opacity: .25 !important; }
.a3-key { display: grid; justify-items: center; gap: 8px; font: 400 13px/1 -apple-system, "Inter", system-ui, sans-serif; color: #e6e8eb; }
.a3-key i { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); } .a3-key svg { width: 30px; height: 30px; }
.a3-endbtn { position: absolute; left: 50%; bottom: 52px; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; display: grid; place-items: center; background: #ff3b30; transition: background .3s; }
.a3-endbtn svg { width: 34px; height: 34px; transform: rotate(135deg); }
.a3-ended .a3-endbtn { background: #5a2d2a; }

/* ——— the laptop: the site's form, then Messages ——— */
.a3-mac { --m: 0; position: absolute; inset: 0; overflow: hidden; font-family: -apple-system, "Inter", system-ui, sans-serif; background: radial-gradient(90% 90% at 30% 20%, #26425e 0%, #142233 50%, #0a121b 100%); }
.a3-menu { position: absolute; top: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center; gap: 26px; padding: 0 22px; background: rgba(10,14,20,.6); color: #e6e8eb; font: 500 16px/1 var(--sans); z-index: 5; }
.a3-menu b { font-size: 14px; color: #9aa6b2; } .a3-mclk { margin-left: auto; font-variant-numeric: tabular-nums; }
.a3-win { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }
.a3-browser { left: 44px; right: 44px; top: 56px; bottom: 26px; background: #f4f1ec; transform: scale(calc(1 - var(--m) * .06)) translateY(calc(var(--m) * -20px)); filter: brightness(calc(1 - var(--m) * .5)); opacity: calc(1 - var(--m)); }
.a3-tabs { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 18px; background: #dcd8d1; }
.a3-tabs > i { width: 13px; height: 13px; border-radius: 50%; background: #ec6a5e; } .a3-tabs > i:nth-child(2) { background: #f4bf4f; } .a3-tabs > i:nth-child(3) { background: #61c554; }
.a3-tab { margin-left: 18px; padding: 9px 18px; border-radius: 9px 9px 0 0; background: #f4f1ec; font: 500 15px/1 var(--sans); color: #333; align-self: flex-end; }
.a3-url { margin: 10px 18px; padding: 10px 18px; border-radius: 10px; background: #e6e2db; font: 400 17px/1 var(--sans); color: #444; }
.a3-site { position: absolute; top: 112px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 520px; gap: 40px; padding: 70px 56px 40px; color: #1c2a36; }
.a3-nav { position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 56px; border-bottom: 1px solid #e0dbd2; background: #fff; }
.a3-nav b { font: 700 24px/1 var(--sans); letter-spacing: -.02em; color: #0f3b5f; } .a3-nav span { font: 400 16px/1 var(--sans); color: #6b7682; }
.a3-nav em { margin-left: auto; font: 600 16px/1 var(--sans); color: #fff; background: #0f6fbf; padding: 12px 18px; border-radius: 8px; -webkit-text-fill-color: #fff; }
.a3-site-l { align-self: center; } .a3-site-l h3 { font: 700 60px/1.02 var(--sans); letter-spacing: -.035em; color: #0f2b44; margin: 0 0 18px; }
.a3-site-l p { font: 400 22px/1.45 var(--sans); color: #4c5966; }
.a3-form { position: relative; align-self: center; display: grid; gap: 14px; padding: 30px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(15,43,68,.18); }
.a3-form h4 { margin: 0 0 4px; font: 700 28px/1 var(--sans); color: #0f2b44; letter-spacing: -.02em; }
.a3-form label { display: grid; gap: 6px; font: 600 17px/1 var(--sans); color: #4c5966; }
.a3-form label span { display: block; min-height: 54px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #cfd6dd; font: 400 24px/1.2 var(--sans); color: #0f2b44; }
.a3-form .a3-big span { min-height: 120px; }
.a3-send { padding: 16px; border-radius: 10px; background: #0f6fbf; color: #fff; text-align: center; font: 700 20px/1 var(--sans); transition: transform .1s, background .1s; }
.a3-send.a3-press { transform: scale(.96); background: #0b5795; }
/* the field the cursor clicked: lit up, with a blinking caret after what's been typed */
.a3-form label span.a3-focus { border-color: #0f6fbf; box-shadow: 0 0 0 4px rgba(15,111,191,.16); }
.a3-form label span.a3-focus::after { content: ""; display: inline-block; width: 2px; height: 26px; margin-left: 2px; vertical-align: -5px; background: #0f2b44; animation: a3-blink 1s steps(1) infinite; }
@keyframes a3-blink { 50% { opacity: 0; } }
/* the cursor (its tip is its origin), and the ring a click leaves */
.a3-ptr { position: absolute; left: 0; top: 0; z-index: 3; width: 44px; transform-origin: 0 0; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.a3-ptr svg { display: block; width: 44px; height: 66px; }
.a3-ptr i { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #0f6fbf; background: rgba(15,111,191,.12); opacity: 0; }
.a3-sent { position: absolute; inset: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; background: rgba(255,255,255,.97); color: #1b7a43; font: 700 24px/1.2 var(--sans); opacity: 0; transition: opacity .3s; }
.a3-sent svg { width: 38px; height: 38px; }
.a3-msgs { left: 36px; right: 318px; top: 60px; bottom: 30px; display: grid; grid-template-columns: 236px 1fr; background: #1c1c1e; opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.a3-side { background: #242426; border-right: 1px solid #38383a; padding: 20px 10px; }
.a3-side-h { font: 700 26px/1 var(--sans); color: #fff; margin: 4px 8px 20px; }
.a3-conv { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; color: #fff; }
.a3-conv.a3-cur { background: #1f6fe0; }
.a3-conv > i, .a3-pane-h > i, .a3-sms-h i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 20px/1 var(--sans); font-style: normal; color: #fff; background: linear-gradient(135deg, #8e98a6, #5b6573); }
.a3-conv { padding: 10px 8px; gap: 10px; } .a3-conv b { display: block; font: 600 16px/1.2 var(--sans); white-space: nowrap; } .a3-conv span { display: block; font: 400 13px/1.3 var(--sans); color: #a1a1a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .a3-cur span { color: #dbe8ff; }
.a3-pane { position: relative; }
.a3-pane-h { height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid #38383a; }
.a3-pane-h b { font: 600 20px/1 var(--sans); color: #fff; } .a3-pane-h span { margin-left: auto; font: 400 14px/1 var(--sans); color: #8e8e93; }
.a3-pane .a3-thr { left: 0; right: 0; top: 76px; bottom: 80px; }
.a3-pane .a3-thr-in { padding: 18px 24px; gap: 16px; }
.a3-pane .a3-msg { max-width: 82%; } .a3-pane .a3-msg p { font-size: 31px; line-height: 1.28; padding: 16px 24px; border-radius: 30px; } .a3-pane .a3-msg small { font-size: 18px; }
.a3-pane .a3-sep { font-size: 20px; } .a3-pane .a3-fcard { max-width: 82%; } .a3-pane .a3-fcard b { font-size: 26px; } .a3-pane .a3-fcard span { font-size: 18px; } .a3-pane .a3-fcard small { font-size: 16px; }
.a3-pane .a3-input { bottom: 18px; left: 22px; right: 22px; height: 46px; font-size: 17px; }
.a3-bigclk { position: absolute; right: 22px; top: 240px; width: 278px; white-space: nowrap; z-index: 4; display: grid; justify-items: end; gap: 6px; padding: 16px 22px; border-radius: 16px; background: rgba(12,16,22,.86); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s, border-color .3s; }
.a3-bigclk b { font: 600 58px/1 var(--sans); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.a3-bigclk span { font: 500 22px/1.25 var(--sans); color: #9aa6b2; text-align: right; white-space: normal; text-wrap: balance; }   /* (balance: Adam's longer C2 line wraps evenly, no lone last word) */
.a3-bigclk.a3-late { border-color: rgba(255,122,107,.7); box-shadow: 0 0 40px rgba(255,90,70,.3), 0 16px 40px rgba(0,0,0,.5); } .a3-bigclk.a3-late span { color: #ffb0a6; }
/* the laptop's stamp is wide and sits in the middle of the screen, on one line */
.a3-mac .a3-stamp { left: 50%; top: 50%; font-size: 72px; padding: 22px 40px; border-width: 7px; background: rgba(26,9,9,.95); transform: translate(-50%, -50%) rotate(-6deg) scale(1.6) !important; }
.a3-mac .a3-stamp.a3-on { transform: translate(-50%, -50%) rotate(-6deg) scale(1) !important; }
.a3-mac .a3-redout { z-index: 6; } .a3-mac .a3-redout ~ .a3-stamp { z-index: 7; background: rgba(120,16,10,.28); }   /* (over the menu bar and the clock) */

/* ——— the right phone: the text thread ——— */
.a3-sms { position: absolute; inset: 0; background: #000; color: #fff; font-family: -apple-system, "Inter", system-ui, sans-serif; }
.a3-sms-h { position: absolute; top: 50px; left: 0; right: 0; height: 110px; display: grid; place-items: center; border-bottom: 1px solid #1c1c1e; background: rgba(22,22,24,.94); z-index: 2; }
.a3-sms-h > div { display: grid; justify-items: center; gap: 6px; } .a3-sms-h b { font: 500 15px/1 var(--sans); color: #fff; }
.a3-back { position: absolute; left: 16px; top: 22px; font: 300 46px/1 var(--sans); color: #1f8bff; }
.a3-sms { --kb: 0; }
.a3-sms .a3-thr { left: 0; right: 0; top: 160px; bottom: calc(90px + var(--kb) * 274px); }
/* the text field rides up on the keyboard and grows as the message wraps */
.a3-sms .a3-sinput { display: block; height: auto; min-height: 44px; bottom: calc(34px + var(--kb) * 274px); padding: 11px 48px 11px 18px; font: 400 16px/21px -apple-system, "Inter", system-ui, sans-serif; color: #fff; z-index: 3; }
.a3-sinput .a3-ph { color: #6c6c70; } .a3-sinput:not(.a3-empty) .a3-ph { display: none; }
.a3-sinput.a3-focus .a3-typed::after { content: ""; display: inline-block; width: 2px; height: 20px; margin: 0 1px; vertical-align: -4px; background: #1f8bff; animation: a3-blink 1s steps(1) infinite; }
.a3-sendbtn { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1f8bff; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s, filter .1s; }
.a3-sendbtn svg { width: 18px; height: 18px; } .a3-sendbtn.a3-press { filter: brightness(1.45); }
/* the keyboard: slides up from the foot of the screen; the key being typed lights and lifts */
.a3-kb { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: 3; display: grid; align-content: start; row-gap: 12px; padding: 10px 3px 0; background: rgba(44,44,46,.98); border-top: 1px solid #3a3a3c;
  transform: translateY(calc((1 - var(--kb)) * 101%)); }
.a3-kr { display: flex; justify-content: center; gap: 6px; }
.a3-kb i { flex: 0 0 33px; height: 44px; border-radius: 6px; display: grid; place-items: center; background: #6b6b6f; color: #fff; font: 400 22px/1 -apple-system, "Inter", system-ui, sans-serif; font-style: normal;
  box-shadow: 0 1px 0 rgba(0,0,0,.55); transition: background .08s, transform .08s; }
.a3-kb i.a3-fn { flex-basis: 44px; background: #48484b; font-size: 17px; } .a3-kr:nth-child(3) i.a3-fn:first-child { margin-right: 8px; } .a3-kr:nth-child(3) i.a3-fn:last-child { margin-left: 8px; }
.a3-kr:last-child i.a3-fn { flex-basis: 92px; } .a3-kb i.a3-space { flex: 1 1 auto; background: #6b6b6f; }
.a3-kb i.a3-press { background: #b4b4b9; color: #111; transform: translateY(-5px) scale(1.2); }
.a3-timer { position: absolute; left: 50%; top: 470px; width: 220px; margin-left: -110px; display: grid; justify-items: center; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; z-index: 2; }
.a3-timer svg { width: 170px; height: 170px; transform: rotate(-90deg); }
.a3-timer circle { fill: rgba(20,20,22,.9); stroke: #2c2c2e; stroke-width: 9; }
.a3-timer .a3-tr { fill: none; stroke: #ffb35c; stroke-dasharray: 100 100; stroke-linecap: round; }
.a3-timer b { position: absolute; top: 58px; font: 600 40px/1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.a3-timer span { margin-top: 10px; font: 500 15px/1 var(--mono); color: #c9c9ce; }
.a3-late .a3-timer .a3-tr { stroke: var(--a3-red); } .a3-late .a3-timer span { color: #ffb0a6; }
.a3-sms .a3-stamp { top: 40%; }

/* ——— on a phone (ticket 022; act3.js soloScreen): one phone tells the three failures, in the camera's place. Under the
   call and the text, which ride on layers over it, its lock screen, where each failure lands as a notification ——— */
.a3-solo { display: none; }
.a3-solo .dev { filter: grayscale(1) brightness(.34); transition: filter .7s ease; }
.a3-solo .dev.a3-lit { filter: none; }
.a3-solo .dev.a3-lit .aura { animation: aura-on 1.5s cubic-bezier(.2,.7,.2,1) forwards, aura-breathe 4.6s 1.5s ease-in-out infinite; }
.a3-layer { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 40%; }
.a3-lock { position: absolute; inset: 0; color: #fff; font-family: -apple-system, "Inter", system-ui, sans-serif; background: radial-gradient(120% 70% at 30% 10%, #2b3f58 0%, #141d2a 50%, #07090d 100%); }
.a3-lk-t { position: absolute; top: 72px; left: 0; right: 0; display: grid; justify-items: center; gap: 2px; }
.a3-lk-t span { font: 600 22px/1 -apple-system, "Inter", system-ui, sans-serif; color: rgba(255,255,255,.82); }
.a3-lk-t b { font: 600 82px/1 -apple-system, "Inter", system-ui, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a3-notes { position: absolute; left: 14px; right: 14px; top: 212px; }
.a3-note { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 5px; padding: 14px 16px 15px; border-radius: 26px; background: rgba(46,52,62,.9); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.45); transform-origin: 50% 0; opacity: 0; visibility: hidden; }
.a3-note-h { display: flex; align-items: center; gap: 10px; font: 500 18px/1 -apple-system, "Inter", system-ui, sans-serif; color: rgba(255,255,255,.66); text-transform: uppercase; letter-spacing: .04em; }
.a3-note-h i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #34c759; color: #fff; } .a3-note-h i svg { width: 20px; height: 20px; }
.a3-note-h em { margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0; -webkit-text-fill-color: currentColor; background: none; }
.a3-note b { font: 600 24px/1.2 -apple-system, "Inter", system-ui, sans-serif; }
.a3-note p { margin: 0; font: 400 23px/1.3 -apple-system, "Inter", system-ui, sans-serif; color: #e6e8eb; }
/* (its failure: a red mark that blinks, the words beside it) */
.a3-note-x { display: none; align-items: center; gap: 10px; margin-top: 3px; font: 700 22px/1 var(--sans); color: var(--a3-red); text-transform: uppercase; letter-spacing: .03em; }
.a3-note-x svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 50% 40%, #ff7a6b, #c9301f 70%); box-shadow: 0 0 18px rgba(255,70,52,.6); }
.a3-note.a3-bad { border-color: rgba(255,122,107,.55); box-shadow: 0 0 0 1px rgba(255,122,107,.2), 0 0 30px rgba(255,70,52,.25), 0 12px 30px rgba(0,0,0,.45); }
.a3-note.a3-bad .a3-note-x { display: flex; } .a3-note.a3-bad .a3-note-x svg { animation: a3-xblink 1.1s steps(1, end) infinite; }
/* (the call and the text on this phone are drawn at about half their true size, so their small print is set larger) */
.a3-solo .a3-cname { font-size: 38px; } .a3-solo .a3-cstat { font-size: 26px; }
.a3-solo .a3-vm-k { font-size: 16px; } .a3-solo .a3-vm p { font-size: 21px; }
.a3-solo .a3-sms-h b { font-size: 19px; } .a3-solo .a3-msg p { font-size: 23px; } .a3-solo .a3-msg small, .a3-solo .a3-sep { font-size: 15px; }
.a3-solo .a3-timer span { font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .a3-note.a3-bad .a3-note-x svg { animation: none; } }

/* ——— the catastrophe and the Call Capture Specialist: drawn on one canvas (the devices, the sphere, the nerves), with
   him, the counter and the two cards over it. All the act's words are 1.2x the page's (Yusef, 2026-10-28) ——— */
.a3-stage .act-line { font-size: clamp(34px, 3.4vw, 58px); max-width: 30ch; }
.a3-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* the counter at the sphere's heart: missed revenue falling, then, once he is there, climbing to the chart's figure
   (one Example label for the counter and the chart) */
.a3-count { position: absolute; left: 0; top: 0; z-index: 4; display: grid; justify-items: center; gap: 6px; padding: 12px 20px 11px; border-radius: 16px; pointer-events: none; visibility: hidden; transform-origin: 50% 50%;
  background: linear-gradient(180deg, rgba(48,12,12,.94), rgba(26,8,8,.94)); border: 1px solid rgba(255,122,107,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 46px rgba(255,70,52,.35), inset 0 1px 0 rgba(255,200,190,.12);
  transition: background .5s, border-color .5s, box-shadow .5s; }
.a3-count b { font: 600 clamp(30px, 2.6vw, 42px)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #ff8a7a; text-shadow: 0 0 18px rgba(255,70,52,.55); min-width: 5.4ch; text-align: center; transition: color .4s, text-shadow .4s; }
.a3-count span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.a3-count em { font: 500 14px/1 var(--sans); font-style: normal; color: #ffc4bb; -webkit-text-fill-color: currentColor; background: none; }
.a3-count small { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 3px 6px; border: 1px solid var(--line-hi); border-radius: 5px; }
/* (turning: the red cools; past zero it is his, frost blue) */
.a3-count.a3-turn { border-color: rgba(169,205,242,.55); } .a3-count.a3-turn b { color: #ffd2cb; text-shadow: 0 0 14px rgba(127,200,255,.4); }
.a3-count.a3-good { background: linear-gradient(180deg, rgba(14,34,52,.95), rgba(8,18,30,.95)); border-color: rgba(127,220,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 50px rgba(127,220,255,.4), inset 0 1px 0 rgba(233,246,255,.18); }
.a3-count.a3-good b { color: #e9f6ff; text-shadow: 0 0 18px rgba(127,220,255,.8); } .a3-count.a3-good em { color: #bfe3fb; }

/* him: full body, rising at the bottom centre (clipped only at the floor he rises through, so his glow isn't boxed in) */
.a3-cc { position: absolute; z-index: 4; left: 50%; bottom: 9vh; height: min(32vh, 290px);   /* (clear of the page's fade at the foot) */
  aspect-ratio: 347 / 620; transform: translateX(-50%); pointer-events: none; visibility: hidden;
  clip-path: inset(-80px -80px 0 -80px); }
.a3-cc.a3-up { clip-path: none; }
.a3-rise { position: absolute; inset: 0; transform: translateY(100%); will-change: transform; }
.a3-sil { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 26px rgba(127,220,255,.55)); }
/* the two cards: glass, a cold rim of light along the top */
.a3-lc, .a3-rc { position: absolute; z-index: 5; bottom: 9vh; border-radius: 20px; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(180deg, rgba(18,30,44,.96), rgba(9,15,23,.96)); border: 1px solid rgba(127,220,255,.38);
  box-shadow: inset 0 1px 0 rgba(233,246,255,.14), 0 0 70px rgba(127,220,255,.14), 0 30px 80px rgba(0,0,0,.6); }
.a3-lc::before, .a3-rc::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,236,255,.9), transparent); }
/* the card on his left: what he does, a check at a time (1.2x, Yusef 2026-10-28) */
.a3-lc { left: 12vw; width: min(440px, 29vw); padding: 20px 22px 22px; }
.a3-lc-h span, .a3-rc-h span { display: block; font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.a3-lc-h b { display: block; font: 500 clamp(20px, 1.65vw, 25px)/1.1 var(--sans); color: #fff; letter-spacing: -.01em; margin-bottom: 16px; }
.a3-lc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.a3-lc li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font: 500 clamp(15px, 1.3vw, 19px)/1.25 var(--sans); color: rgba(233,244,255,.32); transition: color .35s; }
.a3-lc li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed rgba(169,205,242,.3); color: transparent; transition: background .3s, border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.a3-lc li i svg { width: 17px; height: 17px; }
.a3-lc li.a3-in { color: #eef7ff; } .a3-lc li.a3-in i { border: 1px solid #bfe3fb; background: rgba(127,220,255,.22); color: #e9f6ff; box-shadow: 0 0 16px rgba(127,220,255,.6); transform: scale(1.1); }
/* the estimates line under the list (Adam's copy C5, 2026-10-30) */
.a3-lc-more { margin: 16px 0 0; font: 400 clamp(13px, 1vw, 15px)/1.4 var(--sans); color: rgba(233,244,255,.72); }
/* the card on his right: revenue with Atlas and without, the gap between them named */
.a3-rc { right: 12vw; width: min(460px, 30vw); padding: 20px 22px 18px; }
.a3-rc-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.a3-rc-v { display: block; font: 600 clamp(30px, 2.5vw, 40px)/1 var(--sans); letter-spacing: -.02em; color: #e9f6ff; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(127,220,255,.45); }
.a3-rc-d { font: 500 13px/1 var(--sans); font-style: normal; color: #bfe9ff; -webkit-text-fill-color: currentColor; background: rgba(127,220,255,.12); border: 1px solid rgba(127,220,255,.4); padding: 7px 10px; border-radius: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a3-rc svg { display: block; width: 100%; height: auto; margin: 12px 0 10px; overflow: visible; }
.a3-rc line { stroke: rgba(169,205,242,.1); stroke-width: 1; }
.a3-rc .a3-ax { font: 400 11px var(--mono); fill: rgba(169,205,242,.5); letter-spacing: .04em; }
.a3-rc polyline { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.a3-wo { stroke: #6f7a86; stroke-dasharray: 5 5; } .a3-wi { stroke: #a9e2ff; stroke-width: 3 !important; filter: drop-shadow(0 0 6px rgba(127,220,255,.85)); }
.a3-wd { fill: #fff; filter: drop-shadow(0 0 6px rgba(127,220,255,.9)); } .a3-wh { fill: rgba(127,220,255,.16); stroke: rgba(169,226,255,.5); stroke-width: 1; }
.a3-lg { display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.2 var(--sans); color: var(--muted); }
.a3-lg span { display: flex; align-items: center; gap: 8px; } .a3-lg i { width: 16px; height: 3px; border-radius: 2px; }
.a3-lg-wi i { background: #9fdcff; box-shadow: 0 0 6px #9fdcff; } .a3-lg-wo i { background: repeating-linear-gradient(90deg, #6f7a86 0 4px, transparent 4px 7px); }
.a3-lg b { font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; color: #aab4be; }

@media (prefers-reduced-motion: reduce) { .a3-thr-in, .a3-msg, .a3-sep, .a3-fcard, .a3-stamp { transition: none; } .a3-focus::after, .a3-tag.a3-bad b.a3-xb { animation: none !important; } }

/* ——— on a phone (V2.md §2.1e): stacked, nothing over the title. A shorter title band; the camera window under it,
   the row at full width; then what he does as a compact list in two columns, the sphere in the middle, sized to the
   room left; him at the bottom left with the revenue card beside him on the right, both clear of the page's Book bar
   (positions read by act3.js) ——— */
@media (max-width: 720px) {
  .a3-stage .act-cap { height: 132px; align-content: start; padding-top: 14px; }
  .a3-stage .act-line { font-size: 27px; max-width: none; }
  /* (the one phone in the camera's place, as tall as the window under the title allows, clear of the scroll cue) */
  .a3-cam { display: none; }
  .a3-solo { position: absolute; inset: 2px 0 26px; display: flex; justify-content: center; align-items: center; }
  .a3-solo .phone-dev { height: 100%; width: auto; max-width: none; }
  .a3-count { padding: 8px 12px 7px; gap: 4px; border-radius: 12px; } .a3-count b { font-size: 26px; } .a3-count em { font-size: 11px; } .a3-count small { font-size: 8.5px; }
  .a3-lc { left: 34px; right: 14px; width: auto; top: calc(104px + 132px + 2px); bottom: auto; padding: 10px 11px; border-radius: 12px; }
  .a3-lc-h { display: none; }
  .a3-lc-more { margin-top: 8px; font-size: 11.5px; }
  .a3-lc ul { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 6px; }
  .a3-lc li { grid-template-columns: 16px 1fr; gap: 6px; font-size: 12.5px; line-height: 1.2; }
  .a3-lc li i { width: 16px; height: 16px; } .a3-lc li i svg { width: 11px; height: 11px; }
  .a3-cc { left: 26%; bottom: 96px; height: min(172px, 20svh); }
  .a3-rc { right: 14px; bottom: 96px; width: 50%; padding: 10px 11px; border-radius: 12px; }
  .a3-rc-h { flex-direction: column; align-items: flex-start; gap: 5px; } .a3-rc-h span { font-size: 9.5px; letter-spacing: .1em; margin-bottom: 3px; }
  .a3-rc-v { font-size: 22px; } .a3-rc-d { font-size: 10.5px; padding: 4px 7px; }
  .a3-rc svg { margin: 6px 0 6px; } .a3-rc .a3-ax { font-size: 15px; }
  .a3-lg { flex-direction: column; gap: 4px; font-size: 12px; } .a3-lg b { margin-left: auto; font-size: 13px; }
}