/* Download page: the three devices, each running the review the way that
   platform is best at. CSS-only, gated by assets/js/figures.js (.play on
   scroll into view; .still = finished frame under reduced motion). */

.fig-devices .stage {
  display: flex; align-items: flex-end; justify-content: center; gap: 26px; flex-wrap: wrap;
  padding: 30px 22px 22px; background: linear-gradient(180deg, #fbfbfc, #f2f3f6);
}
.fig-devices .dev { position: relative; }
.fig-devices .dev .cap { text-align: center; font-size: 12.5px; color: var(--sub); margin-top: 12px; }
.fig-devices .dev .cap b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 750; }
/* the same cream map, drawn in CSS: two families of white streets over cream */
.fig-devices .scr {
  position: relative; overflow: hidden; background:
    repeating-linear-gradient(90deg, transparent 0 34px, #fff 34px 39px),
    repeating-linear-gradient(0deg, transparent 0 30px, #fff 30px 34px),
    #f6f3ec;
}
.fig-devices .scr::before {
  /* an avenue */
  content: ''; position: absolute; left: -20%; top: 55%; width: 140%; height: 8px; background: #f7d181;
  transform: rotate(-24deg);
}
.fig-devices .pin {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #fff; background-size: cover;
  box-shadow: 0 0 0 2px var(--ring, var(--certain)), 0 2px 6px rgba(0,0,0,.3); transform: translate(-50%, -50%); z-index: 3;
}
.fig-devices .pin.likely { --ring: var(--likely); }
.fig-devices .card { position: absolute; border-radius: 9px; background-size: cover; border: 2px solid #fff; box-shadow: 0 5px 12px rgba(22,24,28,.22); overflow: hidden; }
.fig-devices .card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.fig-devices .card i { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); z-index: 1; }

/* ---- iPhone: the triage carousel ---- */
.fig-devices .phone { width: 122px; }
.fig-devices .phone .body { border-radius: 24px; background: #14161a; padding: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.fig-devices .phone .scr { height: 226px; border-radius: 19px; }
.fig-devices .phone .scr::after { content: ''; position: absolute; left: 50%; top: 7px; width: 34px; height: 9px; margin-left: -17px; border-radius: 5px; background: #000; z-index: 4; }
.fig-devices .phone .card { width: 84px; height: 58px; bottom: 12px; left: 13px; }
.fig-devices .phone .card.c2 { left: 105px; }
.fig-devices .phone .card.c3 { left: 197px; }
.fig-devices .phone .ok { position: absolute; right: 8px; bottom: 76px; width: 22px; height: 22px; border-radius: 50%; background: var(--certain); border: 2px solid #fff; z-index: 4; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.fig-devices .phone .ok::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* first card confirmed and gone, the others shift up a slot; the pin flips green */
.fig-devices.play .phone .card.c1 { animation: ph-c1 5s ease infinite; }
.fig-devices.play .phone .card.c2 { animation: ph-c2 5s ease infinite; }
.fig-devices.play .phone .card.c3 { animation: ph-c3 5s ease infinite; }
.fig-devices.play .phone .ok { animation: ph-ok 5s ease infinite; }
.fig-devices.play .phone .pin.p1 { animation: ph-pin 5s ease infinite; }
@keyframes ph-c1 { 0%, 34% { transform: none; opacity: 1; } 46%, 88% { transform: translateX(-140%) rotate(-8deg); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }
@keyframes ph-c2 { 0%, 40% { transform: none; } 56%, 88% { transform: translateX(-92px); } 92%, 100% { transform: none; } }
@keyframes ph-c3 { 0%, 40% { transform: none; } 56%, 88% { transform: translateX(-92px); } 92%, 100% { transform: none; } }
@keyframes ph-ok { 0%, 28% { transform: scale(1); } 33% { transform: scale(1.35); } 38%, 100% { transform: scale(1); } }
@keyframes ph-pin { 0%, 32% { --ring: var(--likely); box-shadow: 0 0 0 2px var(--likely), 0 2px 6px rgba(0,0,0,.3); } 38%, 88% { box-shadow: 0 0 0 2px var(--certain), 0 2px 6px rgba(0,0,0,.3); } 92%, 100% { box-shadow: 0 0 0 2px var(--likely), 0 2px 6px rgba(0,0,0,.3); } }
.fig-devices.still .phone .pin.p1 { box-shadow: 0 0 0 2px var(--certain), 0 2px 6px rgba(0,0,0,.3); }

/* ---- iPad: the light table ---- */
.fig-devices .pad { width: 250px; }
.fig-devices .pad .body { border-radius: 16px; background: #14161a; padding: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.fig-devices .pad .scr { height: 174px; border-radius: 9px; }
.fig-devices .pad .rail { position: absolute; right: 0; top: 0; bottom: 0; width: 76px; background: rgba(255,255,255,.86); backdrop-filter: blur(6px); z-index: 4; padding: 8px 8px; display: flex; flex-direction: column; gap: 7px; }
.fig-devices .pad .rc { position: relative; height: 32px; border-radius: 7px; background-size: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.fig-devices.play .pad .rc { animation: pad-rc 6s ease infinite; animation-delay: var(--d); }
.fig-devices.play .pad .pin.pp { animation: pad-pin 6s ease infinite; animation-delay: var(--d); }
@keyframes pad-rc { 0%, 6% { box-shadow: 0 2px 6px rgba(0,0,0,.15); transform: none; } 10%, 28% { box-shadow: 0 0 0 2px var(--certain), 0 2px 6px rgba(0,0,0,.15); transform: translateX(-3px); } 34%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.15); transform: none; } }
@keyframes pad-pin { 0%, 6% { transform: translate(-50%, -50%) scale(1); } 12%, 28% { transform: translate(-50%, -50%) scale(1.45); } 34%, 100% { transform: translate(-50%, -50%) scale(1); } }
.fig-devices.still .pad .rc:first-child { box-shadow: 0 0 0 2px var(--certain), 0 2px 6px rgba(0,0,0,.15); }

/* ---- Mac: keyboard and rubber band ---- */
.fig-devices .mac { width: 320px; }
.fig-devices .mac .body { border-radius: 12px; background: #e9e9ee; padding: 0; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.08); }
.fig-devices .mac .bar { height: 22px; background: #f3f3f6; border-bottom: 1px solid rgba(0,0,0,.08); display: flex; align-items: center; gap: 6px; padding-left: 10px; }
.fig-devices .mac .bar i { width: 9px; height: 9px; border-radius: 50%; }
.fig-devices .mac .bar i:nth-child(1) { background: #ff5f57; } .fig-devices .mac .bar i:nth-child(2) { background: #febc2e; } .fig-devices .mac .bar i:nth-child(3) { background: #28c840; }
.fig-devices .mac .scr { height: 168px; }
.fig-devices .mac .grid { position: absolute; right: 0; top: 0; bottom: 0; width: 132px; background: rgba(255,255,255,.9); z-index: 4; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 42px; gap: 8px; align-content: start; }
.fig-devices .mac .gc { border-radius: 7px; background-size: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.fig-devices .mac .band { position: absolute; left: 6px; top: 6px; width: 120px; height: 92px; border: 1.5px solid var(--manual); background: rgba(10,132,255,.12); border-radius: 4px; transform-origin: top left; transform: scale(0); z-index: 5; }
.fig-devices.play .mac .band { animation: mac-band 6s cubic-bezier(.4,0,.2,1) infinite; }
.fig-devices.play .mac .gc.sel { animation: mac-sel 6s ease infinite; }
.fig-devices.play .mac .pin.pm { animation: ph-pin 6s ease infinite; }
@keyframes mac-band { 0%, 10% { transform: scale(0); opacity: 1; } 34% { transform: scale(1); opacity: 1; } 44%, 100% { transform: scale(1); opacity: 0; } }
@keyframes mac-sel { 0%, 30% { box-shadow: 0 2px 6px rgba(0,0,0,.15); } 36%, 40% { box-shadow: 0 0 0 2px var(--manual), 0 2px 6px rgba(0,0,0,.15); } 46%, 84% { box-shadow: 0 0 0 2px var(--certain), 0 2px 6px rgba(0,0,0,.15); } 92%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.15); } }
.fig-devices.still .mac .gc.sel { box-shadow: 0 0 0 2px var(--certain), 0 2px 6px rgba(0,0,0,.15); }
.fig-devices .mac .keys { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; gap: 6px; }
.fig-devices .mac .key { font-size: 10px; font-weight: 800; color: var(--ink); background: #fff; border-radius: 6px; padding: 3px 7px; box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.12); font-family: -apple-system, system-ui, sans-serif; }
.fig-devices .mac .key small { font-weight: 600; color: var(--sub); margin-left: 3px; }
.fig-devices.play .mac .key.k1 { animation: key-press 6s ease infinite; }
@keyframes key-press { 0%, 40% { transform: none; background: #fff; } 43%, 45% { transform: translateY(1px); background: #dff0ff; box-shadow: 0 0 0 rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12); } 48%, 100% { transform: none; background: #fff; } }

@media (max-width: 760px) {
  .fig-devices .stage { gap: 18px; }
  .fig-devices .mac { width: 100%; max-width: 320px; }
}