/* Small corrections on top of the original landing UI. */
html,
body {
  min-height: 100%;
  background: #f7fffd !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 980px 540px at 50% 8%, rgba(var(--primary-rgb), 0.24), transparent 72%),
    radial-gradient(ellipse 620px 360px at 16% 34%, rgba(82, 178, 255, 0.09), transparent 68%),
    radial-gradient(ellipse 540px 300px at 86% 48%, rgba(var(--primary-rgb), 0.08), transparent 72%),
    linear-gradient(180deg, #f4fffc 0%, #f7fffd 42%, #fbfefd 72%, #ffffff 100%);
}

#root,
.magic-page {
  min-height: 100%;
  background: transparent !important;
}

.brand-logo img {
  object-fit: contain;
}

.hero-section {
  min-height: 680px;
  position: relative;
  overflow: visible;
  background: transparent !important;
  padding-top: 0;
  padding-bottom: 64px;
  margin-bottom: -64px;
  display: grid;
  place-items: center;
}

.hero-section::before {
  display: none;
}

.hero-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -92px;
  left: 0;
  z-index: -1;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 760px 180px at 50% 0%, rgba(var(--primary-rgb), 0.08), transparent 74%),
    linear-gradient(180deg, rgba(247, 255, 253, 0), rgba(247, 255, 253, 0.82) 48%, rgba(251, 254, 253, 0));
}

.hero-inner {
  position: relative;
  width: min(1080px, 100vw - 48px);
  min-height: 560px;
  margin-top: 0;
  padding: 108px 40px 86px;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-inner::before {
  display: none;
}

.hero-inner::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 32px;
  z-index: 1;
  width: min(760px, 78%);
  height: 150px;
  transform: translateX(50%);
  display: block;
  padding-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 24% 62%, rgba(var(--primary-rgb), 0.08) 0 48px, transparent 49px),
    radial-gradient(circle at 76% 42%, rgba(82, 178, 255, 0.08) 0 58px, transparent 59px),
    linear-gradient(0deg, rgba(var(--primary-rgb), 0.055), transparent 76%);
  mask-image: linear-gradient(to bottom, #000 0 74%, transparent 100%);
}

.updates {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

#bots .feature-content > h2,
#bots .feature-content > p {
  display: none;
}

.docs-category-overview {
  width: min(980px, 100vw - 40px);
  margin: 0 auto 58px;
}

.docs-category-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  text-align: right;
}

.docs-category-head span {
  color: #162421;
  font-size: 20px;
  font-weight: 560;
}

.docs-category-head p {
  max-width: 620px;
  margin: 0;
  color: rgba(42, 51, 62, 0.62);
  font-size: 13px;
  font-weight: 340;
  line-height: 2;
}

.docs-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.docs-category-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 44px rgba(31, 164, 141, 0.06);
  backdrop-filter: blur(16px);
}

.docs-category-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.docs-category-card h2 {
  margin: 0;
  color: #162421;
  font-size: 16px;
  font-weight: 560;
  line-height: 1.7;
}

.docs-category-card-head span {
  flex: none;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 520;
}

.docs-category-card p {
  min-height: 48px;
  margin: 8px 0 14px;
  color: rgba(42, 51, 62, 0.62);
  font-size: 12.5px;
  font-weight: 340;
  line-height: 1.9;
}

.docs-category-card ul {
  display: grid;
  gap: 8px;
}

.docs-category-card li {
  min-width: 0;
}

.docs-category-card button,
.docs-category-card li > span {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(22, 36, 33, 0.82);
  text-align: right;
  font-size: 12.5px;
  font-weight: 420;
  line-height: 1.8;
}

.docs-category-card button {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.docs-category-card button:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--primary-rgb), 0.34);
  background: rgba(255, 255, 255, 0.86);
}

.docs-detail-list {
  display: grid;
  gap: 44px;
}

.docs-detail-group {
  display: grid;
  gap: 22px;
}

.docs-detail-group-title {
  width: min(760px, 100vw - 40px);
  margin: 0 auto -4px;
}

.docs-detail-group-title span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 520;
}

.docs-detail-item .feature-content {
  padding-top: 0;
}

.bc-doc-admin-panel {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 18px;
  background: #fbfffe;
}

.bc-doc-admin-head,
.bc-doc-admin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bc-doc-admin-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.bc-doc-admin-head h2,
.bc-doc-assignment-editor h3 {
  margin: 0;
  color: #18231f;
  font-size: 17px;
  font-weight: 620;
}

.bc-doc-admin-head button,
.bc-doc-category-row button,
.bc-doc-admin-actions button {
  border: 1px solid rgba(var(--primary-rgb), 0.24);
  color: #173f39;
  cursor: pointer;
  background: #fff;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 560;
}

.bc-doc-category-editor,
.bc-doc-assignment-editor {
  display: grid;
  gap: 10px;
}

.bc-doc-category-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  border-radius: 16px;
  background: #fff;
}

.bc-doc-category-row label,
.bc-doc-assignment-editor label {
  display: grid;
  gap: 7px;
}

.bc-doc-category-row span,
.bc-doc-assignment-editor span {
  color: rgba(42, 51, 62, 0.62);
  font-size: 12px;
  font-weight: 520;
}

.bc-doc-category-row input,
.bc-doc-category-row textarea,
.bc-doc-assignment-editor select {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(42, 51, 62, 0.12);
  border-radius: 12px;
  background: #fbfffe;
  color: #18231f;
  outline: 0;
  font-size: 13px;
  line-height: 1.7;
}

.bc-doc-assignment-editor {
  padding: 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  border-radius: 16px;
  background: #fff;
}

.bc-doc-assignment-editor label {
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 0.8fr);
  align-items: center;
}

.bc-doc-admin-actions span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 560;
}

.section-count-bar {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(var(--primary-rgb), 0.2) !important;
  box-shadow: 0 18px 42px rgba(31, 164, 141, 0.06);
  backdrop-filter: blur(16px);
}

.hero-inner h1 {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto;
  color: #1d1f20;
  text-align: center;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0;
}

.hero-inner h1::first-line {
  color: #1d1f20;
}

.hero-inner p {
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin: 14px auto 0;
  color: rgba(42, 51, 62, 0.62);
  text-align: center;
  font-size: clamp(12.5px, 1.02vw, 14.5px);
  font-weight: 340;
  line-height: 2.15;
}

.hero-inner p::after {
  display: none;
}

.hero-robot {
  display: none !important;
}

.bc-hero-action {
  position: relative;
  z-index: 4;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  margin: 24px auto 0;
  padding: 0 18px;
  border: 1px solid rgba(var(--primary-rgb), 0.38);
  border-radius: 999px;
  background: var(--primary);
  color: #073f36;
  box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.22);
  backdrop-filter: blur(14px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 560;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.bc-hero-action:hover {
  transform: translateY(-2px);
  background: #58ebce;
  box-shadow: 0 18px 34px rgba(var(--primary-rgb), 0.28);
}

.bc-hero-action svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.hero-section .hero-inner > p + * {
  position: relative;
}

@keyframes bc-icon-orbit {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(-3deg);
  }
  35% {
    transform: translate3d(calc(-50% + 7px), -10px, 0) rotate(3deg);
  }
  70% {
    transform: translate3d(calc(-50% - 5px), -4px, 0) rotate(-1deg);
  }
}

.hero-section .hero-inner::selection {
  background: rgba(var(--primary-rgb), 0.25);
}

.section-count-bar {
  font-size: 12px;
  font-weight: 420;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 14px;
}

.section-count-bar strong {
  font-size: 14px;
  font-weight: 560;
}

.section-count-bar small,
.section-count-bar span {
  font-size: 12px;
  font-weight: 380;
}

.feature-article {
  width: min(760px, 100vw - 40px);
}

.feature-content {
  padding-top: 28px;
}

.feature-content h2 {
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 540;
  line-height: 1.55;
  letter-spacing: 0;
}

.feature-content p {
  margin-top: 14px;
  font-size: clamp(15px, 1.65vw, 18px);
  font-weight: 340;
  line-height: 2;
  color: rgba(42, 51, 62, 0.68);
}

.feature-divider {
  margin-top: 34px;
  padding-bottom: 34px;
}

.pagination {
  font-size: 12px;
  font-weight: 380;
  gap: 5px;
  padding-bottom: 28px;
}

.pagination a,
.pagination button {
  padding: 6px 10px;
  font-weight: 420;
}

.brand-name,
.main-nav a,
.demo-menu-button,
.purchase-link,
.learn-link {
  font-weight: 520;
}

.learn-link {
  font-size: 15px;
}

@media (max-width: 760px) {
  .hero-section {
    min-height: 600px;
    padding-top: 0;
  }

  .hero-inner {
    width: calc(100vw - 28px);
    min-height: 540px;
    margin-top: 0;
    padding: 86px 18px 76px;
  }

  .hero-inner::before {
    top: 80px;
    height: auto;
  }

  .hero-inner::after {
    right: 50%;
    bottom: 26px;
    left: auto;
    width: 92%;
    height: 124px;
    border-radius: 30px 30px 0 0;
    font-size: 10px;
    text-align: center;
    padding-inline: 18px;
  }

  .hero-inner h1 {
    max-width: 100%;
    padding-left: 0;
    font-size: clamp(24px, 6.9vw, 32px);
    font-weight: 480;
    line-height: 1.5;
  }

  #bots .hero-inner h1 {
    font-size: clamp(23px, 6.5vw, 30px);
    line-height: 1.58;
  }

  .hero-robot {
    display: none !important;
  }

  .hero-inner p {
    max-width: 100%;
    font-size: 13px;
    line-height: 2;
  }

  .hero-inner p::after {
    display: none;
  }

  .bc-hero-action {
    min-height: 38px;
    margin-top: 18px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .feature-content h2 {
    font-size: 22px;
  }

  .feature-content p {
    font-size: 15px;
  }

  .docs-category-overview {
    width: calc(100vw - 28px);
    margin-bottom: 46px;
  }

  .docs-category-grid {
    grid-template-columns: 1fr;
  }

  .docs-category-card p {
    min-height: 0;
  }

  .bc-doc-admin-head,
  .bc-doc-admin-actions,
  .bc-doc-category-row,
  .bc-doc-assignment-editor label {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .bc-doc-admin-head,
  .bc-doc-admin-actions {
    display: grid;
  }
}