/* CE Labs homepage. Static styles for index.html (no build step). */

/* Theme tokens. Light is the default; html[data-theme="dark"] swaps them (toggle lives in the footer). */
:root {
  --paper: #F2F0EA; --paper-rgb: 242 240 234;
  --ink: #151515; --ink-rgb: 21 21 21;
  --muted: #6B6860; --sub: #55524B; --accent: #2F5BEA;
  --surface: #FBFAF7; --surface-2: #FFFFFF;
  --band: #151515;
  --good: #1F7A50; --bad: #C2410C; --warn: #C9A21F;
  color-scheme: light;
}
html[data-theme="dark"] {
  --paper: #121211; --paper-rgb: 18 18 17;
  --ink: #F2F0EA; --ink-rgb: 242 240 234;
  --muted: #A29E94; --sub: #C9C5BB; --accent: #7B97FF;
  --surface: #1C1C1A; --surface-2: #242422;
  --band: #0A0A09;
  --good: #52C58C; --bad: #FF8A5C; --warn: #E8C547;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; }
img { max-width: 100%; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
}
.skip-link:focus { top: 12px; color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.page { min-height: 100vh; background: var(--paper); overflow: hidden; }

.mono { font-family: 'JetBrains Mono', monospace; }
.serif { font-family: 'Instrument Serif', serif; font-style: italic; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .06em;
  margin-bottom: 20px;
}
.h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.grad {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--accent);
  padding-right: .08em;
}

/* Keyframes */
@keyframes orbA { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(18vw,8vh) scale(1.15); } 66% { transform: translate(6vw,-10vh) scale(.9); } 100% { transform: translate(0,0) scale(1); } }
@keyframes orbB { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(-16vw,-6vh) scale(.85); } 66% { transform: translate(-4vw,12vh) scale(1.2); } 100% { transform: translate(0,0) scale(1); } }
@keyframes orbC { 0% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(12vw,-14vh) scale(.9); } 100% { transform: translate(0,0) scale(1.1); } }
@keyframes orbD { 0% { transform: translate(0,0) scale(.9); } 50% { transform: translate(-20vw,10vh) scale(1.15); } 100% { transform: translate(0,0) scale(.9); } }
@keyframes flowA { 0%,100% { top: -6%; left: -8%; } 50% { top: 52%; left: 8%; } }
@keyframes flowB { 0%,100% { top: 58%; left: 62%; } 50% { top: 4%; left: 70%; } }
@keyframes flowC { 0%,100% { top: 20%; left: 30%; } 50% { top: 70%; left: 44%; } }
@keyframes flowD { 0%,100% { top: 78%; left: -4%; } 50% { top: 30%; left: 20%; } }
@keyframes vennOrbit { from { transform: rotate(0deg) translateX(14px) rotate(0deg); } to { transform: rotate(360deg) translateX(14px) rotate(-360deg); } }
@keyframes seam { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@keyframes dotWave { 0%,100% { transform: translateY(0) scale(.8); opacity: .45; } 50% { transform: translateY(-3px) scale(1.2); opacity: 1; } }

/* Orbs */
.orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--c), transparent 68%);
  filter: blur(40px);
  opacity: .75;
  animation: var(--a) var(--d) ease-in-out infinite;
  will-change: transform;
}
.orbs-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--paper-rgb) / 0) 55%, var(--paper) 100%); }
.flow-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; 
  /* fade the glows in and out at the top and bottom so they never get cut off by the section edge */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(160px, 22vw, 340px), #000 calc(100% - clamp(120px, 16vw, 240px)), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 clamp(160px, 22vw, 340px), #000 calc(100% - clamp(120px, 16vw, 240px)), transparent 100%); }
.flow-orb {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--c), transparent 68%);
  filter: blur(60px);
  opacity: .18;
  animation: var(--a) var(--d) ease-in-out infinite;
  animation-delay: var(--delay);
}

/* Header */
/* Zero-height sticky wrapper: the bar floats over the hero, so the hero starts at the very top of the page. */
.site-header { position: sticky; top: 0; z-index: 10; height: 0; background: transparent; }
.site-header-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo,
.footer-logo { display: block; transition: transform .9s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.brand-logo { width: 46px; height: 46px; }
.footer-logo-link { display: block; line-height: 0; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 32px); font-size: 14px; flex-wrap: wrap; }
.site-nav .nav-cta,
.footer-links .nav-cta { padding: 9px 16px; border-radius: 999px; color: #FFFFFF; }

/* Text links: a gradient underline slides in from the left on hover and exits to the right on leave. */
.site-nav a:not(.nav-cta),
.footer-links a:not(.nav-cta) {
  padding-bottom: 3px;
  background-image: linear-gradient(90deg, #F0643A, #B78CFF, #2F5BEA);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 100% 100%;
  transition: background-size .35s cubic-bezier(.4, 0, .2, 1);
}
.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible,
.footer-links a:not(.nav-cta):hover,
.footer-links a:not(.nav-cta):focus-visible {
  background-size: 100% 2px;
  background-position: 0 100%;
  color: var(--ink);
}

/* Buttons */
.btn { padding: 14px 22px; border-radius: 999px; font-size: 15px; display: inline-block; }
.btn-primary { color: #FFFFFF; }
.btn-ghost { border: 1px solid rgb(var(--ink-rgb) / .25); background: rgb(var(--paper-rgb) / .5); }

/* Gradient sweep: the colors wipe in from the left on hover, and wipe back out on leave. */
.btn-primary,
.site-nav .nav-cta,
.footer-links .nav-cta {
  background-color: #2F5BEA;
  background-image: linear-gradient(90deg, #F0643A 0%, #B78CFF 24%, #4C6FE0 46%, #2F5BEA 66%, #2F5BEA 100%);
  background-size: 300% 100%; background-repeat: no-repeat; background-origin: border-box; background-clip: border-box;
  background-position: 100% 0;
  transition: background-position .35s cubic-bezier(.4, 0, .2, 1), transform .2s, box-shadow .2s;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible,
.footer-links .nav-cta:hover,
.footer-links .nav-cta:focus-visible {
  background-position: 0 0;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 91, 234, .28);
}
/* "Learn more" gets the same left-to-right gradient sweep, resting on its pale fill */
.btn-ghost {
  background-color: rgb(var(--paper-rgb) / .5);
  background-image: linear-gradient(90deg, #F0643A 0%, #B78CFF 24%, #4C6FE0 46%, #2F5BEA 62%, rgb(var(--paper-rgb) / 0) 62.1%, rgb(var(--paper-rgb) / 0) 100%);
  background-size: 300% 100%; background-repeat: no-repeat; background-origin: border-box; background-clip: border-box; background-position: 100% 0;
  transition: background-position .35s cubic-bezier(.4, 0, .2, 1), border-color .3s, color .25s, transform .2s, box-shadow .2s;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-position: 0 0; border-color: transparent; color: #FFFFFF; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 91, 234, .28);
}

/* Hero */
.hero { position: relative; isolation: isolate; padding-top: 72px; }
.hero-inner {
  position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 48px) clamp(48px, 7vw, 96px);
}
.hero h1 {
  margin: 0; font-weight: 400;
  font-size: clamp(52px, 9.4vw, 148px);
  line-height: .92; letter-spacing: -0.045em; text-wrap: balance; max-width: 14ch;
}
.hero-sub {
  margin: clamp(24px, 3vw, 36px) 0 0; max-width: 44ch; color: var(--sub);
  font-size: clamp(17px, 1.55vw, 22px); line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty;
}
.brand-grad {
  font-weight: 500;
  background-image: linear-gradient(90deg, #2F5BEA, #4C6FE0, #B78CFF, #7B6CF0, #2F5BEA);
  background-size: 250% 100%; background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brandShift 5s linear infinite;
}
@keyframes brandShift { to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) { .brand-grad { animation: none; } }
.hero-sub-lead { display: block; margin-bottom: 12px; color: var(--ink); font-weight: 500; font-size: 1.12em; letter-spacing: -0.02em; line-height: 1.3; }
.hero-sub-body { display: block; }
.hero-sub + .hero-actions { margin-top: clamp(28px, 3.5vw, 44px); }
.hero-actions { margin-top: clamp(40px, 6vw, 72px); display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
.hairline { height: 1px; background: rgb(var(--ink-rgb) / .045); }

/* Lenses + Process wrapper */
.flow-wrap { position: relative; isolation: isolate; overflow: hidden; }
.flow-wrap > section { position: relative; z-index: 1; }
.lenses-grid {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.lenses-grid .h2 { margin-bottom: 20px; text-wrap: balance; }
.lens-list { display: flex; flex-direction: column; border-top: 1px solid rgb(var(--ink-rgb) / .14); }
.lens-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .14);
  cursor: default; transition: opacity .25s;
}
/* The dots echo the big circles: a slow, quiet drift with faint ripples. No hover effect. */
.lens-dot {
  position: relative; width: 14px; height: 14px; border-radius: 50%; margin-top: 7px; background: var(--c); display: block;
  animation: dotDrift 9s ease-in-out infinite;
}
.lens-dot::before, .lens-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c);
  opacity: 0; pointer-events: none; animation: dotRipple 4.2s ease-out infinite;
}
.lens-dot::after { animation-delay: 2.1s; }
.lens-row:nth-child(2) .lens-dot { animation-delay: -2.3s; }
.lens-row:nth-child(2) .lens-dot::before { animation-delay: .6s; }
.lens-row:nth-child(2) .lens-dot::after { animation-delay: 2.1s; }
.lens-row:nth-child(3) .lens-dot { animation-delay: -4.6s; }
.lens-row:nth-child(3) .lens-dot::before { animation-delay: 1.2s; }
.lens-row:nth-child(3) .lens-dot::after { animation-delay: 2.7s; }
@keyframes dotDrift { 0%, 100% { translate: 0 0; } 25% { translate: 1px -1px; } 50% { translate: 0 1px; } 75% { translate: -1px 0; } }
@keyframes dotRipple { 0% { scale: 1; opacity: .28; } 100% { scale: 2.4; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lens-dot, .lens-dot::before, .lens-dot::after { animation: none; } }
.lens-name { font-size: 24px; letter-spacing: -0.02em; }
.lens-q { margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--muted); }

.venn { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1/1; margin: 0 auto 48px; justify-self: center; }
.venn-orbit {
  position: absolute; width: 58%; height: 58%;
  left: var(--x); top: var(--y);
  mix-blend-mode: multiply;
  animation: vennOrbit 12s linear infinite;
  animation-delay: var(--delay);
}
.venn-body { width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: translate; }
.venn-body.is-grabbed { cursor: grabbing; }
.sky { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.fly { position: absolute; left: 0; top: 0; pointer-events: none; will-change: translate; }
.fly .venn-body { pointer-events: auto; }
.fly .venn-circle { opacity: .82; }
.fly .venn-label { z-index: 1; }
.sky .venn-center-top { position: absolute; left: 0; top: 0; transform: none; z-index: 100000; will-change: translate; pointer-events: none; }
.venn-circle {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--c); opacity: .7;
  transition: opacity .3s, transform .4s;
}
.venn-label {
  position: absolute; left: var(--lx); top: var(--ly); transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em;
  color: var(--ink); pointer-events: none; background: var(--paper); padding: 4px 8px; border-radius: 4px;
}
.venn-center {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; line-height: 1;
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 10px 30px rgba(21,21,21,.25);
}
.lenses-grid[data-lens] .venn-circle { opacity: .22; }
.lenses-grid[data-lens] .lens-row { opacity: .4; }
.lenses-grid[data-lens="d"] .venn-circle[data-lens="d"],
.lenses-grid[data-lens="f"] .venn-circle[data-lens="f"],
.lenses-grid[data-lens="v"] .venn-circle[data-lens="v"] { opacity: .95; transform: scale(1.04); }
.lenses-grid[data-lens="d"] .lens-row[data-lens="d"],
.lenses-grid[data-lens="f"] .lens-row[data-lens="f"],
.lenses-grid[data-lens="v"] .lens-row[data-lens="v"] { opacity: 1; }

/* Process */
.process-inner {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 48px) clamp(104px, 14vw, 200px);
}
.process-head { margin-bottom: 56px; }
.process-head .h2 { max-width: 16ch; }
.path-track { position: relative; height: 28px; margin-bottom: 8px; display: none; }
.path-rail { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgb(var(--ink-rgb) / .1); border-radius: 2px; }
.path-fill {
  position: absolute; left: 0; top: 13px; height: 2px; width: 8.33%;
  background: linear-gradient(90deg, #F0643A, #E8C547, #4C6FE0, #B78CFF, #34A873, #2F5BEA);
  border-radius: 2px; transition: width .9s cubic-bezier(.6,0,.2,1);
}
.path-node {
  position: absolute; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--c); transition: background .4s;
}
.path-node.is-on { background: var(--c); }
.path-dot {
  position: absolute; top: 2px; left: 8.33%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: #F0643A;
  box-shadow: 0 0 0 6px rgba(240,100,58,.22), 0 6px 18px rgba(240,100,58,.22);
  transition: left .9s cubic-bezier(.6,0,.2,1), background .4s, box-shadow .4s;
}
.path-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px 24px; }
.step {
  padding: 20px 18px 22px; border-radius: 16px; background: transparent;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .5s, transform .5s;
}
.step.is-active { background: var(--tint); transform: translateY(-4px); }
/* On wide screens the steps trade places now and then (see home.js), so the row never reads as a straight line. */
.step { will-change: translate; }
.step-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); transition: color .4s; }
.step.is-active .step-n { color: var(--ink); }
.step-name { font-size: 30px; letter-spacing: -0.03em; margin-top: 16px; }
.step-desc { font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) {
  .path-track { display: block; }
  .path-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Small screens: every step keeps its colour wash all the time so the four cards read as distinct. */
@media (max-width: 899px) {
  .step { background: var(--tint); }
}

/* Portfolio */
.portfolio { background: var(--band); color: #F2F0EA; }
.portfolio a { color: #F2F0EA; }
.portfolio-inner { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 48px); }
.portfolio-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; }  /* title, then the filters below it (never side by side) */
.portfolio .eyebrow { color: #A29E94; }
.portfolio h2 {
  margin: 0; font-weight: 400; font-size: clamp(44px, 6vw, 88px);
  line-height: 1.05; letter-spacing: -0.04em; padding-bottom: 8px;
}
.portfolio h2 .serif { color: #8FA8FF; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  font-size: 14px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242,240,234,.22); background: transparent; color: #F2F0EA;
  display: flex; gap: 8px; align-items: center; transition: background .2s, color .2s;
}
.filter:hover { border-color: rgba(242,240,234,.5); }
.filter[aria-pressed="true"] { background: #F2F0EA; color: #151515; border-color: #F2F0EA; }
.filter-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: .6; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; grid-auto-rows: 1fr; }
.card {
  background: #1E1E1C; border: 1px solid rgba(242,240,234,.08); border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s, border-color .3s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(242,240,234,.28); color: #F2F0EA; }
.card[hidden] { display: none; }
/* cards that don't link anywhere yet: no lift on hover, no pointer */
.card.nolink { cursor: default; }
.card.nolink:hover { transform: none; border-color: rgba(242,240,234,.08); }
.card.nolink:hover .card-tile { transform: none; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-cat { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; }
.card-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); display: block; }
.card-view { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #A29E94; }
/* fixed-height logo area so names and descriptions line up across every card */
.card-mid { flex: 0 0 120px; display: flex; align-items: center; justify-content: flex-start; }
.card-tile {
  width: 80px; height: 80px; border-radius: 50%; background: var(--bg, var(--c)); color: #151515;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(242,240,234,.14);
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 44px;
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.card-tile img { box-sizing: border-box; display: block; width: 100%; height: 100%; border-radius: 50%; }
.card-tile.bare { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.card-tile.bare img { border-radius: 0; }
.card-tile.bare.icon { border-radius: 50%; overflow: hidden; }
.card-tile.bare.icon img { border-radius: 0; }
.card:hover .card-tile { transform: rotate(-6deg); }
.card-name { font-size: 26px; letter-spacing: -0.025em; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; min-height: 22px; }
.card-sector { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #A29E94; letter-spacing: .04em; }
.card-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em;
  border: 1px solid rgba(242,240,234,.3); padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tag-logo { display: block; flex: none; }
.card-blurb { font-size: 15px; line-height: 1.5; color: #C9C5BB; }

.bt-logo { display: inline-flex; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.bt-logo:hover { transform: translateY(-3px) rotate(-1.5deg); }
/* more specific than `.spotlight img` so the logo isn't treated like the big photo */
.spotlight .bt-logo img { display: block; width: 96px; height: auto; margin: 0; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; }

/* Spotlight */
.spotlight { background: #2F5BEA; color: #FFFFFF; position: relative; isolation: isolate; overflow: hidden; }
.spotlight-inner {
  position: relative; z-index: 1; max-width: 1040px; margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: #7CE0AE; display: block; }
.spotlight h2 { margin: 0; font-weight: 400; font-size: clamp(56px, 9vw, 128px); line-height: .92; letter-spacing: -0.045em; }
.spotlight p { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; max-width: 30ch; text-wrap: balance; }
.spotlight img {
  margin-top: 20px; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 24px; display: block;
  background: rgba(255,255,255,.12);
}
.spotlight .spot-note { margin-top: 20px; max-width: 52ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(255,255,255,.88); text-wrap: pretty; }
.spotlight .spot-note + .btn-light { margin-top: 4px; }
/* Photo slideshow: a quiet crossfade with a slow zoom. No controls. */
.spotlight .spot-show { position: relative; width: 100%; aspect-ratio: 16/9; margin-top: 20px; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.12); isolation: isolate; }
.spotlight .spot-show img {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; background: none; object-fit: cover;
  opacity: 0; animation: spotSlide 24s ease-in-out infinite; animation-delay: calc(var(--i) * 4s - 1.1s);
}
@keyframes spotSlide {
  0%     { opacity: 0; scale: 1.08; }
  4.5%   { opacity: 1; }
  16.67% { opacity: 1; }
  21.2%  { opacity: 0; scale: 1; }
  100%   { opacity: 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight .spot-show img { animation: none; }
  .spotlight .spot-show img:first-child { opacity: 1; }
}
.spotlight .btn-light {
  margin-top: 16px; padding: 14px 24px; border-radius: 999px; color: #151515; font-size: 15px;
  /* same left-to-right gradient sweep as the other buttons, ending on white at rest */
  background-color: #FFFFFF;
  background-image: linear-gradient(90deg, #F0643A 0%, #B78CFF 26%, #8FB1FF 48%, #FFFFFF 68%, #FFFFFF 100%);
  background-size: 300% 100%; background-position: 100% 0;
  transition: background-position .35s cubic-bezier(.4, 0, .2, 1), color .2s, transform .2s, box-shadow .2s;
}
.spotlight .btn-light:hover,
.spotlight .btn-light:focus-visible {
  background-position: 0 0; color: #FFFFFF; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21, 21, 21, .28);
}

/* Test board */
.dash-inner { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 48px); }
.dash-head { margin-bottom: 36px; }
.dash-head .h2 { line-height: 1.02; max-width: 16ch; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: 14px; padding: 18px 20px; }
.kpi-k { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.kpi-v { font-size: 34px; letter-spacing: -0.03em; margin-top: 8px; filter: blur(9px); user-select: none; transform-origin: left center; animation: kpiBreathe 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.9s); }
/* a soft light sweeps across each card while the numbers "compute" */
.kpi::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgb(var(--ink-rgb) / .06) 50%, transparent 100%);
  transform: translateX(-120%); animation: kpiSweep 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .55s); }
.kpi:nth-child(1) { --i: 0; } .kpi:nth-child(2) { --i: 1; } .kpi:nth-child(3) { --i: 2; } .kpi:nth-child(4) { --i: 3; }
@keyframes kpiBreathe {
  0%, 100% { filter: blur(8px);  opacity: .85; transform: scaleX(.96); }
  50%      { filter: blur(12px); opacity: 1;   transform: scaleX(1.04); }
}
@keyframes kpiSweep {
  0%, 35% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(260%); }
}
.dash-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(var(--ink-rgb) / .2); background: transparent; color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(var(--ink-rgb) / .06); }
.tab { font-size: 13px; padding: 7px 16px; border-radius: 999px; cursor: pointer; border: none; background: transparent; color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.dash-stage { position: relative; border-radius: 16px; overflow: hidden; height: 640px; }
.dash-blur { filter: blur(7px); user-select: none; pointer-events: none; height: 100%; overflow: hidden; }
.dash-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgb(var(--paper-rgb) / .35);
}
.dash-note {
  background: var(--surface-2); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: 20px; padding: 32px 36px; max-width: 420px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 30px 80px rgba(21,21,21,.18);
}
.dash-note-title { font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.dash-note-title .serif { color: var(--accent); }
.dash-note p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.running {
  margin: 0 0 2px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgb(var(--ink-rgb) / .06); color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em;
}
.soon-btn {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px 12px 18px; border-radius: 999px;
  border: 1.5px solid transparent; color: var(--ink); font: inherit; font-size: 14px; letter-spacing: -0.005em;
  /* white fill inside, animated blue-purple ring outside */
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(90deg, #2F5BEA, #4C6FE0, #B78CFF, #7B6CF0, #2F5BEA) border-box;
  background-size: 100% 100%, 250% 100%; background-repeat: no-repeat, repeat-x;
  animation: soonRing 6s linear infinite;
  cursor: not-allowed;
}
.soon-btn:disabled { opacity: 1; }
.soon-ico { color: var(--accent); flex: none; }
.soon-shackle { transform-box: fill-box; transform-origin: 20% 100%; animation: soonJiggle 5s ease-in-out infinite; }
@keyframes soonRing { to { background-position: 0 0, -250% 0; } }
@keyframes soonJiggle {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-12deg); }
  90% { transform: rotate(9deg); }
  94% { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) { .soon-btn, .soon-shackle { animation: none; } }
.running-dots { display: inline-flex; align-items: center; gap: 4px; }
.running-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); display: block; animation: dotWave 1.4s ease-in-out infinite; animation-delay: var(--d); }

.table { background: var(--surface); border: 1px solid rgb(var(--ink-rgb) / .12); border-radius: 16px; overflow: hidden; }
.t-row {
  display: grid; border-bottom: 1px solid rgb(var(--ink-rgb) / .08); background: var(--surface);
  grid-template-columns: minmax(200px, 2.6fr) repeat(10, minmax(0, 1fr)) minmax(108px, 1fr);
}
.t-row.t-head { background: var(--ink); color: var(--paper); border-bottom: 0; }
.t-row .c { padding: 12px 8px; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.t-head .c { padding: 14px 8px; font-size: 10.5px; letter-spacing: .04em; text-align: right; line-height: 1.2; }
.t-row .first { padding: 12px 16px; min-width: 0; border-right: 1px solid rgb(var(--ink-rgb) / .1); display: flex; align-items: center; gap: 12px; }
.t-head .first { padding: 14px 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; border-right: 1px solid rgb(var(--paper-rgb) / .14); }
.t-row .last { padding: 12px 14px; border-left: 1px solid rgb(var(--ink-rgb) / .1); display: flex; align-items: center; }
.t-head .last { padding: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; border-left: 1px solid rgb(var(--paper-rgb) / .14); }
.t-tile { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--c); color: #151515; display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; }
.t-app { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-adset { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-name { min-width: 0; }
.t-bar { width: 100%; max-width: 64px; height: 3px; border-radius: 2px; background: rgb(var(--ink-rgb) / .08); overflow: hidden; }
.t-bar i { display: block; height: 100%; background: var(--c); }
.verdict { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; }
.verdict i { width: 6px; height: 6px; border-radius: 50%; display: block; }
@media (max-width: 1179px) {
  .t-row { grid-template-columns: minmax(200px, 2.6fr) repeat(7, minmax(0, 1fr)) minmax(108px, 1fr); }
  .c-impr, .c-cpm, .c-cpc { display: none !important; }
}

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.chart { background: var(--surface); border: 1px solid rgb(var(--ink-rgb) / .12); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.chart-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.chart-title { font-size: 17px; letter-spacing: -0.01em; }
.chart-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.bars-v { height: 220px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid rgb(var(--ink-rgb) / .15); }
.bars-v i { display: block; flex: 1; min-width: 0; background: var(--c); border-radius: 6px 6px 0 0; height: var(--h); }
.bars-v-labels { display: flex; gap: 10px; margin-top: -10px; }
.bars-v-labels span { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scatter {
  position: relative; height: 240px; border-left: 1px solid rgb(var(--ink-rgb) / .15); border-bottom: 1px solid rgb(var(--ink-rgb) / .15);
  background-image: linear-gradient(rgb(var(--ink-rgb) / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--ink-rgb) / .06) 1px, transparent 1px);
  background-size: 100% 25%, 25% 100%;
}
.scatter i { position: absolute; left: var(--x); bottom: var(--y); width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--surface); }
.scatter-axis { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-top: -10px; }
.bars-h { display: flex; flex-direction: column; gap: 14px; }
.bar-h { display: grid; grid-template-columns: 110px minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.bar-h-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-h-track { height: 22px; border-radius: 6px; background: rgb(var(--ink-rgb) / .06); overflow: hidden; }
.bar-h-track i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 6px; }
.bar-h-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; }
.bar-h.slim { grid-template-columns: 110px minmax(0, 1fr) 44px; }
.bar-h.slim .bar-h-track { height: 10px; border-radius: 999px; }
.bar-h.slim .bar-h-track i { border-radius: 999px; }

/* Phones: calmer Test Board. Filters and table scroll sideways; Table/Charts switch sits below, centered. */
@media (max-width: 700px) {
  .dash-inner { display: flex; flex-direction: column; }
  .dash-bar { display: contents; }
  .kpis { display: none; }
  .chips { order: 2; flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 12px; padding: 0 20px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
  .dash-stage { order: 3; height: 460px; }
  .dash-blur { overflow: auto; pointer-events: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dash-blur::-webkit-scrollbar { display: none; }
  .dash-blur .table { min-width: 820px; }
  .dash-blur .charts { min-width: 0; }
  .dash-overlay { pointer-events: none; padding: 16px; }
  .dash-note { pointer-events: auto; padding: 24px 22px; gap: 10px; }
  .dash-note-title { font-size: 24px; }
  .tabs { order: 4; align-self: center; margin-top: 16px; }
}

/* Quote */
/* Tall, square-edged like the other sections. */
.quote {
  background: #2F5BEA; color: #FFFFFF; position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(480px, 76vh, 780px);
}
.quote-inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(88px, 11.5vw, 176px) clamp(20px, 4vw, 48px); }
.quote-text { margin: 0; font-weight: 400; font-size: clamp(34px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; }
/* sans sentence with a thin italic serif accent word, like the other headings */
.quote-text .serif { color: #FF9A73; font-size: 1.14em; letter-spacing: -0.01em; }
.quote-body { margin: 0; padding: 0; }
.quote-mark { display: block; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(120px, 15vw, 220px); line-height: .62; height: .5em; color: #FF9A73; margin: 0 0 clamp(8px, 1.5vw, 20px) -.04em; user-select: none; }
.quote-by { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px, 4vw, 52px); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.8); }
.quote-rule { display: block; width: 44px; height: 1px; background: #FF9A73; }

/* Phones: hero headline a touch bigger (+2px) with a little more line height (+3px) */
@media (max-width: 700px) {
  /* shrinks on very narrow phones so "business ideas." never breaks mid-phrase */
  .hero h1 { --h1: min(calc(clamp(52px, 9.4vw, 148px) + 2px), calc((100vw - 44px) / 6.5)); font-size: var(--h1); line-height: calc(var(--h1) * .92 + 3px); }
}

/* Phones: footer stacks. Logo, then the Contact button, then small Terms / Privacy links. */
@media (max-width: 700px) {
  :is(.contact, .legal-footer) .footer { flex-direction: column; align-items: center; gap: 28px; padding-top: 36px; padding-bottom: 8px; text-align: center; }
  :is(.contact, .legal-footer) .footer-brand { justify-content: center; }
  :is(.contact, .legal-footer) .footer-links { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; align-items: center; gap: 26px 28px; }
  :is(.contact, .legal-footer) .footer-links .nav-cta { grid-column: 1 / -1; order: -1; }
  :is(.contact, .legal-footer) .footer-links a:not(.nav-cta) { font-size: 12px; letter-spacing: .01em; }
}

/* Phones: the quote only needs to be as tall as its content */
@media (max-width: 700px) {
  .quote { min-height: 0; }
  .quote-inner { padding-top: 56px; padding-bottom: 56px; }
  .quote-mark { font-size: 96px; margin-bottom: 4px; }
  .quote-by { margin-top: 24px; }
}

/* Contact */
.contact-inner { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 48px) 48px; }
.contact .eyebrow { margin-bottom: 28px; }
.contact-cta {
  display: block; font-weight: 400; font-size: clamp(48px, 9vw, 140px);
  line-height: .92; letter-spacing: -0.045em; transition: color .2s;
  /* room under the baseline so the g in "weigh?" isn't clipped by the gradient text box */
  padding: 0 .06em .16em 0; margin-bottom: -.16em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .contact-cta {
    background-image: linear-gradient(90deg, #2F5BEA 0%, #B78CFF 12%, #F0643A 24%, #E8C547 30%, var(--ink) 40%, var(--ink) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position .5s cubic-bezier(.4, 0, .2, 1);
  }
  .contact-cta:hover,
  .contact-cta:focus-visible { background-position: 0 0; }
}
.seam {
  margin-top: 96px; height: 3px;
  background: linear-gradient(90deg, var(--paper), #F0643A, #E8C547, #4C6FE0, #B78CFF, #34A873, var(--paper), var(--paper));
  background-size: 300% 100%; animation: seam 14s linear infinite;
}
.footer { padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo { width: 38px; height: 38px; }
.footer-brand span { color: var(--ink); font-weight: 500; }
.footer-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links a:not(.nav-cta) { color: var(--muted); }
.footer-links a:not(.nav-cta):hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fabled: wisp of smoke rising from the cigarette tip */
.card-tile.has-logo { position: relative; }
.smoke { position: absolute; left: 4px; top: 57px; width: 0; height: 0; pointer-events: none; }
.smoke i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(240,236,228,.7); filter: blur(2px); opacity: 0;
  animation: smokeRise 4.2s ease-out infinite;
}
.smoke i:nth-child(2) { animation-delay: 1.4s; animation-duration: 4.8s; }
.smoke i:nth-child(3) { animation-delay: 2.8s; animation-duration: 3.9s; }
@keyframes smokeRise {
  0%   { opacity: 0;   translate: 0 0;      scale: .4; }
  15%  { opacity: .6; }
  40%  { translate: -5px -16px; }
  70%  { translate: 3px -30px; opacity: .25; }
  100% { opacity: 0;   translate: -4px -46px; scale: 2.6; }
}
@media (prefers-reduced-motion: reduce) { .smoke { display: none; } }

/* Phones: the portfolio filter pills sit in one swipeable row */
@media (max-width: 700px) {
  .portfolio-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 20px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; white-space: nowrap; }
}

/* Tablets and phones: the KPI tiles (spend, blended, ad sets...) are dropped to keep the Test Board calm */
@media (max-width: 899px) {
  .kpis { display: none; }
}

/* Phones and tablets: the process steps sit in one swipeable row instead of wrapping */
@media (max-width: 899px) {
  .path-steps {
    --gut: clamp(20px, 4vw, 48px);
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(72vw, 270px); grid-auto-rows: auto;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gut);
    margin: 0 calc(var(--gut) * -1); padding: 10px var(--gut) 14px;
    scrollbar-width: none;
  }
  .path-track { display: block; }
  .path-steps::-webkit-scrollbar { display: none; }
  .path-steps .step { scroll-snap-align: start; min-height: 220px; justify-content: space-between; }
}

/* Phones: portfolio cards sit in one swipeable row instead of stacking */
@media (max-width: 700px) {
  .cards {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(78vw, 300px); grid-auto-rows: auto;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    margin: 0 -20px; padding: 2px 20px 14px;
    scrollbar-width: thin; scrollbar-color: rgba(242,240,234,.25) transparent;
  }
  .cards .card { scroll-snap-align: start; min-height: 440px; padding: 28px 26px; gap: 14px; }
  .cards .card-mid { flex: 0 0 170px; }
  .cards .card-name { font-size: 30px; }
}

/* Hold "a venture" to launch it */
.venn-center.charging {
  cursor: grabbing; z-index: 2;
  scale: calc(1 + var(--ch, 0) * .16);
  box-shadow: 0 10px 30px rgba(21,21,21,.25), 0 0 calc(var(--ch, 0) * 46px) calc(var(--ch, 0) * 8px) rgba(255,154,115,calc(var(--ch, 0) * .85));
}
.rk-flame {
  position: absolute; left: 50%; top: 88%; width: 34px; height: 78px; margin-left: -17px; z-index: -1;
  transform-origin: 50% 0; scale: 1 var(--fl, 1); pointer-events: none;
  border-radius: 45% 45% 50% 50% / 12% 12% 88% 88%;
  background: linear-gradient(180deg, #FFF3C4 0%, #FFC857 30%, #FF7A45 65%, rgba(240,100,58,0) 100%);
  filter: blur(1.2px); animation: rkFlick .09s linear infinite alternate;
}
.venn-rocket .rk-flame { height: 120px; width: 40px; margin-left: -20px; --fl: 1; }
@keyframes rkFlick { from { translate: -1px 0; opacity: .85; } to { translate: 1px 4px; opacity: 1; } }
.rk-puff {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(244,240,232,.75); filter: blur(3px); pointer-events: none; z-index: 99999;
  animation: rkPuff .8s ease-out forwards;
}
@keyframes rkPuff {
  from { opacity: .75; scale: .6; }
  to   { opacity: 0;   scale: calc(var(--s, 1) * 3.2); margin-left: var(--dx, 0); margin-top: 60px; }
}
.venn-center.rk-back { animation: rkBack .9s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes rkBack {
  from { scale: 0; opacity: 0; translate: 0 -120px; }
  60%  { opacity: 1; }
  to   { scale: 1; opacity: 1; translate: 0 0; }
}

/* Theme toggle: a little sun that melts into a sleepy moon with twinkling stars. The icon shows the current theme. */
.theme-toggle {
  --ico: #F2A33A; --glow: 242 163 58;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid rgb(var(--glow) / .35); background: rgb(var(--glow) / .13); color: var(--ico); cursor: pointer;
  transition: background-color .4s, border-color .4s, transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
  position: relative; overflow: hidden; /* clouds drift through and get clipped by the circle */
}
html[data-theme="dark"] .theme-toggle { --ico: #F4E5A6; --glow: 244 229 166; }
.theme-toggle:hover { background: rgb(var(--glow) / .22); border-color: rgb(var(--glow) / .6); transform: scale(1.1); box-shadow: 0 0 0 4px rgb(var(--glow) / .12); }
.theme-toggle:active { transform: scale(.88); }
.theme-ico { display: block; width: 22px; height: 22px; overflow: visible; }
.theme-ico .core { fill: var(--ico); transform-origin: 12px 12px; transform: scale(.56); transition: transform .55s cubic-bezier(.4, 1.5, .5, 1), fill .4s; }
.theme-ico .cut { transform: translate(0, 0); transition: transform .55s cubic-bezier(.4, 1.3, .5, 1); }
.theme-ico .crater { fill: #B8A45C; opacity: 0; transition: opacity .4s; }
.theme-ico .rays { stroke: var(--ico); stroke-width: 1.9; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .6s cubic-bezier(.4, 1.4, .5, 1), opacity .3s; }
.theme-ico .star { fill: var(--ico); transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-90deg); opacity: 0; transition: transform .5s cubic-bezier(.4, 1.8, .5, 1), opacity .3s; }
.theme-ico .s2 { transition-delay: .08s; }
.theme-ico .s3 { transition-delay: .16s; }
.theme-toggle:hover .rays { transform: rotate(45deg); }
html[data-theme="dark"] .theme-ico .core { transform: scale(1); }
html[data-theme="dark"] .theme-ico .cut { transform: translate(-7px, 7px); }
html[data-theme="dark"] .theme-ico .crater { opacity: .55; }
html[data-theme="dark"] .theme-ico .rays { transform: rotate(90deg) scale(.3); opacity: 0; }
html[data-theme="dark"] .theme-toggle:hover .rays { transform: rotate(90deg) scale(.3); }
.theme-clouds { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .5s; }
.theme-clouds .cloud { fill: #fff; opacity: .5; animation: cloudDrift 9s linear infinite; }
.theme-clouds .c2 { animation-duration: 13s; animation-delay: -6s; }
.theme-clouds .c3 { animation-duration: 17s; animation-delay: -11s; }
@keyframes cloudDrift { from { transform: translateX(-22px); } to { transform: translateX(40px); } }
html[data-theme="dark"] .theme-clouds { opacity: 0; }
html[data-theme="dark"] .theme-clouds .cloud { animation-play-state: paused; }
html[data-theme="dark"] .theme-ico .star { transform: scale(1) rotate(0); opacity: 1; animation: twinkle 2.6s ease-in-out .6s infinite; }
html[data-theme="dark"] .theme-ico .s2 { animation-delay: 1.2s; }
html[data-theme="dark"] .theme-ico .s3 { animation-delay: 1.9s; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .45; transform: scale(.7) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-ico * { transition: none !important; animation: none !important; }
  .theme-clouds .cloud { animation: none !important; transform: translateX(6px); }
}

/* In the header the icon sits close to the CTA (nav gap is wider than we want here). */
.site-nav .theme-toggle { margin-left: calc(10px - clamp(14px, 2.5vw, 32px)); }

/* Narrow phones: keep logo, links, CTA and theme button on one header row. */
@media (max-width: 480px) {
  .site-header-inner:has(.has-theme) { gap: 10px; }
  .site-header-inner:has(.has-theme) .brand { flex: none; }
  .site-header-inner:has(.has-theme) .brand-logo { width: 36px; height: 36px; }
  .site-nav.has-theme { gap: 8px; font-size: 13px; flex-wrap: nowrap; }
  .site-nav.has-theme .nav-cta { padding: 8px 10px; white-space: nowrap; }
  .site-nav .theme-toggle { margin-left: 0; width: 32px; height: 32px; }
  .site-nav .theme-toggle .theme-ico { width: 20px; height: 20px; }
}

/* Very small phones (320px): drop the About link so the rest still fits on one row. */
@media (max-width: 349px) { .site-nav.has-theme a[href="#lenses"] { display: none; } }

/* Dark theme: the colour tokens above do most of the work; these are the few things that need their own treatment. */
html[data-theme="dark"] .venn-orbit { mix-blend-mode: screen; }   /* multiply would turn the circles black */
html[data-theme="dark"] .orb { opacity: .5; }
html[data-theme="dark"] .flow-orb { opacity: .26; }
html[data-theme="dark"] .t-row.t-head { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .t-head .first { border-right-color: rgb(var(--ink-rgb) / .14); }
html[data-theme="dark"] .t-head .last { border-left-color: rgb(var(--ink-rgb) / .14); }
html[data-theme="dark"] .brand-grad { background-image: linear-gradient(90deg, #6F8CFF, #8FB1FF, #B78CFF, #9B8CFF, #6F8CFF); }

/* While the theme is switching, colours fade instead of snapping. */
html.theme-anim *:not(.theme-toggle, .theme-toggle *), html.theme-anim *:not(.theme-toggle, .theme-toggle *)::before, html.theme-anim *:not(.theme-toggle, .theme-toggle *)::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* Step 04 reads "User test" on wide screens and just "Test" on iPad and phones, where the cards are narrower. */
.sn-short { display: none; }
@media (max-width: 1159px) { .sn-long { display: none; } .sn-short { display: inline; } }