/* =============================================================================
   product-v11.css - the product pages on the homepage v11 look (English, 2026-10-26).

   Markup: app/server/views/frontend/v4/_p11_kit.pug through product_v11.pug,
   data config/v4/p11/*.js. Vytas: "following same vibes, design patterns, copy
   examples, imagery ect you need to revamp all product pages". Sections 1 to 8
   are the homepage's own rules (home-v11.css), copied and renamed p11- so the
   homepage and these pages can change apart; section 9 adds what only the
   product pages draw (the split hero, the part at work in every drawing, the
   use-case row, the rest of the workspace).

   Rules (the homepage's): no gradients (the colour fields are blurred
   pictures), no glass, no hover lift or scale (hover changes colour only),
   lime only as a fill. Nothing here has "tile" or "-cta" in a class name:
   soft-studio.css styles both patterns. Every rule sits under body.p11.
   Raw: the route hands the file's mtime as ?v= (cssP11).

   1. Hero  2. Sentence  3. What you can make  4. Use cases  5. How it works
   5b. AI chat  6. Questions  7. Close  8. Widths  9. Product pages
   ============================================================================= */

/* ---- 1. Hero --------------------------------------------------------------- */
/* The frame starts 8px under the window's top and the header floats over it,
   clear until the page scrolls, then the kit's white bar with its hairline. */
html:root body.p11 .v10-navwrap ~ main { margin-top: 0 !important; }
html:root body.p11 .v10-navwrap { background-color: transparent; transition: background-color 150ms ease, border-color 150ms ease; }
html:root body.p11 .v10-navwrap:has(.v10-nav.is-stuck),
html:root body.p11 .v10-navwrap:has(.v10-mobile.is-open, [data-burger][aria-expanded="true"]) { background-color: #ffffff; border-bottom-color: #e6e4e1; }
html:root body.p11 .v10-navwrap ~ main > section.p11-hero:first-of-type { padding: 8px 8px 0 !important; }
html:root body.p11 .p11-frame {
    position: relative; overflow: hidden; isolation: isolate;
    padding-top: clamp(104px, 8.4vw, 126px);
    border: 1px solid #e6e4e1; border-radius: 24px;
    background-color: #ffffff;
}
/* Two colour fields behind the fan: the results themselves, blurred. They
   sit under the fan, one each side of the middle, and reach about halfway up
   the hero (Vytas: "i like this shadow ... increase more up -- slight to
   cover more hero", then "why so much gradient on right side": the yellow
   picture is gone and both fields are the same size and height). */
html:root body.p11 .p11-amb {
    position: absolute; z-index: -1; width: 56vw; height: 56vw; max-width: 900px; max-height: 900px;
    border-radius: 50%; background-size: cover; background-position: center;
    filter: blur(120px) saturate(1.2); opacity: 0.2; pointer-events: none;
}
html:root body.p11 .p11-amb--a { left: 2vw; bottom: -22vw; background-image: url('/img/home/v11/hero-campaign-boat.webp'); }
html:root body.p11 .p11-amb--b { right: 2vw; bottom: -22vw; background-image: url('/img/home/v11/hero-creator-perfume.webp'); }
html:root body.p11 .p11-hero-in { position: relative; z-index: 2; }
html:root body.p11 .p11-head { max-width: 1240px; margin: 0 auto; text-align: center; }
html:root body.p11 main .p11-for {
    margin: 0 0 22px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: #3d3d3c;
}
/* Two lines, "Your complete creative studio / in one platform", at about
   60px on a 1440 screen (Vytas, of three lines at 84px: "looks too big and
   too narrow"). "creative studio" never parts ("i want 'creative studio' in
   one line"); the size steps down with the window so the first line (15.2em)
   always fits. */
html:root body.p11 main .p11-h1 { max-width: 15.6em; margin: 0 auto; font-size: clamp(36px, 4.1vw, 60px); line-height: 1.05; letter-spacing: -0.032em; text-wrap: balance; }
html:root body.p11 main .p11-h1 .v4-pixel { white-space: nowrap; }
html:root body.p11 main .p11-h1 .p11-h1-a { display: block; }
/* A little heavier than the kit's 550 (Vytas: "maybe slightly increase font
   weight"); the kit sets title weight with !important, so this one must too. */
html:root body.p11 main h1.p11-h1:not(#_p11) { font-weight: 600 !important; }
/* Geist Pixel draws a wider space than Geist, so the chosen words close up a
   little and sit like the words around them. */
html:root body.p11 main .v4-pixel { word-spacing: -0.2em; }
html:root body.p11 main .p11-sub {
    max-width: 820px; margin: 22px auto 0; text-wrap: balance;
    font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -0.005em; color: #6f6d6a;
}

/* The asks: one filled button and one white button with a hairline, the same
   size (Vytas: "See examples ... should look like a button"). */
html:root body.p11 .p11-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
html:root:root body.p11 main a.v4-btn-primary.p11-go {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; min-height: 44px; padding: 0 20px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
}
html:root:root:root body.p11 main a.v4-btn-primary.p11-go--light { background-color: #ffffff; border-color: #ffffff; color: #121212; }
html:root:root:root body.p11 main a.v4-btn-primary.p11-go--light:hover,
html:root:root:root body.p11 main a.v4-btn-primary.p11-go--light:hover * { background-color: #96ff1a; border-color: #96ff1a; color: #121212; }
html:root:root body.p11 main a.v4-btn-secondary.p11-go {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
    background-color: #ffffff; border: 1px solid #d7d4cf; color: #121212;
    transition: border-color 150ms ease, background-color 150ms ease;
}
html:root:root body.p11 main a.v4-btn-secondary.p11-go:hover { border-color: #121212; background-color: #ffffff; color: #121212; }
html:root:root body.p11 main a.p11-go:active { transform: scale(0.98); transition-duration: 100ms; }

/* One proof row: the AI chats, a rule, the customers. Both groups carry the
   same grey, and the logos are dark enough to read. */
html:root body.p11 .p11-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 36px; margin-top: 30px; }
html:root body.p11 .p11-proof-g { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
html:root body.p11 .p11-proof-l { font-size: 13px; color: #8f8d89; }
html:root body.p11 .p11-proof-sep { width: 1px; height: 20px; background-color: #e0ddd8; }
html:root body.p11 .p11-works-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
html:root body.p11 .p11-works-list li { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 1; color: #57554f; }
html:root body.p11 .p11-works-list svg { flex: none; width: 18px; height: 18px; }
html:root body.p11 .p11-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; }
html:root body.p11 .p11-logos li { margin: 0; line-height: 0; }
html:root body.p11 img.p11-logo { display: block; width: auto; max-width: none; margin: 0; opacity: 0.68; }
html:root body.p11 img.p11-logo--creatorflow { height: 14px; }
html:root body.p11 img.p11-logo--postnext { height: 15px; }
html:root body.p11 img.p11-logo--rnj-transport { height: 18px; }
html:root body.p11 img.p11-logo--strategic-mood { height: 16px; }

/* The fan: seven cards dealt from the middle, cut by the frame's bottom edge. */
html:root body.p11 .p11-fan {
    --w0: clamp(150px, 17.5vw, 270px); --step: clamp(96px, 11.4vw, 176px); --dy: 9px;
    position: relative; z-index: 1; height: calc(var(--w0) * 1.06); margin-top: clamp(36px, 3.4vw, 52px);
}
html:root body.p11 .p11-fan-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
html:root body.p11 .p11-card {
    position: absolute; left: 50%; top: 0; margin: 0;
    width: calc(var(--w0) * (1 - var(--ak) * 0.06));
    transform: translateX(-50%) translateX(calc(var(--k) * var(--step))) translateY(calc(var(--ak) * var(--ak) * var(--dy))) rotate(calc(var(--k) * 4deg));
    transform-origin: 50% 120%; z-index: calc(10 - var(--ak));
}
html:root body.p11 a.p11-card-a { position: relative; display: block; color: inherit; text-decoration: none; }
html:root body.p11 .p11-card-pic {
    display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; background-color: #f6f5f4;
    box-shadow: 0 24px 60px rgba(18, 18, 18, 0.16); outline: 1px solid rgba(18, 18, 18, 0.08); outline-offset: -1px;
    transition: outline-color 150ms ease;
}
html:root body.p11 .p11-card-pic img,
html:root body.p11 .p11-card-pic video { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; }
@media (hover: hover) { html:root body.p11 a.p11-card-a:hover .p11-card-pic { outline: 2px solid #c9f2a0; outline-offset: -2px; } }
/* What the card is, small and see-through in its top corner (Vytas: "make
   labels more transparent now too distracting", then "still labels too
   distracting"): no icon, no shadow, the picture shows through. */
html:root body.p11 span.p11-card-l {
    position: absolute; z-index: 2; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px;
    max-width: calc(100% - 20px); padding: 3px 7px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.42);
    font-size: 11px; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: rgba(18, 18, 18, 0.82); white-space: nowrap;
}
html:root body.p11 span.p11-card-l svg { display: none; }
/* The card nearer the middle covers a side card's inner edge, so the label
   sits in the outer corner: top left on the left, top right on the right. */
html:root body.p11 .p11-card--r span.p11-card-l { left: auto; right: 10px; }
@media (prefers-reduced-motion: no-preference) {
    html:root body.p11 .p11-card { animation: p11Deal 950ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(250ms + var(--ak) * 80ms); }
}
@keyframes p11Deal { from { opacity: 0; transform: translateX(-50%) translateY(90px) rotate(0deg); } }

/* A section's sub-line under its title, in the page's grey. */
html:root body.p11 main .v4-head p.v4-sub { max-width: 680px; margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #6f6d6a; }
html:root body.p11 .p11-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html:root body.p11 .p11-nw { white-space: nowrap; }

/* ---- 2. The sentence -------------------------------------------------------- */
html:root body.p11 main > section#what { padding-top: 88px; }
html:root body.p11 main .p11-say-a {
    max-width: 1140px; margin: 0 auto; text-align: center; text-wrap: balance;
    font-size: clamp(28px, 3.2vw, 46px); font-weight: 600; line-height: 1.16; letter-spacing: -0.028em; color: #121212;
}
html:root body.p11 main .p11-say-a .p11-w { transition: opacity 260ms ease; }
html:root body.p11 main .p11-say-a .p11-sent { display: block; text-wrap: balance; }
html:root body.p11 main .p11-say-a .p11-nb { white-space: nowrap; }
html.p11-js:root body.p11 main .p11-say-a .p11-w { opacity: 0.18; }
html.p11-js:root body.p11 main .p11-say-a .p11-w.is-lit { opacity: 1; }
html:root body.p11 main img.p11-inl {
    display: inline-block; width: 1.12em; height: 1.12em; max-width: none; margin: 0 0.04em 0 0.26em; vertical-align: -0.18em;
    object-fit: cover; border-radius: 0.22em; outline: 1px solid rgba(18, 18, 18, 0.08); outline-offset: -1px;
}

/* ---- 3. What you can make: one ink panel with tabs -------------------------- */
html:root body.p11 #make, html:root body.p11 #how, html:root body.p11 #kinds, html:root body.p11 #uses, html:root body.p11 #faq, html:root body.p11 .p11-grp-s { scroll-margin-top: 72px; }
html:root body.p11 .p11-show {
    margin-top: 36px; padding: clamp(18px, 2.6vw, 36px);
    border-radius: 24px; background-color: #121212; color: #ffffff;
}
/* The tabs hug their words and start on the panel's left edge, like the
   text under them (Vytas, of a wide tab with its words in the middle: "why
   where is a gap on left side"). */
html:root body.p11 .p11-tabs {
    display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 5px; border-radius: 15px; background-color: #1f1f1e;
    overflow-x: auto; scrollbar-width: none;
}
html:root body.p11 .p11-tabs::-webkit-scrollbar { display: none; }
html:root body.p11 main button.p11-tab {
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
    min-height: 46px; margin: 0; padding: 0 18px; border: 0; border-radius: 11px; background-color: transparent;
    font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: #a3a19d;
    cursor: pointer; transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) { html:root body.p11 main button.p11-tab:hover { color: #ffffff; } }
html:root body.p11 main button.p11-tab.is-on { background-color: #2c2c2a; color: #ffffff; }
html:root body.p11 main button.p11-tab:focus { outline: 0; }
html.p11-kbd:root body.p11 main button.p11-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
html:root body.p11 .p11-tab-n { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: #6f6d6a; }
html:root body.p11 .p11-tab.is-on .p11-tab-n { color: #a3a19d; }
html:root body.p11 .p11-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; }
html:root body.p11 .p11-tab-bar::after { content: ""; position: absolute; inset: 0; background-color: #96ff1a; transform: scaleX(0); transform-origin: 0 50%; }
html:root body.p11 .p11-show.is-auto .p11-tab.is-on .p11-tab-bar { opacity: 1; }
html:root body.p11 .p11-show.is-auto .p11-tab.is-on .p11-tab-bar::after { animation: p11Bar var(--p11-dwell, 7s) linear forwards; }
@keyframes p11Bar { to { transform: scaleX(1); } }

html:root body.p11 .p11-panes { display: grid; margin-top: clamp(26px, 3vw, 40px); }
html:root body.p11 .p11-pane {
    grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start;
    gap: clamp(28px, 3.6vw, 56px); opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 340ms ease, transform 340ms ease, visibility 0s linear 340ms;
}
html:root body.p11 .p11-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 340ms ease, transform 340ms ease, visibility 0s; }
html:root body.p11 main h3.p11-pane-h {
    margin: 0; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: #ffffff; text-wrap: balance;
}
html:root body.p11 .p11-pane-hl { display: block; }
html:root body.p11 main p.p11-pane-d { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: #c8c6c2; }
html:root body.p11 main p.p11-pane-save { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: #ffffff; }
html:root body.p11 main p.p11-pane-save svg { flex: none; margin-top: 1px; color: #ffffff; }
html:root body.p11 main p.p11-pane-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #8f8d89; }
html:root body.p11 main a.p11-pane-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px;
    font-size: 15px; font-weight: 500; color: #ffffff; text-decoration: underline; text-decoration-color: #4a4a48; text-underline-offset: 5px;
    transition: text-decoration-color 150ms ease;
}
@media (hover: hover) { html:root body.p11 main a.p11-pane-link:hover { text-decoration-color: #ffffff; } }

/* The flow: what goes in, an arrow, the results. Sized from the panel's own
   width (container units), so three results always fit beside the copy. The
   input sits quiet (a hairline frame, not a white one) so the eye lands on
   the results; every label shares one line. */
html:root body.p11 .p11-pane-flow { container-type: inline-size; min-width: 0; display: flex; align-items: flex-end; gap: 16px; }
html:root body.p11 .p11-pane-flow > * { --oh: min(320px, calc((100cqi - 100px) / var(--sum, 2.95))); }
html:root body.p11 .p11-in { flex: none; display: flex; flex-direction: column; gap: 10px; width: calc(var(--oh) * 0.5); }
html:root body.p11 .p11-in-card { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; border: 1px solid #3a3a38; background-color: #1f1f1e; }
html:root body.p11 .p11-in-card img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.p11 .p11-in-card--text { aspect-ratio: auto; padding: 14px 15px; border: 0; border-radius: 14px 14px 14px 4px; background-color: #ffffff; }
html:root body.p11 span.p11-in-q { display: block; font-size: 13.5px; line-height: 1.45; color: #121212; }
html:root body.p11 .p11-in-card--kit {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 12px; border: 0; background-color: #f7eee4; color: #1e1e1c;
}
html:root body.p11 span.p11-in-kit-n { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1e1e1c; }
html:root body.p11 .p11-in-kit-sw { display: grid; grid-template-columns: repeat(2, 20px); gap: 6px; }
html:root body.p11 .p11-in-kit-sw i { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.1); }
html:root body.p11 span.p11-in-kit-aa { font-size: 24px; font-weight: 600; line-height: 1; color: #1e1e1c; }
html:root body.p11 .p11-in--both { gap: 8px; }
html:root body.p11 .p11-in--both .p11-in-card--pic { aspect-ratio: 1 / 1; }
html:root body.p11 .p11-in--both .p11-in-card--text { padding: 10px 12px; }
html:root body.p11 .p11-in--both span.p11-in-q { font-size: 12.5px; line-height: 1.4; }
html:root body.p11 span.p11-in-l { font-size: 12.5px; line-height: 1.3; color: #a3a19d; }
html:root body.p11 .p11-flow-go {
    flex: none; align-self: center; display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; background-color: #2c2c2a; color: #ffffff;
}
html:root body.p11 .p11-outs { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 14px; }
html:root body.p11 .p11-out { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 0; }
html:root body.p11 .p11-out-pic {
    position: relative; display: block; overflow: hidden; height: var(--oh); aspect-ratio: var(--r, 4 / 5);
    border-radius: 14px; background-color: #2c2c2a;
}
html:root body.p11 .p11-out-pic img,
html:root body.p11 .p11-out-pic video { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.p11 span.p11-out-cap {
    position: absolute; left: 10px; right: 10px; bottom: 16%; padding: 6px 8px; border-radius: 8px; background-color: #121212;
    font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; color: #ffffff;
}
html:root body.p11 span.p11-out-l { font-size: 12.5px; line-height: 1.3; color: #a3a19d; }
/* A result shown where it is used: a shop page, an Instagram post, a story. */
html:root body.p11 .p11-out-pic--fr { display: flex; flex-direction: column; background-color: #ffffff; color: #121212; }
html:root body.p11 .p11-fr-bar { flex: none; display: flex; align-items: center; gap: 3px; height: 17px; padding: 0 7px; background-color: #f1f0ee; }
html:root body.p11 .p11-fr-bar > i { display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #cfccc7; }
html:root body.p11 span.p11-fr-url { margin-left: 5px; padding: 1px 6px; border-radius: 4px; background-color: #ffffff; font-size: 8px; line-height: 1.4; color: #6f6d6a; }
html:root body.p11 .p11-fr-img { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
html:root body.p11 .p11-out-pic .p11-fr-img img { position: absolute; inset: 0; }
html:root body.p11 .p11-fr-info { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; }
html:root body.p11 span.p11-fr-name { font-size: 10px; font-weight: 600; line-height: 1.2; color: #121212; white-space: nowrap; }
html:root body.p11 span.p11-fr-btn { padding: 4px 7px; border-radius: 5px; background-color: #121212; font-size: 8.5px; font-weight: 500; line-height: 1; color: #ffffff; white-space: nowrap; }
html:root body.p11 .p11-fr-head { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 7px; }
html:root body.p11 span.p11-fr-av { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background-color: #b4653e; font-size: 7.5px; font-weight: 600; line-height: 1; color: #ffffff; }
html:root body.p11 span.p11-fr-handle { font-size: 9.5px; font-weight: 600; line-height: 1; color: #121212; white-space: nowrap; }
html:root body.p11 .p11-fr-acts { flex: none; display: flex; gap: 8px; padding: 6px 7px; color: #121212; }
html:root body.p11 .p11-fr-acts svg { flex: none; width: 12px; height: 12px; }
html:root body.p11 .p11-fr--story { display: block; }
html:root body.p11 .p11-fr-hero { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; overflow: hidden; }
html:root body.p11 .p11-out-pic .p11-fr-hero img { position: absolute; inset: 0; }
html:root body.p11 .p11-fr-page { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; padding: 9px 9px 8px; }
html:root body.p11 span.p11-fr-title { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #121212; }
html:root body.p11 span.p11-fr-line { display: block; height: 4px; border-radius: 2px; background-color: #e9e7e3; }
html:root body.p11 span.p11-fr-line + span.p11-fr-line { width: 72%; }
html:root body.p11 .p11-fr-page span.p11-fr-btn { align-self: flex-start; margin-top: auto; }
html:root body.p11 .p11-fr-story { position: absolute; left: 0; right: 0; top: 0; padding: 6px 6px 0; }
html:root body.p11 span.p11-fr-prog { display: block; height: 2px; border-radius: 1px; background-color: rgba(255, 255, 255, 0.92); }
html:root body.p11 .p11-fr-story .p11-fr-head { display: inline-flex; margin-top: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background-color: rgba(18, 18, 18, 0.42); }
html:root body.p11 .p11-fr-story span.p11-fr-handle { color: #ffffff; }

html:root body.p11 .p11-show-foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
    margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid #2c2c2a;
}
html:root body.p11 main p.p11-show-ask { margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -0.01em; color: #ffffff; text-wrap: balance; }
/* The plan line under the ask: said where the free button is, kept quiet. */
html:root body.p11 main p.p11-show-gate { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #a3a19d; text-wrap: balance; }

/* ---- 3b. Customer story ------------------------------------------------------- */
/* One real company in its own words beside two of its pictures, on white:
   no frame, no stars, no logo (its logo is already in the hero row). */
html:root body.p11 .p11-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); }
html:root body.p11 .p11-story-copy .v4-eyebrow { margin: 0 0 14px; }
html:root body.p11 main blockquote.p11-story-q { margin: 0; padding: 0; border: 0; quotes: none; }
html:root body.p11 main blockquote.p11-story-q p { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; color: #121212; text-wrap: pretty; }
html:root body.p11 .p11-story-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
html:root body.p11 .p11-story-who img { flex: none; display: block; width: 48px; height: 48px; max-width: none; margin: 0; object-fit: cover; border-radius: 50%; }
html:root body.p11 .p11-story-wt { display: flex; flex-direction: column; gap: 2px; }
html:root body.p11 span.p11-story-n { font-size: 15px; font-weight: 600; line-height: 1.3; color: #121212; }
html:root body.p11 span.p11-story-r { font-size: 14px; line-height: 1.3; color: #6f6d6a; }
html:root body.p11 main a.p11-pane-link.p11-story-a { margin-top: 12px; color: #121212; text-decoration-color: #c9c6c1; }
@media (hover: hover) { html:root body.p11 main a.p11-pane-link.p11-story-a:hover { text-decoration-color: #121212; } }
html:root body.p11 figure.p11-story-pics { margin: 0; }
html:root body.p11 .p11-story-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body.p11 .p11-story-row img { display: block; width: 100%; height: auto; max-width: none; margin: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
html:root body.p11 figure.p11-story-pics figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: #8f8d89; }

/* ---- 4. Who it is for -------------------------------------------------------- */
/* One row of large picture cards that scrolls sideways, the name and one
   line under each picture (no chips on the pictures), two arrows at the
   head's right edge, then the other readers as one line of plain links. */
html:root body.p11 .p11-uses-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
html:root body.p11 .v4-head.p11-uses-head { margin: 0; }
html:root body.p11 .p11-ind-nav { flex: none; display: flex; gap: 8px; }
html:root body.p11 main button.p11-ind-go {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #d7d4cf; border-radius: 50%;
    background-color: #ffffff; color: #121212; cursor: pointer; transition: border-color 150ms ease, opacity 150ms ease;
}
@media (hover: hover) { html:root body.p11 main button.p11-ind-go:hover { border-color: #121212; } }
html:root body.p11 main button.p11-ind-go[disabled] { opacity: 0.35; cursor: default; }
html:root body.p11 .p11-ind {
    list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 21.5vw, 300px); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
html:root body.p11 .p11-ind::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { html:root body.p11 .p11-ind { grid-auto-columns: calc((100% - 48px) / 4); } }
@media (min-width: 600px) and (max-width: 1199.98px) { html:root body.p11 .p11-ind { grid-auto-columns: calc((100% - 32px) / 3); } }
html:root body.p11 .p11-ind li { margin: 0; min-width: 0; scroll-snap-align: start; }
html:root body.p11 main a.p11-ind-a { display: flex; flex-direction: column; gap: 4px; color: #121212; text-decoration: none; }
html:root body.p11 .p11-ind-pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 8px; border-radius: 16px; background-color: #f6f5f4; }
html:root body.p11 .p11-ind-pic img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
/* Agencies: four clients' pictures in one card. */
html:root body.p11 .p11-ind-pic--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; background-color: #ffffff; }
html:root body.p11 .p11-ind-pic--grid img { min-height: 0; }
html:root body.p11 span.p11-ind-t { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #121212; }
html:root body.p11 span.p11-ind-d { font-size: 14.5px; line-height: 1.45; color: #6f6d6a; }
@media (hover: hover) { html:root body.p11 main a.p11-ind-a:hover span.p11-ind-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
html:root body.p11 main a.p11-ind-a:focus-visible { outline: 2px solid #121212; outline-offset: 3px; border-radius: 16px; }
/* The other readers: one quiet line of links. */
html:root body.p11 main p.p11-also { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: #6f6d6a; }
html:root body.p11 .p11-also-l { color: #6f6d6a; }
html:root body.p11 main p.p11-also a { color: #121212; text-decoration: underline; text-decoration-color: #c9c6c1; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { html:root body.p11 main p.p11-also a:hover { text-decoration-color: #121212; } }

/* ---- 5. Everything in one place: six parts, one picture -------------------- */
/* Plain titles in a list on the left; the open part shows its line and a
   link. On the right one stage shows the open part at work: a real picture
   with one piece of the app on it (Vytas: "rethink completely ... use more
   clear titles"; the layout follows the Pletor list he showed). A rail on the
   list's left edge marks the open part; while the list moves on by itself the
   rail fills in lime. */
html:root body.p11 .p11-bt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
html:root body.p11 .p11-bt-head .v4-head { margin: 0; }
html:root:root body.p11 main a.p11-bt-more { flex: none; }
html:root body.p11 .p11-inx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); margin-top: 40px; }
html:root body.p11 .p11-inx-list { display: flex; flex-direction: column; }
html:root body.p11 .p11-inx-it { position: relative; margin: 0; padding: 0 0 0 24px; border-left: 2px solid #e6e4e1; }
html:root body.p11 .p11-inx-it::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 0; background-color: #121212; }
html:root body.p11 .p11-inx-it.is-on::before { height: 100%; }
html:root body.p11 .p11-inx.is-auto .p11-inx-it.is-on::before { background-color: #96ff1a; animation: p11Fill var(--p11-dwell, 6s) linear both; }
@keyframes p11Fill { from { height: 0; } to { height: 100%; } }
html:root body.p11 main button.p11-inx-b {
    display: flex; align-items: baseline; gap: 10px; width: 100%; margin: 0; padding: 15px 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; text-align: left; font: inherit; color: #121212; cursor: pointer;
}
html:root body.p11 span.p11-inx-n { flex: none; width: 22px; font-family: var(--v4-font-pixel); font-size: 13px; line-height: 1; color: #a3a19d; }
html:root body.p11 span.p11-inx-t { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; color: #9a9893; transition: color 150ms ease; }
html:root body.p11 .p11-inx-it.is-on span.p11-inx-t { color: #121212; }
@media (hover: hover) { html:root body.p11 main button.p11-inx-b:hover span.p11-inx-t { color: #121212; } }
html:root body.p11 main button.p11-inx-b:focus { outline: 0; }
html.p11-kbd:root body.p11 main button.p11-inx-b:focus-visible span.p11-inx-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
html:root body.p11 .p11-inx-more { display: none; padding: 0 0 20px 32px; }
html:root body.p11 .p11-inx-it.is-on .p11-inx-more { display: block; }
html:root body.p11 main p.p11-inx-d { max-width: 470px; margin: -4px 0 0; font-size: 16px; line-height: 1.55; color: #6f6d6a; }
html:root body.p11 main a.p11-inx-a {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 15px; font-weight: 500; color: #121212;
    text-decoration: underline; text-decoration-color: #c9c6c1; text-underline-offset: 4px; transition: text-decoration-color 150ms ease;
}
html:root body.p11 main a.p11-inx-a:hover { text-decoration-color: #121212; }

/* The stage: one part at a time, crossfading. */
html:root body.p11 .p11-inx-stage { position: relative; height: clamp(440px, 39vw, 560px); overflow: hidden; border-radius: 24px; background-color: #eceef0; }
html:root body.p11 .p11-inx-p { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; }
html:root body.p11 .p11-inx-p.is-on { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s; }
html:root body.p11 .p11-v { position: absolute; inset: 0; }
html:root body.p11 .p11-v img, html:root body.p11 .p11-v video { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.p11 .p11-v-card { position: absolute; border-radius: 16px; background-color: #ffffff; box-shadow: 0 18px 50px rgba(18, 18, 18, 0.16); }
html:root body.p11 span.p11-v-cap { display: block; font-size: 12px; line-height: 1.3; color: #8f8d89; }
html:root body.p11 .p11-v-ok { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background-color: #96ff1a; color: #121212; }

/* AI models: the picker over a made picture, Auto chosen. */
html:root body.p11 img.p11-v-bg { position: absolute; inset: 0; }
html:root body.p11 .p11-v-pick { left: 6%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; width: 250px; padding: 12px; }
html:root body.p11 .p11-v-pick span.p11-v-cap { padding: 2px 8px 8px; }
html:root body.p11 .p11-v-row { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; border-radius: 9px; font-size: 14px; line-height: 1.2; color: #121212; }
html:root body.p11 .p11-v-row > svg { flex: none; width: 16px; height: 16px; }
html:root body.p11 .p11-v-row.is-on { min-height: 44px; background-color: #f6f5f3; }
html:root body.p11 span.p11-v-auto { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background-color: #121212; color: #ffffff; }
html:root body.p11 span.p11-v-rt { display: flex; flex-direction: column; flex: 1 1 auto; font-weight: 600; }
html:root body.p11 span.p11-v-rd { font-size: 12px; font-weight: 400; color: #6f6d6a; }
html:root body.p11 span.p11-v-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #96ff1a; color: #121212; }
html:root body.p11 span.p11-v-sep { display: block; margin-top: 6px; padding: 10px 8px 4px; border-top: 1px solid #efedea; font-size: 11.5px; color: #8f8d89; }

/* A brand for each client: the open brand's picture, the brands in a list
   with their colours, the open one ticked. */
html:root body.p11 .p11-v--brand { background-color: #dfe9f2; }
html:root body.p11 .p11-v-brands { right: 6%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; width: 248px; padding: 12px; }
html:root body.p11 .p11-v-brands span.p11-v-cap { padding: 2px 8px 8px; }
html:root body.p11 .p11-v-br { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: #3d3d3c; }
html:root body.p11 .p11-v-br.is-on { background-color: #f6f5f3; font-weight: 600; color: #121212; }
html:root body.p11 span.p11-v-bn { flex: 1 1 auto; }
html:root body.p11 .p11-v-br .p11-v-sw i { width: 16px; height: 16px; }
html:root body.p11 span.p11-v-ad { position: absolute; left: 9%; top: 50%; transform: translateY(-50%); height: 82%; aspect-ratio: 448 / 557; overflow: hidden; border-radius: 14px; box-shadow: 0 24px 60px rgba(18, 18, 18, 0.22); }
html:root body.p11 .p11-v-kit { right: 7%; top: 50%; transform: translateY(-50%); width: 270px; padding: 4px 0; }
html:root body.p11 .p11-v-kit span.p11-v-cap { padding: 12px 18px 4px; }
html:root body.p11 .p11-v-kr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 18px; }
html:root body.p11 .p11-v-kr + .p11-v-kr { border-top: 1px solid #efedea; }
html:root body.p11 span.p11-v-kl { font-size: 12.5px; color: #8f8d89; }
html:root body.p11 span.p11-v-kn { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.22em; color: #1e1e1c; }
html:root body.p11 .p11-v-sw { display: flex; gap: 6px; }
html:root body.p11 .p11-v-sw i { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.12); }
html:root body.p11 .p11-v-aa { display: inline-flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 600; line-height: 1; color: #1e1e1c; }
html:root body.p11 span.p11-v-aa2 { font-family: var(--v4-font-pixel); font-weight: 400; }

/* Editors: one clip with its caption, the editor's tools and tracks beside it. */
html:root body.p11 .p11-v--edit { background-color: #e3ecf2; }
html:root body.p11 span.p11-v-clip { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); height: 86%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background-color: #cfd8df; box-shadow: 0 24px 60px rgba(18, 18, 18, 0.2); }
html:root body.p11 span.p11-v-capt {
    position: absolute; left: 10px; right: 10px; bottom: 12%; padding: 6px 8px; border-radius: 8px; background-color: #121212;
    font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; color: #ffffff;
}
html:root body.p11 .p11-v-tl { right: 5%; top: 50%; transform: translateY(-50%); width: 50%; padding: 16px; }
html:root body.p11 .p11-v-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
html:root body.p11 .p11-v-tools > span { padding: 5px 8px; border-radius: 8px; background-color: #f6f5f3; font-size: 12px; line-height: 1.2; color: #3d3d3c; }
html:root body.p11 .p11-v-tools > span:nth-child(4) { background-color: #121212; color: #ffffff; }
html:root body.p11 .p11-v-tracks { position: relative; display: flex; flex-direction: column; gap: 12px; }
html:root body.p11 .p11-v-tr { display: flex; flex-direction: column; gap: 6px; }
html:root body.p11 span.p11-v-trl { font-size: 11.5px; line-height: 1.2; color: #8f8d89; }
html:root body.p11 .p11-v-bar { display: flex; gap: 4px; height: 16px; }
html:root body.p11 .p11-v-bar i { display: block; height: 100%; border-radius: 4px; background-color: #e4e2de; }
html:root body.p11 .p11-v-tr--0 .p11-v-bar i { background-color: #96ff1a; }
html:root body.p11 .p11-v-tr--0 .p11-v-bar i:nth-child(1) { flex: 3; } html:root body.p11 .p11-v-tr--0 .p11-v-bar i:nth-child(2) { flex: 4; } html:root body.p11 .p11-v-tr--0 .p11-v-bar i:nth-child(3) { flex: 2; }
html:root body.p11 .p11-v-tr--1 .p11-v-bar i:nth-child(1) { flex: 5; } html:root body.p11 .p11-v-tr--1 .p11-v-bar i:nth-child(2) { flex: 2; } html:root body.p11 .p11-v-tr--1 .p11-v-bar i:nth-child(3) { flex: 3; }
html:root body.p11 .p11-v-tr--2 .p11-v-bar i:nth-child(1) { flex: 9; } html:root body.p11 .p11-v-tr--2 .p11-v-bar i:nth-child(2), html:root body.p11 .p11-v-tr--2 .p11-v-bar i:nth-child(3) { flex: 0 0 0; }
html:root body.p11 span.p11-v-head { position: absolute; top: 14px; bottom: -4px; left: 58%; width: 2px; border-radius: 1px; background-color: #121212; }

/* Batch: one sheet, six products, five done and one being made. */
html:root body.p11 .p11-v--batch { background-color: #eceef0; }
html:root body.p11 .p11-v-sheet { left: 7%; right: 7%; top: 50%; transform: translateY(-50%); padding: 16px; }
html:root body.p11 .p11-v-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
html:root body.p11 span.p11-v-tt { font-size: 15px; font-weight: 600; color: #121212; }
html:root body.p11 span.p11-v-prog { padding: 4px 9px; border-radius: 8px; background-color: #f6f5f3; font-size: 12.5px; font-weight: 500; color: #3d3d3c; }
html:root body.p11 .p11-v-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
html:root body.p11 .p11-v-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html:root body.p11 .p11-v-cpic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background-color: #efedea; }
html:root body.p11 .p11-v-cell.is-busy img { opacity: 0.4; filter: saturate(0.5); }
html:root body.p11 .p11-v-cpic .p11-v-ring { position: absolute; inset: 0; width: 28%; height: auto; aspect-ratio: 1; margin: auto; }
html:root body.p11 span.p11-v-nm { font-size: 12.5px; line-height: 1.2; color: #3d3d3c; }

/* Client approval: the link, three colours, two picked, the client's note. */
html:root body.p11 .p11-v--review { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 7%; background-color: #eef0f2; }
html:root body.p11 span.p11-v-link {
    position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-radius: 10px; background-color: #ffffff; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #121212; box-shadow: 0 8px 24px rgba(18, 18, 18, 0.1);
}
html:root body.p11 span.p11-v-ld { font-weight: 400; color: #6f6d6a; }
html:root body.p11 .p11-v-picks { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html:root body.p11 .p11-v-pk { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background-color: #ddd8d0; }
html:root body.p11 .p11-v-pk:not(.is-on) img { opacity: 0.45; }
html:root body.p11 .p11-v-pk.is-on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px #121212; pointer-events: none; }
html:root body.p11 .p11-v-pk .p11-v-ok { z-index: 2; }
html:root body.p11 .p11-v-pk .p11-v-ok { width: 22px; height: 22px; top: 9px; right: 9px; }
html:root body.p11 span.p11-v-note {
    position: relative; align-self: flex-end; display: flex; align-items: center; gap: 10px; max-width: 72%; padding: 10px 14px 10px 10px;
    border-radius: 14px 14px 4px 14px; background-color: #ffffff; font-size: 14px; line-height: 1.4; color: #121212; box-shadow: 0 12px 30px rgba(18, 18, 18, 0.14);
}
html:root body.p11 span.p11-v-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background-color: #121212; font-size: 12.5px; font-weight: 600; color: #ffffff; }

/* Assets: the folders, one open, its pictures. */
html:root body.p11 .p11-v--assets { background-color: #eceef0; }
html:root body.p11 .p11-v-lib { left: 6%; right: 6%; top: 8%; bottom: 8%; display: grid; grid-template-columns: 172px minmax(0, 1fr); overflow: hidden; }
html:root body.p11 .p11-v-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid #efedea; background-color: #fbfaf8; }
html:root body.p11 .p11-v-fd { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; line-height: 1.2; color: #3d3d3c; white-space: nowrap; }
html:root body.p11 .p11-v-fd > svg { flex: none; color: #8f8d89; }
html:root body.p11 .p11-v-fd.is-on { background-color: #efedea; font-weight: 600; color: #121212; }
html:root body.p11 .p11-v-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; min-height: 0; padding: 14px; }
html:root body.p11 .p11-v-thumbs > span { display: block; min-height: 0; overflow: hidden; border-radius: 9px; background-color: #efedea; }

/* The way to all features: in the head on a desktop, after the list on a
   phone (Vytas: "on mobile see all features button too big and should not
   be placed on the top"). */
html:root body.p11 main a.p11-pane-link.p11-inx-all { display: none; color: #121212; text-decoration-color: #c9c6c1; }

/* Under the list: the plan line. */
html:root body.p11 main p.p11-bt-note { margin: 22px 0 0; font-size: 13.5px; line-height: 1.5; color: #8f8d89; }

/* ---- 5b. The AI chat: its own section -------------------------------------- */
/* One warm grey card inside the grid: the words and one button on the left,
   one chat on the right as it runs (the request with the product photo, the
   confirm step, the three results whole). */
html:root body.p11 .p11-chat {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4.4vw, 72px);
    padding: clamp(28px, 3.6vw, 52px); border-radius: 28px; background-color: #f6f5f3;
}
html:root body.p11 .p11-chat-copy .v4-head { margin: 0; }
html:root body.p11 .p11-chat-copy a.p11-go { margin-top: 26px; }
html:root body.p11 .p11-chat-win { overflow: hidden; border-radius: 20px; background-color: #ffffff; box-shadow: 0 18px 48px rgba(18, 18, 18, 0.08); }
html:root body.p11 .p11-chat-bar { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid #efedea; }
html:root body.p11 .p11-chat-app { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; line-height: 1; color: #8f8d89; }
html:root body.p11 .p11-chat-app.is-on { background-color: #f6f5f3; color: #121212; }
html:root body.p11 .p11-chat-app svg { flex: none; width: 16px; height: 16px; }
html:root body.p11 .p11-chat-app:not(.is-on) svg { opacity: 0.55; }
html:root body.p11 .p11-chat-body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
html:root body.p11 .p11-chat-ask {
    align-self: flex-end; display: flex; align-items: center; gap: 10px; max-width: 90%; padding: 8px 16px 8px 8px;
    border-radius: 16px 16px 4px 16px; background-color: #121212; font-size: 14.5px; line-height: 1.4; color: #ffffff;
}
html:root body.p11 .p11-chat-ask img { flex: none; display: block; width: 42px; height: 42px; max-width: none; margin: 0; object-fit: cover; border-radius: 9px; }
html:root body.p11 .p11-chat-ok {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
    border-radius: 10px; background-color: #f6f5f3; font-size: 13px; font-weight: 500; line-height: 1.2; color: #3d3d3c;
}
html:root body.p11 .p11-chat-ok svg { flex: none; box-sizing: content-box; width: 12px; height: 12px; padding: 4px; border-radius: 50%; background-color: #96ff1a; color: #121212; }
html:root body.p11 .p11-chat-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:root body.p11 .p11-chat-o { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html:root body.p11 .p11-chat-pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; background-color: #f6f5f3; }
html:root body.p11 .p11-chat-outs img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.p11 span.p11-chat-l { font-size: 12.5px; line-height: 1.3; color: #6f6d6a; }

/* ---- 6. Questions ------------------------------------------------------------ */
html:root body.p11 .p11-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); }
html:root body.p11 .p11-faq-side .v4-head { margin-bottom: 0; }
html:root:root body.p11 main a.p11-faq-more { margin-top: 24px; height: 44px; min-height: 44px; padding: 0 18px; font-size: 14.5px; }

/* ---- 7. Close: the line over the results, moving -------------------------- */
/* About 520px tall at 1440 with the proof row: a one line title, one button,
   the proof row, then a single row of square results moving slowly. */
html:root:root body.p11 main > section#close { padding-bottom: 40px !important; }
html:root body.p11 #footerElem .dbf-inner { padding-top: 48px; }
html:root body.p11 .p11-end {
    position: relative; overflow: hidden; padding-top: clamp(44px, 4.4vw, 60px);
    border-radius: 24px; background-color: #121212; color: #ffffff; text-align: center;
}
html:root body.p11 .p11-end-copy { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 0 24px; }
html:root body.p11 main h2.p11-end-h { margin: 0; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; color: #ffffff; text-wrap: balance; }
html:root body.p11 main p.p11-end-d { text-wrap: balance; margin: 12px 0 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; color: #c8c6c2; }
html:root body.p11 .p11-end a.p11-go { margin-top: 24px; }
html:root body.p11 .p11-end-strip { overflow: hidden; margin-top: clamp(32px, 3.2vw, 44px); padding-bottom: clamp(20px, 2vw, 28px); }
html:root body.p11 .p11-end-track { display: flex; width: max-content; }
html:root body.p11 .p11-end-pic { flex: none; display: block; width: clamp(108px, 10vw, 148px); margin-right: 12px; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 14px; background-color: #2c2c2a; }
html:root body.p11 .p11-end-pic img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
/* The proof row again, on ink: white marks and logos. */
html:root body.p11 .p11-end .p11-proof { margin-top: 26px; }
html:root body.p11 .p11-end .p11-proof-l { color: #8f8d89; }
html:root body.p11 .p11-end .p11-works-list li { color: #e6e4e1; }
html:root body.p11 .p11-end .p11-proof-sep { background-color: #3a3a38; }
html:root body.p11 .p11-end img.p11-logo { filter: brightness(0) invert(1); opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
    html:root body.p11 .p11-end-track { animation: p11Marq 80s linear infinite; }
}
@keyframes p11Marq { to { transform: translateX(-50%); } }
/* The page closes once: no hairline above the footer (Vytas: "no need this
   line"), and the footer's own buttons stay off this page, so "Book a demo"
   does not come back under the close. */
html:root body.p11 #footerElem.dbf { border-top: 0 !important; box-shadow: none !important; }
html:root body.p11 #footerElem .dbf-asks { display: none !important; }

/* ---- 8. Widths ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    /* The list and the stage share the width more evenly. */
    html:root body.p11 .p11-inx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    html:root body.p11 span.p11-inx-t { font-size: 19px; }
    html:root body.p11 .p11-v-pick { width: 230px; padding: 10px; }
    html:root body.p11 .p11-v-row { min-height: 28px; font-size: 13px; }
    html:root body.p11 .p11-v-kit { width: 236px; }
    html:root body.p11 .p11-v-tl { width: 50%; padding: 14px; }
    html:root body.p11 .p11-chat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1099.98px) {
    html:root body.p11 .p11-pane { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
    html:root body.p11 .p11-pane-copy { max-width: 620px; }
    /* The proof row stacks before it can wrap with the rule hanging. */
    html:root body.p11 .p11-proof-sep { display: none; }
    html:root body.p11 .p11-proof { flex-direction: column; gap: 14px; }
}
@media (max-width: 899.98px) {
    html:root body.p11 .p11-faq { grid-template-columns: minmax(0, 1fr); }
    /* One column: the list, then the stage of the open part. */
    html:root body.p11 .p11-inx { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    html:root body.p11 .p11-chat { grid-template-columns: minmax(0, 1fr); }
    html:root body.p11 .p11-story { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 699.98px) {
    /* The six tabs in two even rows of three, 44px tall. No numbers. */
    html:root body.p11 .p11-tabs { display: grid; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    html:root body.p11 main button.p11-tab { justify-content: center; min-width: 0; min-height: 44px; padding: 0 6px; font-size: 13.5px; }
    html:root body.p11 main button.p11-tab:nth-child(7) { grid-column: 1 / -1; }
    /* Only the open tab takes space on a phone, so a short tab leaves no
       empty band above the foot. */
    html:root body.p11 .p11-panes { display: block; }
    html:root body.p11 .p11-pane:not(.is-on) { display: none; }
    /* The small page frames keep only the picture and its title on a phone. */
    html:root body.p11 .p11-fr-page span.p11-fr-line, html:root body.p11 .p11-fr-page span.p11-fr-btn { display: none; }
    html:root body.p11 .p11-fr-page { padding: 6px 6px 5px; }
    html:root body.p11 span.p11-fr-title { font-size: 9px; }
    html:root body.p11 .p11-fr-info { padding: 5px 6px; }
    html:root body.p11 span.p11-fr-name { font-size: 9px; }
    html:root body.p11 .p11-fr-info span.p11-fr-btn { display: none; }
    html:root body.p11 span.p11-fr-btn { padding: 3px 5px; font-size: 7.5px; }
    html:root body.p11 .p11-tab-n { display: none; }
    /* A pane: the title, the pictures, then the words, all on one left edge. */
    html:root body.p11 .p11-pane { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    html:root body.p11 .p11-pane-copy { display: contents; }
    html:root body.p11 main h3.p11-pane-h { order: 1; }
    html:root body.p11 .p11-pane-flow { order: 2; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; }
    html:root body.p11 main p.p11-pane-d { order: 3; }
    html:root body.p11 main p.p11-pane-save { order: 4; }
    html:root body.p11 main p.p11-pane-note { order: 5; }
    html:root body.p11 main a.p11-pane-link { order: 6; align-self: flex-start; }
    /* What goes in: a small picture (or the typed words, or the brand kit)
       with its name beside it, never wider than the panel. */
    html:root body.p11 .p11-in { flex-direction: row; align-items: center; width: auto; gap: 12px; }
    html:root body.p11 .p11-in-card { flex: none; width: 52px; }
    html:root body.p11 .p11-in-card--text, html:root body.p11 .p11-in-card--kit { flex: 0 1 auto; width: auto; min-width: 0; max-width: calc(100% - 112px); }
    html:root body.p11 .p11-in-card--text { padding: 10px 12px; }
    html:root body.p11 span.p11-in-q { font-size: 13px; }
    html:root body.p11 .p11-in-card--kit { flex-direction: row; aspect-ratio: auto; padding: 10px 12px; gap: 12px; }
    html:root body.p11 span.p11-in-l { flex: 0 1 100px; min-width: 0; }
    html:root body.p11 .p11-in--both .p11-in-card--text { max-width: none; flex: 1 1 0; min-width: 0; }
    html:root body.p11 .p11-in--both span.p11-in-l { display: none; }
    html:root body.p11 main blockquote.p11-story-q p { font-size: 17px; line-height: 1.45; }
    html:root body.p11 .p11-story-row { gap: 8px; }
    html:root body.p11 .p11-story-row img { border-radius: 12px; }
    html:root body.p11 .p11-flow-go { display: none; }
    /* What comes out: three results of one shape, one even row. */
    /* Widths follow each result's shape, so all three share one height. */
    html:root body.p11 .p11-outs { display: flex; align-items: flex-start; gap: 8px; }
    html:root body.p11 .p11-out { flex: var(--rw, 0.8) 1 0; min-width: 0; gap: 6px; }
    html:root body.p11 .p11-out-pic { width: 100%; height: auto; }
    html:root body.p11 span.p11-out-l, html:root body.p11 span.p11-in-l { font-size: 12px; }
    html:root body.p11 span.p11-out-cap { display: none; }
    html:root body.p11 .p11-show-foot { flex-direction: column; align-items: stretch; gap: 14px; text-align: left; }
}
@media (max-width: 599.98px) {
    /* The whole page on a phone: smaller type, tighter spacing (Vytas: "the
       spacing and the layout are way too big, and the fonts are too big"). */
    html:root:root body.p11 main > section.v4-section:not(.p11-hero) { padding-top: 28px !important; padding-bottom: 28px !important; }
    html:root body.p11 main .v4-head .v4-h2 { font-size: 24px; line-height: 1.15; }
    html:root body.p11 main .v4-head p.v4-sub { margin-top: 10px; font-size: 15px; line-height: 1.5; }
    html:root body.p11 main .v4-head .v4-eyebrow { margin-bottom: 8px; font-size: 12px; }

    /* Hero: the words, the two asks side by side, a five-card fan, then the
       proof row under it, all on the first screen of a phone. */
    html:root body.p11 .v10-navwrap ~ main > section.p11-hero:first-of-type { padding: 6px 6px 0 !important; }
    html:root body.p11 .p11-frame { display: flex; flex-direction: column; padding-top: 78px; border-radius: 18px; }
    html:root body.p11 .p11-hero-in, html:root body.p11 .p11-head { display: contents; }
    html:root body.p11 .p11-head > * { padding-left: 16px; padding-right: 16px; }
    html:root body.p11 main .p11-for { order: 1; margin-bottom: 10px; font-size: 12px; letter-spacing: 0.06em; }
    html:root body.p11 main .p11-h1 { order: 2; font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; }
    html:root body.p11 main .p11-h1 .v4-pixel { white-space: nowrap; }
    html:root body.p11 main .p11-sub { order: 3; margin-top: 12px; font-size: 16px; line-height: 1.5; }
    html:root body.p11 .p11-actions { order: 4; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 18px; }
    html:root:root body.p11 main .p11-actions a.p11-go { position: relative; width: 216px; max-width: 100%; height: 40px; min-height: 40px; padding: 0 14px; font-size: 14px; }
    html:root:root body.p11 main .p11-actions a.p11-go::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
    /* Three cards: the video and one each side, turned out far enough that
       each side card shows its label whole. */
    html:root body.p11 .p11-fan { order: 5; --w0: 40vw; --step: 26vw; --dy: 7px; height: calc(var(--w0) * 1.1); margin-top: 22px; overflow: hidden; }
    html:root body.p11 .p11-card:not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) { display: none; }
    html:root body.p11 .p11-card-pic { border-radius: 14px; }
    html:root body.p11 span.p11-card-l { left: 7px; top: 7px; padding: 2px 6px; border-radius: 5px; font-size: 10px; }
    html:root body.p11 span.p11-card-l svg { width: 10px; height: 10px; }
    html:root body.p11 .p11-card--r span.p11-card-l { right: 7px; }
    html:root body.p11 .p11-hero .p11-proof { order: 6; margin: 0; padding: 14px 16px 16px; gap: 10px; border-top: 1px solid #efedea; }
    html:root body.p11 .p11-proof-g { gap: 6px 12px; }
    html:root body.p11 .p11-proof-l { font-size: 12px; }
    html:root body.p11 .p11-works-list { gap: 6px 12px; }
    html:root body.p11 .p11-works-list li { gap: 5px; font-size: 13px; }
    html:root body.p11 .p11-works-list svg { width: 15px; height: 15px; }
    html:root body.p11 .p11-logos { flex-wrap: nowrap; gap: 14px; }
    html:root body.p11 img.p11-logo--creatorflow, html:root body.p11 img.p11-logo--postnext { height: 11px; }
    html:root body.p11 img.p11-logo--rnj-transport { height: 14px; }
    html:root body.p11 img.p11-logo--strategic-mood { height: 12px; }

    /* The sentence. */
    html:root:root body.p11 main > section#what { padding-top: 40px !important; }
    html:root body.p11 main .p11-say-a { font-size: 22px; line-height: 1.3; }
    html:root body.p11 main img.p11-inl { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }

    /* What you can make. */
    html:root body.p11 .p11-show { margin-top: 18px; padding: 12px; border-radius: 18px; }
    html:root body.p11 .p11-tabs { gap: 4px; padding: 4px; border-radius: 12px; }
    html:root body.p11 main button.p11-tab { border-radius: 9px; }
    html:root body.p11 .p11-panes { margin-top: 14px; }
    html:root body.p11 main h3.p11-pane-h { font-size: 20px; }
    html:root body.p11 .p11-pane-hl { display: inline; }
    html:root body.p11 main p.p11-pane-d { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
    html:root body.p11 main p.p11-pane-save { margin-top: 10px; font-size: 14px; }
    html:root body.p11 main p.p11-pane-save svg { width: 16px; height: 16px; }
    html:root body.p11 main a.p11-pane-link { min-height: 44px; margin-top: 2px; font-size: 14px; }
    html:root body.p11 .p11-show-foot { margin-top: 14px; padding-top: 14px; }
    html:root body.p11 main p.p11-show-ask { font-size: 15px; }
    html:root body.p11 main p.p11-show-gate { font-size: 12.5px; }
    html:root:root body.p11 main .p11-show-foot a.p11-go { position: relative; align-self: flex-start; width: 216px; height: 40px; min-height: 40px; font-size: 14px; }
    html:root:root body.p11 main .p11-show-foot a.p11-go::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }

    /* Who it is for: the same sideways row, cards about two thirds of the
       screen wide, no arrows (a finger scrolls the row). */
    html:root body.p11 .p11-uses-top { margin-bottom: 16px; }
    html:root body.p11 .p11-ind-nav { display: none; }
    html:root body.p11 .p11-ind { grid-auto-columns: 58%; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; scroll-padding-left: 18px; }
    html:root body.p11 .p11-ind-pic { margin-bottom: 6px; border-radius: 12px; }
    html:root body.p11 span.p11-ind-t { font-size: 15px; }
    html:root body.p11 span.p11-ind-d { font-size: 13px; }
    html:root body.p11 main p.p11-also { margin-top: 14px; font-size: 14px; line-height: 2.4; }
    html:root body.p11 main p.p11-also a { white-space: nowrap; padding: 8px 0; }

    /* Everything in one place: the button under the title, then the list; the
       open part's picture opens under it (home-v11.js moves the stage there). */
    html:root body.p11 .p11-bt-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    html:root:root:root body.p11 main a.v4-btn-secondary.p11-go.p11-bt-more { display: none; }
    html:root body.p11 main a.p11-pane-link.p11-inx-all { display: inline-flex; margin-top: 6px; font-size: 15px; }
    html:root body.p11 .p11-inx { margin-top: 18px; gap: 0; }
    html:root body.p11 .p11-inx-it { padding-left: 16px; }
    html:root body.p11 main button.p11-inx-b { min-height: 48px; padding: 12px 0; gap: 8px; }
    html:root body.p11 span.p11-inx-n { width: 20px; font-size: 12px; }
    html:root body.p11 span.p11-inx-t { font-size: 17px; }
    html:root body.p11 .p11-inx-more { padding: 0 0 14px 28px; }
    html:root body.p11 main p.p11-inx-d { margin-top: -2px; font-size: 14.5px; line-height: 1.5; }
    html:root body.p11 main a.p11-inx-a { min-height: 40px; margin-top: 4px; font-size: 14px; }
    html:root body.p11 .p11-inx-it .p11-inx-stage { margin: 0 0 16px -16px; }
    html:root body.p11 .p11-inx-stage { height: 360px; border-radius: 18px; }
    html:root body.p11 .p11-v-card { border-radius: 12px; }
    html:root body.p11 .p11-v-pick { left: 4%; top: auto; bottom: 4%; transform: none; width: 196px; padding: 8px; }
    html:root body.p11 .p11-v-pick .p11-v-sep ~ .p11-v-sep, html:root body.p11 .p11-v-pick .p11-v-sep ~ .p11-v-sep ~ .p11-v-row { display: none; }
    html:root body.p11 .p11-v-pick span.p11-v-cap { padding: 2px 6px 6px; font-size: 11px; }
    html:root body.p11 .p11-v-row { min-height: 26px; gap: 8px; padding: 0 6px; font-size: 12px; }
    html:root body.p11 .p11-v-row > svg { width: 13px; height: 13px; }
    html:root body.p11 .p11-v-row.is-on { min-height: 38px; }
    html:root body.p11 span.p11-v-auto { width: 20px; height: 20px; border-radius: 6px; }
    html:root body.p11 span.p11-v-rd { font-size: 11px; }
    html:root body.p11 span.p11-v-tick { width: 17px; height: 17px; }
    html:root body.p11 span.p11-v-sep { margin-top: 4px; padding: 6px 6px 2px; font-size: 10.5px; }
    html:root body.p11 span.p11-v-ad { left: 6%; height: 76%; border-radius: 10px; }
    html:root body.p11 .p11-v-kit { right: 5%; width: 178px; }
    html:root body.p11 .p11-v-brands { right: 4%; top: auto; bottom: 4%; transform: none; width: 176px; padding: 8px; }
    html:root body.p11 .p11-v-br { min-height: 34px; gap: 6px; padding: 0 6px; font-size: 12px; }
    html:root body.p11 .p11-v-br .p11-v-sw i { width: 12px; height: 12px; }
    html:root body.p11 .p11-v-kit span.p11-v-cap { padding: 10px 12px 2px; font-size: 11px; }
    html:root body.p11 .p11-v-kr { min-height: 44px; padding: 0 12px; gap: 8px; }
    html:root body.p11 span.p11-v-kl { font-size: 11px; }
    html:root body.p11 span.p11-v-kn { font-size: 11px; letter-spacing: 0.16em; }
    html:root body.p11 .p11-v-sw { gap: 4px; }
    html:root body.p11 .p11-v-sw i { width: 15px; height: 15px; }
    html:root body.p11 .p11-v-aa { gap: 6px; font-size: 15px; }
    html:root body.p11 span.p11-v-clip { left: 6%; height: 84%; border-radius: 12px; }
    html:root body.p11 span.p11-v-capt { left: 6px; right: 6px; padding: 4px 5px; font-size: 10.5px; }
    html:root body.p11 .p11-v-tl { right: 4%; width: 52%; padding: 10px; }
    html:root body.p11 .p11-v-tools { gap: 4px; margin-bottom: 10px; }
    html:root body.p11 .p11-v-tools > span { padding: 3px 6px; border-radius: 6px; font-size: 10.5px; }
    html:root body.p11 .p11-v-tracks { gap: 8px; }
    html:root body.p11 span.p11-v-trl { font-size: 10px; }
    html:root body.p11 .p11-v-bar { height: 10px; gap: 3px; }
    html:root body.p11 .p11-v-sheet { left: 4%; right: 4%; padding: 10px; }
    html:root body.p11 .p11-v-top { margin-bottom: 8px; }
    html:root body.p11 span.p11-v-tt { font-size: 13px; }
    html:root body.p11 span.p11-v-prog { padding: 3px 7px; font-size: 11px; }
    html:root body.p11 .p11-v-grid { gap: 8px 6px; }
    html:root body.p11 .p11-v-cell { gap: 4px; }
    html:root body.p11 .p11-v-cpic { border-radius: 7px; }
    html:root body.p11 span.p11-v-nm { font-size: 10.5px; }
    html:root body.p11 .p11-v-ok { top: 4px; right: 4px; width: 16px; height: 16px; }
    html:root body.p11 .p11-v--review { gap: 12px; padding: 0 5%; }
    html:root body.p11 span.p11-v-link { gap: 6px; padding: 6px 9px; font-size: 11.5px; }
    html:root body.p11 .p11-v-picks { gap: 8px; }
    html:root body.p11 .p11-v-pk { border-radius: 9px; }
    html:root body.p11 .p11-v-pk .p11-v-ok { width: 18px; height: 18px; top: 6px; right: 6px; }
    html:root body.p11 span.p11-v-note { gap: 8px; max-width: 92%; padding: 8px 11px 8px 8px; font-size: 12px; }
    html:root body.p11 span.p11-v-av { width: 24px; height: 24px; font-size: 11px; }
    html:root body.p11 .p11-v-lib { left: 4%; right: 4%; grid-template-columns: minmax(0, 1fr); }
    html:root body.p11 .p11-v-sidebar { flex-direction: row; gap: 4px; overflow: hidden; padding: 8px; border-right: 0; border-bottom: 1px solid #efedea; }
    html:root body.p11 .p11-v-fd { min-height: 28px; gap: 5px; padding: 0 8px; font-size: 11.5px; }
    html:root body.p11 .p11-v-fd:nth-child(n+4) { display: none; }
    html:root body.p11 .p11-v-lib { top: 5%; bottom: 5%; grid-template-rows: auto minmax(0, 1fr); }
    html:root body.p11 .p11-v-thumbs { gap: 5px; padding: 8px; }
    html:root body.p11 .p11-v-thumbs > span { border-radius: 6px; }
    html:root body.p11 main p.p11-bt-note { margin-top: 6px; font-size: 12.5px; }

    /* The AI chat: the words and a full-width button, then the chat. */
    html:root body.p11 .p11-chat { gap: 18px; padding: 18px; border-radius: 20px; }
    /* The words, the chat, then the button (Vytas: "see how to connect
       buttons should be after image"). */
    html:root body.p11 .p11-chat-copy { display: contents; }
    html:root body.p11 .p11-chat-copy .v4-head { order: 1; }
    html:root body.p11 .p11-chat-demo { order: 2; }
    html:root:root body.p11 main .p11-chat-copy a.p11-go { order: 3; align-self: flex-start; width: 216px; height: 40px; min-height: 40px; margin-top: 0; font-size: 14px; }
    html:root body.p11 .p11-chat-win { border-radius: 16px; }
    html:root body.p11 .p11-chat-bar { padding: 8px; }
    html:root body.p11 .p11-chat-app { height: 28px; padding: 0 9px; gap: 5px; font-size: 12px; }
    html:root body.p11 .p11-chat-app svg { width: 14px; height: 14px; }
    html:root body.p11 .p11-chat-body { gap: 10px; padding: 12px; }
    html:root body.p11 .p11-chat-ask { max-width: 94%; padding: 6px 12px 6px 6px; font-size: 13px; }
    html:root body.p11 .p11-chat-ask img { width: 34px; height: 34px; border-radius: 7px; }
    html:root body.p11 .p11-chat-ok { font-size: 12px; }
    html:root body.p11 .p11-chat-outs { gap: 6px; }
    html:root body.p11 .p11-chat-pic { border-radius: 9px; }
    html:root body.p11 span.p11-chat-l { font-size: 11.5px; }

    /* Questions: the title, the questions, then the way to all of them. */
    html:root body.p11 .p11-faq { display: flex; flex-direction: column; gap: 16px; }
    html:root body.p11 .p11-faq-side { display: contents; }
    html:root body.p11 .p11-faq-side .v4-head { order: 1; }
    html:root body.p11 .p11-faq .v4x-faq { order: 2; width: 100%; max-width: none; }
    html:root:root:root body.p11 main a.v4-btn-secondary.p11-go.p11-faq-more { display: none; }

    /* The close. */
    html:root body.p11 .p11-end { padding-top: 32px; border-radius: 18px; }
    html:root body.p11 .p11-end-copy { padding: 0 16px; }
    html:root body.p11 main h2.p11-end-h { font-size: 24px; }
    html:root body.p11 main p.p11-end-d { margin-top: 8px; font-size: 14px; }
    html:root body.p11 .p11-end a.p11-go { margin-top: 18px; }
    html:root:root body.p11 main .p11-end a.p11-go { width: 216px; height: 40px; min-height: 40px; font-size: 14px; }
    html:root body.p11 .p11-end .p11-proof { margin-top: 18px; }
    html:root body.p11 .p11-end-strip { margin-top: 22px; padding-bottom: 14px; }
    html:root body.p11 .p11-end-pic { width: 80px; margin-right: 8px; border-radius: 10px; }
}

/* ---- 9. Product pages ------------------------------------------------------ */
/* 9a. The hero: the words on the left, the part at work on the right, in the
   homepage's frame (Vytas, 2026-10-05, of a centred product hero with a stat
   row: "very bad ui layout"; the product shows above the fold). */
html:root body.p11 .p11-frame { padding-bottom: clamp(28px, 3.2vw, 48px); }
html:root body.p11 .p11-amb { width: 46vw; height: 46vw; max-width: 760px; max-height: 760px; opacity: 0.16; }
html:root body.p11 .p11-amb--a { left: -12vw; bottom: -26vw; }
html:root body.p11 .p11-amb--b { right: -10vw; top: -14vw; }
html:root body.p11 .p11-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); }
html:root body.p11 .p11-head { max-width: 620px; margin: 0; text-align: left; }
html:root body.p11 main .p11-for { margin-bottom: 18px; }
html:root body.p11 main .p11-h1 { max-width: 13em; margin: 0; font-size: clamp(34px, 3.7vw, 56px); line-height: 1.06; }
html:root body.p11 main .p11-sub { max-width: 560px; margin: 20px 0 0; font-size: clamp(16px, 1.3vw, 19px); text-wrap: pretty; }
html:root body.p11 .p11-actions { justify-content: flex-start; margin-top: 28px; }
html:root body.p11 .p11-head .p11-proof { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
html:root body.p11 .p11-head .p11-proof-sep { display: none; }
html:root body.p11 .p11-head .p11-proof-g { justify-content: flex-start; }
html:root body.p11 .p11-head .p11-proof-l { min-width: 68px; }
html:root body.p11 .p11-hero-stage { position: relative; height: clamp(440px, 40vw, 600px); overflow: hidden; border-radius: 22px; background-color: #eceef0; box-shadow: 0 30px 80px rgba(18, 18, 18, 0.10); }
@media (prefers-reduced-motion: no-preference) {
    html:root body.p11 .p11-hero-stage { animation: p11Rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; }
}
@keyframes p11Rise { from { opacity: 0; transform: translateY(28px); } }

/* 9b. The drawings: the part at work over real results. Shared pieces. */
html:root body.p11 .p11-v { overflow: hidden; }
html:root body.p11 span.p11-v-lab {
    position: absolute; z-index: 2; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 7px; border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.86); font-size: 11.5px; font-weight: 500; line-height: 1.3; color: #121212; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html:root body.p11 .p11-v-ok { z-index: 3; }
html:root body.p11 span.p11-v-chip {
    position: absolute; z-index: 4; left: 5%; top: 5%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px;
    border-radius: 12px; background-color: #ffffff; box-shadow: 0 12px 32px rgba(18, 18, 18, 0.16);
    font-size: 13.5px; font-weight: 500; line-height: 1.2; color: #121212; white-space: nowrap;
}
html:root body.p11 span.p11-v-chip svg { flex: none; }
html:root body.p11 span.p11-v-chip--tr { left: auto; right: 5%; }
html:root body.p11 span.p11-v-chip--br { top: auto; left: auto; right: 5%; bottom: 5%; }
html:root body.p11 span.p11-v-chip--bl { top: auto; bottom: 5%; }

/* pics: one finished picture, the small input on its corner, results beside it. */
html:root body.p11 .p11-v-main { position: absolute; inset: 0; display: block; }
html:root body.p11 .p11-v--hasside .p11-v-main { inset: 5% 33% 5% 5%; overflow: hidden; border-radius: 16px; }
html:root body.p11 .p11-v-side { position: absolute; top: 5%; right: 5%; bottom: 5%; width: 25%; display: flex; flex-direction: column; gap: 12px; }
html:root body.p11 .p11-v-sp { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; border-radius: 14px; background-color: #e2e0dc; }
html:root body.p11 .p11-v-in {
    position: absolute; z-index: 3; left: 5%; bottom: 5%; width: 21%; aspect-ratio: 4 / 5; overflow: hidden;
    border: 4px solid #ffffff; border-radius: 16px; background-color: #ffffff; box-shadow: 0 16px 40px rgba(18, 18, 18, 0.22);
}
html:root body.p11 .p11-v--hasside .p11-v-in { left: 2.5%; bottom: 2.5%; }
html:root body.p11 span.p11-v-inl {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background-color: #ffffff;
    font-size: 11px; font-weight: 500; line-height: 1.3; text-align: center; color: #121212;
}

/* kit: what one brand holds, over its picture. */
html:root body.p11 .p11-v-kit { right: 5%; top: 50%; transform: translateY(-50%); width: 290px; padding: 6px 0; }
html:root body.p11 span.p11-v-kname { display: block; padding: 12px 18px 10px; border-bottom: 1px solid #efedea; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #121212; }
html:root body.p11 .p11-v-kit .p11-v-kr { min-height: 52px; }
html:root body.p11 span.p11-v-kv { font-size: 13px; line-height: 1.3; color: #121212; text-align: right; }
html:root body.p11 .p11-v-aa { align-items: center; gap: 8px; }
html:root body.p11 .p11-v-aa .p11-v-kv { font-weight: 400; color: #6f6d6a; }
html:root body.p11 .p11-v-kpics { display: flex; gap: 5px; }
html:root body.p11 .p11-v-kpics img { width: 30px !important; height: 30px !important; border-radius: 7px; }
html:root body.p11 span.p11-v-blogo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background-color: #121212; font-size: 11px; font-weight: 600; color: #ffffff; }

/* edit: the active tool. */
html:root body.p11 .p11-v-tools > span:nth-child(4) { background-color: #f6f5f3; color: #3d3d3c; }
html:root body.p11 .p11-v-tools > span.is-on { background-color: #121212; color: #ffffff; }

/* batch: the sheet's foot with the keep and drop keys. */
html:root body.p11 .p11-v-sfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #efedea; font-size: 12.5px; color: #6f6d6a; }
html:root body.p11 .p11-v-keys { display: inline-flex; align-items: center; gap: 6px; }
html:root body.p11 .p11-v-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid #d7d4cf; border-radius: 6px; background-color: #ffffff; font: 600 11.5px/1 var(--v4-font-sans, sans-serif); color: #121212; box-shadow: 0 1px 0 #d7d4cf; }

/* assets: the library's main column, the day heading, a bookmark. */
html:root body.p11 .p11-v-libm { display: flex; flex-direction: column; min-height: 0; padding: 14px; }
html:root body.p11 span.p11-v-day { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #121212; }
html:root body.p11 .p11-v-libm .p11-v-thumbs { flex: 1 1 auto; padding: 0; }
html:root body.p11 .p11-v-thumbs > span { position: relative; }
html:root body.p11 .p11-v-thumbs > span.is-mark { box-shadow: inset 0 0 0 2px #121212; }
html:root body.p11 span.p11-v-bm { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background-color: #121212; color: #96ff1a; }

/* chat: Create as it runs, one window. */
html:root body.p11 .p11-v--chat { background-color: #efe9e1; }
html:root body.p11 .p11-v-cw { left: 6%; right: 6%; top: 50%; transform: translateY(-50%); overflow: hidden; }
html:root body.p11 .p11-v--haspic .p11-v-cw { right: auto; width: min(380px, 58%); }
html:root body.p11 .p11-v-cwbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #efedea; }
html:root body.p11 span.p11-v-cwt { font-size: 14px; font-weight: 600; color: #121212; }
html:root body.p11 .p11-v-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background-color: #f1f0ee; }
html:root body.p11 .p11-v-mode > span { padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: #8f8d89; }
html:root body.p11 .p11-v-mode > span.is-on { background-color: #ffffff; color: #121212; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.1); }
html:root body.p11 .p11-v-cwb { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
html:root body.p11 span.p11-v-ask {
    align-self: flex-end; display: flex; align-items: center; gap: 10px; max-width: 92%; padding: 8px 14px 8px 8px;
    border-radius: 16px 16px 4px 16px; background-color: #121212; font-size: 14px; line-height: 1.4; color: #ffffff;
}
html:root body.p11 span.p11-v-ask:not(:has(img)) { padding-left: 14px; }
html:root body.p11 span.p11-v-ask img { flex: none; width: 40px !important; height: 40px !important; border-radius: 9px; }
html:root body.p11 span.p11-v-reply {
    align-self: flex-start; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 16px 4px;
    background-color: #f6f5f3; font-size: 14px; line-height: 1.4; color: #121212;
}
html:root body.p11 .p11-v-plan { display: flex; flex-direction: column; padding: 4px 12px 12px; border: 1px solid #ebe9e5; border-radius: 14px; }
html:root body.p11 .p11-v-pr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: 1px solid #f1f0ee; font-size: 13px; }
html:root body.p11 span.p11-v-pl { color: #8f8d89; }
html:root body.p11 span.p11-v-pv { font-weight: 500; color: #121212; text-align: right; }
html:root body.p11 span.p11-v-go { align-self: stretch; display: grid; place-items: center; height: 38px; margin-top: 12px; border-radius: 10px; background-color: #121212; font-size: 13.5px; font-weight: 500; color: #ffffff; }
html:root body.p11 .p11-v-res { display: flex; align-items: flex-start; gap: 8px; }
html:root body.p11 .p11-v-ro { display: flex; flex-direction: column; gap: 6px; flex: var(--rw, 0.8) 1 0; min-width: 0; }
html:root body.p11 .p11-v-rop { position: relative; display: block; aspect-ratio: var(--r, 4 / 5); overflow: hidden; border-radius: 12px; background-color: #f1f0ee; }
html:root body.p11 span.p11-v-rol { font-size: 12px; line-height: 1.3; color: #6f6d6a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* gen: Generate, the results over the prompt bar. */
html:root body.p11 .p11-v--gen { background-color: #e9ecef; }
html:root body.p11 .p11-v-gres { position: absolute; left: 5%; right: 5%; top: 5%; bottom: 33%; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
html:root body.p11 .p11-v-go2 { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 14px; background-color: #dcdfe3; }
html:root body.p11 .p11-v-bar2 { left: 5%; right: 5%; bottom: 5%; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
html:root body.p11 .p11-v-sw2 { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 9px; background-color: #f1f0ee; }
html:root body.p11 .p11-v-sw2 > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: #8f8d89; }
html:root body.p11 .p11-v-sw2 > span.is-on { background-color: #ffffff; color: #121212; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.1); }
html:root body.p11 .p11-v-prompt { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: #121212; }
html:root body.p11 .p11-v-prompt img { flex: none; width: 34px !important; height: 34px !important; border-radius: 8px; }
html:root body.p11 .p11-v-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html:root body.p11 .p11-v-opt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid #e6e4e1; border-radius: 8px; font-size: 12.5px; color: #3d3d3c; white-space: nowrap; }
html:root body.p11 .p11-v-opt svg { width: 13px; height: 13px; }
html:root body.p11 span.p11-v-genb { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9px; background-color: #121212; font-size: 13px; font-weight: 500; color: #ffffff; }

/* compare: one request on several models. */
html:root body.p11 .p11-v--compare { display: flex; flex-direction: column; gap: 14px; padding: 5%; background-color: #ecebe8; }
html:root body.p11 .p11-v-cmpq { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; border-radius: 12px; background-color: #ffffff; box-shadow: 0 8px 24px rgba(18, 18, 18, 0.08); font-size: 13.5px; line-height: 1.35; color: #121212; }
html:root body.p11 .p11-v-cmpq svg { flex: none; color: #8f8d89; }
html:root body.p11 .p11-v-cmp { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
html:root body.p11 .p11-v-ci { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 14px; background-color: #dcdad6; }
html:root body.p11 .p11-v-ci.is-on { box-shadow: 0 0 0 3px #121212; }
html:root body.p11 .p11-v-cm { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background-color: #ffffff; font-size: 12px; font-weight: 500; color: #121212; }
html:root body.p11 .p11-v-cm svg { width: 13px; height: 13px; }

/* canvas: a workflow, steps joined left to right on dotted paper. */
html:root body.p11 .p11-v--canvas { display: flex; align-items: center; justify-content: center; padding: 0 4%; background-color: #f4f3f1; }
html:root body.p11 .p11-v-dots { position: absolute; inset: 0; background-image: radial-gradient(#d6d3ce 1px, transparent 1.2px); background-size: 18px 18px; opacity: 0.9; }
html:root body.p11 .p11-v-flow { position: relative; display: flex; align-items: center; width: 100%; }
html:root body.p11 .p11-v-node { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; background-color: #ffffff; box-shadow: 0 10px 28px rgba(18, 18, 18, 0.10); }
html:root body.p11 .p11-v-node--out { box-shadow: 0 0 0 2px #121212, 0 10px 28px rgba(18, 18, 18, 0.10); }
html:root body.p11 .p11-v-nh { display: flex; align-items: center; gap: 5px; padding: 2px 2px 0; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: #121212; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root body.p11 .p11-v-nh svg { flex: none; color: #6f6d6a; }
html:root body.p11 .p11-v-np { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 9px; background-color: #f1f0ee; }
html:root body.p11 span.p11-v-nt { display: block; padding: 8px; border-radius: 9px; background-color: #f6f5f3; font-size: 11.5px; line-height: 1.4; color: #3d3d3c; }
html:root body.p11 .p11-v-ndone { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background-color: #96ff1a; color: #121212; box-shadow: 0 0 0 2px #ffffff; }
html:root body.p11 .p11-v-wire { flex: 0 0 clamp(14px, 2.4vw, 30px); height: 2px; background-color: #121212; position: relative; }
html:root body.p11 .p11-v-wire::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background-color: #121212; }
html:root body.p11 .p11-v-run { position: absolute; top: 5%; right: 4%; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 9px; background-color: #121212; font-size: 13px; font-weight: 500; color: #ffffff; }

/* form: an app, its short form beside its results. */
html:root body.p11 .p11-v--form { background-color: #ece9e4; }
html:root body.p11 .p11-v-form { left: 5%; top: 50%; transform: translateY(-50%); width: 40%; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
html:root body.p11 .p11-v-fh { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #efedea; }
html:root body.p11 span.p11-v-fn { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #121212; }
html:root body.p11 span.p11-v-fs { font-size: 12px; color: #6f6d6a; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9c6c1; }
html:root body.p11 .p11-v-fphoto { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px dashed #d7d4cf; border-radius: 11px; font-size: 12.5px; color: #3d3d3c; }
html:root body.p11 .p11-v-fphoto img { flex: none; width: 44px !important; height: 44px !important; border-radius: 8px; }
html:root body.p11 .p11-v-field { display: flex; flex-direction: column; gap: 4px; }
html:root body.p11 span.p11-v-fl { font-size: 11.5px; color: #8f8d89; }
html:root body.p11 span.p11-v-fv { padding: 8px 10px; border: 1px solid #e6e4e1; border-radius: 9px; font-size: 13px; color: #121212; }
html:root body.p11 .p11-v-frun { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin-top: 4px; border-radius: 10px; background-color: #121212; font-size: 13.5px; font-weight: 500; color: #ffffff; }
html:root body.p11 .p11-v-fout { position: absolute; top: 6%; bottom: 6%; left: 49%; right: 5%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 10px; }
html:root body.p11 .p11-v-fout[style*="--n: 1"] { grid-template-columns: minmax(0, 0.8fr); justify-content: center; }
html:root body.p11 .p11-v-fo { position: relative; display: block; min-height: 0; aspect-ratio: var(--r, 4 / 5); overflow: hidden; border-radius: 14px; background-color: #dcdad6; }

/* sizes: the image editor, a design on its canvas and the sizes beside it. */
html:root body.p11 .p11-v--sizes { background-color: #e7e9ec; }
html:root body.p11 .p11-v-ed { inset: 5%; display: grid; grid-template-columns: 46px minmax(0, 1fr) 190px; overflow: hidden; }
html:root body.p11 .p11-v-edtools { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-right: 1px solid #efedea; }
html:root body.p11 .p11-v-edtools > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #6f6d6a; }
html:root body.p11 .p11-v-edtools > span.is-on { background-color: #121212; color: #ffffff; }
html:root body.p11 .p11-v-edc { display: grid; place-items: center; min-height: 0; padding: 18px; background-color: #f4f3f1; }
html:root body.p11 .p11-v-design { position: relative; display: block; height: 100%; max-height: 100%; aspect-ratio: 4 / 5; overflow: visible; }
html:root body.p11 .p11-v-design > img { border-radius: 4px; box-shadow: 0 10px 30px rgba(18, 18, 18, 0.14); }
html:root body.p11 .p11-v-layer {
    position: absolute; left: 8%; right: 8%; top: 7%; padding: 6px 8px; outline: 1.5px solid #2f6bff; outline-offset: 0;
    font-size: clamp(16px, 2vw, 26px); font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}
html:root body.p11 .p11-v-layer--bottom { top: auto; bottom: 9%; }
html:root body.p11 .p11-v-layer i { position: absolute; width: 8px; height: 8px; border: 1.5px solid #2f6bff; border-radius: 2px; background-color: #ffffff; }
html:root body.p11 .p11-v-layer .p11-v-h1 { left: -5px; top: -5px; } html:root body.p11 .p11-v-layer .p11-v-h2 { right: -5px; top: -5px; }
html:root body.p11 .p11-v-layer .p11-v-h3 { left: -5px; bottom: -5px; } html:root body.p11 .p11-v-layer .p11-v-h4 { right: -5px; bottom: -5px; }
html:root body.p11 span.p11-v-tag { position: absolute; right: 7%; bottom: 7%; padding: 6px 10px; border-radius: 999px; background-color: #ffffff; font-size: clamp(11px, 1vw, 13px); font-weight: 600; color: #121212; }
html:root body.p11 .p11-v-edside { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-left: 1px solid #efedea; }
html:root body.p11 .p11-v-edside span.p11-v-cap { padding: 2px 6px 6px; }
html:root body.p11 .p11-v-sz { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 8px; border-radius: 9px; font-size: 12.5px; color: #3d3d3c; }
html:root body.p11 .p11-v-sz.is-on { background-color: #f1f0ee; font-weight: 600; color: #121212; }
html:root body.p11 span.p11-v-szr { flex: none; display: block; height: 18px; border: 1.5px solid #8f8d89; border-radius: 3px; }
html:root body.p11 .p11-v-sz.is-on span.p11-v-szr { border-color: #121212; }
html:root body.p11 .p11-v-exp { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 9px; background-color: #121212; font-size: 12.5px; font-weight: 500; color: #ffffff; }

/* poses: one avatar's nine poses. */
html:root body.p11 .p11-v--poses { background-color: #e9ebee; }
html:root body.p11 .p11-v-poses { position: absolute; inset: 5%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
html:root body.p11 .p11-v-pose { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 12px; background-color: #d9dbde; }
html:root body.p11 .p11-v-pose img { object-position: 50% 18%; }
html:root body.p11 .p11-v-who { position: absolute; z-index: 4; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 14px; background-color: #ffffff; box-shadow: 0 12px 32px rgba(18, 18, 18, 0.18); white-space: nowrap; }
html:root body.p11 .p11-v-who img { flex: none; width: 34px !important; height: 34px !important; border-radius: 50%; }
html:root body.p11 .p11-v-whot { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #121212; }

/* gallery: Inspiration, filters over the ideas, one open. */
html:root body.p11 .p11-v--gallery { display: flex; flex-direction: column; gap: 12px; padding: 5%; background-color: #f1efeb; }
html:root body.p11 .p11-v-filt { display: flex; gap: 6px; overflow: hidden; }
html:root body.p11 .p11-v-filt > span { flex: none; padding: 6px 11px; border-radius: 999px; background-color: #ffffff; font-size: 12.5px; font-weight: 500; color: #3d3d3c; white-space: nowrap; }
html:root body.p11 .p11-v-filt > span.is-on { background-color: #121212; color: #ffffff; }
html:root body.p11 .p11-v-gal { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
html:root body.p11 .p11-v-gi { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 12px; background-color: #e2dfda; }
html:root body.p11 .p11-v-gi.is-on { box-shadow: 0 0 0 3px #121212; }
html:root body.p11 span.p11-v-use { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 7px 12px; border-radius: 9px; background-color: #121212; font-size: 12px; font-weight: 500; color: #ffffff; white-space: nowrap; }

/* faces: ready avatars, one picked. */
html:root body.p11 .p11-v--faces { background-color: #f1efeb; }
html:root body.p11 .p11-v-faces { position: absolute; inset: 5%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
html:root body.p11 .p11-v-face { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 14px; }
html:root body.p11 .p11-v-face.is-on { box-shadow: 0 0 0 3px #121212; }
html:root body.p11 span.p11-v-fnm { position: absolute; left: 7px; bottom: 7px; padding: 2px 7px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.88); font-size: 11.5px; font-weight: 600; color: #121212; }

/* steps: the step list, by kind. */
html:root body.p11 .p11-v--steps { background-color: #f4f3f1; }
html:root body.p11 .p11-v-stl { inset: 5%; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: hidden; }
html:root body.p11 .p11-v-stg { display: flex; flex-direction: column; gap: 6px; }
html:root body.p11 .p11-v-sts { display: flex; flex-wrap: wrap; gap: 6px; }
html:root body.p11 .p11-v-st { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background-color: #f6f5f3; font-size: 12.5px; color: #121212; }
html:root body.p11 .p11-v-st svg { color: #6f6d6a; }

/* 9c. Use cases: four cards fit the grid; more scroll sideways. */
html:root body.p11 .p11-ind--fit { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
html:root body.p11 .p11-ind-pic { position: relative; }
html:root body.p11 span.p11-ind-chip {
    position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 4px 8px; border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.86); font-size: 12px; font-weight: 500; line-height: 1.3; color: #121212;
}
html:root body.p11 div.p11-ind-a { display: flex; flex-direction: column; gap: 4px; color: #121212; }

/* 9d. The rest of the workspace: twelve parts, a picture and one line each. */
html:root body.p11 .p11-ws { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; }
html:root body.p11 .p11-ws li { margin: 0; min-width: 0; }
html:root body.p11 main a.p11-ws-a { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 8px; margin: 0 -8px; border-radius: 16px; color: #121212; text-decoration: none; transition: background-color 150ms ease; }
@media (hover: hover) { html:root body.p11 main a.p11-ws-a:hover { background-color: #f6f5f3; } }
html:root body.p11 main a.p11-ws-a:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
html:root body.p11 .p11-ws-pic { flex: none; display: block; width: 68px; height: 68px; overflow: hidden; border-radius: 12px; background-color: #f1f0ee; }
html:root body.p11 .p11-ws-pic img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.p11 .p11-ws-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html:root body.p11 span.p11-ws-t { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #121212; }
html:root body.p11 span.p11-ws-d { font-size: 14px; line-height: 1.4; color: #6f6d6a; }

/* 9e. Questions: the homepage's grid, without its sheet. */
html:root body.p11 .p11-faq { display: grid; align-items: start; }
html:root body.p11 .p11-faq-side { position: sticky; top: 96px; }

/* 9f. Widths. */
@media (max-width: 1199.98px) {
    html:root body.p11 .p11-ws { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html:root body.p11 .p11-v-ed { grid-template-columns: 42px minmax(0, 1fr) 160px; }
}
@media (max-width: 1023.98px) {
    html:root body.p11 .p11-hero-in { grid-template-columns: minmax(0, 1fr); }
    html:root body.p11 .p11-head { max-width: 720px; margin: 0 auto; text-align: center; }
    html:root body.p11 main .p11-h1, html:root body.p11 main .p11-sub { margin-left: auto; margin-right: auto; }
    html:root body.p11 .p11-actions { justify-content: center; }
    html:root body.p11 .p11-head .p11-proof { align-items: center; }
    html:root body.p11 .p11-head .p11-proof-g { justify-content: center; }
    html:root body.p11 .p11-head .p11-proof-l { min-width: 0; }
    html:root body.p11 .p11-ind--fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
    html:root body.p11 .p11-faq-side { position: static; }
}
@media (max-width: 599.98px) {
    /* The hero on a phone: the words centred, the two asks, the drawing, the proof row. */
    html:root body.p11 .p11-frame { padding-bottom: 0; }
    html:root body.p11 .p11-hero-in { display: contents; }
    html:root body.p11 main .p11-h1 { font-size: 30px; line-height: 1.1; }
    html:root body.p11 main .p11-sub { font-size: 15px; }
    html:root body.p11 .p11-head .p11-proof { order: 6; align-items: center; margin: 0; padding: 14px 16px 16px; border-top: 1px solid #efedea; }
    html:root body.p11 .p11-hero-stage { order: 5; height: 340px; margin: 22px 12px 14px; border-radius: 16px; box-shadow: none; }
    html:root body.p11 .p11-amb { display: none; }

    /* The drawings at phone size. */
    html:root body.p11 span.p11-v-chip { padding: 6px 9px; gap: 6px; border-radius: 9px; font-size: 11.5px; }
    html:root body.p11 span.p11-v-chip svg { width: 12px; height: 12px; }
    html:root body.p11 span.p11-v-lab { left: 5px; bottom: 5px; padding: 2px 5px; font-size: 10px; }
    html:root body.p11 .p11-v-in { width: 26%; border-width: 3px; border-radius: 11px; }
    html:root body.p11 span.p11-v-inl { font-size: 9.5px; padding: 2px 4px; }
    html:root body.p11 .p11-v--hasside .p11-v-main { inset: 4% 31% 4% 4%; border-radius: 12px; }
    html:root body.p11 .p11-v-side { top: 4%; right: 4%; bottom: 4%; width: 25%; gap: 6px; }
    html:root body.p11 .p11-v-sp { border-radius: 10px; }
    html:root body.p11 .p11-v-kit { right: 4%; width: 190px; padding: 2px 0; }
    html:root body.p11 span.p11-v-kname { padding: 9px 12px 7px; font-size: 13px; }
    html:root body.p11 .p11-v-kit .p11-v-kr { min-height: 38px; }
    html:root body.p11 span.p11-v-kv { font-size: 11.5px; }
    html:root body.p11 .p11-v-kpics img { width: 22px !important; height: 22px !important; border-radius: 5px; }
    html:root body.p11 .p11-v-sfoot { margin-top: 8px; padding-top: 8px; font-size: 10.5px; }
    html:root body.p11 .p11-v-keys kbd { min-width: 18px; height: 18px; font-size: 10px; }
    html:root body.p11 .p11-v-libm { padding: 8px; }
    html:root body.p11 span.p11-v-day { margin-bottom: 6px; font-size: 11.5px; }
    html:root body.p11 .p11-v-cw { left: 4%; right: 4%; }
    html:root body.p11 .p11-v--haspic .p11-v-cw { width: 72%; }
    html:root body.p11 .p11-v-cwbar { padding: 8px 10px; }
    html:root body.p11 span.p11-v-cwt { font-size: 12px; }
    html:root body.p11 .p11-v-mode > span { padding: 3px 7px; font-size: 10.5px; }
    html:root body.p11 .p11-v-cwb { gap: 8px; padding: 10px; }
    html:root body.p11 span.p11-v-ask { gap: 7px; padding: 6px 10px 6px 6px; font-size: 12px; }
    html:root body.p11 span.p11-v-ask img { width: 30px !important; height: 30px !important; border-radius: 7px; }
    html:root body.p11 span.p11-v-reply { padding: 7px 10px; font-size: 12px; }
    html:root body.p11 .p11-v-plan { padding: 2px 9px 9px; border-radius: 10px; }
    html:root body.p11 .p11-v-pr { min-height: 26px; font-size: 11px; }
    html:root body.p11 span.p11-v-go { height: 30px; margin-top: 8px; font-size: 11.5px; }
    html:root body.p11 .p11-v-res { gap: 5px; }
    html:root body.p11 .p11-v-rop { border-radius: 8px; }
    html:root body.p11 span.p11-v-rol { font-size: 10.5px; }
    html:root body.p11 .p11-v-gres { left: 4%; right: 4%; top: 4%; bottom: 38%; gap: 6px; }
    html:root body.p11 .p11-v-go2 { border-radius: 10px; }
    html:root body.p11 .p11-v-bar2 { left: 4%; right: 4%; bottom: 4%; gap: 7px; padding: 9px; }
    html:root body.p11 .p11-v-sw2 > span { padding: 3px 7px; font-size: 10.5px; }
    html:root body.p11 .p11-v-prompt { gap: 7px; font-size: 12px; line-height: 1.35; }
    html:root body.p11 .p11-v-prompt img { width: 26px !important; height: 26px !important; }
    html:root body.p11 .p11-v-opt { height: 24px; padding: 0 7px; font-size: 10.5px; }
    html:root body.p11 .p11-v-opt:nth-child(n+3):not(:last-child) { display: none; }
    html:root body.p11 span.p11-v-genb { height: 26px; padding: 0 9px; font-size: 11px; }
    html:root body.p11 .p11-v--compare { gap: 8px; padding: 4%; }
    html:root body.p11 .p11-v-cmpq { padding: 6px 10px; font-size: 11.5px; }
    html:root body.p11 .p11-v-cmp { gap: 6px; }
    html:root body.p11 .p11-v-ci { border-radius: 10px; }
    html:root body.p11 .p11-v-cm { left: 5px; bottom: 5px; gap: 4px; padding: 3px 6px; font-size: 10px; }
    html:root body.p11 .p11-v-node { gap: 5px; padding: 5px; border-radius: 10px; }
    html:root body.p11 .p11-v-nh { font-size: 9.5px; gap: 3px; }
    html:root body.p11 .p11-v-nh svg { width: 10px; height: 10px; }
    html:root body.p11 .p11-v-np { border-radius: 6px; }
    html:root body.p11 span.p11-v-nt { padding: 5px; font-size: 9.5px; }
    html:root body.p11 .p11-v-ndone { width: 14px; height: 14px; top: -5px; right: -5px; }
    html:root body.p11 .p11-v-wire { flex-basis: 8px; }
    html:root body.p11 .p11-v-wire::after { width: 6px; height: 6px; top: -2px; right: -2px; }
    html:root body.p11 .p11-v-run { height: 28px; padding: 0 10px; font-size: 11.5px; }
    html:root body.p11 .p11-v-form { left: 4%; width: 52%; gap: 6px; padding: 9px; }
    html:root body.p11 span.p11-v-fn { font-size: 12.5px; }
    html:root body.p11 span.p11-v-fs { font-size: 10.5px; }
    html:root body.p11 .p11-v-fphoto { gap: 6px; padding: 5px; font-size: 10.5px; }
    html:root body.p11 .p11-v-fphoto img { width: 30px !important; height: 30px !important; }
    html:root body.p11 span.p11-v-fl { font-size: 10px; }
    html:root body.p11 span.p11-v-fv { padding: 5px 7px; font-size: 11px; }
    html:root body.p11 .p11-v-frun { height: 30px; font-size: 11.5px; }
    html:root body.p11 .p11-v-fout { left: 59%; right: 4%; top: 5%; bottom: 5%; grid-template-columns: minmax(0, 1fr); gap: 6px; }
    html:root body.p11 .p11-v-fo:nth-child(n+3) { display: none; }
    html:root body.p11 .p11-v-ed { inset: 4%; grid-template-columns: minmax(0, 1fr) 112px; }
    html:root body.p11 .p11-v-edtools { display: none; }
    html:root body.p11 .p11-v-edc { padding: 10px; }
    html:root body.p11 .p11-v-layer { font-size: 13px; padding: 3px 5px; }
    html:root body.p11 .p11-v-layer i { width: 6px; height: 6px; }
    html:root body.p11 span.p11-v-tag { font-size: 9.5px; padding: 3px 7px; }
    html:root body.p11 .p11-v-edside { padding: 8px 6px; gap: 2px; }
    html:root body.p11 .p11-v-sz { min-height: 26px; gap: 6px; padding: 0 5px; font-size: 10.5px; }
    html:root body.p11 span.p11-v-szr { height: 13px; }
    html:root body.p11 .p11-v-exp { height: 28px; font-size: 10.5px; }
    html:root body.p11 .p11-v-poses { inset: 4%; gap: 5px; }
    html:root body.p11 .p11-v-pose { border-radius: 8px; }
    html:root body.p11 .p11-v-who { gap: 7px; padding: 5px 10px 5px 5px; }
    html:root body.p11 .p11-v-who img { width: 26px !important; height: 26px !important; }
    html:root body.p11 .p11-v-whot { font-size: 11.5px; }
    html:root body.p11 .p11-v--gallery { gap: 8px; padding: 4%; }
    html:root body.p11 .p11-v-filt > span { padding: 4px 8px; font-size: 10.5px; }
    html:root body.p11 .p11-v-gal { gap: 6px; }
    html:root body.p11 .p11-v-gi { border-radius: 8px; }
    html:root body.p11 span.p11-v-use { bottom: 6px; padding: 5px 8px; font-size: 10px; }
    html:root body.p11 .p11-v-faces { inset: 4%; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html:root body.p11 .p11-v-face:nth-child(n+10) { display: none; }
    html:root body.p11 span.p11-v-fnm { font-size: 10px; left: 5px; bottom: 5px; }
    html:root body.p11 .p11-v-stl { inset: 4%; gap: 8px; padding: 10px; }
    html:root body.p11 .p11-v-st { padding: 4px 7px; font-size: 10.5px; }

    /* Use cases and the rest of the workspace. */
    html:root body.p11 .p11-ind--fit { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 58%; overflow-x: auto; }
    html:root body.p11 span.p11-ind-chip { left: 7px; top: 7px; font-size: 11px; }
    html:root body.p11 .p11-ws { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 18px; }
    html:root body.p11 main a.p11-ws-a { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 6px; margin: 0 -6px; border-radius: 12px; }
    html:root body.p11 .p11-ws-pic { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; }
    html:root body.p11 span.p11-ws-t { font-size: 14.5px; }
    html:root body.p11 span.p11-ws-d { font-size: 12.5px; line-height: 1.35; }
}

/* 9g. A result with words on it: a headline and a price tag, the way the
   image editor adds them (a text layer over a real picture). */
html:root body.p11 span.p11-out-txt {
    position: absolute; z-index: 2; left: 9%; right: 9%; top: 8%;
    font-size: clamp(14px, calc(var(--oh, 300px) * 0.075), 24px); font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; color: #ffffff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.22); text-wrap: balance;
}
html:root body.p11 span.p11-out-txt--bottom { top: auto; bottom: 9%; }
html:root body.p11 span.p11-out-txt--dark { color: #121212; text-shadow: none; }
html:root body.p11 span.p11-out-tag { position: absolute; z-index: 2; right: 8%; bottom: 8%; padding: 5px 10px; border-radius: 999px; background-color: #ffffff; font-size: 12.5px; font-weight: 650; color: #121212; }

/* 9h. The hub: the parts in groups, a numbered head beside its cards. */
html:root body.p11 main > section.p11-grp-s { padding-top: 40px; padding-bottom: 40px; }
html:root body.p11 .p11-grp { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: clamp(24px, 3.6vw, 56px); padding-top: 32px; border-top: 1px solid #e6e4e1; }
html:root body.p11 .p11-grp-head { display: flex; flex-direction: column; gap: 16px; }
html:root body.p11 span.p11-grp-n { font-family: var(--v4-font-pixel); font-size: 15px; line-height: 1; color: #a3a19d; }
html:root body.p11 .p11-grp-head .v4-head { margin: 0; }
html:root body.p11 main .p11-grp-head .v4-h2 { font-size: clamp(24px, 2.2vw, 32px); }
html:root body.p11 main .p11-grp-head p.v4-sub { font-size: 16px; }
html:root body.p11 .p11-grp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
html:root body.p11 .p11-grp-list li { margin: 0; min-width: 0; }
@media (max-width: 1023.98px) {
    html:root body.p11 .p11-grp { grid-template-columns: minmax(0, 1fr); }
    html:root body.p11 .p11-grp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    html:root:root body.p11 main > section.p11-grp-s { padding-top: 14px !important; padding-bottom: 14px !important; }
    html:root body.p11 .p11-grp { gap: 14px; padding-top: 20px; }
    html:root body.p11 .p11-grp-head { gap: 8px; }
    html:root body.p11 main .p11-grp-head .v4-h2 { font-size: 22px; }
    html:root body.p11 main .p11-grp-head p.v4-sub { font-size: 14.5px; }
    html:root body.p11 .p11-grp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
    html:root body.p11 span.p11-out-txt { font-size: 13px; }
    html:root body.p11 span.p11-out-tag { padding: 3px 7px; font-size: 10px; }
}

/* 9i. Caption styles on a clip (the video editor's text styles). */
html:root body.p11 span.p11-out-cap--white { background-color: transparent; font-size: 13px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
html:root body.p11 span.p11-out-cap--yellow { left: 14%; right: 14%; background-color: #ffd84d; color: #121212; }
html:root body.p11 span.p11-out-cap--top { top: 12%; bottom: auto; }
html:root body.p11 .p11-v-tr--3 .p11-v-bar i:nth-child(1) { flex: 2; } html:root body.p11 .p11-v-tr--3 .p11-v-bar i:nth-child(2) { flex: 6; } html:root body.p11 .p11-v-tr--3 .p11-v-bar i:nth-child(3) { flex: 2; }

/* 9j. QA round 1 (2026-10-26). */
/* The editor's design fits its column at every width (it covered the sizes). */
html:root body.p11 .p11-v-edc { container-type: size; }
html:root body.p11 .p11-v-design { height: auto; max-height: none; width: min(100cqw, 80cqh); }
/* A title's Geist Pixel words never part across lines. */
html:root body.p11 main .v4-h2 .v4-pixel, html:root body.p11 main h3 .v4-pixel { white-space: nowrap; }
/* Create with a picture: the chat on the left, the result on its board on the right. */
html:root body.p11 .p11-v--haspic img.p11-v-bg { inset: 6% 5% 6% auto; width: 44%; height: 88%; border-radius: 16px; box-shadow: 0 18px 50px rgba(18, 18, 18, 0.14); }
html:root body.p11 .p11-v--haspic .p11-v-cw { left: 5%; right: auto; width: 47%; }
@media (max-width: 599.98px) {
    html:root body.p11 .p11-v--haspic img.p11-v-bg { inset: 5% 4% 5% auto; width: 40%; height: 90%; border-radius: 12px; }
    html:root body.p11 .p11-v--haspic .p11-v-cw { left: 4%; width: 54%; }
}

/* 9k. The use-case head's button, and the kinds of steps (the steps page). */
html:root:root body.p11 main a.p11-uses-more { flex: none; margin-left: auto; margin-right: 8px; }
html:root body.p11 .p11-uses-top { align-items: flex-end; }
html:root body.p11 .p11-kinds { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html:root body.p11 .p11-kind { margin: 0; padding: 22px 24px; border-radius: 20px; background-color: #f6f5f3; }
html:root body.p11 .p11-kind-h { display: flex; align-items: center; gap: 10px; }
html:root body.p11 span.p11-kind-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background-color: #121212; color: #ffffff; }
html:root body.p11 main h3.p11-kind-t { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -0.012em; color: #121212; }
html:root body.p11 main p.p11-kind-d { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #6f6d6a; }
html:root body.p11 .p11-kind-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
html:root body.p11 .p11-kind-chips li { margin: 0; padding: 6px 10px; border-radius: 9px; background-color: #ffffff; font-size: 13.5px; line-height: 1.2; color: #121212; }
@media (max-width: 899.98px) { html:root body.p11 .p11-kinds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) {
    html:root:root body.p11 main a.p11-uses-more { display: none; }
    html:root body.p11 .p11-kinds { margin-top: 18px; gap: 10px; }
    html:root body.p11 .p11-kind { padding: 16px; border-radius: 16px; }
    html:root body.p11 main h3.p11-kind-t { font-size: 17px; }
    html:root body.p11 main p.p11-kind-d { font-size: 14px; }
    html:root body.p11 .p11-kind-chips li { padding: 5px 8px; font-size: 12.5px; }
}

/* 9l. QA round 2: the gallery's filters keep their height; the avatar chip
   sits under the nine poses, not on one of them. */
html:root body.p11 .p11-v-filt { flex: none; padding: 2px 0; }
html:root body.p11 .p11-v--poses .p11-v-poses { inset: 5% 5% 16% 5%; }
html:root body.p11 .p11-v--poses .p11-v-who { bottom: 3.5%; }
@media (max-width: 599.98px) {
    html:root body.p11 .p11-v--poses .p11-v-poses { inset: 4% 4% 18% 4%; }
    html:root body.p11 .p11-v--poses .p11-v-who { bottom: 3%; }
}

/* 9m. The canvas: bigger steps, titles on up to two lines. */
html:root body.p11 .p11-v-np { aspect-ratio: 3 / 4; }
html:root body.p11 .p11-v-nh { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; align-items: flex-start; }
html:root body.p11 .p11-v-nh svg { margin-top: 1px; }
html:root body.p11 .p11-v-flow { max-width: 620px; margin: 0 auto; }
@media (max-width: 599.98px) { html:root body.p11 .p11-v-nh { min-height: 2.3em; } }

/* 9n. QA round 3 (visual review). */
/* The open tab sits in the middle of the panel's height, so a short tab leaves
   no empty band above the price line. */
html:root body.p11 .p11-pane { align-self: center; }
/* Ink words on a pale picture, and a small logo mark on a result. */
html:root body.p11 .p11-v-layer--dark { color: #121212; text-shadow: none; }
html:root body.p11 span.p11-out-txt--dark { color: #121212; text-shadow: none; }
html:root body.p11 span.p11-out-logo { position: absolute; z-index: 2; left: 50%; bottom: 7%; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; color: #121212; white-space: nowrap; }
/* One Generate result keeps its own shape, centred, instead of a stretched box. */
html:root body.p11 .p11-v-gres[style$="--n: 1"] { display: flex; justify-content: center; }
html:root body.p11 .p11-v-gres[style$="--n: 1"] .p11-v-go2 { height: 100%; width: auto; aspect-ratio: var(--r, 3 / 4); }
@media (max-width: 699.98px) {
    /* Phone tabs: as many columns as fit the count, labels may wrap. */
    html:root body.p11 .p11-tabs[data-n="2"], html:root body.p11 .p11-tabs[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:root body.p11 .p11-tabs[data-n="3"], html:root body.p11 .p11-tabs[data-n="5"], html:root body.p11 .p11-tabs[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html:root body.p11 main button.p11-tab { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 6px; }
}

/* 9o. The review page the client opens (the Reviews hero). */
html:root body.p11 .p11-v--review:has(.p11-v-rpage) { padding: 0; }
html:root body.p11 .p11-v-rpage { left: 7%; right: 7%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; padding: 18px; }
html:root body.p11 .p11-v-rhead { display: flex; flex-direction: column; gap: 3px; }
html:root body.p11 span.p11-v-rt { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #121212; }
html:root body.p11 .p11-v-rpage .p11-v-picks { gap: 10px; }
html:root body.p11 .p11-v-rfoot { display: flex; align-items: center; gap: 10px; }
html:root body.p11 span.p11-v-rnote { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid #e6e4e1; border-radius: 10px; font-size: 13.5px; line-height: 1.35; color: #121212; }
html:root body.p11 span.p11-v-rsend { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background-color: #121212; font-size: 13.5px; font-weight: 500; color: #ffffff; }
@media (max-width: 599.98px) {
    html:root body.p11 .p11-v-rpage { left: 4%; right: 4%; gap: 10px; padding: 12px; }
    html:root body.p11 span.p11-v-rt { font-size: 13.5px; }
    html:root body.p11 .p11-v-rpage .p11-v-picks { gap: 6px; }
    html:root body.p11 span.p11-v-rnote { padding: 7px 9px; font-size: 11.5px; }
    html:root body.p11 span.p11-v-rsend { height: 32px; padding: 0 10px; font-size: 11.5px; }
}

/* 9p. The app form: a narrower form, bigger results beside it. */
@media (min-width: 600px) {
    html:root body.p11 .p11-v-form { width: 37%; }
    html:root body.p11 .p11-v-fout { left: 46%; }
}

/* 9q. Canvas steps keep one size, so a canvas of two steps does not draw one
   giant step; the row sits in the middle. */
html:root body.p11 .p11-v-flow { justify-content: center; }
html:root body.p11 .p11-v-node { max-width: 150px; }
@media (max-width: 599.98px) { html:root body.p11 .p11-v-node { max-width: 112px; } }
/* The step list sits in the middle of its card. */
html:root body.p11 .p11-v-stl { justify-content: center; }