/*
  The one page's stylesheet: round 4's Cards (#20, prototype/onepager-4 at
  d73b754), which Tyler picked on 5 November 2026, with his changes (#2,
  rulings 68 to 72 and 75 of the design run). It holds round 4's shared base,
  round 3's b with that round's changes: the copy of ruling 50, a larger body
  step and tighter section gaps, the map of four stations (ruling 56), and the
  foot as a solid survey-blue band. Within it, by the part they belong to,
  stand the contour field of the first screen and Cards' own parts: the
  vignettes over the offers, the diagram with the Blueprint, and the three
  step cards. DESIGN.md describes the tokens below.

  Colour (ruling 52): survey blue, the ground and white, and mixes of these
  by color-mix only, each a token below. Every word is survey blue on the
  ground or on a white card, or white on the band.

  Contrast pairs, read by test/contrast.test.ts from the lines that start
  "pair:" (WCAG 2.2 AA: 4.5 to 1 for text, 3 to 1 for a focus ring):
  pair: primary on paper 4.5, every word on the ground, at rest, on hover and on focus
  pair: paper on primary 4.5, the skip link while it has focus
  pair: primary on paper 3, the focus ring on the ground
  pair: on-band on primary 4.5, the band's name and its "Contact us"
  pair: on-band on primary 3, the focus ring on the band
  pair: primary on white 4.5, the steps' names and lines on their white cards
*/

/* Boska sets the h1, Elstob everything else, all of it upright. Elstob's
   italic left the page when the section titles went upright (ruling 71),
   since no other word is set in it. Elstob's file name holds brackets and
   commas, written percent-encoded here and in the preload, since the server
   redirects the raw form. */
@font-face {
  font-family: Boska;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/boska/Boska-Light.woff2') format('woff2');
}

@font-face {
  font-family: Boska;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/boska/Boska-Regular.woff2') format('woff2');
}

@font-face {
  font-family: Elstob;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/elstob/Elstob%5BGRAD%2Copsz%2Cwght%5D.woff2') format('woff2');
}

:root {
  /* The three colours (rulings 32 and 52). The ground is the one token
     --paper, so a change of ground is this one line. */
  --paper: #f3f2ec;
  --primary: #1f3a93;
  --white: #fff;

  /* The mixes. --rule is the kit's neat line, survey blue at half strength
     on the ground: the map's frame. --hairline edges the step cards and the
     diagram's pills, --faint fills a glyph's tile in the diagram, --blue-light
     is the lighter of the drawings' two blues (the map's water lines and the
     diagram's waiting steps), and
     --stand-in the grey bars that stand in for text in a drawing. On the
     band, --ridge draws the ridge and --hatch the hatched F. */
  --rule: color-mix(in srgb, var(--primary) 50%, var(--paper));
  --hairline: color-mix(in srgb, var(--primary) 28%, var(--paper));
  --faint: color-mix(in srgb, var(--primary) 9%, var(--paper));
  --blue-light: color-mix(in srgb, var(--primary) 40%, var(--paper));
  --stand-in: color-mix(in srgb, var(--primary) 16%, var(--paper));
  --on-band: var(--white);
  --ridge: color-mix(in srgb, var(--white) 55%, var(--primary));
  --hatch: color-mix(in srgb, var(--white) 30%, var(--primary));
  --display-face: 'Boska', serif;
  --text-face: 'Elstob', serif;

  /* The four steps, fluid from 390 to 1440. Round 4 raised the text step,
     18 to 20px in round 3, to 19 to 22px, and its line from 28 to 31px to 29
     to 34px. The build (#2) takes the small step, whose one use was the
     closing line's note (ruling 69), and sets in its place the name step,
     21 to 26px on 30 to 36px, between the text and the lead, so the offers'
     and the steps' names stand larger than the text (ruling 75, L5). */
  --display: clamp(40px, 4.6vw + 12px, 78px);
  --display-lh: 1.1;
  --display-track: -0.01em;
  --lead: clamp(23px, 0.857vw + 19.66px, 32px);
  --lead-lh: clamp(31px, 1.048vw + 26.91px, 42px);
  --lead-track: 0;
  --name: clamp(21px, 0.476vw + 19.14px, 26px);
  --name-lh: clamp(30px, 0.571vw + 27.77px, 36px);
  --text: clamp(19px, 0.286vw + 17.89px, 22px);
  --text-lh: clamp(29px, 0.476vw + 27.14px, 34px);

  /* The grid and the header. */
  --margin: 20px;
  --gutter: 16px;
  --head: 64px;
  --mark: 36px;

  /* The six gaps, and the first screen's top offset. No other gap exists.
     Round 4 tightens the section gap, --s6, from 96px to 64px on the phone
     and from 144px to 96px from 768, and --s5 from 48px to 40px and from
     64px to 56px. */
  --s1: 8px;
  --s2: 12px;
  --s3: 20px;
  --s4: 32px;
  --s5: 40px;
  --s6: 64px;
  --top: 40px;

  /* A link's line box, tall enough to tap. */
  --tap: 44px;

  /* The band: its ridge's height, the file's own at every width. */
  --ridge-h: 56px;
}

@media (width >= 768px) {
  :root {
    --display-lh: 1.05;
    --display-track: -0.015em;
    --lead-track: -0.005em;
    --margin: 40px;
    --gutter: 20px;
    --head: 72px;
    --mark: 40px;
    --s2: 16px;
    --s3: 24px;
    --s4: 40px;
    --s5: 56px;
    --s6: 96px;
    --top: clamp(32px, 24.24vh - 130px, 88px);
  }
}

@media (width >= 1024px) {
  :root {
    --margin: 64px;
    --gutter: 24px;
    --head: 80px;
  }
}

@media (width >= 1440px) {
  :root {
    --head: 96px;
  }
}

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

/* The root takes the ground and the blue too, so no computed colour on the
   page falls back to the browser's black (ruling 52). */
html {
  background: var(--paper);
  color: var(--primary);
  text-size-adjust: 100%;
  scrollbar-color: var(--rule) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  font: 400 var(--text) / var(--text-lh) var(--text-face);
  font-optical-sizing: auto;
}

::selection {
  background: var(--primary);
  color: var(--paper);
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

/* Above 1440 the grid holds at 1280, centred. The band runs edge to edge,
   and its row keeps to the grid. */
.site-head,
main,
.contact,
.band-row {
  width: min(100% - 2 * var(--margin), 1280px);
  margin-inline: auto;
}

.visually-hidden,
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Links: underlined in the blue, the line clear of descenders. Hover
   thickens it by 1px at once. */
a {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* The skip link, filled only while it has focus, and a 44px tap box tall. */
.skip:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 10px 14px;
  background: var(--primary);
  color: var(--paper);
  font-size: 18px;
  line-height: 24px;
  text-decoration-line: none;
}

/* Contour F (ruling 5), one file recoloured by token. Its paths span 48 by
   56 of the file's 64 units, so the box is the drawn mark exactly. */
.mark {
  flex: none;
  width: calc(var(--mark) * 48 / 56);
  height: var(--mark);
  background: var(--primary);
  mask-image: url('/assets/contour-f.svg');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: calc(var(--mark) * 64 / 56);
}

/* 1. The header: the mark on the page edge and the name. It does not stick,
   and it stands in front of the contour field. */
.site-head {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  height: var(--head);
}

/* The first screen: the h1 and "Contact us" beneath it (ruling 40). */
.first {
  padding-top: var(--top);
}

h1 {
  max-width: 10.4em;
  color: var(--primary);
  font: 300 var(--display) / var(--display-lh) var(--display-face);
  letter-spacing: var(--display-track);
  text-wrap: pretty;
}

/* The key phrase: one cut heavier, in the h1's own ink (ruling 38). */
h1 strong {
  font-weight: 400;
}

.cta {
  display: block;
  width: fit-content;
  margin-top: var(--s4);
  font-size: var(--lead);
  line-height: var(--tap);
  letter-spacing: var(--lead-track);
  text-decoration-thickness: 1.5px;
}

/* The contour field (rulings 70, 77 and 79): the files of /assets/hero/,
   which scripts/contours/hero.mjs writes, one frame from 1366, 1024 and 768
   and the phone's crop below. Each file shows at its natural size, so the
   field keeps one scale, with its top on the page's top and its right edge
   on the viewport's, so it bleeds off the right edge and runs down past the
   problem. The file paints no ground, and its lines keep 24px from every
   letter. It takes no pointer, so the links under its box stay live, and the
   header stands in front of it. While draw.js is to draw it on, it waits
   hidden from the first paint, so no still shows before the draw-on. With no
   script, under reduced motion and in print it shows drawn at once. If the
   script never arrives, the still shows 5s after the load all the same,
   since nothing but draw.js ends the wait. */
.hero {
  display: block;
}

.hero img {
  position: absolute;
  top: 0;
  right: 0;
  max-width: none;
  pointer-events: none;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero.waiting img {
    visibility: hidden;
    animation: field-unwait 0s 5s forwards;
  }
}

@keyframes field-unwait {
  to {
    visibility: visible;
  }
}

@media print {
  .hero.waiting img {
    visibility: visible;
  }
}

/* 2 to 5. Each part is a heading and its copy. Below 1024 the heading
   stands on the page edge above its copy. The headings are the section
   titles (ruling 71): upright, at the lead step and in Elstob's 700, so they
   stand heavier and larger than the text and heavier than the names under
   them. */
h2 {
  color: var(--primary);
  font: 700 var(--lead) / var(--lead-lh) var(--text-face);
  letter-spacing: var(--lead-track);
}

.part {
  margin-top: var(--s6);
}

.part > h2 {
  margin-bottom: var(--s2);
}

.lead {
  max-width: 23em;
  font-size: var(--lead);
  line-height: var(--lead-lh);
  letter-spacing: var(--lead-track);
  text-wrap: pretty;
}

.body,
.items p,
.blueprint p {
  max-width: 28em;
  text-wrap: pretty;
}

.body {
  margin-top: var(--s3);
}

/* The offers and the steps: a name in 600 at the name step over its line in
   400 at the text step. */
.items {
  display: grid;
  gap: var(--s3);
}

.items h3,
.blueprint h3 {
  font: 600 var(--name) / var(--name-lh) var(--text-face);
}

.items h3 + p,
.blueprint h3 + p {
  margin-top: var(--s1);
}

/* The Blueprint: the diagram and its heading and line, one block under the
   offers. Where the offers stand in two columns, from 768, the block is as
   wide as the diagram and centred under them, its words centred under the
   diagram (ruling 72). On the phone it follows the offers in the column. */
.blueprint {
  margin-top: var(--s3);
}

.system + h3 {
  margin-top: var(--s5);
}

@media (width >= 768px) {
  .blueprint {
    width: fit-content;
    margin-inline: auto;
    text-align: center;
  }

  .blueprint p {
    margin-inline: auto;
  }
}

/* "Find out more" taps as a 44px box and still sits on its line. Its box
   reaches 6px past the words on each side, and its focus ring sits 4px
   inside the box, so the ring stays clear of the line above and below and
   2px clear of the words. */
.blueprint a {
  display: inline-block;
  margin-block: calc((var(--text-lh) - var(--tap)) / 2);
  margin-inline: -6px;
  padding-inline: 6px;
  line-height: var(--tap);
  white-space: nowrap;
}

/* The method: three white step cards on the ground, one hairline each and
   no shadow (R7), each holding its frozen moment over its name and line.
   They stack below 768, set the moment beside the words from 768, and sit
   in one row from 1024, the row as wide as the copy column, as the map
   under it is. A moment is never drawn larger than its natural 240 by 150,
   and the cards' corners are the diagram's 6px. */
.steps li {
  padding: var(--s3);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--white);
}

/* A step's line fills its card's inner width. The text-wrap: pretty above
   breaks a two-line paragraph early to even its lines, which in a card
   left "We learn your" on half the width. The 28em measure above is wider
   than any card, so the card's width is the measure. */
.steps li p {
  text-wrap: wrap;
}

.moment {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin-bottom: var(--s3);
}

@media (width >= 768px) and (width < 1024px) {
  .steps li {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--s4);
  }

  .moment {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
}

@media (width >= 1024px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

/* From 1024 to 1279 the column is narrowest for three cards, so the cards
   sit closer and pad less, and each moment keeps about three quarters of
   its size. */
@media (width >= 1024px) and (width < 1280px) {
  .steps {
    gap: var(--s2);
  }

  .steps li {
    padding: var(--s2);
  }
}

/* 4. The map: the survey sheet under the route to live, in a 1px frame of
   the kit's neat line, at a fixed scale. The frame takes the copy column's
   width and crops its file from the left top, so the map meets the column's
   right edge as every other block does: the 960 by 400 wide file from 1366,
   the 944 by 360 mid file from 768, and below 768 the 728 by 600 phone
   file, each wider than any column it serves. The route climbs to the trig
   point, which is Live. draw.js hides the image and its labels while the
   figure waits below the fold. */
.flow {
  margin-top: var(--s5);
}

figure.flow {
  position: relative;
  height: 602px;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.flow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: left top;
}

.flow.waiting img,
.flow.waiting .stations {
  visibility: hidden;
}

/* Printed before it was seen, the figure shows its still sheet. */
@media print {
  .flow.waiting img,
  .flow.waiting .stations {
    visibility: visible;
  }
}

/* Each label stands on the sheet's cleared paper, its left edge and its
   baseline at the px of scripts/contours/map.mjs, from the frame's inner
   top left. Elstob's ascent is 0.76em and its descent 0.24em, so at a line
   height of 1 the baseline is 0.76em below the label's top. The labels hold
   at the size the sheet's clearings are cut for: 18px on the phone file,
   20px on the wide and mid files. */
.stations li {
  position: absolute;
  top: calc(var(--y) - 0.76em);
  left: var(--x);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.stations .live {
  font-weight: 600;
}

/* Each label's place, and its time in the draw-on (--t, below). */
.stations li:nth-child(1) {
  --x: 72px;
  --y: 534px;
  --t: 2.8s;
}

.stations li:nth-child(2) {
  --x: 84px;
  --y: 374px;
  --t: 3.25s;
}

.stations li:nth-child(3) {
  --x: 108px;
  --y: 226px;
  --t: 3.54s;
}

.stations li:nth-child(4) {
  --x: 92px;
  --y: 90px;
  --t: 4.4s;
}

@media (width >= 768px) {
  figure.flow {
    max-width: 946px;
    height: 362px;
  }

  .stations li {
    font-size: 20px;
  }

  .stations li:nth-child(1) {
    --x: 54px;
    --y: 302px;
  }

  .stations li:nth-child(2) {
    --x: 206px;
    --y: 270px;
    --t: 3.19s;
  }

  .stations li:nth-child(3) {
    --x: 446px;
    --y: 250px;
    --t: 3.54s;
  }

  .stations li:nth-child(4) {
    --x: 566px;
    --y: 99px;
  }
}

@media (width >= 1366px) {
  figure.flow {
    max-width: 962px;
    height: 402px;
  }

  .stations li:nth-child(1) {
    --x: 86px;
    --y: 330px;
  }

  .stations li:nth-child(2) {
    --x: 278px;
    --y: 282px;
    --t: 3.18s;
  }

  .stations li:nth-child(3) {
    --x: 574px;
    --y: 270px;
    --t: 3.49s;
  }

  .stations li:nth-child(4) {
    --x: 806px;
    --y: 111px;
  }
}

/* While the map draws on, each label fades in as the route reaches its
   station: at the time its station's ring fades in, in the map's files, and
   Live's with the trig point at 4.4s. The still, the page with no script and
   reduced motion show every label at once. */
.flow.drawing .stations li {
  animation: station-in 0.2s ease-out var(--t) both;
}

@keyframes station-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow.drawing .stations li {
    animation: none;
  }
}

/* The closing line (ruling 69), at the lead step. */
.keep {
  max-width: 26em;
  margin-top: var(--s5);
  font-size: var(--lead);
  line-height: var(--lead-lh);
  letter-spacing: var(--lead-track);
  text-wrap: pretty;
}

/* 5. Contact. The email and the LinkedIn address never break: below the
   width where its step fits, each shrinks to fit the column. 14 is the
   email's measured advance in Elstob, 13.45em at its widest, times 1.04, and
   16.9 the LinkedIn address's, 16.25em, times 1.04 (ruling 81). */
.contact {
  container-type: inline-size;
}

.mail {
  font-size: min(var(--lead), 100cqi / 14);
  letter-spacing: var(--lead-track);
  white-space: nowrap;
}

.mail a,
.linkedin a {
  display: block;
  width: fit-content;
  line-height: var(--tap);
}

.mail a {
  text-decoration-thickness: 1.5px;
}

.cta:hover,
.mail a:hover {
  text-decoration-thickness: 2.5px;
}

.linkedin {
  margin-top: var(--s2);
  font-size: min(var(--text), 100cqi / 16.9);
  white-space: nowrap;
}

/* "Find out more"'s focus ring sits 4px inside its tap box (see .blueprint a). */
.blueprint a:focus-visible {
  outline-offset: -4px;
}

/* 6. The foot: a solid survey-blue band from edge to edge, with white type.
   Along its top edge runs a low ridge of terrain lines (R3 Sylvera's
   device), and Contour F stands large in fine hatching at the grid's right
   edge (R1 Zed's, ruling 61). Both are still drawings from the generator,
   used here as masks so the band colours them by token, each shown at its
   natural size so its lines keep their weight. The ridge is centred, so a
   narrower band shows less of it. The F is 420px tall from 1024 and 252px
   below, each its own file with the same hatch, and the band's foot crops
   its lowest 38%. Below the row of the mark, the name and "Contact us", the
   band holds the F's other 62%. */
.band {
  --f-w: 216px;
  --f-h: 252px;
  --f-file: url('/assets/foot/foot-f-small.svg');

  position: relative;
  margin-top: var(--s6);
  overflow: hidden;
  background: var(--primary);
  color: var(--on-band);
}

.band::before,
.band::after {
  position: absolute;
  content: '';
}

.band::before {
  inset: 0 0 auto;
  height: var(--ridge-h);
  background: var(--ridge);
  mask-image: url('/assets/foot/foot-ridge.svg');
  mask-position: center top;
  mask-repeat: no-repeat;
  mask-size: 2560px var(--ridge-h);
}

.band::after {
  right: max(var(--margin), (100% - 1280px) / 2);
  bottom: calc(var(--f-h) * -0.38);
  width: var(--f-w);
  height: var(--f-h);
  background: var(--hatch);
  mask-image: var(--f-file);
}

.band-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: calc(var(--ridge-h) + var(--s4)) 0 calc(var(--s4) + var(--f-h) * 0.62);
  font-size: var(--text);
  line-height: var(--text-lh);
}

.band .mark {
  background: var(--on-band);
}

.foot-cta {
  margin-left: auto;
  color: var(--on-band);
  line-height: var(--tap);
}

.foot-cta:focus-visible {
  outline-color: var(--on-band);
}

@media (width >= 1024px) {
  .band {
    --f-w: 360px;
    --f-h: 420px;
    --f-file: url('/assets/foot/foot-f.svg');
  }
}

/* From 1024 the headings move into the margin, columns 1 to 3, each level
   with the first line of its copy, which starts at column 4. */
@media (width >= 1024px) {
  .part {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: baseline;
  }

  /* "Consult, build, customise" measures 9 to 9.2em with optical sizing, so
     8.5em sets it on two lines at every width. */
  .part > h2 {
    grid-column: 1 / span 3;
    max-width: 8.5em;
    margin-bottom: 0;
    text-wrap: balance;
  }

  .part > :not(h2) {
    grid-column: 4 / -1;
  }
}

/* From 1280 the LinkedIn address shares the email's baseline at column 9,
   whose four columns hold its 16.25em at the text step. */
@media (width >= 1280px) {
  .contact > .mail {
    grid-column: 4 / span 5;
  }

  .contact > .linkedin {
    grid-column: 9 / -1;
    margin-top: 0;
  }
}

/*
  Cards' own parts: the vignettes over the offers (R8 Tuple), the diagram
  under the automation and the agent (R6 Attio), centred with the Blueprint
  under the two offers (ruling 72), and the three step cards (R7 Jack &
  Jill). Every colour is a token above (ruling 52), and nothing here moves
  (ruling 53).
*/

/* The grid above sets each margin heading level with the first line of its copy.
   Where the copy opens on a drawing, that line sits under the drawing, so
   the heading would stand beside nothing. Here it is level with the
   drawing's top, the first thing of its copy. */
@media (width >= 1024px) {
  .drawn > h2 {
    align-self: start;
  }
}

/* What we offer: each offer is its vignette over its name and line, one
   column on the phone and two by two from 768 (R8). The vignette holds its
   natural 288 by 180 and shrinks whole only where the column is narrower. */
.offers {
  gap: var(--s5) var(--gutter);
}

.vignette {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--s3);
}

@media (width >= 768px) {
  .offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The diagram (R6): five white boxes on the ground, joined by 1px wires
   that end on their edges, each box a glyph, two stand-in bars and a status
   pill on its top edge. A wire starts at a station ring like the map's. The
   steps that are done and their wires are in the blue, and the two that
   wait (.waits, on you and on the reminder's time) in the lighter blue,
   their wires dashed. Every box and wire is placed here in px, so
   e2e/drawings.spec.ts can measure that each wire meets its boxes. From 768
   it is 640 by 220, every wire elbowed: two climb from the agent and the
   booking to the two that wait. Below 768 it is a 280 by 212 tree that fits
   the 280px column at 320, its one elbow reaching the second column. It
   opens the Blueprint's block, one --s3 step under the offers, and keeps
   its own colours in forced colours, where its bars would otherwise
   vanish. Its boxes and their bars keep to the left of each box, centred
   block or not. */
.system {
  --w: 124px;
  --h: 52px;

  position: relative;
  width: 280px;
  height: 212px;
  forced-color-adjust: none;
  text-align: left;
}

.node,
.wire {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
}

.node {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-inline: 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: var(--white);
}

.node.waits {
  border-color: var(--blue-light);
}

.n-enquiry {
  --x: 0px;
  --y: 0px;
}

.n-agent {
  --x: 0px;
  --y: 80px;
}

.n-you {
  --x: 0px;
  --y: 160px;
}

.n-booking {
  --x: 156px;
  --y: 80px;
}

.n-reminder {
  --x: 156px;
  --y: 160px;
}

.tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--faint);
}

.system svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bars {
  display: grid;
  gap: 6px;
}

.bars span {
  display: block;
  width: 44px;
  height: 6px;
  border-radius: 3px;
  background: var(--blue-light);
}

.bars span + span {
  width: 64px;
  height: 5px;
  background: var(--stand-in);
}

.pill {
  position: absolute;
  top: -8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--white);
}

.pill svg {
  width: 12px;
  height: 12px;
}

.pill.dot circle {
  fill: var(--primary);
  stroke: none;
}

.waits .pill svg {
  stroke: var(--blue-light);
}

.wire {
  border: 0 solid var(--primary);
}

.wire.waits {
  border-style: dashed;
  border-color: var(--blue-light);
}

/* The station ring a wire starts from, centred on its first point. It is
   placed from the padding edge, so on the side that carries the 1px line it
   steps back 0.5px more, to the line's centre. */
.wire::before {
  position: absolute;
  top: var(--ring-y, -4.5px);
  left: var(--ring-x, -4.5px);
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  background: var(--white);
  content: '';
}

/* Below 768 three wires run straight down a column, each 28px long. */
.w-agent,
.w-you,
.w-reminder {
  --w: 1px;
  --h: 28px;
  --ring-x: -5px;

  border-left-width: 1px;
}

.w-agent {
  --x: 61.5px;
  --y: 52px;
}

.w-you {
  --x: 61.5px;
  --y: 132px;
}

.w-reminder {
  --x: 217.5px;
  --y: 132px;
}

.w-booking {
  --x: 124px;
  --y: 25.5px;
  --w: 94.5px;
  --h: 54.5px;
  --ring-y: -5px;

  border-top-width: 1px;
  border-right-width: 1px;
  border-top-right-radius: 12px;
}

@media (width >= 768px) {
  .system {
    --w: 168px;

    width: 640px;
    height: 220px;
  }

  .node {
    gap: 10px;
    padding-inline: 12px;
  }

  .bars span {
    width: 64px;
  }

  .bars span + span {
    width: 92px;
  }

  .n-agent {
    --x: 236px;
    --y: 56px;
  }

  .n-you {
    --x: 472px;
    --y: 0px;
  }

  .n-booking {
    --x: 236px;
    --y: 168px;
  }

  .n-reminder {
    --x: 472px;
    --y: 112px;
  }

  /* The agent's wire leaves the enquiry's right side and elbows down onto
     the agent's top, at its centre. */
  .w-agent {
    --x: 168px;
    --y: 25.5px;
    --w: 152.5px;
    --h: 30.5px;
    --ring-x: -4.5px;
    --ring-y: -5px;

    border-width: 1px 1px 0 0;
    border-radius: 0 12px 0 0;
  }

  /* The two that wait each leave a box's right side and elbow up onto the
     next box's foot, at its centre. Their ring sits on the bottom line. */
  .w-you,
  .w-reminder {
    --w: 152.5px;
    --h: 30.5px;
    --ring-x: -4.5px;
    --ring-y: 25.5px;

    border-width: 0 1px 1px 0;
    border-radius: 0 0 12px;
  }

  .w-you {
    --x: 404px;
    --y: 52px;
  }

  .w-reminder {
    --x: 404px;
    --y: 164px;
  }

  /* The booking's wire leaves the enquiry's foot and elbows onto the
     booking's left side, at its middle. */
  .w-booking {
    --x: 83.5px;
    --y: 52px;
    --w: 152.5px;
    --h: 142.5px;
    --ring-x: -5px;
    --ring-y: -4.5px;

    border-width: 0 0 1px 1px;
    border-radius: 0 0 0 12px;
  }
}