/**
 * Right Hand — the landing page.
 *
 * One palette, and it is the app's: the tokens below are lifted from
 * apps/desktop/src/style.css and apps/desktop/src/overlay.css rather than
 * invented for marketing. Someone who reads this page and then opens the
 * product should recognise the second from the first, and the hero's panel is
 * a copy of the real one, so a change to the panel's shape belongs here too.
 *
 * Serif for headings and for the one line you are meant to read out loud; the
 * system sans for everything else. That split is the app's, and it carries a
 * meaning worth keeping: the serif is Right Hand speaking as you.
 */

:root {
  --ink: #283630;
  --muted: #71786f;
  --line: #dddfd6;
  --green: #355c4b;
  --paper: #fdfdf9;
  --sand: #f5f4ef;
  --deep: #59694e;
  /* How far the vista comes up out of the paper behind the hero. The same 0.4
     the sign-in screen stands on: the two are the same photograph and want to
     read as the same room. The copy column is kept off the strong half of it by
     the left mask ramp rather than by washing the whole picture out. */
  --vista: 0.4;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(42px, 5.6vw, 68px);
}

h2 {
  font-size: clamp(32px, 4vw, 50px);
}

button,
a.primary,
a.secondary {
  font: inherit;
}

:where(a, button):focus-visible {
  outline: 3px solid #779d83;
  outline-offset: 4px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  z-index: 20;
}
.skip:focus {
  left: 24px;
}

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--deep);
}

.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--deep);
  text-wrap: pretty;
}

.fine {
  font-size: 12.5px;
  color: var(--muted);
}
.fine.centred {
  text-align: center;
}
.link {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #c3cabe;
}

/* Phosphor's stroke weight, at the sizes this page uses them. */
.i {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Buttons — the app's, unchanged ------------------------------------- */

.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  font-weight: 500;
  padding: 12px 19px;
  min-height: 46px;
  transition: background 0.15s;
}
.primary {
  background: var(--green);
  color: #fff;
}
.primary:hover {
  background: #274b3b;
}
.secondary {
  background: #fcfcf8;
  border: 1px solid #d3d9ce;
}
.secondary:hover {
  background: #eef0e8;
}
.compact {
  padding: 8px 14px;
  min-height: 38px;
  font-size: 13.5px;
}

/* --- Header -------------------------------------------------------------- */

.top {
  position: relative;
  z-index: 3;
  padding: 20px 0;
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  /* Match the app/sign-in lockup; em ratios scale the footer as a whole. */
  gap: calc(9em / 22);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: calc(-1em / 22);
  white-space: nowrap;
  color: var(--ink);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(32em / 22);
  height: calc(36em / 22);
  color: var(--green);
}
.brand-mark > svg {
  width: calc(26em / 22);
  height: calc(26em / 22);
}
.brand.small {
  font-size: 18px;
}

/* --- 1. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(36px, 6vw, 78px) 0 clamp(56px, 8vw, 104px);
  overflow: hidden;
}
/* The same wash the sign-in screen stands on, cropped so the room walks off to
   the right behind the simulation and the copy column keeps the abstract half
   of the picture under it. Multiply drops its near-white sky into the paper, so
   there is no pale rectangle sitting on #f5f4ef. */
.hero::before {
  content: "";
  position: absolute;
  inset: -120px 0 0;
  width: 150%;
  z-index: -1;
  background: url("vista.webp") left 30% / cover no-repeat;
  filter: saturate(0.8) brightness(1.05);
  opacity: var(--vista);
  mix-blend-mode: multiply;
  pointer-events: none;
  /* The top and left ramps are the sign-in screen's, so the picture arrives out
     of the paper at the same rate there and here. The fourth stop is this
     page's own: the hero has a section under it rather than the bottom of a
     window, so the wash has to feather out instead of cutting. Late and short,
     or the fade eats the floor of the room and the hero goes pale exactly
     where the sign-in screen is still full. */
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 34%,
      #000 88%,
      transparent 100%
    ),
    linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 34%,
      #000 88%,
      transparent 100%
    ),
    linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero-grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1fr 1.02fr;
  }
}

.hero-copy h1 {
  margin: 18px 0 22px;
}
.hero-copy .lead {
  max-width: 30em;
}
/* --muted is set for fine print on plain paper, and the strongest part of the
   wash reaches the end of this line. A step darker holds it at 4.8:1 there;
   everywhere else on the page .fine stays --muted. */
.hero-copy .fine {
  color: #545b51;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 16px;
}
/* Stacked, two buttons sized to their own labels look like a ragged edge rather
   than a pair. */
@media (max-width: 560px) {
  .cta-row > a {
    width: 100%;
  }
}

/* --- The simulation ------------------------------------------------------ */

.hero-stage {
  min-width: 0;
}
.stage {
  position: relative;
}
/* Room under the conversation for the panel to hang into. The panel is taken
   out of the flow so that opening and collapsing it does not move the rest of
   the page up and down twice a loop, which means the space it needs has to be
   reserved here instead. Sized to the tallest card the script shows. */
.stage-scene {
  padding-bottom: 222px;
}
@media (max-width: 560px) {
  .stage-scene {
    padding-bottom: 292px;
  }
}
.call-frame {
  position: relative;
}

/* The conversation you are actually in. Deliberately plain: it is the thing
   Right Hand sits on top of, not the thing being sold. */
.call {
  border: 1px solid #dfe3d8;
  border-radius: 12px;
  background: #eef0e8;
  box-shadow: 0 24px 60px -34px rgba(40, 54, 48, 0.45);
  overflow: hidden;
}
.call-head {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid #e2e6da;
  background: #e7eae0;
  font-size: 12.5px;
  color: var(--deep);
}
.call-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b4562f;
  flex: none;
}
.call-name {
  font-weight: 500;
}
.call-time {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.call-lines {
  /* Three lines of dialogue and the room to grow into a fourth. Fixed, so the
     card stack below does not walk up and down the page as the loop runs. */
  min-height: 224px;
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.call-line {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.call-line.in {
  opacity: 1;
  transform: none;
}
.call-who {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a9184;
  margin-bottom: 3px;
}
.call-said {
  font-size: 15.5px;
  line-height: 1.55;
  color: #4a5750;
  text-wrap: pretty;
}
/* On a narrow screen every line of dialogue wraps, and the box grew as the
   third one landed — which walked the panel hanging off its bottom edge down
   the page mid-sentence. Smaller type and a taller floor hold it still. */
@media (max-width: 560px) {
  .call-said {
    font-size: 15px;
  }
  .call-lines {
    min-height: 312px;
  }
}
/* Your own line, once you have said what it suggested. */
.call-line.mine .call-who {
  color: var(--green);
}
.call-line.mine .call-said {
  color: var(--ink);
}

/* The panel, copied from overlay.css. It floats over the corner of whatever you
   are doing, which is exactly where it sits in the product. */
.rh-panel {
  position: absolute;
  right: -8px;
  /* Anchored by its top edge, overlapping the conversation's lower border by a
     little. Anchored by its bottom the tall cards would sit on the transcript
     and the short ones would float clear of it; this way every card in the
     script hangs off the same line. */
  top: calc(100% - 26px);
  z-index: 2;
  background: var(--paper);
  border: 1px solid #d3d8ca;
  color: var(--ink);
  font-size: 14px;
  box-shadow: 0 22px 48px -26px rgba(40, 54, 48, 0.5);
  transition:
    width 0.32s ease,
    border-radius 0.32s ease;
}
@media (max-width: 560px) {
  .rh-panel {
    right: 0;
    left: 0;
  }
}
.rh-pill {
  width: max-content;
  border-radius: 22px;
}
.rh-open {
  width: min(400px, 100%);
  border-radius: 13px;
}
.rh-head {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 9px 0 14px;
  background: #edefe6;
  border-bottom: 1px solid #e3e6da;
  border-radius: 12px 12px 0 0;
}
.rh-pill .rh-head {
  height: 44px;
  padding: 0 16px 0 15px;
  gap: 10px;
  background: none;
  border-bottom: 0;
  border-radius: 22px;
}
.rh-mark {
  color: var(--green);
  flex: none;
}
.rh-rule {
  display: none;
  width: 1px;
  height: 15px;
  background: #e0e3d6;
  flex: none;
}
.rh-pill .rh-rule {
  display: block;
}
.rh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: #b5813c;
}
/* The only thing moving on your screen, and slowly. */
.rh-dot-live {
  animation: rh-breathe 5.4s ease-in-out infinite;
}
@keyframes rh-breathe {
  0%,
  100% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.85;
  }
}
.rh-word {
  font-size: 12px;
  color: var(--deep);
  white-space: nowrap;
}
.rh-time {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rh-gap {
  flex-grow: 1;
}
.rh-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: #dfe6d9;
  color: #46614f;
  font-size: 11.5px;
  flex: none;
}
.rh-chip .i {
  width: 13px;
  height: 13px;
}
/* Collapsed, the panel is a pill and a timer. Nothing else fits, and nothing
   else is wanted mid-sentence. */
.rh-pill .rh-chip,
.rh-pill .rh-body {
  display: none;
}
.rh-body {
  padding: 19px 22px 24px;
}
.rh-stroke {
  display: block;
}
.rh-label {
  display: block;
  margin-top: 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}
/* The one card you are meant to read out loud. */
.rh-spoken {
  margin-top: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: -0.3px;
  color: #3f5b30;
  text-wrap: pretty;
}
/* Everything else is a note to yourself, so it stays in the app's own voice. */
.rh-note {
  margin-top: 13px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--deep);
  text-wrap: pretty;
}
.rh-why {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #e7e9df;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.rh-why:empty {
  display: none;
}
/* A new card replaces the last one in place, the way it does in the product. */
.rh-body.swap .rh-label,
.rh-body.swap .rh-note,
.rh-body.swap .rh-spoken,
.rh-body.swap .rh-why {
  animation: card-in 0.42s ease both;
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

/* With no script there is nothing to pause, and nothing to fill the window
   either: it shrinks to its head and the prose below carries the section. */
html:not(.js) .stage-toggle {
  display: none;
}
html:not(.js) .call-lines {
  min-height: 0;
  padding-bottom: 20px;
}
html:not(.js) .stage-scene {
  padding-bottom: 48px;
}

/* Only ever seen with scripting off, where it stands in for the loop. */
.stage-note {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--deep);
  text-wrap: pretty;
}
.stage-note em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #3f5b30;
}

.stage-toggle {
  position: absolute;
  right: 0;
  bottom: -34px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #c9cec3;
}
.stage-toggle:hover {
  color: var(--deep);
}

/* --- Sections ------------------------------------------------------------ */

.section,
.band,
.close {
  padding: clamp(64px, 8vw, 112px) 0;
}
.band {
  background: #eef0e7;
  border-top: 1px solid #e3e6da;
  border-bottom: 1px solid #e3e6da;
}
.section-head {
  max-width: 34em;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head h2 {
  margin: 16px 0 20px;
}

/* --- 2. It knows you ----------------------------------------------------- */

.context {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .context {
    grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
    gap: 0;
  }
}

.sources {
  display: grid;
  gap: 14px;
  /* Equal rows, so each thread meets the middle of its own source. Left to the
     content, the first row is taller than the rest and every thread lands
     somewhere slightly wrong. */
  grid-auto-rows: 1fr;
}
.source {
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
}
.source-kind {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 3px;
}
.source-items {
  font-size: 14px;
  color: var(--deep);
}

/* Four threads pulling into one card. Drawn rather than decorated: the point of
   the section is that the advice is downstream of all four. */
.wires {
  display: none;
}
@media (min-width: 900px) {
  .wires {
    display: block;
    align-self: stretch;
  }
  .wires svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #c2cdbb;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
  }
}

.context-out {
  display: grid;
  gap: 14px;
}

.card {
  padding: 22px 24px;
  border-radius: 9px;
  border: 1px solid #e3ddc8;
  background: #f8f6eb;
}
.card-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--deep);
}
.card > p {
  margin-top: 13px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--deep);
  text-wrap: pretty;
}
/* Matches the specificity of `.card > p` above, and follows it, or the note's
   size and colour win and the provenance line reads as a second sentence of
   advice rather than the receipt under it. */
.card > p.card-why {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e7e2d1;
  font-size: 12.5px;
  color: var(--muted);
}
.card.kind-say_this {
  background: #e8efde;
  border-color: #d1dcc4;
}
.card.kind-say_this > p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.42;
  letter-spacing: -0.35px;
  color: #3f5b30;
}
.card.kind-warning {
  background: #f9efe6;
  border-color: #e8d5c2;
}
.card.kind-warning .card-label {
  color: #8a5a3b;
}

/* --- 3. Moments ---------------------------------------------------------- */

.moments {
  display: grid;
  gap: 22px;
}
@media (min-width: 860px) {
  .moments {
    grid-template-columns: repeat(3, 1fr);
  }
}
.moment {
  display: flex;
  flex-direction: column;
}
.moment .card {
  flex: 1;
  margin-top: auto;
}
.moment h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.6px;
  line-height: 1.2;
}
.moment-promise {
  margin: 10px 0 20px;
  font-size: 15.5px;
  color: var(--deep);
  text-wrap: pretty;
}

/* --- 4. Before / during / after ------------------------------------------ */

.arc {
  display: grid;
  gap: 18px;
}
@media (min-width: 860px) {
  .arc {
    grid-template-columns: repeat(3, 1fr);
  }
}
.arc-step {
  padding: 30px 28px 34px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
}
/* The middle step is the product as it exists today; the other two are the same
   idea before and after the room. It reads as the centre, because it is. */
.arc-now {
  background: #e8efde;
  border-color: #d1dcc4;
}
.arc-when {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}
.arc-line {
  margin-top: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.38;
  letter-spacing: -0.4px;
  color: #3f5b30;
  text-wrap: pretty;
}

/* --- 5. Privacy ---------------------------------------------------------- */

.privacy {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(32px, 4vw, 54px);
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
}
@media (min-width: 900px) {
  .privacy {
    grid-template-columns: 0.95fr 1fr;
  }
}
.privacy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e8efde;
  color: var(--green);
  margin-bottom: 20px;
}
.privacy-icon .i {
  width: 24px;
  height: 24px;
}
.privacy-copy h2 {
  margin-bottom: 18px;
}
.privacy-list {
  display: grid;
  gap: 22px;
  align-content: center;
}
.privacy-list li {
  padding-left: 20px;
  border-left: 2px solid #dbe2d3;
  font-size: 15px;
  color: var(--deep);
  text-wrap: pretty;
}
.privacy-list strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

/* --- 6. Close ------------------------------------------------------------ */

.close {
  background: #e8efde;
  border-top: 1px solid #d8e0cd;
}
.close-inner {
  max-width: 26em;
  margin: 0 auto;
  text-align: center;
}
.close-inner .lead {
  margin: 22px 0 34px;
}
/* The invitation note under the last button. Narrower than the column it sits in,
   so it reads as a footnote to the button rather than as another paragraph. */
.close-inner .fine {
  max-width: 24em;
  margin: 22px auto 0;
  line-height: 1.6;
}

/* --- Footer -------------------------------------------------------------- */

.foot {
  padding: 30px 0 44px;
  border-top: 1px solid var(--line);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.foot-row .fine:last-of-type,
.foot-row .link {
  margin-left: auto;
}

/* --- Motion -------------------------------------------------------------- */

/* Sections arrive as you reach them. `.seen` is set by the observer in site.js;
   without JavaScript the rule below never applies and everything is simply on
   the page, which is the state that matters. */
/* The stagger is set here rather than with a style attribute on each element:
   the page's content-security policy allows no inline style, and a delay that
   silently does not apply is worse than no stagger at all. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  --n: 0;
}
.reveal:nth-child(2) {
  --n: 1;
}
.reveal:nth-child(3) {
  --n: 2;
}
.js .reveal.seen,
.js .reveal {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: calc(var(--n, 0) * 90ms);
}
.js .reveal.seen {
  opacity: 1;
  transform: none;
}
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

.source:nth-child(1) {
  --n: 0;
}
.source:nth-child(2) {
  --n: 1;
}
.source:nth-child(3) {
  --n: 2;
}
.source:nth-child(4) {
  --n: 3;
}
.js .source {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: calc(var(--n) * 110ms);
}
.js .context.seen .source {
  opacity: 1;
  transform: none;
}
.js .context-out {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.7s ease 0.55s,
    transform 0.7s ease 0.55s;
}
.js .context.seen .context-out {
  opacity: 1;
  transform: none;
}
/* The threads draw themselves once, in the order the sources arrived. */
.js .wires path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.js .context.seen .wires path {
  animation: wire-draw 0.9s ease forwards;
}
.js .context.seen .wires path:nth-child(2) {
  animation-delay: 0.11s;
}
.js .context.seen .wires path:nth-child(3) {
  animation-delay: 0.22s;
}
.js .context.seen .wires path:nth-child(4) {
  animation-delay: 0.33s;
}
@keyframes wire-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rh-dot-live {
    animation: none;
    opacity: 0.6;
  }
  .rh-panel,
  .call-line,
  .js .reveal,
  .js .source,
  .js .context-out {
    transition: none;
  }
  .js .reveal,
  .js .source,
  .js .context-out {
    opacity: 1;
    transform: none;
  }
  .js .wires path {
    stroke-dashoffset: 0;
  }
  .js .context.seen .wires path {
    animation: none;
  }
  .rh-body.swap .rh-label,
  .rh-body.swap .rh-note,
  .rh-body.swap .rh-spoken,
  .rh-body.swap .rh-why {
    animation: none;
  }
}