/* Data sync page only. Loaded via `extra: crm, p-integrations-data-sync`. Every class is scoped with .pids- */

/* ---------- hero: two database cylinders, record pills, conflict badge ---------- */
.pids-hero .pids-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.pids-hero .crm-sub { max-width: 46ch; }
.pids-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pids-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid #DCE4EE; font: 600 13.5px/1.25 var(--f-body); color: #0B2540; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.pids-chips img { flex: none; width: 22px; height: 22px; }
.pids-chips__k { flex: none; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px; background: #E4EEFA; color: #1D5FA8; font: 800 10.5px/1 var(--f-body); }
.pids-chips__k--warn { background: #FFF1D0; color: #8A5A00; }

.pids-db { position: relative; margin: 0; border-radius: 20px; background: #fff; border: 1px solid #DCE4EE; box-shadow: 0 44px 80px -48px rgba(8,34,56,.6); overflow: hidden; }
.pids-db__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #E8EEF4; background: #F6F9FC; font: 600 12.5px/1 var(--f-body); color: #334155; }
.pids-db__bar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3FB97A; box-shadow: 0 0 0 4px rgba(63,185,122,.18); }
.pids-db__bar em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #1D5FA8; }
.pids-db__stage { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr) 128px; align-items: center; gap: 10px; padding: 34px 22px 26px; background: linear-gradient(180deg, #FBFDFF, #F2F7FB); }

.pids-cyl { position: relative; z-index: 1; }
.pids-cyl__top { display: block; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--k); position: relative; z-index: 2; }
.pids-cyl__body { display: grid; justify-items: center; gap: 4px; margin-top: -13px; padding: 24px 8px 18px; border: 2px solid var(--k); border-top: 0; border-radius: 0 0 50% 50% / 0 0 22px 22px; background: var(--bg); text-align: center; }
.pids-cyl__body b { font: 700 14.5px/1.2 var(--f-display); color: #082238; }
.pids-cyl__body small { font: 500 11.5px/1.3 var(--f-body); color: #64748B; }
.pids-cyl--a { --k: #1D5FA8; --bg: #EEF4FC; }
.pids-cyl--b { --k: #0E7C86; --bg: #E9F6F6; }

.pids-lanes { position: relative; display: grid; gap: 26px; padding: 18px 0; min-width: 0; }
.pids-lane { position: relative; height: 26px; }
.pids-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: repeating-linear-gradient(90deg, #B8CADC 0 7px, transparent 7px 12px); }
.pids-lane::after { content: ""; position: absolute; top: 8px; width: 9px; height: 9px; border-top: 2px solid #8AA4BD; border-right: 2px solid #8AA4BD; }
.pids-lane--r::after { right: 0; transform: rotate(45deg); }
.pids-lane--l::after { left: 0; transform: rotate(-135deg); }
.pids-pill { position: absolute; top: 0; left: 0; padding: 5px 8px; border-radius: 7px; font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; color: #fff; opacity: 0; }
.pids-lane--r .pids-pill { background: #1D5FA8; }
.pids-lane--l .pids-pill { background: #0E7C86; }
.pids-db:not(.is-arm) .pids-pill[data-pill="r1"] { opacity: 1; left: 18%; }
.pids-db:not(.is-arm) .pids-pill[data-pill="l1"] { opacity: 1; left: 46%; }

.pids-badge { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; gap: 2px; width: max-content; max-width: 210px; margin: 0; padding: 8px 12px; border-radius: 12px; background: #FFF6DD; border: 1.5px solid #E0A21B; box-shadow: 0 16px 28px -18px rgba(8,34,56,.55); text-align: center; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity 260ms, transform 360ms cubic-bezier(.2,1.4,.4,1), background-color 300ms, border-color 300ms; }
.pids-badge b { font: 800 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #8A5A00; }
.pids-badge span { font: 600 12px/1.35 var(--f-body); color: #4A3500; }
.pids-badge.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pids-badge.is-ok { background: #E8F5EC; border-color: #2F7D4A; }
.pids-badge.is-ok b { color: #2F7D4A; }
.pids-badge.is-ok span { color: #1E4D2F; }
.pids-db:not(.is-arm) .pids-badge { opacity: 1; transform: translate(-50%, -50%); }

.pids-db__rec { display: grid; gap: 0; margin: 0; padding: 0 22px 20px; background: #F2F7FB; }
.pids-db__rec > div { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; }
.pids-db__rec dt { font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pids-db__rec dd { display: grid; gap: 2px; margin: 0; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #082238; }
.pids-db__rec dd em { font: 500 11px/1.2 var(--f-body); font-style: normal; color: #64748B; }
.pids-db__rec dd span { transition: color 300ms, text-decoration-color 300ms; }
.pids-db__rec dd span.is-out { color: #94A3B8; text-decoration: line-through; }
.pids-db__rec dd span.is-win { color: #2F7D4A; }
.pids-db__rule { margin-top: 8px; grid-template-columns: 64px minmax(0, 1fr) !important; background: #E8F5EC !important; border-color: #BFE0CB !important; opacity: 1; transition: opacity 300ms; }
.pids-db__rule dd { font: 600 12.5px/1.4 var(--f-body); color: #1E4D2F; }
.pids-db.is-arm .pids-db__rule { opacity: 0; }
.pids-db.is-arm .pids-db__rule.is-on { opacity: 1; }

/* ---------- fit ---------- */
.pids-fit__list { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.pids-fit__list li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.pids-fit__list li.is-no { background: #F6F8FA; border-style: dashed; }
.pids-fit__tag { justify-self: start; padding: 6px 11px; border-radius: 999px; font: 700 12px/1.2 var(--f-body); letter-spacing: .02em; color: #fff; background: #1D5FA8; }
.pids-fit__list li.is-no .pids-fit__tag { background: #fff; color: #475569; border: 1px solid #CBD5E1; }
.pids-fit__list h3 { margin: 0 0 4px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pids-fit__list p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- services: numbered stack ---------- */
.pids-svc__stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.pids-svc__stack li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid var(--c); }
.pids-svc__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--bg); color: var(--c); font: 800 18px/1 var(--f-display); }
.pids-svc__stack h3 { margin: 2px 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pids-svc__stack p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- story: split cards ---------- */
.pids-split { display: grid; gap: 14px; margin-top: 34px; }
.pids-split__head { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pids-split__head::before { content: ""; }
.pids-split__side { padding: 9px 14px; border-radius: 10px; font: 700 13px/1.2 var(--f-body); letter-spacing: .02em; text-align: center; }
.pids-split__side--a { background: #FDEDE4; color: #9A3412; }
.pids-split__side--b { background: #E8F5EC; color: #1E6B3A; }
.pids-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pids-row__when { display: grid; align-content: start; gap: 3px; margin: 0; padding-top: 16px; font: 600 12.5px/1.3 var(--f-body); color: #64748B; }
.pids-row__when time { font: 800 15px/1.2 var(--f-display); color: #082238; }
.pids-card { position: relative; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.pids-card--wide { grid-column: span 2; background: #F6F9FC; }
.pids-card--a { border-left: 4px solid #EA7A45; }
.pids-card--b { border-left: 4px solid #3FB97A; }
.pids-card h3 { margin: 0 0 6px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pids-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pids-card__flag { display: inline-block; margin-bottom: 8px; padding: 4px 9px; border-radius: 6px; font: 800 11px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.pids-card--a .pids-card__flag { background: #FDEDE4; color: #9A3412; }
.pids-card--b .pids-card__flag { background: #E8F5EC; color: #1E6B3A; }
.pids-card--end.pids-card--a { background: #FFF8F4; }
.pids-card--end.pids-card--b { background: #F4FBF6; }
.pids-split.is-arm .pids-row { opacity: 0; transform: translateY(18px); transition: opacity 500ms, transform 500ms; }
.pids-split.is-arm .pids-row .pids-card--b { transition: opacity 500ms 180ms, transform 500ms 180ms; opacity: 0; transform: translateX(14px); }
.pids-split.is-arm .pids-row.is-on { opacity: 1; transform: none; }
.pids-split.is-arm .pids-row.is-on .pids-card--b { opacity: 1; transform: none; }
.pids-story__note { max-width: 860px; margin: 22px 0 0; font-size: 15.5px; line-height: 1.6; color: #475569; }

/* ---------- interactive: sync rule chooser (dark band) ---------- */
.pids-rules__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; margin-top: 34px; align-items: start; }
.pids-rules__pick { display: grid; gap: 12px; }
.pids-rules__pick fieldset { margin: 0; padding: 14px 16px; border: 1px solid rgba(159,192,216,.22); border-radius: 16px; background: rgba(255,255,255,.05); min-width: 0; }
.pids-rules__pick legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font: 700 15px/1.2 var(--f-display); color: #fff; }
.pids-rules__pick legend span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #5FD3F3; color: #082238; font: 800 12px/1 var(--f-body); }
.pids-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pids-opts label { position: relative; cursor: pointer; }
.pids-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pids-opts span { display: inline-block; padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(159,192,216,.35); color: #D7E6F0; font: 600 13.5px/1.3 var(--f-body); transition: background-color 200ms, border-color 200ms, color 200ms; }
.pids-opts label:hover span { border-color: #9FC0D8; }
.pids-opts input:checked + span { background: #5FD3F3; border-color: #5FD3F3; color: #082238; }
.pids-opts input:focus-visible + span { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pids-opts input:disabled + span { opacity: .4; cursor: not-allowed; }
.pids-opts__note { margin: 10px 2px 0; font-size: 13.5px; line-height: 1.45; color: #9FC0D8; }

.pids-rules__out { padding: 20px; border-radius: 18px; background: #F6F9FC; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); min-width: 0; }
.pids-map { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; }
.pids-map__end { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: #F3F7F9; font: 700 13px/1.2 var(--f-body); color: #082238; white-space: nowrap; }
.pids-map__end img { width: 26px; height: 26px; }
.pids-map__wire { position: relative; display: grid; gap: 8px; padding: 4px 0 18px; }
.pids-map__wire i { position: relative; display: block; height: 3px; border-radius: 2px; background: #CBD5E1; transition: background-color 250ms, opacity 250ms; }
.pids-map__wire i::after { content: ""; position: absolute; top: -4px; width: 8px; height: 8px; border-top: 3px solid #CBD5E1; border-right: 3px solid #CBD5E1; transition: border-color 250ms; }
.pids-map__fw::after { right: 0; transform: rotate(45deg); }
.pids-map__bw::after { left: 0; transform: rotate(-135deg); }
.pids-map[data-dir="a2b"] .pids-map__fw, .pids-map[data-dir="two"] .pids-map__fw { background: #1D5FA8; }
.pids-map[data-dir="a2b"] .pids-map__fw::after, .pids-map[data-dir="two"] .pids-map__fw::after { border-color: #1D5FA8; }
.pids-map[data-dir="b2a"] .pids-map__bw, .pids-map[data-dir="two"] .pids-map__bw { background: #0E7C86; }
.pids-map[data-dir="b2a"] .pids-map__bw::after, .pids-map[data-dir="two"] .pids-map__bw::after { border-color: #0E7C86; }
.pids-map[data-dir="a2b"] .pids-map__bw, .pids-map[data-dir="b2a"] .pids-map__fw { opacity: .35; }
.pids-map__wire em { position: absolute; left: 0; right: 0; bottom: 0; font: 600 11.5px/1.2 var(--f-body); font-style: normal; text-align: center; color: #64748B; }
.pids-map.is-pulse .pids-map__wire i { animation: pids-pulse 600ms ease-out; }
@keyframes pids-pulse { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.pids-rules__say { min-height: 3em; margin: 14px 2px 0; font: 600 15.5px/1.5 var(--f-body); color: #082238; }
.pids-tbl { margin-top: 12px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; overflow: hidden; }
.pids-tbl__r { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #EEF2F6; }
.pids-tbl__r:first-child { border-top: 0; }
.pids-tbl__r > span { padding: 10px 12px; font-size: 14px; line-height: 1.35; color: #334155; min-width: 0; overflow-wrap: anywhere; }
.pids-tbl__r > span[role="rowheader"] { font-weight: 700; color: #082238; }
.pids-tbl__r--h { background: #F3F7F9; }
.pids-tbl__r--h > span { font: 700 11px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.pids-tbl__r > span[role="cell"] small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.pids-tbl__r > span.is-good { color: #1E6B3A; font-weight: 600; }
.pids-tbl__r > span.is-bad { color: #B42318; font-weight: 600; }
.pids-tbl__r > span.is-wait { color: #8A5A00; font-weight: 600; }
.pids-tbl__r > span.is-good small, .pids-tbl__r > span.is-bad small, .pids-tbl__r > span.is-wait small { color: #64748B; }
.pids-rules__warn { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; background: #FFF6DD; border: 1px solid #F3D48A; font-size: 14px; line-height: 1.5; color: #6B4A00; }
.pids-rules__take { display: grid; gap: 3px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #082238; font-size: 14px; line-height: 1.5; color: #D7E6F0; }
.pids-rules__take b { font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #5FD3F3; }
.pids-rules__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: #9FC0D8; }

/* ---------- Zoho patterns ---------- */
.pids-zo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pids-zo__card { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pids-zo__path { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.pids-zo__path img, .pids-zo__mono { flex: none; width: 44px; height: 44px; padding: 7px; border-radius: 12px; background: #F3F7F9; border: 1px solid #E2E8F0; box-sizing: border-box; }
.pids-zo__mono { display: grid; place-items: center; width: auto; min-width: 44px; padding: 0 8px; font: 800 11px/1 var(--f-body); letter-spacing: .04em; color: #0E7C86; background: #E2F4F5; border-color: #C3E5E7; }
.pids-zo__path i { flex: 1 1 0; max-width: 40px; height: 2px; background: repeating-linear-gradient(90deg, #94A3B8 0 5px, transparent 5px 9px); }
.pids-zo__card h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pids-zo__card p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- pricing ---------- */
.pids-price__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; counter-reset: pidsp; }
.pids-price__part { position: relative; padding: 22px 20px 20px; border-radius: 16px; background: #F3F7F9; border: 1px solid #E2E8F0; counter-increment: pidsp; }
.pids-price__part::before { content: "0" counter(pidsp); display: block; margin-bottom: 10px; font: 800 13px/1 var(--f-display); letter-spacing: .08em; color: #00A3D9; }
.pids-price__part h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pids-price__part p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pids-price__ours { max-width: 900px; margin: 18px 0 0; padding: 16px 20px; border-left: 4px solid #FFB81C; border-radius: 0 12px 12px 0; background: #FFFBF0; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pids-hero .pids-hero__grid, .pids-rules__grid { grid-template-columns: 1fr; }
  .pids-db { max-width: 580px; }
}
@media (max-width: 820px) {
  .pids-svc__stack, .pids-zo__grid, .pids-price__grid { grid-template-columns: 1fr; }
  .pids-split__head { display: none; }
  .pids-row { grid-template-columns: 1fr; gap: 10px; }
  .pids-row__when { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; padding-top: 6px; }
  .pids-card--wide { grid-column: auto; }
  .pids-card--a::before, .pids-card--b::before { display: block; margin-bottom: 6px; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
  .pids-card--a::before { content: "Rule A · last write wins"; color: #9A3412; }
  .pids-card--b::before { content: "Rule B · field owner"; color: #1E6B3A; }
}
@media (max-width: 640px) {
  .pids-db__stage { grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 6px; padding: 28px 12px 22px; }
  .pids-cyl__top { height: 20px; }
  .pids-cyl__body { padding: 18px 4px 14px; }
  .pids-cyl__body img { width: 26px; height: 26px; }
  .pids-cyl__body b { font-size: 12.5px; }
  .pids-cyl__body small { font-size: 10.5px; }
  .pids-badge { max-width: 150px; padding: 7px 9px; }
  .pids-badge span { font-size: 11px; }
  .pids-pill { font-size: 10px; padding: 4px 6px; }
  .pids-db__rec { padding: 0 12px 14px; }
  .pids-db__rec > div { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr); padding: 9px 10px; }
  .pids-db__rule { grid-template-columns: 50px minmax(0, 1fr) !important; }
  .pids-db__rec dd { font-size: 11.5px; }
  .pids-fit__list li { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .pids-svc__stack li { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .pids-rules__out { padding: 14px; }
  .pids-map { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .pids-map__wire { width: 100%; max-width: 240px; }
  .pids-tbl__r > span { padding: 9px 8px; font-size: 13px; }
  .pids-tbl__r--h > span { font-size: 10px; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) {
  .pids-badge, .pids-db__rule, .pids-db__rec dd span, .pids-opts span, .pids-map__wire i, .pids-split.is-arm .pids-row, .pids-split.is-arm .pids-row .pids-card--b { transition: none !important; }
  .pids-map.is-pulse .pids-map__wire i { animation: none; }
}