/* =============================================================================
   PRISM II — THE COMMERCIAL SPINE. The ladder of offers, the free-audit lead-in
   block that sits above it, the proof rows, and the questions list.

   Loads after site_00_foundation, which owns the tokens, the type scale, .wrap,
   .sec, .shead, .eyebrow, .secnum, the .btn family and svg.ico. Nothing here
   redefines any of those, and nothing here writes a literal colour: every value
   resolves through a token, so both themes and the light-hue rule are inherited
   rather than restated.

   These four components are the part of the page that asks for money, so they
   share one discipline: the reader is never asked to hold a legend in their head
   to read them. Position, weight and a word carry the meaning. Colour only ever
   agrees with something already written down.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   THE LADDER. One shelf label, then a hairline list of rungs.
   -------------------------------------------------------------------------- */
.shelf {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, var(--cobalt));
  padding: 26px 0 8px;
}

.ladder { border-top: 1px solid var(--line); }

.rung {
  display: grid;
  grid-template-columns: 56px 1.1fr 1.5fr 220px;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.rung > * { min-width: 0; }
/* The last rung does not draw its own closing hairline: the section's own
   border-bottom is already sitting a padding-step below it, and the two read as
   a doubled rule with a band of empty space trapped between them. The list is
   closed by the section, same as .srow and .report-contents close on theirs. */
.ladder .rung:last-child { border-bottom: 0; }

.rung .n {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink3);
}
.rung .name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.014em;
}
.rung .clause { font-size: 16px; color: var(--ink2); }

/* THE PRICE COLUMN IS LEFT-ALIGNED, and that is a repair rather than a taste.
   Ranging the figures right did line their right edges up, which looked tidy on
   the figures alone — but the note under each one wraps at this width, and a
   wrapped right-ranged note has a ragged LEFT edge, so its second line began at
   a different place on three of the five rows and at the margin on the other
   two. It read as though those two lines had drifted in from somewhere else.
   One left edge settles the figure and its note together.

   What that costs is the figures no longer sharing a right edge, and here that
   costs nothing: these are five different lengths of sentence, not a column of
   decimals anybody is going to add up. */
/* THE PRICE IS THE LARGEST THING IN ITS OWN ROW (2026-09-03), and it was the
   third-smallest. It set at 15px against a 19px offer name and a 16px clause,
   so a reader scanning a ladder for the number found it below both the label
   and the sentence describing it — inverted hierarchy at the one scroll depth
   where a persuaded reader converts or leaves. 21px is the .t-21 step; the
   figure keeps the mono voice because a price is data, and the note stays at
   13px because it is a qualifier rather than a second figure.

   Raised on the shared rule rather than per page: every ladder on the site had
   the same inversion, and fixing one surface would have left /audit's sibling
   rows arguing the opposite. */
.rung .price {
  font-family: var(--mono);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.004em;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}
.rung .price small {
  display: block;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .01em;
  margin-top: 8px;
  font-weight: 400;
}

/* NO RUNG LINKS OUT, AND NO RUNG IS DIMMED (2026-09-02). The rebuild rung once
   did both. It was set to half opacity, which said nothing a reader could act on
   — a dimmed row reads as disabled, or as an oversight, or as a deal that has
   gone away — while dragging text that was already the smallest on the row down
   to roughly 1.9:1. The fix for that was a .elsewhere link saying where the rung
   had gone, which solved the contrast and left a second problem: a link inside a
   price row invites a reader off the page at the exact moment they are reading
   the prices. Both are gone. The row is an ordinary row at full contrast, its
   note carries the terms, and the header links that page like every other.
   A test pins zero links inside .ladder .rung. */

/* TWO PAGES DROP THE RUNG ORDINALS (visibility 2026-09-02, intelligence
   2026-09-03). The four rungs visibility shows are 01, 02, 05, 03 on the full
   ladder, and a list reading 01/02/05/03 with no 04 looks like a numbering bug
   to exactly the reader the audit courts; intelligence shows 03 and 05, which
   is the same defect in two rows. The template omits the .n span on both, so
   this variant closes the empty track and pulls the clause tight under the name
   — the old grid floated the one line saying what an offer IS a full band below
   its name, and skimmers fell into the gap. /audit keeps the base four-track
   grid and its ordinals, because it shows the ladder whole. */
body.p-visibility .rung,
body.p-intelligence .rung { grid-template-columns: 1fr 220px; }
body.p-visibility .rung-body,
body.p-intelligence .rung-body { display: grid; gap: 4px; min-width: 0; }

/* Each of these is a promise the business has to keep, so the list is short and
   the marker is the accent doing punctuation duty, not decoration. */
/* Each of these is a promise the business has to keep, so they are set at the
   size a promise is read at (2026-09-03). At 13px --ink3 they were the smallest
   type on the page, sitting directly under the prices — reassurance a reader
   has to hunt for is not reassurance, and these three lines are the whole
   answer to "what am I actually agreeing to". 15px is the .small step and
   --ink2 is the body ink; the accent marker is unchanged. */
.terms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ink2);
}
.terms span::before { content: "· "; color: var(--accent, var(--cobalt)); }

/* -----------------------------------------------------------------------------
   THE PLAN (/software-development, 2026-09-02). One row per offer, the process
   as columns: the offer, what you start with, what the build costs, what you
   keep. It replaced two ladders — three steps and then rungs 03/04 — that each
   carried half the price information, so a reader met four dollar figures and
   two numbering systems and was never told what a website costs in total.

   It reuses .ladder/.rung/.name/.price so the locked-ladder test and the type
   rules above apply unchanged; only the grid is its own. The header row is
   aria-hidden and each cell carries a label of its own (.l), clipped while the
   header shows and revealed when the row stacks, so assistive tech hears one
   label per cell at every width. Each price cell aligns to the start so its
   note wraps under its figure, the same repair as .rung .price above.
   -------------------------------------------------------------------------- */
.plan .cols,
.plan .rung { grid-template-columns: 1.25fr 1fr 1fr .9fr; gap: 28px; }
/* THE PLAN LOST TWO COLUMNS (2026-09-02) — see the view's header comment: the
   entry fee became the same for both offers and moved into the lede, and "you
   keep / everything" was the same two cells restating .terms below. What is
   left is the offer and what its build costs, so the offer takes the wider
   share and the money column is capped rather than given half the row: a
   14-character price stretched across 500px reads as a gap, not a column.

   THE CAP IS SET BY THE NOTE, NOT THE FIGURE (2026-09-03). At 260px/34ch the
   build's note ("No floor to quote until the discovery sprint says what it
   is.") broke across three lines, the last of them the word "is." alone — a
   two-line note with an orphan under it. 300px/38ch is the width at which that
   sentence wraps once, which is the only measurement this column has to
   satisfy: the prices themselves are far shorter than either bound. */
.plan.two .cols,
.plan.two .rung { grid-template-columns: minmax(0, 1.4fr) minmax(0, 300px); gap: 48px; }
.plan.two .price small { max-width: 38ch; }
.plan .cols {
  display: grid;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
}
.plan .rung { padding: 26px 0; align-items: start; }
.plan .rung-body { display: grid; gap: 6px; min-width: 0; }
.plan .price small { max-width: 30ch; }
.plan .l {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ONE ROW WANTS NO HEADER. .plan.two is used on two pages with two different row
   counts: /software-development compares two offers, so its .cols header names
   the axis they are compared on and earns its place. /customer-intelligence has
   a single rung — :build, whose price is "Quoted on scope" — and a two-column
   header over one data row promises a comparison it cannot deliver.

   .solo drops the header there and promotes each cell's own label in its place,
   which is exactly the state the row already takes below 1080px; this makes it
   permanent rather than a breakpoint's side effect, so the labelling a screen
   reader hears is the same one a sighted reader sees at every width.

   The price also stops out-shouting the page's only figure. "Quoted on scope"
   is the thing you cannot buy yet, and at the shared 21px it was the largest
   element in the section while the $3,500 the button actually books sits in the
   19px lede above. It is the same fact either way, so this is a weight decision,
   not a content one — the shared .rung .price rule is untouched and every other
   ladder on the site keeps its inversion fix. */
.plan.solo .l {
  position: static;
  display: block;
  width: auto;
  height: auto;
  clip-path: none;
  white-space: normal;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 400;
  margin-bottom: 8px;
}
/* The row keeps its top padding. padding-top: 0 was set here on the reasoning
   that there was no header to clear, but the .ladder's own border-top is still
   drawn above the row, and with the padding zeroed the name sat on that
   hairline with nothing between them (2026-09-06). The header's 12px bottom
   pad plus the row's 26px is what /software-development's rows get under their
   rule; here the row's 26px alone does the same job under the ladder's. */
.plan.solo .rung { border-bottom: 0; }
.plan.solo .price { font-size: 17px; }

/* -----------------------------------------------------------------------------
   THE PROOF BOARD (/software-development, 2026-09-02). Panels, not rows.

   The proof list was five .pr rows, and the row is what caused every fault in
   it: a reader had to travel left to right across a client, a figure and a
   sentence that measure unrelated things, and four different engagements had to
   share one set of column widths. The figure track was 1fr, so the gap before
   each sentence was a different width on every row; the website row had no
   magnitude to state and put the word "AI-native" in a column of measurements.
   A panel holds one engagement whole, so none of that arises.

   IT SHIPPED BESIDE THE ROW COMPONENT AND OUTLIVED IT. .pr and .proof stayed
   here for two days because /customer-intelligence still rendered rows, on the
   reasoning that the two pages had no reason to change together and a shared
   restyle would have moved a page nobody was looking at. That page took the
   board on 2026-09-04 and the rows were deleted with it, so this is now the
   site's one proof component — both pages draw from these rules and a change
   here moves both.

   IT IS NOT A CARD, AND THE PRECEDENT IS .lead ABOVE: a hairline border over a
   filled ground, no radius and no shadow, which is what Prism II allows a block
   to be. The machine pair takes .lead's own ice gradient rather than a new mix,
   so the cool end of the spectrum is stated the way this file already states it.
   --ice may wash but never carry type (colour_vocabulary_test's LIGHT_ONLY), so
   --deep does the ink on those panels.

   No ordinals and no years (Jason, 2026-09-02). The board is not a timeline.
   -------------------------------------------------------------------------- */
.pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pb-grid + .shelf { padding-top: 34px; }
/* The first shelf drops .shelf's own top padding. The old row list opened on a
   hairline, which held that 26px down against something; the board opens on
   nothing, so it stacked on .shead's 40px and left 66px of empty page between
   the lede and the first label. .shead's gap is the one that should show. */
.proof-board > .shelf:first-child { padding-top: 0; }

.pb-panel {
  border: 1px solid var(--line2);
  background: var(--bg2);
  padding: 26px 24px;
  min-width: 0;
}
/* A wide panel spans the row. Two of them bracket the pair, which is the whole
   rhythm of the board: the strongest proof, then the pair, then the one thing a
   visitor can open. */
.pb-panel.wide { grid-column: 1 / -1; }

.pb-panel .co {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
/* The figure is on the type scale: .t-28's flat 28 in a pair, .t-38's clamp in
   a lead. It was 32px, which is not one of the twelve sizes and was the only
   32 in any site_*.css outside the report cover's own breakpoint. b defaults to
   700, so the display weight is set here rather than inherited. */
.pb-panel b {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
  color: var(--clay);
  margin-bottom: 12px;
}
/* .t-38's clamp with its FLOOR RAISED TO THE PAIR'S 28. Left at t-38's own 25px
   minimum the hierarchy inverted below about 860px: 2.9vw falls under 25 there,
   so the wide panel's figure clamped to 25 while the pair panels stayed at their
   flat 28 and the lead read smaller than the rows it leads. At 28 the two are
   equal on a phone and the lead grows from there. */
.pb-panel.wide b {
  font-size: clamp(28px, 2.9vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.pb-panel p { font-size: 16px; color: var(--ink2); margin: 0; }
.pb-panel.wide p { font-size: 17px; max-width: 72ch; }

/* The machine end. Same panel, the cool ground .lead already uses, and the ink
   moves to the machine's text partner. */
/* THE ICE IS MULTIPLIED BY --hero-k, AND THAT IS NOT OPTIONAL HERE. .lead above
   runs this gradient unmultiplied and survives, but only because its type is
   --ink, which is near-white in dark. This panel's type is --deep, which
   BRIGHTENS to a light blue in dark while an unmultiplied 48% ice mix lightens
   the ground to a mid grey underneath it — measured 1.91:1 on the label and the
   figure before this was added. It is the finding CLAUDE.md already records
   about the hero: mixing a light hue against --bg does not serve both themes,
   because a light hue stays light whatever it is mixed into. --hero-k is the
   one multiplier that fixes it, and the dark ground is the mechanism. */
.pb-panel.machine {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--ice) calc(48% * var(--hero-k, 1)), var(--bg)),
      transparent 58%);
}
.pb-panel.machine .co,
.pb-panel.machine b { color: var(--deep); }

/* THE ASK ON A PANEL A VISITOR CAN OPEN. The labs panel carried its link on the
   mono title instead, which asked a reader to work out that one of four
   identical-looking labels was clickable. A pill says it outright, and it takes
   --fill-primary because that is the colour of what it opens: the labs are the
   machine's end of the spectrum, the same rule the hero's asks follow.

   .btns and .btn are site_00's, unchanged — every pill on the site clears 44px
   and this one is no exception. */
.pb-panel .btns { margin-top: 22px; }
.pb-panel p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent, var(--cobalt));
  text-underline-offset: 3px;
}
.pb-panel p a:hover { color: var(--accent, var(--cobalt)); }

/* -----------------------------------------------------------------------------
   THE LEAD-IN BLOCK. The free audit holds the section; the paid rungs sit under
   it. Two panes over one hairline, the sample finding on the right, so the ask
   arrives beside a specimen of what it produces rather than a description of it.
   -------------------------------------------------------------------------- */
/* EVEN COLUMNS SINCE THE RIGHT PANE BECAME A DOCUMENT (2026-09-02). The split
   was 1.15fr .85fr, which was right when that pane held a bare scorecard: the
   prose led and the chart supported it. Page one of the report is a reproduction
   with the renderer's own full-width mono lines in it, and at .85fr its eyebrow
   and its scores label both wrapped mid-phrase while the type sat cramped. Even
   halves give it about 48% more measure, and the hairline landing on the centre
   reads as a deliberate pairing rather than a main pane with an inset. */
.lead {
  border: 1px solid var(--line2);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ice) 48%, var(--bg)), transparent 58%);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Prose sitting beside an artefact in a grid track: without this the longest
   unbreakable run in either pane sets the column width and the split stops
   being 1.15 to .85. */
.lead > div { padding: 36px; min-width: 0; }
.lead > div + div { border-left: 1px solid var(--line); }
.lead :is(h2, h3) { max-width: 20ch; margin: 12px 0 14px; }

.finding { display: grid; font-size: 16px; margin-top: 16px; }
.finding .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* PASS, PARTIAL AND MISSING ARE STATUS, AND STATUS IS A DIFFERENT AXIS FROM
   IDENTITY. Everywhere else on this page a hue answers "which of the three
   readings is this" — a person, the translation, the machine. Here green, amber
   and red answer "did the check pass", which is an unrelated question, and the
   two vocabularies are one screen apart.

   The rule that keeps them from being confused is that a status colour never
   appears on its own: the tag carries the word PASS, PARTIAL or MISSING, and the
   colour agrees with a word already there. That also settles the accessibility
   question by construction, since anybody who cannot separate the three hues is
   reading exactly the same finding as everybody else. */
.tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 4px;
  flex: none;
}
.t-pass { color: var(--pass); border-color: var(--pass-line); }
.t-part { color: var(--part); border-color: var(--part-line); }
.t-miss { color: var(--miss); border-color: var(--miss-line); }

/* The verdict is a sentence, so it takes the human's text partner rather than a
   status colour — it is the reading, not one of the results above it. */
.verdict {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  color: var(--clay);
  padding-top: 16px;
  display: block;
}

/* -----------------------------------------------------------------------------
   THE FIVE SCORE ROWS (pages/_report_cover). Five rows in the shape the audit
   report actually renders: question-form mono label, one-line gloss, a 0-100
   bar, and the figure in the report's own serif. The bar is measured data, so
   it takes the page accent, not a status hue — and the figure beside it is the
   word the colour agrees with, same rule as the tags above.

   These rules are the LIGHT-GROUND defaults. The cover block below re-inks the
   same selectors onto its own dark ground by scope, which is why the rows keep
   one set of class names rather than gaining a parallel set.
   -------------------------------------------------------------------------- */
.srow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.srow:last-of-type { border-bottom: 0; }
.srow .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.srow .q {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.srow .desc { font-size: 13px; color: var(--ink3); margin: 2px 0 8px; max-width: 44ch; }
.srow .bar-t { height: 5px; background: var(--bg3); }
.srow .bar-f { display: block; height: 100%; background: var(--accent, var(--cobalt)); }
.score {
  font-family: var(--human);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  flex: none;
}

/* -----------------------------------------------------------------------------
   THE REPORT COVER (pages/_report_cover). Page one of the audit, redrawn in
   markup, on both /ai-visibility and /audit. It replaced a light-ground
   scorecard: the scores were right and the framing undersold, because a chart
   ABOUT the report is not the same argument as the document itself.

   A REPRODUCTION OF A PRINTED PAGE DOES NOT FOLLOW THE THEME. White ink on blue
   is what the PDF is in every light, so the four values below are locally
   scoped custom properties rather than theme tokens, and they are the only
   literal colours in this file. That exception is structural: var(--on-fill)
   steps to near-black under a dark ground and would erase the cover, and
   var(--ink), var(--bg3) and var(--line) all invert with it.

   The ground is var(--cobalt), not the PDF's own brighter blue. The document is
   reproduced INSIDE the site's system, the same way the six lab stage hues were
   remapped onto the spectrum rather than admitted to it as new colour.
   -------------------------------------------------------------------------- */
.report-cover {
  --cover-ink: #FFFFFF;
  --cover-ink2: rgba(255, 255, 255, .78);
  --cover-line: rgba(255, 255, 255, .32);
  --cover-track: rgba(255, 255, 255, .28);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 24px 22px;
  background: var(--cobalt);
  color: var(--cover-ink);
}

/* The dotted field the cover carries behind its title. A masked dot lattice
   rather than an image or path data: it is decoration, it must not cost a
   request, and at this size a generated pattern is indistinguishable from the
   drawn one. */
.report-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .75;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(120% 90% at 88% 8%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 88% 8%, #000 0%, transparent 62%);
}

/* Both mono labels are the renderer's own full lines, set across an A4 column
   there and a 336px one here, so each wraps to two lines at most widths. 12px is
   the site's floor and is not negotiable, so the wrap is made to read as a tight
   label block instead of loose prose: the tracking comes back to .07em and the
   leading is pulled in. */
.report-cover .rc-top {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cover-ink2);
  border-bottom: 1px solid var(--cover-line);
  padding-bottom: 10px;
  margin: 0 0 30px;
}

/* The title is the report's serif, and it is the only place on these two pages
   the human voice speaks for a document rather than a person. It is set here
   because the PDF sets it here: this is a quotation of page one, not a new use
   of the face. */
.report-cover .rc-lede {
  font-family: var(--human);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.report-cover .rc-name {
  font-family: var(--human);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 18px;
}

.report-cover .rc-verdict {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cover-ink2);
  max-width: 40ch;
  margin: 0 0 8px;
}
/* The measurement stands apart from the two sentences of method above it, which
   is the same blank line the renderer opens before it. */
.report-cover .rc-measure {
  color: var(--cover-ink);
  font-weight: 400;
  margin-bottom: 26px;
}

.report-cover .rc-rule { border: 0; border-top: 1px solid var(--cover-line); margin: 0 0 12px; }
.report-cover .rc-scores-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cover-ink2);
  margin: 0 0 14px;
}

/* THE SAME FIVE ROWS, RE-INKED BY SCOPE. Every one of these overrides a rule in
   the block above that resolves to a light-ground token. .bar-f is the one that
   fails loudest if it is ever dropped: --accent on /ai-visibility and /audit is
   --deep, a navy that is very nearly invisible on this ground. */
.report-cover .finding { margin-top: 0; }
.report-cover .srow { border-bottom: 0; padding: 0 0 13px; }
.report-cover .srow .q { color: var(--cover-ink); font-size: 12px; letter-spacing: .07em; }
.report-cover .srow .desc { color: var(--cover-ink2); font-size: 12px; margin: 1px 0 6px; }
.report-cover .srow .bar-t { height: 4px; background: var(--cover-track); }
.report-cover .srow .bar-f { background: var(--cover-ink); }
.report-cover .score { color: var(--cover-ink); font-size: 26px; font-variant-numeric: tabular-nums; }

/* The cover carries no footer. The document's own prints a date, the client's
   name behind a redaction and the studio domain; see the partial's header for
   why all three come off on the way in. The last score row's own padding is the
   bottom margin. */

/* The caption is centred under the artefact it captions, which is the one place
   on this site a caption is. Everywhere else .caption sits under flush-left
   prose and stays flush left, so this is matched on the adjacency rather than
   set on the class. The 64ch cap has to be centred as a box as well as a line,
   or a short caption sits left inside a wide one. */
.report-cover + .caption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------------------------
   THE CONTENTS MANIFEST (pages/_report_contents), /ai-visibility section 02.

   The page promised five scores and stopped, so a reader met an eight-page
   document as a scorecard. Eight rows of page number and one line each is the
   cheapest honest way to say how much arrives, and it fills the left pane,
   which used to run out of content well before the cover beside it did.

   Rows are a two-column grid rather than a list with markers: the page number
   is data in a rail, and a bullet beside it would be a second, weaker marker
   saying the same thing.
   -------------------------------------------------------------------------- */
.report-contents { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.report-contents > .mono { display: block; margin-bottom: 16px; }
.report-contents ol { list-style: none; margin: 0; padding: 0; }
.report-contents li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.report-contents li:last-child { border-bottom: 0; }
.report-contents .rc-page {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent, var(--cobalt));
  padding-top: 3px;
}
.report-contents .rc-title { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.report-contents .rc-line {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink3);
  line-height: 1.45;
  margin-top: 1px;
}

/* -----------------------------------------------------------------------------
   QUESTIONS. A definition list on the same hairline rhythm as the ladder and the
   proof rows, question left, answer right.
   -------------------------------------------------------------------------- */
.faq { margin: 0; }
.faq .qa {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 44px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
/* The list's last hairline and the section's own bottom border land on top of
   each other, which reads as a double rule under the final answer. The section
   border is the one that belongs to the page's rhythm, so the row drops its. */
.faq .qa:last-child { border-bottom: 0; }
.faq .qa > * { min-width: 0; }
.faq dt {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.014em;
}
.faq dd { margin: 0; font-size: 16px; color: var(--ink2); }

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

   The ladder loses its middle column first. The clause is the one cell that can
   take a second line without the row stopping making sense, so it drops beneath
   the name and the number and price keep their own row.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .rung { grid-template-columns: 48px 1fr 200px; gap: 18px; }
  .rung .clause { grid-column: 2 / -1; grid-row: 2; }
  body.p-visibility .rung,
  body.p-intelligence .rung { grid-template-columns: 1fr 200px; }
}

@media (max-width: 920px) {
  .lead, .faq .qa { grid-template-columns: 1fr; }
  .lead > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .rung { grid-template-columns: 1fr; gap: 8px; }
  .rung .clause { grid-column: auto; grid-row: auto; }
  /* The 1080 variant above is more specific than the base one-column rule, so
     the page-scoped grid has to be collapsed by name too. */
  body.p-visibility .rung,
  body.p-intelligence .rung { grid-template-columns: 1fr; }
  /* The board's own collapse. It read "it inherits nothing from the .pr rule
     above it" until 2026-09-04, when /customer-intelligence took the board and
     .pr was deleted — there is no longer a second proof component to inherit
     from. The wide span stays harmlessly correct in one column. */
  .pb-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lead > div { padding: 26px; }
  /* The cover keeps its own padding rather than inheriting the pane's: it is a
     reproduction of a page, and its margin is part of what makes it read as
     one. The footer's two mono runs stack here rather than being squeezed. */
  .report-cover { padding: 22px 18px 18px; }
  .report-cover .rc-name { font-size: 32px; }
}

/* THE PLAN STACKS IN TWO STAGES. Under 1080 the offer takes the full row and
   the three money cells share the next; the header row goes and each cell's own
   label comes up in its place. Under 920 it is one column like every other row
   on the page. Both blocks name .plan .rung explicitly because the base .rung
   rules at these widths would otherwise apply their step-grid (48px 1fr 200px)
   and their clause displacement to rows that have neither. */
@media (max-width: 1080px) {
  .plan .cols { display: none; }
  .plan .rung { grid-template-columns: 1fr 1fr 1fr; gap: 20px 24px; }
  /* Two cells never needed a three-track stack, and the offer already spans the
     row below, so the price simply takes the next line at full width. */
  .plan.two .rung { grid-template-columns: 1fr; gap: 18px; }
  .plan .rung-body { grid-column: 1 / -1; }
  .plan .rung .clause { grid-column: auto; grid-row: auto; }
  .plan .l {
    position: static;
    display: block;
    width: auto;
    height: auto;
    clip-path: none;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink3);
    font-weight: 400;
    margin-bottom: 8px;
  }
}
@media (max-width: 920px) {
  .plan .rung { grid-template-columns: 1fr; gap: 20px; }
  .plan .price small { max-width: none; }
}

/* The ask under the plan (2026-09-02). The terms row sits between the table and
   the pill deliberately: number, then the three commitments that answer what a
   five-figure price makes a reader afraid of, then the button. .terms already
   carries its own 22px top margin, so only the pill needs spacing. */
.plan-ask { margin-top: 26px; }