/* ============================================================
   PACE MCP - Trace design system reskin

   Page-specific rules only. Fonts, tokens, reset, typography and
   buttons live in /assets/trace-base.css; the nav, footer and
   Request-access modal live in /assets/trace-chrome.css. Load both
   before this sheet.
   ============================================================ */
/* ============ SECTION + PANEL scaffolding (Trace) ============ */
.sec{ padding:clamp(64px, 8vw, 120px) 0; }
.sec__head{ text-align:center; max-width:820px; margin:0 auto; }
.panel-wrap{ padding:12px var(--gutter); max-width:calc(var(--max-w) + 2*var(--gutter)); margin:0 auto; }
.panel{
  border-radius:var(--r-panel);
  padding:clamp(56px, 7vw, 104px) clamp(20px, 5vw, 88px);
}
.panel--ink{ background:var(--ink); color:var(--cream); }
.panel--ink h2, .panel--ink h3{ color:var(--cream); }
.panel--sand{ background:var(--paper-2); }
.panel--white{ background:#FCFCFB; border:1px solid rgba(0,0,0,0.06); }
.panel h2, .sec h2{ font-size:clamp(2.4rem, 5vw, 4.6rem); letter-spacing:-0.015em; }
.lede{ font-size:1.12rem; max-width:620px; color:var(--ink-soft); }
.panel--ink .lede{ color:var(--cream-soft); }
.sec__head .lede{ margin:22px auto 0; }
/* side-by-side panels: lede needs its own gap (no .sec__head wrapper) */
.out-grid .lede, .tools-head .lede{ margin-top:20px; }

.doc-link{ display:inline-block; font-weight:600; font-size:.95rem; color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-mute); text-decoration-thickness:1.5px; text-underline-offset:5px; transition:text-decoration-color .18s ease; }
.doc-link:hover{ text-decoration-color:var(--ink); }
.panel--ink .doc-link{ color:var(--cream); text-decoration-color:var(--cream-mute); }
.panel--ink .doc-link:hover{ text-decoration-color:var(--cream); }
.action-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

/* ============ HERO ============ */
/* fills the viewport below the 64px sticky nav so the next section can't peek,
   and centres the content in that space instead of sitting content-height high.
   svh after vh: progressive upgrade, vh is the fallback for older Safari/Firefox. */
.hero{
  min-height:calc(100vh - 64px);
  min-height:calc(100svh - 64px);
  display:flex; align-items:center;
  padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,80px);
  text-align:center;
}
.hero > .container{ width:100%; }
.hero h1{
  font-size:clamp(2.8rem, 6.4vw, 5.6rem);
  max-width:17ch; margin:0 auto;
}
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero .lede{ margin:26px auto 0; max-width:600px; font-size:1.16rem; }
.hero__links{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* endpoint card - dark, mono */
.endpoint{
  max-width:620px; margin:44px auto 0;
  background:var(--ink); border:1px solid var(--ink-border);
  border-radius:var(--r-panel); overflow:hidden; text-align:left;
}
.endpoint__bar{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--ink-border);
  background:var(--ink-card);
}
.endpoint__label{ font-family:var(--mono); font-size:11px; color:var(--cream-mute); letter-spacing:.04em; }
.endpoint__copy{
  margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:700;
  color:var(--cream); background:rgba(255,255,255,0.06);
  border:1px solid var(--ink-border2); border-radius:var(--r-tag);
  padding:4px 10px; transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.endpoint__copy:hover{ background:rgba(255,255,255,0.12); }
.endpoint__copy.copied{ color:var(--mint); border-color:var(--mint-border); background:var(--mint-tint); }
.endpoint__url{
  display:block; padding:20px 18px;
  font-family:var(--mono); font-size:.95rem; color:var(--mint);
  overflow-x:auto; white-space:nowrap;
}
.endpoint__note{
  padding:0 18px 16px;
  font-family:var(--mono); font-size:11px; color:var(--cream-mute); letter-spacing:.03em;
}

/* ============ MARKETPLACES ============ */
.mkt-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px; margin-top:clamp(36px,4vw,52px);
}
.mkt-card{
  display:flex; flex-direction:column; gap:14px;
  background:var(--light-card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:clamp(24px,3vw,34px);
  transition:transform .2s ease, border-color .2s ease;
}
.mkt-card--live:hover{ transform:translateY(-2px); border-color:var(--teal-border); }
.mkt-card__top{ display:flex; align-items:center; gap:12px; }
.mkt-card__mark{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:var(--r-tag); background:var(--ink); color:var(--cream);
  font-family:var(--display); font-weight:700; font-size:15px;
}
/* logos are white, so they rely on the ink chip above for contrast on the light card */
.mkt-card__mark img{ width:22px; height:22px; object-fit:contain; display:block; }
.mkt-card__host{ font-family:var(--display); font-weight:700; font-size:1.28rem; color:var(--ink-warm); line-height:1.1; }
.mkt-card__where{ font-size:.86rem; color:var(--ink-mute); }
.mkt-card p{ font-size:1rem; color:var(--ink-soft); }
.mkt-card__foot{ margin-top:auto; padding-top:6px; }

/* ============ STRUCTURED OUTPUT (dark) ============ */
.out-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,64px); align-items:center;
}
.out-grid h2{ font-size:clamp(2rem, 3.2vw, 3rem); line-height:1.02; }
.code-win{
  background:var(--ink-card); border:1px solid var(--ink-border);
  border-radius:var(--r-card); overflow:hidden;
}
.code-win__bar{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--ink-border);
  background:rgba(255,255,255,0.02);
}
.code-win__title{ font-family:var(--mono); font-size:11px; color:var(--cream-soft); }
.code-win__badge{
  margin-left:auto; font-family:var(--mono); font-size:9.5px; font-weight:700;
  color:var(--mint); background:var(--mint-tint);
  border:1px solid var(--mint-border); border-radius:var(--r-tag);
  padding:2px 7px; letter-spacing:.07em;
}
.code-win pre{
  margin:0; padding:18px;
  font-family:var(--mono); font-size:12.5px; line-height:1.75;
  color:var(--cream-soft); overflow-x:auto;
}
.tc-prompt{ color:var(--mint); }
.tc-dim{ color:var(--cream-mute); }
.tc-key{ color:var(--mint-2); }
.tc-str{ color:#E8D9A8; }
.tc-num{ color:#9BC7FF; }
.tc-box{ color:var(--cream-mute); }
.code-win__foot{
  padding:9px 14px; border-top:1px solid var(--ink-border);
  font-family:var(--mono); font-size:10.5px; color:var(--cream-mute);
}

/* ============ TOOLS marquee ============ */
.tools-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:end;
  max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter);
}
.tools-head h2{ font-size:clamp(2.2rem, 4vw, 3.4rem); }
.marquee-wrap{
  margin-top:clamp(36px,4vw,52px);
  display:flex; flex-direction:column; gap:16px;
  overflow:hidden;   /* required: tracks are width:max-content and would widen the page */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; gap:16px; width:max-content; animation:mq 48s linear infinite; }
.marquee-track.rev{ animation-direction:reverse; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tool-chip{
  display:flex; align-items:flex-start; gap:13px;
  width:330px; flex:0 0 330px;
  background:var(--light-card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:16px 18px;
}
.tool-chip__icon{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center; border-radius:var(--r-tag);
  background:var(--teal-tint); color:var(--teal);
  font-family:var(--mono); font-size:12px; font-weight:700;
}
.tool-chip__name{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4; }
.tool-chip__desc{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; margin-top:3px; }
.tool-chip--more{ border-style:dashed; border-color:var(--teal-border); transition:background .18s ease; }
.tool-chip--more:hover{ background:var(--teal-tint); }
.tool-chip--more .tool-chip__icon{ background:var(--teal); color:#fff; }

/* ============ FEATURES ============ */
.feat-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:38px 18px;   /* extra row-gap: the fan offsets rows by +-12px */
  margin-top:clamp(40px,4.5vw,60px);
}
.feat-card{
  background:var(--light-card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:26px 24px;
}

/* fanned cards - lifted from pace-pricing.html (.step), applied PER ROW of 3.
   The entrance is opacity-only (.rv-fade), so nothing overwrites these transforms. */
.feat-card{
  transform-origin:center bottom;
  box-shadow:0 14px 36px -22px rgba(18,18,18,0.26);
  transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
.feat-grid > .feat-card:nth-child(3n+1){ transform:rotate(-3.5deg) translateY(12px); }
.feat-grid > .feat-card:nth-child(3n+2){ transform:translateY(-4px); z-index:2; }
.feat-grid > .feat-card:nth-child(3n){   transform:rotate(3.5deg) translateY(12px); }
/* equal specificity to the fan rules, declared later, so hover wins */
.feat-grid > .feat-card:hover{
  transform:rotate(0deg) translateY(-6px); z-index:3;
  box-shadow:0 24px 52px -24px rgba(18,18,18,0.4);
}
@media (prefers-reduced-motion: reduce){ .feat-card{ transition:none; } }
.feat-card__icon{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--r-tag); background:var(--teal-tint); color:var(--teal);
  margin-bottom:16px;
}
.feat-card h3{ font-size:1.12rem; font-weight:700; line-height:1.25; color:var(--ink-warm); }
.feat-card p{ font-size:.95rem; color:var(--ink-soft); margin-top:8px; }

/* ============ INTEGRATIONS + ARCHITECTURE ============ */
/* heading left, subtext right - same two-zone pattern as .tools-head */
.int-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:end;
}
.int-head h2{ font-size:clamp(2rem, 3.2vw, 3rem); }
.int-head .lede{ margin-top:0; }
/* diagram runs the full panel width (the source/destination lists were removed:
   the same information is carried by the diagram itself) */
.int-stage{ margin-top:clamp(36px,4vw,56px); }

.arch{
  background:rgba(255,255,255,0.02); border:1px solid var(--ink-border);
  border-radius:var(--r-card);
  padding:clamp(20px,2vw,26px) clamp(20px,2.6vw,36px) clamp(22px,2.2vw,28px);
}
.arch__title{
  font-family:var(--mono); font-size:11px; font-weight:700;
  color:var(--cream-mute); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:clamp(16px,1.8vw,22px);
}
.arch__stage{
  position:relative;
  /* explicit height, NOT aspect-ratio + max-height: capping the height of a ratio
     box shrinks its width too, which pulled the diagram off the panel's right edge.
     Wires use preserveAspectRatio="none" and nodes are positioned in %, so any box works. */
  width:100%;
  height:clamp(268px, 26vw, 330px);
}
.arch__wires{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.arch__wires--v{ display:none; }   /* vertical funnel, phones only */
.arch-wire{ stroke:url(#wire-grad); }
.arch__wires--v .arch-wire{ stroke:url(#wire-grad-v); }
.arch-wire{ fill:none; stroke:url(#wire-grad); stroke-width:1.2; }
.arch__col{
  position:absolute; top:-6px;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  color:var(--cream-mute); letter-spacing:.1em; text-transform:uppercase;
}
.arch__col--l{ left:0; } .arch__col--r{ right:0; }
.arch__node{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:10px;
  top:calc(var(--row) / 216 * 100%); transform:translateY(-50%);
  width:27%;
  background:var(--ink-card); border:1px solid var(--ink-border);
  border-radius:var(--r-tag); padding:9px 12px;
  font-size:13.5px; color:var(--cream);
}
.arch__node--src{ left:0; }
.arch__node--dst{ right:0; }
.arch__node-icon{
  width:24px; height:24px; flex:0 0 24px;
  display:grid; place-items:center; border-radius:var(--r-tag);
  background:rgba(255,255,255,0.07); color:var(--cream-mute);
  font-family:var(--mono); font-size:10px; font-weight:700;
}
/* <img> variant: contain so no logo is stretched, and no letter chip behind it */
img.arch__node-icon{ background:none; object-fit:contain; padding:0; }
.arch__hub{
  position:absolute; z-index:4;
  /* height and top must stay symmetric about 50% - that is where the wires
     converge on the hub's left/right edges. top = 50 - height/2. */
  left:40%; width:20%; top:36.5%; height:27%;
  display:grid; place-items:center; align-content:center;
  padding:12px 16px;
  background:var(--ink); border:1px solid var(--mint-border);
  border-radius:var(--r-card); text-align:center;
}
.arch__hub-logo{ width:clamp(58px,7vw,78px); height:auto; display:block; margin:0 auto; color:var(--cream); fill:currentColor; }
.arch__hub-sub{ font-family:var(--mono); font-size:10px; color:var(--cream-mute); letter-spacing:.05em; margin-top:5px; }
.arch-wire{ stroke-width:1.4; }
.arch-packet{ fill:var(--mint); }

/* ============ CTA ============ */
.cta .panel{ text-align:center; }
.cta h2{ font-size:clamp(2.6rem, 6vw, 5.4rem); color:var(--cream); max-width:18ch; margin:0 auto; }
.cta p{ color:var(--cream-soft); font-size:1.3rem; margin:24px auto 0; max-width:520px; }
.cta .action-row{ justify-content:center; margin-top:36px; }


/* ============ RESPONSIVE ============ */
@media (max-width: 1000px){
  .out-grid{ grid-template-columns:1fr; gap:40px; }
  .feat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
  /* fan only makes sense at 3-across; flatten below (equal specificity, later source) */
  .feat-grid > .feat-card:nth-child(n){ transform:none; }
  .tools-head, .int-head{ grid-template-columns:1fr; gap:20px; align-items:start; }
}
@media (max-width: 720px){
  .mkt-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; }
  .hero .lede{ font-size:1.06rem; }
  /* Phones get a vertical funnel instead of the 3:1 left-to-right diagram:
     sources across the top, Pace in the middle, agents across the bottom.
     The horizontal version cannot survive a 390px viewport without either
     distorting or forcing a sideways scroll. */
  .arch__wires{ display:none; }
  .arch__wires--v{ display:block; }
  .arch__stage{ height:auto; aspect-ratio:200/260; min-height:0; }

  .arch__node{
    width:22%; left:calc(var(--col) * 25% + 1.5%); right:auto;
    top:auto; transform:none;
    flex-direction:column; gap:5px; text-align:center;
    padding:8px 4px; font-size:9.5px; line-height:1.25;
  }
  .arch__node--src{ top:0; }
  .arch__node--dst{ top:auto; bottom:0; }
  .arch__node-icon{ width:22px; height:22px; flex:0 0 22px; font-size:8px; }

  /* hub: 14% of a 348px stage is 49px, but logo + sub + padding needs 60px,
     so the two collided. Sized to content and kept centred on 50%. */
  .arch__hub{
    left:50%; width:46%; transform:translateX(-50%);
    top:40.5%; height:19%;
    padding:8px 10px;
  }
  .arch__hub-logo{ width:52px; }
  .arch__hub-sub{ font-size:8px; margin-top:3px; }

  /* labels sit between the tile rows (bottom 16%) and the wire fan (starts 22%) */
  .arch__col{ top:auto; }
  .arch__col--l{ left:50%; transform:translateX(-50%); top:17%; }
  .arch__col--r{ right:auto; left:50%; transform:translateX(-50%); top:auto; bottom:17%; }
  .cta .action-row .btn{ width:100%; }
}