/* kwelio.com, 2026 site. Same design language as createapps.kwelio.com:
   cream and ink, one lime accent, Plus Jakarta Sans, night bands, light and dark from the device. */
:root {
  --bg: #F5F1E9;
  --bg-2: #ECE7DB;
  --card: #FBF9F4;
  --ink: #1A1A1A;
  --text: #33352F;
  --muted: #5C5F57;
  --rule: rgba(26, 26, 26, .12);
  --night: #1A1A1A;
  --night-2: #232320;
  --night-ink: #F2EEE4;
  --night-text: #DAD6CB;
  --night-muted: #ABA89E;
  --night-rule: rgba(242, 238, 228, .14);
  --lime: #D6E300;
  --lime-ink: #1A1A1A;
  --band: var(--lime);
  --band-ink: var(--lime-ink);
  --band-muted: #3A3D2C;
  --band-rule: rgba(26, 26, 26, .18);
  --focus: #1A1A1A;
  --role: #B4233F;
  --font: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1180px;
  --head-h: 68px;
  --sec: clamp(2.75rem, min(10vw, 9svh), 6.5rem);   /* section rhythm follows the screen's height too, so sections fit one screen */
  color-scheme: light dark;
}

  :root[data-theme="dark"] {
    --bg: #141412;
    --bg-2: #1C1C19;
    --card: #1B1B19;
    --ink: #F2EEE4;
    --text: #DAD6CB;
    --muted: #A5A298;
    --rule: rgba(242, 238, 228, .14);
    --night: #0E0E0D;
    --night-2: #1A1A18;
    --band: #1F201A;
    --band-ink: #F2EEE4;
    --band-muted: #B3B19F;
    --band-rule: rgba(242, 238, 228, .16);
    --focus: #D6E300;
    --role: #FF7A93;
  }


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.night :focus-visible { outline-color: var(--lime); }
.band :focus-visible { outline-color: var(--band-ink); }
[hidden] { display: none !important; }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--ink); color: var(--bg); padding: .7rem 1rem; text-decoration: none; font-weight: 700; }
.skip:focus { top: .75rem; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); flex: none; }
 :root:not([data-theme="dark"]) .dot { background: var(--ink); } 
h1, h2, h3 { color: var(--ink); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.hl { box-shadow: inset 0 -.2em 0 var(--lime); }
 :root[data-theme="dark"] .hl { box-shadow: none; color: var(--lime); } 
.night h2, .night h3 { color: var(--night-ink); }
.night .hl { box-shadow: none; color: var(--lime); }
.band h2, .band h3 { color: var(--band-ink); }
.band .hl { box-shadow: inset 0 -.2em 0 var(--ink); }
 :root[data-theme="dark"] .band .hl { box-shadow: none; color: var(--lime); } 
.sec { padding-block: var(--sec); }
.sec + .sec:not(.night):not(.band):not(.alt) { border-top: 1px solid var(--rule); }
.alt { background: var(--bg-2); }
.night { background: var(--night); color: var(--night-text); }
.band { background: var(--band); color: var(--band-ink); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head p { color: var(--muted); max-width: 28rem; }
.night .sec-head p { color: var(--night-muted); }
.kicker { color: var(--muted); margin-bottom: .9rem; }
.night .kicker { color: var(--night-muted); }
.band .kicker { color: var(--band-muted); }
.prose p + p { margin-top: 1rem; }
.prose p { max-width: 38rem; }

/* Links that read as actions */
.more { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--lime); padding-bottom: .1rem; transition: border-color .15s, gap .2s var(--ease-out); }
 :root:not([data-theme="dark"]) .more { border-bottom-color: var(--ink); } 
.more:hover { gap: .7rem; }
.more svg { width: 16px; height: 16px; flex: none; }
.night .more { color: var(--night-ink); border-bottom-color: var(--lime); }
.band .more { color: var(--band-ink); border-bottom-color: currentColor; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink); }
.night .btn { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.night .btn:hover { background: transparent; color: var(--lime); }
.band .btn { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.band .btn:hover { background: transparent; color: var(--band-ink); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ── Header ───────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--rule); }
.top .wrap { height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; color: var(--ink); padding: .4rem 0; }
.wordmark { display: block; height: 1.45rem; width: auto; overflow: visible; }
.primary-nav { display: none; }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: .15rem; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 6px; transition: color .15s, background-color .15s; }
.primary-nav a:hover { color: var(--ink); background: var(--bg-2); }
.primary-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--lime); border-radius: 0; }
 :root:not([data-theme="dark"]) .primary-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); } 
.top .cta { display: none; min-height: 40px; padding: .45rem 1rem; font-size: .92rem; }
.menu-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: .92rem; cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.menu-panel { position: fixed; inset: var(--head-h) 0 0 0; z-index: 29; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); }
.menu-panel ul { list-style: none; }
.menu-panel > ul > li { border-bottom: 1px solid var(--rule); }
.menu-panel > ul > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--ink); text-decoration: none; font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; }
.menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.menu-panel .sub { padding: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.menu-panel .sub a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.menu-panel .btn { margin-top: 1.5rem; width: 100%; }
body.menu-open { overflow: hidden; }
@media (min-width: 1000px) {
  .primary-nav { display: block; }
  .top .cta { display: inline-flex; }
  .menu-btn, .menu-panel { display: none !important; }
}

/* ── Page hero ────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.75rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem); }
.hero .eyebrow { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(2.6rem, 8.4vw, 6rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; max-width: 13ch; }
.hero.inner h1 { font-size: clamp(2.3rem, 6.6vw, 4.6rem); max-width: 16ch; }
.hero-grid { display: grid; gap: 2rem; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.hero .lead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.55; color: var(--text); max-width: 36rem; }
.jump { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; align-self: end; }
.jump a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1rem .55rem .9rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .95rem; transition: background-color .15s, border-color .15s, color .15s; }
.jump a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; transition: opacity .15s; }
.jump a:hover { border-color: var(--ink); }
.jump a:hover::before { opacity: 1; }
.jump a.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.jump a.primary::before { background: var(--lime); opacity: 1; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .jump { max-width: 30rem; justify-content: flex-end; } }

/* ── Statement band with figures ──────────────────────────────────────── */
.statement { font-size: clamp(1.6rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--night-ink); max-width: 22ch; }
.figures { list-style: none; display: grid; gap: 0; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--night-rule); }
.figures li { padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--night-rule); display: grid; gap: .5rem; }
.figures .n { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--night-ink); font-variant-numeric: tabular-nums; }
.figures .n small { font-size: .45em; letter-spacing: -.01em; font-weight: 700; margin-left: .15em; }
.figures p { color: var(--night-text); max-width: 26rem; line-height: 1.5; }
.figures cite { display: block; margin-top: .35rem; font-style: normal; color: var(--night-muted); font-size: .85rem; }
@media (min-width: 860px) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--night-rule); }
  .figures li { border-bottom: 0; padding: 1.6rem 1.75rem 1.6rem 0; }
  .figures li + li { border-left: 1px solid var(--night-rule); padding-left: 1.75rem; }
}
.light-figures { border-top-color: var(--rule); }
.light-figures li { border-bottom-color: var(--rule); }
.light-figures .n { color: var(--ink); }
.light-figures p { color: var(--text); }
.light-figures cite { color: var(--muted); }
@media (min-width: 860px) { .light-figures { border-bottom-color: var(--rule); } .light-figures li + li { border-left-color: var(--rule); } }

/* ── Split (text + picture) ───────────────────────────────────────────── */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split figure { margin: 0; }
.split .pic { border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.split .pic img { width: 100%; height: 100%; object-fit: cover; }
.split figcaption { margin-top: .6rem; color: var(--muted); font-size: .85rem; }
.night .split figcaption { color: var(--night-muted); }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split.flip { grid-template-columns: 7fr 5fr; }
  .split.flip > :first-child { order: 2; }
}
.callout { margin-top: 1.75rem; padding: 1.2rem 1.25rem 1.3rem; border-left: 3px solid var(--lime); background: var(--card); border-radius: 0 8px 8px 0; max-width: 34rem; }
 :root:not([data-theme="dark"]) .callout { border-left-color: var(--ink); } 
.callout .n { display: block; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.callout p { margin-top: .5rem; font-size: .98rem; line-height: 1.5; }

/* ── Sticky side + parts list (how it works, products, ESG) ───────────── */
.side-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.side-grid .side h2 { max-width: 14ch; }
.side-grid .side .intro { margin-top: 1.1rem; max-width: 30rem; }
.side-grid blockquote { margin-top: 2rem; padding-left: 1rem; border-left: 3px solid var(--lime); color: var(--ink); font-weight: 700; font-size: 1.15rem; line-height: 1.35; max-width: 24rem; }
 :root:not([data-theme="dark"]) .side-grid blockquote { border-left-color: var(--ink); } 
.parts { list-style: none; border-top: 1px solid var(--rule); }
.parts > li { display: grid; gap: .4rem; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); }
.parts .label { color: var(--muted); }
.parts h3 { font-size: 1.3rem; }
.parts p { max-width: 38rem; }
.parts .more { margin-top: .5rem; justify-self: start; font-size: .95rem; }
.night .parts, .night .parts > li { border-color: var(--night-rule); }
.night .parts .label { color: var(--night-muted); }
@media (min-width: 900px) {
  .side-grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .side-grid .side { position: sticky; top: calc(var(--head-h) + 2rem); }
  .parts > li { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.5rem; }
  .parts > li > .label { padding-top: .35rem; grid-row: span 4; }
}

/* ── Scores ───────────────────────────────────────────────────────────── */
.scores { display: grid; gap: 1rem; }
.score { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem; }
.score .tag { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; color: var(--ink); }
.score .tag b { display: inline-grid; place-items: center; min-width: 3.1rem; height: 1.9rem; padding: 0 .5rem; border-radius: 999px; background: var(--ink); color: var(--bg); letter-spacing: .08em; }
.score h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.score p { max-width: 32rem; }
.footnote { margin-top: 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.footnote .n { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.footnote p { font-size: .95rem; line-height: 1.5; color: var(--muted); max-width: 40rem; }
.footnote p b { color: var(--ink); font-weight: 700; }
@media (min-width: 860px) { .scores { grid-template-columns: 1fr 1fr; } }

/* ── Founders' stories ────────────────────────────────────────────────── */
.stories { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.story { display: grid; gap: 1.25rem; align-content: start; }
.story .pic { border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.story .pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.story blockquote p { color: var(--ink); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.story blockquote p::before { content: '\201C'; }
.story blockquote p::after { content: '\201D'; }
.story figcaption { color: var(--muted); }
.story figcaption b { color: var(--ink); font-weight: 800; }
.stories-close { margin-top: clamp(2.5rem, 6vw, 4rem); max-width: 40rem; }
.stories-close strong { display: block; color: var(--ink); font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: .6rem; }
@media (min-width: 860px) { .stories { grid-template-columns: 1fr 1fr; } .story:nth-child(2) { margin-top: 4rem; } }

/* ── Team (same cards as createapps) ──────────────────────────────────── */
.group-label { color: var(--muted); margin: clamp(2rem, 5vw, 3rem) 0 1rem; display: flex; align-items: center; gap: .75rem; }
.group-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.person { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.person .photo { background: #D9D6CF; overflow: hidden; }
.person .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.founder .photo img { object-position: 50% 40%; }
.name { color: var(--ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.name span { display: block; font-weight: 500; color: var(--muted); }
.role { color: var(--role); margin-top: .5rem; }
.years { color: var(--ink); margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rule); line-height: 1.45; }
.years b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-right: .15rem; }
.facts { margin-top: 1rem; display: grid; gap: .85rem; }
.facts dt { color: var(--muted); }
.facts dd ul { list-style: none; display: grid; gap: .2rem; margin-top: .3rem; }
.facts dd li { position: relative; padding-left: .9rem; font-size: .95rem; line-height: 1.45; color: var(--text); }
.facts dd li::before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.logos { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.logos span { display: inline-flex; align-items: center; height: 40px; padding: 7px 10px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(26,26,26,.06); }
.logos img { height: 26px; width: auto; max-width: none; }
.founders { display: grid; gap: 1rem; }
.founder { display: flex; flex-direction: column; }
.founder .photo { aspect-ratio: 2 / 1; }
.founder .body { padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 760px) { .founders { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .founder .facts { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.core { list-style: none; display: grid; gap: 1rem; }
.core .person { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.core .body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; }
.core .name { font-size: 1.12rem; }
.core .years { font-size: .95rem; }
.core .years b { font-size: 1.3rem; }
@media (min-width: 640px) { .core { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .core { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .core .person { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .core .photo { aspect-ratio: 4 / 5; }
}

/* ── Product rows ─────────────────────────────────────────────────────── */
.rows { list-style: none; border-top: 1px solid var(--rule); }
.rows > li { border-bottom: 1px solid var(--rule); }
.rows a.row { display: grid; gap: .5rem 1.5rem; padding: 1.5rem 0; text-decoration: none; color: inherit; }
.row .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.row .title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.row h3 { font-size: clamp(1.4rem, 3.2vw, 2rem); letter-spacing: -.025em; transition: color .15s; }
.row p { max-width: 36rem; }
.row .go { display: none; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; place-items: center; color: var(--ink); transition: background-color .15s, border-color .15s, transform .25s var(--ease-out); }
.row .go svg { width: 18px; height: 18px; }
a.row:hover .go { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); transform: translateX(4px); }
a.row:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--lime); }
@media (min-width: 860px) { .rows a.row { grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; } .row .go { display: grid; } }
.status { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--text); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status.live::before { background: #2E8B4F; }
.status.soon::before { background: #B9871A; }
.status.demo::before { background: #4C6FB2; }
 :root[data-theme="dark"] .status.live::before { background: #6FCF8E; } :root[data-theme="dark"] .status.soon::before { background: #E8B56C; } :root[data-theme="dark"] .status.demo::before { background: #8EA9E6; } 

/* ── Recognition (one-colour marks follow light and dark) ─────────────── */
.recog-list { list-style: none; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.r-item { background: var(--bg); padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; }
.alt .r-item { background: var(--bg-2); }
.r-mark { height: 64px; display: flex; align-items: center; margin-bottom: 1.25rem; }
.mk { display: block; height: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .9; }
 :root[data-theme="dark"] .mk { filter: brightness(0) invert(.94); opacity: .92; } 
.r-kind { color: var(--muted); }
.r-title { color: var(--ink); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; margin-top: .4rem; }
.r-meta { font-size: .95rem; line-height: 1.45; margin-top: .35rem; }
@media (min-width: 640px) { .recog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .recog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (forced-colors: active) { .mk { filter: none; opacity: 1; } }

/* ── News list ────────────────────────────────────────────────────────── */
.news { list-style: none; border-top: 1px solid var(--rule); }
.news > li { border-bottom: 1px solid var(--rule); }
.news article { display: grid; gap: .6rem 2rem; padding: 1.6rem 0; scroll-margin-top: calc(var(--head-h) + 16px); }
.news .n-mark { height: 48px; display: flex; align-items: center; }
.news .n-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; color: var(--muted); }
.news h2, .news h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; max-width: 34ch; }
.news p { max-width: 40rem; }
.news a.title-link { text-decoration: none; }
.news a.title-link:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime); }
@media (min-width: 860px) { .news article { grid-template-columns: 11rem minmax(0, 1fr); } .news .n-mark { grid-row: span 3; height: 56px; } }

/* ── App band (phone + demo video, from createapps) ───────────────────── */
.app-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.band .sub { margin-top: 1rem; max-width: 32rem; color: var(--band-ink); }
.feature-list { list-style: none; margin-top: 1.8rem; display: grid; gap: 0; border-top: 1px solid var(--band-rule); max-width: 36rem; }
.feature-list li { padding: 1rem 0; border-bottom: 1px solid var(--band-rule); display: grid; gap: .2rem; }
.feature-list b { font-weight: 800; font-size: 1.05rem; color: var(--band-ink); }
.feature-list span { color: var(--band-ink); opacity: .86; font-size: .98rem; line-height: 1.5; }
.note { margin-top: 1.8rem; max-width: 34rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding: 1rem 1.1rem; border-radius: 6px; background: rgba(26, 26, 26, .08); font-size: .98rem; line-height: 1.5; }
 :root[data-theme="dark"] .note { background: rgba(214, 227, 0, .08); } 
.note svg { width: 20px; height: 20px; margin-top: .1rem; }
.note b { font-weight: 800; }
figure.demo { justify-self: center; width: min(100%, 230px); margin: 0; }
@media (min-width: 860px) { figure.demo { width: clamp(210px, calc((100svh - 250px) * .46), 300px); } .app-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.phone { position: relative; aspect-ratio: 9 / 19.5; border-radius: 38px; background: #0E0E0D; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
.screen { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #2B2C22 0%, #161614 60%); }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vctl { margin-top: 1rem; display: flex; justify-content: center; gap: .5rem; }
.vctl button { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem .4rem .7rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: var(--band-ink); font-size: .85rem; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; }
.vctl button:hover { background: var(--band-ink); color: var(--band); }
.vctl svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.vctl .i-play, .vctl [aria-pressed="true"] .i-pause, .vctl .i-on, .vctl [aria-pressed="true"] .i-off { display: none; }
.vctl [aria-pressed="true"] .i-play, .vctl [aria-pressed="true"] .i-on { display: block; }
.demo figcaption { margin-top: .9rem; text-align: center; font-size: .9rem; color: var(--band-muted); }

/* ── Product list (supplements) ───────────────────────────────────────── */
.formulas { list-style: none; margin-top: 1.75rem; border-top: 1px solid var(--rule); }
.formulas li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.formulas b { color: var(--ink); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.formulas span { font-size: .98rem; line-height: 1.5; }
.formulas .status { margin-left: .4rem; vertical-align: 2px; }
.ticks { list-style: none; margin-top: 1.5rem; display: grid; gap: .65rem; max-width: 36rem; }
.ticks li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: .75rem; height: .4rem; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
 :root:not([data-theme="dark"]) .ticks li::before { border-color: var(--ink); } 
.night .ticks li::before { border-color: var(--lime); }
.cta-row { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* ── Flow (how Kwelix fits) ───────────────────────────────────────────── */
.flow { list-style: none; counter-reset: f; display: grid; gap: 0; margin-top: clamp(2rem, 5vw, 3rem); }
.flow li { counter-increment: f; position: relative; padding: 1.2rem 0 1.2rem 3.25rem; border-top: 1px solid var(--night-rule); }
.flow li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem; font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }
.flow b { display: block; color: var(--night-ink); font-weight: 800; font-size: 1.1rem; }
.flow span { color: var(--night-text); font-size: .98rem; line-height: 1.5; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.5rem; }
  .flow li { padding: 3rem 0 0; border-top: 2px solid var(--night-rule); }
  .flow li::before { top: .9rem; }
  .flow li::after { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
}

/* ── Data rows (definition list) ──────────────────────────────────────── */
.dl { display: grid; border-top: 1px solid var(--rule); }
.dl > div { display: grid; gap: .3rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.dl dt { color: var(--ink); font-weight: 800; }
.dl dd { max-width: 40rem; }
@media (min-width: 760px) { .dl > div { grid-template-columns: 14rem minmax(0, 1fr); } }

/* ── Press: brand specimens (literal colours in both themes) ──────────── */
.specimens { display: grid; gap: 1rem; }
.spec { border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); }
.spec .plate { height: 150px; display: grid; place-items: center; }
.spec .plate svg { height: 2.1rem; width: auto; }
.spec .cap { padding: .8rem 1rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; background: var(--card); }
.spec .cap b { color: var(--ink); }
.swatches { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.swatches li { border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); }
.swatches .chip { height: 96px; }
.swatches .cap { padding: .7rem .9rem; background: var(--card); font-size: .9rem; line-height: 1.35; }
.swatches .cap b { display: block; color: var(--ink); }
.swatches code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .85rem; color: var(--muted); }
.typespec { border: 1px solid var(--rule); border-radius: 8px; padding: 1.4rem 1.4rem 1.5rem; background: var(--card); }
.typespec .big { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.typespec ul { list-style: none; margin-top: 1rem; display: grid; gap: .35rem; color: var(--ink); }
@media (min-width: 900px) { .specimens { grid-template-columns: 1fr 1fr; } .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dodont { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3rem); }
.dodont h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.dodont .yes ul, .dodont .no ul { list-style: none; display: grid; gap: .55rem; }
.dodont .yes li, .dodont .no li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); line-height: 1.45; }
.dodont .yes li::before { content: '\2713'; font-weight: 800; color: #2E7D4A; }
.dodont .no li::before { content: '\2715'; font-weight: 800; color: #B4233F; }
 :root[data-theme="dark"] .dodont .yes li::before { color: #6FCF8E; } :root[data-theme="dark"] .dodont .no li::before { color: #FF7A93; } 
@media (min-width: 760px) { .dodont { grid-template-columns: 1fr 1fr; } }

/* ── Contact page ─────────────────────────────────────────────────────── */
.contact-layout { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 960px) { .contact-layout { grid-template-columns: 7fr 5fr; align-items: start; } }
.form { display: grid; gap: 1.15rem; max-width: 40rem; }
.field { display: grid; gap: .45rem; }
.field label { color: var(--ink); font-weight: 700; font-size: .95rem; }
.field .opt { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
.field [aria-invalid="true"] { border-color: #B4233F; }
.err { color: #B4233F; font-size: .9rem; font-weight: 600; }
 :root[data-theme="dark"] .err { color: #FF7A93; } :root[data-theme="dark"] .field [aria-invalid="true"] { border-color: #FF7A93; } 
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 1rem 1.1rem; border-radius: 6px; font-weight: 600; }
.form-status.ok { background: rgba(214, 227, 0, .28); color: var(--ink); }
.form-status.bad { background: rgba(180, 35, 63, .1); color: var(--ink); border: 1px solid rgba(180, 35, 63, .4); }
.form .small { font-size: .88rem; color: var(--muted); }
.aside-block + .aside-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.aside-block .label { color: var(--muted); margin-bottom: .7rem; }
.aside-block ul { list-style: none; display: grid; gap: .7rem; }
.aside-block a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .15s; }
.aside-block a:hover { border-color: var(--ink); }
.aside-block .who { display: block; color: var(--muted); font-size: .92rem; }
.aside-block address { font-style: normal; color: var(--ink); line-height: 1.5; }
.aside-block address + address { margin-top: .9rem; }
.aside-block address span { display: block; color: var(--muted); font-size: .92rem; }

/* ── Legal pages ──────────────────────────────────────────────────────── */
.legal { display: grid; gap: 2.5rem; }
.toc { font-size: .95rem; }
.toc .label { color: var(--muted); margin-bottom: .7rem; }
.toc ol { list-style: none; display: grid; gap: .1rem; counter-reset: t; }
.toc a { display: block; padding: .35rem 0; color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.doc { max-width: 44rem; }
.doc h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 2.5rem 0 .75rem; scroll-margin-top: calc(var(--head-h) + 16px); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { line-height: 1.7; }
.doc p + p { margin-top: .9rem; }
.doc ul { margin: .75rem 0 0 1.2rem; display: grid; gap: .45rem; }
.doc a { color: var(--ink); font-weight: 600; }
.doc .stamp { color: var(--muted); }
@media (min-width: 1000px) { .legal { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; } .toc { position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; } }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band .wrap { display: grid; gap: 2rem; }
.cta-band h2 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.035em; max-width: 14ch; }
.cta-band p { max-width: 34rem; margin-top: 1rem; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* Big mail link (press, contact) */
.big-mail { display: inline-block; margin-top: 1.25rem; color: var(--night-ink); text-decoration: none; font-size: clamp(1.7rem, 7vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; border-bottom: 3px solid var(--lime); padding-bottom: .15rem; overflow-wrap: anywhere; transition: color .15s; }
.big-mail:hover { color: var(--lime); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { background: var(--night); color: var(--night-text); padding-block: clamp(3rem, 8vw, 5rem) calc(2rem + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; gap: 2.5rem; }
.foot-brand .wordmark { color: var(--night-ink); height: 1.6rem; }
.foot-brand p { margin-top: 1rem; color: var(--night-muted); max-width: 22rem; font-size: .95rem; line-height: 1.55; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.foot-cols .label { color: var(--night-muted); margin-bottom: .8rem; }
.foot-cols ul { list-style: none; display: grid; gap: .1rem; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 36px; color: var(--night-ink); text-decoration: none; font-size: .95rem; }
.foot-cols a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.foot-cols li:has(.soon) { display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; }
.foot-cols .soon { color: var(--night-muted); font-size: .8rem; white-space: nowrap; }
.foot-legal { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--night-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; color: var(--night-muted); font-size: .85rem; }
.foot-legal a { color: var(--night-muted); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 4fr 8fr; } .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.nf { min-height: calc(100dvh - var(--head-h)); display: grid; align-content: center; padding-block: 4rem; }
.nf .code { color: var(--muted); }
.nf h1 { font-size: clamp(2.6rem, 9vw, 6rem); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin-top: 1rem; max-width: 12ch; }
.nf p { margin-top: 1.25rem; max-width: 34rem; }
.nf .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Smooth scroll (Lenis) ────────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ── Motion: one entrance, gentle reveals, then stillness ─────────────── */
html.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.motion .reveal.in { opacity: 1; transform: none; }
@media (hover: hover) { .person { transition: box-shadow .25s; } .person:hover { box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease-out) forwards; }
  .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print { .top, .site-foot, .menu-panel, .skip { display: none !important; } body { background: #fff; color: #000; } }

/* Small phones (320px) */
.foot-cols > * { min-width: 0; }
.foot-cols a { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .formulas li { grid-template-columns: 5.25rem minmax(0, 1fr); gap: .75rem; }
  .jump a { padding-inline: .8rem .85rem; font-size: .9rem; }
}
.menu-panel > ul > li > a svg { width: 22px; height: 22px; flex: none; color: var(--muted); }

/* ── Liquid glass (shared Kwelio implementation: Kwelio Drive/Shared-Resources/Liquid-Glass-UI) ── */
:root {
  /* ---- the scene light -----------------------------------------------------
     ONE light for the whole interface. Two surfaces lit from different
     directions is what makes an interface look assembled rather than made.

     SVG measures azimuth counter-clockwise from +x in a y-DOWN space, so the
     compass is not the one you would guess:

        top 270   top right 315   right 0    bottom right 45
        bottom 90   bottom left 135   left 180   top left 225

     Pick the direction from context: match wherever the page's own background
     is brightest; default to top or top-left; give a surface at the bottom of
     the screen a key from above and a weak fill from below (that is bounce);
     two opposed lights read as a thick edge-lit slab. */
  --lg-azimuth: 225;
  --lg-elevation: 62;
  --lg-fill-azimuth: 45;          /* the bounce; usually azimuth + 180 */
  --lg-fill-elevation: 16;
  --lg-light-color: #fff;

  /* ---- the surface --------------------------------------------------------- */
  --lg-tint: 255 255 255;         /* liquid-glass.js overwrites this when sampling */
  --lg-tint-a: 0.10;
  --lg-blur: 2px;                 /* 0–4px. Heavy blur destroys what you just bent */
  --lg-saturate: 1.08;
  --lg-brightness: 1.06;
  --lg-solid: #EEF0F4;            /* tier 0 fallback */

  --lg-rim: 255 255 255;
  --lg-rim-a: 0.90;
  --lg-shadow: 0 0 0;

  --lg-ease: cubic-bezier(.32, 1.4, .4, 1);
}

/* ---- the surface ---------------------------------------------------------- */
.lg {
  position: relative;
  isolation: isolate;
  background: rgb(var(--lg-tint) / var(--lg-tint-a));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
  box-shadow:
    inset 0 0 0 1px rgb(var(--lg-rim) / .45),
    inset 0 -8px 18px -14px rgb(var(--lg-shadow) / .30),
    0 16px 24px -18px rgb(var(--lg-shadow) / .34);
  transition: background .4s ease;
}
.lg--dome { border-radius: 50%; }
.lg--pane { border-radius: 28px; }

/* Tier 2 is added by liquid-glass.js, which sets --lg-lens to url(#…) only on
   an engine that actually renders it. */
.lg[data-lg-lens='on'] {
  backdrop-filter: var(--lg-lens) blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
}

/* ---- the embedded light ---------------------------------------------------
   A real specular, computed by feSpecularLighting from the surface's own height
   field. This is an ordinary `filter:` on a child, so it works in every browser
   — the lit control survives wherever the lens does not. No blend mode: the
   filter already outputs white on transparent, and `screen` here leaves a seam
   where the element's own background ends. */
.lg > .lg-lit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: .92;
  filter: var(--lg-light);
}

/* ---- the caustic ----------------------------------------------------------
   A dome focuses light into a bright smear on the far side from the key.
   Without it the surface reads as a decal. Positioned opposite the light by
   liquid-glass.js. */
.lg > .lg-caustic {
  position: absolute;
  inset: 14%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(70% 48% at var(--lg-caustic-x, 68%) var(--lg-caustic-y, 84%),
    rgb(var(--lg-rim) / .5), transparent 66%);
  filter: blur(7px);
}

.lg > *:not(.lg-lit):not(.lg-caustic) { position: relative; z-index: 2; }

/* ---- liquid ---------------------------------------------------------------
   A dome that slides rigidly is glass, not liquid glass. The overshoot is what
   reads as mass in a fluid. */
.lg--travels {
  transition: translate .58s var(--lg-ease), scale .34s ease, background .4s ease;
}
.lg--travels[data-lg-moving='true'] { scale: 1.10 .93; }

/* ---- tier 0 ---------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .lg {
    background: var(--lg-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lg > .lg-lit, .lg > .lg-caustic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg, .lg--travels { transition: none; }
  .lg--travels[data-lg-moving='true'] { scale: 1; }
}

/* Kwelio palette for the glass surface. One scene light, top left, matching the field's brightest bloom. */
:root { --lg-azimuth: 225; --lg-elevation: 62; --lg-fill-azimuth: 45; --lg-tint: 255 255 255; --lg-tint-a: .10; --lg-solid: #FBF9F4; --lg-rim: 255 255 255; --lg-shadow: 70 60 20; }
 :root[data-theme="dark"] { --lg-tint: 242 238 228; --lg-tint-a: .06; --lg-solid: #1B1B19; --lg-rim: 242 238 228; --lg-rim-a: .5; --lg-shadow: 0 0 0; } 

/* ── Sara on glass ────────────────────────────────────────────────────── */
.sara-stage { position: relative; aspect-ratio: 610 / 860; border-radius: 28px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(62% 48% at 16% 10%, rgba(214, 227, 0, .62), transparent 70%),
    radial-gradient(48% 40% at 92% 58%, rgba(225, 47, 81, .16), transparent 72%),
    radial-gradient(56% 42% at 22% 92%, rgba(108, 176, 156, .30), transparent 72%),
    var(--bg-2); }
.sara-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .55;
  background-image: radial-gradient(rgba(26, 26, 26, .22) 1.1px, transparent 1.5px); background-size: 16px 16px;
  -webkit-mask: linear-gradient(160deg, #000 10%, transparent 75%); mask: linear-gradient(160deg, #000 10%, transparent 75%); }

  :root[data-theme="dark"] .sara-stage { background:
    radial-gradient(62% 48% at 16% 10%, rgba(214, 227, 0, .30), transparent 70%),
    radial-gradient(48% 40% at 92% 58%, rgba(255, 122, 147, .14), transparent 72%),
    radial-gradient(56% 42% at 22% 92%, rgba(108, 176, 156, .22), transparent 72%),
    #1C1C19; }
  :root[data-theme="dark"] .sara-stage::before { background-image: radial-gradient(rgba(242, 238, 228, .2) 1.1px, transparent 1.5px); }

.sara-glass { position: absolute; inset: 18% 7% 6% 7%; z-index: 1; border-radius: 28px; }
.sara-glass > .lg-lit { opacity: .6; }
.sara-cut { position: absolute; right: 0; bottom: 0; z-index: 3; height: 94%; width: auto; max-width: none;
  filter: drop-shadow(0 24px 30px rgba(40, 32, 10, .22)); }
 :root[data-theme="dark"] .sara-cut { filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .55)); } 

/* ── Partner credit ───────────────────────────────────────────────────── */
.partner { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); max-width: 34rem; }
.partner .label { color: var(--muted); }
.partner .p-name { color: var(--ink); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.partner img { height: 52px; width: auto; }
 :root[data-theme="dark"] .partner .p-logo { filter: brightness(0) invert(.94); } 
.night .partner .p-logo { filter: brightness(0) invert(.94); }
.night .partner { border-color: var(--night-rule); background: var(--night-2); }
.night .partner .label { color: var(--night-muted); }
.night .partner .p-name { color: var(--night-ink); }

/* ── Beads on glass ─────────────────────────────────────────────────────
   Four stages, each a light field with a Tier 1 glass pane in it and the capsule
   standing on the pane. The lens (Tier 2) stays off: lenses go on one or two
   chrome surfaces, never on a set of cards. What a person reads sits on an
   opaque sheet, never on the glass. */
.beads-fig { min-width: 0; }
@media (min-width: 900px) { .split.beads-split { grid-template-columns: 7fr 5fr; } .beads-split > .beads-fig { order: -1; } }
.beads { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.1rem); }
.bead { --b1: rgba(214, 227, 0, .55); --b2: rgba(108, 176, 156, .28);
  position: relative; aspect-ratio: 10 / 11; border-radius: 26px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(72% 56% at 16% 6%, var(--b1), transparent 70%),
    radial-gradient(60% 50% at 90% 96%, var(--b2), transparent 72%),
    var(--bg-2); }
.bead::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(26, 26, 26, .22) 1.1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask: linear-gradient(165deg, #000 8%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .35)); mask: linear-gradient(165deg, #000 8%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .35)); }
.bead--core { --b1: rgba(232, 84, 42, .34); --b2: rgba(214, 227, 0, .34); }
.bead--skin { --b1: rgba(233, 190, 50, .50); --b2: rgba(214, 227, 0, .26); }
.bead--antiox { --b1: rgba(150, 34, 46, .26); --b2: rgba(232, 84, 42, .18); }

  :root[data-theme="dark"] .bead { --b1: rgba(214, 227, 0, .24); --b2: rgba(108, 176, 156, .18); background:
    radial-gradient(72% 56% at 16% 6%, var(--b1), transparent 70%),
    radial-gradient(60% 50% at 90% 96%, var(--b2), transparent 72%), #1C1C19; }
  :root[data-theme="dark"] .bead::before { background-image: radial-gradient(rgba(242, 238, 228, .18) 1.1px, transparent 1.5px); }
  :root[data-theme="dark"] .bead--core { --b1: rgba(232, 84, 42, .26); --b2: rgba(214, 227, 0, .16); }
  :root[data-theme="dark"] .bead--skin { --b1: rgba(233, 190, 50, .26); --b2: rgba(214, 227, 0, .14); }
  :root[data-theme="dark"] .bead--antiox { --b1: rgba(200, 52, 66, .26); --b2: rgba(232, 84, 42, .14); }

.bead-btn { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit;
  background: none; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bead-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; border-radius: 24px; }
.bead-glass { --lg-tint-a: .05; --lg-brightness: 1.02; position: absolute; inset: 31% 8% 7% 8%; z-index: 1; border-radius: 22px; }
.bead-glass > .lg-lit { opacity: .5; }
.bead-glass > .lg-caustic { opacity: .55; }
 :root[data-theme="dark"] .bead-glass { --lg-tint-a: .05; } :root[data-theme="dark"] .bead-glass > .lg-caustic { opacity: .3; } 
.bead-cut { --h: 69%; --cx: .236; position: absolute; z-index: 3; left: 50%; bottom: 10%; height: var(--h); width: auto; max-width: none;
  transform: translateX(calc(var(--cx) * -100%)); pointer-events: none; transition: translate .5s var(--ease-out);
  filter: drop-shadow(0 18px 18px rgba(40, 32, 10, .12)); }
.bead--range .bead-cut { left: 10%; bottom: 9%; width: 80%; height: auto; transform: none; }
 :root[data-theme="dark"] .bead-cut { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); } 
.bead-head { position: absolute; z-index: 4; top: 1rem; left: 1.1rem; right: 3.6rem; display: grid; gap: .15rem; }
.bead-name { color: var(--ink); font-weight: 800; font-size: 1.1rem; letter-spacing: -.015em; line-height: 1.2; }
.bead-kind { color: var(--text); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.bead-plus { position: absolute; z-index: 4; top: .8rem; right: .8rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--ink); box-shadow: 0 1px 0 rgba(26, 26, 26, .06), 0 6px 14px -8px rgba(40, 32, 10, .45); }
.bead-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; transition: rotate .3s var(--ease-out); }
.bead.open .bead-plus svg { rotate: 45deg; }
.bead-desc { position: absolute; z-index: 5; left: .6rem; right: .6rem; bottom: .6rem; padding: .95rem 1.05rem 1rem; border-radius: 18px;
  background: var(--card); color: var(--text); font-size: .9rem; line-height: 1.5; pointer-events: none;
  box-shadow: 0 1px 0 rgba(26, 26, 26, .05), 0 20px 34px -20px rgba(40, 32, 10, .5);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .18s ease, transform .3s var(--ease-out), visibility 0s linear .3s; }
.bead-foot { margin-top: .55rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) {
  .bead:hover .bead-desc { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--ease-out), visibility 0s; }
  .bead:hover .bead-cut { translate: 0 -6px; }
}
.bead.open .bead-desc { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--ease-out), visibility 0s; }
.bead.hush:not(.open) .bead-desc { opacity: 0; visibility: hidden; transform: translateY(14px); }
.beads-hint { color: var(--muted); font-size: .95rem; }
.beads-next { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ink); font-weight: 700; }
.beads-next .status { margin-left: 0; }
@media (max-width: 599px) {
  .beads { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; margin-inline: calc(-1 * var(--gutter));
    padding: .25rem var(--gutter) .5rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .beads::-webkit-scrollbar { display: none; }
  .bead { flex: 0 0 min(80%, 19rem); scroll-snap-align: start; aspect-ratio: 10 / 12; }
  .bead-desc { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bead-desc, .bead-cut, .bead-plus svg { transition: none; }
  .bead:hover .bead-cut { translate: none; }
}

/* ── Parallax video band ──────────────────────────────────────────────────
   A full-bleed clip behind a short statement. The clip moves slower than the
   page (site.js), plays only while on screen, and never starts by itself under
   reduced motion. Text sits on a strong scrim, never on the bare footage. */
.vband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(30rem, 86vh, 52rem); padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  background: #0E0E0D; color: #DAD6CB; }
.vband-media { position: absolute; left: 0; right: 0; top: -16%; bottom: -16%; z-index: -2; will-change: transform; }
.vband-media video, .vband-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vband::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 12, 11, .9) 0%, rgba(12, 12, 11, .62) 36%, rgba(12, 12, 11, .14) 78%),
              linear-gradient(to right, rgba(12, 12, 11, .5), rgba(12, 12, 11, 0) 70%); }
.vband .wrap { position: relative; }
.vband .kicker { color: #C9C5BA; }
.vband h2 { color: #F2EEE4; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.035em; max-width: 15ch; }
.vband .hl { box-shadow: none; color: var(--lime); }
.vband p.vb-lead { margin-top: 1.1rem; max-width: 34rem; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.55; color: #E4E0D6; }
.vband .more { color: #F2EEE4; border-bottom-color: var(--lime); margin-top: 1.6rem; }
.vband .btn { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); margin-top: 1.6rem; }
.vband .btn:hover { background: transparent; color: var(--lime); }
.vband :focus-visible { outline-color: var(--lime); }
.vb-toggle { position: absolute; right: var(--gutter); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .35rem .85rem; border-radius: 999px; border: 1px solid rgba(242, 238, 228, .35); background: rgba(12, 12, 11, .55);
  color: #F2EEE4; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.vb-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.vb-toggle .i-play, .vb-toggle[aria-pressed="true"] .i-pause { display: none; }
.vb-toggle[aria-pressed="true"] .i-play { display: block; }
@media (prefers-reduced-motion: reduce) { .vband-media { top: 0; bottom: 0; } }

/* ── Product page hero ────────────────────────────────────────────────── */
.phero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.phero .lead { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.phero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.phero-media { margin: 0; position: relative; border-radius: 28px; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.phero-media video, .phero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phero-media figcaption { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; padding: .35rem .7rem; border-radius: 999px; background: rgba(12, 12, 11, .62); color: #F2EEE4; font-size: .78rem; font-weight: 600; }
@media (min-width: 900px) { .phero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.crumbs { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-bottom: 1.2rem; font-size: .88rem; color: var(--muted); }
.crumbs a { color: var(--text); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs span[aria-hidden] { opacity: .5; }

/* ── Steps (how to open and use) ──────────────────────────────────────── */
.steps { list-style: none; counter-reset: step; display: grid; gap: clamp(2.5rem, 7vw, 5rem); }
.step { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.step-media { margin: 0; border-radius: 24px; overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 5; max-height: 34rem; }
.step-media img, .step-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 1rem; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.025em; line-height: 1.08; }
.step p { margin-top: .8rem; max-width: 32rem; }
.step .tip { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--card); border: 1px solid var(--rule); font-size: .95rem; max-width: 32rem; }
@media (min-width: 860px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .step-media { aspect-ratio: 4 / 5; }
}

/* ── Product link cards and specification lists ───────────────────────── */
.plinks { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 760px) { .plinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plink { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--rule); text-decoration: none; color: inherit; transition: border-color .2s; }
.plink:hover { border-color: var(--ink); }
.plink .pl-media { aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
.plink .pl-media img, .plink .pl-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.plink:hover .pl-media img { transform: scale(1.03); }
.plink .pl-body { padding: 1.25rem 1.35rem 1.4rem; display: grid; gap: .45rem; align-content: start; }
.plink h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.plink p { color: var(--text); }
.plink .go { margin-top: .5rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); }
.plink .go svg { width: 16px; height: 16px; }
.specs { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.specs > div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.specs dt { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.specs dd { color: var(--ink); line-height: 1.5; }
@media (min-width: 760px) { .specs > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; } }
.disclaimer { margin-top: 2rem; padding: 1rem 1.15rem; border-radius: 12px; background: var(--bg-2); color: var(--text); font-size: .9rem; line-height: 1.55; max-width: 44rem; }
.lio-mark { display: inline-flex; align-items: baseline; gap: .3em; color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.lio-mark svg { height: .8em; width: auto; }
.vb-toggle .t-play, .vb-toggle[aria-pressed="true"] .t-pause { display: none; }
.vb-toggle[aria-pressed="true"] .t-play { display: inline; }
.phero-media .vb-toggle, .step-media .vb-toggle, .media-frame .vb-toggle { right: .8rem; bottom: .8rem; }
.step-media, .media-frame { position: relative; }
.media-frame { margin: 0; border-radius: 24px; overflow: hidden; background: #0E0E0D; }
.media-frame video, .media-frame img { display: block; width: 100%; height: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bead--osana { --b1: rgba(200, 70, 190, .26); --b2: rgba(232, 160, 40, .26); }
 :root[data-theme="dark"] .bead--osana { --b1: rgba(200, 70, 190, .22); --b2: rgba(232, 160, 40, .14); } 
.bead--osana .bead-cut { left: 9%; bottom: 13%; width: 82%; height: auto; transform: none; }
.bead-kind .status { margin-left: .35rem; vertical-align: 1px; font-size: .62rem; padding: .15rem .5rem; }
@media (hover: hover) { .bead:hover .bead-desc { pointer-events: auto; } }
.bead.open .bead-desc { pointer-events: auto; }
.bead.hush:not(.open) .bead-desc { pointer-events: none; }
.bead-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .65rem; font-weight: 700; font-size: .85rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--lime); }
 :root:not([data-theme="dark"]) .bead-more { border-bottom-color: var(--ink); } 
.bead-more svg { width: 14px; height: 14px; }
/* large stage on a formula page */
.bead-xl { margin: 0; aspect-ratio: 4 / 5; border-radius: 30px; }
.bead-xl .bead-glass { inset: 24% 9% 7% 9%; border-radius: 26px; }
.bead-xl .bead-cut { --h: 74%; bottom: 9%; }
.bead-xl.bead--osana .bead-cut { left: 8%; width: 84%; bottom: 16%; }
/* two cards side by side */
.vcards { list-style: none; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.vcard .status { white-space: normal; max-width: 100%; }
@media (min-width: 860px) { .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vcard { padding: clamp(1.4rem, 3vw, 2rem); border-radius: 22px; background: var(--card); border: 1px solid var(--rule); display: grid; gap: .8rem; align-content: start; }
.vcard .status { justify-self: start; }
.vcard h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); letter-spacing: -.02em; }
.vcard .partner { margin-top: .4rem; }
.plinks-3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .plinks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plinks-3 .plink { grid-template-rows: 1fr; }
.phero .eyebrow .lio-mark { font-size: 1.6rem; letter-spacing: -.03em; text-transform: none; }
.phero-media.bead { border-radius: 30px; }
.top-tools { display: flex; align-items: center; gap: .6rem; }
/* Parallax hero (sub sites) */
.vhero { min-height: min(100svh, 56rem); padding-top: calc(var(--head-h) + 3rem); }
.vhero h1 { color: #F2EEE4; font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; max-width: 13ch; }
.vhero .hl { box-shadow: none; color: var(--lime); }
.vb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.vb-actions .btn, .vb-actions .more { margin-top: 0; }
/* Brand lockups for the sub sites */
.lockup { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.lockup .wordmark { height: 1.35rem; }
.lk-tag { font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; border: 1.5px solid currentColor; line-height: 1; }
.lk-pre { font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.wordtype { font-weight: 800; font-size: 1.45rem; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.wordtype i { font-style: normal; color: var(--lime); }
 :root:not([data-theme="dark"]) .wordtype i { color: #6C7300; } 
.site-foot .lockup, .site-foot .wordtype { color: var(--night-ink); }
/* Simple forms on sub sites */
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; max-width: 34rem; }
.inline-form input[type="email"] { flex: 1 1 16rem; min-height: 52px; padding: .8rem 1rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; }
.inline-form input[type="email"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.band .inline-form input[type="email"] { border-color: rgba(26, 26, 26, .35); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.night .specs, .night .specs > div { border-color: var(--night-rule); }
.night .specs dt { color: var(--night-muted); }
.night .specs dd { color: var(--night-ink); }
.night .specs a { color: var(--night-ink); }

/* ── 5 Oct, second pass: Beads label data, Journal, viewport-fitted video ─────────────────── */
/* A 16:9 clip never taller than the space under the header */
.media-frame.fit-view { width: min(100%, 46rem, calc((100svh - var(--head-h) - 10rem) * 16 / 9)); margin-inline: auto; }
@supports not (height: 100svh) { .media-frame.fit-view { width: min(100%, 46rem, calc((100vh - var(--head-h) - 10rem) * 16 / 9)); } }
@media (min-width: 960px) { .motion-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .motion-split .media-frame.fit-view { margin-inline: 0 0; justify-self: end; } }
/* Portrait clip (LioBox animation): sized from the viewport height so the whole frame fits on screen */
.media-frame.portrait-clip { aspect-ratio: 9 / 16; width: min(100%, calc(min(36rem, 100vh - var(--head-h) - 7rem) * 9 / 16)); margin-inline: auto; }
@supports (height: 100svh) { .media-frame.portrait-clip { width: min(100%, calc(min(36rem, 100svh - var(--head-h) - 7rem) * 9 / 16)); } }
.media-frame.portrait-clip video, .media-frame.portrait-clip img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) { .motion-split .media-frame.portrait-clip { justify-self: center; } }

/* Beads by Kwelio mark (icon from the product labels) */
.beads-mark { display: inline-flex; align-items: center; gap: .55em; color: var(--ink); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.beads-icon { height: 1.55em; width: auto; flex: none; }

/* Supplement facts table */
.sfacts-wrap { display: grid; gap: 1rem; }
.sfacts { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.sfacts caption { text-align: left; font-weight: 800; color: var(--ink); padding: 0 0 .6rem; font-size: 1rem; }
.sfacts th, .sfacts td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: .95rem; line-height: 1.4; }
.sfacts thead th { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--bg-2); }
.sfacts tbody th { color: var(--ink); font-weight: 700; }
.sfacts td { color: var(--text); }
.sfacts .num { text-align: right; white-space: nowrap; }
.sfacts td.num { color: var(--ink); font-weight: 700; }
.sfacts tr.sf-group th { background: var(--bg-2); color: var(--ink); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding-top: .9rem; }
.sfacts tbody tr:last-child th, .sfacts tbody tr:last-child td { border-bottom: 0; }
.sf-foot { font-size: .88rem; color: var(--muted); max-width: 48rem; }
.sf-capsule ul { list-style: none; display: grid; gap: .35rem; margin-top: .4rem; }
.sf-capsule li { font-size: .92rem; } .sf-capsule li b { color: var(--ink); } .sf-capsule li span { color: var(--muted); }
.sf-capsule .label { color: var(--muted); }
@media (max-width: 640px) {
  .sfacts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sfacts, .sfacts tbody, .sfacts tr, .sfacts th, .sfacts td { display: block; }
  .sfacts caption { display: block; width: 100%; padding: .9rem .9rem .3rem; }
  .sfacts tbody tr { display: grid; grid-template-columns: 1fr auto auto; gap: .1rem .8rem; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); }
  .sfacts tbody tr:last-child { border-bottom: 0; }
  .sfacts tbody th, .sfacts td { padding: 0; border: 0; }
  .sfacts tbody tr td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; font-size: .85rem; color: var(--muted); }
  .sfacts tr.sf-group { display: block; padding: .7rem .9rem .5rem; background: var(--bg-2); }
}

/* Ingredient notes */
.inotes { list-style: none; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.inotes li { background: var(--bg); padding: 1.2rem 1.25rem 1.3rem; }
.alt .inotes li { background: var(--bg-2); }
.inotes h3 { font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.005em; }
.inotes p { margin-top: .35rem; font-size: .95rem; line-height: 1.5; }
@media (min-width: 760px) { .inotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .inotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reads { margin-top: 1.75rem; } .reads .label { color: var(--muted); }
.reads ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .5rem; }
.reads a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--lime); }
.reads a svg { width: 14px; height: 14px; }

/* Certification marks (one colour; follow the theme) */
.certs { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .7rem; }
.cert { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); padding: .55rem; }
.cert img { width: 100%; height: 100%; object-fit: contain; opacity: .88; }
 :root[data-theme="dark"] .cert img { filter: invert(.94); } 
.cert-text { text-align: center; line-height: 1; color: var(--ink); }
.cert-text span { font-weight: 800; font-size: .92rem; letter-spacing: -.02em; }
.cert-text small { display: block; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .25rem; color: var(--muted); }
.label-facts { margin-top: 1.1rem; }
.label-facts li { font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); color: var(--text); }

/* Journal */
.j-lead { padding: clamp(1.5rem, 4vw, 2.5rem) 0 2rem; border-top: 1px solid var(--rule); }
.j-lead h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; max-width: 24ch; margin-top: .6rem; color: var(--ink); }
.j-lead .lead { margin-top: .8rem; max-width: 40rem; }
.j-lead a.title-link { text-decoration: none; }
.j-lead a.title-link:hover h2 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--lime); }
.j-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; color: var(--muted); }
.j-list a.title-link:hover .j-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime); }
.j-head { max-width: 46rem; margin-top: 1rem; }
.j-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: var(--ink); margin-top: .7rem; }
.j-head .lead { margin-top: 1rem; }
.j-body { max-width: 42rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); font-size: 1.06rem; line-height: 1.7; }
.j-body p { margin-top: 1rem; }
.j-body .j-h2 { font-size: clamp(1.3rem, 2.8vw, 1.65rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); margin-top: 2.4rem; }
.j-body ul, .j-body ol { margin: 1rem 0 0 1.2rem; display: grid; gap: .45rem; }
.j-body strong { color: var(--ink); }
.j-body .disclaimer { margin-top: 2.2rem; }
.cite { font-size: .7em; line-height: 0; margin-left: .1em; }
.cite a { color: var(--muted); text-decoration: none; font-weight: 700; padding: 0 .05em; }
.cite a:hover, .cite a:focus-visible { color: var(--ink); text-decoration: underline; }
.j-sources { max-width: 46rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.j-sources h2 { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.j-sources ol { margin: 1rem 0 0 1.4rem; display: grid; gap: .7rem; font-size: .92rem; line-height: 1.45; }
.j-sources li { scroll-margin-top: calc(var(--head-h) + 16px); overflow-wrap: anywhere; }
.j-sources li:target { background: var(--bg-2); border-radius: 6px; }
.j-sources a { color: var(--ink); font-weight: 600; }
.j-sources li span { display: block; color: var(--muted); }
.j-related { margin-top: 2rem; }
.j-list { list-style: none; border-top: 1px solid var(--rule); }
.j-list > li { border-bottom: 1px solid var(--rule); }
.j-list article { display: grid; gap: .5rem 2rem; padding: 1.6rem 0; }
.j-list .j-title { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; max-width: 34ch; color: var(--ink); }
.j-list p { max-width: 40rem; margin-top: .4rem; }
.j-list a.title-link { text-decoration: none; }
.j-side { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); }
.j-side .j-cat { color: var(--ink); }
@media (min-width: 900px) { .j-list article { grid-template-columns: 15rem minmax(0, 1fr); } .j-side { flex-direction: column; } }
.j-layout { display: grid; gap: 2rem; }
.j-aside { display: none; }
@media (min-width: 1100px) {
  .j-layout { grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 4rem; }
  .j-aside { display: block; }
  .j-toc { position: sticky; top: calc(var(--head-h) + 2rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-left: 1.25rem; border-left: 2px solid var(--lime); }
}
.j-toc .label { color: var(--muted); }
.j-toc ol { list-style: none; display: grid; gap: .55rem; margin-top: .7rem; }
.j-toc a { color: var(--text); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.j-toc a:hover, .j-toc a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.j-body .j-h2 { scroll-margin-top: calc(var(--head-h) + 16px); }

/* LioBox: what we are building with Dubai Health Innovations */
.next-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.next-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.next-list > li { padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--rule); display: grid; gap: .45rem; }
.next-list .label { color: var(--muted); }
.next-list h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); letter-spacing: -.01em; }
.next-list p { color: var(--muted); max-width: 38rem; }
.next-list .cta-row { margin-top: .5rem; align-items: center; }
@media (min-width: 960px) { .next-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .next-grid > div:first-child { position: sticky; top: calc(var(--head-h) + 2rem); } }

/* Adherence ecosystem diagram: real text in reading order, arrows drawn here.
   Phone: one column, every arrow points down, the Kwelix arrow loops back. Desktop: the loop as a 5 x 5 grid. */
.eco { --eco-line: color-mix(in srgb, var(--ink) 55%, transparent); --eco-card: var(--card); --eco-rule: var(--rule); --eco-muted: var(--muted); --eco-ink: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kw" "e0" "ins" "e1" "mem" "e2" "app" "e3" "kx" "e4" "e5" "lio"; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.eco.night-eco { --eco-line: color-mix(in srgb, var(--night-ink) 60%, transparent); --eco-card: var(--night-2); --eco-rule: var(--night-rule); --eco-muted: var(--night-muted); --eco-ink: var(--night-ink); margin-top: clamp(2rem, 4vw, 3rem); }
.eco-node { background: var(--eco-card); border: 1px solid var(--eco-rule); border-radius: 18px; padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: .45rem; align-content: start; min-width: 0; }
.eco-node .label { color: var(--eco-muted); margin: 0; }
.eco-title { font-weight: 800; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.015em; line-height: 1.15; color: var(--eco-ink); margin: 0; }
.eco-text { color: var(--eco-muted); font-size: .95rem; line-height: 1.5; margin: 0; }
.eco-node .status { justify-self: start; }
.eco.night-eco .status { border-color: var(--night-rule); color: var(--night-ink); }
.eco-node .partner { margin-top: .4rem; padding: .55rem .75rem; gap: .35rem .75rem; max-width: none; }
.eco-node .partner img { height: 40px; }
.eco-edge { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; gap: .75rem; padding: .7rem 0 .7rem calc(1.2rem - .625rem); min-height: 3.6rem; }
.eco-edge p { margin: 0; font-size: .85rem; line-height: 1.4; color: var(--eco-muted); max-width: 30rem; }
.eco-edge .ln { position: relative; justify-self: center; width: 0; height: 100%; min-height: 2.4rem; border-left: 1.5px dashed var(--eco-line); }
.eco-edge .ln::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 8px; height: 8px; border-right: 1.5px solid var(--eco-line); border-bottom: 1.5px solid var(--eco-line); transform: translate(-60%, 0) rotate(45deg); }
.eco-edge.dashed .ln::after { display: none; }
.eco-edge.back .ln { border-left-style: solid; border-color: transparent; }
.eco-edge.back .ln::before { content: ''; position: absolute; left: -.6rem; top: 15%; width: 1.1rem; height: 70%; border: 1.5px dashed var(--eco-line); border-right: 0; border-radius: 999px 0 0 999px; }
.eco-edge.back .ln::after { bottom: auto; top: 15%; left: .45rem; transform: translate(-50%, -50%) rotate(-45deg); }
.eco-edge.dashed { margin-top: 1rem; }
@media (min-width: 960px) {
  .eco { grid-template-columns: minmax(0, 1fr) minmax(8.5rem, .62fr) minmax(0, 1fr) minmax(7rem, .5fr) minmax(0, 1fr);
    grid-template-areas: "kw . . . ." "e0 . . . ." "ins e1 mem e5 lio" "e4 . e2 . lio" "kx e3 app . lio"; }
  .eco-node[style*="grid-area:kw"] { justify-self: start; padding: .8rem 1.1rem; }
  .eco-node[style*="grid-area:kw"] .label { display: none; }
  .eco-node[style*="grid-area:kw"] .eco-text { max-width: 17rem; font-size: .88rem; }
  .eco-node[style*="grid-area:lio"] { align-self: stretch; }
  /* horizontal edges: label above a dashed line with an arrowhead */
  .eco-edge.right, .eco-edge.left { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; padding: 0 .7rem; gap: .4rem; align-items: end; min-height: 0; }
  .eco-edge.right p, .eco-edge.left p { grid-row: 1; text-align: center; justify-self: center; font-size: .8rem; }
  .eco-edge.right .ln, .eco-edge.left .ln { grid-row: 2; width: 100%; height: 0; min-height: 0; border-left: 0; border-top: 1.5px dashed var(--eco-line); }
  .eco-edge.right .ln::after { left: auto; right: -1px; bottom: auto; top: 0; transform: translate(0, -50%) rotate(-45deg); }
  .eco-edge.left .ln::after { left: -1px; right: auto; bottom: auto; top: 0; transform: translate(0, -50%) rotate(135deg); }
  .eco-edge.dashed { margin-top: 0; }
  .eco-edge.up .ln::after { bottom: auto; top: -1px; transform: translate(-40%, 0) rotate(-135deg); }
  .eco-edge.back .ln { border-left: 1.5px dashed var(--eco-line); }
  .eco-edge.back .ln::before { display: none; }
  .eco-edge.back .ln::after { left: 50%; top: -1px; transform: translate(-40%, 0) rotate(-135deg); }
  .eco-edge.down, .eco-edge.up { min-height: 4.2rem; }
}
.eco-sub { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem; color: var(--muted); }
.eco-node .status { white-space: normal; }

/* Home: a proven idea (credit scores, telematics, KAS) as a timeline that lands on Kwelio */
.proven { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); counter-reset: none; }
.proven > li { position: relative; display: grid; align-content: start; gap: .45rem; padding: 1.5rem 0 1.6rem 2.1rem; border-bottom: 1px solid var(--rule); }
.proven > li::before { content: ''; position: absolute; left: .35rem; top: 1.9rem; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--muted); background: var(--bg); }
.proven > li::after { content: ''; position: absolute; left: calc(.35rem + 5px); top: calc(1.9rem + 13px); bottom: -1.9rem; width: 1px; background: var(--rule); }
.proven > li:last-child::after { display: none; }
.proven .yr { color: var(--muted); margin: 0; }
.proven h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); letter-spacing: -.02em; }
.proven p { max-width: 40rem; color: var(--text); }
.proven cite { font-style: normal; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.proven cite a { color: inherit; }
.proven li.now::before { background: var(--lime); border-color: var(--lime-ink); }
.proven li.now h3 { color: var(--ink); }
.proven li.now { padding-bottom: 1.9rem; }
.proven-note { margin-top: 1.5rem; max-width: 46rem; color: var(--muted); font-size: .95rem; }
.proven-note cite { font-style: normal; white-space: nowrap; }
.proven-note cite a { color: inherit; }
@media (min-width: 960px) {
  .proven { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .proven > li { padding: 2.4rem 1.8rem 0 0; border-bottom: 0; border-top: 1px solid var(--rule); }
  .proven > li::before { left: 0; top: -6px; }
  .proven > li::after { display: none; }
  .proven li.now { padding-bottom: 0; }
  .proven li.now { border-top: 2px solid var(--lime-ink); }
}

/* Home: where we're going */
.vision-lead { margin-top: 1.4rem; max-width: 44rem; display: grid; gap: .9rem; color: var(--night-muted); font-size: 1.05rem; }
.vision-grid { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--night-rule); }
.vision-grid > li { padding: 1.3rem 0 1.4rem; border-bottom: 1px solid var(--night-rule); display: grid; align-content: start; gap: .35rem; }
.vision-grid h3 { color: var(--night-ink); font-size: 1.2rem; letter-spacing: -.01em; }
.vision-grid p { color: var(--night-muted); max-width: 30rem; }
.vision-note { margin-top: 1.4rem; color: var(--night-muted); font-size: .9rem; max-width: 40rem; }
@media (min-width: 760px) { .vision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 1100px) { .vision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ecosystem cards: a picture on every card */
.eco-media { margin: -1.1rem -1.2rem .7rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 17px 17px 0 0; background: var(--bg-2); display: grid; place-items: center; border-bottom: 1px solid var(--eco-rule); }
.eco-media { position: relative; }
.eco-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-media.eco-phone { background: #121512; }
.eco-media.eco-phone img { object-position: 50% 62%; }
.eco-media.eco-brand { aspect-ratio: auto; height: 5.2rem; background: var(--lime); color: var(--lime-ink); }
.eco-media.eco-brand svg { height: 2rem; width: auto; }
.eco-media.eco-ill { color: var(--eco-ink); background: color-mix(in srgb, var(--eco-ink) 6%, var(--eco-card)); }
.eco-media.eco-ill svg { width: 62%; height: auto; }
.eco-media.eco-kx { place-items: stretch; align-content: center; gap: .4rem; padding: .9rem 1rem; background: color-mix(in srgb, var(--eco-ink) 5%, var(--eco-card)); font-size: .72rem; color: var(--eco-ink); }
.kx-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; letter-spacing: .02em; margin-bottom: .15rem; }
.kx-demo { font-weight: 700; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .45rem; border: 1px solid var(--eco-rule); border-radius: 999px; }
.kx-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 1.6rem; align-items: center; gap: .5rem; }
.kx-who { white-space: nowrap; }
.kx-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--eco-ink) 12%, transparent); overflow: hidden; }
.kx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--eco-ink); opacity: .75; }
.kx-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (min-width: 960px) { .eco-node[style*="grid-area:kw"] .eco-media.eco-brand { height: 3.6rem; margin-bottom: .5rem; } }

/* Journal photos */
.j-thumb { margin: 0; width: 5.5rem; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--bg-2); grid-row: span 2; }
.j-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-list article { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
.j-list .j-side { grid-column: 2; }
.j-list .j-txt { grid-column: 2; }
@media (min-width: 900px) { .j-list article { grid-template-columns: 8rem 13rem minmax(0, 1fr); column-gap: 2rem; } .j-thumb { width: 8rem; grid-row: auto; } .j-list .j-side { grid-column: 2; } .j-list .j-txt { grid-column: 3; } }
.j-lead { display: grid; gap: 1.4rem; }
.j-lead-pic, .j-hero-pic { margin: 0; aspect-ratio: 5 / 4; border-radius: 24px; overflow: hidden; background: var(--bg-2); }
.j-lead-pic img, .j-hero-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-head-grid { display: grid; gap: 1.6rem; margin-top: 1rem; }
.j-head-grid .j-head { margin-top: 0; }
@media (min-width: 900px) {
  .j-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 3rem; }
  .j-lead-pic { aspect-ratio: 4 / 5; }
  .j-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 3rem; }
  .j-hero-pic { aspect-ratio: 4 / 5; }
}

/* Journal: photo-led cards on the home page; the title link is stretched over the whole card */
.j-cards { list-style: none; display: grid; gap: 2.2rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.jc article { position: relative; display: grid; gap: 1rem; }
.jc-pic { margin: 0; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--bg-2); }
.jc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.jc article:hover .jc-pic img { transform: scale(1.035); }
.jc-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); }
.jc-meta .j-cat { color: var(--ink); }
.jc-title { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 800; line-height: 1.28; letter-spacing: -.012em; margin-top: .35rem; max-width: 30ch; }
.jc-title a.title-link { color: inherit; text-decoration: none; }
.jc-title a.title-link::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.jc article:hover .jc-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime); }
.jc-dek { margin-top: .45rem; max-width: 40ch; }
@media (max-width: 699px) {
  .j-cards li:not(:first-child) article { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
  .j-cards li:first-child .jc-pic { aspect-ratio: 5 / 4; }
  .j-cards li:not(:first-child) .jc-pic { border-radius: 14px; }
  .j-cards li:not(:first-child) .jc-dek { display: none; }
}
@media (min-width: 700px) { .j-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
@media (min-width: 1000px) { .j-cards { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; align-items: start; } }
@media (prefers-reduced-motion: reduce) { .jc-pic img { transition: none; } .jc article:hover .jc-pic img { transform: none; } }

/* Journal list rows: the whole row opens the article */
.j-list article { position: relative; }
.j-list a.title-link::after { content: ''; position: absolute; inset: 0; }
.j-list article:hover .j-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime); }

/* ── Type scale, one step down (Sumi, 5 Oct 2026: "the font sizes everywhere are a bit too big").
   Body stays at 16px; display sizes come down about 15–25% at the top end, less at phone width. ── */
body { font-size: 1rem; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.15rem; }
.hero h1, .vhero h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); max-width: 14ch; }
.hero.inner h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); max-width: 18ch; }
.nf h1 { font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.6rem); }
.hero .lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.18rem); }
.statement { font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.4rem); }
.figures .n { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3rem); }
.callout .n { font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.2rem); }
.footnote .n { font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.6rem); }
.cta-band h2 { font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3.2rem); }
.vband h2 { font-size: clamp(1.9rem, 1.15rem + 3.5vw, 3.8rem); }
.big-mail { font-size: clamp(1.5rem, .9rem + 3.6vw, 3.3rem); }
.menu-panel > ul > li > a { font-size: 1.25rem; }
.parts h3, .name { font-size: 1.2rem; }
.score h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.5rem); }
.story blockquote p { font-size: clamp(1.08rem, .98rem + .5vw, 1.25rem); }
.stories-close strong { font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }
.row h3 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); }
.news h2, .news h3, .j-list .j-title { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); }
.step h3 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.85rem); }
.vcard h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.6rem); }
.proven h3 { font-size: clamp(1.2rem, 1.02rem + .6vw, 1.45rem); }
.doc h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.4rem); }
.j-lead h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem); }
.j-head h1 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.8rem); }
.j-body { font-size: 1.05rem; }
.j-body .j-h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); }
.typespec .big { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); }

/* Kwelio app: assisted verification and the models inside (night section) */
.ai-head { display: grid; gap: 1.2rem; }
.ai-intro { color: var(--night-text); max-width: 34rem; font-size: 1.05rem; line-height: 1.6; }
@media (min-width: 960px) { .ai-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 3rem; } }
.ai-flow { margin: clamp(2rem, 5vw, 3.25rem) 0 0; }
.ai-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter, 16px) * -1); padding: .25rem var(--gutter, 16px) 1rem; }
.ai-scroll::-webkit-scrollbar { display: none; }
.ai-scroll:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 12px; }
.ai-flow ol { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(15.5rem, 70vw); gap: 1.1rem; }
.ai-flow li { scroll-snap-align: start; display: grid; gap: .9rem; align-content: start; }
.ai-phone { aspect-ratio: 394 / 854; border-radius: 26px; overflow: hidden; background: #0d0d0c; border: 1px solid var(--night-rule); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.ai-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-flow li p { color: var(--night-text); font-size: .95rem; line-height: 1.5; max-width: 22rem; }
.ai-flow li p b { display: block; color: var(--night-ink); font-weight: 800; margin-bottom: .2rem; }
.ai-flow figcaption { margin-top: .4rem; color: var(--night-muted); font-size: .85rem; max-width: 44rem; }
@media (min-width: 760px) {
  .ai-scroll { overflow: visible; margin-inline: 0; padding: 0; }
  .ai-flow ol { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
  .ai-flow li:nth-child(2) { margin-top: 2.5rem; } .ai-flow li:nth-child(3) { margin-top: 5rem; }
}
@media (min-width: 1100px) { .ai-flow ol { max-width: 62rem; } }
.ai-list { list-style: none; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--night-rule); }
.ai-list > li { display: grid; gap: .6rem; padding: 1.4rem 0; border-bottom: 1px solid var(--night-rule); }
.ai-k { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.ai-k h3 { font-size: 1.15rem; }
.ai-chip { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--night-rule); color: var(--lime); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.ai-list p { color: var(--night-text); max-width: 44rem; }
@media (min-width: 900px) { .ai-list > li { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.5rem; } .ai-k { flex-direction: column; align-items: flex-start; } }
.ai-note { margin-top: 1.4rem; color: var(--night-muted); font-size: .9rem; max-width: 46rem; }

/* Sub sites: the link back to kwelio.com sits last in the nav, set apart by a hairline */
.primary-nav .parent-link { margin-left: .35rem; padding-left: .55rem; border-left: 1px solid var(--rule); }
.primary-nav .parent-link a { gap: .35rem; color: var(--muted); }
.primary-nav .parent-link a:hover { color: var(--ink); }
.primary-nav .parent-link svg { width: .8em; height: .8em; }
.menu-panel .parent-link a { color: var(--muted); font-size: 1rem; font-weight: 700; }

/* ══ The film language, site-wide (Sumi, 5 Oct 2026 22:01: "let's move forward with the rest") ══════════
   Quiet display type: light, sentence case. Capitals only for short labels (2 to 3 words). */
.hero h1, .vhero h1, .nf h1, .buybox h1, .j-head h1 { font-weight: 300; letter-spacing: -.012em; line-height: 1.14; }
.hero h1, .vhero h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem); max-width: 20ch; }
.hero.inner h1 { font-size: clamp(1.7rem, 1.15rem + 2vw, 2.8rem); max-width: 22ch; }
.j-head h1 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem); }
.sec-head h2, .side h2, .split h2, .vband h2, .cta-band h2, .statement, .j-lead h2 { font-weight: 300; letter-spacing: -.01em; line-height: 1.2; }
.sec-head h2, .side h2, .split h2, .j-lead h2 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); }
.vband h2, .cta-band h2 { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem); max-width: 22ch; }
.statement { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem); }
.vband .hl { color: var(--lime); box-shadow: none; }
/* the CTA band is lime in light mode: the highlighted words keep the ink and take an ink underline */
.cta-band .hl { color: inherit; box-shadow: inset 0 -.14em 0 var(--band-ink); }
 :root[data-theme="dark"] .cta-band .hl { color: var(--lime); box-shadow: none; } 

/* numbers that need attention: a light numeral on a lime rule */
.figures .n, .callout .n, .footnote .n { font-weight: 300; letter-spacing: -.01em; }
.figures > li { border-top: 2px solid var(--lime) !important; padding-top: 1rem; }
.callout { border-top: 2px solid var(--lime); padding-top: 1rem; }

/* ── scene heroes: a film behind the page's opening, text on a veil, the header over it ── */
.shero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(92svh, 58rem);
  padding: calc(var(--head-h) + 3rem) 0 clamp(3rem, 7vw, 4.75rem); background: #0C0C0B; color: rgba(242, 238, 228, .86); }
.shero-media { position: absolute; left: 0; right: 0; top: -10%; bottom: -10%; z-index: -2; will-change: transform; }
/* any section can take a parallax layer: [data-px] on the host, [data-px-media] on the layer it moves */
[data-px] { position: relative; overflow: hidden; isolation: isolate; }
[data-px-media] { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; z-index: -1; will-change: transform; }
[data-px-media] > img, [data-px-media] > video, [data-px-media] > picture, [data-px-media] > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { [data-px-media] { top: 0; bottom: 0; } }
.shero-media video, .shero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 9, .92) 0%, rgba(10, 10, 9, .66) 42%, rgba(10, 10, 9, .26) 76%, rgba(10, 10, 9, .6) 100%),
              linear-gradient(to right, rgba(10, 10, 9, .6), rgba(10, 10, 9, 0) 72%); }
.shero[data-tone="light"] { background: #F3F1EC; color: rgba(22, 22, 20, .84); }
.shero[data-tone="light"]::after { background: linear-gradient(to top, rgba(243, 241, 236, .96) 0%, rgba(243, 241, 236, .8) 44%, rgba(243, 241, 236, .25) 80%, rgba(243, 241, 236, .55) 100%),
              linear-gradient(to right, rgba(243, 241, 236, .75), rgba(243, 241, 236, 0) 72%); }
.shero .wrap { position: relative; width: 100%; }
.shero h1 { color: #F2EEE4; }
.shero .lead { color: rgba(242, 238, 228, .86); }
.shero .eyebrow, .shero .crumbs, .shero .crumbs a { color: rgba(242, 238, 228, .72); }
.shero .hl { box-shadow: none; color: var(--lime); }
.shero .jump a { color: #F2EEE4; border-color: rgba(242, 238, 228, .3); background: rgba(12, 12, 11, .2); }
.shero .jump a.primary { background: #F2EEE4; color: #0C0C0B; border-color: #F2EEE4; }
.shero .btn { background: #F2EEE4; color: #0C0C0B; border-color: #F2EEE4; }
.shero .btn:hover { background: transparent; color: #F2EEE4; }
.shero .more { color: #F2EEE4; }
.shero :focus-visible { outline-color: var(--lime); }
.shero .vb-toggle { color: #F2EEE4; border-color: rgba(242, 238, 228, .4); }
.shero[data-tone="light"] h1 { color: #161614; }
.shero[data-tone="light"] .lead { color: rgba(22, 22, 20, .84); }
.shero[data-tone="light"] .eyebrow, .shero[data-tone="light"] .crumbs, .shero[data-tone="light"] .crumbs a { color: rgba(22, 22, 20, .66); }
.shero[data-tone="light"] .hl { color: inherit; box-shadow: inset 0 -.14em 0 var(--lime); }
.shero[data-tone="light"] .jump a { color: #161614; border-color: rgba(22, 22, 20, .24); background: rgba(243, 241, 236, .4); }
.shero[data-tone="light"] .jump a.primary, .shero[data-tone="light"] .btn { background: #161614; color: #F3F1EC; border-color: #161614; }
.shero[data-tone="light"] .more { color: #161614; }
.shero[data-tone="light"] .vb-toggle { color: #161614; border-color: rgba(22, 22, 20, .3); }
.shero.phero .phero-grid { align-items: end; }
.shero figure.demo figcaption { color: rgba(242, 238, 228, .7); }
@media (prefers-reduced-motion: reduce) { .shero-media { top: 0; bottom: 0; } }

/* the header floats over a scene hero until the hero has scrolled past */
body.over-hero .top { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  transition: background-color .45s cubic-bezier(.16, 1, .3, 1), border-color .45s cubic-bezier(.16, 1, .3, 1); }
body.over-hero .top::before { content: ''; position: absolute; inset: 0 0 -60% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 9, .7) 0%, rgba(10, 10, 9, 0) 100%); transition: opacity .45s; }
body.over-hero[data-hero-tone="light"] .top::before { background: linear-gradient(180deg, rgba(243, 241, 236, .85) 0%, rgba(243, 241, 236, 0) 100%); }
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .brand, body.over-hero[data-hero-tone="dark"] .top:not(.solid) .primary-nav a,
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .menu-btn, body.over-hero[data-hero-tone="dark"] .top:not(.solid) .top-tools a:not(.btn),
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .parent-link a { color: #F2EEE4; }
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .menu-btn { border-color: rgba(242, 238, 228, .3); }
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .cta { background: #F2EEE4; color: #0C0C0B; border-color: #F2EEE4; }
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .primary-nav .parent-link { border-left-color: rgba(242, 238, 228, .3); }
body.over-hero .top.solid { background: var(--bg); border-bottom-color: var(--rule); }
body.over-hero .top.solid::before { opacity: 0; }
body.over-hero.menu-open .top { background: var(--bg); }
body.over-hero.menu-open .top .brand, body.over-hero.menu-open .top .menu-btn { color: var(--ink) !important; }
.shero .eyebrow .lio-mark, .shero .beads-mark { color: #F2EEE4; }
.shero[data-tone="light"] .eyebrow .lio-mark, .shero[data-tone="light"] .beads-mark { color: #161614; }
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .lockup, body.over-hero[data-hero-tone="dark"] .top:not(.solid) .top-tools .cart-btn,
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .top-tools button:not(.menu-btn) { color: #F2EEE4; border-color: rgba(242, 238, 228, .3); }

/* an open phone menu is always the plain page: no hero shade, ink text */
body.over-hero.menu-open .top::before { opacity: 0; }
body.over-hero.menu-open[data-hero-tone] .top .lockup, body.over-hero.menu-open[data-hero-tone] .top .top-tools .cart-btn,
body.over-hero.menu-open[data-hero-tone] .top .top-tools button, body.over-hero.menu-open[data-hero-tone] .top .menu-btn { color: var(--ink); border-color: var(--rule); }
body.over-hero.menu-open[data-hero-tone] .top .menu-panel .parent-link a { color: var(--muted); }

/* the theme button, and the Appearance control in the phone menu */
.theme-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: inherit; cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.theme-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.theme-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.theme-btn .i-sun, .theme-btn[data-mode="dark"] .i-moon { display: none; }
.theme-btn[data-mode="dark"] .i-sun { display: block; }
.top .wrap > .theme-btn { margin-left: auto; }
.top .wrap > .theme-btn + .cta { margin-left: .6rem; }
@media (min-width: 1000px) { .top .wrap > .theme-btn { margin-left: 0; } }
@media (max-width: 999px) { .top .wrap > .theme-btn { margin-right: .5rem; } }
/* The theme button floats bottom right on every page (Sumi, 6 Oct 2026): light by default, dark on request. */
.theme-btn.theme-fab { position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  width: 46px; height: 46px; margin: 0; color: var(--ink); background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .35); transition: background-color .15s, bottom .35s cubic-bezier(.22, 1, .36, 1); }
.theme-btn.theme-fab:hover { background: var(--bg-2); }
.theme-btn.theme-fab svg { width: 19px; height: 19px; }
@media (max-width: 760px) { html.bar-in .theme-btn.theme-fab { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 62px); } }
@media (prefers-reduced-transparency: reduce) { .theme-btn.theme-fab { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media print { .theme-btn.theme-fab { display: none; } }
.theme-set { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.2rem 0 1rem; }
.theme-set .label { width: 100%; color: var(--muted); }
.theme-set button { min-height: 44px; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.theme-set button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.theme-set button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body.over-hero[data-hero-tone="dark"] .top:not(.solid) .theme-btn { color: #F2EEE4; border-color: rgba(242, 238, 228, .3); }
body.film .top:not(.solid) .theme-btn { color: var(--f-ink, inherit); border-color: var(--f-rule, var(--rule)); }

/* the header follows the section beneath it (site.js sets data-tone and --head-bg) */
.top[data-tone] { background: var(--head-bg, var(--bg)); border-bottom-color: transparent; transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.top[data-tone="dark"] { --ink: #F2EEE4; --text: #DAD6CB; --muted: rgba(242, 238, 228, .7); --rule: rgba(242, 238, 228, .18); --bg: #0C0C0B; --focus: #D6E300; color: #F2EEE4; }
.top[data-tone="light"] { --ink: #161614; --text: #33352F; --muted: #5C5F57; --rule: rgba(26, 26, 26, .14); --bg: #F5F1E9; --focus: #1A1A1A; color: #161614; }
.top[data-tone] .brand, .top[data-tone] .primary-nav a, .top[data-tone] .menu-btn, .top[data-tone] .lockup, .top[data-tone] .parent-link a { color: var(--ink); }
.top[data-tone="dark"] .primary-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--lime); }
.top[data-tone="light"] .primary-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #161614; }
.top[data-tone] .cta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.over-hero .top.solid[data-tone] { background: var(--head-bg, var(--bg)); }
.top .wrap { justify-content: flex-start; }
.top .wrap > .primary-nav { margin-inline: auto; }
.top .wrap > .menu-btn { margin-left: .2rem; }
/* a header floating over a scene hero takes the hero's tone, whatever the page theme */
body.over-hero[data-hero-tone="light"]:not(.menu-open) .top:not(.solid) { --ink: #161614; --text: #33352F; --muted: #5C5F57; --rule: rgba(26, 26, 26, .16); --bg: #F5F1E9; --focus: #1A1A1A; color: #161614; }
body.over-hero[data-hero-tone="dark"]:not(.menu-open) .top:not(.solid) { --ink: #F2EEE4; --text: #DAD6CB; --muted: rgba(242, 238, 228, .7); --rule: rgba(242, 238, 228, .3); --bg: #0C0C0B; --focus: #D6E300; color: #F2EEE4; }
body.over-hero:not(.menu-open) .top:not(.solid) .brand, body.over-hero:not(.menu-open) .top:not(.solid) .primary-nav a, body.over-hero:not(.menu-open) .top:not(.solid) .menu-btn,
body.over-hero:not(.menu-open) .top:not(.solid) .lockup, body.over-hero:not(.menu-open) .top:not(.solid) .parent-link a, body.over-hero:not(.menu-open) .top:not(.solid) .theme-btn { color: var(--ink); }
body.over-hero:not(.menu-open) .top:not(.solid) .theme-btn, body.over-hero:not(.menu-open) .top:not(.solid) .menu-btn { border-color: var(--rule); }
body.over-hero:not(.menu-open) .top:not(.solid) .cta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.over-hero[data-hero-tone="light"]:not(.menu-open) .top:not(.solid) .primary-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #161614; }

/* About: each founder's story is its own screen, the photograph in parallax behind (Sumi, 6 Oct 2026) */
.sec.story-sec { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #EDE8DE; background: #121210;
  padding-block: clamp(5rem, 14svh, 9rem) clamp(3rem, 9svh, 6rem); }
.story-sec .st-bg { z-index: -1; }
.story-sec .st-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14, 14, 13, .92) 0%, rgba(14, 14, 13, .72) 32%, rgba(14, 14, 13, .25) 62%, rgba(14, 14, 13, .1) 100%); }
.story-sec .wrap { width: 100%; }
.story-sec .st-copy { max-width: 44rem; }
.story-sec.st-right .st-copy { margin-left: auto; }
.story-sec .kicker { display: grid; gap: .35rem; margin-bottom: 1.1rem; color: rgba(242, 238, 228, .9); font-size: .78rem; }
.story-sec .kicker span { color: var(--lime); font-size: .68rem; }
.st-q blockquote p { font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem); line-height: 1.38; font-weight: 300; letter-spacing: -.01em; color: #F4F0E7; }
.st-q blockquote p::before { content: '\201C'; } .st-q blockquote p::after { content: '\201D'; }
.story-sec .q-by { margin-top: 1.4rem; color: rgba(242, 238, 228, .82); }
.story-sec .q-by b { color: #F4F0E7; }
.st-close { margin-top: clamp(1.6rem, 4svh, 2.6rem); padding-top: 1.2rem; border-top: 1px solid rgba(242, 238, 228, .2); max-width: 36rem; color: rgba(242, 238, 228, .86); line-height: 1.6; }
.st-close strong { display: block; color: #F4F0E7; font-weight: 600; margin-bottom: .25rem; }

/* who said it: a small portrait beside the name (Sumi, 6 Oct 2026) */
.q-by { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.q-by img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent); }
.q-by span { display: grid; gap: .05rem; line-height: 1.3; font-size: .86rem; }
.q-by b { font-size: .95rem; }

/* ── phones: one calm type scale (Sumi, 6 Oct 2026: 'don't make anything too big') ─────────────
   Display type steps down to what a 390px screen can hold in two or three lines; nothing reading-size
   goes under 16px, and no label goes under 11.5px. */
@media (max-width: 600px) {
  .hero h1, .vhero h1, .nf h1 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 1.95rem); line-height: 1.12; }
  .hero.inner h1, .j-head h1 { font-size: clamp(1.55rem, 1.15rem + 2vw, 1.8rem); line-height: 1.15; }
  h2, .sx-h, .statement, .vband h2, .cta-band h2, .sec-head h2, .side h2, .split h2, .j-lead h2, .after h2, .after .q-h, .h-quiet { 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); }
  .hero .lead, .vband p.vb-lead, .sx-p, .ch-p { font-size: 1rem; }
  .big-mail { font-size: clamp(1.45rem, 1rem + 2.4vw, 1.7rem); }
  .callout .n { font-size: 1.75rem; }
  .label, .kicker, .eyebrow { font-size: max(.72rem, 11.5px); letter-spacing: .1em; }
  .figures .n { font-size: 2rem; }
}

/* Ecosystem diagram, desktop: compact nodes so the whole loop fits one screen (Sumi, 6 Oct 2026). The
   picture becomes a small tile beside each title; the reading order and the arrows are unchanged. */
@media (min-width: 960px) {
  .eco-node { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: .85rem; row-gap: .4rem; padding: .95rem 1.05rem 1.05rem; }
  .eco-node > * { grid-column: 1 / -1; }
  .eco-node > .eco-media { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; width: 3.75rem; height: 3.75rem; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--eco-rule); }
  .eco-node > .label, .eco-node > .eco-title { grid-column: 2; }
  .eco-node > .label { align-self: end; }
  .eco-node > .eco-title { align-self: start; }
  .eco-text { font-size: .88rem; line-height: 1.45; }
  .eco-node .partner img { height: 32px; }
  .eco-node[style*="grid-area:kw"] { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .eco-node[style*="grid-area:kw"] > .eco-text { grid-column: 2; grid-row: 2; margin-top: -.1rem; }
  .eco-node[style*="grid-area:kw"] > .eco-title { grid-row: 1; align-self: end; }
  .eco-node[style*="grid-area:kw"] .eco-media.eco-brand { height: 3.75rem; margin: 0; }
  .eco-media.eco-brand svg { height: auto; width: 78%; }
  .eco-media.eco-ill svg { width: 88%; }
  .eco-media.eco-kx { padding: .55rem .5rem; gap: .3rem; }
  .eco-media.eco-kx .kx-head, .eco-media.eco-kx .kx-who, .eco-media.eco-kx .kx-n { display: none; }
  .eco-media.eco-kx .kx-row { grid-template-columns: minmax(0, 1fr); }
  .eco-edge.down, .eco-edge.up { min-height: 3rem; padding-block: .45rem; }
  .eco.night-eco { margin-top: clamp(1.25rem, 3svh, 2rem); }
}
/* short laptop screens: the loop starts at the insurer, so it still fits one screen */
@media (min-width: 960px) and (max-height: 800px) {
  .eco { grid-template-areas: "ins e1 mem e5 lio" "e4 . e2 . lio" "kx e3 app . lio"; }
  .eco-node[style*="grid-area:kw"], .eco-edge[style*="grid-area:e0"] { display: none; }
}
/* the app's features in two columns on mid-size screens, so the section fits one screen */
@media (min-width: 1080px) and (max-width: 1199px) {
  .app-grid .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.2rem; max-width: none; margin-top: 1.4rem; }
  .app-grid .feature-list li { padding: .85rem 0; }
  .app-grid .feature-list span { font-size: .94rem; }
  .app-grid .feature-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .app-grid .note { margin-top: 1.2rem; }
}
/* wide screens: the story on the left, the phone in the middle, the features on the right (one screen tall) */
@media (min-width: 1200px) {
  .app-grid { grid-template-columns: minmax(0, .95fr) auto minmax(0, 1.2fr); grid-template-rows: 1fr repeat(5, auto) 1fr; column-gap: clamp(2rem, 3.5vw, 3.5rem); row-gap: 0; align-items: start; }
  .app-grid > div:first-child { display: contents; }
  .app-grid > div > .kicker { grid-column: 1; grid-row: 2; }
  .app-grid > div > h2 { grid-column: 1; grid-row: 3; }
  .app-grid > div > .sub { grid-column: 1; grid-row: 4; }
  .app-grid > div > .note { grid-column: 1; grid-row: 5; }
  .app-grid > div > .cta-row { grid-column: 1; grid-row: 6; }
  .app-grid > figure.demo { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .app-grid > div > .feature-list { grid-column: 3; grid-row: 1 / -1; align-self: center; margin-top: 0; max-width: none; }
  .app-grid .feature-list li { padding: .8rem 0; }
  .app-grid .feature-list span { font-size: .94rem; }
}
@media (min-width: 1200px) and (max-height: 820px) {
  #app { --sec: clamp(2rem, 5.5svh, 4rem); }
  .app-grid .feature-list li { padding: .55rem 0; gap: .1rem; }
  .app-grid .feature-list b { font-size: 1rem; }
  .app-grid .feature-list span { font-size: .88rem; line-height: 1.42; }
}

/* App page, inside the app (6 Oct 2026): the three screens beside the story, and the six features as their
   own section, so each fits one screen */
@media (min-width: 1000px) {
  .ai#intelligence .wrap { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .ai#intelligence .ai-head { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
  .ai#intelligence .ai-flow { margin: 0; }
  .ai#intelligence .ai-flow ol { max-width: none; gap: clamp(.9rem, 1.6vw, 1.4rem); }
  .ai#intelligence .ai-flow li { justify-items: start; }
  .ai#intelligence .ai-phone { width: min(100%, calc((100svh - 2 * var(--sec) - 11rem) * 394 / 854)); }
  .ai#intelligence .ai-flow li:nth-child(2) { margin-top: 1.25rem; } .ai#intelligence .ai-flow li:nth-child(3) { margin-top: 2.5rem; }
  .ai#intelligence .ai-flow li p { font-size: .86rem; line-height: 1.45; }
  .ai#intelligence .ai-flow figcaption { margin-top: 1rem; font-size: .8rem; }
  .ai-more .ai-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.25rem, 3svh, 2rem); border-top: 0; }
  .ai-more .ai-list > li { grid-template-columns: 1fr; gap: .55rem; padding: 1.1rem 0; border-top: 1px solid var(--night-rule); border-bottom: 0; align-content: start; }
  .ai-more .ai-k { flex-direction: row; align-items: center; }
  .ai-more .ai-list p { font-size: .9rem; line-height: 1.5; }
}
.ai-more { padding-top: calc(var(--sec) * .6); }
.ai-more-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 300; max-width: 26ch; }
@media (min-width: 1000px) and (max-height: 820px) {
  .ai-more .ai-list > li { padding: .8rem 0; gap: .4rem; }
  .ai-more .ai-list p { font-size: .84rem; line-height: 1.42; }
  .ai-more-head h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
  .ai-more .ai-note { margin-top: .9rem; font-size: .84rem; }
}
/* LioBox, what is next: the five points in two columns on wide screens, so the section fits one screen */
@media (min-width: 1100px) {
  .next-grid { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); align-items: center; }
  .next-grid > div:first-child { position: static; }
  .next-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.25rem); border-top: 0; }
  .next-list > li { padding: 1rem 0 1.1rem; border-top: 1px solid var(--rule); border-bottom: 0; align-content: start; gap: .35rem; }
  .next-list h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
  .next-list p { font-size: .94rem; line-height: 1.5; }
  .next-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Legibility floor (6 Oct 2026 audit): no reading text under 11.5px, and text over photos and video keeps 4.5:1 */
.status { font-size: .74rem; }
.bead-kind .status { font-size: .72rem; }
.ai-chip { font-size: .72rem; }
.vb-toggle { background: rgba(12, 12, 11, .8); }
.shero .eyebrow, .shero .crumbs, .shero .crumbs a { color: rgba(242, 238, 228, .92); }
.shero[data-tone="light"] .eyebrow, .shero[data-tone="light"] .crumbs, .shero[data-tone="light"] .crumbs a { color: rgba(22, 22, 20, .82); }
.vband .kicker { color: rgba(242, 238, 228, .92); }
.night .sheet-links .sl-lead, [data-tone="dark"] .sheet-links .sl-lead { color: var(--night-muted); }
.story-sec .kicker span { font-size: .74rem; }
.story-sec .st-bg::after { background: linear-gradient(0deg, rgba(14, 14, 13, .94) 0%, rgba(14, 14, 13, .84) 36%, rgba(14, 14, 13, .62) 62%, rgba(14, 14, 13, .32) 86%, rgba(14, 14, 13, .18) 100%); }
.shero[data-tone="light"] .vb-toggle { background: rgba(243, 241, 236, .88); }
@media (max-width: 700px) {
  /* on a phone the hero's words stack higher up the picture, so the scrim reaches further */
  .shero::after { background: linear-gradient(to top, rgba(10, 10, 9, .94) 0%, rgba(10, 10, 9, .82) 48%, rgba(10, 10, 9, .62) 78%, rgba(10, 10, 9, .66) 100%); }
  .shero[data-tone="light"]::after { background: linear-gradient(to top, rgba(243, 241, 236, .97) 0%, rgba(243, 241, 236, .9) 48%, rgba(243, 241, 236, .72) 78%, rgba(243, 241, 236, .75) 100%); }
  .story-sec .st-bg::after { background: linear-gradient(0deg, rgba(14, 14, 13, .95) 0%, rgba(14, 14, 13, .88) 45%, rgba(14, 14, 13, .72) 72%, rgba(14, 14, 13, .5) 100%); }
}
.vctl button { color: inherit; }
.vctl button:hover { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
/* phones: a film's pause button sits top right, clear of the floating theme button and the call to action */
@media (max-width: 700px) {
  .vband .vb-toggle, .shero .vb-toggle { top: calc(var(--head-h) + .75rem); bottom: auto; width: 40px; padding: 0; justify-content: center; }
  .vband .vb-toggle .t-play, .vband .vb-toggle .t-pause, .shero .vb-toggle .t-play, .shero .vb-toggle .t-pause { display: none !important; }
}
@media (max-width: 700px) {
  .vband::after { background: linear-gradient(to top, rgba(10, 10, 9, .94) 0%, rgba(10, 10, 9, .8) 50%, rgba(10, 10, 9, .55) 80%, rgba(10, 10, 9, .4) 100%); }
  .vband .kicker { color: #F2EEE4; }
}

/* Smaller windows get smaller type and spacing (Sumi, 6 Oct 2026: 'when the viewport size is smaller, the font
   size and asset size everything needs to become a bit smaller'). Sizes are in rem, so the root scales them:
   16px from 1280 x 900 up, down to 14px on short or narrow laptop windows. Phones keep their own scale. */
@media (min-width: 900px) { html { font-size: clamp(14px, min(calc(100svh / 56.25), calc(100vw / 80)), 16px); } }
/* small labels never drop below 11.5px however far the root scales */
.label { font-size: max(11.5px, .72rem); }
.status { font-size: max(11.5px, .74rem); }

/* room between a heading and the paragraph under it, so the highlight line under the heading has air
   (Sumi, 6 Oct 2026) */
:is(h1, h2):not(#z) + :is(p, .lead, .sx-p, .sub, .intro, .prose) { margin-top: clamp(1.25rem, .9rem + .9vw, 1.75rem); }
:is(h1, h2):has(.hl) { line-height: 1.18; }

/* The sample Kwelix screen, for pages without film.css and story.css (Products, 6 Oct 2026); copied from
   those files by script, keep them in step */
.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); }
.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; }
}
@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); }
.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; }
}
.kq-row.on .kq-kas small { color: var(--text); }

/* nav hover: a tint of the link's own colour, so it reads on light and dark headers alike (Sumi, 6 Oct 2026) */
.primary-nav a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* About: after the two stories, one screen for what they share. Two drops on a leaf become one
   (Kwelio Drive/Pop-App/Design/Terrains/2-stories-same-problem.mov, played once at half speed). */
.sec.st-one { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; place-items: center; text-align: center;
  background: #0E120E; color: #F2EEE4; }
.st-one .st-one-media { position: absolute; inset: 0; z-index: -1; margin: 0; border-radius: 0; background: #0E120E; }
.st-one .st-one-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.st-one .st-one-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 65% at 50% 50%, rgba(8, 12, 8, .52) 0%, rgba(8, 12, 8, .74) 100%); }
.st-one .st-one-media .vb-toggle { z-index: 2; right: var(--gutter); bottom: 1.25rem; top: auto; }
.st-one .wrap { position: relative; }
.st-one h2 { font-weight: 300; font-size: clamp(2.2rem, 1.1rem + 4vw, 5rem); line-height: 1.08; letter-spacing: -.02em; color: #F2EEE4; max-width: 15ch; margin: 0 auto; }
.st-one h2 .hl { color: var(--lime); box-shadow: none; }
.st-one p { margin: clamp(1.25rem, .9rem + .9vw, 1.9rem) auto 0; max-width: 38ch; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); line-height: 1.55; color: rgba(242, 238, 228, .92); }
@media (prefers-reduced-motion: reduce) { .st-one .st-one-media video { display: none; } .st-one .st-one-media { background: #0E120E url("img/stories/two-stories-end.webp") 50% 62% / cover no-repeat; } }
#kwelix.kxs .kxs-head .intro { margin-top: 0; max-width: 44rem; }
#kwelix.kxs .kxs-head .cta-row { margin-top: .8rem; }
@media (max-width: 700px) {
  .st-one .st-one-media .vb-toggle { top: calc(var(--head-h) + .75rem); bottom: auto; width: 40px; padding: 0; justify-content: center; }
  .st-one .st-one-media .vb-toggle .t-play, .st-one .st-one-media .vb-toggle .t-pause { display: none !important; }
}
#kwelix.kxs { --sec: clamp(2rem, min(6vw, 4svh), 4rem); }

/* The header (Sumi, 6 Oct 2026): flat at the top of a page; once the page moves it lifts into a floating
   frosted capsule, like the app's tab bar. Glass is only this control layer; the capsule carries enough tint
   that its labels read over any section, and it follows the tone of what is beneath it. Frosted pills mark
   the link under the pointer and the page you are on. */
.top .wrap { transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.top.is-float, .top.is-float[data-tone], body.over-hero .top.is-float, body.over-hero .top.is-float.solid { background: transparent !important; border-bottom-color: transparent !important; }
.top.is-float .wrap { height: calc(var(--head-h) - 14px); margin-block: 7px; padding: 0 .4rem 0 1.15rem; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .1), 0 0 0 1px var(--rule), 0 18px 40px -22px rgba(0, 0, 0, .45); }
.top.is-float[data-tone="dark"] .wrap, body.over-hero[data-hero-tone="dark"] .top.is-float:not(.solid) .wrap {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(242, 238, 228, .14), 0 18px 40px -22px rgba(0, 0, 0, .65); }
.film .top.is-float:not([data-tone]):not(.solid) .wrap { background: color-mix(in srgb, #0C0C0B 58%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(242, 238, 228, .14), 0 18px 40px -22px rgba(0, 0, 0, .65); }
html[data-tone="light"] .film .top.is-float:not([data-tone]):not(.solid) .wrap { background: color-mix(in srgb, #F3F1EC 66%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(26, 26, 26, .12), 0 18px 40px -22px rgba(0, 0, 0, .4); }
@media (min-width: 1000px) {
  .top.is-float .wrap { width: fit-content; max-width: calc(100% - 2 * var(--gutter)); gap: .5rem; }
  .top.is-float .wrap > .primary-nav { margin-inline: 1.4rem .8rem; }
}
@media (max-width: 999px) { .top.is-float .wrap { margin-inline: var(--gutter); padding-left: 1rem; } }
.top .primary-nav a { border-radius: 999px; }
.top .primary-nav a:hover { background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.top.is-float .primary-nav a[aria-current="page"] { background: color-mix(in srgb, currentColor 15%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important; }
/* Book a demo answers the pointer */
.top .cta { transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out); }
.top .cta:hover, .top .cta:focus-visible { background: var(--lime) !important; color: #161614 !important; border-color: var(--lime) !important; }
@media (prefers-reduced-transparency: reduce) { .top.is-float .wrap { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the current page in the flat header keeps its straight underline */
.top:not(.is-float) .primary-nav a[aria-current="page"] { border-radius: 0; }
/* phones: the theme button clears the raised topic bar */
@media (max-width: 760px) { html.bar-in .theme-btn.theme-fab { bottom: calc(max(2.25rem, 5.5svh, calc(env(safe-area-inset-bottom) + 1rem)) + 62px); } }

/* the floating header sits over everything: no band or shade behind the capsule, and the empty strip around
   it lets clicks through to the page (Sumi, 6 Oct 2026) */
.top.is-float { z-index: 50; pointer-events: none; box-shadow: none; }
.top.is-float::before, body.over-hero .top.is-float::before { opacity: 0 !important; }
.top.is-float .wrap, .top.is-float .menu-panel { pointer-events: auto; }

/* over a page that opens with a full-bleed hero, the floating header takes no room of its own: the hero runs
   underneath it from the top. Elsewhere it keeps its strip, which is the page's own background. */
.head-over .top.is-float { margin-bottom: calc(-1 * var(--head-h)); }

/* once the page moves, the Kwelio wordmark folds into its lio mark, the app icon's glyph (Sumi, 6 Oct 2026).
   The wordmark's viewBox is 586 643 4193 1091; the mark is its last 1383 units (from x 3406). */
.top .brand > .wordmark, .top .lockup > .wordmark { --wm-h: 1.45rem; transition: clip-path .45s var(--ease-out), margin-left .45s var(--ease-out); clip-path: inset(0 0 0 0); }
.top .lockup > .wordmark { --wm-h: 1.35rem; }
.top.is-scrolled .brand > .wordmark, .top.is-scrolled .lockup > .wordmark { clip-path: inset(0 0 0 67.26%); margin-left: calc(var(--wm-h) * -2820 / 1091); }
@media (prefers-reduced-motion: reduce) { .top .brand > .wordmark, .top .lockup > .wordmark { transition: none; } }

/* the sample Kwelix screen's three views: Queue, Cohort, Reports (demonstration data) */
.kxs-seg [role="tab"] { font: inherit; border: 0; background: transparent; cursor: pointer; padding: .38rem .9rem; border-radius: 999px; color: var(--muted); }
.kxs-seg [role="tab"]:hover { color: var(--ink); }
.kxs-seg [role="tab"][aria-selected="true"] { 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-seg [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kxs-views { display: grid; }
.kxs-views > .kxs-view { grid-area: 1 / 1; min-width: 0; }
.kxs-views > .kxs-view:not(.is-on) { visibility: hidden; }
.kxs-cohort, .kxs-report { display: grid; gap: 14px; align-content: start; }
@media (min-width: 980px) { .kxs-cohort { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); } .kxs-report { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.kc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kc-facts li { display: grid; grid-template-columns: 4.2rem 1fr; align-items: baseline; gap: .6rem; }
.kc-facts b { font-size: 1.7rem; font-weight: 300; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.kc-facts span { font-size: .85rem; color: var(--text); }
.kc-note { margin-top: 1rem; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.kc-bars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; height: clamp(150px, 26svh, 250px); }
.kc-bars .b { display: grid; grid-template-rows: auto 1fr; height: 100%; align-items: end; text-align: center; }
.kc-bars .b i { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--ink) 82%, transparent); }
.kc-bars .b.low i { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.kc-bars .b small { font-size: .72rem; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: .25rem; align-self: end; }
.kc-axis { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: .45rem; font-size: .72rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.kc-key { margin-top: .7rem; font-size: .78rem; color: var(--muted); }
.kr-sub { font-size: .85rem; color: var(--text); margin-bottom: 1rem; }
.kr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kr-tiles span { padding: .8rem .9rem; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.kr-tiles b { display: block; font-size: 1.6rem; font-weight: 300; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kr-tiles small { font-size: .78rem; color: var(--muted); }
.kr-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
@media (max-width: 640px) { .kxs-top { flex-wrap: wrap; } .kxs-seg { order: 3; width: 100%; margin: .2rem 0 0; justify-content: space-between; } }
.top .brand > .wordmark, .top .lockup > .wordmark { flex-shrink: 0; width: calc(var(--wm-h) * 4193 / 1091); max-width: none; height: var(--wm-h); }

/* ── Phones and tablets (6 Oct 2026 mobile pass) ── */
/* the floating header stays inside the screen with an even gutter on both sides; its tools sit at the right.
   (It was the width of the screen plus its margins, which widened every page on a phone by 32px: the page
   could be pulled sideways, and phones zoomed it out so the floating buttons slipped off the bottom.) */
@media (max-width: 999px) {
  .top.is-float .wrap { width: auto; max-width: none; margin-inline: var(--gutter); }
  .top .wrap > .menu-btn, .top .wrap > .top-tools { margin-left: auto; }
}
/* on touch screens the parallax rides the scroll itself (scroll-driven animations: Safari 26 and Chrome 115
   on); where unsupported the pictures stay still. A mouse or trackpad keeps the script version (site.js). */
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .vband, .shero, [data-px] { view-timeline: --kw-px block; }
    .vband .vband-media, .shero .shero-media, [data-px] [data-px-media] { animation: kw-px-band linear both; animation-timeline: --kw-px; animation-range: cover 0% cover 100%; }
    [data-px="frame"] img, [data-px="frame"] video { animation: kw-px-frame linear both; animation-timeline: --kw-px; animation-range: cover 0% cover 100%; }
  }
}
@keyframes kw-px-band { from { transform: translate3d(0, 11%, 0); } to { transform: translate3d(0, -11%, 0); } }
@keyframes kw-px-frame { from { transform: translate3d(0, 6%, 0) scale(1.16); } to { transform: translate3d(0, -6%, 0) scale(1.16); } }
/* targets: breadcrumbs and side links get at least 24px (WCAG 2.2 target size) */
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
.aside-block li a { display: inline-flex; align-items: center; min-height: 24px; }
/* small chart labels in the sample screens stay readable */
.km-score svg text { font-size: 11.5px; }
/* the open menu covers the whole screen, behind the floating capsule too, so no page shows round the capsule */
.top.is-float .menu-panel { inset: 0; padding-top: calc(var(--head-h) + 1.25rem); }
.top.is-float .wrap { position: relative; z-index: 31; }
/* the text-set certification badge: its small line is readable (was 8px) */
.cert-text small { font-size: .72rem; letter-spacing: .04em; }
.specs dd a { display: inline-flex; align-items: center; min-height: 24px; }
.kx-demo { font-size: .72rem; }
/* the capsule's 7px margin stays inside the header, so a sticky header does not start 7px down and jump up
   when the page first moves (it did on pop.kwelio.com, kwelix.com, the shop and kwelio.com's inner pages) */
.top.is-float { display: flow-root; }
/* footnote numbers in articles: a larger invisible tap area around each, without changing the line */
sup.cite a { position: relative; }
sup.cite a::after { content: ''; position: absolute; inset: -6px -7px; }

/* ── Create Apps Championship 2026: featured recognition, the News feature, press list, award photos (7 Oct 2026) ── */
.r-feature { padding: 0; display: flex; flex-direction: column; }
.r-photo { margin: 0; overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 10; }
.r-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.r-body { flex: 1; padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; }
.r-feature .r-title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.2; letter-spacing: -.018em; max-width: 24ch; }
.r-go { margin-top: auto; padding-top: 1.1rem; }
@media (min-width: 640px) {
  .r-feature { grid-column: 1 / -1; }
  .r-photo { aspect-ratio: 2 / 1; }
  .recog-list > .r-item:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .r-feature { grid-column: 1 / span 2; grid-row: span 2; }
  .recog-list > .r-item:last-child:nth-child(even) { grid-column: auto; }
}

.win-art { border-top: 1px solid var(--rule); padding-top: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.win-head { display: grid; gap: .8rem; }
.win-head .n-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; color: var(--muted); }
.win-head h2 { color: var(--ink); font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
.win-sub { display: block; font-weight: 300; color: var(--muted); }
.win-lead { margin: 0; border-radius: 10px; overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 9; }
.win-lead img { width: 100%; height: 100%; object-fit: cover; }
.win-text { display: grid; gap: 1.2rem; }
.win-text .prose p + p { margin-top: .9rem; }
.win-text .prose { max-width: 40rem; }
.win-text .prose a { text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 1000px) { .win-text { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; } .win-text .cta-row { margin: 0; } }
.win-media { display: grid; gap: 1.6rem 1.2rem; }
.win-media figure { margin: 0; min-width: 0; }
.win-media figcaption, .ap-grid figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.win-media video, .win-media .wm-photo img { display: block; width: 100%; height: auto; border-radius: 8px; background: #0C0C0B; }
.wm-tall video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: 78svh; margin-inline: auto; }
.wm-photo img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 33%; }
@media (min-width: 640px) {
  .win-media { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .wm-pitch { grid-column: 1 / -1; }
  .wm-clip { grid-column: 1; grid-row: 2; }
  .wm-tall { grid-column: 2; grid-row: 2 / span 2; }
  .wm-tall video { width: 100%; max-height: none; }
  .win-media .wm-photo { grid-column: 1; grid-row: 3; }
}
@media (min-width: 1000px) {
  .win-media { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-pitch { grid-column: 1 / span 3; grid-row: 1; }
  .wm-tall { grid-column: 4; grid-row: 1; }
  .wm-clip { grid-column: 1 / span 2; grid-row: 2; }
  .win-media .wm-photo { grid-column: 3 / span 2; grid-row: 2; }
}

/* YouTube, loaded only when asked: until then nothing is fetched from YouTube */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0C0C0B; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; color: #F2EEE4; text-decoration: none;
  background: linear-gradient(to top, rgba(12, 12, 11, .55), rgba(12, 12, 11, .05) 60%); }
.yt-play svg { width: 74px; height: 74px; padding: 20px 18px 20px 22px; border-radius: 50%; background: var(--lime); fill: var(--lime-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .25s var(--ease-out); }
.yt-play:hover svg, .yt-play:focus-visible svg { transform: scale(1.06); }
.yt-play:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .yt-play svg { transition: none; } }

.win-more { margin-top: -.4rem; }
.win-press h3 { color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .8rem; }
.press-list { list-style: none; border-top: 1px solid var(--rule); }
.press-list li { border-bottom: 1px solid var(--rule); }
.press-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: 1rem 0; min-height: 44px; text-decoration: none; color: var(--text); }
.pl-outlet { grid-column: 1; color: var(--muted); }
.pl-title { grid-column: 1; color: var(--ink); font-weight: 700; line-height: 1.35; }
.pl-title[lang="ar"] { font-family: 'Noto Sans Arabic', 'Geeza Pro', 'SF Arabic', 'Segoe UI', Tahoma, sans-serif; font-size: 1.08em; text-align: start; }
.pl-meta { grid-column: 1; font-size: .9rem; color: var(--muted); }
.pl-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--rule);
  transition: background-color .2s, border-color .2s, color .2s; }
.pl-go svg { width: 15px; height: 15px; }
.press-list a:hover .pl-title { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.press-list a:hover .pl-go { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
@media (min-width: 860px) {
  .press-list a { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; }
  .pl-outlet { grid-column: 1; grid-row: 1 / span 2; }
  .pl-title, .pl-meta { grid-column: 2; }
  .pl-go { grid-column: 3; grid-row: 1 / span 2; }
}

.ap-grid, .icon-grid { list-style: none; display: grid; gap: 1.2rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ap-grid { grid-template-columns: repeat(3, minmax(0, 220px)); } .icon-grid { grid-template-columns: repeat(3, minmax(0, 180px)); } }
.ap-thumb { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--bg-2); cursor: zoom-in; position: relative; }
.ap-thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s var(--ease-out); }
.ap-grid li:nth-child(2) .ap-thumb img { object-position: 50% 30%; }
.ap-thumb:hover img { transform: scale(1.03); }
.ap-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ap-cap { display: grid; gap: .2rem; margin-top: .55rem; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.ap-cap b { color: var(--ink); font-weight: 700; }
.ap-cap a { justify-self: start; color: var(--ink); font-weight: 600; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; min-height: 24px; }
.icon-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--card); border: 1px solid var(--rule); }
.icon-tile img { width: 62%; height: auto; }
@media (prefers-reduced-motion: reduce) { .ap-thumb img { transition: none; } }

/* Photo viewer (Press page award photos) */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: rgba(10, 10, 9, .94); color: #F2EEE4; }
.lb::backdrop { background: rgba(10, 10, 9, .6); }
.lb-in { position: relative; height: 100%; display: grid; place-items: center; padding: clamp(3.5rem, 7vw, 4.5rem) clamp(.75rem, 6vw, 5.5rem) 1rem; }
.lb-fig { margin: 0; display: grid; gap: .8rem; justify-items: center; max-width: min(1200px, 100%); }
.lb-img { max-width: 100%; max-height: calc(100dvh - 11rem); width: auto; height: auto; border-radius: 6px; }
.lb-fig figcaption { display: grid; gap: .25rem; justify-items: center; text-align: center; max-width: 46rem; font-size: .95rem; line-height: 1.45; }
.lb-count { color: #ABA89E; }
.lb-dl { color: #F2EEE4; font-weight: 600; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(242, 238, 228, .28); background: rgba(26, 26, 24, .7); color: #F2EEE4; cursor: pointer; }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-btn:hover { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.lb-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 639px) { .lb-prev, .lb-next { top: auto; bottom: 1rem; transform: none; } .lb-img { max-height: calc(100dvh - 14rem); } }

/* The award link in a hero (kwelio.com app page, pop.kwelio.com), 7 Oct 2026 */
.award-pill { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; max-width: 100%; padding: .35rem .95rem .35rem .4rem;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: 999px; color: inherit; text-decoration: none;
  font-size: .9rem; font-weight: 600; line-height: 1.3; transition: border-color .2s; }
.award-pill .ap-k { flex: none; padding: .3rem .6rem; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: .66rem; }
.award-pill svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease-out); }
.award-pill:hover { border-color: currentColor; }
.award-pill:hover svg { transform: translateX(3px); }
.phero-award { margin-top: 1.4rem; }
.shero[data-tone="dark"] .award-pill { color: #F2EEE4; background: rgba(12, 12, 11, .38); }
.shero[data-tone="light"] .award-pill { color: #161614; }
.sx-mask .award-pill { color: #F2EEE4; background: rgba(12, 12, 11, .42); margin-bottom: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .award-pill svg { transition: none; } }
.wm-winners { margin: 0; }
.wm-winners figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: var(--muted); }

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