/* Jobs with Eze website (a copy of the WorkAgain marketing site): shared tokens and layout.
   One design, two surfaces: a compact charcoal band (header and headline) that carries the
   Jobs with Eze identity, then a white body where the jobs are the main thing. The white body is
   deliberate: Airtable's standard embed is always white and cannot be restyled.
   Everything sits on one grid: the same left and right edge from the logo to the footer.
   No inline styles anywhere: the CSP in _headers blocks them. */

/* Type. Two families, both SIL Open Font License 1.1, both served from /fonts/ (licences beside them).
   Fraunces is the display face: the headline and the section titles only. This file is an
   instance of the variable font with the soft terminals fixed on (they echo the rounded strokes of
   the W), the "wonky" alternates fixed off, and two axes left live: optical size 24 to 144, which
   the browser follows from the font size, and weight 500 to 650. tools/make-fraunces.py rebuilds it.
   Figtree is the reading face: navigation, job information, forms, metadata and body text. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 650;
  font-display: swap;
  src: url('/fonts/fraunces-latin-soft-opsz-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-wght-normal.woff2') format('woff2');
}
/* While Fraunces loads, the one-line headline is set in a system serif shrunk to the same width
   (measured: Fraunces' display cut is 88.9% as wide as Georgia and 82.0% as wide as Noto Serif,
   Android's serif), so it never wraps and then jumps back. Figtree needs no such rule: it measures
   100.2% of Arial and 101.3% of Roboto. */
@font-face { font-family: 'Fraunces Headline Fallback'; src: local('Georgia'); size-adjust: 88%; }
@font-face { font-family: 'Fraunces Headline Fallback Android'; src: local('Noto Serif'); size-adjust: 81%; }

/* ---------- tokens ---------- */

:root {
  color-scheme: light;

  /* charcoal band */
  --wa-ink: #0D1113;
  --wa-ink-line: #242D33;
  --wa-on-ink: #F0F3F5;
  --wa-on-ink-2: #B4BCC1;
  --wa-pending-on-ink: #E3C572;

  /* white body */
  --wa-canvas: #FFFFFF;
  --wa-raised: #F5F7F8;
  --wa-hairline: #E2E6E9;
  --wa-border: #CBD2D7;
  --wa-control: #76828A;        /* the edge of a field or a checkbox: 3.9:1 on white, so the control is findable */
  --wa-placeholder: #66727B;
  --wa-text: #0D1113;
  --wa-text-2: #4C5862;
  --wa-pending: #80610B;
  --wa-pending-bg: #FBF4E0;
  --wa-error: #B42318;
  --wa-error-bg: #FDECEA;
  --wa-success: #0B6B41;
  --wa-success-bg: #EAFBF2;

  /* brand */
  --wa-brand: #31F889;          /* accents and fills: "next job", the current category, buttons */
  --wa-brand-hover: #5FFAA3;
  --wa-brand-press: #22E67B;
  --wa-on-brand: #0D1113;       /* a label on green is always dark, never white */
  --wa-brand-text: #007A48;     /* green as TEXT on white: #31F889 is unreadable there (1.4:1) */

  --wa-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --wa-font-headline: 'Fraunces', 'Fraunces Headline Fallback', 'Fraunces Headline Fallback Android',
    Georgia, 'Times New Roman', serif;
  --wa-font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --wa-gutter: 20px;
  --wa-content: 1200px;
  --wa-radius: 10px;            /* controls */
  --wa-radius-lg: 14px;         /* the jobs container, the signup card, the category menu */
  --wa-shadow: 0 1px 2px rgba(13, 17, 19, 0.05), 0 12px 32px -16px rgba(13, 17, 19, 0.14);
  --wa-shadow-menu: 0 2px 6px rgba(13, 17, 19, 0.06), 0 20px 44px -12px rgba(13, 17, 19, 0.24);
  --wa-fast: 0.15s;
  --wa-ease: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--wa-ink);      /* what shows when a phone over-scrolls past the header */
}
[hidden] { display: none !important; }

/* The base stays WHITE on purpose. iOS Safari tints both of its bars from the body colour, and a
   charcoal base put a dark fade over the white jobs area at the bottom (tested 2026-09-19).
   Android Chrome takes its charcoal top bar from the theme-color meta tag instead. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--wa-canvas);
  color: var(--wa-text);
  font-family: var(--wa-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
main { flex: 1 0 auto; }

::selection { background: var(--wa-brand); color: var(--wa-on-brand); }

img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, p, ul { margin: 0; }
button, input { font: inherit; color: inherit; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--wa-brand-text);
  outline-offset: 3px;
  border-radius: 6px;
}
.wa-draft :focus-visible,
.wa-header :focus-visible,
.wa-hero :focus-visible { outline-color: var(--wa-brand); }

.wa-wrap {
  width: 100%;
  max-width: calc(var(--wa-content) + 2 * var(--wa-gutter));
  margin-inline: auto;
  padding-left: max(var(--wa-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--wa-gutter), env(safe-area-inset-right, 0px));
}

.wa-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 30;
  padding: 12px 16px;
  border-radius: var(--wa-radius);
  background: var(--wa-brand);
  color: var(--wa-on-brand);
  font-weight: 600;
  text-decoration: none;
}
.wa-skip:focus { top: 12px; }

/* ---------- notices ----------
   .wa-draft was the draft banner until go-live on 2026-09-20. It stays for the design mock, whose
   "Design mock" banner uses it. The pending labels below are still on the page. */

.wa-draft {
  background: #1C1910;
  border-bottom: 1px solid #2E2916;
  color: #D5DADD;
  padding-block: 7px;
  font-size: 14px;
  line-height: 1.4;
}
.wa-draft strong {
  margin-right: 6px;
  color: var(--wa-pending-on-ink);
}

.wa-pending-tag {
  color: var(--wa-pending);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.wa-pending-inline { color: var(--wa-pending-on-ink); }

.wa-pending-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wa-text-2);
}

/* ---------- header (charcoal) ---------- */

.wa-header {
  background: var(--wa-ink);
  color: var(--wa-on-ink);
}
.wa-header__row {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
}
/* The hairline is exactly as wide as the content, not the screen: it draws the grid the page
   sits on. The footer's hairline does the same. */
.wa-header__row::after,
.wa-footer__row::before {
  content: '';
  position: absolute;
  left: max(var(--wa-gutter), env(safe-area-inset-left, 0px));
  right: max(var(--wa-gutter), env(safe-area-inset-right, 0px));
  height: 1px;
}
.wa-header__row::after { bottom: 0; background: var(--wa-ink-line); }
.wa-header--solo .wa-header__row::after { content: none; }     /* no headline below it (404 page) */

.wa-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--wa-on-ink);
  text-decoration: none;
}
.wa-brand img { display: block; width: 17px; height: 20px; }     /* the E mark, 85x100 */
/* Typed stand-in for the wordmark: see the note in index.html. */
.wa-brand__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.wa-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-right: -7px;             /* the last link's padding lines up with the grid edge */
}
.wa-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 7px;
  color: var(--wa-on-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wa-fast) var(--wa-ease);
}
.wa-nav__link--active { color: var(--wa-brand); }
/* The current page is marked on the header's own hairline. */
.wa-nav__link--active::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--wa-brand);
}
.wa-nav__link--pending { color: var(--wa-on-ink-2); }
.wa-nav__link--wide { display: none; }     /* wide screens only; the footer always has it */

/* ---------- headline (charcoal, one composition with the header) ---------- */

.wa-hero {
  background: var(--wa-ink);
  color: var(--wa-on-ink);
  padding-block: 16px 20px;
}

/* The headline uses Fraunces' display cut (optical size 144): tighter and finer than the cut the
   browser would pick by itself. Its four words measure 6.77em, so dividing the space between the
   gutters by 6.95 keeps them on one line on every phone, with a little room to spare. */
.wa-hero h1 {
  font-family: var(--wa-font-headline);
  font-size: min(calc((100vw - 2 * var(--wa-gutter)) / 6.95), 4.5rem);
  font-variation-settings: 'opsz' 144;
  font-weight: 540;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-left: -0.04em;           /* optical: the F's stem, not its side bearing, meets the grid edge */
}
.wa-accent { color: var(--wa-brand); }

.wa-hero__lead {
  margin-top: 10px;
  color: #CDD4D9;
  font-size: 1.0625rem;
  line-height: 1.45;
}

/* No "Last checked" line: removed at the founder's request on 2026-09-20 (see index.html). Its
   rules went with it, from here and from the two wider layouts below. */

/* ---------- jobs (white) ---------- */

.wa-jobs { padding-top: 16px; }
/* Jobs with Eze (2026-10-11): with the signup card hidden, the jobs are the last thing before the
   footer and keep the room the card left above it (48px, 64px from 900px). */
.wa-jobs:last-child { padding-bottom: 48px; }

.wa-jobs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.wa-jobs h2,
.wa-signup h2 {
  font-family: var(--wa-font-display);
  font-size: 1.75rem;
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.wa-jobs h2 { order: 1; }
.wa-jobs__note { order: 3; flex-basis: 100%; }

/* Seen only with scripts switched off, where Airtable's table cannot draw itself. */
.wa-jobs__noscript {
  max-width: 720px;
  margin-top: 10px;
  color: var(--wa-text-2);
  font-size: 15px;
}

/* UNUSED FOR NOW, KEPT ON PURPOSE (2026-09-20, WOR-631). The category controls were removed from
   index.html at the founder's request, because one public jobs view exists and a page cannot filter
   an embedded frame. Their styles stay, from here to the jobs container and in the wider layouts
   below (.wa-jobs__note, .wa-cats, .wa-chips), so that bringing the controls back is a change to
   the HTML alone: the markup is in Git at 808f946. If they have not returned by go-live, delete
   these rules.

   Phones and tablets: a labelled menu. All three choices, with their full names, one tap away,
   and nothing is ever cut off at the screen edge. No script: <details> opens and closes itself. */
.wa-cats {
  position: relative;
  order: 2;
  max-width: 100%;
  margin-left: auto;
}
.wa-cats__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 14px 4px 16px;
  border: 1px solid var(--wa-border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--wa-text);
  font-size: 14px;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color var(--wa-fast) var(--wa-ease), background-color var(--wa-fast) var(--wa-ease);
}
.wa-cats__summary::-webkit-details-marker { display: none; }
.wa-cats__summary:active { background: var(--wa-raised); }
.wa-cats__label { color: var(--wa-text-2); }
.wa-cats__value { font-weight: 600; }
.wa-cats__summary::after {            /* the chevron */
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 3px 5px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--wa-ease);
}
.wa-cats[open] > .wa-cats__summary { border-color: var(--wa-text); }
.wa-cats[open] > .wa-cats__summary::after { margin-bottom: -3px; transform: rotate(225deg); }
/* A tap anywhere outside closes the menu. This layer belongs to the summary, so a tap on it is a
   tap on the summary. */
.wa-cats[open] > .wa-cats__summary::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20;
  cursor: default;
}
.wa-cats__panel {
  position: absolute;
  z-index: 21;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 2 * var(--wa-gutter)));
  padding: 6px;
  border: 1px solid var(--wa-hairline);
  border-radius: var(--wa-radius-lg);
  background: #FFFFFF;
  box-shadow: var(--wa-shadow-menu);
}
.wa-cats__list { padding: 0; list-style: none; }
.wa-cats__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px 8px 10px;
  border-radius: 8px;
  color: var(--wa-text);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--wa-fast) var(--wa-ease);
}
.wa-cats__opt::before {               /* room for the tick, so the three names line up */
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
}
.wa-cats__opt--active { font-weight: 600; }
.wa-cats__opt--active::before {       /* the tick */
  width: 6px;
  height: 11px;
  margin: 0 5px 3px;
  border: solid var(--wa-brand-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
a.wa-cats__opt:active { background: var(--wa-hairline); }
span.wa-cats__opt:not(.wa-cats__opt--active) { color: var(--wa-text-2); }     /* not connected yet */
.wa-cats__note {
  margin: 6px 6px 0;
  padding: 10px 6px 6px;
  border-top: 1px solid var(--wa-hairline);
}

/* Wide screens: the same three choices in one row beside the heading. */
.wa-chips { display: none; }
.wa-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 16px;
  border: 1px solid var(--wa-border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--wa-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--wa-fast) var(--wa-ease), background-color var(--wa-fast) var(--wa-ease);
}
a.wa-chip:active { background: var(--wa-raised); }
.wa-chip--active {
  border-color: var(--wa-brand);
  background: var(--wa-brand);
  color: var(--wa-on-brand);
  font-weight: 600;
}
a.wa-chip--active:active { border-color: var(--wa-brand-press); background: var(--wa-brand-press); }
/* Not connected yet: a dashed outline and quieter text, so nothing looks like it works. */
span.wa-chip:not(.wa-chip--active) { border-style: dashed; color: var(--wa-text-2); }

/* The jobs container. Airtable's frame goes inside and stays plain: only the surroundings are
   styled. A hairline, a soft corner and a faint lift, so the white area stays calm. */
.wa-jobsbox {
  position: relative;
  isolation: isolate;                 /* the waiting layer and the frame stack inside the box only */
  margin-top: 14px;
  border: 1px solid #DCE1E5;
  border-radius: var(--wa-radius-lg);
  background: #FFFFFF;
  box-shadow: var(--wa-shadow);
  overflow: hidden;
}

/* The Airtable embed (WOR-631). The container above supplies the border and the corners. The frame
   is see-through until Airtable paints, so the waiting layer behind it can be read; the box is
   white, so nothing looks different once it has.

   AIRTABLE'S BOTTOM STRIP IS CUT OFF (founder's decision, 2026-09-20). The strip at the bottom of
   the frame, with Airtable's logo and "View larger version", has no switch on any plan. It is 25px
   tall on every screen. The frame is made that much taller and pulled up by as much, so the box
   cuts the strip off and keeps its approved height. The 25px is Airtable's number, not ours: if
   they change it, a sliver shows or the table's last 25px go. tools/check-layout.mjs measures the
   strip on every run and fails when it differs. */
.wa-gallery-frame {
  --wa-airtable-strip: 25px;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 745px;
  height: calc(clamp(560px, 82svh, 760px) + var(--wa-airtable-strip));
  margin-bottom: calc(-1 * var(--wa-airtable-strip));
  border: 0;
  background: transparent;
}

/* The waiting layer behind the frame, and the empty state. One plain strip hints at a table head:
   no fake rows. */
.wa-placeholder {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 320px;
  padding: 68px 20px 32px;
  background: linear-gradient(to bottom, var(--wa-raised) 0 43px, var(--wa-hairline) 43px 44px, transparent 44px);
  color: var(--wa-text-2);
  font-size: 15px;
  text-align: center;
}
.wa-placeholder > * { max-width: 520px; }
.wa-placeholder__title {
  color: var(--wa-text);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* What stands behind the frame while Airtable has not answered, and when it cannot be reached. It
   fills the box and starts at its top, so it is on the first screen of a phone. Visual only. It
   comes after .wa-placeholder on purpose, to win over its centred alignment. */
.wa-jobsbox__wait {
  position: absolute;
  inset: 0;
  z-index: 0;
  align-content: start;
}

/* ---------- signup card (below the jobs on every screen, on the same edges) ---------- */

.wa-signup {
  padding-block: 36px 48px;
  scroll-margin-top: 12px;        /* the header button lands here when the script is off */
}

.wa-signup__card {
  display: grid;
  gap: 20px;
  padding: 24px 20px;
  border: 1px solid var(--wa-hairline);
  border-radius: var(--wa-radius-lg);
  background: var(--wa-raised);
}

/* ---------- the signup form ----------
   Email only. It appears twice: in the charcoal band at the top (.wa-form--ink) and in the card
   below the jobs. One set of rules, and the colours come from the variables below. */

.wa-form {
  --f-text: var(--wa-text);
  --f-muted: var(--wa-text-2);
  --f-bg: #FFFFFF;
  --f-edge: var(--wa-control);
  --f-edge-strong: var(--wa-text);
  --f-placeholder: var(--wa-placeholder);
  --f-ring: rgba(49, 248, 137, 0.55);
  --f-error: var(--wa-error);
  --f-error-ring: rgba(180, 35, 24, 0.22);
  --f-pending: var(--wa-pending);
  --f-pending-bg: var(--wa-pending-bg);
  --f-error-bg: var(--wa-error-bg);
  --f-success: var(--wa-success);
  --f-success-bg: var(--wa-success-bg);
  display: grid;
  gap: 8px;
}
/* On charcoal: a dark field with a light edge, and the green button as the one accent. */
.wa-form--ink {
  --f-text: var(--wa-on-ink);
  --f-muted: var(--wa-on-ink-2);
  --f-bg: #161C21;
  --f-edge: #6B7882;              /* 4.2:1 on the charcoal band */
  --f-edge-strong: var(--wa-brand);
  --f-placeholder: #9AA5AD;
  --f-ring: rgba(49, 248, 137, 0.32);
  --f-error: #FF9A8B;
  --f-error-ring: rgba(255, 154, 139, 0.28);
  --f-pending: var(--wa-pending-on-ink);
  --f-pending-bg: #2A2310;
  --f-error-bg: #2B1512;
  --f-success: #7CF5B1;
  --f-success-bg: #0F2A1C;
}

/* The label row. The amber "not connected" flag that sat beside the label went with the Kit
   connection (WOR-752); the row keeps its shape, and the design mock's marker pair sits in it. */
.wa-form__labelrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}
.wa-field__label {
  display: block;
  color: var(--f-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

/* The field and the button share one row and one height on every screen. */
.wa-form__row {
  display: flex;
  gap: 8px;
}
.wa-form__row .wa-input { flex: 1 1 auto; min-width: 0; }
.wa-form__row .wa-button { flex: none; }

/* 16px type, so a phone does not zoom in when the field takes focus. */
.wa-input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--f-edge);
  border-radius: var(--wa-radius);
  background: var(--f-bg);
  color: var(--f-text);
  font-size: 16px;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--wa-fast) var(--wa-ease), box-shadow var(--wa-fast) var(--wa-ease);
}
.wa-input::placeholder { color: var(--f-placeholder); opacity: 1; }
/* Focus on the field: its edge changes colour (that is the contrast), and the brand green appears
   as a ring around it. The transparent outline becomes visible in Windows' high-contrast mode,
   where shadows are dropped. */
.wa-input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--f-edge-strong);
  border-radius: var(--wa-radius);
  box-shadow: 0 0 0 3px var(--f-ring);
}
.wa-input[aria-invalid="true"] { border-color: var(--f-error); }
.wa-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--f-error-ring); }

.wa-field__error {
  color: var(--f-error);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}
.wa-form__hint {
  color: var(--f-muted);
  font-size: 14px;
  line-height: 1.4;
}

/* What happened, in words: amber while nothing is connected, red when it failed, green when it
   worked. Never colour alone. */
.wa-form__status {
  padding: 10px 12px;
  border-radius: var(--wa-radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
.wa-form__status[data-state="pending"] { background: var(--f-pending-bg); color: var(--f-pending); }
.wa-form__status[data-state="error"] { background: var(--f-error-bg); color: var(--f-error); }
.wa-form__status[data-state="success"] { background: var(--f-success-bg); color: var(--f-success); }
/* A link inside the status line: when the form could not be sent, the line offers Kit's hosted
   signup page (WOR-752). Same colour as the line, underlined, and a tap zone the height of a thumb
   without moving the text: 15px above and below, because 14px type has a shorter box than the 17px
   body links, which need 12px. */
.wa-form__status a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding-block: 15px;
  margin-block: -15px;
}

/* In the band, under the sentence on phones. */
.wa-hero__signup {
  max-width: 460px;
  margin-top: 14px;
  gap: 6px;
}

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

.wa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 8px 22px;
  border: 0;
  border-radius: var(--wa-radius);
  background: var(--wa-brand);
  color: var(--wa-on-brand);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wa-fast) var(--wa-ease), border-color var(--wa-fast) var(--wa-ease);
}
.wa-button:active { background: var(--wa-brand-press); }

/* The outline look for a button that is not connected yet, so it cannot pass for working. Nothing
   uses it today: both Subscribe buttons are brand green by the founder's decisions of 2026-09-19,
   and their "not connected" state is said in words beside the label. Kept for the next control
   that has to look unfinished. */
.wa-button--pending,
.wa-button--pending:active {
  border: 1px dashed var(--f-edge, var(--wa-control));
  background: transparent;
  color: var(--f-muted, var(--wa-text-2));
}
/* Sending: the label changes to words, and a second press does nothing. */
.wa-button[aria-disabled="true"] { cursor: progress; opacity: 0.7; }

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

.wa-footer {
  color: var(--wa-text-2);
  font-size: 14px;
}
.wa-footer__row {
  position: relative;
  padding-block: 10px max(28px, env(safe-area-inset-bottom, 0px));
}
.wa-footer__row::before { top: 0; background: var(--wa-hairline); }
.wa-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  padding: 0;
  list-style: none;
}
.wa-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wa-text);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--wa-fast) var(--wa-ease);
}
.wa-footer__line { margin-top: 2px; }
.wa-footer__copy { white-space: nowrap; }

/* ---------- 404 ---------- */

.wa-notfound { padding-block: 48px 80px; }
.wa-notfound h1 {
  font-family: var(--wa-font-display);
  font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3rem);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.wa-notfound p { margin-top: 14px; max-width: 560px; color: var(--wa-text-2); font-size: 1.0625rem; }
.wa-notfound .wa-button { margin-top: 28px; }

/* ---------- hover, only where a pointer really hovers ----------
   On a touch screen a hover style sticks after the tap, so phones get the pressed states only. */

@media (hover: hover) {
  a.wa-nav__link:hover { color: var(--wa-brand); }
  .wa-cats__summary:hover { border-color: var(--wa-text); }
  a.wa-cats__opt:hover { background: var(--wa-raised); }
  a.wa-chip:hover { border-color: var(--wa-text); }
  a.wa-chip--active:hover { border-color: var(--wa-brand-hover); background: var(--wa-brand-hover); }
  .wa-button:hover { background: var(--wa-brand-hover); }
  .wa-button--pending:hover { border-color: var(--f-text, var(--wa-text)); background: transparent; }
  .wa-input:hover { border-color: var(--f-text); }
  .wa-input:focus-visible:hover { border-color: var(--f-edge-strong); }
  .wa-form__status a:hover { text-decoration-thickness: 2px; }
  .wa-footer__links a:hover { color: var(--wa-brand-text); }
}

/* ---------- mouse and trackpad: the category row can be smaller than a thumb target ---------- */

@media (hover: hover) and (pointer: fine) {
  .wa-chip { min-height: 36px; }
}

/* ---------- small phones ---------- */

@media (max-width: 359px) {
  :root { --wa-gutter: 16px; }
  #wa-nav-contact { display: none; }     /* still in the footer */

  /* Everything tightens a little, so the heading and the labelled menu still share one row and
     the jobs still start on the first screen of the smallest phones. */
  .wa-hero { padding-block: 12px 16px; }
  .wa-hero__lead { font-size: 1rem; }
  .wa-jobs { padding-top: 16px; }
  .wa-jobs h2 { font-size: 1.5rem; }
  .wa-jobs__head { column-gap: 8px; }
  .wa-cats__summary { padding-inline: 12px 10px; }
}

/* ---------- wide screens ---------- */

@media (min-width: 900px) {
  :root { --wa-gutter: 32px; }

  .wa-header__row { min-height: 68px; }
  .wa-brand { gap: 11px; }
  .wa-brand img { width: 20.4px; height: 24px; }
  .wa-brand__name { font-size: 21px; }
  .wa-nav { gap: 8px; margin-right: -12px; }
  .wa-nav__link { padding-inline: 12px; font-size: 15px; }
  .wa-nav__link--active::after { left: 12px; right: 12px; }
  .wa-nav__link--wide { display: inline-flex; }

  .wa-hero { padding-block: 30px 36px; }
  .wa-hero__lead { margin-top: 16px; font-size: 1.125rem; }

  .wa-jobs { padding-top: 32px; }
  .wa-jobs:last-child { padding-bottom: 64px; }
  .wa-jobs h2,
  .wa-signup h2 { font-size: 2rem; }
  .wa-jobs__note { order: 2; flex-basis: auto; }
  .wa-cats { display: none; }
  .wa-chips {
    display: flex;
    flex-wrap: wrap;
    order: 3;
    gap: 8px;
    margin-left: auto;
    padding: 0;
    list-style: none;
  }
  .wa-jobsbox { margin-top: 18px; }
  .wa-placeholder { min-height: 420px; }

  .wa-signup { padding-block: 48px 64px; }
  .wa-signup__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
    padding: 32px 36px;
  }
  .wa-form__row { gap: 10px; }
  .wa-form__row .wa-button { min-width: 132px; }

  .wa-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 32px;
    padding-block: 12px 32px;
  }
  .wa-footer__line { margin-top: 0; }
}

/* ---------- tablets and up: the message and the signup are one composition ----------
   Left: the headline and the sentence. Right: the signup form, on the grid's right edge, level
   with them. The headline still holds one line: it is sized from the width of its own column
   (--wa-h1), which is the screen minus the gutters, the form and the gap.

   WHERE THE FORM SITS, AND WHY. Centring the form's box against the headline and the sentence
   leaves it looking low: measured from pixels, the two ink boxes then share a centre, but the
   form's visual weight (the field and the green button; the label above them is light) sits 12 to
   15px below the message's weight, which is the headline. So the form hangs from a line the eye
   can see instead: the label starts on the headline's cap line, the top of the "F". That puts the
   two weights within 3px of each other on desktop, and the text inside the field lands on the
   headline's baseline. 0.157em is where Fraunces' capitals start inside a line-height of 1, and
   4.3px is the same distance for the label (both measured from pixels).

   The form is anchored at its top, so an error or the "what happened" line grows downwards: the
   field never moves under the visitor's cursor. Until 2026-09-20 that line grew into the empty
   corner beside "Last checked", and from 1024px the band kept its height. With that line gone
   (founder's decision) the band grows by the height of the message while it shows, as it always
   did on phones. */

@media (min-width: 760px) {
  :root {
    --wa-signup-col: clamp(324px, 38vw, 420px);
    --wa-signup-gap: clamp(40px, 5.5vw, 88px);
    --wa-h1: min(calc((100vw - 2 * var(--wa-gutter) - var(--wa-signup-col) - var(--wa-signup-gap)) / 6.95), 4.5rem);
  }
  /* Jobs with Eze (2026-10-11): the email signup is hidden on this site, so the band holds no form.
     These three rules apply only while it does. Without it the headline and the sentence fill the
     band, and the headline keeps the phone rule's size, which reaches its 72px cap here. */
  .wa-hero__grid:has(.wa-hero__signup) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wa-signup-col);
    grid-template-areas:
      "title  signup"
      "lead   signup";
    align-items: start;
    column-gap: var(--wa-signup-gap);
  }
  .wa-hero__grid:has(.wa-hero__signup) h1 { grid-area: title; font-size: var(--wa-h1); }
  .wa-hero__grid:has(.wa-hero__signup) .wa-hero__lead { grid-area: lead; }
  .wa-hero__signup {
    grid-area: signup;
    align-self: start;
    max-width: none;
    margin-top: calc(var(--wa-h1) * 0.157 - 4.3px);
  }
}

/* Laptops and up. */
@media (min-width: 1024px) {
  /* The headline is 72px here, and its capitals are 51px tall. With 4px between the label and the
     field, the distance from the label's cap line to the text inside the field is also 51px: the
     form shares the headline's cap line AND its baseline. Feedback keeps its 8px under the field. */
  .wa-hero__signup { gap: 4px; }
  .wa-hero__signup .wa-field__label { font-size: 16px; }
  .wa-hero__signup .wa-field__error,
  .wa-hero__signup .wa-form__status,
  .wa-hero__signup .wa-form__hint { margin-top: 4px; }
}

/* ---------- reduced motion: nothing moves or fades ---------- */

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

/* ---------- text pages: About, Privacy, Contact, Report a problem (WOR-633) ----------
   The same header and footer as the jobs page; the body is one column of readable text on white,
   Fraunces for the titles only. Widths are for reading, not for the grid. */

.wa-page { padding-block: 40px 80px; }
.wa-page__body { max-width: 680px; }
.wa-page h1 {
  font-family: var(--wa-font-display);
  font-size: clamp(2.125rem, 1.5rem + 3vw, 3rem);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.wa-page__lead { margin-top: 14px; color: var(--wa-text-2); font-size: 1.125rem; }
.wa-page h2 {
  margin-top: 32px;
  font-family: var(--wa-font-display);
  font-size: 1.5rem;
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.wa-page h2.wa-page__h2-small { font-size: 1.25rem; }
.wa-page p { margin-top: 14px; font-size: 1.0625rem; }
/* Links inside the text: green, underlined, and given a tap zone the height of a thumb (44px)
   without moving the text: vertical padding on an inline element grows what a finger can hit but
   not the line, and the negative margin keeps neighbours where they are. Works when a link wraps. */
.wa-page a:not(.wa-button):not(.wa-nav__link):not(.wa-brand) {
  color: var(--wa-brand-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  padding-block: 12px;
  margin-block: -12px;
}
.wa-page__list { margin-top: 14px; padding-left: 1.25em; display: grid; gap: 10px; font-size: 1.0625rem; }
.wa-page__contacts { margin-top: 20px; display: grid; gap: 18px; }
.wa-page__contacts dt { font-weight: 600; }
.wa-page__contacts dd { margin: 4px 0 0; color: var(--wa-text-2); font-size: 1.0625rem; }
.wa-page__contacts dd a { font-size: 1.0625rem; }
.wa-field__optional { font-weight: 400; color: var(--wa-text-2); }

/* The report form: stacked fields, the button under them, never narrower than a thumb needs. */
.wa-report { margin-top: 28px; gap: 18px; }
.wa-report .wa-field { display: grid; gap: 6px; }
.wa-report .wa-input { width: 100%; }
.wa-input--area { min-height: 7.5rem; resize: vertical; line-height: 1.45; padding-block: 12px; font: inherit; }   /* a textarea does not inherit the page font by itself */
.wa-report .wa-button { justify-self: start; }