/* Atlas v2 · the acts (V2.md §2.8): each act's stage stays pinned while its section scrolls past (scene.js) */
.act { position: relative; padding: 0; }
/* every act on one grid (Yusef, 2026-10-27, V2.md §2.1c): a title band across the top, centred; the animation in the
   bottom ~70%, 12% clear each side */
.act .stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr; align-items: center; padding: calc(var(--head-h, 88px) + 1vh) 12vw 3vh; overflow: hidden; }
/* (on a phone: clear of the spine's small title, which sits just under the header, and of the "Book an Executive
   Review" bar fixed along the bottom) */
@media (max-width: 720px) { .act .stage { padding: 104px 14px 84px 34px; } }
.act-cap { position: relative; z-index: 3; height: 18vh; display: grid; align-content: center; justify-items: center; text-align: center; }
.act-line { font-size: clamp(30px, 3.4vw, 54px); min-height: 1.1em; text-wrap: balance; max-width: 22ch; }
.act-sub { margin-top: 10px; color: var(--muted); font-size: clamp(15px, 1.2vw, 19px); min-height: 1.4em; }
.trio-wrap { position: relative; z-index: 1; opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 40px)); filter: brightness(calc(1 - var(--dim, 0) * .62)); transition: filter .2s; }
.rank { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); display: grid; justify-items: center; gap: 4px; opacity: 0; pointer-events: none; }
.rank .rq { font: 400 11px/1.2 var(--mono); color: var(--muted); text-align: center; }
.rank b { font: 600 clamp(48px, 5.6vw, 96px)/1 var(--sans);   /* (Yusef: 3× the size, so the ranking reads from across the room) */ color: #ff7a6b; text-shadow: 0 0 20px rgba(255,90,70,.45); letter-spacing: -.02em; }
.rank.first b { color: #e9fbff; text-shadow: 0 0 22px rgba(127,220,255,.8), 0 0 50px rgba(127,220,255,.4); }
@media (max-width: 720px) { .rank .rq { display: none; } }

/* Act 1 (2026-10-27): one device at a time, then the row of three moving up for the Marketing Executive below */
.a1-trio { transform-origin: 50% 0; }
.a1-trio .dev { will-change: transform, opacity; transform-origin: 50% 100%; }
.rank.hot b { color: #ff5a4a; text-shadow: 0 0 26px rgba(255,70,55,.8), 0 0 60px rgba(255,70,55,.35); }

/* the big search box a device opens with (inside the screen, at its true size), shrinking into the search bar */
.bigq { position: absolute; inset: 0; z-index: 20; opacity: 0; pointer-events: none; background: rgba(16,22,30, calc(var(--bg, 1) * .97)); }
.bigq-pill { position: absolute; transform-origin: 0 0; display: flex; align-items: center; gap: 22px; padding: 0 34px; white-space: nowrap; border-radius: 40px; background: #303134;
  border: 2px solid rgba(169,205,242,.5); box-shadow: 0 0 0 8px rgba(127,196,246,.08), 0 0 60px rgba(127,196,246,.25); box-sizing: border-box; overflow: hidden; }
.bigq-pill > * { opacity: var(--txt, 1); }
.bigq-pill .mag { font-size: 52px; line-height: 1; color: #a9cdf2; }
.bigq .bq { font: 500 46px/1 Roboto, "Inter", system-ui, sans-serif; color: #f1f4f8; letter-spacing: -.01em; white-space: nowrap; }   /* (sized per query to fit one line, act1.js) */

/* the issues card under Act 1's title (Yusef, 2026-10-27): a row per failed search, a red X, the search and your rank in
   it; at #1 the row turns blue and its X a check. The devices sit smaller below it */
.a1-issues { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(var(--head-h, 88px) + 1vh + 18vh - 8px); width: min(560px, 42vw); display: grid; gap: 8px; }
.a1-is { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 9px 16px; border-radius: 12px; background: rgba(40,14,14,.72); border: 1px solid rgba(255,110,95,.45); opacity: 0; transition: background .5s, border-color .5s; }
.a1-is span { font: 500 17px/1.25 var(--sans); color: #f6e3df; letter-spacing: -.005em; }   /* (bigger, in the main font: readable, Yusef) */
.a1-is b { font: 600 24px/1 var(--sans); color: #ff6b5b; letter-spacing: -.02em; transition: color .5s, text-shadow .5s; }
.a1-ix { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #ff6b5b; position: relative; transition: border-color .5s, background .5s; }
.a1-ix::before, .a1-ix::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; margin: -1px 0 0 -5.5px; background: #ff6b5b; transform: rotate(45deg); transition: opacity .3s; }
.a1-ix::after { transform: rotate(-45deg); }
/* (2026-10-28: the blue state fades in with the scroll as the rank reaches #1, act1.js sets --ck: a blue face over the red
   one, the X giving way to a drawn check) */
.a1-is { position: relative; } .a1-is > * { position: relative; }
.a1-is::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: rgba(14,32,48,.92); border: 1px solid rgba(127,220,255,.6); box-shadow: 0 0 20px rgba(127,220,255,.2); opacity: var(--ck, 0); pointer-events: none; }
.a1-is.first b { color: #e9fbff; text-shadow: 0 0 14px rgba(127,220,255,.9); }
.a1-ix { border-color: color-mix(in srgb, #7fdcff calc(var(--ck, 0) * 100%), #ff6b5b); background: rgba(127,220,255, calc(var(--ck, 0) * .18)); }
.a1-ix::before, .a1-ix::after { opacity: calc(1 - var(--ck, 0)); }
.a1-ck { position: absolute; inset: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px); fill: none; stroke: #7fdcff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: calc(16 - var(--ck, 0) * 16); opacity: var(--ck, 0); filter: drop-shadow(0 0 3px rgba(127,220,255,.9)); }
@media (min-width: 721px) { .a1-trio { width: 56%; justify-self: center; margin-top: 17vh; } }   /* (smaller, under the card, Yusef) */

/* the Marketing Executive (the hero film's language): a frost current along the floor, him rising out of it, and your
   business profile beside him, built in the open, then folded into a holographic map */
/* (relaid 2026-10-27: the whole stage; the executive rises in the centre, the panel on the right, the devices bottom left) */
.mx { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; }
.mx-fx { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.mx-me { position: absolute; left: 52%; transform: translateX(-50%); bottom: 2vh; height: 46%; width: 17%; max-width: 240px; overflow: hidden; }
.mx-me::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -14px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(169,220,255,.55), rgba(127,196,246,0)); opacity: var(--floor, 0); }
.mx-rise { position: absolute; inset: 0; display: grid; align-items: end; justify-items: center; will-change: transform; }
.mx-sil { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 26px rgba(127,220,255,.5)); }
.mx-who { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--light); opacity: var(--floor, 0); }
.pf { position: absolute; right: 12vw; bottom: 5vh; width: min(500px, 27vw); height: 49%; border-radius: 18px; padding: 18px 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16,26,38,.96), rgba(10,16,24,.96)); border: 1px solid rgba(127,220,255,.4); box-shadow: 0 0 70px rgba(127,220,255,.16), 0 30px 80px rgba(0,0,0,.6); opacity: 0; }
.pf > :not(.pf-map) { transition: opacity .5s; } .pf.mapped > :not(.pf-map) { opacity: 0; }
.pf-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pf-head small { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pf-head b { color: #fff; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.pf-ring { position: relative; width: 52px; height: 52px; } .pf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke: rgba(127,196,246,.15); stroke-width: 3.5; } .pf-ring .pf-arc { stroke: var(--light); stroke-linecap: round; stroke-dasharray: 47.8 119.4; filter: drop-shadow(0 0 4px rgba(127,220,255,.8)); transition: stroke-dasharray .3s; }
.pf-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 400 12px/1 var(--mono); color: #e9f6ff; }
.pf-photos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.pf-photos i { aspect-ratio: 4 / 3; border-radius: 8px; border: 1px dashed rgba(169,205,242,.28); }
.pf-rate { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 14px; } .pf-r { color: #fff; font-size: 18px; } .pf-st i { font-style: normal; color: #5f6368; } .pf-st i.on { color: #fbbc04; } .pf-st i.half { color: #fbbc04; opacity: .55; }
/* while they climb, the review count and the completeness ring glow (and give off embers, act1.js), so the eye goes there */
.pf-ct { transition: color .3s, text-shadow .3s; } .pf-ct.hot { color: #e9f6ff; text-shadow: 0 0 10px rgba(127,220,255,.9), 0 0 26px rgba(127,220,255,.5); }
.pf-ring.hot .pf-pct { text-shadow: 0 0 10px rgba(127,220,255,.95); } .pf-ring.hot svg { filter: drop-shadow(0 0 10px rgba(127,220,255,.8)); }
.pf-feed { display: grid; gap: 8px; margin-bottom: 10px; }
.pf-rv { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 13px; color: #dfe8f1; opacity: 0; }
.pf-rv p { margin: 4px 0 0; } .pf-five { color: #fbbc04; letter-spacing: 1px; } .pf-rv b { color: #fff; font-weight: 500; }
.pf-reply { color: var(--light); max-height: 0; overflow: hidden; transition: max-height .4s; } .pf-rv.replied .pf-reply { max-height: 40px; } .pf-reply em { font-style: normal; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.pf-tags { display: grid; gap: 7px; } .pf-tags > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-tags small { width: 92px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-tags span { font-size: 12.5px; padding: 4px 9px; border-radius: 7px; border: 1px dashed rgba(169,205,242,.25); color: transparent; transition: color .3s, border-color .3s, background .3s, box-shadow .3s; }
.pf-tags span.in { color: #e9f4ff; border: 1px solid rgba(127,220,255,.55); background: rgba(127,220,255,.1); box-shadow: 0 0 12px rgba(127,220,255,.25); }
/* the job photos in flight: rough as shot (grey, dark, soft), polished as they land, a glint across */
.mx-shot { position: absolute; left: 0; top: 0; z-index: 6; object-fit: cover; border-radius: 8px; transform-origin: 50% 50%; opacity: 0; pointer-events: none;
  filter: grayscale(calc(var(--rough, 1) * .7)) brightness(calc(1 - var(--rough, 1) * .35)) contrast(calc(1 - var(--rough, 1) * .25)) blur(calc(var(--rough, 1) * 1px));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 26px rgba(0,0,0,.5); }
.mx-shot.glint { box-shadow: 0 0 0 1.5px rgba(169,220,255,.9), 0 0 26px rgba(127,220,255,.7); }
/* Act 1 on a phone (ticket 022: one device, not the trio): stacked, never overlapping. The title; under it the issues
   card as one row, the search the phone runs; under that the one phone, filling the room. When the executive comes the
   phone steps to the left edge, he stands in the room it leaves, and the profile panel, then the map, is the phone's
   screen. act1.js measures the room and sets --a1-zt (the top of the room under the card), --a1-fb (the floor, from
   the stage's bottom) and --a1-side (the room beside the stepped-aside phone) */
.a1-solo-wrap { display: none; }
@media (max-width: 720px) {
  .a1 .act-cap { height: 96px; align-content: end; padding-bottom: 4px; }   /* (sat low, so a two-line title clears the spine's small title above it) */
  .a1 .a1-issues { top: 212px; left: 34px; right: 14px; width: auto; transform: none; }   /* (16px under the title, as in the other acts) */
  .a1 .a1-is:not(:nth-child(2)) { display: none; }
  .a1 .a1-is { grid-template-columns: 20px 1fr auto; gap: 10px; padding: 8px 12px; }
  .a1 .a1-is span { font-size: 15px; }
  .a1 .a1-is b { font-size: 22px; }
  .a1 .a1-ix { width: 20px; height: 20px; }
  .a1 .a1-ix::before, .a1 .a1-ix::after { width: 10px; margin-left: -5px; }
  .a1 .a1-trio { display: none; }
  .a1-solo-wrap { display: block; position: absolute; z-index: 1; top: var(--a1-zt, 256px); bottom: var(--a1-fb, 84px); left: 34px; right: 14px; will-change: transform; }
  .a1-solo-wrap .phone-dev { height: 100%; width: auto; max-width: none; margin: 0 auto; will-change: transform, opacity; }
  .a1 .mx-me { left: auto; right: 14px; top: auto; bottom: var(--a1-fb, 84px); height: calc((100% - var(--a1-zt, 256px) - var(--a1-fb, 84px)) * .62); width: var(--a1-side, 90px); max-width: none; transform: none; }
  /* (him whole, head to feet, in his column: clipped only at the floor he rises through, so his glow isn't boxed in;
     the floor's light sits wholly above that line, fading out before it) */
  .a1 .mx-me { overflow: visible; clip-path: inset(-80px -80px 0 -80px); }
  .a1 .mx-me::after { bottom: 0; height: 22px; }
  .a1 .mx-rise { grid-template-rows: minmax(0, 1fr); }
  .a1 .mx-who { display: none; }   /* (the title names him) */
  /* the profile panel on the phone's screen: the screen's own size, clear of the island, real pixels (not the
     screen's scaled layout) */
  .a1-solo .pf { inset: 0; z-index: 5; width: auto; height: auto; padding: 34px 11px 11px; border: 0; border-radius: 0; box-shadow: none; }
  .a1 .pf-head { gap: 6px; margin-bottom: 8px; } .a1 .pf-head small { font-size: 8.5px; letter-spacing: .08em; } .a1 .pf-head b { font-size: 14.5px; }
  .a1 .pf-ring { width: 36px; height: 36px; flex: none; } .a1 .pf-pct { font-size: 10px; }
  .a1 .pf-photos { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; } .a1 .pf-photos i { aspect-ratio: 16 / 10; }
  .a1 .pf-rate { gap: 6px; font-size: 12.5px; margin-bottom: 8px; white-space: nowrap; } .a1 .pf-r { font-size: 16px; }
  .a1 .pf-feed { gap: 6px; } .a1 .pf-rv { font-size: 12px; padding: 7px 9px; } .a1 .pf-feed .pf-rv:nth-child(n+2) { display: none; }   /* (one review and its reply, so the details still show) */
  .a1 .pf-tags > div { gap: 4px; } .a1 .pf-tags small { width: 100%; font-size: 8.5px; } .a1 .pf-tags span { font-size: 11px; padding: 3px 7px; } .a1 .pf-tags > div:nth-child(n+2) { display: none; }
  /* the phone's screen laid out --k times smaller than its true size and drawn --k times larger (act1.js scales the
     layer), so the search, the results and your row read at a phone's width: a shorter map, a sheet that starts
     higher, rows without thumbnails */
  .a1-solo .zoom { right: auto; bottom: auto; width: calc(100% / var(--k)); height: calc(100% / var(--k)); }
  .a1-solo .maps .mapsvg { height: 250px; }
  .a1-solo .sheet { top: 232px; }
  /* (a real app's top: the status bar stays over the big search box, level with the island; the pins, smaller, stand
     in the strip of map between the chips and the sheet, so their badges never sit on the chips) */
  .a1-solo .statusbar { z-index: 21; }
  .a1-solo .maps .pins { top: 186px; height: 40px; }
  .a1-solo .pin { width: 20px; height: 28px; } .a1-solo .pin b { top: 3px; font-size: 9px; } .a1-solo .youpin.first { width: 26px; height: 37px; }
  /* (the list scrolls inside its own window under the sheet's handle and header, never over them) */
  .a1-solo .list-clip { display: block; position: absolute; top: 51px; left: 0; right: 0; bottom: 0; overflow: hidden; }
  .a1-solo .res { grid-template-columns: minmax(0, 1fr); padding: 10px 16px; } .a1-solo .thumb { display: none; }
  .a1-solo .res b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 44px; }
  .a1-solo .res .acts span { padding: 6px 10px; }
  .a1-solo .you-tag { top: 12px; bottom: auto; }   /* (beside the name, which leaves it room, clear of the row's buttons) */
  .a1-solo .bigq .bq { white-space: normal; line-height: 1.15; }
  .a1-solo .bigq-pill { border-radius: 28px; }
}
.burst { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* ——— the screens: dark-mode Maps on the phones ——— */
.maps { position: absolute; inset: 0; background: #1f2a37; font-family: Roboto, "Inter", system-ui, sans-serif; color: #e8eaed; }
.maps .mapsvg { position: absolute; left: 0; top: 0; width: 100%; height: 420px; }
.pins { position: absolute; left: 0; top: 0; width: 100%; height: 420px; }
.bigmap .pins { height: 100%; }
.pin { position: absolute; width: 26px; height: 37px; transform: translate(-50%, -100%); transition: opacity .3s; }
.pin svg { width: 100%; height: 100%; fill: #ea4335; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.pin b { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font: 700 11px/1 Roboto, system-ui, sans-serif; color: #fff; }
.youpin svg { fill: #4aa8ff; } .youpin.first { width: 36px; height: 51px; } .youpin.first svg { fill: #7fdcff; filter: drop-shadow(0 0 12px rgba(127,220,255,.9)); }
.statusbar { position: absolute; top: 0; left: 0; right: 0; height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0; font-size: 15px; z-index: 2; }
.statusbar span { font-size: 11px; letter-spacing: 2px; }
.searchpill { position: absolute; top: 56px; left: 14px; right: 14px; height: 50px; border-radius: 25px; background: #303134; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 18px; box-shadow: 0 2px 8px rgba(0,0,0,.45); z-index: 2; font-size: 16px; }
.mag { color: #9aa0a6; font-size: 20px; } .searchpill .q, .sbox .q { flex: 1; color: #e8eaed; white-space: nowrap; overflow: hidden; }
.av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #5f6b7a, #3a4452); flex: none; }
.chips { position: absolute; top: 116px; left: 14px; right: 0; display: flex; gap: 8px; z-index: 2; }
.chips span { padding: 8px 14px; border-radius: 9px; background: #303134; border: 1px solid #5f6368; font-size: 13px; color: #e8eaed; white-space: nowrap; }
.sheet { position: absolute; top: 380px; left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0; background: #202124; box-shadow: 0 -4px 16px rgba(0,0,0,.4); overflow: hidden; z-index: 3; }
.grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: #5f6368; margin: 8px auto 6px; }
.sheet-h { padding: 4px 18px 8px; font-size: 13px; color: #9aa0a6; letter-spacing: .02em; }
.list { position: relative; }
.list-clip { display: contents; }   /* (a window for the list on the one phone only, acts.css's phone rules) */
.res { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr 76px; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #3c4043; transition: background .35s, box-shadow .35s; }
.res b { font-size: 17px; font-weight: 500; color: #e8eaed; }
.rate { display: flex; gap: 6px; align-items: center; font-size: 14px; color: #e8eaed; margin-top: 3px; }
.rate .st i { font-style: normal; color: #5f6368; } .rate .st i.on { color: #fbbc04; } .rate .st i.half { color: #fbbc04; opacity: .55; } .rate .ct { color: #9aa0a6; }
.meta, .hrs { font-size: 13.5px; color: #9aa0a6; margin-top: 3px; } .hrs em { font-style: normal; color: #81c995; }
.res .acts { display: flex; gap: 8px; margin-top: 9px; } .res .acts span { padding: 6px 12px; border-radius: 16px; border: 1px solid #5f6368; color: #8ab4f8; font-size: 12.5px; }
.thumb { width: 76px; height: 76px; border-radius: 10px; background: linear-gradient(135deg, #3c4a5a, #26303c); align-self: start; margin-top: 4px; }
.res.you .thumb { background: linear-gradient(135deg, #2c5c86, #1a2c40); }
.you-tag { position: absolute; right: 18px; bottom: 12px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(127,220,255,.15); color: #9be8ff; opacity: 0; transition: opacity .3s; }
/* your row (Yusef, 2026-10-28): solid strong red where they can't find you; solid clear blue at #1 */
.res.found { background: #c8261c; box-shadow: inset 0 0 0 2px #ff6b5b, 0 0 40px rgba(255,60,40,.5); border-bottom-color: transparent; }
.res.first { background: #1f7ae0; box-shadow: inset 0 0 0 2px #8fd2ff, 0 0 40px rgba(80,170,255,.55); border-bottom-color: transparent; }
.res.found b, .res.first b, .res.found .rate, .res.first .rate { color: #fff; }
.res.found .meta, .res.found .hrs, .res.found .rate .ct, .res.first .meta, .res.first .hrs, .res.first .rate .ct { color: rgba(255,255,255,.82); }
.res.found .hrs em, .res.first .hrs em { color: #fff; } .res.found .rate .st i, .res.first .rate .st i { color: rgba(255,255,255,.35); } .res.found .rate .st i.on, .res.first .rate .st i.on { color: #ffd54a; }
.res.found .acts span, .res.first .acts span { border-color: rgba(255,255,255,.6); color: #fff; }
.res.found .thumb { background: linear-gradient(135deg, #8a1a14, #5a100c); } .res.first .thumb { background: linear-gradient(135deg, #5cb2ff, #1559b0); }
.res.found .you-tag, .res.first .you-tag { opacity: 1; background: rgba(255,255,255,.22); color: #fff; }
/* the layer a screen zooms on (act1.js): the whole screen's content, scaled from its top left */
.zoom { position: absolute; inset: 0; transform-origin: 0 0; }

/* ——— the laptop: the search results' local list and map ——— */
.serp { position: absolute; inset: 0; background: #202124; font-family: Roboto, "Inter", system-ui, sans-serif; color: #e8eaed; }
.topbar { height: 72px; display: flex; align-items: center; gap: 22px; padding: 0 28px; border-bottom: 1px solid #3c4043; }
.topbar .grid { color: #9aa0a6; letter-spacing: -2px; font-size: 14px; width: 60px; }
.sbox { width: 620px; height: 46px; border-radius: 23px; background: #303134; display: flex; align-items: center; gap: 12px; padding: 0 20px; font-size: 16px; }
.sbox .x { color: #9aa0a6; } .topbar .av { margin-left: auto; }
.tabs { display: flex; gap: 26px; padding: 0 110px; height: 42px; align-items: center; border-bottom: 1px solid #3c4043; font-size: 14px; color: #9aa0a6; }
.tabs .on { color: #8ab4f8; box-shadow: inset 0 -3px 0 #8ab4f8; height: 100%; display: flex; align-items: center; }
.serp-split { position: absolute; top: 114px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 440px 1fr; }
.side { position: relative; overflow: hidden; border-right: 1px solid #3c4043; }
.side .sheet-h { padding: 14px 22px 8px; font-size: 15px; color: #e8eaed; }
.bigmap { position: relative; overflow: hidden; } .bigmap .mapsvg { width: 100%; height: 100%; }

/* the channel's touches: a device it has reached glows; at #1 every screen glows blue, locked in */
.a1-trio .dev.a1-fed .aura, .a1-solo-wrap .dev.a1-fed .aura { opacity: .55; }
.a1-trio.a1-locked .dev .screen { box-shadow: inset 0 0 0 2000px rgba(80,160,255,.2), 0 0 40px rgba(127,196,246,.7); transition: box-shadow .6s; }
/* (the one phone glows at its edge only: its #1 row is the screen's whole story, so no blue wash over it) */
.a1-solo-wrap.a1-locked .dev .screen { box-shadow: inset 0 0 0 2px rgba(127,220,255,.55), 0 0 40px rgba(127,196,246,.7); transition: box-shadow .6s; }
.a1-trio.a1-locked .dev .aura, .a1-solo-wrap.a1-locked .dev .aura { opacity: 1; filter: brightness(1.6); }
/* "Now they find you first.": glowing blue with energy, embers rising off it (act1.js) */
.act-line.a1-win { color: #e9f6ff; text-shadow: 0 0 18px rgba(127,220,255,.9), 0 0 50px rgba(127,196,246,.55); }
/* Adam's opening line (copy F1, 001c) is three short sentences with the month and season in it: set smaller so it
   sits above the issues card */
.act-line.a1-long { font-size: clamp(22px, 2.2vw, 34px); max-width: 40ch; }