/* Where to start (where-to-start.html).
   One band per problem: the problem on a dark half, four ways in on a light
   half, the problem's orb on the seam. Group colours, orbs and glyphs are in
   styles.css because the "Related problems" band on project pages uses them.
   Sizes set per item (bar widths, the meter mark) arrive as data-* attributes
   and js/where-to-start.js applies them, so nothing here needs inline styles. */

.wts-page {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Small shared pieces ---------- */
.wts-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wts-eyebrow i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }
.wts-source { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
.wts-figure { display: flex; align-items: baseline; gap: 4px; margin: 0; line-height: 0.95; }
.wts-figure .n { font-size: var(--fig, 52px); font-weight: 760; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.wts-figure .u { color: var(--ink-soft); font-size: calc(var(--fig, 52px) * 0.42); font-weight: 700; letter-spacing: -0.02em; }
.wts-figure-label { max-width: 36ch; margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.4; }
.wts-ico { display: inline-grid; flex: none; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wts-ico svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wts-ico svg .dot { stroke-width: 2.6; }

/* ---------- Hero ---------- */
.wts-hero { padding-bottom: 40px; }
.wts-hero-top { display: grid; align-items: end; gap: 28px 56px; margin-bottom: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wts-hero h1 { margin: 0 0 16px; font-size: clamp(2.8rem, 6.6vw, 5.2rem); line-height: 0.95; letter-spacing: -0.06em; }
.wts-standfirst { max-width: 34ch; margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; }

/* four steps, each taller than the last */
.wts-steps { display: grid; align-items: end; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wts-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-small);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 250ms var(--ease-out), background 200ms, color 200ms, border-color 200ms;
}
.wts-step:nth-child(1) { min-height: 92px; }
.wts-step:nth-child(2) { min-height: 126px; }
.wts-step:nth-child(3) { min-height: 160px; }
.wts-step:nth-child(4) { min-height: 194px; }
.wts-step:hover { border-color: var(--ink); transform: translateY(-4px); }
.wts-step[aria-pressed="true"] { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.wts-step .wts-ico { width: 34px; height: 34px; }
.wts-step strong { display: block; font-size: 15px; line-height: 1.2; letter-spacing: -0.015em; }
.wts-step small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.wts-step::after {
  position: absolute;
  right: 14px;
  bottom: -6px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.wts-step[aria-pressed="true"]::after { transform: scaleX(1); }
[aria-pressed="true"] > .wts-ico { background: color-mix(in srgb, var(--paper) 16%, transparent); }

/* contents: four groups, three problems each */
.wts-index { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wts-index section { padding: 16px 16px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.wts-index h2 { margin: 0 0 8px; }
.wts-index ol { margin: 0; padding: 0; list-style: none; }
.wts-index a {
  --orb: 34px;
  display: grid;
  align-items: center;
  gap: 2px 12px;
  margin: 0 -8px;
  padding: 8px;
  border-radius: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  transition: background 200ms;
}
.wts-index a:hover { background: color-mix(in srgb, var(--gc) 9%, transparent); }
.wts-index .wts-orb { grid-row: span 2; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--gc) 55%, var(--line)); }
.wts-index strong { font-size: 14.5px; letter-spacing: -0.01em; }
.wts-index small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.wts-index small b { color: var(--ink); font-weight: 700; }

/* ---------- Sticky bar: the problem on the left, the picker over the right half ---------- */
.wts-sticky { position: sticky; z-index: 40; top: var(--header-h); padding: 10px 0; pointer-events: none; }
.wts-sticky-inner { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wts-sticky-problem {
  justify-self: start;
  margin-left: 22px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #e8ebef;
  background: #101216;
  box-shadow: 0 0 0 1px rgba(232, 235, 239, 0.14);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wts-pick {
  display: flex;
  justify-self: start;
  gap: 3px;
  max-width: calc(100% - 22px);
  margin-left: 22px;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(16, 18, 22, 0.1);
  pointer-events: auto;
  scrollbar-width: none;
}
.wts-pick::-webkit-scrollbar { display: none; }
.wts-pick button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 6px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms, color 200ms;
}
.wts-pick button:first-child { padding-left: 11px; }
.wts-pick button:hover { color: var(--ink); }
.wts-pick button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.wts-pick .wts-ico { width: 22px; height: 22px; background: none; }

/* ---------- Group band ---------- */
.wts-group { display: flex; align-items: baseline; gap: 14px; margin-top: 70px; padding: 0 0 14px; }
.wts-group h2 { margin: 0; font-size: 30px; letter-spacing: -0.045em; }
.wts-group .wts-eyebrow { font-size: 10.5px; }

/* ---------- One problem ---------- */
.wts-row {
  position: relative;
  display: grid;
  margin: 0 0 16px;
  border-radius: 26px;
  box-shadow: var(--shadow-small);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  scroll-margin-top: calc(var(--header-h) + 56px);
}

/* the dark half redefines the tokens, so the pieces inside render light on dark */
.wts-problem {
  --ink: #e8ebef;
  --ink-soft: #b9c0c9;
  --muted: #8a929d;
  --line: #2a3038;
  --surface: #161a1f;
  --paper: #101216;
  --g-planet: #12a67b;
  --g-needs: #c97812;
  --g-people: #dc5e9b;
  --g-society: #7084f2;
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 18px;
  padding: 34px 56px 30px 34px;
  border-radius: 26px 0 0 26px;
  color: var(--ink);
  background: #101216;
}
.wts-problem::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--gc) 26%, transparent), transparent 55%);
  content: "";
  pointer-events: none;
}
.wts-problem > * { position: relative; margin: 0; }
.wts-meta { display: flex; align-items: center; gap: 12px; }
.wts-num { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.wts-problem h3 { color: #fff; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.045em; }
.wts-tag { margin-top: -8px !important; color: var(--ink-soft); font-size: 14.5px; }
.wts-stat { --fig: clamp(56px, 7vw, 92px); }
.wts-stat .wts-figure .n { color: #fff; }
.wts-text { max-width: 46ch; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.wts-facts { display: grid; gap: 8px; padding: 0; list-style: none; }
.wts-facts li { display: flex; align-items: baseline; gap: 10px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.wts-facts li::before { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gc); content: ""; transform: translateY(-2px); }
.wts-facts cite { color: var(--muted); font-family: var(--mono); font-size: 11px; font-style: normal; white-space: nowrap; }
.wts-sources { margin-top: auto !important; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.wts-sources summary { cursor: pointer; list-style: none; }
.wts-sources summary::-webkit-details-marker { display: none; }
.wts-sources summary span { margin-left: 6px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.wts-sources summary span::after { content: " +"; }
.wts-sources[open] summary span::after { content: " −"; }
.wts-sources ol { display: grid; gap: 4px; margin: 12px 0 0; padding-left: 18px; font-family: var(--sans); font-size: 12.5px; }
.wts-sources a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.wts-sources a:hover { text-decoration-color: currentColor; }

/* the small chart beside each number: filled marks in the group colour, tracks a lighter step of it */
.wts-visual { --track: color-mix(in srgb, var(--gc) 22%, #101216); color: var(--muted); font-size: 11.5px; }
.wts-visual svg { display: block; overflow: visible; }
.wts-visual-cap { display: block; margin-top: 8px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
.wts-waffle { display: grid; width: max-content; gap: 4px; grid-auto-columns: 9px; grid-auto-flow: column; grid-template-rows: repeat(5, 9px); }
.wts-waffle i { width: 9px; height: 9px; border-radius: 50%; background: var(--track); }
.wts-waffle i.is-on { background: var(--gc); }
.wts-meter { position: relative; width: min(320px, 100%); height: 34px; }
.wts-meter-track, .wts-meter-fill { position: absolute; top: 8px; left: 0; height: 8px; border-radius: 4px; }
.wts-meter-track { right: 0; background: var(--track); }
.wts-meter-fill { width: var(--w, 0%); background: var(--gc); transform-origin: left; }
.wts-meter-mark { position: absolute; top: 2px; left: var(--m, 0%); width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.wts-meter-mark span { position: absolute; top: 22px; left: 50%; color: var(--ink-soft); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; transform: translateX(-50%); }
.wts-meter-ends { position: absolute; top: 22px; right: 0; left: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; }
.wts-bars { display: grid; align-items: center; width: min(320px, 100%); gap: 7px 10px; margin: 0; grid-template-columns: auto minmax(0, 1fr) auto; }
.wts-bars dt { color: var(--muted); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.wts-bars dd { position: relative; height: 10px; margin: 0; }
.wts-bar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 0%); border-radius: 0 4px 4px 0; background: var(--gc); transform-origin: left; }
.wts-bar.is-hatched { background: repeating-linear-gradient(135deg, var(--gc) 0 3px, color-mix(in srgb, var(--gc) 28%, #101216) 3px 6px); }
.wts-bar.is-ghost { left: var(--from, 0%); border: 1.5px dashed color-mix(in srgb, var(--gc) 60%, transparent); border-left: 0; background: none; }
.wts-bars .v { color: var(--ink); font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; white-space: nowrap; }
.wts-tally { display: flex; flex-wrap: wrap; gap: 6px 9px; max-width: 320px; }
.wts-tally svg { width: 22px; height: 18px; }
.wts-tally line { stroke: var(--gc); stroke-width: 2; stroke-linecap: round; }
.wts-tally line.x { stroke: var(--ink-soft); stroke-width: 1.6; }

/* chart and number entrances run only once the script has marked them */
.is-animated .wts-waffle i.is-on { animation: wts-pop 450ms var(--ease-out) calc(var(--k, 0) * 14ms) backwards; }
.is-animated .wts-meter-fill, .is-animated .wts-bar:not(.is-ghost) { animation: wts-grow 900ms var(--ease-out) 100ms backwards; }
.is-animated .wts-bar.is-ghost, .is-animated .wts-tally svg { animation: wts-fade 500ms ease calc(var(--k, 0) * 45ms) backwards; }
@keyframes wts-pop { from { transform: scale(0); } }
@keyframes wts-grow { from { transform: scaleX(0); } }
@keyframes wts-fade { from { opacity: 0; } }

/* the orb on the seam between the halves */
.wts-seam { --orb: 64px; position: absolute; z-index: 3; top: 34px; left: 50%; transform: translateX(-50%); }
.wts-seam .wts-orb { box-shadow: 0 0 0 5px #101216, 0 0 0 6px color-mix(in srgb, var(--gc) 60%, transparent), 0 16px 34px rgb(0 0 0 / 0.35); }
.wts-seam::after {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #101216;
  background: var(--gc);
  content: "→";
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  transform: translateX(-50%);
}

/* ---------- The light half: four ways in ---------- */
.wts-help {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 34px 30px 56px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 26px 26px 0;
  background: var(--surface);
}
.wts-help-title { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wts-doors { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wts-door { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); transition: border-color 200ms; }
.wts-door:hover { border-color: color-mix(in srgb, var(--gc) 50%, var(--line)); }
.wts-door h4 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; letter-spacing: -0.01em; }
.wts-door h4 .wts-ico { color: var(--ink); background: color-mix(in srgb, var(--gc) 16%, var(--surface)); }
.wts-door ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.wts-door li { position: relative; padding-left: 13px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.wts-door li::before { position: absolute; top: 0.62em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gc); content: ""; }
.wts-door li.is-extra { display: none; }
.wts-door li.is-org span { display: block; }
.wts-door a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gc) 60%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.wts-door a::after { color: var(--muted); content: " ↗"; font-family: var(--mono); font-size: 0.85em; font-weight: 400; }
.wts-door a:hover { text-decoration-color: currentColor; }
.wts-more { display: none; margin: 2px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; }

/* one size picked: only that way in, full width, every item */
.wts-page[data-kind]:not([data-kind="all"]) .wts-doors { grid-template-columns: 1fr; }
.wts-page[data-kind]:not([data-kind="all"]) .wts-door { display: none; }
.wts-page[data-kind="hour"] .wts-door.is-hour,
.wts-page[data-kind="month"] .wts-door.is-month,
.wts-page[data-kind="job"] .wts-door.is-job,
.wts-page[data-kind="company"] .wts-door.is-company { display: flex; padding: 18px 20px; animation: wts-fade 350ms ease; }
.wts-page[data-kind]:not([data-kind="all"]) .wts-door li { font-size: 15px; }
.wts-page[data-kind]:not([data-kind="all"]) .wts-door li.is-extra { display: list-item; }
.wts-page[data-kind]:not([data-kind="all"]) .wts-more { display: block; }

.wts-good { display: grid; align-items: center; gap: 4px 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--gc) 32%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--gc) 10%, var(--surface)); grid-template-columns: auto minmax(0, 1fr); }
.wts-good .wts-figure { --fig: 38px; grid-row: span 2; }
.wts-good p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.wts-good .wts-eyebrow { font-size: 10px; }
.wts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.wts-chip {
  --orb: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  font-size: 12.5px;
  transition: border-color 200ms;
}
.wts-chip .wts-orb { box-shadow: none; }
.wts-chip:hover { border-color: var(--gc); }
.wts-chip.is-site { padding-left: 11px; }
.wts-chip.is-site::before { color: var(--muted); content: "↗"; font-family: var(--mono); }

/* the help side slides in the first time a band is seen (only with the script running) */
.js .wts-row .wts-door, .js .wts-row .wts-good { transition: opacity 500ms ease, transform 500ms var(--ease-out); }
.js .wts-row:not(.is-in) .wts-door, .js .wts-row:not(.is-in) .wts-good { opacity: 0; transform: translateX(-12px); }
.js .wts-row.is-in .wts-door:nth-child(2) { transition-delay: 60ms; }
.js .wts-row.is-in .wts-door:nth-child(3) { transition-delay: 120ms; }
.js .wts-row.is-in .wts-door:nth-child(4) { transition-delay: 180ms; }
.js .wts-row.is-in .wts-good { transition-delay: 240ms; }

/* ---------- Still deciding ---------- */
.wts-deciding { padding-top: 40px; }
.wts-deciding-head { display: grid; align-items: end; gap: 16px 48px; margin-bottom: 26px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.wts-deciding-head .section-title { margin: 0; }
.wts-deciding-head p { max-width: 52ch; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.wts-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wts-links a {
  display: grid;
  height: 100%;
  align-items: start;
  gap: 3px 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  grid-template-columns: auto minmax(0, 1fr);
  transition: transform 200ms, border-color 200ms;
}
.wts-links a:hover { border-color: var(--ink); transform: translateY(-3px); }
.wts-links .wts-ico { margin-top: 1px; grid-row: span 2; }
.wts-links strong { font-size: 15px; }
.wts-links strong::after { color: var(--muted); content: " ↗"; font-family: var(--mono); font-size: 0.8em; font-weight: 400; }
.wts-links span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }

/* ---------- Rail ---------- */
.wts-rail { position: fixed; z-index: 30; top: 50%; left: 18px; display: grid; gap: 7px; opacity: 0; transform: translateY(-50%); transition: opacity 300ms; }
.wts-rail.is-on { opacity: 1; }
.wts-rail a { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--gc) 30%, var(--paper)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent); transition: transform 200ms, background 200ms; }
.wts-rail a:nth-child(3n) { margin-bottom: 8px; }
.wts-rail a[aria-current="true"] { background: var(--gc); transform: scale(1.35); }
.wts-rail a span { position: absolute; top: 50%; left: 20px; padding: 3px 9px; border-radius: 8px; color: var(--paper); background: var(--ink); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity 150ms; }
.wts-rail a:hover span { opacity: 1; }

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] .wts-problem { background: #07080a; }
:root[data-theme="dark"] .wts-seam .wts-orb { box-shadow: 0 0 0 5px #07080a, 0 0 0 6px color-mix(in srgb, var(--gc) 60%, transparent), 0 16px 34px rgb(0 0 0 / 0.5); }
:root[data-theme="dark"] .wts-sticky-problem { background: #07080a; }
:root[data-theme="dark"] .wts-pick { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1240px) {
  .wts-rail { display: none; }
}
@media (max-width: 1100px) {
  .wts-hero-top { grid-template-columns: 1fr; }
  .wts-steps { max-width: 620px; }
}
@media (max-width: 980px) {
  .wts-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .wts-sticky-inner { grid-template-columns: 1fr; }
  .wts-sticky-problem { display: none; }
  .wts-pick { max-width: 100%; margin-left: 0; }
  .wts-row { grid-template-columns: 1fr; }
  .wts-problem { padding: 28px 22px 44px; border-radius: 24px 24px 0 0; }
  .wts-help { padding: 44px 22px 24px; border-top: 0; border-left: 1px solid var(--line); border-radius: 0 0 24px 24px; }
  /* the orb joins the grid between the halves and overlaps both */
  .wts-seam { --orb: 60px; position: relative; top: auto; left: auto; justify-self: center; margin: -32px 0; transform: none; }
  .wts-seam::after { display: none; }
  .wts-deciding-head { grid-template-columns: 1fr; }
  .wts-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wts-steps { align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wts-step:nth-child(n) { min-height: 0; }
  .wts-index { grid-template-columns: 1fr; }
  .wts-doors { grid-template-columns: 1fr; }
  .wts-links { grid-template-columns: 1fr; }
  .wts-group h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wts-step, .wts-step::after, .wts-door, .wts-good { transition: none; }
  .is-animated .wts-waffle i.is-on, .is-animated .wts-meter-fill, .is-animated .wts-bar, .is-animated .wts-tally svg { animation: none; }
  .js .wts-row:not(.is-in) .wts-door, .js .wts-row:not(.is-in) .wts-good { opacity: 1; transform: none; }
}