/* Kiesvast accent (Dutch orange). Linked after site.css when SITE_ASSETS=/static/sites/kiesvast.
   Text on the orange surfaces is the ink colour: white on #ff7a00 fails WCAG AA (ink on it is about 6:1). */
:root {
  --marker: #ff7a00;
  --marker-deep: #e86a00;
  --marker-soft: #ffe8d1;
  --on-marker: #1a2238;
}
/* high contrast, dark (site.css a11y panel): a lighter orange on black, dark text on it */
html[data-a11y-contrast="dark"] {
  --marker: #ff9a3d; --marker-deep: #ff9a3d; --marker-soft: #33200d;
  --on-marker: #0c1322;
}
/* high contrast, light */
html[data-a11y-contrast="light"] {
  --marker: #ff7a00; --marker-deep: #b85400; --marker-soft: #fff0e0;
  --on-marker: #000000;
}
/* built-in hero art (src/public/routes/10_home.js HERO_ART) has the yellow as presentation
   attributes; CSS wins over those, so the chosen card's frame and tick follow the accent */
.hero-bg svg [fill="#ffcd2e"] { fill: var(--marker); }
.hero-bg svg [stroke="#ffcd2e"] { stroke: var(--marker); }
/* Dutch benefit labels are longer than the Hebrew ones: on desktop they fall 3+1 in the
   600px strip, so lay them out as an even 2x2 grid (mobile keeps the 4-column icon row). */
@media (min-width: 761px) {
  .benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits li + li { border-inline-start: 0; }
  .benefits li:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .benefits li:nth-child(n+3) { border-top: 1px solid var(--line); }
}