/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 28px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fcfcfc;
  --accent-2: #f9f9f9;
  --accent-3: #efefef;
  --accent-4: #e8e8e8;
  --accent-5: #e0e0e0;
  --accent-6: #d8d8d8;
  --accent-7: #cecece;
  --accent-8: #bbb;
  --accent-9: #000;
  --accent-10: #2e2e2e;
  --accent-11: #646464;
  --accent-12: #202020;

  --accent-a1: #00000003;
  --accent-a2: #00000006;
  --accent-a3: #00000010;
  --accent-a4: #00000017;
  --accent-a5: #0000001f;
  --accent-a6: #00000027;
  --accent-a7: #00000031;
  --accent-a8: #00000044;
  --accent-a9: #000000;
  --accent-a10: #000000d1;
  --accent-a11: #0000009b;
  --accent-a12: #000000df;

  --accent-contrast: #fff;
  --accent-surface: #f8f8f8cc;
  --accent-indicator: #000;
  --accent-track: #000;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.1% 0 none);
      --accent-2: oklch(98.1% 0 none);
      --accent-3: oklch(95.3% 0 none);
      --accent-4: oklch(93% 0 none);
      --accent-5: oklch(90.8% 0 none);
      --accent-6: oklch(88.4% 0 none);
      --accent-7: oklch(85.1% 0 none);
      --accent-8: oklch(79.1% 0 none);
      --accent-9: oklch(0% 0 none);
      --accent-10: oklch(30% 0 none);
      --accent-11: oklch(50.3% 0 none);
      --accent-12: oklch(24.3% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0.0118);
      --accent-a2: color(display-p3 0 0 0 / 0.0235);
      --accent-a3: color(display-p3 0 0 0 / 0.0627);
      --accent-a4: color(display-p3 0 0 0 / 0.0902);
      --accent-a5: color(display-p3 0 0 0 / 0.1216);
      --accent-a6: color(display-p3 0 0 0 / 0.1529);
      --accent-a7: color(display-p3 0 0 0 / 0.1922);
      --accent-a8: color(display-p3 0 0 0 / 0.2667);
      --accent-a9: color(display-p3 0 0 0);
      --accent-a10: color(display-p3 0 0 0 / 0.8196);
      --accent-a11: color(display-p3 0 0 0 / 0.6078);
      --accent-a12: color(display-p3 0 0 0 / 0.8745);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9725 0.9725 0.9725 / 0.8);
      --accent-indicator: oklch(0% 0 none);
      --accent-track: oklch(0% 0 none);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d8d;
  --grayscale-track: #8d8d8d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.553);
      --grayscale-track: color(display-p3 0.553 0.553 0.553);
    }
  }
}


.dark {
  --accent-1: #1e1e1e;
  --accent-2: #252525;
  --accent-3: #2e2e2e;
  --accent-4: #343434;
  --accent-5: #3a3a3a;
  --accent-6: #424242;
  --accent-7: #4f4f4f;
  --accent-8: #656565;
  --accent-9: #fff;
  --accent-10: #f6f6f6;
  --accent-11: #b5b5b5;
  --accent-12: #eee;

  --accent-a1: #00000000;
  --accent-a2: #ffffff08;
  --accent-a3: #ffffff12;
  --accent-a4: #ffffff19;
  --accent-a5: #ffffff20;
  --accent-a6: #ffffff29;
  --accent-a7: #ffffff38;
  --accent-a8: #ffffff50;
  --accent-a9: #ffffff;
  --accent-a10: #fffffff5;
  --accent-a11: #ffffffab;
  --accent-a12: #ffffffec;

  --accent-contrast: #311921;
  --accent-surface: #2c2c2c80;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(23.5% 0 none);
      --accent-2: oklch(26.5% 0 none);
      --accent-3: oklch(30% 0 none);
      --accent-4: oklch(32.4% 0 none);
      --accent-5: oklch(34.8% 0 none);
      --accent-6: oklch(37.9% 0 none);
      --accent-7: oklch(42.7% 0 none);
      --accent-8: oklch(50.7% 0 none);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0 none);
      --accent-11: oklch(77.4% 0 none);
      --accent-12: oklch(94.9% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 1 1 1 / 0.0311);
      --accent-a3: color(display-p3 1 1 1 / 0.0711);
      --accent-a4: color(display-p3 1 1 1 / 0.0978);
      --accent-a5: color(display-p3 1 1 1 / 0.1244);
      --accent-a6: color(display-p3 1 1 1 / 0.16);
      --accent-a7: color(display-p3 1 1 1 / 0.2178);
      --accent-a8: color(display-p3 1 1 1 / 0.3156);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 1 / 0.96);
      --accent-a11: color(display-p3 1 1 1 / 0.6711);
      --accent-a12: color(display-p3 1 1 1 / 0.9244);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1725 0.1725 0.1725 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6e6e6e;
  --grayscale-track: #6e6e6e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.431 0.431 0.431);
      --grayscale-track: color(display-p3 0.431 0.431 0.431);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 0, 0, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(230, 230, 230, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 255, 255, 1);
  --background: rgba(30, 30, 30, 1);
  --border: rgba(40, 40, 40, 1);
  --sidebar-background: rgba(18, 18, 18, 1);
  --header-background: rgba(18, 18, 18, 1);
  --card-background: rgba(20, 20, 20, 1);
  --theme-color: #1e1e1e;
}

/* Product Switcher Tabs Theme */
:root [data-product-switcher-theme="tabs"] .fern-product-tabs-row {
  border-bottom: 1px solid var(--border-concealed);
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs {
  display: none;
  gap: 4px;
  align-items: stretch;
  padding-inline: var(--spacing-page-margin, 1rem);
  overflow-x: auto;
  scrollbar-width: none;
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {

  :root [data-product-switcher-theme="tabs"] .fern-product-tabs {
    display: flex;
  }

}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--grayscale-11);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger:not([data-active="true"]):hover {
  color: var(--grayscale-12);
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger[data-active="true"] {
  color: var(--accent-11);
  border-bottom-color: var(--accent-9);
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger:not([data-active="true"]):focus-visible {
  color: var(--grayscale-12);
  outline: none;
}

/*
 * The product switcher (Sarvam API / Sarvam Doc AI / Sarvam Creative / API
 * Reference) is Fern's native header row, using Fern's default active-tab
 * underline as-is (a thinner 1px override made the active tab too hard to
 * spot). The "Community" and "API Status" navbar links render as "minimal"
 * fern-buttons (no background, no border) by default, so the outline below
 * is the only way to make them read as buttons rather than plain text
 * (radius matches the default .fern-button rounding used by "Sign Up").
 * Fern only auto-spaces a "minimal" button that follows a filled/outlined
 * one, not two adjacent "minimal" buttons, hence the explicit gap below.
 * All colors use Fern's theme tokens.
 */
.fern-header-navbar-links .fern-button.minimal {
  background-color: transparent;
  border: 1px solid var(--grayscale-a5);
  border-radius: calc(var(--radius) * 2);
}

.fern-header-navbar-links .fern-button.minimal:hover {
  background-color: var(--grayscale-a3);
}
.fern-header-navbar-links .fern-button.minimal:focus-visible {
  background-color: var(--grayscale-a3); outline: none;
}

/* Pin every button in this row to the same explicit height and icon size.
 * Community/Sign Up carry icons and API Status doesn't; letting each
 * button's own icon-driven content box decide the height lets them drift
 * a pixel or two apart instead of lining up exactly. 36px matches the
 * search bar / Ask AI button (Fern's h-9) just to the left of this row. */
.fern-header-navbar-links .fern-button {
  height: 36px;
}

.fern-header-navbar-links .fern-button svg {
  width: 16px;
  height: 16px;
}

.fern-header-navbar-links .fern-button.minimal + .fern-button.minimal {
  margin-left: 8px;
}

/* Fern's native "Ask AI" button (in the searchbar wrapper, just left of this
 * row) sits under the header's own 16px flex gap, double the 8px rhythm
 * between Community/API Status/Sign Up/theme-toggle. Pull this row 8px
 * closer so the Ask AI -> Community gap matches the rest. */
.fern-header-navbar-links {
  margin-left: -8px;
}

/*
 * Line the product switcher row up with the 32px content edge used by the
 * header logo (.fern-header-content padding-inline) and the sidebar section
 * headings. Fern insets this row by `var(--spacing-page-margin, 1rem)`, and
 * that variable is never defined, so the row falls back to 16px; each tab
 * then adds its own 14px of padding. The result is a first tab whose label
 * starts at 30px and whose active underline (a border-bottom on the tab
 * itself, so it spans the padding box) starts at 16px, both short of the
 * 32px line. Inset the row to 32px and drop the first tab's leading padding
 * so the label and the underline both begin exactly on it. Only the leading
 * edge is overridden; the 16px trailing inset still cushions the row's
 * horizontal overflow scroll.
 *
 * Every selector here mirrors Fern's own
 * `:root [data-product-switcher-theme="tabs"] .fern-product-tabs` prefix and
 * adds an element name (nav/a), so each rule outranks Fern's default on
 * specificity alone rather than depending on which stylesheet loads last.
 * A bare `.fern-product-tabs .product-tab-trigger` loses to it outright.
 */
:root [data-product-switcher-theme="tabs"] nav.fern-product-tabs {
  padding-inline-start: 32px;
}

:root [data-product-switcher-theme="tabs"] nav.fern-product-tabs a.product-tab-trigger:first-child {
  padding-inline-start: 0;
}

/* NOTE: this rule has never taken effect. Fern's own
 * `:root [data-product-switcher-theme="tabs"] .fern-product-tabs
 * .product-tab-trigger` sets padding: 10px 14px / font-size: 14px at a higher
 * specificity, so the tabs render at Fern's size, not this one. Left as-is
 * rather than raised to a winning selector, because actually shrinking the
 * tabs is a visual change beyond the alignment fix above; delete it or give
 * it the `nav`/`a` prefix used above if the smaller tabs are wanted. */
.fern-product-tabs .product-tab-trigger {
  padding: 8px 12px;
  font-size: 13px;
}

/* Center Frame/figure caption text for Sarvam Doc AI screenshots. */
figure figcaption {
  display: block !important;
  text-align: center !important;
  text-wrap: pretty;
}

/*
 * Fern only bolds a sidebar section header (semibold, full-strength text
 * color) when it sits at the top of the tree. A section nested inside
 * another section (e.g. "Best Practices" inside "Integration") renders as a
 * plain, muted link instead of a heading. Reapply the same treatment to any
 * collapsible section header regardless of depth, so nested sections read
 * consistently with top-level ones. Leaf page links (plain <a>, not a
 * <button>) are untouched.
 */
button.fern-sidebar-link:not(.fern-sidebar-level-1) {
  font-weight: 600 !important;
  color: var(--grayscale-a12) !important;
}

/*
 * Endpoint links with availability badges enter Fern's wrap mode, which puts
 * the badge on a second line beneath the endpoint title. Keep the title
 * flexible while pinning the compact badge beside it.
 */
.fern-sidebar-link-title.wrap-mode {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.375rem;
}

.fern-sidebar-link-title.wrap-mode .fern-sidebar-link-title-inner {
  flex: 1 1 auto;
  min-width: 0;
}

.fern-sidebar-link-title.wrap-mode .fern-sidebar-link-inline-badge {
  display: inline-flex !important;
  flex: 0 0 auto;
  margin: 0 !important;
}

/*
 * Changelog product filter: replaces Fern's default filter dropdown
 * (.fern-filter-dropdown-button, only rendered on changelog pages with tags)
 * with an always-visible row of tab buttons injected by
 * scripts/changelog-product-tabs.js. Hide the dropdown here since the script
 * builds its own filtering UI instead of driving Fern's.
 */
.fern-changelog-controls .fern-filter-dropdown-button {
  display: none !important;
}

/* Match the tab row below. */
.fern-rss-feed-button {
  border-radius: 6px !important;
}

.sv-changelog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.sv-changelog-tabs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--card-border, var(--grayscale-a5));
  background-color: var(--card-background);
  color: var(--grayscale-a11);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sv-changelog-tabs-btn:hover {
  border-color: var(--accent-a7);
}
.sv-changelog-tabs-btn:focus-visible {
  border-color: var(--accent-a7); outline: none;
}

.sv-changelog-tabs-btn[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.sv-changelog-hidden {
  display: none !important;
}

/*
 * Expandable card previews on the /changelog listing
 * (scripts/changelog-product-tabs.js): Fern gives every card preview a
 * max-height of 64px, overflow:hidden and a mask fading out the cut, with
 * no way to open it again. The toggle the script injects lifts exactly
 * that - max-height and mask together - and the transition lives on the
 * collapsible marker rather than on .sv-changelog-expanded so it is still
 * declared on the way back down. The script drives the animation itself by
 * measuring the content and setting max-height inline for the duration.
 */
.fern-changelog-card-preview.sv-changelog-collapsible {
  transition: max-height 0.22s ease;
}

.fern-changelog-card-preview.sv-changelog-expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Fern stretches the card title's own <a> across the whole card via an
   inset ::after at z-index 10, so the toggle has to sit above that overlay
   or the click navigates to the entry page instead. */
.sv-changelog-more {
  position: relative;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--grayscale-a11);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.sv-changelog-more:hover {
  color: var(--grayscale-a12);
}

.sv-changelog-more:focus-visible {
  color: var(--grayscale-a12);
  border-radius: 4px;
  outline: 1px solid var(--accent-a7);
  outline-offset: 2px;
}

.sv-changelog-more svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.22s ease;
}

.sv-changelog-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

  .fern-changelog-card-preview.sv-changelog-collapsible,
  .sv-changelog-more svg {
    transition: none;
  }

}

/*
 * Single-entry changelog page (/changelog/YYYY/M/D): the "Change Log"
 * back-link renders the chevron and the heading inside one flex box whose
 * own negative margin only cancels its matching padding, not the icon+gap
 * width before the text - so "Change Log" sits ~32px right of the date
 * badge/heading/body below it. Shift the whole link left by that
 * icon(24px)+gap(8px) so the heading text lines up with everything
 * underneath, and the chevron sits in the gutter.
 */
section.fern-changelog-content header a.group {
  margin-left: -3.75rem;
}

/*
 * Native "Request a feature" dialog (scripts/changelog-feature-request.js):
 * the changelog overview's mailto button opens this instead of the email
 * client. The <dialog> element itself provides focus trapping, Esc, and
 * top-layer stacking; these rules only skin it, with the same tokens as
 * the product tab row above. The dialog carries no padding of its own —
 * clicks that land on the dialog element are backdrop clicks, which the
 * script closes on — so all visible surface belongs to .sv-feature-box.
 * Entrance/exit uses @starting-style on the dialog's own open/close state
 * (the platform-native way to animate <dialog>/::backdrop across the
 * top-layer transition) rather than a class toggle.
 */
dialog.sv-feature-dialog {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--card-border, var(--grayscale-a5));
  border-radius: calc(var(--radius) * 2);
  background-color: var(--card-background);
  color: var(--grayscale-a12);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.03),
    0 8px 24px -6px rgba(0, 0, 0, 0.18),
    0 24px 48px -12px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
}

dialog.sv-feature-dialog[open] {
  opacity: 1;
  transform: none;
}

@starting-style {

  dialog.sv-feature-dialog[open] {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

}

dialog.sv-feature-dialog::backdrop {
  background-color: rgba(9, 9, 11, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
}

dialog.sv-feature-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {

  dialog.sv-feature-dialog[open]::backdrop {
    opacity: 0;
  }

}

@media (prefers-reduced-motion: reduce) {

  dialog.sv-feature-dialog,
  dialog.sv-feature-dialog::backdrop {
    transition: none;
    transform: none;
  }

}

.sv-feature-box {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  max-height: calc(100vh - 4rem);
  overflow: auto;
}

.sv-feature-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 1.75rem;
}

.sv-feature-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background-color: var(--accent-a3, var(--grayscale-a3));
  color: var(--accent-a11, var(--accent));
}

.sv-feature-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.sv-feature-headtext {
  min-width: 0;
}

.sv-feature-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-feature-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--grayscale-a11);
}

.sv-feature-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--grayscale-a10, var(--grayscale-a11));
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sv-feature-close:hover {
  background-color: var(--grayscale-a3);
  color: var(--grayscale-a12);
}

.sv-feature-close:focus-visible {
  outline: 2px solid var(--accent-a7);
  outline-offset: 1px;
}

.sv-feature-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sv-feature-group {
  border: 0;
  margin: 0;
  padding: 0;
}

.sv-feature-legend {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grayscale-a11);
}

.sv-feature-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.sv-feature-product {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--card-border, var(--grayscale-a5));
  background-color: var(--card-background);
  color: var(--grayscale-a11);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.sv-feature-product:hover {
  border-color: var(--accent-a7);
  transform: translateY(-1px);
}
.sv-feature-product:focus-visible {
  border-color: var(--accent-a7);
  transform: translateY(-1px); outline: none;
}

.sv-feature-product input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sv-feature-product:has(input:checked) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  padding-left: 0.7rem;
}

.sv-feature-product:has(input:checked)::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sv-feature-product:has(input:focus-visible) {
  outline: 2px solid var(--accent-a7);
  outline-offset: 1px;
}

.sv-feature-field {
  display: flex;
  flex-direction: column;
}

.sv-feature-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sv-feature-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grayscale-a11);
}

.sv-feature-count {
  margin: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--grayscale-a9, var(--grayscale-a11));
}

.sv-feature-input,
.sv-feature-textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--card-border, var(--grayscale-a5));
  background-color: var(--card-background);
  color: var(--grayscale-a12);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sv-feature-input::placeholder,
.sv-feature-textarea::placeholder {
  color: var(--grayscale-a9, var(--grayscale-a11));
}

.sv-feature-input:hover,
.sv-feature-textarea:hover {
  border-color: var(--grayscale-a7);
}

.sv-feature-input:focus-visible,
.sv-feature-textarea:focus-visible {
  outline: none;
  border-color: var(--accent-a7);
  box-shadow: 0 0 0 3px var(--accent-a4, var(--accent-a3));
}

.sv-feature-textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.5;
}

.sv-feature-input[aria-invalid="true"],
.sv-feature-textarea[aria-invalid="true"] {
  border-color: var(--red-a8, #e5484d);
}

.sv-feature-error {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--red-a11, #e5484d);
}

.sv-feature-error svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.1rem;
}

.sv-feature-error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sv-feature-formerror {
  margin-top: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  background-color: var(--red-a3, rgba(229, 72, 77, 0.08));
}

.sv-feature-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.sv-feature-cancel,
.sv-feature-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}

.sv-feature-cancel {
  border: 1px solid var(--card-border, var(--grayscale-a5));
  background-color: var(--card-background);
  color: var(--grayscale-a11);
}

.sv-feature-cancel:hover {
  border-color: var(--accent-a7);
  color: var(--grayscale-a12);
}

.sv-feature-submit {
  border: 1px solid var(--accent);
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.sv-feature-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}
.sv-feature-submit:focus-visible:not(:disabled) {
  filter: brightness(1.08); outline: none;
}

.sv-feature-submit:active:not(:disabled) {
  transform: translateY(1px);
}

.sv-feature-cancel:focus-visible,
.sv-feature-submit:focus-visible {
  outline: 2px solid var(--accent-a7);
  outline-offset: 1px;
}

.sv-feature-submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.sv-feature-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.sv-feature-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.4rem;
  border-radius: 50%;
  background-color: var(--green-a3, var(--accent-a3));
  color: var(--green-a11, var(--accent-a11, var(--accent)));
}

.sv-feature-success-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sv-feature-success-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.sv-feature-success-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grayscale-a11);
}

.sv-feature-success .sv-feature-submit {
  margin-top: 0.5rem;
}

/* =========================================================================
 * Landing page styles — scoped to `.sv-home`, which only ever wraps
 * ../pages/home.mdx (the site root, docs.sarvam.ai). That page uses
 * `layout: custom`, so Fern renders no sidebar, no TOC, and no content
 * padding: every dimension below is ours to set.
 *
 * Colors come from Fern's Radix-style theme tokens (--grayscale-a1..a12,
 * --background) so the page tracks the light/dark palettes declared in
 * docs.yml instead of hardcoding a second source of truth. The exceptions
 * are the --sv-btn-* pair below: the CTAs intentionally match sarvam.ai's
 * own buttons (sampled from the live site) rather than Fern's theme, and
 * that navy/white pair is a fixed brand pairing, not a light/dark toggle,
 * so it does not invert with the docs theme the way accent-primary does.
 * ========================================================================= */

.sv-home {
  --sv-fg: var(--grayscale-a12);
  --sv-fg-muted: var(--grayscale-a11);
  --sv-fg-subtle: var(--grayscale-a10);
  --sv-line: var(--grayscale-a4);
  --sv-line-strong: var(--grayscale-a6);
  --sv-surface: var(--grayscale-a2);
  --sv-surface-hover: var(--grayscale-a3);
  /* A hair lighter than --sv-line, just for card borders: with the shadow
   * doing most of the definition now, the border only needs to close the
   * shape, not compete with it — --sv-line read as a visibly gray outline
   * against a white card. */
  --sv-card-border: var(--grayscale-a3);
  --sv-solid-bg: #111111;
  --sv-solid-fg: #ffffff;

  /* sarvam.ai's "Sign up" navy and "Contact Us" off-white, sampled directly
   * from the live site's buttons. */
  --sv-btn-navy: #2b2f47;
  --sv-btn-navy-hover: #363b58;
  --sv-btn-light: #f7f8fa;
  --sv-btn-light-hover: #eceef2;

  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px 96px;
  color: var(--sv-fg);
  font-size: 16px;
  line-height: 1.55;
}

/* Fern toggles the theme with a class on <html>; cover the data-attribute
 * form too in case a future version switches to it. */
.dark .sv-home,
[data-theme="dark"] .sv-home {
  --sv-solid-bg: #ffffff;
  --sv-solid-fg: #111111;
  /* Dark cards lean on the border for shape (no real drop shadow works on a
   * dark surface), so keep it at the stronger --sv-line here rather than
   * following light mode's lighter treatment. */
  --sv-card-border: var(--sv-line);
}

@media (max-width: 640px) {

  .sv-home {
    padding: 0 20px 64px;
  }

}

/* Nothing on this page uses prose defaults; zero out the margins Fern's
 * typography layer would otherwise apply to bare headings/paragraphs. */
.sv-home h1,
.sv-home h2,
.sv-home h3,
.sv-home h4,
.sv-home p,
.sv-home ul,
.sv-home li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

/* `:where()` contributes no specificity, so this reset sits at plain
 * `.sv-home` weight (0,1,0) and every `.sv-btn-primary` / `.sv-section-link`
 * color below outranks it by source order. Without it the reset wins on
 * specificity and paints the primary button's label white-on-white. */
.sv-home :where(a) {
  text-decoration: none;
  color: inherit;
}

/* Fern marks the first product's tab active (`data-active="true"`, plus
 * `aria-current="page"`) on every route it serves, including this landing
 * page — which belongs to no product. Drop the visual active treatment while
 * the landing page is on screen so the tab row doesn't claim the reader is
 * already inside Model APIs. `aria-current` is emitted by Fern and can't be
 * corrected from a stylesheet; only the visual half is fixed here.
 *
 * The selector mirrors Fern's own prefix and adds nav/a element names, so it
 * outranks the default on specificity rather than on load order. */
html:has(.sv-home) [data-product-switcher-theme="tabs"] nav.fern-product-tabs a.product-tab-trigger[data-active="true"] {
  color: var(--grayscale-a11);
  border-bottom-color: transparent;
}

html:has(.sv-home) [data-product-switcher-theme="tabs"] nav.fern-product-tabs a.product-tab-trigger[data-active="true"]:hover {
  color: var(--grayscale-12);
}
html:has(.sv-home) [data-product-switcher-theme="tabs"] nav.fern-product-tabs a.product-tab-trigger[data-active="true"]:focus-visible {
  color: var(--grayscale-12); outline: none;
}

/* ------------------------------------------------------------------ hero */

/* No bottom padding here: the language strip already closes the hero with
 * its own divider, and .sv-paths right below supplies the next one. Two
 * dividers with a full padding gap on each side of the boundary between
 * them was reading as a dead, un-designed strip of blank space. */
.sv-hero {
  display: flex;
  flex-direction: column;
  padding: 88px 0 0;
}

@media (max-width: 640px) {

  .sv-hero {
    padding: 60px 0 0;
  }

}

.sv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 56px;
}

@media (max-width: 900px) {

  .sv-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

}

.sv-hero-copy {
  max-width: 560px;
}

/* ------------------------------------------------------- stitch panel */

/* A nod to Sarvam Epoch's Stitch playground (epoch.sarvam.ai/playground):
 * a piece of aida cloth that embroiders itself, thread by thread, on hover.
 * Deliberately monochrome — the docs palette is black/white/grey, so the
 * three thread tones below are all grayscale steps rather than colours.
 *
 * The motif is a 21x16 cross-stitch butterfly. Each cell is one stitch,
 * placed with `grid-area: <row> / <col>`, and carries its own
 * transition-delay (generated from its distance to the centre) so the
 * piece stitches outward from the body instead of all at once. */
.sv-stitch {
  /* Square cloth (cols == rows). Since the cells are square and the panel
   * padding is uniform, this is what makes the card itself square — no
   * explicit aspect-ratio on the card needed. */
  --sv-stitch-cols: 31;
  --sv-stitch-rows: 31;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 26px;
  border: 1px solid var(--sv-card-border);
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--background);
  box-shadow: var(--sv-card-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sv-stitch:hover {
  border-color: var(--sv-line-strong);
  box-shadow: var(--sv-card-shadow-hover);
}
.sv-stitch:focus-visible {
  border-color: var(--sv-line-strong);
  box-shadow: var(--sv-card-shadow-hover); outline: none;
}

/* The canvas carries the grid's own aspect ratio so every cell stays a
 * true square — stretching them to fill an arbitrary panel shape makes the
 * X's lopsided and instantly kills the cross-stitch read. */
.sv-stitch-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sv-stitch-cols) / var(--sv-stitch-rows);
}

/* The aida-cloth weave: a faint square grid, sized to line up exactly with
 * the stitch cells so threads sit *in* the holes rather than floating over
 * an unrelated background pattern. */
.sv-stitch-fabric {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--sv-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sv-line) 1px, transparent 1px);
  background-size: calc(100% / var(--sv-stitch-cols)) calc(100% / var(--sv-stitch-rows));
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.sv-stitch:hover .sv-stitch-fabric {
  opacity: 0.8;
}
.sv-stitch:focus-within .sv-stitch-fabric {
  opacity: 0.8; outline: none;
}

.sv-stitch-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--sv-stitch-cols), 1fr);
  grid-template-rows: repeat(var(--sv-stitch-rows), 1fr);
}

/* One stitch. At rest the thread sits faint and slightly shrunk — the piece
 * reads as a printed pattern on the cloth rather than an empty box. On hover
 * each thread is pulled through to full strength, sweeping left to right so
 * the word writes itself. The X is two crossed diagonal gradients, which is
 * what actually sells "cross-stitch" over a plain filled pixel. */
.sv-stitch-cell {
  background-image:
    linear-gradient(45deg, transparent 30%, currentColor 30%, currentColor 47%, transparent 47%),
    linear-gradient(-45deg, transparent 30%, currentColor 30%, currentColor 47%, transparent 47%);
  opacity: 0.22;
  transform: scale(0.62) rotate(-10deg);
  transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.sv-stitch:hover .sv-stitch-cell {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.sv-stitch:focus-within .sv-stitch-cell {
  opacity: 1;
  transform: scale(1) rotate(0deg); outline: none;
}

/* Three thread tones, all grayscale (black / grey / white per the docs
 * palette). `currentColor` drives the X gradients above, so setting `color`
 * here is what tints each thread. */
.sv-t1 { color: var(--grayscale-a7); }
.sv-t2 { color: var(--grayscale-a9); }
.sv-t3 { color: var(--grayscale-a12); }

/* The whole effect is decorative motion; honour a reduced-motion request by
 * showing the finished piece outright and dropping the stagger. */
@media (prefers-reduced-motion: reduce) {

  .sv-stitch-cell {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s !important;
  }

}

/* A line of the languages themselves, set in their own scripts, stands in
 * for the code sample this hero used to lead with — something that reads
 * as Sarvam's specifically (nobody else's dev-docs homepage can reuse this
 * line) rather than another generic headline/subhead/CTA template. */
.sv-lang-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 14px;
  column-gap: 18px;
  margin-top: 40px !important;
  padding-top: 28px;
  border-top: 1px solid var(--sv-line);
}

.sv-lang-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sv-fg-subtle);
  margin-right: 14px;
}

.sv-lang-strip span:not(.sv-lang-label) {
  font-size: 16px;
  color: var(--sv-fg-muted);
}

/* Forces the wrap after Gujarati: a zero-height flex item taking a full row
 * pushes everything after it onto the next line, so the break holds at that
 * exact language instead of landing wherever the row happens to run out. */
.sv-lang-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-fg-subtle);
  margin-bottom: 20px !important;
}

.sv-hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.sv-hero-sub {
  margin-top: 20px !important;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sv-fg-muted);
  max-width: 34em;
  text-wrap: pretty;
}

/* flex-start, not center: the hero is left-aligned (headline, subhead), so
 * the buttons need to start flush with that same left edge, not centered
 * within the row and sitting indented relative to everything above them. */
.sv-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 32px !important;
}

/* Sized to match sarvam.ai's actual CTAs more closely: taller, more
 * generous horizontal padding, and a heavier label weight than a typical
 * docs button — these read as the site's marketing buttons, not the
 * smaller in-page UI controls around them. */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 58px;
  padding: 0 38px;
  border-radius: 999px;
  border: none;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* sarvam.ai's own "Sign up" pill: solid navy, white text, a soft shadow
 * for lift rather than a border or hover-fade. */
.sv-btn-primary {
  background-color: var(--sv-btn-navy);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 10px 22px -12px rgba(43, 47, 71, 0.6);
}

.sv-btn-primary:hover {
  background-color: var(--sv-btn-navy-hover);
}
.sv-btn-primary:focus-visible {
  background-color: var(--sv-btn-navy-hover); outline: none;
}

/* sarvam.ai's "Contact Us" pill: off-white, no border, the same soft
 * shadow language as the primary button. */
.sv-btn-secondary {
  background-color: var(--sv-btn-light);
  color: var(--sv-btn-navy);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 22px -14px rgba(0, 0, 0, 0.3);
}

.sv-btn-secondary:hover {
  background-color: var(--sv-btn-light-hover);
}
.sv-btn-secondary:focus-visible {
  background-color: var(--sv-btn-light-hover); outline: none;
}

/* -------------------------------------------------------------- sections */

.sv-section {
  padding-top: 72px;
}

@media (max-width: 640px) {

  .sv-section {
    padding-top: 52px;
  }

}

.sv-section-rule {
  padding-top: 72px;
  border-top: 1px solid var(--sv-line);
  margin-top: 72px;
}

@media (max-width: 640px) {

  .sv-section-rule {
    padding-top: 52px;
    margin-top: 52px;
  }

}

.sv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px !important;
}

.sv-section-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sv-section-desc {
  margin-top: 8px !important;
  font-size: 15px;
  color: var(--sv-fg-muted);
  max-width: 44em;
}

.sv-section-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--sv-fg-muted);
  white-space: nowrap;
}

.sv-section-link:hover {
  color: var(--sv-fg);
}
.sv-section-link:focus-visible {
  color: var(--sv-fg); outline: none;
}

/* ----------------------------------------------------------------- grids */

.sv-grid {
  display: grid;
  gap: 20px;
}

.sv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1040px) {

  .sv-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

@media (max-width: 900px) {

  .sv-grid-3,
  .sv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 640px) {

  .sv-grid-2,
  .sv-grid-3,
  .sv-grid-4 { grid-template-columns: minmax(0, 1fr); }

}

/* ----------------------------------------------------------- three paths */

/* The row directly under the hero: no card box and no divider (the language
 * strip right above already closes the hero with its own hairline), so this
 * reads as an outline of the site rather than a third grid of buttons
 * competing with the product cards below it. */
.sv-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 40px;
}

@media (max-width: 900px) {

  .sv-paths {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

}

.sv-path-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-path-desc {
  margin-top: 8px !important;
  font-size: 15px;
  color: var(--sv-fg-muted);
}

.sv-path-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 14px !important;
}

.sv-path-links a {
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--sv-line-strong);
  padding-bottom: 1px;
}

.sv-path-links a:hover {
  border-bottom-color: currentColor;
}
.sv-path-links a:focus-visible {
  border-bottom-color: currentColor; outline: none;
}

/* ----------------------------------------------------------------- cards */

/* Soft-shadow elevation, like the buttons, instead of a flat border doing
 * all the work. Shadows read as depth in light mode but go muddy on a dark
 * surface, so dark mode leans on an inset hairline highlight instead — same
 * "lifted" intent, without the smudged look a dark-on-dark shadow gets. */
.sv-home {
  --sv-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 24px -18px rgba(0, 0, 0, 0.18);
  --sv-card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 18px 32px -16px rgba(0, 0, 0, 0.22);
}

.dark .sv-home,
[data-theme="dark"] .sv-home {
  --sv-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sv-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sv-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--sv-card-border);
  border-radius: 16px;
  background-color: var(--background);
  box-shadow: var(--sv-card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.sv-card:hover {
  transform: translateY(-2px);
  border-color: var(--sv-line-strong);
  background-color: var(--sv-surface);
  box-shadow: var(--sv-card-shadow-hover);
}
.sv-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--sv-line-strong);
  background-color: var(--sv-surface);
  box-shadow: var(--sv-card-shadow-hover); outline: none;
}

.sv-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--sv-surface);
  color: var(--sv-fg);
  font-size: 14px;
  margin-bottom: 16px !important;
}

.sv-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-card-desc {
  margin-top: 6px !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sv-fg-muted);
  text-wrap: pretty;
}

/* "Explore the platform" is the primary hub grid — a touch more room than
 * the denser guide/cookbook grids below it, short of a distinct card style. */
.sv-card-lg {
  padding: 26px;
  min-height: 156px;
  justify-content: space-between;
}

/* Integrations run four-up and carry no icon (Font Awesome has no marks for
 * LiveKit, Pipecat, Vapi, n8n and friends, and a row of mismatched
 * placeholders reads worse than none). Tighter padding and a smaller
 * description keep eight of them from dominating the page. */
.sv-card-compact {
  padding: 18px;
}

.sv-card-compact .sv-card-desc {
  font-size: 13px;
  line-height: 1.45;
}

/* A small filled pill, not a thin outline — reads as a badge/button rather
 * than a stray line of caps text crowding the title next to it. */
.sv-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sv-fg-muted);
  background-color: var(--sv-surface-hover);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- models */

/* A bordered table-like stack rather than a <table>: it collapses to a
 * readable two-line block on narrow screens without a horizontal scroller. */
.sv-models {
  border: 1px solid var(--sv-line);
  border-radius: 12px;
  overflow: hidden;
}

.sv-model-row {
  display: grid;
  grid-template-columns: 200px 150px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 16px 20px;
  border-top: 1px solid var(--sv-line);
  transition: background-color 0.15s ease;
}

.sv-model-row:first-child {
  border-top: 0;
}

.sv-model-row:hover {
  background-color: var(--sv-surface);
}
.sv-model-row:focus-visible {
  background-color: var(--sv-surface); outline: none;
}

.sv-model-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-model-kind {
  font-size: 13px;
  color: var(--sv-fg-subtle);
}

.sv-model-desc {
  font-size: 14px;
  color: var(--sv-fg-muted);
}

@media (max-width: 760px) {

  .sv-model-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

}

/* ------------------------------------------------------------- what's new */

/* The lead item is marked out with a "Latest" badge and a slightly raised
 * surface (its own resting background, not just on hover) — not a left
 * accent bar or an inverted banner — so it reads as this page's changelog
 * highlight, not a borrowed promo-card pattern. */
.sv-news-feature {
  display: block;
  padding: 24px 28px;
  border: 1px solid var(--sv-line);
  border-radius: 16px;
  background-color: var(--sv-surface);
  box-shadow: var(--sv-card-shadow);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sv-news-feature:hover {
  background-color: var(--sv-surface-hover);
  border-color: var(--sv-line-strong);
  box-shadow: var(--sv-card-shadow-hover);
}
.sv-news-feature:focus-visible {
  background-color: var(--sv-surface-hover);
  border-color: var(--sv-line-strong);
  box-shadow: var(--sv-card-shadow-hover); outline: none;
}

.sv-news-feature-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-fg-subtle);
  margin-bottom: 14px !important;
}

.sv-news-feature-date::before {
  content: "Latest";
  display: inline-flex;
  align-items: center;
  color: var(--sv-fg);
  background-color: var(--background);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sv-news-feature-title {
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 32em;
}

.sv-news-feature-desc {
  display: block;
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sv-fg-muted);
  max-width: 40em;
}

.sv-news-feature-desc code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: var(--sv-surface-hover);
}

.sv-news-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--sv-fg);
}

/* The remaining items stay compact — secondary to the feature card, not a
 * second tier of equally-weighted headlines. */
.sv-news-list {
  margin-top: 12px !important;
}

.sv-news-item {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--sv-line);
}

.sv-news-date {
  flex: 0 0 96px;
  font-size: 13px;
  color: var(--sv-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.sv-news-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-news-desc {
  display: block;
  margin-top: 4px !important;
  font-size: 13px;
  color: var(--sv-fg-muted);
}

.sv-news-desc code {
  font-size: 0.92em;
  padding: 1px 4px;
  border-radius: 4px;
  background-color: var(--sv-surface-hover);
}

@media (max-width: 640px) {

  .sv-news-feature {
    padding: 24px;
  }

  .sv-news-item {
    flex-direction: column;
    gap: 6px;
  }

}

/* ------------------------------------------------------------- resources */

.sv-resources {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 900px) {

  .sv-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 480px) {

  .sv-resources { grid-template-columns: minmax(0, 1fr); }

}

.sv-resource-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-fg-subtle);
  margin-bottom: 12px !important;
}

/* Fern's MDX renderer swaps every <ul>/<li> for its own components and stamps
 * Tailwind utilities straight onto the element — including
 * `[&>li]:before:content-['⦁']` and `pl-3`, which draw a bullet as generated
 * content and indent for it. `list-style: none` in the reset above never had
 * anything to remove. These footer columns are link lists, not prose bullets,
 * so the dot and its indent both go. `!important` is the only lever that
 * reliably outranks a utility class stamped on the element itself. */
.sv-home ul.sv-resource-list > li::before {
  display: none !important;
  content: none !important;
}

.sv-home ul.sv-resource-list,
.sv-home ul.sv-resource-list > li {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.sv-resource-list li + li {
  margin-top: 8px !important;
}

.sv-resource-list a {
  font-size: 14px;
  color: var(--sv-fg-muted);
}

.sv-resource-list a:hover {
  color: var(--sv-fg);
}
.sv-resource-list a:focus-visible {
  color: var(--sv-fg); outline: none;
}