/* site.rtl.css: site.css mirrored for right-to-left pages by redesign/port/build_rtl.js — do not edit, rebuild */
/* fonts: Bricolage Grotesque, JetBrains Mono, Instrument Serif — SIL Open Font License 1.1 (fonts/README.txt) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin.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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic-latin.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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin.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: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/jetbrains-mono-latin.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; }

/* What the site still uses from the old marketing.css (26.10.2026: marketing.css is no longer loaded): its colour tokens,
   the buttons and blocks of pages kept from before (mailing view, unsubscribe page), small helpers, and the Livewire
   navigation progress bar. Picked by mk_audit.py (a rule stays if every class and id of a selector occurs in our
   templates or scripts). Placed before the site rules, where marketing.css used to be. */
@keyframes fc-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fc-liveIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes fc-liveOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-6px)} }
@keyframes fc-shieldRot { to{transform:translate(50%,-50%) rotate(-360deg)} }
@keyframes fc-attackFloat { 0%,100%{transform:translateY(0);opacity:.8} 50%{transform:translateY(-8px);opacity:1} }
@keyframes fc-typing { 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
@keyframes fc-dcPulse { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(3.8);opacity:0} }
@keyframes fc-arcFlow { to{stroke-dashoffset:-36} }
:root {
  --fc-lime:     #b5f53a;
  --fc-lime-rgb: 181,245,58;
}
:root {
  --fc-bg:         #0a0c13;
  --fc-bg-elev:    #0f1219;
  --fc-surface:    #14171f;
  --fc-surface2:   #1c2030;
  --fc-border:     #232838;
  --fc-border2:    #353b54;
  --fc-text:       #f4f5f9;
  --fc-text2:      #9ea3b8;
  --fc-text3:      #6e7388;
  --fc-text-dim:   #51566c;
  --fc-accent:     #ae4be8;
  --fc-accent-rgb: 174,75,232;
  --fc-accent-d:   #9a35d0;
  --fc-accent-h:   #c062f0;
  --fc-accent-soft:rgba(var(--fc-accent-rgb),.12);
  --fc-on-accent:  #fff;
  --fc-lime:       #b5f53a;
  --fc-lime-rgb:   181,245,58;
  --fc-lime-soft:  rgba(181,245,58,.12);
  --fc-green:      #4ade80;
  --fc-red:        #ff5470;
  --fc-iris:       #7c5cff;
  --fc-font:       'Bricolage Grotesque', system-ui, sans-serif;
  --fc-serif:      'Instrument Serif', 'Times New Roman', serif;
  --fc-mono:       'JetBrains Mono', ui-monospace, Consolas, monospace;
  --fc-r:          12px;
  --fc-r-sm:       8px;
  --fc-r-lg:       20px;
}
body.fc-marketing {
  --fc-bg:         #0a0c13;
  --fc-bg-elev:    #0f1219;
  --fc-surface:    #14171f;
  --fc-surface2:   #1c2030;
  --fc-border:     #232838;
  --fc-border2:    #353b54;
  --fc-text:       #f4f5f9;
  --fc-text2:      #9ea3b8;
  --fc-text3:      #6e7388;
  --fc-text-dim:   #51566c;
  --fc-accent:     #ae4be8;
  --fc-accent-rgb: 174,75,232;
  --fc-accent-d:   #9a35d0;
  --fc-accent-h:   #c062f0;
  --fc-accent-soft:rgba(var(--fc-accent-rgb),.12);
  --fc-on-accent:  #fff;
  --fc-lime:       #b5f53a;
  --fc-lime-rgb:   181,245,58;
  --fc-lime-soft:  rgba(181,245,58,.12);
  --fc-green:      #4ade80;
  --fc-red:        #ff5470;
  --fc-iris:       #7c5cff;
  --fc-font:       'Bricolage Grotesque', system-ui, sans-serif;
  --fc-serif:      'Instrument Serif', 'Times New Roman', serif;
  --fc-mono:       'JetBrains Mono', ui-monospace, Consolas, monospace;
  --fc-r:          12px;
  --fc-r-sm:       8px;
  --fc-r-lg:       20px;

  font-family: var(--fc-font);
  color: var(--fc-text);
  background: var(--fc-bg);
  -webkit-font-smoothing: antialiased;
}
.fc-btn-primary, .fc-btn-ghost, .fc-btn-lime {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--fc-font); font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.fc-btn-lime {
  background: linear-gradient(-135deg, #20b5eb 0%, var(--fc-accent) 100%);
  color: #fff;
}
.fc-btn-lime:hover {
  background: linear-gradient(-135deg, #4cc8f0 0%, #c062f0 100%);
  box-shadow: 0 8px 28px -8px rgba(130,100,235,.6);
  color: #fff;
}
.fc-btn-primary {
  background: linear-gradient(-135deg, #20b5eb 0%, var(--fc-accent) 100%); color: #fff;
}
.fc-btn-primary:hover {
  background: linear-gradient(-135deg, #4cc8f0 0%, #c062f0 100%);
  box-shadow: 0 8px 28px -8px rgba(130,100,235,.6);
  color: #fff;
}
.fc-btn-ghost {
  background: transparent;
  border-color: var(--fc-border2);
  color: var(--fc-text);
}
.fc-btn-ghost:hover {
  border-color: #20b5eb;
  color: #20b5eb;
}
body.fc-marketing nav.fixed {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.fc-mkt-nav-link {
  padding: 7px 14px; border-radius: 999px;
  color: var(--fc-text2); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.fc-mkt-nav-link:hover { color: var(--fc-text); background: rgba(255,255,255,.04); }
.fc-mkt-nav-link.on { color: var(--fc-text); background: rgba(255,255,255,.06); }
.fc-sidebar-children { padding-right: 30px; }
.fc-nav-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fc-text2); position: relative;
  transition: color .15s, background .15s;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
}
.fc-nav-icon-btn:hover { color: var(--fc-text); background: rgba(255,255,255,.06); }
.fc-nav-icon-btn.on { color: var(--fc-text); background: rgba(255,255,255,.08); }
@media (max-width: 767px) { .fc-nav-icon-btn { width: 30px; height: 30px; } }
@media (max-width: 767px) { main > .container { margin-top: 24px !important; } }
@media (max-width: 767px) { .fc-notif-wrap .absolute.mt-2 {
    position: fixed !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    top: 64px !important;
  } }
.fc-mkt-mob-link {
  display: block; padding: 12px 4px;
  font-size: 15px; font-weight: 500;
  color: var(--fc-text2); text-decoration: none;
  border-bottom: 1px solid var(--fc-border);
  transition: color .15s;
}
.fc-mkt-mob-link:last-child { border-bottom: none; }
.fc-mkt-mob-link:hover { color: var(--fc-text); }
.fc-mkt-mob-link.on { color: var(--fc-accent); font-weight: 600; }
@keyframes fc-dc-spin { to { transform: rotate(-360deg); } }
@keyframes fc-dc-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes fc-dc-fadeup { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
body.fc-marketing nav.fixed.top-0 {
  background: transparent !important;
  border-bottom-color: transparent !important;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
body.fc-marketing nav.fixed > div > div { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; }
body:not(.fc-marketing) main { padding-bottom: 64px; }
body.fc-marketing main { background: var(--fc-bg); }
.fc-mkt-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px;
  padding-top: 120px;
}
.fc-mkt-wrap.fc-page-ptb { padding-bottom: 180px; }
@media (max-width: 767px) { .fc-mkt-wrap.fc-page-ptb { padding-bottom: 60px; } }
.fc-dc-card {
  background: var(--fc-surface); border: 1px solid var(--fc-border);
  border-radius: var(--fc-r); padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.fc-dc-card::after {
  content: ''; pointer-events: none;
  position: absolute; top: 0; right: -75%; width: 45%; height: 100%;
  background: linear-gradient(-90deg, transparent, rgba(255,255,255,.045), transparent);
  transform: skewX(18deg);
  transition: right 0s;
}
.fc-dc-card:hover { border-color: #20b5eb; transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.28), 0 0 24px rgba(32,181,235,.08); }
.fc-dc-card:hover::after { right: 130%; transition: right .55s ease; }
.fc-dc-flag {
  width: 44px; height: 44px;
  background: var(--fc-surface2); border: 1px solid var(--fc-border);
  border-radius: var(--fc-r); display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.fc-flag {
  display: block; height: 24px; width: auto; max-width: 34px; object-fit: contain; flex-shrink: 0;
  border-radius: 2px;
}
.fc-dc-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fc-dc-spec {
  background: var(--fc-surface2); border-radius: var(--fc-r-sm);
  padding: 10px 12px;
}
.fc-dot-green {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--fc-lime); font-family: var(--fc-mono);
  white-space: nowrap;
}
.fc-dot-green::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fc-lime); flex-shrink: 0;
}
.fc-dot-red {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: #f87171; font-family: var(--fc-mono);
  white-space: nowrap;
}
.fc-dot-red::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #f87171; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(248,113,113,.6);
}
.fc-dot-grey {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--fc-text3); font-family: var(--fc-mono);
  white-space: nowrap;
}
.fc-dot-grey::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fc-text3); flex-shrink: 0;
}
@media (max-width: 991px) { .fc-mkt-wrap { padding: 32px 24px; padding-top: 120px; } }
@media (max-width: 575px) { .fc-mkt-wrap { padding: 16px 18px; padding-top: 45px; } }
.fc-legal-notice {
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid var(--fc-border);
  border-right: 3px solid var(--fc-accent);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fc-text2);
}
.fc-legal-notice a { color: var(--fc-accent); }
#fc-cookie-bar {
  position: fixed; bottom: 16px; right: 16px; left: 16px;
  z-index: 9999; max-width: 720px; margin: 0 auto;
  background: rgba(20,23,31,.96); backdrop-filter: blur(20px);
  border: 1px solid var(--fc-border2); border-radius: var(--fc-r-lg);
  padding: 16px 20px;
  transform: translateY(140%); transition: transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
#fc-cookie-bar.visible { transform: translateY(0); }
#fc-cookie-bar-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fc-cookie-text { flex: 1; min-width: 220px; font-size: 13px; color: var(--fc-text2); line-height: 1.6; }
.fc-cookie-text strong { color: var(--fc-text); }
.fc-cookie-text a { color: var(--fc-accent); }
.fc-cookie-text a:hover { color: #20b5eb; text-decoration: none; }
.fc-cookie-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 575.98px) { .fc-mkt-wrap { overflow-x: hidden; } }
#nprogress .bar { background: linear-gradient(-90deg, #20b5eb 0%, var(--fc-accent) 100%) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--fc-accent), 0 0 5px var(--fc-accent) !important; }

/* AxiomaCloud redesign (2026-10): shared shell (tokens, header, menu, language list, background, footer, buttons,
   icons) and the redone pages (home, then PAGES below). Made from the prototype by tools build_port.py — edit the prototype or the extra rules
   at the end, then rebuild. Loaded after marketing.css on every page. */
:root {
  color-scheme: dark;
  --fc-bg: #070910; --fc-bg-elev: #0b0e15; --fc-surface: #14171f; --fc-surface2: #1c2030;
  --fc-border: #232838; --fc-border2: #353b54;
  --fc-text: #f4f5f9; --fc-text2: #9ea3b8; --fc-text3: #6e7388;
  --fc-accent: #ae4be8; --fc-accent-rgb: 174,75,232; --fc-accent-h: #c062f0; --fc-accent-soft: rgba(174,75,232,.12);
  --fc-cyan: #20b5eb; --fc-cyan-h: #4cc8f0; --fc-lime: #b5f53a; --fc-iris: #7c5cff;
  --fc-font: "Bricolage Grotesque", system-ui, sans-serif;
  --fc-serif: "Instrument Serif", "Times New Roman", serif;
  --fc-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fc-r: 12px; --fc-r-sm: 8px; --fc-r-lg: 20px;
  --gut-l: max(18px, env(safe-area-inset-right, 0px));
  --gut-r: max(18px, env(safe-area-inset-left, 0px));
}
@media (min-width: 992px) { :root { --gut-l: max(40px, env(safe-area-inset-right, 0px)); --gut-r: max(40px, env(safe-area-inset-left, 0px)); } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--fc-text); font-family: var(--fc-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
:where(.ax-main) h1, :where(.ax-main) h2, :where(.ax-main) h3, :where(.ax-main) p { margin: 0; }
:where(.ax-main) h1, :where(.ax-main) h2 { text-wrap: balance; }
:where(.ax-main) em { font-family: var(--fc-serif); font-style: italic; font-weight: 400; color: var(--fc-accent); font-size: 1.1em; transition: color .4s; }
:focus-visible { outline: 2px solid var(--fc-cyan); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1260px; margin: 0 auto; padding-right: var(--gut-l); padding-left: var(--gut-r); }

/* brand icons (masked layers) */
.ic { position: relative; width: 22px; height: 22px; flex-shrink: 0; display: block; }
.ic i { position: absolute; inset: 0; -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.ic .g { background: linear-gradient(-45deg, var(--fc-cyan), var(--fc-accent)); }
.ic .a { background: var(--fc-lime); }

/* buttons: the site's, with a livelier hover */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; font-family: var(--fc-font); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, box-shadow .25s, transform .25s cubic-bezier(.2,.8,.3,1); }
.btn .arr { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.btn:hover .arr { transform: translateX(-4px); }
.btn-primary { background: linear-gradient(-135deg, var(--fc-cyan) 0%, var(--fc-accent) 100%); color: #fff; }
.btn-primary:hover { background: linear-gradient(-135deg, var(--fc-cyan-h) 0%, var(--fc-accent-h) 100%); box-shadow: 0 10px 34px -8px rgba(130,100,235,.75), 0 0 0 4px rgba(174,75,232,.14); transform: translateY(-2px); }
.btn-ghost { background: rgba(7,9,16,.35); border-color: var(--fc-border2); color: var(--fc-text); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--fc-cyan); color: var(--fc-cyan); box-shadow: 0 0 0 4px rgba(32,181,235,.12); transform: translateY(-2px); }
.btn-sm { padding: 7px 16px; font-size: 12.5px; }

/* background: slow colour glows and a few drifting hexagons behind the whole page (sections stay transparent) */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; will-change: transform; }
.sky i:nth-child(1) { right: -22vmax; top: -26vmax; background: radial-gradient(closest-side, rgba(174,75,232,.1), transparent); animation: sky1 40s ease-in-out infinite alternate; }
.sky i:nth-child(2) { left: -28vmax; top: 18vh; background: radial-gradient(closest-side, rgba(32,181,235,.14), transparent); animation: sky2 48s ease-in-out infinite alternate; }
.sky i:nth-child(3) { right: 18vw; bottom: -38vmax; width: 62vmax; height: 62vmax; background: radial-gradient(closest-side, rgba(181,245,58,.06), transparent); animation: sky3 56s ease-in-out infinite alternate; }
@keyframes sky1 { to { transform: translate3d(-30vw, 34vh, 0) scale(1.15); } }
@keyframes sky2 { to { transform: translate3d(36vw, 38vh, 0) scale(.88); } }
@keyframes sky3 { to { transform: translate3d(-26vw, -44vh, 0) scale(1.2); } }

/* nav: transparent, blurred once you scroll */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--fc-bg); }
.nav { position: fixed; top: env(safe-area-inset-top, 0px); right: 0; left: 0; z-index: 20; transition: background .3s, backdrop-filter .3s; }
.nav.scrolled { background: rgba(7,9,16,.78); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.nav .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; max-width: none; }
.logo svg { height: 22px; width: auto; display: block; }
.links { display: flex; gap: 6px; margin-right: 16px; }
.links a { position: relative; padding: 7px 12px; color: var(--fc-text2); font-size: 14px; font-weight: 500; transition: color .2s; }
.links a::after { content: ""; position: absolute; right: 12px; left: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.links a:hover { color: var(--fc-text); }
.links a:hover::after, .links a.on::after { transform: scaleX(1); }
.links a.on { color: var(--fc-text); }
.mmenu nav a.on { color: var(--fc-lime); }
.nav-right { margin-right: auto; display: flex; align-items: center; gap: 10px; }
/* language picker: the current language opens a list (built for many languages; more than eight go into columns) */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--fc-text); border-color: var(--fc-border2); background: rgba(255,255,255,.03); }
.lang-btn svg { width: 16px; height: 16px; flex: none; }
.lang-btn .chev { width: 10px; height: 10px; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(-180deg); }
.lang-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; width: 230px; max-width: calc(100vw - 32px); max-height: min(60vh, 440px); overflow: auto; padding: 6px; border-radius: 14px; background: rgba(15,18,27,.97); border: 1px solid var(--fc-border2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.85); display: grid; gap: 2px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lang-menu.many { width: 480px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lang-menu[hidden] { display: none; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; color: var(--fc-text2); font-size: 14px; transition: background .15s, color .15s; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--fc-surface); color: var(--fc-text); outline: none; }
.lang-menu a code { font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); }
.lang-menu a[aria-checked="true"] { color: var(--fc-text); }
.lang-menu a[aria-checked="true"] code { color: var(--fc-lime); }
@media (max-width: 767px) { .links, .nav-right > .btn-ghost { display: none; } .logo svg { height: 18px; } .lang-btn { padding: 0 8px; } .lang-btn .chev { display: none; } }
/* phone menu: three lines that turn into a cross; the panel drops down under the header with the page links and Login */
.menu-btn { display: none; position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.4); cursor: pointer; }
.menu-btn span { position: absolute; right: 11px; left: 11px; height: 1.6px; border-radius: 2px; background: var(--fc-text); transition: transform .25s, opacity .2s, top .25s; }
.menu-btn span:nth-child(1) { top: 13px; } .menu-btn span:nth-child(2) { top: 19px; } .menu-btn span:nth-child(3) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(-45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(45deg); }
.mmenu { padding: 8px max(18px, env(safe-area-inset-right, 0px)) 22px max(18px, env(safe-area-inset-left, 0px)); background: rgba(7,9,16,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--fc-border); }
.mmenu nav { display: flex; flex-direction: column; }
.mmenu nav a { padding: 14px 4px; font-size: 20px; font-weight: 600; color: var(--fc-text); border-bottom: 1px solid var(--fc-border); }
.mmenu-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.mmenu[hidden] { display: none; }
@media (max-width: 767px) { .menu-btn { display: block; } .nav .nav-right > .btn-primary { display: none; } .nav.menu-open { background: rgba(7,9,16,.96); } }
@media (min-width: 768px) { .mmenu { display: none !important; } }

/* 3D canvases */
.vis { position: relative; }
.vis > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vis .art { position: absolute; inset: 0; display: grid; place-items: center; }
.vis.gl .art { display: none; }
.art .hexbig { width: min(62%, 280px); aspect-ratio: .866; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, rgba(32,181,235,.35), rgba(174,75,232,.35)); display: grid; place-items: center; }
.art .hexbig .ic { width: 38%; height: auto; aspect-ratio: 1; }
.vis-tag { position: absolute; right: 50%; bottom: 8%; transform: translate(50%, 8px); font-family: var(--fc-mono); font-size: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(7,9,16,.75); border: 1px solid var(--fc-border2); color: var(--fc-text2); opacity: 0; transition: opacity .35s, transform .35s; white-space: nowrap; pointer-events: none; }
.vis-tag.on { opacity: 1; transform: translate(50%, 0); color: var(--fc-lime); border-color: rgba(181,245,58,.4); }
.vis-hint { position: absolute; left: 6%; top: 6%; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); opacity: .8; transition: opacity .3s; pointer-events: none; }
.vis:hover .vis-hint { opacity: 0; }

/* hero */
.hero { position: relative; min-height: min(960px, 100svh); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero > .vis { position: absolute; inset: 0; z-index: -2; }
.hero .art { background: radial-gradient(ellipse at 80% -10%, rgba(124,92,255,.22) 0%, transparent 40%), radial-gradient(ellipse at -10% 80%, rgba(174,75,232,.10) 0%, transparent 35%); }
.hero .art .hexbig { display: none; }
.hero > .vis { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.5) 38%, #000 66%), linear-gradient(0deg, transparent 0%, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.5) 38%, #000 66%), linear-gradient(0deg, transparent 0%, #000 22%); mask-composite: intersect; }
.hero-inner { width: 100%; padding-block: 120px 90px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid var(--fc-border2); font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); letter-spacing: .03em; margin-bottom: 32px; backdrop-filter: blur(6px); }
.eyebrow strong { color: var(--fc-text); font-weight: 600; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-lime); box-shadow: 0 0 10px var(--fc-lime); animation: blink 1.6s infinite; flex-shrink: 0; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hero h1 { font-size: clamp(52px, 9vw, 120px); font-weight: 700; line-height: .93; letter-spacing: -.04em; max-width: 9.2em; }
.hero-sub { font-size: clamp(15px, 1.4vw, 18px); color: var(--fc-text2); max-width: 520px; line-height: 1.55; margin-top: 30px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 42px; }
.meta-cell { display: flex; flex-direction: column; gap: 2px; transition: transform .25s; cursor: default; }
.meta-cell:hover { transform: translateY(-3px); }
.meta-cell:hover .meta-val { color: var(--fc-lime); text-shadow: 0 0 18px rgba(181,245,58,.45); }
.meta-val { font-family: var(--fc-mono); font-size: 18px; font-weight: 700; transition: color .25s, text-shadow .25s; }
.meta-lbl { font-size: 11px; color: var(--fc-text3); text-transform: uppercase; letter-spacing: .08em; font-family: var(--fc-mono); }
.meta-div { width: 1px; height: 28px; background: var(--fc-border2); }
@media (max-width: 991px) {
  .hero { min-height: 0; display: block; }
  /* the sphere starts below the header so it never runs under it */
  .hero > .vis { inset: calc(64px + env(safe-area-inset-top, 0px)) 0 auto; height: 420px; }
  .hero > .vis { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 130px, rgba(0,0,0,.4) 230px, rgba(0,0,0,.18) 320px, transparent 415px); mask-image: linear-gradient(180deg, #000 0, #000 130px, rgba(0,0,0,.4) 230px, rgba(0,0,0,.18) 320px, transparent 415px); }
  /* the text comes up over the lower half of the sphere, which is shaded (masked down) under it */
  .hero-inner { padding-block: 225px 60px; }
}
@media (max-width: 575px) { .hero h1 { font-size: 46px; } .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; } .meta-div { display: none; } }

/* manifest */
.manifest { padding-block: clamp(90px, 11vw, 150px); }
.manifest p { font-size: clamp(30px, 4.2vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; color: var(--fc-text2); max-width: 1100px; }
.manifest p em { color: var(--fc-text); }
.manifest .hi { color: var(--fc-text); transition: color .3s; }
.manifest p:hover .hi { color: var(--fc-lime); }
.manifest .foot { margin-top: 40px; font-family: var(--fc-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fc-text3); display: flex; align-items: center; gap: 10px; }
.manifest .foot::before { content: ""; width: 9px; height: 10px; background: var(--fc-lime); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* hero: the card beside the column that is launching (placed by the script, under the headline) */
.launch-card { position: absolute; left: 0; top: 0; z-index: -1; width: 238px; padding: 14px 16px 16px; border-radius: 14px; background: rgba(12,15,24,.78); border: 1px solid var(--fc-border2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); pointer-events: none; opacity: 0; transition: opacity .45s, border-color .45s; will-change: transform; }
.launch-card.on { opacity: 1; }
.launch-card.ok { border-color: rgba(181,245,58,.45); }
.lc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lc-head b { font-weight: 600; color: var(--fc-text); }
.lc-head code { margin-right: auto; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); }
.lc-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--fc-cyan); box-shadow: 0 0 10px var(--fc-cyan); transition: background .4s, box-shadow .4s; }
.launch-card.ok .lc-dot { background: var(--fc-lime); box-shadow: 0 0 10px var(--fc-lime); }
.launch-card ol { list-style: none; margin: 11px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--fc-text3); }
.launch-card li { display: flex; align-items: center; gap: 9px; transition: color .3s; }
.launch-card li::before { content: ""; width: 9px; height: 10px; flex: none; background: var(--fc-border2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .3s; }
.launch-card li.now { color: var(--fc-text2); }
.launch-card li.now::before { background: var(--fc-cyan); animation: lc-blink .7s ease-in-out infinite alternate; }
.launch-card li.done { color: var(--fc-text); }
.launch-card li.done::before { background: var(--fc-lime); }
.launch-card .bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.launch-card .bar i { display: block; height: 100%; width: 0; background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); }
.launch-card.ok .bar i { background: var(--fc-lime); }
@keyframes lc-blink { to { opacity: .35; } }
/* phones: little room above the headline — just the title, the location and the bar */
@media (max-width: 991px) { .launch-card { width: 214px; padding: 10px 12px 11px; } .launch-card ol { display: none; } .lc-head { margin-bottom: 9px; font-size: 12px; } }

/* cards: a little less room on phones */
@media (max-width: 575px) { .xcard { padding: 28px 24px; } }

/* feature carousels: no cards — big icons on hexagonal columns (a lit top face over a dark side) that rise on hover;
   arrows by the heading, hexagon dots under the strip; the strip runs to the right edge of the screen */
.fx-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.fx-top h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.fx-nav { display: flex; gap: 10px; flex: none; }
.fx-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.4); color: var(--fc-text); cursor: pointer; display: grid; place-items: center; transition: border-color .2s, color .2s, background .2s, opacity .2s, transform .25s; }
.fx-nav button svg { width: 18px; height: 18px; }
.fx-nav button:hover:not(:disabled) { border-color: var(--fc-cyan); color: var(--fc-cyan); background: rgba(32,181,235,.08); transform: translateY(-2px); }
.fx-nav button:disabled { opacity: .3; cursor: default; }
.fx-track { --pad: max(var(--gut-l), calc((100vw - 1260px) / 2 + var(--gut-l))); display: flex; gap: clamp(28px, 4vw, 56px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 18px var(--pad) 10px; scrollbar-width: none; cursor: grab; outline: none; }
.fx-track::-webkit-scrollbar { display: none; }
.fx-track.drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.fx-track:focus-visible { box-shadow: inset 0 0 0 2px var(--fc-cyan); border-radius: 12px; }
.fx-item { flex: none; width: clamp(250px, 24vw, 320px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.fx-ic { position: relative; width: 104px; height: 132px; margin-bottom: 8px; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
.fx-ic::before { content: ""; position: absolute; right: 0; left: 0; top: 12px; height: 120px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-180deg, #0f3043, #1a1439); }
.fx-ic .top { position: absolute; right: 0; left: 0; top: 0; height: 120px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, #11516c, #2f2561); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .35s; z-index: 1; }
.fx-ic .top .ic { width: 46px; height: 46px; }
.fx-item:hover .fx-ic { transform: translateY(-10px); }
.fx-item:hover .fx-ic .top { background: linear-gradient(-160deg, #187aa0, #44348c); }
.fx-n { font-family: var(--fc-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--fc-text3); }
.fx-n b { color: var(--fc-accent); font-weight: 600; }
.fx-item h3 { font-size: 21px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; transition: color .3s; }
.fx-item:hover h3 { color: #fff; }
.fx-item p { font-size: 15.5px; line-height: 1.65; color: var(--fc-text2); }
.fx.fx-static .fx-nav { display: none; }
.fx.fx-static .fx-track { cursor: default; }
@media (max-width: 640px) { .fx-item { width: 76vw; } .fx-nav button { width: 42px; height: 42px; } .fx-ic { width: 88px; height: 112px; } .fx-ic::before { top: 10px; height: 102px; } .fx-ic .top { height: 102px; } .fx-ic .top .ic { width: 40px; height: 40px; } }

/* country flags: round pictures, the same files as the location categories' Image on the site */
.flag { display: inline-block; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; background: center / contain no-repeat; vertical-align: -.2em; }

/* cart: a round button with the number of items; on the site it appears only when the cart is not empty */
.cart-btn { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.4); transition: border-color .2s, background .2s; }
.cart-btn:hover, .cart-btn.on { border-color: var(--fc-cyan); background: rgba(32,181,235,.07); }
.cart-btn .ic { width: 20px; height: 20px; }
.cart-btn b { position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--fc-lime); color: #070910; font-family: var(--fc-mono); font-size: 10.5px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--fc-bg); }
@media (max-width: 767px) { .nav-right { gap: 8px; } .nav-right > .avatar { display: none; } }

/* client area header: the account initials, a slim footer */
.avatar { width: 36px; height: 40px; flex: none; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); font-family: var(--fc-mono); font-size: 12px; font-weight: 700; color: #fff; transition: transform .25s; }
.avatar:hover { transform: translateY(-2px); }
footer.slim .copy { padding-block: 26px 30px; }
footer.slim .copy a:hover { color: var(--fc-cyan); }

/* inner pages: a compact header — the content starts right under it; the 3D accent shows on wide screens only */
.phead { padding-block: calc(98px + env(safe-area-inset-top, 0px)) 22px; }
.phead-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.phead h1 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin-top: 14px; }
.phead .hero-sub { font-size: 15.5px; max-width: 620px; margin-top: 12px; }
.phead .hero-sub .ulink { color: var(--fc-cyan); border-bottom: 1px solid rgba(32,181,235,.35); }
.phead .vis { width: clamp(240px, 26vw, 380px); height: clamp(150px, 14vw, 210px); }
@media (max-width: 991px) { .phead-inner { grid-template-columns: minmax(0, 1fr); } .phead .vis { display: none; } .phead { padding-block: calc(80px + env(safe-area-inset-top, 0px)) 16px; } .phead h1 { font-size: clamp(32px, 8.4vw, 44px); } }

/* stories */
.story { position: relative; padding-block: clamp(40px, 6vw, 80px); }
.story-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6%; align-items: center; }
.story.flip .story-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.story.flip .story-text { order: 2; }
.story-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.num { font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text3); letter-spacing: .15em; }
.num b { color: var(--fc-accent); font-weight: 700; }
.story h2 { font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; }
.story:hover h2 em { color: var(--fc-accent-h); }
.desc { font-size: 16px; color: var(--fc-text2); line-height: 1.6; max-width: 440px; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: var(--fc-surface); border: 1px solid var(--fc-border); font-family: var(--fc-mono); font-size: 12.5px; color: var(--fc-text); transition: border-color .25s, box-shadow .25s, transform .25s; }
.chip:hover { border-color: var(--fc-accent); box-shadow: 0 0 0 4px rgba(174,75,232,.12); transform: translateY(-2px); }
.chip .ic { width: 20px; height: 20px; }
.chip span { color: var(--fc-text3); }
.story .vis { height: clamp(320px, 38vw, 500px); cursor: grab; touch-action: pan-y; }
.story .vis:active { cursor: grabbing; }
@media (max-width: 991px) {
  .story-inner, .story.flip .story-inner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .story.flip .story-text { order: 0; }
  .story .vis { order: -1; height: 320px; }
}

/* plans */
.plans { padding-block: clamp(80px, 10vw, 130px); }
.plans-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.plans h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.plans-link { font-family: var(--fc-mono); font-size: 13px; color: var(--fc-text2); display: inline-flex; align-items: center; gap: 6px; transition: color .2s, gap .2s; }
.plans-link:hover { color: var(--fc-cyan); gap: 10px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.xcard { position: relative; background: var(--fc-surface); border-radius: var(--fc-r-lg); padding: 34px 32px; display: flex; flex-direction: column; gap: 18px; transform-style: preserve-3d; transform: perspective(1000px); transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s; will-change: transform; min-width: 0; }
.xcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--fc-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: background .35s; pointer-events: none; }
.xcard:hover::before, .xcard.hl::before { background: linear-gradient(-135deg, var(--fc-cyan), var(--fc-accent)); }
.xcard:hover { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 40px -10px rgba(32,181,235,.25); }
.xcard .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(720px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.13), rgba(255,255,255,.04) 30%, transparent 60%); opacity: 0; transition: opacity .3s; }
.xcard:hover .glare { opacity: 1; }
.xcard.featured { background: linear-gradient(-180deg, rgba(174,75,232,.08) 0%, var(--fc-surface) 60%); }
.xcard.featured::after { content: "popular"; position: absolute; top: 0; left: 20px; background: var(--fc-lime); color: #070910; font-family: var(--fc-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 0 0 6px 6px; }
.pname { font-family: var(--fc-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--fc-text3); transform: translateZ(20px); }
.xcard.featured .pname { color: var(--fc-accent); }
.price { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; transform: translateZ(40px); }
.price small { font-size: 13px; font-weight: 500; color: var(--fc-text3); letter-spacing: 0; margin-right: 4px; }
.vat { font-size: 11px; color: var(--fc-text3); margin-top: -8px; }
.cores { display: flex; align-items: center; gap: 4px; transform: translateZ(24px); }
.cores i { width: 15px; height: 17px; background: var(--fc-border2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform .3s, background .3s; }
.cores i.on { background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); }
.xcard:hover .cores i.on { transform: translateY(-3px); }
.xcard:hover .cores i.on:nth-child(2) { transition-delay: .03s; } .xcard:hover .cores i.on:nth-child(3) { transition-delay: .06s; } .xcard:hover .cores i.on:nth-child(4) { transition-delay: .09s; }
.cores span { margin-right: 8px; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text2); }
.spec { font-family: var(--fc-mono); font-size: 13px; color: var(--fc-text2); }
/* every card has its own perspective, centred on itself, so the side cards behave like the middle one.
   The buttons float a little above the card: they stand forward in 3D (scaled back to their size), so they shift slightly over the card
   when it tilts under the pointer, and they drift gently up and down (each card a little out of step) */
.xcard .btn { margin-top: auto; transform: translateZ(55px) scale(.945); animation: btn-float 4.2s ease-in-out infinite; }
.xcard .btn:hover { transform: translateZ(55px) scale(.945) translateY(-3px); }
.xcard:nth-child(2) .btn { animation-delay: -1.4s; } .xcard:nth-child(3) .btn { animation-delay: -2.8s; }
@keyframes btn-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (max-width: 991px) { .cards { grid-template-columns: minmax(0, 1fr); max-width: 460px; } }

/* cta */
.cta { position: relative; min-height: 620px; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding-block: 100px; }
.cta > .vis { position: absolute; inset: 0; z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(7,9,16,.92) 20%, rgba(7,9,16,.5) 60%, rgba(7,9,16,.1) 100%), linear-gradient(-180deg, var(--fc-bg) 0%, rgba(7,9,16,0) 25%, rgba(7,9,16,0) 75%, var(--fc-bg) 100%); }
.cta h2 { font-size: clamp(38px, 5.5vw, 80px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cta p { font-size: 17px; color: var(--fc-text2); margin: 24px auto 0; max-width: 520px; }
.cta .ctas { justify-content: center; }

/* footer (the site's, without its top rule) */
footer.axf { background: transparent; }
.foot { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 48px; padding-block: 64px 44px; max-width: none; }
.foot-desc { font-size: 13px; color: rgba(244,245,249,.55); line-height: 1.75; max-width: 260px; margin-top: 14px; }
.foot h4 { margin: 0 0 6px; font-family: var(--fc-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: rgba(244,245,249,.45); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
.foot ul a { font-size: 13px; color: rgba(244,245,249,.6); display: inline-block; transition: color .2s, transform .2s; }
.foot ul a:hover { color: var(--fc-cyan); transform: translateX(-4px); }
.copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 22px 28px; font-size: 11.5px; color: rgba(244,245,249,.45); max-width: none; }
@media (max-width: 991px) { .foot { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 575px) { .foot { grid-template-columns: 1fr; gap: 24px; } }


/* hero background: a faint honeycomb so the whole block is filled, brighter around the sphere */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72'%3E%3Cg fill='none' stroke='rgba(120,150,200,.1)' stroke-width='1'%3E%3Cpath d='M20.78 0L41.57 12v24L20.78 48 0 36V12z'/%3E%3Cpath d='M0 36v24l20.78 12M41.57 36v24L20.78 72'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(60% 70% at 70% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 70% at 70% 50%, #000 0%, transparent 75%); }
/* city list (written from the location list; the globe beside it has no marks, so it never needs editing) */
.locs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.loc-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: var(--fc-r); background: transparent; border: 1px solid transparent; color: var(--fc-text2); transition: background .25s, border-color .25s, color .25s, transform .25s; }
.loc-row b { font-size: 17px; font-weight: 650; color: var(--fc-text); }
.loc-row span { font-size: 13px; color: var(--fc-text3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-row span i { font-style: normal; color: var(--fc-text2); }
.loc-row span .flag { width: 15px; height: 15px; vertical-align: -3px; margin: 0 12px 0 6px; }
.loc-row span .flag:first-child { margin-right: 0; }
.loc-row em { font-family: var(--fc-mono); font-style: normal; font-size: 13px; color: var(--fc-text2); min-width: 22px; text-align: left; transition: color .25s; }
.loc-row:hover em { color: var(--fc-lime); }
.loc-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-family: var(--fc-mono); font-size: 13px; color: var(--fc-text2); transition: color .2s, gap .2s; }
.loc-all:hover { color: var(--fc-cyan); gap: 10px; }
.loc-row:hover { background: var(--fc-surface); transform: translateX(-4px); }
/* many languages: long words wrap, buttons may wrap on very narrow screens */
:where(.ax-main) h1, :where(.ax-main) h2 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; } }
/* CTA: text on top, the honeycomb runs to the horizon below it */
.cta { min-height: 720px; place-items: start center; padding-block: 110px 0; }
.cta::after { content: none; }
.cta > .vis { -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.7) 44%, #000 52%, #000 84%, rgba(0,0,0,.5) 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.7) 44%, #000 52%, #000 84%, rgba(0,0,0,.5) 93%, transparent 100%); }
@media (max-width: 991px) { .cta { min-height: 640px; padding-block: 80px 0; } }
/* phones: a shorter strip of honeycomb under the text */
@media (max-width: 767px) { .cta { min-height: 490px; padding-block: 64px 0; } .cta > .vis { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.12) 210px, rgba(0,0,0,.65) 290px, #000 330px, #000 420px, rgba(0,0,0,.5) 455px, transparent 490px); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.12) 210px, rgba(0,0,0,.65) 290px, #000 330px, #000 420px, rgba(0,0,0,.5) 455px, transparent 490px); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── page: pricing ── */
/* pricing: the period and location pickers, the plan grid, what every plan has */

/* pickers */
.pbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-top: 6px; margin-bottom: 24px; }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid var(--fc-border2); max-width: 100%; }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--fc-cyan), var(--fc-accent)); transition: left .35s cubic-bezier(.2,.8,.3,1), width .35s cubic-bezier(.2,.8,.3,1); }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border: 0; border-radius: 999px; background: none; color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: color .25s; }
.seg button:hover { color: var(--fc-text); }
.seg button[aria-pressed="true"] { color: #fff; }
.seg button small { font-size: 10.5px; color: var(--fc-lime); }
.seg button[aria-pressed="true"] small { color: #e9ffc4; }
@media (max-width: 640px) {
  .pbar > * { width: 100%; }
  .seg { display: flex; }
  .seg button { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 1px; padding: 7px 2px; line-height: 1.2; font-size: 12px; }
  .seg button small { font-size: 9.5px; }
  .pick-btn { width: 100%; }
  .pick-btn .chev { margin-right: auto; }
}
.pick { position: relative; }
.pick-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 16px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(255,255,255,.03); color: var(--fc-text); font-family: var(--fc-font); font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.pick-btn:hover, .pick-btn[aria-expanded="true"] { border-color: var(--fc-cyan); background: rgba(32,181,235,.06); }
.pick-btn .ic { width: 20px; height: 20px; }
.pick-btn small { font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); }
.pick-btn .chev { width: 10px; height: 10px; color: var(--fc-text3); transition: transform .2s; }
.pick-btn[aria-expanded="true"] .chev { transform: rotate(-180deg); }
.pick-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 15; width: 300px; max-width: calc(100vw - 32px); max-height: min(60vh, 460px); overflow: auto; padding: 6px; border-radius: 14px; background: rgba(15,18,27,.97); border: 1px solid var(--fc-border2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pick-menu[hidden] { display: none; }
.pick-menu h5 { margin: 8px 12px 4px; font-family: var(--fc-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); }
.pick-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; color: var(--fc-text2); font-size: 14px; transition: background .15s, color .15s; }
.pick-menu a:hover, .pick-menu a:focus-visible { background: var(--fc-surface); color: var(--fc-text); outline: none; }
.pick-btn .flag { width: 20px; height: 20px; }
.pick-menu a span .flag { width: 18px; height: 18px; margin-left: 10px; vertical-align: -4px; }
.pick-menu a code { font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); }
.pick-menu a[aria-checked="true"] { color: var(--fc-text); }
.pick-menu a[aria-checked="true"] code { color: var(--fc-lime); }

/* plan grid: five plans and the custom order, the same cards as on the home page */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 991px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pgrid .price { display: flex; align-items: baseline; gap: 2px; }
.pgrid .price .amt { display: inline-block; transition: opacity .18s, transform .18s; }
.pgrid.swap .price .amt { opacity: 0; transform: translateY(6px); }
.bill { font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); margin-top: -6px; min-height: 1.5em; }
.bill b { color: var(--fc-lime); font-weight: 500; }
.incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--fc-text2); }
.incl li { display: flex; align-items: center; gap: 9px; }
.incl li::before { content: ""; width: 9px; height: 10px; flex: none; background: var(--fc-lime); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.xcard.custom { background: linear-gradient(-160deg, rgba(32,181,235,.06), transparent 55%), var(--fc-surface); }
.xcard.custom .big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; transform: translateZ(40px); }
.xcard.custom p { font-size: 14px; color: var(--fc-text2); line-height: 1.6; }
.xcard.custom .hexrow { display: flex; gap: 5px; transform: translateZ(24px); }
.xcard.custom .hexrow i { width: 22px; height: 25px; background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: .35; transition: opacity .3s, transform .3s; }
.xcard.custom:hover .hexrow i { opacity: 1; transform: translateY(-3px); }
.xcard.custom:hover .hexrow i:nth-child(2) { transition-delay: .04s; } .xcard.custom:hover .hexrow i:nth-child(3) { transition-delay: .08s; }
.ptax { margin-top: 18px; font-size: 12.5px; color: var(--fc-text3); }

/* in every plan */
.feats { padding-block: clamp(70px, 9vw, 120px) clamp(40px, 6vw, 80px); }

/* ── page: locations ── */
/* locations: a region filter and one card per location (written from the location list; the grid grows with it); a small globe in the header */
.status { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 7px 11px 7px 14px; border-radius: 999px; background: rgba(181,245,58,.07); border: 1px solid rgba(181,245,58,.28); font-family: var(--fc-mono); font-size: 12px; color: var(--fc-lime); }
.status i, .lstate i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc-lime); box-shadow: 0 0 0 0 rgba(181,245,58,.6); animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(181,245,58,.55); } 70% { box-shadow: 0 0 0 9px rgba(181,245,58,0); } 100% { box-shadow: 0 0 0 0 rgba(181,245,58,0); } }
.phead .vis[data-scene="globe"] { width: clamp(200px, 19vw, 260px); height: clamp(200px, 19vw, 260px); margin-block: -30px -40px; }

.lgrid-wrap { padding-block: 6px clamp(40px, 6vw, 80px); }
.lhead { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.lhead h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.lhead p { font-size: 14.5px; color: var(--fc-text2); max-width: 460px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(255,255,255,.02); color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12.5px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.chips button:hover { color: var(--fc-text); border-color: var(--fc-cyan); }
.chips button[aria-pressed="true"] { color: #070910; background: var(--fc-lime); border-color: var(--fc-lime); }
.chips button span { opacity: .6; margin-right: 4px; }
.lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 991px) { .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lgrid { grid-template-columns: minmax(0, 1fr); } }
.lcard[hidden] { display: none; }
.lcard .lreg { font-family: var(--fc-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); transform: translateZ(20px); }
.lcard .lname { display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateZ(40px); }
.lcard .lname b { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.lcard .lname .flag { width: 30px; height: 30px; }
.lcard .lcity { font-size: 14px; color: var(--fc-text2); margin-top: -10px; }
.lcard .lcity code { font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text3); margin-right: 6px; }
.lstate { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-lime); white-space: nowrap; }
.lspecs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; transform: translateZ(20px); }
.lspecs li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lspecs small { font-family: var(--fc-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fc-text3); }
.lspecs span { font-size: 14px; color: var(--fc-text); }
.lspecs .muted { color: var(--fc-text3); }
.lnote { margin-top: 18px; font-size: 13.5px; color: var(--fc-text3); }

.lfeats { padding-block: clamp(30px, 5vw, 60px) clamp(50px, 7vw, 100px); }

/* ── page: contacts ── */
/* contacts: questions and answers first, then support, sales and the company's details */

.ccards-wrap { padding-block: 6px clamp(40px, 6vw, 80px); }
.tofaq { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 18px; padding: 26px 32px; border-radius: var(--fc-r-lg); background: rgba(20,23,31,.55); border: 1px solid var(--fc-border); transition: border-color .3s, background .3s; }
.tofaq:hover { border-color: rgba(32,181,235,.35); background: var(--fc-surface); }
.tofaq b { font-size: 17px; font-weight: 650; }
.tofaq b { display: block; }
.tofaq .d { display: block; font-size: 14px; color: var(--fc-text2); margin-top: 4px; }
.tofaq .arr2 { font-family: var(--fc-mono); font-size: 13px; color: var(--fc-cyan); white-space: nowrap; transition: transform .25s; }
.tofaq:hover .arr2 { transform: translateX(-4px); }
.ccards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 991px) { .ccards { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
.ccard .ctop { display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateZ(24px); }
.ccard .ctag { font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); letter-spacing: .06em; }
.ccard .hx { width: 44px; height: 50px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, rgba(32,181,235,.25), rgba(174,75,232,.25)); }
.ccard .hx .ic { width: 22px; height: 22px; }
.ccard h3 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; transform: translateZ(40px); }
.ccard p { font-size: 14.5px; color: var(--fc-text2); line-height: 1.6; }
.ccard .mail { font-family: var(--fc-mono); font-size: 13.5px; color: var(--fc-text); word-break: break-all; transform: translateZ(20px); }
.ccard .mail a:hover { color: var(--fc-cyan); }
.ccard .sub { font-size: 13px; color: var(--fc-text3); }
.ccard address { font-style: normal; font-size: 14px; color: var(--fc-text2); line-height: 1.7; }
.ccard address b { color: var(--fc-text); font-weight: 600; }
.ccard .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; transform-style: preserve-3d; }   /* keeps the buttons floating in 3D like in the other cards */
.ccard .row .btn { margin-top: 0; }

/* ── page: faq ── */
/* FAQ: a search and the topics; on wide screens the topics stay on the side, on phones they are chips */
.faq-wrap { padding-block: 6px clamp(60px, 8vw, 100px); }
.faq-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.faq-side { position: sticky; top: calc(92px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 14px; }
.fsearch { position: relative; }
.fsearch input { width: 100%; height: 46px; padding: 0 42px 0 14px; border-radius: 12px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); color: var(--fc-text); font: inherit; font-size: 14.5px; transition: border-color .2s, box-shadow .2s; }
.fsearch input::placeholder { color: #4b5068; }
.fsearch input:focus { outline: none; border-color: var(--fc-cyan); box-shadow: 0 0 0 4px rgba(32,181,235,.14); }
.fsearch svg { position: absolute; right: 14px; top: 14px; width: 18px; height: 18px; color: var(--fc-text3); pointer-events: none; }
.ftopics { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--fc-border); }
.ftopics button { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px 8px 0; border: 0; background: none; text-align: right; font: inherit; font-size: 14px; color: var(--fc-text3); cursor: pointer; transition: color .2s; }
.ftopics button::before { content: ""; position: absolute; right: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--fc-lime); transform: scaleY(0); transition: transform .25s; }
.ftopics button:hover { color: var(--fc-text); }
.ftopics button[aria-pressed="true"] { color: var(--fc-text); }
.ftopics button[aria-pressed="true"]::before { transform: scaleY(1); }
.ftopics button span { font-family: var(--fc-mono); font-size: 11.5px; opacity: .7; }
.fgroup { scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); }
.fgroup + .fgroup { margin-top: 34px; }
.fgroup[hidden], .qa[hidden] { display: none; }
.fgroup h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 2vw, 24px); font-weight: 650; letter-spacing: -.015em; margin-bottom: 12px; }
.fgroup h2 i { width: 10px; height: 11px; flex: none; background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.fgroup .list { display: flex; flex-direction: column; gap: 10px; }
.qa { border-radius: var(--fc-r-lg); background: rgba(20,23,31,.55); border: 1px solid var(--fc-border); transition: border-color .3s, background .3s; }
.qa:hover { border-color: var(--fc-border2); }
.qa[open] { background: var(--fc-surface); border-color: rgba(32,181,235,.3); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 22px; cursor: pointer; font-size: 16.5px; font-weight: 600; color: var(--fc-text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 26px; height: 30px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(255,255,255,.06); transition: background .3s, transform .35s cubic-bezier(.2,.8,.3,1); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; right: 8px; left: 8px; top: 14px; height: 2px; border-radius: 2px; background: var(--fc-text2); transition: transform .3s; }
.qa summary i::after { transform: rotate(-90deg); }
.qa[open] summary i { background: var(--fc-lime); transform: rotate(-90deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #070910; }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa .ans { padding: 0 22px 20px; font-size: 15px; color: var(--fc-text2); line-height: 1.7; max-width: 760px; }
.qa .ans a { color: var(--fc-cyan); border-bottom: 1px solid rgba(32,181,235,.35); }
.qa .ans ol { margin: 0; padding-right: 20px; display: flex; flex-direction: column; gap: 6px; }
.qa .ans code { font-family: var(--fc-mono); font-size: 13px; padding: 2px 6px; border-radius: 6px; background: rgba(7,9,16,.6); color: var(--fc-text); }
.qa mark { background: rgba(181,245,58,.22); color: var(--fc-text); border-radius: 3px; padding: 0 1px; }
.fempty { display: none; padding: 26px; border-radius: var(--fc-r-lg); border: 1px dashed var(--fc-border2); color: var(--fc-text2); font-size: 15px; }
.fempty.on { display: block; }
.fempty a { color: var(--fc-cyan); }
@media (max-width: 991px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .ftopics { flex-direction: row; gap: 8px; border-right: 0; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); padding-inline: var(--gut-l) var(--gut-r); }
  .ftopics::-webkit-scrollbar { display: none; }
  .ftopics button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--fc-border2); font-family: var(--fc-mono); font-size: 12px; }
  .ftopics button::before { display: none; }
  .ftopics button[aria-pressed="true"] { color: #070910; background: var(--fc-lime); border-color: var(--fc-lime); }
  .qa summary { padding: 15px 18px; font-size: 15.5px; }
  .qa .ans { padding: 0 18px 18px; }
}

/* ── page: terms ── */
/* legal documents: one template for all five */
.dhero { padding-block: calc(98px + env(safe-area-inset-top, 0px)) 26px; }
.doctabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.doctabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--fc-border2); font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text2); transition: color .2s, border-color .2s, background .2s; }
.doctabs a:hover { color: var(--fc-text); border-color: var(--fc-cyan); }
.doctabs a[aria-current="page"] { color: #070910; background: var(--fc-lime); border-color: var(--fc-lime); }
.dhero h1 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin-top: 14px; max-width: 16em; }
.dhero .hero-sub { font-size: 15.5px; max-width: 620px; margin-top: 12px; }
.doc { padding-block: 10px clamp(60px, 8vw, 110px); }
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: calc(92px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 120px); overflow: auto; }
.toc summary { list-style: none; cursor: pointer; font-family: var(--fc-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); padding: 4px 0 10px; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--fc-border); }
.toc a { position: relative; display: block; padding: 7px 16px 7px 0; font-size: 13.5px; line-height: 1.4; color: var(--fc-text3); transition: color .2s; }
.toc a::before { content: ""; position: absolute; right: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--fc-lime); transform: scaleY(0); transition: transform .25s; }
.toc a:hover { color: var(--fc-text); }
.toc a.on { color: var(--fc-text); }
.toc a.on::before { transform: scaleY(1); }
.doc-prose { max-width: 74ch; min-width: 0; }
.dsec { scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; }
.dsec + .dsec { margin-top: 30px; }
.dsec h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 16px; }
.dsec h2 .n { flex: none; width: 38px; height: 43px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, rgba(32,181,235,.25), rgba(174,75,232,.25)); font-family: var(--fc-mono); font-size: 14px; font-weight: 600; color: var(--fc-text); }
.doc-prose p { font-size: 15.5px; line-height: 1.75; color: var(--fc-text2); margin: 0 0 14px; }
.doc-prose p .cl { font-family: var(--fc-mono); font-size: 13px; color: var(--fc-accent-h, #c27bf0); margin-left: 6px; }
.doc-prose strong { color: var(--fc-text); font-weight: 600; }
.doc-prose a { color: var(--fc-cyan); border-bottom: 1px solid rgba(32,181,235,.35); transition: border-color .2s; }
.doc-prose a:hover { border-color: var(--fc-cyan); }
.doc-prose code { font-family: var(--fc-mono); font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--fc-surface); color: var(--fc-text); }
.doc-prose .formbox { margin: 16px 0 6px; padding: 20px 24px; border: 1px dashed var(--fc-border2); border-radius: var(--fc-r-lg); background: rgba(20,23,31,.5); }
.doc-prose .formbox p:last-child { margin-bottom: 0; }
.dtbl { overflow-x: auto; margin: 6px 0 18px; border-radius: var(--fc-r-lg); border: 1px solid var(--fc-border); }
.doc-prose table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.doc-prose th, .doc-prose td { text-align: right; padding: 12px 16px; vertical-align: top; color: var(--fc-text2); }
.doc-prose th { font-family: var(--fc-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-text3); background: rgba(255,255,255,.02); }
.doc-prose tbody tr:nth-child(odd) td { background: rgba(255,255,255,.015); }
.doc-prose td:first-child { color: var(--fc-text); }
@media (max-width: 991px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; padding: 14px 16px; border-radius: var(--fc-r-lg); border: 1px solid var(--fc-border); background: rgba(20,23,31,.55); }
  .toc summary { padding: 0; display: flex; justify-content: space-between; align-items: center; }
  .toc summary::after { content: "+"; font-size: 16px; color: var(--fc-text2); }
  .toc[open] summary::after { content: "\2212"; }
  .toc[open] summary { padding-bottom: 10px; }
  .dhero { padding-block: calc(80px + env(safe-area-inset-top, 0px)) 18px; }
  .dhero h1 { font-size: clamp(32px, 8.4vw, 44px); }
}

/* ── page: login ── */

.auth { min-height: 100svh; }
.auth-sec { padding-block: calc(96px + env(safe-area-inset-top, 0px)) 60px; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(30px, 6vw, 90px); align-items: center; }
.auth-side { position: relative; min-height: 560px; display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.auth-side .eyebrow { align-self: flex-start; }

.auth-grid.tall { align-items: start; }
.auth-grid.tall .auth-side { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); min-height: calc(100svh - 150px); }
.auth-side h1 { font-size: clamp(48px, 6.6vw, 96px); font-weight: 700; line-height: .93; letter-spacing: -.04em; margin-top: 24px; max-width: 8em; }
.auth-side .hero-sub { max-width: 440px; margin-top: 22px; }
.auth-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--fc-text2); }
.auth-facts li { display: flex; align-items: center; gap: 10px; }
.auth-facts li::before { content: ""; width: 9px; height: 10px; flex: none; background: var(--fc-lime); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.auth-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 34px; font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text3); }
.auth-links a:hover { color: var(--fc-cyan); }
.auth-card { position: relative; padding: clamp(28px, 3.4vw, 42px); border-radius: 22px; background: rgba(15,18,27,.82); border: 1px solid var(--fc-border2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.auth-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(-160deg, rgba(32,181,235,.5), transparent 35%, transparent 65%, rgba(174,75,232,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.auth-card h2 { font-size: 24px; font-weight: 650; letter-spacing: -.015em; }
.auth-card .lead { font-size: 14px; color: var(--fc-text2); margin-top: 6px; }
.auth .form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.auth .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth .form h3 { font-family: var(--fc-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); margin-top: 8px; }
.auth .fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.auth .fld > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--fc-text2); }
.auth .fld > span a { font-size: 12.5px; color: var(--fc-cyan); }
.auth .fld i.req { font-style: normal; color: var(--fc-accent-h, #c27bf0); }
.auth .inp { position: relative; }
.auth .inp input, .auth .inp select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); color: var(--fc-text); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.auth .inp select { padding-left: 38px; cursor: pointer; background-image: linear-gradient(-45deg, transparent 50%, #868ba3 50%), linear-gradient(-135deg, #868ba3 50%, transparent 50%); background-position: calc(100% - (100% - 20px)) 20px, calc(100% - (100% - 15px)) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.auth .inp input::placeholder { color: #4b5068; }
.auth .inp input:hover, .auth .inp select:hover { border-color: #3a4160; }
.auth .inp input:focus, .auth .inp select:focus { outline: none; border-color: var(--fc-cyan); box-shadow: 0 0 0 4px rgba(32,181,235,.14); background: rgba(7,9,16,.85); }
.auth .inp .eye { position: absolute; left: 6px; top: 6px; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--fc-text3); cursor: pointer; display: grid; place-items: center; }
.auth .inp .eye:hover { color: var(--fc-text); background: rgba(255,255,255,.04); }
.auth .inp .eye svg { width: 18px; height: 18px; }
.auth .inp:has(.eye) input { padding-left: 46px; }
.auth .hint { font-size: 12px; line-height: 1.55; color: var(--fc-text3); }
.auth .chk { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--fc-text2); cursor: pointer; }
.auth .chk input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 5px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.auth .chk input:checked { background: var(--fc-lime); border-color: var(--fc-lime); }
.auth .chk input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #070910; border-bottom: 2px solid #070910; transform: translateY(-1px) rotate(-45deg); }
.auth .chk input:focus-visible { outline: 2px solid var(--fc-cyan); outline-offset: 2px; }
.auth .chk a { color: var(--fc-cyan); }
.auth .form .btn { width: 100%; padding-block: 15px; margin-top: 4px; }
.auth .alt { margin-top: 18px; font-size: 14px; color: var(--fc-text2); text-align: center; }
.auth .alt a { color: var(--fc-text); font-weight: 600; border-bottom: 1px solid var(--fc-border2); transition: border-color .2s, color .2s; }
.auth .alt a:hover { color: var(--fc-cyan); border-color: var(--fc-cyan); }
.auth .proto-note { display: none; margin-top: 4px; padding: 10px 14px; border-radius: 10px; background: rgba(181,245,58,.08); border: 1px solid rgba(181,245,58,.3); font-size: 13px; color: var(--fc-lime); }
.auth .form.sent .proto-note { display: block; }

.auth-card > .form:first-child, .auth-card > .lead:first-child { margin-top: 0; }

.auth .more > summary { display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; font-size: 12.5px; color: var(--fc-text2); }
.auth .more > summary::-webkit-details-marker { display: none; }
.auth .more > summary::after { content: "?"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--fc-border2); font-family: var(--fc-mono); font-size: 10px; line-height: 1; color: var(--fc-text2); transition: border-color .2s, color .2s; }
.auth .more > summary:hover::after { border-color: var(--fc-cyan); color: var(--fc-cyan); }
.auth .more[open] > summary::after { content: "\00d7"; }
.auth .more .hint { display: block; margin-top: 6px; }
@media (max-width: 991px) {
  .auth-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .auth-side, .auth-grid.tall .auth-side { min-height: 0; position: relative; top: auto; }
  
  .auth-side .hero-sub, .auth-facts, .auth-side h1 .dbr { display: none; }
  .auth-side h1 { font-size: clamp(32px, 8.4vw, 44px); margin-top: 14px; }
  .auth-links { display: none; }
  .auth-sec { padding-block: calc(80px + env(safe-area-inset-top, 0px)) 40px; }
  .auth-grid { gap: 20px; }
}
@media (max-width: 420px) { .auth .form .two { grid-template-columns: minmax(0, 1fr); } }

/* ── page: configure ── */

.app { padding-block: calc(96px + env(safe-area-inset-top, 0px)) clamp(50px, 7vw, 90px); min-height: 70vh; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.app-head h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; margin-top: 12px; }
.app-head h1:first-child { margin-top: 0; }
.app-head .sub { font-size: 15px; color: var(--fc-text2); margin-top: 10px; max-width: 620px; }
.app-head .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.app .crumb { font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text3); }
.app .crumb a:hover { color: var(--fc-cyan); }
.app .crumb b { color: var(--fc-text2); font-weight: 500; }
.app .panel { position: relative; padding: 26px 28px; border-radius: var(--fc-r-lg); background: rgba(20,23,31,.6); border: 1px solid var(--fc-border); min-width: 0; }
.app .panel + .panel { margin-top: 18px; }
.app .panel h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.app .panel h2 small { font-size: 13px; font-weight: 400; color: var(--fc-text3); margin-right: 8px; }
.app .panel .ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.app .panel .ph a.more { font-family: var(--fc-mono); font-size: 12.5px; color: var(--fc-text2); }
.app .panel .ph a.more:hover { color: var(--fc-cyan); }
.app .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.app .grid-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.app .grid-side .side { position: sticky; top: calc(92px + env(safe-area-inset-top, 0px)); }
.app .grid2 > .panel + .panel, .app .grid-side .panel + .panel { margin-top: 0; }
.app .stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 991px) { .app .grid2, .app .grid-side { grid-template-columns: minmax(0, 1fr); } .app .grid-side .side { position: static; } }
@media (max-width: 575px) { .app .panel { padding: 22px 20px; } }


.app .steps { display: flex; align-items: center; gap: 0; margin: 4px 0 30px; list-style: none; padding: 0; }
.app .steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fc-text3); white-space: nowrap; }
.app .steps li + li::before { content: ""; width: clamp(18px, 5vw, 60px); height: 1px; background: var(--fc-border2); margin: 0 14px; }
.app .steps li i { width: 26px; height: 30px; flex: none; display: grid; place-items: center; font-style: normal; font-family: var(--fc-mono); font-size: 11.5px; font-weight: 600; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-border2); color: var(--fc-text2); }
.app .steps li.done { color: var(--fc-text2); } .app .steps li.done i { background: var(--fc-lime); color: #070910; }
.app .steps li.now { color: var(--fc-text); font-weight: 600; } .app .steps li.now i { background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); color: #fff; }
@media (max-width: 640px) { .app .steps li span { display: none; } .app .steps li.now span { display: inline; } .app .steps li + li::before { width: 16px; margin: 0 8px; } }


.app .form { display: flex; flex-direction: column; gap: 16px; }
.app .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .app .form .two { grid-template-columns: minmax(0, 1fr); } }
.app .fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.app .fld > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--fc-text2); }
.app .fld > span em { font-family: var(--fc-font); font-style: normal; font-size: 12.5px; color: var(--fc-text3); }
.app .inp { position: relative; }
.app .inp input, .app .inp select, .app .inp textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); color: var(--fc-text); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.app .inp textarea { height: auto; min-height: 130px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.app .inp select { padding-left: 38px; cursor: pointer; background-image: linear-gradient(-45deg, transparent 50%, #868ba3 50%), linear-gradient(-135deg, #868ba3 50%, transparent 50%); background-position: calc(100% - (100% - 20px)) 20px, calc(100% - (100% - 15px)) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.app .inp input::placeholder, .app .inp textarea::placeholder { color: #4b5068; }
.app .inp input:focus, .app .inp select:focus, .app .inp textarea:focus { outline: none; border-color: var(--fc-cyan); box-shadow: 0 0 0 4px rgba(32,181,235,.14); }
.app .inp input[readonly] { color: var(--fc-text2); }
.app .hint { font-size: 12.5px; line-height: 1.55; color: var(--fc-text3); }
.app .chk { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--fc-text2); cursor: pointer; }
.app .chk input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 5px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.app .chk input:checked { background: var(--fc-lime); border-color: var(--fc-lime); }
.app .chk input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #070910; border-bottom: 2px solid #070910; transform: translateY(-1px) rotate(-45deg); }
.app .chk a { color: var(--fc-cyan); }
.app .btn[disabled] { opacity: .4; pointer-events: none; }
.app .btn.wide { width: 100%; }
.app .btn-danger { background: transparent; border-color: rgba(255,84,112,.45); color: #ff8aa0; }
.app .btn-danger:hover { background: rgba(255,84,112,.1); border-color: #ff5470; transform: translateY(-2px); }


.app .tiles, .ax-modal .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.app .tile, .ax-modal .tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.45); cursor: pointer; transition: border-color .2s, background .2s, transform .25s; }
.app .tile:hover, .ax-modal .tile:hover { border-color: #3a4160; transform: translateY(-2px); }
.app .tile input, .ax-modal .tile input { position: absolute; opacity: 0; pointer-events: none; }
.app .tile b, .ax-modal .tile b { font-size: 15px; font-weight: 600; color: var(--fc-text); }
.app .tile small, .ax-modal .tile small { font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); }
.app .tile .off, .ax-modal .tile .off { color: var(--fc-lime); }
.app .tile:has(input:checked), .ax-modal .tile:has(input:checked) { border-color: var(--fc-cyan); background: rgba(32,181,235,.08); box-shadow: 0 0 0 3px rgba(32,181,235,.12); }
.app .tile:has(input:focus-visible), .ax-modal .tile:has(input:focus-visible) { outline: 2px solid var(--fc-cyan); outline-offset: 2px; }
.app .tile .hx, .ax-modal .tile .hx { width: 30px; height: 34px; margin-bottom: 6px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, rgba(32,181,235,.3), rgba(124,92,255,.3)); font-family: var(--fc-mono); font-size: 11px; font-weight: 700; color: #fff; }


.app .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px 18px; font-size: 14.5px; margin: 0; }
.app .kv dt { color: var(--fc-text3); }
.app .kv dd { margin: 0; color: var(--fc-text); text-align: left; min-width: 0; overflow-wrap: anywhere; }
.app .kv.lst { grid-template-columns: minmax(0, 1fr) auto; } .app .kv.lst dt { color: var(--fc-text2); }
.app .kv .flag, .app .srv .meta .flag { width: 15px; height: 15px; margin-left: 7px; vertical-align: -3px; }
.app .kv dd code, .app .mono { font-family: var(--fc-mono); font-size: 13.5px; }
.app .sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--fc-text2); padding: 7px 0; }
.app .sum-line.total { border-top: 1px solid var(--fc-border); margin-top: 8px; padding-top: 16px; font-size: 16px; color: var(--fc-text); font-weight: 600; }
.app .sum-line.total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.app .note { font-size: 12.5px; line-height: 1.55; color: var(--fc-text3); }
.app .note.ok { display: flex; align-items: center; gap: 8px; color: var(--fc-text2); }
.app .note.ok::before { content: ""; width: 9px; height: 10px; flex: none; background: var(--fc-lime); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }


.app .badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 11px; border-radius: 999px; font-family: var(--fc-mono); font-size: 11.5px; font-weight: 500; border: 1px solid var(--fc-border2); color: var(--fc-text2); white-space: nowrap; }
.app .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.app .badge.ok { color: var(--fc-lime); border-color: rgba(181,245,58,.35); background: rgba(181,245,58,.06); }
.app .badge.run { color: var(--fc-cyan); border-color: rgba(32,181,235,.35); background: rgba(32,181,235,.06); }
.app .badge.due { color: #c27bf0; border-color: rgba(174,75,232,.4); background: rgba(174,75,232,.08); }
.app .badge.off { color: var(--fc-text3); }


.app .tbl-wrap { overflow-x: auto; margin-inline: -4px; }
.app .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.app .tbl th { text-align: right; padding: 10px 14px; font-family: var(--fc-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-text3); border-bottom: 1px solid var(--fc-border); }
.app .tbl td { padding: 15px 14px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--fc-text2); vertical-align: middle; }
.app .tbl tr:last-child td { border-bottom: 0; }
.app .tbl td.r, .app .tbl th.r { text-align: left; }
.app .tbl td b { color: var(--fc-text); font-weight: 600; }
.app .tbl tbody tr { transition: background .2s; }
.app .tbl tbody tr:hover { background: rgba(255,255,255,.025); }
.app .tbl a.row-link { color: var(--fc-text); font-weight: 600; }
.app .tbl a.row-link:hover { color: var(--fc-cyan); }


.app .srv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: center; padding: 20px 22px; border-radius: var(--fc-r-lg); background: rgba(20,23,31,.6); border: 1px solid var(--fc-border); transition: border-color .3s, transform .3s; }
.app .srv + .srv { margin-top: 12px; }
.app .srv:hover { border-color: rgba(32,181,235,.35); transform: translateY(-2px); }
.app .srv .col, .app .lv .col { position: relative; width: 44px; height: 56px; flex: none; }
.app .srv .col::before, .app .lv .col::before { content: ""; position: absolute; right: 0; left: 0; top: 6px; height: 50px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-180deg, #0f3043, #1a1439); }
.app .srv .col::after, .app .lv .col::after { content: ""; position: absolute; right: 0; left: 0; top: 0; height: 50px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, #11516c, #2f2561); }
.app .srv .col.lit::before, .app .lv .col.lit::before { background: linear-gradient(-180deg, #46651c, #0c3446); }
.app .srv .col.lit::after, .app .lv .col.lit::after { background: linear-gradient(-160deg, #9bd234, #15688a); }
.app .srv .nm { font-size: 17px; font-weight: 650; color: var(--fc-text); }
.app .srv .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 5px; font-family: var(--fc-mono); font-size: 12.5px; color: var(--fc-text3); }
.app .srv .meta b { color: var(--fc-text2); font-weight: 500; }
.app .srv .end { display: flex; align-items: center; gap: 12px; }
.app .srv .end > b:first-child { margin-left: auto; }   
@media (max-width: 640px) { .app .srv { grid-template-columns: auto minmax(0, 1fr); } .app .srv .end { grid-column: 1 / -1; justify-content: space-between; } }


.app .meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .app .meters { grid-template-columns: minmax(0, 1fr); } }
.app .meter small { display: flex; justify-content: space-between; font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); letter-spacing: .04em; }
.app .meter small b { color: var(--fc-text); font-weight: 500; }
.app .meter .bar { height: 6px; margin-top: 9px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.app .meter .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); }


.app .cred { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.app .cred:last-child { border-bottom: 0; }
.app .cred small { font-size: 12.5px; color: var(--fc-text3); }
.app .cred .v { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app .cred .v code { flex: 1; min-width: 0; font-family: var(--fc-mono); font-size: 14.5px; color: var(--fc-text); overflow-wrap: anywhere; }
.app .ib { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; line-height: 1; padding: 0 12px; border-radius: 9px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.5); color: var(--fc-text2); font-family: var(--fc-mono); font-size: 11.5px; cursor: pointer; transition: color .2s, border-color .2s; }
.app .ib:hover { color: var(--fc-cyan); border-color: var(--fc-cyan); }
.app .ib.done { color: var(--fc-lime); border-color: rgba(181,245,58,.45); }


.app .tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--fc-border); overflow-x: auto; scrollbar-width: none; }
.app .tabs::-webkit-scrollbar { display: none; }
.app .tabs button { position: relative; padding: 12px 16px; border: 0; background: none; color: var(--fc-text3); font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: color .2s; }
.app .tabs button::after { content: ""; position: absolute; right: 12px; left: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fc-lime); transform: scaleX(0); transition: transform .25s; }
.app .tabs button:hover { color: var(--fc-text); }
.app .tabs button[aria-selected="true"] { color: var(--fc-text); }
.app .tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.app [data-panel][hidden] { display: none; }


.app .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
@media (max-width: 640px) { .app .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .app .stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .app .stat .hx { width: 32px; height: 36px; } .app .stat .hx .ic { width: 17px; height: 17px; } .app .stat b { font-size: 24px; } .app .stat b + span { font-size: 12.5px; margin-top: 5px; } }
.app .stat { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--fc-r-lg); background: rgba(20,23,31,.6); border: 1px solid var(--fc-border); transition: border-color .3s, transform .3s; }
.app .stat:hover { border-color: rgba(32,181,235,.35); transform: translateY(-2px); }
.app .stat .hx { width: 46px; height: 52px; flex: none; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, rgba(32,181,235,.3), rgba(124,92,255,.3)); }
.app .stat .hx .ic { width: 22px; height: 22px; }

.app .stat b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fc-text); }
.app .stat b + span { display: block; margin-top: 7px; font-size: 14px; color: var(--fc-text2); }


.app .alert, .ax-modal .alert { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--fc-r-lg); border: 1px solid rgba(174,75,232,.4); background: linear-gradient(-90deg, rgba(174,75,232,.1), rgba(32,181,235,.05)); margin-bottom: 18px; }
.app .alert p, .ax-modal .alert p { font-size: 14.5px; color: var(--fc-text2); }
.app .alert p b, .ax-modal .alert p b { color: var(--fc-text); }
.app .alert.warn, .ax-modal .alert.warn { border-color: rgba(255,84,112,.4); background: rgba(255,84,112,.06); }


.app .msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.app .msg + .msg { margin-top: 18px; }
.app .msg .av { width: 40px; height: 46px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-border2); font-family: var(--fc-mono); font-size: 12px; font-weight: 700; color: var(--fc-text); }
.app .msg.staff .av { background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); color: #fff; }
.app .msg .bubble { padding: 16px 20px; border-radius: 16px 4px 16px 16px; background: rgba(20,23,31,.7); border: 1px solid var(--fc-border); }
.app .msg.staff .bubble { border-color: rgba(32,181,235,.3); }
.app .msg .who { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--fc-text3); margin-bottom: 8px; }
.app .msg .who b { color: var(--fc-text); font-weight: 600; }
.app .msg .bubble p { font-size: 15px; line-height: 1.65; color: var(--fc-text2); }
.app .msg .bubble p + p { margin-top: 10px; }


.app .launch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; }
.app .launch .vis { height: clamp(260px, 30vw, 380px); }
@media (max-width: 991px) { .app .launch { grid-template-columns: minmax(0, 1fr); } .app .launch .vis { height: 240px; order: -1; } }
.app .lsteps { list-style: none; margin: 20px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.app .lsteps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fc-text3); transition: color .3s; }
.app .lsteps li::before { content: ""; width: 14px; height: 16px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-border2); transition: background .3s; }
.app .lsteps li.now { color: var(--fc-text2); } .app .lsteps li.now::before { background: var(--fc-cyan); animation: lc-blink .7s ease-in-out infinite alternate; }
.app .lsteps li.done { color: var(--fc-text); } .app .lsteps li.done::before { background: var(--fc-lime); }
.app .lbar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.app .lbar i { display: block; height: 100%; width: 0; background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); transition: width .4s; }
.app .launch.ok .lbar i { background: var(--fc-lime); }
.app .launch .ready { display: none; margin-top: 22px; }
.app .launch.ok .ready { display: flex; gap: 10px; flex-wrap: wrap; }
.app .launch.ok .wait { display: none; }


.app .mbar { display: none; }
@media (max-width: 991px) {
  .app .mbar { position: fixed; z-index: 15; right: 0; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(9,11,18,.94); border-top: 1px solid var(--fc-border2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .app .mbar span { font-size: 12px; color: var(--fc-text3); } .app .mbar b { display: block; font-size: 20px; font-weight: 700; color: var(--fc-text); }
  body:has(.mbar) .lp-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } body:has(.mbar) footer { padding-bottom: 80px; }
}
.app .empty { padding: 26px; text-align: center; color: var(--fc-text3); font-size: 14.5px; }
.app .toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.app .toggle-row:last-child { border-bottom: 0; }
.app .toggle-row b { display: block; font-size: 15px; font-weight: 600; color: var(--fc-text); }
.app .toggle-row span { font-size: 13.5px; color: var(--fc-text3); }
.app .sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--fc-border2); border: 0; cursor: pointer; transition: background .25s; }
.app .sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s; }
.app .sw[aria-checked="true"] { background: var(--fc-lime); }
.app .sw[aria-checked="true"]::after { transform: translateX(-18px); background: #070910; }

/* ── client area: dashboard, servers, server, invoices, invoice, paid, tickets, ticket-new, account ── */

.app .onb { padding: 30px 32px; }
.app .onb-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.app .onb-h h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.app .onb-h span { font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text2); }
.app .onb-s { list-style: none; margin: 0; padding: 0; }
.app .onb-s li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 0; }
.app .onb-s li:not(:last-child)::after { content: ""; position: absolute; right: 14.5px; top: calc(50% + 22px); height: calc(100% - 44px); width: 1px; background: var(--fc-border2); }
.app .onb-s .mk { width: 30px; height: 34px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-border2); color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12px; font-weight: 600; }
.app .onb-s .done .mk { background: var(--fc-lime); color: #070910; }
.app .onb-s .now .mk { background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); color: #fff; }
.app .onb-s b { display: block; font-size: 16px; font-weight: 600; color: var(--fc-text); }
.app .onb-s .done b { color: var(--fc-text2); }
.app .onb-s .tx span { display: block; margin-top: 3px; font-size: 14px; color: var(--fc-text2); }
.app .onb-s li > .btn { justify-self: end; }
.app .onb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.app .op { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--fc-r-lg); background: rgba(20,23,31,.6); border: 1px solid var(--fc-border); transition: border-color .3s, transform .3s; }
.app .op:hover { border-color: rgba(32,181,235,.4); transform: translateY(-2px); }
.app .op small { font-family: var(--fc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); }
.app .op small i { font-style: normal; color: var(--fc-lime); margin-right: 8px; }
.app .op b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--fc-text); }
.app .op b span { font-size: 13px; font-weight: 400; color: var(--fc-text2); margin-right: 4px; }
.app .op .op-sp { font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text2); }
.app .op .op-go { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--fc-text); }
.app .op:hover .op-go { color: var(--fc-cyan); }
.app .onb-help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 20px; font-size: 14px; color: var(--fc-text2); }
.app .onb-help a { color: var(--fc-text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.app .onb-help a:hover { color: var(--fc-cyan); }
@media (max-width: 767px) { .app .onb-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; } .app .op { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 18px; } .app .op b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; } .app .op .op-go { display: none; } }
@media (max-width: 640px) { .app .onb { padding: 24px 20px; } .app .onb-s li { grid-template-columns: 30px minmax(0, 1fr); } .app .onb-s li > .btn { grid-column: 2; justify-self: start; } .app .onb-s li:not(:last-child)::after { top: 52px; height: calc(100% - 44px); } }

.app .void { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 24px; text-align: center; }
.app .void .hx { width: 64px; height: 72px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, #11516c, #2f2561); }
.app .void .hx .ic { width: 28px; height: 28px; }
.app .void h2 { font-size: 20px; font-weight: 650; }

body:has(.cab) .nav { background: rgba(7,9,16,.78); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.app .cab { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(28px, 3.2vw, 52px); align-items: start; padding-right: var(--gut-l); padding-left: var(--gut-r); }
.app .cab-main { min-width: 0; max-width: 1280px; }
.app .cab-nav { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 4px; }
.app .cab-nav nav { display: flex; flex-direction: column; gap: 2px; }
.app .cab-nav nav a { position: relative; display: flex; align-items: center; gap: 13px; height: 46px; padding: 0 14px; border-radius: 12px; color: var(--fc-text2); font-size: 15px; font-weight: 500; transition: color .2s, background .2s; }
.app .cab-nav nav a:hover { color: var(--fc-text); background: rgba(255,255,255,.035); }
.app .cab-nav nav a.on { color: var(--fc-text); background: linear-gradient(-90deg, rgba(174,75,232,.17), rgba(32,181,235,.03)); }
.app .cab-nav nav a.on::before { content: ""; position: absolute; right: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: linear-gradient(-180deg, var(--fc-cyan), var(--fc-accent)); }
.app .cab-nav nav .ic { width: 20px; height: 20px; filter: grayscale(1) brightness(1.25); opacity: .6; transition: filter .2s, opacity .2s; }
.app .cab-nav nav a:hover .ic, .app .cab-nav nav a.on .ic { filter: none; opacity: 1; }
.app .cab-grp { margin: 18px 0 6px; padding: 0 14px; font-family: var(--fc-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-text3); }
.app .cab-nav .n { margin-right: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; text-align: center; font-family: var(--fc-mono); font-size: 11px; font-style: normal; color: var(--fc-text2); background: rgba(255,255,255,.06); }
.app .cab-nav .n.due { color: #fff; background: var(--fc-accent); }
.app .cab-nav > .btn { margin-top: 18px; justify-content: center; }
.app .cab-out { margin-top: 6px; padding: 10px 14px; font-size: 14px; color: var(--fc-text2); transition: color .2s; }
.app .cab-out:hover { color: var(--fc-text); }
@media (min-width: 992px) { .app .cab .m-only { display: none; } }
@media (max-width: 1239px) { .app .cab .grid-side { grid-template-columns: minmax(0, 1fr); } .app .cab .grid-side .side { position: static; } }
@media (max-width: 1099px) { .app .cab .grid2 { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 991px) {
  .app.cab-page { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
  .app .cab { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .app .cab-nav { top: calc(68px + env(safe-area-inset-top, 0px)); z-index: 12; margin: 0 calc(-1 * var(--gut-l)) 26px calc(-1 * var(--gut-r)); padding: 8px 0 12px; background: rgba(7,9,16,.78); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--fc-border); }
  .app .cab-nav > .btn, .app .cab-out { display: none; }
  .app .cab-nav nav { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gut-l) 0 var(--gut-r); scroll-padding-inline: var(--gut-l); }
  .app .cab-nav nav::-webkit-scrollbar { display: none; }
  .app .cab-nav nav a { flex: none; height: 40px; gap: 9px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--fc-border); font-size: 14px; }
  .app .cab-nav nav a.on { border-color: rgba(174,75,232,.55); background: rgba(174,75,232,.13); }
  .app .cab-nav nav a.on::before { display: none; }
  .app .cab-grp { flex: none; align-self: center; width: 1px; height: 24px; margin: 0 4px; padding: 0; font-size: 0; background: var(--fc-border2); }
  .app .cab-nav nav .ic { width: 18px; height: 18px; }
  .app .cab-nav .n { margin-right: 2px; }
}

.app .feed { list-style: none; margin: 0; padding: 0; }
.app .fd-day { margin: 16px 0 2px; font-family: var(--fc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); }
.app .fd-day:first-child { margin-top: 0; }
.app .feed a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; }
.app .feed .hx { width: 34px; height: 38px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #151a29; }
.app .feed .new .hx { background: linear-gradient(-160deg, #11516c, #2f2561); }
.app .feed .hx .ic { width: 17px; height: 17px; }
.app .feed li:not(.new) .hx .ic { filter: grayscale(1) brightness(1.3); opacity: .6; }
.app .feed .t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.app .feed .t b { font-size: 14.5px; font-weight: 600; color: var(--fc-text); transition: color .2s; }
.app .feed a:hover .t b { color: var(--fc-cyan); }
.app .feed time { flex: none; font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); }
.app .feed .d { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--fc-text2); overflow-wrap: anywhere; }

.app .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app .tg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.5); }
.app .tg button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12px; cursor: pointer; transition: background .2s, color .2s; }
.app .tg button:hover { color: var(--fc-text); }
.app .tg button[aria-pressed="true"] { background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); color: #fff; }
.app .ld { margin-bottom: 18px; }
.app .ld-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.app .ld-leg { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -2px 0 12px; font-size: 13.5px; color: var(--fc-text2); }
.app .ld-leg span { display: inline-flex; align-items: center; gap: 8px; }
.app .ld-leg i { width: 14px; height: 2px; border-radius: 2px; }
.app .ld-leg .off { color: var(--fc-text3); }
.app .ld-plot { position: relative; outline: none; border-radius: 8px; touch-action: pan-y; }
.app .ld-plot:focus-visible { box-shadow: 0 0 0 2px rgba(32,181,235,.45); }
.app .ld-plot svg { display: block; overflow: visible; }
.app .ld-plot .g { stroke: #1f2433; stroke-width: 1; shape-rendering: crispEdges; }
.app .ld-plot .yt, .app .ld-plot .xt { font-family: var(--fc-mono); font-size: 11px; fill: var(--fc-text3); font-variant-numeric: tabular-nums; }
.app .ld-plot .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.app .ld-plot .dot { stroke: #10131b; stroke-width: 2; }
.app .ld-plot .el { font-size: 12.5px; fill: var(--fc-text2); }
.app .ld-plot .cl { stroke: rgba(255,255,255,.3); stroke-width: 1; shape-rendering: crispEdges; }
.app .ld { position: relative; }
.app .ld-tip { position: absolute; z-index: 3; min-width: 160px; padding: 10px 12px; border-radius: 10px; background: rgba(12,15,23,.97); border: 1px solid var(--fc-border2); box-shadow: 0 14px 40px -12px rgba(0,0,0,.8); pointer-events: none; font-size: 13px; }
.app .ld-tip[hidden] { display: none; }
.app .ld-tip .h { margin-bottom: 6px; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); }
.app .ld-tip .r { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.app .ld-tip .r b { min-width: 70px; font-weight: 600; color: var(--fc-text); font-variant-numeric: tabular-nums; }
.app .ld-tip .r i { width: 12px; height: 2px; flex: none; border-radius: 2px; }
.app .ld-tip .r span { color: var(--fc-text2); }

.app .tb { display: flex; flex-direction: column; gap: 16px; }
.app .tb-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.app .tb-t { grid-column: 1 / -1; grid-row: 2; }
.app .tb-n { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--fc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .tb-n i { width: 8px; height: 8px; flex: none; border-radius: 2px; }
.app .tb-t { height: 12px; }
.app .tb-b { display: block; height: 12px; min-width: 2px; border-radius: 4px 0 0 4px; transition: filter .2s; }
.app .tb-r:hover .tb-b { filter: brightness(1.25); }
.app .tb-r b { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--fc-text); font-variant-numeric: tabular-nums; }
.app .tb-r.off .tb-n, .app .tb-r.off b { color: var(--fc-text3); }

.app .sp-sum { display: flex; align-items: baseline; gap: 10px; margin: -4px 0 14px; }
.app .sp-sum b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.app .sp-sum span { font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text2); }
.app .sp { position: relative; height: 170px; padding-right: 26px; }
.app .sp-grid { position: absolute; right: 26px; left: 0; top: 0; bottom: 24px; }
.app .sp-grid span { position: absolute; right: 0; left: 0; height: 1px; background: #1f2433; }
.app .sp-grid em { position: absolute; left: 100%; top: -7px; padding-left: 8px; font-style: normal; font-family: var(--fc-mono); font-size: 10.5px; color: var(--fc-text3); font-variant-numeric: tabular-nums; }
.app .sp-cols { position: absolute; right: 26px; left: 0; top: 0; bottom: 0; display: flex; }
.app .sp-c { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 24px; outline: none; cursor: default; }
.app .sp-b { position: relative; width: 20px; max-width: 70%; border-radius: 4px 4px 0 0; background: #3a4258; transition: background .2s; }
.app .sp-c.now .sp-b { background: #c9cede; }
.app .sp-c:hover .sp-b, .app .sp-c:focus-visible .sp-b { background: #5b6683; }
.app .sp-c.now:hover .sp-b, .app .sp-c.now:focus-visible .sp-b { background: #e4e7f0; }
.app .sp-c em { position: absolute; bottom: 0; font-style: normal; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); }
.app .sp-c.now em { color: var(--fc-text); }
.app .sp-v { position: absolute; bottom: calc(100% + 6px); right: 50%; transform: translateX(50%); font-size: 12px; font-weight: 600; color: var(--fc-text); white-space: nowrap; }
.app .sp-c::after { content: attr(aria-label); position: absolute; bottom: calc(var(--h) + 34px); right: 50%; transform: translateX(50%); z-index: 3; padding: 7px 10px; border-radius: 8px; background: rgba(12,15,23,.97); border: 1px solid var(--fc-border2); font-size: 12px; color: var(--fc-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.app .sp-c:hover::after, .app .sp-c:focus-visible::after { opacity: 1; }
.app .sp-c:first-child::after { right: 0; transform: none; }
.app .sp-c:last-child::after { right: auto; left: 0; transform: none; }

.app .vw { display: inline-flex; align-self: center; padding: 3px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.5); }
.app .vw button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12px; cursor: pointer; transition: background .2s, color .2s; }
.app .vw button:hover { color: var(--fc-text); }
.app .vw button[aria-pressed="true"] { background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); color: #fff; }
.app .lv-grid[hidden], .app .sv-list[hidden] { display: none !important; }
.app .lv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1239px) { .app .lv-grid { grid-template-columns: minmax(0, 1fr); } }
.app .lv { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 24px 20px; border-radius: var(--fc-r-lg); background: rgba(20,23,31,.6); border: 1px solid var(--fc-border); transition: border-color .3s; }
.app .lv:hover { border-color: rgba(32,181,235,.35); }
.app .lv-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.app .lv-h .nm { font-size: 19px; font-weight: 650; letter-spacing: -.01em; color: var(--fc-text); transition: color .2s; }
.app .lv-h .nm:hover { color: var(--fc-cyan); }
.app .lv-h .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font-family: var(--fc-mono); font-size: 12.5px; color: var(--fc-text2); }
.app .lv-h .meta b { font-weight: 500; color: var(--fc-text); }
.app .lv-h .meta .flag { width: 15px; height: 15px; margin-left: 7px; vertical-align: -3px; }
.app .lv-ip { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 7px; border-radius: 12px; background: rgba(7,9,16,.5); border: 1px solid var(--fc-border); }
.app .lv-ip code { font-family: var(--fc-mono); font-size: 14px; color: var(--fc-text); }
.app .lv-ip .up { margin-right: auto; padding-left: 6px; font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text2); white-space: nowrap; }
.app .lv-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.app .spark { min-width: 0; padding: 12px 14px 8px; border-radius: 12px; background: rgba(7,9,16,.45); border: 1px solid var(--fc-border); }
.app .spark small { display: flex; justify-content: space-between; gap: 8px; font-family: var(--fc-mono); font-size: 11px; letter-spacing: .04em; color: var(--fc-text3); }
.app .spark small b { font-weight: 500; color: var(--fc-text); white-space: nowrap; }
.app .spark svg { display: block; width: 100%; height: 44px; margin-top: 8px; overflow: visible; }
.app .spark .l { fill: none; stroke: url(#spk-l); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app .spark .a { fill: url(#spk-a); }
.app .spark .ax { display: flex; justify-content: space-between; margin-top: 5px; font-family: var(--fc-mono); font-size: 10px; color: var(--fc-text3); }
.app .spark .ax i { font-style: normal; }
.app .spark .z { fill: none; stroke: var(--fc-border2); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.app .lv-facts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; align-items: end; }
.app .lv-facts > div > small { display: block; font-family: var(--fc-mono); font-size: 11px; letter-spacing: .04em; color: var(--fc-text3); }
.app .lv-facts > div > b { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--fc-text); }
.app .lv-f { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05); }
.app .lv.off .lv-h .nm, .app .lv.off .lv-ip code { color: var(--fc-text2); }
@media (max-width: 575px) {
  .app .lv { padding: 20px 18px 18px; }
  .app .lv-h { grid-template-columns: auto minmax(0, 1fr); } .app .lv-h .badge { grid-column: 2; justify-self: start; }
  .app .lv-charts { grid-template-columns: minmax(0, 1fr); }
  .app .lv-facts { grid-template-columns: 1fr 1fr; } .app .lv-facts .meter { grid-column: 1 / -1; }
}

@media (max-width: 640px) { .app .tbl.inv { min-width: 0; } .app .tbl.inv th:nth-child(2), .app .tbl.inv td:nth-child(2), .app .tbl.inv th:nth-child(3), .app .tbl.inv td:nth-child(3) { display: none; } }
.app .pa [hidden] { display: none !important; }
.app .pa .ph { margin-bottom: 8px; }
.app .pa-rng { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.5); }
.app .pa-rng button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fc-text2); font-family: var(--fc-mono); font-size: 12px; cursor: pointer; transition: background .2s, color .2s; }
.app .pa-rng button:hover { color: var(--fc-text); }
.app .pa-rng button[aria-pressed="true"] { background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); color: #fff; }
.app .pa-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 20px; }
.app .pa-sum b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.app .pa-sum span { font-family: var(--fc-mono); font-size: 12.5px; color: var(--fc-text2); }
.app .pa-lane, .app .pa-axis { display: grid; grid-template-columns: 180px minmax(0, 1fr) 92px; gap: 22px; align-items: center; }
.app .pa-lane { padding: 14px 0 10px; border-top: 1px solid rgba(255,255,255,.05); }
.app .pa-name b { display: block; font-size: 15px; font-weight: 600; color: var(--fc-text); }
.app .pa-name small { font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); }
.app .pa-lsum { text-align: left; font-size: 15px; font-weight: 600; color: var(--fc-text); }
.app .pa-ticks { position: relative; height: 24px; }
.app .pa-ticks span { position: absolute; top: 0; transform: translateX(50%); font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); white-space: nowrap; }
.app .pa-ticks span:first-child { transform: none; color: var(--fc-text2); }
.app .pa-track { position: relative; height: 46px; }
.app .pa-track::before { content: ""; position: absolute; right: 0; left: 0; top: 11px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.07); }
.app .pa-m { position: absolute; top: 0; transform: translateX(50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.app .pa-m i { width: 20px; height: 23px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, #187aa0, #44348c); transition: transform .25s; }
.app .pa-m:hover i { transform: translateY(-3px); }
.app .pa-m.due i { background: var(--fc-accent); box-shadow: 0 0 0 0 transparent; }
.app .pa-m em { font-style: normal; font-family: var(--fc-mono); font-size: 10.5px; color: var(--fc-text2); white-space: nowrap; }
.app .pa-m.due em { color: #c27bf0; }
.app .pa-next { position: absolute; left: 0; top: 20px; font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text2); white-space: nowrap; }
.app .pa-list { display: none; }
@media (max-width: 767px) {
  .app .pa-next { top: 16px; }
  .app .pa-axis { grid-template-columns: minmax(0, 1fr); } .app .pa-axis > span { display: none; }
  .app .pa-lane { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .app .pa-track { grid-column: 1 / -1; grid-row: 2; height: 28px; }
  .app .pa-m em { display: none; }
  .app .pa-list { display: block; list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--fc-border); }
  .app .pa-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14.5px; color: var(--fc-text); }
  .app .pa-list time { width: 46px; flex: none; font-family: var(--fc-mono); font-size: 12.5px; color: var(--fc-text2); }
  .app .pa-list b { margin-right: auto; font-weight: 600; }
}

@media (max-width: 640px) { .app .tbl.req { min-width: 0; } .app .tbl.req th:nth-child(2), .app .tbl.req td:nth-child(2), .app .tbl.req th:nth-child(4), .app .tbl.req td:nth-child(4) { display: none; } }

.app .drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 18px; border-radius: 14px; border: 1px dashed var(--fc-border2); background: rgba(7,9,16,.35); color: var(--fc-text2); font-size: 14px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.app .drop:hover { border-color: var(--fc-cyan); background: rgba(32,181,235,.05); }
.app .drop b { color: var(--fc-text); font-weight: 600; }
.app .drop small { font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); }

.app .sess { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.app .sess:last-child { border-bottom: 0; padding-bottom: 0; }
.app .ph + .sess { padding-top: 0; }
.app .sess b { display: block; font-size: 15px; font-weight: 600; color: var(--fc-text); }
.app .sess .mono { font-size: 12.5px; color: var(--fc-text2); }
.app .sess > div { flex: 1 1 200px; min-width: 0; }
.app .sess .btn, .app .sess .badge { white-space: nowrap; }
.app .nil { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--fc-r); border: 1px dashed var(--fc-border2); color: var(--fc-text2); font-size: 15px; }
.app .nil .ic { width: 28px; height: 28px; filter: grayscale(1) brightness(1.3); opacity: .55; }
.app .tbl.ntf { min-width: 0; }
.app .tbl.trx { min-width: 0; }
@media (max-width: 640px) { .app .tbl.trx th:nth-child(3), .app .tbl.trx td:nth-child(3), .app .tbl.trx th:nth-child(4), .app .tbl.trx td:nth-child(4), .app .tbl.trx .tm { display: none; } }
.app .tbl.ntf th.c, .app .tbl.ntf td.c { width: 92px; text-align: center; }
.app .tbl.ntf td { color: var(--fc-text); }
.app .tbl.ntf .sw { vertical-align: middle; }
.app .tbl.ntf .sw:disabled { opacity: .45; cursor: not-allowed; }
.app .fold { border-top: 1px solid var(--fc-border); border-bottom: 1px solid var(--fc-border); }
.app .fold > summary { display: flex; align-items: center; gap: 14px; padding: 16px 2px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--fc-text); }
.app .fold > summary::-webkit-details-marker { display: none; }
.app .fold > summary > span:first-child { white-space: nowrap; }
.app .fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-left: 1.6px solid var(--fc-text2); border-bottom: 1.6px solid var(--fc-text2); transform: translateY(-2px) rotate(-45deg); transition: transform .25s; }
.app .fold[open] > summary::after { transform: translateY(2px) rotate(135deg); }
.app .fold-pv { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fc-mono); font-size: 12.5px; font-weight: 400; color: var(--fc-text2); }
.app .fold[open] .fold-pv { visibility: hidden; }
.app .fold > .form { padding: 2px 0 20px; }
@media (max-width: 575px) { .app .tbl.ntf th.c, .app .tbl.ntf td.c { width: 62px; padding-inline: 6px; } .app .tbl.ntf td { padding-block: 13px; font-size: 14px; } }

/* icon shapes */
.ic-bolt .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.6%202.6L5.8%2013.4h5.9l-1.1%208%207.6-10.8h-5.8z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-bolt .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%2015.6l1.6.9v1.8l-1.6.9-1.6-.9v-1.8z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-shield .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.8l7.6%204v6.4L12%2021.2l-7.6-8V6.8z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-shield .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.6%2011.8l2.4%202.4%204.6-4.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E); }
.ic-pin .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.8l5.4%203.1v6.2L12%2015.2l-5.4-3.1V5.9zM12%2015.2v6M8.4%2021.2h7.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-pin .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%206.9l1.9%201.1v2.1L12%2011.2l-1.9-1.1V8z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-server .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203.8h14l1.6%201.6v3.6L19%2010.6H5L3.4%209V5.4zM5%2013.4h14l1.6%201.6v3.6L19%2020.2H5l-1.6-1.6V15zM10.6%207.2h6.4M10.6%2016.8h6.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-server .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.4%206.2h2v2h-2zM6.4%2015.8h2v2h-2z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-cpu .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.6%205h8.8L19%207.6v8.8L16.4%2019H7.6L5%2016.4V7.6zM9%202.4V5M12%202.4V5M15%202.4V5M9%2019v2.6M12%2019v2.6M15%2019v2.6M2.4%209H5M2.4%2012H5M2.4%2015H5M19%209h2.6M19%2012h2.6M19%2015h2.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-cpu .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%208.6l2.9%201.7v3.4L12%2015.4l-2.9-1.7v-3.4z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-ram .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.6%207.2h18.8v7.6h-7.8l-1.6%201.8-1.6-1.8H2.6zM5.2%2014.8v2.8M8.2%2014.8v2.8M15.8%2014.8v2.8M18.8%2014.8v2.8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-ram .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.4%209.6h3v2.8h-3zM10.5%209.6h3v2.8h-3zM15.6%209.6h3v2.8h-3z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-disk .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.6%208.4h16.6l2.2%202.2v2.8l-2.2%202.2H2.6zM5.6%208.4v7.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M14.8%2010.6h2.6v2.8h-2.6z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E); }
.ic-disk .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.6%2010.6h4.2v2.8H8.6z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-infinity .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012l-2.4%204.1H4.9L2.5%2012l2.4-4.1h4.7zM12%2012l2.4-4.1h4.7l2.4%204.1-2.4%204.1h-4.7z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-infinity .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2010.4l1.4.8v1.6l-1.4.8-1.4-.8v-1.6z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-card .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.2%205.6h15.6l1.6%201.6v9.6l-1.6%201.6H4.2l-1.6-1.6V7.2zM2.6%2010h18.8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-card .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.4%2013.6h4.4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-lock .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%2010.4V7.2l2-2.4h4l2%202.4v3.2M5.4%2010.4h13.2v8.4L17%2020.4H7l-1.6-1.6z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-lock .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2013.2l1.7%201v2l-1.7%201-1.7-1v-2z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-chat .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203.8h14l1.8%201.8v8.2L19%2015.6h-7.8l-4.6%204v-4H5l-1.8-1.8V5.6z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-chat .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.2%208.8h1.8v1.8H7.2zM11.1%208.8h1.8v1.8h-1.8zM15%208.8h1.8v1.8H15z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-spark .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%203.4l1.8%207%207%201.8-7%201.8-1.8%207-1.8-7-7-1.8%207-1.8z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-spark .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%202.4l.8%202%202%20.8-2%20.8-.8%202-.8-2-2-.8%202-.8z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-clock .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.6l8.1%204.7v9.4L12%2021.4l-8.1-4.7V7.3zM12%207.2V12l3.6%202.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-clock .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2010.6l1.2.7v1.4l-1.2.7-1.2-.7v-1.4z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }
.ic-return .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.9%208v8L12%2020l-6.9-4V8L12%204h2.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M9.4%2012.2l1.8%201.8%203.4-3.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-return .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.6%201.6L15%204l-2.4%202.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-terminal .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%204.6h18v11.8l-2.2%202.2H3zM6.6%208.8L9.4%2011l-2.8%202.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-terminal .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.4%2013.4h5%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-pulse .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.6l8.1%204.7v9.4L12%2021.4l-8.1-4.7V7.3z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-pulse .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%2012.4h2.6l1.4-3%202.6%206%201.4-3h2.8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-ticket .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3.4%206.2h17.2v3.6a2.2%202.2%200%200%200%200%204.4v3.6H3.4v-3.6a2.2%202.2%200%200%200%200-4.4z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-ticket .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14.2%206.2v2M14.2%2011v2M14.2%2015.8v2%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-send .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%203.4L2.8%2010.6l6.6%202.6L12%2020l9-16.6z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-send .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.4%2013.2L21%203.4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-receipt .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.4%202.8h11.2l1.6%201.6v16.8l-2.4-1.4-2.4%201.4-2.4-1.4-2.4%201.4-2.4-1.4-2.4%201.4V4.4z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M8.4%207.6h7.2M8.4%2011h7.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-receipt .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.4%2014.6h4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-user .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.8l3.6%202.1v4.2L12%2011.2l-3.6-2.1V4.9zM4.4%2020.8v-2.6l3-3.2h9.2l3%203.2v2.6z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-user .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.4%2018.3h3.2%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-bell .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.4%2016.2v-5.6l1.4-3.8%202.6-2h3.2l2.6%202%201.4%203.8v5.6l1.8%201.8H4.6zM12%202.2v2.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-bell .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%2020.8h4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E); }
.ic-cart .g { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.4%204.2h3l2.4%2011.2h10.6l2.4-8.2H6.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E); }
.ic-cart .a { --m: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%2017.4l1.5.9v1.8l-1.5.9-1.5-.9v-1.8zM17.2%2017.4l1.5.9v1.8l-1.5.9-1.5-.9v-1.8z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E); }

/* ── site-only additions (not in the prototype) ── */

/* marketing.css sets its own --fc-bg (#0a0c13) on body.fc-marketing and paints <main>; the redesign has the deeper background
   and every page lets the live background (.sky: glows and hexagons) show through */
body, body.fc-marketing { --fc-bg: #070910; --fc-bg-elev: #0b0e15; }
body.bg-background { background-color: var(--fc-bg); }
body.fc-marketing main { background: transparent; }

/* the header is 64px tall on the site: Paymenter's pages start 64px down (main.mt-16), and it sits above their sidebar */
.nav { z-index: 40; }
.nav .wrap { min-height: 64px; }
.nav .logo { display: flex; align-items: center; }
.nav .logo img { height: 22px; width: auto; vertical-align: middle; }   /* no display here: Tailwind dark:hidden picks the logo variant */
@media (max-width: 767px) { .nav .logo img { height: 18px; } }
.lang-menu a { text-decoration: none; }
.lang-menu a code { white-space: nowrap; }   /* PT-BR */
/* many languages on a narrow screen: the two-column list opens under the header across the screen — anchored to the
   button, it ran off the screen (32 languages since 27.10.2026) */
@media (max-width: 760px) {
  .lang-menu.many { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); right: 16px; left: 16px; width: auto; max-width: none; max-height: calc(100vh - 96px); }
}

/* account (signed in): the initials on a hexagon open a short list — name, the client area, the account, log out */
.umenu { position: relative; display: flex; }
.umenu > .avatar { border: 0; padding: 0; cursor: pointer; }
.umenu-list { position: absolute; top: calc(100% + 12px); left: 0; z-index: 45; min-width: 230px; padding: 6px; border-radius: 14px; background: rgba(15,18,27,.97); border: 1px solid var(--fc-border2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.85); display: flex; flex-direction: column; }
.umenu-who { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fc-border); }
.umenu-who b { display: block; font-size: 14px; font-weight: 600; color: var(--fc-text); }
.umenu-who span { font-size: 12.5px; color: var(--fc-text3); overflow-wrap: anywhere; }
.umenu-list a, .umenu-list button { display: flex; align-items: center; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--fc-text2); font-family: inherit; font-size: 14px; text-align: right; cursor: pointer; transition: background .15s, color .15s; }
.umenu-list a:hover, .umenu-list button:hover, .umenu-list a:focus-visible, .umenu-list button:focus-visible { background: var(--fc-surface); color: var(--fc-text); outline: none; }
.nav-right .ax-bell { display: flex; align-items: center; }
@media (max-width: 767px) { .nav-right > .umenu { display: none; } }

/* phone menu: a signed-in customer also gets the client area's sections and Log out */
.mmenu .mm-client { margin-top: 10px; }
.mmenu .mm-client a { padding: 11px 4px; font-size: 16px; font-weight: 500; color: var(--fc-text2); border-bottom: 1px solid var(--fc-border); }
.mmenu .mm-client a.on { color: var(--fc-lime); }
.mmenu-acts.mm-one { grid-template-columns: minmax(0, 1fr); }

/* Log out (Livewire auth.logout): a line in the account menu, a ghost button in the phone menu */
.ax-logout-wrap { display: contents; }
.umenu-list .ax-logout { margin-top: 4px; border-top: 1px solid var(--fc-border); border-radius: 0 0 9px 9px; padding-top: 11px; color: var(--fc-text3); }
.mmenu-acts .ax-logout { width: 100%; padding: 14px 28px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.35); color: var(--fc-text); font-family: var(--fc-font); font-weight: 600; font-size: 14px; cursor: pointer; }

/* footer: Paymenter's layout puts it in a flex row; the logo is the site's picture */
footer.axf { flex: 1 1 100%; width: 100%; }
.axf .logo { display: inline-flex; }
.axf .logo img { height: 22px; width: auto; vertical-align: middle; }
.axf .copy a:hover { color: var(--fc-cyan); }

/* flags on the site are the location categories' pictures */
img.flag { object-fit: cover; background: none; }
/* home, regions: each city (its flag, if the category has a picture, and the name) keeps its own room */
.loc-row span .c { font-style: normal; color: var(--fc-text3); }
.loc-row span .c + .c { margin-right: 12px; }
.loc-row span .c .flag { margin: 0 0 0 6px; }

/* the "popular" badge comes from the translation (data-badge), not from CSS text */
.xcard.featured::after { content: attr(data-badge); }

/* plan cards: the button keeps its place at the bottom when a card is taller */
.xcard .btn { margin-top: auto; }

/* 3D cards (.xcard: plans, locations, images, contacts) stand flat, so their lines start at one edge: the layers come
   forward (translateZ) only while the pointer is on the card and it tilts. Without a mouse or with reduced motion they stay flat */
.xcard .pname, .xcard .price, .xcard .cores, .xcard.custom .big, .xcard.custom .hexrow, .lcard .lreg, .lcard .lname, .lcard .lspecs,
.ccard .ctop, .ccard h3, .ccard .mail { transform: none; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.xcard .btn { transform: none; }
.xcard .btn:hover { transform: translateY(-3px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .xcard:hover .pname, .lcard:hover .lreg, .lcard:hover .lspecs, .ccard:hover .mail { transform: translateZ(20px); }
  .xcard:hover .cores, .xcard.custom:hover .hexrow, .ccard:hover .ctop { transform: translateZ(24px); }
  .xcard:hover .price, .xcard.custom:hover .big, .lcard:hover .lname, .ccard:hover h3 { transform: translateZ(40px); }
  .xcard:hover .btn { transform: translateZ(55px) scale(.945); }
  .xcard:hover .btn:hover { transform: translateZ(55px) scale(.945) translateY(-3px); }
}

/* pricing: a grid per location, the weekly button and the picker's flag are switched with [hidden] (their own display would win) */
.pgrid[hidden], .seg button[hidden], img.flag[hidden] { display: none; }

/* locations: the status line and a card's state when a location is down (red) or has no data yet (grey) */
.status.down { background: rgba(255,107,107,.07); border-color: rgba(255,107,107,.3); color: #ff8a8a; }
.status.down i, .lstate.off i { background: #ff6b6b; animation: none; }
.lstate.off { color: #ff8a8a; }
.lstate.unk { color: var(--fc-text3); }
.lstate.unk i { background: var(--fc-text3); animation: none; }
.lcard .lname .flag { flex: none; }

/* legal pages: the note on translated documents (which version prevails) sits at the top of the text */
.doc-prose .fc-legal-notice { margin: 0 0 26px; padding: 14px 18px; border-radius: var(--fc-r-lg); border: 1px solid var(--fc-border2); background: rgba(20,23,31,.55); font-size: 14px; line-height: 1.6; color: var(--fc-text2); }
.doc-prose .fc-legal-notice a { color: var(--fc-cyan); }
.doc-prose { max-width: none; }   /* the documents and the image pages: the column takes all the width beside the contents (09.11.2026, the owner) */
.dsec.dintro { padding-bottom: 6px; }

/* sign-in pages: Livewire's field errors, the "or" line and the OAuth buttons, the two-factor code boxes */
.auth-card .err { font-size: 12.5px; line-height: 1.45; color: #ff8a8a; }
.fld.is-error .inp input, .fld.is-error .inp select { border-color: rgba(255,107,107,.65); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; font-family: var(--fc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--fc-border); }
.auth-oauth { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-oauth .btn { flex: 1 1 140px; justify-content: center; gap: 8px; }
.otp { display: flex; align-items: center; gap: 6px; }
.otp-d { width: 44px; height: 52px; padding: 0; border-radius: 12px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); color: var(--fc-text); font-family: var(--fc-mono); font-size: 20px; text-align: center; transition: border-color .2s, box-shadow .2s; }
.otp-d:focus { outline: none; border-color: var(--fc-cyan); box-shadow: 0 0 0 4px rgba(32,181,235,.14); }
.otp-sep { color: var(--fc-text3); }
@media (max-width: 420px) { .otp { gap: 4px; } .otp-d { width: 38px; height: 46px; font-size: 18px; } }
/* email confirmation (auth/verify-email): the address in the lead (a long one breaks, in RTL it stays one piece), the hint
   under it, the note with the countdown and the button (one block keyed by the send, inside the form's column) */
.auth-card .lead .mail { display: inline-block; max-width: 100%; color: var(--fc-text); font-weight: 600; overflow-wrap: anywhere; unicode-bidi: isolate; }
.auth .proto-note .tm { white-space: nowrap; font-variant-numeric: tabular-nums; }
.auth-card .lead + .hint { margin-top: 10px; }
.auth .vfy-wait { display: contents; }
.auth .form.sent .proto-note { margin-top: 0; line-height: 1.5; }

/* order pages: Livewire's errors, add-on rows with their price, a server row's price and quantity, the empty cart, card logos */
.app .err { display: block; font-size: 12.5px; line-height: 1.45; color: #ff8a8a; }
.app .err.center { text-align: center; margin-top: 8px; }
.app .fld.is-error .inp input, .app .fld.is-error .inp select { border-color: rgba(255,107,107,.65); }
.app .chk.addon { align-items: center; }
.app .chk.addon b { color: var(--fc-text); font-weight: 600; }
.app .chk.addon em { margin-right: auto; font-style: normal; font-family: var(--fc-mono); font-size: 13px; color: var(--fc-text); white-space: nowrap; }
.app .srv .end .price { font-size: 18px; color: var(--fc-text); }
.app .srv .qty { display: inline-flex; align-items: center; gap: 8px; }
.app .panel.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.app .panel.empty p { color: var(--fc-text2); }
.app .panel.empty .btn { margin-top: 8px; }
.app .sum-line.coupon { align-items: center; }
.app .pay-logos { display: flex; justify-content: center; gap: 10px; margin-top: 16px; opacity: .8; }
.app .pay-logos img { height: 22px; width: auto; }

/* client area: Log out in the menu (Livewire auth.logout), the load chart while it loads, a server row's renewal date */
.app .cab-out .ax-logout { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.app .cab-out .ax-logout:hover { color: var(--fc-text); }
.app .ld-wait { padding: 48px 0; text-align: center; font-size: 14px; color: var(--fc-text3); }
.app .srv .renews { font-size: 12px; color: var(--fc-text3); }
.app .hint .ulink { margin-right: 4px; }
/* pages not yet redone keep Paymenter's markup inside the client area: no extra top margin, the page's width */
.app .cab-main > .container { max-width: none; margin-top: 0; padding-inline: 0; }

/* servers and a server: two meters, a row of actions, the rename button by the name, Paymenter's own bits (name, auto-payment) */
.app .meters.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app .acts-row { display: flex; flex-wrap: wrap; gap: 10px; }
.app .app-head h1 .ib.rename { vertical-align: middle; margin-right: 10px; font-size: 11px; }
.app .ph .up { font-size: 12px; color: var(--fc-text3); }
.app .kv dd .muted { color: var(--fc-text3); font-size: 12.5px; }
.app .paymenter-bits { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05); font-size: 14px; color: var(--fc-text2); }
.app .ext-views { margin-top: 18px; }
[x-cloak] { display: none !important; }

/* Paymenter's own components in the redesign (x-button.*, x-form.*, x-modal): buttons, fields and modals of the client
   area and of the Proxmox pages. Not scoped: a modal is moved to <body>, outside .app */
.btn.ax-btn { padding: 11px 20px; font-size: 13.5px; }
.btn.ax-btn-danger { background: transparent; border-color: rgba(255,84,112,.45); color: #ff8aa0; }
.btn.ax-btn-danger:hover { background: rgba(255,84,112,.1); border-color: #ff5470; color: #ffb3c1; transform: translateY(-2px); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.ax-fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ax-lbl { font-size: 13px; color: var(--fc-text2); }
.ax-lbl .req { color: #c27bf0; }
.ax-inp { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); color: var(--fc-text); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.ax-inp::placeholder { color: #4b5068; }
.ax-inp:hover { border-color: #3a4160; }
.ax-inp:focus { outline: none; border-color: var(--fc-cyan); box-shadow: 0 0 0 4px rgba(32,181,235,.14); }
.ax-inp:disabled { opacity: .55; cursor: not-allowed; }
.ax-inp.ax-color { padding: 4px; }
textarea.ax-inp { min-height: 130px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
select.ax-inp { -webkit-appearance: none; appearance: none; padding-left: 38px; cursor: pointer; background-image: linear-gradient(-45deg, transparent 50%, #868ba3 50%), linear-gradient(-135deg, #868ba3 50%, transparent 50%); background-position: calc(100% - (100% - 20px)) 20px, calc(100% - (100% - 15px)) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
select.ax-inp[multiple] { background-image: none; padding: 8px 14px; }
.ax-err { font-size: 12.5px; color: #ff8a8a; }
.ax-hint { font-size: 12px; color: var(--fc-text3); }
.ax-chk { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--fc-text2); }
.ax-chk label { cursor: pointer; }
.ax-chk-box { flex: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 5px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.6); -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.ax-chk-box:checked { background: var(--fc-lime); border-color: var(--fc-lime); }
.ax-chk-box:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #070910; border-bottom: 2px solid #070910; transform: translateY(-1px) rotate(-45deg); }
.ax-chk-box:focus-visible { outline: 2px solid var(--fc-cyan); outline-offset: 2px; }
.ax-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ax-modal-box { width: 100%; max-height: calc(100% - 32px); overflow-y: auto; padding: 26px 28px; border-radius: 22px; background: rgba(15,18,27,.97); border: 1px solid var(--fc-border2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); text-align: right; color: var(--fc-text); }
.ax-modal-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ax-modal-h h2 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--fc-text); }
.ax-modal-x, .ax-modal-h button { border: 0; background: none; color: var(--fc-text2); cursor: pointer; }
.ax-modal-x:hover, .ax-modal-h button:hover { color: var(--fc-text); }
.ax-modal-body { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; color: var(--fc-text2); }
@media (max-width: 575px) { .ax-modal-box { padding: 22px 20px; } }

/* the Proxmox extension's server pages: the sections as tabs (links), four small charts, the console, the reinstall panel */
.app .pmx-tabs a { position: relative; padding: 12px 16px; color: var(--fc-text3); font-size: 14.5px; white-space: nowrap; transition: color .2s; }
.app .pmx-tabs a::after { content: ""; position: absolute; right: 12px; left: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fc-lime); transform: scaleX(0); transition: transform .25s; }
.app .pmx-tabs a:hover, .app .pmx-tabs a.on { color: var(--fc-text); }
.app .pmx-tabs a.on::after { transform: scaleX(1); }
.app .pmx-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@media (max-width: 575px) { .app .pmx-charts { grid-template-columns: minmax(0, 1fr); } }
.app .pmx-vnc { padding: 8px; overflow: hidden; }
.app .pmx-vnc iframe { display: block; width: 100%; min-height: 70vh; border: 0; border-radius: 12px; background: #000; }
.app .pmx-danger { border-color: rgba(255,84,112,.3); }
/* backups on a phone: each backup a block, its buttons under it (a wide table would hide them off-screen) */
@media (max-width: 640px) {
  .app .tbl.pmx-bk { min-width: 0; }
  .app .tbl.pmx-bk thead { display: none; }
  .app .tbl.pmx-bk tr { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.04); }
  .app .tbl.pmx-bk tr:last-child { border-bottom: 0; }
  .app .tbl.pmx-bk td { padding: 0; border: 0; }
  .app .tbl.pmx-bk td:first-child, .app .tbl.pmx-bk td.r { grid-column: 1 / -1; }
  .app .tbl.pmx-bk td.r .acts-row { justify-content: flex-start !important; margin-top: 6px; }
}
.app .tbl .mono { font-family: var(--fc-mono); font-size: 13.5px; }
/* invoices: the invoice page and the payment (invoices/show), the list's pages */
.app .tbl.inv-items { min-width: 0; }
.app .tbl .item-ref { font-size: 12px; color: var(--fc-text3); white-space: nowrap; }
.app .tbl.pays { min-width: 0; }
@media (max-width: 640px) { .app .tbl.pays th:nth-child(2), .app .tbl.pays td:nth-child(2) { display: none; } }
.app .tbl .item-ref:hover { color: var(--fc-cyan); }
.app .inv-sum { max-width: 340px; margin: 12px auto 0 0; }
.app .paym { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.app .paym-o { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--fc-border2); background: rgba(7,9,16,.45); color: inherit; font: inherit; text-align: right; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.app .paym-o:hover { border-color: #3a4160; }
.app .paym-o[aria-checked="true"] { border-color: var(--fc-cyan); background: rgba(32,181,235,.08); box-shadow: 0 0 0 3px rgba(32,181,235,.12); }
.app .paym-o:focus-visible { outline: 2px solid var(--fc-cyan); outline-offset: 2px; }
.app .paym-r { width: 14px; height: 16px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-border2); transition: background .2s; }
.app .paym-o[aria-checked="true"] .paym-r { background: var(--fc-cyan); }
.app .paym-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app .paym-t b { font-size: 14.5px; font-weight: 600; color: var(--fc-text); }
.app .paym-t small { font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); }
/* a gateway with several methods (Payssion): its methods under one caption, .paym-g (the gateway's name and hint), each in one line */
.app .paym-g { margin: 8px 0 0; padding-inline: 2px; font-size: 12.5px; line-height: 1.45; color: var(--fc-text3); }
.app .paym-o.sm { padding-block: 10px; }
/* the payment window (invoices/show, a gateway's own page such as Payssion's redirect): as narrow as a payment form, not max-w-3xl */
.ax-modal-box.ax-modal-pay { max-width: 480px; }
.ax-modal .btn.wide { width: 100%; }   /* outside .app, where .btn.wide is set */
.app .pay-wait { display: flex; align-items: center; gap: 10px; color: var(--fc-text2); font-size: 14px; }
.app .ld-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--fc-cyan); animation: ax-spin .8s linear infinite; }
@keyframes ax-spin { to { transform: rotate(-360deg); } }
.app .launch { margin-bottom: 28px; }
.app .launch-h { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin-top: 16px; }
.app .launch-sub { font-size: 15px; color: var(--fc-text2); margin-top: 10px; }
.app .pager { margin-top: 16px; }
/* an unpaid invoice on a narrow screen: the payment first, the items and details under it */
@media (max-width: 991px) { .app .inv-show .grid-side > .side { order: -1; } }
/* requests (tickets): the form, the conversation, attachments */
.app .req-form { max-width: 820px; }
.app .drop { cursor: pointer; }
.app .drop.on { border-color: var(--fc-cyan); background: rgba(32,181,235,.07); }
.app .drop-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.app .drop-files code, .app .msg .att code { font-family: var(--fc-mono); font-size: 12px; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--fc-text2); }
.app .msg .md { font-size: 15px; line-height: 1.65; color: var(--fc-text2); overflow-wrap: anywhere; }
.app .msg .md > * + * { margin-top: 10px; }
.app .msg .md a { color: var(--fc-cyan); text-decoration: underline; text-underline-offset: 2px; }
.app .msg .md ul, .app .msg .md ol { padding-right: 20px; }
.app .msg .md ul { list-style: disc; }
.app .msg .md ol { list-style: decimal; }
.app .msg .md code { font-family: var(--fc-mono); font-size: 13px; padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.06); }
.app .msg .md pre { padding: 12px 14px; border-radius: 10px; background: rgba(7,9,16,.6); overflow-x: auto; }
.app .msg .md pre code { padding: 0; background: none; }
.app .msg .md blockquote { padding-right: 12px; border-right: 2px solid var(--fc-border2); color: var(--fc-text3); }
.app .msg .att { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app .msg .att img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--fc-border); }
.app .msg .att a:hover code { color: var(--fc-cyan); }
@media (max-width: 575px) { .app .msg { grid-template-columns: minmax(0, 1fr); } .app .msg .av { display: none; } }
/* consent checkboxes (cart, sign-up, offers by email): legal text at least 15px (docs/07-legal.md, rule 8) */
.app .chk.fc-consent, .auth .chk.fc-consent { font-size: 15px; line-height: 1.5; }
/* account pages */
.app .acc-form, .app .acc-narrow { max-width: 860px; }
.app .swc { position: relative; display: inline-flex; vertical-align: middle; }
.app .swc input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.app .swc .sw { pointer-events: none; }
.app .swc input:checked + .sw { background: var(--fc-lime); }
.app .swc input:checked + .sw::after { transform: translateX(-18px); background: #070910; }
.app .swc input:focus-visible + .sw { outline: 2px solid var(--fc-cyan); outline-offset: 2px; }
.app .swc input:disabled { cursor: not-allowed; }
.app .swc input:disabled + .sw { opacity: .45; }
.app .tfa-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0; }
.app .tfa-qr img { width: 168px; height: 168px; border-radius: 12px; background: #fff; padding: 8px; }
.app .tfa-qr div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app .tfa-qr small { font-size: 12.5px; color: var(--fc-text3); }
.app .tfa-qr code { font-family: var(--fc-mono); font-size: 14px; color: var(--fc-text); overflow-wrap: anywhere; }
.app .nil .ic { flex: none; }
/* change plan (services/upgrade): plan tiles */
.app .up-tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.app .up-tiles .tile { gap: 6px; padding: 16px 18px; }
.app .up-tiles .tile b { font-size: 17px; }
.app .up-tiles .tile .cur { align-self: flex-start; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(190,242,100,.35); color: var(--fc-lime); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.app .up-tiles .tile .pr { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--fc-text); }
/* error pages (errors/layout): the prototype's 404 — a big code over the honeycomb running to the horizon */
.nf-top { position: absolute; top: 0; right: 0; left: 0; z-index: 3; display: flex; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 0; }
.nf-logo { display: inline-flex; align-items: center; font-size: 18px; font-weight: 700; color: var(--fc-text); }
.nf-logo img { height: 28px; width: auto; }
.nf { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding-block: calc(110px + env(safe-area-inset-top, 0px)) 80px; }
.nf > .vis { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 62%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 62%, #000 86%, transparent 100%); }
.nf .eyebrow { margin-inline: auto; }
.nf .code { display: flex; justify-content: center; gap: clamp(8px, 2vw, 22px); margin-top: 26px; font-size: clamp(110px, 22vw, 260px); font-weight: 800; line-height: .85; letter-spacing: -.05em; }
.nf .code span { background: linear-gradient(-170deg, #fff 30%, rgba(255,255,255,.25)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.nf .code span:nth-child(2) { background: linear-gradient(-160deg, var(--fc-cyan), var(--fc-accent)); -webkit-background-clip: text; background-clip: text; }
.nf .code:hover span:nth-child(1) { transform: translateY(-8px) rotate(4deg); }
.nf .code:hover span:nth-child(3) { transform: translateY(-8px) rotate(-4deg); }
.nf h1 { font-size: clamp(30px, 4vw, 52px); font-weight: 650; letter-spacing: -.025em; margin-top: 22px; text-wrap: balance; }
.nf p { font-size: 16px; color: var(--fc-text2); max-width: 520px; margin: 16px auto 0; }
.nf .ctas { justify-content: center; margin-top: 30px; }
.nf .nf-support { font-size: 13.5px; color: var(--fc-text3); margin-top: 26px; }
body.ax-error { min-height: 100vh; background: var(--fc-bg); }

/* background hexagons (site.js sky): CSS animations that the browser runs on the GPU, no script per frame. The script
   sets each hexagon's numbers once per page (place, size, colour, speeds, phases). .hx — parallax on scroll (a
   scroll-driven animation, where supported), .hx-d — the drift up, .hx-c — two copies one span (screen + 80px) apart,
   the svg inside spins and pulses. With reduced motion all of this stands still (the rule for every element above) */
.sky .hx, .sky .hx-d { position: absolute; top: 0; right: 0; width: 0; height: var(--span, calc(100vh + 80px)); }
.sky .hx-d { animation: hx-up linear infinite; }
.sky .hx-c { position: absolute; right: 0; line-height: 0; }
.sky .hx-c svg { display: block; overflow: visible; animation: hx-spin linear infinite, hx-pulse ease-in-out infinite; }
@keyframes hx-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes hx-spin { from { transform: rotate(0deg); } to { transform: rotate(-60deg); } }
@keyframes hx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes hx-par { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@supports (animation-timeline: scroll()) {
  .sky .hx { animation: hx-par linear both; animation-timeline: scroll(root block); }
}

/* home plans below 992px (owner, 26.10.2026): a swipeable strip instead of a column — native scrolling with snap, from
   the first plan with the next one peeking at the side; the dots under it follow the strip and pick a card */
.plans-dots { display: none; }
@media (max-width: 991px) {
  .plans .cards { display: flex; max-width: none; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); padding: 4px var(--gut-l) 14px var(--gut-r); scroll-padding-inline: var(--gut-l) var(--gut-r); }
  .plans .cards::-webkit-scrollbar { display: none; }
  .plans .cards > .xcard { flex: none; width: min(78vw, 340px); scroll-snap-align: center; }
  .plans-dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
  .plans-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .plans-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--fc-border2); transition: width .25s, background .25s; }
  .plans-dots button.on::before { width: 22px; background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); }
  .plans-dots button:focus-visible { outline: 2px solid var(--fc-cyan); outline-offset: 2px; border-radius: 8px; }
}

/* phones (site.js puts ax-still on <html>: a touch screen whose shorter side is under 600px; owner, 26.10.2026): no
   decorative animation — the background glows and hexagons stand, the plan buttons do not float, the live dots and the
   current launch step do not blink or pulse. The loading spinner and the transitions stay */
.ax-still .sky i, .ax-still .sky .hx, .ax-still .sky .hx-d, .ax-still .sky .hx-c svg, .ax-still .xcard .btn, .ax-still .dot,
.ax-still .launch-card li.now::before, .ax-still .status i, .ax-still .lstate i, .ax-still .app .lsteps li.now::before { animation: none !important; }

/* dashboard blocks with nothing in them yet (dashboard.blade.php, texts site::client.nil; owner, 27.10.2026; not .nil — that is the account pages' empty row): the brand
   hexagon, a heading, a line, sometimes a button; the servers block — a dashed "future server" row; traffic — faded
   placeholder bars. Such a block stretches to its neighbour's height (grid2.fill) and centres its content */
.app .grid2.fill { align-items: stretch; }
.app .panel.is-vac { display: flex; flex-direction: column; }
.app .panel.is-vac > .vac, .app .panel.is-vac > .vac-bars { flex: 1; }
.app .vac { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 6px 4px; text-align: center; }
.app .vac .hx { width: 44px; height: 50px; flex: none; display: grid; place-items: center; margin-bottom: 4px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, #11516c, #2f2561); }
.app .vac .hx .ic { width: 20px; height: 20px; }
.app .vac b { font-size: 15px; font-weight: 650; color: var(--fc-text); }
.app .vac p { max-width: 36ch; font-size: 13px; line-height: 1.55; color: var(--fc-text2); }
.app .vac .btn { margin-top: 6px; }
.app .vac.row { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 18px 20px; text-align: start; border: 1px dashed var(--fc-border2); border-radius: 14px; background: rgba(255,255,255,.015); }
.app .vac.row .hx { margin: 0; }
.app .vac.row .tx { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.app .vac.row p { max-width: none; }
.app .vac.row .btn { flex: none; margin: 0; }
@media (max-width: 640px) { .app .vac.row { flex-wrap: wrap; } .app .vac.row .tx { flex-basis: calc(100% - 62px); } .app .vac.row .btn { width: 100%; justify-content: center; } }
.app .vac-bars { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 22px 0 4px; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 95%); mask-image: linear-gradient(to right, #000 35%, transparent 95%); }
.app .vac-bars span { position: relative; display: block; width: var(--w); height: 12px; border-radius: 4px 0 0 4px; background: linear-gradient(to left, rgba(32,181,235,.24), rgba(124,92,255,.24)); }
.app .vac-bars span::before { content: ""; position: absolute; right: 0; top: -15px; width: 84px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); }
.app .vac-cols { display: flex; gap: 10px; height: 150px; padding-top: 22px; }
.app .vac-cols span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
.app .vac-cols i { display: block; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(to top, rgba(32,181,235,.2), rgba(124,92,255,.06)); }
.app .vac-cols em { font-style: normal; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); text-align: center; }
.app .panel.is-vac > .vac-cols { margin-block: auto 0; }
.app .vac-cap { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--fc-text2); text-align: center; }

/* dashboard: the activity column on the right is at least as tall as the left one (owner, 27.10.2026) — more events,
   and it grows; none, and its empty block sits in the middle. Other pages keep their sticky side column */
.app .dash .grid-side { align-items: stretch; }
.app .dash .grid-side .side { position: static; display: flex; flex-direction: column; }
.app .dash .grid-side .side > .panel { flex: 1; }

/* client area tables and lists: the whole row opens its link a.row-link (owner, 29.10.2026; site.js clientArea) — invoices,
   requests, payments on the account page, the dashboard's recent invoices and requests, upcoming payments on a phone */
.app .tbl tbody tr:has(a.row-link), .app .rl { cursor: pointer; }
.app .tbl tbody tr:hover a.row-link, .app .kv.lst > .rl:hover a.row-link, .app .pa-list li.rl:hover span { color: var(--fc-cyan); }
.app .kv.lst { row-gap: 2px; }
.app .kv.lst > .rl { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-inline: -10px; padding: 5px 10px; border-radius: 10px; transition: background .2s; }
.app .kv.lst > .rl dt { flex: 1 1 auto; min-width: 0; }
.app .kv.lst > .rl dd { flex: none; }
.app .kv.lst > .rl:hover { background: rgba(255,255,255,.025); }
.app .kv.lst > .rl a.row-link, .app .pa-list li.rl span { transition: color .2s; }

/* servers: a server ordered but not paid yet (status pending; owner, 29.10.2026) — a pale violet hexagon; in the rows — the due date
   of its invoice; on its page (services/show) the Access panel says when it will be there (.lv-pay) */
.app :is(.srv, .lv) .col.pend::before { background: rgba(174,75,232,.1); }
.app :is(.srv, .lv) .col.pend::after { background: linear-gradient(-160deg, rgba(174,75,232,.5), rgba(32,181,235,.2)); }
.app .lv-pay { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(174,75,232,.45); background: linear-gradient(-90deg, rgba(174,75,232,.09), rgba(32,181,235,.03)); }
.app .lv-pay .hx { width: 40px; height: 46px; flex: none; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, #11516c, #2f2561); }
.app .lv-pay .hx .ic { width: 20px; height: 20px; }
.app .lv-pay > div { min-width: 0; }
.app .lv-pay b { font-size: 14.5px; font-weight: 600; color: var(--fc-text); }
.app .lv-pay small { margin-right: 10px; font-family: var(--fc-mono); font-size: 12px; color: var(--fc-text3); white-space: nowrap; }
.app .lv-pay p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--fc-text2); }
.app .lv-pay > div > p:first-child { margin-top: 0; }
@media (max-width: 575px) { .app .lv-pay .hx { display: none; } }   /* a phone: the text gets the width */

/* servers, detailed view: every card has the same parts, a server without live data shows them empty (.lv-ip.blank, .lv-charts.blank),
   so the cards of a row are of one height (owner, 29.10.2026); the buttons at the bottom. Not paid yet: its invoice at the left of the bottom line */
.app .lv-grid { align-items: stretch; }
.app .lv-f { margin-top: auto; flex-wrap: wrap; align-items: center; }
.app .lv-ip.blank { min-height: 48px; }   /* as tall as a row with the Copy button */
.app .lv-ip.blank code, .app .lv-charts.blank .spark b { color: var(--fc-text3); }
.app .lv-charts.blank .spark svg { opacity: .5; }
.app .lv-f .lv-inv { margin-inline-end: auto; font-size: 13.5px; color: var(--fc-text2); }
.app .lv-f .lv-inv b { font-weight: 600; color: var(--fc-text); }
.app .lv-f .lv-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-inline-start: auto; }   /* the buttons wrap together, under the invoice */

/* servers, detailed view: memory, traffic this month and renewal — three tiles like the charts above them (owner, 29.10.2026):
   a label, the value, a line at the bottom — memory used of all (the script fills it), traffic has no limit (a dashed line),
   renewal: the share of the paid period gone by (full on the renewal day; the tile's title says how long is left) */
.app .lv-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.app .lv-facts .fct { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 12px 14px 14px; border-radius: 12px; background: rgba(7,9,16,.45); border: 1px solid var(--fc-border); }   /* label, value, line: the rows of the tiles line up when a label takes two lines */
.app .lv-facts .fct > small { display: block; font-family: var(--fc-mono); font-size: 11px; letter-spacing: .04em; color: var(--fc-text3); }
.app .lv-facts .fct > b { display: block; align-self: start; margin: 7px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--fc-text); font-variant-numeric: tabular-nums; }
.app .lv-facts .fct .bar { display: block; align-self: end; height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.app .lv-facts .fct .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(-90deg, var(--fc-cyan), var(--fc-accent)); transition: width .6s; }
.app .lv-facts .fct .bar.inf { background: repeating-linear-gradient(-90deg, var(--fc-border2) 0 6px, transparent 6px 11px); }
.app .lv.off .lv-facts .fct > b { color: var(--fc-text2); }
@media (max-width: 575px) { .app .lv-facts { grid-template-columns: 1fr 1fr; } .app .lv-facts .fct:first-child { grid-column: 1 / -1; } }

/* ── VPS images: the catalog (/images) and the page of one image (/images/{slug}); owner, 01.11.2026 ── */
/* the mark of an image (marketing/image-mark): the first letter in a hexagon, tinted by the family; .big — on the image page */
.im-mark { flex: none; width: 50px; height: 56px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), var(--im-g); color: #fff; font-size: 22px; font-weight: 750; letter-spacing: -.02em; text-shadow: 0 1px 3px rgba(0,0,0,.35); --im-g: linear-gradient(160deg, var(--fc-cyan), var(--fc-accent)); }
.im-mark.t-ubuntu { --im-g: linear-gradient(160deg, #f07a42, #b5370f); }
.im-mark.t-debian { --im-g: linear-gradient(160deg, #e23a72, #8c0a3d); }
.im-mark.t-almalinux { --im-g: linear-gradient(160deg, #35b6ea, #1b4c9f); }
.im-mark.t-rocky { --im-g: linear-gradient(160deg, #34d39d, #0b7656); }
.im-mark.t-centos { --im-g: linear-gradient(160deg, #b366d8, #5a2a8a); }
.im-mark.t-g-apps { --im-g: linear-gradient(160deg, #2fb0ea, #2b55c9); }
.im-mark.t-g-panels { --im-g: linear-gradient(160deg, #a463e6, #4f2a9e); }
.im-mark.t-g-games { --im-g: linear-gradient(160deg, #6fbf3a, #1f6e4a); }
.im-mark.big { width: 70px; height: 78px; font-size: 30px; }

/* the catalog card (.imcard on .xcard.lcard): what it shares with a location card — the group, the name, the state, the
   tagline, the facts, the button, the frame — looks the same. Its own: the image's mark (in place of the flag) with the
   group and the state beside it and the name under them; the minimum across (a long value); the license in a small line
   (a long text). Names: one size smaller than the countries', beside the mark */
.imcard .im-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "m g s" "m n n"; gap: 6px 14px; align-items: center; transform-style: preserve-3d; }   /* preserve-3d: the name and the group come forward on hover, as on the other cards */
.imcard .im-top .im-mark { grid-area: m; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .imcard:hover .im-mark { transform: translateZ(30px); } }
.imcard .lreg { grid-area: g; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* a group name of one long word (et «OPERATSIOONISÜSTEEMID») ends in … instead of running under the state; the chips above give it in full */
.imcard .lstate { grid-area: s; }
.imcard .lname { grid-area: n; min-width: 0; }
.imcard .lname b { font-size: 23px; overflow-wrap: anywhere; }
.imcard .lspecs li:first-child { grid-column: 1 / -1; }
.imcard .im-lic { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fc-text3); }
.imcard .im-lic small { display: block; margin-bottom: 2px; font-family: var(--fc-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.im-tm { margin-top: 22px; text-align: center; }
.im-tm small { font-size: 12px; line-height: 1.5; color: var(--fc-text3); }

/* the page of an image: the top card (09.11.2026, the owner: one card, more attractive). Tinted by the image's family (--g, the
   colour of its mark): on the left the group and the state in pills, the name, the tagline in the serif of the site's headings,
   the action; on the right the mark in a honeycomb of its colour, a few cells pulse (no letters on them, shapes and light); along
   the bottom the facts, cells that share the width by their text */
.imhero { padding-bottom: clamp(30px, 4.4vw, 60px); }   /* the information stands clear of the card (the owner) */
.imhero .im-back { margin-bottom: 18px; }
.im-hero { --g: 174,75,232; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--fc-r-lg); background: var(--fc-surface); border: 1px solid var(--fc-border2); box-shadow: 0 34px 90px -46px rgba(var(--g), .55); }
.im-hero:has(.t-ubuntu) { --g: 240,122,66; }
.im-hero:has(.t-debian) { --g: 226,58,114; }
.im-hero:has(.t-almalinux) { --g: 53,182,234; }
.im-hero:has(.t-rocky) { --g: 52,211,157; }
.im-hero:has(.t-centos) { --g: 179,102,216; }
.im-hero:has(.t-g-apps) { --g: 47,176,234; }
.im-hero:has(.t-g-panels) { --g: 164,99,230; }
.im-hero:has(.t-g-games) { --g: 111,191,58; }
.im-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 380px at 81% 40%, rgba(var(--g), .36), transparent 72%), linear-gradient(-115deg, rgba(var(--g), .08), transparent 46%); }
.im-hero-top { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "t v" "a v"; grid-template-rows: auto 1fr; column-gap: 24px; min-height: 320px; padding: 44px 48px 44px 0; }
.im-hero-t { grid-area: t; position: relative; z-index: 1; min-width: 0; }
.im-hero .imh-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.im-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--fc-border2); background: rgba(255,255,255,.04); font-family: var(--fc-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text2); }
.im-hero .imh-st .lstate { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(181,245,58,.28); background: rgba(181,245,58,.08); }
.im-hero .imh-st .lstate.unk { border-color: var(--fc-border2); background: rgba(255,255,255,.04); }
.im-hero .imh-st .lstate.off { border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.08); }
.imhero .im-hero h1 { margin-top: 22px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; }
.imhero .hero-sub { margin-top: 12px; max-width: 26em; font-family: var(--fc-serif); font-style: italic; font-size: clamp(21px, 2vw, 28px); line-height: 1.22; color: var(--fc-accent-h); }
.im-hero-act { grid-area: a; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.im-hero .im-wish { flex-direction: row; align-items: center; gap: 10px 16px; margin: 0; }
.im-hero .im-wish .btn { width: auto; flex: none; max-width: 100%; }
.im-hero .im-wish small { max-width: 280px; text-align: start; }
.im-hero-vis { grid-area: v; position: relative; display: grid; place-items: center; }
.im-comb { position: absolute; right: 50%; top: 50%; width: 660px; height: 540px; transform: translate(50%, -50%); color: rgb(var(--g)); fill: currentColor; stroke: currentColor; stroke-opacity: .24; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); pointer-events: none; }
.im-comb .p { animation: im-comb-p 5.5s ease-in-out infinite; }
@keyframes im-comb-p { 50% { fill-opacity: .78; } }
@media (prefers-reduced-motion: reduce) { .im-comb .p { animation: none; } }
.ax-still .im-comb .p { animation: none !important; }
.im-hero-m { position: relative; display: block; filter: drop-shadow(0 18px 34px rgba(var(--g), .6)); }
.im-hero .im-mark.big { width: 132px; height: 148px; font-size: 60px; }
.im-facts { display: flex; flex-wrap: wrap; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--fc-border); border-top: 1px solid var(--fc-border); scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); }
.im-facts li { flex: 1 1 auto; min-width: 140px; display: flex; flex-direction: column; gap: 4px; padding: 16px 24px 17px; background: #0f1219; }
.im-facts small { font-family: var(--fc-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-text3); }
.im-facts span { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--fc-text); }
.im-facts code { font-family: var(--fc-mono); font-size: 13.5px; }
@media (max-width: 991px) {
  .im-hero-top { grid-template-columns: minmax(0, 1fr) 260px; min-height: 280px; padding: 34px 32px 34px 0; }
  .im-comb { width: 480px; height: 393px; }
  .im-hero .im-mark.big { width: 100px; height: 112px; font-size: 46px; }
}
@media (max-width: 767px) {
  /* a phone: the honeycomb and the mark are a band over the text */
  .im-hero-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "v" "t" "a"; grid-template-rows: auto; column-gap: 0; min-height: 0; padding: 0 0 22px; }
  .im-hero-vis { height: 176px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .im-comb { width: 520px; height: 425px; }
  .im-hero .im-mark.big { width: 92px; height: 103px; font-size: 42px; }
  .im-hero-t, .im-hero-act { padding-inline: 20px; }
  .im-hero-t { margin-top: 14px; }
  .imhero .im-hero h1 { margin-top: 14px; font-size: clamp(28px, 7.8vw, 36px); }
  .imhero .hero-sub { font-size: 20px; }
  .im-hero-act { margin-top: 20px; }
  .im-hero-act > .btn, .im-hero .im-wish, .im-hero .im-wish .btn { width: 100%; }
  .im-hero .im-wish { flex-direction: column; align-items: stretch; }
  .im-hero .im-wish small { max-width: none; text-align: center; }
  .im-facts li { flex: 1 1 40%; padding: 14px 20px 15px; }
  .im-hero::before { background: radial-gradient(420px 220px at 50% 70px, rgba(var(--g), .4), transparent 74%); }
}
/* the information under it */
.doc-prose .im-check { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.doc-prose .im-check li { position: relative; padding-inline-start: 26px; font-size: 15px; line-height: 1.6; color: var(--fc-text2); }
.doc-prose .im-check li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .42em; width: 11px; height: 12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-lime); }
/* which servers fit: the location with its city and code and its state under them, a mark per plan — text: fits /
   recommended, a link to the order (as the links of the text) where the image is live; grey where it is not yet, faded
   where it cannot run */
.doc-prose .im-tbl table { min-width: 600px; }
.doc-prose .im-tbl th, .doc-prose .im-tbl td { padding: 12px 14px; vertical-align: middle; text-align: center; }
.doc-prose .im-tbl th:first-child, .doc-prose .im-tbl td:first-child { text-align: start; }
.doc-prose .im-loc { white-space: nowrap; }
.doc-prose .im-loc .flag { width: 18px; height: 18px; margin-inline-end: 10px; vertical-align: middle; }
.doc-prose .im-loc > span { display: inline-grid; grid-template-columns: auto auto; justify-content: start; column-gap: 8px; vertical-align: middle; }
.doc-prose .im-loc b, .doc-prose .im-loc small { grid-column: 1 / -1; }
.doc-prose .im-loc b { font-weight: 600; color: var(--fc-text); }
.doc-prose .im-loc small { font-size: 12px; color: var(--fc-text3); }
.doc-prose .im-loc code { padding: 0 5px; font-size: 11px; background: none; color: var(--fc-text3); }
.doc-prose .im-loc em { align-self: center; margin-top: 3px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(181,245,58,.28); background: rgba(181,245,58,.08); font-family: var(--fc-mono); font-style: normal; font-size: 10.5px; line-height: 1.5; color: var(--fc-lime); }   /* a small pill on the state's line, so that the rows stay of one height */
.doc-prose .fit { font-family: var(--fc-mono); font-size: 12.5px; white-space: nowrap; }
.doc-prose .fit.rec { color: var(--fc-lime); }
.doc-prose a.fit.rec { border-bottom-color: rgba(181,245,58,.35); }
.doc-prose .fit.no, .doc-prose .im-tbl tr:not(.st-live) .fit { color: var(--fc-text3); }
.doc-prose .im-tbl .st { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-family: var(--fc-mono); font-size: 11px; color: var(--fc-text3); white-space: nowrap; }
.doc-prose .im-tbl .st i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--fc-text3); }
.doc-prose .im-tbl .st-live .st { color: var(--fc-lime); }
.doc-prose .im-tbl .st-live .st i { background: var(--fc-lime); }
.doc-prose .im-tbl .st-cpu .st { color: #ff8a8a; }
.doc-prose .im-tbl .st-cpu .st i { background: #ff6b6b; }
.doc-prose .im-tbl :is(.st-cpu, .st-later) .fit { opacity: .45; }
/* first steps: numbers in hexagons joined by a line */
.doc-prose .im-steps { list-style: none; margin: 0; padding: 0; counter-reset: im-st; }
.doc-prose .im-steps li { position: relative; min-height: 46px; padding: 7px 0 16px; padding-inline-start: 52px; counter-increment: im-st; font-size: 15px; line-height: 1.65; color: var(--fc-text2); }
.doc-prose .im-steps li::before { content: counter(im-st); position: absolute; inset-inline-start: 0; top: 0; width: 34px; height: 38px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(-160deg, rgba(32,181,235,.28), rgba(174,75,232,.28)); font-family: var(--fc-mono); font-size: 13px; font-weight: 600; color: var(--fc-text); }
.doc-prose .im-steps li::after { content: ""; position: absolute; inset-inline-start: 16.5px; top: 42px; bottom: 2px; width: 1px; background: var(--fc-border2); }
.doc-prose .im-steps li:last-child { padding-bottom: 0; }
.doc-prose .im-steps li:last-child::after { display: none; }
.doc-prose .im-steps b { font-weight: 600; color: var(--fc-text); }
.doc-prose .im-tm { margin-top: 14px; text-align: start; }

/* the page's wrapper (layouts/app, not the client area): not a scroll box — position: sticky of the contents (.toc) and the FAQ
   topics sticks to the window (owner, 01.11.2026); as narrow as the window, what is wider is cut at the side */
.ax-page { min-width: 0; overflow-x: clip; }

/* inner pages without the eyebrow plaque (owner, 01.11.2026; the home page, the sign-in pages and the error pages keep
   theirs): the title is the first line of the heading */
.phead h1, .dhero h1 { margin-top: 0; }

/* the logos under the pay button (components/pay-logos: the card brands and the Payssion methods of the client's
   country; owner, 02.11.2026): as many as there are — a long row wraps to a second line, centred */
.app .pay-logos { flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* ── the remaining pages (04.11.2026) ── */
/* a mailing's full text (mailings/mailing, AxiomaMailings /mailings/{id}): the email as it was sent — its text and
   MailBlocks carry the email's own colours, so it sits on a light card like the email's (the band from cyan to violet,
   then white; text styles from docs/tools-mailings/layout/mail.css) */
.app .letter { max-width: 680px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.app .letter::before { content: ""; display: block; height: 4px; background: linear-gradient(-90deg, #20B5EB, #AE4BE8); }
.app .letter-body { padding: clamp(22px, 4vw, 36px); color: #2D3748; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.app .letter-body > :last-child { margin-bottom: 0; }
.app .letter-body h1 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: #0B0F1A; }
.app .letter-body h2 { margin: 24px 0 10px; font-size: 18px; line-height: 1.3; font-weight: 700; color: #1F2740; }
.app .letter-body h3 { margin: 20px 0 8px; font-size: 15px; line-height: 1.4; font-weight: 700; color: #1F2740; }
.app .letter-body p { margin: 0 0 16px; color: #2D3748; }
.app .letter-body a { color: #9A35D0; }
.app .letter-body strong, .app .letter-body b { color: #1F2740; }
.app .letter-body ul, .app .letter-body ol { margin: 0 0 16px; padding-inline-start: 22px; color: #2D3748; }
.app .letter-body ul { list-style: disc; }
.app .letter-body ol { list-style: decimal; }
.app .letter-body li { margin: 0 0 6px; line-height: 1.55; }
.app .letter-body code { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; background: #F2F4F9; border-radius: 6px; padding: 1px 6px; color: #1F2740; }
.app .letter-body pre { margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; background: #0B0E15; color: #E6E8F0; overflow-x: auto; }
.app .letter-body pre code { background: none; padding: 0; color: #E6E8F0; }
.app .letter-body hr { border: 0; border-top: 1px solid #E3E9F2; margin: 24px 0; }
.app .letter-body blockquote { margin: 0 0 16px; padding: 2px 14px 2px 0; border-inline-start: 3px solid #AE4BE8; color: #5B6478; }
.app .letter-body img { max-width: 100%; height: auto; }
.app .letter-body table { max-width: 100%; }
.app .letter-note { max-width: 680px; margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--fc-text3); }
.app .letter-note a { color: var(--fc-cyan); }
/* the unsubscribe page (mailings/unsubscribe, AxiomaMailings): the sign-in pages' layout; the state line over the button
   (a done unsubscribe — the lime note, as "the link is on its way"), the note about service messages under it */
.auth .unsub .state { font-size: 14.5px; font-weight: 600; color: var(--fc-text); }
.auth .unsub .note-end { margin-top: 18px; }
/* windows of the client area (04.11.2026): a narrow one (ax-modal-sm: renaming, auto-payment, cancelling, confirmation);
   the shared confirmation (components/confirmation) over any other window — it may be asked from one (cancelling) */
.ax-modal-box.ax-modal-sm { max-width: 520px; }
.ax-modal.ax-confirm { z-index: 61; }
.ax-modal-body .lead { font-size: 14.5px; line-height: 1.6; color: var(--fc-text2); }
.ax-confirm-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ax-confirm-acts .btn { flex: 1 1 160px; justify-content: center; }
/* cancelling a server (services/cancel): when — two choice tiles (as on the upgrade page), the reason, the red note */
.ax-cancel { display: flex; flex-direction: column; gap: 16px; }
.ax-cancel .ax-fld legend { margin-bottom: 8px; }
.ax-modal .ax-cancel .tiles { grid-template-columns: 1fr 1fr; }
.ax-cancel .alert { padding: 14px 16px; }
@media (max-width: 480px) { .ax-modal .ax-cancel .tiles { grid-template-columns: 1fr; } }
/* auto-payment (services/partials/billing-agreement): the saved methods — one tile per line, the card's brand at the start */
.ax-modal .tiles.ax-methods { grid-template-columns: 1fr; }
.ax-methods .tile { flex-direction: row; align-items: center; gap: 14px; }
.ax-methods .tile > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ax-methods .ba-ic { flex: none; width: 38px; height: 26px; color: var(--fc-text2); }
/* the Billing tab of a server: small text buttons in a row of the list (rename, change, turn off) */
.app .kv dd .ib.sm { height: 24px; padding: 0 8px; margin-inline-start: 8px; font-size: 10.5px; vertical-align: 1px; }
.app .kv dd .ib.sm + .ib.sm { margin-inline-start: 6px; }
/* a plan's options on the upgrade page (components/form/configoption, form/radio): one option's field; round choices
   (a radio in .ax-chk / .app .chk — a dot instead of the tick); the slider — the track filled to the thumb, the stops
   under it (name and price) */
.ax-opt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ax-radios { display: flex; flex-direction: column; gap: 10px; }
.ax-fld legend.ax-lbl { margin-bottom: 7px; }
.ax-chk-box[type="radio"], .app .chk input[type="radio"] { border-radius: 50%; }
.ax-chk-box[type="radio"]:checked::after, .app .chk input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #070910; transform: none; }
.ax-range { position: relative; display: flex; align-items: center; height: 24px; }
.ax-range::before { content: ""; position: absolute; right: 10px; left: 10px; height: 6px; border-radius: 999px; background: linear-gradient(-90deg, var(--fc-cyan) var(--progress, 0%), rgba(255,255,255,.08) var(--progress, 0%)); }
.ax-range input { position: relative; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.ax-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(32,181,235,.25); }
.ax-range input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(32,181,235,.25); }
.ax-range input:focus-visible { outline: none; }
.ax-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(32,181,235,.55); }
.ax-range-marks { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ax-range-marks button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; border: 0; background: none; color: var(--fc-text2); font: inherit; font-size: 13px; cursor: pointer; }
.ax-range-marks button:hover { color: var(--fc-text); }
.ax-range-marks small { font-family: var(--fc-mono); font-size: 11.5px; color: var(--fc-text3); }
.ax-hint-link { color: var(--fc-cyan); }
.ax-hint-link:hover { text-decoration: underline; }
/* long words of some languages (04.11.2026): the language code in the header stays on one line («ZH-TW», «PT-BR»: in the
   client area's narrow header it broke at the hyphen); the link after a question on the sign-in pages goes to the next line
   whole (sl «Ustvarite | ga») */
.lang-btn .code { white-space: nowrap; }
.auth .alt a { white-space: nowrap; }
/* "I want this image" (marketing/image-wish-*, 08.11.2026). The button with its line: in the top card of the image's page (.im-hero: the line beside
   the button, on a phone under it). "On your list": the ghost button with the lime hexagon of the checklists */
.im-wish { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: auto; }
.im-wish .btn { width: 100%; white-space: normal; text-align: center; }   /* a long translation goes on to a second line */
.im-wish .btn .hex { flex: none; width: 11px; height: 12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-lime); }
.im-wish .btn[aria-pressed="true"]:not(:hover) { border-color: rgba(181,245,58,.4); }
.im-wish small { font-size: 12.5px; line-height: 1.45; color: var(--fc-text3); text-align: center; }
/* its window: the form, the consent (not smaller than 15px: docs/07-legal.md, rule 8; its link as in the consents of the
   sign-up form), the line about logging in as on the sign-in pages; the outcome — the lime note of "the link is on its way" */
.im-wish-f { display: flex; flex-direction: column; gap: 14px; }
.im-wish-consent { font-size: 15px; line-height: 1.5; color: var(--fc-text2); }
.im-wish-consent a { color: var(--fc-cyan); }
.im-wish-alt { padding-top: 14px; border-top: 1px solid var(--fc-border); font-size: 14px; line-height: 1.5; color: var(--fc-text2); text-align: center; }
.im-wish-alt a { color: var(--fc-text); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--fc-border2); transition: border-color .2s, color .2s; }
.im-wish-alt a:hover { color: var(--fc-cyan); border-color: var(--fc-cyan); }
.im-wish-done { padding: 12px 14px; border-radius: 10px; background: rgba(181,245,58,.08); border: 1px solid rgba(181,245,58,.3); font-size: 14px; line-height: 1.55; color: var(--fc-text2); }
.im-wish-done b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--fc-lime); }
/* the pages of the letter's links: the images asked for, with the same hexagons */
.auth-card .im-wish-names { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.auth-card .im-wish-names li { position: relative; padding-inline-start: 22px; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--fc-text); overflow-wrap: anywhere; }
.auth-card .im-wish-names li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .24em; width: 11px; height: 12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--fc-lime); }
.auth-card .im-wish-names + .hint { margin-top: 14px; }

/* the header on tablets and small laptops (09.11.2026): the logo, the page links and the buttons need up to 1120px (Georgian; the
   cart adds to it when it is not empty); with less room the logo was squeezed to nothing. Up to 1180px the links and Login /
   Register go into the round button, as on a phone; the account menu stays. site.js closes the panel above the same width */
.nav .logo { flex: none; }
@media (max-width: 1180px) {
  .links, .nav-right > .btn-ghost, .nav .nav-right > .btn-primary { display: none; }
  .menu-btn { display: block; }
  .nav.menu-open { background: rgba(7,9,16,.96); }
}
@media (min-width: 768px) and (max-width: 1180px) { .nav .mmenu:not([hidden]) { display: block !important; } }

/* Right-to-left pages only (ar, he): appended to the mirrored site.css by build_rtl.js */

/* code, addresses, commands and codes stay left to right inside right-to-left text */
code, kbd, samp, pre { direction: ltr; unicode-bidi: isolate; }
input[type="email"], input[type="url"], input[type="tel"], input[type="password"] { direction: ltr; text-align: right; }

/* the carousels' "previous" and "next" chevrons point the way the strip goes */
.fx-nav button svg { transform: scaleX(-1); }

/* servers: values with units and the plan's specs ("0.8 / 1 GB", "264 MB", "1 vCPU · 1 GB · 20 GB") read left to right;
   the memory, traffic and renewal tiles keep them at their right edge */
.app .lv-facts .fct > b { direction: ltr; text-align: right; }
.app :is(.lv-h, .srv) .meta span { direction: ltr; unicode-bidi: isolate; }
/* email confirmation: the address in the line reads left to right, as one piece */
.auth-card .lead .mail { direction: ltr; }

/* images: the specs ("1 vCPU · 1 GB RAM · 10 GB", "1 of 3") read in the direction of their own first letter, at the right edge */
.imcard .lspecs span, .im-facts span { unicode-bidi: plaintext; text-align: right; }

/* the top card of an image page: its light is on the left here, behind the mark */
.im-hero::before { background: radial-gradient(560px 380px at 19% 40%, rgba(var(--g), .36), transparent 72%), linear-gradient(245deg, rgba(var(--g), .08), transparent 46%); }