/* #showcase — real product screens with a live theme switch (CUSTOM component, NOT the watch carousel).
   precedent only: #watch's card frame + caption — layout is a theme-toggled gallery, not a peek-carousel.
   one figure per app (HUD · Dictation · Clipboard). Dictation/Clipboard carry BOTH theme shots; the
   switch flips which one shows. HUD has no theme → always on. starts on the visitor's OS theme
   (prefers-color-scheme, set in JS); the active pill + visible shot derive from #showcase[data-theme]. */

#showcase {
  height: auto;
  min-height: 0;
  padding: 72px 24px 96px;
  display: block;
  text-align: center;
}
#showcase .sc-wrap { max-width: 1180px; margin: 0 auto; }

#showcase .eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .36em; text-transform: uppercase;
  color: var(--cyan);
}
#showcase h2 {
  margin: 9px 0 8px;
  font-size: 38px; line-height: 1.05;
  font-weight: 700; letter-spacing: -.022em;
}
#showcase h2 .blue { color: var(--blue-hi); }
#showcase .sub { font-size: 15px; color: var(--muted); margin-bottom: 26px; }

/* theme switch — pill segment; active half derived from #showcase[data-theme] (CSS, no JS class) */
#showcase .sc-switch {
  display: inline-flex; gap: 4px;
  padding: 4px; margin-bottom: 34px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(11,14,26,.6);
}
#showcase .sc-opt {
  border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  padding: 7px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
#showcase .sc-opt:hover { color: #fff; }
#showcase[data-theme="light"] .sc-opt[data-set="light"],
#showcase[data-theme="dark"]  .sc-opt[data-set="dark"] {
  background: var(--blue-hi); color: #fff;
}

/* gallery — HUD featured (full width), the two browsers side by side below */
#showcase .sc-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1100px; margin: 0 auto;
}
#showcase .sc-shot {
  margin: 0;
  background: linear-gradient(110deg, rgba(20,25,46,.82), rgba(11,14,26,.82));
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  text-align: left;
}
#showcase .sc-shot.feature { grid-column: 1 / -1; }
#showcase .sc-shot img {
  display: block;
  width: 100%; height: auto;
  border-bottom: 1px solid var(--line-2);
  background: #000;
}
#showcase figcaption {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px;
  font-size: 14px; font-weight: 600;
}
#showcase figcaption .sc-tag {
  font-size: 12px; font-weight: 500; color: var(--dim);
}

/* the switch in action: show only the shot matching the active theme */
#showcase[data-theme="light"] .sc-dark,
#showcase[data-theme="dark"]  .sc-light { display: none; }

@media (max-width: 760px) {
  #showcase { padding: 56px 14px 64px; }
  #showcase h2 { font-size: 28px; }
  #showcase .sc-gallery { grid-template-columns: 1fr; }
}