/*
  Quorum design system.

  Every page on the marketing site and the docs is assembled from the tokens and
  components in this one file. Nothing below is page-specific: if a page needs a
  new look, it gets a new component here rather than a local override, so the
  seventeen pages cannot drift apart.

  Built to the approved comps, which are white. Light is the default, and the
  operating system's preference is not followed. Dark is a choice a person makes
  with the theme control, and it applies to every page: the site, the docs, the
  worker app and the console. A choice that held in one place and not the next
  would read as the site forgetting it.
*/

:root {
  /* Neutrals carry a blue bias so white panels lift off the ground. */
  --ground: #f6f8fc;
  --ground-2: #eef3fa;
  --surface: #ffffff;
  --surface-2: #fafbfe;
  --border: #e6ecf5;
  --border-2: #d9e2ef;

  --ink: #0f1b35;
  --ink-2: #33415c;
  --ink-3: #5b6b85;
  --ink-4: #8a97b0;
  --ink-5: #a8b3c7;

  --accent: #1f6feb;
  --accent-2: #175fd0;
  --accent-ink: #ffffff;
  --accent-wash: #eaf2fe;
  --accent-wash-2: #dce9fd;

  --good: #16a34a;
  --good-wash: #e8f7ee;
  --warn: #b45309;
  --warn-wash: #fdf3e7;
  --bad: #dc2626;
  --bad-wash: #fdeceb;

  --code-bg: #0f172a;
  --code-ink: #cbd5e1;
  --code-key: #7dd3fc;
  --code-str: #86efac;
  --code-num: #fbbf24;
  --code-fn: #c4b5fd;
  --code-dim: #64748b;

  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;

  --sh-sm: 0 1px 2px rgba(15, 27, 53, 0.05);
  --sh-md: 0 1px 2px rgba(15, 27, 53, 0.04), 0 6px 18px rgba(15, 27, 53, 0.05);
  --sh-lg: 0 1px 2px rgba(15, 27, 53, 0.04), 0 14px 40px rgba(15, 27, 53, 0.09);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1240px;
  --pad: 40px;
}

/*
  Dark mode.

  Required rather than optional. A worker answers at night on a phone whose
  battery has to last the evening, and the console gets projected in rooms with
  the lights off. The tokens are redefined under an attribute set before first
  paint from the stored choice, so every page switches together.
*/
[data-theme='dark'] {
  color-scheme: dark;

  --ground: #0c1017;
  --ground-2: #151b25;
  --surface: #131923;
  --surface-2: #171e29;
  --border: #232c3a;
  --border-2: #2d3849;

  --ink: #eef2f9;
  --ink-2: #c6d0df;
  --ink-3: #96a3b8;
  --ink-4: #74829a;
  --ink-5: #5d6b83;

  --accent: #4c8dff;
  --accent-2: #6ba0ff;
  --accent-ink: #06101f;
  --accent-wash: #16243c;
  --accent-wash-2: #1c2d4a;

  --good: #41c97a;
  --good-wash: #102a1d;
  --warn: #e0a940;
  --warn-wash: #2a2011;
  --bad: #f0605a;
  --bad-wash: #2c1414;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.32);
  --sh-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------------ mark -- */

/* The glyph itself, not a glyph on a tile. Takes currentColor at every size. */
.mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--ink);
}

/*
  Default size for every inline icon.

  The icons carry a viewBox and no width/height, which means no intrinsic size:
  unconstrained, one grows to fill whatever box it is in. Every context that
  wants another size (.ico svg, .back svg, .checks li svg …) is more specific
  than this and overrides it, so this only ever catches the ones nothing else
  sized.
*/
.i {
  width: 16px;
  height: 16px;
  flex: none;
}

.mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------- nav -- */

.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 60;
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current] {
  color: var(--ink);
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

.nav-end .sign {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.caret {
  width: 9px;
  height: 9px;
  color: var(--ink-5);
  flex: none;
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.004em;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  height: 38px;
  padding-inline: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--sh-sm);
}

.btn-primary:hover {
  background: var(--accent-2);
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-2);
  box-shadow: var(--sh-sm);
}

.btn-ghost:hover {
  border-color: var(--ink-5);
}

.btn-lg {
  height: 46px;
  padding-inline: 22px;
  font-size: 15px;
  border-radius: 10px;
}

/* ------------------------------------------------------------- typography -- */

.eyebrow {
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-weight: 700;
}

.h-xl {
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.14;
}

.h-lg {
  font-size: clamp(26px, 2.5vw, 33px);
  line-height: 1.18;
}

.h-md {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.022em;
}

.h-sm {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.lede {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-3);
  max-width: 46ch;
}

.muted {
  color: var(--ink-3);
}

.dim {
  color: var(--ink-4);
  font-size: 13px;
}

/* ----------------------------------------------------------------- layout -- */

.section {
  padding-block: 104px;
}

.section-tight {
  padding-block: 88px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 56px;
  align-items: start;
}

.split-even {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* ------------------------------------------------------------------ card -- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}

.card-lg {
  border-radius: var(--r-xl);
  padding: 24px;
}

.card-flat {
  background: var(--surface-2);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.panel-head .mark {
  width: 17px;
  height: 17px;
}

.panel-body {
  padding: 16px;
}

/* ------------------------------------------------------------------ icon -- */

.ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}

.ico svg {
  width: 17px;
  height: 17px;
  display: block;
}

.ico-sm {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
}

.ico-sm svg {
  width: 13px;
  height: 13px;
}

.ico-good {
  background: var(--good-wash);
  color: var(--good);
}

.ico-bad {
  background: var(--bad-wash);
  color: var(--bad);
}

.ico-plain {
  background: var(--ground-2);
  color: var(--ink-3);
}

/* -------------------------------------------------------------- numbered -- */

.steps {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.step-n {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-5);
  font-variant-numeric: tabular-nums;
  padding-top: 8px;
}

.step-b {
  min-width: 0;
}

.step-b p {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- process -- */

.flow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.flow-step {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.flow-step .ico {
  margin-inline: auto;
  margin-bottom: 10px;
}

.flow-step b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.flow-step span {
  display: block;
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 2px;
}

.flow-arrow {
  color: var(--ink-5);
  padding-top: 11px;
  flex: none;
}

/* ------------------------------------------------------------------ pills -- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--ground-2);
  border-radius: 100px;
  padding: 5px 11px;
}

.tag-accent {
  background: var(--accent-wash);
  color: var(--accent);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--ground-2);
  border-radius: var(--r-sm);
  padding: 5px 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 100px;
  padding: 4px 10px;
}

.badge-good {
  background: var(--good-wash);
  color: var(--good);
}

.badge-bad {
  background: var(--bad-wash);
  color: var(--bad);
}

.badge-accent {
  background: var(--accent-wash);
  color: var(--accent);
}

/* ------------------------------------------------------------------ lists -- */

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.checks li svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
  flex: none;
}

.feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.feat b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 11px 0 3px;
}

.feat span {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-4);
}

/* ------------------------------------------------------------------- code -- */

.code {
  background: var(--code-bg);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.code-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 11px 12px;
  cursor: pointer;
}

.code-tabs button[aria-selected="true"] {
  color: #fff;
  border-bottom-color: var(--accent);
}

.code-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--code-ink);
  counter-reset: ln;
}

.code pre .ln {
  display: block;
  counter-increment: ln;
  white-space: pre;
}

.code pre .ln::before {
  content: counter(ln);
  display: inline-block;
  width: 20px;
  margin-right: 16px;
  text-align: right;
  color: var(--code-dim);
  user-select: none;
}

.k {
  color: var(--code-key);
}

.s {
  color: var(--code-str);
}

.n {
  color: var(--code-num);
}

.f {
  color: var(--code-fn);
}

.c {
  color: var(--code-dim);
}

/* Light code block, used inside docs panels. */
.code-light {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.code-light pre {
  color: var(--ink-2);
}

.code-light pre .ln::before {
  color: var(--ink-5);
}

.code-light .s {
  color: #0f766e;
}

.code-light .k {
  color: #1d4ed8;
}

.code-light .n {
  color: #b45309;
}

[data-theme='dark'] .code-light .s {
  color: var(--code-str);
}

[data-theme='dark'] .code-light .k {
  color: var(--code-key);
}

[data-theme='dark'] .code-light .n {
  color: var(--code-num);
}

/* ------------------------------------------------------------------ table -- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tbl th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-4);
  font-size: 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.tbl td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: top;
}

.tbl tr:last-child td {
  border-bottom: 0;
}

.tbl code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- proof -- */

.stats-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 22px;
}

.stats-strip .note {
  font-size: 12px;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* A dot that tells the truth about whether these figures are live. */
.stats-strip .note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-5);
  flex: none;
}

.stats-strip .note[data-live-status="up"]::before {
  background: var(--good);
}

.stats-strip .note[data-live-status="down"] {
  color: var(--ink-5);
}

.stats-list {
  display: flex;
  gap: 52px;
  flex-wrap: wrap;
}

.stat-i b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.stat-i span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 1px;
}

/* ------------------------------------------------------------------- docs -- */

.docs-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 60;
}

.docs-nav-in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 60px;
  padding-inline: 24px;
}

.docs-tabs {
  display: flex;
  gap: 24px;
  flex: 1;
}

.docs-tabs a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 20px 0;
  border-bottom: 2px solid transparent;
}

.docs-tabs a[aria-current] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 11px;
  font-size: 12.5px;
  color: var(--ink-4);
  min-width: 240px;
}

.search kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-5);
}

.docs-grid {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 216px;
  align-items: start;
  gap: 0;
}

.docs-side {
  border-right: 1px solid var(--border);
  padding: 26px 20px 60px;
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.docs-side h4 {
  margin: 24px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.docs-side h4:first-child {
  margin-top: 0;
}

.docs-side a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-3);
}

.docs-side a svg {
  width: 13px;
  height: 13px;
  color: var(--ink-5);
  flex: none;
}

.docs-side a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.docs-side a[aria-current] {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

.docs-side a[aria-current] svg {
  color: var(--accent);
}

.docs-main {
  padding: 34px 40px 80px;
  min-width: 0;
  background: var(--surface);
  min-height: calc(100vh - 60px);
}

.docs-toc {
  border-left: 1px solid var(--border);
  padding: 34px 20px 60px;
  position: sticky;
  top: 60px;
}

.docs-toc h4 {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.docs-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-3);
}

.docs-toc a[aria-current] {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

/* The comp shows this in accent blue, not grey: it is the only way back up
   from a capability page and reads as a control rather than a caption. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 18px;
}
.back svg {
  width: 13px;
  height: 13px;
}
.back:hover {
  text-decoration: underline;
}

.help {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: 15px;
  margin-top: 28px;
}

.note-box {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--accent-wash);
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ----------------------------------------------------------------- footer -- */

.foot-cta {
  text-align: center;
  padding-block: 54px;
}

.foot {
  border-top: 1px solid var(--border);
  padding-block: 30px 44px;
}

.foot-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
  :root {
    --pad: 28px;
  }

  .docs-toc {
    display: none;
  }

  .docs-grid {
    grid-template-columns: 216px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .split,
  .split-even {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .section {
    padding-block: 48px;
  }

  .flow {
    flex-wrap: wrap;
  }

  .flow-arrow {
    display: none;
  }

  .flow-step {
    flex: 1 1 40%;
  }

  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-side {
    display: none;
  }

  .docs-main {
    padding: 26px 20px 60px;
  }

  .stats-list {
    gap: 28px;
  }
}

@media (max-width: 560px) {
  :root {
    --pad: 18px;
  }

  .step {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .step .ico {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   The worker surface.

   A different audience from the developer site — someone deciding whether to
   spend an evening answering questions — so it gets its own chrome: three tabs,
   a language picker, and a single call to action. Everything is prefixed `w-`
   so it cannot collide with the developer pages sharing this stylesheet.

   The headline treatment is the comps': first line in ink, second in accent.
   ========================================================================== */

.w-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.w-nav-in {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 68px;
}

.w-nav .brand {
  font-size: 20px;
  gap: 10px;
}

.w-nav .brand .mark {
  width: 32px;
  height: 32px;
}

.w-tabs {
  display: flex;
  gap: 34px;
  align-self: stretch;
}

.w-tabs a {
  display: inline-flex;
  align-items: center;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.w-tabs a:hover {
  color: var(--ink);
}

.w-tabs a[aria-current] {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.w-nav-end {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.w-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

/* ------------------------------------------------------------- sections -- */

/*
  One band, one screen.

  Each of these sections is a full screen in the comps, so it is sized to the
  viewport rather than to whatever its content happens to measure: the reader
  never has to scroll to find the start of a section. `min-height` rather than
  `height` so a long translation still grows the band instead of overflowing it,
  and `svh` so a phone's collapsing address bar does not cause a jump.
*/
.w-band {
  display: grid;
  align-content: center;
  min-height: calc(100svh - 68px);
  padding-block: 44px;
  background: linear-gradient(180deg, #f4f8fd 0%, #ffffff 100%);
}

.w-band-alt {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
}

[data-theme='dark'] .w-band {
  background: linear-gradient(180deg, var(--ground-2) 0%, var(--ground) 100%);
}

[data-theme='dark'] .w-band-alt {
  background: linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
}

.w-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 48px;
  align-items: center;
}

/*
  The label above a heading.

  Ink, like the heading it introduces. It sits inside the heading block and
  reads as the first line of it, so setting it in accent made the block
  two-tone in the same way an accent-coloured second line did — and it put the
  one colour reserved for the primary action into a piece of text nobody can
  click.
*/
.w-eyebrow {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/*
  Headings run to two lines and both of them are ink.

  The comps set the second line in accent, which made every heading on the
  worker surface read as half-highlighted — and, worse, made a full stop the
  same blue as the one call to action on the page. One accent colour, used only
  for the primary action, is the whole direction: a heading that borrows it is
  competing with the button. `em` still carries the line break, so the markup is
  unchanged and only the colour moved.
*/
.w-h {
  margin: 0 0 20px;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--ink);
}

.w-h em {
  display: block;
  font-style: normal;
  color: var(--ink);
}

.w-lede {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 34em;
}

/* ---------------------------------------------------------------- media -- */

/*
  Photo slots.

  The comps are built on photography this repository does not hold, so these are
  the exact shapes and positions the photographs occupy, ready for files to be
  dropped in as a background image. They render as a calm tint rather than a
  broken-image icon, so a page with no photograph still reads as designed.
*/
/*
  The photographs are cropped out of the comps themselves, which means they are
  tall portraits of one person rather than wide scenes. The slot is shaped to
  that: a portrait frame, anchored high so the face survives the crop at every
  width instead of being sliced into a band.
*/
/*
  The photographs are tall portraits cropped from the comps. Left to their own
  aspect ratio they grow with the column and push the section off the screen, so
  the height is capped against the viewport and the crop is allowed to do the
  rest. Anchored at 14% from the top so the face survives every width.

  The mask is what makes a rectangular crop sit in the page the way the comps'
  cut-out subjects do: the outer edge dissolves into the band instead of ending
  on a hard line.
*/
.w-media {
  width: 100%;
  height: clamp(320px, 60svh, 470px);
  border-radius: var(--r-xl);
  background-color: transparent;
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(128% 124% at 50% 44%, #000 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(128% 124% at 50% 44%, #000 80%, rgba(0, 0, 0, 0) 100%);
}

/*
  Comps 31, 28 and 33 show the photograph inside a defined shape with a real
  edge, so those keep their silhouette. Comp 30 is a cut-out subject melting
  into a pale blob, which is what this does — and the hero gets only a soft
  inner edge so it meets the band rather than stopping on a line.
*/
.w-media-blend {
  border-radius: 0;
  -webkit-mask-image: radial-gradient(72% 60% at 50% 42%, #000 52%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(72% 60% at 50% 42%, #000 52%, rgba(0, 0, 0, 0) 100%);
}

.w-media-hero {
  -webkit-mask-image: linear-gradient(96deg, rgba(0, 0, 0, 0) 0%, #000 16%, #000 90%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(96deg, rgba(0, 0, 0, 0) 0%, #000 16%, #000 90%, rgba(0, 0, 0, 0) 100%);
}

.w-media-sq {
  aspect-ratio: 1 / 1;
  height: auto;
  background-position: center 8%;
}

.w-frame {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.w-frame-hero {
  max-width: 470px;
  margin-inline: auto 0;
}

.w-grid-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr) minmax(0, 1.02fr);
  gap: 36px;
}

.w-float-bl {
  left: -14px;
  bottom: 40px;
}

.w-frame-round {
  max-width: 390px;
}

/* The recurring silhouette: two deep corners, two shallow. */
.w-media-leaf {
  border-radius: 168px 26px 168px 26px;
}

.w-media-round {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.w-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 6px rgba(15, 27, 53, 0.06), 0 18px 44px rgba(15, 27, 53, 0.14);
  padding: 14px 18px;
}

.w-float b {
  display: block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
}

.w-float span {
  font-size: 12.5px;
  color: var(--ink-3);
}

.w-float-br {
  right: -18px;
  bottom: 34px;
}

.w-float-tr {
  right: -10px;
  top: 26px;
}

/* ---------------------------------------------------------- script mark -- */

/*
  The handwritten accent from the comps, with its underline swoosh. It is
  decorative — it repeats a promise the prose already makes — so it is hidden
  from assistive technology rather than read out twice.
*/
.w-script {
  font-family: "Caveat", ui-rounded, cursive;
  font-size: 26px;
  line-height: 1.24;
  font-weight: 600;
  color: var(--ink);
}

/* The swoosh takes currentColor, so it follows the text rather than staying blue. */
.w-script svg {
  display: block;
  width: 132px;
  height: 11px;
  margin-top: 2px;
  color: var(--ink);
}

/* --------------------------------------------------------------- pieces -- */

.w-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-feat .w-tile {
  margin-bottom: 11px;
}

.w-feat b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}

.w-feat p {
  margin: 0;
  font-size: 13.2px;
  line-height: 1.58;
  color: var(--ink-3);
}

.w-tile {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-wash);
  color: var(--accent);
}

.w-tile svg {
  width: 23px;
  height: 23px;
}

.w-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.w-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}

.w-card .w-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 16px;
}

.w-card b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.w-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-3);
}

/* ----------------------------------------------------------------- flow -- */

.w-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.w-step .w-tile {
  margin-bottom: 18px;
}

.w-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}

.w-step b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.w-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-3);
}

.w-arrow {
  align-self: start;
  margin-top: 14px;
  color: var(--ink-5);
}

/* ------------------------------------------------------- call to action -- */

.w-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding-inline: 28px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  box-shadow: var(--sh-sm);
}

.w-btn:hover {
  background: var(--accent-2);
}

.w-play {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.w-play span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  color: var(--accent);
}

/* ------------------------------------------------------------- sign in -- */

.w-signin {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 38px 36px;
}

.w-signin .brand {
  font-size: 20px;
  margin-bottom: 26px;
}

.w-signin h2 {
  margin: 0 0 10px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.028em;
}

.w-signin-lede {
  margin: 0 0 26px;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

.w-passkey {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--accent-wash);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 17px 18px;
}

.w-passkey:hover {
  border-color: var(--accent);
}

.w-passkey b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.w-passkey span {
  font-size: 12.5px;
  color: var(--ink-3);
}

.w-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.w-stack-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.w-stack-row b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.w-stack-row p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .w-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .w-band {
    padding-block: 60px;
  }
  .w-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .w-arrow {
    display: none;
  }
  .w-float-br,
  .w-float-tr {
    right: 12px;
  }
  .w-nav-in {
    gap: 20px;
  }
  .w-tabs {
    gap: 18px;
  }
}

/*
  Moving between pages.

  Every page is its own document, so without this each click is a blank frame
  and a redraw of the whole screen, sidebar included. Cross-document view
  transitions let the browser carry the chrome across unchanged (the app's rail,
  the site's header) and cross-fade only the content, with a short rise so the
  new page reads as arriving rather than flickering in. Browsers without support
  simply load the page as before, and anyone who asked for less motion gets none.
*/
@view-transition {
  navigation: auto;
}

.ap-side {
  view-transition-name: app-rail;
}

.nav,
.w-nav {
  view-transition-name: site-header;
}

::view-transition-old(root) {
  animation: 140ms ease-out both quorum-leave;
}

::view-transition-new(root) {
  animation: 200ms ease-out 40ms both quorum-arrive;
}

::view-transition-group(app-rail),
::view-transition-group(app-tabs),
::view-transition-group(site-header) {
  animation-duration: 0s;
}

@keyframes quorum-leave {
  to {
    opacity: 0;
  }
}

@keyframes quorum-arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ------------------------------------------------------------ docs search -- */

button.search {
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}

button.search:hover {
  border-color: var(--border-2);
}

.ds-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 27, 53, 0.32);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
}

.ds-backdrop[hidden] {
  display: none;
}

.ds-panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(15, 27, 53, 0.22);
  overflow: hidden;
}

.ds-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 16px 18px;
  outline: none;
}

.ds-results {
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px;
}

.ds-hit {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink);
}

.ds-hit[aria-selected='true'],
.ds-hit:hover {
  background: var(--accent-wash);
}

.ds-hit b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.ds-hit b span {
  color: var(--ink-3);
  font-weight: 500;
}

.ds-hit small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

.ds-hit mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

.ds-empty {
  margin: 0;
  padding: 18px 12px;
  font-size: 13px;
  color: var(--ink-4);
}

/* --------------------------------------------------------------- waitlist -- */

.w-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.w-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.w-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.w-input::placeholder {
  color: var(--ink-5);
}

.w-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.w-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.w-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.w-chip svg {
  width: 13px;
  height: 13px;
  color: var(--ink-4);
}

.w-chip:hover {
  border-color: var(--accent);
}

.w-chip[aria-checked='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.w-chip[aria-checked='true'] svg {
  color: var(--accent);
}

.w-note {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.w-note-good {
  background: var(--good-wash, #e8f7ef);
  color: var(--good, #13854e);
}

.w-note-bad {
  background: var(--bad-wash, #fdecec);
  color: var(--bad, #c23b3b);
}

.w-invite {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.w-invite summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}

.w-invite summary::-webkit-details-marker {
  display: none;
}

.w-invite summary svg {
  width: 14px;
  height: 14px;
}

/* The worker header on a phone: the brand and the one button. The tabs and the
   language switch did not fit, and pushed every worker page wider than the screen. */
@media (max-width: 640px) {
  .w-tabs,
  .w-lang {
    display: none;
  }
  .w-nav-in {
    justify-content: space-between;
  }
  .w-signin {
    padding: 28px 22px;
  }
}

/* The waitlist: one centered card, the form beside what happens next. */
.wl {
  padding-top: 0;
  align-content: start;
}

.wl-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 24px 150px;
  text-align: center;
  /* Fades into the page rather than ending on an edge. */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

/* The photograph, softened on purpose: it is a backdrop, not a picture to study. */
.wl-head::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -2;
  background: url(worker-hero.webp) center 40% / cover no-repeat;
  filter: blur(6px) saturate(1.1);
}

.wl-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(16, 38, 84, 0.55), rgba(10, 20, 42, 0.86) 75%),
    linear-gradient(180deg, rgba(10, 20, 42, 0.2), rgba(10, 20, 42, 0.5));
}

.wl-head > * {
  max-width: 720px;
  margin-inline: auto;
}

.wl-head + .shell {
  position: relative;
  margin-top: -64px;
}

.wl-head .w-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.wl-head .w-h {
  color: #fff;
}

.wl-head .w-h em {
  color: #fff;
}

.wl-head .w-lede {
  max-width: 620px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.86);
}

.wl-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: 1080px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.wl-form {
  padding: 44px 44px 40px;
}

.wl-form h2 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.028em;
}

.wl-side {
  padding: 44px 40px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
}

@media (max-width: 860px) {
  .wl-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .wl-side {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .wl-head {
    padding: 72px 20px 120px;
  }
}

@media (max-width: 560px) {
  .wl-form,
  .wl-side {
    padding: 28px 20px;
  }
  .wl-head {
    text-align: left;
  }
  .wl-head + .shell {
    margin-top: -48px;
  }
}

@media (max-width: 560px) {
  .wl-theme span {
    display: none;
  }
}