/* The app pixel icons (src/lib/brand/pixel-icons.ts, set C), drawn exactly. Generated by _tools/flow-list/icons.mjs. */
.fl-px[data-px="home"]{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23b3aaec%27 d=%27M11 2h1v1h-1zM10 3h2v1h-2zM9 4h2v1h-2zM8 5h3v1h-3zM7 6h3v1h-3zM6 7h4v1h-4zM4 8h5v1h-5zM3 9h5v1h-5zM2 10h4v1h-4zM1 11h3v1h-3z%27/%3E%3Cpath fill=%27%23a197e1%27 d=%27M12 2h1v1h-1zM12 3h2v1h-2zM11 4h3v1h-3zM11 5h3v1h-3zM10 6h3v1h-3zM10 7h3v1h-3zM9 8h3v1h-3zM8 9h3v1h-3zM6 10h4v1h-4zM4 11h5v1h-5zM4 12h4v1h-4zM4 13h2v1h-2z%27/%3E%3Cpath fill=%27%238f83d6%27 d=%27M14 4h1v1h-1zM14 5h2v1h-2zM13 6h3v1h-3zM13 7h2v1h-2zM12 8h3v1h-3zM11 9h3v1h-3zM10 10h4v1h-4zM9 11h4v1h-4zM8 12h4v1h-4zM6 13h5v1h-5zM4 14h5v1h-5zM4 15h3v1h-3zM4 16h1v1h-1z%27/%3E%3Cpath fill=%27%237d70cb%27 d=%27M16 6h1v1h-1zM15 7h3v1h-3zM15 8h3v1h-3zM14 9h3v1h-3zM14 10h3v1h-3zM13 11h3v1h-3zM12 12h3v1h-3zM11 13h3v1h-3zM9 14h4v1h-4zM7 15h3v1h-3zM5 16h5v1h-5zM4 17h5v1h-5zM4 18h3v1h-3z%27/%3E%3Cpath fill=%27%236c5cb2%27 d=%27M18 8h2v1h-2zM17 9h3v1h-3zM17 10h3v1h-3zM16 11h3v1h-3zM15 12h3v1h-3zM14 13h4v1h-4zM13 14h4v1h-4zM14 15h2v1h-2zM14 16h1v1h-1zM9 17h1v1h-1zM7 18h3v1h-3zM4 19h6v1h-6zM4 20h5v1h-5zM4 21h2v1h-2z%27/%3E%3Cpath fill=%27%235b478b%27 d=%27M20 9h1v1h-1zM20 10h2v1h-2zM19 11h3v1h-3zM18 12h2v1h-2zM18 13h2v1h-2zM17 14h3v1h-3zM16 15h3v1h-3zM15 16h3v1h-3zM14 17h3v1h-3zM14 18h2v1h-2zM14 19h1v1h-1zM9 20h1v1h-1zM6 21h4v1h-4zM4 22h6v1h-6z%27/%3E%3Cpath fill=%27%234b3363%27 d=%27M22 11h1v1h-1zM19 15h1v1h-1zM18 16h2v1h-2zM17 17h3v1h-3zM16 18h4v1h-4zM15 19h4v1h-4zM14 20h4v1h-4zM14 21h3v1h-3zM14 22h1v1h-1z%27/%3E%3Cpath fill=%27%233a1e3c%27 d=%27M19 19h1v1h-1zM18 20h2v1h-2zM17 21h3v1h-3zM15 22h5v1h-5z%27/%3E%3C/svg%3E")}
.fl-px[data-px="heart"]{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23b3aaec%27 d=%27M6 3h2v1h-2zM4 4h3v1h-3zM3 5h4v1h-4zM2 6h4v1h-4zM2 7h2v1h-2z%27/%3E%3Cpath fill=%27%23a197e1%27 d=%27M7 4h3v1h-3zM7 5h2v1h-2zM6 6h3v1h-3zM4 7h4v1h-4zM2 8h5v1h-5zM2 9h3v1h-3z%27/%3E%3Cpath fill=%27%238f83d6%27 d=%27M9 5h2v1h-2zM9 6h2v1h-2zM8 7h3v1h-3zM7 8h3v1h-3zM5 9h4v1h-4zM2 10h6v1h-6zM3 11h3v1h-3z%27/%3E%3Cpath fill=%27%237d70cb%27 d=%27M14 4h1v1h-1zM13 5h1v1h-1zM11 6h3v1h-3zM11 7h2v1h-2zM10 8h3v1h-3zM9 9h3v1h-3zM8 10h3v1h-3zM6 11h4v1h-4zM4 12h5v1h-5zM5 13h2v1h-2z%27/%3E%3Cpath fill=%27%236c5cb2%27 d=%27M16 3h1v1h-1zM15 4h2v1h-2zM14 5h3v1h-3zM14 6h2v1h-2zM13 7h3v1h-3zM13 8h2v1h-2zM12 9h3v1h-3zM11 10h3v1h-3zM10 11h3v1h-3zM9 12h3v1h-3zM7 13h4v1h-4zM6 14h4v1h-4zM6 15h2v1h-2z%27/%3E%3Cpath fill=%27%235b478b%27 d=%27M17 3h1v1h-1zM17 4h2v1h-2zM17 5h2v1h-2zM16 6h2v1h-2zM16 7h2v1h-2zM15 8h3v1h-3zM15 9h2v1h-2zM14 10h3v1h-3zM13 11h3v1h-3zM12 12h3v1h-3zM11 13h3v1h-3zM10 14h3v1h-3zM8 15h4v1h-4zM7 16h4v1h-4zM8 17h1v1h-1z%27/%3E%3Cpath fill=%27%234b3363%27 d=%27M19 4h1v1h-1zM19 5h2v1h-2zM18 6h3v1h-3zM18 7h2v1h-2zM18 8h2v1h-2zM17 9h3v1h-3zM17 10h2v1h-2zM16 11h3v1h-3zM15 12h3v1h-3zM14 13h3v1h-3zM13 14h3v1h-3zM12 15h3v1h-3zM11 16h3v1h-3zM9 17h4v1h-4zM9 18h3v1h-3z%27/%3E%3Cpath fill=%27%233a1e3c%27 d=%27M21 6h1v1h-1zM20 7h2v1h-2zM20 8h2v1h-2zM20 9h2v1h-2zM19 10h3v1h-3zM19 11h2v1h-2zM18 12h2v1h-2zM17 13h2v1h-2zM16 14h2v1h-2zM15 15h3v1h-3zM14 16h3v1h-3zM13 17h3v1h-3zM12 18h3v1h-3zM10 19h4v1h-4zM11 20h2v1h-2z%27/%3E%3C/svg%3E")}
.fl-px[data-px="form"]{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23b3aaec%27 d=%27M4 2h3v1h-3zM2 3h4v1h-4zM2 4h3v1h-3zM1 5h3v1h-3zM1 6h2v1h-2z%27/%3E%3Cpath fill=%27%23a197e1%27 d=%27M7 2h3v1h-3zM6 3h3v1h-3zM5 4h4v1h-4zM4 5h4v1h-4zM3 6h4v1h-4zM1 7h5v1h-5zM1 8h4v1h-4zM1 9h2v1h-2z%27/%3E%3Cpath fill=%27%238f83d6%27 d=%27M10 2h2v1h-2zM9 3h3v1h-3zM9 4h3v1h-3zM8 5h3v1h-3zM7 6h4v1h-4zM6 7h4v1h-4zM5 8h1v1h-1zM8 8h1v1h-1zM3 9h3v1h-3zM1 10h5v1h-5zM1 11h4v1h-4zM1 12h1v1h-1z%27/%3E%3Cpath fill=%27%237d70cb%27 d=%27M12 2h3v1h-3zM12 3h3v1h-3zM12 4h3v1h-3zM11 5h3v1h-3zM11 6h3v1h-3zM10 7h3v1h-3zM9 8h2v1h-2zM9 9h1v1h-1zM9 10h2v1h-2zM5 11h5v1h-5zM2 12h7v1h-7zM1 13h6v1h-6zM2 14h3v1h-3z%27/%3E%3Cpath fill=%27%236c5cb2%27 d=%27M15 2h3v1h-3zM15 3h3v1h-3zM15 4h3v1h-3zM14 5h3v1h-3zM14 6h3v1h-3zM13 7h4v1h-4zM13 8h3v1h-3zM14 9h1v1h-1zM13 10h2v1h-2zM10 11h4v1h-4zM9 12h4v1h-4zM7 13h5v1h-5zM5 14h6v1h-6zM2 15h7v1h-7zM3 16h5v1h-5z%27/%3E%3Cpath fill=%27%235b478b%27 d=%27M18 2h2v1h-2zM18 3h3v1h-3zM18 4h2v1h-2zM17 5h3v1h-3zM17 6h3v1h-3zM17 7h3v1h-3zM18 8h1v1h-1zM18 9h1v1h-1zM14 11h4v1h-4zM13 12h4v1h-4zM12 13h4v1h-4zM11 14h4v1h-4zM9 15h5v1h-5zM8 16h5v1h-5zM5 17h4v1h-4zM5 18h3v1h-3zM4 19h3v1h-3z%27/%3E%3Cpath fill=%27%234b3363%27 d=%27M21 3h1v1h-1zM20 4h2v1h-2zM20 5h3v1h-3zM20 6h3v1h-3zM20 7h3v1h-3zM19 8h3v1h-3zM19 9h3v1h-3zM18 10h3v1h-3zM18 11h3v1h-3zM17 12h3v1h-3zM16 13h4v1h-4zM15 14h4v1h-4zM14 15h4v1h-4zM13 16h4v1h-4zM4 20h2v1h-2zM4 21h1v1h-1z%27/%3E%3Cpath fill=%27%233a1e3c%27 d=%27M22 8h1v1h-1zM22 9h1v1h-1zM21 10h2v1h-2zM21 11h2v1h-2zM20 12h3v1h-3zM20 13h3v1h-3zM19 14h3v1h-3zM18 15h4v1h-4zM17 16h4v1h-4z%27/%3E%3C/svg%3E")}
.fl-px[data-px="moodboard"]{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23b3aaec%27 d=%27M1 1h5v1h-5zM1 2h4v1h-4zM1 3h4v1h-4zM1 4h3v1h-3zM1 5h1v1h-1z%27/%3E%3Cpath fill=%27%23a197e1%27 d=%27M6 1h3v1h-3zM5 2h4v1h-4zM5 3h4v1h-4zM4 4h4v1h-4zM2 5h6v1h-6zM1 6h6v1h-6zM1 7h5v1h-5zM1 8h3v1h-3z%27/%3E%3Cpath fill=%27%238f83d6%27 d=%27M9 1h2v1h-2zM9 2h2v1h-2zM9 3h2v1h-2zM8 4h3v1h-3zM8 5h3v1h-3zM7 6h4v1h-4zM6 7h5v1h-5zM4 8h6v1h-6zM1 9h8v1h-8zM1 10h7v1h-7z%27/%3E%3Cpath fill=%27%237d70cb%27 d=%27M13 1h4v1h-4zM13 2h4v1h-4zM13 3h4v1h-4zM13 4h3v1h-3zM13 5h3v1h-3zM13 6h3v1h-3zM13 7h2v1h-2zM10 8h1v1h-1zM13 8h2v1h-2zM9 9h2v1h-2zM13 9h1v1h-1zM8 10h3v1h-3zM1 13h9v1h-9zM1 14h8v1h-8zM1 15h6v1h-6zM1 16h3v1h-3z%27/%3E%3Cpath fill=%27%236c5cb2%27 d=%27M17 1h4v1h-4zM17 2h4v1h-4zM17 3h3v1h-3zM16 4h4v1h-4zM16 5h4v1h-4zM16 6h4v1h-4zM15 7h4v1h-4zM15 8h4v1h-4zM14 9h4v1h-4zM13 10h5v1h-5zM10 13h1v1h-1zM13 13h3v1h-3zM9 14h2v1h-2zM13 14h2v1h-2zM7 15h4v1h-4zM13 15h1v1h-1zM4 16h7v1h-7zM1 17h10v1h-10zM1 18h8v1h-8zM1 19h6v1h-6zM1 20h2v1h-2z%27/%3E%3Cpath fill=%27%235b478b%27 d=%27M21 1h2v1h-2zM21 2h2v1h-2zM20 3h3v1h-3zM20 4h3v1h-3zM20 5h3v1h-3zM20 6h3v1h-3zM19 7h4v1h-4zM19 8h4v1h-4zM18 9h4v1h-4zM18 10h4v1h-4zM16 13h4v1h-4zM15 14h5v1h-5zM14 15h5v1h-5zM13 16h5v1h-5zM13 17h4v1h-4zM9 18h2v1h-2zM13 18h3v1h-3zM7 19h4v1h-4zM13 19h2v1h-2zM3 20h8v1h-8zM1 21h10v1h-10zM1 22h8v1h-8z%27/%3E%3Cpath fill=%27%234b3363%27 d=%27M22 9h1v1h-1zM22 10h1v1h-1zM20 13h3v1h-3zM20 14h3v1h-3zM19 15h4v1h-4zM18 16h5v1h-5zM17 17h5v1h-5zM16 18h5v1h-5zM15 19h5v1h-5zM13 20h6v1h-6zM13 21h5v1h-5zM9 22h2v1h-2zM13 22h4v1h-4z%27/%3E%3Cpath fill=%27%233a1e3c%27 d=%27M22 17h1v1h-1zM21 18h2v1h-2zM20 19h3v1h-3zM19 20h4v1h-4zM18 21h5v1h-5zM17 22h6v1h-6z%27/%3E%3C/svg%3E")}
.fl-px[data-px="comparison"]{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23b3aaec%27 d=%27M2 9h6v1h-6zM2 10h5v1h-5zM2 11h3v1h-3z%27/%3E%3Cpath fill=%27%23a197e1%27 d=%27M13 1h2v1h-2zM13 2h2v1h-2zM13 3h2v1h-2zM13 4h1v1h-1zM13 5h1v1h-1zM13 6h1v1h-1zM8 9h3v1h-3zM7 10h4v1h-4zM5 11h5v1h-5zM2 12h7v1h-7zM2 13h5v1h-5zM2 14h2v1h-2z%27/%3E%3Cpath fill=%27%238f83d6%27 d=%27M15 1h3v1h-3zM15 2h3v1h-3zM15 3h2v1h-2zM14 4h3v1h-3zM14 5h3v1h-3zM14 6h3v1h-3zM13 7h3v1h-3zM13 8h3v1h-3zM13 9h2v1h-2zM13 10h1v1h-1zM10 11h1v1h-1zM13 11h1v1h-1zM9 12h2v1h-2zM7 13h4v1h-4zM4 14h6v1h-6zM2 15h7v1h-7zM2 16h5v1h-5zM2 17h1v1h-1z%27/%3E%3Cpath fill=%27%237d70cb%27 d=%27M18 1h2v1h-2zM18 2h2v1h-2zM17 3h3v1h-3zM17 4h3v1h-3zM17 5h3v1h-3zM17 6h2v1h-2zM16 7h3v1h-3zM16 8h3v1h-3zM15 9h3v1h-3zM14 10h4v1h-4zM14 11h3v1h-3zM13 12h3v1h-3zM13 13h2v1h-2zM10 14h1v1h-1zM13 14h1v1h-1zM9 15h2v1h-2zM7 16h4v1h-4zM3 17h8v1h-8zM2 18h7v1h-7zM2 19h4v1h-4z%27/%3E%3Cpath fill=%27%236c5cb2%27 d=%27M20 1h2v1h-2zM20 2h2v1h-2zM20 3h2v1h-2zM20 4h2v1h-2zM20 5h2v1h-2zM19 6h3v1h-3zM19 7h3v1h-3zM19 8h3v1h-3zM18 9h3v1h-3zM18 10h3v1h-3zM17 11h3v1h-3zM16 12h3v1h-3zM15 13h4v1h-4zM14 14h4v1h-4zM13 15h4v1h-4zM13 16h3v1h-3zM13 17h2v1h-2zM9 18h2v1h-2zM13 18h1v1h-1zM6 19h5v1h-5zM2 20h9v1h-9zM2 21h7v1h-7zM2 22h3v1h-3z%27/%3E%3Cpath fill=%27%235b478b%27 d=%27M21 9h1v1h-1zM21 10h1v1h-1zM20 11h2v1h-2zM19 12h3v1h-3zM19 13h3v1h-3zM18 14h3v1h-3zM17 15h4v1h-4zM16 16h4v1h-4zM15 17h4v1h-4zM14 18h4v1h-4zM13 19h4v1h-4zM13 20h3v1h-3zM9 21h2v1h-2zM13 21h1v1h-1zM5 22h6v1h-6z%27/%3E%3Cpath fill=%27%234b3363%27 d=%27M21 14h1v1h-1zM21 15h1v1h-1zM20 16h2v1h-2zM19 17h3v1h-3zM18 18h4v1h-4zM17 19h4v1h-4zM16 20h4v1h-4zM14 21h5v1h-5zM13 22h4v1h-4z%27/%3E%3Cpath fill=%27%233a1e3c%27 d=%27M21 19h1v1h-1zM20 20h2v1h-2zM19 21h3v1h-3zM17 22h5v1h-5z%27/%3E%3C/svg%3E")}
.fl-px[data-px="flow"]{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23b3aaec%27 d=%27M1 22h5v1h-5zM1 21h4v1h-4zM1 20h4v1h-4zM1 19h3v1h-3zM1 18h1v1h-1z%27/%3E%3Cpath fill=%27%23a197e1%27 d=%27M6 22h1v1h-1zM5 21h2v1h-2zM5 20h4v1h-4zM4 19h4v1h-4zM2 18h5v1h-5zM1 17h6v1h-6z%27/%3E%3Cpath fill=%27%238f83d6%27 d=%27M9 20h3v1h-3zM8 19h4v1h-4zM10 18h2v1h-2zM10 17h2v1h-2zM10 16h1v1h-1z%27/%3E%3Cpath fill=%27%237d70cb%27 d=%27M11 16h1v1h-1zM10 15h2v1h-2zM9 14h5v1h-5zM9 13h4v1h-4zM9 12h3v1h-3zM9 11h2v1h-2zM9 10h1v1h-1z%27/%3E%3Cpath fill=%27%236c5cb2%27 d=%27M14 14h1v1h-1zM13 13h2v1h-2zM12 12h5v1h-5zM11 11h5v1h-5zM10 10h5v1h-5zM9 9h6v1h-6z%27/%3E%3Cpath fill=%27%235b478b%27 d=%27M17 12h3v1h-3zM16 11h4v1h-4zM18 10h2v1h-2zM18 9h2v1h-2zM18 8h1v1h-1z%27/%3E%3Cpath fill=%27%234b3363%27 d=%27M19 8h1v1h-1zM18 7h2v1h-2zM17 6h5v1h-5zM17 5h4v1h-4zM17 4h3v1h-3zM17 3h2v1h-2zM17 2h1v1h-1z%27/%3E%3Cpath fill=%27%233a1e3c%27 d=%27M22 6h1v1h-1zM21 5h2v1h-2zM20 4h3v1h-3zM19 3h4v1h-4zM18 2h5v1h-5zM17 1h6v1h-6z%27/%3E%3C/svg%3E")}
/* ==========================================================================
   Flow studio, List and Cards (Encore 4.135.0 onward), drawn for the site.
   Source of truth: the app's FlowSequence.tsx / FlowStoryList.tsx / FlowCardRow.tsx
   (List: plum welcome row, numbered line, a face of each step's real content,
   Ready on the step, peach ending row; the flow's sentence and Draft / Live
   beside the title; List | Cards in the header). Built by _tools/flow-list;
   copied to every page folder that draws a Flow studio. Edit here, then run
   `node site-v11/_tools/flow-list/sync.mjs`.
   ========================================================================== */
.fl { --fl-plum: #3A1E3C; --fl-cream: #F6F3EE; --fl-ink2: #6E5A70; --fl-ink3: #7D6B7F; --fl-field: #F2F0F3;
  --fl-hair: rgba(58, 30, 60, .12); --fl-edge: rgba(58, 30, 60, .1); --fl-edge2: rgba(58, 30, 60, .24); --fl-pick: rgba(58, 30, 60, .2);
  --fl-peach: #FBE6D8; --fl-lav: #E7E3F7; --fl-sky: #DCE8F7; --fl-sage: #DCEFE2; --fl-ready: #2BA89E; --fl-violet: #5B478B; --fl-px2: #A197E1;
  --fl-wash: linear-gradient(100deg, #ECF2FB 0%, #EFEEFB 55%, #F3EFFC 100%);
  font-variant-ligatures: no-common-ligatures; }
.fl-px { display: inline-block; flex: none; width: 24px; height: 24px; background: no-repeat center / 100% 100%; image-rendering: pixelated; }

/* The studio: the side column (the flow said once) and the steps. */
.fl-studio { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--fl-side, 300px) minmax(0, 1fr); column-gap: var(--fl-gap, 52px); padding: 36px 36px 30px; background: var(--fl-wash); }
.fl-side { min-width: 0; align-self: start; }
.fl-k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 1.3; color: var(--fl-ink2); }
.fl-t { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 1; letter-spacing: -.025em; color: var(--fl-plum); text-wrap: balance; }
.fl-say { margin: 18px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.5; letter-spacing: -.005em; color: var(--fl-plum); }
.fl-say u { text-decoration: none; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(transparent 64%, var(--fl-lav) 64%); transition: background-image .4s; }
.fl-say u[data-k="moodboard"] { background-image: linear-gradient(transparent 64%, var(--fl-sky) 64%); }
.fl-say u[data-k="comparison"] { background-image: linear-gradient(transparent 64%, var(--fl-peach) 64%); }
.fl-meta { margin: 18px 0 0; font-size: 15px; line-height: 1.4; color: var(--fl-ink2); }
.fl-state { margin-top: 26px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--fl-hair); }
.fl-word { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--fl-plum); }
.fl-line { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--fl-ink2); }

.fl-main { position: relative; min-width: 0; }
.fl-top { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.fl-views { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fl-field); }
.fl-views > span { height: 32px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--fl-ink2); transition: background-color .25s, color .25s; }
.fl-views > span.is-on { background: var(--fl-plum); color: #FFFFFF; }
.fl-hint { margin: 22px 0 0 56px; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--fl-ink2); }

/* List: rows down a line, the number of each step on it. */
.fl-list { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fl-list::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 46px; width: 2px; background: var(--fl-hair); }
.fl-list[data-live]::before { background: var(--fl-plum); }
.fl-row { position: relative; padding-left: 56px; }
.fl-node { position: absolute; left: 6px; top: calc(var(--fl-row-h, 92px) / 2 - 16px); z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--fl-edge2); font-size: 14px; font-weight: 600; color: var(--fl-plum); }
.fl-node .fl-px { width: 24px; height: 24px; }
.fl-card { position: relative; min-height: var(--fl-row-h, 92px); display: grid; grid-template-columns: var(--fl-name-w, 228px) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 18px 12px 24px; border-radius: 18px; background: #FFFFFF; color: var(--fl-plum); box-shadow: inset 0 0 0 1px var(--fl-edge); transition: box-shadow .25s, transform .25s; }
.fl-row.is-picked .fl-card { box-shadow: inset 0 0 0 1.5px var(--fl-pick); }
.fl-row[data-tone="plum"] .fl-card { background: var(--fl-plum); color: var(--fl-cream); box-shadow: none; }
.fl-row[data-tone="peach"] .fl-card { background: var(--fl-peach); box-shadow: none; }
.fl-kind { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-size: 14px; line-height: 1.3; color: var(--fl-ink3); }
.fl-kind .fl-px { width: 24px; height: 24px; margin: -4px 0; }
.fl-row[data-tone="plum"] .fl-kind { color: rgba(246, 243, 238, .8); }
.fl-name { display: block; margin: 2px 0 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.fl-face { min-width: 0; }
.fl-note { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--serif); font-size: 18px; line-height: 1.35; }
.fl-row[data-tone="plum"] .fl-note { color: rgba(246, 243, 238, .9); }
.fl-q { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.fl-q small { white-space: nowrap; font-size: 14px; color: var(--fl-ink3); }
.fl-q p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.fl-imgs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.fl-imgs img { flex: none; width: 60px; height: 48px; border-radius: 7px; object-fit: cover; }
.fl-imgs span, .fl-pair span.n { white-space: nowrap; padding-left: 6px; font-size: 14px; color: var(--fl-ink2); }
.fl-pair { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fl-pair img { flex: none; width: 92px; height: 58px; border-radius: 8px; object-fit: cover; }
.fl-pair i { font-style: normal; font-family: var(--serif); font-size: 17px; color: var(--fl-ink3); }
.fl-lne { margin: 0; font-size: 15px; line-height: 1.4; color: var(--fl-ink2); }
.fl-ready { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; color: var(--fl-ink2); }
.fl-ready::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-ready); }
.fl-row[data-tone="plum"] .fl-ready { color: rgba(246, 243, 238, .8); }
/* A step that needs work says so in the server's own words, on the step. */
.fl-need { grid-column: 2 / 4; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; border-radius: 12px; background: var(--fl-peach); color: var(--fl-plum); }
.fl-need p { margin: 0; font-size: 15px; line-height: 1.35; }
.fl-need b { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fl-row.is-need .fl-node { color: #C47D10; box-shadow: inset 0 0 0 1.5px #C47D10; }

/* Cards: the same steps as one flat row; under each its number, its name, Ready. */
.fl-cards { display: none; }
.fl[data-fl-view="cards"] .fl-list { display: none; }
.fl[data-fl-view="cards"] .fl-hint { margin-left: 0; }
.fl[data-fl-view="cards"] .fl-cards { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.fl-cardc { flex: none; width: var(--fl-card-w, 200px); }
.fl-cface { position: relative; height: var(--fl-card-h, 250px); overflow: hidden; border-radius: 18px; background: #FFFFFF; color: var(--fl-plum); box-shadow: 0 0 0 1px rgba(58, 30, 60, .06); }
.fl-cardc.is-picked .fl-cface { box-shadow: 0 0 0 1.5px var(--fl-pick); }
.fl-cface[data-tone="plum"] { background: var(--fl-plum); color: var(--fl-cream); }
.fl-cface[data-tone="peach"] { background: var(--fl-peach); }
.fl-cface[data-tone="violet"] { background: var(--fl-violet); color: #FFFFFF; }
.fl-cface[data-tone="lavender"] { background: var(--fl-lav); }
.fl-clabel { position: absolute; left: 16px; right: 14px; top: 13px; z-index: 1; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--fl-ink2); }
.fl-clabel .fl-px { width: 24px; height: 24px; margin: -4px 0; }
.fl-cface[data-tone="plum"] .fl-clabel { color: rgba(246, 243, 238, .9); }
.fl-cface[data-tone="violet"] .fl-clabel { color: rgba(255, 255, 255, .9); }
.fl-cbig { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; }
.fl-cbig b { display: block; font-weight: 400; font-family: var(--serif); font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.fl-cbig span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; }
.fl-cface[data-tone="plum"] .fl-cbig span { color: rgba(246, 243, 238, .85); }
.fl-cq { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; font-family: var(--serif); font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.fl-cimgs { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 3px; }
.fl-cimgs img, .fl-cpair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-cpair { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.fl-cpair i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; font-style: normal; font-family: var(--serif); font-size: 17px; color: var(--fl-plum); }
.fl-cchip { position: absolute; left: 10px; bottom: 10px; z-index: 1; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: 14px; font-weight: 500; color: var(--fl-plum); }
.fl-cchip .fl-px { width: 24px; height: 24px; margin: -4px 0; }
.fl-cline { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--fl-plum); }
.fl-cname { margin: 12px 0 0; padding: 0 4px; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fl-cname small { flex: none; font-size: 14px; font-weight: 500; color: var(--fl-ink3); }
.fl-cname b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.fl-cardc .fl-ready { margin: 4px 0 0 4px; }
/* Cards' header: the flow said once across the top, Draft or Live at the right (as the app's Cards view). */
.fl[data-fl-view="cards"] .fl-studio { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; row-gap: 26px; }
.fl[data-fl-view="cards"] .fl-side { display: contents; }
.fl[data-fl-view="cards"] .fl-sidetext { grid-column: 1; grid-row: 1; max-width: 640px; }
.fl[data-fl-view="cards"] .fl-sideright { grid-column: 2; grid-row: 1; text-align: right; }
.fl[data-fl-view="cards"] .fl-t { font-size: 44px; }
.fl[data-fl-view="cards"] .fl-say { margin-top: 12px; }
.fl[data-fl-view="cards"] .fl-state { margin-top: 18px; padding-top: 0; box-shadow: none; }
.fl[data-fl-view="cards"] .fl-main { grid-column: 1 / 3; grid-row: 2; }
.fl[data-fl-view="cards"] .fl-top { position: absolute; right: 0; top: -0px; display: none; }
.fl-sideright { display: none; }
.fl[data-fl-view="cards"] .fl-sideright { display: block; }
.fl[data-fl-view="cards"] .fl-sideright .fl-views { margin-bottom: 4px; }
.fl[data-fl-view="cards"] .fl-sidetext .fl-meta, .fl[data-fl-view="cards"] .fl-sidetext .fl-state { display: none; }
.fl-sideright .fl-meta { margin-top: 6px; }

/* Preview: what the client sees, as the studio's own Preview shows it (the whole screen, "Previewing · nothing is
   saved", the Director bar at the foot naming the step). */
.fl-pv { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; background: linear-gradient(180deg, #F0EEFB 0%, #FFFFFF 46%); opacity: 0; visibility: hidden; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), visibility 0s .45s; }
.fl.is-preview .fl-pv { opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.fl-pv-pill { position: absolute; right: 18px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 12px; padding: 5px 5px 5px 16px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 8px 24px rgba(59, 31, 61, .08), 0 0 0 1px rgba(58, 30, 60, .06); font-size: 14px; color: var(--fl-ink2); }
.fl-pv-pill b { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fl-pick); font-weight: 500; color: var(--fl-plum); }
.fl-pv-stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 68px auto 16px; width: 900px; border-radius: 20px; overflow: clip; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(58, 30, 60, .08), 0 18px 48px rgba(59, 31, 61, .08); }
.fl-dir { flex: none; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 76px 0 28px; background: var(--fl-plum); color: rgba(246, 243, 238, .8); font-size: 15px; white-space: nowrap; }
.fl-dir-nav { display: inline-flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--fl-cream); }
.fl-dir-nav i { width: 0; height: 0; border-style: solid; border-width: 5px 7px 5px 0; border-color: transparent currentColor transparent transparent; }
.fl-dir-nav i + span + i { border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor; }
.fl-dir-t { font-family: var(--serif); font-size: 22px; color: var(--fl-cream); }
.fl-dir .sp { flex: 1; }

/* Motion is the page's (GSAP loops); these keep the switch-overs calm and off under reduced motion. */
.fl-row .fl-card, .fl-cface { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .fl-pv, .fl.is-preview .fl-pv, .fl-views > span, .fl-card { transition: none; } }

/* The heroes' window (home, /product/flow): 1240 wide, the studio at the app's own proportions. */
.fl-hero { height: 760px; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 18px; position: relative; }
.fl-hero > .ka-bar { flex: none; }
.fl-hero .fl-studio { --fl-side: 320px; --fl-gap: 56px; }
.fl-hero .fl-t { font-size: 48px; }
.fl-hero .fl-say { font-size: 20px; }
.fl-hero[data-fl-view="cards"] .fl-t { font-size: 44px; }
.fl-hero .fl-row, .fl-hero .fl-cardc { cursor: pointer; }
.fl-hero .fl-row:hover .fl-card { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--fl-edge), 0 8px 24px rgba(59, 31, 61, .06); }
.fl-hero .fl-row.is-picked:hover .fl-card { box-shadow: inset 0 0 0 1.5px var(--fl-pick), 0 8px 24px rgba(59, 31, 61, .06); }
.fl-hero .fl-pv-stage .v9b-prev-in { height: 100%; }
.fl-hero .fl-cards { --fl-card-w: 214px; --fl-card-h: 270px; }
/* A closed Preview takes no clicks and no focus: its shown pane sets visibility: visible, which would win. */
.fl:not(.is-preview) .fl-pv, .fl:not(.is-preview) .fl-pv * { visibility: hidden !important; pointer-events: none; }

/* Phone List (the pages' phone compositions, ≤600px). */
.fl-ph { --fl-row-h: 62px; }
.fl-ph .fl-t { font-size: 30px; margin-top: 8px; }
.fl-ph .fl-meta { margin-top: 8px; font-size: 14px; }
.fl-list--ph { margin-top: 16px; gap: 8px; }
.fl-list--ph::before { left: 17px; top: 31px; bottom: 31px; }
.fl-list--ph .fl-row { padding-left: 44px; }
.fl-list--ph .fl-node { left: 2px; width: 32px; height: 32px; }
.fl-list--ph .fl-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 14px 9px 16px; border-radius: 16px; }
.fl-list--ph .fl-kind { font-size: 14px; }
.fl-list--ph .fl-name { font-size: 19px; }
.fl-ph .fl-row[data-fs-stop] { cursor: pointer; }
.fl-ph .fl-row[data-fs-stop]:focus-visible { outline: 2px solid #8F83D6; outline-offset: 2px; border-radius: 16px; }
.fl-list--ph .fl-name { white-space: normal; overflow: visible; text-overflow: clip; }

/* The role and template pages' studio windows (kit-app .ka-win, 1200-1240 wide). */
.ka-win > .fl-studio { flex: 1 0 auto; }
.fl-win .fl-studio { --fl-side: 290px; --fl-gap: 44px; padding: 32px 32px 28px; }
.fl-win .fl-t { font-size: 46px; }
.fl-win .fl-say { font-size: 19px; }
.fl .fl-client[hidden] { display: none !important; }
/* In the role and template windows a long step name wraps to a second line instead of cutting off: the names are the
   page's own content (the app, at full width, keeps one line). */
.fl-win .fl-card { --fl-name-w: 236px; }
.fl-win .fl-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; }
/* The old studio windows' proportion (1200 x 620), so a pinned journey scales the List as large as it did them. */
.ka-win.fl-win { --ka-ar: 1200 / 620; --fl-row-h: 80px; }
.fl-win .fl-studio { padding-top: 24px; padding-bottom: 20px; }
.fl-win .fl-top { margin-bottom: 10px; }
.fl-win .fl-list { gap: 8px; }
.fl-win .fl-list::before { top: 40px; bottom: 40px; }
.fl-win .fl-card { padding-top: 8px; padding-bottom: 8px; }
.fl-win .fl-imgs img { height: 44px; }
.fl-win .fl-pair img { height: 52px; width: 84px; }

/* still tier: the reduced-motion rules above */
html.mo-still .fl-pv,html.mo-still .fl.is-preview .fl-pv,html.mo-still .fl-views > span,html.mo-still .fl-card{transition: none;}