/* Landing page only (static/index.html); loaded after qf.css, so a rule here wins over the same rule there. */
/* the background is semantic-atmosphere.css and semantic-atmosphere.js; how strong it is is set there */
/* the hero: the text on the left (kicker, title, promise, motto), the figure on the right (the wider column); the columns start at the same height.
   The two texts on the purpose and the goal stand under both columns, one under each (owner 2026-10-20: no empty block under the way in); one column under 1000 px (qf.css) */
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.hero-about{grid-column:1/-1;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:var(--s7)}}
.hero-figure{min-width:0}
.hero-about .lead-in+.lead-in{margin-top:var(--s2)}
/* the way in stands at the right of the text column; each of the two texts has its title with its small symbol (the colour of the other accents) */
.hero .actions{justify-content:flex-end}
/* the promise and the motto end on the same right edge as the way in (owner 2026-10-20); on a phone the button is full width, so the text stays ragged */
@media (min-width:641px){.hero-copy .promise,.hero-copy .motto{text-align:justify;hyphens:auto;hyphenate-limit-chars:8 4 4}}
.hero-about h2{display:flex;align-items:center;gap:var(--s2)}
.hero-about h2 .ico{width:22px;height:22px;color:var(--green)}
/* the one control of the figure, in the empty strip at its lower right: stop, or play again */
#sdsFinal12{position:relative}
.icon-button.fig-toggle{position:absolute;right:0;bottom:0;width:44px;height:44px;background:var(--surface)}
#sdsFinal12 .fig-toggle svg{width:18px;height:18px}
/* on a phone the strip is too low for it: it stands under the figure, which keeps that room free */
@media (max-width:559px){.icon-button.fig-toggle{bottom:-54px}#sdsFinal12{margin-bottom:54px}}
.lead-in+.ws-cards{margin-top:var(--s5)}
/* twelve pictures in the Movies card's film strip instead of eight: it runs to its very end (its right end at the right edge of its window, whatever the
   card's width), so that the last picture comes into view too, at the same speed as before */
.ws-film{container-type:inline-size}
@keyframes filmRun12{to{transform:translateX(calc(100cqw - 100%))}}
@media (prefers-reduced-motion:no-preference){.ws-film>span{animation-name:filmRun12;animation-duration:90s}}

/* The hero's figure, ported from the split site's landing page (#sdsFinal12): the same scene and the same 20 s loop. Changed here only: its colours are this
   site's tokens, so it follows the theme; the marks that looked like another company's logo and the robot symbols are gone; and it has a still picture. */
/* the still picture (the frame at 19 s), shown whenever the figure does not play: stopped by the button, reduced motion, off screen, or no script */
#sdsFinal12:not(.play) :is(.build1,.build2,.build3,.build4,.build5){opacity:0}
#sdsFinal12:not(.play) :is(.ontologyA,.postB,.sourceConnector,.destinationConnector,.greenEDC){opacity:1}
#sdsFinal12:not(.play) .inputLine{opacity:.16}
#sdsFinal12 .scene{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:0;border-radius:0;background:transparent}
#sdsFinal12 svg{display:block;width:100%;height:100%}
#sdsFinal12 .serverFrame{fill:color-mix(in srgb,var(--surface) 28%,transparent);stroke:color-mix(in srgb,var(--muted) 84%,transparent);stroke-width:1.35;stroke-dasharray:7 5}
#sdsFinal12 .workspace{fill:color-mix(in srgb,var(--surface) 91%,transparent);stroke:color-mix(in srgb,var(--green) 58%,var(--muted));stroke-width:1.45}
#sdsFinal12 .shell{fill:color-mix(in srgb,var(--surface) 96%,transparent);stroke:color-mix(in srgb,var(--muted) 50%,transparent);stroke-width:1.05}
#sdsFinal12 .edge{fill:none;stroke:var(--muted);stroke-width:1;opacity:.52;vector-effect:non-scaling-stroke}
#sdsFinal12 .semEdge{fill:none;stroke:var(--green);stroke-width:1.65;stroke-linecap:round;vector-effect:non-scaling-stroke}
#sdsFinal12 .sem2Edge{fill:none;stroke:var(--fc-proc-tx);stroke-width:1.55;stroke-linecap:round;vector-effect:non-scaling-stroke}
#sdsFinal12 .tealEdge{fill:none;stroke:var(--fc-input-tx);stroke-width:1.65;stroke-linecap:round;vector-effect:non-scaling-stroke}
#sdsFinal12 .cyanEdge{fill:none;stroke:var(--fc-retr-tx);stroke-width:1.45;stroke-linecap:round;vector-effect:non-scaling-stroke}
#sdsFinal12 .sem{fill:var(--green)}#sdsFinal12 .sem2{fill:var(--fc-proc-tx)}#sdsFinal12 .teal{fill:var(--fc-input-tx)}#sdsFinal12 .cyan{fill:var(--fc-retr-tx)}#sdsFinal12 .amber{fill:var(--impact)}#sdsFinal12 .green{fill:var(--ok)}#sdsFinal12 .human{fill:var(--text)}
#sdsFinal12 .haloSem{fill:var(--green);opacity:.13}#sdsFinal12 .haloTeal{fill:var(--fc-input-tx);opacity:.13}
#sdsFinal12 .ontoBox{fill:color-mix(in srgb,var(--surface) 97%,transparent);stroke:var(--green);stroke-width:1.25}
#sdsFinal12 .ontoHead{fill:color-mix(in srgb,var(--green) 18%,var(--surface))}
#sdsFinal12 .catalogFrame{fill:color-mix(in srgb,var(--surface) 96%,transparent);stroke:color-mix(in srgb,var(--fc-retr-tx) 55%,var(--muted));stroke-width:1.2}
#sdsFinal12 .catalogCard{fill:color-mix(in srgb,var(--surface) 98%,transparent);stroke:color-mix(in srgb,var(--muted) 55%,transparent);stroke-width:1}
#sdsFinal12 .catalogCardMatch{fill:color-mix(in srgb,var(--fc-input-tx) 10%,var(--surface));stroke:var(--fc-input-tx);stroke-width:1.6}
#sdsFinal12 .roleLink{fill:none;stroke:var(--muted);stroke-width:1.1;stroke-dasharray:2 5;opacity:.58}
#sdsFinal12 .rolePort{opacity:.25}
#sdsFinal12 .yellowEDC{fill:none;stroke:var(--impact);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:6 7;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:670px 340px}
#sdsFinal12 .greenEDC{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
#sdsFinal12 .edcMidpoint{pointer-events:none}
#sdsFinal12 .deleteTarget,#sdsFinal12 .sourcePacket,#sdsFinal12 .selected,#sdsFinal12 .segmentHull,#sdsFinal12 .catch,#sdsFinal12 .ontologyA,#sdsFinal12 .preB,#sdsFinal12 .postB,#sdsFinal12 .catalogFrameG,#sdsFinal12 .catalogEmit,#sdsFinal12 .catalogLineA,#sdsFinal12 .catalogLineB,#sdsFinal12 .catalogDotA,#sdsFinal12 .catalogDotB,#sdsFinal12 .searchLens,#sdsFinal12 .matchA,#sdsFinal12 .matchB,#sdsFinal12 .sourceConnector,#sdsFinal12 .destinationConnector,#sdsFinal12 .yellowEDC,#sdsFinal12 .negotiationSymbol,#sdsFinal12 .handshake,#sdsFinal12 .confirmation,#sdsFinal12 .greenEDC,#sdsFinal12 .catalogPayload,#sdsFinal12 .editA1,#sdsFinal12 .editA2,#sdsFinal12 .editA3{opacity:0}
#sdsFinal12.play .inputLine{animation:inputLine 20s linear infinite}
#sdsFinal12.play .sourcePacket{animation:sourcePacket 20s ease-in-out infinite}
#sdsFinal12.play .build1{animation:build 20s ease-in-out infinite 0s}
#sdsFinal12.play .build2{animation:build 20s ease-in-out infinite .25s}
#sdsFinal12.play .build3{animation:build 20s ease-in-out infinite .5s}
#sdsFinal12.play .build4{animation:build 20s ease-in-out infinite .75s}
#sdsFinal12.play .build5{animation:build 20s ease-in-out infinite 1s}
#sdsFinal12.play .editA1{animation:editA1 20s ease-in-out infinite}
#sdsFinal12.play .editA2{animation:editA2 20s ease-in-out infinite}
#sdsFinal12.play .editA3{animation:editA3 20s ease-in-out infinite}
#sdsFinal12.play .deleteTarget{animation:deleteTarget 20s ease-in-out infinite}
#sdsFinal12.play .selected{animation:selected 20s ease-in-out infinite}
#sdsFinal12.play .segmentHull{animation:segmentHull 20s ease-in-out infinite}
#sdsFinal12.play .catch{animation:catch 20s ease-in-out infinite}
#sdsFinal12.play .ontologyA{animation:ontologyA 20s ease-in-out infinite}
#sdsFinal12.play .preB{animation:preB 20s ease-in-out infinite}
#sdsFinal12.play .catalogEmit{animation:catalogEmit 20s ease-in-out infinite}
#sdsFinal12.play .catalogFrameG{animation:catalogFrame 20s ease-in-out infinite}
#sdsFinal12.play .searchLens{animation:searchLens 20s ease-in-out infinite}
#sdsFinal12.play .matchA{animation:matchA 20s ease-in-out infinite}
#sdsFinal12.play .matchB{animation:matchB 20s ease-in-out infinite}
#sdsFinal12.play .catalogLineA,#sdsFinal12.play .catalogLineB{animation:catalogLines 20s ease-in-out infinite}
#sdsFinal12.play .catalogDotA{animation:catalogDotA 20s linear infinite}
#sdsFinal12.play .catalogDotB{animation:catalogDotB 20s linear infinite}
#sdsFinal12.play .sourceConnector{animation:sourceConnector 20s ease-in-out infinite}
#sdsFinal12.play .destinationConnector{animation:destinationConnector 20s ease-in-out infinite}
#sdsFinal12.play .yellowEDC{animation:yellowEDC 20s ease-in-out infinite}
#sdsFinal12.play .negotiationSymbol{animation:negotiationSymbol 20s ease-in-out infinite}
#sdsFinal12.play .handshake{animation:handshake 20s ease-in-out infinite}
#sdsFinal12.play .confirmation{animation:confirmation 20s ease-in-out infinite}
#sdsFinal12.play .checkStroke{animation:checkStroke 20s ease-in-out infinite}
#sdsFinal12.play .greenEDC{animation:greenEDC 20s ease-in-out infinite}
#sdsFinal12.play .catalogPayload{animation:catalogPayload 20s ease-in-out infinite}
#sdsFinal12.play .postB{animation:postB 20s ease-in-out infinite}
#sdsFinal12.play .roleA1{animation:roleA1 20s ease-in-out infinite}#sdsFinal12.play .roleA2{animation:roleA2 20s ease-in-out infinite}#sdsFinal12.play .roleA3{animation:roleA3 20s ease-in-out infinite}
@keyframes inputLine{0%,3%,100%{stroke-dashoffset:0;opacity:.16}5%,15%{opacity:1}20%,96%{opacity:.16}100%{stroke-dashoffset:-150}}
@keyframes sourcePacket{0%,3%,100%{opacity:0}5%,15%{opacity:1}19%,100%{opacity:0}}
@keyframes build{0%,10%,98%,100%{opacity:0;transform:scale(.68)}16%,38%{opacity:1;transform:scale(1)}44%,100%{opacity:0}}
@keyframes editA1{0%,18.5%{opacity:0}20%,44%{opacity:1}45%,100%{opacity:0}}
@keyframes editA2{0%,24.5%{opacity:0}26%,44%{opacity:1}45%,100%{opacity:0}}
@keyframes editA3{0%,31.5%,100%{opacity:0}32.2%,33.7%{opacity:1}34.4%,100%{opacity:0}}
@keyframes deleteTarget{0%,15%,100%{opacity:0}17%,32.4%{opacity:.72}33.1%,100%{opacity:0}}
@keyframes selected{0%,29%,44%,100%{opacity:0}33%,41%{opacity:1}}
@keyframes segmentHull{0%,32%,100%{opacity:0;transform:scale(.96)}35%,41%{opacity:1;transform:scale(1)}44%{opacity:0}}
@keyframes catch{0%,34%,100%{opacity:0;transform:scale(.75)}37%{opacity:1;transform:scale(1.08)}42%{opacity:.45;transform:scale(.92)}45%{opacity:0}}
@keyframes ontologyA{0%,40%,99%,100%{opacity:0;transform:scale(.88)}46%,98%{opacity:1;transform:scale(1)}}
@keyframes preB{0%,40%,100%{opacity:0;transform:scale(.88)}46%,90%{opacity:1;transform:scale(1)}91.5%{opacity:0}}
@keyframes catalogEmit{0%,47%,100%{opacity:0;transform:translate(0,0) scale(.8)}51%{opacity:1;transform:translate(0,0) scale(1)}59%{opacity:1;transform:translate(152px,-186px) scale(.72)}62%,100%{opacity:0;transform:translate(152px,-186px) scale(.72)}}
@keyframes catalogFrame{0%,51%,100%{opacity:0;transform:scale(.94)}56%,89.8%{opacity:1;transform:scale(1)}90.8%,100%{opacity:0;transform:scale(1)}}
@keyframes searchLens{0%,56%,100%{opacity:0;transform:translateX(-35px) scale(.78)}59%{opacity:1;transform:translateX(-35px) scale(.78)}66%{opacity:1;transform:translateX(37px) scale(.78)}70%{opacity:0;transform:translateX(37px) scale(.78)}}
@keyframes matchA{0%,59%,100%{opacity:.18}63%,89.8%{opacity:1}90.8%{opacity:.18}}
@keyframes matchB{0%,61%,100%{opacity:.18}65%,89.8%{opacity:1}90.8%{opacity:.18}}
@keyframes catalogLines{0%,51%,100%{opacity:0}56%,89.8%{opacity:1}90.8%,100%{opacity:0}}
@keyframes catalogDotA{0%,56%,100%{opacity:0;transform:translateX(0)}56.8%{opacity:1;transform:translateX(0)}60.5%{opacity:1;transform:translateX(25px)}61.3%,99%{opacity:0;transform:translateX(25px)}}
@keyframes catalogDotB{0%,56%,100%{opacity:0;transform:translateX(0)}56.8%{opacity:1;transform:translateX(0)}60.5%{opacity:1;transform:translateX(-25px)}61.3%,99%{opacity:0;transform:translateX(-25px)}}
@keyframes sourceConnector{0%,67.5%,100%{opacity:0}68.5%,99.6%{opacity:1}100%{opacity:0}}
@keyframes destinationConnector{0%,72%,100%{opacity:0}73%,99.6%{opacity:1}100%{opacity:0}}
@keyframes yellowEDC{0%,68%,100%{opacity:0;transform:scaleX(0)}69%{opacity:1;transform:scaleX(0)}74%{opacity:1;transform:scaleX(1)}84.5%{opacity:1;transform:scaleX(1)}85.5%,100%{opacity:0;transform:scaleX(1)}}
@keyframes negotiationSymbol{0%,74.5%,100%{opacity:0;transform:scale(.58)}76%,79%{opacity:1;transform:scale(.72)}80.5%{opacity:0;transform:scale(.72)}}
@keyframes handshake{0%,78.5%,100%{opacity:0;transform:scale(.58)}80%,82.5%{opacity:1;transform:scale(.76)}84%{opacity:0;transform:scale(.72)}}
@keyframes confirmation{0%,82%,100%{opacity:0;transform:scale(.54)}83.5%,85%{opacity:1;transform:scale(.72)}86%{opacity:0;transform:scale(.72)}}
@keyframes checkStroke{0%,82.5%{stroke-dasharray:0 30;stroke-dashoffset:30}84%,85%{stroke-dasharray:30 0;stroke-dashoffset:0}86.5%,100%{stroke-dasharray:0 30;stroke-dashoffset:30}}
@keyframes greenEDC{0%,84.5%,100%{opacity:0}85.5%,99.7%{opacity:1}100%{opacity:0}}
@keyframes catalogPayload{0%,85.5%,100%{opacity:0}86.2%{opacity:1}89%{opacity:1}89.8%,100%{opacity:0}}
@keyframes postB{0%,90%,100%{opacity:0;transform:scale(.97)}91.5%,94%{opacity:1;transform:scale(1)}99.4%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes roleA1{0%,18.5%,21.5%,100%{opacity:.22;r:3}19.5%,20.8%{opacity:1;r:6}}
@keyframes roleA2{0%,24.5%,27.5%,100%{opacity:.22;r:3}25.5%,26.8%{opacity:1;r:6}}
@keyframes roleA3{0%,31.5%,34.5%,45.5%,48%,100%{opacity:.22;r:3}32.5%,33.8%,46.2%,47.4%{opacity:1;r:6}}