.hs-invitation {
  margin: 24px 0;
  padding: 28px 24px 12px;
  text-align: center;
  background: #eaf0e8;
  border-radius: 24px;
  color: var(--ink);
}
.hs-invite-art {
  margin: 0 auto 20px;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
}
.hs-icon-orbit {
  padding: 18px 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.hs-invite-art img {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  box-shadow: 0 5px 12px #1d513523;
  animation: hs-arrive 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hs-invitation h2 {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.08;
  margin: 10px 0;
}
.hs-invitation p {
  max-width: 310px;
  margin: 12px auto 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
/* The steps and the QR code inside the first-check screen's card. */
.hs-invitation .hs-demo {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.55);
}
.hs-invitation .hs-steps {
  margin-bottom: 8px;
}
.hs-invitation .hs-device-menu {
  width: max-content;
  margin: 0 auto;
  text-align: left;
}
.hs-invitation .hs-device-menu > summary {
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--moss-ink);
}
.hs-invitation .hs-device-menu > summary .ico {
  width: 16px;
  height: 16px;
}
.hs-invitation .hs-device-menu[open] > summary {
  box-shadow: none;
}
.hs-invitation .hs-device-options {
  left: 50%;
  right: auto;
  width: 240px;
  transform: translateX(-50%);
}
.hs-qr {
  display: block;
  margin: 0 auto 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px #1d513514;
}
.hs-text-button {
  min-height: 44px;
  padding: 8px 14px;
  color: var(--moss-ink);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hs-guide {
  max-width: 480px;
  margin: auto;
}
.hs-guide h1 {
  margin-top: 8px;
}
.hs-direct {
  text-align: center;
}
.hs-direct .hs-home-caption {
  display: none;
}
.hs-direct p {
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.hs-direct > .hs-text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.topbar .hs-title {
  margin: 0;
  line-height: 1.2;
}
.hs-device-menu {
  position: relative;
  z-index: 4;
  margin: 4px 0 0;
}
.hs-device-menu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #bacabc;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.hs-device-menu > summary::-webkit-details-marker {
  display: none;
}
.hs-device-menu > summary .ico {
  width: 20px;
  height: 20px;
  color: var(--moss);
  transition: transform 0.2s;
}
.hs-device-menu[open] > summary {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px #22795a14;
}
.hs-device-menu[open] > summary .ico {
  transform: rotate(180deg);
}
.hs-device-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  padding: 6px;
  border: 1px solid #bacabc;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px #1d38252b;
}
.hs-device-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.hs-device-options button:hover {
  background: #f0f4ed;
}
.hs-device-options button[aria-pressed="true"] {
  background: #e6eee2;
  color: var(--moss-ink);
  font-weight: 600;
}
.hs-device-options .ico {
  width: 18px;
  height: 18px;
  color: var(--moss);
}
.hs-demo {
  margin: 12px 0 0;
  padding: 12px 0 0;
  height: 218px;
  border-radius: 22px;
  background: #eaf0e8;
  overflow: hidden;
}
.hs-phone {
  width: 218px;
  height: 242px;
  border: 5px solid #253b32;
  border-bottom: 0;
  border-radius: 29px 29px 0 0;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #f7f8f5;
  box-shadow: 0 10px 24px #1c49351a;
  transform: scale(0.84);
  transform-origin: top center;
}
.hs-status {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 700;
}
.hs-camera {
  width: 48px;
  height: 12px;
  background: #253b32;
  border-radius: 8px;
}
.hs-scene {
  position: absolute;
  inset: 30px 0 0;
  transition:
    opacity 0.35s,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hs-browser {
  padding: 0 12px;
}
.hs-address {
  height: 28px;
  border-radius: 8px;
  background: #e7eae4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  font-size: 10px;
}
.hs-address svg {
  width: 15px;
  height: 15px;
}
.hs-address > span {
  display: grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
}
.hs-mini-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 12px;
}
.hs-mini-brand img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.hs-mini-heading {
  font-family: "Instrument Serif", serif;
  font-size: 24px;
  margin-top: 9px;
}
.hs-lines {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.hs-lines i {
  height: 6px;
  width: 90%;
  background: #dbe2d8;
  border-radius: 4px;
}
.hs-lines i:nth-child(2) {
  width: 72%;
}
.hs-lines i:nth-child(3) {
  width: 82%;
}
.hs-browser-action {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 3px auto 0;
  font-size: 23px;
}
.hs-browser-action svg {
  width: 20px;
  height: 20px;
}
.hs-target {
  color: #155238;
  background: #d0e5d4;
  border-radius: 7px;
  outline: 2px solid #22795a;
  outline-offset: 2px;
}
.hs-menu {
  background: #fbfcfa;
  padding: 10px 13px;
  border-radius: 15px 15px 0 0;
}
.hs-menu-title {
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  margin: 0 0 12px;
}
.hs-menu-site {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  margin-bottom: 16px;
}
.hs-menu-site img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.hs-menu-site small {
  display: block;
  font-size: 9px;
  color: #65746a;
  margin-top: 2px;
}
.hs-menu-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 7px;
  font-size: 10px;
}
.hs-home {
  padding: 6px 18px;
  background: #e1eada;
}
.hs-home-date {
  text-align: center;
  font-size: 10px;
  color: #475c48;
  padding: 4px 0 18px;
}
.hs-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
}
.hs-apps > span {
  width: 40px;
  height: 40px;
  background: #b6c8b5;
  border-radius: 12px;
}
.hs-apps > span:nth-child(even) {
  background: #ccd7c5;
}
.hs-saved-icon {
  width: 40px;
  position: relative;
}
.hs-saved-icon img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.hs-saved-icon b {
  display: block;
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  margin: 3px -10px 0;
}
.hs-home-caption {
  text-align: center;
  font-size: 17px;
  line-height: 1.1;
  font-family: "Instrument Serif", serif;
  margin-top: 24px;
  color: #28533e;
}
.hs-home-bar {
  position: absolute;
  z-index: 3;
  bottom: 5px;
  width: 65px;
  height: 3px;
  border-radius: 4px;
  background: #253b32;
  left: calc(50% - 32px);
}
.hs-demo[data-step="0"] .hs-menu,
.hs-demo[data-step="0"] .hs-home,
.hs-demo[data-step="1"] .hs-home {
  opacity: 0;
  transform: translateY(35px);
  pointer-events: none;
}
.hs-demo[data-step="1"] .hs-browser,
.hs-demo[data-step="2"] .hs-browser,
.hs-demo[data-step="2"] .hs-menu {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.hs-demo[data-step="2"] .hs-saved-icon img {
  animation: hs-arrive 0.6s both;
}
.hs-demo-wrap {
  position: relative;
}
.hs-playback {
  position: absolute;
  right: 2px;
  top: 0;
  font-size: 12px;
}
.hs-steps {
  padding: 0;
  margin: 4px 0 18px;
  list-style: none;
}
.hs-steps button {
  display: flex;
  gap: 13px;
  text-align: left;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 12px 8px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.hs-steps button[aria-current] {
  background: #edf1e9;
}
.hs-number {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e3e9df;
  color: #355841;
  font-size: 12px;
  font-weight: 700;
}
.hs-steps button[aria-current] .hs-number {
  background: var(--moss);
  color: white;
}
.hs-steps b {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}
.hs-step-copy {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 3px;
}
.hs-help {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.hs-help summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 600;
}
.hs-help p {
  line-height: 1.6;
  padding-bottom: 14px;
  color: var(--ink-2);
}
.hs-footnote,
.hs-desktop-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 18px 0;
}
.hs-guide button:focus-visible,
.hs-guide summary:focus-visible,
.hs-invitation button:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}
.screen.route-home-screen {
  --content-max: 480px;
}
@keyframes hs-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-invite-art img,
  .hs-demo[data-step="2"] .hs-saved-icon img {
    animation: none;
  }
  .hs-scene,
  .hs-steps button {
    transition: none;
  }
}