/* /how-it-works (site-v2): stylesheet for this page only. The slide-in comes
   from showcase.css.

   Built from the five-step candidate (/showcase/build-flow, wwb-flow.css),
   copied rather than shared so the candidate can be retired without touching
   this page. One vertical line runs the four steps. Each step is a title, a
   short paragraph, one plate drawn from the real record and one control that
   opens the real thing.

   Tokens are base.css's. Teal appears only where an account is worth
   engaging (the dots marked so, the glimpse bars, a switch that is on means
   nothing and is Ink). Blue marks the newest month in the stacking figure,
   because blue means new or changed. No shadows, no eyebrow labels. */

::selection { background: rgba(47, 99, 218, 0.18); color: var(--ink); }

/* ── shared parts ─────────────────────────────────────────────── */

.hw-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ground, var(--bg));
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hw-micro {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.hw-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms ease;
}
.hw-link:hover { text-decoration-color: currentColor; }

/* The one decisive control on a step. A link until how.js makes it a
   button that opens the slide-in; the two look identical. */
.hw-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 20px 11px 16px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.hw-open svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
.hw-open:hover { background: var(--ink); color: var(--bg); }
.hw-open:hover svg { transform: translateX(2px); }
.hw-open:active { background: var(--body); border-color: var(--body); }

.hw-control { margin-top: 26px; }

/* ── first viewport ───────────────────────────────────────────── */

.hw-hero { padding: 58px 0 76px; }
.hw-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
}
.hw-hero-copy { grid-column: 1 / span 6; padding-top: 6px; }
.hw-hero h1 { font-size: clamp(33px, 3.4vw, 52px); }
.hw-hero h1 .line { display: block; }
.hw-lede {
  margin-top: 24px;
  max-width: 29em;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--body);
}
.hw-actions { margin-top: 30px; }
.hw-house {
  margin-top: 30px;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* The four steps in miniature, each linked to its section. */
.hw-mini { grid-column: 8 / span 5; padding-top: 8px; }
.hw-mini ol { list-style: none; border-top: 1px solid var(--rule); }
.hw-mini-st { position: relative; border-bottom: 1px solid var(--rule); }
.hw-mini-st::before {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
}
.hw-mini-st:first-child::before { top: 50%; }
.hw-mini-st:last-child::before { bottom: 50%; }
.hw-mini-st a {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 0 22px;
  min-height: 92px;
  padding: 14px 4px 14px 0;
}
.hw-mini-txt { display: block; }
.hw-mini-name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
.hw-mini-sub {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}
.hw-glyph {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 160ms ease, transform 160ms ease;
}
.hw-glyph .hw-glyph-fill { fill: var(--ink); stroke: none; }
.hw-mini-st a:hover .hw-mini-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hw-mini-st a:hover .hw-glyph { stroke: var(--ink); transform: translateX(3px); }

/* ── the line and its steps ───────────────────────────────────── */

.hw-st {
  --ground: var(--bg);
  --pad: 84px;
  position: relative;
  padding: var(--pad) 0;
  border-top: 1px solid var(--rule);
  background: var(--ground);
}
.hw-st:nth-of-type(even) { --ground: var(--tint); }

.hw-st-grid {
  --hw-gut: var(--gutter);
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 40px;
  align-items: start;
}

/* The line: a rule through every node, from the first step to the node of
   the last. Its left edge is the container padding plus half a node, so it
   stays on the node at every width. */
.hw-st-grid::before,
.hw-st-grid::after {
  content: "";
  position: absolute;
  left: calc(var(--hw-gut) + 19.5px);
  top: calc(var(--pad) * -1);
  bottom: calc(var(--pad) * -1);
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}
/* Travelled: the stretch above each step turns Ink once it is reached. */
.hw-st-grid::after {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hw-st.is-reached .hw-st-grid::after { transform: scaleY(1); }
html:not(.hw-js) .hw-st-grid::after { transform: scaleY(1); }
.hw-st:first-of-type .hw-st-grid::before,
.hw-st:first-of-type .hw-st-grid::after { top: 20px; }
.hw-st-last .hw-st-grid::before,
.hw-st-last .hw-st-grid::after { bottom: auto; height: calc(var(--pad) + 20px); }

.hw-node { grid-column: 1; grid-row: 1; position: relative; z-index: 1; margin-top: 2px; }
.hw-st-text { grid-column: 2; grid-row: 1; }
.hw-st-text h2 { font-size: clamp(28px, 2.6vw, 33px); line-height: 1.1; letter-spacing: -0.024em; }
.hw-say {
  margin-top: 18px;
  max-width: 31em;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
}

.hw-plate,
.hw-plate-stack { grid-column: 3; grid-row: 1; min-width: 0; }

/* ── plates ───────────────────────────────────────────────────── */

.hw-plate,
.hw-rec {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.hw-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 14px 22px 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.hw-rec-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.25;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.hw-rec-foot {
  padding: 13px 22px 15px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
}

/* Step 1: four inputs drawn into one lens. */
.hw-learn {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) 56px minmax(0, 1.18fr);
  align-items: stretch;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.hw-inputs {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hw-inputs li {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink);
}
.hw-join { width: 100%; height: 100%; overflow: visible; }
.hw-join path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.hw-join-tall { display: none; }
.hw-lens { align-self: center; border-color: var(--ink); }
.hw-rec-rows { margin: 0; }
.hw-rec-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 15px 22px;
}
.hw-rec-row + .hw-rec-row { border-top: 1px solid var(--rule); }
.hw-rec-row dt { padding-top: 4px; }
.hw-rec-row dd { margin: 0; }
.hw-rec-v {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.hw-rec-s {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Step 2: the market. The text sits beside a short aside, and the map runs
   the width of both columns under them, so every dot has room. */
/* The hint sits directly above the map, left-aligned with it, so it reads
   as the map's instruction rather than floating in the next column. */
.hw-st-map .hw-map-aside { grid-column: 2 / -1; grid-row: 2; align-self: end; justify-self: start; margin-top: 28px; }
.hw-st-map .hw-plate { grid-column: 2 / -1; grid-row: 3; margin-top: 14px; }
.hw-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 40em;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.hw-map-wrap {
  position: relative;
  height: 540px;
  padding: 18px 10px 4px 0;
  touch-action: manipulation;
}
.hw-map-wrap canvas { display: block; width: 100%; height: 100%; }
.hw-map-still { display: block; width: 100%; height: auto; }
/* Without the script there is no chart to draw, so the frame holds the still. */
html:not(.hw-js) .hw-map-wrap { height: auto; padding: 0; }
html:not(.hw-js) .hw-map-wrap canvas { display: none; }
.hw-map-wrap .sc-tip { z-index: 6; }
.hw-map-wrap .sc-tip span { display: block; }
.hw-map-wrap.is-pointing { cursor: pointer; }

/* The dots that open an analysis: real buttons at each bank's own spot,
   one per bank. The wrap decides which one a pointer means (the nearest),
   so the buttons take no pointer events and exist for the keyboard and for
   screen readers; a key press on one opens it directly. */
.hw-marks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hw-dot {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  cursor: pointer;
}
.hw-dot::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--ink);
  outline: 2px solid var(--surface);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* The ring says it opens. */
.hw-dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hw-dot.is-hot::before { transform: scale(1.15); }
.hw-dot.is-hot::after { transform: scale(1.3); border-width: 2px; }
.hw-dot:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.hw-marks.is-invite .hw-dot::after { animation: hwPing 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2 both; }
.hw-marks.is-invite .hw-dot:nth-child(2n)::after { animation-delay: 0.16s; }
.hw-marks.is-invite .hw-dot:nth-child(3n)::after { animation-delay: 0.32s; }
@keyframes hwPing {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.9); opacity: 0; }
  61% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.hw-map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 13px 22px 15px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--body);
}
.hw-key { display: inline-flex; align-items: center; gap: 8px; }
.hw-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
/* The key's "opens" swatch is the dot itself: an Ink dot inside a ring. */
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ink);
}
.hw-map-note { margin-left: auto; font-size: 14px; color: var(--muted); }

/* Step 3: the first rows of the contacts record, and the CRM slot. */
.hw-plate-stack { display: grid; gap: 16px; }
.hw-plate-stack > * { grid-column: auto; grid-row: auto; margin-top: 0; min-width: 0; }
.hw-people { list-style: none; }
.hw-people li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 15px 22px;
}
.hw-people li + li { border-top: 1px solid var(--rule); }
.hw-people-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hw-people-who b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hw-people-who span { display: block; margin-top: 1px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.hw-people-why {
  grid-column: 2 / -1;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}
.hw-people-why b { font-weight: 600; color: var(--ink); }
.hw-pill {
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
/* Slate and dashed: a slot waiting for its screen, not a finished one. */
.hw-crm-slot {
  padding: 15px 20px 17px;
  border: 1px dashed var(--slate);
  border-radius: 12px;
}
.hw-slot-title {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.hw-crm-slot p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Step 4: a glimpse of the dashboard. Bars are scaled against the whole
   100 (the track), so a bar's length is its percentage. */
.hw-gl-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 18px;
  padding: 12px 22px 0;
}
.hw-gl-rows { list-style: none; padding: 4px 0 6px; }
.hw-gl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 52px;
  align-items: center;
  gap: 4px 18px;
  padding: 13px 22px;
}
.hw-gl-row + .hw-gl-row { border-top: 1px solid var(--rule); }
.hw-gl-name b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hw-gl-name span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.hw-gl-bar {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.hw-gl-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--teal);
}
.hw-gl-pct {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── month by month ───────────────────────────────────────────── */

/* site-v3 (Story A, 2026-09-29): the page ends on the real series
   (partials/monthly.ejs, styled by monthly.css). This sets only the head
   and the three things the series shows. */
.hw-monthly-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: end;
}
.hw-monthly-top > div { grid-column: 1 / span 5; }
.hw-monthly-top .lede { grid-column: 7 / span 6; margin-top: 0; }
.hw-monthly h2 .line { display: block; }

.hw-shows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 44px 0 36px;
  padding: 0;
  list-style: none;
}
.hw-shows li { padding: 0 28px; border-left: 1px solid var(--rule); }
.hw-shows li:first-child { padding-left: 0; border-left: 0; }
.hw-shows h3 { font-size: 19px; line-height: 1.3; }
.hw-shows p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--body); }

/* ── close ────────────────────────────────────────────────────── */
.hw-close h2 { max-width: 16em; }

/* ── widths ───────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .hw-hero-copy { grid-column: 1 / span 7; }
  .hw-mini { grid-column: 8 / span 5; }
  .hw-mini-name { font-size: 20px; }
}

@media (max-width: 1080px) {
}

@media (max-width: 960px) {
  .hw-hero-grid { display: block; }
  .hw-mini { margin-top: 44px; }
  .hw-st-grid { grid-template-columns: 40px minmax(0, 1fr); gap: 0 22px; }
  .hw-plate,
  .hw-plate-stack { grid-column: 2; grid-row: 2; margin-top: 30px; }
  .hw-st-map .hw-map-aside { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 18px; }
  .hw-st-map .hw-plate { grid-column: 2; grid-row: 3; margin-top: 22px; }
  .hw-monthly-top { display: block; }
  .hw-monthly-top .lede { margin-top: 18px; }
  .hw-shows { grid-template-columns: 1fr; margin: 32px 0 28px; }
  .hw-shows li,
  .hw-shows li:first-child { padding: 14px 0; border-left: 0; }
  .hw-shows li + li { border-top: 1px solid var(--rule); }
}

@media (max-width: 700px) {
  .hw-hero { padding: 30px 0 36px; }
  .hw-lede { margin-top: 14px; font-size: 17.5px; line-height: 1.5; }
  .hw-actions { margin-top: 22px; }
  .hw-house { margin-top: 18px; font-size: 13.5px; }
  .hw-mini { margin-top: 26px; }
  .hw-mini-st a { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 0 14px; min-height: 60px; padding: 8px 0; }
  .hw-mini-st::before { left: 16.5px; }
  .hw-mini .hw-num { width: 34px; height: 34px; font-size: 15px; }
  .hw-mini-name { font-size: 17px; line-height: 1.25; }
  .hw-mini-sub { margin-top: 2px; font-size: 13.5px; }
  .hw-glyph { width: 30px; height: 30px; }

  .hw-st { --pad: 28px; }
  .hw-st-grid { --hw-gut: 20px; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; }
  .hw-st-grid::before,
  .hw-st-grid::after { left: calc(var(--hw-gut) + 16.5px); }
  .hw-st:first-of-type .hw-st-grid::before,
  .hw-st:first-of-type .hw-st-grid::after { top: 17px; }
  .hw-st-last .hw-st-grid::before,
  .hw-st-last .hw-st-grid::after { height: calc(var(--pad) + 17px); }
  .hw-node { width: 34px; height: 34px; font-size: 15px; margin-top: 0; }
  .hw-st-text h2 { font-size: 28px; line-height: 1.12; }
  .hw-say { margin-top: 8px; font-size: 16.5px; line-height: 1.5; }
  .hw-control { margin-top: 14px; }
  .hw-open { font-size: 15px; padding: 10px 16px 10px 14px; }

  /* The plates run the full width under the node on a phone. */
  .hw-plate,
  .hw-plate-stack,
  .hw-st-map .hw-plate { grid-column: 1 / -1; position: relative; z-index: 1; margin-top: 18px; }
  .hw-st-map .hw-map-aside { grid-column: 2; margin-top: 12px; }
  .hw-learn,
  .hw-plate-stack { background: var(--ground); }
  .hw-hint { font-size: 14.5px; gap: 10px; }

  /* One compact stacked figure: the four inputs in one frame, a short join,
     then the lens. */
  .hw-learn { grid-template-columns: 1fr; }
  .hw-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
  }
  .hw-inputs li { min-height: 0; padding: 4px 9px; border-radius: 6px; background: var(--tint); border-color: transparent; font-size: 13.5px; line-height: 1.4; }
  .hw-join-wide { display: none; }
  .hw-join-tall { display: block; height: 20px; }

  .hw-rec-head { padding: 12px 16px 11px; }
  .hw-rec-title { font-size: 16.5px; }
  .hw-rec-row { grid-template-columns: 82px minmax(0, 1fr); gap: 2px 12px; padding: 11px 16px; }
  .hw-rec-row dt { padding-top: 3px; }
  .hw-rec-v { font-size: 15.5px; line-height: 1.4; }
  .hw-rec-s { font-size: 13.5px; }
  .hw-rec-foot { padding: 11px 16px 13px; font-size: 13.5px; }

  .hw-map-wrap { height: 360px; padding: 12px 4px 2px 0; }
  .hw-map-foot { padding: 11px 16px 13px; gap: 6px 16px; font-size: 13.5px; }
  .hw-map-note { margin-left: 0; flex-basis: 100%; font-size: 13.5px; }

  .hw-people li { grid-template-columns: 22px minmax(0, 1fr); padding: 11px 16px; }
  .hw-pill { grid-column: 2; justify-self: start; margin-top: 4px; padding: 2px 8px; font-size: 11.5px; }
  .hw-people-why { font-size: 13.5px; margin-top: 6px; }
  .hw-people-who b { font-size: 15.5px; }
  .hw-people-who span { font-size: 13.5px; }
  .hw-crm-slot { padding: 12px 16px 14px; }
  .hw-crm-slot p { font-size: 13.5px; }

  .hw-gl-cols { display: none; }
  .hw-gl-row { grid-template-columns: minmax(0, 1fr) 48px; padding: 11px 16px; gap: 6px 12px; }
  .hw-gl-name { grid-column: 1 / -1; }
  .hw-gl-name b { font-size: 15px; }
  .hw-gl-name span { font-size: 13px; }



  .hw-close { padding: 48px 0; }
  .hw-close .lede { font-size: 16.5px; }
  .hw-close .actions { flex-direction: column; align-items: stretch; }
  .hw-close .actions .btn { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-st-grid::after,
  .hw-open,
  .hw-open svg,
  .hw-dot::before,
  .hw-dot::after,
  .hw-glyph { transition: none; }
  .hw-marks.is-invite .hw-dot::after { animation: none; }
}