@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal-C38fXH4l.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal-Cerq10X2.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal-LgqL8muc.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal-Yt3aPRUw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-800-normal-BYj_oED-.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-ext-700-normal-Ca8adRJv.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-ext-800-normal-DZJjya6U.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body{margin:0;background:#F5F5FA}
a{color:#4F52E0;text-decoration:none}a:hover{color:#2F31B8}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
input,textarea,button{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #4F52E0;outline-offset:2px}
.navlink{color:#D9D9EE;font-size:15px;font-weight:500}.navlink:hover{color:#FFFFFF}
.flink{color:#A8A9C8;font-size:14px}.flink:hover{color:#FFFFFF}
.btn-p{transition:transform .15s ease,box-shadow .15s ease}.btn-p:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(79,82,224,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-light:hover{background:#F0F0F8}
.card:hover{border-color:#C9CAF5}
.display{font-family:'Inter',system-ui,sans-serif}
button[role=tab]{font:inherit}
.tabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:56px;align-items:stretch}
.eyebrow{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6B6C8E}
.tabh{margin-top:14px;font-size:44px;line-height:1.05;letter-spacing:-0.035em;font-weight:800;text-wrap:balance}
.items{margin-top:36px;display:flex;flex-direction:column}
.item{padding:22px 0;border-bottom:1px solid #121226}
.itemhead{display:flex;align-items:center;gap:14px}
.num{width:32px;height:32px;border-radius:50%;background:#E4E4FB;color:#4F52E0;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.itemt{font-size:20px;font-weight:600;letter-spacing:-0.01em}
.itemd{margin-top:12px;font-size:15.5px;line-height:1.55;color:#3F4060;max-width:520px}
.vpanel{background:#F1F1F7;border-radius:20px;padding:56px 0 0 40px;overflow:hidden;min-height:480px;display:flex;flex-direction:column;gap:18px;box-sizing:border-box}
.vpanel.small{padding:28px 0 0 28px;height:270px;min-height:0}
@media (min-width:980px){.tabgrid.rev>.vpanel{order:-1}}
.tabgrid{align-items:center}
.vcard{background:#FFFFFF;border:1px solid #E3E3EE;border-right:none;border-radius:14px 0 0 14px;padding:24px 28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 18px 40px rgba(18,18,38,.06)}
.vcard.ghost{opacity:.55;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);box-shadow:none;gap:0}
.vhead{display:flex;align-items:center;gap:12px}
.vicon{width:30px;height:30px;border-radius:7px;background:#1C1C3B;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vlabel{font-size:15px;color:#5F6080;margin-right:auto}
.vbtn{width:28px;height:28px;border:1px solid #E3E3EE;border-radius:7px;flex:none}
.vtitle{font-size:22px;font-weight:600;letter-spacing:-0.015em}
.vbox{border:1px solid #E3E3EE;border-radius:8px;padding:18px 22px}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:#3F4060}
.bar{display:block;height:8px;border-radius:4px;background:#EDEDF3;margin-top:8px}
.wv{width:4px;border-radius:2px;background:#4F52E0}.wv.off{background:#D4D5F7}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'JetBrains Mono',monospace;font-size:11px;color:#3F4060;border:1px solid #E3E3EE;border-radius:5px;padding:4px 8px}
.chip b{font-weight:500;color:#8A8BA8}
.pill{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:11px;color:#A16207;background:#FEF3C7;border:1px solid #FDE68A;border-radius:5px;padding:4px 8px}
.pill.sky{color:#0369A1;background:#E0F2FE;border-color:#BAE6FD}
.lane{position:relative;height:30px;border-radius:5px;background:#F7F7FB;border:1px solid #EDEDF3}
.lane.sky{background:#EAF7FE;border-color:#BAE6FD}
.lanel{position:absolute;left:0;top:0;bottom:0;width:18px;border-right:1px solid #EDEDF3}
.lanel.sky{border-color:#BAE6FD}
.node{position:absolute;top:6px;width:36px;height:16px;border-radius:4px;border:1.5px solid #121226;background:#FFFFFF;box-sizing:border-box}
.node.blue{background:#1D4ED8;border-color:#1D4ED8}
.node.skyn{border-color:#0369A1;box-shadow:0 0 0 2px rgba(125,211,252,.5)}
.heat{flex:1;height:14px;border-radius:3px}
.thumb{aspect-ratio:16/10;border:1px solid #E3E3EE;border-radius:6px;padding:10px;box-sizing:border-box;overflow:hidden}
.tbar{display:block;height:5px;border-radius:3px;background:#E3E3EE;margin-top:4px}
.chev{flex:1;height:12px;background:#121226;clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%,20% 50%)}
.chev.blue{background:#1D4ED8}
.hc{height:10px;border-radius:2px}
.cb{flex:1;background:#C9CAF5;border-radius:2px 2px 0 0}.cb.acc{background:#4F52E0}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
@media (max-width:760px){
  .tabh{font-size:32px !important}
  .vpanel{padding:28px 0 0 20px !important;min-height:0 !important}
  .h1{font-size:44px !important;line-height:1.04 !important}
  .h2{font-size:34px !important}
  .navlinks{display:none !important}
  .pad{padding-left:16px !important;padding-right:16px !important}
  .sec{padding-top:72px !important;padding-bottom:72px !important}
  .stat{font-size:48px !important}
}

html{scroll-behavior:smooth}
[hidden]{display:none !important}
[dir=rtl] .vpanel{direction:ltr}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
svg.flag{display:block;width:20px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(18,18,38,.18);flex:none}

/* language menu */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#E6E6F5;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:0 12px;min-height:44px;font-size:14px;font-weight:600;cursor:pointer}
.lang-btn:hover{background:rgba(255,255,255,.08)}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:50;margin:0;padding:6px;list-style:none;background:#FFFFFF;border:1px solid #E3E3EE;border-radius:12px;box-shadow:0 20px 50px rgba(18,18,38,.22);min-width:190px}
.lang-menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#121226;font-size:14px;cursor:pointer;text-align:start}
.lang-menu button:hover,.lang-menu button:focus-visible{background:#F1F1F7}
.lang-menu button[aria-selected=true]{font-weight:700;background:#EEEEFC}

/* subtle motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#top > div > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
#top > div > *:nth-child(2){animation-delay:.08s}
#top > div > *:nth-child(3){animation-delay:.16s}
#top > div > *:nth-child(4){animation-delay:.24s}
#top > div > *:nth-child(5){animation-delay:.32s}
#top > div > *:nth-child(6){animation-delay:.45s}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #top > div > *{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}

/* imprint / privacy / 404 */
body.legal{background:#F5F5FA;color:#121226;font-family:'Inter',system-ui,sans-serif}
.legal-wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.legal-top{background:#121226}
.legal-top .legal-wrap{max-width:1320px} /* same as the homepage nav */
.legal-bar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.legal-switch{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:4px}
.legal-switch button{border:0;background:transparent;color:#C9CAE6;font-size:14px;font-weight:600;min-height:36px;padding:0 14px;border-radius:7px;cursor:pointer}
.legal-switch button[aria-pressed=true]{background:#FFFFFF;color:#121226}
.legal-main{padding-top:56px;padding-bottom:96px}
.legal-back{display:inline-block;font-size:14px;margin-bottom:28px}
.legal h1{font-size:48px;line-height:1.05;letter-spacing:-0.035em;font-weight:800}
.legal-text{margin-top:16px;font-size:15.5px;line-height:1.7;color:#3F4060}
.legal-text h2{margin:44px 0 0;font-size:22px;font-weight:800;letter-spacing:-0.01em;color:#121226}
.legal-text h3{margin:32px 0 0;font-size:17px;font-weight:700;color:#121226}
.legal-text h4{margin:24px 0 0;font-size:15.5px;font-weight:700;color:#121226}
.legal-text p{margin:14px 0 0;white-space:pre-line}
.legal-text ul{margin:12px 0 0;padding-inline-start:22px;list-style:disc}
.legal-text li{margin-top:6px}
.legal-text a{word-break:break-word}
.legal-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:12px;background:#4F52E0;color:#FFFFFF !important;font-weight:600}
.legal-foot{border-top:1px solid #E3E3EE;padding:28px 0;font-size:13px;color:#5F6080}
.legal-foot a{color:#3F4060}
@media (max-width:760px){.legal-wrap{padding-left:16px;padding-right:16px}.legal h1{font-size:36px}}

/* pilot dialog */
.pd{font-family:'Inter',system-ui,sans-serif;border:0;padding:0;border-radius:20px;width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:#121226;background:#FFFFFF;box-shadow:0 40px 120px rgba(0,0,0,.45)}
.pd::backdrop{background:rgba(18,18,38,.62);backdrop-filter:blur(3px)}
.pd-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:32px 32px 8px}
.pd-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#4F52E0}
.pd-head h2{margin-top:10px;font-size:30px;line-height:1.1;letter-spacing:-0.03em;font-weight:800}
.pd-sub{margin-top:8px;font-size:15px;line-height:1.5;color:#3F4060}
.pd-close{flex:none;width:44px;height:44px;border-radius:10px;border:1px solid #E3E3EE;background:#FFFFFF;color:#121226;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pd-close:hover{background:#F1F1F7}
.pd-form{padding:16px 32px 32px}
.pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.pd-wide{grid-column:1 / -1}
.pd-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pd-field label{font-size:13px;font-weight:600}
.pd-field input,.pd-field select,.pd-field textarea{font:inherit;font-size:15px;padding:11px 13px;min-height:46px;box-sizing:border-box;border:1px solid #D8D8E6;border-radius:10px;background:#FFFFFF;color:#121226;width:100%}
.pd-field textarea{resize:vertical;min-height:84px}
.pd-field input:focus,.pd-field select:focus,.pd-field textarea:focus{outline:2px solid #4F52E0;outline-offset:1px;border-color:#4F52E0}
.pd-field [aria-invalid=true]{border-color:#B91C1C}
.pd-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pd-consent{margin-top:18px;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:#3F4060;cursor:pointer}
.pd-consent input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:#4F52E0}
.pd-error{margin-top:14px;font-size:14px;color:#B91C1C}
.pd-actions{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pd-submit{border:0;background:#4F52E0;color:#FFFFFF;font:inherit;font-weight:600;font-size:16px;padding:0 26px;min-height:48px;border-radius:12px;cursor:pointer}
.pd-submit[disabled]{opacity:.6;cursor:progress}
.pd-note{font-size:12.5px;color:#5F6080}
.pd-done{padding:24px 32px 36px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pd-done h3{font-size:26px;font-weight:800;letter-spacing:-0.02em}
.pd-done p{font-size:15px;color:#3F4060}
@media (max-width:640px){.pd-grid{grid-template-columns:minmax(0,1fr)}.pd-head,.pd-form,.pd-done{padding-left:20px;padding-right:20px}}

/* phones: compact top bar */
@media (max-width:560px){
  nav.mainnav{gap:10px !important}
  nav.mainnav > a:first-child svg{width:118px;height:28px}
  nav.mainnav .btn-p{padding:0 14px !important;font-size:14px !important}
  .lang-btn{padding:0 9px;gap:6px}
  #lang-code{display:none}
}

.sub-short{display:none !important}
@media (max-width:560px){.sub-long{display:none !important}.sub-short{display:block !important;font-size:18px !important}}
#top > div > *:nth-child(7){animation-delay:.45s}

/* phones: call window fits the screen, figures 2 x 2, no scrollbar under the hero app */
@media (max-width:560px){
  #meetings [style*="min-width:1040px"]{min-width:0 !important}
  #meetings aside{display:none !important}
  #meetings [style*="min-width:1040px"] > div:first-child{flex-wrap:wrap;height:auto !important;padding:10px 14px !important;row-gap:4px}
  #meetings [style*="min-width:1040px"] > div:first-child > span:nth-child(2){display:none}
  #meetings [style*="aspect-ratio:16/10"] > span{font-size:10.5px !important;padding:3px 7px !important}
  #meetings [style*="aspect-ratio:16/10"] svg[viewBox="0 0 190 190"]{width:40px;height:40px}
  #meetings [style*="aspect-ratio:16/10"] > span[style*="LISTENING"],#meetings [style*="letter-spacing:.1em;color:#B8FF12"]{display:none}
  div:has(> div > .stat){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 16px !important}
  .stat{font-size:42px !important}
  #top [dir=ltr] > div{scrollbar-width:none}
  #top [dir=ltr] > div::-webkit-scrollbar{display:none}
}

/* digital business cards (/c/<name>/) */
body.vc-page{margin:0;min-height:100vh;background:#121226;background-image:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(99,102,242,.35),rgba(18,18,38,0) 70%);color:#121226;font-family:'Inter',system-ui,sans-serif}
.vc{max-width:440px;margin:0 auto;padding:28px 16px 40px;display:flex;flex-direction:column;gap:16px}
.vc-card{background:#FFFFFF;border-radius:22px;padding:28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.vc-card:first-child{text-align:center;display:flex;flex-direction:column;align-items:center}
.vc-logo{display:inline-flex;color:#121226;margin-bottom:22px}
.vc-logo svg{width:120px;height:28px}
.vc-logo svg rect{fill:#121226}
.vc-logo svg path[fill="#121226"]{fill:#FFFFFF}
.vc-photo{width:168px;height:168px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #FFFFFF,0 0 0 6px #B8FF12}
.vc h1{margin-top:18px;font-size:28px;line-height:1.1;letter-spacing:-0.03em;font-weight:800}
.vc-role{margin-top:6px;font-size:15px;font-weight:600;color:#4F52E0}
.vc-tag{margin-top:10px;font-size:14.5px;line-height:1.5;color:#5F6080;max-width:320px}
.vc-actions{margin-top:22px;width:100%;display:flex;flex-direction:column;gap:10px}
.vc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vc-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 14px;border-radius:13px;border:1px solid #E3E3EE;background:#F7F7FB;color:#121226 !important;font-size:15px;font-weight:600;text-decoration:none;min-width:0}
.vc-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-btn:hover{background:#EEEEF6}
.vc-primary{background:#B8FF12;border-color:#B8FF12;font-size:16px}
.vc-primary:hover{background:#A9EE0B}
.vc-form-card h2{font-size:22px;font-weight:800;letter-spacing:-0.02em}
.vc-sub{margin-top:4px;font-size:14.5px;color:#5F6080}
#vc-form{margin-top:16px;display:flex;flex-direction:column;gap:12px}
#vc-form .pd-consent{margin-top:4px}
.vc-send{width:100%;margin-top:6px}
.vc-done{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vc-done h2{margin-top:6px}
.vc-done p{font-size:15px;color:#3F4060}
.vc-foot{text-align:center;font-size:13px;color:#A8A9C8}
.vc-foot a{color:#C9CAE6}

/* phones: compact hero visual instead of the wide app window; shorter pilot pill */
.hero-m{display:none}
@media (max-width:560px){
  #top [dir=ltr]{display:none !important}
  .hero-m{display:block;margin-top:44px;width:100%;background:#FFFFFF;color:#121226;border-radius:18px 18px 0 0;overflow:hidden;text-align:left}
  .hm-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #E3E3EE}
  .hm-title{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hm-seg{display:flex;background:#EEEEF6;border-radius:8px;padding:2px;font-size:11.5px;color:#3F4060}
  .hm-seg span{padding:3px 8px;border-radius:6px}
  .hm-seg .on{background:#121226;color:#FFFFFF;font-weight:600}
  .hm-flow{padding:18px 14px 8px;background-color:#FBFBFE;background-image:radial-gradient(#DCDCEA 1px,transparent 1px);background-size:16px 16px;display:flex;flex-direction:column;align-items:center}
  .hm-row{position:relative;width:100%;display:flex;justify-content:center;align-items:center;gap:10px}
  .hm-lane{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:10px;font-weight:600;color:#5F6080;background:#F1F1F7;border:1px solid #E3E3EE;border-radius:5px;padding:2px 6px;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hm-start{width:16px;height:16px;border-radius:50%;border:2px solid #121226;box-sizing:border-box;flex:none}
  .hm-step{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:132px;max-width:150px;min-height:40px;padding:6px 10px;box-sizing:border-box;border:1.5px solid #121226;border-radius:8px;background:#FFFFFF;font-size:12.5px;font-weight:600;text-align:center;line-height:1.2}
  .hm-ctrl{background:#1D4ED8;border-color:#1D4ED8;color:#FFFFFF}
  .hm-ctrl small{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;opacity:.8;margin-bottom:2px}
  .hm-link{width:1.5px;height:16px;background:#6B6C8E}
  .hm-gw{display:flex;align-items:center;gap:8px;margin:4px 0 2px}
  .hm-diamond{width:22px;height:22px;transform:rotate(45deg);border:1.5px solid #121226;background:#FFFFFF;box-sizing:border-box}
  .hm-gwl{font-size:11px;color:#5F6080}
  .hm-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:8px}
  .hm-split > div{display:flex;flex-direction:column;align-items:center;gap:4px}
  .hm-split small{font-size:10.5px;color:#5F6080}
  .hm-split .hm-step{min-width:0;width:100%}
  .hm-chat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-top:1px solid #E3E3EE}
  .hm-who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
  .hm-who i{width:7px;height:7px;border-radius:50%;background:#16A34A}
  .hm-who em{font-style:normal;font-weight:400;color:#5F6080}
  .hm-q{align-self:flex-end;background:#EEEEFC;border-radius:10px 10px 2px 10px;padding:8px 10px;font-size:12.5px}
  .hm-chip{font-size:11.5px;font-weight:600;border:1px solid #D8D8E6;border-radius:999px;padding:5px 10px}
  /* pilot pill: just "NEW · Join pilot" */
  .pill-mid{display:none}
  /* top bar button never wraps; hero badges hidden on phones */
  nav.mainnav .btn-p{white-space:nowrap;font-size:13px !important;padding:0 12px !important}
  .hero-badges{display:none !important}
}

@media (max-width:560px){
  .hm-row{flex-direction:column;gap:4px}
  .hm-lane{position:static;transform:none;max-width:none;white-space:normal;text-align:center}
  #top .btn-p,#top .btn-ghost{width:100%;justify-content:center;font-size:16px !important;padding-left:16px !important;padding-right:16px !important}
  #top > div > div:has(> .btn-p){width:100%}
}
@media (max-width:560px){.pilot-block{padding:20px !important;border-radius:22px !important}}

/* booking dialog */
.bd{width:min(760px,calc(100% - 32px))}
.bd .pd-head{padding-bottom:16px;border-bottom:1px solid #E3E3EE}
.bd-body{background:#FFFFFF}
#booking-frame{display:block;width:100%;height:min(720px,calc(100dvh - 220px));border:0}
.bd-fallback{padding:28px 32px 36px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.bd-fallback p{font-size:15px;color:#3F4060}
@media (max-width:560px){
  #demo h2{font-size:38px !important}
  .demo-ctas{width:100%;flex-direction:column}
  .demo-ctas a{justify-content:center;width:100%}
  .bd{width:100%;max-height:100dvh;border-radius:16px 16px 0 0;margin-bottom:0}
  #booking-frame{height:calc(100dvh - 190px)}
}

.demo-short{display:none}
@media (max-width:560px){.demo-long{display:none}.demo-short{display:block}.bd .pd-sub{display:none}}

/* booking dialog: no own scrollbar, the calendar gets the full width */
.bd{overflow:hidden}
.bd[open]{display:flex;flex-direction:column}
.bd .pd-head{flex:none}
.bd-body{flex:1;min-height:0}
@media (max-width:560px){
  .bd{width:100vw !important;max-width:100vw !important;height:100dvh;max-height:100dvh !important;margin:0;border-radius:0 !important;inset:0}
  .bd .pd-head{padding:14px 16px 12px}
  .bd .pd-head h2{font-size:22px}
  #booking-frame{height:100% !important;width:100%}
}

/* phones: a little more breathing room for text (panels, cards and dialogs unchanged) */
@media (max-width:560px){
  .sec > div > p,
  .sec > div > h2,
  .sec > div > div > p,
  .sec > div > div > h2,
  .sec > div > div > div > h2,
  .sec > div > div > div:has(> h2) > p,
  .tabgrid > div:not(.vpanel),
  div:has(> div > .stat),
  #intelligence .vpanel.small + div,
  #executions > div > div:first-child,
  #meetings > div > div:first-child > div,
  #meetings > div > div:first-child > p,
  .sec figure{padding-left:8px;padding-right:8px}
}

/* language codes instead of flags */
.lc{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em;line-height:1;flex:none}
.lang-btn .lc{border:1px solid rgba(255,255,255,.35);color:#FFFFFF}
.lang-menu .lc{border:1px solid #D8D8E6;color:#121226;background:#F7F7FB}
.lang-menu button[aria-selected=true] .lc{border-color:#4F52E0;color:#4F52E0;background:#FFFFFF}
#lang-code{display:none}

/* ══ v2 (Oct 2026): language menu links, German-page hint, subpages. Appended to site.css by build.py. ══ */
.lang-hint{background:#EEEEFC;color:#121226;font-family:'Inter',system-ui,sans-serif;font-size:14px;border-bottom:1px solid #D4D5F7}
.lang-hint>div{max-width:1320px;margin:0 auto;padding:10px 32px;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.lang-hint a{font-weight:600}
.lang-hint button{margin-left:auto;border:0;background:transparent;color:#5F6080;width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.lang-hint button:hover{background:#E4E4FB;color:#121226}
@media (max-width:760px){.lang-hint>div{padding:10px 16px}}

.sp-top{background:#121226;color:#FFFFFF;background-image:radial-gradient(ellipse 60% 50% at 50% -10%,rgba(99,102,242,.35),rgba(18,18,38,0) 70%)}
.sp-hero{padding:72px 32px 84px}
.sp-hero>div{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.sp-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B8FF12}
.sp-hero h1{font-size:64px;line-height:1.02;letter-spacing:-0.04em;font-weight:800;max-width:960px;text-wrap:balance}
.sp-intro{font-size:20px;line-height:1.55;color:#C9CAE6;max-width:740px;text-wrap:pretty}
.sp-meta{font-size:14px;color:#A8A9C8;display:flex;gap:10px;flex-wrap:wrap}
.sp-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.sp-ctas .btn-p{background:#4F52E0;color:#FFFFFF;font-weight:600;font-size:17px;padding:0 28px;border-radius:12px;min-height:52px;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px}
.sp-ctas .btn-ghost{color:#FFFFFF;border:1px solid rgba(255,255,255,.28);font-weight:600;font-size:17px;padding:0 28px;border-radius:12px;min-height:52px;box-sizing:border-box;display:inline-flex;align-items:center}
.sp-draft{background:#FEF3C7;border-bottom:1px solid #FDE68A;color:#78350F;font-size:14px;line-height:1.5}
.sp-draft>div{max-width:1240px;margin:0 auto;padding:12px 32px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp-draft-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:#A16207;color:#FFFFFF;padding:3px 8px;border-radius:5px}
.sp-sec{padding:88px 32px}
.sp-sec.alt{background:#FFFFFF;border-top:1px solid #E3E3EE;border-bottom:1px solid #E3E3EE}
.sp-sec.dark{background:#1C1C3B;color:#FFFFFF}
.sp-wrap{max-width:1240px;margin:0 auto}
.sp-prose{max-width:740px}
.sp-kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4F52E0}
.sp-sec.dark .sp-kicker{color:#B8FF12}
.sp-prose h2,.sp-h2{margin-top:14px;font-size:40px;line-height:1.05;letter-spacing:-0.03em;font-weight:800;text-wrap:balance}
.sp-prose h3{margin-top:36px;font-size:22px;font-weight:700;letter-spacing:-0.01em}
.sp-prose p{margin-top:16px;font-size:17px;line-height:1.6;color:#3F4060}
.sp-sec.dark .sp-prose p{color:#C9CAE6}
.sp-prose ul,.sp-prose ol{margin:14px 0 0;padding-inline-start:22px;list-style:disc;font-size:17px;line-height:1.6;color:#3F4060}
.sp-prose ol{list-style:decimal}
.sp-prose li{margin-top:6px}
.sp-prose strong{color:#121226;font-weight:600}
.sp-sec.dark .sp-prose strong{color:#FFFFFF}
.sp-prose code{font-family:'JetBrains Mono',monospace;font-size:14px;background:#EEEEF6;padding:2px 6px;border-radius:5px}
.ph{color:#8A8BA8 !important;border-left:3px dashed #D8D8E6;padding-left:14px;font-style:italic}
.sp-sec.dark .ph{color:#A8A9C8 !important;border-color:rgba(255,255,255,.25)}
.sp-cards{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.sp-card{background:#FFFFFF;border:1px solid #E3E3EE;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.sp-card h3{font-size:22px;font-weight:700;letter-spacing:-0.015em}
.sp-card p{font-size:15.5px;line-height:1.55;color:#3F4060}
.sp-card .tag{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4F52E0;background:#EEEEFC;padding:4px 8px;border-radius:5px}
.sp-card ul{margin:4px 0 0;padding-inline-start:20px;list-style:disc;font-size:15px;line-height:1.55;color:#3F4060}
.sp-card li{margin-top:4px}
.sp-card.hi{border-color:#121226;box-shadow:0 18px 40px rgba(18,18,38,.08)}
.sp-steps{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:#E3E3EE;border:1px solid #E3E3EE;border-radius:16px;overflow:hidden}
.sp-steps li{background:#FFFFFF;padding:28px 26px;display:flex;flex-direction:column;gap:12px;min-height:200px}
.sp-steps .n{font-size:14px;font-weight:700;color:#4F52E0}
.sp-steps h3{font-size:21px;font-weight:700;letter-spacing:-0.01em}
.sp-steps p{font-size:15px;line-height:1.5;color:#3F4060}
.sp-facts{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px}
.sp-facts>div{border-top:2px solid #121226;padding-top:16px}
.sp-facts b{display:block;font-size:17px;font-weight:700}
.sp-facts span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:#3F4060}
.sp-list{margin-top:36px;display:flex;flex-direction:column}
.sp-list>a,.sp-list>div{display:flex;flex-direction:column;gap:8px;padding:26px 0;border-bottom:1px solid #D8D8E6;color:#121226}
.sp-list>a:first-child,.sp-list>div:first-child{border-top:1px solid #121226}
.sp-list h3{font-size:24px;font-weight:700;letter-spacing:-0.015em}
.sp-list p{font-size:15.5px;line-height:1.55;color:#3F4060;max-width:720px}
.sp-list .more{font-size:15px;font-weight:600;color:#4F52E0}
.sp-list a:hover h3{color:#4F52E0}
.sp-box{margin-top:28px;border:1.5px dashed #C9CAF5;border-radius:16px;background:#FBFBFE;background-image:radial-gradient(#DCDCEA 1px,transparent 1px);background-size:18px 18px;padding:28px;display:flex;flex-direction:column;gap:18px}
.sp-box .lanes{display:flex;flex-direction:column;gap:8px;max-width:560px}
.sp-box .lane{height:36px}
.sp-box .lanel{width:22px}
.sp-box .node{top:9px}
.sp-box p{font-size:14px;color:#5F6080}
.btn-soon{display:inline-flex;align-items:center;gap:10px;border:1px solid #D8D8E6;background:#F1F1F7;color:#8A8BA8;font-weight:600;font-size:16px;padding:0 22px;min-height:48px;border-radius:12px;cursor:not-allowed}
.sp-cta{padding:112px 32px;background:#121226;color:#FFFFFF;background-image:radial-gradient(ellipse 60% 70% at 50% 110%,rgba(99,102,242,.38),rgba(18,18,38,0) 70%)}
.sp-cta>div{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.sp-cta h2{font-size:56px;line-height:1.02;letter-spacing:-0.04em;font-weight:800;text-wrap:balance}
.sp-cta p{font-size:19px;line-height:1.5;color:#C9CAE6;max-width:640px;text-wrap:pretty}
.sp-cta .btn-p{background:#B8FF12;color:#121226;font-weight:700;font-size:17px;padding:0 30px;border-radius:12px;min-height:56px;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;box-shadow:0 12px 40px rgba(184,255,18,.25)}
.sp-cta .btn-ghost{border:1px solid rgba(255,255,255,.3);color:#FFFFFF;font-weight:600;font-size:17px;padding:0 30px;border-radius:12px;min-height:56px;box-sizing:border-box;display:inline-flex;align-items:center}
.sp-cta .mail{font-size:14px;color:#A8A9C8}
.sp-note{margin-top:28px;border:1px solid #E3E3EE;background:#FFFFFF;border-radius:12px;padding:16px 18px;font-size:14.5px;line-height:1.55;color:#3F4060;max-width:780px}
@media (max-width:760px){
  .sp-hero{padding:48px 16px 56px}
  .sp-hero h1{font-size:40px;line-height:1.04;overflow-wrap:anywhere;hyphens:auto}
  .sp-prose h2,.sp-h2,.sp-prose h3,.sp-card h3,.sp-list h3,.sp-cta h2{overflow-wrap:anywhere;hyphens:auto}
  .sp-intro{font-size:18px}
  .sp-ctas{width:100%;flex-direction:column}
  .sp-ctas a{justify-content:center}
  .sp-draft>div{padding:10px 16px}
  .sp-sec{padding:64px 16px}
  .sp-prose h2,.sp-h2{font-size:32px}
  .sp-cta{padding:80px 16px}
  .sp-cta h2{font-size:36px}
  .sp-list h3{font-size:21px}
}

/* ══ Subpage visuals (Oct 2026): one HTML/CSS skeleton per page type. Navy bands, indigo accent, lime only for small highlights. ══ */
.vz{margin-top:40px;border:1px solid #E3E3EE;border-radius:18px;background:#FFFFFF;padding:28px;overflow:hidden}
.vz.dark{background:#1C1C3B;border-color:#2A2A52;color:#FFFFFF}
.vz-cap{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:#5F6080}
.vz.dark .vz-cap{color:#A8A9C8}
.vz-arr{color:#4F52E0;font-size:22px;line-height:1;text-align:center}
.vz.dark .vz-arr{color:#B8FF12}
/* pipeline: input → diagram → analysis → slides (how it works) */
.vz-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vz-step{position:relative;background:#F7F7FB;border:1px solid #E3E3EE;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.vz-step .vz-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#4F52E0}
.vz-step b{font-size:16px;font-weight:700;color:#121226}
.vz-step span{font-size:13.5px;line-height:1.45;color:#5F6080}
.vz-step::after{content:"";position:absolute;right:-15px;top:50%;width:16px;height:2px;background:#C9CAF5}
.vz-step:last-child::after{display:none}
.vz-ico{height:52px;display:flex;align-items:flex-end;gap:4px;margin:4px 0 2px}
.vz-wave i{display:block;width:5px;height:35%;border-radius:3px;background:#4F52E0}
.vz-wave i:nth-child(odd){height:65%}.vz-wave i:nth-child(3n){height:95%}.vz-wave i:nth-child(5n){height:50%}
.vz-ml{width:100%;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:4px}
.vz-ml i{display:block;position:relative;height:14px;border-radius:3px;background:#FFFFFF;border:1px solid #D6D6E4}
.vz-ml i::before{content:"";position:absolute;top:2px;left:28%;width:18px;height:8px;border:1.5px solid #121226;border-radius:2px;background:#FFFFFF}
.vz-ml i:nth-child(2)::before{left:52%;background:#1D4ED8;border-color:#1D4ED8}.vz-ml i:nth-child(3)::before{left:74%}
.vz-lines{width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px}
.vz-lines i{display:block;height:6px;border-radius:3px;background:#C9CAF5;width:100%}
.vz-lines i:nth-child(2){width:70%}.vz-lines i:nth-child(3){width:85%}.vz-lines i:first-child{width:40%;background:#4F52E0}
.vz-slide{width:100%;height:52px;border:1px solid #D6D6E4;border-radius:5px;background:#FFFFFF;position:relative}
.vz-slide::before{content:"";position:absolute;left:8px;top:8px;width:40%;height:6px;border-radius:3px;background:#B8FF12}
.vz-slide::after{content:"";position:absolute;left:8px;right:8px;top:22px;height:20px;background:repeating-linear-gradient(to bottom,#E3E3EE 0 4px,transparent 4px 9px)}
.vz-loop{margin-top:18px;padding-top:16px;border-top:1px dashed #D8D8E6;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:#3F4060}
.vz-loop .pill{align-self:center}
/* contrast: screen recording vs conversation (process capture without task mining) */
.vz-contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vz-col{border-radius:14px;padding:20px;border:1px solid #E3E3EE;background:#F7F7FB}
.vz-col.on{background:#FFFFFF;border-color:#4F52E0}
.vz-col h4{font-size:15px;font-weight:700;color:#121226;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vz-col h4 .pill{margin-left:auto}
.vz-col ul{list-style:none;margin:14px 0 0;padding:0;font-size:14px;line-height:1.5;color:#3F4060}
.vz-col li{padding-left:14px;position:relative;margin-top:4px}
.vz-col li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#B9BACB}
.vz-col.on li::before{background:#4F52E0}
.vz-screen{margin-top:14px;height:110px;border:1.5px solid #B9BACB;border-radius:8px;background:#FFFFFF;background-image:linear-gradient(#EDEDF3 1px,transparent 1px),linear-gradient(90deg,#EDEDF3 1px,transparent 1px);background-size:22px 22px;position:relative}
.vz-screen i{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #8A8BA8;background:#FFFFFF;box-sizing:border-box}
.vz-screen i:nth-child(1){left:12%;top:22%}.vz-screen i:nth-child(2){left:38%;top:60%}.vz-screen i:nth-child(3){left:61%;top:30%}.vz-screen i:nth-child(4){left:84%;top:66%}
.vz-screen b{position:absolute;left:14%;right:14%;top:50%;height:0;border-top:2px dashed #C9CAD6}
.vz-talk{margin-top:14px;height:110px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.vz-talk i{display:block;height:18px;border-radius:9px;background:#EEEEFC;width:68%}
.vz-talk i:nth-child(even){align-self:flex-end;width:52%;background:#FFFFFF;border:1px solid #C9CAF5}
.vz-talk i:last-child{width:40%;background:#4F52E0}
/* chain: capture → BPMN 2.0 XML → your platform (processes before AI agents, BPMN for …) */
.vz-chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
.vz-blk{border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px}
.vz-blk.hi{background:#FFFFFF;color:#121226;border-color:#FFFFFF}
.vz-blk .vz-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#B8FF12}
.vz-blk.hi .vz-n{color:#4F52E0}
.vz-blk b{font-size:16px;font-weight:700}
.vz-blk span{font-size:13.5px;line-height:1.45;color:#C9CAE6}
.vz-blk.hi span{color:#5F6080}
.vz-chain .vz-arr{align-self:center}
.vz-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.vz-slots i{display:block;width:44px;height:14px;border-radius:4px;border:1px dashed rgba(255,255,255,.45)}
.vz-file{width:40px;height:50px;border:2px solid #4F52E0;border-radius:4px;clip-path:polygon(0 0,68% 0,100% 24%,100% 100%,0 100%);background:linear-gradient(#EEEEFC 0,#EEEEFC 8px,transparent 8px) no-repeat;margin:4px 0 2px}
.vz-brace{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#B8FF12;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px}
.vz-brace span{border-top:1px solid #B8FF12;padding-top:8px;text-align:center}
.vz-brace span.off{border-color:rgba(255,255,255,.3);color:#A8A9C8}
/* timeline: engagement phases with what patchley produces (for consultancies) */
.vz-tl{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.vz-tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#E3E3EE}
.vz-ph{position:relative;padding:30px 16px 0 0}
.vz-ph::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#4F52E0;box-sizing:border-box;border:3px solid #FFFFFF;box-shadow:0 0 0 1.5px #4F52E0}
.vz-ph b{display:block;font-size:15.5px;font-weight:700;color:#121226}
.vz-ph span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:#5F6080}
.vz-out{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px}
.vz-out i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px;background:#EEEEFC;color:#4F52E0}
.vz-out i.lime{background:#B8FF12;color:#121226}
/* map: your browser → app in Germany → AI in France (security) */
.vz-map{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
.vz-loc{border-radius:14px;padding:18px;border:1px solid #E3E3EE;background:#F7F7FB;display:flex;flex-direction:column;gap:6px}
.vz-loc.eu{border-color:#4F52E0;background:#FFFFFF}
.vz-loc .vz-flag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#4F52E0}
.vz-loc b{font-size:16px;font-weight:700;color:#121226}
.vz-loc span{font-size:13.5px;line-height:1.45;color:#5F6080}
.vz-map .vz-arr{align-self:center}
.vz-exit{margin-top:16px;padding-top:16px;border-top:1px dashed #D8D8E6;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px;color:#3F4060}
.vz-exit .pill{align-self:center}
/* legend: BPMN symbols (BPMN guide) */
.vz-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.vz-sym{border:1px solid #E3E3EE;border-radius:12px;background:#F7F7FB;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-height:150px;justify-content:flex-start}
.vz-sym b{font-size:14px;color:#121226}
.vz-sym span{font-size:12.5px;line-height:1.4;color:#5F6080}
.vz-sym .shb{height:56px;display:flex;align-items:center;justify-content:center}
.sh{width:44px;height:44px;box-sizing:border-box;border:2px solid #121226;background:#FFFFFF;display:block}
.sh.ev{border-radius:50%}.sh.ev.end{border-width:4px}.sh.ev.mid{box-shadow:inset 0 0 0 3px #FFFFFF,inset 0 0 0 5px #121226}
.sh.task{width:62px;height:40px;border-radius:7px}.sh.task.ctl{border-color:#1D4ED8;box-shadow:inset 0 0 0 3px #DBEAFE}
.sh.gw{width:34px;height:34px;border-radius:4px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center}
.sh.gw i{transform:rotate(-45deg);font-style:normal;font-weight:700;font-size:20px;line-height:1;color:#121226}
.sh.data{width:34px;height:44px;border-radius:2px;clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%)}
.sh.pool{width:68px;height:46px;border-radius:3px;border-left-width:12px;background:linear-gradient(to bottom,#FFFFFF 50%,#EDEDF3 50%)}
.sh.flow{width:64px;height:2px;border:0;background:#121226;position:relative}
.sh.flow::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:9px solid #121226}
.sh.flow.msg{background:repeating-linear-gradient(90deg,#121226 0 6px,transparent 6px 10px)}
/* matrix: comparison table (compare pages) */
.vz-scroll{margin-top:40px;overflow-x:auto}
.vz-matrix{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;min-width:560px}
.vz-matrix th,.vz-matrix td{padding:12px 14px;border-bottom:1px solid #E3E3EE;text-align:left;vertical-align:top;color:#3F4060}
.vz-matrix th{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#5F6080;background:#F7F7FB;font-weight:600}
.vz-matrix th.on{color:#4F52E0}
.vz-matrix td:first-child{font-weight:600;color:#121226;width:24%}
.vz-matrix td.ph{border-left:0;padding-left:14px}
/* landscape: management / core / support processes (industries) */
.vz-ls{display:flex;flex-direction:column}
.vz-row{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #EDEDF3}
.vz-row:first-child{border-top:0}
.vz-row>b{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5F6080;font-weight:600}
.vz-row>div{display:flex;flex-wrap:wrap;gap:6px}
.vz-row i{font-style:normal;font-size:13px;padding:7px 11px;border-radius:7px;border:1px solid #D6D6E4;background:#FFFFFF;color:#3F4060}
.vz-row i.hi{border-color:#4F52E0;background:#EEEEFC;color:#121226;font-weight:600}
.vz-row i.lime{border-color:#B8FF12;background:#F4FFD6;color:#121226;font-weight:600}
/* docs: download cards with a document thumbnail (downloads) */
.vz-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.vz-doc{display:flex;gap:18px;border:1px solid #E3E3EE;border-radius:14px;background:#FFFFFF;padding:18px}
.vz-doc>div{display:flex;flex-direction:column;gap:8px}
.vz-doc b{font-size:16px;color:#121226}
.vz-doc span{font-size:14px;line-height:1.5;color:#3F4060}
.vz-thumb{flex:0 0 84px;height:112px;border:1px solid #D6D6E4;border-radius:4px;background:#F7F7FB;position:relative;overflow:hidden}
.vz-thumb.a4::before{content:"";position:absolute;left:10px;top:12px;width:36px;height:6px;border-radius:3px;background:#B8FF12}
.vz-thumb.a4::after{content:"";position:absolute;left:10px;right:10px;top:28px;bottom:12px;background:repeating-linear-gradient(to bottom,#C9CAD6 0 3px,transparent 3px 9px)}
.vz-thumb.poster{background:#1C1C3B;background-image:radial-gradient(circle,#FFFFFF 5px,transparent 6px),linear-gradient(#FFFFFF,#FFFFFF),linear-gradient(#B8FF12,#B8FF12);background-size:22px 22px,22px 14px,14px 14px;background-position:8px 14px,40px 44px,56px 80px;background-repeat:repeat-x,no-repeat,no-repeat}
/* glossary: alphabet strip + definition list */
.vz-az{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.vz-az a,.vz-az span{font-family:'JetBrains Mono',monospace;font-size:12px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E3E3EE;background:#FFFFFF;color:#121226}
.vz-az a:hover{border-color:#4F52E0;color:#4F52E0}
.vz-az span{color:#C9CAD6}
.vz-dl{margin:28px 0 0}
.vz-dl>div{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid #E3E3EE}
.vz-dl>div:first-child{border-top:1px solid #121226}
.vz-dl dt{font-weight:700;color:#121226;font-size:17px;letter-spacing:-0.01em}
.vz-dl dt small{display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5F6080;font-weight:500}
.vz-dl dd{margin:0;font-size:15.5px;line-height:1.55;color:#3F4060}
/* hubs: card grid with a small icon, draft tag for pages in preparation */
.sp-card .tag.soft{color:#78350F;background:#FEF3C7}
.sp-card[href]{color:#121226}
.sp-card[href]:hover{border-color:#4F52E0}
.hub-ico{width:40px;height:40px;border-radius:10px;background:#EEEEFC;display:flex;align-items:center;justify-content:center}
.hub-ico i{display:block;width:16px;height:16px;border:2px solid #4F52E0;border-radius:4px;box-sizing:border-box}
.hub-ico.ev i{border-radius:50%}.hub-ico.gw i{transform:rotate(45deg)}.hub-ico.doc i{width:13px;height:18px;border-radius:2px}
.hub-ico.bar i{width:20px;height:4px;border:0;border-radius:2px;background:#4F52E0;box-shadow:0 -7px 0 #4F52E0,0 7px 0 #4F52E0}
.hub-ico.lane i{width:22px;height:14px;border-radius:3px;border-left-width:6px}
.hub-ico.az i{border:0;width:auto;height:auto;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#4F52E0}
/* related links at the end of a page */
.sp-related{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.sp-related a{border:1px solid #E3E3EE;border-radius:12px;background:#FFFFFF;padding:16px 18px;color:#121226;display:flex;flex-direction:column;gap:4px}
.sp-related a b{font-size:15.5px;font-weight:700}
.sp-related a span{font-size:13.5px;line-height:1.45;color:#5F6080}
.sp-related a:hover{border-color:#4F52E0}
.sp-sec.dark .sp-related a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#FFFFFF}
.sp-sec.dark .sp-related a span{color:#C9CAE6}
.sp-sec.dark .sp-prose h2{color:#FFFFFF}
@media (max-width:980px){
  .vz-flow,.vz-tl{grid-template-columns:1fr 1fr}
  .vz-step:nth-child(2)::after{display:none}
  .vz-tl::before{display:none}.vz-ph{padding:0 16px 16px 24px}
}
@media (max-width:760px){
  .vz{padding:18px}
  .vz-flow,.vz-contrast,.vz-tl,.vz-chain,.vz-map,.vz-brace{grid-template-columns:1fr}
  .vz-step::after,.vz-flow.arrows .vz-step::before{display:none}
  .vz-chain .vz-arr,.vz-map .vz-arr{transform:rotate(90deg)}
  .vz-brace span.off{display:none}
  .vz-row{grid-template-columns:1fr;gap:6px}
  .vz-dl>div{grid-template-columns:1fr;gap:6px}
}

/* ══ Oct 2026, second pass: information architecture, layout system, visual components. All rules are class-scoped (page.css is also loaded by /de/). ══ */
/* sticky table of contents (toc: yes) */
.sp-main{min-width:0}
/* text + aside (two columns on desktop); never a lone text column */
.sp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:8px}
.sp-split.top{align-items:start}
.sp-split.rev>.sp-aside{order:-1}
.sp-split .sp-prose{max-width:66ch}
.sp-split.wide-text{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.sp-aside{min-width:0}
.sp-aside .vz{margin-top:0}
.sp-aside .vpanel{min-height:0;padding:36px 0 0 32px}
.sp-aside .vpanel.small{height:auto;min-height:0;padding:28px 0 0 28px}
/* section lead (Nov 2026, pass 4): stacked. Kicker, title, then the paragraph at reading width directly below; the content follows closely. */
.sp-lead{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sp-lead>p{margin-top:18px;font-size:18px;line-height:1.55;color:#3F4060;max-width:700px;text-wrap:pretty}
.sp-wrap>.sp-lead+*{margin-top:28px !important}
.sp-sec.dark .sp-lead>p{color:#C9CAE6}
.sp-sec.tint{background:#EEEEFC}
.sp-sec.dark .sp-prose h2,.sp-sec.dark .sp-prose h3,.sp-sec.dark .sp-h2{color:#FFFFFF}
.sp-sec.dark em.lime,.lime-word{font-style:normal;color:#B8FF12}
.sp-sec.dark .sp-prose ul,.sp-sec.dark .sp-prose ol{color:#C9CAE6}
@media (max-width:900px){.sp-split,.sp-split.wide-text{grid-template-columns:1fr;gap:28px}.sp-split.rev>.sp-aside{order:0}}
/* key takeaway box */
.sp-key{margin-top:28px;border:1px solid #E3E3EE;border-left:5px solid #B8FF12;border-radius:12px;background:#FFFFFF;padding:18px 22px}
.sp-key .k{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#4F52E0;margin-bottom:6px}
.sp-key p{margin:0;font-size:16.5px;line-height:1.55;color:#121226;font-weight:500}
.sp-sec.dark .sp-key{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);border-left-color:#B8FF12}
.sp-sec.dark .sp-key p{color:#FFFFFF}
/* numbered rows (step rows with optional small visual on the right) */
.sp-rows{margin-top:36px;display:flex;flex-direction:column;border-top:1px solid #121226}
.sp-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:24px 0;border-bottom:1px solid #E3E3EE;align-items:start}
.sp-row.has-vis{grid-template-columns:44px minmax(0,1fr) 240px;align-items:center}
.sp-row h3{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.sp-row p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#3F4060;max-width:62ch}
.sp-row .vis{min-width:0}
.sp-sec.dark .sp-rows{border-color:rgba(255,255,255,.4)}.sp-sec.dark .sp-row{border-color:rgba(255,255,255,.14)}
.sp-sec.dark .sp-row h3{color:#FFFFFF}.sp-sec.dark .sp-row p{color:#C9CAE6}
@media (max-width:760px){.sp-row.has-vis{grid-template-columns:44px minmax(0,1fr)}.sp-row.has-vis .vis{grid-column:2}}
/* comparison table with one highlighted indigo column (th.hi / td.hi) */
.cmp-scroll{margin-top:36px;overflow-x:auto}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;font-size:14.5px;line-height:1.5}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid #E3E3EE;vertical-align:top;text-align:left;color:#3F4060}
.cmp th{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#5F6080;background:#F7F7FB;font-weight:600;border-bottom-color:#D6D6E4}
.cmp td:first-child{font-weight:600;color:#121226;width:20%}
.cmp .hi{background:#EEEEFC;color:#121226}
.cmp th.hi{background:#4F52E0;color:#FFFFFF;border-radius:12px 12px 0 0;border-bottom-color:#4F52E0}
.cmp tbody tr:last-child td.hi{border-radius:0 0 12px 12px}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.hi b,.cmp .hi strong{color:#4F52E0}
.cmp td small{display:block;margin-top:4px;font-size:12.5px;color:#8A8BA8}
/* staircase: each jump in AI came from better context */
/* staircase: six bars on one baseline inside a 200px bar zone (margin-top = 200 - height), text top-aligned below it; the last two columns are wider and clearly taller */
.stair{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) repeat(2,minmax(0,1.7fr));gap:10px;align-items:start}
.stair>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.stair .st-bar{border-radius:10px 10px 0 0;background:#E4E4FB;height:28px;margin-top:172px}
.stair>div:nth-child(2) .st-bar{height:48px;margin-top:152px}.stair>div:nth-child(3) .st-bar{height:68px;margin-top:132px}.stair>div:nth-child(4) .st-bar{height:88px;margin-top:112px}.stair>div:nth-child(5) .st-bar{height:150px;margin-top:50px}.stair>div:nth-child(6) .st-bar{height:200px;margin-top:0}
.stair>div.cur .st-bar{background:#4F52E0}
.stair>div.vis .st-bar{background:transparent;border:2px dashed #4F52E0;border-bottom:0;box-sizing:border-box}
.stair .st-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#8A8BA8}
.stair>div.cur .st-n,.stair>div.vis .st-n{color:#4F52E0}
.stair b{font-size:16px;font-weight:700;color:#121226}
.stair span{font-size:13px;line-height:1.45;color:#5F6080}
.stair .st-tag{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:4px;background:#B8FF12;color:#121226}
.stair>div.vis .st-tag{background:transparent;border:1px dashed #4F52E0;color:#4F52E0}
.sp-sec.dark .stair .st-bar{background:rgba(255,255,255,.14)}.sp-sec.dark .stair>div.cur .st-bar{background:#B8FF12}
.sp-sec.dark .stair b{color:#FFFFFF}.sp-sec.dark .stair span{color:#C9CAE6}
@media (max-width:760px){.stair{display:flex;flex-direction:column;gap:14px}.stair>div{display:grid;grid-template-columns:8px 1fr;gap:4px 14px}.stair .st-bar,.stair>div:nth-child(n) .st-bar{height:auto;margin-top:0;grid-row:1/5;border-radius:4px}.stair>div.vis .st-bar{border:2px dashed #4F52E0}}
/* five-step flow with arrows (capture → model → analyse → design → run) */
.vz-flow.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.vz-flow.arrows .vz-step::after{background:#4F52E0;right:-15px;width:16px}
.vz-flow.arrows .vz-step::before{content:"";position:absolute;right:-13px;top:calc(50% - 4px);width:7px;height:7px;border-top:2px solid #4F52E0;border-right:2px solid #4F52E0;transform:rotate(45deg)}
.vz-flow.arrows .vz-step:last-child::before{display:none}
.vz-step.dashed{border:1.5px dashed #4F52E0;background:#FFFFFF}
.vz-step .soon{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:#B8FF12;color:#121226;padding:3px 7px;border-radius:4px}
.vz-step .num{margin-bottom:2px}
@media (max-width:980px){.vz-flow.five{grid-template-columns:repeat(2,minmax(0,1fr))}.vz-flow.arrows .vz-step::after,.vz-flow.arrows .vz-step::before{display:none}}
@media (max-width:760px){.vz-flow.five{grid-template-columns:1fr}}
/* mini BPMN figure (built from src/bpmn/*.json) */
.bpmn-fig{margin:32px 0 0;border:1px solid #E3E3EE;border-radius:16px;background:#FFFFFF;padding:14px;overflow:hidden}
.bpmn-scroll{overflow-x:auto}
.bpmn-fig .bpmn{display:block;max-width:100%;height:auto;min-width:620px}
.bpmn-fig figcaption{margin-top:12px;font-size:13px;line-height:1.45;color:#5F6080}
.sp-aside .bpmn-fig{margin-top:0}
/* document requests: buttons, cards on the Downloads & reports page, inline form without JavaScript */
.btn-dl{display:inline-flex;align-items:center;gap:10px;background:#121226;color:#FFFFFF;font-weight:600;font-size:15px;padding:0 20px;min-height:46px;border-radius:10px;box-sizing:border-box}
.btn-dl:hover{background:#4F52E0}
.sp-sec.dark .btn-dl{background:#B8FF12;color:#121226}
.dl-group{margin-top:36px;font-size:20px;font-weight:700;letter-spacing:-0.01em}
.dl-group+.dl-grid{margin-top:16px}
.dl-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dl-card.wide{grid-column:1/-1}
.dl-card{background:#FFFFFF;border:1px solid #E3E3EE;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.dl-card h3{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.dl-card p{font-size:14.5px;line-height:1.5;color:#3F4060}
.dl-meta{display:flex;gap:6px;flex-wrap:wrap}
.dl-actions{margin-top:auto;padding-top:8px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14.5px;font-weight:600}
.dl-inline{margin-top:40px;border:1px solid #E3E3EE;border-radius:18px;background:#FFFFFF;padding:28px}
.dl-form-inline{padding:18px 0 0}
.dl-flash{display:none;margin-top:18px;padding:14px 18px;border-radius:10px;font-size:15px;line-height:1.5}
.dl-flash:target{display:block}
.dl-flash.ok{background:#F4FFD6;border:1px solid #B8FF12;color:#121226}
.dl-flash.err{background:#FEE2E2;border:1px solid #FCA5A5;color:#991B1B}
.dl .dl-item{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:#5F6080;margin-bottom:14px;padding:10px 14px;background:#F7F7FB;border-radius:10px}
.dl .dl-item b{color:#121226}
.dl-note{margin-top:14px;font-size:13.5px;color:#5F6080}
.dl-panel{margin-top:28px;border:1px solid #E3E3EE;border-radius:16px;background:#F7F7FB;padding:22px 24px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.dl-panel>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 320px}
.dl-panel b{font-size:17px}
.dl-panel span{font-size:14px;color:#5F6080}
.sp-sec.dark .dl-panel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.sp-sec.dark .dl-panel b{color:#FFFFFF}.sp-sec.dark .dl-panel span{color:#C9CAE6}
/* next steps (front matter next: id,id,id) */
/* two readers / reader cards and numbered icon cards (ported from the deck) */
.sp-card .num{margin-bottom:2px}
.sp-card .icon{width:40px;height:40px;border-radius:10px;background:#EEEEFC;display:flex;align-items:center;justify-content:center;color:#4F52E0}
.sp-card.dark{background:#1C1C3B;border-color:#2A2A52;color:#FFFFFF}
.sp-card.dark h3{color:#FFFFFF}.sp-card.dark p,.sp-card.dark li{color:#C9CAE6}.sp-card.dark .tag{background:rgba(255,255,255,.1);color:#B8FF12}
.sp-card.accent{border-color:#4F52E0;box-shadow:0 18px 40px rgba(79,82,224,.12)}
.sp-card.ghost{background:#F7F7FB;border-style:dashed}
.sp-footer{}
/* report pages */
.rp-toc{margin-top:28px;border:1px solid #E3E3EE;border-radius:14px;background:#FFFFFF;padding:20px 22px}
.rp-toc ol{margin:10px 0 0;padding-inline-start:22px;font-size:15.5px;line-height:1.6;color:#3F4060}
.rp-who{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rp-who>div{border:1px solid #E3E3EE;border-radius:12px;background:#FFFFFF;padding:16px 18px;font-size:14.5px;line-height:1.5;color:#3F4060}
.rp-who b{display:block;color:#121226;margin-bottom:4px}
@media (max-width:760px){.dl-inline{padding:20px 16px}.cmp{min-width:560px}}
@media print{
  .site-head,.lang-hint,.lib-side,.lib-otp,.lib-book,.lib-pn,.lib-cta,.sp-also,.sp-footer,.pd,.sp-cta,.sp-ctas,.btn-dl,.dl-panel,.dl-inline{display:none !important}
  .sp-top{background:#FFFFFF !important;color:#121226 !important;background-image:none !important}
  .sp-hero{padding:0 0 24px}.sp-hero h1{font-size:34px;color:#121226}.sp-intro{color:#3F4060;font-size:15px}.sp-eyebrow{color:#4F52E0}
  .sp-sec{padding:18px 0;break-inside:avoid}.sp-sec.dark{background:#FFFFFF;color:#121226}
  .sp-sec.dark .sp-prose p,.sp-sec.dark .sp-prose h2,.sp-sec.dark .sp-prose h3,.sp-sec.dark .sp-row p,.sp-sec.dark .sp-row h3{color:#121226}
  .sp-prose h2,.sp-h2{font-size:24px}.sp-prose p,.sp-prose li{font-size:12.5px}
  .sp-split{grid-template-columns:1fr 1fr;gap:20px}.vz,.bpmn-fig,.sp-card,.sp-key{break-inside:avoid;box-shadow:none}
  .bpmn-fig .bpmn{min-width:0}
}

/* ══ Nov 2026: two page types. Sales pages = sticky bar + dark hero + content + one CTA band. Library pages = sticky bar + collapsible left sidebar + compact title block + content + previous/next + CTA card + "On this page" on the right (≥1320px). ══ */
.sp-also{background:#FFFFFF;border-top:1px solid #E3E3EE}
.sp-also>div{max-width:1240px;margin:0 auto;padding:28px 32px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;font-size:15.5px;color:#3F4060}
.sp-also b{font-weight:600;color:#121226}
.sp-also a{font-weight:600}
.lib{display:grid;grid-template-columns:268px minmax(0,1fr);align-items:stretch;background:#FFFFFF}
.lib-right{min-width:0;display:flex;flex-direction:column;min-height:calc(100vh - 76px)}
.lib-right>.lib-art{flex:1 0 auto}
.lib-side{border-right:1px solid #E3E3EE;background:#FAFAFD;min-width:0}
.lib-side-in{position:sticky;top:76px;max-height:calc(100vh - 76px);overflow:auto;box-sizing:border-box;padding:18px 12px 40px}
.lib-m{display:none}
.lib-s{margin-bottom:2px}
.lib-s>summary{list-style:none;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5F6080;padding:9px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.lib-s>summary::-webkit-details-marker{display:none}
.lib-s>summary::after{content:"+";font-size:15px;font-weight:500}
.lib-s[open]>summary::after{content:"\2212"}
.lib-s>summary:hover{background:#ECECFD;color:#121226}
/* second level: indented under its section, on a thin guide line */
.lib-s>div{margin:2px 0 8px 10px;padding-left:6px;border-left:1px solid #DCDCEC}
.lib-l{display:block;font-size:14px;line-height:1.3;color:#34345A;padding:6px 10px;border-radius:6px}
.lib-l:hover{background:#ECECFD;color:#121226}
.lib-l[aria-current=page]{background:#ECECFD;color:#4F52E0;font-weight:600}
.lib-art{min-width:0;display:grid;grid-template-columns:minmax(0,1040px) 220px;gap:0 8px;align-items:start;justify-content:center}
.lib-art.notoc{grid-template-columns:minmax(0,1040px) 220px}   /* the empty second cell keeps the document column where it is on pages with "On this page" */
.lib-doc{min-width:0}
.lib-head{padding:30px 32px 26px;border-bottom:1px solid #E3E3EE}
.lib-crumb{font-size:13px;color:#5F6080;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.lib-crumb a{color:#5F6080}.lib-crumb a:hover{color:#121226}
.lib-head .sp-meta{display:block;font-size:13px;color:#5F6080;margin:0 0 10px}
.lib-head h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-0.025em;font-weight:800;margin:0;text-wrap:balance;color:#121226}
.lib-intro{max-width:68ch;margin:12px 0 0;font-size:16.5px;line-height:1.55;color:#45466B;text-wrap:pretty}
.lib-main .sp-sec{padding:38px 0}
.lib-main .sp-wrap{max-width:none;margin:0;padding:0 32px}
.lib-main .sp-split{gap:28px}
.lib-main .sp-draft{margin:0}
.lib-pn{display:flex;justify-content:space-between;gap:12px;padding:22px 32px;border-top:1px solid #E3E3EE}
.lib-pn a{display:block;font-weight:600;font-size:15px;color:#4F52E0;max-width:46%}
.lib-pn small{display:block;font-weight:500;font-size:12px;color:#5F6080;margin-bottom:2px}
.lib-pn a.next{text-align:right;margin-left:auto}
.lib-cta{margin:0 32px 34px;background:#121226;color:#F1F1FA;border-radius:12px;padding:20px 22px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.lib-cta b{font-size:17px;font-weight:600;color:#FFFFFF}
.lib-cta .btn-p{background:#B8FF12;color:#121226;font-size:14px;font-weight:600;padding:10px 14px;border-radius:9px;display:inline-flex;align-items:center;white-space:nowrap}
.lib-otp{position:sticky;top:100px;padding:28px 16px 20px 8px;font-size:13px}
.lib-otp-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5F6080;margin:0 0 8px}
.lib-otp ol{list-style:none;margin:0;padding:0}
.lib-otp a{display:block;color:#45466B;padding:4px 0;line-height:1.3}
.lib-otp a:hover{color:#4F52E0}
@media (max-width:1320px){.lib-art,.lib-art.notoc{grid-template-columns:minmax(0,1040px);justify-content:start}.lib-otp{display:none}}
@media (max-width:980px){
  .lib{grid-template-columns:minmax(0,1fr)}
  .lib-side{border-right:0;border-bottom:1px solid #E3E3EE}
  .lib-side-in{position:static;max-height:none;overflow:visible;padding:10px 16px}
  .lib-m{display:block}
  .lib-m>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#FFFFFF;border:1px solid #E3E3EE;border-radius:8px;padding:11px 13px;font-size:14px;font-weight:600;color:#121226;cursor:pointer}
  .lib-m>summary::-webkit-details-marker{display:none}
  .lib-m[open]>summary svg{transform:rotate(180deg)}
  .lib-tree{display:none;margin-top:8px}
  .lib-m[open]+.lib-tree{display:block}
  .lib-head{padding:22px 16px 20px}
  .lib-main .sp-wrap{padding:0 16px}
  .lib-main .sp-sec{padding:32px 0}
  .lib-pn{padding:18px 16px}
  .lib-cta{margin:0 16px 26px}
  .sp-also>div{padding:24px 16px}
}

/* ══ Nov 2026, pass 3: abstract visuals in the homepage's language (tinted panel, floating skeleton card, bars, chips) ══ */
/* slide mocks: How it works, step 5 (three deck slides) */
.sl{background:#F1F1F7;border-radius:14px;padding:16px 0 0 16px;overflow:hidden}
.sl-card{background:#FFFFFF;border:1px solid #E3E3EE;border-right:0;border-radius:10px 0 0 10px;padding:12px 0 12px 14px;box-shadow:0 12px 30px rgba(18,18,38,.08);display:flex;flex-direction:column;gap:8px}
.sl-t{display:block;height:8px;width:52%;border-radius:4px;background:#121226}
.sl-s{display:block;height:5px;border-radius:3px;background:#E3E3EE}
.sl-lanes{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.sl-lane{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;min-height:22px;border-top:1px solid #ECECF2;padding-top:5px}
.sl-lane>i{display:block;height:5px;border-radius:3px;background:#C9CAE6}
.sl-steps{display:flex;align-items:center;gap:5px;min-width:0;padding-right:4px}
.sl-box{width:28px;height:13px;border:1.5px solid #121226;border-radius:3px;background:#FFFFFF;flex:none;box-sizing:border-box}
.sl-box.ctl{background:#1D4ED8;border-color:#1D4ED8}
.sl-box.wait{border-style:dashed;border-color:#A16207;background:#FEF3C7}
.sl-gw{width:10px;height:10px;border:1.5px solid #121226;transform:rotate(45deg);background:#FFFFFF;margin:0 4px;flex:none;box-sizing:border-box}
.sl-ln{flex:1 1 8px;height:1.5px;background:#6B6C8E;min-width:6px;max-width:16px}
.sl-tag{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:3px 6px;line-height:1.2}
.sl-tag.amber{color:#A16207;background:#FEF3C7;border:1px solid #FDE68A}
.sl-tag.blue{color:#1D4ED8;background:#DBEAFE;border:1px solid #BFDBFE}
.sl-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;padding-right:10px}
.sl-row>b{display:block;width:12px;height:12px;border-radius:3px;background:#1D4ED8}
.sl-row>i{display:block;height:5px;border-radius:3px;background:#C9CAE6}
/* industries overview: text left, abstract process mock right */
.ind-rows{margin-top:36px;display:flex;flex-direction:column;border-top:1px solid #121226}
.ind-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:center;padding:32px 0;border-bottom:1px solid #E3E3EE}
.ind-row h3{font-size:26px;font-weight:700;letter-spacing:-0.015em}
.ind-row h3 a{color:#121226}.ind-row h3 a:hover{color:#4F52E0}
.ind-row .sp-prose>p{margin-top:10px;font-size:15.5px;line-height:1.55;color:#3F4060;max-width:50ch}
.ind-row .more{display:inline-block;margin-top:14px;font-weight:600}
.ind-vis{background:#F1F1F7;border-radius:16px;padding:22px 22px 16px;min-width:0}
.ind-vis .mini{display:block;width:100%;height:auto;border-radius:8px;overflow:hidden}
.ind-cap{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.ind-cap .chip{background:#FFFFFF}
.ind-cap .chip i.ctl{display:inline-block;width:9px;height:9px;border-radius:2px;background:#1D4ED8;margin-right:6px;vertical-align:-1px}
@media (max-width:900px){.ind-row{grid-template-columns:1fr;gap:20px;padding:26px 0}.ind-row h3{font-size:22px}}
/* pass 4: a key box that spans the column keeps its text at reading width */
.sp-wrap>.sp-key{max-width:740px}
/* pass 4: the Executions-pilot button inside the note on /pilot/ */
.sp-note-actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px}
.sp-note-btn{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid #4F52E0;color:#4F52E0;font-weight:600;font-size:14.5px;background:#FFFFFF}
.sp-note-btn:hover{background:#EEEEFC;color:#2F31B8}
/* the proposal request on the Pilot pages: a primary button inside the note, next to the demo link */
.sp-note-cta{max-width:none}
.sp-note-cta .sp-note-cta-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;background:#121226;color:#FFFFFF;font-weight:600;font-size:15px}
.sp-note-cta .sp-note-cta-btn:hover{background:#4F52E0;color:#FFFFFF}
.sp-note-cta .sp-note-actions{margin-top:16px}
@media (max-width:760px){.rp-who,.dl-grid{grid-template-columns:1fr}.dl-card.wide{grid-column:auto}}
/* explicit column counts for complete panel rows (README: panel rows must be complete) */
.sp-cards.g4,.sp-facts.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-cards.g3,.sp-facts.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-cards.g2,.sp-facts.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.sp-cards.g4,.sp-facts.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sp-cards.g3,.sp-facts.g3{grid-template-columns:1fr}}
@media (max-width:560px){.sp-cards.g4,.sp-facts.g4,.sp-cards.g2,.sp-facts.g2{grid-template-columns:1fr}}
/* blog: share link under the article, aligned with the text */
.sp-share{margin-top:32px}
.share-li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#3F4060;border:1px solid #E3E3EE;border-radius:999px;padding:8px 14px;background:#FFFFFF}
.share-li:hover{color:#121226;border-color:#4F52E0}
/* a grid of exactly four cards never breaks 3 + 1: it becomes 2 x 2 unless a g-class says otherwise */
.sp-cards:not(.g2):not(.g3):not(.g4):has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.sp-cards:has(> :nth-child(4):last-child){grid-template-columns:1fr}}
/* three cards or related links: always one complete row of three down to tablet width, then a stack */
.sp-cards:not(.g2):not(.g3):not(.g4):has(> :nth-child(3):last-child),.sp-related{grid-template-columns:repeat(3,minmax(0,1fr))}
.lib-main .sp-steps:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.sp-cards:not(.g2):not(.g3):not(.g4):has(> :nth-child(3):last-child),.sp-related{grid-template-columns:1fr}}   /* same selector as the three-column rule, so it wins here; .g3 collapses at 760 */
@media (max-width:560px){.lib-main .sp-steps:has(> :nth-child(4):last-child){grid-template-columns:1fr}}
/* section headings may use the full content column (at most two lines on desktop); paragraphs and lists stay at reading width */
.sp-wrap>.sp-prose,.sp-lead>.sp-prose{max-width:none}
.sp-wrap>.sp-prose>:not(h2),.sp-lead>.sp-prose>:not(h2){max-width:740px}
/* "Join pilot" inside the dashed Run step of the flow (Processes before AI agents): opens the Executions-pilot dialog */
.vz-step .vz-join{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:9px;background:#4F52E0;color:#FFFFFF;font-size:14px;font-weight:600}
.vz-step .vz-join:hover{background:#3F42C8;color:#FFFFFF}

/* ── Project path (Nov 2026): overview page, step pages, case figures and the browser-only helper tools ── */
.sp-card .tag.sky{color:#1D4ED8;background:#DBEAFE}
.sp-card .tag.ink{color:#3F4060;background:#EEEEF4}
.sp-card .tag+p+.tag{margin-top:10px}
.sp-card p.muted{color:#5F6080;font-size:14.5px}
/* phases and steps: one row per phase, the steps of the phase as a list; built steps are links, the others plain */
.pp-phases{margin-top:36px;border-top:1px solid #121226}
.pp-phase{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;padding:26px 0;border-bottom:1px solid #E3E3EE;align-items:start}
.pp-ph-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#4F52E0}
.pp-ph-head b{display:block;margin-top:6px;font-size:21px;font-weight:700;letter-spacing:-0.01em}
.pp-ph-head span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:#5F6080}
.pp-steps{display:flex;flex-direction:column;gap:12px}
.pp-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.pp-step .n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#8A8BA8;padding-top:3px}
.pp-step.on .n{color:#4F52E0}
.pp-step b{display:block;font-size:17px;font-weight:700}
.pp-step b a{color:#4F52E0;text-decoration:none;border-bottom:1.5px solid #C9CAF5}
.pp-step b a:hover{border-bottom-color:#4F52E0}
.pp-step span{display:block;margin-top:3px;font-size:14.5px;line-height:1.5;color:#3F4060;max-width:62ch}
/* where patchley starts, carries and ends: eleven cells, one per step */
.pp-track{margin-top:28px;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.pp-track>div{border-radius:8px;min-height:54px;padding:8px 6px;display:flex;flex-direction:column;justify-content:space-between;background:#EEEEF4;color:#3F4060;box-sizing:border-box}
.pp-track>div i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600}
.pp-track>div.core{background:#4F52E0;color:#FFFFFF}
.pp-track>div.helps{background:#E4E4FB;color:#2F31B8}
.pp-track>div.pilot{background:transparent;border:1.5px dashed #4F52E0;color:#4F52E0}
.pp-key{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:#3F4060}
.pp-key i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:8px;background:#EEEEF4}
.pp-key i.core{background:#4F52E0}.pp-key i.helps{background:#E4E4FB}.pp-key i.pilot{background:transparent;border:1.5px dashed #4F52E0;box-sizing:border-box}
/* case figures: pre-rendered SVG from the fictional case; the overview fits the column, crops keep their size and scroll */
.case-fig{margin:28px 0 0;border:1px solid #E3E3EE;border-radius:16px;background:#FFFFFF;padding:14px 14px 12px;overflow:hidden}
.case-fig .case-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px}
.case-fig .case-head b{font-size:15px;font-weight:700}
.case-chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#78350F;background:#FEF3C7;border-radius:6px;padding:3px 8px}
.case-scroll{overflow-x:auto;overflow-y:hidden}
.case-scroll .case-svg{display:block;max-width:none}
.case-scroll .case-svg.ov{max-width:100%;width:100%;height:auto;min-width:720px}
.case-scroll .case-svg.crop{max-width:100%;width:100%;height:auto;min-width:640px}
.case-fig figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:#5F6080}
.case-fig .case-legend{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:#5F6080}
.case-fig .case-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px;border:1.5px solid #121226;background:#FFFFFF;box-sizing:border-box}
.case-fig .case-legend i.new{border-color:#4F52E0;background:#EEEEFC}.case-fig .case-legend i.ctl{border-color:#1D4ED8;background:#1D4ED8}
.case-exs{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.case-ex{border:1px solid #E3E3EE;border-left:4px solid #4F52E0;border-radius:12px;background:#FFFFFF;padding:16px 18px}
.case-ex .k{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#4F52E0}
.case-ex b{display:block;margin-top:6px;font-size:15.5px;font-weight:700}
.case-ex p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#3F4060}
.case-ex .src{display:block;margin-top:10px;font-size:12.5px;color:#8A8BA8}
.case-facts{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case-facts>div{border:1px solid #E3E3EE;border-radius:12px;background:#FFFFFF;padding:14px 16px}
.case-facts b{display:block;font-size:15px;font-weight:700}
.case-facts span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:#3F4060}
/* helper tools */
.pt-tool{margin-top:28px;border:1px solid #121226;border-radius:16px;background:#FFFFFF;padding:24px 26px 26px}
.pt-tool .pt-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:6px}
.pt-tool .pt-head b{font-size:17px;font-weight:700}
.pt-tool .pt-head .chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#4F52E0;background:#EEEEFC;border-radius:6px;padding:3px 8px}
.pt-tool .pt-lead{font-size:14.5px;line-height:1.55;color:#5F6080;margin:0 0 18px;max-width:70ch}
.pt-nojs{margin:0;padding:14px 16px;border-radius:10px;background:#FEF3C7;color:#78350F;font-size:14.5px;line-height:1.5}
.pt-form .pd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pt-form .pd-field label{font-size:13px}
.pt-form.g2 .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt-row.head>span{display:block;min-height:14px}
.pt-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.pt-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid #121226;background:#121226;color:#FFFFFF;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pt-btn:hover{background:#4F52E0;border-color:#4F52E0}
.pt-btn.ghost{background:#FFFFFF;color:#121226}
.pt-btn.ghost:hover{background:#EEEEFC;border-color:#4F52E0;color:#2F31B8}
.pt-btn.small{min-height:36px;padding:0 12px;font-size:13.5px}
.pt-btn[disabled]{opacity:.5;cursor:default}
.pt-note{font-size:13.5px;color:#5F6080}
.pt-out{margin-top:22px;border-top:1px solid #E3E3EE;padding-top:18px}
.pt-out[hidden]{display:none}
.pt-out-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;align-items:center}
.pt-out-head h4{margin:0;font-size:17px;font-weight:700}
.pt-qs{margin:14px 0 0;padding:0;list-style:none;counter-reset:pq;display:flex;flex-direction:column}
.pt-qs>li{counter-increment:pq;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid #EEEEF4}
.pt-qs>li::before{content:counter(pq);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:#4F52E0;padding-top:3px;grid-column:1;grid-row:1}
.pt-qs>li>*{grid-column:2}
.pt-qs b{display:block;font-size:15.5px;font-weight:600}
.pt-qs span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:#5F6080}
.pt-qs>li.sec{display:block;border-bottom:0;padding:18px 0 2px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A8BA8;counter-increment:none}
.pt-qs>li.sec::before{content:none}
.pt-copy-area{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.pt-drop{border:1.5px dashed #C9CAF5;border-radius:12px;padding:22px;background:#FBFBFE;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.pt-drop.over{border-color:#4F52E0;background:#EEEEFC}
.pt-drop input[type=file]{font:inherit;font-size:14px;max-width:100%}
.pt-drop span{font-size:14px;color:#3F4060}
.pt-paste{margin-top:12px}
.pt-paste textarea{width:100%;box-sizing:border-box;font:inherit;font-family:'JetBrains Mono',monospace;font-size:12.5px;min-height:90px;padding:10px 12px;border:1px solid #D8D8E6;border-radius:10px;resize:vertical}
.pt-paste textarea:focus{outline:2px solid #4F52E0;outline-offset:1px;border-color:#4F52E0}
.pt-stats{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pt-stats span{font-size:13px;color:#3F4060;background:#F3F3F9;border-radius:8px;padding:5px 10px}
.pt-stats span b{color:#121226}
.pt-fs{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.pt-fs>li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid #EEEEF4;align-items:start}
.pt-fs>li::before{content:"";width:12px;height:12px;border-radius:50%;margin-top:5px;background:#D6D6E4;grid-column:1;grid-row:1}
.pt-fs>li>*{grid-column:2}
.pt-fs>li.high::before{background:#B91C1C}.pt-fs>li.med::before{background:#D97706}.pt-fs>li.low::before{background:#2563EB}.pt-fs>li.ok::before{background:#15803D}
.pt-fs b{display:block;font-size:15px;font-weight:600}
.pt-fs span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:#5F6080}
.pt-fs code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:#F3F3F9;border-radius:4px;padding:1px 5px}
.pt-rows{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.pt-row{display:grid;grid-template-columns:minmax(0,1fr) 118px 118px 118px 40px;gap:8px;align-items:center}
.pt-row.head{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A8BA8;padding:0 4px}
.pt-row input,.pt-row select{font:inherit;font-size:14px;min-height:40px;padding:6px 10px;border:1px solid #D8D8E6;border-radius:8px;background:#FFFFFF;width:100%;box-sizing:border-box;min-width:0}
.pt-row input:focus,.pt-row select:focus{outline:2px solid #4F52E0;outline-offset:1px;border-color:#4F52E0}
.pt-row .pt-f{display:flex;align-items:center;gap:6px;min-width:0}
.pt-row .pt-f input{flex:1}
.pt-row .ex{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#78350F;background:#FEF3C7;border-radius:5px;padding:3px 6px;white-space:nowrap}
.pt-row .pt-x{min-height:40px;border:1px solid #D8D8E6;border-radius:8px;background:#FFFFFF;color:#5F6080;font:inherit;font-size:18px;line-height:1;cursor:pointer}
.pt-row .pt-x:hover{border-color:#B91C1C;color:#B91C1C}
.pt-rank{margin:14px 0 0;padding:0;list-style:none;counter-reset:pr;display:flex;flex-direction:column}
.pt-rank>li{counter-increment:pr;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid #EEEEF4;align-items:start}
.pt-rank>li::before{content:counter(pr);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#4F52E0;padding-top:2px;grid-column:1;grid-row:1}
.pt-rank>li>b,.pt-rank>li>span:not(.pt-bucket){grid-column:2}
.pt-rank>li>.pt-bucket{grid-column:3;grid-row:1;justify-self:end}
.pt-rank b{display:block;font-size:15.5px;font-weight:600}
.pt-rank span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:#5F6080}
.pt-bucket{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:4px 8px;white-space:nowrap;background:#EEEEF4;color:#3F4060}
.pt-bucket.quick{background:#DCFCE7;color:#166534}.pt-bucket.project{background:#DBEAFE;color:#1E3A8A}.pt-bucket.later{background:#FEF3C7;color:#78350F}.pt-bucket.leave{background:#F3F3F9;color:#5F6080}
.pt-grid2{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.pt-matrix{border:1px solid #E3E3EE;border-radius:12px;background:#FFFFFF;padding:10px}
.pt-matrix svg{display:block;width:100%;height:auto}
.pt-matrix .pt-mcap{margin:8px 0 0;font-size:12.5px;color:#5F6080;line-height:1.45}
@media (max-width:980px){.pt-form .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-grid2{grid-template-columns:1fr}.pp-phase{grid-template-columns:1fr;gap:14px}}
@media (max-width:760px){.case-exs,.case-facts{grid-template-columns:1fr}.pt-form .pd-grid,.pt-form.g2 .pd-grid{grid-template-columns:1fr}.pt-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 40px;gap:6px}.pt-row.head{display:none}.pt-row>.pt-f{grid-column:1/-1}}
@media (max-width:560px){.pt-tool{padding:18px 16px 20px}.pp-track>div{min-height:44px;padding:6px 4px}.pp-track>div i{font-size:10px}.case-scroll .case-svg.ov{min-width:620px}.pt-rank>li{grid-template-columns:28px minmax(0,1fr)}.pt-rank>li>.pt-bucket{grid-column:2;grid-row:auto;justify-self:start}}

/* ── Library reading style (3 Nov 2026): calmer documentation look. Everything below is scoped to .lib, so the homepage,
   the sales pages, the top bar and the footer keep their look. Placement: the document column starts right beside the
   sidebar (52 px of space from sidebar to text), running text stays at 740 px, wide content at up to 896 px, "On this
   page" sits 40 px beside the column, spare space falls to the far right. ── */
.lib{color:#1F2033}
.lib-art,.lib-art.notoc{grid-template-columns:minmax(0,980px) 220px;gap:0 40px;justify-content:start}
.lib-head{padding:34px 32px 24px 52px}
.lib-main .sp-wrap{padding:0 32px 0 52px}
.lib-pn{padding:22px 32px 22px 52px}
.lib-cta{margin:0 32px 40px 52px}
.lib-otp{padding:34px 16px 20px 0}
@media (max-width:1320px){.lib-art,.lib-art.notoc{grid-template-columns:minmax(0,980px)}}
/* type: body 16.5/1.62 dark neutral, h1 36/700, h2 25/700, h3 17.5/600; more space above headings than below */
.lib-head h1{font-size:36px;line-height:1.2;letter-spacing:-0.01em;font-weight:700}
.lib-intro{font-size:17px;line-height:1.6;color:#3A3B55;max-width:740px}
.lib-main .sp-sec{padding:34px 0 12px}
.lib-main .sp-sec+.sp-sec{border-top:1px solid #ECECF2}
.lib .sp-kicker{font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;color:#5F6080;font-weight:500;margin:0 0 2px}
.lib .sp-prose h2,.lib .sp-h2{margin:0 0 6px;font-size:25px;line-height:1.3;letter-spacing:-0.01em;font-weight:700;text-wrap:balance}
.lib .sp-lead{gap:0}
.lib .sp-lead>p{margin-top:8px;max-width:740px}
.lib .sp-prose h3{margin-top:30px}
.lib .sp-prose h3,.lib .sp-row h3,.lib .sp-card h3,.lib .dl-card h3,.lib .sp-list h3,.lib .sp-steps h3,.lib .vz-dl dt,.lib .dl-group,.lib .pp-ph-head b,.lib .pp-step b,.lib .sp-facts b,.lib .case-facts b,.lib .case-ex b,.lib .lib-cta b{font-size:17.5px;line-height:1.4;font-weight:600;letter-spacing:0}
.lib .sp-prose p,.lib .sp-row p,.lib .sp-card p,.lib .sp-lead>p,.lib .sp-list p,.lib .sp-facts span,.lib .dl-card p,.lib .sp-prose li,.lib .sp-key p,.lib .case-ex p,.lib .case-facts span,.lib .pp-step span,.lib .pp-ph-head span,.lib .vz-dl dd,.lib .sp-note,.lib .vz-col ul,.lib .vz-step span,.lib .sp-steps p,.lib .sp-prose ul,.lib .sp-prose ol,.lib .pt-lead,.lib .vz-sym span,.lib .vz-doc span,.lib .vz-loc span,.lib .stair span,.lib .vz-ph span,.lib .sp-related a span{font-size:16.5px;line-height:1.62;color:#1F2033}
.lib .sp-prose p{margin-top:14px}
.lib .sp-row p{margin-top:6px;max-width:740px}
.lib .sp-key p{font-weight:400}
.lib .sp-card p,.lib .vz-step span,.lib .vz-sym span,.lib .vz-doc span,.lib .vz-loc span,.lib .stair span,.lib .vz-ph span,.lib .case-facts span,.lib .pp-step span,.lib .pt-lead{font-size:15.5px;line-height:1.55}
.lib figcaption,.lib .sp-meta,.lib .lib-crumb,.lib .case-ex .src,.lib .pt-note,.lib .vz-cap,.lib .cmp td small,.lib .dl-note,.lib .lib-pn small,.lib .case-fig .case-legend{color:#5F6080}
.lib .sp-meta{color:#5F6080}
.lib .vz-cap{font-family:inherit;letter-spacing:0;text-transform:none;font-size:13.5px}
/* links in running text are links */
.lib .lib-main p a,.lib .lib-main li a,.lib .lib-main dd a,.lib .sp-facts span a,.lib .sp-key a,.lib .case-ex a,.lib .lib-intro a{color:#4F52E0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
/* one accent: no bands, no lime, no coloured bars; boxes flat with small radius and thin borders */
.lib .sp-sec.alt{background:transparent;border:0}
.lib .sp-sec.tint{background:transparent}
.lib .sp-key{border:1px solid #E6E6EE;background:#F6F6F9;border-radius:6px;padding:16px 18px;margin-top:22px}
.lib .sp-key .k,.lib .sp-card .tag,.lib .case-ex .k,.lib .pt-head .chip,.lib .vz-dl dt small,.lib .stair .st-n,.lib .pp-ph-n,.lib .lib-otp-title,.lib .vz-step .vz-n,.lib .vz-loc .vz-flag,.lib .vz-row>b,.lib .cmp th,.lib .vz-matrix th,.lib .pt-row.head,.lib .sp-draft-tag{font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;background:transparent;padding:0;color:#5F6080;font-weight:600}
.lib .sp-card .tag.sky{color:#4F52E0}
.lib .sp-card .tag+p+.tag{margin-top:12px}
.lib .cmp th,.lib .vz-matrix th{padding:12px 16px;background:#F6F6F9}
.lib .sp-draft-tag{background:#A16207;color:#FFFFFF;padding:2px 7px;border-radius:4px}
.lib .pill,.lib .dl-meta .chip,.lib .vz-out i,.lib .stair .st-tag,.lib .pp-step .pp-tag,.lib .vz-row i,.lib .pt-stats span{background:#F3F3F7;color:#3F4060;border:1px solid transparent;font-family:inherit;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:500;border-radius:4px}
.lib .pill.sky,.lib .vz-row i.hi,.lib .vz-row i.lime,.lib .vz-out i.lime,.lib .stair>div.vis .st-tag,.lib .pp-step .pp-tag{background:#EEEEFC;color:#2F31B8;border-color:transparent}
.lib .sp-card,.lib .dl-card,.lib .vz,.lib .vz-step,.lib .vz-col,.lib .vz-sym,.lib .vz-doc,.lib .vz-loc,.lib .case-fig,.lib .case-ex,.lib .case-facts>div,.lib .pt-tool,.lib .pt-matrix,.lib .sp-note,.lib .dl-inline,.lib .dl-panel,.lib .bpmn-fig,.lib .pt-drop,.lib .sp-related a,.lib .vz-blk,.lib .vz-screen,.lib .dl-flash,.lib .pt-nojs,.lib .vz-az a,.lib .vz-az span,.lib .hub-ico{border-radius:6px;box-shadow:none}
.lib .sp-card,.lib .dl-card,.lib .vz,.lib .case-fig,.lib .pt-tool,.lib .sp-note,.lib .dl-inline,.lib .bpmn-fig,.lib .sp-related a,.lib .case-ex{border-color:#E3E3EE;background:#FFFFFF}
.lib .sp-card{padding:20px 22px;gap:10px}
.lib .sp-card.hi{border-color:#D8D8E6}
.lib .sp-card.accent,.lib .sp-card.dark{background:#FFFFFF;color:#1F2033;border-color:#E3E3EE}
.lib .sp-card.accent h3,.lib .sp-card.dark h3,.lib .sp-card.accent p,.lib .sp-card.dark p{color:#1F2033}
.lib .pt-tool{border-color:#D8D8E6;padding:22px 24px}
.lib .case-ex{border-left:1px solid #E3E3EE;background:#FBFBFD}
.lib .case-facts>div,.lib .dl-panel,.lib .vz-step,.lib .vz-col,.lib .vz-sym,.lib .vz-loc,.lib .vz-blk{background:#FAFAFD;border-color:#E3E3EE}
.lib .vz-col.on,.lib .vz-loc.eu,.lib .vz-blk.hi{background:#FFFFFF;border-color:#C9CAF5}
.lib .sp-facts>div{border-top:1px solid #D8D8E6;padding-top:12px}
.lib .sp-rows,.lib .sp-list>a:first-child,.lib .sp-list>div:first-child,.lib .vz-dl>div:first-child,.lib .pp-phases{border-top:1px solid #D8D8E6}
.lib .sp-row{padding:20px 0;grid-template-columns:36px minmax(0,1fr)}
.lib .sp-row.has-vis{grid-template-columns:36px minmax(0,1fr) 240px}
.lib .sp-row .num,.lib .sp-card .num,.lib .vz-step .num,.lib .sp-steps .n,.lib .pp-step .n{background:transparent;color:#5F6080;font-family:inherit;font-weight:600;font-size:15px;width:auto;height:auto;min-width:0;border-radius:0;display:block;padding:3px 0 0;box-shadow:none;border:0;line-height:1.3}
.lib .sp-steps{gap:0;background:transparent;border-top:1px solid #D8D8E6;border-left:0;border-right:0;border-bottom:0}
.lib .sp-steps li{min-height:0;padding:18px 20px 18px 0;border-bottom:1px solid #E3E3EE;background:transparent}
.lib .vz{padding:22px}
.lib .vz-step::after{background:#C9CAD6}
.lib .vz-col li::before{background:#B9BACB}.lib .vz-col.on li::before{background:#4F52E0}
.lib .cmp .hi{background:#F6F6FC}
.lib .cmp th.hi{background:#EEEEFC;color:#121226;border-radius:0;border-bottom-color:#C9CAF5}
.lib .cmp tbody tr:last-child td.hi{border-radius:0}
.lib .cmp td.hi b,.lib .cmp .hi strong{color:#121226}
.lib .hub-ico{background:#F3F3F7}
.lib .dl-flash.ok{background:#F6F6F9;border:1px solid #D8D8E6;color:#121226}
.lib .btn-dl,.lib .pt-btn,.lib .btn-p,.lib .pd-submit,.lib .lib-cta .btn-p{border-radius:6px}
.lib .share-li{border-radius:6px}
.lib .sp-cards,.lib .sp-facts,.lib .sp-rows,.lib .sp-steps,.lib .vz,.lib .sp-list,.lib .cmp-scroll,.lib .pp-phases,.lib .case-fig,.lib .pt-tool,.lib .dl-grid,.lib .vz-dl,.lib .vz-az,.lib .vz-scroll,.lib .bpmn-fig,.lib .case-exs,.lib .case-facts,.lib .stair,.lib .dl-inline,.lib .sp-note{margin-top:24px}
.lib .sp-split{margin-top:4px}
.lib .sp-split .sp-prose{max-width:none}
.lib .sp-split .sp-prose p{max-width:740px}
/* running-case text reads at full width; its three facts follow as one complete row */
.lib .sp-split:has(.case-facts){grid-template-columns:minmax(0,1fr);gap:20px}
.lib .sp-split .case-facts{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media (max-width:760px){.lib .sp-split .case-facts{grid-template-columns:minmax(0,1fr) !important}}
/* former dark bands: white, dark text, indigo where the band used lime */
.lib .sp-sec.dark{background:transparent;color:#1F2033}
.lib .sp-sec.dark .sp-kicker{color:#5F6080}
.lib .sp-sec.dark .sp-prose p,.lib .sp-sec.dark .sp-lead>p,.lib .sp-sec.dark .sp-prose ul,.lib .sp-sec.dark .sp-prose ol,.lib .sp-sec.dark .sp-row p,.lib .sp-sec.dark .stair span,.lib .sp-sec.dark .sp-related a span{color:#1F2033}
.lib .sp-sec.dark .sp-prose h2,.lib .sp-sec.dark .sp-prose h3,.lib .sp-sec.dark .sp-h2,.lib .sp-sec.dark .sp-row h3,.lib .sp-sec.dark .sp-prose strong,.lib .sp-sec.dark .stair b,.lib .sp-sec.dark .sp-key p,.lib .sp-sec.dark .sp-related a{color:#121226}
.lib .sp-sec.dark em.lime,.lib .lime-word{color:inherit;font-style:normal}
.lib .sp-sec.dark .sp-key{background:#F6F6F9;border-color:#E6E6EE}
.lib .sp-sec.dark .sp-rows{border-color:#D8D8E6}.lib .sp-sec.dark .sp-row{border-color:#E3E3EE}
.lib .sp-sec.dark .sp-related a{background:#FFFFFF;border-color:#E3E3EE}
.lib .sp-sec.dark .stair .st-bar{background:#E4E4FB}.lib .sp-sec.dark .stair>div.cur .st-bar{background:#4F52E0}
.lib .sp-sec.dark .btn-dl{background:#121226;color:#FFFFFF}
.lib .sp-sec.dark .dl-panel{background:#FAFAFD;border-color:#E3E3EE}
.lib .sp-sec.dark .ph{color:#5F6080 !important;border-color:#D8D8E6}
.lib .vz.dark{background:#FFFFFF;border-color:#E3E3EE;color:#1F2033}
.lib .vz.dark .vz-cap{color:#5F6080}.lib .vz.dark .vz-arr,.lib .vz-arr{color:#4F52E0}
.lib .vz-blk{color:#1F2033}.lib .vz-blk .vz-n{color:#5F6080}.lib .vz-blk span,.lib .vz-blk.hi span{color:#3F4060}.lib .vz-slots i{border-color:#C9CAD6}
.lib .vz-brace{color:#5F6080;font-family:inherit;letter-spacing:0;text-transform:none;font-size:13px}.lib .vz-brace span{border-top-color:#4F52E0}.lib .vz-brace span.off{border-color:#D8D8E6;color:#8A8BA8}
.lib .vz-slide::before{background:#C9CAF5}
/* closing block and previous/next, understated */
.lib-cta{background:#F6F6F9;color:#1F2033;border:1px solid #E3E3EE;border-radius:6px;padding:18px 20px}
.lib-cta b{color:#121226}
.lib-cta .btn-p{background:#121226;color:#FFFFFF;border-radius:6px;font-size:14px;font-weight:600;padding:10px 16px}
.lib-cta .btn-p:hover{background:#4F52E0;transform:none;box-shadow:none}
.lib-pn a{font-weight:500}
.lib .lib-otp-title{margin:0 0 8px}
/* tools and forms: neutral */
.lib .pt-btn{border-radius:6px}
.lib .pt-btn.ghost{border-color:#D8D8E6}
.lib .pt-out{border-top-color:#ECECF2}
.lib .pt-row input,.lib .pt-row select,.lib .pd-field input,.lib .pd-field select,.lib .pd-field textarea,.lib .pt-paste textarea{border-radius:6px}
.lib .pt-head .chip{color:#5F6080}
.lib .pt-matrix rect:first-of-type{fill:#FBFBFD}
.lib .pt-qs>li.sec,.lib .pt-qs>li::before,.lib .pt-rank>li::before{font-family:inherit;letter-spacing:0;text-transform:none;color:#5F6080}
.lib .pt-qs>li.sec{font-size:13px;font-weight:600}
.lib .pt-rank>li::before,.lib .pt-qs>li::before{font-weight:600;font-size:14px}
/* path overview track keeps its meaning (core / helps), in the one accent */
.lib .pp-track>div.helps{background:#EEEEFC;color:#2F31B8}
.lib .pp-track>div{border-radius:4px}
.lib .pp-key i{border-radius:3px}
@media (max-width:980px){.lib-head{padding:22px 16px 20px}.lib-main .sp-wrap{padding:0 16px}.lib-pn{padding:18px 16px}.lib-cta{margin:0 16px 26px}.lib-head h1{font-size:30px}.lib .sp-prose h2,.lib .sp-h2{font-size:23px}}

/* ── Library, middle ground (3 Nov 2026): a little brand character back, and columns only where position carries
   meaning. Headings closer to the display style, mono kickers in muted indigo, soft-indigo numerals, one tinted band
   per page at most (`.sp-sec.band`), the "In one sentence" box (`.sp-key-main`, set by build.py) with the lime edge,
   the closing block in navy with the lime button. Text-only card and fact grids become single-column hairline rows;
   grids keep their columns only when side by side carries meaning: navigation tiles (a.sp-card), "usual way / with
   patchley" pairs (.tag.sky), before/after (.vz-contrast), diagram beside text (.sp-split), legends, tables, matrices,
   the downloads catalogue, the path overview cards. ── */
.lib-head h1{font-size:38px;line-height:1.15;letter-spacing:-0.022em;font-weight:800}
.lib .sp-prose h2,.lib .sp-h2{font-size:26.5px;line-height:1.25;letter-spacing:-0.018em;font-weight:800}
.lib .sp-kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.03em;text-transform:none;color:#6B6ED1;font-weight:500;margin:0 0 4px}
.lib .sp-row .num,.lib .sp-card .num,.lib .vz-step .num,.lib .sp-steps .n,.lib .pp-step .n,.lib .pt-qs>li::before,.lib .pt-rank>li::before{color:#6B6ED1;font-family:'JetBrains Mono',monospace;font-size:14px}
.lib .sp-key{background:#F5F5FD;border-color:#E3E3F4}
.lib .sp-key .k{color:#6B6ED1;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.03em}
.lib .sp-key-main{border-left:4px solid #B8FF12;background:#F7F7FD}
.lib-main .sp-sec.band{background:#F7F7FC;border-top:1px solid #ECECF2;border-bottom:1px solid #ECECF2;padding-bottom:34px;margin-top:12px}
.lib-main .sp-sec.band+.sp-sec{border-top:0}
.lib-cta{background:#121226;color:#F1F1FA;border:0;padding:16px 20px;border-radius:8px}
.lib-cta b{color:#FFFFFF;font-size:16px}
.lib-cta .btn-p{background:#B8FF12;color:#121226}
.lib-cta .btn-p:hover{background:#CFFF5A}
.lib .lib-otp-title,.lib .pp-ph-n,.lib .case-ex .k,.lib .pt-head .chip{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.03em;color:#6B6ED1}
/* columns only where position carries meaning */
.lib .sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky)),.lib .sp-facts,.lib .case-facts,.lib .rp-who,.lib .case-exs{display:flex;flex-direction:column;gap:0;border-top:1px solid #D8D8E6;margin-top:22px;max-width:740px}
.lib .sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky))>.sp-card,.lib .sp-facts>div,.lib .case-facts>div,.lib .rp-who>div,.lib .case-exs>.case-ex{border:0;border-bottom:1px solid #E3E3EE;border-radius:0;padding:16px 0;background:transparent;max-width:none;gap:6px;margin:0}
.lib .sp-facts>div{padding-top:14px}
.lib .sp-facts b,.lib .case-facts b,.lib .rp-who b{font-size:17px;font-weight:600}
.lib .sp-facts span,.lib .case-facts span{margin-top:4px;font-size:16.5px;line-height:1.62}
.lib .case-ex .src{margin-top:8px}
.lib .sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky))>.sp-card .num{margin:0}
.lib .sp-steps,.lib-main .sp-steps:has(> :nth-child(4):last-child){grid-template-columns:1fr;max-width:740px}
.lib .sp-split:has(.case-facts) .case-facts{margin-top:8px}
@media (max-width:980px){.lib-head h1{font-size:31px}.lib .sp-prose h2,.lib .sp-h2{font-size:24px}}

/* ── Library, 3 Nov 2026 (3): text flows around a text panel; the "On this page" separator; boxes span the column ── */
/* text beside a facts/key/cards panel: the panel floats right beside kicker, heading and first paragraphs, the text takes
   the full column below it (build.py float_text_asides: aside, head, prose) */
.lib .sp-float{display:flow-root;margin-top:4px}
.lib .sp-float>.sp-float-aside{float:right;width:292px;margin:10px 0 22px 32px}   /* same top margin as the first paragraph: panel top on the first line of text */
.lib .sp-float>.sp-float-aside .sp-facts,.lib .sp-float>.sp-float-aside .sp-cards{margin-top:0;max-width:none}
.lib .sp-float>.sp-float-aside .sp-key{margin-top:0}
.lib .sp-float>.sp-prose,.lib .sp-float>.sp-prose>*{max-width:none}
.lib .sp-float>.sp-float-head h2{margin-bottom:4px;max-width:calc(100% - 324px)}   /* the heading stays in the text column; the space above the panel (292 + 32) stays empty */
@media (max-width:760px){.lib .sp-float>.sp-float-head h2{max-width:none}}
.lib-head h1{max-width:80%}   /* page headlines stop at 80% of the column */
@media (max-width:760px){.lib-head h1{max-width:none}}
.lib .sp-float>.sp-prose>p:first-child{margin-top:10px}
@media (max-width:760px){.lib .sp-float>.sp-float-aside{float:none;width:auto;margin:14px 0 6px}}
/* "On this page": a stretched column with the same 1px #E3E3EE line as the left panel; content, line and links get
   36px on each side of the line; the nav inside stays sticky. Only where the column exists (not below 1320px). */
.lib-art,.lib-art.notoc{grid-template-columns:minmax(0,980px) 256px;gap:0}
.lib-head{padding-right:36px}
.lib-main .sp-wrap{padding-right:36px}
.lib-pn{padding-right:36px}
.lib-cta{margin-right:36px}
.lib-otp-col{align-self:stretch;border-left:1px solid #E3E3EE;padding-left:36px;min-width:0}
.lib-otp{position:sticky;top:100px;padding:34px 16px 20px 0}
@media (max-width:1320px){.lib-art,.lib-art.notoc{grid-template-columns:minmax(0,980px)}.lib-otp-col{display:none}}
/* every box or panel with a border or a background spans the content column; the text inside stays at reading width */
.lib .sp-wrap>.sp-key,.lib .sp-key,.lib .sp-wrap>.sp-prose>.sp-key,.lib .sp-wrap>.sp-prose>.dl-panel,.lib .dl-panel,.lib .sp-note,.lib .sp-wrap>.sp-prose>.sp-note,.lib .rp-toc,.lib .sp-wrap>.sp-prose>.rp-toc,.lib .dl-inline,.lib .sp-wrap>.sp-prose>.vz,.lib .sp-wrap>.sp-prose>.bpmn-fig,.lib .sp-wrap>.sp-prose>.case-fig,.lib .sp-wrap>.sp-prose>.cmp-scroll,.lib .sp-wrap>.sp-prose>.pt-tool{max-width:none}
.lib .sp-key p,.lib .sp-note>span,.lib .rp-toc>*,.lib .dl-panel>div{max-width:740px}
.lib .dl-panel{justify-content:space-between}
.lib .dl-panel .btn-dl{margin-left:auto}
/* hairline row lists span the column like the figures; the text in them stays at reading width */
.lib .sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky)),.lib .sp-facts,.lib .case-facts,.lib .rp-who,.lib .case-exs,.lib .sp-steps{max-width:none}
.lib .sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky))>.sp-card>*,.lib .sp-facts>div>*,.lib .case-facts>div>*,.lib .rp-who>div>*,.lib .case-exs>.case-ex>*,.lib .sp-steps li>*{max-width:740px}
.lib .sp-float>.sp-float-aside .sp-facts>div>*{max-width:none}
/* section dividers at content width (the wrap carries the hairline; the section keeps no horizontal padding), numbered
   step rows span the column; the band still spans the whole document column and ends at the separator line */
.lib-main .sp-sec{padding:0 0 12px}
.lib-main .sp-wrap{padding:34px 0 0;margin:0 36px 0 52px}
/* 4 Nov 2026: section lines run the whole document column, like the line under the page head; a list that ends a section
   drops its last line, so the section line never follows another line */
.lib-main .sp-sec+.sp-sec{border-top:1px solid #E3E3EE}
.lib-main .sp-sec.band{padding:0 0 34px}
.lib-main .sp-sec.band+.sp-sec{border-top:0}
.lib-main .sp-wrap>:is(.sp-rows,.sp-list,.vz-dl,.pp-phases,.sp-facts,.case-facts,.rp-who,.case-exs,.sp-steps,.ind-rows):last-child>:last-child,
.lib-main .sp-wrap>.sp-prose:last-child>:is(.sp-rows,.sp-list,.vz-dl,.pp-phases,.sp-facts,.case-facts,.rp-who,.case-exs,.sp-steps,.ind-rows):last-child>:last-child,
.lib-main .sp-wrap>.sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky)):last-child>.sp-card:last-child,
.lib-main .sp-float-aside>.sp-facts>:last-child,
.lib-main .sp-float-aside>.sp-cards:not(:has(> a.sp-card)):not(:has(.tag.sky))>.sp-card:last-child,
.lib-main .sp-wrap>.sp-split:last-child>.sp-prose>.sp-facts:last-child>:last-child,
.lib-main .sp-rows:has(+.sp-facts)>:last-child{border-bottom:0}
/* a box, figure or table that ends a section keeps the same air above the section line as text does */
.lib-main .sp-wrap>:is(.sp-key,.sp-note,.dl-panel,.dl-inline,.dl-grid,.rp-toc,.vz,.bpmn-fig,.case-fig,.cmp-scroll,.pt-tool,.lcy,.pp-key,.vz-cap,.fm-legend,.sp-lead,.sp-cards:has(> a.sp-card),.sp-cards:has(.tag.sky)):last-child{margin-bottom:20px}
.lib-main .sp-steps,.lib-main .sp-steps:has(> :nth-child(4):last-child){max-width:none}
@media (max-width:980px){.lib-main .sp-wrap{padding:30px 0 0;margin:0 16px}}
/* comparison tables in the library: fixed column widths, long words wrap or hyphenate, so five columns fit the column
   at 1440 without sideways scrolling (German compound words included) */
.lib .cmp{table-layout:fixed;min-width:0;width:100%}
.lib .cmp th,.lib .cmp td{overflow-wrap:anywhere;hyphens:auto;padding:12px 12px;font-size:14px}
.lib .cmp td:first-child{width:19%}
.lib .cmp td small{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:#8A8BA8;font-weight:400}
.lib .cmp td:first-child a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
@media (max-width:760px){.lib .cmp{min-width:640px}}


/* 4 Nov 2026: feature matrix, value chain, source line, legend strip */
.lib .cmp.fm th,.lib .cmp.fm td{padding:10px 6px;font-size:13.5px;hyphens:manual;overflow-wrap:normal;vertical-align:middle}
.lib .cmp.fm th:first-child{width:22%}
.lib .cmp.fm td.m{text-align:center;font-size:17px;line-height:1;white-space:nowrap;font-family:"Segoe UI Symbol","Segoe UI",system-ui,sans-serif}
.lib .cmp.fm td.m-y{color:#121226}.lib .cmp.fm td.m-p{color:#4F52E0}.lib .cmp.fm td.m-n{color:#B0B1C4}
.lib .cmp.fm th:first-child,.lib .cmp.fm td:first-child{position:sticky;left:0;z-index:1;background:#fff}
.lib .cmp.fm thead th:first-child{background:#F6F6F9}
.lib .cmp.fm tr.hi td:first-child{background:#E9E9FC}
.lib .cmp.fm tr.hi td{background:#E9E9FC}
.lib .cmp.fm .own{display:inline-block;margin-left:6px;font-size:12px;color:#5F6080;font-weight:500;white-space:nowrap}
.lib .fm-legend{margin-top:12px;font-size:13px;line-height:1.5;color:#5F6080}
.lib .sp-srcline{margin:0;font-size:14px;line-height:1.5;color:#5F6080}
.lib .sp-srcline+.sp-facts{margin-top:24px}
.lcy{margin-top:24px}
.lcy-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px 3px}
.lcy-st{grid-column:var(--i);grid-row:1;background:#F6F6F9;color:#1F2033;font-size:12.5px;font-weight:600;padding:9px 6px 9px 14px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,9px 50%);text-align:center;line-height:1.25;display:flex;align-items:center;justify-content:center}
.lcy-st:first-child{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);padding-left:6px}
.lcy-bar{grid-column:var(--a) / var(--b);height:12px;border-radius:3px;align-self:center}
.lcy-bar.cat{grid-row:2;background:#C9CAF5}
.lcy-bar.pl{grid-row:3;background:#4F52E0}
.lcy-bar.pl.soon{background:transparent;border:2px dashed #4F52E0;height:8px}
.lcy-key{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13.5px;line-height:1.5;color:#5F6080}
.lcy-key span{display:flex;align-items:flex-start;gap:10px}
.lcy-key i{flex:none;width:20px;height:10px;border-radius:2px;margin-top:5px;background:#C9CAF5}
.lcy-key i.pl{background:#4F52E0}.lcy-key i.pl.soon{background:transparent;border:2px dashed #4F52E0;height:6px}
@media (max-width:700px){
.lcy-grid{grid-template-columns:minmax(0,1fr) 16px 16px;grid-template-rows:repeat(8,auto);gap:4px 10px}
.lcy-st{grid-row:var(--i);grid-column:1;clip-path:none;text-align:left;justify-content:flex-start;padding:9px 12px;border-radius:4px}
.lcy-st:first-child{clip-path:none;padding-left:12px}
.lcy-bar{grid-row:var(--a) / var(--b);height:auto;width:12px;align-self:stretch;border-radius:3px}
.lcy-bar.cat{grid-column:2}.lcy-bar.pl{grid-column:3}.lcy-bar.pl.soon{width:8px;height:auto}
}
.vz-legend{grid-template-columns:repeat(4,minmax(0,1fr))}
.vz-legend+.vz-add{margin-top:12px}
.vz-sym.vz-add{flex-direction:row;align-items:center;text-align:left;min-height:0;gap:20px;padding:16px 18px;border-color:#1D4ED8;background:#FFFFFF}
.vz-sym.vz-add .shb{flex:none;width:80px}
.vz-sym.vz-add>div:last-child{display:flex;flex-direction:column;gap:4px}
.vz-sym.vz-add em{font-style:normal;font-size:12.5px;color:#1D4ED8;font-weight:600}
.lib .vz-sym.vz-add span{display:block}
@media (max-width:760px){.vz-legend{grid-template-columns:repeat(2,minmax(0,1fr))}.vz-sym.vz-add{flex-direction:column;align-items:flex-start;gap:10px}}
.lib .lib-head h1,.lib .lib-pn a,.lib .lib-pn a b,.lib .lib-pn a span{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:1200px){.lib .cmp.fm th,.lib .cmp.fm td{padding:10px 4px;font-size:13px}}
.lib .sp-card h3,.lib .sp-facts>div>b{overflow-wrap:anywhere;hyphens:auto}
.lib .cmp.fm th{overflow-wrap:anywhere;hyphens:auto}

/* ── Library overview, 6 Nov 2026: the right column holds a sticky "book a demo" card (build.py book_card, BOOK_CARD_PAGES)
   in the same .lib-otp-col as "On this page": same separator line, 220px, sticky under the top bar, hidden below 1320px.
   Quiet: the kicker in the mono style of the "On this page" title, a flat box, the navy button of the library, one
   underlined text link to Downloads & reports. ── */
.lib-book{display:block;font-size:14px;line-height:1.5;color:#45466B}   /* keeps the list's 16px right padding: at 1321-1504px the column ends at the window edge */
.lib-book .lib-otp-title{margin:0 0 10px}
.lib-book-t{margin:0;font-size:15.5px;line-height:1.4;font-weight:600;color:#121226;overflow-wrap:anywhere;text-wrap:pretty}   /* no auto hyphens: "30-Minuten-Gespräch" breaks at its own hyphens */
.lib-book-s{margin:8px 0 0;font-size:14px;line-height:1.5;color:#45466B}
.lib-book .btn-p{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;margin-top:16px;padding:10px 8px;background:#121226;color:#FFFFFF;font-size:13.5px;font-weight:600;border-radius:6px;text-align:center;white-space:nowrap}
.lib-book .btn-p:hover{background:#4F52E0;transform:none;box-shadow:none}
.lib-book-dl{display:block;margin-top:14px;font-size:13px;line-height:1.5;color:#5F6080;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(18,18,38,.3)}
.lib-book-dl:hover{color:#4F52E0;text-decoration-color:currentColor}

/* Step sets as a 2x2 matrix (6 Nov 2026, decision: no row of four). Every .vz-flow (4 or 5 steps) and every sales-page
   .sp-steps (4 steps) is two columns at every width above the phone breakpoint; a set of five puts the fifth step
   full-width under the matrix (a deliberate band, laid out in a row), so no row is ever half empty. Arrows only between
   the two steps of one row. Library .sp-steps keep their single-column rows (3 Nov decision). Phones: one column. */
.vz-flow,.vz-flow.five{grid-template-columns:repeat(2,minmax(0,1fr))}
.vz-flow.five>.vz-step:nth-child(5){grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:18px}
.vz-flow.five>.vz-step:nth-child(5)>b{flex:0 0 auto}
.vz-flow.five>.vz-step:nth-child(5)>span:not(.num):not(.soon){flex:1 1 320px}
.vz-flow.five>.vz-step:nth-child(5)>.vz-join{margin-top:0}
.vz-step:nth-child(even)::after,.vz-flow.arrows .vz-step:nth-child(even)::before,
.vz-flow.five>.vz-step:nth-child(5)::after,.vz-flow.five>.vz-step:nth-child(5)::before{display:none}
.sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.vz-flow,.vz-flow.five{grid-template-columns:1fr}.vz-flow.five>.vz-step:nth-child(5){flex-direction:column;align-items:stretch}
  .vz-flow.five>.vz-step:nth-child(5)>*,.vz-flow.five>.vz-step:nth-child(5)>span:not(.num):not(.soon){flex:none}}   /* the band's 320px flex-basis would otherwise become a 320px height in the column */
@media (max-width:560px){.sp-steps{grid-template-columns:1fr}.sp-steps li{min-height:0}}
/* The one exception (6 Nov 2026, user decision): the Pilot's four steps (set-up, first process, handover, decision) read as one
   sequence in a row of four on desktop; 2x2 below 980px, one column on phones (the rule above). */
.sp-steps.row4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.sp-steps.row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sp-steps.row4{grid-template-columns:1fr}}   /* stacked, the 200px card height only leaves empty space */

/* Blog articles (markdown): a heading that follows a paragraph, a list or a key box gets its own space above; the
   library's h2 rule (margin-top 0) was written for the kicker + h2 section lead, which articles do not use. */
.lib article.sp-prose p+h2,.lib article.sp-prose ul+h2,.lib article.sp-prose ol+h2,.lib article.sp-prose div+h2{margin-top:44px}
.lib article.sp-prose p+h3,.lib article.sp-prose ul+h3,.lib article.sp-prose ol+h3,.lib article.sp-prose div+h3{margin-top:34px}
/* a key box keeps the same air below it as above it (22px) when text follows */
.lib article.sp-prose .sp-key+p,.lib article.sp-prose .sp-key+ul,.lib article.sp-prose .sp-key+ol{margin-top:22px}

/* ───────── Pricing page: savings calculator (7 Nov 2026; markup from build.py calc_html, behaviour in tool-calc.js) ─────────
   Left: the scenario (inputs, hidden until the script shows them; without JavaScript the static scenario line stands in);
   right: the result card (big saving, without/with table). Below: hours per activity as paired bars, the assumptions. */
.pc{margin-top:40px}
.pc-nojs{margin:0 0 16px;border:1px solid #E3E3EE;background:#FFFFFF;border-radius:12px;padding:14px 16px;font-size:14.5px;color:#3F4060}
.pc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start}
.pc-left{background:#FFFFFF;border:1px solid #E3E3EE;border-radius:16px;padding:24px 26px}
.pc-static{font-size:15.5px;line-height:1.6;color:#3F4060}
.pc-in{margin:0}
.pc-g{border:0;margin:0;padding:0;min-width:0}
.pc-g+.pc-g{margin-top:22px;padding-top:20px;border-top:1px solid #EEEEF4}
.pc-g>legend{padding:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5F6080}
.pc-f{margin-top:14px}
.pc-fh{display:flex;justify-content:space-between;align-items:center;gap:14px}
.pc-fh label{font-size:14.5px;font-weight:600;line-height:1.35;color:#121226}
.pc-num{font:inherit;font-size:15px;width:84px;flex:none;padding:8px 10px;min-height:40px;box-sizing:border-box;border:1px solid #D8D8E6;border-radius:8px;background:#FFFFFF;color:#121226;text-align:right;font-variant-numeric:tabular-nums}
.pc-num:focus{outline:2px solid #4F52E0;outline-offset:1px;border-color:#4F52E0}
.pc-num:disabled{background:#F7F7FB;color:#3F4060}
.pc-num-w{width:104px}
.pc-range{display:block;width:100%;margin:8px 0 0;height:28px;accent-color:#4F52E0;cursor:pointer}
.pc-range:focus-visible{outline:2px solid #4F52E0;outline-offset:2px;border-radius:4px}
.pc-seg{border:0;margin:16px 0 0;padding:0;min-width:0}
.pc-seg-l{padding:0;font-size:14.5px;font-weight:600;color:#121226}
.pc-seg-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;border:1px solid #D8D8E6;border-radius:10px;overflow:hidden}
.pc-seg-o{position:relative;display:block}
.pc-seg-o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pc-seg-o span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 6px;font-size:14.5px;font-weight:600;color:#3F4060;text-align:center}
.pc-seg-o+.pc-seg-o span{border-left:1px solid #D8D8E6}
.pc-seg-o input:checked+span{background:#121226;color:#FFFFFF}
.pc-seg-o input:focus-visible+span{outline:2px solid #4F52E0;outline-offset:-3px}
.pc-hint{margin-top:8px;font-size:13px;line-height:1.45;color:#5F6080}
.pc-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14.5px;line-height:1.45;color:#121226;cursor:pointer}
.pc-check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:#4F52E0}
.pc-out{background:#121226;color:#FFFFFF;border-radius:16px;padding:28px 30px;background-image:radial-gradient(ellipse 70% 60% at 100% 0%,rgba(99,102,242,.32),rgba(18,18,38,0) 70%)}
.pc-big-k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#B8FF12}
.pc-big-n{margin-top:10px;font-size:clamp(46px,5.6vw,80px);font-weight:800;line-height:1;letter-spacing:-0.045em;white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-big-s{margin-top:12px;font-size:18px;line-height:1.4;color:#FFFFFF}
.pc-big-s b{color:#B8FF12;font-weight:700}
.pc-big-f{margin-top:6px;font-size:14px;line-height:1.45;color:#A8A9C8}
.pc-big-f b{color:#FFFFFF;font-weight:700}
.pc-cmp{width:100%;margin-top:24px;border-collapse:collapse;font-size:15px;line-height:1.35}
.pc-cmp th,.pc-cmp td{padding:12px 10px;border-top:1px solid rgba(255,255,255,.12);text-align:right;vertical-align:baseline;font-variant-numeric:tabular-nums}
.pc-cmp thead th,.pc-cmp thead td{border-top:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#A8A9C8}
.pc-cmp tbody th{text-align:left;font-weight:500;color:#C9CAE6;padding-left:0}
.pc-cmp tbody td{color:#FFFFFF;font-weight:600;white-space:nowrap}
.pc-cmp .hi{background:rgba(99,102,242,.22)}
.pc-cmp thead .hi{color:#B8FF12;border-radius:8px 8px 0 0}
.pc-cmp tbody td.hi{color:#B8FF12}
.pc-bars{margin-top:24px;background:#FFFFFF;border:1px solid #E3E3EE;border-radius:16px;padding:24px 26px}
.pc-bars-h h3{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.pc-bars-h p{margin-top:4px;font-size:14px;line-height:1.5;color:#5F6080}
.pc-bars-h .pc-leg{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 6px;font-size:13px;color:#3F4060}
.pc-leg-h::before,.pc-leg-w::before{content:"";display:inline-block;width:12px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px;background:#B9BACF}
.pc-leg-w::before{background:#4F52E0}
.pc-bar{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) 112px;gap:18px;align-items:center;padding:11px 0;border-top:1px solid #EEEEF4}
.pc-bar-l{font-size:14.5px;font-weight:600;color:#121226}
.pc-bar-v{display:flex;flex-direction:column;gap:4px;min-width:0}
.pc-b{display:block;height:10px;border-radius:5px;background:#B9BACF;max-width:100%;transition:width .35s ease}
.pc-b-w{background:#4F52E0}
.pc-bar-n{display:flex;flex-direction:column;align-items:flex-end;font-size:13.5px;line-height:1.3;font-variant-numeric:tabular-nums;color:#5F6080;white-space:nowrap}
.pc-bar-n [data-o=bw]{color:#4F52E0;font-weight:600}
.pc-bar.off .pc-bar-l{color:#8A8BA8}
.pc-how{margin-top:16px;background:#FFFFFF;border:1px solid #E3E3EE;border-radius:16px}
.pc-how>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 26px;font-size:16px;font-weight:700;color:#121226;border-radius:16px}
.pc-how>summary::-webkit-details-marker{display:none}
.pc-how>summary::after{content:"+";font-size:22px;font-weight:400;line-height:1;color:#4F52E0}
.pc-how[open]>summary::after{content:"\2212"}
.pc-how>summary:focus-visible{outline:2px solid #4F52E0;outline-offset:2px}
.pc-how-b{padding:0 26px 24px}
.pc-how-b>p{font-size:15px;line-height:1.6;color:#3F4060;max-width:78ch}
.pc-how .cmp-scroll{margin-top:16px}
.pc-at td{font-size:14px}
.pc-at tbody th{font-family:'Inter',system-ui,sans-serif;font-size:14px;letter-spacing:0;text-transform:none;font-weight:700;color:#121226;background:#FFFFFF;border-bottom-color:#E3E3EE}
.pc-at td .pc-num{width:78px}
.pc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.pc-facts>div{border:1px solid #E3E3EE;border-radius:10px;padding:14px 16px}
.pc-facts b{display:block;font-size:14px;font-weight:700;color:#121226}
.pc-facts>div>span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:#3F4060}
.pc-xl{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;font-size:13.5px;line-height:1.35;color:#3F4060}
.pc-reset-row{margin-top:16px}
.pc-reset{font:inherit;font-size:14.5px;font-weight:600;color:#4F52E0;background:#FFFFFF;border:1px solid #4F52E0;border-radius:10px;min-height:42px;padding:0 16px;cursor:pointer}
.pc-reset:hover{background:#EEEEFC}
.pc-reset[hidden]{display:none}
.pc-foot{margin-top:14px;font-size:13px;line-height:1.5;color:#5F6080;max-width:96ch}
.pc-req{margin-top:28px}
.pr-scn{margin-top:12px}
@media (min-width:981px){.pc-out{position:sticky;top:96px}}   /* the result stays in view while the inputs are changed */
@media (max-width:980px){.pc-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .pc-left,.pc-out,.pc-bars{padding:20px 18px}
  .pc-how>summary{padding:16px 18px}
  .pc-how-b{padding:0 18px 20px}
  .pc-bar{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .pc-bar-v{grid-column:1 / -1;grid-row:2}
  .pc-bar-n{flex-direction:row;gap:10px}
  .pc-facts{grid-template-columns:minmax(0,1fr)}
  .pc-cmp{font-size:14px}
  .pc-cmp th,.pc-cmp td{padding:10px 6px}
}
@media (prefers-reduced-motion:reduce){.pc-b{transition:none}}
/* the Pricing page's compact title row (8 Nov 2026): no big hero; eyebrow, a one-line h1 and the intro in the width of the
   input column (so the intro wraps there), the calculator right below so the result is in view on load; "Request pricing"
   is the indigo button in the dark result card, right under the saving figure */
.sp-top.pc-top{background:#F5F5FA;color:#121226;background-image:none}
.sp-hero.pc-hero{padding:56px 32px 0}
.pc-hero-t{display:flex;flex-direction:column;gap:14px;min-width:0;width:calc((100% - 24px) * 5 / 11)}
.pc-hero .sp-eyebrow{color:#4F52E0;font-size:11px}
.sp-hero.pc-hero h1{font-size:32px;line-height:1.15;letter-spacing:-0.025em;max-width:none;color:#121226;white-space:nowrap}
.pc-hero .sp-intro{font-size:15.5px;line-height:1.5;color:#3F4060;max-width:none}
.sp-sec.pc-sec{padding-top:40px}
.pc-sec .pc{margin-top:0}
.pc-big-cta{margin-top:18px}
.pc-big-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:10px;background:#4F52E0;color:#FFFFFF;font-weight:600;font-size:15.5px;text-decoration:none;box-sizing:border-box;transition:background .15s ease}
.pc-big-btn:hover{background:#6366F1}
.pc-big-btn:focus-visible{outline:3px solid #B8FF12;outline-offset:2px}
@media (max-width:980px){.pc-grid .pc-out{order:-1}.pc-hero-t{width:auto}}   /* phones and tablets: the result first, the inputs below it */
@media (max-width:760px){
  .sp-hero.pc-hero{padding:36px 16px 0}
  .sp-hero.pc-hero h1{font-size:26px;white-space:normal}
  .pc-big-btn{display:flex;justify-content:center}
  .sp-sec.pc-sec{padding-top:16px}
}

/* ══ Downloads catalogue (8 Nov 2026): the two lead documents side by side, then the reports in rows of three ══ */
.dl-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl-grid+.dl-grid,.lib .dl-grid+.dl-grid{margin-top:16px}
@media (max-width:760px){.dl-grid.two{grid-template-columns:1fr}}

/* ══ "What you have in hand" on the Pilot pages (8 Nov 2026, #results): a checklist table of the ten results with role
   tags (Management navy, Staff lime, Moderator soft indigo), a legend and the typical occasions (no PDF link here: the
   checklist is requested in Library › Downloads only, user decision 8 Nov 2026).
   Table on desktop; below 760px every row is a stacked card (no horizontal scroll). ══ */
.rs-wrap{margin-top:36px;background:#FFFFFF;border:1px solid #E3E3EE;border-radius:16px;padding:8px 28px}
.rs{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.rs th{padding:16px 12px 12px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5F6080;border-bottom:2px solid #121226}
.rs td{padding:16px 12px;vertical-align:top;border-bottom:1px solid #E3E3EE;color:#3F4060}
.rs tr:last-child td{border-bottom:0}
.rs .rs-c{width:28px;padding-right:0}
.rs-box{display:inline-block;width:18px;height:18px;margin-top:2px;border:1.5px solid #4F52E0;border-radius:5px;background:#FFFFFF}
.rs .rs-r{width:30%;font-weight:700;color:#121226}
.rs .rs-w{white-space:nowrap;width:1%}
.rs-tag{display:inline-block;margin:0 6px 4px 0;padding:3px 8px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.04em;line-height:1.4;color:#4F52E0;background:#EEEEFC}
.rs-tag.gf{color:#FFFFFF;background:#121226}
.rs-tag.ma{color:#121226;background:#B8FF12}
.rs-legend{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:14px;color:#3F4060}
.rs-legend>span{display:inline-flex;align-items:baseline;gap:8px}
.rs-legend .rs-tag{margin:0}
.rs-occ{margin-top:56px}
.rs-occ h3{margin-top:10px}
.rs-occ+.sp-facts{margin-top:24px}
@media (max-width:760px){
  .rs-wrap{padding:4px 16px}
  .rs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rs,.rs tbody,.rs tr,.rs td{display:block;width:auto}
  .rs tr{position:relative;padding:16px 0 16px 30px;border-bottom:1px solid #E3E3EE}
  .rs tr:last-child{border-bottom:0}
  .rs td{padding:0;border:0}
  .rs .rs-c{position:absolute;left:0;top:16px;width:auto}
  .rs .rs-r{width:auto}
  .rs td+td{margin-top:6px}
  .rs .rs-w{white-space:normal;width:auto;margin-top:10px}
}

/* Pilot hero: 'Request a proposal' is a <button> (opens the proposal dialog); drop the UA border so it matches the link buttons (8 Nov 2026) */
.sp-ctas button.btn-p{border:0;font-family:inherit;cursor:pointer}

/* Prioritisation tool output (8 Nov 2026): the 2x2 matrix first across the full width, then the ranked findings in two columns */
.pt-grid2{grid-template-columns:1fr}
.pt-matrix svg{max-height:360px}
@media (min-width:760px){.pt-rank{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}}
.demo-ctas button.btn-p{border:0;font-family:inherit;cursor:pointer}
.demo-ctas button.btn-p{border:0;font-family:inherit;cursor:pointer}
@media (min-width:760px){.pt-rank>li{grid-template-columns:28px minmax(0,1fr);align-content:start}.pt-rank>li>.pt-bucket{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}}

/* ══ Platform product pages (8 Nov 2026): Diagrams, Analyses, Decks (sales pages, kind "product"). The homepage's vpanel/vcard
   look with more drill-down: abstract inline SVG diagrams (.pf-d, text-free), zoom cards, version strips, slide thumbnails.
   All decorative (aria-hidden), the text carries the meaning. Base state = fully drawn; site.js adds .rv/.in to each block on
   scroll, and only then the parts (.pf-a fade, .pf-e draw along their length) play in flow order (--i). Without JavaScript,
   with reduced motion or above the fold: static. ══ */
.vpanel.pf-vp{min-height:0;height:auto;padding:32px 0 32px 32px;gap:14px}
.pf-card{gap:14px;padding:22px 24px}
.pf-card .vlabel{font-size:14px}
.pf-card .vicon{background:#121226}
.pf-card .vicon.ind{background:#4F52E0}
.pf-mono{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6B6C8A}
/* the abstract BPMN vocabulary */
.pf-d{display:block;width:100%;height:auto;overflow:visible}
.pf-d.pf-crop{overflow:hidden}
.pf-d .pf-ln{fill:#FFFFFF;stroke:#E3E3EE;stroke-width:1}
.pf-d .pf-ln-ai{fill:#F4F4FE;stroke:#D4D5F7}
.pf-d .pf-hd{fill:none;stroke:#E3E3EE;stroke-width:1}
.pf-d .pf-hb{fill:#D8D8E6}
.pf-d .pf-hb-ai{fill:#4F52E0}
.pf-d .pf-t,.pf-d .pf-g{fill:#FFFFFF;stroke:#3F4060;stroke-width:1.2}
.pf-d .pf-t-ctl{fill:#1D4ED8;stroke:#1D4ED8}
.pf-d .pf-t-ai{fill:#EEEEFC;stroke:#4F52E0;stroke-width:1.4}
.pf-d .pf-t-new{fill:#F0FDF4;stroke:#16A34A;stroke-width:1.8}
.pf-d .pf-ph{fill:#C9CAD9}
.pf-d .pf-ph-ctl{fill:#BFD0FA}
.pf-d .pf-ph-ai{fill:#8F92F0}
.pf-d .pf-ph-new{fill:#86EFAC}
.pf-d .pf-ev{fill:#FFFFFF;stroke:#3F4060;stroke-width:1.2}
.pf-d .pf-end{fill:#FFFFFF;stroke:#121226;stroke-width:2.4}
.pf-d .pf-e{fill:none;stroke:#8A8BA8;stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pf-d .pf-e-chg{stroke:#D97706;stroke-width:1.8}
.pf-d .pf-ah{fill:#8A8BA8}
.pf-d .pf-ah-chg{fill:#D97706}
.pf-d .pf-hl{fill:none;stroke:#4F52E0;stroke-width:2;stroke-dasharray:4 3}
.pf-d .pf-ok{fill:#B8FF12;stroke:#121226;stroke-width:1.2}
.pf-d .pf-okm{fill:none;stroke:#121226;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* chips inside the visuals */
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-chip{font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.3;color:#3F4060;background:#FFFFFF;border:1px solid #E3E3EE;border-radius:5px;padding:4px 7px;white-space:nowrap}
.pf-chip.on{background:#EEEEFC;border-color:#C9CAF5;color:#3A3DB8}
.pf-chip.ai{background:#EEEEFC;border-color:#4F52E0;color:#3A3DB8}
.pf-chip.ok{background:#F4FFDC;border-color:#9BD80F;color:#3B5200}
.pf-chip.new{background:#F0FDF4;border-color:#86EFAC;color:#15803D}
.pf-chip.chg{background:#FFFBEB;border-color:#FCD34D;color:#B45309}
.pf-chip.ctl{background:#EFF4FF;border-color:#BFD0FA;color:#1D4ED8}
.pf-down{display:block;width:1px;height:18px;margin:0 auto;background:#C9CAD9;position:relative}
.pf-down::after{content:"";position:absolute;left:-4px;bottom:-1px;border:4.5px solid transparent;border-top:6px solid #C9CAD9;border-bottom:0}
/* zoom card: one step up close, pointing at its place in the diagram above (--pt = horizontal position of the step) */
.pf-zoom{position:relative;margin-top:4px;border:1px solid #D4D5F7;border-radius:10px;background:#FFFFFF;padding:14px 16px;box-shadow:0 12px 28px rgba(79,82,224,.10)}
.pf-zoom::before{content:"";position:absolute;top:-7px;left:var(--pt,46%);width:12px;height:12px;background:#FFFFFF;border-left:1px solid #D4D5F7;border-top:1px solid #D4D5F7;transform:translateX(-50%) rotate(45deg)}
.pf-zt{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #EDEDF3}
.pf-zbox{flex:none;width:40px;height:20px;border-radius:5px;border:1.5px solid #3F4060;background:#FFFFFF;box-sizing:border-box}
.pf-zbox.ctl{background:#1D4ED8;border-color:#1D4ED8}
.pf-zt .bar{flex:1;margin:0;max-width:60%}
.pf-f{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #F1F1F7}
.pf-f:last-child{border-bottom:0;padding-bottom:0}
.pf-f .bar{margin:0}
.pf-k{font-size:12.5px;font-weight:600;color:#3F4060}
.pf-sw{display:flex;align-items:center;gap:8px}
.pf-sw .bar{flex:1}
.pf-sq{width:10px;height:10px;border-radius:2px;background:#1D4ED8;flex:none}
/* version strip v1 -> v2 -> v3 */
.pf-say{display:flex;align-items:center;gap:10px;border:1px solid #E3E3EE;border-radius:10px;padding:10px 12px;background:#FBFBFE}
.pf-say .bar{margin:0;flex:1}
.pf-mic{flex:none;width:24px;height:24px;border-radius:50%;background:#4F52E0;display:inline-flex;align-items:center;justify-content:center}
.pf-vers{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center;gap:8px}
.pf-ver{border:1px solid #E3E3EE;border-radius:8px;padding:8px;background:#FFFFFF;display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-ver.cur{border-color:#4F52E0;box-shadow:0 0 0 3px #EEEEFC}
.pf-ver.old{opacity:.6}
.pf-arr{height:1px;background:#C9CAD9;position:relative}
.pf-arr::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:6px solid #C9CAD9;border-right:0}
.pf-exit{margin-top:28px}
/* analyses: the sync rows, insight tiles, the spreadsheet */
.pf-sync{display:flex;flex-direction:column;gap:8px}
.pf-sr{display:grid;grid-template-columns:56px 18px minmax(0,1fr);align-items:center;gap:8px}
.pf-sr .pf-zbox{width:56px;height:22px}
.pf-sr .pf-zbox.new{border-color:#16A34A;background:#F0FDF4;border-width:1.8px}
.pf-sr>i{display:block;height:1px;background:#C9CAD9}
.pf-row{display:flex;align-items:center;gap:8px;border:1px solid #EDEDF3;border-radius:6px;padding:7px 9px;min-width:0}
.pf-row>div{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-row .bar{margin:0;height:6px}
.pf-sr.new .pf-row{border-color:#86EFAC;background:#F7FEF9}
.pf-sr.kept .pf-row{border-color:#C9CAF5;background:#F7F7FE}
.pf-pen{flex:none;width:18px;height:18px;border-radius:5px;background:#4F52E0;display:inline-flex;align-items:center;justify-content:center}
.pf-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pf-tile{border:1px solid #E3E3EE;border-radius:8px;padding:10px;background:#FFFFFF;display:flex;flex-direction:column;gap:8px;min-height:96px;box-sizing:border-box;min-width:0}
.pf-tile.on{border-color:#4F52E0;box-shadow:0 0 0 3px #EEEEFC}
.pf-kf{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:4px}
.pf-kf>i{display:block;height:6px;border-radius:3px;background:#E3E3EE}
.pf-kf>i.h{background:#C9CAF5}
.pf-kf>i.v{background:#8F92F0}
.pf-hm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.pf-hm>i{display:block;height:12px;border-radius:2px;background:#EEEEFC}
.pf-hm>i.m{background:#C9CAF5}.pf-hm>i.s{background:#8F92F0}.pf-hm>i.x{background:#4F52E0}
.pf-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-cols>div{display:flex;flex-direction:column;gap:4px;border-top:2px solid #121226;padding-top:6px}
.pf-cols>div+div{border-top-color:#4F52E0}
.pf-cols i{display:block;height:6px;border-radius:3px;background:#E3E3EE}
.pf-sheet{border:1px solid #D8D8E6;border-radius:8px;overflow:hidden;background:#FFFFFF}
.pf-sheet-g{display:grid;grid-template-columns:22px minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.pf-sheet-g>span{height:22px;border-right:1px solid #EDEDF3;border-bottom:1px solid #EDEDF3;display:flex;align-items:center;padding:0 6px;box-sizing:border-box;min-width:0}
.pf-sheet-g>span:nth-child(5n){border-right:0}
.pf-sheet-g>span.hd,.pf-sheet-g>span.n{background:#F3F3FA}
.pf-sheet-g>span.n{justify-content:center}
.pf-sheet-g>span>i{display:block;height:6px;width:100%;border-radius:3px;background:#E3E3EE}
.pf-sheet-g>span.hd>i{background:#C9CAF5}
.pf-sheet-g>span.n>i{width:6px;background:#D8D8E6}
.pf-sheet-g>span.s>i{width:70%;background:#D4D5F7}
.pf-tabs{display:flex;gap:4px;padding:6px 8px;background:#F3F3FA;border-top:1px solid #E3E3EE}
.pf-tabs>i{display:block;height:12px;width:56px;border-radius:3px;background:#FFFFFF;border:1px solid #D8D8E6}
.pf-tabs>i+i{background:transparent}
/* decks: stacked deck cards, thumbnails, one slide zoomed, the look, the refill */
.pf-deck .pf-stack{position:relative;height:124px;margin-bottom:6px}
.pf-stack>span{position:absolute;top:16px;right:22px;bottom:0;left:0;border:1px solid #E3E3EE;border-radius:8px;background:#FFFFFF}
.pf-stack>span+span{top:8px;right:11px;bottom:8px;left:11px}
.pf-stack>.pf-sl{position:absolute;top:0;right:0;bottom:16px;left:22px}
.pf-sl{border:1px solid #D8D8E6;border-radius:8px;background:#FFFFFF;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;gap:5px;overflow:hidden;box-shadow:0 10px 24px rgba(18,18,38,.06);min-width:0}
.pf-sl .tbar{margin:0}
.pf-sl .tbar.t{height:7px;width:46%;background:#121226}
.pf-sl .tbar.a{width:28%;background:#4F52E0}
.pf-sl .tbar.l{width:22%;background:#B8FF12;margin-top:auto}
.pf-chevs{display:flex;gap:2px;margin-top:2px}
.pf-bars{display:flex;align-items:flex-end;gap:4px;height:30px}
.pf-bars>i{flex:1;display:block;border-radius:2px 2px 0 0;background:#C9CAF5}
.pf-bars>i.acc{background:#4F52E0}
.pf-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf-thumbs .thumb{padding:7px;background:#FFFFFF;display:flex;flex-direction:column;gap:4px;min-width:0}
.pf-thumbs .thumb .tbar{margin:0}
.pf-thumbs .thumb.on{border-color:#4F52E0;box-shadow:0 0 0 3px #EEEEFC}
.pf-slide{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin-top:10px}
.pf-slide-h{display:flex;align-items:center;gap:8px}
.pf-slide-h .tbar{margin:0;height:8px;width:40%;background:#121226}
.pf-logo{margin-left:auto;width:26px;height:16px;border-radius:4px;background:#121226;flex:none;position:relative}
.pf-logo::after{content:"";position:absolute;right:4px;top:5px;width:6px;height:6px;border-radius:50%;background:#B8FF12}
.pf-src{display:flex;flex-direction:column;gap:6px;justify-content:center}
.pf-src .pf-chip{align-self:flex-start}
.pf-look{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1.25fr);align-items:center;gap:10px}
.pf-set{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-set>div{display:flex;align-items:center;gap:8px;border:1px solid #EDEDF3;border-radius:8px;padding:8px 10px;background:#FFFFFF}
.pf-set .pf-k{margin-left:auto;font-weight:500;color:#5F6080}
.pf-dot{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(18,18,38,.08)}
.pf-aa{font-weight:700;font-size:15px;line-height:1;color:#121226}
.pf-sl.big{aspect-ratio:16/10;padding:12px;gap:7px}
.pf-sl.big>.pf-d{width:62%;flex:none}
.pf-refill{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:center;gap:8px}
.pf-loop{display:flex;flex-direction:column;align-items:center;gap:6px}
.pf-mark{display:flex;align-items:center;gap:6px;border-radius:5px;padding:4px 6px;background:#EEEEFC;border:1px dashed #8F92F0}
.pf-mark .tbar{margin:0;flex:1;background:#8F92F0}
.pf-mark .pf-pen{width:14px;height:14px;border-radius:4px}
/* the related-guides strip with complete rows */
.sp-related.pf-rel3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-related.pf-rel4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.sp-related.pf-rel4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sp-related.pf-rel3,.sp-related.pf-rel4{grid-template-columns:1fr}}
@media (max-width:760px){
  .vpanel.pf-vp{padding:24px 0 24px 16px !important}
  .pf-card{padding:16px;gap:12px}
  .pf-f{grid-template-columns:80px minmax(0,1fr)}
}
@media (max-width:420px){
  .pf-vers{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:4px}
  .pf-look,.pf-refill{grid-template-columns:1fr}
  .pf-look>.pf-arr{display:none}
  .pf-slide{grid-template-columns:1fr}
  .pf-src{flex-direction:row;flex-wrap:wrap}
}
/* draw-in, only when site.js reveals the block (.rv -> .rv.in) */
@keyframes pf-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pf-draw{0%{opacity:0;stroke-dashoffset:1}15%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes pf-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pf-d .pf-a{transform-box:fill-box;transform-origin:center}
.rv.in .pf-a{animation:pf-fade .45s ease both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
.rv.in .pf-e{animation:pf-draw .5s ease-out both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
.rv.in .pf-pop{animation:pf-pop .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
@media (prefers-reduced-motion:reduce){.rv.in .pf-a,.rv.in .pf-e,.rv.in .pf-pop{animation:none}}
/* patchley.com — header rules shared by the homepage (/ loads this file next to the old site.f019cb8f.css) and by page.css (/de/ and the subpages).
   All rules are class-scoped: the homepage body and the subpages must not be touched by anything in here. */
/* language menu: EN/DE entries are links (the buttons are styled in site.css) */
.lang-menu a{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 12px;box-sizing:border-box;border-radius:8px;color:#121226;font-size:14px;text-align:start}
.lang-menu a:hover,.lang-menu a:focus-visible{background:#F1F1F7;color:#121226}
.lang-menu a[aria-current=page],.lang-menu a[aria-selected=true]{font-weight:700;background:#EEEEFC}
.lang-menu a[aria-current=page] .lc,.lang-menu a[aria-selected=true] .lc{border-color:#4F52E0;color:#4F52E0;background:#FFFFFF}
/* aria-selected: the old homepage script marks the DE link that way when "/" is translated client-side into German */
/* the header (8 Nov 2026): sticky bar: logo · Platform ▾ · Solutions ▾ · Library ▾ · Pricing … language menu · Tour · Start a pilot.
   Desktop: .nav-menus is display:contents, so its buckets, Pricing and the two buttons (.nav-ctas) are items of the bar and
   `order` puts the language menu (.nav-right) between Pricing and the buttons. Below 1024px (all languages) the burger
   <details class="nav-m"> opens .nav-menus as a sheet under the bar: the buckets as an accordion, the two buttons at the bottom. */
.site-head{position:sticky;top:0;z-index:70;background:#121226}
:root{scroll-padding-top:76px}
.nav2{position:relative;gap:4px}
.nav-logo{order:0;margin-inline-end:22px;flex:none}
.nav-m{display:none;order:6}
.nav-m>summary{display:none;list-style:none;cursor:pointer;width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.22);align-items:center;justify-content:center;box-sizing:border-box}
.nav-m>summary::-webkit-details-marker{display:none}
.nav-m>summary:focus-visible{outline:2px solid #B8FF12;outline-offset:2px}
.nav-burger{display:flex;flex-direction:column;gap:5px}
.nav-burger i{display:block;width:18px;height:2px;background:#FFFFFF;border-radius:1px}
.nav-menus{display:contents}
.nav-dd{position:relative;order:1}
.nav-top{color:#D9D9EE;font-size:15px;font-weight:500;padding:8px 12px;border-radius:9px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;white-space:nowrap;order:2}
.nav-top:hover{color:#FFFFFF;background:rgba(255,255,255,.08)}
.nav-top[aria-current]{color:#FFFFFF;background:rgba(255,255,255,.12)}
.nav-top:focus-visible,.nav-tour:focus-visible{outline:2px solid #B8FF12;outline-offset:2px}
.nav-dd-btn{font-family:inherit;background:transparent;border:0;margin:0;cursor:pointer;gap:6px;line-height:1.2}
.nav-chev{flex:none;opacity:.75;transition:transform .15s ease}
.nav-dd.open .nav-chev{transform:rotate(180deg)}
.nav-right{order:4;margin-inline-start:auto;display:flex;align-items:center}
.nav-ctas{order:5;display:flex;align-items:center;gap:10px;margin-inline-start:10px}
.nav-tour{color:#FFFFFF;font-size:15px;font-weight:600;border:1px solid rgba(255,255,255,.28);min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.nav-tour:hover{color:#FFFFFF;background:rgba(255,255,255,.08)}
.nav-start:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.nav-start[aria-current]{box-shadow:0 0 0 2px #121226,0 0 0 4px #B8FF12}
/* the panels: white, hairline border, soft shadow; groups with small mono labels; title + one line per item */
.nav-dd-panel{display:none;position:absolute;top:calc(100% + 22px);inset-inline-start:-8px;z-index:80;background:#FFFFFF;color:#121226;border:1px solid #E3E3EE;border-radius:14px;box-shadow:0 20px 50px rgba(18,18,38,.22);padding:14px;box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);text-align:start}
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav-dd.open .nav-dd-panel,.nav2:not(.nav-js) .nav-dd:hover .nav-dd-panel,.nav2:not(.nav-js) .nav-dd:focus-within .nav-dd-panel{display:block}
.nav-dd-cols{display:flex;gap:8px}
.nav-dd-col{width:300px;display:flex;flex-direction:column;gap:12px}
.nav-dd-g{display:flex;flex-direction:column;gap:2px}
.nav-dd-l{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B6C8A;padding:6px 12px 6px}
.nav-dd-i{display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:10px;color:#121226;text-decoration:none}
.nav-dd-i:hover{background:#F3F3FA}
.nav-dd-i:focus-visible,.nav-dd-all:focus-visible{outline:2px solid #4F52E0;outline-offset:-2px;background:#F3F3FA}
.nav-dd-t{font-size:15px;font-weight:600;line-height:1.3;color:#121226}
.nav-dd-d{font-size:13.5px;line-height:1.45;color:#5A5B78}
.nav-dd-i[aria-current] .nav-dd-t{color:#4F52E0}
.nav-dd-i[aria-current]{background:#EEEEFC}
.nav-dd-all{display:block;margin:10px 0 0;padding:12px 12px 2px;border-top:1px solid #E3E3EE;font-size:14px;font-weight:600;color:#4F52E0;text-decoration:none;border-radius:0 0 8px 8px}
.nav-dd-all:hover{color:#121226}
:root[lang=ar] .nav-dd-l{letter-spacing:0;font-family:inherit;font-size:12px}   /* spaced mono letters break Arabic script */
@media (min-width:1024px) and (max-width:1180px){.nav-logo{margin-inline-end:10px}.nav-top{padding:8px 9px}.nav-ctas{margin-inline-start:6px;gap:6px}.nav-dd-col{width:272px}}
/* "/" translated client-side (FR, ES, IT, NL, PL, AR, ZH): longer labels, so tighter items up to 1280px */
@media (min-width:1024px) and (max-width:1280px){:root:not([lang=en]):not([lang=de]) .nav-top{padding:8px 7px}:root:not([lang=en]):not([lang=de]) .nav-logo{margin-inline-end:8px}:root:not([lang=en]):not([lang=de]) .nav-ctas{margin-inline-start:6px;gap:6px}:root:not([lang=en]):not([lang=de]) .nav-start{padding:11px 14px !important}}
@media (max-width:1023px){
  .nav2{gap:10px;position:static}            /* the sheet is placed against the sticky header, so it spans the full width */
  .nav-m{display:block}
  .nav-m>summary{display:inline-flex}
  .nav-right{order:5}
  .nav-menus{display:none}
  .nav-m[open]+.nav-menus{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:100%;z-index:60;background:#121226;border-top:1px solid rgba(255,255,255,.1);padding:8px 16px 20px;gap:2px;max-height:calc(100dvh - 76px);overflow:auto;box-sizing:border-box}
  .nav-dd{order:0}
  .nav-top{width:100%;justify-content:flex-start;font-size:16px;min-height:48px;padding:12px}
  .nav-dd-btn{justify-content:space-between;text-align:start}
  .nav-dd-panel{position:static;width:auto;max-width:none;background:transparent;border:0;box-shadow:none;padding:0 0 8px;color:#D9D9EE}
  .nav-dd-panel::before{display:none}
  .nav-m[open]+.nav-menus .nav-dd-panel{display:none}
  .nav-m[open]+.nav-menus .nav-dd.open .nav-dd-panel,.nav2:not(.nav-js) .nav-m[open]+.nav-menus .nav-dd-panel{display:block}
  .nav-dd-cols{flex-direction:column;gap:10px}
  .nav-dd-col{width:auto;gap:10px}
  .nav-dd-l{color:#8E8FB0;padding:6px 12px 4px 24px}
  .nav-dd-i{padding:9px 12px 9px 24px}
  .nav-dd-i:hover,.nav-dd-i:focus-visible{background:rgba(255,255,255,.06)}
  .nav-dd-i:focus-visible,.nav-dd-all:focus-visible{outline-color:#B8FF12}
  .nav-dd-t{color:#FFFFFF}
  .nav-dd-d{color:#A8A9C8}
  .nav-dd-i[aria-current]{background:rgba(255,255,255,.08)}
  .nav-dd-i[aria-current] .nav-dd-t{color:#B8FF12}
  .nav-dd-all{margin:6px 0 0 12px;padding:10px 12px;border-top-color:rgba(255,255,255,.12);color:#B8FF12}
  .nav-dd-all:hover{color:#FFFFFF}
  .nav-ctas{order:9;flex-direction:column;align-items:stretch;gap:10px;margin:12px 4px 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
  .nav2 .nav-ctas .nav-tour,.nav2 .nav-ctas .nav-start{width:100%;min-height:48px;font-size:16px !important;padding:12px 16px !important}
}
@media (max-width:560px){.nav2{gap:8px}.nav-logo{margin-inline-end:auto}.nav2 .nav-m>summary{width:40px;height:40px}.nav2 #lang-code{display:none}.nav2 .lang-btn{padding:0 8px;flex:none}.nav2 .lang-btn svg{display:none}}
/* links to #top land at the very top (the sticky header is 76px; scroll-padding-top above keeps every other anchor clear of it) */
#top{scroll-margin-top:76px}
/* the one approved homepage content change: the "See it step by step" link under "01 — How it works" */
.hp-hiw{font-weight:600;white-space:nowrap}
.hp-cmp{font-weight:600;white-space:nowrap;color:#4F52E0}   /* the "Where patchley fits" strip on "/" (HP_STRIP in build.py) */
.hp-pilot,.hp-sec,.hp-ex,.hp-cons,.hp-dl{display:block;margin-top:10px;font-size:15px;font-weight:400;color:inherit;text-decoration:underline;text-decoration-color:rgba(18,18,38,.3);text-underline-offset:3px}
/* the four quiet links of 4 Nov 2026 (HP_LINKS in build.py) share the .hp-pilot look; .hp-dl sits in the dark "Book a demo" section, as quiet as the e-mail address there */
.hp-dl{color:#A8A9C8;text-decoration-color:rgba(255,255,255,.3)}
/* the stats under "01 — How it works" (HP_STATS in build.py, 7 Nov 2026): large figure + small light unit + statement;
   three columns (the fourth stat was removed on 7 Nov 2026), still three on tablets with a smaller figure, one column up to
   640px. Inter has no 300 here, so the unit is 400. The count-up and the staggered rise come from tour-launch.js (.hp-js / .in);
   without it everything is simply shown. */
.hp-stats{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.hp-stat{border-top:2px solid #121226;padding-top:22px;min-width:0}
.hp-stat-n{font-size:clamp(64px,6.6vw,100px);font-weight:800;line-height:.9;letter-spacing:-0.05em;color:#121226;white-space:nowrap;font-variant-numeric:tabular-nums}
.hp-stat-c{display:inline-block;text-align:start}
.hp-stat-u{font-size:.32em;font-weight:400;letter-spacing:-0.02em;color:#5F6080}
.hp-stat-t{margin-top:18px;max-width:26ch;font-size:19px;font-weight:500;line-height:1.35;color:#121226}
.hp-stats.hp-js .hp-stat{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hp-stats.hp-js .hp-stat.in{opacity:1;transform:none}
@media (max-width:980px){.hp-stats{gap:24px}.hp-stat-n{font-size:clamp(46px,7.4vw,72px)}.hp-stat-t{font-size:17px}}
@media (max-width:640px){.hp-stats{grid-template-columns:minmax(0,1fr);gap:36px;padding-left:8px;padding-right:8px}.hp-stat-n{font-size:clamp(72px,20vw,96px)}.hp-stat-t{font-size:18px}}
@media (prefers-reduced-motion:reduce){.hp-stats.hp-js .hp-stat{opacity:1;transform:none;transition:none}}
/* the quiet link under the stats (8 Nov 2026, part of HP_STATS): left-aligned directly above the benchmark note (right-aligned it sat under the tour card), to the Pilot's #results */
.hp-res{display:table;margin:28px 0 0;font-size:15px;font-weight:600;color:#4F52E0;text-decoration:underline;text-decoration-color:rgba(79,82,224,.35);text-underline-offset:3px}
@media (max-width:640px){.hp-res{margin:32px 0 0;padding:0 8px}}
/* legal pages (imprint, privacy): the DE/EN switch moved from the old header into the main column */
.legal-switch-row{display:flex;justify-content:flex-end;margin-bottom:8px}
.legal-switch-row .legal-switch{background:#EEEEF6}
.legal-switch-row .legal-switch button{color:#3F4060}
.legal-switch-row .legal-switch button[aria-pressed=true]{background:#121226;color:#FFFFFF}
/* the tour (7 Nov 2026; behaviour in tour-launch.js, the tour itself in assets/tour.<hash>.js): the slide-in card on "/" and "/de/"
   (bottom right, never blocking; a slim bar at the bottom on phones) and the tour dialog on every page (85vw x 85dvh, centred; full screen on phones) */
.tour-card{position:fixed;right:24px;bottom:24px;z-index:80;width:304px;max-width:calc(100vw - 32px);box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:18px;background:#FFFFFF;color:#121226;border:1px solid #E3E3EE;border-radius:14px;box-shadow:0 1px 2px rgba(18,18,38,.05),0 12px 32px rgba(18,18,38,.12);font-family:'Inter',system-ui,sans-serif;text-align:left;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease}
.tour-card[hidden]{display:none}
.tour-card.in{opacity:1;transform:none}
.tour-card-x{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#8A8BA8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tour-card-x:hover{background:#F1F1F8;color:#121226}
.tour-card-txt{padding-right:30px}
.tour-card-t{margin:0;font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:#121226}
.tour-card-s{margin:4px 0 0;font-size:13px;line-height:1.45;color:#5F6080}
.tour-card-vis{display:block;line-height:0;border:1px solid #E3E3EE;border-radius:10px;background:#FBFBFE;overflow:hidden}
.tour-card-vis svg{display:block;width:100%;height:auto}
.tour-card-go{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:10px;background:#4F52E0;color:#FFFFFF;font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;transition:background .15s ease}
.tour-card-go:hover{background:#3F42CC}
.tour-card-go:focus-visible,.tour-card-x:focus-visible,.tour-dlg-x:focus-visible{outline:3px solid #4F52E0;outline-offset:2px}
.tour-card .tc-hd{fill:#F3F3F9}
.tour-card .tc-sep{fill:none;stroke:#E3E3EE;stroke-width:1}
.tour-card .tc-hb{fill:#D8D8E6}
.tour-card .tc-hb-ai{fill:#A5A7F0}
.tour-card .tc-b,.tour-card .tc-g{fill:#FFFFFF;stroke:#9A9BB5;stroke-width:1}
.tour-card .tc-ai{fill:#EEEEFC;stroke:#4F52E0}
.tour-card .tc-ph{fill:#D8D8E6}
.tour-card .tc-ph-ai{fill:#A5A7F0}
.tour-card .tc-ev{fill:#FFFFFF;stroke:#8A8BA8;stroke-width:1.2}
.tour-card .tc-end{fill:#FFFFFF;stroke:#5F6080;stroke-width:2}
.tour-card .tc-e{fill:none;stroke:#A8A9C8;stroke-width:1;stroke-linejoin:round;marker-end:url(#tc-arr)}
.tour-card .tc-ah{fill:#A8A9C8}
.tour-card.in .tc-1,.tour-card.in .tc-2,.tour-card.in .tc-3,.tour-card.in .tc-4,.tour-card.in .tc-5,.tour-card.in .tc-6,.tour-card.in .tc-7,.tour-card.in .tc-8,.tour-card.in .tc-9,.tour-card.in .tc-10,.tour-card.in .tc-11{animation:tc-in .45s ease-out both;animation-delay:.2s}
.tour-card.in .tc-2{animation-delay:0.32s}
.tour-card.in .tc-3{animation-delay:0.44s}
.tour-card.in .tc-4{animation-delay:0.56s}
.tour-card.in .tc-5{animation-delay:0.68s}
.tour-card.in .tc-6{animation-delay:0.80s}
.tour-card.in .tc-7{animation-delay:0.92s}
.tour-card.in .tc-8{animation-delay:1.04s}
.tour-card.in .tc-9{animation-delay:1.16s}
.tour-card.in .tc-10{animation-delay:1.28s}
.tour-card.in .tc-11{animation-delay:1.40s}
@keyframes tc-in{from{opacity:0}to{opacity:1}}   /* drawn in once when the card appears, then it stays */
.tour-dlg{width:85vw;height:85vh;height:85dvh;max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:18px;background:#F5F5FA;color:#121226;box-shadow:0 40px 120px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain;text-align:left}
.tour-dlg::backdrop{background:rgba(18,18,38,.62)}
.tour-dlg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 20px;background:#F5F5FA;border-bottom:1px solid #E3E3EE;font-family:'Inter',system-ui,sans-serif}
.tour-dlg-title{margin:0;font-size:14px;font-weight:600;color:#3F4060}
.tour-dlg-x{flex:none;width:44px;height:44px;padding:0;border-radius:10px;border:1px solid #E3E3EE;background:#FFFFFF;color:#121226;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tour-dlg-x:hover{background:#F1F1F8}
.tour-dlg[open]{display:flex;flex-direction:column;overflow:hidden}   /* the window fills the dialog; only areas inside the tour scroll */
.tour-dlg-bar{flex:none}
.tour-dlg-host{display:block;flex:1;min-height:0}
@media (max-width:560px){
  .tour-card{left:0;right:0;bottom:0;width:auto;max-width:none;flex-direction:row;align-items:center;gap:8px;padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px)) 16px;border-radius:0;border-width:1px 0 0;box-shadow:0 -8px 24px rgba(18,18,38,.10)}
  .tour-card-txt{flex:1;min-width:0;padding-right:0}
  .tour-card-t{font-size:14.5px}
  .tour-card-s,.tour-card-vis{display:none}
  .tour-card-go{flex:none;min-height:42px;padding:0 14px;font-size:14px}
  .tour-card-x{position:static;flex:none;width:40px;height:40px;order:3}
  .tour-dlg{width:100vw;height:100dvh;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .tour-card{transition:none;transform:none}
  .tour-card.in .tc-1,.tour-card.in .tc-2,.tour-card.in .tc-3,.tour-card.in .tc-4,.tour-card.in .tc-5,.tour-card.in .tc-6,.tour-card.in .tc-7,.tour-card.in .tc-8,.tour-card.in .tc-9,.tour-card.in .tc-10,.tour-card.in .tc-11{animation:none}
}
/* the abstract To-Be diagram in the "Design" card of "02 — Platform" (HP_TOBE in build.py, 8 Nov 2026) */
.hp-tb{display:block;width:100%;height:auto;margin-top:14px;overflow:visible}
.hp-tb .hp-tb-ln{fill:#FFFFFF;stroke:#E3E3EE;stroke-width:1}
.hp-tb .hp-tb-ai{fill:#F4F4FE;stroke:#D4D5F7}
.hp-tb .hp-tb-hd{fill:none;stroke:#E3E3EE;stroke-width:1}
.hp-tb .hp-tb-hb{fill:#D8D8E6}
.hp-tb .hp-tb-hb-ai{fill:#4F52E0}
.hp-tb .hp-tb-t,.hp-tb .hp-tb-g{fill:#FFFFFF;stroke:#3F4060;stroke-width:1.2}
.hp-tb .hp-tb-tai{fill:#EEEEFC;stroke:#4F52E0;stroke-width:1.4}
.hp-tb .hp-tb-ph{fill:#C9CAD9}
.hp-tb .hp-tb-ph-ai{fill:#8F92F0}
.hp-tb .hp-tb-ev{fill:#FFFFFF;stroke:#3F4060;stroke-width:1.2}
.hp-tb .hp-tb-end{fill:#FFFFFF;stroke:#121226;stroke-width:2.4}
.hp-tb .hp-tb-e{fill:none;stroke:#8A8BA8;stroke-width:1.2;stroke-linejoin:round;marker-end:url(#hp-tb-arr)}
.hp-tb .hp-tb-ah{fill:#8A8BA8}
/* "02 — Platform" as a scroll story (HP_STORY in build.py, approved content change 10, 7 Nov 2026). Only with .hp-on, which
   tour-launch.js sets from 1024px: the five .tabgrid blocks dissolve into one grid (display:contents), their texts stack in
   the left column, all five visuals share the sticky right cell and crossfade (.hp-act). Without .hp-on (phones, tablets,
   no JS) the section is exactly the old layout. --hp-top (set by the script) centres indicator + visual in the viewport below the header, at least 16px under it. */
.hp-steps[hidden]{display:none}
.hp-story.hp-on{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:72px;row-gap:0 !important;--hp-top:100px}
.hp-story.hp-on > .tabgrid{display:contents}
.hp-story.hp-on > .tabgrid > div:first-child{grid-column:1;padding:15vh 0;transition:opacity .45s ease}
.hp-story.hp-on > .tabgrid:nth-child(2) > div:first-child{grid-row:1;padding-top:0}
.hp-story.hp-on > .tabgrid:nth-child(3) > div:first-child{grid-row:2}
.hp-story.hp-on > .tabgrid:nth-child(4) > div:first-child{grid-row:3}
.hp-story.hp-on > .tabgrid:nth-child(5) > div:first-child{grid-row:4}
.hp-story.hp-on > .tabgrid:nth-child(6) > div:first-child{grid-row:5;padding-bottom:6vh}
.hp-story.hp-on > .tabgrid > div:first-child:not(.hp-act){opacity:.32}
/* 8 Nov 2026: the blur-in reveal of the step headings was dropped (user: too much animation); headings dim/undim with their block only */
.hp-story.hp-on > .hp-steps{grid-column:2;grid-row:1 / span 5;align-self:start;position:sticky;top:var(--hp-top);z-index:3;display:flex;gap:22px;flex-wrap:wrap;padding:4px 0 0 4px;height:28px;box-sizing:border-box;margin-bottom:calc(var(--hp-ph,560px) + 24px)}   /* stops sticking together with the visual below it */
.hp-step{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9A9BB5;transition:color .3s ease}
.hp-step:hover,.hp-step.hp-act{color:#121226}
.hp-step:focus-visible{outline:2px solid #4F52E0;outline-offset:4px;border-radius:3px}
.hp-step-d{width:7px;height:7px;border-radius:50%;background:#D4D5E3;transition:background .3s ease,transform .3s ease}
.hp-step.hp-act .hp-step-d{background:#4F52E0;transform:scale(1.25)}
.hp-story.hp-on .vpanel{grid-column:2;grid-row:1 / span 5;align-self:start;position:sticky;top:calc(var(--hp-top) + 52px);margin-top:52px;order:0;z-index:1;opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s !important;pointer-events:none}
.hp-story.hp-on .vpanel.hp-act{opacity:1;visibility:visible;transform:none;z-index:2;pointer-events:auto;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s !important}
/* live details inside the active visual: nothing new is shown, only the existing marks move */
.hp-story.hp-on .vpanel.hp-act > .vcard:not(.ghost){animation:hp-up .6s cubic-bezier(.2,.7,.2,1) both}
.hp-story.hp-on .vpanel.hp-act .chip{animation:hp-pop .45s cubic-bezier(.2,.7,.2,1) both}
.hp-story.hp-on .vpanel.hp-act .chip:nth-child(1){animation-delay:.5s}
.hp-story.hp-on .vpanel.hp-act .chip:nth-child(2){animation-delay:.8s}
.hp-story.hp-on .vpanel.hp-act .chip:nth-child(3){animation-delay:1.1s}
/* Capture: the mic icon pulses, the wave moves, the grey bars light up in turn */
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .vicon{animation:hp-ring 1.8s ease-out infinite}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv{animation:hp-wave .9s ease-in-out infinite alternate;transform-origin:50% 50%}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv:nth-child(3n+2){animation-duration:.7s;animation-delay:-.3s}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv:nth-child(3n){animation-duration:1.1s;animation-delay:-.6s}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv.off{animation:hp-wave .9s ease-in-out infinite alternate,hp-lit 3s linear infinite}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv.off:nth-last-child(4){animation-delay:-.2s,.6s}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv.off:nth-last-child(3){animation-delay:-.5s,1.2s}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv.off:nth-last-child(2){animation-delay:-.1s,1.8s}
.hp-story.hp-on > .tabgrid:nth-child(2) .vpanel.hp-act .wv.off:nth-last-child(1){animation-delay:-.4s,2.4s}
/* Design: the abstract To-Be diagram (HP_TOBE, approved content change 11, 8 Nov 2026): lanes, then shapes and connectors in
   flow order (hp-tb-s1 .. s8), each connector drawn along its length */
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-ln{animation:hp-fade .4s ease both}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-l2{animation-delay:.08s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-l3{animation-delay:.16s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-l4{animation-delay:.24s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-ev,.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-t,.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-ph,.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-g,.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-end{animation:hp-fade .35s ease both}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-e{animation:hp-draw .3s ease-out both}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s1{animation-delay:.4s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s2{animation-delay:.55s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s3{animation-delay:.75s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s4{animation-delay:.95s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s5{animation-delay:1.15s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s6{animation-delay:1.35s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s7{animation-delay:1.55s}
.hp-story.hp-on > .tabgrid:nth-child(3) .vpanel.hp-act .hp-tb-s8{animation-delay:1.75s}
/* Analyse: the text bars fill, the heat cells come in */
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .vcard:not(.ghost) .vbox .bar{transform-origin:0 50%;animation:hp-fill .7s cubic-bezier(.2,.7,.2,1) both}
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .vcard:not(.ghost) .vbox .bar:nth-of-type(2){animation-delay:.2s}
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .vcard:not(.ghost) .vbox .bar:nth-of-type(3){animation-delay:.4s}
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .heat{animation:hp-node .35s ease both;animation-delay:1.05s}
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .heat:nth-child(2){animation-delay:.6s}
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .heat:nth-child(1),.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .heat:nth-child(3){animation-delay:.75s}
.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .heat:nth-child(4),.hp-story.hp-on > .tabgrid:nth-child(4) .vpanel.hp-act .heat:nth-child(5){animation-delay:.9s}
/* Present: the three slides pop in, then their contents */
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .thumb{animation:hp-pop .5s cubic-bezier(.3,1.3,.5,1) both}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .thumb:nth-child(2){animation-delay:.2s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .thumb:nth-child(3){animation-delay:.4s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .chev{animation:hp-fade .3s ease both;animation-delay:.35s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .chev:nth-child(2){animation-delay:.45s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .chev:nth-child(3){animation-delay:.55s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .chev:nth-child(4){animation-delay:.65s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .hc{animation:hp-fade .3s ease both;animation-delay:.6s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .cb{transform-origin:50% 100%;animation:hp-grow .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:.8s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .cb:nth-child(2){animation-delay:.9s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .cb:nth-child(3){animation-delay:1s}
.hp-story.hp-on > .tabgrid:nth-child(5) .vpanel.hp-act .cb:nth-child(4){animation-delay:1.1s}
/* Run: a highlight moves down the three cases, the AI agent's dot pulses */
.hp-story.hp-on > .tabgrid:nth-child(6) .vpanel.hp-act .vbox > div{border-radius:6px;animation:hp-step 4.5s ease-in-out infinite}
.hp-story.hp-on > .tabgrid:nth-child(6) .vpanel.hp-act .vbox > div:nth-child(2){animation-delay:1.5s}
.hp-story.hp-on > .tabgrid:nth-child(6) .vpanel.hp-act .vbox > div:nth-child(3){animation-delay:3s}
.hp-story.hp-on > .tabgrid:nth-child(6) .vpanel.hp-act .vbox > div:nth-child(2) .dot{animation:hp-dot 1.4s ease-out infinite}
@keyframes hp-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hp-pop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes hp-fade{from{opacity:0}to{opacity:1}}
@keyframes hp-draw{from{opacity:0;stroke-dasharray:1 1;stroke-dashoffset:1}20%{opacity:1}to{opacity:1;stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes hp-node{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes hp-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes hp-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes hp-wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes hp-lit{0%{background:#D4D5F7}12%{background:#4F52E0}30%{background:#4F52E0}45%{background:#D4D5F7}100%{background:#D4D5F7}}
@keyframes hp-ring{0%{box-shadow:0 0 0 0 rgba(28,28,59,.35)}70%{box-shadow:0 0 0 10px rgba(28,28,59,0)}100%{box-shadow:0 0 0 0 rgba(28,28,59,0)}}
@keyframes hp-dot{0%{box-shadow:0 0 0 0 rgba(3,105,161,.45)}80%{box-shadow:0 0 0 8px rgba(3,105,161,0)}100%{box-shadow:0 0 0 0 rgba(3,105,161,0)}}
@keyframes hp-step{0%{background:transparent;box-shadow:0 0 0 0 transparent}8%{background:#F3F4FF;box-shadow:0 0 0 6px #F3F4FF}30%{background:#F3F4FF;box-shadow:0 0 0 6px #F3F4FF}38%{background:transparent;box-shadow:0 0 0 0 transparent}100%{background:transparent;box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){
  .hp-story.hp-on > .tabgrid > div:first-child:not(.hp-act){opacity:1}
  .hp-story.hp-on > .tabgrid > div:first-child:not(.hp-seen) .tabh{filter:none;opacity:1;transform:none}
  .hp-story.hp-on .tabh,.hp-story.hp-on > .tabgrid > div:first-child,.hp-step,.hp-step-d{transition:none}
  .hp-story.hp-on .vpanel,.hp-story.hp-on .vpanel.hp-act{transform:none;transition:none !important}
  .hp-story.hp-on .vpanel.hp-act *,.hp-story.hp-on .vpanel.hp-act > .vcard{animation:none !important}
}

/* phones/tablets: a compact 'Start a pilot' stays in the bar next to language + burger (8 Nov 2026); hidden where it does not fit */
.nav-start-m{display:none}
@media (max-width:1023px){.nav-start-m{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;margin-inline-end:8px;border-radius:9px;background:#B8FF12;color:#121226;font-weight:600;font-size:14px;line-height:1;white-space:nowrap;text-decoration:none;box-sizing:border-box}.nav-start-m:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}}
@media (max-width:359px){.nav-start-m{display:none}}
@media (max-width:459px){:root:not([lang=en]):not([lang=de]) .nav-start-m{display:none}}   /* longer labels in the client languages on / */
/* The hero aurora on "/" and "/de/" (.hp-hero, .hp-aur; approved content change 12 of 8 Nov 2026): three soft indigo blobs
   (one with a trace of lime) drift slowly behind the dark hero. Plain radial gradients, no filter, transform only (GPU, no
   layout); isolation keeps the layer above the navy but below every hero element, the layer clips it at the hero's edge.
   KNOBS: strength = --hp-aur-a (1 = as designed, .6 quieter, 0 off); speed = --hp-aur-t (1 = 26/34/41 s cycles, 1.5 slower).
   tour-launch.js adds .hp-off while the hero is off-screen or the tab is hidden; reduced motion: the still frame below. */
.hp-hero{position:relative;isolation:isolate}
.hp-aur{--hp-aur-a:1;--hp-aur-t:1;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--hp-aur-a)}
.hp-aur-b{position:absolute;display:block;border-radius:50%;will-change:transform;animation:hp-aur-1 calc(26s * var(--hp-aur-t)) ease-in-out infinite alternate}
.hp-aur-1{left:-14%;top:40px;width:62%;height:680px;background:radial-gradient(closest-side,rgba(79,82,224,.30),rgba(79,82,224,.12) 55%,rgba(79,82,224,0))}
.hp-aur-2{right:-16%;top:150px;width:58%;height:640px;background:radial-gradient(closest-side,rgba(99,102,241,.26),rgba(99,102,241,.10) 55%,rgba(99,102,241,0));animation-name:hp-aur-2;animation-duration:calc(34s * var(--hp-aur-t))}
.hp-aur-3{left:22%;top:360px;width:56%;height:440px;background:radial-gradient(closest-side,rgba(184,255,18,.055),rgba(99,102,241,.07) 60%,rgba(99,102,241,0));animation-name:hp-aur-3;animation-duration:calc(41s * var(--hp-aur-t))}
.hp-aur.hp-off .hp-aur-b{animation-play-state:paused}
@keyframes hp-aur-1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14%,6%,0) scale(1.12)}100%{transform:translate3d(26%,-4%,0) scale(.96)}}
@keyframes hp-aur-2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-16%,-8%,0) scale(1.1)}100%{transform:translate3d(-24%,6%,0) scale(1.02)}}
@keyframes hp-aur-3{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-14%,-12%,0) scale(1.15)}100%{transform:translate3d(12%,-6%,0) scale(.94)}}
@media (max-width:640px){.hp-aur-1{left:-40%;width:120%;height:520px;top:20px}.hp-aur-2{right:-45%;width:115%;height:520px;top:200px}.hp-aur-3{left:-10%;width:120%;height:380px;top:420px}}
@media (prefers-reduced-motion:reduce){.hp-aur-b{animation:none;will-change:auto}}

/* Platform panel: 'Take the tour' as a button, not a plain item (8 Nov 2026) */
.nav-dd-i[data-dd-tour]{background:#4F52E0;margin-top:4px;padding:12px 14px}
.nav-dd-i[data-dd-tour]:hover,.nav-dd-i[data-dd-tour]:focus-visible{background:#3F42C8}
.nav-dd-i[data-dd-tour] .nav-dd-t{color:#FFFFFF}
.nav-dd-i[data-dd-tour] .nav-dd-t::after{content:' \2192'}
.nav-dd-i[data-dd-tour] .nav-dd-d{color:#D9DAFF}
.nav-dd-i[data-dd-tour]:focus-visible{outline-color:#B8FF12}