/* A head-to-head comparison post (27 Oct 2026, Fernando: generateppt.com's order, in the article template): the three
   cards under the hero (ft_vs_cards), then in the article the side-by-side pairs (ft_vs_pair) and the plans table with
   our row in lavender (ft_vs_rows). Everything sits in .vs; inside the article the rules reset what .ft-content gives
   headings, paragraphs, lists, links and tables. */
body.ft .vs { --vs-r: 20px; }

/* ---- ticks and crosses -------------------------------------------------------------------- */
body.ft .vs .vs-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.ft .vs .vs-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 0; max-width: none; font-size: .9375rem; line-height: 1.5; color: var(--text-soft); }
body.ft .vs .vs-list li::before { content: none; }
body.ft .vs .vs-mk { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
body.ft .vs .vs-mk .ic { width: 12px; height: 12px; }
body.ft .vs .vs-mk.is-yes { background: var(--violet); color: #fff; }
body.ft .vs .vs-mk.is-no { background: rgb(31 26 46 / .07); color: var(--muted); }
body.ft .vs .vs-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: .9375rem; font-weight: 500; color: var(--violet-ink); text-decoration: none; }
body.ft .vs .vs-link:hover { color: var(--ink); }

/* ---- the three cards ---------------------------------------------------------------------- */
body.ft .vs .vs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: clamp(40px, 5vw, 64px); }
body.ft .vs .vs-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--vs-r); background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .vs .vs-kicker { font-size: .8125rem; line-height: 1.4; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
body.ft .vs .vs-card-h { font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.2; font-weight: 400; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
body.ft .vs .vs-card-p { font-size: .9375rem; line-height: 1.55; color: var(--text-soft); text-wrap: pretty; }
body.ft .vs .vs-card .vs-list { margin-top: 6px; }
body.ft .vs .vs-card.is-us { background: var(--lavender, var(--violet-soft)); box-shadow: inset 0 0 0 1px rgb(127 86 217 / .14); }
body.ft .vs .vs-card.is-us .vs-kicker { color: var(--violet-ink); }
body.ft .vs .vs-card.is-dark { background: radial-gradient(80% 70% at 100% 0%, rgb(127 86 217 / .38), transparent 70%), var(--night); box-shadow: none; }
body.ft .vs .vs-card.is-dark .vs-kicker { color: #c9b6f5; }
body.ft .vs .vs-card.is-dark .vs-card-h { color: #fff; }
body.ft .vs .vs-card.is-dark .vs-card-p { color: var(--night-muted); }
body.ft .vs .vs-card-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 10px; }
body.ft .vs .vs-card.is-dark .vs-link { margin-top: 0; color: #fff; }
body.ft .vs .vs-card.is-dark .vs-link:hover { color: var(--night-muted); }
/* the table under the cards: a little less air than after a hero */
body.ft .lp .vs + .ft-altsec.tpl-vs { padding-top: clamp(48px, 6vw, 80px); }

/* ---- in the article: the side-by-side pair ------------------------------------------------- */
body.ft .lp .ft-content .vs { margin: 8px 0 32px; }
body.ft .vs .vs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.ft .vs .vs-side { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; }
body.ft .vs .vs-side.is-them { background: rgb(31 26 46 / .035); box-shadow: inset 0 0 0 1px var(--line); }
body.ft .vs .vs-side.is-us { background: var(--card); box-shadow: var(--shadow-tile), inset 0 0 0 1px rgb(127 86 217 / .22); }
body.ft .vs .vs-side-who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; line-height: 1.4; font-weight: 500; color: var(--muted); }
body.ft .vs .vs-side.is-us .vs-side-who { color: var(--violet-ink); }
body.ft .vs .vs-logo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--violet); color: #fff; }
body.ft .vs .vs-logo .ic { width: 11px; height: 11px; }
body.ft .vs .vs-side-h { margin: 0 0 4px; font-size: 1.1875rem; line-height: 1.3; font-weight: 400; letter-spacing: -.016em; color: var(--ink); }
body.ft .vs .vs-side.is-them .vs-list li { color: var(--muted); }

/* ---- in the article: the plans table (our row in lavender) --------------------------------- */
body.ft .vs .vs-table { overflow-x: auto; padding: 6px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .vs .vs-table table { display: table; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .875rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
body.ft .vs .vs-table :is(th, td) { padding: 13px 12px; text-align: start; vertical-align: middle; background: none; border-bottom: 1px solid var(--line); color: var(--text-soft); font-weight: 400; }
body.ft .vs .vs-table tbody tr:last-child > * { border-bottom: 0; }
body.ft .vs .vs-table thead :is(th, td) { padding-top: 16px; vertical-align: bottom; font-size: .8125rem; font-weight: 500; color: var(--muted); }
body.ft .vs .vs-table tbody th { font-weight: 500; color: var(--ink); }
body.ft .vs .vs-table tr.is-us-row > * { background: var(--lavender, var(--violet-soft)); color: var(--ink); font-weight: 500; border-bottom: 0; }
body.ft .vs .vs-table tr.is-us-row > :first-child { border-radius: 12px 0 0 12px; }
body.ft .vs .vs-table tr.is-us-row > :last-child { border-radius: 0 12px 12px 0; }
body.ft .vs .vs-caption { margin: 14px 4px 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }

/* ---- smaller screens ---------------------------------------------------------------------- */
@media (max-width: 1000px) {
  body.ft .vs .vs-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.ft .vs .vs-card.is-dark { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body.ft .vs .vs-cards, body.ft .vs .vs-pair { grid-template-columns: minmax(0, 1fr); }
  body.ft .vs .vs-card-ctas .btn { flex: 1 1 100%; }
  /* the plans table becomes one card per plan: its name, then each value with its column's name */
  body.ft .vs .vs-table { overflow: visible; padding: 0; background: none; box-shadow: none; }
  body.ft .vs .vs-table :is(table, tbody, tr, th, td) { display: block; width: auto; }
  body.ft .vs .vs-table thead { display: none; }
  body.ft .vs .vs-table tbody { display: grid; gap: 10px; }
  body.ft .vs .vs-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-tile); }
  body.ft .vs .vs-table tbody th { grid-column: 1 / -1; padding: 10px 10px 4px; border: 0; font-size: .9375rem; }
  body.ft .vs .vs-table td { padding: 8px 10px; border: 0; }
  body.ft .vs .vs-table td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 500; color: var(--muted); }
  body.ft .vs .vs-table tr.is-us-row { background: var(--lavender, var(--violet-soft)); }
  body.ft .vs .vs-table tr.is-us-row > * { border-radius: 0; background: none; }
}