/*
  /Products/ campaign layer (Binary Systems, Inc.)
  Loaded after the five live stylesheets and the live Services layer
  (/Services/assets/services.css), so the header, menu bar, buttons, cards and
  footer match the rewritten Services page. Every rule here is scoped to .pr-*.
*/
.pr-keep { text-transform: none !important; letter-spacing: .02em; }

/* Hero product index */
.pr-hero .sv-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.pr-hero .sv-index a { padding: 9px 4px; }
.pr-hero .sv-index small { display: block; color: #8d96a3; font-weight: normal; font-size: 12px; letter-spacing: 0; margin-top: 2px; }
.pr-hero .sv-index a:hover small { color: #c9ced6; }

/* Product band */
.pr-band { padding: 72px 0 60px; color: #c9ced6; border-top: 1px solid #000; position: relative; }
.pr-band h2, .pr-band h3 { color: #fff; }
.pr-band a { color: var(--sv-sky); }
.pr-band a:hover { color: #fff; }
.pr-band .sv-eyebrow { color: var(--sv-fiber); }
.pr-band .sv-lede { color: #dfe4ea; }
.pr-band .sv-btn-glass { color: #fff !important; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.pr-band .sv-btn-glass:hover { background: rgba(255,255,255,.14); }
.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.pr-flip .pr-grid { grid-template-columns: 300px minmax(0, 1fr); }
.pr-flip .pr-visual { order: -1; }
.pr-visual { text-align: center; }
.pr-visual img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.pr-facts { margin: 18px 0 6px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.pr-facts li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.pr-facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--pr-accent, var(--sv-aqua)); }
.pr-facts b { color: #fff; }
.pr-status { display: inline-block; margin: 0 0 14px; padding: 2px 12px; border-radius: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: bold; color: #062a1a; background: var(--sv-fiber); }
.pr-status.amber { color: var(--sv-amber-ink); background: var(--sv-amber); }
.pr-fine { font-size: 13px; color: #8d96a3; margin-top: 4px !important; }
.pr-path { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; color: #8d96a3; margin-left: 4px; }

/* Per-product accents and backdrops */
.pr-voxbox { --pr-accent: var(--sv-sky); background: radial-gradient(ellipse 60% 70% at 90% 10%, rgba(45,120,200,.45), transparent 70%), linear-gradient(180deg, #08315c 0%, #061e39 60%, #000 100%); border-top: 3px solid var(--sv-aqua); }
.pr-voxbox .cube { width: 170px; filter: drop-shadow(0 12px 30px rgba(45,120,200,.6)); }
.pr-voxbox .word { width: 250px; margin-top: 12px !important; }
.pr-protel { --pr-accent: #ffb300; background: radial-gradient(ellipse 50% 70% at 10% 20%, rgba(255,179,0,.16), transparent 70%), linear-gradient(180deg, #1c1e22 0%, #000 100%); border-top: 3px solid #ffb300; }
.pr-protel .pr-visual img { width: 300px; }
.pr-vain { --pr-accent: #ff6b5e; background: radial-gradient(ellipse 50% 70% at 12% 30%, rgba(224,50,43,.2), transparent 70%), linear-gradient(180deg, #16181c 0%, #000 100%); border-top: 3px solid #8a1c18; }
.pr-vain .pr-visual img { width: 300px; }
.pr-judo { --pr-accent: #e8e8e8; background: linear-gradient(180deg, #2a2c30 0%, #0a0b0d 55%, #000 100%); border-top: 3px solid #8d96a3; }
.pr-judo-logo { display: block; max-width: 460px; margin: 0 0 18px; padding: 18px 22px; background: #000; border-radius: 6px; box-sizing: border-box; }
.pr-judo-logo img { display: block; width: 100%; max-width: 715px; height: auto; object-fit: contain; margin: 0; }
.pr-judo .ipad { width: 260px; border-radius: 14px; border: 8px solid #222; box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.pr-judo .badge { width: 200px; margin: 18px auto 0 !important; }
.pr-judo .pr-grid { align-items: start; }

/* Install and support band */
.pr-cta .sv-card p { margin-bottom: 14px; }

@media screen and (max-width: 999px) {
  .pr-hero .sv-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .pr-grid, .pr-flip .pr-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
  .pr-flip .pr-visual { order: 0; }
}
@media screen and (max-width: 720px) {
  .pr-band { padding: 48px 0 36px; }
  .pr-hero .sv-hero-grid { grid-template-columns: 1fr; }
  .pr-grid, .pr-flip .pr-grid { grid-template-columns: 1fr; gap: 24px; }
  .pr-visual, .pr-flip .pr-visual { order: -1; }
  .pr-facts { grid-template-columns: 1fr; }
  .pr-voxbox .cube { width: 110px; }
  .pr-voxbox .word { width: 200px; }
  .pr-protel .pr-visual img, .pr-vain .pr-visual img { width: 240px; }
  .pr-judo .ipad { width: 220px; }
  .pr-judo .pr-visual { order: 0; }
}