/* =============================================================================
   v4-transform.css: the transformation patterns (A1 to A16) for every family.
   Spec: docs/v4/DESIGN-SYSTEM-V4.md section 6.12. Markup: the mixins in
   app/server/views/frontend/v4/_transform_mixins.pug. Loaded after
   designerbox-v4.css on every chain (the three style partials, the homepage,
   how-it-works, the v4 shells) as a RAW link: bump ?v= on every edit
   (app.js serves raw assets immutable for a year).

   Rules of this sheet:
   - Every selector starts with a pattern class (prefix v4x-), never a body
     class, so one sheet serves body.hv (the homepage), body.v4p (the v4
     tree), body.use-case-page (the trio chain) and the /for layout.
   - What body.v10 outranks (home-next-v10.css: `body.v10 img { height: auto }`,
     `body.v10 a { color: inherit }`, `body.v10 main p { margin: 0 }`) is
     restated at `html body ...` strength in section 1.
   - Values: page white, hairline #E6E4E1, dotted paper #F6F5F4 only as
     thumbnail or panel paper (one rule, background-size in it), radii 24
     (card) / 20 (inner frame) / 16 (media, 10 on a phone where the hero sheet
     already does it), no shadow on a card (only the tile and mount shadows
     of 6.11), no gradient but the dot paper, no glow, nothing moves on
     hover, transitions colour-only at 150ms, reduced motion respected.
   ============================================================================= */

/* ---- 1. What body.v10 and the legacy chains outrank ------------------------ */
html body .v4x-fig { display: flex; flex-direction: column; align-self: start; margin: 0; padding: 8px; }
html body .v4-card.v4x-outcome, html body .v4-card.v4x-six-card, html body .v4-card.v4x-map-tile { padding: 8px; }
html body .v4-card.v4x-map-tile--text { padding: 16px 18px; }
html body .v4-card.v4x-segment { padding: 8px; }
html body .v4-card.v4x-sheet { padding: 20px; }
html body .v4x-three, html body .v4x-six, html body .v4x-map, html body .v4x-checks, html body .v4x-swatches, html body .v4x-qs { margin: 0; padding: 0; list-style: none; }
html body .v4x-p, html body .v4x-cap, html body .v4x-map-line, html body .v4x-note-s, html body .v4x-q-a p, html body .v4x-ph-text { margin: 0; }
html body .v4x-cell img, html body .v4x-tile img, html body .v4x-size-frame img, html body .v4x-phone img,
html body .v4x-thumb-video img, html body .v4x-video-frame img, html body .v4x-video-el, html body .v4x-pic--photo img,
html body .v4x-thumb .v4-thumb-tile img {
    display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
/* A source tile keeps the photo's own shape, like a print. */
html body .v4x-in img, html body .v4x-mount img { display: block; width: 100%; height: auto; max-width: none; }
html body a.v4x-six-card, html body a.v4x-map-tile, html body a.v4x-talk { color: #121212; text-decoration: none; }
html body .v4x-six-card .v4-link, html body .v4x-six-card .v4-link svg { color: #121212; }
html body .v4x-six-card .v4-link { margin-top: 14px; }
html body .v4x-six-card .v4-link svg { flex: none; }
html body .v4x-tabpanel[hidden] { display: none; }

/* ---- 1b. What body.use-case-page outranks (the trio chain) ---------------- */
/* uc-pages.css paints every p, li and span under main #6F6D6A with !important
   at (0,4,3) (`:root body.use-case-page main span:not(.uc-hero-badge):not(.uc-check)`),
   and theme-global.css has an older copy of the same rule. Under
   body.use-case-page (the photography cluster, /demo, /press, the comparison
   partial) that turned the kit's FAQ question, paragraph, checklist, swatch
   name, label chip, sheet head and six-card link grey. This block holds the
   only !important rules in this sheet: the class is doubled and the element
   named so each selector weighs (0,4,4) or more, one step over the rule it
   answers, whatever the link order. Ink: */
html:root body.use-case-page main span.v4x-q-t.v4x-q-t,
html:root body.use-case-page main span.v4x-label.v4x-label,
html:root body.use-case-page main li.v4x-swatch.v4x-swatch.is-chosen,
html:root body.use-case-page main a.v4x-six-card span.v4-link.v4-link { color: #121212 !important; }
/* Ink-2: */
html:root body.use-case-page main p.v4x-p.v4x-p,
html:root body.use-case-page main ul.v4x-checks.v4x-checks > li,
html:root body.use-case-page main .v4x-q-a.v4x-q-a p,
html:root body.use-case-page main li.v4x-swatch.v4x-swatch,
html:root body.use-case-page main span.v4x-sheet-head.v4x-sheet-head { color: #3D3D3C !important; }
/* A span inside a row takes the row's colour (the chosen swatch stays ink). */
html:root body.use-case-page main ul.v4x-checks.v4x-checks > li > span,
html:root body.use-case-page main span.v4x-swatch-l.v4x-swatch-l { color: inherit !important; }
/* soft-studio.css also sets `[class*="tile"]:hover { box-shadow: none !important }`,
   which took the 3px mount's shadow off a thumbnail tile under the pointer
   (nothing changes on hover: the tile keeps the 6.11 tile shadow). */
html body .v4x-thumb .v4-thumb-tile:hover { box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10) !important; }

/* A narrow tile (the clip frame at card size) cannot carry the brief: the id
   alone stays readable. */
.v4x-ph { container-type: inline-size; }
@container (max-width: 150px) {
    .v4x-ph-text { display: none; }
}

/* ---- 2. Paper, tiles, notes, captions, the placeholder --------------------- */
/* The dotted paper: fill, one dot every 12px, background-size in the SAME rule. */
.v4x-paper, .v4x-ph {
    background-color: #F6F5F4; background-position: -1px -1px; background-size: 12px 12px;
    background-image: radial-gradient(circle, rgba(18, 18, 18, 0.07) 1px, transparent 1px);
}
.v4x-paper { position: relative; overflow: hidden; border: 1px solid #E6E4E1; border-radius: 16px; box-sizing: border-box; }

/* The section-size panels: a grid of input | arrow | results, centred. */
.v4x-xf-paper, .v4x-scenes-paper, .v4x-video-paper, .v4x-person-paper, .v4x-tree-paper {
    display: grid; align-items: center; gap: 16px; padding: 20px;
}
.v4x-xf-paper, .v4x-video-paper { grid-template-columns: minmax(0, 3fr) 48px minmax(0, 9fr); }
.v4x-scenes-paper { grid-template-columns: minmax(0, 2fr) 40px minmax(0, 10fr); }
.v4x-person-paper { grid-template-columns: minmax(0, 3fr) 140px minmax(0, 6fr); }
.v4x-tree-paper { grid-template-columns: minmax(0, 3fr) 64px minmax(0, 9fr); }

/* The input column: one tile (or two), a note under it. */
.v4x-in-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.v4x-in {
    position: relative; overflow: hidden; width: 100%; max-width: 280px; box-sizing: border-box;
    padding: 3px; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10);
}
/* Two source photos in one column overlap like two prints (the sheet's
   second input); a row of garment cutouts (A6) does not. */
.v4x-in-col > .v4x-in + .v4x-in { margin-top: -22%; margin-left: 14%; }
html body .v4x-in img { border-radius: 2px; }
.v4x-in-col--sm .v4x-in { max-width: 180px; }
.v4x-in-col--stack { gap: 18px; }
.v4x-in-group { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.v4x-in-group .v4x-in { max-width: 200px; }
.v4x-in-row { display: flex; justify-content: center; gap: 8px; width: 100%; }
.v4x-in-row .v4x-in { max-width: 132px; }

/* The arrow: the 6.11 drawing at 48px, ink. */
.v4x-arrow { display: block; width: 48px; height: auto; color: #121212; justify-self: center; }
.v4x-arrow-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.v4x-arrow-col .v4x-note { margin: 0; text-align: center; }

/* The results: a grid of tiles at radius 16, 8px gap, or the placeholder. */
.v4x-out { min-width: 0; }
.v4x-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v4x-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v4x-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v4x-cell { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 16px; background-color: #F6F5F4; }
.v4x-r11 > .v4x-cell, .v4x-cell.v4x-r11 { aspect-ratio: 1 / 1; }
.v4x-r45 > .v4x-cell, .v4x-cell.v4x-r45 { aspect-ratio: 4 / 5; }
.v4x-r34 > .v4x-cell, .v4x-cell.v4x-r34 { aspect-ratio: 3 / 4; }
.v4x-r916 > .v4x-cell, .v4x-cell.v4x-r916 { aspect-ratio: 9 / 16; }
.v4x-r169 > .v4x-cell, .v4x-cell.v4x-r169 { aspect-ratio: 16 / 9; }
.v4x-r1610 > .v4x-cell, .v4x-cell.v4x-r1610 { aspect-ratio: 16 / 10; }
.v4x-cell--solo { width: 100%; max-width: 400px; margin-inline: auto; }
.v4x-cell--solo.v4x-r1610, .v4x-cell--solo.v4x-r169, .v4x-cell--solo.v4x-r32, .v4x-cell--solo.v4x-r21 { max-width: none; }

/* A12. The note: eyebrow values, no block margin of its own. */
.v4x-note {
    display: block; margin: 10px 0 0; color: #6F6D6A;
    font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
    font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase; text-align: center;
}
/* The caption under a panel, inside the card frame. */
.v4x-cap { padding: 12px 12px 8px; font-size: 13px; line-height: 1.5; color: #6F6D6A; }
.v4x-cap-plan { display: block; margin-top: 2px; }
html body .v4-card.v4x-sheet .v4x-cap { padding: 12px 0 0; }

/* A16. The placeholder tile: grey paper, a dashed hairline, the brief, the id. */
.v4x-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; box-sizing: border-box; padding: 20px; overflow: hidden; text-align: center;
    border: 1px dashed #D7D4CF; border-radius: 16px;
}
.v4x-ph-text { max-width: 44ch; font-size: 13px; line-height: 1.5; color: #6F6D6A; }
.v4x-ph-id { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; color: #6F6D6A; }
/* Inside a mount or a video frame the tile takes the inner radius; 10, under
   the card rule's floor, since a filled box at 12 or more must be 16/20/24. */
.v4x-mount > .v4x-ph { width: 100%; height: 100%; border: 0; border-radius: 10px; }

/* ---- 3. A2, the tree ------------------------------------------------------- */
.v4x-tree-links { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 48px; color: #D7D4CF; }
.v4x-tree-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.v4x-tree-arrow { display: none; width: 24px; height: auto; color: #121212; transform: rotate(90deg); }
.v4x-tree-out { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v4x-frame { padding: 8px; border: 1px solid #E6E4E1; border-radius: 20px; background-color: #FFFFFF; }
.v4x-frame-label {
    display: block; margin: 4px 4px 8px; color: #6F6D6A;
    font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase;
}
.v4x-frame .v4x-grid--2 { max-width: 420px; }
.v4x-frame--pair { align-self: flex-start; width: min(100%, 436px); }

/* ---- 4. A3, the scenes strip ----------------------------------------------- */
/* The strip runs past the panel's right edge; the panel clips it (overflow hidden). */
.v4x-scenes-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 112%; }

/* ---- 5. A4, the video frame ------------------------------------------------ */
.v4x-video-out { display: flex; align-items: center; justify-content: center; min-width: 0; }
.v4x-video-frame {
    position: relative; overflow: hidden; width: 100%; max-width: 236px; aspect-ratio: 9 / 16; box-sizing: border-box;
    padding: 3px; border-radius: 16px; background-color: #FFFFFF; box-shadow: 0 2px 10px rgba(18, 18, 18, 0.10);
}
html body .v4x-video-frame img, html body .v4x-video-el { border-radius: 13px; }
.v4x-video-frame > .v4x-ph { height: 100%; border-radius: 10px; }
/* Centred by inset + auto margins, never by a transform: soft-studio.css
   (the trio chain) sets `button:hover { transform: none !important }`, and a
   disc centred by translate(-50%, -50%) jumped 22px down-right under the
   pointer, so a real click landed on the frame and never played the clip. */
.v4x-play-disc {
    position: absolute; inset: 0; width: 44px; height: 44px; margin: auto; padding: 0; border: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; background-color: #FFFFFF; color: #121212; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10);
    font: inherit; cursor: default;
}
button.v4x-play-disc { cursor: pointer; }
button.v4x-play-disc:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.v4x-play-disc .ph { margin-left: 2px; }
.v4x-play-disc--sm { width: 28px; height: 28px; }
.v4x-play-disc--sm .ph { margin-left: 1px; }
.v4x-video-frame.is-playing .v4x-play-disc { display: none; }

/* ---- 6. A5, the swatch row ------------------------------------------------- */
.v4x-swatches-wrap { display: flex; flex-direction: column; }
.v4x-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 12px 4px; }
.v4x-swatch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #3D3D3C; }
.v4x-swatch-dot { flex: none; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid rgba(18, 18, 18, 0.08); border-radius: 9999px; }
.v4x-swatch.is-chosen .v4x-swatch-dot { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #121212; }
.v4x-swatch.is-chosen { color: #121212; }

/* ---- 7. A7, the capture mount ---------------------------------------------- */
.v4x-capture-paper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; justify-items: center; padding: 20px; }
.v4x-capture-paper--pair { grid-template-columns: minmax(0, 1fr) auto; }
.v4x-mount {
    display: flex; width: 100%; box-sizing: border-box; overflow: hidden; padding: 3px;
    border: 1px solid #E6E4E1; border-radius: 16px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10);
}
html body .v4x-mount img { border-radius: 13px; }
.v4x-capture-paper .v4x-video-frame { width: 180px; }

/* ---- 8. A8, the segment tabs ----------------------------------------------- */
/* Hidden until the document is scripted (the inline line in the mixin sets
   data-v4x-js before first paint); without JavaScript both panels show. */
.v4x-tabs {
    display: none; align-items: center; gap: 4px; height: 40px; box-sizing: border-box; padding: 4px; margin: 0 0 24px;
    border: 1px solid #E6E4E1; border-radius: 16px; background-color: #F6F5F4;
}
html[data-v4x-js] .v4x-tabs { display: inline-flex; }
html body .v4x-tab {
    appearance: none; -webkit-appearance: none; margin: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 12px;
    background-color: transparent; color: #6F6D6A; box-shadow: none;
    font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}
html body .v4x-tab:hover { color: #121212; background-color: transparent; }
html body .v4x-tab[aria-selected="true"] { background-color: #FFFFFF; color: #121212; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10); }
html body .v4x-tab:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.v4x-tabpanel { outline: none; }
.v4x-tabpanel + .v4x-tabpanel { margin-top: 24px; }
html[data-v4x-js] .v4x-tabpanel + .v4x-tabpanel { margin-top: 0; }
.v4x-tabpanel:focus-visible { outline: 2px solid #121212; outline-offset: 4px; border-radius: 24px; }

/* The two-column card in a panel: text left, picture right. */
.v4x-segment { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; }
.v4x-segment-text { padding: 24px 8px 24px 24px; min-width: 0; }
.v4x-segment-text .v4x-p { max-width: 52ch; }
.v4x-segment-pic { min-width: 0; }

/* ---- 9. A9, the checklist -------------------------------------------------- */
.v4x-checks-wrap { margin-top: 20px; }
.v4x-checks-label {
    display: block; margin: 0 0 10px; color: #6F6D6A;
    font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase;
}
.v4x-checks { display: flex; flex-direction: column; gap: 10px; }
.v4x-checks li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: #3D3D3C; }
.v4x-checks li .ph { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #121212; }

/* ---- 10. The card picture slot and the card bodies -------------------------- */
.v4x-pic { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; }
.v4x-pic--thumb .v4-thumb { width: 100%; aspect-ratio: 16 / 10; }
/* A panel at card size: the 16:10 box gives the one grid row a definite
   height, so the results fill it and crop (object-fit) instead of stacking
   past the edge. The outer .v4x-pic carries the paper; the inner panel
   loses its own frame. */
.v4x-pic--panel { display: grid; }
.v4x-pic--panel > .v4x-paper {
    height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch;
    border: 0; border-radius: 0; background-color: transparent; background-image: none; padding: 16px; gap: 12px;
}
.v4x-pic--panel .v4x-in-col { justify-content: center; min-height: 0; }
.v4x-pic--panel .v4x-arrow, .v4x-pic--panel .v4x-arrow-col { align-self: center; }
.v4x-pic--panel .v4x-out, .v4x-pic--panel .v4x-video-out, .v4x-pic--panel .v4x-tree-out { height: 100%; min-height: 0; }
.v4x-pic--panel .v4x-grid { height: 100%; grid-auto-rows: minmax(0, 1fr); }
.v4x-pic--panel .v4x-cell { height: 100%; min-height: 0; aspect-ratio: auto; }
.v4x-pic--panel .v4x-out { display: flex; align-items: center; justify-content: center; }
/* A grid of two rows or more fills the box and its cells crop to it. ONE row
   of results (three shots, three colourways: `.v4x-grid--row`, set by the
   mixin when the set fits in one row; and the scenes strip) keeps its cells
   at their own ratio, centred in the box: stretched to the box height, three
   4:5 tiles became 1:2.4 strips that cut every scene to a sliver round the
   product. */
.v4x-pic--panel .v4x-grid--row, .v4x-pic--panel .v4x-scenes-track { height: auto; grid-auto-rows: auto; }
.v4x-pic--panel .v4x-grid--row > .v4x-cell, .v4x-pic--panel .v4x-scenes-track > .v4x-cell { height: auto; aspect-ratio: 4 / 5; }
.v4x-pic--panel .v4x-grid--row.v4x-r11 > .v4x-cell, .v4x-pic--panel .v4x-scenes-track.v4x-r11 > .v4x-cell { aspect-ratio: 1 / 1; }
.v4x-pic--panel .v4x-grid--row.v4x-r34 > .v4x-cell, .v4x-pic--panel .v4x-scenes-track.v4x-r34 > .v4x-cell { aspect-ratio: 3 / 4; }
.v4x-pic--panel .v4x-grid--row.v4x-r916 > .v4x-cell, .v4x-pic--panel .v4x-scenes-track.v4x-r916 > .v4x-cell { aspect-ratio: 9 / 16; }
.v4x-pic--panel .v4x-grid--row.v4x-r169 > .v4x-cell, .v4x-pic--panel .v4x-scenes-track.v4x-r169 > .v4x-cell { aspect-ratio: 16 / 9; }
.v4x-pic--panel .v4x-grid--row.v4x-r1610 > .v4x-cell, .v4x-pic--panel .v4x-scenes-track.v4x-r1610 > .v4x-cell { aspect-ratio: 16 / 10; }
.v4x-pic--panel .v4x-out > .v4x-grid, .v4x-pic--panel .v4x-out > .v4x-scenes-track, .v4x-pic--panel .v4x-out > .v4x-ph { width: 100%; }
.v4x-pic--panel .v4x-cell--solo { width: auto; max-width: 100%; height: 100%; aspect-ratio: 4 / 5; margin-inline: auto; }
.v4x-pic--panel .v4x-video-frame { width: auto; height: 100%; max-width: 100%; }
.v4x-pic--panel .v4x-in { max-width: 160px; }
.v4x-pic--panel .v4x-arrow { width: 36px; }
.v4x-pic--panel .v4x-xf-paper, .v4x-pic--panel .v4x-video-paper { grid-template-columns: minmax(0, 3fr) 36px minmax(0, 8fr); }
.v4x-pic--panel .v4x-scenes-paper { grid-template-columns: minmax(0, 3fr) 36px minmax(0, 9fr); }
.v4x-pic--panel .v4x-in-col--sm .v4x-in { max-width: 160px; }
.v4x-pic--panel .v4x-person-paper { grid-template-columns: minmax(0, 3fr) 84px minmax(0, 5fr); }
.v4x-pic--panel .v4x-in-col--stack { gap: 10px; }
.v4x-pic--panel .v4x-in-group .v4x-in { max-width: 96px; }
.v4x-pic--panel .v4x-in-row .v4x-in { max-width: 64px; }
.v4x-pic--panel .v4x-arrow-col { gap: 6px; }
.v4x-pic--panel .v4x-capture-paper { grid-template-rows: minmax(0, 1fr); padding: 16px; gap: 12px; }
.v4x-pic--panel .v4x-capture-paper--pair { grid-template-columns: minmax(0, 1fr) auto; }
.v4x-pic--panel .v4x-mount { height: 100%; min-height: 0; }
html body .v4x-pic--panel .v4x-mount img { height: 100%; object-fit: cover; object-position: left top; }
.v4x-pic--panel .v4x-capture-paper .v4x-video-frame { width: auto; height: 100%; }
.v4x-pic--panel .v4x-ph { height: 100%; }
.v4x-pic--swatches > .v4x-swatches-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.v4x-pic--swatches .v4x-swatches-paper {
    height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch;
    border: 0; border-radius: 0; background-color: transparent; background-image: none; padding: 16px 16px 8px; gap: 12px;
}
.v4x-pic--swatches .v4x-swatches { padding: 0 16px 12px; }
.v4x-pic--tall { aspect-ratio: auto; }
.v4x-pic--tall > .v4x-paper { height: auto; }
.v4x-pic--tall .v4x-grid { height: auto; grid-auto-rows: auto; }
.v4x-pic--tall .v4x-cell { height: auto; }
.v4x-pic--tall .v4x-r11 > .v4x-cell { aspect-ratio: 1 / 1; }
.v4x-pic--tall .v4x-r45 > .v4x-cell { aspect-ratio: 4 / 5; }
.v4x-pic--grid { display: grid; align-items: center; padding: 12px; box-sizing: border-box; }
.v4x-pic--grid .v4x-grid { height: 100%; grid-auto-rows: minmax(0, 1fr); }
.v4x-pic--grid .v4x-cell { height: 100%; min-height: 0; aspect-ratio: auto; }
/* One row on paper keeps its ratio too (the same rule as the panel above). */
.v4x-pic--grid .v4x-grid--row { height: auto; grid-auto-rows: auto; }
.v4x-pic--grid .v4x-grid--row > .v4x-cell { height: auto; aspect-ratio: 4 / 5; }
.v4x-pic--grid .v4x-grid--row.v4x-r11 > .v4x-cell { aspect-ratio: 1 / 1; }
.v4x-pic--grid .v4x-grid--row.v4x-r34 > .v4x-cell { aspect-ratio: 3 / 4; }
.v4x-pic--grid .v4x-grid--row.v4x-r169 > .v4x-cell { aspect-ratio: 16 / 9; }
.v4x-pic--grid .v4x-grid--row.v4x-r1610 > .v4x-cell { aspect-ratio: 16 / 10; }
.v4x-pic--photo { border: 1px solid #E6E4E1; background-color: #F6F5F4; box-sizing: border-box; }
.v4x-pic--ph { border-radius: 16px; }
.v4x-pic--ph > .v4x-ph { height: 100%; }
.v4x-pic .v4x-sizes { height: 100%; }

.v4x-card-body { padding: 16px 16px 12px; }
.v4x-p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #3D3D3C; }
.v4x-note-s { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #6F6D6A; }
.v4x-map-line { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #6F6D6A; }

/* A10. Three static cards. A11. Six link cards (the kit's lime wash on hover). */
.v4x-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v4x-six { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v4x-three > li, .v4x-six > li, .v4x-map > li { display: flex; min-width: 0; }
.v4x-outcome, .v4x-six-card, .v4x-map-tile { flex: 1 1 auto; min-width: 0; }
a.v4x-six-card:hover .v4-link { text-decoration: underline; text-underline-offset: 3px; }

/* A13. The one-place map: three tiles per row, six small text tiles in the
   compact row. */
.v4x-map { display: grid; grid-template-columns: repeat(var(--v4x-map-cols, 3), minmax(0, 1fr)); gap: 16px; }
.v4x-map--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.v4x-map-pic { display: flex; aspect-ratio: 16 / 10; padding: 12px; box-sizing: border-box; }
.v4x-map-pic .v4x-mount { height: 100%; }
html body .v4x-map-pic .v4x-mount img { height: 100%; object-fit: cover; object-position: left top; }
.v4x-map--compact .v4x-card-body { padding: 0; }
.v4x-map--compact .v4x-map-line { font-size: 13px; }

/* ---- 11. A14, the FAQ ------------------------------------------------------ */
.v4x-faq--side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.v4x-faq-side { position: sticky; top: 88px; }
a.v4x-talk {
    display: flex; flex-direction: column; gap: 4px; padding: 16px; max-width: 320px; box-sizing: border-box;
    border: 1px solid #E6E4E1; border-radius: 16px; background-color: #FFFFFF; transition: border-color 150ms ease;
}
a.v4x-talk:hover { border-color: #C9F2A0; }
.v4x-talk b { font-size: 14px; font-weight: 500; line-height: 1.5; color: #121212; }
.v4x-talk span { font-size: 13px; line-height: 1.5; color: #6F6D6A; }
.v4x-qs { display: flex; flex-direction: column; gap: 8px; }
.v4x-q { border: 1px solid #E6E4E1; border-radius: 16px; background-color: #FFFFFF; transition: border-color 150ms ease; }
.v4x-q:hover, .v4x-q[open] { border-color: #D7D4CF; }
.v4x-q-s {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px;
    cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; line-height: 1.4; color: #121212;
}
.v4x-q-s::-webkit-details-marker { display: none; }
.v4x-q-s::marker { content: ""; }
.v4x-q-s:focus-visible { outline: 2px solid #121212; outline-offset: -2px; border-radius: 16px; }
/* The toggle: a 30px square, grey at rest, lime when open (an on state). */
.v4x-q-ic {
    position: relative; flex: none; width: 30px; height: 30px; border-radius: 10px;
    border: 1px solid #E6E4E1; background-color: #F6F5F4; transition: background-color 150ms ease, border-color 150ms ease;
}
.v4x-q[open] .v4x-q-ic { background-color: #96FF1A; border-color: #96FF1A; }
.v4x-q-ic::before, .v4x-q-ic::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: #121212; transform: translate(-50%, -50%); }
.v4x-q-ic::before { width: 12px; height: 2px; }
.v4x-q-ic::after { width: 2px; height: 12px; transition: opacity 150ms ease; }
.v4x-q[open] .v4x-q-ic::after { opacity: 0; }
.v4x-q-a { padding: 0 66px 20px 20px; }
.v4x-q-a p { max-width: 60ch; font-size: 15px; line-height: 1.6; color: #3D3D3C; }

/* ---- 12. The sheet: several products at once ------------------------------- */
.v4x-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.v4x-sheet-head { font-size: 13px; font-weight: 500; line-height: 1.5; color: #3D3D3C; }
.v4x-sheet-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v4x-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 12px; border: 1px solid #E6E4E1; border-radius: 16px; background-color: #FFFFFF;
}
.v4x-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 16px; background-color: #F6F5F4; }
.v4x-tile.v4x-r11 { aspect-ratio: 1 / 1; }
.v4x-row-arrow { display: block; width: 40px; height: auto; color: #121212; justify-self: center; }
/* The label chip on a photo: white, no border, 12px/500, 24px high (4b). */
.v4x-label {
    position: absolute; left: 8px; top: 8px; z-index: 2; height: 24px; padding: 0 10px; border-radius: 9999px;
    background-color: #FFFFFF; color: #121212; font-size: 12px; font-weight: 500; line-height: 24px; white-space: nowrap;
}

/* ---- 13. One ad in three sizes --------------------------------------------- */
/* Sized from the panel (cqw = 1% of its width), so the three frames fill it.
   At section size the frames set the height; in a card picture the panel
   keeps the 16:10 box. */
.v4x-sizes {
    container-type: inline-size; display: flex; align-items: center; justify-content: center; gap: 4%;
    padding: 6% 0;
}
.v4x-pic .v4x-sizes { aspect-ratio: 16 / 10; padding: 0; }
.v4x-size { display: flex; flex: none; flex-direction: column; align-items: center; gap: 8px; }
.v4x-size-frame { overflow: hidden; box-sizing: border-box; padding: 3px; border-radius: 10px; border: 1px solid #D7D4CF; background-color: #FFFFFF; }
html body .v4x-size-frame img { border-radius: 7px; }
.v4x-size-story .v4x-size-frame { width: 24cqw; aspect-ratio: 9 / 16; }
.v4x-size-square .v4x-size-frame { width: 27cqw; aspect-ratio: 1 / 1; }
.v4x-size-wide .v4x-size-frame { width: 36cqw; aspect-ratio: 16 / 9; }
.v4x-size-l { font-size: 12px; font-weight: 500; line-height: 1.5; color: #6F6D6A; white-space: nowrap; }

/* ---- 14. The card-size composed thumbnail (6.11 positions, body-agnostic) --- */
/* A tile's tilt is the `rotate` property, not `transform`: soft-studio.css
   sets `[class*="tile"]:hover { transform: none !important }` on the trio
   chain, which straightened every tilted tile under the pointer; the
   individual property is untouched by it. The mixins write their inline tilt
   the same way. */
.v4x-thumb { width: 100%; }
.v4x-thumb .v4-thumb-arrow { top: 40%; left: 29%; width: 12%; }
.v4x-thumb-in { top: 24%; left: 5%; height: 52%; width: 22%; z-index: 4; }
.v4x-thumb--two .v4x-thumb-in-1 { top: 16%; left: 4%; }
.v4x-thumb--two .v4x-thumb-in-2 { top: 34%; left: 12%; z-index: 5; }
.v4x-thumb--two .v4-thumb-arrow { left: 37%; width: 11%; }
.v4x-thumb--fan .v4x-thumb-out-1 { top: 17%; left: 43%; height: 62%; width: 24%; z-index: 1; rotate: -7deg; }
.v4x-thumb--fan .v4x-thumb-out-2 { top: 13%; left: 57%; height: 68%; width: 25%; z-index: 2; rotate: 2deg; }
.v4x-thumb--fan .v4x-thumb-out-3 { top: 21%; left: 71%; height: 58%; width: 22%; z-index: 3; rotate: 8deg; }
.v4x-thumb--stack .v4x-thumb-out-1 { top: 10%; left: 46%; height: 58%; width: 28%; z-index: 1; rotate: -5deg; }
.v4x-thumb--stack .v4x-thumb-out-2 { top: 20%; left: 56%; height: 62%; width: 30%; z-index: 2; rotate: 2deg; }
.v4x-thumb--stack .v4x-thumb-out-3 { top: 30%; left: 68%; height: 54%; width: 26%; z-index: 3; rotate: 8deg; }
.v4x-thumb--grid .v4x-thumb-out { height: 35%; width: 20%; }
.v4x-thumb--grid .v4x-thumb-out-1 { top: 13%; left: 51%; }
.v4x-thumb--grid .v4x-thumb-out-2 { top: 13%; left: 73%; }
.v4x-thumb--grid .v4x-thumb-out-3 { top: 52%; left: 51%; }
.v4x-thumb--grid .v4x-thumb-out-4 { top: 52%; left: 73%; }
.v4x-thumb--noin.v4x-thumb--fan .v4x-thumb-out-1 { left: 18%; }
.v4x-thumb--noin.v4x-thumb--fan .v4x-thumb-out-2 { left: 38%; }
.v4x-thumb--noin.v4x-thumb--fan .v4x-thumb-out-3 { left: 58%; }
.v4x-thumb--noin.v4x-thumb--grid .v4x-thumb-out-1, .v4x-thumb--noin.v4x-thumb--grid .v4x-thumb-out-3 { left: 28%; }
.v4x-thumb--noin.v4x-thumb--grid .v4x-thumb-out-2, .v4x-thumb--noin.v4x-thumb--grid .v4x-thumb-out-4 { left: 51%; }
/* The phone body: black in both themes, an object in the picture, not a surface. */
.v4x-phone {
    position: absolute; top: 8%; left: 52%; height: 84%; width: 26%; z-index: 3; box-sizing: border-box;
    padding: 3px; border-radius: 12px; background-color: #000000; box-shadow: 0 2px 10px rgba(18, 18, 18, 0.10);
}
html body .v4x-phone img { border-radius: 9px; }
.v4x-thumb-video {
    position: absolute; top: 20%; left: 52%; height: 56%; width: 44%; z-index: 3; box-sizing: border-box;
    padding: 3px; border-radius: 10px; background-color: #FFFFFF; box-shadow: 0 2px 10px rgba(18, 18, 18, 0.10);
}
html body .v4x-thumb-video img { border-radius: 7px; }

/* ---- 15. Breakpoints ------------------------------------------------------- */
@media (max-width: 1024px) {
    .v4x-map { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .v4x-map--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .v4x-xf-paper, .v4x-video-paper { grid-template-columns: minmax(0, 2fr) 40px minmax(0, 10fr); }
    .v4x-tree-paper { grid-template-columns: minmax(0, 2fr) 48px minmax(0, 10fr); }
    .v4x-arrow { width: 40px; }
    .v4x-six { grid-template-columns: minmax(0, 1fr); }
    .v4x-segment { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .v4x-segment-text { padding: 20px 16px 16px; }
    .v4x-faq--side { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .v4x-faq-side { position: static; }
    a.v4x-talk { max-width: none; }
    .v4x-sheet-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .v4x-three { grid-template-columns: minmax(0, 1fr); }
    .v4x-in { max-width: 220px; }
    .v4x-capture-paper--pair { grid-template-columns: minmax(0, 1fr); }
    .v4x-capture-paper .v4x-video-frame { width: 160px; }
}
@media (max-width: 560px) {
    /* One column: the input at 40% width centred, the arrow turned down, the
       grid three wide, nothing wider than the panel. */
    .v4x-xf-paper, .v4x-scenes-paper, .v4x-video-paper, .v4x-person-paper, .v4x-tree-paper {
        grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px;
    }
    .v4x-in { max-width: 40%; }
    .v4x-in-col--sm .v4x-in, .v4x-in-group .v4x-in { max-width: 40%; }
    .v4x-in-row .v4x-in { max-width: 30%; }
    .v4x-in-col > .v4x-in + .v4x-in { margin-top: -18%; }
    .v4x-arrow { width: 24px; transform: rotate(90deg); }
    .v4x-arrow-col { gap: 6px; }
    .v4x-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v4x-grid { gap: 6px; }
    .v4x-cell, .v4x-tile { border-radius: 10px; }
    .v4x-cell--solo { max-width: 70%; }
    .v4x-scenes-track { width: 100%; }
    .v4x-tree-links { align-self: auto; min-height: 0; }
    .v4x-tree-svg { display: none; }
    .v4x-tree-arrow { display: block; }
    .v4x-tree-out { gap: 12px; }
    .v4x-frame { border-radius: 16px; }
    .v4x-frame .v4x-grid--2 { max-width: none; }
    .v4x-frame--pair { align-self: auto; width: auto; }
    .v4x-video-frame { max-width: 60%; }
    .v4x-capture-paper { padding: 12px; }
    .v4x-map { grid-template-columns: minmax(0, 1fr) !important; }
    .v4x-map--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v4x-map { gap: 12px; }
    html body .v4-card.v4x-map-tile--text { padding: 14px 16px; }
    html body .v4-card.v4x-sheet { padding: 12px; }
    .v4x-sheet-top { margin-bottom: 12px; }
    .v4x-sheet-rows { gap: 12px; }
    .v4x-row { grid-template-columns: minmax(0, 1.2fr) 20px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; }
    .v4x-row-arrow { width: 20px; }
    .v4x-label { left: 4px; top: 4px; height: 20px; padding: 0 6px; font-size: 10px; line-height: 20px; letter-spacing: -0.01em; }
    .v4x-q-s { padding: 14px 16px; }
    .v4x-q-a { padding: 0 16px 16px; }
    .v4x-size-l { font-size: 11px; }
    .v4x-swatches { gap: 8px 14px; padding: 10px 8px 2px; }
    .v4x-ph { padding: 12px; gap: 4px; }
    .v4x-ph-text { font-size: 12px; }
    /* A card-size panel on a phone stacks like the section-size one: the 16:10
       lock goes, the rows size the panel. */
    .v4x-pic--panel { aspect-ratio: auto; }
    .v4x-pic--panel > .v4x-paper { height: auto; grid-template-rows: auto; align-items: center; padding: 10px; gap: 8px; }
    .v4x-pic--panel .v4x-out, .v4x-pic--panel .v4x-video-out, .v4x-pic--panel .v4x-tree-out, .v4x-pic--panel .v4x-mount { height: auto; }
    .v4x-pic--panel .v4x-grid { height: auto; grid-auto-rows: auto; }
    .v4x-pic--panel .v4x-cell { height: auto; aspect-ratio: 4 / 5; }
    .v4x-pic--panel .v4x-r11 > .v4x-cell { aspect-ratio: 1 / 1; }
    .v4x-pic--panel .v4x-r169 > .v4x-cell { aspect-ratio: 16 / 9; }
    .v4x-pic--panel .v4x-cell--solo { height: auto; width: 70%; }
    .v4x-pic--panel .v4x-video-frame { height: auto; width: 60%; }
    .v4x-pic--panel .v4x-ph { height: auto; }
    .v4x-pic--swatches > .v4x-swatches-wrap { display: flex; flex-direction: column; height: auto; }
    .v4x-pic--swatches .v4x-swatches-paper { height: auto; grid-template-rows: auto; align-items: center; padding: 10px 10px 4px; gap: 8px; }
    .v4x-pic--swatches .v4x-swatches { padding: 0 10px 10px; }
    .v4x-pic--panel .v4x-in, .v4x-pic--panel .v4x-in-group .v4x-in, .v4x-pic--panel .v4x-in-col--sm .v4x-in { max-width: 40%; }
    .v4x-pic--panel .v4x-in-row .v4x-in { max-width: 30%; }
    .v4x-pic--panel .v4x-xf-paper, .v4x-pic--panel .v4x-scenes-paper, .v4x-pic--panel .v4x-video-paper, .v4x-pic--panel .v4x-person-paper, .v4x-pic--panel .v4x-capture-paper--pair { grid-template-columns: minmax(0, 1fr); }
    .v4x-pic--panel .v4x-arrow { width: 20px; }
    .v4x-pic--panel .v4x-capture-paper .v4x-video-frame { width: 50%; }
    html body .v4x-pic--panel .v4x-mount img { height: auto; }
    .v4x-tabs { margin-bottom: 16px; }
    .v4x-segment-text { padding: 16px 12px 12px; }
    .v4x-card-body { padding: 14px 12px 10px; }
}

/* ---- 16. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .v4x-tab, .v4x-q, .v4x-q-ic, .v4x-q-ic::after, a.v4x-talk { transition: none; }
}

/* ---- 17. Product-page sections (the four spine pages) -----------------------
   Added 2026-09-18. Vytas on /workflows: "looks very white, very empty, and is
   missing a lot of things"; on the four features: "all four of these pages
   really just don't make sense". These classes carry the sections that answer
   both: the spine (where this feature sits among the other three), what you
   get (a real picture per row), the dense facts line, and the batch sheet.
   Markup: app/server/views/frontend/v4/_product_sections.pug. Data:
   config/v4/product-pages.js.
   --------------------------------------------------------------------------- */

/* The spine: four cards, the current one marked. */
html body .v4pp-spine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body .v4pp-spine > li { display: flex; }
html body .v4-card.v4pp-spine-card { flex: 1; padding: 8px; text-decoration: none; }
html body .v4pp-spine-pic { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; }
html body .v4pp-spine-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 16px; }
html body .v4pp-spine-body { padding: 16px 12px 8px; }
html body .v4pp-spine-body h3 { margin: 0 0 6px; }
html body .v4pp-spine-d { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #3D3D3C; }
html body .v4pp-spine-who { margin: 0; font-size: 13px; line-height: 1.4; color: #6F6D6A; }
/* You are here: the lime state the kit uses for "on", never a resting fill. */
html body .v4-card.v4pp-spine-card.is-here { border-color: #C9F2A0; background-color: #F2FFE3; }

/* What you get: two columns of picture rows. */
html body .v4pp-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body .v4-card.v4pp-inc-card { padding: 8px; }
/* One height for every row picture: the renders are 1:1, 4:5 and 16:9, and
   without a fixed box the cards in a row end at different heights, which is
   the ragged grid Vytas saw on the first cut. */
html body .v4pp-inc-pic { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; }
html body .v4pp-inc-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 16px; }
/* The cards in a row share a height, so the text sits on one baseline. */
html body .v4pp-inc > li { display: flex; }
html body .v4-card.v4pp-inc-card { flex: 1; }
html body .v4pp-inc-body { padding: 16px 12px 8px; }
html body .v4pp-inc-body h3 { margin: 0 0 6px; }
html body .v4pp-inc-d { margin: 0; font-size: 15px; line-height: 1.55; color: #3D3D3C; }

/* The facts line under a hero or a head. */
html body .v4pp-facts { display: flex; flex-wrap: wrap; gap: 32px; margin: 24px 0 0; padding: 0; list-style: none; }
html body .v4pp-facts > li { display: flex; flex-direction: column; gap: 2px; }
html body .v4pp-facts-n { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #121212; }
html body .v4pp-facts-l { font-size: 14px; line-height: 1.4; color: #6F6D6A; }

/* After you build it: three text cards with a link each. */
html body .v4pp-pub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body .v4-card.v4pp-pub-card { padding: 20px; gap: 8px; }
html body .v4-card.v4pp-pub-card h3 { margin: 0; }

/* The batch sheet, drawn as a table of real renders. */
html body .v4-card.v4pp-sheet-fig { padding: 8px; margin: 0; }
html body .v4pp-sheet { padding: 8px; border-radius: 16px; background-color: #F6F5F4; }
html body .v4pp-sheet-head,
html body .v4pp-sheet-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px 110px; gap: 16px; align-items: center; }
html body .v4pp-sheet-head { padding: 8px 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; color: #6F6D6A; }
html body .v4pp-sheet-row { padding: 8px 12px; border-top: 1px solid #E6E4E1; }
html body .v4pp-sheet-cell img { display: block; width: 96px; height: 96px; max-width: none; object-fit: cover; border-radius: 10px; border: 1px solid #E6E4E1; }
html body .v4pp-sheet-text { font-size: 14px; line-height: 1.5; color: #3D3D3C; }
html body .v4pp-state { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; border: 1px solid #E6E4E1; background-color: #FFFFFF; font-size: 12px; font-weight: 500; color: #3D3D3C; }
html body .v4pp-state--done { border-color: #C9F2A0; background-color: #F2FFE3; }

@media (max-width: 1023.98px) {
    html body .v4pp-spine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .v4pp-pub { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    html body .v4pp-inc { grid-template-columns: 1fr; }
    html body .v4pp-facts { gap: 20px; }
    html body .v4pp-facts-n { font-size: 26px; }
    html body .v4pp-sheet-head { display: none; }
    html body .v4pp-sheet-row { grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 10px; }
    html body .v4pp-sheet-cell img { width: 64px; height: 64px; }
    html body .v4pp-sheet-row > span:last-child { grid-column: 2 / -1; }
}
@media (max-width: 559.98px) {
    html body .v4pp-spine { grid-template-columns: 1fr; }
}

/* A product page runs many short sections, so 80px top AND bottom reads as the
   "very white, very empty" page Vytas rejected. 56px on both sides keeps the
   kit's rhythm without the hole; the hero and the close keep their own space. */
html body.v4-product-page .v4-section,
html body.v4p .v4-section { padding-block: 56px; }
html body.v4-product-page .v4-section.v4p-hero,
html body.v4p .v4-section.v4p-hero { padding-block: 48px 40px; }
@media (max-width: 767.98px) {
    html body.v4-product-page .v4-section,
    html body.v4p .v4-section { padding-block: 40px; }
}

/* ── 18 · Card figures hug their picture ─────────────────────────────────────
   Measured 2026-09-18 on /for/agencies: a six-card figure was a fixed 380px
   panel holding a single row of 4:5 tiles about 160px tall, so three of the
   four cards showed 110 to 130px of empty dotted paper above AND below the
   only thing worth looking at. That is the "very white, very empty" page.
   The panel now sizes to its content with a floor, so a card with a tall
   composition (a person, a stacked before-and-after) keeps its height and a
   card with one row of results stops pretending to be twice as tall. */
html body .v4x-six-card .v4x-pic--panel,
html body .v4x-outcome .v4x-pic--panel { aspect-ratio: auto; min-height: 200px; }
html body .v4x-six-card .v4x-pic--panel > .v4x-paper,
html body .v4x-outcome .v4x-pic--panel > .v4x-paper { height: auto; align-content: center; }

/* ---- 18. The product family, round 4 (2026-09-18) ---------------------------
   Vytas: the product pages "do not make sense" and the copy is "not aligned
   with the homepage". Three blocks changed shape to fix that, and they need
   classes of their own:
     .v4pp-segs   "Does that sound like you?" now shows BOTH buyers, the brand
                  team and the agency, the way the homepage does. One column
                  each, side by side.
     .v4pp-step   the three "How it works" cards carry a picture; they were a
                  bare list of text cards on every page in the family.
     .v4pp-map    "Everything you need, in one place" shows everything (minus
                  the page's own tile) as a dense index with a picture per row.
                  It was six text tiles, a different six per page, and the six
                  integrations never appeared at all.
   Markup: app/server/views/frontend/v4/_surface.pug and product_hub.pug.
   --------------------------------------------------------------------------- */

/* Both buyers, side by side. */
html body .v4pp-segs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body .v4pp-segs > li { display: flex; }
html body .v4-card.v4pp-seg { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
html body .v4-card.v4pp-seg h3 { margin: 0; }
html body .v4-card.v4pp-seg .v4x-p { margin: 0; max-width: 52ch; }

/* The three steps, each with the picture of what it makes. */
html body .v4-card.v4pp-step--pic { padding: 8px; }
html body .v4pp-step-pic { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; }
html body .v4pp-step-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 16px; }
html body .v4pp-step-body { padding: 16px 12px 8px; }
html body .v4pp-step-body h3 { margin: 6px 0; }
html body .v4pp-step-body p { margin: 0; font-size: 15px; line-height: 1.55; color: #3D3D3C; }

/* The one-place index: a small square picture, the noun, one line. */
html body .v4pp-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .v4pp-map--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .v4pp-map > li { display: flex; }
html body .v4-card.v4pp-map-tile { flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px; text-decoration: none; min-width: 0; }
html body .v4pp-map-pic { flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; }
html body .v4pp-map-pic img { display: block; width: 64px; height: 64px; max-width: none; object-fit: cover; border-radius: 12px; }
html body .v4pp-map-pic--icon { display: flex; align-items: center; justify-content: center; background-color: #F6F5F4; border: 1px solid #E6E4E1; color: #3D3D3C; }
html body .v4pp-map-body { min-width: 0; }
html body .v4pp-map-body h3 { margin: 0; }
html body .v4pp-map-body .v4x-map-line { margin: 2px 0 0; font-size: 13px; }

/* Publish it, share it: the same rows, now with a picture each. */
html body .v4-card.v4pp-pub-card--pic { padding: 8px; }
html body .v4pp-pub-card--pic .v4pp-pub-body { padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
html body .v4pp-pub-card--pic .v4pp-pub-body h3 { margin: 0; }

/* The steps reference: the table beside the picture of what that kind makes. */
html body .v4pp-cat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 16px; align-items: start; }
html body .v4pp-table-col { min-width: 0; }
html body .v4-card.v4pp-cat-fig { padding: 8px; margin: 0; }
html body .v4pp-cat-pic { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; }
html body .v4pp-cat-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 16px; }
html body .v4-card.v4pp-cat-fig .v4x-cap { padding: 12px 10px 6px; }

/* The hub's pillar-2 head sits directly above the first group. */
html body .v4-section.v4pp-groups-head { padding-block: 56px 0; }

@media (max-width: 1023.98px) {
    html body .v4pp-map, html body .v4pp-map--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .v4pp-cat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    html body .v4pp-segs { grid-template-columns: 1fr; }
    html body .v4pp-map, html body .v4pp-map--wide { grid-template-columns: 1fr; }
    html body .v4-card.v4pp-seg { padding: 20px; }
}

/* ── 19 · The house-tail segment picture ─────────────────────────────────────
   The shared segment block (_house_tail.pug, _gl_v4.pug glSegment, gvSegment)
   puts one square render beside the brand-team paragraph. The picture column
   is 7/12 of a 1268px card, so a 1:1 mount there ran to 740px tall and the card
   read as a poster with a caption (measured on /mcp/claude, 2026-09-19). The
   mount is capped so the card is about as tall as its text. */
html body .v4x-segment .v4x-seg-pic { max-width: 440px; margin: 0 0 0 auto; width: 100%; }
html body .v4x-segment .v4x-seg-pic .v4x-mount img { width: 100%; height: auto; }
@media (max-width: 900px) {
    html body .v4x-segment .v4x-seg-pic { max-width: 100%; margin: 0; }
}