/* Layout: an app library. White panels of different widths on a grey page, every entry an icon.
   A deliberate single look, so colours are set directly. */
:root {
  --page: #f5f5f7;
  --panel: #fff;
  --ink: #1d1d1f;
  --soft: #6e6e73;
  --blue: #0071e3;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.47 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: 1080px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: clamp(40px, 6vw, 72px) 28px; }

.head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.mark { width: 72px; height: 72px; margin-bottom: 12px; overflow: hidden; border: 1px solid #d8d8dc; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.mark img { width: 100%; height: 100%; object-fit: cover; }
h1 { font-size: clamp(32px, 4vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.008em; }
.head p { font-size: 19px; color: var(--soft); }

.bento { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.tile { grid-column: span 6; min-width: 0; padding: 24px; border-radius: 24px; background: var(--panel); }
.tile.wide { grid-column: span 8; }
.tile.side { grid-column: span 4; }
.tile.full { grid-column: 1 / -1; }
.tile h2 { font-size: 19px; font-weight: 600; line-height: 1.25; }
.category { min-height: 84px; }
.redeem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; background: var(--blue); color: #fff; transition: background .2s; }
.redeem:hover { background: #0077ed; }
.redeem h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -.006em; line-height: 1.15; }
.redeem p { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .84); }
.redeem span { flex: none; padding: 8px 20px; border-radius: 980px; background: #fff; color: var(--blue); font-size: 15px; font-weight: 500; }

.apps { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 6px; }
.apps.eight { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.apps--scroll { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-color: #c5cdcf transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.apps--scroll::-webkit-scrollbar { height: 7px; }
.apps--scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #c5cdcf; }
.apps--scroll .entry { flex: 0 0 72px; scroll-snap-align: start; }
.entry { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; text-align: center; font-size: 13px; line-height: 1.25; }
.entry--placeholder { cursor: default; }
.entry small { display: block; margin-top: 2px; font-size: 12px; color: var(--soft); }
.app { --s: clamp(54px, 6vw, 66px); --c: #0a84ff; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .225); display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 86%, #fff), var(--c)); transition: transform .25s; }
.app svg { width: 58%; height: 58%; }
.entry:hover .app { transform: translateY(-3px); }

.qr { display: flex; align-items: center; gap: 18px; background: var(--ink); color: #f5f5f7; }
.qr-box { flex: none; width: 104px; height: 104px; overflow: hidden; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.qr-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qr p { margin-top: 4px; font-size: 14px; color: #a1a1a6; }

.foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--soft); }

@media (max-width: 860px) {
  .tile, .tile.wide, .tile.side { grid-column: 1 / -1; }
  .apps.eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .tile { padding: 20px 14px; }
  .tile h2 { padding-inline: 6px; }
  .qr, .redeem { padding-inline: 20px; }
  .qr { gap: 14px; text-align: left; }
  .qr h2, .redeem h2 { padding-inline: 0; }
  .entry { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}