/* CG189 · the parent, as an interactive diagram (Steven, Nov 2, 1:10; designed in the Culture Brand Library, frames
   187:3365 laptop and 187:3490 phone). Master marks only, brand-blue connectors, a node lifts and its line lights on hover,
   focus or tap, with the node's own line from the page and its link. The tree draws in once when it is in view; with
   reduced motion it is complete from the start. */
.pd{position:relative;z-index:2;margin:56px 0 0;padding:8px 0 24px;isolation:isolate}
.pd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.pd-svg path{fill:none;stroke:#1559f5;stroke-linecap:round;stroke-linejoin:round}
.pd-svg .pd-base{stroke-opacity:.26;stroke-width:1.5}
.pd-svg .pd-lit{stroke-width:2.5;opacity:0;transition:opacity .25s}
.pd.has-on .pd-svg .pd-lit{opacity:1}
.pd-lvl{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:24px}
.pd-li{margin:0;padding:0;display:flex}
.pd-top{margin-bottom:96px}
.pd-lab{position:relative;z-index:1;margin:0 0 16px;text-align:center;font:500 13px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#56607a}
.pd-cos{margin-bottom:96px}
.pd-node{appearance:none;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:220px;min-height:112px;box-sizing:border-box;padding:24px 24px 20px;
  background:#fff;border:1px solid #e3e8f2;border-radius:16px;color:#56607a;text-align:center;
  box-shadow:0 1px 1px rgba(16,31,64,.03),0 24px 48px -28px rgba(16,31,64,.16);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .2s}
.pd-node img{display:block;height:26px;width:auto;max-width:100%}
.pd-cos .pd-node img{height:32px}
.pd-top .pd-node{min-width:300px;padding:28px 32px 24px}
.pd-top .pd-node img{height:36px}
.pd-node small{font:400 13px/1.35 Rubik,sans-serif;color:#56607a;max-width:200px}
.pd-prods .pd-node{min-width:0;width:244px}
.pd-node:hover,.pd-node:focus-visible,.pd-node.is-on{transform:translateY(-6px);border-color:#1559f5;box-shadow:0 1px 1px rgba(16,31,64,.04),0 36px 60px -28px rgba(21,89,245,.35)}
.pd-node:focus-visible{outline:2px solid #1559f5;outline-offset:3px}
.pd-add{cursor:default;background:#f5f7fc;border-style:dashed;color:#0a1633;font:600 15px/1.3 Rubik,sans-serif;box-shadow:none}
.pd-add:hover{transform:none;border-color:#e3e8f2;box-shadow:none}
.pd-card{position:absolute;z-index:3;width:280px;box-sizing:border-box;padding:18px 20px 16px;border-radius:14px;background:#0a1633;color:#fff;box-shadow:0 24px 48px -20px rgba(10,22,51,.5)}
.pd-card::before{content:"";position:absolute;top:-6px;left:var(--ax,50%);width:12px;height:12px;background:#0a1633;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.pd-card .pd-ct{margin:0 0 10px;font:500 16px/1.45 Rubik,sans-serif;color:#fff}
.pd-card .pd-ca{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1 Rubik,sans-serif;color:#9dbbff;text-decoration:none}
.pd-card .pd-ca:hover{color:#fff;text-decoration:underline}
.pd-card .pd-ca:focus-visible{outline:2px solid #9dbbff;outline-offset:2px;border-radius:4px}
html body main#main:not(#z1):not(#z2):not(#z3) .pd-sec .cg-fnclose{margin:24px 0 0;text-align:center;font:500 17px/1.5 Rubik,sans-serif;color:#2a3446}
/* the draw-in */
.pd.pd-wait .pd-svg .pd-base{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000)}
.pd.pd-wait .pd-node{opacity:0;transform:translateY(12px)}
.pd.pd-go .pd-svg .pd-base{transition:stroke-dashoffset 1.2s cubic-bezier(.3,.6,.2,1);stroke-dashoffset:0}
.pd.pd-go .pd-node{opacity:1;transition:opacity .5s calc(var(--k,0)*70ms + .2s),transform .5s calc(var(--k,0)*70ms + .2s) cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.pd .pd-node,.pd .pd-svg path{transition:none!important;animation:none!important}.pd.pd-wait .pd-node{opacity:1;transform:none}.pd.pd-wait .pd-svg .pd-base{stroke-dasharray:none;stroke-dashoffset:0}}
/* tablets: products two by two */
@media (min-width:761px) and (max-width:1100px){.pd-prods{flex-wrap:wrap;max-width:560px;margin:0 auto}.pd-cos{flex-wrap:wrap}}
/* phones: a vertical tree on a left spine; the card opens under the tapped row */
@media (max-width:760px){
  .pd{margin-top:32px;padding:0 0 8px}
  .pd-lvl{flex-direction:column;gap:8px;padding-left:32px}
  .pd-top{padding-left:0;margin-bottom:24px}
  .pd-cos{margin-bottom:24px}
  .pd-lab{text-align:left;margin:0 0 8px 32px;font-size:12px}
  .pd-li{flex-direction:column}
  .pd-node{flex-direction:row;justify-content:flex-start;gap:12px;min-width:0;width:100%;min-height:56px;padding:12px 44px 12px 16px;border-radius:14px;text-align:left;position:relative}
  .pd-node::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid #b9c4dd;border-bottom:2px solid #b9c4dd;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
  .pd-node[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg);border-color:#1559f5}
  .pd-add::after{display:none}
  .pd-node img,.pd-cos .pd-node img{height:20px;flex:none}
  .pd-top .pd-node{min-width:0;padding:16px 44px 16px 16px}
  .pd-top .pd-node img{height:28px}
  .pd-node small{font-size:13px;max-width:none}
  .pd-prods .pd-node{width:100%}
  .pd-node:hover,.pd-node:focus-visible,.pd-node.is-on{transform:none}
  .pd-card{position:relative;inset:auto!important;width:auto;margin:8px 0 4px;padding:14px 16px 10px}
  .pd-card::before{left:28px}
}
.pd-lab{display:table;margin-left:auto;margin-right:auto;padding:0 12px;background:#fff}
html body main#main:not(#z1):not(#z2):not(#z3) .pd-sec .cg-fnclose{max-width:none!important}
@media (max-width:760px){.pd-lab{display:block;margin-left:32px;padding:0;background:none}html body main#main:not(#z1):not(#z2):not(#z3) .pd-sec .cg-fnclose{text-align:left}}
@media (min-width:761px){.pd{padding-bottom:168px}html body main#main:not(#z1):not(#z2):not(#z3) .pd-sec .cg-fnclose{margin-top:-120px;position:relative;z-index:0}}
/* the phone page stays shorter than before the merge: the app mock under "How we make them better" is the Platform page's
   own (it lives there), and the three ways the platform runs a company swipe in one row */
@media (max-width:760px){
  html body main#main:not(#z1):not(#z2):not(#z3) #platform .cg-pgrid>.cg-tabset{display:none!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform ul.tg-os{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px!important;padding:4px 16px 16px!important;scrollbar-width:none;grid-template-columns:none!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform ul.tg-os::-webkit-scrollbar{display:none}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform ul.tg-os>li{flex:0 0 78%;scroll-snap-align:center;box-sizing:border-box;background:#fff;border:1px solid #e3e8f2;border-radius:16px;padding:20px!important;margin:0!important;box-shadow:0 1px 1px rgba(16,31,64,.03),0 24px 48px -28px rgba(16,31,64,.16)}
}