/* demos.html — gallery of demo websites */
.demos-hero{padding-bottom:1.5rem}
.demos-hero h1{max-width:18ch}
.demos-count{margin:0}

/* filters */
.demos-filters{position:sticky;top:72px;z-index:20;background:rgba(250,249,246,.92);backdrop-filter:saturate(1.4) blur(10px);border-block:1px solid var(--line);padding:.8rem 0}
.demos-filters .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem}
.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.filter-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.pill--icon{display:inline-flex;align-items:center;gap:.4rem}
.pill--icon img{width:18px;height:18px}
@media (max-width:600px){
  .demos-filters{position:static}
  .filter-group .pill-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.25rem;width:100%;scrollbar-width:thin}
  .filter-group{width:100%}
}

/* cards */
.demos-grid-section{padding-top:2.5rem}
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media (max-width:820px){.demo-grid{grid-template-columns:1fr}}
.demo-card{display:flex;flex-direction:column;padding:0;overflow:visible}
.demo-card[hidden]{display:none}
.demo-card__media{position:relative;padding:1.2rem 1.2rem 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(160deg,var(--surface-2),#fbf6ef)}
.demo-card__body{padding:1.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.demo-card__meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.demo-card h3{margin:0;font-size:1.5rem}
.demo-card .niche{font-size:.9rem;color:var(--muted);font-weight:600}
.demo-card p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .4rem}
.chip{font-size:.78rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);border:1px solid transparent}
.chip--niche{background:#fff;border-color:var(--line)}
.demo-card__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.4rem}

/* browser frame */
.browser{border-radius:12px 12px 0 0;background:#fff;box-shadow:0 18px 40px rgba(22,19,31,.14);border:1px solid var(--line);border-bottom:0;overflow:hidden}
.browser__bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .75rem;background:#f4f2f8;border-bottom:1px solid var(--line)}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:#e2ddec;display:block}
.browser__bar i:nth-child(1){background:#ff6b5c}.browser__bar i:nth-child(2){background:#ffc23a}.browser__bar i:nth-child(3){background:#2fcf7a}
.browser__url{margin-left:.5rem;flex:1;height:18px;border-radius:6px;background:#fff;font:600 .68rem/18px var(--font-body);color:var(--muted);padding:0 .6rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shot{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#ece7fb,#fde7de);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left}
.shot__btn:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.shot--empty::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font:600 .95rem var(--font-display);color:var(--muted);text-align:center;padding:1rem}
.shot--empty img{display:none}

/* phone overlapping the corner */
.phone{position:absolute;right:.6rem;bottom:-1.6rem;width:23%;min-width:78px;aspect-ratio:390/844;border-radius:16px;background:#16131f;padding:4px;box-shadow:0 18px 40px rgba(22,19,31,.28);z-index:2}
.phone .shot{border-radius:12px;aspect-ratio:auto;height:100%}
.phone .shot__btn{height:100%}
.phone .shot img{object-fit:cover}
.demo-card__media{padding-bottom:1.9rem}

/* empty state */
.demo-empty{text-align:center;padding:2rem 0}
.demo-empty .btn{margin-left:.5rem}

/* shares & templates callout */
.shares-grid .card p{margin:0}
.templates-callout{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;background:var(--ink);color:var(--on-ink-soft);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,3rem)}
.templates-callout h2{color:var(--on-ink)}
.templates-callout .eyebrow{color:var(--accent-light)}
.templates-callout .lead{color:var(--on-ink-soft)}
.templates-callout__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.templates-callout .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
@media (max-width:760px){.templates-callout{grid-template-columns:1fr}.templates-callout__actions{justify-content:flex-start}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(15,13,22,.78)}
.lightbox__panel{position:relative;width:min(1200px,100%);max-height:100%;background:#fff;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.lightbox__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.lightbox__title{margin:0;font-family:var(--font-display);font-size:1.15rem;color:var(--ink);flex:1 1 auto}
.lightbox__pages,.lightbox__view{display:flex;flex-wrap:wrap;gap:.35rem}
.lightbox__pages .pill,.lightbox__view .pill{padding:.3rem .7rem;font-size:.82rem}
.lightbox__close{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.lightbox__body{overflow:auto;background:#f4f2f8;display:grid;place-items:start center;min-height:200px}
.lightbox__body img{max-width:100%;height:auto}
.lightbox__body.is-phone img{max-width:min(390px,100%)}
@media (max-width:600px){.lightbox{padding:0}.lightbox__panel{border-radius:0;height:100%}}