/* App Store world: the store's own night-and-brass counter. Same studio palette, a little deeper,
   with a warm brass glow behind every shelf, Instrument Serif headlines and Geist for the rest. */
body.world-appstore {
  --ink: #080a10; --night: #0f1826; --plate: #121c2b; --plate-2: #172335;
  --line: rgba(201, 161, 91, .16); --line-2: rgba(201, 161, 91, .28);
  --paper: #ece6d8; --ivory: #f4efe4;
  --accent: #c9a15b; --accent-hi: #ecd29a; --brass: #c9a15b; --brass-hi: #ecd29a;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(201, 161, 91, .13), transparent 70%),
    radial-gradient(700px 600px at -10% 40%, rgba(40, 70, 120, .22), transparent 70%),
    #080a10;
}
.world-appstore ::selection { background: #c9a15b; color: #080a10; }
.world-appstore em { color: var(--brass-hi); }
.world-appstore .app-mark img { border-radius: 22%; box-shadow: 0 0 0 1px rgba(236, 210, 154, .25), 0 18px 50px -12px rgba(201, 161, 91, .55); }
.world-appstore .chip .dot { background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.world-appstore .dev { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 1px rgba(236, 210, 154, .14), 0 40px 90px -30px rgba(201, 161, 91, .45), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.world-appstore .shot:hover { border-color: rgba(201, 161, 91, .5); box-shadow: 0 24px 50px -24px rgba(201, 161, 91, .45); }
.world-appstore .pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 24px 0 0; }
.world-appstore .pills li {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(236, 210, 154, .1), rgba(201, 161, 91, .04));
  border: 1px solid rgba(201, 161, 91, .32); color: var(--dim); font-size: 15px;
}
.world-appstore .pills b { color: var(--brass-hi); font-weight: 600; }
/* Hero: the three store screens sit beside the headline, never under it. */
.world-appstore .hero-media picture { display: block; width: 100%; height: 100%; }
@media (min-width: 901px) {
  .world-appstore .hero-media { left: 40%; right: 0; top: 6%; bottom: 6%; }
  .world-appstore .hero-media img { object-fit: contain; object-position: 70% 50%; -webkit-mask-image: radial-gradient(closest-side at 62% 50%, #000 62%, transparent); mask-image: radial-gradient(closest-side at 62% 50%, #000 62%, transparent); }
  .world-appstore .hero .wrap > * { max-width: 620px; }
}
@media (max-width: 900px) {
  .world-appstore .hero-media { bottom: 46%; top: 64px; }
  .world-appstore .hero-media img { object-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
}
/* Hero capabilities: shipping a build from a phone leads, with a slow brass sweep. */
.world-appstore .as-caps { list-style: none; display: grid; gap: 10px; padding: 0; margin: 26px 0 0; }
.world-appstore .as-caps li { position: relative; overflow: hidden; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: rgba(15, 24, 38, .72); border: 1px solid rgba(201, 161, 91, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.world-appstore .as-caps i { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 16px; color: var(--brass-hi); background: rgba(201, 161, 91, .12); border: 1px solid rgba(201, 161, 91, .3); }
.world-appstore .as-caps b { color: var(--ivory); font-weight: 600; font-size: 16px; }
.world-appstore .as-caps span { color: var(--dim); font-size: 14px; line-height: 1.4; }
.world-appstore .as-caps .lead { border-color: rgba(236, 210, 154, .6); background: linear-gradient(180deg, rgba(201, 161, 91, .2), rgba(15, 24, 38, .8)); box-shadow: 0 18px 44px -20px rgba(201, 161, 91, .7); }
.world-appstore .as-caps .lead i { color: #080a10; background: linear-gradient(180deg, #f3dca8, #c9a15b); border-color: #ecd29a; animation: as-lift 2.4s ease-in-out infinite; }
.world-appstore .as-caps .lead b { font-size: 18px; }
.world-appstore .as-caps .lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(236, 210, 154, .22) 50%, transparent 65%); transform: translateX(-100%); animation: as-sweep 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes as-lift { 50% { transform: translateY(-3px); } }
@keyframes as-sweep { 55%, 100% { transform: translateX(100%); } }
html[data-calm] .world-appstore .as-caps .lead i, html[data-calm] .world-appstore .as-caps .lead::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .world-appstore .as-caps .lead i, .world-appstore .as-caps .lead::after { animation: none; } }
@media (max-width: 900px) {
  .world-appstore .hero-media { bottom: 56%; }
  .world-appstore .as-caps { gap: 8px; margin-top: 20px; }
  .world-appstore .as-caps span { font-size: 13px; }
  .world-appstore .as-caps li:not(.lead) { padding-block: 9px; }
  .world-appstore .as-caps li:not(.lead) span { display: none; }
  .world-appstore .as-caps li:not(.lead) i { width: 32px; height: 32px; }
}
@media (min-width: 901px) {
  .world-appstore .hero .as-caps { max-width: 720px; grid-template-columns: 1fr 1fr; }
  .world-appstore .as-caps .lead { grid-column: 1 / -1; }
}