/* English /alternatives hub and /<tool>-alternative pages, Ink and Lime (Vytas, 2026-11-03). Template: frontend/alternatives/alternatives_ink.pug.
   Loads after ink/home.css and ink/vs.css (shared pieces, no colour frames). New classes start with alt-. */

/* ---------- The table: one white card ---------- */
html body.ik:not(#_) .alt-tbl { padding: 8px 24px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ik:not(#_) .alt-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
html body.ik:not(#_) .alt-tbl :is(th, td) { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--cf-line); color: var(--cf-text-2); text-align: left; vertical-align: top; }
html body.ik:not(#_) .alt-tbl thead th { padding: 12px 14px 10px 0; font-size: 13px; font-weight: 500; color: var(--cf-text-3); white-space: nowrap; }
html body.ik:not(#_) .alt-tbl tbody tr:last-child :is(th, td) { border-bottom: 0; }
html body.ik:not(#_) .alt-tbl tbody th b { display: block; font-weight: 600; color: var(--cf-text); white-space: nowrap; }
html body.ik:not(#_) .alt-tbl td b { display: block; font-weight: 600; color: var(--cf-text); white-space: nowrap; }
html body.ik:not(#_) .alt-tbl td small { display: block; margin-top: 2px; font-size: 13px; color: var(--cf-text-3); }
html body.ik:not(#_) .alt-tbl tr.is-cf :is(th, td) { background: #fafff0; }
html body.ik:not(#_) .alt-tbl tr.is-cf th { box-shadow: none; }
.alt-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--cf-lime); font-size: 11px; font-weight: 600; color: var(--cf-ink); }
.alt-yes { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--cf-text); }
.alt-yes svg { padding: 3px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }
.alt-ns { color: var(--cf-text-3); white-space: nowrap; }
html body.ik:not(#_) td.alt-tbl__go { padding-right: 0; text-align: right; vertical-align: middle; white-space: nowrap; }
html body.ik:not(#_) a.alt-btn { height: 40px; padding: 0 16px; font-size: 14px; }
html body.ik:not(#_):not(#_) [role="main"] a.alt-link { font-size: 14px; font-weight: 600; color: var(--cf-text); text-decoration: none; }
@media (hover: hover) { html body.ik:not(#_):not(#_) [role="main"] a.alt-link:hover { text-decoration: underline; } }
html body.ik:not(#_) p.alt-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--cf-text-3); text-align: left; }
html body.ik:not(#_) .ik-band p.alt-note { color: var(--cf-on-ink-2); }

/* ---------- Tool by tool: one white row card per alternative (name | what it does | price) ---------- */
html body.ik:not(#_) ul.alt-tools { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .alt-tool { display: grid; grid-template-columns: 200px minmax(0, 1fr) 250px; gap: 28px; align-items: start; padding: 22px 26px; border: 1px solid var(--cf-line); border-radius: 24px; background: #fff; color: var(--cf-text); }
html body.ik:not(#_) .alt-tool.is-cf { background: #fafff0; }
html body.ik:not(#_) .alt-tool__name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
html body.ik:not(#_) .alt-tool__name h3.ik-h3 { margin: 0; color: var(--cf-text); }
html body.ik:not(#_) .alt-tool p { margin: 0; text-align: left; }
html body.ik:not(#_) p.alt-tool__what { font-size: 16px; line-height: 1.5; color: var(--cf-text); }
html body.ik:not(#_) p.alt-tool__fits { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
html body.ik:not(#_) .alt-tool__fits b { font-weight: 600; color: var(--cf-text); }
html body.ik:not(#_) .alt-tool__price { display: flex; flex-direction: column; align-items: flex-start; font-size: 15px; line-height: 1.4; }
html body.ik:not(#_) .alt-tool__price > b { font-weight: 600; color: var(--cf-text); }
html body.ik:not(#_) .alt-tool__price small { margin-top: 2px; font-size: 13px; color: var(--cf-text-3); }
html body.ik:not(#_) .alt-tool__free { margin-top: 10px; color: var(--cf-text-2); }
html body.ik:not(#_) .alt-tool__free i { display: block; font-size: 13px; font-style: normal; color: var(--cf-text-3); }
html body.ik:not(#_):not(#_) [role="main"] .alt-tool a.alt-link { margin-top: 12px; }
@media (max-width: 1099px) {
  html body.ik:not(#_) .alt-tool { grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 24px; }
  html body.ik:not(#_) .alt-tool__name { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
  html body.ik:not(#_) .alt-tool__name .alt-tag { margin-top: 0; }
}
@media (max-width: 767px) {
  html body.ik:not(#_) .alt-tool { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; border-radius: 20px; }
  /* Price and free plan side by side, so seven cards stay short on a phone. */
  html body.ik:not(#_) .alt-tool__price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  html body.ik:not(#_) .alt-tool__price > b { grid-column: 1; grid-row: 1; }
  html body.ik:not(#_) .alt-tool__price small { grid-column: 1; grid-row: 2; }
  html body.ik:not(#_) .alt-tool__free { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  html body.ik:not(#_) .alt-tool__price a.alt-link { grid-column: 1 / -1; }
}

/* ---------- Fit by need and the facts: two white list cards ---------- */
html body.ik:not(#_) :is(.alt-fit, .alt-facts) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .alt-fit__card { padding: 24px 24px 22px; border: 1px solid var(--cf-line); border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ik:not(#_) .alt-fit__card h3.ik-h3 { margin-bottom: 8px; color: var(--cf-text); }
html body.ik:not(#_) .alt-fit__card ul { margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .alt-fit__card li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
.alt-fit__card li > i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--cf-mist); font-size: 12px; font-style: normal; color: var(--cf-text); }
.alt-fit__card.is-cf li > i:not(.is-no) { background: var(--cf-lime); color: var(--cf-ink); }
html body.ik:not(#_) p.alt-safe { max-width: 900px; margin-top: 20px; font-size: 15px; line-height: 1.55; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_) .ik-band p.alt-safe { color: var(--cf-on-ink-2); }
html body.ik:not(#_) p.alt-safe b { color: var(--cf-text); }
html body.ik:not(#_) .ik-band p.alt-safe b { color: var(--cf-on-ink); }

/* ---------- Tools by need (ManyChat alternatives) ---------- */
html body.ik:not(#_) ul.alt-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .alt-needs li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--cf-ink-line); border-radius: 20px; background: var(--cf-ink-2); font-size: 15px; line-height: 1.45; color: var(--cf-on-ink-2); }
html body.ik:not(#_) .alt-needs b { font-weight: 600; color: var(--cf-on-ink); }
html body.ik:not(#_):not(#_) [role="main"] .alt-needs a { color: var(--cf-on-ink-2); }
html body.ik:not(#_) .alt-needs strong { font-weight: 600; color: var(--cf-lime); }

/* ---------- Hub directory: eight groups on the ink band ---------- */
/* Desktop: four newspaper columns, so long and short groups pack together. Phones: the groups swipe (.ik-scroll). */
html body.ik:not(#_) .alt-dir { columns: 4; column-gap: 12px; }
html body.ik:not(#_) .alt-dir__g { display: inline-block; width: 100%; margin-bottom: 12px; break-inside: avoid; }
html body.ik:not(#_) .alt-dir__g { padding: 18px 18px 14px; border: 1px solid var(--cf-ink-line); border-radius: 22px; background: var(--cf-ink-2); }
html body.ik:not(#_) .alt-dir__g h3.ik-h3 { margin-bottom: 6px; font-size: 17px; }
html body.ik:not(#_) .alt-dir__g ul { margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .alt-dir__g li { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid var(--cf-ink-line); font-size: 14px; line-height: 1.35; }
html body.ik:not(#_) .alt-dir__g li:first-child { border-top: 0; }
html body.ik:not(#_):not(#_) [role="main"] .alt-dir__g a { font-weight: 500; color: var(--cf-on-ink); text-decoration: none; }
@media (hover: hover) { html body.ik:not(#_):not(#_) [role="main"] .alt-dir__g a:hover { color: var(--cf-lime); } }
html body.ik:not(#_) .alt-dir__g li b { font-weight: 600; color: var(--cf-lime); }
html body.ik:not(#_) .alt-dir__g li span { font-size: 12px; color: #8a8a90; }

/* ---------- Pricing models: four tiles ---------- */
html body.ik:not(#_) ul.alt-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .alt-models li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--cf-line); border-radius: 24px; background: #fff; }
html body.ik:not(#_) .alt-models b { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--cf-text); }
html body.ik:not(#_) .alt-models small { font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ik:not(#_) .alt-models span { font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
html body.ik:not(#_) .ik-band .alt-models li { border-color: var(--cf-ink-line); background: var(--cf-ink-2); }
html body.ik:not(#_) .ik-band .alt-models b { color: var(--cf-on-ink); }
html body.ik:not(#_) .ik-band .alt-models span { color: var(--cf-on-ink-2); }

/* ---------- Steps on the ink band: white cards keep dark text ---------- */
html body.ik:not(#_) .ik-band .ik-step h3.ik-h3 { color: var(--cf-text); }
html body.ik:not(#_) .ik-band .ik-step p.ik-p { color: var(--cf-text-2); }

@media (max-width: 1099px) {
  html body.ik:not(#_) .alt-dir { columns: 2; }
  html body.ik:not(#_) ul.alt-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* Table rows become small cards: tool and price on top, then the rest. */
  html body.ik:not(#_) .alt-tbl { padding: 4px 16px; border-radius: 24px; }
  html body.ik:not(#_) .alt-tbl thead { display: none; }
  html body.ik:not(#_) .alt-tbl tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cf-line); }
  html body.ik:not(#_) .alt-tbl tbody tr:last-child { border-bottom: 0; }
  html body.ik:not(#_) .alt-tbl tbody :is(th, td) { padding: 0; border: 0; background: none; font-size: 14px; }
  html body.ik:not(#_) .alt-tbl tr.is-cf { margin: 0 -16px; padding: 14px 16px; background: #fafff0; }
  html body.ik:not(#_) .alt-tbl td[data-l]:not(:nth-child(2))::before { content: attr(data-l) ": "; color: var(--cf-text-3); }
  html body.ik:not(#_) .alt-tbl tbody td:nth-child(2) { text-align: right; }
  html body.ik:not(#_) .alt-tbl tbody td:nth-child(n+3) { grid-column: 1 / -1; margin-top: 4px; }
  html body.ik:not(#_) td.alt-tbl__go { text-align: left; }
  html body.ik:not(#_) :is(.alt-fit, .alt-facts) { display: flex; }
  html body.ik:not(#_) .alt-facts { flex-direction: column; gap: 12px; }
  html body.ik:not(#_) .alt-fit__card { padding: 20px; }
  html body.ik:not(#_) ul.alt-needs { grid-template-columns: minmax(0, 1fr); }
  html body.ik:not(#_) .alt-dir__g { margin-bottom: 0; }
}
/* Review round 1: rounded corners hold the lime row on phones; small grey text on dark cards reads better. */
html body.ik:not(#_) .alt-tbl { overflow: hidden; }
html body.ik:not(#_) .alt-dir__g li span, html body.ik:not(#_) .alt-needs li { color: #b4b4ba; }
/* Review round 3: the facts heading and paragraph sit on the same two columns as the cards below them. */
html body.ik:not(#_) .ik-head.alt-facts-head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
/* Review round 3: price notes wrap evenly, so one word never sits alone on a line. */
html body.ik:not(#_) :is(.alt-tbl, #tools) small { text-wrap: pretty; }