/* Design tokens: PLAN/modules/35-design-system-and-ux.md §4.2-4.5.
   Semantic tier only; components read these, never raw hex. */

:root {
  /* Light (default) */
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eceef2;
  --surface-selected: #e8eefd;
  --text: #151a22;
  --text-muted: #4b5567;
  --text-faint: #626b7c;
  --border: #d3d8e0;
  --border-strong: #7d8799;
  --action: #1d4ed8;
  --on-action: #ffffff;
  --action-hover: #1a41b5;
  --link: #1d4ed8;
  --focus: #1d4ed8;
  --ok: #17733a;
  --ok-bg: #e5f3ea;
  --warn: #8a5300;
  --warn-bg: #fff3d1;
  --warn-solid: #f2a900;
  --danger: #b91c1c;
  --danger-bg: #fdebeb;
  --danger-solid: #c62828;
  --info: #0b6a86;
  --info-bg: #e2f3f8;
  --brain: #6236c9;
  --brain-bg: #f0eafd;

  /* Category series for report types (never red, blue or violet: those mean danger, action, AI) */
  /* Brand artwork (logo only) */
  --brand-a: #1a9bff;
  --brand-b: #1d5bea;
  --brand-c: #1d3fcf;
  --brand-ink: #0b1220;

  --cat-nearmiss: #d9480f;
  --cat-condition: #b7791f;
  --cat-act: #be185d;
  --cat-idea: #52606d;

  /* Chart series (35 §4.6 chart frame, P1-29): assigned by order, never by tenant; never red, blue, green, amber or
     violet, which mean danger, action, done, waiting and Athena. Validated for colour vision and 3:1 on the surface. */
  --chart-1: #00897b;
  --chart-2: #d45d00;
  --chart-3: #b8338a;
  --chart-4: #7d7a00;

  --shadow-card: 0 1px 2px rgba(21, 26, 34, 0.06), 0 1px 1px rgba(21, 26, 34, 0.04);
  --shadow-menu: 0 8px 24px rgba(21, 26, 34, 0.12), 0 2px 6px rgba(21, 26, 34, 0.08);
  --shadow-dialog: 0 24px 48px rgba(21, 26, 34, 0.18), 0 4px 12px rgba(21, 26, 34, 0.1);

  /* Type (§4.3) */
  --font: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --type-caption: 500 0.75rem/1rem var(--font);
  --type-small: 400 0.875rem/1.25rem var(--font);
  --type-body: 400 1rem/1.5rem var(--font);
  --type-label: 600 0.875rem/1.25rem var(--font);
  --type-title-s: 600 1.125rem/1.625rem var(--font);
  --type-title-m: 650 1.375rem/1.75rem var(--font);
  --type-title-l: 700 1.75rem/2.125rem var(--font);
  --type-number-l: 650 2.25rem/2.5rem var(--font);
  /* The public pages' headings (DESIGN-PASS, 6 Nov 2026): one size, weight and line height each, fluid from a 360 px
     phone to a desktop. Card and list headings use --type-title-s; small capitals over a group use --type-overline. */
  --type-display: 750 clamp(1.875rem, 1.25rem + 2.6vw, 3rem)/1.1 var(--font);
  --type-h1: 700 clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem)/1.15 var(--font);
  --type-h2: 700 clamp(1.5rem, 1.3rem + 0.85vw, 2rem)/1.2 var(--font);
  --type-lead: 400 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.55 var(--font);
  --type-overline: 650 0.75rem/1rem var(--font);
  /* One button system (DESIGN-PASS): every text button is the standard height, or compact where space demands (a header,
     a row); the same words size, weight, corner and padding everywhere. Icon buttons are a 44 px target; chips one height. */
  --type-button: 600 1rem/1.25rem var(--font);
  --btn-h: 48px;
  --btn-h-compact: 40px;
  --btn-pad: 20px;
  --btn-pad-compact: 14px;
  --btn-radius: 10px;
  --icon-btn: 44px;
  --chip-h: 40px;
  /* Section rhythm on the public pages: the same space above and below every section, and between a heading and what
     it introduces. */
  --section-y: clamp(48px, 40px + 2.2vw, 64px);
  --section-gap: clamp(24px, 20px + 1.1vw, 32px);
  --card-pad: clamp(20px, 18px + 0.6vw, 24px);

  /* Space (§4.4) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --target-touch: 44px;
  --target-primary-phone: 56px;
  /* Gloves mode (35 §4.4, §4.12; P1): every control 56 px, the primary 64 px, 12 px between targets, rows 64 px. Read by
     the kit under :root[data-gloves='on'] (base.css), so nothing changes until the switch is on. */
  --target-gloves: 56px;
  --target-gloves-primary: 64px;
  --gap-gloves: 12px;
  --row-gloves: 64px;

  /* Lines and the focus ring: 1 px and 2 px, 2 px and 3 px in Outdoor (35 §4.4). */
  --line: 1px;
  --focus-width: 2px;

  /* Motion (§4.5) */
  --motion-fast: 100ms;
  --motion-base: 160ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* Z-index scale (§4.4) */
  --z-sticky: 100;
  --z-rail: 200;
  --z-topbar: 300;
  --z-popover: 400;
  --z-sheet: 500;
  --z-dialog: 600;
  --z-toast: 700;
  --z-band: 800;

  color-scheme: light;
}

/* Dark is a screen theme: paper always prints in Light (35 §4.17). */
@media screen {
  :root[data-theme='dark'] {
    --canvas: #0d1117;
    --surface: #151a22;
    --surface-raised: #1c222c;
    --surface-sunken: #090c10;
    --surface-selected: #1b2847;
    --text: #e7ebf1;
    --text-muted: #a6b0bf;
    --text-faint: #8c96a6;
    --border: #2a313c;
    --border-strong: #677285;
    --action: #4d7fff;
    --on-action: #06122e;
    --action-hover: #6b95ff;
    --link: #8eb0ff;
    --focus: #8eb0ff;
    --ok: #4cc27a;
    --ok-bg: #0f2a1a;
    --warn: #f4b63f;
    --warn-bg: #2e2208;
    --warn-solid: #f4b63f;
    --danger: #ff7070;
    --danger-bg: #331414;
    --danger-solid: #c53030;
    --info: #4fc3dc;
    --info-bg: #0b2a32;
    --brain: #b39bff;
    --brain-bg: #221a3d;

    --brand-a: #2ea8ff;
    --brand-b: #6b95ff;
    --brand-c: #4d7fff;
    --brand-ink: #ffffff;

    --cat-nearmiss: #ff8a4c;
    --cat-condition: #e5b657;
    --cat-act: #f472b6;
    --cat-idea: #a3aebd;

    --chart-1: #2aa79b;
    --chart-2: #e0702a;
    --chart-3: #cf5aa6;
    --chart-4: #9d9a1f;

    /* Dark uses lighter surfaces and a border instead of shadows (§4.4) */
    --shadow-card: 0 0 0 1px var(--border);
    --shadow-menu: 0 0 0 1px var(--border), 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-dialog: 0 0 0 1px var(--border), 0 24px 48px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

/* Outdoor (35 §4.2 Outdoor column, P1): sunlight, glare and poor screens. Pure white and black, every text tone at least
   7:1, no light greys, 2 px lines, weights 500 and up, a wider focus ring, no shadows (borders only). A screen theme
   like Dark: paper always prints in Light. The values in the plan's table are used as given; brand, category and chart
   tones are the Light ones darkened until they hold 4.5:1 on white (computed in test/tokens.test.ts). */
@media screen {
  :root[data-theme='outdoor'] {
    --canvas: #ffffff;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f2f2f2;
    --surface-selected: #d6e0ff;
    --text: #000000;
    --text-muted: #2b3038;
    --text-faint: #2b3038;
    --border: #3a3f47;
    --border-strong: #000000;
    --action: #0033a0;
    --on-action: #ffffff;
    --action-hover: #002680;
    --link: #0033a0;
    --focus: #0033a0;
    --ok: #0b5a26;
    --ok-bg: #ffffff;
    --warn: #5a3700;
    --warn-bg: #ffffff;
    --warn-solid: #ffc72c;
    --danger: #9e0000;
    --danger-bg: #ffffff;
    --danger-solid: #9e0000;
    --info: #004e63;
    --info-bg: #ffffff;
    --brain: #4a1fa8;
    --brain-bg: #ffffff;

    --brand-a: #0067c2;
    --brand-b: #1d4ed8;
    --brand-c: #0033a0;
    --brand-ink: #000000;

    --cat-nearmiss: #a33500;
    --cat-condition: #6e4800;
    --cat-act: #8f1249;
    --cat-idea: #2b3038;

    --chart-1: #005e55;
    --chart-2: #9a4000;
    --chart-3: #8a1f64;
    --chart-4: #545200;

    /* Borders only: a 2 px ring in place of every shadow. */
    --shadow-card: 0 0 0 2px var(--border);
    --shadow-menu: 0 0 0 2px var(--border-strong);
    --shadow-dialog: 0 0 0 2px var(--border-strong);

    /* No weight under 500 (35 §4.3). */
    --type-small: 500 0.875rem/1.25rem var(--font);
    --type-body: 500 1rem/1.5rem var(--font);

    --line: 2px;
    --focus-width: 3px;

    color-scheme: light;
  }
}

/* Gloves mode (35 §4.12): bigger targets and type 125 %. The switch is per device (apps/web/src/shell/theme.ts). */
:root[data-gloves='on'] {
  --target-touch: var(--target-gloves);
  --target-primary-phone: var(--target-gloves-primary);
  font-size: 125%;
}

@media (max-width: 599px) {
  :root {
    --type-body: 400 1.0625rem/1.625rem var(--font);
  }
  :root[data-theme='outdoor'] {
    --type-body: 500 1.0625rem/1.625rem var(--font);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* The base classes every screen is built from (moved here from apps/web/src/styles/app.css by P0-20, verbatim): the
   reset, status families (fam-*), buttons, chips, counts. Tokens only (35 §4). apps/web imports this at the top of app.css
   through @pm/ui/base.css, so the cascade is exactly what it was. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  font: var(--type-body);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
/* The hidden attribute always wins over a component's display (P0-43: the website's code form showed before the code
   was sent, because .ws-form set display: flex). */
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-width);
  border-radius: var(--radius-s);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tabular,
.tile-value,
.week-num,
.site-card-value {
  font-variant-numeric: tabular-nums slashed-zero;
}
.mono {
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.01em;
}

/* ---------- Status families ---------- */
.fam-neutral {
  --tone: var(--text-faint);
  --tone-bg: var(--surface-sunken);
}
.fam-info {
  --tone: var(--info);
  --tone-bg: var(--info-bg);
}
.fam-action {
  --tone: var(--action);
  --tone-bg: var(--surface-selected);
}
/* Dark: the action blue on its selected tint is under 4.5:1; the chip's words take the link tone (P0-43 axe gate). */
:root[data-theme='dark'] .fam-action {
  --tone: var(--link);
}
.fam-warn {
  --tone: var(--warn);
  --tone-bg: var(--warn-bg);
}
.fam-ok {
  --tone: var(--ok);
  --tone-bg: var(--ok-bg);
}
.fam-danger {
  --tone: var(--danger);
  --tone-bg: var(--danger-bg);
}
.fam-muted {
  --tone: var(--text-faint);
  --tone-bg: var(--surface-sunken);
}
.tone-ok {
  color: var(--ok);
}
.tone-warn {
  color: var(--warn);
}
.tone-danger {
  color: var(--danger);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: var(--type-caption);
  font-weight: 600;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-full);
  color: var(--tone);
  background: var(--tone-bg);
  white-space: nowrap;
}
.chip-quiet {
  background: transparent;
  padding-inline: 0;
  /* A quiet chip is a line of words: it wraps rather than pushing the page sideways (P0-43). */
  white-space: normal;
  max-width: 100%;
}
.tag {
  font: var(--type-caption);
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}

.brain-mark {
  color: var(--brain);
  flex: none;
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: hsl(var(--hue) 55% 28%);
  background: hsl(var(--hue) 70% 90%);
}
:root[data-theme='dark'] .avatar {
  color: hsl(var(--hue) 80% 85%);
  background: hsl(var(--hue) 35% 24%);
}

/* ---------- The logo: the mark and the two-tone name (apps/web Logo.tsx and the website's header draw the same) ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.logo-mark {
  flex: none;
  display: block;
}
.logo-word {
  font: 800 1.0625rem/1.25rem var(--font);
  letter-spacing: -0.03em;
}
.logo-word-a {
  color: var(--brand-ink);
}
.logo-word-b {
  color: var(--brand-b);
}

/* ---------- Buttons ----------
   One button system (DESIGN-PASS, 6 Nov 2026): primary, secondary (plain), ghost and link, in two sizes only. Standard
   is 48 px high; compact (.btn-s) is 40 px, only where space demands (a header, a row of actions). Every text button has
   the same words size, weight, corner and padding. .btn-l and .btn-xl are the standard size (kept as names so nothing
   breaks); the design gate fails any other height (apps/web/e2e/design-system.spec.ts). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border-radius: var(--btn-radius);
  font: var(--type-button);
  white-space: nowrap;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    transform var(--motion-fast);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-l {
  min-height: var(--btn-h);
}
.btn-s {
  min-height: var(--btn-h-compact);
  padding: 0 var(--btn-pad-compact);
}
.btn-xl {
  min-height: var(--btn-h);
  flex: 1 1 100%;
}
.btn-primary {
  background: var(--action);
  color: var(--on-action);
}
.btn-primary:hover:not(:disabled) {
  background: var(--action-hover);
}
.btn-danger {
  background: var(--danger-solid);
  color: #fff;
}
.btn-brain {
  background: var(--brain);
  color: #fff;
}
.btn-brain .brain-mark {
  color: #fff;
}
.btn-brain:hover {
  filter: brightness(1.08);
}
:root[data-theme='dark'] .btn-brain {
  color: #120b2b;
}
:root[data-theme='dark'] .btn-brain .brain-mark {
  color: #120b2b;
}
.btn-plain {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn-plain:hover {
  background: var(--surface-sunken);
}
.btn-ghost {
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--surface-sunken);
  color: var(--text);
}
/* The link button is the compact height: it reads as a link and is still a whole target. */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--btn-h-compact);
  color: var(--link);
  font: var(--type-button);
  padding: 0 2px;
}
.link-btn:hover {
  text-decoration: underline;
}
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  border-radius: var(--btn-radius);
  color: var(--text-muted);
}
.icon-btn:hover {
  background: var(--surface-sunken);
  color: var(--text);
}
.count {
  position: absolute;
  top: 2px;
  inset-inline-end: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--danger-solid);
  color: #fff;
  font: 700 0.6875rem/17px var(--font);
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.count-brain {
  background: var(--brain);
}

/* Reduced motion (35 §4.5, QA item 27): when the person asks for less motion nothing animates, whatever a page's own
   stylesheet says; the motion tokens are already 0 ms (tokens.css), this also stops keyframes and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print (35 §4.17, QA item 36): the page itself on white paper, in Light (the Dark tokens are screen-only), without the
   frame around it: no rail, top bar, phone tabs, Athena's bar, bands, toasts or sheets. */
@media print {
  .rail,
  .topbar,
  .phone-top,
  .tabs,
  .athena-box,
  .band,
  .toasts,
  .update-toast,
  .scrim {
    display: none !important;
  }
  body {
    background: var(--surface);
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
  }
}

/* ---------- Outdoor (35 §4.2, §4.4): 2 px lines on controls, the outline drawn by the border, not a soft shadow ---------- */
:root[data-theme='outdoor'] .btn-plain {
  box-shadow: inset 0 0 0 var(--line) var(--border-strong);
}
:root[data-theme='outdoor'] .tag,
:root[data-theme='outdoor'] .mr-input,
:root[data-theme='outdoor'] .mr-select,
:root[data-theme='outdoor'] input,
:root[data-theme='outdoor'] select,
:root[data-theme='outdoor'] textarea {
  border-width: var(--line);
}
:root[data-theme='outdoor'] .btn:disabled {
  /* Half-faded words vanish in sunlight: disabled keeps full ink and says so with a dashed line. */
  opacity: 1;
  box-shadow: inset 0 0 0 var(--line) var(--border);
  border-style: dashed;
}

/* ---------- Gloves mode (35 §4.4, §4.12, §4.13; P1): every control 56 px, the primary 64 px, 12 px apart ---------- */
:root[data-gloves='on'] .btn,
:root[data-gloves='on'] .link-btn,
:root[data-gloves='on'] .kt-tab,
:root[data-gloves='on'] .kt-athena-btn,
:root[data-gloves='on'] .kt-fold-head,
:root[data-gloves='on'] .mr-input,
:root[data-gloves='on'] .mr-select,
:root[data-gloves='on'] .mr-yesno-btn,
:root[data-gloves='on'] .mr-check,
:root[data-gloves='on'] .mr-search,
:root[data-gloves='on'] .mr-sort,
:root[data-gloves='on'] .mr-jump a,
:root[data-gloves='on'] .pm-read-aloud {
  min-height: var(--target-gloves);
  min-width: var(--target-gloves);
}
:root[data-gloves='on'] .btn-primary,
:root[data-gloves='on'] .btn-xl,
:root[data-gloves='on'] .btn-danger {
  min-height: var(--target-gloves-primary);
}
:root[data-gloves='on'] .kt-row {
  min-height: var(--row-gloves);
}
:root[data-gloves='on'] .mr-num {
  /* Steppers and number boxes, never fine sliders. */
  min-height: var(--target-gloves);
  font-size: 1.25rem;
}
/* 12 px between neighbouring targets wherever controls sit side by side. */
:root[data-gloves='on'] .kt-head-actions,
:root[data-gloves='on'] .kt-sheet-actions,
:root[data-gloves='on'] .kt-tabs,
:root[data-gloves='on'] .mr-actions,
:root[data-gloves='on'] .mr-yesno,
:root[data-gloves='on'] .mr-station-confirm {
  gap: var(--gap-gloves);
}

/* The public website (module 34). Tokens only; every class starts with ws-. */

/* A heading with no class of its own still takes a size from the scale (DESIGN-PASS): never the browser's 2em or 1.17em.
   Placed first, so every component's own heading rule below wins. */
.ws h1 {
  font: var(--type-h1);
}
.ws h2 {
  font: var(--type-h2);
}
.ws h3,
.ws h4 {
  font: var(--type-title-s);
}

.ws {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
}
.ws-wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 24px;
}

.ws-top {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.ws-logo {
  display: flex;
  flex: none;
  align-items: center;
  min-height: var(--icon-btn);
}
.ws-logo svg {
  flex: none;
}
/* The header's buttons are the compact size: space demands it. */
.ws-top-right .btn {
  min-height: var(--btn-h-compact);
  padding: 0 var(--btn-pad-compact);
}
.ws-nav {
  display: flex;
  gap: 24px;
}
.ws-nav a {
  font: var(--type-label);
  color: var(--text-muted);
  text-decoration: none;
}
.ws-nav a:hover,
.ws-nav a.ws-here {
  color: var(--text);
}
.ws-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-menu-btn {
  display: none;
}
.ws-menu {
  position: sticky;
  top: 64px;
  z-index: var(--z-topbar);
  display: flex;
  flex-direction: column;
  padding: 8px 16px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ws-main {
  flex: 1;
}

.ws-hero {
  padding: var(--section-y) 0;
  background: linear-gradient(180deg, var(--surface-selected), var(--surface));
}
.ws-hero-s {
  padding-bottom: calc(var(--section-y) * 0.6);
}
.ws-hero h1 {
  font: var(--type-display);
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: balance;
}
.ws-hero-s h1 {
  font: var(--type-h1);
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.ws-eyebrow {
  font: var(--type-label);
  color: var(--action);
  margin-bottom: 12px;
}
.ws-lead {
  margin-top: 16px;
  max-width: 62ch;
  font: var(--type-lead);
  color: var(--text-muted);
}
/* The line under the lead: smaller, quieter, and kept apart from it. */
.ws-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  max-width: 62ch;
  font: var(--type-small);
  color: var(--text-muted);
}
.ws-hero-note svg {
  flex: none;
  margin-top: 3px;
  color: var(--brain);
}
.ws-free-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font: var(--type-small);
  color: var(--text-muted);
}
.ws-free-line svg {
  flex: none;
  margin-top: 3px;
  color: var(--ok);
}

.ws-build {
  margin-top: 32px;
  max-width: 760px;
}
.ws-build-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 2px var(--action),
    var(--shadow-menu);
}
.ws-build-box.ws-listening {
  box-shadow:
    inset 0 0 0 2px var(--danger),
    var(--shadow-menu);
}
.ws-build-box input {
  flex: 1;
  min-width: 0;
  min-height: var(--btn-h);
  border: 0;
  background: transparent;
  color: var(--text);
  font: var(--type-body);
}
.ws-build-box .mic-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  border-radius: 50%;
  color: var(--text-muted);
}
.ws-build-box .mic-btn:hover {
  background: var(--surface-sunken);
  color: var(--text);
}
.ws-build-box .mic-btn.on {
  background: var(--danger-solid);
  color: #fff;
}
.ws-build > .ws-note {
  margin-top: 12px;
}
.ws-build-box input:focus-visible {
  outline: none;
}
/* Chips: one height everywhere (--chip-h). */
.ws-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ws-chips button {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font: var(--type-small);
  font-weight: 500;
  color: var(--text-muted);
}
.ws-chips button:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ws-building {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--brain);
  font: var(--type-label);
}

.ws-sketch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 20px;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
  animation: rise var(--motion-slow) var(--ease-out);
}
.ws-sketch-head {
  display: flex;
  gap: 12px;
}
.ws-sketch-head p {
  margin-top: 2px;
  font: var(--type-small);
  color: var(--text-muted);
}
.ws-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brain-bg);
  color: var(--brain);
}
.ws-sketch-line {
  display: flex;
  flex-wrap: wrap;
  font: var(--type-label);
}
.ws-sketch-line span + span::before {
  content: '·';
  margin: 0 10px;
  color: var(--text-faint);
}
.ws-sketch-grid {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ws-sketch h3 {
  font: var(--type-overline);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ws-sketch ul,
.ws-sketch ol {
  margin: 0;
  padding-left: 18px;
  font: var(--type-small);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-sketch-first {
  align-self: stretch;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--brain-bg);
}

.ws-section {
  padding: var(--section-y) 0;
}
.ws-quiet {
  background: var(--canvas);
}
.ws-dark {
  background: var(--brand-ink);
  color: #fff;
}
.ws-section h2 {
  font: var(--type-h2);
  letter-spacing: -0.01em;
  max-width: 28ch;
  text-wrap: balance;
}
.ws-section-sub {
  margin-top: 12px;
  max-width: 64ch;
  font: var(--type-body);
  color: var(--text-muted);
}
.ws-section h2 + *,
.ws-section-sub + * {
  margin-top: var(--section-gap);
}
.ws-section h2 + .ws-section-sub {
  margin-top: 12px;
}

.ws-cards {
  display: grid;
  gap: 16px;
}
.ws-cards-3 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ws-cards-4 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ws-cards-5 {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* One card: the same corner, padding and edge for every card, tile and box on the public pages. */
.ws-card {
  padding: var(--card-pad);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--type-title-s);
  margin-bottom: 8px;
}
.ws-card p,
.ws-card ul {
  font: var(--type-body);
  color: var(--text-muted);
}
.ws-card ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-card-human {
  background: var(--ok-bg);
  box-shadow: none;
}
.ws-card-human p {
  color: var(--text);
}
.ws-card-human h3 {
  color: var(--ok);
}

.ws-day {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.ws-day li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 3px solid var(--brain);
  font: var(--type-body);
}
.ws-day-time {
  font: var(--type-title-s);
  color: var(--brain);
}

.ws-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.ws-sector {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--card-pad);
  text-align: left;
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-sector:hover {
  box-shadow: inset 0 0 0 2px var(--action);
}
.ws-sector strong {
  font: var(--type-title-s);
}
.ws-sector span {
  font: var(--type-body);
  color: var(--text-muted);
}

.ws-plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.ws-plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--card-pad);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-plan-main {
  box-shadow: inset 0 0 0 2px var(--action);
}
.ws-plan h3 {
  font: var(--type-title-s);
}
.ws-plan-price {
  font: var(--type-body);
  color: var(--text-muted);
}
.ws-plan-price strong {
  font: var(--type-title-m);
  color: var(--text);
}
.ws-plan-who {
  font: var(--type-body);
  color: var(--text-muted);
}
.ws-plan ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: var(--type-body);
  flex: 1;
}
.ws-plan li {
  display: flex;
  gap: 8px;
}
.ws-plan li svg {
  flex: none;
  margin-top: 5px;
  color: var(--ok);
}
.ws-plan-btn {
  margin-top: 8px;
}
.ws-more {
  margin-top: var(--section-gap);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* A link that stands alone under a section is a link button: the compact height, the button words. */
a.ws-more {
  min-height: var(--btn-h-compact);
  color: var(--link);
  font: var(--type-button);
  text-decoration: underline;
  text-underline-offset: 3px;
}
p > a.ws-more {
  margin-top: 0;
}

.ws-toggle {
  display: inline-flex;
  margin-top: 20px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
}
.ws-toggle button {
  min-height: var(--btn-h-compact);
  padding: 0 var(--btn-pad-compact);
  border-radius: var(--radius-full);
  font: var(--type-label);
  color: var(--text-muted);
}
.ws-toggle .ws-tog-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

.ws-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: var(--card-pad);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-calc-in {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ws-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: var(--type-label);
}
.ws-stepper > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ws-stepper button {
  width: var(--icon-btn);
  height: var(--icon-btn);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font: var(--type-title-s);
}
.ws-stepper span.tabular {
  min-width: 2ch;
  text-align: center;
  font: var(--type-title-s);
}
.ws-calc-check {
  display: flex;
  gap: 10px;
  font: var(--type-small);
}
.ws-calc-out {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: var(--radius-l);
  background: var(--surface-selected);
}
.ws-calc-plan {
  font: var(--type-label);
  color: var(--action);
}
.ws-calc-out strong {
  font: var(--type-number-l);
}
.ws-calc-out p {
  margin-top: 8px;
  font: var(--type-small);
}
.ws-note {
  font: var(--type-small);
  color: var(--text-muted);
}

.ws-two {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px 32px;
}
.ws-two h3 {
  font: var(--type-title-s);
  margin-bottom: 6px;
}
.ws-two p {
  color: var(--text-muted);
  line-height: 1.55;
}

.ws-pills,
.ws-never,
.ws-terms,
.ws-trust {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ws-pills li {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font: var(--type-label);
}
.ws-never {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.ws-never li,
.ws-terms li,
.ws-trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ws-never svg,
.ws-terms svg {
  flex: none;
  margin-top: 3px;
  color: var(--ok);
}
.ws-never + .ws-note {
  margin-top: 16px;
}
.ws-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px 24px;
}
.ws-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
  font: var(--type-label);
  color: var(--text-muted);
}
.ws-trust svg {
  flex: none;
  margin-top: 2px;
  color: var(--action);
}

.ws-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-small);
}
.ws-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ws-table td + td {
  text-align: right;
  color: var(--text-muted);
}
.ws-packs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.ws-packs li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.ws-faq {
  display: flex;
  flex-direction: column;
  max-width: 760px;
}
.ws-faq-item {
  border-bottom: 1px solid var(--border);
}
.ws-faq-item button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  text-align: left;
  font: var(--type-title-s);
}
.ws-faq-item .ws-up {
  transform: rotate(180deg);
}
.ws-faq-item p {
  padding-bottom: 16px;
  color: var(--text-muted);
}

.ws-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.ws-steps li {
  display: flex;
  gap: 14px;
}
.ws-step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-action);
  font: var(--type-title-s);
}
.ws-steps h3 {
  font: var(--type-title-s);
  margin-bottom: 4px;
}
.ws-steps p {
  color: var(--text-muted);
  font: var(--type-body);
}

.ws-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
  padding: var(--card-pad);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-example h3 {
  font: var(--type-title-s);
}
.ws-example strong {
  font: var(--type-title-m);
}
.ws-example span {
  font: var(--type-small);
  color: var(--text-muted);
}

.ws-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}
.ws-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: var(--type-label);
}
.ws-form input,
.ws-form textarea {
  min-height: var(--btn-h);
  padding: 10px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: var(--type-body);
}
.ws-form button {
  align-self: flex-start;
}
.ws-sent {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--type-title-s);
  color: var(--ok);
}

.ws-closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ws-section .ws-closing h2 + * {
  margin-top: 0;
}
.ws-closing p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
}
.ws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.ws-on-dark {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  background: transparent;
}

.ws-foot {
  padding: 48px 0 24px;
  background: var(--canvas);
  border-top: 1px solid var(--border);
}
.ws-foot-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 24px;
}
.ws-foot-grid h3 {
  font: var(--type-overline);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.ws-foot-grid a {
  display: flex;
  align-items: center;
  min-height: 32px;
  font: var(--type-small);
  color: var(--text-muted);
  text-decoration: none;
}
.ws-foot-grid a:hover {
  color: var(--text);
}
.ws-foot-line {
  margin-top: 10px;
  font: var(--type-small);
  color: var(--text-muted);
  max-width: 32ch;
}
.ws-copy {
  margin-top: 32px;
  font: var(--type-caption);
  color: var(--text-faint);
}

@media (max-width: 1040px) {
  .ws-nav,
  .ws-signin {
    display: none;
  }
  .ws-menu-btn {
    display: grid;
  }
}
@media (max-width: 860px) {
  .ws-calc {
    grid-template-columns: 1fr;
  }
  .ws-foot-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ws-foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599px) {
  .ws-top {
    padding: 0 12px;
    gap: 12px;
  }
  .ws-wrap {
    padding: 0 16px;
  }
  .ws-build-box {
    flex-wrap: wrap;
    padding: 8px;
  }
  .ws-build-box input {
    flex: 1 1 0;
    padding-left: 8px;
  }
  .ws-build-box .btn-primary {
    flex: 1 1 100%;
  }
  /* Phone: the examples are one tidy column of equal rows, not ragged pills. */
  .ws-chips {
    flex-direction: column;
    align-items: stretch;
  }
  .ws-chips button {
    justify-content: flex-start;
    border-radius: var(--btn-radius);
    text-align: left;
  }
  .ws-terms {
    grid-template-columns: 1fr;
  }
  .ws-foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- frame additions: resources menu, phone menu, footer room for the Concierge ---------- */

.ws-nav {
  align-items: center;
}
.ws-drop {
  position: relative;
}
.ws-drop > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  font: var(--type-label);
  color: var(--text-muted);
}
.ws-drop > button:hover,
.ws-drop > button.ws-here {
  color: var(--text);
}
.ws-drop .ws-up {
  transform: rotate(180deg);
}
.ws-drop-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -12px;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  box-shadow: var(--shadow-menu);
}
.ws-nav .ws-drop-menu a {
  padding: 10px 12px;
  border-radius: var(--radius-m);
  color: var(--text);
}
.ws-nav .ws-drop-menu a:hover {
  background: var(--surface-selected);
}

.ws-menu {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  gap: 4px;
}
.ws-menu-group {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.ws-menu-group h2 {
  font: var(--type-overline);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ws-menu a {
  display: flex;
  align-items: center;
  min-height: var(--btn-h);
  font: var(--type-title-s);
  color: var(--text);
  text-decoration: none;
}
.ws-menu a.ws-here {
  color: var(--action);
}

/* Room under the footer for the phone's bottom bar (site-more.css .ws-dock), so it never covers the last line. */
.ws-foot {
  padding-bottom: calc(var(--btn-h) + 48px + env(safe-area-inset-bottom));
}

/* ---------- shared page pieces ---------- */

.ws-hero-actions {
  margin-top: 32px;
}
.ws-meta {
  margin-top: 14px;
  font: var(--type-small);
  color: var(--text-muted);
}
.ws-gap {
  margin-top: 16px;
}
.ws-plain {
  max-width: 68ch;
  color: var(--text-muted);
  line-height: 1.6;
}
.ws-plain a,
.ws-note a,
.ws-two p a {
  color: var(--link);
  /* A link inside a sentence is underlined, not told apart by colour alone (WCAG 1.4.1, P0-43 axe gate). */
  text-decoration: underline;
}
.ws-subhead {
  margin: 28px 0 12px;
  font: var(--type-title-s);
}
.ws-eg {
  display: block;
  margin-top: 6px;
  font: var(--type-small);
  color: var(--text-faint);
}
.ws-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-selected);
  color: var(--action);
  font: var(--type-caption);
  font-weight: 650;
}

.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}
.ws-grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}
.ws-linkcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--card-pad);
  text-align: left;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-linkcard:hover {
  box-shadow: inset 0 0 0 2px var(--action);
}
.ws-linkcard strong {
  font: var(--type-title-s);
}
.ws-linkcard > span:not(.ws-tag) {
  font: var(--type-body);
  color: var(--text-muted);
}

.ws-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 10px 24px;
}
.ws-checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.ws-checks svg {
  flex: none;
  margin-top: 3px;
  color: var(--ok);
}

.ws-card .ws-mark {
  margin-bottom: 10px;
}
.ws-card .ws-card-strong {
  font: var(--type-body);
  color: var(--text);
}
.ws-two h3 svg {
  vertical-align: -3px;
  margin-right: 4px;
  color: var(--action);
}

.ws-numbered {
  margin: 0;
  padding-left: 22px;
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.55;
}
.ws-numbered li::marker {
  font-weight: 700;
  color: var(--action);
}

.ws-box {
  padding: var(--card-pad);
  border-radius: var(--radius-l);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--border);
  max-width: 68ch;
}
.ws-box h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--type-title-s);
  margin-bottom: 12px;
}
.ws-box .ws-checks {
  grid-template-columns: 1fr;
}
.ws-box-brain {
  background: var(--brain-bg);
  box-shadow: none;
}
.ws-box-brain h2 {
  color: var(--brain);
}

/* ---------- Athena ---------- */

.ws-levels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px;
}
.ws-levels li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-levels h3 {
  font: var(--type-title-s);
  margin-bottom: 4px;
}
.ws-levels p {
  font: var(--type-body);
  color: var(--text-muted);
}
.ws-reason {
  max-width: 720px;
  padding: var(--card-pad);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ws-reason-head {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.ws-reason-head p {
  margin-top: 2px;
  font: var(--type-small);
  color: var(--text-muted);
}
.ws-reason dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 10px 16px;
  font: var(--type-small);
  line-height: 1.5;
}
.ws-reason dt {
  font-weight: 650;
  color: var(--text-muted);
}
.ws-reason dd {
  margin: 0;
}

.ws-card ul.ws-int {
  list-style: none;
  padding: 0;
  margin-top: 12px;
  gap: 8px;
}
.ws-int strong {
  display: block;
  color: var(--text);
}

/* ---------- changelog ---------- */

.ws-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 820px;
}
.ws-log > li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
}
.ws-log-date {
  font: var(--type-label);
  color: var(--text-muted);
  padding-top: 4px;
}
.ws-log h2 {
  font: var(--type-title-m);
  margin-bottom: 8px;
}
.ws-log p {
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.ws-log .ws-checks {
  grid-template-columns: 1fr;
  font: var(--type-small);
}

/* ---------- guides ---------- */

.ws-article {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.ws-toc {
  position: sticky;
  top: 88px;
}
.ws-toc h2 {
  font: var(--type-overline);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ws-section .ws-toc h2 + * {
  margin-top: 0;
}
.ws-toc ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: var(--type-small);
}
.ws-toc a {
  color: var(--text-muted);
  text-decoration: none;
}
.ws-toc a:hover {
  color: var(--text);
}
.ws-prose {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 68ch;
}
.ws-prose section {
  scroll-margin-top: 84px;
}
.ws-prose h2 {
  font: var(--type-title-m);
  margin-bottom: 10px;
}
.ws-section .ws-prose h2 + *,
.ws-section .ws-box h2 + *,
.ws-section .ws-legal-list h2 + *,
.ws-section .ws-log h2 + * {
  margin-top: 0;
}
.ws-prose p {
  line-height: 1.65;
}
.ws-prose p + p,
.ws-prose ul + p {
  margin-top: 12px;
}
.ws-prose ul {
  margin: 10px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.55;
}
.ws-prose ul.ws-checks {
  padding-left: 0;
  margin: 0;
}

/* ---------- templates ---------- */

.ws-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ws-filter button {
  min-height: var(--chip-h);
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font: var(--type-label);
  color: var(--text-muted);
}
.ws-filter button.ws-filter-on {
  background: var(--action);
  color: var(--on-action);
  box-shadow: none;
}
.ws-filter + .ws-note + .ws-grid {
  margin-top: 16px;
}
.ws-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--brand-ink) 55%, transparent);
}
.ws-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(640px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}
.ws-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.ws-modal-head .ws-eyebrow {
  margin-bottom: 4px;
}
.ws-modal-head h2 {
  font: var(--type-title-l);
}
.ws-modal-sub {
  color: var(--text-muted);
}
.ws-tpl th {
  padding: 8px 0;
  text-align: left;
  font: var(--type-overline);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
}
.ws-tpl th + th,
.ws-tpl td + td {
  text-align: left;
  padding-left: 16px;
  width: 38%;
}
.ws-tpl td {
  overflow-wrap: anywhere;
}

/* ---------- glossary and help search ---------- */

.ws-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-muted);
}
.ws-search:focus-within {
  box-shadow: inset 0 0 0 2px var(--action);
}
.ws-search input {
  flex: 1;
  min-width: 0;
  min-height: var(--btn-h);
  border: 0;
  background: transparent;
  color: var(--text);
  font: var(--type-body);
}
.ws-search input:focus-visible {
  outline: none;
}
.ws-gloss {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 0 40px;
}
.ws-gloss > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.ws-gloss dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: var(--type-title-s);
  margin-bottom: 4px;
}
.ws-gloss dd {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- legal ---------- */

.ws-draft {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  min-height: var(--chip-h);
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--warn-bg);
  color: var(--warn);
  font: var(--type-label);
}
.ws-legal {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 72ch;
}
.ws-legal-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ws-legal-list li::marker {
  font-weight: 700;
}
.ws-legal-list h2 {
  font: var(--type-title-s);
  margin-bottom: 4px;
}
.ws-legal-list p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- the Concierge ---------- */

/* Questions? on a wide screen: a quiet secondary pill in the corner (never a second blue button). On a phone it lives in
   the bottom bar instead (site-more.css .ws-dock). */
.ws-cg-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-popover);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font: var(--type-button);
  box-shadow:
    inset 0 0 0 1px var(--border-strong),
    var(--shadow-menu);
}
.ws-cg-btn:hover {
  background: var(--surface-sunken);
}
.ws-cg {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 32px));
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.ws-cg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--border);
  font: var(--type-title-s);
}
.ws-cg-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.ws-cg-hello {
  font: var(--type-small);
  color: var(--text-muted);
  line-height: 1.5;
}
.ws-cg-hello svg {
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--brain);
}
.ws-cg-msg {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: var(--radius-l);
  font: var(--type-small);
  line-height: 1.5;
}
.ws-cg-you {
  align-self: flex-end;
  background: var(--action);
  color: var(--on-action);
}
.ws-cg-us {
  align-self: flex-start;
  background: var(--canvas);
}
.ws-cg-us .link-btn {
  margin-top: 6px;
}
.ws-cg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}
.ws-cg-chips button {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding: 0 16px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--border);
  font: var(--type-small);
  color: var(--text-muted);
  text-align: left;
}
.ws-cg-chips button:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ws-cg-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px;
  padding: 4px 4px 4px 14px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ws-cg-form:focus-within {
  box-shadow: inset 0 0 0 2px var(--action);
}
.ws-cg-form input {
  flex: 1;
  min-width: 0;
  min-height: var(--icon-btn);
  border: 0;
  background: transparent;
  color: var(--text);
  font: var(--type-body);
}
.ws-cg-form input:focus-visible {
  outline: none;
}
.ws-cg-talk {
  margin: 10px 12px 12px;
}

@media (max-width: 860px) {
  .ws-article {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ws-toc {
    position: static;
  }
}
@media (max-width: 599px) {
  .ws-log > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ws-reason dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .ws-reason dd {
    margin-bottom: 10px;
  }
  .ws-modal {
    padding: 18px 16px;
  }
  .ws-cg {
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    border-radius: 0;
  }
}

.ws-stepper-hint {
  display: block;
  font: var(--type-caption);
  color: var(--text-muted);
}
.ws-calc-go {
  align-self: flex-start;
  margin-top: 14px;
}

/* 360 to 380 px (most Android phones): the full logo, Start free and the menu fit at the normal edge without the page
   moving sideways (it was 1 px too wide at 360). */
@media (min-width: 360px) and (max-width: 380px) {
  .ws-top {
    gap: 8px;
  }
  .ws-top-right {
    gap: 4px;
  }
  .ws-top-right .btn {
    padding-inline: 12px;
  }
}

/* 320 px (WCAG 1.4.10 reflow, P0-43): the header's logo, Start free and the menu fit without pushing the page sideways. */
@media (max-width: 359px) {
  .ws-top {
    gap: 8px;
    padding: 0 8px;
  }
  .ws-top-right {
    gap: 4px;
    min-width: 0;
  }
  .ws-top-right .btn {
    padding-inline: 12px;
  }
  /* Under 360 px the mark alone is the logo: the name would push the menu off the edge. */
  .ws-logo .logo-word {
    display: none;
  }
}

/* ---------- DESIGN-PASS (6 Nov 2026): rhythm inside the hero, and tags that never break ---------- */
.ws-hero .ws-wrap > .ws-note,
.ws-hero .ws-actions + .ws-note {
  margin-top: 12px;
}
.ws-tag {
  flex: none;
  white-space: nowrap;
}
.ws-card h3 {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* The website pages added on 24 Oct 2026 (module 34). Tokens only; every class starts with ws-. */

.ws-self-start {
  align-self: flex-start;
}
.ws-problem {
  color: var(--danger);
  font: var(--type-small);
}
.ws-warn-line {
  padding: 10px 14px;
  border-radius: var(--radius-m);
  background: var(--warn-bg);
  font: var(--type-small);
}

/* Sign up */
.ws-start .ws-wrap {
  max-width: 600px;
}
.ws-start h1 {
  font: var(--type-title-l);
  margin-bottom: 8px;
}
.ws-inapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.ws-code {
  font: var(--type-number-l);
  letter-spacing: 0.3em;
  text-align: center;
  max-width: 260px;
}
.ws-form select {
  min-height: var(--btn-h);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font: var(--type-body);
}
.ws-helped {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Tables with a heading column */
.ws-scroll-x {
  overflow-x: auto;
}
.ws-table-left th,
.ws-table-left td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.ws-table-left td + td {
  text-align: left;
}
.ws-table-left th {
  font-weight: 600;
  color: var(--text);
}
.ws-table-left thead th {
  font: var(--type-caption);
  color: var(--text-muted);
}

/* Status and documents */
.ws-status {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
}
.ws-status li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ws-status-word {
  color: var(--text-muted);
  font: var(--type-small);
}
.ws-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.ws-docs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.ws-docs li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-docs li span {
  color: var(--text-muted);
  font: var(--type-small);
}
@media (max-width: 599px) {
  .ws-docs li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ws-docs li > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

/* Build mine extras and booking */
.ws-demo-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ws-demo-more label {
  cursor: pointer;
}
.ws-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ws-days button {
  min-height: var(--btn-h-compact);
  padding: 0 var(--btn-pad-compact);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font: var(--type-label);
  color: var(--text-muted);
}
.ws-days .ws-tog-on {
  box-shadow: inset 0 0 0 2px var(--action);
  color: var(--text);
}
.ws-chips button.ws-chip-on {
  box-shadow: inset 0 0 0 2px var(--action);
  color: var(--text);
}

/* Roadmap */
.ws-road {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ws-road h2 {
  font: var(--type-title-s);
  margin-bottom: 10px;
}
.ws-road ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-road li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-road li span {
  color: var(--text-muted);
  font: var(--type-small);
}
.ws-road li .link-btn {
  align-self: flex-start;
}
@media (max-width: 860px) {
  .ws-road {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ws-pack {
  max-width: 68ch;
  padding: 16px;
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font: var(--type-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Partner portal and growth console: a plain frame, no marketing header */
.ws-portal {
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
}
.ws-portal-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: var(--type-label);
}
.ws-portal-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 16px 48px;
  max-width: 1280px;
  margin: 0 auto;
}
.ws-portal-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-portal-nav button {
  min-height: 40px;
  padding: 8px 12px;
  text-align: left;
  border-radius: var(--radius-m);
  font: var(--type-label);
  color: var(--text-muted);
}
.ws-portal-nav button:hover {
  background: var(--surface-sunken);
}
.ws-portal-nav button.ws-here {
  background: var(--surface-selected);
  color: var(--action);
}
/* Dark: the action blue on the selected tint is under 4.5:1 (P0-43 axe gate). */
:root[data-theme='dark'] .ws-portal-nav button.ws-here {
  color: var(--link);
}
.ws-portal-h1 {
  font: var(--type-title-l);
}
@media (max-width: 760px) {
  .ws-portal-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-portal-nav {
    flex-direction: row;
    overflow-x: auto;
  }
  .ws-portal-nav button {
    white-space: nowrap;
  }
}

/* The phone's one bottom bar (DESIGN-PASS): Questions? and the page's one blue button side by side, never on top of each
   other or of the page. It shows only once the page's own call to action ([data-cta]) has scrolled away, so a phone never
   shows two of the same button at once (./dock.ts). The footer keeps room for it (site.css .ws-foot). Wide screens keep
   the Questions pill in the corner and no bar. */
.ws-dock {
  display: none;
}
@media (max-width: 599px) {
  .ws-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(21, 26, 34, 0.06);
    transform: translateY(0);
    transition:
      transform var(--motion-base) var(--ease-out),
      visibility var(--motion-base);
  }
  .ws-dock[data-shown='false'] {
    transform: translateY(110%);
    visibility: hidden;
  }
  .ws-dock .btn-primary {
    flex: 1;
  }
  /* On a phone Questions? is in the bar; the corner bubble is not drawn. */
  .ws-cg-btn,
  .pm-concierge-open {
    display: none !important;
  }
}

/* Printable tick-lists on template pages */
.ws-ticklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.ws-ticklist li {
  border-bottom: 1px solid var(--border);
}
.ws-ticklist label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  line-height: 1.45;
}
.ws-ticklist input {
  width: 22px;
  height: 22px;
  flex: none;
}
.ws-ticklist small {
  display: block;
  color: var(--text-muted);
  font: var(--type-small);
}

/* The website's own few additions to the demo's ws- design (apps/web/src/site/site.css): the details-based questions,
   the Concierge bubble, the compare tables and the honeypot. Tokens only. */
.sr-only:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ws-faq-item summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  cursor: pointer;
  padding: 12px 0;
  font: var(--type-title-s);
}
.ws-faq-item p {
  margin: 0 0 14px;
  color: var(--text-muted);
}
.ws-compare table {
  margin-bottom: 24px;
}
.ws-compare caption {
  text-align: left;
  font: var(--type-label);
  padding: 8px 0;
}
.ws-film {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l, 12px);
}
.pm-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
}
/* P1-25: the in-app browser warning, and "We're a sole trader" beside the organisation. */
.ws-inapp {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.ws-check {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pm-concierge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-topbar, 50);
}
.pm-concierge-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  overflow: auto;
  padding: 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
.pm-concierge-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pm-concierge-panel h2 {
  font: var(--type-label);
  margin: 0;
}
.pm-concierge-log {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 8px;
}
.pm-concierge-log .pm-visitor {
  justify-self: end;
  background: var(--accent-bg, var(--surface-2));
  padding: 8px 12px;
  border-radius: 12px;
}
.pm-concierge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.pm-concierge-chips button {
  font: var(--type-small);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}
.pm-concierge-ask {
  display: flex;
  gap: 8px;
}
.pm-concierge-ask input {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .pm-concierge-panel {
    position: fixed;
    inset: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
  }
}
/* S-11: the price in one line at the top of the safety pages and /pricing; other systems' claims with their source;
   the demo walk-through; the draft band on held-back pages. */
.ws-price-line {
  font: var(--type-body);
  margin: 24px 0 0;
  max-width: 760px;
  padding: 12px 16px;
  border-left: 4px solid var(--action);
  background: var(--surface-sunken);
  border-radius: 8px;
}
.ws-claim .ws-source {
  color: var(--text-muted);
  font: var(--type-small);
}
.ws-beside {
  margin: 8px 0 0;
  font: var(--type-small);
  color: var(--text-muted);
}
.ws-walk {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 32px;
}
.ws-walk h3 {
  margin: 0 0 8px;
}
.ws-links a {
  color: inherit;
}
.ws-sources {
  padding-left: 20px;
  overflow-wrap: anywhere;
}
.ws-draft-band {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font: var(--type-label);
  background: var(--warn-bg);
  color: var(--text);
}
.ws-table td,
.ws-table th {
  overflow-wrap: anywhere;
}
.ws-price-line + .ws-note {
  margin-top: 12px;
}
.ws-price-line + .ws-actions {
  margin-top: 24px;
}
/* E24 W-13: the partner forms' groups of ticks, and the printable guide checklists (34 §3.9). */
.ws-form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  gap: 8px;
}
.ws-form legend {
  font: var(--type-label);
  padding: 0 4px;
}
.ws-tickbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 1.5px solid var(--text);
  border-radius: 3px;
  vertical-align: -2px;
}
@media print {
  .ws-top,
  .ws-foot,
  .pm-concierge,
  .ws-noprint,
  .ws-closing,
  .ws-toc {
    display: none !important;
  }
  .ws-section {
    padding: 0;
  }
}
/* DESIGN-PASS (6 Nov 2026): the phone menu (a details element, so it works without the script), and the Questions?
   pill on wide screens drawn like the app's (site.css .ws-cg-btn): a quiet secondary, never a second blue button. On a
   phone it is in the bottom bar (site-more.css .ws-dock). */
.ws-phone-menu {
  display: none;
}
.ws-phone-menu > summary {
  list-style: none;
  cursor: pointer;
}
.ws-phone-menu > summary::-webkit-details-marker {
  display: none;
}
.ws-phone-menu > .ws-menu {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  box-shadow: var(--shadow-menu);
}
@media (max-width: 1040px) {
  .ws-phone-menu {
    display: block;
  }
}
.pm-concierge-open {
  border-radius: var(--radius-full);
  box-shadow:
    inset 0 0 0 1px var(--border-strong),
    var(--shadow-menu);
}
.pm-concierge {
  right: 24px;
  bottom: 24px;
}
.pm-concierge-chips button {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding: 0 16px;
}
.ws-currency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
.ws-currency select {
  min-height: var(--btn-h-compact);
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font: var(--type-small);
}
.ws-hero .ws-actions + .ws-note {
  margin-top: 16px;
}