/* rendzio.com — built by site/build.py from design/tokens/tokens.css and site/site.css */
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* Rendzio design tokens v3 — light default, dark via [data-theme="dark"] or prefers-color-scheme.
   Values come from tokens.json (the web platform's overrides applied); the classes below are the web's hand-written
   base layer. Regenerate nothing here by hand: change tokens.json, then mirror the value. */
:root {
  --rz-bg: #FFFFFF; --rz-bg2: #F6F8F9; --rz-surface: #FFFFFF; --rz-tint: #EEF3F6; --rz-tint2: #E4EBEF; --rz-ink: #0F1A20; --rz-ink2: #45535C; --rz-ink3: #66737C; --rz-ink4: #9AA6AE; --rz-line: #E6EBEE; --rz-line2: #D3DBE0; --rz-field: #8795A0; --rz-blue: #2F52E5; --rz-blue-text: #2F52E5; --rz-blue-tint: #EEF2FF; --rz-blue-tint-text: #2341C4; --rz-on-blue: #FFFFFF; --rz-lime: #ACDB00; --rz-on-lime: #0F1A20; --rz-lime-tint: #F4FBDC; --rz-lime-tint-text: #4D6400; --rz-amber: #B3541E; --rz-amber-tint: #FDF1E8; --rz-amber-tint-text: #8A3E14; --rz-amber-fill: #F0A868; --rz-red: #C02718; --rz-red-tint: #FDECEA; --rz-red-tint-text: #B42318; --rz-disabled-bg: #E6EBEE; --rz-disabled-ink: #8C98A1; --rz-toast: #1F2A31; --rz-on-toast: #FFFFFF; --rz-toast-action: #93A9FB; --rz-segmented-track: #EEF3F6; --rz-segmented-selected: #FFFFFF; --rz-bubble-theirs: #EEF3F6; --rz-sheet: #FFFFFF; --rz-dialog: #EEF2F5; --rz-on-blue-muted: #C9D4FF; --rz-live-prompt: #0F1A20; --rz-on-live-prompt: #FFFFFF; --rz-on-live-prompt-muted: #B4C1C9; --rz-map-ground: #EEF1EC; --rz-map-park: #DCEBD2; --rz-map-block: #E5E9E2; --rz-map-road: #FFFFFF; --rz-map-road-edge: #DCE2DA; --rz-map-water: #CFE0F2; --rz-map-main-road: #F7E7B8; --rz-ground: #FFFFFF; --rz-ink-muted: #45535C; --rz-brand: #2F52E5; --rz-action: #2F52E5; --rz-live: #ACDB00; --rz-warn: #B3541E; --rz-stop: #C02718; --rz-rule: #0F1A20; --rz-hairline: #E6EBEE;
  --rz-blue: #2F52E5; --rz-lime: #ACDB00; --rz-lemon: #ACDB00; --rz-blue-night: #93A9FB; --rz-night: #0F1A20; --rz-paper: #F2F6F8; --rz-white: #FFFFFF;
  --rz-scrim: rgba(15,26,32,0.42); --rz-shadow-ink: 15,26,32;
  --rz-font-display: 'Figtree', 'SN Pro', ui-sans-serif, system-ui, sans-serif; --rz-font-text: 'Figtree', 'SN Pro', ui-sans-serif, system-ui, sans-serif;
  --rz-space-1: 4px; --rz-space-2: 8px; --rz-space-3: 12px; --rz-space-4: 16px; --rz-space-5: 20px; --rz-space-6: 24px; --rz-space-8: 32px; --rz-space-10: 40px; --rz-space-12: 48px; --rz-space-16: 64px;
  --rz-margin: 16px; --rz-margin-tablet: 24px; --rz-reading-max: 640px; --rz-container: 1200px;
  --rz-split-main: 720px; --rz-split-side: 400px; --rz-split-gap: 80px;
  --rz-radius-pin-tile: 22%; --rz-radius-glyph-tile: 18%; --rz-radius-button: 12px; --rz-radius-card: 16px; --rz-radius-card-raised: 20px; --rz-radius-hero: 24px; --rz-radius-sheet: 20px; --rz-radius-chip: 999px; --rz-radius-input: 12px; --rz-radius-thumb: 12px; --rz-radius-banner: 14px; --rz-radius-code-panel: 28px;
  --rz-hit: 44px; --rz-button-h: 48px; --rz-button-h-md: 40px; --rz-button-h-sm: 34px; --rz-icon-button: 44px;
  --rz-tabbar-content: 62px; --rz-tabbar-inset: 0px; --rz-tabbar-plus: 56px; --rz-tabbar-valley-r: 36px; --rz-tabbar-valley-cy: 2px; --rz-tabbar-icon: 24px; --rz-tabbar-label: 11px;
  --rz-tabbar-reserve: 96px;
  --rz-motion-quick: 150ms; --rz-motion-base: 250ms; --rz-motion-slow: 400ms; --rz-ease-quick: ease-out; --rz-ease-base: cubic-bezier(0.2, 0, 0, 1);
  --rz-shadow-1: 0 1px 2px rgba(15,26,32,0.05), 0 1px 6px rgba(15,26,32,0.04); --rz-shadow-2: 0 2px 6px rgba(15,26,32,0.06), 0 8px 20px rgba(15,26,32,0.07); --rz-shadow-3: 0 6px 16px rgba(15,26,32,0.10), 0 18px 44px rgba(15,26,32,0.12); --rz-shadow-4: 0 12px 32px rgba(15,26,32,0.16), 0 32px 80px rgba(15,26,32,0.18);
}
[data-theme="dark"] { --rz-bg: #0B1216; --rz-bg2: #0F171C; --rz-surface: #141D23; --rz-tint: #1B262D; --rz-tint2: #223038; --rz-ink: #F2F6F8; --rz-ink2: #B4C1C9; --rz-ink3: #8C9AA4; --rz-ink4: #5E6D78; --rz-line: #223038; --rz-line2: #2E3D47; --rz-field: #5E6D78; --rz-blue: #2F52E5; --rz-blue-text: #93A9FB; --rz-blue-tint: #1A2450; --rz-blue-tint-text: #B7C6FF; --rz-on-blue: #FFFFFF; --rz-lime: #ACDB00; --rz-on-lime: #0F1A20; --rz-lime-tint: #1E2A0A; --rz-lime-tint-text: #C9EE55; --rz-amber: #F0A868; --rz-amber-tint: #2C1D12; --rz-amber-tint-text: #F5BE8C; --rz-amber-fill: #F0A868; --rz-red: #FF7A66; --rz-red-tint: #2E1512; --rz-red-tint-text: #FF9A8A; --rz-disabled-bg: #1E2A31; --rz-disabled-ink: #5E6D78; --rz-toast: #E8EEF2; --rz-on-toast: #0F1A20; --rz-toast-action: #2F52E5; --rz-segmented-track: #1F2A31; --rz-segmented-selected: #3A4852; --rz-bubble-theirs: #1F2A31; --rz-sheet: #141D23; --rz-dialog: #1E2A31; --rz-on-blue-muted: #C9D4FF; --rz-live-prompt: #1B262D; --rz-on-live-prompt: #FFFFFF; --rz-on-live-prompt-muted: #B4C1C9; --rz-map-ground: #18222A; --rz-map-park: #1C2B22; --rz-map-block: #1D2830; --rz-map-road: #2A3740; --rz-map-road-edge: #223038; --rz-map-water: #16293A; --rz-map-main-road: #34424C; --rz-ground: #0B1216; --rz-ink-muted: #B4C1C9; --rz-brand: #2F52E5; --rz-action: #93A9FB; --rz-live: #ACDB00; --rz-warn: #F0A868; --rz-stop: #FF7A66; --rz-rule: #F2F6F8; --rz-hairline: #223038; --rz-scrim: rgba(0,0,0,0.60); --rz-shadow-ink: 0,0,0; --rz-shadow-1: 0 1px 2px rgba(0,0,0,0.09), 0 1px 6px rgba(0,0,0,0.07); --rz-shadow-2: 0 2px 6px rgba(0,0,0,0.11), 0 8px 20px rgba(0,0,0,0.13); --rz-shadow-3: 0 6px 16px rgba(0,0,0,0.18), 0 18px 44px rgba(0,0,0,0.22); --rz-shadow-4: 0 12px 32px rgba(0,0,0,0.29), 0 32px 80px rgba(0,0,0,0.32); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rz-bg: #0B1216; --rz-bg2: #0F171C; --rz-surface: #141D23; --rz-tint: #1B262D; --rz-tint2: #223038; --rz-ink: #F2F6F8; --rz-ink2: #B4C1C9; --rz-ink3: #8C9AA4; --rz-ink4: #5E6D78; --rz-line: #223038; --rz-line2: #2E3D47; --rz-field: #5E6D78; --rz-blue: #2F52E5; --rz-blue-text: #93A9FB; --rz-blue-tint: #1A2450; --rz-blue-tint-text: #B7C6FF; --rz-on-blue: #FFFFFF; --rz-lime: #ACDB00; --rz-on-lime: #0F1A20; --rz-lime-tint: #1E2A0A; --rz-lime-tint-text: #C9EE55; --rz-amber: #F0A868; --rz-amber-tint: #2C1D12; --rz-amber-tint-text: #F5BE8C; --rz-amber-fill: #F0A868; --rz-red: #FF7A66; --rz-red-tint: #2E1512; --rz-red-tint-text: #FF9A8A; --rz-disabled-bg: #1E2A31; --rz-disabled-ink: #5E6D78; --rz-toast: #E8EEF2; --rz-on-toast: #0F1A20; --rz-toast-action: #2F52E5; --rz-segmented-track: #1F2A31; --rz-segmented-selected: #3A4852; --rz-bubble-theirs: #1F2A31; --rz-sheet: #141D23; --rz-dialog: #1E2A31; --rz-on-blue-muted: #C9D4FF; --rz-live-prompt: #1B262D; --rz-on-live-prompt: #FFFFFF; --rz-on-live-prompt-muted: #B4C1C9; --rz-map-ground: #18222A; --rz-map-park: #1C2B22; --rz-map-block: #1D2830; --rz-map-road: #2A3740; --rz-map-road-edge: #223038; --rz-map-water: #16293A; --rz-map-main-road: #34424C; --rz-ground: #0B1216; --rz-ink-muted: #B4C1C9; --rz-brand: #2F52E5; --rz-action: #93A9FB; --rz-live: #ACDB00; --rz-warn: #F0A868; --rz-stop: #FF7A66; --rz-rule: #F2F6F8; --rz-hairline: #223038; --rz-scrim: rgba(0,0,0,0.60); --rz-shadow-ink: 0,0,0; --rz-shadow-1: 0 1px 2px rgba(0,0,0,0.09), 0 1px 6px rgba(0,0,0,0.07); --rz-shadow-2: 0 2px 6px rgba(0,0,0,0.11), 0 8px 20px rgba(0,0,0,0.13); --rz-shadow-3: 0 6px 16px rgba(0,0,0,0.18), 0 18px 44px rgba(0,0,0,0.22); --rz-shadow-4: 0 12px 32px rgba(0,0,0,0.29), 0 32px 80px rgba(0,0,0,0.32); } }

body { background: var(--rz-bg); color: var(--rz-ink); font-family: var(--rz-font-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--rz-font-display); }

/* type scale — one class per token (DESIGN_SYSTEM.md §4) */
.rz-hero { font-size: 48px; line-height: 54px; font-weight: 800; letter-spacing: -0.03em; }
.rz-display { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.rz-title1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; }
.rz-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.rz-title3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.rz-large-title { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; } /* platform.web.type: the large header's title */
.rz-body { font-size: 16px; line-height: 24px; font-weight: 400; }
.rz-body-strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.rz-sub { font-size: 15px; line-height: 21px; font-weight: 400; }
.rz-sub-strong { font-size: 15px; line-height: 21px; font-weight: 600; }
.rz-meta { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--rz-ink3); }
.rz-meta-strong { font-size: 13px; line-height: 18px; font-weight: 600; }
.rz-small { font-size: 14px; line-height: 20px; font-weight: 400; } /* platform.web.type: chips, segments, countdowns, sm buttons */
.rz-small-strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.rz-label { font-size: 16px; line-height: 20px; font-weight: 600; }
.rz-micro { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }
.rz-overline { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rz-chip { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rz-code { font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* buttons — labels centred; the left-flush label of v2 is withdrawn (§12) */
.rz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--rz-button-h); padding: 0 20px; border-radius: var(--rz-radius-button); font-weight: 600; font-size: 16px; text-align: center; width: 100%; border: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background var(--rz-motion-quick) var(--rz-ease-quick), transform var(--rz-motion-quick) var(--rz-ease-quick); }
.rz-btn:active { transform: scale(0.98); }
.rz-btn-md { min-height: var(--rz-button-h-md); font-size: 15px; }
.rz-btn-sm { min-height: var(--rz-button-h-sm); font-size: 14px; padding: 0 14px; border-radius: 999px; }
.rz-btn-auto { width: auto; }
.rz-btn-primary { background: var(--rz-blue); color: var(--rz-on-blue); }
.rz-btn-dark { background: var(--rz-ink); color: var(--rz-bg); }
.rz-btn-live { background: var(--rz-lime); color: var(--rz-on-lime); }
.rz-btn-secondary { background: var(--rz-bg); color: var(--rz-ink); border: 1px solid var(--rz-ink); }
.rz-btn-tonal { background: var(--rz-blue-tint); color: var(--rz-blue-tint-text); }
.rz-btn-neutral { background: var(--rz-tint); color: var(--rz-ink); }
.rz-btn-text { background: transparent; color: var(--rz-blue-text); padding: 0 4px; min-height: var(--rz-hit); }
.rz-btn-danger { background: var(--rz-red); color: #FFFFFF; }
.rz-btn-danger-outline { background: transparent; color: var(--rz-red); border: 1px solid var(--rz-red); }
.rz-btn-danger-text { background: transparent; color: var(--rz-red); padding: 0 4px; }
.rz-btn[disabled], .rz-btn-disabled { background: var(--rz-disabled-bg); color: var(--rz-disabled-ink); border: none; cursor: default; }
.rz-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--rz-icon-button); height: var(--rz-icon-button); border-radius: 50%; background: var(--rz-tint); color: var(--rz-ink); border: none; cursor: pointer; padding: 0; }
.rz-icon-btn-plain { background: transparent; }

/* cards and rows (§12) */
.rz-card { background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius-card); box-shadow: var(--rz-shadow-1); padding: 16px; box-sizing: border-box; }
.rz-card-raised { border-radius: var(--rz-radius-card-raised); box-shadow: var(--rz-shadow-2); }
.rz-card-hero { border-radius: var(--rz-radius-hero); box-shadow: var(--rz-shadow-2); padding: 20px; }
.rz-row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; }
.rz-row + .rz-row { border-top: 1px solid var(--rz-line); }
.rz-hairline { height: 1px; background: var(--rz-line); }

/* status chips — one per job, uppercase pill, top-left (§5) */
.rz-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--rz-radius-chip); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; box-sizing: border-box; }
.rz-chip-opened { border: 1.5px solid var(--rz-ink); color: var(--rz-ink); background: transparent; }
.rz-chip-finding { border: 1.5px solid var(--rz-ink); color: var(--rz-ink); background: transparent; }
.rz-chip-offer { background: var(--rz-blue); color: #FFFFFF; }
.rz-chip-awaiting { background: var(--rz-blue-tint); color: var(--rz-blue-tint-text); }
.rz-chip-accepted { background: var(--rz-blue-tint); color: var(--rz-blue-tint-text); }
.rz-chip-booked { background: var(--rz-blue); color: #FFFFFF; }
.rz-chip-confirmed { background: var(--rz-blue); color: #FFFFFF; }
.rz-chip-in-progress { background: var(--rz-lime); color: var(--rz-on-lime); }
.rz-chip-partly-done { background: var(--rz-amber-fill); color: var(--rz-night); }
.rz-chip-no-pro { border: 1.5px solid var(--rz-amber); color: var(--rz-amber); background: transparent; }
.rz-chip-completed { background: var(--rz-ink); color: var(--rz-bg); }
.rz-chip-closed { background: var(--rz-ink); color: var(--rz-bg); }
.rz-chip-cancelled { background: var(--rz-red); color: #FFFFFF; }
.rz-chip-abandoned { border: 1.5px solid var(--rz-ink4); color: var(--rz-ink4); background: transparent; }
.rz-chip-in-progress::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rz-on-lime); animation: rz-pulse 1.6s ease-in-out infinite; }
.rz-chip-pro { background: var(--rz-lime); color: var(--rz-on-lime); }
.rz-chip-client { background: var(--rz-blue-tint); color: var(--rz-blue-tint-text); }

/* punctuality bands (§6) */
.rz-punct { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 14px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rz-punct-early { background: var(--rz-lime); color: var(--rz-on-lime); }
.rz-punct-on-time { border: 1.5px solid var(--rz-ink); color: var(--rz-ink); }
.rz-punct-late { background: var(--rz-amber-tint); color: var(--rz-amber-tint-text); }
.rz-punct-no-show { background: var(--rz-red-tint); color: var(--rz-red-tint-text); }

/* selectable chips (filters, skills) — pill, ink when selected */
.rz-pick { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--rz-bg); color: var(--rz-ink); border: 1px solid var(--rz-line2); cursor: pointer; }
.rz-pick[aria-pressed="true"] { background: var(--rz-ink); color: var(--rz-bg); border-color: var(--rz-ink); font-weight: 600; }

/* fields (§12): field border at rest, ink when focused, red on error */
.rz-field { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 9px 14px; border: 1px solid var(--rz-field); border-radius: var(--rz-radius-input); background: var(--rz-bg); box-sizing: border-box; }
.rz-field:focus-within { border: 2px solid var(--rz-ink); padding: 8px 13px; }
.rz-field-error { border: 2px solid var(--rz-red); padding: 8px 13px; }
.rz-field label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--rz-ink2); }
.rz-field input, .rz-field textarea { font: inherit; font-size: 16px; line-height: 24px; color: var(--rz-ink); border: none; outline: none; background: transparent; padding: 0; width: 100%; }

/* live signals (§3.2) */
@keyframes rz-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
@keyframes rz-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes rz-spin { to { transform: rotate(360deg); } }
.rz-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rz-lime); box-shadow: 0 0 0 3px rgba(172,219,0,0.25); animation: rz-pulse 1.6s ease-in-out infinite; }
.rz-skeleton { background: linear-gradient(90deg, var(--rz-tint) 0%, var(--rz-bg2) 50%, var(--rz-tint) 100%); background-size: 200% 100%; animation: rz-shimmer 1.4s ease-in-out infinite; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .rz-live-dot, .rz-skeleton, .rz-chip-in-progress::before { animation: none; } }

.rz-icon { width: 24px; height: 24px; color: currentColor; }
:focus-visible { outline: 2px solid var(--rz-blue); outline-offset: 2px; }
/* No tablet type rescale on the web: `type.tabletScale` is the iOS regular-size-class step
   (RzText.scalesOnTablet). The desktop boards are drawn at 1440 and still say display 32/38 and
   title1 26/32 (web-desktop.md §1: "the title in `display` 32/700"), so every class above holds at
   every width. compile-tokens.mjs fails the build if a rescale is reintroduced here. */

/* avatar tones — generated from tokens.json by site/build.py */
:root { --rz-tone0-bg: #DCE4FF; --rz-tone0-fg: #2341C4; --rz-tone1-bg: #E7F6B8; --rz-tone1-fg: #3E5000; --rz-tone2-bg: #FBDFC9; --rz-tone2-fg: #8A3E14; --rz-tone3-bg: #E4EBEF; --rz-tone3-fg: #3E4A52; --rz-tone4-bg: #EDE3F8; --rz-tone4-fg: #5B3A8C; --rz-tone5-bg: #D8F0EC; --rz-tone5-fg: #1D6457; }
[data-theme="dark"] { --rz-tone0-bg: #1F2B5A; --rz-tone0-fg: #B7C6FF; --rz-tone1-bg: #2A3812; --rz-tone1-fg: #D5EF7F; --rz-tone2-bg: #3A2416; --rz-tone2-fg: #F5BE8C; --rz-tone3-bg: #26323A; --rz-tone3-fg: #C7D0D6; --rz-tone4-bg: #2E2442; --rz-tone4-fg: #D4C2F0; --rz-tone5-bg: #15332E; --rz-tone5-fg: #9ED9CE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rz-tone0-bg: #1F2B5A; --rz-tone0-fg: #B7C6FF; --rz-tone1-bg: #2A3812; --rz-tone1-fg: #D5EF7F; --rz-tone2-bg: #3A2416; --rz-tone2-fg: #F5BE8C; --rz-tone3-bg: #26323A; --rz-tone3-fg: #C7D0D6; --rz-tone4-bg: #2E2442; --rz-tone4-fg: #D4C2F0; --rz-tone5-bg: #15332E; --rz-tone5-fg: #9ED9CE; } }

/*
 * rendzio.com — the public site's own layer, on top of design/tokens/tokens.css.
 *
 * The values are the web app's public pages (web/src/components/components.css,
 * the rz-public-*, rz-landing-*, rz-meet-* and rz-work-band rules), which are the
 * W1, W6, W7 and W8 boards in design/canvas/. Colours are tokens only; a number
 * here is a size the boards draw. Desktop is the web's breakpoint, 1024 px.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
h1, h2, h3, p { margin: 0; }
a { color: var(--rz-blue-text); }
img, svg { display: block; }
.rz-ic { flex-shrink: 0; }
.rz-block { display: block; }
.rz-grow { flex-grow: 1; }
.rz-fill-blue { fill: var(--rz-blue); }
.rz-fill-lime { fill: var(--rz-lime); }
.rz-stroke-blue { stroke: var(--rz-blue); }
.rz-stroke-blue-text { stroke: var(--rz-blue-text); }
.rz-ink2 { color: var(--rz-ink2); }
a.rz-btn { text-decoration: none; }
.rz-btn-secondary { background: transparent; }

.rz-skip {
  position: absolute; left: 8px; top: -60px; z-index: 40;
  padding: 8px 14px; border-radius: var(--rz-radius-button);
  background: var(--rz-ink); color: var(--rz-bg); text-decoration: none; font-weight: 600;
}
.rz-skip:focus { top: 8px; }

.rz-desktop-only { display: none !important; }
@media (min-width: 1024px) {
  .rz-mobile-only { display: none !important; }
  .rz-desktop-only { display: flex !important; }
}

.rz-container {
  width: 100%;
  max-width: calc(var(--rz-container) + 40px);
  margin: 0 auto;
  padding: 0 var(--rz-margin);
}
@media (min-width: 1024px) { .rz-container { padding: 0 20px; } }

/* ---------------------------------------------------------------- header */
.rz-public-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--rz-bg);
  border-bottom: 1px solid var(--rz-line);
}
.rz-public-row {
  display: flex; align-items: center; gap: 4px;
  height: 60px; padding: 0 8px 0 var(--rz-margin);
}
.rz-public-row .rz-btn { margin-right: 4px; }
.rz-public-menu { position: relative; }
.rz-public-menu > summary { list-style: none; cursor: pointer; }
.rz-public-menu > summary::-webkit-details-marker { display: none; }
.rz-public-menu-list {
  position: absolute; right: 0; top: calc(var(--rz-hit) + 4px); z-index: 35;
  min-width: 200px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--rz-sheet);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-card);
  box-shadow: var(--rz-shadow-3);
}
.rz-public-menu-list a {
  display: flex; align-items: center; min-height: var(--rz-hit); padding: 0 12px;
  border-radius: var(--rz-radius-input);
  color: var(--rz-ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
.rz-public-menu-list a:hover, .rz-public-menu-list a[aria-current='page'] { background: var(--rz-bg2); }
.rz-public-desk-row { align-items: center; height: 72px; }
.rz-public-desk-gap { width: 40px; flex-shrink: 0; }
.rz-public-links { display: flex; gap: 28px; }
.rz-public-link {
  display: flex; align-items: center; height: 72px;
  font-size: 15px; font-weight: 600; color: var(--rz-ink2); text-decoration: none;
}
.rz-public-link:hover, .rz-public-link[aria-current='page'] {
  color: var(--rz-ink); text-decoration: underline; text-underline-offset: 6px;
}

/* the theme toggle: light by default (data-theme="light" on <html>, set in the
   page), so the system's dark preference is not followed until the visitor asks */
.rz-theme-toggle { color: var(--rz-ink2); }
.rz-theme-toggle:hover { background: var(--rz-tint); color: var(--rz-ink); }
.rz-theme-toggle > span { display: flex; }
.rz-theme-sun { display: none !important; }
[data-theme="dark"] .rz-theme-sun { display: flex !important; }
[data-theme="dark"] .rz-theme-moon { display: none !important; }

/* ---------------------------------------------------------------- page body */
.rz-public-body { padding: var(--rz-space-5) 0 var(--rz-margin); }
.rz-public-body > .rz-container { display: flex; flex-direction: column; gap: 36px; }
@media (min-width: 1024px) {
  .rz-public-body { padding: 36px 0 80px; }
  .rz-public-body-hero { padding-top: var(--rz-space-12); }
  .rz-public-body > .rz-container { gap: 64px; }
}
.rz-section { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .rz-section { gap: 20px; } }
.rz-page-head { display: flex; flex-direction: column; gap: 10px; }
.rz-narrow { width: 100%; max-width: 760px; }
.rz-centre { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- W1 hero */
.rz-landing-hero { display: flex; flex-direction: column; gap: var(--rz-space-4); }
.rz-landing-words { display: flex; flex-direction: column; gap: var(--rz-space-4); min-width: 0; }
.rz-landing-actions { display: flex; flex-direction: column; gap: 10px; }
.rz-landing-note { display: flex; align-items: center; gap: var(--rz-space-2); color: var(--rz-ink3); }
.rz-landing-hero .rz-meet { order: -1; aspect-ratio: 358 / 280; border-radius: var(--rz-radius-hero); }
@media (min-width: 1024px) {
  .rz-landing-hero { flex-direction: row; align-items: center; gap: 60px; }
  .rz-landing-hero .rz-meet { order: 2; width: 560px; aspect-ratio: 560 / 420; border-radius: var(--rz-radius-code-panel); }
  .rz-landing-words { width: 580px; flex-shrink: 0; gap: var(--rz-space-6); }
  .rz-landing-headline { font-size: 56px; line-height: 60px; }
  .rz-landing-lede { font-size: 18px; line-height: 28px; max-width: 520px; }
  .rz-landing-actions { flex-direction: row; gap: var(--rz-space-3); }
  .rz-landing-actions > .rz-btn { width: auto; }
}

/* ---------------------------------------------------------------- the meet illustration */
.rz-meet { position: relative; width: 100%; overflow: hidden; flex-shrink: 0; }
.rz-map { position: absolute; inset: 0; overflow: hidden; background: var(--rz-map-ground); }
.rz-map-svg { width: 100%; height: 100%; }
.rz-map-ground { fill: var(--rz-map-ground); }
.rz-map-water { fill: var(--rz-map-water); }
.rz-map-park { fill: var(--rz-map-park); }
.rz-map-road path { stroke: var(--rz-map-road); stroke-width: 6; fill: none; stroke-linecap: round; }
.rz-map-road-edge path { stroke: var(--rz-map-road-edge); stroke-width: 9; fill: none; stroke-linecap: round; }
.rz-map-you { fill: var(--rz-blue); stroke: var(--rz-bg); stroke-width: 3; }
.rz-map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  color: var(--rz-blue);
  filter: drop-shadow(0 2px 3px rgba(var(--rz-shadow-ink), 0.25));
}
.rz-meet-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: var(--rz-space-2) 14px var(--rz-space-2) var(--rz-space-2);
  background: var(--rz-surface); color: var(--rz-ink);
  border-radius: var(--rz-radius-card); box-shadow: var(--rz-shadow-3);
}
.rz-meet-card-post { left: var(--rz-space-4); top: var(--rz-space-4); }
.rz-meet-card-way { right: var(--rz-space-4); top: 60%; }
.rz-meet-lines { display: flex; flex-direction: column; }
.rz-meet-rating { display: flex; align-items: center; gap: var(--rz-space-1); }
.rz-meet-rating .rz-ic { color: var(--rz-ink); fill: currentColor; }
.rz-meet-code {
  position: absolute; left: var(--rz-space-4); bottom: var(--rz-space-4);
  display: flex; align-items: center; gap: var(--rz-space-2);
  padding: var(--rz-space-2) 14px;
  background: var(--rz-lime); color: var(--rz-on-lime);
  border-radius: var(--rz-radius-banner);
}
.rz-meet-digits { font-size: 16px; line-height: 24px; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.rz-live-dot { display: inline-block; flex-shrink: 0; }
.rz-live-dot-on-lime { background: var(--rz-on-lime); box-shadow: none; }

.rz-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
}
.rz-tone0 { background: var(--rz-tone0-bg); color: var(--rz-tone0-fg); }
.rz-tone2 { background: var(--rz-tone2-bg); color: var(--rz-tone2-fg); }

/* ---------------------------------------------------------------- cards */
.rz-cards { display: flex; flex-direction: column; gap: 14px; }
.rz-cards > .rz-card { display: flex; flex-direction: column; gap: 10px; padding: var(--rz-space-5); }
@media (min-width: 1024px) {
  .rz-cards { flex-direction: row; align-items: stretch; gap: var(--rz-space-6); }
  .rz-cards > .rz-card { flex: 1 1 0; min-width: 0; }
}
.rz-values { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rz-values > .rz-card { display: flex; flex-direction: column; gap: 10px; padding: var(--rz-space-5); }
@media (min-width: 640px) { .rz-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rz-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rz-space-6); } }
.rz-mark-line { color: var(--rz-ink3); }

/* the mission, said once and large */
.rz-mission {
  display: flex; flex-direction: column; gap: var(--rz-space-3);
  padding: var(--rz-space-6) var(--rz-space-5);
  border-radius: var(--rz-radius-hero);
  background: var(--rz-tint);
}
@media (min-width: 1024px) { .rz-mission { padding: 40px 48px; } }
.rz-mission-quote { max-width: 820px; }
.rz-overline { color: var(--rz-ink3); }

/* ---------------------------------------------------------------- W6 how it works */
.rz-step-cols { display: flex; flex-direction: column; gap: 36px; }
@media (min-width: 1024px) { .rz-step-cols { flex-direction: row; gap: 64px; } .rz-step-cols > * { flex: 1 1 0; min-width: 0; } }
.rz-steps { display: flex; flex-direction: column; gap: var(--rz-space-4); list-style: none; margin: 0; padding: 0; }
.rz-step { display: flex; gap: var(--rz-space-3); align-items: flex-start; }
.rz-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rz-blue-tint); color: var(--rz-blue-tint-text);
  font-size: 14px; font-weight: 700;
}
.rz-step-lines { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.rz-step-title { display: flex; align-items: center; gap: 6px; }
.rz-step-title .rz-ic { color: var(--rz-blue-text); }

.rz-card-link { color: inherit; text-decoration: none; }
.rz-card-link:hover { border-color: var(--rz-line2); box-shadow: var(--rz-shadow-2); }
.rz-stuck { display: flex; align-items: center; gap: var(--rz-space-3); }
.rz-stuck-lines { display: flex; flex-direction: column; flex-grow: 1; }

/* ---------------------------------------------------------------- W7 help */
.rz-help-pair { display: flex; flex-direction: column; gap: var(--rz-space-3); }
@media (min-width: 640px) { .rz-help-pair { flex-direction: row; } }
.rz-help-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--rz-space-2);
  padding: 18px; color: var(--rz-ink); text-decoration: none;
}
.rz-help-card:hover { border-color: var(--rz-line2); box-shadow: var(--rz-shadow-2); }

/* ---------------------------------------------------------------- W8 not found, and the plain pages */
.rz-lost { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--rz-space-3); padding: 40px 0 48px; }
.rz-lost > p { max-width: 380px; }
.rz-lost .rz-ic { color: var(--rz-blue); }
.rz-lost-actions { display: flex; gap: var(--rz-space-3); margin-top: var(--rz-space-2); }
@media (min-width: 1024px) { .rz-lost { padding: 60px 0 40px; } }
.rz-prose { display: flex; flex-direction: column; gap: var(--rz-space-4); }

/* ---------------------------------------------------------------- the work band */
.rz-work-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-6);
  padding: var(--rz-space-5);
  border-radius: var(--rz-radius-hero);
  background: var(--rz-blue);
}
.rz-work-band-lines { display: flex; flex-direction: column; gap: var(--rz-space-2); flex: 1 1 320px; }
.rz-work-band-title { color: var(--rz-on-blue); }
.rz-work-band-body { color: var(--rz-on-blue-muted); }
@media (min-width: 1024px) { .rz-work-band { padding: 28px; flex-wrap: nowrap; } }

/* ---------------------------------------------------------------- footer */
.rz-footer { background: var(--rz-bg2); border-top: 1px solid var(--rz-line); }
.rz-footer-inner { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; padding-bottom: 32px; }
.rz-footer-top { display: flex; flex-direction: column; gap: 24px; }
.rz-footer-brand { display: flex; flex-direction: column; gap: var(--rz-space-2); }
.rz-footer-strap { color: var(--rz-ink3); }
.rz-footer-col { display: flex; flex-direction: column; gap: var(--rz-space-3); }
.rz-footer-col a { color: var(--rz-ink2); text-decoration: none; font-size: 15px; line-height: 21px; }
.rz-footer-col a:hover { text-decoration: underline; }
.rz-hairline { border: 0; margin: 0; }
.rz-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.rz-footer-legal-links { display: flex; gap: 20px; }
.rz-footer-legal a { color: inherit; text-decoration: none; }
.rz-footer-legal a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .rz-footer-inner { gap: 28px; padding-top: 48px; padding-bottom: 40px; }
  .rz-footer-top { flex-direction: row; gap: 40px; align-items: flex-start; }
  .rz-footer-brand { width: 320px; flex-shrink: 0; }
  .rz-footer-col { width: 220px; }
}