/* ==========================================================================
   /mcp — "Talk to your revenue". Rides on /track's frame (pages.css): the dark
   hero, .cx-psec sections, the closing CTA. Everything here is what that page
   does not have: the rotating headline word, the chat card, and five section
   bodies. mcp.js drives the three moving parts; every one of them has a still,
   finished state that is what renders without JS or under reduced motion.

   One curve for every entrance on the page — the ease-out-expo the home chat
   already uses — so the page moves as one thing.
   ========================================================================== */
:root {
  --cx-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances — the home chat's curve */
  --cx-out:  cubic-bezier(0.23, 1, 0.32, 1);  /* exits: leave fast, never ease-in */
}

/* chips for small labels, and the shared "Try" line */
.cx-mbtn { gap: 8px; transition: transform 160ms ease-out, background-color 200ms ease, box-shadow 200ms ease; }
.cx-mbtn:active { transform: scale(0.97); }
.cx-mbtn--ghost { background: transparent; color: var(--cx-inverse); box-shadow: inset 0 0 0 1px rgba(250, 250, 249, 0.22); }
.cx-mbtn--arrow svg { transition: transform 200ms var(--cx-expo); }
@media (hover: hover) {
  .cx-btn.on-dark.cx-mbtn:hover { background: #fff; }
  .cx-mbtn--ghost:hover { background: rgba(250, 250, 249, 0.07); }
  .cx-mbtn--arrow:hover svg { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   1. Hero — /track's layout, a wider copy column for the two-line headline
   -------------------------------------------------------------------------- */
.cx-phero--mcp .cx-phero__row { gap: 40px; }
.cx-phero--mcp .cx-mhero__copy { flex: 0 1 540px; width: 540px; min-width: 0; }
.cx-mhero__h1 { display: block; }
.cx-mhero__line { display: block; }
.cx-mhero__lead { max-width: 500px; }
.cx-mhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* The rotating word. Every word sits in the same grid cell, so swapping them never
   moves a thing around it; the word is on its own line, so its width is free to
   change. Letters leave upward and arrive from below, blurred, 24ms apart. */
.cx-rot { display: grid; justify-items: start; white-space: nowrap; }
.cx-rot__w { grid-area: 1 / 1; display: inline-flex; }
.cx-rot__c {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(0.32em); filter: blur(8px);
  transition: opacity 500ms var(--cx-expo), transform 700ms var(--cx-expo), filter 500ms var(--cx-expo);
  transition-delay: calc(140ms + var(--j) * 24ms);
}
.cx-rot__w.is-on .cx-rot__c { opacity: 1; transform: none; filter: blur(0); }
.cx-rot__w.is-out .cx-rot__c {
  opacity: 0; transform: translateY(-0.26em); filter: blur(8px);
  transition-duration: 260ms, 300ms, 260ms;
  transition-timing-function: var(--cx-out);
  transition-delay: calc(var(--j) * 14ms);
}

/* the page arrives: copy rises in order, the card settles a beat later */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cx-mrise { from { opacity: 0; transform: translateY(14px); } }
  .cx-phero--mcp .cx-mhero__copy > * { animation: cx-mrise 900ms var(--cx-expo) both; }
  .cx-phero--mcp .cx-mhero__copy > :nth-child(2) { animation-delay: 90ms; }
  .cx-phero--mcp .cx-mhero__copy > :nth-child(3) { animation-delay: 180ms; }
  @keyframes cx-mcard-in { from { opacity: 0; transform: translateY(20px) scale(0.985); } }
  .cx-mcard { animation: cx-mcard-in 1100ms var(--cx-expo) 260ms both; }
}

/* --------------------------------------------------------------------------
   2. The chat card — /track's pixel card's box, holding a Claude exchange
   -------------------------------------------------------------------------- */
.cx-mcard {
  box-sizing: border-box; flex: 0 1 561px; width: 561px; min-width: 0; height: 604px; margin-top: 155px;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(250, 250, 249, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
  color: var(--cx-inverse);
}
.cx-mcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cx-mcard__who { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; line-height: 20px; }
.cx-mcard__claude { width: 16px; height: 16px; filter: invert(1); }
.cx-mcard__conn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 16px; color: var(--cx-ink-3);
}
.cx-mcard__dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55f; box-shadow: 0 0 0 3px rgba(34, 197, 95, 0.18); }

/* a transcript is a scroller: it grows from the bottom and clips at the top */
.cx-mcard__log { flex: 1 1 0; min-height: 0; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 20px 16px; }
.cx-mcard__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cx-mcard p { margin: 0; }

.cx-mcard__me { align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: var(--cx-r-lg); background: rgba(250, 250, 249, 0.09); }
.cx-mcard__me p { font-size: 14px; line-height: 20px; }

.cx-mcard__tool {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 10px; border-radius: var(--cx-r-lg);
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03);
  font-size: 12px; line-height: 16px; color: var(--cx-ink-3);
}
.cx-mcard__tool-mark { width: 14px; height: 14px; filter: invert(1); }
.cx-mcard__tool-name { color: var(--cx-inverse); font-weight: 500; }
.cx-mcard__tool-state { display: inline-flex; align-items: center; gap: 6px; }
.cx-mcard__run { display: none; }
.cx-mcard__ok { color: #22c55f; }
.cx-mcard__tool.is-running .cx-mcard__run { display: inline; animation: cx-mshimmer 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.cx-mcard__tool.is-running .cx-mcard__done, .cx-mcard__tool.is-running .cx-mcard__ok { display: none; }
@keyframes cx-mshimmer { 50% { opacity: 0.4; } }
@keyframes cx-mpop { from { opacity: 0; transform: scale(0.4); } }
.cx-mcard.is-armed .cx-mcard__ok { animation: cx-mpop 420ms var(--cx-expo) both; }
/* "Ranking…" → "Ranked…": the label settles in with the check rather than jumping */
@keyframes cx-mfade { from { opacity: 0; } }
.cx-mcard.is-armed .cx-mcard__done { animation: cx-mfade 300ms var(--cx-out) both; }

.cx-mcard__ai { font-size: 14px; line-height: 20px; color: rgba(250, 250, 249, 0.78); }
.cx-mcard__ai b { font-weight: 500; color: var(--cx-inverse); }

.cx-mcard__table { width: 100%; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; }
.cx-mcard__tr {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 62px 70px 82px; gap: 10px; align-items: center;
  padding: 9px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.cx-mcard__tr > :nth-child(n+3) { text-align: right; }
.cx-mcard__th { border-top: 0; font-size: 12px; line-height: 16px; color: var(--cx-ink-3); }
.cx-mcard__tr:nth-child(2) { background: rgba(34, 197, 95, 0.07); }   /* the winner */
.cx-mcard__rank { color: var(--cx-ink-3); }
.cx-mcard__camp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-mcard__roas { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cx-mcard__bar {
  display: block; width: calc(var(--w) * 30px); height: 4px; border-radius: 2px; background: #22c55f;
  transform-origin: 0 50%;
}
.cx-mcard__tr.is-loss .cx-mcard__bar { background: #f97318; }
.cx-mcard__tr.is-loss .cx-mcard__roas { color: #f97318; }

/* the objection breakdown — the calls behind the winning campaign */
.cx-mcard__obj { width: 100%; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; }
.cx-mcard__obj-head {
  display: flex; justify-content: space-between; padding: 9px 12px;
  font-size: 12px; line-height: 16px; color: var(--cx-ink-3);
}
.cx-mcard__obj-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; line-height: 18px;
}
.cx-mcard__obj-o { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-mcard__obj-n { flex: none; display: flex; align-items: center; gap: 8px; color: var(--cx-ink-3); font-variant-numeric: tabular-nums; }
.cx-mcard__obj-n .cx-mcard__bar { width: calc(var(--w) * 44px); background: #f97318; }
.cx-mcard__obj-row:nth-child(2) .cx-mcard__obj-n { color: var(--cx-inverse); }
.cx-mcard__win { padding: 10px 12px 11px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(34, 197, 95, 0.07); }
.cx-mcard__win-q { font-family: var(--cx-serif); font-size: 15px; line-height: 20px; color: var(--cx-inverse); }
.cx-mcard__win-by { margin-top: 4px !important; font-size: 12px; line-height: 16px; color: #22c55f; }

.cx-mcard__ask {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 48px; margin: 0 12px 12px; padding: 8px 8px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.03);
}
.cx-mcard__field { display: grid; min-width: 0; font-size: 14px; line-height: 20px; }
.cx-mcard__field > * { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; }
.cx-mcard__ph { color: var(--cx-ink-3); transition: opacity 240ms linear; }
.cx-mcard__typed { display: inline-flex; align-items: center; }
.cx-mcard__caret { width: 1px; height: 16px; margin-left: 1px; background: currentColor; opacity: 0; }
.cx-mcard__send {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--cx-inverse); color: var(--cx-ink);
  transition: transform 260ms var(--cx-expo);
}
.cx-mcard__send.is-pressed { transform: scale(0.94); transition-duration: 90ms; }

/* The loop (mcp.js). `is-armed` goes on only once the script is running, so the
   markup's own state — everything shown — is what everyone else gets. A block is
   out of the flow until its cue; mcp.js FLIPs the column as each one lands, so
   an arrival is one composited slide of the whole transcript. */
.cx-mcard.is-armed .cx-mcard__stack { will-change: transform; }
.cx-mcard.is-armed [data-step]:not(.is-live) { display: none; }
.cx-mcard.is-armed [data-step] { opacity: 0; }
.cx-mcard.is-armed [data-step].is-in { opacity: 1; transform: none; }
.cx-mcard.is-armed [data-step="prompt"], .cx-mcard.is-armed [data-step="prompt2"] { transform: scale(0.96); transform-origin: 100% 100%; transition: opacity 450ms var(--cx-expo), transform 500ms var(--cx-expo); }
.cx-mcard.is-armed [data-step="tool"], .cx-mcard.is-armed [data-step="tool2"],
.cx-mcard.is-armed [data-step="answer"], .cx-mcard.is-armed [data-step="answer2"] { transform: translateY(6px); transition: opacity 400ms var(--cx-expo), transform 500ms var(--cx-expo); }
.cx-mcard.is-armed [data-step="table"], .cx-mcard.is-armed [data-step="objections"] { transition: opacity 200ms linear; }
/* the breakdown builds like the table: rows rise in order, bars grow, then the winning line lands */
.cx-mcard.is-armed [data-step="objections"] :is(.cx-mcard__obj-row, .cx-mcard__win) { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--cx-expo), transform 500ms var(--cx-expo); transition-delay: calc(var(--r, -1) * 110ms + 120ms); }
.cx-mcard.is-armed [data-step="objections"] .cx-mcard__bar { transform: scaleX(0); transition: transform 700ms var(--cx-expo); transition-delay: calc(var(--r, 0) * 110ms + 320ms); }
.cx-mcard.is-armed [data-step="objections"].is-in :is(.cx-mcard__obj-row, .cx-mcard__win) { opacity: 1; transform: none; }
.cx-mcard.is-armed [data-step="objections"].is-in .cx-mcard__bar { transform: none; }
.cx-mcard.is-armed [data-step="objections"] .cx-mcard__win { transition-delay: 560ms; }
/* the table builds itself: rows rise in order, then each bar grows to its value */
.cx-mcard.is-armed [data-step="table"] .cx-mcard__tr { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--cx-expo), transform 500ms var(--cx-expo); transition-delay: calc(var(--r, -1) * 70ms + 90ms); }
.cx-mcard.is-armed [data-step="table"] .cx-mcard__bar { transform: scaleX(0); transition: transform 700ms var(--cx-expo); transition-delay: calc(var(--r, 0) * 70ms + 300ms); }
.cx-mcard.is-armed [data-step="table"].is-in .cx-mcard__tr { opacity: 1; transform: none; }
.cx-mcard.is-armed [data-step="table"].is-in .cx-mcard__bar { transform: none; }

.cx-mcard[data-phase="typing"] .cx-mcard__ph, .cx-mcard[data-phase="send"] .cx-mcard__ph { opacity: 0; }
.cx-mcard[data-phase="typing"] .cx-mcard__caret { animation: cx-mcaret 1s step-end infinite; }
@keyframes cx-mcaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.cx-mcard[data-phase="reset"] [data-step] { opacity: 0; transform: none; transition: opacity 400ms linear; }

/* --------------------------------------------------------------------------
   3. Scroll reveal — mcp.js puts `cx-reveal` on <html> only when it can run the
      observer and motion is welcome, so the default is simply "visible"
   -------------------------------------------------------------------------- */
html.cx-reveal [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--cx-expo), transform 900ms var(--cx-expo);
  transition-delay: calc(var(--d, 0) * 70ms);
}
html.cx-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   4. "Ask it like you'd ask your best analyst" — a stage that shows one prompt
      and what comes back, beside the list that picks it
   -------------------------------------------------------------------------- */
.cx-mask { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--cx-surface); border: 1px solid var(--cx-line); }
.cx-mask__stage { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 420px; padding: 32px; border-right: 1px solid var(--cx-line); }
.cx-mask__qs, .cx-mask__as { display: grid; }
.cx-mask__qs > *, .cx-mask__as > * { grid-area: 1 / 1; }
.cx-mask__qs { margin-top: 20px; }
.cx-mask__q {
  margin: 0; font-family: var(--cx-serif); font-size: 44px; line-height: 48px; letter-spacing: -0.7px; color: var(--cx-ink);
  text-wrap: balance;
}
.cx-mask__uses { display: flex; flex-direction: column; gap: 10px; }
.cx-mask__a { margin: 0; max-width: 460px; color: var(--cx-ink); }
/* the swap: out fast and flat, in with a small rise and a de-blur */
.cx-mask__q, .cx-mask__a {
  opacity: 0; transform: translateY(10px); filter: blur(6px); pointer-events: none;
  transition: opacity 200ms var(--cx-out), transform 200ms var(--cx-out), filter 200ms var(--cx-out);
}
.cx-mask__q.is-on, .cx-mask__a.is-on {
  opacity: 1; transform: none; filter: blur(0); pointer-events: auto;
  transition: opacity 600ms var(--cx-expo) 160ms, transform 800ms var(--cx-expo) 160ms, filter 600ms var(--cx-expo) 160ms;
}
.cx-mask__a.is-on { transition-delay: 260ms; }

.cx-mask__list { display: flex; flex-direction: column; }
.cx-mask__list > li { flex: 1 1 0; display: flex; }
.cx-mask__list > li + li { border-top: 1px solid var(--cx-line); }
.cx-mask__item {
  position: relative; flex: 1; display: flex; align-items: center;
  padding: 16px 28px; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 16px; line-height: 24px; letter-spacing: -0.09px; color: var(--cx-ink);
  opacity: 0.5; transition: opacity 200ms ease, background-color 200ms ease;
}
.cx-mask__item.is-on { opacity: 1; background: var(--cx-page); }
.cx-mask__item:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: -2px; }
@media (hover: hover) { .cx-mask__item:hover { opacity: 0.85; } }
/* The progress hairline IS the timer: mcp.js advances on its animationend, so
   pausing it (hover, focus, off screen) pauses the rotation for free. */
.cx-mask__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--cx-ink); transform: scaleX(0); transform-origin: 0 50%; }
.cx-mask.is-auto .cx-mask__item.is-on .cx-mask__prog { animation: cx-mprog var(--cx-dwell, 5200ms) linear forwards; }
.cx-mask.is-paused .cx-mask__prog { animation-play-state: paused !important; }
@keyframes cx-mprog { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   5. "Same math" — two readouts and an equals sign
   -------------------------------------------------------------------------- */
.cx-msame { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); background: var(--cx-surface); border: 1px solid var(--cx-line); }
.cx-msame__cell { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 320px; padding: 32px; }
.cx-msame__stack { display: flex; flex-direction: column; gap: 20px; }
.cx-msame__stack > p { margin: 0; }
.cx-msame__num { color: var(--cx-ink); white-space: nowrap; }
.cx-msame__eq { display: flex; align-items: center; justify-content: center; border: 0 solid var(--cx-line); border-width: 0 1px; }
.cx-msame__eq > span {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  font-family: var(--cx-serif); font-size: 32px; line-height: 1; color: var(--cx-ink-2);
  box-shadow: inset 0 0 0 1px var(--cx-line-strong);
  transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease, transform 500ms var(--cx-expo);
}
.cx-msame.is-match .cx-msame__eq > span { color: #15803d; background: rgba(34, 197, 95, 0.1); box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .cx-msame.is-match .cx-msame__eq > span { animation: cx-mmatch 600ms var(--cx-expo); }
}
@keyframes cx-mmatch { 40% { transform: scale(1.12); } }

/* --------------------------------------------------------------------------
   6. Capabilities — five editorial rows
   -------------------------------------------------------------------------- */
.cx-mcaps { border-top: 1px solid var(--cx-line); }
.cx-mcaps__row {
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; gap: 40px; align-items: start;
  padding: 36px 0; border-bottom: 1px solid var(--cx-line);
}
.cx-mcaps__name { margin: 0; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--cx-ink); }
.cx-mcaps__copy { display: flex; flex-direction: column; gap: 10px; }
.cx-mcaps__copy > p { margin: 0; }
.cx-mcaps__line { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; color: var(--cx-ink); }
.cx-mcaps__ask { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-mcaps__ask .cx-psec__eyebrow { font-size: 12px; line-height: 16px; }
.cx-mcaps__q { font-family: var(--cx-serif); font-size: 22px; line-height: 28px; letter-spacing: -0.2px; color: var(--cx-ink); }

/* --------------------------------------------------------------------------
   7. One-click prompts — the prompt-menu button, drawn in each cell
   -------------------------------------------------------------------------- */
.cx-mbriefs { height: 300px; }
.cx-mbriefs__btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: var(--cx-r-lg);
  border: 1px solid var(--cx-line-strong); background: var(--cx-page);
  font-weight: 500; font-size: 14px; line-height: 20px; color: var(--cx-ink);
  box-shadow: 0 1px 2px rgba(38, 38, 38, 0.04);
  transition: transform 260ms var(--cx-expo), box-shadow 260ms var(--cx-expo);
}
.cx-mbriefs__btn img { width: 14px; height: 14px; }
.cx-mbriefs__from { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--cx-ink-2); }
@media (hover: hover) {
  .cx-mbriefs__cell:hover .cx-mbriefs__btn { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(38, 38, 38, 0.08); }
}

/* --------------------------------------------------------------------------
   8. Guardrails — the one dark section (nav.js reads data-cx="dark")
   -------------------------------------------------------------------------- */
.cx-mguard { background: var(--cx-dark); color: var(--cx-inverse); }
.cx-mguard__inner { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 80px; padding: 96px 40px; }
.cx-mguard__head .cx-title { margin: 0; }
.cx-mguard__list { border-top: 1px solid var(--cx-line-dark-2); }
.cx-mguard__row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--cx-line-dark-2); }
.cx-mguard__row p { margin: 0; }
.cx-mguard__row b { font-weight: 500; }
.cx-mguard__icon { flex: none; display: flex; padding-top: 4px; color: #22c55f; }
.cx-mguard__d { color: rgba(250, 250, 249, 0.7); }

/* --------------------------------------------------------------------------
   9. Where it works + three steps
   -------------------------------------------------------------------------- */
.cx-mclients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--cx-line); background: var(--cx-surface); }
.cx-mclients__cell { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 16px; text-align: center; color: var(--cx-ink); }
.cx-mclients__cell + .cx-mclients__cell { border-left: 1px solid var(--cx-line); }
.cx-msteps { height: auto; margin: 0; padding: 0; }
.cx-msteps .cx-psec__cell { height: auto; justify-content: flex-start; }   /* stretch to the row, not 100% of an auto height */

/* --------------------------------------------------------------------------
   10. Everything it can do
   -------------------------------------------------------------------------- */
.cx-mkit { border-top: 1px solid var(--cx-line); }
.cx-mkit__group { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--cx-line); }
.cx-mkit__label { padding-top: 2px; }
.cx-mkit__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.cx-mkit__item { display: flex; gap: 10px; color: var(--cx-ink); }
.cx-mkit__tick { flex: none; margin-top: 4px; color: var(--cx-ink-2); }

/* --------------------------------------------------------------------------
   11. Closing CTA — /track's, with a button in the side column
   -------------------------------------------------------------------------- */
.cx-cta--mcp { height: auto; }
.cx-cta--mcp .cx-cta__head { height: auto; padding: 120px 0 128px; }
.cx-cta__side { flex: 0 0 391px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-left: auto; }
.cx-cta--mcp .cx-cta__sub { flex: none; width: auto; margin: 0; }

/* --------------------------------------------------------------------------
   12. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cx-phero--mcp .cx-mhero__copy { flex: none; width: auto; }
  .cx-mcard { flex: none; width: 100%; margin-top: 0; height: 560px; }

  .cx-mask { grid-template-columns: 1fr; }
  .cx-mask__stage { min-height: 320px; padding: 24px; border-right: 0; border-bottom: 1px solid var(--cx-line); }
  .cx-mask__q { font-size: 32px; line-height: 36px; }
  .cx-mask__item { padding: 14px 24px; }

  .cx-msame { grid-template-columns: 1fr; }
  .cx-msame__cell { min-height: 0; gap: 40px; padding: 24px; }
  .cx-msame__eq { height: 72px; border-width: 1px 0; }

  .cx-mcaps__row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }

  .cx-mbriefs, .cx-msteps { height: auto; }
  .cx-mguard__inner { grid-template-columns: 1fr; gap: 32px; padding: 64px 20px; }
  .cx-mclients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-mclients__cell:nth-child(3) { border-left: 0; }
  .cx-mclients__cell:nth-child(n+3) { border-top: 1px solid var(--cx-line); }
  .cx-mkit__group { grid-template-columns: 1fr; gap: 16px; }
  .cx-mkit__items { grid-template-columns: 1fr; }

  .cx-cta--mcp .cx-cta__head { padding: 64px 0 72px; }
  .cx-cta__side { flex: none; margin-left: 0; }
}
@media (max-width: 767px) {
  .cx-mhero__ctas { flex-direction: column; align-self: stretch; }
  .cx-mhero__ctas .cx-mbtn { width: 100%; }
  .cx-mcard { height: 580px; }   /* the second turn wraps more on a phone; room for it and the objection card */
  .cx-mcard__log { padding: 16px 14px 12px; }
  .cx-mcard__tr { grid-template-columns: 14px minmax(0, 1fr) 62px 72px; gap: 8px; padding: 8px 10px; font-size: 12px; }
  .cx-mcard__tr > :nth-child(3) { display: none; }   /* spend drops first; revenue and ROAS carry the answer */
  .cx-mcard__obj-row { font-size: 12px; padding: 8px 10px; }
  .cx-mcard__obj-n .cx-mcard__bar { display: none; }
  .cx-mcard__ask { margin: 0 8px 8px; }
  .cx-mask__q { font-size: 26px; line-height: 30px; }
  .cx-msame .cx-stat { font-size: 64px; }
  .cx-mcaps__q { font-size: 20px; line-height: 26px; }
  .cx-mkit__item { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-rot__c, .cx-mask__q, .cx-mask__a, .cx-mbtn, .cx-mbriefs__btn { transition: none !important; filter: none !important; }
  .cx-mcard__dot { box-shadow: none; }
}

/* the cells push their text to the foot; a one-line description would sit its title lower than its
   neighbours', so the stack holds two lines' room and the titles share a baseline across the row */
.cx-msteps .cx-psec__stack { justify-content: flex-start; }
/* the button is the prompt's name, so the cell's copy is just what it returns, set as the cell's lead */
.cx-mbriefs .cx-psec__stack { min-height: 56px; justify-content: flex-start; }
.cx-mbriefs__desc { max-width: 320px; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; color: var(--cx-ink); }
@media (max-width: 767px) { .cx-mbriefs__desc { font-size: 18px; line-height: 24px; } }

/* --------------------------------------------------------------------------
   13. No all-caps on this page (request 2026-09-25). The shared eyebrow roles are
       mono + uppercase site-wide; on /mcp they read as sentence-case Inter labels,
       scoped by the body class so /track and / keep theirs.
   -------------------------------------------------------------------------- */
.cx-mcp .cx-psec__eyebrow,
.cx-mcp .cx-eyebrow {
  font-family: var(--cx-sans); font-size: 14px; line-height: 20px; letter-spacing: -0.09px;
  text-transform: none; color: var(--cx-ink-2);
}
.cx-mcp .cx-strip.inverse .cx-strip__eyebrow { color: var(--cx-inverse); }
.cx-mcp .cx-mclients__cell .cx-eyebrow { font-size: 16px; color: var(--cx-ink); }
.cx-mcp .cx-mcaps__ask .cx-psec__eyebrow { font-size: 14px; line-height: 20px; }