/* The phone mock in the hero (showcase.html). Tokens come from the product theme. */
.ph { width: min(100%, 340px); margin: 0 auto; padding: 18px 16px 22px; border-radius: 34px; background: #0f1416; color: #f5f3ee; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); display: grid; gap: 12px; font-size: 13px; }
.ph-bar { display: flex; justify-content: center; padding: 6px 0 2px; color: rgba(245,243,238,.7); font-size: 12px; letter-spacing: .2px; }
.ph-card { background: #fff; color: #1a1d1f; border-radius: 18px; padding: 14px 14px 12px; display: grid; gap: 10px; }
.ph-card b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.ph-card small { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; opacity: .8; }
.ph-card.accent { background: var(--color-accent-100, #eef3f3); color: var(--color-accent-900, #123); }
.ph-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-tag { border-radius: 999px; padding: 4px 10px; background: #f1efe9; font-size: 12px; }
.ph-tag.hot { background: var(--color-accent-200, #dde); color: var(--color-accent-900, #123); font-weight: 600; }
.ph-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ph-scores span { border: 1px solid #e6e2da; border-radius: 10px; padding: 8px 0; text-align: center; font-size: 11.5px; font-weight: 600; }
.ph-scores span.on { background: var(--color-accent, #1f6f78); border-color: var(--color-accent, #1f6f78); color: #fff; }