/**
 * compare.css: the comparison pages only (compare.html and the five vs-*.html
 * pages). Linked AFTER style.css, and only from those pages. Everything here
 * is built from style.css's tokens, so light and dark mode come for free and
 * nothing in this file names a colour of its own.
 *
 * COMPONENTS
 *   .shell.shell-wide          wider column for the seven-product matrix
 *   .vs-hero                   page hero split: verdict left, .glance card right
 *   .glance > .glance-head + dl > div > dt + dd + dd.us
 *                              "at a glance" card; each dd carries a
 *                              visually-hidden product name for screen readers
 *   .hero-meta                 small dated line under the hero buttons
 *   .pick > .pick-card (.pick-us)   "Pick them if / pick us if"; the rival's
 *                              card comes first, and the concession with it
 *   .pick-list                 the list inside a pick card
 *   table.compare.compare-duo  one rival against Stitchfloor (three columns)
 *   table.compare.compare-7    the hub matrix (seven products)
 *   table.compare tr.group     a group label row; in card mode, a heading
 *   .sides > .side (.side-us)  "where they are stronger / where we differ"
 *   .costs > .cost (.cost-us)  price cards with the arithmetic in ol.working
 *   .lanes > li.lane (.lane-us)   "Running both": three steps with a seam
 *   .gaps                      what Stitchfloor does not do, said plainly
 *   .tile dl.tile-pick         two-line verdict inside a hub tile
 *   .corrections               the "write to us if a cell is wrong" box
 *
 * NO INLINE STYLES (the site's CSP refuses them): every variation is a class.
 */

/* ------------------------------------------------------------- layout */

.shell.shell-wide {
  max-width: 1400px;
}
.section-head.wide-head {
  max-width: 78ch;
}

/* ---------------------------------------------------------------- hero */

.vs-hero .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.vs-hero h1 {
  max-width: 17ch;
}
.vs-hero .lede {
  max-width: 54ch;
}
.hero-meta {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.hero-meta a {
  color: var(--ink-2);
}

/* The at-a-glance card: two products, four or five facts. */
.glance {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--raise);
  overflow: hidden;
}
.glance-head,
.glance dl > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.glance-head {
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--line-strong);
}
.glance-head span {
  padding: 14px 18px;
  background: var(--surface-2);
  color: var(--ink);
}
.glance-head .us {
  background: var(--accent);
  color: var(--accent-contrast);
}
.glance-head small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.glance-head .us small {
  color: var(--accent-contrast);
}
.glance dl {
  margin: 0;
}
.glance dl > div + div {
  border-top: 1px solid var(--line);
}
.glance dt {
  grid-column: 1 / -1;
  padding: 12px 18px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.glance dd {
  margin: 0;
  padding: 4px 18px 13px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.glance dd.us {
  color: var(--ink);
  font-weight: 600;
}
/* The label row spans both columns, so the Stitchfloor half of each row is
   tinted by a pseudo-element behind the label and the value alike. */
.glance dl > div {
  position: relative;
}
.glance dl > div::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  background: var(--accent-tint);
  border-left: 1.5px dashed var(--stitch);
  z-index: 0;
}
.glance dt,
.glance dd {
  position: relative;
  z-index: 1;
}
.glance-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
  background: var(--surface-2);
}

/* ---------------------------------------------------------------- pick */

.pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pick-card {
  position: relative;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.tint .pick-card {
  background: var(--ground);
}
.pick-card h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.pick-card .pick-for {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.pick-us {
  border: 2px solid var(--accent);
  box-shadow: var(--raise);
  background: linear-gradient(160deg, var(--accent-tint), var(--surface) 62%);
}
.tint .pick-us {
  background: linear-gradient(160deg, var(--accent-tint), var(--ground) 62%);
}
/* The hang-tag stitch, as on the plan cards. */
.pick-us::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dashed var(--stitch);
  border-radius: 14px;
  pointer-events: none;
}
.pick-us > * {
  position: relative;
  z-index: 1;
}
.pick-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
}
.pick-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-top: 1px solid var(--line);
}
.pick-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.pick-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 15px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted-tint);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.pick-list li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 21px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}
.pick-us .pick-list li::before {
  background: var(--accent);
  box-shadow: none;
}
.pick-us .pick-list li::after {
  left: 7.5px;
  top: 18px;
  width: 4px;
  height: 7px;
  border-radius: 0;
  background: transparent;
  border: solid var(--accent-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ------------------------------------------------------------- tables */

/* One rival against Stitchfloor: a row label and two wide columns. */
@media (min-width: 1141px) {
  table.compare.compare-duo {
    min-width: 0;
  }
  table.compare.compare-duo tbody th {
    width: 24%;
  }
  table.compare.compare-duo td {
    width: 38%;
  }
  table.compare.compare-duo {
    font-size: 14.5px;
  }
  /* The hub's seven products share whatever width the wide shell has. */
  table.compare.compare-7 {
    min-width: 0;
    font-size: 13.5px;
  }
  table.compare.compare-7 tbody th {
    width: 10%;
  }
  table.compare.compare-7 td.us {
    width: 15%;
  }
  table.compare.compare-7 th,
  table.compare.compare-7 td {
    padding: 12px 11px;
  }
}

/* A group label inside a comparison: "The floor", "Cost and setup". */
table.compare tr.group th {
  padding: 22px 14px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}
table.compare tbody tr.group:first-child th {
  padding-top: 14px;
}
table.compare .group-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
table.compare .group-label::after {
  content: '';
  width: 36px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--stitch) 0 6px, transparent 6px 10px);
}
@media (max-width: 1140px) {
  /* In card mode a group row is a heading between stacks of cards. */
  table.compare tr.group {
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 30px 0 12px;
    overflow: visible;
  }
  table.compare tbody tr.group:first-child {
    margin-top: 0;
  }
  table.compare tr.group th {
    padding: 0;
    background: transparent;
    border-bottom: 0;
    font-size: 12px;
  }
  table.compare tbody tr.group:last-child th {
    border-bottom: 0;
  }
  table.compare.compare-duo td {
    grid-template-columns: minmax(96px, 34%) 1fr;
  }
}

/* Tabular figures widen Inter's hyphen ("E - way"), so on these pages they
   are kept to the figures themselves. */
table.compare.compare-duo,
table.compare.compare-7 {
  font-variant-numeric: normal;
}
table.compare .fig,
.cost-fig,
ol.working li b {
  font-variant-numeric: tabular-nums;
}

/* A row whose figures are money: the numbers read as a column. */
table.compare .fig {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}
table.compare .us .fig {
  color: var(--accent-ink);
}

/* ------------------------------------------------------------- sides */

.sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.side {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.tint .side {
  background: var(--ground);
}
.side-us {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.side h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}
.side-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--muted-tint);
  color: var(--ink-2);
}
.side-us .side-tag {
  background: var(--accent);
  color: var(--accent-contrast);
}
.sides.sides-3 {
  grid-template-columns: repeat(3, 1fr);
}
.side .points {
  margin-top: 18px;
}
.side .points li:first-child {
  border-top: 0;
  padding-top: 4px;
}
.side .points li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* -------------------------------------------------------------- costs */

/* Four price cards: four across, two by two, or one column. Explicit, so a
   width near 1000px never lays them out three and one. */
.costs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 641px) {
  .costs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1101px) {
  .costs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Two to a row, for prices whose arithmetic needs the room (vs-sap). */
@media (min-width: 641px) {
  .costs.costs-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cost {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.tint .cost {
  background: var(--ground);
}
.cost-us {
  border: 2px solid var(--accent);
  background: linear-gradient(160deg, var(--accent-tint), var(--surface) 70%);
}
.tint .cost-us {
  background: linear-gradient(160deg, var(--accent-tint), var(--ground) 70%);
}
.cost-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cost-us .cost-name {
  color: var(--accent-ink);
}
.cost-fig {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.cost-fig b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.cost-fig span {
  font-size: 14px;
  color: var(--ink-2);
}
.cost-basis {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
/* The arithmetic, set like the lines of a job card. */
ol.working {
  margin: 18px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1.5px dashed var(--line-strong);
  font-size: 13.5px;
  flex: 1;
}
.cost-us ol.working {
  border-top-color: var(--stitch);
}
ol.working li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 5px 0;
  color: var(--ink-2);
}
/* A long figure drops onto its own line, still right-aligned, rather than
   running out of the card. */
ol.working li span {
  flex: 1 1 9em;
}
ol.working li b {
  margin-left: auto;
  text-align: right;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
ol.working li.total {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}
ol.working li.total b {
  font-weight: 800;
}
.cost-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 90ch;
}
.cost-note + .cost-note {
  margin-top: 8px;
}

/* -------------------------------------------------------------- lanes */

/* Running both: three steps joined by a stitched seam. */
.lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.lanes::before {
  content: '';
  position: absolute;
  top: 43px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--stitch) 0 6px, transparent 6px 11px);
  z-index: 0;
}
.lane {
  position: relative;
  z-index: 1;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.tint .lane {
  background: var(--ground);
}
.lane-us {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.lane-no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.lane-us .lane-no {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.lane h3 {
  margin-top: 16px;
  font-size: 18px;
}
.lane p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-2);
}
.lane .who {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lane-us .who {
  color: var(--accent-ink);
}
.lanes + .callout {
  margin-top: 22px;
  max-width: 90ch;
}

/* --------------------------------------------------------------- gaps */

.gaps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gaps li {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink-2);
}
.tint .gaps li {
  background: var(--ground);
}
.gaps b {
  display: block;
  margin-bottom: 6px;
  font-size: 15.5px;
  color: var(--ink);
}
.gaps .m {
  margin-bottom: 10px;
}

/* -------------------------------------------------------- hub tiles */

.tile .tile-vs {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
dl.tile-pick {
  margin: 4px 0 6px;
  display: grid;
  align-content: start;
  gap: 10px;
  flex: 1;
}
dl.tile-pick div {
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}
dl.tile-pick div.us {
  border-left: 2px dashed var(--stitch);
}
dl.tile-pick dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
dl.tile-pick div.us dt {
  color: var(--accent-ink);
}
dl.tile-pick dd {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* -------------------------------------------------------- corrections */

.corrections {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  font-size: 15px;
  color: var(--ink-2);
}
.corrections::before {
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 14px no-repeat,
    var(--accent-tint);
}
.corrections b {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}
.corrections + details.sources-box {
  margin-top: 18px;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .vs-hero .shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .vs-hero h1 {
    max-width: 22ch;
  }
  .lanes,
  .sides.sides-3 {
    grid-template-columns: 1fr;
  }
  .lanes::before {
    top: 24px;
    bottom: 24px;
    left: 43px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--stitch) 0 6px, transparent 6px 11px);
  }
}

@media (max-width: 900px) {
  .pick,
  .sides {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pick-card,
  .side {
    padding: 24px 20px 22px;
  }
  .glance dt {
    padding: 11px 14px 0;
  }
  .glance dd,
  .glance-head span,
  .glance-foot {
    padding-left: 14px;
    padding-right: 14px;
  }
  .glance dd {
    font-size: 14px;
  }
  .cost-fig b {
    font-size: 30px;
  }
  .corrections {
    grid-template-columns: 1fr;
  }
}