/* Kwelio story components (story.js). Each one has a finished, static state that shows without
   script and under reduced motion; html.sx-on switches on the scroll-linked versions. */
:root { --sx-ease: cubic-bezier(.16, 1, .3, 1); --phone-r: 44px; }

.sx { position: relative; }
.sx-pin { position: relative; }
.sx-copy, .sx-over { opacity: 1; }
.sx video, .sx canvas { display: block; }
.sx .label { letter-spacing: .14em; }
.sx-k { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--muted); }
.sx-k::before { content: ''; width: 2rem; height: 1px; background: currentColor; opacity: .6; }
.sx-h { font-weight: 300; letter-spacing: -.012em; line-height: 1.12; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); max-width: 18ch; }
.sx-p { margin-top: 1.1rem; max-width: 46ch; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; color: var(--text); }
.sx-dark { background: #0C0C0B; color: #F2EEE4; --text: rgba(242, 238, 228, .82); --muted: rgba(242, 238, 228, .62); --ink: #F2EEE4; --rule: rgba(242, 238, 228, .16); }
.sx-dark .hl { color: var(--lime); box-shadow: none; }

/* phone frame */
.sx-phone { position: relative; width: var(--pw, min(300px, 64vw)); aspect-ratio: 9 / 19.5; }
.sx-frame { position: absolute; inset: -11px; border-radius: calc(var(--phone-r) + 11px); background: #0E0E0D;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 0 0 1.5px rgba(0, 0, 0, .5); }
.sx-frame::after { content: ''; position: absolute; top: 20px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #0E0E0D; z-index: 3; }
.sx-slot { position: absolute; inset: 0; border-radius: var(--phone-r); overflow: hidden; background: #0E0E0D; }
.sx-slot img, .sx-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-demo { position: absolute; left: 50%; bottom: -1.9rem; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ── shrink: the film settles into the phone ─────────────────────────────────────── */
.sx-shrink .sx-media { display: none; }
.sx-shrink .sx-layout { display: grid; gap: 3rem; align-items: center; justify-items: center; padding: clamp(4rem, 9vw, 7rem) var(--gutter); max-width: var(--max); margin: 0 auto; }
@media (min-width: 900px) { .sx-shrink .sx-layout { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; } }
.sx-shrink .sx-phone { --pw: min(300px, 62vw); }
.sx-intro { display: none; }
html.sx-on .sx-shrink.sx-live { height: 330vh; }
html.sx-on .sx-shrink.sx-live .sx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.sx-on .sx-shrink.sx-live .sx-media { display: block; position: absolute; inset: 0; z-index: 1; transform-origin: 50% 50%; will-change: transform, clip-path; background: #0C0C0B; }
html.sx-on .sx-shrink.sx-live .sx-media video { width: 100%; height: 100%; object-fit: cover; }
html.sx-on .sx-shrink.sx-live .sx-layout { position: relative; height: 100%; padding-block: calc(var(--head-h) + 1.5rem) 3rem; }
html.sx-on .sx-shrink.sx-live .sx-phone { --pw: min(300px, 62vw, calc((100svh - var(--head-h) - 9rem) * 9 / 19.5)); }
html.sx-on .sx-shrink.sx-live .sx-frame { opacity: var(--sx-frame, 0); transform: scale(calc(1.06 - .06 * var(--sx-frame, 0))); transition: none; }
html.sx-on .sx-shrink.sx-live .sx-slot { background: transparent; z-index: 2; }
html.sx-on .sx-shrink.sx-live .sx-slot .sx-screen { opacity: var(--sx-screen, 0); }
/* once the app's screen has arrived, the film behind it steps out of the way */
html.sx-on .sx-shrink.sx-live .sx-media { opacity: calc(1 - var(--sx-screen, 0) * .999); }
html.sx-on .sx-shrink.sx-live .sx-copy { opacity: var(--sx-copy, 0); transform: translateY(calc((1 - var(--sx-copy, 0)) * 24px)); }
html.sx-on .sx-shrink.sx-live .sx-demo { opacity: var(--sx-screen, 0); }
html.sx-on .sx-shrink.sx-live .sx-intro { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 12vh; text-align: center; padding: 0 var(--gutter);
  color: #F2EEE4; opacity: var(--sx-intro, 1); text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.sx-intro b { display: block; font-weight: 300; letter-spacing: -.015em; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.2rem); line-height: 1.12; }
.sx-intro span { display: block; margin-top: .8rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
@media (max-width: 899px) {
  html.sx-on .sx-shrink.sx-live .sx-layout { grid-template-rows: auto 1fr; align-content: start; gap: 3rem; }
  html.sx-on .sx-shrink.sx-live .sx-copy { order: 2; text-align: left; }
  html.sx-on .sx-shrink.sx-live .sx-phone { order: 1; --pw: min(220px, 56vw, calc((100svh - var(--head-h) - 16rem) * 9 / 19.5)); }
  html.sx-on .sx-shrink.sx-live .sx-h { font-size: clamp(1.35rem, 5.4vw, 1.8rem); }
  html.sx-on .sx-shrink.sx-live .sx-p { font-size: .95rem; margin-top: .6rem; }
}

/* ── grow: the framed film opens to the whole screen ─────────────────────────────── */
.sx-grow .sx-pin { min-height: 80vh; display: grid; }
.sx-grow .sx-media { grid-area: 1 / 1; position: relative; min-height: 80vh; overflow: hidden; background: #0C0C0B; }
.sx-grow .sx-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-grow .sx-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 11, .15) 20%, rgba(12, 12, 11, .55) 55%, rgba(12, 12, 11, .9) 100%); }
.sx-grow .sx-over { grid-area: 1 / 1; z-index: 2; align-self: end; color: #F2EEE4; padding: clamp(3rem, 8vw, 6rem) var(--gutter); max-width: var(--max); margin: 0 auto; width: 100%;
  --text: rgba(242, 238, 228, .86); --muted: rgba(242, 238, 228, .66); }
.sx-grow .sx-over .hl { color: var(--lime); box-shadow: none; }
.sx-grow .sx-intro2 { display: none; }
html.sx-on .sx-grow.sx-live { height: 260vh; }
html.sx-on .sx-grow.sx-live .sx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.sx-on .sx-grow.sx-live .sx-media { min-height: 0; height: 100%; will-change: transform, clip-path; transform-origin: 50% 50%; }
html.sx-on .sx-grow.sx-live .sx-over { opacity: var(--sx-copy, 0); transform: translateY(calc((1 - var(--sx-copy, 0)) * 28px)); }
html.sx-on .sx-grow.sx-live .sx-intro2 { display: block; position: absolute; z-index: 3; top: calc(var(--head-h) + 3vh); left: 0; right: 0; text-align: center; padding: 0 var(--gutter); opacity: var(--sx-intro, 1); }

/* ── tilt: the phone stands up ───────────────────────────────────────────────────── */
.sx-tilt .sx-layout { display: grid; gap: 3rem; align-items: center; justify-items: center; max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--gutter); }
@media (min-width: 900px) { .sx-tilt .sx-layout { grid-template-columns: auto minmax(0, 1fr); } }
.sx-tilt .sx-device { --pw: min(290px, 64vw); transform-origin: 50% 80%; will-change: transform; }
html.sx-on .sx-tilt.sx-live { height: 220vh; }
html.sx-on .sx-tilt.sx-live .sx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center; }
html.sx-on .sx-tilt.sx-live .sx-layout { padding-block: calc(var(--head-h) + 1rem) 2rem; }
html.sx-on .sx-tilt.sx-live .sx-device { --pw: min(290px, 60vw, calc((100svh - var(--head-h) - 7rem) * 9 / 19.5)); }
html.sx-on .sx-tilt.sx-live .sx-copy { opacity: var(--sx-copy, 0); transform: translateY(calc((1 - var(--sx-copy, 0)) * 24px)); }
@media (max-width: 899px) { html.sx-on .sx-tilt.sx-live .sx-device { --pw: min(200px, 50vw, calc((100svh - var(--head-h) - 18rem) * 9 / 19.5)); } }

/* ── dial: the score arrives ─────────────────────────────────────────────────────── */
.sx-dial .sx-pin { display: grid; gap: clamp(1.4rem, 3svh, 2.4rem); align-content: center; justify-items: center; text-align: center; padding: var(--sec) var(--gutter); }
.dial { position: relative; width: min(340px, 70vw, 34svh); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: var(--rule); stroke-width: 6; }
.dial-arc { fill: none; stroke: var(--lime); stroke-width: 6; stroke-linecap: round; }
.dial-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial-n { font-size: clamp(4rem, 3rem + 6vw, 7.5rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dial-l { margin-top: .5rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sx-dial .sx-copy { max-width: 56ch; }
.sx-dial .sx-h { margin: 0 auto; }
.sx-dial .sx-p { margin-left: auto; margin-right: auto; }
.sx-figs { display: grid; gap: 1.6rem 3rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); width: min(100%, 880px); text-align: left; list-style: none; }
.sx-figs li { border-top: 1px solid var(--lime); padding-top: .9rem; }
.sx-figs .n { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -.01em; }
.sx-figs .c { display: block; margin-top: .55rem; font-size: .85rem; line-height: 1.45; color: var(--muted); }
.sx-figs cite { font-style: normal; white-space: nowrap; }
html.sx-on .sx-dial.sx-live { height: 210vh; }
html.sx-on .sx-dial.sx-live .sx-pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--head-h) + 1rem); gap: 1.6rem; }
html.sx-on .sx-dial.sx-live .sx-copy { opacity: var(--sx-copy, 0); transform: translateY(calc((1 - var(--sx-copy, 0)) * 20px)); }
html.sx-on .sx-dial.sx-live .sx-figs { opacity: var(--sx-figs, 0); transform: translateY(calc((1 - var(--sx-figs, 0)) * 20px)); }
@media (max-width: 899px) { .dial { width: min(220px, 56vw); } html.sx-on .sx-dial.sx-live .sx-figs { gap: 1rem 1.6rem; } .sx-figs .n { font-size: 1.8rem; } }
@media (max-height: 760px) and (min-width: 900px) { .dial { width: 240px; } .dial-n { font-size: 5rem; } }

/* ── mask: the word the film shows through ───────────────────────────────────────── */
.sx-mask { --mask-ground: var(--bg); }
.sx-mask .sx-pin { min-height: 90vh; display: grid; }
.sx-mask .mask-film { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 90vh; object-fit: cover; }
.sx-mask canvas { display: none; }
.sx-mask .sx-over { grid-area: 1 / 1; z-index: 2; align-self: end; color: #F2EEE4; padding: clamp(3rem, 8vw, 6rem) var(--gutter); max-width: var(--max); margin: 0 auto; width: 100%;
  --text: rgba(242, 238, 228, .88); --muted: rgba(242, 238, 228, .68); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.sx-mask .sx-over .hl { color: var(--lime); box-shadow: none; }
.sx-mask .sx-pin::after { content: ''; grid-area: 1 / 1; z-index: 1; background: linear-gradient(180deg, rgba(12, 12, 11, .1) 0%, rgba(12, 12, 11, .5) 40%, rgba(12, 12, 11, .92) 100%), linear-gradient(90deg, rgba(12, 12, 11, .55), transparent 70%); pointer-events: none; }
html.sx-on .sx-mask.sx-live { height: 280vh; }
html.sx-on .sx-mask.sx-live .sx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.sx-on .sx-mask.sx-live .mask-film { min-height: 0; }
html.sx-on .sx-mask.sx-live canvas { display: block; grid-area: 1 / 1; z-index: 2; width: 100%; height: 100%; }
html.sx-on .sx-mask.sx-live .sx-over { z-index: 3; opacity: var(--sx-copy, 0); }
html.sx-on .sx-mask.sx-live .sx-pin::after { opacity: var(--sx-copy, 0); }

/* ── tour: one device, a floating segmented control ──────────────────────────────── */
.sx-tour { padding: var(--sec) 0; }
.tour-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 5vw, 3.5rem); padding: 0 var(--gutter); }
.tour-head .sx-k { justify-content: center; }
.tour-head .sx-k::before { display: none; }
.tour-head .sx-h { margin: 0 auto; }
.tour-head .sx-p { margin-left: auto; margin-right: auto; }
.tour-stage { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: center; align-items: flex-end; padding: 0 var(--gutter); }
.tour-stage .sx-phone { --pw: min(290px, 66vw, calc((100svh - var(--head-h) - 8rem) * 9 / 19.5)); flex: none; }
.tour-stage .sx-slot > * { opacity: 0; transition: opacity .5s var(--sx-ease), transform .6s var(--sx-ease); transform: scale(1.015); }
.tour-stage .sx-slot > .is-on { opacity: 1; transform: none; }
.tour-bar { position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 5; width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin: 2.6rem auto 0;
  display: flex; gap: .2rem; padding: .3rem; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 1px var(--rule), 0 18px 40px -20px rgba(0, 0, 0, .35); overflow-x: auto; scrollbar-width: none; }
.tour-bar::-webkit-scrollbar { display: none; }
.tour-bar [role="tab"] { flex: none; min-height: 44px; padding: .55rem 1.05rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; }
.tour-bar [role="tab"]:hover { color: var(--ink); }
.tour-bar [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tour-bar [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-panels { max-width: 54ch; margin: 1.4rem auto 0; padding: 0 var(--gutter); text-align: center; min-height: 6.5rem; }
.tour-panels [role="tabpanel"] h3 { font-size: 1.05rem; font-weight: 700; }
.tour-panels [role="tabpanel"] p { margin-top: .45rem; color: var(--text); line-height: 1.6; }
.tour-panels [role="tabpanel"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.tour-panels .tp-note { display: inline-block; margin-top: .6rem; font-size: .78rem; color: var(--muted); }
/* the care team's screen, beside the member's phone */
.kx-panel { position: relative; flex: 0 1 560px; min-width: 0; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; background: var(--card);
  box-shadow: 0 0 0 1px var(--rule), 0 40px 80px -40px rgba(0, 0, 0, .45); }
.kx-panel > * { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--sx-ease); }
.kx-panel > .is-on { opacity: 1; }
.kx-bar { position: absolute; inset: 0 0 auto 0; height: 34px; opacity: 1; display: flex; align-items: center; gap: .45rem; padding: 0 .9rem; border-bottom: 1px solid var(--rule); font-size: .72rem; color: var(--muted); z-index: 2; background: var(--card); }
.kx-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.kx-bar b { margin-left: .4rem; color: var(--ink); font-weight: 700; }
.kx-bar .demo { margin-left: auto; padding: .15rem .5rem; border-radius: 999px; background: color-mix(in srgb, #4C6FB2 16%, transparent); color: var(--ink); font-weight: 700; }
.kx-view { padding: 50px 1.1rem 1rem; display: grid; gap: .8rem; align-content: start; }
.kx-view .kx-h { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kx-row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: .8rem; align-items: center; font-size: .85rem; padding: .45rem .2rem; border-bottom: 1px solid var(--rule); }
.kx-row.me { background: color-mix(in srgb, var(--lime) 22%, transparent); border-radius: 8px; padding-inline: .5rem; border-color: transparent; }
.kx-row .bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.kx-row .bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.kx-row .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.kx-big { display: flex; gap: 1.6rem; align-items: baseline; }
.kx-big .n { font-size: 2.6rem; font-weight: 300; line-height: 1; }
.kx-big .t { font-size: .8rem; color: var(--muted); }
.kx-chart { width: 100%; height: auto; }
.kx-chart .ln { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.kx-chart .ar { fill: color-mix(in srgb, var(--lime) 30%, transparent); }
.kx-chart .gd { stroke: var(--rule); stroke-width: 1; }
.kx-chart text { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.kx-chart .dot { fill: var(--ink); }
.kx-note { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.kx-lock { display: grid; gap: .6rem; }
.kx-lock li { list-style: none; display: flex; gap: .7rem; align-items: center; font-size: .9rem; padding: .55rem .7rem; border-radius: 10px; background: var(--bg-2); }
.kx-lock li b { margin-left: auto; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.kx-lock li.no b { color: var(--muted); }
.kx-lock svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 899px) { .tour-stage { flex-direction: column; align-items: center; } .kx-panel { width: 100%; flex-basis: auto; aspect-ratio: 4 / 3.3; } .tour-stage .sx-phone { --pw: min(230px, 58vw); } }

/* ── sheets: the floating bar and its dialogs ────────────────────────────────────── */
.sheet-bar { position: fixed; z-index: 40; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateY(140%); opacity: 0;
  display: flex; align-items: center; gap: .15rem; padding: .3rem; border-radius: 999px; max-width: calc(100vw - 2rem);
  background: color-mix(in srgb, #161614 92%, transparent); color: #F2EEE4; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(242, 238, 228, .12), 0 24px 50px -20px rgba(0, 0, 0, .55); transition: transform .5s var(--sx-ease), opacity .35s; pointer-events: none; }
.sheet-bar.is-in { transform: none; opacity: 1; pointer-events: auto; }
/* Prominent on any ground: a lime label chip, a lime edge, and on a dark section the bar turns cream. */
.sheet-bar { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--lime) 70%, transparent), 0 24px 50px -18px rgba(0, 0, 0, .55); }
.sheet-bar .lead { align-self: stretch; display: inline-flex; align-items: center; margin-right: .2rem; padding: 0 .95rem; border-radius: 999px;
  background: var(--lime); color: #141412; font-weight: 700; letter-spacing: .1em; }
.night .sheet-bar, [data-tone="dark"] .sheet-bar { background: color-mix(in srgb, #F2EEE4 94%, transparent); color: #141412; }
.night .sheet-bar button:hover, [data-tone="dark"] .sheet-bar button:hover { background: rgba(20, 20, 18, .08); }
.night .sheet-bar .sb-arrow, [data-tone="dark"] .sheet-bar .sb-arrow { background: rgba(20, 20, 18, .07); }
@media (prefers-reduced-motion: no-preference) { .sheet-bar.is-in .lead { animation: sb-hello 1.6s var(--sx-ease) .45s 1 both; } }
@keyframes sb-hello { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* the same topics, in the section itself */
.sheet-links { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.sheet-links .sl-lead { margin-bottom: .7rem; color: var(--muted); }
.sl-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sl-row button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); color: inherit;
  font: inherit; font-size: .9rem; font-weight: 600; transition: background-color .2s, border-color .2s; }
.sl-row button:hover { background: color-mix(in srgb, currentColor 12%, transparent); border-color: color-mix(in srgb, currentColor 55%, transparent); }
.sl-row button:focus-visible { outline: 2px solid var(--focus, var(--lime)); outline-offset: 2px; }
.sl-row button svg { width: 14px; height: 14px; color: var(--lime-ink, currentColor); }
.night .sl-row button svg, [data-tone="dark"] .sl-row button svg { color: var(--lime); }
.sb-track { display: flex; gap: .25rem; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.sb-track::-webkit-scrollbar { display: none; }
.sheet-bar:not(.fits) .sb-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); }
.sheet-bar.at-start:not(.fits) .sb-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.2rem), transparent); }
.sheet-bar.at-end:not(.fits) .sb-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2rem); mask-image: linear-gradient(90deg, transparent, #000 1.2rem); }
.sheet-bar button { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 0; background: transparent;
  color: inherit; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s, opacity .2s; }
.sheet-bar button:hover { background: rgba(242, 238, 228, .1); }
.sheet-bar button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.sheet-bar button svg { width: 14px; height: 14px; }
.sheet-bar .sb-arrow { width: 44px; padding: 0; justify-content: center; background: rgba(242, 238, 228, .08); }
.sheet-bar .sb-arrow svg { width: 16px; height: 16px; }
.sheet-bar .sb-arrow:disabled { opacity: .3; cursor: default; background: transparent; }
.sheet-bar.fits .sb-arrow { display: none; }
.sheet-bar .lead { font-size: .7rem; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) { .sheet-bar .lead { padding: 0 .7rem; font-size: .62rem; letter-spacing: .06em; } }
dialog.sheet { margin: auto auto 0; width: min(760px, 100%); max-height: min(86vh, 900px); max-height: min(86dvh, 900px); border: 0; padding: 0; border-radius: 26px 26px 0 0;
  background: var(--card); color: var(--ink); box-shadow: 0 -20px 60px rgba(0, 0, 0, .35); overflow: auto; overscroll-behavior: contain; }
@media (min-width: 900px) { dialog.sheet { margin: auto; border-radius: 26px; } }
dialog.sheet::backdrop { background: rgba(12, 12, 11, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.sheet[open] { animation: sheet-in .5s var(--sx-ease); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.sheet-in { padding: clamp(1.6rem, 4vw, 2.6rem); position: relative; }
.sheet-in .sx-k { margin-bottom: .6rem; }
.sheet-in h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.15; max-width: 22ch; padding-right: 3rem; }
.sheet-in p, .sheet-in li { color: var(--text); line-height: 1.65; }
.sheet-in p { margin-top: .9rem; max-width: 62ch; }
.sheet-in ul { margin-top: 1rem; display: grid; gap: .6rem; padding-left: 1.1rem; }
.sheet-in .sheet-fig { margin-top: 1.4rem; border-top: 1px solid var(--lime); padding-top: .8rem; display: grid; gap: .3rem; }
.sheet-in .sheet-fig b { font-size: 2rem; font-weight: 300; }
.sheet-in .sheet-fig span { font-size: .85rem; color: var(--muted); }
.sheet-in img { width: 100%; height: auto; border-radius: 16px; margin-top: 1.2rem; }
.sheet-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
html.sheet-open { scrollbar-gutter: stable; }

/* ── highlights ──────────────────────────────────────────────────────────────────── */
.sx-high { padding: var(--sec) 0; }
.hi-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; max-width: var(--max); margin: 0 auto 1.8rem; padding: 0 var(--gutter); }
.hi-head .sx-h { font-weight: 300; }
.hi-track { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(var(--gutter), calc((100vw - min(980px, 86vw)) / 2)); scroll-padding: 0 max(var(--gutter), calc((100vw - min(980px, 86vw)) / 2)); }
.hi-track::-webkit-scrollbar { display: none; }
.hi-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 28px; }
.hi-card { flex: none; width: min(980px, 86vw); scroll-snap-align: center; border-radius: 28px; overflow: hidden; position: relative; background: var(--card);
  box-shadow: 0 0 0 1px var(--rule); min-height: clamp(420px, 52vw, 560px); display: grid; grid-template-rows: 1fr auto; transition: opacity .5s; }
.hi-card:not(.is-on) { opacity: .45; }
.hi-art { position: relative; overflow: hidden; display: grid; place-items: center; }
.hi-txt { padding: 1.3rem 1.6rem 1.7rem; text-align: center; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.4; font-weight: 600; letter-spacing: -.005em; }
.hi-txt span { color: var(--muted); font-weight: 500; }
.hi-ctl { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.hi-dots { display: flex; gap: .2rem; padding: .55rem .9rem; border-radius: 999px; background: var(--bg-2); }
.hi-dot { position: relative; width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.hi-dot::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--muted); opacity: .5; transition: width .4s var(--sx-ease); }
.hi-dot[aria-current="true"] { width: 52px; }
.hi-dot[aria-current="true"]::before { width: 44px; opacity: .3; }
.hi-dot[aria-current="true"]::after { content: ''; position: absolute; left: 4px; height: 8px; border-radius: 4px; background: var(--ink); width: calc(44px * var(--fill, 0)); }
.hi-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 6px; }
.hi-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.hi-play svg { width: 14px; height: 14px; fill: currentColor; }
.hi-play .i-play, .hi-play[aria-pressed="true"] .i-pause { display: none; }
.hi-play[aria-pressed="true"] .i-play { display: block; }
.hi-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sx-high.is-paused .hi-card * { animation-play-state: paused !important; }

/* the small animations inside the highlight cards: each plays only while its card is on */
.hi-art .an { animation-play-state: paused; }
.hi-card.is-on .an { animation-play-state: running; }
.hi-art.ph-notify { background: radial-gradient(90% 80% at 50% 110%, #2A2C1E 0%, #121210 70%); }
.mini-phone { position: relative; width: 190px; aspect-ratio: 9 / 19.5; border-radius: 30px; background: #0E0E0D; padding: 7px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); translate: 0 26%; }
.mini-phone .sc { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: #E9E6DC; }
.mini-phone img, .mini-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.notif { position: absolute; left: 8%; right: 8%; top: 9%; padding: .55rem .7rem; border-radius: 14px; background: rgba(250, 249, 244, .9); color: #161614; font-size: .62rem; line-height: 1.3; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4);
  animation: notif 6.5s var(--sx-ease) infinite; }
.notif b { display: block; font-size: .66rem; }
@keyframes notif { 0%, 8% { transform: translateY(-140%); opacity: 0; } 18%, 62% { transform: none; opacity: 1; } 70%, 100% { transform: scale(.94); opacity: 0; } }
.tap { position: absolute; left: 50%; top: 22%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 2px solid rgba(214, 227, 0, .9); animation: tap 6.5s ease-out infinite; opacity: 0; }
@keyframes tap { 0%, 40% { transform: scale(.4); opacity: 0; } 46% { opacity: 1; } 60%, 100% { transform: scale(1.8); opacity: 0; } }
.hi-art.ph-dial { background: var(--bg-2); }
.mini-dial { width: min(240px, 60%); aspect-ratio: 1; position: relative; }
.mini-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mini-dial .tr { fill: none; stroke: var(--rule); stroke-width: 7; }
.mini-dial .ac { fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 553; stroke-dashoffset: 553; animation: dial 6.5s var(--sx-ease) infinite; }
@keyframes dial { 0%, 6% { stroke-dashoffset: 553; } 40%, 100% { stroke-dashoffset: 138; } }
.mini-dial .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mini-dial .c b { font-size: 3.6rem; font-weight: 300; line-height: 1; }
.mini-dial .c span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.hi-art.ph-terrain { background: #101010; }
.terr { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: terr 13s linear infinite; }
.terr.t2 { animation-delay: -9.75s; } .terr.t3 { animation-delay: -6.5s; } .terr.t4 { animation-delay: -3.25s; }
@keyframes terr { 0% { opacity: 0; } 6%, 25% { opacity: 1; } 31%, 100% { opacity: 0; } }
.terr-l { position: absolute; left: 1.2rem; bottom: 1.1rem; display: flex; gap: .4rem; z-index: 2; }
.terr-l span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #F2EEE4; padding: .3rem .6rem; border-radius: 999px; background: rgba(12, 12, 11, .45); }
.hi-art.ph-days { background: var(--bg-2); }
.days { display: flex; gap: .7rem; }
.days i { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: .9; }
.days i.on { background: var(--ink); animation: dayon 6.5s var(--sx-ease) infinite both; }
.days i.on:nth-child(2) { animation-delay: .25s; } .days i.on:nth-child(3) { animation-delay: .5s; } .days i.on:nth-child(5) { animation-delay: .75s; } .days i.on:nth-child(6) { animation-delay: 1s; }
@keyframes dayon { 0%, 10% { transform: scale(.4); opacity: 0; } 22%, 100% { transform: none; opacity: 1; } }
.days-l { margin-top: 1.1rem; text-align: center; font-size: .9rem; color: var(--muted); }
.hi-art.ph-share { background: radial-gradient(90% 80% at 50% 0%, #22231C 0%, #0F0F0E 70%); color: #F2EEE4; }
.share { display: grid; gap: .55rem; width: min(340px, 82%); }
.share div { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(242, 238, 228, .07); font-size: .86rem; animation: share 6.5s var(--sx-ease) infinite both; }
.share div:nth-child(2) { animation-delay: .3s; } .share div:nth-child(3) { animation-delay: .6s; } .share div:nth-child(4) { animation-delay: .9s; }
.share b { margin-left: auto; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.share .y b { color: var(--lime); } .share .n b { color: rgba(242, 238, 228, .55); } .share .n { text-decoration: line-through; text-decoration-color: rgba(242, 238, 228, .4); }
@keyframes share { 0%, 8% { transform: translateY(12px); opacity: 0; } 20%, 100% { transform: none; opacity: 1; } }
.hi-art.ph-worth { background: var(--bg-2); }
.worth { width: min(380px, 84%); padding: 1rem 1.1rem; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--rule), 0 24px 40px -26px rgba(0, 0, 0, .35); animation: share 6.5s var(--sx-ease) infinite both; }
.worth .k { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #9A6A00; font-weight: 700; }
.worth b { display: block; margin-top: .35rem; font-size: .95rem; }
.worth p { margin-top: .35rem; font-size: .8rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 899px) { .hi-card { min-height: 460px; } .mini-phone { width: 150px; } }

/* reduced motion and no script: every story section is a plain, finished section */
@media (prefers-reduced-motion: reduce) {
  .hi-art .an, .notif, .tap, .mini-dial .ac, .terr, .days i.on, .share div, .worth { animation: none !important; }
  .notif, .share div, .worth, .days i.on { opacity: 1; transform: none; }
  .mini-dial .ac { stroke-dashoffset: 138; }
  .terr.t1 { opacity: 1; }
  .tap { display: none; }
  .tour-stage .sx-slot > *, .kx-panel > * { transition: none; }
  dialog.sheet[open] { animation: none; }
}

/* ── page pieces used with the story sections ────────────────────────────────────── */
.sx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.6rem; }
.sx-over .btn { background: var(--lime); color: #161614; border-color: var(--lime); }
.sx-over .more { color: #F2EEE4; border-bottom-color: var(--lime); }
.sx-p.small { font-size: .9rem; color: var(--muted); }
.calm { background: var(--bg); }
.calm-quote { margin: 1rem 0 clamp(2rem, 5vw, 3.4rem); }
.calm-quote p { font-weight: 300; font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4rem); line-height: 1.08; letter-spacing: -.012em; max-width: 22ch; color: var(--ink); }
.calm-grid { display: grid; gap: 2.4rem 4rem; }
@media (min-width: 900px) { .calm-grid { grid-template-columns: 1fr 1fr; } }
.calm-rules { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.calm-rules li { padding: 1rem 0; border-bottom: 1px solid var(--rule); color: var(--text); line-height: 1.55; }
.calm-rules b { display: block; color: var(--ink); margin-bottom: .2rem; }
.atm-facts { list-style: none; margin-top: 1.4rem; display: grid; gap: .9rem; max-width: 46ch; }
.atm-facts li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; align-items: baseline; padding-top: .8rem; border-top: 1px solid var(--lime); }
.atm-facts b { font-size: 2rem; font-weight: 300; line-height: 1; }
.atm-facts span { color: var(--text); line-height: 1.5; font-size: .95rem; }
.split-2 { display: grid; gap: 1.6rem 4rem; align-items: start; }
@media (min-width: 900px) { .split-2 { grid-template-columns: 1fr 1.2fr; } }
.points { background: var(--bg-2); }
.tech-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: 2.2rem; border-top: 1px solid var(--night-rule); }
.tech-list li { border-bottom: 1px solid var(--night-rule); }
.tech-list button { position: relative; width: 100%; height: 100%; display: grid; gap: .3rem; align-content: start; padding: 1.2rem 2.6rem 1.3rem 0; text-align: left;
  background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; transition: background-color .2s; }
.tech-list button:hover { background: rgba(242, 238, 228, .05); }
.tech-list button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.tech-list button i { position: absolute; right: .9rem; top: 1.25rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(214, 227, 0, .55); color: var(--lime); }
.tech-list button i svg { width: 12px; height: 12px; }
.tech-list b { color: var(--night-ink); font-size: 1rem; }
.tech-list span { color: var(--night-muted); font-size: .9rem; }
.sx-tour.sx-dark, .sx-tilt.sx-dark { background: #0C0C0B; }

/* ── Kwelix: the dashboard, its charts and the simulator ─────────────────────────── */
.kx-dash { width: min(980px, calc(100% - 2 * var(--gutter))); margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--card);
  box-shadow: 0 0 0 1px var(--rule), 0 50px 90px -50px rgba(0, 0, 0, .45); }
.kx-dash-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); font-size: .8rem; color: var(--muted); }
.kx-dash-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.kx-dash-bar b { margin-left: .5rem; color: var(--ink); }
.kx-badge { margin-left: auto; padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, #4C6FB2 16%, transparent); color: var(--ink); font-weight: 700; font-size: .72rem; letter-spacing: .02em; }
.kx-dash-body { display: grid; padding: clamp(1rem, 3vw, 2rem); min-height: 340px; }
.kx-v { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s var(--sx-ease), visibility 0s .45s; }
.kx-v.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--sx-ease); }
.kc { margin: 0; }
.kc-t { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .9rem; }
.kc-plot { position: relative; }
.kc svg { width: 100%; height: auto; display: block; overflow: visible; }
.kc .gd { stroke: var(--rule); stroke-width: 1; }
.kc .ax { font: 11px var(--font); fill: var(--muted); }
.kc .ar { fill: color-mix(in srgb, var(--lime) 26%, transparent); }
.kc .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kc .end { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.kc .lbl { font: 700 13px var(--font); fill: var(--ink); }
.kc .xh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.kc .xd { fill: var(--card); stroke: var(--ink); stroke-width: 2; opacity: 0; }
.kc-plot.hover .xh, .kc-plot.hover .xd { opacity: 1; }
.kc .nm { font: 600 13px var(--font); fill: var(--ink); }
.kc .val { font: 700 13px var(--font); fill: var(--ink); font-variant-numeric: tabular-nums; }
.kc .track { fill: var(--rule); opacity: .5; }
.kc .bar { fill: var(--ink); }
.kc .hb.me .bar { fill: var(--lime); }
.kc .hb.on .bar, .kc .hc.on .bar { opacity: .82; }
.kc .hit { fill: transparent; }
.kc-tip { position: absolute; z-index: 3; pointer-events: none; padding: .4rem .65rem; border-radius: 8px; background: #161614; color: #F2EEE4; font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.kc-table { margin-top: 1rem; font-size: .85rem; }
.kc-table summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.kc-table summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.kc-table table { margin-top: .6rem; border-collapse: collapse; width: 100%; max-width: 560px; }
.kc-table th, .kc-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--rule); }
.kc-table thead th { color: var(--muted); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.kx-tour .tour-bar { margin-top: 1.8rem; }

.sim { background: var(--bg-2); }
.sim-grid { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 900px) { .sim-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.sim-in { border: 0; display: grid; gap: 1.1rem; }
.sim-f label { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: .4rem; }
.sim-i { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); overflow: hidden; }
.sim-i:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.sim-i input { flex: 1; min-width: 0; min-height: 48px; border: 0; padding: .7rem .9rem; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; }
.sim-i input:focus { outline: none; }
.sim-i span { padding: 0 .9rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.sim-i span:empty { display: none; }
.sim-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-ghost { min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sim-ex-note { font-size: .8rem; color: var(--muted); display: none; }
.sim-grid.is-example .sim-ex-note { display: block; }
.sim-out { align-self: start; border-radius: 22px; background: #0C0C0B; color: #F2EEE4; padding: clamp(1.4rem, 3vw, 2.2rem); --muted: rgba(242, 238, 228, .65); }
.sim-out .label { color: var(--muted); }
.sim-big { margin-top: .8rem; display: grid; gap: .3rem; }
.sim-big span { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 300; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sim-big small { font-size: .85rem; color: var(--muted); }
.sim-big2 { margin-top: 1rem; font-size: 1rem; color: rgba(242, 238, 228, .86); }
.sim-big2 span { font-weight: 700; color: #F2EEE4; font-variant-numeric: tabular-nums; }
.funnel { margin-top: 1.4rem; display: grid; gap: .55rem; }
.fn-row { display: grid; grid-template-columns: 8.5rem 1fr 5.5rem; gap: .7rem; align-items: center; font-size: .82rem; }
.fn-l { color: var(--muted); }
.fn-b { height: 10px; border-radius: 4px; background: rgba(242, 238, 228, .1); overflow: hidden; }
.fn-b i { display: block; height: 100%; width: 0; background: var(--lime); border-radius: 4px; transition: width .5s var(--sx-ease); }
.fn-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sim-method { margin-top: 1.3rem; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.sim-method b { color: #F2EEE4; }
.sim-ref { margin-top: 1.6rem; font-size: .85rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 560px) { .fn-row { grid-template-columns: 6.5rem 1fr 4rem; } }
@media (prefers-reduced-motion: reduce) { .kx-v, .fn-b i { transition: none; } }

/* Kwelix panel: a short pipeline, numbered down a rule */
.kx-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: kxf; }
.kx-flow li { counter-increment: kxf; position: relative; display: grid; gap: .2rem; padding: .7rem 0 .7rem 2.3rem; border-bottom: 1px solid var(--rule); font-size: .85rem; line-height: 1.45; }
.kx-flow li::before { content: counter(kxf); position: absolute; left: 0; top: .7rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--lime) 30%, transparent); color: var(--ink); }
.kx-flow b { color: var(--ink); font-weight: 700; }
.kx-flow span { color: var(--text); }

/* ── the app's Liquid Glass tab bar, over a screenshot (POP v6, Figma 14702:5621) ───────── */
.app-tb { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.app-tb > i, .app-tb > img { position: absolute; display: block; }
.app-tb .tb-bar { border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)), rgba(68, 68, 68, .22);
  -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
  box-shadow: 1px 0 0 -.6px #d0d0d0, -1px 0 0 -.6px #d0d0d0, 0 0 0 .5px rgba(232, 232, 232, .9), 0 8px 15px rgba(0, 0, 0, .06), inset 0 1px 1px rgba(255, 255, 255, .45); }
.app-tb .tb-sel { border-radius: 999px; background: rgba(255, 255, 255, .34); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
.app-tb .tb-dome { border-radius: 999px; background: rgba(153, 153, 153, .17);
  -webkit-backdrop-filter: blur(3px) saturate(180%) brightness(1.06); backdrop-filter: blur(3px) saturate(180%) brightness(1.06);
  box-shadow: 1px 0 0 -.6px #a6a6a6, -1px 0 0 -.6px #a6a6a6, 0 0 0 .5px #a6a6a6, 0 8px 15px rgba(0, 0, 0, .08), inset 0 1px 2px rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(0, 0, 0, .06); }
.app-tb .tb-today { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--tb-dim); }
.app-tb .tb-today.on { background: var(--tb-on); }
.app-tb .tb-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-tb .tb-ink g { fill: none; stroke: var(--tb-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-tb .tb-ink text { font: 590 10px/1 -apple-system, "SF Pro Text", system-ui, "DM Sans", sans-serif; fill: var(--tb-dim); text-anchor: middle; letter-spacing: -.01em; }
.app-tb .tb-ink .on { stroke: var(--tb-on); } .app-tb .tb-ink text.on { fill: var(--tb-on); stroke: none; }
.app-tb .tb-ink text.pop { fill: var(--tb-pop); }
/* light screens use the light-mode label colours; dark screens the vibrant ones from the design */
.app-tb.tb-light { --tb-on: #1C1C1E; --tb-dim: rgba(60, 60, 67, .55); --tb-pop: rgba(60, 60, 67, .6); }
.app-tb.tb-dark { --tb-on: #FFFFFF; --tb-dim: #BFBFBF; --tb-pop: rgba(235, 235, 245, .6); }
.app-tb.tb-dark .tb-bar { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), rgba(68, 68, 68, .5); box-shadow: 1px 0 0 -.6px #8a8a8a, -1px 0 0 -.6px #8a8a8a, 0 0 0 .5px rgba(160, 160, 160, .6), 0 8px 15px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .18); }
.app-tb.tb-dark .tb-sel { background: rgba(255, 255, 255, .16); }
@media (prefers-reduced-transparency: reduce) {
  .app-tb .tb-bar, .app-tb .tb-dome { -webkit-backdrop-filter: none; backdrop-filter: none; background: #E9E8E3; }
  .app-tb.tb-dark .tb-bar, .app-tb.tb-dark .tb-dome { background: #2A2A28; }
}

/* ── labelling a photo: suggested, then confirmed (POP v6 14555:9189, Kwelio colours) ───── */
.lab { position: absolute; inset: 0; overflow: hidden; background: #0B110E; }
.lab-screen { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0; transform: scale(var(--lab-k, .72));
  color: #EEF2EA; font: 400 15px/1.35 -apple-system, "SF Pro Text", system-ui, "DM Sans", sans-serif; }
.lab-bar { position: absolute; left: 16px; top: 58px; }
.lab-close { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #1B241F; font-weight: 600; font-size: 14px; }
.lab-title { position: absolute; left: 92px; top: 60px; font: 400 21px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.lab-when { position: absolute; left: 16px; top: 100px; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: rgba(238, 242, 234, .62); }
.lab-photo { position: absolute; left: 16px; top: 122px; width: 370px; height: 380px; border-radius: 22px; overflow: hidden; background: #141B17; }
.lab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.lab-scan { position: absolute; left: 0; right: 0; top: 0; height: 90px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(198, 223, 160, .28) 80%, rgba(198, 223, 160, .7) 98%, transparent); }
.lab.play:not(.s1) .lab-scan { opacity: 1; animation: lab-scan 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes lab-scan { from { transform: translateY(-90px); } to { transform: translateY(423px); } }
.lab-photo .pin { position: absolute; margin: -9px 0 0 -9px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #EEF2EA; background: rgba(198, 223, 160, .9);
  box-shadow: 0 0 0 4px rgba(11, 17, 14, .35); opacity: 0; transform: scale(.3); transition: opacity .35s, transform .45s cubic-bezier(.16, 1, .3, 1); }
.lab-photo .chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 11px 6px 12px; border-radius: 999px;
  background: rgba(11, 17, 14, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1.5px dashed rgba(198, 223, 160, .85);
  font-size: 13px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1), background-color .35s, border-color .35s, color .35s; }
.lab-photo .chip .q { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 242, 234, .6); font-weight: 600; }
.lab-photo .chip b { font-weight: 600; }
.lab-photo .chip .ok { display: none; width: 16px; height: 16px; }
.lab-photo .chip .ok svg { width: 16px; height: 16px; display: block; }
/* step classes are cumulative: s3 means "step 3 or later" */
.lab.s1 .pin { opacity: 1; transform: none; }
.lab.s5 .pin.t3, .lab.s1:not(.s5) .pin.t3 { opacity: 1; }
.lab.s2 .chip.t1, .lab.s2 .chip.t2 { opacity: 1; transform: none; }
.lab.s3 .chip.t1, .lab.s4 .chip.t2, .lab.s7 .chip.t3 { background: #C6DFA0; color: #0B110E; border: 1.5px solid #C6DFA0; }
.lab.s3 .chip.t1 .q, .lab.s4 .chip.t2 .q, .lab.s7 .chip.t3 .q { display: none; }
.lab.s3 .chip.t1 .ok, .lab.s4 .chip.t2 .ok, .lab.s7 .chip.t3 .ok { display: block; }
.lab.s3 .pin.t1, .lab.s4 .pin.t2, .lab.s7 .pin.t3 { background: #C6DFA0; }
.lab .chip.t3 b { display: none; } .lab.s7 .chip.t3 b { display: inline; }
.lab.s5 .chip.t3 { opacity: 1; transform: none; }
.lab-pick { position: absolute; right: 12px; top: 92px; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: rgba(20, 27, 23, .96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75); font-size: 13px;
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 100% 100%; transition: opacity .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.lab-pick span { padding: 8px 12px; border-radius: 11px; color: rgba(238, 242, 234, .86); }
.lab.s5:not(.s7) .lab-pick { opacity: 1; transform: none; }
.lab.s6 .lab-pick span:first-child { background: rgba(198, 223, 160, .2); color: #EEF2EA; }
.lab-status { position: absolute; left: 16px; right: 16px; top: 512px; height: 40px; font-size: 13.5px; color: rgba(238, 242, 234, .72); }
.lab-status span { position: absolute; inset: 0; transition: opacity .35s; }
.lab .s-saw { opacity: 0; } .lab.s2 .s-saw { opacity: 1; } .lab.s2 .s-look { opacity: 0; }
.lab-k { position: absolute; left: 16px; top: 560px; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 242, 234, .5); }
.lab-list { position: absolute; left: 16px; right: 16px; top: 578px; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lab-list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 14px; border-radius: 16px; background: #141B17; }
.lab-list .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #EEF2EA; color: #0B110E; margin-top: 1px; }
.lab-list .tick svg { width: 14px; height: 14px; }
.lab-list b { display: block; font-weight: 600; font-size: 15px; } .lab-list small { display: block; font-size: 12px; color: rgba(238, 242, 234, .6); }
.lab-list em { display: block; height: 0; overflow: hidden; font-style: normal; font-size: 12px; color: #C6DFA0; opacity: 0; transition: opacity .4s, height .4s; }
.lab.s3 .m1 em, .lab.s4 .m2 em, .lab.s7 .m3 em { height: 17px; opacity: 1; }
.lab-btn { position: absolute; left: 16px; right: 16px; bottom: 34px; height: 50px; border-radius: 999px; background: #EEF2EA; color: #0B110E; display: grid; place-items: center; font-weight: 600; font-size: 15px; overflow: hidden; }
.lab-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity .35s, transform .45s cubic-bezier(.16, 1, .3, 1); }
.lab-btn svg { width: 18px; height: 18px; }
.lab .b-done { opacity: 0; transform: translateY(14px); }
.lab.s8 .b-done { opacity: 1; transform: none; } .lab.s8 .b-log { opacity: 0; transform: translateY(-14px); }
.lab.s8 .lab-btn { background: #C6DFA0; transition: background-color .35s; }
@media (prefers-reduced-motion: reduce) { .lab *, .lab *::before { transition: none !important; animation: none !important; } }

/* ── the terrain explorer (inside the "Pick where Kwelio lives" highlight) ────────────────── */
.hi-art.ph-terrain { background: #0B110E; place-items: stretch; }
.tx { position: absolute; inset: 0; color: #F2EEE4; --tx-fade: .7s; }
.tx-scene { position: absolute; inset: 0; overflow: hidden; }
.tx-layers { position: absolute; inset: 0; }
.tx-layers > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tx-base, .tx-lt { transition: opacity var(--tx-fade) ease; }
.tx-base[data-m]:not(.on), .tx-lt:not(.on) { opacity: 0; }
.tx-layers.leaving { opacity: 0; transition: opacity var(--tx-fade) ease; }
.tx-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 9, .15), transparent 30%, transparent 55%, rgba(8, 10, 9, .55)); }
.tx-orb { position: absolute; left: var(--ox, 80%); top: var(--oy, 70%); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; z-index: 1;
  transition: left .35s ease-out, top .35s ease-out, background-color .5s, box-shadow .5s;
  background: #FFE7B8; box-shadow: 0 0 0 6px rgba(255, 214, 150, .18), 0 0 40px 18px rgba(255, 196, 120, .45), 0 0 120px 50px rgba(255, 170, 90, .22); }
.tx.is-night .tx-orb { background: #E8EEF6; box-shadow: inset -9px -3px 0 0 rgba(150, 165, 190, .55), 0 0 0 5px rgba(220, 230, 245, .1), 0 0 36px 12px rgba(190, 210, 240, .28); }
.tx.is-day .tx-orb { background: #FFF6DC; box-shadow: 0 0 0 7px rgba(255, 240, 200, .22), 0 0 50px 22px rgba(255, 236, 190, .45), 0 0 140px 60px rgba(255, 230, 180, .2); }
/* the phone: the top of the Today screen, scaled from 402 × 874 */
.tx-phone { position: absolute; right: 6%; top: 50%; height: 86%; aspect-ratio: 402 / 874; transform: translateY(-50%); border-radius: 30px; padding: 6px; background: #0E0E0D;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(242, 238, 228, .12); z-index: 2; }
.tx-screen { position: relative; width: 100%; height: 100%; border-radius: 25px; overflow: hidden; background: var(--tx-ground, #F3F4EF); container-type: inline-size; }
.tx-hero { position: absolute; left: 0; right: 0; top: 0; height: 52%; overflow: hidden; }
.tx-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--tx-g) / var(--w0)) 0%, rgb(var(--tx-g) / var(--w1)) 28%, rgb(var(--tx-g) / var(--w2)) 62%, rgb(var(--tx-g) / 1) 100%); }
.tx { --tx-g: 243 244 239; --tx-ground: #F3F4EF; --w0: .74; --w1: .62; --w2: .74; --tx-ink: #13201A; --tx-dim: rgba(19, 32, 26, .62); --tx-panel: #FFFFFF; }
.tx.tx-dark { --tx-g: 11 17 14; --tx-ground: #0B110E; --w0: .42; --w1: .10; --w2: .35; --tx-ink: #EEF2EA; --tx-dim: rgba(238, 242, 234, .6); --tx-panel: #141B17; }
.tx-ui { position: absolute; inset: 0; color: var(--tx-ink); text-align: center; }
.tx-date { position: absolute; left: 0; right: 0; top: 9%; font: 500 2.6cqw/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-dim); }
.tx-ring { position: absolute; left: 50%; top: 15%; width: 46cqw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: .9cqw solid color-mix(in srgb, var(--tx-ink) 22%, transparent);
  display: grid; place-content: center; gap: 1cqw; }
.tx-ring b { font: 300 15cqw/1 Georgia, "Times New Roman", serif; font-variant-numeric: tabular-nums; }
.tx-ring span { font: 500 2.3cqw/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-dim); }
.tx-head { position: absolute; left: 6%; right: 6%; top: 47%; font: 400 5.4cqw/1.25 Georgia, "Times New Roman", serif; }
.tx-card { position: absolute; left: 4%; right: 4%; top: 56%; padding: 4cqw 5cqw; border-radius: 4.5cqw; background: var(--tx-panel); text-align: left; display: grid; gap: 1cqw;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tx-ink) 10%, transparent); }
.tx-card b { font: 600 4cqw/1.2 -apple-system, system-ui, sans-serif; } .tx-card span { font: 400 3.2cqw/1.2 -apple-system, system-ui, sans-serif; color: var(--tx-dim); }
/* the controls: one glass bar over the scene */
.tx-ctl { position: absolute; left: 4%; bottom: 5%; width: min(560px, 58%); z-index: 3; display: grid; gap: .7rem; padding: .9rem 1rem 1rem; border-radius: 22px;
  background: rgba(14, 16, 14, .62); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(242, 238, 228, .14), inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 50px -24px rgba(0, 0, 0, .7); }
.tx-terr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.tx-terr button { display: grid; justify-items: center; gap: .3rem; min-height: 44px; padding: .4rem .1rem; border: 0; border-radius: 14px; background: transparent; color: rgba(242, 238, 228, .78); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.tx-terr button:hover { background: rgba(242, 238, 228, .08); }
.tx-terr button[aria-checked="true"] { background: rgba(242, 238, 228, .16); color: #F2EEE4; }
.tx-terr button:focus-visible, .tx-now:focus-visible { outline: 2px solid #D6E300; outline-offset: 1px; }
.tx-terr .sw { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(242, 238, 228, .35); background-size: cover; background-position: center; }
.tx-terr button[aria-checked="true"] .sw { box-shadow: 0 0 0 2px #F2EEE4; }
.sw-default { background: radial-gradient(70% 70% at 30% 30%, #4a4036, #191c20 70%); } .sw-air { background: radial-gradient(70% 70% at 30% 30%, #5b5568, #191b27 70%); }
.sw-sand { background: radial-gradient(70% 70% at 30% 30%, #7a5e3e, #241d15 70%); }
.tx-time { display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem .8rem; align-items: center; font-size: .78rem; }
.tx-time label { font-weight: 600; color: rgba(242, 238, 228, .78); }
.tx-time output { min-width: 9.5em; font-variant-numeric: tabular-nums; font-weight: 700; }
.tx-now { min-height: 36px; padding: .35rem .8rem; border: 0; border-radius: 999px; background: rgba(242, 238, 228, .14); color: #F2EEE4; font: inherit; font-weight: 700; cursor: pointer; }
.tx-time input[type="range"] { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; width: 100%; }
.tx-time input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #121a2a 0%, #1b2338 18%, #e7a56b 25%, #9cc3e8 40%, #bcd8f0 55%, #e59a5e 76%, #3a2e4a 84%, #121a2a 100%); }
.tx-time input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #121a2a 0%, #1b2338 18%, #e7a56b 25%, #9cc3e8 40%, #bcd8f0 55%, #e59a5e 76%, #3a2e4a 84%, #121a2a 100%); }
.tx-time input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #F2EEE4; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.tx-time input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #F2EEE4; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.tx-time input[type="range"]:focus-visible { outline: 2px solid #D6E300; outline-offset: 2px; border-radius: 8px; }
@media (max-width: 899px) {
  .tx-phone { height: 58%; top: 6%; right: 5%; transform: none; border-radius: 20px; padding: 4px; } .tx-screen { border-radius: 16px; }
  .tx-ctl { left: 3%; right: 3%; width: auto; bottom: 3%; padding: .7rem .7rem .8rem; gap: .5rem; }
  .tx-terr .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tx-time { grid-template-columns: 1fr auto; } .tx-time label { display: none; } .tx-time input { grid-column: 1 / -1; grid-row: 1; } .tx-time output { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .tx { --tx-fade: 0s; } .tx-orb { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .tx-ctl { background: #151714; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── one screen per interactive section (Sumi, 6 Oct 2026) ───────────────────────────────── */
/* the tour: heading, tabs and the live caption beside the stage on wide screens; stacked on phones */
.sx-tour { min-height: calc(100svh - var(--head-h)); display: grid; align-content: center; padding-block: clamp(1.5rem, 5svh, 3.5rem); }
.tour-grid { display: grid; grid-template-areas: "head" "stage" "bar" "panels"; grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.tour-grid > .tour-head { grid-area: head; margin: 0 0 clamp(1rem, 3svh, 1.8rem); padding: 0; }
.tour-grid > .tour-stage { grid-area: stage; padding: 0; }
.tour-grid > .tour-bar { grid-area: bar; margin: clamp(.9rem, 2.5svh, 1.6rem) auto 0; position: static; max-width: 100%; }
.tour-grid > .tour-panels { grid-area: panels; margin: .9rem auto 0; padding: 0; min-height: 0; }
.tour-stage .sx-phone { --pw: min(280px, 64vw, calc((100svh - var(--head-h) - 19rem) * 9 / 19.5)); }
@media (max-width: 899px) { .tour-head .sx-p { display: none; } .tour-grid > .tour-panels [role="tabpanel"] p { font-size: .92rem; } }
@media (min-width: 900px) {
  .tour-grid { grid-template-areas: "head stage" "bar stage" "panels stage"; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; justify-items: start; }
  .sx-tour:not(.has-side) .tour-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .tour-grid > .tour-head { text-align: left; margin-bottom: 1.4rem; }
  .tour-grid > .tour-head .sx-k { justify-content: flex-start; }
  .tour-grid > .tour-head .sx-h, .tour-grid > .tour-head .sx-p { margin-left: 0; margin-right: 0; }
  .tour-grid > .tour-stage { align-self: center; justify-self: center; }
  .tour-grid > .tour-bar { margin: 0; width: auto; max-width: 100%; flex-wrap: wrap; border-radius: 22px; overflow: visible; }
  .tour-grid > .tour-panels { margin: 1.2rem 0 0; text-align: left; max-width: 46ch; }
  .tour-stage .sx-phone { --pw: min(290px, calc((100svh - var(--head-h) - 6rem) * 9 / 19.5)); }
  .has-side .tour-stage .kx-panel { flex-basis: min(520px, 34vw); }
}
/* the highlights: the card is sized from the screen's height, so card, words and controls fit together */
.sx-high { min-height: calc(100svh - var(--head-h)); display: grid; align-content: center; padding-block: clamp(1.5rem, 5svh, 3.5rem); }
.sx-high .hi-head { margin-bottom: clamp(.9rem, 2.5svh, 1.6rem); }
.sx-high .hi-ctl { margin-top: clamp(.8rem, 2svh, 1.3rem); }
.hi-card { min-height: 0; height: clamp(340px, calc(100svh - var(--head-h) - 2 * clamp(1.5rem, 5svh, 3.5rem) - 9rem), 560px); }
.hi-art .mini-dial { width: auto; height: min(240px, 78%); max-width: 70%; }
/* the Kwelix dashboard as a tour: the window fills its column and keeps to the screen's height */
.kx-tour .kx-stage { width: 100%; }
.kx-tour .kx-dash { width: 100%; margin: 0; }
.kx-tour .kx-dash-body { min-height: 0; height: clamp(260px, calc(100svh - var(--head-h) - 13rem), 520px); }
.kx-tour .kx-v { min-height: 0; }
@media (max-width: 899px) { .kx-tour .kx-dash-body { height: clamp(215px, calc(100svh - var(--head-h) - 23rem), 420px); } }
@media (min-width: 900px) { .kx-tour.sx-tour .tour-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* phones: one calm type scale (Sumi, 6 Oct 2026); story.css loads after site.css, so its own caps live here */
@media (max-width: 600px) {
  .sx-h { font-size: clamp(1.32rem, 1.05rem + 1.4vw, 1.55rem); line-height: 1.2; }
  .sx-intro b { font-size: clamp(1.45rem, 1.1rem + 1.8vw, 1.7rem); }
  .sx-p { font-size: 1rem; }
  .dial-n { font-size: 3.4rem; }
  .sx-figs .n { font-size: 1.8rem; }
  .calm-quote p { font-size: clamp(1.45rem, 1.1rem + 1.8vw, 1.65rem); }
  .sim-big span { font-size: 2rem; }
  .hi-txt { font-size: 1rem; }
  .sheet-in h3 { font-size: 1.35rem; }
}
/* a stage with the care team's screen beside the phone takes its whole column, so the screen has room */
@media (min-width: 900px) { .has-side .tour-grid > .tour-stage { justify-self: stretch; width: 100%; } }
/* Kwelix simulator and parts list, wide screens: fields in pairs and the four parts in two columns, so each
   section fits one screen (6 Oct 2026) */
@media (min-width: 1100px) {
  .sim-in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; align-content: start; }
  .sim-in > .sim-f:last-of-type:nth-of-type(odd), .sim-in > .sim-actions, .sim-in > .sim-ex-note, .sim-in > legend { grid-column: 1 / -1; }
  .sim-f label { font-size: .9rem; min-height: 2.6em; display: flex; align-items: flex-end; }
  #what .parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.25rem); border-top: 0; }
  #what .parts > li { grid-template-columns: 1fr; border-top: 1px solid var(--rule); border-bottom: 0; padding-block: 1.1rem; align-content: start; }
  #what .parts > li > .label { grid-row: auto; padding-top: 0; }
  #what .parts h3 { font-size: 1.15rem; }
  #what .parts p { font-size: .94rem; line-height: 1.5; }
}
/* phones: a tour with a side panel shows the phone only; the care team's view has its own section further on */
@media (max-width: 899px) { .has-side:not(.kx-tour) .tour-stage .kx-panel { display: none; } }
/* text over the films keeps 4.5:1 (6 Oct 2026 audit) */
.sx-grow .sx-over, .sx-mask .sx-over { --muted: rgba(242, 238, 228, .84); }
.sx-grow .sx-media::after { background: linear-gradient(180deg, rgba(12, 12, 11, .2) 15%, rgba(12, 12, 11, .62) 50%, rgba(12, 12, 11, .92) 100%); }
/* phones and tablets: a tour fits one screen under the header (6 Oct 2026) */
@media (max-width: 899px) {
  .sx-tour { padding: clamp(1.4rem, 4svh, 2.25rem) 0; }
  .tour-grid > .tour-head { margin-bottom: .8rem; }
  .tour-grid > .tour-bar { margin-top: .7rem; }
  .tour-grid > .tour-panels { margin-top: .6rem; }
  .kx-tour .kx-panel { aspect-ratio: 4 / 2.9; }
}
@media (max-width: 599px) {
  .tour-grid > .tour-head .sx-h { font-size: 1.38rem; }
  .kx-tour .kx-panel { aspect-ratio: 4 / 2.75; }
  .kx-tour .tour-grid > .tour-panels [role="tabpanel"] p { font-size: .88rem; line-height: 1.45; }
}
.sx-grow .sx-over .sx-k, .sx-mask .sx-over .sx-k { color: #F2EEE4; }
/* Sara's tour, wide screens: the care team's panel is a readable card beside the phone, sized to its content */
@media (min-width: 900px) {
  .has-side:not(.kx-tour) .tour-stage { gap: clamp(1rem, 2vw, 1.75rem); }
  .has-side:not(.kx-tour) .tour-stage .kx-panel { flex: 0 0 min(21rem, 27vw); aspect-ratio: auto; height: min(31rem, calc(100svh - var(--head-h) - 7rem)); align-self: center; }
}
.sx-grow .sx-over .sx-h, .sx-mask .sx-over .sx-h { color: #F2EEE4; }
@media (max-width: 700px) {
  .sx-mask .sx-pin::after { background: linear-gradient(180deg, rgba(12, 12, 11, .25) 0%, rgba(12, 12, 11, .66) 32%, rgba(12, 12, 11, .94) 100%); }
}
/* "in one minute" captions: a caption under the picture, not a headline (Sumi, 6 Oct 2026 15:09) */
.hi-txt { padding: 1rem 1.5rem 1.25rem; font-size: clamp(.95rem, .88rem + .22vw, 1.06rem); line-height: 1.5; letter-spacing: 0; }
.hi-txt span { font-weight: 400; }
@media (max-width: 599px) { .hi-txt { padding: .85rem 1.1rem 1rem; font-size: .9rem; line-height: 1.45; } }
/* the highlight cards' own animations run on the card's time (4.5s) */
.sx-high { --hi-dur: 4.5s; }
.sx-high .notif, .sx-high .tap, .sx-high .mini-dial .ac, .sx-high .days i.on, .sx-high .share div, .sx-high .worth { animation-duration: var(--hi-dur); }

/* "One routine. Many people who can help.": a line you read, not a label, and it grows as the film opens
   (Sumi, 6 Oct 2026) */
.sx-grow .sx-intro2 { font-weight: 300; font-size: clamp(1.7rem, 1rem + 2.6vw, 3.3rem); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
html.sx-on .sx-grow.sx-live .sx-intro2 { transform: scale(calc(1 + (1 - var(--sx-intro, 1)) * .28)); transform-origin: 50% 0; }

/* the score: the two names explained in a sheet each */
.sl-inline { margin-top: 1.3rem; }
.sx-dial .sl-inline { justify-content: center; }
.sx-dial .sx-p b { font-weight: 700; color: var(--ink); }

/* the score on laptop screens: the dial beside the words and figures, so all of it is on one screen */
@media (min-width: 900px) and (max-height: 1000px) {
  .sx-dial .sx-pin, html.sx-on .sx-dial.sx-live .sx-pin { grid-template-columns: auto minmax(0, 40rem); grid-template-areas: "dial copy" "dial figs";
    justify-content: center; align-content: center; justify-items: start; text-align: left; column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: clamp(1rem, 2.5svh, 1.6rem); }
  .sx-dial .dial { grid-area: dial; align-self: center; width: min(300px, 38svh); }
  .sx-dial .dial-n { font-size: clamp(3.4rem, 9svh, 5.5rem); }
  .sx-dial .sx-copy { grid-area: copy; align-self: end; }
  .sx-dial .sx-figs { grid-area: figs; align-self: start; justify-content: start; }
  .sx-dial .sx-h, .sx-dial .sx-p { margin-left: 0; margin-right: 0; }
  .sx-dial .sx-k { justify-content: flex-start; }
  .sx-dial .sl-inline { justify-content: flex-start; }
}
/* the floating topic bar sits higher, clear of the bottom edge and the theme button (Sumi, 6 Oct 2026) */
.sheet-bar { bottom: max(2.25rem, 5.5svh, calc(env(safe-area-inset-bottom) + 1rem)); }

/* Kwelix dashboard tour, wide screens: the views sit in a floating frosted bar right under the screen they
   change (Sumi, 6 Oct 2026) */
@media (min-width: 900px) {
  .kx-tour.sx-tour .tour-grid { grid-template-areas: "head stage" "panels stage" "panels bar"; grid-template-rows: auto 1fr auto; }
  .kx-tour .tour-grid > .tour-panels { align-self: start; margin-top: .4rem; }
  .kx-tour .tour-grid > .tour-bar { grid-area: bar; justify-self: center; align-self: start; position: relative; bottom: auto; z-index: 3;
    margin: -1.6rem 0 0; width: max-content; max-width: 100%; flex-wrap: nowrap; border-radius: 999px; padding: 5px;
    background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px var(--rule), 0 18px 36px -18px rgba(0, 0, 0, .42); }
  .kx-tour .kx-dash-body { height: clamp(240px, calc(100svh - var(--head-h) - 15rem), 500px); }
}
@media (prefers-reduced-transparency: reduce) { .kx-tour .tour-grid > .tour-bar { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the simulator: "Try example values" is the first thing to press (Sumi, 6 Oct 2026) */
#sim-example { background: var(--lime); color: #161614; border-color: var(--lime); font-weight: 700; padding-inline: 1.25rem;
  box-shadow: 0 10px 22px -12px rgba(120, 128, 0, .75); transition: background-color .2s, color .2s, border-color .2s; }
#sim-example:hover { background: #161614; color: var(--lime); border-color: #161614; }
@media (prefers-reduced-motion: no-preference) { .sim.sim-seen .sim-grid:not(.is-example) #sim-example { animation: sim-nudge 1.8s var(--sx-ease) .4s 3; } }
@keyframes sim-nudge { 0% { box-shadow: 0 0 0 0 rgba(214, 227, 0, .75), 0 10px 22px -12px rgba(120, 128, 0, .75); } 75%, 100% { box-shadow: 0 0 0 14px rgba(214, 227, 0, 0), 0 10px 22px -12px rgba(120, 128, 0, .75); } }

/* POP, the technology: one full screen while its topic bar is up (Sumi, 6 Oct 2026) */
#tech.sx-sheets { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--sec) + 4.5rem); }
#tech.sx-sheets > .wrap { width: 100%; }

/* ── Phones (Sumi, 6 Oct 2026: 'a lot of problems in the mobile view ... borders and the way things move').
   A pinned screen on a phone holds one thing at a time, and nothing in it is taller than the screen. ── */
@media (max-width: 899px) {
  /* shrink: the film settles into the phone, the recording plays, then the phone lifts away and the words
     take its place (story.js sets --sx-out and --sx-copy) */
  html.sx-on .sx-shrink.sx-live .sx-layout { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); align-content: stretch; align-items: center;
    justify-items: center; gap: 0; padding-block: calc(var(--head-h) + 1rem) 1.5rem; }
  html.sx-on .sx-shrink.sx-live .sx-layout > .sx-phone, html.sx-on .sx-shrink.sx-live .sx-layout > .sx-copy { grid-area: 1 / 1; }
  html.sx-on .sx-shrink.sx-live .sx-phone { --pw: min(260px, 62vw, calc((100svh - var(--head-h) - 6rem) * 9 / 19.5)); pointer-events: none;
    opacity: calc(1 - var(--sx-out, 0)); translate: 0 calc(var(--sx-out, 0) * -5svh); scale: calc(1 - var(--sx-out, 0) * .06); }
  html.sx-on .sx-shrink.sx-live .sx-copy { align-self: center; width: 100%; max-width: 34rem; position: relative; z-index: 3; }
  html.sx-on .sx-shrink.sx-live .sx-copy .ch-note { margin-top: 1rem; }

  /* tilt: read as a normal section; the phone stands up once as it comes into view (story.js) */
  .sx-tilt.sx-timed .sx-layout { gap: 2rem; padding-block: var(--sec); }
  .sx-tilt.sx-timed .sx-device { --pw: min(230px, 58vw); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), opacity .8s ease; }
  .sx-tilt.sx-timed.sx-wait .sx-device { transform: perspective(1400px) translateY(6vh) rotateX(48deg) rotateZ(-10deg) scale(.9); opacity: .4; }

  /* dial: one screen with the words and figures, the score counts up once (story.js) */
  .sx-dial.sx-timed .sx-pin { padding-top: calc(var(--sec) * .8); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .sx-tilt.sx-timed .sx-device { transition: none; } }

/* the floating topic bars on touch screens: the track is swiped, so the arrows give their room to the topics */
@media (hover: none) and (pointer: coarse) { .sheet-bar .sb-arrow { display: none; } }
@media (max-width: 640px) { .sheet-bar { max-width: calc(100% - 2 * var(--gutter)); } .sheet-bar button:not(.sb-arrow) { padding-inline: .8rem; } }

/* tour bars on phones: smaller tabs, the chosen tab scrolls into the middle (story.js), and a soft fade at the
   ends says there is more, inside the bar so its rounded edge stays whole */
@media (max-width: 640px) {
  .tour-bar [role="tab"] { padding: .5rem .8rem; font-size: .86rem; }
  .tour-bar::before, .tour-bar::after { content: ''; position: sticky; flex: none; width: 22px; align-self: stretch; pointer-events: none; z-index: 1; }
  .tour-bar::before { left: 0; margin-right: -22px; background: linear-gradient(90deg, color-mix(in srgb, var(--card) 92%, transparent), transparent); border-radius: 999px 0 0 999px; }
  .tour-bar::after { right: 0; margin-left: -22px; background: linear-gradient(270deg, color-mix(in srgb, var(--card) 92%, transparent), transparent); border-radius: 0 999px 999px 0; }
}

/* highlights on phones: the next card shows a clear 20px edge rather than a stray 8px line at the screen edge */
@media (max-width: 640px) {
  .hi-track { gap: .75rem; padding-inline: calc((100vw - 82vw) / 2); scroll-padding-inline: calc((100vw - 82vw) / 2); }
  .hi-card { width: 82vw; border-radius: 24px; }
}
/* once a film fills the screen its section takes the film's dark ground, so when Safari's toolbar folds away
   and the screen grows taller than the pinned scene, the strip below it is dark, not the page colour */
html.sx-on .sx-grow.sx-live.sx-filmed, html.sx-on .sx-mask.sx-live.sx-filmed { background: #0C0C0B; }
/* chart labels: never smaller than 11.5px on screen, however small the card (kwelix.js sets --kc-s) */
.kc .ax { font-size: max(11px, calc(11.5px * var(--kc-s, 0))); }
.kc .nm, .kc .val, .kc .lbl { font-size: max(13px, calc(12px * var(--kc-s, 0))); }
/* phones: the highlight controls keep clear of the round theme button at the bottom right */
@media (max-width: 640px) { .hi-ctl { justify-content: flex-start; padding-inline: var(--gutter); } .hi-ctl > .hi-play { order: -1; } }
@media (max-width: 640px) {
  .hi-dots { gap: 0; padding: .5rem .55rem; }
  .hi-dot[aria-current="true"] { width: 40px; }
  .hi-dot[aria-current="true"]::before { width: 32px; }
  .hi-dot[aria-current="true"]::after { width: calc(32px * var(--fill, 0)); }
}

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