/* Cloudsail interaction layer: services submenu, sticky header, mobile call bar and motion.
   Loaded after each page's own styles. Everything works without JavaScript; motion is off
   for people who ask for reduced motion, and the final state always matches the static design. */

.skip{position:absolute;left:16px;top:-72px;z-index:50;padding:10px 14px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Elements outside the page wrapper (skip link, phone call bar) use the site type too */
body{font-family:var(--font-sans,'Archivo','Helvetica Neue',Arial,sans-serif)}

/* Header */
.nav{position:relative;z-index:20;background:var(--paper)}
@media (min-width:901px){
 .nav{position:sticky;top:0;transition:box-shadow .2s ease}
 .nav.stuck{box-shadow:0 1px 0 var(--line)}
 [id]{scroll-margin-top:88px}
}
/* One row from 1160px, where the frame reaches full width. German and Polish labels are longer,
   so there the partner badge keeps its mark and drops the caption. Below 1160px the links move
   to a second row so nothing overlaps. */
@media (min-width:1160px){
 .navlinks{gap:22px}
 .navright{gap:24px}
 html[lang="de"] .navbadge > span,html[lang="pl"] .navbadge > span{display:none}
}
@media (min-width:901px) and (max-width:1159px){
 .nav{flex-wrap:wrap;column-gap:24px;row-gap:0}
 .navright{display:contents}
 .brand{order:1;min-height:68px}
 .lang{order:2;margin-left:auto}
 .navcta{order:3}
 .navlinks{order:4;flex:1 1 100%;padding:0 0 16px}
 [id]{scroll-margin-top:136px}
}

/* Services submenu */
.navitem{display:flex;align-items:center;gap:2px}
.subtoggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -8px -6px -2px;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink-muted);cursor:pointer}
.subtoggle:hover{color:var(--ink)}
.subtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.subtoggle svg{display:block;transition:transform .2s ease}
.navitem.open .subtoggle svg{transform:rotate(180deg)}
.subpanel{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 56px;padding:22px 48px 28px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line-strong);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease .1s,transform .16s ease .1s,visibility 0s linear .26s}
.subcol{display:flex;flex-direction:column}
.subh{margin:0 0 6px;font-size:13px;font-weight:600;font-stretch:112%;color:var(--ink-subtle)}
.navlinks .subpanel a{display:block;padding:9px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.35;color:var(--ink);white-space:normal;text-decoration:none}
.navlinks .subpanel a:hover,.navlinks .subpanel a[aria-current="page"]{color:var(--accent-ink)}
.navlinks .subpanel .suball{grid-column:1 / -1;justify-self:start;margin-top:14px;padding:0;border:0;font-size:15px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
@media (hover:hover){
 /* A short delay either way: passing over the link does not flash the panel, and the pointer can cross to it */
 .navitem:hover .subpanel{opacity:1;visibility:visible;transform:none;transition-delay:.06s}
 .navitem:hover .subtoggle svg{transform:rotate(180deg)}
}
.navitem.open .subpanel,.navitem:has(:focus-visible) .subpanel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.navitem.closed .subpanel{opacity:0;visibility:hidden;transform:translateY(-4px)}
@media (max-width:900px){
 .subpanel{grid-template-columns:minmax(0,1fr);gap:18px;padding:16px 22px 22px;max-height:calc(100dvh - 120px);overflow-y:auto}
 .subtoggle{width:36px;height:36px;margin:-12px -10px -12px -6px}
}

/* Phone call bar, shown between the hero and the form */
.mcta{display:none}
@media (max-width:900px){
 .js .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s linear .25s}
 .js .mcta.show{transform:none;visibility:visible;transition-delay:0s}
 .mcta .btn{display:flex;width:100%}
}

/* Buttons and questions */
.btn{transition:transform .12s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
@media (hover:hover){
 .btn.dark:hover{background:#2E2E33;border-color:#2E2E33}
 .btn:not(.dark):not(.light):hover{background:#EFEFF1}
 .btn.light:hover{background:#FFFFFF}
 summary:hover{color:var(--accent-ink)}
}
summary{transition:color .15s ease}

@keyframes cs-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cs-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes cs-fade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}

 /* One load sequence per page: the hero */
 .hero > div > *,.htext > *,.hvis{animation:cs-rise .65s cubic-bezier(.2,.7,.2,1) both}
 .hero > div > :nth-child(2),.htext > :nth-child(2){animation-delay:.07s}
 .hero > div > :nth-child(3),.htext > :nth-child(3){animation-delay:.14s}
 .hero > div > :nth-child(4),.htext > :nth-child(4){animation-delay:.21s}
 .hvis{animation-delay:.28s}
 .hvis .rbar{transform-origin:left center;animation:cs-grow .9s cubic-bezier(.2,.7,.2,1) .55s both}

 /* Questions open smoothly where the browser supports it */
 details[open] > :not(summary){animation:cs-fade .3s ease both}
 @supports (interpolate-size:allow-keywords){
  details{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;transition:block-size .28s cubic-bezier(.2,.7,.2,1),content-visibility .28s allow-discrete}
  details[open]::details-content{block-size:auto}
 }

 /* The path: the line draws from traditional engineering to the software factory */
 @media (min-width:901px){
  .path .step{position:relative}
  .js .path .step:not(.first){border-top-color:#3F3F46}
  .js .path .step:not(.first)::after{content:'';position:absolute;left:-1px;right:0;top:-3px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.4,0,.2,1)}
  .js .path.is-in .step:not(.first)::after{transform:none}
  .js .path.is-in .step:nth-child(3)::after{transition-delay:.45s}
  .js .path.is-in .step:nth-child(4)::after{transition-delay:.9s}
  .js .path .step:not(.first) > *{transition:opacity .4s ease}
  .js .path:not(.is-in) .step:not(.first) > *{opacity:.3}
  .js .path.is-in .step:nth-child(2) > *{transition-delay:.15s}
  .js .path.is-in .step:nth-child(3) > *{transition-delay:.6s}
  .js .path.is-in .step:nth-child(4) > *{transition-delay:1.05s}

  /* Process steps draw the same line */
  .steps{position:relative}
  .js .steps{border-top-color:var(--line-strong)}
  .js .steps::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.4,0,.2,1)}
  .js .steps.is-in::before{transform:none}
  .js .steps .st{transition:opacity .4s ease}
  .js .steps:not(.is-in) .st{opacity:.25}
  .js .steps.is-in .st:nth-child(2){transition-delay:.25s}
  .js .steps.is-in .st:nth-child(3){transition-delay:.5s}
  .js .steps.is-in .st:nth-child(4){transition-delay:.75s}
 }

 /* Where a service sits on the path */
 .pm{position:relative}
 .js .pathmini .pm.on{border-top-color:var(--line-strong)}
 .js .pathmini .pm.on::before{content:'';position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.4,0,.2,1)}
 .js .pathmini.is-in .pm.on::before{transform:none}
 .js .pathmini.is-in .pm:nth-child(2)::before{transition-delay:.15s}
 .js .pathmini.is-in .pm:nth-child(3)::before{transition-delay:.3s}
 .js .pathmini.is-in .pm:nth-child(4)::before{transition-delay:.45s}
 .js .pathmini .here{transition:opacity .3s ease .5s}
 .js .pathmini:not(.is-in) .here{opacity:0}

 /* Sample result bars grow once they are on screen */
 .js .chart .bar{transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
 .js .chart:not(.is-in) .bar{transform:scaleX(0)}
 .js .chart.is-in .crow:nth-child(2) .bar{transition-delay:.08s}
 .js .chart.is-in .crow:nth-child(3) .bar{transition-delay:.16s}
 .js .chart.is-in .crow:nth-child(4) .bar{transition-delay:.24s}
 .js .chart.is-in .crow:nth-child(5) .bar{transition-delay:.32s}

 /* Page to page */
 @view-transition{navigation:auto}
 .nav{view-transition-name:site-nav}
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}

/* Links to guides: footer column, homepage list, chips that lead somewhere */
@media (min-width:901px){ .fgrid{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))} }
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap}
.gall{font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.glist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:32px;border-top:2px solid var(--ink)}
.glist a{display:block;padding:20px 0 22px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.glist .gt{display:block;font-size:20px;font-weight:500;font-stretch:112%;letter-spacing:-0.01em;line-height:1.3}
.glist .gd{display:block;font-size:15px;line-height:1.5;color:var(--ink-muted);margin-top:6px}
.glist a:hover .gt{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
a.chip{color:inherit;text-decoration:none;transition:border-color .15s ease}
a.chip:hover{border-color:var(--accent)}
.grpl{color:inherit;text-decoration:none}
.grpl:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:900px){ .glist{grid-template-columns:minmax(0,1fr)} }

/* Guide pages */
.gmeta{margin-top:18px;font-size:14px;color:var(--ink-subtle)}
.prow .gsum{display:inline-block;width:100%;margin-top:6px;font-size:16px;font-weight:400;font-stretch:100%;letter-spacing:0;line-height:1.5;color:var(--ink-muted)}
.gwrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start}
.toc{position:sticky;top:104px;font-size:15px;line-height:1.35}
.toch{margin:0 0 12px;font-size:13px;font-weight:600;font-stretch:112%;color:var(--ink-subtle)}
.toc ol{border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;color:var(--ink-muted);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--accent)}
.gbody{min-width:0;max-width:720px}
.gsec + .gsec{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}
.gsec h2{font-size:30px;line-height:1.14;letter-spacing:-0.02em}
.gsec h3{margin-top:32px;font-size:21px;line-height:1.3;letter-spacing:-0.01em}
.gsec p{margin-top:16px;font-size:17px;line-height:1.65}
.gsec .sq{margin-top:20px}
.gsteps{margin-top:22px;border-top:2px solid var(--ink)}
.gsteps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.gsteps .vt{margin:0;font-size:18px;font-weight:600;font-stretch:112%;line-height:1.35}
.gsteps .vd{margin-top:6px;font-size:16px;line-height:1.6;color:var(--ink-muted)}
.gcode{margin-top:24px}
.gcode pre{font-size:14px;line-height:1.65}
.gsec p.glinks{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px;font-size:15px}
.glinks a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.srcs{list-style:decimal;padding-left:20px}
.srcs li{padding:6px 0;font-size:15px;line-height:1.5;color:var(--ink-muted)}
.srcs a{color:var(--ink-muted);overflow-wrap:anywhere}
.srcs a:hover{color:var(--ink)}
@media (min-width:901px) and (max-width:1159px){ .toc{top:136px} .gsec{scroll-margin-top:136px} }
@media (min-width:1160px){ .gsec{scroll-margin-top:96px} }
@media (max-width:900px){
 .gwrap{grid-template-columns:minmax(0,1fr);gap:32px}
 .toc{position:static;padding:16px 18px;border:1px solid var(--line)}
 .gsec h2{font-size:26px}
 .gsec + .gsec{margin-top:44px;padding-top:36px}
}
/* Long German words in narrow footer columns hyphenate instead of widening the page */
.fcol a{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}