/* The landing's hero as the foot of a skin page and of every catalogue page (web/scripts/skin-hero.mjs), after tokens.css
   and site.css. Fingerprinted as hero.<hash>.css by web/scripts/landing-page.mjs, so the pages carry no inline <style>.
   The clip is install.js's: .media, .segs, .seg and the pause button, as on the landing. Brand tokens only. */
.shero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem 1.5rem; align-items: start; margin-top: 5.5rem; padding-top: 3.5rem; border-top: 1px solid var(--tf-line); }
.shero__text { grid-column: 1 / span 5; min-width: 0; }
.shero__vis { grid-column: 6 / -1; min-width: 0; }
.shero h2 { margin: 0; font-size: 2.25rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; }
.shero__sub { margin: 0.4rem 0 0; color: var(--tf-muted); font-size: 1.125rem; }
.points { max-width: 38rem; margin: 1.5rem 0 0; padding-left: 1.2rem; list-style: disc; }
.points li + li { margin-top: 0.2rem; }
.shero .get { margin-top: 1.75rem; }
.shero__btn { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 1.25rem; border-radius: var(--tf-radius); background: var(--tf-fg); color: var(--tf-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.shero__btn:hover { background: var(--tf-solid-hover); }
.community { display: flex; width: max-content; align-items: center; gap: 0.5rem; min-height: 2.25rem; color: var(--tf-fg); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.community:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.community svg { flex: none; color: #5865f2; }
.media { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius); background: var(--tf-ink); }
.media video, .media img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.media__poster { position: absolute; inset: 0; height: 100%; }
.media__poster ~ video { position: relative; }
img[data-src]:not([src]) { visibility: hidden; }
:root:not(.js) [data-defer] img[data-src] { display: none; }
.segs { display: none; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 0.5rem; }
.js .segs { display: flex; }
@media (max-width: 30rem) { .js .segs { display: grid; grid-template-columns: repeat(3, max-content); justify-items: start; } }
.seg { position: relative; min-height: 2.25rem; padding: 0; border: 0; background: none; color: var(--tf-muted); font: inherit; font-size: 0.875rem; cursor: pointer; }
.seg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.4rem; height: 1px; background: var(--tf-fg); opacity: 0; transform: scaleX(var(--p, 0)); transform-origin: left; }
.seg:hover, .seg[aria-current="true"] { color: var(--tf-fg); }
.seg[aria-current="true"]::after { opacity: 1; }
.seg__x { display: none; }
.media__toggle { position: absolute; right: 0.625rem; bottom: 0.625rem; display: none; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius-sm); background: var(--tf-ink); color: var(--tf-fg); cursor: pointer; opacity: 0; }
.js .media__toggle { display: grid; }
.media:hover .media__toggle, .media__toggle:focus-visible, .media.is-paused .media__toggle { opacity: 1; }
.media__toggle svg { width: 0.8rem; height: 0.8rem; }
.media__toggle .i-play, .media.is-paused .media__toggle .i-pause { display: none; }
.media.is-paused .media__toggle .i-play { display: block; }

/* Under 50rem the hero stacks. */
@media (max-width: 50rem) {
  .shero { margin-top: 4rem; padding-top: 2.5rem; }
  .shero__text, .shero__vis { grid-column: 1 / -1; }
  .shero h2 { font-size: 1.875rem; }
  .seg { min-height: 2.75rem; }
  .media__toggle { width: 2.75rem; height: 2.75rem; }
}