/* 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(3.5rem, 10vw, 7rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --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; }
@media (prefers-color-scheme: light) { .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); }
@media (prefers-color-scheme: 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); }
@media (prefers-color-scheme: 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); }
@media (prefers-color-scheme: light) { .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; }
@media (prefers-color-scheme: light) { .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; }
@media (prefers-color-scheme: light) { .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; }
@media (prefers-color-scheme: light) { .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; }
@media (prefers-color-scheme: dark) { .status.live::before { background: #6FCF8E; } .status.soon::before { background: #E8B56C; } .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; }
@media (prefers-color-scheme: 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; }
@media (prefers-color-scheme: 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: 300px; } .app-grid { grid-template-columns: minmax(0, 1fr) 300px; } }
.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); }
@media (prefers-color-scheme: light) { .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; }
@media (prefers-color-scheme: dark) { .dodont .yes li::before { color: #6FCF8E; } .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; }
@media (prefers-color-scheme: dark) { .err { color: #FF7A93; } .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; }
@media (prefers-color-scheme: dark) { :root { --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%); }
@media (prefers-color-scheme: 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; }
  .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)); }
@media (prefers-color-scheme: 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; }
@media (prefers-color-scheme: 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); }
@media (prefers-color-scheme: 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; }
  .bead::before { background-image: radial-gradient(rgba(242, 238, 228, .18) 1.1px, transparent 1.5px); }
  .bead--core { --b1: rgba(232, 84, 42, .26); --b2: rgba(214, 227, 0, .16); }
  .bead--skin { --b1: rgba(233, 190, 50, .26); --b2: rgba(214, 227, 0, .14); }
  .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; }
@media (prefers-color-scheme: dark) { .bead-glass { --lg-tint-a: .05; } .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; }
@media (prefers-color-scheme: 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); }
@media (prefers-color-scheme: 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); }
@media (prefers-color-scheme: light) { .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); }
@media (prefers-color-scheme: light) { .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; }
@media (prefers-color-scheme: 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; }