/* mksvrcek.com/apps/ (and /cs/apps/, /ko/apps/): the apps, each with its own site. The holding page's look (index.html):
   the system's type on white, Apple's greys; each app a card in its own colour (--app), its icon, a line, its devices,
   its site and, where it's out, the App Store. */
html{color-scheme:light}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:#fff; color:#1d1d1f; font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased}
:lang(ko) body{word-break:keep-all}
main{flex:1; width:100%; max-width:1120px; margin:0 auto; padding:clamp(72px, 14vh, 150px) 22px 72px; box-sizing:border-box}
.apps-kicker{margin:0; font-size:15px; font-weight:600}
.apps-kicker a{color:#6e6e73; text-decoration:none}
.apps-kicker a:hover{color:#1d1d1f}
h1{margin:10px 0 0; font-size:clamp(40px, 7vw, 72px); font-weight:800; line-height:1.02; letter-spacing:-.035em}
.apps-lead{margin:14px 0 0; max-width:34em; font-size:19px; line-height:1.45; color:#6e6e73}

.apps{list-style:none; margin:clamp(40px, 7vh, 64px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px}
@media (max-width:760px){ .apps{grid-template-columns:1fr} }
.app{position:relative; display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:28px; background:#f5f5f7; overflow:hidden}
/* its colour, faintly, from the corner its icon is in */
.app::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--app) 16%, transparent), transparent 60%); pointer-events:none}
.app > *{position:relative}
.app-head{display:flex; align-items:center; gap:18px}
.app-icon{flex:none; width:76px; height:76px; border-radius:22.5%; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 8px 20px color-mix(in srgb, var(--app) 30%, rgba(0,0,0,.12))}
.app h2{margin:0; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.app h2 a{color:inherit; text-decoration:none}
.app h2 a::after{content:""; position:absolute; inset:0; border-radius:28px} /* the whole card opens the site */
.app-devices{margin:4px 0 0; font-size:14px; font-weight:600; color:#6e6e73}
.app-line{margin:0; font-size:17px; line-height:1.45; color:#3a3a3c}
.app-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; padding-top:6px}
.app-visit{position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px; border-radius:999px; background:var(--app); color:var(--app-ink, #fff); font-size:15px; font-weight:700; text-decoration:none}
.app-visit:hover{filter:brightness(1.08)}
.app-actions .mk-store{position:relative; z-index:1}
.app :focus-visible{outline:3px solid var(--app); outline-offset:3px; border-radius:12px}