/* Herdr-inspired zigttp home redesign. */

.zigttp-home {
  --z-bg: #f4f7f1;
  --z-bg-soft: #e7eee7;
  --z-paper: #fffdf8;
  --z-paper-muted: #f3f6ef;
  --z-ink: #151a21;
  --z-ink-soft: #303944;
  --z-muted: #556271;
  --z-line: #d4ddd3;
  --z-line-strong: #bac8bb;
  --z-terminal: #151a21;
  --z-terminal-2: #202731;
  --z-terminal-3: #2a3340;
  --z-accent: #6eaddb;
  --z-accent-dark: #2a6796;
  --z-accent-soft: #e4f2f7;
  --z-blue: #2563eb;
  --z-green: #2f8a4f;
  --z-yellow: #9a6a00;
  --z-red: #c43f5f;
  --z-shadow-sm: 0 6px 18px rgb(25 37 31 / 0.06);
  --z-shadow-md: 0 14px 40px rgb(25 37 31 / 0.09);
  --z-shadow-lg: 0 24px 80px rgb(25 37 31 / 0.12);
  --z-shadow: var(--z-shadow-lg);
  --z-radius-lg: 24px;
  --z-radius-md: 16px;
  --z-radius-sm: 10px;
  --z-max: 1160px;
  --z-mono: "JetBrains Mono", "SF Mono", Consolas, ui-monospace, monospace;
  --z-sans:
    "Outfit",
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgb(110 173 219 / 0.14),
      transparent 30rem
    ),
    radial-gradient(
    circle at 92% 4rem,
    rgb(110 173 219 / 0.12),
    transparent 28rem
  ),
    linear-gradient(180deg, #fbfcf8 0%, var(--z-bg) 34rem, #e8efe1 100%);
  color: var(--z-ink);
  font-family: var(--z-sans);
  font-size: 16px;
  line-height: 1.6;
}

.zigttp-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgb(21 26 33 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(21 26 33 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 70%);
  mask-image: linear-gradient(180deg, black, transparent 70%);
}

.zigttp-home a {
  color: inherit;
  text-decoration: none;
}

.zigttp-home a:not(.z-button):hover {
  color: var(--z-accent-dark);
}

.zigttp-home code,
.zigttp-home pre {
  font-family: var(--z-mono);
}

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

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-150%);
  border-radius: 999px;
  background: var(--z-terminal);
  color: var(--z-paper);
  padding: 0.65rem 0.9rem;
}

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

.z-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgb(212 221 211 / 0.78);
  background: rgb(244 247 241 / 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.z-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--z-max);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
}

.z-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--z-ink);
  font-family: var(--z-mono);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.z-brand img {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(186 200 187 / 0.78);
  border-radius: 13px;
  background: #dce3dd;
  box-shadow: 0 10px 28px rgb(21 26 33 / 0.13);
}

.z-brand small {
  border: 1px solid var(--z-line);
  border-radius: 999px;
  color: var(--z-muted);
  font-family: var(--z-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.18rem 0.45rem;
}

.z-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--z-muted);
  font-size: 0.92rem;
}

.z-nav-links a,
.z-footer a,
.z-inline-links a {
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.z-nav-links a.active {
  color: var(--z-accent-dark);
  font-weight: 750;
}

.z-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.3rem;
  padding: 0 1rem;
  border: 1px solid var(--z-line-strong);
  border-radius: 999px;
  background: rgb(255 253 248 / 0.74);
  color: var(--z-ink-soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.z-nav-cta:hover {
  border-color: var(--z-accent-dark);
  background: var(--z-accent-soft);
}

.z-menu-button {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  gap: 0.25rem;
  border: 1px solid var(--z-line-strong);
  border-radius: 999px;
  background: rgb(255 253 248 / 0.78);
  color: var(--z-ink);
  cursor: pointer;
}

.z-menu-button span {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.z-menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.z-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.z-menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.z-hero,
.z-section,
.z-footer,
.z-final-cta {
  max-width: var(--z-max);
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.z-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.22fr);
  gap: 3.25rem;
  align-items: center;
  max-width: 1280px;
  min-height: min(860px, calc(100svh - 108px));
  overflow: hidden;
  padding-top: 4.25rem;
  padding-bottom: 3.5rem;
}

.z-hero-copy,
.z-product-shot {
  position: relative;
  z-index: 1;
}

.z-hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.z-hero-field::before,
.z-hero-field::after {
  content: "{ proof }";
  position: absolute;
  color: rgb(110 173 219 / 0.08);
  font-family: var(--z-mono);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.z-hero-field::before {
  top: 8%;
  right: 5%;
  transform: rotate(-8deg);
}

.z-hero-field::after {
  bottom: -3%;
  left: 0;
  color: rgb(37 99 235 / 0.035);
  content: "safe_with_additions";
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  transform: rotate(5deg);
}

.z-eyebrow,
.z-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--z-accent-dark);
  font-family: var(--z-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.z-status-dot {
  display: inline-block;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgb(110 173 219 / 0.1);
  vertical-align: middle;
}

.z-dot-safe {
  background: var(--z-green);
}

.z-dot-review {
  background: var(--z-yellow);
}

.z-dot-blocked {
  background: var(--z-red);
}

.z-dot-idle {
  background: var(--z-blue);
}

.z-hero h1,
.z-section h2,
.z-final-cta h2 {
  margin: 0;
  color: var(--z-ink);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-wrap: balance;
}

.z-hero h1 {
  max-width: 13ch;
  font-size: 4.25rem;
}

.z-hero-lede {
  max-width: 43rem;
  margin: 1.35rem 0 0;
  color: var(--z-ink-soft);
  font-size: clamp(1.04rem, 1.8vw, 1.21rem);
  font-weight: 500;
  line-height: 1.55;
}

.z-hero-lede code {
  border: 1px solid var(--z-line);
  border-radius: 7px;
  background: rgb(255 253 248 / 0.72);
  color: var(--z-accent-dark);
  font-size: 0.88em;
  padding: 0.08rem 0.26rem;
}

.z-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.z-hero-actions.center {
  justify-content: center;
}

.z-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  font-weight: 750;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.z-button:hover {
  transform: translateY(-1px);
}

.z-button-primary {
  border: 1px solid var(--z-accent-dark);
  background: var(--z-accent);
  color: #10243a;
}

.z-button-primary:hover {
  background: var(--z-accent-dark);
  color: #fffdf8;
}

.z-button-secondary {
  border: 1px solid var(--z-line-strong);
  background: rgb(255 253 248 / 0.72);
  color: var(--z-ink-soft);
}

.z-button-secondary:hover {
  border-color: var(--z-accent-dark);
  background: var(--z-accent-soft);
}

.z-install-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  max-width: 46rem;
  margin-top: 1.15rem;
  border: 1px solid var(--z-line-strong);
  border-radius: var(--z-radius-md);
  background: rgb(255 253 248 / 0.85);
  box-shadow: var(--z-shadow-md);
  padding: 0.72rem 0.8rem;
}

.z-install-card code {
  overflow: hidden;
  color: var(--z-ink-soft);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-prompt {
  color: var(--z-accent-dark);
  font-family: var(--z-mono);
  font-weight: 800;
}

.z-install-card button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border: 1px solid var(--z-line);
  border-radius: 999px;
  background: var(--z-paper-muted);
  color: var(--z-ink-soft);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.42rem 0.85rem;
}

.z-install-card button:hover {
  background: var(--z-accent-soft);
}

.z-hero-note {
  max-width: 42rem;
  margin: 0.95rem 0 0;
  color: var(--z-muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.z-product-shot {
  min-width: 0;
  transform: rotate(1deg);
}

.z-product-shot figcaption {
  margin-top: 0.85rem;
  color: var(--z-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.z-studio-mock {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 490px;
  overflow: hidden;
  border: 1px solid rgb(42 103 150 / 0.28);
  border-radius: var(--z-radius-lg);
  background: var(--z-terminal);
  box-shadow: var(--z-shadow);
  color: #e8edf1;
  font-family: var(--z-mono);
}

.z-studio-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
  border-right: 1px solid rgb(255 255 255 / 0.08);
  background: #10141a;
  padding: 1rem 0.78rem;
}

.z-sidebar-title,
.z-sidebar-row {
  display: flex;
  justify-content: space-between;
  color: #96a0ac;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.z-surface,
.z-proof-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  border-radius: 13px;
  padding: 0.58rem;
}

.z-surface.active {
  background: rgb(217 238 233 / 0.1);
}

.z-surface strong,
.z-proof-item strong {
  display: block;
  overflow: hidden;
  color: #f6f8fb;
  font-size: 0.76rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-surface small,
.z-proof-item small {
  display: block;
  overflow: hidden;
  color: #96a0ac;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-sidebar-spacer {
  flex: 1;
  min-height: 0.6rem;
}

.z-proof-item > span {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 8px;
  background: rgb(47 138 79 / 0.18);
  color: #7fd59b;
  font-weight: 900;
}

.z-studio-main {
  min-width: 0;
  background:
    radial-gradient(circle at 88% 8%, rgb(37 99 235 / 0.16), transparent 16rem),
    var(--z-terminal);
}

.z-studio-tabs {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 0.85rem 0.9rem 0;
}

.z-studio-tabs span {
  border: 1px solid rgb(255 255 255 / 0.08);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgb(255 255 255 / 0.04);
  color: #9da7b3;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.46rem 0.68rem;
  white-space: nowrap;
}

.z-studio-tabs span.active {
  background: var(--z-terminal-2);
  color: #f6f8fb;
}

.z-studio-tabs span:last-child {
  margin-left: auto;
}

.z-studio-panes {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 0.8rem;
  min-width: 0;
  padding: 0.9rem;
}

.z-code-pane,
.z-verdict-pane,
.z-code-card {
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--z-radius-md);
  background: var(--z-terminal-2);
}

.z-code-pane.focused {
  box-shadow: inset 0 0 0 1px rgb(217 238 233 / 0.18);
}

.z-pane-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  color: #9da7b3;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.72rem 0.82rem;
}

.z-pane-title em {
  color: #6fcf97;
  font-style: normal;
}

.z-code-pane pre,
.z-verdict-pane pre,
.z-code-card pre {
  margin: 0;
  overflow: auto;
  padding: 0.9rem;
}

.z-code-pane code,
.z-verdict-pane code,
.z-code-card code {
  color: #d8dee8;
  font-size: 0.72rem;
  line-height: 1.72;
}

.z-token-key,
.z-cmd {
  color: #8ab4ff;
}

.z-token-str,
.z-str {
  color: #96d49c;
}

.z-muted {
  color: #8e99a6;
}

.z-safe {
  color: #7fd59b;
}

.z-err {
  color: #ff8b96;
  font-weight: 700;
}

.z-agent {
  color: #8ab4ff;
  font-weight: 700;
}

.z-verdict-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.z-verdict {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem;
  border-radius: 18px;
  padding: 1rem;
}

.z-verdict-safe {
  background: rgb(47 138 79 / 0.16);
  color: #9be7b0;
}

.z-verdict span {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.z-verdict strong {
  font-size: 2rem;
  letter-spacing: 0;
}

.z-verdict-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0 0.9rem 0.9rem;
}

.z-verdict-grid span {
  color: #8e99a6;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.z-verdict-grid strong {
  margin-bottom: 0.25rem;
  color: #f4f7fb;
  font-size: 0.78rem;
}

.z-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.z-heading-wide {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.25rem;
}

/* The playground is the centerpiece: give its heading a clean, single-column
   runway instead of the two-column heading layout, which left dead space above
   the title when the intro paragraph ran longer than the heading. */
.z-playground .z-heading-wide {
  display: block;
  max-width: 760px;
}

.z-playground .z-heading-wide p {
  margin-top: 1rem;
}

.z-section-heading {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.z-heading-wide h2,
.z-section-heading h2,
.z-api-copy h2,
.z-final-cta h2 {
  font-size: 4.7rem;
}

.z-heading-wide p,
.z-api-copy p,
.z-final-cta p {
  margin: 0;
  color: var(--z-ink-soft);
  font-size: 1.05rem;
  line-height: 1.68;
}

.z-contrast-grid,
.z-pillar-grid {
  display: grid;
  gap: 1rem;
}

.z-contrast-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.z-contrast-grid article,
.z-pillar-grid article {
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-md);
  background: rgb(255 253 248 / 0.76);
  box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
}

.z-contrast-grid article {
  padding: 1.15rem;
}

.z-contrast-grid span {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--z-accent-dark);
  font-family: var(--z-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.z-contrast-grid p,
.z-pillar-grid p {
  margin: 0;
  color: var(--z-muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

.z-table-wrap {
  overflow: hidden;
  border: 1px solid var(--z-line-strong);
  border-radius: var(--z-radius-lg);
  background: rgb(255 253 248 / 0.84);
  box-shadow: var(--z-shadow);
}

.z-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.z-table-wrap th,
.z-table-wrap td {
  border-bottom: 1px solid var(--z-line);
  padding: 1rem;
  text-align: left;
}

.z-table-wrap tr:last-child td {
  border-bottom: 0;
}

.z-table-wrap th {
  color: var(--z-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.z-table-wrap td:first-child {
  color: var(--z-ink);
  font-weight: 750;
}

.z-table-wrap th:last-child,
.z-table-wrap td:last-child {
  background: var(--z-accent-soft);
  color: var(--z-accent-dark);
  font-weight: 850;
}

/* De-emphasize the competitor columns so the proven zigttp column carries
   the eye. The first column (capability) and last column (zigttp) keep their
   weight; the middle three read as muted. */
.z-table-wrap td:not(:first-child):not(:last-child) {
  color: var(--z-muted);
}

.z-compare-cards {
  display: none;
}

.z-api-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1fr);
  gap: 3rem;
  align-items: center;
}

/* Expert agent: inverted two-column (terminal left, copy right) so this
   flagship beat reads differently from the prose-left sections around it. */
.z-expert {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(0, 0.82fr);
  gap: 3rem;
  align-items: center;
}

.z-expert-terminal {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgb(110 173 219 / 0.22),
      transparent 16rem
    ),
    var(--z-terminal);
}

/* Compiler-in-the-loop: the loop diagram leads, while the transcript stays
   available on demand for visitors who want the full compiler exchange. */
.z-loop {
  margin: 0 0 3.25rem;
}

.z-loop-head {
  margin: 0 0 1.4rem;
  color: var(--z-muted);
  font-family: var(--z-mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.z-loop-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.z-loop-step {
  position: relative;
  padding: 1.15rem;
  border-radius: var(--z-radius-md);
  background: var(--z-paper);
  box-shadow: 0 1px 0 rgb(35 29 21 / 0.04), 0 14px 34px rgb(35 29 21 / 0.07);
}

/* Forward connector between steps, sitting in the column gap. */
.z-loop-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.08rem;
  transform: translateY(-50%);
  color: var(--z-line-strong);
  font-weight: 900;
}

/* The step that hands off to Proven reads as a gate, not just another arrow.
   Keyed off the proven step's class, so adding or removing a step can't
   silently misplace the gate. */
.z-loop-step:has(+ .z-loop-step-proven)::after {
  content: "✓";
  color: var(--z-accent-dark);
}

.z-loop-num {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--z-accent-dark);
  font-family: var(--z-mono);
  font-size: 0.75rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.z-loop-step strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--z-ink);
  font-size: 1.02rem;
  letter-spacing: 0;
  text-wrap: balance;
}

.z-loop-step p {
  margin: 0;
  color: var(--z-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.z-loop-step-proven {
  background:
    radial-gradient(
      circle at 80% 0%,
      rgb(110 173 219 / 0.28),
      transparent 11rem
    ),
    var(--z-accent-soft);
  box-shadow:
    0 1px 0 rgb(42 103 150 / 0.12),
    0 18px 40px rgb(42 103 150 / 0.16);
}

.z-loop-step-proven .z-status-dot {
  display: block;
  margin-bottom: 0.6rem;
}

.z-loop-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  color: var(--z-muted);
  font-family: var(--z-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.z-loop-cycle::before {
  content: "↺";
  font-size: 1.05rem;
  line-height: 1;
  color: var(--z-accent-dark);
}

.z-expert-contrast {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
}

/* Differentiate the two outcomes by weight, not color alone: the dot plus the
   label carry the meaning, the surface treatment reinforces it. */
.z-expert-contrast span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.z-contrast-weak {
  background: rgb(246 240 230 / 0.6);
}

.z-contrast-weak p {
  color: var(--z-muted);
}

.z-contrast-strong {
  border-color: var(--z-accent);
  background:
    radial-gradient(
      circle at 88% 0%,
      rgb(110 173 219 / 0.18),
      transparent 13rem
    ),
    var(--z-accent-soft);
  box-shadow: var(--z-shadow-md);
}

.z-expert-note {
  max-width: 60rem;
  margin-top: 1.75rem;
  color: var(--z-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.z-expert-note code {
  color: var(--z-accent-dark);
}

.z-expert-trust {
  margin: 1.25rem 0 0;
}

.z-expert-terminal summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  color: #e8edf1;
  cursor: pointer;
  font-family: var(--z-mono);
  font-size: 0.78rem;
  font-weight: 800;
  list-style: none;
}

.z-expert-terminal summary::-webkit-details-marker {
  display: none;
}

.z-expert-terminal summary::after {
  content: "+";
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  color: #9da7b3;
}

.z-expert-terminal[open] summary::after {
  content: "-";
}

.z-expert-terminal summary em {
  margin-left: auto;
  color: #8e99a6;
  font-style: normal;
  font-weight: 700;
}

.z-check-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.z-check-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  color: var(--z-ink-soft);
  font-weight: 650;
}

.z-check-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 8px;
  background: var(--z-accent-soft);
  color: var(--z-accent-dark);
  font-size: 0.8rem;
  font-weight: 900;
}

.z-code-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 0%, rgb(37 99 235 / 0.16), transparent 14rem),
    var(--z-terminal);
  box-shadow: var(--z-shadow);
}

.z-code-card pre {
  padding: 1.25rem;
}

.z-code-card code {
  font-size: 0.83rem;
  line-height: 1.78;
}

.z-pillar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.z-pillar-grid article {
  min-height: 18rem;
  padding: 1.2rem;
}

.z-card-index {
  display: block;
  margin-bottom: 4.5rem;
  color: var(--z-accent-dark);
  font-family: var(--z-mono);
  font-size: 0.78rem;
  font-weight: 900;
}

.z-pillar-grid h3 {
  margin: 0 0 0.7rem;
  color: var(--z-ink);
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 1.05;
}

.z-pillar-grid code {
  color: var(--z-accent-dark);
  font-size: 0.86em;
}

.z-api-copy {
  max-width: 30rem;
}

.z-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.z-inline-links a {
  border-bottom: 1px solid var(--z-line-strong);
  color: var(--z-accent-dark);
  font-weight: 800;
}

.z-state-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
  color: var(--z-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.z-state-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.z-calm-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: -0.6rem 0 2rem;
  color: var(--z-muted);
  font-family: var(--z-mono);
  font-size: 0.74rem;
  font-weight: 800;
}

.z-calm-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--z-line);
  border-radius: 999px;
  background: rgb(255 253 248 / 0.7);
  padding: 0.42rem 0.65rem;
}

.z-calm-strip .z-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  box-shadow: none;
}

/* Dark closing slab: a deliberate punctuation against the cream sections, using
   the same terminal ink as the studio mock and playground so the page ends on a
   strong, on-brand beat instead of one more soft panel. */
.z-final-cta {
  margin-bottom: 4rem;
  border: 1px solid var(--z-terminal-3);
  border-radius: var(--z-radius-lg);
  background:
    radial-gradient(
      circle at 80% 0%,
      rgb(110 173 219 / 0.3),
      transparent 22rem
    ),
    var(--z-terminal);
  box-shadow: var(--z-shadow-lg);
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}

.z-final-cta h2 {
  color: #f4f7fb;
  max-width: 54rem;
  margin-inline: auto;
}

.z-final-cta h2 code {
  display: inline-block;
  color: inherit;
  font-size: 0.78em;
  letter-spacing: 0;
  white-space: nowrap;
}

.z-final-cta p {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: #aeb7c2;
}

.z-final-cta .z-section-kicker {
  justify-content: center;
  color: #7fd59b;
}

/* Secondary CTA reads as a light outline on the dark slab. */
.z-final-cta .z-button-secondary {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.04);
  color: #e8edf1;
}

.z-final-cta .z-button-secondary:hover {
  border-color: var(--z-accent-dark);
  background: rgb(110 173 219 / 0.3);
}

.z-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--z-line);
  color: var(--z-muted);
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.z-footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .z-hero,
  .z-api-section,
  .z-expert,
  .z-heading-wide {
    grid-template-columns: 1fr;
  }

  /* Lead with the heading, not the terminal, when the expert section stacks. */
  .z-expert .z-expert-copy {
    order: -1;
  }

  .z-loop-flow,
  .z-expert-contrast {
    grid-template-columns: 1fr;
  }

  .z-loop-step:not(:last-child)::after {
    display: none;
  }

  .z-hero {
    min-height: auto;
    padding-top: 4rem;
  }

  .z-product-shot {
    max-width: 790px;
    transform: none;
  }

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

@media (max-width: 760px) {
  .z-nav {
    padding-inline: 1rem;
  }

  .z-menu-button {
    display: grid;
  }

  .z-nav-cta {
    display: none;
  }

  .z-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--z-line);
    background: rgb(244 247 241 / 0.96);
    padding: 0.4rem 1rem 0.8rem;
  }

  .z-nav-links.open {
    display: flex;
  }

  .z-nav-links a {
    border-bottom: 1px solid var(--z-line);
    padding: 0.85rem 0;
  }

  .z-nav-links a:last-child {
    border-bottom: 0;
  }

  .z-brand small {
    display: none;
  }

  .z-hero,
  .z-section,
  .z-footer,
  .z-final-cta {
    padding-inline: 1rem;
  }

  .z-hero {
    gap: 2rem;
    padding-top: 3.25rem;
    padding-bottom: 2.5rem;
  }

  .z-hero h1 {
    font-size: 3.25rem;
  }

  .z-eyebrow,
  .z-section-kicker {
    max-width: 100%;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .z-hero-lede {
    font-size: 1rem;
  }

  .z-install-card {
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .z-install-card code {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .z-install-card button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .z-product-shot,
  .z-studio-mock {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .z-studio-mock {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 20px;
  }

  .z-studio-sidebar {
    display: none;
  }

  .z-studio-panes {
    grid-template-columns: 1fr;
  }

  .z-code-pane,
  .z-verdict-pane {
    max-width: 100%;
    overflow: hidden;
  }

  .z-pane-title {
    min-width: 0;
  }

  .z-pane-title span,
  .z-pane-title em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .z-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .z-heading-wide h2,
  .z-section-heading h2,
  .z-api-copy h2,
  .z-final-cta h2 {
    font-size: 2.75rem;
  }

  .z-final-cta h2 code {
    white-space: normal;
  }

  .z-contrast-grid,
  .z-pillar-grid {
    grid-template-columns: 1fr;
  }

  .z-expert {
    gap: 1.5rem;
  }

  .z-expert .z-expert-copy {
    order: 0;
  }

  .z-expert-terminal {
    order: -1;
  }

  .z-table-wrap {
    display: none;
  }

  .z-compare-cards {
    display: grid;
    gap: 0.75rem;
  }

  .z-compare-cards article {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-md);
    background: rgb(255 253 248 / 0.76);
    padding: 1rem;
  }

  .z-compare-cards h3 {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem;
    color: var(--z-ink);
    font-size: 1.05rem;
    letter-spacing: 0;
  }

  .z-compare-cards span {
    display: grid;
    gap: 0.25rem;
    border-radius: 14px;
    background: var(--z-paper-muted);
    color: var(--z-muted);
    font-size: 0.7rem;
    font-weight: 850;
    padding: 0.65rem 0.5rem;
    text-align: center;
    text-transform: uppercase;
  }

  .z-compare-cards b {
    color: var(--z-ink-soft);
    font-size: 0.86rem;
    text-transform: none;
  }

  .z-compare-cards .zigttp {
    background: var(--z-accent-soft);
    color: var(--z-accent-dark);
  }

  .z-pillar-grid article {
    min-height: auto;
  }

  .z-card-index {
    margin-bottom: 2.25rem;
  }

  .z-final-cta {
    border-radius: 24px;
    margin-bottom: 3rem;
  }

  .z-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .z-footer div {
    justify-content: flex-start;
  }

  .zp-tab,
  .zp-lensbar button,
  button.zp-chip {
    min-height: 2.75rem;
  }

  /* 16px on the editor and its highlight overlay stops iOS Safari from
     zooming the viewport when the field gains focus. Both layers must match
     or the syntax overlay drifts out of alignment with the caret. */
  .zp-src,
  .zp-highlight {
    font-size: 16px;
  }

  .zp-tabs,
  .zp-lensbar {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .zp-tabs::-webkit-scrollbar,
  .zp-lensbar::-webkit-scrollbar {
    display: none;
  }

  .zp-tab,
  .zp-lensbar button {
    flex: 0 0 auto;
  }

  .zp-head {
    flex-wrap: wrap;
  }

  .zp-live-readout {
    margin-left: 0;
  }
}

@media (max-width: 460px) {
  .z-hero h1 {
    font-size: 2.95rem;
  }

  .z-heading-wide h2,
  .z-section-heading h2,
  .z-api-copy h2,
  .z-final-cta h2 {
    font-size: 2.45rem;
  }

  .z-button {
    width: 100%;
  }

  .z-hero-actions {
    width: 100%;
  }

  .z-product-shot figcaption {
    font-size: 0.78rem;
  }

  .z-studio-tabs span {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .z-code-pane code,
  .z-verdict-pane code,
  .z-code-card code {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zigttp-home *,
  .zigttp-home *::before,
  .zigttp-home *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Live proof playground (#playground). The editor and proof card mirror the
   `zigttp dev` terminal HUD; the real zigts analyzer runs in WebAssembly.
   --------------------------------------------------------------------------- */

.z-playground .zp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: 1.5rem;
  align-items: stretch;
}

.zp-editor-col {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(42 103 150 / 0.28);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  background: var(--z-terminal);
  box-shadow: var(--z-shadow);
}

.zp-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 1rem 0;
  background: var(--z-terminal);
}

.zp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  color: #9da7b3;
  font-family: var(--z-mono);
  font-size: 0.74rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.zp-tab code {
  color: inherit;
  font-size: 0.95em;
}

.zp-tab:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.zp-tab.active {
  background: var(--z-accent-soft);
  border-color: var(--z-accent);
  color: var(--z-terminal);
}

.zp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--z-terminal-2);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.zp-demo-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.zp-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #cbd7e3;
  font-family: var(--z-mono);
  font-size: 0.82rem;
}

.zp-perturbations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.zp-perturbations button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.34rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  color: #cbd7e3;
  font-family: var(--z-mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.zp-demo-replay {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.34rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(110 173 219 / 0.1);
  color: #cbd7e3;
  font-family: var(--z-mono);
  font-size: 0.72rem;
  cursor: pointer;
}

.zp-demo-state {
  color: #8e99a6;
  font-family: var(--z-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.zp-perturbations button:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.zp-demo-replay:hover {
  background: rgb(110 173 219 / 0.18);
  color: #fff;
}

.zp-perturbations button.active {
  background: var(--z-red);
  border-color: var(--z-red);
  color: #fff;
}

.zp-editor {
  position: relative;
  flex: 1;
  min-height: 318px;
}

.zp-highlight,
.zp-src {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 1rem 1.15rem;
  border: 0;
  box-sizing: border-box;
  font-family: var(--z-mono);
  font-size: 13px;
  line-height: 1.62;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}

.zp-src {
  z-index: 1;
  resize: none;
  color: #e8edf1;
  background: transparent;
  caret-color: #8ab4ff;
  outline: none;
}

.zp-highlight {
  z-index: 0;
  display: none;
  color: #e8edf1;
  pointer-events: none;
}

.zp-highlight code {
  font: inherit;
  color: inherit;
}

.zp-js .zp-highlight {
  display: block;
}

.zp-js .zp-src {
  color: transparent;
}

.zp-com {
  color: #6f7d8c;
  font-style: italic;
}

/* --- proof card --- */
.zp-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid rgb(42 103 150 / 0.28);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  background: var(--z-terminal);
  box-shadow: var(--z-shadow);
  color: #e8edf1;
  font-family: var(--z-mono);
}

.zp-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  transition: background-color 0.25s ease;
}

.zp-head.zp-ok {
  background: linear-gradient(90deg, rgb(47 138 79 / 0.28), transparent);
}

.zp-head.zp-blocked {
  background: linear-gradient(90deg, rgb(196 63 95 / 0.3), transparent);
}

.zp-verdict {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.zp-ok .zp-verdict {
  color: #7fd59b;
}

.zp-blocked .zp-verdict {
  color: #ff8497;
}

.zp-count {
  color: #cbd7e3;
  font-size: 0.78rem;
  font-weight: 500;
}

.zp-live-readout {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Geometry and color come from the shared `.z-status-dot z-dot-safe` it is
   applied alongside; this only keeps it from shrinking and adds the live
   animation once the real analyzer is loaded. */
.zp-live-dot {
  flex-shrink: 0;
}

.zp-card.zp-live .zp-live-dot {
  animation: zp-breathe 2.4s ease-in-out infinite;
}

/* Opacity-only: compositor-friendly, no per-frame box-shadow repaint. */
@keyframes zp-breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.zp-status {
  color: #8e99a6;
  font-size: 0.72rem;
}

.zp-status-warn {
  color: #e8c06b;
}

/* Pulsing outline drawn on a perturbation button during the attract demo. */
.zp-perturbations button.zp-hint {
  border-color: var(--z-red);
  animation: zp-hint-pulse 1.1s ease-in-out infinite;
}

@keyframes zp-hint-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(255 132 151 / 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgb(255 132 151 / 0.24);
  }
}

.z-playground .z-section-kicker .z-status-dot {
  animation: zp-breathe 2.4s ease-in-out infinite;
}

.zp-lensbar {
  display: flex;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.zp-lensbar button {
  padding: 0.45rem 0.7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8e99a6;
  font-family: var(--z-mono);
  font-size: 0.74rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.zp-lensbar button:hover {
  color: #cbd7e3;
}

.zp-lensbar button.active {
  color: #fff;
  border-bottom-color: #7fd59b;
}

.zp-lens {
  padding: 1rem 1.15rem;
}

/* --- properties lens --- */
.zp-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zp-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  font-size: 0.76rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.zp-chip.on {
  background: rgb(47 138 79 / 0.16);
  color: #aee6bd;
}

.zp-chip.off {
  background: rgb(196 63 95 / 0.16);
  color: #ffb3bf;
}

.zp-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
}

.zp-chip.on .zp-glyph {
  background: rgb(127 213 155 / 0.22);
  color: #7fd59b;
}

.zp-chip.off .zp-glyph {
  background: rgb(255 132 151 / 0.22);
  color: #ff8497;
}

@keyframes zp-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

.zp-chip.zp-flip {
  animation: zp-pulse 0.42s ease;
}

/* --- proof trace (expandable chip) --- */
.zp-chip-cell {
  list-style: none;
  align-self: start;
}

button.zp-chip {
  width: 100%;
  margin: 0;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.zp-chevron {
  margin-left: auto;
  width: 0.42rem;
  height: 0.42rem;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.zp-chip-cell.zp-open .zp-chevron {
  transform: rotate(45deg);
}

.zp-trace {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.zp-chip-cell.zp-open .zp-trace {
  grid-template-rows: 1fr;
}

.zp-trace-inner {
  overflow: hidden;
}

.zp-trace-body {
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.zp-trace-body.ok {
  background: rgb(47 138 79 / 0.1);
  border-color: rgb(47 138 79 / 0.3);
}

.zp-trace-body.bad {
  background: rgb(196 63 95 / 0.1);
  border-color: rgb(196 63 95 / 0.35);
}

.zp-trace-body p {
  margin: 0 0 0.35rem;
}

.zp-trace-body p:last-child {
  margin-bottom: 0;
}

.zp-trace-head {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8e99a6;
}

.zp-trace-summary {
  color: #d6dee6;
}

.zp-trace-fact,
.zp-trace-flow,
.zp-trace-req,
.zp-trace-code {
  font-family: var(--z-mono);
  font-size: 0.68rem;
}

.zp-trace-fact,
.zp-trace-req {
  color: #9aa6b2;
}

.zp-trace-arrow {
  color: #6b7682;
}

.zp-trace-step {
  color: #ffd0d0;
}

.zp-trace-loc {
  color: #6b7682;
  margin-right: 0.5rem;
}

.zp-trace-snip {
  color: #ffd0d0;
  background: rgb(196 63 95 / 0.16);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

.zp-trace-fix {
  display: flex;
  gap: 0.4rem;
  color: #d6dee6;
}

.zp-trace-fix-tag {
  flex-shrink: 0;
  color: #7fd59b;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding-top: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .zp-trace {
    transition: none;
  }

  .zp-chevron {
    transition: none;
  }
}

.zp-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.zp-specs-label {
  color: #8e99a6;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zp-spec {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.zp-spec.on {
  background: rgb(47 138 79 / 0.2);
  color: #aee6bd;
}

.zp-spec.off {
  background: rgb(196 63 95 / 0.2);
  color: #ffb3bf;
}

/* --- trade lens --- */
.zp-trade {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zp-trade-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.zp-trade-row:last-child {
  border-bottom: 0;
}

.zp-trade-row.off {
  opacity: 0.5;
}

.zp-trade-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
}

.zp-trade-row.on .zp-glyph {
  background: rgb(127 213 155 / 0.22);
  color: #7fd59b;
}

.zp-trade-row.off .zp-glyph {
  background: rgb(255 132 151 / 0.18);
  color: #ff8497;
}

.zp-trade-line {
  display: flex;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: #cbd7e3;
  margin-left: 1.45rem;
}

.zp-trade-tag {
  flex-shrink: 0;
  width: 4.4rem;
  color: #8e99a6;
}

/* --- handover + caller lenses --- */
.zp-cert,
.zp-caller-block {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.28);
  color: #cbd7e3;
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

.zp-copy {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.7rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
  color: #cbd7e3;
  font-family: var(--z-mono);
  font-size: 0.72rem;
  cursor: pointer;
}

.zp-copy:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.zp-caller-note,
.zp-caller-foot {
  margin: 0 0 0.6rem;
  color: #8e99a6;
  font-size: 0.74rem;
}

.zp-caller-foot {
  margin: 0.6rem 0 0;
}

.zp-caller-block + .zp-caller-block {
  margin-top: 0.6rem;
}

/* --- why row --- */
.zp-why {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  background: rgb(196 63 95 / 0.1);
  font-size: 0.73rem;
}

.zp-why-code {
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgb(255 132 151 / 0.2);
  color: #ff8497;
  font-weight: 600;
}

.zp-why-msg {
  color: #e8edf1;
}

.zp-why-loc {
  color: #8ab4ff;
}

.zp-why-fix {
  flex-basis: 100%;
  color: #8e99a6;
}

@media (max-width: 880px) {
  .z-playground .zp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zp-chips {
    grid-template-columns: 1fr;
  }
}