/* Essarion, v3 (October 2026). Chosen over 40 rounds of side-by-side picks: a white page, a black-and-white
   interface, Manrope throughout, and real colour footage in rounded panels. The footage carries no captions;
   /credits names every clip. Motion is slow and quiet (site.js): a slowed scroll, and things settle into place
   as they come into view. */
:root {
  --ink: #111214; --body: #3f4044; --muted: #6a6b6f; --faint: #9a9ba0; --line: #e8e8e8; --rule: #cfcfd2; --tint: #f4f4f5;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 14px; --r-small: 10px; --btn-r: 8px; --gut: 24px; --max: 1392px; --text: 760px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { background: #fff; color: var(--ink); font: 400 16.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.028em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.012em; }
p { text-wrap: pretty; }
::selection { background: #111214; color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Buttons: small rounded rectangles; the second choice is outlined */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--btn-r); font: 500 14.5px/1 var(--font); white-space: nowrap; cursor: pointer; border: 0; transition: background .2s, color .2s, box-shadow .2s; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #2b2c30; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn.line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: #ececec; }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.link { border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.link:hover { border-color: var(--ink); }

/* An announcement above the nav: one line, the whole strip a link; it scrolls away and the nav sticks */
.notice { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; padding: 11px var(--gut); background: var(--ink); color: #fff; font-size: 14px; line-height: 1.4; text-align: center; }
.notice b { font-weight: 600; }
.notice .more { color: rgb(255 255 255 / .62); transition: color .2s; }
.notice:hover .more { color: #fff; }

/* Nav: logo left, links centred, buttons right; on phones a menu */
.nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 var(--gut); background: #fff; transition: box-shadow .3s; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.brand { font: 600 19px/1 var(--font); letter-spacing: -.02em; }
.links { display: flex; gap: 30px; font-size: 14.5px; }
.links a { color: #2a2b2e; transition: color .2s; }
.links a:hover, .links a[aria-current] { color: var(--muted); }
.nav-end { justify-self: end; display: flex; gap: 8px; }
.menu-btn { display: none; }

/* Panels: rounded footage, with words set on it bottom left */
.panel { position: relative; overflow: hidden; border-radius: var(--r); background: #0b0c0e; isolation: isolate; }
.panel .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel video.media { opacity: 0; transition: opacity .6s; }
.panel video.media.shown { opacity: 1; }
.panel[data-film] video.media { transition: none; }   /* the home hero cuts hard between clips */
.panel .on { position: absolute; left: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px); bottom: clamp(26px, 4vw, 48px); z-index: 2; max-width: 640px; color: #fff; }
.panel .on::before { content: ""; position: absolute; z-index: -1; inset: -40vh -50vw -20vh -10vw; background: radial-gradient(60% 55% at 20% 80%, rgb(0 0 0 / .5), transparent 70%); pointer-events: none; }
.panel .on p { margin-top: 18px; max-width: 470px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: rgb(255 255 255 / .9); }
.panel .on .row { margin-top: 26px; }
.panel .kicker { display: inline-block; margin-bottom: 16px; font-size: 14px; color: rgb(255 255 255 / .8); }
.panel .kicker:hover { color: #fff; }

/* The home hero: most of the first screen, the next section just showing below */
.hero { margin: 0 var(--gut); height: 76vh; height: 76svh; min-height: 480px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: 1; letter-spacing: -.038em; }
.hero .media.inset { transform: scale(1.07); }   /* the Earth clip has thin black bars baked in */

/* A release: slow blue, green and yellow light drifting behind the name, set in white in the middle (site.js draws the colour;
   the gradient here stands in until it does, or if it can't) */
.release { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; margin: 0 var(--gut); height: 76vh; height: 76svh; min-height: 480px; border-radius: var(--r); color: #fff; text-align: center;
  background: radial-gradient(55% 80% at 20% 45%, rgb(30 80 240 / .8), transparent 75%), radial-gradient(52% 78% at 80% 55%, rgb(20 180 130 / .65), transparent 75%), radial-gradient(40% 50% at 52% 100%, rgb(255 215 80 / .55), transparent 75%), #061226; }
.release canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.release .mid { position: relative; padding: 0 24px; }
.release .over { font-size: 15px; color: rgb(255 255 255 / .8); }
.release .name { margin-top: 6px; font-size: clamp(96px, 15.5vw, 240px); line-height: .92; letter-spacing: -.055em; font-weight: 500; }
.release p { max-width: 36ch; margin: 22px auto 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: rgb(255 255 255 / .9); }
.release .row { justify-content: center; margin-top: 28px; }
.release .corner { position: absolute; bottom: clamp(18px, 2.4vw, 30px); font-size: 13px; color: rgb(255 255 255 / .68); }
.release .corner.l { left: clamp(20px, 2.6vw, 34px); }
.release .corner.r { right: clamp(20px, 2.6vw, 34px); }
.release[data-release="bem-1"] { background: radial-gradient(55% 80% at 20% 45%, rgb(80 44 184 / .8), transparent 75%), radial-gradient(52% 78% at 80% 55%, rgb(184 52 88 / .7), transparent 75%), radial-gradient(40% 50% at 66% 100%, rgb(216 125 44 / .55), transparent 75%), #0d0817; }
.release[data-release="kinema"] { background: radial-gradient(48% 70% at 20% 42%, rgb(160 160 163 / .62), transparent 76%), radial-gradient(44% 66% at 80% 56%, rgb(96 96 99 / .55), transparent 76%), #030303; }
.release.inset { margin: 0; height: auto; min-height: 0; aspect-ratio: 21 / 9; }
/* Release tiles: a smaller panel per release, the whole tile a link */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--gut); }
.release.tile { margin: 0; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.release.tile .name { font-size: clamp(60px, 7.4vw, 120px); }
.release.tile p:not(.over) { margin-top: 16px; }
.release.tile .go { display: inline-block; margin-top: 18px; font-size: 14px; color: rgb(255 255 255 / .75); transition: color .2s; }
.release.tile:hover .go { color: #fff; }
.release.inset .name { font-size: clamp(80px, 11vw, 168px); }

/* A page's hero: the same panel, a little shorter */
.phero { margin: 0 var(--gut); height: 64vh; height: 64svh; min-height: 440px; }
.phero h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.036em; }
@media (max-width: 640px) { .phero h1 { font-size: min(40px, 9vw); } }   /* “ResearchAnything” fits a phone */
.phero.shade::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(15deg, rgb(0 0 0 / .72), rgb(0 0 0 / .4) 45%, transparent 75%); pointer-events: none; }   /* a bright picture still lets the title read */

/* A heading and a line beside a footage panel */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--gut); align-items: start; width: calc(100% - 2 * var(--gut)); margin: clamp(80px, 11vw, 150px) auto 0; }
.hero + .feature, .phero + .feature, .phero + .sec, .release + .feature { margin-top: 48px; }
.feature.flip { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.feature.flip .feature-text { order: 2; }
.feature-text { padding: 6px 12px 0 2px; }
.feature-text h2 { max-width: 12ch; }
.feature-text p { margin-top: 18px; max-width: 38ch; font-size: 18.5px; color: var(--body); }
.feature-text .row, .feature-text > .btn { margin-top: 26px; }
.feature .panel { aspect-ratio: 16 / 9; }

/* Sections: centred headings, generous space between */
.sec { width: calc(100% - 2 * var(--gut)); max-width: var(--max); margin: clamp(90px, 12vw, 160px) auto 0; }
.sec-head { text-align: center; margin-bottom: 44px; }
.sec-head p { max-width: 580px; margin: 14px auto 0; font-size: 18.5px; color: var(--body); }
.sec-head.left { display: flex; justify-content: space-between; align-items: end; gap: 24px; text-align: left; }
.sec-head.left p { margin: 12px 0 0; }

/* A statement: the heading on the left, the paragraph on the right */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gut) 64px; align-items: start; }
.split p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--body); }
.split p b, .split p strong { font-weight: 500; color: var(--ink); }

/* Long-form text, one column */
.prose { max-width: var(--text); margin: 0 auto; }
.prose p { margin-bottom: 1.1em; font-size: 19px; line-height: 1.6; color: var(--body); }
.prose .lead { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.022em; color: var(--ink); margin-bottom: .9em; }

/* Products: three columns, the product's name under its picture */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.pic { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-small); background: #0b0c0e; }
.col { display: flex; flex-direction: column; }
.col .pic { margin-bottom: 22px; }
.col h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.col .lead { margin-top: 10px; font-size: 17px; line-height: 1.4; color: #3a3b3f; }
.col p { margin-top: 10px; font-size: 16px; color: #55565a; max-width: 42ch; }
.col .row { margin-top: auto; padding-top: 22px; }   /* buttons sit on one line across the columns, however the text wraps */
@media (min-width: 901px) and (max-width: 1040px) { .col .btn { padding: 0 10px; font-size: 13.5px; } }   /* both buttons still fit on one line in the narrowest three-column widths */

/* Numbered points in a grid of six (or four) */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--gut); list-style: none; padding: 0; }
.points.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.points .n { display: block; margin-bottom: 18px; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.points h3 { font-size: 22px; letter-spacing: -.016em; }
.points p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #55565a; }
.points .note { font-size: 14px; color: var(--muted); }
.use { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.use dt { color: var(--faint); }
.use dd { color: var(--ink); }

/* Tinted cards: principles, features, models */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); list-style: none; padding: 0; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards > li { padding: 28px 26px 30px; border-radius: var(--r); background: var(--tint); }
.cards h3 { font-size: 21px; }
.cards p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #55565a; }
.cards dl { display: flex; gap: 28px; margin-top: 22px; font-size: 14px; }
.cards dt { color: var(--faint); }
.cards .tag { display: block; margin-bottom: 26px; font-size: 13px; color: var(--muted); }
.fine { margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; }

/* Facts: a few short answers in a row */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts > div { padding-top: 18px; border-top: 1px solid var(--ink); }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { margin-top: 8px; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }

/* A question in, an answer out */
.demo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: clamp(28px, 4vw, 56px); border-radius: var(--r); background: var(--tint); }
.demo .lbl { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.demo .q { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; letter-spacing: -.018em; }
.demo .a { padding: 22px 24px; border-radius: var(--r-small); background: #fff; font-size: 17px; line-height: 1.55; }
.demo sup { font-size: 11px; color: var(--muted); }
.demo .small { margin-top: 12px; font-size: 14px; color: var(--muted); }
.demo .to { font-size: 22px; color: var(--faint); }

/* Research: three stories; the one in focus (under the pointer) is wide and shows its summary.
   The columns and the headline glide on one curve, and the headline's width is in ch so it grows with its
   type: its lines never re-break mid-glide. The summary always holds its space and only fades, so nothing
   below it moves. */
.news { --glide: .95s cubic-bezier(.45, 0, .15, 1); display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: var(--gut); transition: grid-template-columns var(--glide); }
.news[data-focus="1"] { grid-template-columns: 1fr 2.2fr 1fr; }
.news[data-focus="2"] { grid-template-columns: 1fr 1fr 2.2fr; }
.post { display: block; min-width: 0; }
.post .pic { height: clamp(260px, 30vw, 440px); aspect-ratio: auto; margin-bottom: 16px; }
.post h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.012em; max-width: 24ch; transition: font-size var(--glide), letter-spacing var(--glide); }
.post .meta { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.post p { max-width: 52ch; margin-top: 12px; color: #55565a; opacity: 0; transition: opacity .25s; }
.news[data-focus="0"] .post:nth-child(1) h3, .news[data-focus="1"] .post:nth-child(2) h3, .news[data-focus="2"] .post:nth-child(3) h3 { font-size: 28px; letter-spacing: -.022em; }
.news[data-focus="0"] .post:nth-child(1) p, .news[data-focus="1"] .post:nth-child(2) p, .news[data-focus="2"] .post:nth-child(3) p { opacity: 1; transition: opacity .6s .5s; }

/* The brand film: its poster with a play button, then the film itself, with sound */
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0c0e; }
.film-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .4s, visibility 0s; }
.film-play .disc { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .3s var(--ease); }
.film-play svg { width: 26px; height: 26px; margin-left: 4px; }
.film-play:hover .disc { transform: scale(1.06); }
.film.is-playing .film-play { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

/* About: questions at every scale (zoom.js draws it) */
.zoom { position: relative; margin-top: 8px; border-radius: var(--r); overflow: hidden; background: var(--tint); }
.zoom canvas { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 84vh; }
.zoom-q { position: absolute; top: clamp(20px, 4%, 40px); left: clamp(20px, 3vw, 40px); z-index: 1; max-width: min(24ch, 60%); font: 500 clamp(20px, 2vw, 28px)/1.2 var(--font); letter-spacing: -.016em; text-wrap: balance; opacity: 0; transition: opacity .45s; }
.zoom-q.on { opacity: 1; }
.zoom-q::before { content: "Question"; display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); letter-spacing: 0; }
.zoom-cap { display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-top: 18px; }
.zoom-stage { font-size: 22px; letter-spacing: -.014em; }
.zoom-across { margin-right: auto; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zoom-replay { height: 34px; padding: 0 14px; border: 0; border-radius: var(--btn-r); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); font: 500 14px/1 var(--font); cursor: pointer; }
.zoom-replay:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* The end of a page: one more footage panel, then the footer */
.end { margin: clamp(90px, 12vw, 160px) var(--gut) 0; height: min(78vh, 760px); min-height: 440px; }
.end h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.034em; max-width: 15ch; }
.end p { max-width: 44ch; }
.foot { width: calc(100% - 2 * var(--gut)); max-width: var(--max); margin: 64px auto 0; padding-bottom: 28px; font-size: 14px; }
.foot-top { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--gut); padding-bottom: 48px; }
.foot-brand p { margin-top: 12px; max-width: 28ch; color: var(--muted); }
.foot h4 { font: 500 13px/1 var(--font); color: var(--muted); margin-bottom: 14px; }
.foot nav a { display: block; margin-bottom: 9px; color: #2a2b2e; }
.foot nav a:hover { color: var(--muted); }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Documents: privacy, terms, credits */
.doc-hero { width: calc(100% - 2 * var(--gut)); max-width: var(--max); margin: clamp(56px, 9vw, 110px) auto 0; }
.doc-hero h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1; letter-spacing: -.036em; }
.doc-hero .eff { margin-top: 16px; font-size: 14px; color: var(--muted); }
.doc-hero .intro { max-width: var(--text); margin-top: 32px; }
.doc-hero .intro p { margin-bottom: 1em; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; color: var(--body); }
.doc-grid { display: grid; grid-template-columns: 220px minmax(0, var(--text)); gap: 64px; width: calc(100% - 2 * var(--gut)); max-width: var(--max); margin: 56px auto 0; }
.toc { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.toc > span { display: block; margin-bottom: 14px; color: var(--muted); }
.toc ol { list-style: none; padding: 0; }
.toc li { margin-bottom: 9px; }
.toc li > span { display: inline-block; width: 28px; color: var(--faint); font-variant-numeric: tabular-nums; }
.toc a { color: var(--body); transition: color .2s; }
.toc a:hover { color: var(--muted); }
.doc section { padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.doc section:first-child { padding-top: 0; border-top: 0; }
.doc h2 { margin-bottom: 16px; font-size: clamp(24px, 2vw, 28px); line-height: 1.2; letter-spacing: -.016em; }
.doc h2 span { margin-right: 10px; color: var(--faint); font-size: .7em; vertical-align: .15em; font-variant-numeric: tabular-nums; }
.doc h3 { margin: 22px 0 10px; font-size: 18px; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.7; color: var(--body); }
.doc p { margin-bottom: 1em; }
.doc ul, .doc ol { margin: 0 0 1em; padding-left: 1.2em; }
.doc li { margin-bottom: .35em; }
.doc a { border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.doc a:hover { border-color: var(--ink); }
.doc strong { font-weight: 600; color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; }
.doc th, .doc td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--body); }
.doc th { color: var(--ink); font-weight: 600; }

/* Things settle into place as they come into view */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Narrow screens */
@media (max-width: 1100px) {
  .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --gut: 16px; }
  .nav { grid-template-columns: 1fr auto; }
  .links, .nav-end .line { display: none; }
  .menu-btn { display: inline-flex; }
  .nav.open .links { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 64px; padding: 8px var(--gut) 20px; background: #fff; box-shadow: 0 1px 0 var(--line); font-size: 20px; }
  .nav.open .links a { padding: 10px 0; }
  .hero { height: 72svh; }
  .phero { height: 60svh; }
  .feature, .feature.flip, .split { grid-template-columns: 1fr; }
  .feature.flip .feature-text { order: 0; }
  .cols, .points, .points.two, .cards, .cards.four, .facts, .facts.four { grid-template-columns: 1fr; gap: 40px; }
  .cards { gap: 12px; }
  .news, .news[data-focus] { grid-template-columns: 1fr; gap: 40px; }
  .post p { opacity: 1; }
  .release { height: 78svh; }
  .release.inset { aspect-ratio: auto; height: 64svh; min-height: 420px; }
  .release .corner { display: none; }
  .demo { grid-template-columns: 1fr; }
  .demo .to { transform: rotate(90deg); justify-self: start; }
  .sec-head.left { flex-direction: column; align-items: start; }
  .doc-grid { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .news, .post h3, .post p, .js [data-reveal] { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Additions for inner pages */
.feature-text .intro { margin-top: 0; max-width: 34ch; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--body); }
.feature-text .intro b { font-weight: 500; color: var(--ink); }
.stories .pic { margin-bottom: 22px; }
.stories .n { margin-bottom: 10px; }
.demo .src { list-style: none; padding: 0; display: grid; gap: 12px; }
.demo .src li { padding: 14px 16px; border-radius: var(--r-small); background: #fff; font-size: 15px; color: var(--body); }
.demo .src b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.demo .a h3 { margin-bottom: 10px; font-size: 22px; }
.demo .a p { font-size: 17px; line-height: 1.55; }
.label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.feature-text .use { max-width: 38ch; margin-top: 26px; }

/* An earlier release: kept, but quiet. A small heading, then the models as plain text in a row */
.older-head { max-width: 640px; margin-bottom: 40px; }
.older-head h2 { font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.02em; }
.older-head p { margin-top: 12px; font-size: 17px; color: var(--body); }
.older ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gut); list-style: none; padding: 0; }
.older h3 { font-size: 17px; letter-spacing: -.008em; }
.older li span { display: block; margin-top: 4px; font-size: 13px; color: var(--faint); }
.older li p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #55565a; }
.older .fine { text-align: left; margin-top: 36px; }
@media (max-width: 900px) { .older ul { grid-template-columns: 1fr 1fr; } }

/* A release page: everything centred. A short read, a row of figures, then the benchmarks as charts in the
   way model releases show them: one bar per model from a zero baseline, value on top, ours in ink and the
   rest in grey. On phones the bars lie down, so long model names keep their own line. Caveats sit in small
   numbered notes at the end; the marks (.fn) point at them. */
.fn { margin-left: 2px; font-size: .62em; line-height: 0; vertical-align: super; color: var(--muted); font-variant-numeric: tabular-nums; }
.fn + .fn::before { content: ","; margin-right: 1px; }
.fn:hover { color: var(--ink); }
/* the opening of a model's page: an abstract, as a paper would have one */
.abstract { max-width: 780px; margin-left: auto; margin-right: auto; }
.abstract h2 { margin-bottom: 18px; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.1; letter-spacing: -.026em; }
.abstract p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.7; color: var(--body); text-wrap: pretty; }
.read { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.read p { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; letter-spacing: -.016em; }
.read p + p { margin-top: 20px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; letter-spacing: 0; color: var(--body); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gut); max-width: 1180px; margin: 0 auto; text-align: center; }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; }
.stats dd { font-size: clamp(42px, 4.6vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.stats dt { margin-top: 12px; max-width: 24ch; font-size: 15px; line-height: 1.45; color: #55565a; }
.shot { max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 9; }
/* a short silent loop of a model at work; the film carries its own gradient round the edges */
.loop { max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 9; background: #0b2a4a; }
.loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .loop { width: 100%; margin: 0; }   /* beside text it fills its column (auto margins would collapse it) */
.loop-ctl { position: absolute; right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(17 18 20 / .6); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .2s; }
.loop-ctl:hover { background: rgb(17 18 20 / .8); transform: scale(1.05); }
.loop-ctl svg { width: 16px; height: 16px; }
.loop-ctl .i-play, .loop-ctl.held .i-pause { display: none; }
.loop-ctl.held .i-play { display: block; }
.loop + .fine { max-width: 1180px; margin: 16px auto 0; }
.sec .row.center { justify-content: center; margin-top: 28px; }
/* footage with its caption; a pair of clips side by side */
.clip { max-width: 1180px; margin: 0 auto; }
.clip figcaption { max-width: 70ch; margin: 14px auto 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; }
.clip figcaption.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); max-width: none; font-size: 16px; color: var(--body); }
.clip figcaption b { font-weight: 600; color: var(--ink); }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); max-width: 1180px; margin: clamp(32px, 4vw, 56px) auto 0; }
.clips .clip { width: 100%; margin: 0; }
@media (max-width: 900px) { .clips { grid-template-columns: 1fr; } }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gut); max-width: 1180px; margin: 0 auto; text-align: center; }
.trio h3 { font-size: 24px; letter-spacing: -.018em; }
.trio .size { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.trio p { max-width: 32ch; margin: 12px auto 0; font-size: 16.5px; line-height: 1.5; color: #55565a; }

.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); max-width: 1180px; margin: 0 auto; }
.chart { min-width: 0; padding: clamp(26px, 3.2vw, 44px) clamp(20px, 3vw, 40px); border-radius: var(--r); background: var(--tint); text-align: center; }
.chart.wide { grid-column: 1 / -1; }
/* the writing between charts, as a paper has between its figures */
.chart-text { grid-column: 1 / -1; width: 100%; max-width: 780px; margin: clamp(26px, 3vw, 40px) auto 0; }
.chart-text:first-child { margin-top: 0; }
.chart-text h3 { margin-bottom: 10px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.chart-text p { font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.6; color: var(--body); }
.chart-text p + p { margin-top: 10px; }
.chart { display: flex; flex-direction: column; }
.chart > .vbars, .chart > .groups { margin-top: auto; padding-top: 48px; }   /* paired cards share a baseline */
.chart > .hbars { width: 100%; margin: auto; padding-top: 40px; }
.chart h3 { font-size: 20px; letter-spacing: -.012em; }
.chart .cap { max-width: 56ch; margin: 8px auto 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.chart .cap b, .results small b { font-weight: 700; color: var(--ink); }
.key { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 13.5px; color: #55565a; }
.key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; background: #c2c3c7; vertical-align: -1px; }
.key .us::before { background: var(--ink); }
.key.dots span::before { border-radius: 50%; }
.key .ring::before { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.key.dots .range::before { width: 20px; border-radius: 3px; background: #dcdcde; }
.trio.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); max-width: 1180px; margin: 0 auto; list-style: none; padding: 0; }
.ledger li { padding: 26px 24px 28px; border-radius: var(--r); background: var(--tint); }
.ledger .v { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.ledger h3 { font-size: 19px; line-height: 1.25; }
.ledger p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #55565a; }
.ledger .fig { display: block; margin-top: 16px; font-size: 28px; letter-spacing: -.03em; color: var(--ink); }
.vbars { display: flex; align-items: flex-start; gap: clamp(6px, 1vw, 14px); margin-top: 48px; }
.vbars .c { flex: 1 1 0; min-width: 0; }
.vbars .a { position: relative; display: flex; align-items: flex-end; justify-content: center; height: var(--plot, 240px); box-shadow: 0 1px 0 #d9dade; }
.vbars i { display: block; width: min(100%, 52px); height: calc(var(--v) / var(--scale, 100) * 100%); border-radius: 4px 4px 0 0; background: #c2c3c7; transition: background .2s; }
.vbars .val { position: absolute; left: -8px; right: -8px; bottom: calc(var(--v) / var(--scale, 100) * 100% + 8px); font-size: 13.5px; font-variant-numeric: tabular-nums; color: #55565a; white-space: nowrap; }
.vbars .nm { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.3; color: #55565a; overflow-wrap: anywhere; }
.vbars .us i { background: var(--ink); }
.vbars .us .val, .vbars .us .nm { color: var(--ink); font-weight: 600; }
.vbars .c:hover i { background: #9a9ba0; }
.vbars .us:hover i { background: #2b2c30; }
/* a scatter: each model a dot, cost along a log axis and score up the side; site.js draws it from the table
   inside the figure, which stays readable if the script does not run. Hover or focus a dot for its numbers */
.scatter .plot { position: relative; width: 100%; margin-top: 26px; }
.scatter svg { display: block; overflow: visible; }
.scatter .g { stroke: #dcdde2; stroke-width: 1; }
.scatter .t { font-size: 12px; fill: #6a6b6f; font-variant-numeric: tabular-nums; }
.scatter .ax { font-size: 12.5px; fill: #55565a; }
.scatter .lab { font-size: 12.5px; fill: #55565a; pointer-events: none; }
.scatter .lab.us { fill: var(--ink); font-weight: 600; }
.scatter .dot { fill: #9a9ba0; stroke: var(--tint); stroke-width: 2; transition: r .15s; }
.scatter .us .dot { fill: var(--ink); }
.scatter .ring .dot { fill: #fff; stroke: var(--ink); }
.scatter .lab.ring { fill: var(--ink); }
.scatter .band { fill: var(--ink); opacity: .07; }
.scatter .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.scatter .ln.ring { stroke-dasharray: 1 5; stroke-linecap: round; }
.scatter .hit { fill: transparent; cursor: pointer; }
.scatter .pt { outline: none; }
.scatter .pt:hover .dot, .scatter .pt:focus-visible .dot { stroke: var(--ink); stroke-width: 2; }
.scatter .us:hover .dot, .scatter .us:focus-visible .dot { stroke: #fff; }
.scatter .ring:hover .dot, .scatter .ring:focus-visible .dot { stroke-width: 3; }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 9px 13px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.45; text-align: left; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .15s; }
.tip.on { opacity: 1; }
.tip b { display: block; font-weight: 600; }
.tip span { color: rgb(255 255 255 / .78); font-variant-numeric: tabular-nums; }
.scatter table { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: 14px; text-align: left; }
.scatter th, .scatter td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-weight: 400; }
.scatter.drawn .data { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* still there for screen readers */
.groups { display: flex; gap: clamp(20px, 4vw, 48px); }
.groups > div { flex: 1 1 0; min-width: 0; }
.groups .vbars { margin-top: 0; }
.groups.keyed .nm { display: none; }   /* the legend names the bars; on phones they lie down and name themselves */
.groups .g { display: block; margin-top: 14px; padding-top: 10px; font-size: 13.5px; color: var(--ink); }
.hbars { display: grid; gap: 10px; max-width: 520px; text-align: left; }
.hbars .c { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); align-items: center; gap: 14px; }
.hbars .nm { font-size: 13.5px; line-height: 1.3; color: #55565a; }
.hbars .a { display: flex; align-items: center; gap: 8px; }
.hbars i { display: block; flex: none; width: calc(var(--v) / var(--scale, 100) * (100% - 64px)); min-width: 2px; height: 14px; border-radius: 0 4px 4px 0; background: #c2c3c7; }
.hbars .val { font-size: 13.5px; font-variant-numeric: tabular-nums; color: #55565a; white-space: nowrap; }
.hbars .us .nm, .hbars .us .val { color: var(--ink); font-weight: 600; }
.hbars .us i { background: var(--ink); }

.results { max-width: 1180px; margin: 0 auto; overflow-x: auto; }
.results table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.results th, .results td { padding: 14px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.results thead th { padding-top: 0; font-size: 13px; font-weight: 500; color: var(--muted); text-align: right; vertical-align: bottom; }
.results thead th:first-child { text-align: left; }
.results tbody th { font-weight: 500; text-align: left; color: var(--ink); }
.results tbody th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.results td { text-align: right; font-variant-numeric: tabular-nums; color: #55565a; white-space: nowrap; }
.results .us { background: var(--tint); color: var(--ink); }
.results thead .us { border-radius: 10px 10px 0 0; color: var(--ink); padding-top: 12px; }
.results td b { font-weight: 600; color: var(--ink); }
.results.wide table { min-width: 1080px; font-size: 14px; }
.results td.win { color: #1d47d6; font-weight: 700; background: #eef2ff; }
.results td.bem { color: var(--ink); font-weight: 700; background: #eeeff1; }
.results td.na { font-size: 12.5px; color: var(--faint); white-space: normal; }
.results td small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.results td .gap { display: block; height: 7px; }
.results tr.grp th { padding: 22px 7px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
/* which model a result belongs to: Examine solid, Examine Mini outlined, Compose grey */
.whos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chart .whos { justify-content: center; }
.who { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.who.ex { background: var(--ink); color: #fff; }
.who.mini { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.who.comp { background: #dcdde2; color: var(--ink); }
/* the model names stay in view under the nav while the table scrolls past. Where the table fits the page it
   needs no scroll box of its own and the header sticks; in the scroll box, site.js moves the header instead
   (sticky there would only push it down onto the first row) */
.results.wide thead th { position: relative; z-index: 3; padding-top: 12px; background: #fff; box-shadow: 0 1.5px 0 var(--line); }
@media (min-width: 1240px) { .results.wide { overflow: visible; } .results.wide thead th { position: sticky; top: 64px; } }
.results.wide th, .results.wide td { padding: 11px 7px; }
.results.wide + .results-note + .charts { margin-top: clamp(40px, 5vw, 64px); }
.results.wide thead th { width: 7%; font-size: 12.5px; line-height: 1.3; white-space: normal; }
.results.wide thead th:first-child { width: 23%; }
.results-note { max-width: 860px; margin: 22px auto 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); text-align: center; }
.footnotes { max-width: 860px; margin-left: auto; margin-right: auto; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.footnotes ol { padding-left: 1.3em; }
.footnotes li { margin-bottom: 10px; padding-left: 4px; scroll-margin-top: 100px; }
.footnotes li:target { color: var(--ink); }
.footnotes p { margin-top: 18px; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 36px var(--gut); }
  .trio, .trio.four, .charts, .ledger, .tiles { grid-template-columns: 1fr; }
  .release.tile { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  /* the columns lie down */
  .vbars { display: grid; gap: 10px; }
  .chart > .vbars, .chart > .groups { padding-top: 32px; }
  .vbars .c { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); align-items: center; gap: 12px; text-align: left; }
  .vbars .nm { order: -1; margin: 0; font-size: 13px; }
  .vbars .a { height: auto; justify-content: flex-start; align-items: center; gap: 8px; box-shadow: none; }
  .vbars i { flex: none; width: calc(var(--v) / var(--scale, 100) * (100% - 52px)); min-width: 2px; height: 12px; border-radius: 0 4px 4px 0; }
  .vbars .val { position: static; font-size: 13px; }
  .groups { flex-direction: column; gap: 20px; }
  .groups > div { display: flex; flex-direction: column; }
  .groups .g { order: -1; margin: 0 0 8px; padding: 0; font-weight: 600; }   /* on phones the group names its bars from above */
  .groups.keyed .nm { display: block; }
  .hbars .c { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); }
}

/* A page's hero photograph settles slowly into place, like a shot that has just begun */
.phero .media { animation: settle 9s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .phero .media { animation: none; } }