/* Simulated live SPAC4 status page, drawn over the iPad screen in the product photo.
   All sizes are in cqw (percent of the screen width) so it scales with the photo. */
.s4wrap { position: relative; display: inline-block; line-height: 0; }
.s4wrap > img { display: block; }
.s4screen { position: absolute; left: 28.55%; top: 18.86%; width: 38.68%; height: 51.4%; container-type: size; overflow: hidden;
  background: #1C1D20; color: #E6E8EB; font-family: Arial, "Helvetica Neue", sans-serif; line-height: 1.2; border-radius: 0.6cqw; font-size: 8px; letter-spacing: 0; text-align: left; }
.s4 { display: flex; flex-direction: column; height: 100%; font-size: 2.4cqw; line-height: 1.2; }
.s4 .hd { display: flex; align-items: center; gap: 1.8cqw; padding: 2.2cqw 2.6cqw 1.8cqw; background: #222327; border-bottom: 0.9cqw solid #2A6BB8; }
.s4 .logo { width: 6.6cqw; height: auto; }
.s4 .s4brand { min-width: 0; }
.s4 .s4brand b { display: block; color: #3FA9F5; font-size: 3.1cqw; white-space: nowrap; }
.s4 .s4brand span { display: block; color: #9AA0A8; font-size: 1.9cqw; margin-top: 0.3cqw; white-space: nowrap; }
.s4 .clock { margin-left: auto; text-align: right; }
.s4 .clock b { display: block; font-family: Consolas, "Courier New", monospace; font-size: 3.3cqw; color: #DDE1E6; white-space: nowrap; }
.s4 .clock span { font-size: 1.9cqw; color: #8C939B; white-space: nowrap; }
.s4 .pill { display: inline-flex; align-items: center; gap: 1.6cqw; border: 0.35cqw solid #3A3C42; border-radius: 4cqw; padding: 1cqw 2.2cqw; font-weight: 700; font-size: 2.2cqw; color: #4CD964; min-width: 15cqw; justify-content: center; flex: none; }
.s4 .pill i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #4CD964; }
.s4 .pill.alarm { color: #FF5A52; border-color: #6B2A28; } .s4 .pill.alarm i { background: #FF5A52; animation: s4blink 0.8s steps(1) infinite; }
.s4 .body { flex: 1; padding: 2.2cqw 2.4cqw; display: grid; gap: 2.2cqw; align-content: start; }
.s4 .grp { background: #26272B; border: 0.3cqw solid #34363B; border-radius: 1.4cqw; }
.s4 .grp .gh { display: flex; justify-content: space-between; align-items: center; padding: 1.8cqw 2.8cqw; border-bottom: 0.3cqw solid #34363B; }
.s4 .grp .gh b { font-size: 3.3cqw; }
.s4 .gpill { border: 0.4cqw solid #2E7D32; background: rgba(46,125,50,0.25); color: #4CD964; border-radius: 3cqw; padding: 0.8cqw 3.6cqw; font-weight: 700; font-size: 2.4cqw; }
.s4 .gpill.alarm { border-color: #B23A35; background: rgba(178,58,53,0.25); color: #FF5A52; }
.s4 .units { display: flex; gap: 2cqw; padding: 2.2cqw 2.4cqw 0; }
.s4 .unit { flex: 0 0 22cqw; background: #2C2D32; border: 0.3cqw solid #393B41; border-radius: 1.2cqw; text-align: center; padding: 1.8cqw 1cqw 1.6cqw; transition: border-color 0.3s; }
.s4 .unit.alarm { border-color: #FF5A52; box-shadow: 0 0 2cqw rgba(255,90,82,0.35) inset; }
.s4 .fan { width: 8.4cqw; height: 8.4cqw; display: block; margin: 0 auto 1cqw; }
.s4 .fan .blades { fill: #6B6E75; transform-origin: 50% 50%; }
.s4 .unit.run .fan .blades { fill: #4CD964; animation: s4spin 0.9s linear infinite; }
.s4 .unit.alarm .fan .blades { fill: #FF5A52; animation: none; }
.s4 .unit b { display: block; font-size: 2.9cqw; }
.s4 .unit small { display: block; font-size: 1.9cqw; color: #8C939B; margin: 0.3cqw 0 0.9cqw; }
.s4 .role { display: inline-block; line-height: 1.3; background: #1F2A3A; border-radius: 1.8cqw; padding: 0.5cqw 2cqw; font-size: 2cqw; font-weight: 700; color: #8FB4E6; }
.s4 .role.primary { color: #3FA9F5; }
.s4 .state { display: block; font-weight: 700; font-size: 2.4cqw; margin-top: 1.1cqw; color: #9AA0A8; }
.s4 .unit.run .state { color: #4CD964; } .s4 .unit.alarm .state { color: #FF5A52; }
.s4 .info { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.2cqw; padding: 2cqw 2.4cqw 2.2cqw; align-items: stretch; }
.s4 .rows div { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.8cqw; padding: 0.95cqw 0; border-bottom: 0.25cqw solid #33353A; }
.s4 .rows span { color: #8C939B; letter-spacing: 0.15cqw; text-transform: uppercase; }
.s4 .rows em { font-style: normal; font-weight: 700; color: #DDE1E6; white-space: nowrap; }
.s4 .rows em.g { color: #4CD964; } .s4 .rows em.b { color: #3FA9F5; }
.s4 .stg { background: #1B1C1F; border: 0.3cqw solid #393B41; border-radius: 1.2cqw; padding: 1.6cqw 2cqw; display: flex; flex-direction: column; }
.s4 .stg .t { display: flex; justify-content: space-between; font-size: 1.9cqw; color: #8C939B; letter-spacing: 0.15cqw; }
.s4 .stg .t em { font-style: normal; font-weight: 700; color: #B0B5BC; letter-spacing: 0; }
.s4 .stg .temp { margin: auto 0; text-align: center; font-family: Consolas, "Courier New", monospace; font-weight: 700; font-size: 6.6cqw; color: #FFA21A; letter-spacing: 0.3cqw; }
.s4 .ft { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; background: #18191B; border-top: 0.3cqw solid #2C2D31; padding: 1.6cqw 0 1.4cqw; }
.s4 .ft div { font-size: 1.7cqw; color: #8C939B; letter-spacing: 0.25cqw; }
.s4 .ft i { display: block; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; margin: 0 auto 0.8cqw; background: #3A3C41; border: 0.3cqw solid #4A4D53; }
.s4 .ft i.on { background: #4CD964; border-color: #2E7D32; }
.s4 .ft i.red { background: #FF5A52; border-color: #8E2B27; animation: s4blink 0.8s steps(1) infinite; }
.s4 .ft i.amb { background: #FFC233; border-color: #8E6A16; }
/* physical ALARM LED on the panel door */
.s4led { position: absolute; left: 24.6%; top: 88.9%; width: 2.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #FF3B30; box-shadow: 0 0 10px 4px rgba(255,59,48,0.75); opacity: 0; pointer-events: none; }
.s4led.on { animation: s4blink 0.8s steps(1) infinite; }
.s4tag { display: block; margin-top: 10px; text-align: center; font-size: 13px; line-height: 1.4; color: #9FB3CE; }
@keyframes s4spin { to { transform: rotate(360deg); } }
@keyframes s4blink { 0% { opacity: 1; } 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .s4 .unit.run .fan .blades { animation: none; } }
.pp-hero .pic .s4 img.logo { width: 7.6cqw; height: auto; max-height: none; filter: none; }