/* AI agent frameworks page only. Loaded via `extra: crm, p-ai-agent-frameworks`. Every class is scoped with .paif- */

/* ---------- hero: workflow graph ---------- */
.paif-hero .paif-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.paif-hero .crm-sub { max-width: 46ch; }
.paif-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.paif-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid #DDE5EE; font: 600 13.5px/1.25 var(--f-body); color: #0B2540; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.paif-chips img { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #F4F7FA; }
.paif-chips img.paif-chips__dk, .paif-scale__dk, .paif-bars__dk { background: #1C3C3C; }

.paif-graph { --k: #6D4AFF; position: relative; margin: 0; border-radius: 20px; background: #fff; border: 1px solid #DCE3EC; box-shadow: 0 44px 80px -48px rgba(8,34,56,.6); overflow: hidden; }
.paif-graph[data-fw="lc"] { --k: #1C7C6E; }
.paif-graph[data-fw="n8"] { --k: #EA4B71; }
.paif-graph[data-fw="zp"] { --k: #FF4F00; }
.paif-graph__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid #E8EDF3; background: #F6F8FB; }
.paif-graph__title { font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #475569; }
.paif-fw { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 10px; background: #E9EEF4; }
.paif-fw button { padding: 6px 11px; border: 0; border-radius: 8px; background: transparent; font: 700 12.5px/1 var(--f-body); color: #475569; cursor: pointer; transition: background-color 200ms, color 200ms; }
.paif-fw button[aria-pressed="true"] { background: #fff; color: #082238; box-shadow: 0 2px 6px rgba(8,34,56,.14); }
.paif-fw button:focus-visible { outline: 2px solid #00A3D9; outline-offset: 1px; }
.paif-graph__body { position: relative; aspect-ratio: 10 / 7.6; background-color: #FBFCFD; background-image: linear-gradient(#EEF2F6 1px, transparent 1px), linear-gradient(90deg, #EEF2F6 1px, transparent 1px); background-size: 24px 24px; }
.paif-graph__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.paif-graph__wires path { fill: none; stroke: #C5CFDB; stroke-width: 2; stroke-dasharray: 5 5; transition: stroke 300ms; }
.paif-graph__wires path.is-hot { stroke: var(--k); stroke-dasharray: none; stroke-width: 2.5; }
.paif-node { --nx: 0%; --ny: 0%; position: absolute; left: var(--nx); top: var(--ny); width: 31%; padding: 9px 11px 10px; border-radius: 12px; background: #fff; border: 1.5px solid #D5DEE8; box-shadow: 0 12px 22px -18px rgba(8,34,56,.6); transition: border-color 300ms, box-shadow 300ms, transform 300ms; }
.paif-node__k { display: flex; align-items: center; gap: 5px; font: 700 9.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.paif-node__k img { width: 16px; height: 16px; padding: 2px; border-radius: 4px; background: #1C3C3C; }
.paif-node b { display: block; margin-top: 5px; font: 700 13px/1.3 var(--f-display); color: #082238; overflow-wrap: anywhere; }
.paif-node small { display: block; margin-top: 3px; font: 500 11.5px/1.35 var(--f-body); color: #64748B; }
.paif-node--trig { --nx: 3%; --ny: 40%; width: 24%; }
.paif-node--agent { --nx: 33%; --ny: 37%; width: 32%; border-width: 2px; border-color: var(--k); }
.paif-node--tool { width: 26%; background: #F8FAFC; border-style: dashed; }
.paif-node[data-node="t1"] { --nx: 4%; --ny: 6%; }
.paif-node[data-node="t2"] { --nx: 37%; --ny: 6%; }
.paif-node[data-node="t3"] { --nx: 70%; --ny: 6%; }
.paif-node--human { --nx: 70%; --ny: 40%; width: 27%; background: #FFFBEF; border-color: #F0C75E; }
.paif-node--out { --nx: 46%; --ny: 76%; width: 30%; }
.paif-node__ok { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 999px; background: #E6F6EC; color: #1E7A45; font: 700 10.5px/1.2 var(--f-body); font-style: normal; opacity: 0; transform: scale(.8); transition: opacity 300ms, transform 300ms cubic-bezier(.2,1.4,.4,1); }
.paif-node.is-on { border-color: var(--k); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 16%, transparent), 0 14px 26px -18px rgba(8,34,56,.6); }
.paif-node--human.is-on { border-color: #E0A21B; box-shadow: 0 0 0 4px rgba(224,162,27,.2); }
.paif-node--human.is-ok .paif-node__ok, .paif-graph:not(.is-arm) .paif-node__ok { opacity: 1; transform: none; }
.paif-node--out.is-on { border-color: #2F9E5B; box-shadow: 0 0 0 4px rgba(47,158,91,.16); }
.paif-graph.is-swap .paif-node b, .paif-graph.is-swap .paif-node small { animation: paif-swap 420ms ease; }
@keyframes paif-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.paif-graph__cap { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px 13px; border-top: 1px solid #E8EDF3; font: 500 13px/1.45 var(--f-body); color: #475569; }
.paif-graph__sample { flex: none; padding: 3px 8px; border-radius: 6px; background: #EEF2F7; font: 700 10px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #475569; }

/* ---------- what: code to no-code scale + fit columns ---------- */
.paif-scale { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; }
.paif-scale__line { position: absolute; left: 15px; right: 15px; top: 15px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #1C7C6E, #EA4B71 50%, #FF4F00); }
.paif-scale__pt { position: relative; display: grid; justify-items: start; gap: 4px; text-align: left; }
.paif-scale__pt--b { justify-items: center; text-align: center; }
.paif-scale__pt--c { justify-items: end; text-align: right; }
.paif-scale__pt img { width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: #fff; border: 2px solid #E2E8F0; box-shadow: 0 6px 14px -8px rgba(8,34,56,.5); }
.paif-scale__pt b { margin-top: 6px; font: 700 15.5px/1.25 var(--f-display); color: #082238; }
.paif-scale__pt span { font-size: 13.5px; line-height: 1.4; color: #64748B; }
.paif-scale__ends { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed #CBD5E1; font: 700 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; }
.paif-what__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; margin-top: 30px; }
.paif-what__col { padding: 24px 24px 20px; border-radius: 18px; border: 1px solid #E2E8F0; background: #fff; }
.paif-what__col--no { background: #F7F9FB; }
.paif-what__col h3 { margin: 0 0 14px; font: 700 19px/1.25 var(--f-display); color: #082238; }
.paif-what__col ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.paif-what__col li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: #475569; }
.paif-what__col li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #1C7C6E; box-shadow: inset 0 0 0 4px #fff, 0 0 0 1.5px #1C7C6E; }
.paif-what__col--no li::before { background: transparent; box-shadow: inset 0 0 0 1.5px #94A3B8; border-radius: 3px; transform: rotate(45deg) scale(.8); }
.paif-what__col li b { display: block; margin-bottom: 2px; font: 700 16px/1.35 var(--f-display); color: #082238; }

/* ---------- services: spec sheet ---------- */
.paif-sheet { margin: 34px 0 0; padding: 0; list-style: none; border-top: 2px solid #082238; }
.paif-sheet__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 220px; gap: 22px; align-items: start; padding: 20px 4px; border-bottom: 1px solid #E2E8F0; }
.paif-sheet__n { font: 800 26px/1 var(--f-display); color: #CBD5E1; }
.paif-sheet__row h3 { margin: 0 0 6px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.paif-sheet__row p { margin: 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: #475569; }
.paif-sheet__out { justify-self: end; padding: 7px 12px; border-radius: 8px; background: #EEF5F3; border: 1px solid #CFE3DE; font: 600 13px/1.35 var(--f-body); color: #155E54; text-align: right; }
.paif-sheet__row:hover .paif-sheet__n { color: #1C7C6E; }

/* ---------- story: trace waterfall ---------- */
.paif-trace { margin-top: 38px; padding: 20px 22px 8px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -48px rgba(8,34,56,.6); }
.paif-trace__axis { position: relative; height: 22px; margin: 0 0 6px 34%; border-bottom: 1px solid #E2E8F0; }
.paif-trace__axis span { position: absolute; left: var(--p); bottom: 6px; transform: translateX(-50%); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #94A3B8; white-space: nowrap; }
.paif-trace__axis span:first-child { transform: none; }
.paif-trace__axis span:last-child { transform: translateX(-100%); }
.paif-trace__axis .is-gap { color: #B7791F; }
.paif-trace__list { margin: 0; padding: 0; list-style: none; }
.paif-span { --c: #1D5FA8; --tint: #E4EEFA; display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 0; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid #F0F3F7; }
.paif-span:last-child { border-bottom: 0; }
.paif-span--run { --c: #475569; --tint: #EEF2F6; }
.paif-span--llm { --c: #6D4AFF; --tint: #EFEBFF; }
.paif-span--tool { --c: #1C7C6E; --tint: #E3F3F0; }
.paif-span--human { --c: #B7791F; --tint: #FDF3E1; }
.paif-span--end { --c: #2F9E5B; --tint: #E6F6EC; }
.paif-span__head { display: flex; align-items: baseline; gap: 8px; padding-right: 14px; min-width: 0; }
.paif-span__head code { flex: none; padding: 2px 6px; border-radius: 5px; background: var(--tint); color: var(--c); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.paif-span__head b { min-width: 0; font: 700 14.5px/1.35 var(--f-display); color: #082238; }
.paif-span__head time { flex: none; margin-left: auto; font: 600 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #64748B; }
.paif-span__bar { position: relative; height: 16px; margin-top: 2px; }
.paif-span__bar i { position: absolute; left: var(--s); width: max(var(--w), 6px); top: 0; bottom: 0; border-radius: 5px; background: var(--c); transform-origin: left center; transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 400ms; }
.paif-span--human .paif-span__bar i { background: repeating-linear-gradient(135deg, #E0A21B 0 6px, #F6D58A 6px 12px); }
.paif-span--run .paif-span__bar i { background: #CBD5E1; }
.paif-span p { grid-column: 2; margin: 0; max-width: 66ch; font-size: 14.5px; line-height: 1.55; color: #475569; }
.paif-trace.is-arm .paif-span__bar i { transform: scaleX(0); opacity: .3; }
.paif-trace.is-arm .paif-span p { opacity: .35; transition: opacity 400ms; }
.paif-trace.is-arm .paif-span.is-on .paif-span__bar i { transform: none; opacity: 1; }
.paif-trace.is-arm .paif-span.is-on p { opacity: 1; }
.paif-run__note { margin: 18px 0 0; font-size: 14px; color: #64748B; }

/* ---------- interactive: framework chooser (dark band) ---------- */
.paif-pick__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
.paif-pick__q { display: grid; gap: 12px; }
.paif-pick__q fieldset { margin: 0; padding: 14px 16px 16px; border: 1px solid rgba(159,192,216,.22); border-radius: 16px; background: rgba(255,255,255,.05); }
.paif-pick__q legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font: 700 15px/1.3 var(--f-display); color: #fff; }
.paif-pick__q legend span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #5FD3F3; color: #082238; font: 800 12px/1 var(--f-body); }
.paif-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.paif-opts label { position: relative; cursor: pointer; }
.paif-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paif-opts span { display: inline-block; padding: 8px 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; }
.paif-opts label:hover span { border-color: #9FC0D8; }
.paif-opts input:checked + span { background: #5FD3F3; border-color: #5FD3F3; color: #082238; }
.paif-opts input:focus-visible + span { outline: 3px solid #FFB81C; outline-offset: 2px; }
.paif-pick__out { position: sticky; top: 96px; display: grid; gap: 14px; }
.paif-bars { display: grid; gap: 10px; margin: 0; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(159,192,216,.22); list-style: none; }
.paif-bars li { display: grid; grid-template-columns: 158px minmax(0, 1fr) 34px; gap: 12px; align-items: center; }
.paif-bars__n { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--f-body); color: #D7E6F0; }
.paif-bars__n img { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: #fff; }
.paif-bars__t { height: 10px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
.paif-bars__t i { display: block; height: 100%; width: 0; border-radius: 5px; background: #9FC0D8; transition: width 500ms cubic-bezier(.2,.8,.2,1); }
.paif-bars li.is-top .paif-bars__t i { background: #FFB81C; }
.paif-bars li.is-top .paif-bars__n { color: #fff; }
.paif-bars b { font: 700 14px/1 var(--f-display); color: #fff; text-align: right; }
.paif-card { padding: 20px 22px; border-radius: 18px; background: #fff; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.paif-card__tag { margin: 0; font: 700 10.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #B7791F; }
.paif-card h3 { margin: 8px 0 8px; font: 800 22px/1.25 var(--f-display); color: #082238; }
.paif-card__say { margin: 0; font-size: 15px; line-height: 1.6; color: #334155; }
.paif-card dl { display: grid; gap: 10px; margin: 14px 0 0; }
.paif-card dl div { padding: 11px 13px; border-radius: 12px; background: #F4F7FA; }
.paif-card dt { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.paif-card dd { margin: 5px 0 0; font-size: 14.5px; line-height: 1.55; color: #334155; }
.paif-card__zoho { margin: 12px 0 0; padding: 10px 13px; border-radius: 12px; background: #EEF5F3; border: 1px solid #CFE3DE; font-size: 14px; line-height: 1.5; color: #155E54; }
.paif-card.is-flash { animation: paif-flash 450ms ease; }
@keyframes paif-flash { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } }
.paif-pick__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: #9FC0D8; }

/* ---------- Zoho: plug cards ---------- */
.paif-zo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.paif-plug { padding: 20px 22px 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 34px -30px rgba(8,34,56,.6); }
.paif-plug__head { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
.paif-plug__head i { flex: 1 1 auto; height: 2px; min-width: 14px; background: repeating-linear-gradient(90deg, #94A3B8 0 5px, transparent 5px 9px); }
.paif-plug__fw, .paif-plug__z { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #F4F7FA; border: 1px solid #E2E8F0; }
.paif-plug__fw { border-radius: 50%; }
.paif-plug__fw--dk, .paif-tier__logo--dk { background: #1C3C3C; border-color: #1C3C3C; }
.paif-plug h3 { margin: 0 0 8px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.paif-plug p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.paif-zo__more { max-width: 900px; margin: 22px 0 0; font-size: 15.5px; line-height: 1.65; color: #475569; }

/* ---------- pricing ---------- */
.paif-price__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.paif-tier { padding: 20px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.paif-tier h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 19px/1.2 var(--f-display); color: #082238; }
.paif-tier__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #F4F7FA; border: 1px solid #E2E8F0; }
.paif-tier dl { display: grid; gap: 0; margin: 0; }
.paif-tier dl div { padding: 10px 0; border-top: 1px solid #EEF2F6; }
.paif-tier dt { font: 700 13.5px/1.3 var(--f-body); color: #082238; }
.paif-tier dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: #475569; }
.paif-tier dd b { color: #082238; font-weight: 800; }
.paif-tier__note { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: #F4F7FA; font-size: 13.5px; line-height: 1.5; color: #475569; }
.paif-price__ours { max-width: 900px; margin: 22px 0 0; padding: 16px 20px; border-left: 4px solid #1C7C6E; border-radius: 0 12px 12px 0; background: #F1F8F6; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .paif-hero .paif-hero__grid, .paif-pick__grid { grid-template-columns: 1fr; }
  .paif-graph { max-width: 620px; }
  .paif-pick__out { position: static; }
  .paif-zo__grid, .paif-price__cols { grid-template-columns: 1fr; max-width: 680px; }
}
@media (max-width: 820px) {
  .paif-what__cols { grid-template-columns: 1fr; }
  .paif-sheet__row { grid-template-columns: 44px minmax(0, 1fr); }
  .paif-sheet__out { grid-column: 2; justify-self: start; text-align: left; }
  .paif-trace__axis { margin-left: 0; }
  .paif-span { grid-template-columns: 1fr; }
  .paif-span__head { padding-right: 0; }
  .paif-span p { grid-column: 1; }
}
@media (max-width: 640px) {
  .paif-graph__body { aspect-ratio: 10 / 14.5; }
  .paif-node { width: 44%; padding: 8px 9px; }
  .paif-node b { font-size: 12px; }
  .paif-node small { font-size: 10.5px; }
  .paif-node--trig { --nx: 3%; --ny: 3%; width: 46%; }
  .paif-node--agent { --nx: 26%; --ny: 22%; width: 52%; }
  .paif-node[data-node="t1"] { --nx: 2%; --ny: 46%; width: 31%; }
  .paif-node[data-node="t2"] { --nx: 34.5%; --ny: 46%; width: 31%; }
  .paif-node[data-node="t3"] { --nx: 67%; --ny: 46%; width: 31%; }
  .paif-node--tool b { font-size: 11px; }
  .paif-node--human { --nx: 50%; --ny: 66%; width: 47%; }
  .paif-node--out { --nx: 3%; --ny: 84%; width: 46%; }
  .paif-fw { margin-left: 0; }
  .paif-graph__title { flex-basis: 100%; }
  .paif-scale { grid-template-columns: 1fr; gap: 14px; }
  .paif-scale__line { left: 15px; right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; background: linear-gradient(180deg, #1C7C6E, #EA4B71 50%, #FF4F00); }
  .paif-scale__pt, .paif-scale__pt--b, .paif-scale__pt--c { grid-template-columns: 34px minmax(0, 1fr); justify-items: start; column-gap: 12px; row-gap: 2px; text-align: left; }
  .paif-scale__pt img { grid-row: span 2; }
  .paif-scale__pt b { margin-top: 0; }
  .paif-scale__ends { display: none; }
  .paif-bars li { grid-template-columns: minmax(0, 1fr) 30px; row-gap: 6px; }
  .paif-bars__t { grid-column: 1 / -1; grid-row: 2; }
  .paif-trace { padding: 16px 14px 6px; }
  .paif-trace__axis span { font-size: 9.5px; }
  .paif-trace__axis span.is-gap { display: none; }
  .paif-span__head { flex-wrap: wrap; }
  .paif-sheet__row { grid-template-columns: 1fr; gap: 8px; }
  .paif-sheet__out { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .paif-node, .paif-node__ok, .paif-span__bar i, .paif-bars__t i, .paif-opts span, .paif-graph__wires path { transition: none !important; }
  .paif-graph.is-swap .paif-node b, .paif-graph.is-swap .paif-node small, .paif-card.is-flash { animation: none; }
}
.paif-tier__logo.paif-tier__logo--dk { background: #1C3C3C; border-color: #1C3C3C; }