/* 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}