/* Kinema — responsive layers on top of the desktop design. · phones (and phones in landscape): the full mobile treatment · narrow tablets: only the multi-column blocks that cannot fit are stacked Selectors match React's serialised inline styles ("max-width: 960px", with the space). html[data-mobile-preview] renders the phone layout on a wide screen for review only. */ @media (max-width: 767px) { /* ---- global ---- */ section { padding-left: 16px !important; padding-right: 16px !important; } section[style*="max-width"], div[style*="max-width: 1160px"], div[style*="max-width: 1040px"], div[style*="max-width: 1000px"], div[style*="max-width: 960px"], div[style*="max-width: 820px"], div[style*="max-width: 760px"], div[style*="max-width: 740px"] { max-width: 100% !important; } h1 { font-size: 34px !important; line-height: 1.1 !important; } h2 { font-size: 24px !important; } span[style*="font-size: 92px"], span[style*="font-size: 88px"], span[style*="font-size: 76px"], span[style*="font-size: 62px"] { font-size: 44px !important; } [data-screen-label] [style*="display: grid"] { grid-template-columns: 1fr !important; } [data-m="hide"] { display: none !important; } [data-m="clip"] { display: block !important; } input, textarea, select { font-size: 16px !important; } /* ---- nav ---- */ [data-kn-nav] { height: auto !important; flex-wrap: wrap !important; row-gap: 8px !important; column-gap: 10px !important; padding: 10px 12px !important; } [data-kn-nav] [data-kn-links] { display: none !important; } [data-kn-nav] [data-kn-burger] { display: flex !important; } [data-kn-nav] [data-kn-cta-hide] { display: none !important; } /* ---- homepage hero ---- */ [data-screen-label="Hero"] { height: auto !important; min-height: 430px !important; } [data-screen-label="Hero"] > video { width: 66% !important; opacity: 0.38 !important; } [data-screen-label="Hero"] h1 { max-width: 100% !important; } [data-screen-label="Hero"] a { width: 100% !important; text-align: center !important; } /* ---- how it works ---- */ [data-screen-label="How it works"] span[style*="left: -8px"], [data-screen-label="How it works"] span[style*="right: -8px"] { display: none !important; } [data-screen-label="How it works"] div[style*="padding: 0px 30px"] { padding: 0 !important; } [data-screen-label="How it works"] div[style*="min-height: clamp"] { min-height: 400px !important; } [data-screen-label="How it works"] div[style*="height: 116px"] { height: 84px !important; } [data-screen-label="How it works"] div[style*="gap: 18px"] { display: block !important; } /* ---- use cases: the detail panel and the spacer belong to desktop ---- */ [data-screen-label="Use cases"] div[style*="width: 350px"] { display: none !important; } [data-screen-label="Use cases"] div[style*="gap: 56px"] { display: block !important; } [data-uc-spacer] { height: 0 !important; } /* ---- article teasers: swipe rail, no perex ---- */ [data-screen-label="Article teasers"] > div { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 12px !important; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="Article teasers"] > div > a { flex: 0 0 74% !important; scroll-snap-align: start !important; } [data-screen-label="Article teasers"] > div > a > p { display: none !important; } /* ---- benefits: titles only, tap to expand (kn-mobile.js) ---- */ [data-kn-fold] > p, [data-kn-fold] > div[data-kn-wip] { display: none !important; } [data-kn-fold][data-open="1"] > p { display: block !important; } [data-kn-fold] > h3 { margin-bottom: 0 !important; } /* ---- closing CTA ---- */ #kn-cta { padding: 26px 20px !important; } #kn-cta > video { width: 100% !important; opacity: 0.3 !important; } #kn-cta-btn { width: 100% !important; } /* ---- landing pages: hero pair stacks, act clip goes first ---- */ div[style*="justify-content: center"][style*="gap: 44px"] { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; } div[style*="width: 330px"] { width: 100% !important; } figure[style*="width: 182px"] { width: 62% !important; max-width: 220px !important; } [data-screen-label^="Act"] figure { order: -1 !important; width: 100% !important; max-width: 290px !important; margin: 0 0 6px !important; } [data-screen-label^="Act"] div[style*="align-self: center"] { align-self: flex-start !important; } figure[style*="width: 320px"], figure[style*="width: 300px"], figure[style*="width: 260px"], figure[style*="width: 208px"], figure[style*="width: 204px"] { width: 100% !important; max-width: 290px !important; } /* ---- read also: same swipe rail as the homepage teasers ---- */ [data-screen-label="Read also"] > div { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 12px !important; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="Read also"] > div > a { flex: 0 0 76% !important; scroll-snap-align: start !important; } /* ---- signup / account: the fixed left film panel is desktop-only ---- */ div[style*="position: fixed"][style*="width: 40%"] { display: none !important; } div[style*="margin-left: 40%"] { width: 100% !important; margin-left: 0 !important; padding: 28px 18px calc(28px + env(safe-area-inset-bottom)) !important; } /* ---- wide tables never force a page-level sideways scroll ---- */ table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } /* ---- footer ---- */ footer [style*="display: grid"] { grid-template-columns: 1fr !important; } /* ---- narrow-width hardening ---- */ html, body { overflow-x: hidden !important; } [data-kn-nav] > div[style*="border-radius: 999px"] { overflow-x: auto !important; max-width: 100% !important; scrollbar-width: none; } [data-kn-nav] img { height: 20px !important; } /* the how-it-works demo keeps its own scroll instead of stretching the page */ [data-screen-label="How it works"] div[style*="min-height: clamp"] { min-height: 64vh !important; overflow-x: auto !important; } /* nothing may push the page sideways */ [data-screen-label] img, [data-screen-label] video, [data-screen-label] kn-clip { max-width: 100% !important; } h1 [style*="white-space: nowrap"] { white-space: normal !important; } /* ---- role pills: label only, no hint ---- */ [data-kn-nav] span > span:nth-child(2), div[style*="border-radius: 999px"] span > span:nth-child(2) { display: none !important; } [data-kn-nav] div[style*="border-radius: 999px"] { display: none !important; } [data-kn-nav] img { order: 0 !important; } [data-kn-nav] [data-kn-burger] { order: 1 !important; margin-left: auto !important; } /* ---- use cases: a horizontal 9:16 rail, one card per swipe, the next one peeking ---- */ [data-uc-stage] { box-sizing: border-box !important; display: block !important; padding: 0 0 0 16px !important; overflow: visible !important; } [data-uc-head] { padding: 0 16px 12px 0 !important; } [data-uc-head] p { font-size: 11px !important; margin: 0 0 5px !important; } [data-uc-head] h2 { font-size: 23px !important; line-height: 1.2 !important; } [data-screen-label="Use cases"] div[style*="position: sticky"] { position: static !important; } [data-uc-list] { display: flex !important; flex-direction: row !important; gap: 10px !important; margin: 0 !important; padding: 0 16px 2px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } [data-uc-list]::-webkit-scrollbar { display: none; } [data-uc-list] > [data-uc-row] { display: block !important; flex: 0 0 auto !important; aspect-ratio: 9 / 16 !important; width: auto !important; max-width: none !important; height: min(calc(100dvh - 205px), calc((100vw - 84px) * 16 / 9)) !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; background: none !important; box-shadow: none !important; } [data-uc-row] [data-m="clip"] { margin: 0 !important; width: 100% !important; height: 100% !important; } [data-uc-row] [data-m="clip"] video { height: 100% !important; aspect-ratio: auto !important; } [data-uc-overlay] { height: auto !important; } /* the title lives in the overlay; the row's own text stays hidden */ [data-uc-row] h3, [data-uc-row] > div:not([data-m="clip"]) { display: none !important; } /* benefit cards: mark bottom-right, chevron shows they open */ [data-kn-fold] { position: relative !important; } [data-kn-fold]::after { content: ''; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,0.45); border-bottom: 2px solid rgba(255,255,255,0.45); transform: rotate(45deg); transition: transform .3s; pointer-events: none; } [data-kn-fold][data-open="1"]::after { transform: rotate(-135deg); } [data-kn-fold] h3 { padding-right: 34px !important; } [data-kn-fold][data-open="0"] img[data-kn-bicon] { display: none !important; } /* How it works: desktop-only walkthrough */ [data-screen-label="How it works"] { display: none !important; } /* closing CTA: lift only, no sideways scale */ #kn-cta:hover #kn-cta-btn, #kn-cta:active #kn-cta-btn { transform: translateY(-2px) !important; } #kn-cta #kn-cta-btn { width: 100% !important; } /* ---- teasers / case studies: one swipe row, no perex ---- */ [data-screen-label="Article teasers"], [data-screen-label="Read also"], [data-screen-label="Article teasers"] div[style*="display: grid"], [data-screen-label="Read also"] div[style*="display: grid"] { display: flex !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="Article teasers"], [data-screen-label="Read also"] { padding-top: 8px !important; padding-bottom: 20px !important; } [data-screen-label="Article teasers"] a, [data-screen-label="Read also"] a { flex: 0 0 76% !important; scroll-snap-align: start !important; } [data-screen-label="Article teasers"] a p, [data-screen-label="Read also"] a p { display: none !important; } /* ---- company: crew cards swipe, 1⅓ in view ---- */ [data-screen-label="IRL crew"] div[style*="display: grid"], [data-screen-label="Agentic crew"] div[style*="display: grid"], [data-screen-label="IRL crew"][style*="display: grid"], [data-screen-label="Agentic crew"][style*="display: grid"] { display: flex !important; overflow-x: auto !important; gap: 14px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="IRL crew"] div[style*="display: grid"] > *, [data-screen-label="Agentic crew"] div[style*="display: grid"] > *, [data-screen-label="IRL crew"][style*="display: grid"] > *, [data-screen-label="Agentic crew"][style*="display: grid"] > * { flex: 0 0 72% !important; max-width: 72% !important; scroll-snap-align: start !important; } /* ---- pricing: plans must read as separate cards ---- */ [data-screen-label="Plans"], [data-screen-label="Plans"] div[style*="display: grid"] { gap: 18px !important; } [data-screen-label="Plans"] > *, [data-screen-label="Plans"] div[style*="display: grid"] > * { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.14), 0 18px 40px -22px rgba(0,0,0,0.8) !important; border-radius: 14px !important; } [data-screen-label="Credit packs"] div[style*="display: grid"] { gap: 14px !important; } } @media (min-width: 768px) and (max-width: 1023px) { /* three-column acts and the hero pair need more room than a narrow tablet has */ [data-screen-label] [style*="display: grid"] { grid-template-columns: 1fr !important; } [data-screen-label^="Act"] figure { order: -1 !important; width: 100% !important; max-width: 280px !important; margin: 0 0 6px !important; } [data-screen-label^="Act"] div[style*="align-self: center"] { align-self: flex-start !important; } div[style*="justify-content: center"][style*="gap: 44px"] { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; } div[style*="width: 330px"] { width: 100% !important; } section[style*="max-width: 1040px"], section[style*="max-width: 1160px"] { max-width: 100% !important; } } html[data-mobile-preview] { /* ---- global ---- */ section { padding-left: 16px !important; padding-right: 16px !important; } section[style*="max-width"], div[style*="max-width: 1160px"], div[style*="max-width: 1040px"], div[style*="max-width: 1000px"], div[style*="max-width: 960px"], div[style*="max-width: 820px"], div[style*="max-width: 760px"], div[style*="max-width: 740px"] { max-width: 100% !important; } h1 { font-size: 34px !important; line-height: 1.1 !important; } h2 { font-size: 24px !important; } span[style*="font-size: 92px"], span[style*="font-size: 88px"], span[style*="font-size: 76px"], span[style*="font-size: 62px"] { font-size: 44px !important; } [data-screen-label] [style*="display: grid"] { grid-template-columns: 1fr !important; } [data-m="hide"] { display: none !important; } [data-m="clip"] { display: block !important; } input, textarea, select { font-size: 16px !important; } /* ---- nav ---- */ [data-kn-nav] { height: auto !important; flex-wrap: wrap !important; row-gap: 8px !important; column-gap: 10px !important; padding: 10px 12px !important; } [data-kn-nav] [data-kn-links] { display: none !important; } [data-kn-nav] [data-kn-burger] { display: flex !important; } [data-kn-nav] [data-kn-cta-hide] { display: none !important; } /* ---- homepage hero ---- */ [data-screen-label="Hero"] { height: auto !important; min-height: 430px !important; } [data-screen-label="Hero"] > video { width: 66% !important; opacity: 0.38 !important; } [data-screen-label="Hero"] h1 { max-width: 100% !important; } [data-screen-label="Hero"] a { width: 100% !important; text-align: center !important; } /* ---- how it works ---- */ [data-screen-label="How it works"] span[style*="left: -8px"], [data-screen-label="How it works"] span[style*="right: -8px"] { display: none !important; } [data-screen-label="How it works"] div[style*="padding: 0px 30px"] { padding: 0 !important; } [data-screen-label="How it works"] div[style*="min-height: clamp"] { min-height: 400px !important; } [data-screen-label="How it works"] div[style*="height: 116px"] { height: 84px !important; } [data-screen-label="How it works"] div[style*="gap: 18px"] { display: block !important; } /* ---- use cases: the detail panel and the spacer belong to desktop ---- */ [data-screen-label="Use cases"] div[style*="width: 350px"] { display: none !important; } [data-screen-label="Use cases"] div[style*="gap: 56px"] { display: block !important; } [data-uc-spacer] { height: 0 !important; } /* ---- article teasers: swipe rail, no perex ---- */ [data-screen-label="Article teasers"] > div { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 12px !important; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="Article teasers"] > div > a { flex: 0 0 74% !important; scroll-snap-align: start !important; } [data-screen-label="Article teasers"] > div > a > p { display: none !important; } /* ---- benefits: titles only, tap to expand (kn-mobile.js) ---- */ [data-kn-fold] > p, [data-kn-fold] > div[data-kn-wip] { display: none !important; } [data-kn-fold][data-open="1"] > p { display: block !important; } [data-kn-fold] > h3 { margin-bottom: 0 !important; } /* ---- closing CTA ---- */ #kn-cta { padding: 26px 20px !important; } #kn-cta > video { width: 100% !important; opacity: 0.3 !important; } #kn-cta-btn { width: 100% !important; } /* ---- landing pages: hero pair stacks, act clip goes first ---- */ div[style*="justify-content: center"][style*="gap: 44px"] { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; } div[style*="width: 330px"] { width: 100% !important; } figure[style*="width: 182px"] { width: 62% !important; max-width: 220px !important; } [data-screen-label^="Act"] figure { order: -1 !important; width: 100% !important; max-width: 290px !important; margin: 0 0 6px !important; } [data-screen-label^="Act"] div[style*="align-self: center"] { align-self: flex-start !important; } figure[style*="width: 320px"], figure[style*="width: 300px"], figure[style*="width: 260px"], figure[style*="width: 208px"], figure[style*="width: 204px"] { width: 100% !important; max-width: 290px !important; } /* ---- read also: same swipe rail as the homepage teasers ---- */ [data-screen-label="Read also"] > div { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 12px !important; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="Read also"] > div > a { flex: 0 0 76% !important; scroll-snap-align: start !important; } /* ---- signup / account: the fixed left film panel is desktop-only ---- */ div[style*="position: fixed"][style*="width: 40%"] { display: none !important; } div[style*="margin-left: 40%"] { width: 100% !important; margin-left: 0 !important; padding: 28px 18px calc(28px + env(safe-area-inset-bottom)) !important; } /* ---- wide tables never force a page-level sideways scroll ---- */ table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } /* ---- footer ---- */ footer [style*="display: grid"] { grid-template-columns: 1fr !important; } /* ---- narrow-width hardening ---- */ html, body { overflow-x: hidden !important; } [data-kn-nav] > div[style*="border-radius: 999px"] { overflow-x: auto !important; max-width: 100% !important; scrollbar-width: none; } [data-kn-nav] img { height: 20px !important; } /* the how-it-works demo keeps its own scroll instead of stretching the page */ [data-screen-label="How it works"] div[style*="min-height: clamp"] { min-height: 64vh !important; overflow-x: auto !important; } /* nothing may push the page sideways */ [data-screen-label] img, [data-screen-label] video, [data-screen-label] kn-clip { max-width: 100% !important; } h1 [style*="white-space: nowrap"] { white-space: normal !important; } /* ---- role pills: label only, no hint ---- */ [data-kn-nav] span > span:nth-child(2), div[style*="border-radius: 999px"] span > span:nth-child(2) { display: none !important; } [data-kn-nav] div[style*="border-radius: 999px"] { display: none !important; } [data-kn-nav] img { order: 0 !important; } [data-kn-nav] [data-kn-burger] { order: 1 !important; margin-left: auto !important; } /* ---- use cases: a horizontal 9:16 rail, one card per swipe, the next one peeking ---- */ [data-uc-stage] { box-sizing: border-box !important; display: block !important; padding: 0 0 0 16px !important; overflow: visible !important; } [data-uc-head] { padding: 0 16px 12px 0 !important; } [data-uc-head] p { font-size: 11px !important; margin: 0 0 5px !important; } [data-uc-head] h2 { font-size: 23px !important; line-height: 1.2 !important; } [data-screen-label="Use cases"] div[style*="position: sticky"] { position: static !important; } [data-uc-list] { display: flex !important; flex-direction: row !important; gap: 10px !important; margin: 0 !important; padding: 0 16px 2px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } [data-uc-list]::-webkit-scrollbar { display: none; } [data-uc-list] > [data-uc-row] { display: block !important; flex: 0 0 auto !important; aspect-ratio: 9 / 16 !important; width: auto !important; max-width: none !important; height: min(calc(100dvh - 205px), calc((100vw - 84px) * 16 / 9)) !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; background: none !important; box-shadow: none !important; } [data-uc-row] [data-m="clip"] { margin: 0 !important; width: 100% !important; height: 100% !important; } [data-uc-row] [data-m="clip"] video { height: 100% !important; aspect-ratio: auto !important; } [data-uc-overlay] { height: auto !important; } /* the title lives in the overlay; the row's own text stays hidden */ [data-uc-row] h3, [data-uc-row] > div:not([data-m="clip"]) { display: none !important; } /* benefit cards: mark bottom-right, chevron shows they open */ [data-kn-fold] { position: relative !important; } [data-kn-fold]::after { content: ''; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,0.45); border-bottom: 2px solid rgba(255,255,255,0.45); transform: rotate(45deg); transition: transform .3s; pointer-events: none; } [data-kn-fold][data-open="1"]::after { transform: rotate(-135deg); } [data-kn-fold] h3 { padding-right: 34px !important; } [data-kn-fold][data-open="0"] img[data-kn-bicon] { display: none !important; } /* How it works: desktop-only walkthrough */ [data-screen-label="How it works"] { display: none !important; } /* closing CTA: lift only, no sideways scale */ #kn-cta:hover #kn-cta-btn, #kn-cta:active #kn-cta-btn { transform: translateY(-2px) !important; } #kn-cta #kn-cta-btn { width: 100% !important; } /* ---- teasers / case studies: one swipe row, no perex ---- */ [data-screen-label="Article teasers"], [data-screen-label="Read also"], [data-screen-label="Article teasers"] div[style*="display: grid"], [data-screen-label="Read also"] div[style*="display: grid"] { display: flex !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="Article teasers"], [data-screen-label="Read also"] { padding-top: 8px !important; padding-bottom: 20px !important; } [data-screen-label="Article teasers"] a, [data-screen-label="Read also"] a { flex: 0 0 76% !important; scroll-snap-align: start !important; } [data-screen-label="Article teasers"] a p, [data-screen-label="Read also"] a p { display: none !important; } /* ---- company: crew cards swipe, 1⅓ in view ---- */ [data-screen-label="IRL crew"] div[style*="display: grid"], [data-screen-label="Agentic crew"] div[style*="display: grid"], [data-screen-label="IRL crew"][style*="display: grid"], [data-screen-label="Agentic crew"][style*="display: grid"] { display: flex !important; overflow-x: auto !important; gap: 14px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; } [data-screen-label="IRL crew"] div[style*="display: grid"] > *, [data-screen-label="Agentic crew"] div[style*="display: grid"] > *, [data-screen-label="IRL crew"][style*="display: grid"] > *, [data-screen-label="Agentic crew"][style*="display: grid"] > * { flex: 0 0 72% !important; max-width: 72% !important; scroll-snap-align: start !important; } /* ---- pricing: plans must read as separate cards ---- */ [data-screen-label="Plans"], [data-screen-label="Plans"] div[style*="display: grid"] { gap: 18px !important; } [data-screen-label="Plans"] > *, [data-screen-label="Plans"] div[style*="display: grid"] > * { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.14), 0 18px 40px -22px rgba(0,0,0,0.8) !important; border-radius: 14px !important; } [data-screen-label="Credit packs"] div[style*="display: grid"] { gap: 14px !important; } } @media (max-width: 767px) { /* ---- v2: one 16px gutter for every block, CTA never overflows ---- */ #kn-hero-cta, [data-screen-label="Hero"] a { box-sizing: border-box !important; } div[style*="position: sticky"][style*="top: 16px"] { padding-left: 16px !important; padding-right: 16px !important; } [data-screen-label="Hero"] > div[style*="padding: 0px 24px 44px"] { padding-left: 16px !important; padding-right: 16px !important; } [data-uc-stage] { padding: 0 !important; } [data-uc-head] { padding: 0 0 12px !important; } [data-uc-list] { padding: 0 0 2px !important; } [data-screen-label="Article teasers"], [data-screen-label="Read also"] { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* "Why Kinema" belongs to the benefits below it, not to the rail above */ [data-screen-label="Use cases"] div[style*="padding: 14px 24px"] { padding: 34px 0 2px !important; } /* only the small-caps (L&D) suffix escapes the "label only" pill rule; hints stay hidden */ [data-kn-nav] span > span[style*="font-variant-caps"], div[style*="border-radius: 999px"] span > span[style*="font-variant-caps"] { display: inline !important; } [data-screen-label="Benefits"] { padding-top: 4px !important; } } html[data-mobile-preview] { /* ---- v2: one 16px gutter for every block, CTA never overflows ---- */ #kn-hero-cta, [data-screen-label="Hero"] a { box-sizing: border-box !important; } div[style*="position: sticky"][style*="top: 16px"] { padding-left: 16px !important; padding-right: 16px !important; } [data-screen-label="Hero"] > div[style*="padding: 0px 24px 44px"] { padding-left: 16px !important; padding-right: 16px !important; } [data-uc-stage] { padding: 0 !important; } [data-uc-head] { padding: 0 0 12px !important; } [data-uc-list] { padding: 0 0 2px !important; } [data-screen-label="Article teasers"], [data-screen-label="Read also"] { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* "Why Kinema" belongs to the benefits below it, not to the rail above */ [data-screen-label="Use cases"] div[style*="padding: 14px 24px"] { padding: 34px 0 2px !important; } /* only the small-caps (L&D) suffix escapes the "label only" pill rule; hints stay hidden */ [data-kn-nav] span > span[style*="font-variant-caps"], div[style*="border-radius: 999px"] span > span[style*="font-variant-caps"] { display: inline !important; } [data-screen-label="Benefits"] { padding-top: 4px !important; } }