/* What it connects to (/integrations/): page styles only.
   Tokens, type, nav (with the current page marker), buttons, footer, the hero headline block, the
   security frame, the climbing steps and the final call to action all come from the shared site CSS
   (/site/css/). */

/* ---------- Letter tiles: a program's initials on a house colour, only where we store no logo ---------- */
.sq {
  flex: none;
  display: inline-grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 96;
}
.t-cobalt { background: var(--cobalt); color: #fff; }
.t-sun { background: var(--sun); color: var(--ink); }
.t-ink { background: var(--ink); color: var(--paper); }
.t-paper { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--paper-3); }

/* ---------- Real logos: our stored copy in logos/, always on a white rounded square so every brand
   reads on any background. The tile keeps its letter tile's shape and size; object-fit keeps a wide
   or tall mark whole and centred, never stretched. ---------- */
.sq-logo { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 18, 14, .14); }
.sq-logo img,
.int-hero .app-sq img { flex: none; object-fit: contain; }
.int-chat-note .sq-logo img { width: 14px; height: 14px; }
.progs .sq-logo img { width: 18px; height: 18px; }
.ctile .sq-logo img { width: 28px; height: 28px; }
.int-hero .app-sq img { width: 34px; height: 34px; }
/* The program the agent is working in keeps its sunshine tile; the logo sits on a white chip inside it */
.int-hero .app.is-live .app-sq img { width: 42px; height: 42px; padding: 5px; border-radius: 12px; background: #fff; }

/* =====================================================================
   1. HERO STAGE: the agent in the middle, programs around it, one job in the chat
   ===================================================================== */
.int-hero .int-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, .8fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "hub chat" "hint chat";
  align-items: center;
  gap: 6px clamp(16px, 2.4vw, 40px);
  padding: clamp(18px, 2.2vw, 32px) clamp(20px, 3.4vw, 56px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(50% 72% at 32% 50%, rgba(255, 201, 49, .34), rgba(255, 201, 49, 0) 70%),
    linear-gradient(180deg, var(--paper-2), var(--paper-3));
  box-shadow: inset 0 0 0 1px rgba(20, 18, 14, .06);
}
/* faint dot grid, strongest around the agent */
.int-hero .int-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 18, 14, .13) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 80% at 32% 50%, #000 20%, transparent 85%);
  mask-image: radial-gradient(60% 80% at 32% 50%, #000 20%, transparent 85%);
}

/* The hub: every program tile sits at its own spot (percent of the hub box) */
.int-hero .hub { grid-area: hub; position: relative; align-self: stretch; min-height: 460px; }
.int-hero .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.int-hero .hub-lines .ln { stroke: rgba(20, 18, 14, .34); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.int-hero .hub-lines .ln-live { stroke: var(--cobalt); stroke-width: 2.5; stroke-dasharray: 8 7; stroke-linecap: round; }
.int-hero .hub-lines .ln-dot { fill: var(--cobalt); stroke: var(--paper); stroke-width: 2; }

.int-hero .agent-node {
  --core: 112px;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, calc(var(--core) / -2));
}
.int-hero .agent-core {
  width: var(--core);
  height: var(--core);
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: linear-gradient(180deg, #2A261F 0%, var(--ink) 62%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 0 0 10px rgba(255, 201, 49, .3),
    0 0 0 22px rgba(255, 201, 49, .13),
    0 34px 60px -24px rgba(20, 18, 14, .7);
}
.int-hero .agent-core img { width: 54px; height: auto; }
.int-hero .agent-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 3;
  height: 34px;
  margin-top: -17px; /* sits on the core's bottom edge, so it can never reach the tile ring */
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 18, 14, .06), 0 14px 26px -16px rgba(20, 18, 14, .45);
  font-size: 14px;
  white-space: nowrap;
}
.int-hero .agent-label b { font-weight: 600; }
.int-hero .agent-label small { font-size: 12.5px; font-weight: 500; color: var(--stone); }
.int-hero .agent-label .dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(27, 158, 75, .22);
}
.int-hero .agent-label .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: heroPing 2.6s ease-out infinite;
}

.int-hero .app[data-app="quickbooks"]     { --x: 90%;   --y: 50%;   --px: 88%; --py: 47%; }
.int-hero .app[data-app="stripe"]         { --x: 82.4%; --y: 72.3%; --px: 78%; --py: 84%; }
.int-hero .app[data-app="square"]         { --x: 62.4%; --y: 86.1%; --px: 50%; --py: 87%; }
.int-hero .app[data-app="slack"]          { --x: 37.6%; --y: 86.1%; --px: 22%; --py: 84%; }
.int-hero .app[data-app="googledrive"]    { --x: 17.6%; --y: 72.3%; }
.int-hero .app[data-app="googlecalendar"] { --x: 10%;   --y: 50%; }
.int-hero .app[data-app="gmail"]          { --x: 17.6%; --y: 27.7%; --px: 12%; --py: 47%; }
.int-hero .app[data-app="outlook"]        { --x: 37.6%; --y: 13.9%; --px: 22%; --py: 19%; }
.int-hero .app[data-app="hubspot"]        { --x: 62.4%; --y: 13.9%; --px: 50%; --py: 12%; }
.int-hero .app[data-app="shopify"]        { --x: 82.4%; --y: 27.7%; --px: 78%; --py: 19%; }
/* The four diagonal tiles keep the oval where the hub is tall, and move just far enough apart where
   it is short (short laptops, tablets, any size where the hub is under about 485px tall), so a live
   tile's ring and check mark never sit on the next program's name: 108px from the middle clears the
   check mark and its halo by about 5px. Phones place the tiles with --px and --py instead. */
.int-hero .app[data-app="shopify"],
.int-hero .app[data-app="gmail"]          { --y: min(27.7%, calc(50% - 108px)); }
.int-hero .app[data-app="stripe"],
.int-hero .app[data-app="googledrive"]    { --y: max(72.3%, calc(50% + 108px)); }
/* Every tile is a real button (it replays that program's conversation in the chat), dressed as the tile */
.int-hero .app {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translate(-50%, -50%);
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: none;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.int-hero .app:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 7px; border-radius: 22px; }
.int-hero .app.is-live:focus-visible { outline-offset: 11px; }
.int-hero .app-sq { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.int-hero .app:active .app-sq { transform: scale(.96); }
@media (hover: hover) {
  .int-hero .app:not(.is-live):hover .app-sq {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1.5px var(--cobalt), 0 20px 30px -16px rgba(20, 18, 14, .45);
  }
  .int-hero .app:not(.is-live):hover .app-nm { background: #fff; color: var(--cobalt); }
}
.int-hero .app-sq {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 18px;
  font-size: 23px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 96;
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--paper-3), 0 16px 28px -16px rgba(20, 18, 14, .35);
}
.int-hero .app.is-live .app-sq { background: var(--sun); }
.int-hero .app-nm {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 246, .88);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}
/* The program the agent is working in right now */
.int-hero .app.is-live .app-sq { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--cobalt), 0 18px 30px -14px rgba(31, 73, 255, .7); }
.int-hero .app.is-live .app-nm { background: var(--cobalt); color: #fff; }
.int-hero .live-badge {
  position: absolute;
  top: -9px; right: -9px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  box-shadow: 0 0 0 3px var(--paper);
}

/* The hint under the programs: small and quiet */
.int-hero .int-hint {
  grid-area: hint;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  /* a shade darker than --stone: at least 4.5:1 on the stage's warm bottom (about 5.6:1) */
  color: #5E584D;
}
.int-hero .int-hint svg { flex: none; }

/* The chat card (parts reuse the business hero chat: .chat-head, .avatar, .who, .msg, .bubble, .dots) */
.int-hero .int-chat {
  grid-area: chat;
  position: relative;
  z-index: 3;
  justify-self: end;
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border-radius: 28px;
  border: 1px solid rgba(20, 18, 14, .06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px rgba(20, 18, 14, .08),
    0 34px 80px -26px rgba(20, 18, 14, .5);
}
/* The log. On desktop (where the card sits beside the programs) integrations.js adds hidden copies
   of every conversation state a visitor can see in full, stacked in one grid cell: the box takes the
   tallest one's height, the live log fills the box and scrolls to the newest message, so the card
   never changes size while messages arrive. Messages sit at the bottom, like any chat. */
.int-hero .int-log-box { display: grid; }
.int-hero .int-log-box > * { grid-area: 1 / 1; min-width: 0; }
.int-hero .int-log { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; }
.int-hero .int-log > :first-child { margin-top: auto; }
.int-hero .int-log:focus-visible { outline-offset: -5px; border-radius: 18px; }
.int-hero .int-log .msg { max-width: 88%; }
.int-hero .int-log-sizer { display: none; visibility: hidden; pointer-events: none; }
.int-hero .int-log-sizer > * { grid-area: 1 / 1; }
.int-hero .int-log-sizer .msg,
.int-hero .int-log-sizer .ok-row { animation: none; }
/* After a reply button on desktop, the owner's question fades up and out, then is removed
   (integrations.js), so the answer, the choice and the reply always show in full */
.int-hero .int-log .msg.is-leaving { animation: intMsgOut .2s var(--ease) forwards; pointer-events: none; }
/* The owner's reply button choice, as a small bubble */
.int-hero .msg-choice .bubble { padding: 6px 14px 7px; font-size: 14.5px; font-weight: 600; }
.int-hero .msg-typing .bubble { padding: 10px 15px; line-height: 1; }
.int-hero .ok-row { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; }
.int-hero .ok-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s, transform .25s var(--ease);
}
.int-hero .ok-chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.int-hero .ok-yes { border-color: var(--cobalt); color: var(--cobalt); }
.int-hero .ok-yes:hover { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
.int-hero .int-chat-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--stone);
}
.int-hero .int-chat-note .sq { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .int-hero .hub-lines .ln-live { animation: intFlow 1.4s linear infinite; }
  .int-hero .app.is-live .app-sq { animation: intLive 2.8s ease-in-out infinite; }
  .int-hero .ok-row { animation: heroMsgIn .45s var(--ease) both; }
}
/* Reduced motion: every message appears at once, nothing slides or lifts */
@media (prefers-reduced-motion: reduce) {
  .int-hero .msg { animation: none; }
  .int-hero .app-sq, .int-hero .ok-chip { transition: none; }
  .int-hero .app:not(.is-live):hover .app-sq, .int-hero .ok-chip:hover { transform: none; }
}
@keyframes intFlow { to { stroke-dashoffset: -30; } }
@keyframes intMsgOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes intLive { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }

/* =====================================================================
   2. NUMBERS: three facts in a slim row
   ===================================================================== */
.facts { position: relative; padding-top: clamp(44px, 6vw, 88px); }
.facts-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: 8px; padding: 28px clamp(18px, 2.4vw, 34px) 30px; }
.fact:first-child { padding-left: 4px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact-v {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: .95;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
  color: var(--ink);
}
.fact-cobalt { color: var(--cobalt); }
.fact-mark { position: relative; isolation: isolate; display: inline-block; }
.fact-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.12em; right: -.16em; bottom: .04em;
  height: .34em;
  border-radius: .14em .34em .2em .4em;
  background: var(--sun);
  transform: rotate(-2deg);
}
.fact-l { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink-2); }

/* =====================================================================
   3. WHERE IT WORKS: six groups on a warm panel
   ===================================================================== */
.where { position: relative; padding: calc(var(--section-y) * .75) var(--gutter) 0; }
.where-panel {
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(44px, 6.5vw, 96px) clamp(16px, 4vw, 64px) clamp(36px, 5vw, 72px);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
}
.where-panel > * { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-inline: auto; }
.where-head,
.cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(30px, 4.2vw, 52px);
}
.where-head h2,
.cat-head h2 { margin-top: 14px; }
.where-head .lede,
.cat-head .lede { padding-bottom: 6px; }

.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(20, 18, 14, .04), 0 22px 48px -36px rgba(20, 18, 14, .4);
}
.wc-ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink);
}
.wcard h3 { font-size: clamp(20px, 1.6vw, 24px); }
.wcard p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
/* Money keeps the sunshine icon; its rule is a page level promise under the grid */
.wcard-money .wc-ico { background: var(--sun); box-shadow: 0 12px 26px -14px rgba(150, 110, 0, .7); }
.where-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 201, 49, .28);
  box-shadow: inset 0 0 0 1px rgba(150, 110, 0, .12);
  color: var(--ink);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.4;
  text-align: center;
}
.where-rule svg { flex: none; }
/* program pills line up along the bottom of every card */
.progs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 18px 0 0;
}
.wcard > p:last-of-type { margin-bottom: 20px; }
.progs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.progs .sq { width: 26px; height: 26px; border-radius: 8px; font-size: 11.5px; letter-spacing: -.02em; }
.progs .t-paper { box-shadow: inset 0 0 0 1.5px rgba(20, 18, 14, .18); }

/* =====================================================================
   4. THE CATALOG: a working search over catalog.json
   ===================================================================== */
.catalog { position: relative; padding-block: var(--section-y) calc(var(--section-y) * .55); }
.cat-box {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.cat-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border-radius: 22px;
  background: var(--paper);
  border: 1.5px solid rgba(20, 18, 14, .16);
  box-shadow: 0 1px 2px rgba(20, 18, 14, .05), 0 10px 22px -14px rgba(20, 18, 14, .35);
  transition: border-color .2s, box-shadow .25s;
}
.cat-search:hover { border-color: rgba(20, 18, 14, .3); }
.cat-search:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(31, 73, 255, .16), 0 10px 22px -14px rgba(20, 18, 14, .35); }
.cat-glass { flex: none; color: var(--stone); }
.cat-search input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.cat-search input:focus-visible { outline: 0; }
.cat-search input::placeholder { color: #766E60; opacity: 1; }
.cat-count {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.cat-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-left: 4px; }
.cat-try-k {
  margin-right: 4px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.try {
  appearance: none;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .2s, background-color .2s, transform .25s var(--ease);
}
.try:hover { border-color: var(--ink); background: #fff; transform: translateY(-1px); }
.try[aria-pressed="true"],
.try[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cat-grid {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 10px;
}
.ctile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  animation: heroFadeUp .4s var(--ease) both;
}
.ctile .sq { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.ct-txt { display: flex; flex-direction: column; min-width: 0; }
.ct-txt b { font-weight: 600; font-size: 15.5px; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ct-txt small { margin-top: 2px; font-size: 12.5px; color: var(--stone); }
.cat-grid:empty { display: none; }
.cat-fail { grid-column: 1 / -1; color: var(--stone); }
.cat-empty {
  margin-top: 22px;
  padding: clamp(28px, 3.6vw, 44px) 24px clamp(28px, 3.4vw, 40px);
  border-radius: 22px;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(255, 201, 49, .3), rgba(255, 201, 49, 0) 70%),
    var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 14, .06);
  text-align: center;
}
.cat-empty-t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 96;
  overflow-wrap: anywhere;
}
.cat-term { color: var(--cobalt); }
.cat-empty-s { max-width: 34em; margin: 10px auto 0; text-wrap: balance; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.cat-empty-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 22px; }
.cat-empty-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sun);
  text-underline-offset: 5px;
}
.cat-empty-link:hover { color: var(--cobalt); }
.cat-more-row { display: flex; justify-content: center; }
.cat-more-row .btn { margin-top: 20px; }

/* =====================================================================
   5. NOT ON THE LIST? (the business page's security frame, three cards)
   ===================================================================== */
.int-more .sec-head { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* =====================================================================
   6. HOW CONNECTING WORKS (the business page's climbing steps, three of them)
   ===================================================================== */
.int-how { padding-block: calc(var(--section-y) * .6) calc(var(--section-y) * .45); }
.int-how .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* three wide steps need less height than the business page's four; min-height drives every step,
   so each one rises by exactly --rise */
.int-how .step { min-height: calc(clamp(224px, 17vw, 240px) + var(--rise) * var(--n)); }
.int-how .step:nth-child(3) {
  --n: 2;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.int-how .step:nth-child(3) .how-num { color: var(--sun); }
.int-how .step:nth-child(3) .how-num::after { display: none; }
.int-how .step:nth-child(3) h3 { color: var(--paper); }
.int-how .step:nth-child(3) p { color: rgba(255, 253, 246, .78); }
.int-sec-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sun);
  text-underline-offset: 5px;
}
.int-sec-link svg { transition: transform .3s var(--ease); }
.int-sec-link:hover { color: var(--cobalt); }
.int-sec-link:hover svg { transform: translateX(3px); }

/* The trademark line, just above the footer */
.int-tm { margin: 0; padding: 0 var(--gutter); font-size: 13px; line-height: 1.5; color: var(--stone); }

/* =====================================================================
   Responsive
   ===================================================================== */
/* Desktop: the two line headline gets more size so it fills the block like the business page's three */
@media (min-width: 981px) {
  .int-hero h1 { font-size: clamp(40px, min(5.6vw, 8.8vh), 84px); }
  .int-hero .sub { text-wrap: pretty; }
  /* the key phrase never splits across two lines */
  .int-hero .sub strong { white-space: nowrap; }
  .int-hero .int-log-box.is-sized { position: relative; }
  .int-hero .int-log-box.is-sized > .int-log-sizer { display: grid; }
  /* The log never scrolls by hand: overflow hidden, so the mouse wheel and trackpad always scroll the
     page, even with the pointer over the chat, and Windows draws no scrollbar inside the card.
     integrations.js keeps the newest message in view, and once a reply button is used it lets the
     owner's question go, so every state fits the card (the hidden sizer copies guarantee it). */
  .int-hero .int-log-box.is-sized > .int-log {
    position: absolute;
    inset: 0;
    overflow-y: hidden;
  }
  /* the owner's question, fading out after a reply button, softens under the card's header */
  .int-hero .int-log-box.is-sized::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0; left: 0; right: 0;
    height: 16px;
    pointer-events: none;
    background: linear-gradient(var(--paper), rgba(255, 253, 246, 0));
  }
  /* while the log shows its keyboard focus ring, it sits above the fade, so the ring is never
     softened (plain stacking, no :has(), so it works in every browser; the log has no background,
     so nothing else changes) */
  .int-hero .int-log-box.is-sized > .int-log:focus-visible { z-index: 2; }
  /* the footnote always takes two lines, so a short app name never makes the card shorter */
  .int-hero #intNote { display: flex; align-items: center; min-height: 2.8em; text-wrap: balance; }
}
/* Short laptop screens */
@media (min-width: 981px) and (max-height: 820px) {
  .int-hero .int-stage { min-height: 0; padding-block: 14px; }
  .int-hero .hub { min-height: 410px; }
  .int-hero .int-log { gap: 11px; padding: 14px 16px 12px; }
  .int-hero .int-chat-note { padding: 9px 16px 11px; }
  .int-hero .app[data-app="outlook"],
  .int-hero .app[data-app="hubspot"] { --y: 11%; }
  .int-hero .app[data-app="slack"],
  .int-hero .app[data-app="square"] { --y: 89%; }
  .int-hero .agent-label small { display: none; }
  /* no room for the hint without crowding the bottom labels; the tiles' hover lift and pointer say
     they can be clicked (screen readers still get it: the tile group is described by it) */
  .int-hero .int-hint { display: none; }
}

/* Wide screens: the headline block and the stage content sit on the page's content width, the same
   width as the sections below (.wrap, the where panel's content), centered. The stage panel stops at
   the where panel's 1600px. The programs and the bigger chat card make one group. */
@media (min-width: 1280px) {
  .int-hero {
    --content: calc(var(--wrap) - 2 * var(--gutter));
    --chat-w: clamp(440px, 34vw, 500px);
    --stage-gap: clamp(28px, 2.8vw, 48px);
    /* on very tall screens the first screen shows the start of the page too, not a taller empty stage */
    min-height: min(calc(100svh - var(--nav-h)), 1040px);
  }
  /* the sub keeps to two lines; the headline stops at the business page's 70px so both fit side by side */
  .int-hero .hero-top {
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 44px;
  }
  .int-hero h1 { font-size: clamp(40px, min(5.6vw, 8.8vh), 70px); }
  /* the panel hugs the group: the content width plus a margin of warm stage on each side */
  .int-hero .int-stage {
    width: 100%;
    max-width: calc(var(--content) + 192px);
    margin-inline: auto;
    grid-template-columns: minmax(0, calc(var(--content) - var(--chat-w) - var(--stage-gap))) var(--chat-w);
    justify-content: center;
    column-gap: var(--stage-gap);
  }
  .int-hero .int-chat { justify-self: stretch; max-width: none; }
  /* a bigger card with bigger words, still quieter than the headline */
  .int-hero .chat-head { padding: 15px 20px 14px; gap: 12px; }
  .int-hero .avatar { width: 40px; height: 40px; border-radius: 12px; }
  .int-hero .avatar img { width: 24px; }
  .int-hero .who-name { font-size: 17.5px; }
  .int-hero .who-role { font-size: 13px; }
  .int-hero .int-log { gap: 16px; padding: 20px 22px 18px; }
  .int-hero .int-log .msg { max-width: 86%; }
  .int-hero .msg-by { font-size: 11px; }
  .int-hero .bubble { padding: 12px 17px 13px; font-size: 17px; }
  .int-hero .msg-choice .bubble { padding: 7px 16px 8px; font-size: 15.5px; }
  .int-hero .msg-typing .bubble { padding: 12px 17px; }
  .int-hero .ok-chip { height: 40px; padding: 0 17px; font-size: 15px; }
  .int-hero .int-chat-note { gap: 10px; padding: 13px 22px 15px; font-size: 13.5px; }
  .int-hero .int-chat-note .sq { width: 22px; height: 22px; }
  .int-hero .int-chat-note .sq-logo img { width: 15px; height: 15px; }
}
/* Wide but short: keep the whole stage on the first screen */
@media (min-width: 1280px) and (max-height: 820px) {
  .int-hero .chat-head { padding: 9px 16px 8px; gap: 11px; }
  .int-hero .avatar { width: 32px; height: 32px; border-radius: 10px; }
  .int-hero .avatar img { width: 20px; }
  .int-hero .who-name { font-size: 16.5px; }
  .int-hero .int-log { gap: 10px; padding: 12px 18px 10px; }
  .int-hero .msg-by { margin-bottom: 4px; }
  .int-hero .bubble { padding: 9px 15px 10px; font-size: 16px; line-height: 1.45; }
  .int-hero .msg-choice .bubble { padding: 5px 13px 6px; font-size: 14.5px; }
  .int-hero .msg-typing .bubble { padding: 10px 15px; }
  .int-hero .ok-chip { height: 34px; font-size: 14.5px; }
  .int-hero .int-chat-note { padding: 8px 16px 10px; font-size: 12.5px; }
  .int-hero .int-stage { row-gap: 2px; }
}
/* Big screens: the programs and the agent grow a little */
@media (min-width: 1800px) and (min-height: 1000px) {
  .int-hero .app-sq { width: 64px; height: 64px; border-radius: 20px; }
  .int-hero .app-sq img { width: 38px; height: 38px; }
  .int-hero .app.is-live .app-sq img { width: 46px; height: 46px; padding: 5px; border-radius: 13px; }
  .int-hero .app-nm { font-size: 14px; }
  .int-hero .agent-node { --core: 124px; }
  .int-hero .agent-core img { width: 60px; }
}

@media (max-width: 1099px) {
  .int-how .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .int-how .step { min-height: calc(clamp(224px, 17vw, 240px) + var(--rise) * var(--n)); }
}

/* Tablet: hub on top, the chat under it */
@media (max-width: 980px) {
  .int-hero .int-stage { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "hub" "hint" "chat"; min-height: 0; flex: none; padding: 20px 20px 24px; gap: 8px; }
  .int-hero .int-hint { margin-bottom: 8px; }
  /* The hub takes the full column width and its height comes from that width (aspect-ratio), never
     from the row. Every child of the hub is absolutely positioned, so it has no content size of its own.
     With aspect-ratio plus the desktop align-self: stretch, Safari (WebKit builds since about January 2026)
     follows the grid rule that justify-self: normal acts as start for a box with an aspect ratio,
     sizes the empty row to 0 and turns that 0 height into a 0 width: the orbit vanished and the chat
     sat on the agent (reported 9/29 on an iPhone). Safari 18 got a too wide hub instead. Both
     keywords are needed; tests/page-integrations.test.mjs checks them. */
  .int-hero .hub { min-height: 0; aspect-ratio: 16 / 10; justify-self: stretch; align-self: start; }
  .int-hero .int-chat { justify-self: center; max-width: 560px; }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .where-head, .cat-head { grid-template-columns: 1fr; }
  .int-more .walls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .int-how .how-steps { grid-template-columns: 1fr; align-items: stretch; }
  .int-how .step { min-height: 0; }
}

/* Phone */
@media (max-width: 767px) {
  /* hero order: headline, eyebrow, sub, Book a call, then the stage */
  .int-hero h1 .l2, .int-hero h1 .l2 > span { display: block; }
  .int-hero .sub { margin-top: 0; }
  .int-hero .int-stage { order: 7; margin-top: 30px; padding: 18px 12px 12px; gap: 14px; border-radius: 26px; }
  .int-hero .hub { aspect-ratio: 11 / 12; }
  .int-hero .desk-only { display: none; }
  .int-hero .app { left: var(--px); top: var(--py); gap: 5px; }
  .int-hero .app:focus-visible { outline-offset: 4px; border-radius: 18px; }
  .int-hero .app.is-live:focus-visible { outline-offset: 8px; }
  .int-hero .int-hint { margin-bottom: 0; font-size: 13px; }
  .int-hero .app-sq { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
  .int-hero .app-sq img { width: 26px; height: 26px; }
  .int-hero .app.is-live .app-sq img { width: 32px; height: 32px; padding: 4px; border-radius: 9px; }
  .int-hero .app-nm { padding: 2px 7px; font-size: 11.5px; }
  .int-hero .live-badge { top: -7px; right: -7px; width: 18px; height: 18px; }
  .int-hero .app.is-live .app-sq { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--cobalt), 0 14px 24px -12px rgba(31, 73, 255, .7); }
  .int-hero .agent-node { --core: 78px; }
  .int-hero .agent-core {
    border-radius: 24px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .06) inset,
      0 0 0 7px rgba(255, 201, 49, .3),
      0 0 0 15px rgba(255, 201, 49, .13),
      0 24px 44px -20px rgba(20, 18, 14, .7);
  }
  .int-hero .agent-core img { width: 38px; }
  .int-hero .agent-label { height: 30px; margin-top: -15px; padding: 0 12px 0 10px; gap: 7px; font-size: 12.5px; }
  .int-hero .agent-label small { display: none; }
  .int-hero .int-chat { max-width: none; border-radius: 22px; }
  .int-hero .int-log { padding: 14px 14px 14px; gap: 12px; }
  .int-hero .int-log .msg { max-width: 92%; }
  .int-hero .bubble { font-size: 15px; }
  .int-hero .int-chat-note { padding: 10px 14px 12px; font-size: 12px; }

  .facts { padding-top: 44px; }
  .facts-row { grid-template-columns: 1fr; }
  .fact,
  .fact:first-child { flex-direction: row; align-items: baseline; gap: 14px; padding: 18px 2px; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--line); }
  .fact-v { flex: none; width: 124px; font-size: 38px; }
  .fact-l { font-size: 16px; }

  .where { padding: 64px 8px 0; }
  .where-panel { padding: 48px 12px 16px; border-radius: 28px; }
  .where-head { padding-inline: 4px; }
  .wgrid { grid-template-columns: 1fr; gap: 12px; }
  .wcard { padding: 22px 18px 20px; }
  .wc-ico { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px; }
  .wcard h3 { font-size: 20px; }
  .wcard p { font-size: 15px; }
  .progs { gap: 7px; padding-top: 16px; }
  .progs li { height: 34px; font-size: 14px; }
  .where-rule { margin-top: 12px; padding: 14px 16px; font-size: 15.5px; text-align: left; justify-content: flex-start; }
  .cat-empty { padding: 26px 16px 24px; }
  .cat-empty-s { font-size: 16px; }

  .catalog { padding-block: 64px 40px; }
  .cat-box { padding: 14px 12px 18px; border-radius: 26px; }
  .cat-search { gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; }
  .cat-glass { width: 20px; height: 20px; }
  .cat-search input { height: 46px; font-size: 16.5px; }
  .cat-count { height: 34px; padding: 0 10px; border-radius: 11px; font-size: 10.5px; letter-spacing: .06em; }
  .cat-try { gap: 7px; }
  .try { padding: 6px 12px; font-size: 13.5px; }
  /* one clean list on phones, so long names never get cut */
  .cat-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .ctile { gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px; }
  .ctile .sq { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
  .ctile .sq-logo img { width: 25px; height: 25px; }
  .ct-txt b { font-size: 15px; }
  .ct-txt small { font-size: 12px; }

  .int-more .walls { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  /* steps become the business page's numbered column; step 3 drops its ink card like step 4 does there */
  .int-how { padding-block: 64px 24px; }
  .int-how .step:nth-child(3) { background: none; border: 0; color: var(--ink); }
  .int-how .step:nth-child(3) .how-num { background: var(--ink); color: var(--sun); }
  .int-how .step:nth-child(3) h3 { color: var(--ink); }
  .int-how .step:nth-child(3) p { color: var(--ink-2); }
}

@media (max-width: 360px) {
  .fact-v { width: 108px; font-size: 33px; }
  .cat-count { display: none; }
}