.landing-comparison {
  position: relative;
}

/* Two lanes, equal width on purpose.
   The previous grid was 0.78fr / 1.22fr, so the Webtzm card was half again as wide as
   Google's and the layout argued before a word was read. Same width, same weight, same
   treatment: the page is not claiming one route beats the other, it is claiming they end
   in the same workspace and you pick per project. */
.lane-picker {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.lane {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px;
  border-radius: var(--landing-radius-lg);
  color: var(--text);
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-stroke),
    var(--shadow-surface);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lane {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    background:
      linear-gradient(180deg, var(--glass-highlight), transparent 46%),
      var(--glass-fill-quiet);
  }
}

/* The one asymmetry that is earned: this is the route the product is for, so it carries the
   same rim the rest of the page uses for a selected path. A rim, not a bigger box. */
.lane--webtzm {
  box-shadow:
    inset 0 0 0 1px var(--card-hover-ring),
    var(--shadow-surface);
}

.lane__tag {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--subtle);
}

.lane--webtzm .lane__tag {
  color: var(--blue-strong);
}

.lane h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.18;
  text-wrap: balance;
}

.lane > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.lane__points {
  margin: 4px 0 0;
  display: grid;
  gap: 11px;
  padding: 0;
  list-style: none;
}

.lane__points li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* A short rule rather than a dot: these are routes, and the rest of the page draws a route
   as a line. */
.lane__points li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--subtle);
}

.lane--webtzm .lane__points li::before {
  background: var(--blue);
}

/* ---- The merge ----------------------------------------------------------------------
   The section's argument, drawn: two lanes, one destination. It is a still image on
   purpose. The hero already runs an animated route, and a second timed animation on the
   same page costs frames for the whole time the section is on screen without saying
   anything the static mark does not. */
.lane-merge {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.lane-merge__mark {
  width: 100%;
  height: auto;
  max-height: 96px;
  display: block;
}

/* `--line` is a hairline token for dividers sitting on a solid surface. Used for a
   standalone mark over the atmosphere it measured 1.21 against its ground, which is to
   say it was not there. This reuses the hover ring, which is already balanced across the
   two themes, so the mark reads without becoming a diagram competing with the cards. */
.lane-merge__line {
  fill: none;
  stroke: var(--card-hover-ring);
  stroke-width: 2;
  stroke-linecap: round;
}

.lane-merge__node {
  fill: var(--blue);
}

.lane-merge__destination {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

.lane-merge__destination strong {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 760px) {
  .lane-picker,
  .lane-merge {
    width: min(var(--container), calc(100% - 36px));
  }

  .lane-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .lane {
    padding: 24px;
  }

  /* Stacked, the two curves no longer describe anything - the lanes are already one
     column - so the mark collapses to the sentence it was illustrating. */
  .lane-merge__mark {
    display: none;
  }

  .lane-merge {
    margin-top: 16px;
  }
}

@media (max-width: 360px) {
  .lane-picker,
  .lane-merge {
    width: min(var(--container), calc(100% - 28px));
  }

  .lane {
    padding: 16px;
  }
}

/* Four rows, because a longer table stops being a comparison and becomes a spec sheet.
   Every row has to differ across the two columns or it is not telling anyone anything - a
   previous version ended on "Backend to build and host: None / None", which filled a row
   and settled nothing. */
.landing-comparison__table-wrap {
  width: min(var(--container), calc(100% - 48px));
  margin: 16px auto 0;
  overflow-x: auto;
  border-radius: var(--landing-radius-lg);
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-stroke),
    var(--shadow-surface);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .landing-comparison__table-wrap {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    background:
      linear-gradient(180deg, var(--glass-highlight), transparent 46%),
      var(--glass-fill-quiet);
  }
}

.landing-comparison__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.landing-comparison__table caption {
  padding: 20px 24px 12px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.landing-comparison__table th,
.landing-comparison__table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.landing-comparison__table thead th {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A global `th` rule in landing.css uppercases every table header. That is right for the
   column heads and wrong for the row labels, which are sentence-case questions. */
.landing-comparison__table tbody th {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-transform: none;
}

.landing-comparison__table tbody tr:last-child th,
.landing-comparison__table tbody tr:last-child td {
  border-bottom: 0;
}

/* The right-hand column is the route this product provides, so it carries the same faint
   route signal the rest of the page uses for a selected path. Faint on purpose: it is a
   wayfinder for scanning, not a verdict on the other column. */
.landing-comparison__table th:last-child,
.landing-comparison__table td:last-child {
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

@media (max-width: 760px) {
  .landing-comparison__table-wrap {
    width: min(var(--container), calc(100% - 36px));
  }

  .landing-comparison__table th,
  .landing-comparison__table td {
    padding: 12px 16px;
  }

  .landing-comparison__table caption {
    padding: 16px 16px 12px;
  }
}

@media (max-width: 360px) {
  .landing-comparison__table-wrap {
    width: min(var(--container), calc(100% - 28px));
  }
}

.landing-comparison__table-wrap:focus-visible {
  outline: 2px solid var(--glow-route);
  outline-offset: 3px;
}

/* Only where the table actually outruns its container. Above the table's 620px floor plus the
   page gutters there is nothing to scroll, and a hint pointing at a table that already fits is
   an instruction to do nothing. */
.landing-comparison__scroll-hint {
  display: none;
}

@media (max-width: 720px) {
  .landing-comparison__scroll-hint {
    display: block;
    width: min(var(--container), calc(100% - 36px));
    margin: 8px auto 0;
    color: var(--subtle);
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
  }
}

@media (max-width: 360px) {
  .landing-comparison__scroll-hint {
    width: min(var(--container), calc(100% - 28px));
  }
}