.comparison-table { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; }
.comparison-row { display: grid; grid-template-columns: 264px repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.comparison-row:first-child { border-top: 0; }
.comparison-row > * { min-width: 0; padding: 20px; }
.comparison-row.header > * { padding-bottom: 18px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.comparison-row.header small { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.comparison-row.header .elly { color: var(--magenta-deep); }
.row-label { align-self: start; text-wrap: balance; font-family: var(--font-heading); font-size: 17px; font-weight: 800; line-height: 1.3; }
.comparison-row .cell { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.4; color: var(--muted); }
.comparison-row .elly { background: #FFF6F9; }
.comparison-row .cell.elly { color: var(--ink); font-weight: 600; }
.comparison-row .who { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend .mark { width: 18px; height: 18px; }
.legend .mark .icon { width: 10px; height: 10px; }

/* Wide enough for "Onbevooroordeeld", the longest Dutch word in a row label */
@media (max-width: 1100px) {
  .comparison-row { grid-template-columns: 216px repeat(4, minmax(0, 1fr)); }
}
/* Once the columns get too narrow for the longest Dutch words, every row becomes a card that names each option */
@media (max-width: 960px) {
  .comparison-table { border-radius: 18px; }
  .comparison-row { grid-template-columns: minmax(0, 1fr); padding: 18px 0 16px; }
  .comparison-row.header { display: none; }
  .comparison-row > * { padding: 0 18px; }
  .row-label { margin-bottom: 10px; }
  .comparison-row .cell { padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
  .comparison-row .elly { background: none; }
  .comparison-row .cell.elly { margin: 6px 10px 0; padding: 10px 8px; border-radius: 12px; background: #FFF6F9; }
  .comparison-row .who { display: inline; font-family: var(--font-heading); font-weight: 700; color: var(--ink); }
}

/* Motion: the head settles, each row reveals as it scrolls in, its marks pop in column by column, and Elly's column lights up last */
@keyframes comparison-win { from { box-shadow: 0 0 0 0 rgba(6, 214, 160, .6); } to { box-shadow: 0 0 0 11px rgba(6, 214, 160, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .comparison.is-animated .section-head.is-shown > * { transition: opacity .6s ease-out, transform .7s cubic-bezier(.22, .8, .24, 1); }
  .comparison.is-animated .section-head.is-shown > :nth-child(2) { transition-delay: .08s; }
  .comparison.is-animated .section-head.is-shown > :nth-child(3) { transition-delay: .16s; }
  .comparison.is-animated .section-head:not(.is-shown) > * { opacity: 0; transform: translateY(18px); }
  /* Only the way in is animated, so the waiting state is set without anyone seeing it */
  .comparison.is-animated .comparison-row.is-shown { transition: opacity .5s ease-out, transform .6s cubic-bezier(.22, .8, .24, 1); transition-delay: var(--delay, 0s); }
  /* Faded, never hidden, so the table can be read before it has finished */
  .comparison.is-animated .comparison-row:not(.is-shown) { opacity: .35; transform: translateY(14px); }
  .comparison.is-animated .comparison-row:not(.is-shown) .mark { transform: scale(0); }
  /* Transitions rather than keyframes, so the marks do not pop again when the other language is shown */
  .comparison.is-animated .comparison-row.is-shown .mark { transition: transform .45s cubic-bezier(.3, 1.7, .5, 1); transition-delay: calc(var(--delay, 0s) + .25s + var(--column) * .22s); }
  .comparison.is-animated .comparison-row.is-shown .elly .mark { animation: comparison-win .8s ease-out calc(var(--delay, 0s) + 1.3s) both; }
  .comparison-row > :nth-child(2) { --column: 0; }
  .comparison-row > :nth-child(3) { --column: 1; }
  .comparison-row > :nth-child(4) { --column: 2; }
  .comparison-row > .elly { --column: 3.6; }
  .comparison.is-animated .comparison-row.is-shown .elly { transition: background-color .6s ease-out, color .6s ease-out; transition-delay: calc(var(--delay, 0s) + .95s); }
  .comparison.is-animated .comparison-row:not(.is-shown) .elly { background-color: transparent; }
  .comparison.is-animated .comparison-row.header:not(.is-shown) .elly { color: var(--muted); }
}