/* The page templates (27 Oct 2026, _inc/ft.php, _inc/templates): the few pieces the free tool pages do not have.
   Loaded after tools-kb.css and hub.css. Spacing follows the tools' --ft-gap. */
.tpl-hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.tpl-hero-small{margin:12px 0 0;text-align:center}
.tpl-eyebrow{margin:0 0 10px;color:var(--violet-ink,#5b3fd6);font-weight:500}
.tpl-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 0}
.tpl-show{padding-top:32px}
.tpl-stage{display:grid;place-items:center;padding:56px 20px 64px;border-radius:24px;background:var(--canvas,#f3f1f8);overflow:hidden}
.tpl-stage .kb-fan{--cw:clamp(110px,15vw,210px)}
.tpl-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
/* comparison table right under the hero: full width, same gap as a tool */
body.ft .lp .tpl-vs{padding-top:clamp(40px,5vw,64px)}
body.ft .lp .tpl-vs .ft-vs.is-c2{max-width:none}
/* cards under the closing band, as on the tools */
body.ft .lp .tpl-foot .hub-head{gap:12px}
body.ft .lp .tpl-foot .hub-group{padding-top:28px}
/* hub page */
body.ft .lp .tpl-hub{padding-top:8px;padding-bottom:var(--ft-gap)}
body.ft .lp .tpl-hub .hub-group:first-child{padding-top:24px}
.tpl-narrow{max-width:860px;margin:0 auto;padding-bottom:var(--ft-gap)}
.tpl-quote{margin:24px 0;padding:6px 0 6px 18px;padding-inline: 18px 0;border-inline-start:3px solid var(--violet,#7c5cff)}
.tpl-quote p{margin:0;font-size:1.125rem;line-height:1.5;color:var(--ink,#18151f)}
body.ft .lp .ft-content .kb-callout{margin:0 0 32px}
@media (max-width:640px){.tpl-stage{padding:36px 12px 44px;border-radius:18px}.tpl-stage .kb-fan.is-5{--cw:17vw}.tpl-hero-cta .btn{flex:1 1 100%}}

/* ---- the article column (_inc/ft.php ft_article) ------------------------------------------------------- */
/* a section's lead under its H2 */
body.ft .lp .ft-content > .ft-sec-lead { margin: -4px 0 22px; font-size: 1.125rem; line-height: 1.55; color: var(--muted); }
body.ft .lp .ft-content > h3 { margin: 32px 0 10px; font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
body.ft .lp .ft-content > h2 + h3, body.ft .lp .ft-content > .ft-sec-lead + h3 { margin-top: 8px; }
/* tables: the title above, the recommended row tinted, the note under */
body.ft .lp .ft-content > .ft-table-h { margin: 28px 0 10px; font-size: 1rem; font-weight: 500; }
body.ft .lp .ft-content .ftk-table tr.is-pick > * { background: var(--lavender); }
body.ft .lp .ft-content .ftk-table .badge { margin-inline-start: 6px; vertical-align: 1px; }
body.ft .lp .ft-content > .ft-table-note { margin: -4px 4px 28px; font-size: .8125rem; line-height: 1.5; color: var(--muted); max-width: none; }
body.ft .lp .ft-content > .ft-table-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* a component's box in the article */
body.ft .lp .ft-content .ft-blocks.is-visual, body.ft .lp .ft-content .ft-blocks.is-ui { display: grid; justify-items: center; padding: 28px 20px; border-radius: 20px; background: var(--lavender); }
body.ft .lp .ft-content .ft-blocks.is-visual > *, body.ft .lp .ft-content .ft-blocks.is-ui > * { width: 100%; max-width: 540px; }
body.ft .lp .ft-content .ft-blocks.is-visual .kb-ui, body.ft .lp .ft-content .ft-blocks.is-ui .kb-ui { width: 100%; max-width: none; margin: 0; }
body.ft .lp .ft-content .ft-blocks.is-visual figcaption, body.ft .lp .ft-content .ft-blocks.is-ui figcaption { margin-top: 12px; font-size: .8125rem; color: var(--muted); text-align: center; }
/* steps with the app's panels: one lavender panel per step, the panel and the words side by side on a wide screen */
body.ft .lp .ft-content .ft-blocks.is-how .kb-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
body.ft .lp .ft-content .ft-blocks.is-how .kb-step { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-row: auto; gap: 20px; margin: 0; padding: 16px 16px 22px; align-items: center; }
body.ft .lp .ft-content .ft-blocks.is-how .kb-step-shot { order: -1; width: 100%; max-width: 440px; justify-self: center; }
body.ft .lp .ft-content .ft-blocks.is-how .kb-step-shot .kb-ui { width: 100%; }
@media (min-width: 900px) {
  body.ft .lp .ft-content .ft-blocks.is-how .kb-step { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 28px; padding: 16px 24px 16px 16px;padding-inline: 16px 24px; }
  body.ft .lp .ft-content .ft-blocks.is-how .kb-step-shot { max-width: none; }
}
body.ft .lp .ft-content .ft-blocks.is-cards { margin: 12px 0 28px; }
body.ft .lp .ft-content .ft-blocks.is-cards .hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
body.ft .lp .ft-content .ft-blocks.is-vs .ft-vs table { min-width: 620px; }
body.ft .lp .ft-content .ft-blocks.is-key .kb-key, body.ft .lp .ft-content .ft-blocks.is-definition .kb-key { margin: 0; }
.tpl-stage.is-small { padding: 36px 16px 44px; }
.tpl-stage.is-small .kb-fan { --cw: clamp(100px, 12vw, 160px); }
/* hubs: a short text under a group's title, a block under its cards */
body.ft .lp .tpl-hub .tpl-hub-p { margin: -8px 0 20px; max-width: 64ch; color: var(--muted); }
body.ft .lp .tpl-hub .tpl-hub-more { margin-top: 28px; max-width: 920px; }
body.ft .lp .tpl-hub .tpl-hub-block .ft-content { max-width: 920px; }
/* numbered steps from a page's 'steps' block: the step's title on its own line */
body.ft .lp .ft-content .t-steps > li > b:first-child { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }

/* about: the "Behind the product" photos are a grid, not a bulleted list */
body.ft .ft-content > ul.about-behind { display: grid; gap: 16px; margin: 8px 0 28px; }
body.ft .ft-content > ul.about-behind > li { padding: 0; max-width: none; }
body.ft .ft-content > ul.about-behind > li::before { content: none; }

/* hero blocks with the page's own content (about card, pricing plans, a gallery) in place of the slide fan */
.tpl-show.is-blocks .tpl-blocks { display: grid; gap: 20px; }

/* cards inside article text (the blog hub's "Guides by platform", a hub card row in a page) are cards, not links in a sentence */
body.ft .lp .ft-content a.kb-hcard, body.ft .lp .ft-content a.kb-card, body.ft .lp .ft-content a.hub-card { text-decoration: none; }
body.ft .lp .tpl-hub-block .kb-hub-g { display: grid; gap: 16px; }
body.ft .lp .tpl-hub-block .kb-hub-gh .t-body { max-width: 620px; color: var(--lp-muted, var(--muted)); }
body.ft .lp .tpl-hub-block .kb-hub-gh { display: grid; gap: 8px; margin-bottom: 8px; }
body.ft .lp .tpl-hub-block .kb-hub-gh > * { margin: 0; }

/* The top comparison table on alternative pages: less air between it and the rule under it (27 Oct 2026). */
body.ft .lp .ft-altsec.tpl-vs { padding-bottom: 32px; }

/* ---- feature pages in one column (27 Oct 2026, Fernando: the important feature pages read as one proper column,
   no "On this page" and no side card) --------------------------------------------------------------------------
   The words keep a reading width; pictures of the app, steps and grids of cards get the room of the page. */
body.ft { --ft-read: 760px; }
body.ft .lp .ft-1col { padding-block: var(--ft-sep) var(--ft-gap); }
body.ft .lp .ft-1col .ft-main { width: 100%; }
/* one left edge for headings, words and cards; running text keeps a reading width */
body.ft .lp .ft-1col .ft-content > :is(p, ul, ol:not(.t-steps), h3, .ft-sec-lead), body.ft .lp .ft-1col .ft-qa .faq-a { max-width: var(--ft-read); }

/* ---- the cards after the closing band (Fernando, 27 Oct 2026: "Keep reading" was too loud and loose) -----------
   The heading at the article's H2 size, each list under a small label, the cards filling their row. */
body.ft .lp .tpl-foot .hub-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height: 1.12; font-weight: 300; letter-spacing: -.03em; }
body.ft .lp .tpl-foot .hub-group { padding-top: 24px; }
body.ft .lp .tpl-foot .hub-head + .hub-group { padding-top: 20px; }
body.ft .lp .tpl-foot .hub-group > h3 { margin-bottom: 12px; font-size: .875rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; color: var(--muted); }
body.ft .lp .tpl-foot .hub-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
body.ft .lp .tpl-foot .hub-card { padding: 18px 20px; gap: 6px; }
body.ft .lp .tpl-foot .hub-card b { font-size: 1rem; }
/* numbered steps side by side in one column (three or more), each a card */
@media (min-width: 900px) {
  body.ft .lp .ft-1col .ft-content > ol.t-steps { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
  body.ft .lp .ft-1col .ft-content > ol.t-steps > li { padding: 64px 22px 22px; }
  body.ft .lp .ft-1col .ft-content > ol.t-steps > li::before { inset-inline-start: 22px; top: 22px; }
}

/* the cards of hubs and of "Keep reading": the page's icon in a small tile above its name */
body.ft .lp .hub-card.has-ic { grid-template-rows: auto auto 1fr auto; }
body.ft .lp .hub-card-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: var(--violet-soft); color: var(--violet-ink); }
body.ft .lp .hub-card-ic .ph { font-size: 19px; }
/* a hub's questions: the full width, as on the feature pages (31 Oct 2026, Fernando), answers at reading width, one gap
   after the cards */
body.ft .lp .tpl-hub-faq { padding-bottom: var(--ft-gap); }
body.ft .lp .tpl-hub-faq .ft-qa { margin-top: 0; }
body.ft .lp .tpl-hub-faq .ft-qa .faq-a { max-width: var(--ft-read); }
/* a hub's group names at the article's H2 size, so each group reads as a section */
body.ft .lp .tpl-hub .hub-group > h2 { margin-bottom: 8px; font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height: 1.12; font-weight: 300; letter-spacing: -.03em; }
body.ft .lp .tpl-hub .hub-group { padding-top: clamp(48px, 5vw, 72px); }
body.ft .lp .tpl-hub .hub-group:first-child { padding-top: 32px; }
body.ft .lp .tpl-hub .hub-group > h2 + .tpl-hub-p { margin: 4px 0 24px; font-size: 1.0625rem; line-height: 1.55; }
body.ft .lp .tpl-hub .hub-group > h2 + .hub-grid { margin-top: 20px; }

/* ---- the app's own slides (kb.php kb_app_deck, 27 Oct 2026): every slide, deck, editor shot and tray on these pages is
   drawn by the app's engine in the app's layouts and themes, in place of the slides the pages used to draw in CSS ---- */
.lp .kb-asl { display: block; width: 100%; border-radius: min(14px, 5%); overflow: hidden; box-shadow: var(--shadow-slide); background: #f4f3f7; }
.lp .kb-asl > .ad-cell { display: block; width: 100%; background: #f4f3f7; }
.lp .kb-ui-thumbs { display: flex; gap: 6px; --as-gap: 6px; --as-cell-w: 26px; --as-cell-r: 4px; }
.lp .kb-ui-thumbs > .ad-cell { width: 26px; flex: none; border-radius: 4px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---- tables in the article (27 Oct 2026, Fernando: tables looked as if the side column were still there, and didn't
   use the width) ----------------------------------------------------------------------------------------------------
   Every table takes the article's full width; row names sit on white like the rest of the row (no tinted first column);
   a 'plain' comparison of two options highlights neither. */
body.ft .lp .ft-content .ft-vs.is-c2 { max-width: none; }
body.ft .lp .ft-content .ft-vs-scroll { padding: 0; }
body.ft .lp .ft-content .ft-vs table { margin: 0; }
body.ft .lp .ft-content .ft-vs thead :is(th, td):not(.is-us) { background: none; }
body.ft .lp .ft-content .ft-vs tr > :first-child { padding-inline-start: 24px; }
body.ft .lp .ft-content .ft-vs tr > :last-child { padding-inline-end: 24px; }
body.ft .lp .ft-content .ft-blocks.is-vs .ft-vs.is-c2 table { min-width: 0; }
body.ft .lp .ft-content .ft-vs thead :is(th, td) { padding-top: 18px; padding-bottom: 14px; font-size: .8125rem; font-weight: 500; color: var(--muted); border-bottom-color: var(--line-2, var(--line)); }
body.ft .lp .ft-content .ft-vs thead th.is-us { color: var(--violet-ink); }
body.ft .lp .ft-content .ft-vs.is-plain thead th { color: var(--ink); font-size: .9375rem; }
body.ft .lp .ft-content .ft-vs.is-plain .ft-vs-yes { background: var(--violet-soft); color: var(--violet-ink); }
body.ft .lp .ft-content .ft-vs tbody th { background: none; }
/* 30 Oct 2026 (Fernando: one table style, the free tools'): the site's tables keep the lavender header and tinted label column (tools-kb.css) */
@media (max-width: 759px) {
  body.ft .lp .ft-content .ft-blocks.is-vs .ft-vs:not(.is-c2) table { min-width: 560px; }
  body.ft .lp .ft-content .ft-vs tbody th { background: var(--card); }
  /* two options fit a phone without scrolling */
  body.ft .lp .ft-content .ft-blocks.is-vs .ft-vs.is-c2 table { min-width: 0; font-size: .8125rem; }
  body.ft .lp .ft-content .ft-vs.is-c2 :is(th, td) { padding: 12px 10px; }
  body.ft .lp .ft-content .ft-vs.is-c2 tr > :first-child { padding-inline-start: 14px; }
  body.ft .lp .ft-content .ft-vs.is-c2 tr > :last-child { padding-inline-end: 14px; }
  body.ft .lp .ft-content .ft-vs.is-c2 col.ft-vs-l { width: 30%; }
  body.ft .lp .ft-content .ft-vs.is-c2 tbody th { position: static; }
}

/* ---- feature headers from the homepage's demos (27 Oct 2026, Fernando: show the feature, not a fan of slides) -----
   home_piece(): the caption-and-post window (as on the homepage), or one card of "Small details. Big difference."
   at a header's size, centred. */
body.ft .lp .tpl-show.is-bleed .hp { padding-top: 8px; }
body.ft .lp .hp-feat-stage { display: grid; justify-items: center; }
body.ft .lp .hp-feat .ft-card { width: min(100%, 520px); }
body.ft .lp .hp-feat :is(.ft-a-kit, .ft-a-exp) { width: min(100%, 880px); }
@media (min-width: 900px) {
  body.ft .lp .hp-feat .ft-card { zoom: 1.3; }
  body.ft .lp .hp-feat :is(.ft-a-kit, .ft-a-exp) { zoom: 1.15; }
}
@media (hover: hover) { body.ft .lp .hp-feat .ft-card:hover { box-shadow: var(--shadow-tile); } }

/* the layout gallery as a header (home-pieces/inspiration.php, 27 Oct 2026): three rows at every width, then
   "Show more layouts"; the themes page drops the categories and keeps two rows under the theme bar */
body.ft .lp .hp-insp .ly-grid.is-all.is-collapsed > :is([data-extra], .ly-moretile) { display: none; }
@media (min-width: 1200px) { body.ft .lp .hp-insp .ly-reveal { display: flex; } }
body.ft .lp .hp-insp .ly-after { margin-top: 28px; }
body.ft .lp .hp-insp .ly-reveal { margin-bottom: 0; }
body.ft .lp .hp-insp.is-themes .ly-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main"; }
body.ft .lp .hp-insp.is-themes :is(.ly-side, .ly-after) { display: none; }
body.ft .lp .hp-insp.is-themes .ly-grid > .ly-tile:nth-child(n + 9) { display: none; }
@media (min-width: 1000px) { body.ft .lp .hp-insp.is-themes .ly-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { body.ft .lp .hp-insp.is-themes .ly-grid > .ly-tile:nth-child(n + 5) { display: none; } }

/* why-carousels: the header's three data cards, one per platform (28 Oct 2026). Static on purpose: no pinning or scroll effects. */
.lp .why-cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .lp .why-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.lp .why-card { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-tile); text-align: start; }
.lp .why-card > p { margin: 0; }
.lp .why-card-k { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--muted); }
.lp .why-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;padding-inline: 8px 10px; border-radius: 999px; background: var(--page-3); font-weight: 500; color: var(--ink); }
.lp .why-tag .ic { width: 15px; height: 15px; }
.lp .why-card-big { margin-top: 22px !important; font-size: clamp(3rem, 2.4rem + 1.6vw, 4rem); line-height: .9; font-weight: 300; letter-spacing: -.055em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .why-card-big small { margin-inline-start: .04em; font-size: .5em; color: var(--muted); letter-spacing: 0; }
.lp .why-card-note { margin-top: 10px !important; font-size: .9375rem; line-height: 1.45; color: var(--text-soft); }
.lp .why-card .kb-bars { margin-top: 18px; max-width: none; }
.lp .why-card-src { margin-top: 14px !important; font-size: .75rem; line-height: 1.5; color: var(--muted); }
.lp .why-card-src a { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.lp .why-card-src a:hover { color: var(--ink); }
.lp .why-card-src .ic { width: 11px; height: 11px; }
.lp .why-card-a { margin-top: auto; padding-top: 18px; align-self: flex-start; }
.lp .why-cards-note { margin: 4px 0 0; font-size: .75rem; color: var(--muted); text-align: center; }

/* ---- 30 Oct 2026 (Fernando: the example carousels looked cramped and had no context) ------------------- */
/* a split: its words and its visual side by side in one lavender panel (_inc/ft.php 'split') */
body.ft .lp .ft-content > .ft-split { display: grid; gap: 22px; margin: 36px 0; padding: 22px; border-radius: 24px; background: var(--lavender); }
body.ft .lp .ft-content > .ft-split .ft-split-t > h3 { margin: 0 0 10px; font-size: 1.375rem; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
body.ft .lp .ft-content > .ft-split .ft-split-t > p { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; color: var(--text-soft, var(--muted)); max-width: 52ch; }
body.ft .lp .ft-content > .ft-split .ft-split-t > ul { margin: 0 0 12px; }
body.ft .lp .ft-content > .ft-split .ft-split-t > :last-child { margin-bottom: 0; }
body.ft .lp .ft-content > .ft-split .ft-blocks.is-visual { padding: 0; background: none; border-radius: 0; }
@media (min-width: 900px) {
  body.ft .lp .ft-content > .ft-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 40px; }
}
/* the post frame in the article: a feed card, sized like one, centred (its look: "posts around carousels" below) */
body.ft .lp .ft-content .kb-deck.has-frame { max-width: 400px; margin-inline: auto; gap: 12px; }
body.ft .lp .ft-content .kb-deck.is-tiktok { max-width: 300px; }
body.ft .lp .ft-content .kb-decks .kb-deck-ui { justify-content: center; }
body.ft .lp .ft-content .kb-deck.has-frame .kb-deck-cap { margin: 0 auto; text-align: center; }
/* a row of example carousels: one whole slide each (no cut-off second slide), the pager centred under it */
body.ft .lp .ft-content .kb-decks .kb-deck, body.ft .lp .ft-hero .kb-decks .kb-deck { --cell: 100%; }
body.ft .lp .ft-content .kb-decks .kb-deck-track, body.ft .lp .ft-hero .kb-decks .kb-deck-track { gap: 12px; padding: 2px 2px 8px; }
body.ft .lp .ft-hero .kb-decks .kb-deck-ui { justify-content: center; }

/* 30 Oct 2026 (Fernando: "this table is different from the other ones … the width is not 100%"): every comparison
   table looks the same wherever it sits (lifted under a vs post's cards, inside an article, or under a hub group):
   the same header (names in ink, aiCarousels in violet) and the full width of the column it is in. */
body.ft .lp .ft-vs thead :is(th, td),
body.ft .lp .ft-content .ft-vs thead :is(th, td) { font-size: .9375rem; font-weight: 600; color: var(--ink); }
body.ft .lp .ft-vs thead th.is-us,
body.ft .lp .ft-content .ft-vs thead th.is-us { color: var(--violet-ink); }
body.ft .lp .ft-vs, body.ft .lp .ft-vs-scroll { width: 100%; }
body.ft .lp .tpl-hub .tpl-hub-more:has(.ft-vs) { max-width: none; }
body.ft .lp .ft-content .ft-vs-scroll { padding: 8px 12px; }
body.ft .lp .ft-content .ft-vs tr > :first-child { padding-inline-start: 18px; }
body.ft .lp .ft-content .ft-vs tr > :last-child { padding-inline-end: 18px; }
@media (max-width: 760px) { body.ft .lp .ft-content .ft-vs-scroll { padding: 4px 6px; } }


/* a homepage feature card used alone as a page's hero piece (e.g. Download PDF and PNG): one centred column, not the
   homepage grid's side slot (30 Oct 2026, Fernando: "the thing in the header is not centred") */
body.ft .lp .tpl-show.is-bleed .hp-feat-stage:has(> .ft-card:only-of-type) { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
body.ft .lp .tpl-show.is-bleed .hp-feat-stage > .ft-card:only-of-type { grid-column: 1 / -1; grid-area: auto; width: 100%; max-width: 1040px; margin-inline: auto; }

/* the video posts page's header: real video posts, side by side (home-pieces/video-wall.php, 30 Oct 2026) */
body.ft .lp .vw { padding: 8px 0 clamp(24px, 4vw, 48px); }
body.ft .lp .vw-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); align-items: center; }
body.ft .lp .vw-card { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #1b1b1f; box-shadow: 0 30px 60px -30px rgb(30 20 60 / .45), 0 0 0 1px rgb(0 0 0 / .04); container-type: inline-size; }
body.ft .lp .vw-card:nth-child(odd) { transform: translateY(18px); }
body.ft .lp .vw-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.ft .lp .vw-over { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqw; padding: 9cqw 8cqw; color: #fff; text-shadow: 0 2px 14px rgb(0 0 0 / .35); }
body.ft .lp .vw-card.is-bottom .vw-over { justify-content: flex-end; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .62)); }
body.ft .lp .vw-card.is-top .vw-over { justify-content: flex-start; background: linear-gradient(0deg, transparent 50%, rgb(0 0 0 / .55)); }
body.ft .lp .vw-card.is-center .vw-over { justify-content: center; align-items: center; text-align: center; background: radial-gradient(ellipse at center, rgb(0 0 0 / .5), rgb(0 0 0 / .28)); }
body.ft .lp .vw-k { align-self: flex-start; padding: 1.6cqw 3.6cqw; border-radius: 999px; background: #fff; color: #111; font-size: 6cqw; font-weight: 600; text-shadow: none; }
body.ft .lp .vw-card.is-center .vw-k { align-self: center; }
body.ft .lp .vw-h { margin: 0; font-size: 11.5cqw; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
body.ft .lp .vw-card.is-center .vw-h { font-size: 13cqw; }
body.ft .lp .vw-s { font-size: 6.2cqw; line-height: 1.3; opacity: .9; }
body.ft .lp .vw-plat { position: absolute; inset-inline-end: 6cqw; top: 6cqw; padding: 1.4cqw 3cqw; border-radius: 999px; background: rgb(0 0 0 / .45); color: #fff; font-size: 5cqw; font-weight: 500; backdrop-filter: blur(6px); }
body.ft .lp .vw-card.is-top .vw-plat { top: auto; bottom: 6cqw; }
@media (max-width: 900px) {
  body.ft .lp .vw-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 24px; }
  body.ft .lp .vw-card { scroll-snap-align: center; }
  body.ft .lp .vw-card:nth-child(odd) { transform: none; }
}

/* "Your own ghostwriter" header piece (home-pieces/feat-voice.php, 30 Oct 2026): the brand-kit card's layout,
   switching the sample between Plain and Yours */
body.ft .lp .ftv-match { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px;padding-inline: 6px 8px; border-radius: 999px; background: rgb(46 160 90 / .1); color: #1f7a45; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
body.ft .lp .ftv-match .ic { width: 13px; height: 13px; }
body.ft .lp .ftv-never { gap: 6px; }
body.ft .lp .ftv-never s { padding: 2px 7px; border-radius: 6px; background: var(--surface-2, #f1eff6); color: var(--muted); font-size: 12px; font-weight: 500; text-decoration-color: rgb(200 60 60 / .7); }
/* the slides are two pictures each (voice-plain, voice-yours), crossfading like the note under them */
body.ft .lp .ftv [data-v] { transition: opacity .35s var(--ease); }
body.ft .lp .ftv .ftk-note { display: grid; grid-auto-flow: column; grid-template-columns: auto 1fr; opacity: 1; transform: translate(-50%, 0); }
body.ft .lp .ftv .ftk-note .ic { grid-area: 1 / 1; color: var(--violet); }
body.ft .lp .ftv .ftk-note > [data-v] { grid-area: 1 / 2; }
body.ft .lp .ftv[data-view="plain"] [data-v="yours"], body.ft .lp .ftv[data-view="yours"] [data-v="plain"] { opacity: 0; }
body.ft .lp .ftv .ftk-panel { width: 318px; }
@container ftc (max-width: 599px) {
  body.ft .lp .ftv .ftk-panel { width: min(100%, 320px); }
  body.ft .lp .ftv-never s { font-size: 11px; padding: 1px 5px; }
}
@container ftc (max-width: 380px) { body.ft .lp .ftv-match { display: none; } }

/* Characters header piece (home-pieces/feat-chars.php, 30 Oct 2026): Mara's styles in the panel, her poses on a cover */
body.ft .lp .ftc .ftk-panel { width: 318px; }
body.ft .lp .ftc-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; }
body.ft .lp .ftc-face { width: 38px; height: 38px; flex: none; border-radius: 10px; overflow: hidden; background: #f3e5d4; }
body.ft .lp .ftc-face img { width: 100%; height: 160%; object-fit: cover; object-position: 50% 0; }
body.ft .lp .ftc-k { margin: 0 4px 8px; font-size: 12px; color: var(--muted); }
body.ft .lp .ftc-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.ft .lp .ftc-st { display: grid; gap: 3px; padding: 4px 4px 5px; border: 0; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 11px; color: var(--ink); cursor: pointer; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
body.ft .lp .ftc-st img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 8%; border-radius: 7px; background: #f6f1ea; }
body.ft .lp .ftc-st[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--violet); background: rgb(127 86 217 / .06); }
body.ft .lp .ftc-slides { width: 250px; height: 312px; }
body.ft .lp .ftc .ftk-s1 { left: 0; width: 250px; transform: translateY(-50%) rotate(-1.5deg); }
/* the cover: one picture per pose (showcase chars) and per style (chars-style), the shown one fades in */
body.ft .lp .ftc-s > .sc-pic { opacity: 0; transition: opacity .4s var(--ease); }
body.ft .lp .ftc-s > .sc-pic.is-on { opacity: 1; }
body.ft .lp .ftc .ftk-note { opacity: 1; transform: translate(-50%, 0); bottom: -18px; }
body.ft .lp .ftc .ftk-note .ic { color: var(--violet); }
@media (min-width: 720px) and (max-width: 1079px) { body.ft .lp .ftc .ftk-panel { width: 280px; } body.ft .lp .ftc-slides, body.ft .lp .ftc .ftk-s1 { width: 220px; } body.ft .lp .ftc-slides { height: 276px; } }
@media (max-width: 719px) {
  body.ft .lp .ftc { flex-direction: column; gap: 22px; padding: 18px 12px 36px; }
  body.ft .lp .ftc .ftk-panel { width: 100%; max-width: 330px; }
  body.ft .lp .ftc-slides, body.ft .lp .ftc .ftk-s1 { width: 220px; } body.ft .lp .ftc-slides { height: 276px; }
  body.ft .lp .ftc .ftk-s1 { left: 0; transform: translateY(-50%) rotate(-1.5deg); }
  body.ft .lp .ftc .ftk-s2 { display: none; }
  body.ft .lp .ftc .ftk-note { left: 50%; right: auto; transform: translate(-50%, 0); }
}

/* LinkedIn text post header piece (home-pieces/feat-text.php, 30 Oct 2026) */
body.ft .lp .ftt .ftk-panel { width: 330px; }
body.ft .lp .ftt-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
body.ft .lp .ftt-opts { display: grid; gap: 6px; }
body.ft .lp .ftt-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 13px; line-height: 1.4; color: var(--ink); text-align: start; cursor: pointer; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
body.ft .lp .ftt-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--violet); background: rgb(127 86 217 / .05); }
body.ft .lp .ftt-n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2, #f1eff6); font-size: 11px; font-weight: 600; color: var(--muted); }
body.ft .lp .ftt-opt[aria-pressed="true"] .ftt-n { background: var(--violet); color: #fff; }
body.ft .lp .ftt-acts { display: flex; gap: 6px; margin-top: 10px; }
body.ft .lp .ftt-acts span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 500; }
body.ft .lp .ftt-acts .ic { width: 14px; height: 14px; color: var(--violet); }
body.ft .lp .ftt-post { position: relative; z-index: 1; width: 340px; flex: none; padding: 16px 16px 8px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-popover); color: #1d1d1f; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body.ft .lp .ftt-who { display: flex; align-items: center; gap: 10px; }
body.ft .lp .ftt-who b { display: block; font-size: 14px; font-weight: 600; }
body.ft .lp .ftt-who small { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #666; }
body.ft .lp .ftt-who small .ic { width: 12px; height: 12px; }
body.ft .lp .ftt-av { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #2c3e2d; color: #dfe6cf; font-size: 14px; font-weight: 600; }
body.ft .lp .ftt-body { margin: 12px 0 0; font-size: 14px; line-height: 1.45; }
body.ft .lp .ftt-first { font-weight: 600; transition: opacity .25s var(--ease); }
body.ft .lp .ftt.is-swap .ftt-first { opacity: 0; }
body.ft .lp .ftt-more { color: #666; }
body.ft .lp .ftt-fold { position: relative; margin: 10px -16px 0; border-top: 1px dashed rgb(127 86 217 / .55); }
body.ft .lp .ftt-fold span { position: absolute; inset-inline-end: 12px; top: -10px; padding: 1px 8px; border-radius: 999px; background: #f4effd; color: var(--violet-ink, #5b3bb0); font-size: 11px; font-weight: 500; }
body.ft .lp .ftt-bar { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 6px; border-top: 1px solid #eee; }
body.ft .lp .ftt-bar span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 4px; font-size: 12.5px; font-weight: 600; color: #666; }
body.ft .lp .ftt-bar .ic { width: 16px; height: 16px; }
@media (min-width: 720px) and (max-width: 1079px) { body.ft .lp .ftt .ftk-panel { width: 290px; } body.ft .lp .ftt-post { width: 300px; } }
/* narrower post (31 Oct 2026): icon over label, as in the LinkedIn app, so longer words (Recomendar … Enviar) all fit */
@media (max-width: 1079px) { body.ft .lp .ftt-bar span { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; } }
@media (max-width: 719px) {
  body.ft .lp .ftt { flex-direction: column-reverse; gap: 16px; padding: 18px 12px; }
  body.ft .lp .ftt .ftk-panel, body.ft .lp .ftt-post { width: 100%; max-width: 340px; }
  body.ft .lp .ftt-acts span:first-child { display: none; }
}

/* Phone header piece (home-pieces/feat-phone.php, 30 Oct 2026) */
/* the feed piece (feat-feed.php) has the same four callouts round its phone (31 Oct 2026: they sat loose and the left
   one was cut off at the edge, Fernando) */
body.ft .lp :is([data-ft="phone"], [data-ft="feed"]) .ftp { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 28px; padding: 28px 24px; }
body.ft .lp .ftp-phone { grid-column: 2; grid-row: 1 / 3; width: 268px; padding: 10px; border-radius: 40px; background: #1b1a20; box-shadow: 0 40px 70px -35px rgb(30 20 60 / .55), inset 0 0 0 2px #34323c; }
body.ft .lp .ftp-screen { display: flex; flex-direction: column; gap: 10px; height: 500px; padding: 14px 12px 12px; border-radius: 31px; background: #f6f5f9; overflow: hidden; }
body.ft .lp .ftp-top { display: flex; align-items: center; gap: 8px; height: 30px; font-size: 13px; font-weight: 500; color: var(--ink); }
body.ft .lp .ftp-top .ic { width: 16px; height: 16px; }
body.ft .lp .ftp-top b { margin-inline-start: auto; height: 28px; padding: 0 12px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; }
/* the carousel is the app's (showcase li-write), one picture per slide; the shown one slides in */
body.ft .lp .ftp-stage { position: relative; display: grid; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 24px -14px rgb(30 20 60 / .4); }
body.ft .lp .ftp-stage > .sc-pic { grid-area: 1 / 1; border-radius: 0; box-shadow: none; transform: translateX(100%); transition: transform .55s var(--ease-out); }
body.ft .lp .ftp-stage > .sc-pic.is-on { transform: none; }
body.ft .lp .ftp-stage > .sc-pic.is-out { transform: translateX(-100%); }
body.ft .lp .ftp-stage > .sc-pic:not(.is-on):not(.is-out) { transition: none; }
body.ft .lp .ftp-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ft .lp .ftp-dots { display: flex; justify-content: center; gap: 5px; }
body.ft .lp .ftp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(31 26 46 / .18); transition: background-color .3s var(--ease), width .3s var(--ease); }
body.ft .lp .ftp-dots i.is-on { width: 16px; border-radius: 3px; background: var(--violet); }
body.ft .lp .ftp-strip { display: flex; gap: 6px; }
body.ft .lp .ftp-th { flex: 1 1 0; max-width: 40px; min-width: 0; border-radius: 5px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease); }
body.ft .lp .ftp-th > .sc-pic { border-radius: 5px; box-shadow: none; }
body.ft .lp .ftp-th.is-on { box-shadow: 0 0 0 2px var(--violet); }
body.ft .lp .ftp-th.is-add { display: grid; place-items: center; aspect-ratio: 4 / 5; color: var(--muted); }
body.ft .lp .ftp-th.is-add .ic { width: 14px; height: 14px; }
body.ft .lp .ftp-tools { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
body.ft .lp .ftp-tools span { display: grid; justify-items: center; align-content: start; gap: 4px; font-size: 11px; line-height: 1.25; text-align: center; color: var(--muted); }   /* a two-line label ("Preguntar a la IA") hangs below its icon; the icons stay in one row */
body.ft .lp .ftp-tools .ic { width: 18px; height: 18px; color: var(--ink); }
body.ft .lp .ftp-call { display: inline-flex; align-items: center; gap: 8px; justify-self: end; height: 38px; padding: 0 14px 0 11px;padding-inline: 11px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-popover); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
body.ft .lp .ftp-call .ic { width: 17px; height: 17px; color: var(--violet); }
body.ft .lp .ftp-call.is-l1 { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 18px; }
body.ft .lp .ftp-call.is-l2 { grid-column: 1; grid-row: 2; align-self: start; margin-top: 18px; transform: translateX(-24px); }
body.ft .lp .ftp-call.is-r1 { grid-column: 3; grid-row: 1; justify-self: start; align-self: end; margin-bottom: 18px; transform: translateX(18px); }
body.ft .lp .ftp-call.is-r2 { grid-column: 3; grid-row: 2; justify-self: start; align-self: start; margin-top: 18px; }
/* narrower: one callout each side, beside the phone's middle, wrapping instead of running off the edge */
@media (min-width: 720px) and (max-width: 1179px) {
  body.ft .lp :is([data-ft="phone"], [data-ft="feed"]) .ftp { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 20px; }
  body.ft .lp .ftp-call { height: auto; min-height: 38px; padding: 9px 14px 9px 11px;padding-inline: 11px 14px; line-height: 1.3; white-space: normal; transform: none !important; }
  body.ft .lp .ftp-call.is-l2, body.ft .lp .ftp-call.is-r2 { display: none; }
  body.ft .lp .ftp-call.is-l1, body.ft .lp .ftp-call.is-r1 { grid-row: 1 / 3; align-self: center; margin: 0; }
}
@media (max-width: 719px) {
  body.ft .lp :is([data-ft="phone"], [data-ft="feed"]) .ftp { display: flex; flex-direction: column; gap: 10px; padding: 20px 12px; }
  body.ft .lp .ftp-call { transform: none !important; margin: 0 !important; align-self: center; }
  body.ft .lp .ftp-call.is-l2, body.ft .lp .ftp-call.is-r2 { display: none; }
  body.ft .lp .ftp-phone { order: 2; width: 240px; }
  body.ft .lp .ftp-call.is-r1 { order: 3; }
  body.ft .lp .ftp-screen { height: 480px; }
}

/* Projects header piece (home-pieces/feat-projects.php, 30 Oct 2026) */
body.ft .lp .ftj { padding: 28px 24px; display: grid; place-items: center; }
body.ft .lp .ftj-app { display: grid; grid-template-columns: 196px 1fr; width: 100%; max-width: 860px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-popover); overflow: hidden; font-size: 13px; color: var(--ink); }
body.ft .lp .ftj-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-inline-end: 1px solid var(--line); background: #fbfafd; }
body.ft .lp .ftj-h { padding: 0 8px 10px; font-size: 15px; font-weight: 600; }
body.ft .lp .ftj-k { padding: 12px 8px 4px; font-size: 11.5px; color: var(--muted); }
body.ft .lp .ftj-f { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: start; }
body.ft .lp .ftj-f .ic { width: 15px; height: 15px; color: var(--muted); }
body.ft .lp .ftj-f em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }
body.ft .lp .ftj-f[aria-pressed="true"] { background: rgb(127 86 217 / .1); font-weight: 500; }
body.ft .lp .ftj-f[aria-pressed="true"] .ic { color: var(--violet); }
body.ft .lp .ftj-saved { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 14px 8px 0; font-size: 11.5px; color: var(--muted); }
body.ft .lp .ftj-saved .ic { width: 14px; height: 14px; color: var(--success, #2e9e5b); }
body.ft .lp .ftj-main { padding: 14px 16px 18px; min-width: 0; }
body.ft .lp .ftj-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
body.ft .lp .ftj-search { flex: 1; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12.5px; }
body.ft .lp .ftj-search .ic, body.ft .lp .ftj-seg .ic, body.ft .lp .ftj-new .ic { width: 14px; height: 14px; }
body.ft .lp .ftj-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: #f1eff6; }
body.ft .lp .ftj-seg i { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 6px; color: var(--muted); }
body.ft .lp .ftj-seg i.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
body.ft .lp .ftj-new { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; }
body.ft .lp .ftj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
body.ft .lp .ftj-card { display: grid; gap: 2px; min-width: 0; transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
body.ft .lp .ftj-card[hidden] { display: none; }
body.ft .lp .ftj-th { position: relative; margin-bottom: 6px; }
body.ft .lp .ftj-th > .sc-pic { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px rgb(31 26 46 / .06); }
body.ft .lp .ftj-tag { position: absolute; inset-inline-start: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px;padding-inline: 5px 7px; border-radius: 999px; background: #fff; color: #1f7a45; font-size: 10.5px; font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
body.ft .lp .ftj-tag .ic { width: 11px; height: 11px; }
body.ft .lp .ftj-card b { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ft .lp .ftj-card small { font-size: 11px; color: var(--muted); }
body.ft .lp .ftj.is-swap .ftj-card { opacity: 0; transform: translateY(6px); }
@media (max-width: 719px) {
  body.ft .lp .ftj { padding: 14px 8px; }
  body.ft .lp .ftj-app { grid-template-columns: 1fr; }
  body.ft .lp .ftj-side { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  body.ft .lp .ftj-h, body.ft .lp .ftj-k, body.ft .lp .ftj-saved, body.ft .lp .ftj-f em, body.ft .lp .ftj-search { display: none; }
  body.ft .lp .ftj-bar { justify-content: flex-end; }
  body.ft .lp .ftj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  body.ft .lp .ftj-card:nth-child(n+5) { display: none; }
  body.ft .lp .ftp-th { width: 36px; flex-basis: 36px; }
  body.ft .lp .ftp-th.is-add { display: none; }
}

/* The side card's showcase fan (partials/cta-rail.php rail_showcase(), 30 Oct 2026) */
.lp .rail-fan .sl-h { --sl-size: 12.5cqw; line-height: 1.02; }
.lp .rail-photo { background: #222 center / cover no-repeat; color: #fff; --sl-soft: rgb(255 255 255 / .82); }
.lp .rail-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 35%, transparent 45%, rgb(0 0 0 / .7)); }
.lp .rail-photo .sl-h { margin-top: auto; font-weight: 600; letter-spacing: -.03em; --sl-size: 12cqw; }
.lp .rail-photo .sl-bot { margin-top: 4cqw; }
.lp .rail-char .sl-h { max-width: 64%; --sl-size: 11cqw; margin-top: 5cqw; }
.lp .rail-fig { position: absolute; z-index: 1; inset-inline-end: -6cqw; bottom: 0; width: 66%; height: 76%; object-fit: contain; object-position: 100% 100%; }
.lp .rail-char .sl-bot { position: relative; z-index: 2; }
.lp .rail-orb[data-skin="signal"] .sl-h { margin-top: auto; }

/* The editor's canvas piece (home-pieces/feat-canvas.php, 30 Oct 2026) */
body.ft .lp .fcv { display: grid; align-content: center; gap: 18px; padding: 22px clamp(14px, 3vw, 40px) 34px; background: radial-gradient(circle at 1px 1px, rgb(31 26 46 / .09) 1px, transparent 1.4px) 0 0 / 18px 18px, #f4f3f8; }
body.ft .lp .fcv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.ft .lp .fcv-hint { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow-tile); font-size: 13px; font-weight: 500; color: var(--ink); transition: opacity .25s var(--ease); }
body.ft .lp .fcv .seg-sm > button { height: 28px; padding: 0 12px; font-size: 12.5px; }
body.ft .lp .fcv-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(100%, 780px); margin-inline: auto; transition: gap .6s var(--ease-out); }
body.ft .lp .fcv[data-view="posted"] .fcv-row { gap: clamp(10px, 2.4vw, 28px); }
body.ft .lp .fcv-col { display: grid; grid-template-rows: 18px auto; align-content: start; gap: 8px; min-width: 0; }
body.ft .lp .fcv-lab { display: inline-flex; align-items: center; gap: 6px; height: 18px; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--muted); transition: opacity .3s var(--ease); }
body.ft .lp .fcv-lab b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 10.5px; font-weight: 600; color: var(--ink); }
body.ft .lp .fcv[data-view="posted"] .fcv-lab { opacity: 0; }
body.ft .lp .fcv-sl { position: relative; container-type: inline-size; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; box-shadow: 0 24px 40px -28px rgb(30 20 60 / .45); transition: border-radius .5s var(--ease); }
body.ft .lp .fcv-col:first-child .fcv-sl { border-radius: 10px 0 0 10px;border-start-start-radius: 10px;border-start-end-radius: 0;border-end-end-radius: 0;border-end-start-radius: 10px; }
body.ft .lp .fcv-col:last-child .fcv-sl { border-radius: 0 10px 10px 0;border-start-start-radius: 0;border-start-end-radius: 10px;border-end-end-radius: 10px;border-end-start-radius: 0; }
body.ft .lp .fcv[data-view="posted"] .fcv-sl { border-radius: 10px; }
body.ft .lp .fcv-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the headline the app drew (canvas-head.webp): where the app puts it across, dragged down to the centre */
body.ft .lp .fcv-txt { position: absolute; z-index: 3; inset-inline-start: 13.43%; width: 73.61%; top: 12.5cqw; transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
body.ft .lp .fcv-head { display: block; width: 100%; height: auto; }
body.ft .lp .fcv-box { position: absolute; inset: -2.4cqw; border: 1px solid var(--violet); border-radius: 1cqw; opacity: 0; transition: opacity .25s var(--ease); }
body.ft .lp .fcv-box b, body.ft .lp .fcv-picsel > b { position: absolute; width: 7px; height: 7px; margin: -4px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--violet); }
body.ft .lp .fcv-box b:nth-child(1), body.ft .lp .fcv-picsel > b:nth-child(1) { inset-inline-start: 0; top: 0; }
body.ft .lp .fcv-box b:nth-child(2), body.ft .lp .fcv-picsel > b:nth-child(2) { inset-inline-end: 0; top: 0; }
body.ft .lp .fcv-box b:nth-child(3), body.ft .lp .fcv-picsel > b:nth-child(3) { inset-inline-start: 0; bottom: 0; }
body.ft .lp .fcv-box b:nth-child(4), body.ft .lp .fcv-picsel > b:nth-child(4) { inset-inline-end: 0; bottom: 0; }
body.ft .lp .fcv-box s, body.ft .lp .fcv-picsel > s { position: absolute; left: 50%; top: -22px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--violet); }
body.ft .lp .fcv-box s::after, body.ft .lp .fcv-picsel > s::after { content: ""; position: absolute; inset-inline-start: 4px; top: 9px; width: 1px; height: 13px; background: var(--violet); }
body.ft .lp .fcv-xy { position: absolute; inset-inline-start: -2.4cqw; top: calc(100% + 3.6cqw); padding: 2px 6px; border-radius: 5px; background: var(--violet); color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity .25s var(--ease); }
body.ft .lp .fcv[data-view="edit"][data-step="text"] :is(.fcv-box, .fcv-xy) { opacity: 1; }
body.ft .lp .fcv-guide { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; border-inline-start: 1px dashed #e0457b; opacity: 0; transition: opacity .2s var(--ease); }
body.ft .lp .fcv.is-snap .fcv-guide { opacity: 1; }
/* Mara's picture straddles the seam: one image, shown in each slide's half */
/* Mara's picture, centred on the seam between slides 1 and 2 (--pd: how far left of there it still is, in % of a slide);
   each slide draws its own copy and clips it, as the app does when a picture runs over a slide's edge */
body.ft .lp .fcv { --pd: 0; }
body.ft .lp .fcv-pic { position: absolute; z-index: 1; bottom: 0; height: 50.4%; width: 42%; object-fit: contain; object-position: 50% 100%; pointer-events: none; transition: left .9s cubic-bezier(.3,1.1,.5,1); }
body.ft .lp .fcv-pic.is-a { inset-inline-start: calc(79% - var(--pd) * 1%); }
body.ft .lp .fcv-pic.is-b { inset-inline-start: calc(-21% - var(--pd) * 1%); }
body.ft .lp .fcv-picsel { position: absolute; z-index: 4; inset-inline-start: calc(100% / 3 * (.79 - var(--pd) / 100)); width: calc(100% / 3 * .42); bottom: 0; height: calc((100% - 26px) * .504); border: 1px solid var(--violet); opacity: 0; transition: opacity .25s var(--ease), left .9s cubic-bezier(.3,1.1,.5,1); pointer-events: none; }
body.ft .lp .fcv-picsel > span { position: absolute; left: 50%; bottom: calc(100% + 30px); transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity .25s var(--ease); }
body.ft .lp .fcv[data-view="edit"][data-step="pic"] .fcv-picsel { opacity: 1; }
body.ft .lp .fcv-picsel::before { content: ""; position: absolute; top: -10px; bottom: 0; left: 50%; border-inline-start: 1px dashed rgb(127 86 217 / .7); opacity: 0; transition: opacity .25s var(--ease); }
body.ft .lp .fcv.is-over .fcv-picsel::before, body.ft .lp .fcv.is-over .fcv-picsel > span { opacity: 1; }
@media (max-width: 719px) {
  body.ft .lp .fcv { padding: 14px 10px 22px; gap: 12px; }
  body.ft .lp .fcv-hint { display: none; }
  body.ft .lp .fcv-bar { justify-content: center; }
  body.ft .lp .fcv-lab { font-size: 10.5px; }
  body.ft .lp .fcv-picsel > span, body.ft .lp .fcv-xy { display: none; }
}
/* feat-src on the site's pages (30 Oct 2026): sources and slides centred together, room for the fanned stack */
@container ftc (min-width: 521px) {
  body.ft .lp .hp-feat-src .fts { justify-content: center; gap: clamp(40px, 12cqw, 120px); padding-inline-end: 52px; }
  body.ft .lp .hp-feat-src .fts-stack { margin-inline-end: 12px; }
}
/* a homepage feature card inside an article (the How it works guide, 30 Oct 2026): the column's full width, no zoom,
   so wide cards (the ghostwriter panel and its slides) aren't cut off */
body.ft .lp .ft-content .hp-feat { padding: 4px 0 8px; }
body.ft .lp .ft-content .hp-feat .wrap { padding: 0; max-width: none; }
body.ft .lp .ft-content .hp-feat-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
body.ft .lp .ft-content .hp-feat-stage > .ft-card { grid-column: 1 / -1; grid-area: auto; width: 100%; zoom: 1; margin-inline: 0; }

/* a platform's feed on a phone with a carousel swiping in it (home-pieces/feat-feed.php, 30 Oct 2026): the TikTok,
   Instagram and LinkedIn guides. The phone and the callouts are the phone piece's (.ftp) */
body.ft .lp .ffd-screen { padding: 0; gap: 0; height: 540px; background: #fff; position: relative; font-size: 11px; color: #111; }
body.ft .lp .ffd-view { position: relative; overflow: hidden; }
body.ft .lp .ffd-track { display: flex; transition: transform .6s var(--ease-out); }
body.ft .lp .ffd-slide { flex: 0 0 100%; min-width: 0; }
body.ft .lp .ffd-pic { display: block; width: 100%; height: auto; }
body.ft .lp .ffd-tt .ffd-pic { height: 100%; object-fit: cover; }
body.ft .lp .ffd-dots { display: flex; justify-content: center; gap: 4px; }
body.ft .lp .ffd-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(0 0 0 / .2); transition: background-color .3s var(--ease); }
body.ft .lp .ffd-dots i.is-on { background: #1d9bf0; }
body.ft .lp .ffd-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f3c9a8, #c98a6a); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e1306c; }
body.ft .lp .ffd-av[style] { background-size: cover; background-position: center; }
body.ft .lp .ffd-av.is-sm { width: 22px; height: 22px; box-shadow: none; }
body.ft .lp .ffd-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 10px 12px 0; }
body.ft .lp .ffd-bar .ic, body.ft .lp .ffd-head .ic, body.ft .lp .ffd-act .ic { width: 18px; height: 18px; }
body.ft .lp .ffd-bar span { display: inline-flex; gap: 14px; }
body.ft .lp .ffd-logo { font: italic 600 17px/1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
body.ft .lp .ffd-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; }
body.ft .lp .ffd-head > span { display: grid; line-height: 1.25; margin-inline-end: auto; }
body.ft .lp .ffd-head b { font-size: 11.5px; font-weight: 600; }
/* the line runs as text, so a longer headline (another language) wraps with its time and globe kept after it (31 Oct 2026) */
body.ft .lp .ffd-head small { font-size: 10px; color: #737373; display: block; }
body.ft .lp .ffd-when { white-space: nowrap; }
body.ft .lp .ffd-globe { width: 10px !important; height: 10px !important; display: inline-block; vertical-align: -1.5px; }
body.ft .lp .ffd-act { display: flex; align-items: center; gap: 12px; padding: 9px 12px 4px; position: relative; }
body.ft .lp .ffd-act .ffd-dots { position: absolute; left: 50%; transform: translateX(-50%); }
body.ft .lp .ffd-act .ffd-bm { margin-inline-start: auto; }
body.ft .lp .ffd-likes, body.ft .lp .ffd-cap { margin: 0; padding: 0 12px; font-size: 11px; line-height: 1.4; }
body.ft .lp .ffd-cap { padding-top: 3px; color: #262626; }
body.ft .lp .ffd-count { position: absolute; top: 9px; inset-inline-end: 9px; padding: 2px 7px; border-radius: 99px; background: rgb(0 0 0 / .65); color: #fff; font-size: 10px; font-weight: 500; }
/* TikTok: full screen, dark */
body.ft .lp .ffd[data-plat="tiktok"] .ffd-screen { background: #000; color: #fff; }
body.ft .lp .ffd-tt { position: absolute; inset: 0; }
body.ft .lp .ffd-tt .ffd-view { position: absolute; inset: 0; }
body.ft .lp .ffd-tt .sl { height: 100%; aspect-ratio: auto; padding-top: 22%; padding-bottom: 38%; }
body.ft .lp .ffd-tt-top { position: absolute; z-index: 3; top: 18px; inset-inline-start: 0; inset-inline-end: 0; display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 12px; color: rgb(255 255 255 / .7); }
body.ft .lp .ffd-tt-top b { color: #fff; font-weight: 600; border-bottom: 2px solid #fff; padding-bottom: 3px; }
body.ft .lp .ffd-tt-top .ic { position: absolute; inset-inline-end: 14px; width: 17px; height: 17px; color: #fff; }
body.ft .lp .ffd-tt-side { position: absolute; z-index: 3; inset-inline-end: 8px; bottom: 96px; display: grid; justify-items: center; gap: 12px; font-size: 9.5px; font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
body.ft .lp .ffd-tt-side span { display: grid; justify-items: center; gap: 2px; }
body.ft .lp .ffd-tt-side .ic { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
body.ft .lp .ffd-tt-side .ffd-av { width: 34px; height: 34px; box-shadow: 0 0 0 2px #fff; }
body.ft .lp .ffd-tt-bot { position: absolute; z-index: 3; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; padding: 40px 54px 12px 12px;padding-inline: 12px 54px; background: linear-gradient(transparent, rgb(0 0 0 / .55)); display: grid; gap: 5px; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
body.ft .lp .ffd-tt-bot b { font-size: 12px; }
body.ft .lp .ffd-tt-bot p { margin: 0; font-size: 10.5px; line-height: 1.4; }
body.ft .lp .ffd-tt-sound { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
body.ft .lp .ffd-tt-sound .ic { width: 12px; height: 12px; }
body.ft .lp .ffd-tt .ffd-dots { justify-content: flex-start; margin-top: 4px; margin-inline-start: 40%; }
body.ft .lp .ffd-tt .ffd-dots i { background: rgb(255 255 255 / .45); }
body.ft .lp .ffd-tt .ffd-dots i.is-on { background: #fff; }
/* LinkedIn */
body.ft .lp .ffd-li { background: #f4f2ee; height: 100%; }
body.ft .lp .ffd-li .ffd-bar { background: #fff; padding-bottom: 8px; height: 46px; }
body.ft .lp .ffd-search { flex: 1; display: inline-flex !important; align-items: center; gap: 6px !important; height: 26px; padding: 0 10px; border-radius: 6px; background: #edf3f8; color: #666; font-size: 11px; }
body.ft .lp .ffd-search .ic { width: 13px !important; height: 13px !important; }
body.ft .lp .ffd-li .ffd-head { background: #fff; margin-top: 6px; }
body.ft .lp .ffd-li .ffd-av { box-shadow: none; width: 34px; height: 34px; }
body.ft .lp .ffd-li .ffd-cap { background: #fff; padding: 0 12px 8px; }
body.ft .lp .ffd-li .ffd-cap span { color: #666; }
body.ft .lp .ffd-doc { background: #fff; }
body.ft .lp .ffd-doc-bar { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: #1d2226; color: #fff; font-size: 10px; }
body.ft .lp .ffd-doc-bar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ft .lp .ffd-next { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .6); color: #fff; }
body.ft .lp .ffd-next .ic { width: 14px; height: 14px; }
body.ft .lp .ffd-react { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #fff; color: #666; font-size: 10px; border-bottom: 1px solid #e8e6e1; }
body.ft .lp .ffd-emo { display: inline-flex; }
body.ft .lp .ffd-emo i { width: 13px; height: 13px; border-radius: 50%; margin-inline-end: -3px; box-shadow: 0 0 0 1.5px #fff; background: #378fe9; }
body.ft .lp .ffd-emo i:nth-child(2) { background: #df704d; }
body.ft .lp .ffd-emo i:nth-child(3) { background: #6dae4f; }
body.ft .lp .ffd-act.is-li { justify-content: space-around; background: #fff; padding: 8px 6px; color: #555; font-size: 10px; font-weight: 600; }
body.ft .lp .ffd-act.is-li span { display: grid; justify-items: center; gap: 2px; }
body.ft .lp .ffd-act.is-li .ic { width: 16px; height: 16px; }
body.ft .lp .ffd-tt .ffd-track, body.ft .lp .ffd-tt .ffd-slide { height: 100%; }
body.ft .lp .ffd-li .ffd-bar { display: none; }
body.ft .lp .ffd-li .ffd-head { margin-top: 10px; }

/* carousel sizes you can click (home-pieces/feat-sizes.php, 30 Oct 2026): the app's platforms and sizes */
body.ft .lp .fsz { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px; border-radius: 22px; background: var(--page-2, #f3f1f8); box-shadow: inset 0 0 0 1px var(--line); margin: 8px 0 20px; }
body.ft .lp .fsz-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
body.ft .lp .fsz-plats { display: grid; gap: 6px; margin-bottom: 18px; }
body.ft .lp .fsz-plat { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--card, #fff); box-shadow: 0 0 0 1px var(--line); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: start; transition: box-shadow .2s var(--ease); }
body.ft .lp .fsz-plat .ic { width: 17px; height: 17px; }
body.ft .lp .fsz-plat[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
body.ft .lp .fsz-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
body.ft .lp .fsz-size { position: relative; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--card, #fff); box-shadow: 0 0 0 1px var(--line); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
body.ft .lp .fsz-size[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
body.ft .lp .fsz-size.is-rec::after { content: ""; position: absolute; top: 4px; inset-inline-end: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }
body.ft .lp .fsz-tip { margin: 0 0 14px; min-height: 2.9em; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
body.ft .lp .fsz-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
body.ft .lp .fsz-meta div { padding: 10px 12px; border-radius: 12px; background: var(--card, #fff); box-shadow: 0 0 0 1px var(--line); }
body.ft .lp .fsz-meta dt { font-size: 11.5px; color: var(--muted); }
body.ft .lp .fsz-meta dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.ft .lp .fsz-stage { height: 440px; display: grid; place-items: center; }
body.ft .lp .fsz-frame { position: relative; aspect-ratio: var(--fsz-ar); height: min(100%, var(--fsz-h, 100%)); max-width: 100%; transition: aspect-ratio .5s var(--ease-out), height .5s var(--ease-out); }
body.ft .lp .fsz-frame[data-wide] { height: auto; width: 100%; }
body.ft .lp .fsz-slide { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; padding: 7%; border-radius: 14px; overflow: hidden; background: #222 center / cover no-repeat; color: #fff; box-shadow: 0 30px 60px -30px rgb(30 20 60 / .5); }
body.ft .lp .fsz-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 35%, transparent 45%, rgb(0 0 0 / .7)); }
body.ft .lp .fsz-slide > * { position: relative; }
body.ft .lp .fsz-top, body.ft .lp .fsz-bot { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
body.ft .lp .fsz-bot { text-transform: none; letter-spacing: 0; }
body.ft .lp .fsz-h { margin: auto 0 12px; font-size: clamp(20px, 9cqw, 44px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; max-width: 14ch; }
body.ft .lp .fsz-badge { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; padding: 3px 9px; border-radius: 99px; background: rgb(255 255 255 / .92); color: #111; font-size: 12px; font-weight: 600; }
@media (max-width: 760px) {
  body.ft .lp .fsz { grid-template-columns: 1fr; }
  body.ft .lp .fsz-plats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  body.ft .lp .fsz-stage { height: 340px; order: -1; }
}
body.ft .lp .fsz-top span:last-child { visibility: hidden; }
body.ft .lp .fsz-h { margin-top: auto; }
body.ft .lp .ft-content .fsz .fsz-h { margin: auto 0 12px; }

/* the plans tables on the comparison pages (ft_vs_rows): the same white card as every other article table ("the
   article's tables in one style" below), column names in ink with no band, the plan names untinted, our row in
   lavender; the note under it 20px down like .ft-table-note (30 Oct 2026, late, Fernando: no band with white strips
   at its sides, the note was too close). Phones keep vs.css's one card per plan. */
@media (min-width: 761px) {
  body.ft .lp .vs .vs-table { padding: 4px 8px; overflow-x: auto; border-radius: 18px; }
  body.ft .lp .vs .vs-table table { font-size: .9375rem; line-height: 1.5; }
  body.ft .lp .vs .vs-table :is(th, td) { padding: 13px 14px; background: none; }
  body.ft .lp .vs .vs-table thead :is(th, td) { padding-top: 15px; padding-bottom: 12px; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); border-bottom: 1px solid var(--line-2, var(--line)); white-space: nowrap; }
  body.ft .lp .vs .vs-table tbody th { color: var(--ink); font-weight: 500; white-space: nowrap; }
  body.ft .lp .vs .vs-table tr.is-us-row > * { background: var(--lavender); color: var(--ink); font-weight: 500; border-bottom-color: transparent; }
  body.ft .lp .vs .vs-table tr.is-us-row > :first-child { border-radius: 10px 0 0 10px;border-start-start-radius: 10px;border-start-end-radius: 0;border-end-end-radius: 0;border-end-start-radius: 10px; }
  body.ft .lp .vs .vs-table tr.is-us-row > :last-child { border-radius: 0 10px 10px 0;border-start-start-radius: 0;border-start-end-radius: 10px;border-end-end-radius: 10px;border-end-start-radius: 0; }
}
body.ft .lp .ft-content .vs .vs-caption { margin: 20px 4px 0; max-width: none; }
body.ft .lp .ft-vs figcaption { margin-top: 8px; }
/* photo and Mara covers in a page's decks (kb_slide kind photo|char) */
.lp .kb-sl-photo, .lp .kb-sl-char { display: flex; flex-direction: column; }
.lp .kb-deck .sl.kb-sl-photo > .sl-h, .lp .sl.kb-sl-photo > .sl-h { margin-top: auto; }
.lp .kb-sl-photo > *, .lp .kb-sl-char > :not(.rail-fig) { position: relative; z-index: 2; }
.lp .kb-sl-photo .sl-p { color: rgb(255 255 255 / .85); }

/* ==== The makers' three-step demo (30 Oct 2026): partials/maker-frame.php and home-pieces/mk-*.php; the script is
   assets/js/home.js (08-features, "makers"). Shared frame first, then text posts (.mkt, .mkc, .mke). ==== */
body.ft .lp .mk { --mk-bg: #f6f5f9; display: grid; gap: 26px; }
body.ft .lp .mk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
body.ft .lp .mk-tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: 20px 8px 4px 0;padding-inline: 0 8px; text-align: start; -webkit-tap-highlight-color: transparent; }
body.ft .lp .mk-bar { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
body.ft .lp .mk-bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
body.ft .lp .mk-tab.is-done .mk-bar i { transform: scaleX(1); }
body.ft .lp .mk-tab.is-run .mk-bar i { animation: mk-fill var(--dur, 8s) linear forwards; }
@keyframes mk-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.ft .lp .mk-n { grid-row: span 2; padding-top: 3px; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--subtle); }
body.ft .lp .mk-tab b { font-size: 1.0625rem; line-height: 1.4; font-weight: 500; letter-spacing: -.012em; color: var(--muted); }
body.ft .lp .mk-d { font-size: .9375rem; line-height: 1.45; color: var(--subtle); }
body.ft .lp .mk-tab:hover b, body.ft .lp .mk-tab[aria-selected="true"] b, body.ft .lp .mk-tab[aria-selected="true"] .mk-n { color: var(--ink); }
body.ft .lp .mk-tab[aria-selected="true"] .mk-d { color: var(--muted); }

body.ft .lp .mk-win { container: mkw / inline-size; position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-float), 0 50px 100px -40px rgb(60 36 110 / .28); user-select: none; -webkit-user-select: none; cursor: default; }
body.ft .lp .mk-win .ic { width: 16px; height: 16px; flex: none; }
body.ft .lp .mk-top { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px 0 12px;padding-inline: 12px 14px; border-bottom: 1px solid var(--app-line); background: var(--card); font-size: 14px; color: var(--muted); }
body.ft .lp .mk-logo, body.ft .lp .mk-logo svg { display: block; width: 28px; height: 28px; margin-inline-end: 6px; }
body.ft .lp .mk-crumb { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.ft .lp .mk-crumb i { font-style: normal; color: var(--subtle); padding: 0 4px; }
body.ft .lp .mk-crumb b { font-weight: 500; color: var(--ink); }
body.ft .lp .mk[data-step="0"] [data-crumb="0"], body.ft .lp .mk[data-step="1"] [data-crumb="1"], body.ft .lp .mk[data-step="2"] [data-crumb="2"] { display: block; }
body.ft .lp .mk-grow { flex: 1 1 auto; }
body.ft .lp .mk-me img { display: block; width: 28px; height: 28px; border-radius: 50%; }
body.ft .lp .mk-stage { position: relative; display: grid; min-height: 500px; background: var(--mk-bg); }
body.ft .lp .mk-pane { grid-area: 1 / 1; position: relative; display: grid; min-width: 0; padding: 26px clamp(14px, 3vw, 34px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
body.ft .lp .mk-pane[data-on] { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
/* the pointer: home.js moves it onto what it clicks */
body.ft .lp .mk-cur { position: absolute; z-index: 30; inset-inline-start: 0; top: 0; width: 22px; height: 22px; opacity: 0; transform: translate(var(--cx, 50%), var(--cy, 120%)); transition: transform .62s cubic-bezier(.35, .7, .25, 1), opacity .25s var(--ease); pointer-events: none; }
body.ft .lp .mk-cur.is-on { opacity: 1; }
body.ft .lp .mk-cur svg { display: block; width: 100%; height: 100%; fill: #1f1a2e; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); transition: transform .12s var(--ease); }
body.ft .lp .mk-cur.is-click svg { transform: scale(.82); }
body.ft .lp .is-press { transform: scale(.96); transition: transform .12s var(--ease); }
body.ft .lp .mk-toast { position: absolute; z-index: 25; left: 50%; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: #1f1a2e; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
body.ft .lp .mk-toast .ic { color: #6ee7a8; }
body.ft .lp .mk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* the app's small parts */
body.ft .lp .mk-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
body.ft .lp .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-ctl); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--ink); transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease); }
body.ft .lp .mk-btn.is-ghost { box-shadow: inset 0 0 0 1px var(--app-line); background: var(--card); }
body.ft .lp .mk-btn.is-primary { background: var(--ink); color: #fff; }
body.ft .lp .mk-ib { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); }
body.ft .lp .mk-pro { display: inline-flex; align-items: center; height: 16px; margin-inline-start: 6px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 9.5px; font-style: normal; font-weight: 600; vertical-align: 1px; }
body.ft .lp .mk-pop { position: absolute; z-index: 20; display: grid; gap: 2px; width: 280px; padding: 8px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .2s var(--ease), transform .25s var(--ease-out); pointer-events: none; }
body.ft .lp .mk-pop > .mk-label { padding: 4px 8px 6px; }
body.ft .lp .mk-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; font-size: 13px; color: var(--ink); }
body.ft .lp .mk-row > .ic { width: 18px; height: 18px; color: var(--muted); }
body.ft .lp .mk-row b { display: block; font-weight: 500; }
body.ft .lp .mk-row small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
body.ft .lp .mk-row[data-on], body.ft .lp .mk-row.is-hot { background: var(--violet-soft); }
body.ft .lp .mk-shimmer { background: linear-gradient(90deg, var(--muted) 30%, var(--ink) 50%, var(--muted) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mk-shim 1.6s linear infinite; }
@keyframes mk-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
body.ft .lp .mk-dlg-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--app-line); font-size: 15px; }
body.ft .lp .mk-dlg-h b { font-weight: 600; color: var(--ink); }
body.ft .lp .mk-dlg-h > .ic:last-child { margin-inline-start: auto; color: var(--muted); }
body.ft .lp .mk-dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--app-line); }

/* ---- text posts · 1: "Write it like a post you like" and the Viral templates over it ---- */
body.ft .lp .mk-pane:has(.mkt-dlg) { place-items: center; }
body.ft .lp .mkt-under { grid-area: 1 / 1; opacity: .35; filter: saturate(.6); transition: opacity .35s var(--ease), filter .35s var(--ease); }
body.ft .lp .mkt-under .is-like { display: none; }
body.ft .lp .mk-pane.is-shut .mkt-under { opacity: 1; filter: none; }
body.ft .lp .mk-pane.is-shut .mkt-under .is-like { display: inline-flex; animation: mk-pop .35s var(--ease-out); }
body.ft .lp .mkt-dlg, body.ft .lp .mkt-pick { grid-area: 1 / 1; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line), 0 30px 60px -20px rgb(31 26 46 / .3); }
body.ft .lp .mkt-dlg { width: min(100%, 560px); }
body.ft .lp .mkt-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 14px 16px 4px; list-style: none; }
body.ft .lp .mkt-how li { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
body.ft .lp .mkt-how i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); font-size: 10.5px; font-style: normal; font-weight: 600; }
body.ft .lp .mkt-how b { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); }
body.ft .lp .mkt-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px 6px; }
body.ft .lp .mkt-bar .mk-btn { height: 28px; padding: 0 9px; font-size: 12.5px; }
body.ft .lp .mkt-from { display: none; align-items: center; gap: 6px; margin: 0 16px 6px; font-size: 12px; font-weight: 500; color: var(--violet-ink); }
body.ft .lp .mkt-area { position: relative; min-height: 112px; margin: 0 16px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
body.ft .lp .mkt-ph { color: var(--subtle); }
body.ft .lp .mkt-filled { display: none; margin: 0; }
body.ft .lp .mk em { font-style: normal; color: var(--violet-ink); background: var(--violet-soft); border-radius: 4px; padding: 0 2px; }
body.ft .lp .mkt-shape { display: grid; gap: 6px; padding: 10px 16px 2px; min-height: 64px; }
body.ft .lp .mkt-shape .mk-label { opacity: 0; }
body.ft .lp .mkt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.ft .lp .mkt-chips span { padding: 3px 9px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: 11.5px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .3s var(--ease-out); }
body.ft .lp .mk-pane.is-filled .mkt-ph { display: none; }
body.ft .lp .mk-pane.is-filled .mkt-filled { display: block; }
body.ft .lp .mk-pane.is-filled .mkt-from { display: flex; }
body.ft .lp .mk-pane.is-filled .mkt-shape .mk-label { opacity: 1; }
body.ft .lp .mk-pane.is-filled .mkt-chips span { opacity: 1; transform: none; }
body.ft .lp .mkt-chips span:nth-child(2) { transition-delay: .12s; } body.ft .lp .mkt-chips span:nth-child(3) { transition-delay: .24s; }
body.ft .lp .mkt-chips span:nth-child(4) { transition-delay: .36s; } body.ft .lp .mkt-chips span:nth-child(5) { transition-delay: .48s; } body.ft .lp .mkt-chips span:nth-child(6) { transition-delay: .6s; }
body.ft .lp .mkt-pick { z-index: 5; width: min(100%, 780px); align-self: center; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .3s var(--ease), transform .4s var(--ease-out); pointer-events: none; }
body.ft .lp .mk-pane.is-pick .mkt-pick { opacity: 1; transform: none; }
body.ft .lp .mk-pane.is-pick .mkt-dlg { opacity: .4; }
/* "Write it like this" closes the dialog (the composer opens with the post's shape as a chip) */
body.ft .lp .mkt-dlg { transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
body.ft .lp .mk-pane.is-shut .mkt-dlg { opacity: 0; transform: translateY(8px) scale(.97); }
body.ft .lp .mkt-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-inline-start: 12px; padding: 0 10px; flex: 0 1 220px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; color: var(--subtle); }
body.ft .lp .mkt-pick-in { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 360px; }
body.ft .lp .mkt-cats { margin: 0; padding: 10px 8px; list-style: none; border-inline-end: 1px solid var(--app-line); }
body.ft .lp .mkt-cats li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: var(--text-soft); transition: background .2s var(--ease), color .2s var(--ease); }
body.ft .lp .mkt-cats li small { font-size: 11px; color: var(--subtle); font-variant-numeric: tabular-nums; }
body.ft .lp .mkt-cats li.is-h { font-size: 11.5px; font-weight: 500; color: var(--muted); }
body.ft .lp .mkt-cats li.is-more { color: var(--subtle); font-size: 12px; }
body.ft .lp .mkt-cats li.is-on { background: var(--violet-soft); color: var(--violet-ink); font-weight: 500; }
body.ft .lp .mkt-grid { position: relative; display: grid; padding: 12px; }
body.ft .lp .mkt-cards { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; transition: opacity .25s var(--ease); }
body.ft .lp .mkt-cards[data-cards="learnings"], body.ft .lp .mk-pane.is-learn .mkt-cards[data-cards="stories"] { opacity: 0; transition: none; }   /* the set it leaves goes at once, the new one fades in */
body.ft .lp .mk-pane.is-learn .mkt-cards[data-cards="learnings"] { opacity: 1; }
body.ft .lp .mkt-card { position: relative; overflow: hidden; height: 148px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--app-line); transition: box-shadow .2s var(--ease); }
body.ft .lp .mkt-card::after { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--card)); }
body.ft .lp .mkt-card-k { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; font-size: 11px; font-weight: 500; color: var(--violet-ink); }
body.ft .lp .mkt-card-k .ic { width: 12px; height: 12px; }
body.ft .lp .mkt-card p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
body.ft .lp .mkt-card.is-lock { display: grid; place-items: center; gap: 6px; height: 148px; background: repeating-linear-gradient(135deg, transparent 0 8px, rgb(31 26 46 / .025) 8px 9px), var(--card); text-align: center; }
body.ft .lp .mkt-card.is-lock::after { content: none; }
body.ft .lp .mkt-card.is-lock span { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 12px; color: var(--muted); }
body.ft .lp .mkt-card.is-lock b { padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; }
body.ft .lp .mkt-card.is-hot { box-shadow: inset 0 0 0 2px var(--violet); }
body.ft .lp .mkt-open { position: absolute; inset: 8px 8px 8px auto;inset-inline: auto 8px; width: min(320px, 70%); display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-float); opacity: 0; transform: translateX(16px); transition: opacity .25s var(--ease), transform .4s var(--ease-out); }
body.ft .lp .mkt-open p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
body.ft .lp .mkt-open .mkt-hint { font-size: 11.5px; color: var(--muted); }
body.ft .lp .mkt-open-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
body.ft .lp .mkt-open-f .mk-btn { height: 30px; font-size: 12.5px; }
body.ft .lp .mk-pane.is-open .mkt-open { opacity: 1; transform: none; }

/* ---- text posts · 2: Home's composer, Text post tab ---- */
body.ft .lp .mkc { position: relative; align-self: center; justify-self: center; width: min(100%, 660px); display: grid; gap: 12px; }
body.ft .lp .mkc-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
body.ft .lp .mkc-kinds span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
body.ft .lp .mkc-kinds span.is-on { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--app-line), 0 2px 6px -2px rgb(31 26 46 / .12); }
body.ft .lp .mkc-kinds i { padding: 1px 6px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: 10.5px; font-style: normal; }
body.ft .lp .mkc-box { display: grid; gap: 10px; padding: 12px 12px 10px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line), 0 18px 40px -22px rgb(31 26 46 / .3); }
body.ft .lp .mkc-refs { display: flex; flex-wrap: wrap; gap: 6px; }
body.ft .lp .mkc-add { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
body.ft .lp .mkc-src { display: none; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px;padding-inline: 10px 8px; border-radius: 10px; background: var(--mk-bg); font-size: 12px; }
body.ft .lp .mkc-src b { font-weight: 500; color: var(--ink); } body.ft .lp .mkc-src small { margin-inline-start: 6px; color: var(--muted); }
body.ft .lp .mkc-src > .ic:first-child { color: var(--violet); } body.ft .lp .mkc-src > .ic:last-child { width: 13px; height: 13px; color: var(--subtle); }
body.ft .lp .mk-pane.has-src .mkc-src { display: inline-flex; animation: mk-pop .35s var(--ease-out); }
@keyframes mk-pop { from { opacity: 0; transform: scale(.94); } }
body.ft .lp .mkc-idea { position: relative; min-height: 56px; margin: 0; padding: 2px 4px; font-size: 17px; line-height: 1.45; color: var(--ink); }
body.ft .lp .mkc-ph { position: absolute; inset-inline-start: 4px; top: 2px; color: var(--subtle); }
body.ft .lp .mkc-idea [data-mk-type]:not(:empty) ~ .mkc-caret, body.ft .lp .mkc-caret { display: inline-block; width: 2px; height: 1.15em; margin-inline-start: 1px; vertical-align: -3px; background: var(--violet); animation: mk-blink 1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
body.ft .lp .mk-pane.is-typed .mkc-ph { display: none; }
body.ft .lp .mkc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.ft .lp .mkc-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--app-line); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
body.ft .lp .mkc-chip.is-like { background: var(--violet-soft); box-shadow: none; color: var(--violet-ink); }
body.ft .lp .mkc-chip .mkc-cd { width: 12px; height: 12px; color: var(--subtle); }
body.ft .lp .mkc-w { display: inline-flex; align-items: center; gap: 6px; }
body.ft .lp .mkc-w[data-mk-w="natural"], body.ft .lp .mk-pane.is-mia .mkc-w[data-mk-w="auto"] { display: none; }
body.ft .lp .mk-pane.is-mia .mkc-w[data-mk-w="natural"] { display: inline-flex; }
body.ft .lp .mkc-gen { height: 34px; }
body.ft .lp .mkc-pop-src { inset-inline-start: 12px; top: 96px; }
body.ft .lp .mkc-pop-w { inset-inline-start: 210px; top: 210px; }
body.ft .lp .mk-pane.is-src .mkc-pop-src, body.ft .lp .mk-pane.is-w .mkc-pop-w { opacity: 1; transform: none; }
body.ft .lp .mkc-wm { flex: none; }
body.ft .lp .mkc-writing { position: absolute; left: 50%; top: 50%; z-index: 6; display: flex; align-items: center; gap: 14px; width: min(92%, 380px); padding: 18px 20px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line), 0 30px 60px -20px rgb(31 26 46 / .35); opacity: 0; transform: translate(-50%, -46%); transition: opacity .3s var(--ease), transform .4s var(--ease-out); overflow: hidden; }
body.ft .lp .mkc-writing b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
body.ft .lp .mkc-writing small { display: block; font-size: 13px; }
body.ft .lp .mkc-wbar { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%; background: var(--violet); transform: scaleX(0); transform-origin: left; }
body.ft .lp .mk-pane.is-writing .mkc-box, body.ft .lp .mk-pane.is-writing .mkc-kinds { opacity: .45; transition: opacity .3s var(--ease); }
body.ft .lp .mk-pane.is-writing .mkc-writing { opacity: 1; transform: translate(-50%, -50%); }
body.ft .lp .mk-pane.is-writing .mkc-wbar { transform: scaleX(1); transition: transform 2.2s var(--ease); }

/* ---- text posts · 3: the post editor ---- */
body.ft .lp .mke { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 18px; align-items: start; }
body.ft .lp .mke-l { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line); }
body.ft .lp .mke-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
body.ft .lp .mke-head b { font-weight: 500; color: var(--ink); }
body.ft .lp .mke-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--mk-bg); }
body.ft .lp .mke-seg span { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 7px; color: var(--muted); }
body.ft .lp .mke-seg span.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(31 26 46 / .12); }
body.ft .lp .mke-tools { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--app-line); }
body.ft .lp .mke-tools > span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 7px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
body.ft .lp .mke-tools > i { width: 1px; height: 18px; margin: 0 4px; background: var(--app-line); }
body.ft .lp .mke-tools .ic { width: 15px; height: 15px; }
body.ft .lp .mke-text { position: relative; font-size: 13px; line-height: 1.55; color: var(--ink); }
body.ft .lp .mke-text p { margin: 0 0 8px; }
body.ft .lp .mke-text b, body.ft .lp .mke-pt b { font-weight: 600; }
body.ft .lp .mke-cut { position: absolute; inset-inline-start: -14px; inset-inline-end: -14px; top: 84px; border-top: 1px dashed var(--violet); }
body.ft .lp .mke-cut span { position: absolute; inset-inline-end: 14px; top: -10px; padding: 1px 7px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: 10.5px; font-style: normal; font-weight: 500; }
body.ft .lp .mke-alts { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid var(--app-line); }
body.ft .lp .mke-alt { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--app-line); font-size: 12.5px; line-height: 1.4; color: var(--text-soft); transition: box-shadow .2s var(--ease), background .2s var(--ease); }
body.ft .lp .mke-alt i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--mk-bg); font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--muted); }
body.ft .lp .mke-alt.is-hot { box-shadow: inset 0 0 0 2px var(--violet); background: var(--violet-soft); }
body.ft .lp .mke-r { display: grid; gap: 12px; }
body.ft .lp .mke-pv { padding: 14px 16px 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--app-line), 0 12px 30px -18px rgb(31 26 46 / .25); }
body.ft .lp .mke-who { display: flex; align-items: center; gap: 10px; }
body.ft .lp .mke-who img { width: 40px; height: 40px; border-radius: 50%; }
body.ft .lp .mke-who b { display: block; font-size: 14px; font-weight: 600; color: #191919; }
body.ft .lp .mke-who small { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #666; }
body.ft .lp .mke-who small .ic { width: 12px; height: 12px; }
body.ft .lp .mke-pt { margin: 12px 0 10px; font-size: 13.5px; line-height: 1.5; color: #191919; }
body.ft .lp .mke-more { color: #666; margin-inline-start: 2px; }
body.ft .lp .mke-acts { display: flex; justify-content: space-between; padding-top: 4px; border-top: 1px solid rgb(0 0 0 / .08); }
body.ft .lp .mke-acts span { display: inline-flex; align-items: center; gap: 5px; padding: 8px 6px; font-size: 12.5px; font-weight: 600; color: #666; }
body.ft .lp .mke-ready { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line); font-size: 12.5px; color: var(--text-soft); }
body.ft .lp .mke-ready > span:not(.mk-label) { display: flex; align-items: center; gap: 7px; }
body.ft .lp .mke-ready .ic { width: 15px; height: 15px; color: #22a06b; }
body.ft .lp .mke-go { position: relative; display: flex; justify-content: flex-end; gap: 8px; }
body.ft .lp .mke-pop { inset-inline-end: 0; bottom: 42px; width: 250px; transform-origin: bottom right; }
body.ft .lp .mk-pane.is-post .mke-pop { opacity: 1; transform: none; }
body.ft .lp [data-mk-first] { transition: background .5s var(--ease); border-radius: 4px; }
body.ft .lp .mk-pane.is-swap [data-mk-first] { background: var(--violet-soft); }

/* ---- image posts · 1: Home's Image post tab and "Creating your image post" (the app's progress view) ---- */
body.ft .lp .mki-gen { position: absolute; left: 50%; top: 50%; z-index: 6; display: grid; gap: 14px; width: min(100%, 560px); padding: 18px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line), 0 30px 60px -20px rgb(31 26 46 / .35); opacity: 0; transform: translate(-50%, -46%); transition: opacity .3s var(--ease), transform .4s var(--ease-out); pointer-events: none; }
body.ft .lp .mk-pane.is-gen .mki-gen { opacity: 1; transform: translate(-50%, -50%); }
body.ft .lp .mk-pane.is-gen .mkc-box, body.ft .lp .mk-pane.is-gen .mkc-kinds { opacity: .4; transition: opacity .3s var(--ease); }
body.ft .lp .mki-gen-h { display: flex; align-items: center; gap: 12px; }
body.ft .lp .mki-gen-t { flex: 1 1 auto; min-width: 0; }
body.ft .lp .mki-gen-t b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
body.ft .lp .mki-gen-t small { display: block; font-size: 13px; color: var(--muted); }
body.ft .lp .mki-gen-h .mk-btn { height: 30px; font-size: 12.5px; }
body.ft .lp .mki-gen-h .mk-btn .ic { width: 14px; height: 14px; }
body.ft .lp .mki-film { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.ft .lp .mki-card { position: relative; display: grid; align-content: end; aspect-ratio: 4 / 5; padding: 10px; border-radius: 10px; background: var(--mk-bg); overflow: hidden; transition: background .4s var(--ease), color .4s var(--ease); transition-delay: calc(var(--i) * 90ms); }
body.ft .lp .mki-card i { position: absolute; inset-inline-start: 9px; top: 7px; font-size: 11px; font-style: normal; font-weight: 600; color: var(--subtle); }
body.ft .lp .mki-card span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.25; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
/* planned: the theme's colours (Lavender Haze, the 'ip' deck's); written: each card gets its words */
body.ft .lp .mk-pane[data-g="write"] .mki-card, body.ft .lp .mk-pane[data-g="design"] .mki-card, body.ft .lp .mk-pane[data-g="done"] .mki-card { background: #efe9ff; color: #231c47; }
body.ft .lp .mk-pane[data-g] .mki-card i { color: #7b5cff; }
body.ft .lp .mki-film[data-w="1"] .mki-card:nth-child(-n+1) span, body.ft .lp .mki-film[data-w="2"] .mki-card:nth-child(-n+2) span,
body.ft .lp .mki-film[data-w="3"] .mki-card:nth-child(-n+3) span, body.ft .lp .mki-film[data-w="4"] .mki-card span { opacity: 1; transform: none; transition-delay: 0s; }
body.ft .lp .mki-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--subtle); }
body.ft .lp .mki-steps li { display: flex; align-items: center; gap: 9px; transition: color .25s var(--ease); }
body.ft .lp .mki-steps i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
body.ft .lp .mki-steps i::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: 0; }
/* the step at work pulses; the ones before it are ticked */
body.ft .lp .mk-pane[data-g="plan"] [data-s="plan"], body.ft .lp .mk-pane[data-g="write"] [data-s="write"], body.ft .lp .mk-pane[data-g="design"] [data-s="design"] { color: var(--ink); }
body.ft .lp .mk-pane[data-g="plan"] [data-s="plan"] i, body.ft .lp .mk-pane[data-g="write"] [data-s="write"] i, body.ft .lp .mk-pane[data-g="design"] [data-s="design"] i { box-shadow: inset 0 0 0 4px var(--violet); animation: mki-pulse 1s var(--ease) infinite alternate; }
@keyframes mki-pulse { to { box-shadow: inset 0 0 0 2px var(--violet); } }
body.ft .lp .mk-pane[data-g="write"] [data-s="plan"], body.ft .lp .mk-pane[data-g="design"] [data-s="plan"], body.ft .lp .mk-pane[data-g="design"] [data-s="write"], body.ft .lp .mk-pane[data-g="done"] .mki-steps li { color: var(--text-soft); }
body.ft .lp .mk-pane[data-g="write"] [data-s="plan"] i, body.ft .lp .mk-pane[data-g="design"] [data-s="plan"] i, body.ft .lp .mk-pane[data-g="design"] [data-s="write"] i, body.ft .lp .mk-pane[data-g="done"] .mki-steps i { background: #22a06b; box-shadow: none; }
body.ft .lp .mk-pane[data-g="write"] [data-s="plan"] i::after, body.ft .lp .mk-pane[data-g="design"] [data-s="plan"] i::after, body.ft .lp .mk-pane[data-g="design"] [data-s="write"] i::after, body.ft .lp .mk-pane[data-g="done"] .mki-steps i::after { opacity: 1; }
body.ft .lp .mki-foot { margin: 0; font-size: 12px; color: var(--subtle); }

/* ---- image posts · 2 and 3: the editor with one picture, its versions, and Post ---- */
body.ft .lp .mki-ed { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-width: 0; }
body.ft .lp .mki-bar { display: flex; align-items: center; gap: 6px; }
body.ft .lp .mki-bar .mk-btn { height: 32px; font-size: 13px; }
body.ft .lp .mki-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
body.ft .lp .mki-save .ic { width: 14px; height: 14px; color: #22a06b; }
body.ft .lp .mki-plat { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-ctl); font-size: 13px; font-weight: 500; color: var(--ink); }
body.ft .lp .mki-plat small { font-size: 13px; color: var(--muted); }
body.ft .lp .mki-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
body.ft .lp .mki-cv { position: relative; display: grid; justify-items: center; gap: 8px; }
body.ft .lp .mki-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 304px; max-width: 100%; }
body.ft .lp .mki-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); }
body.ft .lp .mki-name b { font-weight: 600; color: var(--ink); }
body.ft .lp .mki-name .ic { width: 12px; height: 12px; }
body.ft .lp .mki-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ft .lp .mki-pill .ic { width: 14px; height: 14px; }
/* one name or line at a time: the version's (data-v) */
body.ft .lp .mki-swap > [data-v]:not(.on) { display: none; }
body.ft .lp .mki-name .mki-swap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ft .lp .mki-frame { position: relative; width: 304px; max-width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #f2dfc2; box-shadow: 0 1px 2px rgb(31 26 46 / .08), 0 18px 40px -20px rgb(31 26 46 / .35); }
body.ft .lp .mki-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
body.ft .lp .mki-frame img.on { opacity: 1; transform: none; }
body.ft .lp .mki-vers { width: 260px; transform-origin: top right; }
body.ft .lp .mki-vers { gap: 0; padding: 6px; }
body.ft .lp .mki-vers .mk-row { padding: 4px 8px; font-size: 12.5px; }
body.ft .lp .mki-vers .mk-row small { font-size: 11px; line-height: 1.3; }
body.ft .lp .mki-vers .mk-row > span { flex: 1 1 auto; min-width: 0; }
body.ft .lp .mki-vers .mk-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ft .lp .mki-vers .mk-row.is-more { display: none; }
body.ft .lp .mk-pane.has-more .mki-vers .mk-row.is-more { display: flex; }
body.ft .lp .mki-tick { opacity: 0; color: var(--violet); }
body.ft .lp .mki-vers .mk-row.on { background: var(--violet-soft); }
body.ft .lp .mki-vers .mk-row.on .mki-tick { opacity: 1; }
body.ft .lp .mki-sep { display: block; height: 1px; margin: 4px 6px; background: var(--app-line); }
body.ft .lp .mk-pane.is-vers .mki-vers { opacity: 1; transform: none; }
body.ft .lp .mki-pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line); }
body.ft .lp .mki-pn-h { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink); }
body.ft .lp .mki-pn-h:not(:first-child) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--app-line); }
body.ft .lp .mki-lt { display: flex; gap: 10px; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--app-line); }
body.ft .lp .mki-lt-art { position: relative; flex: none; width: 52px; aspect-ratio: 4 / 5; border-radius: 5px; overflow: hidden; background: #f2dfc2; }
body.ft .lp .mki-lt-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); }
body.ft .lp .mki-lt-art img.on { opacity: 1; }
body.ft .lp .mki-lt-t { display: grid; align-content: start; gap: 2px; min-width: 0; }
body.ft .lp .mki-lt-t b { font-size: 13px; font-weight: 500; color: var(--ink); }
body.ft .lp .mki-lt-t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
body.ft .lp .mki-lt-c { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--violet-ink); }
body.ft .lp .mki-lt-c .ic { width: 11px; height: 11px; }
body.ft .lp .mki-ver { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: var(--mk-bg); }
body.ft .lp .mki-ver .mk-ib { flex: none; background: var(--card); box-shadow: 0 1px 2px rgb(31 26 46 / .12); color: var(--ink); transition: transform .12s var(--ease); }
body.ft .lp .mki-ver-m { flex: 1 1 auto; min-width: 0; display: grid; text-align: center; }
body.ft .lp .mki-ver-m b { font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.ft .lp .mki-ver-m small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ft .lp .mki-more { width: 100%; height: 32px; font-size: 12.5px; }
body.ft .lp .mki-more .ic { color: var(--violet); }
body.ft .lp .mki-els > [data-v] { display: none; grid-template-columns: minmax(0, 1fr); gap: 6px; }
body.ft .lp .mki-els > [data-v].on { display: grid; animation: mk-pop .35s var(--ease-out); }
body.ft .lp .mki-el { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--app-line); }
body.ft .lp .mki-el > .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--muted); }
body.ft .lp .mki-el > span { min-width: 0; }
body.ft .lp .mki-el b { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
body.ft .lp .mki-el small { display: block; font-size: 12px; line-height: 1.35; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Post to LinkedIn, over the editor */
body.ft .lp .mk-pane:has(.mki-post) { place-items: stretch; }
body.ft .lp .mk-pane:has(.mki-post) > .mki-ed { grid-area: 1 / 1; transition: opacity .3s var(--ease); }
body.ft .lp .mk-pane.is-post > .mki-ed { opacity: .35; }
body.ft .lp .mki-post { grid-area: 1 / 1; z-index: 5; align-self: center; justify-self: center; width: min(100%, 640px); border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line), 0 30px 60px -20px rgb(31 26 46 / .35); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .3s var(--ease), transform .4s var(--ease-out); pointer-events: none; }
body.ft .lp .mk-pane.is-post .mki-post { opacity: 1; transform: none; }
body.ft .lp .mki-post-in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 16px; }
body.ft .lp .mki-post-pic img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--app-line); }
body.ft .lp .mki-post-f { display: grid; align-content: start; gap: 8px; min-width: 0; }
body.ft .lp .mki-post-f .mke-who img { width: 36px; height: 36px; }
body.ft .lp .mki-post-f .mke-who small { color: #22a06b; }
body.ft .lp .mki-what { display: flex; align-items: center; gap: 7px; margin: 2px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--mk-bg); font-size: 12.5px; color: var(--text-soft); }
body.ft .lp .mki-what .ic { color: var(--violet); }
body.ft .lp .mki-cap { margin: 0; padding: 9px 11px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
body.ft .lp .mki-when { display: inline-flex; justify-self: start; gap: 2px; padding: 2px; border-radius: 9px; background: var(--mk-bg); }
body.ft .lp .mki-when span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
body.ft .lp .mki-when span.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(31 26 46 / .12); }
body.ft .lp .mki-post-go { display: flex; justify-content: flex-end; margin-top: 4px; }
body.ft .lp .mki-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: mki-spin .8s linear infinite; }
body.ft .lp .mk-pane.is-sending .mki-spin { display: inline-block; }
@keyframes mki-spin { to { transform: rotate(360deg); } }

/* ---- video posts: Home's Video post tab, the clips, the designs over the moving clip, trim and Download ---- */
body.ft .lp .mki-ed { position: relative; }
body.ft .lp .mk-pane > .mki-ed, body.ft .lp .mk-pane > .mkv-pic { grid-area: 1 / 1; }
body.ft .lp .mki-film.is-tall { grid-template-columns: repeat(3, minmax(0, 120px)); }
body.ft .lp .mki-film.is-tall .mki-card { aspect-ratio: 9 / 16; }
body.ft .lp .mk[data-mk="video"] .mk-pane[data-g="write"] .mki-card, body.ft .lp .mk[data-mk="video"] .mk-pane[data-g="design"] .mki-card, body.ft .lp .mk[data-mk="video"] .mk-pane[data-g="done"] .mki-card { background: #17151c; color: #fff; }
body.ft .lp .mk[data-mk="video"] .mk-pane[data-g] .mki-card i { color: #ffd23f; }
body.ft .lp .mkv-frame { width: 216px; aspect-ratio: 9 / 16; background: #26212e; border-radius: 10px; }
body.ft .lp .mk[data-mk="video"] .mki-num { width: 216px; }
body.ft .lp .mkv-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .25); }
body.ft .lp .mkv-empty .ic { width: 34px; height: 34px; }
body.ft .lp .mkv-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
body.ft .lp .mk-pane.has-clip .mkv-clip { opacity: 1; }
/* Picture for slide 1, on Stock clips */
body.ft .lp .mkv-pic { z-index: 5; align-self: center; justify-self: center; width: min(100%, 640px); border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--app-line), 0 30px 60px -20px rgb(31 26 46 / .35); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .3s var(--ease), transform .4s var(--ease-out); pointer-events: none; overflow: hidden; }
body.ft .lp .mk-pane.is-pick .mkv-pic { opacity: 1; transform: none; }
body.ft .lp .mk-pane.is-pick > .mki-ed { opacity: .35; transition: opacity .3s var(--ease); }
body.ft .lp .mkv-tabs { display: flex; gap: 2px; padding: 8px 12px 0; overflow: hidden; border-bottom: 1px solid var(--app-line); }
body.ft .lp .mkv-tabs span { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 8px 10px 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
body.ft .lp .mkv-tabs span.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
body.ft .lp .mkv-tabs .ic { width: 15px; height: 15px; }
body.ft .lp .mkv-pic-in { display: grid; gap: 12px; padding: 14px 16px 16px; }
body.ft .lp .mkv-q { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--ink); }
body.ft .lp .mkv-q .ic { color: var(--muted); }
body.ft .lp .mkv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
body.ft .lp .mkv-card { position: relative; display: block; border-radius: 9px; overflow: hidden; background: var(--mk-bg); transition: transform .12s var(--ease), box-shadow .2s var(--ease); }
body.ft .lp .mkv-card img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
body.ft .lp .mkv-dur { position: absolute; inset-inline-start: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
body.ft .lp .mkv-dur .ic { width: 9px; height: 9px; }
body.ft .lp .mkv-use { position: absolute; left: 50%; top: 50%; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; opacity: 0; transform: translate(-50%, -40%); transition: opacity .2s var(--ease), transform .25s var(--ease-out); }
body.ft .lp .mkv-card.is-hover { box-shadow: 0 0 0 2px var(--violet); }
body.ft .lp .mkv-card.is-hover .mkv-use { opacity: 1; transform: translate(-50%, -50%); }
body.ft .lp .mkv-card.is-busy .mkv-use { opacity: 0; }
body.ft .lp .mkv-card .mki-spin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 2.5px; }
body.ft .lp .mkv-card.is-busy .mki-spin { display: block; }
body.ft .lp .mkv-clipname .is-yes, body.ft .lp .mk-pane.has-clip .mkv-clipname .is-no { display: none; }
body.ft .lp .mk-pane.has-clip .mkv-clipname .is-yes { display: inline; }
/* the Clip panel: where it starts and ends, its sound */
body.ft .lp .mkv-clipinfo { display: flex; align-items: center; gap: 10px; }
body.ft .lp .mkv-clipinfo img { flex: none; width: 34px; height: 60px; border-radius: 6px; object-fit: cover; }
body.ft .lp .mkv-clipinfo > span:not(.mk-btn) { flex: 1 1 auto; min-width: 0; display: grid; }
body.ft .lp .mkv-clipinfo b { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ft .lp .mkv-clipinfo small { font-size: 11.5px; color: var(--muted); }
body.ft .lp .mkv-clipinfo .mk-btn { height: 28px; padding: 0 9px; font-size: 12px; }
body.ft .lp .mkv-clipinfo .mk-btn .ic { width: 12px; height: 12px; }
body.ft .lp .mkv-slider { --s: 0; display: grid; gap: 9px; margin-top: 4px; }
body.ft .lp .mkv-slider.is-end { --s: 1; }
body.ft .lp .mkv-sl-h { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink); }
body.ft .lp .mkv-sl-h b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
body.ft .lp .mkv-track { position: relative; height: 4px; margin: 0 8px; border-radius: 2px; background: var(--line-2); }
body.ft .lp .mkv-fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: calc(var(--s) * 100%); border-radius: 2px; background: var(--violet); }
body.ft .lp .mkv-knob { position: absolute; top: 50%; inset-inline-start: calc(var(--s) * 100%); width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--violet), 0 2px 6px rgb(31 26 46 / .25); transform: translate(-50%, -50%); transition: transform .12s var(--ease); }
body.ft .lp .mk-pane.is-drag .mkv-slider:not(.is-end) .mkv-knob { transform: translate(-50%, -50%) scale(1.15); }
body.ft .lp .mkv-len { margin: 0; font-size: 12px; color: var(--muted); }
body.ft .lp .mkv-row { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--app-line); font-size: 12.5px; color: var(--ink); }
body.ft .lp .mkv-switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--line-2); }
body.ft .lp .mkv-switch::after { content: ""; position: absolute; inset-inline-start: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(31 26 46 / .25); }
/* Download: the video is drawn and recorded in the browser */
body.ft .lp .mkv-dl { position: absolute; inset-inline-end: 0; top: 40px; z-index: 6; display: grid; gap: 8px; width: 270px; padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-float); font-size: 12.5px; color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .25s var(--ease-out); }
body.ft .lp .mk-pane.is-dl .mkv-dl { opacity: 1; transform: none; }
body.ft .lp .mkv-meter { display: block; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
body.ft .lp .mkv-meter b { display: block; width: 0; height: 100%; background: var(--violet); transition: width 1.6s linear; }

/* ---- narrower windows: fewer side parts, the same story ---- */
@container mkw (max-width: 760px) {
  body.ft .lp .mkt-how { display: none; }
  body.ft .lp .mkt-pick-in { grid-template-columns: minmax(0, 1fr); }
  body.ft .lp .mkt-cats { display: flex; gap: 4px; overflow: hidden; padding: 8px; border-inline-end: 0; border-bottom: 1px solid var(--app-line); }
  body.ft .lp .mkt-cats li { flex: none; }
  body.ft .lp .mkt-cats li.is-h, body.ft .lp .mkt-cats li.is-more, body.ft .lp .mkt-cats li small { display: none; }
  body.ft .lp .mkt-search { display: none; }
  body.ft .lp .mke { grid-template-columns: minmax(0, 1fr); }
  body.ft .lp .mke-r { grid-template-columns: minmax(0, 1fr); }
  /* the preview, then the other first lines, then Copy post / Post to LinkedIn */
  body.ft .lp .mke-r { display: contents; }
  body.ft .lp .mke-pv { order: 1; } body.ft .lp .mke-l { order: 2; padding: 10px; } body.ft .lp .mke-go { order: 3; }
  body.ft .lp .mke-l > :not(.mke-alts) { display: none; }
  body.ft .lp .mke-l .mke-alts { padding-top: 0; border-top: 0; }
  body.ft .lp .mke-r .mke-ready { display: none; }
  body.ft .lp .mk-toast { width: max-content; max-width: calc(100% - 24px); white-space: normal; }
  /* image posts: the picture, then its versions; the rest of the panel steps aside */
  body.ft .lp .mki-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.ft .lp .mki-pn { padding: 10px; }
  body.ft .lp .mki-pn > :not(.mki-ver):not(.mki-more) { display: none; }
  body.ft .lp .mki-pn { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  body.ft .lp .mki-more { width: auto; }
  body.ft .lp .mki-bar .mki-save, body.ft .lp .mki-bar .mk-ib, body.ft .lp .mki-plat small { display: none; }
  body.ft .lp .mki-post-in { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px; }
  body.ft .lp .mki-pn > .mkv-slider[data-mkv-s] { display: grid; }
  body.ft .lp .mki-pn > .mkv-len { display: block; }
  body.ft .lp .mkv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ft .lp .mkv-dl { top: 38px; width: min(270px, 100%); }
}
@container mkw (max-width: 520px) {
  body.ft .lp .mk-pane { padding: 16px 12px; }
  body.ft .lp .mkt-cards { grid-template-columns: minmax(0, 1fr); }
  body.ft .lp .mkt-cards .mkt-card:nth-child(n+3) { display: none; }
  body.ft .lp .mkt-open { inset: 8px; width: auto; }
  body.ft .lp .mkt-bar .mk-btn:last-child { display: none; }
  body.ft .lp .mkc-kinds span:not(.is-on):not(:first-child) { display: none; }   /* Carousel and the tab at work */
  body.ft .lp .mkc-idea { font-size: 15px; }
  body.ft .lp .mke-alt:nth-child(n+4) { display: none; }
  body.ft .lp .mki-film { gap: 6px; }
  body.ft .lp .mki-card { padding: 22px 7px 7px; }
  body.ft .lp .mki-card i { inset-inline-start: 7px; top: 5px; }
  body.ft .lp .mki-card span { font-size: 10px; -webkit-line-clamp: 3; }
  body.ft .lp .mki-gen { padding: 14px; gap: 10px; }
  body.ft .lp .mki-gen-h .mk-btn, body.ft .lp .mki-foot { display: none; }
  body.ft .lp .mki-frame, body.ft .lp .mki-num { width: 236px; }
  body.ft .lp .mki-plat { display: none; }
  body.ft .lp .mki-dl { display: none; }
  body.ft .lp .mki-pn { grid-template-columns: minmax(0, 1fr); }
  body.ft .lp .mki-post-in { grid-template-columns: minmax(0, 1fr); }
  body.ft .lp .mki-post-pic { display: none; }
  body.ft .lp .mkv-frame, body.ft .lp .mk[data-mk="video"] .mki-num { width: 200px; }
  body.ft .lp .mkv-tabs span:nth-child(n+4) { display: none; }
  body.ft .lp .mkv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 760px) {
  body.ft .lp .mk-tabs { gap: 12px; }
  body.ft .lp .mk-tab { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  body.ft .lp .mk-n { grid-row: auto; padding: 0; }
  body.ft .lp .mk-tab b { font-size: .875rem; line-height: 1.3; }
  body.ft .lp .mk-d { display: none; }
  body.ft .lp .mk-stage { min-height: 460px; }
}

/* ---- 30 Oct 2026, the article's tables in one style (Fernando: "some tables are so bad"): a white card like the
   comparison tables, column names in ink with no band, the label column untinted, hairlines between rows. Plain
   comparisons are drawn by the same ft_spec(), with a tick, a cross or "Partly". Replaces the 27 Oct lavender look. ---- */
body.ft .lp .ft-content .ftk-table { margin: 6px 0 24px; padding: 4px 8px; overflow-x: auto; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .lp .ft-content .ftk-table table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .9375rem; line-height: 1.5; }
body.ft .lp .ft-content .ftk-table :is(th, td) { padding: 13px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); background: none; }
body.ft .lp .ft-content .ftk-table thead th { padding-top: 15px; padding-bottom: 12px; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); background: none; border-bottom: 1px solid var(--line-2, var(--line)); }
body.ft .lp .ft-content .ftk-table tbody td { color: var(--text-soft); }
body.ft .lp .ft-content .ftk-table tbody td:first-child { color: var(--ink); font-weight: 500; background: none; }
body.ft .lp .ft-content .ftk-table tbody tr:hover > td { background: none; }
body.ft .lp .ft-content .ftk-table tbody tr:last-child > * { border-bottom: 0; }
body.ft .lp .ft-content .ftk-table tr.is-pick > td { background: var(--lavender); border-bottom-color: transparent; }
body.ft .lp .ft-content .ftk-table tr.is-pick > td:first-child { border-radius: 10px 0 0 10px;border-start-start-radius: 10px;border-start-end-radius: 0;border-end-end-radius: 0;border-end-start-radius: 10px; }
body.ft .lp .ft-content .ftk-table tr.is-pick > td:last-child { border-radius: 0 10px 10px 0;border-start-start-radius: 0;border-start-end-radius: 10px;border-end-end-radius: 10px;border-end-start-radius: 0; }
body.ft .lp .ft-content .ftk-table :is(.ft-tick, .ft-cross) { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: top; }
body.ft .lp .ft-content .ftk-table .ft-tick { background: var(--violet-soft); color: var(--violet-ink); }
body.ft .lp .ft-content .ftk-table .ft-cross { background: rgb(31 26 46 / .06); color: var(--muted); }
body.ft .lp .ft-content .ftk-table :is(.ft-tick, .ft-cross) .ic { width: 12px; height: 12px; }
body.ft .lp .ft-content .ftk-table .ft-part { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
body.ft .lp .ft-content .ftk-table .ft-part .ic { width: 14px; height: 14px; }
@media (min-width: 700px) { body.ft .lp .ft-content .ftk-table thead th { white-space: nowrap; } }
@media (min-width: 700px) { body.ft .lp .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 .lp .ft-content .ftk-table { padding: 2px 6px; }
  body.ft .lp .ft-content .ftk-table :is(th, td) { padding: 12px 10px; }
  body.ft .lp .ft-content .ftk-table.is-wide { padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  body.ft .lp .ft-content .ftk-table.is-wide tr { margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-tile); }
  body.ft .lp .ft-content .ftk-table.is-wide tr.is-pick { background: var(--lavender); }
  body.ft .lp .ft-content .ftk-table.is-wide :is(th, td), body.ft .lp .ft-content .ftk-table.is-wide tr.is-pick > td { padding: 4px 0; border: 0; border-radius: 0; background: none; }
  body.ft .lp .ft-content .ftk-table.is-wide tbody tr > :first-child { padding-bottom: 8px; font-size: 1rem; }
}

/* ---- 30 Oct 2026, posts around carousels (Fernando: "the bad wrappers"), drawn like the homepage's LinkedIn post
   (home.css .pb-post): Mara's photo, the pictures edge to edge with the counter and the arrows on them, and each app's
   own actions. One theme per carousel (kb_deck). Markup: kb.php kb_deck() and kb_frame_*(). ---- */
.lp .kb-deck.has-frame { --cell: 100%; display: grid; gap: 12px; max-width: 420px; }
.lp .kb-deck.has-frame .kb-post { position: relative; overflow: hidden; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(24 21 31 / .08), 0 22px 44px -24px rgb(24 21 31 / .32); color: #191919; text-align: start; }
.lp .kb-deck.has-frame .kb-post-top { display: flex; align-items: center; gap: 10px; padding: 12px 10px 8px 14px;padding-inline: 14px 10px; }
.lp .kb-deck.has-frame .kb-post-av { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.lp .kb-deck.has-frame .kb-post-av.is-brand { display: grid; place-items: center; border-radius: 8px; background: var(--b, #7f56d9); color: #fff; }
.lp .kb-deck.has-frame .kb-post-av.is-brand .ic { width: 20px; height: 20px; }
.lp .kb-deck.has-frame .kb-post-av.is-brand b { font-size: .8125rem; font-weight: 600; }
.lp .kb-deck.has-frame .kb-post-av.is-logo svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.lp .kb-deck.has-frame .kb-post-who { display: grid; min-width: 0; line-height: 1.3; }
.lp .kb-deck.has-frame .kb-post-who b { font-size: .875rem; font-weight: 600; color: inherit; }
.lp .kb-deck.has-frame .kb-post-who small { display: flex; align-items: center; gap: 3px; overflow: hidden; font-size: .75rem; color: #666; white-space: nowrap; text-overflow: ellipsis; }
.lp .kb-deck.has-frame .kb-post-who small .ic { width: 12px; height: 12px; }
.lp .kb-deck.has-frame .kb-post-net { margin-inline-start: auto; align-self: flex-start; color: #666; }
.lp .kb-deck.has-frame .kb-post-net .ic { width: 20px; height: 20px; }
.lp .kb-deck.has-frame p.kb-post-cap { display: block; max-width: none; margin: 0; padding: 0 14px 10px; font-size: .875rem; line-height: 1.45; color: inherit; }
.lp .kb-deck.has-frame p.kb-post-cap b { font-weight: 600; }
.lp .kb-deck.has-frame .kb-post-more { margin-inline-start: 3px; color: #666; white-space: nowrap; }
.lp .kb-deck.has-frame .kb-post-media { position: relative; }
.lp .kb-deck.has-frame .kb-deck-vp { border-radius: 0; }
.lp .kb-deck.has-frame .kb-deck-track { gap: 0; padding: 0; }
.lp .kb-deck.has-frame :is(.kb-asl, .sl) { border-radius: 0; box-shadow: none; }
/* the counter and the arrows sit on the pictures */
.lp .kb-deck.has-frame .kb-deck-ui { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
.lp .kb-deck.has-frame .kb-deck-n { position: absolute; top: 10px; inset-inline-end: 10px; min-width: 0; height: 22px; padding: 0 8px; border-radius: 99px; background: rgb(31 26 46 / .62); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 22px; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lp .kb-deck.has-frame .kb-deck-ui .round { position: absolute; top: 50%; width: 30px; height: 30px; min-width: 0; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .94); color: var(--ink); box-shadow: 0 2px 8px -2px rgb(24 21 31 / .35); pointer-events: auto; cursor: pointer; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.lp .kb-deck.has-frame .kb-deck-ui .round:first-child { inset-inline-start: 10px; }
.lp .kb-deck.has-frame .kb-deck-ui .round:last-child { inset-inline-end: 10px; }
.lp .kb-deck.has-frame .kb-deck-ui .round .ic { width: 14px; height: 14px; }
.lp .kb-deck.has-frame .kb-deck-ui .round:hover { transform: scale(1.06); }
.lp .kb-deck.has-frame .kb-deck-ui .round[disabled] { opacity: 0; pointer-events: none; }
/* each app's actions */
.lp .kb-deck.has-frame .kb-post-acts { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; color: #262626; }
.lp .kb-deck.has-frame .kb-post-acts .ic { width: 22px; height: 22px; }
.lp .kb-deck.has-frame .kb-post-acts > i { flex: 1; }
.lp .kb-deck.is-linkedin .kb-post-acts { justify-content: space-between; gap: 0; margin: 4px 12px 0; padding: 2px 0 4px; border-top: 1px solid rgb(0 0 0 / .08); color: #666; }
.lp .kb-deck.is-linkedin .kb-post-acts span { display: inline-flex; align-items: center; gap: 5px; padding: 10px 4px; font-size: .8125rem; font-weight: 600; }
.lp .kb-deck.is-linkedin .kb-post-acts .ic { width: 18px; height: 18px; }
.lp .kb-deck.has-frame .kb-post-dots { position: absolute; left: 50%; top: 50%; display: flex; gap: 4px; transform: translate(-50%, -50%); }
.lp .kb-deck.has-frame .kb-post-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; transition: background .2s; }
.lp .kb-deck.has-frame .kb-post-dots i.on { background: #0095f6; }
.lp .kb-deck.is-instagram .kb-deck-n, .lp .kb-deck.is-tiktok .kb-deck-n { display: none; }
.lp .kb-deck.is-tiktok { max-width: 300px; }
.lp .kb-deck.is-tiktok .kb-post { background: #121212; color: #fff; box-shadow: 0 30px 60px -24px rgb(24 21 31 / .5); }
.lp .kb-deck.is-tiktok .kb-post-who small, .lp .kb-deck.is-tiktok .kb-post-net { color: rgb(255 255 255 / .65); }
.lp .kb-deck.is-tiktok .kb-post-acts { justify-content: flex-start; color: #fff; }
.lp .kb-deck.is-tiktok .kb-post-dots { inset-inline-start: auto; inset-inline-end: 14px; transform: translateY(-50%); }
.lp .kb-deck.is-tiktok .kb-post-dots i { background: rgb(255 255 255 / .35); }
.lp .kb-deck.is-tiktok .kb-post-dots i.on { background: #fff; }
.lp .kb-deck.is-x .kb-post-who { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp .kb-deck.is-x .kb-post-who small { display: inline; color: #536471; font-size: .875rem; }
.lp .kb-deck.is-x .kb-post-net { align-self: center; color: #536471; }
.lp .kb-deck.is-x p.kb-post-cap { padding-inline-start: 64px; }
.lp .kb-deck.is-x .kb-post-media { margin: 0 14px 0 64px;margin-inline: 64px 14px; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.lp .kb-deck.is-x .kb-post-acts { justify-content: space-between; padding: 10px 14px 12px 64px;padding-inline: 64px 14px; color: #536471; }
.lp .kb-deck.is-x .kb-post-acts .ic { width: 18px; height: 18px; }
.lp .kb-deck.has-frame .kb-post-dots i { flex: none; }

/* 30 Oct 2026: a picture the app's engine drew, in a row of decks (kb_b_decks 'sc') */
.lp .kb-decks-pic img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-tile); }

/* "Video (swipe)" played as the video it makes (video-post-maker.php $swv): a carousel the app made, each slide held,
   then swiped to the next, with the player's bar; no phone or app frame around it (30 Oct 2026, Fernando) */
.lp .kb-swv { display: grid; justify-items: center; gap: 14px; margin: 0; }
.lp .kb-swv-frame { position: relative; width: min(300px, 100%); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #1a1430; box-shadow: 0 0 0 1px rgb(24 21 31 / .08), 0 30px 60px -28px rgb(40 24 70 / .55); }
.lp .kb-swv-track { display: flex; height: 100%; animation: kb-swv 15s cubic-bezier(.65, 0, .35, 1) infinite; }
.lp .kb-swv-pic { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes kb-swv {
  0%, 16% { transform: translateX(0); }
  20%, 36% { transform: translateX(-100%); }
  40%, 56% { transform: translateX(-200%); }
  60%, 76% { transform: translateX(-300%); }
  80%, 97% { transform: translateX(-400%); }
  100% { transform: translateX(0); }
}
.lp .kb-swv-tag { position: absolute; inset-inline-start: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgb(15 10 30 / .55); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 500; }
.lp .kb-swv-tag .ic { width: 13px; height: 13px; }
.lp .kb-swv-ctrl { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 26px 14px 12px; background: linear-gradient(to top, rgb(10 6 22 / .6), transparent); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.lp .kb-swv-ctrl .ic { flex: none; width: 14px; height: 14px; }
.lp .kb-swv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .3); overflow: hidden; }
.lp .kb-swv-bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; animation: kb-swv-bar 15s linear infinite; }
@keyframes kb-swv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp .kb-swv-cap { display: grid; justify-items: center; gap: 2px; font-size: .875rem; color: var(--muted); text-align: center; }
.lp .kb-swv-cap b { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .lp .kb-swv-track, .lp .kb-swv-bar i { animation: none; } }

/* the contact page's two buttons under the lede (hero_after .about-reach2): the same gap and spacing as every hero's
   buttons (.tpl-hero-cta), 31 Oct 2026 (Fernando: not consistent with the rest) */
body.ft .ft-hero .about-reach2 { gap: 12px; margin-top: 28px; }
@media (max-width: 640px) { body.ft .ft-hero .about-reach2 .btn { flex: 1 1 100%; justify-content: center; } }

/* 31 Oct 2026 (Fernando: the boxes in the articles didn't match, "font sizes, spacing"): one look for every box in the
   article column, the short answer (key), the definition and the callouts (tip, note, warn, feature, privacy). The same
   padding, corners and accent bar; a 14px label with its 16px icon on one line; 17px text in the article's soft ink,
   10px under the label and between points; the same space around each box as the other blocks (24px above, 32px
   below). The callout's icon moves up beside its title (its text runs the full width under it, as in the key box), the
   key box gets its dots back (the article's list reset had taken them), and each kind keeps its own colour. */
body.ft .lp .ft-content :is(.kb-key, .kb-callout) { --box-ink: var(--violet-ink); --box-bar: var(--violet); position: relative; padding: 22px 24px 22px 26px;padding-inline: 26px 24px; border-radius: 20px; }
body.ft .lp .ft-content .kb-callout { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 8px; align-items: center; margin: 24px 0 32px; background: var(--card); box-shadow: var(--shadow-tile); }
body.ft .lp .ft-content .kb-callout::before { content: ""; position: absolute; inset-inline-start: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0;border-start-start-radius: 0;border-start-end-radius: 3px;border-end-end-radius: 3px;border-end-start-radius: 0; background: var(--box-bar); }
body.ft .lp .ft-content .kb-key::before { background: var(--box-bar); }
body.ft .lp .ft-content .kb-callout.is-tip { --box-ink: #8a5a14; --box-bar: #c9831f; }
body.ft .lp .ft-content .kb-callout.is-warn { --box-ink: #7d4c10; --box-bar: #a8691a; background: rgb(201 131 31 / .1); box-shadow: none; }
body.ft .lp .ft-content .kb-callout.is-feature { background: var(--violet-soft); box-shadow: none; }
body.ft .lp .ft-content .kb-callout.is-privacy { --box-ink: var(--ink); --box-bar: var(--ink); background: var(--page-2); box-shadow: none; }
body.ft .lp .ft-content .kb-callout > div { display: contents; }
body.ft .lp .ft-content .kb-callout > .ic { grid-row: 1; grid-column: 1; width: 16px; height: 16px; margin: 0; color: var(--box-bar); }
body.ft .lp .ft-content :is(.kb-key-h, .kb-callout-h) { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; line-height: 1.4; font-weight: 500; letter-spacing: .01em; color: var(--box-ink); }
body.ft .lp .ft-content .kb-key-h .ic { width: 16px; height: 16px; flex: none; color: var(--box-bar); }
body.ft .lp .ft-content .kb-callout-h { grid-row: 1; grid-column: 2; }
body.ft .lp .ft-content .kb-callout > div > :not(.kb-callout-h) { grid-column: 1 / -1; }
body.ft .lp .ft-content :is(.kb-key li, .kb-def, .kb-callout > div > p:not(.kb-callout-h):not(.kb-callout-a), .kb-callout > div > :is(ul, ol) li) { font-size: 1.0625rem; line-height: 1.6; color: var(--text-soft); max-width: none; }
body.ft .lp .ft-content .ft-blocks .kb-def { margin: 10px 0 0; }
body.ft .lp .ft-content .kb-callout > div > :not(.kb-callout-h) { margin: 10px 0 0; }
body.ft .lp .ft-content .kb-callout > div > :is(ul, ol) { padding-inline-start: 1.25em; }
body.ft .lp .ft-content .ft-blocks .kb-key ul { display: grid; gap: 10px; margin: 10px 0 0; }
body.ft .lp .ft-content .ft-blocks .kb-key ul > li { position: relative; padding-inline-start: 1.25em; }
body.ft .lp .ft-content .ft-blocks .kb-key ul > li::before { content: ""; position: absolute; inset-inline-start: .2em; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--box-bar); }
body.ft .lp .ft-content :is(.kb-key, .kb-callout) b { font-weight: 500; color: var(--ink); }
@media (max-width: 640px) {
  body.ft .lp .ft-content :is(.kb-key, .kb-callout) { padding: 18px 18px 18px 20px;padding-inline: 20px 18px; }
  body.ft .lp .ft-content :is(.kb-key, .kb-callout)::before { top: 18px; bottom: 18px; }
}

/* ==== Characters page (31 Oct 2026, Fernando: "a really fancy page"): the app's own Characters intro, on the site.
   kb.php kb_b_cast / kb_b_looks / kb_b_poses / kb_b_shots; pictures in assets/img/characters/m/ ==== */
body.ft .lp .chx-cast { position: relative; height: clamp(400px, 40vw, 530px); border-radius: var(--r-stage); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 100%, #e3d6fb 0%, transparent 70%), linear-gradient(180deg, #f8f5fe 0%, var(--violet-soft) 100%); box-shadow: inset 0 0 0 1px var(--line); }
body.ft .lp .chx-cast-sl { position: absolute; top: 50%; z-index: 1; width: min(21%, 270px); margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-slide), 0 24px 48px -24px rgb(40 24 70 / .35); }
body.ft .lp .chx-cast-sl img { width: 100%; height: auto; }
body.ft .lp .chx-cast-sl.s0 { left: 3.5%; transform: translateY(-52%) rotate(-5deg); }
body.ft .lp .chx-cast-sl.s1 { right: 3.5%; transform: translateY(-48%) rotate(5deg); }
body.ft .lp .chx-cast-fig { position: absolute; inset: 0; z-index: 2; }
body.ft .lp .chx-pose { position: absolute; bottom: 0; left: 50%; height: 68%; aspect-ratio: 2 / 3; margin: 0; transform: translateX(-50%); }
body.ft .lp .chx-pose img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
body.ft .lp .chx-pose.p1 { z-index: 2; height: 88%; }
body.ft .lp .chx-pose.p0 { transform: translateX(calc(-50% - min(15vw, 200px))); }
body.ft .lp .chx-pose.p2 { transform: translateX(calc(-50% + min(15vw, 200px))); }
body.ft .lp .chx-cast-tags { position: absolute; inset: auto 0 18px; z-index: 4; height: 30px; margin: 0; padding: 0; list-style: none; }
body.ft .lp .chx-cast-tags li { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / .92); box-shadow: var(--shadow-chip); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.ft .lp .chx-cast-tags li.p0 { inset-inline-start: calc(50% - min(15vw, 200px)); }
body.ft .lp .chx-cast-tags li.p2 { inset-inline-start: calc(50% + min(15vw, 200px)); }
body.ft .lp .chx-chip { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-chip); font-size: 12.5px; color: var(--muted); }
body.ft .lp .chx-chip .ic { color: var(--violet); }

/* the cards: a picture on a soft stage, its name and a line under it */
body.ft .lp .chx-looks, body.ft .lp .chx-poses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; margin: 8px 0 0; padding: 0; list-style: none; }
body.ft .lp .chx-looks > li, body.ft .lp .chx-poses > li { margin: 0; padding: 0; }
body.ft .lp .chx-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: radial-gradient(80% 60% at 50% 100%, #e6dbfb 0%, transparent 75%), var(--violet-soft); box-shadow: inset 0 0 0 1px rgb(127 86 217 / .08); }
body.ft .lp .chx-stage img { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform var(--d-morph) var(--ease-out); transform-origin: 50% 100%; }
body.ft .lp .chx-looks .chx-stage { aspect-ratio: 1 / 1; }
body.ft .lp .chx-looks .chx-stage img { top: 6%; height: 94%; object-fit: contain; object-position: 50% 100%; }
body.ft .lp .chx-poses .chx-stage img { top: 5%; height: 95%; object-fit: contain; object-position: 50% 100%; }
body.ft .lp .chx-looks > li:hover .chx-stage img, body.ft .lp .chx-poses > li:hover .chx-stage img { transform: scale(1.04); }
body.ft .lp .chx-looks p, body.ft .lp .chx-poses p { display: grid; gap: 2px; margin: 12px 2px 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
body.ft .lp .chx-looks p b, body.ft .lp .chx-poses p b { font-size: 15px; font-weight: 600; color: var(--ink); }
body.ft .lp .chx-own .chx-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--violet-line); }
body.ft .lp .chx-own .chx-stage .ic { color: var(--violet); margin-bottom: 4px; }
body.ft .lp .chx-own q { quotes: none; display: block; max-width: 22ch; padding: 9px 13px; border-radius: 14px 14px 14px 4px;border-start-start-radius: 14px;border-start-end-radius: 14px;border-end-end-radius: 14px;border-end-start-radius: 4px; background: var(--violet-soft); font-size: 14px; line-height: 1.4; color: var(--text-soft); }
body.ft .lp .chx-own q:nth-of-type(2) { border-radius: 14px 14px 4px 14px;border-start-start-radius: 14px;border-start-end-radius: 14px;border-end-end-radius: 4px;border-end-start-radius: 14px; align-self: flex-end; margin-inline-end: 4%; }
body.ft .lp .chx-own q:first-of-type { align-self: flex-start; margin-inline-start: 4%; }
body.ft .lp .chx-more .chx-stage { display: flex; align-items: center; padding: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
body.ft .lp .chx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.ft .lp .chx-tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--page-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }

/* real slides with their layout's name; .is-lead: the first one big beside the rest */
body.ft .lp .chx-h { margin: 56px 0 16px; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
body.ft .lp .chx-shots { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 22px 14px; margin: 8px 0 0; padding: 0; list-style: none; }
body.ft .lp .chx-shots > li { margin: 0; }
body.ft .lp .chx-shots figure { margin: 0; }
body.ft .lp .chx-shots img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-slide); }
body.ft .lp .chx-shots figcaption { margin-top: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--text-soft); }
body.ft .lp .chx-shots.is-lead { grid-template-columns: minmax(0, 2.16fr) repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
body.ft .lp .chx-shots.is-lead > li:first-child { grid-row: 1 / span 2; }
body.ft .lp .chx-shots.is-lead > li:first-child img { border-radius: 14px; }
body.ft .lp .chx-shots.is-lead > li:first-child figcaption { font-size: 15px; }
body.ft .lp .chx-note { margin: 18px 2px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
body.ft .lp .chx-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }

@media (max-width: 960px) {
  body.ft .lp .chx-looks, body.ft .lp .chx-poses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  body.ft .lp .chx-shots.is-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ft .lp .chx-shots.is-lead > li:first-child { grid-row: auto; grid-column: 1 / -1; }
  body.ft .lp .chx-shots[style*="--cols:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ft .lp .chx-cast-sl { display: none; }
  body.ft .lp .chx-pose.p0 { transform: translateX(calc(-50% - 27vw)); }
  body.ft .lp .chx-pose.p2 { transform: translateX(calc(-50% + 27vw)); }
  body.ft .lp .chx-cast-tags li.p0 { inset-inline-start: calc(50% - 27vw); }
  body.ft .lp .chx-cast-tags li.p2 { inset-inline-start: calc(50% + 27vw); }
}
@media (max-width: 600px) {
  /* a phone: Mara pointing at the cover of her carousel */
  body.ft .lp .chx-cast { height: 380px; }
  body.ft .lp .chx-pose.p1, body.ft .lp .chx-pose.p2, body.ft .lp .chx-cast-sl.s1, body.ft .lp .chx-cast-tags li.p1, body.ft .lp .chx-cast-tags li.p2 { display: none; }
  body.ft .lp .chx-pose.p0 { inset-inline-start: auto; inset-inline-end: -6%; height: 84%; transform: none; }
  body.ft .lp .chx-cast-sl.s0 { display: block; inset-inline-start: 6%; width: 50%; top: 47%; }
  body.ft .lp .chx-cast-tags li.p0 { display: inline-flex; inset-inline-start: 70%; }
  body.ft .lp .chx-own, body.ft .lp .chx-more { grid-column: 1 / -1; }
  body.ft .lp .chx-own .chx-stage, body.ft .lp .chx-more .chx-stage { aspect-ratio: auto; }
  body.ft .lp .chx-own .chx-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 18px; }
  body.ft .lp .chx-own .chx-stage .ic { flex-basis: 100%; margin: 0; }
  body.ft .lp .chx-own q:first-of-type, body.ft .lp .chx-own q:nth-of-type(2) { align-self: auto; margin: 0; }
  body.ft .lp .chx-stage { border-radius: 14px; }
  body.ft .lp .chx-own .chx-stage { padding: 14px; gap: 8px; }
  body.ft .lp .chx-own q { font-size: 12.5px; padding: 7px 10px; }
  body.ft .lp .chx-more .chx-stage { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .chx-stage img { transition: none; } }

/* ==== Panoramas page (31 Oct 2026, Fernando: "check the app, see the panoramas, and really sell it how it is"):
   real panoramas from the app's Panorama tab (kb.php kb_b_pano / kb_b_panos / kb_b_appshot; pictures in assets/img/pano/) ==== */
@property --pnx-g { syntax: '<length>'; inherits: true; initial-value: 0px; }
/* the hero: the slides join into one picture, draw apart into three slides, and join again */
body.ft .lp .pnx-hero { margin: 0; }
body.ft .lp .pnx-row { --pnx-g: 4px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--pnx-g); max-width: 1040px; margin: 0 auto; outline: none; }
body.ft .lp .pnx-sl { position: relative; margin: 0; overflow: hidden; border-radius: calc(4px + var(--pnx-g) * .6); box-shadow: 0 calc(var(--pnx-g) * 1.2) calc(var(--pnx-g) * 2.6) calc(var(--pnx-g) * -1) rgb(30 20 60 / .32); }
body.ft .lp .pnx-sl:first-child { border-start-start-radius: 16px; border-end-start-radius: 16px; }
body.ft .lp .pnx-sl:last-child { border-start-end-radius: 16px; border-end-end-radius: 16px; }
body.ft .lp .pnx-sl img { display: block; width: 100%; height: auto; }
/* the slide numbers, as in the app's preview strip */
body.ft .lp .pnx-sl > b, body.ft .lp .pnx-seams b { position: absolute; top: 12px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgb(0 0 0 / .45); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; }
body.ft .lp .pnx-sl > b { inset-inline-start: 12px; }
body.ft .lp .pnx-hero figcaption { max-width: 60ch; margin: 18px auto 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--muted); }
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  body.ft .lp .pnx-row { animation: pnx-split 9s var(--ease-out, ease) 1.2s infinite; }
}
@keyframes pnx-split { 0%, 30% { --pnx-g: 0px; } 42%, 78% { --pnx-g: 18px; } 90%, 100% { --pnx-g: 0px; } }
/* a phone: swipe through the slides, the picture carries on */
@media (max-width: 600px) {
  body.ft .lp .pnx-row { --pnx-g: 0px; display: flex; gap: 0; margin: 0 calc(var(--gutter, 16px) * -1); padding: 0 var(--gutter, 16px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  body.ft .lp .pnx-row::-webkit-scrollbar { display: none; }
  body.ft .lp .pnx-sl { flex: 0 0 78%; scroll-snap-align: center; box-shadow: none; }
  body.ft .lp .pnx-sl:not(:first-child):not(:last-child) { border-radius: 0; }
  body.ft .lp .pnx-sl + .pnx-sl { box-shadow: inset 1px 0 0 rgb(255 255 255 / .5); }
}

/* finished panoramas, one strip each, the seams marked */
body.ft .lp .pnx-list { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 36px 28px; margin: 8px 0 0; padding: 0; list-style: none; align-items: start; }
body.ft .lp .pnx-list > li { margin: 0; }
body.ft .lp .pnx-list figure { margin: 0; }
body.ft .lp .pnx-strip { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-slide); }
body.ft .lp .pnx-strip img { display: block; width: 100%; height: auto; }
body.ft .lp .pnx-seams { position: absolute; inset: 0; pointer-events: none; }
body.ft .lp .pnx-seams i { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 1.5px dashed rgb(255 255 255 / .85); transform: translateX(-.75px); filter: drop-shadow(0 0 1px rgb(0 0 0 / .35)); }
body.ft .lp .pnx-seams b { top: 10px; margin-inline-start: 10px; width: 22px; height: 22px; font-size: 12px; }
body.ft .lp .pnx-list figcaption { margin-top: 12px; }
body.ft .lp .pnx-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; line-height: 1.3; color: var(--muted); }
body.ft .lp .pnx-t b { margin-inline-end: 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
body.ft .lp .pnx-t span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--page-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
body.ft .lp .pnx-q { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
body.ft .lp .pnx-q small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
body.ft .lp .ft-content .pnx-note, body.ft .lp .pnx-note { margin: 0 2px; padding-top: 30px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* the app's own Panorama tab, panel and message */
body.ft .lp .pnx-ui, body.ft .lp .ft-content .ft-blocks > .pnx-ui { position: relative; width: 100%; max-width: var(--w, 760px); margin: 0 auto; }
body.ft .lp .pnx-ui > picture { display: block; }
body.ft .lp .pnx-ui > img, body.ft .lp .pnx-ui > picture > img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 1px 2px rgb(20 16 40 / .08), 0 24px 60px -20px rgb(30 20 60 / .28); }
body.ft .lp .pnx-ui > img.pnx-toast { width: min(78%, var(--tw, 362px)); margin: -2.2% auto 0; position: relative; border-radius: 14px; box-shadow: 0 14px 34px -10px rgb(20 16 40 / .45); }   /* the margin scales with the window above it, so the message only covers its bottom edge, never its last line */
body.ft .lp .pnx-ui figcaption { max-width: 64ch; margin: 18px auto 0; font-size: 14px; line-height: 1.55; text-align: center; color: var(--muted); }
body.ft .lp .pnx-ui figcaption b { font-weight: 600; color: var(--text-soft); }
body.ft .lp .uses + .ft-blocks, body.ft .lp .ft-blocks.is-uses + .ft-blocks.is-appshot { margin-top: 40px; }

@media (max-width: 860px) {
  body.ft .lp .pnx-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
  body.ft .lp .pnx-seams b { top: 6px; margin-inline-start: 6px; width: 18px; height: 18px; font-size: 10.5px; border-radius: 5px; }
  body.ft .lp .pnx-ui > img, body.ft .lp .pnx-ui > picture > img { border-radius: 14px; }
}

/* Japanese headings break between phrases, not inside a word (Chrome/Edge; others keep their usual breaks) (1 Nov 2026) */
:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; overflow-wrap: anywhere; }