/* Ett tydligt exempel och en huvudhandling per tjänst. */
.demo-lab .panel-top{margin-bottom:1.5rem}
.demo-lab h2{font-size:1.65rem}
.demo-lab .panel-description{margin-bottom:1.5rem}
.lab-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-block:1.25rem}
.lab-toolbar .button{gap:1rem;cursor:pointer;max-width:100%;text-align:left}
.demo-lab button:disabled{opacity:.6;cursor:default}
.lab-status{font-size:.8125rem;color:var(--syvo-melon);margin:1rem 0 0;min-height:1.4em}
.lab-output{background:var(--paper);color:var(--ink);border-radius:8px;padding:1.2rem;margin:1.25rem 0;min-width:0;border-left:4px solid var(--line)}
.lab-output p{font-size:.875rem;margin:0 0 .65rem}
.lab-output p:last-child{margin:0}
.demo-lab .lab-output h3{font-size:1.2rem;line-height:1.35;margin:.6rem 0}
.demo-lab .result-label{font-size:.6875rem;font-weight:750;letter-spacing:.07em;color:var(--ink)}
.lab-output.is-success{border-color:var(--syvo-success)}
.lab-output.is-success .result-label{color:var(--syvo-success)}
.lab-output.is-error{border-color:var(--syvo-error);background:var(--syvo-error-surface)}
.lab-output.is-error .result-label{color:var(--syvo-error)}
.lab-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem .8rem;border:1px solid var(--syvo-melon);border-radius:6px;color:var(--paper);background:transparent;font:650 .8125rem/1.4 var(--syvo-font-body);cursor:pointer}
.lab-secondary:hover{background:var(--syvo-melon);color:var(--ink)}
.lab-contact-link{display:inline-flex;min-height:44px;align-items:center;font-size:.875rem}
.demo-scenario{font-size:.6875rem;letter-spacing:.04em;color:var(--syvo-melon);display:flex;align-items:center;gap:.6rem}
.scenario-dot,.column-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block;flex:none}
.watch-steps{padding:0;list-style:none;margin:1rem 0}
.watch-steps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;border-bottom:1px solid var(--muted);padding:1rem 0;font-size:.875rem}
.watch-steps [data-watch-state]{font-size:.75rem;color:var(--syvo-melon)}
.watch-steps .is-running{border-color:var(--lime)}
.watch-steps .is-running [data-watch-state]{color:var(--lime)}
.watch-steps .is-failed [data-watch-state]{background:var(--syvo-error);padding:.2rem .4rem;color:var(--paper);border-radius:3px}
.watch-steps .is-ok [data-watch-state]{color:var(--lime)}
/* Radar: se besökarens väg och observationerna på själva exempelsidan. */
.radar-canvas{position:relative;background:var(--syvo-beige);color:var(--ink);border-radius:8px;overflow:hidden}
.radar-nav{position:relative;padding:.85rem 1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--line);font-size:.6875rem}
.radar-nav strong{font-size:.8125rem}
.radar-page{padding:1rem}
.radar-headline{position:relative;border:2px solid transparent;border-radius:6px;padding:1rem .75rem}
.radar-headline>span{font-size:.625rem;letter-spacing:.06em}
.demo-lab .radar-headline h3{font:400 1.8rem/1.1 var(--syvo-font-display);margin:.5rem 0 .75rem}
.radar-headline p{font-size:.8125rem;margin:0}
.radar-fork{position:relative;padding:.6rem .75rem;border:2px solid transparent;border-radius:6px;margin-top:.5rem}
.radar-fake-link{font-size:.8125rem;text-decoration:underline}
.radar-pin{position:absolute;right:.35rem;top:.35rem;display:none;place-items:center;width:24px;height:24px;background:var(--ink);color:var(--lime);border-radius:50%;font-size:.75rem}
.radar-canvas .is-active{outline:2px solid var(--lime);outline-offset:-3px}
.radar-canvas .is-reviewed .radar-pin{display:grid}
.radar-canvas .is-reviewed{border-color:var(--muted)}
.radar-canvas .radar-nav.is-reviewed{padding-right:2.25rem}
.radar-scan{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(transparent 48%,var(--syvo-lime) 49%,transparent 50%);opacity:.4}
.radar-canvas.is-scanning .radar-scan{display:block;animation:radar-sweep 1s linear}
.radar-route{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.75rem}
.radar-route>span:not([aria-hidden]){border:1px solid var(--muted);padding:.4rem .6rem;border-radius:5px}
.radar-route.is-blocked>span:last-child{border-color:var(--paper);background:var(--syvo-error-surface);color:var(--syvo-error)}
.radar-observations{list-style:none;padding:0;margin:1rem 0 0}
.radar-observations li{display:flex;gap:.65rem;padding-top:.8rem;margin-top:.8rem;border-top:1px solid var(--line)}
.observation-number{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:.75rem}
.radar-observations strong{font-size:.8125rem;display:block;margin-bottom:.25rem}
.radar-observations p{font-size:.8125rem}
/* Motor: samma indata blir ett konkret användbart resultat. */
.motor-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
.motor-column{min-width:0;border:1px solid var(--muted);border-radius:8px;padding:.7rem}
.demo-lab .motor-column h3{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.75rem;margin:0 0 .8rem}
.motor-column h3>span:last-child{margin-left:auto;font-size:.6875rem;color:var(--syvo-melon)}
.motor-inbox{display:grid;gap:.5rem}
.inbox-card,.task-card{background:var(--paper);color:var(--ink);border-radius:5px;padding:.65rem;border-left:3px solid var(--line);font-size:.75rem;transition:opacity .2s,border-color .2s}
.inbox-card strong,.task-card strong{display:block;font-size:.75rem}
.inbox-card>span,.task-card>small{display:block;font-size:.6875rem;margin-top:.1rem}
.inbox-card>small{display:block;font-size:.625rem;color:var(--muted);margin-top:.25rem}
.inbox-card.is-processed{background:var(--syvo-melon);border-color:var(--syvo-success)}
.inbox-card.is-duplicate{background:var(--syvo-beige);text-decoration:line-through}
.inbox-card.is-review{border-color:var(--syvo-error);background:var(--syvo-error-surface)}
.motor-destination{border-color:var(--lime)}
.task-card{border-color:var(--syvo-success);margin-bottom:.65rem;animation:demo-arrive .25s ease-out}
.task-date{font-size:.75rem;font-weight:800;color:var(--syvo-success);display:block;margin-bottom:.35rem}
.motor-empty{color:var(--syvo-melon);font-size:.75rem;margin:0}
/* Krets: ett arbetsverktyg för en verklig typ av vardagsproblem. */
.krets-request{display:flex;gap:.8rem;padding:1rem;background:var(--syvo-melon);color:var(--ink);border-radius:8px;margin-bottom:1rem}
.request-icon{font-size:2rem;line-height:1;flex:none}
.krets-request strong{display:block;font-size:.875rem}
.krets-request p:not(.result-label){font-size:.75rem;margin:.3rem 0 0}
.krets-request .result-label{margin:0 0 .4rem}
.day-planner{background:var(--paper);color:var(--ink);border-radius:8px;padding:1rem}
.day-heading{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;flex-wrap:wrap}
.day-heading>span{color:var(--muted)}
.day-calendar{display:grid;grid-template-columns:3.1rem minmax(0,1fr);grid-template-rows:repeat(14,1.5rem);column-gap:.65rem;margin-top:1rem}
.day-time{grid-column:1;font-size:.625rem;color:var(--muted);align-self:start}
.day-event{grid-column:2;border-radius:5px;background:var(--syvo-beige);margin:2px 0;padding:.3rem .6rem;min-width:0;display:flex;justify-content:center;flex-direction:column}
.day-event strong{font-size:.75rem;line-height:1.3;display:block}
.day-event>span{font-size:.625rem;line-height:1.4;color:var(--muted)}
.day-event>small{font-size:.625rem;margin-top:.3rem}
.day-event.is-free{background:transparent;border:1px dashed var(--line)}
.day-event.is-free strong{font-weight:400;color:var(--muted)}
.day-event.is-new{background:var(--lime);border:1px solid var(--ink);animation:demo-arrive .3s ease-out}
.day-event.is-new>strong::before{content:"NY · ";font-size:.625rem;font-weight:800}
/* Lyft: ett tydligt före/efter-byte som ändrar både form och kontaktväg. */
.lift-stage{background:var(--paper);color:var(--ink);border-radius:8px;overflow:hidden}
.stage-label{display:flex;justify-content:space-between;gap:.6rem;padding:.65rem .85rem;border-bottom:1px solid var(--line);font-size:.5625rem;letter-spacing:.04em}
.stage-label span:first-child{font-weight:800;font-size:.6875rem}
.lift-site{background:var(--syvo-beige)}
.lift-nav{display:flex;justify-content:space-between;gap:.65rem;flex-wrap:wrap;padding:1rem;font:400 .625rem/1.4 Arial,sans-serif;border-bottom:1px solid var(--line)}
.lift-nav strong{font-size:.8125rem;font-weight:400}
.lift-nav strong>span{display:none}
.lift-body{padding:2rem 1.5rem;text-align:center;min-height:290px}
.lift-kicker{font:400 .5625rem Arial,sans-serif;margin-bottom:.8rem}
.demo-lab .lift-body h3{font:400 1.2rem/1.3 Arial,sans-serif;margin:0 0 1rem}
.lift-body #lift-copy{font:400 .75rem/1.65 Arial,sans-serif;color:var(--muted)}
.lift-cta{background:transparent;color:var(--ink);font:400 .6875rem Arial,sans-serif;border:0;text-decoration:underline;padding:.5rem;min-height:44px}
.demo-lab .lift-cta:disabled{opacity:1}
.garden-art{display:none;width:100%;height:auto;color:var(--ink)}
.lift-site.is-after .lift-nav{background:var(--ink);color:var(--paper);font-family:var(--syvo-font-body)}
.lift-site.is-after .lift-nav strong{font-weight:800}
.lift-site.is-after .lift-nav strong>span{display:inline;color:var(--lime)}
.lift-site.is-after .lift-body{background:var(--paper);padding:1.6rem 1.2rem;text-align:left;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);align-items:center;gap:.6rem}
.lift-site.is-after .garden-art{display:block}
.lift-site.is-after .lift-kicker{font:750 .5625rem/1.5 var(--syvo-font-body);letter-spacing:.06em}
.demo-lab .lift-site.is-after h3{font:400 1.8rem/1.1 var(--syvo-font-display);letter-spacing:-.04em}
.lift-site.is-after #lift-copy{font:400 .75rem/1.6 var(--syvo-font-body)}
.lift-site.is-after .lift-cta{background:var(--lime);color:var(--ink);border:1px solid var(--ink);border-radius:4px;text-decoration:none;font:750 .6875rem/1.4 var(--syvo-font-body);padding:.7rem .75rem;cursor:pointer}
.lift-site .lift-cta:focus-visible{outline-color:var(--ink)}
.lift-proof{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;background:var(--syvo-melon);border-top:1px solid var(--line);padding:.75rem;font-size:.625rem}
.lift-proof span::before{content:"✓ ";font-weight:800}
.lift-contact{padding:1rem;border-top:1px solid var(--line);background:var(--syvo-melon)}
.lift-contact strong{font-size:.8125rem}
.lift-contact p{font-size:.75rem;margin:.5rem 0}
.lift-contact>span{font-size:.625rem;color:var(--muted)}
/* Komplett: en enda sammanhängande bild av plan, arbete och fortsättning. */
.complete-map{border:1px solid var(--muted);border-radius:8px;padding:1.2rem}
.complete-center{display:flex;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--muted)}
.complete-symbol{font:800 2.5rem/1 var(--syvo-font-body);letter-spacing:-.07em}
.complete-symbol>span{color:var(--lime);font-size:1.5rem}
.complete-center strong{display:block;font-size:.9375rem}
.complete-center div>span{font-size:.75rem;color:var(--syvo-melon)}
.complete-thread{list-style:none;padding:0;margin:1.25rem 0 0}
.complete-thread li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.85rem;position:relative;padding-bottom:1.4rem}
.complete-thread li:last-child{padding-bottom:0}
.complete-thread li:not(:last-child)::before{content:"";position:absolute;left:14px;top:34px;bottom:4px;border-left:1px dashed var(--muted)}
.thread-number{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--muted);border-radius:50%;font-size:.75rem}
.demo-lab .complete-thread h3{font-size:.875rem;margin:.2rem 0 .4rem}
.complete-thread p{font-size:.75rem;margin:0;color:var(--syvo-melon)}
.complete-map.is-united{border-color:var(--lime)}
.is-connected .thread-number,.is-active .thread-number{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.complete-thread li.is-connected:not(:last-child)::before{border-left:2px solid var(--lime)}
@keyframes radar-sweep{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@keyframes demo-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.demo-lab{padding:1.5rem}.watch-steps li{gap:.5rem}.demo-lab .panel-top{gap:.5rem}.demo-lab .panel-label{font-size:.75rem}.lift-site.is-after .lift-body{grid-template-columns:minmax(0,1fr)}.lift-site.is-after .garden-art{max-height:90px;width:160px;justify-self:end;margin-top:-.4rem}.demo-lab .lift-site.is-after h3{font-size:2rem;max-width:12ch}}
@media(max-width:370px){.demo-lab{padding:1.1rem}.lab-output{padding:1rem}.motor-board{gap:.5rem}.motor-column{padding:.5rem}.inbox-card,.task-card{padding:.5rem}.watch-steps li{font-size:.8125rem}.complete-map{padding:1rem}.radar-page{padding:.65rem}}
@media(prefers-reduced-motion:reduce){.radar-canvas.is-scanning .radar-scan{animation:none;display:none}.task-card,.day-event.is-new{animation:none}.inbox-card,.task-card{transition:none}}