/* Grows with you (scenes/grow.html, scenes/grow.js). An org chart that rebuilds itself: Just you, Your
   first hire, A company, Someone leaves. Everything here is scoped under .sc-grow. The section reuses
   the page's .band.rule, .center, .wrap, .s4, .h2-xl, .hl, .lede, .center-lede and .mono-muted.

   Without JS (no .is-live) the chart shows stage 3 from the --wx/--wy (wide) and --nx/--ny (narrow)
   seats in the markup, its lines come from the two static SVGs, and the four captions sit in a row.
   With JS, grow.js places every node with a transform and draws the lines itself.

   Numbers grow.js relies on: wide rows at 0 / 112 (Cloudy) / 196 / 350 px and a 436 px chart; every
   node is 86 px tall (a 42 px icon box, 8 px gap, 36 px of words); narrow rows are 46 px, 11 of them. */

.sc-grow { position: relative; }
.sc-grow .gw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Each line of the heading wraps evenly on phones (no lone "own."). */
.sc-grow .h2-xl { text-wrap: balance; }
.sc-grow .gw { display: flex; flex-direction: column; gap: 18px; width: 1080px; max-width: 100%; margin-top: 18px; text-align: left; }

/* ---- The stage buttons: a row of four, each with a thin progress line on top (it fills while the
   stage plays by itself; once the visitor picks one, the picked one is simply ink). ---- */
.sc-grow .gw-tabs { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sc-grow.is-live .gw-tabs { display: grid; }
.sc-grow .gw-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 17px 4px 8px 0;
  border: 0;
  background: none;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.2s ease;
}
.sc-grow .gw-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; border-radius: 3px; background: var(--ring); }
.sc-grow .gw-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.sc-grow.is-manual .gw-tab[aria-selected="true"] .gw-bar i { transform: none; }
.sc-grow .gw-tnum { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; }
.sc-grow .gw-tname { font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.015em; }
.sc-grow .gw-tab[aria-selected="true"] { color: var(--ink); }
@media (hover: hover) {
  .sc-grow .gw-tab:hover { color: var(--ink); }
}
.sc-grow .gw-tab:focus { outline: none; }
.sc-grow .gw-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* ---- The card ---- */
.sc-grow .gw-card { position: relative; padding: 22px 40px 30px; border-radius: 28px; background: #fff; box-shadow: var(--card-shadow); }
.sc-grow .gw-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.sc-grow .gw-count { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); font-variant-numeric: tabular-nums; }
.sc-grow .gw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; line-height: 18px; color: var(--graphite); }
.sc-grow .gw-key { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sc-grow .gw-key-tile { display: block; width: 16px; height: 16px; border-radius: 5px; background: #ececea; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.1); }
.sc-grow .gw-key-av { display: block; width: 30px; height: 18px; object-fit: contain; }

/* ---- The chart ---- */
.sc-grow .gw-chart { position: relative; height: 436px; margin: 40px 0 30px; }
.sc-grow .gw-lines, .sc-grow .gw-static { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sc-grow .gw-lines path, .sc-grow .gw-static path { fill: none; stroke: #c4c4bf; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-grow .gw-static path { vector-effect: non-scaling-stroke; }
.sc-grow .gw-static-narrow { display: none; }
.sc-grow.is-live .gw-static { display: none; }
/* A dashed line: an agent held by the company for a moment, between two people. */
.sc-grow .gw-lines path.is-dash { stroke: #8e8e8a; stroke-dasharray: 2 5; }
/* A new line is drawn in ink, then settles to grey. */
.sc-grow .gw-lines path.is-fresh { animation: gw-fresh 2s ease forwards; }
@keyframes gw-fresh { 0%, 45% { stroke: #0a0a0a; } 100% { stroke: #c4c4bf; } }

/* A node: icon over words (wide), or icon left and words right (Cloudy wide, everyone narrow). */
.sc-grow .gw-n {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transform: translateX(-50%);
  transform-origin: 50% 21px;
}
.sc-grow .gw-n[data-id="cloudy"] { flex-direction: row; gap: 10px; transform: none; transform-origin: 22px 50%; }
.sc-grow:not(.is-live) .gw-n { left: var(--wx); top: var(--wy); }
.sc-grow.is-live .gw-n { will-change: transform, opacity; }
.sc-grow:not(.is-live) .gw-n.is-out { display: none; }

.sc-grow .gw-ico { position: relative; display: block; flex-shrink: 0; }
/* A person: a photo in a rounded square, the two letters underneath in case it has not arrived. */
.sc-grow .gw-tile {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 11px;
  background: #ececea;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.1), 0 8px 18px -12px rgba(0, 0, 0, 0.4);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--graphite);
}
.sc-grow .gw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* With JS a photo waits until it has loaded (grow.js), so a missing one never shows a broken image. */
.sc-grow.is-live .gw-tile img { opacity: 0; transition: opacity 0.3s ease; }
.sc-grow.is-live .gw-tile img.is-in { opacity: 1; }
/* The founder: no photo, a YOU tile. */
.sc-grow .gw-tile.gw-you { background: #fff; box-shadow: 0 0 0 1px var(--ring), 0 8px 18px -12px rgba(0, 0, 0, 0.4); color: var(--ink); }
/* An AI agent: its avatar still (the cloud with eyes and a smile), in a box as tall as a person's tile so
   the words line up across a row. */
.sc-grow .gw-av { display: grid; place-items: center; width: 60px; height: 42px; }
.sc-grow .gw-av img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }

.sc-grow .gw-lab { display: flex; flex-direction: column; align-items: center; }
.sc-grow .gw-n[data-id="cloudy"] .gw-lab { align-items: flex-start; }
.sc-grow .gw-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; line-height: 19px; letter-spacing: -0.01em; color: var(--ink); }
.sc-grow .gw-role { font-size: 13px; line-height: 17px; color: var(--muted); }
.sc-grow .gw-tag { display: inline-block; padding: 1px 5px; border-radius: 5px; background: var(--ink); color: #fff; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 9.5px; line-height: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-grow .gw-tag[hidden] { display: none; }
.sc-grow.is-live .gw-tag { animation: gw-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes gw-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sarah on her way out: a faded photo in a dashed outline. */
.sc-grow .gw-n.is-ghost .gw-tile { background: #fff; box-shadow: none; outline: 1.5px dashed #9a9a96; outline-offset: 2px; }
.sc-grow .gw-n.is-ghost .gw-tile img.is-in { filter: grayscale(1); opacity: 0.6; }
.sc-grow .gw-n.is-ghost .gw-name { color: var(--graphite); }

/* ---- The captions: all four in a row without JS; with JS, the picked one, in one cell (no jump). ---- */
.sc-grow .gw-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; padding-top: 22px; border-top: 1px solid var(--hair); }
.sc-grow .gw-cap { min-width: 0; font-size: 15px; line-height: 22px; color: var(--graphite); }
.sc-grow .gw-cap-n { display: block; margin-bottom: 6px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--muted); }
.sc-grow .gw-cap-t { font-weight: 600; color: var(--ink); }
.sc-grow.is-live .gw-caps { grid-template-columns: minmax(0, 1fr); }
.sc-grow.is-live .gw-cap {
  grid-area: 1 / 1;
  justify-self: center;
  max-width: 700px;
  font-size: 19px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.sc-grow.is-live .gw-cap.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s, visibility 0s; }
.sc-grow.is-live .gw-cap-n, .sc-grow.is-live .gw-cap-t { display: none; }

/* ---- Tablets: the same chart, a little tighter. ---- */
@media (max-width: 1179.98px) {
  .sc-grow .gw-card { padding: 20px 28px 26px; }
  .sc-grow .gw-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Below 760 px: an indented tree, one row per node (grow.js switches at the same width). ---- */
@media (max-width: 759.98px) {
  .sc-grow .gw { gap: 14px; margin-top: 8px; }
  .sc-grow .gw-tabs { gap: 10px; }
  .sc-grow .gw-tab { gap: 3px; padding: 14px 0 4px; }
  .sc-grow .gw-tnum { font-size: 11px; line-height: 14px; }
  .sc-grow .gw-tname { font-size: 14px; line-height: 18px; letter-spacing: -0.01em; text-wrap: balance; }
  .sc-grow .gw-card { padding: 16px 16px 20px; border-radius: 22px; }
  .sc-grow .gw-head { padding-bottom: 14px; }
  .sc-grow .gw-legend { gap: 6px 14px; font-size: 12px; }

  .sc-grow .gw-chart { width: 100%; max-width: 280px; height: 506px; margin: 22px auto 20px; }
  .sc-grow .gw-static-wide { display: none; }
  .sc-grow .gw-static-narrow { display: block; }
  .sc-grow .gw-n,
  .sc-grow .gw-n[data-id="cloudy"] { height: 46px; flex-direction: row; gap: 10px; transform: none; transform-origin: 18px 50%; }
  .sc-grow:not(.is-live) .gw-n { left: var(--nx); top: var(--ny); }
  .sc-grow .gw-lab, .sc-grow .gw-n[data-id="cloudy"] .gw-lab { align-items: flex-start; }
  .sc-grow .gw-tile { width: 36px; height: 36px; border-radius: 10px; font-size: 11px; }
  .sc-grow .gw-av { width: 50px; height: 36px; }
  .sc-grow .gw-name { font-size: 14px; line-height: 17px; }
  .sc-grow .gw-role { font-size: 12px; line-height: 15px; }

  .sc-grow .gw-caps { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 18px; }
  .sc-grow.is-live .gw-cap { font-size: 17px; line-height: 25px; }
}
@media (max-width: 380px) {
  .sc-grow .gw-tabs { gap: 8px; }
  .sc-grow .gw-tname { font-size: 13px; line-height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-grow .gw-tab, .sc-grow.is-live .gw-cap, .sc-grow.is-live .gw-cap.is-on { transition: none; transform: none; }
  .sc-grow.is-live .gw-tag, .sc-grow .gw-lines path.is-fresh { animation: none; }
}