/* Lumora v4 trade pages: the blocks every trade page shares, loaded right after system.css by each page locked to one trade
   (<body data-trade="..." data-trade-lock data-rules="v4">). Moved here on 2026-10-12 from plumbing.html's own <style> (the v4
   pilot), rule for rule, so the trade pages load one copy instead of eight (PLUMBING-INTEGRATE.md items 40 and 41; the facts strip
   moved on to system.css section 12b on 2026-10-15, with Home's copy); plumbing's
   look did not change (full-page stills at 320, 390, 760 and 1280 compared pixel for pixel, English and Spanish).
   Parts A to F are Home's blocks (pages/home/home.css as of 2026-10-10 18:19, the close as of 19:11) in the trade-page order.
   PL parts are the components the pilot made, shared now: the paper pair .pl-docs with its flag row .pl-flag, the on-call card
   .pl-card, the night's Before line .pl-before and day rows .pl-dayrow, the close's trade line .pl-trades, and the one-problem
   line .hero-one under the headline. The pl- names stay so plumbing's markup did not change. A page's own extras go in its own
   <style> after this file. Home keeps its own copy in home.css until Home next changes; then these blocks move into system.css
   and both copies go (item 40). golive.py publishes this file as /v4/trade-page.css (SHARED) for the pages that load it.
   A shared file: change it only with a script run through ../shared_lock.py, then rerun check.py on every trade page. */
/* ===== A. hero, with the facts strip (Home's, without the vision line and the picker; phone order: words, call block,
   top-leak strip, price and money back, the sheet) */
.hm4-hero{padding-bottom:0}
.hm4-hero .hero-g{grid-template-areas:"copy" "act" "strip" "terms" "tool"}
.hm-recog{color:var(--ink);font-weight:500}
/* the one-problem line, first under the headline on every trade page (Franco's card 19 default, 2026-10-12): the trade's own
   find in one sentence, a step under the h1 and over the lede; check.py fails an English trade page without it */
.hero-one{margin-top:14px;font-size:clamp(19px,2.1vw,24px);font-weight:600;line-height:1.22;letter-spacing:-.01em;color:var(--ink);max-width:22em;text-wrap:balance}
.hero .hero-one+.t-lede{margin-top:16px}   /* 2026-10-15: 16px again (the hero read as one slab); A4's shorter strip wins back the height that put the $1,900 row 27px under the call bar at 360 x 780 */
.hero-one+.t-lede .hm-recog{font-weight:400}   /* 2026-10-15: under the one-problem line the lede reads as body, not a second heading */
.hero-terms{grid-area:terms;display:grid;gap:10px;justify-items:start}
.hero-terms .price b{color:var(--ink)}
.hero .cta-row .hm-sms{font-size:17px}
.hm-sms,.c4-sms,.hm-about a,.mb a.u{display:inline-block;padding-block:12px;margin-block:-12px}   /* a 44px tall tap area without moving the layout; PL adds "Full terms" (phone-access review: 70 x 23 px) */
.cta-row,.c4-tel{row-gap:24px}   /* 2026-10-15: wrapped, the number's and the text link's padded tap areas overlapped by up to 16px */
@media (max-width:899px){.hero .cta-row{row-gap:12px}}   /* 2026-10-15: the phone hero hides its text link (system.css), so only the button and the number wrap and 12px clears them; 24px put the top-leak row under the call bar at 360 x 780 */   /* PL: the number beside every call button gets a 52px tall target (SYSTEM.md call targets), no layout change; since 2026-10-19 one rule in system.css serves every page */
.sh-sub{text-wrap:balance}
/* a long trade noun: the hero opts in with data-hero-long. Under 380px its h1 steps down so the headline keeps two lines, and
   the hero rows sit 6px closer. AC at 38px took three lines at 360 and pushed the top-leak strip under the call bar at
   360 x 780 (AC review 2026-10-12, moved here from the AC page so every trade with a long noun gets the same rule) */
@media (max-width:379px){.hm4-hero[data-hero-long] h1{font-size:min(38px,9.4vw)}.hm4-hero[data-hero-long] .hero-g{row-gap:12px}}
@media (max-width:379px){.hero-strip .strip-b{font-size:16px}}   /* under 380px a long top row (restaurants: "A slow Tuesday staffed like a busy night") wrapped at 17px and pushed the strip's figure under the call bar at 360 x 780; one size down on every trade page, so the strip looks the same on all of them (moved from restaurants-and-bars.html, review 2026-10-12) */
@media (min-width:900px){
  .hm4-hero .hero-g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy tool" "act tool" "terms tool";grid-template-rows:auto auto 1fr;row-gap:24px}
  .hm4-hero h1{max-width:11.5em}
}
/* round 4 (2026-10-18): Home's round 3 laptop step on every Spanish trade hero. The Spanish headline takes three or four lines at
   64px (Property managers four), and on a laptop under 861px tall the price sentence ended 2 to 71px under the first screen at
   1280 x 800 and 1366 x 768. The hero gives that back from its own air, the words unchanged: 12px over the eyebrow, leading .94 in
   the headline, 16px between the blocks, the lede at 1.4. check.py DESK_FIRST_JS holds the price on the first screen at 1280 x 800
   and 1366 x 768 on every trade page in both languages */
@media (min-width:900px) and (max-height:860px){
  :lang(es) .hm4-hero{padding-top:12px}
  :lang(es) .hm4-hero .eyebrow{margin-bottom:12px}
  :lang(es) .hm4-hero h1{line-height:.94}
  :lang(es) body[data-trade-lock] .hm4-hero h1{font-size:clamp(38px,5.2vw,58px)}   /* resume pass 2026-10-19: the trade nouns ("a su negocio
     de plomería", "en sus trabajos de daños por agua") took a fourth line at 64px and put the price at 787px on 1366 x 768; at 58px
     Plumbing, Electrical and Roofing keep three lines (710px), Pest and Water four (764px). Measures: agency build
     resume-measure-h1-css.log */
  :lang(es) .hm4-hero .hero-one{margin-top:10px}
  :lang(es) .hm4-hero .t-lede{margin-top:12px;line-height:1.4}
  :lang(es) .hm4-hero .hero-g{row-gap:16px}
  :lang(es) .hm4-hero .hero-tool{margin-top:28px}   /* the clipboard stays where it was, its clip 28px under the header, not on its edge */
}
/* round 4 (2026-10-18): on a phone a Spanish trade hero says the free call under its button, Home's short line ("Primera llamada sin
   costo. Respuesta el mismo día hábil."), as the English says it under its own; the long line stays with the terms on a computer,
   where it reads under the button already. The call bar is seated again by seatBar. check.py FREE_JS */
.hm4-hero .reply-ph{display:none}
@media (max-width:899px){.hm4-hero .cta .reply-ph{display:block}.hm4-hero:has(.reply-ph) .hero-terms .reply{display:none}}
/* the facts strip (.facts4) moved to system.css section 12b on 2026-10-15, with Home's copy (item 40) */

/* ===== B. what we automate: Home's tools line and ruled rows. PL: on a computer the heading, the tools line and row 1 as a
   picture (a property manager's emailed work order read into the shop's own spreadsheet, computer only) sit on the left, and
   the six rows with who it's for under them on the right; on a phone there is no picture (data-extra says why); the photo
   slot shows in review only */
.auto-tools{font-size:17px;font-weight:600;color:var(--ink);max-width:30em}
.auto-list{border-top:2px solid var(--ink)}
.auto-list li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.4;color:var(--ink)}
.auto-close{font-size:17px;max-width:34em}
.who-not{font-size:17px;max-width:44em}
.who-not .t-label{display:block;margin-bottom:4px}
.pl-auto-g{display:grid;gap:14px;grid-template-areas:"h" "tools" "r" "slot"}
.pl-auto-g>h2{grid-area:h}.pl-auto-g .auto-tools{grid-area:tools}.pl-auto-r{grid-area:r;display:grid;gap:14px;margin-top:4px}.pl-auto-slot{grid-area:slot}.pl-auto-pic{grid-area:pic}
.pl-who{display:grid;gap:12px;margin-top:6px;padding-top:14px;border-top:2px solid var(--ink)}
.pl-who-line{font-size:20px;font-weight:500;line-height:1.35;color:var(--ink);max-width:24em}
.pl-auto-slot{width:160px}
@media (max-width:899px){.pl-auto-pic{display:none}}   /* computer-only extra (R9, reason in the markup's data-extra) */
@media (min-width:900px){
  .pl-auto-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h r" "tools r" "pic r" "slot r";grid-template-rows:auto auto auto 1fr;column-gap:64px;row-gap:16px;align-items:start}
  .pl-auto-r{margin-top:0;gap:18px}
  .pl-who{margin-top:10px;border-top:1px solid var(--rule)}   /* one heavy rule in the section, the list's (design review: two at different heights read as a stray line) */
  .pl-auto-pic{width:100%;margin-top:14px}
  .pl-auto-pic .ap-xl{width:min(100%,580px)}   /* the property manager's full name and "Read from the PDF" fit in one row at 1280 */
  .pl-auto-slot{width:180px}
}
/* row 1 as a picture, Home's work order pair (home.css section 2, as of 19:11) with plumbing's data: the PDF and the shop's
   own spreadsheet, the same fields in both, an arrow between. Moves with Home's block (INTEGRATE "Shared blocks"). */
.ap-stack{display:grid;gap:10px}
.ap-pdf{width:min(100%,430px)}
.ap-page{margin:12px;padding:14px 16px 12px;background:#fff;border:1px solid #ececea;box-shadow:0 1px 3px rgba(0,0,0,.08);font-family:var(--sys);color:#1d1d1f}
.ap-co{font-weight:700;font-size:max(14px,min(3.8cqi,17px))}
.ap-dt{font-size:12px;color:#555;margin:2px 0 10px}   /* 2026-10-16: sentence case, no tracking (the document type read as a tracked capital label) */
.ap-page dl div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:8px;padding:4px 0;border-bottom:1px dotted #d6d6d6;font-size:max(12px,min(3.3cqi,14px));line-height:1.35}
.ap-page dt{color:#555}
.ap-page mark{background:#fde98a;color:#1d1d1f;padding:0 3px}
.ap-arrow{justify-self:center;font-size:15px;font-weight:600;color:var(--ink)}
.ap-arrow::before{content:"↓ "}
.ap-xl{width:min(100%,500px);justify-self:end}
.ap-xl .xl td,.ap-xl .xl th{white-space:nowrap;text-overflow:clip;max-width:none}
.ap-xl .xl tr:nth-child(2) td,.ap-xl .xl tr:nth-child(2) th{border-bottom:2px solid #9a9a9a}   /* Excel's freeze line under the header row */
@container (max-width:420px){.ap-page dl .ap-hm,.ap-xl tr.ap-hm{display:none}}
@container (max-width:560px){.pl-auto-pic .ap-xl .xl .hm{display:none}}   /* 1000 to 1160 wide the picture is 436 to 516px and the row ran past the window (review 2026-10-12); the address is marked on the PDF above */

/* ===== C. how it works (Home's) */
.how-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-bottom:26px}
.how-h .t-lede{color:var(--muted)}
@media (min-width:900px){.hm4-how .tl-head{flex-direction:column;align-items:flex-start;gap:6px}}
@media (min-width:900px){.hm4-how .how-h{display:grid;grid-template-columns:minmax(0,var(--tl-head,15em)) minmax(0,1fr);column-gap:28px}}   /* 2026-10-16: "You can stop after any of them." starts on the rows' text column (the rows' own grid) */
:lang(es) .hm4-how{--tl-head:17em}   /* 2026-10-16: "Cómo funciona" is 282px at 44px; at 15em (255px) it broke onto two lines */
.tl4 .price,.tl4 .mb{font-size:17px}
.tl-ai{color:var(--muted);max-width:36em}
.tl4 .slot{width:130px}
@media (min-width:900px){.tl4 .slot{width:150px}.hm4-how .tl4>li.tl-big{padding-block:32px}}   /* 2026-10-16: the inline bleed comes from system.css, so the walk's words keep the rows' x */
.hm4-how .cta-inline{margin-top:30px;border-top:0;padding-top:0}
.cta-inline .mb-s{flex-basis:100%;font-size:15px;margin-top:-2px}
.walk-end .mb-s{font-size:15px}
/* 2026-10-17 round 2 (owner judge: the walk's price twice and money back three times on Plumbing's phone): as on Home, the call
   block after How it works steps aside on a phone, where the call bar is on screen the whole time (data-extra in the markup) */
@media (max-width:899px) and (min-height:501px){main .cta-inline[data-extra]{display:none}}

/* ===== PL. the supply-house ticket and the invoice: one job's two papers, straight. The counter ticket is paper; the invoice
   is the job tool's draft in the one window frame (R6), and the flag is a row inside it, under its title bar (design review:
   a loose callout read as a stock web box). Side by side on a computer; on a phone the window lies over the ticket's torn edge
   only, so no line is hidden. One pencil circle, on the ticket's tank. On a phone the copy splits around the picture: the
   heading and the find, the papers, then the fix (design review: it explained the flag before showing it). */
.pl-pw{display:grid;gap:18px;grid-template-areas:"h" "find" "pic" "fix"}
.pl-pw-copy{display:contents}
.pl-pw h2{grid-area:h;max-width:13em}
.pl-pw .pl-find{grid-area:find}.pl-pw .pl-fix{grid-area:fix}.pl-pw .pl-docs-pic{grid-area:pic}
.pl-pw-copy p{font-size:17px;max-width:34em}
@media (min-width:900px){.pl-pw{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"h pic" "find pic" "fix pic";grid-template-rows:auto auto 1fr;gap:14px 56px;align-items:start}}   /* top-aligned like the page's other split sections (the heading keeps 3 lines at 1280: a copy column wide enough for 2 squeezed the ticket to 256px and wrapped its fields) */
.pl-docs{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr);gap:18px;align-items:start}
.pl-docs .ticket{transform:none;max-width:320px}   /* a counter ticket is narrow: never stretched wider (it ran 460px at 1024) */
.pl-inv{margin-top:28px}
.pl-inv .doc{box-shadow:none;padding:14px 16px 16px}
.pl-docs .doc-to{line-height:1.4;margin:6px 0}
.pl-docs .doc-bill{color:#1d1d1f;margin-bottom:8px}
.pl-docs .doc-bill b{color:#1d1d1f;font-weight:600}
.pl-docs .doc-bill .pl-k{color:#555;margin-right:4px}
.pl-docs .doc-tot{border-top:1.5px solid #1d1d1f;margin-top:2px}
.pl-li-h{color:#555;font-size:12px!important;font-weight:600;border-bottom:1.5px solid #1d1d1f!important}   /* 2026-10-16: "Description" and "Amount" in sentence case, no tracking */
.pl-due{font-size:12px;color:#555;text-align:right;margin-top:2px}
/* a picture under 640px wide (phones, tablets, small laptops): the papers stack, the window laid over the ticket's torn edge; the
   papers' own type steps down to the 12px floor (inside a picture), as the screens kit does on phones; the account line, the column
   heads and "Due on receipt" wait for a wider picture. 640, not 560: side by side under it the ticket fell to 235px at 600 and
   245px at 1080 and its fields wrapped. */
@container (max-width:640px){
  .pl-docs{grid-template-columns:minmax(0,1fr);gap:0}
  .pl-docs .ticket{width:85%;justify-self:start;padding:12px 12px 16px;font-size:12px}
  .pl-docs .tk-no{flex-wrap:wrap}.pl-docs .tk-no span{white-space:nowrap}   /* a field wraps whole, never "CUST PO" over "4470-DB" (360px) */
  .pl-docs .ticket table{font-size:12px;margin:6px 0}
  .pl-docs .ticket tr:has(.pc),.pl-docs .tk-tot{font-size:13px}   /* the circled tank line and the total a step over the 12px floor (phone-access review: the point of the picture sat at 12px) */
  .pl-docs .tk-co{font-size:13px;margin-bottom:6px}
  .pl-docs .pl-inv{position:relative;z-index:2;width:90%;max-width:440px;justify-self:end;margin-top:-8px}   /* 2026-10-17 polish: over the torn edge only (-16px ran the window 2 to 3px under the receipt's last line on restaurants, plumbing and electrical at 1024 and 390); every first paper keeps 10px or more of air above it */
  .pl-inv .doc{padding:10px 14px 14px}
  .pl-docs .doc-h b{font-size:14px}.pl-docs .doc-h span,.pl-docs .doc-to{font-size:12px}
  .pl-docs .doc-li li{font-size:13px;padding:5px 0}
  .pl-docs .doc-tot{font-size:15px;padding-top:6px}
  .pl-docs .pl-flag{font-size:13px;padding:8px 12px}
  .pl-li-h,.pl-due,.pl-docs .pl-wide{display:none!important}
}
.pl-flag{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start;padding:9px 14px;background:#fbefd2;border-bottom:1px solid #ecd59a;color:#4d3500;font:500 14px/1.4 var(--sys)}
.pl-docs .pc::after{inset:-5px -16px}   /* the ticket line is long and low: a wider ring clears its first and last letters */
.pl-flag svg{margin-top:2px}
.pl-flag b{color:#3d2a00}
/* a one-time cue when the papers come into view: the pencil ring goes round the tank, then the flag comes in (read, matched,
   flagged). The .pc carries data-draw only as the in-view trigger (system.js adds .drawn; it has no path of its own). Static
   with reduced motion, with JS off and in print. */
@media screen and (prefers-reduced-motion:no-preference){
  html.js .pl-docs .pc[data-draw]::after,html.js .pl-docs .pc[data-draw]>.pc-loop{clip-path:inset(-4px -4px -4px -4px);transition:clip-path 600ms var(--ease-move) 150ms}
  html.js .pl-docs .pc[data-draw]:not(.drawn)::after,html.js .pl-docs .pc[data-draw]:not(.drawn)>.pc-loop{clip-path:inset(-4px 100% -4px -4px)}   /* .pc-loop: system.js pencil()'s loop (2026-10-17) */
  html.js .pl-docs .pl-flag{transition:opacity 220ms var(--ease-out) 900ms}
  html.js .pl-docs:has(.pc[data-draw]:not(.drawn)) .pl-flag{opacity:0}
}

/* ===== D. the walk (Home's). No formula under the stops on a trade page (plan P2, complexity-f): the walk section carries
   data-walk-formulas="off", so system.js never writes one (PLUMBING-INTEGRATE.md item 3; the hiding rule that stood in is gone). */
.walk-h{max-width:20em}
.walk-intro{margin-top:14px;font-size:17px;max-width:40em;color:var(--body)}
.walk-honest{margin-top:8px;font-size:15px;color:var(--muted)}
.stop-t{display:grid;gap:4px}
.stop-t h3{margin:2px 0 0}
.stop-leak{font-size:17px;font-weight:500;line-height:1.35;color:var(--body);max-width:30em}
.stop .ph4,.stop .iph{width:min(var(--ph-w),100%);margin-inline:0}   /* round 3: the measured iPhone (.iph) at the drawn phone's width */
.stop .crop-m{--crop-h:476px;height:var(--crop-h);overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
/* 2026-10-17 round 3 (judges): the crop cut the phone's drop shadow into a rectangle, a faint grey box at its top corners and a hard
   line where the shadow stopped. The crop now has room for the shadow on the sides and top (padding, taken back by a negative
   margin, so the phone does not move) and fades only at the bottom, where the phone fades too. fitCrops measures from the crop's
   top, so its height takes the room in; without JS the fallback height adds it. Phones get a phone-size phone shadow (section 12) */
.stop .crop-m{--crop-air:48px;--crop-air-t:24px;padding:var(--crop-air-t) var(--crop-air) 0;margin:calc(-1*var(--crop-air-t)) calc(-1*var(--crop-air)) 0}
html:not(.js) .stop .crop-m{height:calc(var(--crop-h) + var(--crop-air-t))}
@media (max-width:899px){.pl-night .crop-m,.ct-ph.crop-m{--crop-air:48px;--crop-air-t:24px;padding:var(--crop-air-t) var(--crop-air) 0;margin:calc(-1*var(--crop-air-t)) calc(-1*var(--crop-air)) 0}
  html:not(.js) :is(.pl-night .crop-m,.ct-ph.crop-m){height:calc(var(--crop-h,388px) + var(--crop-air-t))}}
@media (max-width:699px){.stop .crop-m,.pl-night .crop-m,.ct-ph.crop-m{--crop-air:16px;--crop-air-t:10px}
  :is(.stop,.pl-night,.ct-ph) .ph4{filter:drop-shadow(0 6px 10px rgba(40,32,18,.2)) drop-shadow(0 1px 2px rgba(0,0,0,.14))}}
/* on a computer a stop's phone sat at the left of its wide half with about 220px of nothing before the notes (Plumbing stop 3); the
   picture is the phone's width and sits in the middle of its half, Before / After and the Sample label under it */
@media (min-width:760px){.hm4-walk .stop-body>.pic:has(.ph4,.iph){width:min(var(--ph-w),100%);justify-self:center}}
.find{container-type:inline-size}
.find-usd{font-size:min(32px,14.2cqi)}
/* round 4 (2026-10-18): on a computer the label sits beside the figure ("Won back $1,900 a month"), so the figure is 24px there, the
   size of Home's "Losing $1,900 a month", and the notes column takes .05fr from the picture: 264px at 1280 and 1440 where the line
   needs about 251. At 760 to 899 the column is under 200px and the figure drops under its label */
@media (min-width:760px){.hm4-walk .find-usd{font-size:min(24px,14.2cqi)}}
/* on a phone the figure keeps 32px from 390 and steps down only as far as the line needs, so "Won back $1,900 a month" stays one line
   at 360 and 320 too (about 6.9em of figure beside the label's 84px) */
@media (max-width:759px){.hm4-walk .find-usd{font-size:clamp(24px,calc((100cqi - 84px) / 6.9),32px)}}   /* 2026-10-17 polish: 32px, stepping down only where its column is narrower than the figure ("$1,900 a month" ran 33px out of the notes at 768, where the white-space:nowrap of .money held it on one line) */
/* PL: with JS off on a phone under 380px the fixed crop cut stop 3's payoff line ("On the 12:30 PM callback list") or left it in
   the fade (phone-access review: 320, 340, 360). With JS on, fitCrops' measured height overrides this, so the page height holds. */
@media (max-width:379px){html:not(.js) .stop .crop-m{--crop-h:508px}html:not(.js) .n4 .crop-m{--crop-h:352px}}   /* and the night phone: its on-call line wraps under 380px */
@container (min-width:421px){.hm4-walk .pair .xl td{white-space:nowrap}}
@media (min-width:760px){
  .hm4-walk .stop-body{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr)}
  .hm4-walk .stop:nth-child(even) .stop-body{grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr)}
}
@media (max-width:1079px){.hm4-walk .tally4{display:none}}
.walk-end{display:grid;gap:10px;justify-items:start;margin-top:clamp(36px,5vw,56px);padding-top:16px;border-top:2px solid var(--ink)}
.walk-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-size:20px;font-weight:600;color:var(--ink)}
.walk-total b{font-size:44px;font-weight:600;color:var(--red);line-height:1.1}
.walk-time{font-size:17px}
.walk-end .cta-row{margin-top:8px}
@media (min-width:1080px){.walk-end{margin-left:310px}}

/* ===== E. the night band (Home's layout a: phone and paper as one centred pair, tops lined up). PL: the on-call night. The
   Before line sits in the band's copy under the intro (design review: a real log has no before paragraph); the paper is the
   log alone, After under its head and a day row where Saturday and Monday start, so every time lines up with its own text.
   Both lock-screen notifications land during the loop (on call at 5:00 PM Saturday, the morning list at 6:30 AM Monday), so
   the clock's two dates (data-eve, data-day) fit them with no workaround. The on-call card is clipped to the log; its border
   lights once when the 7:40 PM row says Dave goes through it. The restaurant page clips its morning list to its log with the same
   .pl-card and marks the row that lights it (6:30 AM, the list is sent) with data-cue; with no data-cue the card lights on row 2. */
.n4{display:grid;gap:26px}
.n4-copy h2{max-width:17em}
.n4-copy .t-lede{margin-top:14px;max-width:34em;color:var(--on-night)}
.n4-figs{display:grid;gap:20px;justify-items:center;margin-top:18px}
.n4-figs>.pic{width:min(var(--ph-w),100%)}
.n4-figs>.n4-paper{width:min(440px,100%)}
.n4 .loop-ctl{position:relative;z-index:4;margin-top:16px;justify-content:flex-start}   /* 2026-10-15: a 16px gap, so Pause no longer sits glued to the log (-12px under the Sample stamp's 28px until Nov 6) */
.n4 .pause{border-color:rgba(233,228,216,.45);color:var(--muted-night)}   /* Nov 6: the round icon (system.css .pause); its pill padding left */
.n4 .pause .pi{width:10px;height:12px;border-left-width:3px;border-right-width:3px}
.n4 .pause.is-paused .pi{width:0;height:0;margin-left:2px;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.n4 .cta-inline{margin-top:4px}
.n4 .cta-inline .mb-s{color:var(--on-night)}
@media (min-width:900px){
  .n4{justify-items:center;text-align:center}
  .n4-copy h2,.n4-copy .t-lede,.pl-before,.pl-permit{margin-inline:auto}
  .n4 .cta-inline{justify-content:center}
  .n4-loop{width:100%;max-width:804px}
  .n4-figs{grid-template-columns:var(--ph-w) minmax(0,440px);justify-content:center;align-items:stretch;gap:24px;text-align:left}
  .n4-figs>.n4-paper{width:100%;display:flex;flex-direction:column}
  .n4-paper .np{flex:1;display:flex;flex-direction:column}
  .n4-paper .np-rows{flex:1;display:flex;flex-direction:column;justify-content:flex-start}   /* 2026-10-15: rows from the top (space-between spread them apart); flex:1 keeps the paper the phone's height */
  /* round 4 (2026-10-18, judges): the paper ran the phone's height, so on Plumbing about 80px of empty paper sat between the log's last
     row and the on-call card's clip (Electrical 116, Roofing 102, Water 60). The log is as tall as its rows, as Home's has been since
     round 2, and the card's clip sits 32px under the last row on every page; the pictures' boxes still share a height, so the two
     Sample tags stay level under them */
  .pl-night .n4-paper .np,.pl-night .n4-paper .np-rows{flex:none}
  .pl-night .n4-paper .pl-card{margin-top:46px}   /* 32px to the clip, which stands 14px over the card */
}
/* round 4 (2026-10-18, judges): on the night band the log's heavy ink head rule (system.css .np) disappears into the band's near-black,
   so the paper showed 4px under the picture beside it (Restaurants' Z report at 705, the log at 709; the phone on the others). The
   rule goes on the night band, and the log's paper starts level with the picture beside it */
.pl-night .np{border-top:0}
/* 2026-10-17 polish (the Oct 16 desktop check): in one column Pause sits centred right under the picture it runs (the phone; the restaurant's
   tape; the log on a page with no phone), in that picture's Sample band, not under the log at the band's edge, 180px off the phone at 768 */
@media (max-width:899px){
  .n4-loop{display:grid;justify-items:center;row-gap:20px;margin-top:18px}
  .n4-figs{display:contents}
  .n4-figs>*{order:3}
  .n4-figs>:first-child{order:1}
  .n4 .loop-ctl{order:2}
}
@media (max-width:699px){.n4-loop{row-gap:14px;margin-top:8px}}
.pl-before{margin-top:12px;max-width:34em;font-size:15px;color:var(--muted-night)}
.pl-permit{margin-top:8px;max-width:34em;font-size:15px;color:var(--muted-night)}   /* resume pass 2026-10-19 (craft judge): the permit lines under Before take its type and centred measure; they ran full width, bright, louder than the headline */
.pl-before b{color:var(--on-night);margin-right:4px}
.np .np-h .pl-after{align-self:center;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pencil)}   /* 2026-10-15: plain words, as the Sample stamp now reads (was 12px tracked capitals) */   /* R5's plain label, in the log head where the dates used to be (the day rows carry them now) */
.np-rows li.pl-dayrow{display:block;padding:12px 0 3px;border-bottom:0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.np-rows li.pl-dayrow:first-child{padding-top:2px}
.pl-card{position:relative;margin-top:20px;padding:16px 14px 10px;background:#fff;border:1.5px solid var(--ink);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.14);font-size:15px;line-height:1.4;color:#1d1d1f}
.pl-card::before{content:"";position:absolute;left:50%;top:-14px;width:84px;height:26px;margin-left:-42px;background:url(assets/clip.svg) 0 0/100% 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(40,28,12,.28))}
/* the clip: the clipboards' lever clip, small, its jaw over the card's top edge (2026-10-17 round 2; it was a pill with a slot drawn to
   match the old clamp, and the design review had read a plain pill as a phone's sheet handle) */
.pl-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid #d8d5cc}
.pl-card-h b{font-size:15px;color:#111}
.pl-card-tab{font-size:13px;color:#55555a;white-space:nowrap}   /* plain words, as a printed card says it; no tab, no underline (it read as a switch that did nothing) */
.pl-card p+p{margin-top:5px}
.pl-card p b{color:#111}
@media screen and (prefers-reduced-motion:no-preference){
  html.js .pl-night [data-loop].run:not(.fixed) .n4-paper:not(:has([data-cue])):has(.np-rows li[data-n="2"].on) .pl-card,
  html.js .pl-night [data-loop].run:not(.fixed) .n4-paper:has(.np-rows li[data-cue].on) .pl-card{animation:pl-card-cue 1200ms var(--ease-out) 1}
}
@keyframes pl-card-cue{0%,100%{border-color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}30%{border-color:#b07800;box-shadow:0 0 0 4px rgba(201,138,0,.4)}}

/* ===== F. rules and contact. The close itself is system.css's since the agency pass (2026-10-18, section 23); here only this
   file's own: Rules we keep inside the card. PL: one wrapped line of every trade's page (this one in ink, not underlined) at the bottom */
.c4-rules{margin-top:30px}
.pl-more{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--rule)}
/* on a computer the trade links sit under the hours in the left column, and the contact card keeps the full height for its
   sticky ride (a full-width row under it let the card slide over the links) */
@media (min-width:900px){.c4-main{grid-column:1;grid-row:1}.pl-more{grid-column:1;grid-row:2;align-self:start;margin-top:-20px}.c4-card{grid-column:2;grid-row:1/3}.close-g{grid-template-rows:auto 1fr}}
.pl-trades{display:flex;flex-wrap:wrap;column-gap:20px}
.pl-trades a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;color:var(--body);text-decoration:underline;text-decoration-color:var(--muted);text-decoration-thickness:1px;text-underline-offset:4px}
.pl-trades a[aria-current=page]{color:var(--ink);font-weight:600;text-decoration:none}
/* states sweep TL-7 (Franco 2026-10-19): hover was a thin red line and keyboard focus added nothing to the words. Hover and a press: the
   words turn ink and their own underline turns ink and 2px, at its resting depth (a background stroke would sit at the 44px box's
   foot, 8px lower); focus: the words turn ink inside the ring, with the resting underline. Red only means money lost. The full
   list's twin is list.css .wa-trades */
.pl-trades a:not([aria-current]):is(:focus-visible,:active){color:var(--ink)}
.pl-trades a:not([aria-current]):active{text-decoration-color:var(--ink);text-decoration-thickness:2px}
@media (hover:hover) and (pointer:fine){.pl-trades a:not([aria-current]):hover:not(:focus-visible){color:var(--ink);text-decoration-color:var(--ink);text-decoration-thickness:2px}}
/* Industries' trade list, EN and ES (its states moved here from the two pages' own styles, Franco 2026-10-19). The whole row is the
   link (the name's a::after covers it), and hover, keyboard focus and a press show one mark: from 1200px the dotted leader beside the
   name turns solid ink, under 1200px (no leader) the name takes a 2px ink underline; focus adds the ring round the row. It was a red
   underline under the name beside the grey leader (two lines at two heights, red next to the red loss figure), the arrow sliding
   into the leader, focus with the ring alone and a tap with nothing. Rows mark in ink, as Home's trade list does */
.ix-n a:focus-visible{outline:none}
.ix-n a:focus-visible::after{outline:3px solid var(--ink);outline-offset:2px;border-radius:2px}
@media (max-width:1199px){
  .ix-list li:is(:active,:has(.ix-n a:focus-visible)) .ix-n a{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}
  @media (hover:hover) and (pointer:fine){.ix-list li:hover .ix-n a{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}}
}
@media (min-width:1200px){
  .ix-list li:is(:active,:has(.ix-n a:focus-visible)) .ix-n::before{border-bottom-style:solid;border-bottom-color:var(--ink)}
  @media (hover:hover) and (pointer:fine){.ix-list li:hover .ix-n::before{border-bottom-style:solid;border-bottom-color:var(--ink)}}
}
/* the note's link keeps a 44px tall tap area from a layer, not padding: on an inline link the padding grew its paint box, so the
   ring crossed the lines above and below (2026-10-19) */
.ix-note a{position:relative}
.ix-note a::before{content:"";position:absolute;inset:-12px 0}
/* Cardino perches on the contact card (Home, Franco 2026-10-10: he floated above it). The perch drawing is cropped to the bird, so
   bottom:100% puts his feet on the card's top edge at any size; 2px down so he stands on it. Overrides system.css's top offsets. */

/* ===== phone length (budget 11,000px at 390; Home's band padding by role) */
@media (min-width:700px){
  .hm4-how{padding-block:96px}
  .hm4-walk{padding-block:128px 96px}
  .hm4-night{padding-block:144px}
  .hm4-close{padding-block:112px 80px}
}
@media (max-width:699px){
  main>.band{padding-block:40px}
  main>.hm4-walk{padding-block:48px 40px}
  main>.hm4-night{padding-block:48px}
  main>.hm4-close{padding-block:44px 32px}
  .hero{padding-bottom:0}
  .sh-total b{font-size:20px}
  main>.hm4-auto,main>.hm4-how{padding-block:36px}
  .auto-list li{padding-block:8px}
  .pl-who-line{font-size:20px}
  .stops{gap:28px}
  .walk-end{margin-top:28px}
  .hm4-hero .hero-g{row-gap:18px}
  .close-g{gap:36px}
  .n4{gap:20px}
  .n4-figs{gap:14px;margin-top:8px}
  .stop .crop-m{--crop-h:462px}
  .tl4>li{padding-block:18px}
  .tl4>li.big{padding:22px 18px}
  .stop.page{padding-bottom:20px}
  .stop-h{margin-bottom:14px}
  .stop .pencil{font-size:17px}
  .stop .ph4 .thread,.stop .iph .thread{font-size:13px}
  .stop-body{gap:16px}
  .walk-grid{margin-top:22px}
  .c4-card{margin-top:28px}
  .np-rows li{padding-block:6px;font-size:15px}
  .n4 .crop-m{--crop-h:340px}   /* the no-JS crop: down to the on-call notification and clear of the fade (its bottom sits at 309 at 390; fitCrops measures the JS height) */
  .walk-total b{font-size:32px}
  .pl-night .np{padding:14px 14px 8px}
  .pl-night .np-h{padding-bottom:8px}
  .pl-night .np-rows li{grid-template-columns:4.7em minmax(0,1fr);font-size:14px;padding-block:5px}   /* 4.7em: "10:40 PM" on one line */
  .pl-night .np-rows li.pl-dayrow{padding:7px 0 0;font-size:14px}
  .pl-night .np-rows li.pl-dayrow:first-child{padding-top:1px}
  .pl-card{font-size:14px;line-height:1.38}
  .pl-card{margin-top:14px;padding:14px 12px 9px}
  .pl-card-h{padding-bottom:6px;margin-bottom:5px}
  main>.hm4-night{padding-block:40px}
  .n4{gap:14px}
  .n4 .cta-inline{padding-top:10px}
  main>.pl-papers{padding-block:36px}
  .pl-pw{gap:18px}
  .pl-flag{grid-template-columns:14px minmax(0,1fr);gap:7px}
  .pl-before{margin-top:8px}
  .pl-more{margin-top:-12px;padding-top:14px}
  .pl-who{margin-top:0;padding-top:12px}
}
/* 2026-10-17 round 3: under 360px the Spanish thread fills the stop phone's whole screen, and the measured iPhone's home bar crossed its
   last line ("Anotado para devolver la llamada..."); there the bar steps aside, as the drawn phone never had one */
@media (max-width:359px){.stop .iph-msg .iph-home{display:none}}
/* 2026-10-17 round 3: on a phone the hero card's lines get 3 to 4px between them (row gap 4px, line height 1.45 on its label and problem
   line), so the call bar's edge has room to land between two of them; with 1 to 2px it could land only above the card, which opened
   a 70px gap over it on AC and pest control at 375 x 667 (system.js seatBar) */
@media (max-width:899px){.hero-strip.strip{row-gap:4px}.hero-strip .strip-k,.hero-strip .strip-b{line-height:1.45}}

/* ===== Design round picks, 2026-10-19 (Franco, Oct 19: "do 1 to 13"; built in picks-build-2026-10-19)
   Item 1, a trade page on a phone opens on the sheet (UX's version with UI's measurements; Motion's pen loop round "never reached
   the invoice" left out, since it would be a second red mark beside the ringed figure). Under 900px the hero reads: the headline,
   the one-problem line, Call us with the reply line beside it (the town, the free call, the same-day reply; the number and Text sit
   in the call bar the whole time), then the clipboard, whose row 1 writes in and is ringed above the call bar. The eyebrow's town
   moves into the reply line (span.rs-town), the hero card that repeated row 1 steps aside, the letterhead shows the short business
   line (span.sh-at holds the place), and under the sheet the lede opens on what we do (span.t-do) before the problems it names,
   then the price. Computers are unchanged. On a phone 700px tall or less the headline is 30px (Home's was too; 32px since the alive build, 2026-10-24), so a
   four-line Spanish trade noun still leaves row 1 above the bar. Measured on all 16 trade pages in WebKit and Chromium at
   393 x 659, 375 x 667, 390 x 844, 375 x 812, 430 x 932 and 360 x 780 (picks-build-2026-10-19/logs): the ring ends above the bar
   and the bar cuts no line. check.py TRADE_FIRST_JS */
.hm4-hero .rs-town{display:none}
@media (max-width:899px){
  body[data-trade-lock] .hm4-hero .hero-g{grid-template-areas:"h1" "one" "act" "tool" "lede" "terms";row-gap:0}
  body[data-trade-lock] .hm4-hero .hero-copy{display:contents}
  body[data-trade-lock] .hm4-hero .eyebrow,body[data-trade-lock] .hm4-hero .hero-strip{display:none}
  body[data-trade-lock] .hm4-hero h1{grid-area:h1;margin:0}
  body[data-trade-lock] .hm4-hero .hero-one{grid-area:one;margin:12px 0 0}
  body[data-trade-lock] .hm4-hero .hero-act{margin-top:20px}
  body[data-trade-lock] .hm4-hero .hero-tool{margin-top:22px}
  body[data-trade-lock] .hm4-hero .t-lede{grid-area:lede;margin-top:24px;display:flex;flex-direction:column;gap:10px}
  body[data-trade-lock] .hm4-hero .t-lede .t-do{order:-1;color:var(--ink)}
  body[data-trade-lock] .hm4-hero .hero-terms{margin-top:16px}
  /* Home's phone call block: the button with the reply line beside it */
  body[data-trade-lock] .hm4-hero .cta{display:flex;align-items:center;gap:16px}
  body[data-trade-lock] .hm4-hero .cta-row{flex:none}
  body[data-trade-lock] .hm4-hero .cta .btn{padding:0 26px}
  body[data-trade-lock] .hm4-hero .cta-tel{display:none}
  body[data-trade-lock] .hm4-hero .cta .reply{margin:0;font-size:15px;line-height:1.35;color:var(--pencil);text-wrap:balance}
  body[data-trade-lock] .hm4-hero .rs-town{display:inline}
  body[data-trade-lock] .hm4-hero .lh .sh-at{display:none}
}
/* under 390px the language steps aside from the reply line, as on Home (the header's language link stays); under 360px the line
   goes under the button, where beside it the Spanish took six lines */
@media (max-width:389px){body[data-trade-lock] .hm4-hero .rs-lang{display:none}}
/* under 390px the button is 22px a side and the gap 14, as on Home's short phones: the Spanish line beside it took four lines at 375 and
   the clamp's shadow fell on its last one (shadow_air); it keeps three */
@media (max-width:389px){body[data-trade-lock] .hm4-hero .cta{gap:14px}body[data-trade-lock] .hm4-hero .cta .btn{padding:0 22px}}
@media (max-width:359px){body[data-trade-lock] .hm4-hero .cta{flex-wrap:wrap;row-gap:10px}body[data-trade-lock] .hm4-hero .cta .reply{flex-basis:100%}}
@media (max-width:899px) and (max-height:700px){
  body[data-trade-lock] .hm4-hero h1{font-size:30px}
  body[data-trade-lock] .hm4-hero .hero-one{font-size:18px;margin-top:10px}
  body[data-trade-lock] .hm4-hero .hero-act{margin-top:16px}
  body[data-trade-lock] .hm4-hero .hero-tool{margin-top:16px}
}
/* Item 6, Spanish headlines set by phrase: each Spanish trade h1 is written in phrases (span.phr: "Encontramos por dónde / se le
   va el dinero / a su negocio de plomería"). From 1240px, where the longest phrase fits its column at 58px (597px of 616), each
   phrase holds together, so no line breaks inside "se le va" or ends on "a su". 58px is today's short-laptop size and the floor
   (craft judge); under 1240 the headline keeps its size, and its short words are bound in the source (resume pass), so it breaks
   only between word groups there too. A phrase too long for one line at 58px is two phrases ("a su negocio
   / de electricidad"). check.py H1_PHRASE_JS at 1180, 1240, 1280, 1366, 1440 and 1920 */
@media (min-width:1240px){
  :lang(es) body[data-trade-lock] .hm4-hero h1{font-size:58px;max-width:none}
  :lang(es) body[data-trade-lock] .hm4-hero h1 .phr{white-space:nowrap}
}
/* Agency leftover M26: Plumbing's and Electrical's one-problem line names a problem their sheet now carries as a row, counted and
   not priced (How it works' sample sheet carries the ticket row the same way, "not priced" / "sin cifra"), set like a row with its
   figure column in muted words, never red, and outside the total. It writes in with the total */
.sheet .sh-unp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.sheet .sh-usd.unp{color:var(--muted);font-weight:500;font-size:15px;padding-top:2px}
@media screen and (prefers-reduced-motion:no-preference){html.js .sheet[data-fill]:not(.swap):not(.still) .sh-unp{animation:write 380ms var(--ease-out) both;animation-delay:1500ms}}