/* =============================================================================
   PRISM II — SURFACES. The four places on the page where a system, a person or a
   live instrument is put in front of the reader rather than described to them:
   the labs index, the Front Desk band, the Listening Post composer, and About.

   Loads after site_00, whose tokens, type scale, .wrap, .sec, .shead, .btn family
   and svg.ico every rule here inherits and none redefines. Every colour in this
   file resolves through a token; there is not a literal hex in it, which is a
   rule with a test behind it rather than a habit.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   THE LABS INDEX.

   Six systems as six rows, not six cards. A card grid asks the reader to compare
   six things at once; a row list is read top to bottom, which is what the labs
   are — See, Ask, Connect, Act, Prove, Talk, in that order, because the order is
   the argument.

   The stage label takes --plum and not --peri, and the distinction is the whole
   spectrum rule in one line: periwinkle is the graphic half of that position and
   plum is its text partner. The previous mock set this label in the light hue and
   it measured 2.92:1 on every row of the list.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   THE OUTCOMES, and the sub-head that hands off to the labs list beneath them.

   Four short statements of what a week looks like once the back of house is
   working — the outcome layer above the six instruments that produce it. They
   used to borrow .ladder/.rung, which is a four-track pricing grid: the ordinal,
   name and price tracks were all empty here, so each sentence sat in the third
   column with a lone arrow marooned 56px to its left and the right third blank.
   A two-up grid is what four sentences of roughly one line each actually are.

   The marker is a rule rather than a glyph. An arrow claims a direction these
   four do not have between them — they are four simultaneous facts, not a
   sequence — and the hairline is the same hairline that separates every other
   list on the site, turned on its side.
   -------------------------------------------------------------------------- */
.outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 48px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.outcome {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--accent, var(--plum));
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 44ch;
  text-wrap: pretty;
}

/* A second heading INSIDE a section, one step down from .shead: the labs list is
   the evidence for the outcomes above it, not a new subject, and giving it a
   second full section head told a reader the page had changed topic.

   IT IS .subsec AND NOT .subhead, WHICH IS TAKEN. application.css keeps a
   handful of lab prose primitives alive and .subhead is one of them — a serif
   heading at clamp(22px, 2.6vw, 30px). Naming this block .subhead inherited
   Newsreader and a 1.18 line-height onto its whole subtree, so the lede beneath
   the heading set itself in the human voice at 17px with the leading of a
   headline, and nothing raised. tailwind.css sorts last in the stylesheet chain
   (see site_00's header), so this file cannot win that name back either. */
.subsec { margin-top: 56px; margin-bottom: 24px; }
.subsec .eyebrow { margin: 0 0 10px; }
.subsec h3 { max-width: 28ch; margin: 0 0 12px; }
.subsec .body { color: var(--ink2); max-width: 62ch; margin: 0; }

@media (max-width: 760px) {
  .outcomes { grid-template-columns: 1fr; gap: 20px; }
  .outcome { font-size: 17px; max-width: none; }
  .subsec { margin-top: 40px; }
  .subsec h3 { max-width: none; }
}

/* =============================================================================
   THE LABS — FIGURE CARDS (2026-09-03).

   This was six rows in a 110/1fr/1.5fr/136px grid, at 16px, and it introduced the
   strongest content on the site as a spreadsheet: a visitor decided whether to
   open a live system on the strength of one sentence, with nothing anywhere on
   the page showing what any of them looks like.

   IT IS THE HOME PAGE'S DOORS, POINTED AT THE LABS. .figs/.fig in site_03_hero.css
   already teach a reader what a drawing on a gridded gradient panel means — a way
   in — so this borrows the component rather than inventing a second one, and the
   class names are unchanged (.labs, .lab, .st, .nm, .bl, .go) because three tests
   and application.css's .lab:active key off them.

   NO DRAFTING GRID, AND THERE IS NOTHING TO DROP. The panel carried a 22px grid
   in the mockups and the doors carried one until earlier the same day; both lost
   it for the same measured reason, recorded above .fig .draw in site_03_hero.css
   — at this height the halved grid is too fine to read as drafting and just
   coarse enough to interfere with a 0.9px line. Do not add one back here alone.

   TWO DEPARTURES FROM .fig, EACH DELIBERATE:

   1. NO FIGURE NUMBER. The eyebrow is the stage word alone — See, Ask, Connect,
      Act, Prove, Talk. "Fig N.N" is the home page's numbering for its three doors,
      and stream_pages_test compares .lab .st's text to HOME_LABS' stage verbatim,
      so a prefix here fails.
   2. THE HUE COMES FROM THE STAGE, NOT FROM THIS FILE. Every colour below reads
      --stage/--stage-ink/--stage-lt/--stage-draw off the .labs-stage-* class the
      view puts on each card (application.css). .lab .st used to be hard-coded
      --plum for all six, so The Front Desk was plum here and clay on its own page
      and on /labs — a silent inconsistency in a system whose whole claim is one
      hue, one meaning. `test/assets/colour_vocabulary_test.rb` pins it now.

   THERE IS NO FEATURED CARD. A .lab.entry modifier drew the Listening Post with a
   left rule and a "Start here" pill — one of six cards being a different
   component. Removed with this change (Jason): the composer three sections up
   still hands its question to that lab, so the path survives in copy rather than
   in chrome. Labs::CatalogueHelper::ENTRY_LAB went with it.
   -------------------------------------------------------------------------- */
.labs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.lab {
  min-width: 0;
  background: var(--bg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  /* svg.dr (site_03_hero.css) reads these two, which is what lets one stroke rule
     serve the home doors and every lab mark. Neither carries an identity-token
     fallback: every card is given a .labs-stage-* class by the view, so a fallback
     here would never fire, and naming a hue is how all six stages ended up one
     colour the last time. --draw is the neutral, and it is the only fallback. */
  --fig-stroke: var(--stage-draw, var(--draw));
  --fig-hi: var(--stage);
}
.lab > * { min-width: 0; }

.lab .st {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--stage-ink);
  font-weight: 500;
  margin-bottom: 18px;
}

/* THE PANEL. The destination's own light, mixed against the page ground and
   multiplied by --hero-k — without that multiplier a 24% wash of a light hue is
   still light on the dark ground, which is the exact failure the hero rules
   document. The border is the stage hue as a stroke, never as type. */
.lab .dw {
  display: grid;
  place-items: center;
  height: 168px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--stage) calc(32% * var(--hero-k, 1)), var(--bg));
  background:
    linear-gradient(103deg,
      color-mix(in srgb, var(--stage) calc(16% * var(--hero-k, 1)), var(--bg)),
      color-mix(in srgb, var(--stage) calc(24% * var(--hero-k, 1)), var(--bg)) 48%,
      color-mix(in srgb, var(--stage-lt) calc(42% * var(--hero-k, 1)), var(--bg)));
}
.lab .dw svg { width: 100%; height: 100%; }

.lab .nm {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.014em;
  margin: 0 0 8px;
}
.lab .bl { color: var(--ink2); font-size: 15.5px; }

/* THE AFFORDANCE IS NOT THE SMALLEST THING ON THE CARD. It was mono 13px, which
   put the weakest text on the page on the only element announcing the strongest
   content on the site. This is .fig .go verbatim — the sans face at the size a
   link is read at — and margin-top:auto is what keeps six links on one line
   across cards whose blurbs run to different lengths, with no card measured. */
.lab .go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  color: var(--stage-ink);
}

.lab:hover { background: var(--bg2); }

@media (max-width: 860px) {
  .labs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .labs { grid-template-columns: 1fr; }
  .lab { padding: 24px 20px 26px; }
}

/* The homepage Labs section (2026-09-24) puts its lede AFTER .shead, because
   pages_controller_test pins one `.shead .lede` on home. These two rules give it
   the spacing it would have had inside: 18px under the heading, 40px above the
   cards. */
.shead:has(+ .home-labs-lede) { margin-bottom: 18px; }
.home-labs-lede { margin: 0 0 40px; }

/* ------------------------------------------------------------------
   OTHER LABS: ONE ROW AT THE FOOT OF EVERY LAB PAGE (2026-09-24)
   ------------------------------------------------------------------
   labs/shared/_other_labs. The same .lab card as above, re-proportioned for five
   across: the square drawing plate becomes a short strip, the name steps down to
   18px so "The Proving Ground" holds one line, and the card carries the
   catalogue's `short` line instead of the blurb. Measured in the mock: 214 by 565px
   cards became 214 by 333. Below 860px it is a snap scroller, never a stack of
   five tall cards; the page itself must not scroll sideways. Only site tokens
   here, no identity colour: each card still takes its stage from its own class. */
.labs-rel {
  border-top: 1px solid var(--line);
  padding: 64px 0 72px;
}
.labs-rel .subsec { margin-bottom: 32px; }
.labs.labs-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.labs-row .lab { padding: 24px 22px 20px; }
.labs-row .lab .st { margin-bottom: 14px; }
.labs-row .lab .dw { height: 92px; padding: 10px 12px; margin-bottom: 20px; }
.labs-row .lab .nm { font-size: 18px; margin: 0 0 6px; text-wrap: balance; }
.labs-row .lab .bl { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.labs-row .lab .go { padding-top: 16px; font-size: 15px; }
@media (max-width: 860px) {
  .labs.labs-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72%, 280px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .labs.labs-row .lab { scroll-snap-align: start; }
}
.labs-rel-foot { margin: 28px 0 0; font-size: 17px; max-width: 62ch; }
.labs-rel-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* THE FRONT DESK is no longer its own band HERE. It folded into the home page's
   doors grid for a while, then split back out as its own standalone section
   (2026-09-02) — see .fd-band in site_03_hero.css, below .figs/.fig. */

/* -----------------------------------------------------------------------------
   THE ASK — the Listening Post composer.

   In the real app this is a plain GET form handing a question to the lab page. The
   marketing page never calls an AI API itself: no streaming, no polling, no spend
   on crawler traffic, and a failure lands on a page already built to render it.
   So these rules run on a real form, input and button, where the mockup used three
   spans, and .ask .p has to hold up as both — hence the reset (background, border,
   inherited font) and an explicit placeholder colour, which a bare input would
   otherwise take from the user agent at a contrast nobody chose.

   The pill is the site's one exception to "rounded is reserved for actions", and
   it is not really an exception: the whole control is one action.
   -------------------------------------------------------------------------- */
.ask {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 620px;
  border: 1px solid color-mix(in srgb, var(--peri) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lilac) 18%, var(--bg));
  padding: 9px 9px 9px 20px;
}

.ask .p {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink2);
  background: none;
  border: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask .p::placeholder { color: var(--ink3); opacity: 1; }
.ask .p:focus { outline: none; }
/* The focus ring goes on the pill, not the field inside it, so the visible ring
   follows the control's own shape instead of drawing a rectangle inside a
   rounded one. site_00 owns the ring itself. */
.ask:focus-within { outline: 2px solid var(--fill-primary); outline-offset: 2px; }

.ask .seg {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink2);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}

/* 44px is the tap target, not the styling. The fill is the text partner of the
   machine end of the spectrum — white on --peri measured 3.10:1 — which is why
   --fill-primary exists as its own token rather than being the light hue. */
.ask .send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fill-primary);
  color: var(--on-fill);
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  cursor: pointer;
}
.ask .send:hover { background: var(--fill-primary-hi); }

/* -----------------------------------------------------------------------------
   ABOUT.

   Narrower column left, wider right: the CV is the evidence, the prose is the
   argument, and the argument gets the room. align-items:start so the CV stops
   where it stops instead of stretching to the prose's height. Three named
   grid areas rather than two column divs, because the byline's position is
   NOT the same shape stacked as it is side-by-side: on desktop it sits atop
   the CV in the narrow column, but on mobile it has to lead the whole
   section — above the opening line, not wherever the CV lands once the
   columns stack. grid-template-areas is what lets one element's position
   change relative to two different siblings across the breakpoint; a plain
   column swap (or flex `order`) can only reorder items that already share a
   parent, and byline/CV share one parent while byline/prose need to swap
   which one leads. row-gap stays 0 here — the vertical rhythm inside the
   left column is .about-byline's own margin-bottom and .cv's own spacing,
   not a grid gap that would apply to every row uniformly. */
.about {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  grid-template-areas: "byline prose" "cv prose";
  column-gap: 64px;
  row-gap: 0;
  align-items: start;
}
.about-byline { grid-area: byline; min-width: 0; }
/* THE HEADING AND ITS LIST ARE ONE GRID ITEM (2026-09-04). The CV gained a
   heading, and the obvious move — giving it a grid row of its own — is wrong on
   mobile: the stacked template carries `row-gap: 32px`, so a heading in its own
   row would sit 32px above the list it belongs to and read as a separate block.
   Wrapping keeps the pair together at both widths and needs no change to either
   grid-template-areas. */
.about-cv-block { grid-area: cv; min-width: 0; }
.about-cv { min-width: 0; }
.about-prose { grid-area: prose; min-width: 0; }
/* Links in the prose take the lede-link treatment (site_00_foundation.css, .shead
   .lede a): the page accent, underlined. Without it they inherited the prose ink
   and nobody could see them (2026-09-24). */
.about-prose p a {
  color: var(--accent, var(--deep));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.about-prose p a:hover { text-decoration-thickness: 2px; }

/* A fixed 72px, circular to match .av (site_05_voices.css) — the Voices
   avatars are the same "photo of a real person" treatment, reused here
   rather than inventing a second shape for the same kind of content. Name
   and location sit beside it rather than under it, so the identity mark and
   the timeline it introduces read as one unit ahead of .cv's own margin-top. */
.about-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.about-avatar {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  /* The source is already square and already framed with air above the head
     (it was a 320x400 portrait cropped hard at the crown, which put the head
     against the top of the circle; it is now 384x384 with the extra room
     built into the file). So no focal-point offset here — unlike .av, whose
     background-position: 50% 22% still corrects a rectangular source. */
  object-position: 50% 50%;
  border: 1px solid var(--warm-line);
  flex-shrink: 0;
}
.about-byline-who { display: flex; flex-direction: column; gap: 2px; }
.about-byline-who .n { font-size: 15px; font-weight: 600; color: var(--ink); }
.about-byline-who .loc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink3);
}

.cv { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.cv li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink2);
}
.cv li > * { min-width: 0; }
/* Tabular figures because these are years in a column and they have to line up as
   a column; proportional digits put 2011 and 2014 at different widths. */
.cv .y {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}

/* Sets its own margin rather than relying on the base p rule in
   site_00_foundation.css — Tailwind's compiled output loads last (see the
   "Where the CSS lives" note in root CLAUDE.md) and its preflight reset
   zeroes p's margin at the same specificity, which otherwise collapses these
   three paragraphs together with no visible gap. */
.about p { font-size: 17px; color: var(--ink2); margin: 0 0 16px; }
.about p:last-of-type { margin-bottom: 0; }

/* One of the three places Newsreader appears on the whole site. The opening line
   is the human claim the rest of the section then argues in the narrating sans,
   so the voice change is the structure of the passage, not decoration. No
   max-width: it wraps to fill whatever the prose column gives it, same as
   the paragraphs below — a hand-picked ch value made it wrap noticeably
   narrower than its own paragraphs directly beneath it. */
.about p.opening {
  font-family: var(--human);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: 24px;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE

   The labs block is no longer here: it stepped 3 -> 2 -> 1 column beside its own
   rules, above, when it became a card grid.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  /* Stacked, the byline leads the whole section — above even the opening
     line — not wherever the CV happens to land once the columns collapse. */
  .about {
    grid-template-columns: 1fr;
    grid-template-areas: "byline" "prose" "cv";
    row-gap: 32px;
  }
  /* Stacked, the 32px row-gap above already separates the byline from the
     prose that follows it — its own margin-bottom is what creates that same
     gap against .cv on desktop, and keeping both here would double it. */
  .about-byline { margin-bottom: 0; }
}

/* The composer's left padding closes to the gutter's rhythm and the segment chip
   goes, because at this width the pill has to hold a real question and a 44px
   button, and the chip is the only part of it that is a default rather than an
   input. The form still submits its segment — the control is hidden, and the
   value it carries is not the reader's to lose. */
@media (max-width: 560px) {
  .ask { padding-left: 16px; }
  .ask .seg { display: none; }
}

/* -----------------------------------------------------------------------------
   THE COMPOSER IS THE LAB'S COMPOSER, UNSTYLED FROM HERE (2026-09-03).

   `.ask` above is the Prism II pill. What actually renders on
   /customer-intelligence is pages/_ask, which is a real GET form to the Listening
   Post — a text area, two menu buttons, a hidden segment field and a submit — and
   it is deliberately NOT replaced by the mockup's `<span>` mock-up of itself. The
   marketing page must never call an AI API directly: no streaming, no polling, no
   spend on crawler traffic, and a failure lands on a page already built to render
   it. That form, its Stimulus controller, its preset list and its four tests all
   stay exactly as they are.

   Until now the pill treatment was applied to that markup instead, scoped to
   `.home-ask`: a 999px capsule, a lilac wash, a periwinkle border and a cobalt
   send. THAT IS GONE, and the reason is that the two surfaces are one promise.
   The band's whole claim is "this is the real instrument, try it" — and the thing
   it showed was a differently-shaped, differently-coloured object from the one a
   visitor lands on a click later. Worse, the capsule fought its own contents:
   `.lp-composer` is authored as a field ABOVE a toolbar, so flattening it onto one
   line needed a row of overrides here (`flex: 1 1 100%` on the input, `justify-
   content: space-between` on the bar, a 620px floor below which it wrapped, and a
   media query hiding the segment chip) to get back to the two rows it already had.

   `.lp-composer` and its menus are served on every page (labs_00_listening_post.css
   — see the stylesheet_link_tag :app note in CLAUDE.md), so deleting the overrides
   is what makes this identical to the lab rather than merely similar to it: one
   definition, and a change to the lab's composer reaches both. Only three things
   below are the band's, and each is a placement decision rather than a look:
   alignment, measure, and the caption. Restyling the composer belongs in
   labs_00_listening_post.css now, where it restyles both on purpose. */
/* ONE MEASURE, READ BY BOTH (2026-09-03). The composer and its caption were sized
   independently — 640px and 64ch — and then `.lpb .home-ask` widened only the
   composer to 760px, so the sentence describing the field wrapped 120px narrower
   than the field and ran to three lines. Neither value was wrong on its own, which
   is why nothing looked broken until the two were seen together.

   --ask-measure is the band's column. Override it in ONE place and both follow. */
.home-ask { --ask-measure: 640px; }
.home-ask .lp-composer {
  /* The lab centres its composer in a chat column; here it is one element in a
     left-aligned reading column and has to line up with the heading above it. */
  margin: 0;
  max-width: var(--ask-measure);
}
.home-ask .home-ask-caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink3);
  max-width: var(--ask-measure);
}
.home-ask .home-ask-caption b { color: var(--ink); font-weight: 500; }

/* NO PHONE RULE HERE ANY MORE. The pill hid the segment chip below 560px because
   a capsule holding a field, two chips and a 44px button on ONE line runs out of
   room, and the field is what had to survive. The lab's composer gives the field a
   row of its own and lets `.lp-composer-menus` wrap, so at 360px both chips still
   fit and nothing is taken away from the visitor. */

/* -----------------------------------------------------------------------------
   THE LISTENING POST BAND (2026-09-03).

   Full-bleed, one column of reading: mark, heading, field, evidence. It replaced
   a two-column split, and the reason is measured rather than aesthetic — in that
   split the composer rendered at 510px, and the composer is a 760px object with a
   field, two chips and a send in it. Putting a second column back here squeezes it
   again, and nothing raises when that happens.

   FULL-BLEED WITHOUT A HORIZONTAL SCROLLBAR, the same way .hero does it
   (site_03_hero.css): an ordinary block that already spans its container, with
   .lpb-inner carrying the measure. Not margin-inline: calc(50% - 50vw), which
   includes the scrollbar in 50vw and gives the document a sideways scroll.
   customer_intelligence.html.erb closes .wrap around this for that reason.

   THE GROUND IS WARM AND THE INSTRUMENT IN IT IS NEUTRAL. Ask is the ember end of
   the lab vocabulary (a person, asking), so the band carries the hue and the
   eyebrow takes --clay. The composer itself is the lab's own object, on --bg
   inside a hairline, and painting it would make it a different object from the one
   the visitor reaches a click later. Its only tint is the ground showing around
   it, which is exactly the relationship the section is describing.

   --hero-k multiplies the gradient exactly as it does on the hero: 1 in light,
   .28 in dark. Mixing the stops against --bg does not serve both themes on its
   own, because 55% of a light hue is light whatever it is mixed into.
   -------------------------------------------------------------------------- */
/* NO `overflow: hidden` ON THIS BAND, AND IT MUST NOT COME BACK. The composer's
   two dropdowns are absolutely positioned inside it and open downward past its
   lower edge, so a clip here amputates the panel mid-question — the menu still
   opens, the first option is readable, and nothing raises. The clip was defensive
   and bought nothing: the band is an ordinary block that already spans its
   container (no negative margins), the gradient is its own background and the
   grid is an inset:0 pseudo-element, so there is nothing here to overflow. */
.lpb {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(103deg,
    color-mix(in srgb, var(--sand) calc(52% * var(--hero-k, 1)), var(--bg)) 0%,
    color-mix(in srgb, var(--apricot) calc(20% * var(--hero-k, 1)), var(--bg)) 52%,
    var(--bg) 100%);
}

/* The 44px measurement grid the hero and the prism are drawn on, faded out
   before it reaches the evidence — a drafting grid behind a quoted customer
   reads as a graphic treatment of their words, which is the one thing on this
   band that must not look designed. */
.lpb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(103deg, #000 0%, transparent 68%);
          mask-image: linear-gradient(103deg, #000 0%, transparent 68%);
}

.lpb-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--gutter) 44px;
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 44px;
  align-items: start;
}
.lpb-inner > * { min-width: 0; }

.lpb-mark { display: block; flex: none; margin-top: 6px; color: var(--clay); }
/* .lp-ray (labs_01_composer_mobile.css) already carries the stroke geometry and
   is served on every page; only the hue is the band's to set. */
.lpb-mark .lp-ray { stroke: var(--clay); }

.lpb-body h2 { max-width: 22ch; }
.lpb-lede { margin-top: 16px; max-width: 62ch; }

/* THE COMPOSER'S OWN MEASURE IN THIS BAND ONLY. The lab gives it 760px in a
   centred chat column; at the 1140px measure, under a 62ch lede, a narrower one
   reads as a leftover control rather than the thing the section is for, so the
   band takes the lab's full width. Scoped to .lpb so /labs is untouched. */
.lpb .home-ask { margin-top: 26px; }
/* The band is wider than the reading column the composer was written for, so it
   sets the measure rather than the composer — the caption reads the same token and
   keeps its right edge on the field's. */
.lpb .home-ask { --ask-measure: 760px; }

/* The mark is the band's left anchor at the measure and has no role below it —
   stacked above a heading it becomes an ornament. Same 920 breakpoint .split
   collapses at (site_02_sections.css) and site_00 steps the gutter at. */
@media (max-width: 920px) {
  .lpb-inner { grid-template-columns: 1fr; gap: 0; padding-top: 44px; padding-bottom: 44px; }
  .lpb-mark { display: none; }
}