/* Small live-site changes Stu asked for after the import. Loaded after live.css. */

/* Checks-to-inbox diagram: no spin. The E stays in the AI spectrum with a slow shimmer
   travelling through it, and gives a gentle pulse when an item lands (Stu, 20 Oct). */
.wf-core .wf-e { opacity: 0; animation: none !important; }
.wf-core .wf-spin { display: none; }
.wf-core::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: linear-gradient(110deg, #7fb2ff 0%, #8b74ff 22%, #e8559a 40%, #f6844b 52%, #fff4ec 58%, #f6844b 64%, #e8559a 76%, #8b74ff 90%, #7fb2ff 100%);
  background-size: 300% 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 35 34'%3E%3Cpath fill-rule='evenodd' d='M0.228516 12.605V30H30.8916V24.2013H6.36112V18.4038H30.8916V12.605H0.228516ZM0.228516 6.30252H30.8916V0H0.228516V6.30252Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 35 34'%3E%3Cpath fill-rule='evenodd' d='M0.228516 12.605V30H30.8916V24.2013H6.36112V18.4038H30.8916V12.605H0.228516ZM0.228516 6.30252H30.8916V0H0.228516V6.30252Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: tw-shimmer 4.5s linear infinite;
}
.wf-core.work { animation: tw-pulse .9s ease; }
@keyframes tw-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes tw-pulse { 0%, 100% { box-shadow: 0 24px 50px -24px rgba(101,72,232,.5), 0 0 0 1px #ebe9e3; } 45% { box-shadow: 0 24px 60px -18px rgba(139,116,255,.75), 0 0 0 4px rgba(139,116,255,.14); } }
@media (prefers-reduced-motion: reduce) { .wf-core::after, .wf-core.work { animation: none; } }

/* Marketplace: provider logos over the initials or country code (Stu, 20 Oct).
   If a logo fails to load the image removes itself and the initials show. */
.pg-li .cc { position: relative; overflow: hidden; }
.pg-li .cc img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 6px; object-fit: contain; background: #fff; border-radius: inherit; box-shadow: inset 0 0 0 1px #ebe9e3; }
.ml-logo { display: inline-grid; place-items: center; width: 72px; height: 72px; margin: 18px 0 18px; padding: 12px; box-sizing: border-box; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px -22px rgba(20,12,60,.35), 0 0 0 1px #ebe9e3; }
.ml-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hero-tag + .ml-logo { display: grid; }
@media (max-width: 640px) { .ml-logo { width: 60px; height: 60px; padding: 10px; border-radius: 15px; } }

/* Closing card on every page as on the home page (Stu, 20 Oct): no timeline, and it opens
   from an inset card to full width as it scrolls in (cta.js). Copied from stage.css, which
   only some pages load. */
main > #contact { background: #fff; border-top: 0; overflow: visible; }
main > #contact::before { display: none; }
main > #contact > .wrap { border-inline-color: transparent; background-image: none; max-width: none; }
main > #contact > .wrap.event { display: block; padding-bottom: 0; }
main > #contact > .wrap.event::before, main > #contact > .wrap.event::after, main > #contact .cu-tr, main > #contact .stamp { display: none; }
main > #contact .event > .body { padding: 0; margin: 0; }
#contact .cta { --cx: 0px; --cr: 0px; margin-inline: calc(50% - 50vw); border-radius: 0; clip-path: inset(0 var(--cx) round var(--cr) var(--cr) 0 0); box-shadow: none; }
#contact .cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: -1; pointer-events: none; background: linear-gradient(transparent, rgba(30,22,110,.35)); }
#contact .cta::before { content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: 0; inset-block-start: auto; height: 2px; z-index: 5; opacity: 1; mask: none; -webkit-mask: none; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.7) 20%, rgba(255,255,255,.7) 80%, rgba(255,255,255,.15)); }
main:has(> #contact) + footer, body:has(#contact .cta) footer { margin-top: 0; }

/* Phones: breadcrumbs and source links were 12 to 17px tall to tap. Grow the hit area, not the look. */
@media (max-width: 860px) {
  .pg-crumb a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .pg-sources li a { display: inline-block; padding: 4px 0; }
}

/* Phones, after the Notion/Attio/ClickUp review (20 Oct) */
@media (max-width: 640px) {
  /* Book a demo: the form comes straight after the headline, the agenda after it (Notion and Attio ask first) */
  .pg-split.pg-demo { display: flex; flex-direction: column; gap: 0; }
  .pg-split.pg-demo > div:first-child { display: contents; }
  .pg-split.pg-demo .hero-tag { align-self: flex-start; }
  .pg-split.pg-demo .pg-form { order: 1; margin-top: 28px; }
  .pg-split.pg-demo .pg-agenda { order: 2; margin-top: 36px; }
  /* case tabs: one row you swipe, like Attio's tab strip, instead of wrapping to a second line */
  .cs-tabs .cs-bar { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
  .cs-tabs .cs-bar::-webkit-scrollbar { display: none; }
  .cs-tabs .cs-bar button { flex: none; scroll-snap-align: start; }
}

/* ---------- Phone readability pass (Attio/Notion patterns), 20 Oct ----------
   Phones only. Attio, Notion and Linear set phone body copy at 16 to 17px with
   generous leading, keep secondary text at real contrast (4.5:1 or better), and
   give display type a little more air than on a desktop. */
@media (max-width: 640px) {
  /* Tertiary grey: #9ca0a7 is 2.6:1 on white, too faint for meta lines, captions,
     eyebrows, breadcrumbs and the footer on a phone in daylight. 4.8:1 here.
     Dark sections set their own --ink-3, so they are untouched. */
  :root { --ink-3: #6e727a; }

  /* Display type: -0.05em tracking at 1.0 leading made letters touch at 42px
     ("legwork", "customer") and stacked lines collide. Still tight, but legible. */
  .hero h1, .zf-hero h1 { line-height: 1.06; letter-spacing: -.035em; }
  .h2 { line-height: 1.08; letter-spacing: -.032em; }
  .zf-h2 { line-height: 1.1; letter-spacing: -.032em; }
  .cta-h { line-height: 1.06; letter-spacing: -.035em; }
  .ob-h, .ob-h.ob-big { line-height: 1.06; letter-spacing: -.035em; }
  .pg-prose h2 { line-height: 1.15; letter-spacing: -.025em; }
  .pg-det h3, .zf-card h3, .ft-row h3, .pg-feature h2, .pg-route h3 { line-height: 1.15; letter-spacing: -.025em; }

  /* Meta lines (read time, date, kind) wrapped onto lines with 1.0 leading and overlapped */
  .pg-meta { line-height: 1.5; }

  /* Secondary lines under list items: 13 to 14px in the faint grey. Body-adjacent size, secondary ink */
  .ft-cat-l small { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
  .ft-cat-l b { font-size: 16px; }
  .pg-li small { font-size: 14px; line-height: 1.45; }
  .wl-card small { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
  .cm-card small { font-size: 15px; line-height: 1.5; }
  .fl-cap { font-size: 13.5px; line-height: 1.45; }
  .pg-arts p { font-size: 15px; line-height: 1.55; }
  .zf-extras span:last-child { font-size: 15px; line-height: 1.5; }

  /* Marketplace categories: two 160px columns gave 20-character lines of 14px text.
     One column, icon on the left, like Attio's feature lists */
  .pg-grid.cats { grid-template-columns: minmax(0, 1fr); }
  .pg-grid.cats > a { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px 16px; border-right: 0; }
  .pg-grid.cats > a > .ico { grid-row: 1 / span 3; }
  .pg-grid.cats h3 { font-size: 18px; line-height: 1.25; }
  .pg-grid.cats p { font-size: 15px; line-height: 1.5; }
  .pg-grid.cats .go { padding-top: 2px; }

  /* Panels nested inside cards lost 70px of line length to stacked padding */
  .pg-card.pg-det { padding-inline: 16px; }
  .pg-two > div { padding: 16px 14px; }

  /* Zenoo AI (dark): mono 12.5px descriptions in #7d7899 under the stats, and 14px card
     copy. Reading text goes to Inter at body-adjacent size; labels stay mono */
  .za-stats small { font: 400 14px/1.5 Inter, sans-serif; color: #a6a1c4; }
  .za-card > p:not(.za-ck) { font-size: 15.5px; line-height: 1.6; color: #b9b5d3; }
  .za-ag-list b { color: #857fa6; }
  .za-cap { color: #7d7899; }
}