/* elara_pages.css: the chat space's own pages (the drift proof, the benchmarks), tokens only.
   Every var() resolves from /elara_tokens.css, the :root of elara_chat.html (one source). Zero literals,
   checked by tools/design_scan.py and tests/test_design_math.py (exit 0). The arithmetic behind the steps and
   boxes is docs/DESIGN_MATH.md: h1 step 6, h2 step 3, lede step 1, body step 0, tables step -1, captions and
   labels step -2; every vertical extent a multiple of 4px; one centre line; one accent (gold) for what the
   reader should look at, comparators in --mut. Square corners throughout (C:/Branding/Bible). */
/* The page shell, so a content page can host the chat's navigation container unchanged (founder 2026-09-06).
   elara_chat.html opens with *{box-sizing:border-box} and body{margin:0}; a content page had neither, and the
   chrome is injected OUTSIDE .pg, so `.pg *` never reached it. Measured consequence: a nav link resolved
   min-height 44 + padding 16 + border 2 = 62 instead of 44, and the header rendered 87px tall at x=8 w=1424
   against the chat's 69px at x=0 w=1440 -- the same markup and the same stylesheet, landing differently only
   because the reset was missing. These two lines close it, and elara_chat.html is not touched: this sheet is
   loaded by the four chat-space content pages and by nothing else. Verified by the family check in
   tests/uiux/pricing_symmetry_proof.py, which measures the chat's header and requires the page to match it. */
body{margin:0;background:var(--navy)}
body,body *{box-sizing:border-box}
.pg{background:var(--navy);color:var(--ink);font-family:var(--ff-product);font-size:var(--fs-step-0);line-height:var(--lb-step-0);
  font-weight:var(--w-regular);letter-spacing:var(--tr-none);-webkit-font-smoothing:antialiased}
.pg *{box-sizing:border-box}
.pg [id],.pg:target{scroll-margin-top:calc(var(--sp-tap) + var(--sp4))}
.pg{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;-webkit-text-size-adjust:100%}   /* the chat page sets this on body; the pages render the same faces the same way */
.pg-wrap{max-width:var(--measure-wide);margin:0 auto;padding:var(--sp5) var(--sp3) var(--sp8)}
.pg a{color:var(--gold2);text-decoration:underline;text-decoration-thickness:var(--bw-hair);text-underline-offset:var(--sp-half)}
.pg a:hover{color:var(--ink)}
.pg a:focus-visible,.pg-sub a:focus-visible{outline:var(--bw-rule) solid var(--gold2);outline-offset:var(--sp-half)}
/* the proof sub-navigation: Proof report · Drift · Benchmarks; the current page carries aria-current */
.pg-sub{display:flex;flex-wrap:wrap;gap:var(--sp1);margin:0 0 var(--sp6);padding:0;list-style:none;border-bottom:var(--bw-hair) solid var(--line)}
.pg-sub a{display:inline-flex;align-items:center;min-height:var(--sp-tap);padding:0 var(--sp2);color:var(--mut);text-decoration:none;
  font-size:var(--fs-step--2);line-height:var(--lb-step--2);font-weight:var(--w-semi);letter-spacing:var(--tr-wide);text-transform:uppercase;
  border-bottom:var(--bw-rule) solid transparent;transition:color var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
.pg-sub a:hover{color:var(--ink)}
.pg-sub a[aria-current="page"]{color:var(--gold2);border-bottom-color:var(--gold2)}
/* GOLD IS ONE ACCENT, AND IT MARKS ONE LEVEL (corrected 2026-09-07, after audit).
   An earlier pass this day put --gold2 on h1, h2 AND h3. Measured consequence on /AI/about: the kicker, the
   h1, all five h2s and every inline link rendered in one colour, separated only by an underline. Section 6 of
   docs/DESIGN_MATH.md enumerates gold's uses exhaustively -- "our row in a table, our bar in a chart, the
   active link" -- and the design mathematics encodes the same thing numerically: every gold pairing is held to
   the 3.0:1 ACCENT target while --ink and --mut are held to 4.5:1 TEXT. Gold is not a text colour in this
   system, and an accent applied to every structural level is not an accent.
   Worse, it was not even one colour: .pg-paper remaps --gold2 to --paper-gold, so h2s alternated light gold
   and dark ochre down a two-tone page, and elara_pricing.css already set .pg-plan h3 to --ink while this file
   set .pg-h3 to gold -- the same level, two colours, decided by which page you were on.
   So: the KICKER and the H1 carry gold, and nothing else does. h2 and h3 are --ink (17.4:1 on navy, 18.0:1 on
   paper), which is the text role the mathematics assigns them. The founder's complaint that the headings read
   boring is answered by measure and rhythm below, not by paint.
   Note for the next person: design_scan, tier1_pages_measure and all 61 tests PASSED on the violating version.
   The literal ratchet counts tokens, not meaning, so it cannot catch a doctrine breach. This comment is the
   only thing standing between that mistake and its repetition. */
/* the opening: kicker, h1, lede, then the three figures the page rests on */
/* Kicker is a gold sentence, not an uppercase-tracked eyebrow (founder 2026-09-15: those read as AI tells). */
.pg-kicker{margin:0 0 var(--sp2);color:var(--gold2);font-size:var(--fs-step--2);line-height:var(--lb-step--2);font-weight:var(--w-semi);letter-spacing:var(--tr-none);text-transform:none}
.pg-h1{margin:0 0 var(--sp3);font-size:var(--fs-step-6);line-height:var(--lbh-step-6);font-weight:var(--w-bold);letter-spacing:var(--tr-snug);color:var(--gold2)}
.pg-lede{max-width:var(--measure);margin:0 0 var(--sp2);font-size:var(--fs-step-1);line-height:var(--lb-step-1);color:var(--mut)}
.pg-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:var(--sp6) 0 0;padding:0;background:var(--navy);list-style:none;border-right:var(--bw-hair) solid var(--line);border-bottom:var(--bw-hair) solid var(--line)}
.pg-kv li{margin:0;padding:var(--sp3);background:var(--navy);border-top:var(--bw-hair) solid var(--line);border-left:var(--bw-hair) solid var(--line)}
.pg-kv b{display:block;font-size:var(--fs-step-4);line-height:var(--lbh-step-4);font-weight:var(--w-bold);color:var(--gold2);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-snug)}
.pg-kv span{display:block;margin-top:var(--sp-half);font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut)}
/* sections: 64px between, 24px under a heading, 16px between paragraphs */
.pg-sec{margin:var(--sp8) 0 0}
/* h2 and h3 are capped at --measure like the prose beneath them (added 2026-09-07). They carried no max-width
   while .pg-p and .pg-lede were capped at 34rem, so a heading set to the full 912px content box above a 544px
   body column: /AI/about's "Faithful to your instructions. Accountable to the evidence." is ~57 characters and
   ran past the paragraph under it. One centre line means one right edge too, not only one left. */
.pg-h2{max-width:var(--measure);margin:0 0 var(--sp3);font-size:var(--fs-step-3);line-height:var(--lbh-step-3);font-weight:var(--w-semi);letter-spacing:var(--tr-none);color:var(--ink)}
.pg-h3{max-width:var(--measure);margin:var(--sp4) 0 var(--sp2);font-size:var(--fs-step-1);line-height:var(--lbh-step-1);font-weight:var(--w-semi);color:var(--ink)}
.pg-p{max-width:var(--measure);margin:0 0 var(--sp2)}
.pg-p b{font-weight:var(--w-semi);color:var(--ink)}
.pg-note{max-width:var(--measure);margin:var(--sp2) 0 0;font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--mut)}
.pg-form{max-width:var(--measure);margin:var(--sp4) 0}
.pg-form label{display:block;font-weight:var(--w-semi)}
.pg-form input{display:block;width:100%;min-height:var(--sp-tap);margin:var(--sp1) 0;padding:var(--sp1half) var(--sp2);border:var(--bw-hair) solid var(--line);border-radius:0;background:var(--panel);color:var(--ink);font:inherit}
.pg-button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sp-tap);padding:var(--sp1half) var(--sp3);margin-top:var(--sp2);border:var(--bw-hair) solid var(--gold2);border-radius:0;background:var(--navy);color:var(--ink);font:inherit;font-weight:var(--w-semi);cursor:pointer;position:relative}
.pg a.pg-button{color:var(--ink);text-decoration:none}
.pg a.pg-button:hover{color:var(--ink)}
.pg-button.primary,.pg a.pg-button.primary{background:var(--cta-gold-fill);color:var(--gold-ink);border-color:var(--gold);font-weight:var(--w-bold)}
.pg a.pg-button.primary:hover{color:var(--gold-ink)}
.pg-button.primary:hover,.pg-button.primary:focus-visible{filter:brightness(1.06)}
.pg-button:disabled{cursor:wait;color:var(--mut)}
.pg-chip{display:inline-flex;align-items:center;min-height:var(--sp3);padding:0 var(--sp1);background:var(--chip-fill);border:var(--bw-hair) solid var(--chip-line);color:var(--ink);font-size:var(--fs-step--2);line-height:var(--lb-step--2)}
.pg-idioms{--strobe-edge:var(--strobe-edge);--cta-gold-fill:var(--cta-gold-fill);--chip-fill:var(--chip-fill);--chip-line:var(--chip-line);--scrim-image:var(--scrim-image)}
/* PANEL: the one-column card used on a form or a step list, not the subgrid .pg-card.
   Shaded fill, no outline. .on is the gold shade, not a cyan edge. */
.pg-panel{max-width:var(--measure);margin:0 0 var(--sp2);padding:var(--sp2);background:var(--panel2);border:0;position:relative}
.pg-panel.on{--mut:var(--ink);--faint:var(--ink);background:color-mix(in srgb,var(--gold2) 14%,var(--panel2))}
.pg-button,.pg-plan{position:relative}
.pg-button::after,.pg-plan::after{content:"";position:absolute;inset:0;box-sizing:border-box;border:var(--bw-hair) solid transparent;background:var(--strobe-edge);pointer-events:none;opacity:0;-webkit-mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pg-button:hover::after,.pg-button:focus-visible::after,.pg-plan:hover::after,.pg-plan:focus-within::after{opacity:1}
.pg-button:focus-visible,.pg-form input:focus-visible{outline:var(--bw-rule) solid var(--gold2);outline-offset:var(--sp-half)}
.pg-status:empty{display:none}
.pg-status:not(:empty){padding:var(--sp2);border-left:var(--bw-rule) solid var(--gold2);background:var(--panel2)}
.pg [hidden]{display:none!important}
.pg-cap{margin:var(--sp1) 0 0;font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut)}
/* numbered method steps: the numeral in the accent, the text in ink */
.pg-steps{margin:0;padding:0;list-style:none;counter-reset:step;max-width:var(--measure)}
.pg-steps li{position:relative;counter-increment:step;padding:var(--sp2) 0 var(--sp2) var(--sp5);border-top:var(--bw-hair) solid var(--line)}
.pg-steps li:last-child{border-bottom:var(--bw-hair) solid var(--line)}
.pg-steps li::before{content:counter(step);position:absolute;left:0;top:var(--sp2);width:var(--sp4);font-size:var(--fs-step--1);line-height:var(--lb-step-0);
  font-weight:var(--w-semi);color:var(--gold2);font-variant-numeric:tabular-nums}
.pg-steps b{font-weight:var(--w-semi)}
/* question and answer rows: the objection, then how the test design answers it.
   NO ROW SHADING HERE, and the reason is measured (2026-09-07). An earlier pass this day striped even rows
   with --tint-cyan. Two faults, both arithmetic rather than taste:
     1. It was INVISIBLE and it duplicated something stronger. 10% --cyan over --paper computes to #e9fbfd,
        1.067:1 against white, while the border-top already grouping those rows is --paper-line at 1.317:1.
        On navy: 1.186:1 against a rule at 1.299:1. The addition was fainter than the thing it repeated.
     2. It broke the reading column on a phone. The rows carried padding:--sp2 with margin:0 calc(--sp2 * -1);
        below 640px .pg-wrap's own side padding IS --sp2, so the two cancelled exactly and the rows ran flush
        to both screen edges while every heading and paragraph kept its 16px gutter.
   Doctrine also forbids the colour outright: DESIGN_MATH.md 6a reserves cyan for the halo and admits it on a
   page only as an EDGE (--edge-cyan), "never as fill or text". --tint-cyan had zero usages anywhere in the
   space before that pass -- a token being DEFINED is not a token being SANCTIONED. And row emphasis already
   has an owner: --tint-gold on .pg-table tr.us, which means "this row is ours" rather than "this row is even".
   If this list ever needs lifting, the lever is type and rhythm, not a wash. */
.pg-qa{margin:0;max-width:var(--measure-wide)}
/* The term column is a LABEL RAIL, and the label treatment is the one this sheet already owns (2026-09-07).
   dt takes .pg-table th's exact declaration set -- --fs-step--2 / --lb-step--2 / --w-semi / --tr-wide /
   uppercase / --mut -- because a definition term and a column head do the same job: they name what the
   thing beside them is. Reusing the object rather than composing a lookalike is what keeps this a system
   with one label voice (.pg-kicker and .pg-sub a are the same object in gold and in a tab).
   The emphasis is INVERTED on purpose. It was a bold ink term against a --mut answer, which put the weight
   on the word you scan past and greyed the sentence you came to read. Now the term recedes to the rail and
   the answer carries --ink, because on this page the answer is the substance: "A task is not complete
   because Elara says it is" is the content, "Completion" is only its handle.
   Rhythm opens one step, --sp2 to --sp3, which is 24px and on the 4px grid.
   No colour token was added, and no background, radius or shadow: section 6a keeps rows flat. This is the
   third treatment of this list today -- the first two were a gold heading wash and a cyan fill, both of
   which passed every gate and both of which were doctrine violations. Gate-green is necessary here and has
   never once been sufficient. */
.pg-qa div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp3);padding:var(--sp3) 0;border-top:var(--bw-hair) solid var(--line)}
.pg-qa div:last-child{border-bottom:var(--bw-hair) solid var(--line)}
.pg-qa dt{margin:0;font-size:var(--fs-step--2);line-height:var(--lb-step--2);font-weight:var(--w-semi);
  letter-spacing:var(--tr-none);text-transform:none;color:var(--mut)}
.pg-qa dd{margin:0;color:var(--ink)}
/* tables: our row in ink with the figure in gold; comparators in --mut; numbers tabular and right-aligned */
.pg-scroll{overflow-x:auto;margin:0 0 var(--sp1)}
.pg-table{width:100%;border-collapse:collapse;font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--mut)}
.pg-table.prose{min-width:var(--measure)}
.pg-table.prose th:nth-child(2){width:55%}
.pg-table th{padding:var(--sp1half) var(--sp2);text-align:left;font-size:var(--fs-step--2);line-height:var(--lb-step--2);font-weight:var(--w-semi);
  letter-spacing:var(--tr-none);text-transform:none;color:var(--mut);border-bottom:var(--bw-hair) solid var(--line2)}
.pg-table td{padding:var(--sp1half) var(--sp2);border-bottom:var(--bw-hair) solid var(--line);vertical-align:top}
.pg-table th.num,.pg-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-table tr.us td{color:var(--ink);font-weight:var(--w-semi);background:var(--tint-gold)}
.pg-table tr.us td.num{color:var(--gold2);font-weight:var(--w-bold)}
/* .pg-table tr.ref td and the .pg-bars/.pg-bar family moved to elara_zero_drift.css on 2026-09-07: they are
   /AI/zero-drift's own, and the method note's remaining "still to isolate" item. .pg-cmd below STAYS here --
   it is single-page today but is a generic primitive any page showing a command would want, and the seam rule
   asks whether a SECOND page would want a rule, not whether one uses it yet. */
/* the commands a reader can run, and the receipt paths */
.pg-cmd{margin:0 0 var(--sp2);padding:var(--sp2) var(--sp3);background:var(--panel2);border:var(--bw-hair) solid var(--line);
  font-family:var(--ff-mono);font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--ink);overflow-x:auto;white-space:pre}
.pg code{font-family:var(--ff-mono);font-size:var(--fs-step--1);color:var(--ink);background:var(--tint-ink);padding:0 var(--sp-half)}
/* ── the pricing page ────────────────────────────────────────────────────────────────────────────
   Additive: no rule above is changed, so the three pages already at zero literals cannot regress.
   The symmetry here is structural, not eyeballed (docs/DESIGN_MATH.md section 5). The card grid declares
   FOUR rows once, and every card is a subgrid spanning them, so the plan name, the price, the include list
   and the button sit on ONE shared baseline across all four cards whatever their content length. Without
   subgrid the cards would each solve their own heights and the row of buttons would stagger, which is the
   defect a person reads as "unfinished" long before they can name it. Equal siblings: one padding token,
   one border weight, one button height (--sp-tap, the WCAG 2.5.5 floor) on every card. */
/* PAPER: the white half of the two-tone. Rather than restyling each child for a light ground, the scope
   REMAPS the colour tokens for its own subtree, so every .pg-* rule inside keeps reading var(--ink) and
   var(--line) and simply resolves them to the paper palette. --gold2 remaps to the deep gold because the
   bright gold is a dark-ground accent and lands near 1.8:1 on white; doing it here means nothing inside has
   to know which ground it is on. Values come from :root (elara_chat.html), so this adds no literal and no
   second palette. Custom properties resolve at use, which is what makes --tint-ink and --tint-gold follow. */
.pg-paper{--navy:var(--paper);--navy2:var(--paper-2);--panel:var(--paper);--panel2:var(--paper-2);
  --chip:var(--paper-2);--good:var(--paper-good);--bad:var(--paper-bad);
  --ink:var(--paper-ink);--mut:var(--paper-mut);--faint:var(--paper-mut);--label:var(--paper-mut);
  --line:var(--paper-line);--line2:var(--paper-line2);--gold2:var(--paper-gold);--gold:var(--paper-gold);
  background:var(--paper);color:var(--ink)}
/* BANDS. The light half of the two-tone runs EDGE TO EDGE, alternating with the navy, because a white panel
   inset inside the reading column is still one dark page with a light box on it -- the monotony the alternation
   exists to break is a property of the full viewport width, not of the column. So the band is the section unit
   and spans the viewport; the wrap inside it keeps the same centred column and the same left rail, so the
   alternation changes the ground under the text and nothing about where the text sits. Vertical rhythm moves
   from the section margin to the band's own padding, which is why every band carries --sp8 top and bottom:
   two adjacent bands then meet with one --sp8 between their content, not two stacked.
   CORRECTION 2026-09-07: that last sentence was false and had been since it was written. Padding does not
   collapse the way margin does, so two adjacent bands at --sp8 top and bottom put 128px between their
   content, not 64. The rhythm this file believed it shipped was half the rhythm it shipped, and it is
   unreduced at 390x844, where 128px is about 15% of the viewport. The arithmetic is recorded here rather
   than silently fixed: halving the padding would move every band on every page, which is the founder's
   call, not a comment's. */
.pg-band{padding:var(--sp8) 0}
/* THE FIELD, on the opening band only, in motion.
   Three hairline layers at 32, 64 and 128px -- the space scale's own doubling -- each drifting exactly ONE
   of its own periods per cycle, so every layer loops seamlessly. The cycle lengths are 34s, 55s and 89s:
   consecutive Fibonacci numbers, whose ratios converge on phi, which is the same constant the glow opacities
   and the type scale already sit on. Because those three periods share no small common multiple, the layers
   realign only after their least common multiple -- so the combined pattern is quasi-periodic and a reader
   never sees it repeat. That is the whole effect: not an animation that plays, a surface that is never
   quite still. The layers ride the element and its two pseudo-elements so each can carry its own duration;
   the content sits above on z-index 1. Reduced motion stops it and leaves the static field. */
/* THE MASTHEAD (founder 2026-09-12: "the dark panel with the lines must be a standard size across", "Tier 1,
   seriously professional"). Measured before this change (docs/production-readiness/chrome_parity.json): the
   opening band ran 368-628px on desktop and 316-857px on a phone, because nothing declared a height and every
   page kept paragraphs, lists and section rails inside it.
   ONE HEIGHT. --band-h (eight section rhythms, calc over --sp8) on desktop and --band-h-m (nine) on a phone; the
   band holds ONLY the kicker, the headline and the lede (everything else moved into the first content band), and
   the content is pinned to the top rhythm (align-content:start), so the kicker sits at the same y on every page.
   Content taller than the band still grows it, and tools/chrome_parity_probe.py reads the rendered height on
   every page and fails when two pages differ: the standard is a property, not a floor.
   ONE GROUND, BOTH THEMES. The band remaps its tokens to the --chrome-* set, exactly as elara_chat_header.css pins
   the top bar, so it is dark under the dark header whichever theme the reader chose. Under the copy: the canvas
   halo (--halo-canvas, the landing page's cyan radial as one token, the one halo the brand permits outside the
   lockup, a background and not a shadow) and the derived field, whose coarsest octave now rests on the band while
   the two finer ones keep their Fibonacci drift on the pseudo-elements.
   TWO TONES ON THE TYPE. The headline is the product face at the folio fluid step in gold; a cyan hairline
   (--edge-cyan, the edge role) closes it; the lede is the chrome's muted ink. Nothing on the band glows. */
.pg-field{--navy:var(--chrome2);--navy2:var(--chrome);--panel:var(--chrome);--panel2:var(--chrome2);
  --ink:var(--chrome-ink);--mut:var(--chrome-mut);--label:var(--chrome-mut);--faint:var(--chrome-mut);--line:var(--chrome-line);--line2:var(--chrome-line);
  position:relative;overflow:hidden;display:grid;align-content:start;min-height:var(--band-h);color:var(--ink);
  background-color:var(--chrome2);background-image:var(--halo-canvas),var(--field-3)}
.pg-field>.pg-wrap{position:relative;z-index:var(--z-content);width:100%}
.pg-field::before,.pg-field::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.pg-field::before{background-image:var(--field-2);animation:fieldB var(--field-t2) linear infinite}
.pg-field::after{background-image:var(--field-1);animation:fieldA var(--field-t1) linear infinite}
/* THE MASTHEAD, AFTER THE 2026-09-13 REVERT.
   The founder's remark that the tokens are boring was read that morning as licence for paint, and the answer shipped a
   glass panel of labelled badges inside the band, gradient text on the headline, a shadow under every card, a blur, drawn
   ticks, --w-heavy on UI text and --tr-tight where the scale declares --tr-snug. Six of those break a line of this file's
   own doctrine, one of them re-opening a defect closed on 2026-09-11, and the band height was then raised from eight
   rhythms to nine to make room for the panel, which is the standard being bent to fit the decoration. All of it is out.
   docs/DESIGN_MATH.md section 6b lists each violation against the line that forbids it.
   The sheet already said what the answer is, on 2026-09-07, forty lines above: "The founder's complaint that the headings
   read boring is answered by measure and rhythm below, not by paint." So: one lever, the SCALE. The headline moves from a
   legacy fluid clamp to the derived display step (n = 9, 46px on a 56px box, on the grid), flat, in the one accent, at
   --w-bold and --tr-snug exactly as section 7 assigns them, closed by the cyan hairline that was always there, over the
   field and the halo that were always there. On a phone it is step 6. Nothing else on the band changed. */
/* The brand's own organisation line. Chrome ink, not another gold: --chrome-ink is the cool
   header foreground (#eaf6fb), so this line reads as chrome metal while the h1 keeps --gold2.
   Founder 2026-09-16: electric striking chrome/white. Computed colour already was --chrome-ink
   at 11px; a step-up to --fs-step--2 wrapped the line and grew /AI/about's band to 521px.
   Colour stays --chrome-ink at full opacity, both themes, original --fs-step--3 / --lb-step--3
   box so --band-h is not raised. */
.pg-orgline{margin:0 0 var(--sp2);font-size:var(--fs-step--3);line-height:var(--lb-step--3);font-weight:var(--w-bold);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--chrome-ink);opacity:1}
.pg-field .pg-orgline{color:var(--chrome-ink);opacity:1;font-weight:var(--w-bold);
  letter-spacing:var(--tr-wide);font-size:var(--fs-step--3);line-height:var(--lb-step--3)}
.pg-band .pg-orgline{color:var(--chrome-ink);opacity:1}
body.light .pg-field .pg-orgline,body.light .pg-band .pg-orgline{color:var(--chrome-ink);opacity:1}
/* Not drawn below 640px. The line is 76 tracked characters and wraps to two or three lines on a phone, which the parity
   probe caught at once: four band heights on the phone viewport instead of one (576, 585, 593, 597), because a band with
   a declared height grows for whatever its content needs. Raising the height to absorb the wrap is the move reverted
   earlier today. Nothing is hidden from a phone reader: the colophon strip immediately below carries the same fact. */
@media(max-width:640px){.pg-orgline{display:none}}
.pg-field .pg-kicker{margin:0 0 var(--sp2)}
.pg-field .pg-h1{margin:0 0 var(--sp3);padding:0 0 var(--sp3);border-bottom:var(--bw-hair) solid var(--edge-cyan);
  font-size:var(--fs-step-9);line-height:var(--lbh-step-9);font-weight:var(--w-bold);letter-spacing:var(--tr-snug)}
.pg-field .pg-lede{margin:0;max-width:var(--measure)}
/* The colophon strip: who built the page and where its claims are checked, in its own band under the masthead, so it can
   neither cover the copy (it was an absolute box over the lede on small phones) nor stretch the band (as a flow child it
   grew it by a different amount on every page: the probe read fourteen heights on one viewport). It is a colophon, not a
   badge: the same object the footer's calling card is, one line of provenance and four links to pages that can be read. */
.pg-colophon-strip{background:var(--navy);border-top:var(--bw-hair) solid var(--line);border-bottom:var(--bw-hair) solid var(--line)}
.pg-colophon-strip>.pg-wrap{padding-top:var(--sp3);padding-bottom:var(--sp3)}
@media(max-width:896px){.pg-field .pg-h1{font-size:var(--fs-step-6);line-height:var(--lbh-step-6)}}
/* CARDS: declared tracks that collapse 896→2 and 640→1, parent rows recomputed, cards as subgrid
   so siblings share a top edge the way .pg-plans does. Track count is declared per list (cols-2/4/5);
   the default is three. .pg-cards.rows stays one column. */
.pg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);
  gap:var(--sp2);margin:var(--sp6) 0 0;padding:0;list-style:none}
.pg-cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-cards.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* FLAT, as it was before 2026-09-13. Section 6a: cards carry no shadow. Founder 2026-09-15: a cyan
   hairline and a perimeter strobe are the outlined "eyebrow" AI tell; cards are shaded boxes in the
   theme blue (--panel2) and a champagne gold wash (gold2 into --paper, not into the dark panel —
   that mix read as khaki). No border. Strobe stays on buttons and plans only. */
.pg-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;gap:var(--sp1);margin:0;padding:var(--sp3);background:var(--panel2);border:0;position:relative}
.pg-cards>.pg-card:nth-child(even){--ink:var(--paper-ink);--mut:var(--paper-mut);--faint:var(--paper-mut);
  --gold:var(--paper-gold);--gold2:var(--paper-gold);--line:var(--paper-line);--line2:var(--paper-line2);
  background:color-mix(in srgb,var(--gold2) 14%,var(--paper))}
.pg-card h3,.pg-card .pg-card-kicker{margin:0;font-size:var(--fs-step-1);line-height:var(--lbh-step-1);font-weight:var(--w-semi);color:var(--ink)}
/* Research context sits beside the report navigation without a separate callout. */
.pg-archive{display:flex;flex-wrap:wrap;gap:var(--sp3);max-width:var(--measure-wide);margin:0 0 var(--sp3);
  font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--mut)}
/* a figure card (the benchmarks page): the number in gold at step 4, the label under it, the same card object */
.pg-card.stat b{display:block;font-size:var(--fs-step-4);line-height:var(--lbh-step-4);font-weight:var(--w-bold);color:var(--gold2);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-snug)}
.pg-card p{margin:0;font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--ink)}
.pg-card .pg-card-links{display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp2);margin-top:var(--sp1);font-size:var(--fs-step--1);line-height:var(--lb-step--1)}
.pg-cards.rows{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
.pg-cards.rows .pg-card{grid-template-rows:none;grid-row:auto;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--sp4)}
.pg-cards.rows .pg-card>h3{grid-column:1;grid-row:1 / span 3}
.pg-cards.rows .pg-card>p,.pg-cards.rows .pg-card>.pg-card-links{grid-column:2}
@media(max-width:896px){
  .pg-cards,.pg-cards.cols-2,.pg-cards.cols-4,.pg-cards.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}
}
@media(max-width:640px){
  .pg-cards,.pg-cards.cols-2,.pg-cards.cols-4,.pg-cards.cols-5{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .pg-card{grid-row:auto;grid-template-rows:auto}
  .pg-cards.rows .pg-card{grid-template-columns:minmax(0,1fr)}
  .pg-cards.rows .pg-card>h3{grid-row:auto}
  .pg-cards.rows .pg-card>h3,.pg-cards.rows .pg-card>p,.pg-cards.rows .pg-card>.pg-card-links{grid-column:1}
}
/* the trust rail (elara_chat_space.TRUST_RAIL), at the foot of the masthead on the public pages: who builds Elara and
   where its claims are checked, in the small step, tracked like a label; the links carry the accent on hover only */
/* in its own strip under the band (receipt: docs/production-readiness/chrome_parity.json, the probe's own output: one band
   height per viewport with the colophon outside it, and no rail over the copy on any route) */
.pg-colophon-strip .pg-colophon{margin:0;display:flex;flex-direction:column;gap:var(--sp-half);font-size:var(--fs-step--2);line-height:var(--lb-step--2);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--mut)}
.pg-colophon-strip .pg-colophon a{color:var(--mut);text-decoration:none;border-bottom:var(--bw-hair) solid var(--edge-cyan)}
.pg-colophon-strip .pg-colophon a:hover,.pg-colophon-strip .pg-colophon a:focus-visible{color:var(--gold2)}
@media(max-width:640px){.pg-colophon-strip>.pg-wrap{padding-top:var(--sp2);padding-bottom:var(--sp2)}}
@keyframes fieldA{to{background-position:var(--sp4) 0}}
@keyframes fieldB{to{background-position:var(--sp8) 0}}
@media(prefers-reduced-motion:reduce){
  .pg-field::before,.pg-field::after{animation:none}
}
@media(max-width:640px){.pg-field{min-height:var(--band-h-m)}}
.pg-band>.pg-wrap{padding-top:0;padding-bottom:0}
.pg-band>.pg-wrap>:first-child{margin-top:0}
@media(max-width:640px){
  .pg-wrap{padding:var(--sp4) var(--sp2) var(--sp6)}
  .pg-h1{font-size:var(--fs-step-5);line-height:var(--lbh-step-5)}
  .pg-field .pg-h1{font-size:var(--fs-step-6);line-height:var(--lbh-step-6)}
  .pg-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-qa div{grid-template-columns:1fr;gap:var(--sp1)}
  /* the two .pg-bars overrides that lived here moved with their rules to elara_zero_drift.css */
  .pg-sub{margin-bottom:var(--sp4)}
}
@media(prefers-reduced-motion:reduce){.pg-sub a{transition:none}}
/* G10. Light theme remaps --gold to the paper ochre and leaves --gold2 bright, so a kicker or
   inline link that sits on the light page ground (not the chrome band) painted 1.76:1. The band
   already remaps ink/mut onto --chrome-* and keeps --gold2; only the light GROUND needs the
   darkened accent. Table body copy is --ink so it holds the small-text floor. */
body.light .pg a:not(.pg-button):not(.cta),body.light .pg-kicker{color:var(--gold)}
body.light .pg-field a:not(.pg-button):not(.cta){color:var(--gold2)}
body.light .pg-h1,body.light .pg-sub a[aria-current="page"]{color:var(--gold)}
body.light .pg-field .pg-kicker,body.light .pg-field .pg-h1{color:var(--gold2)}
body.light .pg-lede,body.light .pg-table{color:var(--ink)}
/* Last-wins after the light-theme gold remap: colour only, so gold/cyan cannot paint this line.
   Type size stays on .pg-orgline (--fs-step--3 / --lb-step--3); a later font-size here wrapped the
   76-character line and grew the band. */
.pg-field.pg-band>.pg-wrap>.pg-orgline,body.light .pg-field.pg-band>.pg-wrap>.pg-orgline{color:var(--chrome-ink);opacity:1;
  font-weight:var(--w-bold);letter-spacing:var(--tr-wide);font-size:var(--fs-step--3);line-height:var(--lb-step--3)}