/* ============================================================
   PRODUCTS PAGE (products.html): one large block per product,
   copy on one side, a framed screenshot plus detail tiles on the
   other. Each product sets its own --pr-tint and --pr-accent.
   ============================================================ */

.pr-sec{padding:40px 0 130px}
.pr-list{display:grid;gap:130px}

.pr{
  --pr-tint:rgba(28,92,255,.10); --pr-accent:var(--blue);
  display:grid;grid-template-columns:1fr 1.18fr;gap:72px;align-items:center;
}
.pr.flip .pr-media{order:-1}
.pr-deepmark{--pr-tint:rgba(254,154,0,.16);--pr-accent:#E17100}
.pr-pocket{--pr-tint:rgba(60,110,255,.13);--pr-accent:#3B6CF6}

/* ---------- copy ---------- */
.pr-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.pr-head img{width:48px;height:48px;border-radius:12px;flex:none;object-fit:contain}
.pr-pocket .pr-head img{background:var(--bg-elev);border:1px solid var(--line);padding:6px}
.pr-head strong{display:block;font-family:var(--font-d);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.pr-head span{display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.pr h2{font-size:clamp(30px,3.5vw,46px);line-height:1.06;letter-spacing:-.035em;max-width:16ch;margin-bottom:20px}
.pr-brief{color:var(--ink-2);font-size:16.5px;line-height:1.65;max-width:52ch}

.pr-feats{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.pr-feats li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.pr-feats b{color:var(--ink);font-weight:600}
.pr-feats svg{width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--pr-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.pr-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.pr-tags span{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--bg);
}
.pr-cta{gap:10px}
.pr-ext{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- media ---------- */
.pr-media{
  position:relative;padding:34px;border-radius:18px;
  background:
    radial-gradient(120% 80% at 100% 0%,var(--pr-tint),transparent 60%),
    radial-gradient(90% 70% at 0% 100%,var(--pr-tint),transparent 65%),
    var(--bg-elev);
  border:1px solid var(--line);
}
.pr-frame{
  display:block;border-radius:12px;overflow:hidden;background:var(--bg);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pr-frame:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(5,6,10,.06),0 28px 60px -14px rgba(5,6,10,.22)}
.pr-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.pr-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.pr-bar i:nth-child(1){background:#FF5F57}.pr-bar i:nth-child(2){background:#FEBC2E}.pr-bar i:nth-child(3){background:#28C840}
.pr-bar em{flex:1;text-align:center;font-style:normal;font-family:var(--font-m);font-size:11px;color:var(--muted);margin-right:33px}
.pr-frame img{display:block;width:100%;height:auto}

.pr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pr-tiles.one{grid-template-columns:1fr}
.pr-tiles figure{margin:0;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.pr-tiles img{display:block;width:100%;height:170px;object-fit:cover;object-position:top center}
.pr-tiles.one img{height:auto;aspect-ratio:1200/630}
.pr-tiles figcaption{padding:10px 12px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .pr{grid-template-columns:1fr;gap:40px}
  .pr.flip .pr-media{order:0}
  .pr h2{max-width:22ch}
}
@media(max-width:640px){
  .pr-sec{padding-bottom:90px}
  .pr-list{gap:90px}
  .pr-media{padding:16px;border-radius:14px}
  .pr-tiles{grid-template-columns:1fr}
  .pr-tiles img{height:auto}
  .pr-bar em{margin-right:0}
}