/* Fonts, self-hosted (latin subsets of Bricolage Grotesque, Geist and Geist Mono, SIL Open Font License) */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap; src: url(/fonts/bricolage-latin.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-latin.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format("woff2"); }

/* spekko.ai. Neutral white and black (brand catalogue Vol. 04); Spekko's own glow is the only colour, and only where it means a state. */
:root {
  --bg: #ffffff;
  --bg-2: #f2eff7; /* pearl */
  --fg: #17131a;
  --muted: #6e6a73;
  --faint: #8f8a95;
  --rule: #e4e1ea;
  --card: #ffffff;
  --accent: #17131a; /* the brand is neutral: ink does the accenting */
  --glow: #ff8a1f; /* set by the page to the category Spekko is showing */
  --shadow: 0 1px 2px rgb(23 19 26 / 6%), 0 8px 24px rgb(23 19 26 / 8%);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", "Cascadia Mono", ui-monospace, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0e11;
    --bg-2: #18171b;
    --fg: #f3f1f5;
    --muted: #a6a2ac;
    --faint: #78737e;
    --rule: #2a2830;
    --card: #18171b;
    --accent: #f3f1f5;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px rgb(0 0 0 / 35%);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px / 1.6 var(--body);
  padding-inline: 20px;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* Wordmark: "spekk" in Bricolage 800 with the traced Spekko as the o (logo No. 10), and the TM. */
.wordmark {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.02em;
  font: 800 30px / 1 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.055em;
  text-decoration: none;
  color: var(--fg);
}
.wordmark .o {
  height: 0.78em;
  width: auto;
  margin-left: 0.015em;
  margin-bottom: 0.005em;
}
.wordmark sup {
  font: 600 10px / 1 var(--body);
  letter-spacing: 0;
  align-self: flex-start;
  margin-left: 2px;
  color: var(--fg);
  opacity: 0.85;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
}
.top nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
  color: var(--muted);
}
.top nav a {
  text-decoration: none;
}
.top nav a:hover {
  color: var(--fg);
}

/* Hero: an editorial split, one field. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding-block: 56px 72px;
}
.hero h1 {
  font: 700 clamp(38px, 5.2vw, 60px) / 1.04 var(--display);
  font-variation-settings: "opsz" 96; /* after the shorthand, which resets it */
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 34em;
  margin: 0 0 28px;
}
.stage {
  transition: translate 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
  justify-self: center;
  width: 100%;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 12% 10% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--glow) 38%, transparent), transparent);
  filter: blur(18px);
  transition: background 700ms ease;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition:
    opacity 600ms ease,
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stage img.on {
  opacity: 1;
  transform: none;
}
.caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font: 500 13px / 1 var(--mono);
  color: var(--muted);
}
.caption .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glow);
  transition: background 700ms ease;
}

/* The waitlist form: one field and one button, joined. */
.join {
  display: flex;
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 5px;
  box-shadow: var(--shadow);
}
.join input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: 400 16px var(--body);
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.join input[type="email"]:focus {
  outline: none;
}
.join:focus-within {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
}
.join button {
  border: 0;
  border-radius: var(--r-sm);
  background: var(--fg);
  color: var(--bg);
  font: 600 15px var(--body);
  padding: 0 18px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease;
}
.join button:hover {
  background: color-mix(in oklab, var(--fg) 85%, var(--accent));
}
.join button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.join button[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.note {
  font-size: 14px;
  color: var(--faint);
  margin: 12px 0 0;
  min-height: 1.6em;
}
.note.ok {
  color: var(--fg);
}
.note.err {
  color: var(--accent);
}
.cf-turnstile {
  margin-top: 12px;
}

/* Sections */
section.band {
  padding-block: 72px;
  border-top: 1px solid var(--rule);
}
.band h2 {
  font: 700 clamp(28px, 3.4vw, 40px) / 1.1 var(--display);
  font-variation-settings: "opsz" 96; /* after the shorthand, which resets it */
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 18em;
}
.band p.sub {
  color: var(--muted);
  max-width: 36em;
  margin: 0 0 36px;
}
.label {
  font: 500 12px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The six glows */
.glows {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.glow {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 14px 14px 18px;
  text-align: left;
}
.glow img.spk {
  width: 70%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 8px auto 14px;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.glow:hover img.spk {
  transform: translateY(-3px);
}
.glow b {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15px var(--body);
}
.glow b i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.glow span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
}

/* Split rows */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.points li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  color: var(--muted);
}
.points li b {
  color: var(--fg);
  font-weight: 600;
}
.points svg {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  stroke: var(--fg);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A real Spekko card, as the app shows it */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
  max-width: 440px;
  justify-self: center;
  width: 100%;
}
.card .top-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card .needs {
  color: #e0283a; /* needs-you red: a state, so it may be coloured */
}
.card h3 {
  font: 600 19px / 1.3 var(--body);
  margin: 0 0 6px;
}
.card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
}
.card .acts {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.card .acts span {
  font-size: 13px;
  color: var(--faint);
}
.btn,
.ghost {
  font: 600 14px var(--body);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
}
.btn {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Devices list */
.devices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.devices div {
  padding: 22px 20px;
  border-right: 1px solid var(--rule);
}
.devices div:last-child {
  border-right: 0;
}
.devices b {
  display: block;
  font: 600 17px var(--body);
  margin: 10px 0 4px;
}
.devices span {
  color: var(--muted);
  font-size: 14.5px;
}

.closing {
  text-align: left;
}
.closing .join {
  margin-top: 6px;
}

footer.foot {
  border-top: 1px solid var(--rule);
  padding-block: 28px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  color: var(--faint);
  font-size: 14px;
}
footer.foot nav {
  display: flex;
  gap: 20px;
}
footer.foot a {
  text-decoration: none;
}
footer.foot a:hover {
  color: var(--fg);
}

/* Legal and help pages */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 32px 24px;
}
.doc h1 {
  font: 700 clamp(32px, 5vw, 44px) / 1.08 var(--display);
  font-variation-settings: "opsz" 96; /* after the shorthand, which resets it */
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.doc h2 {
  font: 700 21px / 1.3 var(--display);
  font-variation-settings: "opsz" 96; /* after the shorthand, which resets it */
  letter-spacing: -0.01em;
  margin: 36px 0 8px;
}
.doc p,
.doc li {
  max-width: 66ch;
}
.doc .meta {
  color: var(--faint);
  font-size: 15px;
  margin-bottom: 26px;
}
.doc a {
  color: var(--accent);
}
.box {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 6px 20px;
  background: var(--card);
}
.narrow {
  max-width: 560px;
  margin: 18vh auto 0;
}

@media (max-width: 900px) {
  .hero,
  .split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero {
    padding-block: 28px 56px;
  }
  .stage {
    max-width: 380px;
    order: -1;
  }
  .glows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .devices {
    grid-template-columns: 1fr 1fr;
  }
  .devices div:nth-child(2) {
    border-right: 0;
  }
  .devices div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 520px) {
  body {
    padding-inline: 16px;
  }
  .top nav a.hide-sm {
    display: none;
  }
  .glows {
    grid-template-columns: 1fr 1fr;
  }
  .devices {
    grid-template-columns: 1fr;
  }
  .devices div {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .devices div:last-child {
    border-bottom: 0;
  }
  .join {
    flex-direction: column;
    gap: 6px;
  }
  .join button {
    width: 100%;
  }
  section.band {
    padding-block: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage img,
  .stage::before,
  .caption .dot,
  .glow img.spk {
    transition: none;
  }
}

/* State dots in the tiles (classes, not inline styles: the CSP blocks those) */
.c-make {
  background: #ff8a1f;
}
.c-find {
  background: #2f7bff;
}
.c-money {
  background: #12a15a;
}
.c-go {
  background: #16c7c7;
}
.c-talk {
  background: #8b5cf6;
}
.c-attention {
  background: #ff3040;
}

/* Ink line language (brand catalogue Vol. 04): the same ink keyline Spekko is drawn with, as a sticker edge on the
   things you touch. One weight, one offset, everywhere. */
:root {
  --line-w: 2px;
  --line-c: #17131a;
  --lift: 4px 4px 0 var(--line-c);
}
@media (prefers-color-scheme: dark) {
  :root {
    --line-c: #f3f1f5;
  }
}
.join,
.card,
.glow,
.devices {
  border: var(--line-w) solid var(--line-c);
  box-shadow: var(--lift);
}
.glow {
  background: var(--card);
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.glow:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--line-c);
}
.devices div {
  border-color: var(--line-c);
}
.join button {
  border: var(--line-w) solid var(--line-c);
}

/* Scroll reveal: sections rise in once as they arrive (never for reduced motion) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms ease,
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .glow {
    transition: none;
  }
}

/* The hero's working example: what you ask, what he does, and the card he waits on */
.msg {
  font-size: 15px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 92%;
}
.msg.you {
  justify-self: end;
  background: var(--fg);
  color: var(--bg);
  border-bottom-right-radius: 4px;
  min-height: 1.45em;
}
.msg.you:empty,
.msg.you .typed:empty::after {
  content: "\00a0";
}
.msg.him {
  justify-self: start;
  background: var(--bg-2);
  border-bottom-left-radius: 4px;
}
.typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: caret 900ms steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  gap: 6px;
  font: 500 13px / 1.3 var(--mono);
  color: var(--muted);
}
.steps li {
  display: flex;
  gap: 8px;
  align-items: center;
  animation: step-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.steps li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--line-c);
  background: var(--card);
}
.steps li.done::before {
  background:
    no-repeat center / 9px 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3L8.5 2.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
    var(--line-c);
}
@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.ask {
  display: grid;
  gap: 4px;
  background: var(--card);
  border: var(--line-w) solid var(--line-c);
  box-shadow: var(--lift);
  border-radius: 12px;
  padding: 12px 14px;
  animation: step-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ask .needs {
  color: #e0283a;
}
.ask .sub {
  font-size: 13px;
  color: var(--muted);
}
.ask .acts {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.ask .btn.pressed {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.ask .btn {
  transition: transform 120ms ease;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .steps li.done::before {
    background:
      no-repeat center / 9px 9px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3L8.5 2.8' fill='none' stroke='%2317131a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
      var(--line-c);
  }
}

/* Questions */
.faq {
  display: grid;
  gap: 0;
  max-width: 760px;
  border-top: var(--line-w) solid var(--line-c);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font: 600 17px / 1.35 var(--body);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font: 500 22px / 1 var(--mono);
  color: var(--muted);
  transition: transform 200ms ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq summary:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}
.faq p {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 62ch;
}

/* The try-it console: ask him something and watch it play out, ending on a card you answer yourself */
.console {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin: 4px auto 0;
}
.console .caption {
  justify-content: flex-start;
  margin: 0;
}
.thread {
  display: grid;
  gap: 8px;
  height: 330px; /* fixed, so the page never jumps while he works */
  overflow: hidden;
  align-content: end;
}
.thread .msg,
.thread .steps,
.thread .ask {
  animation: step-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.askbox {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: var(--r-md);
  background: var(--card);
  border: var(--line-w) solid var(--line-c);
  box-shadow: var(--lift);
}
.askbox input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: 400 15px var(--body);
  padding: 9px 10px;
}
.askbox input:focus {
  outline: none;
}
.askbox button {
  border: var(--line-w) solid var(--line-c);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--fg);
  font: 600 14px var(--body);
  padding: 0 14px;
  min-height: 38px;
  cursor: pointer;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.chips button {
  font: 500 12.5px var(--body);
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.chips button:hover {
  border-color: var(--line-c);
}
.chips button:focus-visible,
.askbox button:focus-visible,
.ask button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.try-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--faint);
}
.ask button {
  font: 600 14px var(--body);
  border-radius: var(--r-sm);
  padding: 8px 13px;
  cursor: pointer;
  border: var(--line-w) solid var(--line-c);
  background: var(--card);
  color: var(--fg);
}
.ask button.primary {
  background: var(--fg);
  color: var(--bg);
}
.ask button.primary:hover {
  transform: translate(-1px, -1px);
}
.ask.answered button {
  opacity: 0.45;
  pointer-events: none;
}
.ask .kind {
  font: 500 11px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ask .kind .needs {
  color: #e0283a;
}
.ask .price {
  font-variant-numeric: tabular-nums;
}

/* The page's ink line: behind everything, in the gutters, drawing as you scroll */
.wrap {
  position: relative;
}
.inkline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.inkline path {
  fill: none;
  stroke: var(--line-c);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
main,
.top,
footer.foot {
  position: relative;
  z-index: 1;
}

/* Joining: a burst of ink lines around the field, and a hop */
.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  overflow: visible;
  pointer-events: none;
}
.burst line {
  stroke: var(--line-c);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: burst 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes burst {
  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -30;
    opacity: 0;
  }
}
.stage.hop {
  animation: hop 700ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes hop {
  40% {
    transform: translateY(-18px) scale(1.03, 0.97);
  }
  70% {
    transform: translateY(0) scale(0.98, 1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.hop {
    animation: none;
  }
}

/* ===== Pearl Tech Studio look (locked 10/18/2026): the Studio's light sheet, soft depth, Pearl Core Spekko ===== */
:root {
  --bg: #f3f5f9;
  --bg-2: #e9ecf4;
  --fg: #1c202b;
  --muted: #5b6272;
  --faint: #646b7a;
  --rule: #e1e5ec;
  --card: #ffffff;
  --accent: #1c202b;
  --shadow: 0 1px 2px rgb(28 32 43 / 6%), 0 14px 34px -12px rgb(28 32 43 / 18%);
  --line-c: #1c202b;
  --lift: 0 1px 2px rgb(28 32 43 / 8%), 0 10px 26px -10px rgb(28 32 43 / 28%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11141b;
    --bg-2: #1a1e27;
    --fg: #eef1f6;
    --muted: #a3abba;
    --faint: #8e97a8;
    --rule: #2a303c;
    --card: #1a1e27;
    --accent: #eef1f6;
    --line-c: #eef1f6;
    --lift: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 30px -10px rgb(0 0 0 / 55%);
  }
}
.wordmark { display: inline-flex; align-items: flex-start; gap: 2px; line-height: 0; }
.wordmark .logo { height: 34px; width: auto; display: block; }
.wordmark sup { font: 600 10px/1 var(--body); color: var(--fg); opacity: 0.8; margin-top: 2px; }
.c-calls { background: #38bdf8; }
.c-errands { background: #e6ff14; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%); }

/* Pearl Core motion (the Studio's): a 1.2% breathe up from his base, a core pulse while he works, a heartbeat for needs-you */
.stage img.on { animation: breathe 3.6s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.012); } }
.stage::before { animation: corepulse 2.4s ease-in-out infinite; }
@keyframes corepulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } }
.stage:has(img[src*="attention"].on)::before { animation: heartbeat 1.1s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.1); } 28% { transform: scale(1); } 42% { transform: scale(1.07); } }

/* Watch him work: the real Studio desk, framed like a screen */
.studio .studio-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 14px; }
.studio .studio-tabs button { font: 500 14px/1 var(--body); color: var(--fg); background: var(--card); border: 1px solid var(--rule); padding: 10px 14px; border-radius: 999px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.studio .studio-tabs button:hover { border-color: var(--faint); }
.studio .studio-tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.studio .studio-tabs button:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
.studio-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); background: var(--card); box-shadow: var(--shadow); aspect-ratio: 16 / 11.2; max-width: 100%; }
.studio-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
@media (max-width: 760px) { .studio-frame { aspect-ratio: 3 / 4; } }
@media (prefers-reduced-motion: reduce) { .stage img.on, .stage::before { animation: none; } }

/* Light theme only (Studio rails, 10/18): undo the older dark-mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #f3f5f9; --bg-2: #e9ecf4; --fg: #1c202b; --muted: #5b6272; --faint: #646b7a; --rule: #e1e5ec; --card: #ffffff;
    --accent: #1c202b; --line-c: #1c202b; --shadow: 0 1px 2px rgb(28 32 43 / 6%), 0 14px 34px -12px rgb(28 32 43 / 18%);
    --lift: 0 1px 2px rgb(28 32 43 / 8%), 0 10px 26px -10px rgb(28 32 43 / 28%);
    color-scheme: light;
  }
}

/* Studio look: no hand-drawn ink tether through the page; sections never wait invisible for a scroll observer */
.inkline { display: none !important; }
.reveal { opacity: 1; transform: translateY(10px); }
.reveal.in { transform: none; }
.glows { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .glows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .glows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.glow { border-width: 1px; border-color: var(--rule); box-shadow: var(--shadow); }
.devices, .card, .join { border-width: 1px; }

/* ===== The pearl: a flowing white iridescent gradient behind everything (pearl.js) ===== */
.pearl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; pointer-events: none; }
body { background: transparent; }
html { background: #f6f7fa; }
html, html.no-pearl { background: radial-gradient(120% 90% at 80% 0%, #fdf4ff 0%, #eef6ff 35%, #f6f7fa 70%), #f6f7fa; }
section.band { background: transparent; border-color: rgb(28 32 43 / 8%); }
/* glass cards over the pearl */
.glow, .card, .devices, .console, .studio-frame, .faq details, .join {
  background: rgb(255 255 255 / 62%);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 85%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 90%) inset, 0 18px 40px -22px rgb(40 30 80 / 35%);
}
/* headline: a slow pearl shimmer across the ink */
h1#hero-title, .band h2 {
  background: linear-gradient(100deg, #1c202b 0%, #1c202b 38%, #6b5bd6 46%, #2fa6d8 52%, #e08ad0 58%, #1c202b 66%, #1c202b 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
/* Spekko on his spring: follows the cursor, leans into motion, wobbles when he stops */
.stage { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--lean, 0)) scale(var(--squash, 1), var(--stretch, 1)); transform-origin: 50% 90%; will-change: transform; cursor: pointer; }
.stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--glow) 45%, transparent), transparent); filter: blur(6px); transform: translate(calc(var(--sx, 0) * -0.4), 0); }
/* state tiles light up */
.glows .glow { transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s, border-color 0.3s; cursor: pointer; }
.glows .glow:hover, .glows .glow:focus-visible, .glows .glow.lit { transform: translateY(-6px); border-color: color-mix(in oklab, var(--glow) 55%, white); box-shadow: 0 1px 0 #fff inset, 0 24px 50px -22px color-mix(in oklab, var(--glow) 70%, transparent); outline: none; }
.glows .glow img.spk { transition: transform 0.6s cubic-bezier(.3,1.6,.5,1); }
.glows .glow:hover img.spk, .glows .glow.lit img.spk { transform: translateY(-4px) scale(1.08); }
@media (prefers-reduced-motion: reduce) { h1#hero-title, .band h2 { animation: none; } .stage { transform: none; } }

/* Accessibility: skip link, and a visible focus ring on everything you can reach by keyboard */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #111; color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2f7bff; outline-offset: 3px; border-radius: 6px; }

/* Press kit */
.press .lead { font-size: 18px; color: var(--muted); }
.press h2 { margin-top: 48px; }
.boiler { position: relative; padding: 22px 24px 18px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.boiler p { margin: 0 0 12px; }
.press .copy { font: 500 13px var(--body); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg); color: var(--fg); cursor: pointer; }
.press .copy:hover { border-color: var(--fg); }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.logo-tile { margin: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.logo-tile img { display: block; width: 100%; height: 120px; object-fit: contain; padding: 30px; box-sizing: border-box; }
.logo-tile.light img { background: #fff; }
.logo-tile.dark img { background: #17131a; }
.logo-tile.mark img { padding: 22px; }
.logo-tile figcaption { padding: 10px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); }
.states { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.states li { display: grid; justify-items: center; gap: 2px; padding: 12px 8px 14px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--card); text-align: center; }
.states img { width: 84px; height: 84px; object-fit: contain; }
.states b { font-size: 14px; }
.states span { font-size: 12px; color: var(--muted); }
.swatch-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatch-list li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-md); }
.swatch-list i { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.swatch-list b { font-size: 14px; }
.swatch-list code { font: 500 12px var(--mono); color: var(--muted); }
.ts-box { margin-top: 10px; }
.ts-box:empty { display: none; }
/* The No. 10 logo draws its own TM; the text one stays for screen readers only */
.wordmark sup { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }