/* The integration pages' shared design: the calm layer (one section rhythm and one width, 16 Oct) and the approved Claude page design (Ahmed 19 Oct "ok good approved"). Moved out of integrations/claude.html unchanged. */
/* Calm layer (16 Oct, Ahmed "ok I like it", first on the Claude page): one H2 size, one section rhythm, one width, gradient only in the hero. */
main.lp .pf-band, main.lp .lp-sec { padding-top: 104px !important; padding-bottom: 104px !important; }
main.lp .pf-band { padding-left: 0 !important; padding-right: 0 !important; }
main.lp .pf-inner, main.lp .cta-section .container { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
main.lp .pf-title { margin-bottom: 40px; }
main.lp .lp-step__n { background: var(--gray-800) !important; box-shadow: 0 0 0 8px var(--white); }
main.lp .lp-steps::before { background: var(--gray-300) !important; }
main.lp .pf-listed a:hover .pf-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gray-800); }
.lp-gx-nums__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.lp-gx-nums__list li { padding: 0 32px; border-left: 1px solid var(--gray-200); }
.lp-gx-nums__list li:first-child { padding-left: 0; border-left: 0; }
.lp-gx-nums__list b { display: block; font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--gray-800); }
.lp-gx-nums__list span { display: block; margin-top: 12px; font-size: 0.9375rem; line-height: 1.4; color: var(--gray-600); }
.lp-gx-list a { color: var(--gradient-mid); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 480px) {
  main.lp .pf-band, main.lp .lp-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
  main.lp .pf-inner, main.lp .cta-section .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 760px) {
  main.lp .lp-steps::before { background: var(--gray-300) !important; }
  .lp-gx-nums__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .lp-gx-nums__list li { padding: 0 16px; }
  .lp-gx-nums__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* PREVIEW claude-c-prod: sample C's product composition in the prod style. Page-scoped (cx-), prod tokens from /styles.css only. */
.cx-ic{display:block;flex:none}
/* hero: one column of text, then the product picture under it */
main.lp .cx-hero{padding:112px 0 88px}
.cx-hero__text{max-width:56rem}
.cx-hero .lp-hero__lede{max-width:44em;margin-top:20px}
.cx-hero .lp-hero__cta{margin-top:30px}
.cx-hero .lp-wave{left:42%;right:-14%;height:860px}
@media (max-width:980px){.cx-hero .lp-wave{display:none}}
.cx-stage{margin:22px 0 0}
.cx-eg{margin:0 0 10px;font-size:.8125rem;line-height:1.3;color:var(--gray-500);text-align:right}
.cx-box{position:relative}
.cx-scale{position:relative;width:1152px;height:836px;transform-origin:0 0}
/* the PaidSync.ai workspace, light theme, rebuilt from the real app */
.cx-app{position:absolute;left:0;top:0;width:1152px;height:800px;display:grid;grid-template-columns:212px minmax(0,1fr);background:#fff;border:1px solid #e3e3e8;border-radius:14px;overflow:hidden;font:400 13.5px/1.45 var(--font);color:var(--gray-800);letter-spacing:-.003em;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.05),0 36px 72px -36px rgba(27,27,60,.34)}
.cx-side{background:#f9f9fb;border-right:1px solid #ececf0;padding:12px 10px 12px;display:flex;flex-direction:column;min-height:0}
.cx-brandrow{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px 8px}
.cx-brandrow img{height:19px;width:auto;display:block}
.cx-brandrow svg{color:var(--gray-500)}
.cx-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--gray-800)}
.cx-row .cx-ri{width:20px;height:20px;display:grid;place-items:center;color:var(--gray-700);flex:none}
.cx-row .cx-ri svg{width:17px;height:17px}
.cx-row kbd{margin-left:auto;font:500 10.5px var(--font);color:var(--gray-500);background:#fff;border:1px solid #e3e3e8;border-radius:5px;padding:1px 5px}
.cx-row.on{background:#ececf0}
.cx-row.new{margin-bottom:4px}
.cx-row.new .cx-ri{border-radius:6px;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));color:#fff}
.cx-row.new .cx-ri svg{width:12px;height:12px}
.cx-sl{font-size:11.5px;font-weight:500;color:var(--gray-500);padding:14px 10px 4px}
.cx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px}
.cx-av{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;flex:none}
.cx-brand b{font-size:13px;font-weight:600}
.cx-rec{font-size:13px;color:var(--gray-600);padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-me{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 8px 2px;border-top:1px solid #ececf0}
.cx-me .cx-av{border-radius:50%;background:#e8e8ed;color:var(--gray-700)}
.cx-me b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.cx-me small{display:block;font-size:11px;color:var(--gray-500)}
.cx-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cx-top{height:56px;flex:none;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid #ececf0}
.cx-top .cx-sp{flex:1}
.cx-wb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:8px;border:1px solid #e3e3e8;background:#fff;font-size:13px;font-weight:500;color:var(--gray-800)}
.cx-wb svg{color:var(--gray-600)}
.cx-wb.sq{width:32px;padding:0;justify-content:center}
.cx-body{flex:1;min-height:0;overflow:hidden;padding:24px 32px}
.cx-col{max-width:476px}
.cx-hi{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cx-hi .cx-h{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--gray-800)}
.cx-hi .cx-h em{font-style:normal;color:var(--gradient-mid)}
.cx-hi p{margin:3px 0 0;font-size:12.5px;color:var(--gray-600)}
.cx-hi p b{font-weight:600;color:var(--gray-800)}
.cx-sync{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.cx-sync svg{width:12px;height:12px}
.cx-sum{margin-top:14px;padding:9px 13px;border:1px solid #ececf0;background:var(--gray-50);border-radius:10px;font-size:12.5px;line-height:1.5;color:var(--gray-700)}
.cx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.cx-kpi{border:1px solid #e8e8ed;border-radius:12px;padding:10px 12px 11px;background:#fff}
.cx-kpi span{display:block;font-size:11.5px;color:var(--gray-600)}
.cx-kpi b{display:block;margin-top:2px;font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.25;color:#0a5f9e;font-variant-numeric:tabular-nums}
.cx-kpi i{display:block;margin-top:1px;font-style:normal;font-size:11px;color:var(--gray-500);font-variant-numeric:tabular-nums}
.cx-card{border:1px solid #e8e8ed;border-radius:12px;margin-top:12px;overflow:hidden;background:#fff}
.cx-card-h{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 7px}
.cx-card-h b{font-size:13.5px;font-weight:600}
.cx-card-h span{font-size:12px;color:var(--gray-500)}
.cx-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cx-t th{font-size:11.5px;font-weight:500;color:var(--gray-500);text-align:right;padding:6px 14px;border-top:1px solid #ececf0;background:var(--gray-50)}
.cx-t td{font-size:13px;text-align:right;padding:6px 14px;border-top:1px solid #f0f0f3;color:var(--gray-800)}
.cx-t th:first-child,.cx-t td:first-child{text-align:left}
.cx-t tr.tot td{font-weight:600;border-top:1px solid #e3e3e8}
.cx-pf{display:flex;align-items:center;gap:9px}
.cx-lg{width:16px;height:16px;object-fit:contain;display:block;flex:none}
.cx-cl{display:grid;grid-template-columns:46px 18px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 14px;border-top:1px solid #f0f0f3;font-size:13px}
.cx-cl .d{color:var(--gray-500);font-variant-numeric:tabular-nums}
.cx-cl .cx-lg{margin-top:2px}
.cx-cl .a{line-height:1.4}
.cx-cl .a small{display:block;font-size:11.5px;color:var(--gray-500);margin-top:1px}
.cx-cl .v{font-size:12px;color:var(--gray-600);white-space:nowrap}
.cx-cl .v.up{color:var(--gray-800);font-weight:600}
/* Claude, its own app in front of the workspace: the approved Claude window look */
.cx-cw{background:var(--cw-bg,#faf9f5);color:var(--cw-fg,#1f1e1d);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;font:400 14px/1.45 var(--cw-font,var(--font));font-variant-numeric:lining-nums;text-align:left;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04),0 40px 80px -24px rgba(27,27,60,.42)}
.cx-cw-bar{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;border-bottom:1px solid var(--cw-line,#ebe8df)}
.cx-cw-t{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--cw-title,#3d3929);min-width:0}
.cx-cw-t img{width:16px;height:16px;display:block}
.cx-cw-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-cw-t svg{color:var(--cw-muted,#73726c)}
.cx-share{font-size:13px;font-weight:500;color:var(--cw-title,#3d3929);padding:5px 12px;border-radius:8px;background:var(--cw-card,#fff);box-shadow:inset 0 0 0 1px var(--cw-line2,#e5e2d9)}
.cx-cw-b{flex:1;min-height:0;overflow:hidden;padding:16px 18px 16px;display:flex;flex-direction:column}
.cx-cw-c{width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.cx-cw-in{width:100%;max-width:640px;margin:auto auto 0;padding-top:14px}
.cx-mu{align-self:flex-end;max-width:88%;background:var(--cw-bubble,#f0eee6);border-radius:var(--cw-bubble-r,18px);padding:9px 15px;font-size:14.5px;line-height:1.45;color:var(--cw-text,#141413)}
.cx-mt{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--cw-muted,#73726c)}
.cx-mt .ico{width:16px;height:16px;display:grid;place-items:center}
.cx-mt .ok{color:#4b8a3c}
.cx-mt .spin{display:none;width:13px;height:13px;border-radius:50%;border:2px solid #e2ddd0;border-top-color:#c96442;animation:cxspin .8s linear infinite}
.cx-ms{font:400 var(--cw-ms-size,15.5px)/1.58 var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-text,#141413);text-wrap:pretty}
.cx-ms b{font-weight:600}
.cx-mtbl{border-radius:10px;overflow:hidden;background:var(--cw-card,#fff);box-shadow:0 0 0 1px var(--cw-line2,#e5e2d9)}
.cx-mtbl table{width:100%;border-collapse:collapse}
.cx-mtbl th{background:var(--cw-th,#f5f4ef);font:500 12.5px var(--cw-font,var(--font));color:var(--cw-thfg,#6b6457);text-align:right;padding:7px 12px}
.cx-mtbl td{font:400 var(--cw-td-size,14px) var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-text,#141413);padding:7px 12px;border-top:1px solid var(--cw-line,#ebe8df);text-align:right;font-variant-numeric:lining-nums tabular-nums}
.cx-mtbl th:first-child,.cx-mtbl td:first-child{text-align:left}
.cx-mtbl tr.tot td{font-weight:600}
.cx-mtbl .cx-pf{gap:8px}
.cx-perm{background:var(--cw-card,#fff);border-radius:14px;box-shadow:0 0 0 1px var(--cw-line2,#e5e2d9),0 22px 40px -20px rgba(41,38,27,.3),0 8px 16px -10px rgba(41,38,27,.18)}
.cx-ph{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:13px 15px 9px;font-size:14px;font-weight:500;color:var(--cw-fg,#1f1e1d)}
.cx-ph code{font:500 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--cw-bubble,#f0eee6);color:var(--cw-title,#3d3929);padding:2px 7px;border-radius:6px}
.cx-ps{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 4px;border-radius:6px;font-size:13px;box-shadow:inset 0 0 0 1px var(--cw-line2,#e5e2d9)}
.cx-ps img{width:16px;height:16px;border-radius:4px;display:block}
.cx-kv{margin:0 12px;padding:9px 12px;border-radius:10px;background:var(--cw-kv,#f7f6f2);display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:13px;line-height:1.45}
.cx-kv dt{color:var(--cw-dt,#8a8373)}
.cx-kv dd{margin:0;color:var(--cw-fg,#1f1e1d)}
.cx-pfoot{display:flex;justify-content:space-between;align-items:center;padding:11px 12px 12px}
.cx-dec,.cx-all{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:9px;font-size:13.5px;font-weight:500}
.cx-dec{color:#1f1e1d;box-shadow:inset 0 0 0 1px #dcd7ca}
.cx-all{background:#141413;color:#fff}
.cx-cw kbd{display:inline-flex;align-items:center;gap:3px;font:500 11px var(--font);padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.06);color:inherit}
.cx-all kbd{background:rgba(255,255,255,.16)}
.cx-comp{background:var(--cw-comp,#fff);border-radius:var(--cw-comp-r,18px);padding:12px 12px 9px 16px;box-shadow:0 0 0 1px var(--cw-comp-line,#e0ddd3),0 1px 3px rgba(0,0,0,.04)}
.cx-ctext{font-size:14.5px;color:var(--cw-ph,#8f8d86);min-height:22px}
.cx-crow{display:flex;align-items:center;gap:8px;margin-top:6px}
.cx-cbtn{width:28px;height:28px;border-radius:var(--cw-cbtn-r,8px);display:grid;place-items:center;color:var(--cw-muted,#73726c);box-shadow:inset 0 0 0 1px var(--cw-line2,#e5e2d9)}
.cx-crow .cx-sp{flex:1}
.cx-model{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:var(--cw-muted,#73726c);padding:0 4px}
.cx-send{width:30px;height:30px;border-radius:var(--cw-send-r,8px);display:grid;place-items:center;color:var(--cw-sendfg,#fff);background:var(--cw-send,#c96442)}
.cx-scale > .cx-cw{position:absolute;right:-36px;top:68px;width:444px;height:768px;z-index:2}
/* motion: Claude's reply arrives once at load, then the page rests */
.cx-seq .q{opacity:0;transform:translateY(8px)}
.cx-seq .q.on{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.cx-seq .cx-mt .spin{display:block}
.cx-seq .cx-mt .ok{display:none}
.cx-seq .cx-mt.done .spin{display:none}
.cx-seq .cx-mt.done .ok{display:block}
@keyframes cxspin{to{transform:rotate(360deg)}}
@keyframes cxfin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the platform strip sits right under the picture, quiet */
main.lp section.lp-gx-strip.cx-strip{padding-top:24px !important;padding-bottom:0 !important}
/* Build, fix, track and report: one large visual */
main.lp section.cx-jobs{padding-top:120px !important}
.cx-jobs .section-subtitle{max-width:36em}
.cx-jobs-vis{margin-top:48px}
.cx-frame{display:grid;grid-template-columns:360px minmax(0,1fr);border:1px solid var(--gray-200);border-radius:16px;background:#fff;overflow:hidden;overflow-anchor:none;min-height:812px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 32px 64px -40px rgba(27,27,60,.24)}
.cx-jlist{list-style:none;margin:0;padding:0;border-right:1px solid var(--gray-200);display:flex;flex-direction:column}
.cx-jlist li{border-bottom:1px solid var(--gray-200);flex:1;display:flex;flex-direction:column}
.cx-jlist li:last-child{border-bottom:0}
.cx-job{all:unset;box-sizing:border-box;display:block;width:100%;flex:1;padding:24px 28px;cursor:pointer;transition:background .2s}
.cx-job b{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--gray-800)}
.cx-job b svg{flex:none;color:var(--gray-600)}
.cx-job .ar{opacity:0;transition:opacity .2s}
.cx-job .cv{display:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cx-job span{display:block;margin-top:6px;font-size:1rem;line-height:1.55;color:var(--gray-600)}
@media (hover:hover){.cx-job:hover{background:var(--gray-50)}}
.cx-job.on{background:var(--gray-100)}
.cx-job.on .ar{opacity:1}
.cx-job:focus-visible{outline:2px solid var(--gradient-mid);outline-offset:-2px}
.cx-jstage{position:relative;min-width:0;padding:28px;background:var(--gray-100);container-type:inline-size;container-name:cxstage}
.cx-jstage[hidden]{display:none}
.cx-jfig{margin:0;height:100%}
.cx-jfig[hidden]{display:none}
.cx-jfig.in{animation:cxfin .32s cubic-bezier(.2,.7,.2,1) both}
.cx-jfig .cx-cw{height:auto;min-height:100%;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 24px 48px -32px rgba(27,27,60,.3)}
.cx-jfig .cx-cw-b{padding:20px 24px}
.cx-links{display:flex;flex-wrap:wrap;gap:8px 40px;margin:28px 0 0;padding:0;list-style:none}
.cx-links .lp-gx-link{margin-top:0}
/* build cards */
.cx-dcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-dcard{background:var(--cw-card,#fff);border-radius:12px;box-shadow:0 0 0 1px var(--cw-line2,#e5e2d9);overflow:hidden}
.cx-dcard-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--cw-line,#ebe8df);background:var(--cw-th,#f5f4ef)}
.cx-dcard-h b{font:500 13px var(--cw-font,var(--font));color:var(--cw-fg,#1f1e1d)}
.cx-dcard-n{padding:10px 12px 2px;font:600 14.5px var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-text,#141413)}
.cx-dcard dl{margin:0;padding:4px 12px 10px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;line-height:1.45}
.cx-dcard dt{color:var(--cw-dt,#8a8373)}
.cx-dcard dd{margin:0;color:var(--cw-fg,#1f1e1d)}
/* findings and setup lists */
.cx-flist{background:var(--cw-card,#fff);border-radius:12px;box-shadow:0 0 0 1px var(--cw-line2,#e5e2d9);overflow:hidden}
.cx-fr{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;padding:11px 14px;border-top:1px solid var(--cw-line,#ebe8df);align-items:start}
.cx-fr:first-child{border-top:0}
.cx-fr b{display:block;font:600 14.5px/1.35 var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-text,#141413)}
.cx-fr small{display:block;font:400 13.5px/1.4 var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-thfg,#6b6457);margin-top:2px}
.cx-fr .cx-fix{font:400 14px/1.4 var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-text,#141413)}
.cx-fr.fh{background:var(--cw-th,#f5f4ef);padding:7px 14px;font:500 12.5px var(--cw-font,var(--font));color:var(--cw-thfg,#6b6457)}
.cx-sr{display:grid;grid-template-columns:22px 118px minmax(0,1fr);gap:12px;padding:11px 14px;border-top:1px solid var(--cw-line,#ebe8df);align-items:center}
.cx-sr:first-child{border-top:0}
.cx-sr img{width:20px;height:20px;object-fit:contain}
.cx-sr b{font:500 13px var(--cw-font,var(--font));color:var(--cw-fg,#1f1e1d)}
.cx-sr span{font:400 14px/1.4 var(--cw-serif,'Source Serif 4',Georgia,serif);color:var(--cw-text,#141413)}
/* watch: the workspace Agents page */
.cx-app2{min-height:100%;border-radius:14px;background:#fff;border:1px solid #e3e3e8;overflow:hidden;font:400 13.5px/1.45 var(--font);color:var(--gray-800);box-shadow:0 24px 48px -32px rgba(27,27,60,.3)}
.cx-app2 .cx-top{height:52px}
.cx-ag{padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}
.cx-ag .cx-h{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--gray-800)}
.cx-ag-sub{font-size:13px;color:var(--gray-600);margin:4px 0 14px;max-width:440px}
.cx-agt{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e8e8ed;border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums}
.cx-agt th{font-size:11.5px;font-weight:500;color:var(--gray-500);text-align:left;padding:8px 12px;background:var(--gray-50);border-bottom:1px solid #ececf0}
.cx-agt td{font-size:13px;padding:8px 12px;border-top:1px solid #f0f0f3;vertical-align:middle}
.cx-agt tr:first-child td{border-top:0}
.cx-agt td.s{color:var(--gray-700)}
.cx-agt td.r{color:var(--gray-500);white-space:nowrap}
.cx-lgs{display:flex;gap:5px;align-items:center}
.cx-lgs img{width:15px;height:15px;object-fit:contain}
.cx-apc{border:1px solid #e3e3e8;border-radius:14px;padding:14px;align-self:start;background:#fff;box-shadow:0 12px 28px -18px rgba(27,27,60,.28)}
.cx-apc-t{display:flex;gap:10px;align-items:flex-start}
.cx-apc-t img{width:20px;height:20px;object-fit:contain;margin-top:1px}
.cx-apc-t b{display:block;font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.cx-apc-t small{display:block;font-size:12px;color:var(--gray-500);margin-top:3px}
.cx-apc p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--gray-600)}
.cx-apc dl{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--gray-50);border:1px solid #ececf0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.cx-apc dt{color:var(--gray-500)}
.cx-apc dd{margin:0}
.cx-apc-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cx-apc-b span{display:grid;place-items:center;height:36px;border-radius:9px;font-size:13.5px;font-weight:600}
.cx-apc-b .ap{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));color:#fff}
.cx-apc-b .rj{background:var(--gray-100);border:1px solid #e3e3e8;color:var(--gray-800)}
.cx-runs{margin:16px -14px -14px;border-top:1px solid #ececf0;padding:10px 14px 12px}
.cx-runs-h{font-size:12px;color:var(--gray-500);margin-bottom:4px}
.cx-run{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:7px 0;border-top:1px solid #f0f0f3;font-size:12.5px;line-height:1.4;color:var(--gray-600)}
.cx-runs-h + .cx-run{border-top:0}
.cx-run .rt{color:var(--gray-500);font-variant-numeric:tabular-nums}
.cx-run b{display:block;font-weight:600;color:var(--gray-800)}
@media (prefers-reduced-motion:reduce){.cx-seq .q,.cx-jfig.in,.cx-mt .spin{animation:none!important;transition:none!important}}
/* job views adapt to their own stage */
@container cxstage (max-width:860px){.cx-ag{grid-template-columns:minmax(0,1fr) 250px}.cx-agt .lr,.cx-agt td.r{display:none}}
@container cxstage (max-width:640px){.cx-dcards{grid-template-columns:1fr}.cx-ag{display:block}.cx-apc{margin-top:14px}}
@container cxstage (max-width:540px){
  .cx-jfig .cx-cw-b{padding:14px 12px}
  .cx-fr{grid-template-columns:1fr;gap:6px}
  .cx-fr.fh{display:none}
  .cx-fr .cx-fix::before{content:"Fix: ";color:#8a8373}
  .cx-sr{grid-template-columns:20px 1fr;row-gap:2px}
  .cx-sr span{grid-column:2}
  .cx-mtbl .hm,.cx-agt .hm{display:none}
  .cx-ag{padding:14px 12px}
}
/* 1100 and below: the picture stacks, Claude under the workspace, never scaled */
@media (max-width:1100px){
  .cx-scale{width:auto;height:auto;transform:none!important}
  .cx-box{height:auto!important}
  .cx-app{position:relative;width:auto;height:auto;display:block;border-radius:12px}
  .cx-side{display:none}
  .cx-body{overflow:visible;padding-bottom:64px}
  .cx-col{max-width:none}
  .cx-col .cx-card{display:none}
  .cx-scale > .cx-cw{position:relative;right:auto;top:auto;width:auto;max-width:640px;height:auto;margin:-40px -12px 0 auto}
  .cx-frame{grid-template-columns:320px minmax(0,1fr)}
}
/* 1000 and below: the jobs become an accordion, each visual opens under its own row */
@media (max-width:1000px){
  .cx-frame{display:block;min-height:0}
  .cx-jlist{border-right:0}
  .cx-job .ar{display:none}
  .cx-job .cv{display:block}
  .cx-job[aria-expanded=true] .cv{transform:rotate(180deg)}
  .cx-jlist li.on{background:var(--gray-100)}
  .cx-job.on{background:transparent}
  .cx-jstage{padding:0 14px 16px;background:transparent}
}
@media (max-width:760px){
  main.lp .cx-hero{padding:96px 0 48px}
  .cx-hero .lp-h1{font-size:2.75rem;line-height:1.06}
  .cx-stage{margin-top:32px}
  .cx-top{height:46px;padding:0 12px;gap:8px}
  .cx-top .hide-m{display:none}
  .cx-body{padding:14px 12px 48px}
  .cx-hi .cx-h{font-size:17px}
  .cx-hi p{font-size:12px}
  .cx-sync{display:none}
  .cx-sum{font-size:12px;padding:8px 10px}
  .cx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
  .cx-kpi{padding:8px 10px 9px;border-radius:10px}
  .cx-kpi b{font-size:17px}
  .cx-scale > .cx-cw{max-width:none;margin:-34px -6px 0 10px}
  .cx-cw-b{padding:14px 12px}
  .cx-mu{font-size:14px}
  .cx-ms{font-size:15px}
  .cx-mtbl th{padding:6px 8px;font-size:11.5px}
  .cx-mtbl td{padding:6px 8px;font-size:13px}
  .cx-ph{font-size:13.5px}
  main.lp section.lp-gx-strip.cx-strip{padding-top:32px !important}
  main.lp section.cx-jobs{padding-top:80px !important}
  .cx-jobs-vis{margin-top:32px}
  .cx-frame{border-radius:14px}
  .cx-job{padding:18px}
  .cx-job b{font-size:1.0625rem}
  .cx-jstage{padding:0 8px 12px}
  .cx-links{flex-direction:column;gap:14px}
}
@media (max-width:360px){.cx-hero .lp-h1{font-size:2.5rem}}
/* Setup steps: a long connect command stays on one line and scrolls sideways, never split inside a flag or the address (Rio 19 Oct, rounds 1 and 2) */
.lp-step__viz .lp-url code { white-space: nowrap; text-overflow: clip; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
/* Assistant windows (19 Oct): the approved Claude window, drawn in each assistant's own colours, from each page's 16 Oct research.
   Assistants other than Claude show PaidSync.ai's own preview card and ask in their reply; Claude Code shows its terminal prompt. */
.cx-k-chatgpt{--cw-bg:#fff;--cw-fg:#0d0d0d;--cw-text:#0d0d0d;--cw-title:#0d0d0d;--cw-muted:#6b6b6b;--cw-line:#ececec;--cw-line2:#e3e3e3;--cw-bubble:#f4f4f4;--cw-bubble-r:20px;--cw-card:#fff;--cw-th:#f9f9f9;--cw-thfg:#6b6b6b;--cw-kv:#f7f7f7;--cw-dt:#8f8f8f;--cw-ph:#8f8f8f;--cw-comp:#fff;--cw-comp-line:#dcdcdc;--cw-comp-r:26px;--cw-send:#0d0d0d;--cw-sendfg:#fff;--cw-send-r:50%;--cw-cbtn-r:50%;--cw-serif:var(--font);--cw-ms-size:15px}
.cx-k-gemini{--cw-bg:#fff;--cw-fg:#1f1f1f;--cw-text:#1f1f1f;--cw-title:#1f1f1f;--cw-muted:#5f6368;--cw-line:#e3e6ea;--cw-line2:#e3e6ea;--cw-bubble:#e9eef6;--cw-bubble-r:22px;--cw-card:#fff;--cw-th:#f0f4f9;--cw-thfg:#5f6368;--cw-kv:#f0f4f9;--cw-dt:#5f6368;--cw-ph:#5f6368;--cw-comp:#f0f4f9;--cw-comp-line:#f0f4f9;--cw-comp-r:28px;--cw-send:#1a73e8;--cw-sendfg:#fff;--cw-send-r:50%;--cw-cbtn-r:50%;--cw-serif:var(--font);--cw-ms-size:15px}
.cx-k-copilot{--cw-bg:#fff;--cw-fg:#242424;--cw-text:#242424;--cw-title:#242424;--cw-muted:#616161;--cw-line:#e6e6e6;--cw-line2:#e0e0e0;--cw-bubble:#ebebfa;--cw-bubble-r:8px;--cw-card:#fff;--cw-th:#f5f5f5;--cw-thfg:#616161;--cw-kv:#f5f5f5;--cw-dt:#707070;--cw-ph:#707070;--cw-comp:#fff;--cw-comp-line:#d1d1d1;--cw-comp-r:12px;--cw-send:#5b5fc7;--cw-sendfg:#fff;--cw-send-r:6px;--cw-cbtn-r:6px;--cw-serif:var(--font);--cw-ms-size:15px}
.cx-k-perplexity{--cw-bg:#fbfaf4;--cw-fg:#13343b;--cw-text:#13343b;--cw-title:#13343b;--cw-muted:#6b7b7e;--cw-line:#e5e2d6;--cw-line2:#dad7ca;--cw-bubble:#efede3;--cw-bubble-r:16px;--cw-card:#fff;--cw-th:#f3f1e8;--cw-thfg:#6b7b7e;--cw-kv:#f3f1e8;--cw-dt:#7d8a8c;--cw-ph:#7d8a8c;--cw-comp:#fff;--cw-comp-line:#dad7ca;--cw-comp-r:20px;--cw-send:#20808d;--cw-sendfg:#fff;--cw-send-r:50%;--cw-cbtn-r:50%;--cw-serif:var(--font);--cw-ms-size:15px}
.cx-k-meta-muse{--cw-bg:#fff;--cw-fg:#1c1e21;--cw-text:#1c1e21;--cw-title:#1c1e21;--cw-muted:#65676b;--cw-line:#e4e6eb;--cw-line2:#d0d3d8;--cw-bubble:#f0f2f5;--cw-bubble-r:18px;--cw-card:#fff;--cw-th:#f0f2f5;--cw-thfg:#65676b;--cw-kv:#f0f2f5;--cw-dt:#8a8d91;--cw-ph:#8a8d91;--cw-comp:#fff;--cw-comp-line:#d0d3d8;--cw-comp-r:24px;--cw-send:#0866ff;--cw-sendfg:#fff;--cw-send-r:50%;--cw-cbtn-r:50%;--cw-serif:var(--font);--cw-ms-size:15px}
.cx-k-grok{--cw-bg:#0a0a0a;--cw-fg:#e8e8e8;--cw-text:#ececec;--cw-title:#e8e8e8;--cw-muted:#9b9b9b;--cw-line:#232323;--cw-line2:#2b2b2b;--cw-bubble:#1c1c1c;--cw-bubble-r:16px;--cw-card:#141414;--cw-th:#1c1c1c;--cw-thfg:#9b9b9b;--cw-kv:#1c1c1c;--cw-dt:#8a8a8a;--cw-ph:#8a8a8a;--cw-comp:#141414;--cw-comp-line:#2b2b2b;--cw-comp-r:24px;--cw-send:#fff;--cw-sendfg:#0a0a0a;--cw-send-r:50%;--cw-cbtn-r:50%;--cw-serif:var(--font);--cw-ms-size:15px}
.cx-k-cursor{--cw-bg:#14120b;--cw-fg:#d8d6cd;--cw-text:#e8e6dc;--cw-title:#d8d6cd;--cw-muted:#9a968a;--cw-line:#2a2820;--cw-line2:#34312a;--cw-bubble:#201e15;--cw-bubble-r:10px;--cw-card:#1b1910;--cw-th:#201e15;--cw-thfg:#9a968a;--cw-kv:#201e15;--cw-dt:#8a867a;--cw-ph:#8a867a;--cw-comp:#1b1910;--cw-comp-line:#34312a;--cw-comp-r:14px;--cw-send:#ece9dc;--cw-sendfg:#14120b;--cw-send-r:50%;--cw-cbtn-r:8px;--cw-serif:var(--font);--cw-ms-size:14.5px}
.cx-k-codex{--cw-bg:#0d0d0d;--cw-fg:#ececec;--cw-text:#ececec;--cw-title:#ececec;--cw-muted:#9b9b9b;--cw-line:#262626;--cw-line2:#2e2e2e;--cw-bubble:#1c1c1c;--cw-bubble-r:12px;--cw-card:#161616;--cw-th:#1c1c1c;--cw-thfg:#9b9b9b;--cw-kv:#1c1c1c;--cw-dt:#7d7d7d;--cw-ph:#7d7d7d;--cw-comp:#161616;--cw-comp-line:#2e2e2e;--cw-comp-r:16px;--cw-send:#fff;--cw-sendfg:#0d0d0d;--cw-send-r:50%;--cw-cbtn-r:8px;--cw-serif:var(--font);--cw-ms-size:14.5px}
.cx-k-claude-code{--cw-bg:#1f1e1d;--cw-fg:#e8e6dc;--cw-text:#e8e6dc;--cw-title:#e8e6dc;--cw-muted:#a39e92;--cw-line:#33312d;--cw-line2:#3d3a35;--cw-bubble:#2b2926;--cw-bubble-r:8px;--cw-card:#262422;--cw-th:#2b2926;--cw-thfg:#a39e92;--cw-kv:#2b2926;--cw-dt:#8a867a;--cw-ph:#8a867a;--cw-comp:#262422;--cw-comp-line:#3d3a35;--cw-comp-r:10px;--cw-send:#c96442;--cw-sendfg:#fff;--cw-send-r:8px;--cw-cbtn-r:6px;--cw-font:ui-monospace,SFMono-Regular,Menlo,monospace;--cw-serif:ui-monospace,SFMono-Regular,Menlo,monospace;--cw-ms-size:13.5px;--cw-td-size:12.5px}
.cx-k-grok .cx-cw-t img{filter:invert(1)}
/* the tool line as a neutral chip (assistants other than Claude) and as Claude Code's terminal line */
.cx-mt .cx-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--cw-line2,#e5e2d9);color:var(--cw-muted,#73726c);font-size:12.5px}
.cx-mt .cx-chip img{width:16px;height:16px;border-radius:4px;display:block}
.cx-mt .cx-chip code{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cw-title,#3d3929)}
.cx-k-claude-code .cx-mu{align-self:stretch;max-width:none;background:var(--cw-bubble);border-radius:6px;padding:7px 10px;font-size:13.5px}
.cx-k-claude-code .cx-mt{font-size:12.5px;color:var(--cw-text)}
.cx-k-claude-code .cx-mt b{color:#7fb069;font-weight:400}
.cx-k-claude-code .cx-mt i{font-style:normal;color:var(--cw-muted)}
.cx-k-claude-code .cx-ms{line-height:1.55}
/* PaidSync.ai's own preview card, the check every assistant gets before a change runs */
.cx-pv .cx-ph{font-weight:500}
.cx-pv .cx-ph em{font-style:normal;font-weight:400;color:var(--cw-muted,#73726c)}
.cx-pv-f{padding:10px 15px 13px;font-size:12.5px;color:var(--cw-muted,#73726c)}
/* Claude Code's permission prompt */
.cx-cc{border-radius:8px;box-shadow:inset 0 0 0 1px #8a6a5a;padding:11px 13px 12px;font:400 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cw-text)}
.cx-cc .t{color:#e3a07f}
.cx-cc dl{margin:6px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px}
.cx-cc dt{color:var(--cw-muted)}
.cx-cc dd{margin:0}
.cx-cc .ask{color:var(--cw-text)}
.cx-cc .op{display:block;color:var(--cw-muted);padding-left:16px;text-indent:-16px}
.cx-cc .op.on{color:#e3a07f}
.cx-k-claude-code .cx-crow{display:none}
.cx-cw-t .cx-agent{color:#5b5fc7}
/* Chat tables: numbers, dates and short values never break; only the first column wraps (Rio 19 Oct, round 2) */
.cx-mtbl th.nw,.cx-mtbl td.nw{white-space:nowrap}