.int-hub { --gap: clamp(1.25rem, 3vw, 3rem); display: grid; gap: var(--space-4); min-width: 0; }
.int-hub > * { min-width: 0; }
.int-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.int-node { position: relative; display: grid; gap: 0.1rem; min-width: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.int-node b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: var(--track-display); color: var(--ink); }
.int-node span { font-size: var(--text-xs); line-height: 1.35; color: var(--ink-mute); }
.int-node i { display: none; }
.int-core .app-card + .app-card { margin-top: 0.9em; }
.int-core .ft-rows > li { padding: 0.6em 0; }
.int-hub > .mock-note { margin-top: 0; }
@media (min-width: 60em) {
  .int-hub { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 12.5rem); align-items: stretch; gap: var(--space-3) var(--gap); padding-inline: clamp(1rem, 2vw, 2rem); }
  .int-hub > .mock-note { grid-column: 1 / -1; }
  .int-col { grid-template-columns: 1fr; align-content: space-evenly; gap: var(--space-3); }
  .int-node::after { content: ""; position: absolute; top: 50%; width: var(--gap); height: 1px; background: var(--line-strong); }
  .int-col--l .int-node::after { left: 100%; }
  .int-col--r .int-node::after { right: 100%; }
  .int-node i { display: block; position: absolute; z-index: 1; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border-radius: 50%; background: var(--orange); opacity: 0; }
  .int-col--l .int-node i { left: 100%; --to: calc(var(--gap) - 0.4rem); }
  .int-col--r .int-node i { right: 100%; --to: calc(0.4rem - var(--gap)); }
  .js .int-hub.is-live .int-in i { animation: intIn 2.6s var(--ease-smooth) var(--d, 0s) infinite; }
  .js .int-hub.is-live .int-both i { animation: intBoth 5.2s var(--ease-smooth) var(--d, 0s) infinite; }
  .js .int-hub.is-live .int-out i { animation: intOut 2.6s var(--ease-smooth) var(--d, 0s) infinite; }
}
@keyframes intIn { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(var(--to)); opacity: 0; } }
@keyframes intOut { 0% { transform: translateX(var(--to)); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes intBoth { 0% { transform: translateX(0); opacity: 0; } 8%, 40% { opacity: 1; } 48% { transform: translateX(var(--to)); opacity: 0; } 52% { transform: translateX(var(--to)); opacity: 0; } 60%, 92% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .int-node i { display: none; } }
.int-flows-wrap { border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.int-flows { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.4; }
.int-flows th, .int-flows td { padding: var(--space-3) var(--space-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.int-flows thead th { padding-block: var(--space-4); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); background: var(--paper-2); white-space: nowrap; }
.int-flows tbody th { width: 24%; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-display); color: var(--ink); }
.int-flows td { color: var(--ink-soft); }
.int-flows tbody tr:last-child > * { border-bottom: 0; }
.int-flows .int-none { color: var(--ink-mute); }
.int-arrow { display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.5em; vertical-align: -0.2em; border-radius: var(--radius-sm); background: var(--paper-3); border: 1px solid var(--line); position: relative; }
.int-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.36em; height: 0.36em; border-top: 2px solid var(--ink-mute); border-right: 2px solid var(--ink-mute); transform: translate(-65%, -50%) rotate(45deg); }
.int-arrow--in::before { transform: translate(-35%, -50%) rotate(-135deg); }
@media (max-width: 47.99em) {
  .int-flows thead { display: none; }
  .int-flows tr { display: grid; padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--line); }
  .int-flows tbody tr:last-child { border-bottom: 0; }
  .int-flows th, .int-flows td { padding: 0; border: 0; width: auto; }
  .int-flows tbody th { width: auto; margin-bottom: var(--space-1); font-size: var(--text-base); }
  .int-flows td { padding-left: 3.2em; position: relative; }
  .int-flows td::before { content: "In"; position: absolute; left: 0; top: 0.1em; font-size: var(--text-xs); font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }
  .int-flows td + td::before { content: "Out"; }
}
.int-wa { display: grid; gap: var(--space-5); align-items: center; }
.int-wa > * { min-width: 0; }
@media (min-width: 44em) { .int-wa { grid-template-columns: auto 1fr; } .int-wa .phone { width: 16.5rem; } }
.int-sms { display: grid; gap: var(--space-5); align-items: center; }
.int-sms > * { min-width: 0; }
@media (min-width: 44em) { .int-sms { grid-template-columns: 1fr auto; } .int-sms .phone { width: 15.5rem; } }
.int-sms-count { margin-top: 0.9em; padding: 0.7em 0.9em; border-radius: 0.8em; background: var(--card); border: 1px solid var(--app-border); }
.int-sms .k-form-foot { margin-top: 0.9em; }
.int-signin { width: min(100%, 26rem); }
.int-card-title { margin-bottom: 0.6em; font-size: 1.25em; font-weight: 700; letter-spacing: -0.02em; color: var(--app-text); }
.int-ms { justify-content: center; gap: 0.7em; background: var(--card); }
.int-top { align-items: start; }
.page-integrations .k-rec { margin-bottom: 0.8em; }
.page-integrations .k-rec-side b span { font-size: 1em; color: inherit; }
.int-doc { padding: 1.1em 1.2em; border-radius: 1em; background: var(--card); border: 1px solid var(--app-border); }
.int-doc .k-lines { margin: 0; }
.int-doc-edit { display: flex; align-items: center; gap: 0.4em; margin: 0.9em 0 0.7em; font-size: 0.9em; color: var(--blue-text); }
.int-doc-edit .k-avatar { width: 1.9em; height: 1.9em; font-size: 0.7em; }
.int-doc-edit .k-avatar + .k-avatar { margin-left: -0.7em; margin-right: 0.3em; box-shadow: 0 0 0 2px var(--card); }
.int-doc-new i { background: var(--blue-bg); }
.js [data-step="2"] .int-confirm { animation: kPulse 1.2s ease-in-out infinite; }
.int-video { width: 100%; }
.int-video-frame { position: relative; aspect-ratio: 16 / 8; border-radius: 1em; overflow: hidden; background: var(--ink); }
.int-face { position: absolute; left: 50%; bottom: 0; width: 26%; aspect-ratio: 1 / 1.05; transform: translateX(-70%); border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: var(--ink-faint); opacity: 0.55; box-shadow: 0 6em 0 3em var(--ink-faint); }
.int-idcard { position: absolute; right: 22%; bottom: 14%; width: 17%; aspect-ratio: 1.55 / 1; border-radius: 0.4em; background: linear-gradient(135deg, var(--paper), var(--paper-3)); box-shadow: var(--shadow); }
.int-idcard::before { content: ""; position: absolute; left: 12%; top: 22%; width: 26%; height: 56%; border-radius: 0.2em; background: var(--ink-faint); opacity: 0.6; }
.int-idcard::after { content: ""; position: absolute; left: 48%; top: 28%; width: 38%; height: 2px; background: var(--ink-faint); box-shadow: 0 0.45em 0 var(--ink-faint), 0 0.9em 0 var(--ink-faint); opacity: 0.7; }
.int-rec { position: absolute; left: 0.9em; top: 0.8em; display: flex; align-items: center; gap: 0.45em; padding: 0.2em 0.7em; border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 600; color: var(--on-ink); background: rgba(0, 0, 0, 0.4); }
.int-rec::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--red); }
.int-snaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin: 0.6em 0 0.8em; }
.int-snaps li { aspect-ratio: 16 / 9; border-radius: 0.6em; background: var(--ink); box-shadow: inset 0 0 0 2px var(--card), 0 0 0 1px var(--app-border); }
.int-w3w { margin: 0.2em 0 0.4em; font-weight: 700; font-size: 1.15em; color: var(--app-text); overflow-wrap: anywhere; }
.int-w3w i { font-style: normal; color: var(--red); margin-right: 0.1em; }
.int-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35em; margin: 0.2em 0 0.6em; }
.int-days b { display: grid; place-content: center; aspect-ratio: 1; border-radius: 0.5em; font-weight: 600; color: var(--app-text-2); background: var(--app-bg-alt); }
.int-days b.is-bh { color: var(--purple-text); background: var(--purple-bg); }
.int-ev { margin-top: 0.4em; padding: 0.4em 0.7em; border-radius: 0.5em; border-left: 3px solid var(--orange); background: var(--orange-wash); color: var(--app-text); font-weight: 500; }
.int-ev--b { border-left-color: var(--purple); background: var(--purple-bg); }
.int-wx { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; font-weight: 600; color: var(--app-text-2); }
.int-wx i { width: 1.1em; height: 0.7em; border-radius: 1em; background: var(--ink-faint); box-shadow: 0.3em -0.3em 0 -0.05em var(--ink-faint); }
.page-integrations .k-ts thead th:first-child { width: 24%; }
@media (max-width: 39.99em) {
  .page-integrations .k-ts thead th:first-child { width: 30%; }
  .page-integrations .k-ts .k-ts-state { display: none; }
  .page-integrations .k-ts .k-ts-total { width: 16%; }
}
.int-sync { margin-top: 0.8em; }
.int-core .app-search { display: none; }
.int-core .k-pagehead { margin-bottom: 0.7em; }
@media (min-width: 64em) {
  .page-integrations .fhero--j .fhero-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--space-10); align-items: center; }
  .page-integrations .fhero--j .int-hub { --gap: 1.1rem; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) minmax(0, 9.5rem); padding-inline: clamp(0.6rem, 0.4rem + 1vw, 1rem); }
  .page-integrations .fhero--j .int-node { padding: 0.5rem 0.65rem; }
  .page-integrations .fhero--j .int-node b { font-size: var(--text-sm); }
}
@media (max-width: 59.99em) {
  .int-node { padding: 0.45rem 0.7rem; }
  .int-node b { font-size: var(--text-sm); }
}
.int-x { --jp-h: 21.5rem; }
.int-x .jp-copy { align-items: start; }
.int-x .jp-lede { margin-top: var(--space-2); }
.int-x .jp-links .link-arrow { margin-top: var(--space-3); }
.int-side { display: grid; gap: var(--space-4); align-content: start; }
.int-x .jx-note a { font-weight: 600; color: var(--orange-text); text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 60em) {
  .int-x .jx-group { margin-top: var(--space-3); }
  .int-x .jx-note { align-self: start; margin-top: var(--space-4); }
}
.int-io { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); font-size: var(--text-sm); line-height: 1.4; overflow: hidden; }
.int-io > div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: 0.55rem 0.9rem; }
.int-io > div + div { border-top: 1px solid var(--line); }
.int-io dt { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }
.int-io dd { margin: 0; font-weight: 600; color: var(--ink); }
.int-io .int-none dd { font-weight: 400; color: var(--ink-mute); }
.int-x .jp-screen > * { max-width: 50rem; }
.int-x .jp-screen .phone { width: min(100%, 13rem); }
.int-x .int-wa { max-width: 40rem; gap: var(--space-6); }
.int-x .int-sms { max-width: 44rem; gap: var(--space-6); }
@media (min-width: 44em) {
  .int-x .int-wa .phone, .int-x .int-sms .phone { width: 13rem; }
}
.int-mail { display: grid; gap: var(--space-4); align-items: center; }
.int-mail > * { min-width: 0; }
@media (min-width: 44em) { .int-mail { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.int-signin2 { display: grid; gap: var(--space-4); align-items: center; max-width: 44rem; }
.int-signin2 > * { min-width: 0; }
@media (min-width: 44em) { .int-signin2 { grid-template-columns: 1fr 1fr; } }
.int-signin2 .int-signin { width: 100%; }
.int-x .int-top { max-width: 48rem; align-items: center; }
.int-x .int-video { display: grid; gap: 1em; align-items: center; max-width: 46rem; }
.int-x .int-video > * { min-width: 0; }
.int-video-side .int-card-title small { margin-left: 0.4em; font-size: 0.7em; font-weight: 500; letter-spacing: 0; color: var(--app-text-3); }
.int-video-side .int-snaps { margin-top: 0; }
@media (min-width: 44em) { .int-x .int-video { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .int-x .int-video-frame { aspect-ratio: 16 / 10; } }
.int-why3 { margin-bottom: var(--space-6); }
.int-why3 b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--track-display); line-height: 1.25; margin-bottom: var(--space-1); }
.page-integrations .jd-body .ft-more { margin-top: var(--space-6); }
.page-integrations .jd-body .ft-minis { gap: var(--space-4); }
.page-integrations .jd-body .ft-mini { padding: var(--space-4); gap: var(--space-4); }
.int-x .jp-points b:first-child::after { content: none; }
@media (max-width: 29.99em) { .int-io > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }
@media (min-width: 60em) {
  .int-x .int-mail { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .int-x .int-signin2 { max-width: 48rem; }
  .int-x .int-signin2 .screen { font-size: 15px; }
  .int-x .int-top .screen { font-size: 13.5px; }
  .int-x .int-video { font-size: 13.5px; max-width: 50rem; }
  .int-x #link-sharepoint .screen, .int-x #link-credas .screen { font-size: 13px; }
}
@media (min-width: 40em) { .int-io--row { grid-template-columns: 1fr 1fr; } .int-io--row > div + div { border-top: 0; border-left: 1px solid var(--line); } }
@media (min-width: 60em) {
  html:not(.js) .int-x { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  html:not(.js) .int-x > .jx-side, html:not(.js) .int-x > .jx-stage, html:not(.js) .int-x > .jx-note { grid-column: 1; grid-row: auto; }
  html:not(.js) .int-x .jx-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  html:not(.js) .int-x .jx-group { display: none; }
  html:not(.js) .int-x .jx-tab { padding: 0.5rem 0.95rem; border-color: var(--line-strong); background: var(--card); }
  html:not(.js) .int-x .jx-tab::after { display: none; }
  .int-x .int-signin2 .screen { font-size: 16px; }
}
@media (min-width: 60em) {
  .int-x .int-mail { max-width: 53rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .int-x .int-mail .screen { font-size: 13px; }
  .int-x #link-sharepoint .screen, .int-x #link-credas .screen, .int-x #link-clocking .screen { font-size: 15px; }
  .int-x .int-video { font-size: 15px; max-width: 52rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .int-x .int-video-frame { aspect-ratio: 16 / 11; }
  .int-x .int-top { align-items: center; }
  html:not(.js) .int-x { --jp-h: 0rem; }
}
.int-x .int-top .ft-card + .ft-card { margin-top: 0.6em; }
.int-x .phone--sms .phone-screen { aspect-ratio: 9 / 12.3; }
.int-snaps li { position: relative; overflow: hidden; }
.int-snaps li::after { content: ""; position: absolute; left: 50%; bottom: -18%; width: 34%; aspect-ratio: 1 / 1.1; transform: translateX(-50%); border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: var(--ink-faint); opacity: 0.55; box-shadow: 0 1.6em 0 0.9em var(--ink-faint); }
.int-snaps li.int-snap-doc::after { left: 50%; bottom: 22%; width: 46%; aspect-ratio: 1.55 / 1; border-radius: 0.2em; background: var(--paper-3); opacity: 0.9; box-shadow: none; }
.int-tr { margin-bottom: 0.8em; padding: 0.7em 0.9em; border-radius: 0.8em; background: var(--card); border: 1px solid var(--app-border); }
.int-tr > span { display: block; margin-bottom: 0.6em; font-size: 0.78em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-text-3); }
.int-flows-wrap { --step: 0.04s; }
.page-integrations .jd-body .ft-minis { --step: 0.05s; }
.int-pick .jd-note { margin-bottom: var(--space-4); }
.int-pick .jp-screen > .screen { width: min(100%, 24rem); font-size: 14px; }
@media (min-width: 60em) {
  .page-integrations .int-pick.jx--side { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .page-integrations .int-pick > .jx-side, .page-integrations .int-pick > .jx-stage { grid-column: 1; grid-row: auto; }
  .int-pick > .jx-side { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
  .int-pick .jd-note { margin-bottom: 0; }
  .js .int-pick .jx-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .int-pick .jx-tab { min-height: 3.2rem; border-color: var(--line); background: var(--card); }
  .page-integrations .int-pick .jp--row { --jp-h: 15rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .int-pick .jp-screen > .screen { font-size: 15px; }
}
#flows-all { margin-top: var(--space-3); }