/* kwelio.com home as one film. One fixed stage of scenes behind the page; chapters scroll over it.
   The story runs from night (the dose at home, unseen) to daylight (the dose made visible).
   Type: Plus Jakarta Sans 300 in sentence case for headings; capitals only for short labels. */
.film { --f-ink: #F2EEE4; --f-text: rgba(242, 238, 228, .86); --f-muted: rgba(242, 238, 228, .66); --f-rule: rgba(242, 238, 228, .28);
  --f-dark: #0C0C0B; --f-ease: cubic-bezier(.16, 1, .3, 1); background: var(--f-dark); }
html[data-tone="light"] .film { --f-ink: #161614; --f-text: rgba(22, 22, 20, .84); --f-muted: rgba(22, 22, 20, .64); --f-rule: rgba(22, 22, 20, .24); }

/* ── stage ─────────────────────────────────────────────────────────────── */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--f-dark); }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--f-ease); }
.scene.is-on { opacity: 1; }
.scene[data-tone="light"] { background: #F3F1EC; }
.scene video, .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.07); transition: transform 7s var(--f-ease); }
.scene.is-on video, .scene.is-on img { transform: scale(1); }
.scene[data-scene="cloud"] video, .scene[data-scene="vision"] video { top: 16%; }  /* the frame is black above the tablet: lower it so the words sit on black */
@media (min-width: 900px) { .scene[data-scene="liobox"] video { left: 20%; } }
.scene[data-scene="score"] video, .scene[data-scene="uae"] video { object-position: 62% 50%; }
/* the veil keeps text legible over moving pictures; it follows where the active chapter's text sits */
.veil { position: absolute; inset: 0; pointer-events: none; transition: background .9s var(--f-ease);
  background: linear-gradient(180deg, rgba(8, 8, 7, .86) 0%, rgba(8, 8, 7, .72) 42%, rgba(8, 8, 7, .22) 72%, rgba(8, 8, 7, .4) 100%); }
html[data-pos="left"] .veil { background: linear-gradient(90deg, rgba(8, 8, 7, .84) 0%, rgba(8, 8, 7, .62) 38%, rgba(8, 8, 7, .12) 70%, rgba(8, 8, 7, .3) 100%); }
html[data-pos="right"] .veil { background: linear-gradient(270deg, rgba(8, 8, 7, .84) 0%, rgba(8, 8, 7, .62) 38%, rgba(8, 8, 7, .12) 70%, rgba(8, 8, 7, .3) 100%); }
html[data-tone="light"][data-pos="left"] .veil { background: linear-gradient(90deg, rgba(243, 241, 236, .94) 0%, rgba(243, 241, 236, .82) 40%, rgba(243, 241, 236, .1) 74%, rgba(243, 241, 236, 0) 100%); }
html[data-tone="light"][data-pos="right"] .veil { background: linear-gradient(270deg, rgba(243, 241, 236, .94) 0%, rgba(243, 241, 236, .82) 40%, rgba(243, 241, 236, .1) 74%, rgba(243, 241, 236, 0) 100%); }
@media (max-width: 899px) {
  html[data-pos] .veil { background: linear-gradient(180deg, rgba(8, 8, 7, .5) 0%, rgba(8, 8, 7, .78) 55%, rgba(8, 8, 7, .9) 100%) !important; }
  html[data-tone="light"][data-pos] .veil { background: linear-gradient(180deg, rgba(243, 241, 236, .4) 0%, rgba(243, 241, 236, .88) 50%, rgba(243, 241, 236, .96) 100%) !important; }
}

/* ── header over the film ──────────────────────────────────────────────── */
.film .top { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  transition: background-color .5s var(--f-ease), border-color .5s var(--f-ease); }
.film .top:not([data-tone]) .brand, .film .top:not([data-tone]) .primary-nav a, .film .top:not([data-tone]) .menu-btn { color: var(--f-ink); transition: color .5s var(--f-ease); }
.film .top:not([data-tone]) .primary-nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--f-ink); }
.film .top:not([data-tone]) .menu-btn { border-color: var(--f-rule); }
.film .top:not([data-tone]) .cta { background: var(--f-ink); color: var(--f-dark); border-color: var(--f-ink); }
html[data-tone="light"] .film .top:not([data-tone]) .cta { color: #F3F1EC; }
.film .top.solid:not([data-tone]) { background: var(--bg); border-bottom-color: var(--rule); }
.film .top.solid:not([data-tone]) .brand, .film .top.solid:not([data-tone]) .primary-nav a, .film .top.solid:not([data-tone]) .menu-btn { color: var(--ink); }
.film .top.solid:not([data-tone]) .menu-btn { border-color: var(--rule); }
.film .top.solid:not([data-tone]) .cta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.film.menu-open .top { background: var(--bg); border-bottom-color: var(--rule); }
body.film.menu-open .top::before { opacity: 0 !important; }
body.film.menu-open .top .brand, body.film.menu-open .top .menu-btn { color: var(--ink); border-color: var(--rule); }

/* ── chapters ──────────────────────────────────────────────────────────── */
.film main { position: relative; z-index: 1; }
.ch { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 0 var(--gutter); color: var(--f-text); }
.ch-in { position: relative; min-height: 100svh; width: 100%; max-width: var(--max); margin-inline: auto; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 1.1rem; padding: calc(var(--head-h) + 2rem) 0 5.5rem; }
.ch-in > * { max-width: 34rem; }
.ch-hero .ch-in { justify-content: flex-start; padding-top: calc(var(--head-h) + 9svh); }
@media (min-width: 900px) {
  .ch { min-height: 150svh; }
  .ch-hero { min-height: 100svh; }
  .ch-in { position: sticky; top: 0; height: 100svh; min-height: 0; justify-content: center; gap: 1.15rem; padding: calc(var(--head-h) + 2rem) 0 4.5rem; }
  .ch[data-pos="right"] .ch-in { align-items: flex-end; }
  .ch[data-pos="right"] .ch-in > * { width: 100%; }
  .ch[data-pos="top"] .ch-in { justify-content: flex-start; padding-top: calc(var(--head-h) + 12svh); }
  .ch-hero .ch-in { padding-top: calc(var(--head-h) + 14svh); }
}
.ch-k { display: flex; align-items: center; gap: .75rem; color: var(--f-muted); }
.ch-k .ch-n { color: var(--f-ink); font-variant-numeric: tabular-nums; }
.ch-k .ch-rule { width: 2.5rem; height: 1px; background: var(--f-rule); }
.ch-k .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ch-h1, .ch-h { color: var(--f-ink); font-weight: 300; letter-spacing: -.012em; }
.ch-h1 { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.1rem); line-height: 1.16; max-width: 20ch !important; }
.ch-h { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.35rem); line-height: 1.22; }
.film .ch .hl { box-shadow: none; color: var(--lime); }
html[data-tone="light"] .film .ch .hl { color: inherit; box-shadow: inset 0 -.14em 0 var(--lime); }
.ch-p { font-size: 1rem; line-height: 1.7; color: var(--f-text); }
.ch-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; margin-top: .6rem; }
.film .ch .btn { background: var(--f-ink); color: var(--f-dark); border-color: var(--f-ink); }
html[data-tone="light"] .film .ch .btn { color: #F3F1EC; }
.film .ch .btn:hover { background: transparent; color: var(--f-ink); }
.ch-go { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; color: var(--f-ink); text-decoration: none; font-size: .72rem;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ch-go .ring { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--f-rule);
  transition: background-color .3s var(--f-ease), border-color .3s var(--f-ease), color .3s var(--f-ease); }
.ch-go .ring svg { width: 14px; height: 14px; }
.ch-go:hover .ring, .ch-go:focus-visible .ring { background: var(--f-ink); color: var(--f-dark); border-color: var(--f-ink); }
html[data-tone="light"] .ch-go:hover .ring { color: #F3F1EC; }
.film .ch a:focus-visible, .film .rail a:focus-visible, .motion-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }

/* scroll cue: a still hairline that draws once, then rests */
.cue { position: absolute; left: var(--gutter); bottom: 1.6rem; display: flex; align-items: center; gap: .8rem; color: var(--f-muted); margin: 0; }
.cue-line { width: 1px; height: 2.4rem; background: var(--f-rule); transform-origin: top; }
.fx .cue-line { animation: cue 1.6s var(--f-ease) .9s both; }
@keyframes cue { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (min-width: 1280px) { .cue { left: calc((100vw - var(--max)) / 2 + var(--gutter)); } }

/* chapter text arrives when its scene does */
.fx .ch-in > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--f-ease), transform 1.1s var(--f-ease); }
.fx .ch.is-on .ch-in > * { opacity: 1; transform: none; }
.fx .ch.is-on .ch-in > :nth-child(2) { transition-delay: .08s; }
.fx .ch.is-on .ch-in > :nth-child(3) { transition-delay: .16s; }
.fx .ch.is-on .ch-in > :nth-child(4) { transition-delay: .24s; }

/* the app, held in the room it is used in */
.ch-device { position: relative; padding: 0 0 4rem; }
.ch-device figure.demo { margin-inline: auto; }
.ch-device .demo figcaption { color: var(--f-muted); }
.ch-device .vctl button { color: var(--f-ink); }
@media (min-width: 900px) {
  .ch-device { position: absolute; inset: 0; padding: 0; pointer-events: none; }
  .ch-device figure.demo { pointer-events: auto; position: sticky; top: calc(var(--head-h) + 8svh); margin-left: auto;
    margin-right: max(0px, calc((100vw - var(--max)) / 2 + 6vw)); width: min(290px, 25vw); }
}
/* a proven idea, as a quiet timeline */
.ch-time { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--f-rule); margin-top: .4rem; }
.ch-time li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .2rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--f-rule); font-size: .95rem; line-height: 1.55; }
.ch-time .yr { grid-row: span 2; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-muted); padding-top: .2rem; }
.ch-time b { color: var(--f-ink); font-weight: 700; }
.ch-time cite { font-style: normal; white-space: nowrap; }
.ch-time cite a { color: inherit; text-underline-offset: 3px; }
.ch-time .now b { box-shadow: inset 0 -.18em 0 var(--lime); }

/* chapter rail */
.rail { position: fixed; right: 1.1rem; top: 50%; transform: translateY(-50%); z-index: 20; display: none; }
.rail ol { list-style: none; display: grid; gap: .35rem; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; min-height: 28px; color: var(--f-muted); text-decoration: none;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.rail a { position: relative; }
.rail .t { position: absolute; right: calc(100% + .6rem); opacity: 0; transform: translateX(6px); transition: opacity .3s var(--f-ease), transform .3s var(--f-ease); white-space: nowrap; pointer-events: none; }
.rail .n { width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; position: relative; }
.rail .n::after { content: ''; position: absolute; right: -0.9rem; top: 50%; width: .45rem; height: 1px; background: currentColor; transition: width .3s var(--f-ease); }
.rail a:hover .t, .rail a:focus-visible .t { opacity: 1; transform: none; }
.rail a[aria-current] { color: var(--f-ink); }
.rail a[aria-current] .n { color: var(--f-ink); }
.rail a[aria-current] .n::after { width: .9rem; height: 2px; background: var(--lime); }
.rail ol { padding-right: 1rem; }
@media (min-width: 1100px) { .rail { display: block; } }
html.past-film .rail { opacity: 0; visibility: hidden; }

/* pause motion: every video on the page stops, and stays stopped */
.motion-btn { position: fixed; right: calc(max(1rem, env(safe-area-inset-right)) + 58px); bottom: max(1.1rem, calc(env(safe-area-inset-bottom) + 5px)); z-index: 20; min-height: 36px; padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid var(--f-rule); background: rgba(12, 12, 11, .35); color: var(--f-ink); font: inherit; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .4s; }
html[data-tone="light"] .motion-btn { background: rgba(243, 241, 236, .5); }
html.past-film .motion-btn, html.film-leaving .motion-btn { opacity: 0; visibility: hidden; }

/* after the film: the ordinary page, on its own ground */
.after { position: relative; z-index: 2; background: var(--bg); color: var(--text); }
.film .site-foot { position: relative; z-index: 2; }
.h-quiet { font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); line-height: 1.22; max-width: 26ch; }
.pindex { list-style: none; border-top: 1px solid var(--rule); }
.pindex a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1.5rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; }
.pindex .pi-t { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); font-weight: 300; letter-spacing: -.01em; }
.pindex .pi-s { grid-column: 2; grid-row: 1; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pindex .pi-d { grid-column: 1; color: var(--text); font-size: .95rem; }
.pindex .pi-go { grid-column: 2; grid-row: 2; justify-self: end; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--rule); transition: background-color .3s var(--f-ease), color .3s var(--f-ease); }
.pindex .pi-go svg { width: 14px; height: 14px; }
.pindex a:hover .pi-go, .pindex a:focus-visible .pi-go { background: var(--ink); color: var(--bg); }
@media (min-width: 900px) {
  .pindex a { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto auto; align-items: center; }
  .pindex .pi-t, .pindex .pi-d, .pindex .pi-s, .pindex .pi-go { grid-row: 1; }
  .pindex .pi-t { grid-column: 1; } .pindex .pi-d { grid-column: 2; } .pindex .pi-s { grid-column: 3; } .pindex .pi-go { grid-column: 4; }
}

/* reduced motion: stills, no drift, no fades */
@media (prefers-reduced-motion: reduce) {
  .scene, .scene video, .scene img, .veil { transition: none !important; transform: none !important; }
}
.no-motion .scene video, .no-motion .scene img { transform: none; transition: none; }
@media (prefers-reduced-transparency: reduce) {
  .motion-btn { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--f-dark); }
}

/* a soft shade behind the header, in the scene's tone, so text scrolling under it never collides with the nav */
.film .top::before { content: ''; position: absolute; inset: 0 0 -60% 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--f-ease);
  background: linear-gradient(180deg, rgba(10, 10, 9, .82) 0%, rgba(10, 10, 9, .5) 55%, rgba(10, 10, 9, 0) 100%); }
html[data-tone="light"] .film .top::before { background: linear-gradient(180deg, rgba(243, 241, 236, .92) 0%, rgba(243, 241, 236, .6) 55%, rgba(243, 241, 236, 0) 100%); }
html.scrolled .film .top::before { opacity: 1; }
.film .top.solid::before { opacity: 0 !important; }
@media (min-width: 1100px) { .ch[data-pos="right"] .ch-in { padding-right: 4.5rem; } }

/* draft 2: the home page's own sections follow the film, in the film's quieter type, alternating grounds */
.after .sec { background: var(--bg); }
.after .sec:nth-of-type(even) { background: var(--bg-2); }
.after .sec.night { background: var(--night); color: var(--night-text); }
.after .sec.night h2 { color: var(--night-ink); }
.after h2 { font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); line-height: 1.22; }
.after .stories-close strong { font-weight: 300; letter-spacing: -.01em; }
.after .footnote .n, .after .callout .n { font-weight: 300; }

/* numbers that carry the argument, and lines that must not be missed */
.ch-figs { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: .4rem; }
.ch-figs li { flex: 1 1 11rem; max-width: 16rem; display: grid; gap: .45rem; padding-top: .8rem; border-top: 2px solid var(--lime); }
.fig-n { color: var(--f-ink); font-weight: 300; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-n small { font-size: .45em; margin-left: .08em; letter-spacing: 0; }
.fig-c { color: var(--f-muted); font-size: .85rem; line-height: 1.45; }
.fig-c cite { display: block; margin-top: .2rem; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ch-note { color: var(--f-ink); font-weight: 600; font-size: .98rem; line-height: 1.5; padding: .15rem 0 .15rem 1rem; border-left: 2px solid var(--lime); }
.ch-p b { color: var(--f-ink); font-weight: 700; }
.ch-partner { display: flex; align-items: center; gap: 1rem; margin-top: .2rem; }
.ch-partner .label { color: var(--f-muted); }
.ch-partner img { height: 46px; width: auto; filter: brightness(0) invert(.95); }
html[data-tone="light"] .ch-partner img { filter: none; }

/* ── the home story after the film (draft 4, 6 Oct 2026) ──────────────────────────── */
.ch-aside { font-size: .8rem; color: var(--f-muted, rgba(242, 238, 228, .7)); }
.ch-h .q { display: block; text-transform: none; letter-spacing: -.005em; font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); line-height: 1.12; max-width: 20ch; }
#ch-belief .ch-in { max-width: 62rem; }
.sx-note { margin-top: 1.2rem; max-width: 44ch; color: inherit; }
.sx-dark .ch-note { color: #F2EEE4; }
.sx-copy .ch-links { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.after .sx-copy .ch-go, .after .ch-links .ch-go { color: var(--ink); }
.sx-dark .ch-go { color: #F2EEE4; }
.big-who { padding-top: clamp(4rem, 9vw, 7rem); }
.big-who .sec-head p { max-width: 44ch; }
.who-grid { list-style: none; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 2.4rem 0 3rem; border-top: 1px solid var(--night-rule); }
.who-grid li { padding: 1.4rem 1.6rem 1.6rem 0; border-bottom: 1px solid var(--night-rule); }
.who-grid h3 { font-size: 1.02rem; font-weight: 700; color: var(--night-ink); }
.who-grid p { margin-top: .45rem; color: var(--night-text); font-size: .95rem; line-height: 1.55; max-width: 38ch; }
.big-who .sx-figs { width: 100%; }
.big-who .sx-figs .c { color: var(--night-muted); }
.founders-brief .fb-grid { display: grid; gap: 2rem 3.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 2rem 0 1.6rem; }
.founders-brief blockquote { border-left: 2px solid var(--lime); padding-left: 1.2rem; }
.founders-brief blockquote p { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.55; color: var(--ink); }
.founders-brief footer { margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.founders-brief footer b { color: var(--ink); }
.next-grid { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .next-grid { grid-template-columns: 1.1fr 1fr; } }
.next-lio .ch-partner { margin-top: 1.4rem; }
.next-lio .h-quiet .lio-mark { color: var(--ink); }
 :root[data-theme="dark"] .next-lio .ch-partner img { filter: brightness(0) invert(.94); } 
.film .top[data-tone] { background: var(--head-bg, var(--bg)); }
.film .top[data-tone]::before { opacity: 0 !important; }
.after .sec.band { background: var(--band); color: var(--band-ink); }
.next-lio .ch-partner .label { color: var(--muted); }
/* Sara herself in chapter 01, on Liquid Glass beside the film */
.ch-sara { display: none; }
@media (min-width: 900px) {
  .ch-sara { display: block; position: absolute; right: max(4vw, calc((100vw - 1280px) / 2)); top: 50%; width: min(30vw, 420px); transform: translateY(-46%);
    opacity: 0; transition: opacity .8s var(--f-ease), transform 1s var(--f-ease); pointer-events: none; }
  .ch.is-on .ch-sara, html:not(.fx) .ch-sara { opacity: 1; transform: translateY(-50%); }
  .ch-sara .sara-stage { position: relative; }
}
.who-i { width: 34px; height: 34px; color: var(--lime); margin-bottom: .8rem; display: block; }
.ch-how { margin-top: .2rem; }
.ch-howbtn { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--f-rule, var(--rule)); background: transparent; color: var(--f-ink, var(--ink)); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.ch-howbtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ch-howbtn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.how-steps { list-style: none; padding: 0 !important; margin-top: 1.2rem; display: grid; gap: 0 !important; border-top: 1px solid var(--rule); }
.how-steps li { display: grid; gap: .35rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.how-steps b { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.how-steps span { color: var(--text); line-height: 1.6; }
.how-steps a, .how-ctx a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.how-ctx { font-size: .92rem; }

/* 10 · What's next: the 3D printer in the background, the LioBox prototype turning in a box over it,
   slightly see-through so the printing shows behind. Text sits on the darkest side of the scrim. */
.after .sec.next-lio { position: relative; overflow: hidden; isolation: isolate; background: #0C0C0B; color: #DAD6CB; }
.next-lio .next-bg { position: absolute; inset: 0; margin: 0; border-radius: 0; background: #0C0C0B; overflow: hidden; }
.next-lio .next-bg video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.next-lio .next-bg::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(12, 12, 11, .5) 0%, rgba(12, 12, 11, .7) 45%, rgba(12, 12, 11, .9) 100%); }
.next-lio .next-bg .vb-toggle { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; top: auto; left: auto; }
.next-lio .next-grid { position: relative; z-index: 1; }
.next-lio .next-media .phero-media { opacity: .87; background: transparent; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(242, 238, 228, .16); }
.next-lio .next-media .phero-media .vb-toggle { opacity: 1; }
.next-lio h2, .next-lio .h-quiet .lio-mark { color: #F2EEE4; }
.next-lio .kicker { color: rgba(242, 238, 228, .72); }
.next-lio .ch-partner img { filter: brightness(0) invert(.94); }
.after .sec.next-lio .ch-partner .label { color: rgba(242, 238, 228, .72); }
.next-lio .ch-links a { color: #F2EEE4; }
@media (max-width: 899px) { .next-lio .next-bg::after { background: rgba(12, 12, 11, .78); } }
@media (prefers-reduced-transparency: reduce) { .next-lio .next-media .phero-media { opacity: 1; } }

/* ── the payer's side: Mohamad Ataya's words over the deck's operating-theatre photo ─────── */
.after .sec.q-payer { position: relative; overflow: hidden; isolation: isolate; background: #14120E; color: #E9E2D6; padding-block: clamp(5rem, 12vw, 9rem); }
.q-payer .q-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.q-payer .q-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; display: block; }
.q-payer .q-bg::after { content: ""; position: absolute; inset: 0; }
.q-grid { display: grid; gap: 2.4rem; align-items: center; }
.after .q-h { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.015em; color: #F2EEE4; max-width: 15ch; }
/* The quote is set like the founders' quotes: on the ground itself, with the lime rule, no box. */
.q-quote { margin: 0; max-width: 34rem; border-left: 2px solid var(--lime); padding-left: clamp(1.1rem, 2vw, 1.5rem); }
.q-quote blockquote { margin: 0; font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem); line-height: 1.5; color: #EEE8DC; }
.q-quote blockquote p + p { margin-top: .7rem; }
.q-quote blockquote b { font-weight: 700; color: #F7F3EA; }
.q-quote figcaption { margin-top: 1rem; font-size: .9rem; color: rgba(242, 238, 228, .82); }
.q-quote figcaption b { font-weight: 700; color: #F2EEE4; }
/* Desktop: the photo is flipped so the team stands on the left, in view, and the statement sits with
   them, low on the left over the gowns. The quote sits on the right over the doorway. The photo is
   darkened only under the words. */
@media (min-width: 960px) {
  .after .sec.q-payer { min-height: min(62vw, 900px, 100svh); display: flex; flex-direction: column; padding-block: clamp(3.5rem, 6vw, 5.5rem); }
  .q-grid { flex: 1; grid-template-columns: 1.1fr .9fr; align-items: stretch; column-gap: clamp(2rem, 6vw, 6rem); }
  .after .q-h { grid-column: 1; grid-row: 1; align-self: end; }
  .q-quote { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .q-payer .q-bg img { scale: -1 1; object-position: 62% 38%; }
  .q-payer .q-bg::after { background:
      linear-gradient(0deg, rgba(20, 18, 14, .92) 0%, rgba(20, 18, 14, .72) 22%, rgba(20, 18, 14, .32) 38%, rgba(20, 18, 14, 0) 52%),
      linear-gradient(270deg, rgba(20, 18, 14, .72) 0%, rgba(20, 18, 14, .5) 34%, rgba(20, 18, 14, 0) 56%); }
}
/* Phone: the photo, flipped the same way, is a picture at the top; the words follow on the dark ground. */
@media (max-width: 959px) {
  .after .sec.q-payer { padding-top: calc(min(96vw, 600px) - 2.5rem); }
  .q-payer .q-bg { inset: 0 0 auto 0; height: min(96vw, 600px); }
  .q-payer .q-bg img { scale: -1 1; object-position: 80% 40%; }
  .q-payer .q-bg::after { background: linear-gradient(180deg, rgba(20, 18, 14, .05) 0%, rgba(20, 18, 14, .12) 55%, rgba(20, 18, 14, .75) 85%, #14120E 100%); }
}

/* ── 07 · their screen: a sample Kwelix view. Glass only on the controls; content on opaque cards ── */
.kxs { --sec: clamp(2.5rem, min(8vw, 6svh), 5rem); }
.kxs-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 980px) {
  .kxs-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 1.25rem; }
  .kxs-head .sx-p { margin-top: 0; }
}
.kxs-win { position: relative; isolation: isolate; border-radius: 28px; overflow: hidden; padding: 14px; background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--rule), 0 40px 90px -50px rgba(20, 18, 10, .55); }
.kxs-field { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 55% at 12% 8%, rgba(214, 227, 0, .28), transparent 70%), radial-gradient(45% 60% at 92% 18%, rgba(120, 160, 110, .26), transparent 70%),
              radial-gradient(60% 60% at 60% 110%, rgba(214, 200, 160, .35), transparent 70%), var(--bg-2); }
.kxs-top { display: flex; align-items: center; gap: 1rem; padding: 8px 10px 8px 16px; border-radius: 999px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--card) 55%, transparent); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px var(--rule), 0 10px 26px -18px rgba(0, 0, 0, .4); }
.kxs-logo { font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.kxs-seg { margin-inline: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: .8rem; font-weight: 600; }
.kxs-seg span { padding: .38rem .9rem; border-radius: 999px; color: var(--muted); }
.kxs-seg .on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .6); }
.kxs-demo { font-size: .72rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, #4C6FB2 16%, transparent); color: var(--ink); white-space: nowrap; }
.kxs-body { display: grid; gap: 14px; }
@media (min-width: 980px) { .kxs-body { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); } }
.kxs-col { display: grid; gap: 14px; align-content: start; }
.kxs-card { background: var(--card); border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: 0 0 0 1px var(--rule); }
.kxs-h { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin-bottom: .7rem; }
.kxs-h span { color: var(--muted); font-weight: 600; letter-spacing: .06em; margin-left: .4rem; }
.kxs-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kxs-sum b { display: block; font-size: 1.6rem; font-weight: 300; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kxs-sum small { font-size: .74rem; color: var(--muted); }
.kq { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kq-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem .7rem; border-radius: 14px; }
.kq-line { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.kq-row.on { background: color-mix(in srgb, var(--lime) 26%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 60%, transparent); }
.kq-kis { width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.kq-row.on .kq-kis { background: var(--ink); color: var(--bg); }
.kq-kis b { font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; } .kq-kis small { font-size: .56rem; letter-spacing: .1em; opacity: .7; }
.kq-who b { font-size: .92rem; color: var(--ink); }
.kq-why { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.kq-why i { font-style: normal; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--text); }
.kq-kas { text-align: right; font-size: .76rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kq-kas small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.kxs-member { display: grid; gap: 1rem; align-content: start; }
.km-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.km-name { font-size: 1.5rem; font-weight: 300; color: var(--ink); }
.km-meta { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.km-flag { flex: none; font-size: .74rem; font-weight: 700; padding: .4rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--lime) 40%, transparent); color: var(--ink); }
.km-scores { display: grid; gap: 14px; }
@media (min-width: 640px) { .km-scores { grid-template-columns: 1.3fr 1fr; } }
.km-score { padding: .9rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.km-big { font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.km-big small { font-size: .9rem; font-weight: 600; color: var(--muted); margin-left: .4rem; }
.km-score .kx-chart { margin-top: .4rem; }
.km-lc { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .76rem; color: var(--text); }
.km-lc li { display: grid; gap: .3rem; }
.kp-bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.kp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.kp { list-style: none; margin: -.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.kp li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 3rem; gap: .9rem; align-items: center; }
.kp-l b { display: block; font-size: .85rem; color: var(--ink); } .kp-l small { font-size: .72rem; color: var(--muted); }
.kp-v { text-align: right; font-weight: 700; font-size: .85rem; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 980px) {
  .kp { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0; }
  .kp li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: .45rem .5rem; align-items: start; }
  .kp li .kp-l { grid-area: l; } .kp li .kp-v { grid-area: v; } .kp li .kp-bar { grid-area: b; }
}
/* shorter laptop screens: the sample shows a little less, so the whole section stays one screen tall */
@media (min-width: 980px) and (max-height: 950px) { .kq-row:nth-child(n+5) { display: none; } }
@media (min-width: 980px) and (max-height: 870px) { .kxs-sum { display: none; } }
@media (min-width: 980px) and (max-height: 890px) {
  .kp-l small, .km-meta { display: none; }
  .kxs-member { gap: .8rem; } .kxs-sum b { font-size: 1.35rem; }
}
@media (min-width: 980px) and (max-height: 830px) { .km-why { display: none; } }
.km-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--rule); }
.km-share { font-size: .8rem; color: var(--text); max-width: 46ch; flex: 1 1 22rem; } .km-share b { color: var(--ink); }
.km-acts { display: flex; gap: .5rem; }
.km-btn { font-size: .8rem; font-weight: 700; padding: .55rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
.km-btn.pri { background: var(--ink); color: var(--bg); box-shadow: none; }
.kxs-note { margin-top: .9rem; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
@media (max-width: 640px) { .kxs-seg span:not(.on) { display: none; } .kxs-top { gap: .5rem; } .kp li { grid-template-columns: 1fr 2.6rem; } .kp li .kp-bar { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-transparency: reduce) { .kxs-top { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.kxs-note .ch-go { color: var(--ink); }
.kxs-note .ch-go .ring { border-color: var(--rule); color: var(--ink); }

/* Sara: a small portrait beside her chapter, not a large cut-out (Sumi, 6 Oct 2026) */
.sara-id { display: flex; align-items: center; gap: .85rem; margin: .1rem 0 1.1rem; }
.sara-id img { width: clamp(52px, 4.6vw, 68px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px var(--lime), 0 10px 24px -10px rgba(0, 0, 0, .5); }
.sara-id p { display: grid; gap: .1rem; line-height: 1.25; }
.sara-id b { font-size: 1rem; font-weight: 700; color: var(--f-ink, var(--ink)); }
.sara-id span { font-size: .8rem; color: var(--f-muted, var(--muted)); }


/* phones: one calm type scale (Sumi, 6 Oct 2026); film.css loads last, so its own caps live here */
@media (max-width: 600px) {
  .ch-h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 1.85rem); }
  .ch-h { font-size: clamp(1.32rem, 1.05rem + 1.4vw, 1.55rem); }
  .ch-h .q { font-size: clamp(1.45rem, 1.1rem + 1.8vw, 1.65rem); }
  .fig-n { font-size: 1.85rem; }
  .after h2, .after .q-h { font-size: clamp(1.32rem, 1.05rem + 1.4vw, 1.55rem); }
  .ch-p { font-size: 1rem; }
}
/* the ecosystem's six cards: a row to swipe on phones, so the section stays one screen */
.who-grid { margin: clamp(1.2rem, 3svh, 2rem) 0 0; }
@media (max-width: 700px) {
  .who-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .4rem; scroll-padding: 0 var(--gutter); border-top: 0; scrollbar-width: none; }
  .who-grid::-webkit-scrollbar { display: none; }
  .who-grid li { scroll-snap-align: start; padding: 1.1rem 1.1rem 1.2rem; border: 1px solid var(--night-rule); border-radius: 16px; }
}
/* legibility floor (6 Oct 2026 audit) */
.rail a { font-size: .74rem; letter-spacing: .12em; }
.motion-btn { font-size: .74rem; letter-spacing: .12em; }
.kq-kis { width: 50px; height: 50px; } .kq-kis small { font-size: .72rem; letter-spacing: .06em; }
@media (max-width: 640px) { .km-name { font-size: 1.2rem; } .km-big { font-size: 2rem; } }
.cue { color: #F2EEE4; text-shadow: 0 1px 10px rgba(0, 0, 0, .65); }
.cue { padding: .35rem .8rem .35rem .45rem; border-radius: 999px; background: rgba(12, 12, 11, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kq-row.on .kq-kas small { color: var(--text); }
/* the bigger picture on shorter laptop screens: the six audiences in one row, so the section fits one screen */
@media (min-width: 1100px) and (max-height: 820px) {
  .who-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 1.5rem 0 1.5rem; }
  .who-grid li { padding: 1.1rem 1.1rem 1.2rem 0; }
  .who-grid p { font-size: .88rem; line-height: 1.5; }
  .big-who { padding-top: clamp(3rem, 7svh, 5rem); }
}
/* What's next over its dark film: the link and the partner logo in light (Sumi, 6 Oct 2026) */
.after [data-tone="dark"] .ch-links .ch-go { color: #F2EEE4; }
.after [data-tone="dark"] .ch-go .ring { border-color: rgba(242, 238, 228, .45); color: #F2EEE4; }
.after [data-tone="dark"] .ch-go:hover .ring, .after [data-tone="dark"] .ch-go:focus-visible .ring { background: #F2EEE4; color: #0C0C0B; border-color: #F2EEE4; }
.after .sec.next-lio .ch-partner img { filter: brightness(0) invert(.95); }
/* An ecosystem, not an app: one full screen; its topics are in the floating bar, which stays up while the
   section is on screen (Sumi, 6 Oct 2026) */
.big-who { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.big-who > .wrap { width: 100%; }
.big-who { padding-bottom: calc(var(--sec) + 4.5rem); }

/* Pause motion: on wide screens a labelled pill; its icons only show on phones */
.motion-btn svg { display: none; width: 18px; height: 18px; fill: currentColor; }
/* phones: a round button stacked above the theme button on the right, clear of the carousel controls and the
   'Scroll to discover' cue in the middle and on the left; its words stay for screen readers */
@media (max-width: 760px) {
  .motion-btn { right: max(1rem, env(safe-area-inset-right)); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 56px); width: 46px; height: 46px; min-height: 0;
    padding: 0; display: grid; place-items: center; letter-spacing: 0; }
  .motion-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .motion-btn[aria-pressed="false"] .mb-pause, .motion-btn[aria-pressed="true"] .mb-play { display: block; }
  html.bar-in .motion-btn { bottom: calc(max(2.25rem, 5.5svh, calc(env(safe-area-inset-bottom) + 1rem)) + 62px + 56px); }
}

/* ── The award in the hero: a frosted glass card (Create Apps Championship 2026, Sumi 7 and 8 Oct 2026).
   Glass over the film: blur and saturate what is behind, a bright rim lit from the top left, a dark tint
   heavy enough that the words read over the brightest frame. Opaque when transparency is reduced. ── */
.hero-award { align-self: flex-start; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
  width: min(100%, 25rem); padding: .6rem .8rem .6rem .6rem; border-radius: 18px; color: #F2EEE4; text-decoration: none; position: relative; isolation: isolate;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 42%), rgba(14, 14, 13, .46);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 14px 40px -12px rgba(0, 0, 0, .55);
  transition: transform .35s var(--f-ease), box-shadow .35s var(--f-ease); }
.hero-award::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .08) 38%, rgba(214, 227, 0, .35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ha-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #1C1C19; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ha-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.ha-txt { display: grid; gap: .1rem; min-width: 0; }
.ha-k { color: #D6E300; font-size: .62rem; letter-spacing: .08em; }
.ha-t { font-weight: 700; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.ha-s { color: rgba(242, 238, 228, .78); font-size: .85rem; line-height: 1.3; }
.ha-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(242, 238, 228, .12); }
.ha-go svg { width: 16px; height: 16px; transition: transform .3s var(--f-ease); }
.hero-award:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 18px 46px -12px rgba(0, 0, 0, .6); }
.hero-award:hover .ha-go { background: #D6E300; color: #1A1A1A; }
.hero-award:hover .ha-go svg { transform: translateX(2px); }
.hero-award:focus-visible { outline: 2px solid #D6E300; outline-offset: 3px; }
html[data-tone="light"] .film .hero-award { color: #161614; background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35) 45%), rgba(245, 241, 233, .55); }
html[data-tone="light"] .film .ha-k { color: #4A5200; }
html[data-tone="light"] .film .ha-s { color: rgba(22, 22, 20, .72); }
html[data-tone="light"] .film .ha-go { background: rgba(22, 22, 20, .08); }
@media (min-width: 1100px) {
  .ch-hero .hero-award { position: absolute; right: 0; bottom: 4.5rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-award { background: #161614; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-tone="light"] .film .hero-award { background: #F5F1E9; }
}
@media (prefers-reduced-motion: reduce) { .hero-award, .ha-go svg { transition: none; } .hero-award:hover { transform: none; } }

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }