/* The core DM feature pages (site-src/gen/dm/features.py, agent L, 2026-10-07): /follow-to-unlock,
   /collect-emails-and-phones, /build-with-ai, /ai-chatbot, /people. Class prefix ft-. On top of kit.css and system.css;
   tokens only (Instagram's own colours stay inside the depictions through the --ig-* tokens). */

/* ───────────── every scene plays on the DM home's beat clock: an element shows from its beat ───────────── */
.ft-scene { margin: 0; }
/* an element shows from its beat. The first beat's elements are also there before the clock starts (before the script runs,
   before the scene scrolls into view), so the stage never paints empty and beat 0 moves nothing (H1); `gone` = past its data-x */
.ft-scene [data-in]:not(.on):not([data-in='0']), .ft-scene [data-in='0'].gone, .ft-scene [data-type]:not(.on) { display: none; }   /* typed text waits for its beat */
.ft-scene .ig-m.on, .ft-scene .ft-qr.on, .ft-scene .ft-rr.on, .ft-scene .ft-sk-l.on, .ft-scene .ft-sk-ask.on,
.ft-scene .ft-sk-reply.on, .ft-scene .ft-hand.on, .ft-scene .ft-lang.on, .ft-scene .ft-fix.on, .ft-scene .ft-side-f.on,
.ft-scene .ft-toast.on, .ft-scene .ft-pchip.on, .ft-scene q.on { animation: dmh-sk-in 0.35s var(--ease) backwards; }

/* ───────────── the duo: the person's phone and, beside it, what the business sees ───────────── */
.ft-duo-in { display: flex; justify-content: center; align-items: center; gap: var(--s-12); }
.ft-ph { flex: none; width: min(310px, 100%); }
/* the phone and its card sit in the kit's framed stage, as every other DM hero does (QA pass 4: the pair floated on the page
   with no frame). Desktop only; a phone keeps its one bare surface. Same frame, dots and padding as /comment-to-dm's .cd-box */
@media (min-width: 861px) {
  .ft-duo-in { position: relative; padding: var(--s-12) var(--s-6) var(--s-8); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); overflow: clip; }
  .ft-duo-in::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 32%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
  .ft-duo-in > * { position: relative; }
}
.ft-side { width: 340px; flex: none; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); text-align: start; }
/* the card grows downward from a fixed top (--ft-top: where its finished height sits centred beside the phone) instead of
   re-centring as each row lands, which moved the whole card on every beat (H1) */
.ft-side[style*='--ft-top'] { align-self: flex-start; margin-top: var(--ft-top); }
.ft-side-h { margin: 0 0 var(--s-1); display: flex; align-items: center; gap: var(--s-3); }
.ft-side-h > span:last-child { display: grid; min-width: 0; }
.ft-side-h b { font-size: 15px; font-weight: 650; color: var(--ink); }
.ft-side-h small { font-size: 12.5px; color: var(--ink-3c); }
.ft-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--step-amber) 15%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 60%, var(--ink)); font-size: 14px; font-weight: 700; }
.ft-dog { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); }
.ft-dog img { width: 22px; height: 22px; }
.ft-k { margin: var(--s-2) 0 0; font-size: var(--t-caption); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
.ft-side-f { margin: var(--s-2) 0 0; display: flex; align-items: center; gap: 8px; padding-top: var(--s-3); border-top: var(--hairline) solid var(--line-soft); font-size: 13.5px; color: var(--ink-2); }
.ft-side-f .i { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
.ft-side-f b { color: var(--ink); }

/* the run beside the follow scene: the run's own statuses, one per moment */
.ft-rl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ft-rr { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ft-rr + .ft-rr { border-top: var(--hairline) solid var(--line-soft); }
.ft-rr b { color: var(--ink); font-weight: 600; }
.ft-rr-i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--canvas); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.ft-rr-i .i { width: 14px; height: 14px; }
.ft-rr.is-no .ft-rr-i { color: var(--danger-ink); background: var(--danger-soft); box-shadow: none; }
.ft-rr.is-fol .ft-rr-i { color: var(--instagram); background: color-mix(in srgb, var(--instagram) 10%, var(--surface)); box-shadow: none; }
.ft-rr.is-ok .ft-rr-i { color: var(--accent-ink); background: var(--accent-soft); box-shadow: none; }
.ft-rr.is-ok span:last-child { color: var(--ink); font-weight: 600; }

/* the contact beside the collect scene */
.ft-kv { display: grid; gap: 2px; }
.ft-kv-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3c); }
.ft-kv-k .i { width: 13px; height: 13px; }
.ft-kv-v { display: grid; gap: 3px; }
.ft-kv-v b { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ft-kv-v b.on { animation: ft-fill 0.6s var(--ease) backwards; }
.ft-kv-v small { font-size: 12.5px; line-height: 1.45; color: var(--ink-3c); }
.ft-dash { font-style: normal; font-size: 14px; color: var(--ink-3); }
.ft-fix { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-md); background: var(--canvas); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ft-fix .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.ft-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ft-tags span { padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }
.ft-tags span.on { animation: ft-pop 0.45s var(--ease) backwards; }
@keyframes ft-fill { from { background: var(--accent-soft); } }
@keyframes ft-pop { from { opacity: 0; transform: scale(0.7); } }

/* the agent's knowledge beside the chatbot scene: the source an answer came from lights */
.ft-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft-src { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ft-src:has(.ft-src-on.on) { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.ft-src-on { display: none; }
.ft-src-i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--canvas); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.ft-src:has(.ft-src-on.on) .ft-src-i { color: var(--accent-ink); background: var(--accent-soft); box-shadow: none; }
.ft-src-i .i { width: 15px; height: 15px; }
.ft-src-b { display: grid; gap: 1px; min-width: 0; }
.ft-src-b b { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ft-src-b small { font-size: 12.5px; color: var(--ink-3c); }
.ft-src-b q { margin-top: 6px; padding-inline-start: 9px; border-inline-start: 2px solid var(--accent); font-size: 13px; line-height: 1.45; color: var(--ink); quotes: none; }
.ft-lang, .ft-check { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ft-lang .i, .ft-check .i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent-ink); }
.ft-hand { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--step-amber) 10%, var(--surface)); border: var(--hairline) solid color-mix(in srgb, var(--step-amber) 30%, var(--line)); }
.ft-hand .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: color-mix(in srgb, var(--step-amber) 70%, var(--ink)); }
.ft-hand span { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ft-hand b { font-size: 14px; color: var(--ink); }

/* ───────────── Instagram pieces inside the phone ───────────── */
.ft-dm { z-index: 1; }
.ft-th { gap: 5px; }
.ft-th .ig-ctx { margin-bottom: 6px; }
.ft-th .ig-b { font-size: 13px; }
.ft-th .ig-btn.tap, .ft-card-b span.tap, .ft-qr span.tap { transform: scale(0.95); background: var(--ig-grey); }
.ft-card { width: 210px; border: 1px solid #dbdbdb; border-radius: 18px; overflow: hidden; background: #fff; }
.ft-card p { margin: 0; padding: 10px 13px 11px; font-size: 13px; line-height: 1.38; font-weight: 600; color: #000; }
.ft-card-b span { display: block; padding: 9px 12px; border-top: 1px solid #efefef; text-align: center; font-size: 13px; font-weight: 600; color: var(--ig-blue); transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.ft-qr { margin: 2px 0 0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.ft-qr span { padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--ig-blue); font-size: 13px; font-weight: 600; color: var(--ig-blue); background: #fff; transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.ft-comp .ig-typed.on::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-inline-start: 1px; vertical-align: -0.15em; background: var(--ig-blue); animation: dmh-caret 1s steps(1) infinite; }
.ft-comp .ig-send.tap { transform: scale(0.9); }
/* the profile, opened from Visit profile */
.ft-prof { position: absolute; inset: 0; z-index: 3; display: grid; align-content: start; gap: 10px; padding: 50px 14px 0; background: #fff; color: #000; }
.ft-prof.on { animation: ft-slide 0.35s var(--ease) backwards; }
@keyframes ft-slide { from { transform: translateX(100%); } }
.ft-prof-top { margin: 0; display: flex; align-items: center; gap: 10px; padding: 2px 0 6px; }
.ft-prof-top b { flex: 1; font-size: 15px; }
.ft-prof-top .ig-g { width: 22px; height: 22px; }
.ft-prof-row { display: grid; grid-template-columns: 76px repeat(3, minmax(0, 1fr)); align-items: center; gap: 4px; }
.ft-prof-row img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ft-prof-row p { margin: 0; display: grid; justify-items: center; font-size: 11.5px; color: #000; }
.ft-prof-row b { font-size: 15px; }
/* the three counters carry Instagram's own words, and "publicaciones · seguidores · seguidos" (179px) cannot stand beside a 72px picture in a
   236px screen. Spanish and French draw the profile the way Instagram's newer one reads: the name beside the picture, the counters as their
   own row across the screen. Portuguese only needs each counter as wide as its word (LF, 2026-10-10) */
html:is([lang='es'], [lang='fr']) .ft-prof { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html:is([lang='es'], [lang='fr']) .ft-prof > * { grid-column: 1 / -1; }
html:is([lang='es'], [lang='fr']) .ft-prof-row { display: contents; }
html:is([lang='es'], [lang='fr']) .ft-prof-row img { grid-area: 2 / 1 / 3 / 3; align-self: center; }
html:is([lang='es'], [lang='fr']) .ft-prof-bio { grid-area: 2 / 3 / 3 / -1; align-self: center; }
html:is([lang='es'], [lang='fr']) .ft-prof-row p { grid-row: 3; grid-column: span 2; white-space: nowrap; }
html[lang='pt-BR'] .ft-prof-row { grid-template-columns: 76px repeat(3, auto); justify-content: space-between; }
.ft-prof-bio { margin: 0; display: grid; font-size: 12.5px; line-height: 1.4; }
.ft-prof-bio span { color: var(--ig-meta); }
.ft-prof-btns { margin: 2px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ft-prof-btns > span { display: grid; place-items: center; height: 32px; border-radius: 8px; background: var(--ig-grey); font-size: 13px; font-weight: 600; transition: transform 0.15s var(--ease); }
.ft-prof-btns .ft-fol { background: var(--ig-blue); color: #fff; }
.ft-prof-btns .ft-fol:has(.is-on.on) { background: var(--ig-grey); color: #000; }
.ft-prof-btns .ft-fol.tap { transform: scale(0.95); }
.ft-prof-btns em { font-style: normal; }
.ft-prof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 4px -14px 0; }
.ft-prof-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }

/* ───────────── "How it runs": the small pictures in the kit's step boxes ───────────── */
.ft-mini { width: 100%; max-width: 240px; display: grid; gap: 8px; justify-items: start; }
.ft-mini.is-col { justify-items: stretch; }
.ft-mb { margin: 0; max-width: 92%; padding: 8px 12px 9px; border-radius: 18px; font-size: 13px; line-height: 1.38; background: var(--ig-grey); color: #000; }
.ft-mb.is-me { justify-self: end; background: var(--ig-blue); color: #fff; }
.ft-mbtn { margin: -2px 0 0; display: grid; gap: 4px; width: 92%; }
.ft-mbtn span { padding: 7px 10px; border-radius: 14px; border: 1px solid #dbdbdb; background: #fff; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); }
.ft-mqr { margin: 0; display: flex; gap: 6px; justify-self: end; }
.ft-mqr span { padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--ig-blue); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); }
.ft-mcmt { margin: 0; display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--ink); }
.ft-mcmt b { font-weight: 650; }
.ft-mav { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--instagram) 14%, var(--surface)); color: color-mix(in srgb, var(--instagram) 80%, var(--ink)); font-size: 12px; font-weight: 700; }
.ft-mnote { margin: 0; width: 100%; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); box-shadow: var(--shadow-lift); }
.ft-mnote b { color: var(--ink); font-weight: 600; }
.ft-mnote .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ink-3); }
.ft-mnote.is-ok .i { color: var(--accent-ink); }
.ft-mnote.is-no .i { color: var(--danger-ink); }
.ft-msub { margin: -2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3c); }
.ft-mbox { margin: 0; padding: 12px 14px; border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); font-size: 13px; line-height: 1.5; color: var(--ink); }
.ft-mask { margin: 0; width: 100%; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); font-size: 12.5px; line-height: 1.45; color: var(--ink-3c); }
.ft-mask b { font-size: 13px; color: var(--ink); }
.ft-mtags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ft-mtags i { font-style: normal; padding: 3px 9px; border-radius: 6px; background: var(--rail); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ft-mchip { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--accent-soft); font-size: 12.5px; color: var(--accent-ink); }
.ft-mchip .i { width: 13px; height: 13px; }

/* ───────────── /build-with-ai: the canvas filling beside the sidekick ───────────── */
.ft-fit { margin-inline: auto; }
/* the builder as the app lays it out: its bar over everything, the folded steps rail, the canvas, Build with AI as a panel
   beside it. The canvas is the kit's flow (dm_kit flow(): the app's own cards and wires); this sheet only sizes the window
   and moves the camera: it follows the newest card while the flow is built, and returns to the start once every way is checked. */
.ft-build-in { position: relative; width: 1240px; height: 656px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: 56px minmax(0, 1fr); border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-frame); overflow: hidden; text-align: start; }
.ft-cv { grid-area: 2 / 1; display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; }
.ft-cv > .kit-fbar { position: absolute; inset: 0 0 auto; }
.ft-cv-body { position: relative; display: flex; min-height: 0; }
.ft-cv-in { position: relative; flex: 1; min-width: 0; overflow: hidden; background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
.ft-cv-body > .kit-fpill.on { animation: dmh-sk-in 0.3s var(--ease) backwards; }
.ft-cv-in .kit-node.on { animation: ft-land 0.4s var(--ease) backwards; }
@keyframes ft-land { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@media (min-width: 861px) {
  .ft-build:has([data-node='q'].on) .kit-flow { --pan-x: 328px; }
  .ft-build:has([data-node='t'].on) .kit-flow { --pan-x: 656px; }
  .ft-build:has([data-node='h'].on) .kit-flow { --pan-x: 780px; }
  .ft-build:has(.ft-sk-l.is-ok.on) .kit-flow { --pan-x: 0px; }
}
.ft-sk { grid-area: 2 / 2; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-inline-start: var(--hairline) solid var(--line); background: var(--surface); min-height: 0; }
.ft-sk-h { margin: 0; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-bottom: var(--hairline) solid var(--line); font-size: 15px; }
.ft-sk-h .i { width: 16px; height: 16px; color: var(--ink-2); }
.ft-sk-h b { flex: 1; font-weight: 650; color: var(--ink); }
.ft-sk-x { color: var(--ink-4) !important; }
.ft-sk-kept { margin: 0; padding: 10px 16px 0; font-size: 12px; color: var(--ink-3c); }
.ft-sk-th { min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px 16px; }
.ft-sk-hello { margin: 0; display: grid; gap: 4px; padding: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink-3c); }
.ft-sk-hello b { font-size: 16px; color: var(--ink); font-weight: 650; }
.ft-sk-you { flex: none; margin: 0 0 0 28px; padding: 10px 13px; border-radius: 14px; background: var(--rail); font-size: 13px; line-height: 1.5; color: var(--ink); }
.ft-sk-turn { flex: none; border-radius: 12px; border: var(--hairline) solid var(--line); overflow: hidden; }
.ft-sk-sum { margin: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
.ft-sk-sum > span { flex: 1; display: inline-flex; align-items: center; gap: 7px; }
.ft-sk-run i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ft-spin 0.8s linear infinite; }
@keyframes ft-spin { to { transform: rotate(360deg); } }
.ft-sk-done .i { width: 14px; height: 14px; color: var(--accent-ink); }
.ft-sk-chev { width: 14px; height: 14px; color: var(--ink-4); }
.ft-sk-turn ol { list-style: none; margin: 0; padding: 4px 12px 10px; display: grid; gap: 6px; border-top: var(--hairline) solid var(--line-soft); }
.ft-sk-l { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.ft-sk-l i { width: 5px; height: 5px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.ft-sk-l b { color: var(--ink); font-weight: 600; }
.ft-sk-l.is-plan { color: var(--ink-3c); }
.ft-sk-l.is-plan i { background: var(--ink-4); }
.ft-sk-l.is-ans i { background: var(--step-violet); }
.ft-sk-l.is-ok b { color: var(--accent-ink); }
.ft-sk-ask { flex: none; display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: var(--hairline) solid var(--line); background: var(--canvas); }
.ft-sk-q { margin: 0 0 2px; font-size: 13px; font-weight: 650; color: var(--ink); }
.ft-sk-o { margin: 0; position: relative; display: grid; gap: 1px; padding: 8px 10px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12px; color: var(--ink-3c); transition: transform 0.15s var(--ease); }
.ft-sk-o b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ft-sk-o em { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--accent-ink); }
/* "Recommended" has its own column beside the option's name, so a longer name ("Campo nuevo «número de personas»") wraps beside it instead of running under it (LF, 2026-10-10) */
@media (min-width: 861px) {
  .ft-sk-o.is-rec { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .ft-sk-o.is-rec > span { grid-column: 1 / -1; }
  .ft-sk-o.is-rec > em { position: static; grid-area: 1 / 2; white-space: nowrap; line-height: 1.5; }
}
.ft-sk-o.is-rec { border-color: var(--accent-line); }
.ft-sk-o.tap { transform: scale(0.98); background: var(--accent-soft); }
.ft-sk-reply { flex: none; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.ft-sk-box { margin: 0 12px 12px; padding: 10px 12px 8px; border-radius: 12px; border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); }
.ft-sk-in { margin: 0; min-height: 40px; font-size: 13px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ft-sk-ph { color: var(--ink-3); }
.ft-sk-typed.on::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-inline-start: 1px; vertical-align: -0.15em; background: var(--accent); animation: dmh-caret 1s steps(1) infinite; }
.ft-sk-tools { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.ft-sk-tools > .i { width: 16px; height: 16px; }
.ft-sk-mode { flex: 1; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ft-sk-mode .i { width: 13px; height: 13px; }
.ft-sk-send { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: var(--surface); transition: transform 0.15s var(--ease); }
.ft-sk-send .i { width: 14px; height: 14px; transform: rotate(-90deg); }
.ft-sk-send.is-idle { background: var(--line-soft); color: var(--ink-4); }
.ft-sk-send.tap { transform: scale(0.9); }
/* ───────────── /people: the People screen as the app draws it ───────────── */
.ft-pwin { width: 1160px; height: 620px; display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-frame); overflow: hidden; text-align: start; }
/* the rail keeps its 210px (the table beside it keeps every pixel it has in English) and its rows stay inside it: a filter's name too long for
   one line ("Joignables maintenant", "Dá para mandar mensagem agora") takes two, its count beside the first; nothing is cut and nothing
   runs under the table (LF, 2026-10-10) */
.ft-prail { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; padding: 20px 12px; border-inline-end: var(--hairline) solid var(--line-soft); background: var(--surface); }
.ft-rk { margin: 12px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3c); }
.ft-rk:first-child { margin-top: 0; }
.ft-rl-i { margin: 0; display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.ft-rl-i .i { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.ft-rl-i span { flex: 1; min-width: 0; padding-block: 5px; line-height: 1.3; overflow-wrap: break-word; }
.ft-rl-i em { font-style: normal; font-size: 12px; color: var(--ink-3c); font-variant-numeric: tabular-nums; }
.ft-rl-i em b { font-weight: 500; }
.ft-rl-i.is-on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.ft-rl-i.is-on .i { color: var(--accent-ink); }
.ft-people:has(.ft-pchip.on) .ft-rl-i.is-on { background: none; font-weight: 400; }
.ft-people:has(.ft-pchip.on) .ft-rl-i.is-tasting { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.ft-pmain { position: relative; min-width: 0; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); padding: 18px 22px 0; }
.ft-ptop { margin: 0; display: flex; align-items: center; gap: 22px; padding-bottom: 12px; border-bottom: var(--hairline) solid var(--line-soft); }
.ft-ptop > b { font-size: 16px; font-weight: 650; color: var(--ink); }
.ft-ptabs { display: flex; gap: 18px; font-size: 13.5px; color: var(--ink-3); }
.ft-ptabs .is-on { color: var(--ink); font-weight: 600; box-shadow: 0 13px 0 -11px var(--accent); }
.ft-pseg { margin: 14px 0 0; justify-self: start; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--rail); font-size: 13px; color: var(--ink-3c); }
.ft-pseg span { padding: 5px 12px; border-radius: 8px; }
.ft-pseg em { font-style: normal; color: var(--ink-3c); }
.ft-pseg .is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); }
.ft-ph2 { margin: 14px 0 0; display: flex; align-items: baseline; gap: 10px; }
.ft-ph2 > b { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.ft-ph2 > span { font-size: 14px; color: var(--ink-3c); }
.ft-ph2 > span b { font-weight: 400; }
.ft-ptools { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
.ft-ps { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* the search field is as wide as the English one, and grows for a longer placeholder instead of wrapping it onto a second line */
.ft-psearch { box-sizing: border-box; min-width: 270px; max-width: 360px; white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px; border: var(--hairline) solid var(--line); font-size: 13px; color: var(--ink-3); }
.ft-pbtn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: 0 1px 0 rgb(15 23 42 / 0.04); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.ft-pbtn.tap { transform: scale(0.95); background: var(--rail); }
.ft-pchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border-radius: var(--r-pill); background: var(--accent-soft); font-size: 12.5px; color: var(--accent-ink); }
.ft-pchip .i { width: 13px; height: 13px; }
.ft-sp { flex: 1; }
.ft-ptab { min-height: 0; overflow: hidden; border-radius: 10px 10px 0 0; border: var(--hairline) solid var(--line); border-bottom: 0; }
.ft-phead, .ft-pr { display: grid; grid-template-columns: 36px 1.4fr 1.3fr 1.05fr 1.2fr 1fr 0.95fr; align-items: center; gap: 8px; padding: 0 14px 0 10px; }
.ft-phead { margin: 0; height: 36px; background: var(--canvas); border-bottom: var(--hairline) solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3c); }
.ft-ptab ol { list-style: none; margin: 0; padding: 0; }
.ft-pr { height: 52px; border-bottom: var(--hairline) solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.ft-pr.is-land.on { animation: ft-row 0.7s var(--ease) backwards; }
@keyframes ft-row { from { opacity: 0; transform: translateY(-10px); background: var(--accent-soft); } 60% { opacity: 1; transform: none; background: var(--accent-soft); } }
.ft-pck { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line); }
.ft-phead .ft-pck { justify-self: start; }
.ft-pp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ft-pp .lx-av { width: 28px; height: 28px; font-size: 11.5px; }
.ft-pp > span:last-child { display: grid; min-width: 0; }
.ft-pp b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ft-pp small { font-size: 11.5px; color: var(--ink-3c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-pe, .ft-pph, .ft-pf { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-pr b { font-weight: 500; color: var(--ink); }
.ft-pp b { font-weight: 600; }
.ft-pr span > b.on { animation: ft-fill 0.9s var(--ease) backwards; border-radius: 4px; }
.ft-pr .ft-dash::before { content: '\2014'; }
.ft-pt { display: flex; gap: 5px; min-width: 0; overflow: hidden; }
/* a tag that does not fit its cell is left out whole (it drops to a second row the cell does not show), never cut through its word ("cliente-fie") (LF, 2026-10-10) */
@media (min-width: 861px) { .ft-pt { flex-wrap: wrap; row-gap: 12px; max-height: 22px; align-content: flex-start; } }
.ft-pt i { font-style: normal; padding: 2px 7px; border-radius: 6px; background: var(--rail); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.ft-pt i.is-new { background: var(--accent-soft); box-shadow: none; color: var(--accent-ink); font-weight: 600; }
.ft-pt i.on { animation: ft-pop 0.45s var(--ease) backwards; }
.ft-pw { font-size: 12.5px; color: var(--ink-3c); white-space: nowrap; }
.ft-pw::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--ink-4); vertical-align: 1px; }
.ft-pw.is-open { color: var(--ink); }
.ft-pw.is-open::before { background: var(--accent); }
.ft-toast { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 13.5px; box-shadow: var(--shadow-float); white-space: nowrap; }
.ft-toast .i { width: 16px; height: 16px; color: var(--accent-bright); }
/* ───────────── a phone: one surface at a time, at full size, its name and the moment's line under it ─────────────
   PLAN §2 (Anant: everything fits the viewport on every phone). Under 860px each scene shows ONE surface 260 wide and never
   scaled down (the person's bare screen 260 x 316, the sidekick or the canvas, the People list), switching with the story's
   beats; what the side panel said becomes the one line under it. Agent S's standard (core.css), 2026-10-07. */
.ft-cap { display: none; }
.ft-sb { display: none; }   /* the beat markers that switch the phone's surface: never a box */
@keyframes ft-fade { from { opacity: 0; } }
@media (max-width: 860px) {
  .ft-duo-in { display: block; }
  .ft-side { display: none; }
  .ft-cap { display: grid; justify-items: center; gap: var(--s-3); margin-top: 8px; }
  .ft-nm { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); text-align: center; }
  .ft-line { margin: 0; display: grid; justify-items: center; min-height: 34px; }
  .ft-line-t { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; max-width: 300px; padding-block: 5px; padding-inline: 8px 14px; border-radius: 17px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: start; }
  /* every line keeps its place in the one cell (hidden, still measured): the pill row is as tall as its longest line on every
     beat, so the page under the scene never moves when a sentence wraps (it grew and shrank 10 to 15px in the loop; H1) */
  .ft-scene .ft-line .ft-line-t:not(.on) { display: inline-flex; visibility: hidden; }
  .ft-scene .ft-line .ft-line-t[data-in='0']:not(.on):not(.gone) { visibility: visible; }
  .ft-line-t.on { animation: dmh-sk-in 0.35s var(--ease) backwards; }
  .ft-line-t b { font-weight: 700; }
  .ft-line-t .i { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 2.6; }

  /* the person's screen: no frame, no status bar, no composer; the newest messages only, so nothing is cut */
  .ft-ph { width: 260px; margin-inline: auto; }
  .ft-ph .kit-phone { padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
  .ft-ph .ps-btn, .ft-ph .ig-status, .ft-ph .ig-comp { display: none; }
  .ft-ph .ps-screen { border-radius: 16px; background: #fff; }
  .ft-ph .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  .ft-th { padding: 8px 10px 10px; }
  .ft-th .ig-ctx { font-size: 11px; }
  .ft-th:has(> .ig-m.on ~ .ig-m.on) > .ig-ctx { display: none; }
  .ft-k2 .ft-th > .ig-m.on:has(~ .ig-m.on ~ .ig-m.on) { display: none; }
  .ft-k3 .ft-th > .ig-m.on:has(~ .ig-m.on ~ .ig-m.on ~ .ig-m.on) { display: none; }
  .ft-k4 .ft-th > .ig-m.on:has(~ .ig-m.on ~ .ig-m.on ~ .ig-m.on ~ .ig-m.on) { display: none; }
  .ft-card { width: 200px; }
  .ft-prof { padding: 10px 12px 0; gap: 8px; }
  .ft-prof.on { animation: dmh-sk-in 0.35s var(--ease) backwards; }
  .ft-ph .kit-ig-dmh .ig-g:last-child { display: none; }
  .ft-prof-grid { margin-inline: -12px; }

  /* /build-with-ai: the sidekick while it talks, the canvas while it fills */
  .ft-build-in { width: 260px; height: 316px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .ft-sk, .ft-cv { grid-area: 1 / 1; min-height: 0; overflow: hidden; }
  .ft-sk { border-inline-start: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .ft-build-in .ft-cv { display: none; }
  .ft-build-in:has(> .ft-sb.on) .ft-cv { display: grid; animation: dmh-sk-in 0.35s var(--ease); }
  .ft-build-in:has(> .ft-sb.on) .ft-sk { display: none; }
  .ft-sk-h { height: 44px; padding: 0 14px; }
  .ft-sk-kept { display: none; }
  .ft-sk-th { padding: 10px 12px; gap: 8px; -webkit-mask-image: none; mask-image: none; }
  .ft-sk-you { margin-inline-start: 20px; padding: 8px 11px; }
  .ft-sk-box { margin: 0 10px 10px; }
  .ft-sk:has(.ft-sk-ph.on) .ft-sk-box { display: none; }
  .ft-sk-l.on:has(~ .ft-sk-l.on ~ .ft-sk-l.on) { display: none; }
  .ft-sk-th:has(.ft-sk-ask.on) .ft-sk-you, .ft-sk-th:has(.ft-sk-ask.on) .ft-sk-turn { display: none; }
  .ft-sk-th:has(.ft-sk-l.on) .ft-sk-you { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; padding-block: 0; border-block: 8px solid transparent; }
  .ft-sk-th:has(.ft-sk-l.on ~ .ft-sk-l.on ~ .ft-sk-l.on) .ft-sk-you { display: none; }
  .ft-sk-o em { position: static; font-size: 11.5px; }
  .ft-sk-o:not(.is-rec) span { display: none; }
  .ft-sk-ask { padding: 10px; }
  .ft-sk-o { padding: 7px 9px; }
  /* the canvas on a phone: the bar keeps the flow's name and its switch, the same cards stand in one column (the kit's
     flow(col=True)) and the camera stands on the card that just landed */
  .ft-cv { position: relative; grid-template-rows: 40px minmax(0, 1fr); }
  .ft-cv > .kit-fbar { position: static; height: 40px; gap: 8px; padding-inline: 12px; }
  .ft-cv > .kit-fbar > b { font-size: 13.5px; }
  .ft-cv .kit-fbar-t, .ft-cv .kit-fbar-back, .ft-cv .kit-fbar-sep, .ft-cv .kit-fbar-ic, .ft-cv .kit-fbar-hist, .ft-cv .kit-fbar-dots, .ft-cv .kit-fbar-save, .ft-cv .kit-rail, .ft-cv .kit-ftools { display: none; }
  .ft-cv .kit-fbar-live { font-size: 12.5px; }
  .ft-cv-body > .kit-fpill { top: -34px; inset-inline: 10px auto; height: 28px; }
  .ft-cv:has(.kit-fpill.on) .kit-fbar > b { visibility: hidden; }
  .ft-cv-in .kit-flow { --col-x: 16px; --col-y: 14px; --col-w: 228px; --pan-x: 0px; width: 260px; height: 276px; transition-duration: 0.35s; }   /* a step is on screen for about a second: the camera is there before it can be read */
  .ft-build:has([data-node='p'].on) .kit-flow { --pan-y: calc(var(--top-p, 0px) - 14px); }
  .ft-build:has([data-node='q'].on) .kit-flow { --pan-y: calc(var(--top-q, 0px) - 8px); }
  .ft-build:has([data-node='t'].on) .kit-flow { --pan-y: calc(var(--top-t, 0px) - 14px); }
  .ft-cv-in .kit-node.on { animation-name: ft-rise; }
  @keyframes ft-rise { from { transform: translateY(8px); } }

  /* /people: the app's phone list, the newest four people, one tag each */
  .ft-pwin { width: 260px; height: 316px; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .ft-prail, .ft-ptop, .ft-pseg, .ft-psearch, .ft-pcols, .ft-sp, .ft-phead, .ft-pck, .ft-pph, .ft-pf, .ft-pw, .ft-pp small { display: none; }
  .ft-pmain { padding: 14px 12px 0; }
  .ft-ph2 { margin: 0; }
  .ft-ph2 > b { font-size: 18px; }
  .ft-ph2 > span { font-size: 13px; }
  .ft-ptools { margin: 10px 0; }
  .ft-pbtn { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .ft-people:has(.ft-pchip.on) .ft-pbtn[data-tap="7"] { display: none; }
  .ft-ptab { border-radius: 10px 10px 0 0; }
  .ft-pr { height: auto; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'a n t' 'a e e'; gap: 1px 10px; padding: 7px 10px; }
  .ft-pp, .ft-pp > span:last-child { display: contents; }
  .ft-pp .lx-av { grid-area: a; align-self: center; }
  .ft-pp b { grid-area: n; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft-pt { grid-area: t; justify-self: end; }
  .ft-pt i { font-size: 11px; }
  .ft-pt i.on { animation: ft-fade 0.35s var(--ease) backwards; }
  .ft-pt i:has(~ i:not([data-in]), ~ i.on) { display: none; }
  .ft-pe { grid-area: e; font-size: 12px; color: var(--ink-3c); }
  .ft-pe .ft-dash::before { content: 'No email yet'; }
  .ft-ptab ol > :is(.ft-pr:not([data-in]), .ft-pr.on, .ft-pr[data-in='0']:not(.gone)) ~ :is(.ft-pr:not([data-in]), .ft-pr.on, .ft-pr[data-in='0']:not(.gone)) ~ :is(.ft-pr:not([data-in]), .ft-pr.on, .ft-pr[data-in='0']:not(.gone)) ~ :is(.ft-pr:not([data-in]), .ft-pr.on, .ft-pr[data-in='0']:not(.gone)) ~ .ft-pr { display: none; }
  .ft-people:has(.ft-toast.on) .ft-ptab ol > :is(.ft-pr:not([data-in]), .ft-pr.on, .ft-pr[data-in='0']:not(.gone)) ~ :is(.ft-pr:not([data-in]), .ft-pr.on, .ft-pr[data-in='0']:not(.gone)) ~ .ft-pr { display: none; }
  .ft-toast { white-space: normal; width: calc(100% - 24px); bottom: 12px; padding: 9px 12px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-scene *, .ft-scene *::after, .ft-line-t { animation: none !important; transition: none !important; }
}

/* right to left (KIT.md § 6.15, 16): the kit keeps the picture left to right; the name and the line under it are page text */
[dir='rtl'] .ft-cap { direction: rtl; }
/* Arabic (LF, 2026-10-10): the Build with AI panel is the app's own panel, read right to left: its marks at the right of each line, the close button at the left */
[dir='rtl'] .ft-sk { direction: rtl; }
[dir='rtl'] :is(.ft-sk, .ft-pwin, .ft-fit) :is(p, li, b, span, em, small, q) { unicode-bidi: plaintext; }

/* links inside the kit's copy on these pages read as links */
.kit-capg-h a, .kit-cap dd a, .kit-spot-copy a, .kit-hero-note a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.kit-capg-h a:hover, .kit-cap dd a:hover, .kit-spot-copy a:hover, .kit-hero-note a:hover { text-decoration-color: currentColor; }

/* phones, round 2 (QA2 P-2; agent S, 2026-10-07): a surface switch is a cross-fade over a solid surface, never through a
   blank stage: the surface that leaves stays in place under the one that arrives until it is fully in (0.3s). */
@media (max-width: 860px) {
  .ft-build-in .ft-cv, .ft-build-in .ft-sk { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; background-color: var(--surface); }
  .ft-build-in .ft-cv { display: grid; visibility: hidden; }
  .ft-build-in:has(> .ft-sb.on) .ft-sk { display: grid; visibility: hidden; }
  .ft-build-in:has(> .ft-sb.on) .ft-cv, .ft-build-in:not(:has(> .ft-sb.on)) .ft-sk { visibility: visible; transition-delay: 0s; z-index: 2; animation: ft-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08, the same rule as the flow-builder sheets). An opacity
     cross-fade let the leaving surface read through the arriving one for 0.3s (two surfaces on top of each other), and an
     arriving surface that covers at once is an empty box while its own parts fade in. So the leaving surface stays ON
     TOP, whole, for 0.3s while the arriving one draws underneath it, then it is gone in one frame. */
  @keyframes ft-xf { from, to { z-index: 1; } }
  /* the loop's restart: no fade to nothing on a phone (the stage was blank for about half a second), and the page's
     script marks the root is-first for the first beat, drawn in the same task that clears the last one. Nothing eases
     in that moment, so the last picture is replaced by the complete first one in one frame. */
  .ft-scene.is-first, .ft-scene.is-first *, .ft-scene.is-first *::before, .ft-scene.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen that REPLACES another inside one phone (the profile over the chat) arrives whole: the one it replaces leaves in the same
     frame, so an entrance from nothing was a blank screen for a frame or two */
  .ft-scene .ps-phone .ft-prof { animation: none !important; }
}