/* ============================================================
   Fridge Alarm — style.css v2 (2026-07-16: walkthrough + graphs)
   RESKIN ZONE: tokens only. Palette per Fridge Alarm — Brand — v1:
   frost bg + near-black ink + cool blue brand + alert amber accent.
   Motion kit (assets/motion.css + reveal.js) supplies --m-* tokens.
   ============================================================ */
:root{
  --bg:#f8fafd;
  --bg-alt:#eef4f9;
  --ink:#13242f;
  --ink-soft:#43596a;
  --brand:#2c83af;
  --brand-deep:#1c5f83;
  --brand-tint:#e2eff7;
  --accent:#e89719;
  --accent-deep:#b87105;
  --ok:#28925f;
  --bad:#d64545;
  --panel:#0d1b24;
  --panel-edge:#1c3444;
  --panel-ink:#dcebf5;
  --panel-dim:#7d97a8;
  --line:#d5e2ec;
  --radius:14px;
  --shadow:0 10px 30px rgba(19,36,47,.10);
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;
  --font-data:'Space Mono',ui-monospace,monospace;
  --wrap-gutter:clamp(1.6rem, 7vw, 6rem);
  --section-pad:clamp(4.5rem, 3rem + 5.5vw, 8.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:1.06rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--brand-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--wrap-gutter)}
.section{padding-block:var(--section-pad)}
.section--alt{background:var(--bg-alt)}
h1,h2,h3{font-family:var(--font-display);line-height:1.08;margin:0 0 .5em;letter-spacing:.01em}
h2{font-size:clamp(2rem, 1.5rem + 2vw, 3rem);text-transform:uppercase}
h3{font-size:1.35rem}
.eyebrow{
  display:block;font-family:var(--font-body);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.82rem;color:var(--brand-deep);margin-bottom:.7rem;
}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:38em}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:40;background:rgba(248,250,253,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.site-head__in{display:flex;align-items:center;gap:1.4rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em}
.brand__name b{color:var(--brand)}
.site-nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.site-nav a{font-weight:600;text-decoration:none;font-size:.98rem}
.site-nav a:hover{text-decoration:underline}
.head-phone{font-family:var(--font-data);font-size:.92rem;white-space:nowrap}
.nav__toggle{ display:none; }
@media (max-width:760px){
  /* This site had NO mobile nav: the rule replaced here hid every non-button nav
     link below 760px, and no toggle existed in the markup, the CSS or the JS, so
     only the CTA button survived. Same pattern now used across the estate.
     `:not([hidden])` keeps the control honest: the script strips `hidden` as it
     attaches the handler, so the button never appears unless it actually works. */
  .site-head{ position:relative; }
  .nav__toggle:not([hidden]){ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body); font-weight:600; font-size:.95rem;
    background:var(--panel); color:var(--brand-deep); border:1.5px solid var(--line); border-radius:999px; padding:.55rem .95rem; cursor:pointer; min-height:44px; flex:none; }
  .site-nav{ position:absolute; top:100%; right:var(--wrap-gutter); left:var(--wrap-gutter); flex-direction:column; align-items:stretch; gap:.3rem;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:.4rem;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none; padding:0 .7rem;
    /* visibility, not opacity alone: a collapsed drawer that is merely transparent
       still leaves its links in the tab order. Untransitioned so closing is instant. */
    visibility:hidden; transition:max-height .3s ease, opacity .25s; }
  .site-nav[data-open="true"]{ max-height:380px; overflow:auto; opacity:1; pointer-events:auto; padding:.7rem; visibility:visible; }
  .site-nav a:not(.btn){ display:flex; align-items:center; min-height:44px; padding:.55rem .7rem; border-radius:10px; font-size:1rem; }
  .site-nav a:not(.btn):hover{ background:var(--bg-alt); }
  .site-nav .btn{ justify-content:center; min-height:44px; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .site-nav, .site-nav[data-open="true"]{ transition:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font:600 1.02rem var(--font-body);padding:.85em 1.5em;border-radius:10px;
  background:var(--brand);color:#fff;transition:background .15s,transform .15s;
}
.btn:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn--accent{background:var(--accent);color:#241503}
.btn--accent:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--brand-deep);box-shadow:inset 0 0 0 2px var(--brand)}
.btn--ghost:hover{background:var(--brand-tint)}
.btn--small{font-size:.9rem;padding:.6em 1.1em}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem, 2rem + 4vw, 6.5rem)}
.hero__grid{display:grid;gap:3rem;grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.9rem, 2rem + 4.5vw, 5rem);text-transform:uppercase}
.hero h1 .eyebrow{font-size:.9rem}
.hero__ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.hero__note{font-size:.9rem;color:var(--ink-soft);margin-top:1rem}

/* hero device card */
.device{
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:18px;
  box-shadow:var(--shadow);padding:1.3rem;color:var(--panel-ink);
}
.device__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.8rem}
.device__title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:480px){.readouts{grid-template-columns:1fr}}
.readout{background:rgba(255,255,255,.04);border:1px solid var(--panel-edge);border-radius:12px;padding:.9rem 1rem}
.readout__label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--panel-dim)}
.readout__val{display:block;font-family:var(--font-data);font-size:2rem;line-height:1.15;margin-top:.15rem}
.readout__range{display:block;font-size:.78rem;color:var(--panel-dim);margin-top:.15rem}
.readout--warn .readout__val{color:var(--accent)}
.readout--bad .readout__val{color:#ff7a7a}
.readout--ok .readout__val{color:#7fd6a9}

/* status chip */
.chip{
  display:inline-flex;align-items:center;gap:.45em;font:600 .82rem var(--font-body);
  padding:.35em .8em;border-radius:99px;letter-spacing:.05em;text-transform:uppercase;
}
.chip::before{content:"";width:.6em;height:.6em;border-radius:50%;background:currentColor}
.chip--ok{background:rgba(40,146,95,.16);color:#7fd6a9}
.chip--bad{background:rgba(214,69,69,.18);color:#ff8f8f}
.chip--light-ok{background:#e2f3ea;color:color-mix(in srgb, var(--ok) 75%, black)}
.chip--light-bad{background:#fbe4e4;color:color-mix(in srgb, var(--bad) 80%, black)}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line);background:#fff}
.trust__in{display:flex;gap:.6rem 2.2rem;flex-wrap:wrap;justify-content:center;padding-block:1rem;
  font-weight:600;color:var(--ink-soft);font-size:.98rem}

/* ---------- dashboard demo ---------- */
.dash{
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);
  color:var(--panel-ink);box-shadow:var(--shadow);overflow:hidden;
}
.dash__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:1rem 1.3rem;border-bottom:1px solid var(--panel-edge)}
.dash__bar .device__title{margin-right:auto}
.dash__grid{display:grid;grid-template-columns:280px 1fr;gap:0}
@media (max-width:860px){.dash__grid{grid-template-columns:1fr}}
.dash__side{padding:1.2rem 1.3rem;border-right:1px solid var(--panel-edge);display:grid;gap:.9rem;align-content:start}
@media (max-width:860px){.dash__side{border-right:0;border-bottom:1px solid var(--panel-edge);grid-template-columns:1fr 1fr}}
@media (max-width:480px){.dash__side{grid-template-columns:1fr}}
.dash__main{padding:1.2rem 1.3rem;min-width:0}
.dash__chart-wrap{background:rgba(255,255,255,.03);border:1px solid var(--panel-edge);border-radius:10px;padding:.7rem}
.dash__chart{display:block;width:100%;height:auto}
.dash__legend{display:flex;gap:1.4rem;font-size:.8rem;color:var(--panel-dim);margin-top:.5rem;flex-wrap:wrap}
.dash__legend b{font-weight:600;color:var(--panel-ink)}
.swatch{display:inline-block;width:.85em;height:.28em;border-radius:2px;margin-right:.35em;vertical-align:middle}
.feed{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem;max-height:172px;overflow-y:auto}
.feed li{
  font-family:var(--font-data);font-size:.82rem;line-height:1.45;
  padding:.5rem .7rem;border-left:3px solid var(--panel-edge);background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;
}
.feed li.is-alert{border-left-color:var(--bad);color:#ffd9d9}
.feed li.is-action{border-left-color:var(--accent);color:#ffe9c4}
.feed li.is-ok{border-left-color:var(--ok)}
.dash__controls{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;padding:1rem 1.3rem;border-top:1px solid var(--panel-edge)}
.dash__controls .hint{font-size:.85rem;color:var(--panel-dim)}

/* ---------- HACCP log ---------- */
.log-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.log-card__bar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;padding:1rem 1.3rem;border-bottom:1px solid var(--line)}
.log-card__title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem}
.log-scroll{overflow-x:auto}
table.log{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.log th{
  text-align:left;font-family:var(--font-body);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);padding:.6rem .9rem;border-bottom:2px solid var(--line);background:var(--bg-alt);
}
.log td{padding:.55rem .9rem;border-bottom:1px solid var(--line);font-family:var(--font-data);font-size:.86rem;white-space:nowrap}
.log td.action{font-family:var(--font-body);white-space:normal;min-width:16em}
.log tr.excursion td{background:#fdf3e3}
.log .t-ok{color:color-mix(in srgb, var(--ok) 75%, black)}
.log .t-bad{color:color-mix(in srgb, var(--bad) 80%, black);font-weight:700}
.log-card__foot{padding: .9rem 1.3rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:.88rem;color:var(--ink-soft)}

/* ---------- calculator ---------- */
.calc{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc__form{display:grid;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.calc__result{
  background:var(--brand-tint);border:1px solid #bcd8ea;border-radius:var(--radius);padding:1.5rem;
}
.calc__figure{font-family:var(--font-data);font-size:clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);color:var(--brand-deep);line-height:1.1}
.calc__note{font-size:.86rem;color:var(--ink-soft);margin-top:1rem}

/* ---------- cards ---------- */
.cards{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);margin-top:2.2rem}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.card h3{color:var(--brand-deep)}
.card--accent{border-top:4px solid var(--accent)}

/* ---------- steps ---------- */
.steps{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);margin-top:2.2rem}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:.8rem;padding:0}
.faq summary{
  cursor:pointer;font-weight:600;font-size:1.05rem;padding:1rem 1.3rem;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:.85rem;font-size:1.4rem;color:var(--brand)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 1.3rem 1.2rem;color:var(--ink-soft)}

/* ---------- form ---------- */
.contact-grid{display:grid;gap:2.5rem;grid-template-columns:1.1fr .9fr}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
form.enquiry{display:grid;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.field{display:grid;gap:.35rem}
.field label{font-weight:600;font-size:.95rem}
.field input,.field textarea{
  font:inherit;padding:.7em .9em;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);
  color:var(--ink);width:100%;
}
.field input:focus,.field textarea:focus{border-color:var(--brand)}
.field .err{color:color-mix(in srgb, var(--bad) 80%, black);font-size:.85rem;min-height:1.1em}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.contact-aside h3{margin-top:0}
.contact-aside .phone{font-family:var(--font-data);font-size:1.5rem;display:inline-block;margin:.4rem 0 1rem}

/* ---------- footer ---------- */
.site-foot{background:var(--panel);color:var(--panel-dim);padding-block:3rem;font-size:.92rem}
.site-foot a{color:var(--panel-ink)}
.site-foot__grid{display:grid;gap:2rem;grid-template-columns:1.2fr 1fr 1fr}
@media (max-width:760px){.site-foot__grid{grid-template-columns:1fr}}
.site-foot h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--panel-ink);margin:0 0 .6rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-foot__legal{border-top:1px solid var(--panel-edge);margin-top:2.2rem;padding-top:1.4rem;font-size:.82rem}

/* ============================================================
   v2 — walkthrough (one bad night, minute by minute)
   Scenes are VISIBLE/END-STATE by default; .wt.is-armed (added by JS
   only when IO exists, reduced motion is off and the viewport is real)
   opts steps into their pre-animation state. transform/opacity only.
   ============================================================ */
.wt{position:relative;margin-top:3rem}
.wt__rail{
  position:absolute;left:9px;top:14px;bottom:14px;width:3px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.wt__rail-fill{
  position:absolute;inset:0;background:var(--brand);
  transform-origin:top;transform:scaleY(1);
}
.wt.is-armed .wt__rail-fill{transform:scaleY(0);transition:transform .8s var(--m-ease-out, ease-out)}
.wt__steps{list-style:none;margin:0;padding:0 0 0 44px;display:grid;gap:clamp(2.6rem,2rem + 2vw,4.2rem)}
.wt-step{position:relative;display:grid;gap:1.6rem 2.6rem;grid-template-columns:minmax(0,420px) 1fr;align-items:center}
@media (max-width:860px){.wt-step{grid-template-columns:1fr}}
.wt-dot{
  position:absolute;left:-44px;top:14px;width:21px;height:21px;border-radius:50%;
  background:var(--bg-alt);border:3px solid var(--line);
  transition:border-color .3s,background .3s;
}
.wt-step.live .wt-dot,.wt:not(.is-armed) .wt-dot{border-color:var(--brand);background:var(--brand-tint)}

.wt-scene{
  margin:0;background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.1rem .8rem;
}
.wt-scene svg{display:block;width:100%;height:auto}
.wt-scene figcaption{
  font-family:var(--font-data);font-size:.78rem;color:var(--panel-dim);
  text-align:center;padding-top:.6rem;border-top:1px solid var(--panel-edge);margin-top:.7rem;
}
.wt-copy h3{font-size:1.6rem;text-transform:uppercase;margin-bottom:.4rem}
.wt-copy p{color:var(--ink-soft);max-width:34em;margin:0}
.wt-time{
  display:inline-block;font-family:var(--font-data);font-size:1rem;color:var(--brand-deep);
  background:var(--brand-tint);border:1px solid #bcd8ea;border-radius:8px;
  padding:.15em .6em;margin-bottom:.7rem;
}
.wt-step[data-step="2"] .wt-time,
.wt-step[data-step="4"] .wt-time{color:color-mix(in srgb, var(--accent-deep) 75%, black);background:#fdf3e3;border-color:#f0d9ad}

/* scene entrance (armed only): scene card + copy slide in */
.wt.is-armed .wt-step:not(.live) .wt-scene{opacity:0;transform:translateY(26px)}
.wt.is-armed .wt-step:not(.live) .wt-copy{opacity:0;transform:translateY(18px)}
.wt.is-armed .wt-step.live .wt-scene,
.wt.is-armed .wt-step.live .wt-copy{
  opacity:1;transform:none;
  transition:opacity .6s var(--m-ease-out, ease-out),transform .6s var(--m-ease-out, ease-out);
}
.wt.is-armed .wt-step.live .wt-copy{transition-delay:.12s}

/* scene 1: probe pulse rings (infinite -> figure carries data-pause-offscreen) */
.wt-pulse{transform-box:fill-box;transform-origin:center;opacity:0}
.wt.is-armed .wt-step.live .wt-pulse,
.wt:not(.is-armed) .wt-pulse{animation:wt-pulse 3s linear infinite}
.wt-pulse--2{animation-delay:1s !important}
.wt-pulse--3{animation-delay:2s !important}
@keyframes wt-pulse{
  0%{transform:scale(.25);opacity:.9}
  100%{transform:scale(1.7);opacity:0}
}

/* scene 2: drift line draws itself, ping at the crossing */
.wt-draw{stroke-dasharray:1}
.wt.is-armed .wt-step:not(.live) .wt-draw{stroke-dashoffset:1}
.wt.is-armed .wt-step.live .wt-draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--m-ease-out, ease-out) .3s}
.wt-ping{transform-box:fill-box;transform-origin:center}
.wt.is-armed .wt-step:not(.live) .wt-ping{opacity:0}
.wt.is-armed .wt-step.live .wt-ping{animation:wt-ping .9s var(--m-ease-out, ease-out) 1.4s 3 backwards}
@keyframes wt-ping{
  0%{transform:scale(.6);opacity:1}
  50%{transform:scale(1.5);opacity:.65}
  100%{transform:scale(1);opacity:1}
}

/* scene 3: alert paths flow toward the phone (infinite dash march) */
.wt-flow{stroke-dashoffset:0}
.wt.is-armed .wt-step.live .wt-flow,
.wt:not(.is-armed) .wt-flow{animation:wt-flow 1.1s linear infinite}
.wt-flow--slow{animation-duration:1.7s !important}
@keyframes wt-flow{to{stroke-dashoffset:-28}}

/* scenes 4/5: message bubbles land one after another */
.wt-phone,.wt-log{display:grid;gap:.6rem;padding:.4rem .2rem .2rem}
.wt-bub{
  font-family:var(--font-data);font-size:.82rem;line-height:1.5;color:var(--panel-ink);
  background:rgba(255,255,255,.04);border-left:3px solid var(--panel-edge);
  border-radius:0 8px 8px 0;padding:.55rem .75rem;
}
.wt-bub__t{display:block;font-size:.7rem;color:var(--panel-dim);letter-spacing:.08em;text-transform:uppercase}
.wt-bub--alert{border-left-color:var(--bad);color:#ffd9d9}
.wt-bub--action{border-left-color:var(--accent);color:#ffe9c4}
.wt-bub--ok{border-left-color:var(--ok)}
.wt.is-armed .wt-step:not(.live) .wt-bub{opacity:0;transform:translateY(10px)}
.wt.is-armed .wt-step.live .wt-bub{
  opacity:1;transform:none;
  transition:opacity .5s var(--m-ease-out, ease-out),transform .5s var(--m-ease-out, ease-out);
  transition-delay:calc(.35s + var(--b, 0) * .8s);
}

/* ============================================================
   v2 — calculator bars
   ============================================================ */
.calc__bars{display:grid;gap:.55rem;margin-top:1.2rem}
.cbar{display:grid;grid-template-columns:9.5em 1fr auto;gap:.7rem;align-items:center;font-size:.85rem}
@media (max-width:480px){.cbar{grid-template-columns:1fr auto}.cbar__label{grid-column:1 / -1}}
.cbar__label{color:var(--ink-soft);font-weight:600}
.cbar__track{display:block;height:.85em;background:rgba(28,95,131,.12);border-radius:99px;overflow:hidden}
.cbar__fill{
  display:block;height:100%;border-radius:99px;transform-origin:left;transform:scaleX(1);
  transition:transform .45s var(--m-ease-out, ease-out);
}
.cbar__fill--bad{background:var(--bad)}
.cbar__fill--warn{background:var(--accent)}
.cbar__fill--ok{background:var(--ok);transform:scaleX(.03)}
.cbar__val{font-family:var(--font-data);font-size:.8rem;color:var(--ink-soft);white-space:nowrap}

/* reduced motion: scenes sit at their end state, loops die (global kill
   block above already zeroes durations; this pins states for safety) */
@media (prefers-reduced-motion:reduce){
  .wt-pulse,.wt-flow,.wt-ping{animation:none !important}
  .wt-pulse{opacity:.35;transform:scale(1)}
  .wt.is-armed .wt-step:not(.live) .wt-scene,
  .wt.is-armed .wt-step:not(.live) .wt-copy,
  .wt.is-armed .wt-step:not(.live) .wt-bub{opacity:1;transform:none}
  .wt.is-armed .wt-step:not(.live) .wt-draw{stroke-dashoffset:0}
  .wt.is-armed .wt-step:not(.live) .wt-ping{opacity:1}
  .wt.is-armed .wt__rail-fill{transform:scaleY(1)}
}

/* misc */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[aria-busy="true"]{opacity:.65;pointer-events:none}