/* Tokens measured from the reference layout at 1440px. Waldenburg is replaced by Schibsted Grotesk. */
:root {
  --eggshell: #FDFCFC;
  --cream: #F5F3F1;
  --stone: #EBE8E4;
  --white: #FFFFFF;
  --ink: #000000;
  --ink-2: #44403B;
  --muted: #777169;
  --faint: #A59F97;
  --red: #F41A2F;
  --blue: #0A59D2;
  --navy: #052F70;
  --rail: rgba(0, 0, 0, .05);
  --ring: rgba(0, 0, 0, .075);

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --frame: 1178px;
  --gutter: 12px;
  --inset: 20px;
  --text-x: calc(var(--gutter) + var(--inset));
  --r-sheet: 16px;
  --r-card: 12px;
  --r-card-sm: 8px;
  --r-tab: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-btn: 0 0 0 .5px rgba(0, 0, 0, .125), 0 1px 1px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .04);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* moving between pages: a short crossfade instead of a blank flash, where the browser can do it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
body { margin: 0; background: var(--eggshell); color: var(--ink); font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, canvas { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
p, h1, h2, h3, h4, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- frame ---------- */
.wrap { max-width: calc(var(--frame) + 2 * max(20px, env(safe-area-inset-left, 0px))); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.frame { position: relative; border-inline: 1px solid var(--rail); }
.frame.open { border-inline-color: transparent; }
.sep { position: relative; height: 0; border-top: 1px solid var(--rail); }
.sep .wrap { position: relative; height: 0; }
.sep .wrap::before, .sep .wrap::after { content: ""; position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--eggshell); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); z-index: 2; }
.sep .wrap::before { left: max(17px, calc(env(safe-area-inset-left, 0px) - 3px)); }
.sep .wrap::after { right: max(17px, calc(env(safe-area-inset-right, 0px) - 3px)); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--gutter); }
.px { padding-inline: var(--text-x); }
.grid .px { padding-inline: var(--inset); }
.pt-2xl { padding-top: 160px; } .pt-xl { padding-top: 120px; } .pt-lg { padding-top: 80px; } .pt-md { padding-top: 56px; }
.pb-2xl { padding-bottom: 160px; } .pb-xl { padding-bottom: 120px; } .pb-sm { padding-bottom: 40px; } .pb-xs { padding-bottom: 12px; }

/* ---------- type ---------- */
/* a heading a link jumps to lands below the sticky nav, not under it */
h2[id], h3[id] { scroll-margin-top: 112px; }
.h1 { font: 400 48px/52px var(--display); letter-spacing: -.96px; text-wrap: balance; }
.h2 { font: 400 36px/42px var(--display); letter-spacing: -1.08px; text-wrap: balance; }
.h3 { font: 400 28px/1.2 var(--display); letter-spacing: -.02em; }
.h4 { font: 400 20px/1.3 var(--display); letter-spacing: -.01em; }
.eyebrow { font: 400 16px/24px var(--body); letter-spacing: .16px; }
.lede { font: 400 16px/24px var(--body); letter-spacing: .16px; color: var(--ink); }
.desc { font: 400 16px/24px var(--body); letter-spacing: .16px; color: var(--muted); }
.t15 { font: 400 15px/22px var(--body); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 9999px;
  font: 400 14px/21px var(--body); white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 16px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--ink-2); }
.btn-light { background: var(--white); color: var(--ink); box-shadow: var(--shadow-btn); }
.btn-light:hover { background: var(--cream); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.arrow { width: 12px; height: 12px; }

/* ---------- nav ---------- */
.nav { height: 64px; display: flex; align-items: center; gap: 28px; padding-inline: 0; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font: 700 19px/1 var(--display); letter-spacing: -.03em; }
.wordmark .dot { width: 18px; height: 18px; border-radius: 50%; display: block; }
/* the logo: coloured mark, name in currentColor. Height is the b's stem, width follows */
svg.bl-logo { display: block; height: 22px; width: auto; aspect-ratio: 856.457 / 150; color: var(--ink); flex: none; }
/* in the nav the logo is sized to the links, as elevenlabs.io sets its wordmark: the letters a
   little taller than the links' capitals, and a wider step to the first link than between
   links. It is centred by eye, not by box: taller than the links, it looked high standing on
   their baseline, so it sits where its ink centres on theirs (33.5px down the 64px bar) and its
   box centres on the buttons' */
.nav .wordmark { margin-right: 16px; }
.nav svg.bl-logo { height: 17px; translate: 0 -.5px; }
.footer .brand svg.bl-logo { height: 26px; }
.legal-links { display: flex; gap: 20px; }
.nav-links { display: flex; gap: 22px; font-size: 14px; line-height: 21px; }
.nav-links a { transition: color .15s var(--ease); }
.nav-links a:hover { color: var(--muted); }
.nav .btns { margin-left: auto; align-items: center; }
.nav .login { font-size: 14px; padding: 0 8px; }
.menu-btn { display: none; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; padding: 8px; }
.menu-btn span { display: block; height: 1.5px; background: var(--ink); margin: 6px 0; }

.sticky { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--white); height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px); transform: translateY(-100%); visibility: hidden;
  transition: transform .3s ease-in-out, visibility .3s; box-shadow: 0 .5px 0 var(--ring); }
.sticky.on { transform: none; visibility: visible; }
.sticky .nav { height: 64px; }
.sticky .nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
/* the phone menu: every page in large type under the bar, then the two buttons */
.menu { position: fixed; inset: calc(64px + env(safe-area-inset-top, 0px)) 0 0; z-index: 49; background: var(--white); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu .wrap { padding-block: 24px 40px; display: grid; gap: 32px; }
.menu nav { display: grid; }
.menu nav a { font: 400 28px/1.2 var(--display); letter-spacing: -.5px; padding: 12px 0; border-bottom: 1px solid var(--stone); }
.menu nav a[aria-current="page"] { color: var(--muted); }
.menu-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .sticky { transform: none; visibility: visible; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu-btn span { transition: transform .2s var(--ease); }

/* ---------- hero ---------- */
.hero { align-items: start; row-gap: 20px; }
.grid.flush { padding-inline: 0; }
.hero h1 { grid-column: 1 / span 6; }
.hero .side { grid-column: 7 / span 5; display: grid; gap: 24px; }
.hero .btns { grid-column: 1 / span 6; margin-top: 24px; }

/* carousel sheet */
.sheet-wrap { margin-inline: -1px; }
.sheet { position: relative; background: var(--cream); border-radius: var(--r-sheet); isolation: isolate; }
.sheet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px var(--ring); pointer-events: none; z-index: 3; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; }
.tab { position: relative; height: 44px; border: 0; border-radius: var(--r-tab); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 14px/1 var(--body); transition: background-color .15s var(--ease); }
.tab:hover { background: var(--stone); }
.tab[aria-selected="true"] { background: var(--white); box-shadow: var(--shadow-btn); }
.tab i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.stage { position: relative; height: 330px; overflow: hidden; margin-top: 16px; }
.stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); border-radius: var(--r-sheet); }
.labels { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; padding: 0 48px 40px; text-align: center; }
.labels > div { display: grid; gap: 2px; padding-inline: 12px; }
.labels .name { font: 400 14px/20px var(--body); color: var(--muted); }
.labels .sub { font: 400 12px/17px var(--body); color: var(--faint); }
.labels .center .name { color: var(--ink); }
.labels .center .sub { color: var(--muted); }
.labels .center { position: relative; }
.labels .center a.name { text-decoration: none; }
.labels .center a.name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.labels .kind { font: 400 13px/18px var(--body); color: var(--muted); margin-bottom: 2px; }
.labels .kind:empty { display: none; }
.step { position: absolute; top: 50%; margin-top: -14px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color .15s var(--ease); }
.step:hover { background: var(--stone); }
.step.prev { left: -44px; } .step.next { right: -44px; }
.pillbar { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 28px 16px 24px; flex-wrap: wrap; }
.pill { height: 40px; padding: 0 16px; border: 0; border-radius: 9999px; background: transparent; cursor: pointer; font: 400 14px/1 var(--body); transition: background-color .15s var(--ease); }
.pill:hover { background: var(--stone); }
.pill[aria-pressed="true"] { background: var(--white); box-shadow: var(--shadow-btn); }
.pillbar .btn { margin-left: 8px; }

/* ---------- logo strip ---------- */
.strip-head { padding-inline: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 0 40px; }
.logos { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); row-gap: 8px; padding-bottom: 80px; }
.logo { height: 112px; display: grid; place-items: center; color: var(--faint); }
/* each mark is a one-colour mask (scripts/build-logos.mjs) painted in the text colour; on hover
   it cross-fades to the original logo in its own colours, stacked in the same cell */
.logo i, .logo img { grid-area: 1 / 1; display: block; width: calc(var(--w) * var(--k, 1)); height: calc(var(--h) * var(--k, 1)); max-width: 86%;
  translate: 0 calc(var(--dy, 0px) * var(--k, 1)); transition: opacity .3s var(--ease); }
.logo i { background: currentColor; -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat;
  -webkit-mask-source-type: luminance; mask-mode: luminance; }
.logo img { object-fit: contain; opacity: 0; }
.logo:hover i { opacity: 0; }
.logo:hover img { opacity: 1; }

/* ---------- section heading rows ---------- */
.head { row-gap: 16px; align-items: end; }
.head .l { grid-column: 1 / span 6; display: grid; gap: 12px; justify-items: start; }
.head .l .btn { margin-top: 16px; }
.head .r { grid-column: 8 / span 5; align-self: start; }
.head:has(.eyebrow) .r { padding-top: 36px; }
.head.wide .l { grid-column: 1 / span 8; }
.head.end .r { display: flex; justify-content: flex-end; align-self: end; padding-top: 0; }
.head.center { justify-items: center; text-align: center; }
.head.center .l { grid-column: 3 / span 8; justify-items: center; }
.pairs { row-gap: 24px; padding-top: 32px; }
.pairs > div { grid-column: span 6; display: grid; gap: 4px; }

/* ---------- media / window mocks ---------- */
.art { position: relative; overflow: hidden; background: #c9b9d6; }
/* Grain: a 256px tile of black pixels with noisy alpha, one tile pixel per CSS pixel, overlaid at half opacity.
   Overlaying black darkens midtones most and leaves pure black and white alone, which is how film grain reads. */
.grain, .art::after { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: url("assets/grain.webp") 0 0 / 256px 256px repeat; image-rendering: pixelated; mix-blend-mode: overlay; opacity: .5; }
.art::after { content: ""; }
/* One tile pixel per device pixel, so the grain stays as fine on high-density screens. */
@media (min-resolution: 1.5dppx) { .grain, .art::after { background-size: 128px 128px; } }
@media (min-resolution: 2.5dppx) { .grain, .art::after { background-size: 85.333px 85.333px; } }
.art-1 { background: radial-gradient(60% 70% at 30% 70%, #f0a46c 0, transparent 70%), radial-gradient(70% 60% at 80% 20%, #8fb3e8 0, transparent 70%), linear-gradient(160deg, #4c6fb3, #e88f6a 60%, #f6c7a4); }
.art-2 { background: radial-gradient(60% 60% at 70% 60%, #d77aa6 0, transparent 70%), radial-gradient(70% 70% at 20% 30%, #7d9ad8 0, transparent 70%), linear-gradient(200deg, #2a3f78, #b8698d); }
.art-3 { background: radial-gradient(50% 60% at 50% 40%, #f3d2b3 0, transparent 70%), linear-gradient(180deg, #e7a15f, #c4532f 70%, #6b2a1c); }
.art-4 { background: radial-gradient(70% 50% at 40% 30%, #9fb7c9 0, transparent 70%), linear-gradient(170deg, #1b2a3a, #3d5a73 60%, #a9b8c2); }
.art-5 { background: radial-gradient(60% 60% at 60% 40%, #c3d7a6 0, transparent 70%), linear-gradient(190deg, #6e8a5a, #2f4430 70%); }
.art-6 { background: radial-gradient(70% 60% at 50% 30%, #f7e2c7 0, transparent 70%), linear-gradient(180deg, #b9a2c9, #e0a98a 60%, #f3d8b6); }

.windows { position: relative; height: 440px; overflow: hidden; background: var(--cream); margin-inline: calc(-1 * var(--gutter)); }
.win { position: absolute; bottom: -1px; width: 53.3%; height: 396px; background: var(--white); border-radius: var(--r-card-sm) var(--r-card-sm) 0 0;
  box-shadow: 0 0 0 .5px var(--ring), 0 8px 30px rgba(0, 0, 0, .05); overflow: hidden; transition: transform .5s var(--ease); display: grid; grid-template-columns: 150px 1fr; }
.win.a { left: 32px; height: 410px; } .win.b { right: 32px; z-index: 1; }
.windows.rise .win { transform: translateY(0); }
.win .side { border-right: .5px solid var(--ring); padding: 14px 12px; display: grid; align-content: start; gap: 8px; }
.win .main { padding: 18px; display: grid; align-content: start; gap: 14px; min-width: 0; }
.ln { height: 7px; border-radius: 4px; background: var(--stone); }
.ln.d { background: #d9d4cd; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tiles > div { height: 74px; border-radius: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips span { height: 20px; width: 56px; border-radius: 6px; box-shadow: inset 0 0 0 .5px var(--ring); }
.spark { height: 90px; border-radius: 6px; box-shadow: inset 0 0 0 .5px var(--ring); display: block; width: 100%; }

/* ---------- feature cards ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.card { position: relative; background: var(--cream); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px var(--ring); pointer-events: none; }
.card .cap { padding: 20px 24px 24px; display: grid; gap: 2px; position: relative; z-index: 1; }
.card .cap .t { font: 400 15px/22px var(--body); }
.card .cap .d { font: 400 15px/22px var(--body); color: var(--muted); }
.card.dark .cap .t { color: var(--white); }
/* the latest paper's card: its own drawn figure, full bleed, with the title over a soft shade */
.fig-card { display: flex; flex-direction: column; justify-content: flex-end; color: inherit; text-decoration: none; }
.fig-card .fig-art { position: absolute; inset: 0; background: radial-gradient(55% 60% at 22% 30%, var(--b) 0, transparent 70%), radial-gradient(70% 60% at 85% 110%, var(--d) 0, transparent 70%), linear-gradient(160deg, var(--a), var(--c)); }
.fig-card .fig-art svg { position: absolute; left: 8%; right: 8%; top: 10%; width: 84%; height: 64%; transition: transform .6s var(--ease); }
.fig-card::before { content: ""; position: absolute; inset: 45% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(0, 0, 0, .38)); pointer-events: none; }
.fig-card:hover .fig-art svg { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .fig-card .fig-art svg { transition: none; } }
/* the memory figure: tracks, values, the answer line, then the three failures in turn */
.memory-art svg { fill: none; stroke: #fff; stroke-linecap: round; }
.memory-art .ma-track { stroke-opacity: .28; stroke-width: 1.5; stroke-dasharray: 1; }
.memory-art .ma-old { stroke-opacity: .6; stroke-width: 1.6; }
.memory-art .ma-now { fill: #fff; stroke: none; }
.memory-art .ma-answer { stroke-width: 1.6; stroke-dasharray: .012 .018; stroke-opacity: .85; }
.memory-art .ma-k { fill: #fff; stroke: none; font: 500 15px/1 var(--mono); letter-spacing: .02em; fill-opacity: .85; }
.memory-art .ma-fail { stroke-width: 2; stroke-dasharray: 1; }
.memory-art .ma-ring { stroke-width: 1.6; }
.memory-art .ma-ghost { stroke-width: 1.6; stroke-dasharray: 4 4; stroke-opacity: .8; }
.memory-art .ma-late { fill: #fff; fill-opacity: .25; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 4; }
/* before it plays: nothing drawn; .play runs it once, in order */
.js .memory-art .ma-track { stroke-dashoffset: 1; opacity: 0; }
.js .memory-art .ma-old, .js .memory-art .ma-now { opacity: 0; transform: translateX(-10px); transform-box: fill-box; }
.js .memory-art .ma-answer { clip-path: inset(0 0 100% 0); }
.js .memory-art .ma-answer-k, .js .memory-art .ma-ring, .js .memory-art .ma-ghost, .js .memory-art .ma-k.ma-f1, .js .memory-art .ma-k.ma-f2, .js .memory-art .ma-k.ma-f3 { opacity: 0; }
.js .memory-art .ma-fail { stroke-dashoffset: 1; opacity: 0; }
.js .memory-art .ma-late { opacity: 0; transform: translateX(28px); transform-box: fill-box; }
.memory-art.play .ma-track { animation: ma-draw .7s var(--ease) calc(var(--i) * 70ms) forwards; }
.memory-art.play .ma-old, .memory-art.play .ma-now { animation: ma-settle .45s var(--ease) calc(.35s + var(--i) * 45ms) forwards; }
.memory-art.play .ma-answer { animation: ma-drop .6s var(--ease) 1.15s forwards; }
.memory-art.play .ma-answer-k { animation: ma-fade .4s var(--ease) 1.5s forwards; }
.memory-art.play .ma-fail.ma-f1 { animation: ma-draw .6s var(--ease) 1.9s forwards; }
.memory-art.play .ma-ring.ma-f1, .memory-art.play .ma-k.ma-f1 { animation: ma-fade .4s var(--ease) 2.35s forwards; }
.memory-art.play .ma-fail.ma-f2 { animation: ma-draw .55s var(--ease) 2.6s forwards; }
.memory-art.play .ma-ghost.ma-f2, .memory-art.play .ma-k.ma-f2 { animation: ma-fade .4s var(--ease) 3s forwards; }
.memory-art.play .ma-late { animation: ma-settle .55s var(--ease) 3.25s forwards; }
.memory-art.play .ma-k.ma-f3 { animation: ma-fade .4s var(--ease) 3.55s forwards; }
/* opacity too, so the round cap of a not-yet-drawn line does not leave a dot */
@keyframes ma-draw { from { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ma-settle { to { opacity: 1; transform: none; } }
@keyframes ma-drop { to { clip-path: inset(0 0 0 0); } }
@keyframes ma-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .memory-art * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; clip-path: none !important; }
} .card.dark .cap .d { color: rgba(255, 255, 255, .8); }
.card.big { height: 600px; }
.card.big .visual { position: absolute; inset: 0; }
.card.big.dark .visual::before { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); z-index: 1; }
.panel { position: absolute; background: var(--white); border-radius: var(--r-card); box-shadow: 0 0 0 .5px var(--ring), 0 10px 30px rgba(0, 0, 0, .08); padding: 18px 20px; font: 400 14px/22px var(--body); }
.panel.text { left: 50%; top: 92px; transform: translateX(-50%); width: min(420px, 82%); }
.panel.text p + p { margin-top: 10px; }
.panel .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.tag { color: var(--muted); }
.bubbles { position: absolute; top: 72px; left: 50%; translate: -50% 0; display: grid; gap: 10px; width: min(380px, 84%); z-index: 1; }
/* a conversation: the partner on the right in outline, the lab on the left in white */
.bubble { justify-self: start; max-width: 86%; text-wrap: balance; background: var(--white); border-radius: 20px; padding: 10px 16px; font: 400 14px/20px var(--body); color: var(--ink); }
.bubble.me { justify-self: end; background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
/* how the conversation plays (main.js): each bubble rises in; the lab's replies start as a
   shimmering "Thinking" pill and grow word by word; the result pill opens from the mark */
.bubbles { transition: opacity .4s var(--ease); }
.bubbles.out { opacity: 0; }
.bubble.in { animation: bubble-in .36s var(--ease) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px); } }
.bubble.thinking { padding: 6px 12px; font-size: 12px; line-height: 16px; color: var(--muted); animation: bubble-in .3s var(--ease) both, think 1.2s ease-in-out .3s infinite; }
@keyframes think { 50% { color: var(--faint); } }
.bubble .w { animation: word-in .28s var(--ease) both; }
@keyframes word-in { from { opacity: 0; filter: blur(2px); } }
.done-pill { justify-self: start; display: inline-flex; align-items: center; gap: 0; height: 32px; padding: 0 7px; border-radius: 9999px; background: var(--white);
  font: 400 13px/1 var(--body); color: var(--ink); animation: bubble-in .3s var(--ease) both; }
.done-pill .pill-mark { width: 15px; height: 18px; flex: none; }
.done-pill .dp-t { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .5s var(--ease), opacity .3s .15s var(--ease), margin .5s var(--ease); }
.done-pill.open { gap: 8px; padding: 0 14px 0 9px; transition: padding .5s var(--ease); }
.done-pill.open .dp-t { max-width: 240px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bubble.in, .bubble .w, .done-pill, .bubble.thinking { animation: none; } }
.chart { position: absolute; left: 32px; right: 32px; top: 64px; height: 300px; }

.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.mini { height: 240px; padding: 20px; justify-content: space-between; }
.mini .ico { width: 36px; height: 36px; display: block; }
.mini .ico svg { width: 36px; height: 36px; display: block; }
.mini .cap { padding: 0; }

/* quote strip */
.quote { display: flex; align-items: center; gap: 20px; padding-block: 28px; }
.quote .who { display: grid; gap: 0; min-width: 0; }
.quote .who b { font: 500 15px/22px var(--body); }
.quote .btn { margin-left: auto; }

/* ---------- list rows ---------- */
.apirow { align-items: stretch; padding-block: 0; border-top: 1px solid var(--rail); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.apirow:first-child { border-top: 0; }
.apirow .l { grid-column: 1 / span 6; display: grid; gap: 8px; align-content: start; padding: 32px var(--inset) 40px !important; }
.apirow .l .title { font: 400 18px/26px var(--body); }
.apirow .subs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 24px; }
.apirow .subs b { font: 400 14px/20px var(--body); display: block; }
.apirow .subs span { font: 400 14px/20px var(--body); color: var(--muted); }
.apirow .r { grid-column: 7 / span 6; border-left: 1px solid var(--rail); padding: 6px 0 6px 6px; margin-left: calc(-1 * var(--gutter) / 2); }
.code { background: var(--white); border-radius: var(--r-card); box-shadow: 0 0 0 .5px var(--ring), 0 1px 2px rgba(0, 0, 0, .03); padding: 22px 24px; overflow-x: auto;
  font: 400 12.5px/21px var(--mono); color: var(--ink-2); white-space: pre; }
.code .k { color: var(--red); } .code .s { color: var(--blue); } .code .c { color: var(--faint); } .code .f { color: var(--navy); }

/* ---------- media wall ---------- */
.toggle { display: inline-flex; padding: 4px; gap: 2px; border-radius: 9999px; background: var(--cream); box-shadow: inset 0 0 0 .5px var(--ring); margin-top: 24px; }
.toggle .pill { height: 32px; font-size: 13px; }
.wall { position: relative; height: 560px; }
.wall .m { position: absolute; border-radius: var(--r-card); overflow: hidden; }
.wall .m .cap { position: absolute; inset: auto 0 0; padding: 60px 20px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: var(--white); font: 400 15px/22px var(--body); z-index: 1; }
.wall .m.blank { background: var(--cream); box-shadow: inset 0 0 0 .5px var(--ring); }
.wall .m1 { left: 0; top: 40px; width: 25%; height: 300px; }
.wall .m2 { left: 7.5%; top: 360px; width: 17.5%; height: 140px; }
.wall .m3 { left: 26.5%; top: 0; width: 38%; height: 500px; }
.wall .m4 { left: 66.5%; top: 0; width: 13%; height: 160px; }
.wall .m5 { left: 66.5%; top: 180px; width: 33.5%; height: 340px; }
.wall .badge { position: absolute; left: 20px; top: 18px; z-index: 1; font: 700 15px/1 var(--display); color: var(--white); letter-spacing: -.02em; }

/* ---------- timeline ---------- */
.timeline { position: relative; overflow: clip; height: 400px; background: var(--cream); border-radius: var(--r-card); }
.timeline::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px var(--ring); pointer-events: none; }
/* measured from elevenlabs.io's model timeline, frame by frame at 120fps: a row of fine ticks with
   one darker tick per mark. The chosen mark stands as a 122px bar in a faint 18px capsule, its name
   above and its line and date below. Moving to another mark (hover, focus or the arrows) runs one
   220ms ease, cubic-bezier(.4, 0, .2, 1), that shrinks the old bar into its tick while the new one
   grows, so the two always add up to the same length. The texts do not move: the old ones are
   gone in 120ms, then the new name fades in from 90ms, its line from 120ms and its date from 150ms. */
.tl-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--white); box-shadow: var(--shadow-btn); cursor: pointer; display: grid; place-items: center; }
.tl-arrow.prev { left: calc(17% - 64px); } .tl-arrow.next { right: calc(17% - 64px); }
.tl-row { position: absolute; left: 50%; top: 50%; width: min(66%, 820px); transform: translateX(-50%); height: 0; }
.tl-row::before { content: ""; position: absolute; left: -16px; right: -16px; top: -28px; height: 56px; }
.tl-minor { position: absolute; inset: -3.5px 0 auto; height: 7px; pointer-events: none; }
.tl-minor i { position: absolute; top: 0; width: 1px; height: 7px; background: rgba(0, 0, 0, .16); }
.tl-minor i.ahead { background: rgba(0, 0, 0, .08); }
/* "now" is a dashed tick; its word is kept for screen readers only, since the marks past it say "In progress" */
.tl-now { position: absolute; top: 18px; transform: translateX(-50%); font-size: 0; color: transparent; pointer-events: none; }
.tl-now::before { content: ""; position: absolute; left: 50%; top: -24px; height: 14px; border-left: 1px dashed rgba(0, 0, 0, .3); }
.tl-item { position: absolute; top: 0; width: 0; }
.tl-hit { position: absolute; left: -12px; top: -24px; width: 24px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tl-hit:focus-visible { outline-offset: -2px; border-radius: 9px; }
.tl-bar { position: absolute; left: -.75px; top: -61px; width: 1.5px; height: 122px; background: var(--ink); transform: scale(.67, .107); pointer-events: none;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.tl-item.ahead .tl-bar { background: var(--faint); }
.tl-cap { position: absolute; left: -9px; top: -63px; width: 18px; height: 126px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); opacity: 0; pointer-events: none; transition: opacity .15s linear; }
.tl-top, .tl-bot { position: absolute; left: 0; transform: translateX(calc(-50% + var(--sx, 0px))); text-align: center; pointer-events: none; }
.tl-top { bottom: 80px; width: max-content; max-width: 320px; font: 400 15px/22px var(--body); color: var(--ink); text-wrap: balance; text-decoration: none; }
.tl-bot { top: 74px; width: 220px; display: grid; gap: 4px; }
.tl-bot p { font: 400 13px/19px var(--body); color: var(--ink); text-wrap: balance; }
.tl-bot small { font: 400 12px/1 var(--body); color: var(--faint); }
.tl-top, .tl-bot p, .tl-bot small { opacity: 0; transition: opacity .12s linear; }
.tl-item[data-on] .tl-bar { transform: none; }
.tl-item[data-on] .tl-cap { opacity: 1; transition-duration: .2s; }
.tl-item[data-on] .tl-top, .tl-item[data-on] .tl-bot p, .tl-item[data-on] .tl-bot small { opacity: 1; transition-duration: .17s; transition-delay: .09s; }
.tl-item[data-on] .tl-top { pointer-events: auto; }
.tl-item[data-on] .tl-bot p { transition-delay: .12s; }
.tl-item[data-on] .tl-bot small { transition-delay: .15s; }
.tl-item[data-on] .tl-hit { cursor: default; }
@media (prefers-reduced-motion: reduce) { .tl-bar, .tl-cap, .tl-top, .tl-bot p, .tl-bot small { transition: none !important; } }

.research-more { align-items: start; padding-block: 40px; }
.research-more .l { grid-column: 1 / span 4; display: grid; gap: 32px; justify-items: start; padding-left: var(--inset); }
.research-more .r { grid-column: 5 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.post { display: grid; gap: 0; background: var(--white); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 0 0 .5px var(--ring); }
.post .art { height: 170px; }
.post .art .date { position: absolute; left: 12px; top: 12px; z-index: 1; height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--white); font: 400 12px/24px var(--body); }
.post .t15 { padding: 14px 16px 18px; }

/* ---------- line-art cards ---------- */
.line-card { height: 420px; padding: 0; }
.line-card svg { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 210px; height: 210px; }

/* ---------- updates ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.news a { display: grid; gap: 4px; align-content: start; }
.news .art { margin-bottom: 12px; }
.news .t15 { font: 400 20px/27px var(--body); letter-spacing: -.01em; }
.news .art { aspect-ratio: 1; border-radius: var(--r-card); display: grid; place-items: center; text-align: center; max-width: 100%; }
.news .art span { position: relative; z-index: 1; color: var(--white); font: 400 34px/1.1 var(--display); letter-spacing: -.03em; padding: 24px; text-wrap: balance; }
.news .art img { transition: transform .5s var(--ease); }
.news .meta { font: 400 12px/18px var(--body); color: var(--muted); }
.news .meta b { font-weight: 500; color: var(--ink); margin-right: 6px; }
.news a:hover .t15 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- cta + footer ---------- */
.cta-band { border-block: 1px solid var(--rail); }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 72px var(--text-x); }
.footer { padding-block: 120px; row-gap: 72px; }
.footer .brand { grid-column: 1 / span 3; display: grid; gap: 20px; align-content: start; justify-items: start; padding-left: var(--inset); }
.lang { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.footer .cols { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px 12px; }
.footer h4 { font: 400 13px/20px var(--body); color: var(--muted); margin-bottom: 10px; }
.footer li a { font: 400 14px/26px var(--body); transition: color .15s var(--ease); }
.footer li a:hover { color: var(--muted); }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px var(--text-x) 40px; font: 400 13px/20px var(--body); color: var(--muted); }

/* floating pill */
.float { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 6px; border-radius: 9999px; background: var(--white);
  box-shadow: var(--shadow-btn), 0 8px 24px rgba(0, 0, 0, .06); font: 400 15px/1 var(--body); transition: transform .15s var(--ease); }
.float:hover { transform: translateY(-1px); }
.float-orb { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; isolation: isolate; }
.float canvas { width: 36px; height: 36px; border-radius: 50%; display: block; }

/* reveal: visible at rest, only nudged */
.reveal { transition: transform .5s var(--ease); }
.js .reveal.pending { transform: translateY(16px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .wall .m4 { display: none; } .wall .m5 { top: 0; height: 520px; }
}
@media (max-width: 900px) {
  .nav-links, .nav .login, .nav .btn-light { display: none; }
  .menu-btn { display: block; }
  .hero h1, .hero .side, .hero .btns, .head .l, .head .r, .head.wide .l, .head.center .l { grid-column: 1 / -1; }
  /* stacked under the heading, the right column takes the heading's inset so a button or line
     starts where the heading's text starts */
  .head .r { padding-top: 8px; padding-inline: var(--inset); }
  .head.center .r { padding-inline: 0; }
  .head.end .r { justify-content: flex-start; }
  .duo { grid-template-columns: 1fr; }
  .quad { grid-template-columns: 1fr 1fr; }
  .tri, .news { grid-template-columns: 1fr; }
  .apirow .l, .apirow .r { grid-column: 1 / -1; padding-inline: 0; }
  .apirow .r { margin-top: 24px; }
  .research-more .l, .research-more .r { grid-column: 1 / -1; padding-left: 0; }
  .research-more .r { margin-top: 24px; }
  .footer .brand, .footer .cols { grid-column: 1 / -1; padding-left: 0; }
  .logos { grid-template-columns: repeat(var(--cols-md, 3), 1fr); }
  .win { grid-template-columns: 1fr; } .win .side { display: none; }
  .wall { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .wall .m { position: relative; inset: auto; width: auto; height: 260px; }
  .wall .m.blank, .wall .m4 { display: none; }
  .wall .m3 { grid-column: 1 / -1; height: 360px; }
  .tl-bot { width: 180px; }
  .tl-top { max-width: 220px; }
}
@media (max-width: 640px) {
  .bubbles { top: 24px; gap: 8px; width: 90%; }
  .bubble { font-size: 13px; line-height: 18px; padding: 8px 14px; max-width: 88%; }
  .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .sep .wrap::before { left: max(21px, calc(env(safe-area-inset-left, 0px) - 3px)); }
  .sep .wrap::after { right: max(21px, calc(env(safe-area-inset-right, 0px) - 3px)); }
  :root { --inset: 16px; }
  .grid { padding-inline: 8px; }
  .h1 { font-size: 40px; line-height: 44px; letter-spacing: -.8px; }
  .h2 { font-size: 30px; line-height: 36px; letter-spacing: -.9px; }
  .pt-2xl { padding-top: 96px; } .pt-xl { padding-top: 72px; } .pb-xl { padding-bottom: 72px; }
  .tab { font-size: 13px; } .tab .long { display: none; }
  .stage { height: 190px; margin-top: 8px; }
  .labels { padding-inline: 40px; }
  .pillbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .pillbar .btn { display: none; }
  .logos { grid-template-columns: repeat(var(--cols-sm, 3), 1fr); padding-bottom: 48px; --k: .68; }
  .logo { height: 76px; }
  .strip-head { flex-wrap: wrap; }
  .windows { height: 340px; } .win { width: 78%; height: 280px; } .win.a { left: 16px; height: 292px; } .win.b { right: -40px; }
  .card.big { height: 460px; }
  /* a card whose panel is a list grows with it, so the caption sits below the panel, not on it */
  .card.big:has(.panel.steps) { height: auto; }
  .card.big .panel.steps { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 24px 16px 8px; }
  .quad { grid-template-columns: 1fr; }
  .mini { height: 200px; }
  .quote { flex-wrap: wrap; } .quote .btn { margin-left: 0; }
  .apirow .subs { grid-template-columns: 1fr; }
  .pairs > div { grid-column: 1 / -1; }
  .wall { grid-template-columns: 1fr; } .wall .m3 { grid-column: auto; }
  .timeline { height: 380px; } .tl-row { width: calc(100% - 120px); } .tl-arrow.prev { left: 12px; } .tl-arrow.next { right: 12px; }
  .research-more .r { grid-template-columns: 1fr; }
  .line-card { height: 340px; }
  .footer .cols { grid-template-columns: 1fr 1fr; gap: 40px 12px; }
  .cta { padding-block: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .js .reveal.pending { transform: none; }
}

/* glass pearl: a picture seen through a glass ball (orb/glass-pearl.js), a soft shadow under it, grain over it */
.gp { position: relative; aspect-ratio: 1; flex: none; }
.gp canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.gp::before { content: ""; position: absolute; left: 10%; right: 10%; top: 78%; height: 30%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 30%, rgba(30, 24, 20, .32), rgba(30, 24, 20, 0) 70%); filter: blur(6px); }
.gp .grain { z-index: 2; border-radius: 50%; }