/* The free tools' article and the bridge to the app, in the guides' look (kb.css, scoped by kb-chrome.css).
   Loaded after tools.css and tools-skin.css. Everything here is under body.ft. */

/* ---- the try band under the tool ------------------------------------------------------ */
body.ft .ftk-band { max-width: 1200px; margin: clamp(36px, 5vw, 64px) auto 0; padding: 0 20px; }
body.ft .ftk-band .kb-try.is-band .kb-try-in { border-radius: 28px; }
@media (min-width: 960px) { body.ft .ftk-band .kb-try.is-band .kb-try-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* ---- the article ---------------------------------------------------------------------- */
body.ft .ft-content { font-size: 1.0625rem; line-height: 1.72; }
body.ft .ft-content > h2 { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height: 1.12; margin: 64px 0 16px; text-wrap: balance; }
body.ft .ft-content > h2:first-of-type { margin-top: 8px; }
body.ft .ft-content > p { max-width: 68ch; text-wrap: pretty; }

/* lists: violet dots, the bold lead in ink */
body.ft .ft-content > ul { list-style: none; padding: 0; display: grid; gap: 12px; margin: 4px 0 22px; }
body.ft .ft-content > ul > li { position: relative; margin: 0; padding-inline-start: 1.4em; max-width: 68ch; }
body.ft .ft-content > ul > li::before { content: ""; position: absolute; left: .25em; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-violet); }

/* steps: numbered cards */
body.ft .ft-content .t-steps { display: grid; gap: 10px; margin: 6px 0 24px; }
body.ft .ft-content .t-steps > li { margin: 0; padding: 16px 18px 16px 62px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .05), 0 8px 12px -6px rgb(24 21 31 / .05); }
body.ft .ft-content .t-steps > li::before { left: 18px; top: 16px; width: 28px; height: 28px; font-size: 13px; font-weight: 500; line-height: 28px; text-align: center; background: var(--lp-marker); color: var(--lp-ink); }
/* a long URL in a step must wrap, not widen every card past a phone screen */
body.ft .ft-content .t-steps > li { min-width: 0; overflow-wrap: anywhere; }

/* tables: a card, a quiet header, numbers lined up, ratios drawn */
body.ft .ft-content .ftk-table { margin: 10px 0 26px; overflow-x: auto; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .05), 0 8px 12px -6px rgb(24 21 31 / .05); }
body.ft .ft-content .ftk-table table { display: table; width: 100%; margin: 0; font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
body.ft .ft-content .ftk-table th, body.ft .ft-content .ftk-table td { padding: 14px 16px; border-bottom: 1px solid var(--lp-line); }
body.ft .ft-content .ftk-table thead th { font-size: .8125rem; font-weight: 500; color: var(--lp-muted); background: var(--lp-page-2); }
body.ft .ft-content .ftk-table tbody tr:last-child > * { border-bottom: 0; }
body.ft .ft-content .ftk-table tbody td:first-child { color: var(--lp-ink); font-weight: 500; }
/* labels on one line where there is room; on a phone they wrap, so the values stay in view without scrolling sideways */
@media (min-width: 700px) { body.ft .ft-content .ftk-table thead th, body.ft .ft-content .ftk-table tbody td:first-child { white-space: nowrap; } }
/* a wide table of four or more columns lets its value headers wrap, so a long row label never pushes the last column out of view (31 Oct 2026) */
@media (min-width: 700px) { body.ft .ft-content .ftk-table.is-wide:has(thead th:nth-child(4)) thead th:not(:first-child) { white-space: normal; } }
@media (max-width: 699px) { body.ft .ft-content .ftk-table th, body.ft .ft-content .ftk-table td { padding: 12px; -webkit-hyphens: auto; hyphens: auto; } }
body.ft .ft-content .ftk-table tbody tr:hover > * { background: rgb(241 236 252 / .45); }
body.ft .ft-content .kb-ratio { display: inline-block; height: 16px; aspect-ratio: var(--w) / var(--h); margin-inline-end: 10px; vertical-align: -3px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--lp-ink); background: var(--lp-page-2); }

/* notes: an icon and a lavender card */
body.ft .ft-content .t-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; font-size: .9375rem; line-height: 1.55; max-width: 68ch; overflow-wrap: anywhere; }
body.ft .ft-content .t-note .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lp-violet); }
/* the words are one flex item (page.php wraps them), so <b>, <a> and <kbd> stay inside the sentence */
body.ft .ft-content .t-note > span { flex: 1 1 auto; min-width: 0; }
/* sources under the article ('sources' in a tool's content file, page.php) */
body.ft .ft-content .ftk-sources { margin: 32px 0 20px; }

/* the table of contents: a quiet card with numbered links */
body.ft .ft-toc { padding: 18px 20px 14px; border-radius: 18px; }
body.ft .ft-toc ol { list-style: none; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
body.ft .ft-toc li { counter-increment: toc; margin: 0; }
body.ft .ft-toc a { display: flex; gap: 10px; padding: 5px 0; color: var(--lp-muted); text-decoration: none; }
body.ft .ft-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 1.6em; font-variant-numeric: tabular-nums; color: var(--lp-violet); }
body.ft .ft-toc a:hover { color: var(--lp-ink); text-decoration: none; }

/* ---- same idea, three writers ---------------------------------------------------------- */
body.ft .ftk-wr { margin: 56px 0 8px; padding: clamp(22px, 3.4vw, 34px); border-radius: 24px; background: #f1edf9; box-shadow: inset 0 0 0 1px rgb(127 86 217 / .07); }
body.ft .ftk-wr-head h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); line-height: 1.15; font-weight: 300; letter-spacing: -.03em; color: var(--lp-ink); }
body.ft .ftk-wr-head p { margin: 10px 0 0; max-width: 56ch; font-size: 1rem; line-height: 1.6; color: var(--lp-muted); }
body.ft .ftk-wr-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
body.ft .ftk-wr-list li { margin: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(24 21 31 / .05), 0 6px 14px -10px rgb(24 21 31 / .25); }
body.ft .ftk-wr-list .kb-wr-art { width: 52px; border-radius: 10px; }
body.ft .ftk-wr-n { margin: 0 0 2px; font-size: .8125rem; line-height: 1.3; color: var(--lp-muted); }
body.ft .ftk-wr-n b { font-weight: 500; color: var(--lp-ink); }
body.ft .ftk-wr-list .kb-wline { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.38; color: var(--lp-ink); }
body.ft .ftk-wr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 20px 0 0; max-width: none; }
body.ft .ftk-wr-cta a.btn { text-decoration: none; }
body.ft .ftk-wr-cta span { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--lp-muted); }
body.ft .ftk-wr-cta span .ic { width: 15px; height: 15px; color: var(--lp-violet); }

/* ---- the side card's fan ---------------------------------------------------------------- */
body.ft .ftk-side-fan { padding: 6px 0 14px; }
body.ft .ftk-side-fan .kb-fan { --cw: 92px; }
body.ft .ftk-side-fan .kb-fan[data-ratio="9:16"] { --cw: 72px; }
/* the side card's slides always fanned out, past the card's edges (Fernando, 27 Oct 2026: was on hover only) */
body.ft .ft-side-cta .kb-fan-card[data-pos="1"] { --x: -.72; --r: -10deg; }
body.ft .ft-side-cta .kb-fan-card[data-pos="2"] { --x: .72; --r: 10deg; }

/* ---- FAQ: cards ------------------------------------------------------------------------- */
body.ft .ft-faq { margin-top: 64px; }
body.ft .ft-faq details { margin: 0 0 8px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(24 21 31 / .06); transition: box-shadow .2s; }
body.ft .ft-faq details[open] { box-shadow: 0 0 0 1px rgb(24 21 31 / .06), 0 10px 24px -16px rgb(24 21 31 / .3); }
body.ft .ft-faq summary { padding: 16px 18px; font-weight: 500; }
body.ft .ft-faq details > div { padding: 0 18px 16px; }

@media (max-width: 719px) {
  body.ft .ft-content .t-steps > li { padding-inline-start: 54px; }
  body.ft .ft-content .t-steps > li::before { left: 14px; }
  body.ft .ftk-wr-list li { grid-template-columns: 44px minmax(0, 1fr); }
  body.ft .ftk-wr-list .kb-wr-art { width: 44px; }
}

/* ---- after a download: the card under the tool ------------------------------------------ */
body.ft .ftk-done { position: relative; display: grid; gap: 18px; align-items: center; max-width: 1160px; margin: 20px auto 0; padding: 22px 56px 22px 22px; border-radius: 24px; background: #f1edf9; box-shadow: inset 0 0 0 1px rgb(127 86 217 / .1); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
body.ft .ftk-done[hidden] { display: none; }
body.ft .ftk-done.is-in { opacity: 1; transform: none; }
@media (min-width: 720px) { body.ft .ftk-done { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } }
@media (max-width: 1200px) { body.ft .ftk-done { margin-inline: 20px; } }
body.ft .ftk-done-fan .kb-fan { --cw: 84px; }
body.ft .ftk-done-fan .kb-fan[data-ratio="9:16"] { --cw: 64px; }
body.ft .ftk-done-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: -.015em; color: var(--lp-ink); }
body.ft .ftk-done-h .ic { width: 22px; height: 22px; color: #2f9e62; flex: none; }
body.ft .ftk-done-p { margin: 8px 0 0; max-width: 60ch; font-size: .9375rem; line-height: 1.6; color: var(--lp-muted); }
body.ft .ftk-done-a { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
body.ft .ftk-done-a .btn { text-decoration: none; }
body.ft .ftk-done-a .btn[hidden] { display: none; }
body.ft .ftk-done-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--lp-muted); cursor: pointer; }
body.ft .ftk-done-x:hover { background: rgb(31 26 46 / .06); color: var(--lp-ink); }
body.ft .ftk-done-x .ic { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { body.ft .ftk-done { transition: none; } }

/* ---- the PDF tools: the slim card after a download (from the second one on) ------------------- */
body.ft .ftk-done.is-slim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 60px 14px 20px; border-radius: 18px; }
body.ft .ftk-done.is-slim[hidden] { display: none; }
body.ft .ftk-done.is-slim .ftk-done-h { font-size: 1.0625rem; }
body.ft .ftk-done.is-slim .ftk-done-a { margin: 0; }
body.ft .ftk-done.is-slim .ftk-done-x { top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) { body.ft .ftk-done.is-slim { padding: 14px 16px; } body.ft .ftk-done.is-slim .ftk-done-h { padding-inline-end: 36px; } body.ft .ftk-done.is-slim .ftk-done-x { top: 10px; transform: none; } body.ft .ftk-done.is-slim .ftk-done-a, body.ft .ftk-done.is-slim .ftk-done-a .btn { width: 100%; } }

/* ---- the PDF tools: the window after a browser's first download ------------------------------
   Example carousels made with aiCarousels on the left (one at a time, tools.js turns them), the
   pitch on the right; on phones the examples sit on top. A native <dialog>: Esc and the
   backdrop close it, focus stays inside. */
body.ft .ftk-modal { width: min(920px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--lp-ink); box-shadow: 0 30px 80px -20px rgb(24 16 48 / .45), 0 0 0 1px rgb(24 16 48 / .06); overflow: auto; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
body.ft .ftk-modal.is-in { opacity: 1; transform: none; }
body.ft .ftk-modal::backdrop { background: rgb(18 14 30 / .52); backdrop-filter: blur(3px); }
body.ft .ftk-modal-box { position: relative; display: grid; }
@media (min-width: 760px) { body.ft .ftk-modal-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
body.ft .ftk-modal-show { position: relative; display: grid; place-items: center; min-height: 250px; padding: 28px 16px 44px; background: radial-gradient(120% 90% at 30% 20%, #ece4fb 0%, #f4f0fb 45%, #faf8fd 100%); overflow: hidden; }
@media (min-width: 760px) { body.ft .ftk-modal-show { min-height: 460px; padding: 40px 24px 56px; } }
body.ft .ftk-modal-fan { grid-area: 1 / 1; width: 100%; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
body.ft .ftk-modal-fan.is-on { opacity: 1; transform: none; }
body.ft .ftk-modal-fan .kb-fan { --cw: 112px; }
@media (min-width: 760px) { body.ft .ftk-modal-fan .kb-fan { --cw: 164px; } }
body.ft .ftk-modal-cap { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: .8125rem; color: var(--lp-muted); }
body.ft .ftk-modal-copy { padding: 26px 22px 24px; }
@media (min-width: 760px) { body.ft .ftk-modal-copy { align-self: center; padding: 44px 44px 36px 36px; } }
body.ft .ftk-modal-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .9375rem; font-weight: 500; color: #23794a; }
body.ft .ftk-modal-ok .ic { width: 20px; height: 20px; flex: none; }
body.ft .ftk-modal-h { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; color: var(--lp-ink); text-wrap: balance; }
body.ft .ftk-modal-p { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--lp-muted); }
body.ft .ftk-modal-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
body.ft .ftk-modal-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.45; color: var(--lp-ink); }
body.ft .ftk-modal-list .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #7f56d9; }
body.ft .ftk-modal-a { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
body.ft .ftk-modal-a .btn { text-decoration: none; }
body.ft .ftk-modal-a .btn[hidden] { display: none; }
@media (max-width: 559px) { body.ft .ftk-modal-a .btn { width: 100%; justify-content: center; } }
body.ft .ftk-modal-note { margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--lp-muted); }
body.ft .ftk-modal-note[hidden] { display: none; }
body.ft .ftk-modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .8); color: var(--lp-muted); cursor: pointer; }
body.ft .ftk-modal-x:hover { background: rgb(31 26 46 / .06); color: var(--lp-ink); }
body.ft .ftk-modal-x .ic { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { body.ft .ftk-modal, body.ft .ftk-modal-fan { transition: none; } }

/* ==== 15 Oct, polish pass: the page around the tool on the site's own grid ===================
   Every section lines up with the homepage and the hub (.wrap: 1240px, 20px/40px gutters), the
   article sits in the guides' layout (contents on the left, try card on the right), and the FAQ,
   sources and related tools are the guides' own sections. */
body.ft { --ft-wrap: 1240px; --ft-gutter: 20px; }
@media (min-width: 768px) { body.ft { --ft-gutter: 40px; } }
body.ft .ft-tool, body.ft .ftk-band { max-width: none; width: min(var(--ft-wrap), 100% - 2 * var(--ft-gutter)); padding-inline: 0; }
body.ft .ftk-done { max-width: none; width: min(var(--ft-wrap), 100% - 2 * var(--ft-gutter)); margin-inline: auto; }
@media (max-width: 1200px) { body.ft .ftk-done { margin-inline: auto; } }

/* the title: plain, like every heading on the homepage (no highlighter behind a word) */
body.ft .ft-h1 b { background: none; padding: 0; font-weight: inherit; }

/* the article in the guides' grid; its words keep the tool pages' flow (the .lp resets undone) */
body.ft .ft-layout { padding-bottom: 0; }
body.ft .lp .ft-content { max-width: none; min-width: 0; font-size: 1.0625rem; line-height: 1.72; color: var(--lp-muted); }
body.ft .lp .ft-content p { margin: 0 0 16px; }
body.ft .lp .ft-content > p { max-width: none; }
body.ft .lp .ft-content h3 { margin: 28px 0 8px; }
body.ft .lp .ft-content ol:not(.t-steps) { list-style: decimal; padding-inline-start: 22px; margin: 0 0 18px; }
body.ft .lp .ft-content ol:not(.t-steps) > li { margin: 6px 0; padding-inline-start: 4px; }
body.ft .lp .ft-content li > ul, body.ft .lp .ft-content li > ol { margin: 8px 0 0; }
body.ft .lp .ft-content a:not(.btn) { color: var(--lp-ink); text-decoration-line: underline; text-decoration-color: var(--lp-marker); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.ft .lp .ft-content a:not(.btn):hover { text-decoration-color: var(--lp-violet); }
body.ft .lp .ft-content > h2:first-child, body.ft .lp .ft-content > h2:first-of-type { margin-top: 0; }
body.ft .lp .ft-content > :last-child { margin-bottom: 0; }
body.ft .lp .ft-content .t-note { margin: 4px 0 22px; }
body.ft .lp .ft-content img { display: block; max-width: 100%; height: auto; }
/* the writers' block: one more card in the article's flow */
body.ft .lp .ft-content .ftk-wr { margin: 56px 0 0; }
body.ft .lp .ft-content .ftk-wr + h2 { margin-top: 64px; }

/* tables: the guides' spec table (a white card, a quiet header row, labels in ink), never a grey column */
body.ft .ft-content .ftk-table { margin: 8px 0 24px; border-radius: var(--r-card, 16px); background: #fff; box-shadow: var(--shadow-tile, 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .05), 0 8px 12px -6px rgb(24 21 31 / .05)); }
body.ft .ft-content .ftk-table th, body.ft .ft-content .ftk-table td { padding: 14px 18px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--lp-line); }
body.ft .ft-content .ftk-table thead th { font-size: .8125rem; font-weight: 500; color: var(--lp-muted); background: var(--lp-page-2); }
body.ft .ft-content .ftk-table tbody th { width: 42%; font-size: .9375rem; font-weight: 500; color: var(--lp-ink); background: none; }
body.ft .ft-content .ftk-table td { color: var(--lp-muted); }
body.ft .ft-content .ftk-table tbody td:first-child { color: var(--lp-ink); font-weight: 500; }
body.ft .ft-content .ftk-table tbody tr:hover > * { background: none; }
body.ft .ft-content .ftk-table tbody tr:last-child > * { border-bottom: 0; }

/* the try card on the right: the guides' rail card, with the tool's carousel in its fan */
body.ft .ft-kb .kb-rail-btn { gap: 8px; }
body.ft .ft-kb .kb-rail-btn .ic { width: 16px; height: 16px; }

/* related tools under the FAQ: the guides' cards; the tool icons sit in the card's tile */
body.ft .ft-next { padding-top: clamp(56px, 7vw, 96px); }
body.ft .ft-next .kb-card-art.is-icon .ic { width: 22px; height: 22px; }
/* the FAQ's own bottom space is the gap to the related tools (no second section gap) */
body.ft .ft-kb > #faq { padding-bottom: clamp(56px, 7vw, 96px); }
body.ft .ft-kb > #faq + .ft-next, body.ft .ft-kb > .kb-sources-sec + .ft-next { padding-top: 0; }

/* 15 Oct, tables on a phone: a two-column table keeps its card with tighter cells; a table of three columns
   or more stacks into one card per row, each value under its column's name (the guides' compare table) */
body.ft .ft-content .ftk-table.is-wide tbody th { width: auto; }
@media (max-width: 699px) {
  body.ft .ft-content .ftk-table th, body.ft .ft-content .ftk-table td { padding: 12px 14px; }
  body.ft .ft-content .ftk-table.is-wide { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  body.ft .ft-content .ftk-table.is-wide :is(table, tbody, tr, th, td) { display: block; width: auto; }
  body.ft .ft-content .ftk-table.is-wide thead { display: none; }
  body.ft .ft-content .ftk-table.is-wide tr { margin-bottom: 10px; padding: 12px 14px; border-radius: var(--r-card, 16px); background: #fff; box-shadow: var(--shadow-tile, 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .05), 0 8px 12px -6px rgb(24 21 31 / .05)); }
  body.ft .ft-content .ftk-table.is-wide tr:last-child { margin-bottom: 0; }
  body.ft .ft-content .ftk-table.is-wide :is(th, td) { padding: 4px 0; border: 0; -webkit-hyphens: manual; hyphens: manual; }
  body.ft .ft-content .ftk-table.is-wide tbody tr > :first-child { padding-bottom: 8px; font-size: 1rem; font-weight: 500; color: var(--lp-ink); }
  body.ft .ft-content .ftk-table.is-wide [data-label] { display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); gap: 10px; align-items: baseline; }
  body.ft .ft-content .ftk-table.is-wide [data-label]::before { content: attr(data-label); font-size: .8125rem; font-weight: 400; color: var(--lp-muted); }
}
body.ft .ft-content .ftk-nw { white-space: nowrap; }

/* ---- the article in two columns (27 Oct 2026, Fernando: not three, and the article full width) -----
   Left: "On this page" with the "Make my carousel" card under it. Right: the article, using the rest of
   the row, then its FAQ (the site's own FAQ rows) and sources. Then the CTA band and every free tool.
   One gap between those blocks (--ft-gap), so the page breathes the same way all the way down.
   On a phone the card stays hidden, as the rail did (the try band under the tool does its job). */
body.ft { --ft-gap: clamp(64px, 7vw, 104px); }
body.ft .ft-2col .ft-aside { display: grid; gap: 32px; align-content: start; min-width: 0; }
body.ft .ft-2col .ft-main { min-width: 0; }
body.ft .ft-2col .ft-rail { display: none; }
body.ft .lp .kb-layout.ft-2col { padding-bottom: var(--ft-gap); }
@media (min-width: 1080px) {
  body.ft .lp .kb-layout.ft-2col, body.ft .lp .kb-layout.ft-2col.no-toc { grid-template-columns: 248px minmax(0, 1fr); justify-content: stretch; gap: 64px; }
  body.ft .ft-2col .ft-rail { display: block; }
  /* "On this page" as a plain list from here up (the guides only flatten it at 1240px, where it has its own column) */
  body.ft .lp .ft-2col .kb-toc { position: static; }
  body.ft .lp .ft-2col .kb-toc details { background: none; padding: 0; }
  body.ft .lp .ft-2col .kb-toc summary { pointer-events: none; font-size: .8125rem; color: var(--muted); }
  body.ft .lp .ft-2col .kb-toc summary .ic { display: none; }
}
/* the column follows the reader. When it's taller than the screen (a laptop), site.js sets --ft-aside-top
   so its bottom sticks instead: "On this page" scrolls away and the card stays in view */
@media (min-width: 1080px) {
  body.ft .ft-2col .ft-aside { position: sticky; top: var(--ft-aside-top, calc(var(--header-h) + 28px)); }
}
/* the article's words and lists use the full column, like its cards and tables */
body.ft .lp .ft-main .ft-content > ul > li { max-width: none; }

/* the FAQ, part of the article: a heading like the article's, then the site's own FAQ rows (chrome.css .fq-list) */
body.ft .ft-qa { margin-top: 64px; scroll-margin-top: calc(var(--header-h) + 24px); }
body.ft .ft-qa-h { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height: 1.12; font-weight: 300; letter-spacing: -.03em; color: var(--lp-ink); margin: 0 0 16px; text-wrap: balance; }
body.ft .lp .ft-qa .faq-a > p { max-width: 72ch; }
body.ft .ft-sources { margin-top: 56px; }

/* the CTA band: the one gap above it is the article's, the one below it is the list's */
body.ft .lp #start { padding-top: 0; padding-bottom: var(--ft-gap); }

/* every free tool, as on the hub (hub.css), then our other free sites as its last group */
body.ft .hub-list.is-foot { padding-top: 0; padding-bottom: var(--ft-gap); }
body.ft .hub-list.is-foot .hub-head { gap: 16px; }
body.ft .hub-list.is-foot .hub-head h2 a { color: inherit; text-decoration: none; }
/* no underline on the title (Fernando, 27 Oct 2026) */
body.ft .hub-list.is-foot .hub-head h2 a:hover { text-decoration: none; }
body.ft .hub-card[aria-current="page"] { background: var(--lavender, #f1ecfd); box-shadow: inset 0 0 0 1px rgb(127 86 217 / .25); }

/* same idea, three writers: one rhythm inside the card (heading, line, list and button 24px apart) */
body.ft .lp .ft-content .ftk-wr { padding: clamp(24px, 3.4vw, 36px); }
body.ft .ftk-wr-head p { margin-top: 12px; }
body.ft .ftk-wr-list { margin-top: 24px; }
body.ft .ftk-wr-cta { margin-top: 24px; }

/* 27 Oct 2026 (Fernando: "a lot of visual resources to convey the text"): the article's visual blocks, drawn
   with the guides' components where the body says <!--kb:name--> (page.php ftk_kb), reset from the article's
   own text styles */
body.ft .lp .ft-content .ft-blocks { margin: 24px 0 32px; }
body.ft .lp .ft-content .ft-blocks :is(h3, p, figure) { margin: 0; }
body.ft .lp .ft-content .ft-blocks :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
body.ft .lp .ft-content .ft-blocks :is(ol, ul) > li { margin: 0; padding: 0; max-width: none; }
body.ft .lp .ft-content .ft-blocks :is(ol, ul) > li::before { content: none; }
/* …but a card that is a list item keeps its own padding (31 Oct 2026: the writers' cards lost theirs) */
body.ft .lp .ft-content .ft-blocks .kb-wr-grid > li.kb-wr { padding: 14px; }
/* how it works: the steps side by side, each a lavender panel with the app's panel on top and the words under it */
body.ft .lp .ft-blocks.is-how .kb-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body.ft .lp .ft-blocks.is-how .kb-step { display: flex; flex-direction: column; gap: 20px; align-items: stretch; padding: 14px 14px 22px; border-radius: 20px; background: var(--lavender); box-shadow: inset 0 0 0 1px rgb(127 86 217 / .07); }
body.ft .lp .ft-blocks.is-how .kb-step-shot { order: -1; flex: 1 1 auto; }
body.ft .lp .ft-blocks.is-how .kb-step-shot .kb-ui { max-width: none; margin: 0; }
body.ft .lp .ft-blocks.is-how .kb-step-copy { padding: 0 8px; gap: 6px 12px; }
body.ft .lp .ft-blocks.is-how .kb-step-bar { display: none; }
body.ft .lp .ft-blocks.is-how .kb-step-n { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--card); color: var(--ink); font-size: .8125rem; box-shadow: var(--shadow-chip); }
body.ft .lp .ft-blocks.is-how .kb-step h3 { font-size: 1.0625rem; line-height: 1.6; }
body.ft .lp .ft-blocks.is-how .kb-step .prose { font-size: .9375rem; line-height: 1.55; }
@media (min-width: 760px) {
  body.ft .lp .ft-blocks.is-how .kb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; }
  /* side by side, the app panels share a row and the words start on one line (subgrid) */
  body.ft .lp .ft-blocks.is-how .kb-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 20px; margin-bottom: 16px; }
  body.ft .lp .ft-blocks.is-how .kb-step-shot { display: grid; }
}
/* cards with an icon (what the editor does, the three kinds of first line) */
body.ft .lp .ft-blocks .uses { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.ft .lp .ft-blocks .use { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .lp .ft-blocks .use-ic { grid-row: auto; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; background: var(--lavender); color: var(--violet); box-shadow: none; }
body.ft .lp .ft-blocks .use-ic .ic { width: 18px; height: 18px; }
body.ft .lp .ft-blocks .use h3 { font-size: 1rem; }
body.ft .lp .ft-blocks .use p { max-width: none; font-size: .9375rem; }
body.ft .lp .ft-blocks.is-hooks .use h3 { font-size: .8125rem; font-weight: 500; color: var(--muted); }
body.ft .lp .ft-blocks.is-hooks .use p { font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
@media (min-width: 640px) { body.ft .lp .ft-blocks .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { body.ft .lp .ft-blocks .uses:is(.is-3, .is-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the alternatives block after the article (page.php ftk_alternatives): its own heading, the table of this
   tool next to the others, then one card per tool. Full width, like the tool list under it */
body.ft .lp .ft-altsec { padding-bottom: var(--ft-gap); scroll-margin-top: calc(var(--header-h) + 24px); }
body.ft .lp .ft-altsec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 32px; }
body.ft .lp .ft-altsec-head .eyebrow { margin: 0; }
body.ft .lp .ft-altsec-head h2 { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.08; font-weight: 300; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
body.ft .lp .ft-altsec-head p:not(.eyebrow) { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
/* the table: a white card; our column a lavender band from the header to the last row; rows split by hairlines */
body.ft .lp .ft-vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 0; }
body.ft .lp .ft-vs-scroll { position: relative; overflow-x: auto; padding: 8px 12px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .lp .ft-vs table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .9375rem; line-height: 1.45; }
body.ft .lp .ft-vs col.ft-vs-l { width: 22%; }
body.ft .lp .ft-vs :is(th, td) { padding: 16px 18px; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--line); color: var(--text-soft); }
body.ft .lp .ft-vs tr.is-last > * { border-bottom: 0; }
body.ft .lp .ft-vs thead :is(th, td) { padding-top: 20px; padding-bottom: 18px; vertical-align: bottom; }
body.ft .lp .ft-vs thead th { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
body.ft .lp .ft-vs tbody th { font-size: .875rem; font-weight: 500; color: var(--ink); }
body.ft .lp .ft-vs .is-us { background: var(--lavender); border-bottom-color: rgb(127 86 217 / .12); color: var(--ink); }
body.ft .lp .ft-vs thead .is-us { border-radius: 14px 14px 0 0; }
body.ft .lp .ft-vs tr.is-last .is-us { border-radius: 0 0 14px 14px; }
body.ft .lp .ft-vs-badge { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px; background: var(--violet); color: #fff; font-size: .6875rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
body.ft .lp .ft-vs-badge .ic { width: 11px; height: 11px; }
body.ft .lp .ft-vs-name { display: block; }
body.ft .lp .ft-vs :is(.ft-vs-yes, .ft-vs-no) { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
/* theirs: a plain grey check or cross; ours: a filled violet check that stands out */
body.ft .lp .ft-vs :is(.ft-vs-yes, .ft-vs-no) { background: rgb(31 26 46 / .06); color: var(--muted); }
body.ft .lp .ft-vs td.is-us .ft-vs-yes { width: 28px; height: 28px; background: var(--violet); color: #fff; box-shadow: 0 4px 12px -4px var(--violet); }
body.ft .lp .ft-vs :is(.ft-vs-yes, .ft-vs-no) > .ic { width: 13px; height: 13px; }
body.ft .lp .ft-vs td.is-us .ft-vs-yes > .ic { width: 15px; height: 15px; }
body.ft .lp .ft-vs figcaption { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 759px) {
  body.ft .lp .ft-vs-scroll { padding: 6px 8px; }
  body.ft .lp .ft-vs table { min-width: 620px; font-size: .875rem; }
  body.ft .lp .ft-vs :is(th, td) { padding: 12px; }
  body.ft .lp .ft-vs tbody th { position: sticky; left: -8px; z-index: 1; background: var(--card); }
}
/* the cards: "alternative to …", what this tool does better (tick), what the other does better (dash), the link */
body.ft .lp .ft-alts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
body.ft .lp .ft-alts > .ft-alt { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px 24px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .lp .ft-alt-k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; line-height: 1.3; color: var(--muted); }
body.ft .lp .ft-alt-k .ic { width: 15px; height: 15px; color: var(--violet); }
body.ft .lp .ft-alt h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; font-weight: 500; letter-spacing: -.014em; color: var(--ink); text-wrap: balance; }
body.ft .lp .ft-alt-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.ft .lp .ft-alt-list > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; margin: 0; font-size: .9375rem; line-height: 1.5; }
body.ft .lp .ft-alt-list .ic { width: 16px; height: 16px; margin-top: 3px; }
body.ft .lp .ft-alt-list .is-plus .ic { color: var(--success); }
body.ft .lp .ft-alt-list .is-plus span { color: var(--text-soft); }
body.ft .lp .ft-alt-list .is-minus .ic, body.ft .lp .ft-alt-list .is-minus span { color: var(--muted); }
body.ft .lp .ft-alt-go { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
body.ft .lp .ft-alt-go a { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 500; color: var(--ink); text-decoration: none; }
body.ft .lp .ft-alt-go a:hover { color: var(--violet); }
body.ft .lp .ft-alt-go .ic { width: 15px; height: 15px; transition: transform .2s; }
body.ft .lp .ft-alt-go a:hover .ic { transform: translateX(3px); }
@media (min-width: 900px) { body.ft .lp .ft-alts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* one rival only: a narrower table, so two columns don’t stretch across the page */
body.ft .lp .ft-vs.is-c2 { max-width: 820px; }
body.ft .lp .ft-vs.is-c2 table { min-width: 560px; }
/* fewer than three cards: two side by side, or one at a readable width */
@media (min-width: 640px) { body.ft .lp .ft-alts.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { body.ft .lp .ft-alts.is-1 { grid-template-columns: minmax(0, 560px); } }

/* 27 Oct 2026, the article's tables, more designed: a lavender header row in ink, the label column tinted,
   values a shade darker, and Yes/No drawn as a tick or a cross (ftk_body) */
body.ft .lp .ft-content .ftk-table { overflow: hidden; }
body.ft .lp .ft-content .ftk-table thead th { padding-top: 12px; padding-bottom: 12px; font-size: .8125rem; font-weight: 500; letter-spacing: .005em; color: var(--ink); background: var(--lavender); border-bottom: 1px solid rgb(127 86 217 / .12); }
body.ft .lp .ft-content .ftk-table td { color: var(--text-soft); }
body.ft .lp .ft-content .ftk-table tbody th, body.ft .lp .ft-content .ftk-table tbody td:first-child { color: var(--ink); font-weight: 500; background: rgb(241 237 249 / .45); }
body.ft .lp .ft-content .ftk-table tbody tr:hover > td { background: rgb(241 237 249 / .3); }
body.ft .lp .ft-content .ftk-table .kb-yes, body.ft .lp .ft-content .ftk-table .kb-no { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
body.ft .lp .ft-content .ftk-table .kb-yes { color: var(--success); }
body.ft .lp .ft-content .ftk-table .kb-no { color: var(--muted); }
body.ft .lp .ft-content .ftk-table :is(.kb-yes, .kb-no) .ic { width: 15px; height: 15px; }
@media (max-width: 699px) {
  body.ft .lp .ft-content .ftk-table.is-wide { overflow: visible; }
  body.ft .lp .ft-content .ftk-table.is-wide tbody :is(th, td) { background: none; }
  body.ft .lp .ft-content .ftk-table.is-wide tbody tr:hover > td { background: none; }
}

/* 27 Oct 2026 (Fernando: the article started too close to the tool, and the gap before the alternatives was
   bigger): a hairline between the big blocks, with the same space on both sides of it, everywhere */
body.ft { --ft-sep: clamp(48px, 5vw, 72px); }
body.ft .lp .ft-sep-wrap { padding-top: var(--ft-sep); }
body.ft .lp .ft-sep { display: block; height: 1px; margin: 0; border: 0; background: var(--line-2); }
body.ft .lp .kb-layout.ft-2col { padding-top: var(--ft-sep); }
body.ft .lp .kb-layout.ft-2col.has-alts { padding-bottom: 0; }
body.ft .lp .ft-sep-wrap + .ft-altsec { padding-top: var(--ft-sep); }
/* no line between the FAQ and the alternatives, and the same gap as between the blocks below (Fernando, 27 Oct 2026) */
body.ft .lp .kb-layout.ft-2col.has-alts + .ft-altsec { padding-top: var(--ft-gap); }