/* Loop comparison page, structure mock-up version 2 (2026-10-13): one look for the pair (Loop the
   white card, the rival the grey one), Summary and Strengths merged, no fact cards, the site's own
   small label in Differences. Built on site.css: same tokens, type,
   spacing scale, cards and motion. Only what a comparison page adds lives here. No lines between
   anything: space, cards and a soft fill do the separating. */

.cmp main { position: relative; z-index: 1; }
/* One width for everything: every block fills the site's 1000px column (Theo, 2026-10-13). */
.cmp .faq { max-width: none; }
.cmp .items { padding: 0; }
.ct.rows td, .ct.rows th { white-space: nowrap; }

/* ---------- Hero: the two apps, the name of the page, the short answer ---------- */
.cmp-hero { padding-top: 168px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pair { display: inline-flex; align-items: center; gap: var(--s3); }
.pair .app { width: 56px; height: 56px; border-radius: 15px; background: var(--card); box-shadow: var(--shadow-card); display: grid; place-items: center; }
.pair .app img { width: 38px; height: 38px; border-radius: 9px; }
.pair .app.rival span { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink2); }
.pair .vs { font-size: 14px; font-weight: 500; color: var(--ink4); }
.cmp-hero h1 { margin-top: var(--s6); font-size: clamp(46px, 7.4vw, 80px); font-weight: 400; line-height: 1.02; letter-spacing: -0.04em; color: var(--ink1); text-wrap: balance; }
.cmp-hero .answer { margin-top: var(--s5); max-width: 36em; font-size: 19px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
.cmp-hero .answer b { color: var(--ink1); font-weight: 500; }
.cmp-hero .meta { margin-top: var(--s5); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13.5px; color: var(--ink4); }

/* ---------- Summary: one card each, the verdict, the strengths, who it is not for ---------- */
.pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s8); }
/* The two cards share rows, so each verdict, list and Not For line starts level whatever the text length. */
.pair2 .side { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.side { padding: 32px; border-radius: 24px; display: flex; flex-direction: column; }
.side.us { background: var(--card); box-shadow: var(--shadow-card); }
.side.them { background: var(--quiet); }
.side .t { font-size: 14px; font-weight: 500; color: var(--accent-text); }
.side.them .t { color: var(--ink3); }
.side .verdict { margin-top: var(--s3); font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink1); text-wrap: pretty; }
.side.them .verdict { color: var(--ink-strong); }
.side .list { margin-top: var(--s5); gap: var(--s4); flex: none; }
.side .list li { font-size: 15.5px; line-height: 1.5; color: var(--ink2); display: block; padding-left: 26px; position: relative; }
.side .list li svg { position: absolute; left: 0; top: 3px; }
.side.them .tick { stroke: var(--ink3); }
.side .list b { color: var(--ink1); font-weight: 500; }
.side .notfor { margin-top: var(--s5); font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.side .notfor b { color: var(--ink1); font-weight: 500; }
.side .act { margin-top: auto; padding-top: var(--s6); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.side .fine { font-size: 13.5px; color: var(--ink4); }

/* ---------- Overview: what each one is, plain text in two columns ---------- */
.ov { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); margin-top: var(--s8); }
.ov-name { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); }
.ov-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--card); box-shadow: var(--shadow-card); display: grid; place-items: center; }
.ov-ico img { width: 22px; height: 22px; border-radius: 5px; }
.ov-ico span { font-size: 14px; font-weight: 500; color: var(--ink2); }
.ov-lede { margin-top: var(--s4); font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink1); text-wrap: pretty; }
.ov-col.them .ov-lede { color: var(--ink-strong); }
.ov-col a { color: var(--ink1); text-decoration: underline; text-decoration-color: var(--ink4); text-underline-offset: 3px; }
.ov-col p:not(.ov-lede) { margin-top: var(--s3); font-size: 17px; line-height: 1.65; color: var(--ink2); text-wrap: pretty; }

/* ---------- Comparison table: a real table, Loop's column tinted top to bottom ---------- */
.ct-card { margin-top: var(--s8); padding: 12px clamp(10px, 1.6vw, 20px) 16px; border-radius: 22px; background: linear-gradient(180deg, var(--card), var(--paper)); box-shadow: var(--shadow-lift); }
.ct { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ct col.c1 { width: 36%; }
.ct col.c2, .ct col.c3 { width: 32%; }
.ct th, .ct td { padding: 14px 16px; text-align: left; vertical-align: middle; font-size: 15px; line-height: 1.4; }
.ct thead th { padding-top: 18px; padding-bottom: 16px; font-weight: 500; }
.ct thead .us-h { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; letter-spacing: -0.01em; color: var(--ink1); }
.ct thead .us-h img { width: 20px; height: 20px; }
.ct thead .them-h { font-size: 15px; color: var(--ink2); }
.ct tbody th { font-weight: 400; color: var(--ink-strong); text-wrap: pretty; }
.ct tbody td { color: var(--ink2); text-wrap: pretty; }
.ct tbody td.hi { color: var(--ink1); font-weight: 500; }
.ct .grp th { padding-top: 26px; padding-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--accent-text); }
.ct .hi { background: rgba(75, 123, 227, .06); }
.ct thead .hi { border-radius: 14px 14px 0 0; }
.ct tbody tr:last-child .hi { border-radius: 0 0 14px 14px; }
.ct tbody tr:not(.grp) { transition: background-color var(--quick) ease-out; }
.ct tbody tr:not(.grp):hover th, .ct tbody tr:not(.grp):hover td:not(.hi) { background: var(--quiet); }
.ct tbody tr:not(.grp):hover th { border-radius: 10px 0 0 10px; }
.ct tbody tr:not(.grp):hover td:last-child { border-radius: 0 10px 10px 0; }
.ct .yes { display: inline-flex; align-items: center; gap: 8px; }
.ct .yes svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct td:not(.hi) .yes svg { stroke: var(--ink3); }
.ct .no { color: var(--ink4); }
.source { margin: var(--s5) auto 0; max-width: 820px; text-align: center; font-size: 14px; line-height: 1.55; color: var(--ink3); text-wrap: balance; }
.source a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--ink4); text-underline-offset: 3px; }
.source a:hover { color: var(--ink1); }

/* ---------- Reader View: what the recipient opens, Loop in the white frame, the rival in grey ---------- */
.rv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s8); }
.rv-item { margin: 0; }
.rv .frame-in { aspect-ratio: 16 / 10; overflow: hidden; }
.rv .frame-in.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv .frame-in.rival img { object-position: top center; }
.rv .img-dark { display: none !important; }
:root[data-theme="dark"] .rv .img-light { display: none !important; }
:root[data-theme="dark"] .rv .img-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rv .img-light { display: none !important; }
  :root:not([data-theme="light"]) .rv .img-dark { display: block !important; }
}
.rv-item.them .frame { background: var(--quiet); box-shadow: none; }
.rv .frame-in.empty { display: grid; place-items: center; padding: var(--s5); background: none; box-shadow: none; text-align: center; font-size: 14px; color: var(--ink4); }
.rv figcaption { margin-top: var(--s4); text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink2); text-wrap: balance; }
.rv figcaption b { color: var(--ink1); font-weight: 500; }

/* ---------- Cost: the homepage's Renting bars, over one, three or five years ---------- */
.cost .t-tabs { display: flex; width: fit-content; margin: var(--s7) auto 0; }
.cost .bars { margin-top: var(--s6); display: grid; gap: 10px; }
.cost .b { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; padding-right: 140px; }
.cost .nm { font-size: 14px; font-weight: 500; color: var(--ink3); }
.cost .b.us .nm { color: var(--ink1); }
.cost .track { position: relative; height: 44px; }
.cost .fill { display: block; height: 100%; min-width: 14px; border-radius: 11px; background: var(--tabs-bar-bg); width: var(--w); transition: width 1.05s cubic-bezier(.22, .75, .3, 1); }
.cost .b.us .fill { background: var(--accent); }
.cost .val { position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--w) + 14px); font-size: 14px; font-weight: 500; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; transition: left 1.05s cubic-bezier(.22, .75, .3, 1); }
.cost .b.us .val { color: var(--ink1); }
.cost .cap { margin: var(--s5) auto 0; max-width: 56ch; text-align: center; font-size: 14px; line-height: 1.55; color: var(--ink3); text-wrap: balance; }

/* ---------- Tools as rows (alternatives page): the same table, Loop's ROW tinted instead of its column ---------- */
.ct.rows col { width: 20%; } /* five equal columns, so no gap opens in the middle */
.ct.rows thead th { font-size: 13.5px; font-weight: 500; color: var(--ink3); }
.ct.rows tbody th { font-weight: 500; color: var(--ink1); }
.ct.rows tr.us th, .ct.rows tr.us td { background: rgba(75, 123, 227, .06); color: var(--ink1); }
.ct.rows tr.us th { border-radius: 12px 0 0 12px; } .ct.rows tr.us td:last-child { border-radius: 0 12px 12px 0; }
.ct.rows tr.ref th, .ct.rows tr.ref td { color: var(--ink3); }
.ct.rows .us-n { display: inline-flex; align-items: center; gap: 8px; vertical-align: bottom; } /* sits on the row's text line, measured */
.ct.rows .us-n img { width: 18px; height: 18px; }

/* ---------- Alternatives: one block per tool, number and name left, the write-up right ---------- */
.alt .num { display: block; font-size: 13px; font-weight: 500; color: var(--ink3); font-variant-numeric: tabular-nums; margin-bottom: var(--s2); }
.alt .facts { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink3); }
.alt .facts b { color: var(--ink2); font-weight: 500; }
.alt .facts a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--ink4); text-underline-offset: 3px; }
.alt .facts a:hover { color: var(--ink1); }
.alt .alt-dl { margin-top: var(--s4); }

/* ---------- Compare hub: every comparison as a card, four across ---------- */
.more.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s8); }
.more.four a { padding: 20px 20px 22px; gap: 6px; }
.more.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s8); }
#comparisons { padding-top: 0; } /* the cards sit straight under the hero (Theo, 2026-10-13) */
.more.cols3 a { padding: 20px 20px 22px; gap: 6px; }
.more .k { font-size: 12.5px; font-weight: 500; color: var(--accent-text); }
.more a.list-card .k { color: var(--ink3); }

/* ---------- Mid-page download: one slim white card, the homepage's blue button ---------- */
.midcta { padding-top: var(--s9); }
.mid-card { display: flex; align-items: center; gap: var(--s4); padding: 16px 16px 16px 18px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-card); }
.mid-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--quiet); }
.mid-ico img { width: 30px; height: 30px; border-radius: 7px; }
.mid-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mid-t b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); }
.mid-t span { font-size: 14.5px; color: var(--ink2); }

/* ---------- Differences: one self-contained block per deciding factor ---------- */
.diffs { margin-top: var(--s8); display: grid; gap: var(--s7); }
.diff { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: start; }
.diff .label { display: block; margin-bottom: var(--s2); }
.diff .label.quiet { color: var(--ink3); }
.diff h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink1); }
.diff p { font-size: 17px; line-height: 1.65; color: var(--ink2); text-wrap: pretty; }
.diff p + p { margin-top: var(--s4); }
.diff p b { color: var(--ink1); font-weight: 500; }
.diff p a { color: var(--ink1); text-decoration: underline; text-decoration-color: var(--ink4); text-underline-offset: 3px; }

/* ---------- Switching: three steps ---------- */
.steps { margin-top: var(--s8); }

/* ---------- More comparisons ---------- */
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: var(--s7); }
.more a { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 20px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); transition: box-shadow var(--quick) ease-out, transform var(--quick) ease-out; }
.more a:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.more a:active { transform: scale(.98); }
.more .n { font-size: 15px; font-weight: 500; color: var(--ink1); letter-spacing: -0.01em; }
.more .d { font-size: 13.5px; line-height: 1.45; color: var(--ink3); text-wrap: balance; }

/* ---------- Dark ---------- */
:root[data-theme="dark"] .ct .hi { background: rgba(134, 169, 242, .09); }
:root[data-theme="dark"] .ct.rows tr.us th, :root[data-theme="dark"] .ct.rows tr.us td { background: rgba(134, 169, 242, .09); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct .hi { background: rgba(134, 169, 242, .09); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct.rows tr.us th, :root:not([data-theme="light"]) .ct.rows tr.us td { background: rgba(134, 169, 242, .09); } }

/* ---------- Arrival: the same rise as the homepage ---------- */
.js .cmp .reveal > .rise, .js .cmp .rise { opacity: 0; transform: translateY(12px); }
.js .cmp .is-in .rise, .js .cmp .rise.is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .js .cmp .rise { opacity: 1; transform: none; transition: none; } .cost .fill, .cost .val { transition: none; } }

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  .more.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .more.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cmp-hero { padding-top: 128px; }
  .cmp-hero .answer { font-size: 17px; }
  .pair2 { grid-template-columns: 1fr; gap: var(--s4); }
  .ov, .rv { grid-template-columns: 1fr; gap: var(--s7); }
  .midcta { padding-top: var(--s8); }
  .mid-card { flex-wrap: wrap; padding: 18px; }
  .mid-card .btn { width: 100%; }
  .alt .alt-dl { display: flex; width: 100%; margin-bottom: var(--s2); }
  .side { padding: 24px; }
  .pair2 .side { grid-row: auto; grid-template-rows: none; }
  .side .verdict { font-size: 18px; }
  .diff { grid-template-columns: 1fr; gap: var(--s3); }
  .diffs { gap: var(--s7); }
  .ct-card { padding: 6px 4px 10px; }
  .ct th, .ct td { padding: 12px 10px; font-size: 13.5px; }
  .ct col.c1 { width: 34%; } .ct col.c2, .ct col.c3 { width: 33%; }
  .ct thead .us-h { font-size: 16px; }
  .ct thead .them-h { font-size: 14px; }
  .ct .yes svg { display: none; }
  .cost .b { grid-template-columns: 1fr; gap: 6px; padding-right: 0; }
  .cost .track { height: 38px; padding-right: 110px; }
  .cost .val { left: auto; right: 0; transition: none; }
  .more, .more.four, .more.cols3 { grid-template-columns: 1fr; }
  .ct.rows td, .ct.rows th { white-space: normal; }
  .ct.rows th:nth-child(2), .ct.rows td:nth-child(2), .ct.rows col.r2 { display: none; }
  .ct.rows col.r1 { width: 31%; } .ct.rows col.r3 { width: 27%; } .ct.rows col.r4 { width: 24%; } .ct.rows col.r5 { width: 18%; }
}