/* ==========================================
   Home page (index.html) - sections below the hero
   Loaded only by index.html.
   ========================================== */
.hero {
  position: relative;
  padding: 90px 5% 100px;
  text-align: center;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(57, 57, 70, 0.28), transparent 70%), linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
}
.hero__title {
  width: fit-content;
  max-width: 860px;
  margin: 0 auto 20px;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
}
.hero__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 22px;
  border-radius: 2px;
  background-color: #2f2f3a;
}
.hero__text {
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #cfcfcf;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.hero__btn {
  min-width: 220px;
  padding: 16px 36px;
  border: 2px solid transparent;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.hero__btn:hover {
  transform: translateY(-3px);
}
.hero__btn:active {
  transform: translateY(1px);
}
.hero__btn--primary {
  background-color: #d32f3b;
  border-color: #d32f3b;
  color: #ffffff;
}
.hero__btn--primary:hover {
  background-color: #b3242f;
  border-color: #b3242f;
  box-shadow: 0 10px 24px rgba(230, 57, 70, 0.35);
}
.hero__btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.hero__btn--ghost:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.navbar {
  --nav-light: 57, 57, 70;
  --nav-glow: 0.3;
  --nav-base: #0a0a0a;
  /* the grey-blue light is faint, so it looked shorter than the red one on the other pages: same size now */
  --nav-glow-h: 62%;
  --nav-fade: 40%;
}

.main-title {
  --title-light: 57, 57, 70;
}

.footer {
  --footer-light: 57, 57, 70;
  --footer-glow: 0.36;
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 340px);
}
.footer::before {
  background: linear-gradient(90deg, transparent, rgba(120, 120, 140, 0.55), transparent);
  opacity: 1;
}

.scroll-arrow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  animation: scrollArrowBounce 2s infinite;
}
.scroll-arrow span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scroll-arrow:hover {
  color: #e63946;
}

@keyframes scrollArrowBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-12px);
  }
  60% {
    transform: translateX(-50%) translateY(-6px);
  }
}
.second-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  direction: rtl;
  position: relative;
  box-sizing: border-box;
  padding: 2% 3vw;
  padding-right: 0;
}
.second-section #storySection {
  flex: 2;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.second-section #storySection h2 {
  position: relative;
  right: -6vw;
  -webkit-text-stroke: 2px black;
  font-size: 32px;
  letter-spacing: 2px;
  /* the black line under the title is a background, so a red one can fill it up to the title's width on hover */
  padding-bottom: 3px;
  background: linear-gradient(#d32f3b, #d32f3b) right bottom/0 3px no-repeat, linear-gradient(#000000, #000000) right bottom/100% 3px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
  margin: 0 0 20px 0;
  white-space: nowrap;
}
.second-section #storySection h2:hover {
  background-size: 100% 3px, 100% 3px;
}
.second-section #storySection p {
  position: relative;
  right: -6vw;
  margin: 0 0 40px 0;
  max-width: 100%;
  line-height: 1.7;
  word-wrap: normal;
  text-align: right;
  font-size: 1.1rem;
}
.second-section #storySection #btn-story {
  right: -6vw;
  position: relative;
}
.second-section .img-container {
  position: relative;
  width: 40%;
  max-width: 40%;
  display: flex;
  justify-content: center;
  margin: 0;
}
.second-section .img-container video {
  cursor: pointer;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  background-color: #000;
}

.third-section .ts-text {
  margin: 50px 0 10px 0;
  font-size: 1.1rem;
  line-height: 2.5rem;
  text-align: center;
}
.third-section .ts-text p {
  position: relative;
  margin-bottom: 30px;
}
.third-section .ts-text .ts-buttons {
  display: flex;
  gap: 5rem;
  justify-content: center;
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 5% auto 0 auto !important;
  width: 100%;
  max-width: 100%;
  position: relative;
  right: -50%;
  transform: translateX(-50%);
}
.services-grid .service-box {
  position: relative;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  text-decoration: none;
  width: 100%;
}
.services-grid .service-box .service-box-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  z-index: 1;
}
.services-grid .service-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 2;
  transition: background 0.4s ease;
}
.services-grid .service-box:hover .service-box-bg {
  transform: scale(1.08);
}
.services-grid .service-box:hover::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.services-grid .service-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 5px;
  width: 0;
  background-color: white;
  z-index: 4;
  transition: width 0.4s ease-out;
}
.services-grid .service-box:hover::after {
  width: 100%;
}
.services-grid .service-box h3 {
  position: relative;
  top: 5%;
  right: 5%;
  z-index: 3;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  -webkit-text-stroke: 1px white;
}
.services-grid .service-box .service-btn-small {
  position: relative;
  z-index: 3;
  margin: 0;
  bottom: 5%;
  right: 2%;
  background: #ffffff;
  color: #050505;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: all 0.2s ease;
}
.services-grid .service-box .service-btn-small:hover {
  background: #111111;
  color: #ffffff;
}
.services-grid .service-box .service-btn-small:active {
  transform: scale(0.95);
  background: #000000;
}

.testimonials-section {
  padding-bottom: 80px;
  background-color: #ffffff;
  width: 100%;
}

.reviews-summary {
  text-align: center;
  margin: 0px auto !important;
}
.reviews-summary .rating-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  background: #fff;
  padding: 15px 40px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #eaeaea;
  margin: 3% auto 0 auto;
}
.reviews-summary .rating-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3% auto;
}
/* The rating stars: plain, always lit. */
.reviews-summary .stars {
  color: #fbbc04;
  -webkit-text-stroke: 0.6px #a06b00;
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  height: auto;
}
.reviews-summary .score {
  font-size: 34px;
  font-weight: 900;
  margin: 0 15px;
  vertical-align: middle;
  color: #ffffff;
  -webkit-text-stroke: 1px #ffffff;
  mix-blend-mode: difference;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.reviews-summary .based-on {
  display: block;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  white-space: nowrap;
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 60px;
}

.reviews-track {
  display: flex;
  gap: 3%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* The scroll box clips whatever sticks out of it, shadows included: it is made bigger than the row of cards (26px on
     the sides, 34px above, 56px below, pulled back with the negative margin) so the shadow of a hovered card fits inside. */
  padding: 52px 26px 64px;
  width: calc(100% + 52px);
  scroll-snap-type: x mandatory;
  scroll-padding: 0 26px;
  margin: 0 -26px !important;
}
.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  background: rgb(248, 249, 250) !important;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 0 0 335px;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: center;
  margin: 0 !important;
}
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.google-icon-top {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 20px;
  height: 20px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  background-color: #050505;
  color: #ffffff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background 0.3s, transform 0.2s;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.carousel-btn:hover {
  background-color: #ffffff;
  color: #111111;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #111111;
  transform: translateY(-50%) rotate(180deg) scale(1.1);
}
.carousel-btn.right-btn {
  right: 6px;
}
.carousel-btn.left-btn {
  left: 6px;
}

.review-header {
  background: rgb(248, 249, 250) !important;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 3% 0 !important;
}

.reviewer-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 !important;
}

.reviewer-info {
  background: rgb(248, 249, 250) !important;
  margin: 2% !important;
}
.reviewer-info h3 {
  margin: 0 0 2px 0;
  font-size: 16px;
  font-weight: 700;
  color: #050505;
}
.reviewer-info span {
  font-size: 13px;
  color: #666;
}

.rating-row {
  background: rgb(248, 249, 250) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}

.review-stars {
  background: rgb(248, 249, 250) !important;
  color: #fbbc04;
  -webkit-text-stroke: 0.5px #a06b00;
  font-size: 16px;
  letter-spacing: 1px;
  margin: 1% !important;
}

.verified-badge {
  width: 15px;
  height: 15px;
  background-color: #1a73e8 !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 1% !important;
}
.verified-badge svg {
  width: 9px;
  height: 9px;
  fill: #ffffff;
}

.review-text {
  font-size: 14.5px;
  color: #444;
  line-height: 1.6;
  margin: 3% 0 3% 0;
}

.carousel-indicator-bar {
  width: 80px;
  height: 4px;
  background-color: #d1d1d1;
  border-radius: 4px;
  margin: 25px auto 0 auto;
  position: relative;
  overflow: hidden;
  display: none;
}
.carousel-indicator-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background-color: #555555;
  border-radius: 4px;
  left: var(--indicator-pos, 0px);
  transition: left 0.1s ease-out;
}

.how-it-works-section {
  background-color: #fcfcfc;
  width: 100%;
}
.how-it-works-section .how-it-works-content {
  display: flex;
  align-items: center;
  gap: 50px;
  width: 100%;
  margin: 8vw 0;
}
.how-it-works-section .how-it-works-img {
  flex: 1;
  margin: 0;
}
.how-it-works-section .how-it-works-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.how-it-works-section .steps-container {
  flex: 1;
  position: relative;
  padding-right: 5%;
  margin: 0;
}
.how-it-works-section .step-item {
  position: relative;
  padding-right: 70px;
  padding-bottom: 40px;
  z-index: 2;
  margin: 1px auto;
}
.how-it-works-section .step-item.last-step {
  padding-bottom: 0;
}
.how-it-works-section .step-item:not(.last-step)::before {
  content: "";
  position: absolute;
  right: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background-color: #000000;
  z-index: -1;
}
.how-it-works-section .step-item h3 {
  font-size: 22px;
  font-weight: 900;
  color: black;
  margin: 0 0 8px 0;
  -webkit-text-stroke: 1px black;
}
.how-it-works-section .step-item p {
  font-size: 16px;
  color: #555;
  margin: 0;
  word-wrap: normal;
}
.how-it-works-section .step-number {
  position: absolute;
  margin: 0;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  border: 4px solid #fcfcfc;
}
.how-it-works-section .how-cta {
  margin-top: 40px;
  text-align: right;
  padding-right: 0px;
  margin-right: 0;
}

#sponsors {
  margin-top: 3%;
  margin-bottom: 3%;
}
#sponsors div {
  margin-top: 0;
  margin-bottom: 0;
}

.sponsors {
  display: flex;
  align-items: center;
  gap: 10%;
  margin-top: 0;
  margin-bottom: 0;
}
.sponsors img {
  flex: 1;
  width: 30%;
  height: 30%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.sponsors img:hover {
  transform: scale(1.1);
}

@media (max-width: 900px) {
  .second-section {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px 20px;
  }
  .second-section #storySection {
    width: 100%;
    margin: 0;
  }
  .second-section #storySection h2,
  .second-section #storySection p,
  .second-section #storySection #btn-story {
    right: 0;
  }
  .second-section #storySection h2 {
    font-size: 26px;
    white-space: normal;
  }
  .second-section .img-container {
    width: 100%;
    max-width: 100%;
  }
  .third-section .ts-text {
    padding: 0 20px;
    line-height: 2;
  }
  .third-section .ts-text .ts-buttons {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .reviews-summary .rating-box {
    width: auto;
    max-width: 92%;
    padding: 15px 20px;
  }
  .reviews-summary .rating-box .based-on {
    white-space: normal;
    text-align: center;
  }
  .how-it-works-section .step-item {
    padding-right: 86px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .how-it-works-content {
    flex-direction: column;
    text-align: center;
  }
  .steps-container {
    padding-right: 0;
    text-align: right;
  }
  .how-cta {
    text-align: center;
    padding-right: 0;
  }
  .testimonials-section,
  .how-it-works-section {
    padding-bottom: 50px;
  }
  .carousel-wrapper {
    padding: 0 20px;
  }
  .carousel-btn {
    display: none;
  }
  .reviews-track {
    width: calc(100% + 28px);
    padding: 40px 14px 56px;
    scroll-padding: 0 14px;
    margin: 0 -14px !important;
  }
  .review-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .carousel-indicator-bar {
    display: block;
  }
}
@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 56px 20px 64px;
  }
  .hero__btn {
    width: 100%;
  }
}
.reviews-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  /* (important: the shared .body div div rule would otherwise give this div a 10% margin) */
  margin: 14px 0 0 !important;
}

/* small, quiet pill links: hairline outline, muted text, and a light red tint on hover */
.review-link {
  display: inline-block;
  margin: 0 !important;
  padding: 4px 13px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 999px;
  color: #666666;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.review-link:hover,
.review-link:focus-visible {
  border-color: rgba(211, 47, 59, 0.5);
  background: rgba(211, 47, 59, 0.06);
  color: #b3242f;
  transform: translateY(-1px);
}
.review-link--accent {
  border-color: rgba(211, 47, 59, 0.28);
  color: #b3242f;
}

/* note under the rating: these are selected reviews */
.reviews-note {
  margin: 6px 0 0 !important;
  color: #767676;
  font-size: 12px;
  text-align: center;
}

a.review-card--link {
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.review-card--link:hover, a.review-card--link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
/* A small "i" button in the bottom corner of the partner logos. The note about the logos shows when the mouse is over
   it, when it has keyboard focus, and when it is tapped (javascript/script.js toggles .is-open). */
#sponsors {
  position: relative;
}
.info-tip {
  position: absolute;
  right: 6px;
  bottom: 4px;
}
.info-tip__btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  padding: 0;
  border: 1px solid rgba(128, 128, 128, 0.55);
  border-radius: 50%;
  background: transparent;
  color: #767676;
  font: italic 700 12px/1 Georgia, serif;
  cursor: help;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.info-tip__btn:hover,
.info-tip__btn:focus-visible,
.info-tip.is-open .info-tip__btn {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}
.info-tip__text {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 250px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.info-tip:hover .info-tip__text,
.info-tip:focus-within .info-tip__text,
.info-tip.is-open .info-tip__text {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* the soft play icon shown in the middle of the video while it is paused (a click on the video plays it again) */
.video-paused-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.video-paused-icon[hidden] {
  display: none;
}
.video-paused-icon svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: #ffffff;
}
/* When the reviews all fit on the screen the arrows turn the row: it slides one card (translate, so the card's own hover
   lift keeps working) and the card that went round to the other end fades in. */
.reviews-track.is-sliding .review-card {
  transition: translate 0.45s ease;
  translate: calc(var(--slide-dir, 0) * var(--slide-step, 0px)) 0;
}
@keyframes reviewIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.review-card.is-entering {
  animation: reviewIn 0.5s ease both;
}

/* ---------- offer card and FAQ (javascript/home-extras.js) ---------- */
.offer {
  position: relative;
  width: min(760px, 92%);
  margin: 6vw auto;
  padding: 34px 28px;
  border-radius: 16px;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(230, 57, 70, 0.35), transparent 70%), #0a0a0a;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.offer__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 900;
}
.offer__text {
  margin: 0 auto 20px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: #e6e6ea;
}
.offer__btn {
  display: inline-block;
}
.offer__until {
  display: block;
  margin-top: 14px;
  color: #b9b9c2;
  font-size: 13px;
}

/* the page's rule ".body div div { margin: 10% }" would squeeze this block: the title must run the full width, close to the section above */
#faqRoot {
  margin: -2vw 0 0 !important;
}
.faq {
  display: grid;
  gap: 12px;
  width: min(880px, 92%);
  margin: 3vw auto 7vw;
}
.faq__item {
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.faq__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}
.faq__item[open] {
  border-color: #e63946;
  box-shadow: 0 12px 30px rgba(230, 57, 70, 0.14);
  transform: none;
}
.faq__item summary {
  position: relative;
  display: block;
  padding: 20px 26px 20px 74px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #d32f3b; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 22px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #f4f4f6;
  color: #e63946;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: #e63946;
  color: #ffffff;
}
.faq__item summary:focus-visible { outline: 3px solid #e63946; outline-offset: -3px; }
.faq__item p {
  margin: 0;
  padding: 0 26px 6px;
  color: #444444;
  font-size: 17px;
  line-height: 1.85;
}
.faq__item p:last-child { padding-bottom: 22px; }
.faq__item[open] p { animation: faqIn 0.4s ease both; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .faq__item summary { padding: 16px 16px 16px 60px; font-size: 17px; }
  .faq__item summary::after { left: 14px; }
  .faq__item p { padding-inline: 16px; font-size: 16px; }
}@media (prefers-reduced-motion: reduce) {
  
}
/* the page's generic rules ".body div div { margin: 10% }" and ".body div div p { color: #000 }" reach into these blocks: undo that */

#faqRoot .faq { margin: 3vw auto 7vw !important; }