/* GENERATED FILE - DO NOT EDIT. Built from site/css/*.css by scripts/build_site_data.py; run: python scripts/build_site_data.py */
:root {
  --cp-bg: #efe9de;
  --cp-bg-elevated: #f8f5ef;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f5f5f5;
  --cp-border: #dedede;
  --cp-border-strong: #919191;
  --cp-text: #242424;
  --cp-text-muted: #5c5c5c;
  --cp-text-soft: #666666;
  --cp-accent: #b11f4b;
  --cp-accent-hover: #9a1a41;
  --cp-accent-soft: #f7e3ea;
  --cp-accent-fg: #ffffff;
  --cp-success: #16a34a;
  --cp-danger: #dc2626;
  --cp-warning: #b45309;
  --cp-link: #0067b8;
  --cp-navbar-bg: rgba(252, 251, 248, 0.82);
  --cp-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
  --cp-radius: 14px;
  --cp-mono: Consolas, "Courier New", Courier, monospace;
  --cp-maxw: 1200px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cp-bg: #151216;
    --cp-bg-elevated: #1d191e;
    --cp-surface: #242026;
    --cp-surface-soft: #302a31;
    --cp-border: #4a414b;
    --cp-border-strong: #8f828f;
    --cp-text: #f5f0f4;
    --cp-text-muted: #d0c6cd;
    --cp-text-soft: #b8adb5;
    --cp-accent: #ff7aa2;
    --cp-accent-hover: #ff97b6;
    --cp-accent-soft: #452532;
    --cp-accent-fg: #261018;
    --cp-success: #7ee2a8;
    --cp-danger: #f5a3a3;
    --cp-warning: #f0b866;
    --cp-link: #72b7f2;
    --cp-navbar-bg: rgba(21, 18, 22, 0.88);
    --cp-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(1100px 520px at 50% -160px, var(--cp-accent-soft), transparent 60%),
    var(--cp-bg);
  color: var(--cp-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cp-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, .mono { font-family: var(--cp-mono); font-size: 0.92em; }

.wrap { max-width: var(--cp-maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--cp-surface);
  border: 1px solid var(--cp-accent);
  border-radius: 8px;
  padding: 8px 14px;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cp-navbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cp-border);
}
.navbar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--cp-text);
  letter-spacing: -0.2px;
}
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; display: block; }
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.nav-links a { color: var(--cp-text-muted); font-size: 0.95rem; }
.nav-links a:hover { color: var(--cp-text); text-decoration: none; }
.nav-links a.gh { color: var(--cp-accent); font-weight: 600; }

/* Plugin switcher: the nav "Marketplace" control links back to the hub and, on hover or keyboard
   focus, opens a flyout of tiles for the OTHER plugins so a reader can jump between plugin pages
   without going through the hub. Pure CSS reveal (a progressive enhancement); the trigger stays a
   working link when hover is unavailable. */
.nav-switcher { position: relative; display: inline-flex; }
.nav-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cp-text-muted);
  font-size: 0.95rem;
}
.nav-switcher-trigger:hover { color: var(--cp-text); text-decoration: none; }
.nav-switcher-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.nav-switcher-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 260px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  box-shadow: var(--cp-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  z-index: 70;
}
/* Transparent bridge over the gap between the trigger and the menu so moving the pointer down
   does not drop the hover and close the flyout. */
.nav-switcher-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-switcher:hover .nav-switcher-menu,
.nav-switcher:focus-within .nav-switcher-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* The hub 'Plugins' dropdown is the FIRST nav item, so its flyout opens to the RIGHT of the
   trigger (left-aligned) rather than the left, keeping it on screen. */
.nav-switcher-start .nav-switcher-menu { left: 0; right: auto; }
.nav-switcher-heading {
  padding: 6px 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text-soft);
}
.switch-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--cp-text);
}
.switch-tile:hover { background: var(--cp-surface-soft); text-decoration: none; }
.switch-tile:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: -1px; }
.switch-tile-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; }
.switch-tile-text { display: flex; flex-direction: column; min-width: 0; }
.switch-tile-name { font-weight: 600; font-size: 0.92rem; }
.switch-tile-sub { color: var(--cp-text-muted); font-size: 0.78rem; }
.switch-tile-all {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--cp-border);
}
.switch-tile-all .switch-tile-name { color: var(--cp-accent); }

/* Hero */
.hero {
  text-align: center;
  padding: 32px 20px 20px;
}
.hero .eyebrow {
  display: inline-block;
  font-family: var(--cp-mono);
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  color: var(--cp-accent);
  background: var(--cp-accent-soft);
  border: 1px solid var(--cp-accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero .eyebrow.spaced { margin-top: 14px; }
/* Identity line (logo + name + version) sits below the CTAs as a single inline pill that
   links to the plugin's source directory on GitHub. */
.hero .eyebrow.identity { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; margin-bottom: 0; text-decoration: none; }
/* On plugin pages the identity pill sits next to the GitHub star button as one centered row. */
.hero .hero-identity { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero .hero-identity .eyebrow.identity { margin-top: 0; }
.hero .hero-identity .gh-star { margin: 0; }
.hero a.eyebrow.identity:hover { border-color: var(--cp-accent); }
.hero a.eyebrow.identity:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 3px; }
.hero .eyebrow.identity .hero-logo { width: 22px; height: 22px; margin: 0; display: inline-block; border-radius: 5px; }
.hero-logo { width: 56px; height: 56px; display: block; margin: 0 auto 6px; }
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}
.hero .accent { color: var(--cp-accent); }
.hero p.lead {
  font-size: 1.15rem;
  color: var(--cp-text-muted);
  max-width: 640px;
  margin: 0 auto 26px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.gh-star { display: inline-flex; align-items: center; min-height: 28px; }

/* Hero plugin pills: a row of quick links under the CTAs, one per plugin, that scroll to that
   plugin's card on the page. */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--cp-border);
  background: var(--cp-surface);
  color: var(--cp-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.hero-pill:hover {
  border-color: var(--cp-accent);
  color: var(--cp-text);
  text-decoration: none;
}
.hero-pill:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid var(--cp-border);
  background: var(--cp-surface);
  color: var(--cp-text);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--cp-border-strong); }
.btn-primary {
  background: var(--cp-accent);
  color: var(--cp-accent-fg);
  border-color: var(--cp-accent);
}
.btn-primary:hover { background: var(--cp-accent-hover); border-color: var(--cp-accent-hover); color: var(--cp-accent-fg); }

/* Sections */
section { padding: 48px 0; }
/* Anchor and nav jumps clear the sticky navbar (SITE-NAV-03): offset each id target's
   top by the navbar height so a jumped-to section or data-anchor sub-heading is not
   hidden behind the sticky navbar. site.js keeps --nav-offset equal to the actual navbar
   height (which wraps taller on narrow viewports); 76px is the static no-JS fallback. */
section[id],
[data-anchor][id] {
  scroll-margin-top: var(--nav-offset, 76px);
}
main > section:nth-of-type(even) {
  background: var(--cp-bg-elevated);
  border-top: 1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border);
}
.section-title {
  font-size: 1.7rem;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.section-sub { color: var(--cp-text-muted); margin-bottom: 26px; }

/* The whole section heading is a link to its own section (wired by site.js: SITE-NAV-01). */
.header-anchor {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.header-anchor:hover {
  color: var(--cp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.header-anchor:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Install command block */
.cmd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #1f1720;
  color: #fbeef2;
  border: 1px solid var(--cp-accent-hover);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--cp-mono);
  font-size: 0.92rem;
  overflow-x: auto;
}
.cmd pre { margin: 0; white-space: pre-wrap; word-break: break-word; flex: 1; }
.cmd .prompt { color: #fd8ea1; user-select: none; }
.cmd .copy-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fbeef2;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
}
.cmd .copy-btn:hover { background: rgba(255, 255, 255, 0.16); }
.cmd .copy-btn.copied { color: #7ee2a8; border-color: rgba(126, 226, 168, 0.5); }
.cmd .copy-btn.copy-failed { color: #ffd7b0; border-color: rgba(255, 175, 120, 0.6); }
.copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A note or callout below the install command block; the margin keeps it off the box. */
.install-note { margin-top: 18px; }

/* Auto-updater cross-sell callout: a clearly-visible, whole-card link with the plugin icon. */
.install-updater-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: var(--cp-accent-soft);
  border: 1px solid var(--cp-accent);
  border-radius: var(--cp-radius);
  text-decoration: none;
  color: var(--cp-text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.install-updater-cta:hover { box-shadow: var(--cp-shadow); transform: translateY(-1px); }
.install-updater-cta:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }
.install-updater-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; }
.install-updater-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.install-updater-title { font-weight: 700; color: var(--cp-accent); font-size: 1.02rem; }
.install-updater-desc { color: var(--cp-text-muted); font-size: 0.9rem; line-height: 1.5; }
.install-updater-desc code { font-family: var(--cp-mono); font-size: 0.85em; }
.install-updater-cue { flex-shrink: 0; color: var(--cp-accent); font-size: 1.4rem; transition: transform 0.15s ease; }
.install-updater-cta:hover .install-updater-cue { transform: translateX(3px); }
@media (max-width: 560px) {
  .install-updater-cta { flex-wrap: wrap; gap: 12px; }
  .install-updater-cue { display: none; }
}

/* Tabbed, split-row install block: one tab per agent (Copilot / Claude / Claude Desktop), with the
   marketplace-add and plugin-install commands on separate rows, each row its own copyable .cmd box.
   The tablist is a segmented control (a bordered tray of pill buttons) so it reads unmistakably as a
   set of clickable tabs, with the active tab filled in the accent colour. */
.install-block { margin-top: 2px; }
.install-tablist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--cp-surface-soft);
  border: 1px solid var(--cp-border);
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 18px;
}
.install-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cp-text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.install-tab:hover {
  color: var(--cp-accent);
  background: var(--cp-surface);
  border-color: var(--cp-border);
}
.install-tab[aria-selected="true"] {
  color: var(--cp-accent-fg);
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  box-shadow: var(--cp-shadow);
}
.install-tab:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }
.install-panel[hidden] { display: none; }
.install-panel,
.install-solo { display: flex; flex-direction: column; gap: 14px; }
.install-row { display: flex; align-items: flex-start; gap: 14px; }
.install-step {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cp-accent);
  color: var(--cp-accent-fg);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-cmd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.install-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text-muted);
}
/* Claude Desktop install panel: a ZIP download plus short import steps (no CLI command to copy). */
.install-download { display: flex; flex-direction: column; gap: 14px; }
.install-download-btn { align-self: flex-start; }
.install-desktop-steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--cp-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.install-desktop-steps code { font-family: var(--cp-mono); font-size: 0.85em; }
@media (max-width: 560px) {
  .install-step { display: none; }
}

/* Card grids */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
}
/* The privacy section has four cards; lay them out 2x2 so there is no orphan third-row card. */
#privacy .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { #privacy .grid { grid-template-columns: 1fr; } }

/* The hub plugins list gives each plugin a full-width row. The card info is a simple vertical stack -
   title/version, then the description (capped to a comfortable measure), then the tags, then the
   Learn more/Source actions, then the install section - each sharing the left edge. The actions are
   a plain left-aligned row directly under the tags (see the shared .plugin-card .foot rule below),
   NOT a boxed column floated to the right of the description, so there is no dead whitespace gap
   between the prose and the buttons (SITE-HUB-09). */
#plugins .grid { grid-template-columns: 1fr; gap: 22px; }
#plugins .plugin-card .desc { max-width: 84ch; }
#plugins .plugin-card .foot .btn { white-space: nowrap; }
.card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  padding: 22px;
  box-shadow: var(--cp-shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--cp-border-strong); }

/* Plugin cards */
.plugin-card { display: flex; flex-direction: column; gap: 12px; position: relative; scroll-margin-top: var(--nav-offset, 76px); }
/* Only a card with a page link is clickable (the .name a::after stretches over the whole card);
   a linkless card (e.g. a plugin with no dedicated page) must not show a misleading pointer. */
.plugin-card:has(.name a[href]) { cursor: pointer; }
.plugin-card .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plugin-card .name { color: var(--cp-text); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.3px; }
.plugin-card .desc { color: var(--cp-text-muted); font-size: 0.95rem; flex: 1; }
.plugin-card .keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.plugin-card .foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* The install/copy block does not navigate, so keep it a text surface, not the card's pointer. */
.plugin-card .cmd { cursor: auto; }
.plugin-card .cmd pre { cursor: text; }

.plugin-card .name a { color: inherit; text-decoration: none; }
.plugin-card .name a:hover { color: var(--cp-accent); text-decoration: underline; }
.plugin-card .name a:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 3px; border-radius: 4px; }
.plugin-card .name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
.plugin-card .desc, .plugin-card .keywords, .plugin-card .cmd, .plugin-card .foot { position: relative; z-index: 2; }
/* SITE-HUB-07: the Learn more button uses the brand accent family but renders as a soft/outlined
   button (accent text and border on a soft accent tint), NOT a solid accent fill, so it is clearly
   distinct from the solid accent-filled active install-agent tab below it (and not the former
   amber). Source stays a plain neutral button. */
.plugin-card .learn-more {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  border-color: var(--cp-accent);
}
.plugin-card .learn-more:hover {
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--cp-surface));
  border-color: var(--cp-accent-hover);
  color: var(--cp-accent);
}

/* SITE-HUB-13: separate the card actions (Learn more/Source) from the install-agent tabs with a
   horizontal rule and extra spacing, so the two button rows do not read as one group. */
#plugins .plugin-card .install {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--cp-border);
}

.mode-card { display: flex; flex-direction: column; }
.mode-card p { flex: 1; }
.mode-sources { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--cp-border); display: flex; flex-direction: column; gap: 8px; }
/* Footnote under the portability cards: explains that the CDN chip is a network dependency. */
.modes-note { margin-top: 20px; color: var(--cp-text-muted); font-size: 0.9rem; line-height: 1.6; }
.modes-note .src { vertical-align: middle; margin-right: 2px; }
.mode-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mode-source dt { color: var(--cp-text-muted); font-size: 0.88rem; font-weight: 600; }
.mode-source dd { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--cp-mono);
  font-size: 0.72rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--cp-text);
  white-space: nowrap;
}
.src::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--cp-border-strong); flex: 0 0 auto; }
.src-folder { background: var(--cp-surface-soft); color: var(--cp-text-muted); border-color: var(--cp-border); }
.src-cdn { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); border-color: var(--cp-warning); }
.src-cdn::before { background: var(--cp-warning); }
.src-inline { background: color-mix(in srgb, var(--cp-success) 18%, transparent); border-color: var(--cp-success); }
.src-inline::before { background: var(--cp-success); }
.src-storage { background: var(--cp-accent-soft); border-color: var(--cp-accent); }
.src-storage::before { background: var(--cp-accent); }
.src-seed { background: color-mix(in srgb, var(--cp-link) 15%, transparent); border-color: var(--cp-link); }
.src-seed::before { background: var(--cp-link); }

.badge {
  display: inline-block;
  font-family: var(--cp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--cp-border);
  color: var(--cp-text-muted);
  background: var(--cp-surface-soft);
}
.badge.version { border-color: var(--cp-accent); color: var(--cp-accent); background: var(--cp-accent-soft); }
.chip {
  font-size: 0.72rem;
  color: var(--cp-text-soft);
  background: var(--cp-surface-soft);
  border: 1px solid var(--cp-border);
  border-radius: 6px;
  padding: 2px 8px;
}

/* Feature list */
.feature h3 { font-size: 1.02rem; margin-bottom: 6px; }
.feature p { color: var(--cp-text-muted); font-size: 0.93rem; }
.card.feature:not(.mode-card) { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 5px; align-items: center; }
.card.feature:not(.mode-card) > h3 { grid-column: 2; margin: 0; }
.card.feature:not(.mode-card) > p,
.card.feature:not(.mode-card) > .feature-credit { grid-column: 1 / -1; }
.feature-icon { width: 20px; height: 20px; margin: 0; color: var(--cp-accent); }
.feature-icon svg { width: 100%; height: 100%; display: block; }
/* Attribution line inside a feature card (for example the vendored deck engine credit). */
.feature-credit { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cp-border); color: var(--cp-text-soft); font-size: 0.8rem; }
.feature-credit a { color: inherit; text-decoration: underline; }
.feature-credit a:hover { color: var(--cp-accent); }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.step { position: relative; padding-left: 46px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cp-accent);
  color: var(--cp-accent-fg);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--cp-mono);
}
.step h3, .step h4 { font-size: 1.02rem; margin-bottom: 4px; }
.step p { color: var(--cp-text-muted); font-size: 0.93rem; }

/* The multi-duck "Pick a model-diverse roster" step lists an example roster in order. The caption is
   scoped under .step so it beats the ".step p" font-size rule above. */
.step .roster-caption { color: var(--cp-text-muted); font-size: 0.86rem; margin: 10px 0 4px; }
.step .roster-list { margin: 0; padding-left: 20px; display: grid; gap: 3px; color: var(--cp-text-muted); font-size: 0.9rem; }
.step .roster-list code { font-size: 0.86em; }

/* Accent callout: a highlighted note that stands out from body prose (e.g. the multi-duck
   "run it more than once" recommendation). */
.callout {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--cp-accent-soft);
  border: 1px solid var(--cp-accent);
  border-left-width: 4px;
  border-radius: var(--cp-radius);
}
.callout-title { margin: 0 0 6px; font-size: 1.05rem; color: var(--cp-accent); }
.callout p { margin: 0; color: var(--cp-text-muted); font-size: 0.95rem; line-height: 1.6; }
/* Hero showcase: a real product screenshot paired with the concrete four-step review loop,
   placed right after the hero (above Install and the feature grid) so the concrete value
   proposition - comment inline, then round-trip to the agent - leads the page instead of being
   buried below Install and the feature grid. A plain <div> (not a <section>) so it does not shift
   the section striping below it. */
/* Vertical padding only - the nested .wrap already provides the 20px horizontal gutter, so
   adding it here too would double the side margins and over-shrink the screenshot on mobile. */
.showcase { padding: 8px 0 8px; }

/* The showcase already keeps a small bottom padding; the following "Why" section otherwise adds its
   full 48px section top padding on top of that, doubling the gap. Halve the gap by trimming the top
   padding of the section that immediately follows the showcase. */
.showcase + #why { padding-top: 20px; }

/* One defined card so the showcase reads as a cohesive, contained unit rather than floating
   loose on the page background. The screenshot sits in a fixed, modest column so it downscales
   (stays crisp on HiDPI/retina screens, where a larger CSS size would upscale and blur) and reads
   as a supporting visual next to the copy. */
.showcase-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  background: var(--cp-bg-elevated);
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 30px 34px;
}

/* Framed screenshot: a subtle browser-chrome mock (dots bar) plus border, rounded corners, and
   a drop shadow so it reads as a polished product shot rather than a raw screengrab. Capped at a
   modest width so its native 1140px source always downscales - never upscales - and stays sharp.
   The frame chrome is intentionally a FIXED light palette (not the --cp-* theme vars) because the
   screenshot inside is always a light-mode capture: a dark-mode dots bar around a white shot reads
   as a broken window, so the whole framed "browser window" stays light in both themes. */
.showcase-shot { margin: 0; min-width: 0; }
.showcase-frame {
  width: 400px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  box-shadow: var(--cp-shadow);
  overflow: hidden;
}
.showcase-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f2f2f2;
  border-bottom: 1px solid #d7d7d7;
}
.showcase-dot { width: 9px; height: 9px; border-radius: 50%; background: #bdbdbd; }
/* Scale down responsively - never a fixed width that could overflow a small screen. */
.showcase-img { display: block; width: 100%; height: auto; }
.showcase-caption {
  margin-top: 10px;
  max-width: 400px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--cp-text-muted);
  text-align: center;
}

.showcase-copy { min-width: 0; }
.showcase-title { margin-bottom: 10px; }
.showcase-lead {
  font-size: 1.05rem;
  color: var(--cp-text-muted);
  margin-bottom: 22px;
}
.showcase-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 24px;
}
.showcase-step { display: flex; gap: 14px; align-items: flex-start; }
.showcase-step-n {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  font-weight: 700;
  font-size: 0.95rem;
}
.showcase-step-body h3 { font-size: 1.02rem; margin-bottom: 2px; }
.showcase-step-body p { color: var(--cp-text-muted); font-size: 0.95rem; }
.showcase-cta { display: inline-flex; }

/* Below ~900px the fixed small image + copy get cramped side by side, so collapse to a single
   centered column early (well before phone width) - the screenshot stacks above the steps. The
   image already scales to 100% width so it never overflows or forces a horizontal scroll. */
@media (max-width: 900px) {
  .showcase { padding: 4px 0 8px; }
  .showcase-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 20px;
    justify-items: center;
  }
  /* Single column: the framed screenshot fills the column but stays capped at its 400px width
     (centered), so it shrinks to fit a narrow phone column without overflowing, yet never GROWS
     past 400px on a wider tablet column (which would exceed the small-image cap and, at ~740px,
     upscale the 1140px source and blur it). */
  .showcase-shot { width: 100%; }
  .showcase-frame { width: 100%; max-width: 400px; margin-inline: auto; }
  .showcase-caption { max-width: 400px; margin-inline: auto; }
  .showcase-copy { width: 100%; }
  .showcase-lead { font-size: 1rem; }
}
/* Demo preview */
.demo-frame {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  overflow: hidden;
  background: var(--cp-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(0, 0, 0, 0.11);
}
.demo-frame .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--cp-surface-soft);
  border-bottom: 1px solid var(--cp-border);
}
.demo-frame .bar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cp-border-strong); }
.demo-frame .bar .demo-fs {
  margin-left: 8px; font-size: 0.78rem; font-weight: 600; line-height: 1;
  color: var(--cp-accent); text-decoration: none;
  border: 1px solid var(--cp-accent); border-radius: 999px; padding: 4px 10px;
  background: var(--cp-accent-soft); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.demo-frame .bar .demo-fs:hover { color: var(--cp-accent-fg); border-color: var(--cp-accent); background: var(--cp-accent); }
.demo-frame .bar .title { margin-left: auto; font-size: 0.82rem; color: var(--cp-text-muted); font-family: var(--cp-mono); }
.demo-frame iframe { width: 100%; height: 420px; border: 0; display: block; background: var(--cp-bg); }
/* The demo frame breaks out of the content column to span the full viewport width; the
   section title, description, and tabs stay in the column above it. */
.demo-frame.full-bleed { border-left: 0; border-right: 0; border-radius: 0; margin-inline: 50px; }
@media (max-width: 720px) { .demo-frame.full-bleed { margin-inline: 16px; } }
.demo-actions { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Changelog */
.changelog { display: flex; flex-direction: column; gap: 18px; }
.changelog .release .rel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.changelog .release h3 { font-size: 1.05rem; font-family: var(--cp-mono); }
.changelog .group-label {
  font-size: 0.74rem;
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cp-accent);
  margin: 10px 0 4px;
}
.changelog ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.changelog li { position: relative; padding-left: 18px; color: var(--cp-text-muted); font-size: 0.93rem; }
.changelog li::before { content: "-"; position: absolute; left: 0; color: var(--cp-accent); }
.changelog .empty { color: var(--cp-text-soft); }
.changelog .older-releases { display: flex; flex-direction: column; gap: 18px; }
.changelog .older-releases > summary {
  cursor: pointer;
  width: fit-content;
  font-family: var(--cp-mono);
  font-size: 0.85rem;
  color: var(--cp-accent);
  list-style: none;
}
.changelog .older-releases > summary::-webkit-details-marker { display: none; }
.changelog .older-releases > summary::before { content: "\25B8  "; }
.changelog .older-releases[open] > summary::before { content: "\25BE  "; }
.changelog .older-releases > summary:hover { text-decoration: underline; }

/* Section blocks (visual separation between home-page sections) */
.section-block {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  padding: 26px 28px;
  box-shadow: var(--cp-shadow);
}
main > section:nth-of-type(even) .section-block { background: var(--cp-bg); }
.prose p { margin-bottom: 12px; color: var(--cp-text); }
.prose p:last-child { margin-bottom: 0; }

/* Tutorial call-to-action: a full-width clickable banner that links to the guided tutorial */
.tutorial-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; text-decoration: none; color: inherit;
}
.tutorial-cta-text h2 { font-size: 1.35rem; margin: 0 0 6px; letter-spacing: -0.4px; }
.tutorial-cta-text p { margin: 0; color: var(--cp-text-muted); font-size: 0.95rem; }
.tutorial-cta-btn { flex: none; }

/* Demo switch: segmented control that flips the iframe between reports */
.demo-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--cp-surface-soft); border: 1px solid var(--cp-border); border-radius: 14px; margin-bottom: 16px; }
.demo-tab { border: 0; background: transparent; color: var(--cp-text-muted); font: inherit; font-size: 0.9rem; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.demo-tab:hover { color: var(--cp-text); }
.demo-tab.active { background: var(--cp-accent); color: var(--cp-accent-fg); }

/* The embedded report keeps a tall frame so its TOC navigation is visible */
.demo-frame iframe { height: 560px; }

/* Review-loop columns (self vs peer) */
.loop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.loop-title { font-size: 1.15rem; margin-bottom: 14px; color: var(--cp-accent); font-family: var(--cp-mono); }
.steps-vertical { grid-template-columns: 1fr; gap: 14px; }

/* Review-loop diagram: an inline, light-only twin of
   plugins/commentable-html/docs/assets/review-loop.svg.
   Styling lives here (not inline) so the page keeps a tight CSP with no 'unsafe-inline'. */
.loop-figure { margin: 0 auto 30px; max-width: 640px; }
.loop-figure svg { display: block; width: 100%; height: auto; }
/* Two renderings of the same self-review loop: a wide horizontal diagram for desktop/tablet and
   a tall vertical one for narrow phones (where the horizontal arrows are too short and the labels
   crowd the boxes). Only one is shown at a time; display:none removes the other from the a11y tree. */
.loop-figure .loop-fig-v { display: none; max-width: 340px; margin-inline: auto; }
.loop-fig-bg { fill: var(--cp-surface); stroke: var(--cp-border); }
.loop-fig-node { fill: var(--cp-bg-elevated); stroke: var(--cp-accent); }
.loop-fig-title { fill: var(--cp-accent); font-family: var(--cp-mono); font-weight: 600; }
.loop-fig-sub { fill: var(--cp-text-muted); }
.loop-fig-arrow { stroke: var(--cp-accent); fill: none; }
.loop-fig-head { fill: var(--cp-accent); }
.loop-fig-badge { fill: var(--cp-accent); }
.loop-fig-badge-num { fill: var(--cp-bg-elevated); font-family: var(--cp-mono); font-weight: 700; }
.why-loop-block { margin-top: 18px; }
.section-block .loop-figure { margin: 4px auto 0; }
.why-mediums { margin-top: 18px; }
.why-sub { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; color: var(--cp-text); }
.compare { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.95rem; }
.compare th, .compare td { text-align: center; padding: 9px 10px; border-bottom: 1px solid var(--cp-border); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { color: var(--cp-text-muted); font-weight: 600; font-size: 0.82rem; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare .compare-hero td { background: var(--cp-accent-soft); color: var(--cp-text); font-weight: 700; }
.compare .compare-hero td:first-child { border-left: 3px solid var(--cp-accent); }
/* On tablet/desktop, pull the comparison table a bit into the section-block's side padding so it
   uses more of the card width instead of sitting inside a wide empty margin. Left untouched on the
   narrow (max-width:640px) card layout below, where each row is already a full-width card. */
@media (min-width: 641px) {
  .compare { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; }
}
/* Verdict pill + good/total score. Inert on desktop (no visual change); the mobile card
   treatment below tints each verdict green/red and reveals the score next to the card title. */
.cmp-v { display: inline; }
.cmp-score { display: none; }
/* Narrow screens: the six-column comparison overflows, so stack each medium as a card and
   label every value with its column name (from data-label). Desktop/tablet is unchanged. */
@media (max-width: 640px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: auto; }
  .compare tr { border: 1px solid var(--cp-border); border-radius: 10px; padding: 6px 14px; margin-bottom: 12px; }
  .compare tbody tr:last-child { margin-bottom: 0; }
  .compare td { border-bottom: 1px solid var(--cp-border); text-align: right; padding: 8px 0; }
  .compare td:last-child { border-bottom: none; }
  .compare td:first-child { text-align: left; font-weight: 700; font-size: 1.05rem; border-bottom: 2px solid var(--cp-border); }
  .compare td[data-label]::before { content: attr(data-label); float: left; font-weight: 600; color: var(--cp-text-muted); padding-right: 12px; }
  .compare .compare-hero td:first-child { border-left: none; }
  .compare .compare-hero { border-color: var(--cp-accent); border-left: 3px solid var(--cp-accent); }
  /* No full-card fill: color only the verdicts (green good, red bad) and show a good/total score. */
  .compare .compare-hero td { background: none; }
  .compare td[data-v] .cmp-v { display: inline-block; padding: 2px 11px; border-radius: 999px; font-weight: 700; }
  .compare td[data-v="good"] .cmp-v { background: color-mix(in srgb, var(--cp-success) 22%, transparent); }
  .compare td[data-v="bad"] .cmp-v { background: color-mix(in srgb, var(--cp-danger) 20%, transparent); }
  .cmp-score { display: inline-block; margin-left: 8px; font-size: 0.8rem; font-weight: 700; color: var(--cp-text-muted); background: var(--cp-surface-soft); border: 1px solid var(--cp-border); border-radius: 999px; padding: 1px 9px; vertical-align: middle; }
  /* On narrow phones, swap the wide horizontal loop diagram for the tall vertical one so its
     labels stay clear of the boxes instead of overlapping them. */
  .loop-figure .loop-fig-h { display: none; }
  .loop-figure .loop-fig-v { display: block; }
}
.why-list { margin: 14px 0 0; padding-left: 20px; }
.why-list li { margin-bottom: 10px; color: var(--cp-text); }
.why-list li:last-child { margin-bottom: 0; }
/* Inline comment-style highlight: mirrors the runtime comment mark (amber) so prose can show
   what commenting "in place" looks like. */
.hl-comment {
  background: rgba(245, 158, 11, 0.32);
  color: inherit;
  padding: 1px 3px;
  border-radius: 2px;
  box-shadow: 0 -1px 0 rgba(245, 158, 11, 0.55) inset;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .hl-comment { background: rgba(251, 191, 36, 0.28); }
}
/* Tutorial page (content generated at build time from TUTORIAL.md) */
.tutorial { max-width: 860px; margin: 0 auto; }
.tutorial h2 { font-size: 1.5rem; margin: 28px 0 10px; letter-spacing: -0.4px; }
.tutorial h3 { font-size: 1.2rem; margin: 22px 0 8px; }
.tutorial > h2:first-child, .tutorial > h3:first-child { margin-top: 0; }
.tutorial p { margin-bottom: 14px; color: var(--cp-text); }
.tutorial ul, .tutorial ol { margin: 0 0 14px 22px; }
.tutorial li { margin-bottom: 6px; color: var(--cp-text); }
.tutorial img { display: block; max-width: 100%; height: auto; margin: 16px 0; border: 1px solid var(--cp-border); border-radius: 10px; box-shadow: var(--cp-shadow); }
/* Content images are clickable to open a full-size lightbox (wired up in site.js). */
.tutorial img { cursor: zoom-in; }

/* Lightbox: a full-viewport overlay that shows a content image at full size. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 40px; height: 40px; line-height: 1;
  font-size: 1.6rem; color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(0, 0, 0, 0.7); }
.tutorial code { background: var(--cp-surface-soft); border: 1px solid var(--cp-border); border-radius: 4px; padding: 1px 5px; font-family: var(--cp-mono); font-size: 0.9em; }
.tutorial pre { background: #1f1720; color: #fbeef2; border: 1px solid var(--cp-accent-hover); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-family: var(--cp-mono); font-size: 0.88rem; margin-bottom: 14px; }
.tutorial pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.tutorial a { color: var(--cp-link); }

/* Footer */
.footer {
  border-top: 1px solid var(--cp-border);
  margin-top: 40px;
  padding: 26px 0 60px;
  color: var(--cp-text-soft);
  font-size: 0.85rem;
}
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer .built { font-family: var(--cp-mono); }

.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-text-muted); font-size: 0.9rem; }

@media (max-width: 720px) {
  .hero { padding-top: 44px; }
  .nav-links { gap: 14px; }
  .nav-links a.hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover, .btn:hover { transform: none; }
}