/* Webhooks integration page only. Loaded via `extra: crm, p-integrations-webhooks`. Every class is scoped with .piwh- */

/* ---------- hero ---------- */
.piwh-hero .piwh-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.piwh-hero .crm-sub { max-width: 46ch; }
.piwh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.piwh-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid #D9E6EE; font: 600 13.5px/1.25 var(--f-body); color: #0B2A40; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.piwh-chips__k { flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 999px; background: #E0F3F9; color: #0A6FA8; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.piwh-chips__k--amber { background: #FDF3E1; color: #A16207; }
.piwh-chips__k--grey { background: #EEF2F6; color: #475569; }

.piwh-pipe { position: relative; margin: 0; border-radius: 22px; background: #fff; border: 1px solid #D8E4EC; box-shadow: 0 44px 80px -48px rgba(8,34,56,.6); overflow: hidden; }
.piwh-pipe__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #E6EDF2; background: #F6F9FB; font: 600 12.5px/1 var(--f-body); color: #334155; }
.piwh-pipe__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D3DCE3; }
.piwh-pipe__bar span { margin-left: 8px; }
.piwh-pipe__bar em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #0A6FA8; }
.piwh-pipe__stage { padding: 10px 10px 0; background-color: #FAFCFD; background-image: linear-gradient(#EEF3F7 1px, transparent 1px), linear-gradient(90deg, #EEF3F7 1px, transparent 1px); background-size: 22px 22px; }
.piwh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.piwh-svg text { font-family: var(--f-body); }
.piwh-src rect { fill: #fff; stroke: #D3DEE6; stroke-width: 1.5; }
.piwh-src text { font-size: 14px; font-weight: 700; fill: #082238; }
.piwh-src .piwh-svg__ev { font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #0A6FA8; }
.piwh-svg__lane { fill: none; stroke: #C9D6E0; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.piwh-svg__lane--out { stroke: #9EC3D8; }
.piwh-svg__loop { fill: none; stroke: #E0A21B; stroke-width: 2.5; stroke-dasharray: 8 7; opacity: .55; transition: opacity 300ms; }
.piwh-pipe.is-retry .piwh-svg__loop { opacity: 1; animation: piwh-march 900ms linear infinite; }
@keyframes piwh-march { to { stroke-dashoffset: -30; } }
.piwh-svg__looptx { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #A16207; }
.piwh-q__box { fill: #F2F8FB; stroke: url(#piwh-g); stroke-width: 2.5; }
.piwh-q__lab { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: #0A6FA8; }
.piwh-q__slot { fill: #E3ECF2; transition: fill 260ms; }
.piwh-q__slot.is-on { fill: #00A3D9; }
.piwh-q__slot.is-retry { fill: #E0A21B; }
.piwh-rx__box { fill: #082238; }
.piwh-rx__lamp { fill: #3FB97A; transition: fill 200ms; }
.piwh-rx__name { font-size: 14px; font-weight: 700; fill: #fff; }
.piwh-rx__code { font: 700 17px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #7EE0B0; transition: fill 200ms; }
.piwh-pipe.is-fail .piwh-rx__lamp { fill: #EF4444; }
.piwh-pipe.is-fail .piwh-rx__code { fill: #FCA5A5; }
.piwh-dots circle { fill: #00A3D9; stroke: #fff; stroke-width: 2; }
.piwh-dots circle.is-retry { fill: #E0A21B; }
.piwh-dots circle.is-dup { fill: #94A3B8; }
.piwh-pipe__log { display: grid; gap: 0; margin: 0; padding: 8px 14px 12px; list-style: none; background: #082238; min-height: 96px; }
.piwh-pipe__log li { display: grid; grid-template-columns: 62px 38px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 0; font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9FC0D8; animation: piwh-in 360ms ease both; }
.piwh-pipe__log b { font-weight: 700; color: #7EE0B0; }
.piwh-pipe__log li.is-fail b { color: #FCA5A5; }
.piwh-pipe__log li.is-retry b { color: #FFD27A; }
.piwh-pipe__log li.is-dup b { color: #CBD5E1; }
.piwh-pipe__log span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #DCE8F2; }
@keyframes piwh-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- fit rows ---------- */
.piwh-fit__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.piwh-fit__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 20px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.piwh-fit__row.is-no { background: #F8FAFC; border-style: dashed; border-color: #CBD5E1; }
.piwh-fit__sig { display: flex; align-items: flex-end; gap: 3px; height: 26px; padding-top: 4px; }
.piwh-fit__sig i { width: 7px; border-radius: 2px; background: #00A3D9; }
.piwh-fit__sig i:nth-child(1) { height: 9px; } .piwh-fit__sig i:nth-child(2) { height: 15px; } .piwh-fit__sig i:nth-child(3) { height: 22px; }
.piwh-fit__row.is-no .piwh-fit__sig i { background: #CBD5E1; }
.piwh-fit__row.is-no .piwh-fit__sig i:nth-child(1) { background: #94A3B8; }
.piwh-fit__row h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.piwh-fit__row p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.piwh-fit__row a { color: #0A6FA8; font-weight: 600; }
.piwh-fit__tag { grid-column: 2; justify-self: start; margin-top: 12px; padding: 5px 11px; border-radius: 8px; background: #E0F3F9; color: #0A6FA8; font: 700 11.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.piwh-fit__row.is-no .piwh-fit__tag { background: transparent; border: 1px solid #94A3B8; color: #475569; }

/* ---------- services ---------- */
.piwh-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid #E2E8F0; }
.piwh-card { position: relative; padding: 26px 26px 28px 26px; border-bottom: 1px solid #E2E8F0; border-right: 1px solid #E2E8F0; }
.piwh-card:nth-child(3n) { border-right: 0; }
.piwh-card::before { content: ""; position: absolute; left: 26px; top: -1px; width: 46px; height: 3px; background: var(--c); }
.piwh-card__n { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 12px; background: var(--bg); color: var(--c); font: 800 15px/1 var(--f-display); }
.piwh-card h3 { margin: 16px 0 8px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.piwh-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- story: delivery log timeline, gaps grow with the wait ---------- */
.piwh-tl { position: relative; max-width: 940px; margin: 44px auto 0; padding: 0; list-style: none; }
.piwh-tl::before { content: ""; position: absolute; left: 150px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(#CBD5E1, #CBD5E1) center / 2px 100% no-repeat; }
.piwh-tl__row { --k: #2F7D4A; --tint: #E8F5EC; position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 36px; margin-top: calc(14px + var(--gap) * 14px); }
.piwh-tl__row:first-child { margin-top: 0; }
.piwh-tl__row.is-fail { --k: #DC2626; --tint: #FDECEC; }
.piwh-tl__row.is-wait { --k: #B7791F; --tint: #FDF3E1; }
.piwh-tl__row.is-skip { --k: #64748B; --tint: #EEF2F6; }
.piwh-tl__row::after { content: ""; position: absolute; left: 144px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--k); transition: transform 400ms cubic-bezier(.2,1.4,.4,1); }
.piwh-tl__when { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 10px 0 0; text-align: right; }
.piwh-tl__when time { font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #334155; }
.piwh-tl__code { padding: 4px 9px; border-radius: 7px; background: var(--tint); color: var(--k); font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.piwh-tl__wait { font: 600 11.5px/1 var(--f-body); color: #94A3B8; letter-spacing: .04em; text-transform: uppercase; }
.piwh-tl__card { padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--k); box-shadow: 0 16px 30px -28px rgba(8,34,56,.6); transition: opacity 500ms, transform 500ms; }
.piwh-tl__card h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.piwh-tl__card p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.piwh-tl__card code { padding: 1px 6px; border-radius: 5px; background: #EEF3FA; color: #1D5FA8; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.piwh-tl__zoho { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px 6px 7px; border-radius: 999px; background: #E8F5EC; color: #1F5E37; font: 600 13px/1.2 var(--f-body); }
.piwh-tl.is-arm .piwh-tl__card { opacity: 0; transform: translateX(18px); }
.piwh-tl.is-arm .piwh-tl__row::after { transform: scale(0); }
.piwh-tl.is-arm .piwh-tl__row.is-on .piwh-tl__card { opacity: 1; transform: none; }
.piwh-tl.is-arm .piwh-tl__row.is-on::after { transform: none; }
.piwh-story__note { max-width: 940px; margin: 26px auto 0; font-size: 14px; line-height: 1.6; color: #64748B; }

/* ---------- interactive: retry / backoff visualizer ---------- */
.piwh-bo__box { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); margin-top: 40px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.piwh-bo__in { padding: 28px; }
.piwh-bo__set { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.piwh-bo__set legend, .piwh-sl__top > span { display: block; margin-bottom: 10px; padding: 0; font: 600 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #9FC0D8; }
.piwh-seg { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 2px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); }
.piwh-seg label { position: relative; cursor: pointer; }
.piwh-seg input, .piwh-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.piwh-seg span { display: block; padding: 8px 12px; border-radius: 9px; font: 600 13.5px/1 var(--f-body); color: #BFD3E2; transition: background .2s, color .2s; }
.piwh-seg input:checked + span { background: #FFB81C; color: #082238; }
.piwh-seg input:focus-visible + span, .piwh-tog input:focus-visible + span { outline: 2px solid #5FD3F3; outline-offset: 2px; }
.piwh-sl { display: block; margin: 0 0 6px; }
.piwh-sl__top { display: flex; justify-content: space-between; align-items: baseline; }
.piwh-sl output { font: 700 15px/1 var(--f-body); color: #fff; font-variant-numeric: tabular-nums; }
.piwh-sl input[type=range] { width: 100%; accent-color: #FFB81C; }
.piwh-sl__hint { margin: 0 0 18px; font-size: 12.5px; color: #8FB3CC; }
.piwh-sl + .piwh-bo__set { margin-top: 18px; }
.piwh-tog { display: inline-flex; align-items: center; gap: 10px; position: relative; font: 600 14px/1.3 var(--f-body); color: #DCE8F2; cursor: pointer; }
.piwh-tog span { flex: none; position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .2s; }
.piwh-tog span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.piwh-tog input:checked + span { background: #3FB97A; }
.piwh-tog input:checked + span::after { transform: translateX(18px); }

.piwh-bo__out { display: flex; flex-direction: column; min-width: 0; padding: 28px; background: rgba(4,18,32,.45); border-left: 1px solid rgba(255,255,255,.1); color: #DCE8F2; }
.piwh-track { padding: 8px 0 0; }
.piwh-track__rail { position: relative; height: 64px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.piwh-track__down { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 12px 0 0 12px; background: repeating-linear-gradient(135deg, rgba(239,68,68,.28) 0 6px, rgba(239,68,68,.14) 6px 12px); border-right: 2px solid #EF4444; transition: width 400ms ease; }
.piwh-track__down em { position: absolute; left: 8px; bottom: 6px; font: 600 10.5px/1 var(--f-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #FCA5A5; white-space: nowrap; }
.piwh-track__marks { position: absolute; inset: 0; }
.piwh-track__marks i { position: absolute; top: 14px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid #061A2E; transition: left 400ms ease, opacity 300ms; }
.piwh-track__marks i.is-f { background: #EF4444; }
.piwh-track__marks i.is-ok { top: 10px; width: 22px; height: 22px; margin-left: -11px; background: #3FB97A; box-shadow: 0 0 0 5px rgba(63,185,122,.25); }
.piwh-track__marks i.is-x { background: transparent; border: 2px dashed #94A3B8; }
.piwh-track__marks i:nth-child(even).is-f { top: 32px; }
.piwh-track__ticks { position: relative; height: 22px; margin-top: 6px; }
.piwh-track__ticks span { position: absolute; top: 0; transform: translateX(-50%); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8FB3CC; white-space: nowrap; }
.piwh-track__ticks span::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 6px; background: rgba(255,255,255,.3); }
.piwh-track__ticks span:first-child { transform: none; }
.piwh-track__ticks span:last-child { transform: translateX(-100%); }
.piwh-bo__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.piwh-bo__stats div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.piwh-bo__stats dt { font: 600 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #8FB3CC; }
.piwh-bo__stats dd { margin: 6px 0 0; font: 800 19px/1.15 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.piwh-bo__stats dd.is-ok { color: #7EE0B0; }
.piwh-bo__stats dd.is-bad { color: #FCA5A5; }
.piwh-bo__say { margin: 16px 0 0; font: 400 14.5px/1.55 var(--f-body); color: #DCE8F2; }
.piwh-bo__say b { color: #fff; }
.piwh-bo__warn { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255,184,28,.12); border: 1px solid rgba(255,184,28,.4); font: 500 13.5px/1.5 var(--f-body); color: #FFE2A3; }
.piwh-storm { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.piwh-storm__h { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font: 600 12px/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #9FC0D8; }
.piwh-storm__h em { font-style: normal; color: #FFD27A; white-space: nowrap; }
.piwh-storm__bars { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.piwh-storm__bars i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: #5FD3F3; transition: height 400ms ease; }
.piwh-storm__bars i.is-hot { background: #EF4444; }
.piwh-bo__fine { margin: 18px 0 0; font: 400 12.5px/1.55 var(--f-body); color: #8FB3CC; max-width: 92ch; }

/* ---------- Zoho directions ---------- */
.piwh-zo__tabs { display: inline-flex; gap: 4px; margin-top: 32px; padding: 5px; border-radius: 14px; background: #EEF3F7; }
.piwh-zo__tabs button { padding: 10px 18px; border: 0; border-radius: 10px; background: transparent; font: 700 14.5px/1 var(--f-body); color: #475569; cursor: pointer; transition: background .2s, color .2s; }
.piwh-zo__tabs button[aria-selected="true"] { background: #082238; color: #fff; }
.piwh-zo__tabs button:focus-visible { outline: 2px solid #00A3D9; outline-offset: 2px; }
.piwh-zo__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.piwh-zo__panel[hidden] { display: none; }
.piwh-zo__card { padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 34px -30px rgba(8,34,56,.6); }
.piwh-zo__route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #F3F7F9; font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #334155; }
.piwh-zo__route img { flex: none; padding: 3px; border-radius: 7px; background: #fff; border: 1px solid #E2E8F0; }
.piwh-zo__route i { flex: none; width: 28px; height: 2px; background: repeating-linear-gradient(90deg, #00A3D9 0 5px, transparent 5px 9px); }
.piwh-zo__mono { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #082238; color: #5FD3F3; font-size: 12px; }
.piwh-zo__card h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.piwh-zo__card p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.piwh-zo__card a { color: #0A6FA8; font-weight: 600; }

/* ---------- pricing ---------- */
.piwh-price__meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: pm; }
.piwh-price__meters li { counter-increment: pm; position: relative; padding: 46px 20px 20px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.piwh-price__meters li::before { content: counter(pm, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font: 800 13px/1 var(--f-display); color: #00A3D9; letter-spacing: .06em; }
.piwh-price__meters b { display: block; margin-bottom: 6px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.piwh-price__meters span { font-size: 14.5px; line-height: 1.6; color: #475569; }
.piwh-price__ours { max-width: 900px; margin: 26px 0 0; padding: 18px 22px; border-radius: 14px; background: #FFF8E6; border: 1px solid #F6D58A; font-size: 15.5px; line-height: 1.6; color: #3B3A30; }
.piwh-price__ours a { color: #0A6FA8; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .piwh-bo__box { grid-template-columns: 1fr; }
  .piwh-bo__out { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .piwh-price__meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .piwh-hero .piwh-hero__grid { grid-template-columns: 1fr; }
  .piwh-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piwh-card:nth-child(3n) { border-right: 1px solid #E2E8F0; }
  .piwh-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 720px) {
  .piwh-fit__rows, .piwh-zo__panel, .piwh-price__meters, .piwh-svc__grid { grid-template-columns: 1fr; }
  .piwh-card { border-right: 0 !important; padding: 22px 4px 24px; }
  .piwh-card::before { left: 4px; }
  .piwh-tl::before { left: 9px; }
  .piwh-tl__row { grid-template-columns: 1fr; gap: 8px; padding-left: 32px; margin-top: calc(12px + var(--gap) * 8px); }
  .piwh-tl__row::after { left: 3px; top: 4px; }
  .piwh-tl__when { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0; text-align: left; }
  .piwh-bo__in, .piwh-bo__out { padding: 20px; }
  .piwh-bo__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piwh-pipe__log li { grid-template-columns: 56px 32px minmax(0, 1fr); font-size: 11px; }
  .piwh-track__ticks span { font-size: 10px; }
  .piwh-track__ticks span:nth-child(even):not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .piwh-pipe.is-retry .piwh-svg__loop { animation: none; }
  .piwh-pipe__log li { animation: none; }
  .piwh-tl__card, .piwh-tl__row::after, .piwh-track__down, .piwh-track__marks i, .piwh-storm__bars i { transition: none; }
}