/* PLATFORM VISUALS v1 (Kyle 11/1/2026): real product screens (demo data only) in browser/phone frames + flow graphics.
   Canonical: ~/.openclaw/workspace/templates/platform-visuals. Accent comes from --pv-accent (set per site). */
.pv-showcase { position: relative; max-width: 1080px; margin: 0 auto 2.75rem; }
.pv-browser { border-radius: 12px; overflow: hidden; background: #0b1220; box-shadow: 0 30px 70px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.08); }
.pv-browser-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; background: #1e293b; }
.pv-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #475569; }
.pv-browser-bar span:nth-child(1) { background: #f87171; } .pv-browser-bar span:nth-child(2) { background: #fbbf24; } .pv-browser-bar span:nth-child(3) { background: #34d399; }
.pv-browser-bar em { margin-left: 12px; font-style: normal; font-size: 12px; color: #94a3b8; letter-spacing: .02em; }
.pv-browser img { display: block; width: 100%; height: auto; }
.pv-phone { position: absolute; width: 23%; max-width: 230px; border-radius: 30px; overflow: hidden; border: 7px solid #0b1220; background: #0b1220;
    box-shadow: 0 28px 60px rgba(15,23,42,.4); }
.pv-phone img { display: block; width: 100%; height: auto; }
.pv-phone.right { right: -2.5%; bottom: -8%; } .pv-phone.left { left: -2.5%; bottom: -8%; }

.pv-caption { text-align: center; font-size: .82rem; color: var(--color-text-muted, #64748b); margin: 1.1rem auto 0; max-width: 640px; }
.pv-showcase.has-phone .pv-caption { margin-top: 4.5rem; }
/* Flow graphic: sources -> the record */
.pv-flow { display: grid; grid-template-columns: 1fr auto 1.05fr; align-items: center; gap: 1.75rem; max-width: 1000px; margin: 0 auto 2.75rem; }
.pv-sources { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pv-source { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 10px; padding: .85rem 1rem;
    box-shadow: 0 6px 18px rgba(15,23,42,.06); font-weight: 600; font-size: .92rem; color: var(--color-navy, #0f172a); }
.pv-source svg { flex: none; color: var(--pv-accent); }
.pv-arrow { color: var(--pv-accent); display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pv-record { background: #0f172a; color: #e2e8f0; border-radius: 14px; padding: 1.3rem 1.4rem; box-shadow: 0 24px 50px rgba(15,23,42,.25); }
.pv-record-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.pv-record-head strong { color: #fff; font-size: 1rem; }
.pv-record-head span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--pv-accent); color: #fff; padding: .25rem .55rem; border-radius: 999px; }
.pv-record dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .86rem; }
.pv-record dt { color: #94a3b8; } .pv-record dd { margin: 0; color: #f8fafc; }
@media (max-width: 860px) {
    .pv-flow { grid-template-columns: 1fr; } .pv-arrow { transform: rotate(90deg); }
    .pv-phone { width: 30%; } 
}
/* v1.1 spacing: phones hang ~60px below the screen, caption clears them */
.pv-phone { width: 19%; max-width: 205px; }
.pv-phone.right { right: -3%; bottom: -60px; } .pv-phone.left { left: -3%; bottom: -60px; }
.pv-showcase.has-phone { margin-bottom: 7rem; }
.pv-showcase.has-phone .pv-caption { margin-top: 5.25rem; max-width: 560px; }
/* v1.1 mobile: phones sit under the screen side by side; only the arrow icon turns */
@media (max-width: 860px) {
    .pv-arrow { transform: none; } .pv-arrow svg { transform: rotate(90deg); }
    .pv-showcase.has-phone { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
    .pv-showcase.has-phone .pv-browser { flex: 1 1 100%; }
    .pv-phone, .pv-phone.right, .pv-phone.left { position: static; width: 42%; max-width: 190px; margin-top: .5rem; }
    .pv-showcase.has-phone .pv-caption { flex: 1 1 100%; margin-top: .5rem; order: 9; }
}
/* v1.2 two-up screens + preview badge */
.pv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: 1080px; margin: 0 auto 2.75rem; }
.pv-pair .pv-showcase { margin: 0; }
.pv-pair .pv-caption { margin-top: .9rem; }
.pv-badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--pv-accent); border-radius: 999px; padding: .2rem .65rem; margin-right: .5rem; vertical-align: middle; }
.pv-module-visual { max-width: 1080px; margin: 2.5rem auto 0; padding: 0 1.25rem; }
.pv-module-visual .pv-showcase { margin-bottom: 0; }
@media (max-width: 860px) { .pv-pair { grid-template-columns: 1fr; } }
/* Section links bar under the page hero (standard on every platform page, Kyle 11/1) */
.page-jump { background: #fff; border-bottom: 1px solid rgba(15,23,42,.08); }
.page-jump .container { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding-top: 1rem; padding-bottom: 1rem; }
.page-jump a { font-size: .88rem; font-weight: 600; color: var(--color-navy, #0f172a); text-decoration: none; }
.page-jump a:hover { color: var(--pv-accent); }
main section[id] { scroll-margin-top: 120px; }
/* Proof stats band: up to 4 across on desktop */
@media (min-width: 900px) { .trust-band .trust-stats { flex-wrap: nowrap; gap: 2.5rem; } .trust-band .trust-stats > div { flex: 1 1 0; } }

/* page-jump one line (Kyle 11/1): never wrap; tighter gaps on narrow screens, sideways scroll on small ones */
.page-jump .container { flex-wrap: nowrap; gap: .5rem clamp(.85rem, 1.5vw, 1.75rem); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.page-jump .container::-webkit-scrollbar { display: none; }
.page-jump a { flex: none; }