/* =======================================================================
   WireSense landing page.

   Grown out of design_mocks/22-landing.html, round 11.  The commentary
   below is the record of how the page arrived at its present form; it is
   kept because every one of these decisions is one somebody will be tempted
   to undo.

   Round 10 was right about the page and wrong about two objects on it, and
   both were wrong the same way: correct, and carrying nothing.

   1. THE ROADMAP FIGURE.  Round 9 drew the roadmap as an illustration and
  it failed for three reasons -- it was not indexed to the track, it was
  the only unverifiable object on a page made of checkable documents,
  and it spent its best rendering on the least real thing (the parcel
  got isometric detail, the board got a rectangle).  Round 10 answered
  by drawing the app's toolbar with the tabs it does not have yet
  pencilled on.  That fixed the indexing and fixed nothing else: the
  five words were the track's five words, so the figure restated the
  list it sat beside and added no fact, and the largest shape in it was
  an empty dotted canvas.

  Round 11 keeps the round-9 instinct and takes the round-9 criticism
  seriously.  The figure is the one project -- led_indicator, the same
  circuit the app draws at the top of the page -- as the artifact each
  stage actually hands you: the schematic, the same schematic carrying
  what the solver measured, a routed board, a case sectioned to show the
  board in it, a parcel.  Rendered evenly, because every tile is the
  same size and the same line weight, so the parcel cannot outdraw the
  board.  The built/planned split is carried by the plate rather than
  the drawing: what v1 makes sits on the white sheet behind a hairline,
  what is only drawn has no sheet under it at all -- dashed rule, pad
  ruling straight through.  Which is what this page has meant by pencil
  since round 1.

  And then the captions went round in a circle, which is how the real
  fault finally showed.  First a name and a datum -- SCHEMATIC, 5 parts
  3 nets -- where the datum was a caption looking for something to say.
  Take the datum off and the name duplicates the track a column over.
  Take the name off too and five unlabelled drawings make a reader work
  out what they are looking at before they can look at it.  Every option
  was wrong, which is the tell: the problem was never the labelling.  It
  was that a schedule and the artifacts it schedules were being drawn as
  two objects when they are one.

  So the track lies down.  The axis runs left to right underneath the
  drawings, each stage is one station on it -- artifact above the line,
  name and schedule below -- and every word on the figure is written
  exactly once.  Nothing else changed, because nothing else was wrong:
  solid ink through what v1 contains and dashed pencil after it, filled
  stations for built and hollow for planned, a pen rule where v1 stops,
  now dropped vertically through the figure because it still has to cut
  across the direction of travel.  The head carries the one fact the
  figure cannot state about itself -- that two of the five exist.

   2. WHAT YOU GET.  Six labelled paragraphs in a bounded plate is a feature
  grid, and a feature grid is the one form here that could have come
  from any landing page.  Same six claims, given an item column: the
  parts list a drawing set ends on.  Two passes of header strip came off
  the top of it -- first a sentence, which did the h2's job over again,
  then ITEM and DESCRIPTION, which only said out loud what a column of
  numbers already says.  The numbering does the work unaided.

   3. THE HERO.  The statement was penned into a 1.5fr column, which capped
  it at 62px and left a column beside it that every round tried to fill
  -- a parts box in one, a title block in another -- and both were
  clutter next to the only sentence on the page that has to land.  The
  headline takes the whole sheet instead: one line, edge to edge, at the
  size the sheet can carry.  Nothing moved into the space beside it,
  because the headline is now in that space.  The lede and the ask share
  the row underneath, on the split's own two columns.

   4. AND THE PAGE ITSELF, which was well made and read flat, because a page
  that never changes register does.  Five things, all of them the page's
  own material rather than anything imported to liven it up:

  -- The section marker.  Every section opened on the same ink hairline,
     five times over.  The first inch of each is now pen: one red mark
     per section on a shared left edge, the same red as the full stop in
     the headline, which turns a repetition into a rhythm.
  -- Numbered legends.  01 SEE IT WORK through 04 WHERE THIS GOES, in
     the mono.  A sheet has parts and now you can feel where you are in
     them.
  -- The close, at half again the size of any other heading.  The page
     had held one scale since the headline; an ask set like every h2
     above it does not read as an ending.  On ink, in paper, at 49px, it
     does.  It is also the page's one change of ground.
  -- The title block.  A drawing signs itself bottom right, and that is
     where a title block belongs -- the round that put one in the hero
     found out what it looks like anywhere else.  Project, contents, and
     then the field a sheet actually gets signed in.  Scale, rev and
     sheet number sat there first and were the emptiest thing on the
     page: three true facts nobody needed.  The mark goes to pen in the
     project field, where it is the subject rather than the corner of
     the page.
  -- Hover.  Built plates lift off the pad; planned ones have nothing to
     lift off, so they darken toward ink instead, which is the only
     direction they are ever going to move.  Parts-list rows warm and
     their item number goes to pen.

   Numbers are the app's ngspice output for the bundled LED Indicator
   (330 ohm, 11.90 mA, Vf 1.07 V, 46.7 mW); the variants use the same
   first-order model, and the limits come from engine/verifier.py.
   ======================================================================= */

:root {
  --pad: #eaeee5;
  /* engineer's computation pad, one shade lighter */
  --pad-deep: #dfe4d8;
  --sheet: #fcfdfb;
  --panel: #f4f6f1;
  --rule: #d5dccd;
  --rule-fine: #e1e6da;
  --hair: #c8d0be;

  --ink: #15201a;
  --ink-2: #3f4c44;
  /* body copy: dark enough to read on the pad */
  --ink-3: #6c7765;
  --pencil: #a9b3a2;
  /* drawn, not built */
  --frame: #eff2eb;
  /* the pad seen through the sheet frame's wash */
  --pen: #b33a1e;
  --pen-soft: #f2ddd5;
  --check: #2c6b41;
  --check-soft: #dde8dd;

  /* three roles, strictly kept: the page's prose is a document face, the
 product's chrome and every label is the grotesk, data is the mono */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pinned: 0 1px 1px rgba(21, 32, 26, 0.08),
    0 18px 40px rgba(21, 32, 26, 0.1);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--ink);
  font: 400 18.5px/1.6 var(--display);
  background-color: var(--pad);
  background-image: linear-gradient(to right,
      var(--rule) 1px,
      transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px),
    linear-gradient(to right, var(--rule-fine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-fine) 1px, transparent 1px);
  background-size:
    110px 110px,
    110px 110px,
    22px 22px,
    22px 22px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--pen-soft);
}

/* a keyboard user's way past the masthead, invisible until it is wanted */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--pad);
  padding: 12px 18px;
  border-radius: 2px;
  font-variation-settings:
    "wdth" 92,
    "wght" 600;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus {
  left: 24px;
  top: 24px;
}

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

h1,
h2 {
  margin: 0;
  font-weight: 400;
}

p {
  margin: 0;
}

/* ------------------------------------------------------- the sheet frame */

/* the page's outermost element is the sheet border, the way a drawing has
   one: it is what finally occupies the edges the content never reached */
.frame {
  position: relative;
  margin: 16px;
  border: 1px solid var(--hair);
  /* a wash, not a fill -- an opaque frame would hide the pad's ruling, which
 is the material the whole page is made of */
  background: rgba(252, 253, 251, 0.26);
  min-height: calc(100vh - 32px);
}

.tick {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--pencil);
}

.tick.tl {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.tick.tr {
  top: -1px;
  right: -1px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.tick.bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.tick.br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.shell {
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3.2vw, 62px);
}

/* ---------------------------------------------------------- type system */

.legend {
  font-variation-settings:
    "wdth" 88,
    "wght" 600;
  font-size: 12.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* the section's number, in the mono, dark against the legend's grey.  Not
   pen: the rule above it is already carrying the page's red, and two marks
   this close together would be one too many. */
.legend em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-right: 12px;
}

/* the break is written into the markup, so the size is free to run to the
   width of the sheet rather than to the width of a column */
h1 {
  font-variation-settings:
    "wdth" 84,
    "wght" 600;
  font-size: clamp(40px, 7.6vw, 116px);
  line-height: 1.0;
  /* big type needs the tracking pulled in, or it reads loose */
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 .soft {
  color: var(--pen);
}

h2 {
  font-variation-settings:
    "wdth" 86,
    "wght" 600;
  font-size: clamp(27px, 2.7vw, 37px);
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.subhead {
  font-variation-settings:
    "wdth" 88,
    "wght" 600;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.lede {
  font-family: var(--serif);
  font-size: 21.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}

.note {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
}

/* --------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-variation-settings:
    "wdth" 86,
    "wght" 700;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.masthead nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* :not(.btn) matters -- this selector outweighs .btn, so without it the
   button's own colours lose and it renders dark ink on dark ink */
.masthead nav a:not(.btn) {
  font-variation-settings:
    "wdth" 92,
    "wght" 500;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.masthead nav a:not(.btn):hover {
  color: var(--ink);
  border-bottom-color: var(--pen);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--pad);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 13px 22px;
  cursor: pointer;
  font-family: var(--display);
  font-variation-settings:
    "wdth" 92,
    "wght" 600;
  font-size: 13.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn:hover {
  background: var(--pen);
  border-color: var(--pen);
  color: #fff;
}

.masthead .btn {
  padding: 10px 16px;
}

/* ------------------------------------------------------------------- hero */

/* -------------------------------------------------- the section marker */

/* Every section on this page opens on the same ink hairline, five times
   over, and five identical openings is what made a well-made page read
   flat.  So the first inch of each rule is pen: one red mark per section,
   all of them landing on the same left edge, which turns a repeated
   detail into a rhythm you feel before you have read a word.  It is the
   same red as the full stop in the headline -- that mark is simply the
   first one, and the page keeps making it the whole way down. */
.rule-cap {
  position: relative;
}

.rule-cap::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--pen);
}

.hero {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}

.hero h1 {
  margin-bottom: 16px;
}

.hero .subhead {
  margin-bottom: 20px;
}

.hero .lede {
  margin-bottom: 0;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero-cta .fine {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ---------------------------------------------- the split: plates + copy */

.split {
  margin-top: 32px;
}

.copy {
  border-top: 1px solid var(--ink);
  padding-top: 26px;
}

.copy h2 {
  margin-top: 14px;
  font-size: clamp(26px, 2.1vw, 34px);
  max-width: 22ch;
  text-wrap: balance;
}

.copy .note {
  margin-top: 14px;
}

.plate {
  margin: 36px 0 72px;
}

/* the app's own first screen is a prompt and three examples (gui/welcome.py),
   so the page asks the same way rather than offering a tab strip */
.prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--sheet);
  padding: 13px 15px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 15.5px;
  color: var(--ink);
}

.prompt .caret {
  flex: none;
  width: 9px;
  height: 17px;
  background: var(--pen);
  opacity: 0.8;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.prompt .send {
  margin-left: auto;
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--pad);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 13px;
}

.try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}

.try .legend {
  width: 100%;
  margin-bottom: 2px;
}

.ask {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--hair);
  background: transparent;
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--ink-2);
  transition:
    border-color 0.14s ease,
    color 0.14s ease,
    background 0.14s ease;
}

.ask:hover {
  border-color: var(--pen);
  color: var(--ink);
}

.ask[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--pad);
}

/* ------------------------------------------------------- the app window */

.app {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--hair);
  box-shadow: var(--pinned);
}

.app-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule-fine);
  font-variation-settings:
    "wdth" 92,
    "wght" 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.chip {
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 5px 11px;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--hair);
  border-radius: 2px;
  overflow: hidden;
}

.seg button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 5px 13px;
  color: var(--ink-3);
  font-family: var(--display);
  font-variation-settings:
    "wdth" 92,
    "wght" 500;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--pad);
}

.app-top .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--check);
  color: #fff;
  border-radius: 2px;
  padding: 6px 13px;
}

.app-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 352px;
}

/* the dotted sheet covers the whole column, not just the drawing -- the
   dock is taller than the figure and plain white below it looks broken */
.app-canvas {
  border-right: 1px solid var(--rule-fine);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(circle at 1px 1px,
      #dfe4dc 1px,
      transparent 0);
  background-size: 10px 10px;
  background-position: 0 35px;
}

.sheet-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--rule-fine);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
}

.verdict {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--check-soft);
  color: var(--check);
  font-family: var(--display);
  font-variation-settings:
    "wdth" 92,
    "wght" 600;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.verdict.is-held {
  background: var(--pen-soft);
  color: var(--pen);
}

.verdict.is-run {
  background: var(--pad-deep);
  color: var(--ink-3);
}

.canvas {
  display: block;
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 0;
}

.src {
  /* the bottom padding is the stamp's landing space -- without it the last
 line of the netlist ends up underneath it */
  flex: 1;
  margin: 0;
  padding: 20px 24px 52px;
  min-height: 320px;
  overflow-x: auto;
  background: var(--sheet);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
}

.src .s {
  color: var(--check);
}

.src .c {
  color: var(--ink-3);
}

.src b {
  color: var(--ink);
  font-weight: 500;
}

.src em {
  color: var(--pen);
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* assistant dock */
.dock {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--rule-fine);
}

.dock-head b {
  font-variation-settings:
    "wdth" 92,
    "wght" 600;
  font-size: 14.5px;
  letter-spacing: 0.04em;
}

.dock-head .state {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

.avatar {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--check);
  color: #fff;
}

.avatar.you {
  background: var(--pad-deep);
  color: var(--ink-2);
}

.turns {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.turn {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.turn p {
  font-size: 16.5px;
  line-height: 1.55;
}

.turn.it p {
  color: var(--ink-2);
}

.turn .hl {
  color: var(--pen);
  font-variation-settings: "wght" 600;
}

/* the work log the assistant dock really has (gui/assistant_panel.py): the
   phases of the last run, filled in as they finish */
.work {
  margin: 0 16px;
  padding-top: 2px;
  list-style: none;
}

.work li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(3px);
}

.work li.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.work .mark {
  color: var(--check);
  flex: none;
  width: 9px;
}

.work .v {
  margin-left: auto;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.work li.bad .mark,
.work li.bad .v {
  color: var(--pen);
}

.vcard {
  margin: 14px 16px 0;
  border-top: 1px solid var(--rule-fine);
  padding-top: 13px;
}

.vcard {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.vcard.in {
  opacity: 1;
}

.vcard .vhead {
  display: flex;
  align-items: center;
  font-variation-settings:
    "wdth" 92,
    "wght" 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vcard .vhead .tag {
  margin-left: auto;
  color: var(--check);
}

.vcard.is-held .vhead .tag {
  color: var(--pen);
}

.vrules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.vrules li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

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

.vrules li.bad .mark,
.vrules li.bad .val {
  color: var(--pen);
}

.vrules .val {
  margin-left: auto;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.composer {
  margin: auto 16px 16px;
  padding: 11px 14px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  color: var(--ink-3);
}

.composer .send {
  margin-left: auto;
  width: 25px;
  height: 25px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--pad);
  display: grid;
  place-items: center;
  font-size: 12px;
}

/* the page's one flourish */
.stamp {
  position: absolute;
  left: -16px;
  bottom: -20px;
  transform: rotate(-5deg);
  border: 2px solid var(--check);
  color: var(--check);
  padding: 7px 14px 6px;
  text-align: center;
  background: rgba(234, 238, 229, 0.93);
  font-variation-settings:
    "wdth" 88,
    "wght" 700;
  text-transform: uppercase;
  animation: stamp 0.28s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.stamp .big {
  display: block;
  font-size: 17px;
  letter-spacing: 0.14em;
}

.stamp .small {
  display: block;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid currentColor;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
}

.stamp.is-held {
  border-color: var(--pen);
  color: var(--pen);
}

@keyframes stamp {
  from {
    transform: rotate(-5deg) scale(1.4);
    opacity: 0;
  }

  to {
    transform: rotate(-5deg) scale(1);
    opacity: 1;
  }
}

/* ------------------------------------------------------- what you get */

/* A drawing's title block: ONE bounded plate subdivided by hairlines, not six
   cells each opening on its own rule.  The first pass gave every cell the
   page's section rule (1px solid ink) -- the same mark every section opens on
   -- so the eye read six section starts in a row and the block looked
   unfinished.  The ink rule now belongs to sections only; inside the plate
   every division is a hairline, and the outer border is what says "one
   object".  Cells carry a label and one line only -- an earlier pass hung a
   mono datum off the foot of each, which read as clutter once the claims did
   not all have a precise figure behind them. */
.gets {
  margin-top: 104px;
  border-top: 1px solid var(--ink);
  padding-top: 26px;
}

.gets h2 {
  margin-top: 14px;
  max-width: 26ch;
  text-wrap: balance;
}

.cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 44px;
  border: 1px solid var(--hair);
  /* a wash rather than a fill, so the pad's ruling still reads underneath */
  background: rgba(252, 253, 251, 0.5);
}

/* The item number is what turns six labelled paragraphs in a bounded plate
   -- a feature grid, the one form here that could have come from any landing
   page -- into the parts list a drawing set ends on.  It does that on its
   own.  A header strip over the top spelling out ITEM and DESCRIPTION only
   said what the numbering was already saying. */
.cell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 22px;
  align-content: start;
  padding: 26px 30px;
  border-top: 1px solid var(--rule-fine);
}

.cell:first-child {
  border-top: 0;
}

.cell {
  transition: background 0.18s ease;
}

.cell:hover {
  background: rgba(252, 253, 251, 0.9);
}

.cell:hover .no {
  color: var(--pen);
}

.cell .no {
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  /* ink-3, not pencil: these six exist, and pencil means the opposite of
 that everywhere else on the page */
  color: var(--ink-3);
  /* sits on the label's cap-line, not on its baseline */
  padding-top: 2px;
}

.cell b {
  display: block;
  margin-bottom: 12px;
  font-variation-settings:
    "wdth" 90,
    "wght" 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cell p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* the roadmap band: full width, and the sides trade places -- the track
   leads on the left, the drawing follows on the right.  The drawing is
   capped because it is an illustration, not the product; at the app's width
   it was the loudest thing on the page for the least load-bearing claim. */
/* -------------------------------------------------------- the roadmap */

/* One object, not two.  For four rounds this was a track down the left and
   a figure to its right, and every version of the figure ran into the same
   wall: label the drawings and the track's five words appear twice a column
   apart; leave them off and nobody can tell a board from a case.  The fault
   was never the labelling.  It was that a schedule and the artifacts it
   schedules were being drawn as two separate things when they are one thing.

   So the track lies down.  The axis runs left to right under the drawings,
   each stage keeps its station and its status, and every word on the figure
   is written exactly once.  Nothing else changed: solid ink through what v1
   contains and dashed pencil after it, filled stations for built and hollow
   for planned, a pen rule where v1 stops.  Same marks, one object. */
.band {
  margin-top: 104px;
  border-top: 1px solid var(--ink);
  padding-top: 26px;
}

.band h2 {
  margin-top: 14px;
  max-width: 24ch;
  text-wrap: balance;
}

.band-head .note {
  margin-top: 18px;
}

/* One rule for every width.  The stations have a floor, and below the
   width where five of them fit the figure runs off its own right edge
   rather than reflowing -- a timeline that wraps is not a timeline.  The
   page itself never scrolls sideways, because the overflow belongs to the
   track.  The top padding is inside the scroller so the break tag, which
   hangs above the plates, is not clipped by it. */
.track {
  list-style: none;
  margin: 30px 0 0;
  padding: 44px 0 6px;
  display: grid;
  grid-template-columns: repeat(5, minmax(172px, 1fr));
  column-gap: var(--stn-gap, 24px);
  align-items: start;
  overflow-x: auto;
  overflow-y: hidden;
}

.stn {
  position: relative;
  display: flex;
  flex-direction: column;
  /* the plate, the station and the words all centre on the same vertical:
 a label sitting at the left edge of its column reads as belonging to
 the gap rather than to the dot above it */
  text-align: center;
}

/* the drawing is capped and centred rather than filling its column: at the
   full width of a fifth of this page the line weights would come out
   twice the weight of the schematic in the app above, and these are the
   same drawing */
.stn-plate {
  width: 100%;
  max-width: 236px;
  margin: 0 auto;
  padding: 24px 18px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--sheet);
  box-shadow:
    0 1px 1px rgba(21, 32, 26, 0.05),
    0 9px 20px rgba(21, 32, 26, 0.07);
  transition:
    transform 0.19s ease,
    box-shadow 0.19s ease,
    border-color 0.19s ease;
}

/* no sheet under it, and no shadow: nothing is holding it up yet */
.stn.todo .stn-plate {
  border: 1.5px dashed var(--pencil);
  background: transparent;
  box-shadow: none;
}

.stn-plate svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the band the axis runs through.  Every station draws its own segment of
   it, half a gutter over on each side, so the five segments meet and read
   as one line -- the same way the vertical track built its axis, turned
   through ninety degrees. */
.stn-axis {
  position: relative;
  height: 46px;
}

.stn-axis::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--stn-gap, 24px) / 2);
  right: calc(-1 * var(--stn-gap, 24px) / 2);
  border-top: 1.5px solid var(--ink);
}

.stn:first-child .stn-axis::before {
  left: 50%;
}

.stn:last-child .stn-axis::before {
  right: 50%;
}

.stn.todo .stn-axis::before {
  border-top: 1.5px dashed var(--pencil);
}

/* the station */
.stn-axis::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--ink);
}

.stn.todo .stn-axis::after {
  background: var(--frame);
  border: 1.5px solid var(--pencil);
}

.stn-name {
  font-variation-settings:
    "wdth" 90,
    "wght" 600;
  font-size: 18px;
  color: var(--ink);
}

.stn-when {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stn.todo .stn-name {
  color: var(--ink-3);
}

.stn.todo .stn-when {
  color: var(--pencil);
}

/* where v1 stops: a pen rule dropped through the whole figure in the
   gutter, with its tag ending on it.  Vertical here for the same reason it
   was horizontal before -- it cuts across the direction of travel. */
.stn.edge::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--stn-gap, 24px) / 2);
  top: -34px;
  bottom: 4px;
  border-left: 1px solid var(--pen);
}

.edge-tag {
  position: absolute;
  right: calc(100% + var(--stn-gap, 24px) / 2 + 10px);
  bottom: 100%;
  margin-bottom: 22px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pen);
}

/* a drawing you can put your hand on.  The built plates lift off the pad;
   the planned ones have nothing to lift off, so they darken toward ink
   instead -- which is the only direction they are ever going to move. */
.stn:hover .stn-plate {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(21, 32, 26, 0.06),
    0 16px 30px rgba(21, 32, 26, 0.1);
}

.stn.todo:hover .stn-plate {
  transform: none;
  border-color: var(--ink-3);
  box-shadow: none;
}

/* two audiences, stacked -- same rule device as the roadmap */
.who {
  margin: 34px 0 0;
  display: grid;
  gap: 28px;
}

.who>div {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  position: relative;
}

.who>div::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.who b {
  display: block;
  margin-bottom: 8px;
  font-variation-settings:
    "wdth" 90,
    "wght" 600;
  font-size: 13.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.who p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------- cta */

/* The page is one sheet of pad from the masthead to here, and after three
   thousand pixels of it an ending drawn in the same three hairlines as
   everything above would simply be another section.  So the last block is
   the one thing on the page that is inked solid: the pad's own ink, with
   the paper knocked out of it.  It is also the only place the inversion is
   honest -- this block is not a document, it is the ask. */
.cta {
  margin-top: 24px;
  padding: 54px clamp(28px, 3.4vw, 60px) 58px;
  background: var(--ink);
  color: var(--pad);
  border-radius: 2px;
  position: relative;
}

/* the page's second big moment.  It has held one scale since the headline
   -- five h2s within a few pixels of each other -- and an ask set at the
   same size as every heading above it does not read as an ending.  On ink,
   in paper, at half again the size, it does. */
.cta h2 {
  max-width: 17ch;
  color: var(--pad);
  font-size: clamp(30px, 3.3vw, 49px);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

/* the sheet frame's corner ticks, drawn again on the block that replaced
   the sheet -- in the pad's colour, at a quarter strength */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid rgba(234, 238, 229, 0.34);
}

.cta::before {
  top: 14px;
  left: 14px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}

.cta::after {
  bottom: 14px;
  right: 14px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

.signup {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 520px;
}

/* off-screen, not hidden: see the note beside it in index.html */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup input {
  flex: 1 1 210px;
  min-width: 0;
  border: 1px solid rgba(234, 238, 229, 0.34);
  border-radius: 2px;
  background: transparent;
  color: var(--pad);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 15.5px;
}

.signup input::placeholder {
  color: rgba(234, 238, 229, 0.5);
}

.signup input:focus-visible {
  outline-color: var(--pad);
  border-color: var(--pad);
}

/* on ink, the button has to be the paper -- and its hover keeps the pen,
   which is the one colour that reads on either ground */
.cta .btn {
  background: var(--pad);
  border-color: var(--pad);
  color: var(--ink);
}

.cta .btn:hover {
  background: var(--pen);
  border-color: var(--pen);
  color: #fff;
}

.cta .fine {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 17.5px;
  color: rgba(234, 238, 229, 0.66);
}

/* a failed signup: the pen does not read on ink, so this is the one place the
   warning colour is a tint of the paper rather than the red */
.cta .fine.is-bad {
  color: #f0c9bc;
}

/* ------------------------------------------------------ the title block */

/* The row of links this replaces was the last thing on a page made
   entirely of drawn objects, and it was the only one that was not a drawn
   object -- it read as the bottom of a website, not the bottom of a sheet.
   A title block is a bounded strip of ruled cells, key over value, wide
   fields on the left and the numbered ones squared off on the right, and
   it is the last thing you look at on any drawing. */
footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 78px 0 46px;
  border: 1px solid var(--hair);
  background: rgba(252, 253, 251, 0.5);
}

.tb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 20px;
  border-top: 1px solid var(--rule-fine);
}

.tb:first-child {
  border-top: 0;
}

.tb-k {
  font-variation-settings:
    "wdth" 92,
    "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tb-v {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

/* the brand sits in the field a drawing puts the project name in, and the
   mark goes to pen here -- the one place it is the subject rather than the
   corner of the page */
.tb-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-variation-settings:
    "wdth" 88,
    "wght" 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* the last field on a sheet is where it gets signed, so this one sits in
   the corner: bottom of its cell, hard to the right edge of the block */
.tb-motto {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

.tb-said {
  font-family: var(--display);
  font-variation-settings:
    "wdth" 90,
    "wght" 600;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.tb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.tb-links a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.tb-links a:hover {
  color: var(--pen);
  border-bottom-color: var(--pen);
}

/* -------------------------------------------------- the two-column sheet */

/* Above 1080 the page stops being a ribbon.  The plates take column one and
   pin themselves; the argument runs down column two and scrolls past them.
   Spanning rows is what makes the swap happen -- the app plate is stuck
   across "see it work" and "who it's for", the roadmap plate across "where
   this goes" -- so there is no scroll listener anywhere in this file. */
@media (min-width: 1340px) {
  .hero {
    display: grid;
    /* the same columns as the split below, so the hero's right edge and
       the argument column share one line down the page */
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 420px);
    column-gap: clamp(44px, 3.6vw, 76px);
    /* end, not start: the ask sits on the foot of the lede rather than
       floating at the top of an empty column */
    align-items: end;
  }

  /* the statement is not a column of the hero, it is the head of it */
  .hero-say {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .hero .lede {
    grid-column: 1;
  }

  /* a row, not a stack: stacked it was taller than the lede beside it, so
 it -- not the sentence -- set the height of the row and pushed the lede
 down away from the statement */
  .hero .hero-cta {
    grid-column: 2;
    margin-top: 0;
    padding-bottom: 3px;
    gap: 18px;
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 420px);
    column-gap: clamp(44px, 3.6vw, 76px);
    row-gap: 104px;
    align-items: start;
  }

  /* the stage is the travel; the plate inside it is what pins.  align-self
 has to be stretch, or the stage collapses to the plate and there is
 nothing to travel through */
  .stage {
    align-self: stretch;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .plate {
    margin: 0;
    position: sticky;
    top: 20px;
  }

  .c-demo {
    grid-column: 2;
    grid-row: 1;
  }

  .c-who {
    grid-column: 2;
    grid-row: 2;
  }

  .cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .band-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(44px, 3.6vw, 76px);
    align-items: end;
  }

  .band-head .note {
    margin-top: 0;
    padding-bottom: 4px;
  }

  /* the title block squares up into one strip */
  footer {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr) minmax(270px, 0.9fr);
  }

  .tb {
    border-top: 0;
    border-left: 1px solid var(--rule-fine);
  }

  .tb:first-child {
    border-left: 0;
  }

  .cell {
    padding: 28px 32px;
    border-left: 1px solid var(--rule-fine);
  }

  .cell:nth-child(3n + 1) {
    border-left: 0;
  }

  .cell:nth-child(-n + 3) {
    border-top: 0;
  }

  .cta {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 420px);
    column-gap: clamp(44px, 3.6vw, 76px);
    /* centred, not top-aligned: the ask is now half again the size of any
   other heading, and a form pinned to the top of it left the block
   lopsided */
    align-items: center;
    margin-top: 104px;
  }

  .cta .form-side {
    padding-top: 4px;
  }
}

/* ----------------------------------------------------------- responsive */

@media (min-width: 781px) and (max-width: 1339px) {
  .cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cell {
    padding: 26px 30px;
    border-left: 1px solid var(--rule-fine);
  }

  .cell:nth-child(2n + 1) {
    border-left: 0;
  }

  .cell:nth-child(-n + 2) {
    border-top: 0;
  }
}

@media (max-width: 1339px) {

  .lede,
  .note {
    max-width: 62ch;
  }

  .copy h2 {
    max-width: 26ch;
  }
}

@media (max-width: 900px) {
  .app-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-canvas {
    border-right: 0;
    border-bottom: 1px solid var(--rule-fine);
  }

  .composer {
    margin-top: 13px;
  }
}

@media (max-width: 780px) {
  .frame {
    margin: 8px;
  }

  .shell {
    padding: 0 20px;
  }

  .masthead nav a:not(.btn) {
    display: none;
  }

  .split {
    margin-top: 44px;
  }

  .plate {
    margin: 26px 0 48px;
  }

  /* the closing block is inked solid now, so it cannot open eight pixels
 under the strip the way an open section could */
  .cta {
    margin-top: 56px;
  }

  .gets {
    margin-top: 60px;
  }

  .cells {
    margin-top: 30px;
  }

  /* stacked, the window's bottom-left corner is the composer -- the stamp
 has nowhere to land that is not on top of the product */
  .stamp {
    display: none;
  }

}

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

  .wire-draw path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}