/* ==========================================================================
   Product pages — /track (Figma 937:11638) and /analyze (898:11701). Three net-new
   pieces: two heroes and one feature-section template used 3× per page; everything
   else on those pages is the home page's own markup and CSS.

   Frame: Figma draws the column at x=348…1572 on 1920 (1224). The site's standing
   frame is a 1360 container with a 40 gutter → 1280, which is what the home page's
   equivalent grid already uses, so the two pages line up with /. Full-bleed art keeps
   Figma's own coordinates against a centred 1920 stage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Feature section — 938:13253 · py-70 · gap-56 · 1px bottom line
   -------------------------------------------------------------------------- */
.cx-psec { background: var(--cx-page); border-bottom: 1px solid var(--cx-line); }
.cx-psec.last { border-bottom: 0; }                     /* 938:13291 is 683, not 684 */
.cx-psec__inner { display: flex; flex-direction: column; gap: 56px; padding: 70px 40px; }

.cx-psec__head { display: flex; flex-direction: column; gap: 16px; width: 841px; max-width: 100%; }
.cx-psec__head.narrow { width: 573px; }                 /* 938:13293 */
.cx-psec__eyebrow {                                     /* 938:13329 — Geist Mono 14/21, +1 tracking, 60% ink */
  margin: 0; font-family: var(--cx-mono); font-weight: 400; font-size: 14px; line-height: 21px;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(38, 38, 38, 0.6);
}
.cx-psec__title { margin: 0; }                          /* .cx-title 35/40/−0.77 + .muted */

.cx-psec__grid { display: flex; height: 370px; background: var(--cx-surface); }
.cx-psec__cell {                                        /* Figma strokes sit inside: border 1 + padding 31 = 32 */
  box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 31px 32px; border: 0 solid var(--cx-line); border-width: 1px 1px 1px 0;
}
.cx-psec__cell:first-child { border-left-width: 1px; padding-left: 31px; }
.cx-psec__icon { display: block; width: 16px; height: 16px; }
.cx-psec__stack { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cx-psec__stack > * { margin: 0; color: var(--cx-ink); }   /* 938:13259 — #262626 */

/* --------------------------------------------------------------------------
   2. Page heroes — dark, under the transparent sticky header (nav.js treats
      [data-cx="phero"] as a dark host, so the lockup and the CTA invert)
   -------------------------------------------------------------------------- */
/* Figma draws the nav ON the dark hero: 898:11702 / 937:11639 are 961 / 998 INCLUDING the 72 header strip.
   So the section slides up under the sticky header and pads its own content back down — which also makes
   nav.js see a dark host at the header's probe line, so the lockup and the CTA invert. */
.cx-phero {
  position: relative; overflow: hidden; box-sizing: border-box;
  background: var(--cx-dark); color: var(--cx-inverse);
  margin-top: -72px; padding-top: 72px;
}

/* ---- Analyze (898:11702 · 961 − 72 header = 889): a 324 headline band over a 565 stage */
.cx-phero--analyze { height: 961px; }   /* the Figma frame, nav strip included */
.cx-phero__head { height: 324px; display: flex; align-items: center; }
.cx-phero__headrow { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; padding: 0 40px; box-sizing: border-box; }
.cx-phero__title { flex: 0 0 582px; width: 582px; margin: 0; color: var(--cx-inverse); }   /* STIX 60 */
.cx-phero__sub   { flex: 0 0 447px; width: 447px; margin: 0; color: var(--cx-inverse); }   /* Inter 16/24 */
.cx-phero__stage { position: relative; height: 565px; overflow: hidden; }
.cx-phero__dash  { position: absolute; left: calc(50% - 960px + 283px); top: 0; width: 1380px; height: 565px; }
.cx-phero__dash-img { display: block; width: 1380px; height: 565px; max-width: none; }

/* ---- Track (937:11639 · 998 − 72 = 926): copy left, code card right, strip at the foot */
.cx-phero--track { height: 998px; }

/* ---- Scale: the same dark hero as Track, with the agent's own card in it ----
   Height matches Track's so the two product pages sit at the same rhythm; the
   card is the one thing that differs, because what Scale sells is the agent
   moving money rather than a snippet you paste. */
.cx-phero--scale { height: 998px; }
/* Scale leads on the claim, not on a picture (request 2026-09-20): no card, and
   the copy centres in the space above the logo strip rather than sitting left.
   The padding is the strip's footprint — 998 − 856 top offset − its own 82 —
   so "centred" reads against the visible space, not the box. */
.cx-phero--scale .cx-phero__row {
  align-items: center; justify-content: center;
  padding-bottom: 142px;   /* 998 − the strip's 856 top: centres against the strip, not the box */
}
.cx-phero--scale .cx-phero__copy {
  width: 100%; max-width: 760px; margin-top: 0;
  align-items: center; text-align: center;
}
.cx-phero--scale .cx-phero__lead { max-width: 620px; }
.cx-acard {
  width: 514px; margin-top: 176px; box-sizing: border-box;
  padding: 24px; border-radius: var(--cx-r-xl);
  background: rgba(250, 250, 249, 0.04);
  border: 1px solid rgba(250, 250, 249, 0.10);
  color: var(--cx-inverse);
}
.cx-acard__head {
  margin: 0 0 20px; display: flex; align-items: center; gap: 8px;
  font-family: var(--cx-mono); font-size: 14px; line-height: 21px;
  letter-spacing: -0.18px; text-transform: uppercase; opacity: 0.6;
}
.cx-acard__tag { padding: 2px 8px; border-radius: var(--cx-r-full); background: rgba(250, 250, 249, 0.10); }
.cx-acard__dot { opacity: 0.5; }
.cx-acard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-acard__row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-top: 1px solid rgba(250, 250, 249, 0.08);
  font-family: var(--cx-sans); font-weight: 400; font-size: 14px; line-height: 20px;
}
.cx-acard__row:first-child { border-top: 0; }
.cx-acard__where { display: flex; align-items: center; gap: 8px; opacity: 0.7; min-width: 0; }
.cx-acard__net { opacity: 1; font-weight: 500; }
.cx-acard__move { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-acard__from { opacity: 0.45; text-decoration: line-through; }
.cx-acard__arrow { opacity: 0.4; }
.cx-acard__to.up   { color: #22c55f; }    /* the same green and orange the chart uses */
.cx-acard__to.down { color: #f97318; }

/* the section lead sits under the two-tone title, same measure as the head */
.cx-psec__lead { margin: 0; max-width: 680px; }

.cx-phero__row { position: relative; height: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 40px; box-sizing: border-box; }
.cx-phero__copy { width: 447px; margin-top: 176px; display: flex; flex-direction: column; align-items: flex-start; gap: 38px; }
.cx-phero__h1   { margin: 0; color: var(--cx-inverse); }                  /* STIX 80 */
.cx-phero__lead { margin: 0; color: var(--cx-inverse); }                  /* Inter 20/32 */
.cx-phero__cta  { text-decoration: none; }                                /* .cx-btn.on-dark — 48 tall, px-48 */
.cx-phero__strip { position: absolute; left: 50%; transform: translateX(-50%); top: 856px; width: 100%; padding: 0 40px; box-sizing: border-box; }   /* 941:14678 */

/* the sticker is a sibling of the card, not a child: the card clips (941:14595 overflow-clip) */
.cx-phero__sticker { position: absolute; top: 143px; right: -41.42px; width: 274px; height: 114px; pointer-events: none; }
.cx-phero__sticker-img { display: block; width: 274px; height: 114px; }

/* ---- the in-hero logo strip (941:14678) — the home page's strip, inverted */
.cx-phero__strip .cx-strip { padding: 0; }
.cx-strip.inverse .cx-strip__row { border-color: rgba(250, 250, 249, 0.08); }
.cx-strip.inverse .cx-strip__eyebrow { color: var(--cx-inverse); opacity: 0.6; border-right-color: rgba(250, 250, 249, 0.08); }
.cx-strip.inverse .cx-strip__cell { border-right-color: rgba(250, 250, 249, 0.08); }
.cx-strip.inverse .cx-strip__cell img { filter: brightness(0) invert(1); opacity: 0.5; }

/* --------------------------------------------------------------------------
   3. Pixel-script card — 941:14595 · 561 wide · r-16 · 1px rgba(255,255,255,.08)
      The code is Inter (Figma's choice, not a mono face) with its ss01/cv0x set.
   -------------------------------------------------------------------------- */
.cx-pcard {
  box-sizing: border-box; width: 561px; margin-top: 155px; overflow: hidden;
  background: var(--cx-dark); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
}
.cx-pcard__head { display: flex; align-items: center; gap: 16px; padding: 24px; }
.cx-pcard__head > img { display: block; width: 63px; height: 15px; }
.cx-pcard__label { margin: 0; font-family: var(--cx-mono); font-weight: 400; font-size: 14px; line-height: 21px; color: var(--cx-ink-2); }
.cx-pcard__code { padding: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cx-pcard__pre { display: flex; flex-direction: column; gap: 15px; padding: 12px; border-radius: 8px; background: var(--cx-dark); }
.cx-pcard__line {
  margin: 0; font-family: var(--cx-sans); font-weight: 400; font-size: 14px; line-height: 24px;
  letter-spacing: -0.09px; color: var(--cx-inverse); white-space: pre;
  font-feature-settings: "ordn" 1, "salt" 1, "case" 1, "cpsp" 1, "cv09" 1, "cv04" 1, "cv03" 1, "cv02" 1, "cv01" 1, "ss01" 1, "dlig" 1, "lnum" 1, "tnum" 1;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.cx-pcard__line .tk-c { color: var(--cx-ink-2); }       /* comment  — Text/Secondary */
.cx-pcard__line .tk-t { color: #e14f62; }               /* tag      — rose/500 */
.cx-pcard__line .tk-k { color: #da5597; }               /* keyword  — pink/500 */
.cx-pcard__line .tk-s { color: #e87b35; }               /* string   — orange/500 */
.cx-pcard__line .tk-d { color: #4e80ee; }               /* dom call — blue/500 */

.cx-pcard__foot { display: flex; align-items: flex-end; gap: 8px; padding: 24px; }
.cx-pcard__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-pcard__field-label { margin: 0; font-family: var(--cx-sans); font-weight: 500; font-size: 14px; line-height: 24px; color: var(--cx-inverse); }
.cx-pcard__input {
  box-sizing: border-box; display: flex; align-items: center; height: 32px; padding: 4px 8px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cx-border-input); border-radius: var(--cx-r-lg);
}
.cx-pcard__input > span { font-family: var(--cx-sans); font-weight: 400; font-size: 14px; line-height: 24px; color: var(--cx-ink-3); }
.cx-pcard__btn {
  box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 3px 14px; background: #3a3a3a; border: 1px solid var(--cx-border-input);
  border-radius: var(--cx-r-lg); font-family: var(--cx-sans); font-weight: 500; font-size: 14px; line-height: 24px; color: var(--cx-inverse);
}

/* --------------------------------------------------------------------------
   4. Mobile — same discipline as the home page (site/callix/mobile.css)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cx-psec__inner { padding: 64px 20px; gap: 32px; }
  .cx-psec__head, .cx-psec__head.narrow { width: auto; }
  .cx-psec__grid { flex-direction: column; height: auto; }
  /* the 370-tall cell pushes its icon and text to opposite ends — that is the desktop design. Stacked on a
     phone it reads as three broken boxes with a hole in the middle, so the cell hugs its content instead. */
  /* flex: 1 1 0 makes flex-basis the HEIGHT once the grid turns into a column, so the cell collapses and
     overflow:hidden eats the paragraph. On mobile the cell sizes to its own content instead. */
  .cx-psec__cell { flex: none; height: auto; min-height: 0; overflow: visible;
    justify-content: flex-start; gap: 28px; border-width: 1px 1px 0 1px; padding: 24px; }
  .cx-psec__cell:first-child { padding-left: 24px; }
  .cx-psec__cell:last-child { border-bottom-width: 1px; }

  .cx-phero--analyze, .cx-phero--track, .cx-phero--scale { height: auto; }
  .cx-phero--scale .cx-phero__row { padding-bottom: 0; }
  .cx-phero__head { height: auto; padding: 64px 0 40px; }
  .cx-phero__headrow { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cx-phero__title, .cx-phero__sub { flex: none; width: auto; }
  .cx-phero__stage { height: 320px; }
  .cx-phero__dash { left: 20px; width: 1100px; height: auto; }
  .cx-phero__dash-img { width: 1100px; height: auto; }

  .cx-phero__row { flex-direction: column; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
  .cx-phero__copy { width: auto; margin-top: 0; gap: 28px; }
  .cx-pcard { width: 100%; margin-top: 0; }
  .cx-phero__strip { position: static; transform: none; width: auto; padding-bottom: 64px; }
  .cx-phero__sticker { display: none; }                  /* no room beside the card once it is full width */
}
@media (max-width: 767px) {
  .cx-phero__stage { height: 220px; }
  /* at 760 wide the shot's nav rail eats 150 of the 370 visible px, so the hero for "the dashboard your team
     actually opens" was mostly chrome. Pull it left: the rail stays as a sliver, the data leads. */
  .cx-phero__dash { left: -110px; width: 760px; }
  .cx-phero__dash-img { width: 760px; }
  .cx-pcard__line { font-size: 12px; line-height: 18px; }
  .cx-pcard__code, .cx-pcard__head, .cx-pcard__foot { padding: 16px; }
  /* the snippet is `white-space: pre`, so on a phone the two long lines were cut mid-word by the card. A
     horizontal scroll nobody discovers still reads as broken code, so the lines wrap instead — the leading
     indentation survives (pre-wrap) and the install URL is legible in full. */
  .cx-pcard__line { white-space: pre-wrap; overflow-wrap: anywhere; }
  .cx-pcard__pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cx-phero__strip .cx-strip__cell { flex-basis: 50%; }
}