/* ============================================================
   LEVRG v3 — THE HOME PAGE
   Sections authored for /home per .claude/plans/2026-08-12-levrg-home-page.md.

   Everything here is NEW to the home page. The hero (hZ), the marquee (mq),
   section 01 (t3C), section 03 (trace) and section 05 (ledger) already exist
   in heroes.css / site.css / trio.css / jobs.css and are used unchanged —
   this file adds only the four things the plan found missing: the header
   dropdown, section 02 (the record), section 04 (the trades) and the
   how-it-starts strip.
   ============================================================ */

/* ---- HEADER — the "What we build" dropdown ------------------
   D-142.3's menu is a HIERARCHY, not a list: the platform (the base, never
   sold alone) → what attaches to it → who we build it for → the live line.
   A flat list would put the platform alongside Voice AI as a peer, which is
   the exact framing the commercial plan exists to prevent.

   CSS-only, on hover AND focus-within, so it is keyboard-reachable without a
   script. It hangs inside .hZ__nav — the pill has no overflow clip, so the
   panel is free to sit below it, and the hero is tall enough that it never
   reaches the section's own overflow:hidden edge. */
/* ⚠️ THE DROPDOWN'S z-index IS USELESS WITHOUT THIS, and it fails silently.
   heroes.css sets `.hZ--home .wrap { position: relative; z-index: 1 }` on BOTH
   of the hero's wraps — the nav's and the copy's. Equal z-index means DOM order
   decides, so the copy (second in the document) paints over the nav. And
   because the nav's wrap has a z-index of its own it opens a stacking context,
   which traps the menu's `z-index: 40` INSIDE it: 40 of 1, not 40 of the page.
   The symptom is the headline showing straight through an opaque white panel,
   which reads as a transparency bug and is not one.
   The wrap has to outrank its sibling. Raising the child cannot do it. */
.hZ--home .hZ__navwrap { z-index: 50; }

.nav__item { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.nav__item > .nav__link { cursor: default; }
.nav__caret { font-size: 9px; color: var(--ink-4); transition: transform var(--fast) var(--ease); }
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: -22px; width: 640px; padding-top: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease),
              visibility var(--fast) var(--ease);
  z-index: 40;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }

.nav__panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--lift-4); overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1fr) 210px;
}
.nav__body { padding: var(--s3); }
.nav__gh {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); display: block; margin-bottom: 10px;
}
.nav__gh + .nav__gh, .nav__grid + .nav__gh, .nav__base + .nav__gh { margin-top: var(--s3); }

/* The platform sits ABOVE the rule and spans the full width. Everything else
   is a two- or four-up grid underneath it. The layout is the argument. */
.nav__base {
  display: block; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color var(--fast) var(--ease);
}
.nav__base:hover { border-color: var(--ink-4); }
.nav__base b { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.nav__base span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

.nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.nav__grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.nav__mi {
  /* line-height is pinned here rather than inherited: body runs 1.6, which on a
     six-item grid added ~90px of dead height to the panel for no reading gain. */
  padding: 8px 9px; margin-inline: -9px; border-radius: 7px; line-height: 1.3;
  font-size: var(--t-sm); color: var(--ink-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__mi:hover { background: var(--paper); color: var(--ink); }

/* the live line, in the panel's right rail */
.nav__rail { padding: var(--s3); background: var(--paper); border-left: 1px solid var(--line); }
.nav__dial {
  display: block; font-family: var(--display); font-weight: var(--w-display);
  font-size: 21px; letter-spacing: -0.03em; color: var(--ink); margin-top: 6px;
}
.nav__dial:hover { color: var(--brand); }
.nav__rail p { font-size: var(--t-xs); color: var(--ink-3); margin-top: 8px; line-height: 1.45; }

/* ---- MOBILE + TABLET NAV -------------------------------------
   site.css hides `.nav__links` at 860px and the CSS dropdown dies at 1000px,
   which left a band between them where "What we build" was VISIBLE and did
   nothing when tapped. Both switch at 1000 now, and below it the whole link
   set becomes one button opening the same hierarchy as a sheet.
   Measured, not assumed: a sweep of 13 widths reported `nav=n` from 320 all
   the way to 834 — every phone and both iPad portrait sizes had no navigation
   at all, only the wordmark and two buttons. */
.navbtn { display: none; }

@media (max-width: 1000px) {
  .nav__menu { display: none; }
  .nav__links { display: none; }
  .navbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    /* 40px tall: a header control has to be thumb-sized, and the ghost button
       beside it is only 32. */
    min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line-2); background: var(--white);
    font-size: var(--t-sm); font-weight: 600; color: var(--ink); cursor: pointer;
  }
  .navbtn__i { display: grid; gap: 3px; }
  .navbtn__i i { display: block; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; }
}
@media (min-width: 1001px) { .navsheet { display: none !important; } }

.navsheet {
  display: none; margin-top: var(--s2);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--lift-4); padding: var(--s3); position: relative; z-index: 60;
}
.nav-open .navsheet { display: block; }
.navsheet__gh {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); display: block; margin-bottom: 8px;
}
.navsheet__gh + .navsheet__gh, .navsheet__grid + .navsheet__gh,
.navsheet__base + .navsheet__gh, .navsheet__row + .navsheet__gh { margin-top: var(--s3); }
.navsheet__base {
  display: block; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper);
}
.navsheet__base b { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.navsheet__base span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.navsheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
/* 44px minimum: these are finger targets, not pointer targets. */
.navsheet__grid a, .navsheet__row a {
  display: flex; align-items: center; min-height: 44px; padding-inline: 10px;
  margin-inline: -10px; border-radius: 8px;
  font-size: var(--t-sm); color: var(--ink-2);
}
.navsheet__grid a:active, .navsheet__row a:active { background: var(--paper); }
.navsheet__row { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.navsheet__dial {
  display: flex; align-items: center; min-height: 48px;
  font-family: var(--display); font-weight: var(--w-display);
  font-size: 24px; letter-spacing: -0.03em; color: var(--ink);
}

/* ---- SECTION 02 — THE RECORD --------------------------------
   The section the page was missing. Without it the page sells a phone
   answerer, and a phone answerer cannot carry the floor.

   Split: the claim on the left, one customer's whole file on the right. The
   file is the artefact — not a dashboard screenshot, not an atmosphere. It is
   hairlines and real rows, cut by its own frame, in the same register as the
   hero's job sheet so the page reads as one system seen twice. */
.rec__wrap { position: relative; }
.rec {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--lift-3); overflow: hidden;
}
.rec__hd { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.rec__name { font-size: var(--t-md); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
.rec__sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; }
.rec__since { flex: 0 0 auto; text-align: right; }
.rec__since b { display: block; font-family: var(--mono); font-size: var(--t-sm); color: var(--ink); }
.rec__since span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); margin-top: 2px; }

/* Five columns, fixed from the CONTAINER not from content, so a longer job
   description cannot re-flow the money column out of alignment (#263). */
.rec__r {
  display: grid; grid-template-columns: 62px minmax(0,1fr) 76px 62px 74px;
  gap: var(--s2); align-items: baseline;
  padding: 11px var(--s4); border-bottom: 1px solid var(--line);
}
.rec__r--h { border-bottom-color: var(--line-2); }
.rec__r--h span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.rec__no { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.rec__what { font-size: var(--t-sm); color: var(--ink); }
.rec__when, .rec__val { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.rec__val { text-align: right; color: var(--ink); }
.rec__st { font-size: 11px; color: var(--ink-4); text-align: right; white-space: nowrap; }

/* the forward-looking footer — the two rows an automation actually fires on */
.rec__due { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--paper); border-top: 1px solid var(--line); }
.rec__due div span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.rec__due div b { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-top: 4px; }
.rec__due .rec__flag { color: var(--brand); }

/* ⚠️ ON A PHONE THE FIVE COLUMNS ARE WIDER THAN THE SCREEN, and the damage is
   not confined to the card. Four of the five tracks are fixed (62 + 76 + 62 +
   74) and with the gaps and padding the row's MIN-CONTENT width is ~402px —
   more than a 390px viewport. A grid track cannot be narrower than its
   min-content, so the whole .split column widened to fit the card and took the
   section's heading and copy out of the viewport with it. Measured, not
   guessed: the overflow probe named `lede`, `rec__wrap`, `rec` and `rec__hd`
   together, which is the signature of one oversized child rather than four
   separate bugs.

   Job number and status go: the number is the least informative thing in the
   row and every status in the artefact reads "Closed", so the column carries
   one repeated word. What / when / value survive, which is the whole argument. */
@media (max-width: 760px) {
  .rec__r { grid-template-columns: minmax(0,1fr) 66px 62px; gap: var(--s2); padding-inline: var(--s3); }
  .rec__r--h, .rec__no, .rec__st { display: none; }
  .rec__hd { padding-inline: var(--s3); }
  .rec__due { grid-template-columns: 1fr; gap: var(--s2); padding-inline: var(--s3); }
  .ask { padding: var(--s3); }
}


/* ---- the assistant, asked a question about the owner's own data ----
   ⚠️ THIS FLOATED OVER THE RECORD'S BOTTOM-LEFT CORNER AND IT WAS WRONG.
   Rendered, the card landed squarely on the £2,400 job and the "next service
   due" row — the two rows carrying the argument, because the last row is the
   biggest number and the due row is the one an automation fires on. The trio
   section already learned this rule and it is written into trio.css: an
   overlap must land on card CHROME, never on content. A table has no chrome to
   land on — every pixel of it is a row — so the overlap had nowhere legal to
   sit and the treatment itself was the defect, not its offsets.

   It sits BELOW the record now, at the record's own width. It reads as the
   next thing rather than a thing on top, and nothing is hidden. */
.ask {
  background: var(--ink); color: var(--white); border-radius: var(--r-lg);
  padding: var(--s3) var(--s4); box-shadow: var(--lift-3); margin-top: var(--s3);
}
.ask__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ask__q { font-size: var(--t-sm); font-weight: 600; color: var(--white); margin-top: 8px; line-height: 1.4; }
.ask__a { font-size: var(--t-sm); color: rgba(255,255,255,0.8); margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.14); line-height: 1.5; }
.ask__a b { color: var(--white); font-weight: 600; }

/* ---- SECTION 04 — WHO WE BUILD IT FOR ------------------------
   Founder picked option C off trades.html. Four pills, one trade on screen at
   a time.

   Why it beats the four cards it replaces: four cards shown at once invite the
   reader to compare four paragraphs and conclude they are the same paragraph
   with the nouns swapped — which is precisely the impression D-142.4 exists to
   prevent when it insists the trade pages be real pages. One at a time, the
   plumber reads the plumbing argument and nothing else.

   CSS-only, via radio inputs. No script means nothing to fail, and if the
   stylesheet never loads all four panels simply stack — content visible,
   chrome missing, which is the correct way round.

   ⚠️ THE INPUTS MUST BE SIBLINGS OF `.tsel__body`. Nested inside the pill row,
   `#trade-0:checked ~ .tsel__body` matches nothing and the section renders as
   a row of pills over empty space. That is how it built the first time. */
.tsel { position: relative; }
.tsel input { position: absolute; opacity: 0; pointer-events: none; }
.tsel__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tsel__pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--white);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.tsel__pill:hover { border-color: var(--ink-4); color: var(--ink); }
#trade-0:focus-visible ~ .tsel__pills label[for="trade-0"],
#trade-1:focus-visible ~ .tsel__pills label[for="trade-1"],
#trade-2:focus-visible ~ .tsel__pills label[for="trade-2"],
#trade-3:focus-visible ~ .tsel__pills label[for="trade-3"] {
  outline: 2px solid var(--brand-hot); outline-offset: 3px;
}

/* Ink when selected, not green — green is a signal on this site and never a
   fill, and the same rule already sends `.btn--brand` to ink. */
#trade-0:checked ~ .tsel__pills label[for="trade-0"],
#trade-1:checked ~ .tsel__pills label[for="trade-1"],
#trade-2:checked ~ .tsel__pills label[for="trade-2"],
#trade-3:checked ~ .tsel__pills label[for="trade-3"] {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}

.tsel__body { margin-top: var(--s5); display: grid; }
.tsel__panel {
  grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(7px);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease),
              visibility var(--base) var(--ease);
}
#trade-0:checked ~ .tsel__body .tsel__panel[data-t="0"],
#trade-1:checked ~ .tsel__body .tsel__panel[data-t="1"],
#trade-2:checked ~ .tsel__body .tsel__panel[data-t="2"],
#trade-3:checked ~ .tsel__body .tsel__panel[data-t="3"] {
  visibility: visible; opacity: 1; transform: none;
}

/* ---- SECTION 05 — THE CHOICE --------------------------------
   Founder picked option F off choice.html: one white container, our column
   lifted out on ink inside it.

   ⚠️ A KEY COLUMN WAS ADDED, and it is not decoration. F on the picker showed
   three columns of answers with no scenarios — "Voicemail", "Not working",
   "In their head too" — and none of them means anything without the question
   it answers. Front and Pitch survive that because each of their cells is a
   complete claim; every cell here is a reply.

   ONE grid, not four columns, so a long answer in one column cannot knock the
   rows out of alignment with the others. The ink panel is a grid ITEM spanning
   every row of the last column rather than a background on each cell, so it
   reads as one panel instead of seven stacked chips.

   🔴 Never add a fourth "software you'd buy" column. Three columns, and the
   middle one is the whole commercial position. */
.cmp-card { background: var(--white); border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(15,15,15,0.04), 0 20px 44px -26px rgba(15,15,15,0.16);
  padding: var(--s4); margin-top: var(--s6); }

/* Three columns, no key column — founder-directed. The scenario rides inside
   every cell instead, which repeats it three times and buys a column that can
   be read on its own: "Voicemail" and "In their head too" mean nothing without
   the question they answer, and on the picker F had no way to supply it.

   ONE grid rather than three stacked columns, so a two-line answer in the
   middle column cannot knock the other two out of row alignment. `align-items`
   is left at stretch on purpose: baseline lines up the text but leaves the
   cell boxes at different heights, and then the hairlines between rows do not
   meet across the columns.

   The ink panel is the CELLS of the last column, not a background element
   spanning them. `grid-area: 1 / 3 / -1 / 4` looked right and rendered at zero
   height, because `-1` resolves against the explicit grid and the rows here
   are implicit. Declaring the row count would fix it and would hard-code the
   number of scenarios into the stylesheet.

   🔴 Never add a fourth "software you'd buy" column. */
.cmp { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--s4); }
.cmp > span { padding-block: 14px; }
.cmp > span:nth-child(3n) { background: var(--ink); padding-inline: var(--s3); }
.cmp > span:nth-child(3) { border-radius: var(--r-lg) var(--r-lg) 0 0; padding-top: var(--s3); }
.cmp > span:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); padding-bottom: var(--s3); }

.cmp__hd { font-size: var(--t-xs); font-weight: 600; color: var(--ink-4);
  border-bottom: 1px solid var(--line-2); }
.cmp__hd--ours { color: var(--white); border-bottom-color: rgba(255,255,255,0.26); }
.cmp__v { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3);
  border-bottom: 1px solid var(--line); }
.cmp__v--ours { color: var(--white); font-weight: 600; border-bottom-color: rgba(255,255,255,0.12); }
.cmp > span:nth-last-child(-n+3) { border-bottom: 0; }

/* On a phone the three columns become one. The scenario is printed once per
   group rather than three times — repeating it on every stacked cell is the
   difference between a label and a stutter — and each answer carries the
   column it came from instead. */
@media (max-width: 860px) {
  .cmp { grid-template-columns: 1fr; column-gap: 0; }
  .cmp__hd { display: none; }
  .cmp > span:nth-child(3n) { background: none; padding-inline: 0; border-radius: 0; }
  .cmp__v { padding-block: 7px; border-bottom: 0; }
  .cmp__v:nth-child(3n + 1) { margin-top: var(--s3); }
  .cmp__v::before { content: attr(data-c); display: block; font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-4); margin-bottom: 4px; }
  .cmp > span.cmp__v--ours { color: var(--white); background: var(--ink);
    border-radius: var(--r); padding: 10px var(--s2); margin-top: 5px; }
  .cmp > span.cmp__v--ours::before { color: rgba(255,255,255,0.5); }
}

/* ⚠️ `.steps` MOVED TO site.css. It was defined here, and home.css is loaded
   by the home page ONLY — so /automations/, which uses the same three-step
   strip, rendered it as `display: block` with no grid, no rule above each step
   and the step numbers as 17px body text instead of 11px mono in brand. It
   looked like plain paragraphs, which is why nobody saw it. A component used by
   more than one page belongs in the stylesheet every page loads. */


/* ---- TOUCH TARGETS ------------------------------------------
   The sweep found footer and close links rendering 20–24px tall on every
   touch width. That is the link's line box and nothing more — fine for a
   pointer, too small for a thumb, and the footer IS the sitemap on this site
   (D-142.3), so it is real navigation rather than boilerplate.
   Padding rather than font-size: the type scale is not the problem. */
@media (max-width: 1000px) {
  .foot__col a, .foot__legal a, .close__alt a, .t3__more {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .foot__col { gap: 0; }
  .foot__legal { row-gap: 0; }
}

/* ---- THE HEADER PILL AT 320px -------------------------------
   Measured on an iPhone SE: wordmark + Menu + Log in + Book a call needs
   ~399px of a ~246px content box, so "Book a call" — the one control that
   must never be lost — was the thing hanging off the right edge.

   Shed in order of what the visitor can least afford to lose. Log in is for
   people who already bought, so it moves into the sheet. The Menu label goes
   before its icon does. Book a call is never touched. */
@media (max-width: 1000px) {
  .nav__login { display: none; }
  .nav { gap: var(--s2); }

  /* The tap area grows without the wordmark growing with it. The mask sizes to
     its origin box, so padding on a border-box origin would SCALE the logo —
     pinning origin and clip to the content box keeps the artwork at 84x24 and
     lets the padding be pure hit area. */
  .nav__brand {
    padding: 9px 10px; min-height: 42px; box-sizing: content-box;
    -webkit-mask-origin: content-box; mask-origin: content-box;
    -webkit-mask-clip: content-box; mask-clip: content-box;
    margin-inline-start: -10px;
  }
}
@media (max-width: 420px) {
  .navbtn { font-size: 0; gap: 0; padding: 0 12px; }   /* icon only, label gone */
  .navbtn__i i { width: 16px; }
}

/* Two destinations from one card: Voice and Chat share a card but keep separate
   pages, so the card needs two links without two margin stacks. */
.t3__mores { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }

/* ---- SECTION 02 — CUSTOM AUTOMATIONS -------------------------
   ⚠️ THE CARD WAS REMOVED. Founder, on the rendered section: "don't like the
   container in this section."

   It carried a white fill, a border, a radius, a shadow, a tinted header bar
   and a tinted footer — six pieces of chrome drawn around content that never
   needed enclosing. trio.css already records this lesson from S142: the
   fragment IS the card, and a mount behind it stopped reading as a soft bed
   the moment the page ground went tinted. A panel earns its keep when it has
   to separate itself from the page — the comparison table, the customer
   record. A list of rules does not. The rules are the page.

   What replaces it is the vocabulary this page already has: the "how it
   starts" strip, which is hairlines and nothing else. Same three columns, all
   sized from the container, so a longer rule cannot shift the last-ran stamp
   out of alignment (#263). That last column is the one that matters — a rule
   with a last-ran stamp is running, a rule without one is a promise. */
.auto { border-top: 1px solid var(--line-2); }
.auto__r {
  display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.5fr) 148px;
  gap: var(--s4); align-items: baseline;
  padding-block: var(--s4); border-bottom: 1px solid var(--line);
}
.auto__n { font-size: var(--t-md); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; }
.auto__d { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); }
/* The arrow is the whole point of the row — trigger on the left, what happens
   on the right — so it is ink and the rest of the sentence is not. */
.auto__d b { color: var(--ink); font-weight: 600; }
.auto__w { text-align: right; }
.auto__w span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.auto__w b { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-top: 4px; }

.auto__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); display: block; }
.auto__ft { padding-top: var(--s5); }

@media (max-width: 900px) {
  .auto__r { grid-template-columns: 1fr; gap: 8px; padding-block: var(--s3); }
  .auto__w { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .auto__w b { margin-top: 0; }
}

/* The example strip inside the automations panel. `.tags`/`.tag` already exist
   in site.css — reused rather than re-authored, so the pills match the rest of
   the site and there is one place to change them. Only the stacking margin is
   overridden: .tags carries margin-top --s4 for its hero use, which is far too
   much inside a panel footer. */
.auto__ft .tags { margin-top: 12px; }

/* ---- THE NAMED LIST (home section 02) ------------------------
   ⚠️ REPLACED A THREE-COLUMN ROW LAYOUT. Founder, on the rendered section:
   "I don't like the table format, mainly because phones would have issues
   displaying in a professional way, and secondly it's just too much info
   explaining each item — just mention gas certificate renewal reminders,
   quote chasing, more."

   Both halves were right. The third column ("last ran") is what made it read
   as a table rather than a list, and it was carrying invented frequency stats
   to fill itself. And a home page does not have to explain each rule — the
   page does that now.

   auto-fit, not a fixed column count: the list reflows from three columns to
   one on its own, so there is no breakpoint to get wrong and no row that can
   half-collapse. A named list cannot break on a phone the way a table can. */
/* margin-top lives here, not on the element — the mobile spine below wants a
   tighter gap than the desktop columns do, and an inline style cannot be
   overridden by a media query at any specificity. */
.alist { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 0 var(--s6); margin-top: var(--s6); }
.alist li {
  padding-block: 14px; border-bottom: 1px solid var(--line);
  font-size: var(--t-body); color: var(--ink);
}

/* On a phone the grid collapses to one column, and six full-width hairlines
   read as six unrelated rules stacked. Founder picked F off s02.html for this
   width: one spine with a node per rule, which is the SAME wiring the job
   trace in 03 draws — so the page has one vocabulary for "these belong
   together" rather than a rule on mobile and a wire on desktop.

   Desktop keeps the hairlines: at three columns the rules are what separate
   the columns, and a spine down a three-column grid means nothing.

   The spine stops at the first and last node CENTRES (13px row padding + half
   the line box ≈ 25), not at the list's box. A line that runs on past the last
   node reads as "and more" — which is the one thing this section must not
   promise ahead of the link that actually carries the rest.

   The node's fill is --paper because that is what the section sits on; it is a
   knocked-through hole in the spine, not a dot on top of it. If this list ever
   moves onto white, that fill has to move with it. */
@media (max-width: 760px) {
  .alist { position: relative; grid-template-columns: 1fr; padding-left: 26px;
    margin-top: var(--s5); }
  .alist::before { content: ''; position: absolute; left: 5px; top: 25px; bottom: 25px;
    width: 1px; background: var(--line-2); }
  .alist li { position: relative; padding-block: 13px; border-bottom: 0; }
  .alist li::before { content: ''; position: absolute; left: -26px; top: 21px;
    width: 9px; height: 9px; border-radius: 99px; background: var(--paper);
    border: 1px solid var(--ink-4); }
}

/* ---- SECTION 03 — THE PLATFORM, AS PIECES --------------------
   Founder picked option C off platform.html. Grounded in Toggl Track, which
   shows fragments of its product — a row of totals here, a list there — and
   never a browser window.

   Why it beats the window it replaces: a window is mostly chrome. A sidebar,
   a title bar and an avatar take a third of the artefact and prove nothing,
   while the reader spends attention decoding "this is a screenshot of an app."
   Fragments spend every pixel on content, and they claim less — we are not
   asking anyone to admire the software, only to see that the record exists.

   Absolutely positioned on desktop, a plain stack below 1040px. Nothing
   overlaps copy, only chrome — the rule trio.css learned the hard way and the
   record section learned again when the assistant card landed on the two rows
   carrying the argument.

   The .dash__* window rules below are kept: platform.html still renders all
   eight options and is the record of the choice. */
.plat { position: relative; min-height: 440px; }
.plat__p { position: absolute; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--lift-3); padding: var(--s3); }

/* ⚠️ THE OVERLAPS ONLY WORK BECAUSE THE COVERED STRIP IS PADDING.
   Founder-directed: bring the pieces together and let them overlap. The
   failure mode is the one trio.css already records — an overlap that lands on
   COPY reads as broken CSS, not as objects on a desk. Two halves to it:

     1. every panel that is overlapped carries EXTRA padding on the overlapped
        side, strictly larger than the overlap. The list is covered on its LEFT
        by both other panels, so its left padding is oversized; the tiles are
        covered along the BOTTOM by the assistant, so their bottom padding is.
     2. z-order is explicit, not source order, so re-ordering the markup cannot
        silently change which panel is on top.

   Verified by probing every text node in the section with elementFromPoint —
   the stylesheet cannot tell you whether a word is covered, only the rendered
   page can. */
.plat__p--tiles { left: 40px; top: 26px; width: 470px; z-index: 1;
  padding-right: calc(var(--s3) + 24px); padding-bottom: calc(var(--s3) + 10px); }
.plat__p--list  { left: 480px; top: 110px; width: 520px; z-index: 2;
  padding-left: calc(var(--s3) + 18px); }
.plat__p--ask   { left: 100px; top: 262px; width: 400px; z-index: 3;
  background: var(--ink); border-color: var(--ink); }
.plat__p--ask .plat__k { color: rgba(255,255,255,0.5); }
.plat__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.plat__q { font-size: var(--t-sm); font-weight: 600; color: var(--white); margin-top: 8px; }
.plat__a { font-size: var(--t-sm); color: rgba(255,255,255,0.8); margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.14); line-height: 1.5; }
.plat__a b { color: var(--white); font-weight: 600; }

/* the Gemini-style sparkle. Blue-to-purple is a DELIBERATE exception to the
   green-only accent rule and it is scoped to exactly one thing: the mark that
   says a machine wrote this line. Green stays the brand signal; a second
   colour that only ever appears on AI output cannot be mistaken for one. */
.plat__hd { display: flex; align-items: center; gap: 8px; }
.ai { width: 15px; height: 15px; flex: 0 0 auto; }
.ai svg { display: block; width: 100%; height: 100%; }

/* configurability, on the numbers panel. Four fixed tiles read as a report;
   a dashed add-affordance reads as a surface you chose the contents of, which
   is the difference between analytics and a dashboard built for you. */
.plat__ft { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s3); padding-top: 12px; border-top: 1px solid var(--line); }
.plat__add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px dashed var(--line-2); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.plat__note { font-size: 11px; color: var(--ink-4); }
/* Stacked below 1040 — and the oversized paddings that exist ONLY to protect
   an overlap have to go with the overlap, or the list keeps a 120px left
   indent on a phone for no reason. */
@media (max-width: 1040px) {
  /* the stack IS the ink card — see the note above */
  /* ⚠️ THE CARD RAMPS FROM BLACK TO THE MOCHA. Founder-directed. It was a flat
     `--ink`, and the two ends are the ones this site already uses everywhere
     else — the slab and `--accent` — rather than a pair chosen for this one
     element.
     ⚠️ SAFE BECAUSE NOTHING IS WRITTEN ON IT. Checked, not assumed: every string
     inside this card sits on one of the three WHITE panels, so no ink is being
     asked to survive a moving ground. That is the difference between this and
     the page-ending ramp, which had a footer's legal row on it and had to hold
     the black past the last line before it could descend. */
  .plat {
    min-height: 0; display: grid; gap: var(--s4);
    background: linear-gradient(180deg, var(--slab) 0%, #2E251C 62%, var(--accent) 100%);
    border-radius: var(--r-xl); padding: var(--s4);
    box-shadow: 0 1px 2px rgba(15,15,15,0.06), 0 26px 60px -30px rgba(15,15,15,0.34);
  }
  .plat__p { position: static; width: auto; padding: var(--s3); }

  /* the assistant is now the container's own content, so it drops its card */
  .plat__p--ask {
    order: -1; background: none; border: 0; box-shadow: none; padding: 0;
  }
  /* and the numbers sit inside it, still a white panel */
  .plat__p--tiles { background: var(--white); }
}

/* one row of the day's work — used inside the list fragment */
.mini { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s3);
  align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--line); }
.mini:last-child { border-bottom: 0; }
.mini__w { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.mini__s { font-size: var(--t-xs); color: var(--ink-3); }
.mini__t { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.mini__t--f { color: var(--alarm); }

/* ---- SECTION 03 — THE DASHBOARD ------------------------------
   ⚠️ REPLACED THE SINGLE CUSTOMER RECORD. Founder: "turn 03 into a dashboard
   representation."

   The section is titled The platform, and the platform IS the dashboard — a
   single customer file showed one row of it. The record argument survives
   inside: the customer list, the jobs, the quotes and the assistant are all
   views onto the same rows, which is easier to show in one surface than to
   claim in a sentence.

   A dashboard needs width, so the copy moves above it and the artefact runs
   the full column. Sidebar plus main, both sized from the container.

   The assistant is a BANNER inside the main area rather than a card floating
   over the artefact. The floating version was tried on the record and landed
   squarely on the two rows carrying the argument — an overlay has nowhere
   legal to sit on a surface where every pixel is content. As a banner it is
   also the truer thing: LEVRG-100M describes the assistant surfacing findings
   proactively, not waiting to be asked. */
.dash {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--lift-4); overflow: hidden;
}
.dash__top { display: flex; align-items: center; gap: var(--s3); padding: 11px var(--s3);
  border-bottom: 1px solid var(--line); }
.dash__brand { width: 58px; height: 17px; background: var(--ink); flex: 0 0 auto;
  -webkit-mask: url('../logos/levrg-wordmark.png') no-repeat center/contain;
  mask: url('../logos/levrg-wordmark.png') no-repeat center/contain; }
.dash__ask { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
  padding: 7px 14px; font-size: var(--t-xs); color: var(--ink-4); }
.dash__av { width: 26px; height: 26px; border-radius: 99px; background: var(--ink); color: var(--white);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; }

.dash__body { display: grid; grid-template-columns: 178px minmax(0,1fr); }
.dash__side { border-right: 1px solid var(--line); background: var(--paper); padding-block: 10px; }
.dash__ni { display: block; padding: 8px var(--s3); font-size: var(--t-sm); color: var(--ink-3);
  border-left: 2px solid transparent; }
.dash__ni--on { color: var(--ink); font-weight: 600; background: var(--white);
  border-left-color: var(--brand); }
.dash__main { padding: var(--s3); min-width: 0; }
.dash__hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.dash__t { font-size: var(--t-md); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.dash__when { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }

/* the assistant, surfacing something nobody asked about */
.dash__flag { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3);
  padding: 12px 14px; border-radius: var(--r); background: var(--brand-wash);
  border: 1px solid var(--brand-line); }
.dash__flag p { font-size: var(--t-sm); line-height: 1.45; color: var(--ink); min-width: 0; }
.dash__flag b { font-weight: 600; }
.dash__flag span { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white); font-size: var(--t-xs); font-weight: 600; }

.dash__tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px;
  margin-top: var(--s3); }
.dash__tile { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.dash__v { font-family: var(--display); font-weight: var(--w-display); font-size: 26px;
  line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.dash__l { font-size: 11px; color: var(--ink-4); margin-top: 6px; }

.dash__rows { margin-top: var(--s4); }
.dash__rh { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2); }
.dash__r { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 96px 76px;
  gap: var(--s3); align-items: baseline; padding-block: 11px; border-bottom: 1px solid var(--line); }
.dash__r:last-child { border-bottom: 0; }
.dash__who { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.dash__what, .dash__on { font-size: var(--t-xs); color: var(--ink-3); }
.dash__at { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; }
.dash__at--flag { color: var(--alarm); }

/* The sidebar is the first thing to go on a phone: it is chrome for a surface
   the reader is looking AT, not using. The main area is the artefact. Tiles
   drop to two columns and the two middle row columns fold away rather than
   letting a four-column grid crush itself. */
@media (max-width: 820px) {
  .dash__body { grid-template-columns: 1fr; }
  .dash__side { display: none; }
  .dash__tiles { grid-template-columns: 1fr 1fr; }
  .dash__r { grid-template-columns: minmax(0,1fr) 74px; }
  .dash__what, .dash__on { grid-column: 1 / -1; }
  .dash__flag { flex-wrap: wrap; }
}

/* The urgent row carries two things on the right — what kind of job it is and
   how urgent — where the other rows carry only a time. Wraps rather than
   crushes: at 320px the two would not sit on one line, and a squeezed pair
   reads as a bug where a wrapped pair reads as a long label. */
.mini__r { display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: baseline; gap: 4px var(--s2); }

/* ⚠️ At 320px the two-column row collapsed: the right cell held its width, the
   name column was crushed, and the row grew to 156px against 67 for its
   neighbours. Measured, not guessed.
   Below 560 the row goes to a single column and the right-hand pair sits under
   the caption, left-aligned — three short lines instead of one crushed one. */
@media (max-width: 560px) {
  .mini { grid-template-columns: 1fr; gap: 4px; }
  .mini__r { justify-content: flex-start; }
}

/* ---- THE URGENT ROW ----------------------------------------
   The alarm sits on the LABEL, not on the row. A full-row tint was 12px wider
   than the content column, so the divider above it stopped short of its
   corners and read as a line drawn through the block — and removing that one
   divider left a single hairline floating between the other two rows, which
   read as a mistake. A pill carries the same signal, fights nothing, and
   scales: a second urgent row would not turn the panel into stripes.

   Reuses the alarm trio already in jobs.css (`.jb__pill--warn`) so the two
   surfaces agree on what urgent looks like. Contrast is measured against the
   wash, not against white — the wash is darker, and greys that clear AA on
   white fall short on it. */
.mini__tag {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--alarm-wash); border: 1px solid var(--alarm);
  font-size: 11px; font-weight: 600; color: var(--alarm-dim); white-space: nowrap;
}

/* The close sits directly on the paper — no card, founder-directed. */
/* `.close__note` ("If it does not fit, we will say so.") was removed
   founder-directed; its rule went with it rather than being left as a selector
   with nothing to select. */

/* ---- THE PARTNER STRIP -------------------------------------
   Reuses the marquee under the hero rather than a second scroller — same
   component, same loop mechanics, so the `margin-inline-end` rule that keeps
   the -50% translate seamless is inherited instead of re-derived.

   The green dot before each item goes: it is a live signal under the hero and
   would mean nothing beside a logo. Logos are greyscaled and knocked back
   because this page has no colour outside the green signal, and three brand
   palettes dropped into it would be the loudest thing on the page. */
/* `.mq--logos` moved to site.css with `.mq--edge` — same reason. */

/* ============================================================
   MOBILE — the home page.
   ============================================================ */

/* ---- THE HERO FAN ------------------------------------------
   ⚠️ IT WAS BROKEN ON EVERY PHONE. The three job sheets are absolutely
   positioned from the centre with DESKTOP offsets (`margin-left: -516px`,
   `width: 620px`), so on a 390px screen the outer two sat entirely off-canvas
   and the middle one was cut on BOTH sides — the reader got "…organ" and
   "…ce · £180" and nothing that read as a document. The hero's
   `overflow: hidden` hid the damage rather than causing it, which is why the
   responsive sweep never flagged it: nothing overflowed the PAGE, it was
   clipped inside the hero.

   All three sheets are kept, founder-directed — the fan is the composition,
   and one sheet alone is just a card. What changes is that the geometry is
   re-derived in PERCENTAGES of the fan rather than scaled down from desktop
   pixels: a `transform: scale()` that fits 1102px of fan into 350px would set
   the log at roughly 5px and make the one thing worth reading unreadable.

   So the sheets are re-proportioned instead of shrunk. The outer two show
   their heads only — job number, name, one line — which is all they show on
   desktop anyway once the fold crops them. */
@media (max-width: 760px) {
  .hZ--home .hZ__fan { height: 300px; }
  .hZ__checks { display: none; }
  .s01__lede--wide { display: none; }
  .s01__lede--tight { display: block; margin-top: var(--s2);
    font-size: var(--t-sm); line-height: 1.5; max-width: 44ch; }

  /* every offset is a percentage of the fan, so the arrangement holds from
     320 to 760 without a second set of numbers */
  .hZ__doc--m {
    left: 50%; translate: -50% 0; margin-left: 0;
    width: 74%; height: auto; top: 8px; z-index: 2;
  }
  .hZ__doc--l { left: -7%; margin-left: 0; width: 37%; height: 226px; top: 30px;
    transform: rotate(-9deg); padding: var(--s2); }
  .hZ__doc--r { left: 70%; margin-left: 0; width: 37%; height: 226px; top: 22px;
    transform: rotate(7deg); padding: var(--s2); }

  /* the outer two carry no text at this width — see the note above. Ruled
     paper, so they still read as documents rather than as empty rectangles. */
  .hZ__doc--l > *, .hZ__doc--r > * { display: none; }
  .hZ__doc--l, .hZ__doc--r {
    background-image: repeating-linear-gradient(
      0deg, transparent 0 21px, var(--line) 21px 22px);
    background-position: 0 34px;
  }

  /* the log's fixed 74px time column plus two --s3 gaps eats a third of a
     phone's width before a word is set */
  .hZ__log { grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px;
    padding: 10px var(--s3); font-size: var(--t-xs); }
  .hZ__hd { padding: var(--s3) var(--s3) 12px; }
  .hZ__cust { font-size: var(--t-md); }
  .hZ__st { padding: 4px 9px; font-size: 11px; }
}

@media (min-width: 761px) { .s01__lede--tight { display: none; } }

/* ---- VERTICAL RHYTHM ON A PHONE ----------------------------
   `.sec` carries `--s8` top and bottom — 128px each, 256px between sections.
   On a 390px screen that is nearly a third of a viewport of nothing, six times
   over, and it was pushing the page to eleven screens. Desktop keeps the air;
   a phone does not have it to spare. */
@media (max-width: 760px) {
  .sec { padding-block: var(--s6); }
  .sec--tight { padding-block: var(--s5); }
  /* the close carried the most dead space of any section — 43% */
  #book { padding-block: var(--s5) var(--s6); }
}

/* ---- TOUCH TARGETS -----------------------------------------
   Everything a finger has to hit gets 44px. The earlier pass set 40, which
   clears WCAG 2.2 SC 2.5.8's 24px minimum but not the size a thumb actually
   needs on the move — and this buyer is reading on a phone, in a van. */
@media (max-width: 1000px) {
  .navbtn, .tsel__pill { min-height: 44px; }
  .btn--sm { min-height: 44px; padding-inline: 18px; }
  .foot__col a, .foot__legal a, .close__alt a, .t3__more, .crumb a, .ph__alt a { min-height: 44px; }
  .hZ__ck { min-height: 32px; }
}

/* ---- SECTION 01 ON A PHONE: CONTROL + ONE INK PANEL --------
   Option G off s01.html. The swipe deck it replaces was shorter to build but
   asked the reader to discover that three cards existed; a control names all
   three before anything is touched, and only one artefact is ever on screen.

   Desktop is untouched — `.t3` stays the three-up grid, and the control and
   its inputs are display:none above 760.

   Three things this depends on:
   1. The inputs are SIBLINGS of `.t3`. Nested inside the control they match
      nothing and the section renders as a tab row over air.
   2. The cards share ONE grid cell and hide with `visibility`, so the panel is
      always as tall as the tallest card and switching cannot shunt the page.
   3. Every foreground inverts. The panel is ink, so the title, body and links
      have to come with it — and the chip is ink-on-ink, so it goes. */
.t3sel input { position: absolute; opacity: 0; pointer-events: none; }
/* was an inline style on the element; lives here so mobile can override it */
.t3 { margin-top: var(--s6); }
.t3sel__c { display: none; }

@media (max-width: 760px) {
  .t3sel__c {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    background: var(--paper-2); border-radius: var(--r-pill); padding: 4px;
  }
  .t3sel__c label {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--ink-3);
    text-align: center; line-height: 1.2; cursor: pointer;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  #s1-0:checked ~ .t3sel__c label[for="s1-0"],
  #s1-1:checked ~ .t3sel__c label[for="s1-1"],
  #s1-2:checked ~ .t3sel__c label[for="s1-2"] {
    background: var(--white); color: var(--ink); box-shadow: var(--lift-1);
  }
  #s1-0:focus-visible ~ .t3sel__c label[for="s1-0"],
  #s1-1:focus-visible ~ .t3sel__c label[for="s1-1"],
  #s1-2:focus-visible ~ .t3sel__c label[for="s1-2"] {
    outline: 2px solid var(--brand-hot); outline-offset: 3px;
  }

  .t3sel__c { margin-top: var(--s4); }
  .t3 {
    display: grid; grid-template-columns: 1fr; gap: 0;
    margin-top: var(--s3); background: var(--white);
    border: 1px solid var(--line); box-shadow: var(--lift-3);
    border-radius: var(--r-xl); padding: var(--s3);
  }
  .t3C__c {
    grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease),
                visibility var(--base) var(--ease);
  }
  #s1-0:checked ~ .t3 .t3C__c:nth-of-type(1),
  #s1-1:checked ~ .t3 .t3C__c:nth-of-type(2),
  #s1-2:checked ~ .t3 .t3C__c:nth-of-type(3) {
    visibility: visible; opacity: 1; transform: none;
  }

  /* the artefact sits nearer the ink edge than the copy does — 32px of ink all
     round read as a thick frame rather than a panel */
  .t3C__ui {
    flex: 0 0 auto; margin: 0; padding: var(--s3);
    background: none; border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: none;
  }
  .t3C__chip { display: none; }          /* ink chip on an ink panel */
  .t3C__c .t3__t { margin-top: var(--s4); padding-inline: 0; }
  .t3C__c .t3__b { padding-inline: 0; }
  .t3C__c .t3__mores, .t3C__c > .t3__more { padding-inline: 0; }
}

/* ---- SECTION 03 ON A PHONE ---------------------------------
   Stacked, not a deck (founder-directed — the swipe was tried and rejected
   here), and the TODAY PANEL COMES OFF.

   ⚠️ READ THE SEQUENCE BEFORE CHANGING THIS. It has been decided three times
   and the middle one is why this note exists:
     1. Hidden on a phone. It is the tallest of the three panels, so removing it
        is what actually shortens the section.
     2. RESTORED — a parity check found eleven items present at 1920 and missing
        at 600, and the founder's instruction was "all the contents show
        correctly in all widths up to mobile". A whole panel missing on a phone
        read as a bug, because from the outside that is exactly what it looks
        like.
     3. HIDDEN AGAIN, founder-directed: "for the one dashboard section in
        mobiles, remove the today container within the example".
   So a future session finding this panel absent on a phone is looking at a
   DECISION, not the regression step 2 caught. Do not restore it without asking.

   ⚠️ WHAT IT COSTS, stated so the trade is visible rather than discovered: this
   is the only panel in the section showing named jobs against engineers and
   times, and the section's own lede opens with "Job management". What carries
   that claim on a phone now is the tiles panel — 38 jobs this week, 1
   unassigned — and section 01's job-management row, which is a tap away rather
   than in view. */
@media (max-width: 760px) {
  .plat__p--list { display: none; }
}
}

/* ---- THE DECK CARD'S TEXT COLUMN ---------------------------
   ⚠️ THE CARD HAD TWO LEFT MARGINS AND IT SHOWS AS A LEAN. The fragment is a
   panel with `--s3` of its own padding, so its content starts 24px in; the
   title, body and links below it sit flush to the card edge. Everything
   measures "aligned" — every box starts at x=20 — but the TEXT does not, and
   the eye reads the caption as hanging left of the card.

   The caption is indented to the fragment's inner text instead, so the whole
   card is one column. Mobile only: the deck is where it reads worst, and the
   desktop grid was signed off with the flush caption.

   The gap under the fragment comes down with it — `--s5` existed to clear a
   chip that only needs 14px, and on a phone it opened a hole between the
   evidence and the claim it belongs to. */
@media (max-width: 760px) {
  .t3C__c .t3__t,
  .t3C__c .t3__b,
  .t3C__c .t3__mores,
  .t3C__c > .t3__more { padding-inline: var(--s3); }
  .t3C__c .t3__t { margin-top: var(--s4); }
}


/* Playwright sweep, S143: `.t3__more` measured 21px tall — under the WCAG 2.2
   pointer-target minimum of 24. It is a text link so it has no padding of its
   own; min-height states the floor without changing how it looks. */
.t3__more, .s2__go, .plat__add { min-height: 24px; display: inline-flex; align-items: center; }

/* On a phone the same links need the TOUCH minimum, not the pointer one —
   24px is fine under a mouse and too small under a thumb. */
@media (max-width: 900px) {
  .t3__more, .s2__go, .plat__add, .alist a { min-height: 44px; }
}