/* ============================================================================
   RecLite page — what is true of this page only
   ---------------------------------------------------------------------------
   The nine-section rhythm comes from product-page.css, shared with
   SmartComply, SmartBot and Website Design. Everything here belongs to
   RecLite: the banner's benefit row, the two linked package panels, the
   resident and staff lists, the two setup routes with their support strip,
   the optional cards with their tags, and the FAQ's side-by-side layout.
   ========================================================================= */

/* NOTE ON SCOPING. Every page stylesheet ends up in one bundle, so a bare
   `.sc-…` rule written here would reach SmartComply, SmartBot and Website
   Design as well. Anything this page changes about a shared class is therefore
   scoped by this page's own id or by an `rl-` class. The banner wash is the
   one exception, and it moved to product-page.css because all four pages that
   want it were declaring it separately. */

.rl-hero {
  padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.rl-hero__art {
  display: block;
  width: 100%;
  height: auto;
}

/* Kept visible but subordinate to the two actions above it, as the guide
   asks — a rule above it separates it without making it a third button. */
.rl-hero__aside {
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- The banner's benefit row ------------------------------------------------ */

.rl-benefits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.4rem + 0.6vw, 1.25rem);
  margin: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.rl-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding-inline: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}

.rl-benefit img {
  display: block;
  width: 3rem;
  height: 3rem;
}

/* Rules between them rather than around them, as the guide draws it. */
.rl-benefit+.rl-benefit {
  border-left: 1px solid var(--border);
}

/* Two by two on phones, which is the guide's mobile layout. */
@media (max-width: 719px) {
  .rl-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
  }

  .rl-benefit:nth-child(odd) {
    border-left: 0;
  }
}

/* --- 2. Cards that explain rather than navigate ---------------------------------
   The guide is explicit that this section's cards carry no link arrow and no
   hover behaviour, so the shared card's lift is switched off for them.     */

.sc-card--static:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* --- 3. The two linked package panels -------------------------------------------
   Comparable prominence, as the guide requires, with the connector between
   them turning vertical when they stack.                                   */

.rl-pair {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .rl-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rl-pair__side {
  position: relative;
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

.rl-pair__k {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: var(--blue-700);
}

.rl-pair__k img {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
}

.rl-pair__link {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--blue-200), var(--e-1);
  color: var(--blue-600);
  /* Stacked: the link sits under the first panel, joining it to the second. */
  bottom: -1.9rem;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 900px) {

  /* Side by side: it moves into the gutter between the two panels. */
  .rl-pair__link {
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) / -2);
    transform: translate(50%, -50%);
  }
}

.rl-pkg__close {
  margin: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}

/* --- 5. Resident steps and staff benefits ------------------------------------
   Both sit inside the dark band's panels, so their type comes up off navy. */

.rl-steps,
.rl-team {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-step {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.rl-step__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.rl-team__icon {
  filter: invert(1) brightness(100);
}

.rl-team__icon {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -0.2rem;
}

.rl-step__text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.rl-step__k {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #fff;
}

.rl-step__d {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #C8D8F4;
}

/* One preview under both lists rather than one each, so neither audience's
   copy is interleaved with the other's. */
.rl-devices {
  margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem) auto 0;
  max-width: 56rem;
}

.rl-devices img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
}

.rl-devices figcaption {
  margin-top: 0.7rem;
}

/* --- 6. The two setup routes ------------------------------------------------- */

.rl-ways {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .rl-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rl-way {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.rl-way__icon {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto;
}

.rl-way__k {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}

.rl-way__lead {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  text-align: center;
  color: var(--text-secondary);
}

.rl-way__d {
  margin: 0.75rem 0 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Outside the two cards, because the guide says the support applies to both
   routes rather than to either one. */
.rl-support {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  align-items: center;
  margin-top: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

@media (min-width: 900px) {
  .rl-support {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.rl-support__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-900);
}

.rl-support__d {
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.rl-support__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-support__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}

.rl-support__list img {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

#rl-start .sc-note--center {
  margin-top: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
}

/* --- 7. Optional additions ------------------------------------------------------ */

.rl-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.rl-opt {
  position: relative;
}

/* Beside each title rather than once at the top of the section, so a card
   read on its own still says Optional. */
.rl-opt__tag {
  position: absolute;
  top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  right: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-900);
}

.rl-opt__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.rl-opt__link:hover {
  color: var(--blue-600);
}

/* The tag occupies the card's top-right, so the icon keeps clear of it. */
.rl-opt .sc-card__icon {
  margin-right: 4.5rem;
}

/* --- 8. The FAQ, introduction beside the accordion --------------------------------- */

.rl-faq__grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: start;
}

@media (min-width: 960px) {
  .rl-faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.rl-faq__intro>* {
  min-width: 0;
}

.rl-faq__lead {
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* The shared list is centred and capped; here it fills its own column. */
.rl-faq__list {
  max-width: none;
  margin-top: 0;
}

/* The shared scrim runs down the section, which works where the copy is
   centred and the picture clears below it. Here the introduction sits in the
   left column and this section is shorter than its siblings', so the
   photograph reached the text: the lead measured 2.96:1 against the bench's
   shadow, well under the 4.5 minimum.

   A second scrim runs across rather than down, holding the left column opaque
   and letting the picture read on the right — where the questions are opaque
   cards and the photograph shows between and beyond them. The picture is also
   shifted right so its subject lands in the half that stays visible. */
#rl-faq .sc-faq__bg {
  object-position: 72% 58%;
}

#rl-faq.sc-faq::after {
  background:
    linear-gradient(90deg,
      rgb(242 247 255 / .94) 0%,
      rgb(242 247 255 / .88) 34%,
      rgb(242 247 255 / .35) 52%,
      rgb(242 247 255 / 0) 66%),
    linear-gradient(180deg,
      rgb(242 247 255 / .95) 0%,
      rgb(242 247 255 / .88) 40%,
      rgb(242 247 255 / .74) 70%,
      rgb(242 247 255 / .62) 88%,
      rgb(242 247 255 / .93) 97%,
      rgb(242 247 255 / 1) 100%);
}

/* Stacked, the introduction sits above a full-width accordion and the picture
   has nowhere to the side to go, so only the vertical scrim applies. */
@media (max-width: 959px) {
  #rl-faq.sc-faq::after {
    background: linear-gradient(180deg,
        rgb(242 247 255 / .97) 0%,
        rgb(242 247 255 / .95) 45%,
        rgb(242 247 255 / .82) 74%,
        rgb(242 247 255 / .66) 90%,
        rgb(242 247 255 / .95) 98%,
        rgb(242 247 255 / 1) 100%);
  }
}

/* --- 9. The demo invitation ---------------------------------------------------------- */

.rl-demo__points {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}