/* Comparison page (pen.dev "Vertailu 1440" / "Vertailu 390"). Desktop: seven-column table, the Offgrid66 column
   on the table tint. Phone: each criterion is a block with one labelled line per app. */
.cmp { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.cmp-head h1 { font-size: clamp(46px, 6.7vw, 96px); line-height: 1; margin-bottom: 18px; max-width: 14em; }
.cmp-lead { max-width: 760px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; margin-bottom: 28px; }
.cmp-ctas { margin-bottom: clamp(40px, 5vw, 64px); }
.cmp-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cmp-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.cmp-method div { border: var(--rule); border-radius: var(--r); padding: 20px 22px; background: var(--panel); }
.cmp-method dt { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cmp-method dd { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5; }

.cmp-sec { padding-top: clamp(64px, 8vw, 112px); scroll-margin-top: 24px; }
.cmp-sec h2 { margin-bottom: 24px; max-width: 18em; }
.cmp-intro { max-width: 860px; color: var(--ink2); line-height: 1.55; margin-bottom: 28px; }

.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.45; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 18px 14px; overflow-wrap: break-word; }
.cmp-table thead th { vertical-align: bottom; border-bottom: var(--border-width) solid var(--table-line); font-weight: 400; }
.cmp-table .cmp-corner { width: 25%; padding-left: 0; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.cmp-name { display: block; font: 700 22px/1.1 var(--disp); color: var(--ink); margin-bottom: 6px; }
.cmp-maker { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cmp-price { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 8px; }
.cmp-src-link { font: 400 12px/1.4 var(--mono); color: var(--ink2); padding: 12px 0; }
.cmp-src-link:hover { color: var(--ink); }
.cmp-table thead th.cmp-og { background: var(--table-head); }
.cmp-table thead th.cmp-og .cmp-name { color: var(--accent); }
.cmp-table tbody tr { border-bottom: var(--rule); }
.cmp-table tbody th { padding-left: 0; font-weight: 400; }
.cmp-crit { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.cmp-desc { display: block; font-size: 13px; color: var(--muted); }
.cmp-table td.cmp-og { background: var(--table-cell); }
.cmp-k { display: none; }

.cmp-chip { display: inline-flex; gap: 4px; align-items: baseline; font-size: 13px; font-weight: 600; line-height: 1.3; padding: 3px 8px; border-radius: var(--radius-small); }
.cmp-chip-y { background: var(--accent); color: var(--accent-ink); }
.cmp-chip-p { border: var(--border-width) solid var(--ink2); color: var(--ink); }
.cmp-chip-n { color: var(--ink); padding-left: 0; padding-right: 0; }
.cmp-none { font-size: 13px; color: var(--muted); }
.cmp-text { color: var(--ink); }

.cmp-scores, .cmp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cmp-scores { grid-template-columns: repeat(6, 1fr); }
.cmp-score { border: var(--rule); border-radius: var(--r); background: var(--panel); padding: 18px 20px; }
.cmp-score-og { border-color: var(--ink2); background: var(--panel2); }
.cmp-score-name { display: block; font: 700 22px/1.1 var(--disp); color: var(--ink); margin-bottom: 12px; }
.cmp-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.cmp-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.cmp-dots i.on { background: var(--accent); }
.cmp-score-n { color: var(--ink2); font-size: 14px; }

.cmp-cards { grid-template-columns: repeat(5, 1fr); }
.cmp-card { border: var(--rule); border-radius: var(--r); background: var(--panel); padding: 20px 22px; }
.cmp-card-name { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.cmp-card h3 { font-size: 18px; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
.cmp-card p { font-size: 15px; line-height: 1.5; color: var(--ink2); }
.cmp-og-note { margin-top: 28px; margin-bottom: 0; }

.cmp-faq { max-width: 900px; border-top: var(--rule); }
.cmp-faq-item { border-bottom: var(--rule); }
.cmp-faq-item summary { cursor: pointer; padding: 20px 0; min-height: 44px; font-weight: 600; color: var(--ink); font-size: 17px; }
.cmp-faq-item p { margin: 0 0 22px; color: var(--ink2); line-height: 1.55; max-width: 760px; }

.cmp-srcs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.cmp-src { scroll-margin-top: 24px; }
.cmp-src h3 { font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.cmp-src ul { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; line-height: 1.5; }
.cmp-src li { margin-bottom: 6px; color: var(--ink2); }
.cmp-src a { color: var(--ink2); }
.cmp-src a:hover { color: var(--ink); }
.cmp-src-date { font-size: 12px; color: var(--muted); }
.cmp-note { margin-top: 32px; max-width: 860px; }
.cmp-note a { color: var(--ink2); padding: 14px 0; } /* inline link: padding grows the tap area to 44 px without moving the text */

.cmp-band { margin-top: clamp(64px, 8vw, 112px); border: var(--rule); border-radius: var(--r); background: var(--panel); padding: clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cmp-band h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 8px; }
.cmp-band p { color: var(--ink2); margin: 0; }

@media (max-width: 1100px) {
  .cmp-method { grid-template-columns: 1fr; }
  .cmp-scores { grid-template-columns: repeat(3, 1fr); }
  .cmp-cards { grid-template-columns: repeat(2, 1fr); }
  .cmp-srcs { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet and phone: the table reflows into one block per criterion, no scroll container. */
@media (max-width: 900px) {
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-table tbody tr { border: var(--rule); border-radius: var(--r); background: var(--panel); padding: 18px 18px 8px; margin-bottom: 12px; }
  .cmp-table tbody th { padding: 0 0 12px; }
  .cmp-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: var(--rule); }
  .cmp-table td.cmp-og { background: none; }
  .cmp-k { display: block; font-size: 15px; color: var(--ink); }
  .cmp-og .cmp-k { color: var(--accent); font-weight: 600; }
  .cmp-table td > span:last-child { text-align: right; }
}

@media (max-width: 700px) {
  .cmp-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-score { padding: 16px; }
  .cmp-dots { gap: 5px; }
  .cmp-dots i { width: 10px; height: 10px; }
  .cmp-cards, .cmp-srcs { grid-template-columns: 1fr; }
  .cmp-band { flex-direction: column; align-items: stretch; }
  .cmp-band .btn { display: flex; width: 100%; justify-content: space-between; }
}
/* Narrow phones: the band button drops to the md plate and keeps only "TestFlight"; the md fit thresholds apply. */
@media (max-width: 419px) {
  .cmp-band .btn-lg { min-height: 52px; padding-left: 22px; font-size: 20px; }
  .cmp-band .btn-lg:has(.btn-ro) { padding-right: 0; }
  .cmp-band .btn-lg .btn-ro { display: inline-flex; padding: 0 16px; font-size: 13px; }
  .cmp-band .btn-ro-long { display: none; }
}
@container (max-width: 278px) { .cmp-band .btn-lg .btn-ro { display: none; } .cmp-band .btn-lg:has(.btn-ro) { padding-right: 22px; } }
@container (max-width: 306px) { :lang(en) .cmp-band .btn-lg .btn-ro { display: none; } :lang(en) .cmp-band .btn-lg:has(.btn-ro) { padding-right: 22px; } }