/* === Design tokens === */
:root {
  --bg: #ffffff;
  --bg-muted: #f6f7f9;
  --bg-card: #ffffff;
  --border: #e7e9ee;
  --border-strong: #d4d7df;
  --text: #1a1d23;
  --text-muted: #5b6270;
  --text-soft: #8a909d;
  --accent: #4f46e5;
  --accent-hover: #3f37c9;
  --accent-soft: #eef0ff;
  --shadow-sm: 0 1px 2px rgba(20, 23, 30, 0.04), 0 1px 1px rgba(20, 23, 30, 0.03);
  --shadow-md: 0 6px 16px rgba(20, 23, 30, 0.06), 0 2px 4px rgba(20, 23, 30, 0.04);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --maxw: 1140px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Charter", Georgia, serif;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.4em; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* === Header === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 64px;
}
.brand { display: inline-flex; align-items: center; }
.brand-mark {
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 20px; color: var(--text);
}
.brand-mark-large { font-size: 36px; }
.site-nav {
  display: flex; gap: 24px; margin-left: 16px; flex: 1;
}
.site-nav a {
  color: var(--text-muted); font-weight: 500; font-size: 15px;
}
.site-nav a:hover { color: var(--text); }

/* === Lang switcher === */
.lang-switcher { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 6px 10px;
  cursor: pointer; color: var(--text);
  font-size: 13px; font-weight: 600;
}
.lang-current:hover { border-color: var(--text-muted); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  list-style: none; padding: 6px; margin: 0;
  min-width: 140px;
  /* A help page can list many languages (an app's whole help-language set). Cap the
     menu to the viewport and scroll so the bottom entries are never cut off. Keep it
     tall enough that the full set still fits in TWO columns: with the cap too low a
     single trailing language spilled into a lonely 3rd column, and since overflow-y
     forces overflow-x to auto, that lone column added a horizontal scrollbar. */
  max-height: min(85vh, 580px); overflow-y: auto; overscroll-behavior: contain;
  display: none;
}
/* Long lists (set by the switcher when > 12 languages) flow into two columns so the
   menu stays short instead of a tall single column. Each entry is kept whole. */
.lang-menu--cols { columns: 2; column-gap: 4px; min-width: 300px; }
.lang-menu--cols li { break-inside: avoid; }
.lang-switcher:hover .lang-menu,
.lang-switcher:focus-within .lang-menu { display: block; }
.lang-menu a {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px;
}
.lang-menu a:hover { background: var(--bg-muted); }
.lang-menu a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px;
  border-radius: var(--radius-md);
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn[disabled] { cursor: not-allowed; opacity: 0.6; transform: none; }
.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

/* === Hero === */
.hero {
  text-align: center;
  padding: 96px 0 72px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-muted) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 760px; }
.hero-logo { margin-bottom: 24px; }
.hero-headline {
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero-subheadline {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-muted);
  max-width: 600px; margin: 0 auto 32px;
}
.hero-ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* === Category sections === */
.category {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.category:last-of-type { border-bottom: none; }
.category-head { text-align: center; margin-bottom: 48px; }
.category-title { font-size: 32px; margin-bottom: 8px; }
.category-intro { color: var(--text-muted); max-width: 540px; margin: 0 auto; }

/* === Product grid === */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.product-card {
  display: flex; gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.product-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.product-card-icon img { width: 64px; height: 64px; border-radius: 14px; }
.product-card-body { flex: 1; min-width: 0; }
.product-card-head {
  display: flex; align-items: flex-start; gap: 8px; justify-content: space-between;
  margin-bottom: 6px;
}
.product-card-name { font-size: 17px; margin: 0; }
.product-card-type {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-muted); color: var(--text-muted);
  white-space: nowrap;
}
.product-card-tagline {
  font-size: 14px; color: var(--text-muted); margin: 0 0 12px;
}
.product-card-foot {
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--text-soft);
}
/* === Product page === */
.product-hero {
  padding: 72px 0 56px;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}
.product-hero-inner {
  display: grid; grid-template-columns: 128px 1fr;
  gap: 32px; align-items: center;
}
.product-hero-icon img { border-radius: 24px; box-shadow: var(--shadow-md); }
.product-hero-type {
  display: inline-block; font-size: 13px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  margin-bottom: 8px;
}
.product-hero-name {
  font-size: clamp(32px, 5vw, 44px); margin: 0 0 12px;
}
.product-hero-tagline {
  font-size: 18px; color: var(--text-muted); max-width: 640px; margin: 0 0 24px;
}
.product-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Poster-cover hero variant - clean product on the left, tilted poster on the
   right (framed like a comic issue). Driven by it.posterUrl in product.html. */
.product-hero.has-poster .product-hero-inner {
  grid-template-columns: 1fr 360px; gap: 48px; align-items: center;
}
.product-hero-icon-sm {
  border-radius: 14px; box-shadow: var(--shadow-md); margin-bottom: 16px;
}
.poster-cover {
  position: relative; aspect-ratio: 1/1;
  border: 7px solid #111; border-radius: 4px; transform: rotate(-2.2deg);
  box-shadow: 0 18px 40px rgba(20, 23, 30, 0.28);
}
.poster-cover img { width: 100%; height: 100%; object-fit: cover; }
.poster-issue {
  position: absolute; top: -14px; right: -14px;
  background: #ffd34e; color: #111; font-weight: 800; font-size: 12px;
  letter-spacing: 0.04em; padding: 6px 10px; border: 2px solid #111;
  border-radius: 4px; transform: rotate(6deg);
}

.product-features, .product-screenshots {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.product-features:last-child, .product-screenshots:last-child { border-bottom: none; }
.section-title {
  font-size: 26px; margin-bottom: 28px;
}

.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.feature-card {
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.feature-title { font-size: 16px; margin-bottom: 6px; }
.feature-desc { font-size: 14px; color: var(--text-muted); margin: 0; }

.screenshot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.screenshot img { border-radius: var(--radius-md); border: 1px solid var(--border); }

.docs-body {
  max-width: 760px; margin: 0 auto;
  font-size: 16px; line-height: 1.7;
}
.docs-body h1, .docs-body h2, .docs-body h3 {
  margin-top: 1.6em;
}
.docs-body code {
  background: var(--bg-muted); padding: 2px 6px;
  border-radius: 4px; font-size: 0.92em;
}
.docs-body pre {
  background: var(--bg-muted); padding: 16px;
  border-radius: var(--radius-md); overflow-x: auto;
}
.docs-body pre code { background: transparent; padding: 0; }
.docs-body img { border-radius: var(--radius-sm); margin: 1.2em 0; }

/* === Release / What's-new page === */
.release-container { max-width: 860px; }
.release-header { margin-bottom: 36px; }
.release-breadcrumb { color: var(--text-soft); font-size: 14px; margin: 0 0 20px; }
.release-breadcrumb a { color: inherit; }
.release-breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.release-breadcrumb .sep { margin: 0 6px; color: var(--text-soft); }
.release-id { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.release-icon { border-radius: var(--radius-md); flex-shrink: 0; }
.release-name { margin: 0 0 4px; font-size: 30px; }
.release-version { margin: 0; color: var(--text-muted); font-size: 15px; }
.release-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Download page - intro line, requirements block, secondary CTA row. */
.download-intro { color: var(--text-muted); margin-bottom: 16px; }
.download-requirements { margin-top: 32px; }
.download-requirements ul { margin: 12px 0 0; padding-left: 20px; color: var(--text-muted); line-height: 1.7; }
.release-ctas-secondary { margin-top: 36px; }
.release-notes { margin: 40px 0; }
.release-notes-title { font-size: 22px; margin-bottom: 18px; }
.release-notes .docs-body, .release-prev-item .docs-body { margin: 0; max-width: none; }
.release-previous { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 28px; }
.release-prev-item {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px 16px; margin-bottom: 10px; background: var(--bg-card);
}
.release-prev-item summary { cursor: pointer; padding: 8px 0; color: var(--text); font-size: 15px; }
.release-prev-item[open] summary { margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.release-back { margin-top: 40px; font-size: 14px; }


/* === Docs page layout (sidebar + content) === */
.page-docs .docs-layout { padding: 8px 0 60px; }
.docs-container { max-width: 1200px; }
.docs-header { margin-bottom: 8px; }
.docs-breadcrumb { color: var(--text-soft); font-size: 14px; margin: 0; }
.docs-breadcrumb a { color: inherit; text-decoration: none; }
.docs-breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.docs-breadcrumb .sep { margin: 0 6px; color: var(--text-soft); }

.docs-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
.docs-sidebar {
  position: sticky; top: 24px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  font-size: 14px;
  border-right: 1px solid var(--border);
  padding-right: 16px;
}
.docs-sidebar-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-soft);
  margin: 0 0 12px;
}
.docs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.docs-sidebar li { margin: 0; position: relative; }
.docs-sidebar li[hidden] { display: none; }
.docs-sidebar li a {
  display: block; padding: 6px 10px 6px calc(var(--indent, 0rem) + 26px);
  border-radius: 6px;
  color: var(--text-soft); text-decoration: none; line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}
.docs-sidebar li a:hover { color: var(--text); background: var(--bg-muted); }
.docs-sidebar li.active a {
  color: var(--accent); background: var(--bg-muted); font-weight: 600;
}
.docs-nav-toggle {
  position: absolute; left: calc(var(--indent, 0rem) + 4px); top: 7px;
  width: 18px; height: 18px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); border-radius: 4px;
}
.docs-nav-toggle:hover { background: var(--bg-muted); color: var(--text); }
.docs-nav-toggle::before {
  content: ''; width: 0; height: 0;
  border: 4px solid transparent; border-left-color: currentColor;
  margin-left: 2px;
  transition: transform .12s ease;
}
.docs-nav-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

.docs-content { min-width: 0; }
.docs-section-title {
  font-size: 32px; line-height: 1.2; margin: 0 0 24px;
}
.docs-content .docs-body { max-width: none; margin: 0; }

.docs-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.docs-pager-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.docs-pager-link:hover { background: var(--bg-muted); border-color: var(--accent); }
.docs-pager-next { text-align: right; }
.docs-pager-dir { font-size: 12px; color: var(--text-soft); }
.docs-pager-title { font-size: 15px; font-weight: 600; }

@media (max-width: 800px) {
  .docs-grid { grid-template-columns: 1fr; gap: 24px; }
  .docs-sidebar {
    position: static; border-right: none; border-bottom: 1px solid var(--border);
    padding-right: 0; padding-bottom: 16px;
  }
  .docs-section-title { font-size: 26px; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager-next { text-align: left; }
}

/* === Footer === */
.site-footer {
  padding: 0;
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted);
}
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  min-height: 64px;   /* match the header bar height (.header-inner) */
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-tagline { color: var(--text-soft); }
.footer-meta { display: flex; align-items: center; gap: 16px; }
.footer-meta a { color: var(--text-muted); }
.footer-meta a:hover { color: var(--text); }

/* === Responsive === */
@media (max-width: 720px) {
  .header-inner { gap: 12px; }
  .site-nav { gap: 14px; margin-left: 0; }
  .site-nav a { font-size: 14px; }
  .product-hero-inner,
  .product-hero.has-poster .product-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .product-hero-icon img, .product-hero-icon-sm { margin: 0 auto; }
  .product-hero-ctas { justify-content: center; }
  .poster-cover { max-width: 340px; margin: 8px auto 0; }
}