/* Plotline. A development notice sign on an overcast Metro Vancouver day.
   Two typefaces from the visitor's own system: a DIN-style condensed
   signage face for headings and labels, a sturdy text serif for reading. */

:root {
  --field: #d5dee2;      /* overcast: the page */
  --paper: #ffffff;      /* sign face and paper */
  --ink: #000000;        /* vinyl lettering, rules */
  --tape: #ff3d8b;       /* survey flagging tape: anything flagged */
  --steel: #46535a;      /* posts, secondary text */
  --error: #a01436;
  --rule-soft: #b9c5ca;

  --font-sign: "DIN Condensed", "Bahnschrift", "Roboto Condensed", "Nimbus Sans Narrow",
    "Liberation Sans Narrow", "Arial Narrow", "Helvetica Neue", sans-serif-condensed, sans-serif;
  --font-text: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria,
    Georgia, "Noto Serif", C059, serif;
  /* literal tool names and example records only */
  --font-code: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono",
    "Liberation Mono", Menlo, Consolas, monospace;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

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

.shell {
  width: min(100% - 2rem, 76rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.6rem 1rem 0.5rem;
  background: var(--tape);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header. On phones: the brand and the call to action share the first
   line, the page links take the second. */

.top__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding-block: 1rem 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.brand__lot {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
}

.brand__pin {
  fill: var(--tape);
  stroke: var(--ink);
  stroke-width: 2;
}

.brand__name {
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  padding-top: 0.1em;
}

.nav {
  order: 2;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
}

.nav__link {
  display: none;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.nav__link--page {
  display: inline;
}

.nav__link:hover {
  text-decoration: underline;
}

.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.nav__cta {
  order: 1;
  margin-left: auto;
  padding: 0.55rem 0.85rem 0.45rem;
  background: var(--tape);
  border: 2px solid var(--ink);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem 0.6rem;
  background: var(--tape);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--ink);
  color: var(--paper);
}

.button:active {
  transform: translateY(1px);
}

.button[aria-disabled="true"] {
  background: var(--paper);
  color: var(--steel);
  border-color: var(--steel);
  cursor: progress;
}

/* Hero: the development sign */

.hero {
  padding-top: 0.5rem;
  border-bottom: 3px solid var(--ink);
}

.sign {
  position: relative;
  background: var(--paper);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 34px 44px -34px rgba(20, 38, 48, 0.6);
}

/* four fasteners, one in each corner */
.sign::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  pointer-events: none;
  --bolt: radial-gradient(circle, #d5dcdf 0 1.6px, #7a878d 2.2px 3.4px, transparent 3.9px);
  background:
    var(--bolt) left top / 8px 8px no-repeat,
    var(--bolt) right top / 8px 8px no-repeat,
    var(--bolt) left bottom / 8px 8px no-repeat,
    var(--bolt) right bottom / 8px 8px no-repeat;
}

.sign__band {
  padding: 0.85rem 1.5rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
}

.sign__body {
  display: grid;
  gap: 2rem;
  padding: 1.75rem 1.25rem 2rem;
}

.sign__title {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
}

.sign__lede {
  max-width: 36em;
  margin-top: 1.25rem;
  font-size: 1.125rem;
}

.sign__actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.sign__more,
.more-link {
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
}

.sign__more:hover,
.more-link:hover {
  text-decoration-color: var(--tape);
}

.sign__art {
  display: none;
}

.massing {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.m-ctx {
  fill: none;
  stroke: var(--steel);
  stroke-width: 0.6;
  stroke-dasharray: 2 1.6;
}

.m-lot {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.4;
}

.m-top {
  fill: var(--paper);
}

.m-side-a {
  fill: #c3ced3;
}

.m-side-b {
  fill: #e6ecee;
}

.m-floor {
  fill: none;
  stroke: var(--steel);
  stroke-width: 0.35;
}

.m-edge,
.m-stake {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.m-flag {
  fill: var(--tape);
  stroke: var(--ink);
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* posts and flagging tape */

.legs {
  position: relative;
  height: 3.5rem;
}

.legs__post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.875rem;
  background: linear-gradient(90deg, #5f6d74 0 40%, var(--steel) 40%);
}

.legs__post--left {
  left: 14%;
}

.legs__post--right {
  right: 14%;
}

.legs__tape {
  position: absolute;
  top: 0.15rem;
  left: calc(14% - 0.875rem * 10 / 18);
  width: calc(0.875rem * 120 / 18);
  height: auto;
  overflow: visible;
}

.tape {
  fill: var(--tape);
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.tape--under {
  fill: #d42c70;
}

/* Sections */

.section {
  padding-block: 4rem;
}

.section + .section {
  border-top: 2px solid var(--ink);
}

.section__title {
  max-width: 14em;
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 0.95;
}

.section__lede {
  max-width: 36em;
  margin-top: 1.25rem;
  font-size: 1.125rem;
}

.section__aside {
  max-width: 36em;
  margin-top: 1rem;
  color: var(--steel);
}

.minor-title {
  margin-top: 2.5rem;
  font-size: 1.5rem;
  line-height: 1.1;
}

.split {
  display: grid;
  gap: 3rem;
}

.rules {
  list-style: none;
  margin-top: 0.85rem;
  padding: 0;
  border-bottom: 2px solid var(--ink);
}

.rules li {
  padding: 0.7rem 0 0.75rem;
  border-top: 2px solid var(--ink);
}

.rules--tight li {
  padding-block: 0.55rem 0.6rem;
}

/* Example issue, and every other sheet of paper: the plan comparison,
   the example record */

.issue,
.sheet {
  position: relative;
  align-self: start;
  padding: 2.75rem 1.25rem 1.5rem;
  background: var(--paper);
  border-top: 6px solid var(--ink);
}

.issue__tape,
.tape-label {
  position: absolute;
  top: -1.05rem;
  left: 0.75rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.5rem 1.1rem 0.4rem;
  background: var(--tape);
  color: var(--ink);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  transform: rotate(-1.5deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.45rem) 50%, 100% 100%, 0 100%, 0.45rem 50%);
}

.issue__kicker {
  color: var(--steel);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.issue__title {
  margin-top: 0.35rem;
  font-size: 2.25rem;
}

.issue__stats {
  margin-top: 0.6rem;
}

.entry {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 2px solid var(--ink);
}

.entry__address {
  font-size: 1.75rem;
  line-height: 1.05;
}

.entry__what {
  margin-top: 0.3rem;
}

.entry__change {
  margin-top: 0.6rem;
}

.entry__verb {
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.1875rem;
}

/* stage track: the real four-step sequence */

.track {
  --dot: 0.75rem;
  --mid: 0.6rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.track__step {
  position: relative;
  padding-top: 1.55rem;
  color: var(--steel);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.1;
}

.track__step::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--mid) - var(--dot) / 2);
  left: 0;
  width: var(--dot);
  height: var(--dot);
  border: 2px solid var(--steel);
  border-radius: 50%;
  background: var(--paper);
}

.track__step::after {
  content: "";
  position: absolute;
  top: calc(var(--mid) - 1px);
  left: var(--dot);
  right: 0;
  border-top: 2px dashed var(--steel);
}

.track__step:last-child::after {
  display: none;
}

.track__step.is-done {
  color: var(--ink);
}

.track__step.is-done::before {
  background: var(--ink);
  border-color: var(--ink);
}

.track__step.is-done::after {
  top: calc(var(--mid) - 1.5px);
  border-top: 3px solid var(--ink);
  transform-origin: left center;
}

.track__step.is-current {
  color: var(--ink);
}

.track__step.is-current::before {
  --dot: 1.25rem;
  border-color: var(--ink);
  background: var(--tape);
}

.facts {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.1rem;
}

.facts__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
}

.facts dt {
  color: var(--steel);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1rem;
}

/* Sources */

.flow {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

.flow__arrow {
  width: 3rem;
  height: 1.5rem;
  margin-inline: auto;
  transform: rotate(90deg);
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: square;
}

.record {
  margin-top: 0.85rem;
  padding: 0.75rem 1.25rem 1rem;
  list-style: none;
  background: var(--paper);
  border-top: 6px solid var(--ink);
}

.record li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.45rem;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
}

/* a blank to fill in, as on a permit form */
.record li::after {
  content: "";
  flex: 1 1 2rem;
  min-width: 2rem;
  border-bottom: 2px dotted var(--rule-soft);
}

/* Audience, and the other ruled lists of terms: what the feed holds,
   what it is good for, questions and answers */

.roles,
.qa {
  margin-top: 2.5rem;
  border-bottom: 2px solid var(--ink);
}

.roles__row,
.qa__item {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0 1.2rem;
  border-top: 2px solid var(--ink);
}

.roles dt {
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.05;
}

.roles dd,
.qa__a {
  max-width: 38em;
}

.roles__tools {
  margin-top: 0.45rem;
  color: var(--steel);
  font-size: 1rem;
}

.roles__tools code {
  color: var(--ink);
}

.roles .track {
  max-width: 28rem;
  margin-top: 1rem;
}

.qa__q {
  font-size: 1.5rem;
  line-height: 1.1;
}

/* Sign-up */

.signup {
  align-self: start;
  padding: 1.75rem 1.25rem 1.5rem;
  background: var(--paper);
  border-top: 6px solid var(--ink);
}

.form {
  display: grid;
  gap: 1.35rem;
}

.field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
}

.field__optional {
  color: var(--steel);
  font-size: 1.0625rem;
}

.field__hint {
  margin: -0.2rem 0 0.5rem;
  color: var(--steel);
  font-size: 1rem;
}

.field__input {
  display: block;
  width: 100%;
  min-height: 3.125rem;
  padding: 0.65rem 0.8rem;
  background-color: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.field__control {
  position: relative;
}

/* the select's arrow, drawn as a chevron */
.field__control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}

.field__input:focus-visible {
  outline-offset: 2px;
}

.field__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 4px 0 0 var(--error);
}

.field__error {
  margin-top: 0.4rem;
  color: var(--error);
  font-weight: 700;
  font-size: 1rem;
}

.field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.8rem;
  align-items: start;
}

.field--check .field__error {
  grid-column: 1 / -1;
}

.field__check {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.field__check[aria-invalid="true"] {
  outline: 3px solid var(--error);
  outline-offset: 2px;
}

.field__check-label {
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
}

.button--wide {
  width: 100%;
}

.form__status:empty {
  display: none;
}

.form__status {
  padding: 0.85rem 1rem;
  border: 2px solid var(--error);
  border-left-width: 8px;
  color: var(--ink);
}

.form__status.is-busy {
  border-color: var(--steel);
}

.form__status ul {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
}

.form__note {
  color: var(--steel);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form__noscript {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--ink);
}

.done {
  padding-block: 0.5rem 0.25rem;
}

.done:focus {
  outline: none;
}

.done__title {
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
}

.done__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.6rem;
  margin-top: 0.85rem;
  background: var(--tape);
  border: 2px solid var(--ink);
}

.done__text {
  margin-top: 1rem;
  font-size: 1.125rem;
}

.done__email {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.done__again {
  margin-top: 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.1875rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Footer */

.foot {
  padding-block: 2.5rem 3rem;
  background: var(--ink);
  color: var(--paper);
}

.foot__row {
  display: grid;
  gap: 0.75rem;
}

.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
}

.brand__mark--foot .brand__lot {
  stroke: var(--paper);
  fill: var(--ink);
}

.foot__text {
  max-width: 40em;
  color: #d5dee2;
  font-size: 1rem;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-block: 0.4rem 0.2rem;
}

.foot__nav a {
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}

.foot :focus-visible {
  outline-color: var(--paper);
}

/* Plans and AI-agent pages */

.sign__note {
  max-width: 36em;
  margin-top: 1rem;
  color: var(--steel);
}

/* The sign's second column on these pages: a posted schedule of plans or
   access details, flagged with tape while it is early access. */
.sign__aside {
  position: relative;
  align-self: end;
  margin-top: 0.75rem;
  padding-top: 1.6rem;
  border-top: 3px solid var(--ink);
}

/* here the tape stays in the flow, so a label that wraps on a phone
   pushes the schedule down instead of covering it */
.sign__aside > .tape-label {
  position: relative;
  top: auto;
  left: auto;
  width: fit-content;
  max-width: calc(100% - 1rem);
  margin: -2.65rem 0 0.7rem 0.6rem;
}

.schedule__row {
  display: grid;
  grid-template-columns: auto minmax(1.25rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.5rem;
  padding-block: 0.6rem 0.65rem;
}

.schedule__row + .schedule__row {
  border-top: 2px solid var(--ink);
}

/* a dotted leader from the name to the price */
.schedule__row::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border-bottom: 2px dotted var(--steel);
}

.schedule dt,
.schedule__value {
  grid-row: 1;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
}

.schedule dt {
  grid-column: 1;
}

.schedule__value {
  grid-column: 3;
  text-align: right;
}

.schedule__note {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.4;
}

.more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 1.4rem;
}

/* Free beside Pro, on the home page; Team beside the data licence */

.teaser,
.pair {
  display: grid;
  gap: 3.25rem;
  margin-top: 2.75rem;
}

.plan .minor-title {
  margin-top: 0;
}

.plan__price {
  margin-top: 0.4rem;
  color: var(--steel);
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
}

.plan__lead {
  margin-top: 1rem;
}

.teaser + .section__aside {
  margin-top: 2.5rem;
}

/* on phones a sheet gives its width to the table or record it carries */
.sheet {
  padding-inline: 1rem;
}

/* a sheet with no tape on it does not need the tape's headroom */
.sheet.sheet--plain {
  padding-top: 1.5rem;
}

/* The comparison sheet */

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.compare__col-label {
  width: 30%;
}

.compare__col-free {
  width: 32%;
}

.compare__col-pro {
  width: 38%;
}

.compare th,
.compare td {
  padding: 0.6rem 0.45rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.compare th:first-child,
.compare td:first-child {
  padding-left: 0;
}

.compare tbody tr,
.compare tfoot tr {
  border-top: 2px solid var(--ink);
}

.compare thead th {
  vertical-align: bottom;
  padding-block: 0.75rem 0.65rem;
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
}

.compare__price {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  line-height: 1.15;
}

.compare tbody th {
  font-family: var(--font-sign);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
}

.compare__free {
  color: var(--steel);
}

/* Pro's column hangs from the sign's black band */
.compare .compare__pro {
  padding-inline: 0.6rem 0;
  border-left: 3px solid var(--ink);
}

.compare thead .compare__pro {
  padding-right: 0.6rem;
  background: var(--ink);
  color: var(--paper);
}

.compare tfoot td {
  padding-top: 0.85rem;
}

.compare tfoot .more-link {
  font-size: 1.125rem;
}

/* Tool names and the example record */

code,
pre {
  font-family: var(--font-code);
}

code {
  font-size: 0.9em;
}

pre {
  margin: 0;
}

.tools {
  border-bottom: 2px solid var(--ink);
}

.tools__row {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0 0.85rem;
  border-top: 2px solid var(--ink);
}

.tools dt {
  font-family: var(--font-code);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.tools dt code,
.printout__title code {
  font-size: inherit;
}

.printout__title + .tools {
  margin-top: 1rem;
}

.tools__note {
  margin-top: 1rem;
  color: var(--steel);
  font-size: 1rem;
}

.printout__title {
  font-size: 1.375rem;
  line-height: 1.1;
}

.printout__block + .printout__block {
  margin-top: 2.25rem;
}

.code {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--ink);
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code code {
  font-size: inherit;
}

/* one block per line, with a hanging indent, so a line that has to wrap
   on a narrow screen stays under its own key */
.code__line {
  display: block;
  padding-left: 2ch;
  text-indent: -2ch;
}

.code__line--1 {
  padding-left: 4ch;
  text-indent: -4ch;
}

.code__line--2 {
  padding-left: 6ch;
  text-indent: -6ch;
}

.code__line--3 {
  padding-left: 8ch;
  text-indent: -8ch;
}

/* Wider screens */

@media (min-width: 40em) {
  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.25rem;
  }

  .field:not(.field--check) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .field--wide,
  .form__submit,
  .form__status,
  .form__note {
    grid-column: 1 / -1;
  }

  .button--wide {
    width: auto;
    min-width: 16rem;
  }

  .issue,
  .sheet {
    padding: 3rem 2rem 2rem;
  }

  .signup {
    padding: 2.25rem 2rem 2rem;
  }

  .roles__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 2rem;
  }

  .qa__item {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 2rem;
  }

  .roles dt,
  .qa__q {
    padding-top: 0.1em;
  }

  .compare {
    font-size: 1.0625rem;
  }

  .compare__col-label {
    width: 31%;
  }

  .compare__col-free {
    width: 30%;
  }

  .compare__col-pro {
    width: 39%;
  }

  .compare th,
  .compare td {
    padding: 0.75rem 0.9rem 0.8rem;
  }

  .compare .compare__pro {
    padding-inline: 1rem 0.9rem;
  }

  .compare thead th {
    font-size: 2.25rem;
  }

  .compare tbody th {
    font-size: 1.1875rem;
  }

  .tools__row {
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 1.25rem;
  }

  .code {
    font-size: 0.875rem;
  }
}

@media (min-width: 48em) {
  body {
    font-size: 1.125rem;
  }

  .shell {
    width: min(100% - 4rem, 76rem);
  }

  .top__row {
    flex-wrap: nowrap;
    gap: 1.5rem;
    padding-block: 1rem;
  }

  .nav {
    order: 1;
    flex: 0 1 auto;
    margin-left: auto;
    flex-wrap: nowrap;
  }

  .nav__cta {
    order: 2;
    margin-left: 0;
    padding: 0.6rem 1rem 0.5rem;
    font-size: 1.125rem;
  }

  .sign__band {
    padding: 1rem 2.5rem 0.85rem;
    font-size: 1.375rem;
  }

  .sign__body {
    padding: 2.5rem 2.5rem 2.75rem;
  }

  .sign__lede {
    font-size: 1.25rem;
  }

  .legs {
    height: 5.5rem;
  }

  .legs__post {
    width: 1.125rem;
  }

  .legs__tape {
    top: 0.75rem;
    left: calc(14% - 1.125rem * 10 / 18);
    width: calc(1.125rem * 120 / 18);
  }

  .section {
    padding-block: 5.5rem;
  }

  .section__lede {
    font-size: 1.25rem;
  }

  .flow {
    grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }

  .flow__arrow {
    margin-top: 6.25rem;
    transform: none;
  }

  .teaser {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
  }

  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}

@media (min-width: 60em) {
  .sign__body {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 23rem);
    align-items: end;
    gap: 3rem;
  }

  .sign__art {
    display: block;
    padding-bottom: 0.25rem;
  }

  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4.5rem;
  }

  .issue,
  .signup,
  .sheet {
    margin-top: 0.5rem;
  }

  .sign__aside {
    margin-top: 0;
    margin-bottom: 0.25rem;
  }
}

@media (min-width: 64em) {
  .nav__link--section {
    display: inline;
  }
}

@media (max-width: 22.5em) {
  .nav__cta {
    padding-inline: 0.6rem;
    font-size: 1rem;
  }

  .brand__name {
    font-size: 1.5rem;
  }

  /* the smallest phones: give the comparison every pixel, and hyphenate
     properly rather than split a word wherever it runs out of room */
  .sheet {
    padding-inline: 0.75rem;
  }

  .compare {
    font-size: 0.875rem;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .compare th,
  .compare td {
    padding-inline: 0.3rem;
  }

  .compare .compare__pro {
    padding-inline: 0.45rem 0;
  }

  .compare tbody th {
    font-size: 0.9375rem;
  }

  .compare thead th {
    font-size: 1.5rem;
  }
}

/* The one moment of motion: the first example project advances a stage. */

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

  .track.is-ready:not(.is-play) .is-moved::after {
    transform: scaleX(0);
  }

  .track.is-ready:not(.is-play) .is-current::before {
    transform: scale(0);
  }

  .track.is-play .is-moved::after {
    animation: track-fill 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s both;
  }

  .track.is-play .is-current::before {
    animation: track-pin 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.85s both;
  }

  @keyframes track-fill {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @keyframes track-pin {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
}

@media print {
  .track.is-ready .is-moved::after,
  .track.is-ready .is-current::before {
    transform: none !important;
    animation: none !important;
  }

  .legs,
  .nav,
  .nav__cta,
  .signup,
  .skip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}