/* ServerKing — site shell. Ink, Paper and Signal: light by default, matte grained plates, real frames in a ring.
   The ring is a node of the crown: Ink while the page is light, Signal once the lights are on (the dark theme).
   No gradients in the identity; Signal on a light ground only inside an Ink shape. */

/* ---------- fonts: our own files, nothing is requested from another host. Archivo (OFL), Roboto Flex (OFL),
   Roboto Mono (Apache 2.0): /assets/fonts/LICENSES.txt ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:650;font-stretch:115%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url("/assets/fonts/archivo-latin-ext.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:650;font-stretch:115%;font-display:swap;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;src:url("/assets/fonts/archivo-latin.woff2") format("woff2")}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:400 900;font-stretch:88% 100%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url("/assets/fonts/roboto-flex-latin-ext.woff2") format("woff2")}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:400 900;font-stretch:88% 100%;font-display:swap;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;src:url("/assets/fonts/roboto-flex-latin.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url("/assets/fonts/roboto-mono-latin-ext.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;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;src:url("/assets/fonts/roboto-mono-latin.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url("/assets/fonts/roboto-mono-latin-ext.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;font-display:swap;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;src:url("/assets/fonts/roboto-mono-latin.woff2") format("woff2")}

/* ---------- tokens: light on :root, dark under [data-theme="dark"] ---------- */
:root{
  --signal:#C8E500;
  --e-out:cubic-bezier(.2,0,0,1);--e-rv:cubic-bezier(.16,1,.3,1);
  --r-plate:24px;--gutter:clamp(16px,4vw,56px);--wrap-max:1280px;
  --wrap-w:min(100% - 2 * var(--gutter),var(--wrap-max));
  --field:#F8F8F8;--ink:#0A0A0B;--ink-2:#3F4046;--ink-3:#4E4F55;
  --line:rgba(10,10,11,.1);--line-2:rgba(10,10,11,.22);
  --mat:#EFEFF0;--mat-deep:#E8E8EA;--mat-line:rgba(10,10,11,.13);
  --mat-shadow:0 24px 64px -12px rgba(10,10,11,.14);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --grain-deep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --pill:#0A0A0B;--pill-ink:#F8F8F8;--hover:rgba(10,10,11,.06);
  --halo-1:rgba(10,10,11,.07);--halo-2:rgba(10,10,11,.05);/* --halo-2: the templates only */--halo-3:rgba(10,10,11,.045);
  --focus:#0A0A0B;--link:#0A0A0B;--brand-ink:#6B6B70;
  /* --ring: the scene's ring, rails and marks; --lit/--lit-ink: a lit plate (chip, tick, OK); --node: the ring of a lit point */
  --ring:#0A0A0B;--ring-shadow:0 30px 60px -28px rgba(10,10,11,.4);--lit:#0A0A0B;--lit-ink:#C8E500;--node:0 0 0 2.5px #0A0A0B;--lift:rgba(10,10,11,.38);
  --frame-shade:rgba(10,10,11,.16);--err:#B3261E;
  color-scheme:light;scrollbar-color:#C6C6CA #F8F8F8;
}
[data-theme="dark"]{
  --field:#0A0A0B;--ink:#F8F8F8;--ink-2:#C6C6CA;--ink-3:#A4A4A9;
  --line:rgba(248,248,248,.12);--line-2:rgba(248,248,248,.24);
  --mat:#151516;--mat-deep:#1C1C1E;--mat-line:rgba(255,255,255,.09);
  --mat-shadow:0 30px 80px -10px rgba(0,0,0,.55);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --grain-deep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
  --pill:#F8F8F8;--pill-ink:#0A0A0B;--hover:rgba(248,248,248,.08);
  --halo-1:rgba(200,229,0,.2);--halo-2:rgba(200,229,0,.1);--halo-3:rgba(200,229,0,.07);
  --focus:#C8E500;--link:#F8F8F8;--brand-ink:#9C9CA2;
  --ring:#C8E500;--ring-shadow:0 0 70px -12px rgba(200,229,0,.45),inset 0 0 70px -14px rgba(200,229,0,.14);--lit:#C8E500;--lit-ink:#0A0A0B;--node:0 0 10px #C8E500;--lift:rgba(200,229,0,.4);
  --frame-shade:rgba(0,0,0,.45);--err:#FF8A80;
  color-scheme:dark;scrollbar-color:#3A3A3E #0A0A0B;
}

/* ---------- base ---------- */
html{background:var(--field);scroll-padding-top:calc(var(--hd-h,84px) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-theme-switching] *,html[data-theme-switching] *::before,html[data-theme-switching] *::after{transition:none!important}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);background:var(--field);
  font:400 17px/1.6 "Roboto Flex",system-ui,sans-serif;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--link)}
:root:not([data-theme="dark"]) body{background-image:radial-gradient(circle at 1px 1px,rgba(10,10,11,.12) 1px,transparent 1.6px);background-size:20px 20px}
main,.contact{overflow-x:clip}
main{flex:1 0 auto}
.ft{overflow:clip}
[hidden]{display:none!important}
::selection{background:var(--signal);color:#0A0A0B}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
main :is(p,dd) a:not([class]){color:var(--link)}
p,ol,ul,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{margin:0}
img{display:block;max-width:100%;height:auto}
picture{display:block}
button{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:8px;z-index:80;padding:12px 18px;border-radius:999px;background:var(--pill);color:var(--pill-ink);font-weight:500;text-decoration:none;transform:translateY(-200%)}
.skip:focus-visible{transform:none}
.wrap{width:var(--wrap-w);margin-inline:auto;position:relative}
.num{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em}
.nb{white-space:nowrap}
.logo-d,.only-dark{display:none}
[data-theme="dark"] .logo-d,[data-theme="dark"] .only-dark{display:block}
[data-theme="dark"] .logo-l,[data-theme="dark"] .only-light{display:none}

/* ---------- type ---------- */
/* display: Archivo Expanded 650, the face of the wordmark; sentence case */
h1,h2{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:650;font-stretch:115%;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2rem,1rem + 2.9vw,3.6rem);line-height:1.04}
h2{font-size:clamp(1.6rem,1.05rem + 1.5vw,2.45rem);line-height:1.1}
h3{font:600 1.25rem/1.3 "Roboto Flex",system-ui,sans-serif;letter-spacing:-.005em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
.lead{font-size:clamp(17px,.9rem + .3vw,19px);line-height:1.55;color:var(--ink);max-width:60ch}
.chip{display:inline-flex;align-items:center;flex:none;min-height:24px;padding:0 10px;border-radius:999px;background:var(--lit);color:var(--lit-ink);
  font:500 13px/1 "Roboto Flex",system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap}

/* ---------- matte plates: the one recipe of the grained matte surface ---------- */
.mat,.hd__in,.hd__menu,.boot,.pause{background-color:var(--mat);background-image:var(--grain);background-size:160px 160px}
.mat{position:relative;border:1px solid var(--mat-line);border-radius:var(--r-plate);box-shadow:var(--mat-shadow)}
.mat--deep{background-color:var(--mat-deep)}
.pad{padding:clamp(22px,3vw,36px)}

/* ---------- controls ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;box-sizing:border-box;border-radius:999px;border:0;
  font:500 16px/1 "Roboto Flex",system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:box-shadow .2s var(--e-out),background-color .2s var(--e-out),transform .2s var(--e-out)}
.pill--primary{background:var(--pill);color:var(--pill-ink)}
.pill--primary:hover{box-shadow:0 12px 30px -8px var(--lift)}
.pill--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.pill--ghost:hover{background:var(--hover)}
.pill:active{transform:translateY(1px)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chev{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--link);font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 45%,transparent)}
.link:hover{text-decoration-color:currentColor}
.ctl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--mat);color:var(--ink);font:500 15px/1 "Roboto Flex",system-ui,sans-serif;cursor:pointer;transition:background-color .2s var(--e-out),opacity .2s var(--e-out)}
.ctl:hover{background:var(--hover)}
.ctl[aria-disabled="true"]{opacity:.4;cursor:default;background:var(--mat)}

/* ---------- header: the capsule is as wide as .wrap ---------- */
.hd{position:sticky;top:0;z-index:50;width:var(--wrap-w);margin-inline:auto;padding-top:10px;view-transition-name:site-header;transition:translate .35s var(--e-out)}
.hd.is-hidden{translate:0 calc(-100% - 12px)}
.hd__in{position:relative;display:flex;align-items:center;gap:6px 14px;--hd-pl:22px;--hd-pr:8px;padding:8px var(--hd-pr) 8px var(--hd-pl);box-sizing:border-box;
  border-radius:999px;border:1px solid var(--mat-line);box-shadow:0 12px 36px -12px rgba(10,10,11,.16)}
[data-theme="dark"] .hd__in{box-shadow:0 12px 40px -8px rgba(0,0,0,.35)}
.hd__logo{flex:none;margin-right:auto;border-radius:8px}
.hd__logo img,.ft__logo img{width:176px;height:auto}
.hd__sheet{display:contents}
.hd__list{display:flex;align-items:center;gap:2px;list-style:none;padding:0}
.hd__list>li{position:relative}
.hd__link{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-2);text-decoration:none;
  font:500 15px/1 "Roboto Flex",system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .2s,background-color .2s}
.hd__link:hover,.hd__link[aria-expanded="true"]{color:var(--ink);background:var(--hover)}
.hd__link[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ring);text-decoration-thickness:2px;text-underline-offset:.5em}
.hd__more .chev{width:12px;height:12px;transform:rotate(90deg);transition:transform .25s var(--e-out)}
.hd__more[aria-expanded="true"] .chev{transform:rotate(-90deg)}
.hd__menu{position:absolute;left:-8px;top:calc(100% + 14px);z-index:5;min-width:260px;padding:8px;list-style:none;
  border:1px solid var(--mat-line);border-radius:20px;box-shadow:var(--mat-shadow)}
.hd__menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:15px}
.hd__menu a:hover{background:var(--hover)}
.hd__menu a[aria-current="page"]{font-weight:600;text-decoration:underline;text-decoration-color:var(--ring);text-decoration-thickness:2px;text-underline-offset:.4em}
.hd__cta{min-height:44px;padding:0 20px;font-size:15px}
.hd__toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:500 15px/1 "Roboto Flex",system-ui,sans-serif;cursor:pointer}
.hd__toggle:hover{background:var(--hover)}
.hd__bars{position:relative;width:16px;height:10px}
.hd__bars::before,.hd__bars::after{content:"";position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;transition:transform .25s var(--e-out),top .25s var(--e-out)}
.hd__bars::before{top:1px}.hd__bars::after{top:7px}
.hd.is-open .hd__bars::before{top:4px;transform:rotate(45deg)}
.hd.is-open .hd__bars::after{top:4px;transform:rotate(-45deg)}
@media (max-width:1200px){.hd__in{gap:6px 8px}.hd__link{padding:0 9px}}
@media (max-width:1100px){
  .hd__in{flex-wrap:wrap;border-radius:28px;--hd-pl:16px}
  .hd__nav{order:5;flex:1 1 100%}
  .hd__list{flex-wrap:wrap}
  .hd.is-enhanced .hd__toggle{display:inline-flex}
  .hd.is-enhanced .hd__sheet{display:none;order:6;flex:1 1 100%;padding:6px 0 10px;border-top:1px solid var(--line)}
  .hd.is-enhanced.is-open .hd__sheet{display:block;max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain}
  .hd.is-enhanced .hd__sheet .hd__list{flex-direction:column;align-items:stretch;gap:0}
  .hd.is-enhanced .hd__sheet .hd__link{width:100%;justify-content:space-between;min-height:48px;padding:0 12px;font-size:17px;color:var(--ink)}
  .hd.is-enhanced .hd__sheet .hd__menu{position:static;min-width:0;margin:0 0 6px 12px;padding:0 0 0 10px;border:0;border-left:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none}
  .hd.is-enhanced .hd__sheet .hd__cta{display:flex;margin:10px 0 2px;width:100%}
}
@media (max-width:640px){
  .hd{padding-top:8px}
  .hd__in{--hd-pl:14px;--hd-pr:6px;padding-block:6px;gap:4px 8px}
  .hd__logo img{width:148px}
  .hd__link{font-size:14px}
  .hd:not(.is-enhanced) .hd__cta{padding:0 14px;font-size:14px}
  /* without JS the link rows (six links, two rows) centre in the capsule: they move by half the difference of the capsule's side paddings */
  .hd:not(.is-enhanced) .hd__nav{margin-inline:calc((var(--hd-pr) - var(--hd-pl)) / 2) calc((var(--hd-pl) - var(--hd-pr)) / 2)}
  .hd:not(.is-enhanced) .hd__list{justify-content:center}
  .hd:not(.is-enhanced) .hd__link{padding:0 8px}
}

/* ---------- breadcrumbs: nav.crumbs.wrap, first in main (not on /) ---------- */
.crumbs{padding-top:clamp(14px,2vw,26px);font-size:14px;line-height:1.4;color:var(--ink-2)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;list-style:none;padding:0}
.crumbs li+li::before{content:"›" / "";padding:0 .55em;color:var(--ink-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---------- sections, splits, plates, cards ---------- */
.sec{position:relative;padding-block:clamp(44px,5.5vw,84px)}
.sec__head{max-width:820px;margin-bottom:clamp(28px,4vw,52px)}
.sec__head .lead{margin-top:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:stretch}
.split--wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--48{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split__main>*+*{margin-top:20px}
@media (min-width:901px){
  .split>.split__main>h2:first-child{margin-top:-.21em}
  /* a tall plate beside the heading: the heading stays in view while the plate scrolls */
  .split>.split__main{position:sticky;top:calc(var(--hd-h,84px) + 24px);align-self:start}
}
.plates{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(14px,2vw,24px);align-items:stretch}
.plates--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.plates>.mat{align-self:stretch}
.pad>h3:first-child{margin-bottom:18px}
.pad>h2:first-child{margin-bottom:clamp(18px,2vw,26px)}
.split__main p{color:var(--ink-2);max-width:60ch}
.split__main .lead{color:var(--ink)}
@media (max-width:900px){.split,.plates{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){:root{--r-plate:20px}.sec{padding-block:32px}.sec__head{margin-bottom:24px}.contact{padding-block:40px}}

/* equal cards: ul.cards > li.card.mat; the whole card is its title's link */
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(12px,1.4vw,18px);align-items:stretch}
.card{display:flex;flex-direction:column;gap:12px;padding:56px clamp(20px,1.8vw,26px) 24px;box-sizing:border-box;transition:box-shadow .3s var(--e-out),translate .3s var(--e-out)}
.card__title{font:700 clamp(21px,.6vw + 16px,25px)/1.12 "Roboto Flex",system-ui,sans-serif;font-stretch:94%;letter-spacing:-.01em}
.card__text{color:var(--ink-2);font-size:16px;line-height:1.5}
.card__go{margin-top:auto;padding-top:14px;display:flex;justify-content:flex-end;color:var(--link)}
.card__go .chev{width:18px;height:18px}
/* a plate that is its title's link: .card__title > a stretches over the whole plate */
.card__title a{text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-plate)}
.card__title a:focus-visible{outline:0}
.card:has(.card__title a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.card:hover .card__title a{text-decoration:underline;text-decoration-color:var(--ring);text-decoration-thickness:2px}
.card:has(.card__title a):hover{box-shadow:0 26px 60px -18px var(--lift);translate:0 -2px}
/* a chip in the plate's top right corner (.card) */
.mat>.chip{position:absolute;top:18px;right:18px}
@media (max-width:900px){.cards{--cols:2}}
@media (max-width:640px){.cards{--cols:1}.card{padding-top:52px}}

/* ---------- closing lines, stacks, figures, suffixes ---------- */
/* the closing line of a plate or a section, under a rule: p.coda, or div.coda > p (+ .pills); .coda--big speaks louder */
.coda{margin-top:clamp(18px,2vw,24px);padding-top:clamp(16px,1.6vw,20px);border-top:1px solid var(--line);max-width:60ch;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mat .coda{max-width:none}
div.coda{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 28px;max-width:none}
.coda .pills{margin-top:0}
.coda--big{margin-top:clamp(28px,3vw,40px);padding-top:clamp(22px,3vw,32px);color:var(--ink);font:700 clamp(20px,1vw + 13px,26px)/1.2 "Roboto Flex",system-ui,sans-serif;font-stretch:94%;letter-spacing:-.01em}
div.coda--big>p{max-width:32ch}
/* plates one above the other in one column of a split: .stack > .mat… */
.stack{display:grid;gap:clamp(14px,2vw,24px);align-content:start}
/* a paragraph of secondary text at reading width */
/* the price suffix «excl. VAT» after a figure: the H1 of /pricing/, the calculator outputs */
.vat{font:500 max(13px,.4em)/1.3 "Roboto Flex",system-ui,sans-serif;letter-spacing:.01em;text-transform:none;color:var(--ink-2);white-space:nowrap}
/* the date line of a rate card under its heading */
.asof{margin-top:16px;color:var(--ink-2)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{padding:14px 20px 14px 0;border-top:1px solid var(--line);text-align:left;vertical-align:baseline}
.tbl tr>:last-child{padding-right:0}
.tbl thead th{padding-top:0;border-top:0;font:500 14px/1.3 "Roboto Flex",system-ui,sans-serif;color:var(--ink-3)}
.tbl td,.tbl thead th+th{text-align:right}
.tbl th[scope="row"]{font-weight:400;color:var(--ink-2)}
.tbl td{font:500 16px/1.5 "Roboto Flex",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.tbl .num{font-size:.94em}
.tbl--kv th[scope="row"]{width:42%}
@media (min-width:641px){.tbl--fig th[scope="row"]:first-child:nth-last-child(3){width:42%}}
.tbl--kv td,.tbl--kv thead th+th,.tbl--text td,.tbl--text thead th+th{text-align:left}
.tbl--text td{font-weight:400;color:var(--ink-2)}
.tbl--text th[scope="row"]{width:30%;font-weight:600;color:var(--ink)}
.tbl tr:first-child>*{border-top:0}
.tbl thead+tbody tr:first-child>*{border-top:1px solid var(--line)}
.tbl-note{margin-top:16px;font-size:14px;color:var(--ink-3)}
@media (max-width:640px){
  .tbl--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tbl--cards,.tbl--cards tbody,.tbl--cards tr,.tbl--cards th,.tbl--cards td{display:block}
  .tbl--cards tr{padding:14px 0;border-top:1px solid var(--line)}
  .tbl--cards tbody tr:first-child{border-top:0}
  .tbl--cards th,.tbl--cards td{padding:0;border:0!important;text-align:left}
  .tbl--cards th[scope="row"]{width:auto}
  .tbl--cards td{padding:4px 0 0}
  .tbl--cards td[data-label]::before{content:attr(data-label);display:block;margin-top:6px;font:400 13px/1.3 "Roboto Flex",system-ui,sans-serif;letter-spacing:0;color:var(--ink-3)}
  .tbl--fig th,.tbl--fig td{font-size:15px}
  .tbl--fig tbody :is(th,td){white-space:nowrap}
  .tbl--fig :is(th,td):not(:last-child){padding-right:12px}
  .tbl--fig thead th{font-size:13px}
/* port × commit grid (/pricing/, /connectivity/): a pair we do not sell is a quiet dash, gone from the cards at 390 */
.tbl--ports .tbl__na{color:var(--ink-3)}
@media (max-width:640px){.tbl--ports .tbl__na{display:none}}
}

/* «Who does what?» (/#who, /start/#who): table.tbl.tbl--cards.tbl--who > thead (Layer | You | ServerKing) + tbody > tr >
   th[scope=row] + td[data-label=You] + td[data-label=ServerKing]; our column is lit as one band. 390: cards */
.tbl--who{table-layout:fixed}
.tbl--who :is(th,td){padding-right:24px;text-align:left}
.tbl--who thead th+th{text-align:left}
.tbl--who th[scope="row"]{width:30%;font-weight:600;color:var(--ink)}
.tbl--who td{font-weight:400;color:var(--ink-2)}
.tbl--who tr>:last-child{padding-inline:22px;color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.tbl--who thead th:last-child{padding-top:16px;border-radius:14px 14px 0 0;color:var(--ink);box-shadow:inset 0 3px 0 -1px var(--ring)}
.tbl--who tbody tr:last-child>:last-child{padding-bottom:18px;border-radius:0 0 14px 14px}
.tbl--who thead th:nth-child(2){width:31%}
@media (max-width:640px){
  .tbl--who tr>:last-child{margin-top:4px;padding:2px 12px 10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .tbl--who tbody tr:last-child>:last-child{padding-bottom:10px;border-radius:12px}
  .tbl--who th[scope="row"]{width:auto}
}

/* ---------- definition lists, FAQ, ticks, facts ---------- */
/* every row is a div: dl.dl > div > dt + dd */
.dl{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:0 24px}
.dl>div{display:contents}
.dl dt,.dl dd{padding:14px 0;border-top:1px solid var(--line)}
.dl dt{color:var(--ink-3);font-size:15px}
.dl dd{color:var(--ink)}
.dl>div:first-child>*{border-top:0}
/* label and value on one baseline, a narrower label column */
.dl--row{grid-template-columns:minmax(0,10em) minmax(0,1fr);align-items:baseline}
@media (max-width:640px){.dl{grid-template-columns:minmax(0,1fr)}.dl dd{padding-top:0;border-top:0}}
/* two columns of pairs: dl.dl.dl--cols > div > dt + dd */
.dl--cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.dl--cols>div{display:block;padding:14px 0;border-top:1px solid var(--line)}
.dl--cols>div:nth-child(-n+2){border-top:0}
.dl--cols dt,.dl--cols dd{padding:0;border:0}
.dl--cols dd{margin-top:4px}
@media (max-width:640px){.dl--cols{grid-template-columns:minmax(0,1fr)}.dl--cols>div:nth-child(2){border-top:1px solid var(--line)}}
.faq{display:grid;list-style:none;padding:0}
/* the question floats in the left 5/12, the answer runs in the right 7/12 however many blocks it has */
.faq__item{--faq-gap:clamp(24px,4vw,64px);--faq-q:calc((100% - var(--faq-gap)) * 5 / 12);display:flow-root;padding:28px 0;border-top:1px solid var(--line)}
.faq__item:first-child{border-top:0}
.faq__item>h3{float:left;width:var(--faq-q)}
.faq__item>:not(h3){margin-left:calc(var(--faq-q) + var(--faq-gap));color:var(--ink-2);max-width:62ch}
@media (max-width:900px){.faq__item>h3{float:none;width:auto;margin-bottom:10px}.faq__item>:not(h3){margin-left:0}}
.ticks{list-style:none;padding:0}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;align-items:start;padding:15px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.45}
.ticks li:first-child{border-top:0;padding-top:4px}
.ticks__mark{display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:50%;background:var(--lit)}
.ticks__mark svg{width:22px;height:22px;fill:none;stroke:var(--lit-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ticks--plain li{grid-template-columns:minmax(0,1fr)}
.incl{padding:clamp(26px,5vw,64px)}
.incl .sec__head{margin-bottom:0}
.grps{columns:3 280px;column-gap:clamp(28px,4vw,56px);margin-top:clamp(28px,4vw,48px)}
.grp{break-inside:avoid;padding-bottom:28px}
.grp__label{margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--line-2);font:500 13px/1.2 "Roboto Flex",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.grp .ticks li{font-size:16px}
.grp .ticks li:first-child{padding-top:12px}
@media (max-width:640px){.incl{padding:22px 20px}.grp{padding-bottom:16px}.ticks li{gap:14px;padding:10px 0}}
.facts{margin-top:clamp(56px,7vw,96px)}
.facts__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:26px}
.facts__list li{padding-top:18px;border-top:1px solid var(--line-2);color:var(--ink-2);font-size:16px}
.facts__list strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sources{margin-top:26px;font-size:14px;color:var(--ink-3)}
@media (max-width:900px){.facts__list{grid-template-columns:minmax(0,1fr)}}

/* «How do we bring your infrastructure up?» (/#layers, /start/#layers): dl.bringup > div (> dt + dd) …, the last
   div.bringup__ok. The readout's mono language: a label in a pill, a lit point on one rail. Without JS, under reduced
   motion and while paused all five stand lit; under html.is-live site.js arms the list (.is-armed) and lights the rows
   one by one (.is-on) once it is in view. The rail is one segment per row (div::after), from its point down to the
   next point, so it ends on the last point at any row height; one opaque colour, so the lit segments read as one line;
   a segment lights when the row under it does */
.bringup{position:relative;--led-x:8px}
.bringup>div{position:relative;display:grid;grid-template-columns:minmax(0,7.6em) minmax(0,1fr);gap:8px 22px;align-items:baseline;
  padding:17px 0 17px 32px;border-top:1px solid var(--line);transition:opacity .22s ease-out}
.bringup>div:first-child{border-top:0}
.bringup>div:not(:last-child)::after{content:"";position:absolute;left:calc(var(--led-x) - .5px);top:30px;height:calc(100% + 1px);width:1px;
  transform-origin:top;background:var(--ring);transition:scale .475s var(--e-rv)}
.bringup>div::before{content:"";position:absolute;left:var(--led-x);top:30px;width:9px;height:9px;translate:-50% -50%;border-radius:50%;
  background:var(--signal);box-shadow:var(--node);transition:background-color .22s,box-shadow .22s}
.bringup dt{justify-self:start;padding:7px 12px 6px;border:1px solid var(--mat-line);border-radius:999px;background:var(--mat);
  font:500 13px/1 "Roboto Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--ink)}
.bringup dd{color:var(--ink-2);font-size:16px;line-height:1.5}
.bringup__ok dt{border-color:transparent;background:var(--lit);color:var(--lit-ink)}
.bringup__ok dd{color:var(--ink);font-weight:500}
.is-live .bringup.is-armed>div::after{scale:1 0}
.is-live .bringup.is-armed>div.is-on:has(+ div.is-on)::after{scale:none}
.is-live .bringup.is-armed>div:not(.is-on){opacity:.22}
.is-live .bringup.is-armed>div:not(.is-on)::before{background:var(--line-2);box-shadow:none}
@media (max-width:640px){.bringup>div{grid-template-columns:minmax(0,1fr);padding-left:28px}.bringup>div::before,.bringup>div::after{top:28px}}

/* ---------- rows of «label 4 | body 8» under a rule: .ledger__row > (h2 | label) + .ledger__body (privacy, sitemap) ---------- */
.sec--flush{padding-top:clamp(8px,2vw,24px)}
/* the one block of a compact page (sitemap, a post's «What else is new?»): no top, a large bottom */
.sec--end{padding-block:0 clamp(48px,6vw,96px)}
.ledger__row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px clamp(32px,5vw,88px);align-items:start;padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.ledger__row:first-child{padding-top:0;border-top:0}
.ledger__row:last-child{padding-bottom:0}
.ledger__row>h2{font-size:clamp(22px,1vw + 16px,30px);line-height:1.12}
.ledger__body>*+*{margin-top:16px}
.ledger__body>p{max-width:62ch;color:var(--ink-2)}
@media (max-width:900px){.ledger__row{grid-template-columns:minmax(0,1fr)}}

/* ---------- form: form.form > .field (label + input|textarea + p.field__err[hidden]) … .form__foot > button.form__send; .form__err, .form__done ---------- */
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{font-size:15px;font-weight:600;line-height:1.3}
.field :is(input,textarea){box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:12px 16px;border:1px solid var(--ink-3);border-radius:14px;background:var(--field);color:var(--ink);caret-color:var(--focus);font:400 17px/1.45 "Roboto Flex",system-ui,sans-serif;transition:border-color .2s var(--e-out),box-shadow .2s var(--e-out)}
.field textarea{min-height:11em;resize:vertical}
.field :is(input,textarea):hover{border-color:var(--ink)}
.field :is(input,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.field [aria-invalid="true"]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.field__err,.form__err{color:var(--err);font-size:15px;font-weight:500;line-height:1.45}
.form__err a{color:inherit}
.form__foot{padding-top:4px}
.form__send:disabled{opacity:.62;cursor:progress}
.form__done{margin-block:auto;padding-block:clamp(24px,6vw,72px);font:600 clamp(24px,1.2vw + 16px,32px)/1.25 "Roboto Flex",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance}


/* ---------- status line and indicator ---------- */
.status{display:flex;align-items:baseline;gap:12px;font:400 13px/1.5 "Roboto Mono",ui-monospace,monospace;letter-spacing:.01em;color:var(--ink-2)}
.status__led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:var(--node);transform:translateY(-1px)}
.indicator{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;align-self:start;padding:clamp(24px,3vw,36px)}
.indicator__state{display:flex;align-items:center;gap:24px;font:650 clamp(1.8rem,1.15rem + 2vw,2.8rem)/1 "Archivo","Arial Narrow",Arial,sans-serif;font-stretch:115%;letter-spacing:-.012em}
/* the lamp is the lit node of the logo: a ring with the Signal disc in it (Ink on light, white on dark) */
.indicator__lamp{--lamp:84px;position:relative;flex:none;box-sizing:border-box;width:var(--lamp);height:var(--lamp);border:calc(var(--lamp) * .265) solid var(--ink);border-radius:50%;background:var(--signal);isolation:isolate}
.indicator__lamp::before{content:"";position:absolute;inset:calc(var(--lamp) * -.62);z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--halo-1),transparent)}
.indicator__note{color:var(--ink-2);max-width:40ch}
@media (max-width:640px){.indicator__lamp{--lamp:64px}.indicator__state{gap:18px}}

/* ---------- the scene: a ring with a frame (.stage--photo) or an object (.stage--flat) in it ---------- */
.stage{position:relative;width:100%;container-type:inline-size;aspect-ratio:1;isolation:isolate;
  --ring-d:86cqw;--ring-y:45cqw;--box-w:calc(var(--ring-d) * .92);--box-h:var(--box-w);--box-top:calc(var(--ring-y) - var(--box-h) / 2)}
/* an object 5:4 whose frame fits the inner circle: diagonal = 92 % of the diameter */
.stage--flat{--box-w:calc(var(--ring-d) * .7184);--box-h:calc(var(--ring-d) * .5747)}
.stage::before{content:"";position:absolute;inset:-30% -60% -30%;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 30% 30% at 50% 44%,var(--halo-1),transparent 100%),radial-gradient(ellipse 48% 44% at 50% 50%,var(--halo-3),transparent 100%)}
.stage__ring{position:absolute;left:50%;top:var(--ring-y);width:var(--ring-d);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  box-shadow:var(--ring-shadow)}
.stage__ring::before,.stage__ring::after{content:"";position:absolute;inset:0;border-radius:50%}
[data-theme="dark"] .stage__ring::before{background:var(--ring);filter:blur(9px);opacity:.8;
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 16px),#000 calc(100% - 7px),transparent 100%);mask:radial-gradient(closest-side,transparent calc(100% - 16px),#000 calc(100% - 7px),transparent 100%)}
.stage__ring::after{background:var(--ring);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4.6px),#000 calc(100% - 4px),#000 calc(100% - .6px),transparent 100%);mask:radial-gradient(closest-side,transparent calc(100% - 4.6px),#000 calc(100% - 4px),#000 calc(100% - .6px),transparent 100%)}
.stage.is-ok .stage__ring::after{filter:brightness(1.35)}
.stage__obj,.leds,.readout{position:absolute;left:50%;top:var(--box-top);width:var(--box-w);height:var(--box-h);translate:-50% 0;margin:0;padding:0}
.stage__obj img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(10,10,11,.24))}
[data-theme="dark"] .stage__obj img{filter:drop-shadow(0 0 1px rgba(248,248,248,.55)) drop-shadow(0 0 22px rgba(200,229,0,.14))}
.stage--photo .stage__obj{border-radius:50%;overflow:hidden;background:var(--mat)}
.stage--photo .stage__obj img{object-fit:cover;filter:none}
.stage--photo .stage__obj::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 44px 6px var(--frame-shade)}
.stage--flat::after{content:"";position:absolute;left:50%;top:calc(var(--box-top) + var(--box-h) * .97);z-index:-1;width:calc(var(--box-w) * 1.1);height:3.4cqw;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,10,11,.3),transparent 80%)}
[data-theme="dark"] .stage--flat::after{background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent 80%),radial-gradient(closest-side,rgba(200,229,0,.16),transparent)}

/* LEDs: default — drawn dots on dark lenses (objects 5:4); data-leds="boost" — the frame's own LEDs glow in its
   pixels, the overlay adds a soft halo and flicker, and the readout lights a row by boosting it */
.leds{pointer-events:none}
.leds i{position:absolute;left:var(--x);top:var(--y);width:max(3px,1.1%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  --led:var(--signal);background:var(--led);box-shadow:0 0 3px 1px var(--led),0 0 12px 2px color-mix(in srgb,var(--led) 40%,transparent);transition:opacity .3s ease-in-out,scale .3s ease-in-out}
.leds i.v{--led:#F8F8F8}
.leds[data-leds="boost"] i{--led:#DDF8FF;width:max(5px,1.7%);opacity:.8;mix-blend-mode:screen;
  background:radial-gradient(circle,#FFFFFF 0,var(--led) 30%,color-mix(in srgb,var(--led) 0%,transparent) 72%);box-shadow:0 0 10px 2px color-mix(in srgb,var(--led) 45%,transparent)}
.stage.is-booting .leds i{opacity:.08;box-shadow:none}
.stage.is-booting .leds i.is-on{opacity:1;box-shadow:0 0 4px 1px var(--led),0 0 16px 3px color-mix(in srgb,var(--led) 55%,transparent)}
.stage.is-booting .leds[data-leds="boost"] i{opacity:.35}
.stage.is-booting .leds[data-leds="boost"] i.is-on{opacity:1;scale:1.9;box-shadow:0 0 12px 4px color-mix(in srgb,var(--led) 70%,transparent),0 0 30px 8px color-mix(in srgb,var(--led) 30%,transparent)}

/* the theme button at the ring's lowest point, the pause 8px to its right */
.stage__ctl{position:absolute;z-index:3;left:50%;top:calc(var(--ring-y) + var(--ring-d) / 2);translate:-50% -50%;display:flex}
.boot{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 20px 0 16px;white-space:nowrap;
  border:1px solid var(--line-2);border-radius:999px;color:var(--ink);
  font:500 15px/1 "Roboto Flex",system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px -8px rgba(10,10,11,.3);transition:box-shadow .25s var(--e-out)}
.boot:hover{box-shadow:0 0 0 4px var(--halo-1),0 12px 34px -8px var(--lift)}
.boot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.boot[aria-busy="true"]{cursor:progress}
.pause{display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid var(--line-2);border-radius:50%;color:var(--ink);cursor:pointer;transition:background-color .2s var(--e-out)}
.stage__ctl .pause{position:absolute;left:calc(100% + 8px);top:50%;translate:0 -50%}
.pause svg{width:16px;height:16px;fill:currentColor}
.pause .i-play,.is-paused .pause .i-pause{display:none}
.is-paused .pause .i-play{display:block}
.pause:hover{background-color:var(--hover)}
.readout{list-style:none;pointer-events:none;z-index:2;font:500 12px/1 "Roboto Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--ink)}
.readout li{position:absolute;left:6%;top:var(--ry);translate:0 -50%;display:flex;align-items:center;gap:8px;padding:4px 5px 4px 10px;white-space:nowrap;
  border:1px solid var(--mat-line);border-radius:999px;background:var(--mat);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.readout li::after{content:"";position:absolute;left:100%;top:50%;width:10cqw;height:1px;background:linear-gradient(90deg,var(--ring),transparent)}
.readout li:nth-child(1){--ry:26%}.readout li:nth-child(2){--ry:42%}.readout li:nth-child(3){--ry:58%}.readout li:nth-child(4){--ry:74%}
.readout li:nth-child(5){--ry:10%;left:50%;translate:-50% -50%;padding-left:5px}.readout li:nth-child(5)::after{display:none}
.readout b{font-weight:500;padding:3px 6px;border-radius:999px;background:var(--lit);color:var(--lit-ink)}
.stage--flat .readout li{left:auto;right:80%}
.stage--flat .readout li::after{width:calc(var(--box-w) * .12)}
.stage--flat .readout li:nth-child(1){--ry:14%}.stage--flat .readout li:nth-child(2){--ry:30%}.stage--flat .readout li:nth-child(3){--ry:46%}.stage--flat .readout li:nth-child(4){--ry:62%}
.stage--flat .readout li:nth-child(5){--ry:80%;left:auto;right:80%;translate:0 -50%}
@media (max-width:640px){.readout{font-size:11px}.readout li{gap:6px;padding:3px 4px 3px 8px}}

/* a small ring with a frame or an object: span.orb(.orb--photo) > picture */
.orb{position:relative;display:block;width:var(--orb,148px);aspect-ratio:1;flex:none;border-radius:50%;isolation:isolate}
.orb::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--halo-1),transparent)}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:var(--ring);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px),#000 calc(100% - .5px),transparent 100%);mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px),#000 calc(100% - .5px),transparent 100%)}
.orb picture{position:absolute;left:50%;top:50%;width:71.84%;aspect-ratio:5/4;translate:-50% -50%}
.orb img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.orb--photo picture{width:92%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.orb--photo img{object-fit:cover}

/* page head with a smaller scene */
.phead{position:relative;padding:clamp(16px,3vw,40px) 0 clamp(32px,4vw,56px)}
.phead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,4vw,64px);align-items:start}
.phead__text{padding-top:clamp(16px,3vw,40px)}
.phead__text .lead{margin-top:24px;max-width:56ch}
.stage--page{max-width:440px;justify-self:end}
.phead--compact .phead__grid{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.phead__grid{grid-template-columns:minmax(0,1fr)}.stage--page{width:min(100%,340px);justify-self:center;margin-top:36px}}
@media (max-width:640px){.stage--page{width:min(100%,300px);margin-top:24px}}

/* ---------- home: first viewport ---------- */
.hero{position:relative;padding:clamp(20px,3vw,44px) 0 clamp(40px,5vw,72px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-areas:"text stage";column-gap:clamp(24px,4vw,64px);align-items:start}
.hero__text{grid-area:text;position:relative;z-index:2;padding-top:clamp(8px,2.4vw,36px)}
.hero .stage{grid-area:stage}
.hero__lead{max-width:600px;margin-top:36px;padding:30px 32px 26px}
.hero .status{margin:20px 0 0 4px}
@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "lead" "status"}
  .hero__text{display:contents}
  .hero__head{grid-area:head}
  .hero .stage{width:min(100%,400px);justify-self:center;margin-top:18px}
  .hero__lead{grid-area:lead;margin-top:10px}
  .hero .status{grid-area:status}
}
@media (max-width:640px){
  .hero .stage{width:min(100%,340px)}
  .hero__lead{padding:22px 20px 20px}
  .hero .pills .pill{flex:1 1 auto}
}

/* ---------- a plate in two columns: head 5 | body 7 (home #included) ---------- */
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);padding:clamp(26px,5vw,64px)}
.duo__head>*+*{margin-top:22px}
.duo__head p{color:var(--ink-2);max-width:40ch}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}}

/* ---------- steps: ol.steps > li.step.mat > .step__row (span.step__no.num + h3.step__name + span.chip) + p.step__text ---------- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);align-items:stretch}
.step{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,26px)}
.step__no{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.06em;color:var(--link)}
.step__no::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.step__row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.step__name{font:650 clamp(20px,.8vw + 14px,25px)/1.1 "Archivo","Arial Narrow",Arial,sans-serif;font-stretch:115%;letter-spacing:-.01em}
.step__text{color:var(--ink-2);font-size:16px;line-height:1.5}
@media (max-width:999px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.steps{grid-template-columns:minmax(0,1fr)}}
/* four steps in one row from 1000px: ol.steps.steps--4 */
@media (min-width:1000px){.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- logo band: .logos > .logos__view > .logos__rail > ul.logos__track (+ its copy, aria-hidden) + button.pause.logos__pause;
   li > span.logo[role=img][aria-label] with --src, --ar, --h (the copy's spans without role and label).
   Still (no JS, reduced motion): the first track in even rows of equal cells. Running: see «continuous motion» ---------- */
.logos{--band-gap:clamp(36px,4.5vw,64px);display:flex;align-items:center;gap:16px;padding:clamp(26px,3vw,40px) 0;border-block:1px solid var(--line)}
.logos__view{flex:1;min-width:0}
.logos__track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));place-items:center;row-gap:32px}
.logos__track>li{display:flex;justify-content:center;max-width:100%}
.logos__track[aria-hidden]{display:none}
.logos__pause{flex:none}
.logo{display:block;height:var(--h,24px);aspect-ratio:var(--ar,2);max-width:100%;background:var(--brand-ink);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
@media (max-width:640px){.logos{--band-gap:34px}.logos__track{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}.logo{height:calc(var(--h,24px) * .8)}}
@media (forced-colors:active){.logo{forced-color-adjust:none;background:CanvasText}}

/* ---------- contact block ---------- */
.contact{position:relative;padding:clamp(48px,6vw,96px) 0 clamp(48px,5.5vw,88px);isolation:isolate}
.contact__light{position:absolute;left:50%;top:50%;z-index:-1;width:min(920px,150vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,transparent 60%,var(--halo-3) 68%,var(--halo-1) 71%,var(--halo-3) 74%,transparent 86%)}
.contact__panel{max-width:760px;margin-inline:auto;padding:clamp(28px,5vw,64px);box-sizing:border-box;text-align:center}
.contact__panel>p{margin:20px auto 0;color:var(--ink-2);max-width:52ch;font-size:18px}
.contact__panel .pills{justify-content:center;margin-top:30px}

/* ---------- footer ---------- */
.ft{position:relative;margin-top:clamp(24px,3vw,48px);padding:clamp(40px,5vw,72px) 0 28px;view-transition-name:site-footer;
  background-color:var(--mat-deep);background-image:var(--grain-deep);background-size:220px 220px;border-top:1px solid var(--mat-line)}
.ft__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px clamp(32px,5vw,88px);padding-bottom:clamp(28px,3vw,44px)}
.ft__details{margin-top:22px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.ft__details p:first-child{color:var(--ink);font-weight:500}
.ft__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(20px,3vw,48px)}
.ft__label{margin-bottom:10px;font:500 13px/1.2 "Roboto Flex",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ft__label--sub{margin-top:18px}
.ft__nav ul{list-style:none;padding:0}
.ft__nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3}
.ft__nav a:hover{color:var(--link);text-decoration:underline}
.ft__nav a[aria-current="page"]{font-weight:600;text-decoration:underline;text-decoration-color:var(--ring);text-decoration-thickness:2px}
.ft__bottom{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 32px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--ink-3)}
.ft__legal{display:flex;flex-wrap:wrap;column-gap:1.2em}
.ft__sitemap{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2)}
.ft__sitemap:hover{color:var(--link);text-decoration-color:currentColor}
@media (max-width:1100px){.ft__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.ft__nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ft__legal{flex-direction:column}}

/* ---------- the lids: a vignette gathers from the edges, then two lids close to the middle and open on the other theme ---------- */
/* the durations are read by site.js: vignette, closing (after the vignette), shut, opening */
.lids{--lid-vig:150ms;--lid-close:400ms;--lid-shut:120ms;--lid-open:450ms;position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;visibility:hidden}
.lids.is-on{visibility:visible}
.lids__vig{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 72% 66% at 50% 50%,rgba(5,5,7,0) 30%,rgba(5,5,7,.6) 70%,#050507 100%);transition:opacity var(--lid-open) cubic-bezier(0,.55,.45,1)}
.lids__lid{position:absolute;left:-30%;right:-30%;height:66%;background:#050507;filter:blur(24px);transition:transform var(--lid-open) cubic-bezier(0,.55,.45,1)}
.lids__lid--top{top:0;border-radius:0 0 50% 50% / 0 0 42% 42%;transform:translateY(-112%)}
.lids__lid--bot{bottom:0;border-radius:50% 50% 0 0 / 42% 42% 0 0;transform:translateY(112%)}
.lids.is-shut .lids__vig{opacity:1;transition:opacity var(--lid-vig) ease-in}
.lids.is-shut .lids__lid{transform:translateY(-8%);transition:transform var(--lid-close) cubic-bezier(.55,0,1,.45) var(--lid-vig)}
.lids.is-shut .lids__lid--bot{transform:translateY(8%)}

/* ---------- continuous motion: only under html.is-live (script), never under reduced motion ---------- */
@keyframes sk-led{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes sk-breathe{0%,100%{opacity:.8}50%{opacity:.56}}
.is-live .leds i,.is-live .status__led{animation:sk-led var(--t,3.2s) ease-in-out var(--dl,0s) infinite}
.is-live .leds[data-leds="boost"] i{animation-name:sk-breathe}
.is-live .stage__ring::before,.is-live .indicator__lamp::before{animation:sk-breathe 8s ease-in-out infinite}
.stage.is-booting .leds i{animation:none}
/* the logo band (home): once site.js has set the pause state it is one line faded at the edges, the copy of the track
   beside the first (each track ends with one gap), and the rail moves by one track in a loop; it runs only under
   html.is-live and stands where it is under the pause, on hover and on focus */
@keyframes sk-band{to{transform:translateX(-50%)}}
.logos__rail{animation-play-state:paused}
.is-live .logos__rail{animation-play-state:running}
.is-live .logos:is(:hover,:focus-within) .logos__rail{animation-play-state:paused}
@media (prefers-reduced-motion:no-preference){
  :is(.is-live,.is-paused) .logos__view{overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  :is(.is-live,.is-paused) .logos__rail{display:flex;width:max-content;animation-name:sk-band;animation-duration:64s;animation-timing-function:linear;animation-iteration-count:infinite}
  :is(.is-live,.is-paused) .logos__track{display:flex;align-items:center;gap:var(--band-gap);padding-right:var(--band-gap)}
}

/* ---------- entrances and exits ---------- */
@keyframes sk-in{from{opacity:0}}
@keyframes hero-up{from{opacity:0;translate:0 20px}}
@keyframes ring-on{from{opacity:0;scale:.92}}
@keyframes obj-on{from{opacity:0;scale:.97}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .readout li{animation:sk-in .22s ease-out both}
  .js .hero__head{animation:hero-up .8s var(--e-rv) both}
  .js .hero__lead{animation:hero-up .8s .12s var(--e-rv) both}
  .js .hero .status{animation:hero-up .8s .2s var(--e-rv) both}
  .js .stage--hero .stage__ring{animation:ring-on .9s var(--e-rv) both}
  .js .stage--hero .stage__obj{animation:obj-on .8s .08s var(--e-rv) both}
  .js .stage--hero .leds{animation:sk-in .6s .4s ease-out both}
  .rv-io [data-reveal]{transition:opacity .7s var(--e-rv),translate .7s var(--e-rv),scale .7s var(--e-rv);transition-delay:calc(var(--i,0) * 80ms)}
  .rv-io [data-reveal]:not(.is-in){opacity:0;translate:0 24px}
  .rv-io [data-reveal="left"]:not(.is-in){translate:-24px 0}
  .rv-io [data-reveal="right"]:not(.is-in){translate:24px 0}
  .rv-io [data-reveal="scale"]:not(.is-in){translate:none;scale:.97}
  .rv-io [data-reveal].is-out{opacity:0;translate:0 -12px;scale:1;transition:opacity .5s ease-out,translate .5s ease-out}
  @view-transition{navigation:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,0,0,1)}
  ::view-transition-group(site-footer){animation-duration:0s}
}
@media (prefers-reduced-motion:reduce){.hd{transition:none}.lids{display:none}}

/* ---------- consent (site.js, ADR 0048): a non-modal plate at the bottom left of .wrap; «Cookie settings» in the footer ---------- */
.consent{position:fixed;left:0;right:0;bottom:16px;z-index:60;pointer-events:none}
.consent__in{box-sizing:border-box;pointer-events:auto;width:min(var(--wrap-w),520px);margin-left:calc((100% - var(--wrap-w)) / 2);padding:22px 24px;
  background:var(--mat);border:1px solid var(--mat-line);border-radius:var(--r-plate);box-shadow:var(--mat-shadow);color:var(--ink-2);font-size:15px;line-height:1.55}
.consent__in a{color:var(--ink)}
.consent__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.consent__btns .pill{min-height:44px;flex:1 1 0}
.ft__consent{margin-left:auto;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);cursor:pointer}
.ft__consent:hover{color:var(--link);text-decoration-color:currentColor}
@media print{.consent{display:none!important}}

/* ---------- for the templates only (templates/news-index.html, templates/news-post.html): /news/ is off the site until
   the owner returns it, so these rules and --halo-2 have no user on the served pages. Cards: ul.posts > li.post.mat ---------- */
.prose>*+*{margin-top:1em}
.prose p,.prose li{max-width:68ch;color:var(--ink-2)}
.posts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
.post{display:flex;flex-direction:column;transition:box-shadow .3s var(--e-out),translate .3s var(--e-out)}
.post__pic{margin:8px 8px 0}
.post__pic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--r-plate) - 8px);background:var(--mat-deep)}
.post__body{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px clamp(18px,1.8vw,24px) 24px}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:24px;font-size:14px;line-height:1.3;color:var(--ink-2);font-variant-numeric:tabular-nums}
.post__title{font:700 clamp(20px,.5vw + 16px,23px)/1.18 "Roboto Flex",system-ui,sans-serif;font-stretch:94%;letter-spacing:-.01em;text-transform:none}
.post__title a{text-decoration:none}
.post__title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-plate)}
.post__title a:focus-visible{outline:0}
.post:has(.post__title a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.post:hover .post__title a{text-decoration:underline;text-decoration-color:var(--ring);text-decoration-thickness:2px}
.post:has(.post__title a):hover{box-shadow:0 26px 60px -18px var(--lift);translate:0 -2px}
@media (max-width:1100px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:minmax(0,1fr)}}

/* ---------- print ---------- */
@media print{.hd,.stage__ctl,.readout,.contact__light,.stage__ring,.lids{display:none!important}.mat{box-shadow:none}
  .bringup>div{opacity:1!important}.bringup>div::after{scale:none!important}.bringup>div::before{background:var(--signal)!important}}