/* ═══════════════════════════════════════════════════════════════
   /collaboration/ — working with people who do not have a seat.

   Loaded automatically by the slug rule in functions.php (a page whose
   slug is "collaboration" pulls collaboration.css + collaboration.js).

   Everything except the lightbox is scoped under .collab-page. Class
   names like .wrap, .eyebrow and .lede are shared vocabulary on this
   site but are defined per page (vs.css and blog.css each have their
   own), so scoping keeps this page's copy of them off everything else.
   The lightbox is deliberately NOT scoped: it is a single element that
   the script moves nothing into, and its class names are unique.

   Tokens come from main.css. Only --img is local, because main.css has
   no product-screenshot shadow.
   ═══════════════════════════════════════════════════════════════ */

.collab-page { --img: 0 18px 50px rgba(0, 0, 0, .09); }

.collab-page .wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.collab-page .eyebrow {
  font-family: var(--font);
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1;
}
.collab-page .lede { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--ink-2); }
.collab-page .trustline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.collab-page .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22, 163, 74, .13); }
.collab-page h1, .collab-page h2, .collab-page h3 { font-family: var(--font); }
.collab-page figure { margin: 0; }

/* ── product shot: real screenshot, with a caption ───────────── */
.collab-page .shot img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line);
  box-shadow: var(--img); background: #fff;
}
.collab-page .shot.tight img { max-width: 620px; margin: 0 auto; }
.collab-page .shot figcaption { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink-3); text-align: center; }

/* ── HERO ────────────────────────────────────────────────────── */
.collab-page .hero { padding: var(--hero-pad-top) var(--hero-pad-x) 20px; text-align: center; }
.collab-page .hero h1 { font-size: var(--hero-h1-size); letter-spacing: -.045em; line-height: 1.05; margin: 16px 0 18px; }
.collab-page .hero .lede { max-width: 42em; margin: 0 auto; }
.collab-page .hero-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.collab-page .hero-shot { margin-top: 56px; }

/* ── TWO KINDS OF PEOPLE ─────────────────────────────────────── */
.collab-page .circles { padding: 80px 0; }
.collab-page .sec-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.collab-page .sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.035em; line-height: 1.12; margin: 14px 0 14px; }
.collab-page .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.collab-page .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; }
.collab-page .card h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 8px; }
.collab-page .card p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.collab-page .card ul { list-style: none; margin-top: 16px; padding: 0; }
.collab-page .card li { font-size: 13.5px; color: var(--ink-2); padding: 7px 0 7px 22px; position: relative; border-top: 1px solid #f1f1f1; }
.collab-page .card li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-radius: 50%; }
.collab-page .card-team li::before { background: var(--blue); }
.collab-page .card-guests li::before { background: var(--amber); }
.collab-page .card-cost { margin-top: 18px; font: 600 13px/1 var(--body); color: var(--green); }

/* ── FEATURE BLOCKS: copy above, evidence below ──────────────── */
.collab-page .block { padding: 72px 0; border-top: 1px solid var(--line); }
.collab-page .block-copy { max-width: 46em; margin-bottom: 36px; }
.collab-page .block h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.035em; line-height: 1.14; margin: 14px 0 16px; }
.collab-page .block p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.collab-page .block .vs {
  margin-top: 18px; font-size: 13.5px; color: var(--ink-2);
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
  padding: 12px 14px; display: inline-block;
}
.collab-page .block .vs b { color: var(--ink); }
.collab-page .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* ── GUEST COST STRIP ────────────────────────────────────────── */
.collab-page .cost { padding: 72px 0; border-top: 1px solid var(--line); }
.collab-page .cost-table { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.collab-page .cost-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; padding: 16px 22px; font-size: 14.5px; }
.collab-page .cost-row + .cost-row { border-top: 1px solid var(--line); }
.collab-page .cost-row.head { background: #fcfcfc; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.collab-page .cost-row.gript { background: #f0fdf4; font-weight: 600; }
.collab-page .cost-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.collab-page .faq { padding: 72px 0; border-top: 1px solid var(--line); }
.collab-page .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.collab-page .faq-item + .faq-item { margin-top: 10px; }
.collab-page .faq-item h3 { font-size: 16px; letter-spacing: -.02em; margin-bottom: 8px; }
.collab-page .faq-item p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* ── CLOSING CTA ─────────────────────────────────────────────────
   Named .collab-cta, NOT .decide-cta: main.css owns .decide-cta for the
   shared "Trying is how you decide" block used by /vs/, /use-cases/ and
   /pricing/, and this page has its own approved copy. Reusing the class
   would inherit that component's layout and fight it. */
.collab-page .collab-cta {
  width: min(1000px, calc(100% - 40px)); margin: 56px auto 90px;
  padding: 56px 24px 44px; text-align: center;
  background: #f0f4ff; border: 1px solid #c7d7fd; border-radius: 16px;
}
.collab-page .collab-cta h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.04em; line-height: 1.16; }
.collab-page .collab-cta .big { display: block; background: linear-gradient(transparent 62%, #fde68a 62%); padding: 0 .12em; }
.collab-page .collab-cta p { margin-top: 18px; font-size: 16px; color: var(--ink-2); line-height: 1.8; }
.collab-page .collab-cta .btn-dark { margin-top: 26px; }
.collab-page .collab-cta small { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-3); }

@media (max-width: 900px) {
  .collab-page .grid-2,
  .collab-page .two-up { grid-template-columns: 1fr; }
}

/* ═══════════════ CLICK TO ENLARGE ═══════════════
   The shots are detailed product screenshots; at column width the small
   print is not readable, so every one of them opens full size. On a phone
   "full size" is still only phone-wide, so the overlay also takes pinch,
   drag and double-tap, which is where the detail actually becomes legible.
   Enter AND exit are both animated: the overlay stays in the DOM for the
   length of the exit transition rather than vanishing on close. */
.collab-page .shot img { cursor: zoom-in; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.collab-page .shot { position: relative; }
.collab-page .shot img:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgba(0, 0, 0, .14); }
.collab-page .shot-hint {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(17, 17, 17, .78); color: #fff;
  font: 600 11px/1 var(--body); letter-spacing: .01em;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.collab-page .shot:hover .shot-hint,
.collab-page .shot img:focus-visible + .shot-hint { opacity: 1; transform: none; }

.lb {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: clamp(14px, 3.5vw, 48px);
  background: rgba(17, 17, 17, .84);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
/* `display: flex` above beats the [hidden] user-agent rule, so say it explicitly:
   without this the overlay sits over the whole page and eats every click. */
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
/* The script reparents this element to <body> to escape the stacking context on
   <main> (see the comment in assets/js/collaboration.js). That makes it a body
   child, so main.css:58 hands it the page-enter fade, and `both` fill leaves the
   animation's final `opacity: 1` applied for good, which outranks both the
   declared opacity above and the transition. The overlay owns its own fade, so
   the inherited one is switched off. `!important` is needed because that
   selector carries an id's specificity via :not(#nav); main.css:120 overrides
   the same rule the same way for the cookie banner. */
.lb { animation: none !important; }

/* The stage is the pan/zoom viewport. `touch-action: none` hands every touch to
   our own gesture code, so the browser does not also scroll or zoom the page
   underneath while somebody is pinching the picture. */
.lb-stage {
  position: relative; overflow: hidden;
  width: 100%; flex: 1 1 auto; min-height: 0;
  touch-action: none; cursor: zoom-out;
  opacity: 0; transform: scale(.97) translateY(8px);
  transition: opacity .28s var(--ease), transform .3s var(--ease);
}
.lb.is-open .lb-stage { opacity: 1; transform: none; }
.lb-img {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0; will-change: transform;
  max-width: none; max-height: none;
  border-radius: 12px; background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  cursor: default;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.lb-stage.is-zoomed { cursor: grab; }
.lb-stage.is-panning { cursor: grabbing; }
.lb-cap {
  flex: 0 0 auto; text-align: center;
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .74);
  opacity: 0; transition: opacity .28s var(--ease);
}
.lb.is-open .lb-cap { opacity: 1; }
.lb-hint-zoom { display: none; }
@media (hover: none) and (pointer: coarse) {
  /* Touch only: say how to get closer, once the picture is open. */
  .lb-hint-zoom { display: inline; color: rgba(255, 255, 255, .5); }
}
.lb-close {
  position: fixed; top: 16px; right: 18px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  font: 400 22px/1 var(--body);
  transition: background .2s var(--ease);
}
.lb-close:hover { background: rgba(255, 255, 255, .22); }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb-stage, .lb-cap,
  .collab-page .shot img, .collab-page .shot-hint { transition: none; }
}