/* ===========================================================================
   The comparison: what fifty people cost for a year, drawn, and what each plan
   includes, laid out. Loaded by index.html (#compare) and by compare.html, which
   are the SAME markup written by scripts/landing/build_pages.py — change the
   look here and both pages change; change the words in the generator.

   Rebuilt on 21 October 2026, because the owner's screenshots showed the old one
   plainly: bars that were pale slabs with the company name written ON them, a
   pink pill cutting its own label, the working ("50 x $7 x 12") floating far
   from the bar it belonged to, nothing saying how much was saved; and a table
   of identical "Included" lines with the Meetowt column as a thin outlined box.

   Colours are the site's own tokens. The one thing drawn in the accent is us.
   =========================================================================== */

.cmpx {
  /* Fallback first, the mixed value after it: a browser without color-mix drops
     the second line and keeps the first, and nothing here is unreadable either
     way. */
  --cx-bar: var(--rule);
  --cx-bar: color-mix(in srgb, var(--ink) 15%, var(--paper));
  --cx-zebra: var(--paper-deep);
  --cx-zebra: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
  --cx-hero-line: var(--accent);
  --cx-hero-line: color-mix(in srgb, var(--accent) 30%, var(--paper));
  --cx-shadow: 22, 20, 15;
  --cx-hero-bar: linear-gradient(90deg, var(--accent-ink), var(--accent));
}

/* ── The chart ──────────────────────────────────────────────────────────── */

.cmpx .sums {
  margin: 0 0 2.5rem;
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.1rem, 3.2vw, 2.2rem) 1.4rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--lift-1);
}

/* The two lines the chart is read by, one small and one plain. */
.cmpx .sums__head {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.3rem;
}

.cmpx .sums__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.cmpx .sums__row {
  display: block;
  position: relative;
}
.cmpx .sums__row[hidden] {
  display: none;
}

/* THE NAME SITS ABOVE ITS BAR, never on it: text laid over a coloured shape is
   legible only where the shape happens to be pale, and the shape is the part
   that changes. The working ("50 x $7 x 12") is on the same line, small, because
   it belongs to the name and not to the number. */
.cmpx .sums__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.8rem;
  margin: 0 0 0.45rem;
}
.cmpx .sums__what {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}
.cmpx .sums__what em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-soft);
}
.cmpx .sums__work {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The track leaves room on the right for the biggest total, so a bar at 100%
   still has its figure beside it rather than outside the card. */
.cmpx .sums__plot {
  position: relative;
  height: 0.95rem;
  margin-right: 6.6rem;
}
/* THE FILL IS THE BAR'S WIDTH, and the total rides on its far end, so when the
   bar grows the number travels with it instead of waiting at the right. */
.cmpx .sums__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 0%);
  transition: width 1.15s var(--ease-out);
  transition-delay: calc(var(--n, 0) * 0.07s);
}
.cmpx .sums__bar {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--cx-bar);
}
.cmpx .sums__total {
  position: absolute;
  left: 100%;
  top: 50%;
  padding-left: 0.7rem;
  transform: translateY(-50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--n, 0) * 0.07s + 0.45s);
}

.cmpx .sums__row--ours .sums__bar {
  background: var(--cx-hero-bar);
}
.cmpx .sums__row--ours .sums__what {
  font-weight: 700;
}
.cmpx .sums__row--ours .sums__total {
  color: var(--accent);
}

/* GROWN ONCE, WHEN THE CHART ARRIVES. site.js adds js-motion only when it has
   run and motion is allowed, and marks [data-bars] .is-in as it scrolls into
   view — so without the script, or with reduced motion, the bars simply stand at
   their lengths. The global reduced-motion rule in styles.css zeroes the
   durations as well. */
.js-motion .cmpx [data-bars] .sums__fill {
  width: 0;
}
.js-motion .cmpx [data-bars] .sums__total {
  opacity: 0;
}
.js-motion .cmpx [data-bars].is-in .sums__fill {
  width: var(--w, 0%);
}
.js-motion .cmpx [data-bars].is-in .sums__total {
  opacity: 1;
}

/* HOW MUCH IS SAVED, in one line that is the numbers above it subtracted. The
   figure is written by pricing.js (data-compare="saved") from the same price the
   rows use, and the line is hidden when that price is not in US dollars,
   because the competitors' prices are and the difference would be meaningless. */
.cmpx .sums__save {
  margin: 1.6rem 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--weak-accent);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}
.cmpx .sums__save[hidden] {
  display: none;
}
.cmpx .sums__save strong {
  font-weight: 700;
}
.cmpx .sums__saved {
  color: var(--accent-ink);
  font-weight: 700;
  white-space: nowrap;
}

.cmpx .sums__after {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 44rem;
}

/* ── The table ──────────────────────────────────────────────────────────── */

/* Only worth saying where the table cannot fit. aria-hidden in the markup,
   because the scrolling region announces itself to a screen reader already. */
.cmp__swipe {
  display: none;
}

.cmpx .cmp__wrap {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--lift-1);
}
/* Focusable on purpose: a table wider than the screen scrolls with a finger and,
   without tabindex, with nothing else at all. */
.cmpx .cmp__wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.94rem;
  line-height: 1.45;
}

/* A ROW'S GROUND IS ONE VARIABLE, so the frozen name beside it and the cells
   after it can never disagree about the stripe. */
.cmp tr {
  --row: var(--paper);
}
.cmp tbody tr:nth-child(odd) {
  --row: var(--cx-zebra);
}
.cmp tbody tr.cmp__group {
  --row: var(--paper-deep);
}

.cmp th,
.cmp td {
  min-width: 8.6rem;
  padding: 0.95rem 1.05rem;
  text-align: left;
  vertical-align: middle;
  background: var(--row);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
}

/* THE HEADER STAYS PUT, and so does the first column. On a phone the table is
   wider than the screen and (below 56rem) taller than its box, so the plan names
   and the row names are both always on screen. Corner highest, then the header,
   then the names, then the cells. */
.cmp thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  vertical-align: bottom;
  padding-top: 1.2rem;
  padding-bottom: 0.95rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.cmp thead th:first-child {
  left: 0;
  z-index: 5;
}

.cmp tbody th[scope="row"],
.cmp tbody th[scope="rowgroup"] {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 11.5rem;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
}

/* The group headings: small, in the marking colour, and part of the table so a
   screen reader says which group a row is in. */
.cmp tbody tr.cmp__group th,
.cmp tbody tr.cmp__group td {
  padding-top: 1.15rem;
  padding-bottom: 0.45rem;
  border-bottom: 0;
}
.cmp tbody tr.cmp__group th {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* The price row sits above the groups and is the only row that is sentences
   rather than one word. */
.cmp .cmp__price {
  font-size: 0.88rem;
  line-height: 1.5;
  vertical-align: top;
}
.cmp tbody.cmp__cost th,
.cmp tbody.cmp__cost td {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.cmp tbody.cmp__cost th[scope="row"] {
  vertical-align: top;
}

/* ── Our column: the one that is raised ─────────────────────────────────── */

/* A RAISED CARD MADE OF CELLS. The column is white on the cream, edged in a
   tint of the accent, and shadowed on its two sides only: the shadow is the
   cell's own, cut off at the cell's top and bottom with clip-path, because a
   shadow left to bleed would paint a dark band across the foot of every row.
   The header and the last cell lift the cut so the card has a top and a
   bottom. */
.cmp .cmp__ours {
  position: relative;
  z-index: 1;
  background: var(--raised, #fff);
  border-left: 1px solid var(--cx-hero-line);
  border-right: 1px solid var(--cx-hero-line);
  box-shadow: 0 0 22px rgba(var(--cx-shadow), 0.14);
  clip-path: inset(0 -26px 0 -26px);
  color: var(--ink);
}
.cmp thead th.cmp__ours {
  z-index: 4;
  padding-top: 1rem;
  background: var(--accent);
  border-bottom-color: var(--accent);
  border-radius: 1rem 1rem 0 0;
  color: #fff;
  font-size: 1.15rem;
  clip-path: inset(-26px -26px 0 -26px);
}
.cmp tbody.cmp__last tr:last-child .cmp__ours {
  border-bottom: 3px solid var(--accent);
  border-radius: 0 0 1rem 1rem;
  clip-path: inset(0 -26px -26px -26px);
}
.cmp tbody tr.cmp__group .cmp__ours {
  background: var(--raised, #fff);
}

.cmp__chip {
  display: block;
  width: fit-content;
  margin: 0 0 0.4rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cmp td.cmp__price.cmp__ours {
  font-weight: 600;
  color: var(--accent-ink);
}

/* ── The three answers ──────────────────────────────────────────────────── */

/* A FILLED CHECK, A HALF CIRCLE AND A LIGHT DASH — and the words stay, so the
   answer is never the colour or the shape alone. The marks are drawn on an
   empty pseudo-element, so a screen reader hears the sentence and no symbol. */
.cmp__yes,
.cmp__part,
.cmp__no {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.cmp__yes::before,
.cmp__part::before,
.cmp__no::before {
  content: "";
  flex: none;
  box-sizing: border-box;
}

.cmp__yes {
  color: var(--ink);
  font-weight: 500;
}
.cmp__yes::before {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.07rem;
  border-radius: 50%;
  background-color: var(--ink-faint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 8.4l2.5 2.5 5.1-5.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78%;
}
.cmp__ours .cmp__yes {
  font-weight: 600;
}
.cmp__ours .cmp__yes::before {
  background-color: var(--accent);
}

.cmp__part {
  color: var(--ink-soft);
}
.cmp__part::before {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.07rem;
  border: 1.6px solid var(--ink-soft);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--ink-soft) 50%, transparent 50%);
}

.cmp__no {
  color: var(--ink-faint);
}
.cmp__no::before {
  width: 0.8rem;
  height: 2px;
  margin: 0.62rem 0.2rem 0 0.2rem;
  border-radius: 2px;
  background: var(--ink-faint);
  opacity: 0.55;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 56rem) {
  .cmp__swipe {
    display: block;
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* Short enough that its header and its names have something to stay on, and
     the page still scrolls past it. */
  .cmpx .cmp__wrap {
    max-height: 80vh;
    max-height: 80svh;
  }

  /* The frozen names carry a shadow only where there is something to scroll
     under them; on a wide screen it would be an edge with nothing behind it. */
  .cmp tbody th[scope="row"],
  .cmp tbody th[scope="rowgroup"],
  .cmp thead th:first-child {
    box-shadow: 1px 0 0 var(--rule), 8px 0 14px -8px rgba(var(--cx-shadow), 0.22);
  }
}

@media (max-width: 34rem) {
  .cmpx .sums__plot {
    margin-right: 5.6rem;
  }
  .cmpx .sums__total {
    font-size: 0.98rem;
    padding-left: 0.55rem;
  }
  .cmpx .sums__what {
    font-size: 0.94rem;
  }

  /* THE FROZEN COLUMN MUST NOT EAT THE SCROLL PORT. At 375px the box is about
     335px; a row name of 7.6rem leaves a plan and most of the next one in view,
     so one swipe reveals a comparison rather than a cell. */
  .cmp {
    font-size: 0.86rem;
  }
  .cmp th,
  .cmp td {
    min-width: 7.6rem;
    padding: 0.75rem 0.75rem;
  }
  .cmp tbody th[scope="row"],
  .cmp tbody th[scope="rowgroup"] {
    min-width: 7.6rem;
  }
  .cmp thead th {
    font-size: 0.94rem;
  }
  .cmp thead th.cmp__ours {
    font-size: 1.05rem;
  }
  .cmp .cmp__ours {
    min-width: 9rem;
  }
  .cmp__yes,
  .cmp__part,
  .cmp__no {
    gap: 0.5rem;
  }
}