/* The Growth media column (homepage, feature section 2, media on the left). Calvin, 3 Nov: "for the growth section,
   let's drop the github screenshots. instead -- top left box about connecting channels (similar to image 1, use real
   logos), top right about live data/dash/reporting, bottom full width = workflow example (similar to image 2, but
   horizontal layout)". Image 1 is Graphed's "Connect your channels" card; image 2 is Default's If / Else workflow.
   Calvin, 4 Nov: card 01 static (no sync step, no status bar, no subhead), card 02 "Agents work with real data" (no
   subhead, no report row), card 03 "Automate repetitive tasks", its flow performance creative ("trigger = daily review.
   if/else: CTR above 2.5%. fit = create variants (figma logo). else = kill ad (meta logo)"). One clock moves cards 02
   and 03: the budget rebalances -> the daily review fires, the CTR check passes, the variants are made (lime, the one
   thing to see) and the booked-calls line ticks. Card 01 never moves. Default's visual language: hairlines, mono
   labels, one restrained glow on the running node.
   Two cards over one wide one, like the Creative column beside it. Under 600 px of column width the two top cards stack
   and the workflow stands up (Default's own top-down layout, the fork side by side).
   Scoped to .gm. Colours: tokens.css (Signal), with fallbacks. Type: type.css (Geist; no Pixel here). Logos: real
   files, byte copies in growth/logos/ (README). growth.js runs it; without it, and with reduced motion, the markup as
   written is the finished state. */

.gm {
  --gm-card: #0A0A0A;                       /* a card: one step up from the page's pure black */
  --gm-rim: #242424;
  --gm-rule: var(--hairline, #1D1D1D);
  --gm-node: #121212;
  --gm-node-rim: #262626;
  --gm-band: #181818;                       /* a node's header band (Default's inset) */
  --gm-tile: #222;
  --gm-wire: #2C2C2C;
  --gm-wire-on: #767676;
  --gm-ink: var(--paper, #F7F7F5);
  --gm-ink-2: var(--silver, #D2D4D6);
  --gm-ink-3: var(--gravel, #8C8C8C);
  --gm-run: var(--blue, #4493F8);           /* status: running (the code's blue) */
  --gm-live: var(--green, #1ED68A);         /* Trash Green, lit (never #00A651 on black): live, connected, the trigger, the branch taken */
  --gm-on-live: var(--on-green, #000);
  --gm-pay: var(--lime, #D4F073);           /* hi-vis lime, once: the variants landing */
  --gm-on-pay: var(--on-lime, #000);
  --gm-sans: var(--font-body, "Geist", "Helvetica Neue", Arial, system-ui, sans-serif);
  --gm-mono: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  --gm-flip: 360ms;
  --gm-ease: cubic-bezier(.25, .8, .25, 1);
  --gm-travel: cubic-bezier(.45, 0, .1, 1);
  container-type: inline-size;
  display: block; min-width: 0;
  color: var(--gm-ink); font-family: var(--gm-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.gm *, .gm *::before, .gm *::after { box-sizing: border-box; }
.gm__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gm .i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm .gm-logo { display: block; position: static; flex: none; width: 22px; height: 22px; max-width: none; object-fit: contain; }   /* (outranks any page rule on media imgs) */
.gm .gm-logo--mono { filter: invert(1); }  /* for a black glyph (TikTok's, say): shown white on the dark tile, the file untouched */
.gm__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* ---- a card: number, title, then the product ---- */
.gm-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px; border-radius: var(--r-card, 14px);
           background: var(--gm-card); box-shadow: inset 0 0 0 1px var(--gm-rim); overflow: hidden; }
.gm-num { display: block; color: var(--gm-ink-3); font: 400 10px/1 var(--gm-mono); letter-spacing: .1em; }
.gm-title { display: block; margin-top: 10px; font: 500 15px/1.25 var(--gm-sans); letter-spacing: -.01em; }
.gm-label { color: var(--gm-ink-3); font: 400 9.5px/1 var(--gm-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gm-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--gm-live); box-shadow: 0 0 6px color-mix(in srgb, var(--gm-live) 50%, transparent); }
.gm-dot--run { background: var(--gm-run); box-shadow: none; }
.gm-spin { animation: gm-spin .8s linear infinite; }
@keyframes gm-spin { to { transform: rotate(360deg); } }

/* every state's label shares one cell, so nothing changes size; on a beat the outgoing one clears where it is (140 ms)
   and the incoming one rises 4 px into place 110 ms later, so two words are never drawn over each other */
.gm-st > *, .gm-run > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity 140ms ease, transform 0s linear 140ms; }
.gm-wf[data-run="idle"] .gm-run > .is-idle, .gm-wf[data-run="go"] .gm-run > .is-go, .gm-wf[data-run="done"] .gm-run > .is-d,
.gm-node[data-s="q"] .gm-st > .is-q, .gm-node[data-s="l"] .gm-st > .is-l, .gm-node[data-s="r"] .gm-st > .is-r, .gm-node[data-s="d"] .gm-st > .is-d {
  opacity: 1; transform: none; transition: opacity 250ms var(--gm-ease) 110ms, transform 250ms var(--gm-ease) 110ms; }

/* ---- 01 · channels, static: a grid of real logos, each with its connected badge; a dashed slot for the next one ---- */
.gm-tiles { list-style: none; flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(74px, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; }   /* the rows grow to the card's height, so the two top cards end level */
.gm-tiles:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* more channels (Shopify, GA4, HubSpot, Slack ...): four across */
.gm-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 8px 6px;
           border-radius: 10px; background: var(--gm-node); box-shadow: inset 0 0 0 1px var(--gm-node-rim); text-align: center; }
.gm-tile b { display: block; max-width: 100%; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 11.5px/1.2 var(--gm-sans); }
.gm-tile small { display: block; max-width: 100%; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gm-ink-3);
                 font: 400 9px/1.2 var(--gm-mono); letter-spacing: .03em; }
.gm-tile--add { background: none; box-shadow: none; border: 1px dashed #333; color: var(--gm-ink-3); }
.gm-tile--add .i { width: 14px; height: 14px; }
.gm .gm-logo--word { width: 46px; height: 44px; }   /* a full logo where the brand has no icon on its own (HubSpot: never crop the sprocket): it takes the icon's and the name's room */
.gm-tile .gm-logo--word + small { margin-top: 3px; }
.gm-tile--add b { margin-top: 6px; white-space: normal; text-overflow: clip; color: var(--gm-ink-3); font-weight: 400; line-height: 1.25; }
.gm-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
             background: var(--gm-live); color: var(--gm-on-live); }
.gm-badge .i { width: 9px; height: 9px; stroke-width: 3; }

/* ---- 02 · live data: the booked-calls line (a live conveyor: a new point arrives from the right, the oldest leaves to
   the left; the scale fits the window, so there's no axis and no number) and budget by channel ---- */
.gm-panel { flex: 1 0 auto; margin-top: 14px; padding: 10px 12px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #1F1F1F; }
.gm-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 14px; }
.gm-live { display: inline-flex; align-items: center; gap: 5px; color: var(--gm-ink-2); font: 400 9px/1 var(--gm-mono); letter-spacing: .06em; text-transform: uppercase; }
.gm-live .gm-dot { width: 5px; height: 5px; box-shadow: none; }
.gm-chart { display: block; width: 100%; height: 58px; margin-top: 8px; overflow: hidden; }
.gm-chart__grid { stroke: #1C1C1C; stroke-width: 1; shape-rendering: crispEdges; }
.gm-chart__area { fill: url(#gm-chart-fade); }
.gm-chart__line { fill: none; stroke: var(--gm-ink-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gm-chart__dot { fill: var(--gm-live); }
.gm-rows { display: grid; gap: 7px; margin-top: 10px; }
.gm-rows .gm-label { margin-bottom: 1px; }
.gm-row { display: grid; grid-template-columns: 12px 4.6em minmax(0, 1fr); align-items: center; column-gap: 8px; color: var(--gm-ink-2); font: 400 11px/1.2 var(--gm-sans); }
.gm-row .gm-logo { width: 12px; height: 12px; }
.gm-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gm-track { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: #1C1C1C; }
.gm-track b { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--w, .5) * 100%); border-radius: 2px; background: #8C8C8C; transition: width 700ms var(--gm-travel); }

/* ---- 03 · the workflow: Default's If / Else laid flat. The trigger and the If / Else sit on the centre line; the fork
   curves up to Create variants (the CTR is above 2.5%) and down to Kill ad (else). ---- */
.gm-wf { grid-column: 1 / -1; padding: 16px 18px 18px; }
.gm-wfh { display: flex; align-items: center; gap: 10px; height: 18px; }
.gm-wfh .gm-title { margin: 0; }
.gm-run { margin-left: auto; display: grid; justify-items: end; color: var(--gm-ink-2); font: 400 10px/1 var(--gm-mono); letter-spacing: .06em; text-transform: uppercase; }
.gm-run > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gm-run > .is-idle { color: var(--gm-ink-3); }
.gm-run .i { width: 12px; height: 12px; }
.gm-canvas { position: relative; display: grid; margin-top: 16px;
             grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 64px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px; }
.gm-node[data-n="1"] { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.gm-link            { grid-column: 2; grid-row: 1 / span 2; }
.gm-node[data-n="2"] { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.gm-fork            { grid-column: 4; grid-row: 1 / span 2; }
.gm-node[data-n="3"] { grid-column: 5; grid-row: 1; }
.gm-node[data-n="4"] { grid-column: 5; grid-row: 2; }

/* a node: Default's header band (icon tile, title), one line of what it does, its chip */
.gm-node { position: relative; min-width: 0; padding: 5px 5px 9px; border-radius: 10px; background: var(--gm-node); box-shadow: inset 0 0 0 1px var(--gm-node-rim);
           transition: opacity var(--gm-flip) var(--gm-ease), background-color var(--gm-flip) var(--gm-ease), box-shadow var(--gm-flip) var(--gm-ease); }
.gm-trig { display: flex; align-items: center; justify-content: center; gap: 5px; height: 20px; margin-bottom: 4px; border-radius: 7px 7px 0 0;
           color: var(--gm-live); font: 400 9px/1 var(--gm-mono); letter-spacing: .06em; text-transform: uppercase; }
.gm-trig .i { width: 10px; height: 10px; }
.gm-nh { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 7px 0 5px; border-radius: 7px; background: var(--gm-band); }
.gm-ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--gm-tile); color: var(--gm-ink-2);
          transition: background-color var(--gm-flip) var(--gm-ease), color var(--gm-flip) var(--gm-ease); }
.gm-ico .i { width: 13px; height: 13px; }
.gm-ico .gm-logo { width: 14px; height: 14px; }
.gm-ico .gm-logo--clear { width: 18px; height: 22px; }   /* a file that carries its own clear space (Figma's: the mark is ~62% of its 1024 x 1280 frame), shown whole at the tile's size so its mark matches the others by eye; never cropped */
.gm-nt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12.5px/1.2 var(--gm-sans); letter-spacing: -.005em; }
.gm-nd { display: block; padding: 7px 6px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gm-ink-3); font: 400 11px/1.35 var(--gm-sans); }
.gm-st { display: grid; justify-items: start; padding: 8px 6px 0; }
.gm-chip { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 6px; white-space: nowrap;
           font: 400 9px/1 var(--gm-mono); letter-spacing: .06em; text-transform: uppercase; }
.gm-chip .i { width: 10px; height: 10px; stroke-width: 2.5; }
.gm-chip--cfg { color: var(--gm-ink-3); box-shadow: inset 0 0 0 1px #2E2E2E; }
.gm-chip--wait { color: var(--gm-ink-3); box-shadow: inset 0 0 0 1px #2E2E2E; }
.gm-chip--wait .gm-dot { width: 5px; height: 5px; box-shadow: none; }
.gm-chip--run { color: var(--gm-run); background: color-mix(in srgb, var(--gm-run) 13%, transparent); }
.gm-chip--ok { color: var(--gm-ink-2); background: #1E1E1E; }
.gm-chip--pay { color: var(--gm-on-pay); background: var(--gm-pay); }

/* node states: q queued (dim; the branch not taken stays here) · l listening (the trigger) · r running · d done */
.gm-node[data-s="q"] { opacity: .42; }
.gm-node[data-s="r"] { background: #151515;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gm-run) 52%, var(--gm-node-rim)), 0 0 18px -4px color-mix(in srgb, var(--gm-run) 30%, transparent); }
.gm-node[data-s="r"] .gm-ico { color: var(--gm-ink); background: color-mix(in srgb, var(--gm-run) 18%, var(--gm-tile)); }

/* the straight link, trigger to If / Else: a hairline on the centre line, a port where it leaves, an arrowhead where
   it arrives; lit, the path draws along it */
.gm-link { position: relative; min-width: 0; }
.gm-link::before, .gm-link > i { content: ""; position: absolute; top: calc(50% - .5px); left: 0; right: 0; height: 1px; }
.gm-link::before { background: var(--gm-wire); }
.gm-link > i { background: var(--gm-wire-on); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: opacity 240ms ease, transform 0s linear 240ms; }
.gm-link[data-on] > i { transform: none; opacity: 1; transition: opacity 120ms ease, transform 440ms var(--gm-travel); }
.gm-link::after, .gm-fork::before { content: ""; position: absolute; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: var(--gm-card);
                                    box-shadow: inset 0 0 0 1px #3A3A3A; transition: box-shadow var(--gm-flip) var(--gm-ease); }
.gm-link::after { top: calc(50% - 3.5px); left: -3.5px; }
.gm-link[data-on]::after, .gm-fork[data-on]::before { box-shadow: inset 0 0 0 1px var(--gm-wire-on), inset 0 0 0 2px var(--gm-card), inset 0 0 0 7px var(--gm-wire-on); }
.gm-arrow { position: absolute; z-index: 1; width: 10px; height: 10px; stroke-width: 2.5 !important; color: #4A4A4A; transition: color var(--gm-flip) var(--gm-ease); }
.gm-link > .gm-arrow { top: calc(50% - 5px); right: -3px; }
.gm-link[data-on] > .gm-arrow, .gm-fork[data-on] > .gm-arrow--a { color: var(--gm-wire-on); }

/* the fork: two curves from the If / Else's port (growth.js draws them to the nodes' real ports; these numbers are the
   no-script fallback), a tag on each, an arrowhead at each end; on the run, the "above" branch draws */
.gm-fork { position: relative; min-width: 0; --y0: 50%; --ya: 25%; --yb: 75%; --tya: 37.5%; --tyb: 62.5%; }
.gm-fork::before { top: calc(var(--y0) - 3.5px); left: -3.5px; }
.gm-fork__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gm-fork__svg path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.gm-fork__base { stroke: var(--gm-wire); }
.gm-fork__lit { stroke: var(--gm-wire-on); stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: opacity 240ms ease, stroke-dashoffset 0s linear 240ms; }
.gm-fork[data-on] .gm-fork__lit { stroke-dashoffset: 0; opacity: 1; transition: opacity 120ms ease, stroke-dashoffset 520ms var(--gm-travel); }
.gm-fork .gm-fork__v { display: none; }
.gm-fork > .gm-arrow--a { top: calc(var(--ya) - 5px); right: -3px; }
.gm-fork > .gm-arrow--b { top: calc(var(--yb) - 5px); right: -3px; }
.gm-tag { position: absolute; z-index: 2; left: 50%; display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px; transform: translate(-50%, -50%);
          background: var(--gm-card); color: var(--gm-ink-3); box-shadow: inset 0 0 0 1px #333; font: 400 9px/1 var(--gm-mono); letter-spacing: .04em; white-space: nowrap; }
.gm-tag--a { top: var(--tya); color: var(--gm-live); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gm-live) 45%, #333); }
.gm-tag--b { top: var(--tyb); }

/* ---- compact: under 600 px of column width (windows narrower than ~1340 px, tablets under ~680, phones) the top cards
   stack, and the workflow stands up the way Default draws it: trigger, If / Else, then the fork side by side ---- */
@container (max-width: 599px) {
  .gm__in { grid-template-columns: minmax(0, 1fr); }
  .gm-card { padding: 16px; }
  .gm-tiles { grid-auto-rows: minmax(66px, auto); margin-top: 12px; }
  .gm-panel { margin-top: 12px; }
  .gm-wf { padding: 14px 16px 16px; }
  .gm-canvas { margin-top: 14px; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); grid-template-rows: auto 22px auto 50px auto; row-gap: 0; }
  .gm-node[data-n="1"] { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 236px); }
  .gm-link            { grid-column: 1 / -1; grid-row: 2; }
  .gm-node[data-n="2"] { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(100%, 236px); }
  .gm-fork            { grid-column: 1 / -1; grid-row: 4; --x0: 50%; --xa: 24%; --xb: 76%; --txa: 37%; --txb: 63%; }
  .gm-node[data-n="3"] { grid-column: 1; grid-row: 5; }
  .gm-node[data-n="4"] { grid-column: 3; grid-row: 5; }
  .gm-nd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }   /* the branch nodes are narrow here: their line may take two */
  .gm-link::before, .gm-link > i { top: 0; bottom: 0; left: calc(50% - .5px); right: auto; width: 1px; height: auto; }
  .gm-link > i { transform: scaleY(0); transform-origin: center top; }
  .gm-link::after { top: -3.5px; left: calc(50% - 3.5px); }
  .gm-link > .gm-arrow { top: auto; right: auto; bottom: -3px; left: calc(50% - 5px); transform: rotate(90deg); }
  .gm-fork::before { top: -3.5px; left: calc(var(--x0) - 3.5px); }
  .gm-fork .gm-fork__h { display: none; }
  .gm-fork .gm-fork__v { display: inline; }
  .gm-fork > .gm-arrow--a, .gm-fork > .gm-arrow--b { top: auto; right: auto; bottom: -3px; transform: rotate(90deg); }
  .gm-fork > .gm-arrow--a { left: calc(var(--xa) - 5px); }
  .gm-fork > .gm-arrow--b { left: calc(var(--xb) - 5px); }
  .gm-tag { top: 50%; }
  .gm-tag--a { left: var(--txa); }
  .gm-tag--b { left: var(--txb); }
}

/* the narrowest phones (a 320 px screen) */
@container (max-width: 330px) {
  .gm-nt { font-size: 11.5px; white-space: normal; line-height: 1.15; }   /* a title may take two lines here (Create variants) */
  .gm-nh { gap: 6px; height: auto; min-height: 32px; padding: 5px 5px 5px 5px; }
  .gm-ico { width: 20px; height: 20px; }
}

/* paused off screen; reduced motion shows the finished state (growth.js leaves it there) with nothing moving */
.gm[data-paused] .gm-spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gm *, .gm *::before, .gm *::after { transition: none !important; animation: none !important; }
}