/*
 * Roca Professionals, public site: page layout and the sections of the home and info pages (the mockup
 * Главная сайта of Claude Design). Components (buttons, cards, header, footer) live in their rp-*.css files.
 * The fluid sizes (--rp-site-*) use cqi, which resolve against the viewport here.
 */

body.rp-site {
  /* Four columns fit the 1216 px content box: (1216 - 3 gaps of 24) / 4 = 286 px. */
  --rp-col-min: calc(var(--rp-event-min) - var(--rp-sp-12));
  /* No container-type here: it would make the body the box of fixed layers (the loading screen); cqi
     without a container falls back to the viewport, which is the same width. */
  display: flex;
  flex-direction: column;
  background: var(--rp-paper);
}

.rp-site__main {
  flex: 1 0 auto;
}

/* The same box as the site header and footer (rp-nav.css), so every left edge lines up. */
.rp-container {
  width: 100%;
  max-width: var(--rp-w-content);
  margin-inline: auto;
  padding-inline: var(--rp-site-gutter);
}

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

.rp-section {
  padding-block: var(--rp-site-section);
}

.rp-section--surface {
  background: var(--rp-surface);
}

.rp-section--ink {
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
}

.rp-section--tight {
  padding-block: var(--rp-sp-12);
}

.rp-section__head {
  display: grid;
  gap: var(--rp-sp-3);
  margin-bottom: var(--rp-sp-10);
}

.rp-section__head--row {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.rp-section__head--row > .rp-section__head,
.rp-split > .rp-section__head {
  margin-bottom: 0;
}

.rp-section__title {
  font-size: var(--rp-site-h2);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-heading);
  text-wrap: balance;
}

.rp-section__lead {
  max-width: var(--rp-w-text);
  font-size: var(--rp-site-lead);
  line-height: var(--rp-lh-body);
  color: var(--rp-text-secondary);
}

.rp-section--ink .rp-rubric,
.rp-section--ink .rp-section__lead {
  color: var(--rp-text-inverse-secondary);
}

.rp-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-1);
  min-height: var(--rp-tap);
  font-size: var(--rp-fs-small);
  font-weight: var(--rp-fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

/* Two columns from 900 px: heading on the left, text on the right (In Common With). */
.rp-split {
  display: grid;
  gap: var(--rp-sp-6);
}

@media (min-width: 900px) {
  .rp-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--rp-sp-16);
    align-items: start;
  }
}

/* ---- Hero: full-bleed interior photo with a scrim, two-tone heading ---------------------------- */

.rp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(var(--rp-site-hero-h), 100svh);
  color: var(--rp-text-inverse);
  isolation: isolate;
}

.rp-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--rp-site-header-h) + var(--rp-sp-4)) var(--rp-site-gutter);
  text-align: right;
}

.rp-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rp-scrim);
}

.rp-hero__inner {
  display: grid;
  gap: var(--rp-sp-5);
  padding-top: calc(var(--rp-site-header-h) + var(--rp-sp-16));
  padding-bottom: var(--rp-site-hero-pb);
}

/* The signature of the style: the white Roca mark at the bottom left of a full-width photo, on the left edge of the content. */
.rp-hero::after,
.rp-page-cover::after {
  content: "";
  position: absolute;
  bottom: var(--rp-sp-6);
  left: max(var(--rp-site-gutter), calc((100% - var(--rp-w-content)) / 2 + var(--rp-site-gutter)));
  height: var(--rp-sp-6);
  aspect-ratio: var(--rp-logo-ar);
  background: var(--rp-text-inverse);
  -webkit-mask: var(--rp-logo);
  mask: var(--rp-logo);
}

.rp-hero__inner {
  padding-bottom: calc(var(--rp-site-hero-pb) + var(--rp-sp-12));
}

.rp-hero .rp-rubric {
  color: var(--rp-text-inverse-secondary);
}

.rp-hero__title {
  max-width: 14em;
  font-size: var(--rp-site-h1);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-tight);
  letter-spacing: var(--rp-ls-display);
  text-wrap: balance;
}

.rp-hero__title .rp-soft {
  color: var(--rp-text-inverse-secondary);
}

.rp-hero__lead {
  max-width: 34em;
  font-size: var(--rp-site-lead);
  color: var(--rp-text-inverse-secondary);
}

.rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-sp-3);
  padding-top: var(--rp-sp-3);
}

/* ---- Numbered steps: 01-04 under a hairline ---------------------------------------------------- */

.rp-howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rp-col-min)), 1fr));
  gap: var(--rp-sp-8) var(--rp-sp-6);
  margin-top: var(--rp-sp-12);
}

.rp-howto__item {
  display: grid;
  align-content: start;
  gap: var(--rp-sp-2);
  padding-top: var(--rp-sp-4);
  border-top: var(--rp-bw) solid var(--rp-line-strong);
}

.rp-howto__num {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-caption);
  color: var(--rp-text-tertiary);
}

.rp-howto__title {
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
}

.rp-howto__text {
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-body);
  color: var(--rp-text-secondary);
}

/* ---- Audience: a photo, a name, a line; the whole card is the link ----------------------------- */

.rp-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rp-col-min)), 1fr));
  gap: var(--rp-sp-8) var(--rp-sp-6);
}

.rp-audience__item {
  display: grid;
  align-content: start;
  gap: var(--rp-sp-3);
  color: inherit;
  text-decoration: none;
}

.rp-audience__item:hover {
  color: inherit;
}

.rp-audience__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--rp-r-lg);
  overflow: hidden;
}

.rp-audience__badge {
  position: absolute;
  top: var(--rp-sp-3);
  left: var(--rp-sp-3);
  padding: var(--rp-sp-0-5) var(--rp-sp-2);
  border-radius: var(--rp-r-xs);
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
}

.rp-audience__title {
  display: flex;
  align-items: center;
  gap: var(--rp-sp-2);
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-snug);
  letter-spacing: var(--rp-ls-heading);
}

.rp-audience__title .rp-icon {
  transition: transform var(--rp-dur) var(--rp-ease);
}

.rp-audience__item:hover .rp-audience__title .rp-icon {
  transform: translateX(var(--rp-sp-1));
}

.rp-audience__text {
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-body);
  color: var(--rp-text-secondary);
}

.rp-audience__foot {
  font-size: var(--rp-fs-caption);
  color: var(--rp-text-tertiary);
}

/* ---- Benefits: a tall photo and a list of rows ------------------------------------------------- */

.rp-benefits {
  display: grid;
  gap: var(--rp-sp-10);
}

@media (min-width: 900px) {
  .rp-benefits {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--rp-sp-16);
    align-items: start;
  }
}

.rp-benefits__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--rp-r-lg);
}

.rp-rows {
  display: grid;
}

.rp-rows__item {
  display: grid;
  gap: var(--rp-sp-1);
  padding-block: var(--rp-sp-5);
  border-top: var(--rp-bw) solid var(--rp-line);
}

.rp-rows__item:last-child {
  border-bottom: var(--rp-bw) solid var(--rp-line);
}

.rp-rows__title {
  font-weight: var(--rp-fw-medium);
}

.rp-rows__text {
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-body);
  color: var(--rp-text-secondary);
}

/* ---- Levels: three columns, the top level on ink ---------------------------------------------- */

.rp-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rp-level-min)), 1fr));
  gap: var(--rp-sp-4);
}

.rp-level {
  display: grid;
  align-content: start;
  gap: var(--rp-sp-4);
  padding: var(--rp-sp-6);
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

.rp-level--top {
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
  box-shadow: none;
}

.rp-level__dots {
  display: flex;
  gap: var(--rp-sp-1);
}

.rp-level__dot {
  width: var(--rp-dot);
  height: var(--rp-dot);
  border-radius: var(--rp-r-round);
  background: var(--rp-line-strong);
}

.rp-level__dot.is-on {
  background: currentColor;
}

.rp-level__name {
  font-size: var(--rp-fs-h3);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-snug);
  letter-spacing: var(--rp-ls-heading);
}

.rp-level__sub {
  margin-top: calc(-1 * var(--rp-sp-3));
  font-size: var(--rp-fs-small);
  color: var(--rp-text-tertiary);
}

.rp-level--top .rp-level__sub {
  color: var(--rp-text-inverse-secondary);
}

.rp-level__list {
  display: grid;
  gap: var(--rp-sp-2);
  padding-top: var(--rp-sp-4);
  border-top: var(--rp-bw) solid var(--rp-line);
  font-size: var(--rp-fs-small);
}

.rp-level--top .rp-level__list {
  border-top-color: var(--rp-line-inverse);
}

.rp-level__list li {
  display: flex;
  gap: var(--rp-sp-2);
}

.rp-level__list .rp-icon {
  margin-top: var(--rp-sp-0-5);
}

.rp-note {
  margin-top: var(--rp-sp-6);
  font-size: var(--rp-fs-caption);
  color: var(--rp-text-tertiary);
}

/* ---- Learning: text and a sample certificate --------------------------------------------------- */

.rp-cert-sample {
  display: grid;
  gap: var(--rp-sp-3);
  padding: var(--rp-sp-6);
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

.rp-cert-sample__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-sp-3);
}

.rp-cert-sample__top .rp-logo__mark {
  height: var(--rp-sp-4);
}

.rp-cert-sample__title {
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-snug);
  letter-spacing: var(--rp-ls-heading);
}

/* ---- Rules in four short blocks ---------------------------------------------------------------- */

.rp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rp-col-min)), 1fr));
  gap: var(--rp-sp-8) var(--rp-sp-6);
}

.rp-fact {
  display: grid;
  align-content: start;
  gap: var(--rp-sp-2);
  padding-top: var(--rp-sp-4);
  border-top: var(--rp-bw) solid var(--rp-line-strong);
}

.rp-fact__title {
  font-weight: var(--rp-fw-medium);
}

.rp-fact__text {
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-body);
  color: var(--rp-text-secondary);
}

/* ---- Questions: native details, a hairline between them --------------------------------------- */

.rp-faq {
  border-top: var(--rp-bw) solid var(--rp-line);
}

.rp-faq__item {
  border-bottom: var(--rp-bw) solid var(--rp-line);
}

.rp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-sp-4);
  min-height: var(--rp-sp-16);
  padding-block: var(--rp-sp-3);
  font-weight: var(--rp-fw-medium);
  cursor: pointer;
  list-style: none;
}

.rp-faq__q::-webkit-details-marker {
  display: none;
}

.rp-faq__q .rp-icon {
  transition: transform var(--rp-dur) var(--rp-ease);
}

.rp-faq__item[open] .rp-faq__q .rp-icon {
  transform: rotate(180deg);
}

.rp-faq__a {
  max-width: var(--rp-w-text);
  padding-bottom: var(--rp-sp-5);
  color: var(--rp-text-secondary);
  animation: rp-fade-in var(--rp-dur) var(--rp-ease);
}

/* ---- Join band on ink ------------------------------------------------------------------------- */

.rp-cta {
  display: grid;
  gap: var(--rp-sp-5);
  max-width: var(--rp-w-text);
}

.rp-cta__title {
  font-size: var(--rp-site-h2);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-heading);
}

.rp-cta__text {
  color: var(--rp-text-inverse-secondary);
}

/* ---- Page head of the inner pages -------------------------------------------------------------- */

.rp-page-head {
  display: grid;
  gap: var(--rp-sp-4);
  padding-top: var(--rp-sp-12);
  padding-bottom: var(--rp-sp-12);
}

.rp-page-head__title {
  max-width: 16em;
  font-size: var(--rp-site-h1);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-tight);
  letter-spacing: var(--rp-ls-display);
  text-wrap: balance;
}

.rp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-sp-2);
  font-size: var(--rp-fs-small);
  color: var(--rp-text-tertiary);
}

.rp-crumbs a {
  text-decoration: none;
}

/* ---- Who am I: the choice cards of rp-fields.css, one column like the mockup -------------------- */

.rp-join {
  max-width: var(--rp-w-text);
}

/* ---- Narrow column pages: sign-in, 404 --------------------------------------------------------- */

.rp-narrow {
  display: grid;
  gap: var(--rp-sp-5);
  max-width: calc(var(--rp-w-aside) + 2 * var(--rp-site-gutter));
  padding-top: var(--rp-sp-16);
  padding-bottom: var(--rp-sp-24);
}

/* ---- The header over the photo of the home page ------------------------------------------------ */

/* Over the first screen the header is fixed and takes no room; the hero leaves space for it. */
.rp-site--over .rp-site-header {
  position: fixed;
  inset: 0 0 auto;
}

/* Languages the site does not have yet. */
.rp-site-footer__lang-option.is-disabled {
  color: var(--rp-disabled-text);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line);
  cursor: default;
}

.rp-site-footer__lang-option.is-disabled:hover {
  color: var(--rp-disabled-text);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line);
}

/* ---- Sign-in ----------------------------------------------------------------------------------- */

.rp-login {
  display: grid;
  gap: var(--rp-sp-5);
}

.rp-login__wait {
  display: flex;
  align-items: center;
  gap: var(--rp-sp-3);
  padding: var(--rp-sp-4);
  border-radius: var(--rp-r-lg);
  background: var(--rp-stone);
  font-size: var(--rp-fs-small);
}

.rp-login__state:empty {
  display: none;
}

.rp-login__state {
  color: var(--rp-text-secondary);
  font-size: var(--rp-fs-small);
}

/* Inner pages lock the page while the phone menu is open. */
html.rp-lock {
  overflow: hidden;
}

.rp-for-photo {
  aspect-ratio: 16 / 9;
  border-radius: var(--rp-r-lg);
}

/* ---- Levels on a phone: cards stack while scrolling (Skiper: Card stack scroll) --------------- */

@media (max-width: 899px) {
  .rp-levels {
    gap: var(--rp-sp-3);
  }

  .rp-level {
    position: sticky;
    top: calc(var(--rp-site-header-h) + var(--rp-sp-4));
  }

  .rp-level:nth-child(2) {
    top: calc(var(--rp-site-header-h) + var(--rp-sp-8));
  }

  .rp-level:nth-child(3) {
    top: calc(var(--rp-site-header-h) + var(--rp-sp-12));
  }
}

/* ---- Living sections (10.10.2026): photos, scenes and motion ----------------------------------- */

.rp-section--paths {
  position: relative;
  overflow: hidden;
}

.rp-section--paths > .rp-container {
  position: relative;
}

.rp-section__head--center {
  justify-items: center;
  max-width: var(--rp-w-text);
  margin-inline: auto;
  text-align: center;
}

.rp-section__head--center .rp-section__lead {
  margin-inline: auto;
}

/* Text on one side, an animated scene on the other. */
.rp-split--scene {
  align-items: center;
}

.rp-split--scene .rp-scene {
  max-width: calc(var(--rp-w-text) - var(--rp-sp-16));
  justify-self: center;
}

@media (min-width: 900px) {
  .rp-split--scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.rp-levels {
  margin-top: var(--rp-sp-10);
}

/* Photos in the audience cards fill their frame and lean toward the pointer. */
.rp-audience__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rp-dur-count) var(--rp-ease);
}

.rp-audience__item:hover .rp-audience__photo > img {
  transform: scale(1.04);
}

.rp-audience__badge {
  z-index: 2;
}

/* A dark band with a photo behind, moved slower than the page. */
.rp-photo-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rp-photo-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.rp-photo-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rp-overlay) 0%, var(--rp-overlay) 40%, transparent 100%), var(--rp-scrim);
}

.rp-photo-band .rp-section__title,
.rp-photo-band .rp-cta__title {
  color: var(--rp-text-inverse);
}

.rp-photo-band .rp-soft {
  color: var(--rp-text-inverse-secondary);
}

.rp-photo-band .rp-scene {
  color: var(--rp-text-inverse);
}

/* Rules on a tile floor. */
.rp-section--tiles {
  position: relative;
  background: var(--rp-paper);
}

.rp-board-wrap {
  margin-block: var(--rp-sp-6) var(--rp-sp-12);
  padding: var(--rp-sp-6);
  border-radius: var(--rp-r-frame);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

.rp-board-wrap .rp-scene {
  max-width: calc(var(--rp-w-text) + var(--rp-sp-30));
  margin-inline: auto;
}

/* The chat of the questions sits under their heading. */
#faq .rp-scene {
  margin-top: var(--rp-sp-6);
  max-width: var(--rp-w-aside);
}

/* Pages of a type: a photo at the side of the head, moved by the parallax. */
.rp-page-hero {
  display: grid;
  gap: var(--rp-sp-8);
  align-items: end;
  padding-block: var(--rp-sp-10) var(--rp-sp-12);
}

.rp-page-hero__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--rp-r-frame);
}

@media (min-width: 900px) {
  .rp-page-hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--rp-sp-16);
  }

  .rp-page-hero__photo {
    aspect-ratio: 4 / 5;
  }
}

/* A full-width photo head of a page (events). */
.rp-page-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(70svh, 640px);
  overflow: hidden;
  color: var(--rp-text-inverse);
  isolation: isolate;
}

.rp-page-cover > .rp-parallax-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.rp-page-cover > .rp-parallax-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rp-scrim);
}

.rp-page-cover .rp-page-head {
  padding-block: var(--rp-sp-16) var(--rp-sp-24);
}

.rp-page-cover .rp-rubric,
.rp-page-cover .rp-soft,
.rp-page-cover .rp-section__lead,
.rp-page-cover .rp-crumbs,
.rp-page-cover .rp-crumbs a {
  color: var(--rp-text-inverse-secondary);
}

/* Kinds of events as cards with a photo or a scene. */
.rp-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rp-col-min)), 1fr));
  gap: var(--rp-sp-4);
}

.rp-kind {
  display: grid;
  align-content: start;
  gap: var(--rp-sp-2);
  padding: var(--rp-sp-6);
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

.rp-kind .rp-icon {
  width: var(--rp-sp-8);
  height: var(--rp-sp-8);
  margin-bottom: var(--rp-sp-2);
  color: var(--rp-accent);
}

.rp-kind__title {
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-heading);
  letter-spacing: var(--rp-ls-heading);
}

.rp-kind__text {
  font-size: var(--rp-fs-small);
  color: var(--rp-text-secondary);
}

/* Sign-in and registration next to a photo. */
.rp-auth {
  display: grid;
  min-height: calc(100svh - var(--rp-site-header-h));
}

.rp-auth__photo {
  display: none;
}

@media (min-width: 900px) {
  .rp-auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rp-auth__photo {
    display: block;
  }
}

.rp-rows--grid {
  margin-top: var(--rp-sp-10);
}

@media (min-width: 900px) {
  .rp-rows--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--rp-sp-12);
  }

  .rp-rows--grid .rp-rows__item:nth-last-child(2) {
    border-bottom: var(--rp-bw) solid var(--rp-line);
  }
}

.rp-auth__main {
  display: grid;
  align-content: start;
}

.rp-auth__main--center {
  align-content: center;
}

.rp-auth__photo {
  position: relative;
  min-height: 100%;
}

.rp-auth__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Questions: number, text, a plus that turns into a cross; the answer types in like a chat message. */
.rp-faq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--rp-sp-4);
}

.rp-faq__num {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-caption);
  color: var(--rp-text-tertiary);
}

.rp-faq__text {
  font-size: var(--rp-fs-body);
}

.rp-faq__plus {
  position: relative;
  width: var(--rp-sp-6);
  height: var(--rp-sp-6);
  border-radius: var(--rp-r-pill);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-strong);
  transition: transform var(--rp-dur-slow) var(--rp-ease), background var(--rp-dur) var(--rp-ease);
}

.rp-faq__plus::before,
.rp-faq__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rp-sp-3);
  height: var(--rp-bw-strong);
  margin: calc(var(--rp-bw) * -1) 0 0 calc(var(--rp-sp-3) / -2);
  background: currentColor;
}

.rp-faq__plus::after {
  transform: rotate(90deg);
}

.rp-faq__item[open] .rp-faq__plus {
  transform: rotate(45deg);
  background: var(--rp-ink);
  color: var(--rp-text-inverse);
  box-shadow: none;
}

.rp-faq__a {
  position: relative;
  margin-left: calc(var(--rp-sp-4) + 2ch);
  padding: var(--rp-sp-3) var(--rp-sp-4);
  border-radius: var(--rp-r-lg) var(--rp-r-lg) var(--rp-r-lg) var(--rp-r-xs);
  background: var(--rp-stone);
  color: var(--rp-text);
  font-size: var(--rp-fs-small);
  animation: none;
}

.rp-faq__item {
  padding-bottom: 0;
}

.rp-faq__item[open] {
  padding-bottom: var(--rp-sp-5);
}

.rp-faq__answer {
  display: block;
  animation: rp-fade-in var(--rp-dur-slow) 700ms var(--rp-ease) both;
}

.rp-faq__typing {
  position: absolute;
  left: var(--rp-sp-4);
  top: 50%;
  display: flex;
  gap: var(--rp-sp-1);
  transform: translateY(-50%);
  animation: rp-typing-out 1ms 700ms both;
}

.rp-faq__typing > span {
  width: var(--rp-dot);
  height: var(--rp-dot);
  border-radius: var(--rp-r-round);
  background: var(--rp-muted);
  animation: rp-typing-dot 600ms ease-in-out infinite alternate;
}

.rp-faq__typing > span:nth-child(2) { animation-delay: 150ms; }
.rp-faq__typing > span:nth-child(3) { animation-delay: 300ms; }

@keyframes rp-typing-dot { to { transform: translateY(calc(var(--rp-dot) * -0.8)); opacity: 0.4; } }
@keyframes rp-typing-out { to { opacity: 0; visibility: hidden; } }

/* On a phone the text of a band spans the whole photo: an even veil keeps it readable. */
@media (max-width: 899px) {
  .rp-photo-band__bg::after {
    background: linear-gradient(var(--rp-overlay), var(--rp-overlay)), var(--rp-scrim);
  }
}