/* ============================================================
   JUREX marketing site — shared page patterns
   Reusable section components for the content pages, built on
   the same tokens. Loaded after site.css.
   ============================================================ */

/* ---------- Track / page hero ---------- */
.phero { padding: clamp(40px, 7vh, 84px) 0 clamp(32px, 5vh, 60px); }
.phero .eyebrow { margin-bottom: 18px; }
.phero h1 { max-width: 14ch; }
.phero .lead { margin-top: 22px; max-width: 560px; }
.phero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.phero-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }

/* ---------- Beat header ---------- */
.beat-head { max-width: 640px; margin-bottom: 44px; }
.beat-head .eyebrow { margin-bottom: 16px; }
.beat-head .h2 { margin-bottom: 16px; }

/* ---------- "World now" pain list ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; position: relative;
}
.pain .pain-x { width: 30px; height: 30px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pain h4 { margin-bottom: 8px; }

/* ---------- Feature rows (alternating) ---------- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: clamp(40px,6vh,70px) 0; }
.frow + .frow { border-top: 1px solid var(--border); }
.frow.flip .frow-media { order: -1; }
.frow-copy .eyebrow { margin-bottom: 14px; }
.frow-copy h3 { margin-bottom: 14px; }
.frow-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.frow-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.frow-list li .ck { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

/* media surfaces (stylized product mock) */
.media-frame { border: 1px solid var(--border-strong); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg); }
.mock { background: var(--canvas); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mock-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.mock-row .mr-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mock-row .mr-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mock-row .mr-d { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.mock-bar { height: 7px; border-radius: 4px; background: var(--border); }

/* ---------- Big pull quote ---------- */
.pullquote { max-width: 880px; margin: 0 auto; text-align: center; }
.pullquote .pq-mark { color: var(--accent); margin-bottom: 18px; display: inline-flex; }
.pullquote blockquote { font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); font-weight: 500; line-height: 1.28; letter-spacing: -0.01em; margin: 0; color: var(--ink); text-wrap: balance; }
.pullquote .pq-by { margin-top: 26px; display: flex; align-items: center; gap: 12px; justify-content: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; flex-shrink: 0; }

/* ---------- Connection closer (ends each track) ---------- */
.closer { text-align: center; }
.closer .closer-line { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; max-width: 18ch; margin: 18px auto 0; }
.closer .gateway-diagram { max-width: 760px; margin: 40px auto 0; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.stat-strip .stat { text-align: left; }

/* ---------- Generic page header (content pages) ---------- */
.pagehead { padding: clamp(44px,7vh,80px) 0 clamp(28px,4vh,44px); }
.pagehead .eyebrow { margin-bottom: 16px; }
.pagehead .lead { margin-top: 18px; max-width: 600px; }

/* ---------- Section tint ---------- */
.tint { background: var(--surface); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .phero-split { grid-template-columns: 1fr; gap: 40px; }
  .frow { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
  .frow.flip .frow-media { order: 0; }
  .pain-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .stat-strip { grid-template-columns: 1fr; }
}