/* apps and games: case studies, swipe rows, rebuilt screens, gameplay reel */
.case{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:36px 64px;align-items:center;margin-top:88px}
.case.rv{grid-template-columns:minmax(0,1fr) minmax(0,430px)}
.case.rv .ct{order:2}
.chip{display:inline-flex;gap:10px;align-items:center;font:800 15px var(--d);background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.22);border-radius:99px;padding:7px 16px}
.chip b{color:var(--sun)}
.ct h3{font-size:clamp(32px,3.5vw,48px);line-height:1.02;margin:18px 0 14px}
.ct>p:not(.chip){color:rgba(255,255,255,.8)}
.pts{list-style:none;display:grid;gap:12px;margin-top:22px}
.pts li{padding-left:28px;position:relative;font-size:17px;line-height:1.45;color:rgba(255,255,255,.82)}
.pts li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:13px;border-radius:50%;background:var(--sun)}
.pts b{color:#fff}
.ct>.worth{margin-top:26px;font-size:31px;color:var(--sun);transform:rotate(-1.5deg);transform-origin:left}
.cv{min-width:0}
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 10px;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;border-radius:12px}
.strip::-webkit-scrollbar{display:none}
.strip.drag{scroll-snap-type:none;cursor:grabbing}
.sl{flex:0 0 var(--sw,250px);scroll-snap-align:start;text-align:center}
.sl.wd{--sw:410px}
.sl img{pointer-events:none}
.sl figcaption{margin-top:16px}
.sl figcaption b{display:block;font:800 20px/1.2 var(--d);letter-spacing:-.015em}
.sl .hand{display:block;font-size:23px;color:var(--sun);margin-top:3px}
.sl .fr{transform:none}
.sn{display:flex;align-items:center;gap:12px;margin-top:16px}
.sn button{width:48px;height:48px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sn button:hover{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.sn button:disabled{opacity:.28;pointer-events:none}
.sn .hand{font-size:27px;color:var(--sun);transform:rotate(-2deg);margin-left:4px}
.sn small{margin-left:auto;font-size:14px;line-height:1.3;color:rgba(255,255,255,.6);text-align:right;max-width:34ch}

/* screens rebuilt in code with sample data. Sizes are in cqw so each one scales with its frame */
.dv{container-type:inline-size}
.ui{position:relative;aspect-ratio:390/780;overflow:hidden;border-radius:26px;text-align:left;font:400 3.8cqw/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;padding:8cqw 5cqw 0}
.ui em{font-style:normal}
.ui u{text-decoration:none}
.ue{font-size:3cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ut{font:800 8.6cqw/1.05 var(--d);letter-spacing:-.02em;margin-top:1.4cqw}
.ut.sm{font-size:6.6cqw}
.us{font-size:3.6cqw;opacity:.75;margin-top:1.6cqw}
.uq{margin-top:4cqw;border-radius:99px;padding:2.8cqw 4.4cqw;font-size:3.6cqw}
.uc{display:flex;align-items:center;gap:3cqw;margin-top:3cqw;border-radius:4cqw;padding:3cqw}
.uc>i{flex:none;width:13cqw;height:13cqw;border-radius:3cqw;background:linear-gradient(135deg,var(--a,#4f9d6f),#163f2b)}
.uc>div{flex:1;min-width:0}
.uc b{display:block;font-size:4.1cqw;font-weight:700;line-height:1.2}
.uc span{display:block;font-size:3.3cqw;opacity:.72;margin-top:.6cqw}
.uc div em,.uk em{display:inline-block;font-size:3cqw;font-weight:600;border-radius:99px;padding:.9cqw 2.6cqw;margin:1.6cqw 1.2cqw 0 0}
.uc>u{flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#4f9d6f}
.uc>u.w1{background:#e9c46a}
.uc>u.w3{background:#e5484d}
.uh{font-size:3.1cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:5cqw}
.uf{margin-top:2.4cqw;border-radius:3cqw;padding:2.4cqw 3.2cqw;font-size:3.5cqw;line-height:1.3;border-left:1.2cqw solid #86bf9a}
.uf b{display:block;font-size:2.9cqw;letter-spacing:.06em;text-transform:uppercase;color:#86bf9a}
.uf.w1{border-color:#e9c46a}.uf.w1 b{color:#e9c46a}
.uf.w2{border-color:#e8853a}.uf.w2 b{color:#f0a060}
.uf.w3{border-color:#e5484d}.uf.w3 b{color:#ff8286}
.uz{margin-top:3cqw;font-size:3.9cqw;line-height:1.35}
.uo{margin-top:2.4cqw;border-radius:3.4cqw;padding:3cqw 3.6cqw;font-size:3.6cqw;border:1px solid #1f6440}
.uo.on{background:#1f6440;border-color:#86bf9a;font-weight:700}
.um{margin-top:2.6cqw;height:1.8cqw;border-radius:99px;background:#163f2b;overflow:hidden}
.um i{display:block;height:100%;border-radius:99px;background:#e9c46a}
.ua{margin-top:5cqw;border-radius:4cqw;padding:4cqw;background:linear-gradient(135deg,#e9c46a,#b6852a);color:#07160f}
.ua b{display:block;font-size:4.2cqw}
.ua span{display:block;font-size:3.4cqw;margin-top:1cqw}
.un{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:3.4cqw 2cqw 5cqw;font-size:3.1cqw;font-weight:600}
.un b{font-weight:700}

/* staff app: deep green and gold */
.k{background:#07160f;color:#f0f7f2}
.k .ue{color:#e9c46a}
.k .uq{background:#0f2b1e;border:1px solid #1f6440;color:#86bf9a}
.k .uc,.k .uf{background:#0f2b1e}
.k .uc{border:1px solid #163f2b}
.k em{background:#163f2b;color:#b5d9c1}
.k em.on{background:#e9c46a;color:#07160f}
.k .un{background:#0f2b1e;border-top:1px solid #163f2b;color:#86bf9a}
.k .un b{color:#e9c46a}

/* production board: light, tablet shaped */
.p{aspect-ratio:3/4;background:#F1F4EE;color:#18261E;font-size:2.7cqw;padding:5cqw 4.4cqw 0}
.p .ue{font-size:2.1cqw;color:#5B6A60}
.p .ut{font-size:5.6cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.up{flex:none;font:700 2.2cqw/1 system-ui,sans-serif;letter-spacing:0;border-radius:99px;padding:1.2cqw 2.2cqw;white-space:nowrap}
.up.ok{background:#DDEEDF;color:#2E7A48}
.up.cr{background:#F6DEDC;color:#B3342F}
.up.wn{background:#F3E6CC;color:#8A590F}
.p .un{position:static;justify-content:flex-start;gap:0;padding:0;margin-top:3cqw;font-size:2.5cqw;border-bottom:1px solid #D5DDD1;color:#5B6A60}
.p .un b,.p .un span{padding:1.6cqw 2cqw}
.p .un b{color:#18261E;box-shadow:inset 0 -.6cqw 0 #2F6B4F}
.p .uh{font-size:2.2cqw;margin-top:3.4cqw;display:flex;justify-content:space-between}
.p .uc{background:#fff;border:1px solid #D5DDD1;border-left:1.1cqw solid #2F6B4F;border-radius:2cqw;padding:2.1cqw 2.6cqw;margin-top:1.7cqw;gap:2cqw}
.p .uc.cr{border-left-color:#B3342F}
.p .uc.dn{opacity:.62}
.p .uc b{font-size:3cqw}
.p .uc span{font-size:2.35cqw}
.p .uc .ux{color:#B3342F;opacity:1;font-weight:600}
.uv{flex:none;font:700 2.6cqw ui-monospace,Menlo,Consolas,monospace}
.ub{flex:none;font-size:2.3cqw;font-weight:700;border-radius:1.6cqw;padding:1.6cqw 2.4cqw;background:#2F6B4F;color:#fff;white-space:nowrap}
.ub.gh{background:none;color:#18261E;box-shadow:inset 0 0 0 1px #B9C4B4}
.p .uk em{background:#E7ECE3;color:#18261E;font-size:2.3cqw;padding:1.3cqw 2.4cqw;margin:1.6cqw 1cqw 0 0}
.uw{display:flex;justify-content:space-between;align-items:center;margin-top:3cqw;font-size:3.2cqw}
.ug{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;margin-top:2.4cqw}
.ug p{background:#E7ECE3;border-radius:2cqw;padding:2.2cqw 2.4cqw;font-size:2.2cqw;color:#5B6A60}
.ug b{display:block;font:700 4.6cqw/1.15 ui-monospace,Menlo,Consolas,monospace;color:#18261E}
.p .um{background:#E7ECE3;height:1.4cqw;margin-top:1.2cqw}
.p .um i{background:#2F6B4F}
.ur{display:grid;grid-template-columns:1.45fr .8fr .8fr 1.75fr;gap:1.6cqw;align-items:center;padding:1.9cqw 0;border-bottom:1px solid #D5DDD1;font-size:2.6cqw}
.ur span{font-family:ui-monospace,Menlo,Consolas,monospace}
.ur em{justify-self:start}
.ur.th{font-size:2.05cqw;text-transform:uppercase;letter-spacing:.05em;color:#5B6A60;padding-top:1.4cqw}
.ur.th span{font-family:inherit}
.p .uz{font-size:2.4cqw;color:#5B6A60}

/* why it costs what it costs */
.why{margin-top:96px;background:var(--sun);color:var(--ink);border-radius:30px;padding:38px 40px 40px;box-shadow:10px 12px 0 var(--coral);transform:rotate(-.6deg)}
.why h3{font-size:clamp(30px,3.6vw,46px)}
.why ol{list-style:none;counter-reset:y;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px;margin-top:26px}
.why li{counter-increment:y;border-top:3px solid var(--ink);padding-top:16px}
.why li::before{content:counter(y,decimal-leading-zero);display:block;font:900 15px var(--d);margin-bottom:8px}
.why b{display:block;font:800 23px/1.15 var(--d);letter-spacing:-.015em}
.why span{display:block;font-size:17px;margin-top:8px;opacity:.86}

/* gameplay reel */
.play{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px 56px;align-items:center;margin:34px 0 44px}
.play.no{display:block;max-width:720px;font:inherit}
.play.no .tv{display:none}
.tvs{position:relative;border-radius:22px;overflow:hidden;border:3px solid #fff;background:#141A3C;box-shadow:10px 12px 0 var(--coral);aspect-ratio:1034/727}
.tvs img,.tvs canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tv figcaption{font-size:27px;color:var(--coral);margin-top:22px;transform:rotate(-1.5deg);transform-origin:left}
.play .chip b,.play .pts li::before{color:var(--coral)}
.play .pts li::before{background:var(--coral)}

@media (max-width:1100px){
  .case{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:36px 44px}
  .case.rv{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .sn{flex-wrap:wrap}
  .sn small{flex-basis:100%;margin:2px 0 0;text-align:left;max-width:none}
}
@media (max-width:900px){
  .case,.case.rv{grid-template-columns:1fr;margin-top:64px}
  .case.rv .ct{order:0}
  .strip{margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px;border-radius:0}
  .sl{--sw:min(62vw,250px)}
  .sl.wd{--sw:min(80vw,410px)}
  .why{margin-top:64px;transform:none}
  .why ol{grid-template-columns:1fr}
  .play{grid-template-columns:1fr}
}
@media (max-width:640px){
  .strip{margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px;gap:16px}
  .ct>.worth{font-size:27px}
  .why{padding:28px 24px 30px;border-radius:24px;box-shadow:6px 8px 0 var(--coral)}
  .tvs{border-radius:16px;box-shadow:6px 8px 0 var(--coral)}
  .tv figcaption{font-size:24px;margin-top:16px}
  .ui{border-radius:21px}
}