/* digotech/sv-demo — small live websites of the services. Compact in a card, larger (container query) in a page hero. */
.wp-block-digotech-sv-demo{--sv-line:1px;--sv-dot:var(--s-2);--sv-ctl:calc(var(--s-6) - var(--s-1));--sv-badge:16px;--sv-up-gap:2px;container-type:inline-size;display:grid;min-width:0}
.sv-dm-win{border:var(--sv-line) solid var(--rule);border-radius:var(--r-board);background:var(--card);overflow:hidden;box-shadow:0 40px 80px -48px var(--shadow)}
.sv-dm-win__bar{display:flex;align-items:center;gap:var(--s-2);height:calc(var(--s-6) - var(--s-1));padding-inline:var(--s-3);border-bottom:var(--sv-line) solid var(--rule);background:var(--paper-2)}
.sv-dm-win__bar i{width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--rule)}
.sv-dm-win__bar span{margin-left:var(--s-2);font:500 var(--t-2xs)/1 var(--font-mono);color:var(--ink-3)}
.sv-dm-win .sv-dm{aspect-ratio:16 / 11;background:var(--paper-2)}
.sv-dm{display:grid;align-content:center;gap:var(--s-3);padding:var(--s-4);font-size:var(--t-xs);line-height:1.45;color:var(--ink);min-width:0}
.sv-dm__i{width:12px;height:12px;flex:none}
.sv-dm__card{display:grid;gap:var(--s-2);min-width:0;padding:var(--s-3);border:var(--sv-line) solid var(--rule);border-radius:var(--r);background:var(--card)}
.sv-dm__h{font:700 var(--t-m)/1.15 var(--font-display);letter-spacing:-.01em}
.sv-dm__sub{color:var(--ink-2);font-size:var(--t-2xs)}
.sv-dm__k{font:600 var(--t-2xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sv-dm__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sv-dm__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-width:0}
.sv-dm__pill{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--sv-up-gap) var(--s-2);border-radius:var(--r);background:var(--accent-tint);color:var(--accent);font-weight:600;font-size:var(--t-2xs);white-space:nowrap}
.sv-dm__btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sv-ctl);padding-inline:var(--s-3);border-radius:var(--r);background:var(--accent-fill);color:var(--on-accent);font-weight:600;font-size:var(--t-2xs);transition:transform var(--dur) var(--ease-press)}
.sv-dm__btn.is-press{transform:scale(.94)}
.sv-dm__in{display:flex;align-items:center;gap:var(--s-1);min-height:var(--sv-ctl);padding-inline:var(--s-2);border:var(--sv-line) solid var(--rule);border-radius:var(--r);background:var(--paper);color:var(--ink-2);font-size:var(--t-2xs);overflow:hidden;white-space:nowrap}
.sv-dm__caret{width:var(--sv-line);height:1.1em;background:var(--accent-fill);animation:sv-dm-blink 1s steps(1) infinite}
@keyframes sv-dm-blink{50%{opacity:0}}
.sv-dm__toast{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r);background:var(--ink);color:var(--paper);font-size:var(--t-2xs);transform:translateY(var(--s-2));opacity:0;transition:transform var(--dur-m) var(--ease-out),opacity var(--dur-m)}
.sv-dm__toast.is-on{transform:none;opacity:1}
.sv-dm__dot{width:var(--sv-dot);height:var(--sv-dot);border-radius:50%;background:var(--good);flex:none}
.sv-dm__bar{height:var(--s-1);border-radius:var(--r);background:var(--paper-3);overflow:hidden}
.sv-dm__bar i{display:block;height:100%;background:var(--accent-fill);transform-origin:left;transform:scaleX(.5);transition:transform var(--dur-morph) var(--ease-out)}
.sv-dm__split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-3)}
.sv-dm__list{display:grid;gap:var(--s-1)}
.sv-dm__li{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-2);border-radius:var(--r);transition:background-color var(--dur)}
.sv-dm__li .sv-dm__i{display:none;color:var(--accent)}
.sv-dm__li.is-done .is-done,.sv-dm__li.is-on .is-on,.sv-dm__li.is-lock .is-lock{display:block}
.sv-dm__li.is-on{background:var(--accent-tint)}
.sv-dm__li.is-lock,.sv-dm__li.is-lock .sv-dm__i{color:var(--ink-3)}
.sv-dm__img{border-radius:var(--r);background:linear-gradient(135deg, var(--accent-tint), var(--paper-3));aspect-ratio:16 / 10;max-height:calc(var(--s-9) * .8)}
.sv-dm__split .sv-dm__img{max-height:none;aspect-ratio:auto;min-height:var(--s-8)}
.sv-dm__cart{position:relative;display:grid;place-items:center;width:var(--sv-ctl);height:var(--sv-ctl);border-radius:50%;border:var(--sv-line) solid var(--rule)}
.sv-dm__cart b{position:absolute;top:calc(var(--s-1) * -1);right:calc(var(--s-1) * -1);min-width:var(--sv-badge);height:var(--sv-badge);border-radius:var(--sv-badge);background:var(--accent-fill);color:var(--on-accent);font:700 var(--t-2xs)/var(--sv-badge) var(--font-mono);text-align:center;transition:transform var(--dur) var(--ease-out)}
.sv-dm__cart b.is-bump{transform:scale(1.35)}
.sv-dm__orders{display:grid;gap:var(--s-1)}
.sv-dm__order{display:flex;justify-content:space-between;gap:var(--s-2);padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--paper);font-family:var(--font-mono);font-size:var(--t-2xs);transition:transform var(--dur-m) var(--ease-out),opacity var(--dur-m)}
.sv-dm__order.is-new{transform:translateY(calc(var(--s-2) * -1));opacity:0}
.sv-dm__serp{display:grid;gap:var(--s-1)}
.sv-dm__serp small{color:var(--ink-3);font:500 var(--t-2xs)/1.3 var(--font-mono)}
.sv-dm__link{font-weight:600;font-size:var(--t-s);line-height:1.25;color:var(--accent)}
.sv-dm__links{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font-size:var(--t-2xs);color:var(--accent)}
.sv-dm__res{transition:opacity var(--dur-m),transform var(--dur-m) var(--ease-out)}
.sv-dm__res.is-hide{opacity:0;transform:translateY(var(--s-1))}
.sv-dm__swap{transition:opacity var(--dur)}
.sv-dm__swap.is-fade{opacity:0}
.sv-dm__lang{display:inline-flex;border:var(--sv-line) solid var(--rule);border-radius:var(--r);overflow:hidden;font:600 var(--t-2xs)/1 var(--font-mono)}
.sv-dm__lang span{padding:var(--s-1) var(--s-2)}
.sv-dm__lang span.on{background:var(--ink);color:var(--paper)}
.sv-dm__clock{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.sv-dm__clock div{display:grid;gap:var(--sv-up-gap);padding:var(--s-2);border-radius:var(--r);background:var(--paper)}
.sv-dm__clock b{font:700 var(--t-m)/1 var(--font-mono);font-variant-numeric:tabular-nums}
.sv-dm__live{display:inline-flex;align-items:center;gap:var(--s-2)}
.sv-dm__status{display:grid;gap:var(--s-1)}
.sv-dm__st{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-2);align-items:center;padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--paper)}
.sv-dm__st .sv-dm__i{color:var(--accent)}
.sv-dm__spin{display:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent-fill);animation:sv-dm-spin .8s linear infinite}
.sv-dm__st[data-bk]:not(.is-done) .sv-dm__spin{display:block}
.sv-dm__st[data-bk]:not(.is-done) .sv-dm__i{display:none}
@keyframes sv-dm-spin{to{transform:rotate(360deg)}}
.sv-dm__uptime{display:grid;grid-template-columns:repeat(30,1fr);gap:var(--sv-up-gap);height:var(--s-5)}
.sv-dm__uptime i{border-radius:var(--sv-up-gap);background:var(--accent-fill);opacity:.85}
.sv-dm__uptime i.lo{opacity:.35}
.sv-dm__pulse{position:relative}
.sv-dm__pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);animation:sv-dm-pulse 2s var(--ease-out) infinite}
@keyframes sv-dm-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(2.6);opacity:0}}
.sv-dm__tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.sv-dm__tpl{display:grid;gap:var(--s-1);padding:var(--s-2);border:var(--sv-line) solid var(--rule);border-radius:var(--r);background:var(--card);transition:transform var(--dur-m) var(--ease-out),border-color var(--dur-m)}
.sv-dm__tpl.is-on{border-color:var(--accent-fill);transform:translateY(calc(var(--s-1) * -1))}
.sv-dm__tpl-img{aspect-ratio:4 / 3;border-radius:var(--r);background:linear-gradient(135deg, var(--accent-tint), var(--paper-3))}
.sv-dm__tpl.h1 .sv-dm__tpl-img{background:linear-gradient(135deg, color-mix(in srgb, var(--warn) 45%, transparent), var(--paper-3))}
.sv-dm__tpl.h2 .sv-dm__tpl-img{background:linear-gradient(135deg, color-mix(in srgb, var(--good) 45%, transparent), var(--paper-3))}
.sv-dm__swatches{display:inline-flex;gap:var(--s-1)}
.sv-dm__swatches i{width:var(--s-3);height:var(--s-3);border-radius:50%;background:var(--accent-fill);outline:2px solid transparent;outline-offset:1px}
.sv-dm__swatches i:nth-child(2){background:var(--warn)}
.sv-dm__swatches i:nth-child(3){background:var(--good)}
.sv-dm__swatches i.is-on{outline-color:var(--ink)}
.sv-dm__ba{position:relative;aspect-ratio:16 / 9;border-radius:var(--r);overflow:hidden;border:var(--sv-line) solid var(--rule)}
.sv-dm__old,.sv-dm__new{position:absolute;inset:0;display:grid;align-content:start;gap:var(--s-2);padding:var(--s-3)}
.sv-dm__old{background:var(--paper-3);font-family:var(--font-mono);color:var(--ink-3)}
.sv-dm__old-bar{padding:var(--s-1) var(--s-2);background:var(--ink-3);color:var(--paper);font-size:var(--t-2xs)}
.sv-dm__old-body{display:grid;gap:var(--s-1);font-size:var(--t-2xs)}
.sv-dm__old-img{height:var(--s-7);background:var(--rule)}
.sv-dm__new{background:var(--paper-2);clip-path:inset(0 0 0 100%);transition:clip-path var(--dur-morph) var(--ease-out)}
.sv-dm__ba.is-new .sv-dm__new{clip-path:inset(0 0 0 0)}
.sv-dm__knob{position:absolute;top:0;bottom:0;left:100%;width:2px;background:var(--accent-fill);transition:left var(--dur-morph) var(--ease-out)}
.sv-dm__ba.is-new .sv-dm__knob{left:0}
/* choices the story picks one by one (time slots, styles, free days); taken ones are struck out */
.sv-dm__picks{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.sv-dm__picks > span{display:grid;place-items:center;min-height:calc(var(--sv-ctl) - var(--s-1));padding-inline:var(--s-2);border:var(--sv-line) solid var(--rule);border-radius:var(--r);background:var(--card);font:500 var(--t-2xs)/1 var(--font-mono);transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.sv-dm__picks > span.is-on{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.sv-dm__picks > span.is-busy{color:var(--ink-3);text-decoration:line-through;background:var(--paper)}
.sv-dm__picks.is-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sv-dm__picks.is-cal > span{padding-inline:0}
/* parts merged from the old home-tab drawings (DN 2026-10-06): course video, sale tag, benefits, client logos, big uptime */
.sv-dm__video{position:relative;display:grid;place-items:center;aspect-ratio:16 / 5;border-radius:var(--r);background:var(--ink);color:var(--paper);overflow:hidden}
.sv-dm__vt{position:absolute;top:var(--s-2);right:var(--s-3);font-weight:600;font-size:var(--t-2xs)}
.sv-dm__play{display:grid;place-items:center;width:var(--sv-ctl);height:var(--sv-ctl);border-radius:50%;background:var(--accent-fill);color:var(--on-accent)}
.sv-dm__li > .sv-dm__num{margin-left:auto}
.sv-dm__img{position:relative}
.sv-dm__tag{position:absolute;top:var(--s-2);left:var(--s-2);padding:var(--sv-up-gap) var(--s-2);border-radius:var(--r);background:var(--accent-fill);color:var(--on-accent);font:700 var(--t-2xs)/1.3 var(--font-mono)}
.sv-dm s.sv-dm__sub{color:var(--ink-3)}
.sv-dm__ticks{display:grid;gap:var(--s-1)}
.sv-dm__ticks span,.sv-dm__sub:has(> .sv-dm__i){display:flex;align-items:center;gap:var(--s-2)}
.sv-dm__ticks .sv-dm__i{color:var(--accent)}
.sv-dm__logos,.sv-dm__pills{display:inline-flex;gap:var(--s-2)}
.sv-dm__logos i{width:var(--s-5);height:var(--s-5);border-radius:var(--r);background:var(--paper-3)}
.sv-dm__logos i:nth-child(even){border-radius:50%}
.sv-dm__big{font:700 var(--t-2xl)/1 var(--font-display)}
@container (min-width: 520px){
  .sv-dm__play{width:var(--ctl-s);height:var(--ctl-s)}
}
/* extra lines only a large card shows: hidden in a small one; a large one leaves each element its own layout (a
   "display:initial" switch made grid rows inline and ran their words together) */
@container not (min-width: 520px){
  .sv-dm__lg{display:none}
}
@container (min-width: 520px){
  .sv-dm{gap:var(--s-4);padding:var(--s-6);font-size:var(--t-s)}
  .sv-dm__h{font-size:var(--t-xl)}
  .sv-dm__sub,.sv-dm__pill,.sv-dm__btn,.sv-dm__in,.sv-dm__order,.sv-dm__links,.sv-dm__toast{font-size:var(--t-xs)}
  .sv-dm__btn,.sv-dm__in{min-height:var(--ctl-s)}
}