/* Self hosted webfonts. Generated by build-src/fonts.js, do not edit.
   Served from our own origin because legal/privacy.html promises the site
   loads no fonts, scripts or resources from any third party. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/fraunces-latin-300-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/inter-latin-300-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/cairo-arabic-300-700.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}

:root{
  --ivory:#FDFBF6;--paper:#FFFFFF;--linen:#FAF4E9;--sand:#F3E9D9;
  --ink:#2A2520;--ink-soft:#6E6459;--gold:#C9A227;--gold-deep:#856310;
  --terra:#B15427;--sage:#5E8C6A;--line:#E9E0D0;
  --blue:#00539C;--blue-ink:#004179;--blue-tint:#EDF4FA;--blue-line:#CBDDEC;
  --flag-yellow:#F7C948;
  --warn:#9A4A18;--warn-bg:#FDF3E6;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --arabic:'Cairo','Segoe UI',Tahoma,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --r:14px;                     /* corner radius */
  --shadow:0 1px 2px rgba(42,37,32,.04),0 8px 24px rgba(42,37,32,.06);
  --shadow-lift:0 2px 4px rgba(42,37,32,.05),0 18px 46px rgba(42,37,32,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  font-feature-settings:'kern' 1,'liga' 1;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;line-height:1.15;
  letter-spacing:-.012em;margin:0 0 .5em;
  /* Fraunces has SOFT and WONK axes. WONK is pinned off so the face reads
     refined and institutional rather than playful. */
  font-variation-settings:'SOFT' 18,'WONK' 0;
}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);letter-spacing:-.028em;font-weight:600}
h2{font-size:clamp(1.75rem,3.3vw,2.6rem);letter-spacing:-.02em;margin-top:0}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:600;letter-spacing:.01em}
p{margin:0 0 1.15em}
a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(133,99,16,.34);transition:border-color .18s var(--ease),color .18s var(--ease)}
a:hover{color:var(--terra);border-bottom-color:var(--terra)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
strong{font-weight:600}
code{font-family:var(--mono);font-size:.86em;background:var(--linen);border:1px solid var(--line);border-radius:6px;padding:.12em .42em;word-break:break-all}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
img{max-width:100%;height:auto}
::selection{background:rgba(201,162,39,.22)}

.wrap{width:min(100% - 2.5rem,74rem);margin-inline:auto}
.narrow{width:min(100% - 2.5rem,48rem);margin-inline:auto}
.eyebrow{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-ink);margin:0 0 1rem;display:block;
}
.eyebrow::before{content:'';display:inline-block;width:14px;height:2px;background:var(--flag-yellow);vertical-align:middle;margin-inline-end:.55rem;margin-top:-2px}
.lead{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.62;color:var(--ink-soft)}

/* ---------- the Swedish breeze ----------
   A 4px band across the very top, blue with a single yellow bar set off centre
   where the flag's vertical stripe sits. It is the only place the flag is
   quoted directly, it carries no text, and it makes no claim: the entity
   disclosure and the not a licence clause are unchanged and still on every
   page and in the PDF. */
.flagbar{height:4px;width:100%;
  background:linear-gradient(90deg,
    var(--blue) 0 9%,
    var(--flag-yellow) 9% 15%,
    var(--blue) 15% 100%);
}
[dir=rtl] .flagbar{
  background:linear-gradient(270deg,
    var(--blue) 0 9%,
    var(--flag-yellow) 9% 15%,
    var(--blue) 15% 100%);
}

/* ---------- header ---------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(253,251,246,.82);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
header.nav .bar{display:flex;align-items:center;gap:1.1rem;padding:.72rem 0}
.brand{display:flex;align-items:center;gap:.7rem;border:0;color:var(--ink)}
.brand img{width:42px;height:42px;border-radius:9px}
.brand b{font-family:var(--serif);font-size:1.06rem;font-weight:600;letter-spacing:-.01em;display:block;line-height:1.2}
.brand span{font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em;display:block}
nav.links{display:none;gap:.25rem;margin-inline-start:auto;align-items:center}
nav.links a{
  border:0;color:var(--ink-soft);font-size:.92rem;font-weight:500;
  padding:.45rem .72rem;border-radius:9px;transition:background .18s var(--ease),color .18s var(--ease);
}
nav.links a:hover{background:var(--linen);color:var(--ink)}
nav.links a[aria-current=page]{color:var(--ink);background:var(--linen);font-weight:600;box-shadow:inset 0 -2px 0 var(--blue)}
.lang{margin-inline-start:auto;border:1px solid var(--line);border-radius:999px;padding:.34rem .8rem;font-size:.84rem;font-weight:600;color:var(--ink);background:var(--paper)}
nav.links + .lang{margin-inline-start:.4rem}
.lang:hover{border-color:var(--gold);background:var(--linen)}
@media(min-width:900px){nav.links{display:flex}}

/* ---------- status ribbon ---------- */
.ribbon{background:var(--warn-bg);border-bottom:1px solid var(--line);color:var(--warn);font-size:.86rem}
.ribbon .wrap{padding:.6rem 0;display:flex;gap:.55rem;align-items:flex-start}
.ribbon svg{flex:none;margin-top:.22rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:20ch}
.hero .lead{max-width:56ch}
/* The canvas is decorative only. It sits behind content, never carries text,
   and is absent entirely unless the motion layer decides to build it.
   It is confined to the OUTER EDGE and never spans the text column: the first
   render put the mesh dead centre, straight through the headline. */
#heroCanvas{
  position:absolute;z-index:1;pointer-events:none;opacity:0;
  inset-block:0;inset-inline-end:0;width:46%;
  transition:opacity 1.2s var(--ease);
}
#heroCanvas.on{opacity:.9}
@media(max-width:1099px){#heroCanvas{display:none}}
.hero-fallback{
  position:absolute;z-index:0;inset-inline-end:-12%;top:-18%;width:min(62vw,720px);aspect-ratio:1;
  background:
    radial-gradient(closest-side,rgba(201,162,39,.20),transparent 70%),
    radial-gradient(closest-side,rgba(0,83,156,.13),transparent 72%);
  background-position:30% 30%,72% 68%;background-repeat:no-repeat;
  background-size:76% 76%,66% 66%;filter:blur(6px);pointer-events:none;
}

/* ---------- buttons ---------- */
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid transparent;
  border-radius:999px;padding:.78rem 1.5rem;font-weight:600;font-size:.96rem;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#241C05;box-shadow:0 6px 18px rgba(201,162,39,.28)}
.btn-gold:hover{background:#D9B23A;box-shadow:0 10px 26px rgba(201,162,39,.36)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--gold)}
/* btn-ink predates the redesign and is still used by several page bodies.
   It is no longer a dark slab: on a light page that read as a hole. */
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:#3B342C}

/* ---------- sections ---------- */
section{padding:clamp(3rem,6.5vw,5.5rem) 0}
section.alt{background:var(--linen);border-block:1px solid var(--line)}
section.sand{background:var(--sand);border-block:1px solid var(--line)}
.sec-head{max-width:60ch;margin-bottom:2.6rem}

/* ---------- cards and grids ---------- */
.grid{display:grid;gap:1.4rem}
@media(min-width:760px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card .num{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--gold-deep);line-height:1;display:block;margin-bottom:.4rem;font-variation-settings:'SOFT' 18,'WONK' 0}

/* stat block, used for the on chain figures */
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.stat .v{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;letter-spacing:-.02em;display:block;line-height:1.1;font-variation-settings:'SOFT' 18,'WONK' 0}
.stat .k{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}

/* ---------- old way vs new way ---------- */
.vs{display:grid;gap:1.4rem}
@media(min-width:860px){.vs{grid-template-columns:1fr 1fr;gap:1.8rem}}
.vs-col{border-radius:var(--r);padding:1.7rem 1.6rem;border:1px solid var(--line)}
.vs-old{background:#FBF1EC;border-color:#EBD5C9}
.vs-new{background:var(--blue-tint);border-color:var(--blue-line)}
.vs-col h3{display:flex;align-items:center;gap:.55rem;margin-top:0}
.vs-old h3{color:var(--terra)}
.vs-new h3{color:var(--blue-ink)}
.vs-col ul{margin:0;padding-inline-start:1.15rem}
.vs-col li{margin-bottom:.6rem}
.vs-col li::marker{color:currentColor}

/* ---------- case studies ---------- */
.case{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem 1.6rem;box-shadow:var(--shadow);border-inline-start:4px solid var(--gold);
}
.case.illus{border-inline-start-color:var(--blue);background:var(--blue-tint)}
.case .tag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.28rem .66rem;border-radius:999px;margin-bottom:.9rem;
}
.case .tag-real{background:rgba(201,162,39,.16);color:var(--gold-deep)}
.case .tag-illus{background:rgba(0,83,156,.12);color:var(--blue-ink)}
.case h3{margin-top:0}
.case .src{font-size:.84rem;color:var(--ink-soft);margin:1rem 0 0}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.2rem}
.step{position:relative;padding-inline-start:3.4rem}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;inset-inline-start:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--gold);color:#241C05;font-weight:700;font-size:.98rem;
  display:grid;place-items:center;font-family:var(--sans);
}
.step h3{margin-bottom:.3rem}

/* ---------- notes ---------- */
.note,.alert{border-radius:var(--r);padding:1.15rem 1.3rem;margin:1.6rem 0;border:1px solid}
.note{background:var(--linen);border-color:var(--line)}
.alert{background:var(--warn-bg);border-color:#F0DCC4;border-inline-start:4px solid var(--warn)}
.note p:last-child,.alert p:last-child{margin-bottom:0}
.stamp{font-size:.84rem;color:var(--ink-soft)}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding-inline-start:1.5rem;position:relative;margin-bottom:.55rem}
ul.plain li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:start;padding:.82rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--linen);font-weight:600;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
footer{background:var(--sand);border-top:3px solid var(--blue);padding:3.2rem 0 2rem;font-size:.94rem;position:relative}
footer::before{content:'';position:absolute;top:-3px;inset-inline-start:0;width:clamp(90px,12%,190px);height:3px;background:var(--flag-yellow)}
footer h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .9rem}
.fgrid{display:grid;gap:2rem}
@media(min-width:780px){.fgrid{grid-template-columns:2fr 1fr 1fr}}
footer a{color:var(--ink);border-bottom-color:rgba(42,37,32,.2)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.5rem}
.legalblock{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-soft)}

/* ---------- geo gate ----------
   Class names here MUST match the ones the gate script actually creates:
   .ggwrap .ggcard .ggchk .ggbtns .ggok .ggcancel. It is hidden by default and
   revealed only by .on, which the script toggles. Getting this wrong once
   meant the modal covered every page on load. */
.ggwrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(42,37,32,.44);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ggwrap.on{display:flex}
.ggcard{max-width:35rem;width:100%;max-height:90vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:18px;padding:1.9rem;box-shadow:0 30px 80px rgba(42,37,32,.28)}
.ggcard h3{margin:0 0 .6rem}
.ggcard p{font-size:.94rem}
.ggcard .liable{color:var(--warn);font-weight:600;font-size:.9rem}
.ggchk{display:flex;gap:.65rem;align-items:flex-start;margin:1rem 0 1.2rem;font-size:.93rem;cursor:pointer}
.ggchk input{margin-top:.25rem;width:18px;height:18px;flex:none}
.ggbtns{display:flex;gap:.6rem;flex-wrap:wrap}
.ggbtns button{border:0;border-radius:999px;padding:.7rem 1.4rem;font-weight:600;cursor:pointer;font-size:.94rem;font-family:inherit;transition:transform .18s var(--ease)}
.ggbtns button:hover{transform:translateY(-1px)}
.ggok{background:var(--gold);color:#241C05}
.ggok:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ggcancel{background:var(--linen);color:var(--ink);border:1px solid var(--line)!important}

/* ---------- motion ----------
   Elements rest VISIBLE. The .js class is only added by the inline head script,
   and a failsafe removes the hidden state if the motion layer never starts, so
   a blocked or failed script can never leave the page blank. */
.js [data-anim]{opacity:0;transform:translateY(18px)}
.js [data-anim=fade]{transform:none}
html.motion-ready [data-anim],
html.no-motion [data-anim]{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-anim]{opacity:1!important;transform:none!important}
  .card:hover,.btn:hover{transform:none}
  #heroCanvas{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- print ----------
   The whitepaper PDF is generated from this same HTML, so the two can never
   disagree. All motion, canvas and chrome is stripped. */
@page{size:A4;margin:18mm 16mm}
@media print{
  /* .btn is hidden outright: the whitepaper PDF is printed from this page and
     was carrying its own "Download as PDF" button inside the PDF. */
  header.nav,.ribbon,.cta,.btn,#heroCanvas,.hero-fallback,footer .fgrid>div:nth-child(2),footer .fgrid>div:nth-child(3){display:none}
  [data-anim]{opacity:1!important;transform:none!important}
  body{background:#fff;font-size:11.5pt;line-height:1.55}
  .narrow,.wrap{width:100%}
  section{padding:0 0 .6rem}
  .card,.case,.stat,.vs-col{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  h1{font-size:22pt}h2{font-size:14pt;margin-top:1.3em;break-after:avoid}h3{font-size:11.5pt;break-after:avoid}
  table{break-inside:auto;font-size:9.5pt}tr{break-inside:avoid}
  .note,.alert{break-inside:avoid;border-inline-start-width:3px}
  footer{background:#fff;color:#333;border-top:1px solid #ccc;padding-top:1rem;font-size:9pt}
  a{color:#000;border:0}
  .tscroll{overflow:visible;border:0}
}

/* ---------- RTL ---------- */
[dir=rtl] body{font-family:var(--arabic)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{font-family:var(--arabic);font-variation-settings:normal;letter-spacing:0}
[dir=rtl] .eyebrow{letter-spacing:.06em}
[dir=rtl] .hero-fallback{inset-inline-end:auto;inset-inline-start:-12%}
[dir=rtl] .js [data-anim]{transform:translateY(18px)}