/* ==========================================================================
   /product  -  deep toolkit page. Reuses board, paper, tour, mock chrome
   from chalk.css. Everything here is the original motion-graphic mocks
   and the board-tour colour fixes those shared styles do not cover.
   ========================================================================== */

/* Current nav item. Shared CSS never marked it. */
.nav__links a[aria-current="page"] { color: var(--chalk); }

/* Board tour copy sits on chalk, not ink. */
.tour--board .tour__copy p,
.tour--board .tour__copy .ticks li { color: var(--chalk-dim); }
.tour--board .tour__copy h2 { color: var(--chalk); }

/* One cluster per section: keep the vertical rhythm tight. */
.prod-tour {
  padding-top: clamp(48px, 7vh, 88px);
  padding-bottom: clamp(48px, 7vh, 88px);
  scroll-margin-top: 78px;
}
.prod-tour .tour__item { padding: 0; }

/* ------------------------------------------------------------------ jump */
.prodjump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 4px;
  padding: 14px clamp(18px, 4vw, 44px) 20px;
  border-top: 1px solid rgba(244, 240, 230, 0.08);
  position: relative;
  z-index: 1;
}
.prodjump a {
  color: var(--chalk-dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 550;
  padding: 4px 10px;
  border-radius: 99px;
}
.prodjump a:hover,
.prodjump a:focus-visible { color: var(--chalk); background: rgba(244, 240, 230, 0.06); }
.prodjump span { color: var(--chalk-faint); font-size: 13px; padding: 0 2px; }

/* ----------------------------------------------------------------- mocks
   Dark app chrome, same family as .mock / .heromock, original layouts. */
.pmock {
  background: #24201a;
  color: var(--chalk);
  border-radius: var(--radius);
  border: 1px solid rgba(244, 240, 230, 0.12);
  box-shadow: 0 24px 60px rgba(28, 24, 18, 0.4);
  padding: 16px 18px 18px;
}
.tour--board .pmock {
  background: #262119;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.pmock__bar { display: flex; gap: 5px; margin-bottom: 10px; }
.pmock__title {
  font-weight: 650;
  font-size: 13.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pmock__meta { font-size: 11.5px; color: var(--accent-light); font-weight: 550; }
.pmock__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--chalk-dim);
  border-bottom: 1px dashed rgba(244, 240, 230, 0.09);
}
.pmock__line b { color: var(--chalk); font-weight: 600; font-variant-numeric: tabular-nums; }
.pmock__line--muted { color: var(--chalk-faint); }
.pmock__line--opt em {
  font-style: normal;
  font-family: var(--hand);
  font-size: 14.5px;
  color: var(--accent-light);
  margin-left: 5px;
}
.pmock__total {
  display: flex;
  justify-content: space-between;
  padding: 11px 0 4px;
  font-weight: 700;
  font-size: 15.5px;
}
.pmock__note {
  margin-top: 8px;
  font-family: var(--hand);
  font-size: 16px;
  color: var(--accent-light);
}

/* Tiny chalk tick used on optional extras and clock-in. */
.ptick {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
}
.ptick svg { width: 100%; height: 100%; }
.ptick path {
  fill: none;
  stroke: var(--good);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: url(#chalk);
}

/* ================================================================== hero
   A desk: week board behind, phone estimate in front, on-my-way toast. */
.desk {
  position: relative;
  min-height: 430px;
}
.desk__week {
  position: absolute;
  left: 0;
  top: 8px;
  width: 74%;
  transform: rotate(-1.1deg);
  z-index: 1;
}
.desk__phone {
  position: relative;
  margin-left: auto;
  width: min(300px, 62%);
  z-index: 2;
  transform: rotate(1.6deg);
  border-radius: 26px;
  padding: 14px 14px 18px;
  border: 2px solid rgba(244, 240, 230, 0.16);
}
.desk__phone .pmock__notch {
  width: 68px;
  height: 5px;
  border-radius: 99px;
  background: rgba(244, 240, 230, 0.16);
  margin: 2px auto 12px;
}
.desk__toast {
  position: absolute;
  left: 6%;
  bottom: 10px;
  z-index: 3;
  background: #2d2720;
  border: 1px solid rgba(244, 240, 230, 0.16);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  padding: 9px 14px 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: rotate(-1.4deg);
}
.pping {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
  animation: prodPing 1.8s ease-out infinite;
}
.desk__annot {
  position: absolute;
  right: -8px;
  bottom: -36px;
  font-family: var(--hand);
  font-size: 19px;
  color: var(--accent-light);
  transform: rotate(-3deg);
}

/* Photo strip on the estimate. Coloured slabs, not stock photos. */
.pphotos { display: flex; gap: 7px; margin: 4px 0 10px; }
.pphoto {
  flex: 1;
  height: 52px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 240, 230, 0.12);
}
.pphoto span {
  position: absolute;
  left: 5px;
  bottom: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 16, 12, 0.75);
}
.pphoto--a { background: linear-gradient(160deg, #8a7a66 0%, #5c5042 100%); }
.pphoto--b { background: linear-gradient(160deg, #6f8a6a 0%, #3f5340 100%); }
.pphoto--c { background: linear-gradient(160deg, #6a7a8a 0%, #3d4854 100%); }

.psig { position: relative; margin-top: 6px; border-top: 1px solid rgba(244, 240, 230, 0.14); padding-top: 4px; }
.psig svg { width: 70%; height: 40px; display: block; }
.psig path {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: url(#chalk);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.9;
}
.psig em {
  position: absolute;
  right: 0;
  bottom: 6px;
  font-style: normal;
  font-family: var(--hand);
  font-size: 15px;
  color: var(--chalk-faint);
}

.pstamp {
  position: absolute;
  right: 14px;
  top: 42%;
  font: 700 18px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good);
  border: 2.4px solid var(--good);
  border-radius: 8px;
  padding: 7px 11px;
  transform: rotate(-8deg);
  opacity: 0.92;
  filter: url(#chalk);
  pointer-events: none;
}

/* Hero play: visible without JS. With .play, the signature redraws and
   the extras tick on, then the stamp and the on-my-way toast land. */
.play .desk__week { opacity: 0; animation: rise 0.55s 0.15s forwards; }
.play .desk__phone { opacity: 0; animation: rise 0.55s 0.4s forwards; }
.play .ph-tick path {
  animation: prodDraw 0.4s 1.15s both;
}
.play .desk__phone .psig path {
  animation: prodDraw 1.05s 1.45s both;
}
.play .desk__phone .pstamp {
  transform: rotate(-8deg) scale(0);
  animation: stamp 0.55s 2.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.play .desk__toast {
  opacity: 0;
  transform: translateY(8px) rotate(-1.4deg);
  animation: prodToast 0.5s 3.05s forwards;
}

@keyframes prodDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes prodToast {
  to { opacity: 1; transform: rotate(-1.4deg); }
}

/* Mini week inside the hero desk. */
.pweek {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pweek__col {
  background: rgba(244, 240, 230, 0.04);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 32px,
    rgba(244, 240, 230, 0.05) 32px 33px
  );
  border-radius: 8px;
  padding: 7px 6px;
  min-height: 168px;
}
.pweek__day {
  display: block;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  margin-bottom: 6px;
}

/* ================================================================= quotes
   Phone estimate: photos, optional extra ticking, signature drawing. */
.pmock--phone {
  max-width: 320px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 16px 16px 20px;
  border-width: 2px;
  position: relative;
  transform: rotate(0.6deg);
}
.pmock--phone .pmock__notch {
  width: 72px;
  height: 6px;
  border-radius: 99px;
  background: rgba(244, 240, 230, 0.16);
  margin: 0 auto 12px;
}
.pmock--phone .pstamp { top: 36%; right: 12px; font-size: 16px; }

.qphone .ptick path { animation: prodTickLoop 7.5s cubic-bezier(0.45, 0, 0.4, 1) infinite; }
.qphone .psig path { animation: prodSigLoop 7.5s cubic-bezier(0.45, 0, 0.4, 1) infinite; }
.qphone .pstamp { animation: prodStampLoop 7.5s cubic-bezier(0.2, 1.4, 0.4, 1) infinite; }
.qphone .pmock__note { animation: prodNoteLoop 7.5s ease infinite; }

@keyframes prodTickLoop {
  0%, 70% { stroke-dashoffset: 0; }
  78%, 86% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes prodSigLoop {
  0%, 58% { stroke-dashoffset: 0; }
  66%, 74% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes prodStampLoop {
  0%, 68% { transform: rotate(-8deg) scale(1); opacity: 0.92; }
  76%, 84% { transform: rotate(-8deg) scale(0); opacity: 0; }
  100% { transform: rotate(-8deg) scale(1); opacity: 0.92; }
}
@keyframes prodNoteLoop {
  0%, 72% { opacity: 1; transform: none; }
  80%, 88% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================ scheduling
   Week board, route map, My Day with an on-my-way ping. */
.pstack { display: grid; gap: 14px; }
.pviews {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.pviews span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  border: 1px solid rgba(244, 240, 230, 0.12);
  border-radius: 99px;
  padding: 3px 9px;
}
.pviews span.is-on {
  color: var(--chalk);
  border-color: rgba(179, 162, 142, 0.55);
  background: rgba(179, 162, 142, 0.12);
}

.pmap {
  position: relative;
  height: 92px;
  margin-top: 12px;
  border-radius: 10px;
  background: rgba(244, 240, 230, 0.04);
  overflow: hidden;
}
.pmap svg { width: 100%; height: 100%; display: block; }
.pmap path {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: url(#chalk);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.pmap--run path { animation: prodMapDraw 8s cubic-bezier(0.45, 0, 0.4, 1) infinite; }
@keyframes prodMapDraw {
  0%, 74% { stroke-dashoffset: 0; }
  82%, 90% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
.pmap__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-light);
  transform: translate(-50%, -50%);
}
.pmap__dot--now {
  background: var(--good);
  animation: prodPing 1.8s ease-out infinite;
}

/* The on-my-way ping. Distinct from the quote signature and the paid stamp. */
@keyframes prodPing {
  0% { box-shadow: 0 0 0 0 rgba(124, 168, 124, 0.55); }
  70% { box-shadow: 0 0 0 11px rgba(124, 168, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 168, 124, 0); }
}

.pday { display: grid; gap: 8px; }
.pstop {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13px;
}
.pstop b { font-variant-numeric: tabular-nums; color: var(--chalk-faint); font-weight: 600; font-size: 12px; }
.pstop strong { display: block; font-size: 13.5px; font-weight: 650; }
.pstop em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--chalk-faint);
}
.pstop--now { border: 1px solid rgba(124, 168, 124, 0.35); background: rgba(124, 168, 124, 0.08); }
.pway {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--good);
  border: 1.5px solid var(--good);
  border-radius: 99px;
  padding: 3px 8px;
  white-space: nowrap;
  animation: prodPing 1.8s ease-out infinite;
}
.pclock {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--chalk-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================== getting paid */
.pinvoice { position: relative; transform: rotate(-0.4deg); }
.pinvoice .pstamp { top: 28%; right: 16px; }
.pinvoice--run .pstamp { animation: prodPaidLoop 8s cubic-bezier(0.2, 1.4, 0.4, 1) infinite; }
@keyframes prodPaidLoop {
  0%, 70% { transform: rotate(-8deg) scale(1); opacity: 0.92; }
  78%, 86% { transform: rotate(-8deg) scale(0); opacity: 0; }
  100% { transform: rotate(-8deg) scale(1); opacity: 0.92; }
}
.pcosts {
  margin-top: 10px;
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  color: var(--chalk-faint);
  border-top: 1px dashed rgba(244, 240, 230, 0.12);
  padding-top: 10px;
}
.pcosts b { color: var(--chalk); font-weight: 650; }

/* ================================================================= inbox */
.pinbox {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 10px;
  min-height: 230px;
  transform: rotate(0.4deg);
}
.pthreads { display: grid; align-content: start; gap: 6px; }
.pthread {
  background: rgba(244, 240, 230, 0.05);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.pthread b { display: block; font-size: 13px; }
.pthread span { color: var(--chalk-faint); font-size: 11.5px; }
.pthread.is-on {
  background: rgba(179, 162, 142, 0.14);
  border: 1px solid rgba(179, 162, 142, 0.3);
}
.pchat { display: flex; flex-direction: column; gap: 8px; }
.pchat .bubble { margin-top: 0; font-size: 12.5px; padding: 8px 11px; }
.pquiet {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--accent-light);
  border: 1px dashed rgba(179, 162, 142, 0.4);
  border-radius: 9px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pquiet__bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(244, 240, 230, 0.12);
  overflow: hidden;
}
.pquiet__fill {
  display: block;
  height: 100%;
  width: 70%;
  background: var(--accent-light);
  border-radius: 99px;
  animation: prodHold 8s ease-in-out infinite;
}
@keyframes prodHold {
  0%, 12% { width: 8%; }
  55%, 78% { width: 100%; }
  90%, 100% { width: 8%; }
}

/* A reply landing in the thread. Distinct from ping and stamp. */
.bubble--arrive {
  animation: prodBubble 8s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes prodBubble {
  0%, 68% { opacity: 1; transform: none; }
  76% { opacity: 0; transform: translateY(10px) scale(0.96); }
  88%, 100% { opacity: 1; transform: none; }
}

/* =========================================================== leads/portal */
.pfunnel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  transform: rotate(-0.3deg);
}
.pcol {
  background: rgba(244, 240, 230, 0.04);
  border-radius: 10px;
  padding: 8px 7px 10px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pcol > span {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  text-align: center;
  margin-bottom: 2px;
}
.pcard {
  background: rgba(244, 240, 230, 0.1);
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--chalk);
}
.pcard small { display: block; font-weight: 500; color: var(--chalk-faint); font-size: 10.5px; margin-top: 2px; }
.pcard--won { background: rgba(124, 168, 124, 0.22); color: var(--chalk); }
.pcard--from { animation: prodFrom 8s ease infinite; }
.pcard--to { animation: prodTo 8s ease infinite; }
@keyframes prodFrom {
  0%, 35% { opacity: 1; }
  50%, 80% { opacity: 0.28; }
  90%, 100% { opacity: 1; }
}
@keyframes prodTo {
  0%, 40% { opacity: 0.2; }
  52%, 82% { opacity: 1; }
  92%, 100% { opacity: 0.2; }
}

.pleads-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.pportal__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--accent-light);
  margin-bottom: 8px;
}
.pportal ul { list-style: none; display: grid; gap: 5px; font-size: 12.5px; color: var(--chalk-dim); }
.pportal li { padding-left: 0; }
.pdrop {
  border: 1.4px dashed rgba(179, 162, 142, 0.45);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--chalk-dim);
}
.pfile {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid rgba(244, 240, 230, 0.18);
  border-radius: 8px;
  padding: 6px 10px;
  animation: prodFile 8s ease infinite;
}
@keyframes prodFile {
  0%, 70% { opacity: 1; transform: none; }
  78%, 88% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}

.pthumbs { display: flex; gap: 6px; margin-top: 8px; }
.pthumbs i {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  display: block;
}
.pthumbs i:nth-child(1) { background: #8a7a66; }
.pthumbs i:nth-child(2) { background: #6f8a6a; }
.pthumbs i:nth-child(3) { background: #6a7a8a; }
.psearch {
  font-size: 12px;
  color: var(--chalk-faint);
  border: 1px solid rgba(244, 240, 230, 0.14);
  border-radius: 8px;
  padding: 6px 10px;
}

/* ================================================================= team */
.psplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.psplit .pmock { padding: 14px 14px 16px; }
.prole {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--board);
  background: var(--accent-light);
  border-radius: 99px;
  padding: 2px 9px;
  margin-bottom: 8px;
}
.prole--office { background: var(--good); }
.pseat {
  margin-top: 10px;
  font-family: var(--hand);
  font-size: 16px;
  color: var(--accent-light);
}

/* =========================================================== automations */
.pautos { display: grid; gap: 8px; }
.pauto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
}
.pauto b { display: block; font-weight: 650; }
.pauto span { font-size: 12px; color: var(--chalk-faint); }
.pauto__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--good);
  border: 1.5px solid var(--good);
  border-radius: 99px;
  padding: 2px 8px;
}
.pautos--run .pauto:nth-child(1) .pauto__tag { animation: prodTag 9s 0.4s ease infinite; }
.pautos--run .pauto:nth-child(2) .pauto__tag { animation: prodTag 9s 1.6s ease infinite; }
.pautos--run .pauto:nth-child(3) .pauto__tag { animation: prodTag 9s 2.8s ease infinite; }
.pautos--run .pauto:nth-child(4) .pauto__tag { animation: prodTag 9s 4s ease infinite; }
@keyframes prodTag {
  0%, 55% { opacity: 1; transform: none; }
  64%, 76% { opacity: 0; transform: scale(0.8); }
  86%, 100% { opacity: 1; transform: none; }
}

/* ChalkBot one-liner. Quiet, not a pitch. */
.prodai {
  margin: 36px auto 0;
  max-width: 52ch;
  text-align: center;
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.prodai a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 98, 82, 0.45);
}
.prodai a:hover { border-bottom-color: var(--accent); }

.prod-mid {
  margin-top: 8px;
  padding-top: 8px;
}

/* ------------------------------------------------------------------ hero */
.prod-hero .hero__sub { max-width: 56ch; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .desk { min-height: 0; }
  .desk__week {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
  }
  .desk__phone {
    width: min(300px, 100%);
    margin: 0 auto;
  }
  .desk__toast { left: 12px; bottom: -8px; }
  .desk__annot { right: 8px; }
  .pinbox { grid-template-columns: 1fr; }
  .pthreads { grid-template-columns: 1fr 1fr; display: grid; }
  .pleads-extra, .psplit { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .prodjump { justify-content: flex-start; }
  .pfunnel { grid-template-columns: 1fr; }
  .pcol { min-height: 0; }
  .pthreads { grid-template-columns: 1fr; }
  .desk__phone { width: 100%; }
  .pweek__col { min-height: 132px; }
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .play .desk__week,
  .play .desk__phone,
  .play .desk__toast {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .play .desk__phone .pstamp {
    transform: rotate(-8deg) scale(1);
    opacity: 0.92;
    animation: none;
  }
  .play .ph-tick path,
  .play .desk__phone .psig path,
  .qphone .ptick path,
  .qphone .psig path,
  .pmap--run path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .qphone .pstamp,
  .pinvoice--run .pstamp {
    transform: rotate(-8deg) scale(1);
    opacity: 0.92;
    animation: none !important;
  }
  .qphone .pmock__note { opacity: 1; transform: none; animation: none; }
  .pway, .pmap__dot--now { animation: none; }
  .pquiet__fill { width: 100%; animation: none; }
  .bubble--arrive { opacity: 1; transform: none; animation: none; }
  .pcard--from, .pcard--to { opacity: 1; animation: none; }
  .pfile { opacity: 1; transform: none; animation: none; }
  .pping { animation: none; }
  .pauto__tag { opacity: 1; animation: none !important; }
}