/* Public app collection; reuse the site's existing light/dark theme variables. */
header nav { gap: 18px; font-size: 13px; }
.app-hub-hero { display:grid; grid-template-columns:1fr 310px; gap:60px; align-items:center; padding:62px 0 40px; }
.app-hub-hero h1 { font-size:clamp(36px,4.2vw,59px); max-width:18ch; line-height:1.08; letter-spacing:-2.4px; margin:20px 0; text-wrap:balance; }
.app-hub-hero > div > p:last-child { max-width:59ch; color:var(--muted); font-size:16px; }
.hub-tutorial-link { border:1px solid var(--line); background:var(--lilac); border-radius:22px; padding:26px; display:grid; gap:13px; align-content:start; }
.hub-tutorial-link > span:first-child { font-size:10px; letter-spacing:1.2px; font-weight:750; }
.hub-tutorial-link strong { font-size:25px; line-height:1.25; letter-spacing:-.7px; }
.hub-tutorial-link > span:last-child { font-size:25px; justify-self:end; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:24px; scroll-margin-top:25px; }
.product-card { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:30px 30px 0; overflow:hidden; display:flex; flex-direction:column; }
.product-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.product-top img { width:64px; height:64px; border-radius:17px; }
.product-top .badge { max-width:65%; line-height:1.5; font-size:10px; }
.product-role { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.2px; font-weight:750; margin:26px 0 7px; }
.product-card h2 { font-size:36px; letter-spacing:-1.4px; line-height:1.15; margin:0 0 16px; }
.product-description { color:var(--muted); margin:0 0 22px; min-height:3.3em; }
.product-features { list-style:none; padding:0; margin:0 0 25px; display:grid; gap:9px; }
.product-features li { font-size:13px; padding-inline-start:20px; position:relative; }
.product-features li::before { content:'↗'; position:absolute; inset-inline-start:0; font-weight:700; }
.product-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-bottom:28px; }
.product-actions .button { font-size:12px; padding:12px 17px; }
.product-forge .product-actions .button:not(.outline) { background:#c8b5ff; color:#201832; border-color:#c8b5ff; }
.product-director .product-actions .button:not(.outline) { background:#d7f45b; color:#14212c; border-color:#d7f45b; }
.product-visual { display:block; margin-inline:-30px; }
.product-visual .art-frame > img { height:205px; width:100%; object-fit:cover; }
.creator-bridge { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:45px; margin:60px 0; padding:36px; background:var(--lilac); border:1px solid var(--line); border-radius:26px; }
.creator-bridge h2 { font-size:30px; line-height:1.2; letter-spacing:-1px; margin:14px 0; }
.creator-bridge p { color:var(--muted); font-size:14px; }
.bridge-links { display:flex; flex-wrap:wrap; gap:12px; }
.bridge-links .button { font-size:12px; }
.detail-intro + .actions { flex-wrap:wrap; }
[dir=rtl] .app-hub-hero h1,[dir=rtl] .product-card h2 { letter-spacing:normal; }
@media(max-width:1000px) { .app-hub-hero { gap:30px; grid-template-columns:1fr 250px; } .product-card { padding:25px 25px 0; } .product-visual { margin-inline:-25px; } }
@media(max-width:700px) {
  .app-hub-hero { grid-template-columns:1fr; gap:15px; padding-top:32px; }
  .app-hub-hero h1 { font-size:clamp(34px,8vw,48px); letter-spacing:-1.6px; }
  .hub-tutorial-link { grid-template-columns:1fr auto; gap:8px 15px; padding:20px; }
  .hub-tutorial-link > span:first-child { grid-column:1/-1; }
  .hub-tutorial-link strong { font-size:20px; }
  .product-grid { grid-template-columns:1fr; }
  .product-card h2 { font-size:32px; }
  .product-visual .art-frame > img { height:auto; aspect-ratio:16/9; }
  .product-description { min-height:0; }
  .creator-bridge { grid-template-columns:1fr; gap:15px; padding:24px; margin:35px 0; }
  header nav { flex-wrap:wrap; gap:12px 20px; }
}

.shot-compare { margin:1rem 0; }
.shot-compare svg { display:block; width:100%; border-radius:14px; }
.shot-compare div { display:flex; justify-content:space-between; font-size:.85rem; }
.shot-compare label, .shot-compare input { display:block; width:100%; }
.shot-compare input { min-height:32px; }
.shot-compare figcaption { color:var(--muted); font-size:.85rem; }