/* JmpKit shared visual theme.
   The visitor's system preference selects light or dark automatically.
   Page files own layout; this file owns palette and shared component surfaces. */

:root {
  color-scheme: light dark;

  --jk-bg: #f7f5ef;
  --jk-bg-deep: #f1eee6;
  --jk-surface: #fffdf8;
  --jk-surface-strong: #ffffff;
  --jk-surface-muted: #f3f1ea;
  --jk-line: #d8d5cc;
  --jk-line-strong: #b9b9b2;
  --jk-text: #18211f;
  --jk-text-mid: #4f5d59;
  --jk-text-soft: #64716d;
  --jk-accent: #176b54;
  --jk-accent-strong: #0e5744;
  --jk-accent-soft: #dcefe6;
  --jk-action-bg: #176b54;
  --jk-action-hover: #0e5744;
  --jk-action-text: #ffffff;
  --jk-danger: #a83e3e;
  --jk-warn: #8b5b16;
  --jk-shadow: #26322d17;

  /* Shared aliases used by existing pages. */
  --bg: var(--jk-bg);
  --bg-base: var(--jk-bg);
  --bg-elev: var(--jk-surface);
  --bg-elev-strong: var(--jk-surface-strong);
  --bg-surface: var(--jk-surface);
  --bg-elevated: var(--jk-surface-muted);
  --panel: var(--jk-surface);
  --panel-strong: var(--jk-surface-strong);
  --paper: var(--jk-bg);
  --paper-deep: var(--jk-bg-deep);

  --line: var(--jk-line);
  --line-soft: var(--jk-line);
  --border: var(--jk-line);
  --border-hover: var(--jk-line-strong);
  --rule: var(--jk-line);
  --rule-strong: var(--jk-text);

  --text: var(--jk-text);
  --text-main: var(--jk-text);
  --text-primary: var(--jk-text);
  --ink: var(--jk-text);
  --muted: var(--jk-text-mid);
  --text-mid: var(--jk-text-mid);
  --text-secondary: var(--jk-text-mid);
  --ink-mid: var(--jk-text-mid);
  --soft: var(--jk-text-soft);
  --text-soft: var(--jk-text-soft);
  --text-muted: var(--jk-text-soft);
  --ink-soft: var(--jk-text-soft);

  --accent: var(--jk-accent);
  --accent-strong: var(--jk-accent-strong);
  --accent-dim: var(--jk-accent-strong);
  --accent-cool: var(--jk-accent);
  --accent-2: var(--jk-accent);
  --accent-soft: var(--jk-accent-soft);
  --accent-glow: #176b5417;
  --danger: var(--jk-danger);
  --warn: var(--jk-warn);
}

html,
body {
  background-color: var(--jk-bg);
  color: var(--jk-text);
}

body {
  background-image: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--jk-accent);
}

input,
textarea,
select {
  border-color: var(--jk-line);
  background: var(--jk-surface-muted);
  color: var(--jk-text);
}

.top-bar,
.top-links,
.press-topbar {
  color: var(--jk-text);
}

.top-bar {
  border-color: var(--jk-line);
  background: color-mix(in srgb, var(--jk-bg) 92%, transparent);
}

.top-home-link,
.top-brand,
.press-brand,
.brand {
  color: var(--jk-text);
}

.site-index,
.site-index #version,
.site-copyright,
.press-footer {
  border-color: var(--jk-line);
}

.cli-strip[hidden],
.site-index-grid > section[hidden] {
  display: none !important;
}

.site-index-grid {
  width: min(100%, 32rem);
  grid-template-columns: repeat(2, minmax(8rem, 1fr));
}

.site-index a:hover,
.top-home-link:hover,
.top-nav-link:hover,
.press-nav a:hover {
  color: var(--jk-accent);
}

.site-index h2 {
  color: var(--jk-text);
}

.site-index a {
  color: var(--jk-text-mid);
}

/* Shared quiet surfaces. */
.recovery-prompt,
.agent-prompt,
.account-modal-panel,
.details,
.technical-note,
.primitive,
.callout,
.plan,
.prompt-modal-panel {
  border-color: var(--jk-line);
  background: var(--jk-surface);
  color: var(--jk-text);
  box-shadow: 0 14px 34px var(--jk-shadow);
}

.account-section,
.overview-card,
.kit-card,
.qa-item {
  border-color: var(--jk-line);
}

code,
pre.code,
.agent-prompt-text,
.recovery-code,
.prompt-modal-prompt {
  border-color: var(--jk-line);
  background: var(--jk-surface-muted);
  color: var(--jk-text);
}

/* Shared primary and secondary actions. */
.home-action-primary,
.button-primary,
.primary,
.profile-save,
.upgrade-button,
.plan-button,
.prompt-modal-copy-btn,
.download-btn,
.hero-cta-primary,
.kit-download,
.agent-prompt-copy,
.recovery-copy,
.account-modal-confirm {
  border-color: var(--jk-action-bg);
  background: var(--jk-action-bg);
  color: var(--jk-action-text);
  box-shadow: 0 9px 22px var(--jk-shadow);
}

.home-action-primary:hover,
.button-primary:hover,
.primary:hover,
.profile-save:hover,
.upgrade-button:hover,
.plan-button:hover,
.prompt-modal-copy-btn:hover,
.download-btn:hover,
.hero-cta-primary:hover,
.kit-download:hover,
.agent-prompt-copy:hover,
.recovery-copy:hover,
.account-modal-confirm:hover {
  border-color: var(--jk-action-hover);
  background: var(--jk-action-hover);
  color: var(--jk-action-text);
}

.secondary,
.button:not(.button-primary),
.prompt-modal-dismiss,
.account-modal-dismiss,
.account-modal-close {
  border-color: var(--jk-line);
  background: var(--jk-surface);
  color: var(--jk-text-mid);
}

/* Start-building path chooser ---------------------------------------- */
.build-path-chooser[hidden],
.build-path-panel[hidden] {
  display: none !important;
}

.build-path-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.build-path-option {
  min-height: 6.5rem;
  border: 1px solid var(--jk-line);
  border-radius: 12px;
  padding: 1rem;
  background: var(--jk-surface-muted);
  color: var(--jk-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.build-path-option > svg {
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: 0.7rem;
  color: var(--jk-accent);
}

.build-path-option:hover,
.build-path-option:focus-visible {
  border-color: var(--jk-accent);
  background: var(--jk-accent-soft);
  outline: none;
}

.build-path-option strong,
.build-path-option span {
  display: block;
}

.build-path-option strong {
  font-size: 1.06rem;
  line-height: 1.25;
}

.build-path-option span {
  margin-top: 0.35rem;
  color: var(--jk-text-mid);
  font-size: 0.9rem;
  line-height: 1.4;
}

.build-path-panel h3 {
  margin: 0.8rem 0 0;
  color: var(--jk-text);
  font-size: 1.12rem;
}

.build-path-nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.prompt-modal-panel.has-build-path .prompt-modal-title {
  visibility: hidden;
}

.prompt-modal-panel.has-build-path .build-path-nav {
  position: absolute;
  top: 0.7rem;
  right: 3.2rem;
  left: 0.7rem;
  min-height: 2rem;
}

.build-path-current {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  color: var(--jk-text-mid);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

.build-path-current svg {
  width: 1rem;
  height: 1rem;
  color: var(--jk-accent);
}

.build-path-panel > p:not(.prompt-modal-copy) {
  margin: 0.55rem 0 0;
  color: var(--jk-text-mid);
  font-size: 0.94rem;
  line-height: 1.5;
}

.build-path-steps {
  margin: 0.85rem 0 0;
  padding-left: 1.3rem;
  color: var(--jk-text-mid);
  font-size: 0.92rem;
  line-height: 1.45;
}

.build-path-steps li + li {
  margin-top: 0.42rem;
}

.build-path-steps a {
  color: var(--jk-accent-strong);
  text-underline-offset: 0.15em;
}

.build-path-panel > .build-path-note {
  margin-top: 1rem;
  color: var(--jk-text);
  font-weight: 700;
}

.build-path-back {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--jk-text-soft);
  cursor: pointer;
}

.build-path-back svg {
  width: 1rem;
  height: 1rem;
}

.build-path-back:hover,
.build-path-back:focus-visible {
  color: var(--jk-accent-strong);
  outline: 2px solid var(--jk-accent);
  outline-offset: 2px;
}

.build-path-switch {
  min-height: 2.65rem;
  margin-top: 1rem;
  border: 1px solid var(--jk-action-bg);
  border-radius: 9px;
  padding: 0 1rem;
  background: var(--jk-action-bg);
  color: var(--jk-action-text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.build-path-switch:hover,
.build-path-switch:focus-visible {
  border-color: var(--jk-action-hover);
  background: var(--jk-action-hover);
  color: var(--jk-action-text);
  outline: none;
}

@media (max-width: 34rem) {
  .build-path-options {
    grid-template-columns: 1fr;
  }

  .build-path-option {
    min-height: auto;
  }
}

/* Start Building platform guide -------------------------------------- */
.build-platform-picker[hidden],
.build-platform-guide[hidden],
.build-platform-open[hidden],
.build-platform-modes[hidden],
[data-build-platform-specific][hidden],
[data-build-platform-prompt-block][hidden],
[data-build-platform-copy][hidden] {
  display: none !important;
}

.build-platform-overlay {
  z-index: 50;
}

.build-platform-modal {
  width: min(100%, 46rem);
  max-height: min(90svh, 56rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.15rem 1.5rem 1.35rem;
  border-radius: 22px;
  transition: width 180ms ease;
}

.build-platform-modal.has-platform-guide {
  width: min(100%, 40rem);
}

.build-platform-modal > .prompt-modal-close {
  position: sticky;
  top: 0.35rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 -2rem auto;
  border: 0;
  background: var(--jk-surface-muted);
  color: var(--jk-text-soft);
  backdrop-filter: none;
  transition: background 140ms ease, color 140ms ease;
}

.build-platform-modal > .prompt-modal-close:hover,
.build-platform-modal > .prompt-modal-close:focus-visible {
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
  outline: none;
}

.build-platform-modal > .prompt-modal-close svg {
  width: 1.2rem;
  height: 1.2rem;
}

.build-platform-picker {
  --build-platform-flow-gap: 1.15rem;
  --build-platform-guidance-gap: 1.3rem;
}

.build-platform-picker-header {
  padding: 0.1rem 3rem 0 0;
}

.build-platform-eyebrow {
  margin: 0 0 0.28rem;
  color: var(--jk-accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.build-platform-picker .prompt-modal-title {
  margin-bottom: 0;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  hyphens: none;
  text-wrap: balance;
}

.build-platform-picker .prompt-modal-copy {
  margin: 0;
}

.build-platform-quick-prompt {
  margin-top: var(--build-platform-flow-gap);
}

.build-platform-quick-prompt .prompt-modal-prompt {
  width: 100%;
  min-height: 6.4rem;
  box-sizing: border-box;
  border-color: var(--jk-line-strong);
  border-radius: 14px;
  background: var(--jk-surface-muted);
  padding: 1rem 1.05rem;
  font-size: 0.98rem;
  line-height: 1.55;
  resize: vertical;
}

.build-platform-quick-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.build-platform-quick-copy {
  width: auto;
  flex: 0 0 auto;
  min-height: 2.7rem;
  padding: 0.7rem 1.05rem;
  box-shadow: none;
}

.build-platform-try {
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  box-sizing: border-box;
  border: 1px solid var(--jk-line-strong);
  border-radius: 10px;
  padding: 0.68rem 0.95rem;
  background: var(--jk-surface);
  color: var(--jk-text);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.build-platform-try:hover,
.build-platform-try:focus-visible {
  border-color: var(--jk-accent);
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
  text-decoration: none;
}

.build-platform-try:focus-visible {
  border-radius: 0.2rem;
  outline: 2px solid var(--jk-accent);
  outline-offset: 0.25rem;
}

.build-platform-try svg {
  width: 0.86rem;
  height: 0.86rem;
}

.build-platform-zero-setup {
  max-width: 39rem;
  margin: var(--build-platform-guidance-gap) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  color: var(--jk-text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.build-platform-zero-setup::before {
  width: 1rem;
  height: 1rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
  content: "✓";
  font-size: 0.66rem;
  font-weight: 800;
}

.build-platform-zero-setup strong {
  color: var(--jk-text-mid);
}

.build-platform-zero-setup-copy {
  display: grid;
  gap: 0.08rem;
}

.build-platform-instructions-control {
  display: flex;
  margin: 1.2rem 0 -1.35rem;
  border-top: 1px solid var(--jk-line);
}

.build-platform-instructions-toggle {
  width: 100%;
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.38rem;
  border: 0;
  border-radius: 0;
  padding: 0.75rem 0.15rem;
  background: transparent;
  color: var(--jk-text-mid);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

.build-platform-instructions-toggle:hover,
.build-platform-instructions-toggle:focus-visible {
  color: var(--jk-accent-strong);
  outline: none;
}

.build-platform-instructions-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--jk-accent);
}

.build-platform-instructions-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 180ms ease;
}

.build-platform-instructions-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.build-platform-specific {
  margin: 1.35rem -1.5rem -1.35rem;
  border-top: 1px solid var(--jk-line-strong);
  padding: 1.2rem 1.5rem 1.35rem;
  background: color-mix(in srgb, var(--jk-surface-muted) 40%, var(--jk-accent-soft));
  animation: build-platform-instructions-reveal 180ms ease-out;
}

@keyframes build-platform-instructions-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.build-platform-specific-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.build-platform-specific-heading h3 {
  margin: 0;
  color: var(--jk-text);
  font-size: 0.94rem;
  letter-spacing: -0.01em;
}

.build-platform-groups {
  display: grid;
  gap: 1.15rem;
  margin-top: 0.8rem;
}

.build-platform-group h3 {
  margin: 0 0 0.48rem;
  color: var(--jk-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.build-platform-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}

.build-platform-group--featured .build-platform-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.build-platform-group--help .build-platform-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.build-platform-option {
  min-width: 0;
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  border: 0;
  border-radius: 10px;
  padding: 0.5rem 0.45rem;
  background: transparent;
  color: var(--jk-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}

.build-platform-option:hover,
.build-platform-option:focus-visible {
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
  outline: none;
}

.build-platform-option-icon,
.build-platform-guide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jk-accent-strong);
}

.build-platform-option-icon {
  width: 2.35rem;
  height: 2.35rem;
}

.build-platform-option-icon svg,
.build-platform-option-icon img {
  width: 1.72rem;
  height: 1.72rem;
}

.build-platform-brand-logo {
  display: block;
  object-fit: contain;
}

.build-platform-option-copy {
  min-width: 0;
  display: block;
}

.build-platform-option-copy strong,
.build-platform-option-copy > span {
  display: block;
}

.build-platform-option-copy strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.22;
}

.build-platform-universal {
  max-width: 43rem;
  margin: 1.15rem auto 0;
  color: var(--jk-text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.build-platform-guide {
  padding-bottom: 0.25rem;
}

.build-platform-guide-nav {
  position: sticky;
  top: -0.85rem;
  z-index: 4;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 -0.35rem;
  padding: 0.85rem 3.15rem 0.65rem 0.35rem;
  background: color-mix(in srgb, var(--jk-surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

.build-platform-back {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: var(--jk-text-soft);
  cursor: pointer;
}

.build-platform-back:hover,
.build-platform-back:focus-visible {
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
  outline: none;
}

.build-platform-back svg {
  width: 1.15rem;
  height: 1.15rem;
}

.build-platform-guide-product {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--jk-text-mid);
  text-decoration: none;
}

.build-platform-guide-product[href]:hover,
.build-platform-guide-product[href]:focus-visible {
  color: var(--jk-accent-strong);
  outline: none;
}

.build-platform-guide-product[href]:hover .build-platform-guide-title,
.build-platform-guide-product[href]:focus-visible .build-platform-guide-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.build-platform-guide-product:not([href]) {
  pointer-events: none;
}

.build-platform-guide-icon {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
}

.build-platform-guide-icon svg,
.build-platform-guide-icon img {
  width: 1.15rem;
  height: 1.15rem;
}

.build-platform-guide-title {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: inherit;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.build-platform-modes {
  width: fit-content;
  display: inline-flex;
  gap: 0.85rem;
  margin-top: 0.85rem;
  border-bottom: 1px solid var(--jk-line);
}

.build-platform-mode {
  position: relative;
  min-height: 1.9rem;
  border: 0;
  padding: 0.38rem 0.08rem 0.55rem;
  background: transparent;
  color: var(--jk-text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  transition: color 180ms ease;
}

.build-platform-mode::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--jk-accent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 180ms ease, transform 180ms ease;
}

.build-platform-mode:hover,
.build-platform-mode:focus-visible {
  color: var(--jk-text);
}

.build-platform-mode:focus-visible {
  border-radius: 0.2rem;
  outline: 2px solid var(--jk-accent);
  outline-offset: 0.2rem;
}

.build-platform-mode[aria-selected="true"] {
  color: var(--jk-accent-strong);
}

.build-platform-mode[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.build-platform-guide-intro {
  margin: 0.9rem 0 0;
  color: var(--jk-text-mid);
  font-size: 0.96rem;
  line-height: 1.5;
}

.build-platform-guide-availability {
  margin: 0.58rem 0 0;
  border-left: 2px solid var(--jk-accent);
  padding-left: 0.72rem;
  color: var(--jk-text-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.build-platform-guide-steps {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: build-platform-step;
}

.build-platform-guide-steps li {
  position: relative;
  min-height: 2rem;
  padding: 0.28rem 0 0.65rem 2.55rem;
  color: var(--jk-text-mid);
  counter-increment: build-platform-step;
  font-size: 0.9rem;
  line-height: 1.45;
}

.build-platform-guide-steps li::before {
  position: absolute;
  top: 0.05rem;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--jk-line);
  border-radius: 999px;
  background: var(--jk-surface-muted);
  color: var(--jk-accent-strong);
  content: counter(build-platform-step);
  font-size: 0.72rem;
  font-weight: 700;
}

.build-platform-prompt-label {
  display: block;
  margin: 0.7rem 0 0.42rem;
  color: var(--jk-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.build-platform-guide .prompt-modal-prompt {
  width: 100%;
  min-height: 7.5rem;
  box-sizing: border-box;
  resize: vertical;
}

.build-platform-guide-actions {
  position: sticky;
  bottom: -1.35rem;
  z-index: 3;
  margin-right: -0.15rem;
  margin-left: -0.15rem;
  padding: 0.85rem 0.15rem 1.35rem;
  background: linear-gradient(180deg, transparent 0, var(--jk-surface) 24%, var(--jk-surface) 100%);
}

.build-platform-open {
  min-height: 2.7rem;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  box-sizing: border-box;
  border: 1px solid var(--jk-line-strong);
  border-radius: 10px;
  padding: 0.72rem 0.9rem;
  background: var(--jk-surface);
  color: var(--jk-text);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.build-platform-open:hover,
.build-platform-open:focus-visible {
  border-color: var(--jk-accent);
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
  outline: none;
}

.build-platform-open svg {
  width: 0.95rem;
  height: 0.95rem;
}

.build-platform-guide-note {
  margin: 0.75rem 0 0;
  color: var(--jk-text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 46rem) {
  .build-platform-group--featured .build-platform-options,
  .build-platform-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .build-platform-overlay {
    align-items: end;
    padding: 0;
  }

  .build-platform-modal,
  .build-platform-modal.has-platform-guide {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 0.75rem);
    box-sizing: border-box;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    padding: 1.15rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  .build-platform-modal > .prompt-modal-close {
    top: 0.1rem;
  }

  .build-platform-quick-prompt .prompt-modal-prompt {
    min-height: clamp(6.6875rem, calc(34.25rem - 122.5vw), 9.75rem);
  }

  .build-platform-zero-setup {
    max-width: 22rem;
  }

  .build-platform-specific {
    margin-right: -1rem;
    margin-bottom: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .build-platform-option {
    min-height: 3.1rem;
    padding: 0.45rem 0.3rem;
  }

  .build-platform-guide {
    min-height: 0;
  }

  .build-platform-guide-actions {
    bottom: -1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 23rem) {
  .build-platform-group--featured .build-platform-options,
  .build-platform-options,
  .build-platform-group--help .build-platform-options {
    grid-template-columns: 1fr;
  }

  .build-platform-option {
    min-height: 3rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .build-platform-modal,
  .build-platform-option,
  .build-platform-instructions-toggle svg {
    transition: none;
  }

  .build-platform-specific {
    animation: none;
  }

  body[data-home-hydrate] .home-how.has-step-reveal .home-how-step,
  body[data-home-hydrate] .home-how.has-step-reveal .home-how-arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Homepage ------------------------------------------------------------- */
body[data-home-hydrate] {
  overflow-x: clip;
  row-gap: 0;
}

body[data-home-hydrate] main {
  width: 100%;
  margin-top: 0;
}

body[data-home-hydrate] .top-nav-account {
  border-color: var(--jk-line);
  background: var(--jk-surface);
  color: var(--jk-text-mid);
  box-shadow: 0 4px 16px var(--jk-shadow);
}

body[data-home-hydrate] .top-nav-account:hover,
body[data-home-hydrate] .top-nav-account:focus-visible {
  border-color: var(--jk-line-strong);
  background: var(--jk-surface-strong);
  color: var(--jk-accent);
}

body[data-home-hydrate] main::before {
  display: none;
}

body[data-home-hydrate] .hero-title {
  position: relative;
  width: fit-content;
  color: var(--jk-text);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: none;
}

body[data-home-hydrate] .hero-title [role="img"] {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 0.205em;
  transform: translateY(calc(-50% - 0.125em));
}

body[data-home-hydrate] .home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 56rem);
  min-height: calc(100svh - 4.5rem);
  margin: 0 auto;
  padding: clamp(3rem, 8svh, 5.5rem) 0 clamp(6.6rem, 13svh, 8.5rem);
}

body[data-home-hydrate] .home-scroll-cue {
  position: absolute;
  bottom: clamp(0.75rem, 2.5svh, 1.7rem);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  color: var(--jk-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transform: translateX(-50%);
  transition: color 0.18s ease, transform 0.18s ease;
}

body[data-home-hydrate] .home-scroll-cue svg {
  width: 1.55rem;
  height: 1.55rem;
  animation: home-cue-drift 2.2s ease-in-out infinite;
}

body[data-home-hydrate] .home-scroll-cue:hover,
body[data-home-hydrate] .home-scroll-cue:focus-visible {
  color: var(--jk-accent);
  outline: none;
  transform: translate(-50%, 0.15rem);
}

body[data-home-hydrate] .home-section-nav {
  --home-nav-opacity: 0;
  --home-nav-translate: -110%;
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--jk-line);
  border-bottom: 1px solid var(--jk-line);
  background: color-mix(in srgb, var(--jk-bg) 88%, transparent);
  box-shadow: 0 0.35rem 1.2rem color-mix(in srgb, var(--jk-shadow) 38%, transparent);
  backdrop-filter: blur(14px);
  opacity: var(--home-nav-opacity);
  pointer-events: none;
  transform: translateY(var(--home-nav-translate));
  visibility: hidden;
  will-change: opacity, transform;
}

body[data-home-hydrate] .home-section-nav.is-visible {
  visibility: visible;
}

body[data-home-hydrate] .home-section-nav.is-interactive {
  pointer-events: auto;
}

body[data-home-hydrate] .home-section-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.72rem, 2.2vw, 1.45rem);
  width: min(calc(100% - 2rem), 38rem);
  min-height: 3.35rem;
  margin: 0 auto;
}

body[data-home-hydrate] .home-section-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--jk-text-soft);
  font-size: clamp(0.77rem, 1.5vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}

body[data-home-hydrate] .home-section-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.18rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--jk-accent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body[data-home-hydrate] .home-section-nav a:hover,
body[data-home-hydrate] .home-section-nav a:focus-visible,
body[data-home-hydrate] .home-section-nav a.is-active {
  color: var(--jk-text);
}

body[data-home-hydrate] .home-section-nav a:focus-visible {
  border-radius: 0.2rem;
  outline: 2px solid var(--jk-accent);
  outline-offset: 0.2rem;
}

body[data-home-hydrate] .home-section-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

body[data-home-hydrate] .home-section-nav-inner > span {
  color: var(--jk-line-strong);
  font-size: 1rem;
  line-height: 1;
}

body[data-home-hydrate] #how-it-works,
body[data-home-hydrate] #what-to-make,
body[data-home-hydrate] #why-jmpkit {
  scroll-margin-top: 4.4rem;
}

@keyframes home-cue-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.28rem); }
}

body[data-home-hydrate] .hero-deck {
  width: min(100%, 38rem);
  color: var(--jk-text-mid);
  font-size: clamp(1.03rem, 2vw, 1.14rem);
  line-height: 1.58;
  text-wrap: balance;
}

body[data-home-hydrate] .hero-deck-line {
  display: block;
}

body[data-home-hydrate] .hero-deck-line + .hero-deck-line {
  margin-top: 0.08em;
}

body[data-home-hydrate] .agent-example {
  --line-soft: #3f4961;
  --text-main: #eef2ff;
  --text-mid: #b7c0d2;
  --text-soft: #909cb1;
  --accent: #7ee2b8;
  --accent-strong: #d1ffe9;
  filter: drop-shadow(0 20px 30px #22322c24);
}

body[data-home-hydrate] .home-free-note,
body[data-home-hydrate] .cli-intro {
  color: var(--jk-text-soft);
}

body[data-home-hydrate] .home-how {
  position: relative;
  width: min(calc(100vw - 2rem), 72rem);
  margin: clamp(3.2rem, 7vw, 5.5rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0 clamp(0.5rem, 2vw, 1rem);
  border-top: 1px solid var(--jk-line);
  color: var(--jk-text);
  text-align: center;
}

body[data-home-hydrate] .home-how::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(92vw, 48rem);
  height: 30rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 17% 38%, color-mix(in srgb, var(--jk-accent) 15%, transparent) 0 4rem, transparent 10rem),
    radial-gradient(circle at 82% 42%, #e1d7ff99 0 3rem, transparent 10rem),
    radial-gradient(ellipse at 50% 72%, #ffdf9b66 0 7rem, transparent 18rem);
  filter: blur(18px);
  pointer-events: none;
}

body[data-home-hydrate] .home-how-kicker {
  color: var(--jk-accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-home-hydrate] .home-how h2 {
  margin: 0.72rem auto 0;
  color: var(--jk-text);
  font-size: clamp(1.85rem, 4.5vw, 3.15rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

body[data-home-hydrate] .home-how-steps {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) 2rem minmax(0, 1.35fr) 2rem minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(0.2rem, 0.7vw, 0.55rem);
  margin-top: clamp(2.7rem, 6vw, 4.3rem);
}

body[data-home-hydrate] .home-how-step {
  --home-how-reveal-delay: 0ms;
  min-width: 0;
}

body[data-home-hydrate] .home-how-step--built {
  --home-how-reveal-delay: 250ms;
}

body[data-home-hydrate] .home-how-step--link {
  --home-how-reveal-delay: 495ms;
}

body[data-home-hydrate] .home-how-arrow:nth-of-type(1) {
  --home-how-reveal-delay: 140ms;
}

body[data-home-hydrate] .home-how-arrow:nth-of-type(2) {
  --home-how-reveal-delay: 390ms;
}

body[data-home-hydrate] .home-how.has-step-reveal.is-reveal-armed .home-how-step,
body[data-home-hydrate] .home-how.has-step-reveal.is-reveal-armed .home-how-arrow {
  transform-origin: 50% 60%;
  transition:
    opacity 800ms ease var(--home-how-reveal-delay),
    transform 1025ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--home-how-reveal-delay);
  will-change: opacity, transform;
}

body[data-home-hydrate] .home-how.has-step-reveal .home-how-step,
body[data-home-hydrate] .home-how.has-step-reveal .home-how-arrow {
  opacity: 0;
  transform: perspective(900px) translateY(10px) translateZ(-28px) scale(0.965);
}

body[data-home-hydrate] .home-how.has-step-reveal .home-how-step.is-item-revealed,
body[data-home-hydrate] .home-how.has-step-reveal .home-how-arrow.is-item-revealed {
  transform: perspective(900px) translateY(0) translateZ(0) scale(1);
}

body[data-home-hydrate] .home-how.has-step-reveal .home-how-step.is-item-revealed {
  opacity: 1;
}

body[data-home-hydrate] .home-how.has-step-reveal .home-how-arrow.is-item-revealed {
  opacity: 0.6;
}

body[data-home-hydrate] .home-how-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

body[data-home-hydrate] .home-how-number {
  display: grid;
  flex: 0 0 1.7rem;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  color: var(--jk-action-text);
  background: var(--jk-action-bg);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--jk-accent) 25%, transparent);
}

body[data-home-hydrate] .home-how-label {
  min-height: 1.7rem;
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--jk-text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-home-hydrate] .home-demo-prompt,
body[data-home-hydrate] .home-demo-app,
body[data-home-hydrate] .home-demo-browser {
  overflow: hidden;
  border: 1px solid var(--jk-line);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--jk-surface) 94%, transparent);
  box-shadow: 0 17px 42px color-mix(in srgb, var(--jk-shadow) 60%, transparent);
}

body[data-home-hydrate] .home-demo-prompt {
  position: relative;
  padding: 1rem;
  text-align: left;
}

body[data-home-hydrate] .home-demo-prompt::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  bottom: -0.42rem;
  width: 0.85rem;
  height: 0.85rem;
  border-right: 1px solid var(--jk-line);
  border-bottom: 1px solid var(--jk-line);
  background: var(--jk-surface);
  transform: rotate(45deg);
}

body[data-home-hydrate] .home-demo-prompt > span {
  display: block;
  color: var(--jk-accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-home-hydrate] .home-demo-prompt p {
  margin-top: 0.5rem;
  color: var(--jk-text);
  font-size: clamp(0.84rem, 1.45vw, 0.96rem);
  font-weight: 500;
  line-height: 1.42;
}

body[data-home-hydrate] .home-demo-app img {
  display: block;
  width: 100%;
  height: clamp(6.8rem, 13vw, 8.15rem);
  object-fit: cover;
}

body[data-home-hydrate] .home-demo-app-body {
  padding: 0.82rem 0.86rem 0.9rem;
  text-align: left;
}

body[data-home-hydrate] .home-demo-app-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}

body[data-home-hydrate] .home-demo-app-title strong {
  color: var(--jk-text);
  font-size: clamp(0.82rem, 1.55vw, 0.97rem);
}

body[data-home-hydrate] .home-demo-app-title > span {
  flex: 0 0 auto;
  color: var(--jk-text-soft);
  font-size: 0.67rem;
}

body[data-home-hydrate] .home-demo-votes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-top: 0.7rem;
}

body[data-home-hydrate] .home-demo-votes span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.43rem 0.46rem;
  border-radius: 0.5rem;
  color: var(--jk-text-mid);
  background: var(--jk-surface-muted);
  font-size: 0.66rem;
}

body[data-home-hydrate] .home-demo-votes b {
  color: var(--jk-accent);
}

body[data-home-hydrate] .home-demo-browser-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.68rem;
  border-bottom: 1px solid var(--jk-line);
  background: var(--jk-surface-muted);
}

body[data-home-hydrate] .home-demo-browser-dots {
  display: flex;
  gap: 0.22rem;
}

body[data-home-hydrate] .home-demo-browser-dots i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #e57b6e;
}

body[data-home-hydrate] .home-demo-browser-dots i:nth-child(2) { background: #e7b85e; }
body[data-home-hydrate] .home-demo-browser-dots i:nth-child(3) { background: #68b98a; }

body[data-home-hydrate] .home-demo-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.5rem 0.62rem;
  border: 1px solid var(--jk-line);
  border-radius: 999px;
  color: var(--jk-text);
  background: var(--jk-bg);
}

body[data-home-hydrate] .home-demo-address svg {
  flex: 0 0 auto;
  width: 0.78rem;
  color: var(--jk-accent);
}

body[data-home-hydrate] .home-demo-address strong {
  min-width: 0;
  overflow: hidden;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(0.78rem, 1.35vw, 1.04rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-home-hydrate] .home-demo-share {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--jk-accent);
}

body[data-home-hydrate] .home-demo-share svg {
  width: 1rem;
}

body[data-home-hydrate] .home-demo-browser-body {
  display: grid;
  justify-items: center;
  gap: 0.36rem;
  padding: clamp(1.15rem, 3vw, 1.8rem) 0.75rem;
}

body[data-home-hydrate] .home-demo-browser-body svg {
  width: 1.7rem;
  color: var(--jk-accent);
}

body[data-home-hydrate] .home-demo-browser-body strong {
  color: var(--jk-text);
  font-size: 0.94rem;
}

body[data-home-hydrate] .home-demo-browser-body span {
  color: var(--jk-text-soft);
  font-size: 0.75rem;
}

body[data-home-hydrate] .home-how-arrow {
  color: var(--jk-text-soft);
  opacity: 0.6;
}

body[data-home-hydrate] .home-how-arrow svg {
  display: block;
  width: 100%;
}

body[data-home-hydrate] .home-how-action {
  display: grid;
  justify-items: center;
  gap: 1.05rem;
  margin-top: clamp(2.5rem, 5vw, 3.4rem);
}

body[data-home-hydrate] .home-how-world {
  position: relative;
  left: 50%;
  width: 100vw;
  height: clamp(23rem, 45vw, 41rem);
  margin-top: clamp(7rem, 12vw, 11rem);
  overflow: hidden;
  transform: translateX(-50%);
}

body[data-home-hydrate] .home-how-world::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 20%;
  background: linear-gradient(180deg, var(--jk-bg), transparent);
  pointer-events: none;
}

body[data-home-hydrate] .home-how-world img {
  display: block;
  width: max(100%, 78rem);
  height: 100%;
  max-width: none;
  margin-left: 50%;
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(-50%);
}

body[data-home-hydrate] .home-why {
  position: relative;
  isolation: isolate;
  width: min(calc(100vw - 2rem), 58rem);
  margin: clamp(4.5rem, 10vw, 9.5rem) auto 0;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--jk-line);
  text-align: center;
}

body[data-home-hydrate] .home-why-kicker {
  color: var(--jk-accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-home-hydrate] .home-why h2 {
  margin: 0.72rem auto 0;
  color: var(--jk-text);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

body[data-home-hydrate] .home-why-intro {
  width: min(100%, 42rem);
  margin: clamp(1.2rem, 2.5vw, 1.65rem) auto 0;
  color: var(--jk-text-mid);
  font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  line-height: 1.6;
  text-wrap: balance;
}

body[data-home-hydrate] .home-why-needs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 5vw, 4.25rem);
}

body[data-home-hydrate] .home-why-needs::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2.7rem;
  right: 7%;
  left: 7%;
  border-top: 1px solid var(--jk-line);
}

body[data-home-hydrate] .home-why-need {
  display: grid;
  justify-items: center;
  gap: 1rem;
  min-width: 0;
}

body[data-home-hydrate] .home-why-need-visual {
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  color: var(--jk-accent);
  border: 1px solid var(--jk-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--jk-accent) 18%, transparent), transparent 58%),
    var(--jk-bg);
  box-shadow: 0 0 0 0.65rem var(--jk-bg);
}

body[data-home-hydrate] .home-why-need-visual svg {
  width: 2.45rem;
  height: 2.45rem;
}

body[data-home-hydrate] .home-why-need strong {
  max-width: 9rem;
  color: var(--jk-text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

body[data-home-hydrate] .home-why-mission {
  position: relative;
  width: min(100%, 40rem);
  margin: clamp(3.8rem, 7vw, 5.5rem) auto 0;
  padding-top: 1.6rem;
  color: var(--jk-text-mid);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  text-wrap: balance;
}

body[data-home-hydrate] .home-why-mission::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5rem;
  border-top: 2px solid var(--jk-accent);
  transform: translateX(-50%);
}

body[data-home-hydrate] .home-why-mission span {
  color: var(--jk-text);
  font-weight: 600;
}

body[data-home-hydrate] .home-why-action {
  display: grid;
  justify-items: center;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}

body[data-home-hydrate] .home-inspire {
  position: relative;
  isolation: isolate;
  width: min(calc(100vw - 2rem), 66rem);
  margin: clamp(5.5rem, 11vw, 9.5rem) auto 0;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--jk-line);
  color: var(--jk-text);
  text-align: center;
}

body[data-home-hydrate] .home-inspire-kicker {
  color: var(--jk-accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-home-hydrate] .home-inspire h2 {
  margin: 0.72rem auto 0;
  color: var(--jk-text);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

body[data-home-hydrate] .home-inspire-intro {
  width: min(100%, 38rem);
  margin: clamp(1.15rem, 2.4vw, 1.55rem) auto 0;
  color: var(--jk-text-mid);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.55;
  text-wrap: balance;
}

body[data-home-hydrate] .home-inspire-prompts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.3rem, 3vw, 2.6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  border-bottom: 1px solid var(--jk-line);
}

body[data-home-hydrate] .home-inspire-prompts li {
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 6.5rem;
  margin: 0;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) 0.25rem clamp(1.25rem, 2.6vw, 1.75rem) 2.25rem;
  border-top: 1px solid var(--jk-line);
  color: var(--jk-text);
  font-size: clamp(0.94rem, 1.7vw, 1.08rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  text-wrap: balance;
}

body[data-home-hydrate] .home-inspire-prompts li > span {
  position: absolute;
  top: 50%;
  left: 0.25rem;
  color: var(--jk-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.72;
  transform: translateY(-36%);
}

body[data-home-hydrate] .home-inspire-close {
  width: min(100%, 38rem);
  margin: clamp(2.8rem, 5vw, 4rem) auto 0;
  color: var(--jk-text-mid);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.55;
  text-wrap: balance;
}

body[data-home-hydrate] .home-inspire-action {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-top: 1.7rem;
}

body[data-home-hydrate] .site-index {
  --home-footer-links-space: clamp(3rem, 6vw, 4.75rem);
  border-top: 0;
  padding-top: var(--home-footer-links-space);
}

body[data-home-hydrate] .site-index-grid {
  margin-bottom: var(--home-footer-links-space);
}

body[data-home-hydrate] .site-copyright {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 42rem) {
  body[data-home-hydrate] .home-hero {
    min-height: calc(100svh - 4rem);
    padding-top: 2.3rem;
    padding-bottom: 6.2rem;
  }

  body[data-home-hydrate] .home-section-nav-inner {
    gap: clamp(0.48rem, 3vw, 0.78rem);
    width: min(calc(100% - 1.25rem), 28rem);
    min-height: 3.15rem;
  }

  body[data-home-hydrate] .home-section-nav a {
    min-height: 2.65rem;
    font-size: clamp(0.72rem, 3.35vw, 0.8rem);
  }

  body[data-home-hydrate] .home-how {
    margin-top: 3.2rem;
  }

  body[data-home-hydrate] .home-how::before {
    top: 4rem;
    left: 50%;
    width: min(100vw, 34rem);
    height: 52rem;
    transform: translateX(-50%);
    background:
      radial-gradient(circle at 22% 14%, color-mix(in srgb, var(--jk-accent) 16%, transparent) 0 3.8rem, transparent 10rem),
      radial-gradient(circle at 78% 49%, #e1d7ff8f 0 3.5rem, transparent 10.5rem),
      radial-gradient(circle at 28% 82%, #ffdf9b61 0 4.8rem, transparent 12rem);
    filter: blur(19px);
  }

  body[data-home-hydrate] .home-how-steps {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(100%, 24rem);
    margin-right: auto;
    margin-left: auto;
  }

  body[data-home-hydrate] .home-how-arrow {
    display: grid;
    place-items: center;
    height: 3.25rem;
  }

  body[data-home-hydrate] .home-how-arrow svg {
    width: 2.6rem;
    transform: rotate(90deg);
  }

  body[data-home-hydrate] .home-demo-app img {
    height: clamp(8rem, 40vw, 10.5rem);
  }

  body[data-home-hydrate] .home-demo-address strong {
    font-size: clamp(0.78rem, 4vw, 0.95rem);
  }

  body[data-home-hydrate] .home-how-world {
    height: clamp(25rem, 110vw, 34rem);
    margin-top: 7rem;
  }

  body[data-home-hydrate] .home-how-world img {
    width: max(100%, 68rem);
  }

  body[data-home-hydrate] .home-why {
    width: min(calc(100vw - 2.5rem), 32rem);
    margin-top: 4.5rem;
    margin-bottom: 0;
  }

  body[data-home-hydrate] .home-why-needs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1rem;
    width: min(100%, 23rem);
    margin-right: auto;
    margin-left: auto;
  }

  body[data-home-hydrate] .home-why-needs::before {
    display: none;
  }

  body[data-home-hydrate] .home-why-need:last-child {
    grid-column: 1 / -1;
  }

  body[data-home-hydrate] .home-why-need-visual {
    width: 4.8rem;
    height: 4.8rem;
  }

  body[data-home-hydrate] .home-why-need-visual svg {
    width: 2.15rem;
    height: 2.15rem;
  }

  body[data-home-hydrate] .home-inspire {
    width: min(calc(100vw - 2.5rem), 32rem);
    margin-top: 5rem;
  }

  body[data-home-hydrate] .home-inspire-prompts {
    grid-template-columns: 1fr;
    width: min(100%, 27rem);
    margin-right: auto;
    margin-left: auto;
  }

  body[data-home-hydrate] .home-inspire-prompts li {
    min-height: 5rem;
    padding: 1.15rem 0.35rem 1.15rem 2.2rem;
  }

  body[data-home-hydrate] .site-index-grid {
    margin-bottom: var(--home-footer-links-space);
  }
}

body[data-home-hydrate] .cli-logo {
  filter: invert(1);
  opacity: 0.6;
}

body[data-home-hydrate] .cli-link:hover .cli-logo,
body[data-home-hydrate] .cli-link:focus-visible .cli-logo {
  opacity: 0.82;
}

.prompt-modal-backdrop,
.account-modal-backdrop {
  background: color-mix(in srgb, var(--jk-text) 38%, transparent);
  backdrop-filter: blur(9px);
}

/* Pricing -------------------------------------------------------------- */
.pricing-page,
.pricing-content,
.pricing-footer {
  color: var(--jk-text);
}

.pricing-page.modal-open .pricing-content {
  z-index: 20;
}

.pricing-header {
  background: color-mix(in srgb, var(--jk-bg) 94%, transparent);
}

.plan,
.plan--pop,
.plan--current {
  border-color: var(--jk-line);
  background: var(--jk-surface);
  box-shadow: 0 14px 34px var(--jk-shadow);
}

.plan--pop,
.plan--current {
  border-color: var(--jk-line-strong);
  background: var(--jk-surface-strong);
}

.toggle-track,
.pricing-toggle.yearly .toggle-track {
  border-color: var(--jk-line-strong);
  background: var(--jk-surface-muted);
}

.pricing-toggle.yearly .toggle-track {
  background: var(--jk-accent);
}

.toggle-track::after {
  background: var(--jk-surface-strong);
  box-shadow: 0 1px 4px var(--jk-shadow);
}

.save-badge {
  border-color: color-mix(in srgb, var(--jk-accent) 32%, var(--jk-line));
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
}

.plan-savings {
  border: 0;
  background: transparent;
  color: var(--jk-accent-strong);
}

.plan--pop .plan-label {
  color: var(--jk-accent);
}

.feature-icon,
.plan--pop .feature-icon {
  color: color-mix(in srgb, var(--jk-accent) 72%, var(--jk-text-mid));
  filter: none;
}

.plan-resources {
  border-color: var(--jk-line);
}

/* Docs and informational pages --------------------------------------- */
.docs-page .top-bar,
.docs-page .docs-quicknav {
  background: color-mix(in srgb, var(--jk-bg) 94%, transparent);
}

.starter-info-button {
  border-color: var(--jk-line-strong);
  background: var(--jk-surface-muted);
  color: var(--jk-text-mid);
}

.download-btn code,
.kit-download code {
  border: 0;
  background: transparent;
  color: inherit;
}

.primitive {
  background: var(--jk-surface);
}

.callout {
  border-color: color-mix(in srgb, var(--jk-warn) 35%, var(--jk-line));
  background: color-mix(in srgb, var(--jk-warn) 7%, var(--jk-surface));
  color: var(--jk-text);
}

/* Account and connection surfaces ----------------------------------- */
.profile-input,
.profile-textarea {
  border-color: var(--jk-line);
  background: var(--jk-surface);
  color: var(--jk-text);
}

.profile-input::placeholder,
.profile-textarea::placeholder {
  color: var(--jk-text-soft);
}

.profile-input:hover,
.profile-textarea:hover {
  border-color: var(--jk-line-strong);
}

.profile-input:focus,
.profile-textarea:focus {
  border-color: var(--jk-accent);
  background: var(--jk-surface-strong);
  box-shadow: 0 0 0 3px var(--jk-accent-glow);
}

.location-clear:hover,
.location-clear:focus-visible,
.location-suggestion:hover,
.location-suggestion:focus-visible,
.location-suggestion.is-active {
  background: var(--jk-accent-soft);
  color: var(--jk-text);
}

.location-suggestions {
  border-color: var(--jk-line);
  background: var(--jk-surface-strong);
  box-shadow: 0 18px 36px var(--jk-shadow);
}

.location-suggestion-icon,
.location-suggestion.is-custom .location-suggestion-icon {
  background: var(--jk-accent-soft);
  color: var(--jk-accent-strong);
}

.recovery-save-notice {
  border-color: color-mix(in srgb, var(--jk-accent) 30%, var(--jk-line));
  background: var(--jk-accent-soft);
}

.usage-bar {
  background: var(--jk-line);
}

.usage-bar-fill {
  background: var(--jk-accent);
}

.add-agent-button::after {
  border-color: var(--jk-line-strong);
  background: var(--jk-surface-strong);
  color: var(--jk-text);
  box-shadow: 0 10px 24px var(--jk-shadow);
}

#connect-form button {
  border-color: var(--jk-action-bg);
  background: var(--jk-action-bg);
  color: var(--jk-action-text);
}

#connect-form button:hover,
#connect-form button:focus-visible {
  border-color: var(--jk-action-hover);
  background: var(--jk-action-hover);
  color: var(--jk-action-text);
}

/* Machine-facing agent instructions --------------------------------- */
.agent-docs-page .topline {
  color: var(--jk-text-soft);
}

.agent-docs-page .topline a {
  color: var(--jk-accent-strong);
}

.agent-docs-page pre {
  border-color: var(--jk-line);
  background: var(--jk-surface-muted);
  color: var(--jk-text);
  box-shadow: 0 12px 28px var(--jk-shadow);
}

.agent-docs-page .site-index {
  border-color: var(--jk-line);
}

/* Backend OS ---------------------------------------------------------- */
.top {
  border-color: var(--jk-line);
  background: color-mix(in srgb, var(--jk-bg) 92%, transparent);
}

.statement {
  border-color: var(--jk-line);
  background: var(--jk-surface-muted);
  color: var(--jk-accent-strong);
}

.flow {
  border-color: var(--jk-line);
  background: var(--jk-line);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.flow div {
  background: var(--jk-surface);
}

/* Ignore control ------------------------------------------------------ */
.ignore-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ignore-card .detail {
  border-color: var(--jk-line);
  background: transparent;
  box-shadow: none;
}

.ignore-card .eyebrow,
.ignore-card label,
.ignore-card .current,
.ignore-card .intro,
.ignore-card .detail,
.ignore-card .actions a {
  color: var(--jk-text-mid);
}

.ignore-card .current strong {
  color: var(--jk-text);
}

@media (max-width: 820px) {
  .flow {
    grid-template-columns: 1fr;
  }
}

/* Press keeps its editorial structure while sharing the palette. */
.article-immediate,
.kit-download {
  color: var(--jk-bg);
  background: var(--jk-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --jk-bg: #06070b;
    --jk-bg-deep: #070a12;
    --jk-surface: #121827;
    --jk-surface-strong: #171f31;
    --jk-surface-muted: #0d1320;
    --jk-line: #303a54;
    --jk-line-strong: #536388;
    --jk-text: #eef2ff;
    --jk-text-mid: #b7c0d2;
    --jk-text-soft: #909cb1;
    --jk-accent: #7ee2b8;
    --jk-accent-strong: #d1ffe9;
    --jk-accent-soft: #12352c;
    --jk-action-bg: #7ee2b8;
    --jk-action-hover: #d1ffe9;
    --jk-action-text: #07100c;
    --jk-danger: #ff8d8d;
    --jk-warn: #ffd48a;
    --jk-shadow: #02040a73;
  }

  body[data-home-hydrate] .cli-logo {
    filter: none;
    opacity: 0.78;
  }

  .build-platform-brand-logo--monochrome {
    filter: invert(1);
  }

  body[data-home-hydrate] .home-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(92vw, 56rem);
    height: min(68svh, 38rem);
    background:
      radial-gradient(ellipse at 42% 44%, color-mix(in srgb, var(--jk-accent) 15%, transparent) 0 5rem, transparent 19rem),
      radial-gradient(ellipse at 70% 56%, #7868d52b 0 4rem, transparent 18rem);
    filter: blur(28px);
    opacity: 0.82;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  body[data-home-hydrate] .home-why::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4rem;
    left: 50%;
    width: min(96vw, 72rem);
    height: 34rem;
    background:
      radial-gradient(circle at 18% 44%, color-mix(in srgb, var(--jk-accent) 12%, transparent) 0 3rem, transparent 14rem),
      radial-gradient(circle at 52% 28%, #7868d522 0 4rem, transparent 17rem),
      radial-gradient(circle at 84% 48%, #4b95d91f 0 3rem, transparent 14rem);
    filter: blur(30px);
    opacity: 0.76;
    transform: translateX(-50%);
    pointer-events: none;
  }

  body[data-home-hydrate] .home-how-world img {
    filter: brightness(0.84) saturate(0.96) contrast(1.02);
  }

  body[data-home-hydrate] .home-how-world::before {
    height: 46%;
    background: linear-gradient(
      180deg,
      var(--jk-bg) 0%,
      color-mix(in srgb, var(--jk-bg) 94%, transparent) 20%,
      color-mix(in srgb, var(--jk-bg) 68%, transparent) 54%,
      transparent 100%
    );
  }

  .article-immediate,
  .kit-download {
    color: var(--jk-bg);
    background: var(--jk-text);
  }
}