/* ─────────────────────────────────────────────────────────────────────
 * Shared chrome for /framework/blocks/* index pages.
 * Reuses the tokens + topbar/hero/section shell so every block index
 * inherits the same look as the rest of the framework site.
 * ───────────────────────────────────────────────────────────────────── */

:root {--elev-step:6%;--elev-step-2:13%;--ink-dim-step:0.75;--ink-faint-step:0.66;--line-step:8%;--line-strong-step:16%;
  --bg: #07060f;
  --bg-elev: color-mix(in oklch,var(--bg),var(--ink) var(--elev-step));
  --bg-elev-2: color-mix(in oklch,var(--bg),var(--ink) var(--elev-step-2));
  --line: color-mix(in srgb,transparent,var(--ink) var(--line-step));
  --line-strong: color-mix(in srgb,transparent,var(--ink) var(--line-strong-step));
  --ink: #ece9ff;
  --ink-dim: oklch(from var(--ink) calc(l * var(--ink-dim-step)) c h);
  --ink-faint: oklch(from var(--ink) calc(l * var(--ink-faint-step)) c h);
  --accent: #a78bfa;
  --accent-2: #22d3ee;
  --accent-3: #f472b6;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
}

/* Global focus indicator — keyboard-only visible outline.
 * 2.4.7 / 1.4.11 compliance. Mouse focus stays clean; tab focus shows ring. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Visually hidden, screen-reader accessible — for form labels and skip links. */
.visuallyhidden,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip-to-content link — visually hidden until focused (WCAG 2.4.1). */
.skip-navigation {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--bg-elev);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease-out;
}
.skip-navigation:focus,
.skip-navigation:focus-visible {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .skip-navigation { transition: none; }
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
code, pre { font-family: var(--font-mono); }

.fw-topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.fw-topbar__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 10px 28px; max-width: 1280px; margin: 0 auto;
}
.fw-topbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: 0.02em;
}
.fw-topbar__brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px var(--accent);
}
.fw-topbar__primary {
  display: flex; gap: 18px; color: var(--ink-dim); font-size: 13px;
  flex-wrap: wrap;
}
.fw-topbar__primary a { transition: color 160ms; }
.fw-topbar__primary a:hover { color: var(--ink); }
.fw-topbar__primary a.is-current { color: var(--accent); position: relative; }
.fw-topbar__primary a.is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -12px;
  height: 2px; background: var(--accent);
}

.hero {
  max-width: 1200px; margin: 0 auto; padding: 80px 28px 40px;
}
.hero__eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--accent); margin-bottom: 16px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 200; letter-spacing: -0.03em; line-height: 1.02;
  margin: 0 0 18px; max-width: 22ch;
  background: linear-gradient(120deg, var(--ink), var(--accent) 60%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { color: var(--ink-dim); max-width: 64ch; font-size: 16px; margin: 0; }
.hero__meta {
  margin-top: 18px; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.hero__meta a { color: var(--accent-2); }

section.demo {
  max-width: 1200px; margin: 0 auto; padding: 40px 28px 56px;
  border-top: 1px solid var(--line);
}
.demo__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.demo__num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.demo__title {
  font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 300; letter-spacing: -0.02em; margin: 0;
}
.demo__desc { color: var(--ink-dim); max-width: 64ch; margin: 0 0 28px; }

/* preview frame around the live converted block */
.preview-frame {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 28px;
}

/* <details> blocks */
details.src {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-top: 16px;
  font-family: var(--font-mono); font-size: 12px;
}
details.src > summary {
  cursor: pointer; padding: 10px 14px; color: var(--ink-dim);
  user-select: none;
}
details.src > summary:hover { color: var(--ink); }
details.src[open] > summary { border-bottom: 1px solid var(--line); color: var(--accent-2); }
details.src pre {
  margin: 0; padding: 14px; overflow-x: auto;
  color: var(--ink-dim); line-height: 1.55; font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
}

/* ── Imported-block primitives (im-*) ─────────────────────────────── */
.im-block {
  position: relative;
  /* Default layout when no category-specific override applies. */
  display: flex;
  flex-direction: column;
}
/* Direct children need an explicit width. A flex item that also carries
   `container-type: inline-size` (the cosmic/flare blocks' inner section)
   would otherwise let size-containment collapse it to min-content — the
   block renders as a thin sliver. `width: 100%` gives a definite size. */
.im-block > * { width: 100%; }
.im-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2cqi, 48px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.08;
  margin: 0; color: var(--ink);
}
/* Scope down headings inside imported blocks so item-level h2/h3/h4
   (a name in a card, a product label) don't read as page-display text.
   The hero/section level is governed by `.hero__title` + `.demo__title`,
   not `.im-heading`, so this only narrows the in-block scale. */
.im-block .im-heading {
  font-size: clamp(20px, 2.5cqi, 32px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.im-block h1.im-heading {
  font-size: clamp(28px, 4cqi, 44px);
}
/* For nav and card-shaped items the heading reads even smaller. */
.im-block .im-card .im-heading,
.im-block[data-cat="nav"] .im-heading,
.im-block[data-cat="teams"] .im-heading,
.im-block[data-cat="products"] .im-heading,
.im-block[data-cat="testimonials"] .im-heading,
.im-block[data-cat="blog"] .im-heading {
  font-size: clamp(16px, 1.6cqi, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.im-text {
  color: var(--ink-dim);
  font-size: 15px; line-height: 1.55; margin: 0;
  max-width: 60ch;
}
.im-form {
  display: inline-flex; gap: 8px; align-items: stretch;
  flex-wrap: wrap;
}
.im-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 16%, var(--bg-elev-2));
  color: var(--accent); font-size: 16px;
}
.im-star { color: var(--accent-2); font-size: 18px; letter-spacing: 2px; }
.im-slot {
  padding: 8px 12px; border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); color: var(--ink-faint); font-size: 13px;
  font-family: var(--font-mono);
}

/* ── Minimal placeholders for `lsd-*` primitives referenced by
       imported blocks. The full primitives ship via the framework
       runtime, but these baseline styles let pages render before any
       framework CSS is loaded. ─────────────────────────────────────── */
.lsd-frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
}
.lsd-frame--shadowed { box-shadow: 0 18px 48px -28px rgba(0,0,0,0.65); }
.lsd-frame--magazine { border-radius: 2px; }
.lsd-aspect { display: block; width: 100%; }
.lsd-aspect--16-9 { aspect-ratio: 16 / 9; }
.lsd-aspect--4-3  { aspect-ratio: 4 / 3; }
.lsd-aspect--1-1  { aspect-ratio: 1 / 1; }
.lsd-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent) 25%, var(--bg-elev-2)),
    color-mix(in oklch, var(--accent-3) 20%, var(--bg-elev-2)));
}
/* Cap full-bleed placeholder/frame heights. The `aspect-ratio: 16/9 × width: 100%`
   combo computes to ~620px tall in 1100px previews — overriding via max-width
   constrains the BOX, which then constrains height through the aspect ratio. */
.lsd-img-placeholder {
  max-height: 220px;
}
.lsd-frame.lsd-aspect,
.lsd-frame {
  max-width: 480px;
  max-height: 240px;
  margin-inline: auto;
}
.lsd-frame.lsd-aspect.lsd-aspect--1-1 {
  max-width: 200px;
  max-height: 200px;
}
.lsd-frame.lsd-aspect.lsd-aspect--3-4,
.lsd-frame.lsd-aspect.lsd-aspect--4-5 {
  max-width: 220px;
  max-height: 280px;
}
/* Unwrapped placeholder fallback (no `.lsd-aspect--*` modifier). */
.lsd-frame:not([class*="lsd-aspect--"]) {
  aspect-ratio: 16 / 9;
  max-height: 220px;
}
.lsd-img-placeholder--warm {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent-3) 30%, var(--bg-elev-2)),
    color-mix(in oklch, var(--accent) 20%, var(--bg-elev-2)));
}
.lsd-img-placeholder--cool {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent-2) 30%, var(--bg-elev-2)),
    color-mix(in oklch, var(--accent) 20%, var(--bg-elev-2)));
}
.lsd-img-placeholder--neutral {
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev));
}

.lsd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  line-height: 1; letter-spacing: 0.01em;
  background: var(--accent); color: #0a0716;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 180ms cubic-bezier(0.22,1,0.36,1),
              background 180ms;
}
.lsd-btn.weight-primary { background: var(--accent); color: #0a0716; }
.lsd-btn.weight-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
}
.lsd-btn.weight-outlined {
  background: transparent; color: var(--accent); border-color: var(--accent);
}

.lsd-input {
  font-family: var(--font-sans); font-size: 14px;
  padding: 10px 14px;
  background: var(--bg-elev-2); color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  min-width: 220px;
  transition: border-color 180ms, background 180ms;
}
.lsd-input--outlined {
  background: transparent; border-color: var(--line-strong);
}
.lsd-input:focus { outline: none; border-color: var(--accent); }
.lsd-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

.lsd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-elev-2));
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.lsd-chip--ghost {
  background: transparent;
  color: var(--ink-faint);
}

/* ── Card-list (used by category indexes) ─────────────────────────── */
.im-list {
  container-type: inline-size; container-name: im-list;
  max-width: 1280px; margin: 0 auto; padding: 16px 28px 80px;
}
.im-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@container im-list (min-width: 560px)  { .im-grid { grid-template-columns: repeat(2, 1fr); } }
@container im-list (min-width: 880px)  { .im-grid { grid-template-columns: repeat(3, 1fr); } }
@container im-list (min-width: 1180px) { .im-grid { grid-template-columns: repeat(4, 1fr); } }

.im-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 180ms, transform 180ms;
}
.im-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.im-card__kind {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.im-card__name {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  margin: 0; color: var(--ink);
}
.im-card__meta {
  display: flex; gap: 12px; font-size: 12px; color: var(--ink-faint);
  font-family: var(--font-mono); margin-top: auto;
}
.im-card__meta a { color: var(--accent-2); }
.im-card__count { color: var(--accent); }

.im-thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--bg-elev-2);
  background-size: cover; background-position: center;
  border: 1px solid var(--line);
}

.foot {
  max-width: 1200px; margin: 24px auto 0; padding: 32px 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 13px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.foot a { color: var(--accent-2); }

/* ─── Category-aware layouts for imported blocks ─────────────────────
 * Imported wireframes flatten into a single column of `.im-*` children
 * by default. These rules pick a sensible layout per category so the
 * preview reads as a real block, not a vertical placeholder list.
 * Triggered by `data-cat="<key>"` on the .im-block wrapper.
 * ──────────────────────────────────────────────────────────────────── */

/* Common: full-width headings inside a multi-col grid */
.im-block[data-cat] .im-heading,
.im-block[data-cat] > h2.im-heading,
.im-block[data-cat] > h3.im-heading {
  grid-column: 1 / -1;
}
.im-block[data-cat] > .im-text:first-of-type { grid-column: 1 / -1; }

/* HEROES — split if image present, otherwise centered text + buttons */
.im-block[data-cat="heroes"] {
  text-align: center; align-items: center;
  padding-block: 64px;
}
.im-block[data-cat="heroes"] .im-heading {
  font-size: clamp(36px, 5.6cqi, 64px);
  max-width: 22ch;
}
.im-block[data-cat="heroes"] .im-text { max-width: 56ch; }
.im-block[data-cat="heroes"] .lsd-frame { max-width: 100%; width: 100%; }
@container im-block (min-width: 720px) {
  .im-block[data-cat="heroes"]:has(.lsd-frame) {
    display: grid; grid-template-columns: 1fr 1fr;
    text-align: start; align-items: center; gap: 40px;
  }
  .im-block[data-cat="heroes"]:has(.lsd-frame) .lsd-frame { grid-row: span 10; }
}

/* CTA — centered banner, prominent button */
.im-block[data-cat="cta"] {
  text-align: center; align-items: center;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-elev));
  border-radius: var(--r-lg);
  padding: 56px 28px;
}
.im-block[data-cat="cta"] .im-heading { max-width: 28ch; }
.im-block[data-cat="cta"] .im-text { max-width: 56ch; }
.im-block[data-cat="cta"] .lsd-btn { font-size: 16px; padding: 14px 28px; }

/* FOOTERS — 4-col grid with top border */
.im-block[data-cat="footers"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 32px;
  border-top: 1px solid var(--line);
  padding-block: 56px;
}
@container im-block (min-width: 560px) {
  .im-block[data-cat="footers"] { grid-template-columns: repeat(2, 1fr); }
}
@container im-block (min-width: 880px) {
  .im-block[data-cat="footers"] { grid-template-columns: repeat(4, 1fr); }
}
.im-block[data-cat="footers"] .im-text { font-size: 14px; }
.im-block[data-cat="footers"] > .im-text:nth-of-type(4n+1) {
  font-weight: 600; color: var(--ink); letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 12px;
}

/* PRICING — 3-tier card grid */
.im-block[data-cat="pricing"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="pricing"] { grid-template-columns: repeat(3, 1fr); }
}
.im-block[data-cat="pricing"] > .im-heading,
.im-block[data-cat="pricing"] > .im-text:first-of-type { text-align: center; }
.im-block[data-cat="pricing"] > .lsd-btn { justify-self: stretch; }
.im-block[data-cat="pricing"] .im-icon {
  width: 22px; height: 22px; font-size: 12px;
}

/* TEAMS — avatar grid */
.im-block[data-cat="teams"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center; align-items: start;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="teams"] { grid-template-columns: repeat(4, 1fr); }
}
.im-block[data-cat="teams"] .lsd-frame {
  border-radius: 50%; aspect-ratio: 1 / 1; max-width: 160px; margin-inline: auto;
}
.im-block[data-cat="teams"] .lsd-aspect { aspect-ratio: 1 / 1; }
.im-block[data-cat="teams"] .im-text { text-align: center; }

/* TESTIMONIALS — quote card grid */
.im-block[data-cat="testimonials"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="testimonials"] { grid-template-columns: repeat(2, 1fr); }
}
@container im-block (min-width: 1024px) {
  .im-block[data-cat="testimonials"] { grid-template-columns: repeat(3, 1fr); }
}
.im-block[data-cat="testimonials"] .im-text {
  padding: 20px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); font-style: italic;
}
.im-block[data-cat="testimonials"] .lsd-frame {
  border-radius: 50%; aspect-ratio: 1 / 1; width: 48px;
}
.im-block[data-cat="testimonials"] .im-star { display: inline-block; }

/* FORMS — centered card */
.im-block[data-cat="forms"] {
  max-width: 560px; margin-inline: auto;
  padding: 32px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  align-items: stretch;
}
.im-block[data-cat="forms"] .lsd-input { width: 100%; min-width: 0; }
.im-block[data-cat="forms"] .lsd-btn { align-self: stretch; }
.im-block[data-cat="forms"] .im-heading { text-align: center; }

/* GALLERIES — image grid */
.im-block[data-cat="galleries"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="galleries"] { grid-template-columns: repeat(3, 1fr); }
}
@container im-block (min-width: 1024px) {
  .im-block[data-cat="galleries"] { grid-template-columns: repeat(4, 1fr); }
}
.im-block[data-cat="galleries"] .lsd-frame { width: 100%; }

/* PRODUCTS — image-top product cards */
.im-block[data-cat="products"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="products"] { grid-template-columns: repeat(3, 1fr); }
}
@container im-block (min-width: 1024px) {
  .im-block[data-cat="products"] { grid-template-columns: repeat(4, 1fr); }
}
.im-block[data-cat="products"] .lsd-frame { aspect-ratio: 4 / 5; }
.im-block[data-cat="products"] .im-text { font-size: 14px; }

/* FEATURES — 3-col icon grid */
.im-block[data-cat="features"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="features"] { grid-template-columns: repeat(3, 1fr); }
}
.im-block[data-cat="features"] .im-icon {
  width: 44px; height: 44px; font-size: 20px;
}

/* FAQS — single-column accordion-feel */
.im-block[data-cat="faqs"] {
  max-width: 760px; margin-inline: auto;
}
.im-block[data-cat="faqs"] .im-text {
  padding: 16px 20px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* BLOG — article card grid */
.im-block[data-cat="blog"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="blog"] { grid-template-columns: repeat(3, 1fr); }
}
.im-block[data-cat="blog"] .lsd-frame { aspect-ratio: 16 / 10; }

/* NAV — horizontal bar */
.im-block[data-cat="nav"] {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-elev); border-radius: var(--r-md);
}
.im-block[data-cat="nav"] .im-heading {
  font-size: 18px; margin: 0; flex: 0 0 auto;
}
.im-block[data-cat="nav"] .im-text { margin: 0; font-size: 14px; }

/* STATS — 4-col big-number grid */
.im-block[data-cat="stats"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  text-align: center;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="stats"] { grid-template-columns: repeat(4, 1fr); }
}

/* BANNERS — full-width strip */
.im-block[data-cat="banners"] {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 16px;
  padding: 18px 28px;
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-elev));
  border-radius: var(--r-md);
  text-align: center;
}
.im-block[data-cat="banners"] .im-heading { font-size: 20px; }
.im-block[data-cat="banners"] .im-text { margin: 0; }

/* CARDS — masonry-ish grid */
.im-block[data-cat="cards"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@container im-block (min-width: 720px) {
  .im-block[data-cat="cards"] { grid-template-columns: repeat(3, 1fr); }
}

/* TIMELINES — vertical with left rail */
.im-block[data-cat="timelines"] {
  position: relative;
  padding-inline-start: 28px;
  border-inline-start: 2px solid var(--line-strong);
  max-width: 760px; margin-inline: auto;
}
.im-block[data-cat="timelines"] > * { position: relative; }

/* CONTENT — readable column */
.im-block[data-cat="content"] {
  max-width: 760px; margin-inline: auto;
}

/* BACKGROUNDS — minimal canvas (renders only deco) */
.im-block[data-cat="backgrounds"] {
  min-height: 360px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-2);
  position: relative; overflow: hidden;
}

/* COMPONENTS-SHOWCASE — single feature centered */
.im-block[data-cat="components-showcase"] {
  text-align: center; align-items: center;
  padding: 56px 28px;
  max-width: 720px; margin-inline: auto;
}

/* Re-establish an inline-size container so the @container queries above
   resolve against the wrapper itself (the converter already sets
   container-type: inline-size; we just want a stable name). */
.im-block[data-cat] { container-name: im-block; }

/* Shape-rendered imports (rendered via the per-category shape library)
   declare their typography in `cqi` units so headlines scale to the
   BLOCK's inline-size, not the viewport. Establish the inline-size
   container right at the wrapper so cqi/cqw resolve. */
.im-block--shape { container-type: inline-size; }

/* ─── Slot-cluster groups (the converter wraps a detected repeating
       slot pattern in an `.im-cluster` so two-or-more people / products /
       posts read as separate cards rather than one flat-stacked list.) */
.im-block .im-cluster {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--bg-elev-2, color-mix(in oklch, var(--bg-elev) 60%, transparent));
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--r-md);
  text-align: start;
  transition: border-color 220ms, transform 220ms;
}
.im-block .im-cluster:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.im-block .im-cluster .lsd-frame { width: 100%; }
/* In a flat-stacked content column, drop the duplicate top-margin between
   adjacent clusters — the parent gap already provides separation. */
.im-block[data-cat="content"] .im-cluster + .im-cluster { margin-block-start: 0; }
.im-block[data-cat="teams"] .im-cluster { text-align: center; padding: 16px; }
.im-block[data-cat="teams"] .im-cluster .lsd-frame {
  max-width: 160px; margin-inline: auto;
}
.im-block[data-cat="products"] .im-cluster,
.im-block[data-cat="blog"] .im-cluster,
.im-block[data-cat="testimonials"] .im-cluster { padding: 16px; }
.im-block[data-cat="content"] .im-cluster {
  background: var(--bg-elev);
}
/* When the parent already declares a grid (teams / products / blog /
   testimonials / pricing / cards / galleries / features), .im-cluster
   children flow into the grid as cards. For content + faqs (single
   column readable layouts) clusters still stack — the gap on the parent
   does the work. */