/* /vs/<app>/ and /en/vs/<app>/: UrusFamily against one named app. Loaded after site.css and vs.css on
   those pages only. Tokens from site.css, marks from vs.css plus help-circle (shared-assets) for
   "not stated". Art is existing generated clay; never the other app's logo or screens. */
.cmp { --mark-yes: var(--success); --mark-part: #9a5b00; --mark-no: var(--muted); --mark-ns: var(--muted); }
.m-ns { color: var(--mark-ns); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 12.01 13 12.01 13V14M12 17H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* hero: copy beside one clay tile holding both sides */
.cmp-hero-grid { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 60rem) { .cmp-hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s16); } }
.cmp-hero-grid h1 { max-width: 14ch; }
.cmp-checked { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) var(--s4); border-radius: var(--radius-pill); background: var(--tile); color: var(--muted); font-size: var(--t-meta); }
.cmp-checked .m { width: 1rem; height: 1rem; color: var(--success); vertical-align: 0; }
.cmp-duo { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); padding: var(--s8) var(--s6); background: var(--tile); border-radius: var(--radius-card); }
@media (min-width: 46rem) { .cmp-duo { padding: var(--s12) var(--s10); gap: var(--s5); } }
.cmp-duo figure { margin: 0; text-align: center; }
.cmp-duo img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto var(--s3); }
.cmp-duo figcaption { font-size: var(--t-small); font-weight: var(--wt-strong); color: var(--text); }
.cmp-vs { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); font-size: var(--t-small); font-weight: var(--wt-strong); }

/* at a glance: four tiles on the textured band, each answers one question for both apps */
.cmp-glance { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cmp-glance { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } }
@media (min-width: 64rem) { .cmp-glance { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.cmp-glance > li { margin: 0; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); background: var(--bg); border-radius: var(--radius-card); }
.cmp-glance h3 { margin: 0; font-size: var(--t-body); line-height: 1.35; }
.cmp-glance dl { margin: 0; display: grid; gap: var(--s3); }
.cmp-glance dl > div { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.cmp-glance dt { grid-column: 2; font-size: var(--t-meta); color: var(--muted); }
.cmp-glance dd { grid-column: 2; margin: 0; font-size: var(--t-small); color: var(--text); }
.cmp-glance .m { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }

/* the table: body-size type, generous rows, UrusFamily column on a tile; phones scroll sideways
   with the topic column pinned */
.cmp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5) var(--s8); margin-bottom: var(--s10); }
.cmp-head h2 { margin: 0; max-width: 18ch; }
.cmp-head .section-intro { margin: 0; max-width: 40ch; }
.cmp-scroll { overflow-x: auto; margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cmp-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cmp-table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--t-body); line-height: 1.5; }
.cmp-table col.c-topic { width: 26%; }
.cmp-table thead th { position: sticky; top: 0; z-index: 1; padding: var(--s5) var(--s5) var(--s4); text-align: left; vertical-align: bottom; background: var(--bg); border-bottom: 1px solid var(--border); font-size: var(--t-small); font-weight: var(--wt-strong); }
.cmp-table thead th:first-child { padding-left: 0; color: var(--muted); font-size: var(--t-meta); }
.cmp-table thead img { display: block; width: 48px; height: 48px; margin-bottom: var(--s2); }
.cmp-table thead th.is-us img { border-radius: var(--radius-control); }
.cmp-table tbody th { padding: var(--s5) var(--s5) var(--s5) 0; text-align: left; vertical-align: top; font-weight: var(--wt-strong); border-bottom: 1px solid var(--hairline); background: var(--bg); }
.cmp-table td { padding: var(--s5); vertical-align: top; border-bottom: 1px solid var(--hairline); color: var(--muted); }
.cmp-table .is-us { background: var(--tile); color: var(--text); border-bottom-color: var(--border); }
.cmp-table thead th.is-us { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.cmp-table tbody tr:last-child .is-us { border-radius: 0 0 var(--radius-card) var(--radius-card); border-bottom-color: transparent; }
.cmp-table tbody tr:last-child > * { border-bottom-color: transparent; }
.cmp-state { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); color: var(--text); font-weight: var(--wt-medium); }
.cmp-state + span { display: block; }
@media (max-width: 51.99rem) {
  .cmp-table { font-size: var(--t-small); min-width: 31rem; }
  .cmp-table col.c-topic { width: 7rem; }
  .cmp-table thead th:first-child, .cmp-table tbody th { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--hairline); padding-right: var(--s3); }
  .cmp-table td { padding: var(--s4); }
}
.cmp-sources { margin: var(--s6) 0 0; color: var(--muted); font-size: var(--t-small); max-width: 75ch; }
.cmp-sources a { padding-block: 11px; font-weight: var(--wt-medium); }
.cmp-scroll-hint { display: none; margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-meta); }
@media (max-width: 51.99rem) { .cmp-scroll-hint { display: block; } }

/* the pair: equal-height cards, the UrusFamily one carries the dark plan treatment */
.cmp-pair .plan { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s8) var(--s6); }
@media (min-width: 46rem) { .cmp-pair .plan { padding: var(--s10) var(--pad-card); } }
.cmp-pair .plan img { display: block; width: 88px; height: 88px; margin: 0 0 var(--s4); transition: transform .5s var(--ease); }
.cmp-pair .plan:hover img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.cmp-pair h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin: 0; }
.cmp-pair .plan > p { margin: 0; color: var(--muted); max-width: 52ch; }
.cmp-pair .plan-now > p { color: rgba(255, 255, 255, .78); }
.cmp-pair .ticks { display: grid; gap: var(--s5); margin-top: var(--s6); }
.cmp-pair .ticks li { margin: 0; max-width: 60ch; }
.cmp-pair .ticks b { display: block; font-weight: var(--wt-strong); margin-bottom: var(--s1); }
.cmp-pair .ticks span { color: var(--muted); font-size: var(--t-small); }
.cmp-pair .plan-now .ticks span { color: rgba(255, 255, 255, .78); }

/* more comparisons: three cells that always fill their rows */
.cmp-more .cell { text-decoration: none; color: var(--text); }
.cmp-more .cell:hover { text-decoration: none; }
.cmp-more .cell span { margin-top: auto; padding-top: var(--s3); color: var(--link); font-size: var(--t-small); font-weight: var(--wt-medium); }
@media (min-width: 40rem) and (max-width: 63.99rem) { .cmp-more .cell:last-child { grid-column: 1 / -1; } }
.cmp-more.bento { align-items: stretch; }

/* /vs/skylight/: the bring-your-own-screen split (real TV board art beside the status list) and the
   RM cost table. Same tokens, same marks; the split flips image and copy on wide screens. */
.cmp-split { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 60rem) { .cmp-split { grid-template-columns: 1.1fr .9fr; gap: var(--s16); } }
.cmp-split figure { margin: 0; }
.cmp-split figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.cmp-split figcaption { margin-top: var(--s3); color: var(--muted); font-size: var(--t-meta); }
.cmp-split h2 { margin: 0 0 var(--s4); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); max-width: 20ch; }
.cmp-split .section-intro { margin-bottom: var(--s8); }
.cmp-status { list-style: none; padding: 0; margin: 0 0 var(--s8); max-width: none; display: grid; gap: 0; }
.cmp-status li { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: var(--s3); margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--hairline); }
.cmp-status li:last-child { border-bottom: 1px solid var(--hairline); }
.cmp-status .m { grid-row: 1 / span 2; margin-top: 2px; }
.cmp-status b { font-weight: var(--wt-strong); }
.cmp-status span:last-child { grid-column: 2; color: var(--muted); font-size: var(--t-small); }
.cmp-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.cmp-links a:not(.btn) { padding-block: 11px; font-size: var(--t-small); font-weight: var(--wt-medium); }
.cmp-cost-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: end; margin-bottom: var(--s10); }
.cmp-cost-head h2 { margin: 0 0 var(--s4); max-width: 20ch; }
.cmp-cost-head .section-intro { margin: 0; }
.cmp-cost-head img { display: block; width: 88px; height: 88px; }
@media (max-width: 45.99rem) { .cmp-cost-head { grid-template-columns: 1fr; gap: var(--s4); } .cmp-cost-head picture { order: -1; } }
@media (min-width: 46rem) { .cmp-cost-head img { width: 160px; height: 160px; } }
.cmp-cost { min-width: 44rem; }
.cmp-cost col.c-topic { width: 30%; }
.cmp-table.cmp-cost tbody tr:last-child > * { background: var(--tile); border-radius: 0; }
.cmp-table.cmp-cost tbody tr:last-child th { padding-left: var(--s5); border-radius: var(--radius-card) 0 0 var(--radius-card); }
.cmp-table.cmp-cost tbody tr:last-child > :last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.cmp-rm { display: block; color: var(--text); font-size: var(--t-lead); font-weight: var(--wt-strong); line-height: 1.3; font-variant-numeric: tabular-nums; }
.cmp-cost td span:not(.cmp-rm) { display: block; margin-top: var(--s1); font-size: var(--t-small); }
@media (max-width: 51.99rem) { .cmp-cost { min-width: 38rem; } .cmp-cost col.c-topic { width: 9rem; } }
.cmp-assume { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); max-width: 75ch; color: var(--muted); font-size: var(--t-small); }
.cmp-assume li { position: relative; margin: 0; padding-left: var(--s5); }
.cmp-assume li::before { content: ""; position: absolute; left: var(--s1); top: .62em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--border); }

@media (prefers-reduced-motion: reduce) { .cmp-pair .plan img { transition: none; } }