/* Integrations page (/integrations): app marks, the call island, the Connector Studio
   interaction cards and the app directory. Light, quiet surfaces; motion shows real UI.
   Brand colours identify each app; marks are our own monograms, not provider logos. */

[data-app="hubspot"] { --brand:#ff7a59; }
[data-app="pipedrive"] { --brand:#017737; }
[data-app="zoho_crm"] { --brand:#e42527; }
[data-app="google_calendar"] { --brand:#4285f4; }
[data-app="microsoft_365_calendar"] { --brand:#0078d4; }
[data-app="calendly"] { --brand:#006bff; }
[data-app="jira"] { --brand:#0052cc; }
[data-app="freshdesk"] { --brand:#25c16f; }
[data-app="xero"] { --brand:#13b5ea; }
[data-app="slack"] { --brand:#611f69; }
[data-app="microsoft_teams"] { --brand:#5b5fc7; }
[data-app="n8n"] { --brand:#ea4b71; }
[data-app="zapier"] { --brand:#ff4f00; }
[data-app="make"] { --brand:#6d00cc; }
[data-app="autocab"] { --brand:#ffc20e; --mark:#1a1a1a; }
[data-app="maps"] { --brand:#00a571; }
[data-app="own_api"] { --brand:#e6f2eb; --mark:#0d1321; }

.int-token {
  --size:28px;
  display:inline-grid;
  place-items:center;
  flex:none;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:var(--brand,#008757);
  color:var(--mark,#fff);
  box-shadow:inset 0 0 0 1px #ffffff40;
  font:800 calc(var(--size) * .46)/1 Manrope,Arial,sans-serif;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.int-token.is-wide { font-size:calc(var(--size) * .3); letter-spacing:-.02em; }

/* Shared motion and surfaces */
.page-integrations,.int-strip {
  --int-stage:#f1f3f2;
  --int-shadow:0 1px 2px #0d13210f,0 14px 34px -16px #0d132138;
  --int-ease:cubic-bezier(.22,.9,.24,1);
  --int-spring:cubic-bezier(.34,1.32,.5,1);
  --int-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --int-soft:cubic-bezier(.34,1.18,.5,1);
  --int-soft:linear(0,.012,.048 2.9%,.188 6.1%,.418 9.9%,.715 15.1%,.896 19.4%,.977 22.6%,1.032 26%,1.065 29.6%,1.076 33%,1.07 36.6%,1.051 40.6%,1.016 48.4%,.998 56.4%,.993 62.6%,.998 76.6%,1);
}
.int-ghost { position:absolute; left:0; top:0; z-index:20; width:22px; height:22px; pointer-events:none; opacity:0; will-change:transform; }
.int-ghost svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 2px 3px #0d132133); }
.int-ghost path { fill:#008757; stroke:white; stroke-width:1.6; stroke-linejoin:round; }

/* Hero: a phone-style call island that opens, uses apps and settles */
.int-hero { align-items:center; }
.int-island-wrap { margin:0; min-width:0; }
.int-island-stage {
  --ty:244px;
  position:relative;
  height:500px;
  overflow:hidden;
  border-radius:32px;
  background:var(--int-stage);
  container-type:inline-size;
}
.int-island {
  --iw:min(392px,calc(100cqw - 28px)); --ih:184px; --ir:34px; --iy:40px;
  position:absolute;
  left:50%;
  top:0;
  z-index:5;
  width:var(--iw);
  height:var(--ih);
  overflow:hidden;
  border-radius:var(--ir);
  background:#0a0d0c;
  color:white;
  box-shadow:0 18px 40px -18px #0d132166;
  transform:translate(-50%,var(--iy));
  transition:width .62s var(--int-spring),height .62s var(--int-spring),border-radius .62s var(--int-ease),transform .7s var(--int-soft);
}
.int-island.is-ring { --iw:min(300px,calc(100cqw - 28px)); --ih:62px; --ir:31px; --iy:219px; }
.int-island.is-done { --iw:244px; --ih:58px; --ir:29px; --iy:150px; }
.int-island-ring,.int-island-live,.int-island-done { position:absolute; left:0; top:0; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.int-island.is-ring .int-island-ring,.int-island.is-live .int-island-live,.int-island.is-done .int-island-done { opacity:1; transition:opacity .35s ease .16s; }
.int-island-ring { display:flex; align-items:center; gap:11px; width:min(300px,calc(100cqw - 28px)); height:62px; padding:0 10px 0 11px; }
.int-island-avatar { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; background:#2b322f; color:#e6efe9; font-size:.9rem; font-weight:700; }
.int-island-ring-text { flex:1; min-width:0; }
.int-island-ring-text small,.int-island-who small { display:block; color:#9aa6a0; font-size:.7rem; line-height:1.3; }
.int-island-ring-text strong { display:block; overflow:hidden; font-size:.92rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.int-island-accept { position:relative; display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:#22c55e; }
.int-island-accept svg { width:18px; height:18px; fill:none; stroke:white; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.int-island.is-ring .int-island-accept::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 #22c55e80; animation:int-ring 1.1s ease-out 2 .3s; }
.int-island.is-ring .int-island-ring .int-island-avatar { animation:int-wiggle .9s ease-in-out 1 .35s; }
@keyframes int-ring { to { box-shadow:0 0 0 14px #22c55e00; } }
@keyframes int-wiggle { 20%,60% { transform:rotate(-7deg); } 40%,80% { transform:rotate(7deg); } }
.int-island-live { width:min(392px,calc(100cqw - 28px)); height:184px; padding:16px 18px; }
.int-island-top { display:flex; align-items:center; gap:11px; }
.int-island-who { flex:1; min-width:0; }
.int-island-who strong { font-size:.95rem; line-height:1.3; }
.int-island-clock { color:#7ee2a8; font-size:.85rem; font-variant-numeric:tabular-nums; }
.int-island-said { margin:16px 2px 0; color:white; font-size:1.02rem; font-weight:500; line-height:1.4; letter-spacing:-.01em; }
.int-island-said .w { display:inline-block; opacity:1; transform:none; transition:opacity .3s ease,transform .45s var(--int-soft); }
.int-island-said.is-typing .w:not(.is-in) { opacity:0; transform:translateY(5px); }
.int-island-wave { position:absolute; left:20px; right:20px; bottom:16px; display:flex; align-items:center; justify-content:space-between; height:22px; }
.int-island-wave i { width:3px; height:22px; border-radius:2px; background:#5be39a; opacity:.85; transform:scaleY(.18); transform-origin:center; }
.int-island.is-live.is-talking .int-island-wave i { animation:int-wave .9s ease-in-out infinite alternate; }
.int-island-wave i:nth-child(2n) { animation-duration:.7s !important; animation-delay:-.3s !important; }
.int-island-wave i:nth-child(3n) { animation-duration:1.1s !important; animation-delay:-.6s !important; }
.int-island-wave i:nth-child(5n+1) { animation-delay:-.15s !important; }
@keyframes int-wave { 0% { transform:scaleY(.15); } 100% { transform:scaleY(1); } }
.int-island-done { display:flex; align-items:center; gap:11px; width:244px; height:58px; padding:0 18px 0 12px; }
.int-island-tick { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:#22c55e; color:white; font-size:.85rem; font-weight:800; }
.int-island.is-done .int-island-tick { animation:int-pop .55s var(--int-spring) .15s both; }
@keyframes int-pop { from { transform:scale(.4); } to { transform:scale(1); } }
.int-island-done strong { display:block; font-size:.9rem; line-height:1.25; }
.int-island-done small { display:block; color:#9aa6a0; font-size:.72rem; }

/* Rolling text: the number gives way to the caller's name */
.int-roll { display:inline-grid; overflow:hidden; vertical-align:top; }
.int-roll > * { grid-area:1 / 1; transition:transform .55s var(--int-soft),opacity .3s ease; }
.int-roll-b { opacity:0; transform:translateY(100%); }
.is-known .int-roll-a { opacity:0; transform:translateY(-100%); }
.is-known .int-roll-b { opacity:1; transform:none; }

.int-toasts { position:absolute; left:50%; top:0; z-index:3; width:min(372px,calc(100cqw - 28px)); height:0; margin:0; padding:0; list-style:none; transform:translate(-50%,var(--ty)); transition:transform .7s var(--int-soft); }
.int-island-stage.is-done { --ty:224px; }
.int-toast {
  --i:0;
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--i) * 70px);
  z-index:calc(10 - var(--i));
  display:flex;
  align-items:center;
  gap:11px;
  height:60px;
  padding:0 14px 0 12px;
  border-radius:18px;
  background:white;
  color:var(--ink);
  box-shadow:var(--int-shadow);
  opacity:0;
  transform:translateY(-46px) scale(.88);
  transition:transform .65s var(--int-spring),opacity .3s ease;
}
.int-toast:nth-child(2) { --i:1; }
.int-toast:nth-child(3) { --i:2; }
.int-toast.is-in { opacity:1; transform:none; }
.int-island-stage.is-done .int-toast.is-in { transform:translateY(calc(var(--i) * -61px)) scale(calc(1 - var(--i) * .05)); }
.int-island-stage.is-done .int-toast.is-in:not(:first-child) { opacity:calc(1 - var(--i) * .22); }
.int-island-stage.is-done .int-toast.is-in:not(:first-child) > * { opacity:0; transition:opacity .2s ease; }
.int-island-stage.is-clearing .int-toast { opacity:0; transform:translateY(16px) scale(.96); transition:transform .45s var(--int-ease),opacity .35s ease; }
.int-island-stage.is-clearing .int-island { opacity:0; transition:opacity .35s ease; }
.int-toast .int-token { --size:34px; border-radius:10px; }
.int-toast > span:nth-child(2) { flex:1; min-width:0; }
.int-toast strong { display:block; font-size:.86rem; line-height:1.3; }
.int-toast small { display:block; overflow:hidden; color:var(--muted); font-size:.76rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.int-toast-tick { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:#e3f4ec; color:#008757; font-size:.7rem; font-weight:800; }
.int-toast.is-in .int-toast-tick { animation:int-pop .5s var(--int-spring) .25s both; }

.int-calls { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0 0; padding:0; border:0; min-width:0; }
.int-calls label,.int-filter label { position:relative; cursor:pointer; }
.int-calls input,.int-filter input { position:absolute; opacity:0; width:1px; height:1px; }
.int-calls span,.int-filter span { display:block; padding:7px 13px; border-radius:999px; background:var(--int-stage); color:#3d4a44; font-size:.78rem; font-weight:600; transition:background .2s,color .2s,transform .35s var(--int-spring); }
.int-calls label:hover span,.int-filter label:hover span { background:#e6eae8; }
.int-calls label:active span,.int-filter label:active span { transform:scale(.95); }
.int-calls input:checked + span,.int-filter input:checked + span { background:#0d1321; color:white; }
/* The playing call's chip fills while it plays, like a story progress bar. */
.int-calls span { position:relative; overflow:hidden; isolation:isolate; }
.int-calls label.is-playing input:checked + span::before { content:""; position:absolute; inset:0; z-index:-1; background:#ffffff2e; transform:scaleX(0); transform-origin:left; animation:int-fill var(--call-ms,9000ms) linear forwards; }
@keyframes int-fill { to { transform:scaleX(1); } }
.int-calls input:focus-visible + span,.int-filter input:focus-visible + span { outline:3px solid var(--dark); outline-offset:3px; }

/* Interaction cards */
.int-how .section-head p { max-width:420px; }
.int-bento { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
.int-demo-card { grid-column:span 2; }
.int-demo-card:nth-child(-n+2) { grid-column:span 3; }
.int-demo-card h3 { margin:16px 4px 0; font-size:1.05rem; letter-spacing:-.02em; }
.int-demo-card > p { margin:4px 4px 0; font-size:.86rem; line-height:1.55; }
.int-demo {
  position:relative;
  display:grid;
  place-items:center;
  height:300px;
  overflow:hidden;
  border-radius:26px;
  background:var(--int-stage);
  container-type:inline-size;
}
.int-demo button { font-family:inherit; cursor:pointer; }
.int-press { transform:scale(.95) !important; transition-duration:.12s !important; }

/* Connect */
.int-app-card { width:min(290px,calc(100cqw - 36px)); padding:14px; border-radius:20px; background:white; box-shadow:var(--int-shadow); }
.int-app-card-head { display:flex; align-items:center; gap:11px; }
.int-app-card-head .int-token { --size:38px; border-radius:11px; }
.int-app-card-name { flex:1; min-width:0; }
.int-app-card-name strong { display:block; font-size:.92rem; line-height:1.25; }
.int-app-card-name small { color:var(--muted); font-size:.74rem; }
.int-connect { display:grid; min-width:102px; height:34px; padding:0 14px; border:0; border-radius:999px; background:#e3f4ec; color:#006b45; font-size:.78rem; font-weight:700; transition:background .3s ease,color .3s ease,transform .4s var(--int-spring); }
.int-connect > span { grid-area:1 / 1; display:flex; align-items:center; justify-content:center; gap:4px; opacity:0; transform:translateY(6px); transition:opacity .2s ease,transform .35s var(--int-soft); }
.int-connect-done { opacity:1 !important; transform:none !important; }
.int-connect-done::before { content:""; width:7px; height:7px; border-radius:50%; background:#22c55e; }
.int-app-card.is-idle .int-connect,.int-app-card.is-wait .int-connect { background:#0d1321; color:white; }
.int-app-card.is-idle .int-connect-done,.int-app-card.is-wait .int-connect-done { opacity:0 !important; transform:translateY(-6px) !important; }
.int-app-card.is-idle .int-connect-idle,.int-app-card.is-wait .int-connect-wait { opacity:1; transform:none; }
.int-connect-wait i { width:5px; height:5px; border-radius:50%; background:white; animation:int-dots .9s ease-in-out infinite; }
.int-connect-wait i:nth-child(2) { animation-delay:.15s; }
.int-connect-wait i:nth-child(3) { animation-delay:.3s; }
@keyframes int-dots { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
.int-actions { max-height:170px; margin:12px 0 0; padding:0; overflow:hidden; list-style:none; transition:max-height .55s var(--int-ease),margin .55s var(--int-ease); }
.int-actions > li { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:0; overflow:hidden; padding:9px 2px 0; border-top:1px solid #eef1ef; font-size:.82rem; font-weight:600; opacity:1; transform:none; transition:opacity .3s ease,transform .45s var(--int-soft); }
.int-actions > li:first-child { border-top:0; }
.int-actions > li + li { margin-top:9px; }
.int-actions small { display:block; color:#8a5a00; font-size:.68rem; font-weight:600; }
.int-app-card.is-idle .int-actions,.int-app-card.is-wait .int-actions { max-height:0; margin-top:0; }
.int-app-card.is-idle .int-actions > li,.int-app-card.is-wait .int-actions > li { opacity:0; transform:translateY(-6px); }
.int-actions > li:nth-child(2) { transition-delay:.06s; }
.int-actions > li:nth-child(3) { transition-delay:.12s; }
.int-switch { position:relative; flex:none; width:36px; height:22px; padding:0; border:0; border-radius:999px; background:#d7dddb; transition:background .25s ease; }
.int-switch::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:white; box-shadow:0 1px 2px #0d132140; transition:transform .45s var(--int-spring); }
.int-switch[aria-checked="true"] { background:#22c55e; }
.int-switch[aria-checked="true"]::after { transform:translateX(14px); }
.int-switch:focus-visible,.int-connect:focus-visible,.int-react:focus-visible,.int-node-tool:focus-visible { outline:3px solid var(--dark); outline-offset:3px; }

/* Recognise */
.int-caller { position:relative; display:flex; align-items:center; gap:12px; width:min(296px,calc(100cqw - 36px)); height:68px; padding:0 18px 0 14px; overflow:hidden; border-radius:34px; background:white; box-shadow:var(--int-shadow); }
.int-caller-mark { position:relative; display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:#eef1ef; }
.int-caller-mark .int-token { --size:40px; transform:scale(0); transition:transform .5s var(--int-spring); }
.int-caller.is-known .int-caller-mark .int-token { transform:scale(1); }
.int-caller-mark::before { content:""; position:absolute; width:14px; height:14px; border:2px solid #9aa6a0; border-radius:50%; box-sizing:border-box; transition:opacity .2s; }
.int-caller.is-known .int-caller-mark::before { opacity:0; }
.int-caller-text { display:grid; min-width:0; }
.int-caller-text strong { font-size:1rem; line-height:1.3; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.int-caller-sub small { color:var(--muted); font-size:.76rem; }
.int-caller-sweep { position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,#e9f6ef 50%,transparent 70%); transform:translateX(-100%); pointer-events:none; }
.int-caller.is-looking .int-caller-sweep { animation:int-sweep .9s ease-in-out 2; }
@keyframes int-sweep { to { transform:translateX(100%); } }

/* Book */
.int-time { position:relative; width:min(290px,calc(100cqw - 36px)); padding:16px 0 14px; border-radius:20px; background:white; box-shadow:var(--int-shadow); }
.int-time-head { display:flex; align-items:baseline; justify-content:center; gap:8px; }
.int-time-day { color:var(--muted); font-size:.82rem; font-weight:600; }
.int-time-value { font-size:2rem; font-weight:650; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.1; }
.int-time-free { padding:2px 8px; border-radius:999px; background:#e3f4ec; color:#006b45; font-size:.7rem; font-weight:700; }
.int-time-free.is-busy { background:#f1f3f2; color:#7a8580; }
.int-ruler { --v:3; position:relative; height:44px; margin-top:8px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); }
.int-ruler-track {
  position:absolute;
  left:50%;
  top:8px;
  width:calc(16 * 28px + 1px);
  height:28px;
  background:
    repeating-linear-gradient(90deg,#9aa6a0 0 1.5px,transparent 1.5px 56px) 0 0 / 100% 22px no-repeat,
    repeating-linear-gradient(90deg,#c9d1cd 0 1px,transparent 1px 14px) 0 7px / 100% 12px no-repeat;
  transform:translateX(calc(var(--v) * -28px));
  transition:transform .5s var(--int-soft);
}
.int-ruler-needle { position:absolute; left:50%; top:2px; width:2px; height:34px; margin-left:-1px; border-radius:2px; background:#008757; }
.int-ruler input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.int-ruler:has(input:focus-visible) { outline:3px solid var(--dark); outline-offset:-3px; border-radius:10px; }
.int-booked { position:absolute; left:50%; bottom:-46px; display:flex; align-items:center; gap:8px; padding:6px 13px 6px 6px; border-radius:999px; background:white; box-shadow:var(--int-shadow); color:var(--ink); font-size:.8rem; font-weight:650; white-space:nowrap; opacity:0; transform:translate(-50%,10px) scale(.9); transition:opacity .25s ease,transform .5s var(--int-spring); }
.int-booked .int-token { --size:24px; border-radius:7px; }
.int-time.is-booked .int-booked { opacity:1; transform:translate(-50%,0); }

/* Team */
.int-channel { width:min(296px,calc(100cqw - 36px)); padding:12px 14px 14px; border-radius:20px; background:white; box-shadow:var(--int-shadow); }
.int-channel-head { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #eef1ef; font-size:.84rem; }
.int-channel-head .int-token { --size:22px; border-radius:6px; }
.int-message { display:flex; gap:10px; padding-top:12px; opacity:0; transform:translateY(14px); transition:opacity .3s ease,transform .6s var(--int-spring); }
.int-message.is-in { opacity:1; transform:none; }
.int-message-avatar { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:9px; background:#008757; color:white; font-size:.68rem; font-weight:800; }
.int-message strong { display:block; font-size:.82rem; }
.int-message strong small { color:var(--muted); font-size:.68rem; font-weight:500; }
.int-message p { margin-top:2px; color:#2c3732; font-size:.82rem; line-height:1.45; }
.int-react { display:inline-flex; align-items:center; gap:5px; height:26px; margin-top:8px; padding:0 9px; border:1px solid #e4e8e6; border-radius:999px; background:white; color:#4d5853; font-size:.74rem; font-weight:700; transition:background .2s,border-color .2s,transform .4s var(--int-spring); }
.int-react svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.int-react[aria-pressed="true"] { border-color:#9ad8b8; background:#e8f6ee; color:#006b45; }
.int-react.is-bloom { animation:int-bloom .5s var(--int-spring); }
@keyframes int-bloom { 40% { transform:scale(1.18); } }
.int-count { display:inline-grid; height:1.2em; line-height:1.2; overflow:hidden; font-variant-numeric:tabular-nums; }
.int-count > span { grid-area:1 / 1; transition:transform .4s var(--int-soft); }
.int-count > span:last-child { transform:translateY(-120%); }
.int-react[aria-pressed="true"] .int-count > span:first-child { transform:translateY(120%); }
.int-react[aria-pressed="true"] .int-count > span:last-child { transform:none; }

/* Workflow */
.int-node { position:relative; width:min(270px,calc(100cqw - 64px)); margin-top:24px; }
.int-node-card { position:relative; z-index:1; padding:14px 16px; border-radius:20px; background:white; box-shadow:var(--int-shadow); }
.int-node-head { display:flex; align-items:center; gap:10px; }
.int-node-head strong { font-size:.92rem; }
.int-node-mark { display:inline-grid; }
.int-node-mark .int-token { --size:32px; border-radius:9px; animation:int-pop .45s var(--int-spring); }
.int-node-card p { margin-top:10px; color:#4d5853; font-size:.8rem; line-height:1.5; }
.int-node-foot { display:flex; align-items:center; gap:7px; margin-top:10px; color:#7a8580; font-size:.72rem; font-weight:600; }
.int-node-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; }
.int-node-tools { position:absolute; right:-16px; top:-34px; z-index:2; display:flex; gap:8px; }
.int-node-tool { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:white; box-shadow:var(--int-shadow); transition:transform .45s var(--int-spring),opacity .25s ease,box-shadow .2s; }
.int-node-tool .int-token { --size:26px; border-radius:8px; }
.int-node-tool[aria-pressed="true"] { box-shadow:0 0 0 2px #0d1321,var(--int-shadow); }
.int-node-tool:hover { transform:translateY(-2px); }
.int-node.is-folded .int-node-tool { opacity:0; transform:translate(-8px,18px) scale(.6); }
.int-node.is-folded .int-node-tool:nth-child(2) { transition-delay:.04s; }
.int-node.is-folded .int-node-tool:nth-child(3) { transition-delay:.08s; }
.int-node:not(.is-folded) .int-node-tool:nth-child(2) { transition-delay:.05s; }
.int-node:not(.is-folded) .int-node-tool:nth-child(3) { transition-delay:.1s; }

/* Directory: a spotlight that shows each app on a call, a dock to pick one, then a
   searchable list of every app. Without JavaScript the spotlight is a native scroll row
   and the list filters with CSS alone. */
.int-directory .section-head p { max-width:430px; }
.int-spot { --slide-w:min(820px,calc(100% - 180px)); position:relative; }
.int-spot-stage { position:relative; padding:34px 0; overflow:clip; border-radius:32px; background:var(--int-stage); }
.int-spot-track { display:flex; gap:18px; margin:0; padding:0 24px; overflow-x:auto; list-style:none; scroll-snap-type:x mandatory; scrollbar-width:none; }
.int-spot-track::-webkit-scrollbar { display:none; }
.int-spot-slide {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:22px;
  flex:none;
  width:var(--slide-w);
  padding:22px;
  border-radius:28px;
  background:white;
  box-shadow:var(--int-shadow);
  scroll-snap-align:center;
}
.int-spot.is-ready .int-spot-stage { touch-action:pan-y; cursor:grab; }
.int-spot.is-dragging .int-spot-stage { cursor:grabbing; }
.int-spot.is-ready .int-spot-track { display:grid; justify-items:center; padding:0; overflow:visible; }
.int-spot.is-ready .int-spot-slide {
  grid-area:1 / 1;
  opacity:var(--a,1);
  transform:translateX(var(--x,0px)) scale(var(--s,1));
  transition:transform .8s var(--int-soft),opacity .45s ease;
  user-select:none;
  -webkit-user-select:none;
}
.int-spot.is-ready .int-spot-slide.is-side { cursor:pointer; }
.int-spot.is-ready .int-spot-slide.is-far { visibility:hidden; transition:transform .8s var(--int-soft),opacity .45s ease,visibility 0s .8s; }
.int-spot.is-dragging .int-spot-slide,.int-spot-slide.is-jump { transition:none !important; }

.int-spot-about { display:flex; flex-direction:column; min-width:0; padding:8px 4px 2px 6px; }
.int-spot-about > .int-token { --size:56px; border-radius:17px; box-shadow:0 12px 24px -14px var(--brand),inset 0 0 0 1px #ffffff40; }
.int-spot-about h3 { margin-top:18px; font-size:1.55rem; line-height:1.15; letter-spacing:-.03em; }
.int-spot-about h3 small { display:block; margin-top:6px; color:#4d6b5c; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.int-spot-can { display:grid; gap:12px; margin:20px 0 0; }
.int-spot-can > div { display:flex; flex-wrap:wrap; gap:6px; }
.int-spot-can dt { flex-basis:100%; color:#7a8580; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.int-spot-can dd { margin:0; padding:5px 11px; border-radius:999px; background:var(--int-stage); color:#2c3732; font-size:.78rem; font-weight:600; line-height:1.35; }
.int-spot-note { margin-top:auto; padding-top:18px; color:var(--muted); font-size:.78rem; line-height:1.5; }

.int-spot-call { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; padding:16px; border-radius:22px; background:var(--int-stage); }
.int-spot-line { position:relative; padding:14px 18px 18px; border-radius:22px; background:#0a0d0c; color:white; }
.int-spot-to { display:flex; align-items:center; gap:9px; color:#9aa6a0; font-size:.74rem; font-weight:600; }
.int-spot-avatar { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:#2b322f; color:#e6efe9; font-size:.7rem; font-weight:700; }
.int-spot-wave { position:absolute; right:18px; top:21px; display:flex; align-items:center; gap:3px; height:14px; }
.int-spot-wave i { width:3px; height:14px; border-radius:2px; background:#5be39a; transform:scaleY(.22); }
.int-spot-slide.is-talking .int-spot-wave i { animation:int-wave .8s ease-in-out infinite alternate; }
.int-spot-wave i:nth-child(2n) { animation-duration:.6s !important; animation-delay:-.3s !important; }
.int-spot-wave i:nth-child(3n) { animation-duration:1s !important; animation-delay:-.5s !important; }
.int-spot-said { margin-top:12px; color:white; font-size:1.02rem; font-weight:500; line-height:1.42; letter-spacing:-.01em; }
.int-spot-said .w { display:inline-block; transition:opacity .3s ease,transform .45s var(--int-soft); }
.int-spot-slide.is-story .int-spot-said .w:not(.is-in) { opacity:0; transform:translateY(5px); }
.int-spot-steps { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.int-spot-steps li {
  display:grid;
  grid-template-columns:9px minmax(0,1fr) 22px;
  align-items:center;
  column-gap:13px;
  min-height:56px;
  padding:9px 14px 9px 16px;
  border-radius:17px;
  background:white;
  box-shadow:0 1px 2px #0d13210f,0 10px 24px -18px #0d132140;
  transition:opacity .3s ease,transform .65s var(--int-spring);
}
.int-spot-steps li::before { content:""; grid-row:1 / span 2; width:9px; height:9px; border-radius:50%; background:var(--brand); }
.int-spot-slide[data-app="own_api"] .int-spot-steps li::before { background:#0d1321; }
.int-spot-steps li::after {
  content:"";
  grid-column:3;
  grid-row:1 / span 2;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e3f4ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008757' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.int-spot-steps strong { grid-column:2; overflow:hidden; font-size:.86rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.int-spot-steps small { grid-column:2; overflow:hidden; color:var(--muted); font-size:.77rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.int-spot-slide.is-story .int-spot-steps li:not(.is-in) { opacity:0; transform:translateY(-14px) scale(.94); }
.int-spot-slide.is-story .int-spot-steps li.is-in::after { animation:int-pop .5s var(--int-spring) .2s both; }

/* The dock: every app's mark; the ring follows the chosen app and fills while a tour plays */
.int-spot-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }
.int-spot-nav[hidden] { display:none; }
.int-spot-arrow { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--int-stage); color:var(--ink); cursor:pointer; transition:background .2s,transform .35s var(--int-spring); }
.int-spot-arrow:hover { background:#e6eae8; }
.int-spot-arrow:active { transform:scale(.92); }
.int-spot-arrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.int-spot-arrow:focus-visible { outline:3px solid var(--dark); outline-offset:3px; }
.int-dock-scroll { position:relative; min-width:0; }
.int-dock { position:relative; display:flex; align-items:center; gap:9px; min-width:0; margin:0; padding:12px 14px; border:0; }
.int-dock label { position:relative; display:grid; place-items:center; flex:none; width:40px; height:40px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.int-dock label.is-group { margin-left:13px; }
.int-dock label.is-group::before { content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:1px; background:#d5dbd8; }
.int-dock input { position:absolute; width:1px; height:1px; opacity:0; }
.int-dock .int-token {
  --size:36px;
  border-radius:11px;
  transform:translateY(calc(var(--m,0) * -9px)) scale(calc(1 + var(--m,0) * .42));
  transition:transform .55s var(--int-soft),filter .25s ease;
}
.int-dock.is-magnifying .int-token { transition:transform .14s ease-out,filter .25s ease; }
.int-dock label:has(input:focus-visible) .int-token { outline:3px solid var(--dark); outline-offset:4px; }
.int-dock-tip {
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  z-index:3;
  padding:5px 9px;
  border-radius:8px;
  background:#0d1321;
  color:white;
  font-size:.72rem;
  font-weight:650;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,calc(var(--m,0) * -15px + 4px));
  pointer-events:none;
  transition:opacity .15s ease,transform .3s var(--int-soft);
}
.int-dock label:hover .int-dock-tip,.int-dock label:has(input:focus-visible) .int-dock-tip { opacity:1; transform:translate(-50%,calc(var(--m,0) * -15px)); }
.int-dock-ring {
  position:absolute;
  left:0;
  top:50%;
  width:50px;
  height:50px;
  margin:-25px 0 0 -25px;
  pointer-events:none;
  transform:translateX(var(--rx,0px)) translateY(calc(var(--rm,0) * -9px)) scale(calc(1 + var(--rm,0) * .42));
  transition:transform .75s var(--int-soft);
}
.int-dock.is-magnifying .int-dock-ring { transition:transform .14s ease-out; }
.int-dock-ring svg { width:100%; height:100%; overflow:visible; transform:rotate(-90deg); }
.int-dock-ring circle { fill:none; stroke:#d5dbd8; stroke-width:2.5; }
.int-dock-ring .int-dock-fill { stroke:#008757; stroke-dasharray:100; stroke-dashoffset:0; stroke-linecap:round; }
.int-dock-ring.is-timing .int-dock-fill { animation:int-dock-fill var(--delay,6500ms) linear forwards; }
.int-spot:not([data-playback="playing"]) .int-dock-ring.is-timing .int-dock-fill { animation-play-state:paused; }
@keyframes int-dock-fill { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }

/* Find an app: search names and jobs, or open the full list */
.int-browse { margin-top:56px; }
.int-browse-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding:24px 24px 24px 30px; border-radius:26px; background:var(--int-stage); }
.int-browse-bar[hidden] { display:none; }
.int-browse-copy h3 { font-size:1.3rem; letter-spacing:-.02em; }
.int-browse-copy p { margin-top:4px; color:var(--muted); font-size:.9rem; }
.int-browse-copy button { padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:650; text-decoration:underline dotted #8a948f 1.5px; text-underline-offset:4px; cursor:pointer; transition:color .2s; }
.int-browse-copy button:hover { color:var(--dark); text-decoration-color:currentColor; }
.int-browse-copy button:focus-visible { outline:3px solid var(--dark); outline-offset:2px; border-radius:4px; }
.int-browse-tools { display:flex; gap:10px; flex:1 1 400px; max-width:540px; }
.int-search { position:relative; display:flex; align-items:center; flex:1; min-width:0; height:50px; padding:0 18px 0 46px; border-radius:999px; background:white; box-shadow:0 1px 2px #0d13210f; transition:box-shadow .2s ease; }
.int-search:focus-within { box-shadow:0 0 0 3px #00875740,0 1px 2px #0d13210f; }
.int-search svg { position:absolute; left:17px; width:19px; height:19px; fill:none; stroke:#58616b; stroke-width:2; stroke-linecap:round; }
.int-search input { width:100%; height:100%; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-size:.95rem; outline:none; }
.int-search input::placeholder { color:#7a8580; }
.int-search input::-webkit-search-cancel-button { cursor:pointer; }
.int-browse-toggle { display:inline-flex; align-items:center; gap:8px; flex:none; height:50px; padding:0 18px 0 22px; border:0; border-radius:999px; background:#0d1321; color:white; font:inherit; font-size:.86rem; font-weight:650; white-space:nowrap; cursor:pointer; transition:background .2s,transform .35s var(--int-spring); }
.int-browse-toggle:hover { background:#1b2436; }
.int-browse-toggle:active { transform:scale(.96); }
.int-browse-toggle:focus-visible { outline:3px solid var(--dark); outline-offset:3px; }
.int-browse-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s var(--int-spring); }
.int-browse-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.int-all { display:grid; grid-template-rows:1fr; transition:grid-template-rows .6s var(--int-ease); }
.int-all.is-closed { grid-template-rows:0fr; }
.int-all-inner { min-height:0; overflow:hidden; padding:0 4px 4px; margin:0 -4px; }
.int-all.is-closed .int-all-inner { visibility:hidden; transition:visibility 0s .6s; }
.int-all-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; padding-top:24px; margin-bottom:18px; }
.int-filter { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; border:0; min-width:0; }
.int-count { color:var(--muted); font-size:.82rem; font-weight:600; }
.int-count:empty { display:none; }
.int-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.int-card {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:22px;
  border-radius:22px;
  background:var(--int-stage);
  transition:background .25s ease;
}
.int-card[hidden] { display:none; }
.int-card:hover { background:#e9ecea; }
.int-card .int-token { --size:44px; border-radius:13px; box-shadow:0 8px 18px -10px var(--brand),inset 0 0 0 1px #ffffff40; transition:transform .5s var(--int-spring); }
.int-card:hover .int-token { transform:translateY(-3px) rotate(-4deg); }
.int-card h3 { font-size:1.08rem; letter-spacing:-.02em; }
.int-card-cat { display:block; margin-top:3px; color:#4d6b5c; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.int-card p { font-size:.85rem; line-height:1.55; }
.int-card-own { grid-column:1 / -1; flex-direction:row; align-items:center; gap:20px; background:#0d1321; }
.int-card-own:hover { background:#141b2c; }
.int-card-own p { max-width:640px; }
.int-card-own h3 { color:white; }
.int-card-own .int-card-cat { color:#8fe0b8; }
.int-card-own p { color:#bfd0c8; }
.int-browse:not(.is-ready):has(input[value="crm"]:checked) .int-card:not([data-cat~="crm"]),
.int-browse:not(.is-ready):has(input[value="calendars"]:checked) .int-card:not([data-cat~="calendars"]),
.int-browse:not(.is-ready):has(input[value="helpdesk"]:checked) .int-card:not([data-cat~="helpdesk"]),
.int-browse:not(.is-ready):has(input[value="accounts"]:checked) .int-card:not([data-cat~="accounts"]),
.int-browse:not(.is-ready):has(input[value="alerts"]:checked) .int-card:not([data-cat~="alerts"]),
.int-browse:not(.is-ready):has(input[value="automation"]:checked) .int-card:not([data-cat~="automation"]),
.int-browse:not(.is-ready):has(input[value="more"]:checked) .int-card:not([data-cat~="more"]) { display:none; }
.int-empty { display:flex; flex-direction:column; align-items:center; gap:2px; padding:44px 20px; border-radius:22px; background:var(--int-stage); text-align:center; }
.int-empty[hidden] { display:none; }
.int-empty p { color:#2c3732; font-weight:600; }
.int-empty .text-link { margin-top:6px; }
.int-directory .footnote { margin-top:22px; max-width:760px; }

.int-next { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.int-next a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px;
  border-radius:20px;
  background:var(--int-stage);
  color:var(--ink);
  text-decoration:none;
  transition:background .2s;
}
.int-next a:hover { background:#e9ecea; }
.int-next a .icon { transition:transform .45s var(--int-spring); }
.int-next a:hover .icon { transform:translateX(4px); }
.int-next strong { display:block; font-size:1rem; }
.int-next small { display:block; margin-top:3px; color:var(--muted); font-size:.82rem; }
.int-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; margin-top:40px; padding:34px 38px; border-radius:24px; background:#0d1321; color:white; }
.int-cta h2 { font-size:clamp(1.6rem,2.6vw,2.2rem); color:white; }
.int-cta p { margin-top:6px; color:#b9c6c0; }

/* Links into the page from product pages */
.int-strip { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:22px; }
.int-strip-tokens { display:flex; }
.int-strip-tokens .int-token { --size:30px; margin-left:-7px; box-shadow:0 0 0 2px white; }
.int-strip-tokens .int-token:first-child { margin-left:0; }
.int-strip .text-link { margin:0; }

@media (max-width:1120px) {
  .int-spot { --slide-w:calc(100% - 120px); }
  .int-dock { gap:7px; }
  .int-dock label { width:34px; height:34px; }
  .int-dock label.is-group { margin-left:11px; }
  .int-dock label.is-group::before { left:-10px; }
  .int-dock .int-token { --size:31px; border-radius:10px; }
  .int-dock-ring { width:44px; height:44px; margin:-22px 0 0 -22px; }
}
@media (max-width:960px) {
  .int-spot-arrow { display:none; }
  .int-spot-nav { display:block; margin-inline:-16px; }
  .int-dock-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); }
  .int-dock-scroll::-webkit-scrollbar { display:none; }
  .int-dock { width:max-content; margin-inline:auto; padding:12px 28px; }
  .int-dock-tip { display:none; }
}
@media (max-width:720px) {
  .int-spot { --slide-w:calc(100% - 56px); }
  .int-spot-slide { grid-template-columns:minmax(0,1fr); gap:16px; }
  .int-spot-about { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:14px; padding:4px 4px 0; }
  .int-spot-about > .int-token { --size:48px; border-radius:15px; }
  .int-spot-about h3 { margin-top:0; font-size:1.3rem; }
  .int-spot-can,.int-spot-note { grid-column:1 / -1; }
  .int-spot-can { margin-top:16px; }
  .int-spot-note { padding-top:12px; }
}
@media (max-width:1080px) {
  .int-bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .int-demo-card,.int-demo-card:nth-child(-n+2) { grid-column:span 1; }
  .int-demo-card:nth-child(5) { grid-column:1 / -1; }
  .int-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .int-island-stage { height:470px; }
  .int-island.is-ring { --iy:204px; }
  .int-island.is-done { --iy:140px; }
  .int-island-stage.is-done { --ty:212px; }
  .int-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .int-next { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .int-island-stage { height:440px; border-radius:26px; }
  .int-island { --ih:176px; --iy:22px; }
  .int-island-live { height:176px; padding:14px 15px; }
  .int-island-said { margin-top:12px; font-size:.95rem; }
  .int-island.is-ring { --iy:189px; }
  .int-island-stage { --ty:216px; }
  .int-island-stage.is-done { --ty:204px; }
  .int-toast { height:56px; top:calc(var(--i) * 64px); }
  .int-island-stage.is-done .int-toast.is-in { transform:translateY(calc(var(--i) * -56px)) scale(calc(1 - var(--i) * .05)); }
  .int-calls { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin-inline:-16px; padding:2px 16px 4px; scrollbar-width:none; }
  .int-calls::-webkit-scrollbar { display:none; }
  .int-calls label { flex:none; }
  .int-bento { grid-template-columns:minmax(0,1fr); }
  .int-demo-card:nth-child(5) { grid-column:auto; }
  .int-demo { height:270px; }
  .int-spot { --slide-w:calc(100% - 32px); }
  .int-spot-stage { padding:16px 0; border-radius:26px; }
  .int-spot-slide { padding:14px; border-radius:22px; }
  .int-spot-call { padding:12px; border-radius:18px; }
  .int-spot-line { padding:12px 14px 14px; border-radius:18px; }
  .int-spot-said { font-size:.95rem; }
  .int-spot-steps li { min-height:52px; padding:8px 12px 8px 14px; }
  .int-browse { margin-top:40px; }
  .int-browse-bar { padding:20px; }
  .int-browse-tools { flex-wrap:wrap; }
  .int-search,.int-browse-toggle { flex:1 1 100%; justify-content:center; }
  .int-grid { grid-template-columns:minmax(0,1fr); }
  .int-card { flex-direction:row; align-items:flex-start; padding:18px; }
  .int-cta { padding:28px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .int-island,.int-island *,.int-toasts,.int-toast,.int-demo *,.int-calls span,.int-filter span,.int-card,.int-next a,
  .int-spot-slide,.int-spot-slide *,.int-dock *,.int-dock-ring,.int-all,.int-all-inner,.int-browse-toggle,.int-browse-toggle svg,.int-spot-arrow { transition:none !important; animation:none !important; }
  .int-card:hover,.int-next a:hover { transform:none; }
}