/* ==========================================================================
   Demo skin — Launchpad (header 11 · Pitch Deck grid · single 15)
   SaaS-blog clean: dotted launch panel headers, dot chips, card rows,
   pill buttons and mono counters.
   ========================================================================== */
html[data-demo="launchpad"] {
    --sk-radius: 18px; --sk-field-radius: 12px; --sk-btn-radius: 999px;
    --sk-head-align: left;
    --sk-head-bg: transparent;
    --sk-label-font: 'Manrope', var(--font-body), sans-serif; --sk-label-size: 12.5px; --sk-label-weight: 700; --sk-label-ls: 0; --sk-label-tt: none;
    --sk-title-weight: 800; --sk-title-ls: -0.04em;
    --sk-btn-tt: none; --sk-btn-ls: 0;
    --sk-line: color-mix(in srgb, var(--text-main) 10%, transparent);
    --sk-tint: color-mix(in srgb, var(--accent) 7%, var(--bg-body));
    --sk-tint-2: color-mix(in srgb, var(--accent) 14%, var(--bg-body));
    --sk-soft: var(--bg-body);
    --sk-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-demo="launchpad"][data-theme="dark"] { --sk-line: color-mix(in srgb, var(--text-main) 13%, transparent); --sk-tint: color-mix(in srgb, var(--accent) 9%, var(--bg-body)); --sk-tint-2: color-mix(in srgb, var(--accent) 18%, var(--bg-body)); }
html[data-demo="launchpad"] :is(.archive-title, .author-name, .comments-title, .comment-reply-title, .classic-article-row .headline, .vt-grid-circle h3, .vt-grid-square h3, .error-title) { font-family: 'Manrope', var(--font-heading), sans-serif; }

/* --- Archive header: dotted launch panel card --- */
html[data-demo="launchpad"] .archive-header { padding: 28px 0 8px; border-bottom: 0; overflow: visible; }
html[data-demo="launchpad"] .archive-header .container {
    position: relative; overflow: hidden; width: auto; max-width: min(1240px, calc(100% - 40px)); margin-inline: auto; padding: 56px 52px 54px; border: 1px solid var(--sk-line); border-left: 1px solid var(--sk-line); border-radius: 26px;
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 28%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(120deg, var(--sk-tint), var(--bg-body) 72%);
}
html[data-demo="launchpad"] .archive-header .container::after { content: ''; position: absolute; top: -160px; right: -60px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%); pointer-events: none; }
html[data-demo="launchpad"] .archive-label { gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--sk-tint-2); }
html[data-demo="launchpad"] .archive-label::before { width: 7px; height: 7px; border-radius: 50%; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
html[data-demo="launchpad"] .archive-label::after { display: none; }
html[data-demo="launchpad"] .archive-title { position: relative; z-index: 1; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); }
html[data-demo="launchpad"] .archive-desc { position: relative; z-index: 1; max-width: 560px; font-size: 1.08rem; }
html[data-demo="launchpad"] .author-hero-section { background: linear-gradient(180deg, var(--sk-tint), var(--bg-body)); }

/* --- Lists: dot chips, card rows --- */
html[data-demo="launchpad"] .category-tag,
html[data-demo="launchpad"] .card-cat { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--sk-tint-2); color: var(--accent-text, var(--accent)) !important; font: 700 11.5px/1 'Manrope', var(--font-body), sans-serif; letter-spacing: 0; text-transform: none; }
html[data-demo="launchpad"] .category-tag::before,
html[data-demo="launchpad"] .card-cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-demo="launchpad"] .article-card { border-color: var(--sk-line); border-radius: 18px; padding: 10px; transition: transform .25s, box-shadow .25s; }
html[data-demo="launchpad"] .article-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--accent) 50%, transparent); }
html[data-demo="launchpad"] .article-card .card-thumb, html[data-demo="launchpad"] .article-card .card-thumb img { border-radius: 12px; overflow: hidden; }
html[data-demo="launchpad"] .classic-article-row { margin-bottom: 16px; padding: 18px; border: 1px solid var(--sk-line); border-radius: 18px; background: var(--bg-body); transition: border-color .2s, box-shadow .25s; }
html[data-demo="launchpad"] .classic-article-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--sk-line)); box-shadow: 0 20px 40px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-demo="launchpad"] .classic-article-row .headline { font-weight: 800; letter-spacing: -.025em; }
html[data-demo="launchpad"] .classic-article-row .headline a:hover { color: var(--accent-text, var(--accent)); }
html[data-demo="launchpad"] .classic-meta-time { font: 600 12px/1.4 var(--sk-mono); letter-spacing: 0; color: var(--text-muted); }
html[data-demo="launchpad"] .classic-thumb, html[data-demo="launchpad"] .classic-thumb img { border-radius: 12px; }

/* --- Load more / pagination --- */
html[data-demo="launchpad"] .load-more-btn { padding: 13px 24px; border: 0; background: var(--text-main); color: var(--bg-body); font-size: 14px; }
html[data-demo="launchpad"] .load-more-btn:hover { background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); }
html[data-demo="launchpad"] .ep-pagination.numeric-pagination a,
html[data-demo="launchpad"] .ep-pagination.numeric-pagination span { border-color: var(--sk-line); font-family: var(--sk-mono); font-weight: 600; }
html[data-demo="launchpad"] .ep-pagination.numeric-pagination a:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }

/* --- Comments: clean cards --- */
html[data-demo="launchpad"] .comments-area { border-color: var(--sk-line); border-radius: 22px; }
html[data-demo="launchpad"] .comment-reply-title::after { display: none; }
html[data-demo="launchpad"] .comments-title::after { width: 8px; height: 8px; border-radius: 50%; left: auto; right: auto; position: relative; display: inline-block; margin-left: 8px; bottom: 2px; box-shadow: 0 0 0 4px var(--sk-tint-2); }
html[data-demo="launchpad"] .comments-title, html[data-demo="launchpad"] .comment-reply-title { padding-bottom: 6px; }
html[data-demo="launchpad"] .comment-content-wrap { border: 1px solid var(--sk-line); border-radius: 4px 18px 18px 18px; background: var(--bg-body); box-shadow: 0 14px 30px -26px rgba(17, 24, 39, .45); }
html[data-demo="launchpad"] .comment-author { font-weight: 800; }
html[data-demo="launchpad"] .comment-date { font: 500 11.5px/1.4 var(--sk-mono); }
html[data-demo="launchpad"] .comment-reply-link { padding: 4px 10px; border-radius: 999px; background: var(--sk-tint-2); color: var(--accent-text, var(--accent)); font-weight: 700; }
html[data-demo="launchpad"] :is(.comment-form, #commentform) :is(textarea, input[type="text"], input[type="email"], input[type="url"]) { border-color: var(--sk-line); background: color-mix(in srgb, var(--text-main) 3%, var(--bg-body)); }
html[data-demo="launchpad"] .submit-btn { padding: 14px 26px; font-size: 14px; }

/* --- Taxonomy circles --- */
html[data-demo="launchpad"] .vt-grid-circle h3 { font-weight: 800; letter-spacing: -.02em; }
html[data-demo="launchpad"] .vt-circle-img { box-shadow: 0 0 0 4px var(--bg-body), 0 0 0 5px var(--sk-line); }
html[data-demo="launchpad"] .vt-grid-circle a:hover .vt-circle-img { box-shadow: 0 0 0 4px var(--bg-body), 0 0 0 6px var(--accent), 0 20px 40px -18px color-mix(in srgb, var(--accent) 60%, transparent); }

@media (max-width: 768px) {
    html[data-demo="launchpad"] .archive-header { padding: 16px 0 0; }
    html[data-demo="launchpad"] .archive-header .container { max-width: calc(100% - 32px); padding: 36px 22px; border-radius: 20px; }
    html[data-demo="launchpad"] .classic-article-row { padding: 14px; }
}