.hm-art {
  --hm-art-paper: var(--paper, #f7f5ef);
  --hm-art-green: var(--ink, #203c35);
  --hm-art-sage: var(--mint, #d9e7cc);
  --hm-art-coral: var(--coral, #f0805b);
  --hm-art-brass: #b39155;
  --hm-art-body: var(--body, 'DM Sans', sans-serif);
  --hm-art-serif: var(--serif, 'Instrument Serif', Georgia, serif);
  --hm-progress: 1;
  --hm-module-progress: 1;
  --hm-app-ready: 1;
  --hm-transfer: 1;
  --hm-package-lift: 0;
  --hm-giver-reach: 0;
  --hm-receiver-reach: 0;
  --hm-route-progress: 1;
  --hm-route-pulse: 0;
  --hm-review-hold: 0;
  position: relative;
  min-width: 0;
  color: var(--hm-art-green);
  font-family: var(--hm-art-body);
}

.hm-art .hm-art-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: var(--hm-art-ratio, 3 / 2);
  overflow: clip;
}

.hm-art .hm-art-board img {
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.hm-art .hm-art-base,
.hm-art .hm-robot-giver,
.hm-art .hm-robot-receiver {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hm-art .hm-moving-module {
  position: absolute;
  z-index: 2;
  left: var(--hm-module-left, 65%);
  top: var(--hm-module-top, 43%);
  width: var(--hm-module-width, 14%);
  height: auto;
  transform: translate3d(calc((1 - var(--hm-module-progress)) * var(--hm-library-distance, -180%)), calc((1 - var(--hm-module-progress)) * 25%), 0) rotate(calc((1 - var(--hm-module-progress)) * -8deg));
}

.hm-art .hm-app-indicator {
  position: absolute;
  z-index: 3;
  left: var(--hm-indicator-left, 68%);
  top: var(--hm-indicator-top, 67%);
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .7em;
  border: 1px solid #b0c3a3;
  border-radius: 5px;
  background: var(--hm-art-sage);
  color: var(--hm-art-green);
  font-size: clamp(8px, 1.1vw, 11px);
  line-height: 1.4;
  white-space: nowrap;
  transform: scale(calc(.96 + var(--hm-app-ready) * .04));
  box-shadow: 0 0 0 calc(var(--hm-app-ready) * 4px) #d9e7cc66;
}

.hm-art .hm-app-indicator::before {
  content: '';
  flex: none;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  opacity: calc(.35 + var(--hm-app-ready) * .65);
}

.hm-art[data-hm-scroll-scene='library'][data-hm-stage='choose'] .hm-app-indicator,
.hm-art[data-hm-scroll-scene='library'][data-hm-stage='connect'] .hm-app-indicator { background: var(--hm-art-paper); }

.hm-art .hm-robot-giver {
  clip-path: inset(0 50% 0 0);
  transform: translateX(calc(var(--hm-giver-reach) * var(--hm-robot-reach, 1%)));
}

.hm-art .hm-robot-receiver {
  clip-path: inset(0 0 0 50%);
  transform: translateX(calc(var(--hm-receiver-reach) * var(--hm-robot-reach, 1%) * -1));
}

.hm-art .hm-moving-package {
  position: absolute;
  z-index: 2;
  left: var(--hm-package-left, 44%);
  top: var(--hm-package-top, 49%);
  width: var(--hm-package-width, 12%);
  height: auto;
  transform: translate3d(calc((var(--hm-transfer) * 2 - 1) * var(--hm-transfer-distance, 75%)), calc(var(--hm-package-lift) * -20%), 0) rotate(calc((.5 - var(--hm-transfer)) * 8deg));
}

.hm-art .hm-art-steps {
  display: grid;
  gap: 1.5rem;
}

.hm-art [data-hm-step] {
  border-inline-start: 2px solid #b0bba7;
  padding-inline-start: 1rem;
}

.hm-art [data-hm-step-active='true'] {
  border-inline-start-color: var(--hm-art-coral);
}

.hm-art .hm-art-route {
  position: absolute;
  z-index: 1;
  top: var(--hm-route-top, 72%);
  left: var(--hm-route-left, 17%);
  width: var(--hm-route-width, 66%);
  height: 2px;
  background: #b9c8ac;
}

.hm-art .hm-art-route::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--hm-route-progress) * 100%);
  background: var(--hm-art-green);
}

.hm-art .hm-art-route-pulse {
  position: absolute;
  top: -3px;
  left: calc(var(--hm-route-progress) * 100%);
  width: 8px;
  height: 8px;
  margin-inline-start: -4px;
  border-radius: 50%;
  background: var(--hm-art-coral);
  box-shadow: 0 0 0 calc(3px + var(--hm-route-pulse) * 4px) #f0805b33;
  transform: scale(calc(1 + var(--hm-route-pulse) * .15));
}

.hm-art .hm-art-checkpoints {
  position: absolute;
  z-index: 2;
  top: var(--hm-checkpoints-top, 67%);
  left: 5%;
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hm-art [data-hm-checkpoint] {
  justify-self: center;
  min-width: 0;
  padding: .55em .8em;
  border: 1px solid #b0c3a3;
  border-radius: 6px;
  background: var(--hm-art-sage);
  color: var(--hm-art-green);
  font-size: clamp(9px, 1.2vw, 13px);
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
}

.hm-art [data-hm-checkpoint='review'] { border-color: var(--hm-art-brass); }
.hm-art [data-hm-checkpoint-state='pending'] { background: var(--hm-art-paper); }
.hm-art [data-hm-checkpoint-state='current'] { box-shadow: 0 0 0 3px #203c3512; }
.hm-art [data-hm-stage='review'] [data-hm-checkpoint='review'] { background: #f4dfb6; }

@media (min-width: 901px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .hm-art.hm-art-sticky-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hm-art.hm-art-sticky-layout > .hm-art-board { position: sticky; top: 12vh; }
  .hm-art.hm-art-sticky-layout .hm-art-steps { gap: 0; }
  .hm-art.hm-art-sticky-layout [data-hm-step] { min-height: 36vh; padding-block: 1.5rem; }
}

@media (max-width: 700px) {
  .hm-art {
    --hm-library-distance: -130%;
    --hm-transfer-distance: 50%;
    --hm-robot-reach: .5%;
  }
  .hm-art .hm-art-board { position: relative; }
  .hm-art .hm-art-steps { gap: 1.25rem; }
  .hm-art [data-hm-step] { min-height: 0; }
  .hm-art .hm-art-checkpoints { gap: .35rem; }
  .hm-art [data-hm-checkpoint] { padding: .5em .6em; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-art {
    --hm-module-progress: 1 !important;
    --hm-app-ready: 1 !important;
    --hm-transfer: 1 !important;
    --hm-package-lift: 0 !important;
    --hm-giver-reach: 0 !important;
    --hm-receiver-reach: 0 !important;
    --hm-route-progress: 1 !important;
    --hm-route-pulse: 0 !important;
  }
}

/* Compositions retain a finished still before motion is available. */
.hm-art { margin: 0; }
.hm-art img { max-width: 100%; }
.hm-art-heading { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: center; gap: 35px; max-width: none; }
.hm-art-heading .hm-art-heading-copy { min-width: 0; }
.hm-art-heading h1 { font-size: clamp(50px,5.9vw,76px); }
.hm-art-heading .intro { font-size: 19px; }
.hm-blog-art { position: relative; width: 100%; }
.hm-blog-art img { display: block; width: 100%; height: auto; }
.hm-blog-art::after { content: ''; position: absolute; width: 8px; height: 8px; top: 38%; right: 35%; border-radius: 50%; background: #f9dc96; box-shadow: 0 0 12px 4px #f9dc9660; opacity: .45; }
.hm-blog-art[data-hm-art-visible='true']::after { opacity: 1; transition: opacity 700ms ease; }
.post-card:has(.hm-post-thumb) { grid-template-columns: 150px 135px minmax(0,1fr) 44px; gap: 28px; align-items: center; }
.hm-post-thumb { width: 150px; aspect-ratio: 3/2; align-self: center; }
.hm-post-thumb img { width: 100%; height: 100%; object-fit: contain; }
.hm-article-cover { width: min(100%,650px); margin: 24px auto 0; }
.hm-article-cover > img { display: block; width: 100%; height: auto; }
.hm-article-cover .hm-art-board { max-height: 380px; }
.hm-library-opening { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(25px,4vw,60px); align-items: center; }
.hm-library-copy { min-width: 0; }
.library-intro .hm-library-opening h1 { font-size: clamp(45px,5.1vw,66px); }
.library-intro .hm-library-copy > p:not(.eyebrow) { max-width: 680px; }
.hm-library-opening .hm-art-library { --hm-module-left: 66%; --hm-module-top: 51%; --hm-module-width: 10%; --hm-library-distance: -430%; --hm-indicator-left: 75%; --hm-indicator-top: 63%; }
.hm-library-opening .hm-art-board { overflow: visible; }
.hm-library-opening + .library-filters { margin-top: 48px; }
.home-install-grid { display: block; }
.home-install-grid > div { max-width: 840px; }
.home-install-grid > div > p:not(.eyebrow) { max-width: 780px; }
.home-install > .hm-art-handoff { margin-top: 42px; }
.home-install .hm-art-board { --hm-package-left: 44%; --hm-package-top: 44%; --hm-package-width: 12%; }
.home-install .home-install-steps { margin: 0; padding: 0; }
.home-install .home-install-steps li { align-items: start; }
.home-install .home-install-steps li > span { flex: none; }
.hm-directory-opening { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 36px; align-items: center; max-width: none; }
.hm-directory-opening > div { min-width: 0; }
.directory-intro.hm-directory-opening h1 { font-size: clamp(48px,5.7vw,74px); }
.hm-directory-opening > div > p:not(.eyebrow) { font-size: 19px; color: var(--muted); margin-top: 27px; }
.hm-directory-art img { display: block; width: 100%; height: auto; }
.hm-support-opening { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 25px; align-items: start; }
.hm-support-opening > div { min-width: 0; }
.hm-support-art img { width: 100%; height: auto; display: block; }
.hm-empty-cart-art { width: 120px; margin: 0 auto 12px; }
.hm-empty-cart-art img { display: block; width: 100%; height: auto; }
.hm-workflow-explainer { margin-top: 35px; padding: 22px; border: 1px solid #d9ded4; border-radius: 12px; background: linear-gradient(135deg,#f1eee4,#f9f8f2); }
.hm-workflow-explainer .hm-art-board { aspect-ratio: 2.35/1; min-height: 215px; --hm-route-top: 60%; --hm-checkpoints-top: 51%; }
.hm-workflow-branch { position: absolute; top: 9%; left: 15%; right: 15%; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; }
.hm-workflow-branch > span { background: #fffefa; border: 1px solid #d9ded4; border-radius: 5px; padding: 8px 12px; }
.hm-workflow-branch i { width: 25px; height: 1px; background: #b39155; position: relative; }
.hm-workflow-branch i::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #b39155; border-right: 1px solid #b39155; transform: rotate(45deg); }
.hm-workflow-note { position: absolute; bottom: 1%; width: 100%; text-align: center; margin: 0; font-size: 11px; color: var(--muted,#626f65); }
.hm-workflow-explainer[data-hm-stage='review'] [data-hm-checkpoint='review'] { background: #f4dfb6; }
.hm-workflow-explainer [data-hm-checkpoint-state='complete']::before { content: '\2713 '; }
@media (max-width: 1000px) {
  .hm-art-heading { gap: 20px; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .hm-art-heading h1 { font-size: 58px; }
  .hm-library-opening { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 25px; }
  .hm-support-opening { grid-template-columns: minmax(0,1fr) 160px; gap: 18px; }
  .hm-directory-opening { grid-template-columns: minmax(0,1fr) 220px; }
  .post-card:has(.hm-post-thumb) { grid-template-columns: 120px 100px minmax(0,1fr) 38px; gap: 20px; }
  .hm-post-thumb { width: 120px; }
}
@media (max-width: 700px) {
  .hm-art-heading { grid-template-columns: 1fr; gap: 12px; padding-block: 35px; }
  .hm-art-heading h1 { font-size: 51px; }
  .hm-blog-art { width: min(100%,340px); justify-self: center; }
  .post-card:has(.hm-post-thumb) { grid-template-columns: minmax(0,1fr) 38px; gap: 16px; }
  .hm-post-thumb { grid-column: 1/-1; width: min(100%,240px); justify-self: center; }
  .post-card:has(.hm-post-thumb) .post-meta { grid-column: 1/-1; }
  .hm-article-cover { margin-top: 20px; }
  .hm-library-opening { grid-template-columns: 1fr; gap: 20px; }
  .library-intro .hm-library-opening h1 { font-size: clamp(42px,10.6vw,55px); }
  .hm-library-opening .hm-art-library { width: min(100%,440px); margin-inline: auto; }
  .hm-library-opening + .library-filters { margin-top: 30px; }
  .hm-directory-opening { grid-template-columns: 1fr; gap: 20px; }
  .directory-intro.hm-directory-opening h1 { font-size: 48px; }
  .hm-directory-art { width: 230px; justify-self: center; }
  .hm-support-opening { grid-template-columns: 1fr; gap: 8px; }
  .hm-support-art { width: 170px; justify-self: center; }
  .home-install > .hm-art-handoff { margin-top: 28px; display: grid; gap: 24px; }
  .hm-workflow-explainer { padding: 12px; }
  .hm-workflow-explainer .hm-art-board { min-height: 205px; }
  .hm-workflow-branch { left: 0; right: 0; gap: 8px; }
  .hm-workflow-branch > span { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-blog-art::after { opacity: 1; transition: none; }
}
.library-intro:has(.hm-library-opening) { max-width: none; }
@media (min-width: 701px) {
  .hm-library-opening .hm-art-library { align-self: start; margin-top: 65px; }
}
@media (min-width: 901px) {
  .hm-home-handoff { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 35px 65px; align-items: start; }
  .hm-home-handoff > div:first-child { grid-column: 1; grid-row: 1; }
  .hm-home-handoff > .hm-art-board { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 14vh; align-self: start; margin-top: 60px; }
  .hm-home-handoff > .hm-art-steps { grid-column: 1; grid-row: 2; gap: 0; }
  .hm-home-handoff [data-hm-step] { min-height: 25vh; padding-block: 22px; }
}
@media (max-width: 900px) {
  .hm-home-handoff { display: grid; grid-template-columns: 1fr; gap: 30px; }
  .hm-home-handoff > .hm-art-board { width: min(100%,600px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-home-handoff > .hm-art-board { position: relative; top: auto; }
}
.hm-art.hm-home-handoff { margin-inline: auto; }
@media (min-width: 901px) {
  .article-header:has(.hm-article-cover) { max-width: none; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 0 45px; align-items: start; }
  .article-header:has(.hm-article-cover) > :not(.hm-article-cover) { grid-column: 1; }
  .article-header:has(.hm-article-cover) h1 { font-size: clamp(42px,4.7vw,60px); }
  .article-header:has(.hm-article-cover) > .hm-article-cover { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (max-width: 700px) {
  .hm-library-copy { display: contents; }
  .hm-library-copy > .eyebrow { order: 0; }
  .hm-library-copy > h1 { order: 1; }
  .hm-library-opening .hm-art-library { order: 2; }
  .hm-library-copy > p:not(.eyebrow) { order: 3; }
  .product-intro > .hm-workflow-explainer { order: 7; }
}