/* =====================================================================
   pg-integrations2.css: extras for the Integrations hub + 10 app pages on tpl.css.
   Loads after tpl.css and section-footer.css. Everything is namespaced .pgi-*.
   Template candidates (reusable): .pgi-steps (numbered step cards), .pgi-nevers (cross-marked tick list),
   .pgi-chips (linked logo chips), .pgi-logo (brand tile), .pgi-hub (centred card grid), .tp-row img / .tp-win-end img (PNG marks in the mock).
   ===================================================================== */

/* ---------- Brand logo tile ---------- */
.pgi-logo {
  display: grid; place-items: center; flex: none;
  --t: 56px; width: var(--t); height: var(--t); border-radius: 26%;
  background: #fff; border: 1px solid var(--tp-line); overflow: hidden;
}
.pgi-logo svg, .pgi-logo img { width: calc(var(--t) * 0.58); height: calc(var(--t) * 0.58); object-fit: contain; display: block; overflow: visible; }
.pgi-logo img.otter { transform: scale(1.55); }          /* the official Otter icon file carries wide padding */
.pgi-logo img.fathom { width: var(--t); height: var(--t); }
.pgi-logo.pgi-md { --t: 64px; margin-bottom: 8px; background: var(--tp-soft); }
.pgi-logo.pgi-xs { --t: 34px; border-radius: 28%; border: 0; background: transparent; }

/* ---------- Mock: PNG marks (Fireflies, Otter, Fathom) ---------- */
.tp-row-m img { width: 18px; height: 18px; object-fit: contain; }
.tp-win-end img, .tp-rail-on img { width: 20px; height: 20px; object-fit: contain; }
.tp-win-end img.otter, .tp-rail-on img.otter { transform: scale(1.55); }
.tp-win-end img.fathom, .tp-rail-on img.fathom { border-radius: 5px; }
.tp-rail > span:not(.tp-rail-on) { width: 40px; height: 40px; display: grid; place-items: center; }
.tp-rail .tp-rail-on svg, .tp-rail .tp-rail-on img { width: 22px; height: 22px; }
.tp-win-end { gap: 8px; }
.pgi-mock .tp-av.pgi-av-img { background: #fff; border: 1px solid var(--tp-line); overflow: hidden; }
.pgi-mock .tp-av img { width: 22px; height: 22px; object-fit: contain; }
.pgi-mock .tp-av img.otter { transform: scale(1.55); }
.pgi-mock .tp-av img.fathom { width: 100%; height: 100%; }
.pgi-mock .tp-list-foot { margin-top: auto; }
.pgi-mock .tp-pane-draft { line-height: 1.55; }

/* ---------- "What it does": larger ticks ---------- */
.pgi-does { max-width: 760px; margin: 0 auto; }
.pgi-does li { font-size: 17.5px; line-height: 1.5; margin-bottom: 18px; color: var(--tp-ink); }
.pgi-does li:last-child { margin-bottom: 0; }

/* ---------- Reads / never cards (borderless) ---------- */
.pgi-rn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.pgi-rn-card { background: #fff; border-radius: 24px; padding: 40px 40px 36px; }
.pgi-rn-tile {
  width: 64px; height: 64px; border-radius: 18px; background: #E6F1FC; color: var(--blue);
  display: grid; place-items: center; margin-bottom: 24px;
}
.pgi-rn-tile svg { width: 30px; height: 30px; }
.pgi-rn-tile-no { background: #E8EEEC; color: var(--tp-ink); }
.pgi-rn-card .tp-h3 { margin-bottom: 20px; }
.pgi-rn-card .tp-ticks { margin: 0; }
.pgi-rn-card .tp-ticks li { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.pgi-rn-card .tp-ticks li:last-child { margin-bottom: 0; }
/* cross marks for the "never" list */
.pgi-nevers li::before {
  width: 14px; height: 14px; border: 0; transform: none; top: .36em; left: 2px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--tp-ink) calc(50% - 1px), var(--tp-ink) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--tp-ink) calc(50% - 1px), var(--tp-ink) calc(50% + 1px), transparent calc(50% + 1px));
}
.pgi-note { max-width: 760px; margin: 32px auto 0; }
.pgi-note p { margin: 0; }
.pgi-note .tp-note-label { margin: 0 0 8px; }
.pgi-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Connect steps ---------- */
.pgi-steps { counter-reset: pgi; list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgi-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgi-steps li {
  counter-increment: pgi; position: relative;
  background: var(--tp-tint); border-radius: 24px; padding: 28px 28px 30px;
  font-size: 16.5px; line-height: 1.5; color: var(--tp-muted);
}
.pgi-steps li::before {
  content: counter(pgi); display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 18px; border-radius: 12px;
  background: var(--tp-ink); color: #fff; font-size: 17px; font-weight: 600; line-height: 1;
}
.pgi-steps li strong { color: var(--tp-ink); font-weight: 600; }
.pgi-steps + .tp-note { margin-top: 32px; }
.pgi-start { margin-top: 40px; text-align: center; }
.pgi-start .tp-ctas { margin-top: 0; }

/* ---------- Feature cards ---------- */
.pgi-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pgi-feats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pgi-feats-1 { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin: 0 auto; }
.pgi-feats > li { display: flex; }
a.pgi-feat { display: block; width: 100%; color: inherit; transition: transform .3s ease; }
a.pgi-feat:hover { transform: translateY(-3px); }
a.pgi-feat:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 12px; }
.pgi-feat .tp-tile { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.pgi-feat .tp-tile svg { width: 25%; height: auto; color: var(--blue); }
.pgi-feat .tp-tile-cyan svg { color: #0AA6DC; }
.pgi-feat .tp-tile-mint svg { color: #2E8B57; }
.pgi-feats-4 .tp-h3 { font-size: 22px; }
.pgi-more { display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 500; }
.pgi-more::after { content: " \2192"; }
a.pgi-feat:hover .pgi-more, a.pgi-hub-card:hover .pgi-more { color: #005ec4; }
.tp-tile svg { color: var(--blue); }

/* ---------- Works-with chips ---------- */
.pgi-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pgi-chip {
  display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 18px;
  background: #fff; border: 1px solid var(--tp-line); border-radius: 999px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--tp-ink);
  transition: border-color .3s ease, transform .3s ease;
}
.pgi-chip:hover { border-color: var(--blue); transform: translateY(-2px); }
.pgi-chip:focus-visible, .pgi-hub-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Hub ---------- */
.pgi-group { margin: 64px 0 28px; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--tp-ink); scroll-margin-top: 96px; }
.pgi-group:first-of-type { margin-top: 0; }
.pgi-group-note { margin: -14px 0 28px; text-align: center; font-size: 16px; color: var(--tp-muted); }
.pgi-hub { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.pgi-hub > li { width: calc((100% - 48px) / 3); display: flex; }
.pgi-hub-card { width: 100%; min-height: 0; padding: 32px 24px 28px; gap: 4px; }
.pgi-hub-card .tp-vs-name { margin: 0; font-size: 22px; }
.pgi-hub-card .tp-vs-desc { margin-top: 4px; }
.pgi-hub-card .pgi-more { margin-top: auto; padding-top: 14px; }
.pgi-hub-card.is-static { cursor: default; }
.pgi-hub-card.is-static:hover { border-color: var(--tp-line); transform: none; box-shadow: none; }
.pgi-hub-card .pgi-soon { margin: 10px 0 0; }
.tp-vs-card .tp-vs-name { text-align: center; }

/* ---------- Trademark line under the footer (same ground as the footer) ---------- */
.pgi-tm {
  margin: 0; padding: 0 24px 28px; background: var(--blue); text-align: center;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.82);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .pgi-rn { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .pgi-steps, .pgi-steps-3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .pgi-feats, .pgi-feats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .pgi-feats-1 { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
  .pgi-feat .tp-tile { aspect-ratio: 16 / 10; }
  .pgi-feat .tp-tile svg { width: 18%; }
  .pgi-hub > li { width: calc((100% - 24px) / 2); }
}
@media (max-width: 700px) {
  .pgi-rn-card { padding: 28px 22px 26px; }
  .pgi-does li { font-size: 16.5px; }
  .pgi-steps li { padding: 22px 22px 24px; }
  .pgi-feats, .pgi-feats-4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .pgi-group { margin-top: 48px; font-size: 23px; }
  .pgi-hub > li { width: 100%; }
  .pgi-chip { height: 54px; font-size: 16px; padding: 0 20px 0 14px; }
  .pgi-tm { padding: 0 20px 24px; }
  .pgi-start .tp-ctas { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  a.pgi-feat, .pgi-chip { transition: none; }
  a.pgi-feat:hover, .pgi-chip:hover { transform: none; }
}

/* mock chip b sits below the rail so it never hides a row; stacked white sections breathe less */
.pgi-mock .tp-float-b { top: auto; bottom: 40px; }
.tp-sheet + .tp-white { padding-top: 32px; }
.pgi-mock .tp-float-a { top: -22px; right: 56px; }
.pgi-mock .tp-float-c { bottom: 28px; }
@media (max-width: 1279px) { .pgi-mock .tp-float-a { right: 24px; } }