/* ===========================================================================
   iptvnederland.cloud — nl-NL (+ an English section at /en/)
   Design system NL-achromatic-signal-yellow · research/design-systems-a.md § SITE 2
   Naming: flat kebab under nn-. Unique to this site; never shared.

   Achromatic on purpose. The Dutch benchmark site is navy and blue, so navy and
   blue are vacated entirely. One signal colour, and it never bounds anything:
   #FFD400 on white measures 1.43:1, so every yellow region carries a mandatory
   2px ink edge and it is that edge which is the measured UI boundary.
   =========================================================================== */

:root {
  --nn-bg:#FFFFFF; --nn-surface:#FFFFFF; --nn-sunken:#F2F2EF;
  --nn-ink:#111110; --nn-ink-muted:#4A4A46;
  --nn-hairline:#DCDCD8; --nn-border-strong:#8A8A85;
  --nn-primary:#111110; --nn-on-primary:#FFFFFF;
  --nn-signal:#FFD400; --nn-on-signal:#1A1500; --nn-signal-edge:#111110;
  --nn-positive:#1C6B3C; --nn-negative:#A32014;
  --nn-focus:#111110;

  --nn-font:Arial,Helvetica,"Liberation Sans",system-ui,sans-serif;
  --nn-font-num:ui-monospace,Menlo,"DejaVu Sans Mono",Consolas,monospace;
  --nn-fs-base:1rem;
  --nn-fs-xs:0.667rem; --nn-fs-sm:1rem; --nn-fs-lg:1.5rem;
  --nn-fs-xl:2.25rem; --nn-fs-2xl:3.375rem;
  --nn-lh-body:1.45; --nn-lh-head:1.05; --nn-caps-tracking:0.02em;

  --nn-space-1:12px; --nn-space-2:24px; --nn-space-3:36px;
  --nn-space-4:48px; --nn-space-5:72px; --nn-space-6:120px;

  --nn-radius:0;
  --nn-maxw:1140px; --nn-gutter:24px;
  --nn-btn-h:52px; --nn-rule-w:2px; --nn-bar-w:8px; --nn-thumb:28px;
  --nn-focus-ring:0 0 0 3px rgba(17,17,16,.35);
}
:root[data-theme="dark"] {
  --nn-bg:#191917; --nn-surface:#232320; --nn-sunken:#111110;
  --nn-ink:#F5F5F3; --nn-ink-muted:#B0B0AA;
  --nn-hairline:#2E2E2A; --nn-border-strong:#74746E;
  --nn-primary:#F5F5F3; --nn-on-primary:#191917;
  --nn-signal:#FFD400; --nn-on-signal:#1A1500; --nn-signal-edge:#F5F5F3;
  --nn-positive:#63C98C; --nn-negative:#FF7A6B;
  --nn-focus:#FFD400; --nn-focus-ring:0 0 0 3px rgba(255,212,0,.4);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) {
    --nn-bg:#191917; --nn-surface:#232320; --nn-sunken:#111110;
    --nn-ink:#F5F5F3; --nn-ink-muted:#B0B0AA;
    --nn-hairline:#2E2E2A; --nn-border-strong:#74746E;
    --nn-primary:#F5F5F3; --nn-on-primary:#191917;
    --nn-signal-edge:#F5F5F3;
    --nn-positive:#63C98C; --nn-negative:#FF7A6B;
    --nn-focus:#FFD400; --nn-focus-ring:0 0 0 3px rgba(255,212,0,.4);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,212,0,.24)}
[id]{scroll-margin-top:88px}
body{margin:0;background:var(--nn-bg);color:var(--nn-ink);
  font:400 var(--nn-fs-base)/var(--nn-lh-body) var(--nn-font);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--nn-ink)}

/* Ratio 1.5 — the largest jumps in the network. Few sizes, big steps, no
   in-between. It is a notice, not a brochure. */
h1,h2,h3{font-weight:700;line-height:var(--nn-lh-head);letter-spacing:-.02em;
  margin:0 0 var(--nn-space-1)}
h1{font-size:var(--nn-fs-2xl)} h2{font-size:var(--nn-fs-xl)} h3{font-size:var(--nn-fs-lg)}
p{margin:0 0 var(--nn-space-1);max-width:62ch}
ul,ol{max-width:62ch}
.nn-num{font-family:var(--nn-font-num);font-variant-numeric:tabular-nums}
.nn-caps{text-transform:uppercase;letter-spacing:var(--nn-caps-tracking);
  font-size:var(--nn-fs-xs);font-weight:700}

/* The site's picture is a legible price signal: chart values stay printed on
   the bars, while yellow is always contained by a measured ink edge. */
.nn-signaalvak{padding-top:var(--nn-space-2)}
.nn-signaal{margin:0;border:var(--nn-rule-w) solid var(--nn-ink);display:grid;
  grid-template-columns:220px minmax(0,1fr);background:var(--nn-bg)}
.nn-signaal figcaption{padding:var(--nn-space-2);background:var(--nn-signal);color:var(--nn-on-signal);
  border-right:var(--nn-rule-w) solid var(--nn-signal-edge);display:flex;flex-direction:column;justify-content:space-between}
.nn-signaal figcaption strong{font-size:var(--nn-fs-lg);line-height:1}.nn-signaal figcaption span{font-size:var(--nn-fs-xs);font-weight:700}
.nn-signaal svg{display:block;width:100%;height:auto}.nn-signaal>div{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--nn-rule-w) solid var(--nn-ink);font:700 var(--nn-fs-xs)/1 var(--nn-font-num)}
.nn-signaal>div span{padding:var(--nn-space-1);text-align:center}.nn-signaal>div span+span{border-left:var(--nn-rule-w) solid var(--nn-ink)}
.nn-signaal-as{fill:none;stroke:var(--nn-ink);stroke-width:4}.nn-signaal-raster{fill:none;stroke:var(--nn-hairline);stroke-width:2}
.nn-signaal-balk{fill:var(--nn-ink)}.nn-signaal-balk--geel{fill:var(--nn-signal);stroke:var(--nn-signal-edge);stroke-width:4}
.nn-signaal text{fill:var(--nn-ink);font:700 26px var(--nn-font-num);text-anchor:middle}.nn-signaal--bewijs .nn-signaal-balk--geel{fill:var(--nn-bg)}
@media(max-width:680px){.nn-signaal{grid-template-columns:1fr}.nn-signaal figcaption{border-right:0;border-bottom:var(--nn-rule-w) solid var(--nn-ink);gap:var(--nn-space-1)}
  .nn-signaal>div{grid-column:1}.nn-signaal svg{min-height:154px}.nn-signaal figcaption strong{font-size:var(--nn-fs-sm)}}

.nn-wrap{max-width:var(--nn-maxw);margin-inline:auto;padding-inline:var(--nn-gutter)}
.nn-band{padding-block:var(--nn-space-4)}
.nn-band--tight{padding-block:var(--nn-space-3)}
.nn-band--sunken{background:var(--nn-sunken)}
.nn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nn-cols{display:grid;gap:var(--nn-space-2);grid-template-columns:1fr}
.nn-cols>*{min-width:0}
@media (min-width:860px){ .nn-cols{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} }

:focus-visible{outline:3px solid var(--nn-focus);outline-offset:2px;box-shadow:var(--nn-focus-ring)}
.nn-main:focus,.nn-main:focus-visible{outline:none;box-shadow:none}
.nn-skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--nn-ink);
  color:var(--nn-bg);padding:var(--nn-space-1) var(--nn-space-2);font-weight:700}
.nn-skip:focus{left:0;top:0}

/* --------------------------------------------------------------- header --- */
/* One slim sticky bar, four text links, no hamburger and no dropdown. At 640px
   the four links still fit, so there is no mobile menu component at all. */
.nn-head{position:sticky;top:0;z-index:60;background:var(--nn-bg);
  border-bottom:var(--nn-rule-w) solid var(--nn-ink)}
.nn-head-in{display:flex;align-items:center;gap:var(--nn-space-2);flex-wrap:wrap;
  min-height:60px;max-width:var(--nn-maxw);margin-inline:auto;padding-inline:var(--nn-gutter)}
.nn-mark{font-weight:700;font-size:var(--nn-fs-lg);text-decoration:none;letter-spacing:-.03em}
.nn-nav{display:flex;gap:var(--nn-space-2);flex-wrap:wrap;margin-inline:auto}
.nn-nav a{text-decoration:none;font-weight:700;padding-block:var(--nn-space-1);
  border-bottom:var(--nn-rule-w) solid transparent}
.nn-nav a[aria-current="page"]{border-bottom-color:var(--nn-ink)}
.nn-nav a:hover{border-bottom-color:var(--nn-border-strong)}

/* -------------------------------------------------------------- buttons --- */
.nn-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--nn-btn-h);padding-inline:var(--nn-space-2);border-radius:var(--nn-radius);
  border:var(--nn-rule-w) solid var(--nn-ink);background:var(--nn-primary);
  color:var(--nn-on-primary);font:700 var(--nn-fs-base)/1 var(--nn-font);
  text-decoration:none;cursor:pointer}
.nn-btn--ghost{background:transparent;color:var(--nn-ink)}
/* The signal button. The yellow never bounds it — the 2px ink edge does. */
.nn-btn--signal{background:var(--nn-signal);color:var(--nn-on-signal);border-color:var(--nn-signal-edge)}
.nn-btn:hover{filter:brightness(.94)}
.nn-row{display:flex;flex-wrap:wrap;gap:var(--nn-space-1);align-items:center}

/* ----------------------------------------------------------- price first --- */
/* The number you actually pay, before you have scrolled. */
.nn-price{border:var(--nn-rule-w) solid var(--nn-ink);padding:var(--nn-space-2);display:grid;gap:0}
@media(min-width:880px){.nn-price{grid-template-columns:320px 1fr 1fr;column-gap:var(--nn-space-2)}
  .nn-price>.nn-caps,.nn-price-out,.nn-price-sub,.nn-price-note{grid-column:1}.nn-price>.nn-field{grid-column:2/-1}
  .nn-price>.nn-row,.nn-price>p:last-child{grid-column:2/-1}.nn-price-out{grid-row:2}.nn-price-sub{grid-row:3}.nn-price-note{grid-row:4;align-self:start}}
.nn-price-out{font-family:var(--nn-font-num);font-size:var(--nn-fs-2xl);
  line-height:1;font-weight:700;display:block}
.nn-price-sub{font-family:var(--nn-font-num);color:var(--nn-ink-muted);display:block;
  margin-top:var(--nn-space-1)}
.nn-price-note{display:inline-block;background:var(--nn-signal);color:var(--nn-on-signal);
  border:var(--nn-signal-edge-w,2px) solid var(--nn-signal-edge);
  padding:2px var(--nn-space-1);font-weight:700;font-size:var(--nn-fs-xs);
  text-transform:uppercase;letter-spacing:var(--nn-caps-tracking);margin-top:var(--nn-space-1)}

.nn-field{margin-block:var(--nn-space-2)}
.nn-field>legend,.nn-field>.nn-caps{margin-bottom:var(--nn-space-1);display:block}
fieldset.nn-field{border:0;padding:0;margin-inline:0}

/* Duration as a slider — the third distinct pricing interaction in the network. */
.nn-slider{width:100%;max-width:520px;height:var(--nn-thumb);accent-color:var(--nn-ink)}
.nn-ticks{display:flex;justify-content:space-between;max-width:520px;
  font-family:var(--nn-font-num);font-size:var(--nn-fs-xs);color:var(--nn-ink-muted);
  margin-top:4px}

/* Devices as radios, so the Basic cap is a visible absence of options. */
.nn-radios{display:flex;flex-wrap:wrap;gap:var(--nn-space-1)}
.nn-radios label{display:inline-flex;align-items:center;gap:8px;
  border:var(--nn-rule-w) solid var(--nn-border-strong);padding:0 var(--nn-space-1);
  min-height:44px;font-family:var(--nn-font-num);font-weight:700;cursor:pointer}
.nn-radios input{width:20px;height:20px;accent-color:var(--nn-ink)}
.nn-radios label:has(input:checked){background:var(--nn-ink);color:var(--nn-bg);
  border-color:var(--nn-ink)}
.nn-radios label:has(input:disabled){opacity:.4;cursor:not-allowed}

.nn-cap{border:var(--nn-rule-w) solid var(--nn-signal-edge);background:var(--nn-signal);
  color:var(--nn-on-signal);padding:var(--nn-space-1) var(--nn-space-2);
  margin-top:var(--nn-space-1)}
.nn-cap[hidden]{display:none}
.nn-cap p{margin:0 0 8px;max-width:none}

/* --------------------------------------------------------------- tables --- */
.nn-tablewrap{overflow-x:auto;border:var(--nn-rule-w) solid var(--nn-ink);padding:var(--nn-space-1)}
.nn-table{width:100%;border-collapse:collapse;font-family:var(--nn-font-num);
  font-variant-numeric:tabular-nums;font-size:var(--nn-fs-sm)}
.nn-table caption{text-align:left;font-family:var(--nn-font);color:var(--nn-ink-muted);
  font-size:var(--nn-fs-xs);margin-bottom:var(--nn-space-1);text-transform:uppercase;
  letter-spacing:var(--nn-caps-tracking);font-weight:700}
.nn-table th,.nn-table td{padding:10px var(--nn-space-1);text-align:right;
  border-bottom:1px solid var(--nn-hairline)}
.nn-table th:first-child,.nn-table td:first-child{text-align:left;font-family:var(--nn-font)}
.nn-table thead th{border-bottom:var(--nn-rule-w) solid var(--nn-ink);font-family:var(--nn-font);
  text-transform:uppercase;letter-spacing:var(--nn-caps-tracking);font-size:var(--nn-fs-xs)}

/* Cards are rules, not boxes: an 8px bar on the left and nothing else. */
.nn-note{border-left:var(--nn-bar-w) solid var(--nn-ink);padding-left:var(--nn-space-2)}
.nn-note--signal{border-left-color:var(--nn-signal);
  box-shadow:-10px 0 0 -8px var(--nn-signal-edge)}
.nn-note h3{margin-top:0}
.nn-note p:last-child{margin-bottom:0}

.nn-faq details{border-bottom:1px solid var(--nn-hairline);padding-block:var(--nn-space-1)}
.nn-faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.nn-faq details p:last-child{margin-bottom:0}

.nn-foot{border-top:var(--nn-rule-w) solid var(--nn-ink);margin-top:var(--nn-space-5);
  padding-block:var(--nn-space-3);background:var(--nn-sunken)}
.nn-foot h2{font-size:var(--nn-fs-xs);text-transform:uppercase;
  letter-spacing:var(--nn-caps-tracking)}
.nn-foot ul{list-style:none;padding:0;margin:0}
.nn-foot li{margin-bottom:8px}
.nn-foot-legal{color:var(--nn-ink-muted);font-size:var(--nn-fs-xs);margin-top:var(--nn-space-2)}

.nn-theme{background:transparent;border:var(--nn-rule-w) solid var(--nn-border-strong);
  border-radius:var(--nn-radius);color:var(--nn-ink);font:inherit;font-size:var(--nn-fs-xs);
  min-height:44px;padding-inline:var(--nn-space-1);cursor:pointer;font-weight:700}

@media(max-width:720px){:root{--nn-gutter:16px;--nn-fs-2xl:2.55rem}.nn-head-in{gap:8px}.nn-mark{width:100%;font-size:var(--nn-fs-sm)}
  .nn-nav{order:3;width:100%;justify-content:space-between;gap:8px;margin:0}.nn-theme{position:absolute;right:var(--nn-gutter);top:8px}
  .nn-band{padding-block:var(--nn-space-3)}.nn-row{display:grid}.nn-row .nn-btn{width:100%}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Refreshed palette isolation: legacy components stay in their authored default theme. */
body{--nn-bg:#FFFFFF; --nn-surface:#FFFFFF; --nn-sunken:#F2F2EF;
  --nn-ink:#111110; --nn-ink-muted:#4A4A46;
  --nn-hairline:#DCDCD8; --nn-border-strong:#8A8A85;
  --nn-primary:#111110; --nn-on-primary:#FFFFFF;
  --nn-signal:#FFD400; --nn-on-signal:#1A1500; --nn-signal-edge:#111110;
  --nn-positive:#1C6B3C; --nn-negative:#A32014;
  --nn-focus:#111110;

  --nn-font:Arial,Helvetica,"Liberation Sans",system-ui,sans-serif;
  --nn-font-num:ui-monospace,Menlo,"DejaVu Sans Mono",Consolas,monospace;
  --nn-fs-base:1rem;
  --nn-fs-xs:0.667rem; --nn-fs-sm:1rem; --nn-fs-lg:1.5rem;
  --nn-fs-xl:2.25rem; --nn-fs-2xl:3.375rem;
  --nn-lh-body:1.45; --nn-lh-head:1.05; --nn-caps-tracking:0.02em;

  --nn-space-1:12px; --nn-space-2:24px; --nn-space-3:36px;
  --nn-space-4:48px; --nn-space-5:72px; --nn-space-6:120px;

  --nn-radius:0;
  --nn-maxw:1140px; --nn-gutter:24px;
  --nn-btn-h:52px; --nn-rule-w:2px; --nn-bar-w:8px; --nn-thumb:28px;
  --nn-focus-ring:0 0 0 3px rgba(17,17,16,.35);}