/* Sightline shared component styles. Framework-free; the static site imports the same file. */
:root {
  --sl-accent: #f48120;
  --sl-accent-ink: #ffffff;
  --sl-ink: #000000;
  --sl-muted: #415161;
  --sl-line: #d9d9d9;
  --sl-surface: #ffffff;
  --sl-radius: 10px;
  --sl-font: "Mazzard", "MazzardH-Regular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Comparison table -------------------------------------------------- */
.sl-comparison { font-family: var(--sl-font); color: var(--sl-ink); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sl-comparison table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sl-surface); border-radius: var(--sl-radius); overflow: hidden; margin: 0; }
.sl-comparison caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sl-comparison th, .sl-comparison td { padding: 14px 18px; text-align: center; border: 0; border-bottom: 1px solid var(--sl-line); font-size: 16px; line-height: 1.3; vertical-align: middle; }
.sl-comparison thead th { font-weight: 600; font-size: 17px; background: #000; color: #fff; border-bottom: 0; }
.sl-comparison tbody th { text-align: left; font-weight: 500; }
.sl-comparison tbody tr:last-child th, .sl-comparison tbody tr:last-child td { border-bottom: 0; }
.sl-comparison .is-highlight { background: var(--sl-accent); color: var(--sl-accent-ink); font-weight: 600; border-bottom-color: rgba(255, 255, 255, .35); }
/* The header row is one solid bar; only the body cells of the highlighted column take the accent. */
.sl-comparison thead .is-highlight { background: #000; color: #fff; }
.sl-comparison .sl-mark { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
.sl-comparison .sl-mark--no { opacity: .45; }
@media (max-width: 600px) {
  .sl-comparison th, .sl-comparison td { padding: 10px 8px; font-size: 14px; }
  .sl-comparison thead th { font-size: 14px; }
}

/* ---- Video grid -------------------------------------------------------- */
.sl-videos { display: grid; gap: 24px; grid-template-columns: repeat(var(--sl-cols, 2), minmax(0, 1fr)); font-family: var(--sl-font); }
.sl-videos__item { margin: 0; }
.sl-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--sl-radius); overflow: hidden; background: #000; cursor: pointer; }
.sl-video img, .sl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.sl-video__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: var(--sl-accent); transition: transform .15s ease; }
.sl-video__play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.sl-video:hover .sl-video__play, .sl-video:focus-visible .sl-video__play { transform: translate(-50%, -50%) scale(1.08); }
.sl-video:focus-visible { outline: 3px solid var(--sl-accent); outline-offset: 3px; }
.sl-videos__title { margin: 10px 0 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sl-ink); }
@media (max-width: 700px) { .sl-videos { grid-template-columns: 1fr; } }