@font-face {
  font-family: "Onest";
  src: url("/docs/assets/branding/Onest-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("/docs/assets/branding/Onest-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

html:root,
html[data-theme="light"],
body[data-theme="light"] {
  --rr-green: #00b980;
  --rr-green-text: #007a56;
  --rr-black: #181a19;
  --rr-white: #ffffff;
  --rr-mint: #e9f9f4;
  --rr-border: #dfe8e4;
  --rr-muted-text: #66736d;
  --rr-hover-bg: rgba(0, 185, 128, 0.08);
  --rr-scroll-thumb: rgba(0, 122, 86, 0.42);
  --rr-scroll-thumb-hover: rgba(0, 122, 86, 0.64);
  --rr-scroll-track: rgba(0, 185, 128, 0.06);

  --color-secondary: var(--rr-green);
  --color-secondary-dark: #009d6c;
  --color-focus: var(--rr-green);
  --color-link: var(--rr-green-text);
  --color-line: var(--rr-border);
  --color-scroll: var(--rr-scroll-thumb);
  --color-scroll-bg: var(--rr-scroll-track);
  --color-shadows-scroll: rgba(0, 122, 86, 0.15);
  --color-lev-sidebar-hover: var(--rr-hover-bg);
  --color-block: #f7faf9;
  --color-block-hover: var(--rr-mint);
  --color-image-line: var(--rr-border);
  --color-article-text: var(--rr-black);
  --color-article-heading-text: var(--rr-black);
  --color-article-strong-text: var(--rr-black);
  --color-article-bg: var(--rr-white);
  --color-menu-bg: #f5f8f7;
  --color-menu-opacity-bg: #f5f8f7e8;
  --color-contextmenu-bg: #f7faf9;
  --color-background-muted: #f1f7f5;
  --color-input-bg: #ffffff;
  --color-input-active-text: var(--rr-black);
  --color-placeholder: var(--rr-muted-text);
  --color-cmd-text: var(--rr-black);
  --color-cmd-bg: #f1f7f5;
  --color-cmd-border: var(--rr-border);
  --color-kbd-text: var(--rr-muted-text);
  --color-kbd-border: var(--rr-border);
  --color-kbd-bg: #ffffff;
  --color-nav-article-drop-target: rgba(0, 185, 128, 0.18);
  --search-badge-recommended-bg: var(--rr-mint);
  --search-badge-recommended-text: var(--rr-green-text);
  --color-table-border: #dfe8e4;
  --color-table-row-hover: #f1faf7;
  --color-nav-item-selected: var(--rr-green-text);
  --color-home-card-border: var(--rr-border);
  --color-home-card-border-hover: rgba(0, 185, 128, 0.5);
}

/* Gramax defaults still contain a cold blue navigation hover and blue-gray
   scrollbars. Keep all ordinary interaction chrome in the Result.Rest palette;
   semantic information blocks and source screenshots retain their own colors. */
* {
  scrollbar-color: var(--rr-scroll-thumb) var(--rr-scroll-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: var(--rr-scroll-track) !important;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px !important;
  background: var(--rr-scroll-thumb) !important;
  background-clip: padding-box !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--rr-scroll-thumb-hover) !important;
  background-clip: padding-box !important;
}

/* Gramax dropdowns ship with a fixed navy surface. Reuse the active
   Result.Rest theme so catalog and article menus belong to the same UI. */
[data-qa="dropdown-content"][role="menu"] {
  border-color: var(--rr-border) !important;
  color: var(--color-article-text) !important;
  background: var(--color-contextmenu-bg) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18) !important;
}

[data-qa="dropdown-content"][role="menu"] > :not([role]),
[data-qa="dropdown-content"][role="menu"] [role="menuitem"] {
  color: inherit !important;
}

[data-qa="dropdown-content"][role="menu"] [role="separator"] {
  background: var(--rr-border) !important;
}

[data-qa="dropdown-content"][role="menu"] [role="menuitem"] {
  background: transparent !important;
}

[data-qa="dropdown-content"][role="menu"] [role="menuitem"]:is(:hover, :focus, [data-state="open"]) {
  color: var(--color-article-strong-text) !important;
  background: rgba(0, 185, 128, 0.1) !important;
}

[data-qa="dropdown-content"][role="menu"] [role="menuitem"]:has(.lucide-trash):is(:hover, :focus) {
  color: #e7685d !important;
  background: rgba(231, 104, 93, 0.1) !important;
}

body,
button,
input,
textarea,
select {
  --app-font-famaly: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
}

/* Gramax renders internal-link previews through a separate article provider
   which resets the font to Roboto. Keep these hover previews in the same
   Result.Rest typography as the article without changing their compact scale. */
.tooltip-article,
.tooltip-article .article,
.tooltip-article .article-body,
.tooltip-article article,
.tooltip-article :is(p, li, a, span, em, strong, b) {
  --app-font-famaly: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.tooltip-article .link-popup-title {
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: 500;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 185, 128, 0.38);
  outline-offset: 2px;
}

article img {
  border-radius: 14px;
}

.article-page-wrapper article img[data-rr-zoomable] {
  cursor: zoom-in;
}

.article-page-wrapper article img[data-rr-zoomable]:focus-visible {
  outline: 3px solid rgba(0, 185, 128, 0.5);
  outline-offset: 4px;
}

body.rr-image-zoom-open {
  overflow: hidden !important;
}

.rr-image-zoom[hidden] {
  display: none !important;
}

.rr-image-zoom {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  overflow: hidden;
  color: #ffffff;
  background: rgba(12, 14, 13, 0.96);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.rr-image-zoom.is-open {
  opacity: 1;
}

.rr-image-zoom-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.rr-image-zoom-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

.rr-image-zoom-canvas.is-zoomed {
  cursor: grab;
  transition: none;
}

.rr-image-zoom-image {
  display: block;
  width: auto;
  max-width: min(92vw, 1600px);
  height: auto;
  max-height: calc(100dvh - 150px);
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34) !important;
  object-fit: contain;
  pointer-events: none;
}

.rr-image-zoom-close,
.rr-image-zoom-controls button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(34, 38, 36, 0.88);
  font: 500 18px/1 "Onest", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rr-image-zoom-close:hover,
.rr-image-zoom-controls button:hover {
  border-color: rgba(82, 224, 179, 0.72);
  background: rgba(48, 55, 51, 0.96);
}

.rr-image-zoom-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
}

.rr-image-zoom-close svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.rr-image-zoom-controls {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.rr-image-zoom-controls .rr-image-zoom-reset {
  padding-inline: 14px;
  font-size: 13px;
}

.rr-image-zoom-value {
  width: 58px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.rr-image-zoom-caption {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  max-width: min(60vw, 720px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.rr-image-zoom-hint {
  display: none;
}

/* Gramax renders a catalog-scope selector even when no alternative scope is
   available. Hiding the inert control avoids promising a dropdown that cannot
   open; search continues to cover the current documentation catalog. */
[role="dialog"]:has(input[placeholder="Введите запрос"]) .bottom-content-filter-dropdown-trigger {
  display: none !important;
}

@media (max-width: 639px) {
  .rr-image-zoom-image {
    max-width: 94vw;
    max-height: calc(100dvh - 170px);
    border-radius: 6px !important;
  }

  .rr-image-zoom-caption {
    top: max(72px, calc(env(safe-area-inset-top) + 56px));
    max-width: calc(100vw - 32px);
    font-size: 13px;
  }

  .rr-image-zoom-hint {
    position: absolute;
    right: 16px;
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 68px));
    left: 16px;
    display: block;
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
  }
}

article table {
  border-radius: 12px;
  overflow: hidden;
}

::selection {
  color: var(--rr-black);
  background: rgba(0, 185, 128, 0.28);
}

/* Documentation landing page. The source stays ordinary Markdown; the public
   runtime only groups its semantic blocks for a clearer visual hierarchy. */
body[data-rr-docs-home="true"] {
  --rr-home-surface: #ffffff;
  --rr-home-surface-soft: #f4f8f6;
  --rr-home-ink-muted: #65706b;
  --rr-home-shadow: 0 18px 48px rgba(24, 26, 25, 0.07);
}

@media (max-width: 899px) {
  body[data-rr-docs-home="true"] .right-nav-layout,
  body[data-rr-academy-home="true"] .right-nav-layout {
    display: none !important;
  }
}

.rr-docs-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 6px 0 42px;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(0, 185, 128, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 91% 15%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.05) 22%, transparent 44%),
    linear-gradient(135deg, #f3fbf8 0%, #ffffff 58%, #eef9f5 100%);
  box-shadow: var(--rr-home-shadow);
}

.rr-docs-home-hero::before,
.rr-docs-home-hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(0, 185, 128, 0.22);
  border-radius: 50%;
  content: "";
}

.rr-docs-home-hero::before {
  width: 210px;
  height: 210px;
  top: -112px;
  right: 82px;
}

.rr-docs-home-hero::after {
  width: 112px;
  height: 112px;
  right: -34px;
  bottom: -42px;
  background: rgba(0, 185, 128, 0.05);
}

.rr-docs-home-hero .article-title {
  max-width: 760px;
  margin: 0 0 20px !important;
  color: var(--rr-black);
  font-size: clamp(42px, 6vw, 68px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em;
  line-height: 1.02 !important;
}

.rr-docs-home-hero > p {
  max-width: 780px;
  margin: 0 0 12px;
  color: #46504c;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.58;
}

.rr-docs-home-hero > p + p {
  color: #66716c;
  font-size: 15px;
}

.rr-docs-home-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-docs-home-actions li::before {
  display: none !important;
  content: none !important;
}

.rr-docs-home-actions li,
.rr-docs-home-actions li p {
  margin: 0 !important;
}

.rr-docs-home-actions a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 20px;
  border: 1px solid rgba(0, 185, 128, 0.38);
  border-radius: 14px;
  color: #007a56 !important;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  line-height: 22px;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(24, 26, 25, 0.04);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rr-docs-home-actions li:first-child a {
  border-color: var(--rr-green);
  color: #ffffff !important;
  background: var(--rr-green);
}

.rr-docs-home-actions a:hover {
  transform: translateY(-2px);
  border-color: var(--rr-green);
  box-shadow: 0 12px 24px rgba(0, 185, 128, 0.13);
}

.rr-docs-home-start {
  margin: 0 0 42px;
}

.rr-docs-home-start > h2,
.rr-docs-home-group > h2,
.rr-docs-home-help > h2 {
  margin: 0 !important;
  color: var(--color-article-heading-text);
  font-size: clamp(24px, 2.8vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.2 !important;
}

.rr-docs-home-start > ol {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  counter-reset: none;
  list-style: none !important;
}

.rr-docs-home-start > ol > li {
  position: relative;
  min-height: 188px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 64px 20px 20px;
  border: 1px solid var(--rr-border);
  border-radius: 20px;
  color: var(--rr-home-ink-muted);
  background: var(--rr-home-surface);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(24, 26, 25, 0.035);
}

.rr-docs-home-start > ol > li::before {
  display: none !important;
  content: none !important;
}

.rr-docs-home-step-index {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: var(--rr-green);
  font-size: 14px;
  font-weight: 500;
}

.rr-docs-home-start li a {
  display: inline;
  color: var(--color-article-heading-text) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none !important;
}

.rr-docs-home-start li a:hover {
  color: var(--color-link) !important;
}

.rr-docs-home-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 22px;
}

.rr-docs-home-group {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--rr-border);
  border-radius: 24px;
  background: var(--rr-home-surface-soft);
}

.rr-docs-home-group:nth-child(3),
.rr-docs-home-group:nth-child(4) {
  grid-column: 1 / -1;
}

.rr-docs-home-group > h2 {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 58px;
  font-size: clamp(22px, 2.3vw, 28px) !important;
}

.rr-docs-home-group-index {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(0, 122, 86, 0.55);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.rr-docs-home-group::after {
  position: absolute;
  top: -62px;
  right: -48px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rr-docs-home-group > ul {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-docs-home-group:nth-child(3) > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rr-docs-home-group:nth-child(4) > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rr-docs-home-group li {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 16px 17px;
  border: 1px solid rgba(0, 185, 128, 0.12);
  border-radius: 16px;
  color: var(--rr-home-ink-muted);
  background: var(--rr-home-surface);
  font-size: 13px;
  line-height: 1.48;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rr-docs-home-group li::before {
  display: none !important;
  content: none !important;
}

.rr-docs-home-group li:hover {
  z-index: 1;
  transform: translateY(-2px);
  border-color: rgba(0, 185, 128, 0.45);
  box-shadow: 0 12px 24px rgba(24, 26, 25, 0.07);
}

.rr-docs-home-group li p {
  margin: 0 !important;
}

.rr-docs-home-group li a {
  color: var(--color-article-heading-text) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none !important;
}

.rr-docs-home-group li a::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.rr-docs-home-group li a:hover {
  color: var(--color-link) !important;
}

.rr-docs-home-help {
  position: relative;
  margin: 32px 0 8px;
  padding: 28px 30px 28px 82px;
  border: 1px solid rgba(0, 185, 128, 0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.09), rgba(0, 185, 128, 0.025));
}

.rr-docs-home-help-icon {
  position: absolute;
  top: 30px;
  left: 28px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 185, 128, 0.32);
  border-radius: 50%;
  color: var(--color-link);
  font-size: 18px;
  font-weight: 500;
}

.rr-docs-home-help > h2 {
  font-size: 24px !important;
}

.rr-docs-home-help > p {
  margin: 10px 0 0;
  color: var(--rr-home-ink-muted);
  font-size: 14px;
  line-height: 1.58;
}

.rr-docs-home-help > p a[href*="vk.ru/write-"] {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  margin-left: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(82, 224, 179, 0.34);
  border-radius: 10px;
  color: #52e0b3 !important;
  background: rgba(0, 185, 128, 0.11);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  vertical-align: middle;
  white-space: nowrap;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.rr-docs-home-help > p a[href*="vk.ru/write-"]:hover {
  transform: translateY(-1px);
  border-color: rgba(82, 224, 179, 0.62);
  background: rgba(0, 185, 128, 0.18);
}

@media (max-width: 1023px) {
  .rr-docs-home-start > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rr-docs-home-group:nth-child(3) > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rr-docs-home-hero {
    margin-top: 0;
    padding: 28px 22px;
    border-radius: 24px;
  }

  body[data-rr-docs-home="true"] .article-content-wrapper,
  body[data-rr-academy-home="true"] .article-content-wrapper {
    width: 100% !important;
  }

  .rr-docs-home-hero .article-title {
    font-size: clamp(36px, 10.5vw, 44px) !important;
    letter-spacing: -0.05em;
  }

  .rr-docs-home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rr-docs-home-actions a {
    width: 100%;
  }

  .rr-docs-home-start > ol,
  .rr-docs-home-groups,
  .rr-docs-home-group:nth-child(3) > ul,
  .rr-docs-home-group:nth-child(4) > ul {
    grid-template-columns: 1fr;
  }

  .rr-docs-home-group:nth-child(3),
  .rr-docs-home-group:nth-child(4) {
    grid-column: auto;
  }

  .rr-docs-home-start > ol > li {
    min-height: 0;
    padding: 22px 20px 22px 68px;
  }

  .rr-docs-home-step-index {
    top: 20px;
  }

  .rr-docs-home-group {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .rr-docs-home-help {
    padding: 72px 22px 24px;
  }

  .rr-docs-home-help-icon {
    top: 24px;
    left: 22px;
  }
}

@media not print {
  html[data-theme="dark"] body[data-rr-docs-home="true"],
  body[data-theme="dark"][data-rr-docs-home="true"] {
    --rr-home-surface: #202321;
    --rr-home-surface-soft: #1c1f1d;
    --rr-home-ink-muted: #aeb8b3;
    --rr-home-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  }

  html[data-theme="dark"] .rr-docs-home-hero,
  body[data-theme="dark"] .rr-docs-home-hero {
    border-color: rgba(82, 224, 179, 0.2);
    background:
      radial-gradient(circle at 91% 15%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.05) 22%, transparent 44%),
      linear-gradient(135deg, #202522 0%, #181a19 62%, #1d2924 100%);
  }

  html[data-theme="dark"] .rr-docs-home-hero .article-title,
  body[data-theme="dark"] .rr-docs-home-hero .article-title {
    color: #ffffff;
  }

  html[data-theme="dark"] .rr-docs-home-hero > p,
  body[data-theme="dark"] .rr-docs-home-hero > p {
    color: #d6ded9;
  }

  html[data-theme="dark"] .rr-docs-home-hero > p + p,
  body[data-theme="dark"] .rr-docs-home-hero > p + p {
    color: #aeb8b3;
  }

  html[data-theme="dark"] .rr-docs-home-actions a,
  body[data-theme="dark"] .rr-docs-home-actions a {
    color: #52e0b3 !important;
    background: rgba(32, 35, 33, 0.88);
  }

  html[data-theme="dark"] .rr-docs-home-actions li:first-child a,
  body[data-theme="dark"] .rr-docs-home-actions li:first-child a {
    color: #ffffff !important;
    background: var(--rr-green);
  }
}

/* Academy landing page. Its source remains regular Markdown; ux.html groups
   the blocks below only after Gramax has rendered the page. */
body[data-rr-academy-home="true"] {
  --rr-academy-surface: #ffffff;
  --rr-academy-surface-soft: #f3f8f5;
  --rr-academy-muted: #66716c;
  --rr-academy-border: rgba(22, 59, 43, 0.13);
  --rr-academy-shadow: 0 18px 48px rgba(18, 62, 43, 0.08);
}

.rr-academy-home-hero,
.rr-academy-home-navigation,
.rr-academy-home-flow,
.rr-academy-home-proof,
.rr-academy-home-help {
  position: relative;
  margin: 0 0 34px;
}

.rr-academy-home-hero {
  isolation: isolate;
  overflow: hidden;
  padding: 48px;
  border: 1px solid var(--rr-academy-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 14%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.04) 25%, transparent 46%),
    linear-gradient(135deg, #edf9f4 0%, #ffffff 58%, #e9f8f1 100%);
  box-shadow: var(--rr-academy-shadow);
}

.rr-academy-home-hero .article-title {
  max-width: 780px;
  margin: 0 0 18px !important;
  color: var(--color-article-heading-text);
  font-size: clamp(42px, 5vw, 62px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em;
}

.rr-academy-home-hero > p {
  max-width: 760px;
  margin: 0;
  color: var(--color-article-text);
  font-size: 18px;
  line-height: 1.58;
}

.rr-academy-home-actions,
.rr-academy-home-help > ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-academy-home-actions li,
.rr-academy-home-actions li p,
.rr-academy-home-help > ul li,
.rr-academy-home-help > ul li p {
  margin: 0 !important;
}

.rr-academy-home-actions li::before,
.rr-academy-home-help > ul li::before,
.rr-academy-home-navigation li::before,
.rr-academy-home-flow li::before,
.rr-academy-home-proof li::before {
  display: none !important;
  content: none !important;
}

.rr-academy-home-actions a,
.rr-academy-home-help > ul a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--rr-green);
  border-radius: 14px;
  color: var(--rr-green) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.rr-academy-home-actions li:first-child a,
.rr-academy-home-help > ul li:first-child a {
  color: #ffffff !important;
  background: var(--rr-green);
}

.rr-academy-home-actions a:hover,
.rr-academy-home-help > ul a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 142, 98, 0.18);
}

.rr-academy-home-navigation > h2,
.rr-academy-home-flow > h2,
.rr-academy-home-proof > h2,
.rr-academy-home-help > h2 {
  margin: 0 0 16px !important;
  color: var(--color-article-heading-text);
  font-size: clamp(25px, 2.8vw, 34px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em;
}

.rr-academy-home-navigation > ul,
.rr-academy-home-flow > ul,
.rr-academy-home-proof > ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-academy-home-card,
.rr-academy-home-flow li,
.rr-academy-home-proof li {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--rr-academy-border);
  border-radius: 20px;
  background: var(--rr-academy-surface);
  box-shadow: 0 8px 20px rgba(18, 62, 43, 0.04);
}

.rr-academy-home-card {
  min-height: 146px;
}

.rr-academy-home-card.is-coming-soon {
  background: var(--rr-academy-surface-soft);
}

.rr-academy-home-card p,
.rr-academy-home-flow li p,
.rr-academy-home-proof li p {
  margin: 0 !important;
  color: var(--rr-academy-muted);
  font-size: 15px;
  line-height: 1.52;
}

.rr-academy-home-card a,
.rr-academy-home-card strong,
.rr-academy-home-flow strong,
.rr-academy-home-proof a {
  display: block;
  margin: 0 0 8px;
  color: var(--color-article-heading-text) !important;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none !important;
}

.rr-academy-home-card a::after,
.rr-academy-home-proof a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.rr-academy-home-card:not(.is-coming-soon):hover,
.rr-academy-home-proof li:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 185, 128, 0.42);
  box-shadow: var(--rr-academy-shadow);
}

.rr-academy-home-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #176547;
  background: rgba(0, 185, 128, 0.12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rr-academy-home-flow {
  padding: 28px;
  border-radius: 24px;
  background: var(--rr-academy-surface-soft);
}

.rr-academy-home-flow > ul {
  counter-reset: rr-academy-flow;
}

.rr-academy-home-flow li {
  padding: 54px 20px 20px;
  background: var(--rr-academy-surface);
}

.rr-academy-home-flow li::after {
  position: absolute;
  top: 18px;
  left: 20px;
  color: var(--rr-green);
  font-size: 13px;
  font-weight: 750;
  content: "0" counter(rr-academy-flow);
  counter-increment: rr-academy-flow;
}

.rr-academy-home-proof li {
  min-height: 168px;
}

.rr-academy-home-help {
  padding: 28px;
  border: 1px solid var(--rr-academy-border);
  border-radius: 24px;
  background: var(--rr-academy-surface);
}

.rr-academy-home-help > p {
  max-width: 700px;
  margin: 0;
  color: var(--rr-academy-muted);
  font-size: 16px;
  line-height: 1.58;
}

@media (max-width: 760px) {
  .rr-academy-home-hero {
    padding: 28px 22px;
    border-radius: 22px;
  }

  body[data-rr-academy-home="true"] .article-content-wrapper {
    width: 100% !important;
  }

  .rr-academy-home-hero .article-title {
    font-size: clamp(36px, 10.5vw, 44px) !important;
  }

  .rr-academy-home-actions,
  .rr-academy-home-help > ul {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .rr-academy-home-actions a,
  .rr-academy-home-help > ul a {
    width: 100%;
  }

  .rr-academy-home-navigation > ul,
  .rr-academy-home-flow > ul,
  .rr-academy-home-proof > ul {
    grid-template-columns: 1fr;
  }

  .rr-academy-home-flow,
  .rr-academy-home-help {
    padding: 22px;
    border-radius: 20px;
  }
}

@media not print {
  html[data-theme="dark"] body[data-rr-academy-home="true"],
  body[data-theme="dark"][data-rr-academy-home="true"] {
    --rr-academy-surface: #202321;
    --rr-academy-surface-soft: #1b1f1d;
    --rr-academy-muted: #aeb8b3;
    --rr-academy-border: rgba(82, 224, 179, 0.18);
    --rr-academy-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  }

  html[data-theme="dark"] .rr-academy-home-hero,
  body[data-theme="dark"] .rr-academy-home-hero {
    background:
      radial-gradient(circle at 92% 14%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.04) 25%, transparent 46%),
      linear-gradient(135deg, #202522 0%, #181a19 60%, #1d2924 100%);
  }

  html[data-theme="dark"] .rr-academy-home-hero .article-title,
  body[data-theme="dark"] .rr-academy-home-hero .article-title,
  html[data-theme="dark"] .rr-academy-home-card a,
  html[data-theme="dark"] .rr-academy-home-card strong,
  html[data-theme="dark"] .rr-academy-home-flow strong,
  html[data-theme="dark"] .rr-academy-home-proof a,
  body[data-theme="dark"] .rr-academy-home-card a,
  body[data-theme="dark"] .rr-academy-home-card strong,
  body[data-theme="dark"] .rr-academy-home-flow strong,
  body[data-theme="dark"] .rr-academy-home-proof a {
    color: #ffffff !important;
  }

  html[data-theme="dark"] .rr-academy-home-hero > p,
  body[data-theme="dark"] .rr-academy-home-hero > p {
    color: #d6ded9;
  }

  html[data-theme="dark"] .rr-academy-home-card-badge,
  body[data-theme="dark"] .rr-academy-home-card-badge {
    color: #8df0ce;
    background: rgba(82, 224, 179, 0.12);
  }
}

/* Academy alignment pass: keep its content distinct, but use the same visual
   grammar as the established documentation landing page and client cases. */
body[data-rr-academy-home="true"] {
  --rr-home-surface: #ffffff;
  --rr-home-surface-soft: #f4f8f6;
  --rr-home-ink-muted: #65706b;
  --rr-home-shadow: 0 18px 48px rgba(24, 26, 25, 0.07);
}

.rr-academy-home-hero {
  margin: 6px 0 42px;
  padding: clamp(34px, 5vw, 64px);
  border-color: rgba(0, 185, 128, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 91% 15%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.05) 22%, transparent 44%),
    linear-gradient(135deg, #f3fbf8 0%, #ffffff 58%, #eef9f5 100%);
  box-shadow: var(--rr-home-shadow);
}

.rr-academy-home-hero .article-title {
  max-width: 760px;
  margin: 0 0 20px !important;
  color: var(--rr-black);
  font-size: clamp(42px, 6vw, 68px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em;
  line-height: 1.02 !important;
}

.rr-academy-home-hero > p {
  max-width: 780px;
  margin: 0;
  color: #46504c;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.58;
}

.rr-academy-home-actions,
.rr-academy-home-help > ul {
  gap: 12px;
  margin-top: 28px !important;
}

.rr-academy-home-actions a,
.rr-academy-home-help > ul a {
  box-sizing: border-box;
  padding: 12px 20px;
  border-color: rgba(0, 185, 128, 0.38);
  color: #007a56 !important;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  line-height: 22px;
  box-shadow: 0 8px 18px rgba(24, 26, 25, 0.04);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rr-academy-home-proof .rr-academy-case-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  font-size: 14px;
  line-height: 1.52;
}

.rr-academy-home-navigation > h2 + p,
.rr-academy-home-start > h2 + p,
.rr-academy-home-proof > h2 + p {
  max-width: 760px;
  margin: 10px 58px 0 0;
  color: var(--rr-home-ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

.rr-academy-case-flow {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(119, 232, 192, 0.14);
}

.rr-academy-case-flow > div {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.rr-academy-case-flow > div:not(:last-child)::after {
  position: static;
  display: block;
  width: 4px;
  height: 4px;
  margin-left: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(119, 232, 192, 0.46);
  content: "";
  transform: none;
}

.rr-academy-case-flow small,
.rr-academy-case-flow strong {
  display: block;
}

.rr-academy-case-flow small {
  display: none;
}

.rr-academy-case-flow strong {
  margin: 0;
  color: var(--rr-home-ink-muted) !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.rr-academy-home-proof .rr-academy-case-card > p {
  order: 1;
  margin: 0;
}

.rr-academy-home-proof .rr-academy-case-card > p > a {
  display: block;
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.rr-academy-case-description {
  display: block;
  margin-top: 10px;
  color: var(--rr-home-ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

.rr-academy-home-proof .rr-academy-case-card:hover > p > a,
.rr-academy-home-proof .rr-academy-case-card:focus-within > p > a {
  color: #52e0b3 !important;
}

.rr-academy-home-navigation {
  max-width: 1280px;
  margin: 0 0 42px;
}

.rr-academy-home-start {
  max-width: 1280px;
}

.rr-academy-home-navigation > h2,
.rr-academy-home-flow > h2,
.rr-academy-home-proof > h2,
.rr-academy-home-help > h2 {
  margin: 0 !important;
  color: var(--color-article-heading-text);
  font-size: clamp(24px, 2.8vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.2 !important;
}

.rr-academy-home-navigation > ul {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  align-items: start;
  gap: 14px;
  margin: 18px 0 0 !important;
}

.rr-academy-home-start > ol {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin-top: 18px !important;
}

.rr-academy-home-card {
  position: relative;
  display: block !important;
  min-height: 198px;
  box-sizing: border-box;
  padding: 24px 22px;
  border-color: var(--rr-border);
  border-radius: 20px;
  color: var(--rr-home-ink-muted);
  background: var(--rr-home-surface);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(24, 26, 25, 0.035);
}

.rr-academy-home-card-icon {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 18px;
  border: 1px solid rgba(82, 224, 179, 0.24);
  border-radius: 13px;
  color: #52e0b3;
  background: rgba(0, 185, 128, 0.1);
  pointer-events: none;
}

.rr-academy-home-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rr-academy-home-card p,
.rr-academy-home-flow li p,
.rr-academy-home-proof li p {
  color: var(--rr-home-ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.rr-academy-home-card a,
.rr-academy-home-card strong,
.rr-academy-home-flow strong,
.rr-academy-home-proof a {
  display: inline;
  margin: 0;
  color: var(--color-article-heading-text) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.rr-academy-home-card-badge {
  position: absolute !important;
  top: auto;
  right: auto !important;
  bottom: 18px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 5px 9px;
  border-radius: 999px;
  color: #52e0b3;
  background: rgba(0, 185, 128, 0.14);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-academy-home-flow,
.rr-academy-home-proof {
  position: relative;
  max-width: 1280px;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--rr-border);
  border-radius: 24px;
  background: var(--rr-home-surface-soft);
}

.rr-academy-home-flow::after,
.rr-academy-home-proof::after {
  position: absolute;
  top: -62px;
  right: -48px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rr-academy-home-flow > h2,
.rr-academy-home-proof > h2 {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding-right: 58px;
  font-size: clamp(22px, 2.3vw, 28px) !important;
}

.rr-academy-home-flow > ul,
.rr-academy-home-proof > ul {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 10px;
  margin: 20px 0 0 !important;
}

.rr-academy-home-flow li,
.rr-academy-home-proof li {
  box-sizing: border-box;
  min-height: 0;
  padding: 16px 17px;
  border-color: rgba(0, 185, 128, 0.12);
  border-radius: 16px;
  color: var(--rr-home-ink-muted);
  background: var(--rr-home-surface);
  font-size: 13px;
  line-height: 1.48;
  box-shadow: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rr-academy-home-flow li::after {
  display: none;
  content: none;
}

.rr-academy-home-flow li:hover,
.rr-academy-home-proof li:hover {
  z-index: 1;
  transform: translateY(-2px);
  border-color: rgba(0, 185, 128, 0.45);
  box-shadow: 0 12px 24px rgba(24, 26, 25, 0.07);
}

.rr-academy-home-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "copy"
    "actions";
  align-items: center;
  row-gap: 0;
  max-width: 1280px;
  margin: 32px 0 8px;
  padding: 28px 30px;
  border-color: rgba(0, 185, 128, 0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.09), rgba(0, 185, 128, 0.025));
}

.rr-academy-home-help > h2 {
  grid-area: title;
  font-size: 24px !important;
}

.rr-academy-home-help > p {
  grid-area: copy;
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--rr-home-ink-muted);
  font-size: 14px;
  line-height: 1.58;
}

.rr-academy-home-help > ul {
  grid-area: actions;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 22px 0 0 !important;
}

@media (max-width: 1023px) {
  .rr-academy-home-navigation > ul {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  }

  .rr-academy-home-flow > ul,
  .rr-academy-home-proof > ul {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }

  .rr-academy-home-help {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "actions";
    row-gap: 0;
  }

  .rr-academy-home-help > p {
    margin-top: 10px;
  }

  .rr-academy-home-help > ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 22px !important;
  }
}

@media (max-width: 760px) {
  .rr-academy-home-hero {
    margin-top: 0;
    padding: 28px 22px;
    border-radius: 24px;
  }

  .rr-academy-home-hero .article-title {
    font-size: clamp(36px, 10.5vw, 44px) !important;
    letter-spacing: -0.05em;
  }

  .rr-academy-home-navigation > ul,
  .rr-academy-home-flow > ul,
  .rr-academy-home-proof > ul {
    grid-template-columns: 1fr;
  }

  .rr-academy-home-card {
    min-height: 0;
    padding: 22px 20px 68px;
  }

  .rr-academy-home-card-icon {
    margin-bottom: 18px;
  }

  .rr-academy-home-card-badge {
    left: 20px;
  }

  .rr-academy-home-flow,
  .rr-academy-home-proof {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .rr-academy-home-proof .rr-academy-case-card {
    min-height: 0;
  }

  .rr-academy-home-help {
    padding: 24px 22px;
  }
}

@media not print {
  html[data-theme="dark"] body[data-rr-academy-home="true"],
  body[data-theme="dark"][data-rr-academy-home="true"] {
    --rr-home-surface: #202321;
    --rr-home-surface-soft: #1c1f1d;
    --rr-home-ink-muted: #aeb8b3;
    --rr-home-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  }

  html[data-theme="dark"] .rr-academy-home-hero,
  body[data-theme="dark"] .rr-academy-home-hero {
    border-color: rgba(82, 224, 179, 0.2);
    background:
      radial-gradient(circle at 91% 15%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.05) 22%, transparent 44%),
      linear-gradient(135deg, #202522 0%, #181a19 62%, #1d2924 100%);
  }

  html[data-theme="dark"] .rr-academy-home-hero .article-title,
  body[data-theme="dark"] .rr-academy-home-hero .article-title {
    color: #ffffff;
  }

  html[data-theme="dark"] .rr-academy-home-hero > p,
  body[data-theme="dark"] .rr-academy-home-hero > p {
    color: #d6ded9;
  }

  html[data-theme="dark"] .rr-academy-home-actions a,
  body[data-theme="dark"] .rr-academy-home-actions a,
  html[data-theme="dark"] .rr-academy-home-help > ul a,
  body[data-theme="dark"] .rr-academy-home-help > ul a {
    color: #52e0b3 !important;
    background: rgba(32, 35, 33, 0.88);
  }

  html[data-theme="dark"] .rr-academy-home-actions li:first-child a,
  body[data-theme="dark"] .rr-academy-home-actions li:first-child a,
  html[data-theme="dark"] .rr-academy-home-help > ul li:first-child a,
  body[data-theme="dark"] .rr-academy-home-help > ul li:first-child a {
    color: #ffffff !important;
    background: var(--rr-green);
  }
}

/* Integrations landing: keep the source readable as Markdown and turn the
   category overview into a compact, task-oriented directory at runtime. */
body[data-rr-integrations-home="true"] {
  --rr-integrations-surface: #202321;
  --rr-integrations-surface-soft: #1c1f1d;
  --rr-integrations-muted: #aeb8b3;
}

body[data-rr-integrations-home="true"] .article-content-wrapper,
body[data-rr-integrations-home="true"] .article-content.article-default-content,
body[data-rr-integrations-home="true"] .article-body,
body[data-rr-integrations-home="true"] .article-body article {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.rr-integrations-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 6px 0 38px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgba(82, 224, 179, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 91% 16%, rgba(0, 185, 128, 0.2) 0, rgba(0, 185, 128, 0.05) 22%, transparent 44%),
    linear-gradient(135deg, #202522 0%, #181a19 62%, #1d2924 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.rr-integrations-home-hero::after {
  position: absolute;
  z-index: -1;
  top: -84px;
  right: -64px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(82, 224, 179, 0.14);
  border-radius: 50%;
  content: "";
}

.rr-integrations-home-hero .article-title {
  max-width: 760px;
  margin: 0 0 20px !important;
  color: #ffffff !important;
  font-size: clamp(42px, 6vw, 66px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em;
  line-height: 1.02 !important;
}

.rr-integrations-home-hero > p {
  max-width: 790px;
  margin: 0 0 11px;
  color: #d6ded9;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.58;
}

.rr-integrations-home-hero > p + p {
  max-width: 730px;
  margin-bottom: 0;
  color: #aeb8b3;
  font-size: 14px;
}

.rr-integrations-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  margin: 0 0 34px;
}

.rr-integrations-home-card {
  position: relative;
  min-width: 0;
  min-height: 206px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  padding: 23px;
  border: 1px solid rgba(82, 224, 179, 0.15);
  border-radius: 20px;
  background: var(--rr-integrations-surface);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rr-integrations-home-card::after {
  position: absolute;
  right: -48px;
  bottom: -58px;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(82, 224, 179, 0.1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rr-integrations-home-card:hover,
.rr-integrations-home-card:focus-within {
  z-index: 1;
  transform: translateY(-2px);
  border-color: rgba(82, 224, 179, 0.42);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.rr-integrations-home-card-index {
  width: fit-content;
  min-width: 42px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(82, 224, 179, 0.24);
  border-radius: 999px;
  color: #77e8c0;
  background: rgba(0, 185, 128, 0.07);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}

.rr-integrations-home-card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(119, 232, 192, 0.6);
  font-size: 18px;
  line-height: 1;
  transition: color 0.18s ease, transform 0.18s ease;
}

.rr-integrations-home-card:hover .rr-integrations-home-card-arrow,
.rr-integrations-home-card:focus-within .rr-integrations-home-card-arrow {
  color: #77e8c0;
  transform: translate(2px, -2px);
}

.rr-integrations-home-card > h2 {
  margin: 19px 34px 0 0 !important;
  padding: 0 !important;
  font-size: clamp(19px, 2vw, 23px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.18 !important;
}

.rr-integrations-home-card > h2 a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.rr-integrations-home-card > h2 a::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.rr-integrations-home-card-description {
  max-width: 470px;
  margin: 11px 0 0 !important;
  color: var(--rr-integrations-muted);
  font-size: 14px;
  line-height: 1.52;
}

.rr-integrations-home-reference {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 20px;
  margin: 8px 0;
  padding: 26px 28px;
  border: 1px solid rgba(82, 224, 179, 0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.09), rgba(0, 185, 128, 0.025));
}

.rr-integrations-home-reference-icon {
  grid-column: 1;
  grid-row: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(82, 224, 179, 0.34);
  border-radius: 50%;
  color: #77e8c0;
  font-size: 18px;
  font-weight: 500;
}

.rr-integrations-home-reference > h2 {
  grid-column: 2;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: clamp(22px, 2.4vw, 26px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.3 !important;
}

.rr-integrations-home-reference > p {
  grid-column: 2;
  max-width: 830px;
  margin: 8px 0 0;
  color: var(--rr-integrations-muted);
  font-size: 14px;
  line-height: 1.52;
}

.rr-integrations-home-reference > ul {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(82, 224, 179, 0.14);
  list-style: none !important;
}

.rr-integrations-home-reference > ul > li {
  position: relative;
  min-width: 0;
  margin: 0 !important;
  padding: 11px 2px 12px;
  border-bottom: 1px solid rgba(82, 224, 179, 0.14);
  color: var(--rr-integrations-muted);
  font-size: 13px;
  line-height: 1.48;
  transition: color 0.18s ease;
}

.rr-integrations-home-reference > ul > li::before {
  display: none !important;
  content: none !important;
}

.rr-integrations-home-reference > ul > li p {
  margin: 0 !important;
}

.rr-integrations-home-reference > ul > li a {
  color: #eaf5f1 !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
}

.rr-integrations-home-reference > ul > li:hover,
.rr-integrations-home-reference > ul > li:focus-within {
  color: #c7d2cd;
}

.rr-integrations-home-reference > ul > li:hover a,
.rr-integrations-home-reference > ul > li:focus-within a {
  color: #77e8c0 !important;
}

.rr-integrations-home-reference > ul > li a::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.rr-integrations-home-reference > p:last-child {
  max-width: none;
  margin-top: 14px;
  padding: 0;
}

.rr-integrations-home-reference > p:last-child a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  margin-left: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(82, 224, 179, 0.34);
  border-radius: 10px;
  color: #77e8c0 !important;
  background: rgba(0, 185, 128, 0.11);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  vertical-align: middle;
  white-space: nowrap;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.rr-integrations-home-reference > p:last-child a:hover,
.rr-integrations-home-reference > p:last-child a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(82, 224, 179, 0.62);
  background: rgba(0, 185, 128, 0.18);
}

@media (max-width: 760px) {
  .rr-integrations-home-hero {
    margin-top: 0;
    padding: 28px 22px;
    border-radius: 24px;
  }

  .rr-integrations-home-hero .article-title {
    font-size: clamp(36px, 10.5vw, 44px) !important;
  }

  .rr-integrations-home-grid {
    grid-template-columns: 1fr;
  }

  .rr-integrations-home-card {
    min-height: 0;
    padding: 21px;
  }

  .rr-integrations-home-reference {
    display: block;
    padding: 22px 20px 22px 66px;
  }

  .rr-integrations-home-reference-icon {
    position: absolute;
    top: 22px;
    left: 20px;
  }

  .rr-integrations-home-reference > ul {
    grid-template-columns: 1fr;
  }

  .rr-integrations-home-reference > p:last-child a {
    width: auto;
    margin: 8px 0 0;
  }
}

/* Cases root: reuse the documentation-home structure, with a more editorial
   card treatment for customer stories. */
body[data-rr-home-kind="cases"] .rr-docs-home-hero {
  background:
    radial-gradient(circle at 89% 14%, rgba(0, 185, 128, 0.28) 0, rgba(0, 185, 128, 0.06) 26%, transparent 48%),
    linear-gradient(135deg, #eefaf6 0%, #ffffff 60%, #e9f8f2 100%);
}

body[data-rr-home-kind="cases"] .rr-docs-home-groups {
  grid-template-columns: 1fr;
}

body[data-rr-home-kind="cases"] .rr-docs-home-group {
  container-type: inline-size;
  container-name: rr-case-group;
  padding: clamp(22px, 3vw, 34px);
}

body[data-rr-home-kind="cases"] .rr-docs-home-group > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child > ul {
  grid-template-columns: 1fr;
}

body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.15fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  padding: clamp(18px, 2.5vw, 28px);
  background: var(--rr-home-surface);
}

body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:first-child {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  color: var(--rr-home-ink-muted);
  font-size: 16px;
  line-height: 1.55;
}

body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:first-child a {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(23px, 2.7vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
  grid-column: 1;
  grid-row: 1;
}

body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child img {
  width: 100%;
  display: block;
  border: 1px solid rgba(0, 185, 128, 0.18);
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(24, 26, 25, 0.12);
}

@media (max-width: 1180px) {
  body[data-rr-home-kind="cases"] .rr-docs-home-group > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child > ul {
    grid-template-columns: 1fr;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    overflow: hidden;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:first-child,
  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
    grid-row: 1;
  }
}

@container rr-case-group (max-width: 760px) {
  body[data-rr-home-kind="cases"] .rr-docs-home-group > ul {
    grid-template-columns: 1fr;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    overflow: hidden;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:first-child,
  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
    grid-row: 1;
  }
}

/* Customer case article. The content remains semantic Markdown; these wrappers
   only add editorial hierarchy and retain the same reading order. */
body[data-rr-case-page="true"] {
  --rr-case-surface: #f4f8f6;
  --rr-case-muted: #65706b;
}

body[data-rr-case-page="true"] .article-body article > p:has(> img) {
  margin: 32px 0;
}

body[data-rr-case-page="true"] .article-body article > p:not(.rr-case-brand) > img,
body[data-rr-case-page="true"] .rr-case-results img {
  width: 100%;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(24, 26, 25, 0.09);
}

.rr-case-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 6px 0 30px;
  padding: clamp(30px, 5vw, 60px);
  border: 1px solid rgba(82, 224, 179, 0.22);
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 93% 8%, rgba(0, 185, 128, 0.42) 0, rgba(0, 185, 128, 0.08) 28%, transparent 47%),
    linear-gradient(135deg, #181a19 0%, #1c2420 58%, #102e24 100%);
  box-shadow: 0 24px 56px rgba(24, 26, 25, 0.2);
}

.rr-case-hero::after {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  right: -86px;
  bottom: -108px;
  border: 1px solid rgba(82, 224, 179, 0.3);
  border-radius: 50%;
  content: "";
}

.rr-case-brand {
  max-width: 380px;
  margin: 0 0 clamp(28px, 4vw, 48px) !important;
}

.rr-case-brand img {
  width: 100%;
  max-height: 54px;
  display: block;
  object-fit: contain;
  object-position: left center;
  cursor: default !important;
}

.rr-case-hero .article-title {
  max-width: 900px;
  margin: 0 0 24px !important;
  color: #ffffff !important;
  font-size: clamp(40px, 5.6vw, 66px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.048em;
  line-height: 1.02 !important;
}

.rr-case-hero > p:not(.rr-case-brand) {
  max-width: 880px;
  margin: 0 0 14px;
  color: #d9e2de;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.62;
}

.rr-case-hero > p:not(.rr-case-brand):last-child {
  margin-bottom: 0;
  color: #ffffff;
  font-weight: 500;
}

.rr-case-cover {
  margin: 0 0 clamp(42px, 7vw, 78px) !important;
}

.rr-case-cover img {
  border-radius: 26px !important;
}

body[data-rr-case-page="true"] .article-body article > h2 {
  margin-top: clamp(48px, 7vw, 78px) !important;
  padding-top: 0 !important;
  font-size: clamp(30px, 3.7vw, 44px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em;
}

body[data-rr-case-page="true"] .article-body article > h3 {
  position: relative;
  min-height: 46px;
  margin-top: clamp(42px, 6vw, 66px) !important;
  padding-left: 64px;
  font-size: clamp(24px, 2.9vw, 33px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.25 !important;
}

.rr-case-step-index {
  position: absolute;
  top: -4px;
  left: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background: var(--rr-green);
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 10px 24px rgba(0, 185, 128, 0.2);
}

.rr-case-results {
  margin: clamp(60px, 8vw, 92px) 0;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(0, 185, 128, 0.26);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.1), rgba(0, 185, 128, 0.025));
}

.rr-case-results > h2 {
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.rr-case-results > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}

.rr-case-results > p:has(> img) {
  margin: 30px 0 !important;
}

.rr-case-cta {
  position: relative;
  overflow: hidden;
  margin: clamp(60px, 8vw, 92px) 0 24px;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(circle at 90% 12%, rgba(82, 224, 179, 0.24), transparent 35%),
    linear-gradient(135deg, #181a19, #143329);
}

.rr-case-cta > h2 {
  max-width: 760px;
  margin: 0 0 22px !important;
  color: #ffffff !important;
  font-size: clamp(32px, 4.3vw, 50px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em;
}

.rr-case-cta p,
.rr-case-cta li {
  color: #d5dfda;
}

.rr-case-cta ul:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-cta ul:last-child li {
  margin: 0 !important;
}

.rr-case-cta ul:last-child li::before {
  display: none !important;
  content: none !important;
}

.rr-case-cta ul:last-child a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid rgba(82, 224, 179, 0.45);
  border-radius: 14px;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 500;
  text-decoration: none !important;
}

.rr-case-cta ul:last-child li:first-child a {
  border-color: var(--rr-green);
  background: var(--rr-green);
}

/* Explicit CTA controls are used when a case contains a note after its links:
   in that structure the action list is no longer the last child. */
.rr-case-cta .rr-case-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-cta .rr-case-cta-actions > li {
  margin: 0 !important;
  padding: 0 !important;
}

.rr-case-cta .rr-case-cta-actions > li::before {
  display: none !important;
  content: none !important;
}

.rr-case-cta .rr-case-cta-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 13px 21px;
  border: 1px solid rgba(82, 224, 179, 0.48);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.rr-case-cta .rr-case-cta-button--primary {
  border-color: var(--rr-green);
  color: #071812 !important;
  background: var(--rr-green);
}

.rr-case-cta .rr-case-cta-button--secondary {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07);
}

@media (hover: hover) {
  .rr-case-cta .rr-case-cta-button:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
  }

  .rr-case-cta .rr-case-cta-button--primary:hover {
    border-color: #72e8c2;
    background: #72e8c2;
  }

  .rr-case-cta .rr-case-cta-button--secondary:hover {
    border-color: rgba(114, 232, 194, 0.75);
    background: rgba(82, 224, 179, 0.13);
  }
}

.rr-case-cta .rr-case-cta-button:focus-visible {
  outline: 3px solid rgba(114, 232, 194, 0.52);
  outline-offset: 3px;
}

.rr-case-cta .rr-case-cta-note {
  max-width: 760px !important;
  margin-top: 26px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(213, 223, 218, 0.78) !important;
  font-size: 14px !important;
}

@media (max-width: 760px) {
  body[data-rr-home-kind="cases"] .rr-docs-home-group > ul {
    grid-template-columns: 1fr;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li {
    grid-template-columns: 1fr;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:first-child,
  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-rr-home-kind="cases"] .rr-docs-home-group:first-child li > p:last-child {
    grid-row: 1;
  }

  .rr-case-hero {
    margin-top: 0;
    padding: 28px 22px;
    border-radius: 24px;
  }

  .rr-case-brand {
    max-width: 300px;
    margin-bottom: 30px !important;
  }

  .rr-case-hero .article-title {
    font-size: clamp(36px, 11vw, 48px) !important;
  }

  body[data-rr-case-page="true"] .article-body article > h3 {
    min-height: 40px;
    padding-left: 54px;
  }

  .rr-case-step-index {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .rr-case-results > ul {
    grid-template-columns: 1fr;
  }

  .rr-case-cta ul:last-child,
  .rr-case-cta ul:last-child a {
    width: 100%;
  }

  .rr-case-cta ul:last-child a {
    justify-content: center;
    box-sizing: border-box;
  }

  .rr-case-cta .rr-case-cta-actions,
  .rr-case-cta .rr-case-cta-actions > li,
  .rr-case-cta .rr-case-cta-button {
    width: 100%;
  }
}

@media not print {
  html[data-theme="dark"] body[data-rr-home-kind="cases"] .rr-docs-home-hero,
  body[data-theme="dark"][data-rr-home-kind="cases"] .rr-docs-home-hero {
    background:
      radial-gradient(circle at 89% 14%, rgba(0, 185, 128, 0.26) 0, rgba(0, 185, 128, 0.06) 26%, transparent 48%),
      linear-gradient(135deg, #202522 0%, #181a19 62%, #1d2924 100%);
  }

  html[data-theme="dark"] body[data-rr-case-page="true"],
  body[data-theme="dark"][data-rr-case-page="true"] {
    --rr-case-surface: #1c1f1d;
    --rr-case-muted: #aeb8b3;
  }

  html[data-theme="dark"] .rr-case-results,
  body[data-theme="dark"] .rr-case-results {
    background: linear-gradient(135deg, rgba(0, 185, 128, 0.13), rgba(255, 255, 255, 0.018));
  }
}

/* Editorial case layout v2. Keep the source as regular Markdown, while the
   runtime groups it into responsive story blocks. */
body[data-rr-case-page="true"] .article-body article {
  --rr-case-card: color-mix(in srgb, var(--color-article-text) 3%, transparent);
  --rr-case-card-strong: color-mix(in srgb, var(--color-article-text) 5%, transparent);
  --rr-case-section-gap: clamp(48px, 5vw, 64px);
}

body[data-rr-case-page="true"] .rr-case-hero {
  margin-bottom: 0;
  padding: clamp(28px, 4.4vw, 50px);
}

body[data-rr-case-page="true"] .rr-case-brand {
  max-width: 330px;
  margin-bottom: 24px !important;
}

.rr-case-eyebrow,
.rr-case-intro-label {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  box-sizing: border-box;
  padding: 5px 11px;
  border: 1px solid rgba(82, 224, 179, 0.35);
  border-radius: 999px;
  color: #8be8c8;
  background: rgba(0, 185, 128, 0.1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body[data-rr-case-page="true"] .rr-case-hero .article-title {
  max-width: 820px;
  margin: 18px 0 20px !important;
  font-size: clamp(38px, 4.6vw, 56px) !important;
  line-height: 1.04 !important;
}

body[data-rr-case-page="true"] .rr-case-hero > p:not(.rr-case-brand) {
  max-width: 740px;
  color: #d6dfda;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.58;
}

.rr-case-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 0;
}

.rr-case-hero-stats > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(82, 224, 179, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.rr-case-hero-stats dd,
.rr-case-hero-stats dt {
  margin: 0;
}

.rr-case-hero-stats dd {
  color: #61d9ae;
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.rr-case-hero-stats dt {
  margin-top: 7px;
  color: #b9c6c0;
  font-size: 12px;
  line-height: 1.35;
}

.rr-case-intro {
  margin: var(--rr-case-section-gap) 0 0;
  padding: clamp(22px, 3.2vw, 32px);
  border: 1px solid rgba(0, 185, 128, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.07), var(--rr-case-card));
}

.rr-case-intro-label {
  margin-bottom: 14px;
  color: var(--color-link);
  background: rgba(0, 185, 128, 0.07);
}

.rr-case-intro > p {
  margin: 0 0 12px;
  color: var(--color-article-text);
  font-size: 16px;
  line-height: 1.65;
}

.rr-case-intro > p:last-child {
  margin-bottom: 0;
}

body[data-rr-case-page="true"] .rr-case-cover {
  display: none;
}

.rr-case-context {
  overflow: hidden;
  margin: clamp(44px, 6vw, 70px) 0;
  border: 1px solid var(--rr-border);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.035), transparent 62%);
}

.rr-case-context-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.35fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 38px);
}

.rr-case-context-card + .rr-case-context-card {
  border-top: 1px solid var(--rr-border);
}

.rr-case-context-label {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 185, 128, 0.22);
  border-radius: 999px;
  color: var(--color-link);
  background: rgba(0, 185, 128, 0.07);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.rr-case-context-heading > h2,
.rr-case-steps-intro > h2,
.rr-case-tools > h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-article-heading-text);
  font-size: clamp(24px, 2.4vw, 31px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  line-height: 1.16 !important;
}

.rr-case-steps-intro > h2,
.rr-case-tools > h2 {
  margin-bottom: 16px !important;
}

.rr-case-context-body > p {
  margin: 0 0 14px;
  color: var(--rr-case-muted);
  font-size: 15px;
  line-height: 1.58;
}

.rr-case-context-body > p:last-child {
  margin-bottom: 0;
}

.rr-case-context-body > ul {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 14px !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  list-style: none;
}

.rr-case-context-body > ul > li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 1px solid var(--rr-border);
  border-radius: 14px;
  color: var(--color-article-text);
  background: rgba(255, 255, 255, 0.025);
  font-size: 14px;
  line-height: 1.42;
}

.rr-case-context-body > ul > li::before {
  position: static !important;
  width: 7px;
  height: 7px;
  margin: 0 !important;
  align-self: center;
  border-radius: 50%;
  background: var(--rr-green) !important;
  content: "";
  transform: none !important;
}

.rr-case-steps {
  margin: clamp(52px, 7vw, 84px) 0;
}

.rr-case-steps-intro {
  margin-bottom: 22px;
  padding: clamp(24px, 3.6vw, 36px);
  border: 1px solid rgba(0, 185, 128, 0.2);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.09), transparent 72%);
}

.rr-case-steps-intro > p:not(:has(img)) {
  max-width: 760px;
  color: var(--rr-case-muted);
  font-size: 16px;
  line-height: 1.62;
}

.rr-case-steps-intro p:has(img),
.rr-case-step p:has(img) {
  margin: 24px 0 0 !important;
}

.rr-case-steps-intro img,
.rr-case-step img {
  width: 100%;
  display: block;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(24, 26, 25, 0.08);
}

.rr-case-steps-list {
  display: grid;
  gap: 18px;
}

.rr-case-step {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3.8vw, 38px);
  border: 1px solid var(--rr-border);
  border-radius: 26px;
  background: var(--rr-case-card);
}

.rr-case-step::after {
  position: absolute;
  width: 150px;
  height: 150px;
  top: -94px;
  right: -82px;
  border: 1px solid rgba(0, 185, 128, 0.15);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rr-case-step > h3 {
  position: relative;
  min-height: 46px;
  margin: 0 0 22px !important;
  padding: 2px 0 0 64px;
  color: var(--color-article-heading-text);
  font-size: clamp(24px, 2.8vw, 33px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  line-height: 1.22 !important;
}

.rr-case-step > p:not(:has(img)),
.rr-case-step > ul {
  color: var(--rr-case-muted);
  font-size: 16px;
  line-height: 1.65;
}

.rr-case-results > ul > li {
  margin: 0 !important;
  padding: 14px 16px 14px 44px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 14px;
  background: var(--rr-case-card-strong);
}

.rr-case-results > ul > li::before {
  top: 15px !important;
  left: 16px !important;
  color: var(--color-link) !important;
  content: "✓" !important;
}

.rr-case-tools {
  margin: clamp(52px, 7vw, 82px) 0;
  padding: clamp(24px, 3.6vw, 36px);
  border: 1px solid var(--rr-border);
  border-radius: 26px;
  background: var(--rr-case-card);
}

.rr-case-tools > ul {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-tools > ul > li {
  min-width: 0;
  margin: 0 !important;
  padding: 16px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 16px;
  background: color-mix(in srgb, var(--rr-green) 5%, transparent);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.rr-case-tools > ul > li:hover {
  border-color: color-mix(in srgb, var(--rr-green) 44%, var(--rr-border));
  background: color-mix(in srgb, var(--rr-green) 9%, var(--rr-case-card));
  transform: translateY(-1px);
}

.rr-case-tools > ul > li::before {
  display: none !important;
  content: none !important;
}

.rr-case-tools a {
  color: var(--color-link) !important;
  font-weight: 500;
  text-decoration: none !important;
}

body[data-rr-case-page="true"] .rr-case-cta {
  margin-top: clamp(52px, 7vw, 82px);
  padding: clamp(26px, 4.2vw, 44px);
}

body[data-rr-case-page="true"] .rr-case-cta > h2 {
  max-width: 620px;
  margin-bottom: 14px !important;
  font-size: clamp(30px, 3.8vw, 44px) !important;
}

body[data-rr-case-page="true"] .rr-case-cta > p {
  max-width: 650px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.58;
}

body[data-rr-case-page="true"] .rr-case-cta ul:last-child {
  margin-top: 22px !important;
}

/* One consistent vertical rhythm between the major case sections. Individual
   components control their internal spacing; only the next section creates the
   external interval, so adjacent margins never produce different gaps. */
.rr-case-context,
.rr-case-steps,
.rr-case-results,
.rr-case-tools {
  margin-top: var(--rr-case-section-gap);
  margin-bottom: 0;
}

body[data-rr-case-page="true"] .rr-case-cta {
  margin-top: var(--rr-case-section-gap);
}

@media (max-width: 1299px) {
  .rr-case-context-card {
    grid-template-columns: minmax(170px, 0.62fr) minmax(0, 1.38fr);
  }

  .rr-case-hero-stats dd {
    font-size: clamp(16px, 2vw, 24px);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .rr-case-hero-stats dd {
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  body[data-rr-case-page="true"] .article-body article {
    --rr-case-section-gap: 42px;
  }

  body[data-rr-case-page="true"] .rr-case-hero {
    padding: 24px 20px;
  }

  body[data-rr-case-page="true"] .rr-case-brand {
    max-width: 270px;
    margin-bottom: 20px !important;
  }

  body[data-rr-case-page="true"] .rr-case-hero .article-title {
    margin-top: 16px !important;
    font-size: clamp(34px, 10.5vw, 44px) !important;
  }

  .rr-case-hero-stats {
    gap: 7px;
  }

  .rr-case-hero-stats > div {
    padding: 12px 9px;
  }

  .rr-case-hero-stats dd {
    font-size: clamp(18px, 5.2vw, 24px);
  }

  .rr-case-hero-stats dt {
    font-size: 10px;
  }

  .rr-case-context,
  .rr-case-steps,
  .rr-case-results,
  .rr-case-tools,
  body[data-rr-case-page="true"] .rr-case-cta {
    margin-top: var(--rr-case-section-gap);
    margin-bottom: 0;
  }

  .rr-case-context-card,
  .rr-case-steps-intro,
  .rr-case-step,
  .rr-case-results,
  .rr-case-tools,
  body[data-rr-case-page="true"] .rr-case-cta {
    padding: 22px 18px;
    border-radius: 21px;
  }

  .rr-case-context-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .rr-case-context-body > ul {
    grid-template-columns: 1fr;
  }

  .rr-case-step > h3 {
    min-height: 40px;
    padding-left: 52px;
    font-size: 23px !important;
  }

  .rr-case-tools > ul,
  .rr-case-results > ul {
    grid-template-columns: 1fr;
  }
}

/* Editorial case layout v3. Turn the long implementation story into a
   sequence of native split sections while preserving the Markdown source. */
.rr-case-steps-intro {
  overflow: hidden;
}

.rr-case-steps-intro p:has(img) {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(0, 185, 128, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 14%, rgba(82, 224, 179, 0.13), transparent 34%),
    color-mix(in srgb, var(--rr-green) 4%, transparent);
}

.rr-case-journey {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(82, 224, 179, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(82, 224, 179, 0.12), transparent 34%),
    color-mix(in srgb, var(--rr-green) 4%, var(--rr-case-card));
}

.rr-case-journey-header {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.rr-case-journey-header > span,
.rr-case-journey-outcome > span {
  color: var(--color-link);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-journey-header > strong {
  color: var(--color-article-heading-text);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.rr-case-journey-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-journey-list > li {
  position: relative;
  min-width: 0;
  min-height: 150px;
  display: grid;
  grid-template-rows: auto 50px 1fr;
  align-content: start;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--rr-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--rr-case-card-strong) 94%, transparent);
}

.rr-case-journey-list > li::before {
  display: none !important;
}

.rr-case-journey-list > li:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -13px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(82, 224, 179, 0.22);
  border-radius: 50%;
  color: var(--color-link);
  background: var(--rr-case-card);
  font-size: 13px;
  line-height: 1;
  content: "→";
  transform: translateY(-50%);
}

.rr-case-journey-index {
  width: fit-content;
  margin-bottom: 18px;
  padding: 5px 7px;
  border-radius: 8px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 10%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.rr-case-journey-list > li > strong {
  margin: 0;
  color: var(--color-article-heading-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.28;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.rr-case-journey-list > li > small {
  margin-top: 8px;
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.42;
}

.rr-case-journey-outcome {
  display: grid;
  gap: 7px;
  align-items: start;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(82, 224, 179, 0.3);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(82, 224, 179, 0.16), rgba(82, 224, 179, 0.06));
}

.rr-case-journey-outcome > strong {
  color: var(--color-article-heading-text);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
}

.rr-case-step {
  container-type: inline-size;
  padding: 0;
}

.rr-case-step-layout {
  min-width: 0;
  display: grid;
}

.rr-case-step-copy {
  min-width: 0;
  padding: clamp(24px, 4.2cqw, 38px);
}

.rr-case-step-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 17px;
  padding: 5px 11px;
  border: 1px solid rgba(0, 185, 128, 0.25);
  border-radius: 999px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.rr-case-step-copy > h3 {
  position: relative;
  min-height: 46px;
  margin: 0 0 22px !important;
  padding: 2px 0 0 64px;
  color: var(--color-article-heading-text);
  font-size: clamp(24px, 4.2cqw, 33px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  line-height: 1.22 !important;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.rr-case-step-copy > p:not(:has(img)),
.rr-case-step-copy > ul {
  color: var(--rr-case-muted);
  font-size: 15px;
  line-height: 1.62;
}

.rr-case-step-visual {
  min-width: 0;
  display: grid;
  align-content: center;
  padding: clamp(16px, 2.8cqw, 24px);
  border-top: 1px solid rgba(0, 185, 128, 0.14);
  background:
    radial-gradient(circle at 88% 12%, rgba(82, 224, 179, 0.14), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--rr-green) 6%, transparent), transparent 72%);
}

.rr-case-step-visual > p {
  margin: 0 !important;
}

.rr-case-step-visual img {
  width: 100%;
  margin: 0;
  border-color: rgba(82, 224, 179, 0.2);
  box-shadow: 0 18px 42px rgba(24, 26, 25, 0.16);
}

/* Step 1 uses real client screens inside a native responsive composition.
   The measurements stay as text instead of being baked into a square banner. */
.rr-case-step-visual--app {
  overflow: hidden;
  align-content: stretch;
  padding: clamp(18px, 3.2cqw, 28px);
}

.rr-case-app-showcase {
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(18px, 3cqw, 26px);
  align-content: center;
}

.rr-case-app-growth {
  position: relative;
  z-index: 3;
  padding: 16px;
  border: 1px solid rgba(82, 224, 179, 0.22);
  border-radius: 18px;
  background: color-mix(in srgb, var(--rr-green) 8%, var(--rr-case-card));
  box-shadow: 0 14px 34px rgba(24, 26, 25, 0.1);
}

.rr-case-app-growth-label {
  display: block;
  margin-bottom: 11px;
  color: var(--rr-case-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-app-growth-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.rr-case-app-growth-values > span {
  min-width: 0;
}

.rr-case-app-growth-values small,
.rr-case-app-growth-values strong {
  display: block;
}

.rr-case-app-growth-values small {
  margin-bottom: 4px;
  color: var(--rr-case-muted);
  font-size: 10px;
  line-height: 1.2;
}

.rr-case-app-growth-values strong {
  color: var(--color-article-heading-text);
  font-size: clamp(20px, 4.3cqw, 28px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.rr-case-app-growth-values > span:last-child strong {
  color: var(--color-link);
}

.rr-case-app-growth-values > i {
  align-self: end;
  padding-bottom: 2px;
  color: var(--color-link);
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}

.rr-case-app-growth-rate {
  width: fit-content;
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--rr-case-muted);
  background: color-mix(in srgb, var(--rr-green) 9%, transparent);
  font-size: 10px;
  line-height: 1.2;
}

.rr-case-app-growth-rate strong {
  color: var(--color-link);
  font-size: 15px;
  font-weight: 500;
}

.rr-case-app-screens {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: start;
  justify-self: center;
  min-width: 0;
  padding: 8px 8px 14px;
}

.rr-case-app-screen {
  position: relative;
  overflow: hidden;
  width: auto;
  height: auto;
  aspect-ratio: 1290 / 2796;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #111412;
  box-shadow:
    0 0 0 6px #111412,
    0 24px 58px rgba(8, 14, 11, 0.3);
}

.rr-case-app-screen--home {
  grid-column: 1 / 10;
  align-self: start;
  z-index: 1;
}

.rr-case-app-screen--popup {
  grid-column: 5 / 13;
  align-self: start;
  justify-self: end;
  z-index: 2;
  width: 100%;
  height: auto;
  margin-top: clamp(72px, 14cqw, 148px);
}

.rr-case-step-visual .rr-case-app-screen img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
  object-position: center;
  box-shadow: none;
}

.rr-case-step-visual .rr-case-app-screen--popup img {
  object-position: center;
}

.rr-case-step-visual--funnel {
  align-content: center;
  padding: clamp(18px, 3.2cqw, 28px);
}

.rr-case-funnel-showcase {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.rr-case-funnel-growth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 16px;
  align-items: end;
  padding: 18px;
  border: 1px solid rgba(82, 224, 179, 0.24);
  border-radius: 18px;
  background: color-mix(in srgb, var(--rr-green) 9%, var(--rr-case-card));
  box-shadow: 0 14px 34px rgba(24, 26, 25, 0.1);
}

.rr-case-funnel-growth > span {
  grid-column: 1 / -1;
  color: var(--rr-case-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-funnel-growth > strong {
  color: var(--color-link);
  font-size: clamp(29px, 6cqw, 42px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rr-case-funnel-growth > small {
  grid-column: 1;
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.35;
}

.rr-case-funnel-growth > b {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--color-article-heading-text);
  background: color-mix(in srgb, var(--rr-green) 11%, transparent);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.rr-case-funnel-flow {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-funnel-flow > li {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid var(--rr-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--rr-case-card-strong) 94%, transparent);
}

.rr-case-funnel-flow > li::before {
  display: none !important;
}

.rr-case-funnel-flow > li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 10%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.rr-case-funnel-flow > li > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.rr-case-funnel-flow strong {
  color: var(--color-article-heading-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.rr-case-funnel-flow small {
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.4;
}

.rr-case-funnel-notifications {
  min-width: 0;
  display: grid;
  gap: 0;
  isolation: isolate;
  padding: 2px 7px 4px;
}

.rr-case-funnel-notifications-label {
  margin: 0 0 9px 3px;
  color: var(--rr-case-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-funnel-notification {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--rr-border) 88%, rgba(255, 255, 255, 0.2));
  border-radius: 16px;
  background: color-mix(in srgb, var(--rr-case-card-strong) 92%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 12px 28px rgba(8, 14, 11, 0.14);
}

.rr-case-funnel-notification:nth-of-type(1) {
  z-index: 1;
  width: 96%;
  justify-self: start;
  transform: rotate(-0.7deg);
}

.rr-case-funnel-notification:nth-of-type(2) {
  z-index: 2;
  width: 97%;
  justify-self: end;
  margin-top: -5px;
  transform: rotate(0.65deg);
}

.rr-case-funnel-notification:nth-of-type(3) {
  z-index: 3;
  width: 95%;
  justify-self: start;
  margin-top: -5px;
  transform: rotate(-0.45deg);
}

.rr-case-funnel-notification-icon {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff url("/docs/assets/branding/favicon.svg") center / 36px 36px no-repeat;
  box-shadow: none;
}

.rr-case-funnel-notification-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

  .rr-case-funnel-notification-copy strong,
  .rr-case-funnel-notification-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-case-funnel-notification-copy strong {
  color: var(--color-article-heading-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.rr-case-funnel-notification-copy small,
.rr-case-funnel-notification time {
  color: var(--rr-case-muted);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.25;
}

.rr-case-funnel-notification time {
  align-self: start;
  padding-top: 2px;
  white-space: nowrap;
}

.rr-case-funnel-automation {
  margin: 0 !important;
  padding: 12px 14px;
  border-left: 2px solid var(--rr-green);
  border-radius: 0 12px 12px 0;
  color: var(--rr-case-muted) !important;
  background: color-mix(in srgb, var(--rr-green) 6%, transparent);
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.rr-case-step-visual--return {
  align-content: center;
  padding: clamp(18px, 3.2cqw, 28px);
}

.rr-case-return-showcase {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.rr-case-return-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rr-case-return-metrics > div {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 17px;
  border: 1px solid rgba(82, 224, 179, 0.23);
  border-radius: 17px;
  background: color-mix(in srgb, var(--rr-green) 9%, var(--rr-case-card));
}

.rr-case-return-metrics strong {
  color: var(--color-link);
  font-size: clamp(22px, 5cqw, 36px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.rr-case-return-metrics span {
  color: var(--rr-case-muted);
  font-size: 10px;
  line-height: 1.35;
}

.rr-case-return-flow {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-return-flow > li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid var(--rr-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--rr-case-card-strong) 94%, transparent);
}

.rr-case-return-flow > li::before {
  display: none !important;
}

.rr-case-return-flow > li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 10%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.rr-case-return-flow > li > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.rr-case-return-flow strong {
  color: var(--color-article-heading-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.rr-case-return-flow small {
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.4;
}

.rr-case-return-channels {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(82, 224, 179, 0.18);
  border-radius: 15px;
  background: color-mix(in srgb, var(--rr-green) 5%, transparent);
}

.rr-case-return-channels > small {
  color: var(--rr-case-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-return-channels > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rr-case-return-cost {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  margin: 2px 0 0 !important;
  padding-top: 10px;
  border-top: 1px solid rgba(82, 224, 179, 0.14);
  color: var(--rr-case-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.rr-case-return-cost::before {
  content: "✓";
  display: grid;
  width: 18px;
  height: 18px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 50%;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 12%, transparent);
  font-size: 10px;
  font-weight: 600;
}

.rr-case-return-cost strong,
.rr-case-return-cost span {
  min-width: 0;
}

.rr-case-return-cost strong {
  color: var(--color-article-heading-text);
  font-weight: 500;
}

.rr-case-return-cost span {
  color: var(--rr-case-muted);
}

.rr-case-return-channels .rr-case-channel-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(82, 224, 179, 0.2);
  border-radius: 999px;
  color: var(--color-article-heading-text);
  background: color-mix(in srgb, var(--rr-green) 7%, transparent);
  font-size: 11px;
  line-height: 1.2;
}

.rr-case-channel-chip > img,
.rr-case-channel-push-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: block;
}

.rr-case-channel-chip > img {
  object-fit: contain;
}

.rr-case-channel-push-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 10%, transparent);
}

.rr-case-channel-push-icon > svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Step 4 combines two real client screens with a native metric card. The
   original square banner is intentionally not used in this composition. */
.rr-case-step-visual--loyalty {
  overflow: hidden;
  align-content: center;
  padding: clamp(18px, 3.2cqw, 28px);
}

.rr-case-loyalty-showcase {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(18px, 3cqw, 26px);
  align-content: center;
}

.rr-case-loyalty-growth {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(82, 224, 179, 0.22);
  border-radius: 18px;
  background: color-mix(in srgb, var(--rr-green) 8%, var(--rr-case-card));
  box-shadow: 0 14px 34px rgba(24, 26, 25, 0.1);
}

.rr-case-loyalty-growth-head {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.rr-case-loyalty-growth-head > span {
  color: var(--rr-case-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-loyalty-growth > strong {
  color: var(--color-link);
  font-size: clamp(30px, 6cqw, 43px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.rr-case-loyalty-growth-head > small {
  flex: 0 0 auto;
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.rr-case-loyalty-growth-factors {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.rr-case-loyalty-growth b {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 9px 10px;
  border-radius: 14px;
  color: var(--color-article-heading-text);
  background: color-mix(in srgb, var(--rr-green) 8%, transparent);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.rr-case-loyalty-growth i {
  flex: 0 0 auto;
  color: var(--color-link);
  font-size: 15px;
  font-style: normal;
  line-height: 1;
}

.rr-case-loyalty-screens {
  position: relative;
  width: min(100%, 540px);
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: start;
  justify-self: center;
  padding: 2px 4px 10px;
}

.rr-case-loyalty-screen {
  position: relative;
  min-width: 0;
  grid-row: 1;
  margin: 0;
}

.rr-case-loyalty-screen--points {
  z-index: 1;
  grid-column: 1 / 9;
  margin-top: clamp(52px, 10cqw, 92px);
}

.rr-case-loyalty-screen--gifts {
  z-index: 2;
  grid-column: 5 / 13;
}

.rr-case-step-visual .rr-case-loyalty-screen img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 22px 32px rgba(8, 14, 11, 0.28));
}

.rr-case-loyalty-screen figcaption {
  position: absolute;
  z-index: 3;
  top: 8%;
  left: 8%;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(17, 20, 18, 0.82);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.rr-case-loyalty-screen--gifts figcaption {
  right: 7%;
  left: auto;
}

/* Step 5 keeps the real profile screen as the primary evidence and explains
   the feedback loop with native, searchable HTML instead of a square banner. */
.rr-case-step-visual--feedback {
  overflow: hidden;
  align-content: center;
  padding: clamp(18px, 3.2cqw, 28px);
}

.rr-case-feedback-showcase {
  min-width: 0;
  display: grid;
  gap: clamp(18px, 3cqw, 26px);
  align-content: center;
}

.rr-case-feedback-rating {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: end;
  padding: 17px 18px;
  border: 1px solid rgba(82, 224, 179, 0.24);
  border-radius: 18px;
  background: color-mix(in srgb, var(--rr-green) 9%, var(--rr-case-card));
  box-shadow: 0 14px 34px rgba(24, 26, 25, 0.1);
}

.rr-case-feedback-rating > span {
  grid-column: 1 / -1;
  color: var(--rr-case-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-case-feedback-rating > strong {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--color-article-heading-text);
  font-size: clamp(34px, 7cqw, 50px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.rr-case-feedback-rating > strong > i {
  color: #f6bc2f;
  font-size: 0.72em;
  font-style: normal;
  line-height: 1;
}

.rr-case-feedback-rating > small {
  max-width: 150px;
  align-self: center;
  color: var(--rr-case-muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

.rr-case-feedback-screen {
  position: relative;
  width: min(76%, 330px);
  min-width: 0;
  justify-self: center;
  margin: 0;
  padding: 0;
}

.rr-case-step-visual .rr-case-feedback-screen img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 24px 38px rgba(8, 14, 11, 0.3));
}

.rr-case-feedback-screen figcaption {
  position: absolute;
  right: 8%;
  bottom: 4%;
  left: 8%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  color: #ffffff;
  background: rgba(17, 20, 18, 0.84);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  backdrop-filter: blur(8px);
}

.rr-case-feedback-flow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-feedback-flow > li {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--rr-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--rr-case-card-strong) 94%, transparent);
}

.rr-case-feedback-flow > li::before {
  display: none !important;
  content: none !important;
}

.rr-case-feedback-flow > li > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 10%, transparent);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.rr-case-feedback-flow > li > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.rr-case-feedback-flow strong {
  color: var(--color-article-heading-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.rr-case-feedback-flow small {
  color: var(--rr-case-muted);
  font-size: 9px;
  line-height: 1.4;
}

.rr-case-app-screen figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #ffffff;
  background: rgba(17, 20, 18, 0.82);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  backdrop-filter: blur(8px);
}

.rr-case-step-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 26px 0 0;
}

.rr-case-step-metrics > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 14px;
  background: color-mix(in srgb, var(--rr-green) 6%, transparent);
}

.rr-case-step-metrics dd,
.rr-case-step-metrics dt {
  margin: 0;
}

.rr-case-step-metrics dd {
  color: var(--color-link);
  font-size: clamp(18px, 2.9cqw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  hyphens: none !important;
}

.rr-case-step-metrics dt {
  margin-top: 5px;
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.35;
}

.rr-case-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-channel-list > li {
  margin: 0 !important;
  padding: 7px 11px;
  border: 1px solid rgba(0, 185, 128, 0.18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rr-green) 5%, transparent);
  font-size: 12px;
  line-height: 1.2;
}

.rr-case-channel-list > li::before {
  display: none !important;
  content: none !important;
}

@container (min-width: 700px) {
  .rr-case-step-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  }

  .rr-case-step-visual {
    border-top: 0;
    border-left: 1px solid rgba(0, 185, 128, 0.14);
  }

  .rr-case-step[data-step="2"] .rr-case-step-copy,
  .rr-case-step[data-step="4"] .rr-case-step-copy {
    order: 2;
  }

  .rr-case-step[data-step="2"] .rr-case-step-visual,
  .rr-case-step[data-step="4"] .rr-case-step-visual {
    order: 1;
    border-right: 1px solid rgba(0, 185, 128, 0.14);
    border-left: 0;
  }
}

.rr-case-result-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 24px 0 30px !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-results > .rr-case-result-grid > li {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px !important;
}

.rr-case-results > .rr-case-result-grid > li::before {
  display: none !important;
  content: none !important;
}

.rr-case-result-value {
  display: block;
  color: var(--color-link);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 500;
  line-height: 1.05;
}

.rr-case-result-label {
  display: block;
  margin-top: 8px;
  color: var(--rr-case-muted);
  font-size: 13px;
  line-height: 1.35;
}

.rr-case-result-chart {
  padding: 14px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 20px;
  background: color-mix(in srgb, var(--rr-green) 5%, transparent);
}

.rr-case-result-chart img {
  display: block;
  border-radius: 14px;
}

.rr-case-native-chart {
  margin: 30px 0 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(0, 185, 128, 0.2);
  border-radius: 22px;
  color: var(--color-article-text);
  background: var(--rr-case-card-strong);
}

.rr-case-native-chart > figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}

.rr-case-native-chart > figcaption > strong {
  color: var(--color-article-heading-text);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.2;
}

.rr-case-native-chart > figcaption > span {
  color: var(--rr-case-muted);
  font-size: 13px;
  line-height: 1.4;
}

.rr-case-native-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
  color: var(--rr-case-muted);
  font-size: 12px;
  line-height: 1.4;
}

.rr-case-native-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rr-case-native-chart-legend > span::before {
  width: 18px;
  height: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;
  content: "";
}

.rr-case-native-chart-legend > .is-before::before {
  height: 12px;
  border-left: 2px dashed color-mix(in srgb, var(--color-article-text) 52%, transparent);
}

.rr-case-native-chart-legend > .is-after::before {
  border: 1px solid rgba(82, 224, 179, 0.7);
  border-radius: 999px;
  background: rgba(0, 185, 128, 0.42);
}

.rr-case-native-chart-plot {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.rr-case-native-chart-scale-row,
.rr-case-native-chart-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(138px, 0.34fr) minmax(0, 1fr);
  gap: 18px;
}

.rr-case-native-chart-scale {
  position: relative;
  height: 18px;
  color: var(--rr-case-muted);
  font-size: 10px;
  line-height: 1;
}

.rr-case-native-chart-scale > span {
  position: absolute;
  left: var(--rr-case-chart-position);
  transform: translateX(-50%);
}

.rr-case-native-chart-scale > span:first-child {
  transform: none;
}

.rr-case-native-chart-scale > span:last-child {
  transform: translateX(-100%);
}

.rr-case-native-chart-row {
  align-items: center;
}

.rr-case-native-chart-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rr-case-native-chart-label > strong {
  color: var(--color-article-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.rr-case-native-chart-label > span {
  color: var(--color-link);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.rr-case-native-chart-track {
  position: relative;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--color-article-text) 11%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-article-text) 3%, transparent);
}

.rr-case-native-chart-track::before {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 76.923%;
  border-left: 1px solid color-mix(in srgb, var(--color-article-text) 9%, transparent);
  content: "";
}

.rr-case-native-chart-baseline {
  position: absolute;
  z-index: 3;
  top: -4px;
  bottom: -4px;
  left: var(--rr-case-chart-position);
  border-left: 2px dashed color-mix(in srgb, var(--color-article-text) 52%, transparent);
  pointer-events: none;
}

.rr-case-native-chart-bar {
  position: relative;
  z-index: 2;
  width: var(--rr-case-chart-width);
  min-width: 46px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid rgba(82, 224, 179, 0.56);
  border-radius: 10px;
  color: #eafff7;
  background: linear-gradient(90deg, rgba(0, 185, 128, 0.38), rgba(0, 185, 128, 0.68));
}

.rr-case-native-chart-bar > span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.rr-case-native-chart-bar.is-lower-bound::after {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(82, 224, 179, 0.9);
  border-right: 2px solid rgba(82, 224, 179, 0.9);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.rr-case-chart-data[hidden] {
  display: none !important;
}

.rr-case-result-summary {
  margin: 26px 0 14px !important;
  padding: 20px 22px;
  border-left: 3px solid var(--rr-green);
  border-radius: 0 16px 16px 0;
  color: var(--color-article-heading-text) !important;
  background: color-mix(in srgb, var(--rr-green) 7%, transparent);
  font-size: 16px;
  line-height: 1.62;
}

.rr-case-attribution {
  margin-top: 14px;
  padding: 28px;
  border: 1px solid rgba(0, 185, 128, 0.16);
  border-radius: 20px;
  background: var(--rr-case-card-strong);
}

.rr-case-attribution > h3 {
  margin: 0 0 10px !important;
  color: var(--color-article-heading-text);
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.rr-case-attribution-note {
  max-width: 720px;
  margin: 0 !important;
  color: var(--rr-case-muted);
  font-size: 14px;
  line-height: 1.58;
}

.rr-case-attribution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.rr-case-attribution-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  min-width: 0;
  min-height: 192px;
  padding: 18px;
  border: 1px solid var(--rr-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--rr-green) 4%, var(--rr-case-card));
}

.rr-case-attribution-index {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 11px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 12%, transparent);
  place-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.rr-case-attribution-card > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--color-article-heading-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
}

.rr-case-attribution-card > p {
  margin: 0 !important;
  color: var(--rr-case-muted);
  font-size: 13px;
  line-height: 1.55;
}

.rr-case-attribution-outcome {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-top: 12px;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--rr-green) 32%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--rr-green) 10%, var(--rr-case-card));
}

.rr-case-attribution-outcome > span {
  align-self: center;
  color: var(--color-link);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.rr-case-attribution-outcome-copy {
  align-self: center;
  margin: 0 !important;
  color: var(--color-article-heading-text) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
}

@media (max-width: 760px) {
  .rr-case-step-copy {
    padding: 22px 18px 20px;
  }

  .rr-case-journey {
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
  }

  .rr-case-journey-list {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  .rr-case-journey-list > li {
    min-height: 0;
    display: block;
    padding: 14px 14px 14px 54px !important;
  }

  .rr-case-journey-index {
    position: absolute;
    top: 15px;
    left: 14px;
    margin: 0;
  }

  .rr-case-journey-list > li > strong {
    display: block;
    margin: 0;
  }

  .rr-case-journey-list > li > small {
    display: block;
    margin-top: 6px;
  }

  .rr-case-journey-list > li:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -17px;
    left: 20px;
    content: "↓";
    transform: none;
  }

  .rr-case-journey-outcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .rr-case-journey-outcome > strong {
    text-align: left;
  }

  .rr-case-step-visual {
    padding: 14px;
  }

  .rr-case-step-visual--app {
    padding: 18px;
  }

  .rr-case-step-visual--funnel {
    padding: 18px;
  }

  .rr-case-step-visual--return {
    padding: 18px;
  }

  .rr-case-step-visual--feedback {
    padding: 18px;
  }

  .rr-case-feedback-rating {
    padding: 15px;
  }

  .rr-case-feedback-rating > small {
    max-width: 128px;
  }

  .rr-case-feedback-screen {
    width: min(82%, 310px);
  }

  .rr-case-feedback-flow {
    grid-template-columns: 1fr;
  }

  .rr-case-feedback-flow > li {
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
  }

  .rr-case-funnel-growth {
    padding: 15px;
  }

  .rr-case-funnel-growth > b {
    grid-column: 1 / -1;
    grid-row: auto;
    width: fit-content;
  }

  .rr-case-funnel-notifications {
    padding-inline: 2px;
  }

  .rr-case-funnel-notification {
    width: 100% !important;
    min-height: 56px;
    transform: none !important;
  }

  .rr-case-app-showcase {
    grid-template-rows: auto auto;
    gap: 16px;
  }

  .rr-case-app-growth {
    padding: 14px;
  }

  .rr-case-app-screen {
    width: auto;
    height: auto;
    border-radius: 25px;
  }

  .rr-case-app-screen--popup {
    width: 100%;
    height: auto;
  }

  .rr-case-step-visual .rr-case-app-screen img {
    border-radius: inherit;
  }

  .rr-case-step-copy > h3 {
    min-height: 40px;
    padding-left: 52px;
    font-size: 23px !important;
  }

  .rr-case-step-metrics {
    gap: 7px;
  }

  .rr-case-step-metrics > div {
    padding: 12px 10px;
  }

  .rr-case-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rr-case-results > .rr-case-result-grid > li {
    min-height: 98px;
    padding: 14px !important;
  }

  .rr-case-result-value {
    font-size: 24px;
  }

  .rr-case-native-chart {
    padding: 18px 14px;
    border-radius: 18px;
  }

  .rr-case-native-chart > figcaption {
    align-items: flex-start;
    flex-direction: column;
  }

  .rr-case-native-chart-legend {
    gap: 8px 16px;
    margin-top: 14px;
  }

  .rr-case-native-chart-plot {
    gap: 15px;
    margin-top: 18px;
  }

  .rr-case-native-chart-scale-row,
  .rr-case-native-chart-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .rr-case-native-chart-scale-row > span:first-child {
    display: none;
  }

  .rr-case-native-chart-label {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .rr-case-native-chart-label > strong {
    font-size: 12px;
  }

  .rr-case-native-chart-track {
    height: 31px;
  }

  .rr-case-attribution {
    padding: 20px 16px;
  }

  .rr-case-attribution-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .rr-case-attribution-card {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    min-height: 0;
    padding: 16px;
  }

  .rr-case-attribution-index {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .rr-case-attribution-card > strong {
    margin-bottom: 5px;
  }

  .rr-case-attribution-outcome {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px;
  }

  .rr-case-attribution-outcome-copy {
    transform: none;
  }
}

/* The case remains readable on the narrowest supported phone viewport.
   At 320 px the regular mobile composition is too dense, so only this lower
   breakpoint stacks compact metric groups and loosens long Russian headings. */
@media (max-width: 359px) {
  body[data-rr-case-page="true"] .rr-case-hero {
    padding: 20px 16px;
  }

  body[data-rr-case-page="true"] .rr-case-hero .article-title {
    font-size: 30px !important;
    line-height: 1.02 !important;
  }

  .rr-case-hero-stats {
    grid-template-columns: 1fr;
  }

  .rr-case-hero-stats > div {
    min-height: 0;
    padding: 12px 14px;
  }

  .rr-case-hero-stats dd {
    font-size: 22px;
  }

  .rr-case-step-copy {
    padding: 20px 15px 18px;
  }

  .rr-case-step-copy > h3 {
    padding-left: 48px;
    font-size: 21px !important;
    line-height: 1.14 !important;
  }

  .rr-case-step-visual,
  .rr-case-step-visual--app,
  .rr-case-step-visual--funnel,
  .rr-case-step-visual--return,
  .rr-case-step-visual--loyalty,
  .rr-case-step-visual--feedback {
    padding: 12px;
  }

  .rr-case-step-metrics,
  .rr-case-return-metrics {
    grid-template-columns: 1fr;
  }

  .rr-case-funnel-growth,
  .rr-case-loyalty-growth,
  .rr-case-feedback-rating {
    grid-template-columns: 1fr;
  }

  .rr-case-funnel-growth > b,
  .rr-case-feedback-rating > small {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    justify-self: start;
    text-align: left;
  }

  .rr-case-loyalty-growth-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .rr-case-loyalty-growth-head > small {
    text-align: left;
  }

  .rr-case-loyalty-growth-factors {
    grid-template-columns: 1fr;
  }

  .rr-case-loyalty-growth-factors > i {
    display: none;
  }

  .rr-case-funnel-notification {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .rr-case-funnel-notification time {
    display: none;
  }

  .rr-case-funnel-notification-copy small {
    font-size: 8.5px;
  }

  .rr-case-feedback-screen {
    width: min(92%, 290px);
  }
}

@media (min-width: 360px) and (max-width: 420px) {
  .rr-case-hero-stats dd {
    font-size: 15px;
  }

  .rr-case-funnel-notification-copy small {
    font-size: 8.5px;
  }
}

/* Keep the article tree compact, including on narrow screens. Gramax generates
   dynamic class names, so the stable tree/depth markers are used here. */
.tree-root,
.tree-root ul {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

.tree-root li {
  margin-block: 0 !important;
}

.tree-root [class*="depth-"] {
  min-height: 28px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 20px !important;
}

.tree-root [class*="depth-"] .text {
  min-height: 20px;
  line-height: 20px;
}

.left-navigation-layout .text[data-rr-section-emoji]::before {
  width: 1.45em;
  display: inline-block;
  margin-right: 0.35em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.92em;
  line-height: 1;
  text-align: center;
  vertical-align: -0.06em;
  content: attr(data-rr-section-emoji);
}

/* The sidebar header has only 200 px for the brand and catalog name. Show the
   square Result.Rest mark and keep the short catalog title fully readable. */
.top-bar-content-wrapper a[href="/docs"] {
  min-width: 0;
  gap: 8px;
}

.top-bar-content-wrapper a[href="/docs"] img[data-testid="catalog-logo-image"] {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  content: url("/docs/assets/branding/favicon.svg");
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 7px;
}

.top-bar-content-wrapper a[href="/docs"] .title {
  min-width: 0;
  overflow: visible;
  font-size: 18px;
  line-height: 28px;
  text-overflow: clip;
  white-space: nowrap;
}

.left-navigation-layout {
  container-type: inline-size;
}

.rr-support-link-slot {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 8px 12px;
  border-top: 1px solid var(--rr-border);
  background: var(--color-menu-bg);
}

.rr-support-link {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(0, 185, 128, 0.3);
  border-radius: 10px;
  color: var(--color-article-text);
  background: rgba(0, 185, 128, 0.07);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.rr-support-link:hover {
  border-color: rgba(0, 185, 128, 0.58);
  background: rgba(0, 185, 128, 0.13);
  color: var(--color-link);
}

.rr-support-link img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.rr-support-link span {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
}

.rr-support-external-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.64;
}

/* Public UX: article feedback. */
.article-body:has(> .rr-article-feedback) > .mat-under-article {
  flex: 0 0 0 !important;
  min-height: 0 !important;
  height: 0 !important;
}

.rr-article-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  box-sizing: border-box;
  margin: 48px 0 32px;
  padding: 22px 24px;
  border: 1px solid var(--rr-border);
  border-radius: 14px;
  color: var(--color-article-text);
  background: var(--color-background-muted);
}

.rr-article-feedback h2,
.rr-article-feedback p {
  margin: 0 !important;
}

.rr-article-feedback [hidden] {
  display: none !important;
}

.rr-article-feedback h2 {
  color: var(--color-article-heading-text);
  font-size: 20px;
  line-height: 1.35;
}

.rr-feedback-copy p,
.rr-feedback-reasons > p,
.rr-feedback-result,
.rr-search-support-hint {
  margin-top: 4px !important;
  color: var(--color-primary-general);
  font-size: 13px;
  line-height: 1.45;
}

.rr-feedback-votes,
.rr-feedback-reasons > div,
.rr-search-suggestions,
.rr-search-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rr-feedback-votes button,
.rr-feedback-reasons button,
.rr-search-suggestions button,
.rr-search-popular a {
  min-height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--rr-border);
  border-radius: 10px;
  color: var(--color-article-text);
  background: var(--color-article-bg);
  font: 500 13px/1.25 "Onest", sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.rr-feedback-votes button:hover,
.rr-feedback-reasons button:hover,
.rr-search-suggestions button:hover,
.rr-search-popular a:hover,
.rr-feedback-votes button[aria-pressed="true"],
.rr-feedback-reasons button[aria-pressed="true"] {
  border-color: rgba(0, 185, 128, 0.55);
  color: var(--color-link);
  background: rgba(0, 185, 128, 0.09);
}

.rr-feedback-reasons,
.rr-feedback-result,
.rr-feedback-support {
  grid-column: 1 / -1;
}

.rr-feedback-reasons > div {
  margin-top: 9px;
}

.rr-feedback-support,
.rr-search-support,
.rr-search-copy-support {
  width: fit-content;
  min-height: 42px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(0, 185, 128, 0.32);
  border-radius: 10px;
  color: var(--color-link);
  background: rgba(0, 185, 128, 0.08);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.rr-feedback-support:hover,
.rr-search-support:hover,
.rr-search-copy-support:hover {
  border-color: rgba(0, 185, 128, 0.6);
  color: var(--color-link);
  background: rgba(0, 185, 128, 0.14);
}

/* Public UX: recovery from an empty Gramax search result. */
.rr-search-rescue {
  margin: 10px 14px 16px;
  padding: 15px;
  border: 1px solid var(--rr-border);
  border-radius: 12px;
  color: var(--color-article-text);
  background: var(--color-background-muted);
}

.rr-search-rescue h2 {
  margin: 0 0 8px !important;
  color: var(--color-article-heading-text);
  font-size: 14px;
  line-height: 1.35;
}

.rr-search-rescue h2:not(:first-child) {
  margin-top: 15px !important;
}

.rr-search-support-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rr-search-copy-support {
  border-color: rgba(0, 185, 128, 0.58);
  color: var(--color-article-text);
  background: rgba(0, 185, 128, 0.15);
  font-family: "Onest", sans-serif;
}

.rr-search-copy-status {
  margin: 9px 0 0 !important;
  color: var(--color-link);
  font-size: 13px;
  line-height: 1.45;
}

.rr-search-copy-status[data-rr-copy-success="false"] {
  color: var(--color-warning-text, #b86b00);
}

.rr-search-copy-manual {
  width: 100%;
  min-height: 112px;
  box-sizing: border-box;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid var(--rr-border);
  border-radius: 9px;
  resize: vertical;
  color: var(--color-article-text);
  background: var(--color-article-bg);
  font: 400 13px/1.45 "Onest", sans-serif;
}

/* Public UX: previous and next article cards. */
.rr-article-navigation {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.rr-article-navigation > div {
  min-width: 0;
  width: 100%;
}

.rr-article-navigation > div:not(:has(a)) {
  display: none !important;
}

.rr-article-navigation--single > div:has(a) {
  grid-column: 1 / -1;
}

.rr-article-nav-card {
  width: 100% !important;
  min-height: 104px;
  display: grid !important;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
  padding: 18px 22px;
  border: 1px solid var(--rr-border);
  border-radius: 12px;
  color: var(--color-primary-general) !important;
  background: color-mix(in srgb, var(--color-background-muted) 72%, transparent);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.rr-article-nav-card--prev {
  grid-template-columns: 24px minmax(0, 1fr);
}

.rr-article-nav-card--next {
  grid-template-columns: minmax(0, 1fr) 24px;
}

.rr-article-nav-card:hover {
  border-color: color-mix(in srgb, var(--color-link) 58%, var(--rr-border));
  color: var(--color-link) !important;
  background: rgba(0, 185, 128, 0.07);
  transform: translateY(-1px);
}

.rr-article-nav-card:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

.rr-article-nav-card > svg {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  stroke-width: 1.8;
}

.rr-article-nav-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rr-article-nav-card--prev .rr-article-nav-copy {
  text-align: right;
}

.rr-article-nav-card--next .rr-article-nav-copy {
  text-align: left;
}

.rr-article-nav-label {
  color: var(--color-primary-general);
  font: 400 12px/1.3 "Onest", sans-serif;
  opacity: 0.78;
}

.rr-article-nav-title {
  min-width: 0;
  display: -webkit-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  color: var(--color-article-heading-text);
  font: 500 16px/1.35 "Onest", sans-serif;
  white-space: normal !important;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Public UX: mobile article actions and contents sheet. */
.rr-mobile-tools,
.rr-mobile-contents,
.rr-mobile-search-close,
.rr-desktop-header {
  display: none;
}

/* Public UX: persistent desktop header above the complete documentation layout. */
@media (min-width: 900px) {
  body[data-rr-desktop-header="true"] > #root {
    position: absolute !important;
    top: 64px;
    right: 0;
    left: 0;
    height: calc(100dvh - 64px) !important;
    margin-top: 0;
  }

  .rr-desktop-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 35;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: 1px solid var(--rr-border);
    color: var(--color-article-text);
    background: color-mix(in srgb, var(--color-article-bg) 96%, transparent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .rr-desktop-brand {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-article-heading-text) !important;
    font-size: 18px;
    line-height: 1;
    text-decoration: none !important;
  }

  .rr-desktop-brand-home,
  .rr-desktop-brand-section-link {
    display: inline-flex;
    align-items: center;
    color: inherit !important;
    text-decoration: none !important;
  }

  .rr-desktop-brand-home {
    gap: 12px;
  }

  .rr-desktop-brand-section-link {
    color: var(--color-primary-general) !important;
  }

  .rr-desktop-brand img {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
  }

  .rr-desktop-brand-name {
    font-weight: 500;
  }

  .rr-desktop-brand-divider {
    width: 1px;
    height: 24px;
    background: var(--rr-border);
  }

  .rr-desktop-brand-section {
    color: var(--color-primary-general);
    font-weight: 300;
  }

  .rr-desktop-brand:hover .rr-desktop-brand-section {
    color: var(--color-link);
  }

  .rr-desktop-search {
    width: min(310px, 32vw);
    min-height: 42px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 7px 10px 7px 13px;
    border: 1px solid var(--rr-border);
    border-radius: 13px;
    color: var(--color-primary-general);
    background: var(--color-background-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }

  .rr-desktop-search:hover {
    border-color: color-mix(in srgb, var(--color-link) 52%, var(--rr-border));
    color: var(--color-article-text);
    background: var(--color-article-bg);
  }

  .rr-desktop-search svg {
    width: 20px;
    height: 20px;
  }

  .rr-desktop-search-label {
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rr-desktop-search-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .rr-desktop-search kbd {
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid var(--rr-border);
    border-radius: 7px;
    color: var(--color-primary-general);
    background: var(--color-article-bg);
    font: 500 12px/1 "Onest", sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  /* The same controls are now available in the global header. */
  .left-navigation-layout .top-bar-content-wrapper {
    display: none !important;
  }

  /* Keep the desktop catalog navigation permanently visible, GitBook-style.
     Gramax's collapsed state moves the same 320px panel off-screen and reduces
     its wrapper to zero; override both pieces so saved UI state cannot hide it. */
  .catalog-layout > div:has(> .left-navigation-layout) {
    width: 320px !important;
    min-width: 320px !important;
    flex: 0 0 320px !important;
  }

  .left-navigation-layout {
    position: static !important;
    width: 320px !important;
    border-right: 1px solid var(--rr-border);
    background: var(--color-article-bg) !important;
    transform: translateX(0) !important;
  }

  .left-navigation-layout > div,
  .left-navigation-layout .rr-support-link-slot {
    background: var(--color-article-bg) !important;
  }

  /* Remove the empty duplicate sidebar header wrapper, the collapse status bar
     and editor-only row menus. The Documentation root remains structural. */
  .left-navigation-layout div:has(> .top-bar-content-wrapper),
  .left-navigation-layout [data-qa="qa-status-bar"],
  .left-navigation-layout [data-testid="article-actions"],
  .left-navigation-layout .right-extensions:has([data-testid="article-actions"]) {
    display: none !important;
  }

  .left-navigation-layout .tree-root {
    box-sizing: border-box;
    padding-top: 16px !important;
  }

  .left-navigation-layout .tree-root li,
  .left-navigation-layout .tree-root a,
  .left-navigation-layout .tree-root [data-qa^="catalog-navigation-category-link-level-"] {
    width: 100% !important;
    box-sizing: border-box;
  }

  .left-navigation-layout .tree-root a {
    display: block !important;
  }

  .left-navigation-layout .tree-root [class*="depth-"].is-active {
    color: var(--color-link) !important;
    background: color-mix(in srgb, var(--color-link) 10%, var(--color-article-bg)) !important;
    box-shadow: inset 3px 0 var(--color-link);
  }

  .left-navigation-layout .tree-root [class*="depth-"]:not(.is-active):is(:hover, :focus-within),
  .left-navigation-layout .tree-root [class*="depth-"]:has([data-state="open"]):not(.is-active) {
    color: var(--color-article-text) !important;
    background: var(--rr-hover-bg) !important;
  }
}

@media (min-width: 900px) {
  /* Keep the in-article table of contents permanently available everywhere
     the desktop navigation is active. Gramax can otherwise retain its native
     hidden state after a zoom change or an SPA transition even though the TOC
     is already rendered. */
  .catalog-layout > .article {
    display: flex !important;
    min-width: 0 !important;
  }

  .catalog-layout > .article > .article-content-wrapper {
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  .catalog-layout > .article > .right-nav-layout {
    --rr-toc-width: clamp(210px, 18vw, 260px);
    width: var(--rr-toc-width) !important;
    min-width: var(--rr-toc-width) !important;
    display: block !important;
    flex: 0 0 var(--rr-toc-width) !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .catalog-layout > .article > .right-nav-layout > div,
  .catalog-layout > .article > .right-nav-layout .right-nav,
  .catalog-layout > .article > .right-nav-layout .article-right-sidebar,
  .catalog-layout > .article > .right-nav-layout aside {
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .catalog-layout > .article > .right-nav-layout [data-testid="table-of-contents"] {
    display: block !important;
  }

  body[data-rr-docs-home="true"] .article-content-wrapper {
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-rr-docs-home="true"] .article-content.article-default-content,
  body[data-rr-docs-home="true"] .article-body,
  body[data-rr-docs-home="true"] .article-body article,
  body[data-rr-academy-home="true"] .article-content.article-default-content,
  body[data-rr-academy-home="true"] .article-body,
  body[data-rr-academy-home="true"] .article-body article {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 639px) {
  /* The nine-dot home button duplicates the catalog title on phones. Keep the
     clearer branded title as the single route to the documentation root. */
  a[data-qa="home-page-button"] {
    display: none !important;
  }

  /* Center the brand against the full header, independently from the controls
     at both edges. The width cap keeps their touch targets unobstructed. */
  .top-bar-content-wrapper {
    position: relative !important;
  }

  .top-bar-content-wrapper a[href="/docs"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 1;
    width: max-content !important;
    max-width: calc(100% - 116px) !important;
    flex: 0 0 auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Search is already available as a labelled action in the fixed mobile
     toolbar. Remove the duplicate icon from the header without disabling the
     underlying trigger used to open Gramax's search dialog. */
  .top-bar-content-wrapper [data-rr-header-search="true"] {
    display: none !important;
  }

  /* The desktop/sidebar support slot becomes an overlay in Gramax's mobile
     layout. The mobile tools below retain Support without covering the title. */
  .left-navigation-layout .rr-support-link-slot {
    display: none !important;
  }

  body[data-rr-mobile-tools="true"] {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  body.rr-mobile-contents-open {
    overflow: hidden !important;
  }

  .rr-mobile-tools {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9000;
    min-height: 58px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    box-sizing: border-box;
    padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    border-top: 1px solid var(--rr-border);
    background: color-mix(in srgb, var(--color-menu-bg) 94%, transparent);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.rr-search-open .rr-mobile-tools {
    display: none;
  }

  /* Turn Gramax search into a true mobile screen. This keeps its native search
     engine and results, but removes the desktop modal width and height limits. */
  body.rr-search-open {
    overflow: hidden !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9800 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--color-article-bg) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .modal,
  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .layer-two {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--color-article-bg) !important;
    box-shadow: none !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .modal,
  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .layer-two {
    display: flex !important;
    flex-direction: column !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-form {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    background: var(--color-article-bg);
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input-block {
    position: relative;
    padding: max(14px, env(safe-area-inset-top)) 18px 10px !important;
    border-bottom: 1px solid var(--rr-border);
    background: var(--color-article-bg);
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input {
    min-height: 52px;
    padding: 0 58px 0 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input input {
    min-width: 0;
    color: var(--color-article-text) !important;
    caret-color: var(--rr-green) !important;
    font-size: 16px !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input input::placeholder {
    color: var(--rr-muted-text) !important;
    opacity: 1 !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input-right-side,
  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input-right-side button,
  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input-right-side [data-qa="qa-clickable"] {
    min-width: 44px;
    min-height: 44px;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .search-input-right-side > button:not(.rr-mobile-search-close) {
    display: none !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .rr-mobile-search-close {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    z-index: 3;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--rr-border);
    border-radius: 50%;
    color: var(--color-article-text);
    background: var(--color-background-muted);
    cursor: pointer;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .rr-mobile-search-close:hover {
    border-color: rgba(0, 185, 128, 0.5);
    background: rgba(0, 185, 128, 0.09);
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .rr-mobile-search-close img {
    width: 24px;
    height: 24px;
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body.rr-search-open .rr-mobile-search-close img,
  body[data-theme="dark"].rr-search-open .rr-mobile-search-close img {
    filter: invert(1);
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .response {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    border-radius: 0 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .prompt {
    padding: 18px !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .bottom-content-content {
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100% !important;
    min-height: 68px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    padding: 10px 18px max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--rr-border);
    background: color-mix(in srgb, var(--color-article-bg) 96%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Keyboard shortcuts are desktop-only. The remaining scope selector is
     intentionally hidden globally because the catalog has no alternative
     search scope. Remove its now-empty mobile footer as well. */
  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .bottomCheckbox {
    display: none !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .bottom-content:has(.bottom-content-filter-dropdown-trigger) {
    display: none !important;
  }

  body.rr-search-open [role="dialog"]:has(input[placeholder="Введите запрос"]) .rr-search-rescue {
    margin: 18px;
  }

  .rr-mobile-tools button,
  .rr-mobile-tools a {
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    padding: 4px 3px 5px;
    border: 0;
    border-radius: 9px;
    color: var(--color-primary-general);
    background: transparent;
    font: 500 11px/1.2 "Onest", sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .rr-mobile-tools-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: block;
    margin: 2px 0;
    background: currentColor;
    -webkit-mask-image: url("/docs/assets/branding/mobile-actions-icons.svg");
    mask-image: url("/docs/assets/branding/mobile-actions-icons.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 380px 746px;
    mask-size: 380px 746px;
    transform: scale(1.25);
    transform-origin: center;
  }

  .rr-mobile-tools [data-rr-mobile-action="contents"] .rr-mobile-tools-icon {
    -webkit-mask-position: -272px -480px;
    mask-position: -272px -480px;
  }

  .rr-mobile-tools [data-rr-mobile-action="search"] .rr-mobile-tools-icon {
    -webkit-mask-position: -164px -250px;
    mask-position: -164px -250px;
  }

  .rr-mobile-tools [data-rr-mobile-action="next"] .rr-mobile-tools-icon {
    -webkit-mask-position: -92px -20px;
    mask-position: -92px -20px;
  }

  .rr-mobile-tools [data-rr-mobile-action="support"] .rr-mobile-tools-icon {
    -webkit-mask-position: -92px -526px;
    mask-position: -92px -526px;
  }

  .rr-mobile-tools button:hover,
  .rr-mobile-tools a:hover,
  .rr-mobile-tools button:active,
  .rr-mobile-tools a:active {
    color: var(--color-link);
    background: rgba(0, 185, 128, 0.09);
  }

  .rr-mobile-tools [aria-disabled="true"],
  .rr-mobile-tools button:disabled {
    opacity: 0.42;
    cursor: default;
  }

  .rr-mobile-contents:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: block;
  }

  .rr-mobile-contents-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
  }

  .rr-mobile-contents-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(72dvh, 620px);
    box-sizing: border-box;
    overflow: auto;
    padding: 18px 18px max(22px, env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    color: var(--color-article-text);
    background: var(--color-article-bg);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.22);
  }

  .rr-mobile-contents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }

  .rr-mobile-contents-header h2 {
    margin: 0 !important;
    font-size: 20px;
  }

  .rr-mobile-contents-header button {
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--rr-border);
    border-radius: 9px;
    color: var(--color-article-text);
    background: var(--color-background-muted);
    font: 500 12px/1 "Onest", sans-serif;
  }

  .rr-mobile-contents nav {
    display: flex;
    flex-direction: column;
  }

  .rr-mobile-contents nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 9px 8px;
    border-top: 1px solid var(--rr-border);
    color: var(--color-article-text);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
  }

  .rr-mobile-contents nav a[data-level="3"] {
    padding-left: 24px;
    color: var(--color-primary-general);
    font-size: 13px;
  }

  .rr-article-feedback {
    grid-template-columns: 1fr;
    margin: 36px 0 24px;
    padding: 18px;
  }

  .rr-article-navigation {
    grid-template-columns: 1fr;
    gap: 10px;
    /* The article scrolls inside Gramax's content container, so body padding
       cannot move these cards above the fixed 64px toolbar. Reserve the bar,
       its 10px inset and 24px of breathing room inside the navigation itself. */
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  }

  .rr-article-navigation > div:has(a) {
    grid-column: 1;
  }

  .rr-article-nav-card {
    min-height: 76px;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 10px;
  }

  .rr-article-nav-label {
    font-size: 11px;
  }

  .rr-article-nav-title {
    font-size: 14px;
  }

  .rr-feedback-votes,
  .rr-feedback-reasons,
  .rr-feedback-result,
  .rr-feedback-support {
    grid-column: 1;
  }

  .rr-feedback-votes button {
    flex: 1 1 0;
  }

  .rr-search-rescue {
    margin: 8px 10px 12px;
    padding: 13px;
  }
}

@container (max-width: 120px) {
  .rr-support-link-slot {
    padding-inline: 6px;
  }

  .rr-support-link {
    justify-content: center;
    padding-inline: 6px;
  }

  .rr-support-link span,
  .rr-support-external-icon {
    display: none;
  }
}

.rr-site-footer {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 64px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--rr-border);
  color: #87888d;
  font-size: 14px;
  line-height: 1.45;
}

.rr-footer-company-name {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
}

.rr-footer-links,
.rr-footer-contacts,
.rr-footer-accreditation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.rr-footer-links,
.rr-footer-accreditation {
  align-items: flex-end;
  text-align: right;
}

.rr-site-footer a,
.rr-footer-email {
  color: inherit;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.rr-site-footer a:hover {
  color: var(--color-link);
}

.rr-footer-socials {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.rr-footer-socials a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--rr-border);
  border-radius: 50%;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.rr-footer-socials a:hover {
  border-color: var(--color-link);
}

.rr-footer-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.rr-footer-accreditation img {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
  margin-top: 2px;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.95;
}

@media (max-width: 639px) {
  .rr-site-footer {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
    /* Gramax scrolls the article in an inner container, so body padding does
       not protect the footer from the fixed mobile action bar. Keep the
       original 28px breathing room plus the toolbar's 66px safe zone here. */
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
  }

  .rr-footer-links,
  .rr-footer-accreditation {
    align-items: flex-start;
    text-align: left;
  }
}

@media print {
  .rr-site-footer,
  .rr-image-zoom,
  .rr-article-feedback,
  .rr-mobile-tools,
  .rr-mobile-contents,
  .rr-search-rescue,
  .rr-desktop-header {
    display: none !important;
  }

  body[data-rr-desktop-header="true"] > #root {
    position: static !important;
    height: auto !important;
    margin-top: 0 !important;
  }
}

@media not print {
  html[data-theme="dark"],
  body[data-theme="dark"] {
    --rr-green-text: #52e0b3;
    --rr-border: #343a37;
    --rr-muted-text: #aeb8b3;
    --rr-hover-bg: rgba(82, 224, 179, 0.09);
    --rr-scroll-thumb: rgba(82, 224, 179, 0.38);
    --rr-scroll-thumb-hover: rgba(82, 224, 179, 0.62);
    --rr-scroll-track: rgba(82, 224, 179, 0.06);

    --color-primary: #ffffff;
    --color-primary-general: #aeb8b3;
    --color-secondary: #00b980;
    --color-secondary-dark: #25d59f;
    --color-focus: #52e0b3;
    --color-link: #52e0b3;
    --color-line: var(--rr-border);
    --color-scroll: var(--rr-scroll-thumb);
    --color-scroll-bg: var(--rr-scroll-track);
    --color-shadows-scroll: rgba(82, 224, 179, 0.16);
    --color-lev-sidebar-hover: var(--rr-hover-bg);
    --color-block: #202321;
    --color-block-hover: #242b27;
    --color-image-line: var(--rr-border);
    --color-article-text: #e5ebe8;
    --color-article-heading-text: #ffffff;
    --color-article-strong-text: #ffffff;
    --color-article-bg: #181a19;
    --color-menu-bg: #111312;
    --color-menu-opacity-bg: #111312e8;
    --color-contextmenu-bg: #202321;
    --color-background-muted: #242825;
    --color-input-bg: #202321;
    --color-input-active-text: #e5ebe8;
    --color-placeholder: var(--rr-muted-text);
    --color-cmd-text: #e5ebe8;
    --color-cmd-bg: #202321;
    --color-cmd-border: var(--rr-border);
    --color-kbd-text: var(--rr-muted-text);
    --color-kbd-border: var(--rr-border);
    --color-kbd-bg: #202321;
    --color-nav-article-drop-target: rgba(82, 224, 179, 0.2);
    --search-badge-recommended-bg: rgba(82, 224, 179, 0.14);
    --search-badge-recommended-text: #52e0b3;
    --color-code-bg: rgba(255, 255, 255, 0.08);
    --color-code-bg-hover: rgba(255, 255, 255, 0.12);
    --color-table-border: #343a37;
    --color-table-row-hover: #202723;
    --color-nav-item-selected: #52e0b3;
    --color-home-card-border: #343a37;
    --color-home-card-border-hover: rgba(82, 224, 179, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Case: Minori. All visuals are native HTML/CSS so the supplied legacy
   agency slides remain factual references, not published assets. */
body[data-rr-case-kind="minori"] .rr-minori-hero {
  background:
    radial-gradient(circle at 91% 14%, rgba(82, 224, 179, 0.2), transparent 34%),
    linear-gradient(135deg, #171a18 0%, #1a2b24 100%);
}

.rr-minori-case-brand {
  width: min(100%, 540px);
  max-width: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}

.rr-minori-case-brand img {
  width: auto;
  max-width: none;
  height: auto;
  flex: 0 1 auto;
  object-fit: contain;
}

.rr-minori-case-brand img:first-child {
  width: clamp(156px, 25vw, 235px);
}

.rr-minori-case-brand img:last-child {
  width: clamp(164px, 27vw, 245px);
}

.rr-minori-case-brand > span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font: 300 clamp(22px, 3vw, 32px)/1 "Onest", sans-serif;
}

body[data-rr-case-kind="minori"] .rr-case-hero-stats {
  grid-template-columns: 0.72fr 1.35fr 0.72fr;
}

body[data-rr-case-kind="minori"] .rr-case-hero-stats > div:nth-child(2) dd {
  font-size: clamp(19px, 2.25vw, 29px);
}

body[data-rr-case-kind="minori"] .rr-case-context-card {
  grid-template-columns: minmax(230px, 0.82fr) minmax(0, 1.18fr);
}

body[data-rr-case-kind="minori"] .rr-case-context-heading > h2 {
  font-size: clamp(23px, 2.1vw, 30px) !important;
  overflow-wrap: normal;
  word-break: normal;
}

/* Gramax can retain a desktop catalog state after a resize. Case pages use
   their own mobile contents action, so below the desktop breakpoint the
   article must never be squeezed between stale navigation columns. */
@media (max-width: 899px) {
  body[data-rr-case-kind] .catalog-layout > div:has(> .left-navigation-layout),
  body[data-rr-case-kind] .catalog-layout > .article > .right-nav-layout {
    display: none !important;
  }

  body[data-rr-case-kind] .catalog-layout > .article,
  body[data-rr-case-kind] .catalog-layout > .article > .article-content-wrapper,
  body[data-rr-case-kind] .article-content,
  body[data-rr-case-kind] .article-body,
  body[data-rr-case-kind] .article-body > article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }
}

.rr-minori-timeline {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-minori-timeline > li {
  min-width: 0;
  display: grid;
  gap: 7px;
  margin: 0 !important;
  padding: 17px;
  border: 1px solid rgba(82, 224, 179, 0.17);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.rr-minori-timeline > li::before {
  display: none !important;
}

.rr-minori-timeline span,
.rr-minori-timeline small {
  color: var(--rr-case-muted);
  font-size: 11px;
}

.rr-minori-timeline strong {
  color: var(--color-article-heading-text);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.2;
}

.rr-minori-step-visual {
  min-height: 100%;
}

body[data-rr-case-kind="minori"] .rr-minori-step {
  overflow: hidden;
}

.rr-minori-visual-label {
  display: grid;
  gap: 7px;
  margin-bottom: 20px;
}

.rr-minori-visual-label span,
.rr-minori-app-growth > span,
.rr-minori-preorder > span,
.rr-minori-revenue-chart figcaption > span {
  color: var(--color-link);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rr-minori-visual-label strong,
.rr-minori-revenue-chart figcaption > strong {
  color: var(--color-article-heading-text);
  font-size: clamp(19px, 2.5cqw, 26px);
  font-weight: 500;
  line-height: 1.25;
}

.rr-minori-channel-grid,
.rr-minori-promo-grid,
.rr-minori-automation-grid,
.rr-minori-contest-grid {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-minori-channel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rr-minori-promo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rr-minori-automation-grid {
  grid-template-columns: 1fr;
}

.rr-minori-contest-grid {
  /* Four results read as a balanced 2 × 2 group in the visual column. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rr-minori-channel-grid > li,
.rr-minori-promo-grid > li,
.rr-minori-automation-grid > li,
.rr-minori-contest-grid > li {
  min-width: 0;
  margin: 0 !important;
  padding: 14px 15px !important;
  border: 1px solid rgba(82, 224, 179, 0.17);
  border-radius: 15px;
  color: var(--color-article-text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.rr-minori-channel-grid > li::before,
.rr-minori-promo-grid > li::before,
.rr-minori-automation-grid > li::before,
.rr-minori-contest-grid > li::before {
  display: none !important;
}

.rr-minori-system-wrap {
  /* A real grid spacer: margins on child paragraphs can be reset by Gramax. */
  padding-top: 20px;
}

.rr-minori-system-note {
  margin: 0 !important;
  padding: 14px 16px;
  border-left: 3px solid var(--rr-green);
  border-radius: 0 13px 13px 0;
  color: var(--rr-case-muted);
  background: rgba(82, 224, 179, 0.07);
  font-size: 13px;
  line-height: 1.5;
}

.rr-minori-app-growth {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(82, 224, 179, 0.22);
  border-radius: 18px;
  background: rgba(82, 224, 179, 0.09);
}

.rr-minori-app-growth > strong,
.rr-minori-preorder > strong {
  color: #75e4bd;
  font-size: clamp(34px, 6cqw, 54px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.rr-minori-app-growth > small,
.rr-minori-preorder > small {
  color: var(--rr-case-muted);
  font-size: 12px;
}

.rr-minori-contest-grid > li {
  display: grid;
  place-items: center;
  min-height: 78px;
  text-align: center;
}

.rr-minori-preorder {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid rgba(82, 224, 179, 0.26);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(82, 224, 179, 0.14), rgba(82, 224, 179, 0.04));
}

.rr-minori-activity {
  display: grid;
  gap: 10px;
}

.rr-minori-activity > div {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) minmax(64px, 0.72fr) 18px minmax(64px, 0.72fr);
  gap: 10px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid rgba(82, 224, 179, 0.17);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
}

.rr-minori-activity > div > strong {
  color: var(--color-article-heading-text);
  font-size: 13px;
  font-weight: 500;
}

.rr-minori-activity span {
  display: grid;
  gap: 3px;
}

.rr-minori-activity small {
  color: var(--rr-case-muted);
  font-size: 9px;
}

.rr-minori-activity b {
  color: var(--color-article-text);
  font-size: 21px;
  font-weight: 500;
}

.rr-minori-activity > div > span:last-child b,
.rr-minori-activity i {
  color: #75e4bd;
}

.rr-minori-activity i {
  font-style: normal;
  text-align: center;
}

.rr-minori-results-summary {
  display: grid;
  gap: 14px;
  margin: 26px 0 30px;
}

.rr-minori-results-lead,
.rr-minori-results-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rr-minori-result-metric {
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 19px 20px;
  border: 1px solid rgba(82, 224, 179, 0.17);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.rr-minori-result-metric.is-primary {
  min-height: 138px;
  border-color: rgba(82, 224, 179, 0.32);
  background:
    radial-gradient(circle at 88% 0%, rgba(82, 224, 179, 0.16), transparent 55%),
    rgba(82, 224, 179, 0.075);
}

.rr-minori-result-metric strong {
  color: #75e4bd;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.rr-minori-result-metric span {
  color: var(--rr-case-muted);
  font-size: 14px;
  line-height: 1.4;
  text-wrap: balance;
}

.rr-minori-revenue-chart {
  margin: 28px 0 24px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(82, 224, 179, 0.2);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
}

.rr-minori-revenue-chart figcaption {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
}

.rr-minori-revenue-plot {
  height: 238px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 28px);
  align-items: end;
  padding-top: 16px;
}

.rr-minori-revenue-plot > div {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 9px;
  align-items: end;
}

.rr-minori-revenue-bar {
  height: var(--rr-minori-bar);
  display: flex;
  align-items: end;
  border-radius: 12px 12px 3px 3px;
  background: rgba(255, 255, 255, 0.08);
}

.rr-minori-revenue-bar > span {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(82, 224, 179, 0.26);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(82, 224, 179, 0.27), rgba(82, 224, 179, 0.08));
}

.rr-minori-revenue-plot .is-current .rr-minori-revenue-bar > span {
  background: linear-gradient(180deg, rgba(82, 224, 179, 0.72), rgba(0, 185, 128, 0.3));
}

.rr-minori-revenue-plot strong {
  color: var(--color-article-heading-text);
  font-size: clamp(14px, 2.2vw, 20px);
  font-weight: 500;
  white-space: nowrap;
}

.rr-minori-revenue-plot small {
  min-height: 32px;
  color: var(--rr-case-muted);
  font-size: 10px;
  line-height: 1.35;
}

.rr-minori-attribution {
  margin-top: var(--rr-case-section-gap);
  padding: clamp(24px, 3.6vw, 36px);
  border: 1px solid var(--rr-border);
  border-radius: 26px;
  background: var(--rr-case-card);
}

.rr-minori-attribution > h2 {
  margin: 0 0 22px !important;
  font-size: clamp(26px, 3vw, 36px) !important;
}

.rr-minori-attribution .rr-case-attribution-grid {
  margin-top: 0;
}

@container (min-width: 790px) {
  .rr-minori-step:nth-child(odd) .rr-case-step-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  }

  .rr-minori-step:nth-child(even) .rr-case-step-layout {
    grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  }

  .rr-minori-step:nth-child(even) .rr-case-step-copy {
    grid-column: 2;
  }

  .rr-minori-step:nth-child(even) .rr-case-step-visual {
    grid-column: 1;
    grid-row: 1;
    border-top: 0;
    border-right: 1px solid rgba(0, 185, 128, 0.14);
  }

  .rr-minori-step:nth-child(odd) .rr-case-step-visual {
    border-top: 0;
    border-left: 1px solid rgba(0, 185, 128, 0.14);
  }
}

@media (max-width: 760px) {
  .rr-minori-case-brand {
    width: 100%;
    gap: 10px;
    margin-bottom: 26px !important;
  }

  .rr-minori-case-brand img:first-child {
    width: min(42vw, 176px);
  }

  .rr-minori-case-brand img:last-child {
    width: min(44vw, 184px);
  }

  .rr-minori-case-brand > span {
    font-size: 20px;
  }

  body[data-rr-case-kind="minori"] .rr-case-hero-stats {
    grid-template-columns: 1fr;
  }

  body[data-rr-case-kind="minori"] .rr-case-hero-stats > div {
    padding: 14px;
  }

  body[data-rr-case-kind="minori"] .rr-case-context-card {
    grid-template-columns: 1fr;
  }

  body[data-rr-case-kind="minori"] .rr-case-hero-stats dd,
  body[data-rr-case-kind="minori"] .rr-case-hero-stats > div:nth-child(2) dd {
    font-size: 22px;
  }

  .rr-minori-timeline {
    grid-template-columns: 1fr;
  }

  .rr-minori-results-lead,
  .rr-minori-results-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rr-minori-results-lead > :last-child {
    grid-column: 1 / -1;
    min-height: 104px;
  }

  .rr-minori-result-metric {
    min-height: 102px;
    padding: 17px;
  }

  .rr-minori-result-metric.is-primary {
    min-height: 118px;
  }

  .rr-minori-channel-grid,
  .rr-minori-promo-grid,
  .rr-minori-contest-grid {
    grid-template-columns: 1fr;
  }

  .rr-minori-activity > div {
    grid-template-columns: 1fr 1fr 14px 1fr;
    gap: 6px;
  }

  .rr-minori-activity > div > strong {
    grid-column: 1 / -1;
  }

  .rr-minori-revenue-plot {
    height: 260px;
    gap: 9px;
  }

  .rr-minori-revenue-plot strong {
    font-size: 11px;
    white-space: normal;
  }

  .rr-minori-revenue-plot small {
    font-size: 9px;
  }
}

/* "Che, Sushi?" migration case. All diagrams are native HTML/CSS so the
   figures stay readable, searchable and responsive without the old agency
   presentation slides. */
body[data-rr-case-kind="che-sushi"] .article-body article {
  --rr-che-red: #ff3b2f;
  --rr-che-blue: #0878bc;
  --rr-che-cream: #fff7e6;
}

body[data-rr-case-kind="che-sushi"] .rr-che-sushi-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 83, 58, 0.28), transparent 30%),
    radial-gradient(circle at 12% 96%, rgba(8, 120, 188, 0.22), transparent 34%),
    linear-gradient(137deg, #171b19 0%, #202b26 56%, #34231f 100%);
}

.rr-che-sushi-case-brand {
  max-width: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
}

.rr-che-sushi-case-brand > img:first-child {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.2));
}

.rr-che-sushi-case-brand > strong {
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.rr-che-sushi-case-brand > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 26px;
  line-height: 1;
}

.rr-che-sushi-case-brand > img:last-child {
  width: min(210px, 31vw);
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}

.rr-che-sushi-hero-stats > div:first-child {
  border-color: rgba(255, 83, 58, 0.3);
  background: rgba(255, 83, 58, 0.08);
}

.rr-che-sushi-intro,
.rr-che-sushi-task,
.rr-che-sushi-steps,
.rr-che-sushi-orders,
.rr-che-sushi-metrics,
.rr-che-sushi-results,
.rr-che-sushi-attribution,
.rr-che-sushi-tools {
  margin-top: var(--rr-case-section-gap);
  margin-bottom: 0;
}

.rr-che-sushi-route {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-che-sushi-route > li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 12px;
  align-items: center;
  margin: 0 !important;
  padding: 17px !important;
  border: 1px solid rgba(82, 224, 179, 0.18);
  border-radius: 17px;
  background: var(--rr-case-card-strong);
}

.rr-che-sushi-route > li::before {
  display: none !important;
  content: none !important;
}

.rr-che-sushi-route span {
  grid-row: 1 / span 2;
  width: 33px;
  height: 33px;
  display: grid;
  border-radius: 11px;
  color: var(--color-link);
  background: color-mix(in srgb, var(--rr-green) 12%, transparent);
  font-size: 11px;
  font-weight: 600;
  place-items: center;
}

.rr-che-sushi-route strong,
.rr-che-sushi-route b,
.rr-che-sushi-route small {
  min-width: 0;
  display: block;
}

.rr-che-sushi-route strong {
  color: var(--color-article-heading-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.rr-che-sushi-route b {
  color: var(--color-link);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.rr-che-sushi-route small {
  grid-column: 1 / -1;
  color: var(--rr-case-muted);
  font-size: 11px;
  line-height: 1.4;
}

.rr-che-sushi-step-list {
  gap: 18px;
}

.rr-che-sushi-step-visual {
  min-height: 340px;
  overflow: hidden;
}

.rr-che-sushi-step-visual > i {
  color: var(--color-link);
  font-size: 30px;
  font-style: normal;
  text-align: center;
}

.rr-che-sushi-step--1 .rr-che-sushi-step-visual {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.rr-che-sushi-step--1 .rr-che-sushi-step-visual > p {
  grid-column: 1 / -1;
  padding: 13px 16px;
  border-left: 2px solid var(--rr-green);
  border-radius: 0 12px 12px 0;
  color: var(--rr-case-muted);
  background: color-mix(in srgb, var(--rr-green) 7%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

.rr-che-sushi-domain {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 22px 16px;
  border: 1px solid var(--rr-border);
  border-radius: 19px;
  background: var(--rr-case-card-strong);
}

.rr-che-sushi-domain span,
.rr-che-sushi-vk-card span,
.rr-che-sushi-update-card > span,
.rr-che-sushi-payment > span,
.rr-che-sushi-orders-signal > span {
  color: var(--rr-case-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-transform: uppercase;
}

.rr-che-sushi-domain strong {
  color: var(--color-article-heading-text);
  font-size: clamp(17px, 3.4cqw, 23px);
  font-weight: 500;
  line-height: 1.15;
}

.rr-che-sushi-domain.is-after {
  border-color: rgba(82, 224, 179, 0.4);
  background: color-mix(in srgb, var(--rr-green) 11%, transparent);
}

.rr-che-sushi-domain.is-after strong {
  color: var(--color-link);
}

.rr-che-sushi-step--2 .rr-che-sushi-step-visual {
  gap: 18px;
}

.rr-che-sushi-vk-card {
  display: grid;
  gap: 10px;
  padding: 26px;
  border: 1px solid rgba(82, 224, 179, 0.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(8, 120, 188, 0.24), transparent 36%),
    color-mix(in srgb, var(--rr-green) 8%, var(--rr-case-card));
}

.rr-che-sushi-vk-card strong {
  color: var(--color-link);
  font-size: clamp(38px, 9cqw, 58px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.rr-che-sushi-vk-card small {
  color: var(--rr-case-muted);
  font-size: 12px;
  line-height: 1.4;
}

.rr-che-sushi-vk-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.rr-che-sushi-vk-flow b {
  min-width: 0;
  padding: 15px 12px;
  border: 1px solid var(--rr-border);
  border-radius: 15px;
  color: var(--color-article-heading-text);
  background: var(--rr-case-card-strong);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.rr-che-sushi-vk-flow b:last-child {
  border-color: rgba(82, 224, 179, 0.36);
  color: var(--color-link);
}

.rr-che-sushi-vk-flow i {
  color: var(--color-link);
  font-size: 22px;
  font-style: normal;
}

.rr-che-sushi-step--3 .rr-che-sushi-step-visual {
  gap: 14px;
}

.rr-che-sushi-update-card {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(82, 224, 179, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 83, 58, 0.2), transparent 36%),
    color-mix(in srgb, var(--rr-green) 9%, var(--rr-case-card));
}

.rr-che-sushi-update-card > strong {
  color: var(--color-link);
  font-size: clamp(42px, 9cqw, 62px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
}

.rr-che-sushi-update-card > small {
  color: var(--rr-case-muted);
  font-size: 12px;
  line-height: 1.4;
}

.rr-che-sushi-update-card > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.rr-che-sushi-update-card > div > b {
  padding: 11px 12px;
  border-radius: 13px;
  color: var(--color-article-heading-text);
  background: color-mix(in srgb, var(--rr-green) 9%, transparent);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

.rr-che-sushi-benefits {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-che-sushi-benefits > li {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 76px;
  margin: 0 !important;
  padding: 17px 16px 17px 50px !important;
  border: 1px solid var(--rr-border);
  border-radius: 16px;
  color: var(--rr-case-muted);
  background: var(--rr-case-card-strong);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rr-che-sushi-benefits > li::before {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  display: grid !important;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: #00b980 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--rr-green) 24%, transparent);
  content: "✓" !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1 !important;
}

.rr-che-sushi-orders,
.rr-che-sushi-metrics,
.rr-che-sushi-attribution {
  padding: clamp(24px, 3.8vw, 40px);
  border: 1px solid rgba(0, 185, 128, 0.2);
  border-radius: 27px;
  background: linear-gradient(135deg, rgba(0, 185, 128, 0.075), var(--rr-case-card));
}

.rr-che-sushi-orders > h2,
.rr-che-sushi-metrics > h2,
.rr-che-sushi-attribution > h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: clamp(27px, 3.2vw, 39px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em;
  line-height: 1.12 !important;
}

.rr-che-sushi-orders > p,
.rr-che-sushi-metrics > p {
  max-width: 780px;
  color: var(--rr-case-muted);
  font-size: 15px;
  line-height: 1.62;
}

.rr-che-sushi-orders-signal {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.65fr);
  gap: 22px;
  align-items: center;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--rr-border);
  border-radius: 18px;
  background: var(--rr-case-card-strong);
}

.rr-che-sushi-orders-summary {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.rr-che-sushi-orders-summary > span {
  color: var(--rr-case-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-transform: uppercase;
}

.rr-che-sushi-orders-summary > strong {
  color: var(--color-link);
  font-size: clamp(19px, 2.25vw, 25px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.rr-che-sushi-orders-signal > p {
  margin: 0 !important;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--rr-border);
  color: var(--rr-case-muted);
  font-size: 13px;
  line-height: 1.5;
}

.rr-che-sushi-orders-signal > p small {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--rr-case-muted) 76%, transparent);
  font-size: 10px;
  line-height: 1.4;
}

.rr-che-sushi-orders > p.rr-che-sushi-orders-note {
  max-width: none;
  margin: 20px 0 0 !important;
  padding: 0 0 0 16px;
  border-left: 2px solid color-mix(in srgb, var(--rr-green) 42%, transparent);
  color: var(--rr-case-muted);
  font-size: 13px;
  line-height: 1.58;
}

.rr-che-sushi-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.rr-che-sushi-metric-grid + p {
  margin: 30px 0 0 !important;
}

.rr-che-sushi-metric-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--rr-border);
  border-radius: 19px;
  background: var(--rr-case-card-strong);
}

.rr-che-sushi-metric-card > span,
.rr-che-sushi-metric-card > strong {
  display: block;
}

.rr-che-sushi-metric-card > span {
  min-height: 36px;
  color: var(--rr-case-muted);
  font-size: 12px;
  line-height: 1.4;
}

.rr-che-sushi-metric-card > strong {
  margin: 11px 0 18px;
  color: var(--color-link);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.rr-che-sushi-bar-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}

.rr-che-sushi-bar-row small,
.rr-che-sushi-bar-row b {
  font-size: 10px;
  line-height: 1.2;
}

.rr-che-sushi-bar-row small {
  color: var(--rr-case-muted);
}

.rr-che-sushi-bar-row b {
  color: var(--color-article-text);
  font-weight: 500;
  white-space: nowrap;
}

.rr-che-sushi-bar-row i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-article-text) 8%, transparent);
}

.rr-che-sushi-bar-row i::after {
  width: var(--value);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-article-text) 26%, transparent);
  content: "";
}

.rr-che-sushi-bar-row.is-after i::after {
  background: var(--rr-green);
}

.rr-che-sushi-payment {
  display: grid;
  grid-template-columns: minmax(120px, auto) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding: 16px 18px;
  border-left: 3px solid var(--rr-green);
  border-radius: 0 15px 15px 0;
  background: color-mix(in srgb, var(--rr-green) 7%, transparent);
}

.rr-che-sushi-payment strong {
  color: var(--color-link);
  font-size: 23px;
  font-weight: 500;
  white-space: nowrap;
}

.rr-che-sushi-payment small {
  color: var(--rr-case-muted);
  font-size: 12px;
  line-height: 1.4;
}

.rr-che-sushi-results {
  padding: clamp(24px, 3.8vw, 40px);
}

.rr-che-sushi-result-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-che-sushi-result-grid > li {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  min-height: 104px;
  padding: 18px 19px !important;
  border: 1px solid var(--rr-border) !important;
  border-radius: 18px !important;
  background: var(--rr-case-card-strong) !important;
}

.rr-che-sushi-result-grid > li::before {
  display: none !important;
  content: none !important;
}

.rr-che-sushi-result-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00b980;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 10px color-mix(in srgb, #00b980 24%, transparent);
}

.rr-che-sushi-result-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.rr-che-sushi-result-copy > strong {
  color: var(--color-article-text) !important;
  font-size: 16px !important;
  font-weight: 550 !important;
  line-height: 1.25 !important;
}

.rr-che-sushi-result-copy > small {
  color: var(--rr-case-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.rr-che-sushi-result-grid > li.is-impact .rr-che-sushi-result-copy > strong {
  color: var(--color-link) !important;
}

.rr-che-sushi-attribution .rr-case-attribution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.rr-che-sushi-attribution .rr-case-attribution-card {
  min-height: 0;
}

.rr-che-sushi-attribution .rr-case-attribution-outcome {
  margin-top: 12px;
}

@container (min-width: 790px) {
  .rr-che-sushi-step:nth-child(odd) .rr-case-step-layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(350px, 0.94fr);
  }

  .rr-che-sushi-step:nth-child(even) .rr-case-step-layout {
    grid-template-columns: minmax(350px, 0.94fr) minmax(0, 1.06fr);
  }

  .rr-che-sushi-step:nth-child(even) .rr-case-step-copy {
    grid-column: 2;
  }

  .rr-che-sushi-step:nth-child(even) .rr-case-step-visual {
    grid-column: 1;
    grid-row: 1;
    border-top: 0;
    border-right: 1px solid rgba(0, 185, 128, 0.14);
  }

  .rr-che-sushi-step:nth-child(odd) .rr-case-step-visual {
    border-top: 0;
    border-left: 1px solid rgba(0, 185, 128, 0.14);
  }
}

@media (max-width: 760px) {
  .rr-che-sushi-case-brand {
    display: grid;
    grid-template-columns: 42px minmax(0, auto) 18px minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 26px !important;
  }

  .rr-che-sushi-case-brand > img:first-child {
    width: 42px;
    height: 42px;
  }

  .rr-che-sushi-case-brand > strong {
    font-size: clamp(17px, 5.5vw, 24px);
  }

  .rr-che-sushi-case-brand > span {
    font-size: 18px;
  }

  .rr-che-sushi-case-brand > img:last-child {
    width: 100%;
    max-width: 138px;
    max-height: 30px;
  }

  .rr-che-sushi-hero-stats,
  .rr-che-sushi-route,
  .rr-che-sushi-metric-grid,
  .rr-che-sushi-result-grid,
  .rr-che-sushi-attribution .rr-case-attribution-grid {
    grid-template-columns: 1fr !important;
  }

  .rr-che-sushi-route > li {
    grid-template-columns: 33px minmax(0, 1fr) auto;
  }

  .rr-che-sushi-route span {
    grid-row: 1 / span 2;
  }

  .rr-che-sushi-route b {
    grid-column: 3;
    grid-row: 1;
    font-size: 15px;
  }

  .rr-che-sushi-route small {
    grid-column: 2 / -1;
  }

  .rr-che-sushi-step-visual {
    min-height: 0;
  }

  .rr-che-sushi-step--1 .rr-che-sushi-step-visual {
    grid-template-columns: 1fr;
  }

  .rr-che-sushi-step--1 .rr-che-sushi-step-visual > i {
    transform: rotate(90deg);
  }

  .rr-che-sushi-vk-flow,
  .rr-che-sushi-update-card > div,
  .rr-che-sushi-benefits {
    grid-template-columns: 1fr !important;
  }

  .rr-che-sushi-vk-flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .rr-che-sushi-orders,
  .rr-che-sushi-metrics,
  .rr-che-sushi-attribution {
    padding: 21px 17px;
    border-radius: 22px;
  }

  .rr-che-sushi-orders-signal,
  .rr-che-sushi-payment {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .rr-che-sushi-orders-signal > p {
    padding: 13px 0 0;
    border-top: 1px solid var(--rr-border);
    border-left: 0;
  }

  .rr-che-sushi-metric-card > span {
    min-height: 0;
  }

  .rr-che-sushi-result-grid > li {
    min-height: 0;
  }

  .rr-che-sushi-metric-grid + p {
    margin-top: 24px !important;
  }

  .rr-che-sushi-payment {
    padding: 15px;
  }

  .rr-che-sushi-attribution .rr-case-attribution-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

@media (max-width: 359px) {
  .rr-che-sushi-case-brand {
    grid-template-columns: 38px minmax(0, 1fr) 14px;
  }

  .rr-che-sushi-case-brand > img:first-child {
    width: 38px;
    height: 38px;
  }

  .rr-che-sushi-case-brand > img:last-child {
    grid-column: 1 / -1;
    max-width: 150px;
    margin-top: 7px;
  }
}

/* Cases showcase */
body[data-rr-cases-home="true"] .article-body article {
  container-type: inline-size;
}

.rr-cases-showcase {
  display: grid;
  gap: 24px;
  margin: 28px 0 56px;
}

.rr-cases-showcase-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  min-height: 310px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(0, 185, 128, 0.2);
  border-radius: 30px;
  background: var(--rr-surface, #171b19);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.12);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.rr-cases-showcase-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 30px;
  color: #effff9;
  background:
    radial-gradient(circle at 88% 10%, rgba(119, 232, 192, 0.18), transparent 32%),
    radial-gradient(circle at 8% 96%, rgba(73, 179, 140, 0.1), transparent 38%),
    linear-gradient(145deg, #101815 0%, #16261f 52%, #1b352b 100%);
}

.rr-cases-showcase-visual > span {
  width: fit-content;
  padding: 8px 13px;
  border: 1px solid rgba(119, 232, 192, 0.32);
  border-radius: 999px;
  color: #8ce6c5;
  font-size: 14px;
  line-height: 1.2;
}

.rr-cases-showcase-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: auto 0;
}

.rr-cases-showcase-flow > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(119, 232, 192, 0.17);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.rr-cases-showcase-flow > div:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -17px;
  display: grid;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(119, 232, 192, 0.3);
  border-radius: 50%;
  color: #78dfbb;
  background: #173027;
  content: "→";
  font-size: 13px;
  line-height: 1;
  place-items: center;
  transform: translateY(-50%);
}

.rr-cases-showcase-flow small,
.rr-cases-showcase-flow strong {
  display: block;
}

.rr-cases-showcase-flow small {
  color: rgba(140, 230, 197, 0.72);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.rr-cases-showcase-flow strong {
  margin-top: 10px;
  color: rgba(239, 255, 249, 0.9);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  /* В названиях этапов допустим перенос только между словами, не внутри них. */
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

.rr-cases-showcase-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rr-cases-showcase-metrics > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(119, 232, 192, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.rr-cases-showcase-metrics strong,
.rr-cases-showcase-metrics small {
  display: block;
}

.rr-cases-showcase-metrics strong {
  color: #78dfbb;
  font-size: clamp(20px, 2.1cqi, 32px);
  line-height: 1.15;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.rr-cases-showcase-metrics small {
  margin-top: 8px;
  color: rgba(238, 247, 243, 0.7);
  font-size: 13px;
  line-height: 1.35;
}

.rr-cases-showcase-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 34px;
}

.rr-cases-showcase-copy h3 {
  margin: 0;
  color: #effff9;
  font-size: clamp(28px, 2.1cqi, 36px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.rr-cases-showcase-copy h3 a {
  color: inherit;
  text-decoration: none;
}

.rr-cases-showcase-copy p {
  margin: 16px 0 0;
  color: var(--rr-muted, #aeb6b2);
  font-size: 16px;
  line-height: 1.55;
}

.rr-cases-showcase-action {
  display: inline-flex;
  width: fit-content;
  margin-top: 20px;
  color: var(--rr-green, #66d5ad);
  font-weight: 650;
}

.rr-cases-showcase-card:hover {
  color: inherit;
  text-decoration: none !important;
  border-color: rgba(102, 213, 173, 0.48);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(102, 213, 173, 0.08);
  transform: translateY(-2px);
}

.rr-cases-showcase-card:hover *,
.rr-cases-showcase-card:focus-visible * {
  text-decoration: none !important;
}

.rr-cases-showcase-card:hover .rr-cases-showcase-visual {
  filter: brightness(1.045);
}

.rr-cases-showcase-card:focus-visible {
  outline: 3px solid rgba(102, 213, 173, 0.72);
  outline-offset: 4px;
}

/* Desktop with both side panels still needs a dense, legible two-column card. */
@container (max-width: 720px) {
  .rr-cases-showcase-card {
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  }

  .rr-cases-showcase-visual,
  .rr-cases-showcase-copy {
    padding: 24px;
  }

  .rr-cases-showcase-flow {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 14px 0;
  }

  .rr-cases-showcase-flow > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .rr-cases-showcase-flow > div:not(:last-child)::after {
    display: none;
  }

  .rr-cases-showcase-flow strong {
    margin-top: 0;
    font-size: 11px;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  .rr-cases-showcase-metrics {
    gap: 10px;
  }

  .rr-cases-showcase-metrics > div {
    padding: 12px;
  }

  .rr-cases-showcase-metrics strong {
    font-size: 17px;
  }

  .rr-cases-showcase-metrics small {
    margin-top: 6px;
    font-size: 12px;
  }

  .rr-cases-showcase-copy h3 {
    font-size: 24px;
    line-height: 1.12;
  }

  .rr-cases-showcase-copy p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
  }

  .rr-cases-showcase-action {
    margin-top: 14px;
  }
}

body[data-rr-cases-home="true"] .rr-cases-overview {
  padding-bottom: 28px;
}

body[data-rr-cases-home="true"] .rr-cases-inline-help {
  margin: 26px 0 0;
  padding: 25px 0 0 58px;
  border: 0;
  border-top: 1px solid rgba(102, 213, 173, 0.18);
  border-radius: 0;
  background: transparent;
}

body[data-rr-cases-home="true"] .rr-cases-inline-help .rr-docs-home-help-icon {
  top: 25px;
  left: 0;
}

body[data-rr-cases-home="true"] .rr-cases-inline-help > h2 {
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
}

body[data-rr-cases-home="true"] .rr-cases-inline-help > p {
  max-width: 1120px;
  margin-top: 8px;
}

.rr-cases-submit-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "copy action";
  align-items: center;
  gap: 12px 28px;
  overflow: hidden;
  margin: 56px 0 12px;
  padding: 24px 30px;
  border: 1px solid rgba(102, 213, 173, 0.3);
  border-radius: 28px;
  background:
    radial-gradient(circle at 91% 16%, rgba(119, 232, 192, 0.18), transparent 31%),
    linear-gradient(135deg, rgba(38, 84, 66, 0.52), rgba(20, 31, 26, 0.94) 62%);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.14);
}

.rr-cases-submit-cta::before,
.rr-cases-submit-cta::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(119, 232, 192, 0.18);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rr-cases-submit-cta::before {
  top: -96px;
  right: -62px;
  width: 220px;
  height: 220px;
}

.rr-cases-submit-cta::after {
  right: 102px;
  bottom: -86px;
  width: 138px;
  height: 138px;
}

.rr-cases-submit-cta > h2 {
  grid-area: title;
  margin: 0 !important;
  color: #effff9 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em;
}

.rr-cases-submit-cta > p {
  grid-area: copy;
  max-width: 680px;
  margin: 0 !important;
  color: rgba(238, 247, 243, 0.72) !important;
  font-size: 14px;
  line-height: 1.5;
}

.rr-cases-submit-button {
  grid-area: action;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 10px 18px;
  border: 1px solid rgba(119, 232, 192, 0.6);
  border-radius: 15px;
  color: #10241c !important;
  background: #78dfbb;
  box-shadow: 0 12px 30px rgba(37, 139, 103, 0.2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (max-width: 1200px) {
  .rr-cases-submit-cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "copy"
      "action";
    gap: 14px;
  }

  .rr-cases-submit-button {
    justify-self: start;
    margin-top: 2px;
  }
}

.rr-cases-submit-button:hover {
  color: #0b1d16 !important;
  background: #93e9ca;
  box-shadow: 0 16px 34px rgba(37, 139, 103, 0.28);
  text-decoration: none !important;
  transform: translateY(-2px);
}

.rr-cases-submit-button:focus-visible {
  outline: 3px solid rgba(147, 233, 202, 0.72);
  outline-offset: 4px;
}

.rr-case-sidebar-link {
  display: block;
  overflow: hidden;
  padding: 7px 14px 7px 48px;
  color: var(--color-nav-item, inherit);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-case-sidebar-link:hover {
  color: var(--rr-green, #66d5ad);
  background: rgba(102, 213, 173, 0.08);
}

.rr-case-toc-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.rr-case-toc-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rr-case-toc-item[data-level="1"] {
  padding-left: 14px !important;
}

.rr-case-toc-item a {
  display: block;
  overflow: hidden;
  height: 28px;
  color: var(--color-primary-general, inherit);
  font-size: 12px;
  line-height: 28px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-case-toc-item a:hover {
  color: var(--rr-green, #66d5ad);
}

@container (max-width: 480px) {
  .rr-cases-showcase-card {
    grid-template-columns: 1fr;
  }

  .rr-cases-showcase-visual {
    gap: 24px;
  }
}

@media (max-width: 620px) {
  .rr-cases-showcase {
    gap: 18px;
    margin: 22px 0 40px;
  }

  .rr-cases-showcase-card {
    min-height: 0;
    border-radius: 22px;
  }

  .rr-cases-showcase-visual,
  .rr-cases-showcase-copy {
    padding: 24px;
  }

  .rr-cases-showcase-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .rr-cases-showcase-metrics > div {
    padding: 11px;
  }

  .rr-cases-showcase-flow {
    gap: 9px;
  }

  .rr-cases-showcase-flow > div {
    min-height: 76px;
    padding: 11px;
  }

  .rr-cases-showcase-flow > div:not(:last-child)::after {
    right: -14px;
    width: 19px;
    height: 19px;
    font-size: 11px;
  }

  .rr-cases-showcase-flow strong {
    font-size: 11px;
  }

  .rr-cases-showcase-metrics strong {
    font-size: 21px;
  }

  .rr-cases-showcase-copy h3 {
    font-size: 28px;
  }

  .rr-cases-showcase-copy p {
    font-size: 16px;
  }

  .rr-cases-submit-cta {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 42px;
    padding: 28px 24px;
    border-radius: 22px;
  }

  .rr-cases-submit-cta > h2,
  .rr-cases-submit-cta > p,
  .rr-cases-submit-button {
    grid-column: 1;
  }

  .rr-cases-submit-button {
    grid-row: auto;
    width: 100%;
    margin-top: 8px;
  }

  body[data-rr-cases-home="true"] .rr-cases-inline-help {
    margin-top: 22px;
    padding: 68px 0 0;
  }

  body[data-rr-cases-home="true"] .rr-cases-inline-help .rr-docs-home-help-icon {
    top: 20px;
    left: 0;
  }
}

/* Final responsive corrections for public case pages. */
.rr-mobile-sidebar-close {
  display: none;
}

.rr-case-toc-item a {
  height: auto;
  min-height: 28px;
  overflow: visible;
  padding: 4px 0;
  line-height: 1.38;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 899px) {
  body[data-rr-mobile-tree-visible="true"] .rr-mobile-sidebar-close {
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid var(--rr-border);
    border-radius: 12px;
    color: var(--color-article-text);
    background: color-mix(in srgb, var(--color-article-bg) 92%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    font: 500 13px/1 "Onest", sans-serif;
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-sidebar-close > span:first-child {
    font-size: 22px;
    font-weight: 300;
    line-height: 14px;
  }
}

@media (max-width: 760px) {
  body[data-rr-case-page="true"] .rr-case-hero .article-title {
    font-size: clamp(30px, 8.4vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em;
  }

  body[data-rr-case-page="true"] .article-body article > h2 {
    margin-top: 42px !important;
    font-size: 28px !important;
    line-height: 1.16 !important;
  }

  body[data-rr-case-page="true"] .article-body article > h3 {
    min-height: 0;
    margin-top: 34px !important;
    padding-left: 50px;
    font-size: 22px !important;
    line-height: 1.22 !important;
  }

  body[data-rr-case-page="true"] .rr-case-cta > h2 {
    font-size: 26px !important;
    line-height: 1.16 !important;
  }

  .rr-minori-case-brand {
    min-width: 0;
    gap: 8px;
  }

  .rr-minori-case-brand img:first-child {
    width: min(36vw, 148px);
  }

  .rr-minori-case-brand img:last-child {
    width: min(38vw, 156px);
  }

  .rr-minori-case-brand > span {
    font-size: 17px;
  }
}

/* Light theme for customer cases. Case pages keep their expressive composition,
   but use light brand surfaces rather than a dark card dropped onto a white page. */
html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero {
  color: #181a19;
  border-color: #b9e4d3;
  background:
    radial-gradient(circle at 94% 7%, rgba(0, 185, 128, 0.16), transparent 32%),
    radial-gradient(circle at 5% 100%, rgba(0, 185, 128, 0.09), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f2fbf7 57%, #e4f7ee 100%);
  box-shadow: 0 20px 46px rgba(22, 89, 62, 0.12);
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero::after,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero::after,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero::after {
  border-color: rgba(0, 122, 86, 0.24);
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero .article-title,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero .article-title,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero .article-title {
  color: #181a19 !important;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero > p:not(.rr-case-brand),
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero > p:not(.rr-case-brand),
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero > p:not(.rr-case-brand) {
  color: #4d5d56;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero > p:not(.rr-case-brand):last-child,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero > p:not(.rr-case-brand):last-child,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero > p:not(.rr-case-brand):last-child {
  color: #183229;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero-stats > div,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero-stats > div,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero-stats > div {
  border-color: #b9e4d3;
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero-stats dd,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero-stats dd,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero-stats dd {
  color: #007a56;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-hero-stats dt,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-hero-stats dt,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-hero-stats dt {
  color: #53645c;
}

/* Supplied partner logos contain a white Result.Rest wordmark. Keep it readable
   inside a compact, deliberate label instead of leaving a full dark hero. */
html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-brand,
html[data-theme="light"] body[data-rr-case-page="true"] .rr-minori-case-brand,
html[data-theme="light"] body[data-rr-case-page="true"] .rr-che-sushi-case-brand,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-brand,
body[data-theme="light"][data-rr-case-page="true"] .rr-minori-case-brand,
body[data-theme="light"][data-rr-case-page="true"] .rr-che-sushi-case-brand,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-brand,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-minori-case-brand,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-che-sushi-case-brand {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid rgba(0, 122, 86, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, #16211d, #203b30);
  box-shadow: 0 8px 18px rgba(20, 64, 47, 0.14);
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-cta,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-cta,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-cta {
  color: #181a19;
  border: 1px solid #b9e4d3;
  background:
    radial-gradient(circle at 90% 8%, rgba(0, 185, 128, 0.14), transparent 30%),
    linear-gradient(135deg, #f9fffc, #e8f8f0);
  box-shadow: 0 18px 42px rgba(22, 89, 62, 0.1);
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-cta > h2,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-cta > h2,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-cta > h2 {
  color: #181a19 !important;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-cta p,
html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-cta li,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-cta p,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-cta li,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-cta p,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-cta li {
  color: #4d5d56;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-cta .rr-case-cta-button--secondary,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-cta .rr-case-cta-button--secondary,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-cta .rr-case-cta-button--secondary {
  border-color: #67b99c;
  color: #17513d !important;
  background: rgba(255, 255, 255, 0.74);
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-cta .rr-case-cta-note,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-cta .rr-case-cta-note,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-cta .rr-case-cta-note {
  border-top-color: rgba(0, 122, 86, 0.2);
  color: #65756d !important;
}

/* The cases index follows the same light composition: a soft mint visual side
   and an airy reading side, rather than two dark panels on a white page. */
html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-card,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-card,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-card {
  border-color: #b9e4d3;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(22, 89, 62, 0.1);
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-visual,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-visual,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-visual {
  color: #183229;
  background:
    radial-gradient(circle at 88% 10%, rgba(0, 185, 128, 0.16), transparent 34%),
    linear-gradient(145deg, #effbf6 0%, #e3f7ed 100%);
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-visual > span,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-visual > span,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-visual > span {
  border-color: #83cdb2;
  color: #087a57;
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-flow > div,
html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-metrics > div,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-flow > div,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-metrics > div,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-flow > div,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-metrics > div {
  border-color: #b9e4d3;
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-flow > div:not(:last-child)::after,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-flow > div:not(:last-child)::after,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-flow > div:not(:last-child)::after {
  border-color: #83cdb2;
  color: #087a57;
  background: #ffffff;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-flow small,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-flow small,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-flow small {
  color: #43846d;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-flow strong,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-flow strong,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-flow strong {
  color: #183229;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-metrics strong,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-metrics strong,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-metrics strong {
  color: #007a56;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-metrics small,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-metrics small,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-metrics small {
  color: #53645c;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-copy,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-copy,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-copy {
  background: #ffffff;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-copy h3,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-copy h3,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-copy h3 {
  color: #181a19;
}

html[data-theme="light"] body[data-rr-cases-home="true"] .rr-cases-showcase-copy p,
body[data-theme="light"][data-rr-cases-home="true"] .rr-cases-showcase-copy p,
html:root:not([data-theme]) body[data-rr-cases-home="true"]:not([data-theme="dark"]) .rr-cases-showcase-copy p {
  color: #53645c;
}

/* Public readers do not need the Gramax editor action menu in the header. */
body:not([data-rr-editor="true"]) [data-testid="catalog-actions"],
body:not([data-rr-editor="true"]) [data-qa="qa-catalog-actions"],
body:not([data-rr-editor="true"]) .right-extensions:has([data-testid="catalog-actions"]) {
  display: none !important;
}

/* Mobile Academy navigation mirrors the public Result.Rest landing: one
   translucent capsule, a root link and a compact four-dot section switcher. */
@media (max-width: 899px) {
  body[data-rr-mobile-root-header="true"] {
    /* Gramax already leaves a top gutter before the article. Reserve only the
       remaining clearance for the fixed capsule instead of duplicating it. */
    padding-top: calc(34px + env(safe-area-inset-top)) !important;
  }

  body[data-rr-mobile-root-header="true"] .left-navigation-layout div:has(> .top-bar-content-wrapper) {
    display: none !important;
  }

  .rr-mobile-root-header {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    z-index: 9800;
    display: block;
    pointer-events: none;
  }

  .rr-mobile-root-header-bar {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 7px 8px 7px 9px;
    border: 1px solid color-mix(in srgb, var(--rr-border) 88%, transparent);
    border-radius: 22px;
    color: var(--color-article-text);
    background: color-mix(in srgb, var(--color-article-bg) 78%, transparent);
    box-shadow: 0 10px 28px rgba(18, 30, 25, 0.12);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    pointer-events: auto;
  }

  .rr-mobile-root-header-mark,
  .rr-mobile-root-header-switcher {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 14px;
    color: var(--color-article-text);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
  }

  .rr-mobile-root-header-mark img {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
  }

  .rr-mobile-root-header-title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-article-text);
    font: 500 18px/1.2 "Onest", sans-serif;
    letter-spacing: -0.02em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rr-mobile-root-header-dots {
    width: 23px;
    height: 23px;
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-template-rows: repeat(2, 8px);
    gap: 5px;
    place-content: center;
  }

  .rr-mobile-root-header-dots i {
    width: 8px;
    height: 8px;
    display: block;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-root-header-switcher {
    position: relative;
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-root-header-dots {
    display: none;
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-root-header-switcher::before,
  body[data-rr-mobile-tree-visible="true"] .rr-mobile-root-header-switcher::after {
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-root-header-switcher::before {
    transform: rotate(45deg);
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-root-header-switcher::after {
    transform: rotate(-45deg);
  }

  .rr-mobile-root-header-mark:hover,
  .rr-mobile-root-header-mark:focus-visible,
  .rr-mobile-root-header-switcher:hover,
  .rr-mobile-root-header-switcher:focus-visible {
    outline: none;
    color: var(--rr-green);
    background: color-mix(in srgb, var(--rr-green) 12%, transparent);
  }

  /* The four-dot control opens Gramax's own navigation tree. It contains the
     real nested categories and articles, so visitors do not get a second,
     shortened version of the menu. */
  body[data-rr-mobile-tree-visible="true"] .catalog-layout > .left-navigation-layout {
    position: fixed !important;
    z-index: 9600 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    display: block !important;
    overflow: hidden !important;
    background: var(--color-article-bg) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  body[data-rr-mobile-tree-visible="true"] {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body[data-rr-mobile-tree-visible="true"] .left-navigation-layout .left-sidebar-content {
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 100dvh;
    height: 100dvh !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: var(--color-article-bg) !important;
  }

  body[data-rr-mobile-tree-visible="true"] .left-navigation-layout .header-navigation {
    display: none !important;
  }

  body[data-rr-mobile-tree-visible="true"] .left-navigation-layout .tree-root {
    padding-top: 78px !important;
  }

  body[data-rr-mobile-tree-visible="true"] .rr-mobile-sidebar-close {
    display: none !important;
  }

  body[data-rr-mobile-root-header="true"]:not([data-rr-mobile-tree-visible="true"])
    .catalog-layout > .left-navigation-layout {
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  .rr-mobile-root-switcher:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: grid;
    align-items: end;
  }

  .rr-mobile-root-switcher-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: color-mix(in srgb, var(--color-article-bg) 48%, transparent);
    backdrop-filter: blur(13px) saturate(105%);
    -webkit-backdrop-filter: blur(13px) saturate(105%);
    cursor: pointer;
  }

  .rr-mobile-root-switcher-sheet {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 17px;
    box-sizing: border-box;
    padding: 22px 18px max(22px, env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--rr-border) 90%, transparent);
    border-radius: 28px 28px 0 0;
    color: var(--color-article-text);
    background: color-mix(in srgb, var(--color-article-bg) 86%, transparent);
    box-shadow: 0 -18px 54px rgba(18, 30, 25, 0.22);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }

  .rr-mobile-root-switcher-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .rr-mobile-root-switcher-heading p {
    margin: 0 0 4px;
    color: var(--rr-muted-text);
    font: 400 13px/1.3 "Onest", sans-serif;
  }

  .rr-mobile-root-switcher-heading h2 {
    margin: 0;
    color: var(--color-article-text);
    font: 500 26px/1.1 "Onest", sans-serif;
    letter-spacing: -0.03em;
  }

  .rr-mobile-root-switcher-heading button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--rr-border);
    border-radius: 50%;
    color: var(--color-article-text);
    background: color-mix(in srgb, var(--color-background-muted) 82%, transparent);
    font: 300 31px/1 "Onest", sans-serif;
    cursor: pointer;
  }

  .rr-mobile-root-switcher nav {
    display: grid;
    gap: 9px;
  }

  .rr-mobile-root-switcher nav a {
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 3px;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid var(--rr-border);
    border-radius: 17px;
    color: var(--color-article-text);
    background: color-mix(in srgb, var(--color-background-muted) 68%, transparent);
    text-decoration: none;
  }

  .rr-mobile-root-switcher nav a strong {
    font: 500 17px/1.2 "Onest", sans-serif;
  }

  .rr-mobile-root-switcher nav a span {
    color: var(--rr-muted-text);
    font: 400 13px/1.25 "Onest", sans-serif;
  }

  .rr-mobile-root-switcher nav a[data-rr-current="true"],
  .rr-mobile-root-switcher nav a:hover,
  .rr-mobile-root-switcher nav a:focus-visible {
    border-color: color-mix(in srgb, var(--rr-green) 58%, var(--rr-border));
    outline: none;
    background: color-mix(in srgb, var(--rr-green) 12%, var(--color-background-muted));
  }

  .rr-mobile-root-switcher nav a[data-rr-current="true"] strong {
    color: var(--rr-green);
  }

  .rr-mobile-root-switcher nav {
    gap: 10px;
    max-height: min(58dvh, 480px);
    overflow-y: auto;
    padding-right: 2px;
    overscroll-behavior: contain;
  }

  .rr-mobile-root-tree {
    overflow: hidden;
    border: 1px solid var(--rr-border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--color-background-muted) 68%, transparent);
  }

  .rr-mobile-root-tree[data-rr-current="true"] {
    border-color: color-mix(in srgb, var(--rr-green) 58%, var(--rr-border));
  }

  .rr-mobile-root-tree-heading {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
  }

  .rr-mobile-root-tree-heading > a {
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 12px 0 12px 15px;
    border: 0;
    border-radius: 0;
    color: var(--color-article-text);
    background: transparent;
    font: 500 17px/1.2 "Onest", sans-serif;
    text-decoration: none;
  }

  .rr-mobile-root-tree[data-rr-current="true"] .rr-mobile-root-tree-heading > a {
    color: var(--rr-green);
  }

  .rr-mobile-root-tree-heading > a:focus-visible,
  .rr-mobile-root-tree-heading > a:hover {
    outline: none;
    color: var(--rr-green);
  }

  .rr-mobile-root-tree-toggle {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--color-article-text);
    background: transparent;
    cursor: pointer;
  }

  .rr-mobile-root-tree-toggle::before {
    width: 9px;
    height: 9px;
    display: block;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 160ms ease;
  }

  .rr-mobile-root-tree[data-rr-expanded="true"] .rr-mobile-root-tree-toggle::before {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .rr-mobile-root-tree-toggle:hover,
  .rr-mobile-root-tree-toggle:focus-visible {
    outline: none;
    color: var(--rr-green);
    background: color-mix(in srgb, var(--rr-green) 10%, transparent);
  }

  .rr-mobile-root-tree-links {
    display: grid;
    gap: 1px;
    padding: 2px 7px 8px;
    border-top: 1px solid color-mix(in srgb, var(--rr-border) 72%, transparent);
  }

  .rr-mobile-root-tree-links[hidden] {
    display: none !important;
  }

  .rr-mobile-root-tree-link {
    min-height: 34px !important;
    display: block !important;
    box-sizing: border-box;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--rr-muted-text) !important;
    background: transparent !important;
    font: 400 13px/1.35 "Onest", sans-serif !important;
    text-decoration: none;
  }

  .rr-mobile-root-tree-link[data-rr-depth="1"] { padding-left: 19px !important; }
  .rr-mobile-root-tree-link[data-rr-depth="2"] { padding-left: 29px !important; }
  .rr-mobile-root-tree-link[data-rr-depth="3"] { padding-left: 39px !important; }

  .rr-mobile-root-tree-link:hover,
  .rr-mobile-root-tree-link:focus-visible {
    outline: none;
    color: var(--rr-green) !important;
    background: color-mix(in srgb, var(--rr-green) 10%, transparent) !important;
  }

  body.rr-mobile-root-switcher-open {
    overflow: hidden !important;
  }

  body[data-rr-mobile-tools="true"] {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .rr-mobile-tools {
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    min-height: 64px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--rr-border) 88%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--color-article-bg) 78%, transparent);
    box-shadow: 0 10px 28px rgba(18, 30, 25, 0.17);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }

  .rr-mobile-tools button,
  .rr-mobile-tools a {
    min-height: 50px;
    border-radius: 16px;
    color: var(--color-article-text);
  }

  .rr-mobile-tools button:hover,
  .rr-mobile-tools a:hover,
  .rr-mobile-tools button:active,
  .rr-mobile-tools a:active {
    color: var(--rr-green);
    background: color-mix(in srgb, var(--rr-green) 11%, transparent);
  }
}

/* Partner marks remain on the light hero itself. A fine outline preserves their
   safe area without turning the logo into a separate dark block. */
.rr-case-result-logo--light {
  display: none !important;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-brand,
html[data-theme="light"] body[data-rr-case-page="true"] .rr-minori-case-brand,
html[data-theme="light"] body[data-rr-case-page="true"] .rr-che-sushi-case-brand,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-brand,
body[data-theme="light"][data-rr-case-page="true"] .rr-minori-case-brand,
body[data-theme="light"][data-rr-case-page="true"] .rr-che-sushi-case-brand,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-brand,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-minori-case-brand,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-che-sushi-case-brand {
  padding: 8px 10px;
  border-color: #9bd6c0;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: none;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-result-logo--dark,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-result-logo--dark,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-result-logo--dark {
  display: none !important;
}

html[data-theme="light"] body[data-rr-case-page="true"] .rr-case-result-logo--light,
body[data-theme="light"][data-rr-case-page="true"] .rr-case-result-logo--light,
html:root:not([data-theme]) body[data-rr-case-page="true"]:not([data-theme="dark"]) .rr-case-result-logo--light {
  display: block !important;
}

html[data-theme="light"] body[data-rr-case-kind="che-sushi"] .rr-che-sushi-case-brand,
body[data-theme="light"][data-rr-case-kind="che-sushi"] .rr-che-sushi-case-brand,
html:root:not([data-theme]) body[data-rr-case-kind="che-sushi"]:not([data-theme="dark"]) .rr-che-sushi-case-brand {
  color: #181a19;
}

html[data-theme="light"] body[data-rr-case-kind="che-sushi"] .rr-che-sushi-case-brand > strong,
body[data-theme="light"][data-rr-case-kind="che-sushi"] .rr-che-sushi-case-brand > strong,
html:root:not([data-theme]) body[data-rr-case-kind="che-sushi"]:not([data-theme="dark"]) .rr-che-sushi-case-brand > strong {
  color: #181a19;
}

html[data-theme="light"] body[data-rr-case-kind="minori"] .rr-minori-case-brand > span,
html[data-theme="light"] body[data-rr-case-kind="che-sushi"] .rr-che-sushi-case-brand > span,
body[data-theme="light"][data-rr-case-kind="minori"] .rr-minori-case-brand > span,
body[data-theme="light"][data-rr-case-kind="che-sushi"] .rr-che-sushi-case-brand > span,
html:root:not([data-theme]) body[data-rr-case-kind="minori"]:not([data-theme="dark"]) .rr-minori-case-brand > span,
html:root:not([data-theme]) body[data-rr-case-kind="che-sushi"]:not([data-theme="dark"]) .rr-che-sushi-case-brand > span {
  color: #52645b;
}

html[data-theme="light"] body[data-rr-case-kind="oktopizza"] .rr-case-brand img,
body[data-theme="light"][data-rr-case-kind="oktopizza"] .rr-case-brand img,
html:root:not([data-theme]) body[data-rr-case-kind="oktopizza"]:not([data-theme="dark"]) .rr-case-brand img {
  filter: drop-shadow(0 0 1px rgba(24, 26, 25, 0.92)) drop-shadow(0 0 1px rgba(24, 26, 25, 0.92));
}

/* Academy has one dark visual system. Lock it before first paint and keep the
   built-in Gramax switcher out of the public interface on every device. */
html[data-rr-theme-locked="dark"],
html[data-rr-theme-locked="dark"] body {
  color-scheme: dark;
  background: #181a19 !important;
}

html,
body {
  color-scheme: dark;
}

[data-testid="switch-theme"] {
  display: none !important;
}