/* Alfie, the marketing site.

   BUMP THE ?v= IN ALL THREE PAGES WHEN THIS FILE CHANGES.

   Cloudflare serves this path with `cache-control: public, max-age=14400,
   must-revalidate`, and must-revalidate does not force a revalidation while a
   copy is still fresh. So a returning visitor inside four hours would get new
   markup and their old stylesheet, which on a rewrite this size is an
   unstyled page. The HTML itself is safe: it answers DYNAMIC with
   max-age=0.

   A query is a different cache key, so bumping it is a guaranteed fresh
   fetch. It is the version of a content hash a site with no build step can
   have, and this site deploys byte for byte on purpose. There is no purging
   from a laptop either: wrangler's token carries zone read and no cache
   scope, so a wrong answer here needs somebody in the dashboard.

   scripts/check-copy.sh fails if the three pages disagree about the number.
   It cannot tell you that you forgot to bump it.

   The page is a form. Not a page with pictures of forms on it: the sheet, the
   parts, the ruled boxes and the field bands are the document itself, and the
   only things drawn as reproductions are the records a home actually keeps.
   Every value comes from /form-tokens.css, which is where the reasons are
   written down.

   Three things to know before editing:

   1. A `.repro-` class is a picture of a piece of paper, and scripts/
      check_tokens.py exempts its type from the 16px floor while
      app/scripts/site-audit.mjs exempts it from the same floor on the live
      page. So a `.repro-` selector may set a literal font-size and a small
      one. NOTHING ELSE MAY. If a new class needs the prefix, it needs the
      prefix in site-audit.mjs's FACSIMILES list too, or the exemption
      silently stops applying and the audit reports the reproduction as a
      fault.

   2. There is one animation on this site and it is the highlighter ring. It
      lives inside `prefers-reduced-motion: no-preference` and the resting
      state is the finished one. There is no JavaScript.

   3. Nothing here has a border-radius, a shadow or a transition, and the one
      gradient in the file is a mask rather than a colour: it is the edge
      where the Statement of Deficiencies excerpt stops being quoted. A form
      has rules where a screen design has a shadow, and the rule's weight is
      what carries the level: heavy bounds a part, thin bounds a field,
      --f-hair divides rows inside a grid.

   4. Capitals are printed on the reproductions and nowhere else. Every
      `text-transform: uppercase` in this file sits on a `.repro-` selector,
      because a real form prints its field labels in caps and a landing page
      that puts a tracked-out label above every heading is docs/ai-tells.md
      item 15.
*/

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

html {
  background: var(--f-sheet);
  -webkit-text-size-adjust: 100%;
}

/* White on white. What divides the sheet from what surrounds it is its
   keyline and nothing else, so there is no tint anywhere on the page and
   every decision has to be made by the grid, the rules and the type. The
   padding is what keeps the keyline off the edge of a phone. */
body {
  margin: 0;
  padding: 0 var(--f-row);
  background: var(--f-sheet);
  color: var(--f-toner);
  font-family: var(--f-print);
  font-size: var(--text-form-body);
  line-height: var(--f-leading-prose);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--f-gut);
  background: var(--f-toner);
  color: var(--f-sheet);
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  text-decoration: none;
  z-index: 2;
}

.skip:focus {
  left: 0;
}

:focus-visible {
  outline: var(--f-rule-heavy) solid var(--f-toner);
  outline-offset: 2px;
}

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

/* --- The sheet ---------------------------------------------------------
   One piece of paper on a manila folder. It stops at 52rem, which is about
   what US Letter measures once its margins are off, and below that it runs
   to the edge of the phone with the folder showing above and below only. */

.sheet {
  max-width: var(--f-sheet-w);
  margin: var(--f-gut) auto;
  background: var(--f-sheet);
  border: var(--f-rule-heavy) solid var(--f-toner);
}

/* --- Letterhead --------------------------------------------------------- */

/* A hairline, where a part boundary is heavy. The letterhead is a field on
   the sheet, not a part of the form, and the weight is what says so. Without
   it the wordmark, the tagline and the headline ran together as one block. */
header {
  border-bottom: var(--f-rule) solid var(--f-toner);
  padding: var(--f-gut-lg) var(--f-pad);
}

/* The wordmark and the phone on one line, the tagline under both. A stacked
   letterhead ran 144px before the headline on a phone, which is a third of the
   first screen spent on saying who we are twice. */
.letterhead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--f-gut);
  row-gap: 2px;
}

.wordmark {
  grid-column: 1;
  grid-row: 1;
}

.phone-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.tagline {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Not a flex container. `align-items: center` centred the square period on
   the x-height, and brand.md §6 puts it on the baseline: it is a full stop.
   `display: block` rather than inline-block because site-audit.mjs measures a
   link's 44px target only when the stylesheet has boxed it as flex,
   inline-flex or block, and inline-block would take the wordmark out of that
   sweep without saying so. */
.wordmark {
  display: block;
  width: max-content;
  justify-self: start;
  min-height: 44px;
  line-height: 44px;
  color: var(--f-toner);
  font-weight: 800;
  font-size: var(--text-form-head);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.word-dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.08em;
  background: var(--f-marker);
  vertical-align: baseline;
}

.tagline {
  margin: 0;
  font-size: var(--text-form-data);
  line-height: var(--f-leading-caption);
  color: var(--f-faded);
}

.phone-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  color: var(--f-toner);
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  text-decoration-thickness: var(--f-rule);
  text-underline-offset: 3px;
}

/* --- Parts -------------------------------------------------------------
   Each section is a part of the form. They share edges rather than float,
   so the whole page reads as one continuous ruled document. */

.part {
  border-top: var(--f-rule-heavy) solid var(--f-toner);
  padding: var(--f-gut-lg) var(--f-pad) var(--f-block);
}

.part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--f-row) var(--f-gut);
  margin: calc(var(--f-gut-lg) * -1) calc(var(--f-pad) * -1) var(--f-gut-lg);
  padding: var(--f-row) var(--f-pad);
  border-bottom: var(--f-rule) solid var(--f-toner);
}

h1,
h2 {
  margin: 0;
  font-weight: 700;
  line-height: var(--f-leading-tight);
  letter-spacing: -0.015em;
}

/* 22 on a 28px line, which is the line the prose sits on too. */
h2 {
  font-size: var(--text-form-head);
}

/* The period a form covers, in the band where a form puts its date field. */
.part-when {
  margin: 0;
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  color: var(--f-faded);
}

/* --- The title block --------------------------------------------------- */

.part-title {
  border-top: 0;
}

h1 {
  max-width: 20ch;
  font-size: var(--text-form-title);
  font-weight: 800;
  /* 28px type on a 32px line. Written here rather than left to a ratio,
     because two headline sizes need two answers to stay on the rhythm. */
  line-height: 32px;
  letter-spacing: -0.03em;
}

/* The heading size in book weight. Weight is a difference a reader can see;
   a 19px step against a 17px body was not. */
/* Body size on a phone and the heading size on a desk. A phone screen has
   no competing text for a lead to be distinguished from, and 22px there cost
   seven lines before the record a reader came for. */
.lead {
  max-width: var(--f-measure);
  margin: var(--f-block) 0 0;
}

.act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--f-gut);
  margin: var(--f-gut-lg) 0 0;
}

.act-note {
  font-size: var(--text-form-data);
  color: var(--f-faded);
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--f-gut-lg);
  background: var(--f-toner);
  color: var(--f-sheet);
  font-family: var(--f-print);
  font-size: var(--text-form-body);
  font-weight: 700;
  text-decoration: none;
}

.btn:hover {
  background: var(--f-pen);
}

.btn:focus-visible {
  outline-color: var(--f-pen);
}

/* --- Prose -------------------------------------------------------------- */

.prose {
  max-width: var(--f-measure);
}

/* One line of gap, so two paragraphs keep the 28px rhythm instead of
   drifting off it. */
.prose p {
  margin: 0 0 calc(var(--f-leading-prose) * 1em);
}

.prose p:last-child {
  margin-bottom: 0;
}

.note {
  margin-top: var(--f-gut-lg);
  color: var(--f-faded);
}

/* `:not(.btn)` is load-bearing. The pricing part's button sits inside a
   .prose block, and `.prose a` outranks `.btn`, so without this the one thing
   on the page that sells drew ballpoint blue on black at 2.56:1. The audit
   caught it; reading the file would not have. */
.prose a:not(.btn) {
  color: var(--f-pen);
  text-decoration-thickness: var(--f-rule);
  text-underline-offset: 3px;
}

/* Prose on the left, the record it is about on the right, the way a form
   keeps a margin for notes. One column until there is room for two. */
.two {
  display: grid;
  gap: var(--f-block) var(--f-gut-lg);
}

figure {
  margin: 0;
}

/* Public Sans, not Courier. A caption is a sentence, and the rule in
   form-tokens.css is that Courier sets what was typed into a field: codes,
   dates, counts, a phone number. Four captions and a tagline were set in it
   here and every one of them read as a machine label. */
figcaption {
  margin-top: var(--f-gut);
  font-size: var(--text-form-data);
  line-height: var(--f-leading-caption);
  color: var(--f-faded);
}

/* --- The medication record --------------------------------------------
   The hero, and the one thing on the page that has to look printed rather
   than drawn: same rule weight throughout, cells sized by the type in them,
   a cramped drug column, a legend underneath. It runs to the edges of its
   part, because a form's grid runs to the edge of its box. */

.part-record {
  padding: 0 0 var(--f-gut-lg);
}

.repro-mar-title,
.repro-mar-fields,
.repro-mar-foot {
  margin: 0;
  padding: 0 var(--f-pad);
  font-family: var(--f-typed);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.repro-mar-title {
  display: flex;
  justify-content: space-between;
  gap: var(--f-gut);
  padding-top: var(--f-gut);
  font-size: 12px;
  font-weight: 400;
}

.repro-mar-when {
  white-space: nowrap;
}

.repro-mar-fields {
  display: flex;
  gap: var(--f-gut-lg);
  padding-bottom: 6px;
  color: var(--f-faded);
}

.repro-mar-fields span {
  flex: 1;
  border-bottom: var(--f-rule) solid var(--f-hair);
}

.repro-pen {
  font-family: var(--f-hand);
  font-size: 17px;
  font-style: normal;
  color: var(--f-pen);
  text-transform: none;
}

.repro-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: var(--f-rule) solid var(--f-toner);
  border-bottom: var(--f-rule) solid var(--f-toner);
}

.repro-grid th,
.repro-grid td {
  border-right: var(--f-rule) solid var(--f-hair);
  padding: 0;
  font-family: var(--f-typed);
  font-weight: 400;
  text-align: center;
}

.repro-grid tr > :last-child {
  border-right: 0;
}

.repro-grid thead th {
  border-bottom: var(--f-rule) solid var(--f-toner);
  padding: 3px 0;
  font-size: 11px;
}

.repro-grid tbody tr + tr th,
.repro-grid tbody tr + tr td {
  border-top: var(--f-rule) solid var(--f-hair);
}

.repro-grid .repro-corner,
.repro-grid .repro-med {
  width: 33%;
  border-right: var(--f-rule) solid var(--f-toner);
  padding: 3px var(--f-row);
  text-align: left;
}

.repro-corner {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.repro-med {
  font-size: 11px;
  line-height: 1.2;
}

.repro-med em {
  display: block;
  font-size: 10px;
  font-style: normal;
  color: var(--f-faded);
}

.repro-grid td i {
  display: block;
  padding: 4px 0;
  font-family: var(--f-hand);
  font-size: 19px;
  font-style: normal;
  line-height: 1.1;
  color: var(--f-pen);
}

.repro-grid tbody tr:nth-child(1) td:nth-child(3) i { transform: rotate(-2deg); }
.repro-grid tbody tr:nth-child(1) td:nth-child(6) i { transform: rotate(1.5deg); }
.repro-grid tbody tr:nth-child(2) td:nth-child(2) i { transform: rotate(2deg); }
.repro-grid tbody tr:nth-child(2) td:nth-child(5) i { transform: rotate(-1.5deg); }
.repro-grid tbody tr:nth-child(3) td:nth-child(4) i { transform: rotate(1deg); }
.repro-grid tbody tr:nth-child(3) td:nth-child(7) i { transform: rotate(-2.5deg); }

/* The blank box. It is blank: the emptiness is the signal, and the ring only
   points at it. That matters, because a highlighter on white is 1.3:1 and
   could not carry the meaning on its own. The sentence beside the record says
   the same thing in printed words, which is the rule brand.md sets for every
   handwritten mark on this site. */
.repro-blank {
  position: relative;
}

.marker {
  position: absolute;
  /* It overshoots the cell on every side, because somebody drew it over a
     printed form and did not aim. A ring that stops neatly inside the rules
     reads as part of the grid. */
  /* Sized explicitly rather than with `inset`: an <svg> root carries an
     intrinsic ratio, and inset left it 6px above the cell and 18px below,
     which read as a ring somebody had drawn at the wrong row. */
  left: -6px;
  top: -7px;
  width: calc(100% + 12px);
  height: calc(100% + 14px);
  overflow: visible;
  fill: none;
  stroke: var(--f-marker);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The viewBox is stretched to the cell, so without this the stroke comes
     out thick top and bottom and thin down the sides. */
  vector-effect: non-scaling-stroke;
}

.repro-mar-foot {
  padding-top: 6px;
  color: var(--f-faded);
  text-transform: none;
  letter-spacing: 0;
}

/* --- The flag ----------------------------------------------------------
   The page's one argument, and the one yellow moment on it. */

.flag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--f-row) var(--f-gut);
  margin-top: var(--f-gut-lg);
  padding: 0 var(--f-pad);
  font-family: var(--f-print);
  font-size: var(--text-form-body);
  line-height: var(--f-leading-prose);
  color: var(--f-toner);
}

.flag span:last-child {
  flex: 1 1 16rem;
}

.tag-chip,
.tag {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  line-height: 1.4;
  white-space: nowrap;
}

.tag-chip {
  background: var(--f-marker);
  color: var(--f-toner);
}

.tag {
  border: var(--f-rule) solid var(--f-toner);
  color: var(--f-toner);
}

/* --- The register ------------------------------------------------------ */

/* A grid runs to the edge of the sheet. Same rule as the medication record,
   and it is what gives the four columns room on a 375px screen: inside the
   part's padding the table's own minimum was 5px wider than the phone. */
.reg {
  width: calc(100% + var(--f-pad) * 2);
  margin: var(--f-block) calc(var(--f-pad) * -1) 0;
  border-top: var(--f-rule) solid var(--f-toner);
  border-bottom: var(--f-rule) solid var(--f-toner);
  border-collapse: collapse;
}

.reg tr > :first-child {
  border-left: 0;
}

.reg tr > :last-child {
  border-right: 0;
}

.reg caption {
  text-align: left;
}

/* Tighter across than down on a phone. Correcting Courier's optical size
   widened the four columns by 13 per cent and the table went 14px over a
   375px screen; four columns of 8px side padding is 64px of the width, and
   6px buys back 16. A form's cells are tight anyway. */
.reg th,
.reg td {
  border: var(--f-rule) solid var(--f-hair);
  padding: var(--f-row) 6px;
  text-align: left;
  vertical-align: top;
}

.reg thead th {
  border-bottom: var(--f-rule) solid var(--f-toner);
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  font-weight: 400;
  line-height: var(--f-leading-tight);
}

.reg-topic {
  font-size: var(--text-form-body);
  line-height: var(--f-leading-tight);
}

.reg-num {
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.reg-tag {
  width: 1%;
  white-space: nowrap;
}

/* Magnitude is not a warning, so the bar is ink and never the marker. */
.reg-bar {
  /* Overridden per row by an inline style carrying the real share. Declared
     here so the token resolves when a row does not set it. */
  --w: 0%;
  display: block;
  margin-top: 4px;
  height: 3px;
  background: var(--f-sheet);
}

.reg-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  background: var(--f-faded);
}

/* --- Reproductions -----------------------------------------------------
   Each one is a record a home really keeps, drawn at the scale it is
   printed at. They are the only things on the page allowed small type. */

.repro-sod,
.repro-staff,
.repro-mini,
.repro-inv,
.repro-biz {
  border: var(--f-rule) solid var(--f-toner);
  background: var(--f-sheet);
  padding: var(--f-gut);
  font-family: var(--f-print);
  font-size: 13px;
  line-height: 1.5;
}

.repro-sod p,
.repro-staff p,
.repro-mini p,
.repro-inv p,
.repro-biz p {
  margin: 0;
}

/* A public record, quoted as an excerpt: the fragment stops rather than
   being reproduced whole, and there is no seal and no letterhead. */
.repro-sod {
  /* The one thing on the page drawn on photocopy grey, because it is the one
     thing that is a copy of somebody else's document rather than one of ours. */
  background: var(--f-copy);
  max-height: 11rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, var(--f-toner) 78%, transparent 100%);
}

.repro-sod-title {
  padding-bottom: 6px;
  border-bottom: var(--f-rule) solid var(--f-toner);
  font-family: var(--f-typed);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.repro-sod-tag {
  padding: var(--f-row) 0;
  font-size: 13px;
}

.repro-sod-tag .tag {
  font-size: 11px;
}

.repro-sod-body,
.repro-sod-more {
  padding-bottom: var(--f-row);
  font-size: 13px;
}

.repro-sod-pen {
  color: var(--f-pen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The tablet. The one solid black object on a page of paper, drawn in the
   form's own ink: this is the screen that stops the box going blank. */
.repro-round {
  background: var(--f-toner);
  color: var(--f-sheet);
  padding: var(--f-gut);
  font-family: var(--f-print);
  font-size: 13px;
  line-height: 1.4;
}

.repro-round p {
  margin: 0;
}

.repro-round-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--f-row);
  border-bottom: var(--f-rule) solid var(--f-sheet);
  font-family: var(--f-typed);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.repro-round-name {
  padding-top: var(--f-row);
  font-size: 17px;
  font-weight: 700;
}

.repro-round-name span {
  padding-left: var(--f-row);
  font-size: 12px;
  font-weight: 400;
}

.repro-round-med {
  padding-bottom: var(--f-row);
  font-family: var(--f-typed);
  font-size: 13px;
}

.repro-round-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.repro-round-btn {
  padding: 5px 8px;
  border: var(--f-rule) solid var(--f-sheet);
  font-size: 12px;
}

.repro-round-on {
  background: var(--f-sheet);
  color: var(--f-toner);
  font-weight: 700;
}

.repro-round-left {
  padding-top: var(--f-row);
  font-size: 12px;
}

/* A staff file, with the manila tab it lives behind. */
.repro-staff {
  position: relative;
  margin-top: 1.4rem;
}

.repro-staff-tab {
  position: absolute;
  top: -1.4rem;
  left: -1px;
  padding: 3px 12px;
  border: var(--f-rule) solid var(--f-toner);
  border-bottom: 0;
  background: var(--f-folder);
  font-family: var(--f-typed);
  font-size: 12px;
}

.repro-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.repro-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--f-row);
  padding: 5px 0;
  border-bottom: var(--f-rule) solid var(--f-hair);
  font-size: 13px;
}

.repro-list em {
  font-family: var(--f-typed);
  font-size: 12px;
  font-style: normal;
  color: var(--f-faded);
}

/* A tick in ballpoint. It repeats what the line already says. */
.repro-tick::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-right: 8px;
  border: solid var(--f-pen);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg) translateY(-1px);
}

.repro-staff-due,
.repro-mini-status {
  padding-top: var(--f-row);
  font-family: var(--f-typed);
  font-size: 12px;
}

.repro-mini-name {
  padding-bottom: var(--f-row);
  border-bottom: var(--f-rule) solid var(--f-toner);
  font-size: 13px;
  font-weight: 700;
}

/* A statement is a slip, not a card: rules top and bottom, no box. */
.repro-inv {
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.repro-inv-head {
  padding-bottom: var(--f-row);
  border-bottom: var(--f-rule) solid var(--f-toner);
  font-family: var(--f-typed);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.repro-inv-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.repro-inv-rows li,
.repro-inv-total {
  display: flex;
  justify-content: space-between;
  gap: var(--f-row);
  padding: 6px 0;
  font-size: 13px;
}

.repro-inv-rows li span:last-child,
.repro-inv-total span:last-child {
  font-family: var(--f-typed);
  font-variant-numeric: tabular-nums;
}

.repro-inv-total {
  border-top: var(--f-rule) solid var(--f-toner);
  font-weight: 700;
}

.repro-inv-note {
  padding-top: var(--f-row);
  font-size: 12px;
  color: var(--f-faded);
}

/* A card has an edge you can feel. */
.repro-biz {
  border-width: var(--f-rule-heavy);
}

.repro-biz-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.repro-biz-line {
  font-family: var(--f-typed);
  font-size: 12px;
  color: var(--f-faded);
}

.repro-biz-phone {
  padding-top: 2px;
  font-family: var(--f-typed);
  font-size: 15px;
}

/* The one part with nothing beside it. Set at the heading size in book
   weight, so a short paragraph fills its measure rather than leaving half
   the sheet empty, and so the page changes pace once. It is also the
   paragraph that refuses to oversell, which is worth reading slowly. */
.part-limits .prose {
  font-size: var(--text-form-head);
  line-height: var(--f-leading-tight);
  max-width: 28rem;
}

/* --- The colophon ------------------------------------------------------
   What every printed form carries and no landing page does. Hand-maintained:
   move the date when the words move. */

.colophon {
  margin: 0;
  padding-top: var(--f-gut);
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  color: var(--f-faded);
  text-align: right;
}

/* --- The price --------------------------------------------------------- */

.part-price h2 {
  font-size: var(--text-form-title);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.fee-unit {
  font-size: var(--text-form-head);
  font-weight: 400;
  letter-spacing: 0;
}

.prose ul {
  margin: 0 0 var(--f-gut);
  padding-left: var(--f-gut-lg);
}

.prose li {
  margin-bottom: var(--f-row);
}

/* A value typed into a field, quoted inside a sentence. */
.typed {
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
}

/* --- Courier, corrected to sit beside Public Sans -----------------------

   MEASURED off the two font files: Public Sans's x-height is 0.517 of its em
   and Courier Prime's is 0.451, so the same computed size draws 13 per cent
   smaller in Courier. In the footer that put the phone number and the word
   Privacy side by side at 16px each, looking like two different sizes.

   font-size-adjust and NEVER a smaller or larger font-size, for the reason
   app/web/test/helpers/budgets.ts gives: the 16px floor is read off the
   COMPUTED size, so a rule that changed the size to fix the optics would move
   the thing the floor measures. This leaves it at 16 and scales the drawing.

   Same fix as `.mono` in the product's base.css, which carries 0.493 for
   Hanken Grotesk against Plex Mono, in the other direction.

   NOT THE REPRODUCTIONS. Inside `.repro-` everything is Courier and there is
   no Public Sans to match, so scaling there would only make the medication
   record's grid bigger for no reason and cost the day columns their width. */
.phone-link,
.part-when,
.legal-date,
.typed,
.reg-num,
.tag,
.footer-links a[href^="tel:"] {
  font-size-adjust: 0.517;
}

/* --- The legal pages ---------------------------------------------------
   Same form, fewer parts. The date is a form's revision line. */

.legal-date {
  margin: var(--f-gut) 0 0;
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  color: var(--f-faded);
}

.part-title .prose {
  margin-top: var(--f-gut-lg);
}

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

footer {
  border-top: var(--f-rule-heavy) solid var(--f-toner);
  padding: var(--f-gut-lg) var(--f-pad);
}

footer p {
  margin: 0;
  max-width: var(--f-measure);
}

.footer-brand {
  font-weight: 700;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--f-gut-lg);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--f-toner);
  font-size: var(--text-form-data);
  text-decoration-thickness: var(--f-rule);
  text-underline-offset: 3px;
}

/* The number is typed data wherever it appears; "Privacy" beside it is a word. */
.footer-links a[href^="tel:"] {
  font-family: var(--f-typed);
}

.footer-fine {
  font-size: var(--text-form-data);
  line-height: var(--f-leading-caption);
  color: var(--f-faded);
}

/* --- Wider than a phone -------------------------------------------------
   The parts get their margins back and the note rail opens beside the
   prose. Nothing reflows into a different shape; the form just gets room. */

/* The reference pages, /citations/ and /tags/, 2026-09-10. They are written by
   scripts/build_site_pages.py and reuse the register table (.reg) and the prose
   column; what is new is below. A link standing alone in a table cell, a list
   or the line above a title is a tap target, so it gets the 44px floor the
   footer links already have. A link inside a sentence does not. */
.reg a,
.legal-date a,
.tag-links a {
  color: var(--f-pen);
  text-decoration-thickness: var(--f-rule);
  text-underline-offset: 3px;
}
.reg-link,
.legal-date a,
.tag-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.reg-rule {
  display: block;
  margin-top: 4px;
  font-family: var(--f-typed);
  font-size: var(--text-form-data);
  font-size-adjust: 0.517;
  white-space: nowrap;
}
.reg-when {
  display: block;
  margin-top: 4px;
  font-size: var(--text-form-data);
  line-height: var(--f-leading-caption);
  color: var(--f-faded);
}
.tag-links {
  display: grid;
  gap: 0 var(--f-gut-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag-links .tag {
  margin-right: var(--f-row);
}
/* The rule's own words fold shut: they are the evidence under the table, not
   the reading. Leave the summary as a list item. display:flex on a summary
   swallows its disclosure triangle, and the fold then reads as a heading. */
.words {
  max-width: var(--f-measure);
  margin-top: var(--f-block);
}
.more {
  margin-top: var(--f-block);
}
.words summary,
.more summary {
  min-height: 44px;
  padding: var(--f-row) 0;
  font-weight: 700;
  cursor: pointer;
}
.words dl {
  margin: var(--f-gut) 0 0;
}
.words dt {
  font-weight: 700;
}
.words dd {
  margin: 4px 0 var(--f-gut-lg);
}
.words blockquote {
  margin: 0;
  padding-left: var(--f-gut);
  border-left: var(--f-rule) solid var(--f-hair);
}
@media (min-width: 40rem) {
  .sheet {
    margin: var(--f-block) auto;
  }

  /* 44px type on a 48px line. The 32px above is for the 28px phone size and
     at 44 it set the two lines almost touching. */
  h1 {
    line-height: 48px;
  }

  .lead {
    font-size: var(--text-form-head);
    font-weight: 400;
    line-height: var(--f-leading-tight);
  }

  .tagline {
    grid-column: 1;
  }

  .phone-link {
    grid-row: 1 / span 2;
  }

  .repro-grid thead th {
    font-size: 12px;
  }

  .repro-med {
    font-size: 12px;
  }

  .repro-grid td i {
    font-size: 22px;
  }
}

@media (min-width: 48rem) {
  .tag-links {
    grid-template-columns: 1fr 1fr;
  }
  /* Four columns of prose, two of note rail, off the six the sheet is ruled
     into. Written as the shared grid rather than as a pair of measures, so a
     reproduction's left edge and everything else on that line agree. */
  .reg th,
  .reg td {
    padding: var(--f-row);
  }

  .two {
    grid-template-columns: var(--f-grid);
  }

  .two > .prose {
    grid-column: 1 / span 4;
    max-width: none;
  }

  .two > .aside {
    grid-column: 5 / span 2;
  }
}

/* --- Print --------------------------------------------------------------
   It is already a form. Take the folder away and let it be one. */

@media print {
  html,
  body {
    background: var(--f-sheet);
  }

  .sheet {
    max-width: none;
    margin: 0;
    border: 0;
  }

  .btn,
  .act-note {
    display: none;
  }
}

/* --- The one moment ----------------------------------------------------
   The highlighter goes round the empty box, once, on load. The resting state
   is the finished state, so a reader who has asked for no motion gets the
   ring already drawn rather than a box with nothing round it. */

@media (prefers-reduced-motion: no-preference) {
  .marker path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    /* Longhands, not the `animation` shorthand. A shorthand carrying a var()
       is held unresolved, and the CSSOM then answers "" for animation-name,
       so app/web/test/helpers/motion.ts reads the rule as one that does not
       animate and the whole reduced-motion sweep passes over it. */
    animation-name: ring;
    animation-duration: var(--t-marker);
    animation-timing-function: var(--f-ease);
    animation-delay: 700ms;
    animation-fill-mode: forwards;
  }

  @keyframes ring {
    to {
      stroke-dashoffset: 0;
    }
  }
}