/* ===== Nexlify products page — layout (ported 1:1 from design/products.html) ===== */
.brand-mark { height: 30px; width: auto; flex: 0 0 auto; display: block; }

/* page header */
.page-head { padding: 64px 0 24px; }
.crumb-back { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; transition: color .15s; }
.crumb-back:hover { color: var(--orange); }
.crumb-back .a { transition: transform .15s; }
.crumb-back:hover .a { transform: translateX(-3px); }
.ph-title { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 12px; }
.ph-sub { color: var(--ink-2); font-size: 18px; margin: 0; }

/* product nav rail */
.prail { display: flex; gap: 8px; flex-wrap: wrap; padding: 24px 0 8px; position: sticky; top: 72px; z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); }
.prail a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); font-weight: 600; font-size: 14px; transition: border-color .15s, transform .15s; }
.prail a:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.prail a .pdot { width: 8px; height: 8px; }

/* product section */
.pdetail { padding: 72px 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.pdetail-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.pdetail.reverse .pdetail-grid { direction: rtl; }
.pdetail.reverse .pdetail-grid > * { direction: ltr; }
.pd-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pd-eyebrow .pdot { width: 11px; height: 11px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 16%, transparent); }
.pd-eyebrow .cat { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.pd-name { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.pd-tag { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em; }
.pd-long { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin: 0 0 24px; max-width: 52ch; }
.pd-hl { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 15px; }
.pd-hl li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.pd-hl li .ck { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 15%, transparent);
  color: var(--acc); display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.pd-meta { display: flex; gap: 26px; flex-wrap: wrap; padding: 18px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin-bottom: 24px; }
.pd-meta .blk .k { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 5px; }
.pd-meta .blk .v { font-size: 14px; font-weight: 600; }
.pd-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pd-open { background: var(--acc); color: #fff; height: 46px; padding: 0 22px; border-radius: 11px; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 9px; transition: transform .12s, filter .15s; }
.pd-open:hover { filter: brightness(1.06); }
.pd-open:active { transform: translateY(1px); }
.pd-open .arr { transition: transform .15s; }
.pd-open:hover .arr { transform: translateX(3px); }

.pdetail[data-accent="docutract"] { --acc: var(--p-docutract); }
.pdetail[data-accent="subqual"]   { --acc: var(--p-subqual); }
.pdetail[data-accent="tally"]     { --acc: var(--p-tally); }
.pdetail[data-accent="fixr"]      { --acc: var(--p-fixr); }

/* product-shot placeholder */
.shot { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--card);
  box-shadow: 0 30px 70px -44px rgba(15,42,68,.28); }
.shot-bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.shot-bar .tt { width: 10px; height: 10px; border-radius: 50%; background: #d8d2c4; }
.shot-bar .u { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); }
.shot-body { aspect-ratio: 16/10; position: relative; display: grid; place-items: center;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--acc) 7%, transparent), transparent),
    repeating-linear-gradient(135deg, var(--bg-2) 0, var(--bg-2) 13px, var(--bg) 13px, var(--bg) 26px); }
.shot-body .tagchip { position: absolute; top: 16px; left: 16px; width: 32px; height: 32px; border-radius: 8px; background: var(--acc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 14%, transparent); }
.shot-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }
.shot-img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }

@media (max-width: 940px) {
  .pdetail-grid { grid-template-columns: 1fr; gap: 28px; }
  .pdetail.reverse .pdetail-grid { direction: ltr; }
  .prail { position: static; }
}