/* The Compare pages (/compare/, /compare/a2ui/): the site's calm type (legal.css), laid out as the Apple HIG's inset
   grouped lists — rounded groups on the page, hairline separators inset from the leading edge, the iOS type ladder
   (headline, body, footnote in the secondary label colour) and system colours, light and dark. The comparison table
   is one group on a wide screen; on a phone each row becomes its own group, each answer labelled A2UI or Taskriz. */
.compare.legal { max-width: 860px; }
.compare-lede { margin: 14px 0 8px; font-size: 21px; line-height: 1.45; color: #424245; }

/* the list of comparisons (/compare/) and the two summaries (/compare/a2ui/): grouped cards */
.compare .compare-list, .compare .compare-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.compare .compare-list li, .compare .compare-cards li { margin: 0; border-radius: 14px; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.compare .compare-cards li { padding: 16px 18px; }
.compare-list a { display: block; min-height: 44px; padding: 16px 36px 16px 18px; color: inherit; text-decoration: none; position: relative; }
.compare-list a::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #c4c4c7; border-right: 2px solid #c4c4c7; transform: translateY(-50%) rotate(45deg); } /* the disclosure chevron */
.compare-list a:active { background: rgba(0, 0, 0, .06); border-radius: 14px; }
.compare .compare-list h2 { margin: 0 0 4px; font-size: 17px; color: #007aff; }
.compare-cards h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.compare .compare-list p, .compare .compare-cards p { margin: 0; font-size: 15px; color: #6e6e73; }
@media (min-width: 640px) { .compare .compare-cards { grid-template-columns: 1fr 1fr; } }

/* the questions people search for: an inset grouped list, a question per row */
.compare .compare-faq { list-style: none; margin: 14px 0 0; padding: 0; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.compare .compare-faq li { margin: 0; padding: 14px 16px; background-image: linear-gradient(rgba(60, 60, 67, .29), rgba(60, 60, 67, .29)); background-size: calc(100% - 16px) .5px; background-position: 16px 0; background-repeat: no-repeat; }
.compare .compare-faq li:first-child { background-image: none; }
.compare-faq h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.compare .compare-faq p { margin: 0; font-size: 15px; color: #6e6e73; }

/* the comparison: one inset grouped list, a row per question */
.compare-table { width: 100%; margin: 14px 0 0; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); font-size: 15px; line-height: 1.4; }
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.compare-table thead th { padding-top: 14px; padding-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: #6e6e73; }
.compare-table tbody th { width: 24%; font-size: 15px; font-weight: 600; color: #1d1d1f; }
.compare-table td { width: 38%; color: #333336; }
.compare-table thead th.compare-us { color: #007aff; } /* Taskriz's column, in the system tint */
/* hairline separators, inset from the leading edge as in an iOS list */
.compare-table tbody tr { background-image: linear-gradient(rgba(60, 60, 67, .29), rgba(60, 60, 67, .29)); background-size: calc(100% - 16px) .5px; background-position: 16px 0; background-repeat: no-repeat; }

/* the next step */
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.compare-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.compare-actions .compare-start { padding: 0 22px; border-radius: 980px; background: #007aff; color: #fff; font-weight: 600; text-decoration: none; }
.compare-actions .compare-start:active { filter: brightness(.85); }

@media (max-width: 639px) {
  /* a phone: each row its own group — the question as its header, then each answer under a small label */
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .compare-table thead { display: none; }
  .compare-table tbody tr { margin: 0 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .72); background-image: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); overflow: hidden; }
  .compare-table tbody th { width: auto; padding: 12px 16px 4px; font-size: 17px; }
  .compare-table td { width: auto; }
  .compare-table td { padding: 10px 16px 12px; background-image: linear-gradient(rgba(60, 60, 67, .29), rgba(60, 60, 67, .29)); background-size: calc(100% - 16px) .5px; background-position: 16px 0; background-repeat: no-repeat; }
  .compare-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: #6e6e73; }
  .compare-table td[data-label="Taskriz"]::before { color: #007aff; }
}

@media (prefers-color-scheme: dark) {
  .compare-lede { color: #a1a1a6; }
  .compare .compare-list li, .compare .compare-cards li, .compare-table { background: rgba(28, 28, 30, .8); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }
  .compare-list a::after { border-color: #5a5a5e; }
  .compare-list a:active { background: rgba(255, 255, 255, .08); }
  .compare .compare-list h2 { color: #0a84ff; }
  .compare .compare-list p, .compare .compare-cards p, .compare .compare-faq p, .compare-table thead th { color: #a1a1a6; }
  .compare .compare-faq { background: rgba(28, 28, 30, .8); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }
  .compare .compare-faq li { background-image: linear-gradient(rgba(84, 84, 88, .6), rgba(84, 84, 88, .6)); }
  .compare .compare-faq li:first-child { background-image: none; }
  .compare-table tbody th { color: #f5f5f7; }
  .compare-table td { color: #d1d1d6; }
  .compare-table tbody tr { background-image: linear-gradient(rgba(84, 84, 88, .6), rgba(84, 84, 88, .6)); }
  .compare-actions .compare-start { background: #0a84ff; }
  .compare-table thead th.compare-us { color: #0a84ff; }
}
@media (prefers-color-scheme: dark) and (max-width: 639px) {
  .compare-table { background: none; box-shadow: none; }
  .compare-table tbody tr { background: rgba(28, 28, 30, .8); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }
  .compare-table td { background-image: linear-gradient(rgba(84, 84, 88, .6), rgba(84, 84, 88, .6)); }
  .compare-table td::before { color: #a1a1a6; }
  .compare-table td[data-label="Taskriz"]::before { color: #0a84ff; }
}