/* Home page only. Shared components come from site.css; everything here is prefixed hm-.
   Hidden-at-start states live under html.motion (set by the inline gate in <head>), so with no
   script or with reduced motion the page shows every demo finished. */

/* =========================================================================
   Small pieces used by several home demos
   ========================================================================= */
.hm-who { font-size: var(--text-s); font-weight: var(--weight-medium); line-height: 1.35; margin-bottom: var(--space-s); }

/* Question chips: a pill that stays pressed for the current choice. */
.hm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.hm-chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 8px 20px;
  border: 0; border-radius: 26px; background: var(--pale); color: var(--ink);
  font-size: var(--text-s); font-weight: var(--weight-medium); line-height: 1.3; text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hm-chip:hover { background: var(--pale-hover); }
.hm-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* Swap slot: several states stacked in one cell, so the panel never changes height.
   Children say which states they show in: data-on="a" (start), "w" (working), "b" (done).
   With no script (no data-state) the done state shows. */
.hm-swap { display: grid; }
.hm-swap > * { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
[data-state="a"] .hm-swap > [data-on~="a"],
[data-state="w"] .hm-swap > [data-on~="w"],
[data-state="b"] .hm-swap > [data-on~="b"],
:not([data-state]) > .hm-swap > [data-on~="b"] { visibility: visible; }
html.motion [data-state="b"] .hm-swap > [data-on="b"] { animation: site-rise var(--dur-slow) var(--ease-out) both; }

/* The empty slot before a demo has run. */
.hm-hint {
  display: grid; place-items: center; padding: var(--space-m);
  border: var(--line-w) dashed var(--line); border-radius: var(--radius-s);
  color: var(--ink-2); font-size: var(--text-s); text-align: center;
}

/* =========================================================================
   1. Hero: headline beside the "Ask for a dashboard" demo
   ========================================================================= */
.hm-hero { padding: var(--space-l) 0 var(--space-4xl); }
.hm-hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.hm-hero__text { min-width: 0; }
.hm-hero__text .link-line { margin-bottom: var(--space-s); }
.hm-hero__title {
  font-family: var(--serif); font-weight: var(--weight-regular); font-variation-settings: "opsz" 72;
  font-size: clamp(46px, 6.4vw, 100px); line-height: 1.01; letter-spacing: var(--track-display);
  margin-left: -0.04em; max-width: 10ch; text-wrap: balance;
}
.hm-hero__line { display: block; }
.hm-hero__lede {
  margin-top: var(--space-l); max-width: 28ch;
  color: var(--ink-2); font-size: var(--text-lede); line-height: 1.4; letter-spacing: -0.01em;
}
.hm-hero__cta { margin-top: var(--space-xl); }
.hm-hero__stage { min-width: 0; }
.hm-hero .stage__field { min-height: 0; padding: var(--space-l); }
.hm-hero .stage__panel { max-width: 600px; padding: var(--space-l) 40px; }

@media (min-width: 1100px) {
  /* The demo's colour field starts level with the headline, not with the small link above it. */
  .hm-hero__inner { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); column-gap: var(--space-2xl); align-items: start; }
  /* The link's height and gap, plus the space above the headline's capitals (about 0.19em). */
  .hm-hero__stage { margin-top: calc(var(--text-s) * 1.4 + 20px + var(--space-s) + clamp(46px, 6.4vw, 100px) * 0.19); }
}
@media (max-width: 1099px) {
  .hm-hero__stage { max-width: 680px; }
}
@media (max-width: 600px) {
  .hm-hero { padding: var(--space-m) 0 var(--space-3xl); }
  .hm-hero__inner { gap: var(--space-xl); }
  .hm-hero__lede { margin-top: var(--space-m); }
  .hm-hero__cta { margin-top: var(--space-l); }
  .hm-hero .stage__field { padding: var(--space-xl) var(--space-s); }
  .hm-hero .stage__panel { padding: var(--space-m); }
}

/* The dashboard demo. */
.hm-dash__ask {
  display: flex; align-items: center; min-height: calc(2 * 1.35em + 2 * var(--space-s));
  padding: var(--space-xs) var(--space-s);
  background: var(--pale-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-s);
  font-size: 20px; line-height: 1.35; letter-spacing: -0.01em;
}
.hm-dash[data-state="idle"] .hm-dash__q::after,
.hm-dash[data-state="typing"] .hm-dash__q::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -0.14em; background: var(--ink);
}
.hm-dash__status { display: grid; margin: var(--space-m) 0; }
.hm-dash__status > * { grid-area: 1 / 1; }
.hm-dash__steps { visibility: hidden; align-self: center; }
.hm-dash[data-state="working"] .hm-dash__steps { visibility: visible; }
.hm-dash[data-state="working"] .hm-dash__title { visibility: hidden; }
.hm-dash__title { font-size: var(--text-s); font-weight: var(--weight-medium); line-height: 1.35; align-self: center; }
.hm-dash__bars { transition: opacity var(--dur-fast) var(--ease); }
.hm-dash[data-state="working"].has-chart .hm-dash__bars { opacity: 0.3; }
.hm-dash .bars__bar { transition-duration: 700ms; }
.hm-dash .bars__row:nth-child(2) .bars__bar { transition-delay: 70ms; }
.hm-dash .bars__row:nth-child(3) .bars__bar { transition-delay: 140ms; }
.hm-dash .bars__row:nth-child(4) .bars__bar { transition-delay: 210ms; }
.hm-dash .bars__row { transition: opacity var(--dur-slow) var(--ease); }
.hm-dash__more { margin-top: var(--space-m); padding-top: var(--space-m); border-top: var(--rule-w) solid var(--rule); }
.hm-dash__more-label { color: var(--ink-2); font-size: var(--text-s); margin-bottom: var(--space-xs); }

/* Before it has played: an empty question box and an empty chart (motion only). */
html.motion .hm-dash:not([data-state]) .hm-dash__q { visibility: hidden; }
html.motion .hm-dash:not(.has-chart) .hm-dash__title { visibility: hidden; }
html.motion .hm-dash:not(.has-chart) .bars__bar { width: 0; }
html.motion .hm-dash:not(.has-chart) .bars__row { opacity: 0; }
html.motion .hm-dash:not([data-state]) .hm-chip[aria-pressed="true"] { background: var(--pale); color: var(--ink); }

@media (max-width: 600px) {
  .hm-dash__ask { font-size: 19px; min-height: calc(3 * 1.35em + 2 * var(--space-xs)); }
  .hm-dash .bars__row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .hm-dash .bars__track { grid-column: 1 / -1; grid-row: 2; }
}

/* =========================================================================
   2. Who I am (ink fill)
   ========================================================================= */
/* The hero above already ends in a wide space, so none is added on top. */
.hm-intro { padding: 0 0 var(--space-4xl); }
@media (max-width: 600px) {
  .hm-intro { padding: 0 0 var(--space-3xl); }
}

/* =========================================================================
   3. Examples: a column of three tabs beside one live demo. page.js turns the
   tabs on (.is-tabbed); with no script all three demos show, one under another.
   ========================================================================= */
.hm-try { padding-top: 0; }
.hm-try .section-intro { max-width: 34ch; }
.hm-try__body { display: grid; gap: var(--space-xl); }
.hm-try__side { display: grid; gap: var(--space-l); align-content: start; }
.hm-try__all { justify-self: start; }
.hm-tabs { display: grid; gap: var(--space-2xs); }
.hm-tabs[hidden] { display: none; }
.hm-tab {
  display: grid; gap: 4px; width: 100%; padding: var(--space-s) var(--space-m);
  background: none; border: 0; border-radius: var(--radius-s); box-shadow: inset 0 0 0 var(--rule-w) var(--rule);
  color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hm-tab:hover { background: var(--pale-2); }
.hm-tab[aria-selected="true"] { background: var(--stage); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hm-tab__name { font-size: var(--text-l); font-weight: var(--weight-medium); letter-spacing: -0.015em; line-height: 1.25; }
.hm-tab__line { color: var(--ink-2); font-size: 17px; line-height: 1.4; }
.hm-tab[aria-selected="true"] .hm-tab__line { color: var(--ink); }

.hm-exs { display: grid; gap: var(--space-3xl); min-width: 0; }
.hm-ex { display: grid; gap: var(--space-m); min-width: 0; }
.hm-ex__title { font-size: var(--text-l); letter-spacing: var(--track-heading); line-height: 1.2; }
.hm-ex__line { margin-top: var(--space-2xs); color: var(--ink-2); max-width: 44ch; }
.hm-ex__link { justify-self: start; }
.hm-ex[hidden] { display: none; }
.is-tabbed .hm-ex__cap { display: none; }
html.motion .is-tabbed .hm-ex:not([hidden]) .tile__field { animation: site-fade var(--dur) var(--ease) both; }
@media (min-width: 1000px) {
  .is-tabbed .hm-try__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }
  .hm-exs { max-width: 760px; }
}
/* Narrower screens: the tabs sit above the demo, so only the open one shows its line,
   and "See all the examples" moves below the demo. */
@media (max-width: 999px) {
  .hm-try__side { display: contents; }
  .hm-try__all { order: 1; }
  .hm-tab:not([aria-selected="true"]) .hm-tab__line { display: none; }
}
@media (max-width: 600px) {
  .hm-tab { padding: var(--space-s); }
  .hm-tab__name { font-size: 20px; }
  .hm-tab__line { font-size: 16px; }
}

/* Let clients rank options */
.hm-rank__ask { margin-bottom: var(--space-m); font-size: 22px; font-weight: var(--weight-medium); letter-spacing: -0.015em; line-height: 1.25; }
.hm-rank__list { display: grid; gap: var(--space-2xs); }
.hm-rank__item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-s);
  padding: 10px 10px 10px 14px; background: var(--white);
  border: var(--rule-w) solid var(--rule); border-radius: var(--radius-s);
}
.hm-rank__item:first-child { border-color: var(--ink); }
.hm-rank__n {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--pale); font-size: var(--text-s); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease);
}
.hm-rank__item:first-child .hm-rank__n { background: var(--stage); }
.hm-rank__body { display: flex; flex-direction: column; min-width: 0; }
.hm-rank__name { font-size: 19px; font-weight: var(--weight-medium); line-height: 1.3; }
.hm-rank__meta { color: var(--ink-2); font-size: var(--text-xs); }
.hm-rank__moves { display: flex; gap: 6px; }
.hm-move {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 50%; background: var(--pale); color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease);
}
.hm-move:hover { background: var(--pale-hover); }
.hm-move svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hm-move[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.hm-move[aria-disabled="true"]:hover { background: var(--pale); }
.hm-rank__send { margin-top: var(--space-m); }

/* Price a new job */
.hm-fee__job { padding: var(--space-s); background: var(--pale-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-s); line-height: 1.4; }
.hm-fee__days { margin-top: var(--space-m); }
.hm-fee__go { margin-top: var(--space-m); align-self: flex-start; }
.hm-fee[data-state="w"] .hm-fee__go { opacity: 0.45; cursor: default; }
.hm-fee__out { margin-top: var(--space-m); }
.hm-fee__out > * { align-self: center; }
.hm-fee__working { color: var(--ink-2); }
.hm-fee__range { font-size: clamp(30px, 2.9vw, 40px); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hm-fee__range > span { white-space: nowrap; }
.hm-fee__to { color: var(--ink-2); font-size: 0.6em; font-weight: var(--weight-regular); letter-spacing: 0; }
.hm-fee__sub { margin-top: 4px; color: var(--ink-2); font-size: var(--text-s); line-height: 1.4; }

/* See who is away */
.hm-away__pick { margin-bottom: var(--space-m); }
.hm-away .rota { grid-template-columns: 58px repeat(5, minmax(0, 1fr)); }
.hm-away .rota__day.is-due { justify-self: center; padding: 1px 10px 2px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-weight: var(--weight-medium); }
.hm-away .rota__block { transform-origin: left center; }
.hm-away .rota__block.is-clash { background: var(--stage); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.hm-away__due { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-m); font-size: var(--text-s); line-height: 1.35; }
.hm-away__pin { flex: none; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.hm-away__alert { margin-top: var(--space-s); padding: var(--space-xs) var(--space-s); border: var(--rule-w) solid var(--ink); border-radius: var(--radius-s); font-size: var(--text-s); line-height: 1.4; }
.hm-away[data-state="a"] .rota__block { transform: scaleX(0); }
.hm-away[data-state="a"] .rota__day.is-due { background: none; color: var(--ink-2); font-weight: var(--weight-regular); }
.hm-away[data-state="a"] .hm-away__due,
.hm-away:is([data-state="a"], [data-state="w"]) .hm-away__alert { visibility: hidden; }
.hm-away:is([data-state="a"], [data-state="w"]) .rota__block.is-clash { background: var(--ink); color: var(--on-ink); box-shadow: none; }
html.motion .hm-away:is([data-state="w"], [data-state="b"]) .rota__block { animation: hm-grow 560ms var(--ease-out) calc(var(--n, 0) * 160ms) both; }
html.motion .hm-away[data-state="w"] .hm-away__due { animation: site-fade var(--dur-slow) var(--ease) 300ms both; }
html.motion .hm-away[data-state="b"] .hm-away__alert { animation: site-rise var(--dur-slow) var(--ease-out) both; }
@keyframes hm-grow { from { transform: scaleX(0); } }

@media (max-width: 600px) {
  .hm-rank__item { gap: var(--space-xs); padding-left: 10px; }
  .hm-rank__n { width: 32px; height: 32px; }
  .hm-rank__name { font-size: var(--text-s); }
  .hm-move { width: 44px; }
  .hm-rank__moves { gap: 4px; }
  .hm-away .rota { grid-template-columns: 50px repeat(5, minmax(0, 1fr)); }
}

/* =========================================================================
   4. How it works: four steps with giant serif numerals
   ========================================================================= */
.hm-steps { display: grid; gap: var(--space-xl); }
.hm-step { padding-top: var(--space-m); border-top: var(--rule-w) solid var(--ink); }
.hm-step__n {
  display: block; font-family: var(--serif); font-weight: var(--weight-regular); font-variation-settings: "opsz" 72;
  font-size: var(--text-numeral); line-height: 1; letter-spacing: var(--track-display); margin-left: -0.04em;
}
.hm-step__title { margin-top: var(--space-xl); font-size: var(--text-l); letter-spacing: -0.02em; line-height: 1.25; }
.hm-step__text { margin-top: var(--space-xs); max-width: 28ch; color: var(--ink-2); font-size: 20px; }
@media (min-width: 900px) {
  .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); row-gap: var(--space-2xl); }
}
@media (min-width: 1200px) {
  .hm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-l); }
}
.hm-how__more { margin-top: var(--space-xl); }
@media (max-width: 899px) {
  .hm-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-l); align-items: start; padding: var(--space-m) 0 var(--space-l); }
  .hm-step__n { grid-row: span 2; font-size: clamp(72px, 16vw, 120px); min-width: 0.7em; }
  .hm-step__title { margin-top: var(--space-xs); }
}
@media (max-width: 600px) {
  .hm-steps { gap: 0; }
  .hm-step__text { font-size: 18px; }
}