/* ========================================================================== tech-partners-v2.css — page layer for /tech-partners -------------------------------------------------------------------------- Scoped to `.nm-tp` on , loaded AFTER site-v2.css. Consumes the shared v2 tokens (site-v2.css §1) and declares no colours or type sizes of its own beyond composition values. Rhythm is NOT set here. Every section uses the shared shapes (`.section.pad-layout`, `.bg-light`, `.bg-dark-wrapper`, `.recommended-apps-section`) so site-v2.css §6 keeps owning the vertical gaps — plain sections take `padding-top`, bands take transparent `margin-top` plus their own `--v2-band-pad`. Radius follows DESIGN-SYSTEM.md "sharp shell, curved interior": the outer cells, panels and section shells are square; everything nested inside them takes `--v2-radius-inner`, a pill, or a circle. Eyebrows reuse `.badge-hero` — the ONE canonical label treatment registered in site-v2.css §12 (bare wide-tracked PT Mono between fading hairlines). Never a second eyebrow idiom on this page. PT MONO IS RESERVED FOR MACHINE TEXT. On this page that means exactly: the endpoint URL in the hero panel bar, the `event.name` identifiers, the `200 / 84 ms` response, the event chips under the rail, the `v1 / HMAC` spec tags, and the code window (filename + body + status). Everything a human wrote — links, labels, form fields, step numbers, card categories — is the body sans. See DESIGN-SYSTEM.md → Typography → PT Mono. NOTE ON LOAD ORDER: this page deliberately does NOT load `partners-enhancements.css` (still used by the 20 localized partners.html pages). That file is unscoped and pre-v2: it re-tunes `.section.pad-layout` padding, resizes `.big-heading-n`, repaints `.bg-dark-wrapper` and gives buttons a lift+shadow hover — all of which fight the shared layer. The few components this page genuinely needed from it (the hero stat strip, the application form, the Calendly split) are rebuilt below in v2 language. ========================================================================== */ .nm-tp { --tp-gap: clamp(1.6rem, 1.6vw, 2.4rem); --tp-cell-pad: clamp(2.4rem, 2.4vw, 3.2rem); --tp-hairline: var(--v2-line); --tp-hairline-dark: rgba(254, 254, 252, 0.14); --tp-on-dark: rgba(254, 254, 252, 0.72); --tp-on-dark-dim: rgba(254, 254, 252, 0.5); --tp-green: #5fd0a6; } /* Smooth scrolling for the two #partnerform anchors. It has to sit on the ROOT element — the viewport's scrolling box reads `scroll-behavior` from , not — so the page is selected with :has() rather than declaring it unscoped and changing every other page on the site. */ :root:has(body.nm-tp) { scroll-behavior: smooth; } ::selection { background: rgba(0, 59, 175, 0.15); color: inherit; } /* Left-aligned eyebrows drop the leading hairline — a rule before a flush-left block reads as an indent (same call site-v2.css §12 makes for hero eyebrows, and enterprise-v2.css for its left-aligned heads). */ .nm-tp .nm-tp-dev__copy .badge-hero:before, .nm-tp .nm-tp-apply__rail .badge-hero:before { display: none; } /* Centred section intro, shared by every light section */ .nm-tp .nm-tp-intro { max-width: 78rem; margin-bottom: clamp(4rem, 5vw, 6rem); } .nm-tp .nm-tp-intro .badge-hero { margin-bottom: 1.6rem; } .nm-tp .nm-tp-intro .big-heading-n { margin-bottom: 1.6rem; } /* Most intros are now heading-only — the lead's gap would dangle. */ .nm-tp .nm-tp-intro .big-heading-n:last-child, .nm-tp .nm-tp-dev__copy .big-heading-n:last-of-type:not(:has(~ .nm-tp-lead)), .nm-tp .nm-tp-apply__rail .big-heading-n:not(:has(~ .nm-tp-lead)) { margin-bottom: 0; } .nm-tp .nm-tp-lead { margin: 0; font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); color: var(--v2-muted); } .nm-tp .bg-dark-wrapper .nm-tp-lead { color: var(--tp-on-dark); } /* One shared link affordance for the whole page: sans, sentence case, arrow. Not a button — buttons on this page are the site's own pill classes. Deliberately NOT PT Mono: see DESIGN-SYSTEM.md → "PT Mono is for machine text only". A page's worth of mono links reads as a terminal, not a link. */ .nm-tp .nm-tp-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-body-sm); font-weight: 500; color: var(--v2-blue); text-decoration: none; transition: color 0.2s ease; } .nm-tp .nm-tp-link:after { content: "\2192"; transition: transform 0.2s ease; } .nm-tp .nm-tp-link:hover { color: var(--v2-blue-bright); } .nm-tp .nm-tp-link:hover:after { transform: translateX(3px); } .nm-tp .bg-dark-wrapper .nm-tp-link, .nm-tp .nm-tp-hero .nm-tp-link { color: var(--_apps---colors--secondary); } /* ========================================================================== 1. HERO — partner positioning + the live event stream -------------------------------------------------------------------------- `.hero-partnerz` is registered in site-v2.css §10 (full-fold, 100svh, nav clearance as padding, room reserved for the pinned trust bar) and in nav-overlay.js's selector list. Both are load-bearing, so the class stays; only the INSIDE of the hero is relaid out here — from a single centred column to a two-column composition. ========================================================================== */ .nm-tp .nm-tp-hero { flex-flow: row; align-items: center; justify-content: space-between; grid-column-gap: clamp(4rem, 6vw, 9rem); background-image: radial-gradient(ellipse 60% 50% at 22% 26%, rgba(67, 128, 249, 0.16) 0%, transparent 68%), radial-gradient(ellipse 46% 46% at 88% 74%, rgba(240, 234, 191, 0.05) 0%, transparent 62%); overflow: hidden; } /* A hairline that closes the fold, same idiom as the other v2 dark heroes. */ .nm-tp .nm-tp-hero:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(67, 128, 249, 0.28), transparent); } .nm-tp .nm-tp-hero__copy { z-index: 2; position: relative; flex: 1 1 50%; max-width: 64rem; text-align: left; } .nm-tp .nm-tp-hero__copy .badge-hero { margin-bottom: 2rem; } .nm-tp .nm-tp-hero__copy .big-heading-n { margin: 0 0 2.4rem; text-align: left; } .nm-tp .nm-tp-hero__sub { max-width: 56rem; margin: 0; font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); color: var(--tp-on-dark); } .nm-tp .nm-tp-hero__btns { display: flex; flex-wrap: wrap; grid-column-gap: 1.2rem; grid-row-gap: 1.2rem; margin-top: 3.2rem; } /* ---- The hero stat strip ------------------------------------------------- Reuses the existing `.partner-stats-strip` markup, restyled from the old pill row into the hairline-separated number row the v2 language uses. */ .nm-tp .partner-stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.2rem, 4vw, 4.8rem); border-top: 1px solid var(--tp-hairline-dark); } .nm-tp .partner-stat { padding: 2rem 2rem 0; border-right: 1px solid var(--tp-hairline-dark); } .nm-tp .partner-stat:first-child { padding-left: 0; } .nm-tp .partner-stat:last-child { border-right: 0; padding-right: 0; } .nm-tp .partner-stat-num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(2.2rem, 2.4vw, 2.8rem); line-height: 1.1; letter-spacing: var(--tr-display); color: #fefefc; } .nm-tp .partner-stat-label { margin-top: 0.8rem; max-width: 18rem; font-size: var(--fs-caption); line-height: 1.45; color: var(--tp-on-dark-dim); } /* ---- The event stream panel (the hero's signature visual) ---------------- */ .nm-tp .nm-tp-stream { z-index: 2; flex: 0 1 46rem; position: relative; max-width: 46rem; } .nm-tp .nm-tp-stream__glow { position: absolute; inset: -16% -10% -10%; background: radial-gradient(58% 54% at 60% 34%, rgba(67, 128, 249, 0.4), rgba(67, 128, 249, 0) 70%); filter: blur(0.6rem); pointer-events: none; } .nm-tp .nm-tp-stream__panel { position: relative; border: 1px solid rgba(254, 254, 252, 0.12); border-radius: var(--v2-radius-inner); background: linear-gradient(180deg, rgba(39, 38, 50, 0.94), rgba(18, 17, 28, 0.94)); box-shadow: 0 3.2rem 8rem rgba(0, 0, 0, 0.45); backdrop-filter: blur(0.8rem); overflow: hidden; } .nm-tp .nm-tp-stream__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.8rem 2.4rem; border-bottom: 1px solid rgba(254, 254, 252, 0.09); } /* The bar reads as the partner's own endpoint taking the delivery. */ .nm-tp .nm-tp-stream__title { font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.02em; color: rgba(254, 254, 252, 0.72); } .nm-tp .nm-tp-stream__live { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.3rem 1rem; border-radius: 999px; background: rgba(67, 128, 249, 0.16); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--_apps---colors--secondary); } .nm-tp .nm-tp-stream__live i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tp-green); animation: nmTpPulse 2.4s ease-in-out infinite; } @keyframes nmTpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .nm-tp .nm-tp-stream__rows { display: grid; } .nm-tp .nm-tp-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.4rem 2.4rem; } .nm-tp .nm-tp-event + .nm-tp-event { border-top: 1px solid rgba(254, 254, 252, 0.07); } /* Rows are prepended by the feed script; each new one opens its own space and fades in, so the panel reads as a log receiving a delivery. */ .nm-tp .nm-tp-event--in { animation: nmTpEventIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes nmTpEventIn { from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; max-height: 8rem; padding-top: 1.4rem; padding-bottom: 1.4rem; } } .nm-tp .nm-tp-event__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--v2-blue-bright); box-shadow: 0 0 0 0.4rem rgba(67, 128, 249, 0.14); } .nm-tp .nm-tp-event__main { display: grid; gap: 0.4rem; min-width: 0; } /* The catalogue line under the event name — what the payload is actually about. */ .nm-tp .nm-tp-event__meta { font-size: var(--fs-caption); color: var(--tp-on-dark-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The partner endpoint's response, the thing a developer reads first. */ .nm-tp .nm-tp-event__res { display: inline-flex; align-items: baseline; gap: 0.8rem; font-family: "PT Mono", monospace; font-size: var(--fs-caption); white-space: nowrap; color: var(--tp-green); } .nm-tp .nm-tp-event__res i { font-style: normal; color: var(--tp-on-dark-dim); } .nm-tp .nm-tp-event--pre .nm-tp-event__dot { background: var(--tp-green); box-shadow: 0 0 0 0.4rem rgba(95, 208, 166, 0.14); } .nm-tp .nm-tp-event--low .nm-tp-event__dot { background: var(--red); box-shadow: 0 0 0 0.4rem rgba(238, 68, 46, 0.14); } .nm-tp .nm-tp-event--wish .nm-tp-event__dot { background: var(--wishlist--wishlist-color); box-shadow: 0 0 0 0.4rem rgba(155, 38, 240, 0.16); } .nm-tp .nm-tp-event__name { min-width: 0; font-family: "PT Mono", monospace; font-size: var(--fs-caption); color: rgba(254, 254, 252, 0.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nm-tp .nm-tp-stream__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid rgba(254, 254, 252, 0.09); } .nm-tp .nm-tp-stream__stat { padding: 1.8rem 2.4rem; } .nm-tp .nm-tp-stream__stat + .nm-tp-stream__stat { border-left: 1px solid rgba(254, 254, 252, 0.09); } .nm-tp .nm-tp-stream__stat-num { display: block; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); color: #fefefc; } .nm-tp .nm-tp-stream__stat-lbl { display: block; margin-top: 0.4rem; font-size: var(--fs-caption); color: var(--tp-on-dark-dim); } /* ========================================================================== 2. INTEGRATION FLOW — four events, one integration ========================================================================== */ .nm-tp .nm-tp-rail { width: 100%; } .nm-tp .nm-tp-rail__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tp-gap); counter-reset: nmtp; } .nm-tp .nm-tp-node { /* The rail sits on a tinted band, where --v2-line all but disappears — it is a hairline tuned for white. This one is a touch darker so the connection between the four dots actually reads. */ --tp-rail: rgba(18, 17, 28, 0.14); position: relative; min-width: 0; padding-top: 3.6rem; } /* The rail itself: a hairline through the dots, dimming after the last node. */ .nm-tp .nm-tp-node:before { content: ""; position: absolute; top: 0.7rem; left: 1.6rem; right: calc(var(--tp-gap) * -1); height: 1px; background: var(--tp-rail); } .nm-tp .nm-tp-node:last-child:before { right: 0; background: linear-gradient(90deg, var(--tp-rail), transparent); } .nm-tp .nm-tp-node:after { content: ""; position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; border: 1px solid var(--v2-blue); border-radius: 50%; background: #fff; } .nm-tp .nm-tp-node--live:after { background: var(--v2-blue); box-shadow: 0 0 0 0.5rem rgba(0, 59, 175, 0.1); } .nm-tp .nm-tp-node__num { display: block; margin-bottom: 1rem; font-size: var(--fs-caption); letter-spacing: 0.12em; color: var(--v2-blue); } .nm-tp .nm-tp-node__title { margin: 0; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } /* The event names the flow actually emits — a mono chip row under the rail. */ .nm-tp .nm-tp-events { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; width: 100%; margin-top: clamp(4rem, 5vw, 5.6rem); padding-top: clamp(3.2rem, 4vw, 4rem); border-top: 1px solid var(--tp-hairline); } .nm-tp .nm-tp-events__label { margin-right: 1.2rem; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); } .nm-tp .nm-tp-events code { padding: 0.6rem 1.4rem; border: 1px solid var(--tp-hairline); border-radius: 999px; background: #fff; font-family: "PT Mono", monospace; font-size: var(--fs-body-sm); color: var(--v2-blue); } /* ========================================================================== 3. DEVELOPER PLATFORM — dark band, the one code window on the page ========================================================================== */ .nm-tp .nm-tp-dev__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(4rem, 6vw, 8rem); /* The list column runs ~1.6× the code panel's height; `start` left a large void under the panel, so the two columns balance on their centres. */ align-items: center; width: 100%; } .nm-tp .nm-tp-dev__copy { min-width: 0; } .nm-tp .nm-tp-dev__copy .badge-hero { margin-bottom: 1.6rem; } .nm-tp .nm-tp-dev__copy .big-heading-n { max-width: 46rem; margin: 0 0 2rem; text-align: left; color: #fefefc; } .nm-tp .nm-tp-dev__list { margin: 3.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tp-hairline-dark); } .nm-tp .nm-tp-dev__item { padding: clamp(2rem, 2.2vw, 2.6rem) 0; border-bottom: 1px solid var(--tp-hairline-dark); } .nm-tp .nm-tp-dev__title { display: flex; align-items: baseline; gap: 1.2rem; margin: 0; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); color: #fefefc; } .nm-tp .nm-tp-dev__title span { font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.12em; color: var(--_apps---colors--secondary); } .nm-tp .nm-tp-dev__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; margin-top: 3.2rem; } /* ---- the code window ---------------------------------------------------- `min-width: 0` is load-bearing (REDESIGN-ROLLOUT.md §9b rule 21): a grid item defaults to `min-width: auto`, so the

's un-shrinkable content
   width would become the column's floor and push the page sideways. */
.nm-tp .nm-tp-code {
  min-width: 0;
  position: relative;
  border: 1px solid rgba(254, 254, 252, 0.12);
  border-radius: var(--v2-radius-inner);
  background: rgba(9, 9, 16, 0.72);
  box-shadow: 0 2.4rem 6.4rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.nm-tp .nm-tp-code__bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 2rem;
  border-bottom: 1px solid rgba(254, 254, 252, 0.09);
  background: rgba(254, 254, 252, 0.03);
}
.nm-tp .nm-tp-code__dots {
  display: flex;
  gap: 0.5rem;
}
.nm-tp .nm-tp-code__dots i {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: rgba(254, 254, 252, 0.18);
}
.nm-tp .nm-tp-code__file {
  font-family: "PT Mono", monospace;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--tp-on-dark-dim);
}
.nm-tp .nm-tp-code__body {
  margin: 0;
  padding: 2.4rem;
  overflow-x: auto;
  font-family: "PT Mono", monospace;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  color: rgba(254, 254, 252, 0.88);
  tab-size: 2;
}
.nm-tp .nm-tp-code__body .c-c { color: rgba(254, 254, 252, 0.38); }
.nm-tp .nm-tp-code__body .c-k { color: var(--_apps---colors--secondary); }
.nm-tp .nm-tp-code__body .c-s { color: var(--tp-green); }
.nm-tp .nm-tp-code__body .c-n { color: #f0bf7a; }
.nm-tp .nm-tp-code__split {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 2.4rem;
  border-top: 1px solid rgba(254, 254, 252, 0.09);
  border-bottom: 1px solid rgba(254, 254, 252, 0.09);
  background: rgba(254, 254, 252, 0.03);
  font-size: var(--fs-caption);
  color: var(--tp-on-dark-dim);
}
.nm-tp .nm-tp-code__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "PT Mono", monospace;   /* machine output */
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: rgba(95, 208, 166, 0.14);
  color: var(--tp-green);
}

/* ==========================================================================
   4. PARTNER BENEFITS — the bento
   ========================================================================== */
.nm-tp .nm-tp-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--tp-gap);
  width: 100%;
}
.nm-tp .nm-tp-cell {
  grid-column: span 2;
  display: flex;
  /* Five 2-col cells over a 6-col track leaves a hole on the last row, so the
     final two widen to 3 — same trick the enterprise bento uses. */
  flex-direction: column;
  min-width: 0;
  padding: var(--tp-cell-pad);
  border: 1px solid var(--tp-hairline);
  background: var(--web-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.nm-tp .nm-tp-cell:hover {
  transform: translateY(-4px);
  border-color: rgba(67, 128, 249, 0.35);
  box-shadow: 0 1.6rem 4rem rgba(18, 17, 28, 0.07);
}
.nm-tp .nm-tp-cell:nth-last-child(-n+2) {
  grid-column: span 3;
}
.nm-tp .nm-tp-cell--wide {
  grid-column: span 6;
  flex-direction: row;
  align-items: center;
  gap: clamp(3.2rem, 4vw, 6rem);
}
.nm-tp .nm-tp-cell--wide .nm-tp-cell__body {
  flex: 1 1 48%;
  min-width: 0;
}
.nm-tp .nm-tp-cell__icon {
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 2rem;
}
/* Icon top, title bottom — the cells carry no body copy any more, so without
   this they sit top-loaded with a block of dead space under them. */
.nm-tp .nm-tp-cell:not(.nm-tp-cell--wide) .nm-tp-cell__title {
  margin-top: auto;
  margin-bottom: 0;
}
.nm-tp .nm-tp-cell:not(.nm-tp-cell--wide) {
  min-height: 16rem;
}
.nm-tp .nm-tp-cell__title {
  margin: 0 0 1.2rem;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--_apps---colors--foreground);
}
.nm-tp .nm-tp-cell--wide .nm-tp-cell__title {
  font-size: var(--fs-h2);
}
.nm-tp .nm-tp-cell__copy {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--v2-muted);
}
.nm-tp .nm-tp-cell__copy strong {
  font-weight: 600;
  color: var(--_apps---colors--foreground);
}
.nm-tp .nm-tp-cell .nm-tp-link {
  margin-top: auto;
  padding-top: 2rem;
}
.nm-tp .nm-tp-cell--wide .nm-tp-link {
  margin-top: 2.4rem;
  padding-top: 0;
}

/* ---- The admin mockup inside the wide cell ------------------------------
   Shows the two placements a partner gets INSIDE the Notify Me! admin: the
   top banner slot and a news-feed row. Curved interior, per the radius rule. */
.nm-tp .nm-tp-admin {
  flex: 1 1 46%;
  min-width: 0;
  border: 1px solid var(--tp-hairline);
  border-radius: var(--v2-radius-inner);
  background: var(--grey);
  box-shadow: 0 1.6rem 4rem rgba(18, 17, 28, 0.08);
  overflow: hidden;
}
.nm-tp .nm-tp-admin__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid rgba(18, 17, 28, 0.07);
  background: #fff;
  font-size: var(--fs-caption);
  color: var(--v2-muted);
}
.nm-tp .nm-tp-admin__bar i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgba(18, 17, 28, 0.14);
}
.nm-tp .nm-tp-admin__body {
  display: grid;
  gap: 1.2rem;
  padding: 1.6rem;
}
.nm-tp .nm-tp-admin__slot {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 1px dashed rgba(0, 59, 175, 0.35);
  border-radius: 1rem;
  background: rgba(67, 128, 249, 0.07);
}
.nm-tp .nm-tp-admin__slot-tag {
  flex: none;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: var(--v2-blue);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fefefc;
}
.nm-tp .nm-tp-admin__slot span:last-child {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--v2-blue);
}
.nm-tp .nm-tp-admin__row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  border-radius: 1rem;
  background: #fff;
}
.nm-tp .nm-tp-admin__avatar {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, var(--v2-blue), var(--v2-blue-bright));
}
.nm-tp .nm-tp-admin__lines {
  flex: 1 1 auto;
  display: grid;
  gap: 0.6rem;
}
.nm-tp .nm-tp-admin__lines i {
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(18, 17, 28, 0.09);
}
.nm-tp .nm-tp-admin__lines i:first-child { width: 62%; }
.nm-tp .nm-tp-admin__lines i:last-child  { width: 88%; }
.nm-tp .nm-tp-admin__pill {
  flex: none;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background: var(--_apps---colors--foreground);
  font-size: 1.1rem;
  color: #fefefc;
}

/* ==========================================================================
   5. PARTNER DIRECTORY — the existing `.partner-card` component, in v2 form
   --------------------------------------------------------------------------
   `partner-cards.css` is unscoped and shared with /agencies, so every change
   here is scoped to `.nm-tp` rather than edited in that file.
   ========================================================================== */
.nm-tp .partner-cards-grid.tech-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tp-gap);
  width: 100%;
  max-width: none;
  margin: 0;
}
.nm-tp .partner-card {
  min-width: 0;
  height: auto;
  font-family: inherit;             /* the component hardcodes Inter */
  padding: clamp(2rem, 2.2vw, 2.6rem);
  border: 1px solid var(--tp-hairline);
  border-radius: 0;                 /* sharp shell */
  box-shadow: none;
  background: var(--web-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.nm-tp .partner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(67, 128, 249, 0.35);
  box-shadow: 0 1.6rem 4rem rgba(18, 17, 28, 0.07);
}
.nm-tp .partner-card__head {
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
}
.nm-tp .partner-card__logo {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0.4rem;
  border: 1px solid var(--tp-hairline);
  border-radius: 1rem;              /* curved interior */
  background: #fff;
  object-fit: contain;
}
.nm-tp .partner-card__name {
  margin: 0;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--_apps---colors--foreground);
}
.nm-tp .partner-card__loc {
  margin-top: 0.4rem;
  font-size: var(--fs-caption);
  text-transform: none;
  color: var(--v2-muted);
}
.nm-tp .partner-card__actions {
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}
.nm-tp .partner-card__visit {
  flex: none;
  font-weight: 500;
  font-size: var(--fs-body-sm);
  text-transform: none;
  color: var(--v2-blue);
}
.nm-tp .partner-card__visit svg {
  width: 1.3rem;
  height: 1.3rem;
}
.nm-tp .nm-tp-directory__foot {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(3.2rem, 4vw, 4.8rem);
}

/* ==========================================================================
   7. APPLY — the process rail + the application form, side by side
   ========================================================================== */
.nm-tp .nm-tp-apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(4rem, 5vw, 7rem);
  align-items: start;
  width: 100%;
}
.nm-tp .nm-tp-apply__rail,
.nm-tp .nm-tp-schedule__copy {
  min-width: 0;
}
.nm-tp .nm-tp-apply__rail .badge-hero {
  margin-bottom: 1.6rem;
}
.nm-tp .nm-tp-apply__rail .big-heading-n {
  margin: 0 0 1.6rem;
  text-align: left;
}
.nm-tp .nm-tp-steps {
  margin: clamp(3.2rem, 4vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tp-hairline);
}
.nm-tp .nm-tp-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--tp-hairline);
}
.nm-tp .nm-tp-steps li > span:first-child {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--v2-blue);
}
.nm-tp .nm-tp-steps b {
  display: block;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--_apps---colors--foreground);
}
.nm-tp .nm-tp-apply__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2.4rem;
  margin-top: 2.8rem;
  font-size: var(--fs-body-sm);
  color: var(--v2-muted);
}

/* ---- the form card ------------------------------------------------------
   Sharp outer shell, curved interior: the panel is square, every field and
   control inside it is a pill or a rounded tile. */
.nm-tp .partner-form-section {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(2.8rem, 3vw, 4rem);
  border: 1px solid var(--tp-hairline);
  background: var(--web-white);
  box-shadow: 0 2.4rem 6.4rem rgba(18, 17, 28, 0.06);
}
.nm-tp .partner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.nm-tp .partner-form-grid .full-width,
.nm-tp .partner-conditional-group {
  grid-column: 1 / -1;
}
.nm-tp .partner-conditional-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding: 2.4rem;
  border-radius: var(--v2-radius-inner);
  background: var(--grey);
}
.nm-tp .partner-conditional-group[hidden] {
  display: none;
}
.nm-tp .partner-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
/* Plain sans: a whole form set in monospace reads as a config file, and
   DESIGN-SYSTEM.md reserves the uppercase transform for tiny eyebrows. */
.nm-tp .partner-form-label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--v2-muted);
}
.nm-tp .partner-form-label .required {
  color: var(--red);
}
.nm-tp .partner-form-input,
.nm-tp .partner-form-select,
.nm-tp .partner-form-textarea {
  width: 100%;
  min-height: 4.8rem;
  margin: 0;
  padding: 1.2rem 1.8rem;
  border: 1px solid var(--tp-hairline);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--_apps---colors--foreground);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nm-tp .partner-form-textarea {
  min-height: 12rem;
  border-radius: var(--v2-radius-inner);
  resize: vertical;
}
.nm-tp .partner-form-input::placeholder,
.nm-tp .partner-form-textarea::placeholder {
  color: #9aa0ab;
}
.nm-tp .partner-form-input:focus,
.nm-tp .partner-form-select:focus,
.nm-tp .partner-form-textarea:focus {
  outline: none;
  border-color: var(--v2-blue);
  box-shadow: 0 0 0 3px rgba(0, 59, 175, 0.1);
}
.nm-tp .partner-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.nm-tp .partner-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--tp-hairline);
  border-radius: 999px;
  background: #fff;
  font-size: var(--fs-body-sm);
  color: var(--v2-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nm-tp .partner-checkbox-label:hover {
  border-color: var(--v2-blue);
  color: var(--v2-blue);
}
.nm-tp .partner-checkbox-label input[type="checkbox"],
.nm-tp .partner-consent-label input[type="checkbox"] {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  accent-color: var(--v2-blue);
}
.nm-tp .partner-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--v2-muted);
  cursor: pointer;
}
/* Webflow's base stylesheet sets `label { font-weight: 700 }`, which lands on
   the consent line and every service chip — measured at 700 in the rendered
   audit, not inferred. Body copy inside a control is still body copy. */
.nm-tp .partner-consent-label,
.nm-tp .partner-consent-label span,
.nm-tp .partner-checkbox-label,
.nm-tp .partner-checkbox-label span {
  font-weight: 400;
}
.nm-tp .partner-form-grid .blue-button {
  width: 100%;
  border-radius: 999px;
  font-size: var(--fs-body-lg);
}
.nm-tp .partner-form-success {
  display: none;
  padding: clamp(2.8rem, 3vw, 4rem);
  border: 1px solid rgba(95, 208, 166, 0.5);
  border-radius: var(--v2-radius-inner);
  background: rgba(95, 208, 166, 0.08);
  text-align: center;
}
.nm-tp .partner-form-success.visible {
  display: block;
}
.nm-tp .partner-form-success h3 {
  margin: 0 0 1rem;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--_apps---colors--foreground);
}
.nm-tp .partner-form-success p {
  margin: 0 0 2.4rem;
  font-size: var(--fs-body);
  color: var(--v2-muted);
}
.nm-tp .w-form-fail {
  margin-top: 1.6rem;
  padding: 1.4rem 1.8rem;
  border-radius: var(--v2-radius-inner);
  background: rgba(238, 68, 46, 0.08);
  font-size: var(--fs-body-sm);
  color: #a32718;
}

/* ==========================================================================
   8. SCHEDULE — the Calendly split
   ========================================================================== */
.nm-tp .nm-tp-schedule__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3.2rem, 4vw, 5.6rem);
  align-items: center;
  width: 100%;
}
.nm-tp .nm-tp-schedule__copy .badge-hero {
  margin-bottom: 1.6rem;
}
.nm-tp .nm-tp-schedule__copy .badge-hero:before {
  display: none;
}
.nm-tp .nm-tp-schedule__copy .big-heading-n {
  margin: 0 0 1.6rem;
  text-align: left;
}
.nm-tp .nm-tp-schedule__embed {
  min-width: 0;
  border: 1px solid var(--tp-hairline);
  border-radius: var(--v2-radius-inner);
  background: #fff;
  overflow: hidden;
}
.nm-tp .nm-tp-schedule__embed .calendly-inline-widget {
  min-width: 0;
}

/* ==========================================================================
   9. "PICK YOUR PATH" — the dark cross-link band
   ========================================================================== */
.nm-tp .nm-tp-paths .nm-tp-intro .big-heading-n {
  color: #fefefc;
}
.nm-tp .nm-tp-paths .grid-container-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tp-gap);
  width: 100%;
  margin: 0;
}
/* Two cross-links, not three — centred and capped so they don't stretch
   full-bleed now that the redundant "you are on this page" card is gone. */
.nm-tp .nm-tp-paths .nm-tp-paths__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 74rem;
  margin: 0 auto;
}
.nm-tp .ready-to-become-partnerz-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: var(--tp-cell-pad);
  border: 1px solid var(--tp-hairline-dark);
  border-radius: 0;                 /* sharp shell */
  background: rgba(254, 254, 252, 0.04);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.nm-tp .ready-to-become-partnerz-box:hover {
  transform: translateY(-4px);
  border-color: rgba(67, 128, 249, 0.45);
  background: rgba(254, 254, 252, 0.06);
}
.nm-tp .ready-to-become-partnerz-box .image-24 {
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 0 2rem;
}
.nm-tp .ready-to-become-partnerz-box .partnerz-box-title {
  margin: 0 0 1.2rem;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: #fefefc;
}
.nm-tp .ready-to-become-partnerz-box .partnerz-desc-box {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--tp-on-dark);
}
/* The cross-link is real navigation here, so it must stay visible — the
   global stylesheet hides it and locks the card height. */
.nm-tp .ready-to-become-partnerz-box .icon-box-partnerz-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 2.4rem;
  text-decoration: none;
}
.nm-tp .ready-to-become-partnerz-box .text-block-10 {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--_apps---colors--secondary);
}
.nm-tp .ready-to-become-partnerz-box .image-10 {
  width: 1.6rem;
  transition: transform 0.2s ease;
}
.nm-tp .ready-to-become-partnerz-box:hover .image-10 {
  transform: translateX(3px);
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .nm-tp .nm-tp-rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The rail hairline only reads as one line across a single row. */
  .nm-tp .nm-tp-node:nth-child(2n):before { right: 0; background: linear-gradient(90deg, var(--tp-rail), transparent); }

  .nm-tp .nm-tp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Both selectors are required — see the note in the 767px block. */
  .nm-tp .nm-tp-cell,
  .nm-tp .nm-tp-cell:nth-last-child(-n+2) { grid-column: span 1; }
  .nm-tp .nm-tp-cell--wide { grid-column: span 2; }

  .nm-tp .partner-cards-grid.tech-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-tp .nm-tp-paths .grid-container-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .nm-tp .nm-tp-hero {
    flex-flow: column;
    align-items: flex-start;
  }
  .nm-tp .nm-tp-hero__copy {
    flex: none;
    max-width: none;
  }
  .nm-tp .nm-tp-stream {
    flex: none;
    width: 100%;
    max-width: 52rem;
    margin-top: clamp(4rem, 6vw, 6rem);
  }

  .nm-tp .nm-tp-dev__grid,
  .nm-tp .nm-tp-apply__grid,
  .nm-tp .nm-tp-schedule__grid { grid-template-columns: minmax(0, 1fr); }
  .nm-tp .nm-tp-dev__copy .big-heading-n { max-width: none; }
}

@media (max-width: 767px) {
  .nm-tp .partner-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-tp .partner-stat {
    padding: 1.8rem 1.6rem 0;
  }
  .nm-tp .partner-stat:nth-child(2n+1) { padding-left: 0; }
  .nm-tp .partner-stat:nth-child(2n) { border-right: 0; padding-right: 0; }
  .nm-tp .partner-stat:nth-child(n+3) { border-top: 1px solid var(--tp-hairline-dark); padding-top: 1.8rem; }
  .nm-tp .partner-stat-label { max-width: none; }

  .nm-tp .nm-tp-rail__track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Stacked: the rail becomes a vertical spine down the left edge. */
  .nm-tp .nm-tp-node { padding: 0 0 3.2rem 3.2rem; }
  .nm-tp .nm-tp-node:before {
    top: 1.5rem;
    bottom: 0;
    left: 0.7rem;
    right: auto;
    width: 1px;
    height: auto;
  }
  .nm-tp .nm-tp-node:last-child { padding-bottom: 0; }
  .nm-tp .nm-tp-node:last-child:before {
    background: linear-gradient(180deg, var(--tp-rail), transparent);
  }
  .nm-tp .nm-tp-node__num { margin-bottom: 0.6rem; }

  .nm-tp .nm-tp-bento,
  .nm-tp .partner-cards-grid.tech-cards-grid,
  .nm-tp .nm-tp-paths .grid-container-3 { grid-template-columns: minmax(0, 1fr); }
  /* The `:nth-last-child(-n+2)` span-3 rule outranks a bare `.nm-tp-cell`
     override, so it has to be named here too — without it the last two cells
     kept spanning 3 tracks in a one-column grid and grid invented implicit
     columns for them. That shipped a visibly broken bento at 390px. */
  .nm-tp .nm-tp-cell,
  .nm-tp .nm-tp-cell:nth-last-child(-n+2),
  .nm-tp .nm-tp-cell--wide { grid-column: span 1; }
  .nm-tp .nm-tp-cell--wide { flex-direction: column; align-items: stretch; }
  .nm-tp .nm-tp-admin { margin-top: 2.8rem; }

  .nm-tp .nm-tp-stream__foot { grid-template-columns: minmax(0, 1fr); }
  .nm-tp .nm-tp-stream__stat + .nm-tp-stream__stat {
    border-left: 0;
    border-top: 1px solid rgba(254, 254, 252, 0.09);
  }

  .nm-tp .partner-form-grid,
  .nm-tp .partner-conditional-group { grid-template-columns: minmax(0, 1fr); }
  .nm-tp .partner-form-section { padding: 2.4rem; }

  /* Narrow rows drop the latency, never the status code. */
  .nm-tp .nm-tp-event { padding-left: 1.8rem; padding-right: 1.8rem; }
  .nm-tp .nm-tp-event__res i { display: none; }
}

/* Motion is an enhancement, never a gate. */
@media (prefers-reduced-motion: reduce) {
  :root:has(body.nm-tp) {
    scroll-behavior: auto;
  }
  .nm-tp .nm-tp-stream__live i,
  .nm-tp .nm-tp-event--in {
    animation: none;
  }
  .nm-tp .nm-tp-cell,
  .nm-tp .partner-card,
  .nm-tp .ready-to-become-partnerz-box,
  .nm-tp .nm-tp-link:after,
  .nm-tp .ready-to-become-partnerz-box .image-10 {
    transition: none;
  }
}