/* ============================================================================
   DUCK THE SYSTEM — THE LEDGER
   ----------------------------------------------------------------------------
   The whole site is one continuous accounting document. Every surface is a
   form: ruled columns, line-item rows, rubber stamps, perforated edges,
   carbon-copy sheets. The rebellion is not in the ground, it is in what has
   been DONE to the document — struck-through lines, VOID stamps, ballpoint
   annotations scrawled in the margin by someone who stopped accepting it.

   Why this and not the usual dark/neon agency page: every competitor already
   ships that. The invoice is the one artifact where the agency system extracts
   its value, so it is the only honest place to argue against it. It also
   solves the anonymity constraint natively — an invoice lists roles and hours,
   never people.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Paper stock. Greenbar computer paper — the ground the argument sits on. */
  --paper:        #e3e6d5;   /* main sheet */
  --paper-bar:    #cfdbc0;   /* the green bar on alternating rows */
  --sheet:        #f1f2e8;   /* lighter form sheet, for insets */
  --sheet-edge:   #d3d8c3;   /* the fold/edge of a sheet */

  /* Carbon copies. Second and third sheets of a triplicate form. */
  --canary:       #f2e69a;   /* copy 2 — canary yellow */
  --ncr-pink:     #f0cdc6;   /* copy 3 — NCR pink */

  /* The dark sheet. Carbon paper itself — used to pace the scroll. */
  --carbon:       #22241d;
  --carbon-2:     #2e3128;
  --carbon-rule:  #454a3c;

  /* Ink. */
  --ink:          #191b15;   /* typewriter black, slightly green */
  --ink-2:        #3f4437;   /* secondary — tinted from the ground, never gray */
  --ink-3:        #5f6553;   /* tertiary / captions */
  --ink-rev:      #edefe1;   /* ink on carbon */
  --ink-rev-2:    #b9bfa8;

  /* Marks made ON the document. */
  --stamp:        #b3332b;   /* rubber stamp red */
  --stamp-deep:   #8c231d;
  --ballpoint:    #2b4699;   /* biro annotation */
  --highlight:    #d8e04a;   /* marker */

  /* Rules. */
  --rule:         #a9b399;
  --rule-soft:    #c2caae;
  --rule-heavy:   #6f7860;

  /* Type. */
  --face-doc:  "Courier Prime", "Courier New", ui-monospace, monospace;
  --face-ui:   "Archivo", system-ui, -apple-system, sans-serif;

  /* Scale — a document has few sizes, used strictly. */
  /* The stamp headline.
     Sized against the COLUMN it lives in, not the viewport. At 7.4vw the type
     hit 105px in a 590px column: the longest line overflowed by 56px and the
     headline grew to 743px tall, pushing the primary action to y=1076 — below
     the fold on any laptop. 5.2vw keeps "never touches" inside the measure and
     the button on the first screen, which is what "dominate" has to mean on a
     page whose job is conversion. */
  --t-mega:  clamp(1.95rem, 5.2vw, 4.8rem);

  /* Tractor feed. The sprocket strip down each edge of the sheet. */
  --feed-w: 2.35rem;
  --feed-y: 0px;
  --t-xl:    clamp(2.1rem, 5.6vw, 3.5rem);
  --t-lg:    clamp(1.5rem, 3.2vw, 2.05rem);
  --t-md:    clamp(1.13rem, 1.7vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-doc:   0.9375rem;   /* document body — Courier runs small */
  --t-sm:    0.8125rem;
  --t-xs:    0.6875rem;   /* field labels, account codes */

  /* Rhythm. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --gutter: clamp(1.15rem, 4.5vw, 3.5rem);
  --measure: 68ch;
  --page: 1320px;

  /* Paper depth — real offset and blur. No costume shadows. */
  --lift-1: 0 1px 2px rgba(25,27,21,.10), 0 2px 8px rgba(25,27,21,.06);
  --lift-2: 0 2px 4px rgba(25,27,21,.12), 0 10px 26px rgba(25,27,21,.10);
  --lift-3: 0 4px 8px rgba(25,27,21,.14), 0 22px 52px rgba(25,27,21,.14);

  --ease: cubic-bezier(.16,1,.3,1);      /* exponential ease-out */
  --ease-in: cubic-bezier(.7,0,.84,0);
}

/* --------------------------------------------------------------- 2. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The paper itself. Two layers, because one flat noise map reads as a filter
   rather than as a material: a coarse fibre grain, and a finer tooth over it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .62;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.20'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------- THE TRACTOR FEED ----
   Continuous-feed computer paper has sprocket strips punched down both edges.
   They are the single detail that makes the material unmistakable, and they
   move with the scroll, so the page reads as one long sheet being fed through
   rather than a set of stacked screens. */

.feed {
  position: fixed;
  top: -3rem;
  bottom: -3rem;
  width: var(--feed-w);
  z-index: 40;
  pointer-events: none;
  background-color: var(--paper-bar);
  background-image:
    radial-gradient(circle at 50% 0.62rem,
      #14160f 0 0.30rem,
      rgba(20,22,15,.55) 0.30rem 0.36rem,
      transparent 0.37rem);
  background-size: 100% 1.42rem;
  background-position-y: var(--feed-y);
  background-repeat: repeat-y;
  box-shadow: inset 0 0 0 0 transparent;
}
.feed--l { left: 0;  border-right: 1px dashed var(--rule-heavy); }
.feed--r { right: 0; border-left:  1px dashed var(--rule-heavy); }

@media (max-width: 1080px) { .feed { display: none; } }

/* Keep content clear of the strips. */
@media (min-width: 1081px) {
  body { padding-inline: var(--feed-w); }
  .masthead { padding-inline: 0; }
}

/* ------------------------------------------------------ PERFORATED TEARS --
   Section boundaries stop being hairlines and become the tear line between
   one sheet and the next. */

.band { position: relative; }
.band:not(.band--first)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 5px;
  pointer-events: none;
  background-image: radial-gradient(circle at 5px 2.5px,
    rgba(25,27,21,.36) 0 1.5px, transparent 1.7px);
  background-size: 13px 5px;
  opacity: .75;
}
.band--carbon::before { background-image: radial-gradient(circle at 5px 2.5px,
  rgba(237,239,225,.34) 0 1.5px, transparent 1.7px) !important; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--face-ui);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--highlight); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ballpoint);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--stamp); color: #fff;
  padding: var(--s3) var(--s5);
  font: 700 var(--t-sm)/1 var(--face-doc);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s4); }

/* ------------------------------------------------------ 3. DOCUMENT ATOMS */

/* Field label — the grammar of a form. Not a decorative eyebrow: these label
   an actual value beneath or beside them, as on a real printed field. */
.field-label {
  font: 700 var(--t-xs)/1.2 var(--face-doc);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.on-carbon .field-label { color: var(--ink-rev-2); }

/* Account code / reference number. */
.ref {
  font: 400 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.doc { font-family: var(--face-doc); font-size: var(--t-doc); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Struck-through line item. The core gesture of the whole site.
   Two shapes have to be supported: a list item whose span is a direct child,
   and a table row whose span sits one level down inside a <td>. Matching only
   the direct child silently killed every strike in the invoice. */
.struck { position: relative; color: var(--ink-3); }
.struck > span,
.struck td > span:first-child { position: relative; }
.struck > span::after,
.struck td > span:first-child::after {
  content: "";
  position: absolute;
  left: -.15em; right: -.15em;
  top: 52%;
  height: 2px;
  background: var(--stamp);
  transform: scaleX(var(--strike, 1));
  transform-origin: left center;
  border-radius: 2px;
}

/* Rubber stamp. Rotated, worn, over the document. */
.stamp {
  display: inline-block;
  font: 800 var(--t-sm)/1 var(--face-ui);
  font-stretch: 112%;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 3px solid var(--stamp);
  padding: .5em .7em .45em;
  transform: rotate(-6deg);
  opacity: .88;
  mix-blend-mode: multiply;
  white-space: nowrap;
}
.stamp--blue { color: var(--ballpoint); border-color: var(--ballpoint); }
.stamp--ink  { color: var(--ink-2); border-color: var(--ink-2); }

/* Ballpoint annotation — a human hand disagreeing with the document. */
.scrawl {
  font: 400 var(--t-doc)/1.35 var(--face-doc);
  color: var(--ballpoint);
  transform: rotate(-1.4deg);
  display: inline-block;
}

/* Perforated tear edge. */
.perf {
  height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--paper) 3.2px, transparent 3.4px);
  background-size: 14px 14px;
  background-color: transparent;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  opacity: .8;
}

/* -------------------------------------------------------- 4. PAGE FURNITURE */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: 900px; }

section { position: relative; z-index: 1; }

/* Every band is a region of the document, ruled top and bottom. */
.band { padding-block: var(--s9); border-top: 1px solid var(--rule); }
.band--tight { padding-block: var(--s7); }
.band--first { border-top: 0; }

.band--sheet  { background: var(--sheet); }
.band--canary { background: var(--canary); }
.band--carbon {
  background: var(--carbon);
  color: var(--ink-rev);
  border-top: 1px solid var(--carbon-rule);
}
.band--carbon h2, .band--carbon h3 { color: var(--ink-rev); }
.band--carbon p { color: var(--ink-rev-2); }

/* Greenbar: alternating printed bands, the signature of computer paper. */
.greenbar {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--paper-bar) 0 3.25rem,
    transparent 3.25rem 6.5rem
  );
}

/* Section heading, as a ruled document header with its reference on the right. */
.doc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s7);
}
.band--carbon .doc-head { border-bottom-color: var(--ink-rev); }
.doc-head h2 { font-size: var(--t-lg); font-stretch: 108%; }
.doc-head .ref { white-space: nowrap; }
.band--carbon .doc-head .ref { color: var(--ink-rev-2); }

.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--ink-2);
}
.band--carbon .lede { color: var(--ink-rev-2); }

/* ------------------------------------------------------------- 5. CONTROLS */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font: 800 var(--t-sm)/1 var(--face-ui);
  font-stretch: 108%;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 1.5em;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--sheet);
  cursor: pointer;
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
  box-shadow: var(--lift-1);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); box-shadow: var(--lift-1); }

/* Ink press. On hover the button takes ink the way a rubber stamp does:
   unevenly, through the same worn mask the VOID stamp uses. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.05'/%3E%3C/filter%3E%3Crect width='240' height='90' filter='url(%23i)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.05'/%3E%3C/filter%3E%3Crect width='240' height='90' filter='url(%23i)'/%3E%3C/svg%3E");
  -webkit-mask-size: cover; mask-size: cover;
  mix-blend-mode: multiply;
}
.btn:hover::after { opacity: .17; transform: scale(1); }
.btn > * { position: relative; z-index: 1; }

/* Mechanical counter. Figures roll rather than appear, and the digits are
   tabular so nothing shifts while they climb. */
.count { font-variant-numeric: tabular-nums; }

.btn--stamp { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--sheet); box-shadow: var(--lift-2); }
.band--carbon .btn--ghost { color: var(--ink-rev); border-color: var(--ink-rev); }
.band--carbon .btn--ghost:hover { background: var(--ink-rev); color: var(--carbon); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn .arrow { width: 1em; height: 1em; flex: none; }

/* Text link — underlined like a typed reference, never a bare color change. */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: var(--stamp);
  transition: background-color .18s var(--ease);
}
.link:hover { background: var(--highlight); }
.band--carbon .link { color: var(--ink-rev); }
.band--carbon .link:hover { background: var(--carbon-2); }

/* --------------------------------------------------------------- 6. HEADER */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: box-shadow .25s var(--ease);
}
.masthead[data-stuck="true"] { box-shadow: var(--lift-2); }

.masthead__in {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__mark { width: 2rem; height: 2rem; flex: none; }
.wordmark__txt {
  font: 800 var(--t-sm)/1.02 var(--face-ui);
  font-stretch: 112%;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.wordmark__txt small {
  display: block;
  font: 400 var(--t-xs)/1.3 var(--face-doc);
  letter-spacing: .16em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: .55em 0;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* The nav's own link rule out-specifies .btn and was stripping the CTA's
   padding, squashing it to a 27px slab. Restore the button's own geometry. */
.nav a.btn {
  padding: .95em 1.35em;
  border: 2px solid var(--stamp);
  color: #fff;
  letter-spacing: .1em;
}
.nav a.btn:hover { color: #fff; border-color: var(--stamp-deep); background: var(--stamp-deep); }

.nav-toggle {
  display: none;
  background: none; border: 2px solid var(--ink);
  padding: .5rem .7rem; cursor: pointer;
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 4.35rem 0 auto 0;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) var(--gutter) var(--s5);
    box-shadow: var(--lift-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--t-sm);
  }
  .nav .btn { margin-top: var(--s4); justify-content: center; }
}

/* ----------------------------------------------------------- 7. THE INVOICE */

.invoice {
  background: var(--sheet);
  border: 2px solid var(--ink);
  box-shadow: var(--lift-3);
  position: relative;
}
.invoice__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-bottom: 2px solid var(--ink);
  align-items: start;
}
.invoice__title {
  font-size: var(--t-lg);
  font-stretch: 116%;
  letter-spacing: -.02em;
}
.invoice__meta {
  display: grid;
  gap: var(--s2);
  text-align: right;
  font-family: var(--face-doc);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.invoice__meta b { color: var(--ink); font-weight: 700; }

@media (max-width: 620px) {
  .invoice__head { grid-template-columns: 1fr; }
  .invoice__meta { text-align: left; }
}

/* Line-item table. The page's primary structure — rows, not cards. */
.items { width: 100%; border-collapse: collapse; }
.items caption { text-align: left; padding: var(--s4) var(--s6) 0; }

.items th {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-heavy);
  white-space: nowrap;
}
.items th:last-child, .items td:last-child { text-align: right; }
.items th:first-child, .items td:first-child { padding-left: var(--s6); width: 3.5rem; }
.items th:last-child, .items td:last-child { padding-right: var(--s6); }

.items td {
  padding: var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--face-doc);
  font-size: var(--t-doc);
  vertical-align: baseline;
}
.items tbody tr:nth-child(odd) { background: rgba(207,219,192,.34); }
.items tbody tr:last-child td { border-bottom: 2px solid var(--ink); }

.items .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.items .amount--void { color: var(--stamp); }
.items .amount--free { color: var(--ink); }

.items__note {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-top: .35em;
  font-family: var(--face-ui);
  text-transform: none;
}

.invoice__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  flex-wrap: wrap;
}
.invoice__total dt {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.invoice__total dd {
  margin: 0;
  font: 800 var(--t-lg)/1 var(--face-ui);
  font-stretch: 112%;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------- 8. HERO */

.hero { padding-block: var(--s8) var(--s9); position: relative; overflow: hidden; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.2vw, 3.75rem);
  align-items: start;
}
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__mega {
  font-size: var(--t-mega);
  font-stretch: 122%;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .88;
  text-transform: uppercase;
  margin-bottom: var(--s5);
}
.hero__mega { overflow-wrap: break-word; hyphens: none; }
.hero__mega em {
  font-style: normal;
  display: block;
  color: var(--stamp);
  position: relative;
}

/* -------------------------------------------------- THE DOT-MATRIX PRINT --
   The headline is genuinely printed by an impact printer: the real <h1> is
   masked with a dot grid, so the letters are built from struck dots, and a
   clip reveals it band by band while a carriage sweeps across.

   Masking the live element rather than sampling it into a canvas means the
   browser still does the layout, so the dots can never drift out of register
   with the type — which is exactly what went wrong with the canvas version.
   The text stays real, selectable and readable by screen readers throughout. */

.print { position: relative; }

/* The dot pitch is expressed in em, so the grid scales with the type. Fixed
   pixels looked right at 105px on desktop and chewed the letters to pieces at
   42px on a phone — the dots stopped describing the glyph and started
   competing with it. Proportional means the printer resolution is constant
   relative to the character, which is how a real one behaves. */
.print .hero__mega {
  --dot: 0.052em;
  -webkit-mask-image: radial-gradient(circle at calc(var(--dot) / 2) calc(var(--dot) / 2),
    #000 0 calc(var(--dot) * 0.35), transparent calc(var(--dot) * 0.38));
  mask-image: radial-gradient(circle at calc(var(--dot) / 2) calc(var(--dot) / 2),
    #000 0 calc(var(--dot) * 0.35), transparent calc(var(--dot) * 0.38));
  -webkit-mask-size: var(--dot) var(--dot);
  mask-size: var(--dot) var(--dot);
}

/* The reveal is a pure CSS animation with steps(), so it prints band by band
   like a real carriage and — critically — cannot stall. A JS rAF loop that
   stops leaves the headline permanently invisible; a CSS animation that never
   starts leaves it permanently visible, which is the failure worth having. */
.print[data-printing="true"] .hero__mega {
  animation: print-in .85s steps(13, end) forwards;
}
@keyframes print-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Ink density varies across a worn ribbon. */
.print .hero__mega em { filter: saturate(1.08); }

/* The carriage. Travels down the sheet while sweeping left to right, the way
   a print head does. Also pure CSS, for the same reason. */
.print__head {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6rem;
  height: 0.34em;
  background: linear-gradient(180deg, var(--ink) 0 34%, var(--stamp) 34% 66%, var(--ink) 66% 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(25,27,21,.42), 0 8px 18px rgba(25,27,21,.2);
  pointer-events: none;
  z-index: 2;
  animation:
    head-down .85s steps(13, end) forwards,
    head-sweep .142s steps(1, end) 6 alternate,
    head-lift .85s linear forwards;
}
@keyframes head-down  { to { top: calc(100% - 0.34em); } }
@keyframes head-sweep { to { left: calc(100% - 2.6rem); } }
@keyframes head-lift  { 0%, 88% { opacity: .92; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .print__head { display: none !important; }
  .print[data-printing="true"] .hero__mega { animation: none; clip-path: none; }
}

.hero__sub {
  font-size: var(--t-md);
  line-height: 1.45;
  max-width: 46ch;
  color: var(--ink-2);
  margin-bottom: var(--s6);
}
.hero__sub strong { color: var(--ink); font-weight: 700; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.hero__stamp {
  position: absolute;
  right: clamp(-1rem, 2vw, 2rem);
  top: clamp(1rem, 6vw, 4rem);
  transform: rotate(11deg);
  pointer-events: none;
  z-index: 4;
}

/* The VOID stamp that lands on the invoice. */
.void-stamp {
  font: 900 clamp(2.2rem, 6vw, 3.6rem)/1 var(--face-ui);
  font-stretch: 125%;
  letter-spacing: .06em;
  color: var(--stamp);
  border: 6px solid var(--stamp);
  border-radius: 4px;
  padding: .18em .3em .14em;
  opacity: .95;
  mix-blend-mode: multiply;
  transform: rotate(-13deg);
  position: absolute;
  /* Sits over the VOIDED rows, never over line 007. Landing the stamp on the
     one line the page is arguing you should keep would say the opposite of
     what the page says. */
  right: 7%;
  top: 36%;
  z-index: 5;
  pointer-events: none;
  /* Worn rubber: erode the fill with a coarse noise mask. Kept chunky —
     a fine-grained mask reads as a faded print, not an inked stamp. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 1.02'/%3E%3C/filter%3E%3Crect width='300' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 1.02'/%3E%3C/filter%3E%3Crect width='300' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: cover; mask-size: cover;
}

/* ------------------------------------------- 9. THE AUTHORED MOTION MOMENT */

/* One orchestrated event: the line items strike through in sequence, then the
   stamp lands. Everything is visible by default — motion only animates the
   marks being made, never the content's existence. */

.js .strike-seq .struck > span::after,
.js .strike-seq .struck td > span:first-child::after { --strike: 0; }
.js .strike-seq[data-run="true"] .struck > span::after,
.js .strike-seq[data-run="true"] .struck td > span:first-child::after {
  animation: strike-in .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes strike-in { from { --strike: 0; transform: scaleX(0); }
                       to   { --strike: 1; transform: scaleX(1); } }

.js .strike-seq .void-stamp {
  opacity: 0;
  transform: rotate(-13deg) scale(2.4);
  filter: blur(6px);
}
.js .strike-seq[data-run="true"] .void-stamp {
  animation: stamp-land .62s var(--ease) forwards;
  animation-delay: var(--stamp-delay, 900ms);
}
@keyframes stamp-land {
  0%   { opacity: 0;  transform: rotate(-13deg) scale(2.4); filter: blur(6px); }
  55%  { opacity: .95; transform: rotate(-13deg) scale(.94); filter: blur(0); }
  75%  { transform: rotate(-13deg) scale(1.03); }
  100% { opacity: .9; transform: rotate(-13deg) scale(1);   filter: blur(0); }
}

/* The whole sheet takes the impact of the stamp. */
.js .strike-seq[data-run="true"] .invoice {
  animation: sheet-jolt .3s var(--ease);
  animation-delay: calc(var(--stamp-delay, 900ms) + 230ms);
}
@keyframes sheet-jolt {
  0%,100% { transform: none; }
  30% { transform: translateY(2px) rotate(.12deg); }
}

/* Quiet arrival for document regions further down the page. */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise[data-in="true"] {
  animation: rise .62s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .strike-seq .struck > span::after,
  .js .strike-seq .struck td > span:first-child::after,
  .js .strike-seq[data-run="true"] .struck > span::after,
  .js .strike-seq[data-run="true"] .struck td > span:first-child::after { --strike: 1; transform: scaleX(1); animation: none; }
  .js .strike-seq .void-stamp,
  .js .strike-seq[data-run="true"] .void-stamp { opacity: .9; transform: rotate(-13deg); filter: none; animation: none; }
  .js .strike-seq[data-run="true"] .invoice { animation: none; }
  .js .rise, .js .rise[data-in="true"] { opacity: 1; transform: none; animation: none; }
  * { transition-duration: .01ms !important; }
}

/* -------------------------------------------------- 10. THE CREW MANIFEST */

.manifest { border-top: 2px solid currentColor; }
.manifest__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0,1.5fr) minmax(0,1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--carbon-rule);
  font-family: var(--face-doc);
  font-size: var(--t-doc);
}
.band--carbon .manifest__row { border-bottom-color: var(--carbon-rule); }

.manifest__role { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Flex so the redaction bar stays on the label's line instead of dropping to
   a second row and losing its connection to "Currently at". */
.manifest__from {
  color: var(--ink-rev-2);
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
}

/* The redaction bar. Hover reveals nothing — that is the joke and the point. */
.redact {
  display: inline-block;
  background: currentColor;
  color: inherit;
  border-radius: 1px;
  height: 1.05em;
  vertical-align: -.18em;
  min-width: 3rem;
  position: relative;
  transition: transform .2s var(--ease);
}
.redact::after {
  content: attr(data-w);
  visibility: hidden;
}
.redact:hover { transform: translateX(2px) rotate(-.4deg); }

@media (max-width: 760px) {
  .manifest__row { grid-template-columns: 3.2rem 1fr; row-gap: var(--s2); }
  .manifest__row > *:nth-child(3) { grid-column: 2; }
  .manifest__row > *:nth-child(4) { grid-column: 2; }
}

/* ------------------------------------------------------ 11. THE JOB TICKET */

.ticket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border: 2px solid var(--ink);
  background: var(--sheet);
  box-shadow: var(--lift-2);
}
.ticket__step {
  padding: var(--s6) var(--s5);
  border-right: 1px dashed var(--rule-heavy);
  position: relative;
}
.ticket__step:last-child { border-right: 0; }
.ticket__step h3 {
  font-size: var(--t-md);
  font-stretch: 108%;
  margin: var(--s3) 0 var(--s3);
}
.ticket__step p { font-size: var(--t-sm); color: var(--ink-2); }
.ticket__when {
  margin-top: var(--s4);
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
}
@media (max-width: 900px) {
  .ticket__step { border-right: 0; border-bottom: 1px dashed var(--rule-heavy); }
  .ticket__step:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------- 12. JOB FILES */

.files { display: grid; gap: var(--s5); }

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--sheet);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  position: relative;
  overflow: hidden;
}
.file:hover { transform: translateY(-3px); box-shadow: var(--lift-3); }

.file__tab {
  padding: var(--s6);
  background: var(--canary);
  border-right: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 100%;
}
.file__client {
  font: 800 var(--t-lg)/1.02 var(--face-ui);
  font-stretch: 108%;
  letter-spacing: -.025em;
  margin: var(--s2) 0 var(--s3);
}
.file__campaign {
  font: 400 var(--t-doc)/1.4 var(--face-doc);
  color: var(--ink-2);
}
.file__body { padding: var(--s6); }
.file__headline {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--s4);
  max-width: 34ch;
}

/* Results, as a ruled column of figures — the receipts. */
.figures { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: var(--s5); }
.figures div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.figures dt { font: 400 var(--t-sm)/1.3 var(--face-doc); color: var(--ink-2); }
.figures dd {
  margin: 0;
  font: 800 var(--t-md)/1 var(--face-ui);
  font-stretch: 108%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.band--carbon .figures dt { color: var(--ink-rev-2); }
.band--carbon .figures div { border-bottom-color: var(--carbon-rule); }
.band--carbon .figures { border-top-color: var(--carbon-rule); }

.figures--big dd { font-size: var(--t-lg); }

@media (max-width: 820px) {
  .file { grid-template-columns: 1fr; }
  .file__tab { border-right: 0; border-bottom: 2px solid var(--ink); }
}

/* ------------------------------------------------------- 13. THE OBJECTIONS */

.objection {
  border-bottom: 1px solid var(--rule);
}
.objection__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  text-align: left;
  background: none;
  border: 0;
  padding: var(--s5) 0;
  cursor: pointer;
  font: 700 var(--t-md)/1.3 var(--face-ui);
  letter-spacing: -.02em;
  color: var(--ink);
}
.objection__q:hover { color: var(--stamp); }
.objection__sign {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  position: relative;
  transition: transform .3s var(--ease);
}
.objection__sign::before, .objection__sign::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%; translate: -50% -50%;
}
.objection__sign::before { width: 100%; height: 2px; }
.objection__sign::after  { width: 2px; height: 100%; transition: opacity .3s var(--ease); }
.objection__q[aria-expanded="true"] .objection__sign { transform: rotate(180deg); }
.objection__q[aria-expanded="true"] .objection__sign::after { opacity: 0; }

.objection__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.objection__a > div { overflow: hidden; }
.objection__q[aria-expanded="true"] + .objection__a { grid-template-rows: 1fr; }
.objection__a p { padding-bottom: var(--s5); color: var(--ink-2); }
.objection__a p:first-child { padding-top: 0; }

/* --------------------------------------------------------- 14. THE FORM */

.po {
  background: var(--sheet);
  border: 2px solid var(--ink);
  box-shadow: var(--lift-3);
}
.po__head {
  padding: var(--s5) var(--s6);
  border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s5); flex-wrap: wrap;
}
.po__body { padding: var(--s6); }

.fieldrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s5);
  margin-bottom: var(--s5);
}

.field { display: grid; gap: var(--s2); }
.field > label {
  font: 700 var(--t-xs)/1.2 var(--face-doc);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.field .hint { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--face-ui); letter-spacing: .02em; }

.field input, .field textarea, .field select {
  font: 400 var(--t-doc)/1.5 var(--face-doc);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule-heavy);
  padding: .65rem .1rem;
  width: 100%;
  border-radius: 0;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233f4437' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .2rem center; background-size: .75rem;
  padding-right: 1.6rem;
}
.field input:hover, .field textarea:hover, .field select:hover { border-bottom-color: var(--ink-2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--ballpoint);
  background: rgba(43,70,153,.05);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-bottom-color: var(--stamp); }

.field .err {
  font: 700 var(--t-xs)/1.4 var(--face-doc);
  letter-spacing: .08em;
  color: var(--stamp-deep);
  text-transform: uppercase;
  display: none;
}
.field[data-invalid="true"] .err { display: block; }

/* Option chips, styled as tick-boxes on a form, never as cards. */
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-flex; align-items: center; gap: .55em;
  border: 2px solid var(--rule-heavy);
  padding: .6em .85em;
  font: 400 var(--t-sm)/1 var(--face-doc);
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice span::before {
  content: ""; width: .8em; height: .8em; flex: none;
  border: 2px solid var(--rule-heavy);
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice span:hover { border-color: var(--ink-2); }
.choice input:checked + span { border-color: var(--ink); background: var(--canary); }
.choice input:checked + span::before { background: var(--stamp); border-color: var(--stamp); }
.choice input:focus-visible + span { outline: 3px solid var(--ballpoint); outline-offset: 3px; }

/* Multi-step progress, as a document routing strip. */
.routing {
  display: flex; gap: 0; border: 2px solid var(--ink); border-bottom: 0;
  overflow: hidden;
}
.routing li {
  flex: 1; list-style: none;
  padding: var(--s3) var(--s4);
  font: 700 var(--t-xs)/1.2 var(--face-doc);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  background: var(--paper-bar);
  transition: background-color .3s var(--ease), color .3s var(--ease);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routing li:last-child { border-right: 0; }
.routing li[data-state="done"] { background: var(--sheet); color: var(--ink-2); }
.routing li[data-state="now"]  { background: var(--ink); color: var(--sheet); }

.step[hidden] { display: none; }

.po__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s5); margin-top: var(--s5);
  border-top: 1px solid var(--rule);
}

/* Signature line — the close. */
.signature {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px dashed var(--rule-heavy);
  display: grid; gap: var(--s2);
}
.signature__line {
  border-bottom: 2px solid var(--ink);
  height: 2.6rem;
  position: relative;
}
.signature__line::after {
  content: "×";
  position: absolute; left: 0; bottom: .2rem;
  font: 400 1.3rem/1 var(--face-doc); color: var(--ink-3);
}

/* --------------------------------------------------------- 15. THE FOOTER */

.footer {
  background: var(--carbon);
  color: var(--ink-rev);
  padding-block: var(--s8) var(--s6);
  border-top: 2px solid var(--ink);
}
.footer a { color: var(--ink-rev-2); text-decoration: none; }
.footer a:hover { color: var(--ink-rev); text-decoration: underline; text-underline-offset: .2em; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s7) var(--s5);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--carbon-rule);
}
.footer h3,
.footer .foot-h {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-rev-2);
  margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.footer li { font-size: var(--t-sm); }

.footer__terms {
  padding-top: var(--s5);
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  font: 400 var(--t-xs)/1.6 var(--face-doc);
  letter-spacing: .06em;
  color: var(--ink-rev-2);
}

/* ---------------------------------------------------------- 16. UTILITIES */

.stack   { display: grid; gap: var(--s5); }
.stack-6 { display: grid; gap: var(--s6); }
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.pull {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  max-width: 22ch;
}

.tag {
  display: inline-block;
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor;
  padding: .45em .6em;
  color: var(--ink-2);
}

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-lg); margin: var(--s7) 0 var(--s4); }
.prose h3 { font-size: var(--t-md); margin: var(--s6) 0 var(--s3); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose > *:first-child { margin-top: 0; }

.note {
  font: 400 var(--t-sm)/1.55 var(--face-doc);
  color: var(--ink-3);
  border-left: 1px solid var(--rule-heavy);
  padding-left: var(--s4);
  max-width: 58ch;
}
.band--carbon .note { color: var(--ink-rev-2); border-left-color: var(--carbon-rule); }

/* --------------------------------------------- 17. THE ROUTING SLIP -------
   A small paper slip that arrives bottom-left once someone has read enough to
   be worth asking. Deliberately not a modal: it never blocks the page, never
   traps focus, and closes for good. The craft floor bans modals for tasks that
   need neither interruption nor protected focus, and this is one. */

.slip {
  position: fixed;
  left: var(--s5);
  bottom: var(--s5);
  z-index: 55;
  width: min(23rem, calc(100vw - var(--s5) * 2));
  background: var(--canary);
  border: 2px solid var(--ink);
  box-shadow: var(--lift-3);
  padding: var(--s5);
  transform: translateY(calc(100% + var(--s6))) rotate(-1deg);
  opacity: 0;
  visibility: hidden;
  transition: transform .55s var(--ease), opacity .4s var(--ease), visibility .55s;
}
.slip[data-in="true"] { transform: rotate(-1deg); opacity: 1; visibility: visible; }

.slip h2 {
  font-size: var(--t-md);
  margin: var(--s2) 0 var(--s3);
  letter-spacing: -.025em;
}
.slip p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s4); }
.slip .btn { width: 100%; justify-content: center; }

.slip__close {
  position: absolute;
  top: var(--s2); right: var(--s2);
  width: 2rem; height: 2rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2);
  font: 400 1.1rem/1 var(--face-doc);
}
.slip__close:hover { color: var(--stamp); }

@media (max-width: 560px) {
  .slip { left: var(--s4); right: var(--s4); bottom: var(--s4); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .slip { transition: none; }
}

/* ------------------------------------------ 18. THE CIRCULATION LIST ------
   Email capture at the end of a memo, in the document's own vocabulary:
   an internal circulation slip you add your name to. */

.circulate {
  margin-top: var(--s8);
  border: 2px solid var(--ink);
  background: var(--sheet);
  padding: var(--s6);
  box-shadow: var(--lift-1);
}
.circulate h2 { font-size: var(--t-md); margin: var(--s2) 0 var(--s3); }
.circulate p { font-size: var(--t-sm); color: var(--ink-2); }
.circulate form {
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: var(--s5);
}
.circulate .field { flex: 1 1 14rem; }
.circulate .btn { flex: none; }

/* ------------------------------------------------------------- 19. PHONE */

/* The browser used to build this could not render below 606px wide, so these
   rules are derived from the type and padding values rather than observed.
   They pull the document's generous desk-sized padding in so the ruled tables
   and the routing strip keep their columns on a 360–430px screen. Worth a
   real check on an actual phone. */
@media (max-width: 560px) {
  .band { padding-block: var(--s7); }
  .doc-head { margin-bottom: var(--s5); }

  /* ---- The hero, rebuilt for a thumb ----------------------------------
     Measured on a 390×844 phone: the headline alone ran five lines and the
     primary action landed around 890px, below the fold on every handset sold.
     Someone arriving from a link saw a slogan and nothing to do with it.
     This gets the offer, the proof line and the button into the first
     screen, and leaves the top of the invoice visible so there is a reason
     to keep scrolling. */

  .hero { padding-block: var(--s5) var(--s7); }
  .hero__grid { gap: var(--s6); }

  .hero__mega {
    font-size: clamp(1.95rem, 8.7vw, 2.6rem);
    line-height: .92;
    letter-spacing: -.035em;
    margin-bottom: var(--s4);
  }

  .hero__sub {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: var(--s5);
  }

  .hero__actions { gap: var(--s3); margin-bottom: var(--s4); }
  .hero__actions .btn { padding: 1em 1.2em; }

  /* Courier at 13px on a phone is a wall. Bring it up and darken it. */
  .hero .note,
  .note { font-size: .8125rem; line-height: 1.6; color: var(--ink-2); }

  /* The invoice is the whole idea. Give it room and let its top edge show. */
  .invoice__title { font-size: var(--t-md); }
  .invoice__head { padding: var(--s4); gap: var(--s3); }

  /* Section headings were competing with the body copy for width. */
  .doc-head h2 { font-size: 1.35rem; }
  .lede { font-size: 1.0625rem; }
  .pull { font-size: 1.35rem; }

  /* ---- Strikes that follow wrapped lines -------------------------------
     The animated bar is one absolutely-positioned rule, so on a narrow
     column it struck only the first line of a wrapping item — "Junior team,
     billed / senior" came out half-cancelled, which reads as a rendering
     fault rather than a deletion. Real line-through follows every line box.
     The drawn-bar animation is a desktop luxury; being legible is not. */

  .struck > span::after,
  .struck td > span:first-child::after { display: none; }

  /* Specificity raised deliberately: the lower-specificity form of this rule
     was correct but lost the cascade, and a strike that silently fails to
     render is worse than one that never animates. */
  .items tr.struck td > span:first-child,
  li.struck > span {
    text-decoration: line-through solid var(--stamp);
    text-decoration-thickness: 2px;
    text-underline-offset: 0;
    position: static;
  }

  /* ---- Greenbar at phone scale -----------------------------------------
     52px stripes on a 390px screen stop reading as printed banding and
     start reading as random empty blocks, especially in the tall gaps
     between content. Halve them so they read as paper texture again. */

  .greenbar {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--paper-bar) 0 1.55rem,
      transparent 1.55rem 3.1rem
    );
  }

  /* The receipts column ran over 1000px tall with big dead gaps. */
  .figures div { padding: var(--s2) 0; }
  .figures--big dd { font-size: 1.35rem; }
  .two-col { gap: var(--s6); }

  .items th, .items td { padding-inline: var(--s2); }
  .items th:first-child, .items td:first-child { padding-left: var(--s4); width: 2.6rem; }
  .items th:last-child,  .items td:last-child  { padding-right: var(--s4); }

  .invoice__head, .invoice__total { padding-inline: var(--s4); }
  .po__head, .po__body { padding-inline: var(--s4); }
  .file__tab, .file__body { padding: var(--s5); }

  .figures dd { font-size: var(--t-md); }
  .figures--big dd { font-size: var(--t-md); }
  .figures div { flex-wrap: wrap; gap: var(--s1); }

  .routing li { font-size: .58rem; letter-spacing: .05em; padding-inline: var(--s2); }

  .void-stamp { right: 4%; top: 30%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media print {
  .masthead, .nav, .btn, .footer { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
}