#reviews {
    max-width: none;
    padding-top: 48px; padding-bottom: 48px;
    background: linear-gradient(180deg, var(--ww-paper) 0%, var(--ww-wash) 95%, rgba(255,255,255,0) 99%);
  }
  #reviews > .ww-stack { max-width: calc(var(--ww-shell) - var(--ww-gutter) - var(--ww-gutter)); margin-inline: auto; }
  .reviews-carousel {
    --nav-size: 40px;
    position: relative; width: 100%; max-width: 1100px;
    display: flex; flex-direction: column; align-items: center; gap: var(--ww-s-6);
  }
  /* minmax(0, 1fr), not the implicit auto track: a long unbroken word such as
     a web address would otherwise widen the track past a phone screen. */
  .reviews-carousel__frame { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .reviews-carousel__slide {
    grid-area: 1 / 1; margin: 0;
    display: grid; grid-template-columns: 4fr 8fr; align-items: start; align-content: start; gap: var(--ww-s-10);
    padding: 50px; text-align: left;
    background: var(--ww-plate); border: 1px solid var(--ww-rule); border-radius: var(--ww-r-xl); box-shadow: var(--ww-sh-card);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ww-ease), visibility 0s linear .35s;
  }
  .reviews-carousel__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .reviews-carousel__source { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  /* Every logo is fitted inside the same box, so a wide logo and a taller one
     take up the same space. */
  .reviews-carousel__logo { display: block; width: 200px; height: 108px; margin-bottom: var(--ww-s-4); object-fit: contain; object-position: left center; }
  .reviews-carousel__name { font-size: var(--ww-label); font-weight: 600; line-height: 1.25; color: var(--ww-ink-strong); }
  .reviews-carousel__site { font-size: var(--ww-ui); color: var(--ww-ink-2); text-decoration: none; overflow-wrap: anywhere; }
  .reviews-carousel__site:hover { text-decoration: underline; }
  .reviews-carousel__via {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--ww-s-4);
    color: var(--ww-ink-2); font-size: var(--ww-ui); text-decoration: none;
  }
  .reviews-carousel__via svg { width: 16px; height: 16px; fill: currentColor; }
  .reviews-carousel__via:hover { color: var(--ww-ink-strong); }
  .reviews-carousel__text { margin: 0; color: var(--ww-ink); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
  .reviews-carousel__text p { margin: 0; }
  .reviews-carousel__text p + p { margin-top: var(--ww-s-4); }
  .reviews-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--ww-s-5); }
  .reviews-carousel__nav {
    flex: none; width: var(--nav-size); height: var(--nav-size); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ww-rule); border-radius: var(--ww-r-badge);
    background: var(--ww-plate); box-shadow: var(--ww-sh-ghost);
    color: var(--ww-ink-strong); cursor: pointer;
    transition: box-shadow .35s var(--ww-ease);
  }
  .reviews-carousel__nav:hover { box-shadow: var(--ww-sh-soft); }
  .reviews-carousel__nav svg { width: 16px; height: 16px; }
  .reviews-carousel__nav--prev svg { transform: scaleX(-1); }
  .reviews-carousel__dots { display: flex; align-items: center; gap: var(--ww-s-2); }
  .reviews-carousel__dot {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--ww-r-badge);
    background: var(--ww-rule); cursor: pointer;
    transition: width .35s var(--ww-ease), background-color .35s var(--ww-ease);
  }
  .reviews-carousel__dot.is-active { width: 18px; background: var(--ww-ink-strong); }
  .reviews-carousel__status {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  /* The discs float beside the panel only where there is margin to float
     into, as with the Examples carousel. */
  @media (min-width: 1200px) {
    .reviews-carousel { --nav-size: 55px; }
    .reviews-carousel__nav { position: absolute; top: 0; bottom: 0; margin-block: auto; }
    .reviews-carousel__nav--prev { left: -80px; }
    .reviews-carousel__nav--next { right: -80px; }
  }
  @media (max-width: 899.98px) {
    .reviews-carousel__slide { grid-template-columns: minmax(0, 1fr); gap: var(--ww-s-6); padding: var(--ww-s-7) var(--ww-s-6); }
    .reviews-carousel__text { font-size: var(--ww-body); }
  }
  @media (prefers-reduced-motion: reduce) {
    .reviews-carousel__slide, .reviews-carousel__nav, .reviews-carousel__dot { transition: none; }
  }
.websites-page #reviews{background:transparent;scroll-margin-top:110px}
#reviews .reviews-wrap{max-width:1240px}
#reviews .reviews-heading{margin-bottom:32px}
#reviews .reviews-carousel{margin-inline:auto;max-width:1000px;--ww-ink:var(--ink);--ww-ink-strong:var(--forest);--ww-ink-2:var(--muted);--ww-plate:rgba(255,255,255,.8);--ww-rule:#d3decf;--ww-r-xl:22px}
#reviews .reviews-carousel__source{margin:0;padding:0}
#reviews .reviews-carousel__text{margin:0;padding:0;border:0;font-style:normal}
#reviews .reviews-carousel__text p{color:var(--ink);font-size:17px;line-height:1.6}
#reviews .reviews-carousel__via{line-height:1.4}
#reviews .reviews-carousel__dot{min-height:6px;min-width:6px;position:relative}
#reviews .reviews-carousel__dot::after{content:'';position:absolute;inset:-12px}
@media(min-width:1200px){#reviews .reviews-carousel__nav--prev{left:-68px}#reviews .reviews-carousel__nav--next{right:-68px}}
@media(max-width:899.98px){#reviews .reviews-carousel__text p{font-size:16px}}