/* Bingr: uitlegpagina's (iptv-app/, iptv-samsung-tv/, m3u-xtream-toevoegen/, vergelijking/).
   Bovenop assets/css/site.css (body.sub-page); alleen wat deze pagina's extra nodig hebben. */
.g-page main>.wrap{max-width:1040px}

/* kruimelpad */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--dim);margin-bottom:18px}
.crumbs a{color:var(--sec);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}

/* kop */
.g-head{max-width:820px}
.g-head .sub{font-size:clamp(17px,1.9vw,20px);color:#d8d8d8;max-width:62ch}
.g-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center}
.g-cta .btn{font-size:16px;padding:12px 20px}
.g-cta .btn svg{width:18px;height:18px}
.g-cta .lnk{color:var(--sec);font-size:15px;font-weight:600;margin-left:6px}
.g-cta .lnk:hover{color:#fff}
.g-status{margin-top:16px;color:var(--sec);font-size:14.5px;max-width:70ch}
.g-status b{color:#fff}
.g-page .need{margin-top:28px;max-width:820px}

/* screenshots */
.g-shots{display:grid;grid-template-columns:2.2fr 1fr;gap:16px;margin:40px 0 6px;align-items:center}
.g-tablewrap+.prose{margin-top:16px}
.g-shots.three{grid-template-columns:1fr 1fr}
.g-shots figure{margin:0}
.g-shots picture{display:block}
.g-shots img{width:100%;border-radius:12px;box-shadow:0 0 0 1px #ffffff1a,0 24px 60px #00000099;background:var(--s1)}
.g-shots .p img{border-radius:22px;max-width:260px;margin:0 auto}
.g-shots figcaption{font-size:14px;color:var(--sec);margin-top:10px}
.g-shots figcaption b{color:#fff;font-weight:600}

/* tekst */
.g-page .prose{max-width:760px}
.g-page .prose h2:first-child{margin-top:54px}
.g-page .prose h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:26px 0 6px}
.g-page .prose ol{padding-left:22px;margin-top:8px}
.g-page .prose ul+p{margin-top:14px}
.g-page .prose ol li::marker{color:var(--red);font-weight:800}
.g-sec{margin-top:58px}
.g-sec>.h2{font-size:clamp(24px,3vw,34px)}
.g-sec>.sub{font-size:17px}

/* functiekaarten */
.g-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.g-card{padding:22px;border-radius:14px;background:linear-gradient(150deg,#1d1d24 0%,#151515 60%,#1b0a0c 100%);border:1px solid #ffffff14}
.g-card h3{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.g-card p{color:#c8c8c8;font-size:15px;margin-top:8px;line-height:1.55}
.g-card a{color:#fff}
.g-card .ic{width:36px;height:36px;color:var(--red);margin-bottom:12px}

/* stappen */
.g-steps{list-style:none;counter-reset:s;margin-top:22px;display:grid;gap:12px;max-width:820px}
.g-steps li{counter-increment:s;position:relative;padding:18px 20px 18px 70px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.g-steps li::before{content:counter(s);position:absolute;left:18px;top:18px;width:36px;height:36px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-weight:800;font-size:17px}
.g-steps h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.g-steps p{color:#cfcfcf;font-size:15.5px;margin-top:4px;line-height:1.55}
.g-steps p+p{margin-top:6px}
.g-steps b{color:#fff}
.g-steps code,.g-card code{background:var(--s2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:14px;word-break:break-all}

/* vergelijkingstabel */
.g-tablewrap{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--s1)}
.g-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.g-table th,.g-table td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.g-table tr:last-child th,.g-table tr:last-child td{border-bottom:0}
.g-table thead th{font-size:14px;font-weight:800;color:#fff;background:#ffffff08;white-space:nowrap}
.g-table thead th.us{color:#fff;background:#e509142b;box-shadow:inset 0 -2px 0 var(--red)}
.g-table tbody th{font-weight:600;color:#fff;width:22%}
.g-table td{color:#d4d4d4}
.g-table td.us{background:#e509140d}
.g-table .y{color:var(--ok);font-weight:700}
.g-table .n{color:#ff8a8a;font-weight:700}
.g-table small{display:block;color:var(--dim);font-size:13px;margin-top:2px}
/* smalle schermen: eerste kolom blijft staan bij horizontaal scrollen in de tabel */
.g-table tbody th,.g-table thead th:first-child{position:sticky;left:0;z-index:1;background:#141414}
.g-table thead th:first-child{background:#1a1a1a}
.g-tnote{color:var(--dim);font-size:13.5px;margin-top:10px;max-width:820px}

/* streams-noot */
.g-note{display:flex;gap:14px;align-items:flex-start;margin-top:20px;padding:16px 18px;border-radius:12px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1f;max-width:820px}
.g-note svg{width:22px;height:22px;color:#fff;margin-top:2px}
.g-note p{color:#dcdcdc;font-size:15px;margin:0}

/* faq */
.g-page .faq{max-width:820px;margin-top:20px}

/* meer over bingr */
.g-more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.g-more a{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:12px;background:var(--s1);border:1px solid var(--line);text-decoration:none;transition:border-color .15s,background .15s}
.g-more a:hover{border-color:#ffffff59;background:#181818}
.g-more b{font-size:16px;line-height:1.3}
.g-more span{color:var(--sec);font-size:14px;line-height:1.45}
.g-more a[aria-current]{border-color:var(--red)}
.g-legal{margin-top:46px;color:var(--dim);font-size:13px;max-width:820px}

@media (max-width:980px){
  .g-cards{grid-template-columns:1fr 1fr}
  .g-more{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .g-shots,.g-shots.three{grid-template-columns:1fr}
  .g-shots .p{display:none}
  .g-cards,.g-more{grid-template-columns:1fr}
  .g-cta .btn{width:100%}
  .g-cta .lnk{margin:4px 0 0}
  .g-steps li{padding:16px 16px 16px 60px}
  .g-steps li::before{left:14px;top:16px;width:32px;height:32px;font-size:15px}
  .g-table{font-size:14px;min-width:600px}
  .g-table tbody th{width:118px;min-width:118px}
  .g-table th,.g-table td{padding:11px 10px}
  .g-sec{margin-top:46px}
}