/* Zen landing page. Tokens and rules come from website/DESIGN.md. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #161514;
  /* the page below the hero is dark, as on archil */
  --ink-text: #f4f2ef;
  --paper: #161514;
  --paper-deep: #1d1c1a;
  --card: #1b1a18;
  --line: #2e2b28;
  --muted: #a39e99;
  --clay-top: #6f2f2d;
  --clay-mid: #793331;
  --clay-low: #93403c;
  --clay-shade: #251f1e;
  --ember: #ca5551;
  --ember-soft: #d57774;
  --blush: #f4d9d4;
  --snow: #fff6f1;
  --fiber-edge: #f4d9d4;
  --fiber-a: #fff0ea;
  --fiber-b: #f6c7bd;
  --glow: #f4a59b;
  --corner: rgb(37 31 30 / 0.38);
  --au-hl: rgb(244 217 212 / 0.34);
  --au-1: rgb(202 85 81 / 0.95);
  --au-2: rgb(213 119 116 / 0.85);
  --au-3: rgb(202 85 81 / 0.7);
  --au-shade: rgb(37 31 30 / 0.45);
  --ghost: rgb(36 17 15 / 0.5);
  --ghost-hover: rgb(36 17 15 / 0.62);
  --lead-shadow: 0 1px 14px rgb(70 18 18 / 0.35);
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar: 64px;
  --frame: 8px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body.zen {
  margin: 0;
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--ink-text);
  outline-offset: 3px;
}
.zen-bar :focus-visible,
.zen-hero :focus-visible {
  outline-color: #fff;
}

::selection {
  background: var(--ink-text);
  color: var(--paper);
}
.zen-hero ::selection {
  background: #fff;
  color: #a24441;
}

/* ---------- top bar ---------- */

.zen-bar {
  background: var(--ink);
  color: #f4f2ef;
}
.zen-bar-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  height: var(--bar);
  margin: 0 auto;
  padding: 0 24px;
}
.zen-logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 10px;
  text-decoration: none;
}
.zen-logo-img {
  display: block;
  width: auto;
  height: 34px; /* the circle stays 28px; the rest is room for the moved text */
}
.zen-links {
  display: flex;
  gap: 28px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}
/* the section links scroll there gently, unless motion is turned off */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.zs-section[id] {
  scroll-margin-top: 24px;
}
.zen-links a {
  color: rgb(244 242 239 / 0.7);
  font-size: 15px;
  text-decoration: none;
  transition: color 160ms ease-out;
}
.zen-links a:hover {
  color: #f4f2ef;
}

/* ---------- buttons ---------- */

.zen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 20px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 140ms cubic-bezier(0.2, 0, 0, 1),
    background-color 160ms ease-out,
    border-color 160ms ease-out;
}
.zen-btn:active {
  transform: scale(0.96);
}
.zen-chev {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zen-btn-primary {
  background: #fff;
  color: var(--ink);
}
.zen-btn-primary:hover {
  background: #efebe8;
}
.zen-btn-ghost {
  padding: 0 16px;
  background: var(--ghost);
  color: var(--snow);
}
.zen-btn-ghost:hover {
  background: var(--ghost-hover);
}
.zen-btn-dark {
  background: var(--ink-text);
  color: var(--paper);
}
.zen-btn-dark:hover {
  background: color-mix(in srgb, var(--ink-text) 84%, var(--paper));
}
.zen-btn-line {
  padding: 0 16px;
  border-color: var(--line);
  color: var(--ink-text);
}
.zen-btn-line:hover {
  background: var(--paper-deep);
}

/* ---------- hero ---------- */

/* the hero sits inset in an ink frame that continues the top bar */
.zen-frame {
  padding: 0 var(--frame) var(--frame);
  background: var(--ink);
}
.zen-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  max-width: 2400px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 0 0, var(--corner), transparent 70%),
    linear-gradient(var(--clay-top) 0%, var(--clay-mid) 40%, var(--clay-low) 100%);
}

/* soft blooms of light, upper right, drifting slowly */
.zen-aurora {
  position: absolute;
  top: -30%;
  right: -18%;
  z-index: -1;
  width: 95%;
  height: 150%;
  pointer-events: none;
  filter: blur(18px);
  background-image:
    radial-gradient(16% 14% at 68% 34%, var(--au-hl), transparent 70%),
    radial-gradient(30% 28% at 58% 30%, var(--au-1), transparent 72%),
    radial-gradient(30% 32% at 80% 46%, var(--au-2), transparent 70%),
    radial-gradient(26% 24% at 50% 62%, var(--au-3), transparent 72%),
    radial-gradient(26% 26% at 88% 78%, var(--au-shade), transparent 70%);
  animation: zen-aurora 14s ease-in-out infinite alternate;
}
@keyframes zen-aurora {
  35% {
    transform: translate(-9%, 6%) scale(1.12) rotate(6deg);
  }
  70% {
    transform: translate(-3%, -6%) scale(1.04) rotate(-5deg);
  }
  to {
    transform: translate(-11%, -2%) scale(1.1) rotate(3deg);
  }
}


/* Safari does not clip a blurred or blended child (the glow, the grain) to
   rounded corners, even with overflow: hidden, so the clay shows in square
   corners on iPhones. A mask on the panel makes Safari clip to the radius. */
.zen-hero,
.zc-panel,
.zs-panel {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* film grain: a canvas of random grey pixels (js/zen-grain.js), stronger on
   the right where the light is */
.zen-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.45) 40%, #000 75%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.45) 40%, #000 75%);
}

.zen-hero-text {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 16px 4px;
}
.zen-h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6.2vw, 80px);
  font-weight: 500;
  letter-spacing: -0.042em;
  line-height: 0.95;
  text-wrap: balance;
}
.zen-h1 > span {
  display: block;
}
.zen-tone {
  color: var(--blush);
}
.zen-hero-side {
  max-width: 500px;
}
.zen-lead {
  margin: 0;
  color: var(--snow);
  font-size: clamp(16px, 1.25vw, 17.5px);
  letter-spacing: -0.01em;
  line-height: 1.55;
  text-shadow: var(--lead-shadow);
  text-wrap: pretty;
}
.zen-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.zen-strands {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 420px;
  margin-top: 12px;
}
.zen-strands > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.zen-fiber {
  fill: none;
  stroke: url(#zen-fiber);
  stroke-width: 1;
}
.zen-fiber.is-lifted {
  stroke-width: 1.6;
}
.zen-glow {
  fill: none;
  stroke: url(#zen-glow);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.2;
}
.zen-glint {
  fill: none;
  stroke: #fff7f3;
  stroke-width: 1.6;
  stroke-linecap: round;
  mix-blend-mode: plus-lighter;
}
.zen-node-dot {
  fill: var(--snow);
}
.zen-node-ring {
  fill: none;
  stroke: var(--snow);
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50%;
  animation: zen-apex 12s ease-out var(--at, 0s) infinite;
}
@keyframes zen-apex {
  0%,
  14% {
    opacity: 0;
    transform: scale(0.6);
  }
  18% {
    opacity: 0.9;
    transform: scale(1);
  }
  30%,
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}
.zen-node-dot.is-out {
  fill: none;
  stroke: rgb(255 236 228 / 0.8);
  stroke-width: 1.25;
}
.zen-node-ring.is-off {
  display: none;
}
.zen-node-label.is-out {
  fill: rgb(255 248 244 / 0.8);
  font-weight: 400;
}
.zen-node-label {
  fill: #fff8f4;
  font: 500 19px var(--sans);
  letter-spacing: -0.015em;
}
.zen-node-sub {
  fill: rgb(255 236 228 / 0.68);
  font: 13px var(--mono);
}

/* below 1100px the planes sit under the text, so the hero grows to fit them */
@media (min-width: 900px) and (max-width: 1099px) {
  .zen-hero:has(.zen-planes) {
    height: auto;
    max-height: none;
  }
}

/* wide screens: the text on the left, the planes on the right, full height */
@media (min-width: 1100px) and (min-height: 600px) {
  .zen-hero:has(.zen-planes) {
    flex-direction: row;
    align-items: stretch;
  }
  .zen-hero:has(.zen-planes) .zen-hero-text {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 28px;
    --left: max(40px, calc((100vw - 1200px) / 2 + 16px));
    width: calc(var(--left) + min(560px, 40vw));
    max-width: none;
    margin: 0;
    padding: 0 0 4vh var(--left);
  }
  .zen-hero:has(.zen-planes) .zen-h1 {
    font-size: clamp(44px, 4.2vw, 60px);
  }
  .zen-hero:has(.zen-planes) .zen-hero-side {
    justify-self: start;
    padding-top: 0;
  }
  .zen-planes {
    margin-top: 0;
  }
}

/* hero drawing, "how it works": thin planes and one line of light (js/zen-planes.js) */
.zen-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.zen-planes > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.zen-pl-face {
  fill: rgb(255 246 241 / 0.07);
  stroke: rgb(255 240 234 / 0.42);
  stroke-width: 1;
  transition:
    fill 900ms var(--ease),
    stroke 900ms var(--ease);
}
.zen-pl-edge {
  fill: none;
  stroke: rgb(255 240 234 / 0.14);
  stroke-width: 1;
}
.zen-pl-plane.is-lit .zen-pl-face {
  fill: rgb(255 246 241 / 0.11);
  stroke: rgb(255 244 239 / 0.78);
}
.zen-pl-track {
  fill: none;
  stroke: rgb(255 240 234 / 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.zen-pl-line {
  fill: none;
  stroke: var(--snow);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 0 99999;
}
.zen-pl-hit {
  fill: var(--snow);
}
.zen-pl-ring {
  fill: none;
  stroke: var(--snow);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50%;
}
.zen-pl-ring.is-on {
  animation: zen-pl-ring 1.6s ease-out;
}
@keyframes zen-pl-ring {
  0% {
    opacity: 0.95;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}
.zen-pl-head {
  fill: #fff;
  opacity: 0;
}
.zen-pl-headglow {
  fill: var(--glow);
  opacity: 0;
  filter: blur(6px);
}
.zen-pl-head.is-on {
  opacity: 1;
}
.zen-pl-headglow.is-on {
  opacity: 0.55;
}
.zen-pl-start {
  fill: var(--snow);
  opacity: 0.7;
}
.zen-pl-end,
.zen-pl-arrow {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.zen-pl-end {
  fill: var(--snow);
}
.zen-pl-arrow {
  fill: none;
  stroke: var(--snow);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zen-pl-end.is-in,
.zen-pl-arrow.is-in {
  opacity: 1;
}
.zen-pl-label {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}
.zen-pl-label.is-in {
  opacity: 1;
  transform: none;
}
.zen-pl-tag {
  fill: rgb(255 236 228 / 0.68);
  font: 12px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zen-pl-text {
  fill: #fff8f4;
  font: 500 16px var(--sans);
  letter-spacing: -0.012em;
}
@media (max-width: 699px) {
  .zen-pl-text {
    font-size: 15px;
  }
}

/* hero drawing: four weeks of sales as a live line (js/zen-ticker.js) */
/* the note under the button belongs to it, so it sits close */
.zen-hero .zs-call-note {
  margin-top: 8px;
}
/* the chart starts right under the text; the drawing sets its own margins */
@media (min-width: 900px) {
  .zen-ticker {
    margin-top: 8px;
  }
}
.zen-ticker > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.zen-tk-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zen-tk-glow {
  fill: none;
  stroke: var(--glow);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.12;
  filter: blur(3px);
}
.zen-tk-dot {
  fill: var(--snow);
}
/* something that went wrong on Amazon: a hollow ring */
.zen-tk-bad circle,
.zen-tk-icon circle {
  fill: var(--clay-top);
  stroke: var(--blush);
  stroke-width: 1.2;
}
/* a straight dotted line from a list item to its dot on the chart */
.zen-tk-link {
  fill: none;
  stroke: rgb(255 246 241 / 0.6);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 0 5;
}
.zen-tk-link.is-bad {
  stroke: rgb(244 217 212 / 0.7);
}
.zen-tk-icon.is-act circle {
  fill: var(--snow);
  stroke: none;
}
.zen-tk-ring.is-bad {
  stroke: var(--blush);
  stroke-dasharray: 3 3;
}
.zen-tk-head {
  fill: #fff;
}
.zen-tk-headglow {
  fill: var(--glow);
  opacity: 0.35;
  filter: blur(5px);
}
.zen-tk-ring {
  fill: none;
  stroke: var(--snow);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50%;
}
.zen-tk-ring.is-on {
  animation: zen-pl-ring 1.1s ease-out;
}
.zen-tk-figure {
  fill: #fff;
  font: 500 30px var(--sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.zen-tk-unit {
  fill: rgb(255 236 228 / 0.68);
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* the list of changes next to the tip */
/* slow and even, so the list moves like breathing, not like a feed */
.zen-tk-item {
  transition:
    opacity 1400ms cubic-bezier(0.33, 0, 0.2, 1),
    transform 1400ms cubic-bezier(0.33, 0, 0.2, 1),
    filter 1400ms cubic-bezier(0.33, 0, 0.2, 1);
}
.zen-tk-text {
  fill: #fff8f4;
  font: 400 16px var(--sans);
  letter-spacing: -0.012em;
}
.zen-tk-item.is-bad .zen-tk-text {
  fill: var(--blush);
}
@media (max-width: 699px) {
  .zen-tk-figure {
    font-size: 24px;
  }
  .zen-tk-text {
    font-size: 14px;
  }
}

/* the hero's detail card, controls and data note (js/zen-ticker.js) */
.zen-ticker {
  transition: opacity 700ms var(--ease);
}
.zen-ticker.is-fading {
  opacity: 0;
}
.zen-tk-hit {
  fill: transparent;
  pointer-events: all;
}
.zen-tk-item,
.zen-tk-mark {
  cursor: pointer;
}
.zen-tk-mark {
  stroke: transparent;
  stroke-width: 12;
  pointer-events: all;
}
.zen-tk-bad.zen-tk-mark circle {
  pointer-events: all;
}
/* each action shows it opens: a faint dotted underline */
.zen-tk-item .zen-tk-text {
  text-decoration: underline dotted rgb(255 240 234 / 0.35);
  text-underline-offset: 5px;
}
.zen-tk-item.is-active .zen-tk-text,
.zen-tk-item:hover .zen-tk-text {
  text-decoration-color: rgb(255 240 234 / 0.8);
}
.zen-tk-link.is-active {
  stroke: #fff;
  opacity: 1 !important;
}
.zen-tk-dot.is-active {
  fill: #fff;
  r: 4.5;
}
.zen-tk-hint {
  fill: rgb(255 236 228 / 0.55);
  transition: opacity 600ms var(--ease);
}
.zen-tk-hint.is-gone {
  opacity: 0;
}
.zen-tk-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: min(340px, calc(100% - 24px));
  padding: 16px 18px 14px;
  border: 1px solid rgb(255 240 234 / 0.22);
  border-radius: 12px;
  background: rgb(36 17 15 / 0.88);
  color: var(--snow);
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 220ms var(--ease);
  pointer-events: auto;
}
.zen-tk-card.is-open {
  opacity: 1;
}
.zen-tk-card-meta {
  margin: 0;
  color: rgb(255 236 228 / 0.62);
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zen-tk-card-title {
  margin: 6px 0 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.zen-tk-card.is-bad .zen-tk-card-title {
  color: var(--blush);
}
.zen-tk-card dl {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 6px 10px;
  margin: 0;
}
.zen-tk-card dt {
  color: rgb(255 236 228 / 0.62);
}
.zen-tk-card dd {
  margin: 0;
}
.zen-tk-controls {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
}
.zen-tk-ctl {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--snow);
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 160ms, background-color 160ms;
}
.zen-tk-ctl:hover {
  opacity: 1;
  background: rgb(255 255 255 / 0.08);
}
.zen-tk-ctl svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zen-tk-ctl.is-play svg {
  fill: currentColor;
  stroke: none;
}
.zen-tk-count {
  min-width: 44px;
  margin-left: 6px;
  color: rgb(255 236 228 / 0.62);
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.zen-tk-source {
  position: absolute;
  left: max(12px, calc((100% - 1200px) / 2 + 16px));
  bottom: 20px;
  z-index: 3;
  margin: 0;
  color: rgb(255 236 228 / 0.55);
  font: 11px var(--mono);
  letter-spacing: 0.04em;
}
.zen-tk-source a {
  color: inherit;
  text-underline-offset: 3px;
}
.zen-tk-source a:hover {
  color: var(--snow);
}
@media (max-width: 699px) {
  .zen-tk-source {
    left: 12px;
    max-width: 52%;
  }
  .zen-tk-controls {
    right: 8px;
  }
}

.zen-pause {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--snow);
  opacity: 0.8;
  cursor: pointer;
  transition:
    opacity 160ms,
    background-color 160ms,
    transform 140ms cubic-bezier(0.2, 0, 0, 1);
}
.zen-pause:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.zen-pause:active {
  transform: scale(0.96);
}
.zen-pause svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* paused: every loop in the hero stops where it is */
.zen-hero.is-paused .zen-aurora,
.zen-hero.is-paused .zen-node-ring {
  animation-play-state: paused;
}

/* page-load entrance: a short rise out of a soft blur */
.zen-rise {
  animation: zen-rise 720ms var(--ease) var(--enter, 0s) backwards;
}
.zen-h1 > span:nth-child(2) {
  --enter: 80ms;
}
.zen-lead {
  --enter: 180ms;
}
.zen-actions {
  --enter: 250ms;
}
.zen-strands {
  animation: zen-fade 1.2s var(--ease) 320ms backwards;
}
@keyframes zen-rise {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
  }
}
@keyframes zen-fade {
  from {
    opacity: 0;
  }
}

@media (min-width: 640px) {
  .zen-frame {
    --frame: 12px;
  }
  .zen-hero-text {
    padding: 64px 24px 8px;
  }
}

@media (min-width: 900px) {
  .zen-hero-text {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    padding: clamp(64px, 7vw, 96px) 24px 0;
  }
  .zen-h1 {
    font-size: clamp(40px, 4.3vw, 62px);
  }
  .zen-hero-side {
    justify-self: end;
    padding-top: 12px;
  }
  .zen-strands {
    margin-top: clamp(16px, 3vw, 44px);
  }
}

@media (min-width: 900px) and (min-height: 600px) {
  .zen-hero {
    height: calc(100svh - var(--bar) - var(--frame));
    min-height: 600px;
    max-height: 880px;
  }
  .zen-strands {
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .zen-frame {
    --frame: 8px;
  }
  .zen-hero {
    border-radius: 18px;
  }
  .zen-pause {
    right: 18px;
    bottom: 18px;
  }
}

/* ---------- sections below the hero (archil pattern) ---------- */

.zs-wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}
.zs-section {
  padding-top: clamp(112px, 14vw, 176px);
}
.zs-head {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}
@media (min-width: 900px) {
  .zs-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: end;
    gap: 64px;
  }
}
.zs-h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.zs-intro {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
.zs-h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.zs-num {
  color: var(--muted);
  font: 13px var(--mono);
}
.zs-eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* one bordered card, split into cells by hairlines */
.zs-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  list-style: none;
}
.zs-cols-2,
.zs-cols-3,
.zs-cols-4 {
  display: grid;
  margin: 0;
  padding: 0;
}
.zs-cell {
  padding: 32px;
  border-top: 1px solid var(--line);
}
.zs-cell:first-child {
  border-top: 0;
}
.zs-cell p,
.zs-cell dd {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.zs-cell .zs-h3 {
  margin-top: 28px;
}
@media (min-width: 900px) {
  .zs-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zs-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .zs-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .zs-cols-2 > .zs-cell,
  .zs-cols-3 > .zs-cell,
  .zs-cols-4 > .zs-cell {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .zs-cols-2 > .zs-cell:first-child,
  .zs-cols-3 > .zs-cell:first-child,
  .zs-cols-4 > .zs-cell:first-child {
    border-left: 0;
  }
}

/* belief tiles: a faint drawing behind each one */
.zs-beliefs .zs-cell {
  padding-bottom: 240px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
@media (min-width: 900px) {
  .zs-beliefs .zs-cell {
    padding-bottom: 32px;
    min-height: 560px;
    background-size: 120% auto;
    background-position: 40% bottom;
  }
}
.zs-beliefs .zs-cell:nth-child(1) {
  background-image: url("/images/zen/belief-1-expanding-orbit.svg");
}
.zs-beliefs .zs-cell:nth-child(2) {
  background-image: url("/images/zen/belief-2-cellular-automata.svg");
}
.zs-beliefs .zs-cell:nth-child(3) {
  background-image: url("/images/zen/belief-3-parallel-growth-curves.svg");
}

/* on the light page the drawings use a darker grey, or they disappear */
.theme-light .zs-beliefs .zs-cell:nth-child(1) {
  background-image: url("/images/zen/belief-1-expanding-orbit-light.svg");
}
.theme-light .zs-beliefs .zs-cell:nth-child(2) {
  background-image: url("/images/zen/belief-2-cellular-automata-light.svg");
}
.theme-light .zs-beliefs .zs-cell:nth-child(3) {
  background-image: url("/images/zen/belief-3-parallel-growth-curves-light.svg");
}

/* pricing page (/pricing): a shorter clay panel with the plan on the right */
.zen-hero.zp-hero {
  height: auto;
  min-height: 0;
  max-height: none;
}
.zp-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 16px 40px;
}
.zp-intro {
  display: grid;
  align-content: start;
  gap: 22px;
}
.zp-intro .zen-lead {
  max-width: 440px;
}
.zp-kicker,
.zp-plan-label {
  margin: 0;
  color: rgb(255 236 228 / 0.72);
  font: 12px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* the plan: a quiet card on the clay, not a pricing table */
.zp-plan {
  --enter: 260ms;
  width: 100%;
  max-width: 420px;
  padding: 28px;
  border: 1px solid rgb(255 240 234 / 0.22);
  border-radius: 14px;
  background: rgb(36 17 15 / 0.22);
}
.zp-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 0;
  color: #fff;
}
.zp-amount {
  font: 500 clamp(64px, 7vw, 96px) / 0.9 var(--sans);
  letter-spacing: -0.05em;
}
.zp-per {
  color: var(--snow);
  font-size: 17px;
  opacity: 0.85;
}
.zp-price-text {
  margin: 16px 0 0;
  color: #fff;
  font: 500 clamp(30px, 3vw, 40px) / 1.1 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.zp-usage {
  margin: 14px 0 0;
  color: var(--snow);
  font-size: 16px;
  line-height: 1.5;
}
.zp-plan .zen-actions {
  margin-top: 24px;
}
.zp-quotes {
  margin-top: 16px;
}
@media (min-width: 900px) {
  .zp-hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: 64px;
    padding: clamp(80px, 9vw, 128px) 24px clamp(56px, 6vw, 88px);
  }
  .zp-plan {
    justify-self: end;
  }
}

/* contact form (the Tally form from the live site), after the closing panel */
.zs-contact {
  padding-bottom: clamp(96px, 12vw, 160px);
}
.zs-contact-grid {
  display: grid;
  gap: 40px;
}
.zs-contact .zs-intro {
  max-width: 420px;
  margin-top: 20px;
}
.zs-contact .zs-intro a {
  color: var(--ink-text);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
/* talk to the founder: Ben's photo beside the call button */
.zs-founder {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.zs-founder img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper-deep);
  object-fit: cover;
  object-position: top;
}
.zs-founder-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.zs-contact-form {
  padding: 20px 24px 8px;
}
/* Tally draws dark text on a light page; on our dark page, turn it round */
.zs-contact-form iframe {
  display: block;
  filter: invert(1) hue-rotate(180deg);
}
.theme-light .zs-contact-form iframe {
  filter: none;
}
@media (min-width: 900px) {
  .zs-contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
  }
}

/* logo strip */
.zs-logos {
  padding-top: 56px;
}
.zs-logos-inner {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .zs-logos-inner {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
  }
}
.zs-logos-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.zs-logos-note span {
  color: var(--ink-text);
}
.zs-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .zs-logo-row {
    flex-wrap: nowrap;
    gap: 24px;
  }
}
.zs-logo {
  display: block;
  width: auto;
  max-width: 104px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
.zs-logo.is-s {
  height: 26px;
}
.zs-logo.is-t {
  height: 28px;
}
.zs-logo.is-n {
  height: 16px;
}

/* the case study list sits on the hero's clay surface */
.zc-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 0 0, var(--corner), transparent 70%),
    linear-gradient(var(--clay-top) 0%, var(--clay-mid) 40%, var(--clay-low) 100%);
}
.zc-panel .zen-aurora {
  opacity: 0.85;
}
.zc-panel > .zc-grid {
  position: relative;
  z-index: 2;
}
.zc-panel .zs-cell {
  border-color: rgb(255 255 255 / 0.12);
}
.zc-panel .zc-card:hover {
  background: rgb(255 255 255 / 0.05);
}
.zc-panel .zc-name {
  color: #fff;
}
.zc-panel .zc-name .zen-chev,
.zc-panel .zc-before,
.zc-panel .zc-arrow {
  color: rgb(255 246 241 / 0.62);
}
.zc-panel .zc-card:hover .zc-name .zen-chev {
  color: #fff;
}
.zc-panel .zc-after {
  color: #fff;
}
.zc-panel .zc-sales {
  color: rgb(255 236 228 / 0.62);
}
.zc-panel .zc-pct {
  color: var(--blush);
}

/* case study cards (also used on each case study page) */
.zc-grid.zs-cols-2 > .zs-cell:nth-child(n + 3) {
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.zc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease-out;
}
.zc-card:hover {
  background: rgb(255 255 255 / 0.025);
}
.zc-tag {
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.zc-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.zc-name .zen-chev {
  color: var(--muted);
  transition: transform 160ms var(--ease), color 160ms;
}
.zc-card:hover .zc-name .zen-chev {
  color: var(--ink-text);
  transform: translateX(3px);
}
.zc-figs {
  margin-top: 28px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.zc-before {
  color: var(--muted);
  font-size: 18px;
}
.zc-arrow {
  color: var(--muted);
}
.zc-after {
  color: var(--ink-text);
  font-size: 32px;
}
.zc-pct {
  color: var(--blush);
  font-size: 15px;
}
.zc-sales {
  margin-right: 4px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
}
@media (min-width: 900px) {
  .zc-grid.zs-cols-2 > .zs-cell:nth-child(n + 3) {
    border-left-width: 0;
  }
  .zc-grid.zs-cols-2 > .zs-cell:nth-child(2n) {
    border-left: 1px solid rgb(255 255 255 / 0.12);
  }
}

.zc-points {
  display: grid;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.zc-lead {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.zc-panel .zc-lead {
  color: rgb(255 236 228 / 0.66);
}

/* a case study page */
.zc-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 0;
}
.zc-back {
  margin: 0;
}
.zc-back a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.zc-back a:hover {
  color: var(--ink-text);
}
.zc-article > .zc-tag {
  margin: 48px 0 0;
}
.zc-title {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}
.zc-lede {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.zc-stats {
  margin-top: 40px;
}
.zc-stats dt {
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.zc-stats dd {
  margin: 12px 0 0;
  font-family: var(--mono);
  letter-spacing: -0.03em;
}
.zc-stats .zc-did {
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
}
.zc-prose {
  margin-top: 48px;
  color: rgb(244 242 239 / 0.82);
  font-size: 17px;
  line-height: 1.7;
}
.zc-prose > p {
  margin: 0 0 20px;
}
.zc-prose h2 {
  margin: 56px 0 16px;
  color: var(--ink-text);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.zc-prose strong {
  color: var(--ink-text);
  font-weight: 500;
}
.zc-prose ul {
  margin: 0 0 20px;
  padding-left: 20px;
}
.zc-prose li {
  margin-bottom: 12px;
}
.zc-prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 32px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.zc-prose a {
  color: var(--ink-text);
}

/* long text: blog posts, privacy and terms (layouts/zen-article.liquid) */
.zb-article {
  padding-bottom: 96px;
}
.zb-author {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.zb-prose h2 {
  margin-top: 56px;
}
.zb-prose h3,
.zb-prose h4 {
  margin: 40px 0 12px;
  color: var(--ink-text);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.zb-prose h3 {
  font-size: 21px;
}
.zb-prose h4 {
  font-size: 18px;
}
.zb-prose p {
  margin: 0 0 20px;
}
.zb-prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.zb-prose li > p {
  margin: 0 0 8px;
}
.zb-prose li::marker {
  color: var(--muted);
}
.zb-prose a {
  text-decoration-color: rgb(244 242 239 / 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.zb-prose a:hover {
  text-decoration-color: currentColor;
}
.zb-prose em {
  color: var(--ink-text);
}
.zb-prose blockquote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  color: var(--ink-text);
}
.zb-prose hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.zb-prose code {
  font: 0.9em var(--mono);
}
.zb-prose > :first-child {
  margin-top: 0;
}

/* the blog list: one quiet line for each article */
.zb-index {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 24px 112px;
}
.zb-list {
  margin: 48px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.zb-list a {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-text);
  text-decoration: none;
}
.zb-t {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease-out;
}
.zb-list a:hover .zb-t {
  text-decoration-color: currentColor;
}
.zb-m {
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .zb-list a {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 32px;
  }
  .zb-m {
    text-align: right;
  }
}
.theme-light .zb-prose a {
  text-decoration-color: rgb(18 17 16 / 0.3);
}

/* a safe way to start: how you start (3 columns), then what keeps you safe
   (limits and protection) beside the example limits panel */
.zs-safe-top {
  list-style: none;
}
.zs-safe-top .zs-h3,
.zs-safe-steps .zs-h3 {
  margin-top: 8px;
}
.zs-safe-top p,
.zs-safe-steps p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.zs-safe-bottom {
  display: grid;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .zs-safe-bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.zs-safe-steps {
  display: grid;
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs-safe-steps li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}
.zs-safe-steps li + li {
  border-top: 1px solid var(--line);
}
.zs-rules {
  margin: 0 20px 20px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
@media (min-width: 900px) {
  .zs-rules {
    align-self: center;
    margin: 24px 24px 24px 0;
  }
}
.zs-rules-title {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 12px 20px;
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.zs-rules-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-text);
}
.zs-rules-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blush);
}
.zs-rule {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.zs-rule-name {
  margin: 0;
  color: var(--muted);
  font: 13px var(--mono);
}
.zs-rule-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-size: 14px;
}
.zs-rule-note {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.zs-chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
}
.zs-chip.is-more {
  color: var(--muted);
}
.zs-range {
  flex-wrap: nowrap;
  gap: 10px;
  font: 13px var(--mono);
}
.zs-range-bar {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}
.zs-range-fill {
  position: absolute;
  inset: 0 30% 0 12%;
  background: var(--blush);
  opacity: 0.7;
}
.zs-range-dot {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-text);
  transform: translate(-50%, -50%);
}
.zs-meter-bar {
  position: relative;
  width: 96px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.zs-meter-fill {
  position: absolute;
  inset: 0 35% 0 0;
  background: var(--blush);
  opacity: 0.7;
}
.zs-mono {
  font: 13px var(--mono);
}
.zs-rule-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs-rule-list li {
  position: relative;
  padding-left: 16px;
}
.zs-rule-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blush);
  opacity: 0.85;
}

.zs-call-note {
  max-width: 420px;
  margin: 14px 0 0;
  color: rgb(255 236 228 / 0.72);
  font-size: 14px;
  line-height: 1.5;
  --enter: 300ms;
}

/* the first 30 days, one dot for each day, in the closing panel */
.zs-close-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 900px) {
  .zs-close-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: center;
    gap: 64px;
  }
}
.zs-close-copy .zs-panel-text {
  margin-top: 28px;
}
.zs-month {
  margin: 0;
}
.zs-month-title {
  margin-bottom: 18px;
  color: rgb(255 236 228 / 0.7);
  font: 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.zs-month-rows {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs-month-row {
  display: grid;
  grid-template-columns: 64px auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.zs-month-label {
  color: rgb(255 236 228 / 0.62);
  font: 12px var(--mono);
}
.zs-month-dots {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 10px;
}
.zs-month-note {
  color: #fff8f4;
  font-size: 14px;
  line-height: 1.4;
}
.zs-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.zs-dot.is-wait {
  box-shadow: inset 0 0 0 1.25px rgb(255 246 241 / 0.55);
}
.zs-dot.is-work {
  background: var(--snow);
  opacity: var(--lvl, 0.8);
}
.zs-dot.is-end {
  background: var(--snow);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.08), 0 0 0 5.25px rgb(255 246 241 / 0.75);
}
.zs-month:not(.is-in) .zs-dot {
  opacity: 0;
  transform: scale(0.4);
}
@media (max-width: 520px) {
  .zs-month-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .zs-month-label {
    display: none;
  }
  .zs-month-dots {
    grid-template-columns: repeat(7, 12px);
    gap: 8px;
  }
  .zs-dot {
    width: 12px;
    height: 12px;
  }
}

/* testimonials: three equal tiles */
.zs-quotes figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  margin: 0;
}
.zs-quotes blockquote {
  margin: 0;
  color: var(--ink-text);
  font-size: 19px;
  letter-spacing: -0.012em;
  line-height: 1.45;
  text-indent: -0.4em;
  text-wrap: pretty;
}
.zs-quotes blockquote::before {
  content: '"';
}
.zs-quotes blockquote::after {
  content: '"';
}
.zs-quotes figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted);
  font-size: 14px;
}
.zs-quotes figcaption strong {
  color: var(--ink-text);
  font-weight: 500;
}

/* closing panel: the hero surface again */
.zs-close {
  padding-bottom: clamp(96px, 12vw, 160px);
}
.zs-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 8vw, 104px) clamp(24px, 6vw, 72px);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 0 0, var(--corner), transparent 70%),
    linear-gradient(var(--clay-top) 0%, var(--clay-mid) 40%, var(--clay-low) 100%);
}
.zs-panel > :not(.zen-aurora):not(.zen-grain) {
  position: relative;
  z-index: 2;
}
.zs-panel .zs-h2 {
  font-size: clamp(36px, 5vw, 64px);
}
.zs-panel-text {
  max-width: 460px;
  margin: 0;
  color: var(--snow);
  font-size: 17px;
  line-height: 1.55;
  text-shadow: var(--lead-shadow);
}

/* ---------- footer ---------- */

.zen-foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.zen-foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.zen-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.zen-foot a {
  text-decoration: none;
}
.zen-foot a:hover {
  color: var(--ink-text);
}

/* ---------- phone menu (layouts/zen.liquid) ---------- */
.zen-bar {
  position: relative;
  z-index: 40;
}
.zen-menu-btn {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.zen-menu-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* the two lines turn into a cross */
.zen-menu-btn path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 260ms var(--ease);
}
.zen-menu-btn[aria-expanded="true"] .zen-menu-top {
  transform: translateY(3px) rotate(45deg);
}
.zen-menu-btn[aria-expanded="true"] .zen-menu-bot {
  transform: translateY(-3px) rotate(-45deg);
}
.zen-menu {
  position: absolute;
  top: var(--bar);
  right: 0;
  left: 0;
  padding: 12px 24px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease);
}
.zen-menu.is-open {
  opacity: 1;
  transform: none;
}
.zen-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.zen-menu a:not(.zen-btn) {
  display: block;
  color: inherit;
  text-decoration: none;
}
.zen-menu-main a:not(.zen-btn) {
  padding: 12px 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.zen-menu-cta {
  margin-top: 24px;
}
.zen-menu-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.theme-light .zen-menu {
  background: var(--paper);
}
.theme-light .zen-menu .zen-btn-primary {
  background: var(--ink-text);
  color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  .zen-menu,
  .zen-menu-btn path {
    transition: none;
  }
}
@media (max-width: 720px) {
  .zen-menu-btn {
    display: grid;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  .zen-bar-inner {
    gap: 16px;
  }
  .zen-links {
    display: none;
  }
  .zen-logo {
    margin-right: auto;
  }
  .zen-section {
    padding-top: 112px;
  }
  .zen-strands {
    min-height: 470px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zen-rise {
    animation-name: zen-fade;
    animation-duration: 0.4s;
  }
  .zen-aurora,
  .zen-node-ring {
    animation: none;
  }
}

/* ---------- case study draft (/new-case) ---------- */

.case-page {
  padding: 0 0 96px;
}
.case-opt {
  max-width: 2400px;
  margin: 0 auto;
}

/* the same clay surface as the hero: gradient, drifting light, grain */
.case-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 64px) 32px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 0 0, var(--corner), transparent 70%),
    linear-gradient(var(--clay-top) 0%, var(--clay-mid) 40%, var(--clay-low) 100%);
}
.case-panel > :not(.zen-aurora):not(.zen-grain) {
  position: relative;
  z-index: 2;
}
.case-panel .zen-pause {
  position: absolute;
  z-index: 3;
}
.case-panel.is-paused .zen-aurora,
.case-panel.is-paused .zen-node-ring {
  animation-play-state: paused;
}
.case-head,
.case-legend {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}
.case-title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.case-sub {
  margin: 10px 0 0;
  color: var(--snow);
  opacity: 0.8;
}
.case-figs {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
}
.case-figs dt {
  color: rgb(255 236 228 / 0.68);
  font: 12px var(--mono);
}
.case-figs dd {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.case-before {
  color: rgb(255 246 241 / 0.7);
  font-size: 22px;
}
.case-after {
  color: #fff;
  font-size: 44px;
  line-height: 1;
}
.case-arrow {
  padding-bottom: 4px;
  color: rgb(255 246 241 / 0.6);
}
.case-delta {
  padding-bottom: 6px;
  color: var(--blush);
  font: 15px var(--mono);
}

.case-panel .zen-node-label,
.zen-hero[data-events] .zen-node-label {
  font-size: 15px;
}
/* keep clear space under the drawing, as archil does */
.zen-hero[data-events] .zen-strands {
  margin-bottom: clamp(48px, 8vh, 96px);
}

.case-panel .zen-strands {
  flex: none;
  height: 560px;
  min-height: 560px;
  margin: 40px calc(-1 * clamp(16px, 4vw, 64px)) 0;
}
.case-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 48px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  color: rgb(255 246 241 / 0.75);
  font-size: 14px;
}
.case-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-key {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.case-key-up {
  background: var(--snow);
}
.case-key-down {
  border: 1.25px solid rgb(255 236 228 / 0.75);
}

.case-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 56px;
  max-width: 1100px;
  margin: 96px auto 0;
  padding: 0 16px;
}
@media (min-width: 720px) {
  .case-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.case-note h4 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 500;
}
.case-count {
  color: var(--ember);
  font: 13px var(--mono);
}
.case-note p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  text-wrap: pretty;
}


/* ---------- colour tones (draft): each tone only sets variables ---------- */

.tone-mono {
  --clay-top: #2e2c2a;
  --clay-mid: #262422;
  --clay-low: #1e1d1b;
  --corner: rgb(0 0 0 / 0.4);
  --au-hl: rgb(255 255 255 / 0.14);
  --au-1: rgb(122 118 114 / 0.55);
  --au-2: rgb(150 146 141 / 0.4);
  --au-3: rgb(96 92 88 / 0.5);
  --au-shade: rgb(0 0 0 / 0.4);
  --blush: #b9b4af;
  --fiber-edge: #e6e4e1;
  --fiber-a: #f4f3f1;
  --fiber-b: #d2cec9;
  --glow: #ffffff;
  --ghost: rgb(0 0 0 / 0.32);
  --ghost-hover: rgb(0 0 0 / 0.48);
  --lead-shadow: 0 1px 14px rgb(0 0 0 / 0.3);
  --ember: #e6e4e1;
}

/* from the logo's indigo, #5873ff */
.tone-indigo {
  --clay-top: #1f2557;
  --clay-mid: #252d68;
  --clay-low: #303b85;
  --corner: rgb(10 12 36 / 0.45);
  --au-hl: rgb(222 228 255 / 0.32);
  --au-1: rgb(88 115 255 / 0.75);
  --au-2: rgb(130 150 255 / 0.6);
  --au-3: rgb(70 92 220 / 0.6);
  --au-shade: rgb(8 10 30 / 0.5);
  --blush: #c9d1ff;
  --fiber-edge: #dfe4ff;
  --fiber-a: #f2f4ff;
  --fiber-b: #c9d1ff;
  --glow: #8fa2ff;
  --ghost: rgb(6 8 30 / 0.45);
  --ghost-hover: rgb(6 8 30 / 0.6);
  --lead-shadow: 0 1px 14px rgb(0 0 0 / 0.3);
}


/* ---------- theme toggle ---------- */

.zen-theme {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 160ms, background-color 160ms;
}
.zen-theme:hover {
  opacity: 1;
  background: rgb(255 255 255 / 0.08);
}
.zen-theme svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zen-theme-moon,
.theme-light .zen-theme-sun {
  display: none;
}
.theme-light .zen-theme-moon {
  display: block;
}

/* ---------- light theme: light bar and page; the clay panels stay clay ---------- */

.theme-light {
  --paper: #fdfcfa;
  --ink-text: #121110;
  --paper-deep: #f4f3f1;
  --card: #ffffff;
  --line: #e4e2de;
  --muted: #64605d;
}
.zen-logo-img.is-on-light,
.theme-light .zen-logo-img.is-on-dark {
  display: none;
}
.theme-light .zen-logo-img.is-on-light {
  display: block;
}
.theme-light .zen-bar,
.theme-light .zen-frame {
  background: var(--paper);
  color: var(--ink-text);
}
.theme-light .zen-links a {
  color: rgb(18 17 16 / 0.6);
}
.theme-light .zen-links a:hover {
  color: var(--ink-text);
}
.theme-light .zen-bar .zen-btn-primary {
  background: var(--ink-text);
  color: var(--paper);
}
.theme-light .zen-bar .zen-btn-primary:hover {
  background: #2a2725;
}
.theme-light .zen-theme:hover {
  background: rgb(18 17 16 / 0.06);
}
.theme-light .zen-bar :focus-visible {
  outline-color: var(--ink-text);
}
.theme-light .zs-logo {
  filter: brightness(0);
  opacity: 0.55;
}
.theme-light .zc-prose {
  color: rgb(18 17 16 / 0.8);
}
.theme-light .zc-card:hover {
  background: rgb(18 17 16 / 0.025);
}
.theme-light .zc-panel .zc-card:hover {
  background: rgb(255 255 255 / 0.05);
}
.theme-light .zs-rules-state::before,
.theme-light .zs-range-fill,
.theme-light .zs-meter-fill,
.theme-light .zs-rule-list li::before {
  background: var(--ember);
}