#intro-video {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 8px;
  margin: 2rem auto;
}

@container (max-width: 720px) {
  #intro-video {
    width: 100%;
    margin: 1rem auto;
  }
}

/* ============================================================
   Custom landing page (mode: custom)
   Upstash green: #10B981 / #34D399. Class-based dark mode (.dark).
   ============================================================ */

.u-wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

/* In `mode: frame` Mintlify keeps the left sidebar but STILL reserves a 28rem
   right column for the table of contents, which frame hides, leaving it empty and
   squishing the content. On the Get Started landing we collapse that empty column
   and let content use the full width. Scoped with Mintlify's documented
   data-current-path hook (only the /introduction page). NOTE: still targets
   Mintlify-internal ids (#content-area / #content-side-layout); revisit if a
   Mintlify upgrade renames them. Collapse to zero width, not display:none (which
   broke the sticky sidebar, making it render scrolled on load).
   2026-07: production's renderer no longer has #content-side-layout (rule is
   inert there, frame mode fills the width natively now), but local `mint dev`
   still renders it; keep until the CLI catches up. */
html[data-current-path="/introduction"] #content-side-layout {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}
html[data-current-path="/introduction"] #content-area {
  width: 100% !important;
}

/* The landing body is client-rendered (imported MDX snippet components are not
   SSR'd), so on a hard load the content area is empty at first paint. That let
   the footer sit inside the viewport, where Mintlify's footer-avoidance —
   which sets a negative inline `top` on the fixed #sidebar and only re-runs on
   scroll — pinned the sidebar above the viewport; when the body then hydrated
   and the footer moved out of view, nothing re-ran the handler and the sidebar
   stayed stuck showing only the tail of the nav. Reserve a viewport of height
   from the first paint so the footer can never be in view while the body is
   still empty. Must be #content[data-page-href]: it is server-rendered with
   the real path, while html[data-current-path] SSRs as "/" and is only stamped
   after hydration - too late. Local `mint dev` stamps the attribute with its
   build path ("/src/_props/introduction"), hence the second selector. Don't
   collapse them into [data-page-href$="/introduction"]: that would also match
   pages like /redis/search/introduction. Runtime backstop lives in script.js. */
#content[data-page-href="/introduction"],
#content[data-page-href="/src/_props/introduction"] {
  min-height: 100vh;
}


/* ---- Hero ---- */
.u-hero {
  position: relative;
  text-align: center;
  padding: 3.5rem 1rem 3rem;
  overflow: hidden;
}
.u-hero::before {
  content: "";
  position: absolute;
  top: -12rem;
  left: 50%;
  width: 64rem;
  height: 24rem;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(52, 211, 153, 0.22),
    rgba(52, 211, 153, 0)
  );
  pointer-events: none;
  z-index: 0;
}
.u-hero > * {
  position: relative;
  z-index: 1;
}
.u-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.u-hero p {
  margin: 1.1rem auto 0;
  max-width: 40rem;
  font-size: 1.125rem;
  color: #52606d;
}
.dark .u-hero p {
  color: #b3bcc7;
}

/* Strong heading/title color. Mintlify's base content text is a muted gray
   (text-gray-500 / dark:text-gray-400) which washes out our large headings.
   Override so headings read crisp in both themes. */
.u-hero h1,
.u-section h2,
.u-card__title {
  color: #0d1526;
}
.dark .u-hero h1,
.dark .u-section h2,
.dark .u-card__title {
  color: #f4f5f6;
}

.u-cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.u-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.u-btn--primary {
  background: #10b981;
  color: #05231a;
}
.u-btn--primary:hover {
  background: #34d399;
  transform: translateY(-1px);
}
.u-btn--ghost {
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: inherit;
}
.dark .u-btn--ghost {
  border-color: rgba(255, 255, 255, 0.16);
}
.u-btn--ghost:hover {
  border-color: #10b981;
  transform: translateY(-1px);
}

/* ---- Section headings ---- */
.u-section {
  margin-top: 4rem;
}
/* tighter gap between the hero and the first section */
.u-wrap > .u-section:first-of-type {
  margin-top: 2rem;
}
.u-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #059669;
}
.dark .u-eyebrow {
  color: #34d399;
}
.u-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0;
}
/* Mintlify renders the sub as <p> or <span> depending on content, so target
   the class only and force block display. */
.u-section .u-sub {
  display: block;
  margin: 0.5rem 0 0;
  color: #52606d;
  font-size: 1rem;
}
.dark .u-section .u-sub {
  color: #b3bcc7;
}
.u-section .u-sub a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.u-section .u-sub a:hover {
  color: #059669;
}
.dark .u-section .u-sub a:hover {
  color: #34d399;
}

/* ---- Grids ---- */
.u-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* auto-fill so columns respond to the actual available width (works whether the
   page is full-bleed `custom` or narrowed by the `frame` sidebar). */
.u-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.u-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* fixed-column variants (don't reflow to more columns on very wide layouts) */
.u-grid--fixed2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.u-grid--fixed3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.u-grid--fixed4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .u-grid--fixed3,
  .u-grid--fixed4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .u-grid--fixed2,
  .u-grid--fixed3,
  .u-grid--fixed4 {
    grid-template-columns: 1fr;
  }
}

/* ---- Cards ---- */
.u-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.dark .u-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.u-card:hover {
  border-color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(16, 185, 129, 0.45);
}
.u-card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.08);
}
.dark .u-card--static:hover {
  border-color: rgba(255, 255, 255, 0.1);
}
.u-card__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  /* override Mintlify prose <img> margins that otherwise inflate the card and
     push the icon off the top */
  margin: 0 !important;
  align-self: flex-start;
  /* let clicks pass through to the card link instead of triggering Mintlify's
     image zoom */
  pointer-events: none;
}
.u-card__icon--muted {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}
.u-card__body {
  min-width: 0;
}
.u-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}
.u-card__desc {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #626d7a;
}
.dark .u-card__desc {
  color: #aab2bf;
}

/* ---- Product cards (larger) ---- */
.u-product .u-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
}
.u-product .u-card__title {
  font-size: 1.05rem;
}

/* ---- Console showcase ---- */
.u-console {
  margin-top: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background: #f7f8fa;
}
.dark .u-console {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.u-console img {
  display: block;
  width: 100%;
  height: 13rem;
  object-fit: cover;
  object-position: top center;
}
.u-console__cap {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #626d7a;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .u-console__cap {
  color: #98a2b3;
  border-top-color: rgba(255, 255, 255, 0.08);
}