Feature Compare

Without and with on one grid, each line level with its answer, yours on a card of ink. A phone switch rolls the lines over. --table: columns, yours in an ink pill.

View the code Ask your AI

Feature sections No dependencies sectioncomparisonwhy usversusbefore aftercomparison tablepricingagencysaas Added Nov 2026

/anim/feature-compare/ GitHub Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Add the Kodza Feature Compare to my page.

Not plugged in yet?

claude mcp add -t http kodza https://kodza.dev/api/mcp

Also in Codex, Cursor and VS Code.

kodza-feature-compare.html

<section class="kodza-feature-compare"><div class="kodza-feature-compare__inner"><div class="kodza-feature-compare__head"><p class="kodza-feature-compare__eyebrow">04 · Why us</p><h2 class="kodza-feature-compare__title"><span class="kodza-feature-compare__line"><span class="kodza-feature-compare__rise">Same kitchen.</span></span> <span class="kodza-feature-compare__line"><span class="kodza-feature-compare__rise">Different quote.</span></span></h2><p class="kodza-feature-compare__intro">Every carpenter in Rouen can fit a kitchen. The difference is everything around the fitting, so here it is, line by line.</p></div><div class="kodza-feature-compare__board"><div class="kodza-feature-compare__sides"><div class="kodza-feature-compare__side kodza-feature-compare__side--without"><h3 class="kodza-feature-compare__name">The usual quote</h3><p class="kodza-feature-compare__note">Three of them, read in March</p></div><div class="kodza-feature-compare__side kodza-feature-compare__side--with"><h3 class="kodza-feature-compare__name">Ours</h3><p class="kodza-feature-compare__note">Atelier Vallin, since 2009</p></div></div><ul class="kodza-feature-compare__rows"><li class="kodza-feature-compare__row"><p class="kodza-feature-compare__topic">Price</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--without">A price per square metre, then the extras turn up one by one.</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--with">One price, fixed before we start. Any extra is written down and signed first.</p></li><li class="kodza-feature-compare__row"><p class="kodza-feature-compare__topic">Dates</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--without">Somewhere between two and six weeks, depending.</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--with">A start date in writing. If it moves, you hear it from us, a week before.</p></li><li class="kodza-feature-compare__row"><p class="kodza-feature-compare__topic">The site</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--without">Offcuts and dust, left for you to deal with.</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--with">Swept every evening. The skip leaves with us.</p></li><li class="kodza-feature-compare__row"><p class="kodza-feature-compare__topic">After the deposit</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--without">The phone that rang twice a day stops ringing.</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--with">One person, one number, an answer the same day.</p></li><li class="kodza-feature-compare__row"><p class="kodza-feature-compare__topic">Guarantee</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--without">Ten-year cover, somewhere in the small print.</p><p class="kodza-feature-compare__cell kodza-feature-compare__cell--with">The ten-year insurance certificate, stapled to the quote.</p></li></ul></div></div></section>
<section class="kodza-feature-compare kodza-feature-compare--table"><div class="kodza-feature-compare__inner"><div class="kodza-feature-compare__head"><p class="kodza-feature-compare__eyebrow">05 · Compare</p><h2 class="kodza-feature-compare__title"><span class="kodza-feature-compare__line"><span class="kodza-feature-compare__rise">Send the invoice.</span></span> <span class="kodza-feature-compare__line"><span class="kodza-feature-compare__rise">Keep the evening.</span></span></h2><p class="kodza-feature-compare__intro">Most invoicing tools want a dashboard, a plan and a webinar. Reçu wants your phone and your client's email.</p></div><div class="kodza-feature-compare__table-wrap"><table class="kodza-feature-compare__table"><caption class="kodza-feature-compare__caption">Reçu compared with most invoicing tools and a spreadsheet</caption><thead><tr><td class="kodza-feature-compare__corner"></td><th class="kodza-feature-compare__col" scope="col">Reçu</th><th class="kodza-feature-compare__col" scope="col">Most tools</th><th class="kodza-feature-compare__col" scope="col">A spreadsheet</th></tr></thead><tbody><tr><th class="kodza-feature-compare__label" scope="row">Invoice from your phone</th><td data-mark="yes"><span class="kodza-feature-compare__said">Yes</span></td><td data-mark="partly"><span class="kodza-feature-compare__said">Partly</span><span class="kodza-feature-compare__detail">Read-only app</span></td><td data-mark="no"><span class="kodza-feature-compare__said">No</span></td></tr><tr><th class="kodza-feature-compare__label" scope="row">Reminders that go out alone</th><td data-mark="yes"><span class="kodza-feature-compare__said">Yes</span><span class="kodza-feature-compare__detail">Day 7, day 21</span></td><td data-mark="yes"><span class="kodza-feature-compare__said">Yes</span><span class="kodza-feature-compare__detail">Paid plan</span></td><td data-mark="no"><span class="kodza-feature-compare__said">No</span></td></tr><tr><th class="kodza-feature-compare__label" scope="row">Numbering that never skips</th><td data-mark="yes"><span class="kodza-feature-compare__said">Yes</span></td><td data-mark="yes"><span class="kodza-feature-compare__said">Yes</span></td><td data-mark="no"><span class="kodza-feature-compare__said">No</span><span class="kodza-feature-compare__detail">Up to you</span></td></tr><tr><th class="kodza-feature-compare__label" scope="row">Your accountant's access</th><td data-mark="yes"><span class="kodza-feature-compare__said">Yes</span></td><td data-mark="partly"><span class="kodza-feature-compare__said">Partly</span><span class="kodza-feature-compare__detail">Extra seat</span></td><td data-mark="partly"><span class="kodza-feature-compare__said">Partly</span><span class="kodza-feature-compare__detail">By email</span></td></tr><tr><th class="kodza-feature-compare__label" scope="row">Price</th><td><span class="kodza-feature-compare__value">Free</span></td><td><span class="kodza-feature-compare__value">€15 a month</span></td><td><span class="kodza-feature-compare__value">Your evenings</span></td></tr></tbody></table></div></div></section>

kodza-feature-compare.css

/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Feature Compare
   "Without" and "with" face to face, on one grid: each line on one side has its answer on the
   other at the same height, the "with" side on a card of ink. Hovering or focusing a line lights
   its twin on the other card. On a phone a Without / With switch rolls the lines over one by one
   as the ink curtain reaches them, and the height never jumps. --table makes it a table of 3 or
   4 columns, yours (the first) in a pill of ink, each mark drawn and said in text.
   Everything is tuned with the --kz-feature-compare-* variables. */
.kodza-feature-compare {
  --kz-feature-compare-ink: var(--kz-color-ink, #0a0a0a);
  --kz-feature-compare-dim: color-mix(in srgb, var(--kz-feature-compare-ink) 66%, transparent);
  --kz-feature-compare-faint: color-mix(in srgb, var(--kz-feature-compare-ink) 60%, transparent);
  --kz-feature-compare-line: color-mix(in srgb, var(--kz-feature-compare-ink) 12%, transparent); /* the hairlines */
  --kz-feature-compare-card: var(--kz-color-paper, #fff); /* the "without" card, the switch */
  --kz-feature-compare-card-line: color-mix(in srgb, var(--kz-feature-compare-ink) 10%, transparent); /* its outline */
  --kz-feature-compare-accent: var(--kz-color-accent, var(--kz-feature-compare-ink)); /* the "with" card, your column */
  --kz-feature-compare-on-accent: var(--kz-color-on-accent, var(--kz-feature-compare-card)); /* the text on it */
  --kz-feature-compare-bg: transparent;
  --kz-feature-compare-width: var(--kz-page-width, 1440px); /* the content column: the page's, set by the site */
  --kz-feature-compare-gutter: var(--kz-page-gutter, clamp(16px, 4vw, 40px)); /* the space kept at the screen edges */
  --kz-feature-compare-pad-top: clamp(56px, 7vw, 112px);
  --kz-feature-compare-pad-bottom: clamp(56px, 7vw, 112px);
  --kz-feature-compare-size: clamp(28px, 3.4vw, 44px); /* the title */
  --kz-feature-compare-topic: 20%; /* the column of the topics, left of the cards */
  --kz-feature-compare-gap: 16px; /* between the two cards */
  --kz-feature-compare-pad-x: 28px; /* inside a card */
  --kz-feature-compare-pad-y: 20px;
  --kz-feature-compare-radius: calc(16px * var(--kz-radius-scale, 1));
  --kz-feature-compare-label: 34%; /* --table: the column of the row names */
  --kz-feature-compare-mono: var(--kz-font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
  --kz-feature-compare-ease: cubic-bezier(0.22, 1, 0.36, 1);

  container: kodza-feature-compare / inline-size;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--kz-feature-compare-pad-top);
  padding-bottom: var(--kz-feature-compare-pad-bottom);
  background: var(--kz-feature-compare-bg);
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__inner {
  box-sizing: border-box;
  max-width: calc(var(--kz-feature-compare-width) + 2 * var(--kz-feature-compare-gutter));
  margin: 0 auto;
  padding-left: max(var(--kz-feature-compare-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--kz-feature-compare-gutter), env(safe-area-inset-right, 0px));
}

/* The head: a label, the title on the left, the intro on the right on the title's first line.
   Each part can go */
.kodza-feature-compare__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "eyebrow ." "title intro";
  column-gap: clamp(32px, 6vw, 96px);
  margin-bottom: clamp(48px, 6vw, 88px);
}

.kodza-feature-compare__eyebrow {
  grid-area: eyebrow;
  margin: 0 0 20px;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12.5px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: var(--kz-font-label-leading, 1.5);
  letter-spacing: var(--kz-font-label-tracking, 0.02em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__title {
  grid-area: title;
  align-self: first baseline;
  margin: 0;
  font-family: var(--kz-font-display, inherit);
  font-size: calc(var(--kz-feature-compare-size) * var(--kz-font-display-scale, 1));
  font-weight: var(--kz-font-display-weight, 600);
  line-height: 1.04;
  letter-spacing: var(--kz-font-display-tracking, -0.045em);
  text-transform: var(--kz-font-display-case, inherit);
  text-wrap: balance;
  color: var(--kz-feature-compare-ink);
}

/* Each line of the title is its own mask: its words rise from behind its bottom edge */
.kodza-feature-compare__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.kodza-feature-compare__rise {
  display: block;
  text-wrap: balance; /* a line too long for its column breaks into two even halves */
}

.kodza-feature-compare__intro {
  grid-area: intro;
  align-self: first baseline;
  max-width: 440px;
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--kz-feature-compare-dim);
  text-wrap: pretty;
}

/* The board: one grid, the topics on the left, then the two cards. The cards are drawn behind
   the rows, so a line and its answer always share one row */
.kodza-feature-compare__board {
  --kz-feature-compare-card-width: calc((100% - var(--kz-feature-compare-topic) - 2 * var(--kz-feature-compare-gap)) / 2);
  position: relative;
  isolation: isolate;
}

.kodza-feature-compare__board::before,
.kodza-feature-compare__board::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: var(--kz-feature-compare-card-width);
  border-radius: var(--kz-feature-compare-radius);
  pointer-events: none;
}

.kodza-feature-compare__board::before {
  right: calc(var(--kz-feature-compare-card-width) + var(--kz-feature-compare-gap));
  background: var(--kz-feature-compare-card);
  box-shadow: inset 0 0 0 1px var(--kz-feature-compare-card-line);
}

.kodza-feature-compare__board::after {
  right: 0;
  background: var(--kz-feature-compare-accent);
}

/* The twin lights, one per card, set on the line under the pointer or the focus */
.kodza-feature-compare__band {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 0;
  width: calc(var(--kz-feature-compare-card-width) - 16px);
  border-radius: calc(10px * var(--kz-radius-scale, 1));
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(0.25s * var(--kz-motion-scale, 1)) ease;
}

.kodza-feature-compare__band.is-on {
  opacity: 1;
}

.kodza-feature-compare__band--without {
  right: calc(var(--kz-feature-compare-card-width) + var(--kz-feature-compare-gap) + 8px);
  background: color-mix(in srgb, var(--kz-feature-compare-ink) 6%, transparent);
}

.kodza-feature-compare__band--with {
  right: 8px;
  background: color-mix(in srgb, var(--kz-feature-compare-on-accent) 12%, transparent);
}

.kodza-feature-compare__sides,
.kodza-feature-compare__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--kz-feature-compare-topic) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--kz-feature-compare-gap);
}

.kodza-feature-compare__side {
  box-sizing: border-box;
  padding: 28px var(--kz-feature-compare-pad-x) 22px;
}

.kodza-feature-compare__side--without {
  grid-column: 2;
}

.kodza-feature-compare__side--with {
  grid-column: 3;
  color: var(--kz-feature-compare-on-accent);
}

.kodza-feature-compare__name {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: inherit;
  text-wrap: balance;
}

.kodza-feature-compare__note {
  margin: 6px 0 0;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12px);
  font-weight: var(--kz-font-label-weight, 400);
  line-height: var(--kz-font-label-leading, 1.5);
  letter-spacing: var(--kz-font-label-tracking, 0.01em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__side--with .kodza-feature-compare__note {
  color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 62%, transparent);
}

/* The lines: a hairline above each one, on the page under the topic and inside each card */
.kodza-feature-compare__rows {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.kodza-feature-compare__row {
  align-items: first baseline;
  margin: 0;
  padding: 0;
  background: linear-gradient(var(--kz-feature-compare-line), var(--kz-feature-compare-line)) 0 0 / var(--kz-feature-compare-topic) 1px no-repeat;
}

.kodza-feature-compare__row::before,
.kodza-feature-compare__row::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  width: calc(var(--kz-feature-compare-card-width) - 2 * var(--kz-feature-compare-pad-x));
  pointer-events: none;
}

.kodza-feature-compare__row::before {
  right: calc(var(--kz-feature-compare-card-width) + var(--kz-feature-compare-gap) + var(--kz-feature-compare-pad-x));
  background: var(--kz-feature-compare-line);
}

.kodza-feature-compare__row::after {
  right: var(--kz-feature-compare-pad-x);
  background: color-mix(in srgb, var(--kz-feature-compare-on-accent) 14%, transparent);
}

.kodza-feature-compare__topic {
  margin: 0;
  padding: var(--kz-feature-compare-pad-y) 16px 0 0;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12.5px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: var(--kz-font-label-leading, 1.5);
  letter-spacing: var(--kz-font-label-tracking, 0.02em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-dim);
  transition: color calc(0.2s * var(--kz-motion-scale, 1)) ease;
}

.kodza-feature-compare__cell {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: var(--kz-feature-compare-pad-y) var(--kz-feature-compare-pad-x) var(--kz-feature-compare-pad-y) calc(var(--kz-feature-compare-pad-x) + 30px);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  transition: color calc(0.2s * var(--kz-motion-scale, 1)) ease;
}

/* The mark before each answer: a dash on the usual side, a tick on yours */
.kodza-feature-compare__cell::before {
  content: "";
  position: absolute;
  left: var(--kz-feature-compare-pad-x);
  top: calc(var(--kz-feature-compare-pad-y) + (1.55em - 18px) / 2);
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--kz-feature-compare-mark) center / contain no-repeat;
  mask: var(--kz-feature-compare-mark) center / contain no-repeat;
}

.kodza-feature-compare__cell--without {
  --kz-feature-compare-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 9h8'/%3E%3C/svg%3E");
  color: var(--kz-feature-compare-dim);
}

.kodza-feature-compare__cell--with {
  --kz-feature-compare-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 9.6l3.1 3L13.8 5.6'/%3E%3C/svg%3E");
  color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 78%, transparent);
}

/* A lit line: its topic and both answers come up to full ink */
.kodza-feature-compare__row.is-lit .kodza-feature-compare__topic,
.kodza-feature-compare__row:focus-within .kodza-feature-compare__topic,
.kodza-feature-compare__row.is-lit .kodza-feature-compare__cell--without,
.kodza-feature-compare__row:focus-within .kodza-feature-compare__cell--without {
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__row.is-lit .kodza-feature-compare__cell--with,
.kodza-feature-compare__row:focus-within .kodza-feature-compare__cell--with {
  color: var(--kz-feature-compare-on-accent);
}

.kodza-feature-compare__cell a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.kodza-feature-compare__cell a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: calc(4px * var(--kz-radius-scale, 1));
}

/* The phone switch, written by the script: hidden until the board is too narrow for two cards */
.kodza-feature-compare__switch {
  position: relative;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  box-sizing: border-box;
  height: 44px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: var(--kz-radius-pill, 999px);
  background: var(--kz-feature-compare-card);
  box-shadow: inset 0 0 0 1px var(--kz-feature-compare-card-line);
}

.kodza-feature-compare__option,
.kodza-feature-compare__thumb > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 12px;
  font-family: var(--kz-font-label, inherit);
  font-size: var(--kz-font-label-size, 15px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: 1;
  letter-spacing: var(--kz-font-label-tracking, normal);
  text-transform: var(--kz-font-label-case, inherit);
  white-space: nowrap;
}

.kodza-feature-compare__option {
  position: relative;
  color: var(--kz-feature-compare-dim);
  cursor: pointer;
  transition: color calc(0.2s * var(--kz-motion-scale, 1)) ease;
  -webkit-tap-highlight-color: transparent;
}

.kodza-feature-compare__option > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.kodza-feature-compare__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* The pill of ink, and on it the same two names in paper: the names change colour exactly at its
   edges as it slides */
.kodza-feature-compare__thumb {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 4px;
  border-radius: inherit;
  background: var(--kz-feature-compare-accent);
  color: var(--kz-feature-compare-on-accent);
  clip-path: inset(4px 50% 4px 4px round var(--kz-radius-pill, 999px));
  pointer-events: none;
  transition: clip-path calc(0.45s * var(--kz-motion-scale, 1)) cubic-bezier(0.65, 0, 0.35, 1);
}

.kodza-feature-compare__thumb > span {
  overflow: hidden;
}

.kodza-feature-compare.is-with .kodza-feature-compare__thumb {
  clip-path: inset(4px 4px 4px 50% round var(--kz-radius-pill, 999px));
}

.kodza-feature-compare__switch:has(.kodza-feature-compare__input:focus-visible) {
  outline: 2px solid var(--kz-feature-compare-ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .kodza-feature-compare__option:hover {
    color: var(--kz-feature-compare-ink);
  }
}

/* --table: a table of 3 or 4 columns, the first one yours, in a pill of ink */
.kodza-feature-compare__table-wrap {
  --kz-feature-compare-count: 3;
  position: relative;
  isolation: isolate;
}

.kodza-feature-compare__table-wrap:has(thead th:nth-child(5)) {
  --kz-feature-compare-count: 4;
}

.kodza-feature-compare__table-wrap:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) {
  --kz-feature-compare-count: 2;
}

.kodza-feature-compare__table-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: var(--kz-feature-compare-label);
  width: calc((100% - var(--kz-feature-compare-label)) / var(--kz-feature-compare-count));
  border-radius: calc(20px * var(--kz-radius-scale, 1));
  background: var(--kz-feature-compare-accent);
  pointer-events: none;
}

.kodza-feature-compare__table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  color: inherit;
}

.kodza-feature-compare__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kodza-feature-compare__table th,
.kodza-feature-compare__table td {
  box-sizing: border-box;
  padding: 18px 12px;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__corner {
  width: var(--kz-feature-compare-label);
}

.kodza-feature-compare__table thead th {
  padding-top: 28px;
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kodza-feature-compare__table tbody > tr > * {
  background: linear-gradient(var(--kz-feature-compare-line), var(--kz-feature-compare-line)) 50% 0 / calc(100% - 24px) 1px no-repeat;
}

.kodza-feature-compare__table tbody > tr > th {
  background-size: 100% 1px;
}

.kodza-feature-compare__table tbody > tr:last-child > * {
  padding-bottom: 26px;
}

.kodza-feature-compare__label {
  padding-left: 0;
  font-weight: 500;
  text-align: left;
  text-wrap: pretty;
}

/* The light on a row, across the table and a little past its edges; over the pill, a lighter one
   inside it */
.kodza-feature-compare__band--row {
  z-index: -1;
  left: -12px;
  width: calc(100% + 24px);
  background: color-mix(in srgb, var(--kz-feature-compare-ink) 5%, transparent);
}

.kodza-feature-compare__band--pill {
  z-index: -1;
  left: calc(var(--kz-feature-compare-label) + 6px);
  width: calc((100% - var(--kz-feature-compare-label)) / var(--kz-feature-compare-count) - 12px);
  background: color-mix(in srgb, var(--kz-feature-compare-on-accent) 13%, transparent);
}

/* A lit row: its details come up to full ink, as a lit line on the cards */
.kodza-feature-compare__detail {
  transition: color calc(0.25s * var(--kz-motion-scale, 1)) ease;
}

.kodza-feature-compare__table tr.is-lit .kodza-feature-compare__detail {
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__table tr.is-lit > :nth-child(2) .kodza-feature-compare__detail {
  color: var(--kz-feature-compare-on-accent);
}

/* The marks: drawn, and said in text for screen readers */
.kodza-feature-compare__table td[data-mark]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: var(--kz-feature-compare-mark) center / contain no-repeat;
  mask: var(--kz-feature-compare-mark) center / contain no-repeat;
}

.kodza-feature-compare__table td[data-mark="yes"] {
  --kz-feature-compare-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 10.6l3.5 3.4 7.3-8'/%3E%3C/svg%3E");
}

.kodza-feature-compare__table td[data-mark="no"] {
  --kz-feature-compare-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6.2 6.2l7.6 7.6M13.8 6.2l-7.6 7.6'/%3E%3C/svg%3E");
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__table td[data-mark="partly"] {
  --kz-feature-compare-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.6' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 4.4a5.6 5.6 0 0 0 0 11.2z'/%3E%3C/svg%3E");
  color: var(--kz-feature-compare-dim);
}

.kodza-feature-compare__said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kodza-feature-compare__detail {
  display: block;
  margin-top: 6px;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12px);
  font-weight: var(--kz-font-label-weight, 400);
  line-height: var(--kz-font-label-leading, 1.4);
  letter-spacing: var(--kz-font-label-tracking, 0.01em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__value {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Your column, on the pill: everything in the text colour of the ink */
.kodza-feature-compare__table tr > :nth-child(2) {
  color: var(--kz-feature-compare-on-accent);
}

.kodza-feature-compare__table tbody > tr > :nth-child(2) {
  background-image: linear-gradient(color-mix(in srgb, var(--kz-feature-compare-on-accent) 16%, transparent), color-mix(in srgb, var(--kz-feature-compare-on-accent) 16%, transparent));
}

.kodza-feature-compare__table tr > :nth-child(2) .kodza-feature-compare__detail {
  color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 62%, transparent);
}

/* Waiting to come into view: the parts the script draws in hold still, hidden */
@media (prefers-reduced-motion: no-preference) {
  .kodza-feature-compare.is-ready .kodza-feature-compare__head:not(.is-shown) > *,
  .kodza-feature-compare.is-ready .kodza-feature-compare__board:not(.is-shown) .kodza-feature-compare__side,
  .kodza-feature-compare.is-ready .kodza-feature-compare__board:not(.is-shown) .kodza-feature-compare__row,
  .kodza-feature-compare.is-ready .kodza-feature-compare__inner:has(.kodza-feature-compare__board:not(.is-shown)) > .kodza-feature-compare__switch,
  .kodza-feature-compare.is-ready .kodza-feature-compare__table-wrap:not(.is-shown) tr {
    opacity: 0;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__board:not(.is-shown)::before,
  .kodza-feature-compare.is-ready .kodza-feature-compare__board:not(.is-shown)::after,
  .kodza-feature-compare.is-ready .kodza-feature-compare__table-wrap:not(.is-shown)::before {
    opacity: 0;
  }
}

@container kodza-feature-compare (max-width: 760px) {
  .kodza-feature-compare__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "intro";
  }

  .kodza-feature-compare__intro {
    margin-top: 20px;
  }
}

/* Too narrow for two cards side by side with their topics */
@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__board {
    --kz-feature-compare-topic: 0px;
    --kz-feature-compare-gap: 10px;
    --kz-feature-compare-pad-x: 18px;
    --kz-feature-compare-pad-y: 16px;
    --kz-feature-compare-card-width: calc((100% - var(--kz-feature-compare-gap)) / 2);
  }

  .kodza-feature-compare__band {
    display: none;
  }

  .kodza-feature-compare__sides,
  .kodza-feature-compare__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .kodza-feature-compare__side {
    padding: 22px var(--kz-feature-compare-pad-x) 16px;
  }

  .kodza-feature-compare__side--without {
    grid-column: 1;
  }

  .kodza-feature-compare__side--with {
    grid-column: 2;
  }

  .kodza-feature-compare__name {
    font-size: 19px;
  }

  .kodza-feature-compare__row {
    grid-template-areas: "topic topic" "without with";
    background: none;
  }

  .kodza-feature-compare__topic {
    grid-area: topic;
    padding: var(--kz-feature-compare-pad-y) var(--kz-feature-compare-pad-x) 0;
  }

  .kodza-feature-compare__cell {
    padding-top: 8px;
    padding-bottom: 18px;
  }

  .kodza-feature-compare__cell--without {
    grid-area: without;
  }

  .kodza-feature-compare__cell--with {
    grid-area: with;
  }

  .kodza-feature-compare__cell::before {
    top: calc(8px + (1.55em - 18px) / 2);
  }

  /* With the script: one card, a switch above it, and the ink rising over it like a curtain */
  .kodza-feature-compare.is-ready .kodza-feature-compare__switch {
    display: grid;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__sides {
    display: none;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__board::before,
  .kodza-feature-compare.is-ready .kodza-feature-compare__board::after {
    right: 0;
    width: 100%;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__board::after {
    clip-path: inset(0 0 100% 0 round var(--kz-feature-compare-radius));
  }

  .kodza-feature-compare.is-ready.is-with .kodza-feature-compare__board::after {
    clip-path: inset(0 round var(--kz-feature-compare-radius));
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__rows {
    padding: 4px 0;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topic" "cell";
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__row:first-child::before {
    display: none;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__cell {
    grid-area: cell;
  }

  /* Both answers share one cell: the line is as tall as the longer one, so nothing jumps */
  .kodza-feature-compare.is-ready .kodza-feature-compare__row:not(.is-with) .kodza-feature-compare__cell--with,
  .kodza-feature-compare.is-ready .kodza-feature-compare__row.is-with .kodza-feature-compare__cell--without {
    visibility: hidden;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__row::before {
    right: var(--kz-feature-compare-pad-x);
    width: calc(100% - 2 * var(--kz-feature-compare-pad-x));
    transition: background-color calc(0.2s * var(--kz-motion-scale, 1)) ease;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__row::after {
    display: none;
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__row.is-with::before {
    background: color-mix(in srgb, var(--kz-feature-compare-on-accent) 14%, transparent);
  }

  .kodza-feature-compare.is-ready .kodza-feature-compare__row.is-with .kodza-feature-compare__topic {
    color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 62%, transparent);
  }

  .kodza-feature-compare__table-wrap {
    --kz-feature-compare-label: 36%;
  }

  .kodza-feature-compare__table-wrap::before {
    border-radius: calc(16px * var(--kz-radius-scale, 1));
  }

  .kodza-feature-compare__table th,
  .kodza-feature-compare__table td {
    padding: 14px 6px;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .kodza-feature-compare__table thead th {
    padding-top: 20px;
    padding-bottom: 14px;
    font-size: 14px;
  }

  .kodza-feature-compare__label {
    padding-right: 10px;
    overflow-wrap: normal;
  }

  .kodza-feature-compare__detail {
    font-size: var(--kz-font-label-size, 11px);
  }
}

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

/* kodza-guard 55d0e079dffc — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-feature-compare__eyebrow):not(#_),
:where(.kodza-feature-compare__title):not(#_),
:where(.kodza-feature-compare__intro):not(#_),
:where(.kodza-feature-compare__input):not(#_),
:where(.kodza-feature-compare__name):not(#_),
:where(.kodza-feature-compare__note):not(#_),
:where(.kodza-feature-compare__rows):not(#_),
:where(.kodza-feature-compare__row):not(#_),
:where(.kodza-feature-compare__table):not(#_),
:where(.kodza-feature-compare__caption):not(#_),
:where(.kodza-feature-compare__corner):not(#_),
:where(.kodza-feature-compare__col):not(#_),
:where(.kodza-feature-compare__label):not(#_),
:where(.kodza-feature-compare__table thead:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *))):not(#_),
:where(.kodza-feature-compare__table tr:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *))):not(#_),
:where(.kodza-feature-compare__table tbody:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *))):not(#_),
:where(.kodza-feature-compare__table td:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *))):not(#_) {
  transition-duration: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-feature-compare__head:not(#_),
.kodza-feature-compare__line:not(#_),
.kodza-feature-compare__rise:not(#_),
.kodza-feature-compare__thumb:not(#_),
.kodza-feature-compare__board:not(#_),
.kodza-feature-compare__sides:not(#_),
.kodza-feature-compare__band:not(#_),
.kodza-feature-compare__table-wrap:not(#_),
.kodza-feature-compare__said:not(#_),
.kodza-feature-compare__detail:not(#_),
.kodza-feature-compare__value:not(#_),
.kodza-feature-compare__option span:where(:not([class*="kodza-"])):not(#_),
.kodza-feature-compare__thumb span:where(:not([class*="kodza-"])):not(#_) {
  box-sizing: revert;
}

.kodza-feature-compare__eyebrow:not(#_),
.kodza-feature-compare__title:not(#_),
.kodza-feature-compare__note:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-style: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__intro:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-height: revert;
  font-family: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__option:not(#_) {
  border: revert;
  margin: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-style: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-feature-compare__input:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
  white-space: revert;
  min-height: revert;
}

.kodza-feature-compare__name:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-style: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__rows:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__row:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__topic:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-style: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-feature-compare__cell:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-feature-compare__table:not(#_) {
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__caption:not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__corner:not(#_),
.kodza-feature-compare__table td:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_) {
  margin: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-indent: revert;
  text-shadow: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__col:not(#_) {
  margin: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-style: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-indent: revert;
  text-shadow: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__label:not(#_) {
  margin: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-indent: revert;
  text-shadow: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__table thead:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_),
.kodza-feature-compare__table tr:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_),
.kodza-feature-compare__table tbody:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-feature-compare__eyebrow:not(#_):where(:not([hidden])),
.kodza-feature-compare__title:not(#_):where(:not([hidden])),
.kodza-feature-compare__intro:not(#_):where(:not([hidden])),
.kodza-feature-compare__input:not(#_):where(:not([hidden])),
.kodza-feature-compare__name:not(#_):where(:not([hidden])),
.kodza-feature-compare__note:not(#_):where(:not([hidden])),
.kodza-feature-compare__rows:not(#_):where(:not([hidden])),
.kodza-feature-compare__topic:not(#_):where(:not([hidden])),
.kodza-feature-compare__cell:not(#_):where(:not([hidden])),
.kodza-feature-compare__table:not(#_):where(:not([hidden])),
.kodza-feature-compare__caption:not(#_):where(:not([hidden])),
.kodza-feature-compare__corner:not(#_):where(:not([hidden])),
.kodza-feature-compare__col:not(#_):where(:not([hidden])),
.kodza-feature-compare__label:not(#_):where(:not([hidden])),
.kodza-feature-compare__table thead:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where(:not([hidden])),
.kodza-feature-compare__table tr:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where(:not([hidden])),
.kodza-feature-compare__table tbody:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where(:not([hidden])),
.kodza-feature-compare__table td:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-feature-compare__eyebrow:not(#_):where([hidden]),
.kodza-feature-compare__title:not(#_):where([hidden]),
.kodza-feature-compare__intro:not(#_):where([hidden]),
.kodza-feature-compare__input:not(#_):where([hidden]),
.kodza-feature-compare__name:not(#_):where([hidden]),
.kodza-feature-compare__note:not(#_):where([hidden]),
.kodza-feature-compare__rows:not(#_):where([hidden]),
.kodza-feature-compare__topic:not(#_):where([hidden]),
.kodza-feature-compare__cell:not(#_):where([hidden]),
.kodza-feature-compare__table:not(#_):where([hidden]),
.kodza-feature-compare__caption:not(#_):where([hidden]),
.kodza-feature-compare__corner:not(#_):where([hidden]),
.kodza-feature-compare__col:not(#_):where([hidden]),
.kodza-feature-compare__label:not(#_):where([hidden]),
.kodza-feature-compare__table thead:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where([hidden]),
.kodza-feature-compare__table tr:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where([hidden]),
.kodza-feature-compare__table tbody:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where([hidden]),
.kodza-feature-compare__table td:where(:is(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))):not(.kodza-feature-compare__table :not(:not([class]), [class=""], [class^="is-"]:not([class*="kodza-"]):not([class*=" "]:not([class*=" is-"]))) *)):not(#_):where([hidden]) {
  display: none;
}

.kodza-feature-compare__board:not(#_)::before,
.kodza-feature-compare__board:not(#_)::after,
.kodza-feature-compare__row:not(#_)::before,
.kodza-feature-compare__row:not(#_)::after,
.kodza-feature-compare__cell:not(#_)::before,
.kodza-feature-compare__table-wrap:not(#_)::before {
  box-sizing: revert;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-feature-compare__eyebrow:not(#_) {
  margin: 0 0 20px;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12.5px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: var(--kz-font-label-leading, 1.5);
  letter-spacing: var(--kz-font-label-tracking, 0.02em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__title:not(#_) {
  margin: 0;
  font-family: var(--kz-font-display, inherit);
  font-size: calc(var(--kz-feature-compare-size) * var(--kz-font-display-scale, 1));
  font-weight: var(--kz-font-display-weight, 600);
  line-height: 1.04;
  letter-spacing: var(--kz-font-display-tracking, -0.045em);
  text-transform: var(--kz-font-display-case, inherit);
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__intro:not(#_) {
  max-width: 440px;
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--kz-feature-compare-dim);
}

.kodza-feature-compare__row:not(#_) {
  position: relative;
  display: grid;
}

.kodza-feature-compare__name:not(#_) {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: inherit;
}

.kodza-feature-compare__note:not(#_) {
  margin: 6px 0 0;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12px);
  font-weight: var(--kz-font-label-weight, 400);
  line-height: var(--kz-font-label-leading, 1.5);
  letter-spacing: var(--kz-font-label-tracking, 0.01em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__side--with .kodza-feature-compare__note:not(#_) {
  color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 62%, transparent);
}

.kodza-feature-compare__rows:not(#_) {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.kodza-feature-compare__row:not(#_) {
  margin: 0;
  padding: 0;
  background: linear-gradient(var(--kz-feature-compare-line), var(--kz-feature-compare-line)) 0 0 / var(--kz-feature-compare-topic) 1px no-repeat;
}

.kodza-feature-compare__topic:not(#_) {
  margin: 0;
  padding: var(--kz-feature-compare-pad-y) 16px 0 0;
  font-family: var(--kz-font-label, var(--kz-feature-compare-mono));
  font-size: var(--kz-font-label-size, 12.5px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: var(--kz-font-label-leading, 1.5);
  letter-spacing: var(--kz-font-label-tracking, 0.02em);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-feature-compare-dim);
  transition: color calc(0.2s * var(--kz-motion-scale, 1)) ease;
}

.kodza-feature-compare__cell:not(#_) {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: var(--kz-feature-compare-pad-y) var(--kz-feature-compare-pad-x) var(--kz-feature-compare-pad-y) calc(var(--kz-feature-compare-pad-x) + 30px);
  font-size: 15px;
  line-height: 1.55;
  transition: color calc(0.2s * var(--kz-motion-scale, 1)) ease;
}

.kodza-feature-compare__cell--without:not(#_) {
  color: var(--kz-feature-compare-dim);
}

.kodza-feature-compare__cell--with:not(#_) {
  color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 78%, transparent);
}

.kodza-feature-compare__row.is-lit .kodza-feature-compare__topic:not(#_),
.kodza-feature-compare__row:focus-within .kodza-feature-compare__topic:not(#_),
.kodza-feature-compare__row.is-lit .kodza-feature-compare__cell--without:not(#_),
.kodza-feature-compare__row:focus-within .kodza-feature-compare__cell--without:not(#_) {
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__row.is-lit .kodza-feature-compare__cell--with:not(#_),
.kodza-feature-compare__row:focus-within .kodza-feature-compare__cell--with:not(#_) {
  color: var(--kz-feature-compare-on-accent);
}

.kodza-feature-compare__option:not(#_) {
  display: flex;
  padding: 0 12px;
  font-family: var(--kz-font-label, inherit);
  font-size: var(--kz-font-label-size, 15px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: 1;
  letter-spacing: var(--kz-font-label-tracking, normal);
  text-transform: var(--kz-font-label-case, inherit);
}

.kodza-feature-compare__option:not(#_) {
  position: relative;
  color: var(--kz-feature-compare-dim);
  transition: color calc(0.2s * var(--kz-motion-scale, 1)) ease;
}

.kodza-feature-compare__input:not(#_) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

@media (hover: hover) {
  .kodza-feature-compare__option:hover:not(#_) {
    color: var(--kz-feature-compare-ink);
  }
}

.kodza-feature-compare__table:not(#_) {
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
}

.kodza-feature-compare__caption:not(#_) {
  position: absolute;
}

.kodza-feature-compare__table th:not(#_),
.kodza-feature-compare__table td:not(#_) {
  box-sizing: border-box;
  padding: 18px 12px;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  color: var(--kz-feature-compare-ink);
}

.kodza-feature-compare__table thead th:not(#_) {
  padding-top: 28px;
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kodza-feature-compare__table tbody > tr > *:not(#_) {
  background: linear-gradient(var(--kz-feature-compare-line), var(--kz-feature-compare-line)) 50% 0 / calc(100% - 24px) 1px no-repeat;
}

.kodza-feature-compare__table tbody > tr:last-child > *:not(#_) {
  padding-bottom: 26px;
}

.kodza-feature-compare__label:not(#_) {
  padding-left: 0;
  font-weight: 500;
  text-align: left;
}

.kodza-feature-compare__table td[data-mark="no"]:not(#_) {
  color: var(--kz-feature-compare-faint);
}

.kodza-feature-compare__table td[data-mark="partly"]:not(#_) {
  color: var(--kz-feature-compare-dim);
}

.kodza-feature-compare__table tr > :nth-child(2):not(#_) {
  color: var(--kz-feature-compare-on-accent);
}

.kodza-feature-compare__table tbody > tr > :nth-child(2):not(#_) {
  background-image: linear-gradient(color-mix(in srgb, var(--kz-feature-compare-on-accent) 16%, transparent), color-mix(in srgb, var(--kz-feature-compare-on-accent) 16%, transparent));
}

@container kodza-feature-compare (max-width: 760px) {
  .kodza-feature-compare__intro:not(#_) {
    margin-top: 20px;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__name:not(#_) {
    font-size: 19px;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__row:not(#_) {
    background: none;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__topic:not(#_) {
    padding: var(--kz-feature-compare-pad-y) var(--kz-feature-compare-pad-x) 0;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__cell:not(#_) {
    padding-top: 8px;
    padding-bottom: 18px;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare.is-ready .kodza-feature-compare__rows:not(#_) {
    padding: 4px 0;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare.is-ready .kodza-feature-compare__row.is-with .kodza-feature-compare__topic:not(#_) {
    color: color-mix(in srgb, var(--kz-feature-compare-on-accent) 62%, transparent);
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__table th:not(#_),
  .kodza-feature-compare__table td:not(#_) {
    padding: 14px 6px;
    font-size: 14px;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__table thead th:not(#_) {
    padding-top: 20px;
    padding-bottom: 14px;
    font-size: 14px;
  }
}

@container kodza-feature-compare (max-width: 640px) {
  .kodza-feature-compare__label:not(#_) {
    padding-right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-feature-compare *:not(#_),
  .kodza-feature-compare *:not(#_)::before,
  .kodza-feature-compare *:not(#_)::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

kodza-feature-compare.js

// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Feature Compare
// "Without" and "with" on one grid, so each answer sits level with the line it answers. Hovering a
// line (or focusing a link in it) lights it on both cards at once, and the light glides from line to
// line. Too narrow for two cards, the script writes a switch above a single card: picking the other
// side draws the ink over the card like a curtain, and each line rolls over to its other answer as
// the curtain's edge reaches it; the two answers share one cell, so the height never jumps.
// data-side="with" starts on your side. Without the script, the two cards stay side by side.
// The section plays its entrance once, as it comes into view: the label rises, the title line after
// line, each out of its own mask, the intro comes up; then the cards rise into place and the lines
// come up one after another (--table: the pill rises, the rows come up, each mark draws in). In
// --table too, the row under the pointer lights up across the table, and the light glides.
// "kodza:replay" plays it again. The timings are the constants under SELECTOR, the texts in WORDS.
(() => {
  const SELECTOR = '.kodza-feature-compare';
  // Texts the script writes, each one replaced by a data-text-<key> attribute on the section
  // (data-text-switch="Compare"): the switch's name for screen readers, and its two options when the
  // cards have no name
  const WORDS = { switch: 'Compare', without: 'Without', with: 'With' };
  // Lighting a line, in ms (each one times the site's pace):
  const BAND = 380; // the light gliding from one line to the next
  // The phone switch:
  const CURTAIN = 900; // the ink drawing over the card, or back
  const ROLL = 560; // each line rolling over to its other answer, as the ink's edge reaches it
  // The entrance. The head, as Section Intro plays it:
  const LABEL = 1000; // the label rising out of its mask
  const TITLE = 1170; // each title line…
  const TITLE_AT = 110; // …the first one starting here…
  const TITLE_STEP = 125; // …and the next a beat later
  const INTRO = 900; // the intro coming up…
  const INTRO_AT = 450;
  // The board:
  const CARD = 1200; // each card rising into place…
  const CARD_FADE = 800; // …and coming up out of the page, a little sooner
  const CARD_RISE = 24; // px it rises
  const CARD_STEP = 90; // …the ink one a beat after the paper one
  const SIDE_AT = 220; // the two names coming up
  const ROW = 760; // each line coming up…
  const ROW_AT = 320; // …the first one here…
  const ROW_STEP = 80; // …the next ones a beat later
  // --table:
  const MARK = 520; // each mark drawing in…
  const MARK_AT = 200; // …this long after its row…
  const MARK_STEP = 70; // …one after the other across the row
  const PART = 120; // between two parts that come into view together
  const ENTER = '0px 0px -12% 0px'; // a part plays once its top is this far into the screen
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  // The site's pace, --kz-motion-scale (set on :root, read on the instance): every duration of the
  // script times it, and 0 moves nothing, like reduced motion
  const paceOf = (el) => {
    const pace = parseFloat(getComputedStyle(el).getPropertyValue('--kz-motion-scale'));
    return pace >= 0 ? pace : 1;
  };
  const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
  const FOLD = [0.65, 0, 0.35, 1];
  const FOLD_EASE = `cubic-bezier(${FOLD.join(', ')})`;
  // The phone curtain: it gets going at once, then settles long
  const DRAW = [0.45, 0, 0.15, 1];
  const DRAW_EASE = `cubic-bezier(${DRAW.join(', ')})`;
  const GLIDE = 'cubic-bezier(0.6, 0, 0.1, 1)'; // slow start, long settle
  const SOFT = 'cubic-bezier(0.25, 1, 0.5, 1)';
  // The cards, the pill and the marks are drawn on ::before and ::after: browsers that cannot
  // animate them show them, and swap the sides at once
  const PSEUDO = typeof KeyframeEffect !== 'undefined' && 'pseudoElement' in KeyframeEffect.prototype;
  // Rising out of its own box, no wrapper needed: the box clips what is still below its bottom edge
  // (with room for the descenders and the side bearings)
  const FULL = 'inset(-0.2em -0.1em -0.2em -0.1em)';
  const RISE = [
    { transform: 'translateY(calc(100% + 0.2em))', clipPath: 'inset(-0.2em -0.1em 100% -0.1em)' },
    { transform: 'none', clipPath: FULL },
  ];
  // And out at the bottom (at the top, roll() clips under the cell's padding)
  const OUT_DOWN = [
    { transform: 'none', clipPath: FULL, visibility: 'visible' },
    { transform: 'translateY(calc(100% + 0.2em))', clipPath: 'inset(-0.2em -0.1em calc(100% + 0.2em) -0.1em)', visibility: 'visible' },
  ];
  const UP = (px) => [{ opacity: 0, transform: `translateY(${px}px)` }, { opacity: 1, transform: 'none' }];
  // When a cubic-bezier easing reaches a given progress, as a share of its duration
  const bez = (a, b, u) => 3 * a * u * (1 - u) ** 2 + 3 * b * u * u * (1 - u) + u ** 3;
  const timeAt = ([x1, y1, x2, y2], p) => {
    let lo = 0;
    let hi = 1;
    for (let i = 0; i < 24; i += 1) {
      const u = (lo + hi) / 2;
      if (bez(y1, y2, u) < p) lo = u;
      else hi = u;
    }
    return bez(x1, x2, (lo + hi) / 2);
  };
  let groups = 0; // each switch's radios get their own name

  // One instance, with its own state: two copies on a page never interfere. Everything it
  // starts is tied to `signal` (listeners get { signal }, observers, timers and animations stop on
  // its 'abort' event), so kodza:destroy stops it all.
  function mount(root, signal) {
    const pace = paceOf(root);
    const still = reduceMotion || !pace; // the still path: no motion asked, by the visitor or the site
    const word = (key) => root.dataset[`text${key[0].toUpperCase()}${key.slice(1)}`] || WORDS[key];
    const board = root.querySelector('.kodza-feature-compare__board');
    const wrap = root.querySelector('.kodza-feature-compare__table-wrap');
    const rows = board ? [...board.querySelectorAll('.kodza-feature-compare__row')] : [];
    const radiusOf = (el, pseudo) => parseFloat(getComputedStyle(el, pseudo).borderTopLeftRadius) || 0;
    let sw = null;
    const narrow = () => !!sw && getComputedStyle(sw).display !== 'none';

    // Lighting a line under the pointer or the focus: bands on the line, gliding from line to line.
    // Where the bands are not shown (a phone), nothing lights up
    const lightUp = (box, keys, lineOf, off = () => false) => {
      const bands = keys.map((key) => {
        const band = document.createElement('span');
        band.className = `kodza-feature-compare__band kodza-feature-compare__band--${key}`;
        band.setAttribute('aria-hidden', 'true');
        box.append(band);
        return band;
      });
      // A line's top in the box, through the table it may sit in
      const topOf = (line) => {
        let y = 0;
        for (let el = line; el && el !== box; el = el.offsetParent) y += el.offsetTop;
        return y;
      };
      let lit = null;
      const place = (band, line, glide) => {
        const to = { transform: `translateY(${topOf(line) + 4}px)`, height: `${line.offsetHeight - 8}px` };
        const now = getComputedStyle(band);
        const from = { transform: now.transform, height: now.height };
        band.getAnimations().forEach((a) => a.transitionProperty || a.cancel()); // the fade stays
        Object.assign(band.style, to);
        if (glide) band.animate([from, to], { duration: BAND * pace, easing: EASE });
      };
      const light = (line) => {
        if (line === lit) return;
        const was = lit;
        lit?.classList.remove('is-lit');
        lit = line;
        if (!line) return bands.forEach((band) => band.classList.remove('is-on'));
        line.classList.add('is-lit');
        bands.forEach((band) => {
          place(band, line, !!was && !still);
          band.classList.add('is-on');
        });
      };
      const at = (el) => (el && box.contains(el) && lineOf(el)) || null;
      const out = () => off() || getComputedStyle(bands[0]).display === 'none';
      box.addEventListener('pointerover', (event) => {
        if (event.pointerType === 'mouse' && !out()) light(at(event.target));
      }, { signal });
      box.addEventListener('pointerleave', () => light(out() ? null : at(document.activeElement)), { signal });
      box.addEventListener('focusin', (event) => {
        if (!out()) light(at(event.target));
      }, { signal });
      box.addEventListener('focusout', (event) => {
        if (!box.contains(event.relatedTarget)) light(null);
      }, { signal });
      // A new width moves the lines: the light goes out rather than sit in the wrong place
      const ro = new ResizeObserver(() => light(null));
      ro.observe(box);
      signal.addEventListener('abort', () => ro.disconnect());
    };

    if (board) {
      // The switch, above the board: two native radios named after the cards
      let side = root.dataset.side === 'with' ? 'with' : 'without';
      const nameOf = (key) => root.dataset[`text${key[0].toUpperCase()}${key.slice(1)}`]
        || board.querySelector(`.kodza-feature-compare__side--${key} .kodza-feature-compare__name`)?.textContent.trim()
        || WORDS[key];
      groups += 1;
      sw = document.createElement('div');
      sw.className = 'kodza-feature-compare__switch';
      sw.setAttribute('role', 'radiogroup');
      sw.setAttribute('aria-label', word('switch'));
      // The two options, then the same names in paper on the pill of ink, so they change colour
      // exactly at the pill's edges
      const keys = ['without', 'with'];
      sw.innerHTML = `${keys.map((key) => `<label class="kodza-feature-compare__option"><input class="kodza-feature-compare__input" type="radio" name="kodza-feature-compare-${groups}" value="${key}"><span></span></label>`).join('')}<span class="kodza-feature-compare__thumb" aria-hidden="true"><span></span><span></span></span>`;
      const inputs = sw.querySelectorAll('.kodza-feature-compare__input');
      const twins = sw.querySelectorAll('.kodza-feature-compare__thumb > span');
      keys.forEach((key, i) => {
        inputs[i].checked = key === side;
        inputs[i].nextElementSibling.textContent = nameOf(key);
        twins[i].textContent = nameOf(key);
      });
      root.classList.toggle('is-with', side === 'with');
      rows.forEach((row) => row.classList.toggle('is-with', side === 'with'));
      board.before(sw);

      // Lighting a line: a band on each card, gliding from line to line
      lightUp(board, ['without', 'with'], (el) => el.closest?.('.kodza-feature-compare__row'), narrow);

      // Changing sides on a phone. The ink's bottom edge, as a share of the board's height: 0 is the
      // paper card, 1 is the card of ink
      let curtain = null;
      let timers = [];
      const clear = () => {
        timers.forEach(clearTimeout);
        timers = [];
      };
      const edgeNow = () => {
        if (!curtain) return side === 'with' ? 1 : 0;
        const p = curtain.animation.effect.getComputedTiming().progress;
        return p == null ? curtain.to : curtain.from + (curtain.to - curtain.from) * p;
      };
      // One line rolls over: the new answer arrives from the side the ink comes from
      const roll = (row, opening) => {
        row.getAnimations({ subtree: true }).forEach((a) => a.cancel());
        row.classList.toggle('is-with', opening);
        const incoming = row.querySelector(`.kodza-feature-compare__cell--${opening ? 'with' : 'without'}`);
        const outgoing = row.querySelector(`.kodza-feature-compare__cell--${opening ? 'without' : 'with'}`);
        // Coming in or going out at the top, an answer shows only below its own top padding: it
        // never runs over the topic just above it
        const under = (cell) => `${parseFloat(getComputedStyle(cell).paddingTop) || 0}px`;
        const hidden = (top) => `inset(calc(100% + ${top}) -0.1em -0.2em -0.1em)`;
        const shown = (top) => `inset(${top} -0.1em -0.2em -0.1em)`;
        if (incoming) {
          const top = under(incoming);
          incoming.animate(opening
            ? [{ transform: 'translateY(-100%)', clipPath: hidden(top) }, { transform: 'none', clipPath: shown(top) }]
            : RISE, { duration: ROLL * pace, easing: EASE });
        }
        if (outgoing) {
          const top = under(outgoing);
          outgoing.animate(opening
            ? OUT_DOWN
            : [{ transform: 'none', clipPath: shown(top), visibility: 'visible' }, { transform: 'translateY(-100%)', clipPath: hidden(top), visibility: 'visible' }],
          { duration: ROLL * 0.8 * pace, easing: FOLD_EASE });
        }
      };
      const turn = (to) => {
        if (to === side) return;
        const from = edgeNow();
        const opening = to === 'with';
        const target = opening ? 1 : 0;
        side = to;
        clear();
        curtain?.animation.cancel();
        curtain = null;
        root.classList.toggle('is-with', opening);
        if (still || !PSEUDO || !narrow()) {
          return rows.forEach((row) => {
            row.getAnimations({ subtree: true }).forEach((a) => a.cancel());
            row.classList.toggle('is-with', opening);
          });
        }
        const radius = radiusOf(board, '::after');
        const clip = (edge) => `inset(0px 0px ${((1 - edge) * 100).toFixed(3)}% 0px round ${radius}px)`;
        const duration = CURTAIN * pace * Math.max(0.45, Math.abs(target - from));
        const animation = board.animate([{ clipPath: clip(from) }, { clipPath: clip(target) }], { duration, easing: DRAW_EASE, pseudoElement: '::after' });
        curtain = { animation, from, to: target };
        animation.onfinish = () => {
          if (curtain?.animation === animation) curtain = null;
        };
        // Each line turns over as the edge reaches its answer: the top of it on the way down, the
        // bottom of it on the way back up
        const height = board.offsetHeight || 1;
        rows.forEach((row) => {
          if (row.classList.contains('is-with') === opening) return;
          const cell = row.querySelector('.kodza-feature-compare__cell') || row;
          const y = (row.offsetTop + cell.offsetTop + (opening ? 0 : cell.offsetHeight)) / height;
          const share = Math.min(1, Math.max(0, (y - from) / (target - from)));
          timers.push(setTimeout(() => roll(row, opening), timeAt(DRAW, share) * duration));
        });
      };
      sw.addEventListener('change', (event) => {
        if (event.target.checked) turn(event.target.value);
      }, { signal });
      signal.addEventListener('abort', () => {
        clear();
        curtain?.animation.cancel();
        rows.forEach((row) => row.getAnimations({ subtree: true }).forEach((a) => a.cancel()));
      });
    }

    // --table: the row under the pointer lights up across the table, a little lighter where it
    // crosses your column, and the light glides from row to row
    if (wrap) lightUp(wrap, ['row', 'pill'], (el) => el.closest?.('tbody > tr'));

    // The entrance
    const parts = [...root.querySelectorAll('.kodza-feature-compare__head, .kodza-feature-compare__board, .kodza-feature-compare__table-wrap')];
    if (still) return parts.forEach((part) => part.classList.add('is-shown'));
    let running = [];
    const stop = () => {
      running.forEach((a) => a.cancel());
      running = [];
    };
    // The entrance of one part, `at` ms after the first one of its batch
    const play = (part, at) => {
      const animate = (el, keyframes, options) => {
        if (el) running.push(el.animate(keyframes, { easing: GLIDE, fill: 'backwards', ...options, duration: options.duration * pace, delay: (at + (options.delay || 0)) * pace }));
      };
      // A card, or the pill, rises a little into place as it comes up out of the page: a solid
      // block of ink wiped in reads too hard
      const opens = (el, pseudo, delay) => {
        if (!PSEUDO) return;
        animate(el, [{ transform: `translateY(${CARD_RISE}px) scale(0.98)` }, { transform: 'none' }], { duration: CARD, delay, easing: EASE, pseudoElement: pseudo });
        animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: CARD_FADE, delay, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', pseudoElement: pseudo });
      };
      part.classList.add('is-shown');
      if (part.matches('.kodza-feature-compare__head')) {
        const q = (s) => part.querySelector(`:scope > ${s}`);
        animate(q('.kodza-feature-compare__eyebrow'), RISE, { duration: LABEL });
        // The title, line after line, each out of its own mask (written as lines, like Section
        // Intro's); a title written in one piece rises in one piece
        const lines = [...part.querySelectorAll('.kodza-feature-compare__line > .kodza-feature-compare__rise')];
        if (lines.length) lines.forEach((line, i) => animate(line, [{ transform: 'translateY(105%)' }, { transform: 'none' }], { duration: TITLE, delay: TITLE_AT + i * TITLE_STEP }));
        else animate(q('.kodza-feature-compare__title'), RISE, { duration: TITLE, delay: TITLE_AT });
        // The intro waits for the last line to be on its way
        animate(q('.kodza-feature-compare__intro'), UP(20), { duration: INTRO, delay: INTRO_AT + Math.max(0, lines.length - 2) * TITLE_STEP, easing: SOFT });
        return;
      }
      if (part === board) {
        // The cards rise into place (on a phone, the ink only if it is the side shown), the
        // names come up, then the lines one after another
        const one = narrow();
        opens(part, '::before', 0);
        if (!one || root.classList.contains('is-with')) opens(part, '::after', CARD_STEP);
        part.querySelectorAll('.kodza-feature-compare__side').forEach((side, i) => animate(side, UP(14), { duration: ROW, delay: SIDE_AT + i * CARD_STEP, easing: SOFT }));
        if (one) animate(sw, UP(10), { duration: ROW, delay: SIDE_AT, easing: SOFT });
        rows.forEach((row, i) => animate(row, UP(14), { duration: ROW, delay: ROW_AT + i * ROW_STEP, easing: SOFT }));
        return;
      }
      // --table: the pill rises, the rows come up, and each mark draws in from the left
      opens(part, '::before', 0);
      part.querySelectorAll('tr').forEach((tr, i) => {
        const at = ROW_AT + i * ROW_STEP;
        animate(tr, UP(12), { duration: ROW, delay: at, easing: SOFT });
        if (PSEUDO) {
          tr.querySelectorAll('td[data-mark]').forEach((td, j) => animate(td, [{ clipPath: 'inset(0px 100% 0px 0px)' }, { clipPath: 'inset(0px)' }], { duration: MARK, delay: at + MARK_AT + j * MARK_STEP, easing: FOLD_EASE, pseudoElement: '::before' }));
        }
      });
    };

    // What comes into view together plays in the order of the page, part after part
    const io = new IntersectionObserver((entries) => {
      entries.filter((entry) => entry.isIntersecting).map((entry) => entry.target)
        .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))
        .forEach((part, i) => {
          io.unobserve(part);
          play(part, i * PART);
        });
    }, { rootMargin: ENTER });
    const watch = () => parts.forEach((part) => io.observe(part));
    signal.addEventListener('abort', () => {
      io.disconnect();
      stop();
    });
    // Replayed: the parts on screen play again now, the others wait to be scrolled to
    root.addEventListener('kodza:replay', () => {
      io.disconnect();
      stop();
      parts.forEach((part) => part.classList.remove('is-shown'));
      watch();
    }, { signal });
    Promise.resolve(document.fonts?.ready).then(() => {
      if (!signal.aborted) watch();
    });
  }

  // Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
  // event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
  // markup back. For themes and apps that swap content without a page load. Each running root
  // keeps its markup as written under KODZA, shared by every Kodza script on the page: a Kodza
  // component inside another one is saved as written, not half-started, and stopped with it. Two
  // components on one root (a reveal on a stat card) both start, and stop together.
  const KODZA = Symbol.for('kodza');
  const RUNNING = Symbol.for(`kodza ${SELECTOR}`); // a root this component runs on, for every copy of this script
  const instances = new WeakMap();
  const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
  const attrsOf = (el) => [...el.attributes].map((a) => [a.name, a.value]);
  const put = (el, saved) => {
    [...el.attributes].forEach((a) => el.removeAttribute(a.name));
    saved.attrs.forEach(([name, value]) => el.setAttribute(name, value));
    el.innerHTML = saved.html;
  };
  // The markup inside a root as written: Kodza components already running in it give back their own
  const written = (root) => {
    const all = [...root.querySelectorAll('*')];
    if (!all.some((el) => el[KODZA])) return root.innerHTML;
    const copy = root.cloneNode(true);
    const twins = copy.querySelectorAll('*');
    let last = null;
    all.forEach((el, i) => {
      if (!el[KODZA] || last?.contains(el)) return;
      last = el;
      put(twins[i], el[KODZA]);
    });
    return copy.innerHTML;
  };
  const init = (scope) => find(scope).forEach((root) => {
    // Already running, maybe from another copy of this script. Marked is-ready with no Kodza component
    // running on it, a root is a copy of a started one (a cloned slide): it is left as it is
    if (root[RUNNING] || (root.classList.contains('is-ready') && !root[KODZA])) return;
    // Rendered by React (data-kodza-manual): React starts it, with an init aimed at that markup once
    // it has hydrated it. Any earlier start would change markup React has not taken over yet
    const owner = root.closest('[data-kodza-manual]');
    if (owner && !(scope && owner.contains(scope))) return;
    const controller = new AbortController();
    // Another Kodza component already running on this root: its markup as written is kept, and the
    // two stop together
    const before = root[KODZA];
    const saved = { html: before ? before.html : written(root), attrs: before ? before.attrs : attrsOf(root), stop: () => destroy(root) };
    if (before) before.above = saved;
    instances.set(root, { controller, saved, before });
    root[KODZA] = saved;
    root[RUNNING] = true;
    mount(root, controller.signal);
    root.classList.add('is-ready');
  });
  const destroy = (scope) => find(scope).forEach((root) => {
    const instance = instances.get(root);
    if (!instance) return;
    instances.delete(root);
    instance.saved.above?.stop(); // a Kodza component started after it on the same root stops first
    // The Kodza components running inside it stop first: once its markup is put back, their own
    // script could not find them any more
    root.querySelectorAll('*').forEach((el) => el[KODZA]?.stop());
    instance.controller.abort();
    delete root[RUNNING];
    // Started on top of another one: that one stops next, and puts the markup back
    if (instance.before) {
      delete instance.before.above;
      root[KODZA] = instance.before;
      return instance.before.stop();
    }
    delete root[KODZA];
    put(root, instance.saved);
  });
  document.addEventListener('kodza:init', (event) => init(event.detail?.root));
  document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
  init();
  // Loaded in <head>, the script runs before the markup exists: once more when it is parsed
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();

FeatureCompare.tsx

'use client';
// Kodza — Feature Compare, for React. From https://kodza.dev/components/feature-compare/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: feature-compare.css and feature-compare.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
// data-kodza-manual keeps the script from starting it on its own: the effect below does, once
// React has hydrated the markup (on a page that streams in, the script can load first).
// Built from your data (tabs, rows, options)? Put what the markup is made of in the key, as plain
// values (ids, text, numbers): a change starts the script again on fresh markup. What the visitor
// changes (the open tab, the sort, what they type) is the script's: keep it out of the key, follow
// it with onClick or onInput on the root, and change it from your code as a visitor would (click
// the tab; set the field's value, then dispatch a bubbling input event).
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './feature-compare.css';

type Variant = "table";

export type FeatureCompareProps = Omit<ComponentPropsWithoutRef<'section'>, "children" | "variant" | "vars"> & {
  /** Modifier class(es): .kodza-feature-compare--table */
  variant?: Variant | Variant[];
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: var(--kz-color-ink, #0a0a0a) */
    "--kz-feature-compare-ink"?: string | number;
    /** default: color-mix(in srgb, var(--kz-feature-compare-ink) 66%, transparent) */
    "--kz-feature-compare-dim"?: string | number;
    /** default: color-mix(in srgb, var(--kz-feature-compare-ink) 60%, transparent) */
    "--kz-feature-compare-faint"?: string | number;
    /** the hairlines — default: color-mix(in srgb, var(--kz-feature-compare-ink) 12%, transparent) */
    "--kz-feature-compare-line"?: string | number;
    /** the "without" card, the switch — default: var(--kz-color-paper, #fff) */
    "--kz-feature-compare-card"?: string | number;
    /** its outline — default: color-mix(in srgb, var(--kz-feature-compare-ink) 10%, transparent) */
    "--kz-feature-compare-card-line"?: string | number;
    /** the "with" card, your column — default: var(--kz-color-accent, var(--kz-feature-compare-ink)) */
    "--kz-feature-compare-accent"?: string | number;
    /** the text on it — default: var(--kz-color-on-accent, var(--kz-feature-compare-card)) */
    "--kz-feature-compare-on-accent"?: string | number;
    /** default: transparent */
    "--kz-feature-compare-bg"?: string | number;
    /** the content column: the page's, set by the site — default: var(--kz-page-width, 1440px) */
    "--kz-feature-compare-width"?: string | number;
    /** the space kept at the screen edges — default: var(--kz-page-gutter, clamp(16px, 4vw, 40px)) */
    "--kz-feature-compare-gutter"?: string | number;
    /** default: clamp(56px, 7vw, 112px) */
    "--kz-feature-compare-pad-top"?: string | number;
    /** default: clamp(56px, 7vw, 112px) */
    "--kz-feature-compare-pad-bottom"?: string | number;
    /** the title — default: clamp(28px, 3.4vw, 44px) */
    "--kz-feature-compare-size"?: string | number;
    /** the column of the topics, left of the cards — default: 20% */
    "--kz-feature-compare-topic"?: string | number;
    /** between the two cards — default: 16px */
    "--kz-feature-compare-gap"?: string | number;
    /** inside a card — default: 28px */
    "--kz-feature-compare-pad-x"?: string | number;
    /** default: 20px */
    "--kz-feature-compare-pad-y"?: string | number;
    /** default: calc(16px * var(--kz-radius-scale, 1)) */
    "--kz-feature-compare-radius"?: string | number;
    /** --table: the column of the row names — default: 34% */
    "--kz-feature-compare-label"?: string | number;
    /** default: var(--kz-font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace) */
    "--kz-feature-compare-mono"?: string | number;
    /** default: cubic-bezier(0.22, 1, 0.36, 1) */
    "--kz-feature-compare-ease"?: string | number;
  };
  className?: string;
};

export function FeatureCompare({ variant, vars, className, style, ...rest }: FeatureCompareProps) {
  const ref = useRef<ComponentRef<'section'>>(null);
  const classes = ["kodza-feature-compare", ...([] as string[]).concat(variant ?? []).map((v) => `kodza-feature-compare--${v}`), className].filter(Boolean).join(' ');
  // Everything the markup is made of: when it changes, React gets a fresh element (see the top)
  const key = JSON.stringify([classes, vars, style, rest]);

  // Starts the script on this element once React has rendered it, stops it when it goes
  useEffect(() => {
    const root = ref.current;
    let live = true;
    // @ts-ignore: a plain script, no types to find
    import('./feature-compare.js').then(() => {
      if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
    });
    return () => {
      live = false;
      document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
    };
  }, [key]);

  return (
    <section key={key} {...rest} className={classes} data-kodza-manual style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <div className="kodza-feature-compare__inner">
        <div className="kodza-feature-compare__head">
          <p className="kodza-feature-compare__eyebrow">04 · Why us</p>
          <h2 className="kodza-feature-compare__title">
            <span className="kodza-feature-compare__line">
              <span className="kodza-feature-compare__rise">Same kitchen.</span>
            </span>
            {' '}
            <span className="kodza-feature-compare__line">
              <span className="kodza-feature-compare__rise">Different quote.</span>
            </span>
          </h2>
          <p className="kodza-feature-compare__intro">Every carpenter in Rouen can fit a kitchen. The difference is everything around the fitting, so here it is, line by line.</p>
        </div>
        <div className="kodza-feature-compare__board">
          <div className="kodza-feature-compare__sides">
            <div className="kodza-feature-compare__side kodza-feature-compare__side--without">
              <h3 className="kodza-feature-compare__name">The usual quote</h3>
              <p className="kodza-feature-compare__note">Three of them, read in March</p>
            </div>
            <div className="kodza-feature-compare__side kodza-feature-compare__side--with">
              <h3 className="kodza-feature-compare__name">Ours</h3>
              <p className="kodza-feature-compare__note">Atelier Vallin, since 2009</p>
            </div>
          </div>
          <ul className="kodza-feature-compare__rows">
            <li className="kodza-feature-compare__row">
              <p className="kodza-feature-compare__topic">Price</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--without">A price per square metre, then the extras turn up one by one.</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--with">One price, fixed before we start. Any extra is written down and signed first.</p>
            </li>
            <li className="kodza-feature-compare__row">
              <p className="kodza-feature-compare__topic">Dates</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--without">Somewhere between two and six weeks, depending.</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--with">A start date in writing. If it moves, you hear it from us, a week before.</p>
            </li>
            <li className="kodza-feature-compare__row">
              <p className="kodza-feature-compare__topic">The site</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--without">Offcuts and dust, left for you to deal with.</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--with">Swept every evening. The skip leaves with us.</p>
            </li>
            <li className="kodza-feature-compare__row">
              <p className="kodza-feature-compare__topic">After the deposit</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--without">The phone that rang twice a day stops ringing.</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--with">One person, one number, an answer the same day.</p>
            </li>
            <li className="kodza-feature-compare__row">
              <p className="kodza-feature-compare__topic">Guarantee</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--without">Ten-year cover, somewhere in the small print.</p>
              <p className="kodza-feature-compare__cell kodza-feature-compare__cell--with">The ten-year insurance certificate, stapled to the quote.</p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run Nov 9, 2026

Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues

KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed

Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed

Light and darkThe same checks on both themes, contrast included. Passed

WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes

Robots checked this. A human with VoiceOver hasn't yet.

KeyboardPress them in the preview

On the switch (narrow screens)