/* Home, static components (job prefix hm-). Built from the workbench render at rest:
   HomeStudy5 (Hero5, EveryJob5, objects.tsx, data.ts, layout.ts, study5.css) and HomeStudy3 (Stages3, Week3, study3.css).
   Sizes and positions are the workbench's; colours, lines and shadows go through the system tokens and the kit's --k-mat-* names.
   No colour literal in this file. Strokes are 1, 1.5 or 3 px; fine interior rules are --k-hair light. See NOTES.md. */

/* ---- the page ---- */
.hm-page { margin: 0; background: var(--color-surface-page); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.hm-page.k-type { font-variant-numeric: normal; }
.hm-page button { font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.hm-page svg { display: block; flex: 0 0 auto; }
.hm-skip { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 8px 16px; background: var(--color-paper); border-radius: var(--radius-paper); box-shadow: var(--elevation-paper); }
.hm-skip:focus { top: 16px; }
.hm-wrap { max-inline-size: 1440px; margin-inline: auto; padding-inline: 48px; position: relative; }

/* ---- the site frame: the header (parts nav, global.md labels) ---- */
.hm-head .nav { position: relative; border-block-end-color: var(--color-surface-page); z-index: 6; }
.hm-head .nav__inner { margin-inline: 48px; }
.hm-head .nav__wordmark, .hm-head .nav__link, .hm-page .btn, .hm-page .chip { font-size: var(--type-step-0); }
.hm-lockup { block-size: var(--p-space-6); inline-size: auto; }
.hm-lockup .hm-ring-ink { fill: var(--p-color-ring-ink); }
.hm-lockup .hm-ring-blue { fill: var(--color-route); }
.hm-menu { display: none; }
.hm-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--type-caption-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.hm-menu > summary::-webkit-details-marker { display: none; }
.hm-menu > summary svg { inline-size: 10px; block-size: 10px; fill: none; stroke: var(--color-text-primary); stroke-width: var(--line-structure); }
.hm-menu[open] > summary svg { rotate: 180deg; }
.hm-menu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-block-start: 8px; }
.hm-menu__links a { padding-block: 12px; text-decoration: none; box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction); }

/* ---- the site frame: the footer (global.md) ---- */
.hm-foot { margin-block-start: 96px; padding-block: 40px 24px; box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction); }
.hm-foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hm-foot__top > a { grid-column: 1 / 5; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.hm-page .hm-foot__top > p { grid-column: 5 / 11; color: var(--color-text-secondary); }
.hm-foot__nav { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-block-start: 48px; }
.hm-foot__group { grid-column: span 3; }
.hm-foot__group h2 { font-size: var(--type-step-0); line-height: var(--type-leading-0); font-weight: 500; }
.hm-foot__group ul { margin-block-start: 16px; }
.hm-foot__group li + li { margin-block-start: 8px; }
.hm-foot__group a { text-decoration: none; }
.hm-foot__group a:hover { text-decoration: underline; }

/* ======================================================================================
   Hero, poster P4. Two compositions: the 1440 stage (hm-desk) and the phone (hm-phone).
   ====================================================================================== */
.hm-hero { position: relative; }
.hm-desk { position: relative; inline-size: 1440px; block-size: 900px; margin-inline: auto; }
.hm-desk > .hm-head { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 6; }
.hm-phone { display: none; }
.hm-stage { position: relative; }
.hm-desk .hm-stage { position: absolute; inset: 0; }
.hm-abs { position: absolute; }

/* the panel: one flat grey well, running off the right edge on the desktop */
.hm-well { position: absolute; background: var(--color-surface-well); border-start-start-radius: var(--p-radius-well); border-end-start-radius: var(--p-radius-well); }
.hm-desk .hm-well { inset-inline-end: min(0px, calc((1440px - 100vw) / 2)); }
.hm-phone .hm-well { border-radius: var(--p-radius-well-phone); }

/* the approved words */
.hm-words { position: absolute; inline-size: 546px; z-index: 4; }
.hm-h1 { max-inline-size: 520px; font-family: var(--type-display-1-family); font-weight: 400; font-size: var(--type-step-5); line-height: 68px; letter-spacing: -0.02em; color: var(--color-text-primary); }
.hm-page .hm-lead { margin-block-start: 28px; max-inline-size: 500px; font-family: var(--type-lead-family); font-size: var(--type-step-1); line-height: var(--type-leading-1); text-wrap: balance; }
.hm-action { margin-block-start: 28px; display: flex; }
.hm-page .hm-facts { margin-block-start: 20px; font-family: var(--type-caption-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); color: var(--color-text-secondary); }
.hm-count { position: absolute; z-index: 4; display: grid; white-space: nowrap; font-family: var(--type-display-1-family); font-size: var(--type-step-1); line-height: var(--type-leading-1); }

/* the objects: real buttons, the drawing inside */
.hm-obj { position: absolute; inset-inline-start: 0; inset-block-start: 0; padding: 0; margin: 0; border: 0; background: none; line-height: 0; cursor: pointer; border-radius: 2px; }
.hm-obj:focus-visible { outline: var(--p-border-width-focus) solid var(--color-focus-ring); outline-offset: 4px; }
.hm-obj__draw { position: relative; display: block; }
.hm-obj__draw > svg { position: absolute; inset-inline-start: 0; inset-block-start: 0; overflow: visible; }
.hm-draw text { font-feature-settings: "tnum" 1, "lnum" 1; }
.hm-draw .hm-tx-sans { font-family: var(--p-font-family-working); }
.hm-draw .hm-tx-serif { font-family: var(--p-font-family-display); }
/* the drawings' own inks, from objects.tsx, as tokens */
.hm-f-ink { fill: var(--color-text-primary); } .hm-s-ink { stroke: var(--color-text-primary); }
.hm-f-ink2 { fill: var(--color-text-secondary); } .hm-s-ink2 { stroke: var(--color-text-secondary); }
.hm-f-ink3 { fill: var(--color-text-tertiary); } .hm-s-ink3 { stroke: var(--color-text-tertiary); }
.hm-f-ui { fill: var(--color-line-ui); } .hm-s-ui { stroke: var(--color-line-ui); }
.hm-f-hair { fill: var(--color-line-hairline); } .hm-s-hair { stroke: var(--color-line-hairline); }
.hm-f-well { fill: var(--color-surface-well); }
.hm-f-deep { fill: var(--color-surface-well-deep); }
.hm-f-raised { fill: var(--color-surface-raised); }
.hm-f-frame { fill: var(--color-frame-dash); } .hm-s-frame { stroke: var(--color-frame-dash); }
.hm-f-paper { fill: var(--color-paper); }
/* the system's three line weights, unscaled by the drawing's size */
.hm-sw1 { stroke-width: var(--k-fine); vector-effect: non-scaling-stroke; }
.hm-sw15 { stroke-width: var(--line-structure); vector-effect: non-scaling-stroke; }
/* materials: paper, board and thing carry one shadow; a solid on a goal is lifted one height; a lifted screen takes the structure line */
.hm-draw--paper.hm-draw--solid, .hm-draw--board.hm-draw--solid, .hm-draw--thing.hm-draw--solid { filter: drop-shadow(0 1px 1px var(--k-mat-shade-070)) drop-shadow(0 3px 5px var(--k-mat-shade-070)); }
.hm-draw--lift.hm-draw--paper { filter: drop-shadow(0 1px 2px var(--k-mat-shade-100)) drop-shadow(0 12px 22px var(--k-mat-shade-200)); }
.hm-draw--lift.hm-draw--screen { filter: drop-shadow(0 12px 22px var(--k-mat-shade-160)); }
.hm-draw--lift.hm-draw--screen .hm-fr { stroke: var(--color-line-structure); stroke-width: var(--line-structure); vector-effect: non-scaling-stroke; }
/* the object being read: an outline takes the full ink */
.hm-obj:is(:hover, :focus-visible) .hm-draw--outline > * { stroke: var(--color-text-primary); }

/* the threads (kit route) and the person stops */
.hm-goal { position: absolute; pointer-events: none; }
.hm-goal__in { position: absolute; }
.hm-route.k-route { z-index: auto; overflow: visible; }
.hm-route .k-route__line { stroke-linecap: butt; }
.hm-goalname { position: absolute; display: grid; white-space: nowrap; font-family: var(--type-display-1-family); font-weight: 400; font-size: var(--type-step-2); line-height: var(--type-leading-2); letter-spacing: -0.01em; }
.hm-pstop { position: absolute; display: grid; white-space: nowrap; }
.hm-pstop__sq { position: absolute; inset-inline-start: -22px; inset-block-start: 8px; inline-size: 12px; block-size: 12px; background: var(--color-text-primary); }
.hm-pstop__name { font-family: var(--type-display-1-family); font-size: var(--type-step-1); line-height: var(--type-leading-1); }

/* the shelf: six department groups */
.hm-shelf { position: absolute; pointer-events: none; }
.hm-shelf__in { position: absolute; }
.hm-group { position: absolute; inset: 0; pointer-events: none; }
.hm-obj { pointer-events: auto; }
.hm-dept { position: absolute; white-space: nowrap; font-family: var(--type-smallcaps-family); font-size: var(--type-smallcaps-size); line-height: 20px; font-weight: var(--type-smallcaps-weight); letter-spacing: var(--type-smallcaps-tracking); font-feature-settings: var(--type-smallcaps-features); }
.hm-ground { position: absolute; block-size: var(--line-construction); background: var(--color-frame-dash); }
.hm-sq { position: absolute; inline-size: 12px; block-size: 12px; background: var(--color-route); }

/* the corner control: Replay, only where the picture can play */
.hm-corner { position: absolute; z-index: 5; display: none; white-space: nowrap; translate: -100% 0; }
html.k-motion .hm-corner { display: flex; }
.hm-page .chip.hm-replay { min-block-size: 32px; padding-block: 0; padding-inline: 14px; line-height: 1; color: var(--color-text-secondary); }

/* the readout of one job: hover, focus or tap. Desktop: in the count line's place. Phone: a sheet at the screen's foot. */
.hm-readout { z-index: 8; pointer-events: none; visibility: hidden; }
.hm-readout--slot { position: absolute; display: grid; grid-template-columns: 228px 256px; column-gap: 28px; align-items: start; inline-size: 512px; }
.hm-readout__what, .hm-readout__why { display: grid; justify-items: start; align-content: start; gap: 4px; }
.hm-readout__name { font-family: var(--type-display-1-family); font-size: var(--type-step-1); line-height: var(--type-leading-1); text-wrap: balance; }
.hm-readout__dept { font-family: var(--type-smallcaps-family); font-size: var(--type-smallcaps-size); line-height: 20px; font-weight: var(--type-smallcaps-weight); letter-spacing: var(--type-smallcaps-tracking); font-feature-settings: var(--type-smallcaps-features); color: var(--color-text-secondary); }
.hm-readout .k-verdict { margin-block-start: 4px; gap: 8px; }
.hm-readout .k-verdict .k-smallcaps { line-height: 20px; }
.hm-readout__reason { font-family: var(--type-panel-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); color: var(--color-text-secondary); text-wrap: balance; }
.hm-readout--sheet { position: fixed; inset-inline: 16px; inset-block-end: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 16px; align-items: start; padding: 12px 16px 14px; border-radius: var(--radius-paper); background: var(--color-paper); box-shadow: var(--elevation-paper-read); }
.hm-readout--sheet .hm-readout__what { gap: 0; }

/* the fiction caption, the first line below the hero */
.hm-caption { font-family: var(--type-caption-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); color: var(--color-text-tertiary); }
.hm-below { padding-block: 0 8px; }

/* ---- the phone hero ---- */
@media (max-width: 767px) {
  .hm-desk { display: none; }
  .hm-phone { display: block; overflow: hidden; }
  .hm-head .nav__links { display: none; }
  .hm-head .hm-menu { display: block; order: 3; inline-size: 100%; }
  .hm-head .nav__inner { margin-inline: 16px; }
  .hm-ptop { position: relative; padding: 24px 16px 40px; }
  .hm-phone .hm-words { position: static; inline-size: auto; }
  .hm-phone .hm-h1 { font-size: var(--type-step-3); line-height: var(--type-leading-3); max-inline-size: 330px; }
  .hm-page .hm-phone .hm-lead { margin-block-start: 20px; }
  .hm-phone .hm-action { margin-block-start: 24px; }
  .hm-page .hm-phone .hm-facts { margin-block-start: 16px; text-wrap: balance; }
  .hm-phone .hm-stage { inline-size: 358px; margin-inline: 16px; margin-block-end: 48px; }
  .hm-wrap { padding-inline: 16px; }
}
@media (max-width: 389px) { .hm-phone .hm-stage { zoom: 0.91; } .hm-phone .hm-count { zoom: 0.91; } }
/* between the two authored widths the 1440 stage is drawn smaller as one picture, as the workbench page does */
@media (min-width: 768px) and (max-width: 1439px) { .hm-desk { zoom: 0.9375; } }
@media (min-width: 768px) and (max-width: 1349px) { .hm-desk { zoom: 0.875; } }
@media (min-width: 768px) and (max-width: 1259px) { .hm-desk { zoom: 0.8125; } }
@media (min-width: 768px) and (max-width: 1169px) { .hm-desk { zoom: 0.75; } }
@media (min-width: 768px) and (max-width: 1079px) { .hm-desk { zoom: 0.6875; } }
@media (min-width: 768px) and (max-width: 989px) { .hm-desk { zoom: 0.625; } }
@media (min-width: 768px) and (max-width: 899px) { .hm-desk { zoom: 0.5625; } }
@media (min-width: 768px) and (max-width: 809px) { .hm-desk { zoom: 0.53; } }

/* ======================================================================================
   Every job gets one of four verdicts (EveryJob5)
   ====================================================================================== */
.hm-ej { padding-block: 96px 8px; }
.hm-ej__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: start; margin-block-end: 56px; }
.hm-h2 { font-family: var(--type-display-1-family); font-weight: 400; font-size: var(--type-step-3); line-height: var(--type-leading-3); letter-spacing: -0.01em; }
.hm-ej__intro { grid-column: 1 / 7; }
.hm-page .hm-ej__lede { margin-block-start: 24px; max-inline-size: 30ch; font-size: var(--type-step-1); line-height: var(--type-leading-1); color: var(--color-text-secondary); }
.hm-page .hm-ej__key { grid-column: 8 / 13; padding-block-start: 12px; }
.hm-page .hm-ej__key .k-mark-list li { padding-block: 12px; }
.hm-page .hm-ej__key .k-mark-list li:first-child { padding-block-start: 0; }
.hm-page .hm-ej__key .k-mark-list li { border-block-end: 0; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.hm-page .hm-ej__key .k-mark-list p { margin: 4px 0 0 22px; }
.hm-page .hm-ej__after { margin-block-start: 16px; color: var(--color-text-secondary); }
.hm-ej__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 28px; }
.hm-ej__dept { padding-block-start: 12px; border-block-start: var(--line-structure) solid var(--color-line-structure); }
.hm-page .hm-ej__dname { margin-block-end: 24px; font-family: var(--type-smallcaps-family); font-size: var(--type-smallcaps-size); line-height: 20px; font-weight: var(--type-smallcaps-weight); letter-spacing: var(--type-smallcaps-tracking); font-feature-settings: var(--type-smallcaps-features); }
.hm-ej__jobs { display: grid; gap: 28px; }
.hm-ej__job { display: grid; justify-items: start; gap: 6px; }
.hm-ej__name { font-family: var(--type-panel-family); font-weight: 600; font-size: var(--type-step-0); line-height: var(--type-leading-0); text-wrap: balance; }
.hm-ej__why { font-family: var(--type-panel-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); color: var(--color-text-secondary); text-wrap: pretty; }
.hm-ej .k-verdict { gap: 8px; }
.hm-ej .k-verdict .k-smallcaps { line-height: 20px; }
.hm-page .hm-ej__fiction { margin-block-start: 40px; }
@media (max-width: 767px) {
  .hm-ej { padding-block-start: 48px; }
  .hm-ej__top { display: block; margin-block-end: 36px; }
  .hm-ej .hm-h2 { font-size: var(--type-step-2); line-height: var(--type-leading-2); }
  .hm-page .hm-ej__lede { margin-block-start: 16px; font-size: var(--type-step-0); line-height: var(--type-leading-0); }
  .hm-page .hm-ej__key { margin-block-start: 28px; }
  .hm-ej__cols { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .hm-page .hm-ej__dname { margin-block-end: 16px; }
  .hm-ej__jobs { gap: 24px; }
}

/* ======================================================================================
   You know what you will hold before you start (Stages3)
   ====================================================================================== */
.hm-st { padding-block: 120px 0; }
.hm-page .hm-st__h { margin-block-end: 48px; max-inline-size: 18ch; font-family: var(--type-display-1-family); font-weight: 400; font-size: var(--type-step-4); line-height: var(--type-leading-4); letter-spacing: -0.015em; text-wrap: balance; }
.hm-st__line { display: grid; grid-template-columns: 600px 404px minmax(0, 1fr); gap: 24px; align-items: start; }
.hm-st__stage { border-block-start: var(--line-structure) solid var(--color-line-structure); padding-block-start: 20px; }
.hm-st__group { display: block; margin-block-end: 20px; }
.hm-st__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hm-st__item { display: grid; align-content: start; gap: 8px; }
.hm-page .hm-st__name { margin-block-end: 16px; min-block-size: 64px; font-family: var(--type-display-1-family); font-weight: 400; font-size: var(--type-step-2); line-height: var(--type-leading-2); text-wrap: balance; }
.hm-st__opt { color: var(--color-text-secondary); }
.hm-page .hm-st__hold { margin-block-end: 16px; min-block-size: 48px; max-inline-size: 34ch; color: var(--color-text-secondary); }
.hm-page .hm-st__note { margin-block-start: 20px; max-inline-size: 34ch; color: var(--color-text-secondary); }
.hm-page .hm-st__more { margin-block-start: 40px; }
.hm-page .hm-st__more a { text-decoration-thickness: var(--p-border-width-hairline); text-underline-offset: 4px; }
.hm-page .hm-st__fiction { margin-block-start: 28px; }
/* the four documents (sd in the workbench) */
.hm-sd { position: relative; display: grid; align-content: start; gap: 16px; padding: 22px 24px 26px; border-radius: var(--radius-paper); background: var(--color-paper); box-shadow: var(--elevation-paper); }
.hm-sd__head { display: grid; gap: 2px; padding-block-end: 12px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.hm-sd__from { font-family: var(--type-smallcaps-family); font-feature-settings: var(--type-smallcaps-features); letter-spacing: var(--type-smallcaps-tracking); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.hm-sd__title { font-family: var(--type-document-title-family); font-size: var(--type-step-1); line-height: var(--type-leading-1); margin-block-start: 6px; }
.hm-sd__for { font-family: var(--type-panel-family); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.hm-sd__parts { display: grid; gap: 10px; counter-reset: part 0; }
.hm-sd__parts > li { position: relative; padding-inline-start: 22px; font-family: var(--type-document-title-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.hm-sd--note .hm-sd__parts > li::before { counter-increment: part 1; content: counter(part); position: absolute; inset-inline-start: 0; font-feature-settings: var(--type-figures-oldstyle); color: var(--color-text-secondary); }
.hm-sd__parts--care > li::before { inline-size: 6px; block-size: 6px; inset-block-start: 9px; background: var(--color-text-primary); content: "" !important; }
.hm-page .hm-sd__foot { margin-block-start: 6px; font-family: var(--type-panel-family); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.hm-sd--report { padding-inline-start: 36px; }
.hm-sd__spine { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 12px; border-start-start-radius: var(--radius-paper); border-end-start-radius: var(--radius-paper); background: var(--color-paper-under); box-shadow: inset calc(-1 * var(--k-hair)) 0 0 var(--color-line-construction); }
.hm-page .hm-sd__contents { color: var(--color-text-secondary); }
.hm-sd__toc { display: grid; }
.hm-sd__toc > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; padding-block: 7px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); font-family: var(--type-document-title-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.hm-sd__no { color: var(--color-text-secondary); font-family: var(--type-panel-family); font-size: var(--type-step-minus-1); font-feature-settings: var(--type-figures-tabular); }
.hm-page .hm-sd__job { font-family: var(--type-panel-family); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.hm-sd__checks { display: grid; }
.hm-sd__checks > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; padding-block: 8px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); font-family: var(--type-panel-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.hm-sd__box { position: relative; inline-size: 14px; block-size: 14px; margin-block-start: 5px; border: var(--line-structure) solid var(--color-text-primary); }
.hm-sd__box::after { content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: 0; inline-size: 4px; block-size: 8px; border-style: solid; border-color: var(--color-text-primary); border-width: 0 var(--line-structure) var(--line-structure) 0; rotate: 45deg; }
.hm-sd__sign { display: grid; gap: 6px; margin-block-start: 18px; }
.hm-sd__signline { block-size: 0; inline-size: 70%; border-block-start: var(--line-construction) solid var(--color-text-primary); }
.hm-sd__signlabel { font-family: var(--type-smallcaps-family); font-feature-settings: var(--type-smallcaps-features); letter-spacing: var(--type-smallcaps-tracking); font-size: var(--type-smallcaps-size); font-weight: var(--type-smallcaps-weight); line-height: var(--type-leading-0); }
@media (max-width: 767px) {
  .hm-st { padding-block-start: 64px; }
  .hm-page .hm-st__h { font-size: var(--type-step-3); line-height: var(--type-leading-3); margin-block-end: 28px; }
  .hm-st__line { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hm-st__items { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hm-page .hm-st__name { min-block-size: 0; }
  .hm-sd { padding: 18px 18px 20px; }
  .hm-sd--report { padding-inline-start: 30px; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .hm-st__line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-st__stage--decide { grid-column: 1 / -1; }
}

/* ======================================================================================
   Bring the goal, or only the question, and the Week (Week3). The system's runs are ink (DEC 103).
   ====================================================================================== */
.hm-close { margin-block-start: 0; padding-block: 24px 96px; }
.hm-close__top { display: grid; grid-template-columns: minmax(0, 1fr) 432px; column-gap: 56px; align-items: end; padding-block: 48px 32px; }
.hm-close__h { max-inline-size: 640px; font-family: var(--type-display-2-family); font-weight: 400; font-size: var(--type-step-4); line-height: var(--type-leading-4); letter-spacing: -0.015em; text-wrap: balance; }
.hm-close__side { display: grid; gap: 18px; padding-block-end: 6px; }
.hm-close__side .hm-action { margin-block-start: 0; }
.hm-close__line { font-size: var(--type-step-1); line-height: var(--type-leading-1); color: var(--color-text-secondary); }
.hm-close__call { font-family: var(--type-caption-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); color: var(--color-text-secondary); }
.hm-page .hm-last { margin-block-start: 112px; text-align: center; font-family: var(--type-display-1-family); font-weight: 400; font-size: var(--type-step-5); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.hm-w { position: relative; padding-block-start: 8px; }
.hm-page .hm-w__key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-block-end: 18px; font-family: var(--type-panel-family); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.hm-page .hm-w__key li { display: inline-flex; align-items: center; gap: 10px; }
.hm-page .hm-w__key svg { overflow: visible; }
.hm-w__frame { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-block-start: var(--line-structure) solid var(--color-line-structure); }
.hm-w__names { position: relative; }
.hm-w__name { position: absolute; inset-inline-start: 0; }
.hm-w__lanes { position: relative; }
.hm-w__chart { position: relative; display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.hm-w__links { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: auto; overflow: visible; }
.hm-w__rule, .hm-w__day { stroke: var(--color-line-construction); stroke-width: var(--line-construction); }
.hm-w__dayname, .hm-w__dept { font-family: var(--type-smallcaps-family); font-feature-settings: var(--type-smallcaps-features); letter-spacing: var(--type-smallcaps-tracking); font-size: var(--type-smallcaps-size); font-weight: var(--type-smallcaps-weight); fill: var(--color-text-secondary); }
.hm-w__dept { fill: var(--color-text-primary); }
/* carried by the system: a 3 px ink run (was ring blue; DEC 103) */
.hm-w__sys { stroke: var(--color-text-primary); stroke-width: var(--line-route); stroke-linecap: round; fill: none; }
/* a goal running through the week: 1.5 px ink (site-review touch-up, 13 November). Each line runs from a person's decision to the
   next department's system run, so it does not end at a person and is not a blue route. It passes behind the labels it meets. */
.hm-w__link, .hm-w__links .k-route__line.hm-w__link { fill: none; stroke: var(--color-text-primary); stroke-width: var(--line-structure); stroke-linecap: round; stroke-linejoin: round; }
.hm-w__wait { stroke: var(--color-text-tertiary); stroke-width: var(--line-structure); stroke-dasharray: 0.1 5; stroke-linecap: round; }
.hm-w__person { fill: var(--color-text-primary); }
.hm-w__person-run { stroke: var(--color-text-primary); stroke-width: var(--line-structure); }
.hm-w__work, .hm-w__tick { stroke: var(--color-text-secondary); stroke-width: var(--line-structure); }
.hm-w__l { font-family: var(--type-panel-family); font-size: var(--type-step-minus-1); }
.hm-w__l--sys { fill: var(--color-text-primary); }
.hm-w__l--person { fill: var(--color-text-primary); font-weight: 600; }
.hm-w__l--work { fill: var(--color-text-secondary); }
.hm-w__l, .hm-w__dayname, .hm-phone-w .hm-w__dept { paint-order: stroke; stroke: var(--color-surface-page); stroke-width: var(--line-route); stroke-linejoin: round; }
.hm-w__below { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-block-start: 16px; }
.hm-w__note { font-family: var(--type-caption-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); color: var(--color-text-secondary); }
.hm-w__multis { display: none; gap: 22px; }
.hm-w__multi { border-block-start: var(--line-structure) solid var(--color-line-structure); padding-block-start: 8px; }
.hm-w__multi svg { display: block; overflow: visible; inline-size: 100%; block-size: auto; }
.hm-w__mtitle { margin-block-end: 8px; font-family: var(--type-display-1-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.hm-w__mchart { position: relative; }
.hm-w__mchart > .hm-w__chart { position: relative; }
.hm-phone-w .hm-w__dayname, .hm-phone-w .hm-w__dept { font-size: var(--type-step-minus-1); }
@media (max-width: 1100px) { .hm-close__top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }
@media (max-width: 767px) {
  .hm-close { padding-block-end: 64px; }
  .hm-close__top { padding-block: 28px 24px; }
  .hm-close__h { font-size: var(--type-display-2-size-web-phone); line-height: var(--type-display-2-line-height-web-phone); }
  .hm-page .hm-last { font-size: var(--type-step-3); line-height: var(--type-leading-3); margin-block-start: 48px; }
  .hm-w__frame { display: none; }
  .hm-w__multis { display: grid; }
  .hm-foot__top { display: block; }
  .hm-foot__top p { margin-block-start: 24px; }
  .hm-foot__nav { grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-block-start: 40px; }
  .hm-foot__group { grid-column: auto; }
  .hm-foot__group li + li { margin-block-start: 12px; }
}
@media print { .hm-corner, .hm-readout { display: none; } }

/* ---- generated by build.mjs: the readout of each job (hover, keyboard focus; on the phone, tap) ---- */
.hm-desk:has(.hm-obj:is(:hover, :focus-visible)) .hm-count { visibility: hidden; }
.hm-desk:has(.hm-obj[data-job="enquiry"]:is(:hover, :focus-visible)) .hm-readout[data-for="enquiry"], .hm-phone:has(.hm-obj[data-job="enquiry"]:is(:hover, :focus)) .hm-readout[data-for="enquiry"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="followup"]:is(:hover, :focus-visible)) .hm-readout[data-for="followup"], .hm-phone:has(.hm-obj[data-job="followup"]:is(:hover, :focus)) .hm-readout[data-for="followup"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="measure"]:is(:hover, :focus-visible)) .hm-readout[data-for="measure"], .hm-phone:has(.hm-obj[data-job="measure"]:is(:hover, :focus)) .hm-readout[data-for="measure"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="jobfile"]:is(:hover, :focus-visible)) .hm-readout[data-for="jobfile"], .hm-phone:has(.hm-obj[data-job="jobfile"]:is(:hover, :focus)) .hm-readout[data-for="jobfile"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="snag"]:is(:hover, :focus-visible)) .hm-readout[data-for="snag"], .hm-phone:has(.hm-obj[data-job="snag"]:is(:hover, :focus)) .hm-readout[data-for="snag"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="complaints"]:is(:hover, :focus-visible)) .hm-readout[data-for="complaints"], .hm-phone:has(.hm-obj[data-job="complaints"]:is(:hover, :focus)) .hm-readout[data-for="complaints"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="reviews"]:is(:hover, :focus-visible)) .hm-readout[data-for="reviews"], .hm-phone:has(.hm-obj[data-job="reviews"]:is(:hover, :focus)) .hm-readout[data-for="reviews"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="photos"]:is(:hover, :focus-visible)) .hm-readout[data-for="photos"], .hm-phone:has(.hm-obj[data-job="photos"]:is(:hover, :focus)) .hm-readout[data-for="photos"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="webform"]:is(:hover, :focus-visible)) .hm-readout[data-for="webform"], .hm-phone:has(.hm-obj[data-job="webform"]:is(:hover, :focus)) .hm-readout[data-for="webform"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="diary"]:is(:hover, :focus-visible)) .hm-readout[data-for="diary"], .hm-phone:has(.hm-obj[data-job="diary"]:is(:hover, :focus)) .hm-readout[data-for="diary"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="variation"]:is(:hover, :focus-visible)) .hm-readout[data-for="variation"], .hm-phone:has(.hm-obj[data-job="variation"]:is(:hover, :focus)) .hm-readout[data-for="variation"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="whiteboard"]:is(:hover, :focus-visible)) .hm-readout[data-for="whiteboard"], .hm-phone:has(.hm-obj[data-job="whiteboard"]:is(:hover, :focus)) .hm-readout[data-for="whiteboard"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="cutting"]:is(:hover, :focus-visible)) .hm-readout[data-for="cutting"], .hm-phone:has(.hm-obj[data-job="cutting"]:is(:hover, :focus)) .hm-readout[data-for="cutting"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="bill"]:is(:hover, :focus-visible)) .hm-readout[data-for="bill"], .hm-phone:has(.hm-obj[data-job="bill"]:is(:hover, :focus)) .hm-readout[data-for="bill"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="invoice"]:is(:hover, :focus-visible)) .hm-readout[data-for="invoice"], .hm-phone:has(.hm-obj[data-job="invoice"]:is(:hover, :focus)) .hm-readout[data-for="invoice"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="pricelist"]:is(:hover, :focus-visible)) .hm-readout[data-for="pricelist"], .hm-phone:has(.hm-obj[data-job="pricelist"]:is(:hover, :focus)) .hm-readout[data-for="pricelist"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="payroll"]:is(:hover, :focus-visible)) .hm-readout[data-for="payroll"], .hm-phone:has(.hm-obj[data-job="payroll"]:is(:hover, :focus)) .hm-readout[data-for="payroll"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="firstweek"]:is(:hover, :focus-visible)) .hm-readout[data-for="firstweek"], .hm-phone:has(.hm-obj[data-job="firstweek"]:is(:hover, :focus)) .hm-readout[data-for="firstweek"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="leave"]:is(:hover, :focus-visible)) .hm-readout[data-for="leave"], .hm-phone:has(.hm-obj[data-job="leave"]:is(:hover, :focus)) .hm-readout[data-for="leave"] { visibility: visible; }
.hm-desk:has(.hm-obj[data-job="advert"]:is(:hover, :focus-visible)) .hm-readout[data-for="advert"], .hm-phone:has(.hm-obj[data-job="advert"]:is(:hover, :focus)) .hm-readout[data-for="advert"] { visibility: visible; }