/* 01-karesansui — the rock garden. Layout, no tokens redefined here. */

/* ---------- reveal (settle, not slide) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
}
html.js .reveal {
  transition: opacity .7s var(--ease-brush), transform .7s var(--ease-brush);
}
html.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
html:not(.js) .reveal,
html.reduced-motion .reveal { opacity: 1; transform: none; }

/* stagger helpers */
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* ---------- base ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.hairline { border: none; border-top: 1px solid var(--hairline); margin: 0; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- coworking line (sits above the h1, where the eyebrow used to) ---------- */
.announce-line {
  max-width: 62ch;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-70);
}
.announce-line .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  margin-right: 9px; transform: translateY(-2px);
}
.announce-line strong { font-weight: 500; color: var(--ink); }

/* skip link: clipped until focused, contributes nothing to layout */
.skip {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 10px; left: 10px; z-index: 50;
  width: auto; height: auto; margin: 0; padding: 10px 14px;
  clip-path: none; background: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--radius); font-family: var(--font-mono); font-size: 13px;
  text-decoration: none; color: var(--ink);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: none;
  border-bottom: 1px solid var(--hairline);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--s4);
  gap: var(--s5);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  padding-block: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 16px; letter-spacing: 0.06em;
  text-decoration: none; color: var(--ink);
}
.nav-links {
  display: flex; align-items: center; gap: var(--s6);
  font-size: 14px; letter-spacing: 0.02em;
}
.nav-links a { text-decoration: none; color: var(--ink-70); padding-block: 12px; }
.nav-links a:hover { color: var(--ink); }

/* ---------- hero: the sweep ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--s9) var(--s8);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-head { max-width: 860px; }

/* The stage sits behind the copy and never intercepts a click. It is in FRONT
   while the pile builds and sorts — that beat is the point — then drops behind
   the type for everything after. */
.stage { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
html.js .stage.settled { z-index: 1; }
.swipe, .zoom { position: absolute; inset: 0; transform-origin: 50% 50%; }
html.js .zoom { transition: transform 1.05s var(--ease-brush); }
.panes { position: absolute; inset: 0; }

.pane {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background: var(--pane-ink);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(var(--x0), var(--y0), 0) rotate(var(--r0)) scale(.94);
  will-change: transform, opacity;
}
/* paper panes — the git graph and the issue table, inverted as in the film */
.pane.paper { background: var(--pane-paper); box-shadow: inset 0 0 0 1.5px var(--pane-line); }

.pane i {                        /* one hairline of terminal output */
  position: absolute; left: 8%; height: 2px;
  background: var(--sig); display: block;
}

/* provider mark, centred in a terminal */
.pane .mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: .9;
}
.pane .mark svg { display: block; }

/* git graph */
.pane .git { position: absolute; inset: 0; width: 100%; height: 100%; }

/* beads issue table */
.pane .rows { position: absolute; inset: 11% 8%; display: flex; flex-direction: column; gap: 0; }
.pane .rows b {
  font-family: var(--font-mono); font-size: 6px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sig-ink-mid); padding-bottom: 4px;
  border-bottom: 1px solid var(--pane-line-set);
}
.pane .row {
  display: flex; align-items: center; gap: 5px;
  padding: 4.5px 0; border-bottom: 1px solid rgba(26,26,26,.13);
}
.pane .row s { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: none; }
.pane .row s.warn { background: var(--warn); }
.pane .row s.open { background: rgba(26,26,26,.28); }
.pane .row u { height: 2px; background: var(--sig-ink-mid); text-decoration: none; }
.pane .row em { margin-left: auto; height: 2px; width: 9px; background: rgba(26,26,26,.22); }

html.js .pane { transition:
  transform var(--dur, .51s) var(--ease-hero) var(--del, 0s),
  opacity .27s linear var(--del, 0s); }

/* state 1 — clutter: flung into an overlapping pile at centre */
html.js .stage.clutter .pane {
  opacity: 1;
  transform: translate3d(var(--xc), var(--yc), 0) rotate(var(--rc)) scale(1);
}
/* state 2 — settled: upright, spread, and quiet enough to sit under type */
html.js .stage.settled .pane {
  opacity: var(--rest, .1);
  transform: translate3d(var(--xs), var(--ys), 0) rotate(0deg) scale(1);
  transition:
    transform .74s var(--ease-brush) var(--del, 0s),
    opacity .74s var(--ease-exhale) var(--del, 0s);
}

/* state 3 — the whole canvas shrinks onto a phone screen */
.phone {
  position: absolute; top: 50%; left: 50%;
  width: var(--pw, 210px); height: var(--ph, 420px);
  margin: calc(var(--ph, 420px) / -2) 0 0 calc(var(--pw, 210px) / -2);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(.92);
  border: 1.5px solid var(--ink-24);
  border-radius: 26px;
  opacity: 0;
}
.phone-notch {
  position: absolute; top: 9px; left: 50%; margin-left: -22px;
  width: 44px; height: 3px; border-radius: 2px; background: var(--ink-12);
}
html.js .stage.pocket .phone {
  opacity: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1);
  transition: opacity .5s linear, transform .7s var(--ease-hero);
}
/* inside the phone the panes read as a screen, so lift them a little */
html.js .stage.pocket .pane {
  /* the canvas is wider than a phone, so it stretches out vertically as it
     folds in — the screen fills instead of letterboxing */
  transform: translate3d(var(--xs), calc(var(--ys) * 2.2), 0);
  opacity: calc(var(--rest, .1) * 2.8);
  transition: opacity .8s var(--ease-brush) var(--del, 0s), transform .74s var(--ease-brush) var(--del, 0s);
}
html.js .stage.pocket .zoom {
  transform: translate3d(var(--zx, 0px), var(--zy, 0px), 0) scale(var(--k, .2));
  transition: transform 1.05s var(--ease-brush);
}
/* state 4 — back in: the screen grows until the panes are at the sorted size
   again, and the phone frame expands past the viewport as it goes */
html.js .stage.unpocket .phone {
  opacity: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(5);
  transition: opacity .7s linear, transform 1.05s var(--ease-brush);
}

/* the vermillion seal — one mark, it does the clearing */
.seal-dot {
  position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.6);
}
html.js .stage.lit .seal-dot { opacity: 1; transform: translate3d(0,0,0) scale(1); transition: opacity .38s linear, transform .38s var(--ease-hero); }
html.js .stage.pulse .seal-dot { transform: translate3d(0,0,0) scale(1.55); transition: transform .26s var(--ease-inhale); }
html.js .stage.sweeping .seal-dot { transform: translate3d(var(--sx), var(--sy), 0) scale(1); transition: transform .68s var(--ease-hero); }
html.js .stage.settled .seal-dot { transform: translate3d(var(--rx), var(--ry), 0) scale(1); transition: transform .65s var(--ease-exhale); }
/* the seal does its work and then leaves — it no longer parks above the line */
html.js .stage.unpocket .seal-dot { opacity: 0; transition: opacity .55s linear; }

/* copy sets after the sweep */
.hero h1, .hero .sub, .hero .hero-ctas { opacity: 1; }
html.js .hero h1, html.js .hero .sub, html.js .hero .hero-ctas {
  opacity: 0; transform: translateY(8px);
  transition: opacity .56s linear, transform .56s var(--ease-brush);
}
html.js .hero.set h1 { opacity: 1; transform: none; }
html.js .hero.set .sub { opacity: 1; transform: none; transition-delay: .10s; }
html.js .hero.set .hero-ctas { opacity: 1; transform: none; transition-delay: .18s; }

html.reduced-motion .pane { opacity: var(--rest, .1); transform: translate3d(var(--xs), var(--ys), 0); transition: none; }
html.reduced-motion .phone { display: none; }
html.reduced-motion .seal-dot { opacity: 0; transition: none; }
html.reduced-motion .hero h1,
html.reduced-motion .hero .sub,
html.reduced-motion .hero .hero-ctas { opacity: 1; transform: none; transition: none; }

.hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.14; letter-spacing: 0.01em;
  margin-top: 0;
  color: var(--ink);
  /* the break is authored, not left to the wrap: line one carries the claim,
     line two qualifies it a size down */
  text-wrap: nowrap;
  max-width: none;
}
.h1-line2 b { font-weight: 700; color: var(--ink); }
.h1-line2 {
  display: block;
  font-size: .74em;
  color: var(--ink-70);
  margin-top: .18em;
}
@media (max-width: 1100px) {
  .hero h1 { text-wrap: balance; max-width: 18ch; }
  .h1-line2 { font-size: .78em; }
}
.hero .sub {
  margin-top: var(--s5);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 52ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-mono); font-size: 14px; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
  transition: background 240ms var(--ease-hero), border-color 240ms var(--ease-hero);
}
.btn-sm { font-size: 13px; padding: 9px 16px; }
.btn .gh { flex: none; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-90); }
.btn-ghost { border-color: var(--hairline); color: var(--ink); background: none; }
.btn-ghost:hover { border-color: var(--ink-40); }

/* on a phone the garden thins out — fewer, quieter panes, or it turns to mud */
@media (max-width: 900px) {
  .phone { display: none; }
}
@media (max-width: 700px) {
  .pane:nth-child(odd) { display: none; }
  html.js .stage.settled .pane { opacity: calc(var(--rest, .1) * .8); }
}

/* ---------- rock-garden channels ---------- */
.channel { padding-block: var(--s7); }
.channel.tight { padding-block: var(--s5); }

/* Cluster A: offset left, heavy, two columns */
.cluster-a {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s7);
  align-items: center;
}
.cluster-a .col-text { max-width: 46ch; }
.cluster-a .col-diagram { justify-self: start; }
.cl-kicker { margin-bottom: var(--s4); }
.cluster-a h2, .cluster-b h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.28; letter-spacing: 0.01em;
  max-width: 20ch;
}
.cluster-a p, .cluster-b p {
  margin-top: var(--s5);
  font-size: 16px; line-height: 1.75;
  color: var(--ink-70);
  max-width: 44ch;
}

/* svg canvas diagram */
.canvas-diagram { width: 100%; max-width: 460px; }


/* Cluster B: offset right, medium */
.cluster-b {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s7);
  align-items: center;
}
.cluster-b .col-text { justify-self: end; text-align: left; }
.cluster-b .col-hud { justify-self: end; }

.hud-panel {
  width: 100%; max-width: 380px;
  background: var(--pane-paper);
  border: 1.5px solid var(--pane-line);
  border-radius: var(--radius);
  padding: var(--s5) var(--s5) var(--s6);
  font-family: var(--font-mono);
}
.hud-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: var(--s4);
}
.hud-machine {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; padding-block: 9px;
  border-top: 1px solid var(--hairline);
}
.hud-machine:first-of-type { border-top: none; }
.hud-machine .stat { margin-left: auto; color: var(--ink-40); font-size: 12px; }
.hud-led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.hud-led.busy { background: var(--accent); }
.hud-bars { margin-top: var(--s5); display: flex; flex-direction: column; gap: 8px; }
.hud-bar-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-55); }
.hud-bar-track { flex: 1; height: 3px; background: var(--ink-12); border-radius: 2px; overflow: hidden; }
.hud-bar-fill { height: 100%; background: var(--ok); }
.hud-bar-fill.warn { background: var(--warn); }

/* ---------- install ---------- */
.channel[id] { scroll-margin-top: 72px; }
.install-wrap { max-width: 640px; }
.setup-h {
  margin-top: var(--s7);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 28px); letter-spacing: 0.03em;
}
.setup-h2 { margin-top: var(--s8); }
.block {
  margin-top: var(--s5);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.75;
  background: var(--pane-ink); color: var(--sig);
  padding: 16px 18px; border-radius: var(--radius);
  overflow-x: auto; white-space: pre;
  /* the block scrolls, but the bar itself is noise on a paper page */
  scrollbar-width: none; -ms-overflow-style: none;
}
.block::-webkit-scrollbar { display: none; }
.block-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.install-note { margin-top: var(--s6); font-size: 13px; color: var(--ink-70); line-height: 1.7; }
.copy-row { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s4); }
.copy-btn {
  font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: none; padding: 10px 18px; cursor: pointer; color: var(--ink);
  transition: border-color 240ms var(--ease-hero);
}
.copy-btn:hover { border-color: var(--ink-40); }
.copy-status { font-family: var(--font-mono); font-size: 12px; color: var(--ink-55); }

/* ---------- the tour ---------- */
.tour-head { max-width: 620px; }
.tour-h {
  margin-top: var(--s4);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 3vw, 32px); letter-spacing: 0.01em;
}
.tour-frame {
  margin-top: var(--s7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--pane-ink);
}
.tour-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .tour-frame { aspect-ratio: 3 / 4; } }

/* ---------- pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  gap: var(--s7);
}
.price-h {
  margin-top: var(--s4);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.25; letter-spacing: 0.01em;
  max-width: 16ch;
}
.price-note { margin-top: var(--s5); font-size: 13px; line-height: 1.7; color: var(--ink-70); max-width: 34ch; }
.price-card { padding-top: 0; }
.price-card + .price-card { border-top: 1px solid var(--hairline); padding-top: var(--s6); margin-top: var(--s6); }
.pricing-grid .price-card:first-child { border-top: none; padding-top: 0; margin-top: 0; }
@media (min-width: 900px) {
  .price-card + .price-card { border-top: none; padding-top: 0; margin-top: 0; }
  .price-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .price-col .price-card:nth-child(2) { border-left: 1px solid var(--hairline); padding-left: var(--s8); }
}
.plan-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); }
.plan-price { margin-top: var(--s4); font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4vw, 42px); }
.plan-sub { margin-top: 10px; font-size: 12.5px; color: var(--ink-55); letter-spacing: 0.02em; }
.plan-feats { margin-top: var(--s5); display: flex; flex-direction: column; gap: 10px; }
.plan-feats li { font-size: 14.5px; color: var(--ink-70); padding-left: 16px; position: relative; }
.plan-feats li::before {
  content: "";
  position: absolute; left: 1px; top: .62em;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-40);
}
.plan-cta { margin-top: var(--s6); }
.copy-inline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: none; color: var(--ink-70); padding: 3px 7px; margin-left: 6px;
  cursor: pointer; vertical-align: baseline;
  transition: border-color 240ms var(--ease-hero), color 240ms var(--ease-hero);
}
.copy-inline:hover { border-color: var(--ink-40); color: var(--ink); }
.plan-note { margin-top: var(--s3); font-size: 12px; color: var(--ink-55); letter-spacing: 0.02em; }

/* last section carries the page's closing breath — there is no footer */
#pricing { padding-bottom: var(--s10); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cluster-a, .cluster-b { grid-template-columns: 1fr; gap: var(--s7); }
  .cluster-a .col-diagram, .cluster-b .col-hud { justify-self: start; }
  .cluster-b .col-text { justify-self: start; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .hero { padding-top: var(--s6); padding-bottom: var(--s6); }
  .channel { padding-block: var(--s6); }
  .channel.tight { padding-block: var(--s4); }
}