/* ============================================================
   Protegra Particle-Morph — Shared Styles
   Used by every page prototype. Page-specific overrides go
   in a <style> block or inline in the page HTML.
   ============================================================ */

/* <picture> — это ТОЛЬКО контейнер для <source type="image/avif|webp"> (фаза 6, 2026-08-27).
   display:contents вынимает его из раскладки целиком, поэтому все существующие правила вида
   «.post-img img{height:100%}» продолжают считать родителем .post-img, а не picture. Без этого
   блоки с aspect-ratio (.post-img, .article-hero) схлопнулись бы: height:100% у <img> посчитался
   бы от inline-родителя нулевой высоты. Другие правила элемент picture не трогают. */
picture{display:contents}

/* ============================================================
   TYPEFACE — Hirro Sans (site-wide).
   Font: "Hirro Sans" by Dimitri Antonov / Blue Curve Designstudio,
   licensed CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/).
   We re-declare the three legacy family names (Anton / Inter /
   JetBrains Mono) so every existing `font-family` rule resolves to
   Hirro — the Google Fonts <link> is removed from every page.
   'Anton' (display headings) -> Hirro Black for weight/impact.
   ============================================================ */
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hirro Sans';src:url('fonts/hirro-sans-black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
/* body / UI (was Inter) */
@font-face{font-family:'Inter';src:url('fonts/hirro-sans-light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/hirro-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/hirro-sans-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/hirro-sans-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/hirro-sans-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
/* display headings (was Anton) -> Black at every requested weight */
@font-face{font-family:'Anton';src:url('fonts/hirro-sans-black.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
/* eyebrows / labels / numbers (was JetBrains Mono) */
@font-face{font-family:'JetBrains Mono';src:url('fonts/hirro-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/hirro-sans-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/hirro-sans-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#000004; --bg2:#06070e;
  --ink:#ffffff; --body:#c2c8d4; --muted:#6b7488;
  --gold:#ffb82a; --gold-soft:#ffd27a;
  --violet:#8052ff; --violet-soft:#a98bff;
  --cyan:#0099cc; --cyan-soft:#33b6e6;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --panel:rgba(10,12,22,.78);   /* (user 2026-07-16) cards more opaque (was .62) */
  --rcard:25px; /* (A3) unified card/panel/form/input/dropdown radius */
  /* ── (user 2026-07-14) TYPICAL BLOCK = eyebrow → heading → paragraph → button(opt).
        One spacing system for EVERY such block site-wide: section intros (.sec-head) AND
        page heroes (.scene[data-fig="0"]).  Ratio 1 : 2 : 2 — the eyebrow→heading gap is
        HALF the other two.  Font tiers are separate: sections use the base h2/.lead sizes;
        heroes stay in the larger tier (see .scene-head h2 / .scene[data-fig="0"] h2). ── */
  --tb-gap-eyebrow:10px;   /* надзаголовок → заголовок  (½) */
  --tb-gap-heading:20px;   /* заголовок   → абзац       (2×) */
  --tb-gap-body:20px;      /* абзац       → кнопка      (2×) */
  /* Font tiers (2 tiers). Section tier = base h2 clamp(32,4.6vw,64) + .lead clamp(17,1.55vw,23).
     Homepage hero = flagship, keeps its own bigger size (.scene[data-fig="0"] .scene-head h2 = 86).
     Sub-page heroes share ONE size below, larger than sections, smaller than the homepage flagship. */
  --tb-h-hero:clamp(34px,5vw,74px);        /* sub-page hero heading (min keeps mobile ≈ old size) */
  --tb-lead-hero:clamp(17px,1.55vw,23px);  /* hero paragraph (all heroes) */
  /* ── (user 2026-07-14) FULL BLOCK-TYPE SYSTEM (5 typical blocks). Single source of truth. ──
     T1 intro · T2 stats(3 cards: num+symbol+label+para) · T3 numbered stack · T4 6 cards · T5 statement */
  --tb-h-block:clamp(32px,4.6vw,64px);     /* block TITLE for T2/T3/T4 = section tier (= base h2) */
  --tb-card-h:clamp(20px,2vw,28px);        /* SIMPLE card heading (T4) + T3 list-item heading */
  --tb-stat-num:clamp(44px,4.6vw,72px);    /* T2 stat number — homepage (flagship) */
  --tb-stat-num-sub:clamp(30px,3vw,48px);  /* T2 stat number — sub-pages (smaller) */
  --tb-stat-label:clamp(1.22rem,1.85vw,1.55rem);  /* T2 white sub-label — fluid (rem+vw), ~30% up */
  --tb-list-num:clamp(13px,1.05vw,15px);   /* T3 list number — small mono gold (01, 02…) */
  --tb-lead:clamp(17px,1.55vw,23px);       /* T1 intro paragraph */
  --tb-p-card:clamp(15px,1.35vw,18px);     /* card/compact paragraph (T2/T3/T4) */
  --tb-h-statement:clamp(33px,6.75vw,112.5px);  /* T5 inverted 2-tone statement — (user 2026-07-16) −25% ("Regulation, simplified." etc.) */
  --tb-card-gap:16px;                      /* gap between cards (T2/T4) */
  --tb-card-pad:20px;                      /* card inner padding (T4) */
}
@media(max-width:760px){:root{--tb-gap-eyebrow:8px;--tb-gap-heading:16px;--tb-gap-body:16px}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* НЕ ставить overflow на html на десктопе. 23.09.2026 сюда добавили overflow-x:clip против «15px
   вбок» — и сломали position:sticky на всём сайте: overflow на html отменяет передачу overflow
   body окну, body с overflow-x:hidden становится собственным контейнером прокрутки, который никогда
   не прокручивается, и всё липкое (колода «Why the Netherlands», рельс калькулятора) уезжает со
   страницей. Замечено владельцем 24.09. Сами «15px» были ложным дефектом: их давал только scrollTo()
   из скрипта, а колесом и клавишами страница вбок не двигалась ни до правки, ни после (замер
   _qa/_sticky-probe.mjs с настоящей полосой прокрутки). body{overflow-x:hidden} уходит окну и
   этого достаточно. Ниже 1024px html,body{overflow-x:clip} остаётся — clip на body контейнера
   прокрутки не создаёт. */
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--body);font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.6;overflow-x:hidden}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;transition:opacity .5s ease}
.deco-scrim{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(120% 100% at 50% 42%,rgba(0,0,4,0) 0%,rgba(0,0,4,.34) 60%,rgba(0,0,4,.55) 100%)}
.deco-scrim.on{opacity:1}
.page{position:relative;z-index:1}
.wrap{max-width:1200px;margin:0 auto;padding-inline:36px}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:clamp(14px,1.5vw,16px);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700;display:inline-block}
h1,h2,h3{font-family:Anton,Inter,sans-serif;font-weight:400;color:var(--ink);text-transform:uppercase;line-height:.95;letter-spacing:.01em}
h1,h2{font-size:clamp(32px,4.6vw,64px)}
/* (user) never leave 1-2 orphan words on a line: balance headings, prettify body wrapping. Site-wide. */
h1,h2,h3,.statement h2,.scene-head h2,.sec-head h2{text-wrap:balance}
p,.lead,li,.faq-a,.qa,.svc p,.step p,.card p,.benefit-card p{text-wrap:pretty}
/* (user) brand casing: "MiCA" must keep its lowercase "i" even inside uppercased nav/eyebrows/headings */
.mc{text-transform:none!important}
h3{font-size:18px;letter-spacing:.02em}
p{max-width:60ch}
.lead{font-size:clamp(17px,1.55vw,23px);color:#c7cedd}
a{color:inherit;text-decoration:none}
/* in-copy contextual links (service pages -> blog articles) */
.copy-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,184,42,.45)}
.copy-link:hover{text-decoration-color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:11px;background:linear-gradient(180deg,#ffc23d,#ffb300);color:#10131c;font-weight:500;font-family:Inter;padding:18px 40px;border-radius:999px;font-size:17px;box-shadow:0 0 0 1px rgba(255,179,0,.42),0 18px 50px -14px rgba(255,179,0,.58);transition:transform .2s,box-shadow .2s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,184,42,.55),0 20px 50px -14px rgba(255,184,42,.62)}

/* reveal (normal-flow lower sections) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:6;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(6,8,15,.9),rgba(6,8,15,0))}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:11px 36px;max-width:1340px;margin:0 auto}
.logo{font-family:Anton;font-size:23px;color:#fff;letter-spacing:.05em;display:flex;align-items:baseline;gap:8px}
.logo small{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.34em;color:var(--gold)}
.logo-mark{height:28px;width:auto;align-self:center;flex:0 0 auto;display:block}
.foot-logo .logo-mark{height:26px}
@media(max-width:760px){.logo-mark{height:23px}}
/* single-piece official logo (shield-P + ROTEGRA), inserted as-is */
.logo-full{height:30px;width:auto;display:block;align-self:center;transition:filter .38s ease,opacity .38s ease}
.foot-logo .logo-full{height:39px}   /* (user 2026-07-17) footer logo +50% (26→39) */
@media(max-width:760px){.logo-full{height:25px}}
.logo:hover .logo-full{filter:blur(.7px) drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 16px var(--cyan))}   /* (user 2026-07-17) hover: logo softly dissolves into the brand blue */
/* brand wordmark (image) + glowing cyan bottom bar of the "E" that lights the area around it */
.logo-word{position:relative;display:inline-flex;align-items:center;align-self:center;line-height:0}
.logo-word>img{height:19px;width:auto;display:block}
.foot-logo .logo-word>img{height:17px}
@media(max-width:760px){.logo-word>img{height:16px}}
.logo-word .e-glow{position:absolute;left:49%;top:91%;width:16%;height:6px;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(150,245,255,.9),rgba(0,220,255,.48) 42%,rgba(0,210,255,0) 78%);
  box-shadow:0 0 8px 2px rgba(0,221,255,.38),0 0 18px 7px rgba(0,210,255,.15);
  animation:eGlow 3.6s ease-in-out infinite}
@keyframes eGlow{0%,100%{opacity:.7}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.logo-word .e-glow{animation:none}}
/* (user) hover the logo → "CRYPTO" slides out from BELOW the wordmark (orange, larger than before) */
.logo-word{overflow:visible}
.logo .logo-crypto{position:absolute;left:0;right:0;top:100%;margin-top:4px;text-align:center;text-indent:.3em;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.3em;color:var(--gold);white-space:nowrap;line-height:1;opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .32s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.logo:hover .logo-crypto{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.logo .logo-crypto{transition:none}}
.menu{display:flex;gap:30px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#c7cedd}
.menu a{position:relative;cursor:pointer;padding:4px 1px;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--cyan);transition:right .3s cubic-bezier(.2,.7,.2,1)}
.menu a:hover,.menu a.active{color:#fff}
.menu a:hover::after,.menu a.active::after{right:0}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;letter-spacing:.04em;border:1px solid rgba(0,153,204,.55);color:#e7ecf5;padding:9px 17px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.03);transition:border-color .22s,background .22s,color .22s,transform .22s,box-shadow .22s}   /* (user 2026-07-16) thin cyan/blue outline */
.pill:hover{border-color:var(--cyan);color:#fff;background:rgba(0,153,204,.12);box-shadow:0 0 12px -2px rgba(0,153,204,.45);transform:translateY(-1px)}   /* (user 2026-07-16) no doubling ring → outline stays 1px thin */
.menu-cta{display:none}/* cloned Consultation CTA: hidden on desktop, shown only inside the mobile overlay */
/* hamburger button (injected by site.js on mobile) */
.nav-burger{display:none;position:relative;z-index:60;width:44px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;background:transparent;border:0;cursor:pointer}
.nav-burger span{display:block;width:23px;height:2px;background:#e7ecf5;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav:has(.menu.open){z-index:200}
/* mobile menu overlay rules live AFTER the desktop dropdown rules (search: MOBILE NAV OVERLAY) so they win on source order */

/* ===== PROTEGRA wordmark logo — scoped under .brand ===== */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1;text-decoration:none;cursor:pointer;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.brand__eyebrow{font:600 8.5px/1 "JetBrains Mono","Inter",monospace;letter-spacing:.34em;color:var(--gold);text-indent:.34em;opacity:0;animation:brand-eyebrow .55s ease .12s forwards}
.brand__word{height:25px;width:90px;display:block;overflow:visible}
.wm{font-family:"Anton","Inter",sans-serif;font-size:25px;letter-spacing:.015em;fill:#ffffff;opacity:0;animation:brand-word .55s ease .26s forwards}
.wm-bar{fill:#0099cc;transform-box:fill-box;transform-origin:left center;opacity:0;animation:brand-bar .5s cubic-bezier(.22,1,.36,1) .5s forwards,brand-shimmer 5s ease-in-out 2s infinite}
.brand:hover .wm{fill:#f3f6ff;transition:fill .3s ease}
.brand:hover .wm-bar{filter:brightness(1.45)}
.brand:focus-visible{outline:2px solid #0099cc;outline-offset:4px;border-radius:4px}
@keyframes brand-word{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes brand-bar{0%{opacity:0;transform:scaleX(0)}60%{opacity:1}100%{opacity:1;transform:scaleX(1)}}
@keyframes brand-eyebrow{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes brand-shimmer{0%,70%,100%{fill:#0099cc}82%{fill:#2ec8f2}}
@media (prefers-reduced-motion:reduce){
  .brand *{animation:none!important;transition:none!important}
  .wm,.brand__eyebrow{opacity:1!important;transform:none!important}
  .wm-bar{opacity:1!important;transform:scaleX(1)!important;filter:none!important}
}

/* ============ PINNED STORY ============ */
.story{position:relative}
.story-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.story-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1150px 820px at 50% 50%,rgba(6,8,15,.72),rgba(6,8,15,.26) 58%,transparent 82%)}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--tb-gap-heading);padding:9vh 6.5vw;text-align:left;pointer-events:none}
.scene[data-side="left"]{align-items:flex-start}
.scene[data-side="right"]{align-items:flex-end}
.scene-col{width:clamp(360px,44vw,800px)}
.scene-head{width:clamp(360px,50vw,940px);margin:0;transform-origin:left center;will-change:transform,opacity;opacity:0;text-wrap:balance}
.scene-head .scene-eyebrow{display:block;font-family:"JetBrains Mono",monospace;font-size:clamp(14px,1.5vw,16px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--tb-gap-eyebrow)}
/* (user 2026-07-16) UNIFORM eyebrow site-wide (ref: homepage "OUR KEY SERVICES"): dark outline on the
   dark particle field + dark sections, but NOT the light #blog (a dark halo smudges on light). */
.scene-head .scene-eyebrow,.wrap:not(.light-sec) .eyebrow{text-shadow:0 0 2px rgba(0,0,0,.9),-1px -1px 0 rgba(0,0,0,.55),1px -1px 0 rgba(0,0,0,.55),-1px 1px 0 rgba(0,0,0,.55),1px 1px 0 rgba(0,0,0,.55)}
.scene-head :is(h1,h2){font-family:Anton,Inter,sans-serif;font-weight:400;font-size:var(--tb-h-block);line-height:1.0;letter-spacing:.005em;text-transform:uppercase;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.scene-body{width:clamp(360px,44vw,800px);margin:0;display:flex;flex-direction:column;gap:9px;text-align:left}
.scene-body>*{will-change:transform,opacity;opacity:0}
.scene-body.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tb-card-gap);width:min(64vw,1040px)}
.scene-body .lead{text-shadow:0 2px 16px rgba(0,0,0,.7);font-size:var(--tb-lead)}
/* (I) hero line: oversized "LEGALLY." pops up from below, a beat after the phrase settles */
.legally-pop{display:block;margin-top:.1em;font-family:Anton,Inter,sans-serif;font-weight:400;font-size:1.28em;line-height:.9;letter-spacing:.012em;text-transform:uppercase;color:var(--gold);text-shadow:0 8px 44px rgba(255,184,42,.28),0 6px 40px rgba(0,0,0,.6);opacity:0;transform:translateY(48px) scale(.92);transition:opacity .6s cubic-bezier(.2,.9,.3,1.4) .55s,transform .72s cubic-bezier(.2,.9,.3,1.4) .55s;will-change:transform,opacity}
.scene.settled .legally-pop{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.legally-pop{opacity:1!important;transform:none!important;transition:none!important}}

/* hero (scene 0): heading pinned to the TOP, lead/CTA to the BOTTOM edge — whale sits in the free middle-lower band between them (no overlap) */
.scene[data-fig="0"]{align-items:center;justify-content:space-between;text-align:center;padding:12vh 6.5vw 7vh}
.scene[data-fig="0"] .scene-head{width:min(92%,880px);transform-origin:center center}
.scene[data-fig="0"] .scene-head :is(h1,h2){font-size:clamp(40px,5.4vw,86px)}
/* (user 2026-07-16) HARMONISE every non-hero scene heading site-wide to the homepage "EVERYTHING YOU NEED TO OPERATE." reference size (48px cap). Covers team/services/casp-mica/mica-* data-fig 1&2 headings; DORA sets the same value in its own inline block. */
.story[data-scroll-model="flow"] .scene:not([data-fig="0"]) .scene-head h2{font-size:clamp(28px,2.9vw,48px)}
.scene[data-fig="0"] .scene-body{width:min(80%,720px);align-items:center;text-align:center;gap:var(--tb-gap-body)}
/* sub-page heroes run the FLOW model (.scene = display:block → flex gap can't space head→body).
   Their lead lives in .scene-body (homepage's lives in .scene-head), so this targets sub-pages
   only and restores the heading→paragraph gap via margin (works in both block & flex). */
.scene[data-fig="0"] .scene-body > .lead:first-child{margin-top:calc(var(--tb-gap-heading)/2);font-size:var(--tb-lead-hero)!important}   /* (user 2026-07-17) hero heading→lead gap halved (20→10px) */

/* stats scene (fig 1): its own full-screen block — numbers centred over a dispersed particle field */
.scene-stats{align-items:center;justify-content:center;text-align:center;gap:34px;padding:9vh 6.5vw}
.scene-stats .scene-head{width:min(92%,860px);transform-origin:center center;text-align:center}
.scene-stats .scene-head h2{font-size:var(--tb-h-block)}
.scene-body.stats-body{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;width:min(94%,1040px);text-align:left}
.stat{border-top:1px solid var(--line2);padding-top:20px;text-align:left}
.stat .num{font-family:Anton;font-size:var(--tb-stat-num);color:#fff;line-height:1;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.stat .num b{color:var(--gold);font-weight:400}
.stat p{font-size:var(--tb-p-card);margin-top:12px;max-width:34ch;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.stat p b{color:#fff}
/* (user 2026-07-17) unify EVERY sub-page hero (scene-0) stat card to the casp-mica reference:
   white number-suffix (+/%/mo/h) + JetBrains-Mono gold uppercase label + matched padding/gap.
   The sub-page cards already carry the gold top border + dark bg + 14px radius from the shared
   template; these force the two remaining per-page deltas (suffix colour, label font/size).
   Scoped to data-fig="0" so the homepage "Numbers that hold up" (.scene-stats) is untouched. */
.scene[data-fig="0"] .stats{gap:16px!important;width:min(842px,46vw)!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important;backdrop-filter:none!important}   /* (user 2026-07-17) card group = casp-mica width; NO outer frame — the 3 stats stand as separate cards */
.scene[data-fig="0"] .stat{padding:14px 20px 16px!important}
.scene[data-fig="0"] .stat .num b{color:#fff!important}
.scene[data-fig="0"] .stat .stat-lbl{font-family:"JetBrains Mono",monospace!important;font-weight:700!important;letter-spacing:.12em!important;font-size:clamp(11px,1vw,13px)!important;margin-top:8px!important}
@media(max-width:760px){.scene-stats{gap:16px;padding:0 22px}.stats-body{grid-template-columns:1fr;gap:14px;width:100%;max-width:470px}.stat{padding-top:13px}.stat .num{font-size:clamp(40px,11vw,62px)}.stat p{font-size:12px}}

/* service rows */
.svc{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line);align-items:start;text-align:left}
.svc .k{font-family:"JetBrains Mono";font-size:var(--tb-list-num);color:var(--gold);padding-top:4px}
.svc h3{margin-bottom:5px;font-size:var(--tb-card-h)}.svc p{font-size:var(--tb-p-card);max-width:60ch;color:var(--body)}

/* numbered steps */
.step{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--line);text-align:left}
.step .n{font-family:"JetBrains Mono";font-size:var(--tb-list-num);color:var(--gold)}
.step h3{font-size:var(--tb-card-h);margin-bottom:4px}.step p{font-size:var(--tb-p-card);color:var(--body)}

/* (E) "what clients ask us" — quoted questions */
.qa-label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px;margin-bottom:2px}
.qa{padding:10px 0 10px 16px;border-left:2px solid rgba(255,184,42,.55);font-size:clamp(14.5px,1.3vw,19px);line-height:1.5;color:var(--body);font-style:italic;max-width:54ch;text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* support cards */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--rcard);padding:var(--tb-card-pad);backdrop-filter:blur(9px);transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;text-align:left}
.card:hover{border-color:rgba(255,184,42,.6);transform:translateY(-5px) scale(1.05);z-index:3;box-shadow:0 26px 56px -22px rgba(255,184,42,.45)}
.card h3{font-size:var(--tb-card-h);margin-bottom:6px}.card p{font-size:var(--tb-p-card);line-height:1.5}
/* (user) ALL card headings → uppercase Anton display face, unified size (--tb-card-h) */
.card h3,.benefit-card h3,.onb-card h3,.member h3,.post h3,.class-card h3{font-family:Anton,sans-serif!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.015em;line-height:1.06;font-size:var(--tb-card-h)!important}
/* (user) card sub-headers same size as the card body text */
.class-card .cap{font-size:.92rem!important}
.class-card ul li{font-size:.92rem!important}
.post h3{font-size:clamp(16px,1.35vw,21px)!important}
.scene-body.cards-grid .card h3{font-family:Anton,sans-serif!important;text-transform:uppercase!important;letter-spacing:.015em;font-size:var(--tb-card-h)!important}
/* (R2-11) homepage cards-grid */
.scene-body.cards-grid .card{padding:var(--tb-card-pad)}
.scene-body.cards-grid .card h3{font-size:var(--tb-card-h);margin-bottom:7px}
.scene-body.cards-grid .card p{font-size:var(--tb-p-card);line-height:1.5}
/* (C) Support scene (fig 4) — DESKTOP ONLY: 6 tiles on the RIGHT half so the left "P" shield reads; heading one line.
   (These must NOT leak to mobile — nowrap + the 50vw grid break the pinned mobile layout.) */
@media(min-width:761px){
  .scene[data-fig="4"] .scene-head{width:min(74vw,1120px)}
  .scene[data-fig="4"] .scene-head h2{font-size:var(--tb-h-block)}
  .scene[data-fig="4"] .scene-body.cards-grid{width:min(44vw,620px);grid-template-columns:repeat(2,1fr);gap:var(--tb-card-gap)}
}
/* (E) hover-zoom for page-level text cards defined in per-page <style> (benefit / onboarding tiles) */
.benefit-card,.onb-card{position:relative;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.benefit-card:hover,.onb-card:hover{transform:translateY(-5px) scale(1.05)!important;z-index:3}

/* big full-bleed statement */
.statement{padding-block:clamp(120px,22vh,300px);text-align:center}
/* (F) more dark breathing room around every white section (waves sit in the dark gap, text never touches white) */
.light-sec{margin-block:clamp(70px,10vh,150px)}
.statement h2{font-size:var(--tb-h-statement);line-height:.92;font-weight:900;-webkit-text-stroke:.016em currentColor}
.statement .accent{color:var(--gold)}
/* (user 2026-07-17) statement (light-section) headings → ALWAYS 2 lines on desktop: nowrap keeps each
   <br>-separated segment on its own line, and the band is widened so the longest first segment
   ("Every transaction." = 1387px @112.5) fits without wrapping. Mobile keeps its smaller font + wrapping. */
@media(min-width:761px){
  .statement.wrap{max-width:1500px}
  .statement h2{white-space:nowrap}
}

/* ============ NORMAL-FLOW LOWER SECTIONS ============ */
section{padding-block:clamp(120px,18vh,260px);position:relative}
.sec-head{max-width:min(94vw,1060px);margin:0 auto;text-align:center}
.sec-head .eyebrow{margin-bottom:var(--tb-gap-eyebrow)}
.sec-head h2{margin:0 0 var(--tb-gap-heading);text-wrap:balance}
.sec-head p{max-width:64ch;margin:0 auto}
.scrim-c::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 520px at 50% 50%,rgba(6,8,15,.82),transparent 72%)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:54px}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rcard);padding:28px;backdrop-filter:blur(10px)}
.gtitle{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 0 12px}
.gtitle:first-child{margin-top:0}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tab{background:rgba(0,0,0,.25);border:1px solid var(--line);color:#c7cedd;border-radius:var(--rcard);padding:12px 8px;font-family:Inter;font-size:14px;font-weight:600;cursor:pointer;text-align:center;line-height:1.3;transition:.2s}
.tab small{display:block;font-size:11px;font-weight:400;opacity:.65;margin-top:3px}
.tab.active{background:var(--gold);color:#10131c;border-color:var(--gold)}
.row{display:flex;align-items:center;gap:13px;padding:12px 12px;border:1px solid var(--line);border-radius:var(--rcard);margin-bottom:8px;cursor:pointer;transition:.2s;background:rgba(0,0,0,.16)}
.row.locked{cursor:default;opacity:.85}
.row .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);flex:0 0 auto;display:grid;place-items:center;transition:.2s}
.row.on .box{background:var(--gold);border-color:var(--gold)}
.row .box svg{opacity:0;transition:.2s}.row.on .box svg{opacity:1}
.row .lab{flex:1;font-size:14px;color:#d6dbe6;text-align:left}
.row .price{font-family:"JetBrains Mono";font-size:12.5px;color:var(--gold)}
.result{position:sticky;top:96px}
.res-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.res-head .rl{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.res-head .rn{font-family:Anton;font-size:22px;color:#fff;margin-top:6px}
.rlines{display:flex;flex-direction:column;font-size:13.5px}
.rline{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.rline .v{font-family:"JetBrains Mono"}
.rsh{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:14px}
.total{margin-top:16px;border-top:1px solid var(--line2);padding-top:16px}
.total .tl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.total .ta{font-family:Anton;font-size:clamp(36px,4vw,52px);color:var(--gold);line-height:1.05}
.total .ts{font-size:12px;color:var(--muted)}
.mono-band{margin-top:14px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:var(--rcard);padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.mono-band .l{font-size:12px;color:var(--muted)}.mono-band .a{font-family:"JetBrains Mono";color:#fff}
.disc{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}
/* (user 2026-07-16) CALCULATOR: wider block (~80vw) + gray/white text ≥50% bigger, on EVERY page that has
   the calculator (was homepage-only inline). Left as-is: big "CASP Class 1" (.rn), yellow total (.ta),
   gold row prices / tabs (yellow sums + buttons). Desktop only (calc stacks ≤900px). */
@media(min-width:901px){
  #calculator{max-width:80vw}
  #calculator .calc{gap:34px}
  #calculator .calc-panel{padding:34px}
  #calculator .gtitle{font-size:17px}
  #calculator .row .lab{font-size:21px}
  #calculator .row .price{font-size:18.75px}   /* (user 2026-07-17) orange prices +50% (12.5→18.75) */
  #calculator .res-head .rl{font-size:17px}
  #calculator .rlines{font-size:20px}
  #calculator .rsh{font-size:15px}
  #calculator .total .tl{font-size:18px}
  #calculator .total .ts{font-size:18px}
  #calculator .mono-band .l{font-size:18px}
  #calculator .mono-band .a{font-size:21px}
  #calculator .disc{font-size:17px}
}

/* Калькулятор на телефоне. Зеркало блока >=901px выше: там владелец просил +50%, здесь
   поднимаем ровно до порогов MOBILE-GUIDE (текст 14px, прописной моно-ярлык 13px).
   Базовые значения 10–13.5px задуманы для широкого экрана, где рядом стоит десктопный
   блок; на 390px они оставались как есть и давали до 46 нарушений на страницу. */
@media(max-width:900px){
  #calculator .gtitle{font-size:13px}
  #calculator .row .price{font-size:13px}
  #calculator .res-head .rl{font-size:13px}
  #calculator .rlines{font-size:14px}
  #calculator .rsh{font-size:13px}
  #calculator .total .tl{font-size:13px}
  #calculator .total .ts{font-size:14px}
  #calculator .mono-band .l{font-size:14px}
  #calculator .disc{font-size:14px}
  #calculator .tab small{font-size:14px}
}

/* contact form */
.form{background:rgba(14,17,30,.72);border:1px solid var(--line2);border-radius:var(--rcard);padding:44px;backdrop-filter:blur(10px);margin:46px auto 0;max-width:820px;box-shadow:0 0 0 1px rgba(255,184,42,.18),0 24px 60px -20px rgba(255,184,42,.10)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fields input,.fields textarea{background:rgba(0,0,0,.28);border:1px solid var(--line2);border-radius:var(--rcard);padding:16px 17px;color:#fff;font-family:Inter;font-size:15px;resize:none}
.fields input::placeholder,.fields textarea::placeholder{color:var(--muted)}.fields .full{grid-column:1/-1}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
/* (user 2026-07-16) contact-form Send button = same height as the (now 30%-bigger) input rows */
#contact form .btn{height:65px;min-height:65px;padding-top:0;padding-bottom:0;align-items:center;font-size:19px;background:var(--gold);color:#10131c;position:relative;z-index:1}
/* (R2-8) keep the contact section within one screen */
#contact{padding-top:clamp(60px,8vh,120px);padding-bottom:clamp(120px,16vh,210px)}
/* (user 2026-07-16) contact form → WHITE-GOLD card (like the light blog blocks) so it stands out on the
   dark #contact section, and ~30% bigger. The section heading/lead stay white on the dark bg. */
/* (user 2026-07-19) forms NO LONGER flip to white — the colour change on hover was too harsh.
   The form keeps its dark palette in every state; on hover OR while typing (.form-live, set by
   shared/site.js) only the drifting-triangle pattern fades in (light triangles — the per-page
   lp-canvas IIFE draws light strokes on form canvases, dark ones on the light sections). */
#contact .form{
  /* structural — keeps the .lp-canvas positioning context + the +30% size in every state */
  max-width:1066px;padding:57px;position:relative;overflow:hidden;
}
#contact .form>.lp-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s ease}
#contact .form:hover>.lp-canvas,#contact .form.form-live>.lp-canvas{opacity:1}
#contact .form .fields,#contact .form>.btn{position:relative;z-index:1}
#contact .fields{gap:20px}
#contact .fields input,#contact .fields textarea{
  font-size:20px;padding:21px 22px;
}
#contact .fields input:focus,#contact .fields textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(255,184,42,.22)}
/* (user 2026-07-19) blog subscribe form: same — dark always, triangle pattern fades in on hover/typing */
#subscribe .form{position:relative;overflow:hidden}
#subscribe .form>.lp-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s ease}
#subscribe .form:hover>.lp-canvas,#subscribe .form.form-live>.lp-canvas{opacity:1}
#subscribe .form .fields,#subscribe .form .btn{position:relative;z-index:1}
#subscribe .fields input:focus,#subscribe .fields textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(255,184,42,.22)}
/* (A3) Cloudflare Turnstile captcha — pill-rounded like buttons/inputs */
.cf-turnstile,.cf-turnstile iframe{border-radius:var(--rcard)!important;overflow:hidden}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr}
  /* mobile keeps the original short strip (desktop carousel gets the full set) */
  .blog-grid>.post:nth-child(n+5){display:none}}
/* (2026-07) DESKTOP blog strip → 3-visible horizontal carousel with prev/next arrows.
   JS (blog.js) wraps each mini strip in .blog-carousel + injects the buttons; mobile keeps
   its own stacked/swipe layout and hides the arrows. */
.blog-cbtn{display:none}
@media(min-width:761px){
  .blog-carousel{position:relative;margin-top:48px}
  .blog-carousel>.blog-grid{
    margin-top:0;display:flex;grid-template-columns:none;gap:20px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
  }
  .blog-carousel>.blog-grid::-webkit-scrollbar{display:none}
  .blog-carousel>.blog-grid>.post,
  .blog-carousel>.blog-grid>.post-full{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start}
  .blog-cbtn{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
    background:rgba(10,12,22,.9);border:1px solid var(--line2);color:#fff;cursor:pointer;
    backdrop-filter:blur(8px);box-shadow:0 10px 30px -12px rgba(0,0,0,.75);
    transition:background .2s,border-color .2s,color .2s,opacity .25s,transform .2s;
  }
  .blog-cbtn:hover{background:var(--gold);border-color:var(--gold);color:#10131c;transform:translateY(-50%) scale(1.06)}
  .blog-cbtn svg{width:20px;height:20px}
  .blog-cbtn.prev{left:-16px}.blog-cbtn.next{right:-16px}
  .blog-cbtn[disabled]{opacity:0;pointer-events:none}
  /* homepage strip sits on a white section → light buttons read better there */
  #blog.light-sec .blog-cbtn{background:rgba(255,255,255,.96);border-color:rgba(16,19,28,.14);color:#10131c;box-shadow:0 12px 30px -14px rgba(0,0,0,.4)}
  #blog.light-sec .blog-cbtn:hover{background:var(--gold);border-color:var(--gold);color:#10131c}
}
.post{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--rcard);padding:28px;backdrop-filter:blur(9px);transition:.25s}
.post:hover{border-color:rgba(255,184,42,.5);transform:translateY(-5px) scale(1.04);box-shadow:0 26px 56px -22px rgba(255,184,42,.3)}
/* ===== light section + white "Latest news" blog block — shared so any page can host it before the footer ===== */
.light-sec{position:relative;color:#10131c;isolation:isolate}
.light-sec::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50vw);background:#f4f5f7;z-index:-1}
.light-sec .wave{position:absolute;left:50%;width:100vw;height:clamp(38px,4.6vw,66px);display:block;fill:#f4f5f7;z-index:-1;pointer-events:none}
.light-sec .wave-top{top:0;transform:translate(-50vw,-99%)}
.light-sec .wave-bottom{bottom:0;transform:translate(-50vw,99%)}
/* ── ИСПРАВЛЕНО 2026-09-02: канвас треугольников не заполнял светлый блок ──────────────
   <canvas> — ЗАМЕЩАЕМЫЙ элемент: у него есть собственные пропорции из атрибутов width/height,
   и при height:auto пара `top:0;bottom:0` его НЕ растягивает — браузер берёт внутреннюю
   высоту. Получался замкнутый круг: скрипт ставил буфер по измеренной высоте, а высота
   приходила из пропорций того же буфера, и значение застывало на том, с чего началось.
   Замерено на /mica-netherlands-v2: при 375px секция 405px, канвас 188 — треугольники жили в
   верхних 46% белого поля; при 1440px секция 575, канвас 720 — наоборот, вылезал за низ блока
   на 145px.
   Затронуты 16 страниц, у которых своей копии этого правила нет и которые полагаются на shared:
   adgm-uae, blog, crypto-license-{canada,hong-kong,singapore}, czech, dubai-uae, jurisdictions,
   mica-cyprus, mica-lithuania, mica-poland, post, salvador, switzerland, uae, vasp — плюс
   mica-netherlands-v2, чья инлайновая копия единственная была без height. Остальные страницы
   несут правило у себя ВМЕСТЕ с height:100% и сломаны никогда не были: первая проверка на
   mica-latvia и casp-mica именно поэтому показала «раскладка идентична» и ничего не доказала.
   height:100% растягивает замещаемый элемент по контейнеру. Ровно так уже написаны соседние
   правила — `#contact .form>.lp-canvas`, `#subscribe .form>.lp-canvas`, `.place.light-sec
   .lp-canvas`: все три `inset:0;width:100%;height:100%`. Верная форма в проекте была известна,
   этот селектор её просто не получил. ────────────────────────────────────────────────────── */
.light-sec .lp-canvas{position:absolute;top:0;bottom:0;height:100%;left:50%;width:100vw;transform:translateX(-50vw);z-index:-1;pointer-events:none}
#blog.light-sec .eyebrow{color:#a8780f}
#blog.light-sec .sec-head h2{color:#10131c}
#blog.light-sec .sec-head p{color:#3a4150}
#blog.light-sec .post{background:#fff;border-color:rgba(16,19,28,.12)}
#blog.light-sec .post:hover{border-color:rgba(168,120,15,.55);box-shadow:0 26px 56px -22px rgba(168,120,15,.32)}
#blog.light-sec .post .date{color:#a8780f}
#blog.light-sec .post h3{color:#10131c}
#blog.light-sec .post p{color:#454c5b}
#blog.light-sec .post .more{color:#a8780f}
@media(prefers-reduced-motion:reduce){.light-sec .wave{display:none}}

/* ===== blog: hero images, hashtags, related-by-hashtag, prev/next, load-more ===== */
.post.blog-js,.post-full.blog-js{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-img{aspect-ratio:44/27;overflow:hidden;background:rgba(255,255,255,.05);flex:0 0 auto}   /* (user 2026-07-17) blog thumb +20% taller & +10% wider absolute — aspect (16×1.1)/(9×1.2)=44/27 combined with the #blog.wrap +10% widening; object-fit:cover → no distortion */
.post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.post.blog-js:hover .post-img img,.post-full.blog-js:hover .post-img img{transform:scale(1.06)}
.pf-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1 1 auto}
.tag-row{display:flex;flex-wrap:nowrap;overflow:hidden;gap:7px;margin-bottom:11px}   /* (user 2026-07-19) tags = ONE line, JS hides trailing tags that overflow */
.post-tag{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.02em;color:var(--gold);background:rgba(255,184,42,.1);border:1px solid rgba(255,184,42,.22);border-radius:999px;padding:3px 11px;white-space:nowrap}
#blog.light-sec .post-tag{color:#a8780f;background:rgba(168,120,15,.08);border-color:rgba(168,120,15,.28)}
/* (user 2026-07-17) blog-card text bigger — scoped to the MAIN #blog section (all pages), so related-post/.rel-grid cards + article tag-rows are untouched */
#blog .post .post-tag{font-size:19.6px}       /* gold tags +70% (11.5→19.6) */
#blog .post .date{font-size:20.4px}           /* gold date +70% (12→20.4) */
#blog .post .more{font-size:22.1px}           /* gold "Read ⟶" +70% (13→22.1) */
#blog .post p{font-size:23px}                 /* gray description +70% (13.5→22.95) */
#blog.wrap{max-width:1320px}                  /* (user 2026-07-17) blog cards + images +10% wider (1200→1320) — stays 3-up */
.blog-more{text-align:center;margin-top:40px}
.article-hero{margin:6px 0 32px;border-radius:var(--rcard);overflow:hidden;aspect-ratio:16/9;box-shadow:0 26px 64px -30px rgba(0,0,0,.75)}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.a-tags{margin:0 0 28px}
.related{margin-top:66px;padding-top:36px;border-top:1px solid var(--line)}
.rel-h{font-family:Anton,sans-serif;text-transform:uppercase;font-size:clamp(22px,2.2vw,32px);margin-bottom:24px;letter-spacing:.01em;color:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.rel-grid{grid-template-columns:1fr}}
.rel-grid .post h3{font-size:clamp(16px,1.5vw,21px)!important;line-height:1.16;margin:0}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:42px}
@media(max-width:620px){.post-nav{grid-template-columns:1fr}}
.pn-link{display:flex;flex-direction:column;gap:7px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--rcard);background:var(--panel);transition:border-color .2s,transform .2s}
.pn-link:hover{border-color:rgba(255,184,42,.5);transform:translateY(-3px)}
.pn-next{text-align:right}
.pn-link span{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pn-link b{font-weight:600;color:#e7ecf5;font-size:15.5px;line-height:1.3}
.post .date{font-family:"JetBrains Mono";font-size:12px;color:var(--gold)}
.post h3{margin:12px 0 10px;font-size:20px;line-height:1.05}
.post p{font-size:13.5px}.post .more{margin-top:14px;color:var(--gold);font-size:13px;font-family:"JetBrains Mono"}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
.member{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--rcard);padding:24px;backdrop-filter:blur(9px);text-align:left;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.member:hover{transform:translateY(-5px) scale(1.05);border-color:rgba(255,184,42,.45);box-shadow:0 26px 56px -22px rgba(255,184,42,.28);z-index:3}
.member .role{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.member h3{font-size:16px;margin-bottom:6px}.member p{font-size:13px;color:var(--body)}

/* (FIX) reduced-motion / low-power: the engine choreo reveals EVERY homepage scene at once
   (engine.js ~L352). Those scenes are position:absolute and stacked, so they pile up into a
   garbled overlay. Flow them vertically instead so the page is a clean readable stack. */
@media(prefers-reduced-motion:reduce){
  .story{height:auto!important}
  .story-stage{position:static!important;height:auto!important;min-height:0}
  .story-stage .scene{position:relative!important;inset:auto!important;min-height:auto;padding:11vh 22px;opacity:1!important;pointer-events:auto!important;justify-content:center}
  .story-stage .scene-head,.story-stage .scene-body,.story-stage .scene-body>*{opacity:1!important;transform:none!important}
  .story-stage .scene-head :is(h1,h2){white-space:normal!important}
  .story-stage::after{display:none!important}
}

/* ⚠️ `.cost-table` IS LIVE — do not delete. Sole user: `accounting-poland.html`, four
   `<table class="cost-table price-panel">`. Verified 2026-08-31 on the LIVE docroot across
   306 baked HTML files, not just the repo. Note the split that makes this fragile: the BASE
   rules (width, border-collapse, th/td padding and colours) live INLINE in accounting-poland
   itself, and only the overrides below live here — because page `<style>` loads AFTER this
   file, so shared can reach a page rule only through `!important`. Deleting either half
   breaks the four price panels. The jurisdiction pages carried a dead copy of the same base
   and it was removed 2026-08-31; that removal is what this warning exists to survive. */
/* (user) tables on all pages: halve the row spacing + make the header row the same size as the body rows */
.cost-table td{padding-top:36px!important;padding-bottom:36px!important;font-size:clamp(17px,1.55vw,23px)!important}   /* (user 2026-07-17) row item text = lead-paragraph size */
.cost-table td:last-child{font-size:1.5rem!important}   /* orange cost +70% */
.cost-table th{padding-top:10px!important;padding-bottom:10px!important;font-size:1.17rem!important}   /* (user 2026-07-17) Item/Cost headers +30% (.9→1.17) */
/* (user 2026-07-17) the "Estimated Year 1 total" rows were REMOVED from all cost tables ("жирную строчку вырежи") */

/* (user) HOMEPAGE hero ONLY (centred): eyebrow + heading + LEAD grouped at the TOP, the whale in the middle,
   the CTA button BELOW the whale. Sub-pages keep their own "text LEFT / figure RIGHT" layout (NOT centred). */
@media(min-width:761px){
  .story:not([data-scroll-model="flow"]) .scene[data-fig="0"]{justify-content:flex-start!important;align-items:center!important;text-align:center!important;gap:var(--tb-gap-body);padding-top:max(8.5vh,82px)!important;padding-bottom:7vh!important}
  .story:not([data-scroll-model="flow"]) .scene[data-fig="0"] .scene-head{width:min(96%,1180px);margin-inline:auto;text-align:center}
  .story:not([data-scroll-model="flow"]) .scene[data-fig="0"] .scene-head :is(h1,h2){text-align:center}
  .story:not([data-scroll-model="flow"]) .scene[data-fig="0"] .scene-head .lead{width:min(94%,1000px);margin:var(--tb-gap-heading) auto 0;text-align:center;font-size:clamp(1.4rem,2vw,1.87rem);text-wrap:balance}
  /* (user 2026-07-15) homepage hero: half the eyebrow→heading gap */
  .story:not([data-scroll-model="flow"]) .scene[data-fig="0"] .scene-head .scene-eyebrow{margin-bottom:var(--tb-gap-eyebrow)}   /* (user 2026-07-16) uniform eyebrow→heading gap (was ½ on pinned heroes) */
  .story:not([data-scroll-model="flow"]) .scene[data-fig="0"] .scene-body{width:auto;margin:0 auto}
  /* (user) headings must clear the fixed nav at 100% zoom: anchor homepage content scenes below it */
  .story:not([data-scroll-model="flow"]) .scene:not([data-fig="0"]):not(.scene-stats):not([data-fig="4"]){justify-content:flex-start!important;padding-top:max(11vh,100px)!important}
}

/* (user, item 4) consistent body text size across scene blocks = the sub-header/lead size */
.svc p,.step p,.scene-body>p{font-size:var(--tb-p-card)!important;line-height:1.5}
/* (user 2026-07-15) roadmap gray body text +30% on desktop — site-wide harmonisation of the .svc/.step numbered lists */
@media(min-width:761px){ .svc p,.step p{font-size:clamp(19.5px,1.75vw,23.4px)!important;line-height:1.55} }
/* (user 2026-07-15) roadmap-scene INTRO lead: same size as the item paragraphs (+30%), and DOUBLE the gap
   above (heading→lead) and below (lead→first row). Scoped via :has() to leads that sit above a .svc/.step
   roadmap, so hero/ecosystem leads (no roadmap in their scene-body) are untouched. */
@media(min-width:761px){
  .scene-body:has(.svc) .lead,
  .scene-body:has(.step) .lead{ font-size:clamp(19.5px,1.75vw,23.4px)!important; line-height:1.55; margin-top:18px; margin-bottom:28px; }   /* (user 2026-07-16) heading→lead gap halved (36→18) */
}

/* footer (R3 — site-wide nav + social, modelled on protegra.io) */
footer{padding-block:40px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:16.9px;margin-top:42px}   /* (user 2026-07-16) footer text +30% — logo (.foot-logo) + column headers (.foot-h) intentionally NOT scaled */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px 78px}   /* (user 2026-07-17) column gap +50% more (52→78) */
/* (user 2026-07-17) WIDE desktop (≥1440px): widen the footer so the column gaps go ×1.5 (78→117) AND every
   link stays on ONE line ("CASP / MiCA overview", "Accounting in Poland", "CASP in Netherlands"). Below 1440 the
   footer can't fit one-line links at the current big font, so it keeps the safe wrapping 1200px layout. */
@media(min-width:1440px){
  footer.site-footer{max-width:1420px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px 117px}
  .foot-col>a{white-space:nowrap}
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:22px 34px}}
.foot-soon{color:var(--muted);font-size:16.9px;display:inline-flex;align-items:center;gap:8px}
.foot-soon em{font-style:normal;font-size:11.7px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.75}
.foot-logo{font-size:20px;color:#fff;margin-bottom:21px}
.foot-addr{color:var(--body);line-height:1.5;margin-bottom:9px;max-width:none;font-size:24.6px}   /* (user 2026-07-17) address +30% (18.9→24.6) */
.foot-mail{color:#fff;border-bottom:1px solid var(--line2);padding-bottom:2px;transition:color .2s,border-color .2s;font-size:24.6px}   /* (user 2026-07-17) email +30% (18.9→24.6) */
.foot-mail:hover{color:var(--gold);border-color:var(--gold)}
.foot-h{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.foot-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-col>a{color:#d4dae6;font-size:20.8px;transition:color .2s}
.foot-col>a:hover{color:#fff}
.foot-social{display:inline-flex;align-items:center;gap:11px}
.foot-social{gap:9px}.foot-social svg{width:28.6px;height:28.6px;flex:0 0 28.6px;color:var(--gold);transition:color .2s}
.foot-social:hover svg{color:var(--gold-soft)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:15.6px;letter-spacing:.04em}
.foot-bottom a{color:var(--muted);transition:color .2s}.foot-bottom a:hover{color:var(--ink)}
/* (user 2026-08-11, mobile revision) footer on phones: the three link columns stack ONE PER ROW
   (they were 2-up and cramped), with a slightly deeper left inset, and every footer link gets a
   real tap target — links measured 25–30px tall, below the ~40px a thumb needs. */
@media(max-width:700px){
  .foot-grid{grid-template-columns:1fr !important;gap:26px 0 !important}
  .foot-brand,.foot-col{grid-column:1 / -1}
  /* !important because the mobile sub-tier rules set `body .wrap{padding-inline:18px!important}` and the
     footer is a .wrap — without it the deeper left inset the user asked for never lands */
  footer.site-footer{padding-left:26px!important}
  /* ИСПРАВЛЕНО 02.09.2026: у ТЕКСТОВЫХ ссылок высота даётся отступом, а не flex.
     Flex ВЫБРАСЫВАЕТ пробельные текстовые узлы между элементами, и «<span class="mc">MiCA</span>
     overview» рендерилось как «MiCAoverview» — замерено на mica-latvia при 375px, зазор между
     span и текстом ровно 0. Затронуты были все страницы: правило общее и стоит в мобильном
     блоке, а <span class="mc"> — стандартная обёртка слова MiCA по всему сайту.
     Поймано моделью зрения на проде; метрический чекер это не видит, он проверяет склейку
     только вокруг подавленных <br>. Flex остаётся у соцсетей и почты: там дети не текст. */
  .foot-col>a,.foot-bottom a{min-height:40px}   /* блочный элемент и так тянется до min-height; padding тут только раздувал подвал */
  .foot-social,.foot-mail{min-height:40px;display:flex;align-items:center}
  .foot-col{gap:2px}
  /* the logo link is only as tall as its 25px image — give the tap area a thumb-sized box, artwork unchanged */
  .logo{display:inline-flex;align-items:center;min-height:40px}
}

/* compact mobile footer — placed AFTER the base rules above so these overrides actually win */
@media(max-width:520px){
  /* column count is governed by the ≤700 block above (one per row) — only spacing is tuned here */
  .foot-brand{grid-column:1 / -1}
  .foot-col>a{font-size:18.9px}
  .foot-h{font-size:13px;margin-bottom:8px;letter-spacing:.12em}   /* 12 -> 13px: прописной моно-ярлык, нижний порог MOBILE-GUIDE */
  .foot-addr{font-size:22px;margin-bottom:7px;line-height:1.45}
  .foot-mail{font-size:22.9px}
  footer{padding-block:24px 16px;margin-top:24px}
  .foot-bottom{margin-top:16px;padding-top:12px}
  .foot-social svg{width:27.3px;height:27.3px;flex:0 0 27.3px}
}
/* legacy footer flex (kept for any page not yet migrated) */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}

/* prototype tag */
.tag{position:fixed;left:14px;bottom:12px;z-index:7;font-family:"JetBrains Mono";font-size:10px;color:var(--muted);letter-spacing:.1em;background:rgba(6,8,15,.72);padding:6px 10px;border-radius:8px;border:1px solid var(--line)}

/* ============ MOBILE ============ */
@media(max-width:760px){
  .wrap{padding-inline:22px}
  section{padding-block:clamp(72px,11vh,130px)}
  /* mobile is PINNED too: figure sits in the TOP zone (uShift.y), text in the bottom zone (no overlap) */
  .scene{align-items:center!important;justify-content:flex-end;text-align:center;gap:11px;padding:0 20px 7vh}
  .scene[data-side]{align-items:center!important}
  .scene-head,.scene-body,.scene-body.cards-grid{width:100%;max-width:560px}
  .scene-head{transform-origin:center center}
  .scene-head :is(h1,h2){font-size:clamp(28px,7.4vw,44px)}
  .scene-head .scene-eyebrow{margin-bottom:8px}
  .scene-body{gap:9px}
  .scene-body.cards-grid{grid-template-columns:1fr 1fr;gap:7px}
  .card{padding:9px 10px}.card h3{font-size:11px}.card p{font-size:9.5px;line-height:1.35}
  .svc{grid-template-columns:34px 1fr;gap:10px;padding:8px 0}.svc h3{font-size:14px}.svc p{font-size:11.5px}
  .step{grid-template-columns:34px 1fr;padding:7px 0}.step p{font-size:11px}
  .lead{font-size:14px}
  /* hero on mobile: heading TOP, lead/CTA bottom edge, whale in the middle band */
  .scene[data-fig="0"]{justify-content:space-between;padding-top:12vh}
  .scene[data-fig="0"] .scene-head :is(h1,h2){font-size:clamp(30px,8.6vw,50px)}
  /* stats scene on mobile: keep the numbers vertically centred (not pinned to the bottom) */
  .scene-stats{justify-content:center}
  /* dark scrim behind the lower (text) zone so text always reads over the particles */
  .story-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,4,.82) 0%,rgba(0,0,4,.34) 56%,transparent)}
  .statement h2{font-size:clamp(30px,9.75vw,64.5px)}
  .sec-head{max-width:none}
}

/* ============ NAV DROPDOWNS (MiCA / Services), desktop hover ============ */
.menu .menu-item{position:relative;display:flex;align-items:center}
.menu .menu-item>a{display:inline-flex;align-items:center;gap:5px}
.menu .dd-caret{font-style:normal;font-size:.7em;opacity:.6;transition:transform .2s}
.menu .menu-item:hover .dd-caret{transform:rotate(180deg);opacity:.9}
/* invisible hover bridge so the menu stays open across the gap */
.menu .menu-item::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:16px}
.menu .dd{position:absolute;top:calc(100% + 14px);left:-10px;min-width:240px;background:rgba(8,10,20,.975);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:var(--rcard);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;box-shadow:0 26px 64px -14px rgba(0,0,0,.75)}
.menu .menu-item:hover .dd{opacity:1;visibility:visible;transform:translateY(0)}
.menu .dd a,.menu .dd .dd-soon{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14.4px;letter-spacing:.015em;text-transform:none;color:#d4dae6;white-space:nowrap}   /* (user 2026-07-17) dropdown font ×2 (12.5→25) */
.menu .dd a::after{display:none!important}
.menu .dd a:hover{background:rgba(255,184,42,.1);color:#fff}
.menu .dd .dd-soon{color:rgba(255,255,255,.3);cursor:default}
.menu .dd .dd-soon em{font-style:normal;font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.75;margin-left:auto;padding-left:14px}
.menu .dd .flag{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:0 0 auto;display:inline-block}   /* (user 2026-07-16) square country flags (was emoji, which fell back to LV/MT/NL text on Windows) */
.menu .dd-mega{flex-direction:row;gap:10px;min-width:560px;padding:14px}   /* (user 2026-07-17) dropdown font back to normal size (−50%) */
.menu .dd-mega .dd-col{flex:1;display:flex;flex-direction:column}
.menu .dd-h{font-family:"JetBrains Mono",monospace;font-size:10.9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:12px 12px 5px;opacity:.82}   /* (user 2026-07-17) dropdown header font ×2 (9.5→19) */
.menu .dd-h:first-child{padding-top:4px}

/* ============ MOBILE NAV OVERLAY (after desktop dropdown rules → wins on source order) ============ */
@media(max-width:1024px){
  .nav-burger{display:flex}
  .nav-in>.pill{display:none}
  nav .menu{position:fixed;top:0;left:0;right:0;bottom:auto;height:100vh;height:100dvh;z-index:55;display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:72px 24px 30px;overflow-y:auto;text-transform:none;letter-spacing:0;font-size:16px;color:#e7ecf5;
    background:rgba(6,8,15,.985);backdrop-filter:blur(18px);
    transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility .32s}
  nav .menu.open{transform:none;visibility:visible}
  nav .menu>a,nav .menu .menu-item>a{display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:12px 2px;border-bottom:1px solid var(--line);color:#e7ecf5;font-size:16px}
  nav .menu .menu-item{position:static;display:block;width:100%}
  nav .menu .menu-item::after{display:none}
  nav .menu a::after{display:none!important}
  nav .menu .dd-caret{font-size:.78em;opacity:.7}
  nav .menu .dd{position:static;display:none;opacity:1;visibility:visible;transform:none;min-width:0;
    flex-direction:column;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:2px 0 10px 12px}
  nav .menu .menu-item.dd-open>.dd{display:flex}
  nav .menu .menu-item.dd-open .dd-caret{transform:rotate(180deg)}
  nav .menu .dd a,nav .menu .dd .dd-soon{padding:12px 6px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal;text-transform:none}
  nav .menu .dd-mega{flex-direction:column;min-width:0}
  nav .menu .dd-mega .dd-col{display:block;flex:none}
  nav .menu .dd-h{padding:14px 6px 4px}
  nav .menu .menu-cta{display:inline-flex;justify-content:center;margin-top:26px;border:0!important;
    background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#10131c;font-weight:600;
    padding:16px;border-radius:999px;font-size:16px}
}

/* ============ BLOG ARTICLE (post) page ============ */
.article{max-width:824px;margin:0 auto;padding:140px clamp(20px,5vw,40px) 90px;position:relative;z-index:1}
.article .back{display:inline-block;color:var(--gold);font-family:"JetBrains Mono",monospace;font-size:13px;margin-bottom:26px}
.article .back:hover{text-decoration:underline}
.article .a-date{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);margin-bottom:12px}
.article h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(30px,5vw,54px);line-height:1.06;text-transform:none;margin-bottom:30px;color:#fff;letter-spacing:.005em}
.article-body{font-size:16.5px;line-height:1.85;color:#cbd2df}
.article-body>*{max-width:none}
.article-body h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(24px,3vw,32px);text-transform:none;margin:42px 0 16px;color:#fff;line-height:1.12;letter-spacing:.005em}
.article-body h3{font-size:20px;text-transform:none;margin:30px 0 12px;color:#fff}
.article-body p{margin:0 0 20px;max-width:none}
/* --- Фаза 4 (2026-08-27): абзацы, которые в теле статьи были обёрнуты в заголовки. ---
   В WP они стояли как <h2>..<h5> с прозаическим текстом (до 951 символа), из-за чего
   ломался порядок уровней (h1 -> h3/h4/h5) и в аутлайне появлялись «заголовки»-абзацы.
   Тег сменён на <p>, а классы ниже воспроизводят ПРЕЖНИЙ вид ровно: размеры, насыщенность
   и отступы взяты из .article-body h2/h3 из общего правила h1,h2,h3 (строка 82) и из умолчаний браузера для h4/h5 (в проекте
   действует общий сброс *{margin:0}, поэтому у h4/h5 отступов не было).
   Правку вида делать здесь, а не возвращая заголовки в контент. */
.article-body p.was-h2{font-family:Anton,Inter,sans-serif;font-weight:400;font-size:clamp(24px,3vw,32px);text-transform:none;margin:42px 0 16px;color:#fff;line-height:1.12;letter-spacing:.005em;text-wrap:balance}
.article-body p.was-h3{font-family:Anton,Inter,sans-serif;font-weight:400;font-size:20px;text-transform:none;margin:30px 0 12px;color:#fff;line-height:.95;letter-spacing:.01em;text-wrap:balance}
.article-body p.was-h4{font-size:1em;font-weight:700;margin:0;text-wrap:wrap}
.article-body p.was-h5{font-size:.83em;font-weight:700;margin:0;text-wrap:wrap}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:24px}
.article-body li{margin-bottom:9px}
.article-body strong{color:#fff;font-weight:600}
.article-body em{color:#e7ecf5}
.article-body a{color:var(--cyan-soft);text-decoration:underline}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;display:block;overflow-x:auto}
.article-body th,.article-body td{border:1px solid var(--line2);padding:11px 13px;text-align:left;vertical-align:top}
.article-body th{background:rgba(255,184,42,.09);color:#fff;font-weight:600}
.article-body hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.article-body blockquote{margin:26px 0;padding:6px 22px;border-left:3px solid var(--gold);color:#e7ecf5;font-style:italic}
.article-body blockquote p{margin:0 0 10px}
.article-body blockquote p:last-child{margin:0}
.article-body img{max-width:100%;height:auto;border-radius:10px;margin:24px 0;display:block}
.article-body figure{margin:24px 0}
.article-body figcaption{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center}
.article-body code{font-family:"JetBrains Mono",monospace;font-size:.9em;background:rgba(255,255,255,.07);padding:2px 6px;border-radius:5px;color:#e7ecf5}
.article-body pre{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;margin:22px 0}
.article-body pre code{background:none;padding:0;font-size:13.5px;line-height:1.6}
@media(max-width:760px){.article{padding-top:110px}}

/* JS-rendered blog cards: keep visible (not gated by scroll-reveal observer) */
.post.blog-js,.post-full.blog-js{opacity:1;transform:none}

/* (user 2026-07-02) Cloudflare Turnstile: centre the widget in the form (was left-aligned).
   The box is JS-injected (shared/emailjs-notifications.js) before the Send button on every
   page that renders the contact form, so this one rule covers them all. */
.protegra-turnstile-box{display:flex;justify-content:center}

/* ══ FAQ — unified card accordion across the whole site (user 2026-07-16) ══
   Single source of truth; per-page inline FAQ CSS was removed. Markup:
   <div class="faq-item"><div class="faq-q"><span class="qn">01</span><span class="qt">Q?</span><span class="qi">＋</span></div><div class="faq-a">A</div></div> */
.faq-list { display:flex; flex-direction:column; gap:20px; margin-top:48px; }   /* (user 2026-07-17) 20px between questions */
.faq-item {
  position:relative; border:1px solid var(--line); border-radius:var(--rcard);
  background:var(--panel); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  overflow:hidden; transition:border-color .25s, box-shadow .25s, transform .25s;
}
.faq-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--gold), rgba(255,184,42,0)); opacity:.55; transition:opacity .25s; }
.faq-item:hover { border-color:rgba(255,184,42,.6); box-shadow:0 0 0 1px rgba(255,184,42,.35), 0 20px 55px -22px rgba(255,184,42,.55); }
.faq-item.open { border-color:rgba(255,184,42,.5); }
.faq-item.open::before { opacity:1; }
.faq-q { display:flex; align-items:center; gap:20px; padding:26px 30px; cursor:pointer; font-weight:700; font-size:clamp(1.15rem,1.5vw,1.5rem); line-height:1.3; color:var(--ink); text-transform:uppercase; transition:color .2s; }
.faq-q .qn { flex-shrink:0; font-family:'JetBrains Mono',monospace; font-weight:400; font-size:clamp(14px,1.1vw,16px); color:var(--gold); letter-spacing:.02em; line-height:1; min-width:2.4ch; }
.faq-q .qt { flex:1; }
.faq-q .qi { flex-shrink:0; color:var(--gold); font-size:2rem; line-height:1; transition:transform .3s ease, color .25s; }   /* no circle — plain +/× glyph */
.faq-q:hover .qi { color:var(--gold-soft); }
.faq-item.open .faq-q .qi { transform:rotate(45deg); }
/* (user 2026-07-19) accordion animates the REAL height (JS sets inline height from scrollHeight) —
   open + close run simultaneously at the same speed. The old max-height:820px mechanic made the
   opening look instant and the closing lag (the invisible 820→content stretch ate the timeline). */
.faq-a { height:0; overflow:hidden; transition:height .5s cubic-bezier(.4,0,.2,1); padding:0 34px 0 74px; color:var(--body); font-size:clamp(1.02rem,1.15vw,1.2rem); line-height:1.75; }
@media (max-width:640px){ .faq-q { padding:20px 20px; gap:14px; } .faq-a { padding:0 22px 0 22px; } }

/* ══ (user 2026-07-19) MOBILE TIER ≤700px — canonical mobile fixes site-wide.
   Viewport tiers: ≥1440 desktop · 700–1440 fluid · ≤700 mobile. Rules + how-to:
   .planning/knowledge-base/MOBILE-GUIDE.md ══ */
@media(max-width:1024px){
  /* the slide-in nav menu (fixed inside nav, whose backdrop-filter makes nav its containing
     block) widened the document by ~80-140px → the page could wiggle sideways. Clip the root. */
  html,body{ overflow-x:clip; }
}
/* (user 2026-08-11) TEXT-LEFT / FIGURE-RIGHT scenes: the whole text column moves 40px RIGHT.
   The point is the gap between the copy and the particle figure, which read as too wide: shifting the
   column right widens the left margin by 40px and closes that gap by the same 40px. Hence `margin-left`
   — a padding would only narrow the text and leave the gap exactly as it was.
   (`max-width` keeps the shifted column inside its scene at the narrow end of the desktop range.)
   Applies to every `data-side="left"` scene in the flow model (hero, service highlights, the homepage's
   own left-text scenes). Text-RIGHT scenes are untouched, and so is mobile, where the columns are
   full-width and stacked. The one exception — the homepage hero, a centred block rather than a
   two-column layout — cancels this in whale-earth-morph's own CSS. */
@media(min-width:761px){
  /* HERO (data-fig="0") IS EXCLUDED — user 2026-08-11: the shift is for the card/content scenes only;
     on the hero it pushed the whole first screen off and looked broken. */
  body .story[data-scroll-model="flow"] .scene[data-side="left"]:not([data-fig="0"]) .scene-head,
  body .story[data-scroll-model="flow"] .scene[data-side="left"]:not([data-fig="0"]) .scene-body{ margin-left:90px; max-width:calc(100% - 90px); }
}

@media(max-width:760px){
  /* (user 2026-08-11) THE mobile hero bug, fixed site-wide. Every sub-page carries
     `.story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-head{width:min(46vw,820px)}`
     with no mobile override, so on a 375px phone the hero heading column is 46vw = 173px and the
     heading breaks into 6–8 ragged lines while the lead below it runs the full 305px. Give the hero
     head the same width as the body, and drop the hard <br> line breaks the desktop heading needs —
     on a phone they turn into one- and two-word lines. (Was fixed page-locally on /aml-officer-mlro;
     this is the shared version — that page's copy is now redundant.) */
  body .story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-head{ width:min(720px,92%) !important; }
  body .scene[data-fig="0"] .scene-head :is(h1,h2) br{ display:none; }
}
@media(max-width:700px){
  /* hero stats: 3 squeezed columns (~110-147px each) → stack into one column */
  .story[data-scroll-model="flow"] .scene[data-fig="0"] .stats{ grid-template-columns:1fr !important; width:100% !important; gap:12px !important; }   /* !important — beats the per-page inline flow rules (they load after shared) */
  /* contact form: desktop 57px padding is too fat on a phone */
  #contact .form{ padding:28px 18px; }
  /* cost tables: halve the 36px row padding, calm the orange values */
  .cost-table td{ padding-top:18px!important; padding-bottom:18px!important; }
  .cost-table td:last-child{ font-size:1.1rem!important; }
}

/* ══ (user 2026-07-19) MOBILE SUB-TIERS — 4 отдельных вьюпорта внутри мобильного яруса:
   A 500–700 · B 400–500 · C 360–400 (iPhone 14 = 390) · D ≤360.
   Каждый ярус прогрессивно ужимает заголовки, тексты, паддинги. `body `-префикс + !important,
   чтобы гарантированно бить инлайновые правила страниц (они грузятся после shared).
   Значения — в .planning/knowledge-base/MOBILE-GUIDE.md §Tiers. ══ */

/* ---------- общий мобильный слой ≤700 (все четыре яруса) ---------- */
@media(max-width:700px){
  body .wrap{ padding-inline:24px; }
  body .member-photo{aspect-ratio:1/1;font-size:2rem}            /* фото-заглушки: не 330px-квадраты */
  body .member-info{ padding:22px 18px 20px; }
  body .member-info h3{ margin-bottom:12px; }
  body .member-info .role{ margin-bottom:12px; }
  body .post-full h3{ font-size:19px !important; }                     /* blog-карточки: компактный текст */
  body .post-full p{ font-size:16px !important; line-height:1.55 !important; }
  body .post-full .date{ font-size:13.5px !important; }
  body .post-full .read-more{ font-size:15px !important; }
  body .post-tag{ font-size:13px !important; padding:3px 9px !important; }
  body #blog .post .post-tag{ font-size:13px !important; }
  body #blog .post .date{ font-size:13.5px !important; }
  body #blog .post p{ font-size:16px !important; }
  body #blog .post .more{ font-size:15px !important; }
  body .faq-q{ font-size:17px; padding:18px 16px; gap:12px; }
  body .faq-q .qi{ font-size:1.6rem; }
  body .faq-a{ font-size:15.5px; padding:0 16px 0 42px; }
  body .benefit-card, body .class-card, body .pillar-card, body .value-card{ padding:22px 18px !important; }
  body .benefit-card h3{ min-height:0 !important; }                     /* 2-строчный резерв не нужен в 1 колонку */
  body .benefit-card p, body .class-card ul li, body .member-info p,
  body .svc p, body .step p, body .value-card p{ font-size:15.5px !important; line-height:1.55 !important; }   /* `.facts-table td` dropped from this group 2026-08-31 with the selector itself */
  body .cost-table td{ font-size:15.5px !important; }
  body .cost-table td:last-child{ font-size:15px !important; }
  body .cost-table th{ font-size:13px !important; }
  body .tl-week{ width:56px; font-size:12.5px; }
  body .tl-body p{ font-size:15.5px; }
  body .stat .num{ font-size:26px !important; }
  body .stat p{ font-size:14px !important; }
  body .btn{ padding:15px 30px; font-size:16px; }
  body #contact .fields input, body #contact .fields textarea{ font-size:16px; padding:15px 14px; }
  body .statement h2{ font-size:30px !important; }
  body .sec-head h2, body .scene-head h2, body .scene-head h1, body h2{ line-height:1.02; }
}
/* ---------- A · 500–700 ---------- */
@media(min-width:500.02px) and (max-width:700px){
  body h2, body .sec-head h2{ font-size:33px !important; }
  body .scene-head :is(h1,h2){ font-size:33px !important; }
}
/* ---------- B · 400–500 ---------- */
@media(min-width:400.02px) and (max-width:500px){
  body h2, body .sec-head h2{ font-size:29px !important; }
  body .scene-head :is(h1,h2){ font-size:29px !important; }
  body .wrap{ padding-inline:20px; }
  body .statement h2{ font-size:28px !important; }
}
/* ---------- C · 360–400 (iPhone 14/15/16 = 390-393) ---------- */
@media(min-width:360.02px) and (max-width:400px){
  body h2, body .sec-head h2{ font-size:26px !important; }
  body .scene-head :is(h1,h2){ font-size:26px !important; }
  body .wrap{ padding-inline:18px; }
  body .benefit-card, body .class-card, body .pillar-card, body .value-card{ padding:20px 16px !important; }
  body .statement h2{ font-size:26px !important; }
  body .lead{ font-size:15.5px; }
  body .btn{ padding:14px 26px; font-size:15.5px; }
  body #contact .form{ padding:22px 14px; }
}
/* ---------- D · ≤360 ---------- */
@media(max-width:360px){
  body h2, body .sec-head h2, body .article-body p.was-h2{ font-size:23px !important; }   /* was-h2 = бывший h2 в теле статьи (фаза 4) — держим тот же размер на узких экранах */
  body .scene-head :is(h1,h2){ font-size:23px !important; }
  body .wrap{ padding-inline:14px; }
  body .benefit-card, body .class-card, body .pillar-card, body .value-card{ padding:18px 14px !important; }
  body .statement h2{ font-size:23px !important; }
  body .lead{ font-size:15px; }
  body .btn{ padding:13px 22px; font-size:15px; }
  body #contact .form{ padding:20px 12px; }
  body .faq-q{ font-size:15.5px; }
  body .tl-week{ width:50px; }
}

/* ===== WP editor formatting — merged from manager's copy (2026-07-22) ===== */
/* Advanced Editor Tools: honour the editor's inline text colour. When content is wrapped in a
   coloured <span> (e.g. gold headings), let descendant bold/italic INHERIT that colour instead of
   the forced default white — otherwise `.article-body strong{color:#fff}` beats the ancestor colour. */
.article-body [style*="color"] strong,.article-body [style*="color"] em{color:inherit}
/* WP media alignment + captions (classic / Advanced Editor Tools) — honour the editor's align choice.
   The figure/img floats; an <img> inside a figure just fills it (the figure does the floating). */
.article-body .alignleft{float:left;margin:8px 26px 14px 0}
.article-body .alignright{float:right;margin:8px 0 14px 26px}
.article-body .aligncenter{float:none;display:block;margin-left:auto;margin-right:auto}
.article-body figure.alignleft,.article-body figure.alignright{max-width:min(50%,440px)}
.article-body figure .alignleft,.article-body figure .alignright,.article-body figure img{float:none!important;margin:0;max-width:100%;display:block}
.article-body .wp-caption{max-width:100%}
.article-body::after{content:"";display:block;clear:both}
@media(max-width:640px){.article-body .alignleft,.article-body .alignright,.article-body figure.alignleft,.article-body figure.alignright{float:none;margin:20px auto;max-width:100%}}

/* consent checkbox on contact forms (terms/privacy, 2026-08-05) */
.form .consent{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:60ch;cursor:pointer}
.form .consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--gold);cursor:pointer}
.form .consent.consent-missing{color:#ff6680}
.form .consent.consent-missing .copy-link{color:#ff6680}

/* ============================================================
   JURISDICTION PAGE BLOCKS (user 2026-08-11)
   Single source for the blocks every licence page shares — spec:
   .planning/knowledge-base/JURISDICTION-PAGE-TEMPLATE.md.
   These used to be copy-pasted inline into each page (mica-netherlands as .nl-rstep,
   mica-latvia/-slovakia as private copies); pages now inherit them from here.
   ============================================================ */

/* Block 4 · AT A GLANCE — the flat `.facts-table` that used to live here was REMOVED 2026-08-31.
   It was superseded by `.passport` (B22) on 2026-08-11, and by the removal date carried zero users:
   verified on the LIVE docroot across 306 baked HTML files, not only in the repo — 0 matches for
   `class="facts-table"`. The grey body size it defined, `clamp(17px,1.55vw,23px)`, is still the
   shared paragraph size and is quoted literally in the comments below that used to point here. */

/* Block 4 · AT A GLANCE — "passport" plate (user 2026-08-11, chosen from 4 variants)
   Replaces the flat .facts-table that stood above. Why: each row buried its
   answer mid-paragraph, so a block titled "in five lines" could not actually be scanned —
   "6 months" and "20%" sat in the middle of a 25-word sentence.
   Row = label (mono gold) · proof paragraph · ANSWER (mono, right-aligned, ONE line).
   ⚠️ The answer column is the whole idea: keep it ≤ ~22 characters. It is `white-space:nowrap`
   on desktop, so a longer value widens the column and squeezes the proof text. */
.passport{margin-top:40px;border:1px solid var(--line2);border-radius:var(--rcard);background:var(--panel);backdrop-filter:blur(9px);overflow:hidden}
.pp-head{display:flex;align-items:center;gap:15px;padding:clamp(19px,2.3vw,26px) clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line2);background:rgba(255,184,42,.055)}
.pp-head img{width:34px;height:24px;object-fit:cover;border-radius:3px;border:1px solid var(--line);flex:none}
.pp-head b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(16px,1.5vw,22px);color:var(--ink);letter-spacing:.01em;line-height:1.1}
/* (user 2026-08-11) the "CASP · MiCA" tag sits on the same scale as the gold row labels (.pp-k) */
.pp-head small{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1.5vw,16px);color:var(--gold);white-space:nowrap}
/* gap: базовый + 15px (2026-08-11) + 2vh (user 2026-08-11) — белый ответ справа
   почти касался серого текста доказательства */
.pp-row{display:grid;grid-template-columns:minmax(132px,19%) 1fr minmax(120px,auto);gap:calc(clamp(16px,2.4vw,36px) + 15px + 2vh);padding:clamp(18px,2.4vh,26px) clamp(22px,2.6vw,34px);border-top:1px solid rgba(255,255,255,.07);align-items:baseline}   /* (user 2026-08-11) +15px between the columns */
/* (user 2026-08-11) type sizes here follow the site canon, not their own scale:
   gold label = the eyebrow/над-heading size used by .class-card .cap and every section eyebrow;
   body text = the standard grey paragraph shared with .class-card li / .benefit-card p — clamp(17px,1.55vw,23px);
   the white one-line answer sits on the same size as the gold label (both are labels, not prose). */
.pp-k{font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1.5vw,16px);color:var(--gold);line-height:1.4}
.pp-v{font-size:clamp(17px,1.55vw,23px);color:var(--body);line-height:1.45}
/* (user 2026-08-11) the white one-line answer is typed like a benefit-card title (`.benefit-card h3`):
   Anton 400, uppercase, clamp(15px,1.35vw,20px), .015em — same size, style and face, not the mono label
   scale it used before. */
.pp-a{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(15px,1.35vw,20px);line-height:1.06;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* ≤860 the 3-column plate stops fitting: label + answer share row 1, proof spans underneath */
@media(max-width:860px){
  .pp-row{grid-template-columns:1fr auto;gap:8px clamp(14px,2vw,24px)}
  .pp-k{grid-column:1}
  .pp-a{grid-column:2;grid-row:1}
  .pp-v{grid-column:1/-1}
}
/* ≤700 the phone tier: same rule as .svc p / .step p (styles.css:752) —
   without it this is the only 15px body text on a phone. Answer may wrap rather than overflow. */
@media(max-width:700px){
  .pp-head small{display:none}
  .pp-a{white-space:normal}
  body .pp-v{font-size:15.5px!important;line-height:1.55!important}
}

/* Block 8 · COST OVERVIEW — "ladder with bars" (B24, user 2026-08-11, chosen from 3 variants)
   Replaces the flat `.cost-table`: it mixed one-time, monthly and refundable amounts in one
   column, so €38,000 setup and €700/mo sat side by side as if comparable, and the €50,000 share
   capital read as a cost although it comes back. The nature of each payment was ALREADY written
   in the page's own copy, in brackets ("one-time", "per month", "if required", "returned on
   exit") — the block just turns that into structure.
   ⚠️ Bars are normalised WITHIN a group, never across: a one-time fee and a monthly fee on one
   scale would be a lie. A group with a single row gets NO bar (it would always be 100%).
   ⚠️ Adding a row means recomputing that group's percentages — see scratchpad/costs-ladder.mjs. */
.cb{margin-top:40px}
.cb-grp{padding:clamp(34px,4vh,52px) 0 16px;border-top:1px solid var(--line2)}
.cb-grp:first-child{border-top:0;padding-top:0}
.cb-k{font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1.5vw,16px);color:var(--gold)}
.cb-k em{font-style:normal;margin-left:12px;letter-spacing:.1em;font-size:12px;color:var(--muted)}
.cb-row{padding:clamp(22px,2.8vh,32px) 0;border-top:1px solid rgba(255,255,255,.07)}
.cb-top{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,2.4vw,36px);align-items:baseline}
.cb-item{font-size:clamp(17px,1.55vw,23px);color:#c2c8d4;line-height:1.45}
.cb-sum{font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.04em;font-size:clamp(14px,1.5vw,16px);color:var(--gold);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
/* ⚠️ Дорожка НЕ на всю ширину и НЕ цвета разделителя строк. Первая версия была
   `rgba(255,255,255,.07)` во всю ширину — тот же цвет и та же длина, что у `border-top`
   соседней строки, и блок читался как каша из одинаковых линий (замечание пользователя). */
.cb-bar{height:3px;margin-top:16px;max-width:min(46%,380px);background:rgba(255,255,255,.045);border-radius:2px;overflow:hidden}
.cb-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(255,184,42,.35),var(--gold))}
.cb-note{font-size:clamp(14px,1.2vw,16px);color:var(--muted);line-height:1.45;margin-top:18px;max-width:78ch}
@media(max-width:700px){
  .cb-top{gap:8px 16px}
  .cb-k em{display:block;margin:4px 0 0}
  body .cb-item{font-size:15.5px!important;line-height:1.55!important}
}

/* Block 7 · LICENCE CLASSES */
.class-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
@media(max-width:860px){.class-cards{grid-template-columns:1fr}}
.class-card{border:1px solid rgba(255,184,42,.5);border-radius:8px;padding:30px;background:var(--panel);transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.class-card:hover{border-color:rgba(255,184,42,.6);transform:translateY(-5px) scale(1.05);box-shadow:0 26px 56px -22px rgba(255,184,42,.45)}
.class-card .cls-badge{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.86rem;font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.06em;background:rgba(255,184,42,.12);color:var(--gold);margin-bottom:16px}
.class-card h3{font-size:1.1rem;margin-bottom:20px}
.class-card .cap{font-size:clamp(12px,1.12vw,16px)!important;font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;white-space:nowrap}
.class-card ul{padding-left:20px;margin:0}
.class-card ul li{font-size:clamp(17px,1.55vw,23px)!important;color:#c2c8d4;margin-bottom:9px;line-height:1.45}

/* Block 7b · LICENCE CLASSES — ACCORDION RAIL (B23, user 2026-08-11, chosen from 3 variants)
   Layered ON TOP of B5: the column IS a `.class-card`, so the badge, h3, `.cap`, the orange
   frame and padding are inherited verbatim — the rail only replaces layout and hover.
   Specificity: `.class-cards.cls-rail` (0,2,0) beats `.class-cards` (0,1,0);
   `.class-cards.cls-rail .class-card:hover` (0,4,0) beats B5's `.class-card:hover` (0,2,0). */
.class-cards.cls-rail{display:flex;gap:16px;align-items:stretch}
/* ⚠️ NO `display:flex` on the card itself. A flex container blockifies its children, and
   `.cls-badge` (inline-block) then stretches from 81px to the full column width — the
   CLASS 1/2/3 plate visibly "slips". The card must stay a block, exactly as in B5. */
/* `overflow:hidden` — жёсткая гарантия, что текст сжимающейся колонки НИКОГДА не заедет
   на соседнюю. Без него при перетекании ширины строки сжимающейся карточки на кадр-другой
   остаются в старой раскладке и наезжают на наведённую (поймано пользователем). */
.class-cards.cls-rail .class-card{flex:1 1 0;min-width:0;overflow:hidden;
  transition:flex-grow .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,opacity .3s}
/* Пропорции подобраны по САМОМУ ТЯЖЁЛОМУ контенту (Словакия: длинные заголовки
   «Advisory, Order Flow & Transfer» и `.cap` «Own funds from €125,000»).
   Было .74/1.9 → сосед 261px: заголовок ломался на 4 строки, `.cap` на 2, блок выглядел
   сломанным. Стало .85/1.3 → сосед ~310px: `.cap` держится в строку, заголовок ≤3 строк.
   Ниже 310px этот блок опускать нельзя — при стандартном кегле текста он разваливается. */
.class-cards.cls-rail:hover .class-card{flex-grow:.85;opacity:.55}
/* `transform:none` is required: B5's hover is translateY(-5px) scale(1.05), and in a rail the
   width change IS the effect — a scale on top makes the text jump twice. */
.class-cards.cls-rail .class-card:hover{flex-grow:1.3;opacity:1;transform:none;
  border-color:rgba(255,184,42,.9);box-shadow:0 26px 56px -22px rgba(255,184,42,.45)}
/* ══ ТЕКСТ. Два токена сайта, локальных кеглей здесь НЕТ (user 2026-08-11) ══
   Серый = стандартный серый абзац clamp(17px,1.55vw,23px)/#c2c8d4/1.45 — ТОТ ЖЕ, что у
   .svc p, .step p. Рыжий = надзаголовок clamp(14px,1.5vw,16px) mono 700 gold.
   Подбирать кегль под ширину колонки ЗАПРЕЩЕНО: не влезает — меняем раскладку, не шрифт. */
.cls-rail .sv{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:9px 0}
.cls-rail .sv svg{width:16px;height:16px;color:var(--gold);margin-top:6px;flex:none}
.cls-rail .sv span{font-size:clamp(17px,1.55vw,23px);color:#c2c8d4;line-height:1.45}
/* Рыжий внутри карточки — ОДИН размер на бейдж, .cap и ключи панели. Плашка бейджа сохранена.
   Селектор длинный намеренно (0,4,0): у Словакии и Нидерландов в инлайновом <style> страницы
   лежит `.class-card .fee{font-size:…!important}` (0,2,0 + !important), и при равной
   специфичности инлайн страницы выигрывает по порядку подключения — см. §2.1 каталога. */
.class-cards.cls-rail .class-card :is(.cls-badge,.cap,.fee){font-size:clamp(14px,1.5vw,16px)!important;
  font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* .cap/.fee в B5 — nowrap; в сжатой колонке рельса это гарантированный вылет за карточку,
   поэтому здесь они переносятся */
.cls-rail .cap,.cls-rail .fee{white-space:normal}
/* ══ РАСКРЫТИЕ — ВНИЗ (user 2026-08-11) ══
   `grid-template-rows:0fr → 1fr` — единственный способ анимировать до auto-высоты без
   фиксированных пикселей и без JS. Внутренний `>div{overflow:hidden;min-height:0}` обязателен.
   Блок при этом меняет высоту (`align-items:stretch` равняет колонки по самой высокой) —
   это осознанная цена, см. заметку о высоте в B23. Держать содержимое панели КОРОТКИМ:
   чем компактнее панель, тем меньше сдвиг. */
.cls-body{display:block}
.cls-svc{min-width:0}
.cls-more{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .35s,margin-top .45s}
.cls-more>div{overflow:hidden;min-height:0}
.class-cards.cls-rail .class-card:hover .cls-more{grid-template-rows:1fr;opacity:1;margin-top:18px}
.cls-more-in{border-top:1px solid var(--line);padding-top:16px}
.cls-nx{color:var(--muted)}
.cls-fee{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,16px);color:var(--ink)}
.cls-more-k{font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1.5vw,16px);color:var(--gold);margin-bottom:8px}
.cls-more-p{font-size:clamp(17px,1.55vw,23px);color:#c2c8d4;line-height:1.45}
.cls-more-p+.cls-more-k,.cls-more .sv+.cls-more-k{margin-top:16px}
@media(max-width:1080px){
  .class-cards.cls-rail{flex-wrap:wrap}
  .class-cards.cls-rail .class-card{flex:1 1 calc(50% - 8px)}
}
@media(max-width:860px){
  .class-cards.cls-rail{flex-direction:column}
  .class-cards.cls-rail .class-card{flex:none}
}
/* touch has no hover at all — keep every panel open, or the content is unreachable */
@media(hover:none){
  .cls-more{grid-template-rows:1fr!important;opacity:1!important;margin-top:18px!important}
  .class-cards.cls-rail:hover .class-card{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .class-cards.cls-rail .class-card,.cls-more{transition:none!important}
}
/* phone tier — same rule as .svc p / .step p (styles.css:752):
   the standard gray drops to 15.5px on phones, and both greys of this block go with it */
@media(max-width:700px){
  body .cls-rail .sv span,body .cls-more-p{font-size:15.5px!important;line-height:1.55!important}
}

/* Block 10 · ROADMAP WITH PROTEGRA — metrics match the DORA "10-week" timeline (.tl-*) */
.roadmap-list{margin-top:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:0}
.roadmap-step{display:flex;gap:clamp(18px,2.4vw,42px);align-items:flex-start;min-height:20vh;padding:clamp(20px,3vh,48px) 0;border-bottom:1px solid rgba(255,255,255,.06);border-top:none}
.roadmap-step:last-child{border-bottom:none}
.roadmap-step .num{flex-shrink:0;width:clamp(82px,9vw,140px);font-family:'JetBrains Mono',monospace;font-size:clamp(.82rem,1.1vw,1.05rem);color:var(--gold);line-height:1.4;padding-top:.35em}
.roadmap-step h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;letter-spacing:.015em;font-size:clamp(1rem,1.5vw,1.4rem);margin-bottom:clamp(6px,.6vw,12px);line-height:1.12}
.roadmap-step p{font-size:clamp(19.5px,1.75vw,23.4px);color:#c2c8d4;line-height:1.55;max-width:60ch}

/* (user 2026-08-11, mobile revision) two fixes found by auditing every page at 375/360px:
   1. a raw URL pasted into an article (`https://www.amlintelligence.co…`) does not wrap and stuck 48px
      out of a 360px screen — let long words/links break inside article copy;
   2. the smallest texts fell under the 13px floor on phones: the calculator disclaimer (11.5px),
      `<small>` (11px) and the cost note (12.8px). */
.article-body{overflow-wrap:anywhere}
.article-body a{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:700px){
  body .calc .disc,body .disc{font-size:13px!important;line-height:1.5}
  body .cost-note,body .page small{font-size:14px!important}   /* 13 -> 14px: 13px — порог прописного моно-ярлыка, а <small> здесь обычный текст. Правило с !important перекрывало любую страничную правку, и один только хаб держал на нём 17 элементов ниже порога. */
}

/* Block 3 · SERVICE HIGHLIGHTS (scene 2) — the 01–04 gutter carries a gold icon instead of a number,
   because this block is coverage, not a sequence (the sequence is block 10). */
.step.hl{grid-template-columns:52px 1fr}                       /* (user 2026-08-11) gutter widened with the 2× icon */
.step.hl .hl-icon{color:var(--gold);display:block;padding-top:2px}
.step.hl .hl-icon svg{width:40px;height:40px;display:block}    /* (user 2026-08-11) icons doubled 20→40 */
@media(max-width:760px){.step.hl{grid-template-columns:44px 1fr}.step.hl .hl-icon svg{width:36px;height:36px}}

/* ══════════════════════════════════════════════════════════════════════════════════════
   NAVIGATION v2 (user 2026-08-13) — MiCA → Licensing, Accounting вынесен, INFRA добавлена.
   Прототип, на котором это утверждали: /preview-nav.html (там же вся аргументация).
   Порог бургера поднят 920 → 1024 ВЫШЕ по файлу (два блока), потому что пунктов стало 7:
   при 1000px логотип + меню + кнопка занимали ровно 100% ширины, запаса не оставалось.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── воздух вокруг логотипа и кнопки ──────────────────────────────────────────────────
   .nav-in — flex со space-between, поэтому зазоры логотип↔меню и меню↔кнопка это НЕ
   свойство, а остаток свободного места пополам. Семь пунктов вместо пяти его съели
   (было ~154px, стало 62px). Возвращено сужением промежутков и полей + шириной на ≥1441.
   Замер при 1280px: 62 → 103px. --nav-gap вынесен переменной: менять одним числом. */
:root{--nav-gap:16.5px}
.menu{gap:var(--nav-gap)}
.nav-in{padding:11px 15px}
@media(min-width:1441px){.nav-in{max-width:1420px}}   /* вровень с .wrap контента */

/* ── фантомная каретка: ровный ритм ───────────────────────────────────────────────────
   У пунктов с дропдауном справа ▾ и 5px до неё, у остальных ничего — ритм рвался.
   Пункты без списка получают такую же каретку — ВИДИМУЮ (владелец, 2026-08-13), но статичную:
   разворот на 180° висит на `.menu .menu-item:hover .dd-caret`, а эти пункты не .menu-item,
   поэтому не крутятся сами собой; transition:none закрепляет это явно.
   :not(.menu-cta) обязателен — это клон CTA, который site.js кладёт в .menu для мобильного
   оверлея; без исключения правило перебивает его display:none и клон вылезает в ряд. */
@media(min-width:1025px){.menu>a:not(.menu-cta){display:inline-flex;align-items:center;gap:5px}}
.menu .dd-caret.flat{transition:none;pointer-events:none}   /* видимая, но статичная: не разворачивается */

/* ── полоса 1025–1200: ряд поджимается, мега-меню цепляется за навигацию ───────────────
   .dd-mega (min-width 560px, left:-10px) вылезал за правый край окна: при 925px правый край
   уходил на 969px. Разворот вправо не спасает — уезжает за ЛЕВЫЙ край. Решение: мега-меню
   перестаёт цепляться за свой пункт и растягивается по ширине навигации.
   :has(.dd-mega) обязателен — иначе простые дропдауны (Accounting, INFRA) тоже начинают
   считать left:-10px от .nav-in и уезжают за левый край на 10px. */
@media(min-width:1025px) and (max-width:1200px){
  :root{--nav-gap:13px}
  .menu{font-size:12.2px;letter-spacing:.05em}
  .nav-in{padding:11px 16px;position:relative}
  .pill{padding:8px 13px;font-size:12px}
  .menu .menu-item:has(.dd-mega){position:static}
  .menu .dd-mega{left:0;right:0;width:auto;min-width:0}
}
.menu .dd{max-width:calc(100vw - 28px)}
.menu .dd-lic{min-width:760px}                        /* три группы стран рядом */

/* ── INFRA: голубая, некликабельная, с тизером вместо списка ──────────────────────────
   Специфичность нарочно выше мобильного nav .menu .menu-item>a{color:#e7ecf5},
   иначе в оверлее INFRA теряет фирменный цвет. Подчёркивание не выезжает — рука сама
   понимает, что кликать нечего. */
nav .menu .menu-item.infra>a{color:#0099cc!important;cursor:default;text-shadow:0 0 14px rgba(0,153,204,.55)}
nav .menu .menu-item.infra>a::after{background:#0099cc!important;right:100%!important}
nav .menu .menu-item.infra>a:hover{color:#0099cc!important}
.menu .infra .dd-h{color:#0099cc}
.menu .dd-infra{min-width:320px;max-width:340px;padding:15px 17px 17px}
.menu .dd-infra .dd-h{padding:0 0 8px}
.menu .dd-note{margin:0;font-size:13.5px;line-height:1.6;color:#c3cddb;letter-spacing:.005em;
  text-transform:none;white-space:normal}
.menu .dd-note b{color:#fff;font-weight:600}

/* ── заглушка флага: двухбуквенный код там, где SVG ещё нет ───────────────────────────
   (владелец 2026-08-25) В меню таких плашек больше нет: последние семь (BH PA VG VI KY VC SC)
   нарисованы в стиле «герб крупно». Правило оставлено фолбэком на случай, если новая
   юрисдикция появится в списке раньше, чем для неё найдётся флаг. */
.cc{width:20px;height:20px;border-radius:5px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;font-family:"JetBrains Mono",monospace;font-size:8.5px;font-weight:600;
  letter-spacing:.02em;color:rgba(255,255,255,.42);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12)}

/* Флаг в строке «soon» гасится явно: .dd-soon задаёт только color, а <img> его не наследует —
   без этого недоступные юрисдикции светились бы ярче живых. */
.menu .dd .dd-soon .flag{opacity:.4;filter:saturate(.7)}

/* ── мобильное мега-меню в ДВА столбца (≤1024) ────────────────────────────────────────
   Licensing с 19 странами одним столбцом — простыня на два экрана. Специфичность (0,4,1)
   ровно как у продакшн-правила .menu-item.dd-open>.dd{display:flex}, иначе оно выигрывает
   и столбцы схлопываются. Группа целиком остаётся в своём столбце. */
@media(max-width:1024px){
  nav .menu .dd{max-width:none}
  nav .menu .menu-item.dd-open>.dd-mega{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;
    align-items:start;padding-left:8px}
  nav .menu .dd-mega .dd-col{display:flex;flex-direction:column;min-width:0}
  nav .menu .dd-lic>.dd-lead{grid-column:1 / -1;margin-bottom:6px}   /* в две колонки баннер остаётся полосой, а не ячейкой */
  nav .menu .dd-mega .dd-h{padding:12px 4px 3px;font-size:10px;letter-spacing:.1em;line-height:1.3}
  nav .menu .dd-mega a,nav .menu .dd-mega .dd-soon{padding:10px 4px;font-size:13.5px;line-height:1.3;gap:8px}
  nav .menu .dd-mega .dd-soon em{margin-left:0;padding-left:6px;font-size:9px}
  nav .menu .dd-mega .flag,nav .menu .dd-mega .cc{width:17px;height:17px}
  nav .menu .dd-infra{min-width:0;max-width:none;padding:2px 0 10px 12px}
  nav .menu .dd-note{padding:10px 6px 4px;font-size:14px}
}
@media(max-width:400px){
  nav .menu .dd-mega a,nav .menu .dd-mega .dd-soon{font-size:12.5px;gap:6px}
  nav .menu .dd-mega .dd-soon em{display:none}   /* на 360px метка съедает строку, цвет статус и так сообщает */
}

/* ── футер: бренд + три смысловые колонки (было пять) ─────────────────────────────────
   Accounting и INFRA переехали ПОД Our Services одной колонкой, Company с соцсетями встала
   сразу рядом третьей. .foot-h2 — второй заголовок внутри колонки.
   Правило на ≤700 повторено явно: у .foot-grid-nav2 та же специфичность, что у продакшн
   .foot-grid, но оно идёт позже и перебивало «одну колонку» — на 375px оставалось две по 165px. */
.foot-grid-nav2{grid-template-columns:1.5fr 1.1fr 1.1fr .95fr;gap:24px 62px}
@media(min-width:1441px){.foot-grid-nav2{grid-template-columns:1.45fr 1.1fr 1.1fr .95fr;gap:24px 80px}}
@media(max-width:1180px) and (min-width:901px){.foot-grid-nav2{grid-template-columns:1.3fr 1fr 1fr;gap:30px 44px}}
@media(max-width:900px){.foot-grid-nav2{grid-template-columns:1fr 1fr!important;gap:22px 34px}}
@media(max-width:700px){.foot-grid-nav2{grid-template-columns:1fr!important;gap:26px 0!important}}
.foot-h2{margin-top:26px}
@media(max-width:700px){.foot-h2{margin-top:20px}}
.foot-infra{color:#38b6e0}
.foot-infra em{color:#0099cc}


/* ════════════════════════════════════════════════════════════════════════════
   JURISDICTION BLOCK SET — pilot (2026-08-16)

   Added for the 12-page jurisdiction batch. Owner's decision: these are NOT
   entered into BLOCK-CATALOG.md yet — they ship as a pilot on these pages and
   get promoted to the catalog only if they are kept.

   Everything here is assembled from primitives that already exist in this file.
   No new type scale, no new colours, no new hover. Where a rule looks new, the
   comment says which catalog block it was copied from.

   Shared tokens used verbatim:
     eyebrow          clamp(14px,1.5vw,16px) mono 700 caps ls .06em, var(--gold)
     standard gray    clamp(17px,1.55vw,23px) #c2c8d4 lh 1.45   ("серый абзац")
     card chrome      1px var(--line) · radius var(--rcard) · padding 30 ·
                      var(--panel) · blur(9px) · gold hover              (B3/B4)
     hairline row     border-top:1px solid var(--line)                      (B6)
     mobile floor     ≤700 → gray text 15.5px !important             (§2 п.10)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── shared muted in-card label. Smaller than the eyebrow on purpose: inside a
      card it is a field name, not a section heading. Used by JB1 and JB3. ── */
:root{ --jb-label: clamp(13px,1.05vw,14px); }   /* пол 12 -> 13px: на 390px 1.05vw даёт 4px, работает именно нижняя граница, а порог прописного моно-ярлыка 13px. Десктоп не трогается: там clamp упирается в 14px. */

/* ═══ JB1 · .lscape — licence classes / activities / tracks / tiers ═══════════
   Replaces B5's bullet body with labelled rows (Capital from / Fits if /
   Included / Doesn't cover / …). The frame, badge and title are B5 verbatim.
   NOT the B23 hover-rail: these pages carry 3–9 cards and every labelled row
   has to stay visible — "Doesn't cover" is the most useful line on the card and
   must never sit behind a hover.
   TWO columns, not three: at 3 columns the standard gray paragraph does not fit,
   and the catalog forbids shrinking type to fit a column (B23) — so the layout
   changes instead of the type.                                                */
.lscape-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
@media(max-width:1080px){ .lscape-grid{ grid-template-columns:1fr; } }

.lscape-card{                                    /* frame = B5 (static gold outline, radius 8) */
  border:1px solid rgba(255,184,42,.5); border-radius:8px; padding:30px;
  background:var(--panel); backdrop-filter:blur(9px);
  transition:border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.lscape-card:hover{                              /* standard site-wide gold hover */
  border-color:rgba(255,184,42,.85); transform:translateY(-5px) scale(1.02);
  box-shadow:0 26px 56px -22px rgba(255,184,42,.45);
}
.lscape-card .lc-badge{                          /* = .cls-badge (B5) verbatim */
  display:inline-block; padding:3px 10px; border-radius:4px; margin-bottom:16px;
  font-family:'JetBrains Mono',monospace; font-size:.86rem; font-weight:500; letter-spacing:.06em;
  background:rgba(255,184,42,.12); color:var(--gold);
}
.lscape-card h3{
  font-size:clamp(16px,1.5vw,22px) !important;   /* !important beats the shared 28px card-title force */
  line-height:1.15; margin-bottom:18px;
}
.lscape-row{                                     /* hairline row idiom = B6 */
  display:grid; grid-template-columns:minmax(88px,24%) 1fr; gap:6px 18px;
  align-items:baseline; padding:12px 0; border-top:1px solid var(--line);
}
.lscape-row.wide{ grid-template-columns:1fr; }   /* set by the renderer when the label is long */
.lscape-row .lr-k{
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--jb-label); color:rgba(255,255,255,.45); line-height:1.4;
}
.lscape-row .lr-v{ font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.45; }
.lscape-row.neg .lr-k{ color:rgba(255,255,255,.62); }   /* "Doesn't cover" reads a shade louder */
@media(max-width:700px){
  .lscape-card{ padding:22px 18px; }
  .lscape-row{ grid-template-columns:1fr; gap:4px; padding:11px 0; }
  body .lscape-row .lr-v{ font-size:15.5px !important; line-height:1.55 !important; }
}

/* ═══ JB2 · .ctab — comparison table, 2 to 5 data columns ═════════════════════
   B12 transposes a comparison into two cards because a real multi-column table
   cannot stack; that trick stops working at five columns (the UAE page).
   Here: ONE DOM. ≥900 it is a real table. Below 900 the same rows re-render as
   cards — one card per attribute, each line "column name: value" pulled from
   data-col. Nothing is duplicated (duplicate copy would split the ranking) and
   no cell is dropped.                                                          */
.ctab-wrap{ margin-top:40px; }
.ctab{ width:100%; border-collapse:collapse; }
.ctab th, .ctab td{ text-align:left; vertical-align:top; padding:18px 18px 18px 0; border-top:1px solid var(--line); }
.ctab thead th{
  border-top:none; padding-top:0;
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--jb-label); color:var(--gold); line-height:1.4;
}
.ctab tbody th{                                  /* the row label */
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--jb-label); color:rgba(255,255,255,.45);
  width:minmax(120px,16%); padding-right:24px; line-height:1.4;
}
.ctab td{ font-size:clamp(15px,1.25vw,19px); color:#c2c8d4; line-height:1.45; }
.ctab td a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(255,184,42,.35); }
.ctab td a:hover{ border-bottom-color:var(--gold); }
.ctab-note{
  margin-top:clamp(22px,2.6vw,34px); padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line); max-width:78ch; font-size:var(--tb-lead); color:#c7cedd; line-height:1.55;
}
@media(max-width:900px){
  .ctab, .ctab tbody, .ctab tr, .ctab td, .ctab th{ display:block; }
  .ctab thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ctab tr{                                      /* one card per attribute = B3 chrome */
    border:1px solid var(--line); border-radius:var(--rcard); padding:22px 18px;
    background:var(--panel); backdrop-filter:blur(9px); margin-bottom:14px;
  }
  .ctab tbody th{ width:auto; padding:0 0 12px; border-top:none; color:var(--gold); }
  .ctab td{ padding:10px 0 0; border-top:1px solid var(--line); }
  .ctab td::before{                              /* the column name, from data-col */
    content:attr(data-col) ; display:block; margin-bottom:3px;
    font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; font-size:var(--jb-label); color:rgba(255,255,255,.45);
  }
}
@media(max-width:700px){
  body .ctab td{ font-size:15.5px !important; line-height:1.55 !important; }
  body .ctab-note{ font-size:15.5px !important; }
}

/* ═══ JB3 · .rates — tax rows (company and founder) ═══════════════════════════
   The specs label this B11, but B11 (.cost-table) is two-column, and
   these tables are three-column with a prose third cell. Rebuilt on the B6 row:
   hairline, label left, value right in gold mono, explanation as the paragraph
   underneath — which is what the third column always was.
   ⚠️ CORRECTED 2026-08-31: this comment used to call `.cost-table` "dead". It is NOT.
   `accounting-poland.html` uses it live in four `<table class="cost-table price-panel">`.
   The old claim came from a scan of the four jurisdiction pages only — accounting was
   never in the check set. Do not delete `.cost-table` from this file.           */
.rates{ margin-top:40px; }
.rate-row{ padding:clamp(16px,2.2vh,26px) 0; border-top:1px solid var(--line); }
.rate-top{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline; }
.rate-k{ font-size:clamp(1rem,1.5vw,1.4rem); font-family:Anton,sans-serif; font-weight:400;
  text-transform:uppercase; color:var(--ink); line-height:1.15; }
.rate-v{
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(14px,1.5vw,16px); color:var(--gold);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.rate-p{ margin-top:8px; font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.45; max-width:78ch; }
.rates-close{ margin-top:clamp(24px,3vw,40px); max-width:78ch; font-size:var(--tb-lead); color:#c7cedd; line-height:1.6; }
.rates-close p + p{ margin-top:14px; }
@media(max-width:700px){
  .rate-top{ grid-template-columns:1fr; gap:4px; }
  .rate-v{ white-space:normal; }
  body .rate-p{ font-size:15.5px !important; line-height:1.55 !important; }
  body .rates-close{ font-size:15.5px !important; }
}

/* ═══ JB4 · .jstrip — "Comparable jurisdictions" ══════════════════════════════
   The specs label this B15, but B15 is the blog card (image, tag, date, Read) —
   using it here would make every page use B15 twice for two unrelated things.
   This is B3/B4 card chrome with a gold arrow. A card whose target does not
   exist yet renders as .soon: no hover, no arrow, grey "soon" pill instead —
   the owner's rule, so a visitor is never sent to a 404.                        */
.jstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
@media(max-width:960px){ .jstrip{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px){ .jstrip{ grid-template-columns:1fr; } }
.jcard{
  display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--rcard);
  padding:26px 24px; background:var(--panel); backdrop-filter:blur(9px);
  transition:border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
a.jcard:hover{ border-color:rgba(255,184,42,.6); transform:translateY(-5px) scale(1.03);
  box-shadow:0 26px 56px -22px rgba(255,184,42,.45); }
.jcard h3{ font-size:clamp(15px,1.35vw,20px) !important; margin-bottom:8px; min-height:1.9em; }
.jcard p{ font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.45; }
.jcard .jc-go{ display:block; margin-top:14px; color:var(--gold);
  font-family:'JetBrains Mono',monospace; font-size:clamp(13px,1.1vw,15px); letter-spacing:.06em; }
.jcard.soon{ opacity:.72; }
.jcard.soon:hover{ transform:none; box-shadow:none; border-color:var(--line); }
@media(max-width:700px){ body .jcard p{ font-size:15.5px !important; line-height:1.55 !important; } }

/* ── the grey "soon" pill. Also used inline anywhere a target is not built yet. ── */
.soon-pill{
  display:inline-block; margin-top:14px; padding:5px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(11px,.95vw,13px); color:rgba(255,255,255,.5);
  cursor:default; user-select:none;
}

/* ═══ JB5 · .place — the place-anchor line ════════════════════════════════════
   "ZUG. THE CANTON THAT BUILT CRYPTO VALLEY." — a typographic inset over the
   particle scene. Deliberately NOT B17 (statement): B17 is nowrap and caps out
   around 14 characters a line, and these lines run 41–71 characters, which is
   exactly what pushed two earlier pages into horizontal scroll.
   NOT a heading in the DOM either, so it never enters the outline or JSON-LD.  */
.place{ padding-block:clamp(70px,12vh,150px); text-align:center; }
.place-line{
  margin:0 auto; max-width:min(1100px,92%);
  font-family:Anton,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,4.2vw,64px); line-height:1.06; letter-spacing:.005em;
  color:var(--ink); text-wrap:balance;
}
.place-line .pl-name{ color:var(--gold); }       /* the place itself, up to the first full stop */
.place-body{
  margin:clamp(20px,2.6vw,32px) auto 0; max-width:78ch;
  font-size:var(--tb-lead); color:#c7cedd; line-height:1.6;
}
@media(max-width:700px){
  .place{ padding-block:clamp(48px,9vh,90px); }
  body .place-body{ font-size:15.5px !important; line-height:1.6 !important; }
}

/* ═══ JB6 · .qcards — the "OUR <COUNTRY> SERVICE" question cards ══════════════
   Client question in caps and quotes as the card's visual title, answer below.
   The question is NOT an <h3>: it must not take a slot in the heading outline.
   Icons are gold SVG, never emoji — the site dropped emoji site-wide in June
   2026 and these pages must not be the only ones that carry them.              */
.qcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
@media(max-width:900px){ .qcards{ grid-template-columns:1fr; } }
.qcard{
  border:1px solid var(--line); border-radius:var(--rcard); padding:30px;
  background:var(--panel); backdrop-filter:blur(9px);
  transition:border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.qcard:hover{ border-color:rgba(255,184,42,.6); transform:translateY(-5px) scale(1.02);
  box-shadow:0 26px 56px -22px rgba(255,184,42,.45); }
.qcard .qc-i{ color:var(--gold); margin-bottom:14px; opacity:.92; line-height:0; }
.qcard .qc-i svg{ width:2.05rem; height:2.05rem; display:block; }
.qcard .qc-q{
  font-family:Anton,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,1.35vw,20px); line-height:1.25; color:var(--ink); margin-bottom:12px;
}
.qcard .qc-a{ font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.45; }
.qcards-close{ margin-top:clamp(24px,3vw,40px); max-width:78ch; font-size:var(--tb-lead); color:#c7cedd; line-height:1.6; }
@media(max-width:700px){
  .qcard{ padding:22px 18px; }
  body .qcard .qc-a{ font-size:15.5px !important; line-height:1.55 !important; }
  body .qcards-close{ font-size:15.5px !important; }
}

/* ═══ JB7 · .chk2 — "works if" / "does not work if", two columns ══════════════
   B20's .chk-grid is symmetric: both columns identical, gold ticks. Here the
   columns are semantically opposed, so the right one is muted and carries a
   prohibition glyph. Deliberately NOT red: on /aml-officer-mlro it was already
   settled that red asserts "this is bad", and "not for you" is not "bad".
   .chk-grid itself is lifted from aml-officer-mlro.html into shared so the new
   pages can use it; the page-local copy there is identical and stays.          */
.chk-grid{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(24px,3vw,56px); row-gap:0; margin-top:40px; }
.chk-row{ display:grid; grid-template-columns:28px 1fr; gap:16px; align-items:start;
  padding:clamp(16px,2.2vh,26px) 0; border-top:1px solid var(--line); }
.chk-row .chk-i{ color:var(--gold); padding-top:2px; line-height:0; }
.chk-row .chk-i svg{ width:22px; height:22px; display:block; }
.chk-row h3{ font-size:clamp(1rem,1.5vw,1.4rem); margin-bottom:clamp(4px,.6vw,10px); line-height:1.12; }
.chk-row p{ font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.45; max-width:46ch; }

.chk2{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(24px,3vw,56px); row-gap:34px; margin-top:40px; }
@media(max-width:860px){ .chk2{ grid-template-columns:1fr; } }
.chk2-h{
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(14px,1.5vw,16px); color:var(--gold); margin-bottom:4px;
}
.chk2-col.neg .chk2-h{ color:rgba(255,255,255,.5); }
.chk2-col.neg .chk-row .chk-i{ color:rgba(255,255,255,.42); }
.chk2-col.neg .chk-row h3{ color:rgba(255,255,255,.78); }
.chk2-col .chk-row{ grid-template-columns:26px 1fr; }
.chk2-col .chk-row p{ max-width:52ch; }
@media(max-width:700px){
  .chk-grid{ grid-template-columns:1fr; }
  .chk-row{ grid-template-columns:24px 1fr; gap:12px; padding:14px 0; }
  .chk-row .chk-i svg{ width:19px; height:19px; }
  body .chk-row p{ font-size:15.5px !important; line-height:1.55 !important; }
}

/* ═══ JB8 · .stops — "where the licence stops" ════════════════════════════════
   A short prose block that states the boundary of the licence. Marked with the
   same muted prohibition glyph as the negative column of JB7 so the two read as
   one idea, and set off by the B6 hairline rather than a card.                 */
.stops{ margin-top:40px; border-top:1px solid var(--line); padding-top:clamp(22px,2.8vw,34px);
  display:grid; grid-template-columns:34px 1fr; gap:clamp(16px,2vw,26px); align-items:start; }
.stops .st-i{ color:rgba(255,255,255,.42); line-height:0; padding-top:3px; }
.stops .st-i svg{ width:26px; height:26px; display:block; }
.stops p{ font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.55; max-width:78ch; }
.stops p + p{ margin-top:16px; }
@media(max-width:700px){
  .stops{ grid-template-columns:24px 1fr; gap:14px; }
  .stops .st-i svg{ width:20px; height:20px; }
  body .stops p{ font-size:15.5px !important; line-height:1.6 !important; }
}

/* ═══ JB9 · .reglist — a named register list, one line, no icons ══════════════
   Hong Kong lists its 13 licensed platforms as a single ·-separated line. Mono,
   muted, deliberately quiet: it is evidence, not a feature grid.               */
.reglist{ margin-top:32px; border-top:1px solid var(--line); padding-top:24px;
  font-family:'JetBrains Mono',monospace; font-size:clamp(14px,1.25vw,17px);
  color:#c2c8d4; line-height:1.9; max-width:88ch; }
.reglist b{ color:var(--ink); font-weight:500; }
.reglist .rl-sep{ color:rgba(255,255,255,.3); padding:0 4px; }
@media(max-width:700px){ body .reglist{ font-size:14px !important; line-height:1.8 !important; } }

/* ═══ JB10 · .notice — archive / superseded banner ════════════════════════════
   Used by /vasp, where the honest answer to the query is "this regime no longer
   exists in the EU". Sits directly under the hero so nobody reads the page as
   current advice. Muted, not alarmist: it is a statement of fact.              */
.notice{
  margin-top:34px; border:1px solid rgba(255,255,255,.18); border-left:3px solid var(--gold);
  border-radius:var(--rcard); background:rgba(255,184,42,.055); padding:clamp(20px,2.6vw,30px);
  display:grid; grid-template-columns:30px 1fr; gap:clamp(14px,1.8vw,22px); align-items:start;
}
.notice .nt-i{ color:var(--gold); line-height:0; padding-top:2px; }
.notice .nt-i svg{ width:24px; height:24px; display:block; }
.notice .nt-k{
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(12px,1.05vw,14px); color:var(--gold); margin-bottom:8px;
}
.notice p{ font-size:clamp(17px,1.55vw,23px); color:#c2c8d4; line-height:1.5; }
.notice p + p{ margin-top:12px; }
@media(max-width:700px){
  .notice{ grid-template-columns:1fr; gap:10px; }
  .notice .nt-i{ display:none; }
  body .notice p{ font-size:15.5px !important; line-height:1.6 !important; }
}

/* ═══ JB11 · passport additions (B22) ═════════════════════════════════════════
   Two things the four live jurisdiction pages never needed:
   1. .pp-row.no-a — a row that carries a RULE, not a value (ADGM's capital is a
      formula, its legal base is five instruments). Rather than invent a number
      or leave a hole, the answer column is dropped for that row alone and the
      evidence runs the full width.
   2. .pp-as — a small "as of <date> · <register>" stamp under a live count, so
      a figure that moves weekly is dated on the page instead of silently ageing.
   The 22-character answer limit is unchanged; rows that carried two or three
   different values are split into separate rows instead (owner's variant D).   */
.pp-row.no-a{ grid-template-columns:minmax(132px,19%) 1fr; }
.pp-as{
  display:block; margin-top:6px;
  font-family:'JetBrains Mono',monospace; font-weight:400; text-transform:none;
  letter-spacing:.02em; font-size:clamp(11px,.95vw,12.5px); color:var(--muted);
  white-space:normal;
}
@media(max-width:860px){ .pp-row.no-a{ grid-template-columns:1fr; } }

/* ═══ JB12 · .calc additions ══════════════════════════════════════════════════
   The existing calculator (styles.css:287–337) is reused as-is. Three pages need
   behaviour it has never had:
     .calc-warn  a branch that must NOT be added to the total (Canada's CSA/CIRO
                 route is a different project, and summing it would lie)
     .calc-ask   a tier with no market anchor at all → a button instead of a
                 number (Hong Kong, and Switzerland's banking and DLT tiers)
     .rline.nofig a cost line that is real but has no published price           */
.calc-warn{
  margin-top:14px; border:1px solid rgba(255,255,255,.16); border-left:3px solid rgba(255,255,255,.4);
  border-radius:var(--rcard); background:rgba(255,255,255,.04); padding:14px 16px;
  font-size:13.5px; color:#c2c8d4; line-height:1.55;
}
.calc-warn b{ color:var(--ink); font-weight:600; }
.calc-ask{ margin-top:16px; }
.calc-ask .ca-t{ font-family:Anton,sans-serif; text-transform:uppercase; font-size:clamp(20px,2vw,28px);
  color:var(--ink); line-height:1.1; margin-bottom:10px; }
.calc-ask p{ font-size:13.5px; color:var(--muted); line-height:1.55; margin-bottom:14px; }
.rline.nofig .v{ color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:12px; }

/* ── JB12 additions to the existing calculator chrome (styles.css:287-337).
      The live tabs are a hard repeat(3,1fr); the new pages carry 2–5 options, so they need a
      track that fits its content. Plus a range input, which the site has never had. ── */
.tabs.auto{grid-template-columns:repeat(auto-fit,minmax(122px,1fr))}
.tabs.auto .tab{padding:11px 9px;font-size:13px}
.tabs.auto .tab small{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.75}
.gtitle b.sl-val{color:var(--gold);font-family:'JetBrains Mono',monospace;letter-spacing:0;font-size:12.5px}
input.sl{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;
  background:rgba(255,255,255,.14);outline:none;margin:6px 0 16px}
input.sl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--gold);border:none;cursor:pointer;box-shadow:0 0 0 4px rgba(255,184,42,.18)}
input.sl::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);
  border:none;cursor:pointer;box-shadow:0 0 0 4px rgba(255,184,42,.18)}
input.sl:focus-visible{box-shadow:0 0 0 3px rgba(255,184,42,.22)}
@media(max-width:700px){.tabs.auto{grid-template-columns:1fr 1fr}.tabs.auto .tab{font-size:12.5px}}
@media(max-width:400px){.tabs.auto{grid-template-columns:1fr}}

/* ── JB13 · three small additions the jurisdiction batch needed, each because a source line had
      nowhere to render and was being dropped silently.
      .stat-sub  a second all-caps line inside a hero stat tile (Dubai, HK, Singapore, Cyprus)
      .scene-close  the closing paragraph under a particle scene's rows (HK, ADGM, Czechia, …)
      .grp-h  a group heading above a list or a rate table ("People" / "Presence" / "The file") ── */
.scene[data-fig="0"] .stat .stat-sub{display:block;margin-top:4px;color:rgba(255,255,255,.62);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  font-size:clamp(10.5px,.88vw,12.5px)}
.story[data-scroll-model="flow"] .scene-body .scene-close{margin-top:clamp(20px,2.6vh,34px);
  padding-top:clamp(18px,2.2vh,26px);border-top:1px solid var(--line);
  max-width:78ch;color:#c7cedd;line-height:1.6}
.grp-h{margin:clamp(26px,3vw,40px) 0 6px;font-size:clamp(1rem,1.5vw,1.4rem);line-height:1.15}
.sec-head + .grp-h{margin-top:clamp(18px,2vw,28px)}
@media(max-width:700px){
  body .story[data-scroll-model="flow"] .scene-body .scene-close{font-size:15.5px!important;line-height:1.6!important}
}

/* ── JB14 · two latent layout bugs the jurisdiction batch exposed.
   1. Hero stat band: `repeat(3,1fr)` is `minmax(auto,1fr)`, so a track can never shrink below its
      content's min-content width. The live pages have short stat labels and never hit it; the
      Switzerland hero carries "EFFECTIVE CORPORATE TAX IN LUCERNE" and pushed the band 189px past
      the viewport at 800px. minmax(0,1fr) lets the track shrink, which is what 1fr was meant to do.
   2. .cb-sum (B24) is nowrap because it normally holds "€38,000". Several sources put a whole
      sentence in that cell ("CHF 1,600–1,800 (≈€1,700–1,900), depending on the SRO — PolyReg…").
      The renderer marks those `.long`, and a long value drops to its own full-width line instead
      of being forced onto one. Text is never shortened to fit; the layout gives way. ── */
/* ── ИСПРАВЛЕНО 2026-09-01: правило ниже стояло ВНЕ медиа-запроса, с !important и ПОЗЖЕ по файлу,
   чем мобильное `grid-template-columns:1fr!important` из блока ≤700px. При равной специфичности
   выигрывает последнее — и полоса статистики героя держала ТРИ колонки на любой ширине, включая
   360px, на 24 действующих страницах. Замерено на team.html при 375px: три дорожки по ~100px,
   текстовая колонка внутри ~60px, слова рвались посреди себя — «JURISD ICTIONS», «SUCCE SS RATE»,
   «regulati on», «complet ed our licensin g engage ment». MOBILE-GUIDE §1 всё это время описывал
   схлопывание в одну колонку как уже сделанное.
   Задача самого правила (JB14) — дать дорожкам сжиматься на ШИРОКИХ экранах: швейцарский герой с
   «EFFECTIVE CORPORATE TAX IN LUCERNE» выносил полосу на 189px за вьюпорт при 800px. Для этого
   ширины ниже 700px не нужны вовсе, поэтому правило ограничено fluid-ярусом и выше. ── */
@media(min-width:701px){
  .story[data-scroll-model="flow"] .scene[data-fig="0"] .stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
.scene[data-fig="0"] .stat{min-width:0}
.scene[data-fig="0"] .stat .stat-lbl,.scene[data-fig="0"] .stat .stat-sub,
.scene[data-fig="0"] .stat p{overflow-wrap:break-word}
.scene[data-fig="0"] .stat .num{overflow-wrap:normal;hyphens:none}
.cb-row .cb-top:has(.cb-sum.long){grid-template-columns:1fr}
.cb-sum.long{white-space:normal;text-align:left;margin-top:6px;line-height:1.45}

/* ── JB15 · restore B5's gold money line inside the labelled class cards, and tighten the label
   column. Compared side by side with the live mica-latvia, the new cards had the right frame,
   radius, padding and background but rendered the capital as plain grey body text — the reference
   puts it in gold mono caps (`.cap`), which is the line the eye actually lands on. Without it the
   cards read as a different design language even though every box matched. ── */
.lscape-row.money .lr-v{
  font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(14px,1.5vw,16px); color:var(--gold); line-height:1.45;
}
.lscape-row{grid-template-columns:minmax(78px,22%) 1fr}
.lscape-row.wide{grid-template-columns:1fr}
@media(max-width:700px){
  .lscape-row{grid-template-columns:1fr}
  body .lscape-row.money .lr-v{font-size:14px!important}
}
/* A strip left with one card should not sit in a three-column track pretending two are missing. */
.jstrip:has(> :only-child){grid-template-columns:minmax(0,460px)}

/* ── JB16 · the hero adapts to a long headline.
   The flow hero is tuned for mica-latvia's 49-character H1: 3 lines, and the whole first screen —
   heading, lead, CTA, three stat tiles — lands inside 900px. The jurisdiction batch carries 60–85
   character headlines with an em-dash clause; at the same size those run to five lines and pushed
   the stat tiles 600–800px below the fold (Hong Kong's hero measured 1724px against Latvia's 849).
   These rules fire only on `.long` / `.dense`, which the builder sets from the copy's own length,
   so every already-approved page renders byte-identical to before. Measured effect at 1440:
   Hong Kong 1724→1397, Cyprus 1525→1120, Canada 1521→1293, Latvia unchanged at ~825. ── */
.story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-head.long,
.story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-body.long{width:min(53vw,790px)}
.story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-head.long :is(h1,h2){font-size:clamp(28px,2.85vw,44px)}
.scene[data-fig="0"] .stats.dense{gap:12px}
.scene[data-fig="0"] .stats.dense .stat{padding:11px 15px 13px}
.scene[data-fig="0"] .stats.dense .stat p{font-size:15px;line-height:1.4}
@media(max-width:760px){
  .story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-head.long,
  .story[data-scroll-model="flow"] .scene[data-fig="0"] .scene-body.long{width:min(720px,92%)}
  body .scene[data-fig="0"] .stats.dense .stat p{font-size:15.5px!important}
}

/* ── JB17 · a long section heading steps down one notch in the type scale.
   `--tb-h-block` (clamp 32→64px) is sized for a short statement. SEO-GUIDE §6 requires H2s in
   question form carrying the search query — "Who a Dubai crypto trading license actually fits —
   and who should look elsewhere" is 79 characters, and at 64px that is a four-line slab with the
   content pushed far down. Set by the builder from the heading's own length; short headings keep
   the approved size, so nothing already live changes. ── */
.sec-head.long h2{font-size:clamp(26px,3.1vw,42px);line-height:1.06}
@media(max-width:700px){ body .sec-head.long h2{font-size:26px!important} }

/* ── JB18 · dense hero stat tiles stay THREE ACROSS, only tightened.
   A first attempt stacked them one per row with the number beside the text. Measured against the
   three-column layout on all nine affected pages it was worse every time, by 95–318px: once the
   number and label slots were repaired the labels became long, and in a narrow left-hand column
   they wrapped and drove the row height. Kept three across; the tile text simply steps down a
   notch and the padding tightens. Fires only on .dense, set by the builder from copy length. ── */
.scene[data-fig="0"] .stats.dense{gap:12px}
.scene[data-fig="0"] .stats.dense .stat{padding:11px 15px 13px}
.scene[data-fig="0"] .stats.dense .stat p{font-size:15px;line-height:1.4;margin-top:6px}
@media(max-width:760px){
  body .scene[data-fig="0"] .stats.dense .stat p{font-size:15.5px!important}
}

/* A hero tile whose headline carries no figure at all renders as a statement, not as a giant
   number — the display size exists for "12mo", and a 40-character sentence at that size was what
   made El Salvador's tiles 490px tall each. */
/* !important is required, not lazy: every page's inline <style> carries
   `.story[data-scroll-model="flow"] .scene[data-fig="0"] .stat .num{font-size:var(--tb-stat-num-sub)}`
   at specificity (0,5,1), which outranks anything reasonable written here. Without it El Salvador's
   40-character tile headline stayed at display size and broke mid-word ("NO CAPITA / L REQUIR"). */
body .scene[data-fig="0"] .stat.textual .num{font-size:clamp(15px,1.45vw,20px)!important;line-height:1.22;letter-spacing:.01em;
  overflow-wrap:break-word;hyphens:none}   /* a sentence must wrap at word boundaries; the no-break rule above is for figures only */

/* ══ JB19 · readability pass, 2026-08-16 (owner review of the live batch) ══════════════════════
   Three faults the owner spotted on the live pages, all measured before fixing.

   1. THE SCRIM DID NOT COVER THE COPY. `.scrim-c::before` is a fixed 900×520px ellipse centred in
      the section. The reference's sections are short and it covers them; these pages carry
      sections two to three times taller (Hong Kong's "who it fits" is 1,776 characters), so the
      top and bottom of the text sat straight over the particle field with no backdrop at all.
      A heavy section now gets a scrim proportional to its own box. The builder sets `.tall`.

   2. NO LIGHT SECTION. Every live page breaks the black with a white band; none of the eleven new
      pages had one, because their specs carried no statement copy. The place-anchor line now
      carries it — approved text, already on the page, same waves and dark drifting triangles as
      B14, so it reads as the existing device rather than a new one.

   3. TOO MUCH BARE TEXT. Measured ratio of unplated to plated blocks: reference 0.77, these pages
      1.07–1.95. The heaviest prose blocks get a quiet panel. The hairline-row idiom inside them is
      untouched — the panel sits behind the block, it does not turn rows into cards. Blocks that
      already had a plate, a border or a hover are deliberately left alone.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* 1 · a scrim that grows with its section */
.scrim-c.tall::before{background:radial-gradient(125% 88% at 50% 50%,rgba(6,8,15,.88) 0%,rgba(6,8,15,.72) 46%,transparent 78%)}

/* 2 · the place-anchor as the light section */
.place.light-sec{position:relative;padding-block:clamp(84px,14vh,170px)}
.place.light-sec .place-line{color:#10131c;position:relative;z-index:1}
.place.light-sec .place-line .pl-name{color:#a8780f}      /* deep gold — bright gold fails on white */
.place.light-sec .place-body{color:#454c5b;position:relative;z-index:1}
.place.light-sec .lp-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* the catalog asks for +50px of breathing room before every light block */
.place.light-sec{margin-top:50px}

/* 3 · a quiet panel behind the heaviest prose blocks */
.stops,.rates,.ctab-wrap,.reglist{
  background:rgba(10,12,22,.55); border:1px solid var(--line); border-radius:var(--rcard);
  padding:clamp(22px,2.8vw,34px); backdrop-filter:blur(6px);
}
.stops{margin-top:40px}
.reglist{margin-top:32px;border-top:1px solid var(--line)}   /* keep its own top rule inside the panel */
.ctab-wrap{overflow:hidden}
.rates .rate-row:first-child,.ctab-wrap .ctab thead th{border-top:none}
@media(max-width:700px){
  .stops,.rates,.ctab-wrap,.reglist{padding:20px 16px}
}


/* ============================================================
   PAGE BYLINE (SEO/GEO 2026-08-31)
   Тихая строка авторства и даты обновления перед CTA. Существующие токены:
   моно-шрифт и разрядка как у .eyebrow, цвет --muted, ссылка — как .copy-link.
   Машинная копия тех же данных — в JSON-LD (WebPage.author/dateModified).
   ============================================================ */
.page-byline-wrap{margin-block:0}
.page-byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding-top:22px;border-top:1px solid var(--line);
  font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.page-byline a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,184,42,.45)}
.page-byline a:hover{text-decoration-color:var(--gold)}
.page-byline .sep{opacity:.5}
@media(max-width:700px){
  /* на узком ярусе строка не помещается — раскладываем в две, точку-разделитель убираем */
  .page-byline{font-size:13px;letter-spacing:.06em;gap:4px 8px;padding-top:18px}   /* 11 -> 12 -> 13px: порог для прописного моно-ярлыка (protegra-5pm) */
  .page-byline .sep{display:none}
  .page-byline>span,.page-byline>time{flex:1 1 100%}
}
/* Доступность ссылки на автора. Текст подписи моноширинный и мелкий, поэтому сама ссылка
   давала цель ~99×11px — вдвое ниже минимума WCAG 2.5.8 (24×24). Кегль на узком ярусе
   поднят 11 → 12px, а ссылке добавлены вертикальные поля до 24px и погашены отрицательным
   margin: цель вырастает, высота полосы и положение подчёркивания не меняются. */
.page-byline a{display:inline-block;padding-block:7px;margin-block:-7px}

/* Два последних места на v2-страницах, которые не дотягивают до 14px: подпись под цитатой
   и заголовки шагов дорожной карты. Оба живут в page-style каждой из восьми v2-страниц, а
   page-style грузится ПОСЛЕ общего файла — дотянуться можно только !important. Это пол по
   мобильному порогу, не правка дизайна: на широком экране значения не трогаются.
   Остаток protegra-5pm по #quoteMeta закрывается здесь же. */
@media(max-width:760px){
  body .quote-meta,body .road-head{font-size:14px!important}
}

/* Цель касания у .copy-link (согласие в форме, ссылки внутри ответов) — 14–15px по высоте,
   при минимуме 24px. Поля гасим отрицательным margin: строка не разъезжается. */
@media(max-width:760px){
  .copy-link{display:inline-block;padding-block:5px;margin-block:-5px}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   MOBILE V2 — OPT-IN СЛОЙ (2026-09-01)

   Включается КЛАССОМ: <body class="m2">. Сейчас его несёт только /mica-netherlands-v2 —
   пилот редизайна, по которому будет переделан весь сайт.

   ПОЧЕМУ ОТДЕЛЬНЫЙ СЛОЙ, А НЕ ПРАВКА СУБТИРОВ A–D. Существующая лестница (≤700/500/400/360)
   задаёт размеры жёсткими px с !important и рассчитана на нынешний дизайн. Новый дизайн
   требует другой типошкалы, и менять лестницу значило бы двигать 39 живых страниц ради одной.
   Здесь правило под `body.m2` физически недостижимо для страницы без класса.

   БЛОК ТОЛЬКО ДОПИСЫВАЕТСЯ В КОНЕЦ ФАЙЛА, ни один существующий байт не меняется. Поэтому
   «на остальных страницах ничего не сдвинется» — свойство конструкции, а не обещание.
   Старая лестница A–D остаётся нетронутой; здесь мы просто идём позже по файлу и с большей
   специфичностью (body.m2 > body).

   ЧТО СЮДА КЛАДЁТСЯ. Только переносимая СИСТЕМА: типошкала, ритм, отступы контейнера, пол
   тап-таргета, дефолт схлопывания сеток — то, что унаследует любая страница при переезде.
   Правила блоков, существующих лишь на v2 (.nc-*, .cls-nav, .adv-*, .ng-*, .why-*, .exp-*,
   .road-*), живут в инлайновом <style> самой страницы и переедут вместе с разметкой.

   ── ТИПОШКАЛА (решение владельца 01.09.2026) ──────────────────────────────────────────
   Пол читаемого текста          14px, целевое значение 15px
   Пол прописных моно-ярлыков    13px
   Вне порога                    значки и чипы: каретка меню «▾», чип «SOON» — это не текст

   Ярлыки поднимаются В ПАРЕ со снижением трекинга. Замерено: у них .08–.16em, и трекинг
   растёт вместе с кеглем. Подъём 11 → 13px при .14em даёт +18% ширины строки, а при .08em —
   +12%; на 360px с отступами контейнера свободно всего ~332px, и разница решает, вылезет
   строка за край или нет. Поднимать кегль ярлыка, не трогая трекинг, — значит менять один
   дефект на другой.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.m2{ --m2-label:13px; --m2-label-track:.08em; --m2-text:15px; }

/* Системные правила слоя. Блочные селекторы сюда НЕ кладутся: правила для .nc-*, .cls-nav,
   .lic-*, .adv-*, .ng-*, .why-*, .exp-*, .road-* живут в инлайновом <style> самой страницы —
   этих селекторов больше нигде нет, и при промоушене они переедут вместе с разметкой.
   Здесь — только то, что унаследует ЛЮБАЯ страница, надевшая класс m2. */
@media(max-width:768px){
  /* Прописные моно-ярлыки общих блоков.
     .eyebrow сюда НЕ входит намеренно: у него clamp(14px,1.5vw,16px), то есть на мобиле он и
     так 14px. Правило «пол 13px» записывается присвоением, а присвоение не только поднимает,
     но и ОПУСКАЕТ — первая версия этого блока утащила читаемые надглавия с 14px на 13px и
     добавила 11 новых находок вместо того, чтобы убрать. Трогаем только то, что ниже пола. */
  body.m2 .foot-h,
  body.m2 .foot-h2{
    font-size:var(--m2-label) !important;
    letter-spacing:var(--m2-label-track) !important;
  }

  /* Межстрочное у ЗАГОЛОВКОВ КАРТОЧЕК. В shared `h1,h2,h3{line-height:.95}` — межстрочное
     МЕНЬШЕ кегля. Для дисплейных h1/h2 в 33–64px это осознанный приём: строки плотно
     сцеплены, знаки крупные. Для h3 в 15–16px тот же коэффициент даёт 14.25px между
     базовыми линиями при высоте прописной около 11px — строки физически сходятся, и
     зрение это видело как «строки заголовка налезают друг на друга» в #classes, #roadmap
     и #turning. Дисплейные не трогаем: у них проблемы нет, а плотность — часть образа. */
  body.m2 :is(h3, h4){ line-height:1.12; }

  /* Пол читаемого текста для общих элементов. */
  body.m2 .btn,
  body.m2 .faq-q{ font-size:var(--m2-text) !important; }

  /* Полноширинная кнопка-пилюля с текстом, прижатым влево, читается как сломанная.
     Замечено зрением в #advantages при 414px: text-align:left, justify-content:normal. */
  body.m2 .btn{ text-align:center; justify-content:center; }

  /* ── Затемнение под текстом героя ──────────────────────────────────────────────────
     Движок рисует фигуру на фиксированном полноэкранном канвасе. На десктопе текст занимает
     левые 45vw, а фигура стоит справа — они не пересекаются. На мобиле placeHook отдаёт
     базовую раскладку (ветку `if (isMobile) return base` трогать нельзя, MOBILE-GUIDE §2),
     и фигура встаёт по центру вьюпорта — ровно за колонкой текста. У NL-v2 лид в два
     длинных абзаца, поэтому мельница рисуется прямо поверх слов: замерено зрением и
     подтверждено глазами — «Protegra takes you through Dutch CASP authorisation» нечитаемо.

     Градиент задан В ПРОЦЕНТАХ, а не пикселями. Ровно на этом обжёгся JB19: `.scrim-c::before`
     был эллипсом 900×520px по центру, и на узком экране он просто не доставал до текста.
     isolation:isolate создаёт локальный контекст наложения, поэтому z-index'ы ниже не могут
     протечь на соседние секции. */
  body.m2 .scene[data-fig="0"]{ position:relative; isolation:isolate; }
  body.m2 .scene[data-fig="0"]::after{
    content:""; position:absolute; inset:-6vh -6vw; z-index:0; pointer-events:none;
    background:radial-gradient(132% 62% at 50% 48%,
      rgba(6,8,15,.92) 0%, rgba(6,8,15,.78) 40%, rgba(6,8,15,.46) 70%, rgba(6,8,15,0) 100%);
  }
  body.m2 .scene[data-fig="0"] > *{ position:relative; z-index:1; }

  /* Пол цели нажатия — 36px, MOBILE-GUIDE §4a.
     Чекбокс согласия замерен как 16x16: пальцем не попасть. Но целью служит НЕ квадратик,
     а метка — клик по <label> переключает вложенный чекбокс, так устроен HTML. Поэтому
     квадратик поднимаем лишь до аккуратных 20px, а полноценную цель даёт метка. Раздутый до
     36px чекбокс рядом с текстом в 15px ломает ритм формы и чинит не ту вещь. */
  body.m2 input[type="checkbox"],
  body.m2 input[type="radio"]{ width:20px; height:20px; flex:0 0 auto; }
  body.m2 label.consent{ display:flex; align-items:flex-start; gap:12px; min-height:44px; padding-block:8px; }
  /* Ссылки внутри согласия — строчные, и цель у них по высоте строки. Даём вертикальный
     запас, не разрывая абзац: inline-block с padding раздвинул бы строки. */
  body.m2 label.consent a{ padding-block:6px; }

  /* Пол цели нажатия в подвале и шапке. На ≤700 подвал схлопывается в одну колонку и ссылки
     вырастают сами; на 768 он ещё двухколоночный, и высота цели проваливается до 33px при
     пороге 36 — замерено 26 таких целей на одной странице, почти весь перечень ссылок подвала
     плюс логотип (30px), почта (27) и соцсети (25). Планшет — тот же палец, что и телефон. */
  /* ВЫСОТУ ДАЁМ ОТСТУПОМ, А НЕ FLEX. Первая версия ставила `display:flex` на текстовые ссылки —
     и flex ВЫБРАСЫВАЕТ пробельные текстовые узлы между элементами: «<span>MiCA</span> overview»
     склеилось в «MiCAoverview». Поймано зрением на проде 02.09.2026; метрический чекер это не
     видит, он проверяет только подавленные <br>. Flex оставлен там, где он был и до правки —
     у логотипа и соцсетей: там дети не текст, склеивать нечего. */
  body.m2 .foot-col > a,
  body.m2 .foot-bottom a{ min-height:40px; }
  body.m2 .foot-mail{ display:inline-block; padding-block:8px; }
  body.m2 .foot-social,
  body.m2 nav .nav-in > a.logo{ min-height:36px; align-items:center; }
}

/* ===== ВТОРИЧНАЯ CTA — .btn-dark ==========================================
   Та же геометрия, что у .btn (padding / radius 999 / 17px Inter 500), чёрная
   заливка вместо золотого градиента. Ставится второй кнопкой рядом с .btn:
   <a class="btn btn-dark" href="#contact">…</a>

   (owner 2026-08-26) Золотое кольцо в СОСТОЯНИИ ПОКОЯ. Раньше здесь была почти
   невидимая белая волосинка, золотевшая только на hover; hover теперь уходит в
   полный токен, чтобы кнопке было куда двигаться. Прозрачный/ghost-вариант этой
   кнопки проверялся и отклонён: на звёздном фоне она почти пропадает. Если нужна
   именно прозрачная пилюля — в системе уже есть .btn-ghost, не трогайте это правило.

   (2026-09-19) Сведено сюда из ИНЛАЙНА: правило лежало 20 байт-идентичными копиями
   в <style> каждой страницы с этой кнопкой. Вид не менялся — код перенесён дословно.
   Правило идёт ПОСЛЕ .btn (:103) и потому перебивает его фон и тень при равной
   специфичности; transform на hover сознательно НЕ повторяется — он приезжает
   из .btn:hover (:104).
   ========================================================================== */
.btn-dark{
  background:#0d1017; color:#e7ecf5;
  box-shadow:0 0 0 1px rgba(255,184,42,.55), 0 18px 50px -18px rgba(0,0,0,.85);
}
.btn-dark:hover{
  background:#141926; color:#fff;
  box-shadow:0 0 0 1px var(--gold), 0 20px 50px -14px rgba(0,0,0,.9);
}

/* Ссылка на подборщик первой строкой в меню Licensing (scripts/nav-add-jurisdictions.py).
   Выделена намеренно: до 21.09.2026 /jurisdictions был доступен ровно из одной строки
   в подвале, и владелец его не нашёл. Это не «ещё одна страна» в списке, это вход в
   сам список — поэтому у неё своя рамка и две строки, а не один заголовок. */
.menu .dd-lic{flex-wrap:wrap}
.dd-lic>.dd-lead{flex:0 0 100%;display:block;margin:0 0 12px;padding:11px 13px;border-radius:12px;
  white-space:normal;                       /* .menu .dd a ставит nowrap: без этого пояснение тянуло меню в одну строку */
  border:1px solid rgba(255,184,42,.38);background:rgba(255,184,42,.07);
  transition:border-color .16s,background .16s}
.dd-lic>.dd-lead:hover{border-color:var(--gold);background:rgba(255,184,42,.13)}
.dd-lic>.dd-lead b{display:block;font-weight:500;font-size:14.5px;color:var(--gold);margin-bottom:3px}
.dd-lic>.dd-lead span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* Полоса «подобрать юрисдикцию» на главной (секция #jur-cta). */
.jcta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,48px);align-items:center}
.jcta-t{min-width:0}
.jcta-t .lead{max-width:70ch}
.jcta-go{margin:0}
@media(max-width:860px){
  .jcta{grid-template-columns:1fr}
  .jcta-go .btn{display:block;text-align:center}
}

/* ── Accounting → Poland: a second level (owner 2026-09-24) ── ─────────────────
   The panel is not a .dd on purpose: `.menu .menu-item:hover .dd` matches ANY descendant, so a
   nested .dd opens the moment the Accounting menu opens rather than on its own row's hover.
   The ::before bridges the 8px gap to the parent row, or the mouse loses hover crossing it. */
.menu .dd .dd-nest{position:relative;display:flex;flex-direction:column}
.menu .dd .dd-nest>a{padding-right:30px}
.menu .dd .nest-caret{margin-left:auto;font-style:normal;font-size:.72em;opacity:.55;transition:opacity .2s,transform .2s}
.menu .dd .dd-nest:hover>a{background:rgba(255,184,42,.1);color:#fff}
.menu .dd .dd-nest:hover .nest-caret{opacity:.95;transform:translateX(2px)}
.menu .nest-panel{position:absolute;top:-8px;left:100%;margin-left:8px;min-width:250px;
  background:rgba(8,10,20,.975);backdrop-filter:blur(16px);border:1px solid var(--line2);
  border-radius:var(--rcard);padding:8px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:61;
  box-shadow:0 26px 64px -14px rgba(0,0,0,.75)}
.menu .nest-panel::before{content:'';position:absolute;top:0;left:-12px;width:12px;height:100%}
.menu .dd-nest:hover>.nest-panel{opacity:1;visibility:visible;transform:translateX(0)}
.menu .nest-panel a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:14.4px;letter-spacing:.015em;text-transform:none;color:#d4dae6;white-space:nowrap}
.menu .nest-panel a::after{display:none!important}
.menu .nest-panel a:hover{background:rgba(255,184,42,.1);color:#fff}
@media(max-width:1024px){
  /* the burger has no hover: the second level is simply always open and indented */
  nav .menu .nest-panel{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    margin:0;border:0;box-shadow:none;background:none;padding:0 0 0 30px;backdrop-filter:none}
  nav .menu .nest-panel::before{display:none}
  nav .menu .dd .nest-caret{display:none}
  nav .menu .nest-panel a{padding:12px 6px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal}
}

/* ── Nav: icon for rows without a flag (owner 2026-09-25) ── ───────────
   A bare gold glyph in the flag's 20px slot. The first version sat in a 14px glyph inside a gold
   square and the owner found it too small to read: no box, the glyph takes the whole slot. */
.menu .nav-ico{width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;color:var(--gold)}
.menu .nav-ico svg{width:20px;height:20px;display:block;stroke-width:1.9}