/* /vs/ and /en/vs/: the honest comparison. Loaded after site.css on these two pages only.
   Tokens come from site.css; marks are shared-assets icons (check-01, minus, x-close) used as masks
   so they take the mark colour. All art is generated clay. */
.vs-hero, .vs-compare, .vs-detail { --mark-yes: var(--success); --mark-part: #9a5b00; --mark-no: var(--muted); }

/* marks: one 20px glyph, colour carries the meaning, the text beside it carries the words */
.m { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; vertical-align: -.3em; }
.m-yes { color: var(--mark-yes); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-part { color: var(--mark-part); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-no { color: var(--mark-no); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6L18 18' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* hero: big headline, the answer, then the four approaches as one clay still that settles in on scroll */
.vs-hero h1 { max-width: 18ch; }
.vs-hero-art { --q: 1; margin: var(--s10) 0 0; border-radius: var(--radius-card); overflow: hidden; background: var(--tile); }
.vs-hero-art picture { display: block; transform: scale(calc(1.08 - var(--q) * .08)); transform-origin: 50% 60%; will-change: transform; }
.vs-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 758; object-fit: cover; }


/* the four approaches: tiles that lift, the clay tilts */
.vs-cards { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .vs-cards { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.vs-cards li { margin: 0; }
.vs-card { display: flex; flex-direction: column; height: 100%; min-height: 44px; padding: var(--s6) var(--s5) var(--s8); background: var(--tile); border-radius: var(--radius-card); color: var(--text); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (min-width: 46rem) { .vs-card { padding: var(--s8) var(--pad-card) var(--s10); } }
.vs-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.vs-card:active { transform: scale(.98); }
.vs-card img { display: block; width: 88px; height: 88px; margin: 0 0 var(--s5); transition: transform .5s var(--ease); }
@media (min-width: 46rem) { .vs-card img { width: 120px; height: 120px; margin-bottom: var(--s8); } }
.vs-card:hover img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.vs-card h3 { margin: 0 0 var(--s2); }
.vs-card p { margin: 0; color: var(--muted); font-size: var(--t-small); }

/* comparison grid ------------------------------------------------------------ */
.vs-compare-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5) var(--s8); margin-bottom: var(--s10); }
.vs-compare-head h2 { margin: 0; max-width: 20ch; }
.vs-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--muted); font-size: var(--t-small); }
.vs-legend li { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); }
.vs-table { margin: 0; }
.vs-grid { border-collapse: separate; border-spacing: 0; }
.vs-grid td { color: var(--muted); }
.vs-grid .is-us { color: var(--text); }

@media (min-width: 52rem) {
  .vs-table { overflow: visible; } /* the header row stays pinned under the top bar */
  .vs-grid { table-layout: fixed; }
  .vs-grid thead th { position: sticky; top: 56px; z-index: 1; background: var(--bg); vertical-align: bottom; text-align: center; padding: var(--s5) var(--s3) var(--s4); border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--t-small); font-weight: var(--wt-strong); }
  .vs-grid thead th:first-child { text-align: left; padding-left: 0; color: var(--muted); font-size: var(--t-meta); }
  .vs-grid thead img { display: block; width: 64px; height: 64px; margin: 0 auto var(--s2); }
  .vs-grid thead th.is-us img { width: 48px; height: 48px; margin: 8px auto calc(var(--s2) + 8px); border-radius: var(--radius-control); }
  .vs-grid tbody th { width: 22%; padding: var(--s5) var(--s4) var(--s5) 0; vertical-align: middle; }
  .vs-grid td { text-align: center; vertical-align: top; padding: var(--s5) var(--s4); }
  .vs-grid td .m { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto var(--s2); }
  .vs-grid .is-us { background: var(--tile); }
  .vs-grid thead th.is-us { border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom-color: var(--hairline); }
  .vs-grid tbody tr:last-child .is-us { border-radius: 0 0 var(--radius-card) var(--radius-card); border-bottom-color: transparent; }
}

/* phones and small tablets: each need becomes its own tile listing the four answers, no sideways scroll */
@media (max-width: 51.99rem) {
  .vs-table { overflow: visible; }
  .vs-grid, .vs-grid tbody, .vs-grid tr, .vs-grid th, .vs-grid td { display: block; }
  .vs-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs-grid tr { background: var(--tile); border-radius: var(--radius-card); padding: var(--s5) var(--s5) var(--s2); margin-bottom: var(--s3); }
  .vs-grid tbody th { width: auto; padding: 0 0 var(--s3); border: 0; font-size: var(--t-body); font-weight: var(--wt-strong); color: var(--text); }
  .vs-grid td { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 0; border-top: 1px solid var(--border); font-size: var(--t-small); color: var(--text); }
  .vs-grid td::before { content: attr(data-label); grid-column: 2; grid-row: 1; font-size: var(--t-meta); color: var(--muted); }
  .vs-grid td .m { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
  .vs-grid td:not(:has(.m)) { grid-template-columns: 1fr; padding-left: calc(1.25rem + var(--s3)); }
  .vs-grid td:not(:has(.m))::before { grid-column: 1; }
  .vs-grid td.is-us::before { color: var(--text); font-weight: var(--wt-strong); }
}

/* statement ----------------------------------------------------------------- */
.vs-statement { max-width: var(--w-page); padding-block: var(--s8); }
.vs-statement > p:last-child { max-width: 40ch; }
.vs-statement .vs-big { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem); line-height: 1.05; letter-spacing: -.022em; font-weight: var(--wt-strong); color: var(--text); max-width: 18ch; margin-bottom: var(--s6); text-wrap: balance; }

/* which one fits: five tiles, the "both" answer runs the full row */
.vs-fit { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .vs-fit { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } .vs-fit-wide { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .vs-fit { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } .vs-fit .vs-fit-wide { display: grid; grid-template-columns: 1fr 3fr; align-items: baseline; gap: var(--s8); } }
.vs-fit li { margin: 0; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6) var(--s5); background: var(--tile); border-radius: var(--radius-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (min-width: 46rem) { .vs-fit li { padding: var(--s8) var(--pad-card); } }
.vs-fit li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.vs-fit b { font-size: var(--t-h3); line-height: 1.24; letter-spacing: -.01em; font-weight: var(--wt-strong); }
.vs-fit span { color: var(--muted); max-width: 52ch; }

/* the three detail sections: clay tile beside the prose; the clay settles as it scrolls in */
.vs-split { display: grid; gap: var(--s6); }
@media (min-width: 52rem) { .vs-split { grid-template-columns: minmax(200px, 300px) 1fr; gap: var(--s16); align-items: start; } }
.vs-art { --q: 1; width: 120px; aspect-ratio: 1; display: grid; place-items: center; background: var(--tile); border-radius: var(--radius-card); }
@media (min-width: 52rem) { .vs-art { width: 100%; position: sticky; top: calc(56px + var(--s8)); } }
.vs-art picture { width: 72%; }
.vs-art img { display: block; width: 100%; height: auto; transform: translateY(calc((1 - var(--q)) * 28px)) rotate(calc((1 - var(--q)) * -8deg)); will-change: transform; }
.vs-detail { padding-block: calc(var(--sec) * .4); }

/* not for you: three facts in a row, hairline above each */
.vs-notfor { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s6) var(--s8); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .vs-notfor { grid-template-columns: repeat(3, 1fr); } }
.vs-notfor li { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--border); color: var(--muted); }
.vs-notfor b { display: block; color: var(--text); font-weight: var(--wt-strong); font-size: var(--t-lead); line-height: 1.35; letter-spacing: -.01em; margin-bottom: var(--s2); }

/* what is different: three clay tiles */
.vs-diff { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .vs-diff { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.vs-diff li { margin: 0; padding: var(--s8) var(--pad-card); background: var(--tile); border-radius: var(--radius-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.vs-diff li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.vs-diff img { display: block; width: 72px; height: 72px; margin-bottom: var(--s6); transition: transform .5s var(--ease); }
.vs-diff li:hover img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.vs-diff p { margin: 0; font-size: var(--t-lead); line-height: 1.45; color: var(--muted); }
@media (max-width: 51.99rem) {
  .vs-diff li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); align-items: start; padding: var(--s5); }
  .vs-diff img { width: 56px; height: 56px; margin: 0; }
  .vs-diff p { font-size: var(--t-body); }
}
.vs-local { margin: var(--s10) 0 0; color: var(--muted); }
.vs-local a { font-weight: var(--wt-medium); }

/* closing download tile (home's dl-feature), heading set as a display line */
.vs-cta { margin-top: var(--s12); }
.vs-cta-title { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.018em; font-weight: var(--wt-strong); color: var(--on-primary); margin: 0 0 var(--s4); text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .vs-card, .vs-card img, .vs-fit li, .vs-diff li, .vs-diff img { transition: none; }
}

/* links to the per-app comparisons (/vs/<app>/): equal plan tiles, three across on wide screens */
.cmp-card { display: flex; flex-direction: column; gap: var(--s2); color: var(--text); text-decoration: none; }
.cmp-card:hover { text-decoration: none; }
.cmp-card img { display: block; width: 88px; height: 88px; margin-bottom: var(--s4); }
.cmp-card h3, .cmp-card p { margin: 0; }
.cmp-card p { color: var(--muted); max-width: 52ch; }
@media (min-width: 52rem) { .plans.cmp-trio { grid-template-columns: repeat(3, 1fr); } }
.cmp-card span { margin-top: auto; padding-top: var(--s3); color: var(--link); font-size: var(--t-small); font-weight: var(--wt-medium); }