:root {
  --paper: #f3f2ec;
  --content-off-white: #f3f2ec;
  --paper-deep: #e9e8df;
  --white: #fbfbf8;
  --ink: #151713;
  --ink-soft: #252821;
  --muted: #6b6f66;
  --line: rgba(21, 23, 19, 0.16);
  --line-light: rgba(255, 255, 255, 0.18);
  --lime: #c8ff57;
  --lime-soft: #e3ffad;
  --green: #24482d;
  --community-canvas: #1a1c1a;
  --sans: "Inter", Arial, sans-serif;
  --mono: "Inconsolata", "SFMono-Regular", Consolas, monospace;
  --page: min(1240px, calc(100vw - 96px));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

::selection {
  color: var(--ink);
  background: var(--lime);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

[contenteditable="true"]:focus-visible {
  outline: 1px dashed rgba(21, 23, 19, 0.42);
  outline-offset: 5px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 0 4.5vw;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(243, 242, 236, 0.88);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.brand img,
.footer-brand img {
  width: 28px;
  height: 28px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand:hover img,
.footer-brand:hover img {
  transform: rotate(5deg) scale(1.04);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 31px;
  font-size: 14px;
}

.desktop-nav a,
.sign-in-link {
  color: rgba(21, 23, 19, 0.72);
  transition: color 160ms ease;
}

.header-discord {
  display: inline-flex;
  align-items: center;
  color: rgba(21, 23, 19, 0.72);
  transition: color 160ms ease;
}

.header-discord svg {
  width: 20px;
  height: 20px;
}

.desktop-nav a:hover,
.sign-in-link:hover,
.header-discord:hover {
  color: var(--ink);
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.header-cta:hover {
  color: var(--ink);
  background: var(--lime);
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle i {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 180ms ease;
}

.menu-toggle[aria-expanded="true"] i:first-of-type {
  transform: translateY(3.25px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] i:last-of-type {
  transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  z-index: 99;
  inset: 76px 0 0;
  padding: 32px 24px;
  background: var(--paper);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
  font-size: 23px;
  letter-spacing: -0.03em;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 142px 40px 104px;
  overflow: hidden;
  background:
    linear-gradient(rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 8px 8px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 43%, rgba(243, 242, 236, 0.42) 0, rgba(243, 242, 236, 0.78) 42%, var(--paper) 80%);
  pointer-events: none;
}

.hero-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.hero-art img {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(1120px, 82vw);
  max-width: none;
  opacity: 0.24;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(-3deg);
  animation: blueprint-breathe 10s ease-in-out infinite alternate;
}

.hero-orbit {
  position: absolute;
  top: 48%;
  left: 50%;
  border: 1px solid rgba(21, 23, 19, 0.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero-orbit-one {
  width: 74vw;
  height: 74vw;
}

.hero-orbit-two {
  width: 54vw;
  height: 54vw;
}

@keyframes blueprint-breathe {
  from { transform: translate(-51%, -49%) rotate(-3.5deg) scale(0.99); }
  to { transform: translate(-49%, -51%) rotate(-2.5deg) scale(1.025); }
}

.hero-content {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(100%, 1000px);
  margin: 0 auto;
  text-align: center;
}

.hero-kicker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 34px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-kicker span {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(36, 72, 45, 0.11);
}

.hero h1 {
  max-width: 1000px;
  margin: 0 auto;
  font-size: clamp(64px, 7.25vw, 108px);
  font-weight: 500;
  letter-spacing: -0.072em;
  line-height: 0.9;
}

.hero h1 em,
.how h2 em {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.hero h1 em {
  display: inline-block;
  color: var(--green);
}

.hero-subtitle {
  max-width: 720px;
  margin: 34px auto 0;
  color: #4e524a;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.idea-bar {
  display: flex;
  width: min(100%, 780px);
  min-height: 68px;
  margin: 37px auto 0;
  padding: 6px;
  background: rgba(251, 251, 248, 0.92);
  border: 1px solid rgba(21, 23, 19, 0.28);
  border-radius: 999px;
  box-shadow: 0 16px 50px rgba(21, 23, 19, 0.09);
  backdrop-filter: blur(10px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.idea-bar:focus-within {
  border-color: var(--ink);
  box-shadow: 0 18px 60px rgba(21, 23, 19, 0.13);
}

.idea-input-shell {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
}

.idea-bar input {
  width: 100%;
  min-width: 0;
  padding: 0 21px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
  transition: color 80ms ease;
}

.idea-typing-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 21px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease;
}

.idea-typing-preview > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.idea-typing-preview.is-overflowing {
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
}

.idea-typing-preview i {
  width: 1px;
  height: 20px;
  flex: 0 0 1px;
  margin-left: 3px;
  background: var(--green);
  animation: typing-caret 900ms steps(1, end) infinite;
}

.idea-bar.is-auto-typing input {
  color: transparent;
  caret-color: transparent;
}

.idea-bar.is-auto-typing .idea-typing-preview {
  opacity: 1;
}

.idea-bar.is-keystroking .idea-typing-preview i {
  opacity: 1;
  animation: none;
}

@keyframes typing-caret {
  0%,
  46% {
    opacity: 1;
  }

  47%,
  100% {
    opacity: 0;
  }
}

.idea-bar button {
  flex: 0 0 auto;
  min-width: 136px;
  padding: 0 19px;
  color: var(--white);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.idea-bar button:hover {
  color: var(--ink);
  background: var(--lime);
  transform: translateX(2px);
}

.idea-examples {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 13px;
}

.idea-examples button {
  padding: 0;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(21, 23, 19, 0.38);
  cursor: pointer;
}

.hero-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.hero-note i,
.workspace-status i {
  width: 7px;
  height: 7px;
  background: #4ba268;
  border-radius: 50%;
}

.hero-scroll {
  position: absolute;
  z-index: 3;
  bottom: 30px;
  left: 50%;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero-scroll span {
  animation: scroll-nudge 1.8s ease-in-out infinite;
}

@keyframes scroll-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

.credibility {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 24px 4.5vw;
  color: #51564e;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.credibility p:last-child {
  text-align: right;
}

.credibility strong {
  color: var(--ink);
  font-weight: 500;
}

.section {
  width: 100%;
  padding: 150px 0;
}

.section > * {
  width: var(--page);
  margin-right: auto;
  margin-left: auto;
}

.section-intro {
  display: grid;
  justify-items: center;
  gap: 30px;
  text-align: center;
}

.section-intro h2,
.how-heading h2,
.audience-heading h2,
.offering-heading h2,
.examples-heading h2,
.notes-heading h2,
.faq-heading h2 {
  font-size: clamp(44px, 4.8vw, 70px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-align: center;
  text-wrap: balance;
}

.section-intro h2 {
  max-width: 980px;
}

.section-intro > p:last-child {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.015em;
  text-align: center;
}

.product {
  background: var(--white);
}

.workspace {
  margin-top: 80px;
  overflow: hidden;
  color: #e4e4e7;
  background: #09090b;
  border: 1px solid #2c2c30;
  border-radius: 10px;
  box-shadow: 0 34px 90px rgba(9, 9, 11, 0.22);
  font-size: 12px;
}

.workspace-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  background: #111113;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
}

.workspace-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.workspace-brand img {
  width: 20px;
  height: 20px;
}

.workspace-brand span {
  overflow: hidden;
  color: #f4f4f5;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 13px;
}

.workspace-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 0 10px;
  color: #09090b;
  background: #46cc46;
  border: 1px solid #46cc46;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
}

.workspace-actions a:hover {
  background: #60dc60;
}

.workspace-status {
  color: #71717a;
  font-size: 9px;
  letter-spacing: 0.05em;
}

.workspace-body {
  display: grid;
  grid-template-columns: minmax(245px, 0.82fr) minmax(410px, 1.54fr) minmax(230px, 0.72fr);
  min-height: 660px;
  background: #242526;
}

.conversation {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #18181b;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.workspace-tabs {
  display: flex;
  align-items: stretch;
  min-height: 42px;
  background: #141416;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.workspace-tabs button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 11px;
  color: #8b8b94;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  cursor: pointer;
}

.workspace-tabs button:hover {
  color: #fafafa;
  background: rgba(255, 255, 255, 0.04);
}

.workspace-tabs button.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.workspace-tabs button.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: #46cc46;
  content: "";
}

.workspace-tabs button span {
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  font-family: var(--mono);
  font-size: 8px;
}

.workspace-panel {
  flex: 1;
  min-height: 0;
}

.workspace-panel[hidden],
.tool-panel-view[hidden] {
  display: none;
}

.workspace-panel.is-active {
  display: flex;
  flex-direction: column;
}

.conversation-stream {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 18px 16px;
}

.mini-message {
  max-width: 94%;
  font-size: 11px;
  line-height: 1.55;
}

.mini-message span {
  display: block;
  margin-bottom: 6px;
  color: #71717a;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mini-message p {
  padding: 11px 12px;
  color: #d4d4d8;
  background: #202024;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.mini-message-user {
  align-self: flex-end;
}

.mini-message-user span {
  text-align: right;
}

.mini-message-user p {
  color: #f4f4f5;
  background: #29292d;
}

.mini-message-agent p {
  border-color: rgba(70, 204, 70, 0.28);
  box-shadow: inset 2px 0 #46cc46;
}

.mini-message.is-new {
  animation: mini-message-in 340ms ease both;
}

@keyframes mini-message-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.mini-message.is-thinking p {
  color: #8b8b94;
  font-family: var(--mono);
  font-size: 10px;
}

.mini-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: rgba(70, 204, 70, 0.07);
  border: 1px solid rgba(70, 204, 70, 0.18);
}

.mini-summary span {
  color: #46cc46;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mini-summary strong {
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 450;
}

.conversation-input {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: auto 12px 12px;
  padding: 9px 9px 9px 11px;
  background: #111113;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(70, 204, 70, 0);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.conversation-input:focus-within {
  border-color: rgba(70, 204, 70, 0.58);
  box-shadow: 0 0 0 2px rgba(70, 204, 70, 0.08);
}

.conversation-input textarea {
  width: 100%;
  min-height: 42px;
  max-height: 76px;
  padding: 2px 8px 2px 0;
  resize: none;
  color: #f4f4f5;
  background: transparent;
  border: 0;
  outline: 0;
  font: 11px/1.45 var(--sans);
}

.conversation-input textarea::placeholder {
  color: #66666f;
}

.conversation-input button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #09090b;
  background: #46cc46;
  border: 0;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

.conversation-input button:disabled {
  color: #71717a;
  background: #27272a;
  cursor: default;
}

.workspace-code {
  background: #101012;
}

.workspace-file-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workspace-file-tabs button {
  min-height: 34px;
  padding: 0 12px;
  color: #71717a;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 9px;
}

.workspace-file-tabs button.is-active {
  color: #46cc46;
  background: rgba(255, 255, 255, 0.03);
}

.workspace-code pre {
  margin: 0;
  padding: 19px 12px;
  color: #d4d4d8;
  font: 10px/1.8 var(--mono);
  white-space: pre-wrap;
}

.workspace-code code span {
  display: inline-block;
  width: 25px;
  color: #52525b;
  user-select: none;
}

.workspace-problems {
  gap: 10px;
  padding: 14px;
}

.workspace-problem {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.workspace-problem > i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  background: #f59e0b;
}

.workspace-problem div {
  display: grid;
  gap: 4px;
}

.workspace-problem strong {
  color: #f4f4f5;
  font-size: 10px;
  font-weight: 550;
}

.workspace-problem span,
.workspace-problems > p {
  color: #8b8b94;
  font-size: 9px;
  line-height: 1.5;
}

.workspace-problems > p {
  margin-top: 4px;
}

.board-canvas {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) 25px;
  min-width: 0;
  background: #242526;
}

.canvas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
  background: #161618;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.canvas-toolbar > div {
  display: flex;
  align-items: center;
  gap: 3px;
}

.canvas-toolbar button {
  min-height: 27px;
  padding: 0 8px;
  color: #a1a1aa;
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.canvas-toolbar button:hover {
  color: #f4f4f5;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.canvas-toolbar button.is-active {
  color: #46cc46;
  background: rgba(70, 204, 70, 0.1);
  border-color: rgba(70, 204, 70, 0.38);
}

.canvas-toolbar > span {
  overflow: hidden;
  color: #71717a;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: #242526;
  cursor: default;
  touch-action: none;
}

.board-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, black 8%, transparent 72%);
}

.mini-board-view {
  position: absolute;
  width: min(95%, 760px);
  height: min(92%, 590px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 220ms ease, transform 320ms ease;
}

.mini-board-view.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.mini-board-view [data-board-transform] {
  transform: translate(0, 0) scale(1);
  transform-origin: 390px 260px;
  transition: transform 160ms ease;
}

.board-stage.is-panning {
  cursor: grabbing;
}

.board-stage.is-pan-ready {
  cursor: grab;
}

.mini-board-edge {
  fill: #062513;
  stroke: #4b4b50;
  stroke-width: 2;
}

.mini-board-mask {
  fill: url("#mini-board-soldermask");
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1;
}

.mini-board-layer {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6;
  transition: opacity 180ms ease;
}

.mini-board-layer-top {
  stroke: #d78631;
  opacity: 0.88;
}

.mini-board-layer-bottom {
  stroke: #3d87c7;
  opacity: 0.58;
}

.mini-board-vias circle,
.part-pad {
  fill: #c79d54;
  stroke: #f5d898;
  stroke-width: 2;
}

.mini-board-vias circle {
  fill: #1c1c1f;
  stroke: #d4a955;
  stroke-width: 4;
}

.mini-board-silkscreen {
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.5;
  transition: opacity 180ms ease;
}

.mini-board-silkscreen text {
  fill: rgba(255, 255, 255, 0.65);
  stroke: none;
  font: 9px var(--mono);
  letter-spacing: 0.08em;
}

.mini-board-part {
  outline: none;
  cursor: pointer;
}

.mini-board-part .part-outline {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
}

.mini-board-part:hover .part-outline,
.mini-board-part:focus-visible .part-outline {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.45);
}

.mini-board-part.is-selected .part-outline {
  fill: rgba(70, 204, 70, 0.05);
  stroke: #46cc46;
}

.mini-board-part .part-body {
  fill: #111114;
  stroke: #6b6b72;
  stroke-width: 2;
}

.mini-board-part .part-metal {
  fill: #a4a4aa;
  stroke: #f0f0f2;
}

.mini-board-part .part-slot {
  fill: #242526;
  stroke: #66666d;
}

.mini-board-part .part-pins {
  fill: none;
  stroke: #d4a955;
  stroke-width: 8;
  stroke-dasharray: 4 8;
}

.mini-board-part text {
  fill: #e4e4e7;
  font: 11px var(--mono);
  letter-spacing: 0.08em;
}

.mini-board-part .mini-led {
  fill: #dd4545;
  stroke: #ff8b8b;
}

.workspace.has-bright-led .mini-board-part .mini-led {
  fill: #c8ff57;
  stroke: #efffcf;
  filter: drop-shadow(0 0 9px rgba(200, 255, 87, 0.82));
}

.mini-board-passives rect {
  fill: #d7c6a2;
  stroke: #6d6048;
  stroke-width: 1;
}

.mini-board-holes circle {
  fill: #242526;
  stroke: #c8a861;
  stroke-width: 7;
}

.mini-board-3d {
  display: grid;
  place-items: center;
}

.mini-board-3d img {
  width: min(94%, 680px);
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.42));
  transform: translateY(2%);
}

.board-tools,
.board-view-switch,
.board-side-switch {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(9, 9, 11, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(1.5);
}

.board-tools {
  top: 12px;
  right: 12px;
  flex-direction: column;
}

.board-view-switch {
  bottom: 12px;
  left: 12px;
}

.board-side-switch {
  bottom: 12px;
  left: 103px;
}

.board-tools button,
.board-view-switch button,
.board-side-switch button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  color: #d4d4d8;
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.board-tools button:hover,
.board-view-switch button:hover,
.board-side-switch button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

.board-view-switch button.is-active,
.board-side-switch button.is-active {
  color: #46cc46;
  background: rgba(70, 204, 70, 0.14);
  border-color: rgba(70, 204, 70, 0.52);
}

.board-view-switch > span {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  color: #5b5b63;
  font: 7px var(--mono);
  text-align: center;
  pointer-events: none;
}

.board-selection-label {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 135px);
  overflow: hidden;
  padding: 6px 8px;
  color: #b4b4bc;
  background: rgba(9, 9, 11, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: 8px var(--mono);
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.board-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-width: 0;
  padding: 0 9px;
  color: #a1a1aa;
  background: #111113;
  border-top: 1px solid #46cc46;
  font: 8px var(--mono);
  letter-spacing: 0.04em;
}

.board-footer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-footer span:nth-child(2) {
  text-align: center;
}

.board-footer span:last-child {
  text-align: right;
}

.board-footer i {
  color: #5f5f67;
  font-style: normal;
}

.board-footer b {
  color: #f59e0b;
  font-weight: 500;
}

.tool-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #18181b;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.board-summary-panel {
  margin: 8px 8px 0;
  background: rgba(24, 24, 27, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.board-summary-panel > button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  color: #f4f4f5;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.board-summary-panel > button:hover {
  background: rgba(255, 255, 255, 0.035);
}

.board-summary-panel > button span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.board-summary-panel > button strong {
  color: #46cc46;
  font: 700 9px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.board-summary-panel > button small {
  overflow: hidden;
  color: #71717a;
  font: 8px var(--mono);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.board-summary-panel > button b {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 400;
}

.board-summary-panel > div {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.board-summary-panel > div[hidden] {
  display: none;
}

.board-summary-panel p {
  color: #a1a1aa;
  font-size: 9px;
  line-height: 1.5;
}

.board-summary-panel dl {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.board-summary-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #71717a;
  font: 8px var(--mono);
  text-transform: uppercase;
}

.board-summary-panel dd {
  color: #d4d4d8;
  text-align: right;
}

.tool-panel-tabs {
  margin-top: 8px;
}

.tool-panel-tabs button {
  flex: 1;
  padding: 0 6px;
  font-size: 8px;
}

.tool-panel-view {
  flex: 1;
  min-height: 0;
  padding: 8px;
}

.tool-panel-view.is-active {
  display: block;
}

.selected-part {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
  padding: 10px;
  background: rgba(70, 204, 70, 0.06);
  border: 1px solid rgba(70, 204, 70, 0.22);
}

.selected-part span {
  color: #46cc46;
  font: 8px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.selected-part strong {
  color: #f4f4f5;
  font-size: 10px;
  font-weight: 550;
}

.selected-part small {
  color: #71717a;
  font: 8px var(--mono);
  text-transform: uppercase;
}

.component-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 7px 8px;
  color: #d4d4d8;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  cursor: pointer;
}

.component-row:hover,
.component-row.is-selected {
  background: rgba(255, 255, 255, 0.04);
}

.component-row.is-selected {
  box-shadow: inset 2px 0 #46cc46;
}

.component-row > i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #46cc46;
  background: #111113;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: 9px var(--mono);
  font-style: normal;
}

.component-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.component-row strong {
  overflow: hidden;
  color: #e4e4e7;
  font-size: 9px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-row small {
  overflow: hidden;
  color: #71717a;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-row > b {
  color: #71717a;
  font: 8px var(--mono);
}

.tool-panel-layers {
  display: grid;
  align-content: start;
  gap: 1px;
}

.tool-panel-layers label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #c7c7cc;
  font-size: 9px;
}

.tool-panel-layers label span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-panel-layers input {
  accent-color: #46cc46;
}

.layer-colour {
  width: 9px;
  height: 9px;
  background: #fff;
}

.layer-top { background: #d78631; }
.layer-bottom { background: #3d87c7; }
.layer-silk { background: #e4e4e7; }
.layer-mask { background: #165b31; }

.tool-panel-notes {
  display: grid;
  align-content: start;
  gap: 8px;
}

.tool-panel-notes article {
  padding: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.tool-panel-notes span {
  display: block;
  margin-bottom: 5px;
  color: #46cc46;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tool-panel-notes p {
  color: #a1a1aa;
  font-size: 9px;
  line-height: 1.5;
}

.tool-panel-stats {
  display: grid;
  gap: 5px;
  padding: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-panel-stats div {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #8b8b94;
  font: 8px var(--mono);
}

.tool-panel-stats i {
  flex: 1;
  min-width: 10px;
  margin: 0 6px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.16);
}

.tool-panel-stats strong {
  color: #d4d4d8;
  font-weight: 450;
  white-space: nowrap;
}

.tool-panel-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-top: 1px solid #46cc46;
  background: #111113;
}

.tool-panel-footer button {
  padding: 0;
  color: #d4d4d8;
  background: transparent;
  border: 0;
  font: 8px var(--mono);
  cursor: pointer;
}

.tool-panel-footer button:hover {
  color: #46cc46;
}

.workspace :focus-visible {
  outline: 1px solid #46cc46;
  outline-offset: 2px;
}

.how {
  color: var(--white);
  background: var(--ink);
}

.how-heading {
  text-align: center;
}

.how-heading h2 {
  max-width: 850px;
  margin: 0 auto;
}

.how-heading h2 em {
  color: var(--lime);
}

.how-experience {
  display: grid;
  grid-template-columns: minmax(285px, 0.72fr) minmax(0, 1.55fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  margin-top: 78px;
}

.how-chapter-copy {
  padding-top: 2px;
}

.how-chapters {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-chapters li {
  opacity: 0.38;
  transition: opacity 320ms ease;
}

.how-chapters li.is-active {
  opacity: 1;
}

.how-chapters h3 em {
  color: var(--lime);
  font-style: normal;
}

.how-chapters h3 {
  margin: 0 0 9px;
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.how-chapters p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.55;
}

.how-motion-shell {
  min-width: 0;
}

/* The stage and the composition inside it are both transparent — the
   workbench surface is painted once, on .how-motion-shell, so any slack
   around the render shows the same continuous surface instead of bars. */
.how-motion-stage {
  position: relative;
  aspect-ratio: 1440 / 820;
  min-height: 0;
  overflow: hidden;
}

.how-motion-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center start;
  padding: 40px;
  overflow: hidden;
  transition: opacity 180ms ease;
}

.how-motion-fallback-copy {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 62%;
}

.how-motion-fallback strong {
  color: var(--white);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.how-motion-stage.is-remotion-ready .how-motion-fallback {
  opacity: 0;
  pointer-events: none;
}

.how-remotion-host,
.how-remotion-player {
  position: absolute;
  inset: 0;
}

.how-remotion-host {
  z-index: 2;
  opacity: 0;
  transition: opacity 180ms ease;
}

.how-motion-stage.is-remotion-ready .how-remotion-host {
  opacity: 1;
}

.how-motion-stage.is-remotion-error .how-remotion-host {
  opacity: 0;
}

.how-remotion-player {
  overflow: hidden;
}

.how-remotion-error {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--white);
  background: #0d100c;
  font-family: var(--mono);
}

.how-remotion-error span {
  color: var(--lime);
}

.how-remotion-error small {
  color: rgba(251, 251, 248, 0.58);
  font-size: 14px;
}

.audience {
  background: var(--white);
}

.audience-heading {
  margin-bottom: 72px;
  text-align: center;
}

.audience-branch {
  position: relative;
}

.audience-origin {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  margin: 0 auto;
  padding: 11px 15px 11px 12px;
  color: var(--white);
  background: var(--green);
  border: 1px solid var(--green);
}

.audience-origin > span {
  width: 9px;
  height: 9px;
  background: var(--lime);
}

.audience-origin p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audience-origin::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 46px;
  background: var(--green);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}

.audience-paths {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 86px;
}

.audience-paths::before {
  position: absolute;
  top: -40px;
  right: 25%;
  left: 25%;
  height: 1px;
  background: var(--green);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.audience-path {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 540px;
  flex-direction: column;
  padding: 36px;
  border: 1px solid rgba(21, 23, 19, 0.34);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 440ms ease 620ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 620ms;
}

.audience-path:nth-child(2) {
  transition-delay: 740ms;
}

.audience-path::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 40px;
  background: var(--green);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}

.audience-path::after {
  position: absolute;
  top: -46px;
  left: calc(50% - 4px);
  width: 9px;
  height: 9px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 240ms ease 570ms, transform 360ms cubic-bezier(0.22, 1, 0.36, 1) 570ms;
}

.audience-branch.is-visible .audience-origin::after,
.audience-branch.is-visible .audience-path::before {
  transform: scaleY(1);
}

.audience-branch.is-visible .audience-paths::before {
  transform: scaleX(1);
}

.audience-branch.is-visible .audience-path {
  opacity: 1;
  transform: translateY(0);
}

.audience-branch.is-visible .audience-path::after {
  opacity: 1;
  transform: scale(1);
}

.audience-new {
  background: var(--paper);
}

.audience-pro {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.audience-path-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.audience-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--muted);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}

.audience-kicker {
  margin: 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-align: right;
  text-transform: uppercase;
}

.audience-copy h3 {
  max-width: 540px;
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 500;
  letter-spacing: -0.052em;
  line-height: 1.02;
}

.audience-copy > p:last-child {
  max-width: 540px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.audience-path blockquote {
  margin-top: auto;
  padding: 25px 26px;
  background: var(--white);
  border-left: 2px solid var(--green);
  font-family: var(--sans);
  font-size: 23px;
  font-style: italic;
  line-height: 1.25;
}

.audience-pro .audience-index {
  color: var(--lime);
  border-color: rgba(255, 255, 255, 0.2);
}

.audience-pro .audience-kicker {
  color: var(--lime);
}

.audience-pro .audience-copy > p:last-child {
  color: rgba(255, 255, 255, 0.63);
}

.audience-pro blockquote {
  background: var(--green);
  color: var(--white);
  border-color: var(--lime);
  font-family: var(--mono);
  font-size: 18px;
  font-style: normal;
  line-height: 1.6;
}

.offering {
  background: var(--white);
}

.offering-heading {
  margin-bottom: 72px;
  text-align: center;
}

.offering-heading h2 {
  max-width: 900px;
  margin: 0 auto;
}

.offering-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
  gap: 72px;
  align-items: center;
}

.offering-copy {
  text-align: center;
}

.offering-copy > p {
  max-width: 570px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.offering-inline {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: color 240ms ease, border-color 240ms ease;
}

.offering-inline.is-active {
  color: var(--green);
  border-color: var(--green);
}

.offering-carousel {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(21, 23, 19, 0.38);
}

.offering-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper-deep);
  border-bottom: 1px solid rgba(21, 23, 19, 0.38);
}

.offering-tabs button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 12px 16px;
  text-align: center;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(21, 23, 19, 0.38);
  cursor: pointer;
  transition: color 260ms ease, background-color 260ms ease;
}

.offering-tabs button:last-child {
  border-right: 0;
}

.offering-tabs button strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.offering-tabs button.is-active {
  color: var(--white);
  background: var(--ink);
  box-shadow: inset 0 3px 0 var(--lime);
}

.offering-panels {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: var(--paper);
}

.offering-panels figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 25px;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 460ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  /* The preview images ship baked-in white backgrounds; multiply folds that
     white into the paper panel. Must live on the figure, not the img — the
     figure's transform creates a stacking context that isolates the img. */
  mix-blend-mode: multiply;
}

.offering-panels figure.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.offering-panels img {
  position: absolute;
  inset: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  object-fit: contain;
  transform: none;
}

.offering-file {
  display: flex;
  align-items: center;
  min-height: 43px;
  padding: 0 13px;
  color: var(--muted);
  background: var(--paper-deep);
  border-top: 1px solid rgba(21, 23, 19, 0.38);
}

.offering-file code {
  font-family: var(--mono);
  font-size: 13px;
}

.examples {
  background: var(--lime-soft);
}

.examples-heading {
  margin-bottom: 80px;
  text-align: center;
}

.example-list {
  border-bottom: 1px solid var(--ink);
}

.example-row {
  display: grid;
  grid-template-columns: 0.55fr 0.9fr 1.25fr auto;
  gap: 30px;
  align-items: center;
  width: 100%;
  min-height: 116px;
  padding: 20px 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  cursor: pointer;
}

.example-row span {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.example-row h3 {
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.example-row p {
  max-width: 480px;
  color: #4c5b40;
  font-size: 14px;
}

.example-row i,
.note-row i {
  font-size: 22px;
  font-style: normal;
  transition: transform 180ms ease;
}

.example-row:hover i,
.note-row:hover i {
  transform: translate(3px, -3px);
}

.notes {
  background: var(--white);
}

.notes-heading,
.faq-heading {
  margin-bottom: 80px;
  text-align: center;
}

.note-list {
  border-bottom: 1px solid var(--line);
}

.note-row {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr auto;
  gap: 30px;
  align-items: center;
  min-height: 102px;
  border-top: 1px solid var(--line);
}

.note-row span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.note-row h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.faq {
  background: var(--paper);
}

.faq-list {
  width: min(940px, var(--page));
  margin-right: auto;
  margin-left: auto;
  border-bottom: 1px solid var(--ink);
}

.faq-list details {
  border-top: 1px solid var(--ink);
}

.faq-list summary {
  position: relative;
  min-height: 84px;
  padding: 26px 55px 23px 0;
  list-style: none;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.025em;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 39px;
  right: 5px;
  width: 17px;
  height: 1px;
  background: var(--ink);
  transition: transform 180ms ease;
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::after {
  transform: rotate(0deg);
}

.faq-list details p {
  max-width: 700px;
  padding: 0 55px 28px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.final-cta {
  position: relative;
  display: grid;
  min-height: 820px;
  padding: 110px 4.5vw;
  overflow: hidden;
  background: var(--lime);
}

.final-art {
  position: absolute;
  inset: 0;
}

.final-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--lime) 0%, rgba(200, 255, 87, 0.92) 42%, rgba(200, 255, 87, 0.08) 84%);
}

.final-art img {
  position: absolute;
  top: 50%;
  right: -7%;
  width: min(950px, 70vw);
  opacity: 0.75;
  mix-blend-mode: multiply;
  transform: translateY(-50%) rotate(-5deg);
}

.final-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(100%, 1240px);
  margin: 0 auto;
}

.final-copy > p {
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

.final-copy h2 {
  max-width: 800px;
  font-size: clamp(58px, 6.3vw, 92px);
  font-weight: 500;
  letter-spacing: -0.068em;
  line-height: 0.92;
}

.final-actions {
  display: flex;
  gap: 12px;
  margin-top: 42px;
}

.final-actions a {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-width: 185px;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  transition: color 180ms ease, background-color 180ms ease;
}

.final-actions a:first-child {
  color: var(--white);
  background: var(--ink);
}

.final-actions a:hover {
  color: var(--ink);
  background: var(--white);
}

.final-copy small {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.site-footer {
  padding: 70px 4.5vw 28px;
  color: rgba(255, 255, 255, 0.72);
  background: var(--ink);
}

.footer-main {
  display: grid;
  grid-template-columns: 0.55fr 1fr 0.7fr;
  gap: 60px;
  min-height: 180px;
}

.footer-brand {
  align-self: start;
  color: var(--white);
}

.footer-brand img {
  width: 30px;
  height: 30px;
}

.footer-main > p {
  max-width: 430px;
  font-size: 23px;
  letter-spacing: -0.035em;
  line-height: 1.35;
}

.footer-links {
  display: grid;
  align-content: start;
  justify-content: end;
  gap: 7px;
  font-size: 14px;
}

.footer-links a:hover,
.footer-people a:hover,
.footer-bottom a:hover {
  color: var(--white);
}

.footer-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 25px 0;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  font-size: 13px;
}

.footer-people span {
  margin-right: auto;
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 24px;
  color: rgba(255, 255, 255, 0.37);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.footer-bottom div {
  display: flex;
  gap: 22px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-socials a {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: rgba(255, 255, 255, 0.56);
  transition: color 180ms ease, transform 180ms ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--lime);
  transform: translateY(-2px);
}

.footer-socials a:focus-visible {
  outline: 1px solid var(--lime);
  outline-offset: 4px;
}

.footer-socials svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-socials svg[fill="none"] {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.footer-socials .footer-social-dot {
  fill: currentColor;
  stroke: none;
}

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  :root {
    --page: min(calc(100% - 56px), 1240px);
  }

  .site-header {
    grid-template-columns: 1fr 1fr;
    min-height: 72px;
    padding: 0 28px;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    inset: 72px 0 0;
  }

  .hero {
    padding-right: 28px;
    padding-left: 28px;
  }

  .section {
    padding: 120px 0;
  }

  .workspace-body {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  .how-experience {
    grid-template-columns: minmax(255px, 0.8fr) minmax(0, 1.2fr);
    gap: 40px;
  }

  .how-chapters {
    gap: 23px;
  }

  .how-chapters p {
    font-size: 15px;
  }

  .audience-path {
    min-height: 520px;
    padding: 32px;
  }

  .offering-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .offering-copy > p {
    max-width: 690px;
  }

  .offering-carousel {
    width: min(100%, 720px);
  }

  .faq-list {
    width: var(--page);
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 900px;
  }

  .hero-art img {
    width: 1040px;
    opacity: 0.18;
  }

  .credibility {
    display: grid;
    gap: 8px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .credibility p:last-child {
    text-align: left;
  }

  .section-intro > p:last-child {
    max-width: 620px;
  }

  .workspace {
    margin-top: 60px;
  }

  .how-experience {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 60px;
  }

  .how-motion-shell {
    grid-row: 1;
  }

  .how-motion-stage {
    aspect-ratio: 720 / 1120;
    /* Cap via width so the box keeps the composition's exact ratio —
       a max-height clamp would force the player to letterbox. */
    max-width: calc(680px * 720 / 1120);
    margin-inline: auto;
  }

  .how-chapter-copy {
    grid-row: 2;
  }

  .how-chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }

  .workspace-body {
    grid-template-columns: 1fr;
  }

  .conversation {
    min-height: 470px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .board-stage {
    min-height: 450px;
  }

  .audience-heading,
  .offering-heading,
  .examples-heading,
  .notes-heading,
  .faq-heading {
    margin-bottom: 60px;
  }

  .audience-origin {
    margin-left: 0;
  }

  .audience-origin::after {
    left: 16px;
    height: 50px;
  }

  .audience-paths {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 24px;
    margin-top: 50px;
    padding-left: 34px;
  }

  .audience-paths::before {
    top: -50px;
    right: auto;
    bottom: calc(50% - 46px);
    left: 16px;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }

  .audience-path::before {
    top: 34px;
    right: 100%;
    bottom: auto;
    left: auto;
    width: 18px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .audience-path::after {
    top: 30px;
    left: -22px;
  }

  .audience-branch.is-visible .audience-paths::before {
    transform: scaleY(1);
  }

  .audience-branch.is-visible .audience-path::before {
    transform: scaleX(1);
  }

  .example-row {
    grid-template-columns: 0.45fr 0.8fr 1fr auto;
  }

  .final-art img {
    right: -30%;
    width: 1100px;
    opacity: 0.42;
  }

  .final-art::after {
    background: linear-gradient(90deg, var(--lime) 0%, rgba(200, 255, 87, 0.88) 62%, rgba(200, 255, 87, 0.18) 100%);
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-main > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  :root {
    --page: calc(100% - 40px);
  }

  html {
    scroll-padding-top: 68px;
  }

  .site-header {
    min-height: 66px;
    padding: 0 20px;
  }

  .brand img {
    width: 24px;
    height: 24px;
  }

  .brand {
    gap: 8px;
    font-size: 18px;
  }

  .header-actions {
    gap: 10px;
  }

  .sign-in-link {
    display: none;
  }

  .header-cta {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }

  .menu-toggle {
    width: 36px;
  }

  .mobile-menu {
    inset: 66px 0 0;
    padding: 24px 20px;
  }

  .hero {
    min-height: 820px;
    padding: 112px 20px 82px;
  }

  .hero::after {
    background: radial-gradient(circle at 50% 44%, rgba(243, 242, 236, 0.32) 0, rgba(243, 242, 236, 0.82) 53%, var(--paper) 86%);
  }

  .hero-art img {
    top: 46%;
    width: 850px;
    opacity: 0.17;
  }

  .hero-orbit-one {
    width: 160vw;
    height: 160vw;
  }

  .hero-orbit-two {
    width: 112vw;
    height: 112vw;
  }

  .hero-kicker {
    margin-bottom: 27px;
    font-size: 10px;
  }

  .hero h1 {
    font-size: clamp(48px, 14.4vw, 60px);
    line-height: 0.93;
  }

  .hero-subtitle {
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.48;
  }

  .idea-bar {
    min-height: 60px;
    margin-top: 28px;
    padding: 4px;
  }

  .idea-bar input {
    padding: 0 13px;
    font-size: 13px;
  }

  .idea-typing-preview {
    padding: 0 13px;
    font-size: 13px;
  }

  .idea-bar button {
    min-width: 104px;
    padding: 0 12px;
    font-size: 13px;
  }

  .idea-examples {
    margin-top: 12px;
    font-size: 11px;
  }

  .hero-note {
    align-items: flex-start;
    margin-top: 20px;
    padding: 0 25px;
    font-size: 9px;
    line-height: 1.5;
  }

  .hero-note i {
    flex: 0 0 auto;
    margin-top: 4px;
  }

  .hero-scroll {
    bottom: 20px;
    white-space: nowrap;
  }

  .credibility {
    padding: 20px;
    font-size: 11px;
  }

  .section {
    padding: 92px 0;
  }

  .section-intro h2,
  .how-heading h2,
  .audience-heading h2,
  .offering-heading h2,
  .examples-heading h2,
  .notes-heading h2,
  .faq-heading h2 {
    font-size: 42px;
    line-height: 1;
  }

  .section-intro > p:last-child {
    font-size: 16px;
  }

  .workspace {
    width: calc(100% - 20px);
    margin-top: 48px;
    border-radius: 12px;
  }

  .workspace-topbar {
    grid-template-columns: 0.55fr 1.45fr;
    padding: 0 12px;
  }

  .workspace-topbar > span {
    display: none;
  }

  .workspace-actions {
    gap: 3px;
  }

  .conversation {
    min-height: 450px;
    padding: 18px;
  }

  .board-stage {
    min-height: 330px;
  }

  .board-image {
    width: 94%;
  }

  .canvas-toolbar {
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
    font-size: 10px;
  }

  .board-callout {
    padding: 4px 6px;
    font-size: 7px;
  }

  .callout-power { top: 18%; left: 5%; }
  .callout-sensor { top: 14%; right: 6%; }
  .callout-controller { right: 5%; bottom: 17%; }

  .board-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .board-summary button {
    grid-column: 1 / -1;
  }

  .how-experience {
    gap: 42px;
    margin-top: 48px;
  }

  .how-motion-stage {
    width: min(100%, 390px);
    max-height: none;
    margin: 0 auto;
    border-radius: 0;
  }

  .how-chapters {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .how-chapters li,
  .how-chapters li.is-active {
    opacity: 1;
    transform: none;
  }

  .how-chapters h3 {
    font-size: 22px;
  }

  .how-chapters p {
    font-size: 15px;
  }

  .audience-heading,
  .offering-heading,
  .examples-heading,
  .notes-heading,
  .faq-heading {
    margin-bottom: 46px;
  }

  .audience-paths {
    padding-left: 28px;
  }

  .audience-paths::before {
    left: 13px;
  }

  .audience-origin::after {
    left: 13px;
  }

  .audience-path {
    min-height: 0;
    padding: 26px;
  }

  .audience-path::before {
    width: 15px;
  }

  .audience-path::after {
    left: -19px;
  }

  .audience-path-heading {
    margin-bottom: 36px;
  }

  .audience-path blockquote {
    margin-top: 38px;
    padding: 23px;
    font-size: 23px;
  }

  .audience-pro blockquote {
    font-size: 13px;
  }

  .offering-layout {
    gap: 44px;
  }

  .offering-copy > p {
    font-size: 16px;
    line-height: 1.65;
  }

  .offering-tabs button {
    min-height: 76px;
    padding: 9px;
  }

  .offering-tabs button strong {
    font-size: 14px;
  }

  .offering-panels {
    min-height: 300px;
  }

  .offering-panels figure {
    padding: 14px;
  }

  .audience-copy h3 {
    font-size: 34px;
  }

  .example-row {
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    padding: 26px 0;
  }

  .example-row span,
  .example-row p {
    grid-column: 1;
  }

  .example-row h3 {
    grid-column: 1;
    font-size: 27px;
  }

  .example-row i {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .note-row {
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    min-height: 122px;
    padding: 22px 0;
  }

  .note-row h3 {
    grid-column: 1;
    font-size: 21px;
  }

  .note-row i {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .faq-list summary {
    min-height: 75px;
    padding: 23px 45px 20px 0;
    font-size: 18px;
  }

  .faq-list summary::before,
  .faq-list summary::after {
    top: 34px;
  }

  .faq-list details p {
    padding-right: 35px;
    font-size: 14px;
  }

  .final-cta {
    min-height: 720px;
    padding: 90px 20px;
  }

  .final-art img {
    right: -125%;
    width: 1100px;
    max-width: none;
    opacity: 0.34;
  }

  .final-art::after {
    background: linear-gradient(90deg, var(--lime) 0%, rgba(200, 255, 87, 0.92) 75%, rgba(200, 255, 87, 0.28) 100%);
  }

  .final-copy h2 {
    font-size: 49px;
    line-height: 0.95;
  }

  .final-actions {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 34px;
  }

  .final-actions a {
    width: min(100%, 310px);
  }

  .site-footer {
    padding: 58px 20px 24px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 48px;
  }

  .footer-main > p {
    grid-column: auto;
    grid-row: auto;
    font-size: 21px;
  }

  .footer-links {
    justify-content: start;
  }

  .footer-people {
    display: grid;
    gap: 9px;
  }

  .footer-people span {
    margin: 0 0 7px;
  }

  .footer-bottom {
    display: grid;
  }
}

.workspace[data-board-side="top"] .mini-board-layer-top {
  opacity: 0.9;
}

.workspace[data-board-side="top"] .mini-board-layer-bottom {
  opacity: 0.2;
}

.workspace[data-board-side="bottom"] .mini-board-layer-top {
  opacity: 0.14;
}

.workspace[data-board-side="bottom"] .mini-board-layer-bottom {
  opacity: 0.86;
}

@media (max-width: 1100px) and (min-width: 821px) {
  .workspace-body {
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.45fr);
    min-height: 0;
  }

  .conversation,
  .board-canvas {
    min-height: 590px;
  }

  .tool-panel {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(230px, 0.78fr) minmax(300px, 1.25fr) minmax(190px, 0.68fr);
    grid-template-rows: 42px minmax(230px, auto) 25px;
    min-height: 300px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }

  .board-summary-panel {
    grid-row: 1 / 4;
    margin: 8px;
  }

  .tool-panel-tabs {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .tool-panel-view {
    grid-column: 2;
    grid-row: 2;
  }

  .tool-panel-stats {
    grid-column: 3;
    grid-row: 1 / 3;
    align-content: center;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .tool-panel-footer {
    grid-column: 2 / 4;
    grid-row: 3;
  }
}

@media (max-width: 820px) {
  .workspace-body {
    min-height: 0;
  }

  .workspace-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .conversation {
    min-height: 480px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .board-canvas {
    min-height: 570px;
  }

  .tool-panel {
    min-height: 560px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }

  .mini-board-view {
    width: min(98%, 700px);
    height: min(92%, 520px);
  }

  .board-summary-panel > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.65fr);
    gap: 14px;
    align-items: start;
  }

  .board-summary-panel dl {
    margin-top: 0;
  }

  .tool-panel-view {
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .workspace {
    width: calc(100% - 20px);
    border-radius: 8px;
  }

  .workspace-topbar {
    min-height: 48px;
  }

  .workspace-brand span {
    font-size: 11px;
  }

  .workspace-status {
    display: none;
  }

  .workspace-actions a {
    min-height: 29px;
    padding: 0 8px;
    font-size: 10px;
  }

  .conversation {
    min-height: 455px;
    padding: 0;
  }

  .workspace-tabs button {
    flex: 1;
    padding: 0 7px;
  }

  .conversation-stream {
    padding: 16px 13px;
  }

  .conversation-input {
    margin: auto 9px 9px;
  }

  .board-canvas {
    min-height: 485px;
  }

  .canvas-toolbar {
    padding: 0 7px;
  }

  .canvas-toolbar button {
    padding: 0 5px;
    font-size: 7px;
  }

  .canvas-toolbar > span {
    display: none;
  }

  .board-stage {
    min-height: 420px;
  }

  .mini-board-view {
    width: 112%;
    height: 98%;
  }

  .mini-board-3d img {
    width: 108%;
    max-width: none;
  }

  .board-selection-label {
    top: 9px;
    left: 9px;
    max-width: calc(100% - 105px);
    font-size: 7px;
  }

  .board-tools {
    top: 8px;
    right: 8px;
  }

  .board-view-switch {
    bottom: 8px;
    left: 8px;
  }

  .board-side-switch {
    bottom: 8px;
    left: 99px;
  }

  .board-tools button,
  .board-view-switch button,
  .board-side-switch button {
    min-width: 30px;
    height: 30px;
  }

  .board-footer {
    grid-template-columns: 1fr auto;
  }

  .board-footer span:nth-child(2) {
    display: none;
  }

  .tool-panel {
    min-height: 520px;
  }

  .board-summary-panel > div {
    display: block;
  }

  .board-summary-panel dl {
    margin-top: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .how-chapters li,
  .how-chapters li.is-active {
    opacity: 1;
    transform: none;
  }

}

/*
 * Industrial graphic system
 *
 * The hero stays conversational, then the page tightens into a sharper,
 * hardware-led system: hard rules, oversized type, PCB-grid fields and
 * functional lime accents.
 */

.hero {
  border-bottom: 1px solid var(--ink);
}

.hero h1 em {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.08em;
}

.idea-bar {
  border-color: rgba(21, 23, 19, 0.58);
  border-radius: 0;

  backdrop-filter: none;
}

.idea-bar button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.idea-bar button:hover {
  transform: none;
}

.idea-examples {
  margin-top: 19px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.hero-scroll {
  font-family: var(--mono);
}

.credibility {
  min-height: 72px;
  padding: 0 4.5vw;
  align-items: stretch;
  color: var(--ink);
  background: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.045em;
  line-height: 1.35;
  text-transform: uppercase;
}

.credibility p {
  display: flex;
  align-items: center;
  min-height: 71px;
}

.credibility p:first-child {
  padding-right: 42px;
}

.credibility p:last-child {
  max-width: 720px;
  padding-left: 42px;
  border-left: 1px solid var(--ink);
}

.section-intro h2,
.how-heading h2,
.audience-heading h2,
.offering-heading h2,
.examples-heading h2,
.notes-heading h2,
.faq-heading h2 {
  font-size: clamp(58px, 6.2vw, 92px);
  font-weight: 600;
  letter-spacing: -0.072em;
  line-height: 0.9;
}

.product {
  position: relative;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    var(--content-off-white);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--ink);
}

.product > .section-intro {
  position: relative;
  width: 100%;
  padding: 148px max(8vw, calc((100vw - 1240px) / 2)) 92px;
  background: transparent;
}

.product .section-intro > * {
  position: relative;
  z-index: 1;
}

.product .section-intro h2 {
  max-width: 1060px;
}

.product .section-intro > p:last-child {
  max-width: 760px;
  color: #474c44;
}

.product > .workspace {
  position: relative;
  width: min(1500px, calc(100% - 8vw));
  margin: 64px auto 120px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 0;

}

.product > .workspace::before {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--lime);
  content: "";
  pointer-events: none;
}

.product > .product-demo-root {
  position: relative;
  width: min(1500px, calc(100% - 8vw));
  min-height: 610px;
  margin: 64px auto 120px;
  overflow: hidden;
  background: #09090b;
  border: 2px solid var(--ink);

}

.product > .product-demo-root:empty::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.38);
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #242526;
  background-size: 18px 18px;
  content: "Loading workspace";
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product > .workspace[hidden] {
  display: none !important;
}

.product > .product-demo-root::before {
  position: absolute;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--lime);
  content: "";
  pointer-events: none;
}

.product-demo-fallback {
  display: grid;
  min-height: 610px;
  place-items: center;
  color: #71717a;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #242526;
  background-size: 18px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product > .product-film {
  position: relative;
  width: min(1500px, calc(100% - 8vw));
  aspect-ratio: 1880 / 1080;
  margin: 24px auto 120px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(rgba(200, 255, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 87, 0.035) 1px, transparent 1px),
    #171916;
  background-size: 8px 8px;
  border: 2px solid var(--ink);

}

.product-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Inert, Notion-style embed: no click/scrub/context-menu/drag surface. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.workspace-topbar {
  min-height: 58px;
  padding: 0 18px;
  background: #0d0e0d;
  border-bottom-color: rgba(207, 246, 100, 0.42);
}

.workspace-actions a,
.conversation-input,
.conversation-input button,
.mini-message p {
  border-radius: 0;
}

.workspace-actions a {
  min-height: 34px;
  padding: 0 13px;
  color: #f7f7f2;
  background: transparent;
  border-color: #46cc46;
  font-family: var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.workspace-actions a:hover {
  color: #09090b;
  background: #46cc46;
}

.workspace-tabs button,
.canvas-toolbar button,
.board-tools button,
.board-view-switch button,
.board-side-switch button,
.tool-panel-footer button {
  font-family: var(--mono);
}

.how {
  position: relative;
  padding: 150px 0 138px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    var(--ink);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--lime);
}

.how > * {
  position: relative;
  z-index: 1;
}

.how-heading h2 {
  max-width: 1120px;
}

.how-heading h2 em {
  color: var(--lime);
  font-style: normal;
}

.how-experience {
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.45fr);
  gap: 0;
  align-items: stretch;
  margin-top: 94px;
  border: 1px solid rgba(207, 246, 100, 0.36);
  background: rgba(8, 10, 8, 0.72);
}

.how-chapter-copy {
  padding: 0;
  border-right: 1px solid rgba(207, 246, 100, 0.36);
}

.how-chapters {
  height: 100%;
  gap: 0;
}

.how-chapters li {
  position: relative;
  display: flex;
  min-height: 25%;
  align-items: center;
  padding: 29px 30px 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.52;
  transition: color 300ms ease, background-color 300ms ease, opacity 300ms ease;
}

.how-chapters li:last-child {
  border-bottom: 0;
}

.how-chapters li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--lime);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.how-chapters li.is-active {
  background: rgba(207, 246, 100, 0.07);
  opacity: 1;
}

.how-chapters li.is-active::before {
  transform: scaleY(1);
}

.how-chapters h3 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 600;
  line-height: 0.98;
}

.how-chapters p {
  color: rgba(251, 251, 248, 0.62);
  font-size: 14px;
  line-height: 1.48;
}

.how-motion-shell {
  position: relative;
  display: grid;
  min-width: 0;
  /* The one painted surface behind the animation. The composition and the
     stage are transparent, so wherever the render ends the same surface
     continues — the video reads as filling the whole cell. */
  background:
    linear-gradient(rgba(200, 255, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 87, 0.035) 1px, transparent 1px),
    #0d100c;
  background-size: 8px 8px;
}

/* Viewfinder brackets frame the full cell (they used to be drawn inside the
   composition, where they revealed the render's true edges). */
.how-motion-shell::before,
.how-motion-shell::after {
  position: absolute;
  z-index: 1;
  width: 58px;
  height: 58px;
  content: "";
  pointer-events: none;
}

.how-motion-shell::before {
  top: 34px;
  left: 34px;
  border-top: 2px solid rgba(200, 255, 87, 0.68);
  border-left: 2px solid rgba(200, 255, 87, 0.68);
}

.how-motion-shell::after {
  right: 34px;
  bottom: 34px;
  border-right: 2px solid rgba(200, 255, 87, 0.68);
  border-bottom: 2px solid rgba(200, 255, 87, 0.68);
}

.how-motion-stage {
  align-self: center;
  width: 100%;
}

.audience {
  position: relative;
  padding: 0 0 136px;
  overflow: hidden;
  background:
    linear-gradient(rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--ink);
}

.audience-heading {
  width: 100%;
  margin: 0 0 82px;
  padding: 148px max(5vw, calc((100vw - 1240px) / 2)) 90px;
  background: transparent;
  border-bottom: 0;
}

.audience-branch {
  width: min(1440px, calc(100% - 8vw));
  border: 1px solid var(--ink);

}

.audience-origin {
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 0 22px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--ink);
}

.audience-origin::before {
  width: 38%;
  height: 8px;
  background: var(--green);
  content: "";
}

.audience-origin > span,
.audience-origin::after,
.audience-paths::before,
.audience-path::before,
.audience-path::after {
  display: none;
}

.audience-origin p {
  margin-left: auto;
  color: var(--green);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.audience-paths {
  gap: 0;
  margin-top: 0;
}

.audience-path {
  min-height: 590px;
  padding: 42px 44px;
  border: 0;
  opacity: 1;
  transform: none;
  transition: background-color 300ms ease, color 300ms ease;
}

.audience-path + .audience-path {
  border-left: 1px solid var(--ink);
}

.audience-new {
  background: var(--lime-soft);
}

.audience-new:hover {
  background: var(--lime);
}

.audience-pro {
  background:
    linear-gradient(rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    var(--ink);
  background-size: 8px 8px;
}

.audience-path-heading {
  align-items: flex-start;
  margin-bottom: 70px;
}

.audience-index {
  display: block;
  width: auto;
  height: auto;
  color: var(--green);
  border: 0;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.08em;
  line-height: 0.75;
}

.audience-kicker {
  max-width: 180px;
  padding-top: 2px;
  color: var(--green);
  font-size: 12px;
  line-height: 1.2;
}

.audience-copy h3 {
  font-size: clamp(38px, 3.5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.audience-copy > p:last-child {
  margin-top: 28px;
  color: #3f493b;
  font-size: 17px;
}

.audience-path blockquote {
  padding: 14px 0 0;
  color: var(--white);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.52);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.55;
}

.audience-new blockquote {
  color: var(--ink);
  border-color: rgba(21, 23, 19, 0.42);
}

.audience-pro .audience-index,
.audience-pro .audience-kicker {
  color: var(--lime);
}

.audience-pro .audience-copy > p:last-child {
  color: rgba(251, 251, 248, 0.64);
}

.audience-pro blockquote {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.52);
  font-size: 16px;
  line-height: 1.55;
}

.audience-import-ribbon {
  position: absolute;
  z-index: 2;
  right: -46px;
  bottom: -70px;
  display: flex;
  width: 154px;
  aspect-ratio: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 22px;
  color: var(--ink);
  background: var(--lime);
  border: 1px solid var(--white);
  border-radius: 50%;
  font-family: var(--mono);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(4deg);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.audience-import-ribbon strong {
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: 0.025em;
}

.audience-import-ribbon span {
  max-width: 104px;
  padding-top: 8px;
  border-top: 1px solid rgba(21, 23, 19, 0.42);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.055em;
}

.audience-pro:hover .audience-import-ribbon {
  transform: rotate(0deg) scale(1.035);
}

.offering {
  position: relative;
  padding: 0 0 142px;
  overflow: hidden;
  background:
    linear-gradient(rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--ink);
}

.offering-heading {
  width: 100%;
  margin: 0 0 88px;
  padding: 148px max(5vw, calc((100vw - 1240px) / 2)) 90px;
  color: var(--ink);
  background: transparent;
  border-bottom: 0;
}

.offering-heading h2 {
  max-width: 1120px;
}

.offering-layout {
  grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.28fr);
  gap: 0;
  width: min(1440px, calc(100% - 8vw));
  align-items: stretch;
  border: 1px solid var(--ink);

}

.offering-copy {
  display: grid;
  align-items: center;
  padding: 58px 50px;
  text-align: left;
  background: var(--lime);
  border-right: 1px solid var(--ink);
}

.offering-copy > p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.35;
  text-align: left;
}

.offering-inline {
  color: var(--ink);
  border-bottom-color: rgba(21, 23, 19, 0.42);
}

.offering-inline.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  box-shadow: inset 0 -0.45em 0 rgba(251, 251, 248, 0.72);
}

.offering-carousel {
  width: 100%;
  border: 0;
  background: var(--paper);
}

.offering-tabs {
  background: var(--paper);
  border-bottom-color: var(--ink);
}

.offering-tabs button {
  min-height: 84px;
  border-right-color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
}

.offering-tabs button.is-active {
  color: var(--ink);
  background: var(--lime-soft);
  box-shadow: inset 0 6px 0 var(--green);
}

.offering-tabs button strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.offering-panels {
  min-height: 510px;
}

.offering-panels figure {
  padding: 34px;
}

.offering-panels img {
  inset: 34px;
  width: calc(100% - 68px);
  height: calc(100% - 68px);
}

.offering-file {
  min-height: 52px;
  color: var(--ink);
  background: var(--paper);
  border-top-color: var(--ink);
}

.offering-file::before {
  width: 10px;
  height: 10px;
  margin-right: 11px;
  background: var(--green);
  content: "";
}

.community-showcase {
  position: relative;
  padding: 118px 0 132px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    var(--community-canvas);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--lime);
}

.community-showcase-inner {
  width: min(1440px, calc(100% - 8vw));
  margin: 0 auto;
}

.community-showcase h2 {
  max-width: 1060px;
  margin: 0 auto;
  color: var(--white);
  font-size: clamp(54px, 6.2vw, 92px);
  font-weight: 600;
  letter-spacing: -0.072em;
  line-height: 0.9;
  text-align: center;
  text-wrap: balance;
}

.community-showcase h2 span {
  color: var(--lime);
}

.community-showcase-intro {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
}

.community-showcase-media {
  position: relative;
  margin: 78px 0 0;
  overflow: hidden;
  background: var(--community-canvas);
}

/* Fade the bottom edge of the video into the section canvas. */
.community-showcase-media::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(26, 28, 26, 0) 0%, var(--community-canvas) 100%);
  content: "";
  pointer-events: none;
}

.community-showcase-media video {
  display: block;
  width: 100%;
  height: auto;
}

.community-showcase-board {
  position: relative;
  display: flex;
  min-height: clamp(320px, 26vw, 420px);
  margin: 0;
}

.community-board-poster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 420px);
  height: auto;
  opacity: 0.72;
  transform: translate(-50%, -50%);
  transition: opacity 320ms ease;
}

.community-showcase-board.is-board-ready .community-board-poster {
  opacity: 0;
}

.community-board {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  outline-offset: 6px;
}

.examples {
  position: relative;
  padding: 142px 0 150px;
  overflow: hidden;
  background:
    linear-gradient(rgba(21, 23, 19, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.05) 1px, transparent 1px),
    var(--lime);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--ink);
}

.examples::before {
  position: absolute;
  top: 0;
  left: clamp(18px, 3vw, 52px);
  width: 1px;
  height: 100%;
  background: var(--ink);
  content: "";
}

.examples-heading {
  margin-bottom: 92px;
}

.example-list {
  width: min(1440px, calc(100% - 8vw));
  border-bottom-color: var(--ink);
}

.example-row {
  grid-template-columns: 0.46fr 0.92fr 1.15fr auto;
  min-height: 144px;
  padding: 24px 28px;
  border-top: 1px solid var(--ink);
  transition: color 240ms ease, background-color 240ms ease, padding 240ms ease;
}

.example-row span {
  font-size: 11px;
  letter-spacing: 0.06em;
}

.example-row h3 {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.example-row p {
  color: #33402e;
  font-size: 16px;
  transition: color 240ms ease;
}

.example-row:hover,
.example-row:focus-visible {
  padding-left: 42px;
  color: var(--lime);
  background: var(--ink);
}

.example-row:hover p,
.example-row:focus-visible p {
  color: rgba(251, 251, 248, 0.65);
}

.notes {
  position: relative;
  padding: 142px 0 150px;
  background:
    linear-gradient(rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.035) 1px, transparent 1px),
    var(--content-off-white);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--ink);
}

.notes-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 88px;
}

.note-list {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 8vw));
  background: transparent;
  border-bottom: 0;
}

.note-row {
  grid-template-columns: 0.48fr 1.52fr auto;
  min-height: 126px;
  padding: 20px 26px;
  background: transparent;
  border-top: 0;
  transition: color 220ms ease, background-color 220ms ease;
}

.note-row + .note-row {
  border-top: 1px solid rgba(21, 23, 19, 0.22);
}

.note-row span {
  color: var(--green);
  font-size: 11px;
  letter-spacing: 0.055em;
}

.note-row h3 {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.note-row:hover,
.note-row:focus-visible {
  color: var(--ink);
  background: var(--lime);
}

.note-row:hover span,
.note-row:focus-visible span {
  color: var(--green);
}

.faq {
  position: relative;
  padding: 142px 0 150px;
  color: var(--white);
  background:
    linear-gradient(rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    var(--ink);
  background-size: 8px 8px;
  border-bottom: 1px solid var(--lime);
}

.faq-heading {
  margin-bottom: 88px;
}

.faq-heading h2 {
  color: var(--lime);
}

.faq-list {
  width: min(1040px, calc(100% - 8vw));
  border-bottom-color: rgba(207, 246, 100, 0.58);
}

.faq-list details {
  border-top-color: rgba(207, 246, 100, 0.58);
}

.faq-list summary {
  min-height: 94px;
  padding: 31px 68px 27px 0;
  font-size: 23px;
  font-weight: 550;
}

.faq-list summary::before,
.faq-list summary::after {
  top: 46px;
  right: 8px;
  width: 21px;
  background: var(--lime);
}

.faq-list summary > span {
  display: inline-block;
  transition: color 240ms ease;
}

.faq-list summary::before,
.faq-list summary::after {
  transform-origin: center;
  transition:
    background-color 220ms ease,
    transform 440ms cubic-bezier(0.16, 1, 0.3, 1),
    width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list summary::before {
  transform: rotate(0deg);
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::before,
.faq-list details[open] summary::after {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover > span {
    color: var(--lime);
  }

  .faq-list details:not([open]) summary:hover::before {
    width: 24px;
    transform: rotate(180deg);
  }

  .faq-list details:not([open]) summary:hover::after {
    width: 24px;
    transform: rotate(270deg);
  }

  .faq-list details[open] summary:hover::before,
  .faq-list details[open] summary:hover::after {
    width: 24px;
    transform: rotate(360deg);
  }
}

.faq-list details p {
  color: rgba(251, 251, 248, 0.62);
}

.final-cta {
  min-height: 880px;
  padding: 110px 5vw 198px;
  background:
    linear-gradient(rgba(21, 23, 19, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 19, 0.05) 1px, transparent 1px),
    var(--lime);
  background-size: 8px 8px;
  border-bottom: 0;
}

.final-art::after {
  background: linear-gradient(90deg, var(--lime) 0%, rgba(200, 255, 87, 0.9) 38%, rgba(200, 255, 87, 0) 76%);
}

.final-art img {
  top: 52%;
  right: -5%;
  width: min(860px, 62vw);
  opacity: 0.74;
  mix-blend-mode: multiply;
  filter: contrast(1.25) saturate(0.9);
  transform: translateY(-50%) rotate(-7deg);
  animation: hardware-float 11s ease-in-out infinite alternate;
}

@keyframes hardware-float {
  from { transform: translate(-1.5%, -49%) rotate(-8deg); }
  to { transform: translate(1.5%, -52%) rotate(-5deg); }
}

.final-copy h2 {
  max-width: 900px;
  font-size: clamp(70px, 7.4vw, 112px);
  font-weight: 650;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.final-actions {
  gap: 0;
}

.final-actions a {
  min-width: 220px;
  min-height: 60px;
  padding: 0 20px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.final-actions a + a {
  border-left: 0;
}

.final-waitlist {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 58px;
  min-width: 330px;
  min-height: 60px;
  color: var(--ink);
  background: rgba(251, 251, 248, 0.3);
  border: 1px solid var(--ink);
  border-left: 0;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.final-waitlist:focus-within {
  background: rgba(251, 251, 248, 0.66);
  box-shadow: inset 0 -5px 0 var(--green);
}

.final-waitlist input {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.final-waitlist input::placeholder {
  color: rgba(21, 23, 19, 0.72);
  opacity: 1;
}

.final-waitlist button {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--lime);
  background: var(--ink);
  border: 0;
  border-left: 1px solid var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.final-waitlist button:hover,
.final-waitlist button:focus-visible {
  color: var(--ink);
  background: var(--white);
}

.final-waitlist button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.final-waitlist-status {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.final-waitlist[data-state="success"] {
  background: var(--white);
}

.partner-strip {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  height: 90px;
  color: var(--ink);
  background: #fff;
  border-top: 1px solid var(--ink);
  padding: 0;
}

.partner-strip-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-right: 1px solid rgba(21, 23, 19, 0.22);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.partner-strip-label img {
  width: 17px;
  height: 17px;
  flex: none;
  object-fit: contain;
}

.partner-marquee {
  min-width: 0;
  background: #fff;
  overflow: hidden;
}

.partner-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: partner-marquee 14s linear infinite;
  will-change: transform;
}

.partner-set {
  display: flex;
  flex: none;
  width: max(calc(100vw - 168px), 1320px);
  height: 100%;
}

.partner-name {
  position: relative;
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  height: 100%;
  padding: 18px 34px;
  overflow: hidden;
  background: #fff;
  border-right: 1px solid rgba(21, 23, 19, 0.14);
}

.partner-name[href] {
  color: var(--ink);
  cursor: pointer;
}

.partner-name[href]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-name[href]:focus-visible {
  z-index: 1;
  outline: 2px solid var(--green);
  outline-offset: -4px;
}

.partner-name[href]:hover::after,
.partner-name[href]:focus-visible::after {
  transform: scaleX(1);
}

.partner-name img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-name[href]:hover img {
  transform: translateY(-2px) scale(1.04);
}

.partner-name-cambridge img {
  width: min(100%, 230px);
}

.partner-name-antler img {
  width: min(100%, 170px);
}

.partner-name-nvidia img {
  width: min(100%, 220px);
}

.partner-name-oxbridge img {
  width: min(100%, 210px);
  filter: invert(1);
}

.partner-name-systemone img {
  width: min(100%, 180px);
}

.partner-name-helloworld img {
  width: 54px;
  max-width: none;
  max-height: none;
}

@keyframes partner-marquee {
  to {
    transform: translateX(-50%);
  }
}

.final-waitlist[data-state="error"] .final-waitlist-status {
  color: #7a241c;
}

@media (min-width: 601px) {
  .final-actions {
    width: min(100%, 560px);
    flex-wrap: wrap;
  }

  .final-actions > a {
    flex: 1 1 0;
  }

  .final-waitlist {
    width: 100%;
    flex: 0 0 100%;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
}

.site-footer {
  padding: 0 4.5vw 20px;
  background:
    linear-gradient(rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 246, 100, 0.035) 1px, transparent 1px),
    var(--ink);
  background-size: 8px 8px;
  border-top: 0;
}

.footer-main {
  grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
  gap: 40px;
  min-height: 150px;
  align-items: start;
  padding-top: 38px;
}

.footer-main > p {
  max-width: 460px;
  justify-self: end;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.24;
  text-align: right;
}

.footer-people {
  gap: 7px 20px;
  padding: 16px 0;
  font-size: 11px;
}

.footer-people a {
  font-size: 11px;
}

.footer-bottom {
  padding-top: 16px;
}

@media (max-width: 1100px) {
  .product > .workspace,
  .product > .product-demo-root,
  .product > .product-film,
  .audience-branch,
  .offering-layout,
  .community-showcase-inner,
  .example-list,
  .note-list {
    width: calc(100% - 56px);
  }

  .product > .product-demo-root {
    min-height: 1020px;
  }

  .how-experience {
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
  }

  .audience-path {
    min-height: 550px;
    padding: 38px 34px;
  }

  .offering-layout {
    grid-template-columns: 1fr;
  }

  .offering-copy {
    padding: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .offering-copy > p {
    max-width: 820px;
  }

  .offering-carousel {
    max-width: none;
  }
}

@media (max-width: 820px) {
  /* The 3D board canvas captures touch input, so phones and small tablets
     get the heading and projects video alone. The hidden figure never
     intersects the viewport, which also keeps three.js out of the bundle. */
  .community-showcase-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-showcase-board {
    display: none;
  }

  .credibility {
    gap: 0;
    padding: 0 28px;
  }

  .credibility p,
  .credibility p:first-child,
  .credibility p:last-child {
    min-height: 0;
    padding: 18px 0;
    border-left: 0;
  }

  .credibility p + p {
    border-top: 1px solid var(--ink);
  }

  .product::before {
    width: 14px;
  }

  .product > .section-intro,
  .audience-heading,
  .offering-heading {
    padding-top: 118px;
    padding-bottom: 72px;
  }

  .product > .workspace,
  .product > .product-demo-root,
  .product > .product-film,
  .audience-branch,
  .offering-layout,
  .example-list,
  .note-list {
    width: calc(100% - 48px);
  }

  .product > .workspace,
  .product > .product-demo-root,
  .product > .product-film {
    margin-top: 48px;
    margin-bottom: 98px;
  }

  .product > .product-demo-root {
    min-height: 1020px;
  }

  .how {
    padding-top: 118px;
    padding-bottom: 110px;
  }

  .how-experience {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 70px;
  }

  .how-motion-shell {
    grid-row: 1;
    border-bottom: 1px solid rgba(207, 246, 100, 0.36);
  }

  .how-chapter-copy {
    grid-row: 2;
    border-right: 0;
  }

  .how-chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-chapters li {
    min-height: 180px;
    padding: 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .how-chapters li:nth-child(even) {
    border-right: 0;
  }

  .audience {
    padding-bottom: 112px;
  }

  .audience-paths {
    grid-auto-rows: auto;
    padding-left: 0;
  }

  .audience-path {
    min-height: 0;
    padding: 38px;
  }

  .audience-path + .audience-path {
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  .audience-origin::before {
    width: 30%;
  }

  .offering {
    padding-bottom: 116px;
  }

  .examples,
  .notes,
  .faq {
    padding-top: 112px;
    padding-bottom: 118px;
  }

  .example-row {
    grid-template-columns: 0.42fr 0.85fr 1fr auto;
    padding-right: 18px;
    padding-left: 18px;
  }

  .final-art img {
    right: -29%;
    width: 920px;
    opacity: 0.47;
  }
}

@media (max-width: 760px) {
  .product > .product-demo-root {
    min-height: 1510px;
  }
}

@media (max-width: 600px) {
  .section-intro h2,
  .how-heading h2,
  .audience-heading h2,
  .offering-heading h2,
  .examples-heading h2,
  .notes-heading h2,
  .faq-heading h2 {
    font-size: clamp(45px, 13.5vw, 58px);
    line-height: 0.9;
  }

  .credibility {
    padding: 0 20px;
    font-size: 10px;
  }

  .product > .section-intro,
  .audience-heading,
  .offering-heading {
    padding: 94px 24px 60px;
  }

  .product > .section-intro::before,
  .product > .section-intro::after {
    display: none;
  }

  .product > .workspace,
  .product > .product-demo-root,
  .product > .product-film,
  .audience-branch,
  .offering-layout,
  .community-showcase-inner,
  .example-list,
  .note-list {
    width: calc(100% - 28px);
  }

  .product > .workspace,
  .product > .product-demo-root,
  .product > .product-film {
    margin-top: 34px;
    margin-bottom: 74px;
    border-width: 1px;
    border-radius: 0;
  }

  .workspace-topbar {
    padding: 0 10px;
  }

  .how {
    padding: 94px 0 88px;
  }

  .how-experience {
    width: calc(100% - 28px);
    margin-top: 54px;
  }

  .how-chapters {
    grid-template-columns: 1fr;
  }

  .how-chapters li {
    min-height: 0;
    padding: 25px 22px;
    border-right: 0;
  }

  .how-chapters h3 {
    font-size: 23px;
  }

  .audience {
    padding-bottom: 82px;
  }

  .audience-heading {
    margin-bottom: 44px;
  }

  .audience-origin {
    min-height: 50px;
    padding: 0 16px;
  }

  .audience-origin::before {
    width: 22%;
    height: 6px;
  }

  .audience-origin p {
    font-size: 10px;
  }

  .audience-path {
    padding: 28px 24px 30px;
  }

  .audience-path-heading {
    margin-bottom: 44px;
  }

  .audience-index {
    font-size: 38px;
  }

  .audience-kicker {
    max-width: 130px;
    font-size: 10px;
  }

  .audience-copy h3 {
    font-size: 35px;
  }

  .audience-copy > p:last-child {
    font-size: 15px;
  }

  .audience-path blockquote {
    margin-top: 36px;
    padding: 12px 0 0;
    font-size: 16px;
  }

  .audience-pro blockquote {
    font-size: 16px;
  }

  .audience-import-ribbon {
    position: absolute;
    right: -4px;
    bottom: -40px;
    width: 94px;
    margin: 0;
    padding: 11px;
    transform: rotate(2deg);
  }

  .audience-import-ribbon strong {
    font-size: 9px;
    line-height: 1.12;
  }

  .offering {
    padding-bottom: 84px;
  }

  .offering-heading {
    margin-bottom: 44px;
  }

  .offering-copy {
    padding: 31px 24px 34px;
  }

  .offering-copy > p {
    font-size: 22px;
    line-height: 1.4;
  }

  .community-showcase {
    padding: 86px 0 92px;
  }

  .community-showcase h2 {
    font-size: clamp(43px, 12vw, 54px);
    line-height: 0.92;
  }

  .community-showcase-media {
    margin-top: 50px;
  }

  .community-showcase-media video {
    width: 184%;
    max-width: none;
    transform: translateX(-3%);
  }

  .offering-tabs {
    grid-template-columns: 1fr;
  }

  .offering-tabs button {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .offering-tabs button:last-child {
    border-bottom: 0;
  }

  .offering-tabs button.is-active {
    box-shadow: inset 6px 0 0 var(--green);
  }

  .offering-panels {
    min-height: 320px;
  }

  .offering-panels figure {
    padding: 18px;
  }

  .offering-panels img {
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
  }

  .examples,
  .notes,
  .faq {
    padding-top: 88px;
    padding-bottom: 92px;
  }

  .examples::before {
    display: none;
  }

  .examples-heading,
  .notes-heading,
  .faq-heading {
    margin-bottom: 54px;
  }

  .notes-heading {
    padding: 0 24px;
  }

  .notes-heading h2 {
    font-size: clamp(40px, 12vw, 50px);
    line-height: 0.94;
    text-wrap: balance;
  }

  .example-row {
    grid-template-columns: 1fr auto;
    min-height: 0;
    padding: 28px 18px;
  }

  .example-row:hover,
  .example-row:focus-visible {
    padding-left: 24px;
  }

  .example-row h3 {
    font-size: 33px;
  }

  .example-row p {
    font-size: 14px;
  }

  .note-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "meta meta"
      "title arrow";
    min-height: 0;
    gap: 14px 20px;
    width: 100%;
    padding: 28px 18px;
  }

  .note-row span {
    grid-area: meta;
  }

  .note-row h3 {
    grid-area: title;
    width: 100%;
    max-width: none;
    font-size: 27px;
    line-height: 1.04;
  }

  .note-row i {
    grid-area: arrow;
    align-self: center;
    justify-self: end;
  }

  .faq-list {
    width: calc(100% - 40px);
  }

  .faq-list summary {
    min-height: 82px;
    padding: 25px 48px 22px 0;
    font-size: 18px;
  }

  .faq-list summary::before,
  .faq-list summary::after {
    top: 39px;
    right: 4px;
  }

  .final-cta {
    min-height: 760px;
    padding: 88px 20px 166px;
  }

  .final-art img {
    top: 67%;
    right: -92%;
    width: 970px;
    max-width: none;
    opacity: 0.38;
  }

  .final-copy {
    align-self: start;
  }

  .final-copy h2 {
    max-width: 440px;
    font-size: clamp(52px, 15vw, 66px);
    line-height: 0.88;
  }

  .final-actions {
    width: min(100%, 330px);
    flex-direction: column;
    margin-top: 36px;
  }

  .final-actions a {
    width: 100%;
    min-width: 0;
  }

  .final-actions a + a {
    border-top: 0;
    border-left: 1px solid var(--ink);
  }

  .final-waitlist {
    width: 100%;
    min-width: 0;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }

  .partner-strip {
    grid-template-columns: 96px minmax(0, 1fr);
    height: 72px;
  }

  .partner-strip-label {
    padding: 0 12px;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
  }

  .partner-strip-label img {
    width: 14px;
    height: 14px;
  }

  .partner-name {
    padding: 14px 24px;
  }

  .partner-set {
    width: max(calc(100vw - 96px), 1140px);
  }

  .partner-name img {
    max-height: 38px;
  }

  .partner-name-cambridge img {
    width: 150px;
    max-width: none;
  }

  .partner-name-antler img {
    width: 112px;
    max-width: none;
  }

  .partner-name-nvidia img {
    width: 150px;
  }

  .partner-name-oxbridge img {
    width: 150px;
    max-width: none;
  }

  .partner-name-systemone img {
    width: 138px;
  }

  .partner-name-helloworld img {
    width: 44px;
  }

  .site-footer {
    padding-right: 20px;
    padding-bottom: 16px;
    padding-left: 20px;
    border-top-width: 0;
  }

  .footer-main {
    gap: 18px;
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .footer-main > p {
    justify-self: start;
    font-size: 18px;
    text-align: left;
  }

  .footer-people {
    gap: 7px 14px;
    padding: 13px 0;
    font-size: 10px;
  }

  .footer-people a {
    font-size: 10px;
  }

  .footer-bottom {
    gap: 12px;
    padding-top: 13px;
  }
}

@media (max-width: 440px) {
  .product > .product-demo-root {
    min-height: 1480px;
  }
}

/* Figma hero composition: Slide 16:9 - 1. */
.hero {
  min-height: max(720px, 100svh);
  padding: 0 24px;
  color: #ece8df;
  background: radial-gradient(63.03% 93.61% at 50% 43%, #292928 0%, #191919 80%);
  border-bottom: 0;
}

.hero::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0.08) 0%, transparent 22%, transparent 78%, rgba(25, 25, 25, 0.18) 100%);
}

.hero-art {
  inset: 0;
}

.hero-art img {
  z-index: 1;
  top: 52%;
  left: 50%;
  width: min(58vw, 970px);
  height: auto;
  max-height: none;
  opacity: 0.16;
  mix-blend-mode: normal;
  filter: brightness(0.78);
  transform: translate(-50%, -50%) rotate(95.5deg) scale(1.02);
  animation: blueprint-breathe-dark 12s ease-in-out infinite alternate;
}

@keyframes blueprint-breathe-dark {
  from { transform: translate(-50.4%, -49.7%) rotate(95.1deg) scale(1.01); }
  to { transform: translate(-49.6%, -50.3%) rotate(95.9deg) scale(1.035); }
}

.hero-content {
  align-self: stretch;
  width: min(100%, 1000px);
  padding-top: clamp(200px, 30.15svh, 325.56px);
}

.hero h1 {
  width: min(100%, 897.99px);
  max-width: 897.99px;
  color: #ece8df;
  font-size: clamp(64px, 5.625vw, 108px);
  font-weight: 500;
  /* Tightest pitch where the "g" descenders in "language" still clear the
     i-dots of "Electronics" on the next line. */
  line-height: 0.94;
  letter-spacing: -0.072em;
  text-wrap: balance;
}

.hero h1 em {
  color: #c8ff57;
  font: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-decoration: none;
}

.hero-subtitle {
  width: min(100%, 672.74px);
  max-width: 672.74px;
  margin-top: min(32px, 1.666667vw);
  color: #ece8df;
  font-size: clamp(17px, 1.09375vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: wrap;
}

.idea-bar {
  display: flex;
  flex-direction: column;
  width: min(100%, 663px);
  min-height: 89px;
  margin-top: clamp(24px, 2.03vw, 39px);
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #292928;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(200, 255, 87, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px #27272a, 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.32);
  backdrop-filter: none;
}

.idea-bar:focus-within {
  border-color: #8bbe0b;
  box-shadow: 0 0 13px rgba(200, 255, 87, 0.6), 0 0 0 1px #8bbe0b, 0 2px 4px rgba(0, 0, 0, 0.32);
}

.idea-input-shell {
  min-height: 44px;
  flex: 0 0 44px;
}

.idea-bar input,
.idea-typing-preview {
  padding: 0 12px;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
}

.idea-typing-preview i {
  width: 2px;
  height: 18px;
  margin-left: 2px;
  background: #fff;
}

.idea-bar-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 43px;
  padding: 4px 12px 11px;
  background: #292928;
}

.idea-bar-footer button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.idea-bar .idea-bar-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  color: #fff;
  background: #434342;
  border-radius: 999px;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px #52525b, 0 0 1px 1.5px rgba(0, 0, 0, 0.24), 0 2px 2px rgba(0, 0, 0, 0.24);
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease, width 160ms ease;
}

.idea-bar .idea-bar-footer button:hover {
  color: #151713;
  background: #c8ff57;
  transform: translateY(-1px);
}

.idea-bar .idea-bar-footer button.is-opening {
  width: auto;
  padding: 0 11px;
  color: #151713;
  background: #c8ff57;
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}

.idea-beta-tag {
  margin: 14px auto 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.idea-beta-tag span {
  position: relative;
  display: inline-block;
  padding: 4px 9px;
}

.idea-beta-tag span::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#fff, #fff) left top / 0 1px no-repeat,
    linear-gradient(#fff, #fff) right top / 1px 0 no-repeat,
    linear-gradient(#fff, #fff) right bottom / 0 1px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 1px 0 no-repeat;
  content: "";
  pointer-events: none;
  animation: beta-border-draw 3.2s linear infinite;
  will-change: background-size, opacity;
}

@keyframes beta-border-draw {
  0% {
    background-size: 0 1px, 1px 0, 0 1px, 1px 0;
    opacity: 1;
  }

  22% {
    background-size: 100% 1px, 1px 0, 0 1px, 1px 0;
  }

  44% {
    background-size: 100% 1px, 1px 100%, 0 1px, 1px 0;
  }

  66% {
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0;
  }

  88%,
  94% {
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    opacity: 1;
  }

  100% {
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    opacity: 0;
  }
}

.idea-examples {
  display: none;
}

.idea-examples button {
  min-height: 36px;
  color: rgba(236, 232, 223, 0.76);
  border-bottom-color: rgba(236, 232, 223, 0.34);
  transition: color 160ms ease, border-color 160ms ease;
}

.idea-examples button:hover {
  color: #c8ff57;
  border-color: #c8ff57;
}

.hero-scroll {
  display: none;
}

.site-header:not(.is-scrolled) {
  color: #ece8df;
}

.site-header:not(.is-scrolled) .brand img {
  filter: none;
  opacity: 1;
}

.site-header:not(.is-scrolled) .brand {
  color: #ece8df;
}

.site-header:not(.is-scrolled) .desktop-nav a,
.site-header:not(.is-scrolled) .sign-in-link,
.site-header:not(.is-scrolled) .header-discord {
  color: rgba(236, 232, 223, 0.82);
}

.site-header:not(.is-scrolled) .desktop-nav a:hover,
.site-header:not(.is-scrolled) .sign-in-link:hover,
.site-header:not(.is-scrolled) .header-discord:hover {
  color: #fff;
}

.site-header.is-scrolled {
  color: #ece8df;
  background: rgba(21, 23, 19, 0.96);
  border-color: rgba(200, 255, 87, 0.16);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled .brand {
  color: #ece8df;
}

.site-header.is-scrolled .desktop-nav a,
.site-header.is-scrolled .sign-in-link,
.site-header.is-scrolled .header-discord {
  color: rgba(236, 232, 223, 0.78);
}

.site-header.is-scrolled .desktop-nav a:hover,
.site-header.is-scrolled .sign-in-link:hover,
.site-header.is-scrolled .header-discord:hover {
  color: var(--lime);
}

.header-cta {
  min-width: 94px;
  min-height: 36px;
  justify-content: center;
  padding: 0 12px;
  color: #151713;
  background: #8bbe0b;
  border-color: #8bbe0b;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(217, 255, 122, 0.5), 0 0 0 1px #8bbe0b, inset 0 0.75px 0 rgba(255, 255, 255, 0.2);
  font-weight: 500;
}

.header-cta:hover {
  color: #151713;
  background: #c8ff57;
  border-color: #c8ff57;
}

body.menu-open .site-header {
  color: var(--ink);
  background: var(--paper);
}

body.menu-open .site-header .brand img {
  filter: none;
  opacity: 1;
}

body.menu-open .site-header .brand {
  color: var(--ink);
}

body.menu-open .site-header .header-discord {
  color: rgba(21, 23, 19, 0.72);
}

@media (min-width: 1101px) {
  .site-header {
    min-height: min(76px, 3.958333vw);
    padding-right: 3.5vw;
  }

  .brand {
    gap: min(9px, 0.46875vw);
    font-size: min(20px, 1.041667vw);
  }

  .brand img {
    width: 28px;
    height: 28px;
  }

  .desktop-nav {
    gap: min(31px, 1.614583vw);
    font-size: min(14px, 0.729167vw);
  }

  .header-actions {
    gap: min(42px, 2.1875vw);
    font-size: min(14px, 0.729167vw);
  }

  .header-cta {
    min-width: min(94px, 4.895833vw);
    min-height: min(36px, 1.875vw);
    padding: 0 min(12px, 0.625vw);
    border-radius: min(6px, 0.3125vw);
  }

  .hero-content {
    padding-top: calc(30.15svh + 19px);
  }

  .hero-subtitle {
    width: min(672.74px, 35.038542vw);
    max-width: min(672.74px, 35.038542vw);
    font-size: min(21px, 1.09375vw);
  }

  .idea-bar {
    width: min(663px, 34.53125vw);
    height: min(89px, 4.635417vw);
    min-height: min(89px, 4.635417vw);
    margin-top: min(35px, 1.822917vw);
    border-radius: min(8px, 0.416667vw);
  }

  .idea-input-shell {
    min-height: min(44px, 2.291667vw);
    flex-basis: min(44px, 2.291667vw);
  }

  .idea-bar input,
  .idea-typing-preview {
    padding: 0 min(12px, 0.625vw);
    font-size: min(18px, 0.9375vw);
  }

  .idea-typing-preview i {
    width: min(2px, 0.104167vw);
    height: min(18px, 0.9375vw);
    margin-left: min(2px, 0.104167vw);
  }

  .idea-bar-footer {
    min-height: min(43px, 2.239583vw);
    padding: min(4px, 0.208333vw) min(12px, 0.625vw) min(11px, 0.572917vw);
  }

  .idea-bar .idea-bar-footer button {
    width: min(28px, 1.458333vw);
    min-width: min(28px, 1.458333vw);
    height: min(28px, 1.458333vw);
  }

  .idea-bar-footer button svg {
    width: min(15px, 0.78125vw);
    height: min(15px, 0.78125vw);
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: min(760px, 100svh);
    padding: 0 28px;
  }

  .hero-content {
    padding-top: clamp(132px, 18svh, 170px);
  }

  .hero h1 {
    font-size: clamp(42px, 11.8vw, 58px);
    line-height: 0.94;
    letter-spacing: -0.062em;
  }

  .hero-subtitle {
    max-width: 560px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.5;
  }

  .idea-bar {
    min-height: 89px;
    margin-top: 27px;
  }

  .idea-bar input,
  .idea-typing-preview {
    padding: 0 12px;
    font-size: 16px;
  }

  .hero-art img {
    top: 54%;
    left: 64%;
    width: min(92vw, 680px);
    opacity: 0.14;
  }

  .hero-scroll {
    bottom: 18px;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 0;
    padding: 104px 20px 68px;
  }

  .hero-content {
    align-self: auto;
    padding-top: 0;
  }

  .hero-art img {
    top: 56%;
    left: 74%;
    width: 116vw;
    opacity: 0.12;
  }

  .hero h1 {
    font-size: clamp(40px, 11.6vw, 50px);
  }

  .hero-subtitle {
    max-width: 360px;
    margin-top: 20px;
  }

  .idea-bar {
    width: 100%;
    margin-top: 20px;
  }

  .idea-bar input,
  .idea-typing-preview {
    font-size: 16px;
  }

  .idea-bar .idea-bar-footer button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    margin-top: -4px;
    margin-bottom: -4px;
  }

  .idea-examples button {
    min-height: 32px;
  }

  .header-cta {
    min-width: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary > span,
  .faq-list summary::before,
  .faq-list summary::after {
    transition: none;
  }

  .faq-list details[open] p {
    animation: none;
  }

  .partner-marquee {
    overflow-x: auto;
  }

  .partner-track {
    animation: none;
  }

  .partner-set[aria-hidden="true"] {
    display: none;
  }

  .idea-beta-tag span::before {
    animation: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.8);
    opacity: 1;
  }
}