/* One committed look, taken from the hero mock-up: warm grey paper with a faint drafting grid,
   black ink, a black mark, serif headlines and a plain sans for everything else. */
:root {
  /* paper */
  --canvas: #d4d0c7;
  --grid: rgba(0, 0, 0, 0.05);
  --surface: #dedad2;
  --rule: #b7b3aa;
  --ink: #000;
  --ink-2: #4b4943;
  --btn: #000;
  --on-btn: #fff;
  /* nodes: taken from the plugin's own palette */
  --node: #1e1e1e;
  --node-head: #161616;
  --node-field: #2e2e2e;
  --node-edge: #3e3e3e;
  --node-text: #d7d7d7;
  --node-dim: #8c8c8c;
  --node-io: #242424;
  --node-outline: #323232;
  --node-grey: #555;
  --node-knob: #e6e6e6;
  --pane: #1c1c1c;
  --pane-edge: #3a3a3a;
  --plate: rgba(0, 200, 83, 0.2);
  /* states, used only inside the node illustrations */
  --accent: #00c853;
  --accent-ink: #000;
  --amber: #e0a020;
  --amber-ink: #7a5200;
  --red: #e14646;
  --blue: #5aa0ff;
  --grey: #8a8f8a;
  /* the living logo */
  --mark-core: #000;

  --display: "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 2.4vw, 36px);
  --wrap: 1180px;
  --radius: 10px;
  color-scheme: light;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--canvas);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* the drafting grid: wide columns centred on the page, shallow rows. It is pinned to the window, so the page
   scrolls over it and the grid itself never moves. A fixed layer rather than background-attachment, which
   phones ignore. The header is one row tall, so the first line always sits right under it.
   The grid belongs to the first screen only: it fades away as that screen scrolls off, and is gone for the rest. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 200px 70px;
  background-position: 50% 1px;
  opacity: var(--grid-fade, 1);   /* site.js fades it out as the first screen scrolls away */
}

h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, video { max-width: 100%; display: block; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: var(--mono); }
.small { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- shared pieces ---------- */

.dot {
  flex: none; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%;
  background: var(--grey);
}
.dot--wired { background: var(--accent); }
.dot--manual { background: var(--blue); }
.dot--default { background: var(--grey); }
.dot--planned { background: var(--amber); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8em 1.4em; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--on-btn);
  font: 500 0.9375rem/1 var(--body); text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px #000; }
.btn--small { padding: 0.5em 1.15em; font-size: 0.8125rem; }

.badge {
  padding: 0.15em 0.5em; border: 1px solid var(--node-edge); border-radius: 5px;
  color: var(--node-dim); font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.04em;
}
.tag {
  display: inline-block; vertical-align: middle; margin-left: 0.5em;
  padding: 0.2em 0.6em; border: 1px solid currentColor; border-radius: 999px;
  color: var(--ink-2); font: 500 0.6875rem/1.4 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
}

.pin {
  display: flex; align-items: center; gap: 0.6em;
  color: var(--ink-2); font: 500 0.75rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font: 700 0.8125rem/1 var(--body); text-decoration: none;
}
.wordmark .alien-mark { width: 3.25rem; margin-block: -0.5rem; }

/* The living logo (alien-mark.js draws into it). */
.alien-mark { flex: none; display: inline-block; width: 1.5em; aspect-ratio: 1; }

/* A node: the dark object that sits on the canvas. */
.node {
  background: var(--node); color: var(--node-text);
  border: 1px solid var(--node-edge); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
}
.node__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.8rem; background: var(--node-head);
  border-bottom: 1px solid var(--node-edge);
  font: 500 0.8125rem/1.2 var(--mono);
}
.node__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node__state { display: inline-flex; align-items: center; gap: 0.4em; margin-left: auto; color: var(--node-dim); font-variant-numeric: tabular-nums; }
.node__btn {
  padding: 0.3em 0.7em; background: var(--node-field); color: var(--node-text);
  border: 1px solid var(--node-edge); border-radius: 6px;
  font: 500 0.75rem/1.2 var(--mono); cursor: pointer;
}
.node__btn:hover { border-color: var(--node-dim); }

.placeholder-note { margin-top: 0.7rem; color: var(--ink-2); font: 400 0.8125rem/1.4 var(--body); }

/* ---------- draft strip, header ---------- */

.draft-note { color: var(--ink-2); font: 400 0.8125rem/1.4 var(--body); }

/* The header is exactly one grid row tall, so the first grid line sits under it. */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; gap: 2.5rem;
  min-height: 70px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(8px);
}
.top__nav { display: flex; gap: 2.5rem; margin-left: auto; font-size: 0.8125rem; }
.top__nav a { text-decoration: none; color: var(--ink); }
.top__nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 820px) {
  .top__nav { display: none; }
  .top .btn { margin-left: auto; }
}

main, .foot { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

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

/* First screen: a compact title block, then the demo. On a wide screen the captions sit beside
   the demo so the whole thing fits above the fold; the demo's height is capped by the viewport. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2.6vh, 1.75rem); padding-block: clamp(1.4rem, 4vh, 2.5rem) clamp(2rem, 5vh, 3rem); }
.hero__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.9rem 2rem; }
.hero__text h1 { grid-column: 1 / -1; }
.hero h1 {
  font: 400 clamp(2rem, 4.3vw, 3.5rem)/1 var(--display);
  letter-spacing: -0.012em; text-wrap: balance;
}
.hero__catch { max-width: 44rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.4; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero__req { color: var(--ink-2); font: 400 0.8125rem/1.3 var(--mono); }
@media (max-width: 860px) {
  .hero__text { grid-template-columns: minmax(0, 1fr); }
}

.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.demo__caption { display: grid; gap: 0.8rem; align-content: start; min-width: 0; }
@media (min-width: 1040px) {
  .demo { display: flex; align-items: flex-start; gap: 1.5rem; }
  .node--frame { flex: 1 1 auto; min-width: 30rem; max-width: calc((100svh - 9rem) * 16 / 9); }
  .demo__caption { flex: 0 0 14rem; padding-top: 0.4rem; }
  .shots { flex-direction: column; align-items: stretch; }
  .shots button { width: 100%; justify-content: flex-start; }
}
.stage { position: relative; aspect-ratio: 16 / 9; background: #0f100f; }
.stage video { width: 100%; height: 100%; object-fit: cover; }
.stage__placeholder, .still {
  display: grid; align-content: center; justify-items: center; gap: 0.5rem;
  padding: 1.2rem; text-align: center; color: var(--node-text);
  background-color: #141514;
  background-image:
    linear-gradient(#1d1f1d 1px, transparent 1px),
    linear-gradient(90deg, #1d1f1d 1px, transparent 1px);
  background-size: 28px 28px;
}
.stage__placeholder { position: absolute; inset: 0; }
.stage__tag {
  padding: 0.3em 0.8em; border: 1px dashed var(--node-dim); border-radius: 999px;
  color: var(--node-dim); font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.stage__shot { color: var(--accent); font: 500 0.8125rem/1.3 var(--mono); }
.stage__desc { max-width: 34rem; font-size: clamp(0.95rem, 1.7vw, 1.25rem); line-height: 1.35; text-wrap: balance; }
.stage__spec { color: var(--node-dim); font: 400 0.75rem/1.4 var(--mono); }
.stage__bar { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--node-edge); }
.stage__bar span { display: block; width: 0; height: 100%; background: var(--accent); }

.demo__line { font: 400 clamp(1.2rem, 2.4vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.01em; }
.shots { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.shots button {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.35em 0.75em; background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px;
  font: 500 0.75rem/1.3 var(--mono); cursor: pointer;
}
.shots button:hover { color: var(--ink); border-color: var(--ink-2); }
.shots button[aria-current="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.shots time { opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ---------- splash: the first screen ---------- */

/* The mark, one line, what it runs in. Nothing else. */
.splash {
  display: grid; align-content: center; justify-items: center; text-align: center;
  min-height: min(calc(100svh - 70px), 57rem);
  padding: 2rem var(--gutter) calc(2rem + 15vh);
}
.splash__mark { width: clamp(11rem, 21vw, 19rem); margin-block: -1.5rem -0.5rem; }
.splash h1 { font: 400 clamp(2.4rem, 5.6vw, 4.1rem)/1.05 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.splash__req { margin-top: 1.6rem; font-size: 1rem; }
.splash__apps { display: flex; gap: 1.6rem; margin-top: 1.8rem; }
.splash__apps li { width: 3.2rem; height: 3.2rem; border-radius: 10px; overflow: hidden; }
.splash__apps img { width: 100%; height: 100%; object-fit: cover; }
.splash__apps .is-padded img { transform: scale(1.1333); } /* this icon's file has a margin around it */

/* ---------- blocks: one idea each, few words ---------- */

.block { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
main > .block:first-child { border-top: 0; }
.block__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }
.block__head > div { display: grid; gap: 0.9rem; min-width: 0; flex: 1 1 22rem; }
.block h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.lede { max-width: 40rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.45; text-wrap: pretty; }

/* features: a list that opens one at a time, with the matching picture beside it */
.reveal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .reveal { grid-template-columns: minmax(0, 1fr); } }
.reveal__item { border-top: 1px solid var(--rule); }
.reveal__item:last-child { border-bottom: 1px solid var(--rule); }
.reveal__item h3 { font: inherit; }
.reveal__item button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.15rem 0; background: none; border: 0; color: var(--ink-2); cursor: pointer; text-align: left;
  font: 400 clamp(1.15rem, 2vw, 1.5rem)/1.2 var(--display); letter-spacing: -0.01em;
}
.reveal__item button:hover, .reveal__item.is-open button { color: var(--ink); }
.reveal__sign { flex: none; position: relative; width: 1rem; height: 1rem; }
.reveal__sign::before, .reveal__sign::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; margin-top: -1px; background: currentColor; transition: transform 0.2s ease; }
.reveal__sign::after { transform: rotate(90deg); }
.reveal__item.is-open .reveal__sign::after { transform: rotate(0deg); }
.reveal__text { max-width: 32rem; padding-bottom: 1.3rem; color: var(--ink-2); }
.reveal__media { min-width: 0; padding: clamp(1rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--rule); border-radius: calc(var(--radius) * 1.6); }
.reveal__media .bench { margin-top: 0; }

/* yours and in control: two plain cards */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
.trust article { display: grid; gap: 0.9rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface); border: 1px solid var(--rule); border-radius: calc(var(--radius) * 1.6); }
.trust h3 { display: flex; align-items: center; gap: 0.8rem; font: 400 clamp(1.3rem, 2.4vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.01em; }
.trust__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: var(--canvas); }
.trust p { color: var(--ink-2); }

/* in action */
#action .demo { margin-top: 0.4rem; }

/* first users: reserved */
.stories { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: clamp(1.5rem, 5vw, 4.5rem); align-items: end; }
.stories__head { display: grid; gap: 0.9rem; min-width: 0; }
.stories__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.stories__row li { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px dashed var(--rule); border-radius: calc(var(--radius) * 1.6); }
.stories__row .stage__tag { color: var(--ink-2); border-color: var(--ink-2); }
.stories > .placeholder-note { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 860px) { .stories { grid-template-columns: minmax(0, 1fr); } .stories__row li { aspect-ratio: 1; } }

/* pricing, compact */
.block.pricing { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
@media (max-width: 860px) { .block.pricing { grid-template-columns: minmax(0, 1fr); } }

/* questions, closed until asked */
.qa { max-width: 52rem; }
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-child { border-bottom: 1px solid var(--rule); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; cursor: pointer; list-style: none; font: 500 1.0625rem/1.3 var(--body); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; color: var(--ink-2); font: 400 1.4rem/1 var(--body); }
.qa details[open] summary::after { content: "\2212"; }
.qa details p { max-width: 42rem; padding-bottom: 1.2rem; color: var(--ink-2); }
.qa sup a { color: var(--accent-ink); text-decoration: none; }

/* ---------- the argument: problem, answer, proof, questions ---------- */

.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); }
.band__head { display: grid; gap: 1rem; min-width: 0; }
.band__head h2 { max-width: 46rem; }
.hero__catch sup a, .stats sup a { color: var(--accent-ink); text-decoration: none; }

/* the problem: one big statement, three ways it goes wrong */
.problem { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.problem h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.pains { display: grid; }
.pains li { display: grid; gap: 0.35rem; padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.pains li:first-child { padding-top: 0; border-top: 0; }
.pains h3 { font: 400 1.125rem/1.25 var(--display); }
.pains p { color: var(--ink-2); max-width: 36rem; }
@media (max-width: 860px) { .problem { grid-template-columns: minmax(0, 1fr); } }

/* the answer: today against Alien, row by row */
.compare { display: grid; }
.compare__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 6fr); border-top: 1px solid var(--rule); }
.compare__row > p { padding: 1rem 1.2rem 1rem 0; min-width: 0; }
.compare__when { font-weight: 600; }
.compare__old { color: var(--ink-2); }
.compare__new { padding-left: 1.2rem !important; background: var(--node); color: var(--node-text); border-inline: 1px solid var(--node-edge); font-weight: 500; }
.compare__row--head { border-top: 0; }
.compare__row--head > p { padding-block: 0.7rem; color: var(--ink-2); font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.compare__row--head > p:last-child { padding-left: 1.2rem; background: var(--node-head); color: var(--accent); border: 1px solid var(--node-edge); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.compare__row:last-child .compare__new { border-bottom: 1px solid var(--node-edge); border-radius: 0 0 var(--radius) var(--radius); }
.compare__row + .compare__row .compare__new { border-top: 1px solid var(--node-edge); }
.compare__tag { display: none; }
@media (max-width: 760px) {
  .compare__row--head { display: none; }
  .compare__row { grid-template-columns: minmax(0, 1fr); padding-block: 1rem; gap: 0.6rem; }
  .compare__row > p { padding: 0; }
  .compare__new { padding: 0.8rem 1rem !important; border: 1px solid var(--node-edge) !important; border-radius: var(--radius) !important; }
  .compare__tag { display: block; margin-bottom: 0.2rem; font: 500 0.6875rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
  .compare__new .compare__tag { color: var(--accent); opacity: 1; }
}

/* the proof */
.stats--big { padding-top: 0; border-top: 0; }
.stats--big dt { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.012em; }
.stats--big dd { max-width: 17rem; font-size: 0.9375rem; }
.proof__asked { max-width: 46rem; color: var(--ink-2); }
.quotes { display: grid; gap: 0.6rem; justify-items: start; padding: 1.2rem; border: 1px dashed var(--rule); border-radius: var(--radius); color: var(--ink-2); font-size: 0.9375rem; }
.quotes .stage__tag { color: var(--ink-2); border-color: var(--ink-2); }
.quotes p:last-child { max-width: 40rem; }

/* fair questions */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.faq > div { display: grid; gap: 0.4rem; align-content: start; padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.faq h3 { font: 400 1.125rem/1.25 var(--display); }
.faq p { color: var(--ink-2); }

/* ---------- features ---------- */

.feature, .suite, .pricing { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); }

.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.feature--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.feature--wide.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feature--flip .feature__copy { order: 2; }
@media (max-width: 860px) {
  .feature, .feature--wide, .feature--wide.feature--flip { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__copy { order: 0; }
}
.feature__copy { display: grid; gap: 1rem; min-width: 0; }
.feature__copy > p:not(.pin) { max-width: 34rem; }
h2 {
  font: 400 clamp(1.7rem, 3.4vw, 2.6rem)/1.1 var(--display);
  letter-spacing: -0.012em; text-wrap: balance;
}
.exhibit { min-width: 0; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem clamp(1rem, 4vw, 3rem); padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.stats--wide { grid-column: 1 / -1; }
.stats--wide > div { display: flex; align-items: baseline; gap: 0.8rem; }
.stats--wide dt { flex: none; }
.stats--wide dd { margin-top: 0; max-width: 16rem; }
@media (max-width: 860px) { .stats--wide > div { display: block; } .stats--wide dd { margin-top: 0.3rem; } }
.stats dt { font: 400 clamp(1.3rem, 2.4vw, 1.75rem)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stats dd { margin-top: 0.3rem; color: var(--ink-2); font-size: 0.875rem; line-height: 1.35; }
.stats sup a { color: var(--accent-ink); text-decoration: none; }
@media (max-width: 460px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* the panel illustration */
.panel__body { display: grid; gap: 0.6rem; padding: 0.9rem; }
.panel__label { color: var(--node-dim); font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.panel__prompt { padding: 0.7rem 0.8rem; background: var(--node-field); border: 1px solid var(--node-edge); border-radius: 6px; font-size: 0.9375rem; }
.badge--model { margin-left: auto; }
.attempts { display: grid; gap: 0.4rem; }
.attempts li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--node-edge); font: 400 0.8125rem/1.4 var(--mono); }
.attempts__n { color: var(--node-dim); }
.attempts code { font: inherit; color: var(--node-dim); overflow-wrap: anywhere; }
.state--ok { color: var(--accent); }
.state--err { color: var(--red); }
@media (max-width: 460px) { .attempts li { grid-template-columns: auto minmax(0, 1fr); } .attempts code { grid-column: 1 / -1; } }

/* code blocks */
.code {
  padding: 0.9rem 1rem; overflow-x: auto;
  background: var(--node); color: var(--node-text);
  border: 1px solid var(--node-edge); border-radius: var(--radius);
  font: 400 0.8125rem/1.6 var(--mono); tab-size: 4;
}
.code .c { color: var(--accent); }
.code .d { color: var(--node-dim); }
.code--file { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55); }

/* the live node and its viewport */
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0.8rem; margin-top: 0.8rem; align-items: stretch; }
@media (max-width: 560px) { .bench { grid-template-columns: minmax(0, 1fr); } }
.node__io { display: grid; }
.io { display: flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--node-edge); font: 400 0.8125rem/1.2 var(--mono); }
.io--control { flex-wrap: wrap; }
.io__name { color: var(--node-text); }
.io__val { margin-left: auto; color: var(--node-dim); font-variant-numeric: tabular-nums; }
.io input[type="range"] { flex: 1 1 5rem; min-width: 0; accent-color: var(--accent); }
.io--control .io__val { margin-left: 0; min-width: 2.2em; text-align: right; }
.node__foot { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; font: 400 0.8125rem/1.2 var(--mono); }
.node__foot .node__btn { margin-left: 0.4rem; }

.viewport { width: 100%; height: 100%; min-height: 12rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.viewport__curve { stroke: var(--ink-2); stroke-width: 1.5; }
.viewport circle { fill: var(--accent-ink); }

.legend { display: grid; gap: 0.4rem; font-size: 0.9375rem; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 0.6rem; }

/* site */
.pins-out { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pins-out li { padding: 0.25em 0.65em; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); font: 400 0.8125rem/1.4 var(--mono); }
.still { aspect-ratio: 16 / 10; border: 1px solid var(--node-edge); border-radius: var(--radius); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55); }

/* suite */
.suite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.pricing { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.pricing__head { display: grid; gap: 1rem; min-width: 0; }
.pricing__head > p:not(.pin) { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 860px) { .pricing { grid-template-columns: minmax(0, 1fr); } }
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 0.8rem; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
/* Six cells: the site map node takes two, so the grid has no hole at six or at three columns. */
.cards li:first-child { grid-column: span 2; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } .cards li:first-child { grid-column: auto; } }
.cards li { display: grid; gap: 0.5rem; align-content: start; padding: 1.1rem; background: var(--surface); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cards h3 { font: 500 0.9375rem/1.3 var(--mono); color: var(--accent-ink); }
.cards p { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }

.soon { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.9rem 1rem; border: 1px dashed var(--rule); border-radius: var(--radius); font-size: 0.9375rem; }
.soon .dot { transform: translateY(-0.05em); }
.soon strong { color: var(--amber-ink); white-space: nowrap; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; min-width: 0; }
.plan { display: grid; gap: 0.8rem; align-content: start; padding: 1.4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.plan h3 { font: 400 1.125rem/1.2 var(--display); }
.plan__price { font: 400 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--ink-2); font: 400 0.9375rem/1 var(--body); }
.plan ul { display: grid; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-2); }
.plan--pro { border-style: dashed; }

/* waitlist: the closing band, dark like a node, where the logo has room */
.waitlist {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem);
  margin-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--node); color: var(--node-text);
  border: 1px solid var(--node-edge); border-radius: calc(var(--radius) * 1.6);
}
.waitlist .alien-mark--large { width: clamp(7rem, 20vw, 13rem); margin: 0; --mark-core: var(--canvas); }
.waitlist .btn { background: var(--canvas); color: #000; }
.waitlist h2 { color: #fff; }
.waitlist__body { display: grid; gap: 0.9rem; justify-items: start; min-width: 0; }
.waitlist__body > p { color: var(--node-dim); }
.waitlist .pin { color: var(--node-dim); }
.waitlist__form { display: flex; flex-wrap: wrap; gap: 0.6rem; width: min(100%, 32rem); }
.waitlist__form input {
  flex: 1 1 14rem; min-width: 0; padding: 0.8em 1.1em;
  background: var(--node-field); color: var(--node-text);
  border: 1px solid var(--node-edge); border-radius: 999px; font: 400 1rem/1.2 var(--body);
}
.waitlist__form input::placeholder { color: var(--node-dim); }
.waitlist__body > .waitlist__msg { color: var(--node-text); font: 400 0.875rem/1.4 var(--mono); }
@media (max-width: 640px) { .waitlist { grid-template-columns: minmax(0, 1fr); } }

/* footer */
.foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 3rem 4rem; border-top: 1px solid var(--rule); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.foot__cols > div { display: grid; gap: 0.5rem; align-content: start; }
.foot h3 { font: 500 0.75rem/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.notes { display: grid; gap: 0.3rem; padding-left: 1.2rem; list-style: decimal; color: var(--ink-2); font-size: 0.8125rem; }

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

/* ---------- glimpses: faint nodes at work behind the first screen ---------- */

/* Drawn by glimpses.js in the plugin's own node style. Each one flashes up somewhere, plays a cut of a node being described and built, and is gone.
   --peak, --scale and --soft are set per glimpse by the script; --peak never goes above 0.4.
   Nothing here can be clicked or focused. */
.splash { position: relative; }
.splash > :not(.glimpses) { position: relative; z-index: 1; }
/* the glimpsed nodes are drawn in a light skin: pale bodies, dark text, the same green deepened so it reads on white.
   Only the tokens change, and only inside this layer; the nodes further down the page keep the plugin's dark skin. */
.glimpses {
  --node: #fbfaf7; --node-head: #ece9e2; --node-io: #f4f2ed; --node-field: #fff;
  --node-edge: #d2cec5; --node-outline: #8d8980; --node-text: #161616; --node-dim: #6b6862;
  --node-grey: #c2beb5; --node-knob: #2a2a2a; --pane: #fbfaf7; --pane-edge: #cfcbc2;
  --accent: #00963f; --amber: #a36a00; --red: #c62f2f; --blue: #2f78d8;
}
.glimpses .gpane { box-shadow: 0 0 0 1px var(--node-outline); }
.glimpses { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.glimpse {
  --peak: 0.3; --scale: 0.6; --soft: 0px;
  position: absolute; opacity: 0;
  transition: opacity 1.8s ease-in-out;   /* the way out; glimpses.js waits this long before removing it */
}
.glimpse.is-on { opacity: min(var(--peak), 0.4); transition-duration: 1.5s; }   /* the way in */
.glimpse.is-on.is-blink { opacity: calc(min(var(--peak), 0.4) * 0.2); transition-duration: 0.05s; }
.glimpse__in { width: max-content; transform: scale(var(--scale)); transform-origin: 0 0; }
@media (max-width: 820px) {
  /* on a phone they sit close to the words, so they stay fainter */
  .glimpse.is-on { opacity: min(var(--peak), 0.25); }
  .glimpse.is-on.is-blink { opacity: 0.05; }
}

/* a node with what it makes beside it: black wireframe straight on the paper, as Rhino draws it */
/* One scene: the panel over the node, both exactly the same width and type size, and the drawing beside them,
   centred on the horizontal midline of the panel and node taken together. .flip mirrors it. */
.glimpses .g-scene {
  display: grid; grid-template-columns: 344px auto; grid-template-areas: "box out" "node out";
  column-gap: 30px; row-gap: 14px; align-items: center;
}
.glimpses .g-scene.flip { grid-template-columns: auto 344px; grid-template-areas: "out box" "out node"; }
.glimpses .g-scene .gpane { grid-area: box; width: 344px; box-sizing: border-box; border: 0; font-size: 12px; border-radius: 9.6px; }
.glimpses .g-scene .gnode { grid-area: node; width: 344px; min-width: 0; }
.glimpses .g-scene .gwire { grid-area: out; align-self: center; }
.glimpses .g-scene .gp-line { display: none; }
.glimpses .g-scene .gp-text { height: 52px; box-sizing: content-box; overflow: hidden; }   /* three lines, reserved before a letter is typed */
/* the node fades in as an empty shell when the sentence is sent, and its contents fade in when it runs */
.glimpses .gnode, .glimpses .n-ins, .glimpses .n-outs { transition: opacity 0.9s ease-in-out, box-shadow 0.5s ease; }
.glimpses .gnode.g-wait { opacity: 0; }
.glimpses .gnode.g-shell .n-ins, .glimpses .gnode.g-shell .n-outs { opacity: 0; }
.glimpses .n-status, .glimpses .n-status i { transition: color 0.4s ease, background-color 0.4s ease; }
/* the drawing's space is held from the start, but nothing is drawn in it until the node has appeared.
   .is-seed then fades in the dashed geometry the node is given; .is-in fills in what the node made */
.glimpses .gwire { flex: none; overflow: visible; }
.glimpses .gwire path { opacity: 0; transition: opacity 1s ease-in-out; }
.glimpses .gwire.is-seed path.dash, .glimpses .gwire.is-in path { opacity: 1; }
.glimpses .gwire path, .glimpses .gwire circle { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.glimpses .gwire .fine { stroke-width: 1.1; }
.glimpses .gwire .dash { stroke-width: 1.1; stroke-dasharray: 4 4; }

/* the node, in the plugin's own units: 1 canvas unit = 0.1em */
.glimpses .gnode {
  font: 12px/1.2 "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif; color: var(--node-text); background: var(--node);
  border-radius: 0.8em; position: relative; width: max-content; min-width: 17em; overflow: hidden; flex: none; text-align: left;
  box-shadow: 0 0 0 1px var(--node-outline);
}
.glimpses .gnode::before { content: ""; position: absolute; left: 0.05em; top: 0.8em; bottom: 0.8em; width: 0.2em; background: var(--accent); z-index: 2; }
.glimpses .gnode.err { box-shadow: 0 0 0 2px var(--red); }
.glimpses .gnode.sel { box-shadow: 0 0 0 2px var(--accent); }
.glimpses .gnode.haserr { min-width: 22em; }
.glimpses .n-head { height: 2.6em; background: var(--node-head); display: flex; align-items: center; padding: 0 0.9em; }
.glimpses .n-title { flex: 1; font-size: 1.2em; font-weight: 700; white-space: nowrap; padding-right: 1em; }
.glimpses .n-lang { font-size: 0.87em; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; width: 3.45em; height: 1.38em; display: grid; place-items: center; }
.glimpses .n-mcp { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--accent); margin-left: 0.7em; }
.glimpses .n-status { height: 2em; display: flex; align-items: center; gap: 0.4em; padding: 0 0.6em 0 0.85em; border-top: 1px solid var(--node-edge); color: var(--node-dim); }
.glimpses .n-status i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--node-grey); flex: none; }
.glimpses .n-st { flex: 1; white-space: nowrap; padding-right: 1em; }
.glimpses .n-status.ok i { background: var(--accent); }
.glimpses .n-status.busy { color: var(--amber); }
.glimpses .n-status.busy i { background: var(--amber); }
.glimpses .n-status.error { color: var(--red); }
.glimpses .n-status.error i { background: var(--red); }
.glimpses .n-panel { font-size: 0.87em; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; width: 5.3em; height: 1.6em; display: grid; place-items: center; }
.glimpses .n-io { background: var(--node-io); display: flex; justify-content: space-between; gap: 0.8em; padding: 0.2em 0; }
.glimpses .n-ins, .glimpses .n-outs { display: grid; grid-auto-rows: 1.8em; align-items: center; align-content: start; }
.glimpses .n-io.ctl .n-ins { grid-template-columns: auto 12.4em; grid-auto-rows: 2.2em; }
.glimpses .n-io.ctl .n-outs { grid-auto-rows: 2.2em; }
.glimpses .n-lab { display: flex; align-items: center; gap: 0.35em; padding: 0 0.8em 0 0.65em; white-space: nowrap; }
.glimpses .n-lab i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--node-grey); flex: none; }
.glimpses .n-lab i.set { background: var(--blue); }
.glimpses .n-lab i.wired { background: var(--accent); }
.glimpses .n-out { text-align: right; padding: 0 0.9em 0 0.4em; white-space: nowrap; }
.glimpses .n-ctl { height: 1.6em; display: flex; align-items: center; min-width: 0; }
.glimpses .n-wired { color: var(--node-dim); }
.glimpses .n-err { width: 0; min-width: 100%; padding: 0.5em 0.9em; color: var(--red); border-top: 1px solid var(--red); overflow-wrap: anywhere; }
.glimpses .sl { display: flex; align-items: center; width: 100%; height: 100%; }
.glimpses .sl-track { position: relative; width: 7.6em; height: 0.3em; margin-left: 0.5em; background: var(--node-grey); flex: none; }
.glimpses .sl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.glimpses .sl-knob { position: absolute; top: 50%; width: 1em; height: 1em; border-radius: 50%; background: var(--node-knob); transform: translate(-50%, -50%); }
.glimpses .sl-val { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.glimpses .tg { display: flex; align-items: center; gap: 0.6em; color: var(--node-dim); }
.glimpses .tg b { width: 2.4em; height: 1.2em; border-radius: 0.6em; background: var(--node-grey); position: relative; display: block; }
.glimpses .tg b::after { content: ""; position: absolute; top: 0.1em; left: 0.1em; width: 1em; height: 1em; border-radius: 50%; background: var(--node-knob); transition: left 0.2s; }
.glimpses .tg.on b { background: var(--accent); }
.glimpses .tg.on b::after { left: 1.3em; }
.glimpses .fld { width: 100%; height: 100%; display: flex; align-items: center; color: var(--node-text); background: var(--node-field); border: 1px solid var(--node-edge); border-radius: 0.4em; padding: 0 0.5em; min-width: 0; white-space: nowrap; overflow: hidden; }
.glimpses .fld.pick::after { content: "▾"; margin-left: auto; padding-left: 0.5em; color: var(--node-dim); }
.glimpses .fld.caret::after { content: ""; width: 1px; height: 1.1em; background: var(--node-text); margin-left: 1px; }

/* the Alien panel */
.glimpses .gpane { width: 300px; background: var(--pane); color: var(--node-text); border-radius: 10px; overflow: hidden; border: 1px solid var(--pane-edge); text-align: left; font: 12.5px/1.45 -apple-system, "Segoe UI", Helvetica, sans-serif; }
.glimpses .gpane > div { padding: 10px 12px; border-bottom: 1px solid var(--pane-edge); }
.glimpses .gpane > div:last-child { border-bottom: 0; }
.glimpses .gp-head { display: flex; align-items: center; gap: 8px; }
.glimpses .gp-head b { font-size: 13px; flex: 1; }
.glimpses .gp-chip { background: var(--node-field); border: 1px solid var(--pane-edge); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.glimpses .gp-h { margin: 12px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--node-dim); text-transform: uppercase; }
.glimpses .gp-h:first-child { margin-top: 0; }
.glimpses .gp-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; min-height: 21px; }
.glimpses .gp-title span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glimpses .gp-pill { border: 1px solid var(--accent); color: var(--accent); border-radius: 99px; padding: 0 7px; font-size: 10px; font-weight: 600; }
.glimpses .gp-line { margin: 8px 0 0; }
.glimpses .gp-text.caret::after { content: ""; display: inline-block; vertical-align: -2px; width: 1px; height: 14px; background: var(--node-text); margin-left: 1px; }
.glimpses .gp-text { min-height: 62px; padding: 7px 8px; background: var(--node-field); border: 1px solid var(--pane-edge); border-radius: 6px; }
.glimpses .gp-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.glimpses .gp-row .grow { flex: 1; }
.glimpses .gp-btn { border: 1px solid var(--accent); color: var(--accent); background: var(--node-field); border-radius: 6px; padding: 4px 10px; }
.glimpses .gp-btn.stop { border-color: var(--amber); color: var(--amber); }
.glimpses .gp-notes { color: var(--node-dim); font-size: 11px; margin: 2px 0 0 10px; }
.glimpses .gp-lib { padding: 4px 0; }
.glimpses .gp-lib div + div { color: var(--node-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glimpses .dim { color: var(--node-dim); }
.glimpses .ok { color: var(--accent); }
.glimpses .warn { color: var(--amber); }
.glimpses .bad { color: var(--red); }


@media (prefers-reduced-motion: reduce) {
  .glimpse, .glimpse.is-on, .glimpses .gwire path, .glimpses .gnode, .glimpses .n-ins, .glimpses .n-outs { transition: none; filter: none; }
  .glimpses .tg b::after { transition: none; }
}

/* ---------- the opening ---------- */
/* The page loads under a solid sheet of the mark's colour, already there before any script runs. intro.js
   then draws the same colour on a canvas and drains it into the logo; .is-live drops the plain sheet once the
   canvas has its first frame. Without the script, or with reduced motion, the sheet simply fades
   (.is-gone), and if nothing at all happens it fades by itself after a few seconds. */
.intro {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: var(--mark-core);
  transition: opacity 0.6s ease;
  animation: intro-giveup 0.6s ease 5s forwards;
}
.intro.is-live { background: transparent; animation: none; }
.intro.is-gone { opacity: 0; }
@keyframes intro-giveup { to { opacity: 0; visibility: hidden; } }

/* ---------- headline roll: "Alien builds it. / fixes it. / tunes it." ---------- */

/* The roll is always as wide as its longest phrase, so the line never changes width and
   "Describe it. Alien" never moves. The sizer holds every phrase, invisible, in one cell:
   it sets that width and keeps the headline's baseline. The track is laid over it, out of
   the flow, and slides up one phrase at a time, full stop included; anything outside the
   line is clipped. */
.hl-end { white-space: nowrap; }
.roll {
  display: inline-block; position: relative; vertical-align: baseline; white-space: nowrap;
  clip-path: inset(-0.06em -0.08em -0.24em -0.08em);
}
.roll__sizer { display: inline-grid; visibility: hidden; }
.roll__sizer > span { grid-area: 1 / 1; }
.roll__track {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em;
  transform: translateY(calc(var(--roll-i, 0) * -1.45em));
  transition: transform 0.75s cubic-bezier(0.7, 0, 0.15, 1.08);
}
.roll__track > span { line-height: 1.05em; transition: opacity 0.5s ease, filter 0.5s ease; }
.roll__track > span:not(.is-on) { opacity: 0; filter: blur(2px); }
.roll.is-snapping .roll__track, .roll.is-snapping .roll__track > span { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .roll__track, .roll__track > span { transition: none; }
}

/* ---------- first screen to the mockup, and the problem -> fix story ---------- */
/* Mark, small catchline, big headline, one button; what it runs in is pinned to the foot of the screen. */
.splash { min-height: calc(100svh - 70px); padding: 1rem var(--gutter) 14rem; align-content: center; }
.splash__mark { width: clamp(11rem, 18vw, 17.5rem); margin-block: -2.5rem -2rem; }
.splash__catch { margin-top: 2.6rem; font: 400 clamp(1.15rem, 1.75vw, 1.6rem)/1.2 var(--display); }
.splash h1 { margin-top: 1rem; font: 400 clamp(2.5rem, 4.4vw, 4.1rem)/1.05 var(--display); letter-spacing: -0.005em; }
.splash__cta { margin-top: 2.2rem; }
.splash > .splash__foot { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4.5vh, 2.6rem); display: flex; align-items: center; justify-content: center; gap: 1rem; }
.splash__foot .splash__req { margin: 0; font-size: 1rem; }
.splash__foot .splash__apps { margin: 0; gap: 0.75rem; }
.splash__foot .splash__apps li { width: 1.6rem; height: 1.6rem; border-radius: 4px; }
.problem .band__head { align-content: start; }
.clip video { display: block; width: 100%; height: auto; background: #0f100f; border: 1px solid var(--rule); border-radius: calc(var(--radius) * 1.6); }
.plan__cta { justify-self: start; margin-top: 0.4rem; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* The still mark: the drawn logo, used beside the name in the header and footer. The animated mark stays on the first screen and the waitlist. */
.wordmark__mark { display: block; flex: none; width: auto; height: 1.9rem; }

/* ---------- dark mode ----------
   The same look at night: warm near-black paper, the grid in faint light lines, off-white ink and an off-white
   logo. Set by data-theme="dark" on <html>: chosen with the toggle at the top right and remembered, or taken from
   the system setting until someone picks. The node illustrations are already dark and stay as they are. */
:root[data-theme="dark"] {
  --canvas: #141412;
  --grid: rgba(255, 255, 255, 0.055);
  --surface: #1d1d1a;
  --rule: #34332e;
  --ink: #ecebe6;
  --ink-2: #a19f97;
  --btn: #ecebe6;
  --on-btn: #111110;
  --accent-ink: #ecebe6;
  --mark-core: #ecebe6;
  color-scheme: dark;
}
:root[data-theme="dark"] .btn:hover { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.9); }
:root[data-theme="dark"] .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* the drawn logo beside the name is a black file: show it in the off-white ink */
:root[data-theme="dark"] .wordmark__mark { filter: invert(1) sepia(0.08) brightness(0.93); }
/* the waitlist panel is dark in both themes; at night it gets a light logo and a light button */
:root[data-theme="dark"] .waitlist { background: #1b1b19; border-color: var(--rule); }
:root[data-theme="dark"] .waitlist .alien-mark--large { --mark-core: var(--ink); }
:root[data-theme="dark"] .waitlist .btn { background: var(--ink); color: var(--canvas); }
:root[data-theme="dark"] .plan--pro { border-color: var(--rule); }

/* the theme toggle: the far top right of the header */
.theme-toggle {
  flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-left: -1.5rem;
  padding: 0; border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
/* switching themes fades the colours across instead of snapping */
:root.theme-fading, :root.theme-fading *, :root.theme-fading *::before {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, filter 0.35s ease !important;
}

/* ---------- pricing ----------
   Free with your own key, then three credit plans (Plus, Pro, Max), the way ArtCraft and Hermes Agent's Nous Portal
   price: the software is free, plans are monthly credit bundles shown as roughly how many components they buy,
   with a yearly discount, top-ups that never expire, and a line for studios. Free and the other plans are quiet
   paper cards. Pro is drawn like one of Alien's own components: a dark node with the plugin's green accent stripe,
   green ticks and a solid green button, lifted a little off the page, so it reads as the obvious pick. */
.block.pricing, .pricing { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3.5vw, 2.6rem); }
.pricing__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }
.pricing__head > div:first-child { display: grid; gap: 0.9rem; flex: 1 1 26rem; min-width: 0; }
.pricing__head h2 { max-width: 40rem; }
.pricing__head .lede { max-width: 38rem; }

.billing { flex: none; display: inline-flex; padding: 0.25rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); }
.billing__opt {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55em 1.05em; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font: 500 0.8125rem/1 var(--body); cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.billing__opt span { color: var(--accent); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.billing__opt.is-on { background: var(--btn); color: var(--on-btn); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; align-items: stretch; padding-top: 0.6rem; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan {
  display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.3rem, 2vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--rule); border-radius: calc(var(--radius) * 1.6);
}
.plan__top { display: grid; gap: 0.4rem; }
.plan h3 { display: flex; align-items: center; gap: 0.6rem; font: 400 1.4rem/1.1 var(--display); letter-spacing: -0.01em; }
.plan__for { color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; min-height: 2.8em; }
.plan__price { display: flex; align-items: baseline; gap: 0.4rem; font: 400 clamp(2.3rem, 3vw, 2.8rem)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan__per { color: var(--ink-2); font: 400 0.875rem/1 var(--body); letter-spacing: 0; white-space: nowrap; }
.plan__price .plan__amount { font: inherit; color: inherit; letter-spacing: inherit; transition: opacity 0.2s ease; }
.plan__amount.is-swapping { opacity: 0; }
.plan__credits { display: block; padding: 0.75rem 0.85rem; border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 0.875rem; }
.plan__credits strong { font-weight: 500; }
.plan__credits span { display: block; margin-top: 0.3rem; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }
.plan ul.plan__list { display: grid; gap: 0.65rem; padding-top: 0; border-top: 0; font-size: 0.875rem; color: var(--ink-2); }
.plan__list li { position: relative; padding-left: 1.5rem; line-height: 1.4; }
.plan__list li::before {   /* a tick, drawn as the corner of a rotated box */
  content: ""; position: absolute; left: 0.2rem; top: 0.2em; width: 0.4rem; height: 0.75rem;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.plan__cta { align-self: stretch; margin-top: auto; padding-block: 0.9em; }

.plan--pro {
  position: relative; overflow: hidden;
  background: var(--node); color: var(--node-text);
  border: 1px solid var(--node-edge);
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 200, 83, 0.18), 0 30px 70px -40px rgba(0, 200, 83, 0.55);
  transform: translateY(-0.6rem);
}
.plan--pro::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.plan--pro h3, .plan--pro .plan__price { color: #fff; }
.plan--pro .plan__for, .plan--pro .plan__per, .plan--pro .plan__credits span { color: var(--node-dim); }
.plan--pro .plan__credits { background: rgba(0, 200, 83, 0.1); color: var(--node-text); }
.plan--pro .plan__credits strong { color: var(--accent); }
.plan--pro ul.plan__list { color: var(--node-text); }
.plan--pro .plan__list li::before { border-color: var(--accent); }
.plan__pick {
  padding: 0.3em 0.6em; border-radius: 999px; background: var(--accent); color: #000;
  font: 500 0.625rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.plan__cta--pro { background: var(--accent); color: #000; font-weight: 500; }
.plan__cta--pro:hover { box-shadow: 0 10px 26px -10px rgba(0, 200, 83, 0.75); }
@media (max-width: 1100px) { .plan--pro { transform: none; } }
@media (max-width: 620px) { .plan--pro { order: -1; } }   /* on a phone, Pro comes first */
@media (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
  .plan--pro { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
  .plan--pro:hover { transform: translateY(-0.9rem); box-shadow: 0 34px 70px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 200, 83, 0.3), 0 34px 80px -36px rgba(0, 200, 83, 0.7); }
}

.plans__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 760px) { .plans__more { grid-template-columns: minmax(0, 1fr); } }
.plans__more p { padding: 1rem 1.2rem; border: 1px dashed var(--rule); border-radius: calc(var(--radius) * 1.6); color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.plans__more strong { color: var(--ink); font-weight: 500; }
.plans__fine { display: flex; gap: 0.6rem; align-items: baseline; max-width: 60rem; color: var(--ink-2); font: 400 0.8125rem/1.5 var(--body); }
.plans__fine .dot { flex: none; width: 0.5rem; height: 0.5rem; transform: translateY(-0.05em); }


/* each plan's two allowances: what it runs on (credits or your own key) and where your work is kept */
.plan__meters { display: grid; border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 0.875rem; }
.plan__meters p { padding: 0.7rem 0.85rem; }
.plan__meters p + p { border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.plan__meters strong { display: block; font-weight: 500; }
.plan__meters span { display: block; margin-top: 0.25rem; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }
.plan--pro .plan__meters { background: rgba(0, 200, 83, 0.1); color: var(--node-text); }
.plan--pro .plan__meters p + p { border-top-color: rgba(0, 200, 83, 0.18); }
.plan--pro .plan__meters strong { color: #fff; }
.plan--pro .plan__meters span { color: var(--node-dim); }
.plans__more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .plans__more { grid-template-columns: minmax(0, 1fr); } }

/* The Pro card always inverts the page: a dark card on the light page, a light card on the dark page.
   The green stripe, badge, ticks and button stay the same green in both. */
:root[data-theme="dark"] .plan--pro {
  background: #ecebe6; color: #1c1c1a; border-color: transparent;
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 200, 83, 0.25), 0 30px 70px -40px rgba(0, 200, 83, 0.45);
}
:root[data-theme="dark"] .plan--pro h3, :root[data-theme="dark"] .plan--pro .plan__price,
:root[data-theme="dark"] .plan--pro .plan__meters strong { color: #111110; }
:root[data-theme="dark"] .plan--pro .plan__for, :root[data-theme="dark"] .plan--pro .plan__per,
:root[data-theme="dark"] .plan--pro .plan__meters span { color: #5f5d56; }
:root[data-theme="dark"] .plan--pro ul.plan__list { color: #2a2a27; }
:root[data-theme="dark"] .plan--pro .plan__list li::before { border-color: #00a846; }
:root[data-theme="dark"] .plan--pro .plan__meters { background: rgba(0, 200, 83, 0.12); color: #1c1c1a; }
:root[data-theme="dark"] .plan--pro .plan__meters p + p { border-top-color: rgba(0, 120, 50, 0.18); }
:root[data-theme="dark"] .plan__cta--pro { background: var(--accent); color: #000; }
/* the animated logos switch colour the instant the theme changes: no fade, no hang-over */
:root.theme-fading .alien-mark, :root.theme-fading .alien-mark * { transition: none !important; }