/* workredux.com — demo hub.
   Palette lives on custom properties; dark is the :root default and light is a
   single override block keyed by the data-theme attribute that
   /assets/theme.js sets before first paint. No inline style attributes anywhere
   (the site ships style-src 'self'). */

/* Palette mirrors the ops-center console so the hub and /ops-center/ read as one
   product. The values are duplicated from ops-center/style.css (--gf-*) rather
   than shared: the two stylesheets are served independently and either page can
   be published alone. --wr-accent is the ops-center amber and --wr-link the blue,
   the same split the dashboard uses (amber marks things, blue is a link).

   No --wr-serif any more: the hub is sans + mono like the dashboard, and a rule
   left pointing at an undefined custom property falls back to the inherited
   family, which is what an un-edited serif rule should do. */
:root {
  --wr-bg: #101214;
  --wr-panel: #171a1d;
  --wr-panel-2: #1e2226;
  --wr-btn-hover: #262b30;
  --wr-glow: #1c2024;
  --wr-ink: #d8d4cc;
  --wr-ink-2: #a8a298;
  --wr-ink-3: #847f76;
  --wr-ink-strong: #f4f1eb;
  --wr-hover: rgba(216, 212, 204, .05);
  --wr-row-hover: rgba(216, 212, 204, .035);
  --wr-line: #2c3238;
  --wr-line-2: rgba(216, 212, 204, .08);
  --wr-accent: #d0925a;
  --wr-accent-ink: #10141a;
  --wr-link: #8aa4c0;
  --wr-ok: #8eae98;
  --wr-warn: #c6a56a;
  --wr-bad: #c96b6b;
  --wr-input-bg: rgba(216, 212, 204, .08);
  --wr-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wr-mono: "Roboto Mono", ui-monospace, "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --wr-bg: #f6f4f1;
  --wr-panel: #fffcf8;
  --wr-panel-2: #f3f0ea;
  --wr-btn-hover: #e9e4dc;
  --wr-glow: #f3f0ea;
  --wr-ink: #3c3832;
  --wr-ink-2: #6d675f;
  --wr-ink-3: #8a847c;
  --wr-ink-strong: #1c1a17;
  --wr-hover: rgba(60, 56, 50, .04);
  --wr-row-hover: rgba(60, 56, 50, .03);
  --wr-line: #e4dfd6;
  --wr-line-2: rgba(60, 56, 50, .08);
  --wr-accent: #9a5b2e;
  --wr-accent-ink: #fffcf8;
  --wr-link: #4d6d8c;
  --wr-ok: #3f6b4e;
  --wr-warn: #8a6a32;
  --wr-bad: #a33d3d;
  --wr-input-bg: rgba(60, 56, 50, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--wr-bg);
  color: var(--wr-ink);
  font: 400 16px/1.6 var(--wr-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--wr-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- nav ---------- */
.wr-nav {
  border-bottom: 1px solid var(--wr-line);
  background: color-mix(in srgb, var(--wr-bg) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.wr-nav-in {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wr-mark {
  font-family: var(--wr-sans);
  font-size: 19px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--wr-ink);
}
.wr-mark .dot { color: var(--wr-accent); }
.wr-kicker {
  font-family: var(--wr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wr-ink-3);
  padding-left: 12px;
  border-left: 1px solid var(--wr-line);
}
.wr-nav-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  font: 600 12.5px/1 var(--wr-sans);
  letter-spacing: .01em;
  color: var(--wr-ink-2);
  background: var(--wr-panel-2);
  border: 1px solid var(--wr-line);
  border-radius: 6px;
  padding: 0 12px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn:hover { color: var(--wr-ink); border-color: color-mix(in srgb, var(--wr-accent) 45%, var(--wr-line)); }
.btn.ghost { background: transparent; }
.btn.icon { padding: 0; width: 34px; justify-content: center; }

.theme-toggle svg { display: none; }
:root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ---------- shell ---------- */
.wr-main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 64px 24px 40px;
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--wr-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-ink-3);
}
.wr-hero h1 {
  margin: 0;
  font-family: var(--wr-sans);
  font-weight: 400;
  font-size: clamp(31px, 8.2vw, 62px);
  line-height: 1.03;
  letter-spacing: -.022em;
  max-width: 20ch;
}
.wr-hero h1 em {
  font-style: italic;
  color: var(--wr-accent);
}
.lede {
  margin: 22px 0 0;
  max-width: 60ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--wr-ink-2);
}
.wr-hero .meta {
  margin: 20px 0 0;
  font-family: var(--wr-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--wr-ink-3);
}

/* ---------- section head ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wr-line);
}
.section-head h2 {
  margin: 0;
  font-family: var(--wr-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wr-ink-2);
}
.section-note {
  margin-left: auto;
  font-family: var(--wr-mono);
  font-size: 11.5px;
  color: var(--wr-ink-3);
}

.wr-demos { margin-top: 64px; }

/* ---------- demo rows ---------- */
.demo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.demo {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 196px;
  gap: 22px;
  padding: 26px 4px 26px 0;
  border-bottom: 1px solid var(--wr-line-2);
}
.demo:hover { border-bottom-color: color-mix(in srgb, var(--wr-accent) 40%, var(--wr-line-2)); }
.demo-idx {
  font-family: var(--wr-mono);
  font-size: 12px;
  color: var(--wr-ink-3);
  padding-top: 5px;
}
.demo-body h3 {
  margin: 0;
  font-family: var(--wr-sans);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.demo-body h3 a { text-decoration: none; }
.demo-body h3 a:hover { color: var(--wr-accent); }
.demo-tagline {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--wr-ink-2);
}
.demo-summary {
  margin: 12px 0 0;
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.62;
  color: var(--wr-ink-2);
}
.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
}
.tags li {
  font-family: var(--wr-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--wr-ink-3);
  border: 1px solid var(--wr-line);
  border-radius: 999px;
  padding: 3px 9px;
}
.demo-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}
.signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.badge-sub.stale { color: var(--wr-warn); }
.badge {
  font-family: var(--wr-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--wr-line);
  color: var(--wr-ink-2);
  background: var(--wr-panel-2);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.badge.ok { color: var(--wr-ok); border-color: color-mix(in srgb, var(--wr-ok) 35%, var(--wr-line)); }
.badge.warn { color: var(--wr-warn); border-color: color-mix(in srgb, var(--wr-warn) 35%, var(--wr-line)); }
.badge-sub {
  font-family: var(--wr-mono);
  font-size: 11px;
  color: var(--wr-ink-3);
  line-height: 1.5;
}
.demo-go {
  margin-top: auto;
  font-family: var(--wr-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--wr-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--wr-accent) 40%, transparent);
  padding-bottom: 1px;
}
.demo-go:hover { border-bottom-color: var(--wr-accent); }
.demo-skeleton { padding: 26px 0; color: var(--wr-ink-3); font-family: var(--wr-mono); font-size: 12px; }

/* ---------- about ---------- */
.wr-about { margin-top: 72px; }
.wr-about dl {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px 26px;
}
.wr-about dt {
  font-family: var(--wr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wr-ink-3);
  padding-top: 4px;
}
.wr-about dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--wr-ink-2);
  max-width: 68ch;
}
.wr-about dd code { font-family: var(--wr-mono); font-size: 12.5px; color: var(--wr-ink); }

/* ---------- footer ---------- */
.wr-foot {
  border-top: 1px solid var(--wr-line);
  margin-top: 32px;
}
.wr-foot-in {
  max-width: 1060px;
  margin: 0 auto;
  padding: 22px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  font-family: var(--wr-mono);
  font-size: 11.5px;
  color: var(--wr-ink-3);
}
.wr-foot-in a { color: var(--wr-ink-3); text-decoration: none; border-bottom: 1px solid var(--wr-line); }
.wr-foot-in a:hover { color: var(--wr-ink); }
.wr-foot-in .spacer { margin-left: auto; }

/* ---------- 404 ---------- */
.nf {
  max-width: 1060px;
  margin: 0 auto;
  padding: 96px 24px;
}
.nf h1 {
  font-family: var(--wr-sans);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -.02em;
  margin: 0;
}
.nf p { max-width: 52ch; color: var(--wr-ink-2); margin: 16px 0 0; }
.nf .back {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--wr-mono);
  font-size: 12.5px;
  color: var(--wr-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--wr-accent) 40%, transparent);
}

@media (max-width: 820px) {
  .wr-main { padding-top: 44px; }
  .demo { grid-template-columns: 1fr; gap: 12px; }
  .demo-idx { padding-top: 0; }
  .demo-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .demo-go { margin-top: 0; }
  .wr-about dl { grid-template-columns: 1fr; gap: 4px 0; }
  .wr-about dd { margin-bottom: 16px; }
}

/* ==========================================================================
   ops-center skin
   --------------------------------------------------------------------------
   Everything below restyles the hub to match /ops-center/ (console
   style.css). It is appended rather than woven in so the editorial rules above
   stay readable and this block can be lifted out in one piece. Only custom
   properties and class selectors are used: no style attributes, so the
   style-src 'self' CSP is untouched, and the theme still arrives as
   data-theme from /assets/theme.js.

   What changed, in one line per idea:
     nav      1060px centred -> full-bleed 44px bar, 12px inset
     type     serif headlines + tracked mono kickers -> sans UI text, mono meta
     shell    1060px -> the dashboard's 1480px column
     sections bare headings -> bordered panels with a 33px header strip
     rows     big cards -> tight log rows with a mono gutter
   ========================================================================== */

body {
  font: 13px/1.5 var(--wr-sans);
}

/* --- nav: the dashboard's 44px bar, full bleed --------------------------- */
.wr-nav {
  background: var(--wr-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  height: 44px;
}
.wr-nav-in {
  max-width: none;
  margin: 0;
  height: 100%;
  padding: 0 12px;
  gap: 10px;
}
.wr-mark {
  font-family: var(--wr-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.wr-kicker {
  font-family: var(--wr-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wr-ink-2);
  padding-left: 11px;
}
.wr-nav-tools { gap: 8px; }

.btn {
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  font-family: var(--wr-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wr-ink);
  background: var(--wr-panel-2);
  border-color: var(--wr-line);
  border-radius: 6px;
}
.btn:hover {
  color: var(--wr-ink-strong);
  background: var(--wr-btn-hover);
  border-color: var(--wr-line);
}
.btn.ghost {
  color: var(--wr-ink-2);
  background: transparent;
}
.btn.ghost:hover {
  color: var(--wr-ink);
  background: var(--wr-hover);
}
.btn.icon { width: 30px; padding: 0; }

/* --- shell: the dashboard's 1480px column ------------------------------- */
.wr-main {
  max-width: 1480px;
  padding: 20px 20px 40px;
}

/* --- hero -> the dashboard's title row ---------------------------------- */
.wr-hero { margin: 0 0 16px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
.wr-hero h1 {
  max-width: none;
  margin: 0 0 6px;
  font-family: var(--wr-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: var(--wr-ink-strong);
}
.wr-hero h1 em {
  font-style: normal;
  color: var(--wr-accent);
}
.lede {
  margin: 0 0 8px;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--wr-ink-2);
}
.wr-hero .meta {
  margin: 8px 0 0;
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--wr-ink-3);
}

/* --- sections -> bordered panels ---------------------------------------- */
.wr-demos,
.wr-about {
  margin: 0 0 12px;
  padding: 0;
  background: var(--wr-panel);
  border: 1px solid var(--wr-line);
  border-radius: 6px;
}
.section-head {
  height: 33px;
  margin: 0;
  padding: 0 8px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--wr-line-2);
}
.section-head h2 {
  font-family: var(--wr-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  text-transform: none;
  color: var(--wr-ink);
}
.section-note {
  font-size: 11px;
  color: var(--wr-ink-3);
  background: var(--wr-hover);
  padding: 1px 6px;
  border-radius: 6px;
}

/* --- demo rows -> the dashboard's log rows ------------------------------- */
.demo-list { border-top: 0; }
.demo {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--wr-line-2);
  border-left: 2px solid transparent;
}
.demo:last-child { border-bottom: 0; }
.demo:hover {
  background: var(--wr-row-hover);
  border-left-color: var(--wr-link);
  border-bottom-color: var(--wr-line-2);
}
.demo-idx {
  flex: 0 0 74px;
  padding-top: 0;
  font-size: 11.5px;
  color: var(--wr-ink-3);
}
.demo-body {
  flex: 1 1 auto;
  min-width: 0;
}
.demo-body h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--wr-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--wr-ink-strong);
}
.demo-body h3 a { color: inherit; border-bottom: 0; }
.demo-body h3 a:hover { color: var(--wr-link); }
.demo-tagline {
  margin: 2px 0 0;
  font-family: var(--wr-mono);
  font-size: 11.5px;
  color: var(--wr-ink-3);
}
.demo-summary {
  margin: 6px 0 0;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wr-ink-2);
}
.tags {
  margin: 8px 0 0;
  gap: 6px;
}
.tags li {
  padding: 1px 7px;
  font-family: var(--wr-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--wr-ink-2);
  border: 1px solid var(--wr-line);
  border-radius: 999px;
}
.demo-side {
  flex: 0 0 190px;
  padding-top: 0;
  gap: 10px;
}
.demo-skeleton { padding: 12px; }

.badge {
  font-family: var(--wr-sans);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
}
.badge.ok {
  border-color: color-mix(in srgb, var(--wr-ok) 45%, transparent);
}
.badge.warn {
  border-color: color-mix(in srgb, var(--wr-warn) 45%, transparent);
}
.badge-sub {
  font-size: 11.5px;
  color: var(--wr-ink-3);
}
.demo-go {
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--wr-link);
  border-bottom: 0;
}
.demo-go:hover {
  color: var(--wr-link);
  border-bottom: 0;
  text-decoration: underline;
}

/* --- about list -> the dashboard's field rows ---------------------------- */
.wr-about dl {
  margin: 0;
  padding: 8px 10px 10px;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 14px;
}
.wr-about dt {
  padding-top: 0;
  font-family: var(--wr-sans);
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--wr-ink-3);
}
.wr-about dd {
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.5;
}
.wr-about dd code {
  font-size: 11.5px;
  color: var(--wr-ink-strong);
  background: var(--wr-hover);
}

/* --- footer and 404 -> the dashboard's page footer ----------------------- */
.wr-foot { margin-top: 16px; }
.wr-foot-in {
  max-width: 1480px;
  padding: 12px 20px 40px;
  gap: 10px 20px;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--wr-ink-3);
}
.wr-foot-in a {
  color: var(--wr-link);
  border-bottom: 0;
}
.wr-foot-in a:hover {
  color: var(--wr-ink);
  border-bottom: 0;
  text-decoration: underline;
}

.nf {
  max-width: 1480px;
  padding: 40px 20px;
}
.nf h1 {
  font-family: var(--wr-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: var(--wr-ink-strong);
}
.nf p {
  margin: 6px 0 0;
  max-width: 1000px;
  font-size: 12.5px;
  line-height: 1.5;
}
.nf .back {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--wr-link);
  border-bottom: 0;
}
.nf .back:hover {
  border-bottom: 0;
  text-decoration: underline;
}

/* --- narrow: stack the log rows ----------------------------------------- */
@media (max-width: 820px) {
  .demo { flex-wrap: wrap; }
  .demo-idx { flex: 0 0 100%; }
  .demo-side { flex: 1 1 100%; }
  .wr-about dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
}


/* ==========================================================================
   home v2: calmer hero, three demo cards, a short "how it is built" strip
   ========================================================================== */
.wr-home { max-width: 1120px; padding-top: 44px; }
.wr-home .wr-hero { margin: 0 0 28px; }
.wr-home .eyebrow { color: var(--wr-accent); font-family: var(--wr-mono); font-size: 11.5px; margin-bottom: 10px; }
.wr-home .wr-hero h1 { font-size: 30px; font-weight: 600; letter-spacing: -.5px; max-width: 24ch; margin-bottom: 12px; }
.wr-home .lede { font-size: 15px; line-height: 1.6; max-width: 66ch; margin-bottom: 16px; }
.demo-flag {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 7px 12px;
  font-size: 12.5px; color: var(--wr-ink-2);
  background: color-mix(in srgb, var(--wr-warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--wr-warn) 35%, var(--wr-line));
  border-radius: 6px;
}
.demo-flag b { color: var(--wr-warn); font-weight: 600; }
.demo-flag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-warn); flex: 0 0 7px; }

.wr-home .wr-demos, .wr-home .wr-how { background: transparent; border: 0; margin: 0 0 32px; }
.wr-home .section-head { padding: 0; height: auto; margin: 0 0 12px; border: 0; }
.wr-home .section-head h2 { font-size: 12px; font-family: var(--wr-mono); color: var(--wr-ink-3); text-transform: uppercase; letter-spacing: .8px; }

.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.card {
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  background: var(--wr-panel);
  border: 1px solid var(--wr-line);
  border-radius: 8px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--wr-accent) 55%, var(--wr-line)); transform: translateY(-1px); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 12px; }
.card-kind { font-family: var(--wr-mono); font-size: 11px; color: var(--wr-accent); }
.card .signal { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.card .badge-sub { font-size: 10.5px; }
.card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: var(--wr-ink-strong); }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a:hover { color: var(--wr-link); }
.card-tagline { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--wr-ink); }
.card-summary { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--wr-ink-3); }
.card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--wr-line-2); display: flex; flex-direction: column; gap: 10px; }
.card-runs { margin: 0; font-size: 12px; color: var(--wr-ink-2); }
.card-runs .k { font-family: var(--wr-mono); font-size: 10.5px; color: var(--wr-ink-3); text-transform: uppercase; letter-spacing: .6px; margin-right: 8px; }
.card .tags { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 6px; }
.card-go { align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--wr-link); text-decoration: none; }
.card-go:hover { text-decoration: underline; }

.how-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.how-grid li { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 0 12px; border-left: 2px solid var(--wr-line); }
.how-grid b { font-size: 13px; font-weight: 600; color: var(--wr-ink-strong); }
.how-grid span { font-size: 12.5px; line-height: 1.55; color: var(--wr-ink-3); }
.wr-home + .wr-foot .wr-foot-in { max-width: 1120px; }

@media (max-width: 900px) {
  .card-grid, .how-grid { grid-template-columns: 1fr; }
  .wr-home { padding-top: 28px; }
  .wr-home .wr-hero h1 { font-size: 24px; }
}