/* AgreeVia — app screenshot carousel ("showcase"). Shared by index.html and
   about.html. Loads after site.css (and after home.css/doc.css, order
   doesn't matter — no selector overlap). */

/* No horizontal padding here — this section is used both as a direct
   .sheet child (home.css supplies side padding, see its override) and
   inside .doc's already-padded column (about.html, no override needed). */
.showcase{padding:2.6rem 0 3.2rem;border-top:1px solid var(--rule-soft);text-align:center}
/* doc.css's `.section + .section` adjacency rule skips a section that
   directly follows .showcase instead of .section — restore its hairline. */
.showcase + .section{border-top:1px solid var(--rule-soft)}
.showcase .eyebrow{display:flex;justify-content:center}
.showcase h2{
  font-family:Newsreader,serif;font-weight:600;font-size:1.6rem;
  letter-spacing:-.018em;margin:0 0 1.9rem;
}

.carousel{position:relative;max-width:300px;margin:0 auto}
.carousel-frame{
  overflow:hidden;border-radius:22px;background:var(--backsheet);
  box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 20px 40px -20px rgba(20,41,77,.35);
}
.carousel-track{
  display:flex;list-style:none;margin:0;padding:0;touch-action:pan-y;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.carousel-slide{flex:0 0 100%;min-width:0}
.carousel-slide img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.3rem;height:2.3rem;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,41,77,.72);color:#fff;font-size:1.15rem;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s;
}
.carousel-btn:hover{background:var(--brand-deep)}
.carousel-btn.prev{left:-.55rem}
.carousel-btn.next{right:-.55rem}

.carousel-dots{display:flex;justify-content:center;gap:.5rem;margin:1.3rem 0 0;padding:0;list-style:none}
.carousel-dots .dot{
  width:.5rem;height:.5rem;border-radius:50%;border:none;background:var(--rule);
  padding:0;cursor:pointer;
}
.carousel-dots .dot[aria-selected="true"]{background:var(--tape);width:1.3rem;border-radius:4px;transition:width .2s}

@media (max-width:360px){
  .carousel{max-width:250px}
  .carousel-btn.prev{left:-.4rem}
  .carousel-btn.next{right:-.4rem}
}

@media (max-width:640px){
  .showcase{padding-top:2.2rem;padding-bottom:2.8rem}
}