/* =============================================================================
   home-v4.css - the homepage on DesignerBox v4 (the transformation argument,
   rebuilt 2026-09-18). Brief: docs/v4/HOMEPAGE-REBUILD.md. Template:
   app/server/views/frontend/frontend_next_v10.pug.

   Seven sections: hero (the transformation at hero size), why now, the six
   transformations, does that sound like you, everything in one place,
   questions, close. The patterns themselves (A1 to A16: panels, tiles, tabs,
   checks, the FAQ, the close) live in v4-transform.css (prefix v4x-); this
   sheet holds only what the hero and the page's own compositions need: the
   brand record drawing, the video editor drawing, the one-place map tiles,
   the compact tree, the FAQ's two-column frame and the phone rules of
   Vytas's 2026-09-18 15:30 feedback (compact blocks, one screen at 1440,
   at most four results in a 2x2 at 390, no tile under 120px, no text under
   14px on a phone, 80px between sections and 56px on a phone).

   SCOPE. Every rule sits under body.hv and every class this file adds is hv-*.
   The kit classes (.v4-wrap, .v4-section, .v4-head, .v4-eyebrow, .v4-display,
   .v4-h2/h3/h4, .v4-lead, .v4-sub, .v4-cta-row, .v4-btn-*, .v4-card, .v4-stat,
   .v4-close, .v4-link, .v4-thumb*) come from designerbox-v4.css.
   home-next-v10.css stays loaded for the shared header and footer; where its
   body.v10 rules outrank a kit class they are restated at `html body.v10.hv`
   strength (section 1).

   SPECIFICITY TRAP. home-next-v10 sets `body.v10 main p { margin: 0 }`. Never
   restate that reset here at a higher strength: a `html body.v10.hv main p`
   rule outranks every `body.hv .hv-x` margin below and the page loses all of
   its paragraph spacing (it did, 2026-09-17).

   VALUES. Literals or var(--v4-x, #literal), never a bare var(). No gradient
   except the dotted paper (the kit's rule), no shadow on a card (the tile and
   mount shadows of 6.11 only), no transform in :hover, colour transitions
   only, everything off under prefers-reduced-motion. White page.

   RAW, NOT BUNDLED: app/routes/frontend.js tokens the <link> from this file's
   mtime (cssv2), so an edit rotates the URL by itself.
   ============================================================================= */

/* ---- 1. What body.v10 outranks --------------------------------------------- */
html body.v10.hv a.v4-btn-primary { color: #FFFFFF; }
html body.v10.hv a.v4-btn-primary:hover { color: #121212; }
html body.v10.hv a.v4-btn-secondary { color: #121212; }
html body.v10.hv a.v4-link { color: var(--v4-color-ink, #121212); }
html body.v10.hv .v4-eyebrow { margin: 0 0 10px; }
html body.v10.hv .v4-lead { margin: 12px 0 0; }
html body.v10.hv .v4-sub { margin: 8px 0 0; }
html body.v10.hv .v4-head--center .v4-lead,
html body.v10.hv .v4-head--center .v4-sub,
html body.v10.hv .v4-close .v4-sub { margin-inline: auto; }
/* The page's own picture cells (the editor lanes, the map tiles): the photo
   fills its box. `body.v10 img { height: auto }` would stop it short. */
html body.v10.hv .hv-lane-clip img,
html body.v10.hv .hv-mp-cell img,
html body.v10.hv .hv-mp-clip img {
    display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
html body.v10.hv .hv-editor-preview img { display: block; width: auto; height: 100%; max-width: none; }
html body.v10.hv .hv-mp-grid img, html body.v10.hv .hv-mp-flow img,
html body.v10.hv .hv-mp-sheet img, html body.v10.hv .hv-mp-app img,
html body.v10.hv .hv-brand-mark { display: block; height: auto; }
/* Low strength on purpose (see the trap above): every hv- rule below wins. */
body.hv main ul, body.hv main ol { margin: 0; padding: 0; list-style: none; }

/* ---- 2. Rhythm, type and spacing -------------------------------------------- */
/* The kit pads a section 80px top and bottom, which stacks to 160px between
   two sections. The page kit asks for 80px between blocks. */
body.hv main .v4-section { padding-block: 40px; }
/* This one never applies: the page kit's first-section rule in designerbox-v4.css
   (html:root body .v10-navwrap ~ main > section:first-of-type) is more specific
   and pins the first block 48px under the bar. Kept so nobody re-adds it. */
body.hv main .hv-hero { padding-top: 40px; }
body.hv .v4-head { margin-bottom: 32px; }
/* The hero rhythm (2026-09-26, Vytas: "all content way too jammed between
   header menu and visual"). The gaps were 45 / 10 / 12 / 32 / 24px, with the
   picture closest of all. Now each gap grows as the blocks get bigger:
   header 72, eyebrow 16, title 20, sub 32, button 64 to the picture. The
   copy and the top of the picture still share the first screen at 1440. */
html:root body.hv .v10-navwrap ~ main > section.hv-hero:first-of-type { padding-top: 72px !important; }
html body.v10.hv .hv-hero .v4-eyebrow { margin-bottom: 16px; }
html body.v10.hv .hv-hero .v4-lead { margin-top: 20px; }
html body.v10.hv .hv-hero .v4-cta-row { margin-top: 32px; }
html body.v10.hv .hv-hero .v4-head--center { margin-bottom: 64px; }
body.hv .hv-hero .v4-display { margin-inline: auto; }
/* The title is two sentences, one per line (2026-09-26: "Scale your creative
   content with AI." / "Stay on brand."). 56px against the kit's 48px, with
   tighter tracking (Vytas: "slightly bigger and narrow"). The first sentence
   is 910px at 56px, so the head is 1000px. An 11em measure that broke it
   over two lines was rejected as "too narrow". The sub keeps its own 52ch. */
body.hv .hv-hero .v4-head--center { max-width: 1000px; }
body.hv .hv-hero .v4-display { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
body.hv .hv-h1-line { display: block; }
/* Same ink as the first line: the second line is its own sentence, and a
   lighter tone read as a line left in grey by mistake. */
body.hv .hv-h1-accent { color: var(--v4-color-ink, #121212); }
html:lang(ja) body.hv :is(.v4-display, .v4-lead, .v4-sub) { word-break: auto-phrase; }
/* Korean breaks inside words and splits particles from nouns without this
   (QA, 2026-09-26). The same fix belongs site-wide in designerbox-v4.css. */
html:lang(ko) body.hv { word-break: keep-all; overflow-wrap: break-word; }
/* 52ch (2026-09-26, Vytas: "slightly too wide"): three even lines under
   the two-line title. */
body.hv .hv-hero .v4-lead { max-width: 52ch; }
body.hv .v4-link { margin-top: 14px; }
body.hv .v4-link svg { flex: none; }
/* Static cards (the plans, the example, the outcome cards) never react. */
body.hv div.v4-card:hover, body.hv li.v4-card:hover { border-color: var(--v4-color-line, #E6E4E1); }
body.hv div.v4-card:hover::before, body.hv li.v4-card:hover::before { opacity: 0; }

/* ---- 3. The hero picture --------------------------------------------------- */
/* One product photo in, four pictures out in ONE row of 4:5 tiles, on one
   card under the text, so the copy and the picture share the first screen at
   1440 (the panel stays under 400px). A 2x2 on a phone. */
body.hv .hv-hero-fig { width: 100%; }
body.hv .hv-hero-fig .v4x-xf-paper { grid-template-columns: minmax(0, 3fr) 48px minmax(0, 10fr); }
body.hv .hv-hero-fig .v4x-in { max-width: 240px; }

/* ---- 3b. The model band ----------------------------------------------------- */
/* In the first screen, between the hero button and the picture (Vytas,
   2026-09-26: "mention that we have all ai models in one place ... add logos
   so looks more solid"; under the picture it sat below the fold and was not
   seen). One small grey row of the families, each with its maker's mark
   (Vytas, same day: "make this much more smaller and gray"); the subtitle
   above carries the words. Nothing in it is a link, so nothing reacts to
   hover. Gaps: button 40, row, 56 to the picture (the 64 it replaces). */
html body.v10.hv .hv-hero .v4-head--center.hv-head--models { margin-bottom: 40px; }
/* "make even more narrow" (Vytas, same day): 13px names, 16px marks, 22px
   between families, about 720px for the whole row at 1440. */
body.hv .hv-models { margin: 0 auto 56px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; max-width: 760px; }
html body.v10.hv main .hv-model { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1; font-weight: 500; color: var(--v4-color-ink-3, #6F6D6A); white-space: nowrap; }
body.hv .hv-model .v4-mark { width: 16px; height: 16px; flex: none; }
/* One line needs about 880px. Below that, two even rows of four instead of
   seven and one left over. */
@media (min-width: 768px) and (max-width: 999.98px) {
    body.hv .hv-models { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; justify-items: start; gap: 12px 28px; }
    html body.v10.hv main .hv-model { font-size: 13px; gap: 6px; }
    body.hv .hv-model .v4-mark { width: 16px; height: 16px; }
}
@media (max-width: 767.98px) {
    html body.v10.hv .hv-hero .v4-head--center.hv-head--models { margin-bottom: 28px; }
    /* Still too big on a phone at 12px under an 18px mark (Vytas). Now a tight
       wrap of small marks and names, centred, like a caption line. */
    /* A fixed grid, not a wrap: the wrap left "Runway" alone on a line at
       330-378px and 620-709px (QA). 4 + 4 from 400px, 3 + 3 + 2 below. */
    body.hv .hv-models { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; justify-items: start; gap: 10px 14px; width: 100%; margin-bottom: 32px; }
    html body.v10.hv main .hv-model { flex-direction: row; gap: 5px; font-size: 12px; line-height: 1; white-space: nowrap; }
    body.hv .hv-model .v4-mark { width: 13px; height: 13px; }
    /* The pictures in the Workflows and Image editor tiles keep fixed widths
       and were cut at both sides inside the panel; let them shrink. */
    html body.v10.hv main .hv-mp-flow, html body.v10.hv main .hv-mp-edit { max-width: 100%; }
    html body.v10.hv main .hv-mp-flow img { flex: 0 1 88px; min-width: 0; width: auto; }
    html body.v10.hv main .hv-mp-edit .hv-mp-cell { flex: 0 1 120px; min-width: 0; width: auto; }
    /* Tabs are touch targets on a phone: 44px, not the kit's 32px. */
    html body.v10.hv .v4x-tab { height: 44px; }
}
@media (max-width: 399.98px) {
    body.hv .hv-models { grid-template-columns: repeat(3, auto); column-gap: 16px; }
    body.hv .hv-close-pics li:nth-child(n+4) { display: none; }
}
/* The link marker line is a touch target too on a touch screen. */
@media (hover: none) and (pointer: coarse) {
    html body.v10.hv main .v4-link { min-height: 44px; align-items: center; }
}

/* ---- 3c. No grey text on the homepage ------------------------------------- */
/* Vytas, 2026-09-26: "I don't like the titles looking gray ... subtitle and
   eyebrow, etc." The kit greys (#6F6D6A) stay site-wide; on this page every
   eyebrow, subtitle, card line, caption and label reads in ink. Size and
   weight carry the hierarchy instead. */
html body.v10.hv main .v4-eyebrow,
html body.v10.hv main .v4-lead,
html body.v10.hv main .v4-sub,
html body.v10.hv main .v4x-p,
html body.v10.hv main .v4x-map-line,
html body.v10.hv main .v4x-cap,
html body.v10.hv main .v4x-note,
html body.v10.hv main .v4x-note-s,
html body.v10.hv main .v4x-checks-label,
html body.v10.hv main .v4x-frame-label,
html body.v10.hv main .v4x-checks li,
html body.v10.hv main .v4x-checks li span,
html body.v10.hv main .v4x-q-a p,
html body.v10.hv main .v4x-swatch-l { color: var(--v4-color-ink, #121212); }

/* ---- 3d. The inset panels ------------------------------------------------- */
/* Vytas, 2026-09-26: "way too white"; "section background brand color or dark,
   but it should not touch left and right page edges". Why now and Everything
   in one place sit on an ink panel inside the grid (so the page gutter stays
   white on both sides), the close on a lime one. Two dark and one lime in
   seven blocks: more would stripe the page. The white cards stay white. */
body.hv .hv-panel { border-radius: var(--v4-radius-2xl, 24px); padding: 64px 56px; background-color: var(--v4-color-surface-inverse, #121212); }
/* Keyboard focus on ink: the kit's ink ring vanishes on these panels, so
   every link and button inside one gets a white ring (QA, 2026-09-26). */
html body.v10.hv main [data-v4-panel] a:focus-visible,
html body.v10.hv main [data-v4-panel] button:focus-visible { outline: 2px solid var(--v4-color-white, #FFFFFF); outline-offset: 3px; }
/* 768 to 999px: three cards inside the panel were 209px wide, the jar's six
   results became slivers and the brand card was cut. One column instead. */
@media (min-width: 768px) and (max-width: 999.98px) {
    body.hv .hv-panel .v4x-three { grid-template-columns: minmax(0, 1fr); }
}
html body.v10.hv main .hv-panel--dark .v4-eyebrow,
html body.v10.hv main .hv-panel--dark .v4-h2,
html body.v10.hv main .hv-panel--dark .v4-sub { color: var(--v4-color-ink-inverse, #FFFFFF); }
/* The close: the same ink panel, a row of six results above the title, white
   type, a white button that turns lime on hover (an ink button would vanish
   on ink). The lime panel tried first read as "extremely shitty" (Vytas). */
html body.v10.hv #close .v4-close.hv-close { padding: 64px 32px 72px; border-radius: var(--v4-radius-2xl, 24px); border-color: var(--v4-color-surface-inverse, #121212); background-color: var(--v4-color-surface-inverse, #121212); }
html body.v10.hv main #close .v4-h2, html body.v10.hv main #close .v4-sub { color: var(--v4-color-ink-inverse, #FFFFFF); }
body.hv .hv-close-pics { display: flex; justify-content: center; gap: 12px; margin: 0 auto 40px; }
body.hv .hv-close-pics li { width: 96px; flex: none; }
body.hv .hv-close-pics img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
html:root:root:root body.hv #close .v4-btn-primary { background-color: var(--v4-color-white, #FFFFFF); color: var(--v4-color-ink, #121212); }
html:root:root:root body.hv #close .v4-btn-primary:hover,
html:root:root:root body.hv #close .v4-btn-primary:hover * { background-color: var(--v4-color-accent-fill, #96FF1A); color: var(--v4-color-ink, #121212); }
@media (max-width: 1024px) {
    body.hv .hv-panel { padding: 48px 24px; }
}
/* The jar card's "Your product" ran 2px out of its paper at 1024 before the
   panels, 4px inside them: below 1200px it may wrap to two lines. */
@media (max-width: 1199.98px) {
    html body.v10.hv .hv-pic-jar .v4x-note { max-width: 100%; white-space: normal; text-align: center; }
}
/* The map tiles' compositions are drawn for tiles of about 282px. Inside the
   ink panel the tiles lost ~28px and the brand card, the workflow and editor
   pictures were cut at 1025-1440 (QA, 2026-09-26). Two across fixed the cut
   but left huge, empty tiles. So: four across, 16px of panel padding at the
   sides of the map, and below 1360px the drawings step down in size (never
   up: the nav files are small). */
@media (min-width: 1025px) {
    body.hv #everything .hv-panel { padding-inline: 16px; }
    body.hv #everything .hv-panel > .v4-head { padding-inline: 16px; }
}
@media (min-width: 1025px) and (max-width: 1359.98px) {
    body.hv #everything .hv-map-pic > *, body.hv #everything .hv-brandpic--tile .hv-brandcard { zoom: 0.86; }
}
@media (min-width: 1025px) and (max-width: 1199.98px) {
    body.hv #everything .hv-map-pic > *, body.hv #everything .hv-brandpic--tile .hv-brandcard { zoom: 0.74; }
}

/* ---- 3e. Hover ------------------------------------------------------------- */
/* Vytas, 2026-09-26: "i dont like this hover colour - looks boring -- check all
   hover". The kit's pale lime wash is replaced on this page by a clear ink
   outline on a link card, and the card's own link turns into a lime marker
   (lime fill, ink text: the one way the kit uses lime). On the dark panels the
   outline is lime. Colour only, nothing moves (the hover-lift rule). */
html body.v10.hv main a.v4-card:hover::before { opacity: 0; }
html body.v10.hv main a.v4-card { transition: border-color 150ms ease, box-shadow 150ms ease; }
html body.v10.hv main a.v4-card:hover { border-color: var(--v4-color-ink, #121212); box-shadow: 0 0 0 1px var(--v4-color-ink, #121212); }
html body.v10.hv main .hv-panel--dark a.v4-card:hover { border-color: var(--v4-color-accent-fill, #96FF1A); box-shadow: 0 0 0 2px var(--v4-color-accent-fill, #96FF1A); }
/* The link line: padded at rest (negative margin keeps the words on the text
   edge), so the marker appears without the words moving. */
html body.v10.hv main .v4-link { align-self: flex-start; width: fit-content; padding: 4px 8px; margin-left: -8px; border-radius: 8px; transition: background-color 150ms ease; }
html body.v10.hv main .v4-link:hover,
html body.v10.hv main a.v4-card:hover .v4-link { background-color: var(--v4-color-accent-fill, #96FF1A); color: var(--v4-color-ink, #121212); text-decoration: none; }
/* Tabs: an unselected tab shows the tab it would become. */
html body.v10.hv .v4x-tab:not([aria-selected="true"]):hover { color: var(--v4-color-ink, #121212); background-color: rgba(255, 255, 255, 0.7); }
/* Questions: an ink edge on the one under the pointer, not a shade of grey. */
html body.v10.hv .v4x-q { transition: border-color 150ms ease; }
html body.v10.hv .v4x-q:hover { border-color: var(--v4-color-ink, #121212); }
@media (prefers-reduced-motion: reduce) {
    html body.v10.hv main a.v4-card, html body.v10.hv main .v4-link, html body.v10.hv .v4x-q { transition: none; }
}
@media (max-width: 767.98px) {
    body.hv .hv-panel { border-radius: 24px; padding: 32px 16px; }
    html body.v10.hv #close .v4-close.hv-close { padding: 40px 20px 48px; border-radius: 24px; }
    /* Four results on a phone, not six. */
    body.hv .hv-close-pics { gap: 8px; margin-bottom: 28px; }
    body.hv .hv-close-pics li { width: 64px; }
    body.hv .hv-close-pics li:nth-child(n+5) { display: none; }
}

/* ---- 4. Why now: the jar card and the brand record ------------------------- */
/* Six scenes of one jar beside the source photo: a narrower input column so
   the 3x2 cells stay near square. */
body.hv .hv-pic-jar .v4x-xf-paper { grid-template-columns: minmax(0, 3fr) 28px minmax(0, 8fr); }
body.hv .hv-pic-jar .v4x-arrow { width: 28px; }
body.hv .hv-pic-jar .v4x-note { font-size: 11px; white-space: nowrap; }
/* The brand record, drawn: a white card on paper with the wordmark, four
   tokens, the typeface and two rules. Replaced by the capture
   brand-record-1440 when it lands (data-shot-id on the panel). */
body.hv .hv-brandpic { display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
body.hv .hv-brandcard {
    width: min(100%, 300px); box-sizing: border-box; padding: 18px 20px;
    border: 1px solid var(--v4-color-line, #E6E4E1); border-radius: 16px; background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10);
}
body.hv .hv-brand-mark { width: 128px; }
body.hv .hv-brand-discs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; }
body.hv .hv-brand-discs li { display: flex; align-items: center; gap: 6px; }
body.hv .hv-brand-disc { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 1px solid rgba(18, 18, 18, 0.08); border-radius: 9999px; }
body.hv .hv-brand-name { font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--v4-color-ink-3, #6F6D6A); }
body.hv .hv-brand-font { margin: 12px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--v4-color-ink, #121212); }
body.hv .hv-brand-rules { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; }
body.hv .hv-brand-rules li { position: relative; padding-left: 14px; font-size: 12px; line-height: 1.5; color: var(--v4-color-ink-3, #6F6D6A); }
body.hv .hv-brand-rules li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 9999px; background-color: var(--v4-color-ink, #121212); }
/* The same card at map-tile size. */
body.hv .hv-brandpic--tile { padding: 12px; }
body.hv .hv-brandpic--tile .hv-brandcard { width: min(100%, 250px); padding: 12px 14px; }
body.hv .hv-brandpic--tile .hv-brand-mark { width: 96px; }
body.hv .hv-brandpic--tile .hv-brand-discs { gap: 4px 10px; margin-top: 10px; }
body.hv .hv-brandpic--tile .hv-brand-disc { width: 14px; height: 14px; }
body.hv .hv-brandpic--tile .hv-brand-name { font-size: 10px; }
body.hv .hv-brandpic--tile .hv-brand-font { margin-top: 8px; font-size: 12px; }
body.hv .hv-brandpic--tile .hv-brand-rules { gap: 1px; margin-top: 4px; }
body.hv .hv-brandpic--tile .hv-brand-rules li { padding-left: 11px; font-size: 11px; }
body.hv .hv-brandpic--tile .hv-brand-rules li::before { top: 6px; width: 4px; height: 4px; }

/* ---- 5. The six transformations: the product shots grid and the editor ----- */
/* Eight product shots of one jar: a 4x2 of 4:5 tiles, centred in the panel,
   the results column wider than the kit's so the tiles stay readable. */
body.hv .hv-pic-shots .v4x-xf-paper { grid-template-columns: minmax(0, 3fr) 36px minmax(0, 11fr); }
body.hv .hv-pic-shots .v4x-out { align-items: center; }
body.hv .hv-pic-shots .v4x-grid { height: auto; grid-auto-rows: auto; align-self: center; }
body.hv .hv-pic-shots .v4x-cell { height: auto; aspect-ratio: 4 / 5; }
body.hv .hv-pic-shots .v4x-note { white-space: nowrap; }
/* The video editor, drawn: the 9:16 clip beside a white player frame with a
   preview and three lanes. Replaced by video-editor-timeline-1440 when the
   capture lands (data-shot-id on the panel). */
body.hv .hv-editorpic {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    gap: 16px; align-items: stretch; padding: 16px; box-sizing: border-box;
}
body.hv .hv-editorpic .v4x-video-frame { width: auto; height: 100%; max-width: none; min-height: 0; }
body.hv .hv-editor { height: 100%; min-height: 0; box-sizing: border-box; }
body.hv .hv-lanes { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 12px; }
body.hv .hv-editor-preview {
    display: flex; flex: none; align-items: center; justify-content: center; height: 40%; min-height: 96px; margin-bottom: 2px;
    overflow: hidden; border: 1px solid var(--v4-color-line, #E6E4E1); border-radius: 10px;
    background-color: var(--v4-color-surface-2, #F6F5F4);
}
body.hv .hv-lane { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
body.hv .hv-lane-l { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--v4-color-ink-3, #6F6D6A); }
body.hv .hv-lane-clips { display: flex; gap: 6px; }
body.hv .hv-lane-clip { flex: none; width: 40px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background-color: var(--v4-color-surface-2, #F6F5F4); }
body.hv .hv-lane-track { position: relative; height: 24px; border-radius: 6px; border: 1px solid var(--v4-color-line, #E6E4E1); background-color: #FFFFFF; }
body.hv .hv-word { position: absolute; top: 7px; height: 8px; border-radius: 4px; background-color: var(--v4-color-line-2, #D7D4CF); }
body.hv .hv-wave { display: block; width: 100%; height: 100%; color: var(--v4-color-ink-3, #6F6D6A); }

/* ---- 6. Does that sound like you: the segment pictures ---------------------- */
body.hv .hv-segfig { display: flex; flex-direction: column; margin: 0; min-width: 0; }
/* The tree, compact: the studio pair over a 2x3 of six places, the results
   column capped so the panel stays under 560px at 1440 (Vytas, 15:30). */
body.hv .hv-segfig .v4x-tree-paper { grid-template-columns: minmax(0, 3fr) 56px minmax(0, 8fr); padding: 16px; }
body.hv .hv-segfig .v4x-tree-out { max-width: 380px; gap: 12px; }
body.hv .hv-segfig .v4x-frame { padding: 6px; border-radius: 16px; }
body.hv .hv-segfig .v4x-frame-label { margin: 2px 4px 6px; }
body.hv .hv-segfig .v4x-frame--pair { width: min(100%, 230px); }
body.hv .hv-segfig .v4x-grid { gap: 6px; }
body.hv .hv-segfig .v4x-cell { border-radius: 10px; }
body.hv .hv-segfig .v4x-in { max-width: 200px; }
/* Four client products, a 2x2 of squares on paper. */
body.hv .hv-clients { padding: 20px; }
body.hv .hv-clients .v4x-grid { max-width: 560px; margin-inline: auto; }
/* Creators: four 3:4 avatar poses. A 2x2 of 3:4 at 75% of the width stands
   as tall as the agencies' 2x2 of squares, so switching tabs does not move
   the page. */
body.hv .hv-creators .v4x-grid { max-width: min(420px, 75%); }

/* ---- 7. Everything in one place: the map tiles ----------------------------- */
/* Eight picture tiles four to a row (the six text tiles left the homepage on
   2026-09-26). The compositions mirror the nav's Product menu cards, drawn
   from real renders at their own size (the nav files are small and never
   scaled up). */
body.hv .hv-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.hv .hv-map-pic { align-items: center; justify-content: center; }
body.hv .hv-mp-grid { display: grid; grid-template-columns: repeat(2, 96px); gap: 8px; }
body.hv .hv-mp-grid img { width: 96px; overflow: hidden; border-radius: 10px; border: 1px solid var(--v4-color-line, #E6E4E1); background-color: #FFFFFF; }
body.hv .hv-mp-flow { display: flex; align-items: center; }
body.hv .hv-mp-flow img { flex: none; width: 88px; border-radius: 10px; border: 1px solid var(--v4-color-line, #E6E4E1); background-color: #FFFFFF; }
body.hv .hv-mp-wire { display: block; flex: none; width: 22px; height: 1px; background-color: var(--v4-color-line-2, #D7D4CF); }
body.hv .hv-mp-app { position: relative; width: min(100%, 232px); }
body.hv .hv-mp-app img { width: 100%; border-radius: 10px; border: 1px solid var(--v4-color-line, #E6E4E1); background-color: #FFFFFF; }
body.hv .hv-mp-form {
    position: absolute; right: -10px; bottom: -10px; display: flex; flex-direction: column; gap: 6px; width: 96px; box-sizing: border-box; padding: 8px;
    border: 1px solid var(--v4-color-line, #E6E4E1); border-radius: 10px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10);
}
body.hv .hv-mp-field { display: block; height: 12px; border-radius: 4px; border: 1px solid var(--v4-color-line, #E6E4E1); background-color: #FFFFFF; }
body.hv .hv-mp-run { display: block; height: 16px; margin-top: 2px; border-radius: 5px; background-color: var(--v4-color-ink, #121212); }
body.hv .hv-mp-sheet {
    display: flex; flex-direction: column; gap: 6px; width: min(100%, 220px); box-sizing: border-box; padding: 8px;
    border: 1px solid var(--v4-color-line, #E6E4E1); border-radius: 10px; background-color: #FFFFFF;
}
body.hv .hv-mp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
body.hv .hv-mp-row img { width: 28px; border-radius: 6px; }
body.hv .hv-mp-bar { display: block; height: 8px; border-radius: 4px; background-color: var(--v4-color-line, #E6E4E1); }
body.hv .hv-mp-bar--short { width: 60%; }
body.hv .hv-mp-edit { display: flex; align-items: center; gap: 10px; }
body.hv .hv-mp-cell { flex: none; width: 108px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background-color: var(--v4-color-surface-2, #F6F5F4); }
body.hv .hv-mp-arrow { display: block; flex: none; width: 36px; height: auto; color: var(--v4-color-ink, #121212); }
body.hv .hv-mp-lane {
    display: flex; gap: 6px; box-sizing: border-box; padding: 8px;
    border: 1px solid var(--v4-color-line, #E6E4E1); border-radius: 10px; background-color: #FFFFFF;
}
body.hv .hv-mp-clip { flex: none; width: 60px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background-color: var(--v4-color-surface-2, #F6F5F4); }
body.hv .hv-mp-assets { display: grid; grid-template-columns: repeat(4, 56px); gap: 6px; }
body.hv .hv-mp-assets .hv-mp-cell { width: 56px; border-radius: 8px; }

/* ---- 8. Questions: the head and the demo card left, the kit's FAQ right ---- */
body.hv .hv-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
body.hv .hv-faq-side { position: sticky; top: 88px; }
body.hv .hv-faq-side .v4-head { margin-bottom: 24px; }

/* ---- 9. Breakpoints ----------------------------------------------------------- */
@media (max-width: 1024px) {
    body.hv .hv-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.hv .hv-faq { grid-template-columns: 1fr; gap: 32px; }
    body.hv .hv-faq-side { position: static; }
}
@media (max-width: 767.98px) {
    body.hv main .v4-section { padding-block: 28px; }
    body.hv main .hv-hero { padding-top: 32px; }
    body.hv .v4-head { margin-bottom: 24px; }
    /* The same rhythm, scaled to a phone: 40 / 12 / 16 / 24 / 40. The section
       sits 7px under the taller phone bar, so 48px of padding reads as 40. */
    html:root body.hv .v10-navwrap ~ main > section.hv-hero:first-of-type { padding-top: 48px !important; }
    html body.v10.hv .hv-hero .v4-eyebrow { margin-bottom: 12px; }
    html body.v10.hv .hv-hero .v4-lead { margin-top: 16px; }
    html body.v10.hv .hv-hero .v4-cta-row { margin-top: 24px; }
    html body.v10.hv .hv-hero .v4-head--center { margin-bottom: 40px; }
    html body.v10.hv .v4-link { min-height: 44px; }
    /* The hero buttons stack and fill the width on a phone. */
    body.hv .hv-hero .v4-cta-row { flex-direction: column; align-items: stretch; }
    body.hv .hv-hero .v4-cta-row .v4-btn-primary, body.hv .hv-hero .v4-cta-row .v4-btn-secondary { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
    body.hv .hv-h1-line { display: inline; }
    body.hv .hv-map { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* A hard 390 (Vytas, 15:30): a block shows the input and at most four
       results in a 2x2, no tile under 120px wide, no text under 14px. */
    body.hv .hv-hero-fig .v4x-xf-paper { grid-template-columns: minmax(0, 1fr); }
    body.hv .hv-hero-fig .v4x-grid--4, body.hv .hv-pic-shots .v4x-grid--4, body.hv .hv-pic-jar .v4x-grid, body.hv .hv-segfig .v4x-frame .v4x-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The Brands tree keeps all six scenes on a phone (2x3): its label says
       "six places", and four under that label read as a mistake (QA). */
    body.hv .hv-pic-shots .v4x-cell:nth-child(n+5), body.hv .hv-pic-jar .v4x-cell:nth-child(n+5) { display: none; }
    body.hv .hv-segfig .v4x-frame .v4x-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Three results (the people, the scenes, the variants) sit two over one,
       each at least 150px wide, instead of three narrow tiles in a row. */
    body.hv .hv-pic-people .v4x-grid, body.hv .hv-pic-scenes .v4x-scenes-track, body.hv .hv-pic-variants .v4x-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    body.hv .hv-pic-people .v4x-cell, body.hv .hv-pic-scenes .v4x-cell, body.hv .hv-pic-variants .v4x-cell { flex: 0 0 calc(50% - 3px); width: calc(50% - 3px); height: auto; aspect-ratio: 4 / 5; }
    body.hv .hv-pic-variants .v4x-cell { aspect-ratio: 1 / 1; }
    body.hv .hv-pic-people { aspect-ratio: auto; }
    /* The jar, product-shots and scenes panels stack like the kit's other card
       panels: the source photo above, the arrow turned down, the results under. */
    body.hv .hv-pic-jar .v4x-xf-paper, body.hv .hv-pic-shots .v4x-xf-paper, body.hv .v4x-six .v4x-scenes-paper { grid-template-columns: minmax(0, 1fr); }
    body.hv .hv-pic-jar .v4x-arrow, body.hv .hv-pic-shots .v4x-arrow { width: 20px; }
    body.hv .hv-pic-jar .v4x-note { font-size: 12px; }
    /* Every source tile stays over 120px wide (the kit's 40% and 30% land at
       119 and 95 on a 390 screen). */
    body.hv .v4x-in, body.hv .v4x-in-col--sm .v4x-in, body.hv .v4x-in-group .v4x-in, body.hv .v4x-pic--panel .v4x-in, body.hv .v4x-pic--panel .v4x-in-group .v4x-in, body.hv .v4x-pic--panel .v4x-in-col--sm .v4x-in { max-width: 44%; }
    body.hv .v4x-in-row .v4x-in, body.hv .v4x-pic--panel .v4x-in-row .v4x-in { max-width: 40%; }
    body.hv .hv-segfig .v4x-tree-paper { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    body.hv .hv-segfig .v4x-tree-out { max-width: none; }
    body.hv .hv-segfig .v4x-frame--pair { width: auto; }
    body.hv .hv-segfig .v4x-in { max-width: 44%; }
    /* The editor drawing stacks: the clip above, the player frame under it. */
    body.hv .hv-editorpic { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; aspect-ratio: auto; gap: 12px; padding: 12px; }
    body.hv .hv-editorpic .v4x-video-frame { width: 50%; height: auto; margin-inline: auto; }
    body.hv .hv-editor { height: auto; }
    body.hv .hv-editor-preview { height: 120px; }
    body.hv .hv-lanes { padding: 10px; gap: 8px; }
    body.hv .hv-lane { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
    body.hv .hv-lane-clip { width: 48px; }
    body.hv .hv-brandpic { aspect-ratio: auto; }
    body.hv .hv-clients { padding: 12px; }
    body.hv .hv-mp-cell { width: 120px; }
    body.hv .hv-mp-assets { grid-template-columns: repeat(4, 64px); }
    body.hv .hv-mp-assets .hv-mp-cell { width: 64px; }
    /* No text under 14px on a phone (Vytas, 15:30): captions, notes, map
       lines, the demo card, swatch names, lane labels, tabs, the brand card.
       soft-studio-chrome.css pins figcaptions to 13px and every *-note,
       *-label and *-tag to 12px with !important at (0,1,1) under 768px (its
       legibility floor), so these carry !important at (0,3,1) to win. The
       eyebrow-class labels (.v4-eyebrow, .v4x-note, .v4x-checks-label,
       .v4x-frame-label) stay at the kit's 12px: the chrome pins them and the
       align gate requires 11 to 12px there. */
    html:root body.hv .v4x-cap, html:root body.hv .v4x-note-s, html:root body.hv .v4x-map-line,
    html:root body.hv .v4x-swatch, html:root body.hv .hv-lane-l,
    html:root body.hv .v4x-tab, html:root body.hv .hv-brand-name, html:root body.hv .hv-brand-rules li { font-size: 14px !important; }
    html:root body.hv .hv-brand-font { font-size: 15px !important; }
}

/* ---- 10. Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.hv .v4-card, body.hv .v4-card::before { transition: none; }
}