:root{--navy:#001935;--blue:#00457c;--cyan:#009fe3;--pale:#f1f4f6;--line:#dce5eb;--muted:#4b5862;--white:#fff;--wrap:1240px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{position:relative;margin:0;color:var(--navy);background:var(--white);font:300 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--font-head);letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.8rem,4.8vw,5.25rem);line-height:1.06}
h2{font-size:clamp(2.2rem,3.2vw,3.7rem);line-height:1.14}
h3{font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.24}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.container{width:min(calc(100% - 48px),var(--wrap));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-60px;z-index:60;background:var(--blue);color:#fff;padding:9px 14px;border-radius:5px}
.skip-link:focus{top:12px}
.site-header{height:72px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-inner{height:100%;display:flex;align-items:center;gap:40px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 18px/1 var(--font-ui);white-space:nowrap;letter-spacing:-.03em}
.brand-mark{width:34px;height:34px;background:var(--blue);border-radius:6px;display:grid;place-items:center;flex:none}
.brand-360{color:var(--cyan)}
.site-header nav{display:flex;gap:34px;margin-left:auto}
.site-header nav a{text-decoration:none;font:600 15px/1.2 var(--font-ui)}
.site-header nav a:hover{color:var(--blue)}
.header-action{text-decoration:none;background:var(--blue);color:#fff;border-radius:5px;padding:12px 18px;font:600 15px/1 var(--font-ui);white-space:nowrap}
.header-action:hover,.button-primary:hover{background:#003663}
.header-action-short{display:none}
.hero{background:var(--pale);padding:76px 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:min-content minmax(0,1fr);column-gap:56px;grid-template-rows:auto auto auto auto auto 1fr;align-items:start}
.hero-copy{display:contents}
.hero-copy>.overline,.hero-copy>h1{grid-column:1/-1}
.hero-copy>.hero-lead,.hero-copy>.hero-actions,.hero-copy>.hero-fine{grid-column:1}
.hero-visual{grid-column:2;grid-row:3/-1;margin-top:34px}
.overline{color:var(--blue);font:700 15px/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.hero-copy .overline span{display:block;text-align:left}
.hero-copy h1{max-width:none;font-size:clamp(2.8rem,5.6vw,5.6rem)}
.hero-visible{color:var(--cyan)}
.hero-lead{max-width:58ch;font-size:19px;line-height:1.55;color:#344858;margin-top:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.button{min-height:48px;padding:11px 20px;border:1px solid var(--blue);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font:600 15px/1.3 var(--font-ui);text-decoration:none;text-align:center;transition:background .15s,color .15s}
.button-primary{background:var(--blue);color:#fff}
.button-secondary{background:transparent;color:var(--blue)}
.button-secondary:hover{background:#e3edf4}
.hero-fine{font-size:16px;color:var(--muted);margin-top:17px}
.hero-visual{min-width:0}
.screen-frame{border:1px solid #c7d4dd;background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 18px 46px rgba(0,25,53,.16)}
.screen-frame-hero{width:118%;max-width:none}
.screen-frame-hero video{width:100%;max-width:none;object-fit:cover;object-position:top left}
.demo-motion{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;background:#edf2f5}
.section{padding:105px 0}
.section-intro{max-width:770px;margin-bottom:50px}
.section-intro>p:last-child{font-size:19px;color:var(--muted);margin-top:18px;max-width:66ch}
.process-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--blue)}
.process-list li{padding:22px 22px 0 0;border-right:1px solid var(--line);min-height:210px}
.process-list li+li{padding-left:22px}
.process-list li:last-child{border-right:0}
.process-no{display:block;color:var(--cyan);font:700 16px/1 var(--font-ui);margin-bottom:16px}
.process-list h3{font-size:18px}
.process-list p{font-size:16px;line-height:1.48;color:var(--muted);margin-top:9px}
.gallery-section{background:var(--navy);color:#fff}
.section-intro-light .overline{color:#69c7ef}
.section-intro-light>p:last-child{color:#c1d0da}
.gallery-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.gallery-tabs button{min-height:44px;background:transparent;color:#d8e8f1;border:1px solid #58728a;border-radius:5px;padding:10px 15px;cursor:pointer;font:600 15px/1 var(--font-ui)}
.gallery-tabs button[aria-selected="true"]{background:#fff;color:var(--navy);border-color:#fff}
.gallery-tabs button:hover:not([aria-selected="true"]){background:#173d5e}
.gallery-layout{display:grid;grid-template-columns:minmax(0,8fr) minmax(250px,3fr);gap:38px;align-items:start}
.gallery-frame{box-shadow:none}
.gallery-frame video{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.gallery-detail{padding:16px 0}
.gallery-index{color:#69c7ef;font:700 15px/1 var(--font-ui);margin-bottom:22px}
.gallery-detail h3{font-size:clamp(28px,2.2vw,34px);line-height:1.14}
.gallery-detail>p:not(.gallery-index){color:#c1d0da;font-size:18px;line-height:1.55;margin-top:18px}
.gallery-detail a{display:inline-block;color:#fff;font:600 15px/1.4 var(--font-ui);margin-top:30px;text-underline-offset:4px}
.gallery-detail a:hover{color:#69c7ef}
.features{padding-bottom:35px}
.feature-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:72px;align-items:center;border-top:1px solid var(--line);padding:66px 0}
.feature-row-reverse{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.features .feature-row.feature-reveal{opacity:0;transform:translateY(28px);transition:opacity .52s ease,transform .52s cubic-bezier(.22,1,.36,1)}
.features .feature-row.feature-reveal.feature-visible{opacity:1;transform:translateY(0)}
.feature-row-reverse .feature-copy{order:2}
.feature-copy{max-width:480px}
.role-tag{color:var(--blue);font:700 16px/1.3 var(--font-ui);margin-bottom:15px}
.feature-copy>p:not(.role-tag){font-size:18px;color:var(--muted);margin-top:18px}
.feature-copy ul{list-style:none;padding:0;margin:23px 0 0;display:grid;gap:11px}
.feature-copy li{position:relative;padding-left:17px;font-size:18px;font-weight:400}
.feature-copy li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.feature-shot{min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 16px 40px rgba(0,25,53,.1)}
.feature-shot video{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.asset-window{display:flex;align-items:center;min-height:380px;background-color:var(--navy);background-image:linear-gradient(90deg,rgba(0,25,53,.82),rgba(0,25,53,.48)),url("assets/asset-window.webp");background-position:center;background-size:cover;background-attachment:fixed;color:#fff}
.asset-window-content{padding-block:80px}
.asset-window h2{max-width:17ch;font-size:clamp(2.4rem,4vw,4.2rem)}
.asset-window p{max-width:55ch;margin-top:20px;font-size:20px;line-height:1.5;color:#e0eef6}
.detail-band{background:#eaf0f4}
.detail-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:68px;align-items:center}
.detail-grid>div>p:last-of-type{font-size:18px;color:var(--muted);margin-top:20px}
.detail-grid figure{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.detail-grid figure video{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px}
.fit-grid>div:first-child>p:last-child{font-size:18px;color:var(--muted);margin-top:20px}
.fit-points{border-top:1px solid var(--line)}
.fit-points>div{padding:20px 0;border-bottom:1px solid var(--line)}
.fit-points h3{font-size:18px}
.fit-points p{font-size:16px;color:var(--muted);margin-top:7px}
.faq{background:#fff}
.faq-list{max-width:900px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;padding:18px 0;cursor:pointer;font:600 18px/1.35 var(--font-ui)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;color:var(--blue);font:400 28px/1 var(--font-ui)}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{max-width:75ch;padding:0 35px 23px 0;color:var(--muted)}
.demo-section{background:var(--navy);color:#fff}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:start}
.demo-intro{padding-top:16px}
.demo-intro .overline{color:#69c7ef}
.demo-intro>p:not(.overline){font-size:19px;color:#c1d0da;margin-top:20px;max-width:45ch}
.demo-intro ul{list-style:none;padding:0;margin:35px 0 0;display:grid;gap:15px}
.demo-intro li{position:relative;padding-left:30px;font:600 16px/1.5 var(--font-ui)}
.demo-intro li::before{content:"✓";position:absolute;left:0;top:0;color:#69c7ef}
.demo-form{display:grid;gap:16px;background:#fff;color:var(--navy);padding:36px;border-radius:9px}
.demo-form h3{font-size:23px}
.form-preview{font-size:15px;line-height:1.45;color:var(--muted);padding:11px 13px;background:var(--pale);border-left:3px solid var(--cyan)}
.form-preview a,.form-privacy a{color:var(--blue);text-underline-offset:3px}
.demo-fields{display:grid;gap:16px;border:0;padding:0;margin:0;min-width:0}
.field{display:grid;gap:6px}
.field label{font:600 15px/1.35 var(--font-ui)}
.optional{font:400 15px/1 var(--font-body);color:var(--muted);margin-left:4px}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid #b9c7d1;border-radius:5px;background:#fff;color:var(--navy);font:400 16px/1.45 var(--font-body);padding:11px 13px}
.field textarea{min-height:98px;resize:vertical}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-select{position:relative}.field select{appearance:none;cursor:pointer;padding-right:42px}.field-select::after{content:"";position:absolute;right:18px;bottom:21px;width:7px;height:7px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.field-consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;cursor:pointer}.field-consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue);cursor:pointer}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:#f6f8f9;color:var(--muted);opacity:1}
.demo-form .button{width:100%;margin-top:2px}
.demo-form .button:disabled{background:#c2cdd5;border-color:#c2cdd5;color:#344858;cursor:not-allowed}
.form-note{text-align:center;font-size:15px;color:var(--muted)}
.form-privacy{font-size:15px;line-height:1.45;color:var(--muted)}
footer{background:var(--navy);color:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;font:600 15px/1.4 var(--font-ui)}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:18px;font-size:15px}
.footer-inner nav a{text-underline-offset:4px}
.footer-inner nav a:hover{color:#69c7ef}
.footer-inner p{font:300 15px/1.4 var(--font-body);color:#c1d0da}
.footer-note{margin:0;padding:0 0 24px;max-width:760px;font:300 13px/1.5 var(--font-body);color:var(--on-dark-muted,#c1d0da)}
.journey-track{position:absolute;top:0;left:0;z-index:3;width:100%;pointer-events:none;overflow:hidden;transition:opacity .14s ease}
.journey-track.journey-route-hidden{opacity:0}
.journey-track svg{display:block;width:100%;height:100%;overflow:visible}
.journey-track .journey-route-path{fill:none;stroke:#009fe3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.58}
.journey-orbit{--journey-x:72px;position:fixed;top:50%;left:0;z-index:4;width:clamp(104px,8vw,132px);aspect-ratio:1;pointer-events:none;transform:translate(-50%,-50%);margin-left:var(--journey-x);filter:drop-shadow(0 7px 15px rgba(0,25,53,.2))}
.journey-icon{--icon-p:var(--blue);--icon-a:var(--accent,var(--cyan));--icon-r:#d64545;position:relative;width:100%;height:100%;opacity:.88;perspective:600px}
.journey-on-dark .journey-icon{--icon-p:#fff;--icon-a:var(--on-dark-accent,#69c7ef);--icon-r:#ff6b6b}
.journey-face{position:absolute;inset:0;display:block;backface-visibility:hidden}
.journey-face svg{display:block;width:100%;height:100%;transform:scale(.92)}
.journey-face .p{fill:var(--icon-p)}
.journey-face .a{fill:var(--icon-a)}
.journey-face .r{fill:var(--icon-r)}
.journey-face .p-line{stroke:var(--icon-p)}
.journey-face .a-line{stroke:var(--icon-a)}
.journey-face.journey-icon-in{animation:journey-icon-in .32s cubic-bezier(.33,0,.2,1) .3s both}
.journey-face.journey-icon-out{animation:journey-icon-out .3s cubic-bezier(.6,0,.8,.4) both}

.journey-track .journey-route-arrow{fill:none;stroke:#009fe3;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;opacity:1;vector-effect:non-scaling-stroke}
@keyframes journey-icon-in{0%{transform:rotateY(-90deg)}100%{transform:rotateY(0)}}
@keyframes journey-icon-out{0%{transform:rotateY(0)}100%{transform:rotateY(90deg);visibility:hidden}}
@media(max-width:1050px){.hero-grid{gap:30px}.screen-frame-hero{width:110%}.gallery-layout{grid-template-columns:minmax(0,7fr) minmax(220px,3fr)}.feature-row,.feature-row-reverse{gap:36px}.fit-grid{gap:45px}}
@media(max-width:800px){.site-header nav{display:none}.header-action{margin-left:auto}.hero{padding-top:60px}.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy h1{max-width:17ch}.screen-frame-hero{width:100%}.process-list{grid-template-columns:repeat(2,1fr)}.process-list li:nth-child(2n){border-right:0}.process-list li:nth-child(3),.process-list li:nth-child(5){padding-left:0}.gallery-layout{grid-template-columns:1fr}.gallery-detail{padding:0}.feature-row,.feature-row-reverse,.detail-grid,.fit-grid,.demo-grid{grid-template-columns:1fr}.feature-row-reverse .feature-copy{order:0}.feature-copy{max-width:660px}.demo-grid{gap:42px}}
@media(max-width:520px){.container{width:min(calc(100% - 32px),var(--wrap))}.site-header{height:60px}.brand{font-size:15px;gap:7px}.brand-mark{width:29px;height:29px}.brand-mark img{width:21px;height:21px}.header-action{font-size:15px;padding:10px 11px}.hero{padding-top:44px}.overline{font-size:15px}.hero-lead{font-size:17px;margin-top:21px}.hero-actions{display:grid}.hero-actions .button{width:100%}.section{padding:72px 0}.section-intro{margin-bottom:34px}.section-intro>p:last-child{font-size:17px}.process-list{grid-template-columns:1fr}.process-list li,.process-list li+li,.process-list li:nth-child(3),.process-list li:nth-child(5){padding:17px 0;border-right:0;border-bottom:1px solid var(--line);min-height:0}.process-list li:last-child{border-bottom:0}.process-no{display:inline-block;width:36px;margin:0}.process-list h3{display:inline;font-size:18px}.process-list p{margin:5px 0 0 36px}.gallery-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gallery-tabs button{font-size:15px;padding:8px}.gallery-detail h3{font-size:26px}.gallery-detail>p:not(.gallery-index){font-size:17px}.feature-row{padding:46px 0;gap:25px}.feature-shot img,.detail-grid figure img{aspect-ratio:4/3}.fit-grid{gap:34px}.footer-inner{display:block}.footer-inner nav{margin-top:14px}.footer-inner p{margin-top:10px}}
@media(max-width:360px){.header-action-long{display:none}.header-action-short{display:inline}}
@media(max-width:520px){.faq-list summary{font-size:16px;min-height:62px}.faq-list details p{padding-right:0;font-size:15px}.demo-form{padding:22px}.demo-intro>p:not(.overline){font-size:17px}}
@media(max-width:800px){.asset-window{min-height:340px;background-attachment:scroll;background-position:58% center}.asset-window p{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.asset-window{background-attachment:scroll}}
@media(max-width:800px),(prefers-reduced-motion:reduce){.journey-track,.journey-orbit{display:none}}
.journey-track.journey-off,.journey-orbit.journey-off{display:none}
.brand-mark{--logo-bg:var(--blue);--logo-a:var(--accent,var(--cyan));background:none!important;border-radius:0!important}
.brand-mark svg{display:block;width:100%;height:100%}
@media(max-width:800px){.hero-grid{row-gap:0;grid-template-rows:none}.hero-copy>*,.hero-visual{grid-column:1;grid-row:auto}.hero-visual{margin-top:35px}}
@media(min-width:801px){.hero-actions{flex-wrap:nowrap}.hero-actions .button{white-space:nowrap}}
@media(min-width:1051px){.screen-frame-hero{width:810px}}
.flow{position:relative;display:grid;grid-template-columns:150px repeat(5,minmax(0,1fr));grid-template-rows:44px repeat(4,minmax(112px,auto));border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.flow-head,.flow-lane{grid-column:1;display:flex;align-items:center;padding:0 16px;border-right:1px solid var(--line);font:700 12px/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.flow-head{grid-row:1;border-bottom:1px solid var(--line)}
.flow-lane{grid-row:var(--row);border-top:1px solid var(--line)}
.flow-lane:nth-of-type(odd){background:var(--pale)}
.flow::before,.flow::after{content:"";grid-column:2/-1;pointer-events:none}
.flow::before{grid-row:3;background:var(--pale);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow::after{grid-row:5;background:var(--pale);border-top:1px solid var(--line)}
.flow-status{grid-row:1;grid-column:calc(var(--col) + 1);align-self:center;margin:0 10px;padding:4px 8px;border-radius:3px;background:var(--blue);color:#fff;font:700 11px/1.2 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-status:nth-of-type(odd){background:var(--accent-text,var(--blue))}
.flow-steps{display:contents;list-style:none;margin:0;padding:0}
.flow-steps li{position:relative;z-index:2;grid-row:var(--row);grid-column:calc(var(--col) + 1);align-self:center;margin:14px 12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent,var(--cyan));border-radius:6px;box-shadow:0 4px 14px rgb(0 0 0 / .05)}
.flow-steps .process-no{display:inline;margin-right:8px;font-size:17px}
.flow-steps h3{display:inline;font-size:17px}
.flow-steps p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--muted)}
.flow-edges{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.flow-edges path{fill:none;stroke:var(--accent,var(--cyan));stroke-width:1.6}
.flow-edges .flow-arrow{fill:var(--accent,var(--cyan));stroke:none}
@media(max-width:1200px){.flow{grid-template-columns:96px repeat(5,minmax(0,1fr))}.flow-head,.flow-lane{padding:0 10px;font-size:11px;letter-spacing:.03em;hyphens:auto;overflow-wrap:anywhere}.flow-steps h3{hyphens:auto;overflow-wrap:break-word}.flow-steps li{margin:12px 6px;padding:10px}.flow-steps p{font-size:13px}.flow-steps h3,.flow-steps .process-no{font-size:15px}.flow-steps .process-no{margin-right:5px}}
@media(max-width:800px){.flow{display:block;border:0;background:none;overflow:visible}.flow::before,.flow::after,.flow-head,.flow-lane,.flow-status,.flow-edges{display:none}.flow-steps{display:grid;gap:14px;padding-left:18px;border-left:2px solid var(--accent,var(--cyan))}.flow-steps li{margin:0;grid-row:auto;grid-column:auto}.flow-steps li::before{content:attr(data-lane);display:block;margin-bottom:4px;font:700 11px/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}}
[id^="funktion-"]{scroll-margin-top:28px}
@media(min-width:801px){.hero{padding-top:44px}.hero-copy h1{font-size:clamp(2.8rem,5.2vw,5rem)}.hero-visual{margin-top:26px}}
@media(min-width:1051px){.screen-frame-hero{width:740px}}
@media(max-width:420px){.header-action-long{display:none}.header-action-short{display:inline}}
@media(min-width:1051px){.hero-visual{justify-self:end}.screen-frame-hero{margin-left:auto}}
@media(min-width:1051px){.hero-grid{grid-template-columns:minmax(0,1fr) 740px}.hero-actions{flex-wrap:nowrap}}
@media(min-width:1051px){.hero-grid{grid-template-columns:minmax(440px,1fr) minmax(0,740px)}.screen-frame-hero{width:100%;max-width:740px}}
@media(min-width:801px){.hero-actions{display:flex;flex-wrap:nowrap}.hero-actions .button{flex:1 1 auto}}
.hero-copy>.hero-lead-next{margin-top:12px;grid-row:4}.hero-copy>.hero-lead-next~.hero-actions{grid-row:5}@media(max-width:800px){.hero-copy>.hero-lead-next,.hero-copy>.hero-lead-next~.hero-actions{grid-row:auto}}
.flow-lane,.flow-status{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.flow-lane-text{display:inline-block;transform-origin:left center;transition:transform .2s ease,color .2s ease}.flow-lane.is-active .flow-lane-text{transform:scale(1.1);color:var(--accent-text,var(--blue))}
.flow-status.is-active{position:relative;z-index:3;transform:scale(1.06);box-shadow:0 3px 8px rgb(0 0 0 / .14)}
.flow-steps li{cursor:default;transition:box-shadow .2s ease,border-color .2s ease}
.flow-steps li:focus-visible{outline:3px solid var(--accent,var(--cyan));outline-offset:2px}
.flow-steps li.is-active{z-index:5;border-color:var(--accent,var(--cyan));box-shadow:0 10px 26px rgb(0 0 0 / .12)}
.flow-preview{z-index:4;align-self:stretch;margin:14px 12px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 18px 44px rgb(0 0 0 / .18);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.flow-preview.is-visible{opacity:1;transform:none}
.flow-preview video{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;background:#fff}
@media(max-width:800px){.flow-preview{display:none}}
@media(prefers-reduced-motion:reduce){.flow-lane,.flow-status,.flow-steps li,.flow-preview{transition:none}.flow-lane.is-active .flow-lane-text,.flow-status.is-active{transform:none}.flow-preview{transform:none}}
.flow-preview{border-color:color-mix(in srgb,var(--navy) 22%,transparent);box-shadow:0 0 0 1px rgb(0 0 0 / .06),0 10px 24px rgb(0 0 0 / .18),0 28px 64px rgb(0 0 0 / .26)}
.keep-line{white-space:nowrap}
#demo-title{font-size:clamp(2.2rem,3.2vw,3.4rem)}
.field-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.field-error{margin:0;font-size:14px;color:#b3261e}.field input[aria-invalid="true"]{border-color:#b3261e}.form-error{margin:0;padding:11px 13px;font-size:15px;line-height:1.45;color:#7a1c16;background:#fdecea;border-left:3px solid #b3261e}.form-error a{color:inherit}.demo-success{align-content:start}.demo-success p{margin:0;color:var(--muted)}.demo-success .button{justify-self:start}.demo-success:focus{outline:none}
.demo-form[hidden],.form-error[hidden],.field-error[hidden]{display:none}
.flow-preview{position:relative;min-height:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}.flow-preview video{position:absolute;inset:14px 12px;width:calc(100% - 24px);height:calc(100% - 28px);box-sizing:border-box;border:1px solid color-mix(in srgb,var(--navy) 22%,transparent);border-radius:8px;box-shadow:0 0 0 1px rgb(0 0 0 / .06),0 10px 24px rgb(0 0 0 / .18),0 28px 64px rgb(0 0 0 / .26)}