/* ==========================================================================
   Renderlix — landing styles
   Ported from the Figma Make source (dist/src/App.tsx + index.css).
   Inline styles from the React source are expressed here as classes.
   ========================================================================== */

:root {
  --rlx-bg: #ffffff;
  --rlx-surface: #f8f9fa;
  --rlx-surface-2: #fafafa;
  --rlx-border: #e5e7eb;
  --rlx-border-2: #d1d5db;
  --rlx-ink: #111827;
  --rlx-ink-2: #374151;
  --rlx-text: #4b5563;
  /* The source uses #9CA3AF for secondary copy; it only reaches 2.5:1 on white,
     so body-size muted text uses the next step down (4.8:1 on #fff and #f8f9fa). */
  --rlx-muted: #6b7280;
  --rlx-ghost: #9ca3af;        /* labels and decoration only */
  --rlx-blue: #4f6ef8;
  --rlx-blue-dark: #3b5bdb;
  --rlx-blue-light: #eef2ff;
  --rlx-blue-light-2: #e0e7ff;
  --rlx-blue-line: #c7d2fe;
  --rlx-green: #10b981;
  --rlx-green-dark: #059669;
  --rlx-green-light: #ecfdf5;
  --rlx-lime-ink: #4d7c0f;
  --rlx-lime-tint: #f0fce7;
  --rlx-amber: #b45309;        /* #D97706 in the source — darkened to clear 4.5:1 on its tint */
  --rlx-amber-light: #fef3c7;
  --rlx-violet: #7c3aed;
  --rlx-radius-sm: 6px;
  --rlx-radius: 8px;
  --rlx-radius-lg: 12px;
  --rlx-font-display: 'Inter', sans-serif;
  --rlx-font-body: 'Inter', sans-serif;
  --rlx-font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

/* The nav is fixed at 64px, so an anchored element would land underneath it.
   Reserve that height plus a little breathing room. */
:target,
[id^="section-"],
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--rlx-bg);
  color: var(--rlx-ink);
  font-family: var(--rlx-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rlx-blue); border-radius: 2px; }

/* ── Layout primitives ─────────────────────────────────────────────────── */

.rlx-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.rlx-section { background: var(--rlx-bg); border-bottom: 1px solid var(--rlx-border); }
.rlx-section--surface { background: var(--rlx-surface); }
.rlx-section--clip { overflow: hidden; }
.rlx-section__inner { padding-top: 96px; padding-bottom: 96px; }
.rlx-section__inner--tight { padding-top: 80px; padding-bottom: 80px; }
.rlx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.rlx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.rlx-grid-2--start { align-items: start; }
.rlx-grid-2--end { align-items: end; }
.rlx-grid-2--wide { gap: 80px; }
.rlx-grid-2--mid { gap: 64px; }

/* ── Typography ────────────────────────────────────────────────────────── */

.rlx-heading {
  font-family: var(--rlx-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--rlx-ink);
  margin: 0;
  /* Section level (h2) is the default. */
  font-size: clamp(28px, 3.5vw, 44px);
}
.rlx-heading--xl { font-size: clamp(34px, 5vw, 60px); }
/* Page level (h1). */
.rlx-heading--hero {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(36px, 4.5vw, 58px);
}

.rlx-lead { font-size: 17px; color: var(--rlx-text); line-height: 1.65; margin: 0; }
.rlx-text { font-size: 17px; color: var(--rlx-text); line-height: 1.75; margin: 0; }
.rlx-text--sm { font-size: 15px; line-height: 1.75; }
.rlx-text--muted { color: var(--rlx-muted); }
.rlx-mono { font-family: var(--rlx-font-mono); }

/* Centred section header: tag, h2, optional lead. `--rule` adds the hairline
   the source draws between the header and the section body. */
.rlx-head { text-align: center; margin-bottom: 56px; }
.rlx-head .rlx-tag { margin-bottom: 16px; }
.rlx-head__lead { font-size: 17px; color: var(--rlx-muted); line-height: 1.7; max-width: 640px; margin: 20px auto 0; }
.rlx-head__lead + .rlx-head__lead { margin-top: 12px; }
.rlx-head__lead--sub { font-size: 16px; }
.rlx-head__kicker { font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--rlx-blue-dark); max-width: 720px; margin: 16px auto 0; }
.rlx-head--rule { padding-bottom: 48px; margin-bottom: 64px; border-bottom: 1px solid var(--rlx-border); }

.rlx-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  padding: 3px 10px;
  border-radius: 999px;
}
.rlx-tag--blue { background: var(--rlx-blue-light); color: var(--rlx-blue-dark); }
.rlx-tag--blue-2 { background: var(--rlx-blue-light-2); color: var(--rlx-blue-dark); }
.rlx-tag--lime { background: var(--rlx-lime-tint); color: var(--rlx-lime-ink); }
.rlx-tag--amber { background: var(--rlx-amber-light); color: var(--rlx-amber); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.rlx-btn {
  font-family: var(--rlx-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  padding: 11px 22px;
  border-radius: var(--rlx-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s, color 0.15s, border-color 0.15s;
}
/* `lime` is kept as an alias: the ACF button style still offers it, and the
   source's .btn-lime was repainted blue along with everything else. */
.rlx-btn--primary,
.rlx-btn--lime { background: var(--rlx-blue); color: #fff; }
.rlx-btn--primary:hover,
.rlx-btn--lime:hover { background: var(--rlx-blue-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(79, 110, 248, 0.3); }
/* No dark surfaces remain, so the white outline variant reads as the plain one. */
.rlx-btn--outline,
.rlx-btn--outline-white { background: #fff; color: var(--rlx-ink-2); border-color: var(--rlx-border); font-weight: 500; }
.rlx-btn--outline:hover,
.rlx-btn--outline-white:hover { background: var(--rlx-surface); border-color: var(--rlx-border-2); color: var(--rlx-ink); }
.rlx-btn--block { width: 100%; justify-content: center; }
/* Bare text link ("View Documentation →"): no box, same hit area. */
.rlx-btn--link { background: none; color: var(--rlx-text); font-weight: 500; padding-inline: 4px; }
.rlx-btn--link:hover { color: var(--rlx-blue); }

.rlx-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rlx-btn-row--center { justify-content: center; }

/* ── Focus ─────────────────────────────────────────────────────────────── */

/* One ring everywhere — every surface is light now. `:focus-visible` keeps it
   off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--rlx-blue);
  outline-offset: 2px;
}

/* The nav is fixed; a 2px offset ring would sit under the section border. */
.rlx-nav :focus-visible { outline-offset: 3px; }

.rlx-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--rlx-ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--rlx-radius-sm);
  padding: 13px 20px;   /* 44px tall — the minimum target size */
  text-decoration: none;
  transition: top 0.15s ease;
}
.rlx-skip-link:focus {
  top: 16px;
}

/* ── Animations ────────────────────────────────────────────────────────── */

@keyframes rlx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rlx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rlx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.rlx-float { animation: rlx-float 5s ease-in-out infinite; }

.rlx-marquee { overflow: hidden; }
.rlx-marquee__track { display: flex; width: max-content; animation: rlx-marquee 30s linear infinite; }
.rlx-marquee__track:hover { animation-play-state: paused; }
.rlx-marquee__track--slow { animation-duration: 40s; }

/* The track is two identical groups animated to -50%, so the loop is only
   seamless while one group is at least as wide as the viewport. Without the
   min-width a short list runs out and leaves a gap on wide screens. */
.rlx-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-width: 100vw;
  justify-content: space-around;
}

.rlx-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rlx-reveal.is-visible { opacity: 1; transform: translateY(0); }
.rlx-reveal-left { opacity: 0; transform: translateX(-24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rlx-reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.rlx-reveal-right { opacity: 0; transform: translateX(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rlx-reveal-right.is-visible { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rlx-reveal, .rlx-reveal-left, .rlx-reveal-right { opacity: 1; transform: none; transition: none; }
  .rlx-float, .rlx-marquee__track { animation: none; }
  .rlx-skip-link { transition: none; }
  .rlx-typewriter__caret { animation: none; }
}

/* ── Header / nav ──────────────────────────────────────────────────────── */

.rlx-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.rlx-nav.is-scrolled { border-bottom-color: var(--rlx-border); }
.rlx-nav__inner { height: 64px; display: flex; align-items: center; justify-content: space-between; }

.rlx-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.rlx-logo__text { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--rlx-ink); }
.rlx-logo--dark .rlx-logo__text { color: #fff; }

.rlx-nav__menu { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.rlx-nav__menu a {
  font-weight: 600; font-size: 16px; color: var(--rlx-text);
  text-decoration: none; transition: color 0.2s;
}
.rlx-nav__menu a:hover { color: var(--rlx-blue); }

.rlx-nav__actions { display: flex; align-items: center; gap: 12px; }
.rlx-nav__signin {
  font-weight: 600; font-size: 15px; color: var(--rlx-text);
  text-decoration: none; padding: 10px 16px; transition: color 0.2s;
}
.rlx-nav__signin:hover { color: var(--rlx-blue); }

.rlx-nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--rlx-ink); }
.rlx-nav__toggle svg { stroke: currentColor; }
.rlx-nav__toggle .rlx-icon-close { display: none; }
.rlx-nav__toggle[aria-expanded="true"] .rlx-icon-close { display: block; }
.rlx-nav__toggle[aria-expanded="true"] .rlx-icon-burger { display: none; }

.rlx-nav__mobile { display: none; background: #fff; border-top: 1px solid var(--rlx-border); padding: 16px 32px 24px; flex-direction: column; gap: 16px; }
.rlx-nav__mobile.is-open { display: flex; }
.rlx-nav__mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
/* :not(.rlx-btn) — this rule outranks .rlx-btn--primary (0,1,1 vs 0,1,0) and
   would repaint the panel's CTA dark-on-blue. */
.rlx-nav__mobile a:not(.rlx-btn) { font-weight: 700; font-size: 18px; color: var(--rlx-ink); text-decoration: none; }
.rlx-nav__mobile .rlx-btn { justify-content: center; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.rlx-hero { padding-top: 64px; overflow: hidden; }
.rlx-hero__grid { padding-top: 80px; padding-bottom: 64px; gap: 64px; }
.rlx-hero__title { margin-bottom: 28px; }
.rlx-hero__lead { font-size: 17px; color: var(--rlx-text); line-height: 1.65; max-width: 500px; margin: 0 0 36px; }
.rlx-hero__buttons { margin-bottom: 28px; }
.rlx-hero__accent { display: block; color: var(--rlx-blue); }
.rlx-hero__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rlx-hero__checks li { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--rlx-muted); }

/* Always its own line: the word changes length as it types, and letting it
   share a line with the heading (or wrap) makes the whole page jump. */
.rlx-typewriter {
  display: block;
  white-space: nowrap;
  color: var(--rlx-blue);
}
.rlx-typewriter__caret {
  display: inline-block; width: 3px; height: 0.85em; background: var(--rlx-blue);
  margin-left: 2px; vertical-align: middle; animation: rlx-blink 1s step-end infinite;
}

/* Full-width stats bar under the hero columns. */
.rlx-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--rlx-border);
}
.rlx-stats__item { padding: 32px 24px; text-align: center; }
.rlx-stats__item:not(:last-child) { border-right: 1px solid var(--rlx-border); }
.rlx-stats__value {
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-size: clamp(28px, 3vw, 40px); color: var(--rlx-blue);
}
.rlx-stats__item:nth-child(4n+2) .rlx-stats__value { color: var(--rlx-green); }
.rlx-stats__item:nth-child(4n+3) .rlx-stats__value { color: var(--rlx-violet); }
.rlx-stats__label { font-size: 13px; color: var(--rlx-muted); margin-top: 6px; }

.rlx-hero__visual { position: relative; display: flex; justify-content: flex-end; }
.rlx-hero__visual-inner { width: 100%; max-width: 560px; position: relative; }

/* Light product-dashboard card (also used by the 404 render log). */
.rlx-dash {
  background: #fff; border: 1px solid var(--rlx-border); border-radius: 10px;
  overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}
.rlx-dash__bar {
  padding: 14px 20px; border-bottom: 1px solid var(--rlx-border);
  display: flex; align-items: center; gap: 8px;
}
.rlx-dash__bar-button {
  margin-left: auto; background: var(--rlx-blue); color: #fff; border-radius: var(--rlx-radius-sm);
  padding: 6px 12px; font-size: 13px; font-weight: 500;
}
.rlx-dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.7; }
.rlx-dot--red { background: #ef4444; }
.rlx-dot--amber { background: #f59e0b; }
.rlx-dot--green { background: #22c55e; }
.rlx-dash__bar-label { font-weight: 600; font-size: 14px; color: var(--rlx-ink); }
.rlx-dot + .rlx-dash__bar-label,
.rlx-dot ~ .rlx-dash__bar-label { margin-left: 8px; font-family: var(--rlx-font-mono); font-weight: 400; font-size: 11px; color: var(--rlx-muted); }

.rlx-dash__metrics { padding: 16px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rlx-metric { background: #fff; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); padding: 14px 16px; }
.rlx-metric::after {
  content: ''; display: block; height: 3px; width: 40%; margin-top: 10px;
  border-radius: 2px; background: var(--rlx-blue); opacity: 0.6;
}
.rlx-metric:nth-child(4n+2)::after { background: var(--rlx-green); }
.rlx-metric:nth-child(4n+3)::after { background: var(--rlx-violet); }
.rlx-metric:nth-child(4n+4)::after { background: var(--rlx-green); }
.rlx-metric__label { font-size: 10px; color: var(--rlx-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.rlx-metric__value { font-weight: 700; font-size: 22px; color: var(--rlx-ink); }
.rlx-metric__trend { font-size: 11px; margin-top: 4px; color: var(--rlx-muted); }
.rlx-metric__trend--up { color: var(--rlx-green-dark); }
.rlx-metric__trend--down { color: #dc2626; }

.rlx-dash__chart { padding: 0 20px 4px; }
.rlx-dash__chart-label { font-size: 10px; color: var(--rlx-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.rlx-bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.rlx-bars span { flex: 1; min-height: 3px; border-radius: 2px; background: var(--rlx-blue-light); }
.rlx-bars span:last-child { background: var(--rlx-blue); }

.rlx-dash__projects { padding: 12px 20px 20px; }
.rlx-projects { border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius-sm); overflow: hidden; }
.rlx-projects__head, .rlx-projects__row { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; padding: 10px 14px; }
.rlx-projects__head { background: var(--rlx-surface); border-bottom: 1px solid var(--rlx-border); }
.rlx-projects__head span { font-size: 10px; color: var(--rlx-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rlx-projects__row { padding-block: 12px; }
.rlx-projects__row + .rlx-projects__row { border-top: 1px solid var(--rlx-border); }
.rlx-projects__domain { font-size: 13px; font-weight: 500; color: var(--rlx-ink); }
.rlx-projects__meta { font-size: 11px; color: var(--rlx-muted); margin-top: 2px; }
.rlx-projects__status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--rlx-green-dark); }
.rlx-projects__status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rlx-green); }
.rlx-projects__renders { font-size: 13px; color: var(--rlx-ink); }

.rlx-dash__bots { padding: 4px 20px 20px; display: flex; gap: 6px; flex-wrap: wrap; }
.rlx-dash__bots span {
  font-size: 11px; font-weight: 500; color: var(--rlx-ink-2);
  background: var(--rlx-surface); border: 1px solid var(--rlx-border);
  padding: 3px 8px; border-radius: 999px;
}

.rlx-badge-float {
  position: absolute; top: -16px; right: -16px; background: #fff;
  border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius);
  padding: 10px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.rlx-badge-float__value { font-weight: 700; font-size: 22px; color: var(--rlx-blue); line-height: 1.1; letter-spacing: -0.02em; }
.rlx-badge-float__label { font-size: 11px; color: var(--rlx-muted); margin-top: 2px; }

/* ── Trusted by marquee ────────────────────────────────────────────────── */

.rlx-trusted { border-bottom: 1px solid var(--rlx-border); padding: 24px 0; overflow: hidden; }
.rlx-trusted__item {
  font-weight: 700; font-size: 20px; color: #c4c9d2;
  padding: 0 40px; white-space: nowrap; transition: color 0.2s; cursor: default;
}
.rlx-trusted__item:hover { color: var(--rlx-blue); }

/* ── What is prerendering ──────────────────────────────────────────────── */

.rlx-code-label { font-family: var(--rlx-font-mono); font-size: 11px; color: var(--rlx-muted); margin-bottom: 8px; }
.rlx-code-label--ok { color: var(--rlx-lime-ink); }
.rlx-code { background: var(--rlx-surface-2); border: 1px solid var(--rlx-border); padding: 16px 20px; border-radius: var(--rlx-radius-sm); }
.rlx-code pre { font-family: var(--rlx-font-mono); font-size: 12px; color: var(--rlx-ghost); margin: 0; white-space: pre-wrap; }
.rlx-code--ok { background: var(--rlx-lime-tint); border-color: #bbf7d0; }
.rlx-code--ok pre { color: #166534; }
.rlx-code-arrow { display: flex; align-items: center; justify-content: center; color: var(--rlx-blue); font-size: 20px; }
.rlx-code-stack { display: flex; flex-direction: column; gap: 12px; }

.rlx-includes { border-top: 1px solid var(--rlx-border); padding-top: 28px; }
.rlx-includes__title { font-weight: 600; font-size: 14px; color: var(--rlx-ink); margin-bottom: 16px; }
.rlx-includes__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rlx-includes__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--rlx-text); }
.rlx-includes__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rlx-blue); margin-top: 6px; flex-shrink: 0; }

/* ── How it works ──────────────────────────────────────────────────────── */

.rlx-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 40px; padding: 40px 16px;
  margin: 0 -16px; border-radius: var(--rlx-radius); align-items: start; transition: background 0.2s;
}
.rlx-step:not(:last-child) { border-bottom: 1px solid var(--rlx-border); border-radius: 0; }
.rlx-step:hover { background: var(--rlx-surface-2); }
/* line-height 1 on both sizes puts the numeral's cap line within a pixel of
   the h3's first line — no half-leading to compensate for. */
.rlx-step__num { font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.02em; color: var(--rlx-border); }
.rlx-step__body { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.rlx-step__body h3 { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--rlx-ink); margin: 0; }
.rlx-step__body p { font-size: 15px; color: var(--rlx-muted); line-height: 1.75; margin: 0; }

/* ── Feature banner ────────────────────────────────────────────────────── */

.rlx-banner__text { font-size: 17px; color: var(--rlx-text); line-height: 1.6; margin: 0 0 36px; }
.rlx-bots { display: flex; flex-wrap: wrap; gap: 12px; }
.rlx-bots__item {
  background: var(--rlx-surface); border: 1px solid var(--rlx-border);
  padding: 8px 14px; border-radius: var(--rlx-radius-sm); display: flex; align-items: center; gap: 8px;
  transition: background 0.15s; cursor: default;
}
.rlx-bots__item:hover { background: var(--rlx-blue-light); }
/* The ACF data still carries an emoji per bot; the design swaps it for a
   brand-coloured dot, cycled here so the content stays untouched. */
.rlx-bots__icon { display: none; }
.rlx-bots__item::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--rlx-green); }
.rlx-bots__item:nth-child(12n+1)::before { background: #4285f4; }
.rlx-bots__item:nth-child(12n+2)::before { background: #10a37f; }
.rlx-bots__item:nth-child(12n+3)::before { background: #a855f7; }
.rlx-bots__item:nth-child(12n+4)::before { background: #e5711a; }
.rlx-bots__item:nth-child(12n+5)::before { background: #008373; }
.rlx-bots__item:nth-child(12n+6)::before { background: #ff4500; }
.rlx-bots__item:nth-child(12n+7)::before { background: #de5833; }
.rlx-bots__item:nth-child(12n+8)::before { background: var(--rlx-muted); }
.rlx-bots__item:nth-child(12n+9)::before { background: #1877f2; }
.rlx-bots__item:nth-child(12n+10)::before { background: #1da1f2; }
.rlx-bots__item:nth-child(12n+11)::before { background: #0077b5; }
.rlx-bots__name { font-weight: 500; font-size: 13px; color: var(--rlx-ink-2); }

/* ── Feature / card grids ──────────────────────────────────────────────── */

.rlx-cards { display: grid; gap: 0; border-top: 1px solid var(--rlx-border); border-left: 1px solid var(--rlx-border); }
.rlx-cards--3 { grid-template-columns: repeat(3, 1fr); }
.rlx-cards--4 { grid-template-columns: repeat(4, 1fr); }
.rlx-cards--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rlx-cards--2 { grid-template-columns: repeat(2, 1fr); }

/* A strip under a card grid (card_grid's note). */
.rlx-note { margin-top: 32px; padding: 22px 28px; background: var(--rlx-blue-light); border: 1px solid var(--rlx-blue-line); border-radius: var(--rlx-radius); }
.rlx-note p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--rlx-ink-2); }
.rlx-note strong { color: var(--rlx-ink); font-weight: 700; }

/* Heading on the left, check list in a card on the right (bullets_banner). */
.rlx-split .rlx-tag { margin-bottom: 16px; }
.rlx-split__text { font-size: 17px; color: var(--rlx-text); line-height: 1.7; margin: 20px 0 32px; max-width: 560px; }
.rlx-split__text:last-child { margin-bottom: 0; }
.rlx-checklist {
  list-style: none; margin: 0; padding: 8px 32px; background: #fff;
  border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius-lg); box-shadow: 0 12px 32px rgba(17, 24, 39, 0.05);
}
.rlx-checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; font-size: 16px; line-height: 1.55; color: var(--rlx-ink-2); }
.rlx-checklist li + li { border-top: 1px solid var(--rlx-border); }
.rlx-checklist svg { flex: none; margin-top: 2px; }
.rlx-checklist .rlx-check-ring { fill: var(--rlx-blue-light); }
.rlx-card {
  background: #fff; padding: 40px;
  border-right: 1px solid var(--rlx-border); border-bottom: 1px solid var(--rlx-border);
  transition: background 0.2s; cursor: default;
}
.rlx-card:hover { background: var(--rlx-blue-light); }
.rlx-card__icon { color: var(--rlx-blue); margin-bottom: 20px; }
.rlx-card h3 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--rlx-ink); margin: 0 0 12px; }
.rlx-card p { font-size: 15px; color: var(--rlx-muted); line-height: 1.65; margin: 0; }
.rlx-card--editorial { padding: 48px; }
.rlx-card--editorial .rlx-tag { margin-bottom: 20px; }
.rlx-card--editorial h3 { font-size: 24px; line-height: 1.15; margin-bottom: 20px; }
.rlx-card--editorial p { line-height: 1.75; }

/* ── Pricing ───────────────────────────────────────────────────────────── */

/* Plan comparison table. Wider than the container below ~1180px, so it
   scrolls sideways inside its frame with the row labels pinned left. */
.rlx-pricing__head { margin-bottom: 48px; }
.rlx-pricing__note { font-size: 17px; color: var(--rlx-muted); line-height: 1.6; margin: 16px 0 0; }

.rlx-pricing__wrap {
  /* The containing block for the screen-reader text in the cells: without
     it that absolutely positioned text escapes the scroll frame and widens
     the whole page on a phone. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--rlx-border);
  border-radius: var(--rlx-radius-lg);
  box-shadow: 0 14px 40px rgba(17, 24, 39, 0.05);
  scrollbar-color: var(--rlx-blue) transparent;
}
.rlx-pricing {
  width: 100%;
  /* --rlx-plan-cols is set by the template: the plans come from the
     dashboard, so their number is not known here. */
  min-width: calc(190px + var(--rlx-plan-cols, 5) * 186px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--rlx-ink-2);
  font-size: 13px;
}
.rlx-pricing th, .rlx-pricing td {
  padding: 15px 16px;
  border-right: 1px solid var(--rlx-border);
  border-bottom: 1px solid var(--rlx-border);
  text-align: left;
  vertical-align: middle;
}
.rlx-pricing tr > :last-child { border-right: 0; }
.rlx-pricing tbody tr:last-child > * { border-bottom: 0; }
.rlx-pricing thead th { padding: 0; vertical-align: top; background: var(--rlx-bg); font-weight: 400; }
.rlx-pricing thead th:not(:first-child) { width: calc(85% / var(--rlx-plan-cols, 5)); }
.rlx-pricing small {
  display: block;
  margin-top: 6px;
  color: var(--rlx-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}

/* Row labels — and the corner cell above them — stay put while the plan
   columns scroll underneath. */
.rlx-pricing .rlx-pricing__corner,
.rlx-pricing tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--rlx-surface);
}
.rlx-pricing .rlx-pricing__corner { width: 15%; padding: 32px 20px; }
.rlx-pricing__corner span { display: block; color: var(--rlx-ink); font-size: 15px; font-weight: 700; }
.rlx-pricing tbody th { color: var(--rlx-ink-2); font-weight: 600; }
.rlx-pricing tbody td { line-height: 1.4; }
.rlx-pricing tbody tr:hover td:not(.is-highlighted) { background: #fafafb; }
.rlx-pricing .is-highlighted { background: var(--rlx-blue-light); }

.rlx-pricing__plan { position: relative; min-height: 242px; padding: 28px 16px 22px; }
.rlx-pricing__name { display: block; margin-bottom: 14px; color: var(--rlx-ink); font-size: 14px; font-weight: 700; }
.rlx-pricing__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.rlx-pricing__price strong { color: var(--rlx-ink); font-size: 29px; line-height: 1; letter-spacing: -0.03em; }
.rlx-pricing__price span { color: var(--rlx-muted); font-size: 11px; font-weight: 500; }
.rlx-pricing__plan p { min-height: 40px; margin: 0 0 18px; color: var(--rlx-muted); font-size: 11px; line-height: 1.5; }
.rlx-pricing__badge {
  position: absolute;
  top: 0;
  left: 16px;
  padding: 4px 9px;
  border-radius: 0 0 6px 6px;
  background: var(--rlx-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.rlx-pricing__cta {
  display: flex;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid var(--rlx-border);
  border-radius: 7px;
  background: #fff;
  color: var(--rlx-ink-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.rlx-pricing__cta:hover { border-color: var(--rlx-blue); color: var(--rlx-blue); }
.rlx-pricing__cta.is-primary { border-color: var(--rlx-blue); background: var(--rlx-blue); color: #fff; }
.rlx-pricing__cta.is-primary:hover { background: var(--rlx-blue-dark); }
.rlx-pricing__yes { display: inline-flex; align-items: flex-start; gap: 6px; }
.rlx-pricing__yes > span[aria-hidden] { color: var(--rlx-blue); font-weight: 700; }

.rlx-check-ring { stroke: none; }
.rlx-check-mark { stroke: var(--rlx-blue); }

.rlx-pricing__foot { font-size: 14px; color: var(--rlx-muted); margin: 24px 0 0; text-align: center; }
.rlx-pricing__foot a { color: var(--rlx-blue); font-weight: 600; text-decoration: none; }
.rlx-pricing__foot a:hover { text-decoration: underline; }

/* ── JS websites ───────────────────────────────────────────────────────── */

.rlx-jsweb__head { padding-top: 72px; }
.rlx-jsweb__head .rlx-head { margin-bottom: 0; }
.rlx-jsweb__body { padding-block: 72px; }
.rlx-jsweb__col p { font-size: 17px; color: var(--rlx-ink-2); line-height: 1.8; margin: 0 0 20px; }
.rlx-jsweb__col p:last-child { margin-bottom: 0; }
.rlx-jsweb__quote { background: var(--rlx-surface-2); border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); padding: 36px 40px; margin-bottom: 32px; }
.rlx-jsweb__quote p { font-size: 17px; color: var(--rlx-muted); line-height: 1.8; margin: 0 0 20px; }
.rlx-jsweb__quote strong { font-weight: 600; font-size: 22px; color: var(--rlx-ink); line-height: 1.3; display: block; }
.rlx-facts { display: flex; flex-direction: column; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); overflow: hidden; }
.rlx-facts__row { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; gap: 16px; }
.rlx-facts__row:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
.rlx-facts__label { font-size: 14px; color: var(--rlx-muted); }
.rlx-facts__value { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--rlx-ink); text-align: right; }
.rlx-facts__value svg { flex-shrink: 0; }
.rlx-jsweb__after { font-size: 15px; color: var(--rlx-muted); line-height: 1.75; margin-top: 24px; }

.rlx-strip {
  margin-top: 64px; background: var(--rlx-blue-light); border: 1px solid var(--rlx-blue-line);
  border-radius: var(--rlx-radius); display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 32px 40px;
}
.rlx-strip__title { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--rlx-ink); margin-bottom: 6px; }
.rlx-strip__sub { font-size: 14px; color: var(--rlx-muted); }

/* ── Crawler rendering ─────────────────────────────────────────────────── */

.rlx-orbit { position: relative; width: 100%; aspect-ratio: 1; max-width: 420px; margin: 0 auto; }
.rlx-orbit__ring { position: absolute; border-radius: 50%; }
.rlx-orbit__ring--outer { inset: 10%; border: 1px solid rgba(79, 110, 248, 0.2); }
.rlx-orbit__ring--inner { inset: 25%; border: 1px solid rgba(79, 110, 248, 0.3); }
.rlx-orbit__core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px; background: var(--rlx-blue); border-radius: var(--rlx-radius);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(79, 110, 248, 0.3); z-index: 2;
}
.rlx-orbit__node { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.rlx-orbit__node span {
  display: block; background: #fff; border: 1px solid var(--rlx-border); padding: 5px 10px;
  white-space: nowrap; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-family: var(--rlx-font-mono); font-size: 10px; color: var(--rlx-muted);
}
.rlx-orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.rlx-orbit__badge {
  position: absolute; bottom: -20px; right: -10px; background: var(--rlx-blue); padding: 10px 16px;
  border-radius: 4px; z-index: 4; font-family: var(--rlx-font-mono); font-size: 10px; color: #fff;
}

.rlx-crawler-card {
  padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; background: #fff;
  border: 1px solid var(--rlx-border); transition: background 0.2s; cursor: default;
}
.rlx-crawler-card + .rlx-crawler-card { margin-top: -1px; }
.rlx-crawler-card:first-child { border-radius: var(--rlx-radius) var(--rlx-radius) 0 0; }
.rlx-crawler-card:last-child { border-radius: 0 0 var(--rlx-radius) var(--rlx-radius); }
.rlx-crawler-card:hover { background: var(--rlx-surface); }
.rlx-crawler-card__icon {
  width: 40px; height: 40px; background: var(--rlx-blue-light); border: 1px solid var(--rlx-blue-line);
  border-radius: var(--rlx-radius-sm); color: var(--rlx-blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rlx-crawler-card__icon svg { stroke-width: 1.8; }
.rlx-crawler-card__title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--rlx-ink); margin-bottom: 6px; }
.rlx-crawler-card p { font-size: 14px; color: var(--rlx-muted); line-height: 1.7; margin: 0; }

/* ── Multi-domain ──────────────────────────────────────────────────────── */

.rlx-usecases__title { font-weight: 600; font-size: 13px; color: var(--rlx-ink); margin-bottom: 16px; }
.rlx-usecases__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rlx-usecases__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--rlx-muted); }
.rlx-usecases__list li::before { content: ''; width: 5px; height: 5px; background: var(--rlx-blue); flex-shrink: 0; }

.rlx-domains { background: #fff; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); overflow: hidden; }
.rlx-domains__bar { background: var(--rlx-ink); padding: 16px 24px; display: flex; align-items: center; gap: 8px; }
.rlx-domains__bar-label { font-family: var(--rlx-font-mono); font-size: 11px; color: var(--rlx-ghost); margin-left: 12px; }
.rlx-domains__table { padding: 24px 28px 8px; }
.rlx-domains__head, .rlx-domains__row { display: grid; grid-template-columns: 1fr auto auto; gap: 0 24px; align-items: center; }
.rlx-domains__head { padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.rlx-domains__head span { font-weight: 700; font-size: 11px; color: var(--rlx-muted); }
.rlx-domains__row { padding: 14px 0; }
.rlx-domains__row:not(:last-child) { border-bottom: 1px solid #f5f5f5; }
.rlx-domains__name { font-family: var(--rlx-font-mono); font-size: 13px; color: var(--rlx-ink); }
.rlx-domains__pages { font-family: var(--rlx-font-mono); font-size: 13px; color: var(--rlx-muted); text-align: right; }
.rlx-domains__status {
  font-weight: 500; font-size: 12px; color: var(--rlx-green-dark);
  background: var(--rlx-green-light); padding: 2px 8px; border-radius: 999px;
}
.rlx-domains__total-wrap { padding: 16px 28px 24px; }
.rlx-domains__total {
  background: var(--rlx-blue); border-radius: var(--rlx-radius-sm); padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rlx-domains__total-label { font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.rlx-domains__total-value { font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -0.02em; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.rlx-faq__list { display: flex; flex-direction: column; }
.rlx-faq__item { border-bottom: 1px solid var(--rlx-border); }
.rlx-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--rlx-font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 22px; color: var(--rlx-ink); line-height: 1.2;
}
.rlx-faq__icon {
  flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius-sm);
  display: flex; align-items: center; justify-content: center; background: #fff; color: var(--rlx-ink); transition: all 0.2s;
}
.rlx-faq__icon svg { transition: transform 0.2s; }
.rlx-faq__q:hover .rlx-faq__icon { border-color: var(--rlx-blue); color: var(--rlx-blue); }
.rlx-faq__q[aria-expanded="true"] .rlx-faq__icon { background: var(--rlx-blue); border-color: var(--rlx-blue); color: #fff; }
.rlx-faq__q[aria-expanded="true"] .rlx-faq__icon svg { transform: rotate(45deg); }
.rlx-faq__a { overflow: hidden; max-height: 0; transition: max-height 0.35s ease, padding-bottom 0.35s ease; padding-bottom: 0; }
/* `inert` rather than `hidden`: it drops the panel out of the accessibility
   tree and the tab order without the display change that would kill the
   height transition. */
.rlx-faq__a[inert] { pointer-events: none; }
.rlx-faq__a.is-open { padding-bottom: 28px; }
.rlx-faq__a p { font-size: 16px; color: var(--rlx-muted); line-height: 1.75; max-width: 720px; margin: 0; }

/* ── Testimonials ──────────────────────────────────────────────────────── */

.rlx-testimonials__head { padding-top: 96px; padding-bottom: 64px; }
.rlx-testimonials__rail { overflow: hidden; padding-bottom: 80px; }
.rlx-quote {
  width: 360px; flex-shrink: 0; background: #fff; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius);
  padding: 36px; margin: 0 10px; cursor: default; transition: border-color 0.2s, box-shadow 0.2s;
}
.rlx-quote:hover { border-color: var(--rlx-blue); box-shadow: 0 4px 24px rgba(79, 110, 248, 0.1); }
.rlx-quote__stars { display: flex; gap: 2px; margin-bottom: 16px; }
.rlx-quote__text { font-size: 15px; color: var(--rlx-ink-2); line-height: 1.65; margin: 0 0 24px; }
.rlx-quote__author { display: flex; align-items: center; gap: 12px; }
.rlx-quote__avatar {
  width: 36px; height: 36px; border-radius: var(--rlx-radius-sm); background: var(--rlx-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: #fff; flex-shrink: 0;
}
.rlx-quote__name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--rlx-ink); }
.rlx-quote__role { font-family: var(--rlx-font-mono); font-size: 11px; color: var(--rlx-muted); }

/* ── Award banner ──────────────────────────────────────────────────────── */

.rlx-award__list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.rlx-award__list li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--rlx-text); }
.rlx-award__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rlx-blue); flex-shrink: 0; transform: translateY(-2px); }
.rlx-award__stats { display: flex; flex-direction: column; gap: 12px; }
.rlx-award__stat {
  background: #fff; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius);
  padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rlx-award__stat-label { font-size: 14px; font-weight: 500; color: var(--rlx-muted); }
.rlx-award__stat-value { font-weight: 700; font-size: 36px; letter-spacing: -0.02em; line-height: 1.1; color: var(--rlx-blue); }

/* ── CTA ───────────────────────────────────────────────────────────────── */

.rlx-cta { border-top: 1px solid var(--rlx-border); }
.rlx-cta__inner { padding: 96px 32px; text-align: center; }
.rlx-cta__title { margin-bottom: 28px; font-size: clamp(32px, 4vw, 48px); }
.rlx-cta__text { font-size: 18px; color: var(--rlx-muted); line-height: 1.6; max-width: 520px; margin: 0 auto 40px; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.rlx-404 { background: #fff; padding-top: 64px; border-bottom: 1px solid var(--rlx-border); }
.rlx-404__inner {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}
.rlx-404__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.rlx-404__title { font-size: clamp(36px, 4.5vw, 58px); font-weight: 800; letter-spacing: -0.03em; margin: 20px 0 24px; }
.rlx-404__text { font-size: 17px; color: var(--rlx-text); line-height: 1.7; max-width: 460px; margin: 0 0 36px; }

.rlx-404__log { padding: 12px 20px 4px; }
.rlx-404__log-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.rlx-404__log-key {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rlx-muted);
  flex: 0 0 76px;
}
.rlx-404__log-val { font-family: var(--rlx-font-mono); font-size: 13px; color: var(--rlx-ink); word-break: break-all; }
.rlx-404__log-val--bad { color: #dc2626; }

.rlx-404__search { padding: 16px 20px 20px; }
.rlx-404__search-row { display: flex; gap: 8px; margin-top: 10px; }
.rlx-404__input {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rlx-border-2);
  border-radius: var(--rlx-radius-sm);
  padding: 10px 14px;
  font-family: var(--rlx-font-body);
  font-size: 14px;
  color: var(--rlx-ink);
}
.rlx-404__input::placeholder { color: var(--rlx-muted); }
.rlx-404__input:focus { border-color: var(--rlx-blue); }
.rlx-404__submit {
  flex: 0 0 auto;
  background: var(--rlx-blue);
  border: none;
  border-radius: var(--rlx-radius-sm);
  padding: 10px 20px;
  font-family: var(--rlx-font-body);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.rlx-404__submit:hover { background: var(--rlx-blue-dark); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.rlx-footer { background: #fff; border-top: 1px solid var(--rlx-border); }
.rlx-footer__inner { padding: 56px 32px 40px; max-width: 1280px; margin: 0 auto; }
.rlx-footer__top {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--rlx-border);
}
.rlx-footer__about { max-width: 320px; }
.rlx-footer__about p { font-size: 14px; color: var(--rlx-muted); margin-top: 16px; line-height: 1.7; }
.rlx-footer__social { display: flex; gap: 10px; }
.rlx-footer__social a {
  width: 36px; height: 36px; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--rlx-muted);
  text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.rlx-footer__social a:hover { border-color: var(--rlx-blue); color: var(--rlx-blue); }
.rlx-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; padding-top: 28px;
}
.rlx-footer__copy { font-family: var(--rlx-font-mono); font-size: 11px; color: var(--rlx-muted); letter-spacing: 0.04em; }
.rlx-footer__legal { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.rlx-footer__legal a {
  font-weight: 600; font-size: 13px; color: var(--rlx-muted);
  text-decoration: none; transition: color 0.2s;
}
.rlx-footer__legal a:hover { color: var(--rlx-blue); }

/* ── Legal page ────────────────────────────────────────────────────────── */

.rlx-legal-hero { position: relative; overflow: hidden; background: var(--rlx-surface); border-bottom: 1px solid var(--rlx-border); text-align: center; padding-top: 64px; }
.rlx-legal-hero__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 88px 32px 80px; }

/* A banner stays light like the rest of the site: the photo sits under a
   surface-coloured scrim whose opacity is set per page (floored in the
   template), so the dark caption keeps its contrast whatever is underneath.
   Full-bleed, including the 64px reserved for the fixed nav, which covers it. */
.rlx-legal-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rlx-legal-hero__scrim { position: absolute; inset: 0; background: var(--rlx-surface); }

.rlx-legal-hero h1 {
  font-weight: 800; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--rlx-ink); margin: 0 0 20px;
}
.rlx-legal-hero p {
  font-size: 17px; line-height: 1.7; color: var(--rlx-muted);
  max-width: 720px; margin: 0 auto; text-wrap: pretty;
}
.rlx-legal-hero--image p { color: var(--rlx-ink-2); }
/* "Last updated: …" between the title and the intro; the intro's paragraph
   rules (and their image-banner colour) apply to it too. */
.rlx-legal-hero p.rlx-legal-hero__updated { font-family: var(--rlx-font-mono); font-size: 13px; letter-spacing: 0.02em; margin: -6px auto 18px; }

.rlx-legal-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
/* Grid items default to min-width: auto, so a wide table stretches the
   column instead of scrolling inside its own wrapper — and the overflow
   then gets clipped by the page, out of reach. */
.rlx-legal-body > * { min-width: 0; }

/* ── Legal: contents ── */

.rlx-legal-toc { position: sticky; top: 88px; padding: 64px 0 40px; }
.rlx-legal-toc__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; color: var(--rlx-ink);
  margin-bottom: 12px; list-style: none;
}
.rlx-legal-toc__title::-webkit-details-marker { display: none; }
.rlx-legal-toc__count {
  font-family: var(--rlx-font-mono); font-size: 10px; font-weight: 500; color: var(--rlx-muted);
  background: var(--rlx-surface); border: 1px solid var(--rlx-border); border-radius: 999px; padding: 1px 7px;
}

/* The whole list is shown, so it gets its own scroll once it outgrows the
   viewport. Masking the top and bottom edges signals there is more; the
   scrollbar itself only shows while the pointer is over the list. */
.rlx-legal-toc__nav {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 16px), transparent);
}
.rlx-legal-toc__nav:hover { scrollbar-color: var(--rlx-border-2) transparent; }
.rlx-legal-toc__nav::-webkit-scrollbar { width: 4px; }
.rlx-legal-toc__nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.rlx-legal-toc__nav:hover::-webkit-scrollbar-thumb { background: var(--rlx-border-2); }

/* One continuous rail; the active entry lights up its stretch of it. */
.rlx-legal-toc__nav ol { list-style: none; margin: 0; padding: 6px 0; border-left: 1px solid var(--rlx-border); }
.rlx-legal-toc__nav li { margin: 0; }

.rlx-legal-toc a {
  /* Two tracks, so a wrapped title lines up under the title — not under the number. */
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: baseline;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rlx-text);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.rlx-legal-toc a:hover { color: var(--rlx-ink); border-left-color: var(--rlx-border-2); }
.rlx-legal-toc__num {
  font-family: var(--rlx-font-mono); font-size: 10px;
  font-variant-numeric: tabular-nums; color: var(--rlx-muted);
  transition: color 0.15s;
}
.rlx-legal-toc a[aria-current="true"] { color: var(--rlx-blue-dark); border-left-color: var(--rlx-blue); font-weight: 500; }
.rlx-legal-toc a[aria-current="true"] .rlx-legal-toc__num { color: var(--rlx-blue); }

/* Desktop: the list is always open, so the summary is only a label. */
@media (min-width: 1025px) {
  .rlx-legal-toc__title { pointer-events: none; cursor: default; }
  .rlx-legal-toc__count { display: none; }
}

/* ── Legal: document ── */

/* ~75 characters a line at 16px; the rest of the row stays empty. */
.rlx-legal-main { max-width: 780px; padding: 40px 0 96px; }
.rlx-legal-section { padding: 40px 0; }
.rlx-legal-section:not(:last-of-type) { border-bottom: 1px solid var(--rlx-border); }
/* Fixed-width number column + gap = the body's 44px indent, so the heading
   and the text under it start on the same line. */
.rlx-legal-section__head { display: flex; gap: 20px; align-items: baseline; margin-bottom: 16px; }
.rlx-legal-section__num { flex: 0 0 24px; font-family: var(--rlx-font-mono); font-size: 12px; color: var(--rlx-blue); }
.rlx-legal-section h2 { font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; color: var(--rlx-ink); margin: 0; }
.rlx-legal-section__body { margin-left: 44px; }
.rlx-legal-section__body p { font-size: 16px; color: var(--rlx-ink-2); line-height: 1.75; margin: 0 0 16px; }
.rlx-legal-section__body p:last-child { margin-bottom: 0; }
.rlx-legal-section__body p.rlx-legal-foot { color: var(--rlx-muted); }
/* Addresses in the text (rlx_linkify); the contact card styles its own. */
.rlx-legal-section__body p a, .rlx-legal-section__body li a, .rlx-legal-table a, .rlx-legal-hero__inner a, .rlx-legal-accept a {
    color: var(--rlx-blue-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.rlx-legal-section__body p a:hover, .rlx-legal-section__body li a:hover, .rlx-legal-table a:hover, .rlx-legal-hero__inner a:hover, .rlx-legal-accept a:hover { text-decoration-thickness: 2px; }
.rlx-legal-section__body ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.rlx-legal-section__body ul:last-child { margin-bottom: 0; }
.rlx-legal-section__body li { position: relative; padding-left: 20px; font-size: 16px; color: var(--rlx-ink-2); line-height: 1.7; }
/* Centred on the first line: half the 1.7 line box, less half the dot. */
.rlx-legal-section__body li::before {
  content: ''; position: absolute; left: 4px; top: calc(0.85em - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--rlx-blue);
}
.rlx-legal-block { margin-top: 28px; }
.rlx-legal-block:first-child { margin-top: 0; }
.rlx-legal-block__heading { font-weight: 600; font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; color: var(--rlx-ink); margin: 0 0 10px; }

.rlx-legal-table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); }
.rlx-legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rlx-legal-table th,
.rlx-legal-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rlx-border);
  vertical-align: top;
}
.rlx-legal-table th {
  font-weight: 600;
  font-size: 12px;
  color: var(--rlx-muted);
  background: var(--rlx-surface);
  white-space: nowrap;
}
.rlx-legal-table td { font-family: var(--rlx-font-mono); font-size: 12px; color: var(--rlx-ink-2); }
.rlx-legal-table tbody tr:last-child td { border-bottom: none; }

.rlx-legal-contact { background: var(--rlx-surface); border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); padding: 24px 28px; margin-top: 16px; }
.rlx-legal-contact__name { font-weight: 700; font-size: 17px; color: var(--rlx-ink); margin-bottom: 10px; }
.rlx-legal-contact a { display: block; font-family: var(--rlx-font-mono); font-size: 13px; color: var(--rlx-blue-dark); text-decoration: none; margin-bottom: 6px; }
.rlx-legal-contact a:last-child { margin-bottom: 0; }
.rlx-legal-contact a:hover { text-decoration: underline; }
.rlx-legal-accept { margin-top: 40px; background: var(--rlx-blue-light); border: 1px solid var(--rlx-blue-line); border-radius: var(--rlx-radius); padding: 28px 32px; }
.rlx-legal-accept p { font-weight: 600; font-size: 16px; color: var(--rlx-ink); line-height: 1.65; margin: 0; }

/* ── Contact page ──────────────────────────────────────────────────────── */

/* The address on the left, as large as the eye goes to first; the cards on
   the right. One column below 900px. */
.rlx-contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 64px 0 96px; }
.rlx-contact__main {
  position: relative; overflow: hidden; border: 1px solid var(--rlx-blue-line); border-radius: var(--rlx-radius-lg);
  background: linear-gradient(160deg, var(--rlx-blue-light) 0%, #fff 70%); padding: 40px;
}
.rlx-contact__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 10px; background: #fff; border: 1px solid var(--rlx-blue-line); color: var(--rlx-blue); margin-bottom: 28px;
}
.rlx-contact__icon--sm { width: 40px; height: 40px; border-radius: 8px; margin: 0; flex: none; background: var(--rlx-blue-light); border-color: transparent; }
.rlx-contact__label { font-family: var(--rlx-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rlx-muted); margin-bottom: 10px; }
.rlx-contact__email {
  display: inline-block; font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--rlx-ink); text-decoration: none; overflow-wrap: anywhere;
}
.rlx-contact__email:hover { color: var(--rlx-blue-dark); }
.rlx-contact__note { font-size: 16px; line-height: 1.65; color: var(--rlx-text); margin: 14px 0 28px; }
.rlx-contact__cards { display: flex; flex-direction: column; gap: 16px; }
.rlx-contact__card { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius-lg); padding: 26px 28px; }
.rlx-contact__card-body { min-width: 0; }
.rlx-contact__title { font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; color: var(--rlx-ink); margin: 8px 0 8px; }
.rlx-contact__card p { font-size: 15px; line-height: 1.7; color: var(--rlx-text); margin: 0 0 10px; }
.rlx-contact__card p:last-of-type { margin-bottom: 0; }
.rlx-contact__card p a { color: var(--rlx-blue-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.rlx-contact__more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--rlx-blue-dark); text-decoration: none; }
.rlx-contact__more:hover { text-decoration: underline; }

/* ── WYSIWYG fallback ──────────────────────────────────────────────────── */

.rlx-prose { font-size: 15px; color: var(--rlx-ink-2); line-height: 1.8; }
.rlx-prose h2 { font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--rlx-ink); margin: 40px 0 16px; }
.rlx-prose h3 { font-weight: 600; font-size: 20px; color: var(--rlx-ink); margin: 32px 0 12px; }
.rlx-prose a { color: var(--rlx-blue-dark); }
.rlx-prose ul, .rlx-prose ol { padding-left: 20px; }
.rlx-prose li { margin-bottom: 8px; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Four items plus both actions only just fit between 768 and 1024px. */
  .rlx-nav__menu { gap: 24px; }
  .rlx-nav__menu a { font-size: 15px; }
  .rlx-nav__signin { padding: 10px 8px; }

  .rlx-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .rlx-step__body { grid-template-columns: 1fr; gap: 16px; }
  .rlx-legal-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rlx-legal-main { max-width: none; padding-top: 8px; }

  /* The contents collapse into a toggle card above the document. */
  .rlx-legal-toc { position: static; padding: 40px 0 0; }
  .rlx-legal-toc__box { border: 1px solid var(--rlx-border); border-radius: var(--rlx-radius); background: #fff; }
  .rlx-legal-toc__title { margin: 0; padding: 14px 16px; cursor: pointer; min-height: 48px; }
  .rlx-legal-toc__title::after {
    content: ''; margin-left: auto; width: 8px; height: 8px;
    border-right: 1.5px solid var(--rlx-muted); border-bottom: 1.5px solid var(--rlx-muted);
    transform: translateY(-2px) rotate(45deg); transition: transform 0.2s;
  }
  .rlx-legal-toc__box[open] .rlx-legal-toc__title::after { transform: translateY(2px) rotate(-135deg); }
  .rlx-legal-toc__box[open] .rlx-legal-toc__title { border-bottom: 1px solid var(--rlx-border); }
  .rlx-legal-toc__nav { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 8px 16px 12px; }
}

@media (max-width: 900px) {
  .rlx-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .rlx-contact { grid-template-columns: minmax(0, 1fr); padding: 40px 0 64px; }
}

@media (max-width: 767px) {
  .rlx-container { padding: 0 20px; }

  /* Stacked columns: slide up instead of sideways, so the pre-reveal
     transform cannot widen the document. */
  .rlx-reveal-left, .rlx-reveal-right { transform: translateY(16px); }
  .rlx-reveal-left.is-visible, .rlx-reveal-right.is-visible { transform: translateY(0); }
  .rlx-section__inner { padding-top: 64px; padding-bottom: 64px; }
  .rlx-section__inner--tight { padding-top: 56px; padding-bottom: 56px; }

  .rlx-head { margin-bottom: 40px; }
  .rlx-head--rule { padding-bottom: 32px; margin-bottom: 40px; }

  .rlx-nav__menu, .rlx-nav__actions { display: none; }
  .rlx-nav__toggle { display: block; }
  .rlx-nav__mobile { padding: 16px 20px 24px; }

  .rlx-grid-2, .rlx-grid-2--wide, .rlx-grid-2--mid { grid-template-columns: 1fr; gap: 40px; }
  .rlx-hero__visual { display: none; }
  .rlx-hero__grid { padding-top: 48px; padding-bottom: 48px; }
  .rlx-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .rlx-stats__item { padding: 20px 12px; border-bottom: 1px solid var(--rlx-border); }
  .rlx-stats__item:not(:last-child) { border-right: none; }
  .rlx-stats__item:nth-child(odd):not(:last-child) { border-right: 1px solid var(--rlx-border); }
  .rlx-stats__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rlx-stats__value { font-size: 28px; }
  .rlx-stats__label { font-size: 12px; }

  .rlx-cards--2, .rlx-cards--3, .rlx-cards--4, .rlx-cards--auto { grid-template-columns: 1fr; }
  .rlx-checklist { padding: 4px 20px; }
  .rlx-note { padding: 18px 20px; }
  .rlx-pricing__head { margin-bottom: 36px; }
  /* Bleed the table to the right edge so it reads as scrollable. */
  .rlx-pricing__wrap { margin-right: -20px; border-right: 0; border-radius: 10px 0 0 10px; }
  .rlx-pricing { min-width: calc(150px + var(--rlx-plan-cols, 5) * 178px); }
  .rlx-pricing .rlx-pricing__corner, .rlx-pricing tbody th { width: 150px; min-width: 150px; }
  .rlx-card, .rlx-card--editorial { padding: 28px; }
  .rlx-card--editorial h3 { font-size: 22px; }

  .rlx-includes__list { grid-template-columns: 1fr; }
  .rlx-step { grid-template-columns: 48px 1fr; gap: 16px; padding: 28px 0; margin: 0; }
  .rlx-step:hover { background: none; }
  .rlx-step__num { font-size: 32px; }
  .rlx-step__body h3 { font-size: 21px; }

  .rlx-jsweb__head { padding-top: 56px; }
  .rlx-jsweb__body { padding-block: 48px; }
  .rlx-jsweb__quote { padding: 24px 28px; }
  .rlx-strip { margin-top: 40px; padding: 24px; }

  .rlx-crawler-card { padding: 20px; gap: 16px; }
  .rlx-orbit__badge { right: 0; }
  .rlx-domains__table { padding: 20px 16px 8px; }
  .rlx-domains__head, .rlx-domains__row { gap: 0 12px; }
  .rlx-domains__total-wrap { padding: 12px 16px 16px; }

  .rlx-faq__q { font-size: 18px; padding: 20px 0; gap: 16px; }

  .rlx-testimonials__head { padding-top: 64px; padding-bottom: 40px; }
  .rlx-quote { width: 300px; padding: 28px; }

  .rlx-award__stat { padding: 20px; }
  .rlx-award__stat-value { font-size: 30px; }

  .rlx-cta__inner { padding: 64px 20px; }
  .rlx-404__grid { grid-template-columns: 1fr; gap: 40px; }
  .rlx-404__inner { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
  .rlx-footer__inner { padding: 40px 20px 32px; }
  .rlx-footer__legal { gap: 20px; }

  /* Long intros read badly centred on a phone. */
  .rlx-legal-hero { text-align: left; }
  .rlx-legal-hero__inner { padding: 48px 20px 40px; }
  .rlx-legal-hero p { font-size: 16px; margin: 0; }
  .rlx-legal-toc { padding-top: 24px; }
  .rlx-legal-main { padding: 8px 0 64px; }
  .rlx-legal-section { padding: 32px 0; }
  .rlx-legal-section__head { gap: 12px; }
  .rlx-legal-section__num { flex-basis: auto; }
  .rlx-legal-section h2 { font-size: 21px; }
  .rlx-legal-section__body { margin-left: 0; }
  .rlx-legal-section__body p, .rlx-legal-section__body li { font-size: 15px; }
  .rlx-legal-block { margin-top: 24px; }
  .rlx-legal-table th, .rlx-legal-table td { padding: 8px 10px; }
  .rlx-legal-contact { padding: 20px; }
  .rlx-legal-accept { padding: 24px 20px; }
  .rlx-contact__main { padding: 28px 22px; }
  .rlx-contact__card { padding: 22px 20px; gap: 14px; }
}