/* marketing/reflow/base.css */ /* * marketing.telonic.ai web decks: the generic reflow layer (MK-4; ARCHITECTURE.md 4.4). Both deck families use it. * * Reflow mode is everything that is not stage mode: phones, tablets, touch screens, and small or zoomed windows. * Every slide becomes a full-width band in normal flow, re-laid by the generic rules below; the per-slide layout * modules (reflow/layouts/*.css, the full build) refine single slide types on top of this file and never edit it. * * Source file: build/shell.mjs bundles marketing/reflow/**\/*.css (this file first, then figures.css, then layouts/) * and replaces `@media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine)` with the complement of the registry's stage query (C2). A second copy of the bundle * follows under `@supports not (scale: tan(atan2(1px, 1px)))`, so a browser that cannot fit the stage gets reflow. * Everything here is inside `@media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine)` and `@media screen` (the reflow query alone also matches print, which has * no hover), so stage mode and print never see it: stage identity and the printed deck are unchanged. * * The slides set every style inline (style=""), so overriding declarations carry !important. Selectors key on the * DOM contract C1 (section.ds > .ds-frame > .slide-page > slide root) and on the inline style text, never on a slide * number. Nothing here applies inside [data-fig] figures (figures.css fits them whole) except where it says so. * * Colours: only the deck's own tokens and the runtime's --mk-* tokens (both from styles/tokens.css values); the * band gap is surface #F8F4F7 (plum-tinted). No text colour is changed, so every pairing stays as delivered. * Directions: logical properties only; [data-keep-ltr] islands and keep their own direction (the deck's global * QA rules apply in both modes); nothing is mirrored again. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* the reflow query also matches print (no hover on paper): print keeps the slides */ /* @type-scale:begin (generated by marketing/reflow/gen-type-scale.mjs from type-scale.json; do not edit) */ :root { --rs: 1; --fs-120: clamp(54px, 39.4921px + 4.2328vw, 72px); --fs-96: clamp(34px, 19.4921px + 4.2328vw, 52px); --fs-80: clamp(34px, 23.619px + 3.1746vw, 48px); --fs-72: clamp(32px, 23.6825px + 2.6455vw, 44px); --fs-64: clamp(28px, 19.6825px + 2.6455vw, 40px); --fs-56: clamp(27px, 20.746px + 2.1164vw, 37px); --fs-48: clamp(26px, 21.8095px + 1.5873vw, 34px); --fs-40: clamp(24px, 21.873px + 1.0582vw, 30px); --fs-36: clamp(24px, 21.873px + 1.0582vw, 30px); --fs-34: clamp(21px, 16.873px + 1.0582vw, 25px); --fs-32: clamp(21px, 16.873px + 1.0582vw, 25px); --fs-30: clamp(21px, 16.873px + 1.0582vw, 25px); --fs-28: clamp(19px, 17.9683px + 0.2646vw, 20px); --fs-26: clamp(19px, 17.9683px + 0.2646vw, 20px); --fs-24: clamp(17px, 15.9683px + 0.2646vw, 18px); --fs-22: clamp(16px, 14.9683px + 0.2646vw, 17px); --fs-21: clamp(16px, 14.9683px + 0.2646vw, 17px); --fs-20: clamp(16px, 14.9683px + 0.2646vw, 17px); --fs-18: clamp(15px, 13.9683px + 0.2646vw, 16px); --fs-17: clamp(14px, 12.9683px + 0.2646vw, 15px); --fs-16: clamp(13px, 11.9683px + 0.2646vw, 14px); --fs-15: 12px; --fs-14: 12px; --fs-13: 12px; --fs-12: 12px; --fs-11: 12px; --lh-heading: 1.12; --lh-subheading: 1.25; --lh-body: 1.5; } :root:is(:lang(ar), :lang(ur)) { --rs: 1.12; --lh-heading: 1.35; --lh-subheading: 1.5; --lh-body: 1.8; } :root:lang(zh) { --lh-heading: 1.25; --lh-subheading: 1.35; --lh-body: 1.6; } .slide-page [data-fs="120"]:not([data-fig] *) { font-size: calc(var(--fs-120) * var(--rs)) !important; } .slide-page [data-fs="96"]:not([data-fig] *) { font-size: calc(var(--fs-96) * var(--rs)) !important; } .slide-page [data-fs="80"]:not([data-fig] *) { font-size: calc(var(--fs-80) * var(--rs)) !important; } .slide-page [data-fs="72"]:not([data-fig] *) { font-size: calc(var(--fs-72) * var(--rs)) !important; } .slide-page [data-fs="64"]:not([data-fig] *) { font-size: calc(var(--fs-64) * var(--rs)) !important; } .slide-page [data-fs="56"]:not([data-fig] *) { font-size: calc(var(--fs-56) * var(--rs)) !important; } .slide-page [data-fs="48"]:not([data-fig] *) { font-size: calc(var(--fs-48) * var(--rs)) !important; } .slide-page [data-fs="40"]:not([data-fig] *) { font-size: calc(var(--fs-40) * var(--rs)) !important; } .slide-page [data-fs="36"]:not([data-fig] *) { font-size: calc(var(--fs-36) * var(--rs)) !important; } .slide-page [data-fs="34"]:not([data-fig] *) { font-size: calc(var(--fs-34) * var(--rs)) !important; } .slide-page [data-fs="32"]:not([data-fig] *) { font-size: calc(var(--fs-32) * var(--rs)) !important; } .slide-page [data-fs="30"]:not([data-fig] *) { font-size: calc(var(--fs-30) * var(--rs)) !important; } .slide-page [data-fs="28"]:not([data-fig] *) { font-size: calc(var(--fs-28) * var(--rs)) !important; } .slide-page [data-fs="26"]:not([data-fig] *) { font-size: calc(var(--fs-26) * var(--rs)) !important; } .slide-page [data-fs="24"]:not([data-fig] *) { font-size: calc(var(--fs-24) * var(--rs)) !important; } .slide-page [data-fs="22"]:not([data-fig] *) { font-size: calc(var(--fs-22) * var(--rs)) !important; } .slide-page [data-fs="21"]:not([data-fig] *) { font-size: calc(var(--fs-21) * var(--rs)) !important; } .slide-page [data-fs="20"]:not([data-fig] *) { font-size: calc(var(--fs-20) * var(--rs)) !important; } .slide-page [data-fs="18"]:not([data-fig] *) { font-size: calc(var(--fs-18) * var(--rs)) !important; } .slide-page [data-fs="17"]:not([data-fig] *) { font-size: calc(var(--fs-17) * var(--rs)) !important; } .slide-page [data-fs="16"]:not([data-fig] *) { font-size: calc(var(--fs-16) * var(--rs)) !important; } .slide-page [data-fs="15"]:not([data-fig] *) { font-size: calc(var(--fs-15) * var(--rs)) !important; } .slide-page [data-fs="14"]:not([data-fig] *) { font-size: calc(var(--fs-14) * var(--rs)) !important; } .slide-page [data-fs="13"]:not([data-fig] *) { font-size: calc(var(--fs-13) * var(--rs)) !important; } .slide-page [data-fs="12"]:not([data-fig] *) { font-size: calc(var(--fs-12) * var(--rs)) !important; } .slide-page [data-fs="11"]:not([data-fig] *) { font-size: calc(var(--fs-11) * var(--rs)) !important; } .slide-page :is([data-fs="36"], [data-fs="40"], [data-fs="48"], [data-fs="56"], [data-fs="64"], [data-fs="72"], [data-fs="80"], [data-fs="96"], [data-fs="120"]):not([data-fig] *) { line-height: var(--lh-heading) !important; } .slide-page :is([data-fs="30"], [data-fs="32"], [data-fs="34"]):not([data-fig] *) { line-height: var(--lh-subheading) !important; } .slide-page :is([data-fs="20"], [data-fs="21"], [data-fs="22"], [data-fs="24"], [data-fs="26"], [data-fs="28"]):not([data-fig] *) { line-height: var(--lh-body) !important; } /* @type-scale:end */ /* ------------------------------------------------------------------ page and band chrome ---------------- */ :root { --mk-r-pad-bs: 40px; /* band padding, block start */ --mk-r-pad-be: 48px; /* band padding, block end */ --mk-r-pad-i: 16px; /* band padding, inline */ --mk-r-gap: 24px; /* row gap of collapsed grids */ } html { scroll-snap-type: none; } body { background: var(--mk-surface); } .mk-deck { display: flex; flex-direction: column; row-gap: 8px; /* 8px surface gap between the bands */ margin: 0; padding: 0; background: var(--mk-surface); } /* overflow-x: clip keeps the page from scrolling sideways if anything is still wider than a band; the checker reports any text that this clips. */ .mk-deck > .ds { display: block; margin: 0; padding: 0; overflow-x: clip; } .ds > .ds-frame { width: auto; height: auto; overflow: visible; } .ds-frame > .slide-page { width: auto; height: auto; overflow: visible; transform: none; } /* The slide root (section, or a component root div): a band that keeps its tone (dark slides stay plum). */ .slide-page > * { width: auto !important; height: auto !important; min-height: 0 !important; max-width: none !important; overflow: visible !important; padding: var(--mk-r-pad-bs) var(--mk-r-pad-i) var(--mk-r-pad-be) !important; } /* Flex children sized for the 1080px canvas take their content height. */ .slide-page > * > *, .slide-page [data-main] > * { min-height: 0 !important; } /* Per-slide header: the wordmark and its divider are hidden (the bar carries the brand); the chapter overline stays. The per-slide footer (deck name, page number) is hidden. */ .slide-page > * > header { flex-wrap: wrap; gap: 8px 12px !important; padding-block-end: 12px !important; } .slide-page > * > header > img, .slide-page > * > header > [aria-hidden="true"] { display: none !important; } .slide-page > * > footer { display: none !important; } .slide-page [data-main] { padding-block: 24px 0 !important; } /* Cover and closing wordmarks: static, in flow (at the top of the cover, at the end of the closing slide). */ .slide-page > * > img[style*="position: absolute"] { position: static !important; order: -1; align-self: flex-start; width: auto !important; height: 28px !important; margin-block: 0 32px; } .slide-page > * > img[style*="position: absolute"][style*="bottom:"] { order: 99; margin-block: 40px 0; } /* Full-bleed decorative artwork behind a slide (closing slide): hidden. */ .slide-page > * > svg[aria-hidden="true"][style*="position: absolute"] { display: none !important; } /* ------------------------------------------------------------------ the generic layer ------------------- */ /* Absolutely positioned decorative spans (separators, rules, dots) outside figures and kept-LTR pictures. */ .slide-page span[aria-hidden="true"][style*="position: absolute"]:not([data-fig] *):not([data-keep-ltr] *) { display: none !important; } /* Line breaks: nowrap released outside figures (labels placed absolutely on a kept-LTR chart keep one line); a word (or a run the QA joined with no-break spaces) longer than the line breaks rather than overflowing. */ .slide-page [style*="white-space: nowrap"]:not([data-fig], [data-fig] *, [data-keep-ltr] [style*="position: absolute"]) { white-space: normal !important; } .slide-page > *, .slide-page :not([data-fig], [data-fig] *) { overflow-wrap: break-word !important; } .slide-page [data-fig] { overflow-wrap: normal !important; } /* figures wrap as on the slide */ /* Chinese: the decks' QA kept some lines whole for the 1920px measure (word-break: keep-all, overflow-wrap: anywhere); in a narrow column that forces breaks at arbitrary points (a line starting with 。). Reflow breaks CJK text between characters under the deck's own line-break: strict. */ :root:lang(zh) body .mk-deck .slide-page :not([data-fig], [data-fig] *) { word-break: normal !important; overflow-wrap: break-word !important; } /* Breaking between any two characters left one character (or a two-character word split in half, '打/造。') alone on the last line of a narrow Chinese heading; balanced lines keep the lines of a heading near equal. Headings and subheadings only (data-fs 30 and up); not where reflow keeps one line (figures, labels placed on kept-LTR charts). Browsers without text-wrap: balance wrap as before. */ :root:lang(zh) .slide-page :is([data-fs="30"], [data-fs="32"], [data-fs="34"], [data-fs="36"], [data-fs="40"], [data-fs="48"], [data-fs="56"], [data-fs="64"], [data-fs="72"], [data-fs="80"], [data-fs="96"], [data-fs="120"]):not([data-fig] *, [data-keep-ltr] [style*="position: absolute"]) { text-wrap: balance; } /* Narrow columns: automatic hyphenation for the Latin and Cyrillic translations (the browser's dictionary for the page language; elements the deck sets its own hyphens on keep them). */ :root:is(:lang(es), :lang(fr), :lang(ru)) .slide-page > * { hyphens: auto; } :root:is(:lang(es), :lang(fr), :lang(ru)) .slide-page [data-fig] { hyphens: manual; } /* Long words only. Chromium hyphenated every word of five letters or more, brand and place names included ('Goo-/gle Workspace', 'Ex-/change', 'Worksp-/ace', 'Sau-/dita'). Words under 11 letters keep whole (the longest brand name in the decks' text is 10: Salesforce, SharePoint, ServiceNow, Confluence, ElevenLabs, SiteMinder), with at least 4 letters on each side of the break, as the French product deck's own QA rule does (10 4 4). This also covers elements the deck hyphenates itself (the Russian decks, French product paragraphs); without !important, so a module's own limit wins. Every word under 11 letters fits its line, so no word is cut without a hyphen (es, fr, ru at 360-1023px). WebKit has no hyphenate-limit-chars: there Spanish and French are not hyphenated (no word needs it from 360px); Russian keeps the browser's hyphenation, which its long words need ('Удовлетворённость' in a 360px stat caption) and which split no Latin word in Chromium. */ :root:is(:lang(es), :lang(fr), :lang(ru)) .slide-page :not([data-fig], [data-fig] *) { hyphenate-limit-chars: 11 4 4; } @supports not (hyphenate-limit-chars: 11 4 4) { :root:is(:lang(es), :lang(fr)) .slide-page :not([data-fig], [data-fig] *) { -webkit-hyphens: manual; hyphens: manual; } } /* Fixed widths become limits; paragraphs keep a reading measure. */ .slide-page [style*="max-width"]:not([data-fig], [data-fig] *) { max-width: 100% !important; } .slide-page p:not([data-fig] *) { max-width: min(100%, 38em) !important; } .slide-page img:not([data-fig] *) { max-width: 100%; object-fit: contain; } .slide-page svg:not([data-fig] *) { max-width: 100%; } /* Canvas-height layouts: auto margins that pushed a block to the bottom of the 1080px slide become a gap. */ .slide-page [style*="margin-block-start: auto"]:not([data-fig] *) { margin-block-start: 32px !important; } .slide-page [style*="margin-block: auto"]:not([data-fig] *) { margin-block: 32px 0 !important; } /* A positioned canvas whose content is all absolutely positioned (a chart plot) had the height the 1080px slide left it; in flow it would collapse to nothing, so it gets a block size from its width. */ .slide-page [style*="position: relative"]:has(> [style*="position: absolute"]):not(:has(> :not([style*="position: absolute"]))):not([style*="; height:"]):not([data-fig], [data-fig] *, :has(> [data-fig])) { flex: none !important; min-height: 160px !important; aspect-ratio: 16 / 10; } /* Tags placed on a kept-LTR chart's plot (the '02:10 Outage' callout: left at the highlighted bar's centre and translateX(-50%)) fit the 1920px plot; in a phone column the plot is narrower than the slide's, and a tag centred on a bar near the plot's edge ran past the plot, its card and the band (cut at the screen edge on travel RU and AR). In reflow the tag stays inside its positioned plot: centred on the highlighted bar by anchor positioning (justify-self: anchor-center), which shifts it back inside the plot where centring would overflow; where anchor positioning is unsupported, or the plot has no highlighted bar, it is centred in the plot. Stage mode keeps the slide's own placement. */ .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *) > [style*="position: absolute"][style*="translateX(-50%)"]:not([aria-hidden="true"]) { left: 0 !important; right: 0 !important; margin-inline: auto !important; width: fit-content !important; max-width: 100% !important; transform: none !important; } @supports (anchor-name: --mk-mark) and (justify-self: anchor-center) { .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *) > [aria-hidden="true"] > [style*="background: var(--color-accent)"] { anchor-name: --mk-mark; } .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *):has(> [aria-hidden="true"] > [style*="background: var(--color-accent)"]) { anchor-scope: --mk-mark; } .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *):has(> [aria-hidden="true"] > [style*="background: var(--color-accent)"]) > [style*="position: absolute"][style*="translateX(-50%)"]:not([aria-hidden="true"]) { position-anchor: --mk-mark; left: auto !important; right: auto !important; margin-inline: 0 !important; justify-self: anchor-center; } } /* Flex rows. A row of items that cannot shrink (tags, chips, logos, tabs, label and value) wraps instead of running past the edge; a row with a child meant to shrink (an icon beside its text: min-width 0, or flex 1) keeps one line. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):not(:has(> [style*="min-width: 0"], > [style*="flex: 1 "], > [aria-hidden="true"]:first-child + :last-child, > :first-child + :is(h2, h3, h4):last-child, > [style*="flex: 0 0 auto"][style*="width:"]:first-child + :last-child)):not([data-fig] *) { flex-wrap: wrap !important; } /* A marker (bullet, dot, rule) or a number beside one text or heading keeps its line; the text shrinks and wraps beside it. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]) > :is([aria-hidden="true"]:first-child + :last-child, :first-child + :is(h2, h3, h4):last-child, [style*="flex: 0 0 auto"][style*="width:"]:first-child + :last-child):not([data-fig] *) { min-width: 0 !important; flex-shrink: 1 !important; } /* A fixed-height row that clips (a card's tag strip) grows with its wrapped content. */ .slide-page [style*="display: flex"][style*="overflow: hidden"]:not([style*="flex-direction: column"]):not([data-fig] *) { height: auto !important; padding-block: 14px !important; } /* A band stretched to share the canvas height (flex 1) with only inline padding gets block padding of its own. */ .slide-page [style*="flex: 1 1 0%"][style*="padding-inline:"]:not([style*="padding-block"], [style*="padding:"]):not([data-fig] *) { padding-block: 20px !important; } /* A fixed-height box that clips (the mock-UI top of a card) grows with its content. */ .slide-page div[style*="; height:"][style*="overflow: hidden"]:not([aria-hidden="true"]):not([data-fig], [data-fig] *) { height: auto !important; } /* Fixed-height chips grow if their text wraps. */ .slide-page [style*="display: inline-flex"][style*="; height:"]:not([data-fig] *) { height: auto !important; min-height: 28px; padding-block: 4px !important; } /* Bar charts drawn as a row of equal flex bars (eight or more) keep their bars visible: narrower gaps. */ .slide-page [data-keep-ltr] [style*="display: flex"]:has(> [style*="flex: 1 1 0px"]:nth-child(8)):not([data-fig] *) { column-gap: 2px !important; } /* Proportional rows (every child flex-basis 0: a lifecycle line of phases) stack on phones. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):has(> :nth-child(2)):not(:has(> :not([style*=" 1 0px"], [style*=" 1 0%"]))):not([data-fig] *, [data-keep-ltr] *) { flex-direction: column !important; row-gap: var(--mk-r-gap) !important; } /* Grids. Reflowed grids (12 columns, equal columns, asymmetric splits, label columns, tracks of max-content, subgrids) lose their row and area templates, and their items' placement. Grids with small fixed tracks (a 40px number column) keep their columns and their items' placement. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"], [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 261px"], [style*="subgrid"], [style*="grid-template-areas"]):not([data-fig], [data-fig] *) { grid-template-rows: none !important; grid-template-areas: none !important; } .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"], [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 261px"], [style*="subgrid"], [style*="grid-template-areas"]):not([data-fig], [data-fig] *) > * { grid-area: auto !important; } /* Connector rules laid across a grid's tracks (decorative items placed on the grid) are hidden with the layout. A decorative illustration that holds text (product slide 3's sample collage, aria-hidden as a whole) is not a connector and stays. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) > [aria-hidden="true"]:is([style*="grid-area"], [style*="grid-column"]):not(:has([data-tid])) { display: none !important; } /* 12-column grids and asymmetric splits: one column. */ .slide-page :is([style*="grid-template-columns: repeat(12,"], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) { grid-template-columns: minmax(0, 1fr) !important; } /* Equal-column (card) grids: one column on phones, two from 600px; in kept-LTR pictures of UI (a console's tiles), two on phones and three from 600px. */ .slide-page [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):not([data-fig], [data-fig] *) { grid-template-columns: minmax(0, 1fr) !important; } .slide-page [data-keep-ltr] [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Logo walls (8 columns): as many 120px columns as fit (a logo and its name side by side). */ .slide-page [style*="grid-template-columns: repeat(8, minmax(0px, 1fr))"]:not([data-fig], [data-fig] *) { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; } /* Arabic-script pages set the names 1.12 times larger (--rs), in the Latin of IBM Plex Sans Arabic, which is wider: the longest name ('Booking.com', 96px beside its 28px logo and 10px gap) needs 134px; 140px columns. */ :root:is(:lang(ar), :lang(ur)) .slide-page [style*="grid-template-columns: repeat(8, minmax(0px, 1fr))"]:not([data-fig], [data-fig] *) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; } /* Tracks of max-content (a flow of tags, two to four across): two shrinkable columns. */ .slide-page :is([style*="grid-template-columns: repeat(4, max-content)"], [style*="grid-template-columns: repeat(2, max-content)"]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, max-content)) !important; column-gap: 16px !important; } /* Label columns of rows (channel name | description): stacked on phones. */ .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):not([data-fig], [data-fig] *) { grid-template-columns: minmax(0, 1fr) !important; } /* Data rows with a wide label track (label | bar | value | change), and label | bar rows: the label track shrinks. */ .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr) 56px 64px"], [style*="grid-template-columns: max-content minmax(48px, 1fr) 44px 48px"]):not([data-fig], [data-fig] *) { grid-template-columns: fit-content(45%) minmax(40px, 1fr) auto auto !important; } .slide-page [style*="grid-template-columns: max-content minmax(0px, 1fr)"]:not([data-fig], [data-fig] *) { grid-template-columns: fit-content(50%) minmax(0, 1fr) !important; } /* Reflowed grids that only set a column gap get a row gap. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"], [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 261px"]):not([style*="row-gap"], [style*="; gap:"], [style^="gap:"]):not([data-fig], [data-fig] *) { row-gap: var(--mk-r-gap) !important; } /* Separators between the columns of a reflowed grid, and the padding that kept text off them. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) > [style*="border-inline-start"] { border-inline-start: 0 !important; } .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) > [style*="border-inline-start"]:is([style*="padding-inline-start"], [style*="padding-inline:"]) { padding-inline-start: 0 !important; } /* Hint line breaks the decks' QA added for the 1920px measure (br[data-hint]) are hidden. The QA wrote them with no space around them, so the build (process.py) writes a plain space before each one where its neighbours need it and marks it data-hint="space"; hiding it then leaves the two words apart. Hints inside figures keep data-hint="" and stay (figures are drawn as on the slide). */ .slide-page br[data-hint="space"] { display: none; } /* ------------------------------------------------------------------ tablets and wider (600px and up) ----- */ @media (min-width: 600px) { :root { --mk-r-pad-bs: 56px; --mk-r-pad-be: 64px; --mk-r-pad-i: max(32px, calc((100% - 1120px) / 2)); --mk-r-gap: 32px; } .slide-page [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):not(:has([data-fig])):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .slide-page [data-keep-ltr] [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"], [style*="repeat(2,"]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Label columns of rows: a 180px label column, or the label's longest unbreakable run where that is wider (a heading such as 'Сайт и приложение.' at 25px: in a fixed 180px track overflow-wrap left its full stop alone on a line). Each row is its own grid, so their list becomes the grid and the rows its subgrids: every row of a list shares the one label column, and the descriptions stay aligned. The list's gap is the rows' own (20px or 32px). Where subgrid is unsupported each row keeps its own 180px column. */ .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):not([data-fig], [data-fig] *) { grid-template-columns: 180px minmax(0, 1fr) !important; grid-template-columns: subgrid !important; } .slide-page :has(> :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"])):not([data-fig], [data-fig] *) { display: grid !important; grid-template-columns: minmax(min-content, 180px) minmax(0, 1fr) !important; column-gap: 32px !important; } .slide-page :has(> :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"])[style*="column-gap: 20px"]):not([data-fig], [data-fig] *) { column-gap: 20px !important; } .slide-page :has(> :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"])):not([data-fig], [data-fig] *) > * { grid-column: 1 / -1 !important; } /* Card grids whose cards hold figures (steps with panels) stay one column until 1024px, so the figures stay large. */ @media (min-width: 1024px) { .slide-page [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):has([data-fig]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Proportional rows: two items to a line. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):has(> :nth-child(2)):not(:has(> :not([style*=" 1 0px"], [style*=" 1 0%"]))):not([data-fig] *, [data-keep-ltr] *) { flex-direction: row !important; flex-wrap: wrap !important; } .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):has(> :nth-child(2)):not(:has(> :not([style*=" 1 0px"], [style*=" 1 0%"]))):not([data-fig] *, [data-keep-ltr] *) > * { flex-basis: 40% !important; } } } } /* marketing/reflow/figures.css */ /* * marketing.telonic.ai web decks: figures in reflow mode, v1 (MK-4; ARCHITECTURE.md 4.4, "Figures"). * * A figure is a fixed-size canvas the pipeline marks [data-fig] with --fig-w / --fig-h (its canvas width and height; * C1). In v1 every figure keeps its internal layout and is fit-scaled to the width available to it: its parent becomes * an inline-size container and the figure gets zoom: min(1, 100cqw / --fig-w) (never enlarged). zoom changes the * layout box, so the band's height follows and nothing overlaps, in either direction. The type scale (base.css) never * applies inside a figure, so its labels keep their canvas proportions; where that leaves a label under 11px the slide * is cramped in v1 and is listed for the full build, whose per-slide modules (reflow/layouts/) re-lay those figures. * * Some figures carry text that runs past the figure box on the delivered slide (a translated label longer than its tag * or button). On the slide it lands on the panel around the figure; fitted to a phone column it would land past the * band's edge and be cut off. Those figures get --fig-ink-s / --fig-ink-e, the measured overhang at the inline start and * end in canvas px (type-scale.json "figInk", measured by gen-type-scale.mjs --measure and generated into the block * below): the figure is fitted with that overhang included and keeps it as margins, so the whole text stays in its * panel. Every other figure has no overhang and fits exactly as before. * * The zoom is static (no motion), like the stage fit (owner decision 8). Bundled after base.css by build/shell.mjs, * inside the reflow query only. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* the reflow query also matches print (no hover on paper): print keeps the slides */ /* The figure's parent: an inline-size container as wide as its column. */ .slide-page :has(> [data-fig]) { container-type: inline-size; min-width: 0; max-width: 100%; box-sizing: border-box; } .slide-page [data-fig] { flex-shrink: 0; margin-inline: var(--fig-ink-s, 0px) var(--fig-ink-e, 0px); zoom: min(1, tan(atan2(100cqw, var(--fig-w) + var(--fig-ink-s, 0px) + var(--fig-ink-e, 0px)))); } /* @fig-ink:begin (generated by marketing/reflow/gen-type-scale.mjs from type-scale.json; do not edit) */ :root[data-deck="banking"][lang="fr"] .slide-page [data-fig]:has([data-tid="s09-006"]) { --fig-ink-s: 0px; --fig-ink-e: 29px; } :root[data-deck="hospitality"][lang="fr"] .slide-page [data-fig]:has([data-tid="s11-013"]) { --fig-ink-s: 23px; --fig-ink-e: 23px; } :root[data-deck="product"][lang="es"] .slide-page [data-fig]:has([data-tid="s07-013"]) { --fig-ink-s: 26px; --fig-ink-e: 0px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s07-013"]) { --fig-ink-s: 24px; --fig-ink-e: 23px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s10-006"]) { --fig-ink-s: 0px; --fig-ink-e: 67px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s10-013"]) { --fig-ink-s: 0px; --fig-ink-e: 51px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s18-004"]) { --fig-ink-s: 19px; --fig-ink-e: 0px; } :root[data-deck="property"][lang="es"] .slide-page [data-fig]:has([data-tid="s09-006"]) { --fig-ink-s: 54px; --fig-ink-e: 0px; } :root[data-deck="property"][lang="fr"] .slide-page [data-fig]:has([data-tid="s09-006"]) { --fig-ink-s: 0px; --fig-ink-e: 33px; } /* @fig-ink:end */ /* A canvas positioned absolutely in its panel comes into flow, so the panel takes the canvas height; the zoom replaces the canvas's own fit transform. */ .slide-page [data-fig][style*="position: absolute"] { position: relative !important; inset: auto !important; transform: none !important; } /* Text set over a figure's panel (an "Illustrative" tag) goes into flow above the figure. */ .slide-page :has(> [data-fig]) > [style*="position: absolute"]:not([data-fig]):not([aria-hidden="true"]) { position: static !important; display: block; margin-block-end: 8px; text-align: end; } /* Several figures side by side (a row of badges) wrap onto as many rows as they need. */ .slide-page :has(> [data-fig] + [data-fig]) { flex-wrap: wrap !important; } } } /* marketing/reflow/layouts/any-hour.css */ /* * Reflow layout module any-hour (MK-6a; ARCHITECTURE.md 5.1): product slide 13 and industry slide 13, "Ready at any * hour, and ready for the rush." (the same skeleton in every deck; only the bar heights and the tag differ). * * Four text blocks in a 2 x 2 grid (a rule under the first row, a rule between the columns) beside a chart panel: title * and "Illustrative", a legend, and a plot kept left to right in every language (data-keep-ltr="chart"; 24 bars drawn as * percentage heights, gridlines, a tag on the highlighted bar, "Disruption" or "Launch") over a time axis. The generic * layer stacked the blocks with the slide's paddings and rules (uneven gaps and rules on phones, a 96px gap between the * rows on tablets), gave the plot a 16:10 box and kept the panel's 40px padding. * * Here: * - phones: the blocks stacked with even rules between them; the panel padded 20px; the plot full width at 4:3, so * the bars keep a real height (axis labels on the reflow scale, 13px and up); * - from a 600px screen: the blocks 2 x 2 with the slide's rules (one under the first row, one between the columns); * the panel padded 32px; the plot full width at 16:9. * The tag stays inside the plot (the generic layer centres it on its bar and keeps it within the plot). Parts are found * by structure: the blocks are the children of the two-column grid; the plot is the positioned box that fills its * panel (flex 1) inside the kept-LTR island, which is the plot itself on the product deck and the whole panel on the * industry decks; the panel is the plot's parent. No hooks. * * Specificity: the generic layer's selectors are long attribute chains, so every rule here carries :not(#mk-layout), an * id no element has, which lifts it to id-level specificity. Colours: the rules use the deck's border-decorative token, * as on the slide. Directions: logical properties only; the blocks follow the slide's direction (Arabic and Urdu * mirror), the plot and axis stay left to right (the decks' global QA rules). Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example RU 'су-/ток', 'пи-/ковой', ES 'pi-/cos', and single words were left on last lines, for example EN 'rush.', AR 'الطلب.', RU 'нагрузке.'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese titles made of two clauses (the first and the fourth block: '每个小时，每一天。', '关键时刻，有工作人员接手。'; industry '每时每刻，每一天。', '关键时刻，有人接手。'): lines break only after the full-width comma (MK-10, fix round 3: balanced, and free to break between any two characters, the product title split the word '工作', '关键时刻，有工 / 作人员接手。', in the 323px column at 768px). Each clause is one unbreakable run (word-break: keep-all), so the title keeps one line where it fits and otherwise breaks after the comma; overflow-wrap: normal, as the generic layer's break-word lets the balancing break inside a run to even the lines. The longest clause, '有工作人员接手。' (8em), fits every column from 320px up (186px of the 239px column at 600px). Not the second and third titles: they have no comma, and one run as long as '任何业务量下都保持一致。' (12em) would overflow the 600-700px columns. Wrapping only, the text unchanged. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :is(:first-child, :nth-child(4)) :is(h3, h3 *):lang(zh) { word-break: keep-all !important; overflow-wrap: normal !important; } /* Phones: the blocks stacked, a rule above each block after the first. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { row-gap: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 20px 0 !important; border-block-end: 0 !important; border-inline-start: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :not(:first-child) { border-block-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :last-child { padding-block-end: 0 !important; } /* The chart panel and its plot. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :has(> [style*="position: relative"][style*="flex: 1 1 0%"]) { padding: 20px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is([data-keep-ltr], [data-keep-ltr] *)[style*="position: relative"][style*="flex: 1 1 0%"] { flex: none !important; aspect-ratio: 4 / 3; min-height: 0 !important; margin-block-start: 24px !important; } @media (min-width: 600px) { /* The blocks 2 x 2 with the slide's rules: under the first row, between the columns. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { column-gap: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(-n+2) { padding-block-end: 28px !important; border-block-end: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(n+3) { padding-block-start: 28px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(odd) { padding-inline-end: 28px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(even) { padding-inline-start: 28px !important; border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :has(> [style*="position: relative"][style*="flex: 1 1 0%"]) { padding: 32px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is([data-keep-ltr], [data-keep-ltr] *)[style*="position: relative"][style*="flex: 1 1 0%"] { aspect-ratio: 16 / 9; margin-block-start: 32px !important; } } } } /* marketing/reflow/layouts/approach.css */ /* * Reflow layout module approach (MK-6b; ARCHITECTURE.md 5.1): product slide 4 and industry slide 4, "Our approach" * (dark, anchor #442C43). * * The slide: a 28px lead, then three pillars (Specialise, Centralise, Complete) on a three-column grid whose rows the * pillars share as subgrids (number, title, body, three bullets), divided by vertical hairlines (absolutely placed, * aria-hidden). Variants: the product deck's titles are 72 canvas px, the industry decks' 64px; product and property * pillars have a body paragraph (six rows), the other four industries do not (five rows); the industry decks add a * row of five stats under a hairline (a 56px figure in #F2A98C and a caption). * The generic layer stacks the pillars (two columns from 600px, so the third sat alone) and the stats (one column, * figures 27px). This module sets the ARCHITECTURE target: * - phones: pillars stacked (number, title 34px, body, bullets), the slide's hairlines turned into top borders * between pillars; the canvas gaps tightened (title 8px under the number, bullets 8px apart); the bullet squares * centred on the first line of their text at every type size; stats in two columns, figures 36px (35px at 360), * the fifth stat across both columns; * - 600px and up: pillars stacked (three 213px columns at 768 would split the longer translated titles); stats in * three plus two, figures rising to 44px; * - from 1000px (the 1023px reflow edge and 1024px touch screens): pillars in three columns sharing their rows again * (subgrid), the slide's hairlines between them, titles 36px (the longest title word, RU 'Специализация.', is * 262px there: a third of a 1000px band leaves 280px); stats five in a row. * Headings are not hyphenated and are balanced; wrapping only, the text unchanged. Parts are found by structure (the * three-column grid under the lead, the five-column grid of stats). No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: the slide's own * hairline colour (white at 20%, as its header and stats rules) for the borders between pillars; nothing else * changed (white and #F2A98C on the anchor, as delivered). Directions: logical properties only; pillars, bullets and * stats follow the slide's direction (Arabic and Urdu mirror). Stage mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { section.ds[data-layout="approach"]:not(#mk-layout) { --fs-72: clamp(33px, 27.81px + 1.5873vw, 40px); /* pillar titles (product): 34px at 390, 40px at 768 */ --fs-64: clamp(33px, 27.81px + 1.5873vw, 40px); /* pillar titles (industry): the same */ --fs-56: clamp(35px, 27.746px + 2.1164vw, 44px); /* stat figures: 36px at 390, 44px at 768 */ } /* The pillars' grid: one column, pillars under hairlines. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { margin-block: 32px 0 !important; row-gap: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * { padding-block: 28px !important; align-content: start; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :not(:first-child) { border-block-start: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Inside a pillar: title, body and bullets closer than on the canvas. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > h2 { margin-block-start: 8px !important; hyphens: manual !important; text-wrap: balance; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > p { margin-block-start: 12px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > div { margin-block-start: 8px !important; gap: 12px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > :is(h2, p) + div { margin-block-start: 20px !important; } /* Lead, bodies, bullets and stat captions: no word alone on a last line where a better break exists (EN 'Knows where each policyholder / is', FR 'Conçu pour les processus de / l’immobilier' in the three columns from 1000px). */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page :is(p, [data-fs="24"]) { text-wrap-style: pretty; } /* The bullet square (6px) centred on the first line of its text. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > div > [aria-hidden="true"]:first-child { margin-block-start: calc(var(--fs-24) * var(--rs) * var(--lh-body) / 2 - 3px) !important; } /* Product deck (no stats): nothing under the last pillar but the band's own padding. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:last-child > :last-child { padding-block-end: 0 !important; } /* The stats (industry decks): two columns under the slide's hairline, which sits as far below the last pillar's bullets (that pillar's own bottom padding) as the hairlines between the pillars. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] { margin-block-start: 0 !important; padding-block-start: 28px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 24px !important; } /* Captions: not hyphenated (short lists of names in narrow columns; the generic es/fr/ru hyphenation split FR 'What-/sApp' at 768px). Every word fits its column whole. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > * > p + p { margin-block-start: 8px !important; hyphens: manual !important; } /* Phones: the fifth stat across both columns, so its caption keeps the full measure instead of half of it. */ @media (max-width: 599.98px) { section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; } } @media (min-width: 600px) { section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; margin-block-start: 40px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * { padding-block: 32px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] { padding-block-start: 32px !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 32px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > * { grid-column: span 2 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > :nth-child(n + 4) { grid-column: span 3 !important; } } /* The 1023px edge: three pillars side by side on shared rows, as on the slide. */ @media (min-width: 1000px) { section.ds[data-layout="approach"]:not(#mk-layout) { --fs-72: 36px; --fs-64: 36px; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(6, auto) !important; column-gap: 48px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :nth-child(n) { grid-row: span 6 !important; grid-template-rows: subgrid !important; padding-block: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > p)) { grid-template-rows: repeat(5, auto) !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > p)) > :nth-child(n) { grid-row: span 5 !important; } /* The slide's hairline between pillars, centred in the 48px gap. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; inset-inline-start: -24px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] { margin-block-start: 40px !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > :nth-child(n) { grid-column: auto !important; } } } } /* marketing/reflow/layouts/channels.css */ /* * Reflow layout module channels (MK-6a; ARCHITECTURE.md 5.1): product slide 12 and industry slide 10, "Every channel, in * the languages your customer uses." (identical on the product and property decks; the industry decks have three panel * variants: a 7/5 split with a 261px label column, a 6/6 split with 220px, and a 5/7 split with 200px and a one-line * message). * * Five rows (channel name | description) beside a panel on the surface tone: the customer's message as a bubble (its * English and Arabic words locked as in English; kept left to right on the product deck, data-keep-ltr="message"), a * "Preference saved for next time" tag and a paragraph on languages. The generic layer already gives the target * layout (phones: name above description, panel after the rows; tablets: a shared 180px name column as a subgrid, * panel below). This module tunes the spacing: * - phones: the name sits 8px above its description (the generic collapsed-grid gap left 24px, so a name read as * the end of the row above), rows 16px apart from their rules; the panel's 40-48px padding becomes 20px (it took * a fifth of a phone's width), the paragraph 24px under the tag; * - from a 600px screen: the panel padded 32px. * Parts are found by structure: rows by their label-column template (200px, 220px or 261px), the panel by its surface * background. No hooks. * * Specificity: the generic layer's selectors are long attribute chains, so every rule here carries :not(#mk-layout), an * id no element has, which lifts it to id-level specificity. Colours: none changed. Directions: logical properties * only; rows follow the slide's direction (Arabic and Urdu mirror); the message keeps its direction (the decks' global * QA rules). Stage mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example ES 'idio-/mas', RU 'ваше-/го', and single words were left on last lines, for example EN 'uses.', AR 'عميلك.', ES 'compradores.'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]) { row-gap: 8px !important; padding-block: 16px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):first-child { padding-block-start: 0 !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] { padding: 20px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] > p:last-child { margin-block-start: 24px !important; } @media (min-width: 600px) { section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]) { padding-block: 20px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):first-child { padding-block-start: 0 !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] { padding: 32px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] > p:last-child { margin-block-start: 32px !important; } } } } /* marketing/reflow/layouts/complete.css */ /* * Reflow layout module complete (MK-6a; ARCHITECTURE.md 5.1): product slide 8 and industry slide 11, "The work after * the conversation, done every time." (identical skeletons in every deck and language). * * The slide is three numbered rows beside a 720x390 figure canvas ([data-fig], role="img" with its translated * aria-label): an accent chip "Conversation ends" over four tiles (summary, ticket or work order, follow-up, CRM), joined * by accent connector rules, and the closing line "All four, in 3 seconds." under them. The generic layer stacks the * rows and fits the whole canvas into the column (figures.css), which gave 6.9-8.2px tile labels at 360-390px. * * Here, where the figure's panel is narrower than 620px (phones, and tablets up to about 650px), the canvas is re-laid: * it leaves figures.css's fit (zoom 1) and becomes a grid in flow: the chip as a header bar across the top, the four * tiles as cards in one column (two from a 448px column, about a 480px screen), the connectors hidden, the closing line * under them. Its text takes the reflow type scale (tile titles as body text, labels 13px and up, x1.12 in Arabic * script). From 620px up the figure keeps its fit-scale, which leaves its smallest label at 12px or more (588 / 720 x 16 * = 13.1px; 12.3px for hospitality FR, whose tiles run 46 canvas px past the canvas). The panel gets 16px of padding in * both cases: in the re-lay it frames the grid, in the fit it takes the 16 canvas px by which the ES, FR and RU tiles * (widened by the decks' QA) run past the canvas on each side, so they stay on the panel as on the slide. * * The canvas parts are found by structure (the same in every language): the first child holds the chip, the tiles are * the children holding two text units, the connectors hold none, the closing line is the

. The figure keeps * role="img" and its aria-label. No hooks. * * Specificity: the industry decks' QA geometry for this canvas (widths, tops, heights, negative margins, set with * !important on class-level selectors) applies in both modes, and the generic layer's selectors are long attribute * chains, so every rule here carries :not(#mk-layout), an id no element has, which lifts it to id-level specificity. Colours: none changed (the chip keeps white on the accent, as * delivered). Directions: logical properties only; the grid follows the slide's direction (Arabic and Urdu mirror). * Stage mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example ES 'con-/versación', RU 'вы-/полняется', FR 'conver-/sation', 'conversa-/tion', and single words were left on last lines, for example EN 'time.', AR 'طويلة.', UR 'مکمل۔'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese h2: lines break only after its full-width comma (MK-10, fix round 3: balanced, and free to break between any two characters, the industry heading split the word '工作', '对话结束后的工 / 作，每次都完成。', at 360 and 390px in every industry deck). Each clause is one unbreakable run (word-break: keep-all), so the heading keeps one line where it fits and otherwise breaks after the comma; overflow-wrap: normal, as the generic layer's break-word lets the balancing break inside a run to even the lines (it still split '工作' with keep-all alone). The longest clause, '对话结束后的工作，' (9em), fits the h2 at every reflow width (263px of the 328px line at 360px, 253px of 288px at 320px). On the h2 and its span: the generic Chinese rule (word-break: normal, overflow-wrap: break-word) sets both on every element, so inheritance alone does not reach the span. Wrapping only, the text unchanged. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :is(h2, h2 *):lang(zh) { word-break: keep-all !important; overflow-wrap: normal !important; } /* The figure's panel (an inline-size container, figures.css): 16px of padding, so the fit-scale and the queries below use the 16px-inset width (588px for a 620px panel). */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :has(> [data-fig]) { padding: 16px !important; } @container (width >= 588px) { section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] { margin-block: 8px !important; } } @container (width < 588px) { /* The canvas: out of the fit-scale, a grid in flow as wide as its panel. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules: hidden with the canvas geometry they joined. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:not(:has([data-tid])) { display: none !important; } /* The chip: a header bar across the grid, its text wrapping if a translation needs two lines. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:first-child { grid-column: 1 / -1; display: flex !important; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:first-child > [data-tid] { flex: 1 1 auto; justify-content: center; height: auto !important; min-height: 40px; padding: 8px 16px !important; white-space: normal !important; text-align: center; } /* Tiles: cards with their delivered border, ground and radius; title above its label. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:has(> [data-tid] + [data-tid]) { justify-content: flex-start !important; gap: 4px !important; padding: 14px 16px !important; } /* The closing line under the tiles. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > p { grid-column: 1 / -1; margin-block-start: 4px !important; text-align: center; } /* Text on the reflow type scale (the canvas sizes are for the 1920px slide; the type scale skips figures). */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] [data-fs="24"] { font-size: calc(var(--fs-24) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } } /* Two tiles to a row from a 448px panel (a 480px screen). */ @container (416px <= width < 588px) { section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } } /* marketing/reflow/layouts/hosting.css */ /* * Reflow layout module hosting (MK-6b; ARCHITECTURE.md 5.1): product slide 19 and industry slide 16, "Hosting and data" * ("Hosted where your organisation needs it"; one skeleton in every deck and language). * * The slide: heading and intro, then a 6/6 split: on the inline-start side a surface panel holding four option cards * in a 2x2 grid (UAE region, Saudi Arabia region, your own cloud, on your premises) with a footnote under it (the * documentation line); on the inline-end side three text blocks under hairlines (choose the region, keep it in-house, * decide what is kept). The generic layer stacks it all in source order, so the footnote landed between the cards and * the texts. This module sets the ARCHITECTURE target: * - phones: the four cards in one column (2x2 from a 480px screen) inside the panel, whose 40px padding becomes 16px; * then the three text blocks; the footnote last (the left column becomes display: contents, so the panel, the * text column and the footnote are items of one grid, and the footnote is shown after the texts with order; the * DOM, and so the reading order, is unchanged: the one-line note follows the panel, as on the slide); * - from 600px: the same order, cards 2x2 above the texts (the 6/6 split of the slide would leave each card about * 120-150px for its text even at the 1023px edge, so the translated card texts broke on every second word); * - from 1000px (the 1023px reflow edge and 1024px touch screens): the three text blocks side by side under the * cards, each under the slide's hairline. * The design's own line breaks inside the card texts (
in the English decks: 'Hosted and processed in / the UAE.') * stay. Headings are not hyphenated and are balanced; wrapping only, the text unchanged. No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed. * Directions: logical properties only; the grids follow the slide's direction (Arabic and Urdu mirror). Stage mode * never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The 6/6 split: one grid of panel, texts and footnote. */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] { margin-block-start: 32px !important; row-gap: 32px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :first-child { display: contents !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :first-child > p { order: 2; margin: 0 !important; text-wrap: pretty; /* no word alone on its second line (UR 'ہے۔' at 390px) */ } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child { order: 1; } /* Body text (card descriptions, the three texts): no word alone on a last line where a better break exists (ES 'Alojado y procesado en Arabia / Saudí.', RU 'Размещение и обработка в / ОАЭ.'). */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page p { text-wrap-style: pretty; } /* The panel and its four cards: one column on phones. */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] { padding: 16px !important; gap: 12px !important; grid-template-columns: minmax(0, 1fr) !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] > * { padding: 16px 20px !important; } /* The three text blocks: the slide's hairlines and 24px rhythm (20px on phones). */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div { padding-block: 20px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div:first-child { padding-block-start: 0 !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div:last-child { padding-block-end: 0 !important; } /* Headings: not hyphenated (the generic es/fr/ru hyphenation), balanced. */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page :is(h2, h3, h4) { hyphens: manual !important; text-wrap: balance; } /* 2x2 cards from a 480px screen. */ @media (min-width: 480px) { section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 600px) { section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] { margin-block-start: 40px !important; row-gap: 40px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] { padding: 24px !important; gap: 16px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] > * { padding: 20px 24px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div { padding-block: 24px !important; } } /* The 1023px edge and 1024px touch screens: the three text blocks side by side under the cards, each under a hairline (the slide's own rule between the blocks, here over all three so the row reads as one). */ @media (min-width: 1000px) { section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div:nth-child(n) { padding-block: 20px 0 !important; border-block-start: 1px solid var(--color-border-decorative) !important; } } } } /* marketing/reflow/layouts/i-agents.css */ /* * Reflow layout module i-agents (MK-6e; ARCHITECTURE.md 5.3): industry slide 8, the agents ("Specialists, not * generalists"), in all five industries and seven languages. * * The slide is the h2 and intro (10 of 12 columns), then a bento of 4 agent cards on a 3-column grid with 2 rows * (areas "c1 c2 c4" / "c1 c3 c4"): service (accent), changes and bookings (secondary accent), cases (anchor), outreach * (text-body dark). Each card is a title, a body and a mini-card (a sample record: dot and title, a muted line, a tag); * in c1 and c4 the mini-card is pushed to the card's foot by an auto margin, in c2 and c3 it sits beside the body on a * 2-column grid. Two variants: property and travel use 1 : 1.4 : 1 and 1.15 : 1; banking, hospitality and insurance * 1 : 1.7 : 1 and 1.3 : 1 (the same structure, so one rule set). The generic layer stacks the cards in one column at * every reflow width, with the auto margin turned into 32px on top of the 24px padding (56px above c1's and c4's * mini-cards against 24px in c2 and c3). * * Phones (below 720px): the 4 cards stacked, heights auto, each mini-card under its text 24px below (all four alike), * card padding 24px 20px. * Tablets (720px and up): 2 x 2 in reading order (service, changes and bookings / cases, outreach), the cards of a row * the same height with every mini-card at the card's foot; titles 26px at 720px rising to 30px at 1023px (the generic 36px role * gives 30px at 768, large in a half-width card). * * Colours: none changed (each card keeps its own ground and text, as delivered: white on the accent, the anchor and * text-body; text-body on the secondary accent). Directions: logical properties only (Arabic and Urdu mirror). No * hooks. Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] { gap: 16px !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article { padding: 24px 20px !important; } /* c1 and c4: the mini-card's wrapper, 24px under the body (its own padding), no extra auto-margin gap. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="margin-block-start: auto"] { margin-block-start: 0 !important; } /* c2 and c3: body and mini-card stacked, 24px apart, the mini-card as wide as the card (as in c1 and c4). */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="grid-template-columns"] { display: flex !important; flex-direction: column; align-items: stretch !important; row-gap: 24px !important; } /* The h2 and the card titles: balanced lines, so no short word sits alone on a last line ('agent.', Urdu 'ایجنٹ۔'; the deck balances its other display headings itself). Wrapping only. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] :is(h2, h3) { text-wrap: balance; } @media (min-width: 720px) { section.ds[data-layout="i-agents"]:not(#mk-layout) { --fs-36: clamp(26px, 16.495px + 1.3201vw, 30px); /* card titles: 26px at 720, 30px at 1023 */ } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-items: stretch !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article { padding: 24px !important; } /* Every mini-card at the card's foot. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="margin-block-start: auto"] { margin-block-start: auto !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="grid-template-columns"] { flex: 1 1 auto !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="grid-template-columns"] > :last-child { margin-block-start: auto !important; } } /* Display headings are not hyphenated: the h2 and card titles (RU 'измене-/ниям', 'исходя-/щим') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-context.css */ /* * Reflow layout module i-context (MK-6e; ARCHITECTURE.md 5.3): industry slide 2, the context ("Property relationships * outlast the systems built to manage them."), in all five industries and seven languages. * * The slide is the h2, the lifecycle line (the "Lifecycle Line" component: a row of 4 or 5 phases, flex 3 : 1.6 : 2 : * ..., each a muted overline above a row of 1 to 3 stages, each stage an accent dot over its label, the dots on a 1px * rule drawn by an absolutely placed span), the lead, and 3 outcome cards with top rules. Phases per industry: property * 4, banking 5, hospitality 5, insurance 5, travel 4. The generic layer stacks the phases (proportional row) but hides * the rule spans with the other absolute decoration, so the dots floated without their line, and on tablets it gave the * phases unequal widths (their flex-grow) and the cards 2 columns with the third alone. * * Phones: phases stacked, each overline above its stages as a row of dots on the delivered rule (the rule span shown * again; the row may wrap; a probe at 360px found no row that wraps in any of the 35 pages: the longest, travel RU, is * 267px of a 328px line). Cards stacked with their top rules. * Tablets (600px and up): phases two to a line at equal widths (2 x 2 for 4 phases; 2 + 2 + 1 for 5, the last at half * width). Cards in 3 columns from 720px (one column from 600 to 719px, where three would leave about 150px each). * * Specificity: :not(#mk-layout) lifts every rule above the generic layer and any class-level QA rule. Colours: deck * tokens only (the rule keeps --color-border-control). Directions: logical properties only; the rows follow the slide's * direction (Arabic and Urdu mirror). No hooks. Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The stage rows' rule (absolute, across the row at the dots' centre): shown again. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host [style*="justify-content: space-between"] > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; } /* Dots paint above the rule. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host [style*="justify-content: space-between"] > div > span[aria-hidden="true"]:first-child { position: relative; } section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host [style*="justify-content: space-between"] { row-gap: 16px !important; column-gap: 16px !important; } /* The outcome cards: one column below 720px. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px !important; } /* Card titles: balanced lines (no word alone on a last line, as Urdu 'ہے۔' at 1023px). */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] h3 { text-wrap: balance; } @media (min-width: 600px) { /* Phases two to a line, equal widths. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host > div > div { flex: 0 1 calc(50% - 24px) !important; min-width: 0; } section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host > div { row-gap: 32px !important; } } @media (min-width: 720px) { section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } } /* Display headings are not hyphenated: the h2 and card titles (FR 'sys-/tèmes', RU 'мо-/жет') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page :is(h1, h2, h3) { hyphens: manual !important; } /* Chinese h2: lines break between words, never inside one. Chinese has no spaces, so the browser may break between any two characters, and balanced lines put the break near the middle, inside a word in every Chinese deck (property '搭|建', banking '超|出', hospitality '品|牌', insurance '承|载' and '系|统', travel '系|统' and '任|何', 360-1023px; the stage render has none). Each deck gets a line plan, checked word by word (Intl.Segmenter): - keep-all (tablets in every deck, phones in banking and hospitality): lines break only after the punctuation (，。) and stay balanced; the size is capped so the longest run between two marks fits the line, as base.css's runFit does for no-break runs: banking and hospitality 12 characters (27px at 360, 29.5px at 390, the role size from 400px), travel 13 (role size from 600px), property 16 (role size from 667px), insurance 17 (from 735px). '银行客户关系的深度，/ 超出任何单一系统的视野。', '宾客体验到的是一个品牌。/ 品牌背后的系统，/ 比任何…'. - phones in property, insurance and travel, whose runs are too long for a phone line: greedy lines of a set length (max-inline-size in em, no balancing) and one empty float at the line end that shortens the first line, or the lines after it (shape-outside), so every break falls between two words, at the role size: property 8 / 10 / 6 '房地产客户关系，/ 比为管理它们而搭建的 / 系统更长久。', insurance 8 / 9 / 8 '保单是一项承诺，/ 承载它的系统比任何 / 客户看到的都多。', travel 10 / 7 / 6 '一段旅程经过的系统，/ 比任何旅客所能 / 看到的都多。'. Glyphs are full width (1em, Noto Serif SC) and the line height is base.css's 1.25 for Chinese headings. The same caps keep each plan below 360px. Wrapping and size only, the text unchanged. */ /* The slide's own section (position: relative already) is the container, as for base.css's runFit. */ :root:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page > :has([data-main] > h2) { container-type: inline-size; } :root[data-deck="property"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 16; --mk-zh-line: 10; } :root[data-deck="banking"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 12; } :root[data-deck="hospitality"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 12; } :root[data-deck="insurance"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 17; --mk-zh-line: 9; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 13; --mk-zh-line: 10; } :root:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2 { word-break: keep-all !important; font-size: min(calc(var(--fs-64) * var(--rs)), calc(100cqi / (var(--mk-zh-run, 12) + 0.15))) !important; } @media (max-width: 599.98px) { :root:is([data-deck="property"], [data-deck="insurance"], [data-deck="travel"]):lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2 { word-break: normal !important; text-wrap: wrap !important; max-inline-size: calc((var(--mk-zh-line) + 0.15) * 1em) !important; font-size: min(calc(var(--fs-64) * var(--rs)), calc(100cqi / (var(--mk-zh-line) + 0.15))) !important; } :root[data-deck="property"]:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2::before { content: ""; float: inline-end; inline-size: 2em; /* first line 8 characters */ block-size: 1em; /* within the first line (1.25em) */ } :root[data-deck="insurance"]:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2::before { content: ""; float: inline-end; inline-size: 1em; /* first line 8 characters */ block-size: 1em; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2::before { content: ""; float: inline-end; inline-size: 3em; /* lines 2 and 3: 7 characters */ block-size: 3em; /* within the three lines (3.75em) */ shape-outside: inset(1.35em 0 0); /* clear of the first line (0-1.25em) */ } } } } /* marketing/reflow/layouts/i-continuity.css */ /* * Reflow layout module i-continuity (MK-6f; ARCHITECTURE.md 5.3): industry slide 9, "02 · Centralise" ("One continuous * record of every buyer, unit and commitment." and its counterparts), in all five industries and seven languages. * * The slide: overline, heading, then a 12-column split: the text (a paragraph and a display line) beside a figure canvas * ([data-fig], role="img" with its translated aria-label; 720x400 on property, 792x400 on banking, hospitality and * insurance, 808x400 on travel): six accent channel chips (uppercase, no wrap) on the inline start join a bus that leads * into the "One record" card in the middle, which leads out to a bus and four anchor function chips on the inline end. * The decks' QA widened some chips and moved the canvas where a translation did not fit (property ES "Correo * electrónico": the first column 232px wide, set 56px outside the canvas, the canvas shifted 28px; FR, banking FR, * the RU card), in rules that apply in both modes (figures are drawn as on the slide). The generic layer stacks the * split and fits the whole canvas into the column (figures.css), which gave 6.4-8.2px chip labels at 360px and * 7.0-9.0px at 390px, the smallest text of any industry slide. * * This module (ARCHITECTURE 5.3: phones "text; diagram as channel chips, then the One record box, then function chips"; * tablets "the same, chips larger"): * - the figure's panel gets padding (24px 12px; 32px 24px from 600px). It is the figure's inline-size container * (figures.css), so the query below and the fit use the padded width; * - panel narrower than 840px (phones, tablets up to about 900px): the canvas leaves the fit-scale (zoom 1, never * scaled) and is re-laid in flow: the channel chips (two to a row, 2 + 2 + 2, below a 420px panel; three to a row, * 3 + 3, from 420px), a centred accent connector, the "One record" card, a second connector, the function chips two * to a row (2 + 2). Chips are equal-width and centred, never narrower than their longest word (a row takes fewer * chips where a word needs more room), and a long label wraps inside its chip; the other connector rules are * hidden, and every QA offset, width and transform of the canvas, chips and card is reset. Text takes the reflow type scale: chips 16 canvas px on phones (13px; * x1.12 in Arabic script) and, larger, 18 canvas px from a 560px panel (15-16px) with taller chips; the card 24 * canvas px (17-18px); * - panel 840px and wider (the 1023px reflow edge, 1024px touch, larger touch screens): every canvas fits whole at * scale 1 (the widest is 808px), so the figure stays exactly as on the slide (labels 16px), QA geometry included; * - the h2 is not hyphenated (wrapping only). * The chips, the card and the connectors are found by structure (the same in every deck and language): chips are the * children that are text units ([data-tid]); the function chips are the last four (s09-013 to s09-016); the card is the * child holding a text unit; the rules are the others, and the two kept are the canvas's rules into and out of the card * (children 8 and 9 in every deck). No hooks. * Colours: the deck's own tokens only (chips keep white on the accent, 5.44:1, and on the anchor, as delivered; the * connectors keep the accent on the plum-tinted surface panel; the card keeps its white ground and anchor text). * Directions: logical properties only; rows follow the slide's direction (Arabic and Urdu mirror, as the canvas does), * WhatsApp and SMS keep their LTR bdi. The figure keeps role="img" and its aria-label. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-continuity"]:not(#mk-layout). No element has that id: * the :not() adds one ID-level weight, so a module rule outranks the generic layer and the decks' QA figure rules * (attribute chains); declarations that override inline styles or QA !important rules carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } @media (min-width: 600px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page :has(> [data-fig]) { padding: 32px 24px !important; } } /* The text column: the display line keeps a little less air above its rule on phones (40px + 32px on the slide). */ @media (max-width: 599px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-main] [data-fs="28"][style*="border-block-start"] { margin-block-start: 28px !important; padding-block-start: 24px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation split RU 'кли-ента', 'покупа-тель', ES 'conti-nuo' at 360px); every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } /* Chinese heading: lines break between words. The generic layer breaks Chinese between any two characters and balances the lines, which split a word wherever the midpoint fell ('每位宾 / 客', '每位旅 / 客', '每位买 / 家', '每位投保 / 人' from a 480px screen, '每套 / 房源' at 360-390px). Here the heading breaks only after its own punctuation (word-break: keep-all keeps the break after '，' and '、'), still balanced: one line where it fits (1024px touch), two lines where the first two parts fit on one (14-15 characters: from about 480px, insurance from about 550px; '…涵盖每位宾客、 / 每次住店和每项承诺。'), three below that (phones: '一份连续档案， / 涵盖每位宾客、 / 每次住店和每项承诺。'; the longest part is 10 characters, a 320px screen gives 10.2 and 360px 11.2). Banking's last part ('每段业务关系和每项承诺。', 12 characters) is longer than a phone line, so banking keeps breaking between characters and wraps greedily within a measure that is a step: 9.2em below a column of 14em + 8px ('一份连续档案，涵盖 / 每位客户、每段业务 / 关系和每项承诺。', every phone width), 14em + 8px from there ('一份连续档案，涵盖每位客户、 / 每段业务关系和每项承诺。'), and no width in between. The 8px is room for glyph advances rounded to whole pixels (33px at a 32.65px size, so 14em held 13 characters and '户、' moved down together: '…每位客 / 户、…' at 490px). Balanced as the generic layer leaves it, a 320px screen gave '一份连续档案，涵 / 盖…每段业 / 务…'; balanced within 9.2em, the phone lines depended on the browser's history (a fresh load gave the lines above, a load with the fonts already cached the split ones). Wrapping only, the text unchanged. */ :root:not([data-deck="banking"]) section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page h2:lang(zh) { word-break: keep-all !important; } :root[data-deck="banking"] section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: max(9.2em, min(14em + 8px, (100% - 14em - 8px) * 100000)) !important; text-wrap: wrap !important; } @container (width < 840px) { /* The canvas: out of the fit-scale and the QA offsets, a wrapping flex row in flow as wide as its panel. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 6px; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules: hidden with the canvas geometry, except the two into and out of the card. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:not([data-tid], :has([data-tid])):not(:nth-child(8), :nth-child(9)) { display: none !important; } /* The two kept rules: each a full line of its own with a 1px accent rule at its centre, reaching across the row gaps to the chips and the card. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:is(:nth-child(8), :nth-child(9)) { flex: 0 0 100%; width: auto !important; height: 40px !important; margin-block: -12px !important; background: linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 100% no-repeat !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:nth-child(8) { order: 2; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:nth-child(9) { order: 4; } /* The "One record" card, alone on its line between the connectors. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:has(> [data-tid]) { order: 3; flex: 0 1 auto; box-sizing: border-box !important; width: auto !important; min-width: min(208px, 100%); height: auto !important; min-height: 72px; padding: 12px 24px !important; gap: 6px; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div > [data-tid] { white-space: normal !important; text-align: center; font-size: calc(var(--fs-24) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } /* Chips: the channels first, three to a row (3 + 3; 2 + 2 + 2 on phones, below), the functions last, two to a row (2 + 2); equal widths, centred, never narrower than their longest word (a row takes fewer chips where a word needs more room). */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { order: 1; flex: 0 1 calc((100% - 12px) / 3); box-sizing: border-box !important; width: auto !important; height: auto !important; min-height: 36px; padding: 8px 6px !important; white-space: normal !important; text-align: center; font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: 1.2 !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > :is([data-tid="s09-013"], [data-tid="s09-014"], [data-tid="s09-015"], [data-tid="s09-016"]) { order: 5; flex-basis: calc((100% - 6px) / 2); } } /* Phones: the channels two to a row as well (2 + 2 + 2): three to a row leaves about 97px a chip at 360px, less than an uppercase word such as 'TELEPHONY' or 'ЭЛЕКТРОННАЯ' needs, so rows came out uneven (2 + 3 + 1). */ @container (width < 420px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { flex-basis: calc((100% - 6px) / 2); padding-inline: 4px !important; } } /* From a 314px panel (phones of about 370px and up: 375px and 390px included) the chips keep 8px of inline padding: with 4px, labels that just fit one line ran to 4-5px of the chip's edge at 375-390px (EN 'CORPORATE BANKING', 'FOOD AND BEVERAGE', ES 'BANCA CORPORATIVA', RU 'РОЗНИЧНЫЙ БИЗНЕС', AR 'الخدمات المصرفية للشركات'); they now wrap onto two lines inside the chip, as the longer labels already do. The 4px stays below 314px (360px phones), where the longest word (RU 'УРЕГУЛИРОВАНИЕ', about 134px) needs it to keep two chips to a row. (MK-6f checker.) */ @container (314px <= width < 420px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { padding-inline: 8px !important; } } /* Tablets: the same re-lay with larger chips (18 canvas px: 15-16px), more room between them. */ @container (560px <= width < 840px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] { gap: 16px 12px; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:is(:nth-child(8), :nth-child(9)) { height: 48px !important; margin-block: -16px !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { flex-basis: calc((100% - 24px) / 3); min-height: 48px; padding: 10px 12px !important; font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > :is([data-tid="s09-013"], [data-tid="s09-014"], [data-tid="s09-015"], [data-tid="s09-016"]) { flex-basis: calc((100% - 12px) / 2); } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:has(> [data-tid]) { min-width: 240px; min-height: 88px; padding: 16px 32px !important; } } } } /* marketing/reflow/layouts/i-cover.css */ /* * Reflow layout module i-cover (MK-6e; ARCHITECTURE.md 5.3): industry slide 1, the cover (dark, on the anchor), in all * five industries and seven languages. * * The slide is the wordmark (absolute; base.css brings it into flow at 28px), the h1 and lead on a 12-column grid beside * the lifecycle path, and a 3-column footer strip (Specialise, Centralise, Complete) under an accent-light rule. The path * is a 701x560 figure canvas ([data-fig], role="img" with its translated aria-label): a curved SVG line, one 8px dot per * stage (14px for the last), one absolutely placed label per stage (7 stages, 8 in travel) and an end icon. The generic * layer fits the whole canvas into the column (figures.css), which gave 7.5-8.2px stage labels at 360-390px. * * Phones (below 600px): the path is re-laid as a vertical list of stages: the canvas leaves the fit-scale (zoom 1) and * becomes a two-column grid in flow, dot | label, one row per stage in the delivered order, with a 1px rule through the * dots at the inline start in accent light (#F2A98C, 6.42:1 on the anchor #442C43; never the accent on the anchor). * The curved SVG line and the end icon are hidden (the re-lay never mirrors the path again; Arabic and Urdu mirror by * the canvas's own dir="rtl"). Labels take the reflow type scale for 18px canvas text (15px at 390, x1.12 in Arabic * script), keep their case and tracking as delivered, and wrap if a translation needs it. * Tablets (600px and up): the canvas keeps figures.css's fit-scale (ARCHITECTURE 4.4: fit while the smallest label stays * at 12px or more: 536 / 701 x 16 = 12.2px at 600, 16px from 768), centred in its column. * * Footer strip: stacked below 720px, each item after the first with an accent-light top rule (the strip's own rule stays * above the first); 3 columns from 720px with the delivered accent-light separators between them. * * Cover headlines: the RU and ES covers whose QA no-break runs are wider than a phone line ('индустрии гостеприимства.') * keep base.css's runFit size (MK-4). Letting those no-break spaces break would need the pipeline to change the text * node (a hook only adds attributes, and no CSS property breaks at U+00A0), so this module does not touch the h1. * * Specificity: :not(#mk-layout) (an id no element has) lifts every rule above the generic layer and any class-level QA * rule. Colours: deck tokens only. Directions: logical properties only. Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* ---------------------------------------------------------------- phones: the path as a list of stages ------- */ @media (max-width: 599.98px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; height: auto !important; margin: 8px 0 0 !important; display: grid !important; grid-template-columns: 14px minmax(0, 1fr); grid-auto-rows: minmax(32px, auto); column-gap: 16px; row-gap: 4px; align-items: center; position: relative !important; } /* The rule through the dots: from the first dot's centre to the last one's (rows are 32px high). */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig]::before { content: ""; position: absolute; inset-block: 16px; inset-inline-start: 6.5px; inline-size: 1px; background: var(--color-accent-light); } section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > svg { display: none !important; } section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > span { inset: auto !important; transform: none !important; } /* Dots: column 1, centred on the rule, painted above it. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > span[aria-hidden="true"] { position: relative !important; grid-column: 1; justify-self: center; } /* Labels: column 2, in flow. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > span[data-tid] { position: static !important; grid-column: 2; min-width: 0; white-space: normal !important; overflow-wrap: break-word !important; font-size: calc(var(--fs-18) * var(--rs)) !important; line-height: 1.3 !important; } } /* ---------------------------------------------------------------- tablets: the delivered path, centred ------- */ @media (min-width: 600px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] { margin-inline: auto !important; } } /* ---------------------------------------------------------------- the footer strip --------------------------- */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] { row-gap: 24px !important; } @media (max-width: 719.98px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; } section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] > div + div { padding-block-start: 24px !important; border-block-start: 1px solid var(--color-accent-light); } } @media (min-width: 720px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 48px !important; } /* The delivered separators (absolute, at the inline start of columns 2 and 3, half the gap out). */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] > div > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; } } /* Display headings are not hyphenated: the h1 (RU 'интел-/лект', 'создан-/ный') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page :is(h1, h2, h3) { hyphens: manual !important; } /* The lead (s01-002, the paragraph under the h1): no word alone on its last line where a better break exists. Greedy lines left UR 'ہیں۔' alone on the third line at 768px (property, hospitality, travel) and EN 'interaction.' at 360px (property, hospitality, insurance, travel) and 768px (hospitality); pretty moves one word down ('کرتے ہیں۔') with the same number of lines. The ES, FR and RU decks already set text-wrap: pretty themselves. Wrapping only, the text unchanged. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page p[data-tid="s01-002"] { text-wrap-style: pretty; } /* Chinese headline: the line breaks after the comma, never inside a word. Balanced over characters, it split the industry word in every Chinese deck ('客户智能，为房 / 地产而打造。', '为银|行业', '为酒|店业', '为保|险业', '为旅|游出行' at 360/390px, travel also at 768px; the stage render has none). keep-all leaves break opportunities only after the punctuation: '客户智能，/ 为房地产而打造。' on phones (and travel at 768px), one line where it fits. The longer run is 8 characters (9 in travel, '为旅游出行而打造。'), 312px of a 328px line at 360px; below that the size is capped so the run fits (travel below about 345px; the others fit at the narrowest role size), as base.css's runFit does. The slide's own section (position: relative already) is the container. Wrapping and size only, the text unchanged. */ :root:lang(zh) section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page h1 { word-break: keep-all !important; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > :has(h1) { container-type: inline-size; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page h1 { font-size: min(calc(var(--fs-96) * var(--rs)), calc(100cqi / 9.15)) !important; } } } /* marketing/reflow/layouts/i-deployment.css */ /* * Reflow layout module i-deployment (MK-6f; ARCHITECTURE.md 5.3): industry slide 20, "Deployed within your estate. * Extended one workflow at a time." and its counterparts (the Steps component), in all five industries and seven * languages. * * The slide: overline, heading, lead, then three steps on a 3-column grid whose columns are subgrids of three rows: * a header (an accent rule across the column, broken by the step number, 48px in a 60px box, and its title, 30px, on * a white ground), and the text set in by 80px under the title; then a closing line in muted text. The generic layer * hides the rule, stacks the steps on phones and puts them two to a row from 600px (2 + 1: the third step alone under * the first), and keeps the 60px number box and the 80px indent at every width (on a 360px phone the text column was * 248px wide, a quarter of it lost to the indent; the box's 24px inline padding, which masked the rule, stays too). * * This module (ARCHITECTURE 5.3: phones "steps stacked: number and title (rule hidden), text; closing line"; tablets * "the same"), as steps-panels lays the same component out on industry slide 7: * - the steps stacked at every reflow width, 28px apart on phones and 40px from 600px; * - phones (below 600px): number and title on one line (the number's box shrinks to its figure, 14px gap, the * masking padding released), the text at full width 10px under them; * - 600px and up: the number in a 52px box with a 16px gap, the title beside it, and the text set in by 68px under * the title (the slide's hanging indent at reflow scale), its measure capped by the generic layer; * - the closing line 32px under the last step (40px on the slide); the h2 and step titles are not hyphenated, and * the step titles and the closing line are balanced (no short word alone on a last line; wrapping only). * Text stays on the reflow type scale (numbers 48 canvas px: 26px on phones, 34px at most; titles 30: 21-25px; x1.12 in * Arabic script). No figure, no hooks; the steps, headers, numbers, titles and texts are found by structure (the same * in every deck and language). Colours: none changed (numbers in the accent on white, titles in the anchor, the * closing line muted, 6.09:1). Directions: logical properties only; Arabic and Urdu mirror (numbers at the right, the * indent at the inline start); the numbers keep their bdi. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-deployment"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The steps grid: one column at every reflow width. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; } /* A step: header, then text. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > [style*="subgrid"] { grid-template-rows: none !important; align-content: start; } /* The header's inner row (number and title): the masking padding and offset released. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child > span:not([aria-hidden]) { column-gap: 14px !important; padding-inline: 0 !important; margin-inline-start: 0 !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child [data-fs="48"][style*="width:"] { width: auto !important; } /* The text: full width on phones. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > p { margin-block-start: 10px !important; margin-inline-start: 0 !important; } /* The closing line: balanced lines, so no word sits alone on its last line (Arabic 'أسابيع.', 'الموافقة.' and Urdu 'لائیو۔' at 360/390px; MK-6f checker). Wrapping only. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] + p { margin-block-start: 32px !important; text-wrap: balance; } @media (min-width: 600px) { section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { row-gap: 40px !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child > span:not([aria-hidden]) { column-gap: 16px !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child [data-fs="48"][style*="width:"] { width: 52px !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > p { margin-block-start: 12px !important; margin-inline-start: 68px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation); every word fits its line whole. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page :is(h2, h3, [data-fs="30"]) { hyphens: manual !important; } /* The step titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] [data-fs="30"] { text-wrap: balance; } } } /* marketing/reflow/layouts/i-enterprise.css */ /* * Reflow layout module i-enterprise (MK-6f; ARCHITECTURE.md 5.3): industry slide 15, "Built for the teams that have to * sign it off" and its counterparts, in all five industries and seven languages. * * The slide: overline, heading, lead, then six numbered items on a 3-column grid (2 rows): each item a number (30px * display figures in the accent), a title (30px) and a text, with a rule under the first row and rules between the * columns. The generic layer stacks the items with the number on a line of its own above the title, keeps the first * row's bottom rules (so items 1 to 4 are separated and 4 to 6 are not), and puts items two to a row from 600px. * * This module (ARCHITECTURE 5.3: phones "6 numbered items stacked, numbers inline"; tablets "2x3"): * - every item: the number in a fixed column (36px on phones, 44px from 600px; 12px and 16px gaps) on the title's * first baseline, the title and the text beside it (a hanging indent, so titles and texts align down the list); * a rule above every item and none below, with an even rhythm (20px on phones, 24px from 600px); * - phones (below 600px): one column; tablets (600-899px): two columns, three rows; from 900px (the 1023px reflow * edge, 1024px touch): three columns, two rows, as on the slide; * - the list sits 32px under the lead (the slide's 48px padding on top of the generic 32px margin left 80px); * - the h2 and item titles are not hyphenated, and the item titles are balanced (no short word alone on a last * line; wrapping only). * Text stays on the reflow type scale (numbers and titles 30 canvas px: 21px on phones, 25px on tablets; x1.12 in * Arabic script). No figure, no hooks; the grid, the items, the number, the title and the text are found by structure * (the same in every deck and language). * Colours: none changed (numbers in the accent on white, 5.44:1 at 21px and up; titles in the anchor; the rules are * border-decorative). Directions: logical properties only; Arabic and Urdu mirror (the number column at the right); * the numbers keep their bdi. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-enterprise"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px 32px !important; padding-block-start: 0 !important; /* the slide's 48px on top of the generic 32px margin left 80px under the lead */ } /* An item: number | title, then the text under the title. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: baseline; align-content: start; padding-block: 20px 0 !important; padding-inline: 0 !important; border-block-start: 1px solid var(--color-border-decorative) !important; border-block-end: 0 !important; border-inline-start: 0 !important; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > [data-fs="30"]:first-child { grid-column: 1; grid-row: 1; white-space: nowrap; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > h3 { grid-column: 2; grid-row: 1; margin: 0 !important; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > p { grid-column: 2; grid-row: 2; } @media (min-width: 600px) { section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px !important; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-block-start: 24px !important; } } @media (min-width: 900px) { section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation); every word fits its line whole. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } /* Chinese heading: lines break between words. The generic layer balances it, so below a 12em measure (phones up to about 393px) its two lines split the word '批准' ('为需要签字批 / 准的团队打造', every Chinese deck at 360 and 390px). Here it wraps greedily, on one line where its 12 characters fit and otherwise within 8.2em, so it breaks after '的' ('为需要签字批准的 / 团队打造'): the limit is a step, 8.2em below a column of 12em + 8px and far wider than the column (no limit) from there, with no width in between where a nine- to eleven-character line could form. The 8px is room for glyph advances rounded to whole pixels (up to half a pixel a character). Wrapping only, the text unchanged. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: max(8.2em, (100% - 12em - 8px) * 100000) !important; text-wrap: wrap !important; } /* The item titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page h3 { text-wrap: balance; } } } /* marketing/reflow/layouts/i-governance.css */ /* * Reflow layout module i-governance (MK-6f; ARCHITECTURE.md 5.3): industry slide 14, "The conversation adapts. Your * rules do not." and its counterparts, in all five industries and seven languages. * * The slide: overline and heading, then a 12-column split: the lead (5 columns) beside a policy diagram on a surface * panel (7 columns; a flex column with role="img" and its translated aria-label, no fixed canvas): the "Language model" * box, an arrow, the "Policy, enforced by the platform" bar (white and accent light on the anchor), then two chip groups * side by side, "Completed by the agent" (an accent arrow, anchor chips) and "Reserved for your team" (a stopped rule, * outlined chips); under the split, three cards (title and text) on a 3-column grid with top rules. Two variants: the * property deck sets each group's four chips in one row (flex, no wrap); the other four decks set them two by two * (grid, repeat(2, max-content)). The generic layer already gives the phone layout of ARCHITECTURE 5.3 (lead; the * diagram's chips wrapping, the model box, the policy bar and the two groups stacked; the cards stacked): chip rows wrap, * max-content chip grids become two shrinkable columns 16px apart, chips grow with their text, card grids are one column * on phones and two from 600px (three cards: 2 + 1). * * This module refines it: * - phones (below 600px): the panel's padding 24px 16px (32px 24px or 20px 24px on the slide); the two groups 28px * apart; * - chips: a label that wraps keeps a readable line height (the slide's line-height 1 for one-line chips set two- and * three-line Russian and Spanish chips solid), stays centred and wraps between words (not hyphenated: every word * fits its chip); the two-by-two groups keep the slide's 6px gap * (not 16px) and two equal columns, so the four chips form a tidy grid (on phones, as on tablets) instead of * columns as wide as their longest chip; * - cards: stacked up to 899px with an even 20px rhythm (at 600-899px the generic 2 + 1 left the third card alone * under the first), three in a row from 900px (ARCHITECTURE 5.3 asks for 3 columns on tablets; at 768px a third of * the band is about 213px, narrower than Russian titles such as 'прослеживаемость.' at the 25px tablet size, which * then broke inside the word); * - the h2, the card titles and the diagram's box titles are not hyphenated, and the card titles are balanced (no * short word alone on a last line; wrapping only). * Text stays on the reflow type scale (chips and group labels 16 canvas px: 13px on phones, 14px on tablets; x1.12 in * Arabic script). No figure canvas, no hooks; elements are found by structure (the same in every deck and language). * Colours: none changed (chips keep white on the anchor and muted text on white, as delivered; the policy bar keeps * white and accent light #F2A98C on the anchor, never the accent). Directions: logical properties only; the diagram * follows its own dir (Arabic and Urdu mirror). Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-governance"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Chips (both variants): a wrapped label keeps a readable line height and stays centred. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] span[data-tid][style*="display: inline-flex"] { justify-content: center; min-height: 32px; padding-block: 6px !important; line-height: 1.2 !important; text-align: center; hyphens: manual !important; /* whole words: the generic hyphenation split RU 'усло-вий', ES 'comi-siones' */ } /* The two-by-two chip groups (banking, hospitality, insurance, travel): two equal columns, the slide's 6px gap. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] [style*="grid-template-columns: repeat(2, max-content)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; justify-content: stretch !important; align-self: stretch; } /* The one-row chip groups (property): wrapped rows, centred, the slide's 6px gap. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] [style*="flex-wrap: nowrap"] { gap: 6px !important; } /* The three cards: stacked with an even rhythm up to 899px. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; } section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block-start: 20px !important; } @media (min-width: 900px) { section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block-start: 24px !important; } } @media (max-width: 599px) { /* The diagram's panel. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page :has(> [role="img"]) { padding: 24px 16px !important; } /* The two groups, stacked. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] > [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { row-gap: 28px !important; } } /* Display headings and the diagram's box titles are not hyphenated (the generic es/fr/ru hyphenation split RU 'приме-няет' in the policy bar at 360px); every word fits its line whole. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page :is(h2, h3, [role="img"] [data-fs="20"]) { hyphens: manual !important; } /* The card titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page h3 { text-wrap: balance; } } } /* marketing/reflow/layouts/i-integrations.css */ /* * Reflow layout module i-integrations (MK-6f; ARCHITECTURE.md 5.3): industry slide 19, "Works inside the systems you * already run." and its counterparts, in all five industries and seven languages. * * The slide: overline, heading, lead, then a logo grid kept LTR in every language ([data-keep-ltr="logo-grid"]): seven * to nine category rows, each a 12-column grid with the category label (2 columns, uppercase in Latin and Cyrillic, * Arabic and Urdu labels in their own direction) and a flex row of logos (10 columns: images, or an icon with its name, * or a word mark set in type), rows 2 and up with a rule above; then a note and the small print. Five variants, one * per industry (26 to 36 logos; property, travel and insurance rows 56px high, banking 64px; banking, hospitality and * insurance rows share the canvas height). The generic layer stacks each row with 24px between the label and its logos * and 28px between logos in both directions, and keeps the rows' 2px padding: the label sat on the rule, right under * the last logos of the row above, so it read as their caption; and the note after the grid ran into the last logos * where the slide pushed it down with an auto margin. * * This module (ARCHITECTURE 5.3: phones "each category: label above, logos wrapping; LTR kept (Arabic labels rtl)"; * tablets "label column 160px plus logos"): * - phones (below 600px): each category a block between rules: 16px above the label and below the logos, the label * 8px above its logos, the logos wrapping 12px apart in a line and 24px across (the slide's 28px), centred on their * line; the first category starts 8px under the lead's margin with no rule (as on the slide); * - tablets and the reflow edge (600px and up): each category a row of a 160px label column (the longest label word * never narrower: it takes more room where a word needs it) and the logos beside it, wrapping, 12px rows of padding; * - logos keep the slide's own sizes (17-35px high, about 22px for most; the names on the reflow type scale: 13px on * phones, 14px on tablets) and their order; the labels are not hyphenated (whole words); * - the note after the grid stands 28px below it (32px from 600px); the h2 is not hyphenated. * No figure canvas, no hooks; the rows, labels and logo rows are found by structure (the same in every deck and * language). Colours: none changed (muted labels and names on white, 6.09:1; the logos as delivered). Directions: * logical properties only; the grid stays LTR in Arabic and Urdu (the decks' global QA rule), each label keeps its own * direction, and the bdi runs stay. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-integrations"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The grid: 20px under the lead (as on the slide), no margin below (banking, hospitality and insurance carry 32px, which added to the note's own gap). */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] { margin-block: 20px 0 !important; } /* A category row. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px !important; align-items: start !important; min-height: 0 !important; padding-block: 16px !important; } section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > :first-child { padding-block-start: 8px !important; } /* Its label: whole words. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * > [data-tid]:first-child { hyphens: manual !important; overflow-wrap: normal !important; } /* Its logos: a wrapping row. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * > :last-child { flex-wrap: wrap !important; align-items: center !important; gap: 12px 24px !important; min-width: 0; } /* The note after the grid. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] + * { margin-block-start: 28px !important; } @media (min-width: 600px) { section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * { grid-template-columns: minmax(min-content, 160px) minmax(0, 1fr) !important; column-gap: 24px !important; align-items: center !important; min-height: 56px !important; padding-block: 12px !important; } section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > :first-child { padding-block-start: 12px !important; } section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] + * { margin-block-start: 32px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation); every word fits its line whole. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-limit.css */ /* * Reflow layout module i-limit (MK-6e; ARCHITECTURE.md 5.3): industry slide 3, "The limit of general AI" ("Domain * first. Conversation second."), in all five industries and seven languages (one skeleton everywhere). * * The slide is a 96px statement, one body paragraph and a 40px closing line under a rule, centred on the 1080px canvas. * The generic layer already reads well; this module sets the roles of the ARCHITECTURE target and tightens the gaps * that were sized for the canvas: * - statement 36px on phones (34px at 360) rising to 48px on tablets (the generic 96px role reaches 52px); * - body as the type scale (17px; x1.12 in Arabic script); * - closing line 22px on phones (21px at 360) rising to 28px on tablets (the generic 40px role: 24 -> 30px); * - block gaps 24/32px on phones and 32/40px from 600px (48 + 40px on the canvas); the closing line's rule spans the * column (no 38em cap on that one paragraph, so its rule lines up with the band). * The sizes are set by redefining the type-scale variables (--fs-96, --fs-40) on this slide only, so every rule that * reads them keeps working: base.css's runFit cap for a no-break run wider than the line (banking RU slide 3) still * applies on top (min(role size, line / run)), and Arabic script keeps its x1.12 (--rs). * * Colours: none changed. Directions: logical properties only. No hooks. Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { section.ds[data-layout="i-limit"]:not(#mk-layout) { --fs-96: clamp(34px, 23.619px + 3.1746vw, 48px); /* 36px at 390, 48px at 768 */ --fs-40: clamp(21px, 15.8095px + 1.5873vw, 28px); /* 22px at 390, 28px at 768 */ } section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 24px !important; } section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > p[data-fs="40"] { margin-block-start: 32px !important; padding-block-start: 24px !important; max-width: 100% !important; text-wrap: balance; /* a display line: no word alone on its last line (Arabic 'الحوار.' at 360px) */ } @media (min-width: 600px) { section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 32px !important; } section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > p[data-fs="40"] { margin-block-start: 40px !important; padding-block-start: 32px !important; } } /* Display headings are not hyphenated: the statement and the closing line (ES 'do-/minio,', FR 'mé-/tier,') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page :is(h2, p[data-fs="40"]) { hyphens: manual !important; } /* Chinese: the closing line breaks after the comma, never inside a word. Balanced over characters, it split '出发' in every Chinese deck ('Telonic 智能体从领域出 / 发，而非从对话出发。' at 360/390px; the stage render has none). keep-all leaves break opportunities only at the space and after the punctuation: 'Telonic 智能体从领域出发，/ 而非从对话出发。' (one line from 600px). The statement takes the same rule ('领域为先。/ 对话其次。'). The longest run, '智能体从领域出发，', is 9 characters (194px at 360px), so it always fits. Wrapping only, the text unchanged. */ :root:lang(zh) section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page :is(h2, p[data-fs="40"]) { word-break: keep-all !important; } } } /* marketing/reflow/layouts/i-model.css */ /* * Reflow layout module i-model (MK-6e; ARCHITECTURE.md 5.3): industry slide 5, "The model" ("A working model * of the property business."), in all five industries and seven languages (one skeleton everywhere). * * The slide is an accent overline, the h2, a lead, a 2 x 2 grid of numbered cards (entities, states and dependencies, * obligations, behaviour: number and title, a muted overline, a body), and a closing line under a rule. On the canvas * the cards are separated by a rule under the first row and one between the columns, with 48px padding beside it, and * the grid is centred by auto margins. The generic layer stacks the cards but keeps the first row's bottom rules, drops * the column rule, and turns the auto margins into a 32px top gap, so the closing line's rule touched the last card's * text and the cards had rules in one place and none in another. * * Phones (below 600px): cards stacked, each under a top rule (24px above its number), the canvas rules and paddings * reset; 32px between the grid and the closing line, whose rule spans the column. * Tablets (600px and up): the 2 x 2 grid as on the slide: the rule under the first row and the rule between the columns * (border decorative), 32px beside it; 40px around the grid. * * Specificity: :not(#mk-layout) lifts every rule above the generic layer. Colours: deck tokens only * (--color-border-decorative, as delivered). Directions: logical properties only (Arabic and Urdu mirror: the column * rule sits at the inline start of the second column). No hooks. Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] { margin-block: 32px !important; padding-block: 0 !important; /* hospitality and insurance add 32px on the canvas: the same gaps in every deck */ row-gap: 32px !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div { padding: 24px 0 0 !important; border: 0 !important; border-block-start: 1px solid var(--color-border-decorative) !important; } /* The closing line: its rule spans the column. */ section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] + p { max-width: 100% !important; } /* The h2 and the card titles: balanced lines, so no short word sits alone on a last line ('business.' at 768px, Urdu 'ماڈل۔' at 390px; the h2 is one nowrap line on the canvas, so the deck gives it no balance of its own). */ section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] :is(h2, h3) { text-wrap: balance; } @media (min-width: 600px) { section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-block: 40px !important; row-gap: 0 !important; column-gap: 0 !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div { border-block-start: 0 !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(-n+2) { padding-block: 0 32px !important; border-block-end: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(n+3) { padding-block: 32px 0 !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(odd) { padding-inline: 0 32px !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(even) { padding-inline: 32px 0 !important; border-inline-start: 1px solid var(--color-border-decorative) !important; } } /* Display headings are not hyphenated: the h2 and card titles (RU 'бан-/ковского', 'стра-/хового') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-outcome.css */ /* * Reflow layout module i-outcome (MK-6e; ARCHITECTURE.md 5.3): industry slide 6, outcome design ("Designed around * outcomes, not exchanges."), in all five industries and seven languages (one skeleton everywhere). * * The slide is the h2 and a body (6 columns) beside the flow panel (6 columns), then 3 cards with top rules. The flow * panel (surface, radius 10px) is a grid of 4 max-content columns and 4 rows: per row, a customer input chip, the * system it touches, the action taken and the outcome reached (accent bordered), joined by a connector rule placed on * the grid behind the chips (an aria-hidden span across columns 1-3) and by small triangles at the inline start of * chips 2-4 (aria-hidden spans). The panel's 20 children are the same in all 35 pages: 4 x (connector, input, system, * action, outcome). The generic layer hid the connectors and triangles and put the chips in 2 columns in a row, so the * four flows ran together as one list of 16 chips, and gave the cards 2 columns with the third alone. * * Below 740px (phones and small tablets): the flow as 4 cards on the surface panel, one per row of the slide: input -> * system on one line, action -> outcome on the next, the triangles kept between the chips of a line (the one before the * action, which would point from the panel edge, hidden). The card is the row's connector span, placed behind its four * chips on the grid (rows 1-2, 4-5, 7-8, 10-11, with 16px spacer rows between) and painted white (--color-ground) with * a 10px margin beyond the chips; chips fill their column and wrap their text. Chip text stays on the type scale * (13px on phones). * From 740px: the flow as on the slide, 4 columns of shrinkable max-content tracks (chips may wrap to two lines rather * than the panel overflowing), each row's connector rule behind its chips from column 1 to column 4, the triangles * shown. ARCHITECTURE 5.3 asks for the flow fit-scaled here (848px canvas, 0.77 at 768); the panel is not a fixed-size * canvas in the translations (RU and FR chips run it past 1000px), so a scale would take labels under 12px; the tracks * shrink instead and the text keeps 14px. * Cards: one column below 720px, 3 columns from 720px. * * Specificity: :not(#mk-layout) lifts every rule above the generic layer and any class-level QA rule. Colours: deck * tokens only (cards --color-ground on the --color-surface panel, as the slide's own chips; connector * --color-border-control as delivered). Directions: logical properties only; the triangles point to the inline end * (border-inline-start), so they follow the flow in Arabic and Urdu. No hooks. Stage mode never sees this file. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* ---------------------------------------------------------------- the panel and its chips (all widths) ------- */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] { padding: 20px !important; place-content: start stretch !important; align-self: start !important; } /* Chips wrap at spaces; only words of 14 letters or more may be hyphenated (6 letters each side), where a word is wider than its chip (RU 'Перебронирование', 118px of 104px at 360); the generic layer's automatic hyphenation split short words in these narrow chips ('Acci-dente', 'Si-nistre'). */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] { min-height: 40px; height: auto !important; padding-block: 8px !important; white-space: normal !important; line-height: 1.25 !important; hyphenate-limit-chars: 14 6 6; } /* Triangles: centred on the chip's height. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] > span[aria-hidden="true"] { display: block !important; inset-block-start: calc(50% - 5px) !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+1) { display: block !important; } /* ---------------------------------------------------------------- below 740px: 4 cards --------------------- */ @media (max-width: 739.98px) { section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto 16px auto auto 16px auto auto 16px auto auto !important; gap: 10px 20px !important; padding: 22px 20px !important; } /* The card: the row's connector span, behind its chips. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+1) { grid-column: 1 / -1 !important; align-self: stretch !important; justify-self: stretch !important; height: auto !important; margin: -10px !important; border-radius: 8px; background: var(--color-ground) !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(1) { grid-row: 1 / span 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(6) { grid-row: 4 / span 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(11) { grid-row: 7 / span 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(16) { grid-row: 10 / span 2 !important; } /* Chips: input and action in column 1, system and outcome in column 2, filling their column. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] { justify-self: stretch !important; min-width: 0; padding-inline: 12px !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(5n+2), :nth-child(5n+4)) { grid-column: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(5n+3), :nth-child(5n+5)) { grid-column: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(2), :nth-child(3)) { grid-row: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(4), :nth-child(5)) { grid-row: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(7), :nth-child(8)) { grid-row: 4 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(9), :nth-child(10)) { grid-row: 5 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(12), :nth-child(13)) { grid-row: 7 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(14), :nth-child(15)) { grid-row: 8 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(17), :nth-child(18)) { grid-row: 10 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(19), :nth-child(20)) { grid-row: 11 !important; } /* The action starts the card's second line: no triangle from the panel edge. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+4) > span[aria-hidden="true"] { display: none !important; } } /* ---------------------------------------------------------------- 740px and up: the flow as on the slide ---- */ @media (min-width: 740px) { section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] { grid-template-columns: repeat(4, minmax(0, max-content)) !important; grid-template-rows: repeat(4, auto) !important; gap: 20px 28px !important; padding: 28px !important; justify-content: center !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+1) { grid-column: 1 / 4 !important; align-self: center !important; margin-inline-end: -28px !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+2) { grid-column: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+3) { grid-column: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+4) { grid-column: 3 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+5) { grid-column: 4 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(-n+5) { grid-row: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(n+6):nth-child(-n+10) { grid-row: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(n+11):nth-child(-n+15) { grid-row: 3 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(n+16) { grid-row: 4 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] { justify-self: start !important; max-width: 100%; } } /* ---------------------------------------------------------------- the cards --------------------------------- */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px !important; } /* Card titles: balanced lines (no word alone on a last line, as Urdu 'ہے۔' at 1023px). */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] h3 { text-wrap: balance; } @media (min-width: 720px) { section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } } /* Display headings are not hyphenated: the h2 and card titles (ES 'resul-/tados,', FR 'résul-/tats,', RU 'опи-/раясь') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-portfolio.css */ /* * Reflow layout module i-portfolio (MK-6f; ARCHITECTURE.md 5.3): industry slide 18, "The conversation layer as an * operating signal." and its counterparts, in all five industries and seven languages. * * The slide: overline, heading, the lead with a "Sample data" tag at its inline end, then four cards on a 4-column grid. * Each card is a mock-UI top on the surface ground (a bar chart of four rows, kept LTR in every language; a root-cause * note with an "Approve" button; a risk list; partner chips) above a title and a text. Three variants: property (cards * as flex columns, 200px tops, the chart's label column 104px wide, 16px mock-UI text); banking, hospitality and * insurance (cards on a subgrid, so each row of tops shares a height; label columns max-content with a 156px minimum, * 18px text); travel (flex columns, 200px tops, max-content label columns with a 136px minimum, 16px text). The generic * layer already gives the layout of ARCHITECTURE 5.3 (phones: the cards stacked, the tops in flow at their content * height, the bars full width; tablets: 2 x 2), but each chart row is its own grid: where a translated label is wider * than its column (RU 'Медицинское страхование', 'Групповое медицинское страхование' at 360px) it broke inside a word * and its bar started further along than the others; and in 2 x 2 the two tops of a row had different heights. * * This module: * - the bar chart: one grid for its four rows (the rows become subgrids), so every label shares one column, sized to * the longest label up to half the chart and never narrower than its longest word; labels wrap between words and * every bar starts at the same line (the canvas minimum widths, 104px, 136px or 156px, are released). The chart * stays LTR (the decks' global QA rule) and its labels keep their own direction; * - every card: a grid of two rows on its parent's rows (subgrid), so in 2 x 2 the tops of a row, and the texts under * them, start at the same lines (as the banking variant does on the slide); on phones each card simply takes its * content height; * - phones (below 600px): the mock-UI tops padded 16px (20-28px on the slide), the card texts 20px 20px 24px; * - the h2, the card titles and the mock-UI tops are not hyphenated, and the card titles are balanced (no short * word alone on a last line; wrapping only). * Text stays on the reflow type scale (mock-UI text 16 and 18 canvas px: 13-15px on phones, 14-16px on tablets; x1.12 in * Arabic script). No figure canvas, no hooks; the grid, the cards, the tops and the chart are found by structure. * Colours: none changed (the mock UI keeps its surface ground, anchor bars and button, the accent-secondary chip). * Directions: logical properties only; the chart island stays LTR, the cards mirror in Arabic and Urdu. Stage mode * never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-portfolio"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The card grid and its cards: each card spans two rows of the grid and lays its top and its text on them. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { grid-auto-rows: auto !important; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * { display: grid !important; grid-row: span 2 !important; grid-template-rows: auto auto !important; grid-template-rows: subgrid !important; row-gap: 0 !important; align-content: start; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :first-child { min-height: 0 !important; height: auto !important; } /* The bar chart (kept LTR): one shared label column for its rows. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] { display: grid !important; grid-template-columns: fit-content(50%) minmax(0, 1fr); column-gap: 12px; row-gap: 12px !important; align-content: center; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] > * { grid-column: 1 / -1; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] > [style*="grid-template-columns"] { grid-template-columns: fit-content(50%) minmax(0, 1fr) !important; grid-template-columns: subgrid !important; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] > [style*="grid-template-columns"] > [data-tid] { min-width: 0 !important; overflow-wrap: normal !important; } /* The mock-UI tops (pictures of UI: short labels) are not hyphenated, so a chart label column is never narrower than its longest word (RU 'Медицин-ское', 'невыполнен-ные' at 360px under the generic hyphenation). */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :first-child { hyphens: manual !important; } @media (max-width: 599px) { section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :first-child { padding: 16px !important; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :last-child { padding-block: 20px 24px !important; padding-inline: 20px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation split FR 'conver-sationnelle' in the h2 at 360px); every word fits its line whole. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } /* The card titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page h3 { text-wrap: balance; } } } /* marketing/reflow/layouts/layers.css */ /* * Reflow layout module layers (MK-6b; ARCHITECTURE.md 5.1): product slide 11 and industry slide 12, "How it's built" * ("Your systems at the base. The agent on top."; one skeleton in every deck and language). * * The slide is a stack of four full-width layer rows (04 the agent on the anchor, 03 the industry model on the * secondary accent, 02 one record on the surface, 01 channels and systems on the ground with a border), each a * 12-column grid: number and title in the first four columns, the description in the last eight. The generic layer * already stacks each row; this module sets the ARCHITECTURE target: * - phones: each layer a block, its number and title on one line (the number keeps its line, the title wraps beside * it), the description 8px below; the rows' 40px inline padding becomes 20px (it took a quarter of a 360px * column), 20px block padding, the slide's 8px between rows; * - from a 720px screen: the rows keep two columns, as on the slide, in halves rather than the slide's 4/8 (at * tablet sizes a third of the row put the number and a three-word title on two lines with its last word alone, * 'Your industry / model.', in 36 of 42 pages at 768px), number and title at 22px; 24px by 32px padding, both * columns centred on the row as on the slide; the rows share their columns (subgrids of the stack), so the * descriptions line up. A three-word title that still needs two lines (RU 'Ваша отраслевая / модель.') keeps * two words on its first line: balancing cannot do better with three words. * Headings are not hyphenated and are balanced (no word alone on a last line); wrapping only, the text unchanged. * Parts are found by structure: the rows are the 12-column grids in the stack under the heading. No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed * (the anchor row keeps #F2A98C and white on #442C43, as delivered). Directions: logical properties only; the rows * follow the slide's direction (Arabic and Urdu mirror). Stage mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The stack of rows under the heading. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 32px !important; gap: 8px !important; } /* A layer row: one column, number and title above the description. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] { padding: 20px !important; row-gap: 8px !important; align-items: start !important; } /* Number and title on one line: the number keeps its width, the title wraps beside it. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] > div:first-child { flex-wrap: nowrap !important; gap: 16px !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] > div:first-child > :first-child { flex: 0 0 auto !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] > p { max-width: none !important; text-wrap-style: pretty; /* no word alone on a last line where a better break exists */ } /* Headings: not hyphenated (the generic es/fr/ru hyphenation), balanced. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; text-wrap: balance; } @media (min-width: 600px) { section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 40px !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] { padding: 24px 32px !important; } } @media (min-width: 720px) { /* Number and title at 22px (the card-title role; the generic 30px role reaches 25px at 768), so a three-word title holds one line of its half-row column in more languages. */ section.ds[data-layout="layers"]:not(#mk-layout) { --fs-30: 22px; } /* The stack becomes the grid and each row a subgrid of it, so the title column is shared by the four rows: half the row, or the longest unbreakable title word where that is wider (hospitality RU 'гостеприимства.' needs 202px at 25px), and the descriptions start on one line. Where subgrid is unsupported each row keeps its own halves. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div { display: grid !important; grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr); gap: 8px 32px !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] { grid-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-columns: subgrid !important; column-gap: 32px !important; align-items: center !important; } } } } /* marketing/reflow/layouts/next-step.css */ /* * Reflow layout module next-step (MK-6b; ARCHITECTURE.md 5.1): product slide 22 and industry slide 22, the closing * slide "Next step" ("Every conversation, to the standard you'd choose."; one skeleton in every deck and language). * * The slide (dark, anchor #442C43): an 80px headline and a 28px lead in the first seven columns, the contact list in * the last five (hello@telonic.ai, telonic.ai, the Dubai address; each row an icon in #F2A98C and its text, between * two #F2A98C hairlines), the wordmark absolutely placed at the foot, and a full-bleed decorative SVG of streaks * behind (aria-hidden). The phone line was removed by the owner's edit (NOTES-v1), so the list has three rows. The * generic layer hides the streaks, brings the wordmark into flow at the end and stacks the two columns. This module * sets the ARCHITECTURE target: * - phones: headline 36px (35px at 360, rising to 46px at 719px while stacked), lead, contact rows (icon and * text, the icon centred on the first line of its text at every type size), wordmark static at the end; the * grid's 64px block padding (sized to centre the content on the 1080px canvas) goes, 32px between the text and * the list; the list's 32px block padding becomes 24px; * - from a 720px screen: two columns as on the slide (7/5 of the row, centred against each other), the headline * sized to its column (40px at 768, 46px at 1023). * The decorative streaks stay hidden (an inline SVG drawn for the 1920x1080 canvas; its aspect ratio is an attribute * the module cannot change, and stretched or letterboxed across a phone band they would read as stray marks). * Headings are not hyphenated and are balanced; wrapping only, the text unchanged. No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed * (white and #F2A98C on the anchor, as delivered; the accent is never used here). Directions: logical properties * only; the columns, the rows and the wordmark follow the slide's direction (Arabic and Urdu mirror; the email and * web address keep their own LTR bdi). Stage mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { section.ds[data-layout="next-step"]:not(#mk-layout) { --fs-80: clamp(34px, 23.619px + 3.1746vw, 48px); /* 36px at 390, 46px at 719 */ } /* The 7/5 split: stacked, no canvas centring padding. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page > * > [style*="grid-template-columns: repeat(12,"] { padding-block: 0 !important; row-gap: 32px !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page h2 { hyphens: manual !important; text-wrap: balance !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page h2 + p { margin-block-start: 20px !important; } /* The contact list. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] { padding-block: 24px !important; gap: 16px !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div { gap: 12px !important; } /* Each icon (24px) centred on the first line of its text: half the text's line box less half the icon. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div > svg { margin-block-start: max(0px, calc(var(--fs-24) * var(--rs) * var(--lh-body) / 2 - 12px)) !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div > [data-fs="24"] { line-height: var(--lh-body) !important; hyphens: manual !important; /* names, not prose: the generic es/fr hyphenation gave 'Du-/bai' at 768px */ } /* Chinese headline: lines break between words. Balanced, its two lines split the word '达到' ('每一次对话，都达 / 到您…', every Chinese deck at 360px and from 720px); at most nine characters a line, wrapped greedily, it breaks after '都达到'. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: 9.2em !important; text-wrap: wrap !important; } @media (min-width: 600px) { section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] { padding-block: 28px !important; gap: 20px !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div { gap: 16px !important; } } /* Two columns as on the slide. */ @media (min-width: 720px) { section.ds[data-layout="next-step"]:not(#mk-layout) { --fs-80: clamp(38px, 21.25px + 2.4vw, 46px); /* 40px at 768, 46px at 1023 */ } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page > * > [style*="grid-template-columns: repeat(12,"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; column-gap: 40px !important; align-items: center !important; } } } } /* marketing/reflow/layouts/p-agents.css */ /* * Reflow layout module p-agents (MK-6c; ARCHITECTURE.md 5.2): product slide 9, "Specialists, not generalists". * * The slide: heading and intro, then four agent cards in a 4-column grid. Each card is a two-row subgrid (title and * description, then a mini chat mock), so the mocks of all four cards start on one line. * The generic layer releases the subgrid and puts the cards in one column (two from 600px); the mocks keep their * internal layout (their text from the 16px role: 13-14px, 14.6-15.7px in Arabic script). This module: * - phones: one card per row, a little less card padding, the mock under its text; * - 600px and up: two columns, and each card is again a two-row subgrid of its row, so the two mocks of a row * start on one line as on the slide (cards in a row keep one height); * - the mock sits at the card's top and keeps its own width (no stretch). * Colours: unchanged. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-agents"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Heading and agent titles: not hyphenated (the generic es/fr/ru hyphenation split RU 'исходящ-их', 'изменен-иям', 'обращен-иям' at 768px; every word fits its card) and balanced, so no word sits alone on a last line. The chat mocks keep their own wrapping. Wrapping only, text unchanged. */ section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page :is(h2, h3):not([data-fig] *) { hyphens: manual !important; text-wrap: balance; } section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { margin-block-start: 32px !important; row-gap: 16px !important; } section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > [style*="subgrid"] { padding: 20px !important; row-gap: 20px !important; } @media (min-width: 600px) { section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; column-gap: 24px !important; row-gap: 24px !important; } section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > [style*="subgrid"] { grid-row: span 2 !important; grid-template-rows: subgrid !important; padding: 24px !important; row-gap: 24px !important; } } } } /* marketing/reflow/layouts/p-centralise.css */ /* * Reflow layout module p-centralise (MK-6d; ARCHITECTURE.md 5.2): product slide 7, "02 · Centralise" ("One record. * Every channel, every department."). * * The slide: overline and heading, then a 12-column split: three numbered items (a 40px number column) beside a * 720x360 figure canvas ([data-fig], role="img" with its translated aria-label), a hub and spoke: five accent channel * chips (176x40, uppercase, no wrap) on the inline start join a bus that leads into the "One record" card in the middle, * which leads out to a bus and four anchor department chips on the inline end. The generic layer stacks the split and * fits the whole canvas into the column (figures.css), which gave 6.8-7.3px chip labels at 360px and 7.5-8px at 390px; * and where a translated label is wider than its 176px chip (ES "Correo electrónico", RU "Электронная почта", * "Передача объектов"), its white letters ran past the chip onto the light panel and read as cut off, in reflow as on * the slide. * * This module: * - phones (below 600px): the list's number column is 32px with a 12px gap (40px + 24px on the slide); * - the figure's panel gets padding (it is the figure's inline-size container, figures.css, so the queries below and * the fit use the padded width); * - panel narrower than 640px (phones, small tablets): the canvas is re-laid in flow (zoom 1, never scaled): the * channel chips in a wrapped row, a centred down connector, the "One record" card, a second connector, the * department chips in a wrapped row. Chips share their row (a long label wraps inside its chip); the other * connector rules are hidden. Text takes the reflow type scale (chips 16 canvas px: 13px on phones; the card 24: * 17px; x1.12 in Arabic script); * - panel 640px and wider (768px tablets, the 1023px reflow edge, 1024px touch): the canvas keeps figures.css's * fit-scale (720px canvas: 13.7px labels or more), and a label wider than its chip wraps onto two lines inside it * instead of running past it. * The chips, the card and the connectors are found by structure (the same in every language): chips are the children * that are text units ([data-tid]), the card is the child holding one, the rules are the others; the two connectors * kept are the canvas's rules into and out of the card (children 7 and 8). No hooks. * Colours: the deck's own tokens only (chips keep white on the accent and on the anchor, as delivered; the connectors * keep the accent, on the plum-tinted panel). Directions: logical properties only; rows follow the slide's direction * (Arabic and Urdu mirror, as the canvas does). The figure keeps role="img" and its aria-label. Stage mode never sees * this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-centralise"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Phones: the numbered list keeps a narrow number column. */ @media (max-width: 599px) { section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [style*="grid-template-columns: 40px minmax(0px, 1fr)"] { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 12px !important; } } /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } @media (min-width: 600px) { section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 32px 24px !important; } } /* Fit-scaled canvas: a label wider than its chip wraps inside it (two lines of 16 canvas px fit the 40px chip). */ @container (width >= 640px) { section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > [data-tid] { padding-inline: 8px; white-space: normal !important; text-align: center; line-height: 1.05 !important; } } @container (width < 640px) { /* The canvas: out of the fit-scale, a wrapping flex row in flow as wide as its panel. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 6px; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules: hidden with the canvas geometry, except the two into and out of the card. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:not([data-tid], :has([data-tid])):not(:nth-child(7), :nth-child(8)) { display: none !important; } /* The two kept rules: each a full line of its own with a 1px accent rule at its centre, reaching across the row gaps to the chips and the card. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:is(:nth-child(7), :nth-child(8)) { flex: 0 0 100%; width: auto !important; height: 40px !important; margin-block: -12px !important; background: linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 100% no-repeat !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(7) { order: 2; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(8) { order: 4; } /* The "One record" card, alone on its line between the connectors. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:has(> [data-tid]) { order: 3; flex: 0 1 auto; box-sizing: border-box; width: auto !important; min-width: min(208px, 100%); height: auto !important; min-height: 72px; padding: 12px 24px !important; gap: 4px; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div > [data-tid] { white-space: normal !important; text-align: center; font-size: calc(var(--fs-24) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } /* Chips: the channels first, three to a row (3 + 2), the departments last, two to a row (2 + 2); equal widths, centred, never narrower than their longest word (a row takes fewer chips where a word needs more room). The inline padding is 3px so the longest one-word channel labels fit a third of a 304px panel (360px viewport): with 6px, EN 'Telephony' (97.5px against 97.33px), FR 'Téléphonie' and RU 'Телефония' pushed the first row to two chips (2 over 3; RU 2 + 2 + 1). Labels are centred, so only the longest word comes near the chip's edge. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > [data-tid] { order: 1; flex: 0 1 calc((100% - 12px) / 3); box-sizing: border-box; width: auto !important; height: auto !important; min-height: 36px; padding: 8px 3px !important; white-space: normal !important; text-align: center; font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: 1.2 !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > :is([data-tid="s07-019"], [data-tid="s07-020"], [data-tid="s07-021"], [data-tid="s07-022"]) { order: 5; flex-basis: calc((100% - 6px) / 2); } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'department.' at 360/768px, 'customer.' at 390px, ES 'departamentos.' at 360-1024px, UR 'ہے۔' at 360px). Wrapping only. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings break between words (MK-10 headbreak: balanced lines over a script that breaks between any two characters split '渠道' in the h2, '一份档案。所有渠 / 道，所有部门。', and '同一份' in the second item, '每个部门都基于同一 / 份历史记录工作。', at 360/390px; the stage keeps them whole). The h2 breaks only at its punctuation (word-break: keep-all; three runs of 5 characters), balanced. The items have none: each wraps greedily within a width that steps with its column, so each line ends at a word chosen here (round(down, 100%, X) is X or more where the column holds X, else 0): one line where the whole item fits, else '所有渠道都对应 / 同一位客户。' (7 + 6), '每个部门都 基于同一份 / 历史记录工作。' (10 + 7), '您终于能看清您的 / 对话带来了什么。' (8 + 8). Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h2:lang(zh):has(> [data-tid="s07-003"]), section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h2:lang(zh) > [data-tid="s07-003"] { word-break: keep-all !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> :is([data-tid="s07-005"], [data-tid="s07-008"], [data-tid="s07-011"])) { text-wrap: wrap !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s07-005"]) { max-inline-size: max(7.1em, round(down, 100%, 13.1em)) !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s07-008"]) { max-inline-size: max(10.1em, round(down, 100%, 17.1em)) !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s07-011"]) { max-inline-size: max(8.1em, round(down, 100%, 16.1em)) !important; } } } /* marketing/reflow/layouts/p-collage.css */ /* * Reflow layout module p-collage (MK-6c; ARCHITECTURE.md 5.2): product slide 3, "One customer. Five channels.". * * The slide is a numbered list beside a sample collage: one 1019x530 figure canvas ([data-fig], drawn at 1.08 on the * slide) whose panels are placed absolutely: the call log (with marker 2), the Messages notification, the chat * message from reservations, the WhatsApp chat (markers 1, 3, 4 in its flow), the email inbox (marker 5 and its * "no owner" tag hang from its lower edge) and the booking record (with the second marker 5). The generic layer fits * the whole canvas into the column (figures.css), which gave 3.1px text at 360px. * * Here the canvas is unstacked: it leaves figures.css's fit (zoom 1, never scaled), becomes a grid, and its panels come * into flow at 1:1 (every label at its delivered size, 11px and up), with fluid widths so they fit the column. The * markers that sit on a panel's corner on the slide share that panel's grid cell, pinned to the same corner, so they * move with it. The inbox rows keep their delivered ellipses. Panels are found by the text units they hold * ([data-tid], the same in every language); the module adds no hooks. * - phones: the list first, then the panels in one column (call log, notification, message, WhatsApp chat, inbox, * booking record), at most 460px wide; * - collage 640px wide and up (tablets): two columns: the call log stack beside the WhatsApp chat, then the inbox * beside the booking record; * - collage 900px wide and up (the 1023px reflow edge, 1024px touch): the slide's three columns: call log stack, * WhatsApp chat, inbox above the booking record. * The collage is a kept-LTR island (data-keep-ltr="collage", dir="ltr" in Arabic and Urdu): it keeps its left-to-right * arrangement in every language; inline-end below is its right edge. It stays aria-hidden (a decorative sample). * Colours: none changed. Directions: logical properties only. Stage mode never sees this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-collage"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Heading: not hyphenated (the generic es/fr/ru hyphenation split RU 'кана-лов' at 360/390px, 'одн-ого' at 768px, ES 'responsab-le' at 768px; every word fits the column) and balanced, so no word sits alone on a last line. Wrapping only, text unchanged. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page h2:not([data-fig] *) { hyphens: manual !important; text-wrap: balance; } /* The list first, the collage after it (on the slide the list is at the inline start). The collage panel is an inline-size container, so the panel grid follows its width. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-keep-ltr="collage"] { order: 2; container-type: inline-size; padding: 16px !important; } /* The "Illustrative" tag (in flow above the canvas, figures.css) keeps clear of the marker on the first panel's corner. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-keep-ltr="collage"] > [data-tid]:not([data-fig]) { margin-block-end: 24px !important; } /* The canvas: out of the fit-scale, a grid at 1:1. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] { position: relative !important; inset: auto !important; transform: none !important; zoom: 1 !important; width: auto !important; height: auto !important; max-width: 460px; margin-inline: auto !important; flex-shrink: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 20px; align-items: start; } /* Panels come into flow at a fluid width (their delivered width is the canvas's); markers keep their 30px disc. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > * { position: relative !important; inset: auto !important; min-width: 0; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :not([data-tid]) { width: auto !important; height: auto !important; } /* A marker sits on its panel's top inline-end corner, as on the slide (14px above it, overhanging its edge). */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid] { justify-self: end; align-self: start; margin-block-start: -14px; margin-inline-end: -14px; z-index: 4; } /* The chat's two red tags sit beside a marker, indented 24px (nowrap on the slide). In the narrowest columns (under 360px, French and Russian) tag, marker and indent are wider than the chat: the tag's text wraps instead of pushing the marker past the panel. Where they fit (360px and up) they keep one line. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] :is([data-tid="s03-033"], [data-tid="s03-037"]) { flex-shrink: 1 !important; min-width: 0; white-space: normal !important; } /* One column (phones): the panels in reading order. Each item gets its column as well as its row: with a row alone, auto-placement put the corner markers (2, 5) in an implicit second column beside their panel (the grid became 310px + 16px at 390px), so the panels lost 16px and the markers sat off their corner. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-004"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-015"] { grid-area: 1 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-016"]) { grid-area: 2 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-020"]) { grid-area: 3 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-024"]) { grid-area: 4 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-038"]) { grid-area: 5 / 1; margin-block-end: 20px; /* room for the "no owner" tag and marker that hang 20px below the inbox */ } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-056"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-066"] { grid-area: 6 / 1; } /* Two columns: the call log stack beside the WhatsApp chat (which fills the stack's height, messages at the bottom as in a chat), then the inbox beside the booking record. */ @container (min-width: 640px) { section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 24px; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-004"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-015"] { grid-area: 1 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-016"]) { grid-area: 2 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-020"]) { grid-area: 3 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-024"]) { grid-area: 1 / 2 / span 3 / auto; align-self: stretch; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-038"]) { grid-area: 4 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-056"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-066"] { grid-area: 4 / 2; } } /* Three columns, in the slide's proportions (250, 380 and 353 canvas px; the call log at least its 250px, so its numbers keep their line): call log stack, WhatsApp chat, inbox above the booking record. */ @container (min-width: 900px) { section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] { grid-template-columns: minmax(250px, 250fr) minmax(0, 380fr) minmax(0, 353fr); /* the call log never narrower than on the slide */ grid-template-rows: auto auto minmax(0, 1fr); column-gap: 18px; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-024"]) { grid-area: 1 / 2 / span 3 / auto; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-038"]) { grid-area: 1 / 3; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-056"]) { grid-area: 2 / 3 / span 2 / auto; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-066"] { grid-area: 2 / 3; } } } } /* marketing/reflow/layouts/p-control.css */ /* * Reflow layout module p-control (MK-6d; ARCHITECTURE.md 5.2): product slide 18, "You set the boundaries. The agent * keeps to them." (built for enterprise). * * The slide: a 12-column row with the heading and lead beside a surface panel of four circular badges (each a 210x210 * figure canvas, [data-fig]: an SVG ring whose 16px text runs on a circular path, around a 22px centre label: claim * decisions, scripted answers, off-limit topics, payment terms), then three numbered cards in a row. The generic layer * stacks the row and fits each badge into the panel (figures.css) with the badges wrapping, which left one 210px badge * per row on phones (a 900px column of badges) and two to a row on tablets; the cards stacked on phones and ran two * plus one on tablets. * * This module: * - the badges: two to a row on phones and small tablets, each sized to half the panel (at most its 210px canvas: * 152px at 360px, 167px at 390px; the ring text 11.5-12.7px), four in a row where the panel is 660px wide or more * (768px tablets: 159px badges, 12.1px ring text; full size from about 900px). Each badge is still the delivered * canvas, scaled whole (zoom), so the ring text stays on its circle in every language. The panel keeps its * surface ground with less padding (16px 8px on phones, 24px 16px from 600px); * - the cards: stacked up to 899px (24px 20px padding, a 16px gap; three columns at 768px left 180px of text * width), three in a row from 900px (the 1023px reflow edge, 1024px touch), as on the slide. * The panel is found as the parent of the badges ([data-fig]), the cards' row by its 3-column grid. No hooks. * Colours: none changed. Directions: logical properties only; the badges and cards follow the slide's direction (Arabic * and Urdu run right to left; each ring keeps its own path). Stage mode never sees this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-control"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The badges' panel (an inline-size container, figures.css): a centred wrapping row. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :has(> [data-fig]) { flex-wrap: wrap !important; justify-content: center !important; align-content: center; gap: 8px !important; padding: 16px 8px !important; } /* Two to a row: each badge half the panel (less the gap and 1px of rounding room), never above its canvas size. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-fig] { margin-inline: 0 !important; /* figures.css's ink margins (RU ring text) would push a badge onto its own row */ zoom: min(1, tan(atan2((100cqw - 9px) / 2, var(--fig-w)))) !important; } @media (min-width: 600px) { section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :has(> [data-fig]) { gap: 12px !important; padding: 24px 16px !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-fig] { zoom: min(1, tan(atan2((100cqw - 13px) / 2, var(--fig-w)))) !important; } } /* Four in a row where the panel has room for four badges of 155px or more. */ @container (width >= 660px) { section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-fig] { zoom: min(1, tan(atan2((100cqw - 37px) / 4, var(--fig-w)))) !important; } } /* The cards: stacked, a little less padding. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding: 24px 20px !important; } /* Three in a row from 900px, as on the slide (at 720-899px three columns left 180-230px of text width: RU headings broke inside words). */ @media (min-width: 900px) { section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'you.', 'change.' at 360/390px, 'invented.' at 1023px, ES 'reglas.', 'manos.', UR 'ہیں۔' at 1023px). Wrapping only. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings and lead break between words (MK-10 sweep: balanced lines over a script that breaks between any two characters split '智能体' in the h2, '边界由您设定。智 / 能体…', at 390px and '始终' in the second card, '有些决策始 / 终由您做出。', at 1023px and 1024 touch; the lead split words at 360-1024px; the stage keeps them whole). Text with punctuation inside breaks only there (word-break: keep-all; the longest run, 15 characters of the lead, fits its 17em column at 360px), balanced: the headings as before, the lead too (its slide sets text-wrap: pretty), so its lines stay near equal where only five break points remain (at 390px one sentence a line, not 8 + 18 + 9 + 15 characters). The second card title has none: it wraps greedily within a width that steps with its column (round(down, 100%, X) is X or more where the column holds X, else 0): one line where it fits, else '有些决策始终 / 由您做出。' (6 + 5). Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :is([data-tid="s18-002"], [data-tid="s18-003"], [data-tid="s18-013"], [data-tid="s18-019"]):lang(zh) { word-break: keep-all !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-tid="s18-003"]:lang(zh) { text-wrap: balance !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-tid="s18-016"]:lang(zh) { text-wrap: wrap !important; max-inline-size: max(6.1em, round(down, 100%, 11.1em)) !important; } } } /* marketing/reflow/layouts/p-cover.css */ /* * Reflow layout module p-cover (MK-6c; ARCHITECTURE.md 5.2): product slide 1, the cover (dark, anchor ground). * * The slide: the wordmark (absolute, top inline-start), a 12-column grid with the headline and lead (7 columns) beside * six channel cells (5 columns, a 2x3 grid with hairlines between the cells), and a three-column band under an * accent-light rule (Specialise, Centralise, Complete) with hairline separators between its columns. * The generic layer already puts the wordmark in flow at the top, stacks the headline above the cells and sizes the * type. This module sets the cells and the band: * - channel cells: two columns from 360px (one column below), with the slide's hairlines between cells (inline-start * on the second column, block-start from the second row; a block-start rule between rows in one column), and * tighter cell padding on phones; * - band: three stacked rows on phones (a hairline between rows), three columns from 600px with the slide's * separators restored between them. * Colours: the slide's own hairline (white at 20%) and accent-light separators (#F2A98C on the anchor #442C43, * 6.42:1); no accent on the anchor. Text colours unchanged. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-cover"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The headline block and the cells: a larger gap than the generic row gap. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(12,"] { row-gap: 40px !important; padding-block-end: 40px !important; } /* The headline's two sentences (one block each): where a sentence wraps, its lines are balanced, so it does not end on a lone word (Urdu 'گئی۔', Russian 'отрасли.' at 390px), and it is not hyphenated (a display line; the generic hyphenation of es/fr/ru split 'ва-шей' at 360px, and balancing alone split 'качествен-ные'). Wrapping only; the size stays the type scale's. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page h1 > [data-tid] { text-wrap: balance; hyphens: manual; } /* The lead and the channel names: not hyphenated (ES 'conv-ersaciones', FR 'convers-ations' in the lead at 390px) and balanced (no word alone on the lead's last line: AR 'المؤسسات.', ES 'empresas.', RU 'клиентами.'). */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page :is(h3, [data-tid="s01-003"]) { hyphens: manual !important; text-wrap: balance; } /* Chinese lead: lines break between words. Wrapped at the column's width it split '客户' at 360px and left '对话。' alone at 390px. Where it does not fit the column on one line (21.3em; 100% is the column), it wraps greedily in 11.12em, so it breaks at its comma: '专精行业的 AI 智能体， / 用于企业与客户的对话。' (the window is 11.00-11.25em); where it fits (from about 460px), one line as before. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [data-tid="s01-003"]:lang(zh) { text-wrap: wrap !important; max-inline-size: min(100%, max(11.12em, (100% - 21.3em) * 100000)) !important; } /* Channel cells: one column below 360px, each cell under a hairline. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 16px 12px !important; border-inline-start: 0 !important; border-block-start: 1px solid rgba(255, 255, 255, 0.2) !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :first-child { border-block-start: 0 !important; } /* Two columns from 360px, hairlines as on the slide: inline-start on the second column, block-start from the second row. */ @media (min-width: 360px) { section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(2) { border-block-start: 0 !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(2n) { border-inline-start: 1px solid rgba(255, 255, 255, 0.2) !important; } } @media (min-width: 600px) { section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 24px !important; } } /* The band: three stacked rows on phones, a hairline between rows. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block: 16px; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :first-child { padding-block-start: 0; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :not(:first-child) { border-block-start: 1px solid rgba(255, 255, 255, 0.2); } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :last-child { padding-block-end: 0; } /* Three columns from 600px, the slide's accent-light separators back in the column gap. */ @media (min-width: 600px) { section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 48px !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block: 0; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :not(:first-child) { border-block-start: 0; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; } } } } /* marketing/reflow/layouts/p-deployment.css */ /* * Reflow layout module p-deployment (MK-6d; ARCHITECTURE.md 5.2): product slide 20, "Start with one channel. Live * within weeks." (getting started). * * The slide: heading, then a 12-column split: three numbered steps (a 56px number column: 01 Design, 02 Deploy, * 03 Measure) beside an 812x377 figure canvas ([data-fig], no role; its orbit SVG is aria-hidden): five decorative * orbit ellipses behind a 551x342 group placed in the middle, holding the Telonic logo tile (with its accent-light * glow) and a building tile, joined by dashed connectors to a vertical bus that leads to four chips (icon and label: * map your workflows, connect your systems, agree the measures, extend channel by channel). The generic layer stacks * the split and fits the whole canvas into the column (figures.css), which gave 8.1px chip labels at 360px and 8.8px at * 390px. * * This module: * - phones (below 600px): the steps' number column is 44px with a 12px gap (56px + 20px on the slide), and the * figure's panel gets 24px 12px of padding (it is the figure's inline-size container, figures.css); * - phones (below 600px, as the panel padding): the canvas is re-laid in flow as a vertical checklist (zoom 1, never * scaled): the orbits hidden; the logo tile and the building tile in a row at the inline start (56px, the logo at * its delivered 34px); under the logo tile the canvas's own dashed bus runs down to the last chip, and the four * dashed stubs lead from it to the four chips (the last one turning the corner), stacked full width, each with its * icon (labels wrap where a translation needs two lines). The connectors from the tiles to the bus are hidden. * Chip labels take the reflow type scale (20 canvas px: 16px on phones, x1.12 in Arabic script); * - 600px and wider (tablets, the 1023px reflow edge, 1024px touch): the canvas keeps figures.css's fit-scale (812px * canvas: 13.2px labels at 600px, 17px at 768px), orbits and all. * The parts are found by structure (the same in every language): the group is the canvas's div child; in it, the * dashed spans 1-4 join the tiles to the bus, span 5 is the bus, spans 6-9 the stubs, children 10 and 11 the tiles, * the children holding a text unit ([data-tid]) the chips. No hooks. * Colours: the deck's own tokens only (unchanged: chips on the ground, dashed rules in the control border token, the * logo tile's accent-light glow). Directions: logical properties only; the grid follows the slide's direction, so in * Arabic and Urdu the tiles and the bus sit at the right and the stubs lead left to the chips (the dashed rules keep * the deck's own border sides: border-inline-start in the RTL builds). Stage mode never sees this file (reflow query * only). * Selectors: every rule is scoped to section.ds[data-layout="p-deployment"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { @media (max-width: 599px) { /* The numbered steps keep a narrower number column. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [style*="grid-template-columns: 56px minmax(0px, 1fr)"] { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 12px !important; } /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } } @media (max-width: 599px) { /* The canvas: out of the fit-scale, a block in flow as wide as its panel; the orbits hidden. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > svg { display: none !important; } /* The group: a two-column grid (tiles and bus | chips). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div { position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-auto-rows: auto; row-gap: 8px; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > * { position: static !important; inset: auto !important; margin: 0 !important; } /* Connectors from the tiles to the bus: hidden. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(-n+4) { display: none !important; } /* Tiles: 56px, side by side in the first row (the building tile 12px after the logo tile). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:is(:nth-child(10), :nth-child(11)) { width: 56px !important; height: 56px !important; grid-row: 1; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(10) { grid-column: 1; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(11) { grid-column: 2; justify-self: start; margin-inline-start: 12px !important; } /* The bus: from under the logo tile's centre down to the last chip's row (across the row gaps). It is the same 28px box at the column's inline end as the stubs, so its inline-start rule (border-left in the LTR builds, border-inline-start in the RTL ones) runs on the same line as the last stub's corner (checker, MK-6d: a 1px box centred in the column put the bus 1px off the corner in Arabic and Urdu). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(5) { grid-column: 1; grid-row: 2 / 5; justify-self: end; width: 28px !important; height: auto !important; margin-block: -8px !important; } /* The stubs: from the bus to each chip, at the chip's middle. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(n+6) { grid-column: 1; align-self: center; justify-self: end; width: 28px !important; height: 0 !important; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(6) { grid-row: 2; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(7) { grid-row: 3; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(8) { grid-row: 4; } /* The last stub turns the corner: down from the bus to the last chip's middle (half its row, however many lines its label takes), then across to it. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(9) { grid-row: 5; align-self: start; height: 50% !important; border-block-start: 0 !important; border-block-end: 1px dashed var(--color-border-control); border-inline-start: 1px dashed var(--color-border-control); } /* The chips: stacked full width, icon and label; the label wraps where it must. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:has([data-tid]) { grid-column: 2; min-width: 0; height: auto !important; min-height: 48px; padding: 10px 16px !important; white-space: normal !important; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(12) { grid-row: 2; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(13) { grid-row: 3; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(14) { grid-row: 4; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(15) { grid-row: 5; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] [data-tid] { min-width: 0; font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'weeks.' at 768px, ES 'semanas.' and AR 'أسابيع.' at 360/390px, UR 'آغاز۔' at 768px). Wrapping only. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese h2 breaks between words: only at its full stop (word-break: keep-all; '从一个渠道开始。 / 数周内即可上线。', two runs of 8 characters), so balancing over a script that breaks between any two characters can never split a word (the MK-6d headings of slides 6, 7, 15 and 18 did, MK-10 headbreak). Wrapping only, the text unchanged. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-tid="s20-002"]:lang(zh) { word-break: keep-all !important; } } } /* marketing/reflow/layouts/p-enterprise.css */ /* * Reflow layout module p-enterprise (MK-6c; ARCHITECTURE.md 5.2): product slide 17, "Built for the teams that have to * sign it off" (a Grid Slide component). * * The slide: heading and intro, then six cards in a 3-column grid; each card has a 64px tinted strip of sample chips * (labels, tags, numbered items; nowrap and clipped on the slide) above its title and description. * The generic layer puts the cards in one column (two from 600px), lets the strips grow and their chips wrap. This * module: * - phones: one card per row; the strip's chips wrap onto as many lines as they need, with even gaps (the strip * with a square marker keeps the marker beside its first label, the second label under it); * - 600px and up: two columns (three from 960px, as on the slide), and each card is a two-row subgrid of its row, * so the strips and the titles of a row line up whatever the number of chip lines. * Colours: unchanged. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-enterprise"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Heading and card titles: not hyphenated (the generic es/fr/ru hyphenation split ES 'gest-ionamos', 'intervien-en', RU 'котор-ые', 'подключа-ются', 'работ-аем' at 390-1023px; every word fits its card) and balanced, so no word sits alone on a last line (EN 'it.', 'you.', RU 'вами.'). Wrapping only, text unchanged. */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page :is(h2, h3) { hyphens: manual !important; text-wrap: balance; } /* Chinese card titles that take two lines in a card narrower than the title (from 600px: 9-12em): lines break between words. Balanced, they split '关键' ('工作人员在关 / 键之处介入。') and '之前' ('在任何人听到之 / 前完成测 试。'). Where the title does not fit its card on one line (100% is the card's text width), it wraps greedily in 7.5em ('工作人员在关键 / 之处介入。') or 8.5em ('在任何人听到之前 / 完成测试。'); where it fits, one line as before. */ /* The Chinese heading likewise: balanced (the slide's own text-wrap: balance), its two lines split '批准' at some column widths ('为必须签字批 / 准的团队而打造'; at 390px with a scrollbar, the balancing flips between 7 + 6 and 6 + 7 characters as the width changes). Where it does not fit on one line (13em), it wraps greedily in 7.5em: '为必须签字批准 / 的团队而打造'. */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page h2:lang(zh):has(> [data-tid="s17-002"]) { text-wrap: wrap !important; max-inline-size: max(7.5em, (100% - 13em) * 100000) !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s17-014"]) { text-wrap: wrap !important; max-inline-size: max(7.5em, (100% - 12em) * 100000) !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s17-019"]) { text-wrap: wrap !important; max-inline-size: max(8.5em, (100% - 13em) * 100000) !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { margin-block-start: 32px !important; row-gap: 16px !important; } /* The chip strip: wraps, even gaps, its own block padding (it had the 64px canvas height). Its lines stay together, centred in the strip (align-content), when the strip is taller than its chips: from 600px a strip takes its row's tallest strip height (subgrid), and its wrapped lines had spread apart over that height. */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child { height: auto !important; min-height: 56px; flex-wrap: wrap !important; align-content: center; gap: 8px 12px !important; padding-block: 12px !important; } /* The strip that starts with a square marker (the hand-over card): the marker keeps its line beside the first label, and the second label goes under the first (a wrapped long label would otherwise leave the marker alone on a line, as in Russian). */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child:has(> [aria-hidden="true"]:first-child) { display: grid !important; grid-template-columns: 6px minmax(0, 1fr); align-items: center; gap: 4px 12px !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child > [aria-hidden="true"]:first-child ~ * { grid-column: 2; } /* The card's body (title, description). */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :last-child { padding-block: 16px 20px !important; padding-inline: 20px !important; } @media (min-width: 600px) { section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; gap: 16px !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { grid-row: span 2 !important; display: grid !important; grid-template-rows: subgrid; row-gap: 0; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :last-child { padding-block: 20px !important; padding-inline: 24px !important; } } @media (min-width: 960px) { section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } } } /* marketing/reflow/layouts/p-intelligence.css */ /* * Reflow layout module p-intelligence (MK-6d; ARCHITECTURE.md 5.2): product slide 15, "Make enterprise-grade decisions * with intelligence and reliability." (the platform). * * The slide: heading, intro with a "Sample data" tag at the inline end, then three cards in a row, each a 200px data * panel on the surface ground (top reasons: a 4-column table of label, bar, count and change; a flagged cause with an * Approve button; a list of flagged customers) above a title and a line of text. No figure canvas: every text is on * the reflow type scale. The generic layer stacks the cards on phones and runs them two plus one on tablets, the third * card alone at half width; in the table the labels share a shrunk first column with the bar (two lines each in a * phone or half-width card). * * This module: * - phones (below 600px): the panels' inline padding is 20px (28px on the slide) and the cards' text blocks 20px * (24px), so the narrow column keeps more of its width; * - the table: where its panel is narrower than 420px (phones, the two-column tablet cards), each label takes its * own line above its bar, count and change (one line per label instead of two lines squeezed beside the bar); * counts and changes never wrap ("1 120" stays whole); * - 600px and up: two cards to a row at equal heights, and the third card across the row with its panel beside its * text (half each), instead of alone at half width. * The cards' row is found by its 3-column grid, the table as the grid holding its first label (s15-006; its template * differs by language: 200px 1fr 56px 64px, or max-content 1fr 44px 48px in FR, RU, ZH), the panels as the cards' first * children. No hooks. Colours: none changed. Directions: logical properties only; the third card's panel sits at the * inline start (the right in Arabic and Urdu); counts and changes stay in their LTR . Stage mode never sees this * file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-intelligence"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css); * declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The panels (the cards' first children): inline-size containers, so the table follows its panel's width. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child { container-type: inline-size; } /* Counts and changes keep one line. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) > bdi { white-space: nowrap !important; } @media (max-width: 599px) { section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child { padding-inline: 20px !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :last-child { padding: 20px !important; } } /* The table in a narrow panel: label on its own line, then bar | count | change. */ @container (width < 420px) { section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) { grid-template-columns: minmax(40px, 1fr) auto auto !important; row-gap: 4px !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) > span[data-tid] { grid-column: 1 / -1 !important; margin-block-start: 8px; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) > span[data-tid]:first-child { margin-block-start: 0; } } @media (min-width: 600px) { section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { align-items: stretch !important; } /* The first two cards share two rows (panel, then text), so their panels take one height and both titles start on one line (checker, MK-6d: the table's panel, labels above their bars, was taller than its neighbour's, so the two titles sat at different heights). The panels keep their centred content. Without subgrid, as before. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :nth-child(-n+2) { display: grid !important; grid-row: span 2 !important; grid-template-rows: subgrid; row-gap: 0 !important; } /* The third card across the row: panel beside text. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :nth-child(3) { grid-column: 1 / -1 !important; flex-direction: row !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :nth-child(3) > * { flex: 1 1 0% !important; min-width: 0; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'ask.', 'call.', 'leave.' at 768px, ES 'vayan.' at 390px, RU 'клиенты.', 'ушли.' at 390-1024px, UR 'ہیں۔' at 768px). Wrapping only. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings break between words (MK-10 headbreak: balanced lines over a script that breaks between any two characters split '之前' in the third card, '在客户流失之 / 前采取行动。', at 768px; the stage keeps it whole). A heading with punctuation inside breaks only there (word-break: keep-all; runs of at most 9 characters), balanced. A card title without wraps greedily within a width that steps with its column, so each line ends at a word chosen here (round(down, 100%, X) is X or more where the column holds X, else 0): one line where the whole title fits, else '了解客户在 / 问什么。' (5 + 4), '在客户流失之前 / 采取行动。' (7 + 5). Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3):lang(zh):has(> :is([data-tid="s15-002"], [data-tid="s15-016"])), section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3):lang(zh) > :is([data-tid="s15-002"], [data-tid="s15-016"]) { word-break: keep-all !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page h3:lang(zh):has(> :is([data-tid="s15-010"], [data-tid="s15-022"])) { text-wrap: wrap !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s15-010"]) { max-inline-size: max(5.1em, round(down, 100%, 9.1em)) !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s15-022"]) { max-inline-size: max(7.1em, round(down, 100%, 12.1em)) !important; } } } /* marketing/reflow/layouts/p-logo-wall.css */ /* * Reflow layout module p-logo-wall (MK-6c; ARCHITECTURE.md 5.2): product slide 16, "Works inside the systems you * already run". * * The slide: heading and intro, an 8x8 grid of 64 cells ([data-keep-ltr="logo-grid"], dir="ltr" in Arabic and Urdu) * with hairlines between the cells (inline-start and block-start borders), each cell either a wordmark image or an * icon beside a name (16 canvas px), then the disclaimer. * The generic layer gives as many 120px (140px in Arabic script) columns as fit, the name beside its icon. This module: * - 3 columns on phones, 4 from 480px, 6 from 600px, 8 (the slide's) from 960px; * - each cell centred in a row of at least 72px; an icon above its name (names centred, never hyphenated, 13-14px * from the type scale; 14.6-15.7px in Arabic script), wordmarks at their delivered size, scaled down only where a cell is narrower * (aspect kept); * - the slide's hairlines redrawn for the column count: inline-start on every cell but the first of a row, * block-start on every row but the first. * The grid stays left to right in every language (a kept-LTR island); inline-start is its left edge. Colours: the * slide's own border token. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-logo-wall"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Heading: not hyphenated (the generic es/fr/ru hyphenation split ES 'sist-emas', RU 'кот-орыми' at 360/390px; every word fits the column) and balanced, so no word sits alone on a last line (EN 'run.' at 768px). Wrapping only, text unchanged. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page h2 { hyphens: manual !important; text-wrap: balance; } /* (The grid selector carries [style*="grid-template-columns"] to outrank the generic Arabic-script column rule.) */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: minmax(72px, auto); margin-block-start: 32px !important; row-gap: 0 !important; column-gap: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > * { box-sizing: border-box; padding: 12px 6px !important; border-inline-start: 0 !important; border-block-start: 0 !important; } /* Wordmarks at their delivered size, at most the cell's width: the box narrows and the image is drawn contained in it (object-fit), so its aspect is kept without relying on the file's intrinsic ratio. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] img { max-width: 100% !important; object-fit: contain; } /* An icon above its name. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > * > div { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; max-width: 100% !important; min-width: 0; text-align: center; } /* Names are brand names: never hyphenated (the generic layer hyphenates French, Spanish and Russian text, and the names' balanced wrapping then split 'Micro-soft'). */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > * > div > [data-tid] { max-width: 100%; hyphens: manual; } /* Hairlines for 3 columns. Each wider column count first clears them with a rule of the same weight (> :nth-child(n), not > *, which the :nth-child rules below outrank whatever their order) and then draws its own; with > * the 3-, 4- and 6-column hairlines had stayed on and added up from 480px. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(3n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+4) { border-block-start: 1px solid var(--color-border-decorative) !important; } @media (min-width: 480px) { section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n) { border-inline-start: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(4n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+5) { border-block-start: 1px solid var(--color-border-decorative) !important; } } @media (min-width: 600px) { section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: minmax(80px, auto); } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n) { padding: 12px 8px !important; border-inline-start: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(6n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+7) { border-block-start: 1px solid var(--color-border-decorative) !important; } } @media (min-width: 960px) { section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n) { border-inline-start: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(8n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+9) { border-block-start: 1px solid var(--color-border-decorative) !important; } } } } /* marketing/reflow/layouts/p-specialise.css */ /* * Reflow layout module p-specialise (MK-6d; ARCHITECTURE.md 5.2): product slide 6, "01 · Specialise" ("Agents that * already know how your industry works."). * * The slide: overline and heading, then a 12-column split: three numbered items (a 40px number column) beside a * 640x380 figure canvas ([data-fig], role="img" with its translated aria-label). The canvas: three accent chips * (entities, stages, rules) feed down through accent connector rules into a 172px tile holding a 12 x 12 dot matrix, * which feeds down through anchor rules into three anchor chips (workflows, policies, systems). The generic layer * stacks the split and fits the whole canvas into the column (figures.css), which gave 8.2px chip labels at 360px and * 8.95px at 390px. * * This module: * - phones (below 600px): the list's number column is 32px with a 12px gap (40px + 24px on the slide), so the text * keeps more of the narrow column; * - the figure's panel gets padding (it is the figure's inline-size container, figures.css, so the queries below and * the fit use the padded width); * - panel narrower than 560px (phones): the canvas is re-laid in flow (zoom 1, never scaled): the accent chips in a * wrapped row, one centred accent connector, the dot matrix in its tile, one centred anchor connector, the anchor * chips in a wrapped row. Chips share their row (equal widths, a long label wraps inside its chip). The other * connector rules are hidden. Chip labels take the reflow type scale (16 canvas px: 13px on phones, x1.12 in * Arabic script); * - panel 560px and wider (tablets, the 1023px reflow edge, 1024px touch): the canvas keeps figures.css's fit-scale * (640px canvas: 14px labels or more). * The chips, the matrix and the connectors are found by structure (the same in every language): the chips are the * children holding a text unit ([data-tid]), the matrix is the aria-hidden child, the rules and the tile are the other * children; the two connectors kept are the canvas's centre rules (children 4 and 11, accent and anchor). The tile's * border, radius and ground move to the matrix (same tokens), so the tile keeps its look in flow. No hooks. * Colours: the deck's own tokens only (chips keep white on the accent and on the anchor, as delivered). Directions: * logical properties only; rows follow the slide's direction (Arabic and Urdu mirror, as the canvas does). The figure * keeps role="img" and its aria-label. Stage mode never sees this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-specialise"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Phones: the numbered list keeps a narrow number column. */ @media (max-width: 599px) { section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [style*="grid-template-columns: 40px minmax(0px, 1fr)"] { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 12px !important; } } /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } @media (min-width: 600px) { section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 32px 24px !important; } } @container (width < 560px) { /* The canvas: out of the fit-scale, a wrapping flex row in flow as wide as its panel. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 6px; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules and the empty tile: hidden with the canvas geometry. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:not(:has([data-tid])):not([aria-hidden="true"]):not(:nth-child(4), :nth-child(11)) { display: none !important; } /* The two centre rules: each a full line of its own with a 1px rule at its centre, reaching across the row gaps to the chips and the matrix (the accent one above the matrix, the anchor one below it). */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:is(:nth-child(4), :nth-child(11)) { display: block !important; flex: 0 0 100%; width: auto !important; height: 40px !important; margin-block: -12px !important; background: linear-gradient(var(--mk-6d-rule), var(--mk-6d-rule)) center / 1px 100% no-repeat !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(4) { --mk-6d-rule: var(--color-accent); order: 2; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(11) { --mk-6d-rule: var(--color-anchor); order: 4; } /* The dot matrix in its tile (the tile's border, radius and ground; 16px inset, 172px as on the slide). */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > [aria-hidden="true"] { order: 3; flex: 0 0 auto; box-sizing: content-box; padding: 16px; border: 1px solid var(--color-border-decorative); border-radius: 16px; background: var(--color-ground); } /* Chips: the accent row first, the anchor row last; equal shares of their row, never narrower than their longest word. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:has(> [data-tid]) { order: 1; flex: 1 1 0%; display: flex !important; width: auto !important; height: auto !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:has(> :is([data-tid="s06-016"], [data-tid="s06-017"], [data-tid="s06-018"])) { order: 5; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div > [data-tid] { flex: 1 1 auto; justify-content: center; box-sizing: border-box; height: auto !important; min-height: 36px; padding: 8px !important; white-space: normal !important; text-align: center; font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: 1.2 !important; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'works.', 'prompted.' at 360px, ES 'usted.', 'instrucciones.' at 360-768px, AR 'قطاعك.' at 360/390px). Wrapping only. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings break between words (MK-10 headbreak: balanced lines over a script that breaks between any two characters split '运作' in the h2, '已经了解您所在行业运 / 作方式的 AI 智能体。', at 360, 390 and 768px, and '系统' in the third item, '您的业务政策内置于系 / 统，…', at 360/390px; the stage keeps both words whole). A heading with punctuation inside breaks only there (word-break: keep-all; its longest run, 12 characters, fits the narrowest item column, 13.5em at 360px), balanced. A heading without wraps greedily within a width that steps with its column, so each line ends at a word chosen here: round(down, 100%, X) is X or more where the column holds X, else 0. h2: one line from 20.4em (the whole heading, 19.4em, and room for its closing full stop), else '已经了解您所在行业运作 / 方式的 AI 智能体。' (11.1em), else '已经了解您所在 / 行业运作方式的 / AI 智能体。' (7.1em); second item: one line, else 8 + 8 characters. Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> :is([data-tid="s06-005"], [data-tid="s06-011"])), section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh) > :is([data-tid="s06-005"], [data-tid="s06-011"]) { word-break: keep-all !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h2:lang(zh):has(> [data-tid="s06-003"]) { text-wrap: wrap !important; max-inline-size: max(7.1em, min(11.1em, round(down, 100%, 11.1em)), round(down, 100%, 20.4em)) !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s06-008"]) { text-wrap: wrap !important; max-inline-size: max(8.1em, round(down, 100%, 16.1em)) !important; } /* Phones under 340px: the third item's first run (12 characters) no longer fits its column, and the emergency break put its comma at the start of a line (320-327px); there it wraps greedily at 8 characters a line, '您的业务政策内置 / 于系统，而非写在 / 提示词里。'. */ @media (max-width: 339px) { section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s06-011"]), section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh) > [data-tid="s06-011"] { word-break: normal !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s06-011"]) { text-wrap: wrap !important; max-inline-size: 8.1em !important; } } } } /* marketing/reflow/layouts/p-stats.css */ /* * Reflow layout module p-stats (MK-6c; ARCHITECTURE.md 5.2): product slides 2 ("The problem", three figures and a * source note) and 5 ("Good service, by design", five figures). * * The slide: the heading and intro, then a row of big figures (120 canvas px) with a caption under each, separated by * vertical hairlines (border-inline-start on every figure after the first), then (slide 2) the source note. * The generic layer stacks the figures and sizes the type (the figures from the 120px role). This module: * - phones: one figure per row, caption below, a hairline between rows (the slide's separators turned to the block * axis); * - 760px and up: slide 2 in three columns; slide 5 in three plus two; the slide's vertical hairlines between the * figures of a row, a block gap between the rows. * Colours: the slide's own border token only. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-stats"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Headings: not hyphenated (the generic es/fr/ru hyphenation split ES 'llev-arlas', RU 'продум-анный' at 360/390px; every word fits the column) and balanced, so no word sits alone on a last line. Wrapping only, text unchanged. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page h2 { hyphens: manual !important; text-wrap: balance; } /* Chinese slide 2 heading: lines break between words. Balanced (or greedy at the column's width), its lines split '没有', '达到' and '这些' at every width (3-4 lines on phones, 3 at 768px, 2 at 1023px). It wraps greedily in a measure chosen by the width the column gives (100% is the column): 10.5em under 14.5em, 14.5em under 22.5em, 22.5em from there; and its first line is 1em shorter (an empty float of 1px height at the line's end), so the lines break at word boundaries only: 企业的口碑取决于它 / 与客户的对话。但几乎 / 没有企业能让这些对话 / 达到自己期望的标准。 (phones, 360px: 11.2em) 企业的口碑取决于它与客户的 / 对话。但几乎没有企业能让这些 / 对话达到自己期望的标准。 (from 14.5em; 768px: 17.6em) 企业的口碑取决于它与客户的对话。但几乎没有 / 企业能让这些对话达到自己期望的标准。 (from 22.5em; 1023px: 24em) The text and its size are unchanged; the float holds no text. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page h2[data-tid="s02-002"]:lang(zh) { text-wrap: wrap !important; max-inline-size: calc(10.5em + clamp(0em, (100% - 14.5em) * 100000, 4em) + clamp(0em, (100% - 22.5em) * 100000, 8em)) !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page h2[data-tid="s02-002"]:lang(zh)::before { content: ""; float: inline-end; inline-size: 1em; block-size: 1px; } /* The figures' row (a 3- or 5-column grid pushed to the slide's foot): one column, figures under hairlines. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; margin-block-start: 40px !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * { padding-block: 24px !important; padding-inline-start: 0 !important; border-inline-start: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :not(:first-child) { border-block-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :last-child { padding-block-end: 0 !important; } /* Caption under its figure: the slide's 24px gap is generous at phone sizes. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * > [data-fs="24"] { margin-block-start: 12px !important; } /* 760px and up: three columns (slide 5: three, then two), vertical hairlines between the figures of a row. Not from 600px: a third of the row is narrower than the figures there, and '24/7', '55%' and '63%' broke onto two lines ('24/ / 7', '55 / %') at 600-708px (Arabic and Urdu, whose figures are 12% larger) and 600-648px (Latin, Cyrillic, Chinese). At 760px the widest figure, Arabic '24/7' (180px), has 192px; one column below. */ @media (min-width: 760px) { section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 40px !important; column-gap: 24px !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * { padding-block: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :not(:first-child) { border-block-start: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :not(:nth-child(3n+1)) { padding-inline-start: 24px !important; border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * > [data-fs="24"] { margin-block-start: 16px !important; } } } } /* marketing/reflow/layouts/platform.css */ /* * Reflow layout module platform (MK-6a; ARCHITECTURE.md 5.1): product slide 14 and industry slide 17, "One view of every * conversation your customers have" (dark slide; identical skeletons in every deck). * * Five numbered lines beside a picture of the product console (kept left to right in every language, * data-keep-ltr="console"): a tab bar with a "Sample data" label, a header row with a period switch, five KPI tiles, a * "Conversations by hour" line chart (an SVG with preserveAspectRatio="none" over two shaded bands) beside "Live now" * bars, and a "Needs your attention" list. The generic layer stacks it all: the tabs wrapped onto two rows of 48px * tabs with a 32px gap, the chart plot took the generic 16:10 box (the line stretched 2.4 times its drawn aspect) and * the chart and live bars stayed stacked on tablets. * * Here: * - the numbered lines get room between their rules; * - the tab bar keeps one row and scrolls sideways inside the console (it is a picture of UI); "Sample data" leaves * the scrolling row and sits above it at the console's inline end, so it is always in view (from an 860px console, * where everything fits one row, it is back at the row's end); * - KPI tiles in two columns on phones and three from a 600px screen (3 + 2; the generic layer), five from an 880px * console (one row, as on the slide); * - the chart plot keeps its SVG's drawn aspect (viewBox 500 x 135) with a 120px floor so the line reads on a phone; * - from a 600px console the chart and the live bars sit side by side (1.6 : 1, as on the slide); * - the attention rows wrap their status under the item. * The console is an inline-size container (mk-console) for these steps. Parts are found by structure (the same in every * deck and language): the console is [data-keep-ltr="console"], its first child the tab bar whose last text unit is * "Sample data", the chart and live bars share the 1.6fr grid, the plot is the positioned box holding the SVG. No hooks. * * Specificity: the generic layer's selectors are long attribute chains (up to 0,8,0), so every rule here carries * :not(#mk-layout), an id no element has, which lifts it to id-level specificity. * Colours: none changed (white console on the anchor slide, as delivered). Directions: the console stays left to right * (the decks' global QA rules); the numbered lines follow the slide's direction; logical properties only. Stage mode * never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example ES 'con-/versación', RU 'диало-/гов', and single words were left on last lines, for example AR 'عملاؤك', EN 'have'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese h2 with a long modifier before '每一次对话' (no punctuation to break at): insurance '一览您投保人的每一次对话' (12 characters) and product '在一个视图中看清您的客户的每一次对话' (18). Balanced into two even lines, they began the second line with the particle '的': '一览您投保人 / 的每一次对话' (insurance, 360 and 390px; MK-10 round 2) and '在一个视图中看清您 / 的客户的每一次对话' (product, 360, 390 and 768px, the same class). Here they wrap greedily, with an empty 1px-high float at the inline end of the first line that leaves that line --mk-zh-l1 wide, so it breaks after '的' ('一览您投保人的 / 每一次对话', as the other industry decks' 11-character headings balance: '一览您买家的 / 每一次对话') and after the verb ('在一个视图中看清 / 您的客户的每一次对话'); the lines below the float are full width. The float is a step: that width below a line of --mk-zh-all + 8px, 0 from there, where the heading fits one line (insurance from about 405px, product from about 795px). The 0.2em and 8px are room for glyph advances rounded to whole pixels. The product second line (10 characters) fits every reflow width (292px of 328px at 360px). The other industry decks keep the balanced lines. Wrapping only, the text unchanged. */ section.ds[data-layout="platform"]:is(:root:is([data-deck="product"], [data-deck="insurance"]) *):not(#mk-layout) .slide-page h2:lang(zh) { --mk-zh-l1: 8.2em; --mk-zh-all: 18em; text-wrap: wrap !important; } section.ds[data-layout="platform"]:is(:root[data-deck="insurance"] *):not(#mk-layout) .slide-page h2:lang(zh) { --mk-zh-l1: 7.2em; --mk-zh-all: 12em; } section.ds[data-layout="platform"]:is(:root:is([data-deck="product"], [data-deck="insurance"]) *):not(#mk-layout) .slide-page h2:lang(zh)::before { content: ""; float: inline-end; block-size: 1px; inline-size: max(0px, min(100% - var(--mk-zh-l1), (var(--mk-zh-all) + 8px - 100%) * 100000)); } /* Numbered lines: room between their rules. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [style*="grid-template-columns: 24px minmax(0px, 1fr)"] { padding-block: 12px !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [style*="grid-template-columns: 24px minmax(0px, 1fr)"]:first-child { padding-block-start: 0 !important; } /* The console: an inline-size container for the steps below, and the containing block of "Sample data". */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] { container: mk-console / inline-size; position: relative !important; } /* Tab bar: one row that scrolls sideways; its top strip holds "Sample data". */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child { flex-wrap: nowrap !important; gap: 24px !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-start: 36px !important; padding-inline: 16px !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid] { flex: none !important; height: 44px !important; white-space: nowrap !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { position: absolute !important; inset-block-start: 12px; inset-inline-end: 16px; height: auto !important; margin: 0 !important; } /* Product Arabic and Urdu: the deck's QA sets "Sample data" right to left inside the left-to-right console, and the inline end of a right-to-left box is its left side, so the label sat at the console's left edge above the first tab (and, from an 860px console, straight after the last tab). It takes its inline start instead: the console's right edge, as in the other languages and the industry decks. */ section.ds[data-layout="platform"]:is(:root[data-deck="product"]:is([lang="ar"], [lang="ur"]) *):not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { inset-inline-start: 16px; inset-inline-end: auto; } /* The dashboard body: a little less padding on phones. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:nth-child(2) { padding: 16px !important; } /* Chart plot: the SVG's drawn aspect, with a floor. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="position: relative"]:has(> svg) { flex: none !important; aspect-ratio: 500 / 135; min-height: 120px !important; } /* Attention rows: the status wraps under its item. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="justify-content: space-between"]:has(> [data-tid] + [data-tid]) { row-gap: 2px !important; } /* Live bars: the bar keeps a track of 48px or more. The rows give the channel name a fixed column (96px; 170px in the translated product decks), which left the bar no room once the live panel sits beside the chart (0px in product ZH, ES, FR and RU at a 700-768px screen). The name column now gives way down to its longest word; it is the same width in every row of the panel, so the bars stay aligned. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: minmax(0px, 1.6fr)"] > :last-child [style*="grid-template-columns: 96px 32px minmax(0px, 1fr)"] { grid-template-columns: minmax(min-content, 96px) 32px minmax(48px, 1fr) !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: minmax(0px, 1.6fr)"] > :last-child [style*="grid-template-columns: 170px 32px minmax(0px, 1fr)"] { grid-template-columns: minmax(min-content, 170px) 32px minmax(48px, 1fr) !important; } @container mk-console (width >= 560px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:nth-child(2) { padding: 16px 24px !important; } } /* From a 600px console: chart and live bars side by side. */ @container mk-console (width >= 600px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: minmax(0px, 1.6fr)"] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; } } /* From an 860px console the tabs and "Sample data" fit one row (Russian, the longest, needs about 780px): it returns to the tab bar's inline end, as on the slide. */ @container mk-console (width >= 860px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child { padding-block-start: 0 !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { position: static !important; margin-inline-start: auto !important; } section.ds[data-layout="platform"]:is(:root[data-deck="product"]:is([lang="ar"], [lang="ur"]) *):not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { margin-inline-start: 0 !important; margin-inline-end: auto !important; } } /* From an 880px console: the five KPI tiles in one row, as on the slide. */ @container mk-console (width >= 880px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } } } /* marketing/reflow/layouts/pricing.css */ /* * Reflow layout module pricing (MK-6b; ARCHITECTURE.md 5.1): product slide 21 and industry slide 21, "How it's priced" * ("One monthly figure per channel. Everything included."; the industry decks add an intro paragraph under the * heading; otherwise one skeleton in every deck and language). * * The slide: three channel cards on the surface tone in a row (an icon in the accent, the channel as a 30px title, its * unit in muted text, an "Everything included" chip pushed to the card's foot; 280px tall), then three notes in a row * (a bold lead-in and its sentence). The generic layer stacks the cards at their canvas height (280px each, mostly * empty on a phone) and puts both rows in two columns from 600px (the third card and note alone on a line). This * module sets the ARCHITECTURE target: * - phones: the three cards stacked and compact: the icon at the inline start, the title, unit and chip beside it * (a card about a third of its canvas height); the three notes stacked, 20px apart; * - three compact columns once the cards' words fit a third of the row: from a 560px screen, where a card keeps * 136px for its text and the longest words need 126px (RU title 'Сообщения') and 121px (ES unit 'Conversaciones'); * the chip at each card's foot, so the three chips line up; * - the notes in three columns from 900px (at 768 a third of the row is 213px, under 26 characters a line), stacked * below that. * Headings are not hyphenated and are balanced; wrapping only, the text unchanged. Parts are found by structure (the * two three-column grids: the one whose items hold an icon is the cards). No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed. * Directions: logical properties only; cards and notes follow the slide's direction (Arabic and Urdu mirror). Stage * mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* The cards' grid. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) { margin-block-start: 32px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } /* A card on phones: the icon at the inline start, title, unit and chip beside it. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * { min-height: 0 !important; padding: 20px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start !important; justify-items: start; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > svg { grid-row: 1 / span 3; width: 28px; height: 28px; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > :not(svg) { grid-column: 2; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > h3 { margin: 0 !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > p { margin: 2px 0 0 !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > span { margin-block-start: 12px !important; } /* The notes' grid. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > svg)) { margin-block-start: 32px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } /* Headings: not hyphenated (the generic es/fr/ru hyphenation), balanced. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; text-wrap: balance; } /* Chinese heading: lines break between words. Balanced, the product heading split the word '费用' ('每个渠道一笔月度费 / 用。…' at 360-768px); at most eleven characters a line, wrapped greedily, it breaks after the first sentence. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: 11.2em !important; text-wrap: wrap !important; } /* Body text: no word alone on a last line where a better break exists. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page p { text-wrap-style: pretty; } @media (min-width: 600px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { margin-block-start: 40px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > svg)) { gap: 24px !important; } } /* Three compact columns: the card as on the slide (icon, title, unit, chip at the foot). */ @media (min-width: 560px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * { padding: 16px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > h3 { margin-block-start: 16px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > p { margin-block-end: 16px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > span { margin-block-start: auto !important; } } @media (min-width: 768px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) { gap: 20px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * { padding: 24px !important; } } @media (min-width: 900px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > svg)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } } } } /* marketing/reflow/layouts/steps-panels.css */ /* * Reflow layout module steps-panels (MK-6a; ARCHITECTURE.md 5.1): product slide 10 and industry slide 7, "Every * conversation has a method." (the Steps component). * * Three steps, each a number with an accent rule, a title, a text and a sample panel: a fixed-size figure canvas * ([data-fig], 460x256 on the product deck, 520x256 for its French second panel; 500x256, 520x256 or 520x288 on the * industry decks) whose parts are placed absolutely: (1) the customer message with a language tag and an intent tag * hanging from it, (2) the record card, the policy box and three actions on connector rules, (3) the record with its * timeline rows and a "Record updated" tag. The generic layer stacks the steps and fits every canvas into the column * (figures.css), which left 10.0-11.3px labels at 360px (and Russian and French panels wider than their canvas). * * Phones (steps column under 600px): each step reads number and title on one line (the rule hidden, as in the generic * layer), the text at full width, then its panel. A panel is fit-scaled only where its smallest label (16 canvas px) * stays at 11.2px or more: the steps column must be at least 0.7 times the slide's widest panel, 322px for the 460px * product panels (11.4px at 360, 12.5px at 390) and 369px where a panel is 520px wide (French product, every industry * deck), where Russian product text runs 67 canvas px past its 460px panel, or where Spanish text runs out of its boxes * on the delivered slide (the record card's status line, the policy box). Below that, every panel of the slide is * re-laid (the same treatment for the three panels of a slide): the canvas leaves the fit-scale (zoom 1) and its parts * come into flow in their delivered order: the message or record card at full width, the tags as chips under it, the * policy box, then the actions as a list set in by 16px (on the slide they branch from the policy), the connector * rules hidden. Re-laid text takes the reflow type scale (labels 13px and up, x1.12 in Arabic script). * Product Spanish, French and Russian are re-laid at every width (on tablets too, as a column of at most 460px centred * in its panel): their second panel's text runs out of its boxes on the delivered slide, so a fitted canvas shows the * same faults at any size. * Tablets (steps column 600-699px): steps stacked, each panel under its text at full size (zoom 1 up to the canvas * width). From a 700px steps column (768px screens and wider): each panel beside its text, in a column of 59% that keeps * its smallest label at 12px or more (401 / 527 x 16 = 12.2px at 768). * * Parts are found by structure, the same in every deck and language: the steps grid is the element whose grandchildren * hold the panels, a step is a child of it, the panel is the figure's parent; inside a canvas, connectors are * aria-hidden, tags hold the aria-hidden dot, the policy box is the bordered one (border-control), the remaining text * units are the actions. No hooks. The canvases stay as delivered for assistive technology (no role or label change). * * Specificity: the industry decks' QA geometry for these canvases (heights, transforms, widths with !important on * class-level selectors) applies in both modes, and the generic layer's selectors are long attribute chains, so every * rule here carries :not(#mk-layout), an id no element has, which lifts it to id-level specificity. Colours: none changed. Directions: logical properties only; the steps follow * the slide's direction (Arabic and Urdu mirror); kept-LTR messages keep their direction (the decks' global QA rules). * Stage mode never sees this file (reflow query only). */ @media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine) { @media screen { /* Headings: the h2 and the step titles (h3 on the product deck, the title beside the number on the industry decks) are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example RU 'рабо-/ту' in an industry step title, and single words were left on last lines, for example EN 'method.', UR 'ہے۔', ES 'decir.'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *), section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child :is([data-fs="30"], [data-fs="30"] *) { hyphens: manual !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :is(h2, h3), section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child [data-fs="30"] { text-wrap: balance; } /* Product Chinese h2 '每一次对话，都有一套方法。': lines break only after its full-width comma (MK-10 round 2: balanced, and free to break between any two characters, it read '每一次对话，都 / 有一套方法。' at 360 and 390px, 7 + 6 characters with the adverb '都' left at the end of the first line). Each clause is one unbreakable run (word-break: keep-all), so the heading keeps one line where it fits and otherwise reads '每一次对话， / 都有一套方法。'; overflow-wrap: normal, as the generic layer's break-word lets the balancing break inside a run. On the h2 and its span: the generic Chinese rule sets both on every element, so inheritance alone does not reach the span. The longer clause (7em) fits every reflow width (204px of the 328px line at 360px). Not the industry h2 '每次对话都有章法。' (no comma; one line at every reflow width). Wrapping only, the text unchanged. */ section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"] *):not(#mk-layout) .slide-page :is(h2, h2 *):lang(zh) { word-break: keep-all !important; overflow-wrap: normal !important; } /* Industry step header (number and title on one flex line): no end padding at any reflow width. On the slide its 24px masks the accent rule running behind the header; reflow hides that rule (the generic layer hides positioned decorative spans), so the padding only took 24px from the title's line. Beside the panel (a 700px steps column, a 768px screen) it left a seven-character Chinese title 174.8px of the 175px it needs, so it wrapped by a fraction of a pixel into '听懂真实 / 意图。' and '核对您的 / 规则。' in all five Chinese decks (MK-10 round 2); with the padding gone the title has 198.8px there. Phones already set it to 0 (below). The product deck's number row is not affected (its title is an h3 on its own row). */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child > span:not([aria-hidden]):has(> [data-fs="30"]) { padding-inline-end: 0 !important; } /* The steps grid: one column at every reflow width (the generic layer makes card grids two columns from 1024px, which would halve each step), and a named inline-size container, so the step layout and the panel treatment follow its width. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > div > [data-fig]) { container: mk-steps / inline-size; grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; } /* (Placements carry !important: the generic layer resets grid-area on the children of these subgrid columns.) */ /* Phones: number and title on one line. Product: the number's row beside the title; industry: the header already holds both (the number's 60px box shrinks to its figure). The text at full width. */ @container mk-steps (width < 600px) { section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]):has(> h3) { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 14px !important; align-items: baseline; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]):has(> h3) > h3 { grid-column: 2 !important; margin-block-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]):has(> h3) > :nth-child(n+3) { grid-column: 1 / -1 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child [data-fs="48"][style*="width:"] { width: auto !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child > span:not([aria-hidden]) { column-gap: 14px !important; padding-inline: 0 !important; /* the padding masked the hidden rule */ margin-inline-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > p { margin-inline-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :has(> [data-fig]) { margin-block-start: 20px !important; } } /* Phones: panels re-laid where fitting would take a label under 11.2px. Every slide below a 322px steps column ... */ @container mk-steps (width < 322px) { /* The panel frames the re-laid canvas. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> [data-fig]) { display: block !important; padding: 16px !important; } /* The canvas: out of the fit-scale, a column of its parts in flow. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100%; margin: 0 !important; transform: none !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [aria-hidden="true"] { display: none !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > div:not([data-tid]):not([style*="padding-block"]) { padding-block: 14px !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [style*="white-space: nowrap"] { white-space: normal !important; } /* Tags: chips under what they describe. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:has(> [aria-hidden="true"]) { align-self: flex-start; min-height: 32px; padding-block: 6px !important; line-height: var(--lh-subheading) !important; } /* Policy box and actions: rows that grow with their text; the actions set in under the policy. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])) { min-height: 36px; padding-block: 7px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid][style*="border-control"] { align-self: flex-start; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) { margin-inline-start: 16px !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) + [data-tid] { margin-block-start: -4px !important; } /* Text on the reflow type scale (the canvas sizes are for the 1920px slide; the type scale skips figures). */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] :is([data-fs="20"], [data-fs="21"]) { font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [data-fs="18"] { font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; } } /* ... and below 369px where a panel is 520px wide, or Russian or Spanish text runs past its boxes. */ @container mk-steps (322px <= width < 369px) { /* The panel frames the re-laid canvas. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page :has(> [data-fig]) { display: block !important; padding: 16px !important; } /* The canvas: out of the fit-scale, a column of its parts in flow. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100%; margin: 0 !important; transform: none !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [aria-hidden="true"] { display: none !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > div:not([data-tid]):not([style*="padding-block"]) { padding-block: 14px !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] [style*="white-space: nowrap"] { white-space: normal !important; } /* Tags: chips under what they describe. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:has(> [aria-hidden="true"]) { align-self: flex-start; min-height: 32px; padding-block: 6px !important; line-height: var(--lh-subheading) !important; } /* Policy box and actions: rows that grow with their text; the actions set in under the policy. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])) { min-height: 36px; padding-block: 7px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid][style*="border-control"] { align-self: flex-start; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) { margin-inline-start: 16px !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) + [data-tid] { margin-block-start: -4px !important; } /* Text on the reflow type scale (the canvas sizes are for the 1920px slide; the type scale skips figures). */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] :is([data-fs="20"], [data-fs="21"]) { font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="18"] { font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; } } /* Product Spanish, French and Russian: re-laid at every width. Their second panel does not hold its text on the delivered slide (RU: the policy line runs 68 canvas px past its box under the actions, the first action's white text 38px past its dark box onto the light panel; ES: the status line drops below the record card into the connector, the policy line meets its border; FR: the policy line runs 16px past its box), so fit-scaling it at any size shows the same faults. The same re-lay as above (all three panels of the slide), as a column no wider than the product canvas (460px), centred in its panel as the fitted canvases are. */ @container mk-steps (width >= 369px) { section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page :has(> [data-fig]) { display: block !important; padding: 16px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; max-inline-size: 460px; height: auto !important; margin-block: 0 !important; margin-inline: auto !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100%; margin: 0 !important; transform: none !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [aria-hidden="true"] { display: none !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > div:not([data-tid]):not([style*="padding-block"]) { padding-block: 14px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] [style*="white-space: nowrap"] { white-space: normal !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:has(> [aria-hidden="true"]) { align-self: flex-start; min-height: 32px; padding-block: 6px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])) { min-height: 36px; padding-block: 7px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid][style*="border-control"] { align-self: flex-start; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) { margin-inline-start: 16px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) + [data-tid] { margin-block-start: -4px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] :is([data-fs="20"], [data-fs="21"]) { font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="18"] { font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; } } /* Product third panel, timeline dates: Chinese '9 月 12 日' (69px) is wider than its 64px column, on the delivered slide too, so its last character dropped onto a second line below the record card at every width. Dates keep one line, running into the 16px gap before their event if they need to (the event column stays aligned); the other languages' dates fit their columns (46-62px), so nothing else moves. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [data-tid][style*="width: 64px; flex: 0 0 auto"] { white-space: nowrap !important; } /* Tablets (steps column 600-699px): as delivered, the industry text keeps its indent under the title (the number's 60px box and 20px gap). */ /* From a 700px steps column: each panel beside its text. The panel spans the text rows and a last flexible row, which takes whatever height the panel has beyond the text, so the number, title and text stay together at the top (with the panel spanning only the text rows, a panel taller than its text stretched them: on the product deck the title floated up to 37px above its text at 768-1024px, more in the steps with the taller second and third panels). */ @container mk-steps (width >= 700px) { section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr) !important; grid-template-rows: auto auto auto minmax(0, 1fr) !important; column-gap: 24px !important; align-content: start; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :not(:last-child) { grid-column: 1 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :last-child { grid-column: 2 !important; grid-row: 1 / span 4 !important; align-self: start; margin-block-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > p { margin-inline-start: 0 !important; } } @media (min-width: 600px) { section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > div > [data-fig]) { row-gap: 56px !important; } } } } @supports not (scale: tan(atan2(1px, 1px))) { /* marketing/reflow/base.css */ /* * marketing.telonic.ai web decks: the generic reflow layer (MK-4; ARCHITECTURE.md 4.4). Both deck families use it. * * Reflow mode is everything that is not stage mode: phones, tablets, touch screens, and small or zoomed windows. * Every slide becomes a full-width band in normal flow, re-laid by the generic rules below; the per-slide layout * modules (reflow/layouts/*.css, the full build) refine single slide types on top of this file and never edit it. * * Source file: build/shell.mjs bundles marketing/reflow/**\/*.css (this file first, then figures.css, then layouts/) * and replaces `@media screen` with the complement of the registry's stage query (C2). A second copy of the bundle * follows under `@supports not (scale: tan(atan2(1px, 1px)))`, so a browser that cannot fit the stage gets reflow. * Everything here is inside `@media screen` and `@media screen` (the reflow query alone also matches print, which has * no hover), so stage mode and print never see it: stage identity and the printed deck are unchanged. * * The slides set every style inline (style=""), so overriding declarations carry !important. Selectors key on the * DOM contract C1 (section.ds > .ds-frame > .slide-page > slide root) and on the inline style text, never on a slide * number. Nothing here applies inside [data-fig] figures (figures.css fits them whole) except where it says so. * * Colours: only the deck's own tokens and the runtime's --mk-* tokens (both from styles/tokens.css values); the * band gap is surface #F8F4F7 (plum-tinted). No text colour is changed, so every pairing stays as delivered. * Directions: logical properties only; [data-keep-ltr] islands and keep their own direction (the deck's global * QA rules apply in both modes); nothing is mirrored again. */ @media screen { @media screen { /* the reflow query also matches print (no hover on paper): print keeps the slides */ /* @type-scale:begin (generated by marketing/reflow/gen-type-scale.mjs from type-scale.json; do not edit) */ :root { --rs: 1; --fs-120: clamp(54px, 39.4921px + 4.2328vw, 72px); --fs-96: clamp(34px, 19.4921px + 4.2328vw, 52px); --fs-80: clamp(34px, 23.619px + 3.1746vw, 48px); --fs-72: clamp(32px, 23.6825px + 2.6455vw, 44px); --fs-64: clamp(28px, 19.6825px + 2.6455vw, 40px); --fs-56: clamp(27px, 20.746px + 2.1164vw, 37px); --fs-48: clamp(26px, 21.8095px + 1.5873vw, 34px); --fs-40: clamp(24px, 21.873px + 1.0582vw, 30px); --fs-36: clamp(24px, 21.873px + 1.0582vw, 30px); --fs-34: clamp(21px, 16.873px + 1.0582vw, 25px); --fs-32: clamp(21px, 16.873px + 1.0582vw, 25px); --fs-30: clamp(21px, 16.873px + 1.0582vw, 25px); --fs-28: clamp(19px, 17.9683px + 0.2646vw, 20px); --fs-26: clamp(19px, 17.9683px + 0.2646vw, 20px); --fs-24: clamp(17px, 15.9683px + 0.2646vw, 18px); --fs-22: clamp(16px, 14.9683px + 0.2646vw, 17px); --fs-21: clamp(16px, 14.9683px + 0.2646vw, 17px); --fs-20: clamp(16px, 14.9683px + 0.2646vw, 17px); --fs-18: clamp(15px, 13.9683px + 0.2646vw, 16px); --fs-17: clamp(14px, 12.9683px + 0.2646vw, 15px); --fs-16: clamp(13px, 11.9683px + 0.2646vw, 14px); --fs-15: 12px; --fs-14: 12px; --fs-13: 12px; --fs-12: 12px; --fs-11: 12px; --lh-heading: 1.12; --lh-subheading: 1.25; --lh-body: 1.5; } :root:is(:lang(ar), :lang(ur)) { --rs: 1.12; --lh-heading: 1.35; --lh-subheading: 1.5; --lh-body: 1.8; } :root:lang(zh) { --lh-heading: 1.25; --lh-subheading: 1.35; --lh-body: 1.6; } .slide-page [data-fs="120"]:not([data-fig] *) { font-size: calc(var(--fs-120) * var(--rs)) !important; } .slide-page [data-fs="96"]:not([data-fig] *) { font-size: calc(var(--fs-96) * var(--rs)) !important; } .slide-page [data-fs="80"]:not([data-fig] *) { font-size: calc(var(--fs-80) * var(--rs)) !important; } .slide-page [data-fs="72"]:not([data-fig] *) { font-size: calc(var(--fs-72) * var(--rs)) !important; } .slide-page [data-fs="64"]:not([data-fig] *) { font-size: calc(var(--fs-64) * var(--rs)) !important; } .slide-page [data-fs="56"]:not([data-fig] *) { font-size: calc(var(--fs-56) * var(--rs)) !important; } .slide-page [data-fs="48"]:not([data-fig] *) { font-size: calc(var(--fs-48) * var(--rs)) !important; } .slide-page [data-fs="40"]:not([data-fig] *) { font-size: calc(var(--fs-40) * var(--rs)) !important; } .slide-page [data-fs="36"]:not([data-fig] *) { font-size: calc(var(--fs-36) * var(--rs)) !important; } .slide-page [data-fs="34"]:not([data-fig] *) { font-size: calc(var(--fs-34) * var(--rs)) !important; } .slide-page [data-fs="32"]:not([data-fig] *) { font-size: calc(var(--fs-32) * var(--rs)) !important; } .slide-page [data-fs="30"]:not([data-fig] *) { font-size: calc(var(--fs-30) * var(--rs)) !important; } .slide-page [data-fs="28"]:not([data-fig] *) { font-size: calc(var(--fs-28) * var(--rs)) !important; } .slide-page [data-fs="26"]:not([data-fig] *) { font-size: calc(var(--fs-26) * var(--rs)) !important; } .slide-page [data-fs="24"]:not([data-fig] *) { font-size: calc(var(--fs-24) * var(--rs)) !important; } .slide-page [data-fs="22"]:not([data-fig] *) { font-size: calc(var(--fs-22) * var(--rs)) !important; } .slide-page [data-fs="21"]:not([data-fig] *) { font-size: calc(var(--fs-21) * var(--rs)) !important; } .slide-page [data-fs="20"]:not([data-fig] *) { font-size: calc(var(--fs-20) * var(--rs)) !important; } .slide-page [data-fs="18"]:not([data-fig] *) { font-size: calc(var(--fs-18) * var(--rs)) !important; } .slide-page [data-fs="17"]:not([data-fig] *) { font-size: calc(var(--fs-17) * var(--rs)) !important; } .slide-page [data-fs="16"]:not([data-fig] *) { font-size: calc(var(--fs-16) * var(--rs)) !important; } .slide-page [data-fs="15"]:not([data-fig] *) { font-size: calc(var(--fs-15) * var(--rs)) !important; } .slide-page [data-fs="14"]:not([data-fig] *) { font-size: calc(var(--fs-14) * var(--rs)) !important; } .slide-page [data-fs="13"]:not([data-fig] *) { font-size: calc(var(--fs-13) * var(--rs)) !important; } .slide-page [data-fs="12"]:not([data-fig] *) { font-size: calc(var(--fs-12) * var(--rs)) !important; } .slide-page [data-fs="11"]:not([data-fig] *) { font-size: calc(var(--fs-11) * var(--rs)) !important; } .slide-page :is([data-fs="36"], [data-fs="40"], [data-fs="48"], [data-fs="56"], [data-fs="64"], [data-fs="72"], [data-fs="80"], [data-fs="96"], [data-fs="120"]):not([data-fig] *) { line-height: var(--lh-heading) !important; } .slide-page :is([data-fs="30"], [data-fs="32"], [data-fs="34"]):not([data-fig] *) { line-height: var(--lh-subheading) !important; } .slide-page :is([data-fs="20"], [data-fs="21"], [data-fs="22"], [data-fs="24"], [data-fs="26"], [data-fs="28"]):not([data-fig] *) { line-height: var(--lh-body) !important; } /* @type-scale:end */ /* ------------------------------------------------------------------ page and band chrome ---------------- */ :root { --mk-r-pad-bs: 40px; /* band padding, block start */ --mk-r-pad-be: 48px; /* band padding, block end */ --mk-r-pad-i: 16px; /* band padding, inline */ --mk-r-gap: 24px; /* row gap of collapsed grids */ } html { scroll-snap-type: none; } body { background: var(--mk-surface); } .mk-deck { display: flex; flex-direction: column; row-gap: 8px; /* 8px surface gap between the bands */ margin: 0; padding: 0; background: var(--mk-surface); } /* overflow-x: clip keeps the page from scrolling sideways if anything is still wider than a band; the checker reports any text that this clips. */ .mk-deck > .ds { display: block; margin: 0; padding: 0; overflow-x: clip; } .ds > .ds-frame { width: auto; height: auto; overflow: visible; } .ds-frame > .slide-page { width: auto; height: auto; overflow: visible; transform: none; } /* The slide root (section, or a component root div): a band that keeps its tone (dark slides stay plum). */ .slide-page > * { width: auto !important; height: auto !important; min-height: 0 !important; max-width: none !important; overflow: visible !important; padding: var(--mk-r-pad-bs) var(--mk-r-pad-i) var(--mk-r-pad-be) !important; } /* Flex children sized for the 1080px canvas take their content height. */ .slide-page > * > *, .slide-page [data-main] > * { min-height: 0 !important; } /* Per-slide header: the wordmark and its divider are hidden (the bar carries the brand); the chapter overline stays. The per-slide footer (deck name, page number) is hidden. */ .slide-page > * > header { flex-wrap: wrap; gap: 8px 12px !important; padding-block-end: 12px !important; } .slide-page > * > header > img, .slide-page > * > header > [aria-hidden="true"] { display: none !important; } .slide-page > * > footer { display: none !important; } .slide-page [data-main] { padding-block: 24px 0 !important; } /* Cover and closing wordmarks: static, in flow (at the top of the cover, at the end of the closing slide). */ .slide-page > * > img[style*="position: absolute"] { position: static !important; order: -1; align-self: flex-start; width: auto !important; height: 28px !important; margin-block: 0 32px; } .slide-page > * > img[style*="position: absolute"][style*="bottom:"] { order: 99; margin-block: 40px 0; } /* Full-bleed decorative artwork behind a slide (closing slide): hidden. */ .slide-page > * > svg[aria-hidden="true"][style*="position: absolute"] { display: none !important; } /* ------------------------------------------------------------------ the generic layer ------------------- */ /* Absolutely positioned decorative spans (separators, rules, dots) outside figures and kept-LTR pictures. */ .slide-page span[aria-hidden="true"][style*="position: absolute"]:not([data-fig] *):not([data-keep-ltr] *) { display: none !important; } /* Line breaks: nowrap released outside figures (labels placed absolutely on a kept-LTR chart keep one line); a word (or a run the QA joined with no-break spaces) longer than the line breaks rather than overflowing. */ .slide-page [style*="white-space: nowrap"]:not([data-fig], [data-fig] *, [data-keep-ltr] [style*="position: absolute"]) { white-space: normal !important; } .slide-page > *, .slide-page :not([data-fig], [data-fig] *) { overflow-wrap: break-word !important; } .slide-page [data-fig] { overflow-wrap: normal !important; } /* figures wrap as on the slide */ /* Chinese: the decks' QA kept some lines whole for the 1920px measure (word-break: keep-all, overflow-wrap: anywhere); in a narrow column that forces breaks at arbitrary points (a line starting with 。). Reflow breaks CJK text between characters under the deck's own line-break: strict. */ :root:lang(zh) body .mk-deck .slide-page :not([data-fig], [data-fig] *) { word-break: normal !important; overflow-wrap: break-word !important; } /* Breaking between any two characters left one character (or a two-character word split in half, '打/造。') alone on the last line of a narrow Chinese heading; balanced lines keep the lines of a heading near equal. Headings and subheadings only (data-fs 30 and up); not where reflow keeps one line (figures, labels placed on kept-LTR charts). Browsers without text-wrap: balance wrap as before. */ :root:lang(zh) .slide-page :is([data-fs="30"], [data-fs="32"], [data-fs="34"], [data-fs="36"], [data-fs="40"], [data-fs="48"], [data-fs="56"], [data-fs="64"], [data-fs="72"], [data-fs="80"], [data-fs="96"], [data-fs="120"]):not([data-fig] *, [data-keep-ltr] [style*="position: absolute"]) { text-wrap: balance; } /* Narrow columns: automatic hyphenation for the Latin and Cyrillic translations (the browser's dictionary for the page language; elements the deck sets its own hyphens on keep them). */ :root:is(:lang(es), :lang(fr), :lang(ru)) .slide-page > * { hyphens: auto; } :root:is(:lang(es), :lang(fr), :lang(ru)) .slide-page [data-fig] { hyphens: manual; } /* Long words only. Chromium hyphenated every word of five letters or more, brand and place names included ('Goo-/gle Workspace', 'Ex-/change', 'Worksp-/ace', 'Sau-/dita'). Words under 11 letters keep whole (the longest brand name in the decks' text is 10: Salesforce, SharePoint, ServiceNow, Confluence, ElevenLabs, SiteMinder), with at least 4 letters on each side of the break, as the French product deck's own QA rule does (10 4 4). This also covers elements the deck hyphenates itself (the Russian decks, French product paragraphs); without !important, so a module's own limit wins. Every word under 11 letters fits its line, so no word is cut without a hyphen (es, fr, ru at 360-1023px). WebKit has no hyphenate-limit-chars: there Spanish and French are not hyphenated (no word needs it from 360px); Russian keeps the browser's hyphenation, which its long words need ('Удовлетворённость' in a 360px stat caption) and which split no Latin word in Chromium. */ :root:is(:lang(es), :lang(fr), :lang(ru)) .slide-page :not([data-fig], [data-fig] *) { hyphenate-limit-chars: 11 4 4; } @supports not (hyphenate-limit-chars: 11 4 4) { :root:is(:lang(es), :lang(fr)) .slide-page :not([data-fig], [data-fig] *) { -webkit-hyphens: manual; hyphens: manual; } } /* Fixed widths become limits; paragraphs keep a reading measure. */ .slide-page [style*="max-width"]:not([data-fig], [data-fig] *) { max-width: 100% !important; } .slide-page p:not([data-fig] *) { max-width: min(100%, 38em) !important; } .slide-page img:not([data-fig] *) { max-width: 100%; object-fit: contain; } .slide-page svg:not([data-fig] *) { max-width: 100%; } /* Canvas-height layouts: auto margins that pushed a block to the bottom of the 1080px slide become a gap. */ .slide-page [style*="margin-block-start: auto"]:not([data-fig] *) { margin-block-start: 32px !important; } .slide-page [style*="margin-block: auto"]:not([data-fig] *) { margin-block: 32px 0 !important; } /* A positioned canvas whose content is all absolutely positioned (a chart plot) had the height the 1080px slide left it; in flow it would collapse to nothing, so it gets a block size from its width. */ .slide-page [style*="position: relative"]:has(> [style*="position: absolute"]):not(:has(> :not([style*="position: absolute"]))):not([style*="; height:"]):not([data-fig], [data-fig] *, :has(> [data-fig])) { flex: none !important; min-height: 160px !important; aspect-ratio: 16 / 10; } /* Tags placed on a kept-LTR chart's plot (the '02:10 Outage' callout: left at the highlighted bar's centre and translateX(-50%)) fit the 1920px plot; in a phone column the plot is narrower than the slide's, and a tag centred on a bar near the plot's edge ran past the plot, its card and the band (cut at the screen edge on travel RU and AR). In reflow the tag stays inside its positioned plot: centred on the highlighted bar by anchor positioning (justify-self: anchor-center), which shifts it back inside the plot where centring would overflow; where anchor positioning is unsupported, or the plot has no highlighted bar, it is centred in the plot. Stage mode keeps the slide's own placement. */ .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *) > [style*="position: absolute"][style*="translateX(-50%)"]:not([aria-hidden="true"]) { left: 0 !important; right: 0 !important; margin-inline: auto !important; width: fit-content !important; max-width: 100% !important; transform: none !important; } @supports (anchor-name: --mk-mark) and (justify-self: anchor-center) { .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *) > [aria-hidden="true"] > [style*="background: var(--color-accent)"] { anchor-name: --mk-mark; } .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *):has(> [aria-hidden="true"] > [style*="background: var(--color-accent)"]) { anchor-scope: --mk-mark; } .slide-page [style*="position: relative"]:is([data-keep-ltr], [data-keep-ltr] *):not([data-fig], [data-fig] *):has(> [aria-hidden="true"] > [style*="background: var(--color-accent)"]) > [style*="position: absolute"][style*="translateX(-50%)"]:not([aria-hidden="true"]) { position-anchor: --mk-mark; left: auto !important; right: auto !important; margin-inline: 0 !important; justify-self: anchor-center; } } /* Flex rows. A row of items that cannot shrink (tags, chips, logos, tabs, label and value) wraps instead of running past the edge; a row with a child meant to shrink (an icon beside its text: min-width 0, or flex 1) keeps one line. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):not(:has(> [style*="min-width: 0"], > [style*="flex: 1 "], > [aria-hidden="true"]:first-child + :last-child, > :first-child + :is(h2, h3, h4):last-child, > [style*="flex: 0 0 auto"][style*="width:"]:first-child + :last-child)):not([data-fig] *) { flex-wrap: wrap !important; } /* A marker (bullet, dot, rule) or a number beside one text or heading keeps its line; the text shrinks and wraps beside it. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]) > :is([aria-hidden="true"]:first-child + :last-child, :first-child + :is(h2, h3, h4):last-child, [style*="flex: 0 0 auto"][style*="width:"]:first-child + :last-child):not([data-fig] *) { min-width: 0 !important; flex-shrink: 1 !important; } /* A fixed-height row that clips (a card's tag strip) grows with its wrapped content. */ .slide-page [style*="display: flex"][style*="overflow: hidden"]:not([style*="flex-direction: column"]):not([data-fig] *) { height: auto !important; padding-block: 14px !important; } /* A band stretched to share the canvas height (flex 1) with only inline padding gets block padding of its own. */ .slide-page [style*="flex: 1 1 0%"][style*="padding-inline:"]:not([style*="padding-block"], [style*="padding:"]):not([data-fig] *) { padding-block: 20px !important; } /* A fixed-height box that clips (the mock-UI top of a card) grows with its content. */ .slide-page div[style*="; height:"][style*="overflow: hidden"]:not([aria-hidden="true"]):not([data-fig], [data-fig] *) { height: auto !important; } /* Fixed-height chips grow if their text wraps. */ .slide-page [style*="display: inline-flex"][style*="; height:"]:not([data-fig] *) { height: auto !important; min-height: 28px; padding-block: 4px !important; } /* Bar charts drawn as a row of equal flex bars (eight or more) keep their bars visible: narrower gaps. */ .slide-page [data-keep-ltr] [style*="display: flex"]:has(> [style*="flex: 1 1 0px"]:nth-child(8)):not([data-fig] *) { column-gap: 2px !important; } /* Proportional rows (every child flex-basis 0: a lifecycle line of phases) stack on phones. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):has(> :nth-child(2)):not(:has(> :not([style*=" 1 0px"], [style*=" 1 0%"]))):not([data-fig] *, [data-keep-ltr] *) { flex-direction: column !important; row-gap: var(--mk-r-gap) !important; } /* Grids. Reflowed grids (12 columns, equal columns, asymmetric splits, label columns, tracks of max-content, subgrids) lose their row and area templates, and their items' placement. Grids with small fixed tracks (a 40px number column) keep their columns and their items' placement. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"], [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 261px"], [style*="subgrid"], [style*="grid-template-areas"]):not([data-fig], [data-fig] *) { grid-template-rows: none !important; grid-template-areas: none !important; } .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"], [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 261px"], [style*="subgrid"], [style*="grid-template-areas"]):not([data-fig], [data-fig] *) > * { grid-area: auto !important; } /* Connector rules laid across a grid's tracks (decorative items placed on the grid) are hidden with the layout. A decorative illustration that holds text (product slide 3's sample collage, aria-hidden as a whole) is not a connector and stays. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) > [aria-hidden="true"]:is([style*="grid-area"], [style*="grid-column"]):not(:has([data-tid])) { display: none !important; } /* 12-column grids and asymmetric splits: one column. */ .slide-page :is([style*="grid-template-columns: repeat(12,"], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) { grid-template-columns: minmax(0, 1fr) !important; } /* Equal-column (card) grids: one column on phones, two from 600px; in kept-LTR pictures of UI (a console's tiles), two on phones and three from 600px. */ .slide-page [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):not([data-fig], [data-fig] *) { grid-template-columns: minmax(0, 1fr) !important; } .slide-page [data-keep-ltr] [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Logo walls (8 columns): as many 120px columns as fit (a logo and its name side by side). */ .slide-page [style*="grid-template-columns: repeat(8, minmax(0px, 1fr))"]:not([data-fig], [data-fig] *) { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; } /* Arabic-script pages set the names 1.12 times larger (--rs), in the Latin of IBM Plex Sans Arabic, which is wider: the longest name ('Booking.com', 96px beside its 28px logo and 10px gap) needs 134px; 140px columns. */ :root:is(:lang(ar), :lang(ur)) .slide-page [style*="grid-template-columns: repeat(8, minmax(0px, 1fr))"]:not([data-fig], [data-fig] *) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; } /* Tracks of max-content (a flow of tags, two to four across): two shrinkable columns. */ .slide-page :is([style*="grid-template-columns: repeat(4, max-content)"], [style*="grid-template-columns: repeat(2, max-content)"]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, max-content)) !important; column-gap: 16px !important; } /* Label columns of rows (channel name | description): stacked on phones. */ .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):not([data-fig], [data-fig] *) { grid-template-columns: minmax(0, 1fr) !important; } /* Data rows with a wide label track (label | bar | value | change), and label | bar rows: the label track shrinks. */ .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr) 56px 64px"], [style*="grid-template-columns: max-content minmax(48px, 1fr) 44px 48px"]):not([data-fig], [data-fig] *) { grid-template-columns: fit-content(45%) minmax(40px, 1fr) auto auto !important; } .slide-page [style*="grid-template-columns: max-content minmax(0px, 1fr)"]:not([data-fig], [data-fig] *) { grid-template-columns: fit-content(50%) minmax(0, 1fr) !important; } /* Reflowed grids that only set a column gap get a row gap. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"], [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 261px"]):not([style*="row-gap"], [style*="; gap:"], [style^="gap:"]):not([data-fig], [data-fig] *) { row-gap: var(--mk-r-gap) !important; } /* Separators between the columns of a reflowed grid, and the padding that kept text off them. */ .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) > [style*="border-inline-start"] { border-inline-start: 0 !important; } .slide-page :is([style*="grid-template-columns: repeat("], [style*="grid-template-columns: minmax(0px, 1"]):not([data-fig], [data-fig] *) > [style*="border-inline-start"]:is([style*="padding-inline-start"], [style*="padding-inline:"]) { padding-inline-start: 0 !important; } /* Hint line breaks the decks' QA added for the 1920px measure (br[data-hint]) are hidden. The QA wrote them with no space around them, so the build (process.py) writes a plain space before each one where its neighbours need it and marks it data-hint="space"; hiding it then leaves the two words apart. Hints inside figures keep data-hint="" and stay (figures are drawn as on the slide). */ .slide-page br[data-hint="space"] { display: none; } /* ------------------------------------------------------------------ tablets and wider (600px and up) ----- */ @media (min-width: 600px) { :root { --mk-r-pad-bs: 56px; --mk-r-pad-be: 64px; --mk-r-pad-i: max(32px, calc((100% - 1120px) / 2)); --mk-r-gap: 32px; } .slide-page [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):not(:has([data-fig])):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .slide-page [data-keep-ltr] [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"], [style*="repeat(2,"]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Label columns of rows: a 180px label column, or the label's longest unbreakable run where that is wider (a heading such as 'Сайт и приложение.' at 25px: in a fixed 180px track overflow-wrap left its full stop alone on a line). Each row is its own grid, so their list becomes the grid and the rows its subgrids: every row of a list shares the one label column, and the descriptions stay aligned. The list's gap is the rows' own (20px or 32px). Where subgrid is unsupported each row keeps its own 180px column. */ .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):not([data-fig], [data-fig] *) { grid-template-columns: 180px minmax(0, 1fr) !important; grid-template-columns: subgrid !important; } .slide-page :has(> :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"])):not([data-fig], [data-fig] *) { display: grid !important; grid-template-columns: minmax(min-content, 180px) minmax(0, 1fr) !important; column-gap: 32px !important; } .slide-page :has(> :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"])[style*="column-gap: 20px"]):not([data-fig], [data-fig] *) { column-gap: 20px !important; } .slide-page :has(> :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"])):not([data-fig], [data-fig] *) > * { grid-column: 1 / -1 !important; } /* Card grids whose cards hold figures (steps with panels) stay one column until 1024px, so the figures stay large. */ @media (min-width: 1024px) { .slide-page [style*="grid-template-columns: repeat("][style*=", minmax(0px, 1fr))"]:not([style*="repeat(12,"], [style*="repeat(8,"]):has([data-fig]):not([data-fig], [data-fig] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Proportional rows: two items to a line. */ .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):has(> :nth-child(2)):not(:has(> :not([style*=" 1 0px"], [style*=" 1 0%"]))):not([data-fig] *, [data-keep-ltr] *) { flex-direction: row !important; flex-wrap: wrap !important; } .slide-page [style*="display: flex"]:not([style*="flex-direction: column"]):has(> :nth-child(2)):not(:has(> :not([style*=" 1 0px"], [style*=" 1 0%"]))):not([data-fig] *, [data-keep-ltr] *) > * { flex-basis: 40% !important; } } } } /* marketing/reflow/figures.css */ /* * marketing.telonic.ai web decks: figures in reflow mode, v1 (MK-4; ARCHITECTURE.md 4.4, "Figures"). * * A figure is a fixed-size canvas the pipeline marks [data-fig] with --fig-w / --fig-h (its canvas width and height; * C1). In v1 every figure keeps its internal layout and is fit-scaled to the width available to it: its parent becomes * an inline-size container and the figure gets zoom: min(1, 100cqw / --fig-w) (never enlarged). zoom changes the * layout box, so the band's height follows and nothing overlaps, in either direction. The type scale (base.css) never * applies inside a figure, so its labels keep their canvas proportions; where that leaves a label under 11px the slide * is cramped in v1 and is listed for the full build, whose per-slide modules (reflow/layouts/) re-lay those figures. * * Some figures carry text that runs past the figure box on the delivered slide (a translated label longer than its tag * or button). On the slide it lands on the panel around the figure; fitted to a phone column it would land past the * band's edge and be cut off. Those figures get --fig-ink-s / --fig-ink-e, the measured overhang at the inline start and * end in canvas px (type-scale.json "figInk", measured by gen-type-scale.mjs --measure and generated into the block * below): the figure is fitted with that overhang included and keeps it as margins, so the whole text stays in its * panel. Every other figure has no overhang and fits exactly as before. * * The zoom is static (no motion), like the stage fit (owner decision 8). Bundled after base.css by build/shell.mjs, * inside the reflow query only. */ @media screen { @media screen { /* the reflow query also matches print (no hover on paper): print keeps the slides */ /* The figure's parent: an inline-size container as wide as its column. */ .slide-page :has(> [data-fig]) { container-type: inline-size; min-width: 0; max-width: 100%; box-sizing: border-box; } .slide-page [data-fig] { flex-shrink: 0; margin-inline: var(--fig-ink-s, 0px) var(--fig-ink-e, 0px); zoom: min(1, tan(atan2(100cqw, var(--fig-w) + var(--fig-ink-s, 0px) + var(--fig-ink-e, 0px)))); } /* @fig-ink:begin (generated by marketing/reflow/gen-type-scale.mjs from type-scale.json; do not edit) */ :root[data-deck="banking"][lang="fr"] .slide-page [data-fig]:has([data-tid="s09-006"]) { --fig-ink-s: 0px; --fig-ink-e: 29px; } :root[data-deck="hospitality"][lang="fr"] .slide-page [data-fig]:has([data-tid="s11-013"]) { --fig-ink-s: 23px; --fig-ink-e: 23px; } :root[data-deck="product"][lang="es"] .slide-page [data-fig]:has([data-tid="s07-013"]) { --fig-ink-s: 26px; --fig-ink-e: 0px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s07-013"]) { --fig-ink-s: 24px; --fig-ink-e: 23px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s10-006"]) { --fig-ink-s: 0px; --fig-ink-e: 67px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s10-013"]) { --fig-ink-s: 0px; --fig-ink-e: 51px; } :root[data-deck="product"][lang="ru"] .slide-page [data-fig]:has([data-tid="s18-004"]) { --fig-ink-s: 19px; --fig-ink-e: 0px; } :root[data-deck="property"][lang="es"] .slide-page [data-fig]:has([data-tid="s09-006"]) { --fig-ink-s: 54px; --fig-ink-e: 0px; } :root[data-deck="property"][lang="fr"] .slide-page [data-fig]:has([data-tid="s09-006"]) { --fig-ink-s: 0px; --fig-ink-e: 33px; } /* @fig-ink:end */ /* A canvas positioned absolutely in its panel comes into flow, so the panel takes the canvas height; the zoom replaces the canvas's own fit transform. */ .slide-page [data-fig][style*="position: absolute"] { position: relative !important; inset: auto !important; transform: none !important; } /* Text set over a figure's panel (an "Illustrative" tag) goes into flow above the figure. */ .slide-page :has(> [data-fig]) > [style*="position: absolute"]:not([data-fig]):not([aria-hidden="true"]) { position: static !important; display: block; margin-block-end: 8px; text-align: end; } /* Several figures side by side (a row of badges) wrap onto as many rows as they need. */ .slide-page :has(> [data-fig] + [data-fig]) { flex-wrap: wrap !important; } } } /* marketing/reflow/layouts/any-hour.css */ /* * Reflow layout module any-hour (MK-6a; ARCHITECTURE.md 5.1): product slide 13 and industry slide 13, "Ready at any * hour, and ready for the rush." (the same skeleton in every deck; only the bar heights and the tag differ). * * Four text blocks in a 2 x 2 grid (a rule under the first row, a rule between the columns) beside a chart panel: title * and "Illustrative", a legend, and a plot kept left to right in every language (data-keep-ltr="chart"; 24 bars drawn as * percentage heights, gridlines, a tag on the highlighted bar, "Disruption" or "Launch") over a time axis. The generic * layer stacked the blocks with the slide's paddings and rules (uneven gaps and rules on phones, a 96px gap between the * rows on tablets), gave the plot a 16:10 box and kept the panel's 40px padding. * * Here: * - phones: the blocks stacked with even rules between them; the panel padded 20px; the plot full width at 4:3, so * the bars keep a real height (axis labels on the reflow scale, 13px and up); * - from a 600px screen: the blocks 2 x 2 with the slide's rules (one under the first row, one between the columns); * the panel padded 32px; the plot full width at 16:9. * The tag stays inside the plot (the generic layer centres it on its bar and keeps it within the plot). Parts are found * by structure: the blocks are the children of the two-column grid; the plot is the positioned box that fills its * panel (flex 1) inside the kept-LTR island, which is the plot itself on the product deck and the whole panel on the * industry decks; the panel is the plot's parent. No hooks. * * Specificity: the generic layer's selectors are long attribute chains, so every rule here carries :not(#mk-layout), an * id no element has, which lifts it to id-level specificity. Colours: the rules use the deck's border-decorative token, * as on the slide. Directions: logical properties only; the blocks follow the slide's direction (Arabic and Urdu * mirror), the plot and axis stay left to right (the decks' global QA rules). Stage mode never sees this file. */ @media screen { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example RU 'су-/ток', 'пи-/ковой', ES 'pi-/cos', and single words were left on last lines, for example EN 'rush.', AR 'الطلب.', RU 'нагрузке.'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese titles made of two clauses (the first and the fourth block: '每个小时，每一天。', '关键时刻，有工作人员接手。'; industry '每时每刻，每一天。', '关键时刻，有人接手。'): lines break only after the full-width comma (MK-10, fix round 3: balanced, and free to break between any two characters, the product title split the word '工作', '关键时刻，有工 / 作人员接手。', in the 323px column at 768px). Each clause is one unbreakable run (word-break: keep-all), so the title keeps one line where it fits and otherwise breaks after the comma; overflow-wrap: normal, as the generic layer's break-word lets the balancing break inside a run to even the lines. The longest clause, '有工作人员接手。' (8em), fits every column from 320px up (186px of the 239px column at 600px). Not the second and third titles: they have no comma, and one run as long as '任何业务量下都保持一致。' (12em) would overflow the 600-700px columns. Wrapping only, the text unchanged. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :is(:first-child, :nth-child(4)) :is(h3, h3 *):lang(zh) { word-break: keep-all !important; overflow-wrap: normal !important; } /* Phones: the blocks stacked, a rule above each block after the first. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { row-gap: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 20px 0 !important; border-block-end: 0 !important; border-inline-start: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :not(:first-child) { border-block-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :last-child { padding-block-end: 0 !important; } /* The chart panel and its plot. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :has(> [style*="position: relative"][style*="flex: 1 1 0%"]) { padding: 20px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is([data-keep-ltr], [data-keep-ltr] *)[style*="position: relative"][style*="flex: 1 1 0%"] { flex: none !important; aspect-ratio: 4 / 3; min-height: 0 !important; margin-block-start: 24px !important; } @media (min-width: 600px) { /* The blocks 2 x 2 with the slide's rules: under the first row, between the columns. */ section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { column-gap: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(-n+2) { padding-block-end: 28px !important; border-block-end: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(n+3) { padding-block-start: 28px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(odd) { padding-inline-end: 28px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(even) { padding-inline-start: 28px !important; border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :has(> [style*="position: relative"][style*="flex: 1 1 0%"]) { padding: 32px !important; } section.ds[data-layout="any-hour"]:not(#mk-layout) .slide-page :is([data-keep-ltr], [data-keep-ltr] *)[style*="position: relative"][style*="flex: 1 1 0%"] { aspect-ratio: 16 / 9; margin-block-start: 32px !important; } } } } /* marketing/reflow/layouts/approach.css */ /* * Reflow layout module approach (MK-6b; ARCHITECTURE.md 5.1): product slide 4 and industry slide 4, "Our approach" * (dark, anchor #442C43). * * The slide: a 28px lead, then three pillars (Specialise, Centralise, Complete) on a three-column grid whose rows the * pillars share as subgrids (number, title, body, three bullets), divided by vertical hairlines (absolutely placed, * aria-hidden). Variants: the product deck's titles are 72 canvas px, the industry decks' 64px; product and property * pillars have a body paragraph (six rows), the other four industries do not (five rows); the industry decks add a * row of five stats under a hairline (a 56px figure in #F2A98C and a caption). * The generic layer stacks the pillars (two columns from 600px, so the third sat alone) and the stats (one column, * figures 27px). This module sets the ARCHITECTURE target: * - phones: pillars stacked (number, title 34px, body, bullets), the slide's hairlines turned into top borders * between pillars; the canvas gaps tightened (title 8px under the number, bullets 8px apart); the bullet squares * centred on the first line of their text at every type size; stats in two columns, figures 36px (35px at 360), * the fifth stat across both columns; * - 600px and up: pillars stacked (three 213px columns at 768 would split the longer translated titles); stats in * three plus two, figures rising to 44px; * - from 1000px (the 1023px reflow edge and 1024px touch screens): pillars in three columns sharing their rows again * (subgrid), the slide's hairlines between them, titles 36px (the longest title word, RU 'Специализация.', is * 262px there: a third of a 1000px band leaves 280px); stats five in a row. * Headings are not hyphenated and are balanced; wrapping only, the text unchanged. Parts are found by structure (the * three-column grid under the lead, the five-column grid of stats). No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: the slide's own * hairline colour (white at 20%, as its header and stats rules) for the borders between pillars; nothing else * changed (white and #F2A98C on the anchor, as delivered). Directions: logical properties only; pillars, bullets and * stats follow the slide's direction (Arabic and Urdu mirror). Stage mode never sees this file (reflow query only). */ @media screen { @media screen { section.ds[data-layout="approach"]:not(#mk-layout) { --fs-72: clamp(33px, 27.81px + 1.5873vw, 40px); /* pillar titles (product): 34px at 390, 40px at 768 */ --fs-64: clamp(33px, 27.81px + 1.5873vw, 40px); /* pillar titles (industry): the same */ --fs-56: clamp(35px, 27.746px + 2.1164vw, 44px); /* stat figures: 36px at 390, 44px at 768 */ } /* The pillars' grid: one column, pillars under hairlines. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { margin-block: 32px 0 !important; row-gap: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * { padding-block: 28px !important; align-content: start; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :not(:first-child) { border-block-start: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Inside a pillar: title, body and bullets closer than on the canvas. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > h2 { margin-block-start: 8px !important; hyphens: manual !important; text-wrap: balance; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > p { margin-block-start: 12px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > div { margin-block-start: 8px !important; gap: 12px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > :is(h2, p) + div { margin-block-start: 20px !important; } /* Lead, bodies, bullets and stat captions: no word alone on a last line where a better break exists (EN 'Knows where each policyholder / is', FR 'Conçu pour les processus de / l’immobilier' in the three columns from 1000px). */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page :is(p, [data-fs="24"]) { text-wrap-style: pretty; } /* The bullet square (6px) centred on the first line of its text. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > div > [aria-hidden="true"]:first-child { margin-block-start: calc(var(--fs-24) * var(--rs) * var(--lh-body) / 2 - 3px) !important; } /* Product deck (no stats): nothing under the last pillar but the band's own padding. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:last-child > :last-child { padding-block-end: 0 !important; } /* The stats (industry decks): two columns under the slide's hairline, which sits as far below the last pillar's bullets (that pillar's own bottom padding) as the hairlines between the pillars. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] { margin-block-start: 0 !important; padding-block-start: 28px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 24px !important; } /* Captions: not hyphenated (short lists of names in narrow columns; the generic es/fr/ru hyphenation split FR 'What-/sApp' at 768px). Every word fits its column whole. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > * > p + p { margin-block-start: 8px !important; hyphens: manual !important; } /* Phones: the fifth stat across both columns, so its caption keeps the full measure instead of half of it. */ @media (max-width: 599.98px) { section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; } } @media (min-width: 600px) { section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; margin-block-start: 40px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * { padding-block: 32px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] { padding-block-start: 32px !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 32px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > * { grid-column: span 2 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > :nth-child(n + 4) { grid-column: span 3 !important; } } /* The 1023px edge: three pillars side by side on shared rows, as on the slide. */ @media (min-width: 1000px) { section.ds[data-layout="approach"]:not(#mk-layout) { --fs-72: 36px; --fs-64: 36px; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(6, auto) !important; column-gap: 48px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > :nth-child(n) { grid-row: span 6 !important; grid-template-rows: subgrid !important; padding-block: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > p)) { grid-template-rows: repeat(5, auto) !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > p)) > :nth-child(n) { grid-row: span 5 !important; } /* The slide's hairline between pillars, centred in the 48px gap. */ section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] > * > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; inset-inline-start: -24px !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] { margin-block-start: 40px !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } section.ds[data-layout="approach"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(5,"] > :nth-child(n) { grid-column: auto !important; } } } } /* marketing/reflow/layouts/channels.css */ /* * Reflow layout module channels (MK-6a; ARCHITECTURE.md 5.1): product slide 12 and industry slide 10, "Every channel, in * the languages your customer uses." (identical on the product and property decks; the industry decks have three panel * variants: a 7/5 split with a 261px label column, a 6/6 split with 220px, and a 5/7 split with 200px and a one-line * message). * * Five rows (channel name | description) beside a panel on the surface tone: the customer's message as a bubble (its * English and Arabic words locked as in English; kept left to right on the product deck, data-keep-ltr="message"), a * "Preference saved for next time" tag and a paragraph on languages. The generic layer already gives the target * layout (phones: name above description, panel after the rows; tablets: a shared 180px name column as a subgrid, * panel below). This module tunes the spacing: * - phones: the name sits 8px above its description (the generic collapsed-grid gap left 24px, so a name read as * the end of the row above), rows 16px apart from their rules; the panel's 40-48px padding becomes 20px (it took * a fifth of a phone's width), the paragraph 24px under the tag; * - from a 600px screen: the panel padded 32px. * Parts are found by structure: rows by their label-column template (200px, 220px or 261px), the panel by its surface * background. No hooks. * * Specificity: the generic layer's selectors are long attribute chains, so every rule here carries :not(#mk-layout), an * id no element has, which lifts it to id-level specificity. Colours: none changed. Directions: logical properties * only; rows follow the slide's direction (Arabic and Urdu mirror); the message keeps its direction (the decks' global * QA rules). Stage mode never sees this file (reflow query only). */ @media screen { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example ES 'idio-/mas', RU 'ваше-/го', and single words were left on last lines, for example EN 'uses.', AR 'عميلك.', ES 'compradores.'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]) { row-gap: 8px !important; padding-block: 16px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):first-child { padding-block-start: 0 !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] { padding: 20px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] > p:last-child { margin-block-start: 24px !important; } @media (min-width: 600px) { section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]) { padding-block: 20px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page :is([style*="grid-template-columns: 200px minmax(0px, 1fr);"], [style*="grid-template-columns: 220px minmax(0px, 1fr);"], [style*="grid-template-columns: 261px minmax(0px, 1fr);"]):first-child { padding-block-start: 0 !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] { padding: 32px !important; } section.ds[data-layout="channels"]:not(#mk-layout) .slide-page [data-main] [style*="background: var(--color-surface)"] > p:last-child { margin-block-start: 32px !important; } } } } /* marketing/reflow/layouts/complete.css */ /* * Reflow layout module complete (MK-6a; ARCHITECTURE.md 5.1): product slide 8 and industry slide 11, "The work after * the conversation, done every time." (identical skeletons in every deck and language). * * The slide is three numbered rows beside a 720x390 figure canvas ([data-fig], role="img" with its translated * aria-label): an accent chip "Conversation ends" over four tiles (summary, ticket or work order, follow-up, CRM), joined * by accent connector rules, and the closing line "All four, in 3 seconds." under them. The generic layer stacks the * rows and fits the whole canvas into the column (figures.css), which gave 6.9-8.2px tile labels at 360-390px. * * Here, where the figure's panel is narrower than 620px (phones, and tablets up to about 650px), the canvas is re-laid: * it leaves figures.css's fit (zoom 1) and becomes a grid in flow: the chip as a header bar across the top, the four * tiles as cards in one column (two from a 448px column, about a 480px screen), the connectors hidden, the closing line * under them. Its text takes the reflow type scale (tile titles as body text, labels 13px and up, x1.12 in Arabic * script). From 620px up the figure keeps its fit-scale, which leaves its smallest label at 12px or more (588 / 720 x 16 * = 13.1px; 12.3px for hospitality FR, whose tiles run 46 canvas px past the canvas). The panel gets 16px of padding in * both cases: in the re-lay it frames the grid, in the fit it takes the 16 canvas px by which the ES, FR and RU tiles * (widened by the decks' QA) run past the canvas on each side, so they stay on the panel as on the slide. * * The canvas parts are found by structure (the same in every language): the first child holds the chip, the tiles are * the children holding two text units, the connectors hold none, the closing line is the

. The figure keeps * role="img" and its aria-label. No hooks. * * Specificity: the industry decks' QA geometry for this canvas (widths, tops, heights, negative margins, set with * !important on class-level selectors) applies in both modes, and the generic layer's selectors are long attribute * chains, so every rule here carries :not(#mk-layout), an id no element has, which lifts it to id-level specificity. Colours: none changed (the chip keeps white on the accent, as * delivered). Directions: logical properties only; the grid follows the slide's direction (Arabic and Urdu mirror). * Stage mode never sees this file (reflow query only). */ @media screen { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example ES 'con-/versación', RU 'вы-/полняется', FR 'conver-/sation', 'conversa-/tion', and single words were left on last lines, for example EN 'time.', AR 'طويلة.', UR 'مکمل۔'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese h2: lines break only after its full-width comma (MK-10, fix round 3: balanced, and free to break between any two characters, the industry heading split the word '工作', '对话结束后的工 / 作，每次都完成。', at 360 and 390px in every industry deck). Each clause is one unbreakable run (word-break: keep-all), so the heading keeps one line where it fits and otherwise breaks after the comma; overflow-wrap: normal, as the generic layer's break-word lets the balancing break inside a run to even the lines (it still split '工作' with keep-all alone). The longest clause, '对话结束后的工作，' (9em), fits the h2 at every reflow width (263px of the 328px line at 360px, 253px of 288px at 320px). On the h2 and its span: the generic Chinese rule (word-break: normal, overflow-wrap: break-word) sets both on every element, so inheritance alone does not reach the span. Wrapping only, the text unchanged. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :is(h2, h2 *):lang(zh) { word-break: keep-all !important; overflow-wrap: normal !important; } /* The figure's panel (an inline-size container, figures.css): 16px of padding, so the fit-scale and the queries below use the 16px-inset width (588px for a 620px panel). */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page :has(> [data-fig]) { padding: 16px !important; } @container (width >= 588px) { section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] { margin-block: 8px !important; } } @container (width < 588px) { /* The canvas: out of the fit-scale, a grid in flow as wide as its panel. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules: hidden with the canvas geometry they joined. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:not(:has([data-tid])) { display: none !important; } /* The chip: a header bar across the grid, its text wrapping if a translation needs two lines. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:first-child { grid-column: 1 / -1; display: flex !important; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:first-child > [data-tid] { flex: 1 1 auto; justify-content: center; height: auto !important; min-height: 40px; padding: 8px 16px !important; white-space: normal !important; text-align: center; } /* Tiles: cards with their delivered border, ground and radius; title above its label. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > div:has(> [data-tid] + [data-tid]) { justify-content: flex-start !important; gap: 4px !important; padding: 14px 16px !important; } /* The closing line under the tiles. */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] > p { grid-column: 1 / -1; margin-block-start: 4px !important; text-align: center; } /* Text on the reflow type scale (the canvas sizes are for the 1920px slide; the type scale skips figures). */ section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] [data-fs="24"] { font-size: calc(var(--fs-24) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } } /* Two tiles to a row from a 448px panel (a 480px screen). */ @container (416px <= width < 588px) { section.ds[data-layout="complete"]:not(#mk-layout) .slide-page [data-fig] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } } /* marketing/reflow/layouts/hosting.css */ /* * Reflow layout module hosting (MK-6b; ARCHITECTURE.md 5.1): product slide 19 and industry slide 16, "Hosting and data" * ("Hosted where your organisation needs it"; one skeleton in every deck and language). * * The slide: heading and intro, then a 6/6 split: on the inline-start side a surface panel holding four option cards * in a 2x2 grid (UAE region, Saudi Arabia region, your own cloud, on your premises) with a footnote under it (the * documentation line); on the inline-end side three text blocks under hairlines (choose the region, keep it in-house, * decide what is kept). The generic layer stacks it all in source order, so the footnote landed between the cards and * the texts. This module sets the ARCHITECTURE target: * - phones: the four cards in one column (2x2 from a 480px screen) inside the panel, whose 40px padding becomes 16px; * then the three text blocks; the footnote last (the left column becomes display: contents, so the panel, the * text column and the footnote are items of one grid, and the footnote is shown after the texts with order; the * DOM, and so the reading order, is unchanged: the one-line note follows the panel, as on the slide); * - from 600px: the same order, cards 2x2 above the texts (the 6/6 split of the slide would leave each card about * 120-150px for its text even at the 1023px edge, so the translated card texts broke on every second word); * - from 1000px (the 1023px reflow edge and 1024px touch screens): the three text blocks side by side under the * cards, each under the slide's hairline. * The design's own line breaks inside the card texts (
in the English decks: 'Hosted and processed in / the UAE.') * stay. Headings are not hyphenated and are balanced; wrapping only, the text unchanged. No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed. * Directions: logical properties only; the grids follow the slide's direction (Arabic and Urdu mirror). Stage mode * never sees this file (reflow query only). */ @media screen { @media screen { /* The 6/6 split: one grid of panel, texts and footnote. */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] { margin-block-start: 32px !important; row-gap: 32px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :first-child { display: contents !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :first-child > p { order: 2; margin: 0 !important; text-wrap: pretty; /* no word alone on its second line (UR 'ہے۔' at 390px) */ } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child { order: 1; } /* Body text (card descriptions, the three texts): no word alone on a last line where a better break exists (ES 'Alojado y procesado en Arabia / Saudí.', RU 'Размещение и обработка в / ОАЭ.'). */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page p { text-wrap-style: pretty; } /* The panel and its four cards: one column on phones. */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] { padding: 16px !important; gap: 12px !important; grid-template-columns: minmax(0, 1fr) !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] > * { padding: 16px 20px !important; } /* The three text blocks: the slide's hairlines and 24px rhythm (20px on phones). */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div { padding-block: 20px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div:first-child { padding-block-start: 0 !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div:last-child { padding-block-end: 0 !important; } /* Headings: not hyphenated (the generic es/fr/ru hyphenation), balanced. */ section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page :is(h2, h3, h4) { hyphens: manual !important; text-wrap: balance; } /* 2x2 cards from a 480px screen. */ @media (min-width: 480px) { section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 600px) { section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] { margin-block-start: 40px !important; row-gap: 40px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] { padding: 24px !important; gap: 16px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] [style*="grid-template-rows: repeat(2,"] > * { padding: 20px 24px !important; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div { padding-block: 24px !important; } } /* The 1023px edge and 1024px touch screens: the three text blocks side by side under the cards, each under a hairline (the slide's own rule between the blocks, here over all three so the row reads as one). */ @media (min-width: 1000px) { section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start; } section.ds[data-layout="hosting"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(12,"] > :last-child > div:nth-child(n) { padding-block: 20px 0 !important; border-block-start: 1px solid var(--color-border-decorative) !important; } } } } /* marketing/reflow/layouts/i-agents.css */ /* * Reflow layout module i-agents (MK-6e; ARCHITECTURE.md 5.3): industry slide 8, the agents ("Specialists, not * generalists"), in all five industries and seven languages. * * The slide is the h2 and intro (10 of 12 columns), then a bento of 4 agent cards on a 3-column grid with 2 rows * (areas "c1 c2 c4" / "c1 c3 c4"): service (accent), changes and bookings (secondary accent), cases (anchor), outreach * (text-body dark). Each card is a title, a body and a mini-card (a sample record: dot and title, a muted line, a tag); * in c1 and c4 the mini-card is pushed to the card's foot by an auto margin, in c2 and c3 it sits beside the body on a * 2-column grid. Two variants: property and travel use 1 : 1.4 : 1 and 1.15 : 1; banking, hospitality and insurance * 1 : 1.7 : 1 and 1.3 : 1 (the same structure, so one rule set). The generic layer stacks the cards in one column at * every reflow width, with the auto margin turned into 32px on top of the 24px padding (56px above c1's and c4's * mini-cards against 24px in c2 and c3). * * Phones (below 720px): the 4 cards stacked, heights auto, each mini-card under its text 24px below (all four alike), * card padding 24px 20px. * Tablets (720px and up): 2 x 2 in reading order (service, changes and bookings / cases, outreach), the cards of a row * the same height with every mini-card at the card's foot; titles 26px at 720px rising to 30px at 1023px (the generic 36px role * gives 30px at 768, large in a half-width card). * * Colours: none changed (each card keeps its own ground and text, as delivered: white on the accent, the anchor and * text-body; text-body on the secondary accent). Directions: logical properties only (Arabic and Urdu mirror). No * hooks. Stage mode never sees this file. */ @media screen { @media screen { section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] { gap: 16px !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article { padding: 24px 20px !important; } /* c1 and c4: the mini-card's wrapper, 24px under the body (its own padding), no extra auto-margin gap. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="margin-block-start: auto"] { margin-block-start: 0 !important; } /* c2 and c3: body and mini-card stacked, 24px apart, the mini-card as wide as the card (as in c1 and c4). */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="grid-template-columns"] { display: flex !important; flex-direction: column; align-items: stretch !important; row-gap: 24px !important; } /* The h2 and the card titles: balanced lines, so no short word sits alone on a last line ('agent.', Urdu 'ایجنٹ۔'; the deck balances its other display headings itself). Wrapping only. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] :is(h2, h3) { text-wrap: balance; } @media (min-width: 720px) { section.ds[data-layout="i-agents"]:not(#mk-layout) { --fs-36: clamp(26px, 16.495px + 1.3201vw, 30px); /* card titles: 26px at 720, 30px at 1023 */ } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-items: stretch !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article { padding: 24px !important; } /* Every mini-card at the card's foot. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="margin-block-start: auto"] { margin-block-start: auto !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="grid-template-columns"] { flex: 1 1 auto !important; } section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-areas"] > article > div[style*="grid-template-columns"] > :last-child { margin-block-start: auto !important; } } /* Display headings are not hyphenated: the h2 and card titles (RU 'измене-/ниям', 'исходя-/щим') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-agents"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-context.css */ /* * Reflow layout module i-context (MK-6e; ARCHITECTURE.md 5.3): industry slide 2, the context ("Property relationships * outlast the systems built to manage them."), in all five industries and seven languages. * * The slide is the h2, the lifecycle line (the "Lifecycle Line" component: a row of 4 or 5 phases, flex 3 : 1.6 : 2 : * ..., each a muted overline above a row of 1 to 3 stages, each stage an accent dot over its label, the dots on a 1px * rule drawn by an absolutely placed span), the lead, and 3 outcome cards with top rules. Phases per industry: property * 4, banking 5, hospitality 5, insurance 5, travel 4. The generic layer stacks the phases (proportional row) but hides * the rule spans with the other absolute decoration, so the dots floated without their line, and on tablets it gave the * phases unequal widths (their flex-grow) and the cards 2 columns with the third alone. * * Phones: phases stacked, each overline above its stages as a row of dots on the delivered rule (the rule span shown * again; the row may wrap; a probe at 360px found no row that wraps in any of the 35 pages: the longest, travel RU, is * 267px of a 328px line). Cards stacked with their top rules. * Tablets (600px and up): phases two to a line at equal widths (2 x 2 for 4 phases; 2 + 2 + 1 for 5, the last at half * width). Cards in 3 columns from 720px (one column from 600 to 719px, where three would leave about 150px each). * * Specificity: :not(#mk-layout) lifts every rule above the generic layer and any class-level QA rule. Colours: deck * tokens only (the rule keeps --color-border-control). Directions: logical properties only; the rows follow the slide's * direction (Arabic and Urdu mirror). No hooks. Stage mode never sees this file. */ @media screen { @media screen { /* The stage rows' rule (absolute, across the row at the dots' centre): shown again. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host [style*="justify-content: space-between"] > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; } /* Dots paint above the rule. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host [style*="justify-content: space-between"] > div > span[aria-hidden="true"]:first-child { position: relative; } section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host [style*="justify-content: space-between"] { row-gap: 16px !important; column-gap: 16px !important; } /* The outcome cards: one column below 720px. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px !important; } /* Card titles: balanced lines (no word alone on a last line, as Urdu 'ہے۔' at 1023px). */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] h3 { text-wrap: balance; } @media (min-width: 600px) { /* Phases two to a line, equal widths. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host > div > div { flex: 0 1 calc(50% - 24px) !important; min-width: 0; } section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page .sc-host > div { row-gap: 32px !important; } } @media (min-width: 720px) { section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } } /* Display headings are not hyphenated: the h2 and card titles (FR 'sys-/tèmes', RU 'мо-/жет') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page :is(h1, h2, h3) { hyphens: manual !important; } /* Chinese h2: lines break between words, never inside one. Chinese has no spaces, so the browser may break between any two characters, and balanced lines put the break near the middle, inside a word in every Chinese deck (property '搭|建', banking '超|出', hospitality '品|牌', insurance '承|载' and '系|统', travel '系|统' and '任|何', 360-1023px; the stage render has none). Each deck gets a line plan, checked word by word (Intl.Segmenter): - keep-all (tablets in every deck, phones in banking and hospitality): lines break only after the punctuation (，。) and stay balanced; the size is capped so the longest run between two marks fits the line, as base.css's runFit does for no-break runs: banking and hospitality 12 characters (27px at 360, 29.5px at 390, the role size from 400px), travel 13 (role size from 600px), property 16 (role size from 667px), insurance 17 (from 735px). '银行客户关系的深度，/ 超出任何单一系统的视野。', '宾客体验到的是一个品牌。/ 品牌背后的系统，/ 比任何…'. - phones in property, insurance and travel, whose runs are too long for a phone line: greedy lines of a set length (max-inline-size in em, no balancing) and one empty float at the line end that shortens the first line, or the lines after it (shape-outside), so every break falls between two words, at the role size: property 8 / 10 / 6 '房地产客户关系，/ 比为管理它们而搭建的 / 系统更长久。', insurance 8 / 9 / 8 '保单是一项承诺，/ 承载它的系统比任何 / 客户看到的都多。', travel 10 / 7 / 6 '一段旅程经过的系统，/ 比任何旅客所能 / 看到的都多。'. Glyphs are full width (1em, Noto Serif SC) and the line height is base.css's 1.25 for Chinese headings. The same caps keep each plan below 360px. Wrapping and size only, the text unchanged. */ /* The slide's own section (position: relative already) is the container, as for base.css's runFit. */ :root:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page > :has([data-main] > h2) { container-type: inline-size; } :root[data-deck="property"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 16; --mk-zh-line: 10; } :root[data-deck="banking"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 12; } :root[data-deck="hospitality"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 12; } :root[data-deck="insurance"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 17; --mk-zh-line: 9; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-context"] { --mk-zh-run: 13; --mk-zh-line: 10; } :root:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2 { word-break: keep-all !important; font-size: min(calc(var(--fs-64) * var(--rs)), calc(100cqi / (var(--mk-zh-run, 12) + 0.15))) !important; } @media (max-width: 599.98px) { :root:is([data-deck="property"], [data-deck="insurance"], [data-deck="travel"]):lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2 { word-break: normal !important; text-wrap: wrap !important; max-inline-size: calc((var(--mk-zh-line) + 0.15) * 1em) !important; font-size: min(calc(var(--fs-64) * var(--rs)), calc(100cqi / (var(--mk-zh-line) + 0.15))) !important; } :root[data-deck="property"]:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2::before { content: ""; float: inline-end; inline-size: 2em; /* first line 8 characters */ block-size: 1em; /* within the first line (1.25em) */ } :root[data-deck="insurance"]:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2::before { content: ""; float: inline-end; inline-size: 1em; /* first line 8 characters */ block-size: 1em; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-context"]:not(#mk-layout) .slide-page [data-main] > h2::before { content: ""; float: inline-end; inline-size: 3em; /* lines 2 and 3: 7 characters */ block-size: 3em; /* within the three lines (3.75em) */ shape-outside: inset(1.35em 0 0); /* clear of the first line (0-1.25em) */ } } } } /* marketing/reflow/layouts/i-continuity.css */ /* * Reflow layout module i-continuity (MK-6f; ARCHITECTURE.md 5.3): industry slide 9, "02 · Centralise" ("One continuous * record of every buyer, unit and commitment." and its counterparts), in all five industries and seven languages. * * The slide: overline, heading, then a 12-column split: the text (a paragraph and a display line) beside a figure canvas * ([data-fig], role="img" with its translated aria-label; 720x400 on property, 792x400 on banking, hospitality and * insurance, 808x400 on travel): six accent channel chips (uppercase, no wrap) on the inline start join a bus that leads * into the "One record" card in the middle, which leads out to a bus and four anchor function chips on the inline end. * The decks' QA widened some chips and moved the canvas where a translation did not fit (property ES "Correo * electrónico": the first column 232px wide, set 56px outside the canvas, the canvas shifted 28px; FR, banking FR, * the RU card), in rules that apply in both modes (figures are drawn as on the slide). The generic layer stacks the * split and fits the whole canvas into the column (figures.css), which gave 6.4-8.2px chip labels at 360px and * 7.0-9.0px at 390px, the smallest text of any industry slide. * * This module (ARCHITECTURE 5.3: phones "text; diagram as channel chips, then the One record box, then function chips"; * tablets "the same, chips larger"): * - the figure's panel gets padding (24px 12px; 32px 24px from 600px). It is the figure's inline-size container * (figures.css), so the query below and the fit use the padded width; * - panel narrower than 840px (phones, tablets up to about 900px): the canvas leaves the fit-scale (zoom 1, never * scaled) and is re-laid in flow: the channel chips (two to a row, 2 + 2 + 2, below a 420px panel; three to a row, * 3 + 3, from 420px), a centred accent connector, the "One record" card, a second connector, the function chips two * to a row (2 + 2). Chips are equal-width and centred, never narrower than their longest word (a row takes fewer * chips where a word needs more room), and a long label wraps inside its chip; the other connector rules are * hidden, and every QA offset, width and transform of the canvas, chips and card is reset. Text takes the reflow type scale: chips 16 canvas px on phones (13px; * x1.12 in Arabic script) and, larger, 18 canvas px from a 560px panel (15-16px) with taller chips; the card 24 * canvas px (17-18px); * - panel 840px and wider (the 1023px reflow edge, 1024px touch, larger touch screens): every canvas fits whole at * scale 1 (the widest is 808px), so the figure stays exactly as on the slide (labels 16px), QA geometry included; * - the h2 is not hyphenated (wrapping only). * The chips, the card and the connectors are found by structure (the same in every deck and language): chips are the * children that are text units ([data-tid]); the function chips are the last four (s09-013 to s09-016); the card is the * child holding a text unit; the rules are the others, and the two kept are the canvas's rules into and out of the card * (children 8 and 9 in every deck). No hooks. * Colours: the deck's own tokens only (chips keep white on the accent, 5.44:1, and on the anchor, as delivered; the * connectors keep the accent on the plum-tinted surface panel; the card keeps its white ground and anchor text). * Directions: logical properties only; rows follow the slide's direction (Arabic and Urdu mirror, as the canvas does), * WhatsApp and SMS keep their LTR bdi. The figure keeps role="img" and its aria-label. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-continuity"]:not(#mk-layout). No element has that id: * the :not() adds one ID-level weight, so a module rule outranks the generic layer and the decks' QA figure rules * (attribute chains); declarations that override inline styles or QA !important rules carry !important. */ @media screen { @media screen { /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } @media (min-width: 600px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page :has(> [data-fig]) { padding: 32px 24px !important; } } /* The text column: the display line keeps a little less air above its rule on phones (40px + 32px on the slide). */ @media (max-width: 599px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-main] [data-fs="28"][style*="border-block-start"] { margin-block-start: 28px !important; padding-block-start: 24px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation split RU 'кли-ента', 'покупа-тель', ES 'conti-nuo' at 360px); every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } /* Chinese heading: lines break between words. The generic layer breaks Chinese between any two characters and balances the lines, which split a word wherever the midpoint fell ('每位宾 / 客', '每位旅 / 客', '每位买 / 家', '每位投保 / 人' from a 480px screen, '每套 / 房源' at 360-390px). Here the heading breaks only after its own punctuation (word-break: keep-all keeps the break after '，' and '、'), still balanced: one line where it fits (1024px touch), two lines where the first two parts fit on one (14-15 characters: from about 480px, insurance from about 550px; '…涵盖每位宾客、 / 每次住店和每项承诺。'), three below that (phones: '一份连续档案， / 涵盖每位宾客、 / 每次住店和每项承诺。'; the longest part is 10 characters, a 320px screen gives 10.2 and 360px 11.2). Banking's last part ('每段业务关系和每项承诺。', 12 characters) is longer than a phone line, so banking keeps breaking between characters and wraps greedily within a measure that is a step: 9.2em below a column of 14em + 8px ('一份连续档案，涵盖 / 每位客户、每段业务 / 关系和每项承诺。', every phone width), 14em + 8px from there ('一份连续档案，涵盖每位客户、 / 每段业务关系和每项承诺。'), and no width in between. The 8px is room for glyph advances rounded to whole pixels (33px at a 32.65px size, so 14em held 13 characters and '户、' moved down together: '…每位客 / 户、…' at 490px). Balanced as the generic layer leaves it, a 320px screen gave '一份连续档案，涵 / 盖…每段业 / 务…'; balanced within 9.2em, the phone lines depended on the browser's history (a fresh load gave the lines above, a load with the fonts already cached the split ones). Wrapping only, the text unchanged. */ :root:not([data-deck="banking"]) section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page h2:lang(zh) { word-break: keep-all !important; } :root[data-deck="banking"] section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: max(9.2em, min(14em + 8px, (100% - 14em - 8px) * 100000)) !important; text-wrap: wrap !important; } @container (width < 840px) { /* The canvas: out of the fit-scale and the QA offsets, a wrapping flex row in flow as wide as its panel. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 6px; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules: hidden with the canvas geometry, except the two into and out of the card. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:not([data-tid], :has([data-tid])):not(:nth-child(8), :nth-child(9)) { display: none !important; } /* The two kept rules: each a full line of its own with a 1px accent rule at its centre, reaching across the row gaps to the chips and the card. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:is(:nth-child(8), :nth-child(9)) { flex: 0 0 100%; width: auto !important; height: 40px !important; margin-block: -12px !important; background: linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 100% no-repeat !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:nth-child(8) { order: 2; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:nth-child(9) { order: 4; } /* The "One record" card, alone on its line between the connectors. */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:has(> [data-tid]) { order: 3; flex: 0 1 auto; box-sizing: border-box !important; width: auto !important; min-width: min(208px, 100%); height: auto !important; min-height: 72px; padding: 12px 24px !important; gap: 6px; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div > [data-tid] { white-space: normal !important; text-align: center; font-size: calc(var(--fs-24) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } /* Chips: the channels first, three to a row (3 + 3; 2 + 2 + 2 on phones, below), the functions last, two to a row (2 + 2); equal widths, centred, never narrower than their longest word (a row takes fewer chips where a word needs more room). */ section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { order: 1; flex: 0 1 calc((100% - 12px) / 3); box-sizing: border-box !important; width: auto !important; height: auto !important; min-height: 36px; padding: 8px 6px !important; white-space: normal !important; text-align: center; font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: 1.2 !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > :is([data-tid="s09-013"], [data-tid="s09-014"], [data-tid="s09-015"], [data-tid="s09-016"]) { order: 5; flex-basis: calc((100% - 6px) / 2); } } /* Phones: the channels two to a row as well (2 + 2 + 2): three to a row leaves about 97px a chip at 360px, less than an uppercase word such as 'TELEPHONY' or 'ЭЛЕКТРОННАЯ' needs, so rows came out uneven (2 + 3 + 1). */ @container (width < 420px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { flex-basis: calc((100% - 6px) / 2); padding-inline: 4px !important; } } /* From a 314px panel (phones of about 370px and up: 375px and 390px included) the chips keep 8px of inline padding: with 4px, labels that just fit one line ran to 4-5px of the chip's edge at 375-390px (EN 'CORPORATE BANKING', 'FOOD AND BEVERAGE', ES 'BANCA CORPORATIVA', RU 'РОЗНИЧНЫЙ БИЗНЕС', AR 'الخدمات المصرفية للشركات'); they now wrap onto two lines inside the chip, as the longer labels already do. The 4px stays below 314px (360px phones), where the longest word (RU 'УРЕГУЛИРОВАНИЕ', about 134px) needs it to keep two chips to a row. (MK-6f checker.) */ @container (314px <= width < 420px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { padding-inline: 8px !important; } } /* Tablets: the same re-lay with larger chips (18 canvas px: 15-16px), more room between them. */ @container (560px <= width < 840px) { section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] { gap: 16px 12px; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:is(:nth-child(8), :nth-child(9)) { height: 48px !important; margin-block: -16px !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > [data-tid] { flex-basis: calc((100% - 24px) / 3); min-height: 48px; padding: 10px 12px !important; font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > :is([data-tid="s09-013"], [data-tid="s09-014"], [data-tid="s09-015"], [data-tid="s09-016"]) { flex-basis: calc((100% - 12px) / 2); } section.ds[data-layout="i-continuity"]:not(#mk-layout) .slide-page [data-fig] > div:has(> [data-tid]) { min-width: 240px; min-height: 88px; padding: 16px 32px !important; } } } } /* marketing/reflow/layouts/i-cover.css */ /* * Reflow layout module i-cover (MK-6e; ARCHITECTURE.md 5.3): industry slide 1, the cover (dark, on the anchor), in all * five industries and seven languages. * * The slide is the wordmark (absolute; base.css brings it into flow at 28px), the h1 and lead on a 12-column grid beside * the lifecycle path, and a 3-column footer strip (Specialise, Centralise, Complete) under an accent-light rule. The path * is a 701x560 figure canvas ([data-fig], role="img" with its translated aria-label): a curved SVG line, one 8px dot per * stage (14px for the last), one absolutely placed label per stage (7 stages, 8 in travel) and an end icon. The generic * layer fits the whole canvas into the column (figures.css), which gave 7.5-8.2px stage labels at 360-390px. * * Phones (below 600px): the path is re-laid as a vertical list of stages: the canvas leaves the fit-scale (zoom 1) and * becomes a two-column grid in flow, dot | label, one row per stage in the delivered order, with a 1px rule through the * dots at the inline start in accent light (#F2A98C, 6.42:1 on the anchor #442C43; never the accent on the anchor). * The curved SVG line and the end icon are hidden (the re-lay never mirrors the path again; Arabic and Urdu mirror by * the canvas's own dir="rtl"). Labels take the reflow type scale for 18px canvas text (15px at 390, x1.12 in Arabic * script), keep their case and tracking as delivered, and wrap if a translation needs it. * Tablets (600px and up): the canvas keeps figures.css's fit-scale (ARCHITECTURE 4.4: fit while the smallest label stays * at 12px or more: 536 / 701 x 16 = 12.2px at 600, 16px from 768), centred in its column. * * Footer strip: stacked below 720px, each item after the first with an accent-light top rule (the strip's own rule stays * above the first); 3 columns from 720px with the delivered accent-light separators between them. * * Cover headlines: the RU and ES covers whose QA no-break runs are wider than a phone line ('индустрии гостеприимства.') * keep base.css's runFit size (MK-4). Letting those no-break spaces break would need the pipeline to change the text * node (a hook only adds attributes, and no CSS property breaks at U+00A0), so this module does not touch the h1. * * Specificity: :not(#mk-layout) (an id no element has) lifts every rule above the generic layer and any class-level QA * rule. Colours: deck tokens only. Directions: logical properties only. Stage mode never sees this file. */ @media screen { @media screen { /* ---------------------------------------------------------------- phones: the path as a list of stages ------- */ @media (max-width: 599.98px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; height: auto !important; margin: 8px 0 0 !important; display: grid !important; grid-template-columns: 14px minmax(0, 1fr); grid-auto-rows: minmax(32px, auto); column-gap: 16px; row-gap: 4px; align-items: center; position: relative !important; } /* The rule through the dots: from the first dot's centre to the last one's (rows are 32px high). */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig]::before { content: ""; position: absolute; inset-block: 16px; inset-inline-start: 6.5px; inline-size: 1px; background: var(--color-accent-light); } section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > svg { display: none !important; } section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > span { inset: auto !important; transform: none !important; } /* Dots: column 1, centred on the rule, painted above it. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > span[aria-hidden="true"] { position: relative !important; grid-column: 1; justify-self: center; } /* Labels: column 2, in flow. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] > span[data-tid] { position: static !important; grid-column: 2; min-width: 0; white-space: normal !important; overflow-wrap: break-word !important; font-size: calc(var(--fs-18) * var(--rs)) !important; line-height: 1.3 !important; } } /* ---------------------------------------------------------------- tablets: the delivered path, centred ------- */ @media (min-width: 600px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page [data-fig] { margin-inline: auto !important; } } /* ---------------------------------------------------------------- the footer strip --------------------------- */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] { row-gap: 24px !important; } @media (max-width: 719.98px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; } section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] > div + div { padding-block-start: 24px !important; border-block-start: 1px solid var(--color-accent-light); } } @media (min-width: 720px) { section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 48px !important; } /* The delivered separators (absolute, at the inline start of columns 2 and 3, half the gap out). */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > * > div[style*="grid-template-columns: repeat(3,"] > div > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; } } /* Display headings are not hyphenated: the h1 (RU 'интел-/лект', 'создан-/ный') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page :is(h1, h2, h3) { hyphens: manual !important; } /* The lead (s01-002, the paragraph under the h1): no word alone on its last line where a better break exists. Greedy lines left UR 'ہیں۔' alone on the third line at 768px (property, hospitality, travel) and EN 'interaction.' at 360px (property, hospitality, insurance, travel) and 768px (hospitality); pretty moves one word down ('کرتے ہیں۔') with the same number of lines. The ES, FR and RU decks already set text-wrap: pretty themselves. Wrapping only, the text unchanged. */ section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page p[data-tid="s01-002"] { text-wrap-style: pretty; } /* Chinese headline: the line breaks after the comma, never inside a word. Balanced over characters, it split the industry word in every Chinese deck ('客户智能，为房 / 地产而打造。', '为银|行业', '为酒|店业', '为保|险业', '为旅|游出行' at 360/390px, travel also at 768px; the stage render has none). keep-all leaves break opportunities only after the punctuation: '客户智能，/ 为房地产而打造。' on phones (and travel at 768px), one line where it fits. The longer run is 8 characters (9 in travel, '为旅游出行而打造。'), 312px of a 328px line at 360px; below that the size is capped so the run fits (travel below about 345px; the others fit at the narrowest role size), as base.css's runFit does. The slide's own section (position: relative already) is the container. Wrapping and size only, the text unchanged. */ :root:lang(zh) section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page h1 { word-break: keep-all !important; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page > :has(h1) { container-type: inline-size; } :root[data-deck="travel"]:lang(zh) section.ds[data-layout="i-cover"]:not(#mk-layout) .slide-page h1 { font-size: min(calc(var(--fs-96) * var(--rs)), calc(100cqi / 9.15)) !important; } } } /* marketing/reflow/layouts/i-deployment.css */ /* * Reflow layout module i-deployment (MK-6f; ARCHITECTURE.md 5.3): industry slide 20, "Deployed within your estate. * Extended one workflow at a time." and its counterparts (the Steps component), in all five industries and seven * languages. * * The slide: overline, heading, lead, then three steps on a 3-column grid whose columns are subgrids of three rows: * a header (an accent rule across the column, broken by the step number, 48px in a 60px box, and its title, 30px, on * a white ground), and the text set in by 80px under the title; then a closing line in muted text. The generic layer * hides the rule, stacks the steps on phones and puts them two to a row from 600px (2 + 1: the third step alone under * the first), and keeps the 60px number box and the 80px indent at every width (on a 360px phone the text column was * 248px wide, a quarter of it lost to the indent; the box's 24px inline padding, which masked the rule, stays too). * * This module (ARCHITECTURE 5.3: phones "steps stacked: number and title (rule hidden), text; closing line"; tablets * "the same"), as steps-panels lays the same component out on industry slide 7: * - the steps stacked at every reflow width, 28px apart on phones and 40px from 600px; * - phones (below 600px): number and title on one line (the number's box shrinks to its figure, 14px gap, the * masking padding released), the text at full width 10px under them; * - 600px and up: the number in a 52px box with a 16px gap, the title beside it, and the text set in by 68px under * the title (the slide's hanging indent at reflow scale), its measure capped by the generic layer; * - the closing line 32px under the last step (40px on the slide); the h2 and step titles are not hyphenated, and * the step titles and the closing line are balanced (no short word alone on a last line; wrapping only). * Text stays on the reflow type scale (numbers 48 canvas px: 26px on phones, 34px at most; titles 30: 21-25px; x1.12 in * Arabic script). No figure, no hooks; the steps, headers, numbers, titles and texts are found by structure (the same * in every deck and language). Colours: none changed (numbers in the accent on white, titles in the anchor, the * closing line muted, 6.09:1). Directions: logical properties only; Arabic and Urdu mirror (numbers at the right, the * indent at the inline start); the numbers keep their bdi. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-deployment"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media screen { @media screen { /* The steps grid: one column at every reflow width. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; } /* A step: header, then text. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > [style*="subgrid"] { grid-template-rows: none !important; align-content: start; } /* The header's inner row (number and title): the masking padding and offset released. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child > span:not([aria-hidden]) { column-gap: 14px !important; padding-inline: 0 !important; margin-inline-start: 0 !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child [data-fs="48"][style*="width:"] { width: auto !important; } /* The text: full width on phones. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > p { margin-block-start: 10px !important; margin-inline-start: 0 !important; } /* The closing line: balanced lines, so no word sits alone on its last line (Arabic 'أسابيع.', 'الموافقة.' and Urdu 'لائیو۔' at 360/390px; MK-6f checker). Wrapping only. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] + p { margin-block-start: 32px !important; text-wrap: balance; } @media (min-width: 600px) { section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { row-gap: 40px !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child > span:not([aria-hidden]) { column-gap: 16px !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child [data-fs="48"][style*="width:"] { width: 52px !important; } section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > p { margin-block-start: 12px !important; margin-inline-start: 68px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation); every word fits its line whole. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page :is(h2, h3, [data-fs="30"]) { hyphens: manual !important; } /* The step titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-deployment"]:not(#mk-layout) .slide-page [data-main] [data-fs="30"] { text-wrap: balance; } } } /* marketing/reflow/layouts/i-enterprise.css */ /* * Reflow layout module i-enterprise (MK-6f; ARCHITECTURE.md 5.3): industry slide 15, "Built for the teams that have to * sign it off" and its counterparts, in all five industries and seven languages. * * The slide: overline, heading, lead, then six numbered items on a 3-column grid (2 rows): each item a number (30px * display figures in the accent), a title (30px) and a text, with a rule under the first row and rules between the * columns. The generic layer stacks the items with the number on a line of its own above the title, keeps the first * row's bottom rules (so items 1 to 4 are separated and 4 to 6 are not), and puts items two to a row from 600px. * * This module (ARCHITECTURE 5.3: phones "6 numbered items stacked, numbers inline"; tablets "2x3"): * - every item: the number in a fixed column (36px on phones, 44px from 600px; 12px and 16px gaps) on the title's * first baseline, the title and the text beside it (a hanging indent, so titles and texts align down the list); * a rule above every item and none below, with an even rhythm (20px on phones, 24px from 600px); * - phones (below 600px): one column; tablets (600-899px): two columns, three rows; from 900px (the 1023px reflow * edge, 1024px touch): three columns, two rows, as on the slide; * - the list sits 32px under the lead (the slide's 48px padding on top of the generic 32px margin left 80px); * - the h2 and item titles are not hyphenated, and the item titles are balanced (no short word alone on a last * line; wrapping only). * Text stays on the reflow type scale (numbers and titles 30 canvas px: 21px on phones, 25px on tablets; x1.12 in * Arabic script). No figure, no hooks; the grid, the items, the number, the title and the text are found by structure * (the same in every deck and language). * Colours: none changed (numbers in the accent on white, 5.44:1 at 21px and up; titles in the anchor; the rules are * border-decorative). Directions: logical properties only; Arabic and Urdu mirror (the number column at the right); * the numbers keep their bdi. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-enterprise"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media screen { @media screen { section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px 32px !important; padding-block-start: 0 !important; /* the slide's 48px on top of the generic 32px margin left 80px under the lead */ } /* An item: number | title, then the text under the title. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: baseline; align-content: start; padding-block: 20px 0 !important; padding-inline: 0 !important; border-block-start: 1px solid var(--color-border-decorative) !important; border-block-end: 0 !important; border-inline-start: 0 !important; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > [data-fs="30"]:first-child { grid-column: 1; grid-row: 1; white-space: nowrap; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > h3 { grid-column: 2; grid-row: 1; margin: 0 !important; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > p { grid-column: 2; grid-row: 2; } @media (min-width: 600px) { section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px !important; } section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-block-start: 24px !important; } } @media (min-width: 900px) { section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation); every word fits its line whole. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } /* Chinese heading: lines break between words. The generic layer balances it, so below a 12em measure (phones up to about 393px) its two lines split the word '批准' ('为需要签字批 / 准的团队打造', every Chinese deck at 360 and 390px). Here it wraps greedily, on one line where its 12 characters fit and otherwise within 8.2em, so it breaks after '的' ('为需要签字批准的 / 团队打造'): the limit is a step, 8.2em below a column of 12em + 8px and far wider than the column (no limit) from there, with no width in between where a nine- to eleven-character line could form. The 8px is room for glyph advances rounded to whole pixels (up to half a pixel a character). Wrapping only, the text unchanged. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: max(8.2em, (100% - 12em - 8px) * 100000) !important; text-wrap: wrap !important; } /* The item titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-enterprise"]:not(#mk-layout) .slide-page h3 { text-wrap: balance; } } } /* marketing/reflow/layouts/i-governance.css */ /* * Reflow layout module i-governance (MK-6f; ARCHITECTURE.md 5.3): industry slide 14, "The conversation adapts. Your * rules do not." and its counterparts, in all five industries and seven languages. * * The slide: overline and heading, then a 12-column split: the lead (5 columns) beside a policy diagram on a surface * panel (7 columns; a flex column with role="img" and its translated aria-label, no fixed canvas): the "Language model" * box, an arrow, the "Policy, enforced by the platform" bar (white and accent light on the anchor), then two chip groups * side by side, "Completed by the agent" (an accent arrow, anchor chips) and "Reserved for your team" (a stopped rule, * outlined chips); under the split, three cards (title and text) on a 3-column grid with top rules. Two variants: the * property deck sets each group's four chips in one row (flex, no wrap); the other four decks set them two by two * (grid, repeat(2, max-content)). The generic layer already gives the phone layout of ARCHITECTURE 5.3 (lead; the * diagram's chips wrapping, the model box, the policy bar and the two groups stacked; the cards stacked): chip rows wrap, * max-content chip grids become two shrinkable columns 16px apart, chips grow with their text, card grids are one column * on phones and two from 600px (three cards: 2 + 1). * * This module refines it: * - phones (below 600px): the panel's padding 24px 16px (32px 24px or 20px 24px on the slide); the two groups 28px * apart; * - chips: a label that wraps keeps a readable line height (the slide's line-height 1 for one-line chips set two- and * three-line Russian and Spanish chips solid), stays centred and wraps between words (not hyphenated: every word * fits its chip); the two-by-two groups keep the slide's 6px gap * (not 16px) and two equal columns, so the four chips form a tidy grid (on phones, as on tablets) instead of * columns as wide as their longest chip; * - cards: stacked up to 899px with an even 20px rhythm (at 600-899px the generic 2 + 1 left the third card alone * under the first), three in a row from 900px (ARCHITECTURE 5.3 asks for 3 columns on tablets; at 768px a third of * the band is about 213px, narrower than Russian titles such as 'прослеживаемость.' at the 25px tablet size, which * then broke inside the word); * - the h2, the card titles and the diagram's box titles are not hyphenated, and the card titles are balanced (no * short word alone on a last line; wrapping only). * Text stays on the reflow type scale (chips and group labels 16 canvas px: 13px on phones, 14px on tablets; x1.12 in * Arabic script). No figure canvas, no hooks; elements are found by structure (the same in every deck and language). * Colours: none changed (chips keep white on the anchor and muted text on white, as delivered; the policy bar keeps * white and accent light #F2A98C on the anchor, never the accent). Directions: logical properties only; the diagram * follows its own dir (Arabic and Urdu mirror). Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-governance"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media screen { @media screen { /* Chips (both variants): a wrapped label keeps a readable line height and stays centred. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] span[data-tid][style*="display: inline-flex"] { justify-content: center; min-height: 32px; padding-block: 6px !important; line-height: 1.2 !important; text-align: center; hyphens: manual !important; /* whole words: the generic hyphenation split RU 'усло-вий', ES 'comi-siones' */ } /* The two-by-two chip groups (banking, hospitality, insurance, travel): two equal columns, the slide's 6px gap. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] [style*="grid-template-columns: repeat(2, max-content)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; justify-content: stretch !important; align-self: stretch; } /* The one-row chip groups (property): wrapped rows, centred, the slide's 6px gap. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] [style*="flex-wrap: nowrap"] { gap: 6px !important; } /* The three cards: stacked with an even rhythm up to 899px. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; } section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block-start: 20px !important; } @media (min-width: 900px) { section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block-start: 24px !important; } } @media (max-width: 599px) { /* The diagram's panel. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page :has(> [role="img"]) { padding: 24px 16px !important; } /* The two groups, stacked. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page [role="img"] > [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { row-gap: 28px !important; } } /* Display headings and the diagram's box titles are not hyphenated (the generic es/fr/ru hyphenation split RU 'приме-няет' in the policy bar at 360px); every word fits its line whole. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page :is(h2, h3, [role="img"] [data-fs="20"]) { hyphens: manual !important; } /* The card titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-governance"]:not(#mk-layout) .slide-page h3 { text-wrap: balance; } } } /* marketing/reflow/layouts/i-integrations.css */ /* * Reflow layout module i-integrations (MK-6f; ARCHITECTURE.md 5.3): industry slide 19, "Works inside the systems you * already run." and its counterparts, in all five industries and seven languages. * * The slide: overline, heading, lead, then a logo grid kept LTR in every language ([data-keep-ltr="logo-grid"]): seven * to nine category rows, each a 12-column grid with the category label (2 columns, uppercase in Latin and Cyrillic, * Arabic and Urdu labels in their own direction) and a flex row of logos (10 columns: images, or an icon with its name, * or a word mark set in type), rows 2 and up with a rule above; then a note and the small print. Five variants, one * per industry (26 to 36 logos; property, travel and insurance rows 56px high, banking 64px; banking, hospitality and * insurance rows share the canvas height). The generic layer stacks each row with 24px between the label and its logos * and 28px between logos in both directions, and keeps the rows' 2px padding: the label sat on the rule, right under * the last logos of the row above, so it read as their caption; and the note after the grid ran into the last logos * where the slide pushed it down with an auto margin. * * This module (ARCHITECTURE 5.3: phones "each category: label above, logos wrapping; LTR kept (Arabic labels rtl)"; * tablets "label column 160px plus logos"): * - phones (below 600px): each category a block between rules: 16px above the label and below the logos, the label * 8px above its logos, the logos wrapping 12px apart in a line and 24px across (the slide's 28px), centred on their * line; the first category starts 8px under the lead's margin with no rule (as on the slide); * - tablets and the reflow edge (600px and up): each category a row of a 160px label column (the longest label word * never narrower: it takes more room where a word needs it) and the logos beside it, wrapping, 12px rows of padding; * - logos keep the slide's own sizes (17-35px high, about 22px for most; the names on the reflow type scale: 13px on * phones, 14px on tablets) and their order; the labels are not hyphenated (whole words); * - the note after the grid stands 28px below it (32px from 600px); the h2 is not hyphenated. * No figure canvas, no hooks; the rows, labels and logo rows are found by structure (the same in every deck and * language). Colours: none changed (muted labels and names on white, 6.09:1; the logos as delivered). Directions: * logical properties only; the grid stays LTR in Arabic and Urdu (the decks' global QA rule), each label keeps its own * direction, and the bdi runs stay. Stage mode never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-integrations"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media screen { @media screen { /* The grid: 20px under the lead (as on the slide), no margin below (banking, hospitality and insurance carry 32px, which added to the note's own gap). */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] { margin-block: 20px 0 !important; } /* A category row. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px !important; align-items: start !important; min-height: 0 !important; padding-block: 16px !important; } section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > :first-child { padding-block-start: 8px !important; } /* Its label: whole words. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * > [data-tid]:first-child { hyphens: manual !important; overflow-wrap: normal !important; } /* Its logos: a wrapping row. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * > :last-child { flex-wrap: wrap !important; align-items: center !important; gap: 12px 24px !important; min-width: 0; } /* The note after the grid. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] + * { margin-block-start: 28px !important; } @media (min-width: 600px) { section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > * { grid-template-columns: minmax(min-content, 160px) minmax(0, 1fr) !important; column-gap: 24px !important; align-items: center !important; min-height: 56px !important; padding-block: 12px !important; } section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] > :first-child { padding-block-start: 12px !important; } section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page [data-keep-ltr="logo-grid"] + * { margin-block-start: 32px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation); every word fits its line whole. */ section.ds[data-layout="i-integrations"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-limit.css */ /* * Reflow layout module i-limit (MK-6e; ARCHITECTURE.md 5.3): industry slide 3, "The limit of general AI" ("Domain * first. Conversation second."), in all five industries and seven languages (one skeleton everywhere). * * The slide is a 96px statement, one body paragraph and a 40px closing line under a rule, centred on the 1080px canvas. * The generic layer already reads well; this module sets the roles of the ARCHITECTURE target and tightens the gaps * that were sized for the canvas: * - statement 36px on phones (34px at 360) rising to 48px on tablets (the generic 96px role reaches 52px); * - body as the type scale (17px; x1.12 in Arabic script); * - closing line 22px on phones (21px at 360) rising to 28px on tablets (the generic 40px role: 24 -> 30px); * - block gaps 24/32px on phones and 32/40px from 600px (48 + 40px on the canvas); the closing line's rule spans the * column (no 38em cap on that one paragraph, so its rule lines up with the band). * The sizes are set by redefining the type-scale variables (--fs-96, --fs-40) on this slide only, so every rule that * reads them keeps working: base.css's runFit cap for a no-break run wider than the line (banking RU slide 3) still * applies on top (min(role size, line / run)), and Arabic script keeps its x1.12 (--rs). * * Colours: none changed. Directions: logical properties only. No hooks. Stage mode never sees this file. */ @media screen { @media screen { section.ds[data-layout="i-limit"]:not(#mk-layout) { --fs-96: clamp(34px, 23.619px + 3.1746vw, 48px); /* 36px at 390, 48px at 768 */ --fs-40: clamp(21px, 15.8095px + 1.5873vw, 28px); /* 22px at 390, 28px at 768 */ } section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 24px !important; } section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > p[data-fs="40"] { margin-block-start: 32px !important; padding-block-start: 24px !important; max-width: 100% !important; text-wrap: balance; /* a display line: no word alone on its last line (Arabic 'الحوار.' at 360px) */ } @media (min-width: 600px) { section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 32px !important; } section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page [data-main] > p[data-fs="40"] { margin-block-start: 40px !important; padding-block-start: 32px !important; } } /* Display headings are not hyphenated: the statement and the closing line (ES 'do-/minio,', FR 'mé-/tier,') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page :is(h2, p[data-fs="40"]) { hyphens: manual !important; } /* Chinese: the closing line breaks after the comma, never inside a word. Balanced over characters, it split '出发' in every Chinese deck ('Telonic 智能体从领域出 / 发，而非从对话出发。' at 360/390px; the stage render has none). keep-all leaves break opportunities only at the space and after the punctuation: 'Telonic 智能体从领域出发，/ 而非从对话出发。' (one line from 600px). The statement takes the same rule ('领域为先。/ 对话其次。'). The longest run, '智能体从领域出发，', is 9 characters (194px at 360px), so it always fits. Wrapping only, the text unchanged. */ :root:lang(zh) section.ds[data-layout="i-limit"]:not(#mk-layout) .slide-page :is(h2, p[data-fs="40"]) { word-break: keep-all !important; } } } /* marketing/reflow/layouts/i-model.css */ /* * Reflow layout module i-model (MK-6e; ARCHITECTURE.md 5.3): industry slide 5, "The model" ("A working model * of the property business."), in all five industries and seven languages (one skeleton everywhere). * * The slide is an accent overline, the h2, a lead, a 2 x 2 grid of numbered cards (entities, states and dependencies, * obligations, behaviour: number and title, a muted overline, a body), and a closing line under a rule. On the canvas * the cards are separated by a rule under the first row and one between the columns, with 48px padding beside it, and * the grid is centred by auto margins. The generic layer stacks the cards but keeps the first row's bottom rules, drops * the column rule, and turns the auto margins into a 32px top gap, so the closing line's rule touched the last card's * text and the cards had rules in one place and none in another. * * Phones (below 600px): cards stacked, each under a top rule (24px above its number), the canvas rules and paddings * reset; 32px between the grid and the closing line, whose rule spans the column. * Tablets (600px and up): the 2 x 2 grid as on the slide: the rule under the first row and the rule between the columns * (border decorative), 32px beside it; 40px around the grid. * * Specificity: :not(#mk-layout) lifts every rule above the generic layer. Colours: deck tokens only * (--color-border-decorative, as delivered). Directions: logical properties only (Arabic and Urdu mirror: the column * rule sits at the inline start of the second column). No hooks. Stage mode never sees this file. */ @media screen { @media screen { section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] { margin-block: 32px !important; padding-block: 0 !important; /* hospitality and insurance add 32px on the canvas: the same gaps in every deck */ row-gap: 32px !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div { padding: 24px 0 0 !important; border: 0 !important; border-block-start: 1px solid var(--color-border-decorative) !important; } /* The closing line: its rule spans the column. */ section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] + p { max-width: 100% !important; } /* The h2 and the card titles: balanced lines, so no short word sits alone on a last line ('business.' at 768px, Urdu 'ماڈل۔' at 390px; the h2 is one nowrap line on the canvas, so the deck gives it no balance of its own). */ section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] :is(h2, h3) { text-wrap: balance; } @media (min-width: 600px) { section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-block: 40px !important; row-gap: 0 !important; column-gap: 0 !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div { border-block-start: 0 !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(-n+2) { padding-block: 0 32px !important; border-block-end: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(n+3) { padding-block: 32px 0 !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(odd) { padding-inline: 0 32px !important; } section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(2,"] > div:nth-child(even) { padding-inline: 32px 0 !important; border-inline-start: 1px solid var(--color-border-decorative) !important; } } /* Display headings are not hyphenated: the h2 and card titles (RU 'бан-/ковского', 'стра-/хового') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-model"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-outcome.css */ /* * Reflow layout module i-outcome (MK-6e; ARCHITECTURE.md 5.3): industry slide 6, outcome design ("Designed around * outcomes, not exchanges."), in all five industries and seven languages (one skeleton everywhere). * * The slide is the h2 and a body (6 columns) beside the flow panel (6 columns), then 3 cards with top rules. The flow * panel (surface, radius 10px) is a grid of 4 max-content columns and 4 rows: per row, a customer input chip, the * system it touches, the action taken and the outcome reached (accent bordered), joined by a connector rule placed on * the grid behind the chips (an aria-hidden span across columns 1-3) and by small triangles at the inline start of * chips 2-4 (aria-hidden spans). The panel's 20 children are the same in all 35 pages: 4 x (connector, input, system, * action, outcome). The generic layer hid the connectors and triangles and put the chips in 2 columns in a row, so the * four flows ran together as one list of 16 chips, and gave the cards 2 columns with the third alone. * * Below 740px (phones and small tablets): the flow as 4 cards on the surface panel, one per row of the slide: input -> * system on one line, action -> outcome on the next, the triangles kept between the chips of a line (the one before the * action, which would point from the panel edge, hidden). The card is the row's connector span, placed behind its four * chips on the grid (rows 1-2, 4-5, 7-8, 10-11, with 16px spacer rows between) and painted white (--color-ground) with * a 10px margin beyond the chips; chips fill their column and wrap their text. Chip text stays on the type scale * (13px on phones). * From 740px: the flow as on the slide, 4 columns of shrinkable max-content tracks (chips may wrap to two lines rather * than the panel overflowing), each row's connector rule behind its chips from column 1 to column 4, the triangles * shown. ARCHITECTURE 5.3 asks for the flow fit-scaled here (848px canvas, 0.77 at 768); the panel is not a fixed-size * canvas in the translations (RU and FR chips run it past 1000px), so a scale would take labels under 12px; the tracks * shrink instead and the text keeps 14px. * Cards: one column below 720px, 3 columns from 720px. * * Specificity: :not(#mk-layout) lifts every rule above the generic layer and any class-level QA rule. Colours: deck * tokens only (cards --color-ground on the --color-surface panel, as the slide's own chips; connector * --color-border-control as delivered). Directions: logical properties only; the triangles point to the inline end * (border-inline-start), so they follow the flow in Arabic and Urdu. No hooks. Stage mode never sees this file. */ @media screen { @media screen { /* ---------------------------------------------------------------- the panel and its chips (all widths) ------- */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] { padding: 20px !important; place-content: start stretch !important; align-self: start !important; } /* Chips wrap at spaces; only words of 14 letters or more may be hyphenated (6 letters each side), where a word is wider than its chip (RU 'Перебронирование', 118px of 104px at 360); the generic layer's automatic hyphenation split short words in these narrow chips ('Acci-dente', 'Si-nistre'). */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] { min-height: 40px; height: auto !important; padding-block: 8px !important; white-space: normal !important; line-height: 1.25 !important; hyphenate-limit-chars: 14 6 6; } /* Triangles: centred on the chip's height. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] > span[aria-hidden="true"] { display: block !important; inset-block-start: calc(50% - 5px) !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+1) { display: block !important; } /* ---------------------------------------------------------------- below 740px: 4 cards --------------------- */ @media (max-width: 739.98px) { section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto 16px auto auto 16px auto auto 16px auto auto !important; gap: 10px 20px !important; padding: 22px 20px !important; } /* The card: the row's connector span, behind its chips. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+1) { grid-column: 1 / -1 !important; align-self: stretch !important; justify-self: stretch !important; height: auto !important; margin: -10px !important; border-radius: 8px; background: var(--color-ground) !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(1) { grid-row: 1 / span 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(6) { grid-row: 4 / span 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(11) { grid-row: 7 / span 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(16) { grid-row: 10 / span 2 !important; } /* Chips: input and action in column 1, system and outcome in column 2, filling their column. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] { justify-self: stretch !important; min-width: 0; padding-inline: 12px !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(5n+2), :nth-child(5n+4)) { grid-column: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(5n+3), :nth-child(5n+5)) { grid-column: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(2), :nth-child(3)) { grid-row: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(4), :nth-child(5)) { grid-row: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(7), :nth-child(8)) { grid-row: 4 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(9), :nth-child(10)) { grid-row: 5 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(12), :nth-child(13)) { grid-row: 7 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(14), :nth-child(15)) { grid-row: 8 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(17), :nth-child(18)) { grid-row: 10 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :is(:nth-child(19), :nth-child(20)) { grid-row: 11 !important; } /* The action starts the card's second line: no triangle from the panel edge. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+4) > span[aria-hidden="true"] { display: none !important; } } /* ---------------------------------------------------------------- 740px and up: the flow as on the slide ---- */ @media (min-width: 740px) { section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] { grid-template-columns: repeat(4, minmax(0, max-content)) !important; grid-template-rows: repeat(4, auto) !important; gap: 20px 28px !important; padding: 28px !important; justify-content: center !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+1) { grid-column: 1 / 4 !important; align-self: center !important; margin-inline-end: -28px !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+2) { grid-column: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+3) { grid-column: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+4) { grid-column: 3 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(5n+5) { grid-column: 4 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(-n+5) { grid-row: 1 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(n+6):nth-child(-n+10) { grid-row: 2 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(n+11):nth-child(-n+15) { grid-row: 3 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > :nth-child(n+16) { grid-row: 4 !important; } section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [style*="grid-template-columns: repeat(4, max-content)"] > [data-tid] { justify-self: start !important; max-width: 100%; } } /* ---------------------------------------------------------------- the cards --------------------------------- */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px !important; } /* Card titles: balanced lines (no word alone on a last line, as Urdu 'ہے۔' at 1023px). */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] h3 { text-wrap: balance; } @media (min-width: 720px) { section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page [data-main] > div[style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } } /* Display headings are not hyphenated: the h2 and card titles (ES 'resul-/tados,', FR 'résul-/tats,', RU 'опи-/раясь') split at 360-768px under the generic hyphenation (es, fr, ru) and the RU deck's own hyphens: auto. Every word fits its line whole (the type scale keeps them under the column width); wrapping only, the text unchanged. */ section.ds[data-layout="i-outcome"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } } } /* marketing/reflow/layouts/i-portfolio.css */ /* * Reflow layout module i-portfolio (MK-6f; ARCHITECTURE.md 5.3): industry slide 18, "The conversation layer as an * operating signal." and its counterparts, in all five industries and seven languages. * * The slide: overline, heading, the lead with a "Sample data" tag at its inline end, then four cards on a 4-column grid. * Each card is a mock-UI top on the surface ground (a bar chart of four rows, kept LTR in every language; a root-cause * note with an "Approve" button; a risk list; partner chips) above a title and a text. Three variants: property (cards * as flex columns, 200px tops, the chart's label column 104px wide, 16px mock-UI text); banking, hospitality and * insurance (cards on a subgrid, so each row of tops shares a height; label columns max-content with a 156px minimum, * 18px text); travel (flex columns, 200px tops, max-content label columns with a 136px minimum, 16px text). The generic * layer already gives the layout of ARCHITECTURE 5.3 (phones: the cards stacked, the tops in flow at their content * height, the bars full width; tablets: 2 x 2), but each chart row is its own grid: where a translated label is wider * than its column (RU 'Медицинское страхование', 'Групповое медицинское страхование' at 360px) it broke inside a word * and its bar started further along than the others; and in 2 x 2 the two tops of a row had different heights. * * This module: * - the bar chart: one grid for its four rows (the rows become subgrids), so every label shares one column, sized to * the longest label up to half the chart and never narrower than its longest word; labels wrap between words and * every bar starts at the same line (the canvas minimum widths, 104px, 136px or 156px, are released). The chart * stays LTR (the decks' global QA rule) and its labels keep their own direction; * - every card: a grid of two rows on its parent's rows (subgrid), so in 2 x 2 the tops of a row, and the texts under * them, start at the same lines (as the banking variant does on the slide); on phones each card simply takes its * content height; * - phones (below 600px): the mock-UI tops padded 16px (20-28px on the slide), the card texts 20px 20px 24px; * - the h2, the card titles and the mock-UI tops are not hyphenated, and the card titles are balanced (no short * word alone on a last line; wrapping only). * Text stays on the reflow type scale (mock-UI text 16 and 18 canvas px: 13-15px on phones, 14-16px on tablets; x1.12 in * Arabic script). No figure canvas, no hooks; the grid, the cards, the tops and the chart are found by structure. * Colours: none changed (the mock UI keeps its surface ground, anchor bars and button, the accent-secondary chip). * Directions: logical properties only; the chart island stays LTR, the cards mirror in Arabic and Urdu. Stage mode * never sees this file. * Selectors: every rule is scoped to section.ds[data-layout="i-portfolio"]:not(#mk-layout) (an id no element has: one * ID-level weight over the generic layer's attribute chains); declarations over inline styles carry !important. */ @media screen { @media screen { /* The card grid and its cards: each card spans two rows of the grid and lays its top and its text on them. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { grid-auto-rows: auto !important; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * { display: grid !important; grid-row: span 2 !important; grid-template-rows: auto auto !important; grid-template-rows: subgrid !important; row-gap: 0 !important; align-content: start; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :first-child { min-height: 0 !important; height: auto !important; } /* The bar chart (kept LTR): one shared label column for its rows. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] { display: grid !important; grid-template-columns: fit-content(50%) minmax(0, 1fr); column-gap: 12px; row-gap: 12px !important; align-content: center; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] > * { grid-column: 1 / -1; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] > [style*="grid-template-columns"] { grid-template-columns: fit-content(50%) minmax(0, 1fr) !important; grid-template-columns: subgrid !important; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-keep-ltr="chart"] > [style*="grid-template-columns"] > [data-tid] { min-width: 0 !important; overflow-wrap: normal !important; } /* The mock-UI tops (pictures of UI: short labels) are not hyphenated, so a chart label column is never narrower than its longest word (RU 'Медицин-ское', 'невыполнен-ные' at 360px under the generic hyphenation). */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :first-child { hyphens: manual !important; } @media (max-width: 599px) { section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :first-child { padding: 16px !important; } section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > * > :last-child { padding-block: 20px 24px !important; padding-inline: 20px !important; } } /* Display headings are not hyphenated (the generic es/fr/ru hyphenation split FR 'conver-sationnelle' in the h2 at 360px); every word fits its line whole. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; } /* The card titles: balanced lines, so no short word sits alone on a last line (Urdu 'ہے۔', 'کرتا۔' at 390px). Wrapping only. */ section.ds[data-layout="i-portfolio"]:not(#mk-layout) .slide-page h3 { text-wrap: balance; } } } /* marketing/reflow/layouts/layers.css */ /* * Reflow layout module layers (MK-6b; ARCHITECTURE.md 5.1): product slide 11 and industry slide 12, "How it's built" * ("Your systems at the base. The agent on top."; one skeleton in every deck and language). * * The slide is a stack of four full-width layer rows (04 the agent on the anchor, 03 the industry model on the * secondary accent, 02 one record on the surface, 01 channels and systems on the ground with a border), each a * 12-column grid: number and title in the first four columns, the description in the last eight. The generic layer * already stacks each row; this module sets the ARCHITECTURE target: * - phones: each layer a block, its number and title on one line (the number keeps its line, the title wraps beside * it), the description 8px below; the rows' 40px inline padding becomes 20px (it took a quarter of a 360px * column), 20px block padding, the slide's 8px between rows; * - from a 720px screen: the rows keep two columns, as on the slide, in halves rather than the slide's 4/8 (at * tablet sizes a third of the row put the number and a three-word title on two lines with its last word alone, * 'Your industry / model.', in 36 of 42 pages at 768px), number and title at 22px; 24px by 32px padding, both * columns centred on the row as on the slide; the rows share their columns (subgrids of the stack), so the * descriptions line up. A three-word title that still needs two lines (RU 'Ваша отраслевая / модель.') keeps * two words on its first line: balancing cannot do better with three words. * Headings are not hyphenated and are balanced (no word alone on a last line); wrapping only, the text unchanged. * Parts are found by structure: the rows are the 12-column grids in the stack under the heading. No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed * (the anchor row keeps #F2A98C and white on #442C43, as delivered). Directions: logical properties only; the rows * follow the slide's direction (Arabic and Urdu mirror). Stage mode never sees this file (reflow query only). */ @media screen { @media screen { /* The stack of rows under the heading. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 32px !important; gap: 8px !important; } /* A layer row: one column, number and title above the description. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] { padding: 20px !important; row-gap: 8px !important; align-items: start !important; } /* Number and title on one line: the number keeps its width, the title wraps beside it. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] > div:first-child { flex-wrap: nowrap !important; gap: 16px !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] > div:first-child > :first-child { flex: 0 0 auto !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] > p { max-width: none !important; text-wrap-style: pretty; /* no word alone on a last line where a better break exists */ } /* Headings: not hyphenated (the generic es/fr/ru hyphenation), balanced. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; text-wrap: balance; } @media (min-width: 600px) { section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div { margin-block-start: 40px !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] { padding: 24px 32px !important; } } @media (min-width: 720px) { /* Number and title at 22px (the card-title role; the generic 30px role reaches 25px at 768), so a three-word title holds one line of its half-row column in more languages. */ section.ds[data-layout="layers"]:not(#mk-layout) { --fs-30: 22px; } /* The stack becomes the grid and each row a subgrid of it, so the title column is shared by the four rows: half the row, or the longest unbreakable title word where that is wider (hospitality RU 'гостеприимства.' needs 202px at 25px), and the descriptions start on one line. Where subgrid is unsupported each row keeps its own halves. */ section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div { display: grid !important; grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr); gap: 8px 32px !important; } section.ds[data-layout="layers"]:not(#mk-layout) .slide-page [data-main] > h2 + div > [style*="grid-template-columns: repeat(12,"] { grid-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-columns: subgrid !important; column-gap: 32px !important; align-items: center !important; } } } } /* marketing/reflow/layouts/next-step.css */ /* * Reflow layout module next-step (MK-6b; ARCHITECTURE.md 5.1): product slide 22 and industry slide 22, the closing * slide "Next step" ("Every conversation, to the standard you'd choose."; one skeleton in every deck and language). * * The slide (dark, anchor #442C43): an 80px headline and a 28px lead in the first seven columns, the contact list in * the last five (hello@telonic.ai, telonic.ai, the Dubai address; each row an icon in #F2A98C and its text, between * two #F2A98C hairlines), the wordmark absolutely placed at the foot, and a full-bleed decorative SVG of streaks * behind (aria-hidden). The phone line was removed by the owner's edit (NOTES-v1), so the list has three rows. The * generic layer hides the streaks, brings the wordmark into flow at the end and stacks the two columns. This module * sets the ARCHITECTURE target: * - phones: headline 36px (35px at 360, rising to 46px at 719px while stacked), lead, contact rows (icon and * text, the icon centred on the first line of its text at every type size), wordmark static at the end; the * grid's 64px block padding (sized to centre the content on the 1080px canvas) goes, 32px between the text and * the list; the list's 32px block padding becomes 24px; * - from a 720px screen: two columns as on the slide (7/5 of the row, centred against each other), the headline * sized to its column (40px at 768, 46px at 1023). * The decorative streaks stay hidden (an inline SVG drawn for the 1920x1080 canvas; its aspect ratio is an attribute * the module cannot change, and stretched or letterboxed across a phone band they would read as stray marks). * Headings are not hyphenated and are balanced; wrapping only, the text unchanged. No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed * (white and #F2A98C on the anchor, as delivered; the accent is never used here). Directions: logical properties * only; the columns, the rows and the wordmark follow the slide's direction (Arabic and Urdu mirror; the email and * web address keep their own LTR bdi). Stage mode never sees this file (reflow query only). */ @media screen { @media screen { section.ds[data-layout="next-step"]:not(#mk-layout) { --fs-80: clamp(34px, 23.619px + 3.1746vw, 48px); /* 36px at 390, 46px at 719 */ } /* The 7/5 split: stacked, no canvas centring padding. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page > * > [style*="grid-template-columns: repeat(12,"] { padding-block: 0 !important; row-gap: 32px !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page h2 { hyphens: manual !important; text-wrap: balance !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page h2 + p { margin-block-start: 20px !important; } /* The contact list. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] { padding-block: 24px !important; gap: 16px !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div { gap: 12px !important; } /* Each icon (24px) centred on the first line of its text: half the text's line box less half the icon. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div > svg { margin-block-start: max(0px, calc(var(--fs-24) * var(--rs) * var(--lh-body) / 2 - 12px)) !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div > [data-fs="24"] { line-height: var(--lh-body) !important; hyphens: manual !important; /* names, not prose: the generic es/fr hyphenation gave 'Du-/bai' at 768px */ } /* Chinese headline: lines break between words. Balanced, its two lines split the word '达到' ('每一次对话，都达 / 到您…', every Chinese deck at 360px and from 720px); at most nine characters a line, wrapped greedily, it breaks after '都达到'. */ section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: 9.2em !important; text-wrap: wrap !important; } @media (min-width: 600px) { section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] { padding-block: 28px !important; gap: 20px !important; } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page [style*="border-block: 1px solid var(--color-accent-light)"] > div { gap: 16px !important; } } /* Two columns as on the slide. */ @media (min-width: 720px) { section.ds[data-layout="next-step"]:not(#mk-layout) { --fs-80: clamp(38px, 21.25px + 2.4vw, 46px); /* 40px at 768, 46px at 1023 */ } section.ds[data-layout="next-step"]:not(#mk-layout) .slide-page > * > [style*="grid-template-columns: repeat(12,"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; column-gap: 40px !important; align-items: center !important; } } } } /* marketing/reflow/layouts/p-agents.css */ /* * Reflow layout module p-agents (MK-6c; ARCHITECTURE.md 5.2): product slide 9, "Specialists, not generalists". * * The slide: heading and intro, then four agent cards in a 4-column grid. Each card is a two-row subgrid (title and * description, then a mini chat mock), so the mocks of all four cards start on one line. * The generic layer releases the subgrid and puts the cards in one column (two from 600px); the mocks keep their * internal layout (their text from the 16px role: 13-14px, 14.6-15.7px in Arabic script). This module: * - phones: one card per row, a little less card padding, the mock under its text; * - 600px and up: two columns, and each card is again a two-row subgrid of its row, so the two mocks of a row * start on one line as on the slide (cards in a row keep one height); * - the mock sits at the card's top and keeps its own width (no stretch). * Colours: unchanged. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-agents"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Heading and agent titles: not hyphenated (the generic es/fr/ru hyphenation split RU 'исходящ-их', 'изменен-иям', 'обращен-иям' at 768px; every word fits its card) and balanced, so no word sits alone on a last line. The chat mocks keep their own wrapping. Wrapping only, text unchanged. */ section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page :is(h2, h3):not([data-fig] *) { hyphens: manual !important; text-wrap: balance; } section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { margin-block-start: 32px !important; row-gap: 16px !important; } section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > [style*="subgrid"] { padding: 20px !important; row-gap: 20px !important; } @media (min-width: 600px) { section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; column-gap: 24px !important; row-gap: 24px !important; } section.ds[data-layout="p-agents"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] > [style*="subgrid"] { grid-row: span 2 !important; grid-template-rows: subgrid !important; padding: 24px !important; row-gap: 24px !important; } } } } /* marketing/reflow/layouts/p-centralise.css */ /* * Reflow layout module p-centralise (MK-6d; ARCHITECTURE.md 5.2): product slide 7, "02 · Centralise" ("One record. * Every channel, every department."). * * The slide: overline and heading, then a 12-column split: three numbered items (a 40px number column) beside a * 720x360 figure canvas ([data-fig], role="img" with its translated aria-label), a hub and spoke: five accent channel * chips (176x40, uppercase, no wrap) on the inline start join a bus that leads into the "One record" card in the middle, * which leads out to a bus and four anchor department chips on the inline end. The generic layer stacks the split and * fits the whole canvas into the column (figures.css), which gave 6.8-7.3px chip labels at 360px and 7.5-8px at 390px; * and where a translated label is wider than its 176px chip (ES "Correo electrónico", RU "Электронная почта", * "Передача объектов"), its white letters ran past the chip onto the light panel and read as cut off, in reflow as on * the slide. * * This module: * - phones (below 600px): the list's number column is 32px with a 12px gap (40px + 24px on the slide); * - the figure's panel gets padding (it is the figure's inline-size container, figures.css, so the queries below and * the fit use the padded width); * - panel narrower than 640px (phones, small tablets): the canvas is re-laid in flow (zoom 1, never scaled): the * channel chips in a wrapped row, a centred down connector, the "One record" card, a second connector, the * department chips in a wrapped row. Chips share their row (a long label wraps inside its chip); the other * connector rules are hidden. Text takes the reflow type scale (chips 16 canvas px: 13px on phones; the card 24: * 17px; x1.12 in Arabic script); * - panel 640px and wider (768px tablets, the 1023px reflow edge, 1024px touch): the canvas keeps figures.css's * fit-scale (720px canvas: 13.7px labels or more), and a label wider than its chip wraps onto two lines inside it * instead of running past it. * The chips, the card and the connectors are found by structure (the same in every language): chips are the children * that are text units ([data-tid]), the card is the child holding one, the rules are the others; the two connectors * kept are the canvas's rules into and out of the card (children 7 and 8). No hooks. * Colours: the deck's own tokens only (chips keep white on the accent and on the anchor, as delivered; the connectors * keep the accent, on the plum-tinted panel). Directions: logical properties only; rows follow the slide's direction * (Arabic and Urdu mirror, as the canvas does). The figure keeps role="img" and its aria-label. Stage mode never sees * this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-centralise"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Phones: the numbered list keeps a narrow number column. */ @media (max-width: 599px) { section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [style*="grid-template-columns: 40px minmax(0px, 1fr)"] { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 12px !important; } } /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } @media (min-width: 600px) { section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 32px 24px !important; } } /* Fit-scaled canvas: a label wider than its chip wraps inside it (two lines of 16 canvas px fit the 40px chip). */ @container (width >= 640px) { section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > [data-tid] { padding-inline: 8px; white-space: normal !important; text-align: center; line-height: 1.05 !important; } } @container (width < 640px) { /* The canvas: out of the fit-scale, a wrapping flex row in flow as wide as its panel. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 6px; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules: hidden with the canvas geometry, except the two into and out of the card. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:not([data-tid], :has([data-tid])):not(:nth-child(7), :nth-child(8)) { display: none !important; } /* The two kept rules: each a full line of its own with a 1px accent rule at its centre, reaching across the row gaps to the chips and the card. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:is(:nth-child(7), :nth-child(8)) { flex: 0 0 100%; width: auto !important; height: 40px !important; margin-block: -12px !important; background: linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 100% no-repeat !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(7) { order: 2; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(8) { order: 4; } /* The "One record" card, alone on its line between the connectors. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div:has(> [data-tid]) { order: 3; flex: 0 1 auto; box-sizing: border-box; width: auto !important; min-width: min(208px, 100%); height: auto !important; min-height: 72px; padding: 12px 24px !important; gap: 4px; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > div > [data-tid] { white-space: normal !important; text-align: center; font-size: calc(var(--fs-24) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } /* Chips: the channels first, three to a row (3 + 2), the departments last, two to a row (2 + 2); equal widths, centred, never narrower than their longest word (a row takes fewer chips where a word needs more room). The inline padding is 3px so the longest one-word channel labels fit a third of a 304px panel (360px viewport): with 6px, EN 'Telephony' (97.5px against 97.33px), FR 'Téléphonie' and RU 'Телефония' pushed the first row to two chips (2 over 3; RU 2 + 2 + 1). Labels are centred, so only the longest word comes near the chip's edge. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > [data-tid] { order: 1; flex: 0 1 calc((100% - 12px) / 3); box-sizing: border-box; width: auto !important; height: auto !important; min-height: 36px; padding: 8px 3px !important; white-space: normal !important; text-align: center; font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: 1.2 !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page [data-fig] > :is([data-tid="s07-019"], [data-tid="s07-020"], [data-tid="s07-021"], [data-tid="s07-022"]) { order: 5; flex-basis: calc((100% - 6px) / 2); } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'department.' at 360/768px, 'customer.' at 390px, ES 'departamentos.' at 360-1024px, UR 'ہے۔' at 360px). Wrapping only. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings break between words (MK-10 headbreak: balanced lines over a script that breaks between any two characters split '渠道' in the h2, '一份档案。所有渠 / 道，所有部门。', and '同一份' in the second item, '每个部门都基于同一 / 份历史记录工作。', at 360/390px; the stage keeps them whole). The h2 breaks only at its punctuation (word-break: keep-all; three runs of 5 characters), balanced. The items have none: each wraps greedily within a width that steps with its column, so each line ends at a word chosen here (round(down, 100%, X) is X or more where the column holds X, else 0): one line where the whole item fits, else '所有渠道都对应 / 同一位客户。' (7 + 6), '每个部门都 基于同一份 / 历史记录工作。' (10 + 7), '您终于能看清您的 / 对话带来了什么。' (8 + 8). Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h2:lang(zh):has(> [data-tid="s07-003"]), section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h2:lang(zh) > [data-tid="s07-003"] { word-break: keep-all !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> :is([data-tid="s07-005"], [data-tid="s07-008"], [data-tid="s07-011"])) { text-wrap: wrap !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s07-005"]) { max-inline-size: max(7.1em, round(down, 100%, 13.1em)) !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s07-008"]) { max-inline-size: max(10.1em, round(down, 100%, 17.1em)) !important; } section.ds[data-layout="p-centralise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s07-011"]) { max-inline-size: max(8.1em, round(down, 100%, 16.1em)) !important; } } } /* marketing/reflow/layouts/p-collage.css */ /* * Reflow layout module p-collage (MK-6c; ARCHITECTURE.md 5.2): product slide 3, "One customer. Five channels.". * * The slide is a numbered list beside a sample collage: one 1019x530 figure canvas ([data-fig], drawn at 1.08 on the * slide) whose panels are placed absolutely: the call log (with marker 2), the Messages notification, the chat * message from reservations, the WhatsApp chat (markers 1, 3, 4 in its flow), the email inbox (marker 5 and its * "no owner" tag hang from its lower edge) and the booking record (with the second marker 5). The generic layer fits * the whole canvas into the column (figures.css), which gave 3.1px text at 360px. * * Here the canvas is unstacked: it leaves figures.css's fit (zoom 1, never scaled), becomes a grid, and its panels come * into flow at 1:1 (every label at its delivered size, 11px and up), with fluid widths so they fit the column. The * markers that sit on a panel's corner on the slide share that panel's grid cell, pinned to the same corner, so they * move with it. The inbox rows keep their delivered ellipses. Panels are found by the text units they hold * ([data-tid], the same in every language); the module adds no hooks. * - phones: the list first, then the panels in one column (call log, notification, message, WhatsApp chat, inbox, * booking record), at most 460px wide; * - collage 640px wide and up (tablets): two columns: the call log stack beside the WhatsApp chat, then the inbox * beside the booking record; * - collage 900px wide and up (the 1023px reflow edge, 1024px touch): the slide's three columns: call log stack, * WhatsApp chat, inbox above the booking record. * The collage is a kept-LTR island (data-keep-ltr="collage", dir="ltr" in Arabic and Urdu): it keeps its left-to-right * arrangement in every language; inline-end below is its right edge. It stays aria-hidden (a decorative sample). * Colours: none changed. Directions: logical properties only. Stage mode never sees this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-collage"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Heading: not hyphenated (the generic es/fr/ru hyphenation split RU 'кана-лов' at 360/390px, 'одн-ого' at 768px, ES 'responsab-le' at 768px; every word fits the column) and balanced, so no word sits alone on a last line. Wrapping only, text unchanged. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page h2:not([data-fig] *) { hyphens: manual !important; text-wrap: balance; } /* The list first, the collage after it (on the slide the list is at the inline start). The collage panel is an inline-size container, so the panel grid follows its width. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-keep-ltr="collage"] { order: 2; container-type: inline-size; padding: 16px !important; } /* The "Illustrative" tag (in flow above the canvas, figures.css) keeps clear of the marker on the first panel's corner. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-keep-ltr="collage"] > [data-tid]:not([data-fig]) { margin-block-end: 24px !important; } /* The canvas: out of the fit-scale, a grid at 1:1. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] { position: relative !important; inset: auto !important; transform: none !important; zoom: 1 !important; width: auto !important; height: auto !important; max-width: 460px; margin-inline: auto !important; flex-shrink: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 20px; align-items: start; } /* Panels come into flow at a fluid width (their delivered width is the canvas's); markers keep their 30px disc. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > * { position: relative !important; inset: auto !important; min-width: 0; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :not([data-tid]) { width: auto !important; height: auto !important; } /* A marker sits on its panel's top inline-end corner, as on the slide (14px above it, overhanging its edge). */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid] { justify-self: end; align-self: start; margin-block-start: -14px; margin-inline-end: -14px; z-index: 4; } /* The chat's two red tags sit beside a marker, indented 24px (nowrap on the slide). In the narrowest columns (under 360px, French and Russian) tag, marker and indent are wider than the chat: the tag's text wraps instead of pushing the marker past the panel. Where they fit (360px and up) they keep one line. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] :is([data-tid="s03-033"], [data-tid="s03-037"]) { flex-shrink: 1 !important; min-width: 0; white-space: normal !important; } /* One column (phones): the panels in reading order. Each item gets its column as well as its row: with a row alone, auto-placement put the corner markers (2, 5) in an implicit second column beside their panel (the grid became 310px + 16px at 390px), so the panels lost 16px and the markers sat off their corner. */ section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-004"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-015"] { grid-area: 1 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-016"]) { grid-area: 2 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-020"]) { grid-area: 3 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-024"]) { grid-area: 4 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-038"]) { grid-area: 5 / 1; margin-block-end: 20px; /* room for the "no owner" tag and marker that hang 20px below the inbox */ } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-056"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-066"] { grid-area: 6 / 1; } /* Two columns: the call log stack beside the WhatsApp chat (which fills the stack's height, messages at the bottom as in a chat), then the inbox beside the booking record. */ @container (min-width: 640px) { section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 24px; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-004"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-015"] { grid-area: 1 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-016"]) { grid-area: 2 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-020"]) { grid-area: 3 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-024"]) { grid-area: 1 / 2 / span 3 / auto; align-self: stretch; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-038"]) { grid-area: 4 / 1; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-056"]), section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-066"] { grid-area: 4 / 2; } } /* Three columns, in the slide's proportions (250, 380 and 353 canvas px; the call log at least its 250px, so its numbers keep their line): call log stack, WhatsApp chat, inbox above the booking record. */ @container (min-width: 900px) { section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] { grid-template-columns: minmax(250px, 250fr) minmax(0, 380fr) minmax(0, 353fr); /* the call log never narrower than on the slide */ grid-template-rows: auto auto minmax(0, 1fr); column-gap: 18px; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-024"]) { grid-area: 1 / 2 / span 3 / auto; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-038"]) { grid-area: 1 / 3; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > :has([data-tid="s03-056"]) { grid-area: 2 / 3 / span 2 / auto; } section.ds[data-layout="p-collage"]:not(#mk-m) .slide-page [data-fig] > [data-tid="s03-066"] { grid-area: 2 / 3; } } } } /* marketing/reflow/layouts/p-control.css */ /* * Reflow layout module p-control (MK-6d; ARCHITECTURE.md 5.2): product slide 18, "You set the boundaries. The agent * keeps to them." (built for enterprise). * * The slide: a 12-column row with the heading and lead beside a surface panel of four circular badges (each a 210x210 * figure canvas, [data-fig]: an SVG ring whose 16px text runs on a circular path, around a 22px centre label: claim * decisions, scripted answers, off-limit topics, payment terms), then three numbered cards in a row. The generic layer * stacks the row and fits each badge into the panel (figures.css) with the badges wrapping, which left one 210px badge * per row on phones (a 900px column of badges) and two to a row on tablets; the cards stacked on phones and ran two * plus one on tablets. * * This module: * - the badges: two to a row on phones and small tablets, each sized to half the panel (at most its 210px canvas: * 152px at 360px, 167px at 390px; the ring text 11.5-12.7px), four in a row where the panel is 660px wide or more * (768px tablets: 159px badges, 12.1px ring text; full size from about 900px). Each badge is still the delivered * canvas, scaled whole (zoom), so the ring text stays on its circle in every language. The panel keeps its * surface ground with less padding (16px 8px on phones, 24px 16px from 600px); * - the cards: stacked up to 899px (24px 20px padding, a 16px gap; three columns at 768px left 180px of text * width), three in a row from 900px (the 1023px reflow edge, 1024px touch), as on the slide. * The panel is found as the parent of the badges ([data-fig]), the cards' row by its 3-column grid. No hooks. * Colours: none changed. Directions: logical properties only; the badges and cards follow the slide's direction (Arabic * and Urdu run right to left; each ring keeps its own path). Stage mode never sees this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-control"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* The badges' panel (an inline-size container, figures.css): a centred wrapping row. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :has(> [data-fig]) { flex-wrap: wrap !important; justify-content: center !important; align-content: center; gap: 8px !important; padding: 16px 8px !important; } /* Two to a row: each badge half the panel (less the gap and 1px of rounding room), never above its canvas size. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-fig] { margin-inline: 0 !important; /* figures.css's ink margins (RU ring text) would push a badge onto its own row */ zoom: min(1, tan(atan2((100cqw - 9px) / 2, var(--fig-w)))) !important; } @media (min-width: 600px) { section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :has(> [data-fig]) { gap: 12px !important; padding: 24px 16px !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-fig] { zoom: min(1, tan(atan2((100cqw - 13px) / 2, var(--fig-w)))) !important; } } /* Four in a row where the panel has room for four badges of 155px or more. */ @container (width >= 660px) { section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-fig] { zoom: min(1, tan(atan2((100cqw - 37px) / 4, var(--fig-w)))) !important; } } /* The cards: stacked, a little less padding. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding: 24px 20px !important; } /* Three in a row from 900px, as on the slide (at 720-899px three columns left 180-230px of text width: RU headings broke inside words). */ @media (min-width: 900px) { section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'you.', 'change.' at 360/390px, 'invented.' at 1023px, ES 'reglas.', 'manos.', UR 'ہیں۔' at 1023px). Wrapping only. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings and lead break between words (MK-10 sweep: balanced lines over a script that breaks between any two characters split '智能体' in the h2, '边界由您设定。智 / 能体…', at 390px and '始终' in the second card, '有些决策始 / 终由您做出。', at 1023px and 1024 touch; the lead split words at 360-1024px; the stage keeps them whole). Text with punctuation inside breaks only there (word-break: keep-all; the longest run, 15 characters of the lead, fits its 17em column at 360px), balanced: the headings as before, the lead too (its slide sets text-wrap: pretty), so its lines stay near equal where only five break points remain (at 390px one sentence a line, not 8 + 18 + 9 + 15 characters). The second card title has none: it wraps greedily within a width that steps with its column (round(down, 100%, X) is X or more where the column holds X, else 0): one line where it fits, else '有些决策始终 / 由您做出。' (6 + 5). Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-control"]:not(#mk-m) .slide-page :is([data-tid="s18-002"], [data-tid="s18-003"], [data-tid="s18-013"], [data-tid="s18-019"]):lang(zh) { word-break: keep-all !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-tid="s18-003"]:lang(zh) { text-wrap: balance !important; } section.ds[data-layout="p-control"]:not(#mk-m) .slide-page [data-tid="s18-016"]:lang(zh) { text-wrap: wrap !important; max-inline-size: max(6.1em, round(down, 100%, 11.1em)) !important; } } } /* marketing/reflow/layouts/p-cover.css */ /* * Reflow layout module p-cover (MK-6c; ARCHITECTURE.md 5.2): product slide 1, the cover (dark, anchor ground). * * The slide: the wordmark (absolute, top inline-start), a 12-column grid with the headline and lead (7 columns) beside * six channel cells (5 columns, a 2x3 grid with hairlines between the cells), and a three-column band under an * accent-light rule (Specialise, Centralise, Complete) with hairline separators between its columns. * The generic layer already puts the wordmark in flow at the top, stacks the headline above the cells and sizes the * type. This module sets the cells and the band: * - channel cells: two columns from 360px (one column below), with the slide's hairlines between cells (inline-start * on the second column, block-start from the second row; a block-start rule between rows in one column), and * tighter cell padding on phones; * - band: three stacked rows on phones (a hairline between rows), three columns from 600px with the slide's * separators restored between them. * Colours: the slide's own hairline (white at 20%) and accent-light separators (#F2A98C on the anchor #442C43, * 6.42:1); no accent on the anchor. Text colours unchanged. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-cover"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* The headline block and the cells: a larger gap than the generic row gap. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(12,"] { row-gap: 40px !important; padding-block-end: 40px !important; } /* The headline's two sentences (one block each): where a sentence wraps, its lines are balanced, so it does not end on a lone word (Urdu 'گئی۔', Russian 'отрасли.' at 390px), and it is not hyphenated (a display line; the generic hyphenation of es/fr/ru split 'ва-шей' at 360px, and balancing alone split 'качествен-ные'). Wrapping only; the size stays the type scale's. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page h1 > [data-tid] { text-wrap: balance; hyphens: manual; } /* The lead and the channel names: not hyphenated (ES 'conv-ersaciones', FR 'convers-ations' in the lead at 390px) and balanced (no word alone on the lead's last line: AR 'المؤسسات.', ES 'empresas.', RU 'клиентами.'). */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page :is(h3, [data-tid="s01-003"]) { hyphens: manual !important; text-wrap: balance; } /* Chinese lead: lines break between words. Wrapped at the column's width it split '客户' at 360px and left '对话。' alone at 390px. Where it does not fit the column on one line (21.3em; 100% is the column), it wraps greedily in 11.12em, so it breaks at its comma: '专精行业的 AI 智能体， / 用于企业与客户的对话。' (the window is 11.00-11.25em); where it fits (from about 460px), one line as before. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [data-tid="s01-003"]:lang(zh) { text-wrap: wrap !important; max-inline-size: min(100%, max(11.12em, (100% - 21.3em) * 100000)) !important; } /* Channel cells: one column below 360px, each cell under a hairline. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 16px 12px !important; border-inline-start: 0 !important; border-block-start: 1px solid rgba(255, 255, 255, 0.2) !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :first-child { border-block-start: 0 !important; } /* Two columns from 360px, hairlines as on the slide: inline-start on the second column, block-start from the second row. */ @media (min-width: 360px) { section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(2) { border-block-start: 0 !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > :nth-child(2n) { border-inline-start: 1px solid rgba(255, 255, 255, 0.2) !important; } } @media (min-width: 600px) { section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] > * { padding: 24px !important; } } /* The band: three stacked rows on phones, a hairline between rows. */ section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block: 16px; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :first-child { padding-block-start: 0; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :not(:first-child) { border-block-start: 1px solid rgba(255, 255, 255, 0.2); } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :last-child { padding-block-end: 0; } /* Three columns from 600px, the slide's accent-light separators back in the column gap. */ @media (min-width: 600px) { section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 48px !important; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { padding-block: 0; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :not(:first-child) { border-block-start: 0; } section.ds[data-layout="p-cover"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > span[aria-hidden="true"][style*="position: absolute"] { display: block !important; } } } } /* marketing/reflow/layouts/p-deployment.css */ /* * Reflow layout module p-deployment (MK-6d; ARCHITECTURE.md 5.2): product slide 20, "Start with one channel. Live * within weeks." (getting started). * * The slide: heading, then a 12-column split: three numbered steps (a 56px number column: 01 Design, 02 Deploy, * 03 Measure) beside an 812x377 figure canvas ([data-fig], no role; its orbit SVG is aria-hidden): five decorative * orbit ellipses behind a 551x342 group placed in the middle, holding the Telonic logo tile (with its accent-light * glow) and a building tile, joined by dashed connectors to a vertical bus that leads to four chips (icon and label: * map your workflows, connect your systems, agree the measures, extend channel by channel). The generic layer stacks * the split and fits the whole canvas into the column (figures.css), which gave 8.1px chip labels at 360px and 8.8px at * 390px. * * This module: * - phones (below 600px): the steps' number column is 44px with a 12px gap (56px + 20px on the slide), and the * figure's panel gets 24px 12px of padding (it is the figure's inline-size container, figures.css); * - phones (below 600px, as the panel padding): the canvas is re-laid in flow as a vertical checklist (zoom 1, never * scaled): the orbits hidden; the logo tile and the building tile in a row at the inline start (56px, the logo at * its delivered 34px); under the logo tile the canvas's own dashed bus runs down to the last chip, and the four * dashed stubs lead from it to the four chips (the last one turning the corner), stacked full width, each with its * icon (labels wrap where a translation needs two lines). The connectors from the tiles to the bus are hidden. * Chip labels take the reflow type scale (20 canvas px: 16px on phones, x1.12 in Arabic script); * - 600px and wider (tablets, the 1023px reflow edge, 1024px touch): the canvas keeps figures.css's fit-scale (812px * canvas: 13.2px labels at 600px, 17px at 768px), orbits and all. * The parts are found by structure (the same in every language): the group is the canvas's div child; in it, the * dashed spans 1-4 join the tiles to the bus, span 5 is the bus, spans 6-9 the stubs, children 10 and 11 the tiles, * the children holding a text unit ([data-tid]) the chips. No hooks. * Colours: the deck's own tokens only (unchanged: chips on the ground, dashed rules in the control border token, the * logo tile's accent-light glow). Directions: logical properties only; the grid follows the slide's direction, so in * Arabic and Urdu the tiles and the bus sit at the right and the stubs lead left to the chips (the dashed rules keep * the deck's own border sides: border-inline-start in the RTL builds). Stage mode never sees this file (reflow query * only). * Selectors: every rule is scoped to section.ds[data-layout="p-deployment"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { @media (max-width: 599px) { /* The numbered steps keep a narrower number column. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [style*="grid-template-columns: 56px minmax(0px, 1fr)"] { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 12px !important; } /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } } @media (max-width: 599px) { /* The canvas: out of the fit-scale, a block in flow as wide as its panel; the orbits hidden. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > svg { display: none !important; } /* The group: a two-column grid (tiles and bus | chips). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div { position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-auto-rows: auto; row-gap: 8px; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > * { position: static !important; inset: auto !important; margin: 0 !important; } /* Connectors from the tiles to the bus: hidden. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(-n+4) { display: none !important; } /* Tiles: 56px, side by side in the first row (the building tile 12px after the logo tile). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:is(:nth-child(10), :nth-child(11)) { width: 56px !important; height: 56px !important; grid-row: 1; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(10) { grid-column: 1; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(11) { grid-column: 2; justify-self: start; margin-inline-start: 12px !important; } /* The bus: from under the logo tile's centre down to the last chip's row (across the row gaps). It is the same 28px box at the column's inline end as the stubs, so its inline-start rule (border-left in the LTR builds, border-inline-start in the RTL ones) runs on the same line as the last stub's corner (checker, MK-6d: a 1px box centred in the column put the bus 1px off the corner in Arabic and Urdu). */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(5) { grid-column: 1; grid-row: 2 / 5; justify-self: end; width: 28px !important; height: auto !important; margin-block: -8px !important; } /* The stubs: from the bus to each chip, at the chip's middle. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(n+6) { grid-column: 1; align-self: center; justify-self: end; width: 28px !important; height: 0 !important; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(6) { grid-row: 2; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(7) { grid-row: 3; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(8) { grid-row: 4; } /* The last stub turns the corner: down from the bus to the last chip's middle (half its row, however many lines its label takes), then across to it. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > span:nth-child(9) { grid-row: 5; align-self: start; height: 50% !important; border-block-start: 0 !important; border-block-end: 1px dashed var(--color-border-control); border-inline-start: 1px dashed var(--color-border-control); } /* The chips: stacked full width, icon and label; the label wraps where it must. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:has([data-tid]) { grid-column: 2; min-width: 0; height: auto !important; min-height: 48px; padding: 10px 16px !important; white-space: normal !important; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(12) { grid-row: 2; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(13) { grid-row: 3; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(14) { grid-row: 4; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] > div > div:nth-child(15) { grid-row: 5; } section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-fig] [data-tid] { min-width: 0; font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'weeks.' at 768px, ES 'semanas.' and AR 'أسابيع.' at 360/390px, UR 'آغاز۔' at 768px). Wrapping only. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese h2 breaks between words: only at its full stop (word-break: keep-all; '从一个渠道开始。 / 数周内即可上线。', two runs of 8 characters), so balancing over a script that breaks between any two characters can never split a word (the MK-6d headings of slides 6, 7, 15 and 18 did, MK-10 headbreak). Wrapping only, the text unchanged. */ section.ds[data-layout="p-deployment"]:not(#mk-m) .slide-page [data-tid="s20-002"]:lang(zh) { word-break: keep-all !important; } } } /* marketing/reflow/layouts/p-enterprise.css */ /* * Reflow layout module p-enterprise (MK-6c; ARCHITECTURE.md 5.2): product slide 17, "Built for the teams that have to * sign it off" (a Grid Slide component). * * The slide: heading and intro, then six cards in a 3-column grid; each card has a 64px tinted strip of sample chips * (labels, tags, numbered items; nowrap and clipped on the slide) above its title and description. * The generic layer puts the cards in one column (two from 600px), lets the strips grow and their chips wrap. This * module: * - phones: one card per row; the strip's chips wrap onto as many lines as they need, with even gaps (the strip * with a square marker keeps the marker beside its first label, the second label under it); * - 600px and up: two columns (three from 960px, as on the slide), and each card is a two-row subgrid of its row, * so the strips and the titles of a row line up whatever the number of chip lines. * Colours: unchanged. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-enterprise"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Heading and card titles: not hyphenated (the generic es/fr/ru hyphenation split ES 'gest-ionamos', 'intervien-en', RU 'котор-ые', 'подключа-ются', 'работ-аем' at 390-1023px; every word fits its card) and balanced, so no word sits alone on a last line (EN 'it.', 'you.', RU 'вами.'). Wrapping only, text unchanged. */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page :is(h2, h3) { hyphens: manual !important; text-wrap: balance; } /* Chinese card titles that take two lines in a card narrower than the title (from 600px: 9-12em): lines break between words. Balanced, they split '关键' ('工作人员在关 / 键之处介入。') and '之前' ('在任何人听到之 / 前完成测 试。'). Where the title does not fit its card on one line (100% is the card's text width), it wraps greedily in 7.5em ('工作人员在关键 / 之处介入。') or 8.5em ('在任何人听到之前 / 完成测试。'); where it fits, one line as before. */ /* The Chinese heading likewise: balanced (the slide's own text-wrap: balance), its two lines split '批准' at some column widths ('为必须签字批 / 准的团队而打造'; at 390px with a scrollbar, the balancing flips between 7 + 6 and 6 + 7 characters as the width changes). Where it does not fit on one line (13em), it wraps greedily in 7.5em: '为必须签字批准 / 的团队而打造'. */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page h2:lang(zh):has(> [data-tid="s17-002"]) { text-wrap: wrap !important; max-inline-size: max(7.5em, (100% - 13em) * 100000) !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s17-014"]) { text-wrap: wrap !important; max-inline-size: max(7.5em, (100% - 12em) * 100000) !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s17-019"]) { text-wrap: wrap !important; max-inline-size: max(8.5em, (100% - 13em) * 100000) !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { margin-block-start: 32px !important; row-gap: 16px !important; } /* The chip strip: wraps, even gaps, its own block padding (it had the 64px canvas height). Its lines stay together, centred in the strip (align-content), when the strip is taller than its chips: from 600px a strip takes its row's tallest strip height (subgrid), and its wrapped lines had spread apart over that height. */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child { height: auto !important; min-height: 56px; flex-wrap: wrap !important; align-content: center; gap: 8px 12px !important; padding-block: 12px !important; } /* The strip that starts with a square marker (the hand-over card): the marker keeps its line beside the first label, and the second label goes under the first (a wrapped long label would otherwise leave the marker alone on a line, as in Russian). */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child:has(> [aria-hidden="true"]:first-child) { display: grid !important; grid-template-columns: 6px minmax(0, 1fr); align-items: center; gap: 4px 12px !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child > [aria-hidden="true"]:first-child ~ * { grid-column: 2; } /* The card's body (title, description). */ section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :last-child { padding-block: 16px 20px !important; padding-inline: 20px !important; } @media (min-width: 600px) { section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; gap: 16px !important; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * { grid-row: span 2 !important; display: grid !important; grid-template-rows: subgrid; row-gap: 0; } section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :last-child { padding-block: 20px !important; padding-inline: 24px !important; } } @media (min-width: 960px) { section.ds[data-layout="p-enterprise"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } } } /* marketing/reflow/layouts/p-intelligence.css */ /* * Reflow layout module p-intelligence (MK-6d; ARCHITECTURE.md 5.2): product slide 15, "Make enterprise-grade decisions * with intelligence and reliability." (the platform). * * The slide: heading, intro with a "Sample data" tag at the inline end, then three cards in a row, each a 200px data * panel on the surface ground (top reasons: a 4-column table of label, bar, count and change; a flagged cause with an * Approve button; a list of flagged customers) above a title and a line of text. No figure canvas: every text is on * the reflow type scale. The generic layer stacks the cards on phones and runs them two plus one on tablets, the third * card alone at half width; in the table the labels share a shrunk first column with the bar (two lines each in a * phone or half-width card). * * This module: * - phones (below 600px): the panels' inline padding is 20px (28px on the slide) and the cards' text blocks 20px * (24px), so the narrow column keeps more of its width; * - the table: where its panel is narrower than 420px (phones, the two-column tablet cards), each label takes its * own line above its bar, count and change (one line per label instead of two lines squeezed beside the bar); * counts and changes never wrap ("1 120" stays whole); * - 600px and up: two cards to a row at equal heights, and the third card across the row with its panel beside its * text (half each), instead of alone at half width. * The cards' row is found by its 3-column grid, the table as the grid holding its first label (s15-006; its template * differs by language: 200px 1fr 56px 64px, or max-content 1fr 44px 48px in FR, RU, ZH), the panels as the cards' first * children. No hooks. Colours: none changed. Directions: logical properties only; the third card's panel sits at the * inline start (the right in Arabic and Urdu); counts and changes stay in their LTR . Stage mode never sees this * file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-intelligence"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css); * declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* The panels (the cards' first children): inline-size containers, so the table follows its panel's width. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child { container-type: inline-size; } /* Counts and changes keep one line. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) > bdi { white-space: nowrap !important; } @media (max-width: 599px) { section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :first-child { padding-inline: 20px !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > * > :last-child { padding: 20px !important; } } /* The table in a narrow panel: label on its own line, then bar | count | change. */ @container (width < 420px) { section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) { grid-template-columns: minmax(40px, 1fr) auto auto !important; row-gap: 4px !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) > span[data-tid] { grid-column: 1 / -1 !important; margin-block-start: 8px; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="display: grid"]:has(> [data-tid="s15-006"]) > span[data-tid]:first-child { margin-block-start: 0; } } @media (min-width: 600px) { section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { align-items: stretch !important; } /* The first two cards share two rows (panel, then text), so their panels take one height and both titles start on one line (checker, MK-6d: the table's panel, labels above their bars, was taller than its neighbour's, so the two titles sat at different heights). The panels keep their centred content. Without subgrid, as before. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :nth-child(-n+2) { display: grid !important; grid-row: span 2 !important; grid-template-rows: subgrid; row-gap: 0 !important; } /* The third card across the row: panel beside text. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :nth-child(3) { grid-column: 1 / -1 !important; flex-direction: row !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] > :nth-child(3) > * { flex: 1 1 0% !important; min-width: 0; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'ask.', 'call.', 'leave.' at 768px, ES 'vayan.' at 390px, RU 'клиенты.', 'ушли.' at 390-1024px, UR 'ہیں۔' at 768px). Wrapping only. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings break between words (MK-10 headbreak: balanced lines over a script that breaks between any two characters split '之前' in the third card, '在客户流失之 / 前采取行动。', at 768px; the stage keeps it whole). A heading with punctuation inside breaks only there (word-break: keep-all; runs of at most 9 characters), balanced. A card title without wraps greedily within a width that steps with its column, so each line ends at a word chosen here (round(down, 100%, X) is X or more where the column holds X, else 0): one line where the whole title fits, else '了解客户在 / 问什么。' (5 + 4), '在客户流失之前 / 采取行动。' (7 + 5). Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3):lang(zh):has(> :is([data-tid="s15-002"], [data-tid="s15-016"])), section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page :is(h2, h3):lang(zh) > :is([data-tid="s15-002"], [data-tid="s15-016"]) { word-break: keep-all !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page h3:lang(zh):has(> :is([data-tid="s15-010"], [data-tid="s15-022"])) { text-wrap: wrap !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s15-010"]) { max-inline-size: max(5.1em, round(down, 100%, 9.1em)) !important; } section.ds[data-layout="p-intelligence"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s15-022"]) { max-inline-size: max(7.1em, round(down, 100%, 12.1em)) !important; } } } /* marketing/reflow/layouts/p-logo-wall.css */ /* * Reflow layout module p-logo-wall (MK-6c; ARCHITECTURE.md 5.2): product slide 16, "Works inside the systems you * already run". * * The slide: heading and intro, an 8x8 grid of 64 cells ([data-keep-ltr="logo-grid"], dir="ltr" in Arabic and Urdu) * with hairlines between the cells (inline-start and block-start borders), each cell either a wordmark image or an * icon beside a name (16 canvas px), then the disclaimer. * The generic layer gives as many 120px (140px in Arabic script) columns as fit, the name beside its icon. This module: * - 3 columns on phones, 4 from 480px, 6 from 600px, 8 (the slide's) from 960px; * - each cell centred in a row of at least 72px; an icon above its name (names centred, never hyphenated, 13-14px * from the type scale; 14.6-15.7px in Arabic script), wordmarks at their delivered size, scaled down only where a cell is narrower * (aspect kept); * - the slide's hairlines redrawn for the column count: inline-start on every cell but the first of a row, * block-start on every row but the first. * The grid stays left to right in every language (a kept-LTR island); inline-start is its left edge. Colours: the * slide's own border token. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-logo-wall"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Heading: not hyphenated (the generic es/fr/ru hyphenation split ES 'sist-emas', RU 'кот-орыми' at 360/390px; every word fits the column) and balanced, so no word sits alone on a last line (EN 'run.' at 768px). Wrapping only, text unchanged. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page h2 { hyphens: manual !important; text-wrap: balance; } /* (The grid selector carries [style*="grid-template-columns"] to outrank the generic Arabic-script column rule.) */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: minmax(72px, auto); margin-block-start: 32px !important; row-gap: 0 !important; column-gap: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > * { box-sizing: border-box; padding: 12px 6px !important; border-inline-start: 0 !important; border-block-start: 0 !important; } /* Wordmarks at their delivered size, at most the cell's width: the box narrows and the image is drawn contained in it (object-fit), so its aspect is kept without relying on the file's intrinsic ratio. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] img { max-width: 100% !important; object-fit: contain; } /* An icon above its name. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > * > div { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; max-width: 100% !important; min-width: 0; text-align: center; } /* Names are brand names: never hyphenated (the generic layer hyphenates French, Spanish and Russian text, and the names' balanced wrapping then split 'Micro-soft'). */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > * > div > [data-tid] { max-width: 100%; hyphens: manual; } /* Hairlines for 3 columns. Each wider column count first clears them with a rule of the same weight (> :nth-child(n), not > *, which the :nth-child rules below outrank whatever their order) and then draws its own; with > * the 3-, 4- and 6-column hairlines had stayed on and added up from 480px. */ section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(3n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+4) { border-block-start: 1px solid var(--color-border-decorative) !important; } @media (min-width: 480px) { section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n) { border-inline-start: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(4n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+5) { border-block-start: 1px solid var(--color-border-decorative) !important; } } @media (min-width: 600px) { section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: minmax(80px, auto); } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n) { padding: 12px 8px !important; border-inline-start: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(6n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+7) { border-block-start: 1px solid var(--color-border-decorative) !important; } } @media (min-width: 960px) { section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"][style*="grid-template-columns"] { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n) { border-inline-start: 0 !important; border-block-start: 0 !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :not(:nth-child(8n+1)) { border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-logo-wall"]:not(#mk-m) .slide-page [data-keep-ltr="logo-grid"] > :nth-child(n+9) { border-block-start: 1px solid var(--color-border-decorative) !important; } } } } /* marketing/reflow/layouts/p-specialise.css */ /* * Reflow layout module p-specialise (MK-6d; ARCHITECTURE.md 5.2): product slide 6, "01 · Specialise" ("Agents that * already know how your industry works."). * * The slide: overline and heading, then a 12-column split: three numbered items (a 40px number column) beside a * 640x380 figure canvas ([data-fig], role="img" with its translated aria-label). The canvas: three accent chips * (entities, stages, rules) feed down through accent connector rules into a 172px tile holding a 12 x 12 dot matrix, * which feeds down through anchor rules into three anchor chips (workflows, policies, systems). The generic layer * stacks the split and fits the whole canvas into the column (figures.css), which gave 8.2px chip labels at 360px and * 8.95px at 390px. * * This module: * - phones (below 600px): the list's number column is 32px with a 12px gap (40px + 24px on the slide), so the text * keeps more of the narrow column; * - the figure's panel gets padding (it is the figure's inline-size container, figures.css, so the queries below and * the fit use the padded width); * - panel narrower than 560px (phones): the canvas is re-laid in flow (zoom 1, never scaled): the accent chips in a * wrapped row, one centred accent connector, the dot matrix in its tile, one centred anchor connector, the anchor * chips in a wrapped row. Chips share their row (equal widths, a long label wraps inside its chip). The other * connector rules are hidden. Chip labels take the reflow type scale (16 canvas px: 13px on phones, x1.12 in * Arabic script); * - panel 560px and wider (tablets, the 1023px reflow edge, 1024px touch): the canvas keeps figures.css's fit-scale * (640px canvas: 14px labels or more). * The chips, the matrix and the connectors are found by structure (the same in every language): the chips are the * children holding a text unit ([data-tid]), the matrix is the aria-hidden child, the rules and the tile are the other * children; the two connectors kept are the canvas's centre rules (children 4 and 11, accent and anchor). The tile's * border, radius and ground move to the matrix (same tokens), so the tile keeps its look in flow. No hooks. * Colours: the deck's own tokens only (chips keep white on the accent and on the anchor, as delivered). Directions: * logical properties only; rows follow the slide's direction (Arabic and Urdu mirror, as the canvas does). The figure * keeps role="img" and its aria-label. Stage mode never sees this file (reflow query only). * Selectors: every rule is scoped to section.ds[data-layout="p-specialise"]:not(#mk-m). No element has that id: the * :not() adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css); declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Phones: the numbered list keeps a narrow number column. */ @media (max-width: 599px) { section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [style*="grid-template-columns: 40px minmax(0px, 1fr)"] { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 12px !important; } } /* The figure's panel (an inline-size container, figures.css). */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 24px 12px !important; } @media (min-width: 600px) { section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :has(> [data-fig]) { padding: 32px 24px !important; } } @container (width < 560px) { /* The canvas: out of the fit-scale, a wrapping flex row in flow as wide as its panel. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] { zoom: 1 !important; flex: 1 1 100% !important; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 6px; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Connector rules and the empty tile: hidden with the canvas geometry. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:not(:has([data-tid])):not([aria-hidden="true"]):not(:nth-child(4), :nth-child(11)) { display: none !important; } /* The two centre rules: each a full line of its own with a 1px rule at its centre, reaching across the row gaps to the chips and the matrix (the accent one above the matrix, the anchor one below it). */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:is(:nth-child(4), :nth-child(11)) { display: block !important; flex: 0 0 100%; width: auto !important; height: 40px !important; margin-block: -12px !important; background: linear-gradient(var(--mk-6d-rule), var(--mk-6d-rule)) center / 1px 100% no-repeat !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(4) { --mk-6d-rule: var(--color-accent); order: 2; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:nth-child(11) { --mk-6d-rule: var(--color-anchor); order: 4; } /* The dot matrix in its tile (the tile's border, radius and ground; 16px inset, 172px as on the slide). */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > [aria-hidden="true"] { order: 3; flex: 0 0 auto; box-sizing: content-box; padding: 16px; border: 1px solid var(--color-border-decorative); border-radius: 16px; background: var(--color-ground); } /* Chips: the accent row first, the anchor row last; equal shares of their row, never narrower than their longest word. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:has(> [data-tid]) { order: 1; flex: 1 1 0%; display: flex !important; width: auto !important; height: auto !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div:has(> :is([data-tid="s06-016"], [data-tid="s06-017"], [data-tid="s06-018"])) { order: 5; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page [data-fig] > div > [data-tid] { flex: 1 1 auto; justify-content: center; box-sizing: border-box; height: auto !important; min-height: 36px; padding: 8px !important; white-space: normal !important; text-align: center; font-size: calc(var(--fs-16) * var(--rs)) !important; line-height: 1.2 !important; } } /* Headings are not hyphenated (the generic es/fr/ru hyphenation split them at 360-1023px: RU 'од-ному', ES 'traba-jan', 'cues-tión'). Every word fits its line whole at the type scale's sizes; wrapping only, the text unchanged. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } /* Balanced heading lines: no word alone on a last line (checker, MK-6d: EN 'works.', 'prompted.' at 360px, ES 'usted.', 'instrucciones.' at 360-768px, AR 'قطاعك.' at 360/390px). Wrapping only. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese headings break between words (MK-10 headbreak: balanced lines over a script that breaks between any two characters split '运作' in the h2, '已经了解您所在行业运 / 作方式的 AI 智能体。', at 360, 390 and 768px, and '系统' in the third item, '您的业务政策内置于系 / 统，…', at 360/390px; the stage keeps both words whole). A heading with punctuation inside breaks only there (word-break: keep-all; its longest run, 12 characters, fits the narrowest item column, 13.5em at 360px), balanced. A heading without wraps greedily within a width that steps with its column, so each line ends at a word chosen here: round(down, 100%, X) is X or more where the column holds X, else 0. h2: one line from 20.4em (the whole heading, 19.4em, and room for its closing full stop), else '已经了解您所在行业运作 / 方式的 AI 智能体。' (11.1em), else '已经了解您所在 / 行业运作方式的 / AI 智能体。' (7.1em); second item: one line, else 8 + 8 characters. Wrapping only, the text unchanged; other languages untouched. */ section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> :is([data-tid="s06-005"], [data-tid="s06-011"])), section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh) > :is([data-tid="s06-005"], [data-tid="s06-011"]) { word-break: keep-all !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h2:lang(zh):has(> [data-tid="s06-003"]) { text-wrap: wrap !important; max-inline-size: max(7.1em, min(11.1em, round(down, 100%, 11.1em)), round(down, 100%, 20.4em)) !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s06-008"]) { text-wrap: wrap !important; max-inline-size: max(8.1em, round(down, 100%, 16.1em)) !important; } /* Phones under 340px: the third item's first run (12 characters) no longer fits its column, and the emergency break put its comma at the start of a line (320-327px); there it wraps greedily at 8 characters a line, '您的业务政策内置 / 于系统，而非写在 / 提示词里。'. */ @media (max-width: 339px) { section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s06-011"]), section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh) > [data-tid="s06-011"] { word-break: normal !important; } section.ds[data-layout="p-specialise"]:not(#mk-m) .slide-page h3:lang(zh):has(> [data-tid="s06-011"]) { text-wrap: wrap !important; max-inline-size: 8.1em !important; } } } } /* marketing/reflow/layouts/p-stats.css */ /* * Reflow layout module p-stats (MK-6c; ARCHITECTURE.md 5.2): product slides 2 ("The problem", three figures and a * source note) and 5 ("Good service, by design", five figures). * * The slide: the heading and intro, then a row of big figures (120 canvas px) with a caption under each, separated by * vertical hairlines (border-inline-start on every figure after the first), then (slide 2) the source note. * The generic layer stacks the figures and sizes the type (the figures from the 120px role). This module: * - phones: one figure per row, caption below, a hairline between rows (the slide's separators turned to the block * axis); * - 760px and up: slide 2 in three columns; slide 5 in three plus two; the slide's vertical hairlines between the * figures of a row, a block gap between the rows. * Colours: the slide's own border token only. Directions: logical properties only. Reflow query only. * Selectors: every rule is scoped to section.ds[data-layout="p-stats"]:not(#mk-m). No element has that id: the :not() * adds one ID-level weight, so a module rule outranks the generic layer's attribute-heavy selectors (base.css, * figures.css) whatever their count; declarations that override the slides' inline styles still carry !important. */ @media screen { @media screen { /* Headings: not hyphenated (the generic es/fr/ru hyphenation split ES 'llev-arlas', RU 'продум-анный' at 360/390px; every word fits the column) and balanced, so no word sits alone on a last line. Wrapping only, text unchanged. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page h2 { hyphens: manual !important; text-wrap: balance; } /* Chinese slide 2 heading: lines break between words. Balanced (or greedy at the column's width), its lines split '没有', '达到' and '这些' at every width (3-4 lines on phones, 3 at 768px, 2 at 1023px). It wraps greedily in a measure chosen by the width the column gives (100% is the column): 10.5em under 14.5em, 14.5em under 22.5em, 22.5em from there; and its first line is 1em shorter (an empty float of 1px height at the line's end), so the lines break at word boundaries only: 企业的口碑取决于它 / 与客户的对话。但几乎 / 没有企业能让这些对话 / 达到自己期望的标准。 (phones, 360px: 11.2em) 企业的口碑取决于它与客户的 / 对话。但几乎没有企业能让这些 / 对话达到自己期望的标准。 (from 14.5em; 768px: 17.6em) 企业的口碑取决于它与客户的对话。但几乎没有 / 企业能让这些对话达到自己期望的标准。 (from 22.5em; 1023px: 24em) The text and its size are unchanged; the float holds no text. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page h2[data-tid="s02-002"]:lang(zh) { text-wrap: wrap !important; max-inline-size: calc(10.5em + clamp(0em, (100% - 14.5em) * 100000, 4em) + clamp(0em, (100% - 22.5em) * 100000, 8em)) !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page h2[data-tid="s02-002"]:lang(zh)::before { content: ""; float: inline-end; inline-size: 1em; block-size: 1px; } /* The figures' row (a 3- or 5-column grid pushed to the slide's foot): one column, figures under hairlines. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; margin-block-start: 40px !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * { padding-block: 24px !important; padding-inline-start: 0 !important; border-inline-start: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :first-child { padding-block-start: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :not(:first-child) { border-block-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :last-child { padding-block-end: 0 !important; } /* Caption under its figure: the slide's 24px gap is generous at phone sizes. */ section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * > [data-fs="24"] { margin-block-start: 12px !important; } /* 760px and up: three columns (slide 5: three, then two), vertical hairlines between the figures of a row. Not from 600px: a third of the row is narrower than the figures there, and '24/7', '55%' and '63%' broke onto two lines ('24/ / 7', '55 / %') at 600-708px (Arabic and Urdu, whose figures are 12% larger) and 600-648px (Latin, Cyrillic, Chinese). At 760px the widest figure, Arabic '24/7' (180px), has 192px; one column below. */ @media (min-width: 760px) { section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 40px !important; column-gap: 24px !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * { padding-block: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :not(:first-child) { border-block-start: 0 !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > :not(:nth-child(3n+1)) { padding-inline-start: 24px !important; border-inline-start: 1px solid var(--color-border-decorative) !important; } section.ds[data-layout="p-stats"]:not(#mk-m) .slide-page :is([style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"], [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"]) > * > [data-fs="24"] { margin-block-start: 16px !important; } } } } /* marketing/reflow/layouts/platform.css */ /* * Reflow layout module platform (MK-6a; ARCHITECTURE.md 5.1): product slide 14 and industry slide 17, "One view of every * conversation your customers have" (dark slide; identical skeletons in every deck). * * Five numbered lines beside a picture of the product console (kept left to right in every language, * data-keep-ltr="console"): a tab bar with a "Sample data" label, a header row with a period switch, five KPI tiles, a * "Conversations by hour" line chart (an SVG with preserveAspectRatio="none" over two shaded bands) beside "Live now" * bars, and a "Needs your attention" list. The generic layer stacks it all: the tabs wrapped onto two rows of 48px * tabs with a 32px gap, the chart plot took the generic 16:10 box (the line stretched 2.4 times its drawn aspect) and * the chart and live bars stayed stacked on tablets. * * Here: * - the numbered lines get room between their rules; * - the tab bar keeps one row and scrolls sideways inside the console (it is a picture of UI); "Sample data" leaves * the scrolling row and sits above it at the console's inline end, so it is always in view (from an 860px console, * where everything fits one row, it is back at the row's end); * - KPI tiles in two columns on phones and three from a 600px screen (3 + 2; the generic layer), five from an 880px * console (one row, as on the slide); * - the chart plot keeps its SVG's drawn aspect (viewBox 500 x 135) with a 120px floor so the line reads on a phone; * - from a 600px console the chart and the live bars sit side by side (1.6 : 1, as on the slide); * - the attention rows wrap their status under the item. * The console is an inline-size container (mk-console) for these steps. Parts are found by structure (the same in every * deck and language): the console is [data-keep-ltr="console"], its first child the tab bar whose last text unit is * "Sample data", the chart and live bars share the 1.6fr grid, the plot is the positioned box holding the SVG. No hooks. * * Specificity: the generic layer's selectors are long attribute chains (up to 0,8,0), so every rule here carries * :not(#mk-layout), an id no element has, which lifts it to id-level specificity. * Colours: none changed (white console on the anchor slide, as delivered). Directions: the console stays left to right * (the decks' global QA rules); the numbered lines follow the slide's direction; logical properties only. Stage mode * never sees this file (reflow query only). */ @media screen { @media screen { /* Headings: the h2 and the h3 titles are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example ES 'con-/versación', RU 'диало-/гов', and single words were left on last lines, for example AR 'عملاؤك', EN 'have'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *) { hyphens: manual !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page :is(h2, h3) { text-wrap: balance; } /* Chinese h2 with a long modifier before '每一次对话' (no punctuation to break at): insurance '一览您投保人的每一次对话' (12 characters) and product '在一个视图中看清您的客户的每一次对话' (18). Balanced into two even lines, they began the second line with the particle '的': '一览您投保人 / 的每一次对话' (insurance, 360 and 390px; MK-10 round 2) and '在一个视图中看清您 / 的客户的每一次对话' (product, 360, 390 and 768px, the same class). Here they wrap greedily, with an empty 1px-high float at the inline end of the first line that leaves that line --mk-zh-l1 wide, so it breaks after '的' ('一览您投保人的 / 每一次对话', as the other industry decks' 11-character headings balance: '一览您买家的 / 每一次对话') and after the verb ('在一个视图中看清 / 您的客户的每一次对话'); the lines below the float are full width. The float is a step: that width below a line of --mk-zh-all + 8px, 0 from there, where the heading fits one line (insurance from about 405px, product from about 795px). The 0.2em and 8px are room for glyph advances rounded to whole pixels. The product second line (10 characters) fits every reflow width (292px of 328px at 360px). The other industry decks keep the balanced lines. Wrapping only, the text unchanged. */ section.ds[data-layout="platform"]:is(:root:is([data-deck="product"], [data-deck="insurance"]) *):not(#mk-layout) .slide-page h2:lang(zh) { --mk-zh-l1: 8.2em; --mk-zh-all: 18em; text-wrap: wrap !important; } section.ds[data-layout="platform"]:is(:root[data-deck="insurance"] *):not(#mk-layout) .slide-page h2:lang(zh) { --mk-zh-l1: 7.2em; --mk-zh-all: 12em; } section.ds[data-layout="platform"]:is(:root:is([data-deck="product"], [data-deck="insurance"]) *):not(#mk-layout) .slide-page h2:lang(zh)::before { content: ""; float: inline-end; block-size: 1px; inline-size: max(0px, min(100% - var(--mk-zh-l1), (var(--mk-zh-all) + 8px - 100%) * 100000)); } /* Numbered lines: room between their rules. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [style*="grid-template-columns: 24px minmax(0px, 1fr)"] { padding-block: 12px !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [style*="grid-template-columns: 24px minmax(0px, 1fr)"]:first-child { padding-block-start: 0 !important; } /* The console: an inline-size container for the steps below, and the containing block of "Sample data". */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] { container: mk-console / inline-size; position: relative !important; } /* Tab bar: one row that scrolls sideways; its top strip holds "Sample data". */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child { flex-wrap: nowrap !important; gap: 24px !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-start: 36px !important; padding-inline: 16px !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid] { flex: none !important; height: 44px !important; white-space: nowrap !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { position: absolute !important; inset-block-start: 12px; inset-inline-end: 16px; height: auto !important; margin: 0 !important; } /* Product Arabic and Urdu: the deck's QA sets "Sample data" right to left inside the left-to-right console, and the inline end of a right-to-left box is its left side, so the label sat at the console's left edge above the first tab (and, from an 860px console, straight after the last tab). It takes its inline start instead: the console's right edge, as in the other languages and the industry decks. */ section.ds[data-layout="platform"]:is(:root[data-deck="product"]:is([lang="ar"], [lang="ur"]) *):not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { inset-inline-start: 16px; inset-inline-end: auto; } /* The dashboard body: a little less padding on phones. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:nth-child(2) { padding: 16px !important; } /* Chart plot: the SVG's drawn aspect, with a floor. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="position: relative"]:has(> svg) { flex: none !important; aspect-ratio: 500 / 135; min-height: 120px !important; } /* Attention rows: the status wraps under its item. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="justify-content: space-between"]:has(> [data-tid] + [data-tid]) { row-gap: 2px !important; } /* Live bars: the bar keeps a track of 48px or more. The rows give the channel name a fixed column (96px; 170px in the translated product decks), which left the bar no room once the live panel sits beside the chart (0px in product ZH, ES, FR and RU at a 700-768px screen). The name column now gives way down to its longest word; it is the same width in every row of the panel, so the bars stay aligned. */ section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: minmax(0px, 1.6fr)"] > :last-child [style*="grid-template-columns: 96px 32px minmax(0px, 1fr)"] { grid-template-columns: minmax(min-content, 96px) 32px minmax(48px, 1fr) !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: minmax(0px, 1.6fr)"] > :last-child [style*="grid-template-columns: 170px 32px minmax(0px, 1fr)"] { grid-template-columns: minmax(min-content, 170px) 32px minmax(48px, 1fr) !important; } @container mk-console (width >= 560px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:nth-child(2) { padding: 16px 24px !important; } } /* From a 600px console: chart and live bars side by side. */ @container mk-console (width >= 600px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: minmax(0px, 1.6fr)"] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; } } /* From an 860px console the tabs and "Sample data" fit one row (Russian, the longest, needs about 780px): it returns to the tab bar's inline end, as on the slide. */ @container mk-console (width >= 860px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child { padding-block-start: 0 !important; } section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { position: static !important; margin-inline-start: auto !important; } section.ds[data-layout="platform"]:is(:root[data-deck="product"]:is([lang="ar"], [lang="ur"]) *):not(#mk-layout) .slide-page [data-keep-ltr="console"] > div:first-child > [data-tid]:last-child { margin-inline-start: 0 !important; margin-inline-end: auto !important; } } /* From an 880px console: the five KPI tiles in one row, as on the slide. */ @container mk-console (width >= 880px) { section.ds[data-layout="platform"]:not(#mk-layout) .slide-page [data-keep-ltr="console"] [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } } } /* marketing/reflow/layouts/pricing.css */ /* * Reflow layout module pricing (MK-6b; ARCHITECTURE.md 5.1): product slide 21 and industry slide 21, "How it's priced" * ("One monthly figure per channel. Everything included."; the industry decks add an intro paragraph under the * heading; otherwise one skeleton in every deck and language). * * The slide: three channel cards on the surface tone in a row (an icon in the accent, the channel as a 30px title, its * unit in muted text, an "Everything included" chip pushed to the card's foot; 280px tall), then three notes in a row * (a bold lead-in and its sentence). The generic layer stacks the cards at their canvas height (280px each, mostly * empty on a phone) and puts both rows in two columns from 600px (the third card and note alone on a line). This * module sets the ARCHITECTURE target: * - phones: the three cards stacked and compact: the icon at the inline start, the title, unit and chip beside it * (a card about a third of its canvas height); the three notes stacked, 20px apart; * - three compact columns once the cards' words fit a third of the row: from a 560px screen, where a card keeps * 136px for its text and the longest words need 126px (RU title 'Сообщения') and 121px (ES unit 'Conversaciones'); * the chip at each card's foot, so the three chips line up; * - the notes in three columns from 900px (at 768 a third of the row is 213px, under 26 characters a line), stacked * below that. * Headings are not hyphenated and are balanced; wrapping only, the text unchanged. Parts are found by structure (the * two three-column grids: the one whose items hold an icon is the cards). No hooks. * * Specificity: every rule carries :not(#mk-layout), an id no element has, which lifts it above the generic layer's * attribute chains; declarations that override the slide's inline styles carry !important. Colours: none changed. * Directions: logical properties only; cards and notes follow the slide's direction (Arabic and Urdu mirror). Stage * mode never sees this file (reflow query only). */ @media screen { @media screen { /* The cards' grid. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) { margin-block-start: 32px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } /* A card on phones: the icon at the inline start, title, unit and chip beside it. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * { min-height: 0 !important; padding: 20px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start !important; justify-items: start; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > svg { grid-row: 1 / span 3; width: 28px; height: 28px; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > :not(svg) { grid-column: 2; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > h3 { margin: 0 !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > p { margin: 2px 0 0 !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > span { margin-block-start: 12px !important; } /* The notes' grid. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > svg)) { margin-block-start: 32px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } /* Headings: not hyphenated (the generic es/fr/ru hyphenation), balanced. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page :is(h2, h3) { hyphens: manual !important; text-wrap: balance; } /* Chinese heading: lines break between words. Balanced, the product heading split the word '费用' ('每个渠道一笔月度费 / 用。…' at 360-768px); at most eleven characters a line, wrapped greedily, it breaks after the first sentence. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page h2:lang(zh) { max-inline-size: 11.2em !important; text-wrap: wrap !important; } /* Body text: no word alone on a last line where a better break exists. */ section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page p { text-wrap-style: pretty; } @media (min-width: 600px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"] { margin-block-start: 40px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > svg)) { gap: 24px !important; } } /* Three compact columns: the card as on the slide (icon, title, unit, chip at the foot). */ @media (min-width: 560px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * { padding: 16px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > h3 { margin-block-start: 16px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > p { margin-block-end: 16px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * > span { margin-block-start: auto !important; } } @media (min-width: 768px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) { gap: 20px !important; } section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:has(> * > svg) > * { padding: 24px !important; } } @media (min-width: 900px) { section.ds[data-layout="pricing"]:not(#mk-layout) .slide-page [data-main] > [style*="grid-template-columns: repeat(3,"]:not(:has(> * > svg)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; } } } } /* marketing/reflow/layouts/steps-panels.css */ /* * Reflow layout module steps-panels (MK-6a; ARCHITECTURE.md 5.1): product slide 10 and industry slide 7, "Every * conversation has a method." (the Steps component). * * Three steps, each a number with an accent rule, a title, a text and a sample panel: a fixed-size figure canvas * ([data-fig], 460x256 on the product deck, 520x256 for its French second panel; 500x256, 520x256 or 520x288 on the * industry decks) whose parts are placed absolutely: (1) the customer message with a language tag and an intent tag * hanging from it, (2) the record card, the policy box and three actions on connector rules, (3) the record with its * timeline rows and a "Record updated" tag. The generic layer stacks the steps and fits every canvas into the column * (figures.css), which left 10.0-11.3px labels at 360px (and Russian and French panels wider than their canvas). * * Phones (steps column under 600px): each step reads number and title on one line (the rule hidden, as in the generic * layer), the text at full width, then its panel. A panel is fit-scaled only where its smallest label (16 canvas px) * stays at 11.2px or more: the steps column must be at least 0.7 times the slide's widest panel, 322px for the 460px * product panels (11.4px at 360, 12.5px at 390) and 369px where a panel is 520px wide (French product, every industry * deck), where Russian product text runs 67 canvas px past its 460px panel, or where Spanish text runs out of its boxes * on the delivered slide (the record card's status line, the policy box). Below that, every panel of the slide is * re-laid (the same treatment for the three panels of a slide): the canvas leaves the fit-scale (zoom 1) and its parts * come into flow in their delivered order: the message or record card at full width, the tags as chips under it, the * policy box, then the actions as a list set in by 16px (on the slide they branch from the policy), the connector * rules hidden. Re-laid text takes the reflow type scale (labels 13px and up, x1.12 in Arabic script). * Product Spanish, French and Russian are re-laid at every width (on tablets too, as a column of at most 460px centred * in its panel): their second panel's text runs out of its boxes on the delivered slide, so a fitted canvas shows the * same faults at any size. * Tablets (steps column 600-699px): steps stacked, each panel under its text at full size (zoom 1 up to the canvas * width). From a 700px steps column (768px screens and wider): each panel beside its text, in a column of 59% that keeps * its smallest label at 12px or more (401 / 527 x 16 = 12.2px at 768). * * Parts are found by structure, the same in every deck and language: the steps grid is the element whose grandchildren * hold the panels, a step is a child of it, the panel is the figure's parent; inside a canvas, connectors are * aria-hidden, tags hold the aria-hidden dot, the policy box is the bordered one (border-control), the remaining text * units are the actions. No hooks. The canvases stay as delivered for assistive technology (no role or label change). * * Specificity: the industry decks' QA geometry for these canvases (heights, transforms, widths with !important on * class-level selectors) applies in both modes, and the generic layer's selectors are long attribute chains, so every * rule here carries :not(#mk-layout), an id no element has, which lifts it to id-level specificity. Colours: none changed. Directions: logical properties only; the steps follow * the slide's direction (Arabic and Urdu mirror); kept-LTR messages keep their direction (the decks' global QA rules). * Stage mode never sees this file (reflow query only). */ @media screen { @media screen { /* Headings: the h2 and the step titles (h3 on the product deck, the title beside the number on the industry decks) are not hyphenated, and balanced so no word sits alone on a last line (checker, MK-6a round 2: the generic es/fr/ru hyphenation split heading words at 360-1023px, for example RU 'рабо-/ту' in an industry step title, and single words were left on last lines, for example EN 'method.', UR 'ہے۔', ES 'decir.'). Every word fits its line whole. Wrapping only, the text unchanged. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :is(h2, h3, h2 *, h3 *), section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child :is([data-fs="30"], [data-fs="30"] *) { hyphens: manual !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :is(h2, h3), section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child [data-fs="30"] { text-wrap: balance; } /* Product Chinese h2 '每一次对话，都有一套方法。': lines break only after its full-width comma (MK-10 round 2: balanced, and free to break between any two characters, it read '每一次对话，都 / 有一套方法。' at 360 and 390px, 7 + 6 characters with the adverb '都' left at the end of the first line). Each clause is one unbreakable run (word-break: keep-all), so the heading keeps one line where it fits and otherwise reads '每一次对话， / 都有一套方法。'; overflow-wrap: normal, as the generic layer's break-word lets the balancing break inside a run. On the h2 and its span: the generic Chinese rule sets both on every element, so inheritance alone does not reach the span. The longer clause (7em) fits every reflow width (204px of the 328px line at 360px). Not the industry h2 '每次对话都有章法。' (no comma; one line at every reflow width). Wrapping only, the text unchanged. */ section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"] *):not(#mk-layout) .slide-page :is(h2, h2 *):lang(zh) { word-break: keep-all !important; overflow-wrap: normal !important; } /* Industry step header (number and title on one flex line): no end padding at any reflow width. On the slide its 24px masks the accent rule running behind the header; reflow hides that rule (the generic layer hides positioned decorative spans), so the padding only took 24px from the title's line. Beside the panel (a 700px steps column, a 768px screen) it left a seven-character Chinese title 174.8px of the 175px it needs, so it wrapped by a fraction of a pixel into '听懂真实 / 意图。' and '核对您的 / 规则。' in all five Chinese decks (MK-10 round 2); with the padding gone the title has 198.8px there. Phones already set it to 0 (below). The product deck's number row is not affected (its title is an h3 on its own row). */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child > span:not([aria-hidden]):has(> [data-fs="30"]) { padding-inline-end: 0 !important; } /* The steps grid: one column at every reflow width (the generic layer makes card grids two columns from 1024px, which would halve each step), and a named inline-size container, so the step layout and the panel treatment follow its width. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > div > [data-fig]) { container: mk-steps / inline-size; grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; } /* (Placements carry !important: the generic layer resets grid-area on the children of these subgrid columns.) */ /* Phones: number and title on one line. Product: the number's row beside the title; industry: the header already holds both (the number's 60px box shrinks to its figure). The text at full width. */ @container mk-steps (width < 600px) { section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]):has(> h3) { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 14px !important; align-items: baseline; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]):has(> h3) > h3 { grid-column: 2 !important; margin-block-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]):has(> h3) > :nth-child(n+3) { grid-column: 1 / -1 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child [data-fs="48"][style*="width:"] { width: auto !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :first-child > span:not([aria-hidden]) { column-gap: 14px !important; padding-inline: 0 !important; /* the padding masked the hidden rule */ margin-inline-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > p { margin-inline-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :has(> [data-fig]) { margin-block-start: 20px !important; } } /* Phones: panels re-laid where fitting would take a label under 11.2px. Every slide below a 322px steps column ... */ @container mk-steps (width < 322px) { /* The panel frames the re-laid canvas. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> [data-fig]) { display: block !important; padding: 16px !important; } /* The canvas: out of the fit-scale, a column of its parts in flow. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100%; margin: 0 !important; transform: none !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [aria-hidden="true"] { display: none !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > div:not([data-tid]):not([style*="padding-block"]) { padding-block: 14px !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [style*="white-space: nowrap"] { white-space: normal !important; } /* Tags: chips under what they describe. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:has(> [aria-hidden="true"]) { align-self: flex-start; min-height: 32px; padding-block: 6px !important; line-height: var(--lh-subheading) !important; } /* Policy box and actions: rows that grow with their text; the actions set in under the policy. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])) { min-height: 36px; padding-block: 7px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid][style*="border-control"] { align-self: flex-start; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) { margin-inline-start: 16px !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) + [data-tid] { margin-block-start: -4px !important; } /* Text on the reflow type scale (the canvas sizes are for the 1920px slide; the type scale skips figures). */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] :is([data-fs="20"], [data-fs="21"]) { font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [data-fs="18"] { font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; } } /* ... and below 369px where a panel is 520px wide, or Russian or Spanish text runs past its boxes. */ @container mk-steps (322px <= width < 369px) { /* The panel frames the re-laid canvas. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page :has(> [data-fig]) { display: block !important; padding: 16px !important; } /* The canvas: out of the fit-scale, a column of its parts in flow. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; height: auto !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100%; margin: 0 !important; transform: none !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [aria-hidden="true"] { display: none !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > div:not([data-tid]):not([style*="padding-block"]) { padding-block: 14px !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] [style*="white-space: nowrap"] { white-space: normal !important; } /* Tags: chips under what they describe. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:has(> [aria-hidden="true"]) { align-self: flex-start; min-height: 32px; padding-block: 6px !important; line-height: var(--lh-subheading) !important; } /* Policy box and actions: rows that grow with their text; the actions set in under the policy. */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])) { min-height: 36px; padding-block: 7px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid][style*="border-control"] { align-self: flex-start; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) { margin-inline-start: 16px !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) + [data-tid] { margin-block-start: -4px !important; } /* Text on the reflow type scale (the canvas sizes are for the 1920px slide; the type scale skips figures). */ section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] :is([data-fs="20"], [data-fs="21"]) { font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="18"] { font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="steps-panels"]:is(:has([data-fig^="520x"]), :root:is([lang="ru"], [lang="es"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; } } /* Product Spanish, French and Russian: re-laid at every width. Their second panel does not hold its text on the delivered slide (RU: the policy line runs 68 canvas px past its box under the actions, the first action's white text 38px past its dark box onto the light panel; ES: the status line drops below the record card into the connector, the policy line meets its border; FR: the policy line runs 16px past its box), so fit-scaling it at any size shows the same faults. The same re-lay as above (all three panels of the slide), as a column no wider than the product canvas (460px), centred in its panel as the fitted canvases are. */ @container mk-steps (width >= 369px) { section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page :has(> [data-fig]) { display: block !important; padding: 16px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] { zoom: 1 !important; width: auto !important; max-inline-size: 460px; height: auto !important; margin-block: 0 !important; margin-inline: auto !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100%; margin: 0 !important; transform: none !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [aria-hidden="true"] { display: none !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > div:not([data-tid]):not([style*="padding-block"]) { padding-block: 14px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] [style*="white-space: nowrap"] { white-space: normal !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:has(> [aria-hidden="true"]) { align-self: flex-start; min-height: 32px; padding-block: 6px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])) { min-height: 36px; padding-block: 7px !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid][style*="border-control"] { align-self: flex-start; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) { margin-inline-start: 16px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] > [data-tid]:not(:has(> [aria-hidden="true"])):not([style*="border-control"]) + [data-tid] { margin-block-start: -4px !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] :is([data-fs="20"], [data-fs="21"]) { font-size: calc(var(--fs-20) * var(--rs)) !important; line-height: var(--lh-subheading) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="18"] { font-size: calc(var(--fs-18) * var(--rs)) !important; } section.ds[data-layout="steps-panels"]:is(:root[data-deck="product"]:is([lang="ru"], [lang="es"], [lang="fr"]) *):not(#mk-layout) .slide-page [data-fig] [data-fs="16"] { font-size: calc(var(--fs-16) * var(--rs)) !important; } } /* Product third panel, timeline dates: Chinese '9 月 12 日' (69px) is wider than its 64px column, on the delivered slide too, so its last character dropped onto a second line below the record card at every width. Dates keep one line, running into the 16px gap before their event if they need to (the event column stays aligned); the other languages' dates fit their columns (46-62px), so nothing else moves. */ section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page [data-fig] [data-tid][style*="width: 64px; flex: 0 0 auto"] { white-space: nowrap !important; } /* Tablets (steps column 600-699px): as delivered, the industry text keeps its indent under the title (the number's 60px box and 20px gap). */ /* From a 700px steps column: each panel beside its text. The panel spans the text rows and a last flexible row, which takes whatever height the panel has beyond the text, so the number, title and text stay together at the top (with the panel spanning only the text rows, a panel taller than its text stretched them: on the product deck the title floated up to 37px above its text at 768-1024px, more in the steps with the taller second and third panels). */ @container mk-steps (width >= 700px) { section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr) !important; grid-template-rows: auto auto auto minmax(0, 1fr) !important; column-gap: 24px !important; align-content: start; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :not(:last-child) { grid-column: 1 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > :last-child { grid-column: 2 !important; grid-row: 1 / span 4 !important; align-self: start; margin-block-start: 0 !important; } section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > [data-fig]) > p { margin-inline-start: 0 !important; } } @media (min-width: 600px) { section.ds[data-layout="steps-panels"]:not(#mk-layout) .slide-page :has(> div > div > [data-fig]) { row-gap: 56px !important; } } } } }