/* Generated by @dayshift/ui build-css. Do not edit. */
/* fonts.css */
/*
 * Self-hosted fonts (the CSP allows fonts from our own origin only). Files are copied next to
 * the stylesheet as fonts/… by scripts/build-css.mjs. Latin subsets only.
 */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Source Sans 3 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* tokens.css */
/*
 * Skillmatch design tokens (docs/08 §4). The only place colours, sizes and effects are defined:
 * everything else uses these variables (stylelint enforces it).
 *
 * Palette from the V1 prototypes, with the UX-audit fixes (flows/50 UX-60, UX-64, UX-84, UX-132):
 * a text-safe amber (--signal-ink), on-fill text tokens per theme (--on-*), fills for filled
 * buttons (--*-fill), a 3:1 boundary colour (--rule-strong), a two-colour focus ring, z-index
 * layers, motion and hatch patterns. Square edges: --radius is 0.
 *
 * Themes: light by default; dark from the OS unless the page says data-theme="light", or always
 * with data-theme="dark".
 */
:root {
  color-scheme: light;

  /* Surfaces and text */
  --ground: #e9ebec;
  --paper: #fff;
  --ink: #111418;
  --ink-2: #5a626b;
  --hover: #f4f5f6;
  --selected: #eceef0;

  /* Rules: hairlines are decoration; --rule-strong carries meaning (inputs, "not free") */
  --rule: #d9dcdf;
  --rule-strong: #767e86;

  /* Signal (amber): fills and marks; --signal-ink for text */
  --signal: #b86e00;
  --signal-ink: #955800;
  --signal-soft: #faefd9;
  --signal-fill: #955800;

  /* Semantic */
  --ok: #2c6a45;
  --ok-soft: #e3f0e7;
  --ok-fill: #2c6a45;
  --info: #2d5b86;
  --info-soft: #e2ebf4;
  --bad: #a6322a;
  --bad-soft: #f7e3e1;
  --bad-fill: #a6322a;

  /* Text on filled buttons and marks */
  --on-ink: #fff;
  --on-signal: #fff;
  --on-ok: #fff;
  --on-bad: #fff;

  /* Disabled (never by opacity) */
  --disabled-fg: #5a626b;
  --disabled-bg: #eceef0;

  /* The operations bar: dark in both themes (not redefined for dark), its wordmark's amber */
  --chrome: #111418;
  --on-chrome: #fff;
  --on-chrome-2: #c4c9ce;
  --chrome-mark: #f0a93a;
  --chrome-edge: #2a2f34;

  /* States drawn on the chrome (the landing page's shape key): the dark theme's hues, since the
     chrome is dark in both themes. Amber on chrome is --chrome-mark. */
  --on-chrome-ok: #6cc08f;
  --on-chrome-info: #8db6de;

  /* Overlays */
  --scrim: rgb(17 20 24 / 45%);
  --overlay-shadow: 0 12px 32px rgb(17 20 24 / 22%);

  /* Focus: a two-colour ring that shows on any fill (UX-84) */
  --focus-outer: #b86e00;
  --focus-inner: #111418;
  --focus-shadow: 0 0 0 2px var(--focus-inner);

  /* Type */
  --display: 'Archivo Variable', 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body:
    'Source Sans 3 Variable', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, menlo, monospace;
  --display-stretch: 85%;
  --fs-1: 12px;
  --fs-2: 13.5px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 22px;
  --fs-6: 28px;
  --fs-7: 34px;

  /* The marketing scale (docs/08 §4): the landing page's headline, section titles and ledes.
     Fluid between the phone and desktop sizes; used by marketing.css only, never by the app. */
  --fs-hero: clamp(40px, 5vw, 64px);
  --fs-m3: clamp(32px, 3.8vw, 48px);
  --fs-m2: clamp(28px, 2.7vw, 34px);
  --fs-lede: clamp(18px, 1.6vw, 20px);

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* The larger steps: section padding on the landing page (marketing.css only) */
  --sp-8: 72px;
  --sp-9: 112px;

  /* Rules, radius, edges */
  --hair: 1px solid var(--rule);
  --rule-major: 2px solid var(--ink);
  --strip-edge: 3px;
  --radius: 0;
  --edge-sheet: 3px solid var(--ink);

  /* Hit areas */
  --hit-desktop: 40px;
  --hit-touch: 44px;

  /* The worker's phone tab bar: 56px of tabs plus its 2px top rule */
  --tabbar-height: 58px;
  /* The worker's top bar at tablet width (768-1023px): a touch-sized row and its hairline. */
  --topbar-height: calc(var(--hit-touch) + 1px);

  /* Layers */
  --z-sticky: 10;
  --z-tabbar: 20;
  --z-sheet: 40;
  --z-toast: 50;
  --z-modal: 60;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /*
   * Site signage (docs/08 "Signed-out pages: Site signage", 25 Oct 2026): the signed-out pages'
   * identity. One signal, safety yellow, and it always carries ink text, never white; amber is
   * the signal as text on a light surface; green and red are states only, always with a shape.
   * Used by marketing.css and signage.css; the app does not read these (a later package does).
   */
  --sg-ink: #111418;
  --sg-ink-2: #4f5760;
  --sg-paper: #fff;
  --sg-ground: #ecedee;
  --sg-wash: #f4f5f6;
  --sg-hair: #c9cdd2;
  --sg-rule-strong: #767e86;
  --sg-bar: #111418;
  --sg-on-bar: #fff;
  --sg-on-bar-2: #c4c9ce;
  --sg-bar-edge: #3a3f45;
  --sg-yellow: #f6c200;
  --sg-on-yellow: #111418;
  --sg-amber: #7a4700;
  --sg-green: #1f6b3a;
  --sg-red: #a3261a;
  --sg-on-state: #fff;
  --sg-focus-outer: #111418;
  --sg-focus-inner: #f6c200;
  --sg-photo-a: #d9dbde;
  --sg-photo-b: #e9eaec;

  /* Shape patterns (docs/05 §3: held is hatched, open is dashed, draft is dotted) */
  --hatch-held: repeating-linear-gradient(135deg, var(--signal) 0 2px, transparent 2px 5px);
  --hatch-notfree: repeating-linear-gradient(135deg, var(--rule-strong) 0 1px, transparent 1px 6px);
  /* A photograph's place: hatched until the real photograph is supplied */
  --hatch-photo: repeating-linear-gradient(
    135deg,
    var(--sg-photo-a) 0 2px,
    var(--sg-photo-b) 2px 14px
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --ground: #0c0e10;
    --paper: #16191c;
    --ink: #eceef0;
    --ink-2: #9ea6ae;
    --hover: #1d2125;
    --selected: #22272c;
    --rule: #2a2f34;
    --rule-strong: #6a727a;
    --signal: #f0a93a;
    --signal-ink: #f0a93a;
    --signal-soft: #33260f;
    --signal-fill: #f0a93a;
    --ok: #6cc08f;
    --ok-soft: #15291d;
    --ok-fill: #6cc08f;
    --info: #8db6de;
    --info-soft: #17232f;
    --bad: #f08a80;
    --bad-soft: #3a1c19;
    --bad-fill: #f08a80;
    --on-ink: #0c0e10;
    --on-signal: #0c0e10;
    --on-ok: #0c0e10;
    --on-bad: #0c0e10;
    --disabled-fg: #9ea6ae;
    --disabled-bg: #22272c;
    --scrim: rgb(0 0 0 / 60%);
    --sg-ink: #f4f5f6;
    --sg-ink-2: #b4bbc2;
    --sg-paper: #111418;
    --sg-ground: #0a0c0e;
    --sg-wash: #1a1e23;
    --sg-hair: #343a41;
    --sg-rule-strong: #8a929a;
    --sg-bar: #262b31;
    --sg-on-bar: #fff;
    --sg-on-bar-2: #c4c9ce;
    --sg-bar-edge: #4a5058;
    --sg-amber: #f6c200;
    --sg-green: #6cc08f;
    --sg-red: #f08a80;
    --sg-on-state: #0c0e10;
    --sg-focus-outer: #f6c200;
    --sg-focus-inner: #111418;
    --sg-photo-a: #1e2328;
    --sg-photo-b: #171b1f;
    --overlay-shadow: 0 12px 32px rgb(0 0 0 / 55%);
    --focus-outer: #f0a93a;
    --focus-inner: #0c0e10;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #0c0e10;
  --paper: #16191c;
  --ink: #eceef0;
  --ink-2: #9ea6ae;
  --hover: #1d2125;
  --selected: #22272c;
  --rule: #2a2f34;
  --rule-strong: #6a727a;
  --signal: #f0a93a;
  --signal-ink: #f0a93a;
  --signal-soft: #33260f;
  --signal-fill: #f0a93a;
  --ok: #6cc08f;
  --ok-soft: #15291d;
  --ok-fill: #6cc08f;
  --info: #8db6de;
  --info-soft: #17232f;
  --bad: #f08a80;
  --bad-soft: #3a1c19;
  --bad-fill: #f08a80;
  --on-ink: #0c0e10;
  --on-signal: #0c0e10;
  --on-ok: #0c0e10;
  --on-bad: #0c0e10;
  --disabled-fg: #9ea6ae;
  --disabled-bg: #22272c;
  --scrim: rgb(0 0 0 / 60%);
  --sg-ink: #f4f5f6;
  --sg-ink-2: #b4bbc2;
  --sg-paper: #111418;
  --sg-ground: #0a0c0e;
  --sg-wash: #1a1e23;
  --sg-hair: #343a41;
  --sg-rule-strong: #8a929a;
  --sg-bar: #262b31;
  --sg-on-bar: #fff;
  --sg-on-bar-2: #c4c9ce;
  --sg-bar-edge: #4a5058;
  --sg-amber: #f6c200;
  --sg-green: #6cc08f;
  --sg-red: #f08a80;
  --sg-on-state: #0c0e10;
  --sg-focus-outer: #f6c200;
  --sg-focus-inner: #111418;
  --sg-photo-a: #1e2328;
  --sg-photo-b: #171b1f;
  --overlay-shadow: 0 12px 32px rgb(0 0 0 / 55%);
  --focus-outer: #f0a93a;
  --focus-inner: #0c0e10;
}

/* base.css */
/* Base: the ground, type, focus and motion. No layout or component styles here. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--fs-3) / 1.45 var(--body);
  font-variant-numeric: tabular-nums;
  /* Landscape phones: keep content clear of the notch (the viewport covers the whole screen). */
  padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-shadow);
}

/* Visually hidden, still announced */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The first thing a keyboard user reaches */
.ds-skip {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: var(--z-modal);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.ds-skip:focus {
  top: var(--sp-2);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* components.css */
/*
 * Components (docs/08). One sheet per view; structure from type, rules and alignment. The only
 * filled blocks are strips; the only elevated things are overlays (dialog, sheet, toast).
 */

/* ── App frames ─────────────────────────────────────────────────────────────────────────── */

.ds-app {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 100dvh;
  max-width: 1440px;
  margin: 0 auto;
}

.ds-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  border-right: var(--hair);
}

.ds-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.ds-brand b {
  font: 800 var(--fs-5) / 1 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-brand span {
  font: 500 var(--fs-1) / 1.3 var(--mono);
  color: var(--ink-2);
}

.ds-nav {
  display: flex;
  flex-direction: column;
}

.ds-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--hit-desktop);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-left: 3px solid transparent;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}

.ds-nav__link:hover {
  color: var(--ink);
}

.ds-nav__link[aria-current='page'] {
  border-left-color: var(--ink);
  color: var(--ink);
}

.ds-nav__count {
  font: 500 var(--fs-1) / 1.6 var(--mono);
  color: var(--signal-ink);
}

.ds-rail__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--hair);
  font-size: var(--fs-2);
  color: var(--ink-2);
}

.ds-rail__foot b {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ds-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
}

.ds-main:focus {
  outline: none;
}

/* Touch-sized links wherever the pointer may be a finger (everything below desktop width). */
@media (width <= 1023px) {
  .ds-nav__link {
    min-height: var(--hit-touch);
  }
}

/*
 * One navigation, reshaped by width (decided 26 Oct). The left sidebar from 768px up in every
 * frame. Below 768px the business and operations frames show a "Menu" link that opens the same
 * navigation as a slide-in panel from the left (:target, so it needs no script; /shell-menu.js adds
 * focus handling and Escape); the worker frame has a tab bar along the bottom.
 */
.ds-nav__glyph {
  display: none;
  width: 18px;
  height: 18px;
}

.ds-topbar,
.ds-menubtn,
.ds-menuclose,
.ds-scrim {
  display: none;
}

.ds-menubtn,
.ds-menuclose {
  align-items: center;
  justify-content: center;
  min-height: var(--hit-touch);
  padding: 0 var(--sp-4);
  border: var(--rule-major);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

@media (width <= 767px) {
  .ds-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  /* The bar with the brand and "Menu"; it stays at the top as the page scrolls. */
  .ds-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--topbar-height);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: var(--hair);
    background: var(--paper);
  }

  :root:has(.ds-topbar) {
    scroll-padding-top: var(--topbar-height);
  }

  .ds-menubtn,
  .ds-menuclose {
    display: inline-flex;
  }

  .ds-menuclose {
    align-self: flex-end;
  }

  /* The rail becomes the panel: off to the left, hidden from everything until it is the target. */
  .ds-app:not(.ds-app--worker) .ds-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-sheet);
    width: min(20rem, 85vw);
    overflow-y: auto;
    border-right: var(--rule-major);
    background: var(--paper);
    visibility: hidden;
    transform: translateX(-100%);
  }

  .ds-app:not(.ds-app--worker) .ds-rail:target {
    visibility: visible;
    transform: none;
  }

  .ds-app:not(.ds-app--worker) .ds-rail > .ds-brand {
    display: none;
  }

  /* The ground behind the open panel; tapping it closes the menu. */
  .ds-rail:target + .ds-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sheet) - 1);
    display: block;
    background: var(--scrim);
  }

  /* The operations bar carries "Menu" at its end, and the status line wraps beneath. */
  .ds-opsbar .ds-menubtn {
    margin-left: auto;
    border-color: var(--on-chrome);
    color: var(--on-chrome);
  }

  .ds-opsbar__status {
    flex-basis: 100%;
    margin-left: 0;
  }
}

@media (width <= 767px) and (prefers-reduced-motion: no-preference) {
  .ds-app:not(.ds-app--worker) .ds-rail {
    transition:
      transform var(--dur-base) var(--ease),
      visibility 0s linear var(--dur-base);
  }

  .ds-app:not(.ds-app--worker) .ds-rail:target {
    transition:
      transform var(--dur-base) var(--ease),
      visibility 0s;
  }
}

@media (width <= 767px) {
  /* The worker's tab bar is fixed to the bottom (out of flow): the page is the only row, and
     nothing covers the top of it. */
  .ds-app--worker {
    grid-template-rows: 1fr;
  }

  .ds-app--worker .ds-rail {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-tabbar);
    min-height: var(--topbar-height);
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0)
      env(safe-area-inset-left, 0);
    border-right: 0;
    border-top: var(--rule-major);
    background: var(--paper);
  }

  .ds-app--worker .ds-rail__foot {
    display: none;
  }

  .ds-app--worker .ds-brand {
    display: none;
  }

  .ds-app--worker .ds-nav {
    display: grid;
    flex: 1;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .ds-app--worker .ds-nav__link {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: var(--sp-1);
    border-left: 0;
    border-top: 3px solid transparent;
    font: 600 var(--fs-1) / 1.1 var(--body);
    text-align: center;
    overflow-wrap: anywhere;
  }

  .ds-app--worker .ds-nav__link[aria-current='page'] {
    border-left-color: transparent;
    border-top-color: var(--ink);
  }

  .ds-app--worker .ds-nav__glyph {
    display: block;
  }

  /* The count sits by the glyph, as a number (its words stay for screen readers). */
  .ds-app--worker .ds-nav__count {
    position: absolute;
    top: var(--sp-1);
    left: calc(50% + 10px);
    font-weight: 700;
    line-height: 1;
  }

  .ds-app--worker .ds-main {
    /* Clear of the tab bar, above the home indicator. */
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
  }
}

/* ── Page structure ─────────────────────────────────────────────────────────────────────── */

.ds-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: var(--rule-major);
}

.ds-head h1 {
  margin-top: var(--sp-1);
  font: 800 var(--fs-7) / 1.02 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ds-head h1:focus {
  outline: none;
}

.ds-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ds-crumb {
  font: 500 var(--fs-1) / 1.2 var(--mono);
  color: var(--ink-2);
}

.ds-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: var(--hair);
}

.ds-summary b {
  font: 800 var(--fs-5) / 1 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-body {
  padding: 0 var(--sp-6) var(--sp-7);
}

@media (width <= 640px) {
  .ds-head,
  .ds-summary,
  .ds-body {
    padding-inline: var(--sp-4);
  }

  .ds-head h1 {
    font-size: var(--fs-6);
  }
}

.ds-section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-2);
  border-bottom: 1px solid var(--ink);
}

.ds-section h2 {
  font: 700 var(--fs-4) / 1.2 var(--body);
}

/* Prose and controls under a section heading sit clear of its rule (tables and lists run flush). */
.ds-section + p,
.ds-section + .ds-stack,
.ds-section + .ds-row {
  margin-top: var(--sp-3);
}

.ds-eyebrow {
  font: 600 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

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

.ds-mono {
  font-family: var(--mono);
  font-size: var(--fs-2);
}

.ds-dl {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
}

.ds-dl > div {
  display: contents;
}

.ds-dl dt,
.ds-dl dd {
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

.ds-dl dt {
  padding-right: var(--sp-4);
  color: var(--ink-2);
  font-size: var(--fs-2);
}

@media (width <= 560px) {
  .ds-dl {
    grid-template-columns: 1fr;
  }

  .ds-dl dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

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

/* The same space either side of the rule, so a list's end column ("Done", "With us") never
   touches it. */
.ds-split > :first-child {
  padding-right: var(--sp-5);
}

.ds-split > :last-child {
  padding-left: var(--sp-5);
  border-left: var(--hair);
}

@media (width <= 1023px) {
  .ds-split {
    grid-template-columns: 1fr;
  }

  .ds-split > :first-child {
    padding-right: 0;
  }

  .ds-split > :last-child {
    padding-left: 0;
    border-left: 0;
    border-top: var(--rule-major);
  }
}

/* ── Tables and ruled lists ─────────────────────────────────────────────────────────────── */

.ds-table-wrap {
  /* The containing block for anything absolutely placed inside (a visually hidden label in a
     cell): without it such a span is placed against the page, escapes this box's clipping and
     widens the page on a phone. */
  position: relative;
  overflow-x: auto;
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
}

.ds-table caption {
  padding: var(--sp-3) 0;
  text-align: left;
  font-weight: 700;
}

.ds-table th {
  padding: var(--sp-3) var(--sp-3) var(--sp-2) 0;
  border-bottom: 1px solid var(--ink);
  font: 600 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
}

.ds-table td {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: var(--hair);
  vertical-align: top;
}

.ds-table .ds-num {
  text-align: right;
}

.ds-table th button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* A whole row is one link: the first cell's link is stretched over the row. */
.ds-table tr[data-row-link] {
  position: relative;
}

.ds-table tr[data-row-link]:hover td {
  background: var(--hover);
}

.ds-row-link {
  font-weight: 600;
  text-decoration: none;
}

.ds-row-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ds-table tr[data-row-link]:focus-within td {
  background: var(--selected);
}

/* Attention and critical rows: a shape difference, not just colour (single vs double edge). */
.ds-table tr[data-tone='attention'] td:first-child {
  border-left: var(--strip-edge) solid var(--signal);
  padding-left: var(--sp-2);
}

.ds-table tr[data-tone='critical'] td:first-child {
  border-left: var(--strip-edge) double var(--bad);
  padding-left: var(--sp-2);
}

.ds-rowlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-rowlist > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--hit-touch);
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

.ds-rowlist > li:hover {
  background: var(--hover);
}

/* Money */
.ds-ledger {
  width: 100%;
  border-collapse: collapse;
}

.ds-ledger td {
  padding: var(--sp-2) 0;
  border-bottom: var(--hair);
}

.ds-ledger td:last-child {
  text-align: right;
  font-family: var(--mono);
}

.ds-ledger tfoot td {
  padding-top: var(--sp-3);
  border-top: var(--rule-major);
  border-bottom: 0;
  font: 800 var(--fs-5) / 1.1 var(--display);
  font-stretch: var(--display-stretch);
}

/* ── Strips: the only filled block ──────────────────────────────────────────────────────── */

.ds-strip {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--strip-edge) solid var(--info);
  background: var(--info-soft);
}

.ds-strip__title {
  font-weight: 700;
}

.ds-strip__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ds-strip--warn {
  border-left-color: var(--signal);
  background: var(--signal-soft);
}

.ds-strip--bad {
  border-left-style: double;
  border-left-color: var(--bad);
  background: var(--bad-soft);
}

.ds-strip--ok {
  border-left-color: var(--ok);
  background: var(--ok-soft);
}

.ds-strip__glyph {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

/* ── Status markers: shape carries meaning, colour supports it ──────────────────────────── */

.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ds-status__glyph {
  flex: none;
  width: 12px;
  height: 12px;
  overflow: visible;
}

.ds-status--ok {
  color: var(--ok);
}

.ds-status--signal {
  color: var(--signal-ink);
}

.ds-status--bad {
  color: var(--bad);
}

.ds-status--info {
  color: var(--info);
}

.ds-status--neutral {
  color: var(--ink-2);
}

/* ── Buttons and links ──────────────────────────────────────────────────────────────────── */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--hit-desktop);
  padding: 0 var(--sp-4);
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ds-btn:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.ds-btn--line {
  background: transparent;
  color: var(--ink);
}

.ds-btn--line:hover {
  background: var(--hover);
  border-color: var(--ink);
}

.ds-btn--quiet {
  border-color: var(--rule-strong);
  background: transparent;
  color: var(--ink);
}

.ds-btn--quiet:hover {
  background: var(--hover);
  border-color: var(--ink);
}

.ds-btn--signal {
  border-color: var(--signal-fill);
  background: var(--signal-fill);
  color: var(--on-signal);
}

.ds-btn--success {
  border-color: var(--ok-fill);
  background: var(--ok-fill);
  color: var(--on-ok);
}

.ds-btn--danger {
  border-color: var(--bad-fill);
  background: var(--bad-fill);
  color: var(--on-bad);
}

.ds-btn--danger-line {
  border-color: var(--bad);
  background: transparent;
  color: var(--bad);
}

.ds-btn--signal:hover,
.ds-btn--success:hover,
.ds-btn--danger:hover {
  border-color: var(--ink);
}

.ds-btn--danger-line:hover {
  background: var(--bad-soft);
}

.ds-btn--sm {
  min-height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-2);
}

.ds-btn--lg {
  min-height: 48px;
}

.ds-btn--xl {
  min-height: 56px;
  font-size: var(--fs-4);
}

.ds-btn--block {
  width: 100%;
}

/* Disabled stays focusable and readable (UX-66): no opacity. */
.ds-btn[aria-disabled='true'] {
  border-color: var(--disabled-bg);
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  cursor: not-allowed;
}

.ds-btn[aria-busy='true'] {
  cursor: progress;
}

/* A button marked busy by /submit-feedback.js (no spinner of its own): the disabled look and an arc. */
.ds-btn[aria-busy='true']:not(:has(.ds-btn__progress)) {
  border-color: var(--disabled-bg);
  background: var(--disabled-bg);
  color: var(--disabled-fg);
}

.ds-btn[aria-busy='true']:not(:has(.ds-btn__progress))::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: var(--sp-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ds-spin 800ms linear infinite;
}

/* An SVG arc (no radius on boxes). */
.ds-btn__progress {
  width: 14px;
  height: 14px;
  animation: ds-spin 800ms linear infinite;
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

.ds-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-link--standalone {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

button.ds-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

@media (pointer: coarse) {
  .ds-btn {
    min-height: var(--hit-touch);
  }

  .ds-btn--sm {
    min-height: var(--hit-touch);
  }

  .ds-link--standalone {
    min-height: var(--hit-touch);
  }
}

/* The one action bar: pinned to the bottom on phones, primary nearest the thumb. */
.ds-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: var(--hair);
}

@media (width <= 767px) {
  .ds-actionbar--pin {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    flex-direction: row-reverse;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0));
    margin-inline: calc(-1 * var(--sp-4));
    background: var(--paper);
    border-top: var(--rule-major);
  }

  .ds-actionbar--pin > * {
    flex: 1 1 auto;
  }

  /* In the worker frame it pins above the tab bar, which already clears the home indicator. */
  .ds-app--worker .ds-actionbar--pin {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
    padding-bottom: var(--sp-3);
  }
}

/* ── Forms ──────────────────────────────────────────────────────────────────────────────── */

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
}

.ds-field__label {
  font-weight: 600;
}

.ds-field__hint {
  color: var(--ink-2);
  font-size: var(--fs-2);
}

.ds-field__error {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--bad);
  font-size: var(--fs-2);
  font-weight: 600;
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: var(--hit-desktop);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}

.ds-textarea {
  min-height: 120px;
  resize: vertical;
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover {
  border-color: var(--ink);
}

.ds-input[aria-invalid='true'],
.ds-select[aria-invalid='true'],
.ds-textarea[aria-invalid='true'] {
  border: 2px solid var(--bad);
}

.ds-input:read-only {
  background: var(--hover);
}

@media (pointer: coarse) {
  .ds-input,
  .ds-select {
    min-height: var(--hit-touch);
  }
}

/* Yes / No (and any two-to-four way) choice as a segmented control of real radios. */
.ds-segmented {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-segmented legend {
  margin-bottom: var(--sp-1);
  padding: 0;
  font-weight: 600;
}

.ds-segmented__options {
  display: inline-flex;
}

.ds-segmented__option {
  position: relative;
}

.ds-segmented__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ds-segmented__option span {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-desktop);
  padding: 0 var(--sp-4);
  border: 2px solid var(--ink);
  font-weight: 700;
}

.ds-segmented__option + .ds-segmented__option span {
  border-left-width: 0;
}

.ds-segmented__option input:checked + span {
  background: var(--ink);
  color: var(--on-ink);
}

.ds-segmented__option input:focus-visible + span {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .ds-segmented__option span {
    min-height: var(--hit-touch);
  }
}

/* A single tick box with its label beside it: a real checkbox, sized to be hit on a phone. */
.ds-check {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  cursor: pointer;
}

.ds-check input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.ds-check input:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

/* A form-level problem, said once at the top: the same voice as a field's error. */
.ds-error {
  color: var(--bad);
  font-weight: 600;
}

/* ── Overlays: the only elevated things ─────────────────────────────────────────────────── */

.ds-dialog {
  width: min(560px, calc(100vw - var(--sp-6)));
  max-height: calc(100vh - var(--sp-7));
  padding: 0;
  border: 0;
  border-top: var(--edge-sheet);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--overlay-shadow);
}

.ds-dialog::backdrop {
  background: var(--scrim);
}

.ds-dialog__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  border-bottom: var(--hair);
}

.ds-dialog__head h2 {
  font: 800 var(--fs-5) / 1.1 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-dialog__body {
  padding: var(--sp-4) var(--sp-5);
}

.ds-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: var(--hair);
}

/* Phones: the same dialog as a bottom sheet. */
@media (width <= 767px) {
  .ds-dialog--sheet {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    max-height: 85vh;
  }

  .ds-dialog--sheet .ds-dialog__foot {
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
  }
}

.ds-toasts {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(420px, calc(100vw - var(--sp-6)));
}

.ds-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  /* The edge is decoration: the message carries the meaning (so no 3:1 needed against ink). */
  border-left: var(--strip-edge) solid var(--signal);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--overlay-shadow);
}

.ds-toast button {
  min-height: var(--hit-touch);
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

@media (width <= 767px) {
  .ds-toasts {
    left: var(--sp-4);
    max-width: none;
  }

  /* Above the worker's tab bar. */
  :root:has(.ds-app--worker) .ds-toasts {
    bottom: calc(var(--tabbar-height) + var(--sp-2) + env(safe-area-inset-bottom, 0));
  }
}

/* ── States ─────────────────────────────────────────────────────────────────────────────── */

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
  max-width: 60ch;
}

.ds-empty__title {
  font: 700 var(--fs-4) / 1.3 var(--body);
}

.ds-skel {
  display: flex;
  flex-direction: column;
}

.ds-skel__row {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

.ds-skel__bar {
  height: 12px;
  background: var(--rule);
  animation: ds-pulse 1.4s var(--ease) infinite alternate;
}

.ds-skel__bar--lg {
  width: 40%;
}

.ds-skel__bar--md {
  width: 25%;
}

.ds-skel__bar--sm {
  width: 15%;
}

@keyframes ds-pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.45;
  }
}

/* The standalone sheet (sign-in, invitations, notices, errors) is drawn in signage.css. */

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* A short list of plain statements (what holds whichever way a choice goes). */
.ds-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding-left: var(--sp-5);
}

/* ── Link rows: a ruled list whose rows are links (docs/08 §2 "ruled row list") ────────────── */

.ds-rowlist > li.ds-linkrow {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
}

.ds-linkrow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ds-linkrow .ds-row-link {
  color: var(--ink);
  font-weight: 700;
}

/* A row that is one form's action (FormRow): the button looks and stretches as the link does. */
.ds-formrow {
  margin: 0;
}

.ds-row-link--button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* An unread notice reads heavier than one already seen; "New" says it in words too. */
.ds-linkrow[data-read='true'] .ds-row-link--button {
  font-weight: 600;
}

.ds-linkrow:focus-within {
  background: var(--selected);
}

/* ── A job in the worker's Matches (docs/11 P2-WP9): one ruled row, never a card. Who, the role,
   where and when, the rate, one line of note, one action. ─────────────────────────────────── */

.ds-rowlist > li.ds-job {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
}

.ds-rowlist > li.ds-job:hover {
  background: none;
}

.ds-job__role {
  font: 800 var(--fs-5) / 1.1 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.01em;
}

.ds-job__note {
  color: var(--ink-2);
  font-size: var(--fs-2);
}

/* A place held for the worker: the amber edge the calendar's held days carry. */
.ds-job__held {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-left: var(--sp-3);
  border-left: var(--strip-edge) solid var(--signal);
}

.ds-job > .ds-btn {
  align-self: stretch;
  margin-top: var(--sp-2);
}

/* Two answers side by side (agree, no), wrapping on a phone (docs/11 P2-WP10). */
.ds-answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

@media (width >= 768px) {
  .ds-job > .ds-btn {
    align-self: flex-start;
  }
}

/* The same edges as a table's rows: a shape difference, not just colour. */
.ds-rowlist > li[data-tone='attention'] {
  padding-left: var(--sp-3);
  border-left: var(--strip-edge) solid var(--signal);
}

.ds-rowlist > li[data-tone='critical'] {
  padding-left: var(--sp-3);
  border-left: var(--strip-edge) double var(--bad);
}

/* ── MapView: a map as content inside the sheet (docs/08 §2) ─────────────────────────────── */
.ds-map {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ds-map__view {
  position: relative;
  height: 280px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  cursor: crosshair;
  touch-action: none;
}

.ds-map__view:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

.ds-map__svg {
  display: block;
}

.ds-map__grid line {
  stroke: var(--rule);
  stroke-width: 1;
}

.ds-map__grid text {
  fill: var(--ink-2);
  font: 500 11px var(--mono);
}

/* The pin is a StatusMarker shape: a solid square, outlined so it shows on any map. */
.ds-map__pin {
  fill: var(--signal);
  stroke: var(--ink);
  stroke-width: 2;
}

.ds-map__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ds-map__credit {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-1);
}

/* ── Dates, option lists, ticks and files ─────────────────────────────────────────────────── */

.ds-date,
.ds-checks,
.ds-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  margin: 0;
  padding: var(--sp-3) 0;
  border: 0;
}

.ds-date legend,
.ds-checks legend {
  padding: 0 0 var(--sp-1);
}

/* A heading inside a long list of ticks (the trades, by family): ruled, never boxed. */
.ds-checks__group,
.ds-options__group {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) 0 var(--sp-1);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-weight: 600;
}

.ds-date__parts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ds-date__part {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-input--short {
  width: 4.5em;
  font-family: var(--mono);
}

.ds-input--year {
  width: 6.5em;
  font-family: var(--mono);
}

.ds-options {
  gap: 0;
  padding-top: 0;
}

.ds-options legend {
  width: 100%;
  padding: 0 0 var(--sp-2);
  border-bottom: var(--hair);
}

.ds-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2);
  border-bottom: var(--hair);
  cursor: pointer;
}

.ds-option:hover {
  background: var(--hover);
}

.ds-option:has(input:checked) {
  background: var(--selected);
}

.ds-option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.ds-option input:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

.ds-option__text {
  display: flex;
  flex-direction: column;
}

.ds-option:has(input:checked) .ds-option__label {
  font-weight: 700;
}

.ds-checks .ds-check {
  align-items: center;
  min-height: var(--hit-touch);
}

.ds-file {
  max-width: 100%;
  min-height: var(--hit-touch);
  padding: var(--sp-2) 0;
  font: inherit;
}

.ds-file:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

/* A photo of a physical thing (a card): content, not a container (docs/08 §2 exceptions). */
.ds-photo {
  display: block;
  max-width: min(100%, 360px);
  height: auto;
}

/* ── Documents: a formal record, identical on screen and in print (docs/08 §2) ────────────── */

.ds-doc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 960px;
  padding: var(--sp-6) var(--sp-7);
  border-top: var(--edge-sheet);
  background: var(--paper);
}

.ds-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--hair);
}

.ds-doc__letterhead {
  font: 700 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ds-doc__ref {
  font: 400 var(--fs-2) / 1.3 var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
}

.ds-doc__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.ds-doc__meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-doc__meta dt {
  font: 700 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ds-doc__meta dd {
  font-weight: 600;
}

.ds-doc__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-3) 0;
  border-block: var(--hair);
  color: var(--ink-2);
}

.ds-doc__summary b {
  color: var(--ink);
}

.ds-doc__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ds-doc__section h2 {
  padding-bottom: var(--sp-2);
  border-bottom: var(--rule-major);
  font: 800 var(--fs-5) / 1.1 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-doc__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--hair);
  font-size: var(--fs-1);
  color: var(--ink-2);
}

@media (width <= 767px) {
  .ds-doc {
    padding: var(--sp-5) var(--sp-4);
  }

  .ds-doc__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Printed (or saved as a PDF from the browser): the sheet alone, without the app around it. */
@media print {
  .ds-rail,
  .ds-topbar,
  .ds-scrim,
  .ds-skip,
  .ds-actionbar,
  .ds-head__actions {
    display: none;
  }

  .ds-app {
    display: block;
  }

  .ds-doc {
    max-width: none;
    padding: 0;
    border-top: 0;
  }
}

.ds-head__lede {
  margin-top: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--fs-2);
}

/* The error summary: a Strip with a list of links to the fields that need another look. */
.ds-errorsummary:focus {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

.ds-errorsummary .ds-strip__title {
  font: 700 var(--fs-4) / 1.3 var(--body);
}

.ds-errorsummary__list {
  margin: 0;
  padding-left: var(--sp-4);
}

/* Each problem is a link people tap: 24px at least, and apart (WCAG 2.2 target size). */
.ds-errorsummary__list li + li {
  margin-top: var(--sp-2);
}

.ds-errorsummary__list a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}

/* ── The operations frame (admin): a dark bar across the top, the navigation down the left ─── */

.ds-app--ops {
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  max-width: none;
}

.ds-opsbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-height: 52px;
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--chrome-edge);
  background: var(--chrome);
  color: var(--on-chrome);
}

.ds-opsbar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  color: var(--on-chrome);
  text-decoration: none;
}

.ds-opsbar__brand b {
  font: 800 var(--fs-4) / 1 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-opsbar__brand .ds-opsbar__mark {
  color: var(--chrome-mark);
  font-style: normal;
}

.ds-opsbar__brand span,
.ds-opsbar__status {
  color: var(--on-chrome-2);
  font-size: var(--fs-2);
}

.ds-opsbar__status {
  margin-left: auto;
}

.ds-app--ops .ds-rail {
  padding: var(--sp-3) 0 var(--sp-4);
  background: var(--paper);
}

.ds-app--ops .ds-nav__link {
  padding-right: var(--sp-4);
}

.ds-app--ops .ds-nav__link[aria-current='page'] {
  border-left-color: var(--signal);
}

.ds-app--ops .ds-rail__foot {
  margin-inline: var(--sp-4);
}

@media (width <= 767px) {
  .ds-app--ops {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .ds-app--ops .ds-rail {
    padding: var(--sp-4);
  }

  .ds-app--ops .ds-nav__link[aria-current='page'] {
    border-left-color: var(--signal);
  }

  .ds-app--ops .ds-rail__foot {
    margin-inline: 0;
  }
}

/* ── Task rows ("Needs you"): label, one sentence, one action ─────────────────────────────── */

.ds-tasks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-tasks__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

.ds-tasks__row[data-tone] {
  padding-left: var(--sp-3);
}

.ds-tasks__row[data-tone='attention'] {
  border-left: var(--strip-edge) solid var(--signal);
}

.ds-tasks__row[data-tone='critical'] {
  border-left: var(--strip-edge) double var(--bad);
}

.ds-tasks__label {
  font: 700 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ds-tasks__row[data-tone='attention'] .ds-tasks__label {
  color: var(--signal-ink);
}

.ds-tasks__row[data-tone='critical'] .ds-tasks__label {
  color: var(--bad);
}

@media (width <= 640px) {
  .ds-tasks__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-tasks__row > .ds-btn {
    justify-self: start;
  }
}

/* ── View switch (filter buttons as links) ─────────────────────────────────────────────── */

.ds-views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}

.ds-views__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-desktop);
  padding: 0 var(--sp-3);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.ds-views__link[aria-current='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

@media (pointer: coarse) {
  .ds-views__link {
    min-height: var(--hit-touch);
  }
}

/* A two-column split whose list side is the wider (the queue beside its summary). */
.ds-split--list {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* Each side may shrink below its content's natural width (a wide table scrolls in its wrap). */
.ds-split--list > * {
  min-width: 0;
}

@media (width <= 1023px) {
  .ds-split--list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A form's fields side by side, each allowed to shrink to the column on a phone. */
.ds-split--list .ds-field {
  min-width: 0;
  max-width: 100%;
}

.ds-split--list .ds-select,
.ds-split--list .ds-input {
  max-width: 100%;
}

/* A row's tick box in a table: a 24px target (WCAG 2.2 target size). */
.ds-pick {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
}

/* Operations section headings: the display face, as the approved hub mockups set them. */
.ds-app--ops .ds-section h2 {
  font: 800 var(--fs-5) / 1.1 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.005em;
}

/* A visually hidden legend keeps the control flush with its row. */
.ds-segmented legend.ds-sr-only {
  margin: -1px;
}

.ds-segmented:disabled .ds-segmented__option span {
  border-color: var(--rule-strong);
  background: var(--disabled-bg);
  color: var(--disabled-fg);
}

.ds-segmented:disabled .ds-segmented__option input {
  cursor: not-allowed;
}

/* A stacked table on a phone: each row a block, each cell its column's label then its value. */
@media (width <= 640px) {
  .ds-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ds-table--stack tr {
    display: block;
    padding: var(--sp-2) 0;
    border-bottom: var(--hair);
  }

  .ds-table--stack td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }

  .ds-table--stack td::before {
    content: attr(data-label);
    font: 600 var(--fs-1) / 1.5 var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
}

/* A time or short date in a table cell: one line, never wrapped. */
.ds-nowrap {
  white-space: nowrap;
}

/* The bulk actions under a queue: set apart from the note above them, label clear of its fields. */
.ds-bulk {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--hair);
}

.ds-bulk > .ds-eyebrow {
  margin-bottom: var(--sp-1);
}

/* A setting's row: its words, then its control, top-aligned. */
.ds-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-2) var(--sp-4);
}

@media (width <= 640px) {
  .ds-setting {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A disclosure for occasional forms (pausing the promise, a practice second check). */
.ds-disclosure {
  border-bottom: var(--hair);
}

.ds-disclosure > summary {
  display: flex;
  align-items: center;
  min-height: var(--hit-desktop);
  padding: var(--sp-2) 0;
  font-weight: 700;
  cursor: pointer;
}

.ds-disclosure > summary:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

.ds-disclosure[open] > summary {
  margin-bottom: var(--sp-2);
}

.ds-disclosure > :not(summary) {
  margin-bottom: var(--sp-4);
}

@media (pointer: coarse) {
  .ds-disclosure > summary {
    min-height: var(--hit-touch);
  }
}

/* A short numbered list of steps ("What happens next"): numbers in the mono face, a hairline
   between steps. No box. */
.ds-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ds-step;
}

.ds-steps > li {
  counter-increment: ds-step;
  display: grid;
  grid-template-columns: var(--sp-5) 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: var(--hair);
}

.ds-steps > li::before {
  content: counter(ds-step);
  font-family: var(--mono);
  color: var(--ink-2);
}

/* A select is as wide as its field and no wider, however long its longest option is (a
   director's name as the register writes it). */
.ds-select {
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Text a person typed or was given (an email address, a company's name) that must wrap
   rather than push its row wider than the screen. */
.ds-break {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* A number shown once to be compared by eye with a document (an operator's reveal of a UTR):
   the mono face, large, its two groups apart. */
.ds-utr {
  font-family: var(--mono);
  font-size: var(--fs-5);
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* Development only: the profile switcher's bar (apps/web/src/app/dev-bar.tsx). Never in production. */
.ds-devbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 2px dashed var(--signal);
  background: var(--chrome);
  color: var(--on-chrome);
  font-size: var(--fs-2);
}

.ds-devbar a,
.ds-devbar button {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-desktop);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-chrome);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.ds-devbar a[aria-current='true'] {
  color: var(--chrome-mark);
  text-decoration: none;
}

.ds-devbar a:focus-visible,
.ds-devbar button:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .ds-devbar a,
  .ds-devbar button {
    min-height: var(--hit-touch);
  }
}

/* calendar.css */
/*
 * The month grid and its day marks (docs/08 §5 Calendar). Structure from rules, no boxes: the
 * weeks are ruled rows, and the only drawn things are the marks, which are data (shape = state).
 */

/* ── Day marks ──────────────────────────────────────────────────────────────────────────── */

.ds-daymark {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
}

.ds-daymark--sm {
  width: 14px;
  height: 14px;
}

.ds-daymark--free {
  border: 2px solid var(--ok);
}

.ds-daymark--default {
  border: 2px dotted var(--ink-2);
}

.ds-daymark--held {
  border: 2px solid var(--signal);
  background: var(--hatch-held);
}

.ds-daymark--booked {
  background: var(--ink);
}

.ds-daymark--off {
  border: 1px solid var(--rule-strong);
  background: var(--hatch-notfree);
}

.ds-daylegend {
  /* Each entry keeps its mark and words on one line; entries flow on to the next line whole. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-2);
}

.ds-daylegend li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

/* ── Month grid ─────────────────────────────────────────────────────────────────────────── */

.ds-month {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: var(--hair);
}

.ds-month th {
  padding: var(--sp-2) 0;
  font: 600 var(--fs-1) / 1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
}

.ds-month abbr {
  text-decoration: none;
}

.ds-month td {
  padding: 0;
  border-top: var(--hair);
}

.ds-month__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 52px;
  padding: var(--sp-1) 0;
  color: var(--ink);
  text-decoration: none;
}

a.ds-month__day:hover {
  background: var(--hover);
}

.ds-month__day--outside {
  color: var(--ink-2);
}

.ds-month__day--today {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.ds-month__num {
  font-weight: 600;
  font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
}

.ds-month__day--today .ds-month__num {
  font-weight: 800;
}

.ds-month__badge {
  margin-left: 2px;
  font: 500 var(--fs-1) / 1 var(--mono);
  color: var(--ink-2);
}

.ds-month__marks {
  display: flex;
  gap: var(--sp-1);
}

/* The month's name between its previous and next links. */
.ds-monthnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-3);
}

.ds-monthnav h2 {
  font: 800 var(--fs-5) / 1.1 var(--display);
  font-stretch: var(--display-stretch);
}

/* ── One-tap settings ───────────────────────────────────────────────────────────────────── */

.ds-pressgroup {
  display: inline-flex;
  flex: none;
}

.ds-pressgroup__option {
  min-width: 52px;
  min-height: var(--hit-desktop);
  padding: 0 var(--sp-3);
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.ds-pressgroup__option + .ds-pressgroup__option {
  border-left-width: 0;
}

.ds-pressgroup__option[aria-pressed='true'] {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

@media (pointer: coarse) {
  .ds-pressgroup__option {
    min-height: var(--hit-touch);
  }
}

/* A ruled row with its words on the left and a control on the right. */
.ds-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

/* The words: the first span, after any hidden inputs a form puts first. */
.ds-setting > span:first-of-type {
  display: flex;
  flex-direction: column;
}

/* business.css */
/* The business's WP8 screens: view filters as links, and the "while we check" checklist. */

.ds-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.ds-filters__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-desktop);
  padding: 0 var(--sp-3);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.ds-filters__link:hover {
  border-color: var(--ink);
}

.ds-filters__link[aria-current='page'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

@media (pointer: coarse) {
  .ds-filters__link {
    min-height: var(--hit-touch);
  }
}

.ds-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-checklist__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

.ds-checklist__glyph {
  width: 14px;
  height: 14px;
  color: var(--ink-2);
}

.ds-checklist__row--done .ds-checklist__glyph {
  color: var(--ok);
}

.ds-checklist__row--with-us .ds-checklist__glyph {
  color: var(--info);
}

.ds-checklist__text {
  display: flex;
  flex-direction: column;
}

.ds-checklist__end {
  /* "Done", "With us", "To do": one line, clear of the text beside it at every width. */
  padding-left: var(--sp-3);
  text-align: right;
  white-space: nowrap;
}

/* Business sign-up: "Which director authorised you?" only when a director authorised them.
   "Your role" starts with neither answer chosen, so it is hidden until that one is. A form that
   came back asking for the director (ds-claim--open) shows it whatever is chosen. */
.ds-claim:not(.ds-claim--open):not(
    :has(input[name='claim'][value='authorised_by_director']:checked)
  )
  .ds-claim__director {
  display: none;
}

/* The availability grid: narrow day columns with a day mark each. */
.ds-daycell {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

/* Why a form came back refused: the place a refused form returns to (`#problem`), and where
   focus goes. Clear of the top edge when scrolled to. */
.ds-problem {
  scroll-margin-top: var(--sp-4);
}

.ds-problem:focus {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
}

/* ── The hirer onboarding screens (sign-up, Getting started and its steps, the director's page,
   requests to join and the fold-in): every control a person presses is the standard control
   height, and tick boxes that follow one another are apart. Scoped to these screens: the
   system-wide heights are untouched. ─────────────────────────────────────────────────────── */

.ds-onboarding .ds-btn--sm {
  min-height: var(--hit-desktop);
}

/* A link that is a line of its own (ds-link--standalone), and a row that is a link. */
.ds-onboarding .ds-link--standalone,
.ds-onboarding .ds-linkrow .ds-row-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-desktop);
}

.ds-onboarding .ds-check {
  align-items: center;
  min-height: var(--hit-desktop);
}

.ds-onboarding .ds-check + .ds-check {
  margin-top: var(--sp-2);
}

@media (pointer: coarse) {
  .ds-onboarding .ds-btn--sm,
  .ds-onboarding .ds-link--standalone,
  .ds-onboarding .ds-linkrow .ds-row-link,
  .ds-onboarding .ds-check {
    min-height: var(--hit-touch);
  }
}

/* ── The requirement builder (P2-WP4b): the brief, what was understood, the questions and the
   dates. Every control a person presses is the standard control height here (44px to a finger),
   as on the onboarding screens; the system-wide heights are untouched. ──────────────────────── */

.ds-requirement .ds-btn--sm,
.ds-requirement .ds-link--standalone,
.ds-requirement .ds-check {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-desktop);
}

@media (pointer: coarse) {
  .ds-requirement .ds-btn--sm,
  .ds-requirement .ds-link--standalone,
  .ds-requirement .ds-check {
    min-height: var(--hit-touch);
  }
}

/* A long answer on a button wraps on a phone rather than pushing the page sideways. */
.ds-requirement .ds-btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* The columns may shrink below what is in them: the roles table scrolls in its own box. */
.ds-requirement .ds-split > * {
  min-width: 0;
}

/* The questions: one ruled block each, the state's shape first. */
.ds-questions {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-question {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: var(--hair);
  scroll-margin-top: var(--sp-4);
}

.ds-question__title {
  margin: 0;
  font-weight: 700;
}

.ds-question p {
  margin: 0;
}

/* One requirement of a role on a line of its own, with what brings it underneath. */
.ds-requirement__line {
  display: block;
}

/* A day in the strip of weeks: its shape, then the date and the start time (or "Off"). */
.ds-shiftcell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  min-width: 72px;
}

/* On a phone or a tablet everything pressed or typed into here is 44px, whatever the browser says
   of its pointer (a touch laptop, an emulated phone). */
@media (width <= 1023px) {
  .ds-requirement .ds-btn,
  .ds-requirement .ds-link--standalone,
  .ds-requirement .ds-check,
  .ds-requirement .ds-input,
  .ds-requirement .ds-select,
  .ds-requirement .ds-textarea {
    min-height: var(--hit-touch);
  }
}

/* ── "Check it and publish" (P2-WP5b). The statement's row reads "Done" once its box is ticked,
   with no script: the page is not rendered again until it is posted. Where :has() is not
   understood the row keeps saying "To do", and the box itself still says what it is. ────────── */

.ds-publish__ticked {
  display: none;
}

.ds-checklist__row:has(input:checked) .ds-publish__ticked {
  display: inline;
}

.ds-checklist__row:has(input:checked) .ds-publish__unticked {
  display: none;
}

/* A row a problem's link leads to lands clear of the top edge. */
.ds-publish [id^='row-'] {
  scroll-margin-top: var(--sp-4);
}

/* ── A published requirement's candidate list (BIZ-11; P2-WP7). Role tabs are plain links that
   wrap on a phone; "see why" is a native <details> whose summary is the standard target. ───── */

.ds-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--hair);
}

.ds-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  border-bottom: 3px solid transparent;
  color: var(--ink-2);
  font-weight: 700;
  text-decoration: none;
}

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

.ds-tabs a[aria-current='page'] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.ds-candidates details > summary {
  display: flex;
  align-items: center;
  min-height: var(--hit-touch);
  cursor: pointer;
  font-weight: 700;
}

.ds-candidates__reasons {
  margin: 0;
  padding-left: var(--sp-4);
}

.ds-candidates details > .ds-table-wrap,
.ds-candidates details > p {
  margin-top: var(--sp-3);
}

/* What a business does to a candidate, or reads of its invitation: under the person's name. */
.ds-candidates__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.ds-candidates__action p {
  margin: 0;
}

/* Right to work at booking (P2-WP16): the panel a booking waits on, before its first shift, and
   the worker's share code as the business reads it on the record form. Ruled, never a card. */
.ds-rtw-before {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--signal-ink);
}

.ds-rtw-before > .ds-eyebrow {
  color: var(--signal-ink);
}

.ds-rtw-before h3 {
  margin: 0;
}

.ds-rtw-lookup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--selected);
}

.ds-share-code {
  font-size: var(--fs-4);
  color: var(--ink);
  letter-spacing: 0.08em;
}

/* paging.css */
/* Paging: the pager under a long list, and the tabs row on a phone. Links only, no script. */

.ds-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--hair);
}

.ds-pager__status {
  margin: 0;
  color: var(--ink-2);
  font: 500 var(--fs-2) / 1.5 var(--mono);
}

.ds-pager__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-pager__link,
.ds-pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit-desktop);
  min-height: var(--hit-desktop);
  padding: 0 var(--sp-3);
}

.ds-pager__link {
  border: var(--hair);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

a.ds-pager__link:hover {
  background: var(--hover);
}

.ds-pager__link[aria-current='page'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.ds-pager__link--off {
  border-style: dashed;
  color: var(--ink-2);
  font-weight: 400;
}

.ds-pager__gap {
  color: var(--ink-2);
}

/* A tab that holds something to do: a hollow square in the signal colour, and the words for a
   screen reader. The square is a shape, so it does not depend on the colour. */
.ds-tabs__flag {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--sp-2);
  border: 3px double var(--signal);
}

@media (pointer: coarse) {
  .ds-pager__link,
  .ds-pager__gap {
    min-width: var(--hit-touch);
    min-height: var(--hit-touch);
  }
}

/* On a phone the tabs stay in one line and scroll sideways. The focus ring is drawn inside the
   link so the scroll container cannot clip it. */
@media (width <= 767px) {
  .ds-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .ds-tabs li {
    flex: none;
  }

  .ds-tabs a {
    white-space: nowrap;
  }

  .ds-tabs a:focus-visible {
    outline-offset: -3px;
    box-shadow: none;
  }

  .ds-pager__list {
    width: 100%;
  }
}

/* A native <details> that folds a long form away: the summary is the standard target. */

.ds-disclosure > summary {
  display: flex;
  align-items: center;
  min-height: var(--hit-touch);
  cursor: pointer;
  font-weight: 700;
}

.ds-disclosure[open] > summary {
  margin-bottom: var(--sp-3);
}

/* marketing.css */
/*
 * The public landing page (docs/08 "Signed-out pages: Site signage", docs/15). Square edges, no
 * shadows, tokens only. The page is a sign: paper, ink, and one signal (safety yellow, always
 * with ink text). Structure comes from the sign bar (a full-width band that carries a section's
 * title), ruled lists, step numbers in yellow squares, and photographs as evidence (labelled
 * placeholders until the photographs are supplied).
 *
 * The page reads the signage tokens (--sg-*) directly. The pictures of the product inside it
 * are the app's own screens, so they keep the app's tokens: a sheet on the app's ground.
 *
 * Built screens sit on the ground with a solid ink edge. Design previews (screens that are not
 * built) carry a dashed ink outline and a dashed sheet edge: dashed is the system's "open, not
 * done". Breakpoints: 1023 (two columns stack, the header becomes a menu) and 767 (the phone: 4
 * columns, a 20px margin). The desktop grid is 12 columns with a 24px gutter.
 */

.ds-mkt {
  --margin: 40px;
  --gutter: 24px;
  --focus-shadow: 0 0 0 2px var(--sg-focus-inner);

  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: 18px / 1.5 var(--body);
}

/* The page's ground shows either side of the 1280px sign. */
body:has(.ds-mkt),
body:has(.ds-sg) {
  background: var(--sg-ground);
}

.ds-mkt ol,
.ds-mkt ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-mkt a:hover {
  color: var(--sg-amber);
}

.ds-mkt :focus-visible {
  outline-color: var(--sg-focus-outer);
  box-shadow: var(--focus-shadow);
}

.ds-mkt-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* ── Buttons: the signal is the primary action, and it always carries ink ───────────────────── */

.ds-mkt .ds-btn {
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid var(--sg-yellow);
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
  font-size: 18px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.ds-mkt a.ds-btn:hover {
  border-color: var(--sg-ink);
  background: var(--sg-ink);
  color: var(--sg-paper);
}

.ds-mkt .ds-btn--line {
  border-color: var(--sg-ink);
  background: transparent;
  color: var(--sg-ink);
}

.ds-mkt a.ds-btn--line:hover {
  border-color: var(--sg-ink);
  background: var(--sg-wash);
  color: var(--sg-ink);
}

.ds-mkt .ds-btn--lg,
.ds-mkt .ds-btn--xl {
  padding: var(--sp-2) 22px;
}

/* On a bar (the header, the base plate): the outline button is white. */
.ds-mkt .ds-mkt-btn--on-line {
  border-color: var(--sg-on-bar);
  background: transparent;
  color: var(--sg-on-bar);
}

.ds-mkt a.ds-mkt-btn--on-line:hover {
  border-color: var(--sg-on-bar);
  background: var(--sg-bar-edge);
  color: var(--sg-on-bar);
}

/* ── Type ───────────────────────────────────────────────────────────────────────────────── */

.ds-mkt-h1,
.ds-mkt-h2,
.ds-mkt-h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* The hero is a sign: heavy, narrow, capitals. */
.ds-mkt-h1 {
  font-stretch: 68%;
  font-weight: 900;
  font-size: clamp(44px, 15.4vw, 58px);
  line-height: 0.92;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

.ds-mkt-h2 {
  font-stretch: 72%;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
}

.ds-mkt-h3 {
  font-stretch: 72%;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1;
}

/* Labels on the page itself are mono; the app's own labels inside a picture are left as they are. */
.ds-mkt-heading .ds-eyebrow,
.ds-mkt-ledger dt,
.ds-mkt-thread .ds-eyebrow,
.ds-mkt-plans .ds-eyebrow,
.ds-mkt-free .ds-eyebrow,
.ds-mkt-pricing > .ds-eyebrow,
.ds-mkt-act__what .ds-eyebrow,
.ds-mkt-foot .ds-eyebrow,
.ds-mkt-cmp th,
.ds-mkt-show__cap .ds-eyebrow {
  font: 400 13px / 1.3 var(--mono);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--sg-ink-2);
}

.ds-mkt-lede {
  max-width: 34em;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  text-wrap: pretty;
}

.ds-mkt-small {
  font-size: 15px;
  line-height: 1.45;
  color: var(--sg-ink-2);
}

.ds-mkt-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Two or three downloads side by side, wrapping on a phone. */
.ds-mkt-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-5);
}

.ds-mkt-referral {
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-left: var(--strip-edge) solid var(--sg-ink);
  background: var(--sg-wash);
  font-size: 15px;
  font-weight: 600;
}

/* The "not open yet" marker: ink, with the wide dashed outline. */
.ds-mkt-next {
  color: inherit;
}

.ds-mkt-next__glyph {
  width: 18px;
}

/* ── The sign bar: a section's title on a full-width band ───────────────────────────────────── */

.ds-sign {
  background: var(--sg-bar);
  color: var(--sg-on-bar);
}

.ds-sign--yellow {
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
}

.ds-sign__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 1200px;
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--margin, 40px);
}

.ds-sign__title {
  margin: 0;
  font-family: var(--display);
  font-stretch: 68%;
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ds-sign__aside {
  font: 400 13px / 1.3 var(--mono);
  letter-spacing: 0.02em;
  text-align: right;
}

.ds-sign .ds-status {
  color: inherit;
}

/* The one movement on the page: a title slides in once, in three steps. */
@keyframes ds-slide-in {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ds-sg-in {
  animation: ds-slide-in 150ms steps(3) both;
}

@media (prefers-reduced-motion: reduce) {
  .ds-sg-in {
    animation: none;
  }
}

/* ── Photographs as evidence: a labelled placeholder until the photograph is supplied ───────── */

.ds-photo {
  position: relative;
  margin: 0;
}

.ds-photo__field {
  width: 100%;
  background: var(--hatch-photo);
}

.ds-photo--4-5 .ds-photo__field {
  aspect-ratio: 4 / 5;
}

.ds-photo--4-3 .ds-photo__field {
  aspect-ratio: 4 / 3;
}

.ds-photo--16-9 .ds-photo__field {
  aspect-ratio: 16 / 9;
}

.ds-photo--3-2 .ds-photo__field {
  aspect-ratio: 3 / 2;
}

.ds-photo__cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 4px 8px;
  background: var(--sg-bar);
  color: var(--sg-on-bar);
  font: 400 13px / 1.35 var(--mono);
  letter-spacing: 0.02em;
}

/* ── Buttons on the bar, and the header ─────────────────────────────────────────────────────── */

.ds-mkt-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--sg-bar);
  color: var(--sg-on-bar);
}

.ds-mkt-header :focus-visible,
.ds-mkt-base :focus-visible {
  outline-color: var(--sg-yellow);
  box-shadow: none;
}

.ds-mkt-header__in {
  display: flex;
  align-items: center;
  gap: 0 24px;
  min-height: 64px;
}

.ds-mkt-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  margin-right: auto;
  color: var(--sg-on-bar);
  font: 900 28px / 1 var(--display);
  font-stretch: 68%;
  letter-spacing: 0;
  text-decoration: none;
}

.ds-mkt-brand--static {
  min-height: 0;
}

.ds-mkt-brand__mark {
  color: var(--sg-yellow);
}

.ds-mkt a.ds-mkt-brand:hover {
  color: var(--sg-on-bar);
}

.ds-mkt-header__nav {
  display: flex;
  gap: 0 22px;
}

.ds-mkt-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  color: var(--sg-on-bar);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.ds-mkt .ds-mkt-header__nav a:hover {
  color: var(--sg-yellow);
}

.ds-mkt-header__signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  color: var(--sg-on-bar);
  font-size: 17px;
  font-weight: 700;
}

.ds-mkt a.ds-mkt-header__signin:hover {
  color: var(--sg-yellow);
}

/* "Sign in" opens on the two sign-ins (trades, contractors). A native <details>: no script. */
.ds-mkt-signin {
  position: relative;
}

.ds-mkt-signin > summary {
  cursor: pointer;
  list-style: none;
}

.ds-mkt-signin > summary::-webkit-details-marker {
  display: none;
}

.ds-mkt-signin > summary::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: var(--sp-2);
  border: 4px solid transparent;
  border-top-color: currentcolor;
  border-bottom-width: 0;
}

/* The one floating thing on the page, so the one place a shadow is allowed. */
.ds-mkt-signin nav {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--sg-bar-edge);
  background: var(--sg-bar);
  box-shadow: var(--overlay-shadow);
}

.ds-mkt-signin nav a {
  display: flex;
  align-items: center;
  min-height: var(--hit-touch);
  color: var(--sg-on-bar);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ds-mkt-signin nav a + a {
  border-top: 1px solid var(--sg-bar-edge);
}

.ds-mkt .ds-mkt-signin nav a:hover {
  color: var(--sg-yellow);
}

/* The skip link is a control like any other: the standard height, at every width. */
.ds-mkt > .ds-skip {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
}

.ds-mkt .ds-mkt-header__action {
  min-height: var(--hit-touch);
  padding: 0 var(--sp-4);
  font-size: 17px;
}

.ds-mkt-menu {
  display: none;
}

/* ── The hero: the headline is the sign ─────────────────────────────────────────────────────── */

.ds-mkt-hero {
  padding: 40px 0 56px;
  border-bottom: 2px solid var(--sg-ink);
}

.ds-mkt-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: start;
}

.ds-mkt-hero__head {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: var(--sp-4);
  min-width: 0;
}

.ds-mkt-hero__copy {
  display: flex;
  flex-direction: column;
  grid-column: span 7;
  gap: var(--sp-5);
  min-width: 0;
}

.ds-mkt-hero__grid > .ds-photo {
  grid-column: 9 / -1;
  grid-row: 2;
}

.ds-mkt-hero__phone-photo {
  display: none;
}

.ds-mkt-hero .ds-mkt-h1 {
  font-size: clamp(88px, 10.3vw, 132px);
}

.ds-mkt-hero__copy > .ds-mkt-lede {
  max-width: 34ch;
  font-size: 22px;
  line-height: 1.35;
}

/* The timing truth sits above the headline, in mono, with its dashed marker. */
.ds-mkt-status {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font: 400 13px / 1.4 var(--mono);
  letter-spacing: 0.02em;
  color: var(--sg-ink-2);
}

.ds-mkt-status__glyph {
  flex: none;
  width: 24px;
  height: 16px;
  margin-top: 1px;
  overflow: visible;
}

.ds-mkt-status__short {
  display: none;
}

.ds-mkt-status--on-chrome {
  max-width: 560px;
  color: var(--sg-on-bar-2);
}

.ds-mkt-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) 16px;
}

.ds-mkt-door {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ds-mkt-door__note {
  margin: 0;
}

.ds-mkt-door__link {
  display: none;
}

/* ── Showcase fields ────────────────────────────────────────────────────────────────────── */

.ds-mkt-show__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-bottom: var(--sp-2);
}

.ds-mkt-show__cap .ds-eyebrow:first-child,
.ds-mkt-show--preview .ds-mkt-show__cap .ds-eyebrow {
  color: var(--ink);
}

.ds-mkt-show__field {
  padding: 24px;
  background: var(--ground);
  /* A picture's own text is the app's size, whatever the page around it is set in. */
  font-size: var(--fs-3);
  line-height: 1.4;
}

.ds-mkt-show--phone {
  width: 372px;
  max-width: 100%;
}

.ds-mkt-show--phone .ds-mkt-show__field {
  padding: var(--sp-3);
  border: 2px solid var(--ink);
}

.ds-mkt-show--preview .ds-mkt-show__field {
  border: 2px dashed var(--ink);
}

.ds-mkt-show__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px var(--sp-3);
  margin-bottom: 14px;
}

.ds-mkt-sheetwrap {
  display: flex;
  flex-direction: column;
}

.ds-mkt-sheetwrap + .ds-mkt-sheetwrap {
  margin-top: 20px;
}

.ds-mkt-sheet__label {
  margin-bottom: var(--sp-2);
  color: var(--ink);
}

.ds-mkt-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-top: var(--edge-sheet);
  background: var(--paper);
}

.ds-mkt-show--preview .ds-mkt-sheet {
  border-top-style: dashed;
}

.ds-mkt-sheet__title {
  font: 800 var(--fs-5) / 1.15 var(--display);
  font-stretch: var(--display-stretch);
}

/* A screen's own title, inside a picture of it (never a heading: the page has one h1). */
.ds-mkt-sheet__heading {
  margin-top: var(--sp-1);
  font: 800 var(--fs-6) / 1.05 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-mkt-sheet__title--mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-mkt-sheet__sub {
  font-size: var(--fs-2);
  color: var(--ink-2);
}

.ds-mkt-sheet__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.ds-mkt-sheet__actions--stack {
  grid-template-columns: minmax(0, 1fr);
}

.ds-mkt-sheet__between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ds-mkt-typed {
  min-height: 84px;
  padding: var(--sp-3);
  border: 1px solid var(--rule-strong);
  font-size: var(--fs-4);
}

/* Two sheets side by side inside one picture. */
.ds-mkt-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.ds-mkt-pair > .ds-stack {
  gap: var(--sp-3);
}

/* One job, two views: the phone's sheet, the contractor's sheet, and what joins them. */
.ds-mkt-views {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 0 20px;
  align-items: start;
}

.ds-mkt-views__join {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}

.ds-mkt-views__join::before,
.ds-mkt-views__join::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink);
}

.ds-mkt-kv {
  border-top: 1px solid var(--ink);
}

.ds-mkt-kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--hair);
}

.ds-mkt-kv > div > span:first-child {
  flex: none;
  font-size: var(--fs-2);
  color: var(--ink-2);
}

.ds-mkt-kv > div > span:last-child {
  font-weight: 600;
  text-align: right;
}

.ds-mkt-kv small,
.ds-mkt-why small {
  display: block;
  font-size: var(--fs-2);
  font-weight: 400;
  color: var(--ink-2);
}

.ds-mkt-kv > div > .ds-mkt-kv__strong {
  font: 800 var(--fs-5) / 1.15 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-mkt ul.ds-mkt-why {
  margin-top: 6px;
  border-top: 1px solid var(--ink);
}

.ds-mkt-why > li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0 var(--sp-2);
  align-items: baseline;
  padding: 7px 0;
  border-bottom: var(--hair);
  font-weight: 600;
}

.ds-mkt-why__glyph {
  position: relative;
  top: 1px;
  color: var(--ok);
}

.ds-mkt-band {
  padding: 6px 0 var(--sp-2);
  border-bottom: 1px solid var(--ink);
  font-weight: 700;
}

.ds-mkt-cand > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: var(--hair);
}

.ds-mkt-cand p {
  grid-column: 1 / -1;
  font-size: var(--fs-2);
  line-height: 1.4;
  color: var(--ink-2);
}

.ds-mkt-cand .ds-mkt-cand__note {
  color: var(--ink);
  font-weight: 600;
}

.ds-mkt-role {
  display: grid;
  grid-template-columns: minmax(min-content, 1.4fr) auto minmax(0, auto);
  gap: var(--sp-2);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: var(--hair);
}

.ds-mkt-role > span:first-child {
  font-weight: 600;
}

/* What is missing sits under its label when the row is too narrow for both. */
.ds-mkt-role > span:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 6px;
  text-align: right;
}

.ds-mkt-role[data-tone='attention'] {
  padding-left: var(--sp-2);
  border-left: var(--strip-edge) solid var(--signal);
}

.ds-mkt-tag {
  display: inline-block;
  padding: 1px 5px;
  background: var(--ink);
  color: var(--on-ink);
  font: 500 var(--fs-1) / 1.4 var(--mono);
}

.ds-mkt-tagline {
  display: flex;
  justify-content: flex-end;
}

.ds-mkt-strip-tag {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.ds-mkt-strip-tag > .ds-strip {
  flex: 1;
}

/* Real components inside a picture: the app's own sheet and page parts, fitted to the field. */
.ds-mkt-show .ds-doc {
  gap: var(--sp-4);
  max-width: none;
  padding: var(--sp-4);
}

.ds-mkt-show .ds-doc__meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-mkt-show .ds-doc__meta dd {
  font: 800 var(--fs-5) / 1.15 var(--display);
  font-stretch: var(--display-stretch);
}

.ds-mkt-show .ds-doc__meta > div + div dd {
  font: 400 var(--fs-3) / 1.4 var(--body);
  color: var(--ink-2);
}

.ds-mkt-show--phone .ds-doc__meta {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
}

.ds-mkt-show .ds-rowlist {
  border-top: 1px solid var(--ink);
}

.ds-mkt-show .ds-rowlist > li:hover {
  background: transparent;
}

.ds-mkt-show .ds-rowlist > li[data-tone='attention'] {
  padding-left: var(--sp-2);
  border-left: var(--strip-edge) solid var(--signal);
}

.ds-mkt-rowend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.ds-mkt-rowend .ds-mono {
  font-size: var(--fs-1);
  color: var(--ink-2);
}

.ds-mkt-show .ds-head {
  padding: 0 0 var(--sp-3);
  border-bottom: var(--rule-major);
}

.ds-mkt-show .ds-summary {
  padding: var(--sp-3) 0;
}

.ds-mkt-show .ds-filters {
  margin: 0;
}

.ds-mkt-show .ds-split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.ds-mkt-show .ds-split > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: 0 var(--sp-5) 0 0;
  border: 0;
}

.ds-mkt-show .ds-split > div + div {
  padding: 0 0 0 var(--sp-5);
  border-left: var(--hair);
}

.ds-mkt-show .ds-page {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: var(--sp-4);
  border-top: var(--edge-sheet);
}

.ds-mkt-show .ds-page .ds-brand {
  display: none;
}

.ds-mkt-show .ds-btn {
  padding-inline: var(--sp-3);
  white-space: normal;
}

/* ── The induction board: "Site rules", short flat statements in a ruled two-column list ────── */

.ds-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  margin: 0;
}

.ds-board__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 18px 0;
  border-top: 1px solid var(--sg-hair);
}

.ds-board__term {
  flex: none;
  min-width: 9ch;
  margin: 0;
  font: 800 30px / 1 var(--display);
  font-stretch: 72%;
}

.ds-board__line {
  min-width: 0;
  margin: 0;
}

/* ── The fact ledger: what matching will run on, as ruled facts ─────────────────────────────── */

.ds-mkt-ledger {
  margin-top: var(--sp-6);
  padding: var(--sp-5) 0 0;
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-ledger dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ds-mkt-ledger dl > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 0 24px;
  border-left: 1px solid var(--sg-hair);
}

.ds-mkt-ledger dl > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.ds-mkt-ledger dt {
  margin-bottom: var(--sp-1);
}

.ds-mkt-ledger dd {
  margin: 0;
}

.ds-mkt-ledger__value {
  font: 800 24px / 1.1 var(--display);
  font-stretch: 72%;
}

.ds-mkt-ledger__foot {
  margin-top: var(--sp-5);
  font: 400 13px / 1.4 var(--mono);
  letter-spacing: 0.02em;
  color: var(--sg-ink-2);
}

/* ── Sections ───────────────────────────────────────────────────────────────────────────── */

.ds-mkt-section {
  padding: 36px 0 48px;
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-section--bar {
  padding: 0;
  border-top: 0;
}

.ds-mkt-section--bar > .ds-mkt-wrap {
  padding-top: 40px;
  padding-bottom: 56px;
}

.ds-mkt-section[id],
.ds-mkt-act,
.ds-mkt-anchor {
  scroll-margin-top: 64px;
}

.ds-mkt-heading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.ds-mkt-heading__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

.ds-mkt-heading .ds-mkt-lede {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.5;
}

.ds-mkt-sources {
  font-size: 15px;
  line-height: 1.9;
  color: var(--sg-ink-2);
}

.ds-mkt-forward {
  font-weight: 700;
}

.ds-mkt-gap {
  margin-top: var(--sp-6);
}

/* ── How matching will work ─────────────────────────────────────────────────────────────── */

.ds-mkt ol.ds-mkt-msteps {
  margin-top: var(--sp-6);
}

.ds-mkt-mstep {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: start;
  padding: var(--sp-5) 0 48px;
  border-top: 1px solid var(--sg-hair);
}

.ds-mkt-mstep:first-child {
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-mstep__text {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  gap: var(--sp-4);
}

.ds-mkt-mstep > div:last-child {
  grid-column: span 7;
  min-width: 0;
}

.ds-mkt-mstep__title {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 var(--sp-4);
  align-items: center;
}

/* Step numbers: 01, 02, 03 in a yellow square. The signal's other use, besides the primary action. */
.ds-mkt-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
  font: 900 30px / 1 var(--display);
  font-stretch: 62%;
}

.ds-mkt-mstep__title .ds-mkt-steps__n {
  width: 64px;
  height: 64px;
  font-size: 40px;
}

.ds-mkt-mstep__title h3 {
  font: 800 26px / 1.05 var(--display);
  font-stretch: 72%;
}

.ds-mkt-thread {
  margin-left: 80px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sg-hair);
}

.ds-mkt-thread .ds-eyebrow {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--sg-ink);
}

.ds-mkt-thread--signal .ds-eyebrow {
  color: var(--sg-amber);
}

.ds-mkt-rules > li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--sg-hair);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.ds-mkt-rules > li:first-child {
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-rules .ds-mono {
  color: var(--sg-ink-2);
  font-weight: 400;
}

.ds-mkt-notes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-4) var(--gutter);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--sg-hair);
}

.ds-mkt-notes > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-mkt-notes > div:first-child {
  grid-column: span 5;
}

.ds-mkt-notes > div:last-child {
  grid-column: span 7;
}

/* ── For trades ─────────────────────────────────────────────────────────────────────────── */

.ds-mkt-trades {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  grid-template-rows: auto 1fr auto auto;
  column-gap: 64px;
}

.ds-mkt-trades__head {
  grid-column: 1;
  grid-row: 1;
}

.ds-mkt-trades__frames {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  gap: var(--sp-6);
}

.ds-mkt-trades__steps {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--sp-5);
}

.ds-mkt-trades__invite {
  margin: var(--sp-5) 0 0 84px;
}

.ds-mkt-trades__strip {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--sp-6);
}

.ds-mkt-trades__notes {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 4;
  gap: 10px;
  margin-top: var(--sp-6);
}

.ds-mkt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-column: 1;
  grid-row: 4;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
}

.ds-mkt-bar--phone-only {
  display: none;
}

/* The four steps: a number in a yellow square, a heavy title and one line. */
.ds-mkt-steps > li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 var(--sp-4);
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--sg-hair);
}

.ds-mkt-steps > li:first-child {
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-steps > li:last-child {
  border-bottom: 1px solid var(--sg-hair);
}

.ds-mkt-steps h3 {
  margin-bottom: var(--sp-1);
  font: 800 26px / 1 var(--display);
  font-stretch: 72%;
}

.ds-mkt-steps p {
  max-width: 62ch;
}

/* ── For contractors ────────────────────────────────────────────────────────────────────── */

.ds-mkt ol.ds-mkt-ann {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: var(--sp-6);
}

.ds-mkt-ann > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-ann h3 {
  font: 700 18px / 1.3 var(--body);
}

.ds-mkt-ann .ds-mkt-tag {
  align-self: flex-start;
}

.ds-mkt-act {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: start;
  margin-top: 56px;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--sg-ink);
}

.ds-mkt-act__what {
  display: flex;
  flex-direction: column;
  grid-column: span 7;
  gap: var(--sp-3);
}

.ds-mkt-act__what .ds-mkt-lede {
  font-size: 18px;
  line-height: 1.5;
}

.ds-mkt-act__do {
  grid-column: span 5;
}

.ds-mkt-act__do > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--sg-hair);
}

.ds-mkt-act__do > div:first-child {
  gap: var(--sp-3);
  padding-top: 0;
  border-top: 0;
}

/* A picture of the product shows the app's own buttons (ink), never the page's signal. */
.ds-mkt .ds-mkt-show .ds-btn {
  min-height: var(--hit-desktop);
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-3);
}

.ds-mkt .ds-mkt-show .ds-btn--line {
  background: transparent;
  color: var(--ink);
}

/* A section's opening: its words beside a photograph. */
.ds-mkt-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: end;
}

.ds-mkt-split > .ds-mkt-heading {
  grid-column: span 7;
}

.ds-mkt-split > .ds-photo {
  grid-column: span 5;
}

@media (width <= 1023px) {
  .ds-mkt-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-mkt-split > .ds-mkt-heading,
  .ds-mkt-split > .ds-photo {
    grid-column: 1 / -1;
  }
}

@media (width <= 767px) {
  .ds-mkt-split > .ds-photo {
    display: none;
  }
}

/* ── Now, and with Skillmatch ───────────────────────────────────────────────────────────── */

.ds-mkt-cmp {
  width: 100%;
  margin-top: var(--sp-5);
  border-collapse: collapse;
  table-layout: fixed;
}

.ds-mkt-cmp th {
  padding: 0 0 10px;
  border-bottom: 2px solid var(--sg-ink);
  text-align: left;
}

.ds-mkt-cmp th.ds-mkt-cmp__with {
  padding-left: var(--sp-7);
  color: var(--sg-amber);
}

.ds-mkt-cmp td {
  padding: var(--sp-4) var(--sp-7) var(--sp-4) 0;
  border-bottom: 1px solid var(--sg-hair);
  vertical-align: top;
  color: var(--sg-ink-2);
}

.ds-mkt-cmp td.ds-mkt-cmp__with {
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-7);
  border-left: 1px solid var(--sg-hair);
  color: var(--sg-ink);
  font-weight: 700;
}

.ds-mkt-cmp__marker {
  display: flex;
  margin-bottom: var(--sp-1);
}

.ds-mkt-cmp__now {
  display: none;
}

/* ── Pricing ────────────────────────────────────────────────────────────────────────────── */

.ds-mkt-free {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: start;
  margin-top: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 2px solid var(--sg-ink);
  border-bottom: 1px solid var(--sg-hair);
}

.ds-mkt-free > div:first-child {
  grid-column: span 6;
}

.ds-mkt-free__lines {
  grid-column: span 6;
}

.ds-mkt-free__figure {
  margin: var(--sp-2) 0 var(--sp-3);
  font: 900 clamp(44px, 6vw, 80px) / 0.92 var(--display);
  font-stretch: 68%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ds-mkt .ds-mkt-free__action {
  margin-top: var(--sp-4);
}

.ds-mkt-free__lines > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--sg-hair);
  font-weight: 700;
}

.ds-mkt-free__lines > li:first-child {
  border-top: 1px solid var(--sg-hair);
}

.ds-mkt-pricing {
  margin-top: var(--sp-6);
}

.ds-mkt-pricing__intro {
  max-width: 62ch;
  margin-top: var(--sp-2);
}

.ds-mkt-plans__table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  font-size: 16px;
}

/* A plan's head: a heavy rule (dashed for what is not open), its name in mono, its price large. */
.ds-mkt-plans__table thead th {
  width: 23.5%;
  padding: var(--sp-3) var(--sp-4) var(--sp-4) 0;
  border-top: 6px solid var(--sg-ink);
  border-bottom: 2px solid var(--sg-ink);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.ds-mkt-plans__table thead th.ds-mkt-plans__col--next {
  border-top-style: dashed;
}

.ds-mkt-plans__table thead td {
  border-top: 6px solid transparent;
  border-bottom: 2px solid var(--sg-ink);
  vertical-align: bottom;
}

.ds-mkt-plans__table thead .ds-status {
  display: flex;
  margin-bottom: 6px;
}

.ds-mkt-plans__table thead .ds-mkt-small {
  display: block;
}

.ds-mkt-plan__price {
  display: block;
  margin: 6px 0 var(--sp-2);
  color: var(--sg-ink);
  font: 800 40px / 1 var(--display);
  font-stretch: 72%;
  letter-spacing: -0.01em;
}

.ds-mkt-plan__price small {
  font: 400 13px / 1 var(--mono);
  font-stretch: 100%;
  letter-spacing: 0.02em;
}

.ds-mkt-plans__table tbody th {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--sg-hair);
  text-align: left;
  font-weight: 600;
}

.ds-mkt-plans__table tbody td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--sg-hair);
  vertical-align: middle;
}

.ds-mkt-plans__table tbody .ds-status {
  white-space: normal;
}

.ds-mkt-plans__table tr.ds-mkt-plans__band th {
  padding: 24px 0 var(--sp-2);
  border-bottom: 2px solid var(--sg-ink);
}

.ds-mkt-plans__table tr.ds-mkt-plans__actions td,
.ds-mkt-plans__table tr.ds-mkt-plans__actions th {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 2px solid var(--sg-ink);
}

.ds-mkt .ds-mkt-plans__table .ds-btn {
  padding: var(--sp-2) var(--sp-3);
  font-size: 16px;
}

.ds-mkt-plans__table tfoot td {
  padding: 14px 0;
  font-weight: 600;
}

/* Marks: green for "yes", with its shape; a short rule for "no". Words stay for a screen reader. */
.ds-mkt-plan__yes {
  color: var(--sg-green);
}

.ds-mkt-plan__no {
  display: inline-block;
  width: 12px;
  height: 0;
  border-top: 2px solid var(--sg-rule-strong);
  vertical-align: middle;
}

.ds-mkt-plans__stack {
  display: none;
}

.ds-mkt-pricing__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-6);
  margin-top: 24px;
}

.ds-mkt-pricing__notes > p {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--sg-hair);
  font-size: 16px;
  line-height: 1.45;
}

.ds-mkt-pricing__notes > p.ds-muted {
  color: var(--sg-ink-2);
}

/* Status words on the page keep the page's own states: green for open, with their shape. */
.ds-mkt-plans .ds-status--ok,
.ds-mkt-plans__table .ds-status--ok {
  color: var(--sg-green);
}

.ds-mkt-plans .ds-status,
.ds-mkt-next {
  font: 400 13px / 1.3 var(--mono);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ── Questions ──────────────────────────────────────────────────────────────────────────── */

.ds-mkt-qgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: start;
}

.ds-mkt-qgrid__head {
  position: sticky;
  top: 88px;
  grid-column: span 4;
}

.ds-mkt-qgrid > div:last-child {
  grid-column: span 8;
}

.ds-mkt-qgroup + .ds-mkt-qgroup {
  margin-top: var(--sp-6);
}

.ds-mkt-qgroup h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sg-ink);
  font: 400 13px / 1.2 var(--mono);
  letter-spacing: 0.02em;
}

.ds-mkt-q {
  border-bottom: 1px solid var(--sg-hair);
}

.ds-mkt-q > summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 0 var(--sp-2);
  min-height: 56px;
  padding: 10px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ds-mkt-q > summary::-webkit-details-marker {
  display: none;
}

.ds-mkt-q > summary .ds-mono {
  color: var(--sg-ink-2);
  font-weight: 400;
}

.ds-mkt-q__plus {
  position: relative;
  width: 14px;
  height: 14px;
}

.ds-mkt-q__plus::before,
.ds-mkt-q__plus::after {
  content: '';
  position: absolute;
  background: var(--sg-ink);
}

.ds-mkt-q__plus::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.ds-mkt-q__plus::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.ds-mkt-q[open] .ds-mkt-q__plus::after {
  opacity: 0;
}

.ds-mkt-q > p {
  max-width: 62ch;
  margin: 0 var(--sp-5) var(--sp-4) 44px;
}

.ds-mkt-qfoot {
  margin-top: var(--sp-5);
}

.ds-mkt-qfoot a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 600;
}

/* ── The base plate ─────────────────────────────────────────────────────────────────────── */

.ds-mkt-base {
  background: var(--sg-bar);
  color: var(--sg-on-bar);
}

.ds-mkt-base a {
  color: var(--sg-on-bar);
}

.ds-mkt .ds-mkt-base a:hover {
  color: var(--sg-yellow);
}

.ds-mkt .ds-mkt-base a.ds-btn:not(.ds-mkt-btn--on-line) {
  color: var(--sg-on-yellow);
}

.ds-mkt .ds-mkt-base a.ds-btn:not(.ds-mkt-btn--on-line):hover {
  border-color: var(--sg-on-bar);
  background: var(--sg-on-bar);
  color: var(--sg-bar);
}

.ds-mkt-base__top {
  padding: var(--sp-7) 0 var(--sp-6);
}

.ds-mkt-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-6);
  font-size: 15px;
  color: var(--sg-on-bar-2);
}

.ds-mkt-key__entry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ds-mkt-key__glyph {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.ds-mkt-key__glyph--wide {
  width: 33px;
}

.ds-mkt-key__entry--ok .ds-mkt-key__glyph {
  color: var(--on-chrome-ok);
}

.ds-mkt-key__entry--signal .ds-mkt-key__glyph {
  color: var(--sg-on-bar);
}

.ds-mkt-key__entry--info .ds-mkt-key__glyph {
  color: var(--on-chrome-info);
}

.ds-mkt-key__entry--next .ds-mkt-key__glyph {
  color: var(--sg-on-bar);
}

.ds-mkt-base__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
  align-items: start;
}

.ds-mkt-base__grid > div:first-child {
  grid-column: span 7;
}

.ds-mkt-base__doors {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  gap: var(--sp-2);
}

.ds-mkt-base .ds-mkt-h2 {
  margin-bottom: var(--sp-3);
  font-stretch: 68%;
  font-weight: 900;
  text-transform: uppercase;
}

.ds-mkt-base__doors p {
  margin: var(--sp-2) 0 14px;
  font-size: 15px;
  color: var(--sg-on-bar-2);
}

.ds-mkt-foot {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr));
  gap: var(--sp-5) 24px;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--sg-bar-edge);
}

.ds-mkt-foot__brand p {
  max-width: 300px;
  margin-top: var(--sp-2);
  font-size: 15px;
  color: var(--sg-on-bar-2);
}

.ds-mkt-foot .ds-eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--sg-yellow);
}

.ds-mkt-foot nav a {
  display: flex;
  align-items: center;
  /* The standard control height at every width, not only on a phone. */
  min-height: var(--hit-touch);
  font-size: 16px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ds-mkt .ds-mkt-foot nav a:hover {
  text-decoration: underline;
}

.ds-mkt-legal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5) 0 40px;
  border-top: 1px solid var(--sg-bar-edge);
  font: 400 13px / 1.5 var(--mono);
  color: var(--sg-on-bar-2);
}

@media (pointer: coarse) {
  .ds-mkt-foot nav a {
    min-height: var(--hit-touch);
  }
}

/* 1023 and below: two-column grids stack; the header becomes brand, sign in and a menu. */
@media (width <= 1023px) {
  .ds-mkt-header {
    position: static;
  }

  .ds-mkt-header__in {
    flex-wrap: wrap;
    min-height: 56px;
  }

  .ds-mkt-brand {
    min-height: 56px;
  }

  .ds-mkt-brand--static {
    min-height: 0;
  }

  .ds-mkt-header__nav,
  .ds-mkt .ds-mkt-header__action {
    display: none;
  }

  .ds-mkt-header__signin {
    min-height: 56px;
  }

  .ds-mkt-signin {
    margin-right: 88px;
  }

  /* The menu takes a row of its own, pulled up so its button sits on the bar; opened, its rows
     push the page down. Only the button and the rows take clicks. */
  .ds-mkt-menu {
    display: block;
    flex: 0 0 100%;
    margin-top: -50px;
    pointer-events: none;
  }

  .ds-mkt-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-height: var(--hit-touch);
    margin: 0 0 6px auto;
    border: 2px solid var(--sg-on-bar);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    pointer-events: auto;
  }

  .ds-mkt-menu > summary::-webkit-details-marker {
    display: none;
  }

  .ds-mkt-menu nav {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--sp-3);
    pointer-events: auto;
  }

  .ds-mkt-menu nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-top: 1px solid var(--sg-bar-edge);
    color: var(--sg-on-bar);
    font-weight: 600;
    text-decoration: none;
  }

  .ds-mkt .ds-mkt-menu nav a:hover {
    color: var(--sg-yellow);
  }

  .ds-mkt-hero {
    padding: 32px 0 0;
  }

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

  .ds-mkt-hero__copy,
  .ds-mkt-hero__head,
  .ds-mkt-hero__grid > .ds-photo {
    grid-column: 1 / -1;
  }

  /* The photograph moves under the copy, edge to edge, and is shorter (4:3). */
  .ds-mkt-hero__grid > .ds-photo {
    display: none;
  }

  .ds-mkt-hero__phone-photo {
    display: block;
    width: calc(100% + 2 * var(--margin));
    margin: 32px calc(-1 * var(--margin)) 0;
  }

  .ds-mkt-hero .ds-mkt-h1 {
    font-size: clamp(60px, 12vw, 104px);
  }

  .ds-mkt-qgrid,
  .ds-mkt-base__grid,
  .ds-mkt-act,
  .ds-mkt-mstep,
  .ds-mkt-notes,
  .ds-mkt-free {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-mkt-mstep__text,
  .ds-mkt-mstep > div:last-child,
  .ds-mkt-notes > div:first-child,
  .ds-mkt-notes > div:last-child,
  .ds-mkt-act__what,
  .ds-mkt-act__do,
  .ds-mkt-free > div:first-child,
  .ds-mkt-free__lines,
  .ds-mkt-qgrid__head,
  .ds-mkt-qgrid > div:last-child,
  .ds-mkt-base__grid > div:first-child,
  .ds-mkt-base__doors {
    grid-column: 1 / -1;
  }

  .ds-mkt-mstep__text,
  .ds-mkt-qgrid__head {
    position: static;
  }

  .ds-mkt-ledger dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) 0;
  }

  .ds-mkt-ledger dl > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .ds-mkt-trades {
    display: block;
  }

  .ds-mkt-trades__frames {
    position: static;
    flex-flow: row wrap;
    margin-top: var(--sp-6);
  }

  .ds-mkt-trades__notes {
    margin-top: var(--sp-5);
  }

  .ds-mkt-show .ds-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-mkt-show .ds-split > div {
    padding: 0;
  }

  .ds-mkt-show .ds-split > div + div {
    margin-top: var(--sp-5);
    padding: var(--sp-4) 0 0;
    border-left: 0;
    border-top: var(--rule-major);
  }

  .ds-mkt ol.ds-mkt-ann {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .ds-mkt-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-mkt-foot__brand {
    grid-column: 1 / -1;
  }

  .ds-board {
    column-gap: 32px;
  }
}

/* 767 and below: the phone. Four columns, a 20px margin, one column of everything. */
@media (width <= 767px) {
  .ds-mkt {
    --margin: 20px;
    --gutter: 16px;
  }

  .ds-sign__in {
    min-height: 56px;
  }

  .ds-sign__title {
    font-size: 32px;
  }

  .ds-mkt-hero {
    padding: 24px 0 0;
  }

  .ds-mkt-hero__copy {
    gap: var(--sp-3);
  }

  .ds-mkt-hero .ds-mkt-h1 {
    font-size: clamp(44px, 15.4vw, 58px);
  }

  .ds-mkt-hero__copy > .ds-mkt-lede {
    font-size: 18px;
  }

  .ds-mkt-hero__phone-photo {
    margin-top: var(--sp-5);
  }

  .ds-mkt-status__long {
    display: none;
  }

  .ds-mkt-status__short {
    display: inline;
  }

  /* First screen: the status line, headline, sub-line, one yellow button, and the contractor's way through. */
  .ds-mkt-doors {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-mkt .ds-mkt-doors .ds-btn {
    min-height: 56px;
  }

  .ds-mkt-door--row-on-phone .ds-btn,
  .ds-mkt-door--row-on-phone .ds-mkt-door__note {
    display: none;
  }

  .ds-mkt-door__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--hit-touch);
    font-weight: 700;
    text-decoration: none;
  }

  .ds-mkt-section {
    padding: var(--sp-6) 0 var(--sp-7);
  }

  .ds-mkt-section--bar > .ds-mkt-wrap {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-7);
  }

  .ds-mkt-h2 {
    font-size: 36px;
  }

  .ds-mkt-h3 {
    font-size: 34px;
  }

  .ds-mkt-heading {
    gap: var(--sp-3);
  }

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

  .ds-board__row {
    display: block;
    padding: 14px 0;
  }

  .ds-board__term {
    display: block;
    font-size: 24px;
  }

  .ds-mkt-show__field {
    padding: var(--sp-3);
  }

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

  .ds-mkt-views {
    display: block;
  }

  .ds-mkt-views__join {
    padding: 10px 0 10px var(--sp-4);
  }

  .ds-mkt-views__join::before {
    flex: none;
    width: 1px;
    height: 32px;
  }

  .ds-mkt-views__join::after {
    display: none;
  }

  .ds-mkt-ledger {
    margin-top: var(--sp-5);
  }

  .ds-mkt-ledger dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ds-mkt-ledger dl > div {
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid var(--sg-hair);
  }

  .ds-mkt-ledger__foot {
    margin-top: 14px;
  }

  .ds-mkt ol.ds-mkt-msteps {
    margin-top: var(--sp-5);
  }

  .ds-mkt-mstep {
    gap: var(--sp-4);
    padding: var(--sp-4) 0 var(--sp-6);
  }

  .ds-mkt-mstep__title {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 14px;
  }

  .ds-mkt-mstep__title .ds-mkt-steps__n {
    width: 48px;
    height: 48px;
    font-size: 30px;
  }

  .ds-mkt-mstep__title h3 {
    font-size: 24px;
    line-height: 1.1;
  }

  .ds-mkt-thread {
    margin-left: 0;
  }

  .ds-mkt-rules > li {
    font-size: 18px;
  }

  .ds-mkt-show .ds-status {
    white-space: normal;
  }

  .ds-mkt-show .ds-filters__link {
    min-height: var(--hit-touch);
  }

  /* Now and with, interleaved: one ruled block per pair. */
  .ds-mkt-cmp {
    display: block;
    margin-top: var(--sp-4);
    border-top: 2px solid var(--sg-ink);
  }

  .ds-mkt-cmp thead {
    display: none;
  }

  .ds-mkt-cmp tbody,
  .ds-mkt-cmp tr {
    display: block;
  }

  .ds-mkt-cmp tr {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--sg-hair);
  }

  .ds-mkt-cmp td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 16px;
  }

  .ds-mkt-cmp td.ds-mkt-cmp__with {
    margin-top: var(--sp-2);
    padding: 0;
    border: 0;
    font-size: 18px;
  }

  .ds-mkt-cmp__now {
    display: block;
    margin-bottom: var(--sp-1);
  }

  .ds-mkt-trades__frames {
    flex-direction: column;
  }

  .ds-mkt-trades__steps {
    margin-top: var(--sp-5);
  }

  .ds-mkt-trades__invite {
    margin-left: 0;
  }

  .ds-mkt-trades__strip {
    margin-top: var(--sp-5);
  }

  /* A section's own action sits in the flow, a full-width button; there is no pinned bar. */
  .ds-mkt-bar,
  .ds-mkt-bar--phone-only {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: var(--sp-5) 0 0;
  }

  .ds-mkt-steps__n {
    width: 48px;
    height: 48px;
    font-size: 30px;
  }

  .ds-mkt-steps > li {
    gap: 0 14px;
  }

  .ds-mkt-steps h3 {
    font-size: 22px;
  }

  .ds-mkt ol.ds-mkt-ann {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-mkt-act {
    margin-top: var(--sp-5);
  }

  .ds-mkt-act__do .ds-btn {
    width: 100%;
  }

  .ds-mkt-act__do > div {
    align-items: stretch;
  }

  .ds-mkt .ds-mkt-free__action {
    width: 100%;
  }

  .ds-mkt-plans__table {
    display: none;
  }

  .ds-mkt-plans__stack {
    display: block;
    margin-top: 24px;
  }

  .ds-mkt-plan {
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) 0 0;
    border-top: 6px solid var(--sg-ink);
  }

  .ds-mkt-plan--next {
    border-top-style: dashed;
  }

  .ds-mkt-plan > .ds-status {
    display: flex;
    margin-bottom: 6px;
  }

  .ds-mkt-plan__band {
    display: block;
    margin-top: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--sg-ink);
  }

  .ds-mkt-plan li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1) 10px;
    min-height: var(--hit-touch);
    padding: 10px 0;
    border-bottom: 1px solid var(--sg-hair);
    font-weight: 600;
    font-size: 16px;
  }

  .ds-mkt-plan li .ds-status {
    white-space: normal;
  }

  .ds-mkt-plan__lacks {
    padding: 10px 0;
  }

  .ds-mkt-plan .ds-btn {
    margin-top: var(--sp-4);
  }

  .ds-mkt-plan__pending {
    margin-top: var(--sp-4);
    font-weight: 600;
    font-size: 16px;
  }

  .ds-mkt-plans__foot {
    font-weight: 600;
    font-size: 16px;
  }

  .ds-mkt-q > summary {
    grid-template-columns: 30px minmax(0, 1fr) 14px;
  }

  .ds-mkt-q > p {
    margin: 0 0 var(--sp-4) 38px;
  }

  .ds-mkt-base__top {
    padding: var(--sp-6) 0 var(--sp-5);
  }

  .ds-mkt-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: var(--sp-5) 0 var(--sp-4);
  }

  .ds-mkt-foot__brand {
    padding-bottom: var(--sp-4);
  }

  .ds-mkt-foot nav {
    padding: var(--sp-3) 0 6px;
    border-top: 1px solid var(--sg-bar-edge);
  }

  .ds-mkt-foot nav a {
    min-height: var(--hit-touch);
  }
}

/* ── Plan details: a value in words, the yearly price, the founding offer ──────────────────── */

.ds-mkt-plan__text {
  font-weight: 600;
}

.ds-mkt-plan__alt {
  display: block;
  margin: 0 0 var(--sp-2);
  font: 400 13px / 1.35 var(--mono);
  color: var(--sg-ink-2);
}

.ds-mkt-founding {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-4) var(--gutter);
  align-items: center;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
}

.ds-mkt-founding > div:first-child {
  grid-column: span 8;
}

.ds-mkt-founding > div:last-child {
  grid-column: span 4;
}

.ds-mkt-founding .ds-eyebrow,
.ds-mkt-founding .ds-mkt-small {
  color: var(--sg-on-yellow);
}

.ds-mkt-founding__offer {
  margin: var(--sp-2) 0 0;
  font: 800 clamp(24px, 3vw, 34px) / 1.1 var(--display);
  font-stretch: 72%;
  text-wrap: balance;
}

.ds-mkt .ds-mkt-founding .ds-btn {
  border-color: var(--sg-bar);
  background: var(--sg-bar);
  color: var(--sg-on-bar);
}

.ds-mkt .ds-mkt-founding a.ds-btn:hover {
  border-color: var(--sg-bar-edge);
  background: var(--sg-bar-edge);
  color: var(--sg-on-bar);
}

@media (width <= 1023px) {
  .ds-mkt-founding > div:first-child,
  .ds-mkt-founding > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ── The agency savings calculator ─────────────────────────────────────────────────────────── */

.ds-calc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
  align-items: start;
}

.ds-calc__form {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
  margin: 0;
}

.ds-calc__answer {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.ds-calc h3 {
  margin: 0;
  font: 800 clamp(24px, 3vw, 30px) / 1.05 var(--display);
  font-stretch: 72%;
}

.ds-calc__slider {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ds-calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ds-calc__label {
  font-weight: 700;
}

.ds-calc__value {
  font: 900 30px / 1 var(--display);
  font-stretch: 72%;
}

.ds-calc__ends {
  display: flex;
  justify-content: space-between;
  font: 400 13px / 1.2 var(--mono);
  color: var(--sg-ink-2);
}

.ds-calc__range {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.ds-calc__range::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--sg-ink);
}

.ds-calc__range::-moz-range-track {
  height: 8px;
  background: var(--sg-ink);
}

.ds-calc__range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 3px solid var(--sg-ink);
  border-radius: 0;
  background: var(--sg-yellow);
  appearance: none;
}

.ds-calc__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--sg-ink);
  border-radius: 0;
  background: var(--sg-yellow);
}

.ds-calc__range:focus-visible {
  outline: 3px solid var(--sg-focus-outer);
  outline-offset: 4px;
}

.ds-calc__margin {
  margin: calc(var(--sp-2) * -1) 0 0;
  font: 400 13px / 1.3 var(--mono);
  color: var(--sg-ink-2);
}

.ds-calc__plans {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-calc__plans legend {
  padding: 0 0 var(--sp-2);
  font-weight: 700;
}

.ds-calc__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-calc__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--sg-ink);
  cursor: pointer;
}

.ds-calc__plan input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ds-calc__plan small {
  font: 400 13px / 1.3 var(--mono);
}

.ds-calc__plan:has(input:checked) {
  background: var(--sg-ink);
  color: var(--sg-paper);
}

.ds-calc__plan:has(input:checked) small {
  color: inherit;
}

.ds-calc__plan:has(input:focus-visible) {
  outline: 3px solid var(--sg-focus-outer);
  outline-offset: 4px;
}

.ds-calc__totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 6px solid var(--sg-ink);
}

.ds-calc__total {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
}

.ds-calc__total + .ds-calc__total {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--sg-hair);
}

.ds-calc__label-mono {
  font: 400 13px / 1.2 var(--mono);
  color: var(--sg-ink-2);
}

.ds-calc__big {
  font: 900 clamp(40px, 5vw, 60px) / 1 var(--display);
  font-stretch: 72%;
  overflow-wrap: anywhere;
}

.ds-calc__sum {
  font-size: 15px;
  color: var(--sg-ink-2);
}

.ds-calc__verdict {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4) var(--sp-4);
}

.ds-calc__verdict--yes {
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
}

.ds-calc__verdict--no {
  border: 2px solid var(--sg-ink);
}

.ds-calc__verdict-head {
  font: 900 clamp(28px, 3.4vw, 40px) / 1.02 var(--display);
  font-stretch: 72%;
  overflow-wrap: anywhere;
}

.ds-calc__verdict--no .ds-calc__verdict-head {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
}

.ds-calc__what {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sg-hair);
}

.ds-calc__what p {
  margin: 0;
  font-size: 15px;
  color: var(--sg-ink-2);
}

.ds-calc__fine {
  margin: 0;
  font: 400 13px / 1.4 var(--mono);
  color: var(--sg-ink-2);
}

@media (width <= 1023px) {
  .ds-calc__form,
  .ds-calc__answer {
    grid-column: 1 / -1;
  }
}

@media (width <= 767px) {
  .ds-calc__value {
    font-size: 26px;
  }

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

  .ds-calc__total + .ds-calc__total {
    padding-left: 0;
    border-top: 1px solid var(--sg-hair);
    border-left: 0;
  }
}

/* ── Straight away, and every trade (approved 3 Nov 2026) ─────────────────────────────────── */

.ds-mkt-now {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-mkt-now__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
}

.ds-mkt-now__col + .ds-mkt-now__col {
  padding-left: var(--sp-6);
  border-left: 2px solid var(--sg-ground);
}

.ds-mkt-now__eyebrow {
  margin: 0;
  color: var(--sg-amber);
  font: 500 13px / 1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ds-mkt-now__col > p {
  margin: 0;
}

.ds-mkt-now__stats,
.ds-mkt-now__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 14px 18px;
  background: var(--sg-ground);
  list-style: none;
}

.ds-mkt-now__stat b {
  font: 800 48px / 1 var(--display);
  font-stretch: 72%;
  text-transform: uppercase;
}

.ds-mkt-now__chips {
  gap: var(--sp-2) 10px;
}

.ds-mkt-now__chips li {
  padding: 4px 10px;
  background: var(--sg-paper);
}

.ds-mkt-now__col > .ds-mkt-now__example {
  color: var(--sg-ink-2);
  font-size: 14px;
}

.ds-mkt-every {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ds-mkt-every__label {
  margin: 0;
  color: var(--sg-amber);
  font: 500 13px / 1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ds-mkt-every__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-mkt-every__grid li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 18px 20px;
  border-left: 6px solid var(--sg-ink);
  background: var(--sg-paper);
}

.ds-mkt-every__name {
  font: 800 26px / 1.05 var(--display);
  font-stretch: 72%;
  text-transform: uppercase;
}

.ds-mkt-every__note {
  color: var(--sg-ink-2);
  font-size: 15px;
}

.ds-mkt-every__else {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: 20px;
  border-top: 6px solid var(--sg-yellow);
  background: var(--sg-paper);
}

.ds-mkt-every__ask {
  font-size: 18px;
  font-weight: 600;
}

.ds-mkt-every__hint {
  flex: 1 1 260px;
  font-size: 18px;
}

.ds-mkt-every .ds-mkt-small {
  margin: 0;
}

/* The plan table's rows say what they are; the bands say what they cover. */
.ds-mkt-plans__table thead td .ds-mkt-small {
  display: block;
  margin-top: var(--sp-1);
}

.ds-mkt-plan__label {
  display: block;
}

.ds-mkt-plan__detail {
  display: block;
  margin-top: 2px;
  color: var(--sg-ink-2);
  font-size: 15px;
  font-weight: 400;
}

.ds-mkt-plan__none {
  color: var(--sg-ink-2);
}

.ds-mkt-plans__bandnote {
  margin-left: var(--sp-3);
  color: var(--sg-ink-2);
  font-size: 15px;
  font-weight: 400;
}

.ds-mkt-plan__with {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.ds-mkt-free__lines strong {
  font-weight: 800;
}

@media (width <= 1023px) {
  .ds-mkt-plans__table {
    table-layout: fixed;
    overflow-wrap: anywhere;
  }

  .ds-mkt-plans__table thead th {
    width: auto;
  }

  .ds-mkt-plans__table thead td,
  .ds-mkt-plans__table tbody th {
    width: 31%;
  }

  .ds-mkt-every__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 767px) {
  .ds-mkt-now {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-mkt-now__col,
  .ds-mkt-now__col + .ds-mkt-now__col {
    padding: var(--sp-5) 0;
    border-left: 0;
  }

  .ds-mkt-now__col + .ds-mkt-now__col {
    border-top: 2px solid var(--sg-ground);
  }

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

  .ds-mkt-every__name {
    font-size: 22px;
  }

  .ds-mkt-plan__band + .ds-mkt-small {
    display: block;
    margin-top: var(--sp-1);
  }
}

/* signage.css */
/*
 * Site signage for the signed-out pages (docs/08 "Signed-out pages: Site signage"): the shared
 * standalone frame (sign-in, invitations, the director's confirmation, signed out, the legal
 * notices, errors), the formal notice's parts, and the token map that lets the app's own form
 * components (Button, Field, OptionList, Strip, StatusMarker) wear the signage palette inside it.
 *
 * `.ds-sg` is that map. The landing page (marketing.css) reads the --sg-* tokens directly instead,
 * because the pictures of the product on it are the app's screens and keep the app's tokens.
 * Square edges, no shadows, one signal: yellow with ink text, never white.
 */

.ds-sg {
  --ground: var(--sg-ground);
  --paper: var(--sg-paper);
  --ink: var(--sg-ink);
  --ink-2: var(--sg-ink-2);
  --hover: var(--sg-wash);
  --selected: var(--sg-wash);
  --rule: var(--sg-hair);
  --rule-strong: var(--sg-rule-strong);
  --signal: var(--sg-yellow);
  --signal-ink: var(--sg-amber);
  --signal-fill: var(--sg-yellow);
  --on-signal: var(--sg-on-yellow);
  --ok: var(--sg-green);
  --ok-fill: var(--sg-green);
  --bad: var(--sg-red);
  --bad-fill: var(--sg-red);
  --on-ink: var(--sg-paper);
  --on-ok: var(--sg-on-state);
  --on-bad: var(--sg-on-state);
  --focus-outer: var(--sg-focus-outer);
  --focus-inner: var(--sg-focus-inner);
  --focus-shadow: 0 0 0 2px var(--sg-focus-inner);
  --display-stretch: 72%;

  color: var(--sg-ink);
  font-size: 18px;
  line-height: 1.5;
}

/* ── Buttons: the primary action is the signal, with ink on it ──────────────────────────────── */

.ds-sg .ds-btn {
  min-height: 52px;
  padding: 0 22px;
  border-color: var(--sg-yellow);
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
  font-size: 18px;
}

.ds-sg .ds-btn:hover {
  border-color: var(--sg-ink);
  background: var(--sg-ink);
  color: var(--sg-paper);
}

.ds-sg .ds-btn--line,
.ds-sg .ds-btn--quiet {
  border-color: var(--sg-ink);
  background: transparent;
  color: var(--sg-ink);
}

.ds-sg .ds-btn--line:hover,
.ds-sg .ds-btn--quiet:hover {
  border-color: var(--sg-ink);
  background: var(--sg-wash);
  color: var(--sg-ink);
}

.ds-sg .ds-btn--danger {
  border-color: var(--sg-red);
  background: var(--sg-red);
  color: var(--sg-on-state);
}

.ds-sg .ds-btn--danger:hover {
  border-color: var(--sg-ink);
  background: var(--sg-red);
  color: var(--sg-on-state);
}

.ds-sg .ds-btn--danger-line {
  border-color: var(--sg-red);
  background: transparent;
  color: var(--sg-red);
}

.ds-sg .ds-btn[aria-disabled='true'],
.ds-sg .ds-btn:disabled {
  border-color: var(--disabled-bg);
  background: var(--disabled-bg);
  color: var(--disabled-fg);
}

.ds-sg a:hover {
  color: var(--sg-amber);
}

.ds-sg a.ds-btn:hover {
  color: var(--sg-paper);
}

.ds-sg a.ds-btn--line:hover,
.ds-sg a.ds-btn--quiet:hover {
  color: var(--sg-ink);
}

/* ── The standalone frame ───────────────────────────────────────────────────────────────────── */

.ds-page {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  min-height: 560px;
  margin: var(--sp-7) auto;
  background: var(--sg-paper);
}

.ds-page--wide {
  max-width: 760px;
}

/* The landing page's width, for a choice laid out side by side ("Get started"). */
.ds-page--full {
  max-width: 1200px;
}

/* A way out on the ink bar ("Sign in"): paper on ink, a 44px target. */
.ds-page__aside {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sg-on-bar);
  font-weight: 700;
}

.ds-sg .ds-page__aside:hover {
  color: var(--sg-yellow);
}

.ds-page__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0 32px;
  background: var(--sg-bar);
  color: var(--sg-on-bar);
}

.ds-page .ds-brand {
  flex-direction: row;
  color: var(--sg-on-bar);
}

.ds-page .ds-brand b {
  font: 900 26px / 1 var(--display);
  font-stretch: 68%;
  letter-spacing: 0;
}

.ds-page .ds-brand b span {
  color: var(--sg-yellow);
  font: inherit;
}

.ds-page__tag {
  font: 400 13px / 1.3 var(--mono);
  letter-spacing: 0.02em;
  color: var(--sg-on-bar-2);
}

/* The band names the page ("Invitation"); the page's own h1 is its heading. */
.ds-page__band {
  padding: 12px 32px;
  background: var(--sg-bar);
  color: var(--sg-on-bar);
  border-top: 1px solid var(--sg-bar-edge);
  font: 900 26px / 0.95 var(--display);
  font-stretch: 68%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ds-page__band--yellow {
  background: var(--sg-yellow);
  color: var(--sg-on-yellow);
  border-top: 0;
}

.ds-page__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--sp-5);
  padding: 28px 32px;
  counter-reset: nsec;
}

.ds-page h1,
.ds-errorpage__title {
  font: 800 clamp(32px, 6vw, 44px) / 1.05 var(--display);
  font-stretch: 72%;
  text-wrap: balance;
}

.ds-page h2 {
  font: 900 22px / 0.95 var(--display);
  font-stretch: 66%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* A choice's legend is the section's heading ("3 · Your answer"). */
.ds-page .ds-options > legend {
  padding: 0 0 6px;
  color: var(--sg-ink);
  font: 900 22px / 0.95 var(--display);
  font-stretch: 66%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Reading width: a form or a notice is read at 60 to 70 characters. */
.ds-page__body p,
.ds-page__body li {
  max-width: 68ch;
  text-wrap: pretty;
}

.ds-page__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 32px;
  border-top: 1px solid var(--sg-hair);
  color: var(--sg-ink-2);
  font: 400 13px / 1.4 var(--mono);
  letter-spacing: 0.02em;
}

.ds-page__foot a {
  color: var(--sg-ink-2);
}

@media (width <= 640px) {
  .ds-page {
    min-height: 100vh;
    margin: 0;
  }

  .ds-page__top,
  .ds-page__band,
  .ds-page__foot {
    padding-inline: 20px;
  }

  .ds-page__body {
    padding: 20px;
  }
}

/* ── The formal notice: a reference block, numbered sections, a reference footer ────────────── */

.ds-ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sg-ink);
  font: 400 13px / 1.4 var(--mono);
  letter-spacing: 0.02em;
}

.ds-ref dt {
  color: var(--sg-ink-2);
}

.ds-ref dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ds-nsec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-3);
  counter-increment: nsec;
}

.ds-nsec__body .ds-dl {
  border-top: 0;
}

.ds-page .ds-options {
  margin-top: var(--sp-3);
}

.ds-nsec__title {
  margin: 0;
}

.ds-nsec--counted .ds-nsec__title::before {
  content: counter(nsec) ' · ';
}

.ds-nsec__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: 10px;
  border-top: 2px solid var(--sg-ink);
}

/* A list of the notice's sections, each a link to its own. */
.ds-contents {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: var(--sp-5);
}

.ds-contents a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
}

/* The facts of an invitation or a request: ruled, a term and its value. */
.ds-page .ds-dl {
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  border-top: 2px solid var(--sg-ink);
}

.ds-page .ds-dl dt,
.ds-page .ds-dl dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--sg-hair);
}

.ds-page .ds-dl dt {
  color: var(--sg-ink-2);
  font-size: 16px;
}

@media (width <= 560px) {
  .ds-page .ds-dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-page .ds-dl dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* ── Get started: who are you? (ChooserDoors) ──────────────────────────────────────────────── */

.ds-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.ds-door {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  padding: 22px;
  border: 1px solid var(--sg-hair);
  border-top: 6px solid var(--sg-ink);
  background: var(--sg-paper);
  color: var(--sg-ink);
  text-decoration: none;
}

.ds-sg .ds-door:hover {
  border-top-color: var(--sg-yellow);
  color: var(--sg-ink);
}

.ds-door__label {
  color: var(--sg-ink-2);
  font: 400 13px / 1.3 var(--mono);
  letter-spacing: 0.02em;
}

.ds-door__title {
  font: 800 32px / 1.05 var(--display);
  font-stretch: 72%;
}

.ds-door__short,
.ds-door__arrow {
  display: none;
}

.ds-door__go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  font-weight: 700;
  text-decoration: underline;
}

.ds-chooser__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--sg-hair);
}

.ds-chooser__more a,
.ds-chooser__more summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.ds-chooser__more summary {
  cursor: pointer;
  text-decoration: underline;
}

@media (width <= 760px) {
  .ds-doors {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 2px solid var(--sg-ink);
  }

  .ds-door {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    column-gap: 12px;
    gap: 2px 12px;
    align-items: center;
    min-height: 72px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--sg-hair);
  }

  .ds-sg .ds-door:hover {
    border-top-color: transparent;
  }

  .ds-door__label,
  .ds-door__body,
  .ds-door__go {
    display: none;
  }

  .ds-door__title {
    grid-column: 1;
    font-size: 24px;
  }

  .ds-door__short {
    display: block;
    grid-column: 1;
    color: var(--sg-ink-2);
    font-size: 15px;
  }

  .ds-door__arrow {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    font: 800 24px / 1 var(--display);
  }

  .ds-chooser__more {
    flex-direction: column;
    gap: 4px;
    padding-top: 0;
    border-top: 0;
  }

  /* On a phone "Sign in" is in the ink bar already (the ChooserPhone design). */
  .ds-chooser__signin {
    display: none;
  }
}