/* The free-tool pages, around the tool, in the landing's look (landing v3 is the source of truth):
   the lavender page, aubergine ink, light display headings, the landing's FAQ and cards.
   The tool itself stays the app's (its components come from the app's CSS). */
body.ft {
  --lp-page: #fbfaff; --lp-page-2: #f5f3fa; --lp-ink: #1f1a2e; --lp-muted: #6f6a7b;
  --lp-line: rgb(31 26 46 / .08); --lp-line-2: rgb(31 26 46 / .13); --lp-marker: #ddd0fa; --lp-violet: #7f56d9;
  background: var(--lp-page);
  font-optical-sizing: auto;
}
.ft-skip:focus { background: var(--lp-ink); color: #fff; }

/* hero */
.ft-hero { max-width: 960px; padding: clamp(40px, 6vw, 72px) 20px 8px; }
.ft-crumbs { color: var(--lp-muted); margin-bottom: 20px; }
.ft-crumbs a:hover, .ft-crumb-p { color: var(--lp-ink); }
.ft-h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.04; font-weight: 300; letter-spacing: -.036em; color: var(--lp-ink); }
.ft-h1 b { font-weight: 300; background: linear-gradient(transparent 58%, var(--lp-marker) 58%, var(--lp-marker) 90%, transparent 90%); padding-inline: .04em; }
.ft-lede { margin-top: 20px; max-width: 46rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; color: var(--lp-muted); }
.ft-lede b { color: var(--lp-ink); font-weight: 500; }

/* the article */
.ft-content { font-size: 1rem; line-height: 1.7; color: var(--lp-muted); }
.ft-content h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; font-weight: 300; letter-spacing: -.03em; color: var(--lp-ink); margin: 56px 0 16px; }
.ft-content h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 500; letter-spacing: -.012em; color: var(--lp-ink); }
.ft-content b { color: var(--lp-ink); font-weight: 500; }
.ft-content a { color: var(--lp-ink); text-decoration-color: var(--lp-marker); text-decoration-thickness: 2px; }
.ft-content a:hover { text-decoration-color: var(--lp-violet); }
.ft-content th { color: var(--lp-ink); background: var(--lp-page-2); font-weight: 500; }
.ft-content th, .ft-content td { border-bottom-color: var(--lp-line); }
.ft-content .t-note { background: #f1edf9; color: var(--lp-ink); }
.ft-content .t-steps > li::before { background: var(--lp-ink); color: #fff; }
.ft-toc { background: #fff; box-shadow: 0 0 0 1px var(--lp-line); border-radius: 16px; }
.ft-toc a { color: var(--lp-ink); }

/* the FAQ, as on the landing */
.ft-faq h2 { margin-bottom: 8px; }
.ft-faq details { border-bottom: 1px solid var(--lp-line-2); }
.ft-faq summary { padding: 20px 0; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--lp-ink); }
.ft-faq details > div { padding-bottom: 20px; }

/* side cards and the more-tools cards: white cards on the lavender page */
.ft-side-card { background: #fff; }
.ft-more { padding-bottom: clamp(56px, 7vw, 96px); }
.ft-more h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; font-weight: 300; letter-spacing: -.03em; color: var(--lp-ink); margin-bottom: 20px; }
.ft-more-card { background: #fff; border-radius: 16px; }
.ft-more-card.is-here { background: #f1edf9; box-shadow: 0 0 0 1px var(--lp-violet); }

/* 30 Oct 2026 (Fernando: only carousels the app makes, never made-up cards): the free tools' CTA art is three slides of
   a real aiCarousels carousel (assets/img/showcase, drawn by the app's engine), the one that fits the page's platform:
   LinkedIn and X a writing tip; Instagram, Facebook, Threads and Bluesky a photo carousel; TikTok and YouTube a
   full-screen 9:16 one; the PDF tools a document lesson; the others one cover of each. The middle card is the cover.
   A tool that shows the user's own slides or picture (an inline background, or .has-pic) keeps them. */
.ft-cta-art > span:not(.has-pic) { overflow: hidden; background: #ece9f3 center / cover no-repeat; font-size: 0; color: transparent; }
.ft-cta-art > span:not(.has-pic)::before, .ft-cta-art > span:not(.has-pic)::after { display: none; }
/* 31 Oct 2026: no photo dot laid over a real slide (the profile picture tools put one there) */
.ft-cta-art > i[data-cta-photo] { display: none; }
.ft-cta-art > span:nth-child(1):not(.has-pic) { background-image: url(../img/showcase/t/li-write-2.webp); }
.ft-cta-art > span:nth-child(2):not(.has-pic) { background-image: url(../img/showcase/t/li-write-1.webp); }
.ft-cta-art > span:nth-child(3):not(.has-pic) { background-image: url(../img/showcase/t/li-write-3.webp); }
:is([data-platform="instagram"], [data-platform="facebook"], [data-platform="threads"], [data-platform="bluesky"]) .ft-cta-art > span:nth-child(1):not(.has-pic) { background-image: url(../img/showcase/t/ig-morning-2.webp); }
:is([data-platform="instagram"], [data-platform="facebook"], [data-platform="threads"], [data-platform="bluesky"]) .ft-cta-art > span:nth-child(2):not(.has-pic) { background-image: url(../img/showcase/t/ig-morning-1.webp); }
:is([data-platform="instagram"], [data-platform="facebook"], [data-platform="threads"], [data-platform="bluesky"]) .ft-cta-art > span:nth-child(3):not(.has-pic) { background-image: url(../img/showcase/t/ig-morning-3.webp); }
[data-platform="pdf"] .ft-cta-art > span:nth-child(1):not(.has-pic) { background-image: url(../img/showcase/t/money-2.webp); }
[data-platform="pdf"] .ft-cta-art > span:nth-child(2):not(.has-pic) { background-image: url(../img/showcase/t/money-1.webp); }
[data-platform="pdf"] .ft-cta-art > span:nth-child(3):not(.has-pic) { background-image: url(../img/showcase/t/money-3.webp); }
[data-platform="social"] .ft-cta-art > span:nth-child(1):not(.has-pic) { background-image: url(../img/showcase/t/money-1.webp); }
[data-platform="social"] .ft-cta-art > span:nth-child(2):not(.has-pic) { background-image: url(../img/showcase/t/li-write-1.webp); }
[data-platform="social"] .ft-cta-art > span:nth-child(3):not(.has-pic) { background-image: url(../img/showcase/t/ig-morning-1.webp); }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span { top: 3px; width: 47px; height: 84px; border-radius: 8px; }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span:nth-child(1) { left: 10px; }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span:nth-child(2) { left: 43px; }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span:nth-child(3) { left: 76px; }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span:nth-child(1):not(.has-pic) { background-image: url(../img/showcase/t/tt-city-2.webp); }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span:nth-child(2):not(.has-pic) { background-image: url(../img/showcase/t/tt-city-1.webp); }
:is([data-platform="tiktok"], [data-platform="youtube"]) .ft-cta-art > span:nth-child(3):not(.has-pic) { background-image: url(../img/showcase/t/tt-city-3.webp); }
/* 30 Oct 2026, 23:46 (Fernando): the same white edge as the side column's fan (kb-chrome.css .kb-fan-card > .sc-pic),
   so the three overlapping slides read apart */
.ft-cta-art > span, .ft-cta-art.dk-fan .dk-cell { border-radius: 7px; box-shadow: 0 0 0 2.5px #fff, 0 1px 3px 2px rgb(24 21 31 / .1), 0 12px 24px -12px rgb(40 24 70 / .42); }