@keyframes kn-sweep-v { 0%, 10% { top: 30px; opacity: 0; } 13% { opacity: 1; } 38% { opacity: 1; } 41%, 100% { top: calc(100% - 84px); opacity: 0; } }
/* Kinema — mobile layer for the homepage index.dc.html, formerly index-v5 (phones ≤ 767px and html[data-mobile-preview]).
   Loads after kn-mobile.css; only touches the v5-specific blocks (hero strip, crew axis,
   role cards, use-case rail, case studies, flip benefits). */
@media (max-width: 767px) {
  /* ---- use-case cards: the readability shade covers only the caption band, the clip above stays clean ---- */
  [data-uc-rail] > [data-uc5] > div[style*="to top"] { background: linear-gradient(to top, rgba(8,11,19,0.94) 0%, rgba(8,11,19,0.6) 22%, transparent 42%) !important; opacity: 1 !important; }
  /* ---- jobs: tiles stack ---- */
  #jobs-tiles { grid-template-columns: 1fr !important; }
  /* ---- hero: no section gutter, the overlay and the chip rail run edge to edge ---- */
  [data-screen-label="Hero"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* ---- how it works: cards vs. screens get distinct, stronger outlines; closed header keeps its icons ---- */
  [data-kn-howhead], [data-v2-node] { box-shadow: 0 0 0 1px rgba(255,255,255,0.6) !important; }
  [data-v2-node][data-on="0"] [data-v2-win] { box-shadow: 0 0 0 1.5px rgba(139,92,246,0.65), 0 8px 18px -10px rgba(0,0,0,0.8) !important; }
  [data-v2-node][data-on="0"] [data-v2-win] > div:first-child > span[style*="icon-"], [data-v2-node][data-on="0"] [data-v2-win] > div:first-child > span[style*="flex: 1"] { display: block !important; }
  /* ---- contrast pass (dim displays): darker page, opaque cards, stronger rings, brighter secondary text ---- */
  [data-screen-label="Kinema homepage"] { background-color: #0b0f1a !important; }
  [data-screen-label="Hero"] { background: #0b0f1a !important; }
  [data-screen-label="Hero"] > div[style*="padding: 150px"] { background: linear-gradient(to top, #0b0f1a 34%, rgba(11,15,26,0.78) 60%, transparent) !important; }
  [data-screen-label="Hero"] > video { opacity: 0.45 !important; }
  [data-screen-label="Kinema homepage"] [style*="--kinema-gray-400"] { color: var(--kinema-gray-300) !important; }
  [data-screen-label="Kinema homepage"] [style*="rgba(255, 255, 255, 0.06)"][style*="background"] { background-color: rgba(255,255,255,0.12) !important; }
  [data-kn-chips] > span[data-kn-on="0"] { background: rgba(255,255,255,0.12) !important; color: var(--kinema-gray-200) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important; }
  [data-kn-howhead], [data-v2-node], #usecases > [data-kn-ucrole] { background: #1f2937 !important; }
  #usecases > [data-kn-ucrole] { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  [data-v2-node][data-on="1"] { background: #1a2332 !important; }
  [data-kn-role][data-kn-sel="0"] { background: #1f2937 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  [data-kn-bgrid] [data-kn-b] > div > div { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  [data-kn-cs] > div > a { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  [data-m-a] { background: #1f2937 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  /* ---- hero sub-headline: white only, smaller ---- */
  [data-kn-h1sub] { font-size: 0.56em !important; color: rgba(255,255,255,0.7) !important; letter-spacing: -0.01em !important; }
  [data-kn-h1sub] > span { background: none !important; color: rgba(255,255,255,0.7) !important; -webkit-text-fill-color: rgba(255,255,255,0.7) !important; }
  /* ---- hero ---- */
  [data-screen-label="Hero"], [data-screen-label="Hero"]:has(> video) { min-height: 0 !important; }
  [data-screen-label="Hero"] > div[style*="padding: 150px"] { padding: 104px 16px 16px !important; }
  [data-screen-label="Hero"] h1 { font-size: 36px !important; line-height: 1.06 !important; }
  [data-kn-h1line] { white-space: normal !important; }
  [data-m="hide"] { display: none !important; }
  [data-kn-loc^="why-timeline"] { padding: 18px 16px 16px !important; }
  [data-kn-h1br] { display: inline !important; }
  [data-screen-label="Hero"] a[href="#how"] { display: none !important; }
  [data-screen-label="Hero"] { background: #111827 !important; }
  [data-screen-label="Hero"] > div[style*="padding: 150px"] { background: linear-gradient(to top, #111827 30%, rgba(17,24,39,0.6) 60%, transparent) !important; }
  [data-screen-label="Hero"] > video { right: 0 !important; width: 100% !important; height: 72% !important; opacity: 0.7 !important; object-position: 50% 30% !important; -webkit-mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%) !important; mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%) !important; }
  [data-kn-chips] > span[data-kn-on] { display: inline-flex !important; align-items: center; gap: 7px; }
  [data-kn-chips] > span[data-kn-on]::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; opacity: 0.8; }
  [data-kn-chips] > span[data-kn-on="1"]::after { transform: translateY(1px) rotate(-135deg); }
  [data-kn-chips] { display: flex !important; padding: 16px 16px 0 !important; margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; max-width: none !important; align-self: stretch !important; box-sizing: border-box; cursor: grab; }
  [data-kn-chips] > span:last-of-type { margin-right: 16px; }
  [data-kn-chips]::-webkit-scrollbar { display: none; }
  [data-kn-chips] > span[data-kn-on="1"] { color: #fff !important; background: rgba(124,58,237,0.9) !important; box-shadow: none !important; }
  [data-kn-strip] { display: flex !important; flex-direction: column !important; gap: 0 !important; position: relative !important; padding: 0 !important; margin-top: -22px !important; border-top: 0 !important; }
  [data-kn-strip] > div { padding: 12px 0 0 !important; box-shadow: none !important; gap: 0 !important; }
  [data-kn-strip] > div[data-kn-open="0"] { display: none !important; }
  [data-kn-strip] > div > span { display: none !important; }
  [data-kn-strip] > div > div > span { font-size: 12px !important; line-height: 1.45 !important; }
  /* one shared slot on the left shows the open item's loop */
  [data-kn-strip] > div > div { flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; }
  [data-kn-strip] div[style*="flex: 0 0 60px"] { margin: 0 !important; }
  [data-kn-strip] > div > span::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
  [data-kn-strip] > div[data-kn-open="1"] > span::after { transform: translateY(-30%) rotate(-135deg); }

  /* ---- crew axis: a vertical list, notes always open ---- */
  [data-screen-label="Crew"] { padding-top: 44px !important; padding-bottom: 20px !important; }
  [data-kn-howhead] { cursor: pointer; padding: 18px 16px 16px !important; border-radius: 14px; background: rgba(17,24,39,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); position: relative; }
  [data-kn-howhead] h2 { font-size: 24px !important; padding-right: 26px; }
  [data-kn-howhead] h2::after { content: ""; position: absolute; right: 18px; top: 24px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
  [data-kn-howopen="1"] [data-kn-howhead] h2::after { transform: rotate(-135deg); top: 28px; }
  [data-kn-howopen="0"] [data-kn-howhead] > div > p:last-of-type { display: none !important; }
  [data-kn-howopen="0"] [data-kn-howmini] { display: flex !important; }
  [data-kn-howopen="0"] [data-kn-axis], [data-kn-howopen="0"] [data-kn-howalso] { display: none !important; }
  [data-kn-howopen="1"] [data-kn-howhead] { margin-bottom: 8px; }
  :has(> [data-kn-howopen="0"]) + [data-screen-label="Models"], [data-kn-howopen="0"] + [data-screen-label="Models"] { display: none !important; }
  [data-screen-label="Models"] { padding-top: 0 !important; padding-bottom: 8px !important; }
  [data-screen-label="Crew"] { padding-top: 16px !important; padding-bottom: 16px !important; }
  [data-kn-pick] { display: none !important; }
  [data-kn-axis] { grid-template-columns: 1fr !important; margin: 26px 0 0 !important; width: 100% !important; gap: 22px !important; }
  [data-kn-axisline] { display: none !important; }
  [data-kn-axis]::after { content: ""; position: absolute; left: 10px; top: 30px; width: 8px; height: 64px; border-radius: 999px; opacity: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.95)); box-shadow: 0 0 18px 4px rgba(139,92,246,0.6); animation: kn-sweep-v 7s cubic-bezier(0.4,0,0.2,1) infinite; }
  [data-kn-node]::before { content: ""; position: absolute; left: 13px; top: -22px; bottom: 0; width: 2px; background: rgba(85,75,211,0.45); pointer-events: none; z-index: 0; }
  [data-kn-axisline] + [data-kn-node]::before, [data-kn-node]:first-child::before { top: 30px; background: linear-gradient(180deg, rgba(29,243,240,0.4), rgba(85,75,211,0.45)); }
  [data-kn-node]:last-child::before { bottom: auto; height: 20px; background: linear-gradient(180deg, rgba(85,75,211,0.45), rgba(246,24,160,0.4)); }
  [data-kn-mlist] { position: relative; z-index: 1; }
  [data-kn-node]:not([data-kn-solo="1"]) [data-kn-nodetxt] { padding-left: 40px !important; position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) { [data-kn-nodetxt]::before { animation: none !important; } }
  [data-kn-node]:not([data-kn-solo="1"]) [data-kn-nodetxt]::before { content: ""; position: absolute; left: 7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px; background: linear-gradient(135deg, rgba(29,243,240,0.6), rgba(85,75,211,0.85) 52%, rgba(246,24,160,0.6)); box-shadow: 0 0 0 3px #0b0f1a; animation: kn-dotpulse 2.8s ease-in-out infinite; }
  [data-kn-node]:not([data-kn-solo="1"]) [data-kn-mlist] { padding-left: 40px !important; }
  [data-kn-head] > div > span { font-size: 15px !important; }
  [data-kn-head] > div > svg { width: 20px !important; height: 20px !important; margin-left: 3px !important; }
  [data-kn-node] { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 0 !important; cursor: pointer !important; }
  [data-kn-node] [data-kn-head] { display: none !important; }
  [data-kn-mlist] { display: flex !important; order: 2; }
  [data-kn-crewname] { display: none !important; }
  [data-kn-node][data-kn-solo="1"] { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 8px 10px !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-mlist] > div > span:first-child { box-shadow: 0 0 0 3px #0b0f1a; position: relative; z-index: 2; }
  [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] > span:first-child { line-height: 28px !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-mlist] { order: 1; flex: none !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-mlist] > div > span:last-child { display: none !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] { order: 2; flex: 1 1 0 !important; justify-content: flex-start !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; text-align: left !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] > span { width: 100%; box-sizing: border-box; text-align: left !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] > span:first-child { flex: none !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-note] { order: 3; flex: 1 1 100% !important; }
  [data-kn-head] > div { width: 54px !important; height: 54px !important; }
  [data-kn-head] > div > div { width: 54px !important; height: 54px !important; }
  [data-kn-head] > div:not(:first-child) { margin-left: -12px !important; }
  [data-kn-nodetxt] { order: 1; flex: none !important; min-width: 0; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 2px 10px !important; text-align: left !important; }
  [data-kn-nodetxt] span { white-space: normal !important; }
  [data-kn-nodetxt] > span:first-child { font-size: 17px !important; flex: 1 1 100%; position: relative; padding-right: 22px; }
  [data-kn-nodetxt] > span:first-child::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .5; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
  [data-kn-node][data-kn-on="1"] [data-kn-nodetxt] > span:first-child::after { transform: translateY(-30%) rotate(-135deg); }
  [data-kn-node] [data-kn-note] { position: static !important; order: 3; flex: none !important; width: auto !important; margin: 0 !important; padding: 0 0 0 40px !important;
    transform: none !important; background: none !important; align-items: flex-start !important; text-align: left !important; transition: opacity .25s !important; }
  [data-kn-node][data-kn-on="0"] [data-kn-note] { display: none !important; }
  [data-kn-node][data-kn-on="1"] [data-kn-note] { opacity: 1 !important; }
  [data-kn-note] svg { display: none !important; }
  [data-kn-note] span { font-family: Inter, system-ui, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--kinema-gray-300) !important; }
  [data-screen-label="Crew"] a[href="#demo"] { margin-left: 0 !important; }

  /* ---- how it works v6: tap accordion ---- */
  [data-kn-axis][data-v2-grid]::after { display: none !important; }
  [data-screen-label] [data-v2-g2] { grid-template-columns: 1fr 1fr !important; }
  [data-screen-label] [data-v2-g3] { grid-template-columns: repeat(3, 1fr) !important; }
  [data-kn-howalso] > span { display: none !important; }
  [data-kn-howalso] { justify-content: center !important; margin-top: 18px !important; }
  [data-v2-grid]{margin:26px 0 0 !important;grid-template-columns:1fr !important;gap:10px !important}
  [data-v2-grid] > div:first-child{display:none}
  [data-v2-node]{flex-direction:row !important;flex-wrap:wrap;align-items:center !important;gap:10px 12px !important;padding:10px !important;border-radius:14px;background:rgba(17,24,39,0.55);box-shadow:0 0 0 1px rgba(255,255,255,0.06);cursor:pointer !important;transition:background .3s}
  [data-v2-node][data-on="1"]{background:rgba(17,24,39,0.85)}
  [data-v2-win]{width:104px !important;margin:0 !important;transform:none !important;flex:none;opacity:1 !important;order:1}
  [data-v2-node][data-on="1"] [data-v2-win]{width:100% !important;order:2;box-shadow:0 0 0 1.5px rgba(139,92,246,.9), 0 20px 40px -20px rgba(124,58,237,.7)}
  [data-v2-node][data-on="0"] [data-v2-win] > div:first-child > span:not(:first-child){display:none}
  [data-v2-node] > div:not([data-v2-win]):not([data-v2-note]){flex:1;min-width:0;align-items:flex-start !important;text-align:left !important;order:2;position:relative;padding-right:22px}
  [data-v2-node] > div:not([data-v2-win]):not([data-v2-note])::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.6;transition:transform .3s}
  [data-v2-node][data-on="1"] > div:not([data-v2-win]):not([data-v2-note]){order:1;flex:1 1 100%}
  [data-v2-node][data-on="1"] > div:not([data-v2-win]):not([data-v2-note])::after{transform:translateY(-30%) rotate(-135deg)}
  [data-v2-note]{display:none !important}
  [data-v2-plong]{display:none !important}
  [data-v2-pshort]{display:block !important}
  [data-v2-node][data-on="1"] > div:not([data-v2-win]):not([data-v2-note]) > span:nth-child(2){display:none}
  [data-v2-note] svg{display:none !important}
  [data-v2-role]{display:none !important}
  [data-v2-grid][data-hv="1"] [data-v2-node][data-on="0"] [data-v2-win]{opacity:1 !important}
  [data-v2-grid] + div{margin-top:24px !important;justify-content:flex-start !important}

  /* ---- roles ---- */
  [data-kn-rolegrid] { grid-template-columns: 1fr !important; gap: 10px !important; }
  [data-kn-role] { min-height: 0 !important; padding: 16px !important; }
  [data-kn-role] > div:last-child, [data-kn-role] > p { display: none !important; }
  [data-kn-role] > div:nth-child(2) { margin: 10px 0 0 !important; align-items: center !important; }
  [data-kn-role] h3 { font-size: 18px !important; }
  [data-kn-role][data-kn-sel="0"] h3 { font-weight: 500 !important; }
  [data-kn-role] svg { width: 36px !important; height: 36px !important; margin: 0 !important; }

  /* ---- use cases rail ---- */
  #usecases { padding-left: 0 !important; padding-right: 0 !important; }
  #usecases > div[style*="max-width"]:not([data-kn-ucrole]):not([data-kn-cs]) { padding: 0 16px !important; }
  [data-kn-ucclaim] { display: none !important; }
  #usecases > [data-kn-ucrole] { display: flex !important; margin: 14px 16px 0 !important; padding: 18px 16px 16px !important; gap: 12px !important; border-radius: 14px; background: rgba(31,41,55,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.07); }
  #usecases > [data-kn-ucrole] h3 { font-size: 22px !important; margin-bottom: 2px !important; }
  #usecases > [data-kn-cs] { padding: 26px 0 20px !important; }
  [data-kn-uccta] { display: none !important; }
  [data-uc-rail] { padding: 6px 16px 14px !important; scroll-padding-left: 16px !important; gap: 10px !important; }
  [data-uc-rail] { scroll-padding-left: 16px !important; -webkit-overflow-scrolling: touch; }
  [data-uc-rail] > [data-uc5] { width: auto !important; aspect-ratio: 9 / 16 !important; height: min(calc(100svh - 205px), calc((100vw - 84px) * 16 / 9)) !important; scroll-snap-stop: always !important; }
  [data-uc-rail] > [data-uc5] h3 { font-size: 19px !important; }
  [data-kn-railarrow] { display: none !important; }
  [data-kn-cs] > div { display: flex !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 !important; padding: 0 16px !important; width: auto !important; scroll-padding-left: 16px; }
  [data-kn-cs] > div::-webkit-scrollbar { display: none; }
  [data-kn-cs] > div > a { flex: 0 0 76% !important; scroll-snap-align: start !important; min-height: 0 !important; }
  [data-kn-cs] > div > a p { display: none !important; }

  /* ---- benefits: two columns, smaller icon ---- */
  [data-screen-label="Benefits v5"] { padding-top: 36px !important; padding-bottom: 48px !important; }
  [data-kn-bgrid] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  [data-kn-bgrid] > div { aspect-ratio: 1 / 1.2 !important; }
  [data-kn-bgrid] h3 { font-size: 14.5px !important; }
  [data-kn-bgrid] svg[viewBox="0 0 24 24"] { width: 62px !important; height: 62px !important; }
  [data-kn-bgrid] p { font-size: 12px !important; line-height: 1.4 !important; }
}
html[data-mobile-preview] {
  /* ---- use-case cards: the readability shade covers only the caption band, the clip above stays clean ---- */
  & [data-uc-rail] > [data-uc5] > div[style*="to top"] { background: linear-gradient(to top, rgba(8,11,19,0.94) 0%, rgba(8,11,19,0.6) 22%, transparent 42%) !important; opacity: 1 !important; }
  /* ---- jobs: tiles stack ---- */
  & #jobs-tiles { grid-template-columns: 1fr !important; }
  /* ---- hero: no section gutter, the overlay and the chip rail run edge to edge ---- */
  & [data-screen-label="Hero"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* ---- how it works: cards vs. screens get distinct, stronger outlines; closed header keeps its icons ---- */
  & [data-kn-howhead], [data-v2-node] { box-shadow: 0 0 0 1px rgba(255,255,255,0.6) !important; }
  & [data-v2-node][data-on="0"] [data-v2-win] { box-shadow: 0 0 0 1.5px rgba(139,92,246,0.65), 0 8px 18px -10px rgba(0,0,0,0.8) !important; }
  & [data-v2-node][data-on="0"] [data-v2-win] > div:first-child > span[style*="icon-"], [data-v2-node][data-on="0"] [data-v2-win] > div:first-child > span[style*="flex: 1"] { display: block !important; }
  /* ---- contrast pass (dim displays): darker page, opaque cards, stronger rings, brighter secondary text ---- */
  & [data-screen-label="Kinema homepage"] { background-color: #0b0f1a !important; }
  & [data-screen-label="Hero"] { background: #0b0f1a !important; }
  & [data-screen-label="Hero"] > div[style*="padding: 150px"] { background: linear-gradient(to top, #0b0f1a 34%, rgba(11,15,26,0.78) 60%, transparent) !important; }
  & [data-screen-label="Hero"] > video { opacity: 0.45 !important; }
  & [data-screen-label="Kinema homepage"] [style*="--kinema-gray-400"] { color: var(--kinema-gray-300) !important; }
  & [data-screen-label="Kinema homepage"] [style*="rgba(255, 255, 255, 0.06)"][style*="background"] { background-color: rgba(255,255,255,0.12) !important; }
  & [data-kn-chips] > span[data-kn-on="0"] { background: rgba(255,255,255,0.12) !important; color: var(--kinema-gray-200) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important; }
  & [data-kn-howhead], [data-v2-node], #usecases > [data-kn-ucrole] { background: #1f2937 !important; }
  #usecases > [data-kn-ucrole] { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  & [data-v2-node][data-on="1"] { background: #1a2332 !important; }
  & [data-kn-role][data-kn-sel="0"] { background: #1f2937 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  & [data-kn-bgrid] [data-kn-b] > div > div { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  & [data-kn-cs] > div > a { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  & [data-m-a] { background: #1f2937 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  /* ---- hero sub-headline: white only, smaller ---- */
  & [data-kn-h1sub] { font-size: 0.56em !important; color: rgba(255,255,255,0.7) !important; letter-spacing: -0.01em !important; }
  & [data-kn-h1sub] > span { background: none !important; color: rgba(255,255,255,0.7) !important; -webkit-text-fill-color: rgba(255,255,255,0.7) !important; }
  /* ---- hero ---- */
  & [data-screen-label="Hero"], & [data-screen-label="Hero"]:has(> video) { min-height: 0 !important; }
  & [data-screen-label="Hero"] > div[style*="padding: 150px"] { padding: 104px 16px 16px !important; }
  & [data-screen-label="Hero"] h1 { font-size: 36px !important; line-height: 1.06 !important; }
  & [data-kn-h1line] { white-space: normal !important; }
  & [data-m="hide"] { display: none !important; }
  & [data-kn-loc^="why-timeline"] { padding: 18px 16px 16px !important; }
  & [data-kn-h1br] { display: inline !important; }
  & [data-screen-label="Hero"] a[href="#how"] { display: none !important; }
  & [data-screen-label="Hero"] { background: #111827 !important; }
  & [data-screen-label="Hero"] > div[style*="padding: 150px"] { background: linear-gradient(to top, #111827 30%, rgba(17,24,39,0.6) 60%, transparent) !important; }
  & [data-screen-label="Hero"] > video { right: 0 !important; width: 100% !important; height: 72% !important; opacity: 0.7 !important; object-position: 50% 30% !important; -webkit-mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%) !important; mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%) !important; }
  & [data-kn-chips] > span[data-kn-on] { display: inline-flex !important; align-items: center; gap: 7px; }
  & [data-kn-chips] > span[data-kn-on]::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; opacity: 0.8; }
  & [data-kn-chips] > span[data-kn-on="1"]::after { transform: translateY(1px) rotate(-135deg); }
  & [data-kn-chips] { display: flex !important; padding: 16px 16px 0 !important; margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; max-width: none !important; align-self: stretch !important; box-sizing: border-box; cursor: grab; }
  & [data-kn-chips] > span:last-of-type { margin-right: 16px; }
  & [data-kn-chips]::-webkit-scrollbar { display: none; }
  & [data-kn-chips] > span[data-kn-on="1"] { color: #fff !important; background: rgba(124,58,237,0.9) !important; box-shadow: none !important; }
  & [data-kn-strip] { display: flex !important; flex-direction: column !important; gap: 0 !important; position: relative !important; padding: 0 !important; margin-top: -22px !important; border-top: 0 !important; }
  & [data-kn-strip] > div { padding: 12px 0 0 !important; box-shadow: none !important; gap: 0 !important; }
  & [data-kn-strip] > div[data-kn-open="0"] { display: none !important; }
  & [data-kn-strip] > div > span { display: none !important; }
  & [data-kn-strip] > div > div > span { font-size: 12px !important; line-height: 1.45 !important; }
  /* one shared slot on the left shows the open item's loop */
  & [data-kn-strip] > div > div { flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; }
  & [data-kn-strip] div[style*="flex: 0 0 60px"] { margin: 0 !important; }
  & [data-kn-strip] > div > span::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
  & [data-kn-strip] > div[data-kn-open="1"] > span::after { transform: translateY(-30%) rotate(-135deg); }

  /* ---- crew axis: a vertical list, notes always open ---- */
  & [data-screen-label="Crew"] { padding-top: 44px !important; padding-bottom: 20px !important; }
  & [data-kn-howhead] { cursor: pointer; padding: 18px 16px 16px !important; border-radius: 14px; background: rgba(17,24,39,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); position: relative; }
  & [data-kn-howhead] h2 { font-size: 24px !important; padding-right: 26px; }
  & [data-kn-howhead] h2::after { content: ""; position: absolute; right: 18px; top: 24px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
  & [data-kn-howopen="1"] [data-kn-howhead] h2::after { transform: rotate(-135deg); top: 28px; }
  & [data-kn-howopen="0"] [data-kn-howhead] > div > p:last-of-type { display: none !important; }
  & [data-kn-howopen="0"] [data-kn-howmini] { display: flex !important; }
  & [data-kn-howopen="0"] [data-kn-axis], & [data-kn-howopen="0"] [data-kn-howalso] { display: none !important; }
  & [data-kn-howopen="1"] [data-kn-howhead] { margin-bottom: 8px; }
  & :has(> [data-kn-howopen="0"]) + [data-screen-label="Models"], [data-kn-howopen="0"] + [data-screen-label="Models"] { display: none !important; }
  & [data-screen-label="Models"] { padding-top: 0 !important; padding-bottom: 8px !important; }
  & [data-screen-label="Crew"] { padding-top: 16px !important; padding-bottom: 16px !important; }
  & [data-kn-pick] { display: none !important; }
  & [data-kn-axis] { grid-template-columns: 1fr !important; margin: 26px 0 0 !important; width: 100% !important; gap: 22px !important; }
  & [data-kn-axisline] { display: none !important; }
  & [data-kn-axis]::after { content: ""; position: absolute; left: 10px; top: 30px; width: 8px; height: 64px; border-radius: 999px; opacity: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.95)); box-shadow: 0 0 18px 4px rgba(139,92,246,0.6); animation: kn-sweep-v 7s cubic-bezier(0.4,0,0.2,1) infinite; }
  & [data-kn-node]::before { content: ""; position: absolute; left: 13px; top: -22px; bottom: 0; width: 2px; background: rgba(85,75,211,0.45); pointer-events: none; z-index: 0; }
  & [data-kn-axisline] + [data-kn-node]::before, & [data-kn-node]:first-child::before { top: 30px; background: linear-gradient(180deg, rgba(29,243,240,0.4), rgba(85,75,211,0.45)); }
  & [data-kn-node]:last-child::before { bottom: auto; height: 20px; background: linear-gradient(180deg, rgba(85,75,211,0.45), rgba(246,24,160,0.4)); }
  & [data-kn-mlist] { position: relative; z-index: 1; }
  & [data-kn-node]:not([data-kn-solo="1"]) [data-kn-nodetxt] { padding-left: 40px !important; position: relative; z-index: 1; }
  & [data-kn-node]:not([data-kn-solo="1"]) [data-kn-nodetxt]::before { content: ""; position: absolute; left: 7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px; background: linear-gradient(135deg, rgba(29,243,240,0.6), rgba(85,75,211,0.85) 52%, rgba(246,24,160,0.6)); box-shadow: 0 0 0 3px #0b0f1a; animation: kn-dotpulse 2.8s ease-in-out infinite; }
  & [data-kn-node]:not([data-kn-solo="1"]) [data-kn-mlist] { padding-left: 40px !important; }
  & [data-kn-head] > div > span { font-size: 15px !important; }
  & [data-kn-head] > div > svg { width: 20px !important; height: 20px !important; margin-left: 3px !important; }
  & [data-kn-node] { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 0 !important; cursor: pointer !important; }
  & [data-kn-node] [data-kn-head] { display: none !important; }
  [data-kn-mlist] { display: flex !important; order: 2; }
  [data-kn-crewname] { display: none !important; }
  & [data-kn-node][data-kn-solo="1"] { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 8px 10px !important; }
  [data-kn-node][data-kn-solo="1"] [data-kn-mlist] > div > span:first-child { box-shadow: 0 0 0 3px #0b0f1a; position: relative; z-index: 2; }
  [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] > span:first-child { line-height: 28px !important; }
  & [data-kn-node][data-kn-solo="1"] [data-kn-mlist] { order: 1; flex: none !important; }
  & [data-kn-node][data-kn-solo="1"] [data-kn-mlist] > div > span:last-child { display: none !important; }
  & [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] { order: 2; flex: 1 1 0 !important; justify-content: flex-start !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; text-align: left !important; }
  & [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] > span { width: 100%; box-sizing: border-box; text-align: left !important; }
  & [data-kn-node][data-kn-solo="1"] [data-kn-nodetxt] > span:first-child { flex: none !important; }
  & [data-kn-node][data-kn-solo="1"] [data-kn-note] { order: 3; flex: 1 1 100% !important; }
  & [data-kn-head] > div { width: 54px !important; height: 54px !important; }
  & [data-kn-head] > div > div { width: 54px !important; height: 54px !important; }
  & [data-kn-head] > div:not(:first-child) { margin-left: -12px !important; }
  & [data-kn-nodetxt] { order: 1; flex: none !important; min-width: 0; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 2px 10px !important; text-align: left !important; }
  & [data-kn-nodetxt] span { white-space: normal !important; }
  & [data-kn-nodetxt] > span:first-child { font-size: 17px !important; flex: 1 1 100%; position: relative; padding-right: 22px; }
  & [data-kn-nodetxt] > span:first-child::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .5; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
  & [data-kn-node][data-kn-on="1"] [data-kn-nodetxt] > span:first-child::after { transform: translateY(-30%) rotate(-135deg); }
  & [data-kn-node] [data-kn-note] { position: static !important; order: 3; flex: none !important; width: auto !important; margin: 0 !important; padding: 0 0 0 40px !important;
    transform: none !important; background: none !important; align-items: flex-start !important; text-align: left !important; transition: opacity .25s !important; }
  & [data-kn-node][data-kn-on="0"] [data-kn-note] { display: none !important; }
  & [data-kn-node][data-kn-on="1"] [data-kn-note] { opacity: 1 !important; }
  & [data-kn-note] svg { display: none !important; }
  & [data-kn-note] span { font-family: Inter, system-ui, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--kinema-gray-300) !important; }
  & [data-screen-label="Crew"] a[href="#demo"] { margin-left: 0 !important; }

  /* ---- how it works v6: tap accordion ---- */
  & [data-kn-axis][data-v2-grid]::after { display: none !important; }
  & [data-screen-label] [data-v2-g2] { grid-template-columns: 1fr 1fr !important; }
  & [data-screen-label] [data-v2-g3] { grid-template-columns: repeat(3, 1fr) !important; }
  & [data-kn-howalso] > span { display: none !important; }
  & [data-kn-howalso] { justify-content: center !important; margin-top: 18px !important; }
  & [data-v2-grid]{margin:26px 0 0 !important;grid-template-columns:1fr !important;gap:10px !important}
  & [data-v2-grid] > div:first-child{display:none}
  & [data-v2-node]{flex-direction:row !important;flex-wrap:wrap;align-items:center !important;gap:10px 12px !important;padding:10px !important;border-radius:14px;background:rgba(17,24,39,0.55);box-shadow:0 0 0 1px rgba(255,255,255,0.06);cursor:pointer !important;transition:background .3s}
  & [data-v2-node][data-on="1"]{background:rgba(17,24,39,0.85)}
  & [data-v2-win]{width:104px !important;margin:0 !important;transform:none !important;flex:none;opacity:1 !important;order:1}
  & [data-v2-node][data-on="1"] [data-v2-win]{width:100% !important;order:2;box-shadow:0 0 0 1.5px rgba(139,92,246,.9), 0 20px 40px -20px rgba(124,58,237,.7)}
  & [data-v2-node][data-on="0"] [data-v2-win] > div:first-child > span:not(:first-child){display:none}
  & [data-v2-node] > div:not([data-v2-win]):not([data-v2-note]){flex:1;min-width:0;align-items:flex-start !important;text-align:left !important;order:2;position:relative;padding-right:22px}
  & [data-v2-node] > div:not([data-v2-win]):not([data-v2-note])::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.6;transition:transform .3s}
  & [data-v2-node][data-on="1"] > div:not([data-v2-win]):not([data-v2-note]){order:1;flex:1 1 100%}
  & [data-v2-node][data-on="1"] > div:not([data-v2-win]):not([data-v2-note])::after{transform:translateY(-30%) rotate(-135deg)}
  & [data-v2-note]{display:none !important}
  & [data-v2-plong]{display:none !important}
  & [data-v2-pshort]{display:block !important}
  & [data-v2-node][data-on="1"] > div:not([data-v2-win]):not([data-v2-note]) > span:nth-child(2){display:none}
  & [data-v2-note] svg{display:none !important}
  & [data-v2-role]{display:none !important}
  & [data-v2-grid][data-hv="1"] [data-v2-node][data-on="0"] [data-v2-win]{opacity:1 !important}
  & [data-v2-grid] + div{margin-top:24px !important;justify-content:flex-start !important}

  /* ---- roles ---- */
  & [data-kn-rolegrid] { grid-template-columns: 1fr !important; gap: 10px !important; }
  & [data-kn-role] { min-height: 0 !important; padding: 16px !important; }
  & [data-kn-role] > div:last-child, & [data-kn-role] > p { display: none !important; }
  & [data-kn-role] > div:nth-child(2) { margin: 10px 0 0 !important; align-items: center !important; }
  & [data-kn-role] h3 { font-size: 18px !important; }
  & [data-kn-role][data-kn-sel="0"] h3 { font-weight: 500 !important; }
  & [data-kn-role] svg { width: 36px !important; height: 36px !important; margin: 0 !important; }

  /* ---- use cases rail ---- */
  & #usecases { padding-left: 0 !important; padding-right: 0 !important; }
  & #usecases > div[style*="max-width"]:not([data-kn-ucrole]):not([data-kn-cs]) { padding: 0 16px !important; }
  & [data-kn-ucclaim] { display: none !important; }
  & #usecases > [data-kn-ucrole] { display: flex !important; margin: 14px 16px 0 !important; padding: 18px 16px 16px !important; gap: 12px !important; border-radius: 14px; background: rgba(31,41,55,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.07); }
  & #usecases > [data-kn-ucrole] h3 { font-size: 22px !important; margin-bottom: 2px !important; }
  & #usecases > [data-kn-cs] { padding: 26px 0 20px !important; }
  & [data-kn-uccta] { display: none !important; }
  & [data-uc-rail] { padding: 6px 16px 14px !important; scroll-padding-left: 16px !important; gap: 10px !important; }
  & [data-uc-rail] { scroll-padding-left: 16px !important; -webkit-overflow-scrolling: touch; }
  & [data-uc-rail] > [data-uc5] { width: auto !important; aspect-ratio: 9 / 16 !important; height: min(calc(100svh - 205px), calc((100vw - 84px) * 16 / 9)) !important; scroll-snap-stop: always !important; }
  & [data-uc-rail] > [data-uc5] h3 { font-size: 19px !important; }
  & [data-kn-railarrow] { display: none !important; }
  & [data-kn-cs] > div { display: flex !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 !important; padding: 0 16px !important; width: auto !important; scroll-padding-left: 16px; }
  & [data-kn-cs] > div::-webkit-scrollbar { display: none; }
  & [data-kn-cs] > div > a { flex: 0 0 76% !important; scroll-snap-align: start !important; min-height: 0 !important; }
  & [data-kn-cs] > div > a p { display: none !important; }

  /* ---- benefits: two columns, smaller icon ---- */
  & [data-screen-label="Benefits v5"] { padding-top: 36px !important; padding-bottom: 48px !important; }
  & [data-kn-bgrid] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  & [data-kn-bgrid] > div { aspect-ratio: 1 / 1.2 !important; }
  & [data-kn-bgrid] h3 { font-size: 14.5px !important; }
  & [data-kn-bgrid] svg[viewBox="0 0 24 24"] { width: 62px !important; height: 62px !important; }
  & [data-kn-bgrid] p { font-size: 12px !important; line-height: 1.4 !important; }
}