/* Apps and Services (home page sections and /apps/<slug>/ pages). Uses the site's tokens; card spacing follows the Websites gallery above it. */
.scene--blue{--accent:var(--blue)}.scene--teal{--accent:var(--teal)}.scene--orange{--accent:var(--orange)}.scene--green{--accent:var(--green)}
.app-item .scene{background:color-mix(in srgb,var(--accent) 62%,#fff);border:1.5px solid var(--ink);border-radius:10px}
.app-item .desk{box-shadow:5px 6px 0 #11111126}
.app-item .tag{margin:6px 0 0;font-size:15px;font-weight:650;color:var(--ink-soft)}
.app-item .tag+p{margin-top:8px}
@media(min-width:1001px){.app-item h3{min-height:0}}

/* An app with no desktop screen shows its phones side by side */
.scene--duo{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3cqi,22px);padding:20px 20px 22px;container-type:inline-size}
.scene--duo .phone{position:relative;right:auto;bottom:auto;flex:0 1 31%;min-width:0;width:auto}
.case-hero .scene--duo{padding:clamp(16px,3vw,44px)}
.case-hero .scene--duo .phone{right:auto;bottom:auto;flex:0 1 min(230px,36%);width:auto}
.shot--phone .scene{gap:clamp(12px,3vw,32px)}
.shot--phone .phone--solo{flex:0 1 220px;min-width:0;width:auto}
.built--also{margin-top:16px}

/* Services: one coloured card per service, each with a drawn diagram on a paper screen */
.svc-grid{list-style:none;margin:var(--head) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.svc-grid{grid-template-columns:minmax(0,1fr);max-width:640px}}
.svc{--accent:var(--blue);display:flex;flex-direction:column;gap:20px;padding:20px;background:var(--accent);color:var(--ink);border:1.5px solid var(--ink);border-radius:10px}
.svc--blue{--accent:var(--blue)}.svc--teal{--accent:var(--teal)}.svc--orange{--accent:var(--orange)}.svc--green{--accent:var(--green)}
.svc--ink{background:var(--ink);color:var(--paper)}
.svc-screen{padding:8px;background:var(--paper-3);border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;color:var(--ink)}
.svc--ink .svc-screen{border-color:var(--paper)}
.svc-copy{display:flex;flex-direction:column;gap:12px;flex:1;container-type:inline-size}
.svc h3{margin:0;font:700 clamp(24px,8cqi,34px)/1 var(--display);letter-spacing:-.04em}
.svc-copy>p{margin:0;font-size:16px;line-height:1.5;max-width:34em}
.sv{display:block;width:100%;height:auto}
.sv text{font:650 11px var(--body);fill:var(--ink)}
.sv .t-m{fill:var(--muted);font-size:10.5px;letter-spacing:.02em}
.sv .t-b{font-weight:700;font-size:11.5px}
.sv .t-h{font:700 15px var(--display);letter-spacing:-.02em}
.sv .t-p{fill:var(--paper);font-weight:700}
.sv .t-p.big{font:700 20px var(--display)}
.sv .f-ink{fill:var(--ink)}
.sv .f-card{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.sv .f-card.sel{stroke-width:2.5}
.sv .f-soft{fill:#cfd3da}
.sv .f-acc{fill:var(--accent);fill-opacity:.55}
.sv .ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sv .ln.thin{stroke-width:2}
.sv .ln.pap{stroke:var(--paper);stroke-width:3}
.sv .ax{stroke:var(--ink);stroke-width:1.5}
.sv .dash{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 4;opacity:.5}
.svc--ink .sv .f-acc{fill:var(--green);fill-opacity:.8}
.svc--green .sv .f-acc{fill:var(--blue)}
/* Nascent has no desktop screen: its card keeps the height of the desktop cards beside it (the card is the container, so the height follows its width) */
.app-item{container-type:inline-size}
.app-item .scene--duo{box-sizing:border-box;height:calc((100cqw - 46px) * .625 + 84px);padding:20px 20px 22px;align-items:stretch}
.app-item .scene--duo .phone{display:flex;flex:none;height:100%;width:auto}
.app-item .scene--duo .phone img{height:100%;width:auto}
@media(max-width:620px){.app-item .scene--duo{height:calc((100cqw - 34px) * .625 + 72px);padding:14px 14px 16px}}