/* FieldCMD marketing site.
   Colour: the tokens in section 6 of the design brief, two sets on :root. Light is the
   default; dark shows when the phone asks for it.
   Copper is the single accent: the mark's pass, CMD in the wordmark, the primary button.
   Status colours (section 6a) appear only inside the mocks and the pending chip.
   The mocks always sit on their own dark surface, because that is what the app looks like. */

/* ---------- Fonts: IBM Plex, self-hosted, latin subset ---------- */

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

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --canvas: #F4F4F4;
  --surface: #E7E8EB;
  --ink: #1E2536;
  --ink-2: #5E6675;
  --accent: #AB5B35;
  --on-accent: #FFFFFF;

  /* Hairlines: the border that pairs with the surface, as the direction file uses it */
  --line: #C3C7CE;

  /* Status role "Attention", page-level use is the pending chip only */
  --pending-fill: #F8EDD4;
  --pending-border: #D9BC7C;
  --pending-label: #7A5000;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 1rem;
  --pad: 2rem; /* half the space between sections: 64px on a phone */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --canvas: #1E2536;
    --surface: #2A3244;
    --ink: #F4F4F4;
    --ink-2: #98A0AE;

    --line: #414B60;

    --pending-fill: #372D14;
    --pending-border: #7A6428;
    --pending-label: #FBBF24;
  }
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}
@media (min-width: 64rem) {
  :root { --pad: 3rem; } /* 96px between sections on a desktop */
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { min-width: 0; border: 0; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
p { text-wrap: pretty; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

main { flex: 1; }

.wrap {
  width: 100%;
  max-width: calc(70rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* About 70 characters of body copy */
.measure { max-width: 37rem; }

.section { padding-block: var(--pad); }
.band { background: var(--surface); }

/* The icons the mocks use, defined once */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.i {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Type ---------- */

h1 {
  font-size: clamp(2.375rem, 1.2rem + 3.7vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 1.42rem + 1.35vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.section__intro { margin-top: 0.75rem; }

/* Labels and tagline: Plex Mono Regular, 12px, uppercase, tracking +18% */
.lab {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Wordmark: one element. Plex Sans Bold, tracking -3%, CMD always copper, never a space */
.word {
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.word .cmd { color: var(--accent); }

/* ---------- Button: the one primary control per screen, copper with a white label ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(0.92); }
.btn:active { filter: brightness(0.85); }

@media (min-width: 30rem) {
  .btn { width: auto; min-width: 15rem; }
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ---------- Header ---------- */

.site-header { padding-block: 0.625rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  min-height: 2.75rem;
  text-decoration: none;
}
.brand img {
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -0.5rem;
}
.brand .word { font-size: 1.75rem; line-height: 1; }

/* ==========================================================================
   The mocks. Drawn from the real screens, in the brand tokens, on the dark
   surface in both treatments. Everything inside is sized in em, so one drawing
   scales from the 340px hero phone down to the row of six.
   ========================================================================== */

.phone,
.screen {
  --canvas: #1E2536;
  --surface: #2A3244;
  --ink: #F4F4F4;
  --ink-2: #98A0AE;
  --line: #414B60;
  color: var(--ink);
  line-height: 1.3;
  text-align: left;
}

/* Status chips, as the product shows them: fill, border and label together */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.65em;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.chip--live      { background: #17293C; border-color: #2E5A80; color: #6BB0EA; }
.chip--good      { background: #17362C; border-color: #2D6A54; color: #4FD8A5; }
.chip--attention { background: #372D14; border-color: #7A6428; color: #FBBF24; }
.chip--critical  { background: #3A2220; border-color: #7C3A34; color: #F87171; }

/* ---------- The phone: a whole device ---------- */

.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 21.25em; /* 340px when 1em is 16px */
  border: 0.625em solid var(--line);
  border-radius: 2.875em;
  box-shadow: 0 0 0 1px #5E6675;
  background: var(--canvas);
  overflow: hidden;
}
/* The side buttons of the device */
.phone-shell {
  position: relative;
  display: flex;
  flex: 1;
}
.phone-shell::before,
.phone-shell::after {
  content: "";
  position: absolute;
  width: 0.2em;
  border-radius: 0.1em;
  background: #5E6675;
}
.phone-shell::before { top: 7.5em; left: -0.2em; height: 2.4em; }
.phone-shell::after { top: 9em; right: -0.2em; height: 4em; }

/* Status bar */
.sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.5em 0.3em;
  font-size: 0.875em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sb::before {
  content: "";
  order: 1;
  width: 5.2em;
  height: 1.5em;
  border-radius: 0.75em;
  background: var(--surface);
}
.sb span { width: 3.4em; }
.sb svg {
  order: 2;
  width: 3.4em;
  height: 0.95em;
  fill: currentColor;
}

/* Screen */
.scr {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75em;
  padding: 0.6em 0.875em 0.875em;
}
.scr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  min-height: 2em;
}
.scr__title {
  font-size: 1.375em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.scr__sub { color: var(--ink-2); font-size: 0.8125em; }
.m-mono {
  font-family: var(--mono);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* The bottom tab bar */
.tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.6em 0.375em 1.2em;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.tabs span {
  display: grid;
  gap: 0.3em;
  justify-items: center;
  color: var(--ink-2);
  font-size: 0.6875em;
}
.tabs .i { width: 1.9em; height: 1.9em; stroke-width: 1.8; }
.tabs .on { color: var(--ink); font-weight: 600; }

/* Cards, rows, buttons inside a phone */
.m-card {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 0.875em;
  border: 1px solid var(--line);
  border-radius: 0.75em;
  background: var(--surface);
}
.m-card--critical { border-color: #7C3A34; border-width: 2px; }
.m-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}
.m-h { font-size: 1em; font-weight: 600; }
.m-dim { color: var(--ink-2); font-size: 0.8125em; }
.m-strong { font-size: 1.0625em; font-weight: 600; }

.m-job {
  display: grid;
  gap: 0.15em;
  padding: 0.7em 0.8em;
  border-left: 0.25em solid var(--line);
  border-radius: 0.5em;
  background: var(--canvas);
  font-size: 0.9375em;
}

.m-time {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5em;
}
.m-timer {
  font-size: 2.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.m-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}
.m-stack { display: grid; gap: 0.5em; }
.m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.8em 0.5em;
  border: 1px solid var(--ink);
  border-radius: 0.625em;
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.8125em;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.m-btn--outline {
  border-color: var(--ink-2);
  background: transparent;
  color: var(--ink);
}
.m-btn--lg { font-size: 0.9375em; }
.m-btn--sm { padding: 0.5em 0.8em; font-size: 0.75em; }
.m-end { margin-top: auto; }

/* Label and value rows */
.m-rows { display: grid; }
.m-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line);
}
.m-row:last-child { border-bottom: 0; padding-bottom: 0; }
.m-row:first-child { padding-top: 0; }
.m-k {
  flex: none;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6875em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.m-v {
  font-size: 0.875em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* P1: today's summary */
.m-total { display: grid; gap: 0.1em; justify-items: center; padding-bottom: 0.6em; border-bottom: 1px solid var(--line); }
.m-fig {
  font-size: 1.625em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.m-cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  text-align: center;
}
.m-cols3 span { display: grid; gap: 0.1em; }
.m-cols3 b { font-size: 0.9375em; font-weight: 600; font-variant-numeric: tabular-nums; }

/* P2: assignments */
.m-assign {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.7em;
  border-left: 0.25em solid var(--line);
  border-radius: 0.5em;
  background: var(--canvas);
}
.m-assign > span:first-child { display: grid; flex: 1; gap: 0.1em; min-width: 0; }
.m-assign b { font-size: 0.875em; font-weight: 600; }
.m-centre { display: grid; gap: 0.5em; justify-items: center; text-align: center; }
.m-note { display: block; margin-top: 0.25em; text-align: center; }

/* P3: checklist items */
.m-item {
  display: grid;
  gap: 0.5em;
  padding: 0.65em 0.75em;
  border: 1px solid var(--line);
  border-radius: 0.6em;
  background: var(--surface);
}
.m-item__q { font-size: 0.8125em; font-weight: 600; }
.m-pair { display: grid; grid-template-columns: 1fr auto; gap: 0.4em; }
.m-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.45em 0.7em;
  border: 1px solid var(--line);
  border-radius: 0.5em;
  color: var(--ink-2);
  font-size: 0.75em;
  font-weight: 600;
}
.m-opt--on { border-color: var(--ink); color: var(--ink); }
.m-inline { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.m-thumb {
  display: grid;
  place-items: center;
  width: 4.2em;
  height: 2.9em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  background: var(--canvas);
  color: var(--ink-2);
}
.m-flag { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ink-2); font-size: 0.75em; }
.m-input {
  padding: 0.5em 0.7em;
  border: 1px solid var(--line);
  border-radius: 0.5em;
  background: var(--canvas);
  font-size: 0.875em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.m-input--area { min-height: 3.6em; }

/* P5: job card tabs and parts */
.m-tabs {
  display: flex;
  gap: 0.2em;
  margin-inline: -0.875em;
  padding-inline: 0.875em;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.m-tabs span { padding: 0.5em 0.55em 0.6em; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.m-tabs .on { border-color: var(--ink); color: var(--ink); }
.m-part {
  display: grid;
  gap: 0.45em;
  padding: 0.6em 0.7em;
  border: 1px solid var(--line);
  border-radius: 0.6em;
  background: var(--surface);
}
.m-part__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5em; }
.m-part__top > span:first-child { display: grid; gap: 0.1em; }
.m-part b { font-size: 0.8125em; font-weight: 600; }
.m-part__foot { padding-top: 0.4em; border-top: 1px solid var(--line); }

/* P6: the route */
.m-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 0.8em;
  border-radius: 0.6em;
  background: var(--surface);
  border: 1px solid var(--line);
}
.m-route > span { display: grid; gap: 0.15em; }
.m-route > span:last-child { text-align: right; }
.m-route .i { color: var(--ink-2); width: 1.1em; height: 1.1em; }

/* P7: the photo and the sync label */
.m-photo {
  display: grid;
  place-items: center;
  height: 6.5em;
  border: 1px solid var(--line);
  border-radius: 0.6em;
  background: var(--surface);
  color: var(--ink-2);
}
.m-photo .i { width: 1.6em; height: 1.6em; stroke-width: 1.6; }
.m-sync {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6875em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.m-sync::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--ink-2);
}
.m-label { font-size: 0.8125em; font-weight: 600; }

/* ---------- The desktop screen: a browser-shaped frame, as tall as its content ---------- */

.screen {
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  overflow: hidden;
}
/* On a phone the screen keeps a legible size and scrolls sideways inside the frame,
   and the app's sidebar steps aside so the screen opens on its content */
.screen__scroll { overflow-x: auto; }
.screen__inner {
  display: flex;
  min-width: 52rem;
}
.screen__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
}
/* On a desktop it fills the width and everything inside scales with it */
@media (min-width: 64rem) {
  .screen__inner { min-width: 0; container-type: inline-size; }
  .screen__body { font-size: 14px; font-size: calc(100cqw / 70); }
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 0.9em;
  border-bottom: 1px solid var(--line);
}
.bar i {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--line);
}
.bar span {
  width: 22em;
  height: 1.35em;
  margin-left: 0.9em;
  border-radius: 0.7em;
  background: var(--canvas);
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  background: var(--canvas);
}
@media (min-width: 64rem) {
  .app { grid-template-columns: 11em minmax(0, 1fr); }
}
.side {
  display: none;
  flex-direction: column;
  gap: 0.1em;
  padding: 1em 0.6em;
  border-right: 1px solid var(--line);
  /* The nav follows the screen's height and never sets it, so the frame ends where the
     content does. Like the real app, the rest of the nav is below the fold. */
  contain: size;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .side { display: flex; }
}
.side img { width: 1.75em; height: 1.75em; margin: 0 0 0.9em 0.3em; }
.side span {
  padding: 0.45em 0.65em;
  border-radius: 0.4em;
  color: var(--ink-2);
  font-size: 0.78em;
}
.side .on { background: var(--surface); color: var(--ink); font-weight: 600; }
.side b {
  margin-top: 0.9em;
  padding: 0.45em 0.65em 0.2em;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  min-width: 0;
  padding: 1.2em 1.5em 1.5em; /* the 1.5em at the foot is the 24px under the content */
}
.main__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.main__head > span:first-child { display: grid; gap: 0.15em; }
.main__title { font-size: 1.4em; font-weight: 700; letter-spacing: -0.01em; }
.main__sub { color: var(--ink-2); font-size: 0.78em; }
.main__tools { display: flex; align-items: center; gap: 0.6em; }

.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--ink);
  border-radius: 0.45em;
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
}
.s-btn--outline { border-color: var(--line); background: transparent; color: var(--ink); font-weight: 600; }

.s-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 0.45em;
  overflow: hidden;
  font-size: 0.75em;
  white-space: nowrap;
}
.s-seg span { padding: 0.5em 0.8em; color: var(--ink-2); }
.s-seg .on { background: var(--surface); color: var(--ink); font-weight: 600; }

.s-tabs {
  display: flex;
  gap: 1.6em;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.82em;
}
.s-tabs span { padding-bottom: 0.6em; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.s-tabs .on { border-color: var(--ink); color: var(--ink); font-weight: 600; }

.s-card {
  border: 1px solid var(--line);
  border-radius: 0.6em;
  background: var(--surface);
}
.s-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.45em 0.9em;
}
.s-period > span { display: flex; align-items: center; gap: 0.9em; }
.s-period b { font-size: 0.85em; font-weight: 600; }
.s-period small { display: block; color: var(--ink-2); font-size: 0.72em; }
.s-period .i { color: var(--ink-2); }

.s-stats { display: grid; gap: 0.7em; }
.s-stats--2 { grid-template-columns: 1fr 1fr; }
.s-stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.s-stat { display: grid; gap: 0.1em; padding: 0.55em 0.9em; }
.s-stat small { color: var(--ink-2); font-size: 0.72em; }
.s-stat b { font-size: 1.25em; font-weight: 700; font-variant-numeric: tabular-nums; }

.s-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
}
.s-table th,
.s-table td {
  padding: 0.5em 0.9em;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.s-table th {
  color: var(--ink-2);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.s-table tr:last-child td { border-bottom: 0; }
.s-table .l { text-align: left; }
.s-table .c { text-align: center; }
.s-table td:first-child { font-weight: 600; }
.s-table .dim { color: var(--ink-2); }
.s-table .strong { font-weight: 700; }
.s-table .attn { color: #FBBF24; font-weight: 700; }
.s-table .crit { color: #F87171; font-weight: 700; }
.s-tag {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  color: var(--ink-2);
  font-size: 0.88em;
}
.s-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em 1.6em; padding: 0.7em 0.9em; font-size: 0.75em; }
.s-legend b { font-weight: 600; }
.s-legend span:not(.chip) { display: flex; align-items: center; gap: 0.6em; color: var(--ink-2); }
.s-legend .chip,
.s-table .chip { font-size: 0.92em; }

/* D2: the board */
.kan {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5em;
  flex: 1;
  min-height: 0;
}
.kan__col {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.4em;
  border-radius: 0.5em;
  background: var(--surface);
}
.kan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3em;
  min-height: 1.9em;
  padding: 0 0.15em;
  font-size: 0.68em;
  font-weight: 600;
}
.kan__head .chip { font-size: 1em; }
.kan__head small { color: var(--ink-2); font-size: 1em; }
.kan__card {
  display: grid;
  gap: 0.35em;
  padding: 0.6em;
  border: 1px solid var(--line);
  border-radius: 0.45em;
  background: var(--canvas);
  font-size: 0.66em;
}
.kan__card b { font-size: 1.1em; font-weight: 600; }
.kan__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3em; }
.kan__top .m-mono { font-size: 0.9em; white-space: nowrap; }
.kan__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.6em; color: var(--ink-2); }
.kan__foot { padding-top: 0.35em; border-top: 1px solid var(--line); color: var(--ink-2); }
.kan__empty { padding: 1.2em 0; color: var(--ink-2); font-size: 0.66em; text-align: center; }

/* ==========================================================================
   Sections
   ========================================================================== */

/* ---------- 1. Hero ---------- */

.hero { padding-block: 1.25rem var(--pad); }
.hero__grid { display: grid; gap: 2.5rem; }
.hero__lead { margin-top: 1.25rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-top: 1.75rem;
}
/* The phone: 264px on a phone so it sits inside the screen with room either side,
   300px from a large phone up, 340px on a desktop */
.hero__mock {
  display: flex;
  justify-self: center;
  font-size: calc(264px / 21.25);
}
@media (min-width: 30rem) {
  .hero__mock { font-size: calc(300px / 21.25); }
}

@media (min-width: 64rem) {
  .hero { padding-top: 2rem; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
  }
  .hero__mock { font-size: 16px; }
}
@media (prefers-color-scheme: light) {
  .hero__mock .phone { box-shadow: 0 0 0 1px var(--line), 0 1.75em 3.5em rgb(30 37 54 / 0.28); }
}

/* ---------- 2. What your crew does on their phones ---------- */

.steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  padding-top: 0.3rem;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.steps h3,
.steps p { grid-column: 2; }
.steps p { margin-top: 0.25rem; }

@media (min-width: 56rem) {
  .steps {
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 3.5rem;
  }
}

/* The row of six, at 300px each on every screen. On a phone it starts on the column's left
   edge and runs off the right edge of the window, so the next phone shows part-way. */
.phones {
  --inset: var(--gutter);
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 1.5rem var(--inset) 1.25rem;
  background: var(--surface);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inset);
  -webkit-overflow-scrolling: touch;
}
.phones:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
/* On a desktop the row keeps to the column, so the same part of the fourth phone shows
   at the right-hand edge whatever the width of the window */
@media (min-width: 72rem) {
  .phones {
    --inset: var(--gutter);
    width: min(100%, calc(70rem + 2 * var(--gutter)));
    margin-inline: auto;
    border-radius: 1rem;
  }
}
.phones figure {
  display: flex;
  flex: none;
  flex-direction: column;
  scroll-snap-align: start;
  font-size: calc(248px / 21.25);
}
@media (min-width: 30rem) {
  .phones figure { font-size: calc(300px / 21.25); }
}
.phones figcaption {
  margin-top: 0.875rem;
  color: var(--ink-2);
  font-size: 0.75rem;
  text-align: center;
}


/* ---------- 3. What the office gets without asking ---------- */

.office__block { margin-top: 2.5rem; }
.office__block p { margin-top: 0.375rem; }

.office__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.office__grid > div {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.office__grid p { margin-top: 0.375rem; }
@media (min-width: 56rem) {
  .office__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 3.5rem;
  }
}

/* ---------- 4. What's different: six cards in a ruled grid ---------- */

.cards {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.cards li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.375rem 1.25rem 1.625rem;
  background: var(--canvas);
}
.cards .lab { margin-bottom: 0.375rem; color: var(--ink-2); }
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 5. Built alongside a contracting business ---------- */

.built p { margin-top: 1rem; }
.built h2 + p { margin-top: 1.25rem; }

/* Pending chip: Attention status style, fill + border + label, mono, uppercase */
.pending {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--pending-border);
  border-radius: 0.25rem;
  background: var(--pending-fill);
  color: var(--pending-label);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.nb { white-space: nowrap; }

/* ---------- 6. Book a walkthrough ---------- */

.ask { display: grid; gap: 1.75rem; }
.ask h2 + p { margin-top: 1rem; }

@media (min-width: 64rem) {
  .ask {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.form { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.375rem; align-content: start; }
.field > label,
.field > legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.625rem;
  width: 100%;
  font-weight: 600;
  line-height: 1.3;
}
.opt {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 400;
}
.hint {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}
p.hint { margin-top: -0.75rem; }
.field > p.hint { margin-top: -0.125rem; }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--ink-2);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.form textarea { min-height: 5.5rem; resize: vertical; }
.form input:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

.choices {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.choices--pair { grid-template-columns: 1fr 1fr; }
@media (min-width: 30rem) {
  .choices { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 70rem) {
  .choices--pair { display: flex; }
  .choices--pair .choice { flex: 1 1 auto; white-space: nowrap; }
}

/* The radio input covers the whole row, so the tap target is the row, not the dot */
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid var(--ink-2);
  border-radius: 0.375rem;
  background: var(--surface);
  line-height: 1.25;
}
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__dot {
  display: grid;
  flex: none;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.choice__dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
}
.choice input:checked + .choice__dot::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--ink); }
.choice input:focus-visible + .choice__dot {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
@supports selector(:has(*)) {
  .choice input:focus-visible + .choice__dot { outline: 0; }
  .choice:has(input:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }
}

.form .btn { justify-self: start; }

/* ---------- Footer ---------- */

.site-footer { padding-block: var(--pad); }
.site-footer .wrap > div {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* Horizontal lockup, the brand sheet's geometry scaled by --s. At --s:1 the mark box is
   82px, the wordmark 48px and the tagline 12px: the mark's top sits on the wordmark's cap
   line and its foot on the tagline's baseline. The mark is 48px or more, so it is the worn cut. */
.lockup {
  --s: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(6px * var(--s));
  padding-top: calc(14px * var(--s));
}
.lockup img {
  flex: none;
  width: calc(82px * var(--s));
  height: calc(82px * var(--s));
  margin: calc(-14px * var(--s)) 0 calc(-15px * var(--s)) calc(-14px * var(--s));
}
.lockup__text {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--s));
}
.lockup .word { font-size: calc(48px * var(--s)); line-height: 0.7; }
.lockup .tag {
  padding-left: calc(3px * var(--s));
  color: var(--ink-2);
  font-size: calc(12px * var(--s));
  line-height: 0.7;
  white-space: nowrap;
}
@media (max-width: 22rem) {
  .lockup { --s: 0.88; }
}

.footer__lines {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
.footer__lines p,
.footer__lines a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.footer__lines a { color: var(--ink); }

@media (min-width: 48rem) {
  .site-footer .wrap > div {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .footer__lines { display: grid; justify-items: end; }
}

/* ==========================================================================
   The form's honeypot and messages, and the small pages: /thanks, /privacy,
   the not-found page, and the pages the enquiry function answers with.
   ========================================================================== */

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.error {
  padding-left: 0.625rem;
  border-left: 3px solid var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}
p.error.field--full { margin-top: -0.75rem; }
.form input[aria-invalid="true"] {
  padding: calc(0.625rem - 1px) calc(0.75rem - 1px);
  border-width: 3px;
  border-color: var(--ink);
}
.field.is-invalid .choice { border-color: var(--ink); }
.field.is-invalid > .error { margin-top: 0.25rem; }
.form--fix {
  grid-template-columns: minmax(0, 1fr);
  max-width: 30rem;
  margin-top: 1.5rem;
}
.form--fix p.error { margin-top: 0; }
.form--again { max-width: 44rem; margin-top: 2rem; }

.page { padding-block: var(--pad) calc(var(--pad) * 2); }
.page h1 { margin-bottom: 1.25rem; }
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 1.5rem;
  font-weight: 600;
}
.back svg { flex: none; }
.spec {
  max-width: 56rem;
  margin-top: 2rem;
  border-top: 1px solid var(--ink-2);
}
.spec__row {
  display: grid;
  gap: 0.375rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--ink-2);
}
.spec__row .lab { padding-top: 0.25rem; color: var(--ink-2); }
@media (min-width: 48rem) {
  .spec__row {
    grid-template-columns: 15rem minmax(0, 37rem);
    gap: 2rem;
  }
}

/* Metricool visit counter: one invisible image, kept out of the layout. */
.tracker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ---------- A hint that a row or a screen moves sideways ---------- */
.hint-swipe {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 2.25rem;
  padding-inline: var(--gutter);
  color: var(--ink-2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hint-swipe .on-desktop { display: none; }
.hint-swipe--screen { margin-top: 1.25rem; padding-inline: 0; }
.hint-swipe--screen + .screen { margin-top: 0.5rem; }
@media (min-width: 64rem) {
  .hint-swipe .on-touch { display: none; }
  .hint-swipe .on-desktop { display: inline; }
  .hint-swipe--screen { display: none; }
}
@media (min-width: 72rem) {
  .hint-swipe { width: min(100%, calc(70rem + 2 * var(--gutter))); margin-inline: auto; }
}