/* English /vs/manychat, Ink and Lime (Vytas, 2026-11-03). Template: frontend/comparisons/vs_manychat_ink.pug.
   Loads after ink/home.css and only adds this page's pieces. Every section uses the homepage components; new classes start with vs-. */

/* No colour backgrounds behind visuals, on any page (Vytas, 2026-11-03; INK-SYSTEM.md section 4). The ik-art frames from
   ink/home.css become the plain mist surface, and the white mocks on them get a line, as on ink/affiliate.css. */
html body.ik.ikvs:not(#_) .ik-art { background: var(--cf-mist); }
html body.ik.ikvs:not(#_) .ik-art :is(.ik-ui, .ik-dmcard, .vs-cmt, .vs-bill, .ik-aud__post) { border: 1px solid var(--cf-line); }
html body.ik.ikvs:not(#_) .vs-own .ik-own__ico { background: var(--cf-ink-3); color: var(--cf-lime); }

.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-nb { white-space: nowrap; }

/* ---------- Which one fits: the two cards ---------- */
html body.ik.ikvs:not(#_) .ik-vs__card .ik-art { height: 236px; }
html body.ik:not(#_) p.vs-if { margin: 10px 14px 2px; font-size: 13px; font-weight: 500; color: var(--cf-text-3); text-align: left; }
html body.ik:not(#_) .ik-vs__card--mc li > i { background: var(--cf-mist); color: var(--cf-text); }

/* CreatorFlow card: Ana's comment, then the one DM it gets. */
.vs-one { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(300px, 100%); }
.vs-cmt { align-self: flex-start; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; font-size: 12px; color: #111; transform: rotate(-2deg); }
html body.ik:not(#_) .vs-cmt img { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.vs-cmt b { font-weight: 600; }
.vs-cmt .ik-kw { font-size: 11px; }
.vs-one__dm { width: 100%; transform: rotate(1.5deg); }
.vs-one__dm .ik-dm__head { gap: 8px; }
html body.ik:not(#_) .vs-one__dm .ik-dm__head img { width: 26px; height: 26px; }
.vs-one__dm .ik-dm__head span { font-size: 12px; }
.vs-one__dm .ik-dm__msgs { gap: 6px; padding-top: 8px; font-size: 12px; }
html body.ik:not(#_) .vs-one__dm p.ik-dm__in { max-width: 100%; padding: 7px 10px; border-radius: 14px 14px 14px 5px; }
.vs-one__dm .ik-dm__card { padding: 6px; }
html body.ik:not(#_) .vs-one__dm .ik-dm__card img { width: 34px; height: 34px; }
.vs-one__dm .ik-dm__card em { padding: 5px 8px; font-size: 11px; }

/* ManyChat card: a drawn flow with a wait and a condition. */
html body.ik:not(#_) ol.vs-flow { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(300px, 100%); margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .vs-flow li { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--cf-line); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; color: #111; }
html body.ik:not(#_) .vs-flow li + li::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 12px; background: #a1a1aa; }
html body.ik:not(#_) .vs-flow li.is-start { border-color: #111; }
.vs-flow__ico { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-ig); }
.vs-flow .ik-kw { font-size: 11px; }
html body.ik:not(#_) .vs-flow li.is-if { border-style: dashed; border-color: #a1a1aa; }
html body.ik:not(#_) .vs-flow li.vs-flow__split { gap: 8px; padding: 0; border: 0; background: none; }
.vs-flow__split span { padding: 6px 10px; border: 1px solid var(--cf-line); border-radius: 10px; background: #fff; font-size: 11px; white-space: nowrap; }

/* ---------- Price by audience size (homepage list-plus-stage, four answers) ---------- */
html body.ik:not(#_) .ik-aud[data-on="3"] .ik-aud__scene:nth-child(4) { opacity: 1; visibility: visible; }
html body.ik:not(#_) .vs-aud .ik-aud__stage { min-height: 470px; }
html body.ik:not(#_) .vs-aud ul.ik-aud__list { gap: 4px; }
html body.ik:not(#_) .vs-aud .ik-aud__item { padding-top: 13px; padding-bottom: 13px; }
html body.ik:not(#_) .vs-aud h3.ik-aud__h { font-size: 20px; }
html body.ik:not(#_) .vs-aud .ik-aud__post { top: 9%; }
html body.ik:not(#_) .vs-aud .ik-aud__cmts { gap: 5px; }
.vs-more { padding: 4px 9px; white-space: nowrap; border-radius: 999px; background: rgba(20, 20, 20, .72); font-size: 12px; font-weight: 500; color: #fff; }

/* The bill: two bars, CreatorFlow in lime. */
html body.ik:not(#_) .vs-aud .vs-bill { padding: 18px; border-radius: 20px; background: #fff; color: #111; }
html body.ik:not(#_) p.vs-bill__h { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #52525b; text-align: left; }
.vs-bill__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 6px; margin-top: 10px; }
.vs-bill__row span { font-size: 14px; font-weight: 500; }
.vs-bill__row b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vs-bill__row i { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--cf-mist); overflow: hidden; }
.vs-bill__row u { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit; background: #a1a1aa; text-decoration: none; transform-origin: left; }
.vs-bill__row.is-cf u { background: var(--cf-lime); }
html body.ik:not(#_) p.vs-bill__note { margin-top: 12px; font-size: 12px; color: #63636b; text-align: left; }

/* The three notes on the ink band: raised ink tiles, light text. */
html body.ik:not(#_) .vs-own { margin-top: 24px; }
html body.ik:not(#_) .vs-own li { align-content: start; border: 1px solid var(--cf-ink-line); background: var(--cf-ink-2); }
html body.ik:not(#_) .vs-own b { color: var(--cf-on-ink); }
html body.ik:not(#_) .vs-own li > span:last-child { color: var(--cf-on-ink-2); }

/* ---------- Plans: two plain tables in white cards ---------- */
html body.ik:not(#_) .vs-plans { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 16px; align-items: start; }
html body.ik:not(#_) .vs-plans__card { padding: 22px 24px 20px; border-radius: 28px; background: #fff; }
html body.ik:not(#_) table.vs-tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; color: var(--cf-text); }
html body.ik:not(#_) .vs-tbl caption { padding-bottom: 10px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; text-align: left; }
html body.ik:not(#_) .vs-tbl :is(th, td) { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--cf-line); text-align: left; vertical-align: top; }
html body.ik:not(#_) .vs-tbl thead th { padding-top: 0; font-size: 13px; font-weight: 500; color: var(--cf-text-3); white-space: nowrap; }
html body.ik:not(#_) .vs-tbl tbody th { font-weight: 600; white-space: nowrap; }
html body.ik:not(#_) .vs-tbl tbody td:nth-child(2) { font-weight: 600; white-space: nowrap; }
html body.ik:not(#_) .vs-tbl tbody td:nth-child(3) { color: var(--cf-text-2); white-space: nowrap; }
html body.ik:not(#_) .vs-tbl tbody td:last-child { padding-right: 0; color: var(--cf-text-2); }
html body.ik:not(#_) .vs-tbl tbody tr:last-child :is(th, td) { border-bottom: 0; }
html body.ik:not(#_) p.vs-plans__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cf-line); font-size: 14px; line-height: 1.5; color: var(--cf-text-2); text-align: left; }

/* ---------- Features: two tables side by side on the ink band ---------- */
html body.ik:not(#_) .vs-cmps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html body.ik:not(#_) .vs-cmp { padding: 18px 22px 8px; border: 1px solid var(--cf-ink-line); border-radius: 28px; background: var(--cf-ink-2); }
html body.ik:not(#_) .vs-cmp__t caption { padding-bottom: 6px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--cf-on-ink); text-align: left; }
html body.ik:not(#_) table.vs-cmp__t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.4; }
html body.ik:not(#_) .vs-cmp__t :is(th, td) { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--cf-ink-line); color: var(--cf-on-ink-2); text-align: left; vertical-align: top; }
html body.ik:not(#_) .vs-cmp__t thead th { padding: 8px 14px 10px 0; font-size: 15px; font-weight: 600; color: var(--cf-on-ink); }
html body.ik:not(#_) .vs-cmp__t thead th:nth-child(2) { color: var(--cf-lime); }
html body.ik:not(#_) .vs-cmp__t thead th:first-child { width: 34%; }
html body.ik:not(#_) .vs-cmp__t tbody th { font-weight: 500; color: var(--cf-on-ink); }
html body.ik:not(#_) .vs-cmp__t tbody tr:last-child :is(th, td) { border-bottom: 0; }
.vs-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }
.vs-no { display: inline-block; width: 22px; text-align: center; color: #63636b; }

/* ---------- Switch steps ---------- */
.vs-kwui .ik-ui__label + .vs-kwui__post, .vs-kwui .ik-ui__label + .vs-kwui__field { margin-bottom: 10px; }
.vs-kwui__post { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--cf-field); border-radius: 10px; }
html body.ik:not(#_) .vs-kwui__post img { flex: none; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.vs-kwui__post span { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
html body.ik:not(#_) .vs-kwui__post i { padding: 2px 7px; border-radius: 999px; background: #f1f1f2; font-size: 11px; }
.vs-kwui__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--cf-field); border-radius: 10px; }
html body.ik:not(#_) .vs-kwui__field + p, html body.ik:not(#_) .vs-kwui p.ik-ui__label:last-of-type { margin-top: 0; }
.vs-sw { display: flex; flex-direction: column; gap: 8px; }
.vs-sw__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--cf-mist); }
.vs-sw__row > span:first-child { display: flex; flex-direction: column; line-height: 1.25; }
html body.ik:not(#_) .vs-sw__row.is-off .ik-switch { background: var(--cf-field); }
html body.ik:not(#_) .vs-sw__row.is-off .ik-switch::after { transform: translateX(-16px); background: #fff; }

/* ---------- FAQ: related line; how we checked sits under the heading ---------- */
html body.ik:not(#_) p.vs-also { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_):not(#_) [role="main"] p.vs-also a { color: var(--cf-text); }
html body.ik:not(#_) .vs-disc { margin-top: 20px; }
html body.ik:not(#_) .vs-disc p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--cf-text-3); text-align: left; }
html body.ik:not(#_) .vs-disc b { font-weight: 600; color: var(--cf-text-2); }
html body.ik:not(#_):not(#_) [role="main"] .vs-disc a { color: var(--cf-text-3); }

@media (prefers-reduced-motion: no-preference) {
  /* The bars fill once when the stage scrolls in, and again when another size is picked. */
  html.ik-js .vs-aud .ik-aud__stage:not(.is-in) .vs-bill__row u { transform: scaleX(0); }
  html.ik-js .vs-aud .ik-aud__stage.is-in .vs-bill__row u { transition: transform .8s var(--ease-out) .3s; }
  html.ik-js .vs-aud .ik-aud__stage.is-in .vs-bill__row + .vs-bill__row u { transition-delay: .45s; }
  /* Story card: the DM rises after the comment. */
  html.ik-js .ik-vs:not(.is-in) .vs-one__dm { opacity: 0; transform: translateY(14px) rotate(1.5deg); }
  html.ik-js .ik-vs.is-in .vs-one__dm { transition: opacity .5s var(--ease-out) .4s, transform .6s var(--ease-out) .4s; }
  html.ik-js [data-play]:not(.is-in) .vs-kwui .ik-ui__tag { opacity: 0; }
}

@media (max-width: 1099px) {
  html body.ik:not(#_) :is(.vs-plans, .vs-cmps) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  html body.ik.ikvs:not(#_) .ik-vs__card .ik-art { height: 262px; }
  html body.ik:not(#_) .vs-aud .ik-aud__stage { min-height: 0; height: 330px; }
  html body.ik:not(#_) .vs-aud .vs-bill { padding: 12px; border-radius: 16px; }
  html body.ik:not(#_) p.vs-bill__h { margin-bottom: 6px; font-size: 11px; }
  .vs-bill__row { margin-top: 6px; row-gap: 4px; }
  .vs-bill__row span { font-size: 12px; }
  .vs-bill__row b { font-size: 19px; }
  .vs-bill__row i { height: 8px; }
  html body.ik:not(#_) p.vs-bill__note { display: none; }
  .vs-more { font-size: 10px; }
  html body.ik:not(#_) .vs-aud h3.ik-aud__h { font-size: 18px; }
  html body.ik:not(#_) .vs-own { margin-top: 20px; }
  html body.ik:not(#_) .vs-own li { padding: 16px; }

  /* Plan tables: plan and prices on one line, what it includes under them. */
  html body.ik:not(#_) .vs-plans__card { padding: 18px 16px 16px; border-radius: 24px; }
  html body.ik:not(#_) .vs-tbl thead { display: none; }
  html body.ik:not(#_) .vs-tbl tbody tr { display: grid; grid-template-columns: 1fr auto auto; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--cf-line); }
  html body.ik:not(#_) .vs-tbl tbody tr:last-child { border-bottom: 0; }
  html body.ik:not(#_) .vs-tbl tbody :is(th, td) { padding: 0; border: 0; }
  html body.ik:not(#_) .vs-tbl tbody td[data-l]::before { content: attr(data-l) ": "; font-size: 12px; font-weight: 400; color: var(--cf-text-3); }
  html body.ik:not(#_) .vs-tbl tbody td:last-child { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; }

  /* Features: the label on its own line, then the two answers side by side. */
  html body.ik:not(#_) .vs-cmp { padding: 4px 16px 10px; border-radius: 24px; }
  html body.ik:not(#_) table.vs-cmp__t { font-size: 14px; }
  html body.ik:not(#_) .vs-cmp__t :is(thead, tbody) tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; border-bottom: 1px solid var(--cf-ink-line); }
  html body.ik:not(#_) .vs-cmp__t :is(th, td) { padding: 0; border: 0; }
  html body.ik:not(#_) .vs-cmp__t thead tr { padding: 12px 0; }
  html body.ik:not(#_) .vs-cmp__t thead th:first-child { display: none; }
  html body.ik:not(#_) .vs-cmp__t thead th { padding: 0; font-size: 15px; }
  html body.ik:not(#_) .vs-cmp__t tbody tr { padding: 10px 0 12px; }
  html body.ik:not(#_) .vs-cmp__t tbody th[scope="row"] { grid-column: 1 / -1; margin-bottom: 6px; font-size: 13px; color: #8a8a90; }
  html body.ik:not(#_) .vs-cmp__t caption { font-size: 17px; }
  html body.ik:not(#_) .vs-cmp__t tbody tr:last-child { border-bottom: 0; }
  html body.ik:not(#_) .vs-cmps { gap: 12px; }
  html body.ik:not(#_) .vs-cmp { padding-top: 14px; }
  .vs-yes { width: 20px; height: 20px; }

}

/* Phones: the comment chip and the count fit inside the small post. */
@media (max-width: 767px) {
  html body.ik:not(#_) .vs-aud .ik-aud__post { width: 44%; }
  html body.ik:not(#_) .vs-aud .ik-aud__cmts .ik-ucard__cmt b, .vs-more__long { display: none; }
}
@media (max-width: 767px) {
  /* The DM card's button moves under the title, so "Pancake recipe" is not cut. */
  .vs-one__dm .ik-dm__card { flex-wrap: wrap; }
  .vs-one__dm .ik-dm__card em { flex: 1 0 100%; text-align: center; }
}

/* =====================================================================================================
   Shared /vs/ template (vs_ink.pug, 2026-11-03): the other tool's picture by kind, four steps, notes on a sheet.
   ===================================================================================================== */

/* Notes on a light sheet (pages without an audience-size band). */
html body.ik:not(#_) .ik-sheet .vs-own li { border-color: var(--cf-line); background: #fff; }
html body.ik:not(#_) .ik-sheet .vs-own b { color: var(--cf-text); }
html body.ik:not(#_) .ik-sheet .vs-own li > span:last-child { color: var(--cf-text-2); }
html body.ik:not(#_) .ik-sheet .vs-own .ik-own__ico { background: var(--cf-mist); color: var(--cf-ink); }

/* Small grey line inside a DM card: who wrote or sent it. */
html body.ik:not(#_) p.vs-ai__by { align-self: center; margin: 2px 0; font-size: 11px; font-weight: 500; color: #8a8a92; }
.vs-ai .ik-dm__msgs { gap: 5px; }
html body.ik:not(#_) .vs-ai :is(p.ik-dm__in, p.ik-dm__me) { max-width: 92%; padding: 6px 10px; font-size: 12px; }

/* Bio page */
.vs-bio { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(240px, 100%); padding: 14px 14px 12px; }
html body.ik:not(#_) .vs-bio img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.vs-bio b { font-size: 13px; }
.vs-bio__note { font-size: 11px; color: #63636b; text-align: center; }
.vs-bio__l { width: 100%; padding: 6px 10px; border: 1px solid var(--cf-line); border-radius: 999px; font-size: 12px; font-weight: 500; text-align: center; }

/* Store page */
.vs-store { display: flex; flex-direction: column; gap: 8px; width: min(250px, 100%); }
.vs-store__h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
html body.ik:not(#_) .vs-store__h img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) img.vs-store__img { width: 100%; height: 84px; border-radius: 10px; object-fit: cover; }
.vs-store__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.vs-store__row span { font-weight: 600; }
.vs-store__btn { padding: 7px; border-radius: 8px; background: #111; font-size: 12px; font-weight: 600; color: #fff; text-align: center; }

/* Shop grid */
.vs-shop { width: min(280px, 100%); }
.vs-shop > b { display: block; margin-bottom: 8px; font-size: 13px; }
.vs-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vs-shop__grid span { display: flex; flex-direction: column; gap: 4px; }
html body.ik:not(#_) .vs-shop__grid img { width: 100%; height: 52px; border-radius: 8px; object-fit: cover; }
.vs-shop__grid small { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Calendar, inbox and outreach lists */
.vs-cal, .vs-list { display: flex; flex-direction: column; gap: 6px; width: min(300px, 100%); padding: 10px; }
.vs-cal__r, .vs-list__r { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--cf-mist); font-size: 12px; }
.vs-cal__d { flex: none; width: 30px; font-weight: 600; }
html body.ik:not(#_) .vs-cal__r img, html body.ik:not(#_) .vs-list__r img { flex: none; width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
html body.ik:not(#_) .vs-list__r img { border-radius: 50%; }
.vs-cal__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-list__r > span { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.vs-list__r small { overflow: hidden; font-size: 11px; color: #52525b; text-overflow: ellipsis; white-space: nowrap; }
html body.ik:not(#_) .vs-list__r > i { flex: none; padding: 2px 7px; border-radius: 999px; background: #fff; font-size: 10px; font-style: normal; color: #52525b; }

/* Board */
.vs-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(330px, 100%); }
.vs-board__col { display: flex; flex-direction: column; gap: 5px; padding: 8px 6px; border: 1px solid var(--cf-line); border-radius: 12px; background: #fff; }
.vs-board__col b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vs-board__col span { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 8px; background: var(--cf-mist); font-size: 10px; }
html body.ik:not(#_) .vs-board__col img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }

/* Code */
html body.ik:not(#_) pre.vs-code { width: min(320px, 100%); margin: 0; padding: 14px; overflow: hidden; border-radius: 14px; background: #18181b; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e4e4e7; white-space: pre-wrap; word-break: break-all; }

/* Closed notice and course list */
.vs-closed { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(260px, 100%); text-align: center; }
.vs-closed__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cf-mist); font-weight: 700; }
.vs-closed b { font-size: 14px; }
.vs-closed span:last-child { font-size: 12px; color: #63636b; }
.vs-course { display: flex; flex-direction: column; gap: 6px; width: min(280px, 100%); }
.vs-course__r { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--cf-mist); font-size: 12px; }
.vs-course__ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; }

/* Step pictures: the DM editor and the test from a second account. */
html body.ik:not(#_) p.vs-edit__msg { padding: 8px 10px; border: 1px solid var(--cf-field); border-radius: 10px; font-size: 12px; line-height: 1.4; text-align: left; }
.vs-edit__link { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--cf-field); border-radius: 10px; font-size: 12px; }
html body.ik:not(#_) .vs-edit__link i { font-size: 11px; }
.vs-test { display: flex; flex-direction: column; gap: 10px; }
.vs-test .vs-cmt { transform: none; border: 1px solid var(--cf-line); }
html body.ik:not(#_) .vs-test p.ik-dm__me { align-self: flex-end; max-width: 90%; padding: 7px 11px; font-size: 12px; }

/* Four steps in one row on desktop, two by two on tablets. */
@media (min-width: 1100px) {
  html body.ik:not(#_) .ik-steps3.vs-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body.ik:not(#_) .vs-steps--4 .ik-step .ik-art { padding: 12px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  html body.ik:not(#_) .ik-steps3.vs-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bio page fits the 236px frame; the board reads dark on its white columns. */
.vs-bio { gap: 4px; padding: 10px 12px; }
html body.ik:not(#_) .vs-bio img { width: 34px; height: 34px; }
.vs-bio__l { padding: 4px 10px; font-size: 11px; }
.vs-bio .vs-bio__l:nth-of-type(n+5) { display: none; }
.vs-board { color: #111; }

/* Group headings inside a feature card: small grey label rows. */
html body.ik:not(#_) .vs-cmp__t tr.vs-cmp__g th { padding: 18px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #7a7a80; }
html body.ik:not(#_) .vs-cmp__t tbody:first-of-type tr.vs-cmp__g th { padding-top: 12px; }
@media (max-width: 767px) {
  html body.ik:not(#_) .vs-cmp__t tr.vs-cmp__g { padding: 16px 0 4px; border-bottom: 0; }
  html body.ik:not(#_) .vs-cmp__t tr.vs-cmp__g th { grid-column: 1 / -1; padding: 0; font-size: 14px; color: var(--cf-on-ink); letter-spacing: 0; }
}

/* Tighter rows so the price, plans and feature sections stay near one screen (Vytas: short sections). */
html body.ik:not(#_) .vs-cmp__t tbody :is(th, td) { padding-top: 9px; padding-bottom: 9px; }
html body.ik:not(#_) .vs-cmp__t tr.vs-cmp__g th { padding-top: 14px; padding-bottom: 6px; }
html body.ik:not(#_) .vs-tbl tbody :is(th, td) { padding-top: 9px; padding-bottom: 9px; }
html body.ik:not(#_) .vs-aud .ik-aud__stage { min-height: 440px; }
html body.ik:not(#_) .vs-own { margin-top: 20px; }
@media (max-width: 767px) {
  .vs-board__col b { white-space: normal; font-size: 10px; line-height: 1.2; }
}
/* Shop picks: an icon tile and the product name, no photo. */
.vs-shop__grid span { flex-direction: row; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--cf-mist); }
.vs-shop__ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: #111; }
.vs-shop__grid small { white-space: normal; line-height: 1.25; }

/* ---------- Price stage: the people count and the two prices, no post photo (Vytas, 2026-11-03: "why this pancake photos") ---------- */
html body.ik:not(#_) .vs-price { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; }
html body.ik:not(#_) .vs-people { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 1px solid var(--cf-line); border-radius: 999px; background: #fff; color: #111; }
.vs-people__faces { display: flex; }
html body.ik:not(#_) .vs-people__faces img { width: 30px; height: 30px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .vs-people__faces img:first-child { margin-left: 0; }
.vs-people__txt { display: flex; flex-direction: column; line-height: 1.2; }
.vs-people__txt b { font-size: 15px; font-weight: 600; }
html body.ik:not(#_) .vs-people__txt i { font-size: 12px; font-style: normal; color: #63636b; }
html body.ik:not(#_) .vs-aud .vs-price .vs-bill { position: static; width: min(440px, 100%); padding: 24px; border-radius: 22px; transform: none; }
html body.ik:not(#_) .vs-price p.vs-bill__h { font-size: 14px; }
html body.ik:not(#_) .vs-price .vs-bill__row { margin-top: 16px; }
html body.ik:not(#_) .vs-price .vs-bill__row span { font-size: 15px; }
html body.ik:not(#_) .vs-price .vs-bill__row b { font-size: 34px; }
html body.ik:not(#_) .vs-price .vs-bill__row i { height: 12px; }
@media (max-width: 767px) {
  html body.ik:not(#_) .vs-aud .ik-aud__stage { height: auto; min-height: 0; }
  html body.ik:not(#_) .vs-aud .ik-aud__scene { position: absolute; }
  html body.ik:not(#_) .vs-price { padding: 16px; gap: 12px; }
  html body.ik:not(#_) .vs-aud .vs-price .vs-bill { padding: 16px; }
  html body.ik:not(#_) .vs-price .vs-bill__row b { font-size: 24px; }
  html body.ik:not(#_) .vs-price p.vs-bill__note { display: block; }
}
@media (max-width: 767px) {
  html body.ik:not(#_) .vs-aud .ik-aud__stage { height: 330px; }
}

/* "How we checked this page": a closed dropdown under the FAQ heading (Vytas, 2026-11-03). */
html body.ik:not(#_) details.vs-disc { max-width: 440px; margin-top: 28px; border-top: 1px solid var(--cf-field); border-bottom: 1px solid var(--cf-field); }
html body.ik:not(#_) details.vs-disc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-size: 15px; font-weight: 500; color: var(--cf-text-2); cursor: pointer; list-style: none; }
html body.ik:not(#_) details.vs-disc summary::-webkit-details-marker { display: none; }
html body.ik:not(#_) details.vs-disc summary .ik-faq__ico { flex: none; }
html body.ik:not(#_) details.vs-disc[open] .ik-faq__ico { transform: rotate(45deg); background: var(--cf-lime); }
html body.ik:not(#_) details.vs-disc p { margin: 0 0 12px; }
/* Phones: the dropdown sits after the questions, not before them. */
@media (max-width: 1023px) {
  html body.ik:not(#_) .ik-faqw:has(details.vs-disc) { display: flex; flex-direction: column; }
  html body.ik:not(#_) .ik-faqw__side:has(details.vs-disc) { display: contents; }
  html body.ik:not(#_) .ik-faqw__side:has(details.vs-disc) > :not(details) { order: 0; }
  html body.ik:not(#_) .ik-faqw:has(details.vs-disc) .vs-faqcol { order: 1; }
  html body.ik:not(#_) .ik-faqw details.vs-disc { order: 2; max-width: none; margin-top: 8px; }
}
@media (max-width: 1023px) {
  html body.ik:not(#_) .ik-faqw:has(details.vs-disc) { gap: 0; }
  html body.ik:not(#_) .ik-faqw:has(details.vs-disc) .vs-faqcol { margin-top: 24px; }
  html body.ik:not(#_) .ik-faqw details.vs-disc { align-self: stretch; width: 100%; margin-top: 20px; }
}

/* Review round 1 (2026-11-03): feature cards end on one line; code stays on its lines; calendar formats; AI avatar; what a DM tool adds. */
html body.ik:not(#_) .vs-cmps { align-items: start; } /* round 4: each card its own height, no dark block under the shorter one */
html body.ik:not(#_) pre.vs-code { white-space: pre; word-break: normal; font-size: 10px; }
.vs-cal__f { flex: none; padding: 2px 7px; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 600; }
.vs-ai__av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #111; font-size: 10px; font-weight: 700; color: var(--cf-lime); }
.vs-dmx { position: absolute; left: 50%; bottom: 14px; padding: 5px 12px; border: 1px solid var(--cf-line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; color: #111; white-space: nowrap; transform: translateX(-50%); }
html body.ik:not(#_) .ikvs--dm .ik-vs__card--mc .ik-art { padding-bottom: 44px; }
.vs-capt .vs-kwui__post { margin-bottom: 8px; }
/* Phones: plan rows stack (name, then prices, then what is included), so nothing runs off the card. */
@media (max-width: 767px) {
  html body.ik:not(#_) .vs-tbl tbody tr { display: block; }
  html body.ik:not(#_) .vs-tbl tbody th { display: block; margin-bottom: 2px; white-space: normal; }
  html body.ik:not(#_) .vs-tbl tbody td[data-l] { display: inline-block; margin-right: 14px; white-space: normal; }
  html body.ik:not(#_) .vs-tbl tbody td:last-child { display: block; }
}
/* The "–" cells on the dark feature cards were close to invisible. */
html body.ik:not(#_) .vs-cmp .vs-no { color: #9a9aa0; }
/* The "what this DM tool adds" chip sits under the DM card, in the flow, not over it. */
.vs-dmx { position: static; margin-top: 10px; transform: none; }
html body.ik:not(#_) .ikvs--dm .ik-vs__card--mc .ik-art { padding-bottom: 16px; }
/* Round 2: group labels and dashes on the dark feature cards above 4.5:1. */
html body.ik:not(#_) .vs-cmp__t tr.vs-cmp__g th { color: #a1a1a7; }
html body.ik:not(#_):not(#_) .vs-cmp .vs-no { color: #a1a1a7; }
/* What a same-job DM tool adds: a short feature card. */
.vs-feat { display: flex; flex-direction: column; gap: 8px; width: min(300px, 100%); }
.vs-feat__h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--cf-line); }
.vs-feat__h > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.vs-feat__r { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--cf-mist); font-size: 13px; font-weight: 500; }
.vs-feat__r > i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #111; }
/* Nothing in the rival picture runs past the top of its frame. */
html body.ik:not(#_) .ik-vs__card .ik-art { overflow: hidden; }
/* Two notes fill the row instead of leaving an empty third. */
@media (min-width: 768px) { html body.ik:not(#_) .vs-own:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Step pictures: channels the other tool keeps, and CreatorFlow's numbers. */
.vs-chan__row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vs-chan__row span { padding: 5px 10px; border: 1px solid var(--cf-line); border-radius: 999px; font-size: 12px; font-weight: 500; }
.vs-chan__row span.is-cf { border-color: transparent; background: var(--cf-lime); }
.vs-stats__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vs-stats__nums span { display: flex; flex-direction: column; padding: 8px; border-radius: 10px; background: var(--cf-mist); }
.vs-stats__nums b { font-size: 16px; font-weight: 600; }
html body.ik:not(#_) .vs-stats__nums i { font-size: 10px; }

/* Phones: the price scene has room for long plan names. */
@media (max-width: 767px) { html body.ik:not(#_) .vs-aud .ik-aud__stage { height: 370px; } }
/* Sources dropdown: easier to read when open; on phones one line above it, not two. */
html body.ik:not(#_) details.vs-disc p { font-size: 14px; color: var(--cf-text-2); }
html body.ik:not(#_):not(#_) [role="main"] details.vs-disc a { display: inline; padding: 2px 0; color: var(--cf-text-2); }
@media (max-width: 1023px) { html body.ik:not(#_) .ik-faqw details.vs-disc { border-top: 0; } }
/* Review round 3 (2026-11-04). */
/* A lopsided feature split becomes one full-width card. */
html body.ik:not(#_) .vs-cmps.vs-cmps--one { grid-template-columns: minmax(0, 1fr); }
/* The fit pictures get room above and below the "What it adds" list. */
@media (min-width: 768px) { html body.ik.ikvs:not(#_) .ik-vs__card .ik-art { height: 268px; } }
/* The sources dropdown spans the side column, so the heading and the box share one right edge. */
@media (min-width: 1024px) { html body.ik:not(#_) details.vs-disc { max-width: none; } }
/* Keywords written down before a move. */
.vs-kwl { display: flex; flex-direction: column; gap: 8px; width: min(300px, 100%); padding: 12px; }
.vs-kwl__r { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cf-mist); font-size: 13px; color: var(--cf-text); }
/* CreatorFlow's plans alone, when the other tool's prices could not be read. */
html body.ik:not(#_) .vs-plans.vs-plans--one { grid-template-columns: minmax(0, 1fr); }
/* Round 4: the plan sentence of the definition is hidden on phones, so the cards come sooner. */
@media (max-width: 767px) { html body.ik:not(#_) .vs-def__more { display: none; } }
/* Round 4: an empty "Includes" cell stays hidden on phone plan cards. */
@media (max-width: 767px) { html body.ik:not(#_) .vs-plans__card td.is-empty { display: none; } }
/* Round 6: a "–" in a feature table sits on the text edge, like the words in the same column. */
html body.ik:not(#_) .vs-cmp td .vs-no { width: auto; text-align: left; }
/* Round 8: a long plan name keeps a gap before the price column. */
html body.ik:not(#_) .vs-plans__card tbody th[scope="row"] { padding-right: 16px; }