/* 07 Не очередной ИИ-нарезчик (RU, from the English v12). The comparison first: the poster headline on one line
   with a one-line lead, then three cards with the same five rows, then the button. Phone first: a swipe row,
   Nightcut's card first, the rows aligned across the cards (the track is a grid, each card a subgrid: one level only,
   Safari sizes nested subgrids wrong), the next card peeking. Laptop: a row-name rail and three columns, Nightcut last and raised, the button under
   its $99; headline, cards and button fit one 1440x820 screen. Then the stage clip as a second beat (talk card).
   Russian: the words were cut to the English line count (every card answer and quiet line one line in the tightest
   241 px text box), so the card rules are the English ones; what changed is below, marked RU. */

/* ---------- Head: headline + one line ---------- */
.vs-hd { display: grid; }
/* RU: never hyphenated; «ИИ-нарезчик.» is one unbreakable word (.nw in the part), so a phone breaks after «очередной». */
.vs .poster { font-size: clamp(48px, 5.9vw, 88px); max-width: none; hyphens: manual; }
.vs-hd .lead { max-width: 30em; margin-top: var(--s2); }

/* ---------- The three cards ---------- */
.vs-cmp { margin-top: var(--s5); }
/* The swipe track is a grid: every card spans the same six rows (head + five) as a subgrid, so "How long" sits at the
   same height on every card while you swipe. */
.vs-swipe .swipe-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--swipe-w); grid-template-rows: repeat(6, auto); column-gap: var(--swipe-gap); }
.vs-swipe .swipe-track > .vs-card { width: auto; }
@media (min-width: 720px) { .vs-swipe .swipe-track { grid-auto-columns: var(--swipe-w-md); } }
.vs-card { grid-row: 1 / span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 0 20px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--sh-2); border: 1px solid var(--line); list-style: none; }
.vs-head { padding: var(--s3) 0 var(--s2); display: grid; align-content: center; gap: 2px; }
.vs-name { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
.vs-who { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--muted); }
.vs-logo { display: block; }
.vs-logo svg { display: block; height: 29px; width: auto; color: #fff; }

/* A row: the row name with its icon (on a phone every card stands alone, so each says what the row is), then the
   answer in bold and one quiet line. On a laptop the names move to the rail and the icon sits beside the answer. */
.vs-cell { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ico l" "v v"; column-gap: var(--s1); align-items: center; align-content: start; padding: 10px 0 var(--s2); border-top: 1px solid var(--line); }
.vs-l { grid-area: l; margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--muted); }
.vs-cell > .ico { grid-area: ico; width: 20px; height: 20px; color: var(--muted); stroke-width: 2; }
.vs-v { grid-area: v; margin: 4px 0 0; display: grid; gap: 1px; }
.vs-v b { font-size: 19px; line-height: 1.28; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.vs-v span { font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--muted); }

/* The price: the year's total, big; twelve ticks, one per month; one line on what it is. */
.vs-pay { display: block; padding: 10px 0 var(--s4); }
.vs-pay .vs-l { margin-bottom: 6px; }
.vs-price { margin: 0; }
.vs-price b { display: block; font-size: 44px; line-height: 1; letter-spacing: -0.04em; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.vs-ticks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 10px; margin: var(--s2) 0 var(--s1); max-width: 280px; }
.vs-ticks i { border-radius: var(--r-pill); background: var(--muted); transition: background .25s ease; }
.vs-sub { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--muted); transition: opacity .45s var(--ease); }
/* While the year runs (js): the months not paid yet are empty slots, and the line under the total waits for the end,
   so "$3,500+" is never read as the year's price. */
.vs-pay.is-run .vs-ticks i:not(.on) { background: var(--line); }
.vs-pay.is-run:not(.is-done) .vs-sub { opacity: 0; }

/* Nightcut's card: the winner. Deep green, the one shadow, the yellow $99, one tick. */
.vs-us { background: var(--green-band); border-color: var(--green-band); box-shadow: var(--sh-3); color: var(--night-ink); }
.vs-us .vs-who { color: var(--night-2); }
.vs-us .vs-cell { border-top-color: rgba(255, 255, 255, .12); }
.vs-us .vs-l { color: var(--night-muted); }
.vs-us .vs-cell > .ico { color: var(--yellow); }
.vs-us .vs-v b { color: #fff; }
.vs-us .vs-v span { color: var(--night-2); }
.vs-us .vs-price b { font-size: 60px; line-height: .9; color: var(--yellow); }
.vs-us .vs-price b span { font-size: .4em; letter-spacing: -0.01em; font-weight: 700; color: var(--night-ink); margin-left: 6px; }
.vs-us .vs-ticks i { background: rgba(255, 255, 255, .12); }
.vs-us .vs-ticks i:first-child { background: var(--yellow); }
.vs-us .vs-sub { color: var(--night-2); }

/* ---------- Under the cards: where the prices come from, and the button ---------- */
.vs-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-top: var(--s2); }
.vs-foot .btn { order: 2; }
.vs-foot .vs-fine { order: 3; }
@media (max-width: 719px) {
  .vs-foot { align-items: stretch; margin-top: 0; }
  .vs-foot .link { align-self: flex-start; }
  .vs-foot .btn { width: 100%; margin-top: var(--s1); }
}

/* ---------- The stage clip: a second beat, after the comparison ---------- */
.vs-talk { margin-top: var(--s7); max-width: none; }
.vs-talk .tc-lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; color: var(--ink-2); }
.vs-talk .tc-lead b { color: var(--ink); font-weight: 700; }
.vs-talk .tc-q { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.15; }
.vs-talk .tc-after { margin-top: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 19px; }
/* From 720px the clip is the shared side card (base.css .talk-card.side), the same full size as 13's. */
@media (min-width: 1000px) { .vs-talk { margin-top: var(--s8); } }

/* ---------- Laptop: a real table made of cards ----------
   From 1000px the three cards stand side by side (Nightcut last and raised, the button under its $99). From 1280px the
   row names stand in a column on the left, like a table's: they are the editor card's own row names, hung out to
   its left, so they line up with the rows by construction, and the icons grow into tiles beside the answers. */
@media (min-width: 1000px) {
  .vs-hd .lead { max-width: none; }
  /* 40, not 48: the privacy row's second line (v12 fix round) costs ~20px, and the button must keep clear of the
     bottom edge at 1440x820. */
  .vs-cmp { margin-top: 40px; }
  .vs .vs-swipe .swipe-track { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: row; column-gap: var(--s4); }
  .vs-ed { grid-column: 1; }
  .vs-cl { grid-column: 2; }
  .vs-us { grid-column: 3; margin: -14px 0; padding-top: 14px; padding-bottom: 14px; }
  .vs-card { padding: 0 22px; }
  .vs-head { padding: 14px 0 10px; }
  .vs-pay { padding: 12px 0 18px; }
  .vs-ticks { margin: 10px 0 8px; }
  .vs-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); align-items: center; margin-top: calc(14px + var(--s3)); }
  /* RU: «$99 один раз, когда выйдет. Бронь бесплатная.» is 369 px, wider than one column: it may run back over the
     column to its left (the link there is ~200 px, the line ends at the button's column), so it stays one line. */
  .vs-foot .link { grid-column: 1; grid-row: 1; justify-self: start; }
  .vs-foot .vs-fine { grid-column: 1 / span 2; grid-row: 1; justify-self: end; text-align: right; }
  .vs-foot .btn { grid-column: 3; grid-row: 1; justify-self: start; }
}
@media (min-width: 1280px) {
  .vs-cmp { padding-left: 160px; }
  .vs-foot { grid-template-columns: 136px repeat(3, minmax(0, 1fr)); }
  .vs-foot .link { grid-column: 1 / span 2; }
  .vs-foot .vs-fine { grid-column: 2 / span 2; }
  .vs-foot .btn { grid-column: 4; }
  .vs-cell { position: relative; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "ico v"; column-gap: 12px; align-items: center; padding: 10px 0; }
  .vs-cell > .ico { width: 34px; height: 34px; padding: 7px; border-radius: var(--r-thumb); background: var(--soft); }
  .vs-us .vs-cell > .ico { background: rgba(232, 180, 0, .16); }
  .vs-v { margin: 0; }
  .vs-v b { font-size: 18px; }
  /* Row names: hidden in the cards (still read aloud), shown once, left of the editor card, with the row's line. */
  .vs-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .vs-ed .vs-l { width: 136px; height: auto; overflow: visible; clip: auto; white-space: normal; top: 50%; transform: translateY(-50%); right: calc(100% + 46px); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }
  .vs-ed .vs-pay .vs-l { top: 14px; transform: none; margin: 0; }
  .vs-ed .vs-cell::before { content: ""; position: absolute; top: -1px; right: calc(100% + 46px); width: 136px; border-top: 1px solid var(--line); }
}

/* ---------- The explainer: three receipts ---------- */
.vs-rc { display: grid; gap: var(--s2); }
.vs-rc-b { padding: 14px 18px 12px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--sh-1); }
.vs-rc-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.vs-rc-h b { font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }
.vs-rc-l { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0; padding: 6px 0; border-top: 1px dashed var(--line-2); font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--ink-2); }
.vs-rc-l span:last-child:not(:first-child) { flex: none; white-space: nowrap; font-weight: 600; color: var(--ink); text-align: right; }
.vs-rc-x span:last-child { color: var(--red) !important; }
.vs-rc-us { background: var(--green-band); box-shadow: none; }
.vs-rc-us .vs-rc-h { color: #fff; }
.vs-rc-us .vs-rc-h b { color: var(--yellow); }
.vs-rc-us .vs-rc-l { color: var(--night-2); border-top-color: rgba(255, 255, 255, .16); }
.vs-rc-us .vs-rc-l span:last-child:not(:first-child) { color: #fff; }
/* It opens line by line (js). */
.vs-rc.is-anim .vs-rc-l, .vs-rc.is-anim .vs-rc-h { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .4s var(--ease); }
.vs-rc.is-anim .is-in { opacity: 1; transform: none; }

/* ---------- Phone ---------- */
@media (max-width: 719px) {
  /* RU: 40, not 44, at the bottom: «ИИ-нарезчик.» can't break, and at 44px it fills a 320 phone's line to 1 px. From
     355 px up the size is the English one. */
  .vs .poster { font-size: clamp(40px, 12.4vw, 56px); }
  .vs-cmp { margin-top: 18px; }
  .vs-us .vs-price b { font-size: 56px; }
  /* Compact rows, so at the natural stop (headline under the header) the headline, the lead and the whole first card
     share the screen at 390×844, and a card alone fits 375×667 (five two-line answers, the privacy row included). */
  .vs-head { padding: 10px 0 7px; }
  .vs-cell { padding: 7px 0 9px; }
  .vs-v { margin-top: 2px; }
  .vs-v b { line-height: 1.22; }
  .vs-v span { line-height: 1.3; }
  .vs-pay { padding: 7px 0 12px; }
  .vs-pay .vs-l { margin-bottom: 4px; }
  .vs-ticks { margin: 10px 0 6px; }
  .vs-talk .tc-q { font-size: clamp(25px, 7vw, 28px); }
  .vs-talk .tc-after { font-size: 18px; }
  .vs-rc { gap: 10px; }
  .ex-fig.vs-rc { padding: 12px; }
  .vs-rc-b { padding: 10px 12px 6px; }
  .vs-rc-h, .vs-rc-l { gap: 10px; }
  .vs-rc-h { font-size: 17px; margin-bottom: 4px; }
  .vs-rc-h b { font-size: 18px; }
  .vs-rc-l { padding: 5px 0; line-height: 1.3; }
}
/* Short phones (375×667): a whole card fits under the header, and the receipts fit the sheet without scrolling. */
@media (max-width: 719px) and (max-height: 760px) {
  .vs-name { font-size: 22px; }
  .vs-logo svg { height: 26px; }
  .vs-v b { font-size: 18px; }
  .vs-price b { font-size: 40px; }
  .vs-us .vs-price b { font-size: 52px; }
  .vs-rc { gap: 8px; }
  .ex-fig.vs-rc { padding: 10px; }
  .vs-rc-b { padding: 7px 10px 3px; }
  .vs-rc-h { margin-bottom: 2px; }
  .vs-rc-l { padding: 4px 0; }
  .vs-rc + .ex-src { margin-top: 10px; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-ticks i, .vs-sub { transition: none; }
}