/* Home (the new Home, Franco's GO 2026-10-16: the approved desktop "v4 printed report refined" and phone "p1-final" as one page;
   pages/home/MERGE-PLAN-2026-10-16.md). Shared parts come from ../../system/system.css: the header, the call bar, the facts
   strip (12b), the same-object pairs (27) and the measured iPhone (28). Type sizes outside the pictures stay on one scale:
   15, 17, 20, 24, 32, 44, 64 (Lumora.lint "Type", checked at 1280 and up). The Home before this one (hero strip, three walk
   stops, tally) is in "backup ORIGINAL-2026-10-16-newhome/pages/home/home.css". Both Homes load this file: the Spanish Home
   (index.es.html, Phase C) is the same page in Spanish, and its few own rules say :lang(es). Breakpoints: under 900px the phone design; 900 to 1079px computer chrome with
   the hero in one column, in the phone's order; 1080px and up the approved desktop. Inside the phone design p1-final's height
   ranges stay as they were: max-height 700 (short phones), 701 to 899, min-height 900 (tall phones), max-height 500 (sideways). */

/* ======================================================= 1 hero: words, the call, the clipboard, the price, the facts
   The code is in the phone's order: copy, vision, act, reply, tool, terms, facts. Grid areas place them per width. Plain paper, no
   lines (Franco's note 1 on v4). The strip of three tools under the sheet left with the alive build (2026-10-24, Franco's pick
   strip-out, alive round item 2: the walk right under the hero shows the same three screens, bigger and with the fix); its rules
   left with it, and the facts moved into the hero's grid, under the price block. Before: "home ORIGINAL-2026-10-24-alive.css" */
.hm4-hero{padding:40px 0 0;--app:#2A5FC4;--app-ink:#1d2330;--app-mut:#5d6575;--app-line:#e7e9ee;--app-row:#f0f1f4;--app-side:#f6f7f9}
.hm4-hero .hero-g{gap:28px;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"copy" "act" "tool" "vision" "terms" "facts";align-items:start}
.hm4-hero .hero-g>.facts4{grid-area:facts;min-width:0}
.hm4-hero .hero-g>.facts4>ul.wrap{width:auto;margin-inline:0}   /* the shared strip's .wrap, inside the hero's own column */
.hm4-hero .eyebrow{max-width:36em;margin-bottom:18px}
:lang(es) .hm4-hero .eyebrow{text-wrap:balance}   /* "y más." never sits alone (its words also hold with no-break spaces) */
.hm4-hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.02;letter-spacing:-.022em;max-width:11.5em}
/* the Spanish headline (round 2, 2026-10-17, judges: on a computer "y ponemos" sat alone on line three of four). Three lines cannot
   hold it at 64px: its shortest possible first line, "Automatizamos el trabajo", is 689px and the column is 624 at 1280 and 1440.
   Making room would take the clipboard under 480px, which puts the sheet's calls formula on two lines, and the type scale has
   nothing between 44 and 64. So it keeps four lines and an even edge: the no-break space in "su negocio" went (index.es.html), and
   every width that sets four lines reads "Automatizamos el / trabajo repetitivo / y ponemos su / negocio en orden." (phones 320 to
   430 too, where the same short line sat); widths that set three are unchanged. iphone_check.py holds the edge */
.hm4-hero .t-lede{font-size:clamp(18px,1.6vw,20px);line-height:1.5;margin-top:22px;max-width:34em}
.hm4-hero .hero-vision{grid-area:vision;font-size:20px;font-weight:500;line-height:1.35;color:var(--ink);max-width:22em;text-wrap:balance}
@media (min-width:1180px){.hm4-hero .hero-vision{max-width:31em}}   /* 2026-10-17 polish: one line where the column has room, so the price keeps the first screen at 1280 x 800 in Spanish too */
.hm4-hero .hero-act{grid-area:act}
.hm4-hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.hm-sms{font-size:17px}
.hm-sms,.c4-sms,.who-all a,.hm-about a,.walk-more a,.walk-leak a,.pk-walk a,.c4-hours .mb a,.hero-mb a{display:inline-block;padding-block:12px;margin-block:-12px}   /* 2026-10-17: Full terms too (owner judge) */   /* a 44px tall tap area without moving the layout (WCAG 2.5.8) */
.reply-s{font-size:15px;line-height:1.35;color:var(--pencil);text-wrap:balance}   /* one shade darker than muted (7.9:1 on paper). 2026-10-17 polish: the
   hero says the reply this short at every width (the owner judge found the Spanish price under the first screen at 1280 x 800,
   behind the three-line sentence); the close's Reply time row says it whole, once */
.rs-g{display:none}
/* resume pass 2026-10-19 (owner judge: Oct 16 said "English or Spanish" beside the first button, and a Spanish reader could not tell
   whether the call would be in Spanish): the short line says the language. Under 390px it took a fourth line and the call bar cut
   row 1 of the sheet (375 x 667, 375 x 812, 360 x 780, 320 x 568), so there it steps aside; the header's language link stays */
@media (max-width:389px){.rs-lang{display:none}}
/* round 3: the Spanish Home's line is two spans, the short phone's three short sentences (.rs-g, below) and everyone else's two (.rs-l) */
.hm4-hero .hero-terms{grid-area:terms;display:grid;gap:10px;max-width:38em}
.hm4-hero .hero-terms .price{font-size:17px;max-width:38em}
.hm4-hero .hero-terms b{color:var(--ink)}
.hm4-hero .hero-terms .hero-mb{font-size:17px;max-width:38em}   /* agency pass 2026-10-18 (rank 5): the guarantee beside the price it covers */
.hm4-hero .hero-tool{grid-area:tool;position:relative;min-width:0}

/* the clipboard: hardboard with a 3px edge under it, the steel lever clip drawn in SVG (a flat lever, the rolled pivot, a flat
   brushed jaw with a curled lip, two plain rivets, one soft shadow; no wire bail, no gloss), two more sheets under the top one,
   and the printed sheet: the mark beside "Walk sheet" with Sample on that line, the shop under them. It writes itself in on load
   again (data-fill, system.css: the rows land, then the total, then the pen rings the biggest leak; SYSTEM 9 item 2), and a pick
   redraws it (.swap). Motion restore, 2026-10-18 (Franco: "why does the lumora website now look so empty, so dead... where's the
   animations"): the Oct 17 Home had taken data-fill off because judge 2's still screenshot caught the ring half drawn. That was a
   still judging motion: every check and screenshot tool now shoots the finished frame (?still or reduced motion), and the
   finished layout is the same as before, so the first screen budgets hold. iphone_check.py MOTION fails a Home without it */
.hm4-hero .clip{position:relative;padding-top:24px}
.hm4-hero .board{position:relative;border-radius:14px;padding:30px 14px 22px;   /* its grained hardboard is system.css's .board[data-grain]; the 3px edge under it is system.css's --board-edge, so it follows the board's colour (2026-10-17: one board colour in every engine) */
  box-shadow:inset 0 1px 0 rgba(255,244,222,.28),inset 0 0 0 1px rgba(70,48,20,.22),0 3px 0 var(--board-edge),0 4px 1px rgba(40,28,12,.22),0 46px 80px -28px rgba(58,47,28,.36),0 26px 40px -26px rgba(0,0,0,.34)}
.hm4-hero .clamp{position:absolute;left:50%;top:-14px;width:214px;max-width:none;height:66px;margin-left:-107px;transform:none;z-index:3;background:none;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 2px rgba(40,28,12,.28))}
.hm4-hero .stack{position:relative;isolation:isolate}
.hm4-hero .stack::before,.hm4-hero .stack::after{content:"";position:absolute;left:3px;right:2px;bottom:-4px;height:40px;background:#F7F4EC;border-radius:1px;box-shadow:0 1px 1px rgba(58,47,28,.22)}
.hm4-hero .stack::after{left:6px;right:4px;bottom:-8px;background:#EFEBE1;z-index:-1;box-shadow:0 1px 2px rgba(58,47,28,.26)}
.hm4-hero .stack::before{z-index:0}
.hm4-hero .sheet{position:relative;z-index:1;padding:50px 24px 14px;border-radius:1px;
  background:linear-gradient(180deg,#FFFEFB 0,#FFFEFB 60%,#FCFAF5 100%); /* ui-ok: gradient is the light falling off down a sheet of paper */
  box-shadow:0 1px 1px rgba(58,47,28,.18),0 3px 8px -3px rgba(58,47,28,.20)}
/* the letterhead's own rules are system.css's (.sheet .lh, rank 28, lane 3b, 2026-10-18); Home keeps only its phone steps below */
.hm4-hero .sh-title{display:block;font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.hm4-hero .sh-sub{display:block;font-size:15px;color:var(--muted);text-wrap:balance}
.hm4-hero .sh-cols{display:flex;justify-content:space-between;font-size:15px;color:var(--muted);margin-top:12px;padding:0 0 6px;border-bottom:2px solid var(--ink)}
.hm4-hero .sh-rows li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.hm4-hero .sh-l b{display:block;font-weight:600;color:var(--ink);font-size:17px;line-height:1.3;text-wrap:balance}
.hm4-hero .sh-l small{display:block;font-size:15px;color:var(--muted);margin-top:3px;line-height:1.55;text-wrap:balance}   /* 2026-10-16 repair: p1-final's body line height (23.25px); system.css's 1.4 packed the rows 2px tighter */
.hm4-hero .sh-usd{position:relative;color:var(--red);font-weight:600;font-size:20px;white-space:nowrap;align-self:flex-start}
.hm4-hero .sh-total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;border-top:2px solid var(--ink);margin-top:-1px;padding-top:10px}
.hm4-hero .sh-total span{font-weight:600;color:var(--ink)}
.hm4-hero .sh-total b{font-size:24px;font-weight:600;white-space:nowrap;line-height:1.25}   /* red from system.css since 2026-10-17 (Franco on his iPhone): like the rows, so "$2,710 a month" reads as what the shop loses, never as a price */
.hm4-hero .sh-time,.hm4-hero .sh-note{font-size:15px;margin-top:6px}
.hm4-hero .sh-time b{color:var(--ink);white-space:nowrap}   /* "about 15 hours a month" stays together */
.hm4-hero .sh-note{color:var(--muted)}
@media (max-width:420px){.hm4-hero .sheet{padding:48px 16px 12px}.hm4-hero .board{padding:28px 10px 16px}.hm4-hero .clamp{width:176px;height:54px;top:-11px;margin-left:-88px}}
@media (max-width:420px){.hm4-hero .sheet[data-ring]{padding-right:20px}.hm4-hero .board:has(.sheet[data-ring]){padding-inline:8px}}   /* Nov 7: the ring's 4px of room on a phone (system.css, under .sh-usd .pen-ring): a 20px right margin, paid for by the board's brown edge, 10px a side to 8, so no line of the sheet rewraps; from 421px the sheet has 24px a side */
/* under the sheet: the picked sample's whole walk and the loss calculator (agency plan M19, ruling 21), two plain links, each with a
   44px tap area that doesn't move the layout; 24px between them, so the two areas never overlap */
.hm4-hero .pk-more{display:grid;justify-items:start;gap:24px;margin-top:30px;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.hm4-hero .pk-calc a{display:inline-block;padding-block:12px;margin-block:-12px}

/* ======================================================= 2 what we automate: the tools line under the heading, eight plain ruled rows, one picture.
   Its own ground (sheet) and, on a computer, the picture on the left, so it never reads as the hero twice. No ticks: a tick
   beside a problem read as "done"; ticks stay on Rules we keep only. */
.auto-g{display:grid;gap:32px}
@media (min-width:900px){.auto-g{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:56px;align-items:center}.auto-pic{order:-1}}
.auto-tools{margin-top:12px;font-size:17px;font-weight:600;color:var(--ink);max-width:30em}
.auto-list{margin-top:20px;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{margin-top:18px;font-size:17px;max-width:34em}
.auto-pic{width:100%}
/* the code picture that stood here (code demo B, 2026-10-10 to 2026-10-27) moved to How it works with its rules (Franco, Oct 27);
   What we automate's picture is the PDF that files itself, whose rules sit at the end of this file */

/* ======================================================= 3 who we work with: its own ground (bone), big short lines, wide trade links,
   each with its trade's biggest leak; what you keep under the heading on a computer */
.who-g{display:grid;gap:24px;grid-template-areas:"h" "one" "lines" "trades" "all" "not" "slot"}
.who-g>h2{grid-area:h}.who-one{grid-area:one}.who-all{grid-area:all}
/* 2026-10-17 (Franco on his iPhone: "a lot of words", and How it works follows right after): a phone says who in one line, then the
   trades and the closing line; the three lines and What you keep are the computer's (data-extra) */
.who-one{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.025em;color:var(--ink);max-width:24em;text-wrap:balance}
/* round 2 (2026-10-17, judges: at 375 the Spanish line set as three short lines, a third of the row empty): its second line,
   "donde el papeleo se queda para la noche.", was 3px too long for 343px, so balance split the whole line in three. -.025em, about
   the headlines' own tracking, gives 8px back: two lines from 375, broken at the comma. Balance stays: pretty moved the break off the
   comma at 390 and left "la noche." alone at 360; under 375 three lines are the most the column holds anyway, and balance keeps them even */
@media (max-width:899px){.who-g{grid-template-areas:"h" "one" "trades" "all" "slot"}}   /* their rows go too, or each left two gaps */
@media (min-width:900px){.who-one{display:none}}

/* 2026-10-16: the arrow sits on the name's line (row 1, the name's line height), not centred on a cell whose leak line runs one or two lines.
   Every width starts a cell's words at its top, so a one-line name sits level with a wrapped neighbour's first line (phones too);
   under 900 the 18px top keeps a one-line name where centring put it in the 56px row */
.who-all{font-size:17px;font-weight:600}
.who-all span{display:block;margin-bottom:8px;font-weight:400;color:var(--body)}   /* 2026-10-17 (owner judge): an office or a clinic finds itself here.
   Round 2 (judges: "All industries Not on the list?" read as one run-on line): the sentence first, the link on its own line under it, every width */

@media (min-width:900px){

  .who-g{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"h lines" "not lines" "slot lines" "trades trades" "all all";grid-template-rows:auto auto 1fr auto auto;column-gap:48px;row-gap:20px;align-items:start}

  /* round 3 (2026-10-17, craft judge: in Spanish at 1440 the pair ran four lines against two): the longer first line gets the wider
     column, so the pair runs three lines against two, balanced */

  .who-all{margin-top:-6px}

}

/* ======================================================= 4 how it works: the tag sits on its own line under each step's name; the
   walk row's card bleeds out by its padding (system.css), so its words keep the other rows' x (2026-10-16, Franco) */
.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 .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 */
: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 */
@media (min-width:900px){.hm4-how .tl-head{flex-direction:column;align-items:flex-start;gap:6px}}   /* on a computer the step column is narrow, so every tag gets its own line (one wrapped and three didn't) */
.tl4 .price,.tl4 .mb{font-size:17px}

.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 */
/* review only (never on the live site): the picture slot grows to its words, so the Spanish slot text no longer runs over the
   money-back line and the next slot's border (checkers' pass, 2026-10-24) */
html.review .tl4 .slot{aspect-ratio:auto;min-height:130px}
@media (min-width:900px){html.review .tl4 .slot{min-height:150px}}
.hm4-how .cta-inline{margin-top:30px;border-top:0;padding-top:0}   /* button and number only: the walk row above already says the money back in full */

/* ======================================================= 5 the walk: one stop, the same screen Before / After (R7). For plumbing it is
   the page's own stop, the printed quotes list (.stop-q, p1-final's look, scoped so a trade's own stop keeps the system look);
   another pick shows that trade's first row in the system's stop look (Phase D brings the printed look there). Bone with grain
   and the torn page stay at every width (SYSTEM.md 6, the signature) */
.hm4-walk{--app:#2A5FC4;--app-ink:#1d2330;--app-mut:#5d6575;--app-line:#e7e9ee;--app-row:#f0f1f4;--app-side:#f6f7f9;--wire:rgba(79,76,69,.26);--wire-t:rgba(79,76,69,.42)}
.walk-h{max-width:20em}
/* 2026-10-17 polish (craft judge: the walk's words started at x 60 while every band above and below starts at 120): the words keep the
   page's column (.wrap); only the stop card bleeds, out to the wide column (1320px), and its padding is that bleed, so its own words
   sit on the same x. Franco's rule for the How it works card (2026-10-16): the background bleeds, the text keeps the column */
.hm4-walk{--wb:calc((min(var(--w-wide),100vw - 2 * var(--g)) - min(var(--w),100vw - 2 * var(--g))) / 2)}

   /* 20px at every width, as p1-final (2026-10-16 repair: the old Home's 17px phone rule is gone) */

.walk-more{margin-top:36px;font-size:17px;font-weight:600}
/* the walk's ending (agency pass 2026-10-18, rank 6): Plumbing's (trade-page.css) and Oct 16's look, on the page column. No tally rail
   beside the stops: measured at 1440 it squeezes stop 1's quotes app from 812 to 502px, into its phone layout (lane-2.txt) */
.walk-end{display:grid;gap:10px;justify-items:start;margin-top:clamp(36px,5vw,56px);padding-top:16px;border-top:2px solid var(--ink)}

   /* the loss, red on bone at 24px and up */
.walk-time{font-size:17px}
.walk-end .cta-row{margin-top:8px}

@media (max-width:699px){.walk-end{margin-top:28px}}   /* button and number: money back is said in How it works and the close (2026-10-17, owner judge: once in one wording, twice) */

.n4-copy h2{max-width:16em}
.n4-copy .t-lede{margin-top:14px;max-width:34em;color:var(--on-night)}

                   /* 2026-10-15: -12px, not -28px, so Pause has 16px of air above it */   /* no money back line here (2026-10-16 repair, Franco's "say each thing once"): the close's Money back row is next */
@media (min-width:900px){

  .n4-copy h2,.n4-copy .t-lede,.n4-trust{margin-inline:auto}

     /* notifications under the clock, so the paper covers only wallpaper */
  }

/* ======================================================= 7 the close: the ask, the shared rows (Money back, Hours, Reply time, Language,
   the calculator link), the signed card, the rules. The close's own rules are system.css's (section 23) since the agency pass,
   2026-10-18 (Franco: "why remove some info too?"): Hours and Language came back to Home's close and the number shows on a
   phone, as on every trade page. The LLC line is the footer's alone */
/* round 3 (2026-10-17, craft judge: at 1440 Rules we keep hung under the card and left about 190px of empty paper under Reply time).
   The approved desktop balanced the two columns with Hours, Language and the LLC line on the left; note 3 (say each thing once) moved
   those to the footer, so the left column got shorter. Rules we keep left the card (index.html: its own block after it) and, on a
   computer, runs under both columns, its three rules in a row: the ask and the card now end 42px apart in English (the card's Where
   row takes two lines since it names the base again) and 18 in Spanish, at 1280 too, where 214 and 153px of paper sat under Reply
   time. On a phone it sits 30px under the card, as before */
.c4-rules{margin-top:-14px}
/* lane 2, agency pass 2026-10-18 (requests-2 item 1): the shared rows came back (Hours, Language, the calculator link), so the left
   column is the long one again and the round 3 reason for running the rules under both columns is gone. From 900px Rules we keep
   sits under the card in the right column, as on Plumbing; the card stops being sticky there, so it never slides over the rules.
   iphone_check item 22 holds the two columns' ends together */
/* alive build 2026-10-24 (Franco's pick close-trim, alive round item 10): Home's close keeps three rows (Money back, Hours, Reply
   time), so the ask is short again. The round put Rules we keep under the ask, beside a card that carried Franco's photo; with the
   photo on About only (D44) the ask and the card end within 20px of each other, and the rules under the ask left 170 to 230px of
   empty paper under the card (measured at 1024 to 1440, both languages). So from 900px Rules we keep runs under both columns, its
   three rules in a row with a rule over and under each, round 3's layout (2026-10-17), which held while the ask was this short.
   iphone_check item 22 holds the ask and the card ending within 72px and the rules under both */
@media (min-width:900px){
  .hm4-close .c4-main{grid-column:1;grid-row:1}
  .hm4-close .c4-card{grid-column:2;grid-row:1;position:relative;top:auto}
  .hm4-close .c4-rules{grid-column:1/-1;grid-row:2;margin-top:-8px}
  .hm4-close .c4-rules ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
  .hm4-close .c4-rules li{border-bottom:1px solid var(--rule)}
  .c4-rules li{text-wrap:balance}   /* a Spanish rule takes two even lines, never "ya paga." alone */
}

/* ======================================================= band padding by role (computer, then phone). Quick sections get less air,
   the showcase night band the most */
@media (min-width:700px){
  .hm4-who{padding-block:80px}
  .hm4-how{padding-block:96px}
  .hm4-walk{padding-block:112px}
  .hm4-night{padding-block:144px}
  .hm4-close{padding-block:112px 80px}
}
@media (max-width:699px){
  main>.band{padding-block:40px}
  main>.hm4-who{padding-block:32px}
  main>.hm4-walk{padding-block:64px 56px}
  main>.hm4-night{padding-block:48px}
  main>.hm4-close{padding-block:64px 40px}

  main>.hm4-auto,main>.hm4-how{padding-block:36px}
  .auto-list li{padding-block:8px}

  .close-g{gap:36px}

  .who-g{gap:20px}
  .tl4>li{padding-block:18px}

  .c4-card{margin-top:28px}
  .c4-rules{margin-top:-6px}

        }
/* the smallest phones, under 360 (phone-access review 2026-10-10, measured at 320 x 568): a picked trade's stop phone gives back
   about 24px so its last line ends inside the screen; the number and the text link, wrapped, keep their tap areas apart; the
   Spanish trade names, too long for two columns, take one */
@media (max-width:359px){

     /* the Spanish thread fills the screen; the home bar crossed its last line (trade-page.css, round 3) */
  .cta-row,.c4-tel{row-gap:18px}

}
/* Cardino perches on the contact card (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. */

/* ======================================================= the hero's two layouts on a computer
   1080 and up: the approved desktop, words left and the clipboard right (460px, 480 from 1180); the strip of three tools under
   both (from 1240 since round 3) left with the alive build (2026-10-24, strip-out), and the facts end the words' column. 900 to
   1079 (new, unjudged): the same two columns with a 380px clipboard. Departure from the merge plan's one column there: at 1024 x 768 one column put only words on the first screen and
   left the clipboard beside an empty half. On a computer the hero keeps its number, "Or send a text" and the whole reply line,
   since a computer has no call bar */
@media (min-width:900px){
  .hm4-hero .reply-s{flex-basis:100%;margin-top:-2px}   /* its own line under the button, the number and "Or send a text" */
  .hm4-hero .hero-g{row-gap:24px}
  .hm4-hero .hero-vision{margin-top:-4px}
}
@media (min-width:900px){
  .hm4-hero{padding-bottom:72px}
  .hm4-hero .hero-g{grid-template-columns:minmax(0,1fr) 380px;column-gap:40px;grid-template-areas:"copy tool" "vision tool" "act tool" "terms tool" "facts tool";grid-template-rows:auto auto auto auto 1fr}
}
@media (min-width:1080px){.hm4-hero .hero-g{grid-template-columns:minmax(0,1fr) 460px;column-gap:56px}}
@media (min-width:900px) and (max-height:860px){.hm4-hero{padding-top:24px}}   /* 2026-10-17 polish: a 1280 x 800 laptop shows the price sentence on its first screen, in Spanish too (owner judge) */
@media (min-width:1180px){.hm4-hero .hero-g{grid-template-columns:minmax(0,1fr) 480px;column-gap:96px}}
/* round 3 (2026-10-17, owner judge: the Spanish price ran under the first screen at 1280 x 800 and off it at 1366 x 768). The
   Spanish headline takes four lines at 64px, one more than the English (no 56px on the type scale, and three lines cannot hold it,
   above), so on a laptop under 861px tall the Spanish hero gives that line back from its own air, the words unchanged: 12px less
   over the eyebrow, 6 under it, leading .94 in the headline (its descenders clear the next line's ascenders: none sit over one), 16
   between the blocks instead of 24, and the lede 6px closer at 1.4. The price ends at 760px, on the first screen at 1366 x 768.
   iphone_check.py holds both languages at 1280 x 800 and 1366 x 768. Resume pass 2026-10-19 (owner judge): to 920px tall, since at
   1440 x 900 the money back line under the price ended at 918px, under the first screen */
@media (min-width:1180px) and (max-height:920px){
  :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) .hm4-hero .t-lede{margin-top:16px;line-height:1.4}
  :lang(es) .hm4-hero .hero-g{row-gap:16px}
}
/* the facts close the hero: three on Home (the money back is said once, in the close: Franco's list item 3). Since the alive build
   (2026-10-24, strip-out) they sit in the hero's own grid, 4px under the terms' row gap, as the round built them */
@media (min-width:900px){.hm4-hero .hero-g>.facts4{margin-top:4px;padding-bottom:0}.hm4-hero .facts4 ul{padding-block:0}}
/* round 4 (2026-10-18, craft judge) set the three facts in the strip's own columns from 1240, each under its picture. Since the alive
   build (2026-10-24, Franco's pick facts-line) the facts are one plain line of sentences (system.css 12b), so the columns went;
   iphone_check.py item 28 now holds the line */

/* ======================================================= the phone layout (under 900px), p1-final
   The first screen reads: headline, one line, the call button with the reply line beside it, then the walk sheet running off the
   bottom of the screen right under the ringed $1,900. Then the two links under the sheet, the vision line, the price and the
   facts (the strip between the sheet and the vision line left with the alive build, 2026-10-24). One full-width black slab per screen, and that is the call bar */
@media (max-width:899px){
  .hm4-hero{padding-top:26px}
  .hm4-hero .hero-g{gap:0}
  .hm4-hero .eyebrow{font-size:15px;line-height:1.45;margin-bottom:18px;max-width:26em}
  .hm4-hero h1{font-size:38px;line-height:1.04;letter-spacing:-.024em}
  .hm4-hero .t-lede{font-size:17px;line-height:1.5;margin-top:14px}
  .hm4-hero .hero-act{margin-top:32px}
  .hm4-hero .hero-act .cta-tel{display:none}         /* data-extra: the number and Text live in the bar, on screen the whole time */
  .hm4-hero .cta-row{flex-wrap:nowrap;gap:16px}
  .hm4-hero .hero-act .btn{flex:none;padding:0 26px}
  .hm4-hero .hero-tool{margin-top:38px}
  .hm4-hero .clip{padding-top:16px}
  .hm4-hero .lh{padding-bottom:10px}
  .hm4-hero .sh-cols{margin-top:10px}
  .hm4-hero .pk-more{margin-top:26px}
  .hm4-hero .t-tools{display:none}   /* 2026-10-17 (Franco on his iPhone: the block "cuts off a little rough" and sits off centre): the vision line, the price and the
     facts sit centred in their paper, 48px from the phone band's edge to the line and 48px from the last tick to What we automate
     (it was 64 over and 26 under). Since the alive build (2026-10-24, strip-out) the block sits between the links under the sheet
     and the walk, centred the same way. iphone_check.py holds the two within 2px (item 3) */
  .hm4-hero .hero-vision{margin-top:48px;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
  .hm4-hero .hero-terms{margin-top:22px;gap:12px}
  .hm4-hero .facts4{margin-top:18px;padding-bottom:34px}   /* note 4: the facts 32px under the price (it was a 72px hole); ticks until the alive build of 2026-10-24 */
  /* 2026-10-17, shadows on a phone (Franco on his iPhone: "overbearing", "over buttons and text"): every picture's shadow fades out
     before the next words or control. On a small screen a lift reads deeper, so Home's phone pictures take the shorter one
     (system.css --lift, 34px of reach, faded by 19px) and keep their air: the clipboard's lift ends above the picker; the code
     window took --lift (the strip's Excel window did too, until the strip left Home, 2026-10-24) until it moved to How it works (2026-10-27),
     and What we automate's PDF picture takes --lift on every window and notice at every width; stop 1's
     quote card, a window over a window, keeps --lift-hi without its deep layer, with 44px of paper before the margin note.
     shadow_air.py measures every one at 375 and 393 in WebKit and Chromium */
  .hm4-hero .board{box-shadow:inset 0 1px 0 rgba(255,244,222,.28),inset 0 0 0 1px rgba(70,48,20,.22),0 3px 0 var(--board-edge),0 4px 1px rgba(40,28,12,.22),0 16px 24px -10px rgba(58,47,28,.30),0 8px 12px -8px rgba(0,0,0,.26)}

}
/* the Spanish letterhead (2026-10-17 polish, craft judge): "Plomería, 2 camionetas, condado de Alachua" (323px, the live sample's own
   words) hangs under the title in two lines, as the English and every computer view do. Round 3 (craft judge: at 375 x 667 it still
   dropped to the mark's left edge): on a short phone too, the room coming from the short phone block below. On a phone its two lines
   sit at 1.3, one block of print under the title (1.55 read as two paragraphs) */
@media (max-width:899px){:lang(es) .hm4-hero .sh-sub{line-height:1.3}}
/* picks follow-up (Franco 2026-10-19, design round item 7's Spanish match): a phone's letterhead reads the short business line, as
   the trade pages' has since item 1 (span.sh-at holds the place; the town stays beside Llámenos, "Empresa de Gainesville"). The
   Spanish row 1 now says what was lost and what each was worth, "5 trabajos perdidos × $380 de ganancia por trabajo", two phone lines,
   and the letterhead's second line is the room it takes: the call bar still cuts no line of the sheet (check.py HOME_FIRST_JS) */
@media (max-width:899px){.hm4-hero .lh .sh-at{display:none}}
/* Home's numbers beside a button: the bar carries the number (data-extra). 2026-10-17 polish: so does the call block after How it works
   and after the night band (owner judge: one in-page ask per stretch; p1-final's own check was "no extra call asks"). A phone on its
   side (under 501px tall) has no bar, so both come back there */
@media (max-width:899px) and (min-height:501px){main .cta-inline .cta-tel,main .cta-inline[data-extra]{display:none}}

/* tall phones (Pro Max, Plus): room for a bigger headline, still ending on the ring */
@media (max-width:899px) and (min-height:900px){
  .hm4-hero{padding-top:30px}
  .hm4-hero h1{font-size:41px}
  .hm4-hero .t-lede{font-size:18px;margin-top:16px}
  .hm4-hero .hero-tool{margin-top:40px}
}
/* Nov 7: the Spanish headline is set by phrase (items 4 and 6, no-break spaces in the page), so "que le quita el sueño." never
   breaks, and at 41px it is 354px wide (8.63em). The tall-phone size above was set for 414 to 440px wide phones; a 320 or 360px wide
   screen 900px or taller got it too, and the phrase ran 66px past a 288px column (the page scrolled 50px sideways, the body's clip
   hid the rest). Here the headline takes the biggest size its phrase fits in the column, 41px from 390 wide as before, 33px at 320,
   37.7px at 360. The hero's copy is the container, so the measure is the column's own width. check.py holds the headline inside
   its column at 320, 360 and 393 at 568 and 900 tall, both languages (hero_fit_problems) */
@media (max-width:899px){.hm4-hero .hero-copy{container-type:inline-size}}
@media (max-width:899px) and (min-height:900px){:lang(es) .hm4-hero h1{font-size:min(41px,100cqi / 8.7)}}
/* the Spanish headline runs four lines at 38px, so the gaps above the sheet tighten; each gap is set so the bar's top edge lands in
   the white between two lines of the sheet (p1-final, measured at 390 x 844, 375 x 667, 393 x 659 and 430 x 932) */
@media (max-width:899px) and (min-height:701px) and (max-height:899px){
  /* round 2 (2026-10-17): the short-phone fix below, applied where it also fits. Here the Spanish eyebrow sat 16px under the header
     (English 32), on the commonest iPhones (390 x 844, 393 x 852). It gets 28: 12px more on top, taken back from a 36px headline (still
     four lines) and 2px less under the eyebrow and over the button, so the ringed row ends where it did (755 to 756px at 390 x 844) */
  :lang(es) .hm4-hero{padding-top:22px}   /* 10 before round 2; 16 and 24 before the shop line went back under the title */
  :lang(es) .hm4-hero h1{font-size:36px}
  :lang(es) .hm4-hero .eyebrow{margin-bottom:12px}
  :lang(es) .hm4-hero .hero-act{margin-top:20px}
  :lang(es) .hm4-hero .hero-tool{margin-top:18px}
}
/* checkers' pass (2026-10-24): with the strip gone the facts sit one swipe under the reply line by Call us, so on a phone a fact the
   line already says steps aside, said once, as the line itself does for the eyebrow: the language where the line says it (390px and
   wider, .rs-lang), Gainesville where the short phone's line says it (.rs-g; the Spanish one from 360px). The computer keeps all
   three. check.py HOME_JS holds it */
@media (min-width:390px) and (max-width:899px){.hm4-hero .facts4 li:nth-child(2){display:none}}
@media (max-width:899px) and (max-height:700px){.hm4-hero .facts4 li:nth-child(1){display:none}}
@media (max-width:359px) and (max-height:700px){:lang(es) .hm4-hero .facts4 li:nth-child(1){display:inline-block}}
@media (max-width:899px) and (min-height:900px){:lang(es) .hm4-hero .hero-act{margin-top:40px}:lang(es) .hm4-hero .hero-tool{margin-top:44px}}   /* 2026-10-17: 56 before the shop line's second line */
/* short phones (iPhone SE, 667 tall): the eyebrow steps aside so the ring still clears the bar, and the line beside the button
   says Gainesville instead (said once: where the eyebrow shows, it says Gainesville) */
@media (max-width:899px) and (max-height:700px){
  .rs-g{display:inline}
  /* round 2 (2026-10-17, judges, seen in Spanish; the English measured the same): with the eyebrow gone the headline's first line
     sat 15 to 16px under the header. It gets 28 to 30px, the air a taller phone's first line has under it, and the walk sheet does
     not move: the 14px come from a 30px headline (still three lines in both languages) and 2px less between the lines and the
     button, over the clamp and under it. The ringed row ends where it did (576 to 577px), the bar still lands between two lines */
  .hm4-hero{padding-top:22px}   /* p1-final took 8px from a 56px header on short phones; the site keeps one 64px header */
  .hm4-hero .eyebrow{display:none}
  .hm4-hero h1{font-size:30px}
  .hm4-hero .t-lede{font-size:16px;margin-top:8px}
  .hm4-hero .hero-act{margin-top:12px}
  .hm4-hero .cta-row{gap:12px}
  .hm4-hero .hero-act .btn{padding:0 22px}
  .hm4-hero .hero-tool{margin-top:10px}
  .hm4-hero .clip{padding-top:11px}   /* the clamp's lever rises 11px over the board */
  .hm4-hero .sheet{padding-top:40px}
  .hm4-hero .board{padding-top:24px}
  /* note 7: beside "Llámenos" the Spanish line ran four lines and crowded the clip. Since the 2026-10-17 polish (owner judge) it keeps
     the free call, the reason to call, and drops the city instead (the facts under the price say Gainesville; the English keeps
     all three in its three lines): three
     lines, "La primera llamada es sin costo. Le respondemos el mismo día hábil." */
  /* round 3 (2026-10-17, judges: a Spanish reader learned we are local two screens down): the line says all three in three short
     sentences, one a line at 375 and 393 as the English: "Empresa de Gainesville. Primera llamada sin costo. Respuesta el mismo día
     hábil." (ES-NEW-LINES, round 3; the two-sentence line is the other widths') */
  :lang(es) .rs-l{display:none}
  /* with three lines beside the button, as in English, the Spanish keeps the English spacing, but the clip starts 16px under the
     line (it sat 10px under it, with the clamp 5px higher) and the sheet's top margin gives those 6px back, so row 1's formula
     still ends above the bar at 393 x 659 */
  :lang(es) .hm4-hero .hero-tool{margin-top:16px}
  :lang(es) .hm4-hero .sheet{padding-top:34px}   /* 36 before round 2 (see the headline's air above) */
  /* round 3: the letterhead's second line (16px at 1.3) comes back from the Spanish first screen itself: the lede at 15px (three
     lines still), 2px less over the button, and the letterhead and the column heads 4 to 2px tighter. Row 1's formula ends at 599px,
     4px over the bar at 393 x 659 (1px before) */
  :lang(es) .hm4-hero .t-lede{font-size:15px}
  :lang(es) .hm4-hero .hero-act{margin-top:10px}
  :lang(es) .hm4-hero .lh{padding-bottom:6px}
  :lang(es) .hm4-hero .sh-cols{margin-top:6px;padding-bottom:4px}
  :lang(es) .hm4-hero .sh-rows li:first-child{padding-top:9px}
}
/* under 360px the three short sentences take five lines beside "Llámenos" (each is wider than the 143px beside it at 320), so the
   smallest phones keep the two-sentence line, four lines, as before round 3 */
@media (max-width:359px) and (max-height:700px){:lang(es) .rs-g{display:none}:lang(es) .rs-l{display:inline}}
/* round 3 (2026-10-17, craft judge): under 390px wide on a 701 to 899px tall phone (375 x 812: iPhone X, XS, 11 Pro, 12 mini, 13 mini)
   the English headline took four lines and the lede four, so the ringed row ended under the call bar (845px in English, 820 in
   Spanish; the bar starts at 756). The headline steps to 35px (three lines from 360), the lede to 16px (three lines), and the clipboard
   takes the short phone's clip, board and sheet tops. Row 1 ends 22px over the bar in English and 11 in Spanish, the bar in the white
   between rows as at the other sizes; 390 and up are unchanged. iphone_check.py and check.py's first screens include 375 x 812 */
@media (max-width:389px) and (min-height:701px) and (max-height:899px){
  .hm4-hero h1{font-size:35px}
  .hm4-hero .t-lede{font-size:16px}
  .hm4-hero .clip{padding-top:11px}
  .hm4-hero .board{padding-top:24px}
  .hm4-hero .sheet{padding-top:40px}
  :lang(es) .hm4-hero .sheet{padding-top:34px}
}
/* round 4 (2026-10-18, judges: a 360 x 780 Android phone, a common size, had the ringed row under the call bar, row 1 ending 34px under
   it in English and 45 in Spanish). Under 375px wide the lede takes a fourth line, so on a 701 to 899px tall phone that narrow the lede
   steps to 15px (three lines in both languages) and the gaps over the button and the clipboard close by 8px; the Spanish headline goes
   to 33px (still four lines) and its two gaps and the sheet's top give 4px each. Row 1 ends 10px over the bar in English and 8 in
   Spanish, the bar in the white before row 2 as at 375 and 393; 375 x 812 and up are unchanged. iphone_check.py and check.py's first
   screens include 360 x 780 */
@media (max-width:374px) and (min-height:701px) and (max-height:899px){
  .hm4-hero .t-lede{font-size:15px}
  .hm4-hero .hero-act{margin-top:24px}
  .hm4-hero .hero-tool{margin-top:30px}
  :lang(es) .hm4-hero h1{font-size:33px}
  :lang(es) .hm4-hero .hero-act{margin-top:16px}
  :lang(es) .hm4-hero .hero-tool{margin-top:14px}
  :lang(es) .hm4-hero .sheet{padding-top:30px}
}
/* round 4 (2026-10-18, judges, 320 x 568; the stamp left on Nov 6): beside the 74px Sample stamp "Walk sheet" had 100px and broke into "Walk / sheet", and the
   Spanish "Hoja de visita" (130px) could not fit at all; the call bar then cut the title and the stamp. Under 360px wide the stamp is
   set at 13px with 6px sides (picture text keeps 12px or more), the head's gaps are 8px and the Spanish title is 20px, so each title
   holds one line beside its stamp (11 and 6px to spare at 320). On a short phone that narrow the bar lands between the title's line
   and the shop line under it, 4px clear of each: the shop line sits 8px under the title (2 at other widths), the English clipboard
   starts 18px lower (28px under the line beside the button, which sat 10px over the clamp) and the Spanish sheet's top gives 5px.
   p1-final's look at 375 and 393 is unchanged; the stamp stays on the title's line. iphone_check.py and check.py include 320 x 568 */
@media (max-width:359px){
  .hm4-hero .lh{column-gap:8px}
  :lang(es) .hm4-hero .sh-title{font-size:20px}
}
@media (max-width:359px) and (max-height:700px){
  .hm4-hero .lh .sh-sub{margin-top:8px}
  .hm4-hero .hero-tool{margin-top:28px}
  :lang(es) .hm4-hero .sheet{padding-top:29px}
}
/* item 12, the first phone screen with the picker's row (Franco 2026-10-19, design round item 12). The row takes 44px
   and 6px under it; the lede's four tool names give back a line where it had three, and on a phone the eyebrow keeps "For local
   businesses in Gainesville." (its kinds of business, .eb-kinds, step aside: the row right under the call names all nine). The
   English short phone takes the Spanish short phone's letterhead (6px under the title, the column heads 6px under it, row 1 9px
   down), the sheet's top 4px closer to the clamp and 4 and 2px less over the call and the lede. The margin over the row is set per height band so the sheet's ringed row 1 lands where it did before the row came, the
   call bar in the same white (measured at 390 x 844, 375 x 667, 393 x 659, 375 x 812, 430 x 932, 360 x 780 and 320 x 568,
   picks-build-2026-10-19/work/measure_pick.py; check.py HOME_FIRST and iphone_check.py item 15 hold it) */
@media (max-width:899px){
  .hm4-hero .eb-kinds{display:none}
  .hm4-hero .hero-tool{margin-top:18px}
  :lang(es) .hm4-hero .hero-tool{margin-top:28px}
}
/* a tall Spanish phone: the headline set by phrase took a line off, so the bar would cut row 2's head; the call and the row come up
   and the bar lands between rows 2 and 3, two rows of the sheet on the first screen */
@media (max-width:899px) and (min-height:900px){.hm4-hero .hero-tool{margin-top:34px}:lang(es) .hm4-hero .hero-tool{margin-top:17px}:lang(es) .hm4-hero .hero-act{margin-top:22px}}
@media (max-width:389px) and (min-height:701px) and (max-height:899px){.hm4-hero .hero-tool{margin-top:42px}:lang(es) .hm4-hero .hero-tool{margin-top:25px}}
@media (max-width:374px) and (min-height:701px) and (max-height:899px){.hm4-hero .hero-tool{margin-top:22px}:lang(es) .hm4-hero .hero-tool{margin-top:15px}}
@media (max-width:899px) and (max-height:700px){
  .hm4-hero .sheet{padding-top:30px}   /* English; the Spanish keeps its own 34px (29 under 360px) */
  :lang(en) .hm4-hero .hero-act{margin-top:8px}
  :lang(en) .hm4-hero .t-lede{margin-top:6px}
  .hm4-hero .lh{padding-bottom:6px}
  .hm4-hero .sh-cols{margin-top:6px;padding-bottom:4px}
  .hm4-hero .sh-rows li:first-child{padding-top:9px}
  .hm4-hero .hero-tool{margin-top:8px}
  :lang(es) .hm4-hero .hero-tool{margin-top:16px}
}
@media (max-width:359px) and (max-height:700px){.hm4-hero .hero-tool{margin-top:17px}:lang(es) .hm4-hero .hero-tool{margin-top:20px}}
/* end of item 12's first phone screen */
/* alive build 2026-10-24 (Franco's pick phone-scale, alive round item 12): on a short phone the headline goes from 30 to 32px at
   leading 1 (0.8px more a line), so it stays the loudest line on the page beside a 30px closing line and 28px section heads
   (system.css section 3). The 2px it takes come back from over the call in English (three lines, 2.4px) and from over the picker's
   row in Spanish (two lines, 1.6px; three under 360px), so row 1's ring and the call bar's edge stay within half a pixel of where
   they were (alive-build-2026-10-24/logs/phone-first-before.log and phone-first-after.log). Where 32px would take a line more, the
   English under 360px (four lines) and the Spanish from 360 to 389px (three: "Automatizamos el papeleo que" fills the 343px column
   at 31px), the headline keeps 30px and its spacing: the English there stays over a 28px closing line, the Spanish at 375 x 667 is
   as big as the 30px one, never smaller (alive-build-2026-10-24/logs/phone-probe-h1.log) */
@media (max-width:899px) and (max-height:700px){
  .hm4-hero h1{font-size:32px;line-height:1}
  :lang(en) .hm4-hero .hero-act{margin-top:6px}
  :lang(es) .hm4-hero .hero-tool{margin-top:14px}
}
@media (max-width:359px) and (max-height:700px){:lang(es) .hm4-hero .hero-tool{margin-top:18px}}
@media (max-width:359px) and (max-height:700px){:lang(en) .hm4-hero h1{font-size:30px;line-height:1.04}:lang(en) .hm4-hero .hero-act{margin-top:8px}}
@media (min-width:360px) and (max-width:389px) and (max-height:700px){:lang(es) .hm4-hero h1{font-size:30px;line-height:1.04}:lang(es) .hm4-hero .hero-tool{margin-top:16px}}

/* ======================================================= design round picks on Home's walk (Franco 2026-10-19, "do 1 to 13": items 3,
   5 and 13; SYSTEM.md section 13, "Design round picks on Home's walk") */
/* item 3: the walk opens on its number; its red figure is system.css .walk-h-usd since the picks follow-up (the trade pages share it) */
/* item 13: the walk adds up its stops. The slip and the right column are computer only; a phone keeps today's ending, the total with
   Call us right under it (both judges: on a phone the slip repeats rows scrolled past seconds ago and pushes the call a screen down).
   The two wrappers keep the phone's rhythm: 10px between every line, as the walk end's own gap, and 20px over the calculator line */
.walk-sum,.walk-act{display:grid;gap:10px;justify-items:start;min-width:0}

@media (min-width:900px){
  /* rows above the total, never beside it (both judges): the slip on the left, its double rule, then the total as the answer, once;
     the time back, the call and the calculator line on the right, top aligned with the slip */
  .walk-end{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,6vw,96px);align-items:start;padding-top:32px}
     /* the label and its Sample stamp on one line (judge: the stamp against what it marks, never floating), the figure under them: the
     Display figure at 120px from 1080px (both judges: "near 120", 152 was louder than it needs; no pen line under a red figure), 64px
     in the narrower column from 900 to 1079. Both are steps of the one type scale (SYSTEM.md 4) */

  .walk-act{padding-top:4px}
}

/* motion (home.js slipMotion): when the walk end comes into view each row writes in 420ms after the one before (Motion's timing), the
   double rule draws, then the total lands, so the slip adds up before the answer shows (craft judge: it showed the sum first). No
   ticks: a tick beside a loss read as "done, handled" (both judges). Reduced motion, ?still, a jump to the walk and a phone: finished */

@keyframes ws-in{from{opacity:0;transform:translateY(6px)}}
@keyframes ws-rule{from{transform:scaleX(0)}}
/* end of the design round picks on Home's walk */
/* ======================================================= who we work with, 2026-10-23 (D39, D40): the one line, the examples, the call */
.who-g{grid-template-areas:"h" "one" "ex" "all" "not" "slot"}
.who-ex{grid-area:ex;font-size:20px;line-height:1.35;color:var(--body);max-width:30em;text-wrap:balance}
@media (max-width:899px){.who-g{grid-template-areas:"h" "one" "ex" "all" "slot"}}
@media (min-width:900px){
  .who-one{display:block;font-size:32px;line-height:1.2;letter-spacing:-.015em;max-width:20em}
  .who-ex{font-size:24px;line-height:1.3}
  .who-g{grid-template-areas:"h one" "slot ex" "slot all" "slot not";grid-template-rows:auto auto auto 1fr;row-gap:24px}
  .who-all{margin-top:0}
}
/* the Industry pages list in Who we work with (2026-10-23): R13 keeps all eight trade links on a phone, as plain links like the other
   pages' close list (trade-page.css .pl-trades), before "Don't see yours?" so it reads as pages, never the whole market */
.who-pages{grid-area:pages;display:grid;gap:2px}
.who-links{display:flex;flex-wrap:wrap;column-gap:20px}
.who-links 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}
.who-links a:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* alive build 2026-10-24 (Franco's picks who-trim and trades-open, alive round items 9 and 8): What you keep left Home (What we
   automate's tools line and Rules we keep say it), so its area went; the Industry pages list ends on the call, the trade pages' and
   Contact's own item, and "Most of the work is the same." with All industries follows on its own lines */
.who-g{grid-template-areas:"h" "one" "ex" "pages" "all" "slot"}
@media (min-width:900px){.who-g{grid-template-areas:"h one" "slot ex" "slot pages" "slot all";grid-template-rows:auto auto auto 1fr}}
/* alive build 2026-10-24 (Franco's pick pine-field, alive round item 4): Who we work with is Home's one pine field (system.css
   [data-ground=pine], the heading, the labels and the focus ring). Its own words take the paper; the Industry pages links keep a
   muted pine underline and turn white on hover, with no fill and no negative margin, so nothing runs past the words (the prototype's
   hover fill reached 10px past them and took its rules along: the judges' misaligned rows). check.py HOME_JS holds the edges */
.hm4-who[data-ground=pine] :is(.who-one,.who-ex,.who-all span){color:var(--on-pine)}
.hm4-who[data-ground=pine] .who-links a{color:var(--on-pine);text-decoration-color:var(--muted-pine)}
.hm4-who[data-ground=pine] .who-links a:hover{color:#fff;text-decoration-color:#fff;text-decoration-thickness:2px}
/* ======================================================= the alive build (2026-10-24, Franco's Oct 23 picks), layout group */
/* Oct 19 idea 15 (Franco's yes, Oct 23): the walk comes right under the promise, and its start names the other sample businesses.
   With JS off they are links to their pages, as the picker's chips are; home.js walkAlso() turns each into a button that switches
   the sample (Lumora.setTrade) and always names the samples not picked. The line ends on the open door Who we work with ends on.
   Checkers' pass (2026-10-24): each name keeps its comma or period (.wa-n; an inline-block name let a phone open a line on the
   comma; the open door keeps its question and its call together too), and the names are words in a sentence (WCAG 2.5.8's inline exception) at the line's own 25.5px height: the 44px layer
   they had reached 12px into the lines above and below once the line wrapped, so a tap on Roofing picked Offices. check.py
   HOME_JS holds both */
.walk-also{margin-top:16px;font-size:17px;line-height:1.5;color:var(--body);max-width:40em}

@media (max-width:699px){.walk-also{margin-top:12px}}

/* How it works from 1240px. The alive build put its heading and "You can stop after any of them." in their own column, sticky
   beside the steps (how-split, alive round item 17: "the heading travels down with the reader"). After the promise audit the steps
   are short: the whole section fits one laptop screen, so the heading never travelled and stood over 541px of bare paper (567 in
   Spanish), the hole Franco named on Oct 25 ("too much empty space that breaks the design of the website"). Space pass fixes,
   2026-10-25: the heading sits over the steps, as under 1240 and on every trade page, and the steps keep the split's 72px on their
   left, where the spine (how-spine) still runs down them and draws with the scroll, just inside the heading's x. No word
   changed. check.py HOME_JS holds the heading over the steps and the spine between the heading's x and the steps', DESK_JS the stop
   line on the rows' words, space_problems the hole. Before: "home ORIGINAL-2026-10-25-space.css" */
@media (min-width:1240px){
  .hm4-how{--how-in:72px}
  .hm4-how .how-h{grid-template-columns:minmax(0,calc(var(--how-in) + var(--tl-head,15em))) minmax(0,1fr)}   /* the stop line keeps the rows' words' x */
  .hm4-how :is(.tl4,.cta-inline){margin-left:var(--how-in)}
}
/* how-spine (alive round item 13), its markup: one 1px ink line down the four steps and a square marker on each step's name,
   pseudo-elements only, in the steps' 72px left margin (44px left of the steps, 28px right of the heading's x), from 1240 only: the
   judges said the line looks lost where the steps run edge to edge (the round started it at 900). The line is drawn and every
   marker filled here; the motion that draws them as the reader scrolls is the block after this one (motion group) */
@media (min-width:1240px){
  .hm4-how .tl4{position:relative;--sp-x:-44px}
  .hm4-how .tl4::before{/* ui-ok: stripe the axis of the How it works timeline, one 1px ink line beside four steps, not a card edge */content:"";position:absolute;left:var(--sp-x);top:0;bottom:0;width:1px;background:var(--ink);transform-origin:50% 0;pointer-events:none}
  .hm4-how .tl4>li{position:relative;--mk:31px}
  .hm4-how .tl4>li.tl-big{--mk:44px}
  .hm4-how .tl4>li::before,.hm4-how .tl4>li::after{content:"";position:absolute;top:var(--mk);left:calc(var(--sp-x) - 5px + var(--bleed,0px));width:11px;height:11px;pointer-events:none}
  .hm4-how .tl4>li::before{border:1.5px solid var(--ink);background:var(--paper)}
  .hm4-how .tl4>li.tl-big::before{background:var(--sheet)}
  .hm4-how .tl4>li::after{background:var(--ink);transform-origin:50% 50%}   /* the inner square: filled */
}
/* how-spine (alive round item 13), its motion (alive build 2026-10-24, motion group): the line grows down the four steps as the reader
   scrolls, its tip held on the screen's 60% line (it starts when the list's top reaches that line and is whole when the list's foot
   does), and each step's marker fills as the tip reaches it, over 24px of scroll; scrolling back up undoes it the same way. CSS
   scroll-driven animations (the round's view timelines and ranges), so no script runs and nothing moves while the page stands still.
   Only transform animates. Without them (older browsers), with reduced motion, or with ?still (system.js sets html.still) the line is
   drawn and every marker filled, the frame above. check.py spine_problems holds the finished frame and the drawn line past the list */
@supports (animation-timeline:view()){
  @media screen and (min-width:1240px) and (prefers-reduced-motion:no-preference){
    html:not(.still) .hm4-how .tl4{view-timeline:--how-spine block;view-timeline-inset:0}   /* not html's scroll-padding (checkers' pass, 2026-10-24) */
    html:not(.still) .hm4-how .tl4::before{animation:how-grow linear both;animation-timeline:--how-spine;animation-range:cover 40vh cover calc(100% - 60vh)}
    html:not(.still) .hm4-how .tl4>li{view-timeline:--how-step block;view-timeline-inset:0}
    html:not(.still) .hm4-how .tl4>li::after{animation:how-fill linear both;animation-timeline:--how-step;animation-range:cover calc(40vh + var(--mk)) cover calc(40vh + var(--mk) + 24px)}
  }
}
@keyframes how-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes how-fill{from{transform:scale(0)}to{transform:scale(1)}}
/* ======================================================= the space pass (2026-10-25). Franco, Oct 25: "why does the home feel a little
   empty now? I feel like there's a little too much empty space that breaks the design of the website, I guess. I don't know, the flow."
   Measured on the live build (space-and-tools-2026-10-25/before): the holes were columns of very different heights set side by side
   and top aligned, not padding. Stop 1's notes ended 798px above its picture's foot, the walk end's call 360px above the total's,
   Who's heading 300px above its links and the night log 167px above the phone's foot. The audit's shorter copy made two of them
   bigger; the alive build's layouts plus that copy made Who's. The fix keeps every word and every pick, and follows what the bench
   found the best sites do (space-and-tools-2026-10-25/bench): beside a tall side that fits one screen the short side is centred
   (Stripe, Mercury, Apple, Fiken); beside a side taller than the screen the short side moves to where it reads first, never under a
   hole; on a strong colour the heading leads a full column instead of standing alone over an empty block (Fiken, Basecamp).
   check.py space_problems holds it: on a computer no column beside a taller one leaves a blank run over a quarter of the screen,
   unless it is sticky and really rides along (a section taller than the screen; How it works no longer is one, see how-split
   above). Before: "home ORIGINAL-2026-10-25-space.css" */

/* the walk end, from 900px: rows above the total stay (design round item 13, both judges), and the time back with Call us sits at the
   middle of the slip and its total, so the right half no longer ends 360px above the total's foot (Franco's screenshot 13). The
   adding slip and its answer fit one screen, the case where the bench centres the short side */
@media (min-width:900px){
  .walk-end>.walk-act{align-self:center;padding-top:0}
  /* the time back is the walk's second answer, so on a computer it reads as one: its figure on its own line at the stops' figure size
     (32px, ink: only money is red or pine), the label above it unchanged. With four stops the slip runs 513px and the right column had
     216px of bone over and under a 94px line and button at 1280 x 800 */
  .walk-act .walk-time b{display:inline-block;margin-top:2px;font-size:32px;line-height:1.15;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
  }
/* Who we work with on the pine field, from 900px: the heading led an empty block (300px at 1440, 340 at 1024; Franco's screenshot
   14). The left column now says who, in order (the heading, the one line, the examples), and the right column is where to go (the
   Industry pages list, the closing line and All industries, one block: .who-go). Equal halves, so the two end within a line or two
   of each other in both languages. Under 900 the order is unchanged: who, then where to go */
.who-g{grid-template-areas:"h" "one" "ex" "go" "slot"}
.who-go{grid-area:go;display:grid;row-gap:inherit;align-content:start;min-width:0}
.who-go>*{grid-area:auto}   /* the list and the closing line stack in their block; their old areas (pages, all) name nothing here */
@media (min-width:900px){
  /* the last row takes any height the right column needs beyond the left, so the left lines never spread apart. The review slot (this
     computer only, never lumorafl.com) gets a fourth row; on the live site there is none, so no empty row leaves its gap at the foot */
  .who-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h go" "one go" "ex go";grid-template-rows:auto auto 1fr;column-gap:clamp(48px,6vw,96px)}
  html.review .who-g{grid-template-areas:"h go" "one go" "ex go" "slot go";grid-template-rows:auto auto auto 1fr}
  .who-go{padding-top:10px}   /* the label's cap height on the heading's: "Industry pages" reads level with "Who we work with" */
}
/* ================================================================================================================================
   The last pass (2026-10-26, Franco's picks from last-pass-2026-10-26/PASS.html): items 1 to 20 and 22, with the judges' "before it
   ships" notes, Offices as the default sample (26), the owner photo in place of item 23, and Plumbing's own quotes list as QuickBooks'
   estimates (28). Ported from the prototype's last-pass.css with its chg- switches taken off. Type stays on the page's one scale
   (15, 17, 20, 24, 32, 44, 64; picture text 12px and up), red means money lost only, and pencil is #4F4C45. Before: "home
   ORIGINAL-2026-10-26-pass.css" beside this file. Out, as Franco said: 21 (the dot grid stays), 23 as proposed, 24, 25
   ================================================================================================================================ */

/* 4 hero-groups (computer): nine blocks read as three groups, same words. The vision line its own step (24px, 600, ink), broken as
   "run the same / whether you're there or not" (judges); the price and the money back one block under a 1px ink rule, both 17px
   ink; the facts one plain line at 400 under a hairline, so they stop outweighing the price. On a laptop under 861px tall the gaps
   close, so the money back keeps the first screen at 1280 x 800 and 1366 x 768 */
@media (min-width:900px){
  .hm4-hero .hero-g{row-gap:18px}
  .hm4-hero .hero-vision{margin-top:14px;font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--ink);max-width:24em}
  .hm4-hero .hero-vision>span{display:block}
  .hm4-hero .hero-act{margin-top:6px}
  .hm4-hero .hero-terms{gap:8px;padding-top:16px;margin-top:6px;border-top:1px solid var(--ink)}
  .hm4-hero .hero-terms :is(.price,.hero-mb){font-size:17px;color:var(--ink)}
  .hm4-hero .hero-g>.facts4{margin-top:4px}
  .hm4-hero .facts4 ul{padding-top:12px;border-top:1px solid var(--rule);font-weight:400}
}
/* the reviewers' round (craft, nice): the facts at 400 on a phone too (they computed 500 there, so the same lines had two weights),
   and the vision line breaks after "run the same" on a phone wide enough to hold it on one line, as a computer does */
.hm4-hero .facts4 ul{font-weight:400}
@media (min-width:390px) and (max-width:899px){:lang(en) .hm4-hero .hero-vision>span{display:block}}   /* 390 up, English: each half holds one line there (at 375 the first half took two, and the Spanish halves took three lines in all) */
@media (min-width:900px) and (max-height:860px){
  .hm4-hero .hero-g{row-gap:14px}
  .hm4-hero .hero-vision{margin-top:10px}
  .hm4-hero .hero-act{margin-top:0}
  .hm4-hero .hero-terms{margin-top:0;padding-top:12px}
}
@media (min-width:1180px) and (max-height:920px){:lang(es) .hm4-hero .hero-g{row-gap:14px}:lang(es) .hm4-hero .hero-vision{margin-top:8px}}

/* 10 phone-air (phone): 16px from the headline to the lede (6px before) and the Spanish lede at the English size, paid for in six
   small steps under it, so row 1 of the sheet and its ring stay where they were over the call bar */
@media (max-width:899px) and (max-height:700px){
  .hm4-hero h1{line-height:1.05}
  :root .hm4-hero .t-lede{margin-top:16px}   /* :root outweighs the short phone's ":lang(en) ... {margin-top:6px}" above, as the prototype's html.chg-phone-air did */
  .hm4-hero{padding-top:20px}   /* 20, not the prototype's 18: Franco's iPhone round keeps 20px of air under the header (iphone_check item 11); the 2px come off the picker's foot */
  .hm4-hero .hero-tool{margin-top:6px}
  :lang(es) .hm4-hero .hero-tool{margin-top:8px}

  .hm4-hero .clip{padding-top:10px}
  .hm4-hero .sheet{padding-top:25px}
  :lang(es) .hm4-hero .sheet{padding-top:29px}
  .hm4-hero .lh{padding-bottom:5px}
  .hm4-hero .sh-rows li:first-child{padding-top:8px}
}
@media (min-width:390px) and (max-width:899px) and (max-height:700px){:lang(es) .hm4-hero .t-lede{font-size:16px}}
/* 320 x 568, English: the headline keeps item 10's 16px and the header its 20px (iphone_check item 11), so the letterhead's size line
   can't end over the call bar; the clipboard starts a step lower instead and the line sits whole under the bar, the title and its
   Sample stamp clear above it (pass-build-2026-10-26/logs/probe-320.log; before, the hero started at 10px under the header) */
@media (max-width:899px) and (max-height:600px){:lang(en) .hm4-hero .clip{padding-top:21px}}
/* Offices, Home's default sample since the last pass (item 26): its rows' names take one line beside their circled numbers, so on a
   phone each row is a little taller and the call bar lands between two rows at every first-screen size check.py measures
   (pass-build-2026-10-26/build/probe_first.py printed where each line sat) */
@media (max-width:899px) and (min-height:701px){.hm4-hero .sh-rows li{padding-block:16px}}
@media (min-width:420px) and (max-width:899px) and (min-height:900px){:lang(es) .hm4-hero .sh-rows li{padding-block:22px}}
@media (max-width:899px) and (max-height:700px){.hm4-hero .sh-rows li:not(:first-child){padding-block:22px}.hm4-hero .sh-rows li:first-child{padding-bottom:22px}}
@media (max-width:899px) and (min-height:701px){.hm4-hero .t-lede{margin-top:16px}}
/* Franco on his iPhone, 2026-10-27 (393 x 659 in Safari): "Home page is a little too tight on phone... just a tiny bit more". The
   steps between the lede, Call us, the picker and the clipboard go from 6, 6 and 3px to 12, 12 and 7 (Spanish 10, 8 and 3 to 16, 14
   and 7), 16px in all; row 1's formula still ends over the call bar (595 of 603 at 393 x 659, Spanish 607 of 611 at 375 x 667).
   320 x 568 keeps its own steps (its letterhead rule above) */
@media (max-width:899px) and (min-height:601px) and (max-height:700px){
  :root:lang(en) .hm4-hero .hero-act{margin-top:12px}
  :root:lang(es) .hm4-hero .hero-act{margin-top:16px}
  :root:lang(en) .hm4-hero .hero-tool{margin-top:12px}
  :root:lang(es) .hm4-hero .hero-tool{margin-top:14px}

}

/* 18 sheet-map: each problem row on the walk sheet links to its stop, with the stop's thin circled number (a counter: no words
   added). Only the problem name underlines on hover; the figure keeps its red. The whole row is the tap target */
.hm4-hero .sh-rows{counter-reset:sh-stop}
.hm4-hero .sh-rows>li{position:relative;counter-increment:sh-stop}
.sh-go{color:inherit;text-decoration:none}
.sh-go::before{content:counter(sh-stop);display:inline-grid;place-items:center;width:22px;height:22px;margin:-4px 7px -4px 0;vertical-align:1px;border:1.3px solid var(--pencil);border-radius:52% 48% 50% 46%/48% 52% 46% 54%;font-size:13px;font-weight:600;line-height:1;color:var(--ink)}
@media (max-width:429px){.sh-go::before{width:19px;height:19px;margin-right:4px;font-size:12px}}
@media (max-width:374px){:lang(es) .sh-go::before{display:none}}   /* the Spanish row 1 took a third line beside the number under 375 */
.sh-go::after{content:"";position:absolute;inset:0;border-radius:2px}
.sh-go:focus-visible{outline:none}
.sh-go:focus-visible::after{outline:3px solid var(--ink);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.sh-go:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}}

/* 7 data-line: "We never ask for a shared password..." sits under the walk end's call, where an owner decides (moved from How it
   works' walk step, not added) */
.walk-dl{max-width:28em;margin-top:8px;font-size:17px;line-height:1.45;color:var(--ink);text-wrap:pretty}

/* 6 night-up: How it works and the close are both paper now, so they meet at the perforated seam, its holes the rule grey */
.hm4-close.seam{border-top:0}

/* 22 who-index (computer only; a phone keeps today's list) with the owner photo (in place of item 23). Computer: who on the left,
   the photo on the right, then the nine kinds of business as a large index on thin muted pine rules, the ninth ("Don't see yours?
   Call us") the same size, so the grid reads open. Phone: the photo under the examples at gutter width, where the review-only
   planning slot was, then today's list */
.who-photo{grid-area:photo;margin:0;min-width:0}
.who-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%;border-radius:2px}
.who-ix .who-g{grid-template-areas:"h" "one" "ex" "photo" "go"}
@media (min-width:900px){
  .who-ix .who-g,html.review .who-ix .who-g{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". . photo" "h h photo" "one one photo" "ex ex photo" ". . photo" "go go go";grid-template-rows:1fr auto auto auto 1fr auto;column-gap:28px;row-gap:20px;align-items:start}   /* the words at the photo's middle: no blank run beside it */
  /* the reviewers' round (craft judge: the photo's left edge sat off the index's three columns under it, so it read as dropped
     in): the band takes the index's own three columns and gap, the words across the first two and the photo in the third as a
     4:5 portrait, on her (the file is the 3:2 frame a phone shows whole) */
  .who-ix .who-photo img{aspect-ratio:4/5;object-position:70% 50%}   /* 2026-10-27: the Rawpixel bakery owner stands right of centre; 70% keeps his face and the tablet in the 4:5 crop */
  .who-ix .who-ex{font-size:20px;line-height:1.35}
  .who-ix .who-go{padding-top:20px}
  .who-ix .who-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  .who-ix .who-links li{border-top:1px solid rgba(194,203,191,.5)}
  .who-ix .who-links a{display:flex;align-items:flex-start;min-height:48px;height:100%;padding:14px 8px 18px 0;font-size:24px;line-height:1.2;font-weight:500;text-decoration:none;text-wrap:balance}
  .who-ix .who-links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
  .who-ix .who-pages{gap:10px}
  .who-ix .who-all{margin-top:6px}
}

/* 12 two-tone: the claim in ink, its second sentence in the muted second tone, one heading. The walk's "Here's where." (home.js
   wraps it, since system.js writes the heading on every pick); the close's "Tell us what eats your week." on its own line on a
   computer (judges); a phone keeps it as the line under the heading, where the one-heading version ran two lines longer */
.close-h>.close-two{display:block;color:var(--muted)}
.close-lede>.close-two-l{display:none}
#walk .walk-h .walk-where{color:var(--muted)}
@media (max-width:699px){.close-h>.close-two{display:none}.close-lede>.close-two-l{display:block}}

/* 15 close-quiet (computer): the close steps down to 44px, one step under the headline, as the phone already does; the hand-drawn
   arrow to Call us keeps its place and shape, drawn in pencil (red means money lost only since Oct 17) */
@media (min-width:700px){.hm4-close .close-h{font-size:var(--fs-44);line-height:1.02;letter-spacing:-.022em}}
.hm4-close .pen-arrow{stroke:var(--pencil);stroke-width:2.2px}

/* 17 signature: his own signature over the typed name, which stays for reading and screen readers. Off until his real signature
   exists: signature.py puts the markup in only when system/assets/signature.png is there (never a stand-in) */
.letter-pen{display:block;width:160px;margin:20px 0 -6px -2px}
.letter-pen img{display:block;width:160px;height:auto}
.letter .letter-pen+.letter-sig{margin-top:2px}

/* 19 proof-slot: a designed place for the first client who agrees in writing, between How it works and the close. Review only (R8
   keeps empty slots off lumorafl.com); it ships once everything in it is real, cutting as many words as it adds */
.hm4-proof{display:none}
html.review .hm4-proof{display:block;padding-block:clamp(40px,5vw,72px)}
.proof-g{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
html.review .proof-ph{width:100%;aspect-ratio:4/5}
/* the band is the figure.slot itself (reviewers' round), so it drops the slot's own box and keeps it for the photo place inside */
html.review .slot.proof-slot{display:block;padding:clamp(40px,5vw,72px) 0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit;line-height:inherit;text-align:left}
html.review .proof-slot .proof-ph{display:grid;align-content:center;justify-items:center;gap:4px;padding:10px;border:1.5px dashed var(--pencil);border-radius:6px;background:var(--sheet);color:var(--pencil);font-size:13px;line-height:1.3;text-align:center}
.proof-t{display:grid;gap:8px;max-width:34em}
.proof-t p{font-size:17px;color:var(--muted)}
.proof-t .proof-who{font-size:24px;line-height:1.25;color:var(--ink)}
.proof-t .proof-res{padding:10px 12px;border:1.5px dashed var(--pencil);border-radius:6px}
@media (max-width:599px){.proof-g{grid-template-columns:minmax(0,120px) minmax(0,1fr)}}

/* 16 tap-44 (phone): the hero's "the tools you have" and the footer's bottom links get a 44px tap area with no change to how they
   look; the walk intro's links stay as they are (links inside a sentence are exempt, and the spacing made it look double spaced) */
@media (max-width:899px){.hm4-hero .t-lede a.u{padding-block:13px}}   /* the footer's links already carry 44px tap layers (a::before) */

/* ======================================================= What we automate's picture: the PDF that files itself (Franco's pick B,
   Oct 27: "these animations are beautiful... this looks real. looks trustworthy, its understandable instantly"; "i really like
   the B animation. one more time."). Ported unchanged from the trial's anim.css (solution-anim-2026-10-26/prototype), B's rules
   only, and kept last in this file so the cascade is the trial's (system.css, home.css, then these). His two changes: the last
   line says hours with no number (the markup) and the tooth mark on the letterhead (.pv-mark, the one rule added).
   Each tool keeps its own look inside its window (SYSTEM.md 17: words, columns, order and formats of Google Sheets and Gmail,
   never a logo). What these rules draw by default is the FINISHED frame: JS off, reduced motion and ?still show it. The first
   frame lives only under html.js with motion allowed (the end of this block); home.js orderPic() plays it and adds .done.
   The generic names (.val, .tint, .sf, .ck, .mn) are the picture's own: nothing else on Home uses them.
   Height: phone 506px against the code picture's 512, computer 404px against its 540 (the trial's measure, logs/today.json). */
.sa{container:sa / inline-size;margin:0}
.sa-stage{position:relative}   /* nothing in the picture changes size while it plays: the stage takes its own height */
.sa-fx{position:absolute;inset:0;pointer-events:none;z-index:6}
.sa-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.sa-ctl .pause{color:var(--ink)}
html.still .sa-pause,.sa.still .sa-pause{display:none}
html.still .sa-ctl,.sa.still .sa-ctl{display:none}   /* Nov 6: the row held the Sample stamp too; with the Pause hidden it is empty */
@media (prefers-reduced-motion:reduce){.sa-pause,.sa-ctl{display:none}}
.sa-cap{margin-top:6px;font-size:15px;line-height:1.45;color:var(--muted);max-width:36em}

/* every window inside the picture: the house's Mac title bar, a little smaller (the windows here are 150 to 360px wide) */
.sa .scr-win{box-shadow:var(--lift)}
.sa .win-tb{height:26px;gap:6px;padding:0 10px}
.sa .win-tb i{width:10px;height:10px}
.sa .win-tb span{margin-right:0;padding-left:4px;text-align:left;font-size:12px}
@container sa (min-width:480px){.sa .win-tb{height:28px}.sa .win-tb span{text-align:center;margin-right:44px;padding-left:0}}

/* a value and its box: the box is the value's own border, 1.5px, 6px round, about 4px off the words (SYSTEM.md 6: 3 to 4.5px
   of air). Transparent until a box is drawn, so nothing moves when it appears. 13px on a phone, 12px under 340px of picture */
.val{position:relative;display:inline-block;padding:2px 5.5px;border:1.5px solid transparent;border-radius:6px;font-size:13px;line-height:18px;white-space:nowrap}
@container sa (min-width:480px){.val{font-size:14px;line-height:19px}}
@container sa (max-width:339px){.val{font-size:12px;line-height:17px;padding-inline:4.5px}}
.val>svg{position:absolute;left:-1.5px;top:-1.5px;max-width:none;overflow:visible;pointer-events:none}   /* max-width: the site's svg rule squeezed the box 3px */
.val>svg path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
   /* the PDF: the viewer and a printed page */
.pdfv{container:pv / inline-size;display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--lift);font-family:var(--sys)}
.pv-tb span{margin-right:0!important;text-align:left!important;padding-left:4px!important}
.pv-pg{flex:none;font-style:normal;font-size:12px;color:#6e6e73;white-space:nowrap}
@container pv (max-width:229px){.pv-pw{display:none}}   /* a narrow viewer says "1 of 1", so the file's name stays whole */
@container pv (max-width:259px){:lang(es) .pv-pw{display:none}}
.pv-g{flex:1 1 auto;min-height:0;overflow:hidden;background:#e4e4e2;padding:6px 8px 0}   /* the viewer's grey ground; the page crops at its foot */
.pv-p{aspect-ratio:8.5/11;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04);padding:9px 12px 10px;font-family:Arial,var(--sys);color:#202124}
.pv-p p{margin:0}
.pv-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2px 10px;padding-bottom:6px;border-bottom:1px solid #d6d6d6}
.pv-biz{display:grid;min-width:0;font-size:12px;line-height:15px;color:#5f6368}
.pv-biz b{font-size:13px;line-height:16px;color:#111110}
.pv-biz span{white-space:nowrap}
/* Franco, Oct 27: "obvs add the lil logo to the invoice... just to make it a bit more yk realistic looking". Main Street Dental's
   own mark, a tooth in one ink line, on its name's line as a small letterhead sets it. It takes no height (14px in the name's
   16px line) and 17px of width (a 22px mark beside both lines grew the letterhead and pushed the Spanish "Formulario de pedido"
   under the business at 360) */
.pv-biz b{display:flex;align-items:center;gap:4px}
.pv-mark{flex:none;width:13px;height:14px;fill:none;stroke:#111110;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* the street line starts under the name, both lines to the right of the mark, as a letterhead locks them up (reviewers' round,
   Oct 27: it started under the tooth and read as a bullet). 17px = the mark's 13 and its 4px gap. Measured at 320 to 412 and 1440
   (tools/mark_indent.py): only the Spanish at 360 changes, its "Formulario de pedido" dropping under the business as at 320 and
   340, with the Total's box still 21.7px clear of the viewer's foot */
.pv-biz>span{padding-left:17px}
.pv-doc{flex:none;font-size:13px;line-height:16px;font-weight:700;color:#111110;white-space:nowrap}
.pv-f{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:0 10px;margin-top:6px}
/* one column where two no longer keep 6px between the email and the right column's labels (reviewers' round, Oct 27: 3.2px
   in English at 360, -1.3px in Spanish at 375; the trial measured 393 and 1440 only). check.py order_fields_problems holds it */
@container pv (max-width:335px){.pv-f{grid-template-columns:minmax(0,1fr)}}
@container pv (max-width:349px){:lang(es) .pv-f{grid-template-columns:minmax(0,1fr)}}
/* on a phone, one column stacks six rows and the viewer crops the page at its foot: the Phone row, never boxed or flown, stays
   off, so the Total's box sits whole (English 320 and 340 cut it 8.6px). A computer's 244px viewer has room and keeps it */
@container sa (max-width:335px){.pv-c:first-child>:is(dt,dd):nth-of-type(3){display:none}}
@container sa (max-width:349px){:lang(es) .pv-c:first-child>:is(dt,dd):nth-of-type(3){display:none}}
.pv-c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 6px;margin:0;align-items:center}
.pv-c dt{font-size:12px;line-height:16px;color:#5f6368;white-space:nowrap}
.pv-c dd{margin:0;min-width:0}
.pv-c .val{padding-block:1.5px;font-size:12.5px;line-height:16px;color:#202124}
.pv-c .val[data-from=total]{font-weight:700}
@container sa (min-width:480px){.pv-p{padding:12px 14px}.pv-c .val{font-size:13px}}
/* the boxes the page keeps once its values have left: ink, as drawn (a mark on the paper, not an input field) */
.sa[data-v=b] .val.bx{border-color:var(--ink)}

/* the copy that travels (home.js orderPic flyer()): the same box and words as the value it leaves, in the stage's top layer */
.sa-fly{display:block;opacity:0;will-change:transform}
.fly-in{position:relative;display:block;width:100%;height:100%}
.fly-sh{position:absolute;inset:0;border-radius:6px;box-shadow:var(--lift-hi);opacity:0}
.fly-bg{position:absolute;inset:0;border-radius:6px;background:#fff;border:1.5px solid var(--ink)}
.fly-t{position:relative;display:block;padding:2px 5.5px;border:1.5px solid transparent;font-family:Arial,var(--sys);color:#202124;white-space:nowrap}   /* size and padding copied from the value (home.js) */
.fly-w,.sa .xl .v{display:inline-block;line-height:1}   /* tight word boxes, so Flip.fit scales a copy evenly onto its cell */
.tint{position:absolute;inset:0;background:#e9f5ec;z-index:0}   /* the new row, lit as the house lights a changed row */
.sf{position:absolute;inset:-1px -1px 0 -1px;border:2px solid #0a63d1;pointer-events:none;opacity:0;z-index:2}   /* Sheets' selected-cell frame, in the system's blue */
/* the house's ok green tick, drawn (no icon font): a done line in the notices */
.ck{display:inline-block;width:9px;height:5px;margin:0 6px 3px 1px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}

/* the sheet: system.js pairHTML's Google Sheets window (SYSTEM.md 17, item 28), a size smaller; the grid runs to the window's
   edges, as the app does; rows 22px */
.sa .solo{container:win / inline-size;display:flex;flex-direction:column;min-width:0}
.sa .solo>.scr-win{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.sa .solo>.scr-win>.win-b{flex:1 1 auto;min-width:0}
.sa .gsw .win-b{padding:0}
.sa .gsw .xl{display:flex;flex-direction:column;height:100%}
.sa .gsw .xl table{font-size:12px}
.sa .gsw .xl td,.sa .gsw .xl th{height:22px;padding:2px 6px;line-height:16px}
.sa .gsw .xl .cl td{height:18px;padding:0 6px;line-height:16px}
.sa .gsw .xl td:first-child{width:28px;padding:0}
.sa .gsw .xl-tabs{margin-top:auto;padding:3px 6px 0}
.sa .gsw .xl-tabs span{padding:2px 10px 3px}
.sa .xl tr.hm{display:none}
@container sa (min-width:480px){.sa .xl tr.hm{display:table-row}}
@container sa (max-width:299px){.sa .gsw .xl td,.sa .gsw .xl th{padding-inline:5px}}   /* 320: the last column kept inside its window (check.py, Oct 27) */
.sa .xl tr[data-new] td{position:relative;overflow:visible}
.sa .xl tr[data-new] .v,.sa .xl tr[data-new] .rn-n{position:relative;z-index:1}
.sa .xl tr[data-new] .t-rn{background:#dedede}
.sa .xl tr[data-new] .rn-n{color:#111110;font-weight:700}
.sa .xl tr[data-new] .sf{inset:-1px}
.sa .xl tr[data-new] .sf::after{content:"";position:absolute;right:-3px;bottom:-3px;width:5px;height:5px;background:#0a63d1;box-shadow:0 0 0 1px #fff}
.sa .xl tr[data-new] td:last-child .sf{opacity:1}   /* the cell filled last keeps Sheets' selection, as the app leaves it */

/* the notices: plain white, no glass */
.mns{position:relative;display:grid;gap:8px;align-content:start}
.mn{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:start;background:#fff;border-radius:12px;box-shadow:var(--lift);padding:8px 12px 9px;font:12px/16px var(--sys);color:#1d1d1f}
.mn p{margin:0;min-width:0}
.mn-av{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;margin-top:2px;border-radius:50%;background:#9aa0a6;color:#fff;font-size:13px;font-weight:500}   /* Gmail's grey initial of the sender */
.mn-ok{grid-row:1/3;display:grid;place-items:center;height:28px;margin-top:2px;color:#1b5e2c}
.mn-ok .ck{width:12px;height:6px;margin:0 0 4px}
.mn-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mn-t b{min-width:0;font-size:13px;line-height:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-t span{flex:none;color:#6e6e73;white-space:nowrap}
.mn-s{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:1px!important;font-size:13px;line-height:17px;color:#3a3a3c}
.mn-att{padding:1px 8px;border:1px solid #dadce0;border-radius:6px;background:#fff;font-size:12px;line-height:16px;color:#3c4043;white-space:nowrap}
@container sa (min-width:480px){.mn-t{flex-direction:column-reverse;align-items:flex-start;gap:0}.mns{gap:10px}}   /* a narrow column: the app's line over the title, as a computer's notice */
/* the closing line, in Lumora's own voice and type: the time back, with no number (Franco, Oct 27) */
.sa-out{margin:4px 0 0!important;font:600 16px/1.35 var(--font);color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
/* one sentence a line, in both languages and at every width, as the trial's line broke (reviewers' round, Oct 27: balance split
   the English "Whole / days" at 393 and 1440, and the Spanish sat on one line at 393 and two at 360) */
.sa-out>span{display:block}

/* the layout. The sheet is the screen; Gmail's notice brings the PDF, which opens over the notices, its values drop into the new
   row, two more notices say what else got done, and the hours back close it */
.sa[data-v=b] .sa-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.sa[data-v=b] .sa-over{position:absolute;inset:0;z-index:4;visibility:hidden;box-shadow:var(--lift-hi)}
@container sa (min-width:480px){
  .sa[data-v=b] .sa-stage{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:16px;align-items:stretch}
}

/* the first frame (only with JS and motion allowed; home.js adds .done when the play ends, and the finished frame above takes
   over with nothing moving) */
@media screen and (prefers-reduced-motion:no-preference){
  html.js:not(.still) .sa:not(.done):not(.still) .val.bx{border-color:transparent}
  html.js:not(.still) .sa:not(.done):not(.still) .tint,
  html.js:not(.still) .sa:not(.done):not(.still) .sf,
  html.js:not(.still) .sa:not(.done):not(.still) .xl tr[data-new] .v,
  html.js:not(.still) .sa:not(.done):not(.still) .sa-out{opacity:0}
  html.js:not(.still) .sa:not(.done):not(.still) .xl tr[data-new] .rn-n{color:#5f6368;font-weight:400}
  html.js:not(.still) .sa:not(.done):not(.still) .mn{opacity:0;transform:translateY(12px)}
}

/* the business picker's row over the clipboard left with the picker (2026-10-30). In its room a phone now reads the kinds of business
   Lumora works with, "For offices, trade shops, restaurants and more." (the reviewers' round, 2026-10-30: kept as air, the room was a
   64px hole four times the hero's gaps, and on a 393 x 659 iPhone, where the eyebrow steps aside, the first screen named no kind of
   business but the sample's insurance agency). The line takes the row's own box, 44px with its words in the middle, and the gap
   under it, so row 1's ring, the line beside Call us and the call bar's edge land where item 12's tuning put them (the phone
   spacing stays as live; generalist-home-2026-10-30/tools/first_screen.py measures them against the backup page). A phone's
   eyebrow keeps "For local businesses in Gainesville." (item 12's .eb-kinds rule above), so the kinds are said once. A computer
   keeps them in its eyebrow and has no line here */
.hero-kinds{display:none}
@media (max-width:899px){
  .hm4-hero .hero-kinds{display:flex;align-items:center;height:44px;margin:0 0 4px;font-size:15px;line-height:1.3;font-weight:600;color:var(--ink);text-wrap:balance}
}
@media (max-width:899px) and (max-height:700px){.hm4-hero .hero-kinds{margin-bottom:7px}}
@media (max-width:359px) and (max-height:700px){.hm4-hero .hero-kinds{margin-bottom:3px}}
/* its words sit halfway between the line beside Call us and the clipboard's clamp, so neither gap reads as a hole: each height band
   lifts them by half the difference its own tuning left (probe_hero.py, Chrome, 2026-10-30: at 375 x 812 the English line sat 63px
   under the call's line and 18px over the clamp). Only the words move (position:relative), never the clipboard, ring or bar. On the
   smallest phone (320 x 568) the line is 14px, so it keeps one line (at 15px it took two, 6px over the Spanish clamp) */
@media (max-width:899px){
  .hm4-hero .hero-kinds{position:relative;top:calc(-1 * var(--kinds-up, 0px));--kinds-up:4px}
  :lang(es) .hm4-hero .hero-kinds{--kinds-up:9px}
}
@media (max-width:389px) and (min-height:701px) and (max-height:899px){.hm4-hero .hero-kinds{--kinds-up:23px}:lang(es) .hm4-hero .hero-kinds{--kinds-up:10px}}
@media (max-width:374px) and (min-height:701px) and (max-height:899px){.hm4-hero .hero-kinds{--kinds-up:13px}:lang(es) .hm4-hero .hero-kinds{--kinds-up:5px}}
@media (max-width:899px) and (min-height:900px){.hm4-hero .hero-kinds{--kinds-up:18px}:lang(es) .hm4-hero .hero-kinds{--kinds-up:5px}}
@media (max-width:899px) and (max-height:700px){.hm4-hero .hero-kinds{--kinds-up:2px}:lang(es) .hm4-hero .hero-kinds{--kinds-up:3px}}
@media (max-width:359px) and (max-height:700px){
  .hm4-hero .hero-kinds{--kinds-up:-4px;font-size:14px;line-height:1.25}
  :lang(es) .hm4-hero .hero-kinds{--kinds-up:3px}
}
/* the walk end's time back names its example ("Time back for the example office:", Nov 6; "Time back for Sanderling's office:" with its
   Sample stamp from 2026-10-30): a time back alone above Call us read as what an owner gets (check.py's first read, 2026-10-30) */
.walk-tl .walk-time{display:inline}
/* the walk end on a computer is one column since the slip beside it left (2026-10-30) */
@media (min-width:900px){.walk-end{grid-template-columns:minmax(0,1fr)}}

/* the night band's layout: its heading and lede over the film, 28px apart (kept from the Oct 30 film's rules, which the Nov 4 prototype
   was drawn on) */
.wm-night .nb{display:grid;gap:28px}
.nb .n4-copy{max-width:36em}
/* ======================================================= the walk film and the night film: direction C of the Nov 4 animation review
   (anim-review-2026-11-04; the prototype's films-c.css, moved here on Nov 5 with the walk's check beat). One app on the stage at a
   time, a caption that says what just happened, money moving only on the walk sheet. What these rules draw with no script is each
   film's END frame, so reduced motion, ?still and a failed load all get the finished picture; home.js films() sets the first frame
   and plays the timeline. Only transform and opacity move. The Oct 30 films' rules: "home ORIGINAL-2026-11-05-films-c.css" */
.cf{container:cf / inline-size;position:relative;margin-top:32px;color:var(--ink)}
.cf *{box-sizing:border-box}
.cf-hide,.cf .cf-hide{visibility:hidden;opacity:0}

/* controls: inside the film, at its top, never under the phone's call bar. Nov 6 (Franco: "should we have the 1, 2, 3 and the play
   again? It just feels like a video"): the 1 2 3 marks and Play again are gone; a film plays, holds its end 3 s and loops, and the one
   control is the house's small round Pause icon at the row's right (system.css .pause, WCAG 2.2.2). The walk sheet's lit line says
   which step is on. Where the Pause hides (?still, reduced motion, JS off) a row with nothing else in it goes too */
.cf-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;min-height:44px}
.cf-ctl-r{display:flex;align-items:center;gap:14px;margin-left:auto}
.cf-pause{color:var(--ink)}
.cf.still .cf-pause,html:not(.js) .cf-pause{display:none}
.cf.still .cf-ctl:not(:has(> :not(.cf-ctl-r))),html:not(.js) .cf-ctl:not(:has(> :not(.cf-ctl-r))){display:none}
@media (prefers-reduced-motion:reduce){.cf-pause,.cf-ctl:not(:has(> :not(.cf-ctl-r))){display:none}}

/* ---------- the walk ---------- */
.cf-grid{position:relative;display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:clamp(24px,3.2vw,44px);align-items:start}

/* the walk sheet, the hero's sheet at film size */
.cf-sheet{background:var(--sheet);box-shadow:var(--lift);border-radius:3px;padding:22px 24px 20px}
.cf-sh-h{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;margin-bottom:12px}
.cf-sh-h img{grid-row:1/3;width:30px;height:auto}
.cf-sh-h b{font:600 22px/1.15 var(--font)}
.cf-sh-sub{font:400 15px/1.3 var(--font);color:var(--muted)}
.cf-lines{margin:0;padding:0;list-style:none}
.cf-ln{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:8px;align-items:baseline;border-top:1px solid var(--rule);padding:12px 0 11px}
.cf-n{width:23px;height:23px;border:1.4px solid var(--ink);border-radius:50%;font:500 13px/20px var(--font);text-align:center;align-self:center}
.cf-l{font:600 17px/1.25 var(--font)}
.cf-usd{position:relative;font:600 19px/1.2 var(--font);color:var(--red);white-space:nowrap}
.cf-strike{position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;margin-top:-1px;border-radius:2px;background:var(--pen);transform:rotate(-3deg);transform-origin:0 50%}
.cf-res{grid-column:2/4;font:600 15px/1.3 var(--font);color:var(--ink);margin-top:4px}   /* ink: a result, not money (won-pine) */
.cf-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--ink);margin-top:4px;padding-top:13px}
.cf-tot>span,.cf-won>span{font:600 16px/1.2 var(--font)}
.cf-tot .cf-usd{font-size:21px}
.cf-tot .cf-strike{transform:rotate(-1.5deg)}
.cf-won{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.cf-won b{position:relative;font:600 25px/1.2 var(--font);color:var(--pine);white-space:nowrap}
.cf-under{position:absolute;left:0;right:0;bottom:-7px;width:100%;max-width:none;height:9px;overflow:visible}
.cf-under path{fill:none;stroke:var(--pine);stroke-width:2.7;stroke-linecap:round}   /* no non-scaling-stroke: with it the drawn line stopped short of the figure (review round, Nov 5) */
.cf-over{display:none}

/* caption: one line of what was wrong, then what just happened, in the walk's second tone */
.cf-caps{display:grid;margin:0 0 16px}
.cf-cap{grid-area:1/1;margin:0;font:600 clamp(22px,2.2vw,28px)/1.2 var(--font);letter-spacing:-.01em;max-width:30em}
.cf-cap .cf-a,.cf-cap .cf-b,.cf-cap .cf-c{display:block}
/* what was wrong in the muted second tone, then what just happened in ink (pine is money won back only, Franco's won-pine; the
   prototype set the second line in pine). .cf-c is the check's line (Nov 5), in the same tone as what just happened */
.cf-walk .cf-cap .cf-a{color:var(--muted)}
.cf-cap .cf-b,.cf-cap .cf-c{color:var(--ink)}
.cf-walk .cf-cap[data-c="0"],.cf-walk .cf-cap[data-c="1"]{visibility:hidden;opacity:0}
.cf-main{opacity:.45}

/* the stage: one app at a time, big */
.cf-stage{position:relative;height:460px}
.cf-sc{position:absolute;inset:0}
.cf-walk .cf-ol,.cf-walk .cf-xl{visibility:hidden;opacity:0}
.cf-inv{display:flex;gap:22px;align-items:flex-start}
.cf-fx{position:absolute;inset:0;pointer-events:none;z-index:6}
.cf-fly{position:absolute;left:0;top:0;white-space:nowrap;background:#fff;border:2px solid var(--ink);border-radius:7px;padding:3px 9px;font:700 16px/1.25 var(--sys);color:#1d1d1f;box-shadow:0 10px 22px rgba(0,0,0,.22);visibility:hidden;opacity:0}
.cf-box{position:absolute;overflow:visible;pointer-events:none}
.cf-box path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* windows: each app keeps its own outline and colour, so no two read alike at a squint */
.cf-win{position:relative;height:100%;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.14),0 14px 30px rgba(40,34,24,.18);font:400 15px/1.35 var(--sys);color:#1d1d1f}
.cf-bar{display:flex;align-items:center;height:40px;padding:0 14px;white-space:nowrap;font:600 14px var(--sys)}
/* Nov 6 (Franco: "why are we using Windows buttons instead of Mac?... the Mac buttons and layout... it's more like luxury almost.
   And it's more tech"): the Mac window buttons again, as the live site and .win-tb draw them, red, yellow and green at the bar's
   left with the title centred. Each app keeps its own bar and layout, so no two read alike at a squint: Outlook's blue bar,
   Excel's green bar and sheet tabs, QuickBooks' grey bar and green rail. check.py DESK_JS fails Windows buttons coming back.
   Nov 5's Windows buttons: "home ORIGINAL-2026-11-06-notes.css" */
.cf-dots{/* ui-ok: fake-chrome Franco's Mac window buttons (Oct 6, Oct 16, Nov 6) */display:inline-flex;align-items:center;gap:7px;flex:none}
.cf-dots i{width:12px;height:12px;flex:none;border-radius:50%;background:#ec6a5e /* ui-ok: terracotta the Mac close button's own red */}
.cf-dots i+i{background:#f4bf4f}
.cf-dots i+i+i{background:#61c554}
.cf-ttl{flex:1;min-width:0;text-align:center;padding-left:10px;margin-right:60px;overflow:hidden;text-overflow:ellipsis}   /* centred: the buttons' 50px and the 10px gap matched on the right (Nov 7: 50 left it 5px off) */

/* Outlook: blue bar, folders, list, reading pane. Nov 7: the search box left the title bar, so Outlook's bar is the live site's
   plain Mac bar (buttons left, title centred) in Outlook's blue; D53's bar with the box: "home ORIGINAL-2026-11-06-notes.css" */
.cf-olw .cf-bar{background:#0F6CBD;color:#fff}
.ol-body{position:relative;display:flex;height:calc(100% - 40px);background:#F3F2F1}
.ol-fold{width:136px;flex:none;margin:0;padding:12px 8px;list-style:none;font-size:14px}
.ol-fold li{padding:7px 10px;border-radius:5px;color:#323130}
.ol-fold li.on{background:#CFE3FB;font-weight:600}
.ol-list{flex:0 0 42%;background:#fff;margin:8px 0;border-radius:6px 0 0 6px;overflow:hidden}
.ol-hd{padding:9px 14px;font:600 13px var(--sys);color:#0F6CBD;border-bottom:1px solid #edebe9}
.ol-msg{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:10px;row-gap:1px;padding:11px 14px;border-bottom:1px solid #f0efee;align-items:center}
.ol-msg>*{position:relative}
.ol-selbg{position:absolute!important;inset:0;background:#CFE3FB}
.ol-av{/* ui-ok: purple Outlook's own initials avatar colour, a familiar screen */width:34px;height:34px;border-radius:50%;background:#8764B8;color:#fff;font:600 13px/34px var(--sys);text-align:center;grid-row:1/3}
.ol-who{font:600 15px var(--sys)}
.ol-tm{font-size:13px;color:#605e5c;text-align:right}
.ol-s{font-size:14px;color:#323130;grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-fl{grid-column:3;display:grid;justify-items:end;font-size:13px}
.ol-fl>*{grid-area:1/1}
.ol-flag{display:block;width:13px;height:14px;position:relative;visibility:hidden;opacity:0}
.ol-flag::before{content:"";position:absolute;left:1px;top:0;width:2px;height:14px;background:#C4314B}
.ol-flag::after{content:"";position:absolute;left:3px;top:1px;width:9px;height:7px;background:#C4314B;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.ol-sent{color:#0F548C;font-weight:600;white-space:nowrap}
.ol-bars{display:grid;grid-template-columns:36px 1fr;gap:6px 10px;padding:12px 14px;border-bottom:1px solid #f0efee}
.ol-bars i{display:block;height:9px;border-radius:5px;background:#e9e7e5}
.ol-bars i.ol-av{width:34px;height:34px;border-radius:50%;grid-row:1/3;background:#e9e7e5}
.ol-bars i+i+i{width:64%}
.ol-read{position:relative;flex:1;min-width:0;background:#fff;margin:8px 8px 8px 1px;border-radius:0 6px 6px 0;overflow:hidden}
.ol-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8a8886;font-size:14px;visibility:hidden;opacity:0}
.ol-empty svg{width:46px;height:auto}
.ol-mail{padding:20px 22px}
.ol-sb{font:600 20px/1.25 var(--sys);margin-bottom:10px}
.ol-to{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:#605e5c}
.ol-chip{background:#EBF3FC;border-radius:12px;padding:2px 10px;color:#0F548C}
.ol-dt{margin-left:auto;font-size:13px}
.ol-mail p{font-size:15px;line-height:1.5;color:#242424;margin:14px 0 16px}
/* A sent message, not a draft: a Send button would say someone still has to click it */
.ol-send{display:inline-flex;align-items:center;gap:8px;color:#0F548C;font:600 14px var(--sys)}
.ol-send i{width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}

/* Excel: green title strip, ribbon, formula bar, letters and row numbers */
.cf-xlw{font-family:var(--xls)}
.cf-xlw .cf-bar{background:#107C41;color:#fff}
.cx-rib{display:flex;gap:18px;padding:7px 14px;background:#f3f3f3;border-bottom:1px solid #e1e1e1;font-size:13px;color:#333;white-space:nowrap;overflow:hidden}
.cx-rib b{color:#107C41;font-weight:600;box-shadow:inset 0 -2px #107C41}
.cx-fx{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid #e1e1e1;font-size:14px}
.cx-nb{border-right:1px solid #ddd;padding-right:10px;min-width:46px}
.cx-fx em{font:600 14px Georgia,serif;font-style:normal;color:#777}
.cx-fv{display:grid}.cx-fv>span{grid-area:1/1}
.cx-grid{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.cx-grid td,.cx-grid th{border:1px solid #e1e1e1;padding:8px 10px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:38px}
.cx-grid th{background:#f3f3f3;color:#555;font-weight:400;text-align:center;font-size:13px;padding:3px;height:24px}
.cx-grid td.rn,.cx-grid th:first-child{width:42px;background:#f3f3f3;color:#555;text-align:center;font-size:13px;padding:3px}
.cx-grid tr.chd td{font-weight:600}
.cx-grid td.cnum{text-align:right}
.cx-grid tr.cgr td i{display:block;height:8px;border-radius:4px;background:#ececec}
.cx-e12{position:relative}
.cx-e12>*{position:relative}
.cx-e12 .cx-okf{position:absolute;inset:0;background:#DFF0E3}
.cx-e12 .cx-cur{position:absolute;inset:-1px;border:2.5px solid #107C41;z-index:1}
.cx-e12 .v0,.cx-fv .v0{visibility:hidden;opacity:0}
.cx-e12 .v0,.cx-e12 .v1{position:absolute;left:10px;top:0;bottom:0;display:flex;align-items:center}
.cf-ln[id]{scroll-margin-top:calc(var(--hdr-h) + 24px)}   /* the hero sheet's rows land on the walk sheet's lines (#stop-1 to 3) with JS off */
.cf-night tr.chd td{white-space:normal;line-height:1.15}
.cx-tabs{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2px;padding:0 10px;background:#f3f3f3;border-top:1px solid #e1e1e1;font-size:13px}
.cx-tabs span{padding:6px 14px;color:#444}
.cx-tabs .on{background:#fff;color:#107C41;font-weight:600;box-shadow:inset 0 -2.5px #107C41}
.cx-tabs em{margin-left:auto;font-style:normal;color:#666}

/* QuickBooks: the live site's plain Mac title bar (.win-tb's grey, its 13px title centred), then the green rail. Nov 7 (reviewers,
   decision B: the title-bar layout goes back to live's too): Nov 5's browser tab beside the buttons and its empty address strip
   went; live titles these windows "Bills - QuickBooks", "Invoices - QuickBooks" in the same bar. The tab: "home ORIGINAL-2026-11-06-notes.css" */
.cf-brw .cf-bar{background:#e9e9e9;border-bottom:1px solid #d0d0d0;color:#3a3a3a;font-size:13px}
.cf-qbw{display:flex;height:calc(100% - 41px)}
.cq-rail{width:46px;flex:none;background:#fff;border-right:1px solid #e6e6e6;padding-top:12px}
.cq-rail i{display:block;width:22px;height:22px;border-radius:6px;background:#e9ecef;margin:0 auto 14px}
.cq-rail i.on{background:#2CA01C}
.cq-pg{flex:1;min-width:0;padding:18px 22px;background:#fff}
.cq-inv{font:600 26px var(--sys);color:#0077C5;letter-spacing:.02em}
.cq-band{display:flex;gap:36px;margin:10px 0 14px;padding:10px 12px;border-radius:4px;background:#EAF4FB;font-size:14px}
.cq-band small{display:block;color:#666;font-size:12px}
.cq-t{width:100%;border-collapse:collapse;font-size:14px}
.cq-t th{font:600 12px var(--sys);color:#6b6c72;text-align:left;border-bottom:1px solid #e3e3e3;padding:6px 4px}
.cq-t td{padding:10px 4px;border-bottom:1px solid #f0f0f0}
.cq-t .amt{text-align:right}
.cq-fld{display:inline-block;min-width:112px;min-height:31px;border:1.5px solid #8d9096;border-radius:4px;padding:5px 8px;text-align:right}
.cq-foot{display:grid;justify-items:end;margin-top:22px}
.cq-foot>*{grid-area:1/1}
.cq-rs{/* ui-ok: nested-card QuickBooks' own green button inside its window */background:#2CA01C;color:#fff;border-radius:18px;padding:8px 18px;font:600 14px var(--sys);visibility:hidden;opacity:0}
.cq-saved{color:#1d7a12;font:600 15px var(--sys);display:inline-flex;align-items:center;padding-top:7px}
.cq-tick{display:inline-block;width:18px;height:18px;border-radius:50%;background:#2CA01C;position:relative;margin-right:6px;flex:none}
.cq-tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* the policy the invoice is filled from: a printed page */
.cf-doc{width:270px;flex:none;background:#fff;box-shadow:var(--lift);padding:22px;font:400 14px/1.35 var(--sys);color:#1d1d1f}
.cd-h{display:block;font:700 17px var(--sys)}
.cd-s{display:block;color:#666;font-size:13px;margin:2px 0 14px}
.cd-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eee}
.cd-kv span{color:#666}
.cd-prem{border:0;padding-top:12px}
.prem{position:relative;font-weight:700}
.cf-inv .cf-win{flex:1;min-width:0;height:400px}
/* the check (Nov 5; Franco: "it should be clear that there are no mistakes being made"): a pine tick after each detail the invoice
   copied from the policy, the name, the policy number and the amount. The pen's ink is ours, as its box round the premium is, so the
   ticks read as the work being checked, not as part of QuickBooks. Drawn in the end frame; home.js draws them one after another */
.cq-chk{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cq-ok{width:18px;height:14px;flex:none;overflow:visible}
.cq-ok path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* the policy's own name and number carry their ticks too, drawn 0.5 s after the invoice's, so the eye sees both halves of the check */
.cd-kv span.cd-v{color:inherit;gap:5px}

/* ---------- the walk on a phone: the lit line and the marks, then the stage full width ---------- */
@container cf (max-width:759px){
  .cf-grid{display:block}
  .cf-main-sheet{padding:12px 14px 10px;margin-bottom:16px}
  .cf-main-sheet .cf-sh-h{margin-bottom:6px}
  .cf-main-sheet .cf-sh-h img{width:24px}
  .cf-main-sheet .cf-sh-h b{font-size:18px}
  .cf-main-sheet .cf-sh-sub{font-size:14px}
  .cf-main-sheet .cf-lines{display:grid}
  .cf-main-sheet .cf-ln{grid-area:1/1;padding:9px 0 6px}
  .cf-main-sheet .cf-ln:not([data-i="2"]){visibility:hidden;opacity:0}
  .cf-main-sheet .cf-tot,.cf-main-sheet .cf-won{display:none}
  .cf-cap{font-size:20px}
  .cf-caps{margin-bottom:12px}
  .cf-stage{height:400px}
  .cf-over{display:block;position:absolute;left:0;right:0;top:0;z-index:7}
  .cf-win{font-size:14px}
  .ol-fold,.ol-empty{display:none}
  .ol-list{flex:1 1 auto;margin:0;border-radius:0}
  .ol-read{position:absolute;left:0;right:0;top:96px;bottom:0;margin:0;border-radius:0;border-top:1px solid #e1dfdd;box-shadow:0 -8px 18px rgba(0,0,0,.1)}
  .ol-mail{padding:14px 16px}
  .ol-sb{font-size:17px}
  .ol-mail p{font-size:14px;margin:10px 0 12px}
  .ol-dt{margin-left:0;flex-basis:100%}
  .cx-grid .chm{display:none}
  .cx-grid{font-size:14px}
  .cx-rib{gap:12px}
  .cf-inv{flex-direction:column;gap:12px}
  .cf-doc{width:auto;align-self:stretch;padding:12px 14px}
  .cd-s{margin-bottom:6px}
  .cd-kv{padding:4px 0}
  .cd-per{display:none}
  .cf-inv .cf-win{flex:none;width:100%;height:270px}
  .cf-inv .cd-s{display:none}
  .cf-inv .cf-brw .cf-bar{height:36px}
  .cf-inv .cf-qbw{height:calc(100% - 37px)}
  .cq-pg{padding:10px 14px}
  .cq-inv{font-size:19px}
  .cq-band{margin:6px 0 6px;padding:6px 10px;gap:24px}
  .cq-t td{padding:7px 4px}
  .cq-foot{margin-top:8px}
  .cq-rail{width:34px}
  .cq-rail i{width:18px;height:18px}
  .cq-chk{gap:4px}
  .cf-inv .cq-fld{min-width:92px}   /* with its tick the amount keeps the product's name on one line in English */
}

/* ---------- the night ---------- */
.cf-night{color:var(--on-night)}
.cf-night .cf-pause{color:var(--on-night);border-color:rgba(233,228,216,.45)}
.cf-night .cf-cap{color:var(--on-night)}
.cf-night .cf-cap:not([data-c="4"]){visibility:hidden;opacity:0}
.cf-ngrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,4vw,64px);align-items:start}
.cf-desk{position:relative;height:350px;opacity:.35}
.cf-desk .cf-win{height:auto}
.cf-night .cf-bills{visibility:hidden;opacity:0}
.cq-tabs{display:flex;gap:18px;font-size:14px;color:#555;border-bottom:1px solid #e3e3e3;margin-bottom:8px}
.cq-tabs span{padding-bottom:7px}
.cq-tabs .on{color:#1d1d1f;font-weight:600;box-shadow:inset 0 -2.5px #2CA01C}
.cq-bills{width:100%;border-collapse:collapse;font-size:15px}
.cq-bills th{font:600 12px var(--sys);color:#6b6c72;text-align:left;border-bottom:1px solid #e3e3e3;padding:8px 6px}
.cq-bills td{padding:12px 6px;border-bottom:1px solid #f0f0f0}
.cq-bills .amt{text-align:right;white-space:nowrap}
.cf-bills .cf-qbw{height:auto}
.cf-bills .cq-pg{padding-bottom:22px}
.b-st{display:inline-flex;align-items:center;color:#1d7a12;white-space:nowrap}
.b-ok{opacity:.4}
.b-red{color:#C4314B;font-weight:600}
.b-over td:first-child{font-weight:600}
.pol-head .cx-grid{border-bottom:0}
.pol-grid td:nth-child(2),.pol-grid th:nth-child(2){width:38%}
.pol-grid td:nth-child(3),.pol-grid th:nth-child(3){width:30%}
.pol-vp{--rh:38px;--c:2;--v:5;position:relative;height:calc(var(--rp,var(--rh)) * var(--v));overflow:hidden;margin-bottom:31px}
.pol-roll{transform:translateY(calc(var(--rp,var(--rh)) * (var(--c) - 29)))}
.pol-roll .cx-grid td{height:calc(var(--rh) - 1px);padding-block:0}
.pol-c.cok{background:#e9f5ec}
.pol-np{position:relative;color:#C4314B;font-weight:600}
.pol-ring{position:absolute;left:-12px;top:-8px;width:calc(100% + 24px);max-width:none;height:calc(100% + 16px);overflow:visible}
.pol-ring path{fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pol-cur{position:absolute;top:calc(var(--rp,var(--rh)) * var(--c));height:var(--rp,var(--rh));right:0;width:32%;border:2.5px solid #107C41;pointer-events:none}

/* the phone: big from the first frame, its clock runs the night. Nov 6 (Franco: "why did you change the phone?... now it doesn't
   even have, like, the charger thing, the Wi-Fi"): the live site's measured iPhone again (system.css .iph: the iPhone 15's
   proportions, bezel and side buttons, the Dynamic Island, the status bar's signal, Wi-Fi and battery, the padlock, flashlight,
   camera and home bar, the dusk wallpaper), 276px wide under a 900px screen, live's .nb-phone size (Nov 7, reviewers: under 760px of film it was 290px
   with 32px more of it showing, and at 320 its bezel ran from x 15 to 305, past the 16px gutter; at 276 it runs 22 to 298, as live's).
   The Spanish notification keeps its title and time on one line at 276. Nov 5's
   lock screen sits on it: the date and the clock where iOS sets them (.iph-date, .iph-clock), and the notification under the clock
   at Nov 5's readable size. Nov 5's drawn phone: "home ORIGINAL-2026-11-06-notes.css" */
.cf-ph{position:relative}
.cf-ph .iph{width:276px}
/* Nov 7 (reviewers: live Home's phone is plain black, "home ORIGINAL-2026-11-05-films-c.css" .nb-lock .iph-dev{box-shadow:none}; the
   grey double ring of system.css's default bezel was new on Home): no rings and no lift at any width (check.py home_src_problems) */
.cf-ph .iph-dev{box-shadow:none}
/* Nov 7 (reviewers: on a computer the live site shows its 340px iPhone cropped to the top, 292px, the island, the status bar, the
   clock and the notification; the whole 280px phone showed a wallpaper glow, the flashlight and camera and the home bar live never
   shows): the computer crops it too, 24px under the notification (it carries one more line than live's, "3 things need you"), and
   fades into the band with a layer, as live's .nb-lock::after, not a mask (a mask cost a 100ms frame each time a line flew over the
   phone, Oct 27). 340px wide from a 900px screen, as live's .nb-phone (Nov 7, reviewers: from 900 to 1163px it was 280px where live
   shows 340, about 18% smaller, a change nobody asked for); under 900 the 276px phone, 293px of it (30px under the notification's
   card, as before at 280). No lift inside the crop: a crop cuts a shadow
   into a box */
@container cf (min-width:760px){
  .cf-ph{height:293px;overflow:hidden}
  .cf-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(rgba(20,20,18,0),var(--night));pointer-events:none;z-index:5}
}
@media (min-width:900px){
  .cf-ngrid{grid-template-columns:minmax(0,1fr) 340px}
  .cf-ph{height:326px}
  .cf-ph .iph{width:340px}
}
.ph-date,.ph-clk{display:grid}
.ph-date>span,.ph-clk>span{grid-area:1/1}
.ph-date .d0,.ph-clk span:not(.k3){visibility:hidden;opacity:0}
.ph-nt{/* ui-ok: nested-card the phone's own notification on its lock screen */position:absolute;z-index:3;left:calc(8 * var(--pt));right:calc(8 * var(--pt));top:calc(208 * var(--pt));padding:9px 11px 10px;border-radius:calc(23 * var(--pt));background:rgb(170,175,183);color:#111;text-align:left;font-size:13px;line-height:1.35}
.nt-top{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#222}
.nt-ap{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#1f6feb;flex:none}
.nt-tm{display:grid;flex:none;margin-left:auto;color:#333;white-space:nowrap}
.ph-nt .nt-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#000}   /* one line each; the title gives way before the time (Nov 5). Nov 7: black, as the live phone's notification title (system.css .iph-note b); the night band's white b (system.css [data-ground=night] b) made it 2.2:1 on the grey card */
.nt-tm>span{grid-area:1/1}
.nt-tm .t0{visibility:hidden;opacity:0}
.nt-h{margin:5px 0 1px;font-weight:600}
.nt-l{margin:0;padding-left:16px;list-style:disc}
.nt-l li{margin-top:1px}

@container cf (max-width:759px){
  .cf-ngrid{display:flex;flex-direction:column;gap:14px}
  /* 286px at the 290px phone (the prototype's 280 left the morning list's last line 3.4px into the 22px fade; check.py
     night_list_problems). Nov 7: the phone is live's 276px, so its notification ends 7px higher and the crop is 279px, the same 16px
     under the card. Live crops its phone at 254px; this lock screen's notification carries one more line ("3 things need you") */
  .cf-ph{order:-1;align-self:center;height:279px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
  .nt-top{font-size:13px}   /* Nov 7: 13, not 13.5, on the 276px phone, or the Spanish "Lista de la mañana" ran to an ellipsis beside its time */
  .cf-desk{height:300px;align-self:stretch}
  .cf-bills .cf-qbw{height:auto}
  .cq-bills td:first-child{white-space:nowrap}
  .cf-night .cx-grid td.rn,.cf-night .cx-grid th:first-child{width:34px}
  .pol-grid td:nth-child(3),.pol-grid th:nth-child(3){width:29%}
  .cf-night .cf-cap{font-size:19px}
  .cf-night .cf-caps{margin-bottom:12px}
  .cf-night .cf-win{font-size:14px}
  .cf-night .cq-rail{display:none}
  .cf-night .cq-pg{padding:10px 12px 14px}
  .cq-bills{font-size:14px}
  .cq-bills td{padding:9px 4px}
  .cq-bills th{padding:6px 4px}
  .b-st{white-space:normal}
  .cf-night .cx-rib{padding:5px 12px;gap:12px}
  .cf-night .cf-bar{height:36px}
  .pol-vp{--rh:32px;--c:1;--v:3;margin-bottom:29px}
  .pol-grid td:nth-child(2),.pol-grid th:nth-child(2){width:33%}
  .cf-night .cx-grid td,.cf-night .cx-grid th{padding-inline:6px}
}

/* words inside their box (the review round's new check, check.py PIC_TEXT_JS, Nov 5). From 760 to 1099px of film the policy and
   the invoice side by side left the invoice 155 to 275px wide, its policy number and amount running past its edge, so there the
   policy sits over the invoice as on a phone. On a narrow phone each title bar keeps its name (the window buttons close up under 420px), and the night sheet's column heads take 12.5px under 340px */
@container cf (min-width:760px) and (max-width:1099px){
  .cf-inv{flex-direction:column;gap:12px}
  .cf-doc{width:auto;align-self:stretch;padding:12px 16px}
  .cd-kv{padding:4px 0}
  .cd-per,.cf-inv .cd-s{display:none}
  .cf-inv .cf-win{flex:none;width:100%;height:304px}
  .cf-inv .cq-pg{padding:12px 18px}
  .cf-inv .cq-foot{margin-top:10px}
  .cf-inv .cf-brw .cf-bar{height:36px}
  .cf-inv .cf-qbw{height:calc(100% - 37px)}
}
@container cf (max-width:419px){.cf-dots{gap:6px}.cf-dots i{width:10px;height:10px}.cf-ttl{margin-right:50px;padding-left:8px}}   /* a phone keeps the buttons. Nov 7: the title stays centred (42px of buttons and 8px gap matched on the right), as the live site's bars are at 393; with margin 0 every title sat 25px right of centre */
@container cf (max-width:359px){.cf-brw .cf-bar{padding-inline:8px}.cf-brw .cf-ttl{font-size:12px;padding-left:6px}.cf-bills .cf-ttl:lang(es){margin-right:0}}   /* Nov 6: with the Mac buttons before it, the Spanish "Facturas de proveedores - QuickBooks" ran 22px past its window at 320; Nov 7: in the plain bar it keeps its whole name at 12px, and only that long Spanish title gives up its centring margin under 360px */
@container cf (max-width:339px){.cf-night .pol-grid tr.chd td{font-size:12.5px;padding-inline:4px}}
/* the walk's Excel on a phone under 400px of film: Maria's name kept its end only at 393 and up, so the row numbers narrow, the cells
   pad 6px and the client column takes 40%; under 340px the ribbon drops its last tab (View / Vista), as Excel's own does. From 760
   to 1099px Outlook folds its folder pane away, as it does in a narrow window, so the subject keeps its end */
@container cf (max-width:399px){
  .cf-walk .cx-grid td.rn,.cf-walk .cx-grid th:first-child{width:34px}
  .cf-walk .cx-grid td,.cf-walk .cx-grid th{padding-inline:6px}
  .cf-walk .cx-grid tr.ccl th:nth-child(2){width:40%}
}
@container cf (max-width:339px){.cf-walk .cx-rib span:last-child{display:none}.cf-inv .cq-foot{margin-top:5px}}
@container cf (min-width:760px) and (max-width:1099px){.ol-fold{display:none}.ol-list{flex-basis:50%;border-radius:0}.ol-read{margin-left:1px}}

/* the hero sheet on a phone (Nov 5; home.js heroFill): a part of the sheet that starts under the call bar waits, empty, and writes
   in when it scrolls into view, so nothing writes itself unseen */
html.js .hm4-hero .sheet[data-fill] .fill-wait{opacity:0}
html.js .hm4-hero .sheet[data-fill] .fill-wait,html.js .hm4-hero .sheet[data-fill] .fill-wait *{animation:none!important}
/* the films on a phone (check.py shadow_problems, the house rule since Franco's iPhone, 2026-10-17: no shadow on words or a button):
   the sheets, the policy and the app windows take the house phone shadow, which ends before the next words, and the sleeping phone
   keeps none inside its crop (a crop cuts a shadow into a box) */
@container cf (max-width:759px){
  .cf-sheet,.cf-doc,.cf-win{box-shadow:0 1px 1px rgba(0,0,0,.10),0 2px 4px -2px rgba(58,47,28,.14)}
  .cf-over{box-shadow:none;border:1px solid var(--rule)}   /* the end sheet lies on the stage a few px over the invoice's tab: an edge, no shadow */
}
/* the parts a film dims or brings over the stage keep a layer of their own from the first frame, so the browser never moves them
   to one mid-play or when a shadow next to them changes; the words in them keep one rendering (check.py shadow_air read their
   glyphs changing by up to 91 when the shadows around them were taken away) */
.cf-main,.cf-desk,.cf-over{will-change:opacity,transform}