/*
 * Knowledge landing: the static counterpart to Product Home.
 * Use the same semantic roles as packages/design-system/src/tokens.css.
 * This file is intentionally hub-only; the model and article UI remains in kb.css.
 */
.kb-hub-page {
  --mx-bg: #0e0f11;
  --mx-surface: #17181b;
  --mx-surface-raised: #1d1e22;
  --mx-text: #ecedef;
  --mx-text-secondary: #a9abb2;
  --mx-text-dim: #878a93;
  --mx-line: rgba(255, 255, 255, .07);
  --mx-line-strong: rgba(255, 255, 255, .12);
  --mx-accent: #2db6d2;
  --mx-accent-fill: #2db6d2;
  --mx-accent-text: var(--mx-text);
  --mx-accent-ink: #04161b;
  --bg: var(--mx-bg);
  --bg-soft: var(--mx-surface);
  --card: var(--mx-surface-raised);
  --tx: var(--mx-text);
  --tx-dim: var(--mx-text-secondary);
  --tx-mut: var(--mx-text-dim);
  --line: var(--mx-line);
  --line-2: var(--mx-line-strong);
  --accent: var(--mx-accent);
  --accent-ink: var(--mx-accent-text);
  --kb-panel: var(--mx-surface);
  --kb-ink: var(--mx-text);
  --kb-rule: var(--mx-line);
  --kb-ink-dim: var(--mx-text-secondary);
  --kb-hub-width: 1280px;
  --kb-hub-gutter: clamp(16px, 5.55vw, 80px);
  color: var(--mx-text);
  background: var(--mx-bg);
  background-image: none;
  font-family: Manrope, "Manrope Fallback", system-ui, sans-serif;
}

html[data-theme="light"] .kb-hub-page {
  --mx-bg: #f5f5f6;
  --mx-surface: #fff;
  --mx-surface-raised: #ededef;
  --mx-text: #18191b;
  --mx-text-secondary: #5b5e66;
  --mx-text-dim: #666971;
  --mx-line: rgba(0, 0, 0, .08);
  --mx-line-strong: rgba(0, 0, 0, .14);
  --mx-accent: #0a8fab;
  --mx-accent-fill: #087e97;
  --mx-accent-text: var(--mx-text);
  --mx-accent-ink: #fff;
}

.kb-hub-page .kb-top {
  position: relative;
  padding: env(safe-area-inset-top, 0px) 0 0;
  background: var(--mx-bg);
  border-bottom-color: var(--mx-line);
  backdrop-filter: none;
}

.kb-hub-page .kb-top .wrap,
.kb-hub-page .wrap.kb-hub {
  width: min(var(--kb-hub-width), calc(100% - var(--kb-hub-gutter) * 2));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.kb-hub-page .kb-top .wrap { height: 72px; }
.kb-hub-page .kb-brand { font-size: 20px; }
.kb-hub-page .kb-brand b { color: var(--mx-text); }
.kb-hub-page .kb-brand img { width: 30px; height: 30px; }
.kb-hub-page .kb-cta,
.kb-hub-page .kb-hub-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mx-action-height);
  padding: 0 16px;
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius-control);
  color: var(--mx-text);
  background: var(--mx-surface);
  box-shadow: none;
  font: 700 14px/1.3 Manrope, "Manrope Fallback", system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.kb-hub-page .kb-cta,
/* The main action is the dashed black-and-white button of every KB page (.kb-cta). */
.kb-hub-page .kb-hub-action--primary {
  color: var(--mx-text);
  border: .8px dashed var(--mx-line-strong);
  border-radius: 999px;
  background: transparent;
}
.kb-hub-page .kb-cta:hover,
.kb-hub-page .kb-hub-action--primary:hover {
  background: color-mix(in srgb, var(--mx-text) 7%, transparent);
  border-color: var(--mx-line-strong);
  filter: none;
  text-decoration: none;
}
.kb-hub-page .kb-cta:active,
.kb-hub-page .kb-hub-action:active { transform: scale(.98); }
.kb-hub-page .kb-cta:focus-visible,
.kb-hub-page .kb-hub-action:focus-visible { outline: 2px solid var(--mx-accent-fill); outline-offset: 3px; }

.kb-hub-page .kb-hub {
  min-width: 0;
  padding-bottom: 56px;
  overflow: visible;
}
.kb-hub-page .kb-crumb {
  padding: 22px 0 0;
  color: var(--mx-text-dim);
  font-size: 12px;
}
.kb-hub-page .kb-crumb a {
  color: var(--mx-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-hub-page .kb-crumb a:hover { color: var(--mx-accent-text); }

.kb-hub-intro {
  /* Home uses the same 31px dot field around its model previews. */
  background-image: radial-gradient(circle, color-mix(in srgb, var(--mx-text) 18%, transparent) .75px, transparent 1.15px);
  background-size: 31px 31px;
  background-position: 6px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: 560px;
  padding: 36px 0 70px;
}
.kb-hub-intro__copy { min-width: 0; }
.kb-hub-intro h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--mx-text);
  font: 800 clamp(38px, 4.8vw, 68px)/1.06 Manrope, "Manrope Fallback", system-ui, sans-serif;
  letter-spacing: -.047em;
  text-transform: none;
  text-wrap: balance;
}
.kb-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.kb-hub-jumps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  max-width: 465px;
  margin-top: 36px;
}
.kb-hub-jumps a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  border-bottom: 1px solid var(--mx-line);
  color: var(--mx-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease;
}
.kb-hub-jumps a span { color: var(--mx-accent-text); }
.kb-hub-jumps a:hover {
  color: var(--mx-accent-text);
  border-bottom-color: var(--mx-line-strong);
  text-decoration: none;
}

.kb-hub-intro__gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  height: clamp(360px, 39vw, 500px);
  min-width: 0;
}
.kb-hub-page .kb-hub-image,
.kb-hub-page .kb-board-photo {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--mx-surface-raised);
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: border-color .2s ease;
}
.kb-hub-page .kb-hub-image::before,
.kb-hub-page .kb-board-photo::before { content: none; }
.kb-hub-page .kb-hub-image img,
.kb-hub-page .kb-board-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.kb-hub-page .kb-hub-image:hover img,
.kb-hub-page .kb-board-photo:hover img { transform: scale(1.04); }
.kb-hub-page .kb-hub-image--main {
  grid-column: 2/5;
  grid-row: 2/5;
  z-index: 3;
}
.kb-hub-page .kb-hub-image--side {
  grid-column: 4/6;
  grid-row: 1/3;
  z-index: 2;
}
.kb-hub-page .kb-hub-image--corner {
  grid-column: 1/3;
  grid-row: 1/3;
  z-index: 1;
}
.kb-hub-page .kb-glyph-cap {
  left: 12px;
  bottom: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(14, 15, 17, .86);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}
.kb-hub-page .kb-hub-image:hover .kb-glyph-cap,
.kb-hub-page .kb-hub-image:focus-visible .kb-glyph-cap {
  opacity: 1;
  transform: none;
}

.kb-hub-sections { display: grid; gap: clamp(36px, 5vw, 80px); }
.kb-hub-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(36px, 4.5vw, 72px) 0 0;
  border-top: 1px solid var(--mx-line);
}
.kb-hub-section:nth-child(even) .kb-hub-section__media { order: -1; }
.kb-hub-section:first-child { align-items: start; }
.kb-hub-section:first-child .kb-hub-section__media {
  position: sticky;
  top: 24px;
  align-self: start;
}
.kb-hub-section__body { min-width: 0; }
.kb-hub-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.kb-hub-section__head h2 {
  min-width: 0;
  margin: 0;
  color: var(--mx-text);
  font: 700 clamp(23px, 2.65vw, 34px)/1.2 Manrope, "Manrope Fallback", system-ui, sans-serif;
  letter-spacing: -.027em;
  text-transform: none;
  text-wrap: balance;
}
.kb-hub-section__head h2 a { color: inherit; }
.kb-hub-section__head h2 a:hover { color: var(--mx-accent-text); text-decoration: none; }
@media (min-width: 821px) {
  .kb-hub-section:last-child { padding-bottom: var(--kb-tile-overhang, 0px); }
}
.kb-hub-section__media {
  min-width: 0;
  width: 100%;
}
.kb-hub-page .kb-board-photo {
  width: 100%;
  aspect-ratio: 4/3;
}
.kb-hub-video-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.kb-hub-video-preview video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: var(--mx-surface-raised);
  object-fit: cover;
}
.kb-hub-video-preview > a {
  display: inline-flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
  color: var(--mx-text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.kb-hub-video-preview > a span { color: var(--mx-accent-text); }
.kb-hub-video-preview > a:hover { color: var(--mx-text); text-decoration: none; }
.kb-hub-page .kb-board-photo .kb-glyph-cap {
  opacity: 1;
  transform: none;
  background: rgba(14, 15, 17, .8);
}
.kb-hub-page .kb-board-links--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kb-hub-page .kb-board-links--chips > a,
.kb-hub-page .kb-board-links--chips .kb-board-more__items > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--mx-line-strong);
  border-radius: 8px;
  background: var(--mx-surface);
  color: var(--mx-text);
  font-size: 13px;
  font-weight: 650;
  white-space: normal;
  transition: background-color .12s ease, border-color .12s ease;
}
.kb-hub-page .kb-board-links--chips a:hover {
  background: var(--mx-surface-raised);
  border-color: var(--mx-accent);
  color: var(--mx-text);
  text-decoration: none;
}
.kb-hub-page .kb-board-links--rows {
  display: grid;
  border-top: 0;
}
.kb-hub-page .kb-board-links--rows a,
.kb-hub-page .kb-feature-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--mx-line);
  border-radius: 0;
  background: none;
  color: var(--mx-text-secondary);
  font: 600 14px/1.45 Manrope, "Manrope Fallback", system-ui, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  transition: color .12s ease, padding-left .12s ease;
}
.kb-hub-page .kb-board-links--rows a::before { content: none; }
.kb-hub-page .kb-board-links--rows a:hover,
.kb-hub-page .kb-feature-card:hover {
  padding-left: 5px;
  border-bottom-color: var(--mx-line-strong);
  background: none;
  color: var(--mx-text);
  text-decoration: none;
}
.kb-hub-page .kb-link-arrow { color: var(--mx-text-dim); }
.kb-hub-page .kb-board-more,
.kb-hub-page .kb-board-more__items { display: contents; }
/* The content box of <details> is a block of its own: without this the links inside lose the flex gap. */
.kb-hub-page .kb-board-more::details-content { display: contents; }
.kb-hub-page .kb-board-more summary { display: none; }
.kb-hub-page .kb-compare-picker {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
}
.kb-hub-page .kb-compare-picker__controls { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
.kb-hub-page .kb-compare-picker select {
  border-color: var(--mx-line-strong);
  border-radius: 8px;
  background: var(--mx-surface);
  color: var(--mx-text);
}
.kb-hub-page .kb-compare-picker__action button:not(:disabled) {
  border-color: var(--mx-accent-fill);
  background: var(--mx-accent-fill);
  color: var(--mx-accent-ink);
}

.kb-hub-page .kb-home-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(44px, 6vw, 90px);
  padding-top: 30px;
  border-top-color: var(--mx-line);
}
.kb-hub-page .kb-home-links a {
  min-height: 44px;
  border-color: var(--mx-line-strong);
  border-radius: 8px;
  background: var(--mx-surface);
  color: var(--mx-text);
}
.kb-hub-page .kb-home-links a:hover {
  border-color: var(--mx-accent);
  background: var(--mx-surface-raised);
}
.kb-hub-page .kb-legal-links { margin-top: 20px; }
.kb-hub-page .kb-legal-links a { color: var(--mx-text-dim); }
.kb-hub-page .kb-legal-links a:hover { color: var(--mx-text); }

.kb-hub-page a:focus-visible,
.kb-hub-page button:focus-visible,
.kb-hub-page summary:focus-visible,
.kb-hub-page select:focus-visible {
  outline: 2px solid var(--mx-accent);
  outline-offset: 3px;
  box-shadow: none;
}
.kb-sandbox .kb-hub-image,
.kb-sandbox .kb-board-photo { transform: translate(var(--dx, 0px), var(--dy, 0px)); }

@media (max-width: 820px) {
  .kb-hub-page { --kb-hub-gutter: 16px; }
  .kb-hub-page .kb-top .wrap,
  .kb-hub-page .wrap.kb-hub {
    width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
  }
  .kb-hub-page .kb-hub { overflow-x: clip; }
  .kb-hub-page .kb-top .wrap { min-height: 66px; height: auto; }
  .kb-hub-page .kb-crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .kb-hub-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    min-height: 0;
    padding: 32px 0 52px;
  }
  .kb-hub-intro h1 {
    max-width: 18ch;
    font-size: clamp(34px, 7.6vw, 56px);
  }
  .kb-hub-actions { margin-top: 24px; }
  .kb-hub-jumps { margin-top: 24px; }
  .kb-hub-intro__gallery {
    height: clamp(260px, 64vw, 430px);
    max-width: 580px;
    margin-inline: auto;
  }
  .kb-hub-section,
  .kb-hub-section:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 36px;
  }
  .kb-hub-section:nth-child(even) .kb-hub-section__media { order: 0; }
  .kb-hub-section:first-child .kb-hub-section__media { position: static; }
  .kb-hub-section__head { margin-bottom: 12px; }
  .kb-hub-section__head h2 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .kb-hub-video-preview > a { align-items: center; min-height: 44px; }
  .kb-hub-page .kb-board-more {
    display: block;
    margin-top: 10px;
  }
  .kb-hub-page .kb-board-more::details-content { display: block; }
  .kb-hub-page .kb-board-more__items { display: grid; gap: 0; margin-top: 10px; }
  .kb-hub-page .kb-board-more summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--mx-line-strong);
    border-radius: 8px;
    background: var(--mx-surface);
    color: var(--mx-text);
    font-size: 14px;
    font-weight: 650;
    list-style: none;
    cursor: pointer;
  }
  .kb-hub-page .kb-board-more summary::-webkit-details-marker { display: none; }
  .kb-hub-page .kb-board-more summary::after { content: "+"; margin-left: auto; }
  .kb-hub-page .kb-board-more[open] summary::after { content: "−"; }
  .kb-hub-page .kb-board-links--chips .kb-board-more__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .kb-hub-page .kb-board-links--chips > a,
  .kb-hub-page .kb-board-links--chips .kb-board-more__items > a { min-height: 44px; }
  .kb-hub-page .kb-compare-picker__controls { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kb-hub-page .kb-compare-picker__vs { height: 24px; }
  .kb-hub-page .kb-compare-picker__action { flex-direction: column; align-items: stretch; }
  .kb-hub-page .kb-compare-picker__action button { width: 100%; min-height: 44px; }
  .kb-hub-page .kb-hub-section__media { max-width: 560px; }
}

@media (max-width: 560px) {
  .kb-hub-page .kb-top .wrap { padding: 10px 0; }
  .kb-hub-page .kb-top .kb-cta {
    display: flex;
    flex: 1 0 100%;
    order: 3;
    justify-content: center;
    margin-top: 4px;
  }
  .kb-hub-page .kb-brand { font-size: 18px; }
  .kb-hub-page .kb-crumb { padding-top: 16px; }
  .kb-hub-intro { gap: 20px; padding: 26px 0 44px; }
  .kb-hub-intro h1 { font-size: clamp(34px, 9vw, 44px); }
  .kb-hub-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .kb-hub-actions .kb-hub-action { width: 100%; min-width: 0; padding-inline: 10px; font-size: 13px; }
  .kb-hub-jumps { gap: 0 14px; }
  .kb-hub-jumps a { min-height: 48px; font-size: 13px; }
  .kb-hub-intro__gallery {
    height: clamp(230px, 70vw, 290px);
    gap: 8px;
  }
  .kb-hub-page .kb-hub-image,
  .kb-hub-page .kb-board-photo { border-radius: 12px; }
  .kb-hub-section__head h2 { font-size: clamp(23px, 6.1vw, 28px); }
  .kb-hub-page .kb-hub-section__media { display: none; }
  .kb-hub-page .kb-hub-section:nth-child(2) .kb-hub-section__media,
  .kb-hub-page .kb-hub-section:nth-child(4) .kb-hub-section__media { display: block; }
  .kb-hub-page .kb-board-photo { max-height: 240px; }
  .kb-hub-page .kb-home-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-hub-page .kb-home-links a:last-child:nth-child(odd) { grid-column: 1/-1; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-hub-page .kb-cta,
  .kb-hub-page .kb-hub-action,
  .kb-hub-page .kb-hub-jumps a,
  .kb-hub-page .kb-hub-image img,
  .kb-hub-page .kb-board-photo img,
  .kb-hub-page .kb-board-links--chips a,
  .kb-hub-page .kb-board-links--rows a { transition: none; }
  .kb-hub-page .kb-hub-image:hover img,
  .kb-hub-page .kb-board-photo:hover img,
  .kb-hub-page .kb-hub-action:active,
  .kb-hub-page .kb-cta:active { transform: none; }
}