/* ==========================================================================
   Home page (index.php) and the product / channel / solution pages
   (includes/detail-page.php).

   Loaded only on those pages, after conversa-ui.css, and scoped to .rh-home.

   The look: a dark canvas lit from behind, glass surfaces with hairline
   borders, one green-to-teal-to-blue gradient for the things that matter,
   pill buttons, and a bento grid where there is a set of things to show.

   Tokens
     canvas   #05070d   the page
     glass    white at 3-6%, with a 1px border at 9-16%
     accent   #8be66a -> #3fd1c5 -> #6c9dff
     held     #f2b65a   a room that is held

   Type
     Plus Jakarta Sans for headings, the theme's Inter for running text, Anek
     Bangla for every Bangla line.
   ========================================================================== */

.rh-home {
  --rh-canvas: #05070d;
  --rh-glass: rgba(255, 255, 255, 0.035);
  --rh-glass-strong: rgba(255, 255, 255, 0.06);
  --rh-line: rgba(255, 255, 255, 0.09);
  --rh-line-strong: rgba(255, 255, 255, 0.16);
  --rh-green: #8be66a;
  --rh-teal: #3fd1c5;
  --rh-blue: #6c9dff;
  --rh-held: #f2b65a;
  --rh-grad: linear-gradient(100deg, #8be66a 0%, #3fd1c5 55%, #6c9dff 100%);
  --rh-text: rgba(226, 232, 245, 0.7);
  --rh-text-dim: rgba(226, 232, 245, 0.48);
  --rh-display: "Plus Jakarta Sans", "Anek Bangla", "Inter", sans-serif;
  --rh-bangla: "Anek Bangla", "Plus Jakarta Sans", sans-serif;
  --rh-radius: 24px;
  /* The page's vertical rhythm, set once. Two neighbouring sections stand
     2 x --rh-sec-pad apart; a section's heading stands --rh-head-gap above
     what it introduces. Change the spacing here, not section by section. */
  --rh-sec-pad: clamp(40px, 4.4vw, 68px);
  --rh-sec-pad-slim: clamp(28px, 3vw, 44px);
  --rh-head-gap: clamp(28px, 3.2vw, 44px);
  background: var(--rh-canvas);
}

/* The theme capitalises Every Word Of Every Heading. Sentence case here. */
.rh-home h1,
.rh-home h2,
.rh-home h3,
.rh-home h4 {
  font-family: var(--rh-display);
  text-transform: none;
  color: #fff;
  letter-spacing: -0.03em;
}
.rh-home p {
  color: var(--rh-text);
  line-height: 1.65;
}
.rh-home :focus-visible {
  outline: 2px solid var(--rh-green);
  outline-offset: 3px;
  border-radius: 8px;
}
.rh-grad {
  background: var(--rh-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The hero slides up under the header, so the header -- and the phone menu
   that drops out of it -- has to sit above it. */
.rh-home > header {
  position: relative;
  z-index: 60;
}

/* ---------- Motion ----------
   Three kinds, all switched off by prefers-reduced-motion at the end of this
   file: the hero arriving on load, blocks rising in as they are scrolled to
   (armed by assets/js/resort-home.js), and a few things that keep moving --
   the orbit, the inbox rows, the agent's glow. */

/* Scroll reveal. The class is added by the script, so without it nothing is
   ever hidden. */
.rh-home .rh-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rh-delay, 0ms);
}
.rh-home .rh-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* The hero arrives in order: badge, headline, text, buttons, then the picture. */
.rh-hero .rh-badge,
.rh-hero h1,
.rh-hero .rh-hero-lede,
.rh-hero .rh-head > p,
.rh-hero .rh-hero-points,
.rh-hero .rh-cta,
.rh-hero .rh-hero-small,
.rh-hero .price-switch-wrap {
  animation: rh-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rh-hero h1 { animation-delay: 0.08s; }
.rh-hero .rh-hero-lede,
.rh-hero .rh-head > p { animation-delay: 0.16s; }
.rh-hero .rh-hero-points,
.rh-hero .price-switch-wrap { animation-delay: 0.24s; }
.rh-hero .rh-cta { animation-delay: 0.32s; }
.rh-hero .rh-hero-small { animation-delay: 0.4s; }
.rh-hero .rh-hub,
.rh-hero .rh-screen,
.rh-hero .rh-form {
  animation: rh-arrive 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@keyframes rh-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes rh-arrive {
  from { opacity: 0; scale: 0.94; }
  to { opacity: 1; scale: 1; }
}

/* The glow behind the hero drifts, slowly. */
.rh-hero::before {
  animation: rh-drift 18s ease-in-out infinite alternate;
}
@keyframes rh-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* The dot in a badge breathes. */
.rh-badge::before {
  animation: rh-ping 2.4s ease-in-out infinite;
}
@keyframes rh-ping {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139, 230, 106, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(139, 230, 106, 0.04); }
}

/* ---------- Glass ---------- */

.rh-tile,
.rh-channel,
.rh-list li,
.rh-linkcard,
.rh-related a {
  position: relative;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Sections ---------- */

.rh-sec {
  position: relative;
  padding: var(--rh-sec-pad) 0;
  background: var(--rh-canvas);
}
/* Every other section is lit from the top, with a hairline that fades at the
   ends, so the page reads as one canvas with depth rather than as stripes. */
.rh-sec-lit {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(63, 209, 197, 0.09), transparent 70%),
    var(--rh-canvas);
}
.rh-sec-lit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1100px, 86%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.rh-head {
  max-width: 46rem;
  margin: 0 auto var(--rh-head-gap);
  text-align: center;
}
.rh-head h2 {
  font-size: clamp(31px, 3.7vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
  text-wrap: balance; /* no single word left alone on the last line */
}
.rh-head p {
  font-size: clamp(18px, 1.25vw, 20.5px);
  line-height: 1.6;
  max-width: 44rem;
  margin: 0 auto;
  text-wrap: pretty;
}
.rh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--rh-line-strong);
  background: var(--rh-glass-strong);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #dfe7f5;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rh-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rh-green);
  box-shadow: 0 0 0 4px rgba(139, 230, 106, 0.18);
}
.rh-note {
  margin: 28px 0 0;
  font-size: 15px;
  text-align: center;
  color: var(--rh-text-dim);
}
.rh-home .rh-note a {
  color: var(--rh-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(139, 230, 106, 0.4);
}
.rh-home .rh-note a:hover {
  color: #fff;
}

/* ---------- Buttons ---------- */

.rh-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9af07a 0%, #67bd45 100%);
  color: #04140a;
  font-family: var(--rh-display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(139, 230, 106, 0.35),
    0 18px 44px -14px rgba(103, 189, 69, 0.75);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rh-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.rh-btn:hover::after {
  left: 130%;
}
.rh-btn-quiet::after {
  display: none;
}
.rh-btn:hover {
  color: #04140a;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(139, 230, 106, 0.5),
    0 22px 54px -12px rgba(103, 189, 69, 0.9);
}
.rh-btn-quiet {
  background: var(--rh-glass-strong);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--rh-line-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rh-btn-quiet:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
/* A way on from a card or a section to its own page. */
.rh-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--rh-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--rh-green);
  text-decoration: none;
}
.rh-more svg {
  transition: transform 0.2s ease;
}
.rh-more:hover {
  color: #fff;
}
.rh-more:hover svg,
.rh-channel:hover .rh-more svg,
.rh-tile:hover .rh-more svg {
  transform: translateX(4px);
}
/* When a card is a link, the whole card is. */
.rh-stretch {
  color: inherit;
  text-decoration: none;
}
.rh-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.rh-stretch:hover {
  color: inherit;
}

/* ---------- Hero ---------- */

.rh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 242px 0 0;   /* clears the top bar and the menu row, with air under them */
  margin-top: -110px; /* slides under the transparent header, as the theme's hero does */
  background: var(--rh-canvas);
}
/* Glows, and a faint grid that fades towards the edges. */
.rh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 50% at 78% 30%, rgba(63, 209, 197, 0.2), transparent 70%),
    radial-gradient(40% 46% at 14% 12%, rgba(103, 189, 69, 0.2), transparent 72%),
    radial-gradient(40% 40% at 60% 100%, rgba(108, 157, 255, 0.12), transparent 70%);
}
.rh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 78%);
}
.rh-hero h1 {
  font-size: clamp(34px, 3.7vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
/* The end of the headline is the point of it, so it carries the gradient. */
.rh-hero-lede {
  font-size: 18.5px;
  max-width: 33rem;
  margin-bottom: 24px;
}
.rh-hero-small {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: var(--rh-text-dim);
}

/* Three points under the lede: a bold lead and a sentence each. */
.rh-hero-points {
  display: grid;
  gap: 14px;
  max-width: 34rem;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.rh-hero-points li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rh-text);
}
.rh-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.6' fill='none' stroke='%2304140a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    linear-gradient(180deg, #9af07a, #67bd45);
}
.rh-hero-points strong {
  font-weight: 600;
  color: #fff;
}

/* The picture: every channel in orbit around one inbox. An illustration of
   the idea, deliberately without names, rooms or dates. */
.rh-hub {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-left: auto;
}
.rh-hub::before {
  content: "";
  position: absolute;
  inset: 12% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(63, 209, 197, 0.3), transparent);
  filter: blur(34px);
}
.rh-hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* The outer ring is the path the channels travel; the inner one turns the
   other way, slowly, so the whole thing reads as working. */
.rh-hub-ring-1 { inset: 4%; }
.rh-hub-ring-2 {
  inset: 15%;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
  animation: rh-spin 70s linear infinite reverse;
}

.rh-hub-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 62%;
  padding: 16px;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  border: 1px solid var(--rh-line-strong);
  background: linear-gradient(180deg, rgba(22, 30, 48, 0.9), rgba(10, 14, 24, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 50px 100px -30px rgba(0, 0, 0, 0.95),
    0 0 90px -30px rgba(63, 209, 197, 0.6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.rh-hub-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}
.rh-hub-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rh-display);
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
}
.rh-hub-head svg {
  color: var(--rh-green);
}
.rh-hub-head em {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-style: normal;
  color: var(--rh-text);
}
.rh-hub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--rh-line);
  background: rgba(255, 255, 255, 0.03);
}
.rh-hub-row + .rh-hub-row {
  margin-top: 8px;
}
.rh-hub-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
}
/* The message itself, as two bars: it stands for any message. */
.rh-hub-lines {
  flex: 1;
  display: grid;
  gap: 7px;
  min-width: 0;
}
.rh-hub-lines i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.rh-hub-lines i + i {
  background: rgba(255, 255, 255, 0.08);
}
.rh-hub-state {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.rh-hub-state-0 { color: #9fd8ff; background: rgba(108, 157, 255, 0.18); }
.rh-hub-state-1 { color: var(--rh-held); background: rgba(242, 182, 90, 0.16); }
.rh-hub-state-2 { color: #9af07a; background: rgba(139, 230, 106, 0.16); }
.rh-hub-state-3 { color: #ffb3c7; background: rgba(240, 103, 159, 0.16); }

/* The channels, travelling round the inbox.
   .rh-orbit turns once every 40s. Each channel sits on an arm set at its own
   angle (--a), and counter-turns at the same speed, so the icon stays upright
   all the way round. Hovering the picture stops it. */
.rh-orbit {
  position: absolute;
  inset: 4%;
  z-index: 1;
  border-radius: 50%;
  animation: rh-spin 40s linear infinite;
}
.rh-orb-arm {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
  pointer-events: none;
}
.rh-orb {
  position: absolute;
  top: -30px;
  left: calc(50% - 30px);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 92%, #fff), color-mix(in srgb, var(--tone) 70%, #000));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 6px color-mix(in srgb, var(--tone) 16%, transparent),
    0 18px 40px -10px color-mix(in srgb, var(--tone) 70%, transparent);
  transform: rotate(calc(-1 * var(--a)));
  animation: rh-unspin 40s linear infinite;
}
.rh-hub:hover .rh-orbit,
.rh-hub:hover .rh-orb,
.rh-hub:hover .rh-hub-ring-2 {
  animation-play-state: paused;
}
@keyframes rh-spin {
  to { transform: rotate(360deg); }
}
@keyframes rh-unspin {
  from { transform: rotate(calc(-1 * var(--a))); }
  to { transform: rotate(calc(-1 * var(--a) - 360deg)); }
}

/* The inbox is alive: each row lights up in turn, as a message arriving. */
.rh-hub-row {
  animation: rh-row 8s ease-in-out infinite;
}
.rh-hub-row:nth-of-type(2) { animation-delay: 0s; }
.rh-hub-row:nth-of-type(3) { animation-delay: 2s; }
.rh-hub-row:nth-of-type(4) { animation-delay: 4s; }
.rh-hub-row:nth-of-type(5) { animation-delay: 6s; }
@keyframes rh-row {
  0%, 22%, 100% {
    border-color: var(--rh-line);
    background: rgba(255, 255, 255, 0.03);
    transform: none;
  }
  6%, 14% {
    border-color: color-mix(in srgb, var(--tone) 60%, transparent);
    background: color-mix(in srgb, var(--tone) 12%, transparent);
    transform: translateX(4px);
  }
}
.rh-hub-chip {
  animation: rh-bob 6s ease-in-out infinite;
}
.rh-hub-chip-booked {
  animation-delay: -3s;
}
@keyframes rh-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.rh-hub-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--rh-line-strong);
  background: rgba(14, 20, 34, 0.88);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 3;
}
.rh-hub-chip svg { color: var(--rh-green); }
/* Side by side under the picture, clear of the path the channels travel. */
.rh-hub { margin-bottom: 64px; }
.rh-hub-chip-fast { right: 50%; margin-right: 6px; bottom: -58px; }
.rh-hub-chip-booked { left: 50%; margin-left: 6px; bottom: -58px; }

/* A few facts, in one glass bar that the hero rests on. */
.rh-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(40px, 4.6vw, 64px);
  border-radius: var(--rh-radius) var(--rh-radius) 0 0;
  border: 1px solid var(--rh-line);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rh-fact {
  padding: 28px 28px 32px;
}
.rh-fact + .rh-fact {
  border-left: 1px solid var(--rh-line);
}
.rh-fact b {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--rh-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  background: var(--rh-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rh-fact span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rh-text);
}

/* ---------- Industries: a slim band under the hero ---------- */

.rh-sec-slim {
  padding: var(--rh-sec-pad-slim) 0;
}
.rh-industries {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.rh-industries-head {
  align-self: center;
  padding-right: 12px;
}
.rh-industries-head h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}
.rh-industries-head p {
  font-size: 15.5px;
  margin: 0;
}
.rh-industry {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border-radius: 20px;
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.rh-industry:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 230, 106, 0.5);
}
.rh-industry .rh-icon {
  margin-bottom: 14px;
  transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.rh-industry:hover .rh-icon {
  transform: scale(1.1) rotate(-6deg);
}
.rh-industry strong {
  font-family: var(--rh-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.rh-industry span {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--rh-text);
}

/* The industries overview: every industry as a card. */
.rh-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.rh-industry-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The questions an industry's customers ask, as the messages they would send. */
.rh-asks {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-asks li {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 14px 20px;
  border-radius: 20px 20px 20px 6px;
  border: 1px solid var(--rh-line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  font-size: 18px;
  line-height: 1.45;
  color: #fff;
}
.rh-asks li:nth-child(2) { margin-left: clamp(0px, 5vw, 56px); }
.rh-asks li:nth-child(3) { margin-left: clamp(0px, 10vw, 112px); }

/* ---------- Channels ---------- */

.rh-channels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-channel {
  --tone: var(--rh-green);
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* Each card is lit in its channel's colour. */
.rh-channel::before,
.rh-tile::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--tone, var(--rh-teal));
  opacity: 0.15;
  filter: blur(46px);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.rh-channel:hover,
.rh-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tone, var(--rh-teal)) 50%, transparent);
}
.rh-channel:hover::before,
.rh-tile:hover::before {
  opacity: 0.3;
}
.rh-icon {
  box-sizing: content-box;
  flex: 0 0 auto;
  padding: 11px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--tone, var(--rh-green));
  background: color-mix(in srgb, var(--tone, var(--rh-green)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--rh-green)) 30%, transparent);
}
.rh-channel h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.rh-channel p {
  flex: 1;
  font-size: 15px;
  margin: 0;
}
/* Who answers on the channel: the agent, your team, or both. */
.rh-who {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.rh-who li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: #d5dcea;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.rh-who .rh-who-ai {
  color: var(--rh-green);
  background: color-mix(in srgb, var(--rh-green) 10%, transparent);
  border-color: color-mix(in srgb, var(--rh-green) 34%, transparent);
}
.rh-channel .rh-more {
  margin-top: 16px;
}

/* A message's path, above the channels: customer, then agent, then a person. */
.rh-flow {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 34px;
  width: fit-content;
  max-width: 100%;
  margin: calc(var(--rh-head-gap) * -0.25) auto clamp(26px, 3vw, 36px);
  padding: 0;
  list-style: none;
}
.rh-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--rh-display);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: #e8edf7;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rh-flow li svg {
  flex: 0 0 auto;
  color: #9fb0cc;
}
.rh-flow .rh-flow-1 {
  border-color: color-mix(in srgb, var(--rh-green) 40%, transparent);
  background: color-mix(in srgb, var(--rh-green) 9%, transparent);
}
.rh-flow .rh-flow-1 svg {
  color: var(--rh-green);
}
/* The line from one step to the next. */
.rh-flow li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 34px;
  height: 1px;
  margin-right: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
}
.rh-channel-website   { --tone: #4fc3e8; }
.rh-channel-whatsapp  { --tone: #3fd17a; }
.rh-channel-instagram { --tone: #f0679f; }
.rh-channel-messenger { --tone: #6c9dff; }
.rh-channel-email     { --tone: #f2b65a; }

/* ---------- Platform: a bento of the parts ---------- */

.rh-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.rh-tile {
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  padding: clamp(22px, 2.4vw, 32px);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.rh-tile-7 { grid-column: span 7; }
.rh-tile-5 { grid-column: span 5; }
.rh-tile-4 { grid-column: span 4; }
.rh-tile h3 {
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}
.rh-tile p {
  font-size: 16px;
  margin: 0;
  max-width: 34rem;
}
.rh-tile .rh-more {
  margin-top: 16px;
}
/* The screenshot bleeds off the bottom corner of its tile. Every tile shows the
   same height of screen, from the top left, so the grid stays even. */
.rh-tile-shot {
  display: block;
  width: calc(100% + clamp(22px, 2.4vw, 32px));
  max-width: none;
  height: clamp(220px, 23vw, 320px);
  object-fit: cover;
  object-position: left top;
  margin: 26px 0 calc(-1 * clamp(22px, 2.4vw, 32px)) 0;
  border-radius: 14px 0 0 0;
  border: 1px solid var(--rh-line-strong);
  border-right: 0;
  border-bottom: 0;
  box-shadow: 0 -20px 60px -30px rgba(63, 209, 197, 0.5);
  transform-origin: left top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rh-tile:hover .rh-tile-shot {
  transform: scale(1.03);
}
.rh-channel .rh-icon,
.rh-tile .rh-icon {
  transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.rh-channel:hover .rh-icon,
.rh-tile:hover .rh-icon {
  transform: scale(1.1) rotate(-6deg);
}
.rh-tile-text {
  flex: 1;
}
/* The full-width tile: words on the left, its screen on the right. */
.rh-tile-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.rh-tile-wide .rh-tile-shot {
  width: calc(100% + clamp(22px, 2.4vw, 32px));
  height: clamp(200px, 20vw, 280px);
  margin: 0 0 calc(-1 * clamp(22px, 2.4vw, 32px)) 0;
  align-self: end;
}

/* ---------- AI spotlight: three features beside a picture of the agent ---------- */

.rh-spot {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.rh-spot h2 {
  font-size: clamp(31px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 14px;
}
.rh-home .rh-spot-lede {
  font-size: 18px;
  max-width: 34rem;
  margin: 0 0 30px;
}
.rh-features {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-features li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.rh-features li:hover {
  transform: translateX(4px);
  border-color: rgba(139, 230, 106, 0.45);
}
.rh-feature-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: #04140a;
  background: var(--rh-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 30px -12px rgba(63, 209, 197, 0.7);
}
.rh-features h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}
.rh-features p {
  font-size: 15.5px;
  margin: 0;
}
.rh-core-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
/* The agent, as a lit core with its three habits around it. */
.rh-core {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
}
.rh-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.rh-core-ring:nth-child(2) { inset: 13%; border-color: rgba(63, 209, 197, 0.22); }
.rh-core-ring:nth-child(3) { inset: 26%; border-style: dashed; border-color: rgba(139, 230, 106, 0.3); }
.rh-core-orb {
  position: absolute;
  inset: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50%;
  color: #04140a;
  background: radial-gradient(circle at 32% 26%, #d4ffc2 0%, #8be66a 30%, #3fd1c5 68%, #4a7fe0 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 0 10px rgba(139, 230, 106, 0.08),
    0 0 90px 10px rgba(63, 209, 197, 0.45);
  animation: rh-breathe 5s ease-in-out infinite;
}
.rh-core-orb b {
  font-family: var(--rh-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
@keyframes rh-breathe {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 0 10px rgba(139, 230, 106, 0.08), 0 0 90px 10px rgba(63, 209, 197, 0.45); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 0 18px rgba(139, 230, 106, 0.05), 0 0 120px 22px rgba(63, 209, 197, 0.6); }
}
/* The agent as a person: a cut-out figure standing in the glow, its lower edge
   fading into the page. Used when assets/images/ai-agent.png exists. */
.rh-persona {
  position: relative;
  width: min(100%, 430px);
}
.rh-persona::before {
  content: "";
  position: absolute;
  inset: 6% -6% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(63, 209, 197, 0.42), rgba(139, 230, 106, 0.14) 60%, transparent);
  filter: blur(26px);
}
.rh-persona .rh-core-ring { inset: 2% -8% 6%; }
.rh-persona .rh-core-ring:nth-child(2) { inset: 12% 2% 16%; border-style: dashed; border-color: rgba(139, 230, 106, 0.28); }
.rh-persona .rh-core-ring:nth-child(2),
.rh-core .rh-core-ring:nth-child(3) {
  animation: rh-spin 60s linear infinite;
}
.rh-persona::before {
  animation: rh-glow 6s ease-in-out infinite;
}
@keyframes rh-glow {
  0%, 100% { opacity: 0.8; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}
.rh-core-chip {
  animation: rh-bob 6s ease-in-out infinite;
}
.rh-core-chip-1 { animation-delay: -2s; }
.rh-core-chip-2 { animation-delay: -4s; }
.rh-persona img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  animation: rh-bob 7s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.rh-persona .rh-core-chip-0 { left: -10%; top: 20%; }
.rh-persona .rh-core-chip-1 { right: -12%; top: 46%; }
.rh-persona .rh-core-chip-2 { left: -6%; bottom: 16%; }
.rh-core-chip {
  position: absolute;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rh-line-strong);
  background: rgba(14, 20, 34, 0.9);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.rh-core-chip-0 { left: -2%; top: 14%; }
.rh-core-chip-1 { right: -4%; top: 44%; }
.rh-core-chip-2 { left: 4%; bottom: 10%; }

/* ---------- Three plain cards in a row ---------- */

.rh-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-list li {
  padding: clamp(22px, 2.4vw, 30px);
}
.rh-list h3,
.rh-list h2 {
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}
.rh-list p {
  font-size: 16px;
  margin: 0;
}

.rh-list .rh-icon {
  margin-bottom: 16px;
}

/* ---------- What happens, in order ---------- */

.rh-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rh-step {
  position: relative;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
}
.rh-step-n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-family: var(--rh-display);
  font-size: 16px;
  font-weight: 700;
  color: #06140a;
  background: var(--rh-grad);
}
/* The line from one step's number to the next card. */
.rh-step + .rh-step::before {
  content: "";
  position: absolute;
  top: calc(clamp(22px, 2.4vw, 28px) + 19px);
  right: 100%;
  width: 17px;
  height: 1px;
  background: var(--rh-line-strong);
}
.rh-step h3 {
  font-size: clamp(19px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.rh-step p {
  font-size: 16px;
  margin: 0;
}

/* ---------- A call to book a demo, part-way down a page ---------- */

.rh-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 16px;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px);
  border-radius: var(--rh-radius);
  border: 1px solid color-mix(in srgb, var(--rh-green) 30%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--rh-green) 10%, transparent), color-mix(in srgb, var(--rh-teal) 5%, transparent));
}
.rh-band p {
  flex: 1 1 22rem;
  max-width: 48rem;
  margin: 0;
  font-size: 16.5px;
}
.rh-band strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--rh-display);
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.25;
  color: #fff;
}

/* ---------- Solutions: two lists of links ---------- */

.rh-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.rh-linkcard {
  padding: clamp(24px, 3vw, 36px);
}
.rh-linkcard h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
}
.rh-linkcard h3 svg {
  color: var(--rh-green);
}
.rh-linkcard ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-linkcard li + li {
  border-top: 1px solid var(--rh-line);
}
.rh-linkcard a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 14px 32px;
  font-size: 17px;
  color: #e6ecf7;
  text-decoration: none;
  transition: color 0.2s ease;
}
.rh-linkcard a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.6' fill='none' stroke='%238be66a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    rgba(139, 230, 106, 0.14);
}
.rh-linkcard a svg {
  color: var(--rh-text-dim);
  transition: transform 0.2s ease, color 0.2s ease;
}
.rh-linkcard a:hover {
  color: #fff;
}
.rh-linkcard a:hover svg {
  color: var(--rh-green);
  transform: translateX(4px);
}

/* ---------- Checklists ---------- */

.rh-ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 16.5px;
  line-height: 1.45;
  color: #e6ecf7;
}
.rh-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.6' fill='none' stroke='%238be66a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    rgba(139, 230, 106, 0.14);
}

.rh-ticks-1 {
  grid-template-columns: 1fr;
  margin-top: 22px;
}
.rh-ticks-1 li {
  font-size: 15.5px;
}

/* ---------- A screen, with a glow behind it ---------- */

.rh-screen {
  position: relative;
  margin: 0;
  padding: 8px;
  border-radius: 22px;
  border: 1px solid var(--rh-line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 60px 120px -50px rgba(0, 0, 0, 0.95),
    0 0 120px -50px rgba(63, 209, 197, 0.55);
}
/* The screenshot under the headline, wide enough to read. */
.rh-screen-wide {
  max-width: 1120px;
  margin: clamp(32px, 4vw, 52px) auto 0;
}
.rh-screen-wide figcaption {
  text-align: center;
}
.rh-screen figcaption {
  padding: 6px 10px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--rh-text);
}
.rh-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* ---------- Integrations: what customers write on, ConversaAI, what it works with ---------- */

.rh-wire {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "in-label .    out-label"
    "in       core out";
  align-items: center;
  gap: 12px clamp(70px, 9vw, 150px);
  max-width: 1120px;
  margin: 0 auto;
}
.rh-wire-label-in  { grid-area: in-label; }
.rh-wire-label-out { grid-area: out-label; }
.rh-wire-in   { grid-area: in; }
.rh-wire-out  { grid-area: out; }
.rh-wire-core { grid-area: core; }
.rh-wire-label,
.rh-wire-side {
  width: min(100%, 340px);
}
.rh-wire-label-in, .rh-wire-in { justify-self: end; }
.rh-wire-label-out, .rh-wire-out { justify-self: start; }
.rh-wire-label {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rh-text-dim);
}
.rh-wire-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-wire-node {
  --tone: var(--rh-teal);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px 11px 11px;
  border-radius: 18px;
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), var(--rh-canvas);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--rh-text);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.rh-wire-node .rh-icon {
  margin: 0;
  padding: 9px;
  border-radius: 12px;
}
.rh-wire-node strong {
  display: block;
  font-family: var(--rh-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
a.rh-wire-node:hover {
  color: var(--rh-text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tone) 55%, transparent);
}
.rh-wire-core {
  position: relative;
  z-index: 1;
  text-align: center;
}
/* The name hangs below the mark, so the mark itself sits level with the
   middle of the two lists and the lines meet it straight on. */
.rh-wire-core p {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  margin: 0;
  transform: translateX(-50%);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--rh-text);
}
.rh-wire-core-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(160deg, #16202b 0%, #0a1017 100%);
  box-shadow: 0 0 0 10px rgba(63, 209, 197, 0.06), 0 0 0 22px rgba(63, 209, 197, 0.03), 0 30px 80px -18px rgba(63, 209, 197, 0.5);
}
.rh-wire-core-mark::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--rh-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.8;
}
.rh-wire-core-mark img {
  width: 66px;
  height: auto;
}
.rh-wire-core strong {
  display: block;
  font-family: var(--rh-display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
/* The lines are drawn by resort-home.js; with no script the three parts simply
   stand side by side. */
.rh-wire-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rh-wire-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.25;
}
/* A message travelling along each line, towards ConversaAI and on from it. */
.rh-wire-pulse {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 100;
  animation: rh-wire-flow 3.6s linear infinite;
}
@keyframes rh-wire-flow {
  to { stroke-dashoffset: 0; }
}

/* ---------- The problem, and the answer to it ---------- */

.rh-pains,
.rh-pains-cols {
  margin: 0 auto;
}
.rh-pains-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 52px;
  margin-bottom: 12px;
  padding: 0 26px;
  font-family: var(--rh-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--rh-text);
}
.rh-pains-cols span + span {
  color: var(--rh-green);
}
.rh-pains {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}
.rh-pain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: stretch;
}
.rh-pain-before,
.rh-pain-after {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 20px;
  border: 1px solid var(--rh-line);
}
.rh-pain p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}
.rh-pain-before {
  background: rgba(255, 255, 255, 0.022);
}
.rh-pain-before strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--rh-display);
  font-size: clamp(18.5px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.rh-pain-after {
  align-items: center;
  border-color: color-mix(in srgb, var(--rh-green) 30%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--rh-green) 10%, transparent), color-mix(in srgb, var(--rh-teal) 5%, transparent));
}
.rh-pain-after p {
  font-size: clamp(17.5px, 1.25vw, 19.5px);
  font-weight: 500;
  color: #eef7ea;
}
.rh-pain-mark {
  box-sizing: content-box;
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 7px;
  border-radius: 50%;
  color: #f29a8b;
  background: rgba(242, 154, 139, 0.12);
}
.rh-pain-after .rh-pain-mark {
  margin-top: 0;
  color: #0b1a08;
  background: var(--rh-green);
}
.rh-pain-arrow {
  display: grid;
  place-items: center;
  color: var(--rh-text-dim);
}

/* ---------- Pricing: the theme's cards, re-skinned ---------- */

.rh-home .price-switch-wrap {
  justify-content: center;
  margin-bottom: 36px;
}
.rh-home .price-box {
  height: 100%;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rh-home .price-box .price-value-box {
  background: transparent;
}
.rh-home .price-box .price {
  font-family: var(--rh-display);
  letter-spacing: -0.04em;
}
.rh-home .price-box .price-plan {
  font-family: var(--rh-display);
}
.rh-home .price-box.ca-plan-featured {
  border-color: rgba(139, 230, 106, 0.5);
  background: linear-gradient(180deg, rgba(139, 230, 106, 0.12), rgba(255, 255, 255, 0.02) 46%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 40px 90px -40px rgba(103, 189, 69, 0.6);
}

/* The theme ships an older price switch that hides every .price and then looks
   for .price.monthly / .price.yearly, which these cards do not use -- so a
   click on Yearly hid the prices altogether. The cards are switched by d-none
   (see the billing toggle in main.js); .hide is ignored here. */
.rh-home .price_wrapper .price.hide:not(.d-none) {
  display: block;
}

/* ---------- Questions ---------- */

.rh-faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.rh-faq .rh-head {
  margin: 0;
  text-align: left;
}
.rh-faq .rh-head p {
  margin: 0;
}
.rh-home .faq-wrap .accordion-item {
  margin: 0 0 10px;
  border: 1px solid var(--rh-line);
  border-radius: 18px;
  background: var(--rh-glass);
  overflow: hidden;
}
.rh-home .faq-wrap .accordion-button {
  padding: 20px 56px 20px 22px;
  background: transparent;
  box-shadow: none;
  font-family: var(--rh-display);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #fff;
}
.rh-home .faq-wrap .accordion-item .accordion-body {
  padding: 0 22px 22px;
  max-width: 46rem;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--rh-text);
}

/* ---------- Customers: their reviews, and who they are ---------- */

.rh-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
}
.rh-review blockquote {
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #e8edf7;
}
.rh-review-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rh-line);
  font-size: 14.5px;
  color: var(--rh-text);
}
.rh-review-by strong {
  font-family: var(--rh-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.rh-clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 18px;
}
.rh-reviews + .rh-clients {
  margin-top: clamp(26px, 3vw, 38px);
}
.rh-clients p {
  margin: 0;
  font-size: 15px;
  color: var(--rh-text-dim);
}
.rh-clients ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-clients li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--rh-display);
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rh-clients li svg { color: var(--rh-teal); }
.rh-clients li a { color: inherit; text-decoration: none; }
.rh-clients li a:hover { color: var(--rh-green); }
.rh-clients li em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--rh-text-dim);
}

/* ---------- The close ---------- */

.rh-close-card {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 5.4vw, 76px) clamp(24px, 5vw, 72px);
  border-radius: 32px;
  border: 1px solid var(--rh-line-strong);
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(139, 230, 106, 0.22), transparent 70%),
    radial-gradient(50% 80% at 90% 100%, rgba(108, 157, 255, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.rh-close-card h2 {
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  max-width: 15em;
  margin: 0 auto 18px;
  text-wrap: balance;
}
.rh-close-card p {
  font-size: 18.5px;
  max-width: 40rem;
  margin: 0 auto 30px;
  text-wrap: pretty;
}
.rh-close-card .rh-cta {
  justify-content: center;
}
.rh-close-card .rh-note {
  margin: 26px 0 0;
}

/* ==========================================================================
   Product, channel and solution pages.
   ========================================================================== */

.rh-hero-detail {
  padding-bottom: var(--rh-sec-pad);
}
.rh-hero-detail h1 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
}
/* A page that opens with a centred heading (pricing). */
.rh-hero-center h1 {
  max-width: 16em;
  margin-left: auto;
  margin-right: auto;
}
.rh-hero-center .rh-head {
  margin-bottom: 28px;
}
.rh-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.rh-detail-top.is-plain {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
  text-align: center;
}
.rh-detail-top.is-plain .rh-hero-lede {
  margin-left: auto;
  margin-right: auto;
}
.rh-detail-top.is-plain .rh-cta {
  justify-content: center;
}
.rh-list-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rh-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* Four of them: one row on a desktop, two by two below that. */
.rh-related-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rh-related a {
  display: block;
  padding: 24px;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.rh-related a:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 230, 106, 0.45);
}
.rh-related span {
  display: block;
  margin-bottom: 10px;
  font-size: 14.5px;
  color: var(--rh-green);
}
.rh-related strong {
  display: block;
  font-family: var(--rh-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ---------- Book a demo: the form ---------- */

.rh-form {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  border: 1px solid var(--rh-line-strong);
  background: linear-gradient(180deg, rgba(22, 30, 48, 0.9), rgba(10, 14, 24, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 50px 100px -40px rgba(0, 0, 0, 0.95),
    0 0 110px -40px rgba(63, 209, 197, 0.6);
  scroll-margin-top: 130px;
}
.rh-form h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.rh-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.rh-field {
  display: block;
  margin: 0;
}
.rh-field.is-wide {
  grid-column: 1 / -1;
}
.rh-field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: #e6ecf7;
}
.rh-field em {
  font-style: normal;
  font-weight: 400;
  color: var(--rh-text-dim);
}
.rh-field input,
.rh-field select,
.rh-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--rh-line-strong);
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rh-field textarea {
  resize: vertical;
  min-height: 92px;
}
/* The select keeps the look of the inputs, with its own caret. */
.rh-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23b8c2d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px 18px no-repeat,
    rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.rh-field select option {
  background: #0d1320;
  color: #fff;
}
.rh-field input::placeholder {
  color: var(--rh-text-dim);
}
.rh-field input:focus,
.rh-field select:focus,
.rh-field textarea:focus {
  outline: none;
  border-color: var(--rh-green);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(139, 230, 106, 0.18);
}
.rh-field.has-error input,
.rh-field.has-error select {
  border-color: #ff8f8f;
}
.rh-field small.rh-hint {
  color: var(--rh-text-dim);
}
.rh-field small {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: #ffabab;
}
/* ---------- Booking a demo: a day, then a time ---------- */

.rh-sched {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.rh-sched legend {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: #e6ecf7;
}
/* With the calendar drawn, the plain list is still the field that is sent;
   it only stops being what the visitor sees. */
.rh-sched.is-enhanced .rh-sched-list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.rh-sched-ui {
  display: grid;
  gap: 14px;
}
.rh-cal,
.rh-slots {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--rh-line-strong);
  background: rgba(255, 255, 255, 0.04);
}
.rh-sched.has-error .rh-cal,
.rh-sched.has-error .rh-slots {
  border-color: #ff8f8f;
}
.rh-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rh-cal-head strong {
  font-family: var(--rh-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.rh-cal-nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--rh-line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rh-cal-nav[data-cal-prev] svg {
  transform: rotate(180deg);
}
.rh-cal-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--rh-green);
}
.rh-cal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.rh-cal-week,
.rh-cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.rh-cal-week {
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--rh-text-dim);
}
.rh-cal-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.82;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(139, 230, 106, 0.1);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
button.rh-cal-day:hover {
  border-color: var(--rh-green);
  background: rgba(139, 230, 106, 0.2);
}
/* A day that has gone, or has nothing left: plainly not something to press. */
.rh-cal-day.is-off {
  background: none;
  font-weight: 400;
  color: rgba(226, 232, 245, 0.25);
  cursor: default;
}
.rh-cal-day.is-on,
.rh-slot.is-on {
  border-color: transparent;
  background: var(--rh-grad);
  color: #04140a;
}
.rh-home .rh-slots-title {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--rh-text);
}
.rh-slots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 196px;
  overflow-y: auto;
}
.rh-slots-list:empty {
  display: none;
}
.rh-slot {
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--rh-line-strong);
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rh-slot:hover {
  border-color: var(--rh-green);
  background: rgba(139, 230, 106, 0.14);
}
.rh-cal-day:focus-visible,
.rh-slot:focus-visible,
.rh-cal-nav:focus-visible {
  outline: 2px solid var(--rh-green);
  outline-offset: 2px;
}
.rh-home .rh-sched-note,
.rh-home .rh-sched-empty {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--rh-text-dim);
}
.rh-sched-error {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: #ffabab;
}

.rh-home .rh-form-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 143, 143, 0.4);
  background: rgba(255, 107, 107, 0.1);
  font-size: 15px;
  color: #ffc9c9;
}
.rh-form .rh-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
}
.rh-form-done {
  padding: 28px 0;
  text-align: center;
}
.rh-form-done svg {
  box-sizing: content-box;
  padding: 14px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #04140a;
  background: var(--rh-grad);
}
.rh-form-done h2 {
  margin-bottom: 8px;
}
.rh-home .rh-form-done p {
  margin: 0;
  font-size: 17px;
}
.rh-home .rh-hero-small a {
  color: var(--rh-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- About and Contact ---------- */

.rh-facts-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(36px, 4vw, 56px);
  text-align: left;
}
.rh-prose p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}
.rh-prose p + p {
  margin-top: 18px;
}
.rh-reach-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
.rh-reach {
  display: grid;
  gap: 10px;
  max-width: 30rem;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.rh-reach li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--rh-line);
  background: var(--rh-glass);
  font-size: 16px;
  color: #e6ecf7;
}
.rh-reach svg {
  box-sizing: content-box;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 12px;
  color: var(--rh-green);
  background: rgba(139, 230, 106, 0.12);
}
.rh-reach small {
  display: block;
  font-size: 13px;
  color: var(--rh-text-dim);
}
.rh-home .rh-reach a {
  color: #fff;
  text-decoration: none;
}
.rh-home .rh-reach a:hover {
  color: var(--rh-green);
}
.rh-field.has-error textarea {
  border-color: #ff8f8f;
}

/* ==========================================================================
   .rh-legacy -- pages still written in the old theme's markup (terms,
   privacy, and the two ad landing pages clinic.php and resort.php). These
   rules dress that markup in the current design, so no page looks like it
   belongs to a different site. Rebuild a page in the rh- components and it no
   longer needs them.
   ========================================================================== */

.rh-legacy .bg_color_deep_blue,
.rh-legacy .bg_color_black_three {
  background-color: var(--rh-canvas) !important;
}
.rh-legacy section + section {
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  background-size: min(1100px, 86%) 1px;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Sentence case, as on the rest of the site: the theme capitalises every word
   of a title and upper-cases every small label. */
.rh-legacy h1,
.rh-legacy h2,
.rh-legacy h3,
.rh-legacy .section-title .title,
.rh-legacy .text-uppercase {
  text-transform: none !important;
}
.rh-legacy .ca-hero-note {
  text-align: left;
}

/* The page header: the theme's stock photo goes, the lit canvas comes in. */
.rh-legacy .breadcrumb-area,
.rh-legacy .hero-area-cs {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(46% 60% at 80% 20%, rgba(63, 209, 197, 0.18), transparent 70%),
    radial-gradient(40% 56% at 14% 10%, rgba(103, 189, 69, 0.2), transparent 72%),
    var(--rh-canvas) !important;
}
.rh-legacy .breadcrumb-area {
  padding: 142px 0 var(--rh-sec-pad);
}
.rh-legacy .breadcrumb-area::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(70% 80% at 50% 30%, #000 20%, transparent 78%);
  z-index: -1;
}
.rh-legacy .breadcrumb-info .breadcrumb-nav,
.rh-legacy .ca-eyebrow,
.rh-legacy .section-title .gradient-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rh-line-strong);
  background: var(--rh-glass-strong);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #dfe7f5;
}
.rh-legacy .breadcrumb-info .breadcrumb-nav a {
  color: var(--rh-text);
}
.rh-legacy .breadcrumb-info h1,
.rh-legacy .hero-info-cs h1 {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.rh-legacy .section-title .title,
.rh-legacy .section-title h2 {
  font-size: clamp(29px, 3.3vw, 46px);
  font-weight: 700;
  line-height: 1.12;
}
.rh-legacy .ca-grad {
  background: var(--rh-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Buttons become the pill. */
.rh-legacy .common-btn.bg-purple-style,
.rh-legacy .price-info-btn {
  border-radius: 999px;
  background: linear-gradient(180deg, #9af07a 0%, #67bd45 100%);
  color: #04140a !important;
  font-family: var(--rh-display);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(139, 230, 106, 0.35),
    0 18px 44px -14px rgba(103, 189, 69, 0.75);
  transition: transform 0.2s ease;
}
.rh-legacy .common-btn.bg-purple-style:hover,
.rh-legacy .price-info-btn:hover {
  background: linear-gradient(180deg, #a9f58c 0%, #72c94f 100%);
  transform: translateY(-2px);
}
.rh-legacy .common-btn.border-style {
  border-radius: 999px;
  border: 0;
  background: var(--rh-glass-strong);
  box-shadow: inset 0 0 0 1px var(--rh-line-strong);
  font-family: var(--rh-display);
  font-weight: 700;
}

/* Cards become glass. */
.rh-legacy .ca-step,
.rh-legacy .ca-compare,
.rh-legacy .ca-usecase,
.rh-legacy .table-content {
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rh-legacy .ca-compare-good {
  border-color: rgba(139, 230, 106, 0.45);
  background: linear-gradient(180deg, rgba(139, 230, 106, 0.12), rgba(139, 230, 106, 0.02));
}
.rh-legacy .ca-step-num {
  border-radius: 12px;
  border: 1px solid var(--rh-line-strong);
  background: var(--rh-glass-strong);
  color: #fff;
  font-family: var(--rh-display);
  font-weight: 700;
}
.rh-legacy .ca-chat-hero {
  border-radius: 28px;
  border: 1px solid var(--rh-line-strong);
  background: linear-gradient(180deg, rgba(20, 28, 44, 0.92), rgba(10, 14, 24, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 0 90px -40px rgba(63, 209, 197, 0.6);
}

/* Legal text: a readable column and a sticky list of contents. */
.rh-legacy .terms-area {
  padding-top: clamp(48px, 6vw, 80px) !important;
}
.rh-legacy .condition-content {
  scroll-margin-top: 120px;
}
.rh-legacy .condition-content + .condition-content {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--rh-line);
}
.rh-legacy .terms-title {
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 14px;
}
.rh-legacy .terms-desc {
  font-size: 17px;
  line-height: 1.7;
  max-width: 44rem;
}
.rh-legacy .table-content {
  position: sticky;
  top: 110px;
  padding: 24px;
}
.rh-legacy .table-content .terms-title {
  font-size: 17px;
  margin-bottom: 12px;
}
.rh-legacy .table-content li + li {
  margin-top: 8px;
}
.rh-legacy .table-content a {
  font-size: 15px;
  line-height: 1.45;
  color: var(--rh-text);
  text-decoration: none;
}
.rh-legacy .table-content a:hover {
  color: var(--rh-green);
}
.rh-legacy .terms-desc a,
.rh-legacy .condition-content a {
  color: var(--rh-green);
}

/* ---------- Bangla ----------
   Anek Bangla for everything: the Latin faces have no Bangla and would fall
   back to whatever the device has. Bangla needs more line height and no
   negative tracking -- its vowel signs sit above and below the line. */
html[lang="bn"] .rh-home,
html[lang="bn"] .rh-home p,
html[lang="bn"] .rh-home li,
html[lang="bn"] .rh-home span,
html[lang="bn"] .rh-home a,
html[lang="bn"] .rh-home .accordion-body {
  font-family: var(--rh-bangla);
}
html[lang="bn"] .rh-home h1,
html[lang="bn"] .rh-home h2,
html[lang="bn"] .rh-home h3,
html[lang="bn"] .rh-home .rh-btn,
html[lang="bn"] .rh-home .rh-more,
html[lang="bn"] .rh-home .rh-industry strong,
html[lang="bn"] .rh-home .accordion-button {
  font-family: var(--rh-bangla);
  letter-spacing: 0;
}
html[lang="bn"] .rh-hero h1 {
  font-size: clamp(31px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.3;
}
html[lang="bn"] .rh-hero-detail h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.32;
}
html[lang="bn"] .rh-head h2,
html[lang="bn"] .rh-spot h2,
html[lang="bn"] .rh-close-card h2 {
  font-weight: 700;
  line-height: 1.34;
}
html[lang="bn"] .rh-tile h3,
html[lang="bn"] .rh-list h3,
html[lang="bn"] .rh-list h2 {
  line-height: 1.4;
}
/* Gradient text is clipped to the glyph box, which cuts Bangla's vowel signs. */
html[lang="bn"] .rh-grad,
html[lang="bn"] .rh-fact b {
  padding: 0.14em 0;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1199.98px) {
  .rh-channels { grid-template-columns: repeat(3, 1fr); }
  .rh-steps, .rh-steps-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-related-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-step + .rh-step::before { display: none; }
  .rh-flow { gap: 22px; }
  .rh-flow li { font-size: 14px; padding: 10px 14px; gap: 8px; }
  .rh-flow li + li::before { width: 22px; }
  .rh-industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The logo is taller against a narrower bar: the hero starts lower. */
  .rh-hero { padding-top: 236px; }
  /* A narrower picture: the inbox shrinks so the channels still pass round it. */
  .rh-hub-panel { width: 56%; padding: 12px; }
  .rh-hub-row { padding: 9px 10px; gap: 9px; }
  .rh-hub-state { font-size: 11px; padding: 2px 8px; }
  .rh-industries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rh-industries-head { grid-column: 1 / -1; text-align: center; padding: 0 0 8px; }
}
@media (max-width: 991.98px) {
  /* The header floats over the page on small screens too; clear it. */
  .rh-hero { margin-top: -110px; padding-top: 226px; }
  .rh-hub { margin: 24px auto 0; }
  .rh-facts { grid-template-columns: repeat(2, 1fr); }
  .rh-facts-3 { grid-template-columns: 1fr; }
  .rh-facts-3 .rh-fact + .rh-fact { border-left: 0; border-top: 1px solid var(--rh-line); }
  .rh-legacy .table-content { position: static; }
  .rh-fact:nth-child(3) { border-left: 0; }
  .rh-fact:nth-child(n + 3) { border-top: 1px solid var(--rh-line); }
  .rh-tile, .rh-tile-7, .rh-tile-5, .rh-tile-4 { grid-column: span 12; }
  .rh-tile-wide { grid-template-columns: 1fr; }
  .rh-tile-shot { height: auto; max-height: 300px; }
  .rh-faq, .rh-detail-top, .rh-links, .rh-spot { grid-template-columns: 1fr; }
  .rh-list, .rh-related { grid-template-columns: 1fr; }
  .rh-channels { grid-template-columns: repeat(2, 1fr); }
  /* The integrations stand one above the other, joined by a short straight line. */
  .rh-wire { grid-template-columns: 1fr; grid-template-areas: "in-label" "in" "core" "out-label" "out"; max-width: 640px; }
  .rh-wire-lines { display: none; }
  .rh-wire-label, .rh-wire-side { width: 100%; }
  .rh-wire-label { text-align: center; }
  .rh-wire-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-wire-core { display: flex; flex-direction: column; align-items: center; padding: 50px 0 46px; }
  .rh-wire-core p { position: static; transform: none; margin-top: 14px; }
  .rh-wire-core::before, .rh-wire-core::after { content: ""; position: absolute; left: 50%; width: 1px; height: 28px; background: rgba(255, 255, 255, 0.22); }
  .rh-wire-core::before { top: 10px; }
  .rh-wire-core::after { bottom: 8px; }
  /* The problem above, its answer below it. */
  .rh-pains-cols { display: none; }
  .rh-pain { grid-template-columns: 1fr; }
  .rh-pain-arrow { height: 26px; }
  .rh-pain-arrow svg { transform: rotate(90deg); }
  .rh-pains { gap: 24px; }
  /* The path turns to run down the page. */
  .rh-flow { flex-direction: column; align-items: center; gap: 22px; }
  .rh-flow li { font-size: 15px; padding: 11px 18px; white-space: normal; border-radius: 18px; }
  .rh-flow li + li::before { top: auto; right: auto; bottom: 100%; left: 50%; width: 1px; height: 22px; margin: 0 0 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4)); }
  .rh-industry-grid, .rh-industry-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  /* On a phone the two floating labels go, and the channels pass behind the
     corners of the inbox as they travel. */
  .rh-hub-panel { width: 70%; padding: 10px; border-radius: 20px; }
  .rh-hub-row { gap: 8px; padding: 9px 8px; }
  .rh-hub-avatar { width: 28px; height: 28px; }
  .rh-hub-state { font-size: 10.5px; padding: 2px 7px; }
  .rh-hub-chip { display: none; }
  .rh-hub { margin-bottom: 8px; }
  .rh-orbit { inset: 1%; }
  .rh-hub-ring-1 { inset: 1%; }
  .rh-orb { top: -20px; left: calc(50% - 20px); width: 40px; height: 40px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 4px color-mix(in srgb, var(--tone) 16%, transparent); }
  .rh-orb svg { width: 18px; height: 18px; }
  .rh-core-chip { font-size: 12.5px; padding: 6px 12px; }
  /* The figure is smaller on a phone, and its labels stay inside the screen. */
  .rh-persona { width: min(78%, 300px); }
  .rh-persona .rh-core-chip-0 { left: -14%; top: 16%; }
  .rh-persona .rh-core-chip-1 { right: -14%; top: 46%; }
  .rh-persona .rh-core-chip-2 { left: -10%; bottom: 14%; }
  .rh-facts, .rh-channels, .rh-ticks, .rh-list-2, .rh-form-grid, .rh-wire-side, .rh-steps, .rh-steps-3 { grid-template-columns: 1fr; }
  .rh-pain-before, .rh-pain-after { padding: 18px; }
  .rh-fact + .rh-fact { border-left: 0; border-top: 1px solid var(--rh-line); }
  .rh-cta .rh-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-home *,
  .rh-home *::before,
  .rh-home *::after {
    animation: none !important;
    transition: none !important;
  }
  .rh-orb { transform: rotate(calc(-1 * var(--a))); }
  .rh-wire-pulse { display: none; }
  .rh-btn:hover, .rh-channel:hover, .rh-tile:hover, .rh-related a:hover, .rh-features li:hover { transform: none; }
}