/* landing/showcase.css — the "see the features" band: three phone frames, each
   holding a live iframe of a real page (scan template or a staged mock).

   The hero's .phone cannot be reused here — it is absolutely positioned and
   carries a 3D transform tied to the hero layout — so this is a flat twin of
   .phone-shell with the same skin (see hero.css). Keep the two in sync. */

.showcase{background:var(--warm2);padding:6rem 2.5rem 7rem}

.sc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;
  max-width:1100px;margin:4rem auto 0;
}
.sc-item{display:flex;flex-direction:column;align-items:center;gap:1.6rem}

/* ═══ CAROUSEL ═══
   The main landing shows the whole feature catalogue (UseCaseFeatures.all),
   which is far too many for the three-up grid the use-case pages use. Same
   markup, same .sc-item — only the container changes, so the two layouts can
   never drift apart. Must come after .sc-grid: equal specificity, source order
   decides. */
.sc-rail{position:relative}
.sc-rail-on{max-width:1100px;margin:4rem auto 0}
.sc-carousel{
  display:flex;max-width:none;margin:0;
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* Momentum scrolling on iOS, and no scrollbar eating into the phone frames —
     the dots and arrows below say "there is more" instead. */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sc-carousel::-webkit-scrollbar{display:none}
.sc-carousel .sc-item{
  /* Three across with two 2.5rem gaps between them. flex-basis, not width:
     the items must not shrink, or eleven of them would squeeze into one screen. */
  flex:0 0 calc((100% - 5rem) / 3);
  scroll-snap-align:start;
}

/* ═══ ARROWS ═══ (created by the landing script, so they never appear without JS
   to drive them) */
.sc-arrow{
  position:absolute;top:180px;z-index:3;
  width:44px;height:44px;border-radius:50%;
  background:var(--warm);border:1px solid var(--warm3);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(45,38,32,0.14);
  transition:opacity 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}
.sc-arrow svg{width:20px;height:20px}
.sc-arrow:hover:not(:disabled){border-color:var(--copper);transform:scale(1.06)}
.sc-arrow:disabled{opacity:0;pointer-events:none}
.sc-arrow-prev{left:-22px}
.sc-arrow-next{right:-22px}

/* ═══ DOTS ═══ */
.sc-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:2.5rem}
.sc-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--warm3);cursor:pointer;transition:background 0.2s ease,width 0.2s ease;
}
.sc-dot.active{background:var(--copper);width:22px;border-radius:4px}

/* ═══ PHONE FRAME ═══ */
.sc-phone{
  width:100%;max-width:290px;
  background:#0a0806;border:9px solid #111;border-radius:40px;
  box-shadow:0 22px 48px rgba(45,38,32,0.24);
  overflow:hidden;
}
.sc-phone-notch{
  height:22px;width:44%;margin:0 auto;
  background:#111;border-radius:0 0 14px 14px;
}
.sc-phone-screen{
  /* The iframe is laid out at 1/--sc-scale of the frame (≈390px, a real phone
     width) and scaled back down, so the embedded page hits its own mobile
     breakpoints instead of the ~272px the frame is physically wide. */
  --sc-scale:0.7;
  position:relative;height:440px;overflow:hidden;background:#faf3ee;
}
/* Fade the hard crop at the bottom so the frame reads as "more page below",
   not as a screenshot that ran out. */
.sc-phone-screen::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom,rgba(250,243,238,0),rgba(250,243,238,0.95));
  pointer-events:none;z-index:2;
}
.sc-frame{
  width:calc(100% / 0.7);height:calc(440px / 0.7);
  transform:scale(var(--sc-scale));transform-origin:top left;
  border:0;display:block;background:#fff;
  /* Marketing furniture: the frames are there to be looked at, not used. */
  pointer-events:none;
}

/* ═══ COPY ═══ */
.sc-copy{text-align:center;max-width:34ch}
.sc-emoji{font-size:1.5rem;margin-bottom:0.6rem}
.sc-h{
  font-family:var(--font-d);font-weight:800;font-size:1.35rem;
  letter-spacing:-0.02em;line-height:1.2;color:var(--ink);
}
.sc-p{font-size:0.95rem;color:#5C5040;line-height:1.6;margin-top:0.6rem}

/* Two across before the phone frames get too narrow to read. */
@media(max-width:1024px) and (min-width:861px){
  .sc-carousel .sc-item{flex:0 0 calc((100% - 2.5rem) / 2)}
}

@media(max-width:860px){
  .showcase{padding:4.5rem 1.5rem 5rem}
  .sc-grid{grid-template-columns:1fr;gap:3.5rem;margin-top:3rem}
  .sc-phone{max-width:270px}
  /* The .sc-grid rule above lands after the carousel block and would otherwise
     re-apply the grid's top margin and 3.5rem gap on top of the rail's. */
  .sc-carousel{margin-top:0;gap:1.5rem}
  .sc-rail-on{margin-top:3rem}
  .sc-carousel .sc-item{flex:0 0 100%}
  /* Swipe is the native gesture here, and 44px circles over a phone frame on a
     narrow screen cover the thing they are pointing at. */
  .sc-arrow{display:none}
  .sc-dots{margin-top:2rem}
}