/* ==== Buttons – one vocabulary for the whole site (all viewports) ====
   .kn-btn + role (primary | secondary | ghost) + size (sm | md | lg | xl) + optional .kn-pulse ("this is the next step").
   Primary: violet at rest, brand gradient sweeps in on hover; phones have no hover, so the gradient shows at rest. */
.kn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; border: 0; cursor: pointer;
  text-decoration: none; font-family: inherit; font-weight: 600; color: #fff; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  line-height: 1.2; border-radius: 8px; font-size: 14.5px; padding: 12px 22px;
  transition: background-position 1.4s cubic-bezier(0.45,0.05,0.55,0.95), transform .3s cubic-bezier(0.22,1,0.36,1), box-shadow .35s, background-color .15s, filter .15s; }
.kn-btn:hover { color: #fff; }
.kn-btn-sm { font-size: 13px; padding: 8px 16px; }
.kn-btn-lg { font-size: 15px; padding: 13px 26px; }
.kn-btn-xl { font-size: 16px; padding: 0 28px; height: 52px; border-radius: 10px; }
.kn-btn-primary { background-color: #7C3AED; background-image: linear-gradient(90deg, #7C3AED 0%, #7C3AED 55%, #0FA3BE 68%, #554BD3 82%, #F618A0 100%);
  background-size: 300% 100%; background-position: 0% 50%; box-shadow: 0 16px 38px -16px rgba(124,58,237,0.75); }
.kn-btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px) scale(1.02); box-shadow: 0 26px 54px -18px rgba(124,58,237,0.9), 0 10px 30px -14px rgba(246,24,160,0.5); }
.kn-btn-secondary { background-color: #7C3AED; box-shadow: 0 8px 20px -10px rgba(124,58,237,0.7); }
.kn-btn-secondary:hover { background-color: #6D28D9; transform: translateY(-1px); }
.kn-btn-ghost { background: rgba(255,255,255,0.08); box-shadow: none; }
.kn-btn-ghost:hover { background: rgba(255,255,255,0.14); }
.kn-pulse { animation: kn-btn-aura 2.2s ease-in-out infinite; }
@keyframes kn-btn-aura { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.55); } 50% { box-shadow: 0 0 22px 6px rgba(124,58,237,0.35); } }
@media (max-width: 767px), (hover: none) { .kn-btn-primary { background-position: 100% 50%; } }
html[data-mobile-preview] .kn-btn-primary { background-position: 100% 50%; }
@media (prefers-reduced-motion: reduce) { .kn-pulse { animation: none; } }

/* 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. */

/* ---- edge to edge: page colour under the status bar / notch (viewport-fit=cover) ---- */
html { background-color: #111827; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

@media (max-width: 1023px) {
  /* nav sticks just under the status bar; content scrolls behind it */
  div[style*="position: sticky"]:has(> div > [data-kn-nav]), div[style*="position: sticky"]:has(> [data-kn-nav]),
  [data-screen-label="Nav"][style*="sticky"] { top: calc(env(safe-area-inset-top, 0px) + 6px) !important; }
  [data-kn-nav] > a:first-child { flex: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablets: links go into the menu sheet, role pills and the CTA stay */
  [data-kn-nav] { gap: 12px !important; }
  [data-kn-nav] [data-kn-links] { display: none !important; }
  [data-kn-nav] [data-kn-burger] { display: flex !important; margin-left: 0 !important; }
  [data-kn-nav] [data-kn-wip="lang-switcher"] { display: none !important; }
  [data-kn-nav] span > span:nth-child(2) { display: none !important; }
}

@media (max-width: 767px) {
  /* ---- global ---- */
  /* company: hiring tile flows with the grid, not pinned to column 3 */
  #crew-grid > a[data-kn-hiring] { grid-column: auto !important; grid-row: auto !important; }
  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; }
  [data-screen-label="Hero"]:has(> video) { 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: 12px"],
  [data-screen-label="How it works"] span[style*="right: 12px"] { 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: clip !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(100svh - 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: vision hero sits in a card, not floating full-bleed ---- */
  [data-screen-label="Vision"] { padding: 16px 16px 24px !important; }
  [data-screen-label="Vision"] > a { align-self: center; }
  [data-screen-label="Vision"] > span { margin-top: 4px !important; }
  [data-screen-label="Vision"] h1 { font-size: 36px !important; }
  [data-screen-label="Vision"] p { font-size: 16px !important; }
  [data-screen-label="Vision photo"] { padding: 0 16px 48px !important; }
  [data-screen-label="Vision"] + [data-screen-label="Vision photo"] { margin-top: -8px !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;
    -webkit-mask-image: linear-gradient(to right, #000 78%, rgba(0,0,0,0.25) 94%, transparent 100%); mask-image: linear-gradient(to right, #000 78%, rgba(0,0,0,0.25) 94%, transparent 100%); }
  [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 42% !important;
    max-width: 42% !important; scroll-snap-align: start !important; }
  [data-screen-label="IRL crew"] image-slot, [data-screen-label="Agentic crew"] image-slot { pointer-events: none !important; }

  /* ---- pricing: plans must read as separate cards ---- */
  [data-screen-label="Plans"] div[style*="display: grid"]:has(> .kn-plan) { gap: 18px !important; }
  [data-screen-label="Plans"] .kn-plan { 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"]:not([data-v2-win] *) { grid-template-columns: 1fr !important; }
  /* company: crew cards stay a 4-up grid on tablets, not one giant card per row */
  [data-screen-label="IRL crew"] div[style*="display: grid"],
  [data-screen-label="Agentic crew"] div[style*="display: grid"] { grid-template-columns: repeat(4, minmax(0, 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; }
  [data-screen-label="Hero"]:has(> video) { 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: 12px"],
  [data-screen-label="How it works"] span[style*="right: 12px"] { 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: clip !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(100svh - 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: vision hero sits in a card, not floating full-bleed ---- */
  [data-screen-label="Vision"] { padding: 16px 16px 24px !important; }
  [data-screen-label="Vision"] > a { align-self: center; }
  [data-screen-label="Vision"] > span { margin-top: 4px !important; }
  [data-screen-label="Vision"] h1 { font-size: 36px !important; }
  [data-screen-label="Vision"] p { font-size: 16px !important; }
  [data-screen-label="Vision photo"] { padding: 0 16px 48px !important; }
  [data-screen-label="Vision"] + [data-screen-label="Vision photo"] { margin-top: -8px !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;
    -webkit-mask-image: linear-gradient(to right, #000 78%, rgba(0,0,0,0.25) 94%, transparent 100%); mask-image: linear-gradient(to right, #000 78%, rgba(0,0,0,0.25) 94%, transparent 100%); }
  [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 42% !important;
    max-width: 42% !important; scroll-snap-align: start !important; }
  [data-screen-label="IRL crew"] image-slot, [data-screen-label="Agentic crew"] image-slot { pointer-events: none !important; }

  /* ---- pricing: plans must read as separate cards ---- */
  [data-screen-label="Plans"] div[style*="display: grid"]:has(> .kn-plan) { gap: 18px !important; }
  [data-screen-label="Plans"] .kn-plan { 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; }

  & [data-screen-label="How it works"] [data-kn-hiw-strip] span[data-kn-hiw-mute] { display: flex !important; left: 50% !important; right: auto !important; bottom: 18% !important; transform: translateX(-50%) !important;
    height: 48px !important; padding: 0 20px !important; gap: 9px !important; z-index: 6 !important;
    background: rgba(17,24,39,0.78) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 10px 28px -8px rgba(0,0,0,0.7) !important; }
  & [data-screen-label="How it works"] [data-kn-hiw-strip] span[data-kn-hiw-mute] svg { width: 22px !important; height: 22px !important; }
  & [data-screen-label="How it works"] [data-kn-hiw-strip] span[data-kn-hiw-mute] [data-m-only-inline] { font-size: 15px !important; }
  & [data-m-stage] [data-kn-ideas-list] { flex: 0 0 auto !important; }
  & [data-m-stage] [data-kn-m-end] { flex: 1 1 auto !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; }
}

@media (max-width: 767px) {
  /* ---- vs pages: nav fits, feature table becomes name | Kinema | rival, note below ---- */
  [data-screen-label="Nav"] { padding: 10px 12px !important; }
  [data-screen-label="Nav"] [data-kn-bar] { padding: 0 8px 0 14px !important; gap: 8px !important; }
  [data-screen-label="Nav"] div[style*="gap: 6px"] > a:not(:first-child) { display: none !important; }
  [data-screen-label="Nav"] div[style*="gap: 6px"] > a { padding: 7px 8px !important; font-size: 13px !important; }
  [data-screen-label="Feature table"] { padding-left: 12px !important; padding-right: 12px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] {
    grid-template-columns: minmax(0, 1fr) 58px 58px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:first-child { display: none !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(2) { padding-left: 14px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(3),
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(4) { padding-left: 4px !important; padding-right: 4px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(5) {
    grid-column: 1 / -1 !important; padding: 0 14px 13px !important; margin-top: -4px !important; }
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] { top: 76px !important; }
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] > span:nth-child(5) { display: none !important; }
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] > span:nth-child(3),
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] > span:nth-child(4) {
    font-size: 10px !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; }
  [data-screen-label="Feature table"] div[style*="top: 126px"] { top: 118px !important; }
  [data-screen-label="Verdict"] div[style*="padding: 26px 28px"] { padding: 22px 18px !important; }
}

html[data-mobile-preview] {
  /* ---- vs pages: nav fits, feature table becomes name | Kinema | rival, note below ---- */
  [data-screen-label="Nav"] { padding: 10px 12px !important; }
  [data-screen-label="Nav"] [data-kn-bar] { padding: 0 8px 0 14px !important; gap: 8px !important; }
  [data-screen-label="Nav"] div[style*="gap: 6px"] > a:not(:first-child) { display: none !important; }
  [data-screen-label="Nav"] div[style*="gap: 6px"] > a { padding: 7px 8px !important; font-size: 13px !important; }
  [data-screen-label="Feature table"] { padding-left: 12px !important; padding-right: 12px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] {
    grid-template-columns: minmax(0, 1fr) 58px 58px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:first-child { display: none !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(2) { padding-left: 14px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(3),
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(4) { padding-left: 4px !important; padding-right: 4px !important; }
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] > span:nth-child(5) {
    grid-column: 1 / -1 !important; padding: 0 14px 13px !important; margin-top: -4px !important; }
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] { top: 76px !important; }
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] > span:nth-child(5) { display: none !important; }
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] > span:nth-child(3),
  [data-screen-label="Feature table"] div[style*="position: sticky"][style*="grid-template-columns: 34px"] > span:nth-child(4) {
    font-size: 10px !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; }
  [data-screen-label="Feature table"] div[style*="top: 126px"] { top: 118px !important; }
  [data-screen-label="Verdict"] div[style*="padding: 26px 28px"] { padding: 22px 18px !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* How it works: brand kit keeps its three columns, the video strip gives up some width */
  [data-screen-label] [data-kn-keep-grid] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) !important; }
  [data-kn-hiw-strip] { width: 170px !important; }
  [data-kn-hiw-strip][data-kn-hiw-wide] { width: 240px !important; }
  [data-kn-fmt-label] { display: none !important; }
  [data-kn-sb-opt], [data-kn-sb-model] { display: none !important; }
  [data-kn-sb-clip] { max-width: 34% !important; }
  [data-kn-sb-tools] > :nth-child(3), [data-kn-sb-tools] > :nth-child(n+6) { display: none !important; }
  [data-screen-label] [data-kn-keep-grid3] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  /* ---- How it works on phones: one 9:16 card at a time, stacked, Next step below ---- */
  [data-screen-label="How it works"] { display: block !important; padding-top: 34px !important; padding-bottom: 36px !important; }
  [data-screen-label="How it works"] h2 { font-size: 24px !important; }
  [data-m-stage] { position: relative !important; display: block !important; width: 100% !important;
    aspect-ratio: auto !important; height: min(calc((100vw - 32px) * 16 / 9), calc(100svh - 170px)) !important; min-height: 460px !important;
    margin: 26px auto 0 !important; touch-action: pan-y; }
  [data-m-stage]::before, [data-m-stage]::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    border-radius: 18px; background: rgba(31,41,55,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); z-index: 0; pointer-events: none; }
  [data-m-stage]::before { transform: translateY(-10px) scale(0.94); opacity: 0.7; }
  [data-m-stage]::after { transform: translateY(-20px) scale(0.88); opacity: 0.4; z-index: -1; }
  [data-m-stage] > [data-m-a], [data-m-stage] > [data-m-b] { position: absolute !important; inset: 0 !important; width: auto !important;
    margin: 0 !important; z-index: 2 !important; border-radius: 18px !important; overflow: hidden !important;
    transform: var(--m-t, none); opacity: var(--m-o, 1); transition: var(--m-tr, none);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 50px -20px rgba(0,0,0,0.8) !important; }
  [data-m-stage="a"] > [data-m-b], [data-m-stage="b"] > [data-m-a] { display: none !important; }
  [data-m-stage] [data-m-a] > div[style*="min-height: clamp"] { min-height: 0 !important; flex: 1 1 auto !important; overflow: visible !important; }
  [data-m-only] { display: flex !important; }
  /* parts of the left card */
  [data-m-part-show="a"] [data-m-part="b"], [data-m-part-show="b"] [data-m-part="a"] { display: none !important; }
  [data-m-part-show="a"] [data-m-part="a"], [data-m-part-show="b"] [data-m-part="b"] { width: auto !important; max-width: none !important; flex: 1 1 auto !important; }
  [data-m-part-show="a"] [data-kn-sb-clip] { aspect-ratio: auto !important; height: 100% !important; }
  /* 1A brand kit: tiles tap open a sheet in place */
  [data-m-stage] [data-kn-brand-pop] { position: absolute !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
    top: auto !important; width: auto !important; max-height: 80% !important; overflow: auto !important; }
  /* 2A brief */
  [data-m-stage] [data-kn-keep-grid3] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m-stage] [data-kn-fmt-label] { display: none !important; }
  /* 3 scenes + editor */
  [data-m-stage] [data-kn-sbcard] { aspect-ratio: 3 / 4 !important; }
  [data-m-stage] [data-kn-sbgrid] { align-content: flex-end !important; overflow: hidden !important; }
  [data-m-stage] [data-kn-sb-model], [data-m-stage] [data-kn-sb-tools] > :nth-child(3),
  [data-m-stage] [data-kn-sb-tools] > :nth-child(n+6) { display: none !important; }
  /* 5A ideas: input above the list */
  [data-m-stage] [data-m-ideas] { flex-direction: column !important; overflow: auto !important; }
  [data-m-stage] [data-m-ideas] > div:first-child { width: auto !important; flex: none !important; }
}

html[data-mobile-preview] {
  /* ---- How it works on phones: one 9:16 card at a time, stacked, Next step below ---- */
  [data-screen-label="How it works"] { display: block !important; padding-top: 34px !important; padding-bottom: 36px !important; }
  [data-screen-label="How it works"] h2 { font-size: 24px !important; }
  [data-m-stage] { position: relative !important; display: block !important; width: 100% !important;
    aspect-ratio: auto !important; height: min(calc((100vw - 32px) * 16 / 9), calc(100svh - 170px)) !important; min-height: 460px !important;
    margin: 26px auto 0 !important; touch-action: pan-y; }
  [data-m-stage]::before, [data-m-stage]::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    border-radius: 18px; background: rgba(31,41,55,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); z-index: 0; pointer-events: none; }
  [data-m-stage]::before { transform: translateY(-10px) scale(0.94); opacity: 0.7; }
  [data-m-stage]::after { transform: translateY(-20px) scale(0.88); opacity: 0.4; z-index: -1; }
  [data-m-stage] > [data-m-a], [data-m-stage] > [data-m-b] { position: absolute !important; inset: 0 !important; width: auto !important;
    margin: 0 !important; z-index: 2 !important; border-radius: 18px !important; overflow: hidden !important;
    transform: var(--m-t, none); opacity: var(--m-o, 1); transition: var(--m-tr, none);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 50px -20px rgba(0,0,0,0.8) !important; }
  [data-m-stage="a"] > [data-m-b], [data-m-stage="b"] > [data-m-a] { display: none !important; }
  [data-m-stage] [data-m-a] > div[style*="min-height: clamp"] { min-height: 0 !important; flex: 1 1 auto !important; overflow: visible !important; }
  [data-m-only] { display: flex !important; }
  /* parts of the left card */
  [data-m-part-show="a"] [data-m-part="b"], [data-m-part-show="b"] [data-m-part="a"] { display: none !important; }
  [data-m-part-show="a"] [data-m-part="a"], [data-m-part-show="b"] [data-m-part="b"] { width: auto !important; max-width: none !important; flex: 1 1 auto !important; }
  [data-m-part-show="a"] [data-kn-sb-clip] { aspect-ratio: auto !important; height: 100% !important; }
  /* 1A brand kit: tiles tap open a sheet in place */
  [data-m-stage] [data-kn-brand-pop] { position: absolute !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
    top: auto !important; width: auto !important; max-height: 80% !important; overflow: auto !important; }
  /* 2A brief */
  [data-m-stage] [data-kn-keep-grid3] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m-stage] [data-kn-fmt-label] { display: none !important; }
  /* 3 scenes + editor */
  [data-m-stage] [data-kn-sbcard] { aspect-ratio: 3 / 4 !important; }
  [data-m-stage] [data-kn-sbgrid] { align-content: flex-end !important; overflow: hidden !important; }
  [data-m-stage] [data-kn-sb-model], [data-m-stage] [data-kn-sb-tools] > :nth-child(3),
  [data-m-stage] [data-kn-sb-tools] > :nth-child(n+6) { display: none !important; }
  /* 5A ideas: input above the list */
  [data-m-stage] [data-m-ideas] { flex-direction: column !important; overflow: auto !important; }
  [data-m-stage] [data-m-ideas] > div:first-child { width: auto !important; flex: none !important; }
}

@media (max-width: 767px) {
  /* ---- 1A: an open asset collapses the kit into one bar + its details, in place ---- */
  [data-m-stage] [data-kn-keep-grid]:has([data-kn-brand-pop]) > div:not(:has([data-kn-brand-pop])) { display: none !important; }
  [data-m-stage] [data-kn-keep-grid] > div:has([data-kn-brand-pop]) > p { display: none !important; }
  [data-m-stage] [data-kn-keep-grid] > div:has([data-kn-brand-pop]) > div { display: block !important; }
  [data-m-stage] [data-kn-keep-grid]:has([data-kn-brand-pop]) div:has(> [data-kn-brand-tile]):not(:has([data-kn-brand-pop])) { display: none !important; }
  [data-m-stage] div:has(> [data-kn-brand-pop]) { display: block !important; max-width: none !important; width: 100% !important; }
  [data-m-stage] div:has(> [data-kn-brand-pop]) > :not([data-kn-brand-pop]) { display: none !important; }
  [data-m-stage] [data-kn-brand-pop] { position: static !important; width: auto !important; max-height: none !important;
    overflow: visible !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
  [data-m-stage] [data-m-bar] { display: flex !important; }
  [data-m-stage] [data-kn-pop-head] { display: none !important; }
}

html[data-mobile-preview] {
  /* ---- 1A: an open asset collapses the kit into one bar + its details, in place ---- */
  [data-m-stage] [data-kn-keep-grid]:has([data-kn-brand-pop]) > div:not(:has([data-kn-brand-pop])) { display: none !important; }
  [data-m-stage] [data-kn-keep-grid] > div:has([data-kn-brand-pop]) > p { display: none !important; }
  [data-m-stage] [data-kn-keep-grid] > div:has([data-kn-brand-pop]) > div { display: block !important; }
  [data-m-stage] [data-kn-keep-grid]:has([data-kn-brand-pop]) div:has(> [data-kn-brand-tile]):not(:has([data-kn-brand-pop])) { display: none !important; }
  [data-m-stage] div:has(> [data-kn-brand-pop]) { display: block !important; max-width: none !important; width: 100% !important; }
  [data-m-stage] div:has(> [data-kn-brand-pop]) > :not([data-kn-brand-pop]) { display: none !important; }
  [data-m-stage] [data-kn-brand-pop] { position: static !important; width: auto !important; max-height: none !important;
    overflow: visible !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
  [data-m-stage] [data-m-bar] { display: flex !important; }
  [data-m-stage] [data-kn-pop-head] { display: none !important; }
}

@media (max-width: 767px) {
  /* ---- phones: nothing editable, nothing scrolls inside a card ---- */
  [data-m-stage] input, [data-m-stage] textarea { pointer-events: none !important; overflow: hidden !important; resize: none !important; }
  [data-m-stage] [data-m-brandpanel], [data-m-stage] [data-m-part], [data-m-stage] [data-m-ideas] { overflow: hidden !important; }
  [data-m-stage] [data-kn-brand-pop] textarea { display: none !important; }
  [data-m-stage] [data-m-text] { display: block !important; }
  [data-m-stage] [data-kn-brand-pop] [role="img"] { aspect-ratio: auto !important; height: 150px !important; }
  /* stage inputs are read-only on phones (no iOS zoom), so one compact size everywhere: brief, publish, ideas */
  [data-m-stage] input, [data-m-stage] textarea { font-size: 13px !important; }
  [data-m-stage] [data-kn-prompt] { font-size: 11px !important; line-height: 1.6 !important; }
  [data-m-stage] [data-kn-brief-text] { height: 78px !important; }
  [data-m-stage] [data-kn-pub-desc] { font-size: 12px !important; }
  /* 5A: compact idea list on top, 'your video is next' keeps its height */
  [data-m-stage] [data-kn-ideas-list] { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
  [data-m-stage] [data-kn-idea-desc] { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; }
  [data-m-stage] [data-kn-idea-tags] { display: none !important; }
  /* brand kit tiles: bigger heads, tighter environments so three fit per row */
  [data-m-stage] [data-kn-brand-tile][style*="border-radius: 999px"] { width: 54px !important; height: 54px !important; }
  [data-m-stage] div[style*="flex: 1 1 76px"] { flex: 0 0 calc((100% - 16px) / 3) !important; max-width: calc((100% - 16px) / 3) !important; min-width: 0 !important; }
  [data-m-stage] div[style*="flex: 1 1 76px"] > [data-kn-brand-tile] { height: 34px !important; }
  [data-m-stage] div[style*="align-content: flex-start"]:has(> div[style*="flex: 1 1 76px"]) { gap: 8px !important; }
}

html[data-mobile-preview] {
  /* ---- phones: nothing editable, nothing scrolls inside a card ---- */
  [data-m-stage] input, [data-m-stage] textarea { pointer-events: none !important; overflow: hidden !important; resize: none !important; }
  [data-m-stage] [data-m-brandpanel], [data-m-stage] [data-m-part], [data-m-stage] [data-m-ideas] { overflow: hidden !important; }
  [data-m-stage] [data-kn-brand-pop] textarea { display: none !important; }
  [data-m-stage] [data-m-text] { display: block !important; }
  [data-m-stage] [data-kn-brand-pop] [role="img"] { aspect-ratio: auto !important; height: 150px !important; }
  /* stage inputs are read-only on phones (no iOS zoom), so one compact size everywhere: brief, publish, ideas */
  [data-m-stage] input, [data-m-stage] textarea { font-size: 13px !important; }
  [data-m-stage] [data-kn-prompt] { font-size: 11px !important; line-height: 1.6 !important; }
  [data-m-stage] [data-kn-brief-text] { height: 78px !important; }
  [data-m-stage] [data-kn-pub-desc] { font-size: 12px !important; }
  /* 5A: compact idea list on top, 'your video is next' keeps its height */
  [data-m-stage] [data-kn-ideas-list] { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
  [data-m-stage] [data-kn-idea-desc] { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; }
  [data-m-stage] [data-kn-idea-tags] { display: none !important; }
  /* brand kit tiles: bigger heads, tighter environments so three fit per row */
  [data-m-stage] [data-kn-brand-tile][style*="border-radius: 999px"] { width: 54px !important; height: 54px !important; }
  [data-m-stage] div[style*="flex: 1 1 76px"] { flex: 0 0 calc((100% - 16px) / 3) !important; max-width: calc((100% - 16px) / 3) !important; min-width: 0 !important; }
  [data-m-stage] div[style*="flex: 1 1 76px"] > [data-kn-brand-tile] { height: 34px !important; }
  [data-m-stage] div[style*="align-content: flex-start"]:has(> div[style*="flex: 1 1 76px"]) { gap: 8px !important; }
}

@media (max-width: 767px) {
  [data-m-only-inline] { display: inline !important; }
  [data-kn-uc-cta] { display: flex !important; }
  /* a fixed background repaints the whole page on every scroll frame on Android; iOS ignores it anyway */
  [data-screen-label="Kinema homepage"] { background-attachment: scroll !important; }
}

html[data-mobile-preview] {
  [data-m-only-inline] { display: inline !important; }
  [data-kn-uc-cta] { display: flex !important; }
  [data-screen-label="Kinema homepage"] { background-attachment: scroll !important; }
}


/* ==== round 3: tablets portrait, touch targets, legal readability ==== */
@media (min-width: 768px) and (max-width: 1023px) {
  section { padding-left: 24px !important; padding-right: 24px !important; }
  section[style*="max-width"] { max-width: 100% !important; }
  [data-screen-label="How it works"] span[style*="left: 12px"] { left: -4px !important; }
  [data-screen-label="How it works"] span[style*="right: 12px"] { right: -4px !important; }
  [data-kn-hiw-play] { width: auto !important; margin-right: 0 !important; }
}
@media (pointer: coarse) {
  [data-kn-nav] a, [data-kn-nav] button, [data-kn-sheet] a, [data-kn-sheet] button { min-height: 44px; box-sizing: border-box; }
  [data-kn-nav] a.kn-btn { display: inline-flex; align-items: center; }
  .kn-btn-sm { min-height: 40px; }
  footer a:not(p a) { display: inline-block; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 767px) {
  table td, table th { font-size: 13px !important; line-height: 1.5 !important; }
  [data-screen-label="Read also"] span[style*="font-size: 11"], [data-screen-label="Article teasers"] span[style*="font-size: 11"] { font-size: 12px !important; }
}

@media (max-width: 767px) {
  /* LP "Read also": label above the rail, not squeezed beside it */
  [data-screen-label="Read also"]:has(> p) { display: block !important; overflow: visible !important;
    padding-left: 16px !important; padding-right: 16px !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* vs pages: keep the feature table as a table on tablets */
  [data-screen-label="Feature table"] div[style*="grid-template-columns: 34px"] {
    grid-template-columns: 30px minmax(0, 1.1fr) 72px 72px minmax(0, 1.3fr) !important; }
  /* pricing: plans two by two, credit packs in threes */
  section[data-screen-label][style*="grid-template-rows: repeat(6, auto)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-screen-label] div[style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  /* pricing: credit packs two per row instead of five tall cards */
  [data-screen-label] div[style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* signup: role switch as a full-width segmented row, no pill spilling onto a second line */
  div[style*="border-radius: 999px"][style*="flex-wrap: wrap"][style*="align-self: flex-start"] {
    align-self: stretch !important; flex-wrap: nowrap !important; border-radius: 12px !important; }
  div[style*="border-radius: 999px"][style*="flex-wrap: wrap"][style*="align-self: flex-start"] > * {
    flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; text-align: center !important;
    white-space: nowrap !important; padding-left: 6px !important; padding-right: 6px !important; }
}
@media (max-width: 767px) {
  /* HIW last card: ideas take their height, the video banner gets the rest */
  [data-m-stage] [data-kn-ideas-list] { flex: 0 0 auto !important; }
  [data-m-stage] [data-kn-m-end] { flex: 1 1 auto !important; }
  /* HIW sound toggle: centred in the lower third, big enough to notice */
  [data-screen-label="How it works"] [data-kn-hiw-strip] span[data-kn-hiw-mute] { display: flex !important; left: 50% !important; right: auto !important; bottom: 18% !important; transform: translateX(-50%) !important;
    height: 48px !important; padding: 0 20px !important; gap: 9px !important; z-index: 6 !important;
    background: rgba(17,24,39,0.78) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 10px 28px -8px rgba(0,0,0,0.7) !important; }
  [data-screen-label="How it works"] [data-kn-hiw-strip] span[data-kn-hiw-mute] svg { width: 22px !important; height: 22px !important; }
  [data-screen-label="How it works"] [data-kn-hiw-strip] span[data-kn-hiw-mute] [data-m-only-inline] { font-size: 15px !important; }
}

@media (max-width: 767px) {
  /* 1A: an open environment/asset uses the full card width (beats the 1/3 tile width) */
  [data-m-stage] [data-kn-keep-grid] div[style*="flex: 1 1 76px"]:has(> [data-kn-brand-pop]),
  [data-m-stage] [data-kn-keep-grid] div:has(> [data-kn-brand-tile]):has([data-kn-brand-pop]) { flex: 1 1 100% !important; max-width: none !important; width: 100% !important; }
}
@media (max-width: 767px) and (min-height: 700px) {
  [data-m-stage] div[style*="flex: 1 1 76px"] > [data-kn-brand-tile] { height: 48px !important; }
}
@media (max-width: 767px) and (min-height: 780px) {
  /* tall iPhones: bigger brand kit, the card has the room */
  [data-m-stage] [data-kn-brand-tile][style*="border-radius: 999px"] { width: 66px !important; height: 66px !important; }
  [data-m-stage] div[style*="flex: 1 1 76px"] > [data-kn-brand-tile] { height: 62px !important; }
  [data-m-stage] [data-kn-brand-tile][style*="width: 60px"] { width: 72px !important; height: 54px !important; }
}
html[data-mobile-preview] {
  & [data-m-stage] [data-kn-keep-grid] div[style*="flex: 1 1 76px"]:has(> [data-kn-brand-pop]),
  & [data-m-stage] [data-kn-keep-grid] div:has(> [data-kn-brand-tile]):has([data-kn-brand-pop]) { flex: 1 1 100% !important; max-width: none !important; width: 100% !important; }
}

/* mobilní UI demo: když se popisek kroku nevejde vedle teček, zahodí se slovo „Step" */
@media (max-width: 380px) { [data-kn-mlabel-step] { display: none !important; } }

@media (max-width: 767px) {
  /* phones: image slots never trap the touch — page scrolls over photos */
  image-slot { touch-action: pan-y !important; pointer-events: none !important; }
  /* company: hiring tile first in the rail, compact so it fits a 42% card */
  #crew-grid > a[data-kn-hiring] { order: -1; }
  #crew-grid > a[data-kn-hiring] > div:first-child { gap: 10px !important; justify-content: flex-start !important; padding-top: 18px !important; }
  #crew-grid > a[data-kn-hiring] [data-kn-hire-icon] { width: 56px !important; height: 56px !important; }
  #crew-grid > a[data-kn-hiring] [data-kn-hire-icon] svg:first-of-type { width: 50px !important; height: 50px !important; }
  #crew-grid > a[data-kn-hiring] [data-kn-hire-icon] svg:last-of-type { width: 38px !important; height: 38px !important; }
  #crew-grid > a[data-kn-hiring] span[style*="letter-spacing: 0.14em"] { font-size: 9px !important; letter-spacing: 0.1em !important; }
  #crew-grid > a[data-kn-hiring] span[style*="font-size: 22px"] { font-size: 15px !important; }
  #crew-grid > a[data-kn-hiring] > div:first-child > div:last-child { display: none !important; }
}