/* ═══════════════════════════════════════════════════════════════════════════
   BRAND — THE ONE COPY. Every page links this before its own <style>.

   Shane, 2026-09-10: "we need a solid build so I want to test things out with
   it and be experimental ... I'm trying to build a premium brand and I think
   that starts with the website, the structure and the build."

   That sentence is why this file exists. Until now these values were pasted
   into four separate pages, and they had ALREADY drifted: index.html carried
   28 of them, the-reality.html 25, and the two legal pages 17 each. Nothing
   had gone visually wrong yet, because every name that appeared twice still
   happened to carry the same hex — but that is luck, not structure, and it is
   the exact shape of bug this machine has now hit four times: two lists naming
   one thing, one of them repaired, the other left stale and harder to see.

   The rule from here: A COLOUR, A RADIUS OR A WIDTH IS DEFINED HERE OR IT IS
   NOT A BRAND VALUE. Change a hex in this file and all four pages move at
   once, which is what makes experimenting cheap enough to actually do.

   Linked RELATIVELY (href="brand.css", not "/brand.css") on purpose, so the
   pages still render with their colours when opened straight off disk with
   file:// rather than through a server.

   ── WHERE THE VALUES CAME FROM ───────────────────────────────────────────
   The greens and the cream come straight out of the current site's :root.
   The silver is not invented either: the SK monogram is a two-metal mark,
   emerald and polished steel, so steel is the second brand metal and it is
   used where the greens would be shouting — data, rules, small labels.

   The dark end (#07160f, #0a1f16) is new. The old site had no dark, and a
   site that is cream from top to bottom cannot read as futuristic no matter
   what the type does. Dark is where the "instrument" half of this lives.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ⚠ ONE GREEN, AND IT IS THE SUIT. 2026-09-11.
     Shane: "I don't like that there's dark and light green on the site, I want
     a more uniform look — lean toward the green on the lighter side. Literally
     look at my suit and use that colour to guide the site."

     The site was running two greens that were not related: a near-black forest
     under every dark band (#0a2a1f, 10% light) with a neon mint laid on top of
     it (#5ce8a9, 76% saturated), and an emerald (#169365) on the cream bands
     that matched neither. The suit is ONE colour. Measured off
     img/Personal.jpg: cloth #243a3b, plaid lines #39605f — hue ~178,
     saturation ~22%, 18% light in the cloth and 30% in the lines.

     So every green below is that hue (turned to 172, a few degrees toward
     green, so it reads as green on a screen and not as petrol blue), at the
     suit's low saturation, and ONLY LIGHTNESS separates them. The bands sit at
     22%, between the cloth and its plaid, and the accent that was neon mint is
     the same hue at 77%. The hard-coded copies in the pages and SVGs were moved
     by the same rule, so nothing is left in the old family.

     Re-measured, every pairing that carries words: white on --void 10.2:1,
     --mint on --deep2 5.2:1, --dmute on --deep2 5.1:1, --steel on --deep 4.6:1,
     --em2 on cream 5.9:1, --forest on cream 13.5:1. */
  --forest:#133425; --green:#1f6544; --emerald:#299362; --em2:#1d7c50;
  --mint:#9decc7; --mint2:#58cf98; --sage:#cee8dc;
  /* The dark end was lifted twice on 2026-09-11. First to #0a2a1f, the
     measured mean of a reference hero he sent ("so it's not as dark"), and
     then again with the suit, above: from 10% light to 22%. It no longer
     holds B/G at .74 — that ratio was an emerald, and the suit is not one.

     ⚠ --forest STAYS INK-DARK EVEN THOUGH IT TOOK THE SUIT'S HUE. Thirty-seven
     of its forty-two uses are TEXT on cream, every h2.sec and card heading on
     both long pages. It moved in hue and saturation only, 11% light to 14%,
     so the headings still measure 13.5:1. It is ink, not a field. */
  --void:#234e3a; --deep:#275841; --deep2:#2c6449;
  /* ⚠ THE SUIT IS TEAL, NOT EMERALD, AND THAT IS MEASURED RATHER THAN GUESSED.
     Sampled off img/Personal.jpg, four boxes on the jacket and trousers, mean
     of every third pixel:
       chest L #2c4444   chest R #243837   sleeve #243939   trousers #1a2726
     Red 36, green 56, blue 56 — green and blue come out EQUAL, which is a
     petrol teal. --emerald is r22 g147 b101, green far above blue: a different
     family entirely. Standing one in front of the other is a large part of why
     the hero read as a man pasted onto somebody else's background.
     Shane, 2026-09-10: "make it match the color of my suit ... it looks a bit
     AI generated." These three are that colour, and the hero glow uses them. */
  --suit:#1e3e2f; --suit2:#254b39; --suitlo:#162b21;
  /* paper — carried over */
  --cream:#faf8f2; --paper:#fffefb; --pane:#ffffff; --mist:#f2efe6;
  --ink:#12261d; --muted:#5b7669;
  /* ⚠ --ink2 IS THE STEP THE PAGE KEPT INVENTING AND NEVER NAMED. 2026-09-12.
     Shane: "I feel like there's 10 different shades of green throughout the doc
     so maybe just audit and fix some areas."

     Counted: index.html was using seventy-one distinct greens, and only six of
     them were names out of this file. The largest cluster was quiet text on the
     near-white bands — #455f53, #52685e, #4e655a, #42564d, #3a5448, #30463c —
     six greens between 23% and 36% light, doing ONE job: the hero's sub-line,
     its micro-caption, its status label, the chip keys, the signature's small
     print. They existed because --muted is 41% light and --muted measures
     4.44:1 on the hero's #edf4f1, a hair UNDER AA, so every author who reached
     for it darkened it by eye and stopped somewhere different.
     So the darker step is a value now instead of a habit. 6.24:1 on the hero,
     8.1:1 on cream. --muted keeps everything it already carries on cream. */
  --ink2:#455f53;
  /* ⚠ --sil IS A LINE COLOUR AND WAS BEING USED AS A TEXT COLOUR. #aab5ab on
     white measures 2.1:1, which is less than half the 4.5:1 AA needs, and the
     current site uses it for the scroll cue, the stat labels and every piece of
     fine print — the disclaimers, in other words. The audit found it in five
     separate places. It stays for borders and dividers, where contrast rules do
     not apply, and --faint (4.98:1) takes over everywhere it was carrying
     words. */
  --sil:#a6bab1; --faint:#5f786c;
  --line:#e8e4d7; --emline:rgba(41,147,98,.22);
  /* on-dark. --dmute and --steel came UP with the bands: at their old values
     they measured 4.1:1 on the lifted --deep2, under AA for body text. */
  --dline:rgba(157,236,199,.16);
  /* ⚠ --dpaper IS --paper FOR THE DARK BANDS, AND THE OTHER HALF OF THE COUNT.
     2026-09-12, same audit as --ink2. The brightest thing on a dark band had
     no name here, so the page carried FOURTEEN near-white greens between 86%
     and 97% light: #eefdf6 (ten uses), #f2fdf8, #eef7f3, #f2f7f5, #edf4f1,
     #e6f2ec, #e4eee9, #e7efeb, #e6f0eb, #dde9e3, #d9e8e1, #d8e7e0, #d3e4dc,
     #d8ddd8. Side by side on a screen they are one colour; in the file they
     are fourteen decisions nobody can keep in step.
     Cool rather than warm on purpose: --paper is #fffefb and a warm white on a
     green band reads yellow, which is why nobody used it here in the first
     place. This is --sage's hue and saturation exactly, one step up in
     lightness, so the on-dark ladder is now --dpaper → --sage → --dmute →
     --steel and a reader can see which rung a thing is on. 7.4:1 on --deep. */
  --dpaper:#eaf6f0;
  --dmute:#bedacd;
  --steel:#b3c4bc;

  --rad:4px;                    /* sharp. pills read consumer, not instrument */

  /* ⚠ THE LEGAL PAGES OVERRIDE THIS TO 820px, IN THEIR OWN <style>. A privacy
     policy is one column of prose and 1240px of it is unreadable. The override
     lives with the page rather than here because it is a layout decision about
     that page, not a second brand width. */
  --maxw:1240px;

  /* ── MOTION. Two curves, and a page may not invent a third ────────────────
     ⚠ THESE ARE BRAND VALUES FOR THE SAME REASON THE GREENS ARE. They were
     pasted per-declaration before this, which is how index.html ended up with
     a reveal whose fade ran on `ease` and whose slide ran on a decelerating
     curve — 800ms where the element finished fading 300ms before it finished
     moving. Every page that links this file now gets the same two gestures.

     --ez   things ARRIVING, unprompted: a reveal, a rule drawing itself.
            easeOutQuart. Almost all of its time is spent decelerating, which
            is what makes an entry read as settling rather than as sliding.
     --ezu  things RESPONDING to the reader: a hover lift, a plus sign
            rotating. Quicker off rest, because a control that eases in slowly
            reads as lag. A shorthand that names no curve gets `ease`, which
            accelerates out of rest — the wrong half of the wrong gesture. */
  --ez:cubic-bezier(.16,.84,.44,1);
  --ezu:cubic-bezier(.2,.8,.3,1);
}

/* The reset was byte-identical in all four pages. It is not a brand value, but
   it is the floor every page stands on, so it lives with them. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}


/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURE — THE FIELD, THE RULE, THE ACT BAR

   Shane, 2026-09-11, with an 88-second screen recording of wodniack.dev:
   "Please analyse this video frame by frame and really try to replicate some
   of these features into the current site build — I just want really nice
   structure, without being too much."

   ── WHAT IS ACTUALLY IN THAT VIDEO ─────────────────────────────────────────
   Read frame by frame, the site has one idea repeated eleven times, and it is
   not the crimson and it is not the giant type. It is this:

     NO SECTION SITS ON A FLAT COLOUR. Every band has a DRAWN FIELD behind it.

   Frames 01-19, the hero: a field of vertical lines that bend around the
   cursor. Frames 21-27, the about and awards: the content is a narrow centred
   column and the background is a wireframe ROOM — two walls, a floor and a
   ceiling, all hairline grid, converging on a vanishing point somewhere
   behind the text. Frames 29-31: a flat hairline grid with a single object on
   it. Frame 44: a radial sunburst with the type laid on the floor plane going
   away from you. Frame 47, the last screen before the footer: the grid again,
   with one button on it.

   Four different fields, one grammar. That is the whole trick, and it is why
   a page with about six hundred words on it feels built rather than typed.

   The second device, frames 01 / 20 / 47: a thin horizontal TICKER RULE
   between bands — a run of hatch marks, a gap, a long dash, repeat. It is a
   ruler, and it does the same job a rule does in a printed book: it tells you
   a chapter ended without spending a heading on it.

   The third, frame 20: a full-bleed ACT BAR of enormous condensed caps with a
   ticker above and below it, dividing the page into acts.

   ── WHAT DELIBERATELY DID NOT COME ACROSS ──────────────────────────────────
   The colour (crimson on black), the scrambling micro-text in the header, the
   QR code, the repeating-letter wall, and the type lying on the floor in
   perspective. Those are a creative developer's portfolio being a portfolio.
   This page sells health insurance to people who are worried about money, and
   "without being too much" is the brief. The three devices above are the
   structural ones — they cost nothing, they read as engineering rather than
   decoration, and they are the reason that page does not feel long.

   ── WHY THIS IS IN brand.css AND NOT IN A PAGE ─────────────────────────────
   index.html and the-reality.html both need it. The header of this file says a
   value is defined here or it is not a brand value; the same argument applies
   to a structural device — a field that exists on one page and not the other
   is a page effect, and a page effect is the drift this file was written to
   stop. Both pages already link this before their own <style>, so a page can
   still override any of it.

   ── HOW IT IS BUILT ────────────────────────────────────────────────────────
   Every field is one absolutely-positioned decoration element at z-index:-1
   inside a section that isolates. That is not a new pattern here: .hmesh in
   the hero has done exactly this since the first build, and isolation is what
   makes -1 land ABOVE the section's own background and BELOW its text rather
   than disappearing behind the whole band.

   ⚠ THE FIELD IS ALWAYS A SIBLING OF THE CONTENT, NEVER AN ANCESTOR. The
   contrast half of .audit/audit-site.mjs walks UP the tree from each run of
   text looking for the first non-transparent background, so a field wrapped
   AROUND the content would change what every paragraph is measured against
   and could turn a passing page red for a decoration nobody can see at 8%.
   As a sibling it is invisible to that walk, which is correct: it is 8% ink
   on the band's own colour and it does not move the real contrast.

   ⚠ overflow:hidden IS ON .fldart AND NOT ON .fld. The room's planes are
   rotated in 3D and would otherwise stick out of the section and give a phone
   a sideways scroll — the one thing he named. But putting it on the SECTION
   would kill `position:sticky`, and #compare's table header is sticky. Clip
   the art, never the band.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* These are alpha values over an unknown paint rather than paints, which is
     why they sit here instead of up with the palette: --fldink is "9.5% of the
     grid green, whatever is behind it", and it has to stay that faint. At 15%
     the room stops being a field and starts being a diagram.

     ⚠ THE GRID GREEN IS NOT --green, AND IT IS THE ONE PLACE IN THIS FILE
     ALLOWED TO LEAVE HUE 172. Shane, 2026-09-11: "maybe give all of the grid
     lines a bit more green, add some green to the grid lines all through the
     doc." A hairline is 1px wide and painted at a tenth of an alpha, and
     saturation is the first thing that dies under both: --green (#2c5852, hue
     172, saturation 33%) composited at .085 over paper lands on rgb(237,241,240)
     — a grey with 4 points of green in it, which is exactly what he was looking
     at. rgb(38,112,94) is hue 165 at 49% saturation: the same family, pushed the
     few degrees toward green and the fifteen points of saturation it takes for
     any of it to survive the alpha. The same argument moved --mint (hue 164,
     42%) to rgb(150,227,201) (hue 160, 58%) for the dark bands. Nothing that
     carries WORDS moved — this is the field ink only, and the contrast half of
     .audit/audit-site.mjs never reads it. */
  --fldink:rgba(16,134,79,.095);      /* hairline on cream / paper */
  --fldink-d:rgba(137,240,192,.125);  /* hairline on the dark bands */
  --fldcell:104px;                    /* one grid square. 104 ≈ 1240/12 rounded */
  --tick:rgba(91,118,105,.5);         /* ticker marks on cream */
  --tick-d:rgba(157,236,199,.32);     /* ticker marks on dark */
}

/* ── the field ────────────────────────────────────────────────────────────── */
.fld{position:relative;isolation:isolate}
.fldart{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.on-dark .fldart,.fldart.on-dark{--fldink:var(--fldink-d)}

/* The grid square itself, shared by the flat field and by all four planes of
   the room, so a wall lines up with the floor it meets. */
.fldart-grid,.fldart-room>i{
  background-image:
    linear-gradient(to right,var(--fldink) 0 1px,transparent 1px),
    linear-gradient(to bottom,var(--fldink) 0 1px,transparent 1px);
  background-size:var(--fldcell) var(--fldcell);
}

/* FLAT GRID — frames 29-31 and 47. Masked to a dome so it is strongest where
   the section starts and gone by the time it reaches the next rule; a grid
   that runs edge to edge reads as a wireframe mockup rather than a field. */
.fldart-grid{
  -webkit-mask-image:radial-gradient(128% 108% at 50% -8%,#000 26%,transparent 90%);
          mask-image:radial-gradient(128% 108% at 50% -8%,#000 26%,transparent 90%);
}

/* THE FALLING LATTICE — the homepage's backdrop, top to bottom.

   Shane, 2026-09-11, 6:50 PM, on the seam between §08 and §09: "connect this
   white moving grid from top to bottom." The two grids that moved were the
   hero's and the question room's, a hero and a footer apart, with four
   different still backdrops and eleven bare bands in between. This is the one
   that runs the whole way, so a line leaving one band arrives in the next.

   ⚠ IT IS DELIBERATELY NOT MASKED, AND THAT CONTRADICTS THE NOTE ABOVE. The
   dome on .fldart-grid exists so a field dies before it reaches the next rule
   — which is the correct instinct for a field that appears in one section and
   is absent from the next, and is exactly wrong for a lattice whose whole job
   is to cross the seam. A dome here would fade the grid out at the bottom of
   every band and fade it back in at the top of the next, which is the effect
   he asked to have removed. .fldart-grid keeps its dome and its meaning for
   the other pages; this one runs edge to edge.

   ⚠ IT IS THE HERO'S TILES AND THE HERO'S SPEEDS, TO THE PIXEL AND TO THE
   SECOND. 76px fine and 304px coarse, one whole tile per loop at 5s and 10s,
   coarse twice the speed because the bigger mesh is the nearer one — the long
   note beside .m1/.m2 in index.html is the argument for every one of those
   numbers and none of it is re-litigated here. Same numbers means the hero's
   mesh IS the top of this lattice rather than a different grid above it, and
   same durations means every band is on the same frame of the same fall: they
   all start at load, and a loop that travels a whole tile ends where it began,
   so they cannot drift apart no matter how long the page is open.

   ⚠ EVERY TRANSLATION IS STILL AN EXACT MULTIPLE OF ITS OWN TILE, and so is
   every overhang: 304 is four fine tiles, 608 is two coarse ones. They fall,
   so the gap opens at the TOP and the overhang is what fills it.

   ⚠ AND --fldtop IS SET BY SCRIPT, WHICH IS THE ONLY PART THAT CANNOT BE CSS.
   A repeating background is counted from its own box, so nineteen fields would
   otherwise be nineteen lattices each starting at its own band's top edge and
   every seam would be a jog of up to 75px. --fldtop is minus the field's
   distance down the document, so the background steps back by exactly that and
   every field lands on ONE document-space lattice. Default 0px: with the
   script dead the grid is still there and still falls, it is just per-band
   again — the same failure the page had before, not a worse one. */
/* ⚠ AND IT IS HEAVIER INK THAN --fldink, WHICH IS THE POINT OF THE WHOLE
   CHANGE. At 8.5% the lattice is a texture you find if you look; the question
   room's white paper runs at 18% and 6.5% and is a grid you can SEE, and it is
   the one he pointed at. A lattice that is continuous but invisible for
   nineteen-twentieths of the page still reads as "the grid starts at the
   questions". The grid green rather than the room's black, because on cream and
   on the two act bars a neutral black hairline goes grey and stops belonging
   to the page — and since 2026-09-11 the room's own black went green with it,
   see the note on the grid green up in :root. */
/* ⚠ #faq .qfield IS ON THIS SELECTOR AND IT IS NOT A STRAY. Since 2026-09-12 the
   question room's doors paint THIS sheet rather than a lattice of their own, so
   the two ink values have to reach them — and they are not inside a .fldart-fall,
   they are inside the pinned stage. Declaring them a second time beside the doors
   is how the page ends up with two greens a month from now; the field inherits
   them from here instead. See the door rules in index.html. */
.fldart-fall,#faq .qfield{--fallink:rgba(16,134,79,.20);--fallink-fine:rgba(16,134,79,.095);
  --litink:rgba(16,134,79,.52);--litink-fine:rgba(16,134,79,.26)}
/* ⚠ THE DARK BANDS' ALPHA IS HIGHER THAN THE PAPER'S AND THAT IS ARITHMETIC,
   NOT TASTE. A greener mint is a DARKER mint (mean channel 193 against 200), so
   at the old .15 the lattice on --void came out measurably fainter than the one
   it replaced — .audit/probe-grid-green.mjs read the footer's ink dropping from
   25 levels to 16. It is the lift off the band that a reader sees, so the alpha
   carries the green back up rather than the page quietly losing a grid. */
/* ⚠ #faq.on-dark .qfield IS HERE FOR THE SAME REASON #faq .qfield IS ON THE RULE
   ABOVE, and it is the whole of what the 2026-09-12 colour flip needed from this
   file. The question section carries `on-dark` now, so its own .fldart-fall picks
   the mint inks up from the first selector here — but the doors are .qfield
   inside the pinned stage, not a .fldart-fall, so nothing was reaching them and
   they would have kept painting the paper-band ink on a dark band. Declaring the
   four values a third time next to the doors is exactly what that note warns
   against; one more selector token is the cheap answer. It matches on this page
   only, because #faq exists on this page only. */
.on-dark .fldart-fall,.fldart-fall.on-dark,#faq.on-dark .qfield{--fallink:rgba(137,240,192,.19);--fallink-fine:rgba(137,240,192,.09);
  --litink:rgba(137,240,192,.62);--litink-fine:rgba(137,240,192,.30)}
.fldart-fall::before,.fldart-fall::after{content:"";position:absolute;left:0;right:0;
  background-position-y:var(--fldtop,0px);will-change:transform}
.fldart-fall::before{top:-304px;bottom:0;
  background-image:linear-gradient(var(--fallink-fine) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fallink-fine) 1px,transparent 1px);
  background-size:76px 76px;animation:fldfall1 5s linear infinite}
.fldart-fall::after{top:-608px;bottom:0;
  background-image:linear-gradient(var(--fallink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fallink) 1px,transparent 1px);
  background-size:304px 304px;animation:fldfall2 10s linear infinite}
@keyframes fldfall1{to{transform:translate3d(0,76px,0)}}
@keyframes fldfall2{to{transform:translate3d(0,304px,0)}}

/* ── THE LIGHT ON THE SHEET ──────────────────────────────────────────────────
   Shane, 2026-09-12, with a fifteen-frame recording of the seam between the
   flight panel, the stat separation and the map: "these areas are disconnected
   - THE ENTIRE PAGE should be connected, it's own large moving grid."

   What the recording actually showed. #flbox carried a SECOND lattice of its
   own — .flcity .fc1 and .fcl, 96px square, background-position centred on a
   1642px box, sliding sideways on --px1 — standing on top of this one, which
   is 76/304, phase-locked to the document by --fldtop, and falling. Two cell
   sizes, two origins and two directions of travel, superimposed for the height
   of the panel and then stopping 76px into #where. That is what read as a join.
   .fc1 is deleted; the panel is on the page's sheet like every other band.

   The other half of it: the mouse light lit .fcl, so the grid only picked out
   INSIDE #flbox. Cross the separation and the light had nothing left to light.
   The pool lives here now, which means it lives in all nineteen fields, which
   means it is one pool crossing one sheet for the length of the page.

   ⚠ THE MASK IS ON THE PARENT AND THE FALL IS ON THE CHILDREN, and it has to be
   that way round. Put the mask on the falling pseudos and it falls with them:
   the pool slides down the wall at 15px a second and snaps back every 5s.
   .fldlit itself never moves, so the pool stays where the cursor put it while
   the lattice underneath runs through it.

   ⚠ AND THE CURSOR IS IN DOCUMENT SPACE, NOT IN THE FIELD'S. One pool, nineteen
   boxes: --dlx/--dly are set once on <html> as the pointer's position down the
   whole document, and each field converts to its own coordinates by adding its
   --fldtop, which is already minus its distance down the page. So every field
   is masked at the same point in the world and the pool crosses a seam without
   a step. A field the script has not reached has --fldtop 0 and the pool lands
   somewhere harmless rather than at 50% of every band at once.

   ⚠ THE INK IS 3.2x THE SHEET'S, AND THE FIRST CUT AT 1.5x WAS INVISIBLE. The
   arithmetic that produced it looked sound — .fcl ran at four times .fc1, this
   sheet is already twice as heavy as .fc1 was, so half the multiplier should
   land in the same place — and it was wrong, measured: at .29/.14 the pool
   lifted the LINES it is supposed to be lighting by 1.0 luma, which is nothing.
   What that arithmetic missed is that the mask is not solid. Its centre is .92
   and it is at .5 by 40% of the radius, so the average alpha over the visible
   pool is nearer a third than one, and a multiplier reasoned from the ink alone
   overstates the result by that factor every time.
   At .62/.30 the coarse line composites to 1-(1-.19)(1-.62) = .69 at the
   centre, which is a bright mint hairline — but a hairline is one pixel in
   seventy-six, and on the screen it reads as the drafting light it replaced.
   ⚠ MEASURE THIS ON THE LINES, NOT ON THE BOX. The mean luma of a 200px box at
   the pool moves by about half a level either way, because 97% of that box is
   wall. .audit/probe-one-lit-sheet.mjs checks geometry for exactly that reason;
   if you are re-tuning the alpha, shoot it and look at it.

   ⚠ IT IS A REAL ELEMENT AND THE SCRIPT INSERTS IT. .fldart-fall has spent both
   its pseudos on the two meshes, so the pool needs a box of its own, and adding
   <i class="fldlit"> to nineteen markup sites is nineteen places to forget one.
   The script at the foot of index.html appends it to every field it finds, in
   the same pass that pins the fall. With JS off there is no pool, which is
   correct: there is no pointer either. */
.fldlit{position:absolute;inset:0;display:block;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
  -webkit-mask-image:radial-gradient(circle var(--litr,250px) at var(--dlx,-9999px) calc(var(--dly,-9999px) + var(--fldtop,0px)),
    rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 74%);
          mask-image:radial-gradient(circle var(--litr,250px) at var(--dlx,-9999px) calc(var(--dly,-9999px) + var(--fldtop,0px)),
    rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 74%)}
html.fldlit-on .fldlit{opacity:1}
.fldlit::before,.fldlit::after{content:"";position:absolute;left:0;right:0;
  background-position-y:var(--fldtop,0px);will-change:transform}
.fldlit::before{top:-304px;bottom:0;
  background-image:linear-gradient(var(--litink-fine) 1px,transparent 1px),
                   linear-gradient(90deg,var(--litink-fine) 1px,transparent 1px);
  background-size:76px 76px;animation:fldfall1 5s linear infinite}
.fldlit::after{top:-608px;bottom:0;
  background-image:linear-gradient(var(--litink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--litink) 1px,transparent 1px);
  background-size:304px 304px;animation:fldfall2 10s linear infinite}
/* nothing to light with no pointer, and nothing that chases under reduced
   motion — the sheet itself keeps falling in both cases, only the pool goes. */
@media(hover:none),(pointer:coarse){.fldlit{display:none}}
@media(prefers-reduced-motion:reduce){.fldlit{display:none}}
@media print{.fldlit{display:none}}

/* THE ROOM — frames 21-27, and the one device worth stealing whole.
   Four planes of the same grid, hinged on the four edges of the section and
   rotated away from the reader, so the section becomes a corridor with the
   text standing in the middle of it. The walls are wider than the floor and
   ceiling on purpose: a reader's eye reads convergence at the sides and reads
   the top and bottom as perspective only if they are shallow. */
.fldart-room{perspective:820px;perspective-origin:50% 46%}
.fldart-room>i{position:absolute;display:block;backface-visibility:hidden}
.fldart-room>i:nth-child(1){left:0;top:-45%;height:190%;width:32%;
  transform-origin:left center;transform:rotateY(58deg)}
.fldart-room>i:nth-child(2){right:0;top:-45%;height:190%;width:32%;
  transform-origin:right center;transform:rotateY(-58deg)}
.fldart-room>i:nth-child(3){left:-45%;width:190%;bottom:0;height:21%;
  transform-origin:center bottom;transform:rotateX(66deg)}
.fldart-room>i:nth-child(4){left:-45%;width:190%;top:0;height:21%;
  transform-origin:center top;transform:rotateX(-66deg)}
/* The vanishing point. Without it the four planes read as four planes; with it
   they read as one space with a distance in it. */
.fldart-room::after{content:"";position:absolute;inset:0;
  background:radial-gradient(42% 38% at 50% 46%,rgba(41,147,98,.055),transparent 72%)}
.on-dark .fldart-room::after{background:radial-gradient(46% 40% at 50% 46%,rgba(157,236,199,.06),transparent 72%)}

/* SUNBURST — frame 44. A conic gradient whose stops are a sixth of a degree
   wide, so the rays are hairlines at the centre and widen as they go out,
   which is what a real vanishing point does. Masked to a ring so the middle
   stays clean enough to put a heading on. */
.fldart-rays{
  background-image:repeating-conic-gradient(from 0deg at 50% 24%,
    var(--fldink) 0 .17deg,transparent .17deg 4deg);
  -webkit-mask-image:radial-gradient(78% 96% at 50% 24%,transparent 9%,#000 36%,#000 72%,transparent 100%);
          mask-image:radial-gradient(78% 96% at 50% 24%,transparent 9%,#000 36%,#000 72%,transparent 100%);
}

/* THE CITY IS A FIFTH FIELD AND IT IS DELIBERATELY NOT DEFINED HERE.

   Shane, 2026-09-11: "I want more graphics too in certain areas like embedded
   city background low opacity in the background at certain areas — more depth
   than just the words." img/tampa-skyline.svg is the answer to that line.

   ⚠ IT IS `.cityart`, IT LIVES IN index.html, AND IT IS SOMEBODY ELSE'S WORK.
   A second session was mid-build in index.html while this file was being
   written — the two dark bands gained `<div class="cityart">` hooks, a glow on
   ::before, the skyline on ::after at 8.5%, a `citydrift` animation with a
   reduced-motion override, and a scaleX(-1) so the same drawing does not read
   as the same picture twice. That is more careful than a second copy here
   would have been, and index.html's <style> loads AFTER this file, so a
   .cityart rule here could only ever have painted a SECOND skyline on top of
   theirs at a different opacity. Two mechanisms for one background is the
   exact shape of bug the header of this file exists to prevent.

   So: the city is a field in the same family as the four below, it is used the
   same way (a decoration sibling, aria-hidden, behind the text), and it is
   READ FROM index.html. If it ever needs to appear on a second page, move it
   down here and delete it from there — do not paste it. */

/* ── the ticker rule ──────────────────────────────────────────────────────────
   Frames 01, 20 and 47. Two layers: short hatch ticks in 188px bands, and a
   long dash in the 112px gaps between them. Both are masked rather than
   knocked out with an opaque colour, because a knockout would have to know the
   band's background and this rule is used on cream and on deep. */
.trule{position:relative;height:26px;overflow:hidden;background:var(--cream);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trule.on-dark{background:var(--deep);border-top-color:var(--dline);border-bottom-color:var(--dline);--tick:var(--tick-d)}
.trule::before,.trule::after{content:"";position:absolute;inset:0}
.trule::before{
  background-image:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 5px);
  background-size:100% 9px;background-repeat:no-repeat;background-position:0 50%;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 188px,transparent 188px 300px);
          mask-image:repeating-linear-gradient(90deg,#000 0 188px,transparent 188px 300px)}
.trule::after{
  background-image:repeating-linear-gradient(90deg,var(--tick) 0 62px,transparent 62px 74px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 50%;
  -webkit-mask-image:repeating-linear-gradient(90deg,transparent 0 196px,#000 196px 292px);
          mask-image:repeating-linear-gradient(90deg,transparent 0 196px,#000 196px 292px)}
@media(max-width:760px){.trule{height:20px}}

/* ── the act bar ──────────────────────────────────────────────────────────────
   Frame 20: a full-bleed band of enormous condensed caps with a ticker above
   and below, turning a long page into a page with acts in it.

   ⚠ THE HEADLINE ONLY REFUSES TO WRAP ABOVE 760px. Nowrap at 8vw on a 390px
   phone is how a band like this gives you the sideways scroll he specifically
   asked never to happen — "I don't want people scrolling on mobile left to
   right, it looks less professional". Below 760 it wraps and drops a size, and
   .audit/probe-mobile-overflow.mjs is what proves it. */
.actbar{position:relative;overflow:hidden;background:var(--forest);isolation:isolate}
.actbar .ab{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(12px,2.2vw,28px);padding:clamp(26px,4.4vw,52px) 26px;text-align:center}
.actbar .abn{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mint);flex:none;font-weight:500}
.actbar h2{font-family:'Archivo',system-ui,sans-serif;font-weight:800;color:#fff;
  font-size:clamp(1.75rem,7.4vw,5rem);letter-spacing:-.045em;line-height:.94;
  text-transform:uppercase;margin:0;max-width:none}
@media(min-width:761px){.actbar .ab{flex-wrap:nowrap}.actbar h2{white-space:nowrap}}
/* The field goes behind the act bar too, or it is the one flat band left on a
   page whose whole argument is that nothing is flat. */
.actbar .fldart-grid{
  -webkit-mask-image:radial-gradient(90% 150% at 50% 50%,#000 18%,transparent 82%);
          mask-image:radial-gradient(90% 150% at 50% 50%,#000 18%,transparent 82%)}

/* -- the licence badge ----------------------------------------------------
   The National Producer Number, printed under his name and title.

   It used to live at .74rem inside the first disclaimer sentence, between a
   comma and a full stop, which is exactly where a number goes when you would
   rather nobody read it. It is the opposite: it is the one string on the page
   a stranger can take to their state's department of insurance and check that
   the person asking for their health history is who he says he is.

   ⚠ IT IS NOT A BAR ANY MORE, AND THE CLASS NAME CHANGED WITH IT. It shipped
   on 2026-09-11 as .npnbar: a bordered, mint-tinted box on its own row that
   ran the full width of the footer, which on a 2694px monitor is 2566px of
   box around eight digits. Shane, 2026-09-12, with a photograph of the
   footer: "move the NPN below my title Shane Kaibney coverage consultant --
   it doesn't need that huge bar across the screen". So the credential now
   sits directly under the name lockup it belongs to, as a label over the
   digits, and the row it used to occupy is gone -- which is the point, since
   the run of edits it belongs to is all about the footer being shorter.
   If you are grepping for .npnbar and finding nothing, this is where it went.

   Lives in brand.css and not in nine <style> blocks because all nine pages
   link this file and all nine carry the same footer disclaimer. Two footers
   use it -- index's four-column .fgrid footer on #244844, and the .frow
   footer the sub-pages share on --void -- so the fill is a translucent mint
   rather than a colour, and sits on both.

   The number is 'JetBrains Mono' for the same reason the whole instrument
   language is: digits you can read one at a time, with a zero that is not an
   O. user-select:all is the quiet part -- one click on a desktop, one tap and
   hold on a phone, takes the eight digits and not the label with them. */
.npnline{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.npn-k{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-weight:500;
  font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
/* still bigger than the disclaimer it came out of, and still the only thing in
   the block you can click once and have the whole of. Fixed rather than a
   clamp: in a footer column it has no width to grow into. */
.npn-v{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-weight:600;
  font-size:.95rem;letter-spacing:.15em;color:#fff;
  -webkit-user-select:all;user-select:all}


/* ═══ THE LOCKUP ═════════════════════════════════════════════════════════════
   Shane, 2026-09-12, with "Shane Kaibney Header Variation.png": "You can make
   this the header or follow suit and just make it the white version, whatever
   you recommend."

   ── WHAT THE ART IS ────────────────────────────────────────────────────────
   A 1983 x 793 lockup on black: the SK phoenix coin, then SHANE KAIBNEY in
   tracked serif caps with SHANE in polished silver and KAIBNEY in emerald, a
   hairline rule with a small diamond in the middle of it, and PRIVATE COVERAGE
   CONSULTANT tracked out underneath.

   ── AND WHY IT IS NOT USED AS A PICTURE ────────────────────────────────────
   RECOMMENDED, AND THIS IS THE RECOMMENDATION: the art is rebuilt here in live
   type, and only the coin is kept as pixels. Three reasons, all of them things
   that only show up once it is on the bar:
     - the header is 84px tall. A 1983px lockup scaled into it puts the tagline
       at about five pixels. It is not small, it is gone.
     - it cannot reflow. At 390px the whole lockup has to become the coin and
       two shorter lines, which a raster cannot do and type does for free.
     - it is 1.1 MB, on every page, above the fold.
   Live type is also selectable, searchable and readable aloud, and the name of
   the business is the one string on the page that should be all three.

   ── THE COIN IS THE SAME MARK, CUT PROPERLY ────────────────────────────────
   ⚠ img/sk-mark.png REPLACES img/sk-256.png, AND IT IS THE FIX FOR THE WHITE
   DISC. sk-256.png is RGB with no alpha, so laid on a dark bar it shows as a
   white square; every page worked around that by drawing a white circular chip
   behind it and calling the chip a design decision. The new file is the same
   phoenix pulled off the lockup's black field with straight alpha
   (.audit/tmp-cut-the-mark.mjs), so it sits on the green with nothing behind
   it. The chip is gone, not restyled.

   ── THE METALS ARE MEASURED, NOT PICKED ────────────────────────────────────
   Sampled off the wordmark in the art, median of the letter bodies with the
   black field and the specular highlights thrown out:
     SHANE    #9b9b9a   a NEUTRAL silver, no green in it
     KAIBNEY  #298f6d   rgb(41,143,109)
   That emerald is --emerald (#299362, rgb 41,147,98) to within four points of
   green and eleven of blue. The suit green the site was rebuilt around on
   2026-09-11 and the green in his logo are the same colour, which is worth
   knowing and is why KAIBNEY below is painted in the brand value rather than
   in a hex copied out of a PNG.

   Both words are a GRADIENT clipped to the glyphs, because a metal is a
   gradient — flat fills are what made the old wordmark read as type next to a
   logo instead of as part of it. ⚠ THE PLAIN `color` ABOVE THE @supports IS
   LOAD-BEARING: -webkit-text-fill-color:transparent with no gradient behind it
   is an invisible company name, so the flat colour is the floor and the
   gradient is the enhancement. */
.lk{display:flex;align-items:center;gap:14px;flex:none;text-decoration:none;min-width:0}
/* a mint glow, not an emerald one: an emerald halo on a --void bar is the bar
   again and does nothing. This is the light the art has around the coin. */
.lk .lkmark{width:52px;height:52px;flex:none;max-width:none;
  filter:drop-shadow(0 1px 9px rgba(157,236,199,.30))}
.lkwd{display:block;min-width:0}

.lknm{display:block;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:600;font-size:1.28rem;line-height:1;letter-spacing:.17em;
  text-transform:uppercase;white-space:nowrap}
.lknm i,.lknm b{font-style:normal;font-weight:600;color:#e3eae6}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lknm i,.lknm b{-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  /* ⚠ THE METALS ARE LIFTED OFF THE ART'S OWN VALUES, AND THEY HAD TO BE. The
     lockup is drawn on BLACK, where #9b9b9a silver and #298f6d emerald both
     have the whole tonal range beneath them to fall into. This bar is --void
     (#234e3a) — a MID-dark green — so a gradient copied literally off the art
     runs its bottom third UNDER the background it is standing on: the first
     build ended KAIBNEY at #125c42, which is darker than the bar, and the last
     two letters read as a smudge.
     So the three steps keep the art's shape — highlight, body, shadow — but the
     whole ramp is moved up until the darkest stop still clears the bar. Read on
     --void: the silver's body measures about 8.4:1 and the emerald's about
     6.5:1, where the literal copies were 3.1:1 and 1.4:1.
     ⚠ IF THE HEADER EVER GOES BLACK, PUT THE ART'S OWN VALUES BACK. This ramp
     is correct for this bar, not in general. */
  .lknm i{background-image:linear-gradient(178deg,#ffffff 6%,#e8eeeb 48%,var(--steel) 100%)}
  .lknm b{background-image:linear-gradient(178deg,#c9f7e2 6%,#7fe3b4 50%,#3aa878 100%)}
}

/* the hairline and its diamond. The rule is a flex line so it fills whatever
   the name above it happens to measure, and the diamond is one rotated square
   rather than a glyph, so it cannot go missing with a font. */
.lkrule{display:flex;align-items:center;gap:7px;margin:6px 0 5px}
.lkrule::before,.lkrule::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(157,236,199,.5),transparent)}
.lkrule i{width:5px;height:5px;flex:none;transform:rotate(45deg);
  background:var(--mint);opacity:.85}

.lktag{display:block;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:400;font-size:.5rem;letter-spacing:.23em;text-transform:uppercase;
  color:var(--dmute);white-space:nowrap;line-height:1}

/* ── on paper ───────────────────────────────────────────────────────────────
   "the white version". Silver goes DOWN to a graphite (a highlight-first
   gradient is invisible on cream), the rule loses the mint, and the tagline
   takes --faint, which is the 4.98:1 value.

   ⚠ AND IT WEARS A DIFFERENT MARK FILE, WHICH filter:none CANNOT DO FOR IT.
   This block used to end "Nothing on the site wears this yet" and it was true
   until 2026-09-12, when index.html took it — index is the site's one light
   bar, `header.light` at rgba(255,254,251,.55), and the other eleven pages are
   on --void. The moment it was worn the gap showed: img/sk-mark.png is the
   emblem keyed off the artwork's BLACK field, so it is a LIGHT mark by
   construction — mint and near-white — and on that bar it was a ghost. Taking
   the glow off it does not make it dark; nothing in CSS can.
   img/sk-mark-ink.png is the same emblem un-matted from img/sk.png's WHITE
   field instead (.audit/cut-the-mark-on-paper.mjs), so it is bottle green and
   graphite. The rule below is only the glow; the FILE is the fix, and any new
   light surface has to ask for sk-mark-ink.png in its markup. */
.lk-on-paper .lknm i{color:#35423c}
.lk-on-paper .lknm b{color:var(--em2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lk-on-paper .lknm i{background-image:linear-gradient(178deg,#5c6b64 6%,#35423c 54%,#1d2620 100%)}
  /* ⚠ THE RAMP STARTS AT --em2, NOT ABOVE IT. It used to open on #2fa670,
     which is 3.07:1 on the homepage's bar and 2.76:1 on the private pages'
     #edf4f1 hero — the top third of the word was the part he could not read.
     --em2 is 4.71:1 on the darker of the two, so the gradient now runs from
     the lightest green that is legal down into the bottle green. */
  .lk-on-paper .lknm b{background-image:linear-gradient(178deg,var(--em2) 6%,#15613f 54%,#0f4c33 100%)}
}
.lk-on-paper .lkrule::before,.lk-on-paper .lkrule::after{
  background:linear-gradient(90deg,transparent,rgba(29,124,80,.45),transparent)}
.lk-on-paper .lkrule i{background:var(--em2);opacity:.9}
/* ⚠ --ink2, NOT --faint, AND THE HERO IS WHY. --faint is the 4.98:1 value
   against --paper (#fffefb) and nothing wears this lockup on --paper. The five
   pages that wear it stand on a hero: #edf4f1 on the four private pages, where
   --faint measures 4.29:1 — four hundredths short of AA. --ink2 (#455f53) is an
   existing token, measures 6.24:1 there, and keeps headroom, which this needs:
   the heroes' ::before radials paint white over parts of that tint and a value
   that only just clears the line fails the day the tint moves. */
.lk-on-paper .lktag{color:var(--ink2)}
.lk-on-paper .lkmark{filter:none}

/* ── the small one ──────────────────────────────────────────────────────────
   Footers, the About panel, and anywhere the lockup is a signature rather than
   the masthead. Same three parts, two thirds the size. */
.lk-sm{gap:11px}
.lk-sm .lkmark{width:40px;height:40px}
.lk-sm .lknm{font-size:1.02rem;letter-spacing:.15em}
.lk-sm .lkrule{margin:5px 0 4px}
.lk-sm .lktag{font-size:.45rem;letter-spacing:.2em}

/* ── phones ─────────────────────────────────────────────────────────────────
   ⚠ THE TAGLINE IS THE FIRST THING THAT DOES NOT FIT, AND IT IS 27 CHARACTERS.
   At .5rem and .23em of tracking "PRIVATE COVERAGE CONSULTANT" measures about
   173px; a 390px bar has roughly 268px between the padding and the burger, and
   the coin and its gap take 66 of those. It fits, with nothing to spare, so the
   tracking comes in rather than the row being allowed to wrap — a wrapped
   tagline pushes the bar past 84px and the whole header grows. */
/* ⚠ AND .lk-sm HAS TO BE NAMED IN HERE, OR IT IS THE ONE LOCKUP THAT NEVER
   SHRINKS. `.lknm` alone is (0,1,0) and `.lk-sm .lknm` forty lines up is
   (0,2,0), so the small lockup beat the phone rules at every width no matter
   which came last in the file — the "small" one measured 249px on a 390px bar
   where the full one measured 214. Found by rolling the lockup onto the two
   legal pages on 2026-09-12: their bar went to 121px because the back-link
   beside it had 73px left and wrapped to three rows. So the .lk rules are
   raised to (0,2,0) to match, and .lk-sm is given its own phone step after
   them — same specificity, later in the block, which is what decides it. */
@media(max-width:520px){
  .lk{gap:11px}
  .lk .lkmark{width:44px;height:44px}
  .lk .lknm{font-size:1.06rem;letter-spacing:.13em}
  .lk .lktag{font-size:.44rem;letter-spacing:.13em}
  .lk .lkrule{margin:5px 0 4px}
  .lk-sm{gap:9px}
  .lk-sm .lkmark{width:38px;height:38px}
  .lk-sm .lknm{font-size:.92rem;letter-spacing:.11em}
  .lk-sm .lktag{font-size:.4rem;letter-spacing:.1em}
}
@media(max-width:360px){
  .lk .lktag{font-size:.4rem;letter-spacing:.08em}
}

/* ═══ THE FOLDER IN THE BAR ═══════════════════════════════════════════════════
   Shane, 2026-09-12: "instead of the golden term being a single page I think
   The golden term should be a folder in the top header that hosts the golden
   term, the long version and the plan walkthroughs etc so people can access
   them from anywhere."

   So the tab is still a link — to the golden term, as it was — and beside it
   a chevron opens a sheet of paper under the bar with the four longer reads
   on it: the golden term, the long version (the-reality.html), the walk
   through a whole plan (how-plans-work.html) and the four markets compared
   (compare.html). It is in the bar on index.html and on every page that wears
   the site header, which is what "from anywhere" means here. The markup and
   the order of the rows are .audit/apply-golden-term-folder.mjs's; the
   behaviour is fold.js.

   HOW IT OPENS — three ways, deliberately not one:
     · a mouse resting on the tab. Hover, and ONLY for a pointer that can
       hover (@media(hover:hover)): a tablet wide enough to show the bar taps
       the tab and goes to the golden term, as it always did, and taps the
       chevron for the sheet. Without that guard iOS would spend the first tap
       "hovering" and the second going, which reads as a dead link.
     · the chevron. fold.js toggles .open and keeps aria-expanded in step.
       ⚠ NOT ".foldbtn:focus-visible ~ .foldmenu", which the first cut had as
       a no-JS keyboard opener: Escape hands focus back to the chevron, the
       chevron is then :focus-visible, and the sheet it had just shut opens
       again. The keyboard opens it with Enter or Space on the chevron.
     · focus inside the sheet keeps it open; leaving it lets it close.

   ⚠ THE SHEET IS PAPER ON EVERY BAR. index.html's bar is light and the seven
   sub-pages' bars are --void, and the sheet is --paper with --ink on it on
   both, so it reads as one object — a sheet dropping from the bar — with the
   same contrast wherever it opens, rather than as a second bar in the bar's
   own colour. The one gold row is .conscard.gold's palette from index.html:
   gold is this site's word for "this is the one", and the golden term is.

   ⚠ .fmi.fmi IS SPECIFICITY, NOT A TYPO. Every page's own <style> paints the
   bar's links with `.hlinks a:not(.btn)` (0,2,1), and index.html with
   `header.light .links a:not(.btn)` (0,3,2), both AFTER this file. The rows
   on the sheet are <a>s inside that nav, so they inherit .82rem, .04em
   tracking, sage or muted ink, nowrap and the mint underline unless something
   heavier says otherwise. `.fold .foldcard .fmi.fmi` is (0,4,0) and wins on
   every page without this file having to know each page's selector.

   ⚠ HIDDEN BY visibility, NOT display, so it can fade. A probe that counts
   the bar's links must leave out `.foldmenu a` — the rows have a size while
   hidden — which probe-two-tabs and probe-site-header-on-the-pages both do. */
.fold{position:relative;display:flex;align-items:center;gap:1px;z-index:120}
.fold>a{display:inline-block}
.foldbtn{appearance:none;background:none;border:0;margin:0;padding:8px 5px;cursor:pointer;
  color:var(--sage);display:grid;place-items:center;line-height:0;border-radius:var(--rad);
  transition:color .25s,transform .25s var(--ez)}
header.light .foldbtn{color:var(--muted)}
.foldbtn svg{transition:transform .25s var(--ez)}
.foldbtn:hover,.fold.open .foldbtn{color:var(--mint)}
header.light .foldbtn:hover,header.light .fold.open .foldbtn{color:var(--em2)}
.fold.open .foldbtn svg,.foldbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.foldbtn:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
header.light .foldbtn:focus-visible{outline-color:var(--em2)}

/* the tab lights on every page in the folder, not only its own */
.hlinks .fold.here>a:not([aria-current]),.links .fold.here>a:not([aria-current]){color:var(--mint)}
.hlinks .fold.here>a:not([aria-current])::after,.links .fold.here>a:not([aria-current])::after{width:100%}

/* the sheet: a transparent hanger (--foldgap, set by fold.js to reach the
   bar's bottom edge; 24px without it) that keeps the mouse "inside" between
   the tab and the card, and the card itself. */
.foldmenu{position:absolute;top:100%;left:-14px;padding-top:var(--foldgap,24px);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ez),transform .22s var(--ez),visibility 0s linear .22s}
.fold.open .foldmenu,.foldmenu:focus-within{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s,0s,0s}
@media(hover:hover){
  .fold:hover .foldmenu{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s,0s,0s}
  .fold:hover .foldbtn svg{transform:rotate(180deg)}
}
.foldcard{width:348px;background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px;
  box-shadow:0 1px 0 rgba(18,38,29,.04),0 18px 48px rgba(18,38,29,.18),0 0 0 1px rgba(18,38,29,.03)}
.foldhead{margin:0;padding:8px 12px 6px;font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.fold .foldcard .fmi.fmi{display:block;padding:10px 12px;border-radius:var(--rad);
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:.9rem;letter-spacing:0;
  line-height:1.3;color:var(--ink);white-space:normal;text-decoration:none;transition:background .18s,color .18s}
.fold .foldcard .fmi.fmi::after{content:none}
.fold .foldcard .fmi small{display:block;margin-top:3px;font-family:'Inter',system-ui,sans-serif;
  font-weight:400;font-size:.76rem;letter-spacing:0;line-height:1.4;color:var(--muted)}
.fold .foldcard .fmi.fmi:hover,.fold .foldcard .fmi.fmi:focus-visible{background:var(--mist);color:var(--ink)}
.fold .foldcard .fmi.fmi:focus-visible{outline:2px solid var(--em2);outline-offset:-2px}
.fold .foldcard .fmi.fmi[aria-current="page"]{color:var(--em2)}
.fold .foldcard .fmi.fmi[aria-current="page"]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;
  width:2px;background:var(--em2);border-radius:1px}
.fold .foldcard .fmi.fmi{position:relative}
/* the one gold row — .conscard.gold's inks, so the sheet and the card agree */
.fold .foldcard .fmi.gold.gold{background:#fbf4e1;color:#2f2a18}
.fold .foldcard .fmi.gold.gold small{color:#5a5340}
.fold .foldcard .fmi.gold.gold:hover,.fold .foldcard .fmi.gold.gold:focus-visible{background:#f6ecce}
.fold .foldcard .fmi.gold.gold[aria-current="page"]{color:#7d5d14}
.fold .foldcard .fmi.gold.gold[aria-current="page"]::before{background:#b8942c}
.fold .foldcard .fmi.gold.gold+.fmi{margin-top:4px}
@media(prefers-reduced-motion:reduce){.foldmenu,.foldbtn svg{transition:none}}

/* the phone menu: the three other reads as a group under the tab, smaller
   and quieter, so the list still fits an 844px phone (the arithmetic is in
   apply-site-header-on-the-pages.mjs; three rows at 1rem cost about what
   the one "How plans work" row they replace did at 1.42rem). */
.mobile a.sub.sub{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--dmute);padding:4px 0}
.mobile a.sub.sub:first-of-type{margin-top:0}
.mobile a:not(.sub)+a.sub.sub{margin-top:-4px}
.mobile a.sub.sub+a:not(.sub){margin-top:6px}
.mobile a.sub.sub:active,.mobile a.sub.sub[aria-current="page"]{color:var(--mint)}

/* ═══ THE FOLDER'S GENERIC TITLE ═════════════════════════════════════════════
   Shane, 2026-09-12 16:07: "Give the folder that hosts the folders a generic
   title, something that represents all four docs" and "Order them: all four
   markets compared, plan details, the golden term, then the long version."
   Markup and the order: .audit/apply-folder-generic-title-and-order.mjs.

   Two consequences for the look:
     · the gold row is third now, not first, so it needs the same 4px of air
       above it that THE FOLDER IN THE BAR already gives it below — one card
       in the list, not a stripe stuck to the row above.
     · the phone menu's group has a label instead of a full-size parent row:
       .foldhead's mono caption, in the menu's muted ink, flex:none like the
       links so the column does not stretch it. */
.fold .foldcard .fmi+.fmi.gold.gold{margin-top:4px}
.mobile .subhead{flex:none;margin:8px 0 2px;font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dmute)}
.mobile .subhead+a.sub.sub{margin-top:0}