:root {
  --canvas: #ffffff;
  --grey-10: #f4f4f4;
  --grey-50: #8d8d8d;
  --line: #e0e0e0;
  --line-2: #c6c6c6;
  --ink: #161616;
  --ink-2: #525252;
  --ink-3: #6f6f6f;
  --blue: #0f62fe;
  --blue-10: #edf5ff;
  --blue-40: #78a9ff;
  --blue-70: #0043ce;
  --dark: #161616;
  --dark-ink: #f4f4f4;
  --ok-bg: #defbe6;
  --ok-ink: #0e6027;
  --ok-accent: #24a148;
  --err-bg: #fff1f1;
  --err-ink: #a2191f;
  --warn-bg: #fff8e1;
  --warn-ink: #8a6100;
  --radius: 2px;
}

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

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-medium.woff2") format("woff2");
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  line-height: 1.5;
}

/* Visually hidden but still in the accessibility tree: used for a section
   heading that would otherwise leave the document outline skipping a level. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wordmark {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.6;
}

/* The footer carries the wordmark and the domain (spec section 5.9). The domain
   is quiet secondary text beside the wordmark. */
.footer-domain {
  margin-left: 12px;
  color: var(--ink-3);
  font-size: 11px;
}

/* Top bar */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.nav a:not(.btn) {
  color: var(--ink-2);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

/* Hero */

.hero {
  max-width: 820px;
  padding: 72px 28px 56px;
}

.kicker {
  margin: 0 0 20px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.h1 {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.accent {
  font-style: normal;
  border-bottom: 3px solid var(--blue);
  padding-bottom: 2px;
}

.sub {
  max-width: 58ch;
  margin: 0 0 28px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons */

.btn,
.btn-2 {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.btn {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.btn-2 {
  border: 1px solid var(--blue);
  color: var(--blue);
}

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

.nav a:not(.btn):active {
  color: var(--blue);
}

.btn:hover {
  border-color: var(--blue-70);
  background: var(--blue-70);
}

.btn:active {
  border-color: var(--ink);
  background: var(--ink);
}

.btn-2:hover {
  border-color: var(--blue-70);
  background: var(--blue-10);
  color: var(--blue-70);
}

.btn-2:active {
  border-color: var(--ink);
  background: var(--grey-10);
  color: var(--ink);
}

/* Sections */

.section {
  padding: 56px 28px;
  border-top: 1px solid var(--line);
}

.band-dark {
  background: var(--dark);
  color: var(--dark-ink);
  border-top: 0;
}

.section-h {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 400;
}

.lead {
  max-width: 62ch;
  margin: 0 0 26px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

.band-dark .lead {
  color: var(--dark-ink);
}

/* The problem: pictogram and chips */

.pictogram {
  display: block;
  max-width: 96px;
  margin: 0 0 24px;
  color: var(--blue);
}

.pictogram svg {
  display: block;
  width: 100%;
  height: auto;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  color: var(--ink);
  font-size: 13px;
}

/* Dark band: Read, Stay, Build */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1080px;
  background: var(--line);
}

.tile {
  padding: 24px 22px 26px;
  background: var(--dark);
}

.tile-num {
  margin: 0 0 12px;
  color: var(--blue-40);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.tile-body {
  margin: 0;
  color: var(--dark-ink);
  font-size: 14px;
  line-height: 1.55;
}

/* Case cards: three anonymised engagements */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-tag {
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
}

.card-body {
  flex: 1;
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 12.5px;
}

.card-outcome {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ok-ink);
  font-size: 12px;
}

/* About: the record, the badges and the closing column */

.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  max-width: 1080px;
}

.about-body {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.badge {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--grey-10);
  color: var(--ink-2);
  font-size: 11px;
}

.about-closing {
  color: var(--ink-2);
  font-size: 12.5px;
}

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

/* Start with a Read: the closing blue band, the white form card and the
   thank-you state. */
.cta-band {
  background: var(--blue);
  color: var(--canvas);
  border-top: 0;
}

.cta-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 32px 48px;
  align-items: start;
  max-width: 1080px;
}

.cta-band-h {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 400;
}

.cta-band-lead {
  max-width: 46ch;
  margin: 0;
  color: var(--blue-10);
  font-size: 15px;
  line-height: 1.55;
}

.enquiry {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
}

/* site.js hides the form after a successful post by setting the hidden
   attribute; the author display above would otherwise win over it. */
.enquiry[hidden] {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12.5px;
  font-weight: 500;
}

.field input,
.field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* The honeypot: present for bots, out of sight and out of the tab order. */
.field-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.enquiry .btn {
  align-self: flex-start;
}

.form-error {
  margin: 0;
  color: var(--err-ink);
  font-size: 12.5px;
}

.thanks {
  display: none;
  max-width: 520px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
}

/* The two thank-you paths: the JS swap adds .thanks-on, the no-JS post lands
   on /#thanks and the fragment matches :target. */
#thanks:target,
.thanks-on {
  display: block;
}

/* The no-JS post lands on /#thanks: the thank-you block is the target and the
   form is no longer shown, so the visitor cannot submit a second time. The
   block precedes the form in the markup, so the visual order is unchanged. */
#thanks:target ~ .enquiry {
  display: none;
}

.thanks-h {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.thanks p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Proof in action: the demonstrations */

.demo-context {
  max-width: 62ch;
  margin: 28px 0 0;
  font-size: 14.5px;
}

.demo-note {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

/* The compare component. Without JavaScript the two states stack and both
   stay readable; only site.js puts the wrapper into compare mode. */
.compare {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 14px 0 0;
  position: relative;
  --pos: 52%;
  /* The paper cards sit two to a row. They keep the prototype's 180 px width
     while two of them fit beside the 14 px left inset, and scale down instead
     of overlapping text on a narrow stage. */
  --doc-w: min(180px, calc((100% - 34px) / 2));
}

/* Document order keeps the clipped layer last; the fallback reads before
   first, so the before state is ordered above the after state. */
.compare-over {
  order: -1;
}

.compare-under,
.compare-over {
  padding: 20px 22px;
}

.compare-over {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--grey-10);
}

.compare-line,
.compare-knob,
.compare-range {
  display: none;
}

.compare-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* The state tags sit over the range input; without this they trap the drag. */
  pointer-events: none;
}

.compare-tag-before {
  background: var(--ink);
  color: var(--canvas);
}

.compare-tag-after {
  background: var(--blue);
  color: var(--canvas);
}

/* The paper artefacts of the before state, at the prototype's positions: the
   four of them fill the half of the stage the divider leaves revealed at 52%.
   The two right-hand cards clamp to the stage edge, so none of them is ever
   cut off. */
.doc {
  box-sizing: border-box;
  width: var(--doc-w);
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  background: var(--canvas);
  color: var(--ink-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  line-height: 1.55;
}

.doc-title {
  display: block;
  margin: 0 0 3px;
  padding: 0 0 3px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-dim {
  color: var(--ink-3);
}

.doc-flag {
  color: var(--err-ink);
  font-weight: 500;
  text-transform: uppercase;
}

.doc-1 {
  left: 14px;
  top: 52px;
  transform: rotate(-3deg);
}

.doc-2 {
  left: min(186px, calc(100% - var(--doc-w)));
  top: 44px;
  transform: rotate(2deg);
}

.doc-3 {
  left: 44px;
  top: 206px;
  transform: rotate(2deg);
}

.doc-4 {
  left: min(214px, calc(100% - var(--doc-w)));
  top: 198px;
  transform: rotate(-2deg);
}

/* The email artefacts of the before state: a thread six weeks old, three
   replies that never resolve anything. Positions are the prototype's. */
.mail {
  box-sizing: border-box;
  width: min(250px, calc(100% - 74px));
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink-2);
}

.mail-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 3px;
  color: var(--ink-3);
  font-size: 8.5px;
}

.mail-subject {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 500;
}

.mail-snippet {
  margin: 0;
  color: var(--ink-3);
  font-size: 9.5px;
  line-height: 1.45;
}

.mail-1 {
  left: 14px;
  top: 48px;
  transform: rotate(-1deg);
}

.mail-2 {
  left: 60px;
  top: 132px;
  transform: rotate(1deg);
}

.mail-3 {
  left: 26px;
  top: 216px;
  transform: rotate(-1deg);
}

/* The reconciled after state. */
.tbl {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 10.5px;
}

.tbl th {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--grey-10);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 500;
  text-align: left;
}

.tbl td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--grey-10);
}

.tbl-flag {
  background: var(--blue-10);
  color: var(--blue-70);
  font-weight: 500;
}

.compare-cap {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 11px;
}

/* Compare mode, entered only once site.js is running. */
.compare-live {
  height: 330px;
  border: 1px solid var(--line);
  background: var(--canvas);
  overflow: hidden;
}

.compare-live .compare-under,
.compare-live .compare-over {
  position: absolute;
  inset: 0;
}

.compare-live .compare-over {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

@media (prefers-reduced-motion: no-preference) {
  .compare-live .compare-over {
    transition: clip-path 200ms linear;
  }

  /* The divider and the knob track the same --pos as the clip, so they move
     on the same clock and never disagree mid-step. */
  .compare-live .compare-line,
  .compare-live .compare-knob {
    transition: left 200ms linear;
  }
}

.compare-live .compare-line {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 6;
  width: 2px;
  background: var(--blue);
}

.compare-live .compare-knob {
  display: flex;
  position: absolute;
  top: 50%;
  /* The 36 px knob carries a 2 px border (40 px box), so half of it is 20 px:
     the clamp keeps the whole knob inside the stage at 0 % and 100 %. */
  left: clamp(20px, var(--pos), calc(100% - 20px));
  z-index: 7;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--canvas);
  color: var(--blue);
  cursor: ew-resize;
  font-size: 13px;
  transform: translate(-50%, -50%);
  user-select: none;
}

/* The range input is transparent and stretched over the stage, so the focus
   outline is drawn on the knob it drives. The second rule carries the same
   ring on engines that do not support :has(). */
.compare-live:has(.compare-range:focus) .compare-knob {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.compare-live:focus-within .compare-knob {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.compare-live .compare-range {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare-live .compare-tag {
  position: absolute;
  top: 10px;
  z-index: 9;
}

.compare-live .compare-tag-before {
  left: 12px;
}

.compare-live .compare-tag-after {
  right: 12px;
}

.compare-live .doc {
  position: absolute;
}

.compare-live .mail {
  position: absolute;
}

/* The toggle component, demonstrations 3 and 4. The checkbox drives the state
   in CSS alone: it stays focusable but invisible, the track carries the focus
   ring, and the panel out of view is hidden from assistive technology as well
   as the eye. Both panels share one stage and the state on screen is the one
   left in flow, so the stage is only ever as tall as what it shows and the
   panel out of view cannot add scroll space. */
.toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  position: relative;
  max-width: 720px;
  margin: 14px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--grey-10);
  overflow: hidden;
}

.toggle-in {
  position: absolute;
  width: 36px;
  height: 18px;
  margin: 0;
  opacity: 0;
}

.toggle-switch {
  display: inline-flex;
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
}

.toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: var(--grey-50);
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--canvas);
}

.toggle-b {
  display: none;
}

/* The two panels stack inside one stage; the stage is the grid item and the
   panels are its block children, so the panel that overlays during the
   cross-fade is positioned against the stage's own box, which is exactly the
   static panel's box. Positioning them directly against the grid container
   resolves the overlay against the padding box, which is 16 px wider than the
   static panel in some engines. */
.toggle-stage {
  grid-row: 2;
  grid-column: 1;
  position: relative;
}

.toggle-after {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}

.toggle:has(.toggle-in:checked) .toggle-track {
  background: var(--blue);
}

.toggle:has(.toggle-in:checked) .toggle-knob {
  left: 20px;
}

.toggle:has(.toggle-in:checked) .toggle-a {
  display: none;
}

.toggle:has(.toggle-in:checked) .toggle-b {
  display: inline;
}

.toggle:has(.toggle-in:checked) .toggle-before {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}

.toggle:has(.toggle-in:checked) .toggle-after {
  position: static;
  visibility: visible;
  opacity: 1;
}

/* The ring goes on the track, because the checkbox it belongs to is
   invisible. :focus-within is the single rule and needs no :has() support. */
.toggle:focus-within .toggle-track {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .toggle-before,
  .toggle-after {
    transition: opacity 200ms linear, visibility 200ms linear;
  }
}

/* Demonstration 3: the five messages, as they arrive and once owned. */
.toggle-hint {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.comm {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}

.comm-ok {
  border-left: 2px solid var(--ok-accent);
}

.comm-icon,
.comm-check {
  display: block;
  flex: 0 0 auto;
}

.comm-icon {
  color: var(--blue);
}

.comm-check {
  color: var(--ok-accent);
}

.comm-icon svg,
.comm-check svg {
  display: block;
  width: 18px;
  height: 18px;
}

.comm-tag {
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--line);
  color: var(--ink-2);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* The message holds the width a sentence needs and never shrinks below it,
   so a narrow row wraps the state chip instead of squeezing the text. */
.comm-text {
  flex: 1 0 200px;
  color: var(--ink-2);
  font-size: 10px;
  line-height: 1.45;
}

.comm-meta {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 8.5px;
}

.comm-standard {
  display: block;
  margin-top: 3px;
  color: var(--ok-ink);
  font-size: 9px;
  font-weight: 500;
}

/* The state chip and the green check wrap as one unit, so a narrow row never
   strands the check on a line of its own. */
.comm-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.comm-state .state {
  margin-left: 0;
}

.state {
  flex: 0 0 auto;
  margin: 2px 0 0 auto;
  padding: 2px 6px;
  border-radius: var(--radius);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.st-silent {
  background: var(--grey-10);
  color: var(--ink-2);
}

.st-warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.st-bad {
  background: var(--err-bg);
  color: var(--err-ink);
}

.st-lost {
  background: var(--err-ink);
  color: var(--canvas);
}

.st-ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
}

.comm-sum {
  margin: 10px 0 0;
  font-size: 9.5px;
  font-weight: 500;
}

.comm-sum-bad {
  color: var(--err-ink);
}

.comm-sum-good {
  color: var(--ok-ink);
}

.comm-rule {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 9.5px;
}

/* Demonstration 4: the manual patchwork, then the small app that replaces
   it. */
.toggle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toggle-chip {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 10.5px;
}

.toggle-chip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--line-2);
  vertical-align: middle;
}

.app-card {
  max-width: 360px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}

.app-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--grey-10);
  color: var(--ink-2);
  font-size: 10.5px;
}

.app-row:last-child {
  border-bottom: 0;
}

.app-ok {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--ok-bg);
  color: var(--ok-ink);
  font-size: 9.5px;
  font-weight: 500;
}

.toggle-cap {
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: 11px;
}

/* On a phone the message keeps a line of its own, so every row has the same
   shape and the text keeps a readable width. */
@media (max-width: 480px) {
  .comm-text {
    flex-basis: 100%;
  }
}

@media (max-width: 860px) {
  .cta-band-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .tiles,
  .cards,
  .about {
    grid-template-columns: 1fr;
  }

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

  .cta-band-h {
    font-size: 22px;
  }

  /* Phone legibility, deferred from Task 4: the 8.5 px mono documents scale up
     to 10 px. The stage is the horizontal scroll boundary, so a demo that
     outgrows a phone scrolls inside itself, never the page. The after tables go
     equal-column so no row pushes past the stage edge. */
  .compare-live {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tbl {
    table-layout: fixed;
  }

  .doc {
    font-size: 10px;
  }

  .doc-title {
    font-size: 9px;
  }
}