:root {
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:#18232f;
  background:#eef7fa;
  font-size:18px;
  line-height:1.55;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:linear-gradient(180deg,#dff3f8 0,#f6fbfc 520px,#fff 100%)
}
button,input,textarea,select {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.65
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible {
  outline:3px solid #17333e;
  outline-offset:4px
}
button {
  color:inherit
}
h1,h2,p {
  margin-top:0
}
h1 {
  font-size:clamp(2rem,4vw,2.8rem);
  line-height:1.12;
  letter-spacing:-.045em;
  max-width:22ch;
  margin-bottom:22px;
  font-weight:750
}
h2 {
  font-size:1.12rem;
  line-height:1.3
}
p {
  margin-bottom:20px
}
small,.small {
  font-size:.85rem;
  line-height:1.5;
  color:#48616b
}
.skip {
  position:fixed;
  left:16px;
  top:-100px;
  background:white;
  z-index:10;
  padding:10px
}
.skip:focus {
  top:8px
}
.trustbar {
  min-height:34px;
  background:#49abc7;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,7vw,110px);
  padding:7px 18px;
  font-size:.7rem;
  font-weight:700
}
.trustbar span+span:before {
  content:'•';
  margin-right:clamp(28px,7vw,110px);
  opacity:.7
}
.site-header {
  background:#fff;
  border-bottom:1px solid #e5edf0
}
.site-header-inner {
  max-width:1180px;
  min-height:92px;
  margin:auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:26px
}
.pilot {
  background:#183b4a;
  color:#fff;
  font-size:.78rem;
  text-align:center;
  padding:8px 16px;
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap
}
.pilot a {
  font-weight:bold;
  text-underline-offset:3px
}
.shell {
  max-width:780px;
  margin:auto;
  padding:22px 24px 36px
}
.shell.wide {
  max-width:940px
}
.brand {
  text-decoration:none;
  display:flex;
  align-items:center
}
.brand img {
  width:210px;
  height:auto;
  display:block
}
.header-label {
  font-size:.82rem;
  color:#41606c;
  border-left:1px solid #d8e4e8;
  padding-left:22px;
  text-transform:uppercase;
  font-weight:750;
  letter-spacing:.09em
}
.quiet {
  margin-left:auto;
  border:1px solid #a8ced9;
  background:#eef9fb;
  border-radius:999px;
  padding:10px 15px;
  min-height:48px;
  font-size:.85rem;
  font-weight:bold
}
main {
  background:white;
  border-radius:24px;
  padding:34px 48px 46px;
  border:1px solid #d9e8ec;
  box-shadow:0 18px 50px #164b5d12;
  outline:none
}
.context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:25px;
  min-height:10px
}
.context:has([hidden]):not(:has(.product-chip)) {
  margin:0
}
.back {
  border:0;
  background:none;
  padding:8px 0;
  min-height:44px;
  font-size:.9rem
}
.product-chip {
  margin-left:auto;
  border:1px solid #d4e3e8;
  border-radius:12px;
  background:#f8fcfd;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 12px;
  min-height:50px;
  font-size:.88rem
}
.product-chip img {
  width:34px;
  height:38px;
  object-fit:contain
}
.change {
  font-size:.8rem;
  color:#42616a;
  text-decoration:underline;
  margin-left:8px
}
.eyebrow {
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.045em;
  color:#076879;
  margin-bottom:15px
}
.lead {
  font-size:1.08rem;
  color:#405e69;
  max-width:57ch;
  margin-bottom:28px
}
.startklaar-card {
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:0 0 24px;
  padding:20px;
  border:1px solid #add8e1;
  border-radius:16px;
  background:linear-gradient(135deg,#effbfc,#fff)
}
.startklaar-card>span {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  height:42px;
  border-radius:50%;
  background:#087c8e;
  color:white;
  font-size:1.2rem;
  font-weight:800
}
.startklaar-card strong {font-size:1.08rem}
.startklaar-card p {margin:5px 0 0;color:#405e69}
.source-link {display:inline-block;margin-top:22px;color:#076879;font-weight:700}
#startklaar-form fieldset {border:1px solid #c5dce1;border-radius:14px;margin:24px 0;padding:20px}
#startklaar-form legend {font-weight:750;padding:0 8px}
#startklaar-form details {padding:16px 0}
#startklaar-form .consent {display:flex;align-items:flex-start;gap:12px;margin:20px 0}
#startklaar-form .consent input {flex:0 0 24px;width:24px;height:24px;margin-top:3px}
.home-choices {
  display:grid;
  gap:14px
}
.intent {
  display:grid;
  grid-template-columns:46px 1fr 20px;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid #c5dce1;
  border-radius:14px;
  padding:23px;
  text-align:left;
  min-height:110px
}
.intent:first-child {
  background:#eaf9fc;
  border:2px solid #0a7486
}
.intent:hover,.model:hover {
  border-color:#086c80;
  background:#effbfc
}
.intent strong {
  display:block;
  font-size:1.16rem;
  letter-spacing:-.02em
}
.intent small {
  display:block;
  margin-top:4px;
  font-size:.88rem
}
.intent-icon {
  background:#e8f6f9;
  color:#086b7d;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:.85rem;
  font-weight:bold
}
.intent b {
  color:#087184;
  font-size:1.35rem
}
.home-note {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:.82rem;
  color:#48616b;
  margin-top:28px
}
.home-note span {
  color:#076b59
}
.choices {
  display:grid;
  gap:12px;
  margin-top:28px
}
.action {
  border:2px solid #183b4a;
  background:#183b4a;
  color:white;
  padding:16px 20px;
  border-radius:12px;
  min-height:64px;
  text-align:left;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none
}
.action:hover {
  background:#102f3c;
  border-color:#102f3c
}
.action.secondary {
  background:white;
  color:#173b48;
  border-color:#c9dce1;
  font-weight:500
}
.action.secondary:hover {
  background:#eff9fb;
  border-color:#076b7d
}
.model-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px
}
.model {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:12px 6px;
  border:1px solid #ccdee4;
  border-radius:12px;
  background:#fff;
  min-width:0
}
.model img {
  height:104px;
  width:100%;
  object-fit:contain;
  margin-bottom:10px
}
.model strong {
  font-size:.9rem
}
.model small {
  font-size:.76rem;
  line-height:1.3;
  margin-top:4px
}
.group-title {
  margin-top:30px
}
.section-end {
  margin-top:24px
}
.info,.summary {
  background:#edf8fa;
  border:1px solid #d5e9ed;
  border-radius:13px;
  padding:22px;
  margin:24px 0
}
.info p:last-child,.summary p:last-child {
  margin-bottom:0
}
.info h2 {
  margin-bottom:8px
}
.info.compact {
  font-size:.9rem
}
.warning {
  background:#fff5e7;
  border-left:4px solid #aa510d;
  padding:18px;
  margin:22px 0;
  color:#763809;
  font-size:.95rem
}
.progress-label {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:.8rem;
  color:#4b6470
}
.progress-label span:last-child {
  white-space:nowrap
}
progress {
  display:block;
  width:100%;
  height:7px;
  appearance:none;
  border:0;
  margin:10px 0 27px;
  border-radius:20px;
  overflow:hidden;
  background:#e1eef1
}
progress::-webkit-progress-bar {
  background:#e1eef1
}
progress::-webkit-progress-value {
  background:#098295
}
progress::-moz-progress-bar {
  background:#098295
}
.topic-group {
  margin-top:28px
}
.topic-group h2 {
  color:#31525f;
  font-size:1rem
}
.topic-list {
  display:grid;
  gap:0
}
.topic-list button {
  border:0;
  border-bottom:1px solid #dbe7eb;
  background:white;
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:16px 0;
  text-align:left;
  font-size:.95rem;
  min-height:56px
}
.topic-list button:hover {
  color:#08778b
}
.search-label {
  display:block;
  margin-top:34px;
  margin-bottom:8px;
  font-weight:bold;
  font-size:.9rem
}
input,textarea,select {
  width:100%;
  border:1px solid #9eb8c2;
  background:#fff;
  color:#193b48;
  border-radius:9px;
  padding:12px;
  min-height:50px
}
textarea {
  resize:vertical
}
label {
  display:block;
  font-size:.95rem;
  font-weight:bold;
  margin-bottom:8px
}
.optional {
  font-weight:normal;
  font-size:.85rem
}
form .small {
  margin-top:8px
}
.error {
  color:#a52220;
  font-size:.9rem
}
.error:empty {
  display:none
}
.contact-options {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
  border-top:1px solid #d6e6e9;
  padding-top:20px;
  font-size:.88rem
}
.contact-options button {
  border:0;
  background:transparent;
  text-decoration:underline;
  padding:0;
  min-height:44px
}
.contact-options a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.success-mark {
  width:62px;
  height:62px;
  border-radius:50%;
  background:#e4f6ef;
  display:grid;
  place-items:center;
  color:#0b7454;
  font-size:1.7rem;
  margin-bottom:24px
}
.resume {
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.88rem
}
.resume button {
  border:0;
  background:none;
  text-decoration:underline
}
footer {
  color:#103d48;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 16px;
  font-size:.85rem;
  padding-top:25px
}
footer button {
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:4px;
  min-height:44px;
  font-weight:bold
}
footer small {
  color:#16414c;
  flex-basis:100%;
  text-align:center;
  font-size:.76rem
}
details summary {
  cursor:pointer;
  min-height:44px
}
details li {
  margin-top:12px;
  font-size:.9rem
}
noscript main {
  margin:30px;
  max-width:700px
}
@media(max-width:650px) {
  .shell,.shell.wide {
  padding:12px 12px 26px
}
.trustbar {justify-content:flex-start;overflow:hidden;white-space:nowrap;font-size:.66rem}
.trustbar span:not(:first-child) {display:none}
.site-header-inner {min-height:76px;padding:11px 18px;gap:12px}
.header-label {
  display:none
}
.brand {
  margin-right:auto
}
.brand img {
  width:164px
}
.quiet {
  font-size:.8rem;
  padding:9px 12px
}
main {
  padding:24px 22px 30px;
  border-radius:17px
}
h1 {
  font-size:2rem
}
.lead {
  font-size:1rem
}
.intent {
  grid-template-columns:36px 1fr 15px;
  padding:18px 14px;
  gap:12px;
  min-height:114px
}
.intent-icon {
  width:34px;
  height:34px
}
.intent strong {
  font-size:1.06rem
}
.intent small {
  font-size:.83rem
}
.model-grid {
  grid-template-columns:repeat(2,1fr)
}
.model img {
  height:110px
}
.model strong {
  font-size:1rem
}
.model small {
  font-size:.8rem
}
.pilot {
  font-size:.72rem;
  gap:4px 14px
}
.desktop-break {
  display:none
}
.home-note {
  align-items:flex-start
}
.action {
  font-size:.96rem
}
.context {
  margin-bottom:20px
}
.product-chip {
  font-size:.83rem
}
.progress-label {
  font-size:.72rem
}
.resume {
  flex-wrap:wrap
}
.step-media {grid-template-columns:1fr}
.step-media-image {min-height:180px}
.step-media img {height:160px}
.step-media.app-screen img {height:230px}
.step-media figcaption {padding:18px}

}
@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important
}

}
@media(min-width:651px) {
  .home-choices {
  margin-top:32px
}

}


.store-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0
}
.store-links a {
  padding:12px 15px;
  border:1px solid #b7d5df;
  border-radius:10px;
  font-size:.9rem;
  min-height:48px
}
.app-example {
  border:1px solid #ccdfe5;
  border-radius:12px;
  padding:15px;
  margin-bottom:20px
}
.app-example img {
  display:block;
  width:min(100%,240px);
  height:auto;
  margin:18px auto;
  border:1px solid #d9e6ea;
  border-radius:12px
}
.app-example .small {
  margin-bottom:0
}
.step-media {
  display:grid;
  grid-template-columns:minmax(180px,42%) 1fr;
  overflow:hidden;
  margin:8px 0 24px;
  border:1px solid #d6e5e9;
  border-radius:16px;
  background:#f4fafb
}
.step-media-image {
  min-height:220px;
  background:#fff;
  display:grid;
  place-items:center;
  padding:18px
}
.step-media img {
  display:block;
  width:100%;
  height:190px;
  object-fit:contain
}
.step-media.app-screen img {
  height:260px
}
.step-media figcaption {
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  color:#38545f
}
.step-media figcaption strong {
  color:#18232f;
  font-size:1rem
}
.step-media figcaption small {
  margin-top:6px
}
.media-label {
  color:#16849d;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase
}
@media(max-width:650px) {
  .step-media {grid-template-columns:1fr}
  .step-media-image {min-height:180px}
  .step-media img {height:160px}
  .step-media.app-screen img {height:230px}
  .step-media figcaption {padding:18px}
}
.instruction-card {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:0 20px
}
.instruction-card h1 {
  margin-bottom:16px
}
.instruction-number {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0b7183;
  color:#fff;
  font-weight:800;
  font-size:.9rem
}
.instruction-visual,.expected,.instruction-card .info,.instruction-card .choices {
  grid-column:1/-1
}
.instruction-visual {
  margin:8px 0 22px;
  min-height:230px;
  display:grid;
  place-items:center;
  background:#f2fafb;
  border:1px solid #d7e9ed;
  border-radius:16px;
  padding:22px
}
.instruction-visual img {
  width:min(100%,260px);
  height:210px;
  object-fit:contain
}
.instruction-visual figcaption {
  color:#48616b;
  font-size:.82rem;
  margin-top:10px
}
.expected {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 20px;
  border-left:4px solid #0b7183;
  background:#edf8fa;
  border-radius:4px 12px 12px 4px
}
.expected span {
  color:#3c5964
}
.diagnosis-tools {
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:24px
}
.diagnosis-tools button {
  min-height:48px;
  padding:8px 0;
  border:0;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:4px
}
.record-type {
  display:inline-block;
  margin-right:6px;
  padding:2px 7px;
  border-radius:5px;
  background:#dff3f6;
  color:#075e6d;
  font-size:.72rem;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.025em
}
@media(max-width:650px) {
  .instruction-card {grid-template-columns:42px minmax(0,1fr);gap:0 12px}
  .instruction-number {width:40px;height:40px}
  .instruction-visual {min-height:190px;padding:14px}
  .instruction-visual img {height:170px}
}

/* Step animations (src/animations.js): three numbered scenes, 10s loop.
   Base styles = the still frame of scene 2 (used for prefers-reduced-motion). */
.step-media.anim-figure {grid-template-columns:1fr}
.step-media.anim-figure .step-media-image {padding:12px 12px 4px}
.anim {width:100%;max-width:420px;height:auto;display:block}
.anim * {animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.anim-figure.paused .anim * {animation-play-state:paused}
.anim-toggle {align-self:flex-start;margin-top:4px;border:1px solid #a8ced9;background:#fff;color:#2f4a55;border-radius:999px;padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer}
.anim-toggle:focus-visible {outline:3px solid #2c8fae;outline-offset:2px}
.anim-tap {opacity:0;transform-box:fill-box;transform-origin:center}
.anim-steps .anim-sc1 {animation-name:anim-sc1}
.anim-steps .anim-sc2 {animation-name:anim-sc2}
.anim-steps .anim-sc3 {animation-name:anim-sc3}
@keyframes anim-sc1 {0%,26% {opacity:1} 28%,100% {opacity:0}}
@keyframes anim-sc2 {0%,27% {opacity:0} 29%,64% {opacity:1} 66%,100% {opacity:0}}
@keyframes anim-sc3 {0%,65% {opacity:0} 67%,100% {opacity:1}}

/* Charging */
.anim-charge .anim-noclick, .anim-charge .anim-turn {opacity:0}
.anim-charge .anim-usb {animation-name:anim-ch-usb}
.anim-charge .anim-adapter {animation-name:anim-ch-adapter}
.anim-charge .anim-head {animation-name:anim-ch-head}
.anim-charge .anim-noclick {animation-name:anim-ch-noclick}
.anim-charge .anim-turn {animation-name:anim-ch-turn}
.anim-charge .anim-click {animation-name:anim-ch-click}
.anim-charge .anim-batt {transform-box:fill-box;transform-origin:left center;animation-name:anim-charge-batt}
.anim-charge .anim-bolt {animation-name:anim-charge-bolt}
.anim-charge .anim-done {animation-name:anim-done-charge}
@keyframes anim-ch-usb {0%,3% {transform:translateX(-30px)} 11%,100% {transform:translateX(0)}}
@keyframes anim-ch-adapter {0%,13% {transform:translateX(-36px)} 22%,100% {transform:translateX(0)}}
@keyframes anim-ch-head {
  0%,29% {opacity:0;transform:translate(0,46px) rotate(180deg)}
  33% {opacity:1;transform:translate(0,14px) rotate(180deg)}
  37% {transform:translate(0,2px) rotate(180deg)}
  40% {transform:translate(0,14px) rotate(180deg)}
  45% {transform:translate(0,14px) rotate(180deg)}
  51% {transform:translate(0,14px) rotate(0deg)}
  55% {transform:translate(0,0) rotate(0deg)}
  56% {transform:translate(0,1.5px) rotate(0deg)}
  57%,100% {opacity:1;transform:translate(0,0) rotate(0deg)}
}
@keyframes anim-ch-noclick {0%,37% {opacity:0} 39%,45% {opacity:1} 46%,100% {opacity:0}}
@keyframes anim-ch-turn {0%,46% {opacity:0} 47%,53% {opacity:1} 54%,100% {opacity:0}}
@keyframes anim-ch-click {0%,55% {opacity:0} 56%,100% {opacity:1}}
@keyframes anim-charge-batt {0%,68% {transform:scaleX(.15)} 95%,100% {transform:scaleX(1)}}
@keyframes anim-charge-bolt {0%,69% {opacity:0} 72%,100% {opacity:1}}
@keyframes anim-done-charge {0%,76% {opacity:0} 80%,100% {opacity:1}}

.anim-simkaart .s-card {animation-name:k-s-card}
@keyframes k-s-card {0%,2% {opacity:0;transform:translateY(-60px)} 4% {opacity:1;transform:translateY(-60px)} 12%,100% {opacity:1;transform:translateY(0)}}
.anim-simkaart .s-tray {animation-name:k-s-tray}
@keyframes k-s-tray {0%,14% {transform:translateX(0)} 22%,100% {transform:translateX(-36px)}}
.anim-steps .s-placed {opacity:0;animation-name:k-s-placed}
@keyframes k-s-placed {0%,21% {opacity:0} 22%,27% {opacity:1} 28%,100% {opacity:0}}
.anim-simkaart .s-pin-track {fill:#b8c4c9;animation-name:k-s-pin-track}
@keyframes k-s-pin-track {0%,42% {fill:#3a9a68} 45%,100% {fill:#b8c4c9}}
.anim-simkaart .s-pin-knob {transform:translateX(-8px);animation-name:k-s-pin-knob}
@keyframes k-s-pin-knob {0%,42% {transform:translateX(0)} 45%,100% {transform:translateX(-8px)}}
.anim-steps .s-tap {animation-name:k-s-tap}
@keyframes k-s-tap {0%,39% {opacity:0;transform:scale(1.4)} 42% {opacity:1;transform:scale(1)} 43.5% {transform:scale(.75)} 45% {opacity:1;transform:scale(1)} 47%,100% {opacity:0;transform:scale(1)}}
.anim-steps .s-menu {opacity:1;animation-name:k-s-menu}
@keyframes k-s-menu {0%,32% {opacity:0} 33%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .s-off {opacity:1;animation-name:k-s-off}
@keyframes k-s-off {0%,46% {opacity:0} 47%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .s-data-bad {opacity:0;animation-name:k-s-data-bad}
@keyframes k-s-data-bad {0%,67% {opacity:0} 68%,81% {opacity:1} 82%,100% {opacity:0}}
.anim-steps .s-data-ok {opacity:0;animation-name:k-s-data-ok}
@keyframes k-s-data-ok {0%,81% {opacity:0} 82%,100% {opacity:1}}
.anim-steps .s-only-call {opacity:0;animation-name:k-s-only-call}
@keyframes k-s-only-call {0%,69% {opacity:0} 70%,79% {opacity:1} 80%,100% {opacity:0}}
.anim-steps .s-topup {opacity:0;animation-name:k-s-topup}
@keyframes k-s-topup {0%,79% {opacity:0} 80%,86% {opacity:1} 87%,100% {opacity:0}}
.anim-steps .s-works {opacity:0;animation-name:k-s-works}
@keyframes k-s-works {0%,86% {opacity:0} 87%,100% {opacity:1}}
.anim-steps .q-home {opacity:0;animation-name:k-q-home}
@keyframes k-q-home {0%,12% {opacity:1} 13%,100% {opacity:0}}
.anim-steps .q-add {opacity:0;animation-name:k-q-add}
@keyframes k-q-add {0%,12% {opacity:0} 13%,28% {opacity:1} 29%,100% {opacity:0}}
.anim-steps .q-tap1 {animation-name:k-q-tap1}
@keyframes k-q-tap1 {0%,5% {opacity:0;transform:scale(1.4)} 8% {opacity:1;transform:scale(1)} 9.5% {transform:scale(.75)} 11% {opacity:1;transform:scale(1)} 13%,100% {opacity:0;transform:scale(1)}}
.anim-steps .q-tap2 {animation-name:k-q-tap2}
@keyframes k-q-tap2 {0%,17% {opacity:0;transform:scale(1.4)} 20% {opacity:1;transform:scale(1)} 21.5% {transform:scale(.75)} 23% {opacity:1;transform:scale(1)} 25%,100% {opacity:0;transform:scale(1)}}
.anim-steps .q-plus {opacity:0;animation-name:k-q-plus}
@keyframes k-q-plus {0%,2% {opacity:0} 3%,12% {opacity:1} 13%,100% {opacity:0}}
.anim-steps .q-square {opacity:0;animation-name:k-q-square}
@keyframes k-q-square {0%,13% {opacity:0} 14%,28% {opacity:1} 29%,100% {opacity:0}}
.anim-steps .q-aim-bad {opacity:0;animation-name:k-q-aim-bad}
@keyframes k-q-aim-bad {0%,33% {opacity:0} 34%,45% {opacity:1} 46%,100% {opacity:0}}
.anim-steps .q-view-bad {opacity:0;animation-name:k-q-view-bad}
@keyframes k-q-view-bad {0%,33% {opacity:0} 34%,45% {opacity:1} 46%,100% {opacity:0}}
.anim-steps .q-bad {opacity:0;animation-name:k-q-bad}
@keyframes k-q-bad {0%,36% {opacity:0} 37%,45% {opacity:1} 46%,100% {opacity:0}}
.anim-steps .q-aim-good {opacity:1;animation-name:k-q-aim-good}
@keyframes k-q-aim-good {0%,49% {opacity:0} 50%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .q-view-good {opacity:1;animation-name:k-q-view-good}
@keyframes k-q-view-good {0%,49% {opacity:0} 50%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .q-good {opacity:1;animation-name:k-q-good}
@keyframes k-q-good {0%,52% {opacity:0} 53%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .q-name {opacity:0;animation-name:k-q-name}
@keyframes k-q-name {0%,69% {opacity:0} 70%,100% {opacity:1}}
.anim-steps .q-rel {opacity:0;animation-name:k-q-rel}
@keyframes k-q-rel {0%,74% {opacity:0} 75%,100% {opacity:1}}
.anim-steps .q-tap3 {animation-name:k-q-tap3}
@keyframes k-q-tap3 {0%,78% {opacity:0;transform:scale(1.4)} 81% {opacity:1;transform:scale(1)} 82.5% {transform:scale(.75)} 84% {opacity:1;transform:scale(1)} 86%,100% {opacity:0;transform:scale(1)}}
.anim-steps .q-done {opacity:0;animation-name:k-q-done}
@keyframes k-q-done {0%,84% {opacity:0} 85%,100% {opacity:1}}
.anim-steps .q-inapp {opacity:0;animation-name:k-q-inapp}
@keyframes k-q-inapp {0%,88% {opacity:0} 89%,100% {opacity:1}}
.anim-contacten .c-row {animation-name:k-c-row}
@keyframes k-c-row {0%,11% {fill:#fff} 13%,26% {fill:#d9f0f6} 28%,100% {fill:#fff}}
.anim-steps .c-tap1 {animation-name:k-c-tap1}
@keyframes k-c-tap1 {0%,10% {opacity:0;transform:scale(1.4)} 13% {opacity:1;transform:scale(1)} 14.5% {transform:scale(.75)} 16% {opacity:1;transform:scale(1)} 18%,100% {opacity:0;transform:scale(1)}}
.anim-steps .c-pick {opacity:0;animation-name:k-c-pick}
@keyframes k-c-pick {0%,3% {opacity:0} 4%,28% {opacity:1} 29%,100% {opacity:0}}
.anim-steps .c-nr1 {opacity:1;animation-name:k-c-nr1}
@keyframes k-c-nr1 {0%,34% {opacity:0} 35%,100% {opacity:1}}
.anim-steps .c-nr2 {opacity:1;animation-name:k-c-nr2}
@keyframes k-c-nr2 {0%,38% {opacity:0} 39%,100% {opacity:1}}
.anim-steps .c-nr3 {opacity:1;animation-name:k-c-nr3}
@keyframes k-c-nr3 {0%,42% {opacity:0} 43%,100% {opacity:1}}
.anim-steps .c-admin {opacity:1;animation-name:k-c-admin}
@keyframes k-c-admin {0%,32% {opacity:0} 33%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .c-tap2 {animation-name:k-c-tap2}
@keyframes k-c-tap2 {0%,47% {opacity:0;transform:scale(1.4)} 50% {opacity:1;transform:scale(1)} 51.5% {transform:scale(.75)} 53% {opacity:1;transform:scale(1)} 55%,100% {opacity:0;transform:scale(1)}}
.anim-steps .c-saved {opacity:1;animation-name:k-c-saved}
@keyframes k-c-saved {0%,53% {opacity:0} 54%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-contacten .c-ring1 {animation-name:k-c-ring1}
@keyframes k-c-ring1 {0%,67% {opacity:0} 68%,69% {opacity:1} 70% {opacity:.3} 71%,72% {opacity:1} 73% {opacity:.3} 74%,100% {opacity:0}}
.anim-steps .c-st1 {opacity:0;animation-name:k-c-st1}
@keyframes k-c-st1 {0%,73% {opacity:0} 74%,100% {opacity:1}}
.anim-contacten .c-ring2 {animation-name:k-c-ring2}
@keyframes k-c-ring2 {0%,75% {opacity:0} 76%,77% {opacity:1} 78% {opacity:.3} 79%,80% {opacity:1} 81%,100% {opacity:0}}
.anim-steps .c-st2 {opacity:0;animation-name:k-c-st2}
@keyframes k-c-st2 {0%,80% {opacity:0} 81%,100% {opacity:1}}
.anim-steps .c-st3 {opacity:0;animation-name:k-c-st3}
@keyframes k-c-st3 {0%,85% {opacity:0} 86%,100% {opacity:1}}
.anim-contacten .c-ring3 {opacity:0}
.anim-steps .c-stop {opacity:0;animation-name:k-c-stop}
@keyframes k-c-stop {0%,81% {opacity:0} 82%,100% {opacity:1}}
.anim-steps .c-tip {opacity:0;animation-name:k-c-tip}
@keyframes k-c-tip {0%,89% {opacity:0} 90%,100% {opacity:1}}
.anim-steps .p-msg1 {opacity:0;animation-name:k-p-msg1}
@keyframes k-p-msg1 {0%,3% {opacity:0} 4%,100% {opacity:1}}
.anim-steps .p-msg2 {opacity:0;animation-name:k-p-msg2}
@keyframes k-p-msg2 {0%,11% {opacity:0} 12%,100% {opacity:1}}
.anim-steps .p-agreed {opacity:0;animation-name:k-p-agreed}
@keyframes k-p-agreed {0%,17% {opacity:0} 18%,28% {opacity:1} 29%,100% {opacity:0}}
.anim-sostest .p-finger {opacity:1;transform-box:fill-box;transform-origin:center;transform:scale(.8);animation-name:k-p-finger}
@keyframes k-p-finger {0%,31% {opacity:0;transform:scale(1.4)} 33% {opacity:1;transform:scale(1)} 34%,35% {transform:scale(.8)} 36% {opacity:1;transform:scale(1)} 38%,42% {opacity:0;transform:scale(1.4)} 44% {opacity:1;transform:scale(1)} 45%,56% {opacity:1;transform:scale(.8)} 58%,100% {opacity:0;transform:scale(1.4)}}
.anim-sostest .p-ring {stroke-dashoffset:0;animation-name:k-p-ring}
@keyframes k-p-ring {0%,33% {stroke-dashoffset:100} 36% {stroke-dashoffset:82} 37%,45% {stroke-dashoffset:100} 56%,100% {stroke-dashoffset:0}}
.anim-steps .p-short {opacity:0;animation-name:k-p-short}
@keyframes k-p-short {0%,36% {opacity:0} 37%,43% {opacity:1} 44%,100% {opacity:0}}
.anim-steps .p-hold {opacity:0;animation-name:k-p-hold}
@keyframes k-p-hold {0%,45% {opacity:0} 46%,56% {opacity:1} 57%,100% {opacity:0}}
.anim-steps .p-start {opacity:1;animation-name:k-p-start}
@keyframes k-p-start {0%,56% {opacity:0} 57%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-sostest .p-device {animation-name:k-p-device}
@keyframes k-p-device {0%,56% {transform:translateX(0)} 57% {transform:translateX(-2px)} 58% {transform:translateX(2px)} 59% {transform:translateX(-2px)} 60% {transform:translateX(2px)} 61%,100% {transform:translateX(0)}}
.anim-steps .p-note {opacity:0;animation-name:k-p-note}
@keyframes k-p-note {0%,68% {opacity:0} 69%,100% {opacity:1}}
.anim-steps .p-call {opacity:0;animation-name:k-p-call}
@keyframes k-p-call {0%,74% {opacity:0} 75%,100% {opacity:1}}
.anim-steps .p-next {opacity:0;animation-name:k-p-next}
@keyframes k-p-next {0%,83% {opacity:0} 84%,100% {opacity:1}}

/* Series 3: location, offline, administrators, login */
.anim-steps .l-off {opacity:0;animation-name:k-l-off}
@keyframes k-l-off {0%,4% {opacity:0} 5%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .l-age {opacity:0;animation-name:k-l-age}
@keyframes k-l-age {0%,12% {opacity:0} 13%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .l-blocked {opacity:0;animation-name:k-l-blocked}
@keyframes k-l-blocked {0%,30% {opacity:0} 31%,40% {opacity:1} 41%,100% {opacity:0}}
.anim-steps .l-signal {opacity:1;animation-name:k-l-signal}
@keyframes k-l-signal {0%,49% {opacity:0} 50%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-locatie .l-move {transform:translateX(112px);animation-name:k-l-move}
@keyframes k-l-move {0%,41% {transform:translateX(0)} 49%,100% {transform:translateX(112px)}}
.anim-steps .l-inside {opacity:0;animation-name:k-l-inside}
@keyframes k-l-inside {0%,31% {opacity:0} 32%,41% {opacity:1} 42%,100% {opacity:0}}
.anim-steps .l-outside {opacity:1;animation-name:k-l-outside}
@keyframes k-l-outside {0%,51% {opacity:0} 52%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .l-old {opacity:0;animation-name:k-l-old}
@keyframes k-l-old {0%,65% {opacity:0} 66%,81% {opacity:1} 82%,100% {opacity:0}}
.anim-steps .l-new {opacity:0;animation-name:k-l-new}
@keyframes k-l-new {0%,83% {opacity:0} 84%,100% {opacity:1}}
.anim-steps .l-tap {animation-name:k-l-tap}
@keyframes k-l-tap {0%,68% {opacity:0;transform:scale(1.4)} 71% {opacity:1;transform:scale(1)} 72.5% {transform:scale(.75)} 74% {opacity:1;transform:scale(1)} 76%,100% {opacity:0;transform:scale(1)}}
.anim-steps .l-wait {opacity:0;animation-name:k-l-wait}
@keyframes k-l-wait {0%,72% {opacity:0} 73%,83% {opacity:1} 84%,100% {opacity:0}}
.anim-steps .l-now {opacity:0;animation-name:k-l-now}
@keyframes k-l-now {0%,83% {opacity:0} 84%,100% {opacity:1}}
.anim-steps .l-good {opacity:0;animation-name:k-l-good}
@keyframes k-l-good {0%,85% {opacity:0} 86%,100% {opacity:1}}
.anim-steps .o-look {opacity:0;animation-name:k-o-look}
@keyframes k-o-look {0%,2% {opacity:0} 3%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .o-on {opacity:0;animation-name:k-o-on}
@keyframes k-o-on {0%,12% {opacity:0} 13%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-offline .o-move {transform:translateX(118px);animation-name:k-o-move}
@keyframes k-o-move {0%,41% {transform:translateX(0)} 48%,100% {transform:translateX(118px)}}
.anim-steps .o-b1 {opacity:1;animation-name:k-o-b1}
@keyframes k-o-b1 {0%,100% {opacity:1} 101%,100% {opacity:0}}
.anim-offline .o-b2, .anim-offline .o-b3, .anim-offline .o-b4 {opacity:1}
.anim-offline .o-b2 {animation-name:k-o-b2} .anim-offline .o-b3 {animation-name:k-o-b3} .anim-offline .o-b4 {animation-name:k-o-b4}
@keyframes k-o-b2 {0%,51% {opacity:0} 52%,100% {opacity:1}}
@keyframes k-o-b3 {0%,56% {opacity:0} 57%,100% {opacity:1}}
@keyframes k-o-b4 {0%,60% {opacity:0} 61%,100% {opacity:1}}
.anim-steps .o-timer {opacity:0;animation-name:k-o-timer}
@keyframes k-o-timer {0%,47% {opacity:0} 48%,62% {opacity:1} 63%,100% {opacity:0}}
.anim-steps .o-t2 {opacity:0;animation-name:k-o-t2}
@keyframes k-o-t2 {0%,47% {opacity:0} 48%,52% {opacity:1} 53%,100% {opacity:0}}
.anim-steps .o-t1 {opacity:0;animation-name:k-o-t1}
@keyframes k-o-t1 {0%,52% {opacity:0} 53%,57% {opacity:1} 58%,100% {opacity:0}}
.anim-steps .o-t0 {opacity:0;animation-name:k-o-t0}
@keyframes k-o-t0 {0%,57% {opacity:0} 58%,62% {opacity:1} 63%,100% {opacity:0}}
.anim-steps .o-weak {opacity:0;animation-name:k-o-weak}
@keyframes k-o-weak {0%,30% {opacity:0} 31%,41% {opacity:1} 42%,100% {opacity:0}}
.anim-steps .o-ok {opacity:1;animation-name:k-o-ok}
@keyframes k-o-ok {0%,60% {opacity:0} 61%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-offline .o-screen {animation-name:k-o-screen}
@keyframes k-o-screen {0%,69% {opacity:1} 70%,75% {opacity:0} 76%,100% {opacity:1}}
.anim-steps .o-restart {opacity:0;animation-name:k-o-restart}
@keyframes k-o-restart {0%,66% {opacity:0} 67%,76% {opacity:1} 77%,100% {opacity:0}}
.anim-offline .o-card {animation-name:k-o-card}
@keyframes k-o-card {0%,77% {opacity:1;transform:translateY(0)} 83% {opacity:0;transform:translateY(-40px)} 84%,100% {opacity:0;transform:translateY(-40px)}}
.anim-steps .o-online {opacity:0;animation-name:k-o-online}
@keyframes k-o-online {0%,87% {opacity:0} 88%,100% {opacity:1}}
.anim-steps .o-sim {opacity:0;animation-name:k-o-sim}
@keyframes k-o-sim {0%,66% {opacity:0} 67%,100% {opacity:1}}
.anim-steps .a-field-bad {opacity:0;animation-name:k-a-field-bad}
@keyframes k-a-field-bad {0%,3% {opacity:0} 4%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .a-shared {opacity:0;animation-name:k-a-shared}
@keyframes k-a-shared {0%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .a-bad {opacity:0;animation-name:k-a-bad}
@keyframes k-a-bad {0%,5% {opacity:0} 6%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .a-field-ok {opacity:0;animation-name:k-a-field-ok}
@keyframes k-a-field-ok {0%,14% {opacity:0} 15%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .a-own {opacity:0;animation-name:k-a-own}
@keyframes k-a-own {0%,14% {opacity:0} 15%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .a-good {opacity:0;animation-name:k-a-good}
@keyframes k-a-good {0%,15% {opacity:0} 16%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .a-same {opacity:0;animation-name:k-a-same}
@keyframes k-a-same {0%,30% {opacity:0} 31%,47% {opacity:1} 48%,100% {opacity:0}}
.anim-steps .a-sent {opacity:1;animation-name:k-a-sent}
@keyframes k-a-sent {0%,47% {opacity:0} 48%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .a-request {opacity:0;animation-name:k-a-request}
@keyframes k-a-request {0%,67% {opacity:0} 68%,79% {opacity:1} 80%,100% {opacity:0}}
.anim-steps .a-tap {animation-name:k-a-tap}
@keyframes k-a-tap {0%,73% {opacity:0;transform:scale(1.4)} 76% {opacity:1;transform:scale(1)} 77.5% {transform:scale(.75)} 79% {opacity:1;transform:scale(1)} 81%,100% {opacity:0;transform:scale(1)}}
.anim-steps .a-access {opacity:0;animation-name:k-a-access}
@keyframes k-a-access {0%,79% {opacity:0} 80%,100% {opacity:1}}
.anim-steps .a-ok {opacity:0;animation-name:k-a-ok}
@keyframes k-a-ok {0%,80% {opacity:0} 81%,100% {opacity:1}}
.anim-steps .a-notify {opacity:0;animation-name:k-a-notify}
@keyframes k-a-notify {0%,86% {opacity:0} 87%,100% {opacity:1}}
.anim-steps .i-field-bad {opacity:0;animation-name:k-i-field-bad}
@keyframes k-i-field-bad {0%,3% {opacity:0} 4%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .i-space {opacity:0;animation-name:k-i-space}
@keyframes k-i-space {0%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .i-bad {opacity:0;animation-name:k-i-bad}
@keyframes k-i-bad {0%,4% {opacity:0} 5%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .i-field-ok {opacity:0;animation-name:k-i-field-ok}
@keyframes k-i-field-ok {0%,14% {opacity:0} 15%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .i-good {opacity:0;animation-name:k-i-good}
@keyframes k-i-good {0%,15% {opacity:0} 16%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .i-forgot {opacity:0;animation-name:k-i-forgot}
@keyframes k-i-forgot {0%,28% {opacity:0} 29%,37% {opacity:1} 38%,100% {opacity:0}}
.anim-steps .i-tap1 {animation-name:k-i-tap1}
@keyframes k-i-tap1 {0%,31% {opacity:0;transform:scale(1.4)} 34% {opacity:1;transform:scale(1)} 35.5% {transform:scale(.75)} 37% {opacity:1;transform:scale(1)} 39%,100% {opacity:0;transform:scale(1)}}
.anim-steps .i-mail {opacity:1;animation-name:k-i-mail}
@keyframes k-i-mail {0%,37% {opacity:0} 38%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .i-msg {opacity:1;animation-name:k-i-msg}
@keyframes k-i-msg {0%,47% {opacity:0} 48%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-inloggen .i-junk {fill:#d9f0f6;animation-name:k-i-junk}
@keyframes k-i-junk {0%,45% {fill:#fff} 46%,100% {fill:#d9f0f6}}
.anim-steps .i-inbox {opacity:0;animation-name:k-i-inbox}
@keyframes k-i-inbox {0%,38% {opacity:0} 39%,45% {opacity:1} 46%,100% {opacity:0}}
.anim-steps .i-junk-tip {opacity:1;animation-name:k-i-junk-tip}
@keyframes k-i-junk-tip {0%,45% {opacity:0} 46%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .i-pw {opacity:1;animation-name:k-i-pw}
@keyframes k-i-pw {0%,51% {opacity:0} 52%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .i-cross {opacity:0;animation-name:k-i-cross}
@keyframes k-i-cross {0%,69% {opacity:0} 70%,100% {opacity:1}}
.anim-steps .i-noreg {opacity:0;animation-name:k-i-noreg}
@keyframes k-i-noreg {0%,70% {opacity:0} 71%,81% {opacity:1} 82%,100% {opacity:0}}
.anim-steps .i-tap2 {animation-name:k-i-tap2}
@keyframes k-i-tap2 {0%,81% {opacity:0;transform:scale(1.4)} 84% {opacity:1;transform:scale(1)} 85.5% {transform:scale(.75)} 87% {opacity:1;transform:scale(1)} 89%,100% {opacity:0;transform:scale(1)}}
.anim-steps .i-in {opacity:0;animation-name:k-i-in}
@keyframes k-i-in {0%,86% {opacity:0} 87%,100% {opacity:1}}

/* Series 4: calling, fall detection, SIM placement */
.anim-steps .b-try {opacity:0;animation-name:k-b-try}
@keyframes k-b-try {0%,2% {opacity:0} 3%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .b-fail {opacity:0;animation-name:k-b-fail}
@keyframes k-b-fail {0%,7% {opacity:0} 8%,17% {opacity:1} 18%,100% {opacity:0}}
.anim-steps .b-why {opacity:0;animation-name:k-b-why}
@keyframes k-b-why {0%,17% {opacity:0} 18%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .b-new {opacity:1;animation-name:k-b-new}
@keyframes k-b-new {0%,37% {opacity:0} 38%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .b-tap {animation-name:k-b-tap}
@keyframes k-b-tap {0%,44% {opacity:0;transform:scale(1.4)} 47% {opacity:1;transform:scale(1)} 48.5% {transform:scale(.75)} 50% {opacity:1;transform:scale(1)} 52%,100% {opacity:0;transform:scale(1)}}
.anim-steps .b-max {opacity:1;animation-name:k-b-max}
@keyframes k-b-max {0%,30% {opacity:0} 31%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .b-unknown {opacity:1;animation-name:k-b-unknown}
@keyframes k-b-unknown {0%,33% {opacity:0} 34%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .b-saved {opacity:1;animation-name:k-b-saved}
@keyframes k-b-saved {0%,50% {opacity:0} 51%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .b-in-screen {opacity:0;animation-name:k-b-in-screen}
@keyframes k-b-in-screen {0%,67% {opacity:0} 68%,79% {opacity:1} 80%,100% {opacity:0}}
.anim-steps .b-out-screen {opacity:0;animation-name:k-b-out-screen}
@keyframes k-b-out-screen {0%,81% {opacity:0} 82%,100% {opacity:1}}
.anim-bellen .b-ring {animation-name:k-b-ring}
@keyframes k-b-ring {0%,67% {opacity:0} 68%,70% {opacity:1} 71% {opacity:.3} 72%,74% {opacity:1} 75% {opacity:.3} 76%,78% {opacity:1} 79%,81% {opacity:0} 82%,84% {opacity:1} 85% {opacity:.3} 86%,100% {opacity:1}}
.anim-steps .b-in {opacity:0;animation-name:k-b-in}
@keyframes k-b-in {0%,71% {opacity:0} 72%,100% {opacity:1}}
.anim-steps .b-out {opacity:0;animation-name:k-b-out}
@keyframes k-b-out {0%,85% {opacity:0} 86%,100% {opacity:1}}
.anim-steps .b-credit {opacity:0;animation-name:k-b-credit}
@keyframes k-b-credit {0%,89% {opacity:0} 90%,100% {opacity:1}}
.anim-val .v-on-track {animation-name:k-v-on-track}
@keyframes k-v-on-track {0%,9% {fill:#b8c4c9} 11%,100% {fill:#3a9a68}}
.anim-val .v-on-knob {animation-name:k-v-on-knob}
@keyframes k-v-on-knob {0%,9% {transform:translateX(-8px)} 11%,100% {transform:translateX(0)}}
.anim-val .v-pick {transform:translateX(27px);animation-name:k-v-pick}
@keyframes k-v-pick {0%,15% {transform:translateX(0)} 21%,100% {transform:translateX(27px)}}
.anim-steps .v-low {opacity:0;animation-name:k-v-low}
@keyframes k-v-low {0%,2% {opacity:0} 3%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .v-set {opacity:0;animation-name:k-v-set}
@keyframes k-v-set {0%,12% {opacity:0} 13%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .v-never {opacity:0;animation-name:k-v-never}
@keyframes k-v-never {0%,29% {opacity:0} 30%,41% {opacity:1} 42%,100% {opacity:0}}
.anim-steps .v-bad {opacity:0;animation-name:k-v-bad}
@keyframes k-v-bad {0%,30% {opacity:0} 31%,41% {opacity:1} 42%,100% {opacity:0}}
.anim-val .v-drop {animation-name:k-v-drop}
@keyframes k-v-drop {0%,43% {transform:translateY(-10px)} 46% {transform:translateY(10px)} 48% {transform:translateY(6px)} 50%,100% {transform:translateY(8px)}}
.anim-steps .v-alert {opacity:1;animation-name:k-v-alert}
@keyframes k-v-alert {0%,47% {opacity:0} 48%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .v-good {opacity:1;animation-name:k-v-good}
@keyframes k-v-good {0%,49% {opacity:0} 50%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .v-alarm {opacity:0;animation-name:k-v-alarm}
@keyframes k-v-alarm {0%,65% {opacity:0} 66%,75% {opacity:1} 76%,100% {opacity:0}}
.anim-steps .v-tap {animation-name:k-v-tap}
@keyframes k-v-tap {0%,71% {opacity:0;transform:scale(1.4)} 74% {opacity:1;transform:scale(1)} 75.5% {transform:scale(.75)} 77% {opacity:1;transform:scale(1)} 79%,100% {opacity:0;transform:scale(1)}}
.anim-steps .v-cancel {opacity:0;animation-name:k-v-cancel}
@keyframes k-v-cancel {0%,75% {opacity:0} 76%,100% {opacity:1}}
.anim-steps .v-cancelled {opacity:0;animation-name:k-v-cancelled}
@keyframes k-v-cancelled {0%,76% {opacity:0} 77%,100% {opacity:1}}
.anim-steps .v-higher {opacity:0;animation-name:k-v-higher}
@keyframes k-v-higher {0%,83% {opacity:0} 84%,100% {opacity:1}}
.anim-steps .m-on {opacity:0;animation-name:k-m-on}
@keyframes k-m-on {0%,8% {opacity:1} 9%,100% {opacity:0}}
.anim-steps .m-off-msg {opacity:0;animation-name:k-m-off-msg}
@keyframes k-m-off-msg {0%,8% {opacity:0} 9%,16% {opacity:1} 17%,100% {opacity:0}}
.anim-steps .m-dark {opacity:1;animation-name:k-m-dark}
@keyframes k-m-dark {0%,16% {opacity:0} 17%,100% {opacity:1}}
.anim-steps .m-app {opacity:0;animation-name:k-m-app}
@keyframes k-m-app {0%,2% {opacity:0} 3%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .m-off {opacity:0;animation-name:k-m-off}
@keyframes k-m-off {0%,17% {opacity:0} 18%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-simplaatsen .m-card {transform-box:fill-box;transform-origin:center;animation-name:k-m-card}
@keyframes k-m-card {0%,29% {opacity:0;transform:translate(0,-50px) rotate(180deg)} 32% {opacity:1;transform:translate(0,-50px) rotate(180deg)} 36%,42% {transform:translate(0,-18px) rotate(180deg)} 47% {transform:translate(0,-18px) rotate(0deg)} 51%,100% {opacity:1;transform:translate(0,0) rotate(0deg)}}
.anim-steps .m-corner {opacity:0;animation-name:k-m-corner}
@keyframes k-m-corner {0%,35% {opacity:0} 36%,44% {opacity:1} 45%,100% {opacity:0}}
.anim-steps .m-gold {opacity:1;animation-name:k-m-gold}
@keyframes k-m-gold {0%,30% {opacity:0} 31%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .m-fits {opacity:1;animation-name:k-m-fits}
@keyframes k-m-fits {0%,51% {opacity:0} 52%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-simplaatsen .m-tray {animation-name:k-m-tray}
@keyframes k-m-tray {0%,68% {transform:translateX(0)} 74%,100% {transform:translateX(74px)}}
.anim-steps .m-screen {opacity:0;animation-name:k-m-screen}
@keyframes k-m-screen {0%,77% {opacity:0} 78%,100% {opacity:1}}
.anim-steps .m-handbook {opacity:0;animation-name:k-m-handbook}
@keyframes k-m-handbook {0%,75% {opacity:0} 76%,100% {opacity:1}}
.anim-steps .m-test {opacity:0;animation-name:k-m-test}
@keyframes k-m-test {0%,83% {opacity:0} 84%,100% {opacity:1}}

/* Series 5: app install, safe zone, battery */
.anim-steps .u-search {opacity:0;animation-name:k-u-search}
@keyframes k-u-search {0%,2% {opacity:0} 3%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .u-tap1 {animation-name:k-u-tap1}
@keyframes k-u-tap1 {0%,9% {opacity:0;transform:scale(1.4)} 12% {opacity:1;transform:scale(1)} 13.5% {transform:scale(.75)} 15% {opacity:1;transform:scale(1)} 17%,100% {opacity:0;transform:scale(1)}}
.anim-steps .u-get {opacity:0;animation-name:k-u-get}
@keyframes k-u-get {0%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .u-get-label {opacity:0;animation-name:k-u-get-label}
@keyframes k-u-get-label {0%,14% {opacity:1} 15%,100% {opacity:0}}
.anim-steps .u-open {opacity:0;animation-name:k-u-open}
@keyframes k-u-open {0%,16% {opacity:0} 17%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .u-done {opacity:0;animation-name:k-u-done}
@keyframes k-u-done {0%,17% {opacity:0} 18%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .u-tap-deny {animation-name:k-u-tap-deny}
@keyframes k-u-tap-deny {0%,33% {opacity:0;transform:scale(1.4)} 36% {opacity:1;transform:scale(1)} 37.5% {transform:scale(.75)} 39% {opacity:1;transform:scale(1)} 41%,100% {opacity:0;transform:scale(1)}}
.anim-steps .u-miss {opacity:0;animation-name:k-u-miss}
@keyframes k-u-miss {0%,37% {opacity:0} 38%,45% {opacity:1} 46%,100% {opacity:0}}
.anim-appinstall .u-deny {animation-name:k-u-deny}
@keyframes k-u-deny {0%,35% {fill:#eef6f8} 36%,45% {fill:#fbe9e7} 46%,100% {fill:#eef6f8}}
.anim-steps .u-tap-allow {animation-name:k-u-tap-allow}
@keyframes k-u-tap-allow {0%,47% {opacity:0;transform:scale(1.4)} 50% {opacity:1;transform:scale(1)} 51.5% {transform:scale(.75)} 53% {opacity:1;transform:scale(1)} 55%,100% {opacity:0;transform:scale(1)}}
.anim-appinstall .u-allow {fill:#d9f0f6;animation-name:k-u-allow}
@keyframes k-u-allow {0%,49% {fill:#eef6f8} 50%,100% {fill:#d9f0f6}}
.anim-steps .u-allowed {opacity:1;animation-name:k-u-allowed}
@keyframes k-u-allowed {0%,51% {opacity:0} 52%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .u-tap3 {animation-name:k-u-tap3}
@keyframes k-u-tap3 {0%,73% {opacity:0;transform:scale(1.4)} 76% {opacity:1;transform:scale(1)} 77.5% {transform:scale(.75)} 79% {opacity:1;transform:scale(1)} 81%,100% {opacity:0;transform:scale(1)}}
.anim-appinstall .u-while {animation-name:k-u-while}
@keyframes k-u-while {0%,75% {fill:#eef6f8} 76%,100% {fill:#d9f0f6}}
.anim-steps .u-loc {opacity:0;animation-name:k-u-loc}
@keyframes k-u-loc {0%,78% {opacity:0} 79%,100% {opacity:1}}
.anim-steps .z-tap1 {animation-name:k-z-tap1}
@keyframes k-z-tap1 {0%,7% {opacity:0;transform:scale(1.4)} 10% {opacity:1;transform:scale(1)} 11.5% {transform:scale(.75)} 13% {opacity:1;transform:scale(1)} 15%,100% {opacity:0;transform:scale(1)}}
.anim-steps .z-name {opacity:0;animation-name:k-z-name}
@keyframes k-z-name {0%,13% {opacity:0} 14%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .z-plus {opacity:0;animation-name:k-z-plus}
@keyframes k-z-plus {0%,2% {opacity:0} 3%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .z-named {opacity:0;animation-name:k-z-named}
@keyframes k-z-named {0%,16% {opacity:0} 17%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-zone .z-area {transform-box:fill-box;transform-origin:center;animation-name:k-z-area}
@keyframes k-z-area {0%,31% {transform:scale(.4)} 42%,100% {transform:scale(1)}}
.anim-steps .z-tap2 {animation-name:k-z-tap2}
@keyframes k-z-tap2 {0%,45% {opacity:0;transform:scale(1.4)} 48% {opacity:1;transform:scale(1)} 49.5% {transform:scale(.75)} 51% {opacity:1;transform:scale(1)} 53%,100% {opacity:0;transform:scale(1)}}
.anim-steps .z-online {opacity:1;animation-name:k-z-online}
@keyframes k-z-online {0%,32% {opacity:0} 33%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .z-saved {opacity:1;animation-name:k-z-saved}
@keyframes k-z-saved {0%,51% {opacity:0} 52%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-zone .z-dot {transform:translate(26px,30px);animation-name:k-z-dot}
@keyframes k-z-dot {0%,68% {transform:translate(0,0)} 76%,100% {transform:translate(26px,30px)}}
.anim-steps .z-late {opacity:0;animation-name:k-z-late}
@keyframes k-z-late {0%,76% {opacity:0} 77%,83% {opacity:1} 84%,100% {opacity:0}}
.anim-steps .z-mode {opacity:0;animation-name:k-z-mode}
@keyframes k-z-mode {0%,83% {opacity:0} 84%,100% {opacity:1}}
.anim-steps .z-note {opacity:0;animation-name:k-z-note}
@keyframes k-z-note {0%,87% {opacity:0} 88%,100% {opacity:1}}
.anim-steps .z-ok {opacity:0;animation-name:k-z-ok}
@keyframes k-z-ok {0%,89% {opacity:0} 90%,100% {opacity:1}}
.anim-steps .y-r1 {opacity:0;animation-name:k-y-r1}
@keyframes k-y-r1 {0%,3% {opacity:0} 4%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .y-r2 {opacity:0;animation-name:k-y-r2}
@keyframes k-y-r2 {0%,9% {opacity:0} 10%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .y-r3 {opacity:0;animation-name:k-y-r3}
@keyframes k-y-r3 {0%,15% {opacity:0} 16%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-batterij .y-level {transform-box:fill-box;transform-origin:bottom center;animation-name:k-y-level}
@keyframes k-y-level {0%,3% {transform:scaleY(1);fill:#3a9a68} 24% {transform:scaleY(.25);fill:#e0a100} 26%,100% {transform:scaleY(.25);fill:#e0a100}}
.anim-batterij .y-knob {transform:translateX(52px);animation-name:k-y-knob}
@keyframes k-y-knob {0%,34% {transform:translateX(0)} 44%,100% {transform:translateX(52px)}}
.anim-steps .y-tap {animation-name:k-y-tap}
@keyframes k-y-tap {0%,47% {opacity:0;transform:scale(1.4)} 50% {opacity:1;transform:scale(1)} 51.5% {transform:scale(.75)} 53% {opacity:1;transform:scale(1)} 55%,100% {opacity:0;transform:scale(1)}}
.anim-steps .y-longer {opacity:1;animation-name:k-y-longer}
@keyframes k-y-longer {0%,52% {opacity:0} 53%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .y-later {opacity:1;animation-name:k-y-later}
@keyframes k-y-later {0%,55% {opacity:0} 56%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-batterij .y-app-level {transform-box:fill-box;transform-origin:left center;animation-name:k-y-app-level}
@keyframes k-y-app-level {0%,66% {transform:scaleX(.18);fill:#c0392b} 82% {transform:scaleX(.18);fill:#c0392b} 96%,100% {transform:scaleX(1);fill:#3a9a68}}
.anim-steps .y-low {opacity:0;animation-name:k-y-low}
@keyframes k-y-low {0%,67% {opacity:0} 68%,82% {opacity:1} 83%,100% {opacity:0}}
.anim-steps .y-charge {opacity:0;animation-name:k-y-charge}
@keyframes k-y-charge {0%,73% {opacity:0} 74%,100% {opacity:1}}
.anim-steps .y-full {opacity:0;animation-name:k-y-full}
@keyframes k-y-full {0%,91% {opacity:0} 92%,100% {opacity:1}}

/* Series 6: sound, location history */
.anim-geluid .g-vol {transform-box:fill-box;transform-origin:left center;animation-name:k-g-vol}
@keyframes k-g-vol {0%,6% {transform:scaleX(.25)} 18%,100% {transform:scaleX(.85)}}
.anim-geluid .g-knob {animation-name:k-g-knob}
@keyframes k-g-knob {0%,6% {transform:translateX(0)} 18%,100% {transform:translateX(37px)}}
.anim-steps .g-louder {opacity:0;animation-name:k-g-louder}
@keyframes k-g-louder {0%,18% {opacity:0} 19%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .g-cover {opacity:0;animation-name:k-g-cover}
@keyframes k-g-cover {0%,28% {opacity:0} 29%,42% {opacity:1} 43%,100% {opacity:0}}
.anim-steps .g-covered {opacity:0;animation-name:k-g-covered}
@keyframes k-g-covered {0%,30% {opacity:0} 31%,42% {opacity:1} 43%,100% {opacity:0}}
.anim-steps .g-free {opacity:1;animation-name:k-g-free}
@keyframes k-g-free {0%,45% {opacity:0} 46%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .g-noise {opacity:0;animation-name:k-g-noise}
@keyframes k-g-noise {0%,65% {opacity:0} 66%,79% {opacity:1} 80%,100% {opacity:0}}
.anim-steps .g-loud {opacity:0;animation-name:k-g-loud}
@keyframes k-g-loud {0%,67% {opacity:0} 68%,79% {opacity:1} 80%,100% {opacity:0}}
.anim-steps .g-quiet {opacity:0;animation-name:k-g-quiet}
@keyframes k-g-quiet {0%,83% {opacity:0} 84%,100% {opacity:1}}
.anim-route .h-row {animation-name:k-h-row}
@keyframes k-h-row {0%,11% {fill:#fff} 13%,26% {fill:#d9f0f6} 28%,100% {fill:#fff}}
.anim-steps .h-tap1 {animation-name:k-h-tap1}
@keyframes k-h-tap1 {0%,10% {opacity:0;transform:scale(1.4)} 13% {opacity:1;transform:scale(1)} 14.5% {transform:scale(.75)} 16% {opacity:1;transform:scale(1)} 18%,100% {opacity:0;transform:scale(1)}}
.anim-steps .h-open {opacity:0;animation-name:k-h-open}
@keyframes k-h-open {0%,3% {opacity:0} 4%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .h-date {opacity:1;animation-name:k-h-date}
@keyframes k-h-date {0%,32% {opacity:0} 33%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .h-time {opacity:1;animation-name:k-h-time}
@keyframes k-h-time {0%,37% {opacity:0} 38%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .h-tap2 {animation-name:k-h-tap2}
@keyframes k-h-tap2 {0%,43% {opacity:0;transform:scale(1.4)} 46% {opacity:1;transform:scale(1)} 47.5% {transform:scale(.75)} 49% {opacity:1;transform:scale(1)} 51%,100% {opacity:0;transform:scale(1)}}
.anim-steps .h-period {opacity:1;animation-name:k-h-period}
@keyframes k-h-period {0%,49% {opacity:0} 50%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .h-pt0 {opacity:0;animation-name:k-h-pt0}
@keyframes k-h-pt0 {0%,67% {opacity:0} 68%,100% {opacity:1}}
.anim-steps .h-pt1 {opacity:0;animation-name:k-h-pt1}
@keyframes k-h-pt1 {0%,69% {opacity:0} 70%,100% {opacity:1}}
.anim-steps .h-pt2 {opacity:0;animation-name:k-h-pt2}
@keyframes k-h-pt2 {0%,71% {opacity:0} 72%,100% {opacity:1}}
.anim-steps .h-pt3 {opacity:0;animation-name:k-h-pt3}
@keyframes k-h-pt3 {0%,75% {opacity:0} 76%,100% {opacity:1}}
.anim-steps .h-pt4 {opacity:0;animation-name:k-h-pt4}
@keyframes k-h-pt4 {0%,77% {opacity:0} 78%,100% {opacity:1}}
.anim-steps .h-line {opacity:0;animation-name:k-h-line}
@keyframes k-h-line {0%,69% {opacity:0} 70%,100% {opacity:1}}
.anim-steps .h-gap {opacity:0;animation-name:k-h-gap}
@keyframes k-h-gap {0%,74% {opacity:0} 75%,100% {opacity:1}}
.anim-steps .h-line2 {opacity:0;animation-name:k-h-line2}
@keyframes k-h-line2 {0%,76% {opacity:0} 77%,100% {opacity:1}}
.anim-steps .h-missing {opacity:0;animation-name:k-h-missing}
@keyframes k-h-missing {0%,78% {opacity:0} 79%,86% {opacity:1} 87%,100% {opacity:0}}
.anim-steps .h-why {opacity:0;animation-name:k-h-why}
@keyframes k-h-why {0%,86% {opacity:0} 87%,100% {opacity:1}}
.anim-steps .h-check {opacity:0;animation-name:k-h-check}
@keyframes k-h-check {0%,89% {opacity:0} 90%,100% {opacity:1}}

/* Reduced motion: still frame of scene 2 until the customer presses "Speel animatie af". */
/* Indoor location correction */
.anim-steps .f-third {opacity:0;animation-name:k-f-third}
@keyframes k-f-third {0%,4% {opacity:0} 5%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .f-once {opacity:0;animation-name:k-f-once}
@keyframes k-f-once {0%,13% {opacity:0} 14%,26% {opacity:1} 27%,100% {opacity:0}}
.anim-steps .f-tap {animation-name:k-f-tap}
@keyframes k-f-tap {0%,31% {opacity:0;transform:scale(1.4)} 34% {opacity:1;transform:scale(1)} 35.5% {transform:scale(.75)} 37% {opacity:1;transform:scale(1)} 39%,100% {opacity:0;transform:scale(1)}}
.anim-binnen .f-btn {fill:#2c8fae;animation-name:k-f-btn}
@keyframes k-f-btn {0%,33% {fill:#2c8fae} 34%,40% {fill:#1f6f8a} 41%,100% {fill:#2c8fae}}
.anim-binnen .f-zoom {transform:scale(1.6);animation-name:k-f-zoom}
@keyframes k-f-zoom {0%,42% {transform:scale(1)} 56%,100% {transform:scale(1.6)}}
.anim-binnen .f-f1, .anim-binnen .f-f2 {opacity:0}
.anim-binnen .f-f1 {animation-name:k-f-f1} .anim-binnen .f-f2 {animation-name:k-f-f2}
@keyframes k-f-f1 {0%,40% {opacity:0;transform:translate(-6px,-6px)} 42% {opacity:1;transform:translate(-6px,-6px)} 56% {opacity:1;transform:translate(-24px,-24px)} 60%,100% {opacity:0;transform:translate(-24px,-24px)}}
@keyframes k-f-f2 {0%,40% {opacity:0;transform:translate(6px,6px)} 42% {opacity:1;transform:translate(6px,6px)} 56% {opacity:1;transform:translate(24px,24px)} 60%,100% {opacity:0;transform:translate(24px,24px)}}
.anim-steps .f-left {opacity:1;animation-name:k-f-left}
@keyframes k-f-left {0%,30% {opacity:0} 31%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-steps .f-pinch {opacity:1;animation-name:k-f-pinch}
@keyframes k-f-pinch {0%,41% {opacity:0} 42%,64% {opacity:1} 65%,100% {opacity:0}}
.anim-binnen .f-pan {transform:translate(25.6px,-22.4px);animation-name:k-f-pan}
@keyframes k-f-pan {0%,68% {transform:translate(0,0)} 80%,100% {transform:translate(25.6px,-22.4px)}}
.anim-steps .f-floor {opacity:0;animation-name:k-f-floor}
@keyframes k-f-floor {0%,81% {opacity:0} 82%,100% {opacity:1}}
.anim-steps .f-tap2 {animation-name:k-f-tap2}
@keyframes k-f-tap2 {0%,85% {opacity:0;transform:scale(1.4)} 88% {opacity:1;transform:scale(1)} 89.5% {transform:scale(.75)} 91% {opacity:1;transform:scale(1)} 93%,100% {opacity:0;transform:scale(1)}}
.anim-steps .f-saved {opacity:0;animation-name:k-f-saved}
@keyframes k-f-saved {0%,90% {opacity:0} 91%,100% {opacity:1}}
.anim-steps .f-max {opacity:0;animation-name:k-f-max}
@keyframes k-f-max {0%,92% {opacity:0} 93%,100% {opacity:1}}

.anim-steps .c-book {opacity:1;animation-name:k-c-book}
@keyframes k-c-book {0%,57% {opacity:0} 58%,64% {opacity:1} 65%,100% {opacity:0}}

@media (prefers-reduced-motion: reduce) {
  .anim-figure:not(.playing) .anim * {animation:none !important}
  .anim-figure:not(.playing) .anim-steps .anim-sc1, .anim-figure:not(.playing) .anim-steps .anim-sc3 {opacity:0}
}