/* Connect guides as landing pages (step 3, Ahmed 3 Nov "1-5 ok go ahead"): the agencies look around the guide's own words */
.cn-hero .sh-split{padding-bottom:120px}
.cn-hero .sr-crumbs{margin:0 0 22px;font:500 14px/1.4 "Inter",sans-serif;color:rgba(255,255,255,.78);letter-spacing:0;text-transform:none}
.cn-hero .sr-crumbs a{color:#E6DAFF;text-decoration:none}
.cn-hero .sr-crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.cn-hero .sr-crumbs .sep{margin:0 10px;opacity:.6}
.cn-hero .sr-h1{margin:0;max-width:none;font:600 clamp(40px,4.2vw,58px)/1.07 "Figtree","Helvetica Neue",Arial,sans-serif;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.cn-hero .sh-cta{margin-top:32px}
.cn-hero .sr-meta{margin:28px 0 0;font:500 15px/1.4 "Inter",sans-serif;color:rgba(255,255,255,.86)}
.cn-hero .sr-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.cn-hero .sr-meta .bar{margin:0 10px;opacity:.5}
.cn-hero .sr-disclosure{margin:10px 0 0;max-width:560px;padding:0;border:0;background:none;font:400 14px/1.55 "Inter",sans-serif;color:rgba(255,255,255,.72)}
.cn-mid{position:relative;align-self:stretch;display:grid;align-items:center}
.cn-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:17px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(27,43,123,.2),inset 0 0 0 1px #E3E8EF}
.cn-hub img{width:30px;height:30px}
.cn-hero .sh-conn__lines path{animation:cnFlow 1.4s linear infinite}
.cn-hero .sh-conn__from span.is-on{background:#1B2B7B;color:#fff}
@keyframes cnFlow{to{stroke-dashoffset:-18}}
.cn-card{display:grid}
.cn-card .cn-q{justify-self:end;max-width:92%;margin:12px 0 0;padding:11px 15px;border-radius:16px 16px 4px 16px;background:#1B2B7B;color:#fff;font:500 14px/1.45 "Inter",sans-serif}
.cn-res{display:grid;gap:6px;margin-top:12px}
.cn-res p{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;gap:14px;align-items:center;margin:0;padding:9px 12px;border-radius:12px;background:#fff;font:500 13.5px/1.2 "Inter",sans-serif;color:#0B1530}
.cn-res p em{font-style:normal;color:#5A647A;text-align:right}
.cn-res p b{font-weight:600;text-align:right;color:#2A6619}
.cn-res .cn-res__h{background:none;padding-top:0;padding-bottom:0;font-size:12px;color:#5A647A}
.cn-res .cn-res__h b,.cn-res .cn-res__h em{color:#5A647A;font-weight:500}
.cn-tool{justify-self:start;margin-top:10px;font:500 12px/1 "Inter",sans-serif;color:#5A647A}
.cn-tool code{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1B2B7B;background:#fff;padding:4px 7px;border-radius:7px}

/* the short answer, then why */
.cn-sec .answer-capsule{margin:0!important;font:400 clamp(19px,1.6vw,22px)/1.55 "Figtree","Helvetica Neue",Arial,sans-serif!important;color:var(--nl-ink)}
.cn-why{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;margin-top:110px;align-items:start}
.cn-why h2,.cn-sec h2{margin:0}
.cn-copy p,.cn-sec .cn-copy p{margin:20px 0 0;font:400 17px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-copy p a,.cn-sec p a,.cn-steps a,.cn-cards a{color:var(--nl-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(27,43,123,.35)}
.cn-sec code,.cn-steps code{font:500 .88em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--nl-navy);background:var(--nl-tint);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.cn-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cn-cards li{margin:0;padding:26px 26px 24px;border-radius:24px;background:var(--nl-tint);font:400 15.5px/1.6 var(--nl-f);color:var(--nl-ink2)}
.cn-cards li::before{display:none}
.cn-cards li strong{display:block;margin:16px 0 6px;font:600 18px/1.3 var(--nl-fd);letter-spacing:-.01em;color:var(--nl-ink)}
.cn-cards li:last-child:nth-child(odd){grid-column:1/-1}
.cn-cards--caps{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px}
.cn-cards--caps li:last-child:nth-child(odd){grid-column:auto}
.cn-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;box-shadow:0 6px 18px rgba(27,43,123,.08)}
.cn-ic svg{width:24px;height:24px;fill:none;stroke:var(--nl-navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cn-more{margin:28px 0 0;font:400 16px/1.6 var(--nl-f);color:var(--nl-mut)}

/* setup: each step lights up as you read it, its example on the right */
.cn-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px;margin-top:52px;align-items:start}
.cn-steps .before-start{margin:0 0 18px;padding:24px 28px;border-radius:24px;border:1px dashed #C9D2E3;background:#fff}
.cn-steps .before-start p{margin:0 0 10px;font:600 17px/1.3 var(--nl-fd);color:var(--nl-ink)}
.cn-steps .before-start ul{margin:0;padding:0 0 0 20px;font:400 15.5px/1.6 var(--nl-f);color:var(--nl-ink2)}
.cn-steps .before-start li{margin:6px 0}
.cn-steps .setup-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;margin:0 0 14px;padding:26px 28px 14px 24px;border-radius:24px;border:1px solid var(--nl-line);background:#fff;cursor:pointer;transition:border-color .3s ease,box-shadow .3s ease}
.cn-steps .setup-step.is-on{border-color:#CFC6F4;box-shadow:0 18px 48px rgba(27,43,123,.1)}
.cn-steps .setup-step__num{position:static;display:grid;place-items:center;width:44px;height:44px;margin:0;border-radius:50%;background:var(--nl-tint);color:var(--nl-navy);font:600 18px/1 var(--nl-fd);transition:background .3s ease,color .3s ease}
.cn-steps .setup-step.is-on .setup-step__num{background:linear-gradient(135deg,#1B2B7B,#5B2D8E);color:#fff}
.cn-steps .setup-step h4{margin:8px 0 12px;font:600 21px/1.28 var(--nl-fd);letter-spacing:-.015em;color:var(--nl-ink)}
.cn-steps .setup-step p{margin:0 0 12px;font:400 16px/1.6 var(--nl-f);color:var(--nl-ink2)}
.cn-steps .code-block{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#0B1530;overflow-x:auto}
.cn-steps .code-block code{background:none;color:#E6EBFF;padding:0}
.cn-stage{position:sticky;top:110px;min-height:420px;padding:30px;display:grid;align-content:center}
.cn-v{display:none;flex-direction:column;gap:10px}
.cn-v.is-on{display:flex}
.cn-v__k{margin:0 0 6px;font:600 13px/1 var(--nl-f);color:rgba(255,255,255,.8);letter-spacing:.02em}
.cn-sign{display:grid;gap:10px;padding:22px;border-radius:22px}
.cn-sign b{font:600 20px/1.2 var(--nl-fd);color:#fff}
.cn-sign span{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:999px;background:#fff;color:#0B1530;font:600 14.5px/1 var(--nl-f)}
.cn-sign span+span{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cn-sign small{font:500 13px/1.4 var(--nl-f);color:rgba(255,255,255,.86);text-align:center}
.cn-acct{display:grid;gap:8px}
.cn-acct p{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;border-radius:16px;font:500 15px/1.2 var(--nl-f);color:#fff}
.cn-acct p i{margin-left:auto;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.cn-acct p.is-pick i{background:#fff;box-shadow:inset 0 0 0 6px #7CB518}
.cn-search{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;font:500 15px/1 var(--nl-f);color:#fff}
.cn-search svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}

/* the rest of the guide reads in the home look */
.cn-sec{padding-top:140px}
.cn-prose{max-width:820px}
.cn-prose h2{margin:72px 0 0!important;padding:0!important;border:0!important;font:600 clamp(28px,2.6vw,38px)/1.12 var(--nl-fd)!important;letter-spacing:-.025em;color:var(--nl-ink)!important;text-wrap:balance}
.cn-prose h2:first-of-type{margin-top:0!important}
.cn-prose p{margin:18px 0 0;font:400 17px/1.7 var(--nl-f);color:var(--nl-ink2)}
.cn-prose .code-block{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:#0B1530;overflow-x:auto}
.cn-prose .code-block code{background:none;color:#E6EBFF;padding:0}
.cn-prompts{list-style:none!important;margin:44px 0 0!important;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:cn}
.cn-prompts li{position:relative;counter-increment:cn;margin:0!important;padding:24px 92px 22px 74px!important;border-radius:22px;border:1px solid var(--nl-line);background:#fff;font:400 14.5px/1.6 var(--nl-f);color:var(--nl-mut);transition:border-color .2s ease,box-shadow .2s ease}
.cn-prompts li::before{content:counter(cn)!important;position:absolute;left:22px;top:22px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--nl-tint);color:var(--nl-navy);font:600 15px/1 var(--nl-fd)}
.cn-prompts li:hover{border-color:#CFC6F4;box-shadow:0 14px 36px rgba(27,43,123,.08)}
.cn-prompts li strong{display:block;margin-bottom:8px;font:600 17px/1.42 var(--nl-fd);color:var(--nl-ink)}
.cn-prompts li.is-copied{border-color:#9BD07A}
.cn-copy-b{position:absolute;right:16px;top:18px;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--nl-tint);color:var(--nl-navy);font:600 13px/1 var(--nl-f);cursor:pointer}
.cn-copy-b:hover{background:#E6EBFA}
.cn-copy-b:focus-visible{outline:2px solid var(--nl-navy);outline-offset:2px}
.cn-note{margin-top:28px;padding:26px 30px;border-radius:24px;border:1px solid var(--nl-line)}
.cn-note p{margin:0;font:400 16px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-note p+p{margin-top:12px}
.cn-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center;margin-top:110px}
.cn-split h3{margin:0;font:600 clamp(26px,2.4vw,34px)/1.15 var(--nl-fd);letter-spacing:-.02em;color:var(--nl-ink)}
.cn-split .lp-ctl__stage{padding:30px;border-radius:28px;background:var(--nl-tint)}
.cn-week{padding:30px}
.cn-week__days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.cn-week__days span{display:grid;justify-items:center;gap:8px;padding:12px 0;border-radius:16px;font:600 13px/1 var(--nl-f);color:rgba(255,255,255,.86)}
.cn-week__days span i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.cn-week__days span.is-run i{background:#9BE36B;box-shadow:0 0 0 5px rgba(155,227,107,.22)}
.cn-faq{margin-top:28px}
.cn-faq details summary{font:600 19px/1.4 var(--nl-fd);color:var(--nl-ink)}
.cn-close{padding-bottom:200px}
.cn-close .cn-close__h{margin:0 auto;max-width:900px;font:600 clamp(36px,4.4vw,62px)/1.06 var(--nl-fd);letter-spacing:-.034em;color:#fff;text-wrap:balance}
.cn-rel{max-width:1040px;margin:96px auto 0;text-align:left}
.cn-rel .related-label{margin:0 0 14px!important;font:600 13px/1 var(--nl-f)!important;letter-spacing:.06em;text-transform:uppercase;color:#fff!important}
.cn-rel .related+.related{margin-top:36px}
.cn-rel .related-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cn-rel .related-item{display:grid;gap:6px;padding:18px 20px;border-radius:18px;text-decoration:none;color:#fff;transition:transform .2s ease}
.cn-rel .related-item:hover{transform:translateY(-2px)}
.cn-rel .related-item .title{font:600 16px/1.3 var(--nl-fd)}
.cn-rel .related-item .meta{font:500 13px/1 var(--nl-f);color:rgba(255,255,255,.72)}
@media (max-width:1100px){
  .cn-why,.cn-steps,.cn-split{grid-template-columns:1fr;gap:36px}
  .cn-stage{display:none}
  .cn-cards--caps,.cn-rel .related-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cn-sec{padding-top:96px}
  .cn-why,.cn-split{margin-top:72px}
  .cn-cards,.cn-cards--caps,.cn-prompts,.cn-rel .related-list{grid-template-columns:1fr}
  .cn-cards li:last-child:nth-child(odd){grid-column:auto}
  .cn-steps .setup-step{grid-template-columns:1fr;gap:12px;padding:22px 20px 10px}
  .cn-prompts li{padding:66px 20px 20px!important}
  .cn-prompts li::before{left:20px;top:18px}
  .cn-copy-b{top:20px}
  .cn-hero .sr-disclosure{max-width:none}
}
@media (prefers-reduced-motion:reduce){.cn-hero .sh-conn__lines path{animation:none}}
/* round 2: light on the surface, one item open at a time (Ahmed 3 Nov 21:31 "text heavy") */
.cn-head{margin-top:120px}
.cn-sec>.lp-wrap>.cn-head:first-child{margin-top:0}
.cn-head__r{display:grid;gap:18px;align-content:start}
.cn-head__r .lp-lede{margin:0!important}
.cn-feat summary .cn-sum{font:600 20px/1.3 var(--nl-fd);letter-spacing:-.01em;color:var(--nl-mut);transition:color .2s ease}
.cn-feat summary .cn-sum strong{font-weight:inherit}
.cn-feat summary:hover .cn-sum,.cn-feat details[open] summary .cn-sum{color:var(--nl-ink)}
.cn-feat summary h4{margin:0;font:600 20px/1.3 var(--nl-fd);letter-spacing:-.01em;color:var(--nl-mut);transition:color .2s ease}
.cn-feat summary:hover h4,.cn-feat details[open] summary h4{color:var(--nl-ink)}
.cn-feat details>p,.cn-feat details>.code-block{margin:0 0 14px 60px!important;padding:0!important}
.cn-feat details>p{font:400 16.5px/1.62 var(--nl-f);color:var(--nl-ink2)}
.cn-feat details>:last-child{margin-bottom:24px!important}
.cn-feat details a{color:var(--nl-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(27,43,123,.35)}
.cn-feat details code{font:500 .88em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--nl-navy);background:var(--nl-tint);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.cn-feat .code-block{padding:12px 14px!important;border-radius:12px;background:#0B1530;overflow-x:auto}
.cn-feat .code-block code{background:none;color:#E6EBFF;padding:0}
.cn-n{font:600 17px/1 var(--nl-fd);color:var(--nl-navy)}
.cn-feat details[open] .cn-n{background:linear-gradient(135deg,#1B2B7B,#5B2D8E);color:#fff;box-shadow:none}
.cn-logos{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:6px}
.cn-logos span{display:grid;place-items:center;aspect-ratio:1;border-radius:16px}
.cn-logos img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.cn-term{display:grid;gap:8px;padding:18px 20px;border-radius:18px;font:500 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.cn-term p{margin:0;display:flex;gap:10px;overflow-wrap:anywhere}
.cn-term i{font-style:normal;color:rgba(255,255,255,.6)}
.cn-term code{background:none;color:#fff;padding:0;font:inherit}
.cn-term .ok{color:#B9F09A}
/* the checklist reads as three small cards above the steps */
.cn-before{margin:48px 0 0!important;padding:0!important;border:0!important;background:none!important}
.cn-before>p{margin:0 0 14px!important;font:600 13px/1.3 var(--nl-fd)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--nl-purple,#5B2D8E)!important}
.cn-before>p strong{font-weight:inherit}
.cn-before ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0!important;padding:0!important;list-style:none}
.cn-before li{margin:0!important;padding:20px 22px!important;border-radius:20px;background:var(--nl-tint);font:400 15px/1.55 var(--nl-f);color:var(--nl-ink2)}
.cn-before li::before{display:none!important}
/* the apps: a tab each, the pane holds the guide's own question and answer */
.cn-sec .lp-pane__l h2{margin:0!important;padding:0!important;border:0!important;font:600 32px/1.12 var(--nl-fd)!important;letter-spacing:-.025em;color:var(--nl-ink)!important;text-wrap:balance}
.cn-sec .lp-pane__l p{margin:16px 0 0;font:400 16.5px/1.62 var(--nl-f);color:var(--nl-ink2)}
.cn-sec .lp-pane__l .code-block{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#0B1530;overflow-x:auto}
.cn-sec .lp-pane__l .code-block code{background:none;color:#E6EBFF;padding:0}
.cn-sec .lp-pane__l a{color:var(--nl-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(27,43,123,.35)}
.cn-sec .lp-pane__l code{font:500 .88em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--nl-navy);background:var(--nl-tint);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.cn-sec .lp-pane__r .lp-row__t small{color:rgba(255,255,255,.86)}
/* prompts: four on show, the rest one tap away */
.cn-prompts.is-folded li:nth-child(n+5){display:none}
.cn-prompts-more{display:inline-flex;align-items:center;gap:8px;height:48px;margin-top:20px;padding:0 22px;border:0;border-radius:999px;background:var(--nl-tint);color:var(--nl-navy);font:600 15px/1 var(--nl-f);cursor:pointer}
.cn-prompts-more:hover{background:#E6EBFA}
/* folded text: a quiet line that opens the rest */
.cn-fold{margin:0}
.cn-fold>summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font:600 15px/1.3 var(--nl-f);color:var(--nl-navy)}
.cn-fold>summary::-webkit-details-marker{display:none}
.cn-fold>summary::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--nl-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' stroke='%231B2B7B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .2s ease}
.cn-fold[open]>summary::after{transform:rotate(45deg)}
.cn-fold>p{margin:14px 0 0;font:400 16px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-notes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:28px;align-items:start}
.cn-card-fold{padding:22px 26px;border-radius:22px;border:1px solid var(--nl-line)}
.cn-card-fold>summary{font:600 16px/1.3 var(--nl-fd);color:var(--nl-ink)}
.cn-card-fold>summary strong{font-weight:inherit}
.cn-badge{display:flex;gap:16px;align-items:center;padding:20px 24px;border-radius:22px;background:var(--nl-tint)}
.cn-badge p{margin:0;font:400 15.5px/1.55 var(--nl-f);color:var(--nl-ink2)}
.cn-badge__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;box-shadow:0 6px 18px rgba(27,43,123,.08)}
.cn-badge__ic img{width:24px;height:24px;object-fit:contain}
.cn-split .cn-copy p{margin:18px 0 0;font:400 17px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-split .cn-fold{margin-top:16px}
.cn-split .cn-fold>p+p{margin-top:12px}
.cn-more{margin-top:24px}
.cn-more p{margin:0;font:400 15.5px/1.6 var(--nl-f);color:var(--nl-mut)}
@media (max-width:1100px){.cn-notes{grid-template-columns:1fr}}
@media (max-width:760px){
  .cn-head{margin-top:72px}
  .cn-before ul{grid-template-columns:1fr}
  .cn-feat details>p,.cn-feat details>.code-block{margin-left:0!important}
  .cn-logos{grid-template-columns:repeat(5,1fr)}
  .cn-sec .lp-pane__l h2{font-size:26px!important}
}
/* step 3b: the blocks every connect guide uses beyond the approved example (Ahmed 3 Nov "rest is good", "2-3 lines max") */
.cn-body p{margin:22px 0 0;max-width:780px;font:400 16.5px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-head+.cn-body p:first-child{margin-top:28px}
.cn-rest{max-width:780px}
.cn-rest>p{max-width:780px;font:400 16.5px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-sec .cn-feat,.cn-sec .cn-subs,.cn-sec .cn-list,.cn-sec .cn-prompts,.cn-sec .cn-before,.cn-sec .cn-table,.cn-sec .cn-gen{margin-top:44px}
.cn-sec>.lp-wrap>.code-block,.cn-sub__b .code-block,.cn-gen .code-block{margin:22px 0 0;max-width:860px;padding:14px 16px;border-radius:14px;background:#0B1530;overflow-x:auto}
.cn-sec>.lp-wrap>.code-block code,.cn-sub__b .code-block code,.cn-gen .code-block code{background:none;color:#E6EBFF;padding:0;overflow-wrap:normal;white-space:pre}
.cn-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:44px 0 0;padding:0;list-style:none}
.cn-list li{position:relative;margin:0;padding:20px 22px 20px 52px;border-radius:20px;background:var(--nl-tint);font:400 15.5px/1.6 var(--nl-f);color:var(--nl-ink2)}
.cn-list li::before{content:"";position:absolute;left:20px;top:23px;width:18px;height:18px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231B2B7B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.cn-list li strong{color:var(--nl-ink)}
.cn-list li:last-child:nth-child(odd){grid-column:1/-1}
.cn-subs{border-bottom:1px solid var(--nl-line)}
.cn-sub{border-top:1px solid var(--nl-line)}
.cn-sub>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none}
.cn-sub>summary::-webkit-details-marker{display:none}
.cn-sub>summary h3{margin:0;font:600 22px/1.3 var(--nl-fd);letter-spacing:-.015em;color:var(--nl-mut);transition:color .2s ease}
.cn-sub>summary:hover h3,.cn-sub[open]>summary h3{color:var(--nl-ink)}
.cn-sub>summary::after{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%231B2B7B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .22s ease}
.cn-sub[open]>summary::after{transform:rotate(45deg)}
.cn-sub__b{padding:0 0 28px}
.cn-sub__b .cn-body p:first-child{margin-top:0}
.cn-sub__b .cn-list{margin-top:4px}
.cn-table{margin-top:44px;overflow-x:auto;border-radius:20px;border:1px solid var(--nl-line)}
.cn-table table{width:100%;border-collapse:collapse;font:400 15px/1.55 var(--nl-f);color:var(--nl-ink2)}
.cn-table th{padding:14px 18px;text-align:left;font:600 13px/1.3 var(--nl-f);letter-spacing:.04em;text-transform:uppercase;color:var(--nl-mut);background:var(--nl-tint)}
.cn-table td{padding:14px 18px;border-top:1px solid var(--nl-line);vertical-align:top}
.cn-table td:first-child{color:var(--nl-ink);font-weight:500}
.cn-gen>h2,.cn-gen>h3{margin:36px 0 0;font:600 26px/1.2 var(--nl-fd);color:var(--nl-ink)}
.cn-gen>p{margin:16px 0 0;max-width:780px;font:400 16.5px/1.65 var(--nl-f);color:var(--nl-ink2)}
.cn-close .cn-close__p{margin:18px auto 0;max-width:640px;font:400 18px/1.6 var(--nl-f);color:rgba(255,255,255,.88)}
.cn-stack{display:grid!important;grid-template-columns:repeat(2,26px);gap:6px;padding:12px!important}
.cn-stack img{width:26px!important;height:26px!important;object-fit:contain}
.cn-conn--one .sh-conn__from span{max-width:170px;white-space:normal;line-height:1.2}
@media (max-width:760px){
  .cn-list{grid-template-columns:1fr}
  .cn-list li:last-child:nth-child(odd){grid-column:auto}
  .cn-sub>summary h3{font-size:19px}
}
.lp-answer__t .cn-body p{max-width:none;margin-top:16px}
.lp-answer__t>.code-block{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:#0B1530;overflow-x:auto}
.lp-answer__t>.code-block code{background:none;color:#E6EBFF;padding:0;overflow-wrap:normal;white-space:pre}
.lp-answer__t .cn-rest{max-width:none}
.lp-answer__t>p+p{margin-top:14px!important}
.cn-gen ul{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none;max-width:860px}
.cn-gen ul:not(.connect-links) li{position:relative;margin:0;padding:16px 20px 16px 50px;border-radius:18px;background:var(--nl-tint);font:400 15.5px/1.6 var(--nl-f);color:var(--nl-ink2)}
.cn-gen ul:not(.connect-links) li::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231B2B7B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.cn-list--one{grid-template-columns:1fr;max-width:900px}
.cn-list--one li:last-child:nth-child(odd){grid-column:auto}
.cn-list li p{margin:0}
.cn-list li p+p{margin-top:8px}
.cn-before.cn-before--rows ul{grid-template-columns:1fr;max-width:980px}
.cn-prompts.cn-prompts--one{grid-template-columns:1fr;max-width:1000px}
@media (min-width:1101px){.cn-feat{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.cn-feat details>p{font-size:16px!important}}
.cn-close .cn-close__h--long{max-width:900px;font-size:clamp(26px,2.4vw,34px);line-height:1.25;letter-spacing:-.02em}
.cn-copy-b::before{content:attr(data-l)}
@media (min-width:761px){.cn-nw{white-space:nowrap}}
@media (max-width:760px){.cn-table td+td{padding-left:0!important}.cn-table td+td::before{position:static!important;display:block;width:auto!important;margin:0 0 2px}}  /* a long column label sits above its value, never over the next one */
.cn-head>*{min-width:0}  /* a long command scrolls inside its own box; it never widens the column past a phone screen */
.lp-answer__t>.code-block{max-width:100%}
.cn-sec p a,.cn-sec li a,.cn-sec td a{overflow-wrap:anywhere}  /* a long address breaks instead of running off a phone screen */
/* the answer box: its paragraphs read as separate short blocks, and a 'do this in order' answer as numbered steps */
.cn-sec .answer-capsule p+p,.cn-sec .answer-capsule ol+p{margin-top:16px!important}
.cn-sec .answer-capsule .cn-cap-steps{counter-reset:cap;margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.cn-sec .answer-capsule .cn-cap-steps li{counter-increment:cap;position:relative;margin:0;padding:0 0 0 44px;font:inherit;font-size:.9em;line-height:1.5;color:var(--nl-ink2)}
.cn-sec .answer-capsule .cn-cap-steps li::before{content:counter(cap);position:absolute;left:0;top:.05em;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1B2B7B,#5B2D8E);color:#fff;font:600 14px/1 var(--nl-fd)}
.cn-sec .cn-list li p{margin:0}.cn-sec .cn-list li p+p{margin-top:10px}

/* Ahmed 4 Nov 00:3x: the hero card in the look of the panels further down and the security card: indigo glass on the sky,
   white text, the face inside the card, no white card */
.cn-hero .cn-vis{width:100%;max-width:540px;justify-self:end;margin:0}
.cn-hc{position:relative;isolation:isolate;display:grid;gap:16px;padding:22px;border-radius:32px;color:#fff;background:linear-gradient(180deg,rgba(46,32,140,.74),rgba(32,22,100,.82));-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:0 40px 90px rgba(12,8,60,.4)}
.cn-hc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 55%,rgba(255,255,255,.1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cn-hc__conn{display:grid;grid-template-columns:auto minmax(56px,1fr) auto;align-items:center;gap:10px;padding:14px 16px 14px 14px;border-radius:24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cn-hc__ai{display:flex;align-items:center;gap:10px;max-width:180px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.cn-hc__ai img{flex:none;box-sizing:border-box;width:34px;height:34px;padding:7px;border-radius:50%;background:#fff;object-fit:contain}
.cn-hc__ai b{font:600 14.5px/1.2 var(--nl-f);color:#fff}
.cn-hc__mid{display:flex;align-items:center;gap:8px;min-width:0}
.cn-hc__mid i{flex:1;min-width:8px;height:0;border-top:1.6px dashed rgba(255,255,255,.5)}
.cn-hc__hub{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;box-shadow:0 10px 26px rgba(10,6,50,.32)}
.cn-hc__hub img{width:27px;height:27px;object-fit:contain}
.cn-hc__to{display:flex;align-items:center;gap:12px}
.cn-hc__tile{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(10,6,50,.32)}
.cn-hc__tile img{width:30px;height:30px;object-fit:contain}
.cn-hc__tile--many{grid-template-columns:repeat(2,17px);gap:5px;align-content:center;justify-content:center}
.cn-hc__tile--many img{width:17px;height:17px}
.cn-hc__nm b{display:block;font:600 15.5px/1.2 var(--nl-fd);color:#fff;white-space:nowrap}
.cn-hc__nm em{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:5px 10px;border-radius:999px;background:#DDF7D3;color:#2A6619;font:600 12px/1 var(--nl-f);font-style:normal}
.cn-hc__nm em::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cn-hc__chat{display:grid;gap:10px;padding:2px 4px 2px}
.cn-hc__k{display:flex;align-items:center;gap:12px;margin:0;font:600 13.5px/1 var(--nl-f);color:rgba(255,255,255,.88);letter-spacing:.01em}
.cn-hc__k .lp-face{width:44px;height:44px;padding:3px}
.cn-hc__q{justify-self:end;max-width:90%;margin:0;padding:13px 19px;border-radius:24px 24px 6px 24px;font:400 17px/1.36 var(--nl-fd);color:#fff}
.cn-hc .cn-res{gap:7px;margin-top:4px}
.cn-hc .cn-res p{grid-template-columns:minmax(0,1fr) auto 76px;gap:14px;padding:12px 12px 12px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font:500 14.5px/1.2 var(--nl-f)}
.cn-hc .cn-res p em{color:rgba(255,255,255,.86)}
.cn-hc .cn-res p b{justify-self:center;padding:6px 11px;border-radius:999px;background:#DDF7D3;color:#2A6619;font:600 12.5px/1 var(--nl-f)}
.cn-hc .cn-res .cn-res__h{padding:0 16px;background:none;box-shadow:none;font:500 12px/1.2 var(--nl-f);color:rgba(255,255,255,.72)}
.cn-hc .cn-res .cn-res__h em,.cn-hc .cn-res .cn-res__h b{padding:0;background:none;color:rgba(255,255,255,.72);font-weight:500}
.cn-hc .cn-tool{justify-self:start;margin:2px 0 0;font:500 12.5px/1 var(--nl-f);color:rgba(255,255,255,.8)}
.cn-hc .cn-tool code{margin-left:4px;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);color:#fff;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
@media (max-width:1100px){.cn-hero .cn-vis{justify-self:stretch;max-width:560px}}
@media (max-width:560px){
  .cn-hc{gap:14px;padding:14px;border-radius:26px}
  .cn-hc__conn{gap:6px;padding:12px;border-radius:20px}
  .cn-hc__ai{max-width:120px;padding:5px 11px 5px 5px}
  .cn-hc__ai img{width:30px;height:30px;padding:6px}
  .cn-hc__ai b{font-size:13.5px}
  .cn-hc__hub{width:38px;height:38px;border-radius:12px}
  .cn-hc__hub img{width:22px;height:22px}
  .cn-hc__to{flex-direction:column;gap:6px;text-align:center}
  .cn-hc__tile{width:44px;height:44px;border-radius:14px}
  .cn-hc__tile img{width:26px;height:26px}
  .cn-hc__nm b{font-size:14px;white-space:normal}
  .cn-hc__nm em{margin-top:5px}
  .cn-hc__q{max-width:94%;padding:12px 16px;font-size:15.5px}
  .cn-hc .cn-res p{grid-template-columns:minmax(0,1fr) auto 64px;gap:10px;padding:10px 10px 10px 12px;font-size:13.5px}
  .cn-hc .cn-res .cn-res__h{padding:0 12px}
}

/* the prompts: a tidy grid of cards, the number, the prompt as the lead, one muted line on the tool */
.cn-sec .cn-prompts,.cn-sec .cn-prompts.cn-prompts--one{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:none}
.cn-sec .cn-prompts li{display:block;padding:24px 26px 24px 78px!important;border:0;border-radius:24px;background:var(--nl-tint);font:400 14.5px/1.6 var(--nl-f);color:var(--nl-mut);text-wrap:pretty}
.cn-sec .cn-prompts li::before{left:24px;top:22px;width:36px;height:36px;background:linear-gradient(135deg,#1B2B7B,#5B2D8E);color:#fff;font:600 15px/1 var(--nl-fd)}
.cn-sec .cn-prompts li:hover{box-shadow:0 14px 36px rgba(27,43,123,.08)}
.cn-sec .cn-prompts li strong{display:block;margin:0 76px 10px 0;font:600 17.5px/1.4 var(--nl-fd);color:var(--nl-ink);text-wrap:pretty}
.cn-sec .cn-prompts li code{margin:0 1px;padding:2px 7px;border-radius:7px;background:#fff;color:var(--nl-navy);font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 0 0 1px #E3E8EF}
.cn-sec .cn-prompts .cn-copy-b{top:20px;right:18px;background:#fff}
.cn-sec .cn-prompts li.is-copied{box-shadow:inset 0 0 0 1.5px #9BD07A}
@media (max-width:900px){
  .cn-sec .cn-prompts,.cn-sec .cn-prompts.cn-prompts--one{grid-template-columns:1fr}
  .cn-sec .cn-prompts li{padding:70px 20px 20px!important}
  .cn-sec .cn-prompts li::before{left:20px;top:18px}
  .cn-sec .cn-prompts li strong{margin-right:0}
}

/* what PaidSync can and cannot do: a labelled card per group, each opening on a full sentence */
.cn-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:44px}
.cn-group{padding:26px 28px 24px;border-radius:24px;background:var(--nl-tint)}
.cn-group>p,.cn-group .cn-rest>p{margin:0;max-width:none;font:400 15.5px/1.6 var(--nl-f);color:var(--nl-ink2);text-wrap:pretty}
.cn-group>p+p,.cn-group .cn-rest>p+p,.cn-group .cn-rest>p:first-of-type{margin-top:12px}
.cn-group>.cn-group__h{margin:0 0 10px;font:600 19px/1.3 var(--nl-fd);letter-spacing:-.01em;color:var(--nl-ink)}
.cn-group>.cn-group__h strong{font-weight:inherit}
.cn-group .cn-rest{margin-top:10px}
.cn-head--solo{margin-bottom:0}
.cn-sec .cn-glabel{margin:44px 0 -24px;font:600 13px/1.3 var(--nl-fd);letter-spacing:.14em;text-transform:uppercase;color:var(--nl-purple,#5B2D8E)}
.cn-sec .cn-glabel strong{font-weight:inherit}
@media (max-width:900px){.cn-groups{grid-template-columns:1fr}.cn-group{padding:22px 22px 20px}}

/* the details Ahmed saw on google-ads-to-claude, 4 Nov */
.cn-faq summary::before{display:none!important}
.cn-feat details>.code-block,.cn-sec .code-block{box-sizing:border-box;padding:12px 16px!important;border-radius:12px!important;background:#0B1530;overflow-x:auto}
.cn-feat details>.code-block code,.cn-sec .code-block code{display:block;padding:0;background:none;color:#E6EBFF;font:500 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow-wrap:normal}
.cn-before ul,.cn-before.cn-before--rows ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none}
.cn-before li{position:relative;padding:18px 18px 18px 52px!important;font-size:14.5px!important;text-wrap:pretty}
.cn-before li::after{content:"";position:absolute;left:18px;top:19px;width:22px;height:22px;border-radius:50%;background:#DDF7D3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6' fill='none' stroke='%232A6619' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:900px){.cn-before ul,.cn-before.cn-before--rows ul{grid-template-columns:1fr}}
/* a reading line holds about 80 characters, never past 100 (Ahmed 4 Nov, lines.js) */
.cn-sec p,.cn-sec li,.cn-sec dd{max-width:44em}
.cn-sec .cn-prompts li,.cn-sec .cn-before li,.cn-sec .cn-cards li,.cn-sec .lp-stage p,.cn-sec .cn-group>p,.cn-sec .cn-group .cn-rest>p{max-width:none}
.cn-sec .answer-capsule>p,.cn-sec .answer-capsule>ol{max-width:44em}
.cn-before li p{margin:0}.cn-before li p+p{margin-top:10px}
.cn-sec .cn-list--one li{max-width:48em}
.cn-sec .answer-capsule .cn-rest{margin-top:12px}
.cn-sec .answer-capsule .cn-rest>p{margin-top:12px;font:inherit;color:inherit}
/* a prompt written with its tool in its own line: the prompt is the lead, the tool the muted line under it */
.cn-sec .cn-prompts li:has(>.tool){font:600 17.5px/1.4 var(--nl-fd);color:var(--nl-ink)}
.cn-sec .cn-prompts li>.tool{display:block;margin-top:10px;font:400 14.5px/1.6 var(--nl-f);color:var(--nl-mut)}
.cn-hc__from{display:grid;gap:6px;justify-items:start}
.cn-hc__from .cn-hc__ai+.cn-hc__ai{padding-top:4px;padding-bottom:4px;background:rgba(255,255,255,.08)}
.cn-hc__from .cn-hc__ai+.cn-hc__ai img{width:28px;height:28px;padding:6px}
.cn-hc__from .cn-hc__ai+.cn-hc__ai b{font-size:13px;font-weight:500}
.cn-sec .cn-head.lp-answer--stack>p{margin-top:24px!important;max-width:680px}
.cn-before li p{text-wrap:pretty}
/* after the prompts every section sits the same distance from the next: a band that ends a section adds nothing below it */
.cn-sec .lp-wrap>.lp-bandwrap{padding-top:68px}
.cn-sec .lp-wrap>.lp-bandwrap:last-child>.nl-band{margin-bottom:0!important}
.cn-sec .cn-gen p{max-width:47em}
.cn-sec .answer-capsule>p,.cn-sec .answer-capsule .cn-rest>p{text-wrap:pretty}
.cn-sec .answer-capsule>details+p,.cn-sec .answer-capsule>details+ol{margin-top:20px!important}
/* Every Claude app: the tab bar is the page's contents list (an ol of links), laid out exactly like the button tabs */
ol.lp-tabs{list-style:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}ol.lp-tabs>li{display:contents}a.lp-tab{text-decoration:none}