/* Tablet on phones, the theme toggle, and the pricing anchor offset. */

/* ---------------------------------------------------------------- mobile --
   The old behaviour pinned the shot at a fixed 1100px inside a horizontally
   scrollable window: readable, but it made people swipe sideways to see the
   product, and the scroll container's own clipping produced the odd banding
   along its edges. Phones now get a two-column crop of the same dashboard
   (img/interface22-m.png) which fits the width at a legible scale, so there is
   nothing to scroll and nothing to clip. */
@media (max-width: 768px) {
  .ss-screen {
    overflow: visible !important;
    justify-content: center;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .ss-screen picture,
  .ss-screen img {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  /* The scrollbar rule and the edge fade both belonged to the scroller. */
  .ss-screen::-webkit-scrollbar { display: none; }
  .ss-screen::before,
  .ss-screen::after { display: none !important; }
}

/* ----------------------------------------------------------- theme toggle --
   Sun / moon, the same pair the dashboard uses. Glass, like every other
   control on this page. */
.ss-theme {
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin: 1.5rem auto 0;
  padding: .25rem;
  width: max-content;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(0 0% 100% / .86), hsl(0 0% 100% / .86)) padding-box,
    linear-gradient(150deg,
        hsl(0 0% 100% / .95) 0%,
        hsl(var(--line-strong)) 30%,
        hsl(0 0% 100% / .9) 55%,
        hsl(var(--warm)) 78%,
        hsl(var(--line-strong)) 100%) border-box;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .05),
    0 6px 18px hsl(var(--deep) / .09),
    inset 0 1px hsl(0 0% 100% / .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: Arial, Helvetica, sans-serif;
}
.ss-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--fg-muted));
  font: inherit;
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.ss-theme-btn svg { width: 15px; height: 15px; }
.ss-theme-btn.is-on {
  background: hsl(var(--deep));
  color: hsl(var(--deep-fg));
  box-shadow: 0 1px 2px hsl(var(--deep) / .3), inset 0 1px hsl(0 0% 100% / .22);
}

/* ------------------------------------------------------- pricing anchor --
   html carries scroll-padding-top:92px but the sticky nav is 65px, so a jump
   to #pricing left a 27px sliver of the section above showing under the bar.
   Scoped to #pricing so the other anchors keep their breathing room. */
#pricing { scroll-margin-top: -27px; }