/* ==========================================================================
   Lawn Leads design system: Fresh Cut
   The job-site clipboard. Cream paper with faint mower stripes, deep turf ink, 2px outlines,
   4px chunk shadows, radii 14 / 20 / 28, grass-fringe seams, safety orange for the ask.

   Load order on every page: css/core.css, then this file, then css/pages/<slug>.css.
   Builders' reference: styleguide.html. How to build a page: docs/DESIGN-SYSTEM.md.

   Contents
     1. Tokens              9. Sections, seams            17. Kit: surfaces, fasteners
     2. Base + type        10. Kit: hero, marks, notes    18. Kit: phone screens, hand, NFC
     3. Layout + recipes   11. Kit: signs, packets        19. Kit: maps, flags, lane, bars
     4. Buttons            12. Kit: work order, estimate  20. Kit: readouts, plates, calendars
     5. ZIP form           13. Kit: parts diagram         21. Kit: pairs, slips, tags, more
     6. Header + menus     14. Kit: clipboards, routes    22. Kit: closing variants, legal
     7. Footer             15. Kit: paper, phones         23. Motion off + idle
     8. Dialogs (main.js)  16. Kit: proof, tables, FAQ
   Keyframes are prefixed fc-. Component classes are prefixed fc-. The only unprefixed
   classes are the shared hooks main.js and core.css expect (btn, nav-links, nav-dd,
   dd-toggle, area-*, book-*, wall-*, reveal, counter, brand).
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
/* Metric-matched fallbacks: until Work Sans, Alfa Slab One and Permanent Marker arrive from
   Google Fonts, the page is set in a local font stretched to the same widths and line boxes, so
   the lines do not rewrap (and the page below does not jump) when the web fonts swap in.
   Android has no Arial or Georgia: there it falls through to the rest of each stack. */
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 110%; ascent-override: 84.5%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Work Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 103.8%; ascent-override: 89.6%; descent-override: 23.4%; line-gap-override: 0%; }
@font-face { font-family: "Alfa Slab Fallback"; src: local("Georgia"); size-adjust: 120.8%; ascent-override: 86%; descent-override: 27.3%; line-gap-override: 0%; }
@font-face { font-family: "Permanent Marker Fallback"; src: local("Comic Sans MS"), local("ComicSansMS"); size-adjust: 107.6%; ascent-override: 103%; descent-override: 29.7%; line-gap-override: 0%; }
:root {
  /* palette */
  --fc-paper: #FBF6E8;
  --fc-paper-2: #F5EFDF;
  --fc-white: #FFFDF6;
  --fc-mint: #DDF0D2;
  --fc-mint-2: #D5EAC8;
  --fc-ink: #163A25;
  --fc-ink-deep: #0E2819;   /* text on safety orange: 5.4:1 */
  --fc-ink-2: #34523F;      /* muted text: 8:1 on cream, 7:1 on mint */
  --fc-ink-3: #56645B;      /* crossed-out / "not ours" text: 5.6:1 on white */
  --fc-orange: #FF6B2C;
  --fc-orange-ink: #A63D0C; /* orange as text: 5.9 on paper, 5.3 on mint, 5.0 on mint-2, 4.9 on kraft; never on sun or leaf */
  --fc-red-ink: #B42318;    /* carbon-copy numbers, proof stamps: 6.4:1 on white */
  --fc-green-ink: #23703A;  /* INCLUDED stamps, open badges: 5.9:1 on white */
  --fc-green-ink-2: #206536; /* green ink on kraft and grained paper: 5.4:1 on flat kraft */
  --fc-sun: #FFD23F;
  --fc-sun-2: #FFF4C9;      /* sun tint for highlighted rows */
  --fc-sticky: #FFE36E;
  --fc-clover: #3E9B4F;
  --fc-clover-2: #2E7D46;
  --fc-leaf: #A9DB8F;
  --fc-peach: #FF9A5C;
  --fc-lawn-a: #7CC46B;
  --fc-lawn-b: #4FA257;
  --fc-turf-a: #21603A;     /* light proof stripe: chalk 7:1, sun 5.2:1 */
  --fc-turf-b: #163A25;
  --fc-chalk: #FFF8E6;
  --fc-chalk-2: #E4EDDF;    /* body text on turf: 9:1 */
  --fc-soil: #7A4B2A;
  --fc-board: #C98C53;
  --fc-wood: #F2D6A8;
  --fc-kraft: #F3E1B5;

  /* shape */
  --fc-line: 2px solid var(--fc-ink);
  --fc-chunk: 4px 4px 0 var(--fc-ink);
  --fc-chunk-lg: 6px 6px 0 var(--fc-ink);
  --fc-r1: 14px;
  --fc-r2: 20px;
  --fc-r3: 28px;
  --fc-outline:
    drop-shadow(2px 0 0 var(--fc-ink)) drop-shadow(-2px 0 0 var(--fc-ink))
    drop-shadow(0 2px 0 var(--fc-ink)) drop-shadow(0 -2px 0 var(--fc-ink));
  --fc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fc-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* spacing scale: 4 8 12 16 20 24 32 40 48 56 64 80 96 112 */
  --fc-s-4: 4px;
  --fc-s-8: 8px;
  --fc-s-12: 12px;
  --fc-s-16: 16px;
  --fc-s-20: 20px;
  --fc-s-24: 24px;
  --fc-s-32: 32px;
  --fc-s-40: 40px;
  --fc-s-48: 48px;
  --fc-s-56: 56px;
  --fc-s-64: 64px;
  --fc-s-80: 80px;
  --fc-s-96: 96px;
  --fc-s-112: 112px;
  --fc-header-h: 72px;
  --fc-fringe-h: 44px;
  --fc-pad-y: clamp(64px, 8vw, 112px);
  --fc-gutter: 16px;

  /* type */
  --fc-display: "Alfa Slab One", "Alfa Slab Fallback", Rockwell, "Roboto Slab", Georgia, serif;
  --fc-body: "Work Sans", "Work Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-hand: "Permanent Marker", "Permanent Marker Fallback", "Marker Felt", "Comic Sans MS", cursive;
  --fc-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* paper, with a whisper of grain and wide mower stripes 2% darker. The grain's url() is
     root-absolute: a url() inside a custom property resolves against the stylesheet that uses
     var(), so a relative one would break in css/pages/*.css. Page CSS may use these tokens. */
  --fc-grain: url("/assets/lawn/grain.svg");
  --fc-bg-paper: var(--fc-grain), repeating-linear-gradient(90deg, var(--fc-paper) 0 160px, var(--fc-paper-2) 160px 320px);
  --fc-bg-mint: var(--fc-grain), repeating-linear-gradient(90deg, var(--fc-mint) 0 160px, var(--fc-mint-2) 160px 320px);
  /* deep turf: bold two-tone passes plus a faint cross-cut, a mowed checkerboard */
  --fc-bg-turf: var(--fc-grain),
    repeating-linear-gradient(0deg, rgba(6, 22, 12, 0.16) 0 120px, transparent 120px 240px),
    repeating-linear-gradient(90deg, var(--fc-turf-a) 0 120px, var(--fc-turf-b) 120px 240px);
  --fc-bg-board: var(--fc-grain),
    radial-gradient(rgba(84, 44, 14, 0.28) 1px, transparent 1.6px) 0 0 / 9px 11px,
    radial-gradient(rgba(255, 236, 205, 0.22) 1px, transparent 1.6px) 4px 6px / 13px 7px,
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(90, 45, 14, 0.2), transparent 55%);
  --fc-stripes: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 12px, var(--fc-lawn-b) 12px 24px);

  /* scene colors: every drawing reads these, never raw hex (see docs/DESIGN-SYSTEM.md, drawing spec) */
  --fc-pure: #FFFFFF;
  --fc-sheet: #FFFEFA;       /* work order and estimate paper */
  --fc-sheet-warm: #FFFBEA;  /* the picked estimate */
  --fc-thermal: #FFFEF8;     /* receipt tape */
  --fc-carbon-pink: #FFD4C7;
  --fc-carbon-yellow: #FFF0AE;
  --fc-ballpoint: #1F4FA0;   /* handwriting on forms: 7.6:1 on the sheet */
  --fc-orange-2: #E0521A;    /* orange in shadow (phone case bumps) */
  --fc-orange-hover: #FF7B42;
  --fc-sun-3: #E8B92A;
  --fc-sticky-mint: #C9EDB5;
  --fc-chalk-3: #CFE6C4;
  --fc-gray-1: #6C7A70;      /* "not ours" stamp border */
  --fc-gray-2: #8A968E;      /* dashed "not ours" boxes */
  --fc-placeholder: #5C7062; /* input placeholder: 5:1 on white */
  --fc-ink-black: #0B1F13;   /* notch, screen bezel */
  --fc-label: #1C231E;       /* label-maker tape */
  --fc-label-ink: #F4F4EE;
  --fc-bubble: #E7EAE6;      /* incoming chat bubble */
  --fc-smoke: #E7E1D0;
  --fc-nail: #C9CEC6;
  --fc-clothespin: #D9B98A;
  --fc-rail-a: #D6A06A;      /* the hanger rail, light and dark wood */
  --fc-rail-b: #9A6333;
  --fc-rail-c: #B57C45;
  --fc-brass-hi: #FFEBB0;
  --fc-brass: #D9A637;
  --fc-brass-lo: #A87A1E;
  --fc-steel-a: #F4F6F1;     /* brushed steel, light to dark (clips, plates) */
  --fc-steel-b: #AEB6AB;
  --fc-steel-c: #7E8880;
  --fc-rubber: #3A443D;      /* mounts, tires, dash */
  --fc-rubber-2: #56625A;
  --fc-asphalt: #3A3F39;
  --fc-asphalt-2: #2B2F2A;
  --fc-curb-a: #DAD6CA;      /* concrete */
  --fc-curb-b: #CFCABD;
  --fc-tablet: #1F2A23;
  --fc-case-ink: #24312A;
  --fc-case-ink-2: #1A241F;
  --fc-screen-a: #2F7A45;    /* lock-screen lawn stripes */
  --fc-screen-b: #276A3B;
  --fc-sky: #BFE3F0;
  --fc-sky-2: #E3F2F7;
  --fc-dusk-a: #FFB36B;      /* horizon at dusk */
  --fc-dusk-b: #7A5C8F;      /* upper sky at dusk */
  --fc-night: #172A33;       /* night sky: chalk text 12:1 */
  --fc-glow: #FFE9A8;        /* porch light, screen glow */
  --fc-skin-1: #F2C9A5;      /* hands: three tones, drawn flat */
  --fc-skin-2: #C68B5E;
  --fc-skin-3: #7E5236;
  --fc-cork: #C99A63;
  --fc-peg: #D8B98A;
  --fc-fridge: #F2F4EF;
  --fc-board-white: #FBFCF8; /* whiteboard */
  --fc-red-tint: #FFE1DB;
  --fc-keys: #D7DBD3;        /* a drawn phone keyboard */
  --fc-lcd: #C3D1AE;         /* LCD glass and its digits: 11:1 */
  --fc-lcd-ink: #1E2B1C;
  --fc-wheel-a: #0C1510;     /* odometer and flip-card cells */
  --fc-wheel-b: #2A342D;
  --fc-wheel-lite: #DADDD6;
  --fc-flap-a: #26302A;
  --fc-flap-b: #1A221D;
  --fc-flap-line: #0B120E;
  --fc-ziptie: #1F2622;
  --fc-ziptie-2: #2E3731;
  --fc-shopwall: #DCE3D3;
  --fc-fridge-2: #E5E8E1;
  /* map parts (the homepage route map and any street) */
  --fc-walk: #F1ECDC;
  --fc-road: #E2DBC5;
  --fc-road-line: #E2A200;
  --fc-drive: #EAE4D1;
  --fc-garage: #E4DAC3;
  --fc-brick: #B8674A;
  --fc-bush: #6DBE6A;
  --fc-yard: #F2F6E6;
  --fc-tree: #8CCB78;
  --fc-tree-hi: #B8E0A4;
  --fc-trailer: #D5DBCF;
  --fc-gate: #C3CABC;
  --fc-can: #E8452C;
  --fc-bed: #E9E2CE;

  /* tilt budget (house rule 1): objects tilt, paragraphs do not. The kit's text-bearing paper
     (packets, hangers, tags, the receipt, the signboard) takes its default tilt from
     --fc-tilt-sheet; tools/shoot.mjs fails any text over 2 lines turned past 1deg. */
  --fc-tilt-object: 4deg;    /* max, for objects with no text or at most two lines */
  --fc-tilt-sheet: 1deg;     /* max, for paper that carries text */
  /* tables, legal text and forms: 0 */

  /* stacking: companions sit under the header (60) and the dialogs (top layer) */
  --fc-z-companion: 40;
  --fc-z-scrim: 59;
  --fc-z-header: 60;

  /* shared dialogs (css/core.css reads these) */
  --ll-font-body: var(--fc-body);
  --ll-font-display: var(--fc-display);
  --ll-bg: var(--fc-paper);
  --ll-ink: var(--fc-ink);
  --ll-muted: var(--fc-ink-2);
  --ll-surface: var(--fc-white);
  --ll-surface-ink: var(--fc-ink);
  --ll-line: 2px solid #163A25;
  --ll-radius: 28px;
  --ll-shadow: 8px 8px 0 #163A25;
  --ll-accent: #FF6B2C;
  --ll-accent-ink: #0E2819;
  --ll-good: #23703A;
  --ll-warn: #A63D0C;   /* = --fc-orange-ink */
  --ll-focus: #163A25;
  --ll-backdrop: rgba(14, 40, 25, 0.58);
}
@media (min-width: 640px) { :root { --fc-gutter: 28px; } }
@media (min-width: 1100px) { :root { --fc-gutter: 40px; } }
@media (max-width: 600px) {
  :root { --fc-header-h: 62px; --fc-fringe-h: 32px; }
}

/* ==========================================================================
   2. Base + type
   ========================================================================== */
/* Anchor jumps and keyboard focus both stop below the sticky header (WCAG 2.4.11). */
html { scroll-padding-top: 88px; }
@media (max-width: 600px) { html { scroll-padding-top: 76px; } }

body {
  background-color: var(--fc-paper);
  background-image: var(--fc-bg-paper);
  color: var(--fc-ink);
  font-family: var(--fc-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Alfa Slab One and Permanent Marker have one weight, Work Sans stops at 800: never smear a
     fake bold over a face that is not loaded (a fake italic is allowed) */
  font-synthesis: style;
}
@media (max-width: 600px) { body { font-size: 1rem; } }

main { display: block; overflow-x: clip; }
main > section, .fc-sec { position: relative; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
h1, h2 { font-family: var(--fc-display); font-weight: 400; }
/* house rule 2: a free-standing h3 or h4 in running copy is Work Sans 800. Object lettering (a packet,
   a hanger, an estimate name, a spec tab) sets the slab itself, or opts in with .fc-letter. */
h3, h4 { font-family: var(--fc-body); font-weight: 800; }
.fc-letter { font-family: var(--fc-display); font-weight: 400; letter-spacing: normal; }
/* Alfa Slab has one weight (400). Anything set in it stays 400 on any element (an h3.fc-h2, a
   <b> in a dialog bar), or the browser smears a fake bold. A <b> or <strong> inside slab
   lettering keeps the slab's weight too; a kit rule that sets its own weight still wins. */
:where(h1, h2, .fc-h1, .fc-h2, .fc-letter) :where(b, strong) { font-weight: inherit; }
p { margin: 0; text-wrap: pretty; }
figure, blockquote { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 3px; }
.fc-bg-turf :focus-visible, .fc-on-dark :focus-visible { outline-color: var(--fc-sun); }
/* <main> takes focus only as a landing spot (a dismissed companion hands focus back to it): no ring */
#main[tabindex="-1"]:focus { outline: none; }
/* paper objects and light surfaces (cork, pegboard, fridge, whiteboard, shop wall) on the turf band
   bring their own ink, and so do the controls on them: sun on cork is 1.8:1, ink is 4.9:1. The dark
   dash surface keeps the sun ring. */
.fc-bg-turf :is(.fc-accs, .fc-receipt, .fc-order, .fc-estimate__paper, .fc-slip, .fc-tag, .fc-board__paper, .fc-surface--cork, .fc-surface--peg, .fc-surface--fridge, .fc-surface--whiteboard, .fc-surface--shopwall) :focus-visible { outline-color: var(--fc-ink); }

.fc-nowrap { white-space: nowrap; }
.fc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fc-skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 16px; border: var(--fc-line); border-radius: 12px;
  background: var(--fc-sun); color: var(--fc-ink); font-weight: 800; text-decoration: none;
}
.fc-skip:focus { top: 12px; }

/* Headline scale. Alfa Slab has one weight, so smaller headings on long pages use
   Work Sans 800 (.fc-h3, .fc-h4). House rule: a headline is 3 lines max on desktop. */
.fc-h1 {
  font-family: var(--fc-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1rem + 3.9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
}
.fc-h2 {
  font-family: var(--fc-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.05rem + 2.3vw, 3.05rem);
  line-height: 1.06;
  text-wrap: balance;
}
.fc-h2--sm { font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.4rem); }
.fc-h3 {
  font-family: var(--fc-body);
  font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.fc-h4 {
  font-family: var(--fc-body);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
}
.fc-lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--fc-ink-2);
}
.fc-muted { color: var(--fc-ink-2); }
.fc-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fc-ink-2);
}
.fc-kicker svg { flex: none; width: 17px; height: 22px; }
.fc-kicker :where(b, strong) { font-weight: 800; }
.fc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-orange-ink);
}
.fc-eyebrow::before,
.fc-eyebrow::after { content: ""; flex: none; width: 26px; height: 2px; background: currentColor; }
.fc-bg-turf .fc-eyebrow { color: var(--fc-sun); }
@media (max-width: 600px) {
  .fc-h1 { font-size: clamp(2.2rem, 11.2vw, 2.75rem); }
  .fc-kicker { font-size: 0.75rem; letter-spacing: 0.08em; margin-bottom: 10px; }
  .fc-eyebrow::before, .fc-eyebrow::after { display: none; }
}

/* yellow highlighter behind a phrase */
.fc-hl {
  padding: 0 0.06em;
  color: inherit;
  background: linear-gradient(transparent 56%, var(--fc-sun) 56% 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* running copy: links underlined, lists with little flags */
.fc-prose > * + * { margin-top: 0.9em; }
.fc-prose a,
.fc-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--fc-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.fc-prose a:hover,
.fc-link:hover { text-decoration-style: wavy; }
.fc-prose ul, .fc-prose ol { padding-left: 1.3em; }
.fc-prose li + li { margin-top: 0.35em; }
.fc-prose ul li::marker { color: var(--fc-orange); }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.fc-wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--fc-gutter);
}
.fc-wrap--narrow { max-width: 920px; }
.fc-measure { max-width: 36em; }
.fc-center { text-align: center; margin-inline: auto; }
.fc-sec-head {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: 780px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}
.fc-sec-head--left { justify-items: start; margin-left: 0; text-align: left; }
/* copy beside the section's object; add --flip to put the object first on desktop */
.fc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: center; }
.fc-split__copy { display: grid; gap: 18px; align-content: start; }
@media (min-width: 960px) {
  .fc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  .fc-split--flip > :first-child { order: 2; }
}
.fc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---------- section recipes (docs/DESIGN-SYSTEM.md, "Section recipes") ----------
   Vary the layout from section to section. Never two rows of equal objects in a row. */
/* split, uneven: copy 5 / object 7 (the object gets the room); --flip puts the object first */
@media (min-width: 960px) {
  .fc-split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .fc-split--wide.fc-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* the stage: one wide scene across the section, the words set under it like a caption */
.fc-stage { display: grid; gap: clamp(28px, 4vw, 52px); }
.fc-stage__scene { position: relative; min-width: 0; }
.fc-stage__copy { display: grid; gap: 14px; max-width: 46rem; }
@media (min-width: 960px) {
  .fc-stage__copy--cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); max-width: none; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .fc-stage__copy--cols > :first-child { grid-row: span 3; }
}
/* the head stays put while a tall scene or list goes by beside it */
.fc-headscene { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) {
  .fc-headscene { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .fc-headscene > .fc-sec-head { position: sticky; top: calc(var(--fc-header-h) + 36px); margin: 0; }
}
/* an object that crosses the seam into the next section (the next section makes room) */
.fc-sec--overlap { z-index: 3; }
.fc-sec--overlap .fc-overlap { position: relative; z-index: 4; margin-bottom: calc(-1 * var(--overlap, 120px)); }
.fc-sec--overlap + section { padding-top: calc(var(--fc-pad-y) + var(--overlap, 120px)); }
@media (max-width: 600px) { .fc-sec--overlap { --overlap: 72px; } }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
  min-height: 52px;
  padding: 0 1.3em;
  border-radius: var(--fc-r1);
  font-family: var(--fc-body);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  transition: transform 0.22s var(--fc-bounce), box-shadow 0.22s var(--fc-bounce), background-color 0.16s, border-color 0.16s;
}
.btn-primary {
  border: var(--fc-line);
  background: var(--fc-orange);
  color: var(--fc-ink-deep);
  box-shadow: var(--fc-chunk);
}
.btn-primary:hover {
  background: var(--fc-orange-hover);
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 6px 6px 0 var(--fc-ink);
}
.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--fc-ink);
}
.btn-ghost {
  border: 2px solid rgba(22, 58, 37, 0.42);
  background: transparent;
  color: var(--fc-ink);
}
.btn-ghost:hover {
  border-color: var(--fc-ink);
  background: rgba(22, 58, 37, 0.05);
}
.fc-bg-turf .btn-ghost { border-color: rgba(255, 248, 230, 0.6); color: var(--fc-chalk); }
.fc-bg-turf .btn-ghost:hover { border-color: var(--fc-chalk); background: rgba(255, 248, 230, 0.08); }

/* ==========================================================================
   5. ZIP form (form.fc-zip[data-area-form], validated by main.js)
   ========================================================================== */
.fc-zip label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
}
.fc-zip__row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.fc-zip input {
  flex: 1 1 150px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 16px;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white);
  box-shadow: inset 3px 3px 0 rgba(22, 58, 37, 0.08);
  color: var(--fc-ink);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fc-zip input::placeholder { color: var(--fc-placeholder); font-weight: 500; letter-spacing: 0.03em; opacity: 1; }
.fc-zip input:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 2px; background: var(--fc-pure); }
.fc-zip .btn { flex: 0 0 auto; min-height: 56px; }
.area-err { margin-top: 0.5em; color: var(--ll-warn); }
@media (max-width: 600px) { .fc-zip .btn { padding: 0 1em; } }

/* the reason to check a ZIP, with a green tick */
.fc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 26em;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--fc-ink-2);
}
.fc-note strong { font-weight: 800; color: var(--fc-ink); }
.fc-note::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-lawn-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.3 2.3 4.7-5' fill='none' stroke='%23163A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ==========================================================================
   6. Header + dropdown nav (markup injected by js/layout.js)
   ========================================================================== */
/* The placeholder holds the header's height until layout.js swaps the real one in. */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
  height: calc(var(--fc-header-h) + 2px);
  border-bottom: var(--fc-line);
  background: rgba(251, 246, 232, 0.94);
}
.fc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  overflow-x: clip;
  border-bottom: var(--fc-line);
  background: rgba(251, 246, 232, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.fc-header__in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--fc-header-h);
}
/* LOGO: the type-only wordmark placeholder. Swap for Jeff's logo in js/layout.js. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  padding: 6px 0;
  font-family: var(--fc-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fc-ink);
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--fc-orange);
}
.fc-toggle { display: none; flex: none; }

.nav-top,
.dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fc-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dd-chev { flex: none; width: 12px; height: 8px; transition: transform 0.25s var(--fc-ease); }
.dd-chev path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd.open > .dd-toggle .dd-chev { transform: rotate(180deg); }
.nav-dd { --tab: var(--fc-orange); }
.nav-dd--back { --tab: var(--fc-clover-2); }
.nav-dd--cards { --tab: var(--fc-sun); }
.dd-menu ul { margin: 0; padding: 0; list-style: none; }
.dd-menu a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fc-ink);
  text-decoration: none;
}
.dd-menu a b { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.dd-menu a b small { font-size: 0.9em; font-weight: 600; color: var(--fc-ink-2); }
.dd-menu a span { font-size: 0.875rem; line-height: 1.35; color: var(--fc-ink-2); }
.dd-menu a:hover { background: var(--fc-mint); }
.dd-menu a[aria-current="page"] { background: var(--fc-sun-2); }
.dd-menu a[aria-current="page"] b::after {
  content: "You are here";
  margin-left: 8px;
  padding: 1px 7px 2px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

@media (min-width: 1081px) {
  .fc-header .nav-links { display: flex; align-items: center; gap: 2px; margin-right: 14px; }
  .nav-top:hover,
  .dd-toggle:hover .dd-label {
    text-decoration: underline wavy var(--fc-orange);
    text-decoration-thickness: 2px;
  }
  .nav-top[aria-current="page"],
  .nav-dd.is-current > .dd-toggle .dd-label {
    text-decoration: underline;
    text-decoration-color: var(--fc-orange);
    text-decoration-thickness: 3px;
  }
  .nav-dd { position: relative; }
  .dd-menu {
    position: absolute;
    top: calc(100% + 24px);
    left: 50%;
    z-index: 5;
    width: 392px;
    padding: 16px 10px 10px;
    border: var(--fc-line);
    border-radius: var(--fc-r2);
    background-color: var(--fc-white);
    background-image: linear-gradient(var(--tab), var(--tab));
    background-size: 100% 7px;
    background-repeat: no-repeat;
    box-shadow: var(--fc-chunk-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) rotate(-0.4deg);
    transition: opacity 0.16s, transform 0.22s var(--fc-ease), visibility 0s linear 0.22s;
  }
  /* a bridge over the gap, so the pointer can travel from the button to the panel */
  .dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
  .dd-menu li + li { border-top: 2px dashed rgba(22, 58, 37, 0.14); }
  .nav-dd.open > .dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) rotate(-0.4deg);
    transition-delay: 0s;
  }
}
@media (min-width: 1081px) and (hover: hover) {
  .nav-dd:hover > .dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) rotate(-0.4deg);
    transition-delay: 0.06s;
  }
  .nav-dd:hover > .dd-toggle .dd-chev { transform: rotate(180deg); }
  /* Escape, or a click that closes the menu, dismisses it even while the pointer rests on it
     (WCAG 1.4.13); another menu held open from the keyboard never shows two at once */
  .nav-dd.is-dismissed:hover > .dd-menu,
  .nav-links:has(.nav-dd.open) .nav-dd:not(.open):hover > .dd-menu {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) rotate(-0.4deg);
    transition-delay: 0s;
  }
  .nav-dd.is-dismissed:hover > .dd-toggle .dd-chev { transform: none; }
}

@media (max-width: 1080px) {
  .fc-header .btn-primary {
    min-height: 44px;
    padding: 0 0.95em;
    font-size: 0.95rem;
    box-shadow: 3px 3px 0 var(--fc-ink);
  }
  /* under text-spacing overrides (WCAG 1.4.12) the ask wraps rather than push the menu button
     off the screen; at normal spacing it fits on one line down to 300px */
  .fc-header__in > .btn-primary { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.05; text-align: center; }
  .fc-toggle {
    display: inline-grid;
    place-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: var(--fc-line);
    border-radius: var(--fc-r1);
    background: var(--fc-white);
    box-shadow: 3px 3px 0 var(--fc-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fc-toggle span {
    display: block;
    width: 20px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--fc-ink);
    transition: transform 0.25s var(--fc-ease), opacity 0.2s;
  }
  body.menu-open .fc-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.menu-open .fc-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .fc-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* the phone drawer: a notebook page, grouped links fold open one group at a time */
  .fc-header .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 12px;
    right: 18px;
    display: block;
    max-height: calc(100vh - var(--fc-header-h) - 36px);
    max-height: calc(100dvh - var(--fc-header-h) - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 16px 8px;
    border: var(--fc-line);
    border-radius: var(--fc-r2);
    background-color: var(--fc-white);
    background-image: linear-gradient(90deg, transparent 38px, rgba(255, 107, 44, 0.35) 38px 40px, transparent 40px);
    box-shadow: var(--fc-chunk-lg);
    opacity: 0;
    transform: translateY(-8px) rotate(-0.6deg);
    transition: opacity 0.2s, transform 0.3s var(--fc-ease);
  }
  .fc-header .nav-links.open { opacity: 1; transform: rotate(-0.6deg); }
  .nav-dd,
  .nav-top { border-bottom: 2px dashed rgba(22, 58, 37, 0.16); }
  .nav-links > :last-child { border-bottom: 0; }
  .dd-toggle,
  .nav-top {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 0 0 0 36px;
    border-radius: 0;
    font-family: var(--fc-display);
    font-size: 1.4rem;
    font-weight: 400;
    text-align: left;
  }
  .dd-toggle { justify-content: space-between; }
  .dd-chev {
    width: 34px;
    height: 34px;
    padding: 11px 9px;
    border: var(--fc-line);
    border-radius: 50%;
    background: var(--tab);
    overflow: visible;
  }
  .nav-dd--back .dd-chev path { stroke: var(--fc-pure); }
  .nav-dd.is-current > .dd-toggle .dd-label,
  .nav-top[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--fc-orange);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .dd-menu { display: none; padding: 0 0 12px 30px; }
  .nav-dd.open > .dd-menu { display: block; }
  .dd-menu a { padding: 9px 10px; }
  .dd-menu li + li { margin-top: 2px; }
}
@media (max-width: 600px) {
  .brand { font-size: 1.2rem; text-shadow: 1.5px 1.5px 0 var(--fc-orange); }
  .fc-header__in { gap: 8px; }
  .dd-menu a span { font-size: 0.8125rem; }
}
@media (max-width: 380px) {
  .brand { font-size: 1.08rem; }
  .fc-header .btn-primary { padding: 0 0.75em; font-size: 0.9rem; }
}
@media (max-width: 350px) {
  .brand { font-size: 0.98rem; }
  .fc-header .btn-primary { padding: 0 0.6em; font-size: 0.84rem; }
  .fc-toggle { width: 44px; height: 44px; }
}
/* the narrowest phones: the menu button keeps its 44px, the wordmark and the ask give a little */
@media (max-width: 330px) {
  .fc-header__in { gap: 6px; }
  .brand { font-size: 0.9rem; letter-spacing: 0; }
  .fc-header .btn-primary { padding: 0 0.5em; font-size: 0.8rem; }
}

/* The header's bottom edge is a strip of lawn: a little mower cuts it as you scroll (site.js). */
.fc-mowline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 1;
  height: 6px;
  pointer-events: none;
}
.fc-mowline__cut {
  position: absolute;
  inset: 0;
  border-block: 2px solid var(--fc-ink);
  background: var(--fc-stripes);
  clip-path: inset(0 var(--fc-cr, 100%) 0 var(--fc-cl, 0px));
}
.fc-mowline__mower {
  position: absolute;
  left: calc(max(0px, (100% - 1280px) / 2) + var(--fc-gutter));
  bottom: -5px;
  width: 25px;
  height: 17px;
  transform: translateX(var(--fc-mx, 0px));
  will-change: transform;
}

/* the phone menu's scrim (site.js adds it): it catches the tap that closes the drawer, so the
   tap never lands on the page underneath */
.fc-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--fc-z-scrim);
  display: none;
  background: rgba(14, 40, 25, 0.16);
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1080px) { body.menu-open .fc-scrim { display: block; } }

/* Without JavaScript the header and footer placeholders show their <noscript> line instead:
   a way home, the ask, and the address with the legal links. */
.fc-nojs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: var(--fc-header-h); }
.fc-nojs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.fc-nojs .btn { margin-left: auto; }
.fc-nojs--foot { min-height: 0; padding: 26px 0 30px; border-top: var(--fc-line); font-size: 0.95rem; font-weight: 600; }
.fc-nojs--foot a { font-weight: 700; }
#site-footer .fc-nojs--foot address { font-style: normal; }

/* ==========================================================================
   7. Footer and the giant wordmark cut out of striped turf (injected by js/layout.js)
   ========================================================================== */
.fc-footer { position: relative; padding: clamp(40px, 5vw, 64px) 0 0; overflow: hidden; }
.fc-footer__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
.fc-footer__brand { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; max-width: 28rem; }
.fc-footer__brand .brand { margin: 0; font-size: 1.7rem; }
.fc-footer__brand p { font-weight: 600; line-height: 1.5; color: var(--fc-ink-2); }
.fc-footer address { font-style: normal; font-size: 0.95rem; font-weight: 600; color: var(--fc-ink-2); }
@media (min-width: 1000px) {
  .fc-footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
  .fc-footer__brand { grid-column: auto; }
}
.fc-footer__col h2 {
  margin-bottom: 6px;
  font-family: var(--fc-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--fc-ink-2);
}
.fc-footer__col ul { margin: 0; padding: 0; list-style: none; }
.fc-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.fc-footer__col a[aria-current="page"],
.fc-footer__bar a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--fc-orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.fc-footer__col a:hover,
.fc-footer__bar a:hover {
  text-decoration: underline wavy var(--fc-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.fc-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  margin-top: 36px;
  padding: 6px 0;
  border-top: var(--fc-line);
  font-size: 0.9rem;
  font-weight: 600;
}
.fc-footer__bar a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.fc-footer__td { margin-left: auto; }
.fc-giant {
  margin: 10px 0 0;
  padding: 0 0 clamp(10px, 1.6vw, 22px);
  font-family: var(--fc-display);
  font-size: clamp(2.4rem, 11.4vw, 11.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.fc-giant span {
  display: inline-block;
  color: transparent;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-b) 0 0.15em, var(--fc-lawn-a) 0.15em 0.3em);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px var(--fc-ink);
  filter: drop-shadow(5px 5px 0 var(--fc-ink));
  animation: fc-hop 7s var(--fc-ease) 2;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: transform 0.3s var(--fc-bounce);
}
.fc-giant .fc-giant__gap { width: 0.3em; animation: none; background: none; filter: none; }
.fc-giant span:hover { animation-play-state: paused; transform: translateY(-12px) rotate(-6deg); }
@keyframes fc-hop {
  0%, 86%, 100% { transform: translateY(0); }
  90% { transform: translateY(-11%); }
  94% { transform: translateY(2%); }
}
@media (max-width: 600px) {
  .fc-giant span { -webkit-text-stroke-width: 1.5px; filter: drop-shadow(3px 3px 0 var(--fc-ink)); }
  .fc-footer__td { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   8. Shared dialogs (built by js/main.js; structure in css/core.css)
   ========================================================================== */
.area-panel {
  padding: 50px 28px 34px;
  background-color: var(--fc-white);
  background-image: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 18px, var(--fc-lawn-b) 18px 36px);
  background-size: 100% 12px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.area-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 132px;
  height: 22px;
  margin-left: -66px;
  border: var(--fc-line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
}
.area-kicker { font-weight: 800; letter-spacing: 0.1em; color: var(--fc-ink-2); opacity: 1; }
.area-panel h2 { margin: 0 0 0.55em; font-weight: 400; text-wrap: balance; }
.area-badge {
  margin-bottom: 12px;
  color: var(--fc-pure);
  padding: 5px 12px;
  border: var(--fc-line);
  box-shadow: 3px 3px 0 var(--fc-ink);
  transform: rotate(-3deg);
}
.area-row input { border-radius: var(--fc-r1); min-height: 56px; background: var(--fc-pure); }
.area-row input:focus-visible { outline-offset: 2px; }
.area-form-modal label { margin-top: 4px; }
.area-row .btn { min-height: 56px; }
.area-x,
.book-x,
.lb-x { box-shadow: 2px 2px 0 var(--fc-ink); background: var(--fc-white); }
.area-x:hover,
.book-x:hover,
.lb-x:hover { background: var(--fc-sun); }
.area-body { margin: 0 0 20px; color: var(--fc-ink-2); }
.area-again { color: var(--fc-ink); }
.book-bar { background: var(--fc-mint); font-weight: 400; }
.book-bar b { font-weight: 400; }   /* the slab has one weight */
.book-help { background: var(--fc-paper); }
dialog.wall-lb img { border: 3px solid var(--fc-white); box-shadow: 8px 8px 0 var(--fc-ink); }

/* ==========================================================================
   9. Sections, backgrounds and dividers
   Rhythm: cream, mint, cream, mint ... at most one deep turf band per page, and the
   safety-orange Check my area band always last before the footer.
   ========================================================================== */
.fc-sec { padding: var(--fc-pad-y) 0; }
.fc-sec:where(:has(> .fc-fringe)),
.fc-sec--fringe { padding-bottom: calc(var(--fc-fringe-h) + var(--fc-pad-y)); }
.fc-sec--tight { padding-top: clamp(40px, 5vw, 72px); }
.fc-bg-cream { background-color: var(--fc-paper); background-image: var(--fc-bg-paper); }
.fc-bg-mint {
  background-color: var(--fc-mint);
  background-image: var(--fc-bg-mint);
}
.fc-bg-turf {
  background-color: var(--fc-turf-b);
  background-image: var(--fc-bg-turf);
  color: var(--fc-chalk);
}
.fc-bg-turf .fc-h2,
.fc-bg-turf .fc-h3 { color: var(--fc-chalk); }
.fc-bg-turf .fc-lead,
.fc-bg-turf .fc-muted { color: var(--fc-chalk-2); }

/* grass-fringe seam: a strip of lawn grows along the bottom of a section; the next section
   starts right at the roots. Put it last inside the section. */
.fc-fringe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  height: calc(var(--fc-fringe-h) + 1px);
  background: url("../assets/lawn/fringe-grass.svg") 0 100% / auto 100% repeat-x;
  pointer-events: none;
}
/* shift the blades so neighbouring seams never line up (position only, not a color) */
.fc-fringe--shift-1 { background-position-x: 90px; }
.fc-fringe--shift-2 { background-position-x: 210px; }
/* a strip of soil under a turf band */
.fc-soil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  border-top: var(--fc-line);
  border-bottom: var(--fc-line);
  background-color: var(--fc-soil);
  background-image:
    radial-gradient(circle, rgba(40, 20, 6, 0.4) 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 228, 190, 0.3) 1.3px, transparent 1.9px);
  background-size: 23px 13px, 31px 17px;
  background-position: 0 0, 7px 5px;
}
.fc-bg-turf:where(:has(> .fc-soil)) { padding-bottom: calc(30px + var(--fc-pad-y)); }
/* hazard stripe on the top edge of the orange band */
.fc-hazard {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  border-top: var(--fc-line);
  border-bottom: var(--fc-line);
  background: repeating-linear-gradient(-45deg, var(--fc-ink) 0 14px, var(--fc-sun) 14px 28px);
}
/* a white picket fence along the bottom of a section (markup: docs/DESIGN-SYSTEM.md, Seams) */
.fc-fence { position: relative; height: 100px; }
.fc-fence svg { display: block; }
@media (max-width: 600px) { .fc-fence { height: 86px; } }
/* a curb: the concrete lip and a strip of street (the next section starts on the far side) */
.fc-curb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  border-top: var(--fc-line);
  background:
    linear-gradient(var(--fc-ink), var(--fc-ink)) 0 12px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(22, 58, 37, 0.35) 118px 120px) 0 0 / 100% 12px no-repeat,
    linear-gradient(var(--fc-curb-a), var(--fc-curb-b)) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--fc-sun) 0 40px, transparent 40px 72px) 0 23px / 100% 3px no-repeat,
    var(--fc-asphalt);
}
.fc-sec:where(:has(> .fc-curb)) { padding-bottom: calc(34px + var(--fc-pad-y)); }
/* a straight mowed edge: the stripes change direction along one crisp line */
.fc-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  border-top: var(--fc-line);
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 26px, var(--fc-lawn-b) 26px 52px);
}
.fc-sec:where(:has(> .fc-edge)) { padding-bottom: calc(16px + var(--fc-pad-y)); }
/* a picket fence, the section's last object, stands on the seam with no paper under its posts:
   the fringe grows in front of them, or they stand on the mowed edge or the curb. The page sets
   the room above the fence (a margin-top on its own .fc-fence) */
.fc-sec:where(:has(> .fc-fence)) { padding-bottom: 0; }
.fc-sec:where(:has(> .fc-fence + .fc-edge)) { padding-bottom: 16px; }
.fc-sec:where(:has(> .fc-fence + .fc-curb)) { padding-bottom: 34px; }

/* ---------- the Check my area band: always the last section before the footer ---------- */
.fc-cta {
  padding: calc(22px + var(--fc-pad-y)) 0 calc(var(--fc-fringe-h) + var(--fc-pad-y) * 0.8);
  background-color: var(--fc-orange);
  background-image: radial-gradient(rgba(14, 40, 25, 0.12) 1.3px, transparent 1.8px);
  background-size: 20px 20px;
  color: var(--fc-ink-deep);
}
.fc-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 960px) {
  .fc-cta__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "h h" "copy board";
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 44px;
  }
  .fc-cta__h { grid-area: h; }
  .fc-cta__copy { grid-area: copy; }
  .fc-cta__board { grid-area: board; }
}
.fc-cta .fc-h2 { max-width: 20em; font-size: clamp(2rem, 1.05rem + 2.4vw, 3.3rem); color: var(--fc-ink-deep); }
.fc-cta .fc-lead { max-width: 24em; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight: 600; line-height: 1.5; color: var(--fc-ink-deep); }
.fc-cta__board {
  position: relative;
  padding: 46px 18px 18px;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-bg-board);
  background-color: var(--fc-board);
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 240, 215, 0.12);
  transform: rotate(1.4deg);
}
.fc-cta__paper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: start;
  padding: 32px clamp(16px, 2.6vw, 28px) 26px;
  border: var(--fc-line);
  border-radius: 8px;
  background-color: var(--fc-white);
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(62, 155, 79, 0.14) 31px 32px);
  transform: rotate(-1.2deg);
}
.fc-cta .fc-zip { width: 100%; }
/* a note or a ZIP form set right on the orange, not on the band's paper: deep ink for AA (muted
   ink is about 3:1 there), and the ZIP error sits on a white chip */
.fc-cta__copy .fc-note,
.fc-cta__copy .fc-note strong { color: var(--fc-ink-deep); }
.fc-cta__copy .area-err:not([hidden]) { display: inline-block; padding: 4px 10px; border: 1.5px solid var(--fc-ink-deep); border-radius: 8px; background: var(--fc-white); color: var(--fc-orange-ink); }
.fc-cta__arrow {
  position: absolute;
  top: 58px;
  left: -76px;
  width: 64px;
  height: 36px;
  transform: rotate(10deg);
}
@media (min-width: 1200px) {
  .fc-cta__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "h board" "copy board";
    grid-template-rows: auto auto;
    column-gap: clamp(64px, 7vw, 110px);
    row-gap: 24px;
    align-items: center;
  }
  .fc-cta__h { align-self: end; }
  .fc-cta__copy { align-self: start; }
  .fc-cta .fc-h2 { font-size: clamp(2.4rem, 1.2rem + 1.7vw, 2.73rem); }   /* capped at its 1440px size, so it stays three lines on 1920px monitors */
}
@media (max-width: 1199px) { .fc-cta__arrow { display: none; } }
@media (max-width: 959px) {
  .fc-cta__grid { gap: 22px; }
  .fc-cta__board { margin-top: 26px; }
}
@media (max-width: 600px) {
  .fc-cta__paper { justify-items: stretch; }
  .fc-cta .fc-zip .btn,
  .fc-cta__paper .btn-ghost { flex: 1 1 100%; width: 100%; }
  .fc-cta__board { padding: 40px 10px 12px; }
  .fc-cta__board .fc-board__clip { top: -24px; width: 150px; height: 54px; }
}

/* ==========================================================================
   10. Kit: inner-page hero, marker marks, notes, labels
   ========================================================================== */
/* ---------- inner-page hero: work-order breadcrumb, headline, sub, ask, one statement object ---------- */
.fc-phero { padding: clamp(18px, 3vw, 40px) 0 calc(var(--fc-fringe-h) + clamp(48px, 6vw, 88px)); }
.fc-phero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1000px) {
  /* the words start at the top, so the crumbs and the headline sit at the same height on every
     page; the drawing still centers against them */
  .fc-phero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 5vw, 84px); align-items: start; }
  .fc-phero__object { align-self: center; }
  .fc-phero--object-left .fc-phero__object { order: -1; }
}
.fc-phero__copy { min-width: 0; }
.fc-phero .fc-crumbs { margin-bottom: 22px; }
/* Two headline sizes on every inner page, never a page's own: the default, and --long for a
   headline over about 45 characters. The vw part stops growing at 1360px, where the 1280px column
   stops growing, so a wide screen never wraps the deck's lines differently. */
.fc-phero__h {
  margin-bottom: 18px;
  font-family: var(--fc-display);
  font-size: clamp(2.2rem, 1.05rem + 2.7 * min(1vw, 13.6px), 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.fc-phero__h--long { font-size: clamp(2rem, 0.5rem + 2.6 * min(1vw, 13.6px), 2.75rem); }
.fc-phero__sub {
  max-width: 34em;
  margin-bottom: 24px;
  font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  line-height: 1.55;
  color: var(--fc-ink-2);
}
.fc-phero__sub strong { font-weight: 600; color: var(--fc-ink); }
.fc-phero .fc-note { margin-top: 16px; }
.fc-phero__object { position: relative; display: flex; justify-content: center; min-width: 0; }
/* the deck's eyebrow sits right under the breadcrumb row */
.fc-phero .fc-crumbs + .fc-kicker { margin-top: -6px; }
/* a kicker tag pill */
.fc-kicker--tag {
  display: inline-flex;
  padding: 6px 12px 6px 10px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-sun);
  color: var(--fc-ink);
  box-shadow: 2px 2px 0 var(--fc-ink);
  transform: rotate(-2deg);
}
/* NOT FOR SHIPPING: marks a slot the deck's scene still has to fill. The checker fails any
   page that still carries one (tools/shoot.mjs). */
.fc-todo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 320px;
  padding: 24px;
  border: 3px dashed var(--fc-red-ink);
  border-radius: var(--fc-r2);
  background: repeating-linear-gradient(-45deg, rgba(180, 35, 24, 0.07) 0 14px, transparent 14px 28px), var(--fc-white);
  color: var(--fc-red-ink);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.fc-todo small { display: block; margin-top: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fc-ink-2); }
@media (max-width: 600px) {
  .fc-phero__h { font-size: clamp(2rem, 9.6vw, 2.5rem); margin-bottom: 14px; }
  .fc-phero__h--long { font-size: clamp(1.7rem, 7.4vw, 2rem); }
  .fc-phero__sub { margin-bottom: 18px; }
}
/* a kinetic hero: its pieces rise in one after another on load (.fc-k with style="--k:0" to
   "--k:5", in reading order). Pure CSS, so the page is finished without JavaScript; with reduced
   motion it never runs */
.fc-k { animation: fc-kin 0.75s var(--fc-ease) both; animation-delay: calc(var(--k, 0) * 110ms + 60ms); }
@keyframes fc-kin { from { opacity: 0; transform: translateY(16px); } }

/* ---------- work-order breadcrumb row ---------- */
.fc-crumbs {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fc-crumbs__tag {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: var(--fc-line);
  border-radius: 8px 0 0 8px;
  background: var(--fc-ink);
  color: var(--fc-sun);
  white-space: nowrap;
}
.fc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0 12px; list-style: none; }
.fc-crumbs li { display: inline-flex; align-items: center; min-height: 44px; color: var(--fc-ink-2); }
.fc-crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--fc-orange-ink); }
.fc-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fc-ink); text-decoration: none; }
.fc-crumbs li > a { justify-content: center; min-width: 44px; }   /* "Home" is a 44px target too */
.fc-crumbs a:hover { text-decoration: underline wavy var(--fc-orange); text-underline-offset: 4px; }
.fc-crumbs [aria-current="page"] {
  color: var(--fc-ink);
  background: linear-gradient(transparent 52%, var(--fc-sun) 52% 92%, transparent 92%);
}
/* "this is your part": the service's part number at the end of the row, linking to the map */
.fc-crumbs__part {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-left: var(--fc-line);
  background: var(--fc-orange);
  border-radius: 0 8px 8px 0;
  color: var(--fc-ink-deep);
  white-space: nowrap;
  text-decoration: none;
}
.fc-crumbs .fc-crumbs__part { color: var(--fc-ink-deep); }
.fc-crumbs__part:hover { background: var(--fc-orange-hover); }
.fc-crumbs__part::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-sun);
}
@media (max-width: 600px) {
  .fc-crumbs { font-size: 0.72rem; letter-spacing: 0.05em; }
  .fc-crumbs__tag { display: none; }
  .fc-crumbs { flex-wrap: wrap; }
  /* on a phone the part number is a small sun pill at the end of the row (or on a short row of
     its own), never a full-width orange bar: orange stays the color of the buttons. Its hit area
     reaches 44px through ::after. */
  .fc-crumbs .fc-crumbs__part {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    min-height: 30px;
    margin: 7px 8px;
    padding: 0 10px 0 8px;
    border: var(--fc-line);
    border-radius: 999px;
    background: var(--fc-sun);
  }
  .fc-crumbs__part:hover { background: var(--fc-sun-2); }
  .fc-crumbs__part::before { width: 11px; height: 11px; background: var(--fc-white); }
  .fc-crumbs__part::after { content: ""; position: absolute; inset: -9px -6px; }
  .fc-crumbs ol { padding: 0 8px; }
  .fc-crumbs li + li::before { margin: 0 4px; }
  /* a long page name that wraps gets a short second row: the last crumb is text, never a link */
  .fc-crumbs li:last-child { min-height: 0; padding-block: 7px; }
}
/* in the two-column hero, and the one-column hero on a tablet, the tag would wrap the row */
@media (max-width: 1239px) { .fc-crumbs__tag { display: none; } }

/* ---------- marker underline (one phrase, draws in) ---------- */
.fc-mark { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
.fc-mark__line {
  position: absolute;
  z-index: -1;
  left: -3%;
  bottom: -0.1em;
  width: 106%;
  height: 0.36em;
  overflow: visible;
}
.fc-mark__line path {
  fill: none;
  stroke: var(--fc-orange);
  stroke-width: 8px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 520;
  stroke-dashoffset: 0;
  animation: fc-draw 0.9s 0.45s cubic-bezier(0.55, 0, 0.3, 1) both;
}
.fc-mark__line .fc-mark__two { stroke-width: 4px; opacity: 0.55; animation-delay: 0.95s; }
@keyframes fc-draw {
  from { stroke-dashoffset: 520; }
  to { stroke-dashoffset: 0; }
}
/* a marker underline that can wrap across lines (for longer phrases) */
.fc-mark-line {
  padding-bottom: 0.04em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9C60 3 120 12 180 6S268 4 298 7L298 15C268 12 230 14 180 15S60 20 2 17Z' fill='%23FF6B2C'/%3E%3C/svg%3E") 0 100% / 100% 0.3em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* a marker circle around a word or number */
.fc-circle { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.fc-circle::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.22em -0.34em -0.18em -0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M112 8C60 4 12 20 8 50S58 96 108 93 194 74 192 44 150 6 96 12' fill='none' stroke='%23FF6B2C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- sticky note ---------- */
.fc-sticky {
  position: relative;
  display: inline-block;
  padding: 20px 16px 16px;
  border: var(--fc-line);
  border-radius: 4px 4px 4px 18px;
  background: var(--fc-sticky);
  box-shadow: 4px 4px 0 rgba(22, 58, 37, 0.85);
  color: var(--fc-ink);
  font-family: var(--fc-hand);
  font-size: 1.08rem;
  line-height: 1.2;
  transform: rotate(4deg);
}
.fc-sticky::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 66px;
  height: 20px;
  margin-left: -33px;
  border: 1px solid rgba(22, 58, 37, 0.14);
  background: rgba(255, 255, 255, 0.62);
  transform: rotate(-5deg);
}
/* one line per <span>, so a note never re-wraps in a narrow column */
.fc-sticky > span { display: block; white-space: nowrap; }
.fc-sticky--left { transform: rotate(-3deg); }
.fc-sticky--mint { background: var(--fc-sticky-mint); }

/* ---------- hand note in marker, with an optional arrow ---------- */
.fc-hand {
  display: inline-block;
  font-family: var(--fc-hand);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--fc-ink);
  transform: rotate(-2.5deg);
}
.fc-hand--orange { color: var(--fc-orange-ink); }
.fc-bg-turf .fc-hand { color: var(--fc-sun); }
.fc-hand__arrow { display: inline-block; width: 56px; height: 30px; margin-left: 6px; vertical-align: middle; }
.fc-hand__arrow--down { transform: rotate(80deg); }

/* ---------- proof label chip: every Pawn Leads result wears one ---------- */
.fc-proofchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px 8px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 999px;
  background: var(--fc-sun-2);
  color: var(--fc-ink);
  font-family: var(--fc-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.fc-proofchip::before {
  content: "";
  flex: none;
  width: 9px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M1.5 10.5V1M1.8 1L8 3.4L1.8 5.8Z' fill='%23FF6B2C' stroke='%23163A25' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fc-bg-turf .fc-proofchip,
.fc-proofchip--dark { background: rgba(255, 248, 230, 0.08); border-color: var(--fc-chalk); color: var(--fc-chalk); }

/* ---------- "Sample" tag on anything drawn (never a real lawn client) ---------- */
.fc-sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 7px;
  border: var(--fc-line);
  border-radius: 5px 12px 12px 5px;
  background: var(--fc-sun);
  color: var(--fc-ink);
  font-family: var(--fc-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--fc-ink);
  transform: rotate(-4deg);
}
.fc-sample::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-white);
}
.fc-sample--pin { position: absolute; top: -12px; right: 14px; z-index: 6; }

/* ---------- label-maker tape and masking tape (say whose thing this is) ---------- */
.fc-labeltape {
  display: inline-block;
  padding: 5px 12px 6px;
  border-radius: 3px;
  background: var(--fc-label);
  color: var(--fc-label-ink);
  font-family: var(--fc-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08), 2px 2px 0 rgba(22, 58, 37, 0.35);
  transform: rotate(-1deg);
}
.fc-masking {
  display: inline-block;
  padding: 6px 16px 7px;
  background: rgba(244, 230, 190, 0.95);
  color: var(--fc-ink);
  font-family: var(--fc-hand);
  font-size: 1rem;
  line-height: 1.2;
  box-shadow: 1px 2px 0 rgba(22, 58, 37, 0.18);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 8%, 3px 30%, 0 52%, 4px 76%, 0 100%, 100% 100%, calc(100% - 4px) 72%, 100% 48%, calc(100% - 3px) 24%, 100% 0);
}

/* ---------- rubber stamps ---------- */
.fc-stamp {
  display: inline-block;
  padding: 7px 14px 6px;
  border: 3.5px solid var(--fc-orange-ink);
  border-radius: 9px;
  color: var(--fc-orange-ink);
  font-family: var(--fc-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-7deg);
  -webkit-mask: url("../assets/lawn/paint.svg") 0 0 / 150px;
  mask: url("../assets/lawn/paint.svg") 0 0 / 150px;
  transition: transform 0.35s var(--fc-bounce), opacity 0.2s;
}
.fc-stamp--no { border-style: dashed; border-color: var(--fc-gray-1); color: var(--fc-ink-3); transform: rotate(3deg); }
.fc-stamp--inc { border-color: var(--fc-green-ink); color: var(--fc-green-ink); transform: rotate(-4deg); }
.fc-stamp--proof { border-color: var(--fc-red-ink); color: var(--fc-red-ink); font-size: 0.78rem; transform: rotate(-5deg); }
.fc-stamp--sm { padding: 4px 9px 3px; border-width: 2.5px; font-size: 0.72rem; -webkit-mask: none; mask: none; }
/* color only, no meaning attached (--proof stays the one red that means "Pawn Leads result") */
.fc-stamp--red { border-color: var(--fc-red-ink); color: var(--fc-red-ink); }
.fc-stamp--green { border-color: var(--fc-green-ink); color: var(--fc-green-ink); }
.fc-stamp--gray { border-color: var(--fc-gray-1); color: var(--fc-ink-3); }
.fc-stamp--chalk { border-color: var(--fc-sun); color: var(--fc-sun); }

/* ==========================================================================
   11. Kit: yard signs, seed packets, door hangers, caution tape
   ========================================================================== */
/* ---------- caution-tape marquee (pause button: site.js; WCAG 2.2.2) ---------- */
.fc-tape { position: relative; z-index: 3; padding: 18px 0; }
.fc-tape__band {
  position: relative;
  left: -3vw;
  width: 106vw;
  padding: 16px 0;
  border-block: var(--fc-line);
  background-color: var(--fc-sun);
  background-image:
    repeating-linear-gradient(-45deg, var(--fc-ink) 0 9px, transparent 9px 18px),
    repeating-linear-gradient(-45deg, var(--fc-ink) 0 9px, transparent 9px 18px);
  background-size: 100% 7px, 100% 7px;
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x;
  box-shadow: 0 5px 0 rgba(22, 58, 37, 0.9);
  transform: rotate(-2deg);
  overflow: hidden;
}
.fc-tape--flat .fc-tape__band { transform: rotate(1.2deg); }
.fc-tape__track { display: flex; width: max-content; animation: fc-marquee 64s linear infinite; }
.fc-tape__group { display: flex; align-items: center; gap: 18px; padding-right: 18px; }
.fc-tape__group span {
  font-family: var(--fc-display);
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fc-tape__group svg { flex: none; width: 26px; height: 26px; }
.fc-tape:hover .fc-tape__track,
.fc-tape.is-paused .fc-tape__track { animation-play-state: paused; }
@keyframes fc-marquee { to { transform: translateX(-50%); } }
/* the pause button sits on the paper under the tape's high end, never on the words */
.fc-tape__toggle,
.fc-pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  color: var(--fc-ink);
  cursor: pointer;
}
.fc-tape__toggle { position: absolute; top: calc(100% - 14px); right: var(--fc-gutter); z-index: 2; }
/* a button a script hides (motion off, nothing to pause) is gone, not a dead 44px control */
.fc-tape__toggle[hidden],
.fc-pause[hidden] { display: none; }
.fc-pause { flex: none; }
.fc-tape__toggle svg,
.fc-pause svg { width: 14px; height: 14px; fill: currentColor; }
.fc-tape__play,
.fc-tape.is-paused .fc-tape__pause,
.is-paused .fc-pause .fc-tape__pause { display: none; }
.fc-tape.is-paused .fc-tape__play,
.is-paused .fc-pause .fc-tape__play { display: block; }
@media (max-width: 600px) {
  .fc-tape__band { padding: 12px 0; }
  .fc-tape__group span { font-size: 1rem; }
}

/* ---------- yard signs on wire stakes (stats; one sign can carry a price) ---------- */
.fc-signs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
  align-items: stretch;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 1120px;
}
@media (min-width: 900px) {
  .fc-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
  .fc-signs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
}
.fc-sign {
  --tilt: -4deg;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 70px;
  transform: rotate(var(--tilt));
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--fc-bounce);
}
.fc-sign:nth-child(even) { --tilt: 3deg; }
@media (max-width: 600px) {
  /* two narrow signs a row: a label wraps to 3 lines, so the sign keeps the sheet budget */
  .fc-sign { --tilt: calc(var(--fc-tilt-sheet) * -1); }
  .fc-sign:nth-child(even) { --tilt: var(--fc-tilt-sheet); }
}
@media (max-width: 899px) {
  .fc-signs--3 > .fc-sign:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}
/* .fc-signs--lawn plants the whole row in a strip of striped lawn, so the stakes land in grass */
.fc-signs--lawn { position: relative; padding-bottom: 18px; }
.fc-signs--lawn::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0;
  z-index: 0;
  height: 30px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-stripes);
}
@media (max-width: 899px) {
  /* two rows: each row gets its own strip */
  .fc-signs--lawn { row-gap: 40px; }
  .fc-signs--lawn > .fc-sign::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -8px;
    z-index: 0;
    height: 22px;
    border: var(--fc-line);
    border-radius: 999px;
    background: var(--fc-stripes);
    transform: rotate(calc(var(--tilt) * -1));
  }
  .fc-signs--lawn::after { display: none; }
}
.fc-signs--lawn .fc-sign__stakes { z-index: 0; bottom: -10px; }
.fc-signs--lawn::after { z-index: 1; }
@media (min-width: 900px) {
  /* a fan, so every gap between neighbours is the same */
  .fc-signs > .fc-sign:nth-child(2) { --tilt: -1.4deg; }
  .fc-signs > .fc-sign:nth-child(3) { --tilt: 1.4deg; }
  .fc-signs > .fc-sign:nth-child(4) { --tilt: 4deg; }
}
.fc-sign:hover { transform: rotate(0deg) translateY(-4px); }
.fc-sign__board {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: center;
  flex: 1;
  padding: 22px 14px 18px;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background-color: var(--sign-bg, var(--fc-white));
  background-image: repeating-linear-gradient(0deg, rgba(22, 58, 37, 0.045) 0 1px, transparent 1px 6px);
  box-shadow: var(--fc-chunk);
  color: var(--sign-ink, var(--fc-ink));
  text-align: center;
}
.fc-sign__num {
  font-family: var(--fc-display);
  font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  color: var(--sign-num, inherit);
}
.fc-sign__label { max-width: 13em; font-size: 1rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.fc-sign small {
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sign-small, var(--fc-ink-2));
}
.fc-sign__stakes {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: -30px;
  height: 120px;
  border-inline: 3px solid var(--fc-ink);
}
.fc-sign--orange { --sign-bg: var(--fc-orange); --sign-ink: var(--fc-ink-deep); --sign-small: var(--fc-ink-deep); }
.fc-sign--sun { --sign-bg: var(--fc-sun); --sign-small: var(--fc-ink); }
.fc-sign--white { --sign-bg: var(--fc-white); --sign-num: var(--fc-orange-ink); }
.fc-sign--turf { --sign-bg: var(--fc-ink); --sign-ink: var(--fc-chalk); --sign-num: var(--fc-sun); --sign-small: var(--fc-chalk-3); }
.fc-sign--turf .fc-sign__board { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 20px, transparent 20px 40px); }
/* one big sign (a price, a rule) planted in a strip of striped lawn, with a rider below */
.fc-sign.fc-sign--solo { --tilt: -2deg; width: min(100%, 420px); margin-inline: auto; padding-bottom: 96px; }
.fc-sign--solo .fc-sign__board { padding: 30px 22px 26px; }
.fc-sign--solo .fc-sign__num { font-size: clamp(3rem, 2rem + 3vw, 4.6rem); }
.fc-sign--solo .fc-sign__stakes { left: 30%; right: 30%; height: 140px; bottom: -8px; }
.fc-sign__rider {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 2;
  padding: 6px 14px 7px;
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  transform: translateX(-50%) rotate(2deg);
}
.fc-sign__lawn {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -12px;
  z-index: 0;
  height: 26px;
  border: var(--fc-line);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 18px, var(--fc-lawn-b) 18px 36px);
}
@media (min-width: 900px) and (max-width: 1099px) {
  /* four signs a row on a narrow desktop: room for a label in two lines (house rule 1) */
  .fc-signs:not(.fc-signs--3) .fc-sign__board { padding-inline: 8px; }
  .fc-signs:not(.fc-signs--3) .fc-sign__label { font-size: 0.875rem; }
}
@media (max-width: 600px) {
  .fc-sign { padding-bottom: 50px; }
  .fc-sign__board { padding: 16px 8px 14px; gap: 4px; }
  .fc-sign__label { font-size: 0.875rem; }
  .fc-sign small { font-size: 0.64rem; letter-spacing: 0.1em; }
  .fc-sign--solo { padding-bottom: 88px; }
}

/* ---------- seed packets (steps) ---------- */
.fc-packets {
  display: grid;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .fc-packets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
  .fc-packets > .fc-packet:nth-child(3n + 2) { margin-top: 28px; }
  .fc-packets--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fc-packets--4 > .fc-packet:nth-child(3n + 2) { margin-top: 0; }
  .fc-packets--4 > .fc-packet:nth-child(even) { margin-top: 28px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .fc-packets { max-width: 460px; }
}
.fc-packet {
  --tilt: calc(var(--fc-tilt-sheet) * -1);
  --pk: var(--fc-sun);
  position: relative;
  transform: rotate(var(--tilt));
  transition: transform 0.45s var(--fc-bounce);
  filter: var(--fc-outline) drop-shadow(4px 5px 0 var(--fc-ink));
}
.fc-packet:nth-child(3n + 2) { --tilt: calc(var(--fc-tilt-sheet) * 0.8); --pk: var(--fc-leaf); }
.fc-packet:nth-child(3n + 3) { --tilt: calc(var(--fc-tilt-sheet) * -0.5); --pk: var(--fc-peach); }
/* --fan: the homepage's approved desktop fan (house rule 1). Only index.html uses it; any
   other page keeps its packets within the sheet budget. */
@media (min-width: 601px) {
  .fc-packets--fan > .fc-packet { --tilt: -2deg; }
  .fc-packets--fan > .fc-packet:nth-child(3n + 2) { --tilt: 1.6deg; }
  .fc-packets--fan > .fc-packet:nth-child(3n + 3) { --tilt: -1deg; }
}
.fc-packet.fc-packet--sun { --pk: var(--fc-sun); }
.fc-packet.fc-packet--leaf { --pk: var(--fc-leaf); }
.fc-packet.fc-packet--peach { --pk: var(--fc-peach); }
.fc-packet.fc-packet--white { --pk: var(--fc-white); }
.fc-packet:hover { transform: rotate(0deg) translateY(-6px); }
.fc-packet__face {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  height: 100%;
  padding: 36px 20px 26px;
  border-radius: 0 0 16px 16px;
  background: var(--pk);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 14px 7px repeat-x,
    linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 14px 7px repeat-x,
    linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
}
.fc-packet__face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  border-bottom: 2px solid var(--fc-ink);
  background: repeating-linear-gradient(90deg, rgba(22, 58, 37, 0.2) 0 2px, transparent 2px 7px);
}
.fc-packet__face::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 0;
  right: 0;
  border-top: 2px dashed rgba(22, 58, 37, 0.45);
}
.fc-packet__no {
  position: absolute;
  top: 38px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 58px;
  height: 58px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  font-family: var(--fc-display);
  font-size: 1.7rem;
  line-height: 0.9;
  transform: rotate(-9deg);
}
.fc-packet__no small {
  font-family: var(--fc-body);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fc-packet__art {
  margin: 6px -20px 6px;
  overflow: hidden;
  border-block: var(--fc-line);
  background: var(--fc-white);
}
.fc-packet__art svg,
.fc-packet__art img { display: block; width: 100%; height: auto; }
/* no art? the number sits in the flow instead */
.fc-packet__face:not(:has(.fc-packet__art)) { padding-top: 44px; }
.fc-packet__face:not(:has(.fc-packet__art)) .fc-packet__no { position: static; margin-bottom: 4px; }
.fc-packet h3 { font-weight: 400;
  font-family: var(--fc-display);
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem);
  line-height: 1.1;
  text-wrap: balance;
}
.fc-packet p { font-size: 1rem; line-height: 1.55; color: var(--fc-ink); }
.fc-packet .fc-fall use { transform-box: fill-box; transform-origin: center; }
.fc-packet:hover .fc-fall use { animation: fc-twinkle 0.9s var(--fc-bounce); }
.fc-packet .fc-sun { transform-box: fill-box; transform-origin: center; }
.fc-packet:hover .fc-sun { animation: fc-spin 6s linear infinite; }
.fc-packet .fc-tray { transform-box: fill-box; transform-origin: 50% 100%; }
.fc-packet:hover .fc-tray { animation: fc-sway 1s ease-in-out; }
.fc-packet .fc-cycle { transform-box: fill-box; transform-origin: center; }
@keyframes fc-twinkle { 50% { transform: translateY(6px) scale(1.25) rotate(20deg); } }
@keyframes fc-spin { to { transform: rotate(360deg); } }
@keyframes fc-sway { 30% { transform: skewX(-6deg); } 65% { transform: skewX(4deg); } }
@media (max-width: 600px) {
  /* tilt the object, not the paragraph: almost level on phones, shorter art windows */
  .fc-packet { --tilt: -0.6deg; }
  .fc-packet:nth-child(3n + 2) { --tilt: 0.6deg; }
  .fc-packet:nth-child(3n + 3) { --tilt: -0.4deg; }
  .fc-packet__face { padding-bottom: 22px; }
  .fc-packet__art svg { height: 156px; }
}

/* ---------- door hangers on a rail ---------- */
.fc-hangers { position: relative; display: grid; gap: 34px; max-width: 1160px; margin: 0 auto; }
@media (min-width: 900px) {
  .fc-hangers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
  .fc-hangers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
.fc-rail { display: none; }
@media (min-width: 900px) {
  .fc-rail {
    position: absolute;
    top: 54px;
    left: -3%;
    right: -3%;
    display: block;
    height: 18px;
    border: var(--fc-line);
    border-radius: 999px;
    background: linear-gradient(var(--fc-rail-a), var(--fc-rail-b));
    box-shadow: 0 4px 0 rgba(22, 58, 37, 0.25);
  }
}
.fc-hanger {
  --tilt: calc(var(--fc-tilt-sheet) * -1);
  --hg: var(--fc-white);
  --hg-ink: var(--fc-ink);
  position: relative;
  padding-top: 30px;
  transform: rotate(var(--tilt));
  transform-origin: 50% 63px;
  transition: transform 0.6s var(--fc-bounce);
}
.fc-hanger:nth-of-type(3n + 2) { --tilt: calc(var(--fc-tilt-sheet) * 0.8); --hg: var(--fc-orange); --hg-ink: var(--fc-ink-deep); }   /* 5.5:1 */
.fc-hanger:nth-of-type(3n + 3) { --tilt: calc(var(--fc-tilt-sheet) * -0.6); --hg: var(--fc-ink); --hg-ink: var(--fc-chalk); }
/* --fan: the homepage's approved desktop fan (house rule 1), index.html only */
@media (min-width: 601px) {
  .fc-hangers--fan .fc-hanger { --tilt: -2.5deg; }
  .fc-hangers--fan .fc-hanger:nth-of-type(3n + 2) { --tilt: 2deg; }
  .fc-hangers--fan .fc-hanger:nth-of-type(3n + 3) { --tilt: -1.5deg; }
}
.fc-hanger.fc-hanger--white { --hg: var(--fc-white); --hg-ink: var(--fc-ink); }
.fc-hanger.fc-hanger--orange { --hg: var(--fc-orange); --hg-ink: var(--fc-ink-deep); }
.fc-hanger.fc-hanger--sun { --hg: var(--fc-sun); --hg-ink: var(--fc-ink); }
.fc-hanger.fc-hanger--turf { --hg: var(--fc-ink); --hg-ink: var(--fc-chalk); }
.fc-hanger:hover { transform: rotate(0deg); }
.fc-hanger__knob {
  position: absolute;
  top: 50px;
  left: 50%;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fc-brass-hi), var(--fc-brass) 60%, var(--fc-brass-lo));
}
.fc-hanger__card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  height: 100%;
  padding: 66px 22px 26px;
  border: var(--fc-line);
  border-radius: 30px 30px var(--fc-r2) var(--fc-r2);
  background: var(--hg);
  box-shadow: var(--fc-chunk-lg);
  color: var(--hg-ink);
}
.fc-hanger:nth-of-type(3n + 3):not(.fc-hanger--white):not(.fc-hanger--orange):not(.fc-hanger--sun) .fc-hanger__card,
.fc-hanger--turf .fc-hanger__card {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 22px, transparent 22px 44px);
  box-shadow: 6px 6px 0 rgba(22, 58, 37, 0.45);
}
.fc-hanger:nth-of-type(3n + 3) .fc-hanger__art,
.fc-hanger--turf .fc-hanger__art { border-color: var(--fc-chalk); }
.fc-hanger__card::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-hole, var(--fc-paper));
}
.fc-hanger__card::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 6px;
  height: 16px;
  margin-left: -3px;
  border-inline: var(--fc-line);
  background: var(--fc-hole, var(--fc-paper));
}
.fc-bg-mint .fc-hanger { --fc-hole: var(--fc-mint); }
@media (min-width: 900px) {
  .fc-hangers:has(.fc-rail) .fc-hanger__card::before,
  .fc-hangers:has(.fc-rail) .fc-hanger__card::after { background: var(--fc-rail-c); }
}
.fc-hanger__art { overflow: hidden; border: var(--fc-line); border-radius: 14px; background: var(--fc-white); }
.fc-hanger__art svg { display: block; width: 100%; height: auto; }
.fc-hanger h3 { font-weight: 400; font-family: var(--fc-display); font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem); line-height: 1.12; text-wrap: balance; }
.fc-hanger p { font-size: 1rem; line-height: 1.55; color: inherit; }
.fc-hanger__stub {
  margin: 6px -22px -26px;
  padding: 16px 22px 20px;
  border-top: 2px dashed currentColor;
  border-radius: 0 0 var(--fc-r2) var(--fc-r2);
}
@media (max-width: 600px) {
  .fc-hanger { --tilt: -0.6deg; }
  .fc-hanger:nth-of-type(3n + 2) { --tilt: 0.6deg; }
  .fc-hanger:nth-of-type(3n + 3) { --tilt: -0.4deg; }
  .fc-hanger__art svg { height: 112px; }
  .fc-hanger__card { padding: 64px 18px 22px; }
  .fc-hanger__stub { margin-inline: -18px; margin-bottom: -22px; padding-inline: 18px; }
}

/* ==========================================================================
   12. Kit: the carbon-copy work order, the estimate, the package estimates
   ========================================================================== */
.fc-order { position: relative; max-width: 880px; margin: 0 auto; }
.fc-order__copy {
  position: absolute;
  inset: 0 0 8px;
  border: var(--fc-line);
  border-radius: 6px;
}
.fc-order__copy--pink { background: var(--fc-carbon-pink); transform: translate(16px, 14px) rotate(1.8deg); }
.fc-order__copy--yellow { background: var(--fc-carbon-yellow); transform: translate(8px, 7px) rotate(0.9deg); }
.fc-order__sheet {
  position: relative;
  filter: var(--fc-outline) drop-shadow(5px 5px 0 rgba(22, 58, 37, 0.3));
}
.fc-order__paper {
  position: relative;
  padding: 34px clamp(18px, 4vw, 46px) 44px;
  border-radius: 5px 5px 0 0;
  background-color: var(--fc-sheet);
  background-image: linear-gradient(90deg, transparent 0 58px, rgba(255, 107, 44, 0.28) 58px 60px, transparent 60px);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
}
.fc-order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 0 0 14px 44px;
  border-bottom: 4px double var(--fc-ink);
}
.fc-order__title {
  font-family: var(--fc-display);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fc-order__no {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--fc-red-ink);
  font-variant-numeric: tabular-nums;
}
.fc-order__rows { margin: 0; padding: 0; list-style: none; }
.fc-order__row {
  display: grid;
  grid-template-columns: 40px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.18);
}
.fc-order__box {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--fc-ink);
  border-radius: 6px;
  background: var(--fc-pure);
}
.fc-order__box svg {
  position: absolute;
  left: -2px;
  top: -12px;
  width: 44px;
  height: 44px;
  overflow: visible;
}
.fc-order__box path {
  fill: none;
  stroke: var(--fc-clover-2);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s var(--fc-ease) 0.5s;
}
html.reveal-on .fc-order.reveal:not(.in) .fc-order__box path { stroke-dashoffset: 30; }
.fc-order__num { font-family: var(--fc-display); font-size: 1.6rem; line-height: 1; }
.fc-order__job h3 { font-weight: 400; font-family: var(--fc-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.65rem); line-height: 1.12; text-wrap: balance; }
.fc-order__job p { margin-top: 4px; color: var(--fc-ink-2); }
.fc-order__row:nth-child(even) .fc-stamp { transform: rotate(5deg); }
html.reveal-on .fc-order.reveal:not(.in) .fc-order__row:not(.fc-order__row--no) .fc-stamp { opacity: 0; transform: scale(1.7) rotate(-7deg); }
.fc-order__row--no .fc-order__num,
.fc-order__row--no .fc-order__job h3 { color: var(--fc-ink-3); }
.fc-order__row--no .fc-order__job h3 { font-family: var(--fc-body); font-weight: 700; }
.fc-order__row--no .fc-order__box { border-color: var(--fc-gray-2); border-style: dashed; }
.fc-order__row.fc-order__row--no .fc-stamp { transform: rotate(3deg); }
.fc-order__notes {
  --rule: 34px;
  --rule-top: 10px;
  margin-top: 24px;
  padding: var(--rule-top) 20px 10px;
  border: 2px dashed rgba(22, 58, 37, 0.35);
  border-radius: 12px;
  background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(62, 155, 79, 0.22) calc(var(--rule) - 1px) var(--rule)) 0 var(--rule-top);
}
.fc-order__notes p { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; line-height: var(--rule); }
@media (max-width: 640px) {
  .fc-order__paper { background-image: none; }
  .fc-order__head { padding-left: 0; }
  .fc-order__row {
    grid-template-columns: 34px 22px minmax(0, 1fr);
    grid-template-areas: "box num job" ". . stamp";
    gap: 10px 10px;
    align-items: start;
  }
  .fc-order__box { grid-area: box; }
  .fc-order__num { grid-area: num; padding-top: 3px; font-size: 1.35rem; }
  .fc-order__job { grid-area: job; }
  .fc-order__row .fc-stamp { grid-area: stamp; justify-self: start; }
  .fc-order__notes { --rule: 32px; --rule-top: 6px; padding-inline: 14px; }
}

/* ---------- the estimate: fields, line items with dotted leaders, a boxed total ---------- */
.fc-order__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 16px 0 6px;
  padding: 0 0 0 44px;
}
.fc-order__fields div { display: flex; gap: 8px; align-items: baseline; }
.fc-order__fields dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }
.fc-order__fields dd { margin: 0; font-family: var(--fc-hand); font-size: 1.1rem; color: var(--fc-ballpoint); }
.fc-lines { margin: 0; padding: 0; list-style: none; }
.fc-line {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.14);
}
.fc-line__item { flex: 0 1 auto; font-weight: 600; line-height: 1.4; }
.fc-line__item strong, .fc-estimate__spend strong { font-weight: 800; }
.fc-line__item small { display: block; font-size: 0.85rem; font-weight: 500; color: var(--fc-ink-2); }
.fc-line__dots { flex: 1 1 18px; min-width: 18px; margin-bottom: 0.4em; border-bottom: 3px dotted rgba(22, 58, 37, 0.4); }
.fc-line__price { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-line--no .fc-line__item,
.fc-line--no .fc-line__price { color: var(--fc-ink-3); }
.fc-line--no .fc-line__item { text-decoration: line-through; text-decoration-color: rgba(86, 100, 91, 0.6); text-decoration-thickness: 2px; }
.fc-line--star .fc-line__item::before { content: "\2605"; margin-right: 6px; color: var(--fc-orange-ink); }
.fc-order--estimate .fc-lines { padding-left: 44px; }
.fc-order__total {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 0 44px;
  padding: 12px 16px;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-sun-2);
  font-weight: 800;
}
.fc-order__total b { font-family: var(--fc-display); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.fc-order__total .fc-line__dots { margin-bottom: 0.5em; }
.fc-order__stamp { position: absolute; top: 84px; right: clamp(16px, 4vw, 46px); }
@media (max-width: 640px) {
  .fc-order__fields,
  .fc-order--estimate .fc-lines { padding-left: 0; }
  .fc-order__total { margin-left: 0; }
  .fc-order__stamp { position: static; display: inline-block; margin-top: 18px; }
}

/* ---------- three package estimates side by side ---------- */
.fc-estimates {
  display: grid;
  gap: 34px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 980px) {
  .fc-estimates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
}
@media (min-width: 640px) and (max-width: 979px) { .fc-estimates { max-width: 520px; } }
.fc-estimate {
  --tilt: -0.8deg;
  position: relative;
  display: flex;
  flex-direction: column;
  transform: rotate(var(--tilt));
}
.fc-estimate:nth-child(2) { --tilt: 0.6deg; }
.fc-estimate:nth-child(3) { --tilt: -0.4deg; }
.fc-estimate::before {
  content: "";
  position: absolute;
  inset: 10px -8px -6px 8px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-carbon-pink);
  transform: rotate(1.4deg);
}
.fc-estimate__sheet { position: relative; flex: 1; display: flex; filter: var(--fc-outline) drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.3)); }
.fc-estimate__paper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px clamp(18px, 2vw, 26px) 40px;
  border-radius: 5px 5px 0 0;
  background: var(--fc-sheet);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
}
.fc-estimate__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 4px double var(--fc-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fc-estimate__top span:last-child { color: var(--fc-red-ink); }
.fc-estimate__name { font-weight: 400; font-family: var(--fc-display); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.05; }
.fc-estimate__price { display: flex; align-items: baseline; gap: 6px; }
.fc-estimate__price b { font-family: var(--fc-display); font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 400; line-height: 1; }
.fc-estimate__price span { font-weight: 700; color: inherit; }
.fc-estimate__spend {
  padding: 8px 12px;
  border: 1.5px dashed rgba(22, 58, 37, 0.4);
  border-radius: 10px;
  background: var(--fc-mint);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.fc-estimate .fc-lines { flex: 1; }
.fc-estimate .fc-line { padding: 9px 0; font-size: 0.95rem; }
.fc-estimate .btn { align-self: flex-start; margin-top: 6px; }
.fc-estimate__ribbon {
  position: absolute;
  top: -16px;
  right: 16px;
  z-index: 4;
  padding: 7px 14px 8px;
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-sun);
  box-shadow: 3px 3px 0 var(--fc-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(3deg);
}
.fc-estimate--pick .fc-estimate__paper { background: var(--fc-sheet-warm); }
@media (min-width: 980px) {
  .fc-estimate--pick { margin-top: -14px; }
}

/* ==========================================================================
   13. Kit: the parts diagram + spec sheet (the services map)
   The drawing is injected by js/site.js into figure[data-parts-diagram]. Parts:
   01 Facebook Ads, 02 Google Ads, 03 Google Reviews, 04 SEO Blogs, 05 Facebook Marketplace,
   06 Websites, 07 VIP Program, 08 Text Marketing, 09 Email Marketing Machine, 10 Shmo Cards,
   11 Call Recording. data-light="01" (or a page slug) lights one part for good.
   ========================================================================== */
.fc-partsmap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
.fc-partsmap__fig { width: 100%; max-width: 860px; margin: 0 auto; }
@media (min-width: 1000px) {
  .fc-partsmap {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(36px, 4vw, 60px);
  }
  .fc-partsmap__fig {
    position: sticky;
    top: calc(var(--fc-header-h) + 30px);
    max-width: none;
    margin: 0;
  }
}
.fc-diagram {
  position: relative;
  padding: 22px 18px 34px;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background-color: var(--fc-white);
  background-image:
    linear-gradient(rgba(62, 155, 79, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 155, 79, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(62, 155, 79, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 155, 79, 0.07) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  box-shadow: var(--fc-chunk-lg);
}
/* hold the drawing's space until site.js draws it */
.fc-diagram[data-parts-diagram]:not(:has(svg))::before { content: ""; display: block; aspect-ratio: 560 / 410; }
.fc-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.fc-diagram__cap {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-ink-2);
}
.fc-diagram__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--fc-ink);
  opacity: 0.5;
}
.fc-diagram__corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.fc-diagram__corner--br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.fc-d-part { transition: opacity 0.25s; }
.fc-diagram.has-on .fc-d-part:not(.is-on) { opacity: 0.32; }
.fc-d-tread { transform-box: fill-box; transform-origin: center; }
.fc-diagram:hover .fc-d-tread { animation: fc-spin 3s linear infinite; }
.fc-d-beam { opacity: 0.9; animation: fc-blink 3.2s ease-in-out 2; }
@keyframes fc-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.fc-puff {
  fill: var(--fc-smoke);
  stroke: var(--fc-ink);
  stroke-width: 1.6;
  paint-order: stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: fc-puff 3.6s ease-out 2;
}
.fc-puff:nth-child(2) { animation-delay: 1.2s; }
.fc-puff:nth-child(3) { animation-delay: 2.4s; }
@keyframes fc-puff {
  0% { opacity: 0; transform: translate(0, 18px) scale(0.4); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -16px) scale(1.25); }
}
.fc-leaders path {
  fill: none;
  stroke: var(--fc-ink);
  stroke-width: 1.8;
  stroke-dasharray: 0.1 5;
  stroke-linecap: round;
  transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s;
}
.fc-leaders path.is-on { stroke: var(--fc-orange-ink); stroke-width: 3; }
.fc-pin { cursor: pointer; transition: opacity 0.2s; }
.fc-pin circle:not(.fc-pin__halo) { stroke: var(--fc-ink); stroke-width: 2.4; }
.fc-pin text {
  font-family: var(--fc-body);
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
}
.fc-pin--job1 circle { fill: var(--fc-orange); }
.fc-pin--job1 text { fill: var(--fc-ink-deep); }
.fc-pin--job2 circle { fill: var(--fc-clover-2); }
.fc-pin--job2 text { fill: var(--fc-pure); }
.fc-pin--boost circle { fill: var(--fc-sun); }
.fc-pin--boost text { fill: var(--fc-ink); }
.fc-pin .fc-pin__halo { fill: none; stroke: var(--fc-orange); stroke-width: 3; opacity: 0; }
.fc-pin.is-on .fc-pin__halo { opacity: 1; animation: fc-halo 1.2s ease-in-out infinite; }
.fc-diagram.has-on .fc-pin:not(.is-on),
.fc-diagram.has-on .fc-leaders path:not(.is-on) { opacity: 0.3; }
@keyframes fc-halo { 50% { stroke-width: 6; opacity: 0.45; } }
/* one lit part, the rest of the pins hidden: for a service page's "this is your part" moment */
.fc-diagram--solo .fc-pin:not(.is-on),
.fc-diagram--solo .fc-leaders path:not(.is-on) { display: none; }
.fc-diagram--solo .fc-pin { cursor: default; }
.fc-diagram__part {
  position: absolute;
  right: 16px;
  bottom: 10px;
  padding: 5px 12px 6px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-orange);
  color: var(--fc-ink-deep);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--fc-ink);
}

.fc-spec { display: grid; gap: 34px; }
.fc-spec__group { --tab: var(--fc-orange); --tab-ink: var(--fc-ink-deep); }
.fc-spec__group--job2 { --tab: var(--fc-clover-2); --tab-ink: var(--fc-pure); }
.fc-spec__group--boost { --tab: var(--fc-sun); --tab-ink: var(--fc-ink); }
.fc-spec__tab { font-weight: 400;
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: -2px;
  padding: 9px 18px 8px;
  border: var(--fc-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--tab);
  color: var(--tab-ink);
  font-family: var(--fc-display);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
  line-height: 1.2;
  text-wrap: balance;
}
.fc-parts {
  margin: 0;
  padding: 4px clamp(16px, 2.4vw, 26px);
  list-style: none;
  border: var(--fc-line);
  border-radius: 0 var(--fc-r2) var(--fc-r2) var(--fc-r2);
  background-color: var(--fc-white);
  background-image: linear-gradient(90deg, var(--tab) 0 6px, transparent 6px);
  box-shadow: var(--fc-chunk);
}
.fc-part { padding: 20px 0; border-bottom: 2px dashed rgba(22, 58, 37, 0.16); }
.fc-part:last-child { border-bottom: 0; }
.fc-part__head { display: flex; align-items: center; gap: 10px; }
.fc-part h4 { font-weight: 400; font-family: var(--fc-display); font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.15; }
/* 44px tall tap targets without moving the rows (inline padding does not change the line box);
   the sun highlight stays on the words (placed in the content box) */
.fc-part h4 a {
  padding-block: 9px;
  text-decoration: none;
  background: linear-gradient(var(--fc-sun), var(--fc-sun)) 0 88% / 0% 0.38em no-repeat;
  background-origin: content-box;
  transition: background-size 0.3s var(--fc-ease);
}
.fc-part h4 a:hover,
.fc-part.is-on h4 a { background-size: 100% 0.38em; }
.fc-part__lead { flex: 1; min-width: 18px; height: 0; border-bottom: 3px dotted rgba(22, 58, 37, 0.4); }
.fc-part__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--tab);
  color: var(--tab-ink);
  font-size: 0.85rem;
  font-weight: 800;
  transition: transform 0.3s var(--fc-bounce);
}
.fc-part.is-on .fc-part__no { transform: scale(1.15) rotate(-8deg); }
.fc-part p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--fc-ink-2); }
.fc-part .fc-part__feeds {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 12px 6px;
  border: 1.5px solid rgba(22, 58, 37, 0.3);
  border-radius: 10px;
  background: var(--fc-mint);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fc-ink);
}
.fc-part__feeds b { margin-right: 4px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 600px) {
  .fc-diagram { padding: 14px 10px 28px; }
  .fc-pin text { font-size: 15px; }
  .fc-part p { font-size: 0.975rem; }
  .fc-spec__tab { max-width: calc(100% - 28px); font-size: 0.95rem; }
  .fc-parts { padding-inline: 14px 12px; }
  .fc-part { padding: 16px 0; }
}

/* ==========================================================================
   14. Kit: clipboards, the crew roster, the route sheet, checklists
   ========================================================================== */
/* ---------- a clipboard: board, metal clip (sprite #fc-clip), paper ---------- */
.fc-board {
  position: relative;
  width: min(100%, 560px);
  padding: 46px 20px 22px;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-bg-board);
  background-color: var(--fc-board);
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 240, 215, 0.12);
  transform: rotate(-1.6deg);
}
.fc-board--right { transform: rotate(1.4deg); }
/* its paper turns back, so the two tilts never stack past the sheet budget (1.4 - 0.6 = 0.8deg) */
@media (min-width: 601px) { .fc-board--right .fc-board__paper { transform: rotate(-0.6deg); } }
.fc-board--wide { width: min(100%, 820px); }
.fc-board__clip {
  position: absolute;
  top: -28px;
  left: 50%;
  z-index: 3;
  width: 188px;
  height: 68px;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 0 rgba(22, 58, 37, 0.3));
}
.fc-board__paper {
  position: relative;
  padding: 30px clamp(14px, 2.6vw, 26px) 22px;
  border: var(--fc-line);
  border-radius: 8px;
  background-color: var(--fc-white);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.25);
  transform: rotate(1.1deg);
}
.fc-board__paper--grid {
  background-image:
    linear-gradient(rgba(62, 155, 79, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 155, 79, 0.1) 1px, transparent 1px);
  background-size: 16px 16px;
}
.fc-board__paper--ruled { background-image: repeating-linear-gradient(transparent 0 31px, rgba(62, 155, 79, 0.14) 31px 32px); }
/* a coffee ring on the paper, for luck */
.fc-ring {
  position: absolute;
  top: 6px;
  right: 16px;
  width: 58px;
  height: 56px;
  border: 4px solid rgba(122, 75, 42, 0.12);
  border-radius: 47% 53% 50% 46% / 52% 46% 54% 48%;
  transform: rotate(24deg);
  pointer-events: none;
}
.fc-ring::after {
  content: "";
  position: absolute;
  inset: 3px -5px -4px 4px;
  border: 2px solid rgba(122, 75, 42, 0.08);
  border-radius: 52% 46% 49% 53% / 47% 53% 47% 53%;
}
@media (max-width: 600px) {
  .fc-board { padding: 38px 10px 12px; border-radius: 22px; transform: rotate(-1deg); }
  .fc-board__clip { top: -24px; width: 150px; height: 54px; }
  .fc-board__paper { padding: 26px 14px 16px; transform: rotate(0.6deg); }
  .fc-ring { width: 40px; height: 39px; border-width: 3px; }
}

/* ---------- the crew roster: snapshots clipped to a clipboard ---------- */
.fc-roster {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 52px clamp(12px, 2.4vw, 28px) clamp(14px, 2.4vw, 28px);
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-bg-board);
  background-color: var(--fc-board);
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 240, 215, 0.12);
  transform: rotate(0.6deg);
}
.fc-roster__clip {
  position: absolute;
  top: -32px;
  left: 50%;
  z-index: 3;
  width: 230px;
  height: 84px;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 0 rgba(22, 58, 37, 0.3));
}
.fc-roster__paper {
  padding: clamp(40px, 4.4vw, 56px) clamp(14px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px);
  border: var(--fc-line);
  border-radius: 8px;
  background-color: var(--fc-white);
  background-image:
    linear-gradient(90deg, transparent 0 34px, rgba(255, 107, 44, 0.3) 34px 36px, transparent 36px),
    repeating-linear-gradient(transparent 0 31px, rgba(62, 155, 79, 0.16) 31px 32px);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.25);
  transform: rotate(-1.1deg);
}
.fc-crew {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .fc-crew { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px clamp(20px, 3vw, 36px); }
}
.fc-shot {
  --r: -2.2deg;
  position: relative;
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: start;
  padding: 9px 9px 14px;
  border: var(--fc-line);
  border-radius: 4px;
  background: var(--fc-pure);
  box-shadow: 4px 4px 0 rgba(22, 58, 37, 0.3);
  text-align: center;
  transform: rotate(var(--r));
  transition: transform 0.4s var(--fc-bounce);
}
.fc-shot:nth-child(2n) { --r: 1.8deg; }
.fc-shot:nth-child(3n) { --r: -0.8deg; }
.fc-shot:hover { transform: rotate(0deg) translateY(-4px); }
.fc-shot img,
.fc-more {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border: 1.5px solid var(--fc-ink);
  object-fit: cover;
}
.fc-shot b {
  font-family: var(--fc-hand);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.1;
}
.fc-shot > span:last-child { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--fc-ink-2); text-wrap: balance; }
.fc-binder {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 30px;
  margin-left: -23px;
}
.fc-binder::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: var(--fc-ink);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  border-radius: 3px;
}
.fc-binder::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  height: 16px;
  border: 3px solid var(--fc-steel-b);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.fc-shot--accent .fc-binder::before { background: var(--fc-orange); border: 0; }
.fc-more {
  position: relative;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-b) 0 22px, var(--fc-lawn-a) 22px 44px);
}
.fc-more__num {
  font-family: var(--fc-display);
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem);
  line-height: 1;
  color: var(--fc-chalk);
  text-shadow: 3px 3px 0 var(--fc-ink);
  -webkit-text-stroke: 1.5px var(--fc-ink);
  paint-order: stroke fill;
}
.fc-shot--more b { font-family: var(--fc-body); font-size: 1rem; font-weight: 800; }

/* ---------- the route sheet: numbered stops, a note each, a done box ---------- */
.fc-route__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 4px double var(--fc-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-ink-2);
}
.fc-route__head b { font-family: var(--fc-display); font-size: 1.2rem; font-weight: 400; letter-spacing: 0.08em; color: var(--fc-ink); }
.fc-route { margin: 0; padding: 0; list-style: none; }
.fc-route__stop {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.16);
}
.fc-route__stop:last-child { border-bottom: 0; }
.fc-route__no {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--fc-line);
  border-radius: 50% 50% 50% 6px;
  background: var(--fc-orange);
  color: var(--fc-ink-deep);
  font-family: var(--fc-display);
  font-size: 1.05rem;
  line-height: 1;
  transform: rotate(-8deg);
}
.fc-route__job b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.fc-route__job p { margin-top: 3px; font-size: 0.95rem; line-height: 1.5; color: var(--fc-ink-2); }
.fc-route__job a { font-weight: 700; text-decoration-color: var(--fc-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fc-route__done {
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: 4px;
  border: 2.5px solid var(--fc-ink);
  border-radius: 5px;
  background: var(--fc-pure);
}
.fc-route__stop.is-done .fc-route__done::after,
.fc-route--done .fc-route__done::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -12px;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M4 20l8 8L32 6' fill='none' stroke='%232E7D46' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0);
  transition: clip-path 0.5s var(--fc-ease);
}
html.reveal-on .reveal:not(.in) .fc-route__done::after { clip-path: inset(0 100% 0 0); }

/* ---------- checklists with hand-drawn ticks (and X for "not this") ---------- */
.fc-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fc-checklist li {
  position: relative;
  min-height: 30px;
  padding: 2px 0 0 44px;
  font-weight: 600;
  line-height: 1.45;
}
.fc-checklist li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--fc-ink);
  border-radius: 5px;
  background: var(--fc-pure);
}
.fc-checklist li::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -2px;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M4 20l8 8L32 6' fill='none' stroke='%232E7D46' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0);
  transition: clip-path 0.45s var(--fc-ease);
}
.fc-checklist li:nth-child(2)::after { transition-delay: 0.12s; }
.fc-checklist li:nth-child(3)::after { transition-delay: 0.24s; }
.fc-checklist li:nth-child(4)::after { transition-delay: 0.36s; }
.fc-checklist li:nth-child(n + 5)::after { transition-delay: 0.48s; }
.fc-checklist li.is-no { color: var(--fc-ink-3); }
.fc-checklist li.is-no::before { border-style: dashed; border-color: var(--fc-gray-2); }
.fc-checklist li.is-no::after {
  top: 0;
  left: 1px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M7 7l14 14M21 7L7 21' fill='none' stroke='%23B42318' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fc-checklist li.is-open::after { display: none; }
html.reveal-on .fc-checklist.reveal:not(.in) li::after,
html.reveal-on .reveal:not(.in) .fc-checklist li::after { clip-path: inset(0 100% 0 0); }
.fc-checklist--big li { font-size: 1.1rem; }
.fc-bg-turf .fc-checklist li::before { border-color: var(--fc-chalk); background: transparent; }

/* ==========================================================================
   15. Kit: paper things (tags, receipt, season strip), phones and screens
   ========================================================================== */
/* ---------- hang tags: kraft (default), seed tag, warning tag ----------
   markup: .fc-tag > .fc-tag__wrap > .fc-tag__body (the wrap draws the outline) */
.fc-tags { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) {
  .fc-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); align-items: start; }
}
.fc-tag {
  --tag: var(--fc-kraft);
  --tag-ink: var(--fc-ink);
  --tilt: calc(var(--fc-tilt-sheet) * -1);
  position: relative;
  padding-top: 30px;
  transform: rotate(var(--tilt));
  transform-origin: 50% 0;
}
.fc-tags > .fc-tag:nth-child(3n + 2) { --tilt: calc(var(--fc-tilt-sheet) * 0.8); }
.fc-tags > .fc-tag:nth-child(3n + 3) { --tilt: calc(var(--fc-tilt-sheet) * -0.5); }
/* the string, from the hook down to the hole */
.fc-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 50px;
  margin-left: -1px;
  background: var(--fc-ink);
}
.fc-tag__wrap { filter: var(--fc-outline) drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.35)); }
.fc-tag__body {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 44px 22px 22px;
  background: var(--tag);
  color: var(--tag-ink);
  clip-path: polygon(20% 0, 80% 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
}
/* the punched hole with its reinforcement ring */
.fc-tag__body::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-paper);
  box-shadow: 0 0 0 4px rgba(22, 58, 37, 0.14);
}
.fc-bg-mint .fc-tag__body::before { background: var(--fc-mint); }
.fc-tag__head { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.fc-tag__title { font-weight: 400; font-family: var(--fc-display); font-size: 1.35rem; line-height: 1.1; }
.fc-tag p { font-size: 0.975rem; line-height: 1.5; }
/* seed tag: white with a stitch line across the top */
.fc-tag--seed { --tag: var(--fc-white); }
.fc-tag--seed .fc-tag__body { padding-top: 52px; }
.fc-tag--seed .fc-tag__body::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 10px;
  right: 10px;
  border-top: 2px dashed rgba(22, 58, 37, 0.55);
}
/* warning tag: safety orange with a hazard band */
.fc-tag--warn { --tag: var(--fc-orange); --tag-ink: var(--fc-ink-deep); }
.fc-tag--warn .fc-tag__body { padding-top: 58px; }
.fc-tag--warn .fc-tag__body::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 12px;
  border-block: 2px solid var(--fc-ink);
  background: repeating-linear-gradient(-45deg, var(--fc-ink) 0 8px, var(--fc-sun) 8px 16px);
}
.fc-tag--sun { --tag: var(--fc-sun); }
@media (max-width: 600px) {
  /* house rule 1: text-bearing paper sits (almost) level on phones */
  .fc-tag, .fc-tags > .fc-tag:nth-child(3n + 3) { --tilt: -0.5deg; }
  .fc-tags > .fc-tag:nth-child(3n + 2) { --tilt: 0.5deg; }
}

/* ---------- a thermal receipt tape ---------- */
.fc-receipt { position: relative; width: min(100%, 420px); margin: 0 auto; transform: rotate(calc(var(--fc-tilt-sheet) * -1)); }
.fc-receipt__wrap { filter: var(--fc-outline) drop-shadow(5px 5px 0 rgba(22, 58, 37, 0.3)); }
.fc-receipt__paper {
  position: relative;
  padding: 26px 24px 42px;
  background:
    linear-gradient(90deg, rgba(22, 58, 37, 0.05), transparent 12%, transparent 88%, rgba(22, 58, 37, 0.05)),
    var(--fc-thermal);
  font-family: var(--fc-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
}
.fc-receipt__head { text-align: center; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fc-receipt__head small { display: block; font-weight: 400; letter-spacing: 0.06em; color: var(--fc-ink-2); }
.fc-receipt__lines { margin: 14px 0 0; padding: 12px 0 0; list-style: none; border-top: 2px dashed rgba(22, 58, 37, 0.45); }
.fc-receipt__lines li { display: flex; align-items: flex-end; gap: 8px; padding: 5px 0; }
.fc-receipt__lines li > span:first-child { flex: 0 1 auto; }
.fc-receipt__lines i { flex: 1 1 14px; min-width: 14px; margin-bottom: 0.35em; border-bottom: 2px dotted rgba(22, 58, 37, 0.45); }
.fc-receipt__lines b { flex: none; font-weight: 700; }
.fc-receipt__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed rgba(22, 58, 37, 0.45);
  font-size: 1.05rem;
  font-weight: 700;
}
.fc-receipt__foot { margin-top: 14px; text-align: center; font-size: 0.8rem; color: var(--fc-ink-2); }
.fc-receipt .fc-stamp { position: absolute; right: 14px; bottom: 30px; }
/* a real <table> set as receipt lines (legal pages keep their tables) */
.fc-receipt__table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.fc-receipt__table caption { padding-bottom: 8px; font-weight: 700; text-align: left; }
.fc-receipt__table th,
.fc-receipt__table td { padding: 6px 0; border-top: 2px dashed rgba(22, 58, 37, 0.3); text-align: left; vertical-align: top; }
.fc-receipt__table thead th { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }
.fc-receipt__table td:last-child,
.fc-receipt__table th:last-child { padding-left: 12px; text-align: right; font-weight: 700; }
@media (max-width: 600px) { .fc-receipt { transform: rotate(-0.4deg); } }
@media (max-width: 420px) {
  .fc-receipt__table tr { display: grid; }
  .fc-receipt__table td:last-child { padding: 0 0 6px; border-top: 0; text-align: left; }
  .fc-receipt__table thead th:last-child { display: none; }
}

/* ---------- the season strip (a wall calendar with tape across the months) ---------- */
.fc-season {
  position: relative;
  padding: 18px 16px 20px;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
}
.fc-season__months,
.fc-season__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fc-season__months { border-bottom: var(--fc-line); }
.fc-season__months li {
  padding: 0 0 8px;
  font-family: var(--fc-display);
  font-size: 0.85rem;
  text-align: center;
  text-transform: uppercase;
}
.fc-season__bars {
  row-gap: 10px;
  padding-top: 14px;
  background-image: linear-gradient(90deg, rgba(22, 58, 37, 0.1) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.fc-season__bar {
  grid-column: var(--from, 1) / span var(--span, 1);
  position: relative;
  padding: 6px 10px 7px;
  background: var(--bar, var(--fc-sun));
  color: var(--bar-ink, var(--fc-ink));
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.25);
  clip-path: polygon(0 6%, 4px 30%, 0 55%, 3px 78%, 0 100%, 100% 100%, calc(100% - 3px) 72%, 100% 48%, calc(100% - 4px) 22%, 100% 0);
}
.fc-season__bar--orange { --bar: var(--fc-orange); --bar-ink: var(--fc-ink-deep); }
.fc-season__bar--leaf { --bar: var(--fc-leaf); }
.fc-season__bar--turf { --bar: var(--fc-clover-2); --bar-ink: var(--fc-pure); }
.fc-season__bar--sky { --bar: var(--fc-sky); }
.fc-season__note { margin-top: 14px; transform: rotate(calc(var(--fc-tilt-sheet) * -1)); }   /* a sentence, not a scribble */
/* phones: each strip's label gets its own line, the tape sits under it at its months */
@media (max-width: 600px) {
  .fc-season { padding: 14px 10px 16px; }
  .fc-season__months li { font-size: 0.62rem; }
  .fc-season__bar {
    grid-column: 1 / -1;
    padding: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
    color: var(--fc-ink);
    font-size: 0.8rem;
  }
  .fc-season__bar::after {
    content: "";
    display: block;
    width: calc(var(--span, 1) * 100% / 12);
    height: 12px;
    margin: 4px 0 0 calc((var(--from, 1) - 1) * 100% / 12);
    border: 1.5px solid var(--fc-ink);
    border-radius: 3px;
    background: var(--bar, var(--fc-sun));
  }
}

/* ---------- a phone (lock screen by default; --app for a light screen) ---------- */
.fc-phone {
  --pw: 246px;
  position: relative;
  z-index: 2;
  flex: none;
  width: var(--pw);
  height: calc(var(--pw) * 2);
  padding: calc(var(--pw) * 11 / 246);
  border: var(--fc-line);
  border-radius: calc(var(--pw) * 42 / 246);
  background-color: var(--phone-case, var(--fc-orange));
  background-image:
    radial-gradient(circle at 26px 26px, var(--phone-bump, var(--fc-orange-2)) 20px, transparent 21px),
    radial-gradient(circle at calc(100% - 26px) 26px, var(--phone-bump, var(--fc-orange-2)) 20px, transparent 21px),
    radial-gradient(circle at 26px calc(100% - 26px), var(--phone-bump, var(--fc-orange-2)) 20px, transparent 21px),
    radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), var(--phone-bump, var(--fc-orange-2)) 20px, transparent 21px);
  box-shadow: var(--fc-chunk-lg);
}
.fc-phone::before {
  content: "";
  position: absolute;
  top: 110px;
  left: -7px;
  width: 6px;
  height: 58px;
  border: var(--fc-line);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: var(--phone-bump, var(--fc-orange-2));
}
.fc-phone--sm { --pw: 220px; }
.fc-phone--sm .fc-phone__screen { padding-top: 42px; }
.fc-phone--sm .fc-phone__time { font-size: 2.7rem; }
.fc-phone--sm .fc-notif { margin-top: 16px; }
.fc-phone--ink { --phone-case: var(--fc-case-ink); --phone-bump: var(--fc-case-ink-2); }
.fc-phone--sun { --phone-case: var(--fc-sun); --phone-bump: var(--fc-sun-3); }
.fc-phone__screen {
  position: relative;
  height: 100%;
  padding: 50px 12px 14px;
  border: var(--fc-line);
  border-radius: calc(var(--pw) * 32 / 246);
  background:
    linear-gradient(180deg, rgba(10, 30, 18, 0.62), rgba(10, 30, 18, 0.1) 46%, rgba(10, 30, 18, 0.55)),
    repeating-linear-gradient(90deg, var(--fc-screen-a) 0 34px, var(--fc-screen-b) 34px 68px);
  overflow: hidden;
}
.fc-phone--app .fc-phone__screen { padding: 40px 10px 12px; background: var(--fc-white); }
.fc-phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 74px;
  height: 20px;
  margin-left: -37px;
  border-radius: 999px;
  background: var(--fc-ink-black);
}
.fc-phone__time {
  display: block;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--fc-chalk);
}
.fc-phone__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -10px 10px;
  padding: 0 12px 8px;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.18);
  font-size: 0.8rem;
  font-weight: 800;
}
.fc-phone__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-leaf);
  font-size: 0.7rem;
}
/* the phone buzzing on the table (twice, then it rests) */
.fc-phone--buzz { animation: fc-buzz 5s ease-in-out 1.2s 2; }
.fc-phone__buzz {
  position: absolute;
  top: 38%;
  width: 16px;
  height: 46px;
  border: 3px solid transparent;
  border-radius: 50%;
  opacity: 0;
  animation: fc-buzzmark 5s ease-in-out 1.2s 2;
}
.fc-phone__buzz--l { left: -26px; border-left-color: var(--fc-ink); }
.fc-phone__buzz--r { right: -26px; border-right-color: var(--fc-ink); }
@keyframes fc-buzz {
  0%, 84%, 100% { transform: none; }
  86% { transform: rotate(-3deg); }
  88% { transform: rotate(3deg); }
  90% { transform: rotate(-2.4deg); }
  92% { transform: rotate(2deg); }
  94% { transform: rotate(-1deg); }
}
@keyframes fc-buzzmark {
  0%, 83%, 97%, 100% { opacity: 0; }
  86%, 94% { opacity: 1; }
}
/* a notification card */
.fc-notif {
  margin-top: 26px;
  padding: 11px 12px 12px;
  border: var(--fc-line);
  border-radius: 18px;
  background: rgba(255, 253, 246, 0.97);
  box-shadow: 0 5px 0 rgba(8, 24, 14, 0.4);
  color: var(--fc-ink);
}
.fc-notif + .fc-notif { margin-top: 10px; }
.fc-notif__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fc-notif__app {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-orange);
}
.fc-notif__app svg { width: 18px; height: 18px; }
.fc-notif__ago { font-size: 0.75rem; font-weight: 600; color: var(--fc-ink-2); }
.fc-notif__title { font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
.fc-notif__body { margin-top: 3px; font-size: 0.85rem; line-height: 1.35; color: var(--fc-ink-2); }
.fc-notif__warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--fc-orange-ink);
}
.fc-notif__warn::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fc-orange);
  box-shadow: 0 0 0 2px rgba(255, 107, 44, 0.25);
}
/* chat bubbles: --in (them, left), --out (you, right) */
.fc-thread { display: grid; gap: 8px; align-content: start; }
.fc-bubble {
  position: relative;
  max-width: 86%;
  padding: 8px 12px 9px;
  border: var(--fc-line);
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}
.fc-bubble--in { justify-self: start; border-bottom-left-radius: 5px; background: var(--fc-bubble); }
.fc-bubble--out { justify-self: end; border-bottom-right-radius: 5px; background: var(--fc-leaf); }
.fc-bubble--big {
  max-width: 14em;   /* an object tilt: keep it to two lines */
  padding: 12px 16px;
  border-radius: 22px 22px 22px 6px;
  box-shadow: var(--fc-chunk);
  font-size: 1rem;
  transform: rotate(-3deg);
}
.fc-bubble__meta { display: block; margin-top: 3px; font-size: 0.7rem; font-weight: 700; color: var(--fc-ink-2); }

/* ---------- a browser window ---------- */
.fc-browser {
  position: relative;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk-lg);
}
.fc-browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: var(--fc-line);
  border-radius: calc(var(--fc-r1) - 2px) calc(var(--fc-r1) - 2px) 0 0;
  background: var(--fc-paper-2);
}
.fc-browser__dots { display: flex; gap: 6px; }
.fc-browser__dots i { width: 11px; height: 11px; border: 1.5px solid var(--fc-ink); border-radius: 50%; background: var(--fc-white); }
.fc-browser__dots i:first-child { background: var(--fc-orange); }
.fc-browser__dots i:nth-child(2) { background: var(--fc-sun); }
.fc-browser__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 4px 12px;
  border: 1.5px solid rgba(22, 58, 37, 0.3);
  border-radius: 999px;
  background: var(--fc-pure);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fc-ink-2);
}
.fc-browser__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-green-ink);
}
.fc-browser__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-clover); box-shadow: 0 0 0 3px rgba(62, 155, 79, 0.25); }
.fc-browser__view { position: relative; overflow: hidden; border-radius: 0 0 calc(var(--fc-r1) - 2px) calc(var(--fc-r1) - 2px); }
.fc-browser__view img { display: block; width: 100%; height: auto; }

/* ---------- the dash tablet: a video in a dash mount ---------- */
.fc-dash { position: relative; max-width: 820px; margin: 0 auto; padding-bottom: 46px; }
.fc-dash__tablet {
  position: relative;
  z-index: 2;
  padding: clamp(10px, 1.6vw, 16px);
  border: var(--fc-line);
  border-radius: clamp(18px, 2.4vw, 28px);
  background: var(--fc-tablet);
  box-shadow: var(--fc-chunk-lg);
}
.fc-dash__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--fc-ink-black);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--fc-sky) 0 42%, transparent 42%),
    repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 40px, var(--fc-lawn-b) 40px 80px);
}
.fc-dash__screen iframe,
.fc-dash__screen video,
.fc-dash__screen img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.fc-dash__tape { position: absolute; top: -14px; left: 26px; z-index: 3; }
.fc-dash__note { position: absolute; right: -18px; bottom: -22px; z-index: 3; max-width: 62%; font-size: 0.95rem; }
.fc-dash__mount {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 1;
  width: 54px;
  height: 58px;
  margin-left: -27px;
  border: var(--fc-line);
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(90deg, var(--fc-rubber), var(--fc-rubber-2) 50%, var(--fc-rubber));
}
.fc-dash__board {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 30px;
  border: var(--fc-line);
  border-radius: 999px 999px 10px 10px;
  background: var(--fc-asphalt) repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.08) 22px 26px);
}
.fc-dash figcaption { margin-top: 18px; text-align: center; font-weight: 600; color: var(--fc-ink-2); }
@media (max-width: 600px) {
  .fc-dash__note { right: 4px; bottom: -8px; font-size: 0.85rem; }
  .fc-dash__board { left: 0; right: 0; }
}

/* ---------- the string line: cards on clothespins (js/shmocard.js builds the cards) ---------- */
.fc-stringline { position: relative; padding-top: 6px; }
.fc-stringline__stake { position: relative; z-index: 3; margin: 0 0 -8px max(var(--fc-gutter), calc((100% - 1280px) / 2 + var(--fc-gutter))); }
.fc-stringline__viewport {
  position: relative;
  overflow: hidden;
  padding: 34px 0 30px;
  background: linear-gradient(var(--fc-ink), var(--fc-ink)) 0 32px / 100% 2px no-repeat;
}
.fc-stringline__track {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  width: max-content;
  margin: 0;
  padding: 0 0 0 var(--fc-gutter);
  list-style: none;
  animation: fc-marquee var(--line-dur, 240s) linear infinite;
}
/* the line holds while a mouse rests on it or a card has focus; never for the pause button itself
   (so Play always plays, WCAG 2.2.2) and never for a tap on a touch screen */
@media (hover: hover) { .fc-stringline__viewport:hover .fc-stringline__track { animation-play-state: paused; } }
.fc-stringline__viewport:focus-within .fc-stringline__track,
.fc-stringline.is-paused .fc-stringline__track { animation-play-state: paused; }
/* the line runs the full width; its stake and its bar keep to the 1280px column (so the corner
   companion never sits on the pause button) */
.fc-stringline__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 1280px; margin-inline: auto; padding: 0 var(--fc-gutter); }
/* without JavaScript nothing could pause it: the line holds still and scrolls by hand, and the
   hint and the pause button go (a card line is empty without JS in any case) */
/* js/shmocard.js moves the bar before the cards (Pause first in the tab order); it still shows under the line */
.fc-stringline.is-bar-first { display: flex; flex-direction: column; }
.fc-stringline.is-bar-first > .fc-stringline__bar { order: 1; box-sizing: border-box; width: 100%; }
html:not(.js) .fc-stringline__track { animation: none; }
html:not(.js) .fc-stringline__viewport { overflow-x: auto; }
html:not(.js) .fc-stringline__bar { display: none; }
.fc-stringline__hint { font-size: 0.9rem; font-weight: 600; color: var(--fc-ink-2); }
.fc-card {
  --r: -2deg;
  position: relative;
  flex: none;
  width: clamp(132px, 13vw, 168px);
  transform: rotate(var(--r));
  transform-origin: 50% 0;
}
.fc-card:nth-child(2n) { --r: 1.6deg; }
.fc-card:nth-child(3n) { --r: -0.6deg; }
.fc-card__flip {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
.fc-card__inner {
  position: relative;
  display: block;
  aspect-ratio: 230 / 363;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--fc-ease);
}
.fc-card__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-pure);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.35);
  object-fit: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* the faces also swap visibility at the half-turn, so engines that ignore
   backface-visibility (some WebKit builds) never show a mirrored back */
.fc-card__face { transition: visibility 0s linear 0.3s; }
.fc-card__back { transform: rotateY(180deg); visibility: hidden; }
.fc-card__flip[aria-pressed="true"] .fc-card__inner { transform: rotateY(180deg); }
.fc-card__flip[aria-pressed="true"] .fc-card__front { visibility: hidden; }
.fc-card__flip[aria-pressed="true"] .fc-card__back { visibility: visible; }
@media (hover: hover) {
  .fc-card__flip:hover .fc-card__inner { transform: rotateY(180deg); }
  .fc-card__flip:hover .fc-card__front { visibility: hidden; }
  .fc-card__flip:hover .fc-card__back { visibility: visible; }
  .fc-card__flip[aria-pressed="true"]:hover .fc-card__inner { transform: rotateY(180deg); }
}
.fc-card__flag {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--fc-ink-2);
}

/* ==========================================================================
   16. Kit: proof (big numbers, the fan wall, signboard), tables, FAQ, the legal sheet
   ========================================================================== */
/* ---------- big number rows ---------- */
.fc-bignums { --div: rgba(22, 58, 37, 0.3); --num: var(--fc-ink); --txt: var(--fc-ink-2); display: grid; max-width: 1120px; margin: 0 auto; }
.fc-bg-turf .fc-bignums, .fc-bignums--dark { --div: rgba(255, 248, 230, 0.4); --num: var(--fc-chalk); --txt: var(--fc-chalk-2); }
@media (min-width: 800px) {
  .fc-bignums:not(.fc-bignums--rows) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-bignums:not(.fc-bignums--rows) .fc-bignum:nth-child(odd) { border-right: 3px dashed var(--div); }
  .fc-bignums:not(.fc-bignums--rows) .fc-bignum:nth-child(-n + 2) { border-bottom: 3px dashed var(--div); }
}
@media (max-width: 799px) {
  .fc-bignum + .fc-bignum { border-top: 3px dashed var(--div); }
}
.fc-bignums--rows .fc-bignum + .fc-bignum { border-top: 3px dashed var(--div); }
.fc-bignum {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(24px, 3vw, 40px) clamp(4px, 3vw, 44px);
}
@media (min-width: 800px) {
  .fc-bignums--rows .fc-bignum {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "num label" "num text";
    column-gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }
  .fc-bignums--rows .fc-bignum__num { grid-area: num; }
  .fc-bignums--rows .fc-bignum__label { grid-area: label; align-self: end; }
  .fc-bignums--rows .fc-bignum > p:last-child { grid-area: text; align-self: start; }
}
.fc-bignum__num {
  font-family: var(--fc-display);
  font-size: clamp(3rem, 1.6rem + 4.2vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--num);
  text-shadow: 4px 4px 0 var(--fc-orange);
  clip-path: inset(-10% -10% -10% -10%);
  transition: clip-path 1s var(--fc-ease) 0.2s;
}
.fc-bignum__num--long { font-size: clamp(2.6rem, 1.3rem + 3.3vw, 4.1rem); }
html.reveal-on .fc-bignum.reveal:not(.in) .fc-bignum__num { clip-path: inset(-10% 110% -10% -10%); }
.fc-bignum__label {
  justify-self: start;
  margin: 2px 0 4px -4px;
  padding: 5px 14px 6px;
  background: rgba(255, 227, 110, 0.94);
  color: var(--fc-ink);
  font-family: var(--fc-body);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  box-shadow: 2px 3px 0 rgba(6, 20, 12, 0.35);
  transform: rotate(-1.4deg);
  /* torn tape ends */
  clip-path: polygon(0 8%, 3px 30%, 0 52%, 4px 76%, 0 100%, 100% 100%, calc(100% - 4px) 72%, 100% 48%, calc(100% - 3px) 24%, 100% 0);
}
.fc-bignum:nth-child(even) .fc-bignum__label { transform: rotate(1.2deg); }
.fc-bignum > p:last-child { max-width: 30em; color: var(--txt); line-height: 1.55; }
.fc-bignum .fc-proofchip { justify-self: start; }

/* ---------- the fan wall: real posts taped up (tap to enlarge: main.js .wall-card) ---------- */
.fc-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
  max-width: 1120px;
  margin: clamp(56px, 6vw, 80px) auto 0;
}
.fc-wall__col { display: grid; gap: clamp(26px, 3vw, 38px); }
.fc-wall__col:nth-child(2) { margin-top: 44px; }
.fc-swipe { display: none; }
.fc-snap {
  --r: -1.6deg;
  position: relative;
  margin: 0;
  padding: 9px 9px 11px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
  transform: rotate(var(--r));
  transition: transform 0.35s var(--fc-bounce);
  cursor: zoom-in;
}
/* on the dark turf band a solid ink shadow would vanish: a soft dark one lifts the post instead */
.fc-bg-turf .fc-snap { box-shadow: 5px 5px 0 rgba(6, 20, 12, 0.6); }
.fc-snap:nth-child(2n) { --r: 1.8deg; }
.fc-snap:nth-child(3n) { --r: -0.8deg; }
.fc-snap::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 1;
  width: 86px;
  height: 24px;
  margin-left: -43px;
  border: 1px solid rgba(22, 58, 37, 0.2);
  background: rgba(255, 227, 110, 0.82);
  transform: rotate(-3deg);
}
.fc-snap:nth-child(2n)::before { transform: rotate(4deg); background: rgba(221, 240, 210, 0.85); }
.fc-snap img { display: block; width: 100%; height: auto; border: 1.5px solid rgba(22, 58, 37, 0.25); border-radius: 3px; }
.fc-snap:hover,
.fc-snap:focus-visible { transform: rotate(0deg) scale(1.02); }
.fc-snap__tag { position: absolute; left: 10px; bottom: -12px; z-index: 2; }
.fc-wall__cap {
  max-width: 36em;
  margin: 10px auto 0;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--fc-ink-2);
}
.fc-bg-turf .fc-wall__cap { color: var(--fc-chalk-2); }
.fc-bg-turf .fc-swipe { color: var(--fc-sun); }
@media (max-width: 600px) {
  .fc-wall {
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 40px -16px 0;
    padding: 22px 16px 26px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fc-wall::-webkit-scrollbar { display: none; }
  .fc-wall__col { display: contents; }
  .fc-snap { flex: 0 0 80%; scroll-snap-align: center; }
  .fc-snap img { max-height: 380px; object-fit: cover; object-position: top; }
  .fc-swipe {
    display: block;
    margin: 0 0 6px;
    font-family: var(--fc-hand);
    font-size: 1.05rem;
    text-align: center;
    color: var(--fc-orange-ink);
  }
  .fc-swipe::after { content: " \2192"; }
}

/* ---------- the signboard: a wooden sign with two nails (pull quote, a rule, a filter line) ---------- */
.fc-signboard {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px clamp(18px, 3vw, 34px) 22px;
  border: var(--fc-line);
  border-radius: 12px;
  background-color: var(--fc-wood);
  background-image: repeating-linear-gradient(176deg, rgba(122, 75, 42, 0.1) 0 2px, transparent 2px 11px);
  box-shadow: var(--fc-chunk-lg);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  transform: rotate(calc(var(--fc-tilt-sheet) * -1));
}
.fc-signboard strong,
.fc-signboard blockquote p {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fc-display);
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
}
.fc-signboard blockquote p::before { content: "\201C"; }
.fc-signboard blockquote p::after { content: "\201D"; }
.fc-signboard figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 800;
}
.fc-signboard__nail,
.fc-signboard::before,
.fc-signboard::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-nail);
}
.fc-signboard::before { left: 12px; }
.fc-signboard::after { right: 12px; }
@media (max-width: 600px) { .fc-signboard { font-size: 1rem; transform: rotate(-0.5deg); } }

/* ---------- comparison / box-score table (a real <table>) ---------- */
.fc-score-wrap {
  max-width: 920px;
  margin: 0 auto;
  overflow-x: auto;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
}
.fc-score { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fc-score caption {
  caption-side: top;
  padding: 14px 16px 12px;
  border-bottom: var(--fc-line);
  background: var(--fc-paper-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}
.fc-score th,
.fc-score td { padding: 12px 14px; border-bottom: 1.5px solid rgba(22, 58, 37, 0.14); text-align: left; vertical-align: middle; line-height: 1.35; }
.fc-score thead th {
  border-bottom: var(--fc-line);
  background: var(--fc-ink);
  color: var(--fc-chalk);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fc-score tbody th { font-weight: 700; }
.fc-score tbody tr:nth-child(even) { background: rgba(245, 239, 223, 0.6); }
.fc-score tbody tr:last-child th,
.fc-score tbody tr:last-child td { border-bottom: 0; }
.fc-score .is-us { background: var(--fc-sun-2); border-inline: var(--fc-line); }
.fc-score thead .is-us { background: var(--fc-orange); color: var(--fc-ink-deep); }
.fc-score__yes,
.fc-score__no { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.fc-score__yes::before,
.fc-score__no::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-lawn-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.3 2.3 4.7-5' fill='none' stroke='%23163A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.fc-score__no { color: var(--fc-ink-3); }
.fc-score__no::before {
  border-color: var(--fc-gray-2);
  border-style: dashed;
  background: var(--fc-pure) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7h6' stroke='%2356645B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (max-width: 600px) {
  .fc-score th, .fc-score td { padding: 10px 9px; font-size: 0.9rem; }
  .fc-score thead th { font-size: 0.68rem; letter-spacing: 0.06em; }
  .fc-score__yes::before, .fc-score__no::before { width: 18px; height: 18px; background-size: 12px; }
}

/* ---------- FAQ: native details/summary, each one a little door tag ---------- */
.fc-faq { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.fc-faq__item {
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
  transition: box-shadow 0.2s, transform 0.3s var(--fc-bounce);
}
.fc-faq__item[open] { box-shadow: var(--fc-chunk-lg); }
.fc-faq__item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 16px 14px 18px;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fc-faq__item summary::-webkit-details-marker { display: none; }
.fc-faq__item summary::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-paper);
}
.fc-faq__item summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: var(--fc-line);
  border-radius: 50%;
  background:
    linear-gradient(var(--fc-ink), var(--fc-ink)) center / 14px 2.5px no-repeat,
    linear-gradient(var(--fc-ink), var(--fc-ink)) center / 2.5px 14px no-repeat,
    var(--fc-sun);
  transition: transform 0.3s var(--fc-ease);
}
.fc-faq__item[open] summary::after {
  background: linear-gradient(var(--fc-ink), var(--fc-ink)) center / 14px 2.5px no-repeat, var(--fc-orange);
  transform: rotate(180deg);
}
.fc-faq__item summary:hover::after { transform: rotate(90deg); }
.fc-faq__a { display: grid; gap: 0.8em; padding: 14px 18px 18px 46px; border-top: 2px dashed rgba(22, 58, 37, 0.18); color: var(--fc-ink-2); }
@media (max-width: 600px) {
  .fc-faq__a { padding-left: 18px; }
}

/* ---------- the legal sheet: one long plain paper sheet with a clip and a date stamp ---------- */
.fc-sheet {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(46px, 6vw, 70px) clamp(18px, 5vw, 64px) clamp(36px, 5vw, 56px);
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk-lg);
}
.fc-sheet__clip {
  position: absolute;
  top: -32px;
  left: 50%;
  z-index: 3;
  width: 200px;
  height: 72px;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 0 rgba(22, 58, 37, 0.3));
}
.fc-sheet__head { display: grid; gap: 10px; justify-items: start; padding-bottom: 22px; border-bottom: 4px double var(--fc-ink); }
.fc-sheet__letter { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-ink-2); }
.fc-sheet__title { font-family: var(--fc-display); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.04; }
.fc-sheet__stamp { margin-top: 6px; transform: rotate(-3deg); }
.fc-sheet__body { max-width: 68ch; padding-top: 26px; font-size: 1.0625rem; line-height: 1.7; }
.fc-sheet__body h2 {
  margin-top: 2em;
  text-wrap: balance;
  font-family: var(--fc-display);
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
  line-height: 1.15;
  scroll-margin-top: 96px;
}
.fc-sheet__body h3 { margin-top: 1.4em; font-family: var(--fc-body); font-size: 1.12rem; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.fc-sheet__body > h2:first-child { margin-top: 0; }
.fc-sheet__body h2 + *,
.fc-sheet__body h3 + * { margin-top: 0.5em; }

/* ---------- route stops: a table of contents drawn as a crew's route card ---------- */
.fc-stops { margin: 26px 0 0; }
.fc-stops ol {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stop;
}
.fc-stops ol::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  border-left: 3px dotted var(--fc-orange-ink);
}
.fc-stops li { position: relative; counter-increment: stop; }
.fc-stops a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 3px 0;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.fc-stops a::before {
  content: counter(stop);
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  font-family: var(--fc-display);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
}
.fc-stops a:hover::before { background: var(--fc-orange); }
.fc-stops a:hover span { text-decoration: underline wavy var(--fc-orange); text-underline-offset: 4px; }
@media (min-width: 760px) {
  .fc-stops ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .fc-stops ol::before { display: none; }
}

/* Paper that carries text brings its own ink, so it reads the same on the deep turf band. */
.fc-board__paper, .fc-receipt__paper, .fc-slip__paper, .fc-order__paper, .fc-estimate__paper, .fc-note-card,
.fc-dict, .fc-cal, .fc-laminate__card, .fc-sheet, .fc-faq__item, .fc-signboard, .fc-score-wrap, .fc-browser,
.fc-phone--app .fc-phone__screen, .fc-packet__face, .fc-plate, .fc-accs, .fc-fields { color: var(--fc-ink); }
.fc-bg-turf .fc-surface:not(.fc-surface--tailgate) { color: var(--fc-ink); }

/* ==========================================================================
   17. Kit: surfaces and fasteners
   The places the decks set their objects: a tailgate, a truck dash, a corkboard, a pegboard,
   a fridge door, a whiteboard, the shop wall. Put the objects in .fc-surface__row (they rest
   on the bottom edge), then pin, hang, stick or tie each one with a fastener.
   ========================================================================== */
.fc-surface {
  --sf-pad: clamp(28px, 4vw, 52px);
  position: relative;
  padding: var(--sf-pad) clamp(16px, 3vw, 44px);
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  box-shadow: var(--fc-chunk-lg);
}
.fc-surface__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(22px, 4vw, 56px) clamp(18px, 3vw, 44px);
}
.fc-surface__row > * { min-width: 0; }
/* a hand-written label on the surface (marker on the whiteboard, chalk on the wall) */
.fc-surface__note { position: relative; z-index: 1; margin-top: 18px; text-align: center; }

/* corkboard: cork in a wooden frame */
.fc-surface--cork {
  border: 12px solid var(--fc-rail-a);
  border-radius: 16px;
  background-color: var(--fc-cork);
  background-image:
    radial-gradient(rgba(96, 54, 20, 0.34) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 232, 196, 0.3) 1px, transparent 1.7px),
    radial-gradient(rgba(96, 54, 20, 0.2) 1.5px, transparent 2.2px);
  background-size: 7px 9px, 11px 8px, 13px 15px;
  background-position: 0 0, 3px 4px, 5px 2px;
  box-shadow: 0 0 0 2px var(--fc-ink), inset 0 0 0 2px var(--fc-ink), inset 0 6px 0 rgba(96, 54, 20, 0.18), 8px 8px 0 2px var(--fc-ink);
}
/* pegboard: brown hardboard with a grid of holes */
.fc-surface--peg {
  border-radius: 10px;
  background-color: var(--fc-peg);
  background-image:
    radial-gradient(circle, var(--fc-ink) 0 2.4px, rgba(22, 58, 37, 0.3) 2.8px 3.6px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%);
  background-size: 28px 28px, 100% 100%;
  background-position: 14px 14px, 0 0;
}
/* fridge door: white enamel with the handle on the right */
.fc-surface--fridge {
  padding-right: calc(clamp(16px, 3vw, 44px) + 34px);
  border-radius: var(--fc-r3);
  background: linear-gradient(100deg, var(--fc-fridge) 0 12%, var(--fc-pure) 30%, var(--fc-fridge) 70%, var(--fc-fridge-2) 100%);
}
.fc-surface--fridge::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 16px;
  width: 16px;
  height: 46%;
  border: var(--fc-line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fc-steel-b), var(--fc-steel-a) 45%, var(--fc-steel-b));
}
/* whiteboard: an aluminium frame and a marker tray along the bottom */
.fc-surface--whiteboard {
  padding-bottom: calc(var(--sf-pad) + 18px);
  border: 10px solid var(--fc-steel-b);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 22% 30%, rgba(31, 79, 160, 0.05), transparent 40%),
    radial-gradient(ellipse at 76% 70%, rgba(180, 35, 24, 0.05), transparent 38%),
    var(--fc-board-white);
  box-shadow: 0 0 0 2px var(--fc-ink), inset 0 0 0 2px var(--fc-ink), 8px 8px 0 2px var(--fc-ink);
}
.fc-surface--whiteboard::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -24px;
  height: 14px;
  border: var(--fc-line);
  border-radius: 0 0 8px 8px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
}
/* the shop wall: painted plywood panels */
.fc-surface--shopwall {
  border-radius: 12px;
  background-color: var(--fc-shopwall);
  background-image:
    var(--fc-grain),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(22, 58, 37, 0.28) 238px 240px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(22, 58, 37, 0.035) 22px 23px);
}
/* tailgate: the objects rest on a lowered tailgate */
.fc-surface--tailgate {
  --tg: var(--fc-clover-2);
  padding-bottom: calc(var(--sf-pad) * 0.5 + 72px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.fc-surface--tailgate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  border: var(--fc-line);
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(90deg, transparent calc(50% - 38px), var(--fc-ink) calc(50% - 38px) calc(50% - 36px), var(--fc-steel-a) calc(50% - 36px) calc(50% + 36px), var(--fc-ink) calc(50% + 36px) calc(50% + 38px), transparent calc(50% + 38px)) 0 28px / 100% 14px no-repeat,
    linear-gradient(transparent 0 10px, rgba(0, 0, 0, 0.14) 10px 12px, transparent 12px 56px, rgba(0, 0, 0, 0.16) 56px 58px, transparent 58px),
    linear-gradient(rgba(255, 255, 255, 0.22), transparent 40%),
    var(--tg);
  box-shadow: var(--fc-chunk-lg);
}
.fc-surface--tailgate::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 70px;
  height: 10px;
  border: var(--fc-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--fc-rubber);
}
.fc-surface--tailgate.fc-surface--white { --tg: var(--fc-white); }
.fc-surface--tailgate.fc-surface--orange { --tg: var(--fc-orange); }
/* truck dash: the windshield view behind, the dashboard in front */
.fc-surface--dash {
  padding-bottom: calc(var(--sf-pad) * 0.4 + 66px);
  border: 12px solid var(--fc-asphalt-2);
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
  background:
    linear-gradient(var(--fc-sky) 0 46%, transparent 46%),
    linear-gradient(transparent 0 46%, var(--fc-ink) 46% calc(46% + 2px), transparent calc(46% + 2px)),
    repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 46px, var(--fc-lawn-b) 46px 92px);
  box-shadow: 0 0 0 2px var(--fc-ink), inset 0 0 0 2px var(--fc-ink);
}
.fc-surface--dash::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: 0;
  height: 66px;
  border: var(--fc-line);
  border-radius: 40px 40px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.08) 16px 20px) 50% 18px / 120px 22px no-repeat,
    var(--fc-asphalt);
}
@media (max-width: 600px) {
  .fc-surface { padding-inline: 12px; }
  .fc-surface--cork, .fc-surface--whiteboard { border-width: 8px; }
  .fc-surface--dash { border-width: 8px; border-radius: 28px 28px 0 0; }
}
/* the fridge keeps room for its handle on phones too, so the handle never crosses a printout */
@media (max-width: 600px) {
  .fc-surface--fridge { padding-right: 44px; }
  .fc-surface--fridge::after { right: 12px; }
}

/* ---------- fasteners: pin, stick, hang or tie an object to its surface ----------
   Each one is an empty, aria-hidden span placed inside the object (position: relative). */
.fc-pushpin,
.fc-magnet,
.fc-hook,
.fc-clothespin,
.fc-ziptie,
.fc-tapestrip {
  position: absolute;
  z-index: 6;
  top: -10px;
  left: 50%;
  pointer-events: none;
}
.fc-pushpin {
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.75) 0 3px, transparent 3.6px), var(--pin, var(--fc-orange));
  box-shadow: 2px 3px 0 rgba(22, 58, 37, 0.35);
}
.fc-pushpin--sun { --pin: var(--fc-sun); }
.fc-pushpin--clover { --pin: var(--fc-clover); }
.fc-pushpin--white { --pin: var(--fc-white); }
.fc-magnet {
  top: -14px;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.4) 0 30%, transparent 32%), var(--mag, var(--fc-orange));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14), 2px 3px 0 rgba(22, 58, 37, 0.35);
}
.fc-magnet--sun { --mag: var(--fc-sun); }
.fc-magnet--clover { --mag: var(--fc-clover); }
.fc-magnet--sky { --mag: var(--fc-sky); }
/* a pegboard hook: the peg in the board and the wire the object hangs on */
.fc-hook {
  top: -30px;
  width: 26px;
  height: 34px;
  margin-left: -13px;
}
.fc-hook::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-steel-c);
}
.fc-hook::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 16px;
  height: 22px;
  border: 3.5px solid var(--fc-steel-c);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  filter: drop-shadow(1px 0 0 var(--fc-ink)) drop-shadow(-1px 0 0 var(--fc-ink)) drop-shadow(0 1px 0 var(--fc-ink));
}
.fc-clothespin,
.fc-card__pin {
  top: -16px;
  width: 14px;
  height: 30px;
  margin-left: -7px;
  border: 2px solid var(--fc-ink);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--fc-clothespin) 0 45%, var(--fc-ink) 45% 55%, var(--fc-clothespin) 55%);
}
/* a zip tie through a punched hole: the strap and its square head */
.fc-ziptie {
  top: -22px;
  width: 14px;
  height: 40px;
  margin-left: -7px;
  border: 2px solid var(--fc-ink);
  border-radius: 7px;
  background: repeating-linear-gradient(0deg, var(--fc-ziptie) 0 3px, var(--fc-ziptie-2) 3px 5px);
}
.fc-ziptie::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -5px;
  width: 20px;
  height: 12px;
  border: 2px solid var(--fc-ink);
  border-radius: 3px;
  background: var(--fc-ziptie-2);
}
/* a strip of clear tape across the top */
.fc-tapestrip {
  top: -12px;
  width: 86px;
  height: 24px;
  margin-left: -43px;
  border: 1px solid rgba(22, 58, 37, 0.2);
  background: rgba(255, 255, 255, 0.62);
  transform: rotate(-3deg);
}
/* a staple in a paper corner */
.fc-staple {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 6;
  width: 30px;
  height: 7px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 2px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
  transform: rotate(-14deg);
  pointer-events: none;
}

/* ==========================================================================
   18. Kit: what the drawn phones show (search, results, stars, lists, listings, typing,
   a keyboard), a phone held in a hand, a phone in a dash mount, NFC tap rings.
   Every piece goes inside .fc-phone--app .fc-phone__screen (or a .fc-browser__view) and is
   drawn, never a screenshot. Pin a .fc-sample to every drawn phone.
   ========================================================================== */
/* ---------- a search bar: the query types itself in (data-type, site.js) ---------- */
.fc-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px 0 10px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-pure);
  box-shadow: 0 2px 0 rgba(22, 58, 37, 0.15);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.fc-search::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23163A25' stroke-width='2'/%3E%3Cpath d='M10 10l4 4' stroke='%23163A25' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fc-search__q { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the caret shows only while it types */
.fc-search__q.is-typing::after,
.fc-type-caret.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--fc-orange-ink);
  animation: fc-caret 0.9s steps(2) infinite;
}
@keyframes fc-caret { 50% { opacity: 0; } }
.fc-search--lg { min-height: 52px; padding: 0 20px 0 16px; font-size: 1.05rem; box-shadow: var(--fc-chunk); }
.fc-search--lg::before { width: 20px; height: 20px; }

/* ---------- search results: --ad (Sponsored), --dim, --closed ---------- */
.fc-results { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.fc-result {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 9px 9px;
  border: 1.5px solid rgba(22, 58, 37, 0.2);
  border-radius: 10px;
  background: var(--fc-pure);
  min-width: 0;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.3;
  transition: opacity 0.3s, filter 0.3s;
}
.fc-result__site { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; min-width: 0; color: var(--fc-ink-2); font-weight: 600; overflow-wrap: anywhere; }
.fc-result__site::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fav, var(--fc-leaf));
}
.fc-result__ad { font-weight: 800; color: var(--fc-ink); }
.fc-result__title {
  /* two lines at most, like a real results page: a tilted phone is an object (house rule 1) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fc-ballpoint);
}
.fc-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--fc-ink-2); font-weight: 600; }
.fc-result__desc { color: var(--fc-ink-2); }
.fc-result__acts { display: flex; gap: 6px; margin-top: 5px; }
.fc-result__acts span {
  padding: 3px 9px 4px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 999px;
  background: var(--fc-sun-2);
  font-weight: 800;
}
.fc-result--ad { border: var(--fc-line); box-shadow: 2px 2px 0 var(--fc-ink); }
/* de-emphasized, still AA: gray ink, a dashed edge (the listing nobody scrolls to) */
.fc-result--dim { border-style: dashed; background: var(--fc-paper-2); }
.fc-result--dim,
.fc-result--dim .fc-result__title,
.fc-result--dim .fc-result__site,
.fc-result--dim .fc-result__desc { color: var(--fc-ink-3); }
.fc-result--dim .fc-result__site::before { background: var(--fc-paper-2); }
.fc-result__closed { color: var(--fc-red-ink); font-weight: 800; }
.fc-result--closed .fc-result__title { color: var(--fc-ink-3); }

/* ---------- star ratings: --n stars filled (fills in when its scene plays) ---------- */
.fc-stars {
  --n: 5;
  --size: 15px;
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--size) * 5);
  height: var(--size);
  vertical-align: -0.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23FFFDF6' stroke='%23163A25' stroke-opacity='.5' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x;
}
.fc-stars::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--n) / 5 * 100%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23FFD23F' stroke='%23163A25' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x;
  transition: width 1.1s var(--fc-ease) 0.2s;
}
.fc-stars--lg { --size: 30px; }
html.js [data-play-on-view]:not(.is-playing) .fc-stars--fill::after { width: 0; }

/* ---------- list rows: contacts, the inbox, recent calls ---------- */
.fc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.fc-listrow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.12);
  font-size: 0.72rem;
  line-height: 1.25;
}
.fc-listrow:last-child { border-bottom: 0; }
.fc-listrow__av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--av, var(--fc-leaf));
  font-size: 0.64rem;
  font-weight: 800;
}
.fc-listrow__name { display: block; font-weight: 800; }
.fc-listrow__meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fc-ink-2); }
.fc-listrow.is-new .fc-listrow__name::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--fc-orange);
  vertical-align: 1px;
}
.fc-listrow.is-muted .fc-listrow__name,
.fc-listrow.is-muted .fc-listrow__meta { color: var(--fc-ink-3); }
.fc-listrow.is-muted .fc-listrow__av { background: var(--fc-paper-2); }
.fc-pill {
  display: inline-block;
  padding: 2px 7px 3px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 999px;
  background: var(--pill, var(--fc-sun-2));
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.fc-pill--red { --pill: var(--fc-red-tint); color: var(--fc-red-ink); border-color: var(--fc-red-ink); }
.fc-pill--green { --pill: var(--fc-mint); color: var(--fc-green-ink); border-color: var(--fc-green-ink); }

/* ---------- a 2 by 2 grid of listings (Marketplace) ---------- */
.fc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.fc-tile { overflow: hidden; border: 1.5px solid var(--fc-ink); border-radius: 9px; background: var(--fc-pure); font-size: 0.64rem; line-height: 1.2; }
.fc-tile__img {
  display: block;
  aspect-ratio: 1;
  border-bottom: 1.5px solid var(--fc-ink);
  background: var(--tile, repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 12px, var(--fc-lawn-b) 12px 24px));
  object-fit: cover;
  width: 100%;
}
.fc-tile b { display: block; padding: 5px 6px 0; font-size: 0.78rem; }
.fc-tile > span { display: block; padding: 1px 6px 6px; color: var(--fc-ink-2); }
.fc-tile__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }   /* two lines, like the real listing */

/* ---------- typing dots and a keyboard ---------- */
.fc-bubble--typing { display: inline-flex; gap: 4px; padding: 10px 12px; }
.fc-bubble--typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc-ink-2);
  animation: fc-dots 1.2s ease-in-out 4;
}
.fc-bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.fc-bubble--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fc-dots { 0%, 60%, 100% { transform: none; opacity: 0.55; } 30% { transform: translateY(-4px); opacity: 1; } }
.fc-keyboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 34%;
  max-height: 136px;
  border-top: 1.5px solid var(--fc-ink);
  background-color: var(--fc-keys);
  background-image:
    repeating-linear-gradient(90deg, var(--fc-pure) 0 calc(10% - 4px), transparent calc(10% - 4px) 10%),
    repeating-linear-gradient(90deg, var(--fc-pure) 0 calc(100% / 9 - 4px), transparent calc(100% / 9 - 4px) calc(100% / 9)),
    repeating-linear-gradient(90deg, var(--fc-pure) 0 calc(100% / 7 - 4px), transparent calc(100% / 7 - 4px) calc(100% / 7)),
    linear-gradient(var(--fc-pure), var(--fc-pure));
  background-size: calc(100% - 4px) 18%, calc(90% - 2px) 18%, calc(70% - 2px) 18%, 48% 17%;
  background-position: 4px 9%, 50% 34%, 50% 59%, 50% 86%;
  background-repeat: no-repeat;
}

/* ---------- a phone held in a hand (add the hand drawing inside the phone) ----------
   <div class="fc-phone fc-phone--app fc-phone--hand"> ... <svg class="fc-grip" aria-hidden="true"
   focusable="false"><use href="assets/lawn/sprite.svg#fc-grip"/></svg></div>
   Skin: style="--hand: var(--fc-skin-2)" on the svg (--fc-skin-1 to 3); sleeve: --sleeve. */
.fc-phone--hand { margin-bottom: calc(var(--pw) * 70 / 246); }
.fc-phone--hand::before { display: none; }
.fc-grip {
  position: absolute;
  z-index: 3;
  left: calc(var(--pw) * -37 / 246);
  bottom: calc(var(--pw) * -70 / 246);
  width: calc(var(--pw) * 320 / 246);
  height: calc(var(--pw) * 300 / 246);
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

/* ---------- a phone in a dash mount (a clamp on a gooseneck, the dash below) ---------- */
.fc-dash--phone { width: max-content; max-width: 100%; padding-bottom: 64px; }
.fc-dash--phone > .fc-phone { margin: 0 auto; }
.fc-dash--phone::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: calc(64px + (100% - 64px) * 0.3);
  z-index: 1;   /* behind the phone (2): only the clamp's jaws show at its sides */
  height: 18px;
  border: var(--fc-line);
  border-radius: 6px;
  background: linear-gradient(var(--fc-rubber-2), var(--fc-rubber));
}
.fc-dash--phone .fc-dash__mount { bottom: 16px; width: 26px; height: 90px; margin-left: -13px; border-radius: 8px 8px 4px 4px; }
.fc-dash--phone .fc-dash__board { left: -30%; right: -30%; }

/* ---------- NFC tap rings: where a phone meets a card or a badge ----------
   Rings ripple out three times, then rest drawn (the same drawing with reduced motion). */
.fc-ripple {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  z-index: 5;
  width: var(--rs, 120px);
  height: var(--rs, 120px);
  translate: -50% -50%;
  pointer-events: none;
}
.fc-ripple i {
  position: absolute;
  inset: 0;
  border: 3px solid var(--rip, var(--fc-orange));
  border-radius: 50%;
  opacity: 0.8;
  transform: scale(0.45);
  animation: fc-ripple 2.4s var(--fc-ease) 3;
}
.fc-ripple i:nth-child(2) { opacity: 0.55; transform: scale(0.7); animation-delay: 0.45s; }
.fc-ripple i:nth-child(3) { opacity: 0.3; transform: scale(0.95); animation-delay: 0.9s; }
@keyframes fc-ripple {
  0% { opacity: 0.95; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ==========================================================================
   19. Kit: maps, lots, flags, the truck, houses, the mowed lane, turf bars
   The homepage hero's route map is built from these parts (css/pages/home.css only adds its
   animation). Any page can draw a street, a lot, a flag or the truck the same way.
   ========================================================================== */
/* ---------- a top-down map (inline SVG): props, walks, the road, lots, trees, legend ---------- */
.fc-map { display: block; width: 100%; height: auto; overflow: visible; }
.fc-map text { font-family: var(--fc-body); }
.fc-map__props { fill: none; stroke: var(--fc-ink); stroke-opacity: 0.26; stroke-width: 1.1; stroke-dasharray: 3 3; }
.fc-map__walk { fill: var(--fc-walk); }
.fc-map__joints { stroke: var(--fc-ink); stroke-opacity: 0.2; stroke-width: 1; }
.fc-map__road { fill: var(--fc-road); }
.fc-map__curb { fill: none; stroke: var(--fc-ink); stroke-width: 1.8; }
.fc-map__center { fill: none; stroke: var(--fc-road-line); stroke-width: 2.2; stroke-dasharray: 12 9; }
.fc-map__street { font-size: 10.5px; font-weight: 800; letter-spacing: 3px; fill: var(--fc-ink); fill-opacity: 0.6; }
.fc-lot__drive { fill: var(--fc-drive); stroke: var(--fc-ink); stroke-opacity: 0.4; stroke-width: 1; }
.fc-lot__garage { fill: var(--fc-garage); stroke: var(--fc-ink); stroke-width: 1.4; }
.fc-lot__roof { stroke: var(--fc-ink); stroke-width: 1.6; }
.fc-lot__back { fill: var(--fc-ink); fill-opacity: 0.07; }
.fc-lot__side { fill: var(--fc-ink); fill-opacity: 0.2; }
.fc-lot__hips { fill: none; stroke: var(--fc-ink); stroke-width: 1.1; stroke-opacity: 0.7; }
.fc-lot__ridge { fill: none; stroke: var(--fc-ink); stroke-width: 2; stroke-linecap: round; }
.fc-lot__chimney { fill: var(--fc-brick); stroke: var(--fc-ink); stroke-width: 1.1; }
.fc-lot__bush { fill: var(--fc-bush); stroke: var(--fc-ink); stroke-width: 1.1; }
.fc-lot__yard { fill: var(--fc-yard); }
.fc-lot__edge {
  fill: none;
  stroke: var(--fc-ink);
  stroke-width: 1.2;
  stroke-opacity: 0.45;
  stroke-dasharray: 2.5 2.5;
}
.fc-lot.is-cut .fc-lot__edge { stroke-width: 1.6; stroke-opacity: 0.95; stroke-dasharray: none; }
.fc-lot__mow {
  fill: none;
  stroke-linecap: butt;
  stroke-dasharray: var(--len, none);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0.05, 0.4, 1);
}
.fc-lot__mow--a { stroke: var(--fc-lawn-a); }
.fc-lot__mow--b { stroke: var(--fc-lawn-b); }
.fc-lot:not(.is-cut) .fc-lot__mow { stroke-dashoffset: var(--len, 0); transition: none; }
/* the small orange flag a crew plants in a finished lawn (SVG parts; the HTML flag is below) */
.fc-flag__pop {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  transition: transform 0.55s var(--fc-bounce) 0.28s;
}
.fc-lot:not(.is-cut) .fc-flag__pop { transform: scale(0); transition: none; }
.fc-flag__shadow { fill: var(--fc-ink); opacity: 0.22; }
.fc-flag__pole { stroke: var(--fc-ink); stroke-width: 1.8; stroke-linecap: round; }
.fc-flag__cloth {
  fill: var(--fc-orange);
  stroke: var(--fc-ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: fc-flutter 2.6s ease-in-out 2;
}
.fc-lot:nth-child(3n) .fc-flag__cloth { animation-delay: -0.9s; }
.fc-lot:nth-child(3n + 1) .fc-flag__cloth { animation-delay: -1.7s; }
@keyframes fc-flutter {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50% { transform: skewY(-8deg) scaleX(0.88); }
}
.fc-tree__shade { fill: var(--fc-ink); opacity: 0.14; }
.fc-tree__top { fill: var(--fc-tree); stroke: var(--fc-ink); stroke-width: 1.4; stroke-linejoin: round; }
.fc-tree__hi { fill: var(--fc-tree-hi); }
/* the crew truck and trailer, from above */
.fc-truck__wheel { fill: var(--fc-ink); }
.fc-truck__trailer { fill: var(--fc-trailer); stroke: var(--fc-ink); stroke-width: 1.4; }
.fc-truck__mesh { fill: none; stroke: var(--fc-ink); stroke-opacity: 0.28; stroke-width: 0.9; }
.fc-truck__gate { fill: var(--fc-gate); stroke: var(--fc-ink); stroke-width: 1.1; }
.fc-truck__can { fill: var(--fc-can); stroke: var(--fc-ink); stroke-width: 1; }
.fc-truck__tongue { stroke: var(--fc-ink); stroke-width: 1.8; }
.fc-truck__body { fill: var(--fc-pure); stroke: var(--fc-ink); stroke-width: 1.6; }
.fc-truck__bed { fill: var(--fc-bed); stroke: var(--fc-ink); stroke-width: 1; }
.fc-truck__ribs { stroke: var(--fc-ink); stroke-opacity: 0.3; stroke-width: 0.9; }
.fc-truck__glass { fill: var(--fc-sky); stroke: var(--fc-ink); stroke-width: 1; }
.fc-truck__roof { fill: var(--fc-clover); stroke: var(--fc-ink); stroke-width: 1.2; }
.fc-truck__hood { stroke: var(--fc-ink); stroke-opacity: 0.35; stroke-width: 1; }
.fc-truck__lamp { fill: var(--fc-sun); }
.fc-truck__mirror { fill: var(--fc-ink); }
.fc-compass__ring { fill: var(--fc-white); stroke: var(--fc-ink); stroke-width: 1.5; }
.fc-compass__needle { fill: var(--fc-orange); stroke: var(--fc-ink); stroke-width: 1.2; stroke-linejoin: round; }
.fc-compass__n { font-family: var(--fc-display); font-size: 12px; fill: var(--fc-ink); }
.fc-scale__a { fill: var(--fc-ink); }
.fc-scale__b { fill: var(--fc-white); }
.fc-scale__box { fill: none; stroke: var(--fc-ink); stroke-width: 1.4; }

/* ---------- the flag, in HTML: the homepage's small orange flag, anywhere ----------
   <span class="fc-flag"><svg aria-hidden="true" focusable="false"><use href="assets/lawn/sprite.svg#fc-i-flag"/></svg></span>
   --date adds the tag a crew writes on: <span class="fc-flag__date"><b>Updated</b> <span data-updated-slot>...</span></span>
   Class-level selectors only (no span.fc-flag), so a page class can place a flag
   (.ga-map__flag { position: absolute }). The homepage's SVG <g class="fc-flag"> ignores
   these box properties. */
.fc-flag {
  --flag: 30px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--flag);
  height: calc(var(--flag) * 1.3);
  vertical-align: bottom;
}
.fc-flag > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fc-flag.fc-flag--lg { --flag: 52px; }
.fc-flag__date {
  position: absolute;
  top: 34%;
  left: 62%;
  display: grid;
  padding: 4px 10px 5px;
  border: var(--fc-line);
  border-radius: 5px;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  transform: rotate(-3deg);
}
.fc-flag__date b { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-orange-ink); }

/* ---------- the rig (truck and trailer, side view) and a house (front view) ---------- */
.fc-rig { display: block; width: min(100%, var(--rig, 320px)); height: auto; aspect-ratio: 132 / 52; overflow: visible; }
.fc-rig--drive { transition: transform 1.6s var(--fc-ease); }
html.js [data-play-on-view]:not(.is-playing) .fc-rig--drive { transform: translateX(-60vw); }
/* <svg class="fc-house" aria-hidden="true" focusable="false"><use href="assets/lawn/sprite.svg#fc-house"/></svg>
   colors: --roof, --wall, --door, --win (windows; .fc-house--lit glows them for dusk scenes) */
.fc-house { display: block; width: var(--house, 150px); height: auto; aspect-ratio: 120 / 100; overflow: visible; }
.fc-house--lit { --win: var(--fc-glow); }
.fc-street { display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 0 10px 22px; background: linear-gradient(transparent calc(100% - 22px), var(--fc-ink) calc(100% - 22px) calc(100% - 20px), var(--fc-road) calc(100% - 20px)); }
/* the mailbox at the end of a driveway (Privacy, Terms: the contact card sits beside it) */
.fc-mailbox { position: relative; display: inline-block; width: var(--box, 150px); }
.fc-mailbox > svg { display: block; width: 100%; height: auto; aspect-ratio: 140 / 170; overflow: visible; }
.fc-mailbox__no {
  position: absolute;
  top: 25%;
  left: 17%;
  width: 46%;
  font-family: var(--fc-display);
  font-size: calc(var(--box, 150px) * 0.12);
  line-height: 1;
  text-align: center;
  color: var(--fc-ink);
}

/* ---------- the mowed lane: one stripe of lawn that holds flags, steps or slips ----------
   Across on wide screens, down the left side on phones. */
.fc-lane {
  --n: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 0 clamp(14px, 2vw, 28px);
  margin: 0;
  padding: 78px 0 0;
  list-style: none;
}
.fc-lane::before {
  content: "";
  position: absolute;
  top: 40px;
  left: -2%;
  right: -2%;
  height: 30px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-stripes);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.25);
}
.fc-lane__stop { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.fc-lane__stop > .fc-flag,
.fc-lane__mark { position: absolute; top: -70px; left: 14px; }
.fc-lane__mark {
  top: -52px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-family: var(--fc-display);
  font-size: 1rem;
  line-height: 1;
}
.fc-lane__when { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-orange-ink); }
.fc-lane__stop > b { font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.fc-lane__stop > p { font-size: 0.975rem; line-height: 1.5; color: var(--fc-ink-2); }
@media (max-width: 759px) {
  .fc-lane { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding: 6px 0 0 64px; }
  .fc-lane::before {
    top: 0;
    bottom: 0;
    left: 12px;
    right: auto;
    width: 26px;
    height: auto;
    background: repeating-linear-gradient(0deg, var(--fc-lawn-a) 0 12px, var(--fc-lawn-b) 12px 24px);
  }
  .fc-lane__stop > .fc-flag { top: -6px; left: -46px; }
  .fc-lane__mark { top: -2px; left: -58px; }
}

/* ---------- turf bars: a bar chart grown from a strip of soil ----------
   <ul class="fc-turfbars" role="list" data-play-on-view><li style="--h:60"><span class="fc-turfbars__val">60</span>
   <span class="fc-turfbars__bar"></span><b>Mar</b></li>...</ul>   --across grows them sideways */
.fc-turfbars {
  --tb-h: 230px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.2vw, 14px);
  height: calc(var(--tb-h) + 34px);
  margin: 0;
  padding: 0 10px 34px;
  list-style: none;
}
.fc-turfbars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  border: var(--fc-line);
  border-radius: 6px;
  background-color: var(--fc-soil);
  background-image:
    radial-gradient(circle, rgba(40, 20, 6, 0.4) 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 228, 190, 0.3) 1.3px, transparent 1.9px);
  background-size: 23px 13px, 31px 17px;
  background-position: 0 0, 7px 5px;
}
.fc-turfbars > li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; }
.fc-turfbars__bar {
  position: relative;
  width: 100%;
  height: calc(var(--h, 50) * 1%);
  border: var(--fc-line);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 10px, var(--fc-lawn-b) 10px 20px);
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--fc-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.fc-turfbars__bar::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -11px;
  height: 12px;
  background: url("../assets/lawn/fringe-grass.svg") 0 100% / auto 100% repeat-x;
}
.fc-turfbars__val { margin-bottom: 14px; font-family: var(--fc-display); font-size: 1rem; line-height: 1; }
.fc-turfbars > li > b {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--fc-chalk);
}
.fc-turfbars__bar--sun { background: repeating-linear-gradient(90deg, var(--fc-sun) 0 10px, var(--fc-sun-3) 10px 20px); }
html.js [data-play-on-view]:not(.is-playing) .fc-turfbars__bar,
html.js .fc-turfbars[data-play-on-view]:not(.is-playing) .fc-turfbars__bar { transform: scaleY(0); }
/* sideways: each row grows to the right from a soil edge on the left */
.fc-turfbars--across { flex-direction: column; align-items: stretch; height: auto; gap: 12px; padding: 0 0 0 34px; }
.fc-turfbars--across::after { top: 0; right: auto; bottom: 0; width: 34px; height: auto; }
.fc-turfbars--across > li { flex-direction: row; justify-content: flex-start; height: auto; min-height: 34px; gap: 10px; }
.fc-turfbars--across .fc-turfbars__bar { width: calc(var(--h, 50) * 1%); height: 30px; border-bottom: var(--fc-line); border-left: 0; border-radius: 0 4px 4px 0; transform-origin: 0 50%; }
.fc-turfbars--across .fc-turfbars__bar::before { top: -2px; bottom: -2px; left: auto; right: -11px; width: 12px; height: auto; transform: rotate(90deg); display: none; }
.fc-turfbars--across .fc-turfbars__val { order: 2; margin: 0; }
.fc-turfbars--across > li > b { position: static; order: 3; color: var(--fc-ink-2); text-align: left; }
html.js .fc-turfbars--across[data-play-on-view]:not(.is-playing) .fc-turfbars__bar,
html.js [data-play-on-view]:not(.is-playing) .fc-turfbars--across .fc-turfbars__bar { transform: scaleX(0); }

/* ==========================================================================
   20. Kit: readouts (odometer, flip, LCD, stopwatch), riveted plates, calendars, schedules
   ========================================================================== */
/* ---------- a readout: a number on a mechanical or LCD counter ----------
   <span class="fc-readout fc-readout--odometer"><span class="fc-readout__value counter" data-count="10000"
   data-format="comma">10,000</span><span class="fc-readout__unit">names</span></span>
   site.js draws one cell per character from the value (the value stays the real text, and a
   main.js .counter can drive it). Without JS the value simply shows in the case. */
.fc-readout {
  --ro: 2.1rem;
  --cell: linear-gradient(var(--fc-wheel-a), var(--fc-wheel-b) 48%, var(--fc-wheel-a));
  --dig: var(--fc-chalk);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: var(--fc-line);
  border-radius: 12px;
  background: var(--fc-asphalt-2);
  box-shadow: var(--fc-chunk), inset 0 0 0 3px rgba(255, 255, 255, 0.06);
  color: var(--dig);
  font-family: var(--fc-mono);
  font-size: var(--ro);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.fc-readout__value { letter-spacing: 0.06em; }
.fc-readout.is-celled .fc-readout__value {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fc-readout__cells { display: inline-flex; gap: 3px; }
.fc-readout__c {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0.82em;
  height: 1.38em;
  padding: 0 0.06em;
  border-radius: 4px;
  background: var(--cell);
  color: var(--dig);
  font-style: normal;
}
.fc-readout__c--p,
.fc-readout__c--s { min-width: 0.34em; padding: 0; background: none; }
.fc-readout__unit {
  font-family: var(--fc-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-chalk-2);
}
/* odometer: the last wheel is white, like the tenths */
.fc-readout--odometer .fc-readout__c:last-child { background: linear-gradient(var(--fc-wheel-lite), var(--fc-pure) 48%, var(--fc-wheel-lite)); color: var(--fc-ink); }
.fc-readout--odometer .fc-readout__c.is-new { animation: fc-roll 0.28s var(--fc-ease); }
@keyframes fc-roll { from { transform: translateY(-22%); opacity: 0.4; } }
/* flip: split-flap cards with the hinge line across the middle */
.fc-readout--flip { --cell: linear-gradient(var(--fc-flap-a) 0 49%, var(--fc-flap-line) 49% 51%, var(--fc-flap-b) 51%); }
.fc-readout--flip .fc-readout__c { border: 1.5px solid var(--fc-flap-line); border-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.fc-readout--flip .fc-readout__c.is-new { animation: fc-flap 0.3s ease-out; }
@keyframes fc-flap { from { transform: perspective(200px) rotateX(-70deg); } }
/* LCD: dark digits on the green-grey glass, the unlit 8s behind them */
.fc-readout--seg {
  --cell: none;
  --dig: var(--fc-lcd-ink);
  background: var(--fc-lcd);
  box-shadow: var(--fc-chunk), inset 0 0 0 4px rgba(0, 0, 0, 0.08), inset 0 3px 6px rgba(0, 0, 0, 0.18);
  font-style: italic;
}
.fc-readout--seg .fc-readout__c { min-width: 0.66em; }
.fc-readout--seg .fc-readout__c::before { content: attr(data-ghost); position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.11; }
.fc-readout--seg .fc-readout__unit { color: var(--fc-lcd-ink); }
/* stopwatch: the LCD in a round steel case with the crown on top */
.fc-readout--stopwatch {
  --cell: none;
  --dig: var(--fc-lcd-ink);
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 7.2em;
  height: 7.2em;
  padding: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 80%, var(--fc-steel-b) 81% 89%, var(--fc-steel-a) 90% 99%, transparent 100%),
    radial-gradient(circle closest-side, var(--fc-white) 0 64%, transparent 65%),
    repeating-conic-gradient(from -1deg, var(--fc-ink) 0 2deg, transparent 2deg 30deg),
    var(--fc-white);
  font-size: calc(var(--ro) * 0.62);
  font-style: italic;
}
.fc-readout--stopwatch::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 22px;
  height: 16px;
  margin-left: -11px;
  border: var(--fc-line);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(90deg, var(--fc-steel-b), var(--fc-steel-a), var(--fc-steel-b));
}
.fc-readout--stopwatch .fc-readout__cells,
.fc-readout--stopwatch:not(.is-celled) .fc-readout__value { padding: 5px 7px; border: 1.5px solid var(--fc-ink); border-radius: 6px; background: var(--fc-lcd); }
.fc-readout--stopwatch .fc-readout__c { min-width: 0.64em; height: 1.2em; }
.fc-readout--stopwatch .fc-readout__unit { color: var(--fc-ink-2); font-style: normal; font-size: 0.55em; }

/* ---------- a riveted plate: steel or brass, stamped letters ---------- */
.fc-plate {
  --pl-a: var(--fc-steel-a);
  --pl-b: var(--fc-steel-b);
  position: relative;
  display: grid;
  gap: 8px;
  padding: 26px 30px 24px;
  border: var(--fc-line);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 3px),
    linear-gradient(var(--pl-a), var(--pl-b));
  box-shadow: var(--fc-chunk), inset 0 0 0 4px rgba(255, 255, 255, 0.32);
  color: var(--fc-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* four rivets */
.fc-plate::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.9) 0 1.2px, var(--pl-b) 1.8px 3.6px, var(--fc-ink) 3.8px 5px, transparent 5.4px) 0 0 / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.9) 0 1.2px, var(--pl-b) 1.8px 3.6px, var(--fc-ink) 3.8px 5px, transparent 5.4px) 100% 0 / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.9) 0 1.2px, var(--pl-b) 1.8px 3.6px, var(--fc-ink) 3.8px 5px, transparent 5.4px) 0 100% / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.9) 0 1.2px, var(--pl-b) 1.8px 3.6px, var(--fc-ink) 3.8px 5px, transparent 5.4px) 100% 100% / 10px 10px no-repeat;
  pointer-events: none;
}
.fc-plate--brass { --pl-a: var(--fc-brass-hi); --pl-b: var(--fc-brass); }
.fc-plate__title {
  font-family: var(--fc-display);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fc-plate__rows { display: grid; gap: 5px; margin: 4px 0 0; }
.fc-plate__rows div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 5px; border-top: 1.5px solid rgba(22, 58, 37, 0.22); }
.fc-plate__rows dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.fc-plate__rows dd { margin: 0 0 0 auto; font-family: var(--fc-mono); font-weight: 700; }
/* a metal hang tag (same markup as .fc-tag) */
.fc-tag--metal { --tag: linear-gradient(var(--fc-steel-a), var(--fc-steel-b)); }
.fc-tag--metal .fc-tag__body { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.fc-tag--brass { --tag: linear-gradient(var(--fc-brass-hi), var(--fc-brass)); }

/* ---------- wall calendars: one month, or the year at a glance ----------
   A day or a month can hold a .fc-circle (marker circle), a small .fc-sticky, or a check. */
.fc-cal {
  position: relative;
  margin: 0;
  padding: 30px clamp(12px, 2vw, 22px) clamp(14px, 2vw, 22px);
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
}
/* the spiral binding across the top */
.fc-cal::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 16px;
  right: 16px;
  height: 20px;
  background: radial-gradient(circle at 50% 70%, var(--fc-paper) 0 3.5px, var(--fc-ink) 3.8px 5.2px, transparent 5.6px) 0 0 / 22px 20px repeat-x,
    repeating-linear-gradient(90deg, transparent 0 8px, var(--fc-steel-c) 8px 11px, transparent 11px 22px) 0 0 / 100% 12px no-repeat;
}
.fc-cal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: -6px calc(-1 * clamp(12px, 2vw, 22px)) 12px;
  padding: 10px clamp(12px, 2vw, 22px);
  border-block: var(--fc-line);
  background: var(--cal, var(--fc-orange));
  color: var(--fc-ink-deep);
}
.fc-cal__head b { font-family: var(--fc-display); font-size: 1.35rem; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.fc-cal__head span { font-weight: 800; }
.fc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.fc-cal__dow { padding: 2px 0 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-align: center; color: var(--fc-ink-2); }
.fc-cal__day {
  position: relative;
  min-height: 46px;
  padding: 3px 5px;
  border: 1.5px dashed rgba(22, 58, 37, 0.2);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.fc-cal__dow + .fc-cal__day,
.fc-cal__day[style*="--start"] { grid-column-start: var(--start, 1); }
.fc-cal__day > .fc-circle { position: relative; z-index: 1; }
.fc-cal__day.is-marked { border-style: solid; border-color: var(--fc-ink); background: var(--fc-sun-2); }
.fc-cal__note { position: absolute; z-index: 2; left: 50%; top: 22px; padding: 10px 9px 8px; font-size: 0.72rem; transform: translateX(-30%) rotate(4deg); white-space: nowrap; }
/* the year: twelve month boxes */
.fc-cal--year { padding-top: 28px; }
.fc-cal__months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 899px) { .fc-cal__months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fc-cal__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fc-cal__m {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 92px;
  padding: 6px 7px 8px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-white);
  font-size: 0.8rem;
  line-height: 1.3;
}
.fc-cal__m > b {
  justify-self: start;
  font-family: var(--fc-display);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: uppercase;
}
.fc-cal__m.is-marked { background: var(--fc-sun-2); }
.fc-cal__m .fc-sticky { justify-self: center; padding: 10px 8px 7px; font-size: 0.78rem; transform: rotate(3deg); }
.fc-cal--empty .fc-cal__m { background-image: repeating-linear-gradient(transparent 0 21px, rgba(22, 58, 37, 0.1) 21px 22px); background-position: 0 30px; }
/* a bracket under the boxes, with its label */
.fc-cal > figcaption:not(.fc-cal__bracket) { display: block; margin-top: 14px; }
.fc-cal__bracket {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 12px 4px 0;
  padding-top: 28px;
}
.fc-cal__bracket::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  border: 3px solid var(--fc-ink);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.fc-cal__bracket::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 3px;
  height: 10px;
  margin-left: -1.5px;
  background: var(--fc-ink);
}

/* ---------- the schedule strip: bars scaled to days, a flag at the start, an end mark ----------
   <figure class="fc-season fc-season--schedule" style="--days:180"> ... <li class="fc-season__bar"
   style="--d:90"> ... two rows sharing one scale read as "twice as long" at a glance. */
.fc-season--schedule .fc-season__bars { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding-top: 18px; background: none; }
.fc-season--schedule .fc-season__bar {
  grid-column: auto;
  display: grid;
  gap: 8px;
  padding: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  color: var(--fc-ink);
  font-size: 0.95rem;
  font-weight: 600;
}
.fc-season--schedule .fc-season__bar::after { content: none; }
.fc-season__run {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: calc(var(--d, 30) / var(--days, 180) * 100%);
  min-width: 60px;
  height: 36px;
}
.fc-season__run > .fc-flag { --flag: 26px; position: absolute; left: -4px; bottom: 10px; }
.fc-season__run::before {
  content: "";
  flex: 1;
  height: 16px;
  border: var(--fc-line);
  border-radius: 3px;
  background: var(--bar, var(--fc-sun));
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.25);
}
.fc-season__run--end::after {
  content: "";
  flex: none;
  width: 4px;
  height: 30px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--fc-ink);
}
.fc-season__scale { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 6px; border-top: 1.5px dashed rgba(22, 58, 37, 0.35); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fc-ink-2); }

/* ==========================================================================
   21. Kit: pairs, and more paper: the vs pair, dictionary entry, laminated card, slips and
   tickets, change order, tear-off stub, callout pins, price tag, note card, receipt
   accordion, estimate variants, blank checklists and field lines, stickers, the companion,
   the carousel, the sample site, browser variants, carbon FAQ, the sheet dialog skin
   ========================================================================== */
/* ---------- the vs pair: two objects compared, a rubber-stamped "vs" between ----------
   stacks on phones with the stamp between them; --tilt-free for text-heavy pairs */
.fc-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
}
.fc-vs__a,
.fc-vs__b { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; min-width: 0; }
.fc-vs__a { transform: rotate(calc(var(--fc-tilt-sheet) * -1)); }
.fc-vs__b { transform: rotate(var(--fc-tilt-sheet)); }
/* paper inside a side sits level to it, so the two tilts never stack past the budget */
.fc-vs__a > :is(.fc-note-card, .fc-receipt, .fc-slip),
.fc-vs__b > :is(.fc-note-card, .fc-receipt, .fc-slip) { transform: none; }
.fc-vs--tilt-free .fc-vs__a,
.fc-vs--tilt-free .fc-vs__b { transform: none; }
.fc-vs__stamp {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 4px solid var(--fc-orange-ink);
  border-radius: 50%;
  color: var(--fc-orange-ink);
  font-family: var(--fc-display);
  font-size: 1.7rem;
  line-height: 1;
  transform: rotate(-12deg);
  -webkit-mask: url("../assets/lawn/paint.svg") 0 0 / 150px;
  mask: url("../assets/lawn/paint.svg") 0 0 / 150px;
}
.fc-vs__label {
  display: inline-block;
  padding: 6px 16px 7px;
  background: rgba(244, 230, 190, 0.95);
  color: var(--fc-ink);
  font-family: var(--fc-hand);
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  box-shadow: 1px 2px 0 rgba(22, 58, 37, 0.18);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 8%, 3px 30%, 0 52%, 4px 76%, 0 100%, 100% 100%, calc(100% - 4px) 72%, 100% 48%, calc(100% - 3px) 24%, 100% 0);
}
@media (max-width: 759px) {
  .fc-vs { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .fc-vs__a, .fc-vs__b { width: 100%; transform: none; }
  .fc-vs__stamp { width: 58px; height: 58px; font-size: 1.4rem; transform: rotate(-8deg); }
}

/* ---------- a dictionary entry ---------- */
.fc-dict {
  position: relative;
  max-width: 36rem;
  padding: 26px clamp(18px, 3vw, 32px) 22px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-thermal);
  box-shadow: var(--fc-chunk);
}
.fc-dict::after {
  content: attr(data-letter);
  position: absolute;
  top: 18px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 40px;
  border: var(--fc-line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--fc-ink);
  color: var(--fc-sun);
  font-family: var(--fc-display);
  font-size: 1rem;
}
.fc-dict:not([data-letter])::after { display: none; }
.fc-dict__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 10px; border-bottom: 2px solid var(--fc-ink); }
.fc-dict__word b { font-family: var(--fc-display); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); font-weight: 400; line-height: 1; }
.fc-dict__say { font-family: var(--fc-mono); font-size: 0.95rem; color: var(--fc-ink-2); }
.fc-dict__pos { font-style: italic; font-weight: 600; color: var(--fc-orange-ink); }
.fc-dict__defs { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 1.5em; }
.fc-dict__defs li::marker { font-weight: 800; }
.fc-dict__see { margin-top: 12px; font-size: 0.95rem; font-style: italic; color: var(--fc-ink-2); }

/* ---------- a laminated card, zip-tied up ---------- */
.fc-laminate {
  position: relative;
  max-width: 26rem;
  padding: 14px;
  border: 2px solid rgba(22, 58, 37, 0.45);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: var(--fc-chunk), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  transform: rotate(-0.8deg);
}
.fc-laminate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.28) 26%, transparent 32%);   /* a narrow, soft shine: it never washes out a column of words */
  pointer-events: none;
}
.fc-laminate__card { display: grid; gap: 10px; padding: 22px 20px 18px; border: var(--fc-line); border-radius: 8px; background: var(--fc-white); }
.fc-laminate > .fc-ziptie { top: -24px; }

/* ---------- a slip: call slip, ticket, packing slip ---------- */
.fc-slip { position: relative; width: min(100%, 320px); filter: var(--fc-outline) drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.3)); transform: rotate(-1deg); }
.fc-slip__paper {
  display: grid;
  gap: 10px;
  padding: 20px 18px 18px;
  background: var(--slip, var(--fc-sheet));
  font-size: 0.92rem;
  -webkit-mask: radial-gradient(circle 4px at 8px 0, #0000 96%, #000) 0 0 / 16px 100% repeat-x;
  mask: radial-gradient(circle 4px at 8px 0, #0000 96%, #000) 0 0 / 16px 100% repeat-x;
}
.fc-slip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; border-bottom: 3px double var(--fc-ink); }
.fc-slip__head b { font-family: var(--fc-display); font-size: 1.15rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.fc-slip__no { font-weight: 800; letter-spacing: 0.1em; color: var(--fc-red-ink); font-variant-numeric: tabular-nums; }
.fc-slip__rows { display: grid; gap: 6px; margin: 0; }
.fc-slip__rows div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.fc-slip__rows dt { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }
.fc-slip__rows dd { margin: 0; font-weight: 700; }
.fc-slip__rows .fc-hw { font-family: var(--fc-hand); font-weight: 400; font-size: 1.05rem; color: var(--fc-ballpoint); }
.fc-slip__foot { padding-top: 8px; border-top: 1.5px dashed rgba(22, 58, 37, 0.35); font-size: 0.82rem; color: var(--fc-ink-2); }
/* a ticket: notches bitten out of both sides */
.fc-slip--ticket .fc-slip__paper {
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  padding-inline: 26px;
}
.fc-slip--ticket { --slip: var(--fc-carbon-yellow); }
/* a packing slip: a barcode along the bottom */
.fc-slip__code { height: 34px; background: repeating-linear-gradient(90deg, var(--fc-ink) 0 2px, transparent 2px 4px, var(--fc-ink) 4px 7px, transparent 7px 8px, var(--fc-ink) 8px 9px, transparent 9px 12px); }
/* a handwriting "fill-in" anywhere */
.fc-hw { font-family: var(--fc-hand); font-weight: 400; color: var(--fc-ballpoint); }
/* Permanent Marker has one weight (400): a <b> or <strong> in a fill-in keeps it */
.fc-hw :where(b, strong) { font-weight: 400; }

/* ---------- a change order stapled over the original work order ----------
   <div class="fc-stackup"><div class="fc-order">(original)</div><div class="fc-order fc-order--change">...</div></div> */
.fc-stackup { display: grid; max-width: 880px; margin: 0 auto; }
.fc-stackup > * { grid-area: 1 / 1; width: auto; max-width: none; margin: 0; }
.fc-stackup > :first-child { transform: translate(-14px, -12px) rotate(-1.4deg); filter: saturate(0.75); }
.fc-stackup > :first-child .fc-order__paper { opacity: 0.8; }
.fc-stackup > :last-child { z-index: 2; margin: 40px 0 0 24px; }
@media (max-width: 640px) { .fc-stackup > :last-child { margin: 30px 0 0 8px; } }
.fc-order--change .fc-order__paper { background-color: var(--fc-carbon-yellow); }
.fc-order--change .fc-order__title { color: var(--fc-red-ink); }
.fc-order--change .fc-staple { top: 14px; left: 20px; }
/* a perforated tear-off stub along the bottom of a form */
.fc-order__stub {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 28px calc(-1 * clamp(18px, 4vw, 46px)) -44px;
  padding: 22px clamp(18px, 4vw, 46px) 48px;
  border-top: 3px dashed var(--fc-ink);
  background: var(--fc-sun-2);
}
.fc-order__stub::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 18px;
  width: 26px;
  height: 22px;
  background: var(--fc-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Ccircle cx='6' cy='6' r='4' fill='none' stroke='%23163A25' stroke-width='2'/%3E%3Ccircle cx='6' cy='16' r='4' fill='none' stroke='%23163A25' stroke-width='2'/%3E%3Cpath d='M9 8L24 16M9 14L24 6' stroke='%23163A25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* ---------- numbered callout pins over any figure, with the key as a real list ---------- */
.fc-callouts { display: grid; gap: 18px; }
.fc-callouts__fig { position: relative; }
.fc-callout {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-orange);
  box-shadow: 2px 2px 0 var(--fc-ink);
  color: var(--fc-ink-deep);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  translate: -50% -50%;
}
.fc-callouts__key { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: co; }
.fc-callouts__key li { position: relative; padding-left: 42px; counter-increment: co; line-height: 1.45; }
.fc-callouts__key li::before {
  content: counter(co);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-orange);
  font-size: 0.8rem;
  font-weight: 800;
}
@media (min-width: 900px) { .fc-callouts--side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 36px; } }

/* ---------- a price tag that turns over (a hang tag with a big price) ----------
   The front and the back are both in the page; without JS both show, stacked. */
.fc-tag .fc-tag__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--fc-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  line-height: 1;
}
.fc-tag .fc-tag__price small { font-family: var(--fc-body); font-size: 0.95rem; font-weight: 800; }
.fc-tag__face { display: grid; gap: 8px; }
.fc-tag__flip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 14px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  color: var(--fc-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}
html:not(.js) .fc-tag__flip { display: none; }
html.js .fc-tag--price:not(.is-flipped) .fc-tag__back,
html.js .fc-tag--price.is-flipped .fc-tag__front { display: none; }
.fc-tag--price.is-turning .fc-tag__body { animation: fc-tagturn 0.4s var(--fc-ease); }
@keyframes fc-tagturn { 0% { transform: scaleX(1); } 45% { transform: scaleX(0.05); } 100% { transform: scaleX(1); } }

/* ---------- the replay button: plays a scene again ([data-replay="#scene"], site.js) ---------- */
.fc-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  color: var(--fc-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}
.fc-replay::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8a5 5 0 1 1-1.6-3.7' fill='none' stroke='%23163A25' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12.6 1.6v3.3H9.3' fill='none' stroke='%23163A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:not(.js) .fc-replay { display: none; }
@media (prefers-reduced-motion: reduce) { .fc-replay { display: none; } }
/* a sticky note held by a fastener drops its own strip of tape */
.fc-sticky:has(> .fc-pushpin, > .fc-magnet, > .fc-tapestrip, > .fc-clothespin)::before { display: none; }

/* ---------- a stapled note card (use it where a page would reach for a colored callout box) ---------- */
.fc-note-card {
  position: relative;
  display: grid;
  gap: 8px;
  max-width: 32rem;
  padding: 22px 22px 18px;
  border: var(--fc-line);
  border-radius: 4px;
  background: linear-gradient(transparent 0 46px, rgba(180, 35, 24, 0.4) 46px 48px, transparent 48px), var(--fc-white);
  box-shadow: 4px 4px 0 rgba(22, 58, 37, 0.35);
  transform: rotate(-0.6deg);
}
.fc-note-card__head { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--fc-red-ink); }
.fc-note-card p { line-height: 1.5; }

/* ---------- the receipt accordion (main.js .acc-row / .acc-head): lines that tear open ---------- */
.fc-accs {
  max-width: 760px;
  margin: 0 auto;
  padding: 6px clamp(14px, 3vw, 26px);
  border: var(--fc-line);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(22, 58, 37, 0.05), transparent 10%, transparent 90%, rgba(22, 58, 37, 0.05)), var(--fc-thermal);
  box-shadow: var(--fc-chunk);
  font-family: var(--fc-mono);
}
.acc-row { border-bottom: 2px dashed rgba(22, 58, 37, 0.3); }
.acc-row:last-child { border-bottom: 0; }
.acc-head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 0 12px;
  border: 0;
  background: none;
  color: var(--fc-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.acc-head .fc-line__dots { flex: 1 1 18px; min-width: 18px; margin-bottom: 0.4em; border-bottom: 3px dotted rgba(22, 58, 37, 0.4); }
.acc-head::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-sun);
  font-family: var(--fc-body);
  font-weight: 800;
  line-height: 1;
}
.acc-row.open > .acc-head::after { content: "\2212"; background: var(--fc-orange); }
.acc-body { padding: 14px 4px 18px; font-family: var(--fc-body); color: var(--fc-ink-2); }
.acc-body > * + * { margin-top: 0.7em; }
html.js .acc-row:not(.open) > .acc-body { display: none; }
html.js .acc-row.open > .acc-body {
  margin: 0 calc(-1 * clamp(14px, 3vw, 26px));
  padding-inline: calc(clamp(14px, 3vw, 26px) + 4px);
  background: var(--fc-paper-2);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 14px 7px repeat-x, linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 14px 7px repeat-x, linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
  animation: fc-tear 0.35s var(--fc-ease);
}
@keyframes fc-tear { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ---------- estimates: two side by side; optional header art (the mower sizes) ---------- */
@media (min-width: 980px) {
  .fc-estimates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
.fc-estimate__art { margin: -4px -6px 2px; padding-bottom: 8px; border-bottom: 2px dashed rgba(22, 58, 37, 0.25); }
.fc-estimate__art svg { display: block; width: 100%; height: 76px; overflow: visible; }

/* ---------- blank forms: empty boxes, blank handwriting lines ---------- */
.fc-checklist--blank li::after { display: none; }
.fc-field-line {
  display: inline-block;
  min-width: var(--w, 9em);
  height: 1.25em;
  border-bottom: 2px solid var(--fc-ink-2);
  vertical-align: -0.3em;
}
.fc-field-line--full { display: block; width: 100%; min-width: 0; height: 2em; }
.fc-fields { display: grid; gap: 14px; margin: 0; }
.fc-fields div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px; }
.fc-fields dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }
.fc-fields dd { margin: 0; min-height: 1.6em; border-bottom: 2px solid var(--fc-ink-2); }

/* ---------- stickers: raster art (mascots, Shmello) seated in the flat drawing ----------
   a die-cut cream border that follows the art, the 2px ink outline, a chunk shadow, a size cap */
.fc-sticker { display: inline-block; max-width: var(--sticker, 220px); }
.fc-sticker img,
.fc-sticker:where(img) {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(4px 0 0 var(--fc-white)) drop-shadow(-4px 0 0 var(--fc-white)) drop-shadow(0 4px 0 var(--fc-white)) drop-shadow(0 -4px 0 var(--fc-white))
    drop-shadow(2px 0 0 var(--fc-ink)) drop-shadow(-2px 0 0 var(--fc-ink)) drop-shadow(0 2px 0 var(--fc-ink)) drop-shadow(0 -2px 0 var(--fc-ink))
    drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.85));
}
/* a round sale sticker */
.fc-sticker--round {
  display: grid;
  place-content: center;
  width: var(--sticker, 132px);
  aspect-ratio: 1;
  max-width: none;
  padding: 10px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 58%, var(--fc-ink) 58.5% 59.5%, transparent 60%), var(--sticker-bg, var(--fc-sun));
  box-shadow: var(--fc-chunk);
  color: var(--fc-ink);
  line-height: 1;
  text-align: center;
  transform: rotate(-12deg);
}
.fc-sticker--round b { font-family: var(--fc-display); font-size: calc(var(--sticker, 132px) * 0.2); font-weight: 400; }
.fc-sticker--round span { font-size: calc(var(--sticker, 132px) * 0.1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fc-sticker--orange { --sticker-bg: var(--fc-orange); }

/* ---------- the companion: one per page at most, in a corner, never over text ----------
   Hidden under 1440px (below that the 1280px column's right gutter is too narrow, and the
   sticker reaches the ends of lines). The speech bubble sits above the sticker, inside the
   gutter; it shows on hover or focus, and always from 1700px. .is-away hides it for a while (the
   page's script decides when: while the hero shows, while a full-width row passes behind it).
   A dismiss button hides it for the visit (site.js). Static with reduced motion. */
.fc-companion {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--fc-z-companion);
  display: none;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
@media (min-width: 1440px) { .fc-companion { display: flex; } }
.fc-companion[hidden] { display: none !important; }
.fc-companion { transition: opacity 0.3s, visibility 0s; }
.fc-companion.is-away { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
.fc-companion__art { position: relative; width: var(--companion, 92px); pointer-events: auto; animation: fc-bob 3.2s ease-in-out 2; }
.fc-companion__art img { display: block; width: 100%; height: auto; }
.fc-companion__say {
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  width: max-content;
  max-width: 200px;
  padding: 10px 14px;
  border: var(--fc-line);
  border-radius: 16px 16px 4px 16px;
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s linear 0.2s;
  pointer-events: auto;
}
.fc-companion:hover .fc-companion__say,
.fc-companion:focus-within .fc-companion__say { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 1700px) { .fc-companion__say { opacity: 1; visibility: visible; } }
.fc-companion__x {
  position: absolute;
  top: -12px;
  right: -12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.fc-companion__x::before {
  content: "\00D7";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  color: var(--fc-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
@keyframes fc-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }

/* ---------- the carousel: a row of objects on a pegboard, with arrows (site.js) ---------- */
.fc-carousel { position: relative; }
.fc-carousel__track {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  padding: 34px 6px 22px;
  scrollbar-width: none;
}
.fc-carousel__track::-webkit-scrollbar { display: none; }
.fc-carousel__item { position: relative; flex: 0 0 min(80%, 340px); scroll-snap-align: start; }
.fc-carousel__bar { display: flex; justify-content: flex-end; gap: 12px; }
.fc-carousel__prev,
.fc-carousel__next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  color: var(--fc-ink);
  cursor: pointer;
}
.fc-carousel__prev svg,
.fc-carousel__next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fc-carousel__prev:disabled,
.fc-carousel__next:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
html:not(.js) .fc-carousel__bar { display: none; }

/* ---------- the sample site ("Your Lawn Company"), drawn: desktop or --mobile ---------- */
.fc-samplesite { position: relative; display: grid; gap: 10px; padding: 18px 18px 22px; background: var(--fc-pure); }
.fc-samplesite__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 800; }
.fc-samplesite__nav span { padding: 4px 10px; border-radius: 8px; background: var(--fc-clover-2); color: var(--fc-pure); font-size: 0.75rem; }
.fc-samplesite__hero {
  display: grid;
  gap: 8px;
  padding: 22px 18px;
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 34px, var(--fc-lawn-b) 34px 68px);
  color: var(--fc-ink-deep);
}
.fc-samplesite__hero b { max-width: 14em; padding: 6px 10px; border-radius: 8px; background: rgba(255, 253, 246, 0.92); font-family: var(--fc-display); font-size: 1.3rem; font-weight: 400; line-height: 1.15; }
.fc-samplesite__hero em { justify-self: start; padding: 6px 12px; border: 2px solid var(--fc-ink); border-radius: 8px; background: var(--fc-orange); font-size: 0.85rem; font-style: normal; font-weight: 800; }
.fc-samplesite__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fc-samplesite__rows i { height: 46px; border-radius: 8px; background: var(--fc-mint); }
.fc-samplesite--mobile { padding: 12px 10px 14px; }
.fc-samplesite--mobile .fc-samplesite__nav span { padding: 3px 8px; font-size: 0.66rem; }
.fc-samplesite--mobile .fc-samplesite__hero { padding: 14px 10px; }
.fc-samplesite--mobile .fc-samplesite__hero b { font-size: 1rem; }
.fc-samplesite--mobile .fc-samplesite__rows { grid-template-columns: 1fr; }
.fc-samplesite--mobile .fc-samplesite__rows i { height: 30px; }

/* ---------- browser variants: a stack of frames, or hung on a pegboard ---------- */
.fc-browser--stack {
  box-shadow:
    -12px -12px 0 -2px var(--fc-paper-2), -12px -12px 0 0 var(--fc-ink),
    -24px -24px 0 -2px var(--fc-white), -24px -24px 0 0 var(--fc-ink),
    var(--fc-chunk-lg);
  margin: 24px 0 0 24px;
}
.fc-browser--hang { margin-top: 34px; }
.fc-browser--hang > .fc-hook:first-child { left: 18%; }
.fc-browser--hang > .fc-hook + .fc-hook { left: 82%; }
.fc-browser--hang > .fc-tapestrip { top: -10px; }

/* ==========================================================================
   22. Kit: the closing band's sanctioned variants, and the legal sheet's parts
   Every variant keeps section#check. The ZIP variants keep input#zip-bottom.
   ========================================================================== */
/* ---------- the ZIP on a carbon order ticket: the ZIP is the blank line, the button signs it ---------- */
.fc-cta__board--order,
.fc-cta__board--sign,
.fc-cta__board--slip { padding: 0; border: 0; background: none; box-shadow: none; }
.fc-cta__board--order > .fc-board__clip,
.fc-cta__board--sign > .fc-board__clip,
.fc-cta__board--slip > .fc-board__clip { display: none; }
.fc-cta__board--order { transform: rotate(1deg); }
.fc-cta__board--order .fc-cta__paper {
  padding-top: 20px;
  border-radius: 4px;
  background: var(--fc-sheet);
  box-shadow: 7px 7px 0 -2px var(--fc-carbon-yellow), 7px 7px 0 0 var(--fc-ink), 14px 14px 0 -2px var(--fc-carbon-pink), 14px 14px 0 0 var(--fc-ink);
  transform: rotate(-1.4deg);
}
.fc-cta__ticket {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 4px double var(--fc-ink);
}
.fc-cta__ticket b { font-family: var(--fc-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.fc-cta__ticket span { font-weight: 800; letter-spacing: 0.12em; color: var(--fc-red-ink); font-variant-numeric: tabular-nums; }
.fc-cta__board--order .fc-zip input {
  border: 0;
  border-bottom: 2px solid var(--fc-ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--fc-hand);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--fc-ballpoint);
}
.fc-cta__board--order .fc-zip__row { align-items: flex-end; }
.fc-cta__signed { width: 100%; margin-top: -8px; padding-top: 6px; border-top: 1.5px solid var(--fc-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }

/* ---------- the ZIP printed on a yard sign (stakes into a strip of lawn) ---------- */
.fc-cta__board--sign { margin-bottom: 96px; transform: rotate(-1.2deg); }
.fc-cta__board--sign .fc-cta__paper {
  position: relative;
  z-index: 1;
  padding: 28px clamp(18px, 3vw, 30px) 26px;
  border-radius: var(--fc-r1);
  background-color: var(--fc-white);
  background-image: repeating-linear-gradient(0deg, rgba(22, 58, 37, 0.045) 0 1px, transparent 1px 6px);
  box-shadow: var(--fc-chunk-lg);
  transform: none;
}
.fc-cta__board--sign::before {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: -84px;
  height: 120px;
  border-inline: 4px solid var(--fc-ink);
}
.fc-cta__board--sign::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -104px;
  height: 28px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-stripes);
}
/* ---------- the ZIP on a packing slip taped to a box ---------- */
.fc-cta__board--slip {
  padding: 40px clamp(18px, 3vw, 34px) 30px;
  border: var(--fc-line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent calc(50% - 40px), rgba(201, 140, 83, 0.55) calc(50% - 40px) calc(50% + 40px), transparent calc(50% + 40px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(transparent calc(100% - 3px), rgba(22, 58, 37, 0.3) calc(100% - 3px)) 0 0 / 100% 60px no-repeat,
    var(--fc-kraft);
  box-shadow: var(--fc-chunk-lg);
  transform: rotate(1deg);
}
.fc-cta__board--slip .fc-cta__paper { border-radius: 2px; transform: rotate(-2deg); box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.25); }
.fc-cta__board--slip .fc-cta__paper::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  border: 1px solid rgba(22, 58, 37, 0.2);
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(-2deg);
}
/* ---------- one small page object beside the words (a bill, a phone, a stopwatch) ---------- */
.fc-cta__prop { display: flex; justify-content: center; max-width: 260px; margin-top: clamp(24px, 3vw, 40px); transform: rotate(-3deg); }
@media (min-width: 960px) { .fc-cta__prop { margin-left: 8%; } }

/* ---------- --edge: the quiet closing strip (legal pages): one line, the form on a mowed edge ---------- */
.fc-cta--edge {
  padding: clamp(40px, 5vw, 64px) 0 0;
  background: none;
  color: var(--fc-ink);
}
.fc-cta__edge { position: relative; display: grid; gap: 16px; justify-items: start; padding-bottom: clamp(36px, 5vw, 56px); }
.fc-cta__line { font-family: var(--fc-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; }
.fc-cta--edge .fc-zip { width: min(100%, 560px); }
.fc-cta--edge .fc-edge { position: relative; height: 26px; }
.fc-cta--edge .fc-edge > .fc-flag { position: absolute; right: clamp(20px, 6vw, 90px); bottom: 22px; }
.fc-cta--edge .fc-fringe { display: none; }

.fc-cta__copy .btn-ghost { border-color: rgba(14, 40, 25, 0.55); color: var(--fc-ink-deep); }

/* ==========================================================================
   The legal sheet's parts: a scene beside a section, the table that stacks, the stops as a
   route line, the stapled note, the flag that carries the date
   ========================================================================== */
.fc-sheet--wide { max-width: 1120px; }
.fc-sheet__body:has(.fc-sheet__row) { max-width: none; }
.fc-sheet__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 44px; margin-top: 2.2em; }
.fc-sheet__row > h2 { margin-top: 0; }
.fc-sheet__text > * + * { margin-top: 0.9em; }
.fc-sheet__scene { justify-self: center; width: min(100%, 280px); margin: 6px 0 4px; }
@media (min-width: 960px) {
  .fc-sheet__row { grid-template-columns: minmax(0, 68ch) minmax(220px, 280px); grid-template-areas: "h h" "text scene"; }
  .fc-sheet__row > h2 { grid-area: h; }
  .fc-sheet__text { grid-area: text; }
  .fc-sheet__scene { grid-area: scene; align-self: start; justify-self: stretch; width: auto; margin: 4px 0 0; }
}
/* a comparison table that turns into labeled cards on phones (each cell carries data-label) */
@media (max-width: 759px) {
  .fc-score-wrap:has(.fc-score--stack) { overflow: visible; border: 0; background: none; box-shadow: none; }
  .fc-score--stack caption { border: var(--fc-line); border-radius: var(--fc-r1) var(--fc-r1) 0 0; }
  .fc-score--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fc-score--stack tbody,
  .fc-score--stack tr,
  .fc-score--stack th,
  .fc-score--stack td { display: block; }
  .fc-score--stack tr { margin-top: 12px; border: var(--fc-line); border-radius: 10px; background: var(--fc-white); box-shadow: 3px 3px 0 var(--fc-ink); overflow: hidden; }
  .fc-score--stack tbody tr:nth-child(even) { background: var(--fc-white); }
  .fc-score--stack tbody th { padding: 10px 12px; border-bottom: var(--fc-line); background: var(--fc-paper-2); }
  .fc-score--stack td { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; padding: 8px 12px; }
  .fc-score--stack td::before { content: attr(data-label); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-ink-2); }
  .fc-score--stack .is-us { border-inline: 0; }
}
/* the jump links as a crew's route: numbered stops on one dotted line, two rows on desktop */
.fc-stops--line ol::before { display: none; }
@media (min-width: 760px) {
  .fc-stops--line ol {
    --per: 5;
    display: grid;
    grid-template-columns: repeat(var(--per), minmax(0, 1fr));
    row-gap: 18px;
    column-gap: 0;
  }
  .fc-stops--line li { position: relative; }
  .fc-stops--line li::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 50%;
    right: -50%;
    border-top: 3px dotted var(--fc-orange-ink);
  }
  .fc-stops--line li:nth-child(5n)::before,
  .fc-stops--line li:last-child::before { display: none; }
  .fc-stops--line a { position: relative; flex-direction: column; gap: 6px; padding: 3px 6px 0; text-align: center; font-size: 0.92rem; }
  .fc-stops--line a::before { background: var(--fc-white); }
  .fc-stops--6 ol { --per: 6; }
  .fc-stops--6 li:nth-child(5n)::before { display: block; }
  .fc-stops--6 li:nth-child(6n)::before,
  .fc-stops--6 li:last-child::before { display: none; }
}
@media (max-width: 759px) {
  .fc-stops--line ol::before { display: block; }
}

/* ==========================================================================
   23. Motion off: every piece is drawn in its finished state. Idle: loops rest off screen.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fc-tape__track,
  .fc-stringline__track,
  .fc-phone--buzz,
  .fc-phone__buzz,
  .fc-puff,
  .fc-d-beam,
  .fc-pin.is-on .fc-pin__halo,
  .fc-packet .fc-sun,
  .fc-giant span,
  .fc-k,
  .fc-mark__line path { animation: none !important; }
  .fc-d-beam { opacity: 1; }
  .fc-tape__toggle { display: none; }
  .fc-stringline__viewport { overflow-x: auto; scroll-snap-type: x proximity; }
  .fc-stringline .fc-pause { display: none; }
  .fc-card__inner { transition: none; }
  .fc-companion__art,
  .fc-bubble--typing i,
  .fc-flag__cloth { animation: none !important; }
}

/* Sections scrolled out of view hold their animations (site.js adds .fc-idle), so the few
   decorative loops play when you arrive, not while you read something else. */
.fc-idle,
.fc-idle *,
.fc-idle *::before,
.fc-idle *::after { animation-play-state: paused !important; }
/* a scene held by its pause button (<button class="fc-pause" data-pause-for="#id">, site.js) */
.fc-paused,
.fc-paused *,
.fc-paused *::before,
.fc-paused *::after { animation-play-state: paused !important; }