/* =============================================================================
   home-v11.css - the English homepage (white since 2026-10-26).

   Markup: app/server/views/frontend/v4/_home_v11.pug, included by
   frontend_next_v10.pug when V11HOME (en-GB only). Prefix h11-; every rule
   sits under body.hv-v11, so no other page and no other locale can change.

   2026-10-26, the page rethought as one (Vytas: "think about homepage
   holistically ... what needs to stand out", "think about user attention").
   Rhythm: the white hero, the lit sentence, an ink panel for what you can
   make, picture cards for who it is for, three groups of light tiles in ink
   frames for what is inside, a grey card for the AI chat, the questions, an
   ink close. "Too white" sections became ink or
   picture led; "too high" became one panel; "too noisy" lost its extras.

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

   1. Hero  2. Sentence  3. What you can make  4. Who it is for  5. Built in
   5b. AI chat  6. Questions  7. Close  8. Widths
   ============================================================================= */

/* ---- 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.hv-v11 .v10-navwrap ~ main { margin-top: 0 !important; }
html:root body.hv-v11 .v10-navwrap { background-color: transparent; transition: background-color 150ms ease, border-color 150ms ease; }
html:root body.hv-v11 .v10-navwrap:has(.v10-nav.is-stuck),
html:root body.hv-v11 .v10-navwrap:has(.v10-mobile.is-open, [data-burger][aria-expanded="true"]) { background-color: #ffffff; border-bottom-color: #e6e4e1; }
html:root body.hv-v11 .v10-navwrap ~ main > section.h11-hero:first-of-type { padding: 8px 8px 0 !important; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-amb--a { left: 2vw; bottom: -22vw; background-image: url('/img/home/v11/hero-campaign-boat.webp'); }
html:root body.hv-v11 .h11-amb--b { right: 2vw; bottom: -22vw; background-image: url('/img/home/v11/hero-creator-perfume.webp'); }
html:root body.hv-v11 .h11-hero-in { position: relative; z-index: 2; }
html:root body.hv-v11 .h11-head { max-width: 1240px; margin: 0 auto; text-align: center; }
html:root body.hv-v11 main .h11-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.hv-v11 main .h11-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.hv-v11 main .h11-h1 .v4-pixel { white-space: nowrap; }
html:root body.hv-v11 main .h11-h1 .h11-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.hv-v11 main h1.h11-h1:not(#_h11) { 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.hv-v11 main .v4-pixel { word-spacing: -0.2em; }
html:root body.hv-v11 main .h11-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.hv-v11 .h11-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
html:root:root body.hv-v11 main a.v4-btn-primary.h11-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.hv-v11 main a.v4-btn-primary.h11-go--light { background-color: #ffffff; border-color: #ffffff; color: #121212; }
html:root:root:root body.hv-v11 main a.v4-btn-primary.h11-go--light:hover,
html:root:root:root body.hv-v11 main a.v4-btn-primary.h11-go--light:hover * { background-color: #96ff1a; border-color: #96ff1a; color: #121212; }
html:root:root body.hv-v11 main a.v4-btn-secondary.h11-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.hv-v11 main a.v4-btn-secondary.h11-go:hover { border-color: #121212; background-color: #ffffff; color: #121212; }
html:root:root body.hv-v11 main a.h11-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.hv-v11 .h11-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 36px; margin-top: 30px; }
html:root body.hv-v11 .h11-proof-g { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
html:root body.hv-v11 .h11-proof-l { font-size: 13px; color: #8f8d89; }
html:root body.hv-v11 .h11-proof-sep { width: 1px; height: 20px; background-color: #e0ddd8; }
html:root body.hv-v11 .h11-works-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
html:root body.hv-v11 .h11-works-list li { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 1; color: #57554f; }
html:root body.hv-v11 .h11-works-list svg { flex: none; width: 18px; height: 18px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-logos li { margin: 0; line-height: 0; }
html:root body.hv-v11 img.h11-logo { display: block; width: auto; max-width: none; margin: 0; opacity: 0.68; }
html:root body.hv-v11 img.h11-logo--creatorflow { height: 14px; }
html:root body.hv-v11 img.h11-logo--postnext { height: 15px; }
html:root body.hv-v11 img.h11-logo--rnj-transport { height: 18px; }
html:root body.hv-v11 img.h11-logo--strategic-mood { height: 16px; }

/* The fan: seven cards dealt from the middle, cut by the frame's bottom edge. */
html:root body.hv-v11 .h11-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.hv-v11 .h11-fan-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
html:root body.hv-v11 .h11-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.hv-v11 a.h11-card-a { position: relative; display: block; color: inherit; text-decoration: none; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-card-pic img,
html:root body.hv-v11 .h11-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.hv-v11 a.h11-card-a:hover .h11-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.hv-v11 span.h11-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.hv-v11 span.h11-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.hv-v11 .h11-card--r span.h11-card-l { left: auto; right: 10px; }
@media (prefers-reduced-motion: no-preference) {
    html:root body.hv-v11 .h11-card { animation: h11Deal 950ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(250ms + var(--ak) * 80ms); }
}
@keyframes h11Deal { 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.hv-v11 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.hv-v11 .h11-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.hv-v11 .h11-nw { white-space: nowrap; }

/* ---- 2. The sentence -------------------------------------------------------- */
html:root body.hv-v11 main > section#what { padding-top: 88px; }
html:root body.hv-v11 main .h11-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.hv-v11 main .h11-say-a .h11-w { transition: opacity 260ms ease; }
html:root body.hv-v11 main .h11-say-a .h11-sent { display: block; text-wrap: balance; }
html:root body.hv-v11 main .h11-say-a .h11-nb { white-space: nowrap; }
html.h11-js:root body.hv-v11 main .h11-say-a .h11-w { opacity: 0.18; }
html.h11-js:root body.hv-v11 main .h11-say-a .h11-w.is-lit { opacity: 1; }
html:root body.hv-v11 main img.h11-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.hv-v11 #jobs { scroll-margin-top: 72px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-tabs::-webkit-scrollbar { display: none; }
html:root body.hv-v11 main button.h11-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.hv-v11 main button.h11-tab:hover { color: #ffffff; } }
html:root body.hv-v11 main button.h11-tab.is-on { background-color: #2c2c2a; color: #ffffff; }
html:root body.hv-v11 main button.h11-tab:focus { outline: 0; }
html.h11-kbd:root body.hv-v11 main button.h11-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
html:root body.hv-v11 .h11-tab-n { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: #6f6d6a; }
html:root body.hv-v11 .h11-tab.is-on .h11-tab-n { color: #a3a19d; }
html:root body.hv-v11 .h11-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; }
html:root body.hv-v11 .h11-tab-bar::after { content: ""; position: absolute; inset: 0; background-color: #96ff1a; transform: scaleX(0); transform-origin: 0 50%; }
html:root body.hv-v11 .h11-show.is-auto .h11-tab.is-on .h11-tab-bar { opacity: 1; }
html:root body.hv-v11 .h11-show.is-auto .h11-tab.is-on .h11-tab-bar::after { animation: h11Bar var(--h11-dwell, 7s) linear forwards; }
@keyframes h11Bar { to { transform: scaleX(1); } }

html:root body.hv-v11 .h11-panes { display: grid; margin-top: clamp(26px, 3vw, 40px); }
html:root body.hv-v11 .h11-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.hv-v11 .h11-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 340ms ease, transform 340ms ease, visibility 0s; }
html:root body.hv-v11 main h3.h11-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.hv-v11 .h11-pane-hl { display: block; }
html:root body.hv-v11 main p.h11-pane-d { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: #c8c6c2; }
html:root body.hv-v11 main p.h11-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.hv-v11 main p.h11-pane-save svg { flex: none; margin-top: 1px; color: #ffffff; }
html:root body.hv-v11 main p.h11-pane-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #8f8d89; }
html:root body.hv-v11 main a.h11-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.hv-v11 main a.h11-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.hv-v11 .h11-pane-flow { container-type: inline-size; min-width: 0; display: flex; align-items: flex-end; gap: 16px; }
html:root body.hv-v11 .h11-pane-flow > * { --oh: min(320px, calc((100cqi - 100px) / 2.95)); }
html:root body.hv-v11 .h11-in { flex: none; display: flex; flex-direction: column; gap: 10px; width: calc(var(--oh) * 0.5); }
html:root body.hv-v11 .h11-in-card { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; border: 1px solid #3a3a38; background-color: #1f1f1e; }
html:root body.hv-v11 .h11-in-card img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.hv-v11 .h11-in-card--text { aspect-ratio: auto; padding: 14px 15px; border: 0; border-radius: 14px 14px 14px 4px; background-color: #ffffff; }
html:root body.hv-v11 span.h11-in-q { display: block; font-size: 13.5px; line-height: 1.45; color: #121212; }
html:root body.hv-v11 .h11-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.hv-v11 span.h11-in-kit-n { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1e1e1c; }
html:root body.hv-v11 .h11-in-kit-sw { display: grid; grid-template-columns: repeat(2, 20px); gap: 6px; }
html:root body.hv-v11 .h11-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.hv-v11 span.h11-in-kit-aa { font-size: 24px; font-weight: 600; line-height: 1; color: #1e1e1c; }
html:root body.hv-v11 .h11-in--both { gap: 8px; }
html:root body.hv-v11 .h11-in--both .h11-in-card--pic { aspect-ratio: 1 / 1; }
html:root body.hv-v11 .h11-in--both .h11-in-card--text { padding: 10px 12px; }
html:root body.hv-v11 .h11-in--both span.h11-in-q { font-size: 12.5px; line-height: 1.4; }
html:root body.hv-v11 span.h11-in-l { font-size: 12.5px; line-height: 1.3; color: #a3a19d; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-outs { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 14px; }
html:root body.hv-v11 .h11-out { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 0; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-out-pic img,
html:root body.hv-v11 .h11-out-pic video { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.hv-v11 span.h11-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.hv-v11 span.h11-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.hv-v11 .h11-out-pic--fr { display: flex; flex-direction: column; background-color: #ffffff; color: #121212; }
html:root body.hv-v11 .h11-fr-bar { flex: none; display: flex; align-items: center; gap: 3px; height: 17px; padding: 0 7px; background-color: #f1f0ee; }
html:root body.hv-v11 .h11-fr-bar > i { display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #cfccc7; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-fr-img { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
html:root body.hv-v11 .h11-out-pic .h11-fr-img img { position: absolute; inset: 0; }
html:root body.hv-v11 .h11-fr-info { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; }
html:root body.hv-v11 span.h11-fr-name { font-size: 10px; font-weight: 600; line-height: 1.2; color: #121212; white-space: nowrap; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-fr-head { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 7px; }
html:root body.hv-v11 span.h11-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.hv-v11 span.h11-fr-handle { font-size: 9.5px; font-weight: 600; line-height: 1; color: #121212; white-space: nowrap; }
html:root body.hv-v11 .h11-fr-acts { flex: none; display: flex; gap: 8px; padding: 6px 7px; color: #121212; }
html:root body.hv-v11 .h11-fr-acts svg { flex: none; width: 12px; height: 12px; }
html:root body.hv-v11 .h11-fr--story { display: block; }
html:root body.hv-v11 .h11-fr-hero { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; overflow: hidden; }
html:root body.hv-v11 .h11-out-pic .h11-fr-hero img { position: absolute; inset: 0; }
html:root body.hv-v11 .h11-fr-page { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; padding: 9px 9px 8px; }
html:root body.hv-v11 span.h11-fr-title { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #121212; }
html:root body.hv-v11 span.h11-fr-line { display: block; height: 4px; border-radius: 2px; background-color: #e9e7e3; }
html:root body.hv-v11 span.h11-fr-line + span.h11-fr-line { width: 72%; }
html:root body.hv-v11 .h11-fr-page span.h11-fr-btn { align-self: flex-start; margin-top: auto; }
html:root body.hv-v11 .h11-fr-story { position: absolute; left: 0; right: 0; top: 0; padding: 6px 6px 0; }
html:root body.hv-v11 span.h11-fr-prog { display: block; height: 2px; border-radius: 1px; background-color: rgba(255, 255, 255, 0.92); }
html:root body.hv-v11 .h11-fr-story .h11-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.hv-v11 .h11-fr-story span.h11-fr-handle { color: #ffffff; }

html:root body.hv-v11 .h11-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.hv-v11 main p.h11-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.hv-v11 main p.h11-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.hv-v11 .h11-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); }
html:root body.hv-v11 .h11-story-copy .v4-eyebrow { margin: 0 0 14px; }
html:root body.hv-v11 main blockquote.h11-story-q { margin: 0; padding: 0; border: 0; quotes: none; }
html:root body.hv-v11 main blockquote.h11-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.hv-v11 .h11-story-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-story-wt { display: flex; flex-direction: column; gap: 2px; }
html:root body.hv-v11 span.h11-story-n { font-size: 15px; font-weight: 600; line-height: 1.3; color: #121212; }
html:root body.hv-v11 span.h11-story-r { font-size: 14px; line-height: 1.3; color: #6f6d6a; }
html:root body.hv-v11 main a.h11-pane-link.h11-story-a { margin-top: 12px; color: #121212; text-decoration-color: #c9c6c1; }
@media (hover: hover) { html:root body.hv-v11 main a.h11-pane-link.h11-story-a:hover { text-decoration-color: #121212; } }
html:root body.hv-v11 figure.h11-story-pics { margin: 0; }
html:root body.hv-v11 .h11-story-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body.hv-v11 .h11-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.hv-v11 figure.h11-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.hv-v11 .h11-uses-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
html:root body.hv-v11 .v4-head.h11-uses-head { margin: 0; }
html:root body.hv-v11 .h11-ind-nav { flex: none; display: flex; gap: 8px; }
html:root body.hv-v11 main button.h11-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.hv-v11 main button.h11-ind-go:hover { border-color: #121212; } }
html:root body.hv-v11 main button.h11-ind-go[disabled] { opacity: 0.35; cursor: default; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-ind::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { html:root body.hv-v11 .h11-ind { grid-auto-columns: calc((100% - 48px) / 4); } }
@media (min-width: 600px) and (max-width: 1199.98px) { html:root body.hv-v11 .h11-ind { grid-auto-columns: calc((100% - 32px) / 3); } }
html:root body.hv-v11 .h11-ind li { margin: 0; min-width: 0; scroll-snap-align: start; }
html:root body.hv-v11 main a.h11-ind-a { display: flex; flex-direction: column; gap: 4px; color: #121212; text-decoration: none; }
html:root body.hv-v11 .h11-ind-pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 8px; border-radius: 16px; background-color: #f6f5f4; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-ind-pic--grid img { min-height: 0; }
html:root body.hv-v11 span.h11-ind-t { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #121212; }
html:root body.hv-v11 span.h11-ind-d { font-size: 14.5px; line-height: 1.45; color: #6f6d6a; }
@media (hover: hover) { html:root body.hv-v11 main a.h11-ind-a:hover span.h11-ind-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
html:root body.hv-v11 main a.h11-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.hv-v11 main p.h11-also { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: #6f6d6a; }
html:root body.hv-v11 .h11-also-l { color: #6f6d6a; }
html:root body.hv-v11 main p.h11-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.hv-v11 main p.h11-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.hv-v11 .h11-bt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
html:root body.hv-v11 .h11-bt-head .v4-head { margin: 0; }
html:root:root body.hv-v11 main a.h11-bt-more { flex: none; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-inx-list { display: flex; flex-direction: column; }
html:root body.hv-v11 .h11-inx-it { position: relative; margin: 0; padding: 0 0 0 24px; border-left: 2px solid #e6e4e1; }
html:root body.hv-v11 .h11-inx-it::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 0; background-color: #121212; }
html:root body.hv-v11 .h11-inx-it.is-on::before { height: 100%; }
html:root body.hv-v11 .h11-inx.is-auto .h11-inx-it.is-on::before { background-color: #96ff1a; animation: h11Fill var(--h11-dwell, 6s) linear both; }
@keyframes h11Fill { from { height: 0; } to { height: 100%; } }
html:root body.hv-v11 main button.h11-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.hv-v11 span.h11-inx-n { flex: none; width: 22px; font-family: var(--v4-font-pixel); font-size: 13px; line-height: 1; color: #a3a19d; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-inx-it.is-on span.h11-inx-t { color: #121212; }
@media (hover: hover) { html:root body.hv-v11 main button.h11-inx-b:hover span.h11-inx-t { color: #121212; } }
html:root body.hv-v11 main button.h11-inx-b:focus { outline: 0; }
html.h11-kbd:root body.hv-v11 main button.h11-inx-b:focus-visible span.h11-inx-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
html:root body.hv-v11 .h11-inx-more { display: none; padding: 0 0 20px 32px; }
html:root body.hv-v11 .h11-inx-it.is-on .h11-inx-more { display: block; }
html:root body.hv-v11 main p.h11-inx-d { max-width: 470px; margin: -4px 0 0; font-size: 16px; line-height: 1.55; color: #6f6d6a; }
html:root body.hv-v11 main a.h11-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.hv-v11 main a.h11-inx-a:hover { text-decoration-color: #121212; }

/* The stage: one part at a time, crossfading. */
html:root body.hv-v11 .h11-inx-stage { position: relative; height: clamp(440px, 39vw, 560px); overflow: hidden; border-radius: 24px; background-color: #eceef0; }
html:root body.hv-v11 .h11-inx-p { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; }
html:root body.hv-v11 .h11-inx-p.is-on { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s; }
html:root body.hv-v11 .h11-v { position: absolute; inset: 0; }
html:root body.hv-v11 .h11-v img, html:root body.hv-v11 .h11-v video { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.hv-v11 .h11-v-card { position: absolute; border-radius: 16px; background-color: #ffffff; box-shadow: 0 18px 50px rgba(18, 18, 18, 0.16); }
html:root body.hv-v11 span.h11-v-cap { display: block; font-size: 12px; line-height: 1.3; color: #8f8d89; }
html:root body.hv-v11 .h11-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.hv-v11 img.h11-v-bg { position: absolute; inset: 0; }
html:root body.hv-v11 .h11-v-pick { left: 6%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; width: 250px; padding: 12px; }
html:root body.hv-v11 .h11-v-pick span.h11-v-cap { padding: 2px 8px 8px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-v-row > svg { flex: none; width: 16px; height: 16px; }
html:root body.hv-v11 .h11-v-row.is-on { min-height: 44px; background-color: #f6f5f3; }
html:root body.hv-v11 span.h11-v-auto { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background-color: #121212; color: #ffffff; }
html:root body.hv-v11 span.h11-v-rt { display: flex; flex-direction: column; flex: 1 1 auto; font-weight: 600; }
html:root body.hv-v11 span.h11-v-rd { font-size: 12px; font-weight: 400; color: #6f6d6a; }
html:root body.hv-v11 span.h11-v-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #96ff1a; color: #121212; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-v--brand { background-color: #dfe9f2; }
html:root body.hv-v11 .h11-v-brands { right: 6%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; width: 248px; padding: 12px; }
html:root body.hv-v11 .h11-v-brands span.h11-v-cap { padding: 2px 8px 8px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-v-br.is-on { background-color: #f6f5f3; font-weight: 600; color: #121212; }
html:root body.hv-v11 span.h11-v-bn { flex: 1 1 auto; }
html:root body.hv-v11 .h11-v-br .h11-v-sw i { width: 16px; height: 16px; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-v-kit { right: 7%; top: 50%; transform: translateY(-50%); width: 270px; padding: 4px 0; }
html:root body.hv-v11 .h11-v-kit span.h11-v-cap { padding: 12px 18px 4px; }
html:root body.hv-v11 .h11-v-kr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 18px; }
html:root body.hv-v11 .h11-v-kr + .h11-v-kr { border-top: 1px solid #efedea; }
html:root body.hv-v11 span.h11-v-kl { font-size: 12.5px; color: #8f8d89; }
html:root body.hv-v11 span.h11-v-kn { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.22em; color: #1e1e1c; }
html:root body.hv-v11 .h11-v-sw { display: flex; gap: 6px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-v-aa { display: inline-flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 600; line-height: 1; color: #1e1e1c; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-v--edit { background-color: #e3ecf2; }
html:root body.hv-v11 span.h11-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.hv-v11 span.h11-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.hv-v11 .h11-v-tl { right: 5%; top: 50%; transform: translateY(-50%); width: 50%; padding: 16px; }
html:root body.hv-v11 .h11-v-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
html:root body.hv-v11 .h11-v-tools > span { padding: 5px 8px; border-radius: 8px; background-color: #f6f5f3; font-size: 12px; line-height: 1.2; color: #3d3d3c; }
html:root body.hv-v11 .h11-v-tools > span:nth-child(4) { background-color: #121212; color: #ffffff; }
html:root body.hv-v11 .h11-v-tracks { position: relative; display: flex; flex-direction: column; gap: 12px; }
html:root body.hv-v11 .h11-v-tr { display: flex; flex-direction: column; gap: 6px; }
html:root body.hv-v11 span.h11-v-trl { font-size: 11.5px; line-height: 1.2; color: #8f8d89; }
html:root body.hv-v11 .h11-v-bar { display: flex; gap: 4px; height: 16px; }
html:root body.hv-v11 .h11-v-bar i { display: block; height: 100%; border-radius: 4px; background-color: #e4e2de; }
html:root body.hv-v11 .h11-v-tr--0 .h11-v-bar i { background-color: #96ff1a; }
html:root body.hv-v11 .h11-v-tr--0 .h11-v-bar i:nth-child(1) { flex: 3; } html:root body.hv-v11 .h11-v-tr--0 .h11-v-bar i:nth-child(2) { flex: 4; } html:root body.hv-v11 .h11-v-tr--0 .h11-v-bar i:nth-child(3) { flex: 2; }
html:root body.hv-v11 .h11-v-tr--1 .h11-v-bar i:nth-child(1) { flex: 5; } html:root body.hv-v11 .h11-v-tr--1 .h11-v-bar i:nth-child(2) { flex: 2; } html:root body.hv-v11 .h11-v-tr--1 .h11-v-bar i:nth-child(3) { flex: 3; }
html:root body.hv-v11 .h11-v-tr--2 .h11-v-bar i:nth-child(1) { flex: 9; } html:root body.hv-v11 .h11-v-tr--2 .h11-v-bar i:nth-child(2), html:root body.hv-v11 .h11-v-tr--2 .h11-v-bar i:nth-child(3) { flex: 0 0 0; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-v--batch { background-color: #eceef0; }
html:root body.hv-v11 .h11-v-sheet { left: 7%; right: 7%; top: 50%; transform: translateY(-50%); padding: 16px; }
html:root body.hv-v11 .h11-v-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
html:root body.hv-v11 span.h11-v-tt { font-size: 15px; font-weight: 600; color: #121212; }
html:root body.hv-v11 span.h11-v-prog { padding: 4px 9px; border-radius: 8px; background-color: #f6f5f3; font-size: 12.5px; font-weight: 500; color: #3d3d3c; }
html:root body.hv-v11 .h11-v-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
html:root body.hv-v11 .h11-v-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html:root body.hv-v11 .h11-v-cpic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background-color: #efedea; }
html:root body.hv-v11 .h11-v-cell.is-busy img { opacity: 0.4; filter: saturate(0.5); }
html:root body.hv-v11 .h11-v-cpic .h11-v-ring { position: absolute; inset: 0; width: 28%; height: auto; aspect-ratio: 1; margin: auto; }
html:root body.hv-v11 span.h11-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.hv-v11 .h11-v--review { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 7%; background-color: #eef0f2; }
html:root body.hv-v11 span.h11-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.hv-v11 span.h11-v-ld { font-weight: 400; color: #6f6d6a; }
html:root body.hv-v11 .h11-v-picks { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html:root body.hv-v11 .h11-v-pk { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background-color: #ddd8d0; }
html:root body.hv-v11 .h11-v-pk:not(.is-on) img { opacity: 0.45; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-v-pk .h11-v-ok { z-index: 2; }
html:root body.hv-v11 .h11-v-pk .h11-v-ok { width: 22px; height: 22px; top: 9px; right: 9px; }
html:root body.hv-v11 span.h11-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.hv-v11 span.h11-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.hv-v11 .h11-v--assets { background-color: #eceef0; }
html:root body.hv-v11 .h11-v-lib { left: 6%; right: 6%; top: 8%; bottom: 8%; display: grid; grid-template-columns: 172px minmax(0, 1fr); overflow: hidden; }
html:root body.hv-v11 .h11-v-side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid #efedea; background-color: #fbfaf8; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-v-fd > svg { flex: none; color: #8f8d89; }
html:root body.hv-v11 .h11-v-fd.is-on { background-color: #efedea; font-weight: 600; color: #121212; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 main a.h11-pane-link.h11-inx-all { display: none; color: #121212; text-decoration-color: #c9c6c1; }

/* Under the list: the plan line. */
html:root body.hv-v11 main p.h11-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.hv-v11 .h11-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.hv-v11 .h11-chat-copy .v4-head { margin: 0; }
html:root body.hv-v11 .h11-chat-copy a.h11-go { margin-top: 26px; }
html:root body.hv-v11 .h11-chat-win { overflow: hidden; border-radius: 20px; background-color: #ffffff; box-shadow: 0 18px 48px rgba(18, 18, 18, 0.08); }
html:root body.hv-v11 .h11-chat-bar { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid #efedea; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-chat-app.is-on { background-color: #f6f5f3; color: #121212; }
html:root body.hv-v11 .h11-chat-app svg { flex: none; width: 16px; height: 16px; }
html:root body.hv-v11 .h11-chat-app:not(.is-on) svg { opacity: 0.55; }
html:root body.hv-v11 .h11-chat-body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-chat-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:root body.hv-v11 .h11-chat-o { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html:root body.hv-v11 .h11-chat-pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; background-color: #f6f5f3; }
html:root body.hv-v11 .h11-chat-outs img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.hv-v11 span.h11-chat-l { font-size: 12.5px; line-height: 1.3; color: #6f6d6a; }

/* ---- 6. Questions ------------------------------------------------------------ */
html:root body.hv-v11 .hv-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); }
html:root body.hv-v11 .hv-faq-side .v4-head { margin-bottom: 0; }
html:root:root body.hv-v11 main a.h11-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.hv-v11 main > section#close { padding-bottom: 40px !important; }
html:root body.hv-v11 #footerElem .dbf-inner { padding-top: 48px; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-end-copy { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 0 24px; }
html:root body.hv-v11 main h2.h11-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.hv-v11 main p.h11-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.hv-v11 .h11-end a.h11-go { margin-top: 24px; }
html:root body.hv-v11 .h11-end-strip { overflow: hidden; margin-top: clamp(32px, 3.2vw, 44px); padding-bottom: clamp(20px, 2vw, 28px); }
html:root body.hv-v11 .h11-end-track { display: flex; width: max-content; }
html:root body.hv-v11 .h11-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.hv-v11 .h11-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.hv-v11 .h11-end .h11-proof { margin-top: 26px; }
html:root body.hv-v11 .h11-end .h11-proof-l { color: #8f8d89; }
html:root body.hv-v11 .h11-end .h11-works-list li { color: #e6e4e1; }
html:root body.hv-v11 .h11-end .h11-proof-sep { background-color: #3a3a38; }
html:root body.hv-v11 .h11-end img.h11-logo { filter: brightness(0) invert(1); opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
    html:root body.hv-v11 .h11-end-track { animation: h11Marq 80s linear infinite; }
}
@keyframes h11Marq { 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.hv-v11 #footerElem.dbf { border-top: 0 !important; box-shadow: none !important; }
html:root body.hv-v11 #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.hv-v11 .h11-inx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    html:root body.hv-v11 span.h11-inx-t { font-size: 19px; }
    html:root body.hv-v11 .h11-v-pick { width: 230px; padding: 10px; }
    html:root body.hv-v11 .h11-v-row { min-height: 28px; font-size: 13px; }
    html:root body.hv-v11 .h11-v-kit { width: 236px; }
    html:root body.hv-v11 .h11-v-tl { width: 50%; padding: 14px; }
    html:root body.hv-v11 .h11-chat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1099.98px) {
    html:root body.hv-v11 .h11-pane { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
    html:root body.hv-v11 .h11-pane-copy { max-width: 620px; }
    /* The proof row stacks before it can wrap with the rule hanging. */
    html:root body.hv-v11 .h11-proof-sep { display: none; }
    html:root body.hv-v11 .h11-proof { flex-direction: column; gap: 14px; }
}
@media (max-width: 899.98px) {
    html:root body.hv-v11 .hv-faq { grid-template-columns: minmax(0, 1fr); }
    /* One column: the list, then the stage of the open part. */
    html:root body.hv-v11 .h11-inx { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    html:root body.hv-v11 .h11-chat { grid-template-columns: minmax(0, 1fr); }
    html:root body.hv-v11 .h11-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.hv-v11 .h11-tabs { display: grid; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    html:root body.hv-v11 main button.h11-tab { justify-content: center; min-width: 0; min-height: 44px; padding: 0 6px; font-size: 13.5px; }
    html:root body.hv-v11 main button.h11-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.hv-v11 .h11-panes { display: block; }
    html:root body.hv-v11 .h11-pane:not(.is-on) { display: none; }
    /* The small page frames keep only the picture and its title on a phone. */
    html:root body.hv-v11 .h11-fr-page span.h11-fr-line, html:root body.hv-v11 .h11-fr-page span.h11-fr-btn { display: none; }
    html:root body.hv-v11 .h11-fr-page { padding: 6px 6px 5px; }
    html:root body.hv-v11 span.h11-fr-title { font-size: 9px; }
    html:root body.hv-v11 .h11-fr-info { padding: 5px 6px; }
    html:root body.hv-v11 span.h11-fr-name { font-size: 9px; }
    html:root body.hv-v11 .h11-fr-info span.h11-fr-btn { display: none; }
    html:root body.hv-v11 span.h11-fr-btn { padding: 3px 5px; font-size: 7.5px; }
    html:root body.hv-v11 .h11-tab-n { display: none; }
    /* A pane: the title, the pictures, then the words, all on one left edge. */
    html:root body.hv-v11 .h11-pane { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    html:root body.hv-v11 .h11-pane-copy { display: contents; }
    html:root body.hv-v11 main h3.h11-pane-h { order: 1; }
    html:root body.hv-v11 .h11-pane-flow { order: 2; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; }
    html:root body.hv-v11 main p.h11-pane-d { order: 3; }
    html:root body.hv-v11 main p.h11-pane-save { order: 4; }
    html:root body.hv-v11 main p.h11-pane-note { order: 5; }
    html:root body.hv-v11 main a.h11-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.hv-v11 .h11-in { flex-direction: row; align-items: center; width: auto; gap: 12px; }
    html:root body.hv-v11 .h11-in-card { flex: none; width: 52px; }
    html:root body.hv-v11 .h11-in-card--text, html:root body.hv-v11 .h11-in-card--kit { flex: 0 1 auto; width: auto; min-width: 0; max-width: calc(100% - 112px); }
    html:root body.hv-v11 .h11-in-card--text { padding: 10px 12px; }
    html:root body.hv-v11 span.h11-in-q { font-size: 13px; }
    html:root body.hv-v11 .h11-in-card--kit { flex-direction: row; aspect-ratio: auto; padding: 10px 12px; gap: 12px; }
    html:root body.hv-v11 span.h11-in-l { flex: 0 1 100px; min-width: 0; }
    html:root body.hv-v11 .h11-in--both .h11-in-card--text { max-width: none; flex: 1 1 0; min-width: 0; }
    html:root body.hv-v11 .h11-in--both span.h11-in-l { display: none; }
    html:root body.hv-v11 main blockquote.h11-story-q p { font-size: 17px; line-height: 1.45; }
    html:root body.hv-v11 .h11-story-row { gap: 8px; }
    html:root body.hv-v11 .h11-story-row img { border-radius: 12px; }
    html:root body.hv-v11 .h11-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.hv-v11 .h11-outs { display: flex; align-items: flex-start; gap: 8px; }
    html:root body.hv-v11 .h11-out { flex: var(--rw, 0.8) 1 0; min-width: 0; gap: 6px; }
    html:root body.hv-v11 .h11-out-pic { width: 100%; height: auto; }
    html:root body.hv-v11 span.h11-out-l, html:root body.hv-v11 span.h11-in-l { font-size: 12px; }
    html:root body.hv-v11 span.h11-out-cap { display: none; }
    html:root body.hv-v11 .h11-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.hv-v11 main > section.v4-section:not(.h11-hero) { padding-top: 28px !important; padding-bottom: 28px !important; }
    html:root body.hv-v11 main .v4-head .v4-h2 { font-size: 24px; line-height: 1.15; }
    html:root body.hv-v11 main .v4-head p.v4-sub { margin-top: 10px; font-size: 15px; line-height: 1.5; }
    html:root body.hv-v11 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.hv-v11 .v10-navwrap ~ main > section.h11-hero:first-of-type { padding: 6px 6px 0 !important; }
    html:root body.hv-v11 .h11-frame { display: flex; flex-direction: column; padding-top: 78px; border-radius: 18px; }
    html:root body.hv-v11 .h11-hero-in, html:root body.hv-v11 .h11-head { display: contents; }
    html:root body.hv-v11 .h11-head > * { padding-left: 16px; padding-right: 16px; }
    html:root body.hv-v11 main .h11-for { order: 1; margin-bottom: 10px; font-size: 12px; letter-spacing: 0.06em; }
    html:root body.hv-v11 main .h11-h1 { order: 2; font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; }
    html:root body.hv-v11 main .h11-h1 .v4-pixel { white-space: nowrap; }
    html:root body.hv-v11 main .h11-sub { order: 3; margin-top: 12px; font-size: 16px; line-height: 1.5; }
    html:root body.hv-v11 .h11-actions { order: 4; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 18px; }
    html:root:root body.hv-v11 main .h11-actions a.h11-go { position: relative; width: 216px; max-width: 100%; height: 40px; min-height: 40px; padding: 0 14px; font-size: 14px; }
    html:root:root body.hv-v11 main .h11-actions a.h11-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.hv-v11 .h11-fan { order: 5; --w0: 40vw; --step: 26vw; --dy: 7px; height: calc(var(--w0) * 1.1); margin-top: 22px; overflow: hidden; }
    html:root body.hv-v11 .h11-card:not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) { display: none; }
    html:root body.hv-v11 .h11-card-pic { border-radius: 14px; }
    html:root body.hv-v11 span.h11-card-l { left: 7px; top: 7px; padding: 2px 6px; border-radius: 5px; font-size: 10px; }
    html:root body.hv-v11 span.h11-card-l svg { width: 10px; height: 10px; }
    html:root body.hv-v11 .h11-card--r span.h11-card-l { right: 7px; }
    html:root body.hv-v11 .h11-hero .h11-proof { order: 6; margin: 0; padding: 14px 16px 16px; gap: 10px; border-top: 1px solid #efedea; }
    html:root body.hv-v11 .h11-proof-g { gap: 6px 12px; }
    html:root body.hv-v11 .h11-proof-l { font-size: 12px; }
    html:root body.hv-v11 .h11-works-list { gap: 6px 12px; }
    html:root body.hv-v11 .h11-works-list li { gap: 5px; font-size: 13px; }
    html:root body.hv-v11 .h11-works-list svg { width: 15px; height: 15px; }
    html:root body.hv-v11 .h11-logos { flex-wrap: nowrap; gap: 14px; }
    html:root body.hv-v11 img.h11-logo--creatorflow, html:root body.hv-v11 img.h11-logo--postnext { height: 11px; }
    html:root body.hv-v11 img.h11-logo--rnj-transport { height: 14px; }
    html:root body.hv-v11 img.h11-logo--strategic-mood { height: 12px; }

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

    /* What you can make. */
    html:root body.hv-v11 .h11-show { margin-top: 18px; padding: 12px; border-radius: 18px; }
    html:root body.hv-v11 .h11-tabs { gap: 4px; padding: 4px; border-radius: 12px; }
    html:root body.hv-v11 main button.h11-tab { border-radius: 9px; }
    html:root body.hv-v11 .h11-panes { margin-top: 14px; }
    html:root body.hv-v11 main h3.h11-pane-h { font-size: 20px; }
    html:root body.hv-v11 .h11-pane-hl { display: inline; }
    html:root body.hv-v11 main p.h11-pane-d { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
    html:root body.hv-v11 main p.h11-pane-save { margin-top: 10px; font-size: 14px; }
    html:root body.hv-v11 main p.h11-pane-save svg { width: 16px; height: 16px; }
    html:root body.hv-v11 main a.h11-pane-link { min-height: 44px; margin-top: 2px; font-size: 14px; }
    html:root body.hv-v11 .h11-show-foot { margin-top: 14px; padding-top: 14px; }
    html:root body.hv-v11 main p.h11-show-ask { font-size: 15px; }
    html:root body.hv-v11 main p.h11-show-gate { font-size: 12.5px; }
    html:root:root body.hv-v11 main .h11-show-foot a.h11-go { position: relative; align-self: flex-start; width: 216px; height: 40px; min-height: 40px; font-size: 14px; }
    html:root:root body.hv-v11 main .h11-show-foot a.h11-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.hv-v11 .h11-uses-top { margin-bottom: 16px; }
    html:root body.hv-v11 .h11-ind-nav { display: none; }
    html:root body.hv-v11 .h11-ind { grid-auto-columns: 58%; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; scroll-padding-left: 18px; }
    html:root body.hv-v11 .h11-ind-pic { margin-bottom: 6px; border-radius: 12px; }
    html:root body.hv-v11 span.h11-ind-t { font-size: 15px; }
    html:root body.hv-v11 span.h11-ind-d { font-size: 13px; }
    html:root body.hv-v11 main p.h11-also { margin-top: 14px; font-size: 14px; line-height: 2.4; }
    html:root body.hv-v11 main p.h11-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.hv-v11 .h11-bt-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    html:root:root:root body.hv-v11 main a.v4-btn-secondary.h11-go.h11-bt-more { display: none; }
    html:root body.hv-v11 main a.h11-pane-link.h11-inx-all { display: inline-flex; margin-top: 6px; font-size: 15px; }
    html:root body.hv-v11 .h11-inx { margin-top: 18px; gap: 0; }
    html:root body.hv-v11 .h11-inx-it { padding-left: 16px; }
    html:root body.hv-v11 main button.h11-inx-b { min-height: 48px; padding: 12px 0; gap: 8px; }
    html:root body.hv-v11 span.h11-inx-n { width: 20px; font-size: 12px; }
    html:root body.hv-v11 span.h11-inx-t { font-size: 17px; }
    html:root body.hv-v11 .h11-inx-more { padding: 0 0 14px 28px; }
    html:root body.hv-v11 main p.h11-inx-d { margin-top: -2px; font-size: 14.5px; line-height: 1.5; }
    html:root body.hv-v11 main a.h11-inx-a { min-height: 40px; margin-top: 4px; font-size: 14px; }
    html:root body.hv-v11 .h11-inx-it .h11-inx-stage { margin: 0 0 16px -16px; }
    html:root body.hv-v11 .h11-inx-stage { height: 360px; border-radius: 18px; }
    html:root body.hv-v11 .h11-v-card { border-radius: 12px; }
    html:root body.hv-v11 .h11-v-pick { left: 4%; top: auto; bottom: 4%; transform: none; width: 196px; padding: 8px; }
    html:root body.hv-v11 .h11-v-pick .h11-v-sep ~ .h11-v-sep, html:root body.hv-v11 .h11-v-pick .h11-v-sep ~ .h11-v-sep ~ .h11-v-row { display: none; }
    html:root body.hv-v11 .h11-v-pick span.h11-v-cap { padding: 2px 6px 6px; font-size: 11px; }
    html:root body.hv-v11 .h11-v-row { min-height: 26px; gap: 8px; padding: 0 6px; font-size: 12px; }
    html:root body.hv-v11 .h11-v-row > svg { width: 13px; height: 13px; }
    html:root body.hv-v11 .h11-v-row.is-on { min-height: 38px; }
    html:root body.hv-v11 span.h11-v-auto { width: 20px; height: 20px; border-radius: 6px; }
    html:root body.hv-v11 span.h11-v-rd { font-size: 11px; }
    html:root body.hv-v11 span.h11-v-tick { width: 17px; height: 17px; }
    html:root body.hv-v11 span.h11-v-sep { margin-top: 4px; padding: 6px 6px 2px; font-size: 10.5px; }
    html:root body.hv-v11 span.h11-v-ad { left: 6%; height: 76%; border-radius: 10px; }
    html:root body.hv-v11 .h11-v-kit { right: 5%; width: 178px; }
    html:root body.hv-v11 .h11-v-brands { right: 4%; top: auto; bottom: 4%; transform: none; width: 176px; padding: 8px; }
    html:root body.hv-v11 .h11-v-br { min-height: 34px; gap: 6px; padding: 0 6px; font-size: 12px; }
    html:root body.hv-v11 .h11-v-br .h11-v-sw i { width: 12px; height: 12px; }
    html:root body.hv-v11 .h11-v-kit span.h11-v-cap { padding: 10px 12px 2px; font-size: 11px; }
    html:root body.hv-v11 .h11-v-kr { min-height: 44px; padding: 0 12px; gap: 8px; }
    html:root body.hv-v11 span.h11-v-kl { font-size: 11px; }
    html:root body.hv-v11 span.h11-v-kn { font-size: 11px; letter-spacing: 0.16em; }
    html:root body.hv-v11 .h11-v-sw { gap: 4px; }
    html:root body.hv-v11 .h11-v-sw i { width: 15px; height: 15px; }
    html:root body.hv-v11 .h11-v-aa { gap: 6px; font-size: 15px; }
    html:root body.hv-v11 span.h11-v-clip { left: 6%; height: 84%; border-radius: 12px; }
    html:root body.hv-v11 span.h11-v-capt { left: 6px; right: 6px; padding: 4px 5px; font-size: 10.5px; }
    html:root body.hv-v11 .h11-v-tl { right: 4%; width: 52%; padding: 10px; }
    html:root body.hv-v11 .h11-v-tools { gap: 4px; margin-bottom: 10px; }
    html:root body.hv-v11 .h11-v-tools > span { padding: 3px 6px; border-radius: 6px; font-size: 10.5px; }
    html:root body.hv-v11 .h11-v-tracks { gap: 8px; }
    html:root body.hv-v11 span.h11-v-trl { font-size: 10px; }
    html:root body.hv-v11 .h11-v-bar { height: 10px; gap: 3px; }
    html:root body.hv-v11 .h11-v-sheet { left: 4%; right: 4%; padding: 10px; }
    html:root body.hv-v11 .h11-v-top { margin-bottom: 8px; }
    html:root body.hv-v11 span.h11-v-tt { font-size: 13px; }
    html:root body.hv-v11 span.h11-v-prog { padding: 3px 7px; font-size: 11px; }
    html:root body.hv-v11 .h11-v-grid { gap: 8px 6px; }
    html:root body.hv-v11 .h11-v-cell { gap: 4px; }
    html:root body.hv-v11 .h11-v-cpic { border-radius: 7px; }
    html:root body.hv-v11 span.h11-v-nm { font-size: 10.5px; }
    html:root body.hv-v11 .h11-v-ok { top: 4px; right: 4px; width: 16px; height: 16px; }
    html:root body.hv-v11 .h11-v--review { gap: 12px; padding: 0 5%; }
    html:root body.hv-v11 span.h11-v-link { gap: 6px; padding: 6px 9px; font-size: 11.5px; }
    html:root body.hv-v11 .h11-v-picks { gap: 8px; }
    html:root body.hv-v11 .h11-v-pk { border-radius: 9px; }
    html:root body.hv-v11 .h11-v-pk .h11-v-ok { width: 18px; height: 18px; top: 6px; right: 6px; }
    html:root body.hv-v11 span.h11-v-note { gap: 8px; max-width: 92%; padding: 8px 11px 8px 8px; font-size: 12px; }
    html:root body.hv-v11 span.h11-v-av { width: 24px; height: 24px; font-size: 11px; }
    html:root body.hv-v11 .h11-v-lib { left: 4%; right: 4%; grid-template-columns: minmax(0, 1fr); }
    html:root body.hv-v11 .h11-v-side { flex-direction: row; gap: 4px; overflow: hidden; padding: 8px; border-right: 0; border-bottom: 1px solid #efedea; }
    html:root body.hv-v11 .h11-v-fd { min-height: 28px; gap: 5px; padding: 0 8px; font-size: 11.5px; }
    html:root body.hv-v11 .h11-v-fd:nth-child(n+4) { display: none; }
    html:root body.hv-v11 .h11-v-lib { top: 5%; bottom: 5%; grid-template-rows: auto minmax(0, 1fr); }
    html:root body.hv-v11 .h11-v-thumbs { gap: 5px; padding: 8px; }
    html:root body.hv-v11 .h11-v-thumbs > span { border-radius: 6px; }
    html:root body.hv-v11 main p.h11-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.hv-v11 .h11-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.hv-v11 .h11-chat-copy { display: contents; }
    html:root body.hv-v11 .h11-chat-copy .v4-head { order: 1; }
    html:root body.hv-v11 .h11-chat-demo { order: 2; }
    html:root:root body.hv-v11 main .h11-chat-copy a.h11-go { order: 3; align-self: flex-start; width: 216px; height: 40px; min-height: 40px; margin-top: 0; font-size: 14px; }
    html:root body.hv-v11 .h11-chat-win { border-radius: 16px; }
    html:root body.hv-v11 .h11-chat-bar { padding: 8px; }
    html:root body.hv-v11 .h11-chat-app { height: 28px; padding: 0 9px; gap: 5px; font-size: 12px; }
    html:root body.hv-v11 .h11-chat-app svg { width: 14px; height: 14px; }
    html:root body.hv-v11 .h11-chat-body { gap: 10px; padding: 12px; }
    html:root body.hv-v11 .h11-chat-ask { max-width: 94%; padding: 6px 12px 6px 6px; font-size: 13px; }
    html:root body.hv-v11 .h11-chat-ask img { width: 34px; height: 34px; border-radius: 7px; }
    html:root body.hv-v11 .h11-chat-ok { font-size: 12px; }
    html:root body.hv-v11 .h11-chat-outs { gap: 6px; }
    html:root body.hv-v11 .h11-chat-pic { border-radius: 9px; }
    html:root body.hv-v11 span.h11-chat-l { font-size: 11.5px; }

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

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