/* ==========================================================================
   Recount: style.css
   Plain CSS, mobile first. Tokens and principles live in DESIGN.md.
   Theme: the accountant's desk after hours. Deep ledger green, lit by paper.

    0. Tokens
    1. Base
    2. Utilities
    3. Shared type and section heads
    4. Buttons and links
    5. Header and navigation
    6. Hero
    7. Machine (R-9)
    8. Counter (odometer)
    9. Address slot and errors
   10. Scan progress
   11. Receipt
   12. How it works (patent drawings)
   13. What we count (slip and fee list)
   14. Why it adds up (tape)
   15. Safety
   16. FAQ
   17. Closing call to action
   18. Footer
   19. Pencil marks
   20. Motion: load sequence, reveals, keyframes
   21. Reduced motion
   ========================================================================== */


/* 0. Tokens
   ========================================================================== */

:root {
  /* Surfaces: three greens, never neutral black */
  --night: #0A1F18;
  --night-raised: #0E2820;
  --night-deep: #061510;
  --machine-top: #1A4C3C;
  --machine-bottom: #113A2D;

  /* Light comes from paper */
  --sheet: #FFFFFF;
  --paper: #EEF2EC;
  --paper-soft: #AEB9B2;
  --pine: #0D3A2D;            /* ink on paper */
  --ink-soft: #3E5C52;        /* secondary ink on paper */
  --rule: #CBDCD1;            /* rules on paper */
  --mint-wash: #E3EFE7;       /* row rules on paper */

  /* Marks */
  --pencil: #E0393E;          /* red pencil on paper */
  --pencil-ink: #B42A30;      /* small red text on paper */
  --pencil-bright: #FF5B4F;   /* red pencil on dark */
  --marker: #F4E04D;
  --marker-edge: #C4B12B;
  --mint: #A8DCC3;
  --led-on: #7BE3B0;

  /* Lines on dark */
  --line: rgba(238, 242, 236, .12);
  --line-strong: rgba(238, 242, 236, .26);

  /* Fee categories: readable on dark green and on white paper */
  --fee-base: #2E9C74;
  --fee-priority: var(--mint);
  --fee-tips: var(--marker);
  --fee-failed: var(--pencil-bright);
  --fee-rent: #F2A0B4;

  /* Type: Poppins only */
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.75rem, min(0.9rem + 6.2vw, 0.4rem + 11vh), 6.5rem);
  --fs-h2: clamp(2.125rem, 1.3rem + 3.3vw, 4.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: 16px;
  --section-pad: clamp(72px, 7vw + 44px, 144px);
  --container: 1200px;
  --header-h: 72px;

  /* Shape: paper is sharp, machines are soft, keys sit in between */
  --r-paper: 3px;
  --r-key: 14px;
  --r-window: 16px;
  --r-machine: clamp(24px, 3vw, 36px);
  --r-pill: 999px;

  /* Depth: objects on a desk, never glows */
  --shadow-paper: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)) drop-shadow(0 20px 26px rgba(0, 0, 0, .42));

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-press: 140ms;
  --d-ui: 240ms;
  --d-state: 420ms;
  --d-reveal: 700ms;

  /* Focus: marker on dark, red pencil on paper (set on paper objects) */
  --focus: var(--marker);
  --mark-red: var(--pencil-bright);
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1100px) {
  :root { --gutter: 40px; }
}


/* 1. Base
   ========================================================================== */

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

html {
  color-scheme: dark;
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

/* Zero specificity, so component classes can set their own padding */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding: 0;
}

svg {
  display: block;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--marker);
  color: var(--pine);
}

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

[hidden] {
  display: none !important;
}


/* 2. Utilities
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--marker);
  color: var(--pine);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--d-ui) var(--ease-out);
}

.skip-link:focus {
  top: 12px;
}

/* The six small digits, wherever an amount is printed on paper */
.red-digits {
  color: var(--pencil-ink);
}

/* Poppins has no tabular figures: script.js boxes digits that must line up.
   .65em fits the widest digit's ink ("4") at the weights we use. */
.tnum {
  display: inline-block;
  width: .65em;
  text-align: center;
}


/* 3. Shared type and section heads
   ========================================================================== */

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.section {
  padding-block: var(--section-pad);
}

/* Rotated paper and tearing receipts may poke past the edges; never let
   them widen the page. clip (unlike hidden) keeps sticky children working. */
main > section {
  overflow-x: clip;
}

.section-head {
  max-width: 780px;
}

.section-head h2 {
  font-size: var(--fs-h2);
}

.section-head__lead {
  max-width: 46ch;
  margin-top: var(--s-5);
  color: var(--paper-soft);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
}


/* 4. Buttons and links
   ========================================================================== */

/* Keys: the physical, primary action. They sink when pressed. */
.key {
  --key-face: var(--marker);
  --key-edge: var(--marker-edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-key);
  background: var(--key-face);
  color: var(--pine);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition:
    transform var(--d-press) var(--ease-out),
    box-shadow var(--d-press) var(--ease-out),
    opacity var(--d-ui);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.key:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.key:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition-duration: 60ms;
}

.key[disabled] {
  cursor: default;
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.key svg {
  width: 20px;
  height: 20px;
}

.key--small {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: var(--fs-small);
  box-shadow: 0 3px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.key--small:hover {
  box-shadow: 0 4px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.key--small:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--key-edge);
}

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

/* A finished action: the key stays down and turns mint */
.key.is-done {
  --key-face: var(--mint);
  --key-edge: #6FAE90;
}

/* Pills: secondary actions, outlined. Colors flip on paper. */
.pill {
  --pill-ink: var(--paper);
  --pill-hover-bg: var(--paper);
  --pill-hover-ink: var(--night);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--pill-ink);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--pill-ink);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color var(--d-ui), color var(--d-ui), border-color var(--d-ui);
}

.pill svg {
  width: 18px;
  height: 18px;
}

.pill:hover {
  border-color: var(--pill-hover-bg);
  background: var(--pill-hover-bg);
  color: var(--pill-hover-ink);
}

.text-button {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.ink-link {
  border-radius: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pencil-bright);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--d-ui);
}

.ink-link:hover {
  text-decoration-color: currentColor;
}


/* 5. Header and navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition:
    transform var(--d-state) var(--ease-out),
    background-color var(--d-ui),
    box-shadow var(--d-ui),
    opacity .6s var(--ease-out);
}

.site-header.is-scrolled,
.site-header.menu-open {
  background: rgba(10, 31, 24, .93);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: auto;
  color: var(--paper);
  text-decoration: none;
  border-radius: 10px;
}

.brand__mark {
  width: 34px;
  height: 34px;
  overflow: visible;
}

.brand__mark circle {
  fill: currentColor;
}

.brand__word {
  padding-bottom: 3px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
}

.site-nav a {
  position: relative;
  display: block;
  padding: 10px 0;
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
}

/* A red pencil underline that draws itself on hover */
.site-nav a::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6c20-3.2 41-2.2 61-1.4s27 .6 35-1.2' fill='none' stroke='%23FF5B4F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .38s var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

.site-header__cta {
  display: none;
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--paper);
}

.menu-toggle svg {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  transition: opacity var(--d-ui), transform var(--d-state) var(--ease-out);
}

.menu-toggle__close {
  opacity: 0;
  transform: rotate(-90deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  opacity: 0;
  transform: rotate(90deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  opacity: 1;
  transform: none;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gutter) 28px;
  background: var(--night);
  box-shadow: 0 1px 0 var(--line), 0 30px 40px -24px rgba(0, 0, 0, .7);
}

.mobile-menu li a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.mobile-menu__cta {
  width: 100%;
  margin-top: var(--s-5);
}

@media (min-width: 420px) {
  .site-header__cta {
    display: inline-flex;
  }
}

@media (min-width: 1000px) {
  .site-nav {
    display: block;
    margin-right: var(--s-4);
  }

  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
}


/* 6. Hero
   ========================================================================== */

.hero {
  /* Machine padding lives here so the receipt dock can line up with the slot */
  --machine-pad: 16px;
  --machine-pad-bottom: 20px;
  position: relative;
  isolation: isolate;
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(48px, 5vw, 80px);
}

/* Faint ledger ruling behind the hero, fading out at the edges */
.hero::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-h)) 0 0;
  z-index: -1;
  background: repeating-linear-gradient(180deg, transparent 0 39px, rgba(238, 242, 236, .045) 39px 40px);
  -webkit-mask: radial-gradient(ellipse 75% 65% at 50% 38%, #000 25%, transparent 78%);
  mask: radial-gradient(ellipse 75% 65% at 50% 38%, #000 25%, transparent 78%);
  pointer-events: none;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .94;
}

.hero__line {
  display: block;
}

.hero__line > span {
  display: inline-block;
}

/* The full stop is the logo: one lamport, circled in red pencil */
.full-stop {
  position: relative;
  display: inline-block;
}

/* Centered on the dot, which sits about .21em above the box bottom */
.full-stop__loop {
  position: absolute;
  left: 50%;
  bottom: -.06em;
  width: .56em;
  height: .56em;
  overflow: visible;
  transform: translateX(-50%) rotate(-10deg);
  pointer-events: none;
}

.full-stop__loop .pencil-path {
  stroke: var(--pencil-bright);
  stroke-width: 2.3;
}

.hero__lead {
  max-width: 40ch;
  margin-top: var(--s-5);
  color: var(--paper-soft);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

@media (min-width: 600px) {
  .hero {
    --machine-pad: 26px;
    --machine-pad-bottom: 24px;
  }
}

@media (min-width: 900px) {
  .hero {
    --machine-pad: 34px;
    --machine-pad-bottom: 28px;
  }
}


/* 7. Machine (R-9)
   ========================================================================== */

.machine {
  --led: #3D7A62;
  --led-glow: transparent;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 16px var(--machine-pad) var(--machine-pad-bottom);
  border-radius: var(--r-machine);
  background: linear-gradient(180deg, var(--machine-top) 0%, #154335 30%, var(--machine-bottom) 100%);
  color: var(--paper);
  text-align: left;
  scroll-margin-top: calc(var(--header-h) + 16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 -2px 0 rgba(0, 0, 0, .3),
    0 12px 0 var(--night-deep),
    0 13px 0 rgba(255, 255, 255, .04),
    0 50px 80px -24px rgba(0, 0, 0, .75);
}

.machine__plate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--paper-soft);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.2;
}

.machine__name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.machine__mark {
  width: 20px;
  height: 20px;
  color: var(--paper);
}

.machine__model {
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: .6875rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.machine__spec {
  display: none;
  margin-left: auto;
  text-align: right;
}

.machine__led {
  margin-left: auto;
}

@media (min-width: 480px) {
  .machine__spec {
    display: block;
  }

  .machine__led {
    margin-left: 0;
  }
}

.machine__led {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .3), 0 0 10px 1px var(--led-glow);
  transition: background-color var(--d-ui), box-shadow var(--d-ui);
}

.machine.is-valid,
.machine[data-state="done"] {
  --led: var(--led-on);
  --led-glow: rgba(123, 227, 176, .7);
}

.machine.is-error {
  --led: var(--pencil-bright);
  --led-glow: rgba(255, 91, 79, .7);
}

.machine.is-typing .machine__led {
  background: var(--marker);
  transition-duration: 0s;
}

.machine[data-state="scanning"] {
  --led: var(--marker);
  --led-glow: rgba(244, 224, 77, .75);
}

.machine[data-state="scanning"] .machine__led {
  animation: led-blink .9s steps(2, jump-none) infinite;
}

.machine__status {
  min-height: 1.5em;
  margin-top: var(--s-3);
  color: var(--paper-soft);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* The form and the progress panel share one grid cell, so the machine
   never jumps in height when a scan starts. */
.machine__body {
  display: grid;
  margin-top: var(--s-4);
}

.machine__form,
.progress {
  grid-area: 1 / 1;
  min-width: 0;
}

.machine__form {
  transition:
    opacity var(--d-state) var(--ease-out) .12s,
    transform var(--d-state) var(--ease-out) .12s,
    visibility 0s;
}

.machine[data-state="scanning"] .machine__form {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity .28s var(--ease-out),
    transform .28s var(--ease-out),
    visibility 0s linear .28s;
}

.machine__label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 500;
}

.machine__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  font-size: .875rem;
  line-height: 1.45;
}

.machine__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--paper-soft);
}

.machine__hint svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--mint);
}

.machine__noscript {
  margin-top: var(--s-3);
  color: var(--marker);
  font-weight: 600;
}

/* The printer slot the receipt comes out of */
.machine__slot {
  width: min(100% - 24px, 528px);
  height: 10px;
  margin: 22px auto 0;
  border-radius: var(--r-pill);
  background: #020a07;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .1);
}

@media (min-width: 600px) {
  .machine {
    padding-top: 20px;
  }
}

@media (min-width: 760px) {
  .machine__foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-5);
  }
}

@media (min-width: 900px) {
  .machine {
    padding-top: var(--s-5);
  }
}


/* 8. Counter (odometer)
   Wheel size comes from the counter's own width, so it always fits.
   --units is set by script.js from the number of wheels.
   ========================================================================== */

.counter {
  --units: 13.2;
  --w: 21px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: var(--r-window);
  background: var(--night-deep);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .6),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 1px 0 rgba(255, 255, 255, .08);
  container-type: inline-size;
}

/* A sliver of glass reflection over the window */
.counter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(172deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

.counter__fallback {
  color: var(--paper);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.counter__digits {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * .3);
}

.counter__group {
  display: flex;
  gap: calc(var(--w) * .08);
}

.wheel {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.42);
  overflow: hidden;
  border-radius: calc(var(--w) * .16);
  background: linear-gradient(180deg, #AFBDB5 0%, #F1F5F2 20%, #FFFFFF 50%, #F1F5F2 80%, #AFBDB5 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

/* Cylinder shading over the digits */
.wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 34, 25, .32) 0%, rgba(7, 34, 25, 0) 28%, rgba(7, 34, 25, 0) 72%, rgba(7, 34, 25, .32) 100%);
  pointer-events: none;
}

.wheel__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.wheel__strip > span {
  display: block;
  height: calc(var(--w) * 1.42);
  color: var(--pine);
  font-size: calc(var(--w) * 1.06);
  font-weight: 600;
  line-height: calc(var(--w) * 1.42);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.counter__group--red .wheel__strip > span {
  color: var(--pencil);
}

.wheel.is-blur .wheel__strip {
  filter: blur(calc(var(--w) * .045));
}

.counter__point {
  flex: none;
  align-self: flex-end;
  width: calc(var(--w) * .22);
  height: calc(var(--w) * .22);
  margin-bottom: calc(var(--w) * .2);
  border-radius: 50%;
  background: var(--paper);
}

.counter__unit {
  align-self: flex-end;
  margin-left: calc(var(--w) * .34);
  margin-bottom: calc(var(--w) * .1);
  color: var(--paper-soft);
  font-size: calc(var(--w) * .44);
  font-weight: 600;
  line-height: 1;
}

/* A small mechanical "clunk" when the total locks in */
.counter.is-locked .wheel {
  animation: wheel-lock .5s var(--ease-spring) calc(var(--i, 0) * 28ms) both;
}

@supports (width: 1cqi) {
  .counter__digits,
  .counter__unit {
    --w: min(54px, 100cqi / var(--units));
  }
}

@media (min-width: 600px) {
  .counter {
    padding: 12px;
  }
}


/* 9. Address slot and errors
   ========================================================================== */

.slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slot__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.slot__input {
  width: 100%;
  height: 58px;
  padding: 0 48px 0 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-key);
  background: var(--night-deep);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 500;
  text-overflow: ellipsis;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  transition: border-color var(--d-ui), box-shadow var(--d-ui);
}

.slot__input::placeholder {
  color: #8FA39A;
  font-weight: 400;
  opacity: 1;
}

.slot__input:hover {
  border-color: rgba(238, 242, 236, .4);
}

.slot__input:focus {
  outline: none;
  border-color: var(--marker);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 0 0 4px rgba(244, 224, 77, .22);
}

.slot__input[aria-invalid="true"] {
  border-color: var(--pencil-bright);
}

.slot__input[aria-invalid="true"]:focus {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 91, 79, .24);
}

.slot__ok {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  padding: 3px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--pine);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--d-ui), transform var(--d-state) var(--ease-spring);
  pointer-events: none;
}

.slot.is-valid .slot__ok {
  opacity: 1;
  transform: none;
}

.slot__key {
  flex: none;
}

.slot.is-shaking {
  animation: shake .42s var(--ease-out);
}

/* Errors are printed on a slip of paper, never on the machine itself */
.field-error:not(:empty) {
  --focus: var(--pencil);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--sheet);
  color: var(--pine);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .7);
  animation: drop-in .32s var(--ease-out);
}

.field-error:not(:empty)::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--sheet);
  transform: rotate(45deg);
}

.field-error svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--pencil-ink);
}

@media (min-width: 600px) {
  .slot {
    flex-direction: row;
  }
}


/* 10. Scan progress
   ========================================================================== */

.progress {
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity .28s var(--ease-out),
    transform .28s var(--ease-out),
    visibility 0s linear .28s;
}

.machine[data-state="scanning"] .progress {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--d-state) var(--ease-out) .12s,
    transform var(--d-state) var(--ease-out) .12s,
    visibility 0s;
}

.progress__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.progress__seg {
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(238, 242, 236, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

.progress__seg > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--marker);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .18s linear;
}

.progress__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin-top: var(--s-4);
}

.progress__count {
  width: 100%;
  color: var(--paper-soft);
  font-size: var(--fs-micro);
}

.progress__label {
  color: var(--paper);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.progress__detail {
  color: var(--mint);
  font-size: var(--fs-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.progress__cancel {
  margin-top: 14px;
  color: var(--paper-soft);
  font-size: var(--fs-small);
}


/* 11. Receipt
   It prints out of the machine's slot: the dock tucks under the machine,
   the clip grows, and its zigzag edge leads the way.
   ========================================================================== */

.receipt-dock {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 760px;
}

.receipt-out {
  width: min(100% - 40px, 500px);
  /* Start at the middle of the printer slot, so the paper comes out of it */
  margin-top: calc(-1 * (var(--machine-pad-bottom) + 5px));
  filter: var(--shadow-paper);
  transform-origin: 100% 0;
}

.receipt-out.is-tearing {
  animation: tear .55s var(--ease-in-out) forwards;
}

.receipt-clip {
  --zz: 9px;
  overflow: hidden;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zz) * 2) var(--zz) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zz) * 2) var(--zz) repeat-x;
}

.receipt {
  --focus: var(--pencil);
  position: relative;
  padding: 30px 20px calc(9px + 24px);
  background: var(--sheet);
  color: var(--pine);
  font-size: var(--fs-small);
  line-height: 1.45;
  text-align: left;
}

.receipt:focus {
  outline: none;
}

.receipt .pill {
  --pill-ink: var(--pine);
  --pill-hover-bg: var(--pine);
  --pill-hover-ink: var(--sheet);
}

.receipt__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--s-4);
  border-bottom: 1.5px dashed var(--rule);
}

.receipt__mark {
  --mark-red: var(--pencil);
  width: 28px;
  height: 28px;
  color: var(--pine);
}

.receipt__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.receipt__brand {
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 500;
}

.receipt__meta {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1.5px dashed var(--rule);
  font-size: var(--fs-micro);
}

.receipt__meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.receipt__meta dt {
  color: var(--ink-soft);
}

.receipt__meta dd {
  font-weight: 600;
  text-align: right;
  text-wrap: balance;
}

.receipt__found {
  position: relative;
}

.receipt__bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin: 20px 0 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--mint-wash);
  box-shadow: inset 0 0 0 1px rgba(13, 58, 45, .12);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out) .3s;
}

.receipt.is-printed .receipt__bar {
  clip-path: inset(0 0 0 0);
}

.receipt__bar span {
  flex: var(--share) 0 0;
  min-width: 3px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(13, 58, 45, .14);
}

.receipt__table {
  width: 100%;
  border-collapse: collapse;
}

.receipt__row th,
.receipt__row td {
  padding: 11px 0;
  border-bottom: 1px solid var(--mint-wash);
  vertical-align: top;
}

/* Hanging indent: wrapped labels stay aligned past the swatch */
.receipt__row th {
  position: relative;
  padding-right: 12px;
  padding-left: 18px;
  font-weight: 600;
  text-align: left;
}

.receipt__swatch {
  position: absolute;
  top: calc(11px + .36em);
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(13, 58, 45, .22);
}

.receipt__sub {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 400;
}

.receipt__amount {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.receipt__total {
  padding: 18px 0 16px;
  border-top: 1.5px solid var(--pine);
  text-align: center;
}

.receipt__total-label {
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 500;
}

.receipt__total-sol {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-2);
  margin-top: 6px;
}

.receipt__total-figure {
  position: relative;
  display: inline-block;
  padding: 0 4px 4px;
  border-bottom: 5px double var(--pine);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.receipt__total-figure .red-digits {
  color: var(--pencil);
}

.receipt__unit {
  font-size: .45em;
  font-weight: 600;
  letter-spacing: 0;
}

.receipt__lamports {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

.receipt__tx {
  margin-top: var(--s-1);
  padding-top: var(--s-4);
  border-top: 1.5px dashed var(--rule);
}

.receipt__subtitle {
  margin-bottom: var(--s-1);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.receipt__tx-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--mint-wash);
}

.receipt__tx-kind {
  font-weight: 600;
}

.receipt__tx-flag {
  margin-left: 8px;
  color: var(--pencil-ink);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.receipt__tx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  grid-column: 1;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}

.receipt__tx-meta a {
  color: inherit;
  text-underline-offset: 3px;
}

.receipt__tx-amount {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.receipt__actions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.receipt__secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.receipt__note:not(:empty) {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mint-wash);
  font-size: var(--fs-micro);
  text-align: center;
}

.receipt__foot {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  text-align: center;
}

/* The claim stamp: red pencil ink, thumped on */
.receipt__stamp {
  position: absolute;
  top: 120px;
  left: 50%;
  padding: 4px 18px 6px;
  border: 3px solid var(--pencil);
  border-radius: 12px;
  color: var(--pencil);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-11deg) scale(1.7);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.receipt.is-claimed .receipt__stamp {
  animation: stamp .5s var(--ease-out) forwards;
}

.receipt__empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: 24px 0 4px;
  text-align: center;
}

/* "Not eligible": the same red pencil stamp as the slip's "Failed" */
.receipt__verdict {
  padding: 3px 12px 4px;
  border: 2px solid var(--pencil-ink);
  border-radius: 8px;
  color: var(--pencil-ink);
  font-size: .875rem;
  font-weight: 700;
  transform: rotate(-6deg);
}

.receipt__empty-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.receipt__empty p:not(.receipt__empty-title) {
  color: var(--ink-soft);
}

@media (min-width: 600px) {
  .receipt {
    padding-inline: 28px;
  }
}


/* 12. How it works (patent drawings, printed in negative)
   ========================================================================== */

.how {
  position: relative;
  isolation: isolate;
}

/* Drafting grid behind the drawings */
.how::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(238, 242, 236, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(238, 242, 236, .035) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}

.how .section-head {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.steps {
  display: grid;
  gap: var(--s-8);
}

.step {
  display: flex;
  flex-direction: column;
}

.fig {
  --fig-bg: var(--night);
  --fig-line: #CBD8D0;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-bottom: 28px;
  overflow: visible;
  fill: none;
  stroke: var(--fig-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig text {
  fill: var(--fig-line);
  stroke: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
}

.fig .fill-sheet { fill: var(--sheet); }
.fig .fill-bg { fill: var(--fig-bg); }
.fig .fill-ink { fill: var(--fig-line); stroke: none; }
.fig .fill-marker { fill: var(--marker); stroke: var(--marker); }
.fig .ink { stroke: var(--pine); }
.fig .ink-text { fill: var(--pine); }

.fig__callout text {
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.fig__digits text {
  fill: var(--pine);
  font-size: 22px;
  text-anchor: middle;
}

.fig .fig__digits--red text {
  fill: var(--pencil);
}

.fig .fig__unit {
  fill: var(--paper-soft);
  font-size: 12px;
}

.fig__ticks {
  stroke-width: 1.6;
}

.fig__ticks--failed {
  stroke: var(--pencil);
  stroke-width: 2.6;
}

.fig__thin {
  stroke-width: 1.6;
  opacity: .5;
}

.fig__dash {
  stroke-width: 1.6;
  stroke-dasharray: 3 5;
}

.fig__arrow--path {
  stroke-dasharray: 5 6;
}

.fig__loop {
  stroke-width: 2.6;
}

.fig__addr text {
  font-size: 13px;
}

.step__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: 0;
}

.step p {
  max-width: 38ch;
  margin-top: var(--s-3);
  padding-left: 44px;
  color: var(--paper-soft);
}

/* Tablet: each step becomes a row, drawing on the left, text centered beside it */
@media (min-width: 600px) and (max-width: 899px) {
  .steps {
    gap: var(--s-7);
  }

  .step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      "fig ."
      "fig title"
      "fig text"
      "fig .";
    column-gap: 40px;
  }

  .step .fig {
    grid-area: fig;
    margin-bottom: 0;
  }

  .step__title { grid-area: title; }
  .step p { grid-area: text; }
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px);
  }
}


/* 13. What we count (slip and fee list)
   ========================================================================== */

.what {
  background: var(--night-raised);
}

.what__grid {
  display: grid;
  gap: var(--s-7);
}

.slip-stage {
  display: flex;
  justify-content: center;
  padding: 12px 6px;
  filter: var(--shadow-paper);
}

.slip {
  --notch: 7px;
  --focus: var(--pencil);
  position: relative;
  width: min(100%, 440px);
  padding: 28px 22px 24px;
  border-radius: var(--r-paper);
  background: var(--sheet);
  color: var(--pine);
  font-size: var(--fs-small);
  line-height: 1.4;
  transform: rotate(-1.5deg);
  /* Torn off a pad: a row of punched notches along the top */
  -webkit-mask:
    radial-gradient(circle at 50% 0, #0000 calc(var(--notch) - .5px), #000 var(--notch)) top / calc(var(--notch) * 3) 100% repeat-x;
  mask:
    radial-gradient(circle at 50% 0, #0000 calc(var(--notch) - .5px), #000 var(--notch)) top / calc(var(--notch) * 3) 100% repeat-x;
}

.slip__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.slip__kind {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.slip__when {
  margin-top: var(--s-1);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}

.slip__stamp {
  display: grid;
  flex: none;
}

.slip__stamp > span {
  grid-area: 1 / 1;
  justify-self: end;
  padding: 3px 12px 4px;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: opacity .2s var(--ease-out), transform .38s var(--ease-spring);
}

.slip__stamp-ok {
  color: #1B6E52;
  transform: rotate(6deg);
}

.slip__stamp-failed {
  color: var(--pencil-ink);
  opacity: 0;
  transform: rotate(-6deg) scale(1.6);
}

.slip[data-active="failed"] .slip__stamp-ok {
  opacity: 0;
  transform: rotate(6deg) scale(.7);
}

.slip[data-active="failed"] .slip__stamp-failed {
  opacity: 1;
  transform: rotate(-6deg);
}

.slip__sig {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}

.slip__sig span {
  color: var(--pine);
  font-weight: 600;
}

.slip__cols {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-bottom: var(--s-2);
  border-bottom: 1.5px solid var(--pine);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.slip__line {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
  transition: color var(--d-ui);
}

/* Highlighter stroke */
.slip__line::before {
  content: "";
  position: absolute;
  inset: 5px -8px;
  z-index: -1;
  border-radius: 3px 9px 4px 7px;
  background: var(--marker);
  transform: scaleX(0) skewX(-8deg);
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
}

/* Red pencil strike for fees a failed transaction never charged:
   through the middle of the first row (label and amount) */
.slip__line::after {
  content: "";
  position: absolute;
  top: calc(12px + .7em);
  left: -4px;
  right: -4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--pencil);
  transform: scaleX(0) rotate(-1.2deg);
  transform-origin: left center;
  transition: transform .4s var(--ease-out);
}

.slip__label {
  font-weight: 600;
}

.slip__label small {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 400;
}

.slip__amount {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.slip[data-active="base"] [data-line="base"]::before,
.slip[data-active="priority"] [data-line="priority"]::before,
.slip[data-active="tips"] [data-line="tips"]::before,
.slip[data-active="rent"] [data-line="rent"]::before,
.slip[data-active="failed"] [data-line="base"]::before,
.slip[data-active="failed"] [data-line="priority"]::before {
  transform: scaleX(1) skewX(-8deg);
}

.slip[data-active="failed"] [data-line="tips"],
.slip[data-active="failed"] [data-line="rent"] {
  color: var(--ink-soft);
}

.slip[data-active="failed"] [data-line="tips"]::after,
.slip[data-active="failed"] [data-line="rent"]::after {
  transform: scaleX(1) rotate(-1.2deg);
}

.slip__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-1);
  padding-top: 14px;
  border-top: 1.5px solid var(--pine);
  font-weight: 700;
}

.slip__total-amount {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.slip__sol {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  text-align: right;
}

.slip__total-failed,
.slip[data-active="failed"] .slip__total-ok {
  display: none;
}

.slip[data-active="failed"] .slip__total-failed {
  display: inline;
}

.fee-list {
  display: grid;
  align-content: start;
}

.fee {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.fee:last-child {
  border-bottom: 1px solid var(--line);
}

.fee__name button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--paper);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--d-ui);
}

.fee__swatch {
  flex: none;
  width: 26px;
  height: 13px;
  border-radius: 3px 7px 4px 6px;
  background: var(--c);
  transform: skewX(-12deg);
  transition: transform var(--d-state) var(--ease-spring);
}

.fee p {
  max-width: 46ch;
  margin-top: 6px;
  padding-left: 40px;
  color: var(--paper-soft);
}

.fee[data-fee="base"] { --c: var(--fee-base); }
.fee[data-fee="priority"] { --c: var(--fee-priority); }
.fee[data-fee="tips"] { --c: var(--fee-tips); }
.fee[data-fee="failed"] { --c: var(--fee-failed); }
.fee[data-fee="rent"] { --c: var(--fee-rent); }

.fee:hover .fee__swatch,
.fee.is-active .fee__swatch {
  transform: skewX(-12deg) scale(1.18);
}

.fee.is-active .fee__name button {
  text-decoration-color: var(--pencil-bright);
}

@media (min-width: 1000px) {
  .what__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head slip"
      "list slip";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 40px;
  }

  .what__head { grid-area: head; }
  .fee-list { grid-area: list; }

  .slip-stage {
    grid-area: slip;
    position: sticky;
    top: calc(var(--header-h) + 40px);
    align-self: start;
  }
}


/* 14. Why it adds up (tape)
   ========================================================================== */

.adds__inner {
  display: grid;
  justify-items: center;
  gap: clamp(40px, 6vw, 72px);
}

.adds .section-head {
  text-align: center;
}

.adds .section-head__lead {
  margin-inline: auto;
  text-wrap: balance;
}

.tape {
  --tape-num: clamp(1.25rem, 0.95rem + 1.2vw, 1.875rem);
  --tape-total: clamp(1.5rem, 1.05rem + 2vw, 2.5rem);
  width: min(100%, 760px);
}

.tape__paper {
  filter: var(--shadow-paper);
}

.tape__lines {
  --zz: 10px;
  padding: calc(var(--zz) + 22px) clamp(16px, 4vw, 48px) calc(var(--zz) + 26px);
  background: var(--sheet);
  color: var(--pine);
  -webkit-mask:
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / calc(var(--zz) * 2) var(--zz) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--zz) * 2) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zz) * 2) var(--zz) repeat-x;
  mask:
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / calc(var(--zz) * 2) var(--zz) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--zz) * 2) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zz) * 2) var(--zz) repeat-x;
}

.tape__line {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr);
  grid-template-areas:
    "op num"
    ". note";
  align-items: baseline;
  column-gap: var(--s-2);
  padding: 7px 0;
}

.tape__op {
  grid-area: op;
  color: var(--ink-soft);
  font-size: calc(var(--tape-num) * .8);
  font-weight: 600;
  text-align: center;
}

.tape__num {
  grid-area: num;
  font-size: var(--tape-num);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tape .red-digits {
  color: var(--pencil);
}

.tape__note {
  grid-area: note;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  line-height: 1.4;
  text-align: right;
}

.tape__line--sub {
  margin-bottom: 6px;
  padding-bottom: var(--s-4);
  border-bottom: 1.5px dashed var(--rule);
}

.tape__line--total {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 2px solid var(--pine);
}

.tape__line--total .tape__num {
  font-size: var(--tape-total);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.tape__line--total .tape__note {
  color: var(--pine);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Accounting convention: totals are double-ruled */
.tape__total {
  position: relative;
  display: inline-block;
  padding: 0 4px 4px;
  border-bottom: 5px double var(--pine);
}

.tape__caption {
  margin-top: 28px;
  color: var(--paper-soft);
  font-size: var(--fs-small);
  text-align: center;
}

@media (min-width: 700px) {
  .tape__line {
    grid-template-columns: 1.4em calc(var(--tape-total) * 7.4) minmax(0, 1fr);
    grid-template-areas: "op num note";
    column-gap: clamp(14px, 2.4vw, 32px);
  }

  .tape__note {
    font-size: .875rem;
    text-align: left;
  }
}


/* 15. Safety
   ========================================================================== */

.trust {
  background: var(--night-deep);
}

.ask {
  display: grid;
  gap: 56px;
  margin-top: clamp(48px, 6vw, 88px);
}

.ask__title {
  margin-bottom: 20px;
  color: var(--mint);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ticket {
  --notch: 11px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: 380px;
  padding: 20px 26px;
  border-radius: var(--r-paper);
  background: var(--sheet);
  color: var(--pine);
  transform: rotate(-1.5deg);
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
}

.ticket__check {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--pine);
}

.ticket__what {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ticket__addr {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 500;
}

.ask__note {
  max-width: 40ch;
  margin-top: 20px;
  color: var(--paper-soft);
  font-size: var(--fs-small);
}

.never li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.never li:first-child {
  border-top: 1px solid var(--line);
}

/* One line each, so the pencil strike always runs through the words */
.never__item {
  position: relative;
  display: inline-block;
  font-size: clamp(1.125rem, 0.9rem + 1.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
  white-space: nowrap;
}

.strike {
  position: absolute;
  top: 54%;
  left: -3%;
  width: 106%;
  height: .42em;
  overflow: visible;
  transform: translateY(-50%);
  pointer-events: none;
}

.strike .pencil-path {
  stroke: var(--pencil-bright);
  stroke-width: 3.4;
}

.math {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line);
}

.math__title {
  color: var(--mint);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Set like an adding machine: operators right-aligned, one term per line */
.formula {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  gap: 14px 16px;
  font-size: clamp(1.25rem, 0.95rem + 1.3vw, 1.9375rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.formula__op {
  justify-self: end;
  color: var(--paper-soft);
}

/* Annotated equation: each term gets a bracket and a label */
.formula__term {
  position: relative;
  justify-self: start;
  padding-bottom: 30px;
}

.formula__term::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  padding-top: 6px;
  border: 2px solid var(--mint);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: var(--mint);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.math__text {
  max-width: 58ch;
  color: var(--paper-soft);
}

@media (min-width: 900px) {
  .ask {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 7vw, 120px);
  }

  .math {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 7vw, 120px);
  }

  .math__title {
    grid-row: span 2;
  }
}


/* 16. FAQ
   ========================================================================== */

.faq__grid {
  display: grid;
  gap: 40px;
}

.accordion {
  border-top: 2px solid var(--paper);
}

.qa {
  border-bottom: 1px solid var(--line);
}

.qa__q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: 22px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--paper);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  text-align: left;
}

.qa__icon {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition:
    transform var(--d-state) var(--ease-out),
    background-color var(--d-ui),
    border-color var(--d-ui),
    color var(--d-ui);
}

.qa__q button:hover .qa__icon {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--night);
}

.qa__q button[aria-expanded="true"] .qa__icon {
  border-color: var(--marker);
  background: var(--marker);
  color: var(--pine);
  transform: rotate(45deg);
}

.qa__a {
  display: grid;
  grid-template-rows: 1fr;
}

.qa__inner {
  overflow: hidden;
}

.qa__inner p {
  max-width: 62ch;
  padding: 0 56px 24px 0;
  color: var(--paper-soft);
}

.js .qa__a {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--d-state) var(--ease-out), visibility 0s linear var(--d-state);
}

.js .qa.is-open .qa__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--d-state) var(--ease-out), visibility 0s;
}

@media (min-width: 1000px) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(48px, 7vw, 120px);
  }

  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    align-self: start;
  }
}


/* 17. Closing call to action
   ========================================================================== */

.final {
  padding-block: var(--section-pad) clamp(64px, 8vw, 104px);
  background: var(--night-raised);
}

.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final__title {
  max-width: 15ch;
  font-size: var(--fs-h2);
}

.counter--final {
  width: min(100%, 680px);
  margin-top: clamp(32px, 5vw, 56px);
}

.final__lead {
  margin-top: 28px;
  color: var(--paper-soft);
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: balance;
}

.final__form {
  width: min(100%, 640px);
  margin-top: 28px;
  text-align: left;
}

.final__hint {
  margin-top: 14px;
  color: var(--paper-soft);
  font-size: .875rem;
  text-align: center;
  text-wrap: balance;
}


/* 18. Footer
   The footer is the stub: a perforated line you could tear along.
   ========================================================================== */

.site-footer {
  padding-bottom: var(--s-6);
  background: var(--night-deep);
  overflow-x: clip; /* the perforation notches bite the page edges */
}

.perforation {
  position: relative;
  height: 2px;
  margin-bottom: 56px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
}

.perforation::before,
.perforation::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--night-raised);
}

.perforation::before { left: -13px; }
.perforation::after { right: -13px; }

.site-footer__grid {
  display: grid;
  gap: 36px;
}

.site-footer__brand p {
  max-width: 28ch;
  margin-top: 14px;
  color: var(--paper-soft);
}

.site-footer__nav ul {
  display: grid;
  gap: 6px;
}

.site-footer__nav a {
  display: inline-block;
  padding: 4px 0;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--d-ui);
}

.site-footer__nav a:hover {
  text-decoration-color: var(--pencil-bright);
}

.site-footer__safety {
  max-width: 38ch;
  padding-left: 16px;
  border-left: 3px solid var(--marker);
  color: var(--paper-soft);
  font-size: var(--fs-small);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 56px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--paper-soft);
  font-size: var(--fs-micro);
}

.site-footer__base .ink-link {
  color: var(--paper);
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--s-7);
  }

  .site-footer__safety {
    justify-self: end;
  }
}


/* 19. Pencil marks
   Every hand-drawn gesture is a red pencil path (pathLength="1"),
   drawn by animating its dash offset.
   ========================================================================== */

.pencil-path {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand__mark .pencil-path {
  stroke: var(--pencil-bright);
}

.pencil-circle {
  position: absolute;
  top: -26%;
  left: -12%;
  width: 124%;
  height: 152%;
  overflow: visible;
  pointer-events: none;
}

.pencil-circle .pencil-path {
  stroke-width: 3.4;
}


/* 20. Motion: load sequence, reveals, keyframes
   Hidden states only apply once JS is running (.js on <html>),
   and reveal states only once the observer is set up (.has-reveal).
   ========================================================================== */

/* Opening sequence */
.js .site-header {
  opacity: 0;
}

.js .hero__line {
  overflow: hidden;
  padding: 0 .06em .14em;
  margin: 0 -.06em -.14em;
}

.js .hero__line > span {
  transform: translateY(108%);
}

.js .hero__lead {
  opacity: 0;
  transform: translateY(10px);
}

.js .machine {
  opacity: 0;
  transform: translateY(32px) scale(.985);
}

.js .full-stop__loop .pencil-path,
.js .site-header .brand__mark .pencil-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.is-loaded .site-header {
  opacity: 1;
}

.is-loaded .hero__line > span {
  transform: none;
  transition: transform 1s var(--ease-out);
}

.is-loaded .hero__line:nth-child(2) > span {
  transition-delay: .09s;
}

.hero__title.is-settled .hero__line {
  overflow: visible;
}

.is-loaded .hero__lead {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out) .3s, transform .8s var(--ease-out) .3s;
}

.is-loaded .machine {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out) .42s, transform 1.1s var(--ease-out) .42s;
}

.is-loaded .full-stop__loop .pencil-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .75s var(--ease-in-out) 1.05s;
}

.is-loaded .site-header .brand__mark .pencil-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s var(--ease-in-out) .3s;
}

/* Hovering the logo circles the lamport again */
.site-header .brand:hover .brand__mark .pencil-path {
  animation: redraw .7s var(--ease-in-out);
}

/* Reveals: each one performs its section's verb */
.has-reveal .section-head[data-reveal],
.has-reveal .math[data-reveal],
.has-reveal .final__title[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
}

.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* How it works: the strip slides in, the tape feeds, the receipt prints */
.has-reveal .fig__strip { transform: translateX(-52px); }
.has-reveal .fig__motion { opacity: 0; }
.has-reveal .fig__roll { transform: translateY(92px); }
.has-reveal .fig__ticks { transform: translateX(0); }
.has-reveal .fig__receipt { transform: translateY(-122px); }
.has-reveal .fig__loop { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-reveal .fig__arrow,
.has-reveal .fig__addr { opacity: 0; }
.has-reveal .step p,
.has-reveal .step__title { opacity: 0; transform: translateY(12px); }

.step.is-in .fig__strip {
  transform: none;
  transition: transform 1.1s var(--ease-out) calc(var(--delay, 0s) + .25s);
}

.step.is-in .fig__motion {
  animation: motion-lines 1.2s var(--ease-out) calc(var(--delay, 0s) + .2s) both;
}

.step.is-in .fig__roll {
  transform: none;
  transition: transform 1.6s var(--ease-out) calc(var(--delay, 0s) + .3s);
}

.step.is-in .fig__ticks {
  transform: translateX(-120px);
  transition: transform 2.4s cubic-bezier(.3, .15, .25, 1) calc(var(--delay, 0s) + .2s);
}

.step.is-in .fig__receipt {
  transform: none;
  transition: transform 1.3s var(--ease-out) calc(var(--delay, 0s) + .25s);
}

.step.is-in .fig__loop {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s var(--ease-in-out) calc(var(--delay, 0s) + 1.35s);
}

.step.is-in .fig__arrow,
.step.is-in .fig__addr {
  opacity: 1;
  transition: opacity .6s var(--ease-out) calc(var(--delay, 0s) + 1.8s);
}

.step.is-in p,
.step.is-in .step__title {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out) calc(var(--delay, 0s) + .15s), transform .7s var(--ease-out) calc(var(--delay, 0s) + .15s);
}

@media (min-width: 900px) {
  .step:nth-child(2) { --delay: .2s; }
  .step:nth-child(3) { --delay: .4s; }
}

/* What we count: the slip lands on the desk */
.has-reveal .slip-stage .slip {
  opacity: 0;
  transform: translateY(-24px) rotate(-6deg);
}

.has-reveal .slip-stage.is-in .slip {
  opacity: 1;
  transform: rotate(-1.5deg);
  transition: opacity .5s var(--ease-out), transform .9s var(--ease-spring);
}

/* Why it adds up: the tape prints line by line, then the total is circled */
.has-reveal .tape__line {
  opacity: 0;
  transform: translateY(-8px);
}

.has-reveal .tape.is-in .tape__line {
  opacity: 1;
  transform: none;
  transition:
    opacity .4s var(--ease-out) calc(var(--i) * 150ms + 150ms),
    transform .4s var(--ease-out) calc(var(--i) * 150ms + 150ms);
}

.js .tape .pencil-path,
.js .receipt .pencil-circle .pencil-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.tape.is-in .pencil-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--ease-in-out) 1.45s;
}

.receipt.is-printed .pencil-circle .pencil-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--ease-in-out) .5s;
}

/* Safety: the red pencil strikes each thing we'll never ask for */
.has-reveal .never .pencil-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.has-reveal .ask.is-in .never .pencil-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s var(--ease-in-out) calc(var(--i) * 220ms + 400ms);
}

.has-reveal .ticket {
  opacity: 0;
  transform: translateX(-24px) rotate(-4deg);
}

.has-reveal .ask.is-in .ticket {
  opacity: 1;
  transform: rotate(-1.5deg);
  transition: opacity .5s var(--ease-out) .1s, transform .9s var(--ease-spring) .1s;
}

/* Keyframes */
@keyframes led-blink {
  0% { opacity: 1; }
  100% { opacity: .35; }
}

@keyframes wheel-lock {
  0% { transform: none; }
  35% { transform: translateY(2px) scaleY(.97); }
  100% { transform: none; }
}

@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes tear {
  0% { transform: none; opacity: 1; }
  25% { transform: rotate(-2deg) translateY(3px); opacity: 1; }
  100% { transform: rotate(-10deg) translate(-36px, 140px); opacity: 0; }
}

@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(1.7); }
  55% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(.94); }
  100% { opacity: .92; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

@keyframes motion-lines {
  0% { opacity: 0; transform: translateX(-10px); }
  30% { opacity: .55; }
  100% { opacity: 0; transform: translateX(14px); }
}

@keyframes redraw {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}


/* 21. Reduced motion
   Everything lands in its final state, instantly.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }

  .js .site-header,
  .js .hero__lead,
  .js .machine {
    opacity: 1;
    transform: none;
  }

  .js .hero__line > span {
    transform: none;
  }

  .js .full-stop__loop .pencil-path,
  .js .site-header .brand__mark .pencil-path {
    stroke-dashoffset: 0;
  }

  .machine[data-state="scanning"] .machine__led {
    animation: none;
  }
}