/* AppHub "default" theme: optional landing blocks (platform badges, who it is for, grouped
   features, screenshot gallery, "coming soon" download state). Loaded only by apps that use
   one of them, so existing sites are untouched. No inline styles needed (strict CSP). */

/* Platforms row ---------------------------------------------------------------- */
.platforms { padding: 8px 0 40px; }
.platforms-title { text-align: center; color: var(--muted); font-size: .85rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.platform-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.platform-badges li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); }
.pb-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pb-text { font-size: .95rem; line-height: 1.25; }
.pb-text .muted { font-size: .85rem; }

/* Audience ---------------------------------------------------------------- */
.audience { display: flex; flex-wrap: wrap; justify-content: center; }
.audience .card { flex: 1 1 300px; }
@media (min-width: 980px) { .audience .card { flex: 0 1 calc((100% - 32px) / 3); } }
.audience .card h3 { margin-bottom: .35em; }

/* Feature groups ---------------------------------------------------------------- */
.fgroup + .fgroup { margin-top: 56px; }
.fgroup-head { margin-bottom: 20px; }
.fgroup-head h3 { font-size: 1.5rem; margin-bottom: .2em; }
.fgroup-head p { margin: 0; }
.card.compact { padding: 20px; }
.card.compact h4 { font-size: 1.02rem; font-weight: 650; margin: 0 0 .35em; letter-spacing: -.01em; line-height: 1.3; }
.card.compact .icon { width: 38px; height: 38px; margin-bottom: 10px; }
.card.compact .pill { margin-left: 6px; vertical-align: middle; }

/* Screenshot gallery (designed placeholders until real screenshots exist) ---------------------------------------------------------------- */
.gallery { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 860px) { .gallery { grid-template-columns: 3fr 2fr 1fr; } }
.shot { margin: 0; }
.shot figcaption { margin-top: 12px; text-align: center; font-size: .92rem; }
.shot figcaption .muted { display: block; font-size: .85rem; }
.frame { border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.frame img { display: block; width: 100%; height: auto; }
.shot-mac .frame { border-radius: 12px; border-top-width: 22px; aspect-ratio: 16 / 10; position: relative; }
.shot-ipad .frame { border-radius: 20px; border-width: 8px; aspect-ratio: 4 / 3; }
.shot-iphone .frame { border-radius: 28px; border-width: 7px; aspect-ratio: 9 / 19; max-width: 220px; margin: 0 auto; }
@media (max-width: 859px) { .shot-iphone .frame { max-width: 180px; } }
.screen { height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background:
  repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--accent) 6%, transparent) 14px 15px), var(--bg-soft); }
.screen-bar { display: flex; gap: 6px; }
.screen-bar i { width: 36px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.screen-bar i:first-child { width: 56px; background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.screen-note { font-size: .85rem; font-weight: 650; color: var(--muted); padding: 5px 12px; border: 1px dashed var(--border); border-radius: 999px; background: var(--card); text-align: center; }

/* Coming soon ---------------------------------------------------------------- */
.btn-soon { cursor: default; box-shadow: none; opacity: .72; background-image: none; }
.btn-soon:hover { transform: none; }
.btn-primary.btn-soon { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.btn-ghost.btn-soon { border-style: dashed; color: var(--muted); }
.soon-note { margin-top: 14px; font-size: .9rem; }
.soon-card .btn-row { margin-top: 18px; }