/* FixMate app page (market.html). Builds on the shared .info-page styles in
   styles.css and the workspace theme variables, so it follows the dark and
   light themes. No inline styles anywhere: the site's CSP forbids them. */

.mk-hero { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px; padding:12px 0 76px; }
.mk-hero .info-hero { padding:0; }
.mk-hero h1 { margin:14px 0 17px; font-family:"Outfit",var(--font-family); font-size:clamp(2.6rem,6vw,5rem); line-height:.96; letter-spacing:-.065em; }
.mk-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:29px; }
.mk-actions .info-primary, .mk-actions .info-secondary { margin-top:0; }
.mk-store { display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:14px; color:#fff; background:#111; border:1px solid rgba(255,255,255,.18); text-decoration:none; font-weight:800; transition:transform .2s ease, box-shadow .2s ease; }
.mk-store:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.mk-store img { width:34px; height:34px; border-radius:9px; }
.mk-store span { display:grid; line-height:1.1; }
.mk-store small { font-size:.66rem; font-weight:700; opacity:.75; letter-spacing:.02em; }
.mk-store strong { font-size:1.02rem; letter-spacing:-.01em; }
.mk-note { margin-top:14px; color:var(--text-muted); font-size:.78rem; }

.mk-phones { position:relative; height:560px; }
.mk-phone { position:absolute; width:240px; border-radius:38px; padding:9px; background:#14161a; box-shadow:0 30px 70px rgba(0,0,0,.38), inset 0 0 0 2px #3a3f47; }
.mk-phone img { display:block; width:100%; height:auto; border-radius:30px; }
.mk-phone-main { left:50%; top:10px; z-index:3; transform:translateX(-50%); width:260px; }
.mk-phone-left { left:4%; top:70px; z-index:2; transform:rotate(-8deg); }
.mk-phone-right { right:4%; top:70px; z-index:2; transform:rotate(8deg); }

.mk-qr { display:flex; align-items:center; gap:26px; margin:0 0 82px; padding:26px 30px; border:1px solid var(--border-color); border-radius:21px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-card) 94%,transparent),color-mix(in srgb,var(--bg-secondary) 72%,transparent)); }
.mk-qr-code { flex:0 0 auto; width:150px; height:150px; padding:10px; border-radius:16px; background:#fff; }
.mk-qr-code img { display:block; width:100%; height:100%; image-rendering:pixelated; }
.mk-qr h2 { margin:6px 0 6px; font-family:"Outfit",var(--font-family); font-size:1.5rem; letter-spacing:-.04em; }
.mk-qr p { margin:0; color:var(--text-muted); font-size:.86rem; line-height:1.6; }

.mk-features { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:82px; }
.mk-features .info-stat strong { margin-top:16px; }

.mk-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:6px 0 82px; }
.mk-gallery figure { margin:0; }
.mk-gallery .mk-phone { position:static; width:auto; transform:none; }
.mk-gallery figcaption { margin-top:12px; color:var(--text-muted); font-size:.8rem; font-weight:700; text-align:center; }

.mk-mac { margin:0 0 82px; }
.mk-mac-frame { overflow:hidden; border:1px solid var(--border-color); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.mk-mac-bar { display:flex; gap:7px; padding:11px 14px; background:color-mix(in srgb,var(--bg-secondary) 92%,transparent); border-bottom:1px solid var(--border-color); }
.mk-mac-bar i { width:11px; height:11px; border-radius:50%; background:#ff5f57; }
.mk-mac-bar i:nth-child(2) { background:#febc2e; }
.mk-mac-bar i:nth-child(3) { background:#28c840; }
.mk-mac-frame img { display:block; width:100%; height:auto; }

.mk-platforms { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mk-platforms span { padding:8px 13px; border:1px solid var(--border-color); border-radius:999px; color:var(--text-main); font-size:.78rem; font-weight:780; }

.mk-new { margin:0; padding:0; list-style:none; border-top:1px solid var(--border-color); }
.mk-new li { padding:15px 0; border-bottom:1px solid var(--border-color); color:var(--text-muted); font-size:.9rem; line-height:1.55; }
.mk-new li strong { color:var(--text-main); }

@media (max-width:900px) {
  .mk-hero { grid-template-columns:1fr; gap:24px; }
  .mk-phones { height:470px; }
  .mk-phone { width:190px; }
  .mk-phone-main { width:210px; }
  .mk-features { grid-template-columns:repeat(2,1fr); }
  .mk-gallery { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .mk-phones { height:400px; }
  .mk-phone { width:150px; border-radius:28px; padding:7px; }
  .mk-phone img { border-radius:22px; }
  .mk-phone-main { width:180px; }
  .mk-phone-left { left:0; }
  .mk-phone-right { right:0; }
  .mk-features { grid-template-columns:1fr; }
  .mk-qr { flex-direction:column; align-items:flex-start; }
}