/* ============================================================
   Product marketing page — accent-driven (var(--p))
   ============================================================ */
.product-page { position: relative; --p: var(--violet); }

/* HERO */
.product-hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 90px));
  padding-bottom: clamp(40px, 7vw, 90px);
  border-bottom: var(--bd) solid var(--line);
}
.product-hero__glow {
  position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, color-mix(in srgb, var(--p) 55%, transparent), transparent 62%);
  filter: blur(18px); opacity: .5; z-index: 0; pointer-events: none;
}
.product-hero .wrap { position: relative; z-index: 1; }
.product-back {
  display: inline-block; margin-bottom: 26px; font-size: .82rem; color: var(--fg-dim);
  transition: color .2s, transform .2s var(--ease);
}
.product-back:hover { color: var(--p); transform: translateX(-3px); }
.product-hero__grid {
  display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(24px, 5vw, 60px); align-items: center;
}
.product-hero .display { color: #fff; }
.product-host { color: var(--fg-faint); font-size: .82rem; }
.product-btn { --btn-bg: var(--p); --btn-fg: #0b0a0f; }

.product-hero__mark {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-lg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--p) 30%, #14121c), #14121c);
  border: var(--bd) solid color-mix(in srgb, var(--p) 45%, transparent);
  box-shadow: 0 30px 70px -34px var(--p);
}
.product-hero__mark img { width: 46%; height: 46%; object-fit: contain; }
.product-hero__initial { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; color: var(--p); }
@media (max-width: 760px){ .product-hero__grid { grid-template-columns: 1fr; } .product-hero__mark { max-width: 220px; } }

/* WHAT IT IS */
.product-about__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 5vw, 70px); align-items: start; }
.product-about .h2 { font-weight: 700; max-width: 24ch; }
.product-about .h2 { color: var(--fg); }
@media (max-width: 760px){ .product-about__grid { grid-template-columns: 1fr; } }

.product-problem { border-left: 4px solid var(--p); padding-left: clamp(20px, 3vw, 34px); max-width: 900px; }
.product-problem .h2 { color: var(--fg); }

/* MEDIA slots */
.product-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product-shot {
  position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; min-height: 220px;
  border: var(--bd) solid var(--line-strong);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--p) 26%, #101019), #0d0c14);
}
.product-shot--lead { grid-column: 1 / -1; min-height: clamp(280px, 42vw, 520px); }
.product-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-shot figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 12px 16px; font-size: .74rem; color: var(--fg-dim);
}
.product-shot::after { /* empty-slot hint */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--p) 8%, transparent) 14px 15px);
  opacity: 0; transition: opacity .3s;
}
.product-shot.is-empty::after { opacity: 1; }
.product-shot.is-empty figcaption::before { content: "media · "; color: var(--p); }
@media (max-width: 620px){ .product-media { grid-template-columns: 1fr; } }

/* FEATURES */
.product-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: var(--bd) solid var(--line); }
.product-feat {
  display: flex; gap: 16px; align-items: flex-start; padding: clamp(18px, 2.2vw, 26px) 4px;
  border-bottom: var(--bd) solid var(--line); font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600;
}
.product-feat__n { color: var(--p); flex: 0 0 auto; font-size: .9rem; padding-top: 3px; }

/* MORE products */
.product-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.product-more__item {
  --p: var(--violet);
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  border: var(--bd) solid var(--line-strong); border-radius: var(--r-lg); background: var(--ink-800);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s; position: relative;
}
.product-more__item:hover { transform: translate(-4px,-4px); border-color: color-mix(in srgb, var(--p) 55%, transparent); box-shadow: 6px 6px 0 0 color-mix(in srgb, var(--p) 45%, #000); }
.product-more__tag { font-size: .72rem; text-transform: uppercase; color: var(--p); }
.product-more__name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.product-more__arr { position: absolute; top: 18px; right: 18px; color: var(--fg-dim); transition: transform .2s var(--ease); }
.product-more__item:hover .product-more__arr { transform: rotate(-45deg); color: var(--p); }

/* ============================================================
   Button label fix — never wrap/collide with the button box
   ============================================================ */
.btn { white-space: nowrap; }
.nav-right .btn { flex-shrink: 0; }