/* NYC screens section (owner approved the picture 2026-11-07, https://claude.ai/artifact/EMtL6XVYCCjKpyqTEeqvgu).
   Glowing LED screens drawn in CSS, in the site's own blue, so nothing here is a photo of a real company's screen. */
.nyc{border-top:1px solid #333}
.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scene{aspect-ratio:1.15;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#13203f 0%,#0a0d16 45%,#050505 100%);display:flex;align-items:center;justify-content:center}
.scene:after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(#0000,#2a3d6b33);pointer-events:none}
.glow{position:relative;background:#165dff;background-image:radial-gradient(#0009 .7px,transparent 1.1px),linear-gradient(160deg,#4b85ff,#165dff 55%,#0b3fc4);background-size:4px 4px,100% 100%;box-shadow:0 0 18px #4b85ffcc,0 0 60px #165dff99,0 0 140px #165dff55;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-family:Display,sans-serif;text-transform:uppercase;line-height:.86;letter-spacing:-.03em;animation:flick 4s infinite}
.glow:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#fff3 0%,#fff0 35%);pointer-events:none}
.bezel{background:#111;border:1px solid #3a3a3a;padding:7px;box-shadow:0 30px 60px #000c;position:relative;z-index:1}
.reflect{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);width:60%;height:14%;background:radial-gradient(closest-side,#165dff66,#0000);filter:blur(6px)}
/* subway: portrait liveboard on tiled wall */
.s-subway{background:repeating-linear-gradient(0deg,#0e1220 0 18px,#0b0e18 18px 19px),#0b0e18}
.s-subway .stripe{position:absolute;left:0;right:0;top:20%;height:9%;background:#1b1f2c;border-top:2px solid #2b3245;border-bottom:2px solid #2b3245}
.s-subway .glow{width:120px;height:200px;font-size:34px}
.s-subway .bullet{position:absolute;top:22%;left:8%;width:26px;height:26px;border-radius:50%;background:#ee352e;color:#fff;font:bold 15px/26px Arial;text-align:center;z-index:2}
/* kiosk */
.s-kiosk .pole{width:96px;background:#1a1a1a;border:1px solid #444;padding:8px 6px 46px;position:relative;z-index:1;box-shadow:0 30px 60px #000c}
.s-kiosk .glow{width:84px;height:170px;font-size:24px}
.s-kiosk .curb{position:absolute;bottom:0;left:0;right:0;height:18%;background:#151821;border-top:2px solid #2b2f3a}
/* taxi */
.s-taxi .car{position:relative;width:78%;height:34%;margin-top:30%;background:#f7b500;border-radius:40px 60px 14px 14px;box-shadow:0 20px 40px #000c;z-index:1}
.s-taxi .car:after{content:'';position:absolute;left:18%;right:22%;top:-38%;height:46%;background:#d99e00;border-radius:24px 40px 0 0}
.s-taxi .top{position:absolute;left:50%;top:-74%;transform:translateX(-50%);background:#111;padding:4px;border:1px solid #444;z-index:2}
.s-taxi .glow{width:150px;height:44px;font-size:22px}
.s-taxi .wheel{position:absolute;bottom:-14px;width:36px;height:36px;border-radius:50%;background:#111;border:5px solid #333}
/* times square */
.s-ts{align-items:stretch;justify-content:stretch;gap:6px;padding:16px 16px 0;display:grid;grid-template-columns:1.1fr 1.6fr 1fr;grid-template-rows:1fr 1fr}
.s-ts .glow{font-size:30px}
.s-ts .b1{grid-row:1/3}.s-ts .b2{grid-row:1/2}.s-ts .b3{grid-row:1/3}.s-ts .b4{grid-row:2/3;grid-column:2}
.s-ts .dim{filter:saturate(.5) brightness(.45);animation:none;box-shadow:0 0 30px #165dff55}
/* airport */
.s-air{background:linear-gradient(#0b0f1a,#0d1322 70%,#1b2233 70%)}
.s-air .glow{width:230px;height:120px;font-size:34px}
.s-air .sign{position:absolute;top:12%;left:8%;font:bold 11px Arial;letter-spacing:.15em;color:#ffcc00;z-index:2}
/* storefront */
.s-store{background:#0c0c0c}
.s-store .awning{position:absolute;top:10%;left:12%;right:12%;height:12%;background:repeating-linear-gradient(90deg,#b5121b 0 22px,#e8e3d8 22px 44px)}
.s-store .window{position:relative;margin-top:14%;width:70%;height:56%;background:#141922;border:6px solid #2a2a2a;display:flex;align-items:center;justify-content:center;z-index:1}
.s-store .glow{width:96px;height:150px;font-size:24px}
.s-store .door{position:absolute;right:-24%;bottom:-6px;width:20%;height:100%;background:#1d1d1d;border:4px solid #2a2a2a}
.screen-tag{position:absolute;top:12px;right:12px;background:#080808c9;padding:5px 9px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;z-index:3;color:#ccc}
@keyframes flick{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@media(max-width:900px){.s-subway .glow{width:96px;height:160px;font-size:28px}}
@media(max-width:650px){.screen-grid{grid-template-columns:1fr;gap:35px}.scene{aspect-ratio:1.25}}
/* "See where exactly" link on each card, and one page per screen (src/screens.ts). */
.screen-more{display:inline-block;margin-top:14px;font-size:13px;font-weight:bold;color:#4b85ff;border-bottom:1px solid #4b85ff66;padding-bottom:2px}.screen-more:hover{color:#fff;border-color:#fff}
.sp-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sp-back{display:inline-block;font-size:13px;color:#aaa;margin-bottom:28px}.sp-back:hover{color:#fff}
.sp-top .eyebrow{margin-bottom:18px}
.sp-title{font-size:clamp(64px,8vw,120px)}
.sp-what{margin:24px 0 30px;color:#c3c3c3;font-size:19px;max-width:460px}
.sp-drawing .scene{aspect-ratio:1.15}
.sp-block{padding-top:0}.sp-block .eyebrow,.sp-eyebrow,.light-section .eyebrow{margin-bottom:22px}
.sp-spots,.sp-good,.sp-steps{list-style:none;margin:0;padding:0;border-top:1px solid #333}
.sp-spots li,.sp-steps li{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:30px;padding:22px 0;border-bottom:1px solid #333}
.sp-spots strong,.sp-steps strong{font-family:Display,sans-serif;text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:-.02em}
.sp-spots span,.sp-steps span{color:#aaa;font-size:16px;max-width:520px}
.sp-good{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border:0}.sp-good li{border-top:2px solid #165dff;padding-top:16px;font-size:18px}
.sp-lead{color:#555;max-width:520px;margin-bottom:30px}
.sp-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;border-top:1px solid #bcbcb8;padding-top:30px}
.sp-choice h3{font-size:30px;margin-bottom:16px}
.sp-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.sp-chips li{border:1px solid #080808;padding:10px 16px;font-size:14px;background:#fff}
.sp-steps{counter-reset:s}.sp-steps li{counter-increment:s}.sp-steps strong:before{content:counter(s,decimal-leading-zero) "  ";color:#4b85ff}
.sp-others{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:16px;margin-bottom:30px}.sp-others a{color:#c6c6c6;border-bottom:1px solid #444;padding-bottom:3px}.sp-others a:hover{color:#fff}
@media(max-width:650px){.sp-top{grid-template-columns:1fr;gap:30px}.sp-title{font-size:64px}.sp-what{font-size:17px}.sp-top .button{width:100%}.sp-spots li,.sp-steps li{grid-template-columns:1fr;gap:8px}.sp-spots strong,.sp-steps strong{font-size:26px}.sp-good,.sp-choices{grid-template-columns:1fr;gap:18px}.sp-choice h3{font-size:26px}.sp-cta{width:100%}}
