/* /growth — one opportunity, from arrival to a person (docs/public-site.md › Growth Systems).
   html.gx-on (growth/boot.js, before the first paint): one pinned scene tells the story — the statements share one
   place, the path and its signals are SVG, the dust a canvas, the labels are held to the path by growth.js.
   Otherwise (no JS, reduced motion, a short screen): the flow version — the same content in order, each step resolved,
   a still diagram of the path where it helps. Near-black, thin lines, one light: a silent machine in a quiet space. */

.gx { position: relative; --gx-ink: #F3F4F6; --gx-line: rgba(231, 234, 238, .42); }
.gx-anchor { display: block; height: 0; }
html:not(.gx-on) [data-stage-only] { display: none; }
html.gx-on [data-flow-only] { display: none; }

/* ── The stage ────────────────────────────────────────────────────────────────────────────────────────────── */
html.gx-on .gx { height: calc(var(--gx-total, 22) * (100svh - var(--header-h))); } /* refined by growth.js */
html.gx-on .gx-anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
html.gx-on .gx-view { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; background: var(--surface-base); }
.gx-dust, .gx-svg, .gx-labels { display: none; }
html.gx-on :is(.gx-dust, .gx-svg, .gx-labels) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html.gx-on .gx-svg { overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gx-svg > g > * { opacity: 0; }
.gx-main, .gx-born, .gx-conv { stroke: var(--gx-ink); stroke-width: 1.25; }
.gx-dotted { stroke: var(--gx-ink); stroke-width: 1.4; stroke-dasharray: .5 7; }
.gx-origin { stroke: var(--gx-line); stroke-width: 1; }
.gx-branch { stroke: var(--gx-ink); stroke-width: 1.1; }
.gx-row { stroke: var(--gx-ink); stroke-width: 1; }
.gx-rnode, .gx-ring { fill: var(--surface-base); stroke: var(--gx-ink); stroke-width: 1.15; }
.gx-dot { fill: var(--gx-ink); }
.gx-lock { fill: none; stroke: var(--gx-ink); stroke-width: 1; }
.gx-timer { fill: none; stroke: var(--gx-ink); stroke-width: 1.1; stroke-dasharray: 1 1; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.gx-end { fill: var(--surface-base); stroke: var(--gx-line); stroke-width: 1; }
.gx-ripple { fill: none; stroke: var(--gx-ink); stroke-width: .8; }
.gx-pulse, .gx-opulse, .gx-walker { fill: var(--gx-ink); }
.gx-ack { fill: var(--surface-base); stroke: var(--gx-ink); stroke-width: 1.3; }
.gx-reply { fill: #FFFFFF; }
.gx-rhalo, .gx-halo { fill: none; stroke: #FFFFFF; stroke-width: 1; }
.gx-lead { fill: #FFFFFF; }
.gx-tail { stroke: #FFFFFF; stroke-width: 2; }
.gx-hit { fill: transparent; stroke: none; cursor: pointer; opacity: 0; }

/* Labels held to the path (growth.js places them; they only ever name what is there). */
.gx-lab, .gx-ev { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.gx-lab { white-space: nowrap; font: 500 .75rem/1.3 var(--font-body); letter-spacing: .01em; color: var(--text-secondary); }
.gx-lab--node { color: var(--text-primary); }
.gx-lab--q { font-size: .875rem; color: var(--text-primary); }
.gx-lab--tag, .gx-lab--grammar { font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-meta); }
.gx-lab--grammar { color: var(--text-secondary); }
.gx-lab--origin, .gx-lab--quiet, .gx-lab--loop { color: var(--text-meta); }
.gx-lab--loop { font-size: .6875rem; }
.gx-lab--swap { display: grid; }
.gx-lab--swap > span { grid-area: 1 / 1; }
.gx-lab--reply { color: #FFFFFF; }
.gx-lab--sys { font-size: .8125rem; color: var(--text-primary); }
.gx-lab--sys b { margin-right: .5rem; font-weight: 500; color: var(--text-meta); font-variant-numeric: tabular-nums; }
/* A fragment from another tool: a hairline and two lines of type — no card, no icon, no brand. */
.gx-ev {
  display: grid; gap: .125rem; max-width: 15rem; padding-left: .75rem; transform-origin: 0 0;
  border-left: 1px solid rgba(255, 255, 255, .2); font-size: .8125rem; line-height: 1.35; color: var(--text-secondary);
  transition: color 300ms var(--ease-state), border-color 300ms var(--ease-state);
}
.gx-ev b { font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--text-meta); }
.gx-ev.is-orphan span { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.gx-ev.is-lit { color: var(--text-primary); border-left-color: rgba(255, 255, 255, .55); }

/* ── The words: one place, statements handed over by one sweep ─────────────────────────────────────────── */
.gx-copy { position: relative; }
html.gx-on .gx-copy { position: absolute; z-index: 2; }
html.gx-on.gx-wide .gx-copy { left: max(var(--gutter), calc((100% - var(--container)) / 2)); top: 12%; width: min(34rem, 38%); }
html.gx-on.gx-tall .gx-copy { left: var(--gutter); right: var(--gutter); top: clamp(1rem, 4svh, 2rem); }
html.gx-on .gx-say { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; }
html.gx-on .gx-say.is-shown { opacity: 1; }
/* The thread that writes a new statement: a hairline under it, a point at its tip. */
.gx-edge { display: none; }
html.gx-on .gx-edge { display: block; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--gx-ink); opacity: 0; pointer-events: none; }
html.gx-on .gx-edge::after { content: ""; position: absolute; right: -3px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; }

.gx-h { margin: 0; font: 600 clamp(1.75rem, 1.05rem + 2.3vw, 3.25rem)/1.08 var(--font-display); letter-spacing: -.03em; color: var(--text-primary); text-wrap: balance; }
.gx-h1 { font-size: clamp(2.25rem, 1.25rem + 3.2vw, 4.25rem); line-height: 1.02; }
html.gx-on .gx-h { font-size: min(clamp(1.75rem, 1.05rem + 2.3vw, 3.25rem), 7.4svh); }
html.gx-on .gx-h1 { font-size: min(clamp(2.1rem, 1.25rem + 3.2vw, 4.25rem), 9svh); }
html.gx-on.gx-tall .gx-h { font-size: min(clamp(1.625rem, 1rem + 3vw, 2.5rem), 6svh); }
html.gx-on.gx-tall .gx-h1 { font-size: min(clamp(1.9rem, 1.1rem + 4vw, 3rem), 7svh); }
.gx-h .soft { color: var(--text-meta); }
.gx-h--resolve { letter-spacing: -.035em; }
.gx-say--hero .crumb { margin: 0 0 1.25rem; }
.gx-p { margin: 0; max-width: 32rem; font-size: 1.0625rem; line-height: 1.55; color: var(--text-secondary); }
html.gx-on.gx-tall .gx-p { font-size: 1rem; }
.gx-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.gx-beat { display: flex; align-items: baseline; gap: .75rem; font-size: 1.1875rem; color: var(--text-primary); }
.gx-beat-n { flex: none; font-size: .75rem; color: var(--text-meta); font-variant-numeric: tabular-nums; }
html:not(.gx-on) .gx-nopath { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.gx-rules-title { margin: 0 0 .75rem; font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--text-meta); }
.gx-rules ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gx-rules li { position: relative; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.45; color: var(--text-secondary); }
.gx-rules li::before { content: ""; position: absolute; left: 0; top: .7em; width: .625rem; height: 1px; background: var(--text-meta); }

/* ── The six systems: in the flow, a list; on the stage, the one in focus (and a way to choose) ────────────── */
.gx-pick { display: flex; gap: .25rem; margin: 0 0 1rem; }
.gx-pick-b {
  position: relative; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .5rem; border: 0; background: transparent; cursor: pointer;
  font: 500 .8125rem/1 var(--font-body); color: var(--text-meta); font-variant-numeric: tabular-nums;
  transition: color var(--dur-feedback) var(--ease-state);
}
.gx-pick-b::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .5rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-enter); }
.gx-pick-b:is(:hover, :focus-visible) { color: var(--text-primary); }
.gx-pick-b[aria-pressed="true"] { color: var(--text-primary); }
.gx-pick-b[aria-pressed="true"]::after { transform: scaleX(1); }
.gx-pick-b:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; border-radius: 2px; }
.gx-systems { display: grid; gap: 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.gx-system h3 { margin: 0; display: flex; align-items: baseline; gap: .75rem; font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text-primary); }
.gx-system h3 span { font: 500 .75rem var(--font-body); color: var(--text-meta); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gx-system dl { display: grid; gap: .75rem; margin: .875rem 0 0; }
.gx-system dt { font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--text-meta); }
.gx-system dd { margin: .2rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--text-secondary); }
html.gx-on .gx-systems { margin: 0; gap: 0; }
html.gx-on .gx-system { grid-area: 1 / 1; opacity: 0; transition: opacity 260ms var(--ease-state); }
html.gx-on .gx-system.is-focus { opacity: 1; }
html.gx-on.gx-tall .gx-system dl { gap: .5rem; margin-top: .625rem; }
html.gx-on.gx-tall .gx-system dd { font-size: .875rem; }

/* The header over light text (the brief, the statements) must not let it read through. */
.site-header.is-scrolled { background: #050505; }

/* ── Orientation where the thread does not fit (below 1360 px): a hairline on the header's edge ──────────── */
.gx-progress { display: none; }
@media (max-width: 1359px) {
  html.gx-on .gx-progress { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: rgba(255, 255, 255, .06); }
  html.gx-on .gx-progress i { position: absolute; inset: 0; background: var(--gx-ink, #F3F4F6); opacity: .5; transform-origin: 0 50%; transform: scaleX(var(--gx-p, 0)); }
  html.gx-on .gx-progress b { position: absolute; top: -2px; width: 1px; height: 6px; background: rgba(255, 255, 255, .28); }
}

/* ── The brief: the one path that went on is its guide ─────────────────────────────────────────────────── */
.gx-brief { border-top: 0; }
.gx-form { position: relative; }
.gx-guide { position: absolute; left: -1.75rem; top: var(--guide-top, 0px); height: var(--guide-h, 12rem); width: 1px; background: linear-gradient(var(--gx-ink, #F3F4F6), var(--gx-ink, #F3F4F6)) 0 0 / 1px 100% no-repeat; opacity: .85; pointer-events: none; }
.gx-guide i { position: absolute; left: -3.5px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 5px rgba(255, 255, 255, .08); }
@media (max-width: 999px) { .gx-guide { left: -.875rem; } }
html:not(.gx-on) .gx-guide { display: none; }
.gx-note { margin: 1.5rem 0 0; max-width: 34rem; font-size: .875rem; line-height: 1.55; color: var(--text-meta); }

/* ── The flow version: the story in order, each step resolved ─────────────────────────────────────────── */
html:not(.gx-on) .gx-copy { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; padding-block: clamp(2rem, 6vw, 4rem) var(--space-block); display: grid; gap: 1rem; }
html:not(.gx-on) .gx-say[data-slot="head"] { margin-top: 2.25rem; }
html:not(.gx-on) .gx-say--hero { margin-top: 0 !important; }
html:not(.gx-on) .gx-say[data-say="arrival-sub"] { margin-bottom: 1rem; }
.gx-fig { position: relative; display: grid; gap: .625rem; margin: .5rem 0 .5rem; padding: 0; list-style: none; }
.gx-fig::before { content: ""; position: absolute; left: 4px; top: .6rem; bottom: .6rem; width: 1px; background: rgba(255, 255, 255, .16); }
.gx-fig-n { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: .875rem; color: var(--text-meta); }
.gx-fig-n i { flex: none; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: var(--surface-base); }
.gx-fig-n.is-lit { color: var(--text-primary); }
.gx-fig-n.is-lit i { background: currentColor; }
.gx-fig-n.is-human i { border-radius: 2px; }
.gx-fig-b { flex-basis: 100%; padding-left: 1.3rem; font-size: .75rem; color: var(--text-meta); }
.gx-fig-b--stopped { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.gx-events { display: grid; gap: .5rem; margin: .25rem 0; padding: 0; list-style: none; }
.gx-events li { padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .2); font-size: .9375rem; color: var(--text-secondary); }
.gx-events b { display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--text-meta); }
html:not(.gx-on) .gx-beat { font-size: 1.0625rem; }

@media (prefers-reduced-motion: reduce) {
  .gx-ev, .gx-pick-b, .gx-pick-b::after, html.gx-on .gx-system { transition-duration: 1ms; }
}

/* On a tall screen the scene lives under the words: anything drawn above that line fades out before it reaches them. */
html.gx-on.gx-tall :is(.gx-svg, .gx-labels, .gx-dust) {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--scene-top, 40%), #000 calc(var(--scene-top, 40%) + 36px));
  mask-image: linear-gradient(to bottom, transparent var(--scene-top, 40%), #000 calc(var(--scene-top, 40%) + 36px));
}