/* ezelman-v33.css: the v33 system layer (24 Oct 2026). Loads after ezelman-mobile.css on every chrome page.
   Blocks: T tokens, A base and accessibility, R rhythm, Y type, C components, X exhibits, M motion, P print, Q phone.
   Fonts (block F) are not here: v33 already inlines the eight @font-face rules and the two metric fallbacks in every head.
   Rules: transform, opacity, clip-path and stroke-dashoffset are the only animated properties; hover motion is gated on
   (hover:hover) and (pointer:fine); every hidden state sits under html.js inside prefers-reduced-motion:no-preference and is
   listed in the M5 reset. Four !important outside M5 and P (the hero and breadcrumb transparency, the drawer surface, the two phone fold paddings). */

/* ── T. tokens ─────────────────────────────────────────────────── */
:root{
  --font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --disp:'Inter Tight','Inter Tight Fallback','Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,sans-serif;
  --fs-prose:clamp(1.0625rem,1rem + .3vw,1.125rem);
  --fs-h1-phone:clamp(1.85rem,1.1rem + 4vw,2.25rem); --fs-h1-phone-long:clamp(1.55rem,1rem + 3vw,1.85rem);
  --fs-h2-prose:clamp(1.5rem,1.3rem + .8vw,1.95rem);
  --fs-kpi:clamp(1.75rem,1.4rem + 1.1vw,2.25rem);
  --lh-body:1.6; --lh-prose:1.65; --lh-tight:1.04;
  --track-display:-.04em; --track-h1:-.035em; --track-h2:-.028em; --track-h3:-.018em; --track-h4:-.01em; --track-kicker:.14em;
  --measure-prose:66ch; --measure-lede:52ch; --measure-h1:22ch; --measure-h2:24ch;
  --section-head:clamp(2rem,1.5rem + 2vw,3rem);
  --stack-1:.9rem; --stack-2:1rem;
  --gutter:clamp(1rem,.5rem + 2vw,2rem);
  --r-xs:6px;
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --d-press:100ms; --d-hover:160ms; --d-pop:200ms; --d-drawer:320ms; --d-reveal:550ms; --d-enter:900ms; --d-draw:1000ms; --d-h1:1100ms;
  --z-breadcrumb:2; --z-toc:40; --z-sticky:85; --z-nav:100; --z-progress:101; --z-overlay:110; --z-drawer:120; --z-search:130; --z-skip:200; --z-consent:2000;
  --ex-axis:rgba(255,255,255,.14); --ex-grid:rgba(255,255,255,.06); --ex-s1:var(--accent-soft); --ex-s2:var(--gold); --ex-s3:var(--accent-2); --ex-mark:#fff; --ex-label:var(--on-dark-2); --ex-label-2:var(--on-dark-3);
}
@media (max-width:640px){
  :root{--nav-h:56px;--section:3rem;--section-head:1.5rem;--lh-body:1.55}
}

/* ── A. base and accessibility ─────────────────────────────────── */
.skip{position:absolute;left:1rem;top:-100%;z-index:var(--z-skip);padding:.75rem 1rem;background:#fff;color:var(--navy);border-radius:var(--r-s);font-weight:600;font-size:.9375rem}
.skip:focus-visible{top:1rem;outline:2px solid var(--accent-2);outline-offset:3px}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.letter :focus-visible,.scan-paper :focus-visible,.t-paper :focus-visible{outline-color:var(--accent-ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible,.sidebar__search input:focus-visible,.search-overlay__input:focus-visible,.news-form input:focus-visible{outline:2px solid #fff;outline-offset:2px;border-color:var(--accent-2)}
[inert]{pointer-events:none}
main[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 44px hit areas: padding, never font size; inline prose links exempt */
.navbar__logo{min-height:44px;padding:0 .25rem;margin-left:-.25rem}
.navbar__search-btn{width:44px;height:44px}
.geo-switcher__item{min-height:40px;min-width:40px;justify-content:center}
@media (pointer:coarse){.geo-switcher__item{min-height:44px;min-width:44px}}
.sidebar__close,.search-overlay__close,.sticky-cta-v2__close{width:44px;height:44px}
.sidebar__children a{padding:.7rem 0 .7rem .75rem}
.breadcrumbs ol{min-height:44px;align-items:center}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 .25rem;margin:0 -.25rem}
/* coarse pointers: a short crumb ("Blog", "GCC") keeps a 44px-wide target; the text stays where it was, the extra width runs right (site QA) */
@media (pointer:coarse){.breadcrumbs a{min-width:44px}}
/* the crumb is navigation, not a prose link: v29's list-link rules (accent colour, underline) no longer reach it, so v29 pages and
   /services-inspection/ show the same breadcrumb (site QA) */
.v29 .breadcrumbs li a:not(.btn):not(.link){color:var(--on-dark-2);text-decoration:none} .v29 .breadcrumbs li a:not(.btn):not(.link):hover{color:#fff}
.footer__col a{padding:.65rem 0}
.footer__social a{width:44px;height:44px}
.footer__brand p a,.footer__bottom a,.hero__after a,.note a,.ledger__src a{padding:.75rem 0}
.calc__in input{min-height:44px}
.calc input[type=range]{height:44px;margin:.4rem 0 0}
.share-btn,.share-bar__btn,.btn--text{min-height:44px;display:inline-flex;align-items:center}
/* links, chips and tags keep their visual height; on coarse pointers only, the hit area grows through a pseudo-element
   (on fine pointers the 10px extension made stacked .link rows overlap each other's hover and click areas) */
@media (pointer:coarse){
  .link,.btn--text,a.src-link,a.back-link{position:relative}
  .link::before,.btn--text::before,a.src-link::before{content:"";position:absolute;inset:-10px 0}
  p .link::before,li .link::before{content:none}
  .chip,.topic-chip,.tag{position:relative}
  .chip::before,.topic-chip::before,.tag::before{content:"";position:absolute;inset:-9px 0}
  /* final fixes (31 Oct 2026). Footnote references: the essays' page rule (inline-block, padding 6px 4px, margin -6px -2px) scaled
     up with the same margin box, so the line box, the line breaks and the word spacing do not move; the border box reaches about
     25 x 30px (WCAG 2.2 target size, which axe measures on the element) and ::before carries the 44px tap area. Plain footnote
     anchors only: a classed one (the /fr/ .fnref) keeps its own 44px styling. */
  main sup>a[href^="#"]:not([class]){position:relative;display:inline-block;padding:10px;margin:-10px -8px;line-height:1}
  main sup>a[href^="#"]:not([class])::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  /* the author-bar "Profile" link and a mailto link that stands alone in its paragraph: 44px tall tap area, no layout change */
  .author__link,main p>a[href^="mailto:"]:only-child{position:relative}
  .author__link::before{content:"";position:absolute;inset:-12px -8px}
  main p>a[href^="mailto:"]:only-child::before{content:"";position:absolute;inset:-12px 0}
}
/* the 22px default skips a box that its label positions over the whole row (the OSI diagnostic's .osi-tick: the input is the
   transparent 44px target and .osi-box is the visual); :where() keeps the default's specificity at (0,1,1) */
input[type=checkbox]:where(:not(.osi-tick>input)),input[type=radio]:where(:not(.osi-tick>input)){width:22px;height:22px;accent-color:var(--accent-2);flex:none}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;gap:.75rem;align-items:flex-start;min-height:44px}

/* ── R. rhythm, surfaces, the hero seam ─────────────────────────── */
.section,.v29 .section,main.v29 section.section{padding:var(--section) 0}
main.v29{position:relative}
main.v29::before{content:"";position:absolute;inset:0 0 auto;height:min(100vh,920px);z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 78% 22%,rgba(98,88,224,.16) 0%,rgba(31,143,246,.06) 45%,transparent 72%)}
main.v29 .hero,main.v29>.breadcrumbs{background:transparent!important}
/* migrated pages carry one glow, main.v29::before (DESIGN-SPEC 4). The v28 .hero::before glow belongs to native pages only, and page-css
   redefines .hero::before / .page-hero::before as an 800px square or a 3px gradient bar: switching it off here (specificity 0,2,2 beats every
   page-css variant up to body section.page-hero::before) removes both, so no page-css background can be stretched over the hero. */
main.v29 .hero::before{content:none}
/* native pages with a breadcrumb row (/services-inspection/): breadcrumb and hero share one surface and the migrated pages' single glow;
   the v28 .hero::before glow started at the hero's top edge, under the breadcrumb, and drew a hard seam (site QA, 25 October 2026) */
main:not(.v29)>.breadcrumbs{position:relative;background:transparent}
main:not(.v29)>.breadcrumbs::before{content:"";position:absolute;inset:0 0 auto;height:min(100vh,920px);z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 78% 22%,rgba(98,88,224,.16) 0%,rgba(31,143,246,.06) 45%,transparent 72%)}
main:not(.v29)>.breadcrumbs+.hero{background:transparent}
main:not(.v29)>.breadcrumbs+.hero::before{content:none}
/* drawer surface: the page-css reset `main,article,aside,...{background:transparent !important}` outranks v28's .sidebar background; the
   drawer and its overlay must never show hero text through the menu (fourth !important outside M5 and P) */
.sidebar,#sidebar{background:#0F1D34!important}
.sidebar-overlay{background:rgba(5,12,24,.6)}
main.v29 .hero::after{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 800'%3E%3Cg fill='none' stroke='rgba(143,180,255,0.07)' stroke-width='1'%3E%3Cpath d='M300 400C300 250 520 180 700 220S1100 200 1180 340 1080 620 880 600 540 700 420 620 300 550 300 400Z'/%3E%3Cpath d='M480 400C480 320 600 280 720 300S980 290 1030 380 960 540 840 530 640 600 560 550 480 480 480 400Z'/%3E%3C/g%3E%3C/svg%3E") 70% 40% / 1400px auto no-repeat;-webkit-mask-image:radial-gradient(75% 85% at 72% 45%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);mask-image:radial-gradient(75% 85% at 72% 45%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%)}
.section__head{max-width:760px;margin-bottom:var(--section-head)} .section__head .kicker{margin-bottom:var(--stack-1)} .section__head h2+.lead{margin-top:var(--stack-2)}
.hero--sub .container{position:relative;z-index:1} .hero__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin-top:1rem;font-size:var(--fs-small);color:var(--on-dark-3)} .hero__meta b{color:var(--on-dark-2);font-weight:500}
.hero__below{margin-top:clamp(2rem,1.5rem + 2vw,3rem)} .hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start} @media (max-width:980px){.hero__grid{grid-template-columns:1fr}}
.hero--doc .container{max-width:860px} .hero--doc .ez-dl{margin-top:1.5rem}
/* one vertical rhythm for every sub-page hero (A, B and C, with or without .hero__copy): 24px under the h1, 32px from the lede to the buttons
   or the meta line; 16px and 24px on phones. The .hero__copy-only margins in v28.css and v29.css are retired (site QA, 25 October 2026). */
.hero--sub .kicker{margin-bottom:var(--stack-1)}
.hero--sub h1{margin-bottom:var(--s-5)}
.hero--sub .lead{margin-bottom:0}
.hero--sub .lead+.btn-row,.hero--sub .lead+.hero__meta{margin-top:var(--s-6)}
@media (max-width:640px){.hero--sub h1{margin-bottom:16px}.hero--sub .lead+.btn-row,.hero--sub .lead+.hero__meta{margin-top:24px}}

/* ── Y. type corrections ───────────────────────────────────────── */
h1,.v29 h1{line-height:var(--lh-tight);letter-spacing:var(--track-h1)}
h2,.v29 h2{letter-spacing:var(--track-h2);line-height:1.08}
h3,.v29 h3{letter-spacing:var(--track-h3);line-height:1.25}
h4{letter-spacing:var(--track-h4)}
h1,h2,h3,.ez-line__t{text-wrap:balance} p,.lead{text-wrap:pretty}
.lead,.v29 .hero .lead{line-height:1.5}
.v29 .hero p,.v29 .hero .lead{max-width:var(--measure-lede)}
.hero h1 em,.v29 h1 em{background:none;-webkit-text-fill-color:currentColor;color:var(--accent-soft);font-style:italic;font-weight:700}
.kicker,.v29 .kicker{line-height:1.3;letter-spacing:var(--track-kicker)}
.micro{letter-spacing:.002em}
.h2__n{display:block;font-family:var(--disp);font-size:2.5rem;font-weight:800;color:var(--on-dark-3);letter-spacing:-.04em;line-height:1;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.prose{max-width:var(--measure-prose);font-size:var(--fs-prose);line-height:var(--lh-prose);color:var(--on-dark-2)} .prose>*+*{margin-top:1.1em} .prose h2{margin-top:2.6em;font-size:var(--fs-h2-prose);line-height:1.15;letter-spacing:-.022em;color:#fff;max-width:28ch} .prose h3{margin-top:1.8em;font-size:1.1875rem;line-height:1.3;color:#fff} .prose strong{color:#fff} .prose ol,.prose ul{padding-left:1.25em} .prose li+li{margin-top:.45em}
.read{display:grid;grid-template-columns:220px minmax(0,var(--measure-prose));gap:clamp(2rem,1rem + 4vw,5rem)} @media (max-width:1199px){.read{grid-template-columns:minmax(0,1fr)}}

/* ── C. components ─────────────────────────────────────────────── */
/* buttons */
.btn--text{background:none;border:0;padding:0 .25rem;color:var(--accent-soft);font-weight:600;font-size:.9375rem;box-shadow:none}
.btn--text:hover{color:#fff}
.btn.is-busy{opacity:.7;pointer-events:none}
.btn-mag{display:inline-block}
.btn__arrow{display:inline-block}
/* cards: hover is a border and a surface step, never a lift; the card background itself is page territory until the page pass */
.card--link{display:flex;color:inherit}
.card__meta{margin-top:auto;padding-top:.75rem;font-size:.75rem;color:var(--on-dark-3);font-weight:600}
.card__arrow{color:var(--accent-soft)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))} .cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cards,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards--2,.cards--4{grid-template-columns:1fr}}
/* phone rail for navigation cards */
.ez-rail__count{margin:.5rem 0 0;font-size:var(--fs-micro);color:var(--on-dark-3);font-variant-numeric:tabular-nums;display:none}
@media (max-width:640px){
  .cards.ez-rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) .5rem;scrollbar-width:none;overscroll-behavior-x:contain}
  .cards.ez-rail::-webkit-scrollbar{display:none}
  .cards.ez-rail>*{scroll-snap-align:start}
  .ez-rail__count{display:block}
}
/* rows and cards resolve to the dark palette wherever they sit: every surface in main is navy, so a section without t-dark / t-dark-2 no
   longer renders .card p, .row p and the row tags in paper-era ink (site QA, 25 October 2026); document artefacts keep their paper tokens */
:where(main) :is(.rows,.card):not(:where(.letter,.letter-peek,.scan-paper) *){--paper:var(--navy-2);--paper-2:var(--navy-3);--white:var(--navy-3);--ink:#FFFFFF;--ink-2:var(--on-dark-2);--ink-3:var(--on-dark-3);--line:var(--line-dark);--line-2:var(--line-dark-2);--accent-ink:var(--accent-soft);--gold-ink:var(--gold)}
/* ledger: the one KPI tile */
.ledger{--n:2;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark);margin:0}
.ledger--3{--n:3}.ledger--4{--n:4}
.ledger__cell{padding:1.1rem 1.25rem 1rem;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);min-width:0;background:transparent}
.ledger__n{display:block;font-family:var(--disp);font-size:var(--fs-kpi);font-weight:800;letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.ledger__n sup{font-size:.55em;color:var(--accent-soft);font-weight:700;vertical-align:super;line-height:0}
.ledger__l{display:block;margin-top:.45rem;font-size:.8125rem;line-height:1.35;color:var(--on-dark-3);text-transform:none;letter-spacing:0}
.ledger__src{display:block;margin-top:.5rem;font-size:.6875rem;line-height:1.4;color:var(--on-dark-3)}
.ledger__src a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:.2em}
.ledger__cell--hi{background:rgba(143,180,255,.08)}
.ledger__cell--est .ledger__n{color:var(--gold)}
.ledger__src .est{font-size:.625rem;padding:.1rem .45rem;margin-right:.4rem;vertical-align:middle}
.hero .ledger{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
@media (max-width:980px){.ledger--4{--n:2}}
@media (max-width:640px){.ledger,.ledger--3,.ledger--4{--n:2}.ledger__cell{padding:.9rem .9rem .8rem}.ledger__n{font-size:1.625rem}}
/* data table: dark ledger, sticky first column when wide */
.v29 table,.tbl table{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.v29 table th,.tbl th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3);padding:.75rem .9rem;border-bottom:1px solid var(--line-dark-2);background:transparent;white-space:nowrap}
.v29 table td,.tbl td{padding:.8rem .9rem;border-bottom:1px solid var(--line-dark);color:var(--on-dark-2);vertical-align:top;background:transparent}
.v29 table td:first-child,.tbl td:first-child{color:#fff;font-weight:600}
td.num,th.num{text-align:right}
@media (hover:hover) and (pointer:fine){.v29 table tbody tr:hover td{background:rgba(255,255,255,.025)}}
.tbl-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%;position:relative;border-radius:var(--r-xs)}
.tbl-scroll table{min-width:0}.tbl-scroll.is-wide table{min-width:560px}
.tbl-scroll.is-wide th:first-child,.tbl-scroll.is-wide td:first-child{position:sticky;left:0;z-index:1;background:var(--navy);box-shadow:inset -1px 0 var(--line-dark-2)}
.t-dark-2 .tbl-scroll.is-wide th:first-child,.t-dark-2 .tbl-scroll.is-wide td:first-child{background:var(--navy-2)}
@media (pointer:coarse){
  .tbl-scroll::after{content:"";display:block;position:sticky;left:0;height:1.4rem;margin-top:.3rem;font-size:.6875rem;line-height:1.4rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3)}
  .tbl-scroll.is-wide::after{content:"Scrolls sideways. First column stays."}
  .tbl-scroll.is-wide:lang(fr)::after{content:"Défilement latéral. La première colonne reste fixe."}
}
.tbl--kv{display:block}.tbl--kv tbody,.tbl--kv tr{display:block}.tbl--kv td{display:block}
@media (min-width:641px){.tbl--kv tr{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr)}}
@media (max-width:640px){.v29 table,.tbl table{font-size:.8125rem}.v29 table th,.tbl th{font-size:.6875rem;padding:.6rem .7rem}.v29 table td,.tbl td{padding:.65rem .7rem}}
/* forwardable line */
.ez-line{margin:clamp(2rem,1.5rem + 2vw,3.5rem) 0;padding:.25rem 0 .25rem 1.5rem;border-left:2px solid var(--gold);max-width:44ch}
.ez-line__t{font-family:var(--disp);font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:#fff;text-wrap:balance;max-width:40ch}
.ez-line__copy{margin-top:.6rem;min-height:44px;padding:0;font-size:.8125rem;color:var(--on-dark-3)}
.ez-line__copy.is-done{color:var(--gold)}
html:not(.js) .ez-line__copy{display:none}
/* pull quote, stamp, update, author, closing, footnotes, definition ledger, forms, TOC */
blockquote.pq{border-left:2px solid var(--gold);padding-left:1.25rem;margin:2rem 0;font-size:1.125rem;line-height:1.5;font-weight:500;color:#fff;max-width:40ch;quotes:none}
.pq::before,.pq::after{content:none}
.pq__who{display:block;margin-top:.6rem;font-size:var(--fs-micro);font-weight:400;color:var(--on-dark-3);font-style:normal}
.ez-dl{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);border-top:1px solid var(--line-dark);margin:0} .ez-dl>dt,.ez-dl>dd{padding:1rem 0;border-bottom:1px solid var(--line-dark);margin:0} .ez-dl>dt{font-weight:600;color:#fff;padding-right:1.5rem} .ez-dl>dd{color:var(--on-dark-2)} @media (max-width:640px){.ez-dl{grid-template-columns:1fr} .ez-dl>dt{padding-bottom:.25rem;border:0}}
.stamp{display:inline-flex;align-items:center;min-height:28px;padding:0 .6rem;border:1px solid var(--line-dark-2);border-radius:var(--r-pill);font-size:.75rem;font-weight:600;color:var(--on-dark-2);white-space:nowrap} .stamp--est{color:var(--gold);border-color:rgba(249,155,28,.5)}
.update{font-size:var(--fs-small);color:var(--on-dark-2);max-width:var(--measure);margin-top:1rem} .update time{color:var(--gold);font-weight:600}
/* inside a hero the lede rule (.v29 .hero p) used to win and set the update line at lede size; the component keeps its size (site QA) */
.v29 .hero p.update{font-size:var(--fs-small);line-height:1.55}
.author{display:flex;align-items:center;gap:.9rem;padding:1.25rem 0;border-top:1px solid var(--line-dark)} .author img{width:40px;height:40px;border-radius:var(--r-pill);object-fit:cover} .author__name{display:block;color:#fff;font-weight:600} .author__role{display:block;font-size:var(--fs-small);color:var(--on-dark-3)}
.closing{border-top:1px solid var(--line-dark)} .closing__inner{max-width:720px;margin:0 auto;text-align:center} .closing__founder{margin-top:2.5rem;justify-content:center;border-top:0} @media (max-width:640px){.closing__inner{text-align:left} .closing__founder{justify-content:flex-start}}
.fn{font-size:var(--fs-micro);color:var(--on-dark-3);padding-left:1.2em;line-height:1.55;border-top:1px solid var(--line-dark);padding-top:1rem;margin-top:2rem}
.ez-toc{font-size:.8125rem;line-height:1.4} .ez-toc summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;color:#fff;font-weight:600;list-style:none} .ez-toc summary::-webkit-details-marker{display:none} .ez-toc ol{list-style:none;margin:0;padding:0} .ez-toc a{display:flex;align-items:center;min-height:44px;padding:.3rem 0 .3rem .9rem;border-left:1px solid var(--line-dark);color:var(--on-dark-3)} .ez-toc a[aria-current]{color:#fff;border-left:2px solid var(--accent-soft);padding-left:calc(.9rem - 1px)} @media (min-width:1200px){.read .ez-toc{position:sticky;top:calc(var(--nav-h) + 1.5rem);align-self:start;z-index:var(--z-toc)}} .ez-toc__n{color:var(--on-dark-3);font-weight:500}
/* in-flow variant (every page outside a .read layout until the page pass): a collapsed 48px disclosure between the hero and the first
   section at every width; the reader opens it. It is never open at rest, so it is never a tall box between the hero and the content. */
.ez-toc--flow{max-width:var(--measure);margin:0 0 2rem;padding:0 1rem;border:1px solid var(--line-dark-2);border-radius:var(--r-m);background:var(--navy-3);color:var(--on-dark-2)}
.ez-toc--flow summary{gap:1rem;font-size:.8125rem;letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.ez-toc--flow summary::after{content:"+";flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-dark-2);border-radius:var(--r-pill);font-size:1rem;line-height:1;font-weight:400;color:var(--on-dark-2);transition:transform var(--d-pop) var(--ease-out)}
.ez-toc--flow details[open]>summary::after{transform:rotate(45deg)}
.ez-toc--flow details[open]>summary{border-bottom:1px solid var(--line-dark)}
.ez-toc--flow ol{padding:.5rem 0 .75rem;counter-reset:ez-toc}
.ez-toc--flow li{counter-increment:ez-toc}
/* the doubled class outranks v29's `.v29 li a:not(.btn):not(.link)` (0,3,2) prose-link rule without !important */
.ez-toc--flow a,main.v29 .ez-toc.ez-toc li a{text-decoration:none;color:var(--on-dark-2)}
.ez-toc--flow a::before{content:counter(ez-toc,decimal-leading-zero);flex:none;width:2.2em;font-variant-numeric:tabular-nums;font-weight:600;color:var(--on-dark-3)}
.ez-toc--flow a[aria-current],main.v29 .ez-toc.ez-toc li a[aria-current]{color:#fff}
@media (hover:hover) and (pointer:fine){.ez-toc--flow a:hover,main.v29 .ez-toc.ez-toc li a:hover{color:#fff;border-left-color:var(--line-dark-2)}}
.ez-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:var(--gradient);z-index:var(--z-progress);pointer-events:none}
.reading-progress{display:none}
.ez-form__field{display:grid;gap:.4rem;margin-bottom:1rem} .ez-form label{font-size:.8125rem;font-weight:600;color:#fff} .ez-form input,.ez-form select,.ez-form textarea{font:inherit;font-size:1rem;min-height:48px;padding:.75rem .9rem;background:rgba(255,255,255,.04);border:1px solid var(--line-dark-2);border-radius:var(--r-s);color:#fff;width:100%} .ez-form__err{font-size:.8125rem;color:var(--gold)}
.ez-form input:focus-visible,.ez-form select:focus-visible,.ez-form textarea:focus-visible{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(31,143,246,.25);outline:2px solid transparent}
/* sticky bar: under the navbar, over content, no backdrop filter */
.sticky-cta-v2{z-index:var(--z-sticky);background:rgba(10,22,40,.96);-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){.sticky-cta-v2{padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom,0px))}.sticky-cta-v2__text span{display:none}.sticky-cta-v2__btn{min-height:44px}}
/* clock live mirror (homepage): read by assistive tech, hidden from the eye */
.clock__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── X. exhibits ───────────────────────────────────────────────── */
svg.ex{width:100%;height:auto;display:block;overflow:visible;font-family:var(--font);font-weight:500;font-variant-numeric:tabular-nums}
svg.ex text{font-family:var(--font)}
.exhibit>svg.ex{margin:.75rem 0 .25rem}
/* phone and desktop exhibit variants: the inactive one is clipped to 1px, never display:none, so the desktop SVG keeps its accessible name
   at every width (the phone variant carries aria-hidden="true" focusable="false") and nothing reads it as hidden text. svg.ex.ex--* (0,2,1)
   outranks svg.ex{display:block} (0,1,1), the defect that showed both variants at once (site QA, 25 October 2026). */
svg.ex.ex--phone{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;pointer-events:none}
@media (max-width:640px){
  svg.ex.ex--desk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;pointer-events:none}
  svg.ex.ex--phone{position:static;width:100%;height:auto;overflow:visible;clip-path:none;margin:.75rem 0 .25rem;pointer-events:auto}
}
/* the exhibit foot is a source line: micro size, whatever surface it sits on (it inherited the hero lede or body size) */
.exhibit__foot,.v29 .exhibit .exhibit__foot{font-size:var(--fs-micro);line-height:1.5}
.exhibit--hero{position:relative}
.exhibit--hero::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gradient);border-radius:var(--r-m) var(--r-m) 0 0;pointer-events:none}

/* ── M. motion (MOTION.md 8, authoritative) ────────────────────── */
/* M0. scroll behaviour: native, smooth only for user-initiated anchor jumps */
html{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-stopped{overflow:hidden}
[id]{scroll-margin-top:calc(var(--nav-h) + 1.25rem)}

/* M1. hero, desktop fine pointer: pure CSS from the first paint, no dependency on deferred JS */
/* The pointer class (html.ez-fine or html.ez-coarse) is set by the head script at parse time. The entrance is deliberately not
   keyed on a pointer or width media query: Chromium re-evaluates those during a full-page capture and restarts every keyframe
   animation that depends on them, which would make every screenshot tool show a half-entered hero. */
@media (prefers-reduced-motion:no-preference){
  html.js.ez-fine .hero [data-enter]{opacity:0;transform:translateY(12px);animation:ez-enter var(--d-enter) var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
  html.js.ez-fine .hero .hero__visual[data-enter],html.js.ez-fine .hero .exhibit--hero[data-enter]{animation-name:ez-enter-vis;animation-duration:1s}
  html.js.ez-fine .hero h1[data-split]{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.3em);animation:ez-h1 var(--d-h1) var(--ease-out) 60ms both}
  html.js.ez-fine.ez-motion .hero h1[data-split]{clip-path:none;transform:none;opacity:0;animation:ez-safety 0s 1.6s forwards}
  .hero h1 .h1-line-mask{padding:0 .08em .1em;margin:0 -.08em -.1em}
}
/* M2. hero, phones and coarse pointers (html.ez-coarse) */
@media (prefers-reduced-motion:no-preference){
  html.js.ez-coarse .hero [data-enter]{opacity:0;animation:ez-enter-fade .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
  html.js.ez-coarse .hero h1[data-split],html.ez-coarse.ez-motion .hero h1[data-split]{opacity:1;clip-path:none;transform:none;animation:none}
}
@keyframes ez-enter{to{opacity:1;transform:none}}
@keyframes ez-enter-vis{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ez-enter-fade{to{opacity:1}}
@keyframes ez-h1{to{opacity:1;clip-path:inset(-12% -6% -14% -6%);transform:none}}
@keyframes ez-safety{to{opacity:1;transform:none;clip-path:none}}

/* M3. sections, grids, exhibits */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
  html.js [data-reveal].is-in{opacity:1;transform:none}
  /* prose is never hidden waiting for a scroll (DESIGN-SPEC 7): the data-reveal that migrate.py left on sections, and any reveal hook
     on a prose container or on an element holding more than two paragraphs, is visible at rest; the engine still marks them .is-in */
  html.js section[data-reveal],html.js article[data-reveal],html.js .section[data-reveal],html.js .section__head[data-reveal],html.js .prose[data-reveal],html.js .read[data-reveal],html.js .ez-dl[data-reveal],html.js .callout[data-reveal],html.js .pq[data-reveal],html.js .fn[data-reveal]{opacity:1;transform:none;transition:none}
  html.js [data-reveal]:has(p~p~p){opacity:1;transform:none;transition:none}
  html.js [data-stagger]>*{opacity:0;transform:translateY(12px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:calc(min(var(--i,0),5) * 60ms)}
  html.js [data-stagger].is-in>*{opacity:1;transform:none}
  html.js [data-draw] .ex__axis,html.js [data-draw] .ex__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--d-draw) var(--ease-out)}
  html.js [data-draw].is-in .ex__axis,html.js [data-draw].is-in .ex__line{stroke-dashoffset:0}
  html.js [data-draw] .ex__bar{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
  html.js [data-draw] .ex__bar--v{transform:scaleY(0);transform-origin:center bottom}
  html.js [data-draw].is-in .ex__bar,html.js [data-draw].is-in .ex__bar--v{transform:none}
  html.js [data-draw] .ex__node,html.js [data-draw] .ex__value,html.js [data-draw] .ex__area{opacity:0;transition:opacity .3s var(--ease-out);transition-delay:calc(.6s + var(--i,0) * 60ms)}
  html.js [data-draw].is-in .ex__node,html.js [data-draw].is-in .ex__value,html.js [data-draw].is-in .ex__area{opacity:1}
  html.js .bar__fill{transform:scaleX(0)} html.js .is-ready .bar__fill{transform:scaleX(1)}
  html.js .rng:not(.in) .rng__band{transform:scaleX(0)} html.js .rng:not(.in) .rng__val{opacity:0}
  html.js .fort span{color:var(--on-dark-3)} html.js .fort.in span{color:#fff;border-color:rgba(143,180,255,.5);background:rgba(143,180,255,.08)}
  html.js .tl .tl__axis{stroke-dasharray:1400;stroke-dashoffset:1400} html.js .tl.in .tl__axis{animation:ez-draw 1.4s var(--ease-out) forwards}
  @keyframes ez-draw{to{stroke-dashoffset:0}}
  html.js .tl .blip{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(.5s + var(--i,0) * 60ms)}
  html.js .tl.in .blip{opacity:1;transform:none}
  html.js .letter-peek{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-out)}
  html.js .step.on .letter-peek,html.js .letter-peek.in{clip-path:inset(0 0 0 0)}
  html.js .exhibit--chart:not(.is-in) .floor__col b{transform:scaleY(0)}
  html.js .exhibit--chart:not(.is-in) .ladder__rung{transform:scaleY(0);opacity:0}
  .step{opacity:.78;transition:opacity .35s var(--ease-out)} .step.on{opacity:1}
  @media (max-width:640px){
    html.js [data-reveal]{transform:none;transition-duration:.45s}
    html.js [data-stagger]>*{transform:translateY(8px);transition-duration:.45s;transition-delay:calc(min(var(--i,0),3) * 45ms)}
    html.js [data-draw] .ex__bar{transition-duration:.6s}
    html.js .tl .blip{transition-delay:calc(.3s + var(--i,0) * 40ms)}
  }
}

/* M4. chrome and controls */
.navbar{transition:transform var(--d-drawer) var(--ease-in-out),background-color .2s}
.navbar--hidden{transform:translateY(-100%)}
@media (pointer:coarse){.navbar{background:rgba(10,22,40,.96);-webkit-backdrop-filter:none;backdrop-filter:none}}
.sidebar{transition:transform .22s var(--ease-drawer)} .sidebar--open{transition-duration:var(--d-drawer);will-change:transform}
.nav-dropdown{transform:translateY(4px) scale(.98);transition:opacity var(--d-hover) var(--ease-out),transform var(--d-hover) var(--ease-out),visibility 0s linear var(--d-hover)}
.nav-item:hover>.nav-dropdown,.nav-item.is-open>.nav-dropdown{transform:none;transition-delay:0s}
.nav-dropdown--wide{transform:translate(-50%,4px) scale(.98);transform-origin:top center}
.nav-item:hover>.nav-dropdown--wide,.nav-item.is-open>.nav-dropdown--wide{transform:translate(-50%,0)}
/* desktop dropdown disclosure: the chevron is a button (aria-expanded, aria-controls) next to the top link; a keyboard open is instant */
.nav-item__toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:32px;margin-left:-.7rem;margin-right:.1rem;padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--on-dark-2);cursor:pointer}
.nav-item__toggle:hover,.nav-item.is-open>.nav-item__toggle{color:#fff}
.nav-item.is-kbd>.nav-dropdown{transition:none}
.search-overlay{transition:opacity var(--d-pop),visibility 0s linear var(--d-pop)}
.search-overlay--open{transition-delay:0s}
.search-overlay__form{transform:translateY(8px) scale(.98);transition:transform .25s var(--ease-out)}
.search-overlay--open .search-overlay__form{transform:none}
.btn{transition:transform var(--d-press) var(--ease-out),background-color .2s,color .2s,box-shadow .2s,border-color .2s,filter .2s}
.btn:active{transform:scale(.97)}
.link,.link:hover{gap:.4em} .link{transition:color .2s}
/* .row__arrow is left out of the display rule: v28's phone rule hides it, and inline-block put each arrow on its own line under the row */
.link__arrow,.btn__arrow{display:inline-block}
.link__arrow,.btn__arrow,.row__arrow{transition:transform .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link:hover .link__arrow,.btn--text:hover .btn__arrow,.row:hover .row__arrow{transform:translateX(3px)}}
.card{transition:border-color var(--d-hover),background-color var(--d-hover)}
@media (hover:hover) and (pointer:fine){.card:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04)}}
@media (pointer:coarse){.card--link:active{transform:scale(.985);transition:transform 120ms var(--ease-out)} .v29 table tbody tr:hover td{background:transparent}}
.sticky-cta-v2{transition:transform .3s var(--ease-out)}
/* the consent banner's slide lives inside ez-consent.js's own CSS string, never here */
.ez-toc a{transition:color var(--d-hover),border-color var(--d-hover)}
.ez-line__copy{transition:color var(--d-hover)}

/* footer "Cookie preferences": a button styled as a footer link; it needs ez-consent.js, so it is hidden without JS */
.footer__col .footer__consent{display:block;width:auto;padding:.65rem 0;margin:0;background:none;border:0;font:inherit;font-size:var(--fs-small);line-height:inherit;color:var(--on-dark-3);text-align:left;cursor:pointer;transition:color .15s}
.footer__col .footer__consent:hover{color:#fff}
html:not(.js) .footer__consent{display:none}
/* chrome search: instant results from /assets/search-index.json, rendered without animation (keyboard-initiated) */
.ez-sr{list-style:none;margin:0;padding:.35rem 0 0;max-height:min(52vh,440px);overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line-dark)}
.ez-sr[hidden]{display:none}
.ez-sr li{margin:0}
.ez-sr a{display:block;padding:.6rem .75rem;border-radius:var(--r-s);color:var(--on-dark-2);text-decoration:none}
.ez-sr a.is-top,.ez-sr a:focus-visible{background:rgba(255,255,255,.06)}
@media (hover:hover) and (pointer:fine){.ez-sr a:hover{background:rgba(255,255,255,.06)}}
.ez-sr__t{display:block;font-size:.9375rem;font-weight:600;line-height:1.35;color:#fff}
.ez-sr__d{display:block;margin-top:.15rem;font-size:.8125rem;line-height:1.45;color:var(--on-dark-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ez-sr__f{margin-right:.5rem;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3)}
.ez-sr__g a{color:var(--accent-soft)}
.sidebar__search{flex-wrap:wrap}
.sidebar__search .ez-sr{flex:1 0 100%;max-height:50vh;margin-top:.5rem}
.search-overlay.is-kbd,.search-overlay.is-kbd .search-overlay__form{transition:none}
/* M5. reduced motion: nothing hidden at rest, state changes instant */
/* legacy page-css hooks (.animate-in, .fade-in, .anim-fade on four articles) hide at rest without any gate: without JS, after the 3s
   fallback, and under reduced motion they are forced visible here; under JS the engine adds .visible / .is-visible, which their page-css shows */
html:not(.js) .animate-in,html:not(.js) .fade-in,html:not(.js) .anim-fade{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-stagger]>*,html.js .hero [data-enter],html.js .hero h1[data-split],html.js [data-draw] .ex__axis,html.js [data-draw] .ex__line,html.js [data-draw] .ex__bar,html.js [data-draw] .ex__bar--v,html.js [data-draw] .ex__node,html.js [data-draw] .ex__value,html.js [data-draw] .ex__area,html.js .bar__fill,html.js .rng__band,html.js .rng__val,html.js .tl .tl__axis,html.js .tl .blip,html.js .letter-peek,html.js .floor__col b,html.js .ladder__rung,.step,.animate-in,.fade-in,.anim-fade{opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important;animation:none!important;transition:none!important}
  .navbar,.sidebar,.nav-dropdown,.search-overlay,.search-overlay__form,.btn,.card,.sticky-cta-v2,#ez-consent-banner,.clock__fill{transition-duration:.01ms!important}
}

/* ── P. print ──────────────────────────────────────────────────── */
@media print{
 :root{--navy:#fff;--navy-2:#fff;--navy-3:#fff;--on-dark:#0A1628;--on-dark-2:#3B4A60;--on-dark-3:#5D6C82;--line-dark:#CFD7E3;--line-dark-2:#B7C3D6;--accent-soft:#4F46C8;--gold:#8F5200}
 html{scroll-behavior:auto}body{background:#fff;color:#0A1628;font-size:11pt;line-height:1.45}
 .navbar,.sidebar,.sidebar-overlay,.search-overlay,.sticky-cta-v2,.ez-toc,.ez-progress,.skip,.clock__live,#ez-consent-banner,.footer__social,.btn-row,.terrain,.hero::before,.hero::after,main.v29::before{display:none!important}
 html.js [data-reveal],html.js [data-stagger]>*,html.js .hero h1[data-split],.hero [data-enter],html.js [data-draw] .ex__axis,html.js [data-draw] .ex__line,html.js [data-draw] .ex__bar,html.js [data-draw] .ex__node,html.js [data-draw] .ex__value,html.js .bar__fill,html.js .rng__band,html.js .rng__val,html.js .letter-peek,.animate-in,.fade-in,.anim-fade{opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important;animation:none!important;transition:none!important}
 .hero{padding-top:1rem}.section{padding:1.25rem 0;break-inside:avoid-page}h1,h2,h3{break-after:avoid}
 h1,h2,h3,h4,h5,h6,th,strong,dt{color:#0A1628!important}p,li,td,dd,figcaption,blockquote,.lead,.kicker,.ledger__l,.ledger__src{color:#3B4A60!important}a{color:#4F46C8!important} /* !important: the legacy darkening blocks (white headings, .72 white prose) stay in page-css until the page pass */
 .exhibit,.ledger,table,figure{break-inside:avoid;border-color:#CFD7E3}svg text{fill:#0A1628}
 a[href^="http"]:not(.btn)::after{content:" (" attr(href) ")";font-size:9pt;color:#5D6C82}
 @page{size:A4;margin:16mm 14mm}
}

/* ── Q. phone fold and coarse-pointer rules ────────────────────── */
@media (max-width:640px){
  main.v29>.breadcrumbs{padding-top:calc(var(--nav-h) + .5rem)!important}
  main.v29>.breadcrumbs+.hero,main.v29>nav.breadcrumbs+section.hero{padding-top:1.25rem!important}
  /* one phone h1 size and one long variant (titles over 70 characters, classed by ezelman-v28.js); replaces the three !important clamps
     that ezelman-mobile.css carried (site QA, 25 October 2026) */
  .v29 .hero h1,.hero--sub h1,.hero--story h1,main.v29 h1{font-size:var(--fs-h1-phone);line-height:1.08;letter-spacing:-.035em;max-width:none}
  .v29 .hero h1.h1--long,.hero--sub h1.h1--long,main.v29 h1.h1--long{font-size:var(--fs-h1-phone-long);line-height:1.12;letter-spacing:-.03em}
  .letter__note{font-size:var(--fs-micro)}
  .footer__col .footer__consent{display:flex;align-items:center;min-height:44px;padding:.5rem 0;font-size:.9375rem;line-height:1.3}
  .v29 .hero p,.v29 .hero .lead,.hero .lead{font-size:1.0625rem;line-height:1.5}
  .hero .btn-row .btn{flex:1 1 100%;min-height:52px}
  .kicker{letter-spacing:.1em}
  .ez-line{padding-left:1rem;max-width:none}
  .ez-toc--flow{margin-left:0;margin-right:0}
}