/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   brand.css — THE SHARED HOUSE STYLE.  Created 2026-09-01.

   ⭐ WHY THIS FILE EXISTS AT ALL.  Measured 2026-09-01: site/ held 135 HTML pages, 134 of them
   containing `border-left`, and NOT ONE shared stylesheet — every page carried its own inline
   <style> block.  So the look could not be changed without editing 135 files, and it never was.
   Anthony, twice: the white-rounded-card-with-a-coloured-left-bar is the most recognisable
   AI-generated pattern there is, and so is centring everything.  He is right.

   ⛔ THE TWO BANNED PATTERNS.  Do not reintroduce either, anywhere, for any reason:
      1. `border-left: Npx solid <colour>` on a white rounded card.  That IS the pattern.
      2. `text-align:center` on body content.  Centred headings + centred paragraphs + centred
         buttons is the other half of the tell.  The hero is LEFT-aligned here on purpose.
   ⛔ And no drop shadows on content blocks.  A shadow on every panel is what makes a page read as
      a dashboard of widgets rather than a document.  Shadows are for things that genuinely float
      (the autocomplete menu), nothing else.

   ⭐ WHAT REPLACES THEM — the ideas, so a future edit extends the system instead of fighting it:
      · SEPARATION BY RULE, NOT BY BOX.  Hairlines and a single gold rule do the work cards did.
      · AN ASYMMETRIC MEASURE.  Text sits in a ~660px column with a 190px rail beside it.  The
        rail carries statute cites, labels and figures.  Nothing on this site looked like that,
        and it is the signature of the house style.
      · A SYSTEM SERIF FOR BODY TEXT (Georgia).  ⚠️ This is NOT a webfont — Georgia ships on
        Windows, macOS, iOS and Android, so there is ZERO network cost and no FOUT.  The old
        inline blocks used the system SANS stack for body copy, which is why every page read like
        an app screen.  A serif makes a statutory reference page read as a document, which is what
        it is.  Headings stay sans for contrast.
      · PANELS GET A TOP RULE, never a left bar, and a radius of 2px, not 12px.

   PALETTE — unchanged, these are the brand's existing colours and must not drift:
      navy #0a2c4a · navy-d #06233b · Texas gold #ffd24a · green #0a7d33 · cream #fbfaf6
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0a2c4a; --navy-d:#06233b; --gold:#ffd24a; --green:#0a7d33; --cream:#fbfaf6;
  --ink:#182430; --soft:#5c6b7a; --rule:#ddd6c4; --hair:#e9e3d4; --link:#0a5ec2; --red:#a3301f;
  /* ⚠️ TWO DIFFERENT REDS, AND THEY ARE NOT INTERCHANGEABLE.
     --red is the WARNING red used by .panel.warn — it is deliberately muted so a caution box does
     not shout. --flag-red is the Texas flag's red, taken from the live site's own --red token
     (#BF0A30, site/index.html). Using the muted warning red in the flag makes the flag look wrong;
     using the flag red for warnings makes every caution box scream. Keep them apart. */
  --flag-red:#BF0A30; --navy-deep:#001A47;
  --sans:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --measure:660px; --rail:190px;
  /* ── LEGACY VARIABLE ALIASES, added 2026-09-01 ────────────────────────────────────────────────
     The older pages named the same colours differently. ⛔ These are ALIASES, not new colours —
     each points at a token defined above, so there is still ONE definition of each colour.
     🔴 Found by the CSS-variable check in restyle_audit.py: site/privacy.html uses `var(--muted)`,
     which this file calls `--soft`. Deleting that page's <style> would have left the variable
     resolving to nothing — no error, no missing class, just text in the wrong colour. That gap
     existed in the audit until the privacy pages were attempted. */
  --muted:#5c6b7a;        /* = --soft  */
  --line:#e9e3d4;         /* = --hair  */
  --paper:#fbfaf6;        /* = --cream */
  --navy-deep-alias:#001A47;

  /* ── THE STAR FIELD, as a reusable background ────────────────────────────────────────────────
     Anthony, 2026-09-01: *"every block of blue where there is text in should have silhouette
     stars big and small"*. Encoded as a data URI so ANY navy block picks it up from CSS alone —
     no extra markup per block, which matters because this stylesheet will be rolled out across
     134 other pages and none of them can be asked to add star elements by hand.
     ⛔ The star is the SITE'S OWN path, lifted from .big-star in site/index.html. Do not redraw
        it. Same authority rule as the flag.
     ⚠️ Deliberately NOT <use href="#id"> — an SVG loaded as a CSS background renders in a
        restricted static mode, and internal references are the first thing to behave differently
        between browsers. Each star is its own <path>, which cannot fail that way.
     ⚠️ '#' must be written %23 inside a data URI. A raw # truncates the URL and the background
        silently does not load — no error, no warning, just no stars.
     ⭐ Sizes run scale .55 to 3.2 on purpose: "big and small" is the brief, and a field of
        identically-sized stars reads as a pattern swatch rather than a sky. */
  --starfield:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 260'><g fill='%23ffffff'><path opacity='.10' transform='translate(487 8) scale(3.2)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.07' transform='translate(566 132) scale(1.8)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.06' transform='translate(428 96) scale(1.25)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.05' transform='translate(386 26) scale(.8)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.055' transform='translate(524 196) scale(.9)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.045' transform='translate(338 168) scale(.55)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.05' transform='translate(612 208) scale(.7)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.04' transform='translate(180 214) scale(1.0)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/></g><g fill='%23ffd24a'><path opacity='.15' transform='translate(596 46) scale(1.15)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/><path opacity='.11' transform='translate(452 178) scale(.75)' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/></g></svg>");
}

/* Any navy block with text in it gets the star field. Add the class, or extend this selector. */
.masthead::after, .alarm::after, .foot::after, .sell::after{content:"";position:absolute;inset:0;
  pointer-events:none;background:var(--starfield) no-repeat right top;background-size:auto 100%;}
/* ⚠️ Content must be lifted above the ::after layer or the stars paint OVER the words. */
.masthead .in, .alarm > *, .foot .in, .sell > *{position:relative;z-index:1;}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--cream);color:var(--ink);font-family:var(--serif);
     font-size:19px;line-height:1.72;}
a{color:var(--link);text-underline-offset:2px;}
a:hover{color:var(--navy);}
img{max-width:100%;height:auto;}

/* ── MASTHEAD ─────────────────────────────────────────────────────────────────────────────────
   Left-aligned, deliberately.  The gold hairline across the top is the brand mark; the old
   pages used a centred gold star, which every AI-generated landing page also uses.            */
/* ⭐ THE TEXAS FLAG.  ⛔ DO NOT DRAW A NEW ONE.  This reuses the LIVE SITE's own flag, and that
   is not a style preference — `make_ep01_overlay.py :: flag_image()` records THREE marks that
   were each called "the flag" and were each the nearest thing to hand rather than the
   authoritative one (a gold circle, the favicon, and a statutorily-correct 2:3 Lone Star Flag
   drawn from the Government Code).  Anthony had to point at the answer: *"look at our site and
   the flag"*.  So the proportions below are copied from site/index.html and are deliberately
   NOT the statutory ones — the site's stripe is a 22% hoist, and its .flag-mark is 44x30 with a
   36% hoist, where the statute says one third and 2:3.  Match the site, not the statute book. */
.flag-banner{display:flex;height:12px;}   /* thickened from 9px on Anthony's call, 2026-09-01 */
.flag-banner .b{width:22%;background:var(--navy-deep);}
.flag-banner .w{flex:1;background:#fff;}
.flag-banner .r{flex:1;background:var(--flag-red);}
.flag-mark{width:44px;height:30px;border-radius:5px;overflow:hidden;display:inline-flex;
           flex-shrink:0;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.flag-mark .blue{width:36%;background:var(--navy-deep);display:grid;place-items:center;
                 color:#fff;font-size:13px;line-height:1;}
.flag-mark .stripes{flex:1;display:flex;flex-direction:column;}
.flag-mark .stripes .w{flex:1;background:#fff;}
.flag-mark .stripes .r{flex:1;background:var(--flag-red);}

.masthead{background:var(--navy);color:#fff;position:relative;overflow:hidden;}
/* The masthead's stars come from the shared --starfield background above — they used to be a
   hand-placed inline <svg> in the page, which meant a second copy of the star to keep in sync
   and 14 lines of markup every page would have had to carry. */
.masthead .in{max-width:calc(var(--rail) + var(--measure) + 48px);margin:0 auto;
              padding:44px 24px 40px;}

/* ── THE HERO PHOTO ───────────────────────────────────────────────────────────────────────────
   Framed, with the site's own flag stripe closing the bottom edge — the same device
   site/index.html uses on .photo-frame, so a new page reads as part of the same site. */
.photo-frame{position:relative;margin:0;border-radius:3px;overflow:hidden;
             background:var(--navy-deep);line-height:0;}
.photo-frame img{width:100%;height:auto;display:block;aspect-ratio:1200/630;object-fit:cover;}
.photo-frame .flag-strip{position:absolute;left:0;right:0;bottom:0;display:flex;height:7px;}
.photo-frame .flag-strip .b{width:22%;background:var(--navy-deep);}
.photo-frame .flag-strip .w{flex:1;background:#fff;}
.photo-frame .flag-strip .r{flex:1;background:var(--flag-red);}
figure.hero{margin:0 0 8px;}
figure.hero figcaption{font-family:var(--sans);font-size:14px;color:var(--soft);
                       line-height:1.55;margin-top:10px;}
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;
         text-transform:uppercase;color:var(--gold);}
.masthead h1{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;
             font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin:14px 0 0;max-width:19ch;}
.standfirst{font-size:clamp(18px,2.2vw,21px);line-height:1.62;color:#d3e4f4;
            margin:20px 0 0;max-width:56ch;}
.standfirst b{color:#fff;}
.meta{font-family:var(--sans);font-size:13.5px;color:#8fb3d2;margin-top:22px;
      padding-top:16px;border-top:1px solid rgba(255,255,255,.16);}
.meta a{color:#cfe3f5;}

/* ── THE DOCUMENT GRID ───────────────────────────────────────────────────────────────────────
   Desktop: a rail then the measure.  Mobile: one column, rail content flowing above its
   paragraph as a chip row.  Every content block is a .doc.                                    */
/* ⭐ THE TOP PADDING IS DELIBERATE AND IT IS SET HERE, NOT ON THE HERO PHOTO.
   Anthony, 2026-09-01: the stopwatch photo was butted straight up against the navy masthead with
   no gap. Putting the space on .page instead of on figure.hero means EVERY page built on this
   stylesheet gets the same breathing room whether or not it opens with a photo — a margin on the
   figure alone would leave a page whose first element is a .doc block still touching the navy.
   Scales with the viewport so the gap does not look mean on a phone or lost on a desktop. */
.page{max-width:calc(var(--rail) + var(--measure) + 48px);margin:0 auto;
      padding:clamp(26px,4vw,42px) 24px 72px;}
.doc{display:grid;grid-template-columns:1fr;gap:6px 34px;align-items:start;}
.doc > .rail{grid-column:1;}
.doc > .col{grid-column:1;min-width:0;}
@media(min-width:900px){
  .doc{grid-template-columns:var(--rail) minmax(0,var(--measure));}
  .doc > .rail{grid-column:1;text-align:right;padding-top:.5em;}
  .doc > .col{grid-column:2;}
}

/* ── THE RAIL ─────────────────────────────────────────────────────────────────────────────── */
.rail{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--soft);}
.rail .label{display:block;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
             font-size:11.5px;color:var(--navy);}
.rail .note{display:block;margin-top:4px;}
/* A statute citation.  Not a pill, not a badge — a small monospaced mark, so it reads as a
   reference and not as a UI control. */
/* The citation underline is a 3px flag too. At this width it reads as a tiny stripe rather than
   three colours, which is the intent — it marks a cite without shouting. */
.cite{display:inline-block;font-family:ui-monospace,'SF Mono',Consolas,monospace;
      font-size:12.5px;font-weight:600;color:var(--navy);
      padding-bottom:3px;white-space:nowrap;position:relative;}
.cite::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);
  box-shadow:inset 0 0 0 1px rgba(10,44,74,.10);}
a.cite{text-decoration:none;}
a.cite:hover{background:#fff6d9;}
@media(max-width:899px){
  .rail{margin:14px 0 2px;}
  .rail .label{display:inline;margin-right:8px;}
  .rail .note{display:inline;}
}

/* ── TYPE ─────────────────────────────────────────────────────────────────────────────────── */
/* ── THE SECTION RULE IS THE FLAG ─────────────────────────────────────────────────────────────
   🔴 REPLACED THE GOLD RULE, 2026-09-01, ON ANTHONY'S CALL: *"get rid of those gold bars and use
   a red white and blue, just make it thicker — it reminds me of claude ai look"*.
   ⭐ HE IS RIGHT AND IT IS A REAL DEFECT, NOT A PREFERENCE. A tan-gold rule on a cream ground IS
   Anthropic's own palette, and "avoid the AI-generated look" was the brief for this whole
   stylesheet. Gold-on-cream was on the list of tells and it went in anyway.
   ⭐ The replacement is not a random colour — it is the site's own .flag-banner, at the same
   proportions (navy 22%, then white and red splitting the remainder), so the section rules, the
   masthead, the footer and the photo edge are all the same device at different weights.
   ⚠️ A gradient, not three elements, because a heading cannot hold child nodes without changing
   the markup on every page that uses this file.
   ⚠️ The inset hairline is load-bearing on a CREAM page: the white band is #fff against #fbfaf6,
   a difference of about 4 levels, so without an outline the bar reads as "navy, gap, red" —
   a broken rule rather than a flag. Same class of problem as the flag on a navy pill in
   make_ep01_overlay.py, where the hoist stripe dissolved into its own background. */
h2, .figure{position:relative;}
h2::before, .figure::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);
  box-shadow:inset 0 0 0 1px rgba(10,44,74,.10);}
h2{font-family:var(--sans);font-weight:800;letter-spacing:-.015em;color:var(--navy);
   font-size:clamp(24px,3.2vw,32px);line-height:1.18;margin:56px 0 6px;padding-top:22px;}
h2.plain{padding-top:0;margin-top:44px;}
h2.plain::before{display:none;}
h3{font-family:var(--sans);font-weight:750;color:var(--navy);font-size:20.5px;
   line-height:1.3;margin:32px 0 4px;}
h4{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:17px;margin:22px 0 2px;}
p{margin:14px 0;}
.lede{font-size:21px;line-height:1.62;color:#22303d;}
ul,ol{margin:14px 0 14px 22px;} li{margin:9px 0;padding-left:4px;}
ul{list-style:none;margin-left:0;}
ul li{position:relative;padding-left:20px;}
/* ⚠️ The bullet dash stays a SINGLE colour and is now navy, not gold. A 7px flag gradient would
   be ~1.5px of navy, 2.7 of white and 2.7 of red — unreadable mush, and it would put a flag on
   every line of every list. The device is reserved for structural rules. */
ul li:before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:2px;
             background:var(--navy-deep);}
ol{margin-left:24px;}
ol li::marker{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:.9em;}
strong,b{font-weight:700;color:#0d1c28;}
.small{font-size:15.5px;color:var(--soft);line-height:1.6;}
.sans{font-family:var(--sans);}
hr{border:0;border-top:1px solid var(--hair);margin:40px 0;}

/* ── PANELS.  Top rule, square-ish corners, no shadow, NO LEFT BAR. ─────────────────────────── */
.panel{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--navy);
       border-radius:2px;padding:20px 22px;margin:26px 0;}
.panel > :first-child{margin-top:0;} .panel > :last-child{margin-bottom:0;}
.panel .ph{font-family:var(--sans);font-weight:800;font-size:12.5px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--navy);margin-bottom:8px;}
.panel.warn{border-top-color:var(--red);background:#fffaf8;}
.panel.warn .ph{color:var(--red);}
.panel.good{border-top-color:var(--green);background:#f8fcf8;}
.panel.good .ph{color:#0a6b2c;}
/* Was a gold top rule. Now the flag stripe — this is "the Texas note", the panel for something
   important that is neither a warning nor a success. It stays visually distinct from the
   navy/red/green semantic panels without reaching for gold. */
.panel.gold{border-top:0;padding-top:23px;position:relative;background:#fffdf4;}
.panel.gold::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:6px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);
  box-shadow:inset 0 0 0 1px rgba(10,44,74,.10);}
.panel.gold .ph{color:var(--navy);}

/* The one high-contrast device on the page.  Used ONCE, for the thing that can hurt somebody. */
/* On NAVY the white band of the flag reads clearly with no help, so this one is the full-strength
   version of the device — 8px, the thickest on the page, on the one block that can cost somebody
   money if they skim it. */
.alarm{background:var(--navy);color:#e8f1f9;border-radius:2px;padding:30px 26px 24px;
       margin:30px 0;position:relative;overflow:hidden;}
.alarm::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);}
.alarm .ph{font-family:var(--sans);font-weight:800;font-size:12.5px;letter-spacing:.12em;
           text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.alarm p{margin:10px 0;} .alarm > :last-child{margin-bottom:0;}
.alarm b{color:#fff;}
.alarm a{color:var(--gold);}

/* ── TABLES.  Ruled, not striped-and-boxed.  Tabular figures so columns line up. ────────────── */
.tw{overflow-x:auto;margin:24px 0;}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:16px;
      font-variant-numeric:tabular-nums;}
caption{text-align:left;font-family:var(--sans);font-size:13px;letter-spacing:.08em;
        text-transform:uppercase;font-weight:700;color:var(--soft);padding-bottom:10px;}
th,td{padding:12px 14px 12px 0;text-align:left;border-bottom:1px solid var(--hair);
      vertical-align:top;}
thead th{border-bottom:2px solid var(--navy);color:var(--navy);font-weight:800;
         font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
tbody th{font-weight:700;color:var(--navy);width:34%;}
td.num,th.num{text-align:right;padding-right:0;}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0;}
table.compare tbody th{width:30%;}
table.compare td{border-left:1px solid var(--hair);padding-left:14px;}

/* ── FIGURES pulled out of the prose.  Left-aligned, no card. ──────────────────────────────── */
.figure{padding-top:20px;margin:28px 0;}   /* rule drawn by the shared ::before above */
.figure .n{font-family:var(--sans);font-weight:800;font-size:clamp(32px,5vw,44px);
           line-height:1;color:var(--navy);letter-spacing:-.02em;
           font-variant-numeric:tabular-nums;}
.figure .cap{font-family:var(--sans);font-size:15px;color:var(--soft);margin-top:8px;
             max-width:44ch;}

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--hair);padding:4px 0;}
.faq details[open]{background:transparent;}
.faq summary{font-family:var(--sans);font-weight:700;font-size:17.5px;color:var(--navy);
             cursor:pointer;padding:14px 0;list-style:none;display:flex;gap:12px;
             align-items:baseline;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:before{content:"+";color:var(--gold);font-weight:800;font-size:20px;line-height:1;}
.faq details[open] summary:before{content:"\2013";}
.faq details > *:not(summary){margin-left:24px;}
.faq details > p:last-child{padding-bottom:14px;}

/* ── THE SELL ─────────────────────────────────────────────────────────────────────────────────
   The one commercial block on an otherwise free page: "exemptions are only half of it".
   Anthony, 2026-09-01: *"needs to be bolder in a box, because this is our sell"*.

   ⭐ IT IS THE LOUDEST THING ON THE PAGE ON PURPOSE, and it earns that by WHERE it sits: after
      the free job is finished, never before. `exemption-check.html` carries a standing comment
      saying the offer comes last — that ordering is what makes the page honest enough to hand to
      a library, a chamber or a newsroom, and a bolder box must not become an excuse to move it up.
   ⛔ EXEMPTIONS ARE FREE AND THE $39 IS FOR PROTESTS. Those are two different jobs and this block
      is where they are most likely to get blurred — the DM-bot scar (an 18-day live "$39
      exemption-only kit") started exactly as a price sitting too close to an exemption word.
      The fine print says so explicitly and must stay.
   ⚠️ Navy like .alarm, but a DIFFERENT component on purpose: .alarm is for something that can
      cost the reader money, this is an offer. A page should never use both to mean the same thing.  */
.sell{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 100%);color:#e8f1f9;
      border-radius:2px;padding:34px 30px 30px;margin:46px 0 0;position:relative;overflow:hidden;}
.sell::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;z-index:2;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);}
.sell > *{position:relative;z-index:1;}
.sell h3{font-family:var(--sans);color:var(--gold);font-size:clamp(23px,3.2vw,30px);
         font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0 0 10px;max-width:20ch;}
.sell p{font-size:17.5px;line-height:1.65;margin:12px 0;max-width:54ch;}
.sell b{color:#fff;}
.sell .brand-cta{display:inline-block;font-family:var(--sans);font-weight:800;font-size:18.5px;
  background:var(--gold);color:var(--navy-d);text-decoration:none;padding:16px 30px;
  border-radius:3px;margin-top:16px;}
.sell .brand-cta:hover{background:#ffc21f;color:var(--navy-d);}
.sell .brand-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.sell .fineprint{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:#a8c6e0;
                 margin-top:18px;padding-top:16px;max-width:60ch;
                 border-top:1px solid rgba(255,255,255,.18);}

/* ── CALL TO ACTION.  A rule and a link, not a rounded pill floating in the middle. ─────────── */
.cta{border-top:3px solid var(--navy);padding-top:20px;margin:44px 0 0;}
.cta h3{margin-top:0;}
.btn{display:inline-block;font-family:var(--sans);font-weight:800;font-size:17px;
     background:var(--green);color:#fff;text-decoration:none;padding:14px 26px;
     border-radius:3px;margin-top:6px;}
.btn:hover{background:#095e27;color:#fff;}
.btn.alt{background:var(--gold);color:var(--navy-d);}
.btn.alt:hover{background:#ffc21f;color:var(--navy-d);}
.free{font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.1em;
      text-transform:uppercase;color:#0a6b2c;}

/* ── SOURCES list — the citation apparatus, styled as one. ─────────────────────────────────── */
.sources{font-family:var(--sans);font-size:15px;line-height:1.6;}
.sources li{padding-left:0;} .sources li:before{display:none;}
.sources{margin-left:0;list-style:none;}
.sources li{border-bottom:1px solid var(--hair);padding:11px 0;}
.sources li:last-child{border-bottom:0;}

/* ── FOOTER ───────────────────────────────────────────────────────────────────────────────── */
/* The footer closes the page with the same 12px stripe the masthead opens it with, so the flag
   brackets the whole document top and bottom. */
.foot{background:var(--navy-d);color:#9fc0e0;position:relative;overflow:hidden;padding-top:12px;
      font-family:var(--sans);font-size:14.5px;line-height:1.8;}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);}
.foot .in{max-width:calc(var(--rail) + var(--measure) + 48px);margin:0 auto;padding:34px 24px;}
.foot a{color:#cfe3f5;}
.foot .brandname{color:#fff;font-weight:700;}
.disclaimer{font-family:var(--sans);font-size:14px;color:var(--soft);line-height:1.6;
            border-top:1px solid var(--hair);padding-top:18px;margin-top:44px;}

/* ── FOCUS ─────────────────────────────────────────────────────────────────────────────────────
   🔴 THE FOCUS RING WAS GOLD, WHICH IS 1.44:1 ON WHITE — invisible. Someone navigating by keyboard
   could not see where they were on the page. WCAG wants 3:1 for a focus indicator. Navy on white
   is 11.4:1; on the navy blocks it inverts to gold, which IS visible on that ground.
   ⛔ Never set `outline:none` without replacing it with something of equal or better contrast. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--navy); outline-offset:2px; border-radius:2px;}
.masthead a:focus-visible, .alarm a:focus-visible, .foot a:focus-visible,
.sell a:focus-visible, .sell .brand-cta:focus-visible{outline-color:var(--gold);}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   COMPATIBILITY LAYER — the old class names, redrawn in the new idiom.  Added 2026-09-01.

   ⭐ THIS IS WHAT MAKES THE 134-PAGE ROLLOUT CHEAP AND SAFE, and the reasoning is the whole point.
   `data/restyle_audit.py` measured every page: 133 of 134 would lose styling if their inline
   <style> were simply deleted, and the losses are CONCENTRATED — six class names account for
   almost all of it (.wrap 133 · .star 127 · .box 126 · .cta-btn 123 · .midcta 102 · .upd 69).

   ⛔ THE OBVIOUS MOVE — copy those six rules across from an old page — IS THE WRONG ONE. Those
   six classes ARE the old look: `.box` is the white rounded card with the coloured LEFT BAR, and
   `.star` is the centred ★★★ header. Porting them faithfully would carry the exact
   AI-generated design this stylesheet exists to remove, on 133 pages, permanently.

   ⭐ SO THE OLD NAMES ARE REDEFINED, NOT COPIED. A page keeps `class="box"` in its markup and
   renders as a modern top-rule panel. That means the rollout is: DELETE the inline <style>, ADD
   the brand.css link — and change no markup at all on 133 pages. Far less to get wrong than
   rewriting every page's HTML, and reversible in one line.

   ⚠️ CLASS COVERAGE IS NOT A RENDERED PAGE. Every rule below still has to be looked at on a real
   page before that page ships. The audit says "nothing loses its rules"; it cannot say "it looks
   right".
   ⚠️ NOTHING NEW SHOULD USE THESE NAMES. New pages use .page / .panel / .btn / .cta / .disclaimer.
   This block exists to carry 134 legacy pages across, and should shrink over time, never grow.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* .wrap was the old content container; .page is its replacement. */
.wrap{max-width:calc(var(--rail) + var(--measure) + 48px);margin:0 auto;
      padding:clamp(26px,4vw,42px) 24px 72px;}
.masthead .wrap,.foot .wrap{padding:0;max-width:none;}   /* nested inside a band: no double padding */

/* 🔴 .box IS THE BANNED PATTERN. Redefined as .panel: rule on TOP, 2px radius, no shadow, NO LEFT
   BAR. The variants keep their semantic colours so a warning still reads as a warning. */
.box{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--navy);
     border-left:0 !important;border-radius:2px;padding:20px 22px;margin:26px 0;}
.box > :first-child{margin-top:0;} .box > :last-child{margin-bottom:0;}
.box b{color:var(--navy);}
.box.warn{border-top-color:var(--red);background:#fffaf8;}
.box.good{border-top-color:var(--green);background:#f8fcf8;}
.box.gold{border-top-color:#d9a400;background:#fffdf4;}

/* 🔴 .star was the centred ★ ★ ★ in the header — the other half of the generated look. The
   masthead already carries the flag stripe and the star field, so this is retired outright
   rather than restyled. */
.star{display:none;}

/* The old buttons, in the new shape. */
.cta-btn,.act{display:inline-block;font-family:var(--sans);font-weight:800;font-size:17px;
  background:var(--green);color:#fff;text-decoration:none;padding:14px 26px;border-radius:3px;
  margin-top:6px;}
.cta-btn:hover,.act:hover{background:#095e27;color:#fff;}

/* .midcta was a centred navy block mid-article. Keep the emphasis, drop the centring. */
.midcta{background:var(--navy);color:#e8f1f9;border-radius:2px;padding:26px;margin:34px 0;
        text-align:left;position:relative;overflow:hidden;}
.midcta::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);}
.midcta > *{position:relative;z-index:1;}
.midcta a{display:inline-block;font-family:var(--sans);font-weight:800;background:var(--gold);
  color:var(--navy-d);text-decoration:none;padding:14px 28px;border-radius:3px;margin-top:12px;}
.midcta b{color:#fff;}

/* .upd was the small print at the foot of an article. */
.upd{font-family:var(--sans);font-size:14px;color:var(--soft);line-height:1.6;
     border-top:1px solid var(--hair);padding-top:18px;margin-top:44px;}

/* ── EDITORIAL PRIMITIVES the old pages use, added 2026-09-01 after a second audit pass ──────────
   ⭐ ONLY GENERIC THINGS BELONG HERE. These are components any article-shaped page needs — a
   numbered procedure, a small label, a standfirst, a dateline, a sources line. They unlock whole
   groups of pages at once because the site was already using the same names in all three languages.
   ⛔ WHAT DELIBERATELY STAYS OUT: `.cform*` (the contact form), `.ac-*` / `.addr-*` (the address
      widget), `.scroller`, `.copybtn` / `.copywrap`, and everything on the homepage. Those are page
      widgets, not house style. Pulling them in here would turn the shared stylesheet into a dumping
      ground and make it impossible to reason about — the exact thing that made 135 inline blocks
      unmaintainable in the first place. Those pages keep their own <style> and stay unconverted. */
.steps{counter-reset:step;list-style:none;margin:18px 0 18px 0;padding:0;}
.steps li{position:relative;padding-left:44px;margin:14px 0;}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:3px;background:var(--navy);color:var(--gold);
  font-family:var(--sans);font-weight:800;font-size:15px;display:flex;align-items:center;
  justify-content:center;}
.tag{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:#fff;
  border:1px solid var(--rule);border-radius:2px;padding:4px 10px;margin:0 6px 6px 0;}
.kicker{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);}
.lead,.intro{font-size:21px;line-height:1.62;color:#22303d;}
.muted{color:var(--soft);}
.dateline{font-family:var(--sans);font-size:13.5px;color:var(--soft);border-top:1px solid var(--hair);
  padding-top:12px;margin-top:8px;}
.callout,.finding{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--navy);
  border-left:0;border-radius:2px;padding:20px 22px;margin:26px 0;}
.callout > :first-child,.finding > :first-child{margin-top:0;}
.claims{margin:14px 0;}
.src{font-family:var(--sans);font-size:14.5px;color:var(--soft);}
.back{font-family:var(--sans);font-size:14.5px;}
/* .say — a quoted aside on the ARB and disaster pages ("what to actually say at the hearing").
   ⚠️ The old rule was a DASHED BLUE ROUNDED box, which is neither the house style nor a quotation.
   Redrawn as what it is: a quote, marked by a rule down its side and a serif italic. That side rule
   is NOT the banned left-bar card — the banned pattern is a filled rounded CARD whose only marker
   is a coloured bar; this is unfilled, square, and a recognised typographic convention for a quote. */
.say{background:transparent;border:0;border-left:3px solid var(--gold);border-radius:0;
     padding:4px 0 4px 20px;margin:20px 0;font-style:italic;color:#22303d;}
.say b,.say strong{font-style:normal;}
/* .stat — a pulled-out figure on the method pages. ⚠️ The old rule was a CENTRED navy rounded card
   with a giant gold number: centring body content is one of the two banned patterns, so this is
   redrawn as .figure already is — left-aligned, flag rule above, the number doing the work.
   🔴 Found by `restyle_apply.py --verify` AFTER the generator stopped emitting its own <style>:
   3 pages "LOST styling for: ['stat']". That is the check earning its place — the pages had been
   regenerated and looked fine in every other respect. */
.stat{background:transparent;border:0;border-radius:0;padding-top:14px;margin:28px 0;
      text-align:left;position:relative;}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);
  box-shadow:inset 0 0 0 1px rgba(10,44,74,.10);}
.stat b{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(32px,5vw,44px);
        line-height:1;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.stat span{display:block;font-family:var(--sans);font-size:15px;color:var(--soft);margin-top:8px;
           max-width:46ch;}

/* ── THE CONTACT PAGE ─────────────────────────────────────────────────────────────────────────
   ⚠️ `.cform` was a white rounded card with an 8px GREEN LEFT BAR — the banned pattern, on the one
   page where somebody types their details. Redrawn as a top-rule panel like everything else.
   ⛔ `.cform-hp` is a HONEYPOT: an off-screen field a spam bot fills and a human never sees. Its
      positioning is FUNCTIONAL, not decorative — if it ever becomes visible the form starts
      rejecting real people. Copied exactly, and it must never be "tidied". */
.cform{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--green);
       border-left:0;border-radius:2px;padding:20px 22px 24px;margin:26px 0;}
.cform > :first-child{margin-top:0;}
.cform-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.cform-msg{font-family:var(--sans);margin:14px 0 0;font-size:17px;font-weight:700;}
.cform-note{font-family:var(--sans);font-size:15px;color:var(--soft);margin:12px 0 0;}
.contact-row{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;background:#fff;
  border:1px solid var(--hair);border-radius:2px;padding:16px 18px;margin:12px 0;}
.who{font-family:var(--sans);font-weight:800;color:var(--navy);min-width:110px;}
.finelegal{font-family:var(--sans);font-size:14px;color:var(--soft);line-height:1.6;
           margin-top:34px;padding-top:16px;border-top:1px solid var(--hair);}

/* ── THE PRIVACY PAGES ────────────────────────────────────────────────────────────────────────
   A language switcher and a small "back" link in the header band, plus a bullet separator. */
/* .topbar — the slim navy band across the top of the privacy pages: brand, back link, language
   switcher. Given the flag stripe so it reads as the same family as .masthead and .foot. */
.topbar{background:var(--navy);color:#fff;padding:16px 24px 14px;position:relative;
        overflow:hidden;}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);}
.topbar .wrap{max-width:calc(var(--rail) + var(--measure) + 48px);margin:0 auto;padding:0;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1;}
.topbar a{color:#cfe3f5;}
.topbar a.back{margin-left:auto;font-family:var(--sans);font-size:14px;font-weight:600;}
.topbar a.back:hover{color:#fff;}
.brand{font-family:var(--sans);font-weight:800;color:#fff;}
.langs{display:flex;gap:6px;font-family:var(--sans);font-size:14px;}
.dot{color:var(--gold);}

/* .links — the 404 page's list of places to go instead. */
.links{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;}
.links li{padding-left:0;} .links li:before{display:none;}

/* 130 pages use a bare <header> / <footer> with no class. Give the elements the band treatment so
   the rollout does not have to touch their markup either. */
body > header:not(.masthead){background:var(--navy);color:#fff;padding:44px 24px 40px;
  position:relative;overflow:hidden;}
body > header:not(.masthead)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--starfield) no-repeat right top;background-size:auto 100%;}
body > header:not(.masthead) > *{position:relative;z-index:1;}
body > header:not(.masthead) h1{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(30px,4.6vw,46px);line-height:1.1;max-width:19ch;margin:14px 0 0;}
body > header:not(.masthead) p{font-size:clamp(18px,2.2vw,21px);color:#d3e4f4;max-width:56ch;
  margin:20px 0 0;}
body > footer:not(.foot){background:var(--navy-d);color:#9fc0e0;font-family:var(--sans);
  font-size:14.5px;line-height:1.8;padding:34px 24px;position:relative;overflow:hidden;}
body > footer:not(.foot)::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background:linear-gradient(to right,
    var(--navy-deep) 0 22%, #fff 22% 61%, var(--flag-red) 61% 100%);}
body > footer:not(.foot) > *{position:relative;z-index:1;}
body > footer:not(.foot) a{color:#cfe3f5;}

@media print{
  /* 🔴 THE COMPLIANCE LINES USED TO VANISH ON PAPER. Browsers drop background colours by default,
     so .sell and .foot printed near-white text on white — taking "exemptions are free, the $39 kit
     is for protesting a value" and "Not a law firm · DIY filing help only" with them. Anyone who
     printed a page got one with the disclaimers missing, which is the one thing on these pages
     that must never be optional. Everything below forces those blocks to ink. */
  body{background:#fff;font-size:11pt;}
  .masthead{background:#fff;color:#000;}
  .masthead h1,.standfirst,.standfirst b,.eyebrow,.meta,.meta a{color:#000;}
  .masthead::after,.alarm::after,.foot::after,.sell::after{display:none;}  /* stars cost ink, say nothing */
  .alarm,.sell,.foot{background:#fff;color:#000;border:1.5pt solid #000;}
  .alarm .ph,.sell h3,.sell b,.alarm b,.foot .brandname,.foot a,.sell p,.foot{color:#000;}
  .sell .fineprint{color:#000;border-top:1pt solid #000;}
  /* The flag stripe is three colours; in mono it becomes a grey smear. A single rule reads better. */
  h2::before,.figure::before,.cite::after,.alarm::before,.sell::before,.foot::before,
  .panel.gold::before{background:#000 !important;box-shadow:none !important;}
  .flag-banner,.flag-mark,.photo-frame .flag-strip{display:none;}
  .btn,.act,.chk,.ac{display:none;}          /* controls do nothing on paper */
  .panel,.figure,.doc{break-inside:avoid;}
  /* A printed page loses every href, so show them — but only for real destinations. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#000;word-break:break-all;}
  a[href^="#"]::after,a[href^="/"]::after{content:"";}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important;scroll-behavior:auto !important;}
}