/* OcuSera — www.ocusera.com · v3 (Oct 2026): dark design system.
   Type: Inter for headlines (open spacing, as in the films) and text. Source Serif is used only for the equation on /technology. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-var.0ad7703a57.woff2") format("woff2"); font-weight: 400 650; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("../fonts/source-serif-var.a649a2bd67.woff2") format("woff2"); font-weight: 380 560; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("../fonts/source-serif-italic-latin.70a87febec.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0061-007A; }
@font-face { font-family: "Source Serif"; src: url("../fonts/source-serif-italic-greek.87fbc08a93.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0370-03FF; }

:root {
  --bg: #07090c; --bg2: #0a0d11; --s1: #0f1318; --s2: #151a21; --s3: #1c222a;
  --ink: #f2f4f6; --ink2: #a7b0ba; --ink3: #808a95;
  --line: rgba(255, 255, 255, 0.08); --line2: rgba(255, 255, 255, 0.15);
  --gold: #e3aa52; --gold2: #f5d39c; --gold-ink: #150d02; --red: #ff7b70;
  --max: 1240px; --pad: clamp(20px, 5vw, 64px); --r: 22px; --r-sm: 14px;
  --display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* headlines: Inter with open spacing (was Inter Tight, -0.03 to -0.045em) */
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hdr: 72px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--text); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
.im picture, .media picture, .portrait picture, .hero-art picture { display: block; width: 100%; height: 100%; }
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
sup.r { font-size: 0.42em; vertical-align: 1.15em; margin-left: 0.04em; font-weight: 500; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(227, 170, 82, 0.35); color: #fff; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- type */
.display, h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -0.022em; }
h2 { font-size: clamp(34px, 4.3vw, 58px); line-height: 1.08; letter-spacing: -0.018em; }
h3 { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-size: 18px; line-height: 1.3; letter-spacing: -0.005em; }
.eb { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--ink2); letter-spacing: -0.005em; }
.fine { font-size: 14px; line-height: 1.55; color: var(--ink3); }
.fine a, .prose a, .lead a, .faq a, .refs a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.fine a:hover, .prose a:hover, .lead a:hover, .faq a:hover, .refs a:hover { text-decoration-color: var(--gold); }
.gold-text { background: linear-gradient(92deg, #f8d9a6 0%, #e3aa52 55%, #c98a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- buttons and links */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font: 600 15.5px/1 var(--text); letter-spacing: -0.005em; white-space: nowrap; transition: transform 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s, color 0.25s; }
.btn svg { flex: none; }
.btn.p { background: var(--gold); color: var(--gold-ink); box-shadow: 0 10px 30px -12px rgba(227, 170, 82, 0.55); }
.btn.p:hover { background: #ecba6c; transform: translateY(-1px); }
.btn.g { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line2); }
.btn.g:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.03); }
.btn .meta { font-weight: 500; opacity: 0.68; margin-left: 2px; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.more .arr { color: var(--gold); transition: transform 0.25s var(--ease); }
.more:hover .arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- header */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s; }
.hdr.scrolled { background: rgba(7, 9, 12, 0.74); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom-color: var(--line); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; padding: 6px 0; }
.brand img { height: 22px; width: auto; }
.nav { display: flex; align-items: center; gap: 34px; font: 500 15px/1 var(--text); }
.nav a { color: var(--ink2); transition: color 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .nav-cta { color: var(--bg); background: var(--ink); height: 38px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 600; }
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { color: var(--bg); background: #fff; }
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line2); font: 600 14.5px/1 var(--text); cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav[open] summary { background: var(--ink); color: var(--bg); box-shadow: none; }
.mnav .x { display: none; } .mnav[open] .x { display: inline; } .mnav[open] .o { display: none; }
.mnav nav { position: fixed; left: 12px; right: 12px; top: calc(var(--hdr) - 4px); background: rgba(15, 19, 24, 0.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line2); border-radius: 18px; padding: 10px; display: grid; gap: 2px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.mnav nav a { display: flex; justify-content: space-between; align-items: center; padding: 16px 14px; border-radius: 12px; font: 600 19px/1 var(--display); letter-spacing: -0.01em; }
.mnav nav a:hover, .mnav nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.05); }
.mnav nav a .arr { color: var(--gold); }

/* ---------------------------------------------------------------- home: hero */
.hero { position: relative; min-height: clamp(660px, 100svh, 960px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; background: #05070a; }
.hero-art { position: absolute; top: 0; bottom: 0; right: 0; width: min(66vw, 1240px); z-index: -2; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; }
/* Oct 8: the hero is one seamless loop (hero-sync-loop.mp4), the same as the investor deck's cover: the syringe separates in
   step with How it works panel a behind it. Over the picture (its frame 0) on desktop; hm.js fades it in once it plays.
   Never below 1101 px or with prefers-reduced-motion. */
.hero-art .hero-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease); }
.hero-art .hero-loop.on { opacity: 1; }
@media (max-width: 1100px), (prefers-reduced-motion: reduce) { .hero-art .hero-loop { display: none; } }
/* Oct 9: phones and tablets get the same background on its own (hero-mobile-bg.mp4, portrait): red cells stack and sink
   behind the text, platelets rise. Screen-blended, so its black leaves the page as it is; the syringe still covers it. */
.hero-mbg { display: none; }
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .hero-mbg { display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s var(--ease); }
  .hero-mbg.on { opacity: 0.6; }   /* Oct 14: dimmer (Dr. Karlin) */
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(46% 58% at 76% 56%, rgba(227, 170, 82, 0.09), transparent 62%),
  linear-gradient(90deg, rgba(5, 7, 10, 0.7) 0%, rgba(5, 7, 10, 0.3) 34%, rgba(5, 7, 10, 0) 55%),
  linear-gradient(0deg, var(--bg) 0%, rgba(7, 9, 12, 0) 24%),
  linear-gradient(180deg, rgba(5, 7, 10, 0.55) 0%, rgba(5, 7, 10, 0) 18%); }
.hero .container { padding-top: calc(var(--hdr) + 40px); padding-bottom: 96px; }
.hero-text { max-width: 600px; }
.hero h1 { margin-top: 26px; font-size: clamp(52px, 7.6vw, 108px); line-height: 1.0; letter-spacing: -0.024em; }
.hero h1 .gold-text { display: inline-block; padding-bottom: 0.06em; }
.hero .lead { margin-top: 28px; max-width: 25em; }
.hero .actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero .reg-note { margin-top: 44px; font-size: 13.5px; line-height: 1.5; color: var(--ink3); max-width: 34em; }
.hero .reg-note b { color: var(--ink2); font-weight: 600; }

/* stats band */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--s1), var(--bg2)); }
.stats dl { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats dl > div { padding: 40px 28px 42px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; }
.stats dl > div + div { border-left: 1px solid var(--line); }
.stats dd { font: 500 clamp(36px, 3.6vw, 50px)/1 var(--display); letter-spacing: -0.02em; color: var(--gold); }
.stats dt { font-size: 15px; color: var(--ink2); }

/* sections */
.sec { padding: clamp(96px, 11vw, 150px) 0; }
.sec.tight { padding-top: 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.sec-head h2 { margin-top: 20px; max-width: 14em; }
.sec-head .lead { margin-top: 22px; max-width: 36em; }
.sec-head .more { margin-bottom: 10px; }

/* bento cards */
.bento { margin-top: 64px; display: grid; grid-template-columns: 1.28fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color 0.3s, transform 0.4s var(--ease); }
.card:hover { border-color: var(--line2); }
.card .im { aspect-ratio: 16 / 10; overflow: hidden; background: #0b0e12; }
.card .im img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .im img { transform: scale(1.025); }
/* How it works: each panel's animation plays over its still (site.js: hover, or in view on touch screens) */
.card.hm .im { position: relative; }
.card .im .hm-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.38s var(--ease), transform 1.2s var(--ease); }
.card.hm-on .im .hm-v { opacity: 1; transition: opacity 0.2s var(--ease), transform 1.2s var(--ease); }
.card:hover .im .hm-v { transform: scale(1.025); }
.card .t { padding: 26px 30px 30px; }
.card .t .k { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(227, 170, 82, 0.55); color: var(--gold); font: 600 13px/1 var(--text); margin-bottom: 16px; }
.card h3 { font-size: clamp(21px, 1.8vw, 26px); }
.card p { margin-top: 10px; color: var(--ink2); font-size: 16px; line-height: 1.55; max-width: 34em; }
.card.big { grid-row: 1 / 3; }
.card.big .im { aspect-ratio: auto; flex: 1; min-height: 340px; }

/* footage split */
.split2 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split2 h2 { margin-top: 20px; }
.split2 .lead { margin-top: 22px; }
.split2 .fine { margin-top: 22px; }
.media { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #0b0e12; }
.media.ar-tl { aspect-ratio: 1280 / 782; }
.media video, .media img { width: 100%; height: 100%; object-fit: cover; }
.media-toggle { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(7, 9, 12, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line2); font: 600 13px/1 var(--text); color: var(--ink); }
.media-toggle:hover { background: rgba(7, 9, 12, 0.85); }
.tag { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(7, 9, 12, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); font: 600 12px/1 var(--text); letter-spacing: 0.02em; color: var(--ink2); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* film */
.film-sec { padding-bottom: clamp(96px, 11vw, 150px); }
.player { position: relative; border-radius: calc(var(--r) + 4px); overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 16 / 9; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9); }
.player video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.player .cover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 28px; padding: clamp(22px, 3.6vw, 48px); background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.25) 46%, rgba(0, 0, 0, 0) 70%); transition: opacity 0.4s; }
.player .cover h2 { margin-top: 14px; font-size: clamp(26px, 2.9vw, 40px); max-width: 13em; }
.player .cover .meta { margin-top: 12px; font-size: 14px; color: var(--ink2); }
.player .ring { flex: none; order: -1; }
.player video { object-position: 50% 50%; }
.player .ring::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.player .ring:focus-visible { outline: none; }
.player .ring:focus-visible .dot { outline: 2px solid var(--gold); outline-offset: 6px; }
.player .dot { width: clamp(64px, 6.4vw, 84px); height: clamp(64px, 6.4vw, 84px); border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.player .dot svg { margin-left: 4px; }
.player .cover:hover .dot { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.1); }
.player.playing .cover { opacity: 0; pointer-events: none; }
.transcript { margin-top: 18px; border-top: 1px solid var(--line); }
.transcript summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 18px 0; font-weight: 600; font-size: 15px; color: var(--ink2); cursor: pointer; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--gold); font-weight: 500; }
.transcript[open] summary::before { content: "−"; }
.transcript ol { padding: 4px 0 28px; display: grid; gap: 12px; max-width: 760px; }
.transcript li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; color: var(--ink2); font-size: 15.5px; }
.transcript time { color: var(--ink3); font-variant-numeric: tabular-nums; }

/* kit */
.kit-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.kit-grid .media { aspect-ratio: 16 / 10.4; }
/* The kit, exploded (Oct 6, per Dr. Karlin: "hover with cursor over the kit should 'explode' it and have all components
   labeled, just like the video"): site.js draws 29 rendered frames over the still (the parts lift out of the tray as in
   the overview film), then the leader lines draw out and the labels come in, one after another. Mouse: hover. Touch and
   keyboard: the button. 16:9 here, so nothing of the render is cropped away from the labels. */
.kit-grid .media.kitx { aspect-ratio: 16 / 9; container-type: inline-size; }
.kitx-c, .kitx-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kitx-lines { overflow: visible; }
.kitx-lines line { stroke: rgba(236, 232, 224, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.25s var(--ease); }
.kitx-lines circle { fill: #f2ede4; opacity: 0; transition: opacity 0.2s; }
.kitx.on .kitx-lines line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s var(--ease) var(--d, 0s); }
.kitx.on .kitx-lines circle { opacity: 1; transition: opacity 0.3s var(--ease) var(--d, 0s); }
.kitx-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.kitx-labels li { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: max-content; max-width: 22cqw; transform: translate(var(--tx, 7px), -50%);
  font: 600 clamp(9.5px, 1.95cqw, 13.5px)/1.2 var(--display); letter-spacing: -0.005em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.2s var(--ease); }
.kitx-labels li.l { --tx: calc(-100% - 7px); text-align: right; }
.kitx-labels li span { display: block; margin-top: 0.25em; font: 400 clamp(8.5px, 1.6cqw, 11.5px)/1.3 var(--text); letter-spacing: 0; color: rgba(222, 227, 234, 0.7); }
.kitx.on .kitx-labels li { opacity: 1; transition: opacity 0.35s var(--ease) var(--d, 0s); }
.kitx-btn { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(7, 9, 12, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink);
  font: 500 12.5px/1 var(--text); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, opacity 0.3s; }
.kitx-btn:hover, .kitx-btn[aria-pressed="true"] { background: rgba(227, 170, 82, 0.16); border-color: rgba(227, 170, 82, 0.55); }
.kitx-btn .kitx-ic { color: var(--gold); flex: none; }
.kitx-btn[hidden] { display: none; }
@container (max-width: 520px) { .kitx-labels li span { display: none; } .kitx-labels li { max-width: 26cqw; } }
.kit-list { margin-top: 30px; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.kit-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--ink2); display: flex; gap: 12px; align-items: baseline; }
.kit-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }
.kit-grid .fine { margin-top: 20px; }

/* proposed use */
.use { background: radial-gradient(70% 90% at 100% 0%, rgba(227, 170, 82, 0.07), transparent 60%), var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.use .statement { margin-top: 26px; font: 500 clamp(24px, 2.6vw, 36px)/1.25 var(--display); letter-spacing: -0.012em; color: var(--ink); max-width: 30em; }
.use .fine { margin-top: 22px; max-width: 48em; }
.rows-head { margin-top: 72px; font: 600 12.5px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }
.rows { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rows li { padding: 28px 28px 30px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.rows .n { font: 500 14px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.rows h4, .rows h3 { margin-top: 18px; font-size: 19px; line-height: 1.3; letter-spacing: -0.005em; }
.rows p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink2); }

/* company */
.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.co .portrait { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1; max-width: 520px; }
.co .portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.02) brightness(0.96); }
.co h2 { margin-top: 20px; }
.co p { margin-top: 20px; color: var(--ink2); max-width: 32em; }
.co .more { margin-top: 28px; }

/* closing call to action */
.cta { position: relative; text-align: center; padding: clamp(110px, 13vw, 180px) 0; overflow: hidden; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 62% at 50% 100%, rgba(227, 170, 82, 0.16), transparent 70%); }
.cta h2 { margin: 0 auto; max-width: 13em; font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; }
.cta p { margin: 24px auto 0; max-width: 34em; color: var(--ink2); }
.cta .btn { margin-top: 40px; }

/* footer */
.ftr { border-top: 1px solid var(--line); padding: 72px 0 48px; color: var(--ink3); font-size: 14.5px; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 48px; }
.ftr-brand img { height: 22px; width: auto; }
.ftr-brand p { margin-top: 20px; max-width: 30em; line-height: 1.6; }
.ftr h2 { font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); }
.ftr ul { margin-top: 18px; display: grid; gap: 12px; }
.ftr a { color: var(--ink2); } .ftr a:hover { color: var(--ink); }
.ftr-reg { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 62em; font-size: 13.5px; line-height: 1.6; }
.ftr-base { margin-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* ---------------------------------------------------------------- inner pages */
.page-head { position: relative; padding: calc(var(--hdr) + clamp(72px, 9vw, 120px)) 0 clamp(56px, 7vw, 88px); overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 0%, rgba(227, 170, 82, 0.08), transparent 60%), radial-gradient(50% 70% at 0% 0%, rgba(99, 140, 190, 0.07), transparent 60%); }
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink3); }
.crumbs a:hover { color: var(--ink); }
.page-head h1 { margin-top: 26px; max-width: 13em; }
.page-head .lead { margin-top: 26px; max-width: 38em; }

/* technology article */
.article { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); padding-bottom: clamp(96px, 11vw, 150px); align-items: start; }
.toc { position: sticky; top: calc(var(--hdr) + 32px); font-size: 14px; }
.toc p { font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }
.toc ol { margin-top: 16px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1.5px solid transparent; color: var(--ink3); transition: color 0.2s, border-color 0.2s; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); border-left-color: var(--gold); }
.article-body { max-width: 780px; }
.article-body > section + section { margin-top: clamp(72px, 8vw, 112px); }
.article-body h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.016em; display: flex; gap: 16px; align-items: baseline; }
.article-body h2 .hn { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(227, 170, 82, 0.6); color: var(--gold); font: 600 15px/1 var(--text); letter-spacing: 0; transform: translateY(-4px); }
.article-body h2.h3 { font-size: 24px; }
.article-body p { margin-top: 18px; color: var(--ink2); font-size: 17.5px; line-height: 1.7; }
.article-body p.fine { font-size: 14.5px; color: var(--ink3); line-height: 1.6; }
.article-body sup a { color: var(--gold); font-weight: 600; padding: 0 2px; }
.article figure { margin-top: 36px; }
.article figure .media { aspect-ratio: auto; }
.article figure .media img { height: auto; }
figcaption { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--ink3); }
.fig-label { color: var(--gold); font-weight: 600; margin-right: 10px; }
.kit { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--line); }
.kit li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink2); font-size: 15.5px; display: flex; gap: 12px; align-items: baseline; }
.kit li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }
.eq { margin-top: 28px; display: flex; align-items: center; justify-content: center; position: relative; padding: 34px 24px; border-radius: var(--r-sm); background: var(--s1); border: 1px solid var(--line); }
.eq .math { font: 400 clamp(24px, 2.4vw, 30px)/1 "Source Serif", Georgia, serif; color: var(--ink); display: inline-flex; align-items: center; gap: 0.3em; }
.eq .math i { font-style: italic; }
.eq .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; }
.eq .frac > span:first-child { padding: 0 6px 8px; border-bottom: 1.5px solid var(--ink2); }
.eq .frac > span:last-child { padding-top: 8px; }
.eq sub, .eq sup { font-size: 0.6em; }
.eq .eqn { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--ink3); font-size: 15px; }
.steps { margin-top: 28px; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; align-items: start; padding: 22px 24px; border-radius: var(--r-sm); background: var(--s1); border: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: 1 / 3; font: 500 26px/1 var(--display); letter-spacing: -0.012em; color: var(--gold); padding-top: 2px; }
.steps h3 { font-size: 18.5px; }
.steps p { margin-top: 0 !important; font-size: 15.5px !important; line-height: 1.55 !important; }
.article .rows { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.article .rows li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 24px; }
.article .rows h4, .article .rows h3 { margin-top: 0; }
.article .rows p { margin-top: 6px; font-size: 15.5px; }
.refs { margin-top: 18px; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink3); list-style: decimal; padding-left: 20px; }

/* about */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cols3 > div { padding: 32px 30px 34px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.cols3 h2 { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.2; letter-spacing: -0.02em; }
.cols3 p { margin-top: 14px; color: var(--ink2); font-size: 16px; }
.founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.founder .portrait { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1; }
.founder .portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) brightness(0.96); }
.founder h2 { margin-top: 20px; }
.founder .role { margin-top: 14px; color: var(--gold); font-weight: 500; font-size: 15.5px; }
.founder .bio { margin-top: 22px; }
.founder .more { margin-top: 28px; }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split h2 { font-size: clamp(30px, 3.2vw, 44px); }
.split .eb + h2 { margin-top: 18px; }
.split .fine { margin-top: 18px; }
.facts { display: grid; grid-template-columns: minmax(150px, 0.42fr) 1fr; border-top: 1px solid var(--line); }
.facts dt, .facts dd { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.facts dt { color: var(--ink3); padding-right: 20px; }
.facts dd { color: var(--ink); }
.facts dd span { display: block; margin-top: 4px; color: var(--ink3); font-size: 14px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font: 600 18px/1.35 var(--display); letter-spacing: -0.015em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--gold); font: 500 18px/1 var(--text); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 48px 24px 0; color: var(--ink2); }
.sec.alt { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* contact */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(96px, 11vw, 150px); }
.form { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); display: grid; gap: 22px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 9px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink2); }
.field .opt { font-weight: 400; color: var(--ink3); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); color: var(--ink); font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field select:invalid { color: var(--ink3); }
.field option { background: var(--s2); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(227, 170, 82, 0.8); box-shadow: 0 0 0 4px rgba(227, 170, 82, 0.15); }
.form .btn { justify-self: start; border: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aside { display: grid; gap: 20px; }
.aside section { padding: 28px 28px 30px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.aside h2 { font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.aside ul { margin-top: 16px; display: grid; gap: 12px; }
.aside li, .aside p { color: var(--ink2); font-size: 15px; line-height: 1.55; }
.aside li { padding-left: 18px; position: relative; }
.aside li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }
.aside p { margin-top: 14px; }

/* prose pages */
.prose { max-width: 720px; padding-bottom: clamp(96px, 11vw, 150px); }
.prose h2 { margin-top: 48px; font-size: 26px; letter-spacing: -0.02em; }
.prose p { margin-top: 16px; color: var(--ink2); }
.prose strong { color: var(--ink); font-weight: 600; }

/* private preview */
.pv { padding: calc(var(--hdr) + 56px) 0 clamp(80px, 9vw, 120px); }
.pv .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.pv h1 { margin-top: 18px; font-size: clamp(36px, 4.6vw, 64px); }
.pv .note { margin-top: 14px; color: var(--ink2); }
.pv .player { margin-top: 40px; }
.pv .player.portrait { display: none; aspect-ratio: 9 / 16; max-width: 480px; margin-left: auto; margin-right: auto; }
.pv .fine { margin-top: 22px; text-align: center; max-width: 60em; margin-left: auto; margin-right: auto; }
.player.light { background: #f4f4f3; }
.player.light .cover { background: none; align-items: center; justify-content: center; }
.player.light .cap { display: none; }
.player.light .dot { background: #0b0d10; color: #fff; box-shadow: 0 0 0 10px rgba(11, 13, 16, 0.08); }
.player.light .cover:hover .dot { box-shadow: 0 0 0 14px rgba(11, 13, 16, 0.1); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .nav { gap: 26px; }
  .article { grid-template-columns: 1fr; }
  .toc { display: none; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .hero { min-height: 0; justify-content: flex-start; }
  .hero .container { order: 1; padding-top: calc(var(--hdr) + 44px); padding-bottom: 0; }
  .hero::before { display: none; }
  .hero-text { max-width: 720px; }
  .hero-art { order: 2; position: relative; top: auto; bottom: auto; right: auto; width: auto; z-index: 0; margin-top: 6px; height: min(84vw, 460px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%); }
  .hero-art img { object-position: 80% 46%; transform: scale(1.3); transform-origin: 74% 44%; }
}
@media (max-width: 860px) {
  :root { --hdr: 64px; --r: 18px; }
  body { font-size: 16px; }
  .nav { display: none; }
  .mnav { display: block; }
  .hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .hero .lead { margin-top: 22px; }
  .hero .actions { margin-top: 30px; }
  .hero .actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero .reg-note { margin-top: 28px; }
  .stats dl { grid-template-columns: 1fr 1fr; }
  .stats dl > div { padding: 28px 18px 30px; }
  .stats dl > div:nth-child(3) { border-left: 0; }
  .stats dl > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .sec-head { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; margin-top: 44px; gap: 16px; }
  .card.big { grid-row: auto; }
  .card.big .im { flex: none; min-height: 0; aspect-ratio: 16 / 11; }
  .card .t { padding: 22px 22px 26px; }
  .split2, .kit-grid, .co, .founder, .split, .form-grid { grid-template-columns: 1fr; }
  .split2 .media { order: 2; }
  .player { border-radius: var(--r); }
  .player:not(.playing) { aspect-ratio: 4 / 5; }
  .player:not(.playing) video { object-position: 100% 50%; }
  .player:not(.playing) video.poster-phone { object-position: 50% 50%; }   /* the 4:5 phone poster fills the card */
  .player.playing video { object-fit: contain; }
  .player .cover { flex-direction: column; align-items: flex-start; justify-content: space-between; background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 60%); }
  .player .ring { order: 2; }
  .player .cover .meta { display: none; }
  .player.light .cover { justify-content: center; align-items: center; background: none; }
  .player .cover { padding: 20px; }
  .player .dot { width: 58px; height: 58px; }
  .player .dot svg { width: 22px; height: 22px; }
  .transcript li { grid-template-columns: 48px 1fr; }
  .kit-list, .kit { grid-template-columns: 1fr; }
  .rows { grid-template-columns: 1fr; }
  .co .portrait, .founder .portrait { max-width: 420px; }
  .cols3 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; padding-top: 18px; }
  .facts dd { padding-top: 6px; }
  .form .row { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .eq .eqn { display: none; }
  .steps li, .article .rows li { grid-template-columns: 40px 1fr; padding: 18px; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .pv .player.landscape { display: none; }
  .pv .player.portrait { display: block; }
}
@media (max-width: 480px) {
  .ftr-top { grid-template-columns: 1fr; }
  .hero .actions { flex-direction: column; }
  .stats dd { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}