/* Pomelu product pages · royan.se/pomelu/
   Loaded after style.css and uses only its tokens. Layouts only: the mascot
   stage, the screenshot grid and the long-form text of privacy/ and support/.
   Pomelu's own purple appears only inside the app imagery. */

/* The icon has transparent corners, so it sits on a tile; a bare
   box-shadow would draw a square behind the mascot. */
.product-id img.icon-tile { background: var(--mist); }

.product-stage--mascot { background: var(--mist); display: grid; place-items: center; min-height: 420px; }
.product-stage--mascot img {
    width: min(100%, 440px); border-radius: 0; box-shadow: none;
    filter: drop-shadow(0 24px 40px rgba(11, 12, 14, 0.16));
}

.availability {
    margin-top: 22px; padding-left: 12px; border-left: 2px solid var(--brand);
    font-weight: 600;
}
.disclaimer { margin-top: 14px; font-size: 0.92rem; color: var(--subtle); max-width: 52ch; }

/* ── Screenshots: four phone captures, then two foldable captures ── */
.phones, .foldable { display: grid; gap: clamp(14px, 2vw, 24px); align-items: start; }
.phones { grid-template-columns: repeat(4, 1fr); }
.foldable { grid-template-columns: 1fr 1fr; margin-top: clamp(28px, 4vw, 48px); }
.phones img, .foldable img {
    width: 100%; height: auto; border-radius: var(--r-lg);
    border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--mist);
}
.phones figcaption, .foldable figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--subtle); text-align: center; }
@media (max-width: 900px) { .phones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .foldable { grid-template-columns: 1fr; } }

/* ── Facts list ──────────────────────────────────────────────────── */
.facts--wide dd { text-align: left; }

/* ── Long-form text (privacy, support) ───────────────────────────── */
.doc-date { font-size: 0.93rem; font-weight: 600; color: var(--subtle); margin-bottom: 18px; }
.prose { max-width: 72ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin: 2.2em 0 0.6em; }
.prose h3 { font-size: 1.08rem; margin: 1.8em 0 0.4em; }
.prose p, .prose li { color: var(--muted); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
/* style.css removes list markers site-wide; prose lists need them back. */
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--subtle); }
.prose a { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.note {
    margin: 0 0 2.4em; padding: 20px 24px; border-left: 3px solid var(--brand);
    background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.prose .note p { color: var(--text); }