/* ==========================================================================
   vBoxx.eu
   Type: Poppins throughout (same as mac-hosting.vboxx.eu and cloud.vboxx.eu)
   ========================================================================== */
/* Poppins, self-hosted (SIL OFL, see assets/fonts/OFL.txt): no requests to Google */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-ext-300-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-300-normal.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-700-normal.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; }

:root {
  --gold: #E89126;
  --gold-600: #CC7A14;
  --gold-700: #A26011;
  --gold-50: #FDF3E8;
  --yellow: #F7C277;
  --teal: #1F5A63;
  --ink: #1D222A;
  --body: #575E6B;
  --muted: #848A95;
  --line: #E9E7E2;
  --line-warm: rgba(228, 226, 221, .75);
  --bg-soft: #F7F7F6;
  --bg-card: #FAFAF9;
  --dark-1: #4E525B;
  --dark-2: #33363D;
  --swoosh: #4A4B4D;
  --online: #2F9E44;
  --container: 1320px;
  --f-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-sm: 0 4px 14px rgba(23, 28, 38, .06);
  --shadow: 0 18px 50px -20px rgba(23, 28, 38, .18);
  --shadow-gold: 0 20px 60px -20px rgba(232, 145, 38, .35);
  --r-card: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* same frame as cloud.vboxx.eu and mac-hosting.vboxx.eu: 1320px box with 32px inner padding (1256px content) */
.container { width: 100%; max-width: var(--container); padding-inline: var(--gutter); margin-inline: auto; box-sizing: border-box; }
:root { --gutter: 32px; }
@media (max-width: 640px) { :root { --gutter: 24px; } }

/* Icons (injected by main.js) */
[data-i] { display: inline-flex; width: 1.1em; height: 1.1em; flex: none; }
[data-i] svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-i].is-solid svg { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-ui); font-weight: 500; font-size: 16px; line-height: 1.2;
  padding: 13px 26px; border-radius: 8px;
  background: var(--gold); color: #fff;
  box-shadow: var(--shadow-gold);
  transition: background .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:hover { background: var(--gold-600); transform: translateY(-1px); }
.btn [data-i] { width: 18px; height: 18px; }
.btn--light { background: #fff; color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btn--light:hover { background: #fff; border-color: #D5D2CA; box-shadow: var(--shadow-sm); }
.btn--sm { font-size: 13.5px; padding: 13px 18px; font-weight: 600; gap: 8px; }
.btn--sm [data-i] { width: 15px; height: 15px; }
.btn--grad { background: linear-gradient(135deg, var(--gold), #F5A53F); }

.link-gold {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--gold); font-weight: 600; font-size: 18px;
}
.link-gold [data-i] { width: 14px; height: 14px; }
.link-gold:hover { color: var(--gold-600); }

.pill {
  display: inline-block; font-size: 13.5px; font-weight: 500; color: #4b4e54;
  padding: 7px 15px; border-radius: 30px; background: #E9EAED;
}
.pill--since { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
.pill--since i { width: 7px; height: 7px; border-radius: 50%; background: #2F9E44; box-shadow: 0 0 0 3px rgba(47,158,68,.15); }
.pill--white { background: #fff; color: var(--ink); box-shadow: 0 3px 12px rgba(0,0,0,.08); }

.hl {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% .14em;
  background-position: 0 92%;
  padding-bottom: .04em;
}
.hl--thin { background-size: 100% 2px; background-position: 0 100%; }

/* ==========================================================================
   Top zone (topbar + header)
   ========================================================================== */
.top-zone { background: linear-gradient(180deg, #FAF8F5, #fff 85%); position: relative; }
.top-zone--plain { background: var(--bg-soft); }

.topbar { font-size: 12.5px; font-weight: 500; color: #50545a; position: relative; z-index: 60; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.topbar__right > :last-child { padding-right: 0; }
.topbar__demo { display: inline-flex; align-items: center; gap: 6px; }
.topbar__demo [data-i], .topbar__phone [data-i] { width: 13px; height: 13px; }
.topbar .dd__menu { font-size: 14px; }
.topbar__demo:hover { color: var(--gold); }
.topbar__right { display: flex; align-items: center; height: 100%; }
.topbar__right > * { padding-inline: 12px; display: flex; align-items: center; height: 18px; }
.topbar__right > * + * { border-left: 1px solid #E1E2E5; }
.status b { color: var(--online); font-weight: 600; margin-left: 4px; }
.topbar__phone { gap: 6px; }
.topbar__phone:hover { color: var(--gold); }
.topbar .dd { padding-inline: 24px; }
.topbar .dd:last-child { padding-right: 24px; }

/* Generic dropdown */
.dd { position: relative; }
.dd__toggle { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.dd__toggle [data-i] { width: 12px; height: 12px; transition: transform .2s; }
.topbar .dd__toggle [data-i]:not(.tb-ico) { width: 10px; height: 10px; }
.dd.is-open > .dd__toggle [data-i], .dd:hover > .dd__toggle [data-i] { transform: rotate(180deg); }
.dd__toggle .tb-ico { width: 13px; height: 13px; margin-right: 2px; transform: none !important; }
.dd__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
  min-width: 240px; padding: 8px 0; background: #fff; border-radius: 4px;
  box-shadow: 0 12px 40px rgba(20, 25, 35, .12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
  z-index: 80;
}
.dd__menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.dd:hover > .dd__menu, .dd.is-open > .dd__menu { opacity: 1; visibility: visible; transform: none; }
.dd__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px; font-size: 14px; font-weight: 500; color: #4b4f55; white-space: nowrap;
}
.dd__menu a [data-i] { width: 16px; height: 16px; color: #8a8e95; }
.dd__menu a:hover { color: var(--gold); background: #FBF8F3; }
.dd__sep { display: block; height: 1px; margin: 6px 20px; background: var(--line-2); }
.dd__menu a [data-i="win"], .dd__menu a [data-i="apple"] { color: #5b5f66; }
.dd__menu a.dd__note { padding: 0 20px 10px 46px; margin-top: -6px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.dd__menu a.dd__note:hover { background: none; color: var(--gold-700); text-decoration: underline; }
.dd__menu a:hover [data-i] { color: var(--gold); }

/* Header card */
.site-header { position: relative; z-index: 50; height: 70px; }
.header-card {
  position: relative; height: 70px; display: flex; align-items: center;
  padding: 0 42px 0 60px; background: #fff; border-radius: 4px;
  box-shadow: 0 6px 26px rgba(20, 25, 35, .06);
  transition: box-shadow .25s;
}
.header-card.is-fixed {
  position: fixed; top: 14px; left: 0; right: 0; margin-inline: auto;   /* no translate: it would trap the fixed mobile nav inside the card */
  width: min(var(--container) - 2 * var(--gutter), 100% - 2 * var(--gutter));
  box-shadow: 0 10px 40px rgba(20, 25, 35, .12);
  animation: dropIn .35s var(--ease);
}
@keyframes dropIn { from { transform: translateY(-110%); } to { transform: none; } }
.logo img { height: 42px; width: auto; }
.trial {
  margin-left: 56px; padding-left: 20px; border-left: 1px solid var(--line);
  height: 30px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 500; color: #50545a;
}
.trial [data-i] { width: 13px; height: 13px; }
.trial:hover { color: var(--gold); }

.nav { margin-left: auto; display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 36px; }
.nav__item { position: static; }
.nav__item.dd { position: relative; }
.nav__item--mega { position: static; }
.nav__link, .nav .dd__toggle {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-size: 14.5px; font-weight: 500; color: #474a50; height: 70px;
}
.nav__link::after, .nav .dd__toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 2px;
  background: var(--yellow); border-radius: 2px; transform: scaleX(0); transition: transform .2s var(--ease);
}
.nav__link.is-active::after, .nav .is-active > .dd__toggle::after,
.nav .dd:hover > .dd__toggle::after, .nav .dd.is-open > .dd__toggle::after { transform: scaleX(1); }
.nav .dd__menu { top: calc(100% - 4px); left: 0; translate: -18px 0; }
.nav__tools { display: flex; align-items: center; margin-left: 28px; height: 30px; padding-left: 22px; border-left: 1px solid var(--line); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #474a50; }
.icon-btn [data-i] { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--gold); }
.lang { margin-left: 24px; }
.lang .dd__toggle { font-size: 14.5px; font-weight: 500; gap: 6px; color: #474a50; height: auto; }
.lang .dd__toggle::after { display: none; }
.lang .dd__toggle [data-i] { width: 15px; height: 15px; transform: none !important; }
.lang .dd__menu { left: auto; right: 0; translate: 0 0; min-width: 190px; top: calc(100% + 22px); }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 4px; padding: 30px 30px 18px;
  box-shadow: 0 16px 50px rgba(20, 25, 35, .14);
  display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 30px; column-gap: 30px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
.mega::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav__item--mega:hover > .mega, .nav__item--mega.is-open > .mega { opacity: 1; visibility: visible; transform: none; }
.mega__group h4 { font-family: var(--f-ui); font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.mega__group h4 a:hover { color: var(--gold); }
.mega__group a.mega__link { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; font-weight: 500; color: #4b4f55; }
.mega__group a.mega__link [data-i] { width: 16px; height: 16px; color: #8a8e95; }
.mega__group a.mega__link:hover, .mega__group a.mega__link:hover [data-i] { color: var(--gold); }

.burger { display: none; margin-left: auto; }

/* Search overlay */
.search {
  position: fixed; inset: 0; z-index: 200; background: rgba(245, 246, 248, .97);
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.search.is-open { opacity: 1; visibility: visible; }
.search form { width: min(720px, 100% - 48px); display: flex; border-bottom: 2px solid var(--ink); }
.search input { flex: 1; border: 0; background: transparent; font: 500 clamp(22px, 4vw, 40px)/1.3 var(--f-head); padding: 14px 0; color: var(--ink); outline: none; }
.search__close { position: absolute; top: 28px; right: 28px; }
.search__results { width: min(720px, 100% - 48px); max-height: 56vh; overflow: auto; margin-top: 18px; }
.search__results ul { list-style: none; margin: 0; padding: 0; }
.search__results a { display: block; padding: 14px 16px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
.search__results a:hover, .search__results a:focus { background: var(--gold-50); outline: none; }
.search__results b { display: block; font-weight: 600; font-size: 17px; margin-bottom: 3px; }
.search__results span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.search__results mark { background: none; color: var(--gold-700); font-weight: 600; }
.search__msg { color: var(--muted); font-size: 15px; padding: 10px 16px; margin: 0; }

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero { padding: 34px 0 0; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.hero__copy { padding-top: 0; }
.hero h1 {
  font-family: var(--f-head); font-weight: 500; font-size: clamp(38px, 4.5vw, 62px);
  line-height: 1.1; letter-spacing: -.02em; margin: 24px 0 32px; color: var(--ink);
}
.hero h1 .gold { color: var(--gold); }
.hero__lead { font-family: var(--f-head); font-weight: 400; font-size: 19.5px; line-height: 1.65; color: var(--body); max-width: 500px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__media { text-align: center; padding-top: 12px; }
.hero__media h2 { font-family: var(--f-ui); font-weight: 600; font-size: 24px; color: var(--ink); }
.rotator { color: var(--gold); display: inline-block; min-width: 7ch; text-align: left; }
.rotator::after { content: ""; display: inline-block; width: 2px; height: .9em; background: var(--gold); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__media p { margin: 22px 0 22px; font-size: 16px; font-weight: 500; color: #5a5e64; }
.hero__media p a { color: var(--teal); font-weight: 600; }
.video {
  position: relative; display: block; width: 100%; aspect-ratio: 650 / 365; overflow: hidden; background: #1c1c1c; border-radius: var(--r-lg);
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video:hover img { transform: scale(1.03); }
.video__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 92px; height: 92px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85);
  display: grid; place-items: center; color: #fff;
}
.video__play [data-i] { width: 30px; height: 30px; margin-left: 4px; }
.video__play::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }

/* Swoosh dividers */
.swoosh { display: block; width: 100%; height: clamp(80px, 11vw, 170px); margin-top: 28px; }

/* Video modal */
.modal { position: fixed; inset: 0; z-index: 220; background: rgba(10, 12, 14, .85); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box { width: min(960px, 100% - 40px); aspect-ratio: 16/9; background: #000; }
.modal__box iframe { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: 22px; right: 22px; color: #fff; }

/* ==========================================================================
   Partner / certification marquee
   ========================================================================== */
.marquee { padding: 70px 0 60px; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: scroll-x 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.marquee__item { width: 220px; height: 64px; display: grid; place-items: center; filter: grayscale(1); opacity: .62; transition: opacity .2s, filter .2s; }
.marquee__item:hover { opacity: 1; filter: none; }
.marquee__item img { max-height: 62px; width: auto; }
/* Neutral text badges — swap for your own licensed badge files */
.badge { font-family: var(--f-ui); font-weight: 600; color: #333; text-align: center; line-height: 1.1; }
.badge--box { border: 2px solid #555; border-radius: 6px; padding: 6px 8px 8px; font-size: 13px; }
.badge--box small { display: block; height: 6px; background: #888; border-radius: 2px; margin-top: 4px; }
.badge--hex { width: 48px; height: 54px; background: #222; color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; font-size: 8px; letter-spacing: .02em; }
.badge--word { font-family: var(--f-head); font-weight: 400; font-size: 20px; color: #999; letter-spacing: .02em; }
.badge--pill { font-size: 10px; border: 1.5px solid #666; border-radius: 12px; padding: 4px 10px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 104px 0; }
.h-section { font-family: var(--f-head); font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.18; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.lead { font-family: var(--f-head); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--body); }
.center { text-align: center; }

/* Core values cards */
.values__title { max-width: 640px; margin: 0 0 52px 4px; }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.vcard { background: linear-gradient(180deg, #F7F7F8 0%, #fff 100%); border-radius: var(--r-lg); padding: 40px 40px 34px; display: flex; flex-direction: column; }
.vcard__img { aspect-ratio: 336 / 184; overflow: hidden; margin-bottom: 26px; }
.vcard__img img { width: 100%; height: 100%; object-fit: cover; }
.vcard h3 { font-family: var(--f-head); font-weight: 600; font-size: 25px; margin-bottom: 18px; }
.vcard p { font-family: var(--f-head); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--body); margin-bottom: 44px; }
.vcard .btn { align-self: flex-start; margin-top: auto; }

/* What we find important */
.important { position: relative; overflow: hidden; }
.important::before {
  content: ""; position: absolute; right: -10%; top: 0; width: 70%; height: 100%;
  background: linear-gradient(160deg, transparent 45%, #F4F5F7 45%); pointer-events: none;
}
.important__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 2.4fr; gap: 40px; align-items: end; }
.important__intro { padding-bottom: 180px; }
.important__intro .h-section { margin-bottom: 18px; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature { background: linear-gradient(180deg, #FAFAFB, rgba(250,250,251,.6)); border-radius: var(--r-lg); padding: 40px; }
.feature__icon { width: 66px; height: 66px; color: #C9CCD2; margin-bottom: 16px; }
.feature__icon svg { width: 100%; height: 100%; fill: #EBECEF; stroke: #C9CCD2; stroke-width: 1.2; }
.feature h3 { font-family: var(--f-head); font-weight: 600; font-size: 25px; margin-bottom: 10px; }
.feature p { font-family: var(--f-head); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--body); margin-bottom: 26px; }

/* Mission + stats */
.mission .h-section { margin-bottom: 14px; }
.mission .lead { max-width: 1300px; margin-inline: auto; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; text-align: center; }
.stat__num { font-family: var(--f-head); font-weight: 600; font-size: clamp(54px, 5.4vw, 78px); line-height: 1.1; color: var(--gold); letter-spacing: -.02em; }
.stat__label { font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 8px; }

/* Products bento */
.products__head { max-width: 640px; margin: 0 auto 36px; }
.products__head .h-section { margin-bottom: 18px; }
.bento {
  width: min(1040px, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-auto-rows: minmax(170px, auto); gap: 14px 20px;
}
.pcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 36px 26px 26px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); min-height: 350px;
}
.pcard__icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 18px; }
.pcard h3 { font-family: var(--f-head); font-weight: 600; font-size: 24px; margin-bottom: 18px; }
.pcard p { font-weight: 500; font-size: 16px; line-height: 1.8; color: #5a5e64; max-width: 260px; }
.pcard .link-gold { margin-top: auto; padding-top: 30px; }
.pcard--dark { background: linear-gradient(180deg, var(--dark-1), var(--dark-2)); color: #fff; border: 0; }
.pcard--dark h3 { color: #fff; }
.pcard--dark p { color: rgba(255,255,255,.92); }
.pcard--dark .pcard__icon { color: #E7E9EC; }
.pcard--yellow { background: linear-gradient(160deg, #F2A33A 0%, var(--gold) 100%); color: #fff; border: 0; }
.pcard--yellow h3, .pcard--yellow p, .pcard--yellow .link-gold { color: #fff; }
.pcard--yellow .pcard__icon { color: #fff; }
.pcard--light .pcard__icon { color: var(--gold); }
.pcard--connect { grid-column: 3 / 5; }
.pcard--connect img { position: absolute; right: 30px; top: 50px; width: 150px; }
.pcard--cloud { grid-column: 1 / 3; grid-row: 2 / 4; }
.pcard--cloud p { max-width: 440px; }
.pcard--cloud img { width: 82%; margin: 30px auto 0; }
.pcard--vault { grid-column: 1; }
.pcard--backup { grid-column: 2; margin-top: -8px; }
.pcard--email { grid-column: 3; grid-row: 2; }
.pcard--servers { grid-column: 4; grid-row: 2; }
.pcard--hosting { grid-column: 3; grid-row: 3; }
.pcard--licenses { grid-column: 4; grid-row: 3; }
.pcard--email, .pcard--licenses { background: linear-gradient(180deg, #F7F7F8, #fff); }

/* All-in-1 */
.allin { text-align: center; padding-top: 70px; }
.allin h2 { font-family: var(--f-head); font-weight: 500; font-size: clamp(24px, 2.3vw, 32px); margin-bottom: 18px; }
.allin p { font-weight: 600; color: #5a5e64; max-width: 540px; margin: 0 auto; line-height: 1.85; }
.allin__icons { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 30px 0 26px; color: var(--ink); }
.allin__icons [data-i]:not(.plus) { width: 42px; height: 42px; color: var(--gold); }
.allin__icons [data-i]:not(.plus) svg { fill: #F3D9AE; }
.allin__icons .plus { width: 18px; height: 18px; }

/* Testimonials */
.reviews { position: relative; overflow: hidden; padding-top: 110px; }
.reviews::before { content: ""; position: absolute; left: 12%; top: 300px; width: 520px; height: 520px; border-radius: 50%; background: #F7F7F7; }
.reviews::after { content: ""; position: absolute; right: -120px; top: 40px; width: 360px; height: 360px; border-radius: 50%; background: #F9F9F9; }
.reviews > * { position: relative; z-index: 1; }
.reviews .h-section { margin: 26px 0 16px; }
.reviews .lead { max-width: 600px; margin-inline: auto; }
.slider { position: relative; margin-top: 70px; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .55s var(--ease); }
.slide { flex: 0 0 calc(100% / 3); margin: 0; padding: 0 22px; text-align: center; }
.slide blockquote { margin: 0 0 20px; font-family: var(--f-head); font-weight: 400; font-size: 17px; line-height: 1.55; color: #5e6269; }
.stars { display: inline-flex; gap: 6px; padding: 7px 14px; background: var(--gold-50); color: #F0A92A; }
.stars [data-i] { width: 15px; height: 15px; }
.slide cite { display: block; font-style: normal; font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 18px; }
.slide small { display: block; font-family: var(--f-head); font-weight: 400; font-size: 16px; color: var(--body); }
.slider__nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 44px; }
.slider__nav button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.slider__nav button [data-i] { width: 18px; height: 18px; }
.slider__nav button:hover { color: var(--gold-700); border-color: #E9C089; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.slider__source { margin-top: 18px; font-size: 14px; }
.slider__source a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: #FBFBFB; padding: 110px 0 36px; margin-top: 60px; }
.footer__grid { display: grid; grid-template-columns: 1.95fr 1fr 1fr 1.05fr 1fr; gap: 20px; }
.footer__brand img { height: 64px; width: auto; margin-bottom: 30px; }
.contact-item { display: flex; gap: 18px; margin-bottom: 24px; }
.contact-item__icon { width: 32px; height: 32px; color: var(--gold); flex: none; }
.contact-item__icon svg { fill: #F6E1BE; }
.contact-item strong { display: block; font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.contact-item span, .contact-item a { font-size: 16px; font-weight: 500; color: #555960; }
.contact-item a.tel { color: var(--teal); }
.footer h4 { font-size: 18px; font-weight: 600; margin-bottom: 22px; }
.footer__col a { display: block; font-size: 16px; color: #6a6e75; line-height: 1.5; padding: 7px 0; }
.footer__col a:hover { color: var(--gold); }
.footer__bottom { display: grid; grid-template-columns: 1fr auto 330px; align-items: end; gap: 22px; margin-top: 50px; }
.footer__links { display: flex; gap: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.footer__links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #4d5157; }
.footer__links a:hover { color: var(--gold); }
.copyright { font-size: 16px; color: var(--body); padding-top: 14px; }
.iso-badge img { width: 88px; }
.social h5 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #4d5157; }
.social__icons { display: flex; gap: 16px; }
.social__icons a { width: 30px; height: 30px; color: #6a6e75; }
.social__icons a [data-i] { width: 30px; height: 30px; }
.social__icons a:hover { color: var(--gold); }

/* Floating chat */
.chat-fab {
  position: fixed; right: 36px; bottom: 32px; z-index: 90; width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(232, 145, 38, .45); transition: transform .2s var(--ease);
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab [data-i] { width: 26px; height: 26px; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-hero { position: relative; padding: 80px 0 330px; text-align: center; overflow: hidden; background: var(--bg-soft); }
.about-hero__swoosh { position: absolute; left: 0; bottom: -2px; width: 100%; height: 72%; }
.about-hero__inner { position: relative; z-index: 2; }
.about-hero h1 {
  font-family: var(--f-head); font-weight: 600; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.22;
  letter-spacing: -.01em; max-width: 760px; margin: 26px auto 34px;
}
.about-hero h1 .hl { background-size: 100% .12em; background-position: 0 96%; }
.about-hero p { font-family: var(--f-head); font-weight: 400; font-size: 19.5px; line-height: 1.65; color: var(--body); max-width: 520px; margin-inline: auto; }

.about-intro { padding: 60px 0 40px; text-align: center; }
.about-intro .h-section { margin-bottom: 26px; }
.about-intro p { font-family: var(--f-head); font-weight: 400; font-size: 20px; line-height: 1.8; color: var(--body); max-width: 660px; margin: 0 auto 32px; }
.about-intro .hl { background-size: 100% 2px; background-position: 0 100%; background-image: linear-gradient(var(--gold), var(--gold)); }

.photo-strip { padding: 110px 0 60px; overflow: hidden; }
.photo-strip__track { display: flex; gap: 70px; width: max-content; animation: scroll-x 46s linear infinite; padding: 10px 0 40px; }
.photo-strip__track img { width: 500px; height: 272px; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 36px rgba(20, 25, 35, .14); }

.award { padding: 80px 0 40px; }
.award__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: min(1180px, 100%); margin-inline: auto; }
.award h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(34px, 3.3vw, 50px); line-height: 1.18; letter-spacing: -.01em; margin-bottom: 26px; }
.award p { font-family: var(--f-head); font-weight: 400; font-size: 19px; line-height: 1.7; color: var(--body); max-width: 520px; }
.award img { width: min(320px, 100%); margin-inline: auto; }

.vision { padding: 110px 0 80px; }
.vision__grid { display: grid; grid-template-columns: .9fr 2fr; gap: 50px; align-items: start; }
.tabs__list { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.tabs__tab { padding: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--muted); position: relative; }
.tabs__tab[aria-selected="true"] { color: var(--ink); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.tabs__panel { padding-top: 32px; font-size: 16px; line-height: 1.85; color: var(--body); }
.tabs__panel[hidden] { display: none; }
.tabs__panel a { color: var(--gold); font-weight: 600; }

.divider { border: 0; border-top: 1px dashed #E4E5E8; margin: 0; }

.green { padding: 80px 0 60px; }
.green__grid { display: grid; grid-template-columns: 1fr 1.18fr; gap: 70px; align-items: center; }
.green__copy { text-align: center; }
.green h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(36px, 3.4vw, 52px); letter-spacing: -.01em; margin-bottom: 24px; }
.green p { font-family: var(--f-head); font-weight: 400; font-size: 20px; line-height: 1.6; color: var(--body); max-width: 500px; margin: 0 auto 26px; }
.green__img { border-radius: 4px; overflow: hidden; aspect-ratio: 650 / 434; }
.green__img img { width: 100%; height: 100%; object-fit: cover; }
/* scroll-linked word reveal */
.reveal-words .w { transition: color .25s linear; }
.reveal-words .w.dim { color: #B9BCC2; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .nav__list { gap: 24px; }
  .trial { margin-left: 28px; }
  .header-card { padding: 0 26px 0 32px; }
  .footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}

@media (max-width: 1080px) {
  .topbar__right .status, .topbar__demo { display: none; }
  .topbar__inner { justify-content: flex-end; }
  .burger { display: grid; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 88vw);
    background: #fff; flex-direction: column; align-items: stretch; padding: 80px 26px 30px;
    overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s;
    box-shadow: -20px 0 50px rgba(0,0,0,.12); z-index: 120;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease); }
  .nav__close { position: absolute; top: 18px; right: 18px; display: grid; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link, .nav .dd__toggle { height: auto; padding: 14px 0; width: 100%; justify-content: space-between; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav__link::after, .nav .dd__toggle::after { display: none; }
  .nav .dd__menu, .mega {
    position: static; translate: none; transform: none; box-shadow: none; padding: 4px 0 8px 10px;
    display: none; opacity: 1; visibility: visible; min-width: 0;
  }
  .nav .dd:hover > .dd__menu { display: none; }
  .nav .dd.is-open > .dd__menu, .nav__item--mega.is-open > .mega { display: block; }
  .nav__item--mega:hover > .mega { display: none; }
  .nav__item--mega.is-open:hover > .mega { display: block; }
  .mega__group { margin: 10px 0; }
  .mega__group h4 { margin-bottom: 4px; }
  .nav__tools { margin: 20px 0 0; padding: 0; border: 0; }
  .lang .dd__menu { position: static; display: none; }
  .lang.is-open .dd__menu { display: block; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .2s; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .values__grid { grid-template-columns: 1fr 1fr; }
  .important__grid { grid-template-columns: 1fr; }
  .important__intro { padding-bottom: 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > .pcard { grid-column: auto !important; grid-row: auto !important; margin-top: 0; }
  .pcard--connect, .pcard--cloud { grid-column: 1 / -1 !important; }
  .slide { flex-basis: 50%; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { grid-template-columns: 1fr; align-items: start; }
  .award__grid, .vision__grid, .green__grid { grid-template-columns: 1fr; }
}
@media (min-width: 1081px) { .nav__close, .nav-backdrop { display: none; } }

@media (max-width: 680px) {
  .topbar { display: none; }
  .site-header { padding-top: 12px; height: 82px; }
  .header-card { padding: 0 14px 0 20px; }
  .trial { display: none; }
  .logo img { height: 36px; }
  .hero h1 { margin: 20px 0 24px; }
  .values__grid, .features, .bento, .stats { grid-template-columns: 1fr; }
  .stats { gap: 30px; }
  .vcard, .feature { padding: 28px; }
  .pcard--connect img { position: static; width: 140px; margin-top: 20px; }
  .slide { flex-basis: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .chat-fab { right: 18px; bottom: 18px; width: 56px; height: 56px; }
  .about-hero { padding-bottom: 220px; }
  .photo-strip__track img { width: 300px; height: 180px; }
  .photo-strip__track { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track, .photo-strip__track { animation: none; }
}

/* ==========================================================================
   Product pages (vBoxxCloud / vBoxxConnect / vBoxxVault)
   Combines the vBoxx site look with the cleaner landing-page components
   ========================================================================== */
:root { --r-lg: 16px; --r-sm: 10px; --line-2: rgba(228, 226, 221, .75); --tint: #F7F6F3; --gold-tint: #FDF3E8; }

.eyebrow { display: inline-block; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--gold-700); background: var(--gold-50); padding: 4px 14px; border-radius: 999px; margin-bottom: 16px; }
.sec-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sec-head .h-section { margin-bottom: 14px; }
.sec-head--left { margin-left: 0; text-align: left; }

/* Hero */
.p-hero { position: relative; padding: 96px 0 0; text-align: center; overflow: hidden; }
.p-hero h1 { font-family: var(--f-head); font-weight: 700; font-size: clamp(36px, 4.8vw, 66px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; max-width: 1000px; margin: 0 auto 22px; }
.p-hero h1 span { color: var(--gold); }
.p-hero__sub { font-family: var(--f-head); font-weight: 500; font-size: clamp(19px, 1.8vw, 24px); color: var(--ink); margin-bottom: 14px; }
.p-hero__lead { font-family: var(--f-head); font-weight: 400; font-size: 19px; line-height: 1.65; color: var(--body); max-width: 720px; margin: 0 auto; }
.p-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.p-hero__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; text-align: left; position: relative; z-index: 2; }
.p-hero__cards--4 { grid-template-columns: repeat(4, 1fr); }
.p-hero .swoosh { margin-top: -70px; position: relative; z-index: 1; }
.p-hero--diag::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42rem 26rem at 12% 0%, rgba(232, 145, 38, .13), transparent 70%),
    radial-gradient(36rem 28rem at 92% 30%, rgba(120, 150, 200, .10), transparent 70%);
}

.fcard { background: #fff; border-radius: var(--r-lg); padding: 34px 32px 30px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.fcard__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); margin-bottom: 20px; }
.fcard__icon [data-i] { width: 24px; height: 24px; }
.fcard h3 { font-family: var(--f-head); font-weight: 600; font-size: 22px; margin-bottom: 10px; }
.fcard p { font-family: var(--f-head); font-weight: 400; font-size: 16.5px; line-height: 1.6; color: var(--body); }

/* USP strip (from the domain landing page) */
.usp { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--tint); border-radius: var(--r-lg); }
.usp > div { padding: 24px 22px 22px; border-left: 1px solid var(--line-2); }
.usp > div:first-child { border-left: 0; }
.usp [data-i] { width: 24px; height: 24px; color: var(--gold); margin-bottom: 12px; display: block; }
.usp b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.usp span { display: block; font-size: 13.5px; color: var(--body); margin-top: 3px; line-height: 1.45; }

/* Split: text + media */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.split--rev > :first-child { order: 2; }
.checklist { display: grid; gap: 18px; margin-top: 28px; }
.checklist li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.checklist__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); }
.checklist__icon [data-i] { width: 22px; height: 22px; }
.checklist b { display: block; font-size: 17px; font-weight: 600; padding-top: 2px; }
.checklist small { display: block; font-family: var(--f-head); font-weight: 400; font-size: 15.5px; color: var(--body); }
.media-frame { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(160deg, #F4F5F7, #E9EAED); aspect-ratio: 16 / 10; box-shadow: 0 24px 60px rgba(20,25,35,.12); }
.media-frame img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.media-frame .video__play { border-color: var(--gold); color: var(--gold); background: rgba(255,255,255,.85); }
.media-frame .video__play::before { border-color: rgba(232, 145, 38,.4); }

/* All-in-1 band (gold) */
.bundle { background: linear-gradient(135deg, var(--gold), #F2A33A); color: #fff; border-radius: var(--r-lg); padding: 44px 40px; text-align: center; }
.bundle h2 { font-family: var(--f-head); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); margin-bottom: 14px; }
.bundle p { font-weight: 600; color: #2b2b2b; max-width: 560px; margin: 0 auto; line-height: 1.8; }
.bundle .allin__icons [data-i]:not(.plus) { color: #fff; }
.bundle .allin__icons [data-i]:not(.plus) svg { fill: rgba(255,255,255,.35); }
.bundle .btn { background: var(--gold-tint); color: var(--ink); box-shadow: none; }
.bundle .btn:hover { background: #fff; }

/* Tabbed feature panel */
.ftabs__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 34px; border-bottom: 1px solid var(--line); margin: 0 auto 44px; width: fit-content; max-width: 100%; }
.ftabs__list [role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 16px; font-size: 16.5px; font-weight: 600; color: #50545a; position: relative; }
.ftabs__list [role="tab"] [data-i] { width: 18px; height: 18px; }
.ftabs__list [role="tab"][aria-selected="true"] { color: var(--gold); }
.ftabs__list [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.ftabs__panel { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.ftabs__panel[hidden] { display: none; }
.ftabs__panel img { width: 100%; max-width: 520px; margin-inline: auto; }
.ftabs__panel h3 { font-family: var(--f-head); font-weight: 600; font-size: 26px; margin-bottom: 12px; }
.ftabs__panel p { font-family: var(--f-head); font-weight: 400; font-size: 17.5px; line-height: 1.75; color: var(--body); }
.ftabs__panel:not([hidden]) { animation: fadeIn .35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Icon grid (why choose / benefits) */
.igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.igrid__item [data-i].ig-icon { width: 54px; height: 54px; padding: 14px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); margin-bottom: 18px; }
.igrid__item h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.igrid__item p { font-family: var(--f-head); font-weight: 400; font-size: 16.5px; line-height: 1.65; color: var(--body); }
.igrid--center { text-align: center; }
.igrid--center [data-i].ig-icon { margin-inline: auto; }

/* CTA band (gold, text left + button right) */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: linear-gradient(135deg, var(--gold), #F2A33A); color: #fff; border-radius: var(--r-lg); padding: 40px 44px; box-shadow: var(--shadow-gold); }
.cta-band p { font-family: var(--f-head); font-weight: 400; font-size: 18px; }
.cta-band strong { display: block; font-family: var(--f-head); font-weight: 600; font-size: clamp(19px, 1.7vw, 22px); margin-top: 6px; }
.cta-band .btn { background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cta-band .btn:hover { background: var(--gold-tint); }

/* Dark block (from the landing page) */
.dark-block { background: #464A53; color: #fff; border-radius: var(--r-lg); border-top: 4px solid var(--gold); padding: 56px 56px 52px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.dark-block h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.15; letter-spacing: -.01em; }
.dark-block p { font-family: var(--f-head); font-weight: 400; font-size: 18px; line-height: 1.75; color: #C9CED5; }
.dark-block p + p { margin-top: 18px; }
.dark-block--links { align-items: start; }
.dark-links { display: grid; grid-template-columns: 1fr; }
.dark-links a { position: relative; display: block; padding: 20px 34px 20px 0; border-top: 1px solid #3D444E; }
.dark-links a:first-child { border-top: 0; padding-top: 0; }
.dark-links b { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin-bottom: 4px; transition: color .15s; }
.dark-links b [data-i] { width: 22px; height: 22px; color: var(--gold); }
.dark-links span { display: block; font-size: 15px; color: #9CA3AF; line-height: 1.55; padding-left: 32px; }
.dark-links .go { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: #6C757D; transition: transform .2s, color .2s; }
.dark-links a:first-child .go { translate: 0 calc(-50% - 10px); }
.dark-links a:hover b, .dark-links a:hover .go { color: var(--gold); }
.dark-links a:hover .go { transform: translateX(3px); }

/* Pricing comparison table */
.compare { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 64px 70px 56px; }
.ptable-wrap { overflow-x: auto; margin-top: 40px; }
.ptable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ptable thead th { background: #fff; box-shadow: 0 6px 20px rgba(20,25,35,.06); padding: 22px 24px; font-size: 18px; font-weight: 600; color: #6a6e75; text-align: center; position: sticky; top: 0; }
.ptable thead th:first-child { text-align: left; border-radius: 6px 0 0 6px; }
.ptable thead th:last-child { color: var(--gold); border-radius: 0 6px 6px 0; }
.ptable thead th small { display: block; font-size: 12px; font-weight: 600; color: var(--gold); margin-top: 2px; }
.ptable tbody th { text-align: left; font-size: 17px; font-weight: 600; padding: 24px 24px; }
.ptable tbody td { text-align: center; padding: 24px; font-family: var(--f-head); font-size: 17px; color: #555; }
.ptable tbody td:last-child { color: var(--gold); font-weight: 500; }
.ptable tbody tr { border-bottom: 1px solid var(--line-2); }
.ptable tbody tr:hover { background: rgba(255,255,255,.7); }
.ptable .yes, .ptable .no { display: inline-flex; width: 18px; height: 18px; }
.ptable .yes { color: var(--online); }
.ptable .no { color: #D9534F; }
.compare__cta { text-align: center; margin-top: 34px; }

/* FAQ accordion */
.faq { display: grid; gap: 10px; max-width: 1340px; margin-inline: auto; }
.faq details { background: #fff; border-radius: 12px; border: 1px solid var(--line-2); box-shadow: none; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary [data-i] { width: 18px; height: 18px; color: var(--gold); transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary [data-i] { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq__body { padding: 0 22px 22px; font-family: var(--f-head); font-weight: 400; font-size: 16.5px; line-height: 1.75; color: var(--body); max-width: 900px; }
.faq__body p + p { margin-top: 12px; }
.faq__body a { color: var(--gold); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Help cards (3 columns with button) */
.help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.help__card { background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); border-radius: var(--r-lg); padding: 36px 30px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.help__card [data-i].ig-icon { width: 56px; height: 56px; color: var(--gold); margin-bottom: 18px; }
.help__card h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.help__card p { font-family: var(--f-head); font-weight: 400; color: var(--body); margin-bottom: 24px; }
.help__card .btn { margin-top: auto; }

/* Remote section: big statement + 2x2 cards */
.remote { background: #FAFAFA; }
.remote__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 50px; align-items: center; }
.remote h2 { font-family: var(--f-head); font-weight: 400; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.22; margin: 22px 0 26px; }
.remote h2 b { font-weight: 600; }
.remote__icon { width: 52px; height: 52px; color: var(--gold); }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ocard { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 34px 34px 30px; transition: border-color .2s, transform .2s var(--ease); }
.ocard:hover { border-color: #F2D7A6; transform: translateY(-2px); }
.ocard h3 { font-family: var(--f-head); font-weight: 600; font-size: 22px; line-height: 1.3; margin-bottom: 12px; }
.ocard p { font-family: var(--f-head); font-weight: 400; font-size: 15.5px; line-height: 1.75; color: var(--body); }

/* Features + side list */
.feat-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.side-list { background: #fff; border-radius: var(--r-lg); padding: 30px 32px; border: 1px solid var(--line-2); box-shadow: var(--shadow); display: grid; gap: 16px; }
.side-list li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; }
.side-list [data-i] { width: 22px; height: 22px; color: var(--gold); }

/* Dedicated instance */
.dedicated { background: var(--gold-tint); border: 1px solid #F5E2BD; border-radius: var(--r-lg); padding: 40px 40px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.dedicated h3 { font-family: var(--f-head); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 12px; }
.dedicated p { font-family: var(--f-head); font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--body); }
.ticks { display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-size: 16px; color: #3f4247; }
.ticks [data-i] { width: 17px; height: 17px; color: var(--gold); }

/* Steps (a real sequence, so numbered) */
.steps { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 30px; }
.step { background: var(--bg-card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 40px 28px; text-align: center; position: relative; }
.step__num { width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); font-family: var(--f-head); font-size: 26px; font-weight: 400; }
.step h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.step p { font-family: var(--f-head); font-weight: 400; color: var(--body); }
.steps .step + .step::before { content: ""; position: absolute; left: -31px; top: 67px; width: 30px; height: 1px; background: #E2C58F; }

/* Price row */
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.price-row h2 { font-family: var(--f-head); font-weight: 500; font-size: 32px; margin-bottom: 14px; }
.price-row p { font-family: var(--f-head); font-weight: 400; font-size: 18px; line-height: 1.75; color: var(--body); max-width: 620px; }
.price { text-align: right; }
.price__num { font-family: var(--f-head); font-weight: 600; font-size: 58px; line-height: 1; letter-spacing: -.02em; }
.price__num sup { font-size: .4em; vertical-align: .9em; margin-left: 2px; }
.price__unit { font-weight: 600; font-size: 15px; color: var(--body); margin: 6px 0 20px; }

/* Comparison promo card */
.promo { max-width: 880px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 80px 30px; text-align: center; }
.promo [data-i] { width: 64px; height: 64px; color: var(--gold); margin-bottom: 18px; }
.promo h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 8px; }
.promo p { font-family: var(--f-head); font-weight: 400; font-size: 18px; color: var(--body); margin-bottom: 26px; }
.promo .btn { background: var(--gold-tint); color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.06); }

.section--tint { background: var(--bg-soft); }
.section--tight { padding: 60px 0; }

@media (max-width: 1080px) {
  .p-hero__cards, .p-hero__cards--4 { grid-template-columns: 1fr 1fr; }
  .usp { grid-template-columns: repeat(3, 1fr); }
  .usp > div:nth-child(4) { border-left: 0; }
  .usp > div:nth-child(n+4) { border-top: 1px solid var(--line-2); }
  .split, .ftabs__panel, .dark-block, .remote__grid, .feat-split, .dedicated, .price-row { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .igrid, .help { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps .step + .step::before { display: none; }
  .price { text-align: left; }
  .compare { padding: 44px 26px; }
  .dark-block { padding: 40px 32px; }
}
@media (max-width: 680px) {
  .p-hero { padding-top: 60px; }
  .p-hero__cards, .p-hero__cards--4, .igrid, .help, .cards2 { grid-template-columns: 1fr; }
  .p-hero .swoosh { margin-top: -30px; }
  .usp { grid-template-columns: 1fr 1fr; }
  .usp > div { border-left: 0 !important; border-top: 1px solid var(--line-2); }
  .usp > div:nth-child(-n+2) { border-top: 0; }
  .usp > div:nth-child(even) { border-left: 1px solid var(--line-2) !important; }
  .usp > div:last-child { grid-column: 1 / -1; border-left: 0 !important; }
  .cta-band, .bundle, .dedicated { padding: 30px 24px; }
  .dark-block { padding: 32px 22px; }
  .ftabs__list { gap: 4px 18px; }
}
@media (max-width: 680px) {
  .compare { padding: 34px 12px 30px; }
  .ptable { min-width: 0; }
  .ptable thead th, .ptable tbody th, .ptable tbody td { padding: 14px 8px; font-size: 14px; }
  .ptable thead th { font-size: 15px; }
  .ptable thead th small { display: none; }
}

/* ==========================================================================
   Forms (contact / internship) and contact page
   ========================================================================== */
.vform { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px 18px; }
.vform .field { grid-column: span 12; display: flex; flex-direction: column; gap: 7px; }
.vform .field--6 { grid-column: span 6; }
.vform .field--4 { grid-column: span 4; }
.vform .field--8 { grid-column: span 8; }
.vform label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.vform label .opt { font-weight: 500; color: var(--muted); }
.vform input, .vform select, .vform textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: #fff; width: 100%;
  border: 1px solid #D9DCE1; border-radius: 6px; padding: 13px 14px; transition: border-color .15s, box-shadow .15s;
}
.vform textarea { min-height: 170px; resize: vertical; }
.vform select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6269' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.vform input[type="file"] { padding: 10px; background: var(--bg-soft); }
.vform input:focus, .vform select:focus, .vform textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 145, 38,.2); }
.vform [aria-invalid="true"] { border-color: #C9302C; }
.vform .hint { font-size: 13px; color: var(--muted); }
.field__err { font-size: 13.5px; font-weight: 500; color: #C9302C; }
.vform .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vform__foot { grid-column: span 12; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vform__foot small { font-size: 13.5px; color: var(--muted); max-width: 520px; }
.vform__foot small a { color: var(--gold-600); text-decoration: underline; }
.form-status { grid-column: span 12; font-weight: 500; font-size: 15px; outline: none; }
.form-status:empty { display: none; }
.form-status[data-kind="ok"] { background: #EAF6EC; color: #1E6B2E; border-radius: 6px; padding: 16px 18px; }
.form-status[data-kind="error"] { background: #FBECEB; color: #9E2420; border-radius: 6px; padding: 16px 18px; }
.vform.is-sent .field, .vform.is-sent .vform__foot { display: none; }

.form-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 44px 44px 40px; }
.form-card h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(24px, 2.3vw, 32px); margin-bottom: 8px; }
.form-card > p { font-family: var(--f-head); font-weight: 400; color: var(--body); margin-bottom: 28px; }

.company { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: stretch; }
.company__info h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 26px; }
.company__info dl { display: grid; gap: 24px; }
.company__info dt { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.p-hero .help { position: relative; z-index: 2; }
.p-hero .help .help__card { background: #fff; }
.company__info dd { margin: 0; font-family: var(--f-head); font-weight: 400; font-size: 16.5px; line-height: 1.7; color: #4f535a; }
.company__info dd a { color: var(--ink); font-weight: 500; }
.company__info dd a:hover { color: var(--gold); }
.map { border-radius: var(--r-lg); overflow: hidden; min-height: 420px; background: var(--bg-soft); display: grid; place-items: center; text-align: center; padding: 30px; }
.map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.map__consent p { font-family: var(--f-head); font-weight: 400; color: var(--body); max-width: 360px; margin: 0 auto 18px; }
.map.is-loaded { padding: 0; }

.thanks { padding: 120px 0 140px; text-align: center; }
.thanks [data-i].ig-icon { width: 72px; height: 72px; padding: 18px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); margin: 0 auto 26px; display: block; }
.thanks h1 { font-family: var(--f-head); font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); margin-bottom: 14px; }
.thanks p { font-family: var(--f-head); font-weight: 400; font-size: 18px; color: var(--body); max-width: 560px; margin: 0 auto 30px; }

@media (max-width: 1080px) {
  .company { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .vform .field--6, .vform .field--4, .vform .field--8 { grid-column: span 12; }
  .form-card { padding: 30px 20px 26px; }
}

/* ==========================================================================
   Converted pages (tools/el2html.py): generic layout on top of the components
   ========================================================================== */
.el-hero { padding-bottom: 90px; }
.el-hero .container > * + * { margin-top: 18px; }
.el-hero .el-text { font-family: var(--f-head); font-weight: 400; font-size: 19px; line-height: 1.65; color: var(--body); max-width: 760px; margin-inline: auto; }
.el-hero .el-cols { text-align: left; position: relative; z-index: 2; margin-top: 40px; }
.el-hero .el-cols .el-text { margin-inline: 0; }
.el-hero .btn { margin: 8px 4px 0; }
.el-hero .eyebrow { margin-bottom: 0; }
.el-sec .container > * + *, .el-col > * + *, .el-tabpanel > * + * { margin-top: 18px; }
.el-sec > .container > h2, .el-sec > .container > .eyebrow, .el-sec > .container > .el-text--lead { text-align: center; max-width: 820px; margin-inline: auto; }
.el-cols { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: 40px; align-items: center; }
.el-cols--cards { align-items: stretch; gap: 22px; }
.el-col { min-width: 0; }
.el-h3 { font-family: var(--f-head); font-weight: 600; font-size: 22px; line-height: 1.35; }
.el-text { font-family: var(--f-head); font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--body); }
.el-text--lead { font-size: 18.5px; }
.el-text p + p, .el-text ul, .el-text ol, .el-text h3, .el-text h4 { margin-top: 12px; }
.el-text ul { list-style: disc; padding-left: 22px; }
.el-text ol { list-style: decimal; padding-left: 22px; }
.el-text h2, .el-text h3, .el-text h4 { font-weight: 600; color: var(--ink); line-height: 1.35; }
.el-text h3 { font-size: 20px; } .el-text h4 { font-size: 18px; }
.el-text a { color: var(--gold-600); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.el-text strong { font-weight: 600; color: #3f4247; }
.el-text table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.el-text th, .el-text td { border-bottom: 1px solid var(--line-2); padding: 10px 8px; text-align: left; }
.el-feature { background: #fff; border-radius: var(--r-lg); padding: 30px 28px 26px; border: 1px solid var(--line-2); box-shadow: var(--shadow); height: 100%; text-align: left; }
.el-feature .fcard__icon { margin-bottom: 18px; }
.el-feature h3 { font-family: var(--f-head); font-weight: 600; font-size: 20px; line-height: 1.35; margin-bottom: 8px; }
.el-feature h3 a:hover { color: var(--gold); }
.el-feature p, .el-feature li { font-family: var(--f-head); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--body); }
.el-feature__img { max-height: 64px; width: auto; margin-bottom: 16px; }
.el-img { border-radius: var(--r-lg); margin-inline: auto; }
.ticks--inline { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.el-price { text-align: center; }
.el-price .price__num sup { font-size: .35em; }
.el-stat b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 46px; line-height: 1.1; color: var(--gold); }
.el-stat span { display: block; font-weight: 600; color: var(--body); margin-top: 6px; }
.el-card { display: grid; gap: 18px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px; height: 100%; transition: border-color .2s, transform .2s var(--ease); }
a.el-card:hover { border-color: #F2D7A6; transform: translateY(-2px); }
.el-card img { border-radius: 8px; width: 100%; max-height: 260px; object-fit: contain; }
.el-card h3 { font-family: var(--f-head); font-weight: 600; font-size: 20px; margin-bottom: 8px; }
.el-card p { font-family: var(--f-head); font-weight: 400; color: var(--body); }
.el-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--gold-600); }
.el-card__more [data-i] { width: 16px; height: 16px; }
.el-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.el-review { background: #fff; border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.el-review__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.el-review blockquote { font-family: var(--f-head); font-weight: 400; line-height: 1.7; color: #4f535a; }
.el-review figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.el-review figcaption b { color: var(--ink); }
.el-tabpanel[hidden] { display: none; }
.el-sec .ftabs__list { margin-top: 24px; }
.el-sec .cta-band, .el-sec .faq, .el-sec .ptable-wrap { margin-top: 28px; }
.section--dark { background: #464A53; color: #fff; }
.section--dark .h-section, .section--dark h3, .section--dark .el-text strong { color: #fff; }
.section--dark .el-text { color: #C9CED5; }
.section--dark .el-feature { background: rgba(255,255,255,.05); box-shadow: none; border-color: rgba(255,255,255,.1); }
.section--dark .el-feature p { color: #C9CED5; }
@media (max-width: 1080px) {
  .el-cols { grid-template-columns: 1fr 1fr; }
  .el-cols:not(.el-cols--cards) { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .el-cols, .el-cols--cards { grid-template-columns: 1fr; gap: 24px; }
  .el-hero { padding-bottom: 60px; }
}
.el-plan { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 34px 30px; text-align: center; height: 100%; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.el-plan > * + * { margin-top: 0 !important; }
.el-plan .ticks { text-align: left; margin: 10px auto 14px; }
.el-plan .btn { margin-top: auto; align-self: center; }
.el-plan .el-h3 { font-size: 21px; }
.el-plan .el-h3 + .el-text + .el-h3, .el-plan .el-h3:nth-of-type(2) { font-size: 34px; color: var(--gold); }
.el-cols:has(> .el-col > .el-plan) { align-items: stretch; }
.map.embed { min-height: var(--h, 600px); margin-top: 24px; }
.map.embed iframe { min-height: var(--h, 600px); }
.el-hero > .container { position: relative; z-index: 1; }
html, body { overflow-x: clip; }

/* ==========================================================================
   Blog (tools/blog.py)
   ========================================================================== */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card a { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.post-card a:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -20px rgba(23,28,38,.28); }
.post-card img, .post-card__ph { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--bg-soft); }
.post-card__ph { display: grid; place-items: center; color: var(--gold); }
.post-card__ph [data-i] { width: 40px; height: 40px; }
.post-card__body { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card .eyebrow { font-size: 13px; margin-bottom: 8px; }
.post-card h3 { font-family: var(--f-head); font-weight: 600; font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.post-card a:hover h3 { color: var(--gold-600); }
.post-card p { font-family: var(--f-head); font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--body); margin-bottom: 16px; }
.post-card small { margin-top: auto; font-size: 13px; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 44px; font-weight: 600; color: var(--body); }

.post-hero { padding: 70px 0 40px; }
.post-hero__inner { max-width: 860px; }
.post-hero__back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--body); margin-bottom: 26px; }
.post-hero__back:hover { color: var(--gold); }
.post-hero__back [data-i] { width: 16px; height: 16px; }
.post-hero h1 { font-family: var(--f-head); font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.18; letter-spacing: -.015em; margin: 6px 0 18px; }
.post-hero__meta { font-size: 14.5px; color: var(--muted); font-weight: 500; }
.post { padding-top: 10px; }
.post__wrap { max-width: 860px; }
.post__img { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: 40px; }
.prose { font-family: var(--f-head); font-weight: 400; font-size: 18px; line-height: 1.8; color: #45484e; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; color: var(--ink); margin-top: 44px; }
.prose h3 { font-weight: 600; font-size: 21px; line-height: 1.35; color: var(--ink); margin-top: 32px; }
.prose h4 { font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 26px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--gold-600); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 24px; } .prose ol { list-style: decimal; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose img { border-radius: 8px; height: auto; }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.prose blockquote { border-left: 3px solid var(--gold); padding-left: 20px; font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 40px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line-2); padding: 12px 10px; text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); background: var(--bg-soft); }
.prose pre, .prose code { font-family: ui-monospace, Menlo, monospace; font-size: 14.5px; background: var(--bg-soft); border-radius: 4px; }
.prose pre { padding: 16px; overflow-x: auto; } .prose code { padding: 1px 5px; }
.prose__video { position: relative; aspect-ratio: 16 / 9; } .prose__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.prose .el-cols { margin-top: 24px; }
@media (max-width: 1080px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .post-grid { grid-template-columns: 1fr; } .prose { font-size: 17px; } }

/* Booking (cal.eu inline scheduler) */
.demos { margin-top: 28px; scroll-margin-top: 130px; }
.demos + .booking { scroll-margin-top: 110px; }
.demos__label { font-weight: 500; color: var(--ink); margin: 0 0 12px; }
.demos__opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.demos__opt { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: start; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.demos__opt:hover { border-color: var(--gold); transform: translateY(-2px); }
.demos__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.demos__opt > i { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-soft); color: var(--gold-700); }
.demos__opt > i svg { width: 20px; height: 20px; }
.demos__opt b { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.demos__opt small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.demos__opt em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--muted); }
.demos__opt.is-on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,145,38,.18), var(--shadow); }
.demos__opt.is-on > i { background: var(--gold); color: #fff; }
@media (max-width: 1100px) { .demos__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .demos__opts { grid-template-columns: 1fr; gap: 8px; } .demos__opt { padding: 10px 14px; align-items: center; grid-template-columns: auto 1fr auto; } .demos__opt > i { grid-row: auto; width: 32px; height: 32px; } .demos__opt small { display: none; } .demos__opt em { grid-column: auto; } }
.demos + .booking { margin-top: 16px; }
.booking { margin-top: 28px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.booking iframe { display: block; width: 100%; height: 720px; border: 0; }
.booking__alt { padding: 14px 20px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line-2); background: var(--bg-soft); }
.booking__alt a { color: var(--gold-700); font-weight: 500; text-decoration: underline; }
/* Hide our own chat button once the Chatwoot launcher is on the page */
.has-chat .chat-fab { display: none; }

/* Mac hosting info page */
.mac-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mac-uses a { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; padding: 24px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease); }
.mac-uses a:hover { border-color: #F2C88F; transform: translateY(-2px); }
.mac-uses [data-i] { grid-row: span 2; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--gold-50); color: var(--gold); }
.mac-uses b { font-weight: 600; font-size: 17px; }
.mac-uses span { font-size: 15px; color: var(--body); line-height: 1.55; }
.mac-panel { background: #464A53; color: #fff; border-radius: var(--r-lg); padding: 40px; }
.mac-panel h3 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 10px; }
.mac-panel > p { color: rgba(255,255,255,.75); margin-bottom: 22px; }
.mac-panel .dark-links a { border-top-color: rgba(255,255,255,.14); }
.mac-panel .dark-links span { color: rgba(255,255,255,.65); }
@media (max-width: 1080px) { .mac-uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .mac-uses { grid-template-columns: 1fr; } .mac-panel { padding: 28px 22px; } }

/* Synology configurator */
.nas { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 36px; }
.nas__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: start; }
.nas fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.nas legend { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 10px; padding: 0; }
.nas__chips { display: grid; gap: 10px; }
.nas__chips--4 { grid-template-columns: repeat(4, 1fr); }
.nas__chips--5 { grid-template-columns: repeat(5, 1fr); }
.nas__chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.nas__chip b { font-weight: 500; font-size: 15px; }
.nas__chip small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.nas__chip:hover:not(:disabled) { border-color: #E9C089; }
.nas__chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-50); box-shadow: inset 0 0 0 1px var(--gold); }
.nas__chip[aria-pressed="true"] small { color: var(--gold-700); }
.nas__chip:disabled { opacity: .45; cursor: not-allowed; }
.nas__stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.nas__stepper button { width: 46px; height: 46px; font-size: 22px; line-height: 1; color: var(--ink); }
.nas__stepper button:hover:not(:disabled) { background: var(--gold-50); color: var(--gold-700); }
.nas__stepper button:disabled { color: #C9CCD2; cursor: not-allowed; }
.nas__stepper output { min-width: 90px; text-align: center; font-weight: 600; border-inline: 1px solid var(--line); line-height: 46px; }
.nas__toggle { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.nas__toggle input { width: 20px; height: 20px; accent-color: var(--gold); }
.nas__toggle small { color: var(--muted); margin-left: 4px; }
.nas__toggle:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.nas__sum { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 26px; position: sticky; top: 110px; }
.nas__unit { background: linear-gradient(180deg, #3B3F46, #2B2E34); border-radius: 10px; padding: 12px; margin: 4px 0 18px; }
.nas__brand { display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.nas__bays { display: grid; grid-template-columns: repeat(var(--bays), 1fr); gap: 5px; }
.nas__bay { height: 26px; border-radius: 4px; background: #23262B; border: 1px solid #4A4E56; font-size: 10.5px; font-weight: 500; color: #fff; display: grid; place-items: center; }
.nas__bay.is-full { background: linear-gradient(180deg, #F5A53F, var(--gold)); border-color: transparent; }
.nas__ram { background: linear-gradient(180deg, #3B3F46, #2B2E34); border-radius: 8px 8px 3px 3px; padding: 10px 12px 0; margin: -8px 0 18px; border-bottom: 6px solid transparent; border-image: repeating-linear-gradient(90deg, #D9A441 0 3px, #2B2E34 3px 5px) 6; }
.nas__ram span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-bottom: 7px; }
.nas__ram div { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; padding-bottom: 9px; }
.nas__ram i { height: 14px; border-radius: 2px; background: #23262B; border: 1px solid #4A4E56; transition: background .3s, box-shadow .3s; }
.nas__ram i.is-base { background: #6B7079; border-color: transparent; }
.nas__ram i.is-on { background: linear-gradient(180deg, #F5A53F, var(--gold)); border-color: transparent; box-shadow: 0 0 8px rgba(232,145,38,.35); }
.nas__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.nas__facts dt { font-size: 13px; color: var(--muted); }
.nas__facts dd { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.nas__cycle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.nas__price { margin: 0 0 18px; }
.nas__price b { display: block; font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.nas__price span { font-size: 14px; color: var(--body); }
.nas__sum .btn { width: 100%; justify-content: center; }
@media (max-width: 1080px) { .nas__grid { grid-template-columns: 1fr; } .nas__sum { position: static; } }
@media (max-width: 680px) { .nas { padding: 20px 16px; } .nas__chips--4 { grid-template-columns: 1fr 1fr; } .nas__chips--5 { grid-template-columns: repeat(3, 1fr); } }

/* Memory explorer on the Synology page ([data-ram]) */
.ram { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; margin-top: 56px; padding: 40px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.ram__text h3 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 10px 0 12px; }
.ram__text .checklist { margin-top: 18px; }
.ram__panel { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); padding: 28px; }
.ram__read { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ram__read b { display: inline-block; font-size: 52px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.ram__read b small { font-size: 22px; font-weight: 600; color: var(--gold); letter-spacing: 0; }
.ram__read b.is-changed { animation: tick .35s var(--rv-ease); }
.ram__read span { font-size: 13px; color: var(--muted); text-align: right; }
.ram__stick { position: relative; background: linear-gradient(180deg, #3B3F46, #2B2E34); border-radius: 10px 10px 4px 4px; padding: 14px 14px 0; margin-bottom: 22px; }
.ram__stick::before { content: ""; position: absolute; top: 50%; left: -1px; width: 7px; height: 16px; margin-top: -14px; border-radius: 0 6px 6px 0; background: #fff; }
.ram__stick::after { content: ""; position: absolute; top: 50%; right: -1px; width: 7px; height: 16px; margin-top: -14px; border-radius: 6px 0 0 6px; background: #fff; }
.ram__chips { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 0 6px 14px; }
.ram__chip { height: 26px; border-radius: 3px; background: #23262B; border: 1px solid #4A4E56; transition: background .3s var(--rv-ease) calc(var(--i) * 18ms), border-color .3s, box-shadow .3s; }
.ram__chip.is-base { background: #6B7079; border-color: transparent; }
.ram__chip.is-on { background: linear-gradient(180deg, #F5A53F, var(--gold)); border-color: transparent; box-shadow: 0 0 12px rgba(232,145,38,.35); }
.ram__pins { position: relative; height: 14px; margin: 0 -14px; border-radius: 0 0 4px 4px; background: repeating-linear-gradient(90deg, #D9A441 0 4px, transparent 4px 7px); background-color: #2B2E34; }
.ram__pins::after { content: ""; position: absolute; left: 42%; bottom: 0; width: 10px; height: 9px; background: #fff; border-radius: 3px 3px 0 0; }
.ram__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ram__steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.ram__steps button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.ram__steps button b { font-size: 15px; font-weight: 500; }
.ram__steps button small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ram__steps button:hover { border-color: #E9C089; }
.ram__steps button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-50); box-shadow: inset 0 0 0 1px var(--gold); }
.ram__steps button[aria-pressed="true"] small { color: var(--gold-700); }
.ram__note { font-size: 14px; color: var(--body); margin: 16px 0; min-height: 1.5em; }
.ram__note b { color: var(--ink); font-weight: 600; }
.ram__panel .btn { width: 100%; justify-content: center; }
@media (min-width: 1081px) { .ram__chips { grid-template-columns: repeat(16, 1fr); gap: 4px; } .ram__chip { height: 34px; } }
@media (max-width: 1080px) { .ram { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 680px) { .ram { padding: 22px 16px; margin-top: 40px; } .ram__panel { padding: 18px; } .ram__read b { font-size: 42px; } .ram__steps { grid-template-columns: repeat(3, 1fr); } .ram__steps:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ram__chip { transition: none; } }

/* ==========================================================================
   Hosting pages
   ========================================================================== */
/* Row of add-on prices under a product (All-in-1 page) */
.addons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 30px; }
.addons > span:first-child { font-size: 14px; font-weight: 600; color: var(--body); margin-right: 4px; }
.addons .pill { background: var(--gold-tint); color: var(--gold-700); }

/* Card with a product logo and an "included" list, beside a split */
.fcard--list img { display: block; max-width: 200px; height: auto; margin-bottom: 22px; }
.fcard--list h3 { font-size: 18px; margin-bottom: 18px; }

/* Link at the bottom of a feature card */
.fcard { display: flex; flex-direction: column; }
.fcard > .link-gold { margin-top: auto; padding-top: 18px; font-size: 16px; }

/* Illustration instead of an icon in a help card (SSL certificate types) */
.help__card > img { width: 96px; height: 96px; object-fit: contain; margin-bottom: 18px; }
/* Small browser-bar illustration in a tab panel (SSL DV/OV/EV) */
.ftabs__panel > img.ftabs__bar { width: 100%; max-width: 360px; height: auto; justify-self: center; }

/* Row of download buttons inside a card (support page) */
.fcard__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }

/* ==========================================================================
   Email and licence pages
   ========================================================================== */
/* Two-column variant of the link cards (4 items read better as 2 x 2) */
.mac-uses--2 { grid-template-columns: repeat(2, 1fr); }

/* Four-column icon grid (eM Client feature row) */
.igrid--4 { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }

/* Short explanation under a row label in a comparison table (was a tooltip on the old site) */
.ptable tbody th small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--body); max-width: 420px; }

/* Partner badge image above text in a split */
.partner-badge { display: block; width: auto; max-width: 220px; height: auto; margin-bottom: 20px; }

@media (max-width: 1080px) { .igrid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .mac-uses--2, .igrid--4 { grid-template-columns: 1fr; } }

/* Photo next to text in a split (no frame, rounded) */
.photo { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* Two text cards side by side (Microsoft licenses), left-aligned */
.help--2 { grid-template-columns: 1fr 1fr; }
.help--2 .help__card { text-align: left; align-items: flex-start; }
@media (max-width: 860px) { .help--2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Legal pages (privacy, cookies, terms, legal documentation)
   and comparison landing pages (Dropbox, WeTransfer, Microsoft alternatives)
   ========================================================================== */

/* Legal hero: centred title, optional "last updated" line */
.legal-hero { padding-bottom: 64px; }
.legal-meta { margin-top: 16px; font-size: 14.5px; font-weight: 500; color: var(--muted); }

/* Narrow reading column for legal text (builds on .prose) */
.legal { padding-top: 32px; }
.legal__col { max-width: 800px; margin-inline: auto; }
.legal__col.prose { font-size: 17px; line-height: 1.75; }
.legal__col h2, .legal__col h3 { scroll-margin-top: 110px; overflow-wrap: break-word; hyphens: auto; }
.legal__col h2:first-child { margin-top: 0; }
.legal__version { font-size: 14.5px; color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 18px; }

/* Table of contents for long legal documents */
.prose .legal-toc { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px 28px; margin: 36px 0 8px; }
.legal-toc__title { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prose .legal-toc ol { list-style: none; padding: 0; margin-top: 12px; columns: 2; column-gap: 32px; }
.prose .legal-toc li { margin: 0 0 8px; break-inside: avoid; font-size: 15px; line-height: 1.45; }
.prose .legal-toc a { color: var(--ink); text-decoration: none; font-weight: 500; }
.prose .legal-toc a:hover { color: var(--gold-600); text-decoration: underline; }
@media (max-width: 680px) {
  .prose .legal-toc { padding: 20px; }
  .prose .legal-toc ol { columns: 1; }
  .legal__col.prose { font-size: 16.5px; }
}

/* Comparison pages: compact .compare inside a .split, notes under a table, two buttons in a CTA band */
.split .compare { padding: 30px 26px 26px; }
.split .compare .ptable-wrap { margin-top: 0; }
.ptable tbody td { line-height: 1.45; }
.compare__note { max-width: 760px; margin: 22px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-align: center; }
.compare__note + .compare__note { margin-top: 8px; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.igrid .ticks { margin-top: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (max-width: 680px) {
  .split .compare { padding: 20px 8px 16px; }
}

/* Small sub-heading above a text column (comparison pages) */
.h-sub { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }

/* Text + comparison table side by side: give the table more room, align to the top */
.split--compare { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 56px; }
.split--compare > :first-child { position: sticky; top: 120px; }
.split > div > .sec-head--left { margin-bottom: 20px; }
@media (max-width: 1080px) { .split--compare { grid-template-columns: minmax(0, 1fr); gap: 40px; } .split--compare > :first-child { position: static; } }

/* Text-heavy comparison tables: on phones each row becomes a label line with the two values side by side */
@media (max-width: 680px) {
  .ptable--fit thead tr, .ptable--fit tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .ptable--fit thead th:first-child { display: none; }
  .ptable--fit thead th { border-radius: 6px !important; padding: 12px 8px; font-size: 14px; }
  .ptable--fit tbody th { grid-column: 1 / -1; padding: 14px 8px 2px; font-size: 14px; text-align: center; color: var(--ink); }
  .ptable--fit tbody td { padding: 4px 8px 14px; font-size: 14px; overflow-wrap: break-word; }
}

/* Document title line at the top of a legal text (e.g. "General Terms and Conditions vBoxx") */
.legal__title { font-size: 20px; }

/* Trial request page */
.trial-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.trial__aside { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; position: sticky; top: 110px; }
.trial__aside h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.trial__aside p { color: var(--body); margin-bottom: 18px; }
.vform fieldset { border: 0; padding: 0; margin: 0; }
.vform legend { font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.trial__products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trial__products label { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #D9DCE1; border-radius: 10px; cursor: pointer; font-weight: 600; }
.trial__products label:has(input:checked) { border-color: var(--gold); background: var(--gold-50); }
.trial__products input { accent-color: var(--gold); width: 18px; height: 18px; }
.trial__products [data-i] { width: 20px; height: 20px; color: var(--gold); }
.vform__check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.vform__check input { width: 18px !important; height: 18px; margin-top: 3px; accent-color: var(--gold); padding: 0 !important; }
.vform__check a { color: var(--gold-700); text-decoration: underline; }
@media (max-width: 1080px) { .trial-wrap { grid-template-columns: 1fr; } .trial__aside { position: static; } }
@media (max-width: 680px) { .trial__products { grid-template-columns: 1fr; } }
.usp > div:only-child { border-left: 0; }
a.fcard { transition: border-color .2s, transform .2s var(--ease); } a.fcard:hover { border-color: #F2C88F; transform: translateY(-2px); }

/* Datacenters page */
.dc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; text-align: left; position: relative; z-index: 2; }
.dc-stat { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 26px; }
.dc-stat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--gold); }
.dc-stat span { display: block; font-weight: 600; margin-top: 4px; }
.dc-stat small { display: block; font-size: 14px; color: var(--body); margin-top: 4px; line-height: 1.5; }
.dc-code { flex: none; white-space: nowrap; display: inline-grid; place-items: center; min-width: 64px; height: 34px; padding: 0 10px; border-radius: 8px; background: #464A53; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.dc-roles { display: grid; gap: 14px; }
.dc-roles li { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; }
.dc-roles b { display: block; font-weight: 600; }
.dc-roles small { display: block; font-size: 14px; color: var(--body); }
.dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.dc-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; scroll-margin-top: 120px; display: flex; flex-direction: column; }
.dc-card .dc-links { margin-top: auto; }
.dc-card > :nth-last-child(2) { margin-bottom: 20px; }
.dc-card header { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.dc-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.dc-card header p { font-size: 14px; color: var(--body); }
.dc-role { font-weight: 500; color: var(--gold-700); background: var(--gold-50); border-radius: 10px; padding: 10px 14px; font-size: 15px; margin-bottom: 18px; }
.dc-specs { display: grid; gap: 12px; margin: 0 0 20px; }
.dc-specs dt { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dc-specs dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }
.dc-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.dc-certs { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-certs li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line-2); }
.dc-note { margin-top: 14px; font-size: 14px; color: var(--body); border-left: 3px solid var(--gold); padding-left: 12px; }
.dc-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dc-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--gold-700); }
.dc-links a:hover { color: var(--gold); }
.dc-links [data-i] { width: 14px; height: 14px; }
@media (max-width: 1080px) { .dc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .dc-grid, .dc-stats { grid-template-columns: 1fr; } }
.table-note { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.vat-note { font-size: 13.5px; color: var(--muted); margin-top: 18px; text-align: center; }
.p-hero .vat-note { margin-top: 14px; }

/* ---------- News on the home page ({{NEWS}}, built from src/data/news.json + latest posts) ---------- */
.news { padding-top: 40px; }
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.news__head .h-section { margin: 0; }
.news__grid { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 22px; align-items: stretch; }
.news-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #EBD2AE; }
.news-card__art { height: 170px; display: grid; place-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line-2);
  background: radial-gradient(circle at 1px 1px, rgba(176,120,50,.13) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(160deg, #FCF8F3, #F6EADB); }
.news-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card__tag { align-self: flex-start; font-size: 12.5px; font-weight: 500; color: var(--gold-700); background: var(--gold-50); padding: 3px 12px; border-radius: 999px; }
.news-card h3 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 4px 0 0; }
.news-card p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }
.news-card__more { margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 500; color: var(--gold-700); display: inline-flex; align-items: center; gap: 6px; }
.news-card__more i, .news-card__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.news-card:hover .news-card__more svg { transform: translateX(4px); }
.news__posts { display: flex; flex-direction: column; padding: 24px 22px 10px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.news__posts > .news-card__tag { margin: 0 4px 8px; }
.news-post { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line-2); color: inherit; text-decoration: none; transition: transform .3s var(--ease); flex: 1; }
.news-post:first-of-type { border-top: 0; }
.news-post:hover { transform: translateX(3px); } .news-post:hover b { color: var(--gold-700); }

.news-post small { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.news-post b { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; }
/* drawn Mac mini */
/* Mac mini rises from the bottom edge of the card; a small portal status card in the vBoxx UI style */
.art-mac { position: absolute; inset: 0; display: block; }
.art-mac img { position: absolute; left: 50%; bottom: -18px; width: 310px; max-width: none; height: auto; translate: -50% 0; filter: drop-shadow(0 -6px 24px rgba(120,72,20,.22)); }
.news-card--mac .art-mac img { animation: art-rise 1.1s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes art-rise { from { transform: translateY(70%); } to { transform: none; } }
.art-mac__ui { position: absolute; left: 22px; top: 20px; display: grid; grid-template-columns: 8px auto auto; column-gap: 8px; align-items: center; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); font-size: 12px; text-align: left; animation: vx-in .4s .9s both; }
.art-mac__ui i { grid-row: span 2; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.art-mac__ui b { font-weight: 600; color: var(--ink); } .art-mac__ui small { grid-column: 2; color: var(--muted); font-size: 11px; } .art-mac__ui em { grid-row: 1 / 3; grid-column: 3; font-style: normal; font-size: 11px; color: #15803D; background: #E9F6EE; padding: 2px 8px; border-radius: 999px; }
.art-mac__chip { position: absolute; right: 22px; top: 24px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--gold-700); padding: 4px 12px; border-radius: 999px; border: 1px solid #EBD2AE; background: #fff; box-shadow: var(--shadow-sm); animation: vx-in .4s 1.1s both; }
/* blog thumbnails */
.news-thumb { flex: none; width: 76px; height: 76px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, #FDF3E8, #F6E1C6); border: 1px solid #F1DEC6; overflow: hidden; }
.news-thumb svg { width: 76px; height: 76px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.news-thumb--shield { background: linear-gradient(150deg, #2E3239, #1D2026); border-color: #2E3239; }
.t-cloud { fill: #fff; stroke: #E8A55A; stroke-width: 1.6; } .t-arc, .t-head { stroke: var(--gold); stroke-width: 2.4; } .t-spin { transform-origin: 39px 36px; animation: t-spin 4s linear infinite; }
.t-disk { fill: #fff; stroke: #D9B98F; stroke-width: 1.4; } .t-led { fill: #22C55E; animation: t-blink 1.6s infinite; } .t-led2 { animation-delay: .5s; } .t-l1 { animation-delay: .4s; } .t-l2 { animation-delay: .9s; fill: var(--gold); }
.t-rack { fill: #2B2F36; } .t-ear { fill: #3A3F47; } .t-bay { fill: #454B54; stroke: #5A616B; stroke-width: .8; } .t-shadow { fill: rgba(120,72,20,.18); }
.t-shield { fill: #2B2F36; stroke: var(--gold); stroke-width: 2.2; } .t-lock { fill: var(--gold); } .t-shackle { stroke: var(--gold); stroke-width: 2.6; } .t-key { fill: #2B2F36; }
.t-scan { fill: rgba(232,145,38,.35); animation: t-scan 2.8s ease-in-out infinite; }
@keyframes t-spin { to { transform: rotate(360deg); } } @keyframes t-blink { 50% { opacity: .25; } } @keyframes t-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(44px); } }
@media (prefers-reduced-motion: reduce) { .news-thumb *, .art-mac *, .art-mac img { animation: none !important; } }

/* drawn file list syncing */
.art-cloud { position: relative; width: 210px; height: 120px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 18px 36px -16px rgba(162,96,17,.45); display: flex; flex-direction: column; gap: 9px; }
.art-cloud__file { height: 14px; border-radius: 5px; background: linear-gradient(90deg, var(--gold) 0 14px, #EFEDE8 14px); }
.art-cloud__file:nth-child(2) { width: 82%; } .art-cloud__file:nth-child(3) { width: 64%; }
.art-cloud__bar { margin-top: auto; height: 6px; border-radius: 6px; background: #EFEDE8; overflow: hidden; }
.art-cloud__bar i { display: block; height: 100%; width: 66%; background: var(--gold); border-radius: 6px; }
@media (max-width: 1080px) { .news__grid { grid-template-columns: 1fr 1fr; } .news__posts { grid-column: 1 / -1; } }
@media (max-width: 680px) { .news__grid { grid-template-columns: 1fr; } .news__posts { flex-direction: column; } .news__head { flex-direction: column; align-items: flex-start; } }

/* ---------- Back-up calculator ([data-backup]) ---------- */
.calc-slot { min-width: 340px; }
.bcalc { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px; width: 380px; max-width: 100%; text-align: left; }
.bcalc__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.bcalc__label small { color: var(--muted); font-weight: 400; }
.bcalc__row { display: flex; align-items: center; gap: 14px; }
.bcalc__row input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p, 0%), #ECEAE5 var(--p, 0%)); outline-offset: 6px; }
.bcalc__row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(162,96,17,.25); cursor: grab; transition: transform .15s; }
.bcalc__row input[type=range]::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.bcalc__row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }
.bcalc__n { min-width: 96px; text-align: right; font-weight: 600; font-size: 15px; }
.bcalc__people { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin: 18px 0 16px; }
.bcalc__people i { height: 18px; border-radius: 9px 9px 4px 4px; background: #EFEDE8; transition: background .25s, transform .25s var(--ease); }
.bcalc__people i.is-on { background: linear-gradient(180deg, #F5A53F, var(--gold)); transform: translateY(-2px); }
.bcalc__price { margin: 0 0 12px; }
.bcalc__price b { display: inline-block; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.bcalc__price b.is-changed { animation: tick .3s var(--rv-ease, ease); }
.bcalc__price span { display: block; font-size: 14px; color: var(--body); }
.bcalc__facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; font-size: 14px; color: var(--body); }
.bcalc__facts li { display: flex; gap: 8px; align-items: center; }
.bcalc__facts svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.bcalc .btn { width: 100%; justify-content: center; }
.bcalc__more { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 900px) { .calc-slot { min-width: 0; } .bcalc { width: 100%; } }

/* ---------- Mac mini price finder ([data-macpick]) ---------- */
.nas__chips--3 { grid-template-columns: repeat(3, 1fr); }
.nas__note { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--body); margin: 0; }
.nas__note svg { width: 18px; height: 18px; color: var(--gold); }
.nas legend small { font-weight: 400; color: var(--muted); }
.macpick { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: start; }
.macpick fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.macpick legend { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 10px; padding: 0; }
.macpick__sum { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 26px; }
.macpick__mini { margin: 4px 0 22px; display: grid; justify-items: center; gap: 12px; }
.macpick__mini img { width: 78%; max-width: 300px; height: auto; filter: drop-shadow(0 18px 22px rgba(23,28,38,.18)); }
.macpick__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--gold-700); background: var(--gold-50); padding: 3px 12px; border-radius: 999px; }
.macpick__spec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0 0 18px; }
.macpick__spec dt { font-size: 13px; color: var(--muted); }
.macpick__spec dd { margin: 0; font-size: 18px; font-weight: 600; }
.macpick__sum .btn { width: 100%; justify-content: center; }
@media (max-width: 1080px) { .macpick { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .nas__chips--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Animated product UI (.ui-demo): simplified, drawn interfaces that loop while in view ---------- */
.ui-demo { margin: 0; position: relative; }
.ui-demo * { animation-play-state: paused; }
.ui-demo.is-live * { animation-play-state: running; }
.ui-win { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(23,28,38,.35), var(--shadow-sm); overflow: hidden; font-size: 13px; color: var(--ink); text-align: left; }
.ui-win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F6F5F2; border-bottom: 1px solid var(--line-2); }
.ui-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E2DFD8; }
.ui-win__bar span { margin-left: 10px; font-size: 12px; color: var(--muted); }
.ui-cloud__body, .ui-mail__body { display: grid; grid-template-columns: 150px 1fr; min-height: 300px; }
.ui-cloud__nav { padding: 14px 10px; border-right: 1px solid var(--line-2); background: #FBFAF8; display: flex; flex-direction: column; gap: 3px; }
.ui-cloud__nav b { font-weight: 500; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; color: var(--body); display: flex; justify-content: space-between; align-items: center; }
.ui-cloud__nav b.is-on { background: var(--gold-50); color: var(--gold-700); }
.ui-quota { margin: auto 10px 6px; height: 5px; border-radius: 5px; background: #ECEAE5; overflow: hidden; }
.ui-quota i { display: block; width: 6%; height: 100%; background: var(--gold); }
.ui-cloud__nav small { font-size: 11px; color: var(--muted); padding: 0 10px; }
.ui-cloud__main, .ui-mail__main { position: relative; padding: 14px 16px; overflow: hidden; }
.ui-cloud__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ui-cloud__head b { font-weight: 600; font-size: 13.5px; }
.ui-btn { font-size: 12px; font-weight: 500; color: #fff; background: var(--gold); padding: 5px 12px; border-radius: 8px; animation: ui-press 9s infinite; }
.ui-files { list-style: none; margin: 0; padding: 0; }
.ui-file { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid #F0EEE9; border-radius: 8px; }
.ui-file b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-file small { font-size: 11.5px; color: var(--muted); }
.ui-ext { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: #5B6270; background: #EEF0F3; border-radius: 6px; padding: 5px 0; text-align: center; }
.ui-ext--pdf { color: #B4402D; background: #FBE9E5; }
.ui-ext--img { color: #2F7A55; background: #E4F4EB; }
.ui-file--new { position: relative; animation: ui-row-in 9s infinite; }
.ui-prog { position: absolute; left: 56px; right: 70px; bottom: 5px; height: 3px; border-radius: 3px; background: #EFEDE8; overflow: hidden; animation: ui-fade-out 9s infinite; }
.ui-prog i { display: block; height: 100%; width: 0; background: var(--gold); animation: ui-progress 9s infinite; }
.ui-file--new .ui-done { animation: ui-fade-in 9s infinite; }
.ui-toast { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; gap: 10px; align-items: center; background: #1F232A; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.45); animation: ui-toast 9s infinite; }
.ui-toast b { display: block; font-weight: 500; font-size: 12.5px; }
.ui-toast small { font-size: 11px; color: rgba(255,255,255,.65); }
.ui-toast__ic { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); flex: none; position: relative; }
.ui-toast__ic::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes ui-press { 0%, 4% { transform: none; } 6% { transform: scale(.94); filter: brightness(.92); } 9%, 100% { transform: none; filter: none; } }
@keyframes ui-row-in { 0%, 8% { opacity: 0; transform: translateY(-10px); background: transparent; } 12% { opacity: 1; transform: none; background: var(--gold-50); } 50% { background: var(--gold-50); } 60%, 100% { opacity: 1; background: transparent; } }
@keyframes ui-progress { 0%, 12% { width: 0; } 45% { width: 100%; } 100% { width: 100%; } }
@keyframes ui-fade-out { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ui-fade-in { 0%, 46% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes ui-toast { 0%, 58% { opacity: 0; transform: translateY(14px); } 62%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(14px); } }

/* mail + calendar */
.ui-badge { font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--gold); border-radius: 999px; padding: 1px 7px; animation: ui-badge 9s infinite; }
.ui-inbox { list-style: none; margin: 0 0 14px; padding: 0; }
.ui-msg { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 8px; border-bottom: 1px solid #F0EEE9; border-radius: 8px; }
.ui-msg b { display: block; font-weight: 600; font-size: 12.5px; }
.ui-msg small { font-size: 12px; color: var(--body); }
.ui-msg time { font-size: 11px; color: var(--muted); }
.ui-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--gold-700); background: var(--gold-50); }
.ui-av--2 { color: #2F6E8A; background: #E5F1F6; } .ui-av--3 { color: #5B6270; background: #EEF0F3; }
.ui-msg--new { animation: ui-mail-in 9s infinite; position: relative; }
.ui-msg--new::before { content: ""; position: absolute; left: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); }
.ui-event { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFAF8; animation: ui-event-in 9s infinite; }
.ui-event__day { text-align: center; border-radius: 10px; background: #fff; border: 1px solid var(--line-2); padding: 4px 0; }
.ui-event__day small { display: block; font-size: 10px; color: var(--gold-700); text-transform: uppercase; }
.ui-event__day b { font-size: 16px; font-weight: 600; }
.ui-event__txt b { display: block; font-weight: 600; font-size: 12.5px; }
.ui-event__txt small { font-size: 11.5px; color: var(--muted); }
.ui-event__btn { position: relative; font-size: 11.5px; font-weight: 500; }
.ui-event__btn em { font-style: normal; display: inline-block; padding: 6px 12px; border-radius: 8px; }
.ui-event__btn .a { color: #fff; background: var(--gold); animation: ui-swap-a 9s infinite; }
.ui-event__btn .b { color: #2F7A55; background: #E4F4EB; animation: ui-swap-b 9s infinite; white-space: nowrap; }
@keyframes ui-badge { 0%, 10% { transform: scale(1); } 13% { transform: scale(1.3); } 16%, 100% { transform: scale(1); } }
@keyframes ui-mail-in { 0%, 8% { opacity: 0; transform: translateX(16px); background: transparent; } 12% { opacity: 1; transform: none; background: var(--gold-50); } 45% { background: var(--gold-50); } 55%, 100% { opacity: 1; background: transparent; } }
@keyframes ui-event-in { 0%, 28% { opacity: 0; transform: translateY(10px); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes ui-swap-a { 0%, 55% { opacity: 1; transform: none; } 57% { transform: scale(.92); } 60%, 100% { opacity: 0; } }
@keyframes ui-swap-b { 0%, 58% { opacity: 0; transform: scale(.9); } 62%, 100% { opacity: 1; transform: none; } }

/* Mac portal */
.ui-stack { display: grid; justify-items: end; }
.ui-stack > * { grid-area: 1 / 1; }
.ui-win--dark { background: #1C1F25; border-color: #2E323A; color: #E9EAEC; }
.ui-win--dark .ui-win__bar { background: #23272E; border-color: #2E323A; }
.ui-win--dark .ui-win__bar i { background: #3A3F48; }
.ui-win--dark .ui-win__bar span { color: #8E949E; }
.ui-portal__body { padding: 18px; display: grid; gap: 14px; }
.ui-portal__row { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #2E323A; border-radius: 12px; background: #23272E; }
.ui-mac { width: 54px; height: auto; display: block; }
.ui-portal__name b { display: block; font-weight: 600; font-size: 13px; }
.ui-portal__name small { font-size: 11.5px; color: #8E949E; }
.ui-status { position: relative; display: flex; align-items: center; gap: 7px; font-size: 12px; min-width: 96px; justify-content: flex-end; }
.ui-status i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 10px #3DDC84; animation: ui-led 10s infinite; }
.ui-status em { font-style: normal; }
.ui-status .s-on { animation: ui-on 10s infinite; }
.ui-status .s-re { color: var(--yellow); animation: ui-re 10s infinite; }
.ui-portal__btns { display: flex; gap: 8px; }
.ui-portal__btns span { font-size: 12px; padding: 7px 12px; border-radius: 8px; border: 1px solid #353A43; color: #C9CCD2; }
.ui-portal__btns .ui-press { border-color: var(--gold); color: #fff; background: rgba(232,145,38,.18); animation: ui-press-b 10s infinite; }
.ui-term { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: #121418; border-radius: 10px; padding: 12px 14px; min-height: 104px; }
.ui-term p { margin: 0 0 4px; white-space: nowrap; overflow: hidden; color: #C9CCD2; width: 0; }
.ui-term p span { color: var(--gold); }
.ui-term .ok { color: #3DDC84; }
.ui-term .t1 { animation: ui-type1 10s steps(26) infinite; } .ui-term .t2 { animation: ui-type2 10s steps(1) infinite; }
.ui-term .t3 { animation: ui-type3 10s steps(30) infinite; } .ui-term .t4 { animation: ui-type4 10s steps(1) infinite; }
.ui-log { border-top: 1px solid #2E323A; padding-top: 10px; }
.ui-log small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #8E949E; }
.ui-log p { margin: 4px 0 0; font-size: 12px; color: #C9CCD2; animation: ui-log 10s infinite; }
@keyframes ui-press-b { 0%, 8% { transform: none; } 10% { transform: scale(.93); background: rgba(232,145,38,.45); } 13%, 100% { transform: none; } }
@keyframes ui-led { 0%, 11% { background: #3DDC84; box-shadow: 0 0 10px #3DDC84; } 12%, 34% { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); } 36%, 100% { background: #3DDC84; box-shadow: 0 0 10px #3DDC84; } }
@keyframes ui-on { 0%, 11% { opacity: 1; } 12%, 34% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes ui-re { 0%, 11% { opacity: 0; } 12%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ui-log { 0%, 12% { opacity: 0; transform: translateY(6px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes ui-type1 { 0%, 38% { width: 0; } 50%, 100% { width: 100%; } }
@keyframes ui-type2 { 0%, 52% { width: 0; } 53%, 100% { width: 100%; } }
@keyframes ui-type3 { 0%, 56% { width: 0; } 70%, 100% { width: 100%; } }
@keyframes ui-type4 { 0%, 78% { width: 0; } 79%, 100% { width: 100%; } }

/* backup jobs */
.ui-backup__body { position: relative; padding: 16px 16px 76px; }
.ui-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-jobs li { display: grid; grid-template-columns: 34px 1fr 90px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFAF8; }
.ui-src { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--gold-700); background: var(--gold-50); }
.ui-jobs b { font-weight: 600; font-size: 13px; }
.ui-bar { grid-column: 2; height: 5px; border-radius: 5px; background: #ECEAE5; overflow: hidden; }
.ui-bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 5px; animation: ui-job 10s calc(var(--n) * .9s) infinite; }
.ui-st { grid-column: 3; grid-row: 1 / span 2; font-size: 11.5px; justify-items: end; }
.ui-st em { font-style: normal; }
.ui-st .r { color: var(--muted); animation: ui-job-r 10s calc(var(--n) * .9s) infinite; }
.ui-st .d { color: #2F7A55; font-weight: 500; animation: ui-job-d 10s calc(var(--n) * .9s) infinite; }
.ui-backup .ui-toast { animation: ui-toast2 10s infinite; }
@keyframes ui-job { 0% { width: 0; } 30% { width: 100%; } 100% { width: 100%; } }
@keyframes ui-job-r { 0%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes ui-job-d { 0%, 29% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes ui-toast2 { 0%, 56% { opacity: 0; transform: translateY(14px); } 60%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(14px); } }

/* datacenter replication map */
.ui-dc { margin-top: 28px; }
.ui-dc__map { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: radial-gradient(circle at 30% 40%, #FFF7EC, #fff 60%); box-shadow: var(--shadow-sm); overflow: hidden; }
.ui-dc__node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); z-index: 2; }
.ui-dc__node b { font-size: 13px; font-weight: 700; color: var(--ink); }
.ui-dc__node small { font-size: 11px; color: var(--muted); }
.ui-dc__node::before { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,.5); animation: ui-ping 2.4s infinite; }
.n1 { left: 26%; top: 28%; } .n2 { left: 26%; top: 72%; } .n3 { left: 76%; top: 46%; }
.ui-dc__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ui-dc__lines path { fill: none; stroke-width: .6; stroke-dasharray: 2 1.6; vector-effect: non-scaling-stroke; }
.ui-dc__lines path.k1 { stroke: #E9A955; stroke-width: 2; } .ui-dc__lines path.k2 { stroke: #C9CCD2; stroke-width: 2; }
.ui-dc__lines .p1 { fill: var(--gold); } .ui-dc__lines .p2 { fill: #8E949E; }
.ui-dc__legend { position: absolute; left: 14px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--body); z-index: 2; }
.ui-dc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-dc__legend i { width: 16px; height: 2px; background: #E9C089; } .ui-dc__legend i.k2 { background: #C9CCD2; }
@keyframes ui-pulse { from { left: 0; } to { left: calc(100% - 8px); } }
@keyframes ui-ping { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } }

/* vault */
.ui-vault { margin-top: 26px; }
.ui-vault__body { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 270px; }
.ui-vault__list { padding: 14px; border-right: 1px solid var(--line-2); background: #FBFAF8; }
.ui-search { display: block; font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; }
.ui-vault__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ui-vault__list li { display: grid; grid-template-columns: 28px 1fr; column-gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px; }
.ui-vault__list li .ui-av { grid-row: span 2; width: 28px; height: 28px; font-size: 10.5px; }
.ui-vault__list li b { font-size: 12.5px; font-weight: 600; } .ui-vault__list li small { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.ui-vault__list li.is-on { background: var(--gold-50); }
.ui-vault__item { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ui-vault__item > b { font-size: 14px; font-weight: 600; } .ui-vault__item > small { font-size: 11.5px; color: var(--muted); }
.ui-pw { position: relative; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 10px; background: #fff; }
.ui-pw code { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; width: 0; animation: ui-pw 9s steps(16) infinite; display: inline-block; }
.ui-copy { font-size: 10.5px; font-weight: 600; color: #2F7A55; background: #E4F4EB; border-radius: 6px; padding: 2px 7px; animation: ui-fade-blink 9s infinite; }
.ui-meter { height: 5px; border-radius: 5px; background: #ECEAE5; overflow: hidden; margin-top: 4px; }
.ui-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F5A53F, #2F9E44); animation: ui-meter 9s infinite; }
.ui-strong { font-size: 11px; font-weight: 600; color: #2F7A55; animation: ui-fade-in2 9s infinite; }
.ui-gen { align-self: flex-start; margin-top: 4px; animation: ui-press 9s infinite; }
.ui-share { align-self: flex-start; font-size: 11px; font-weight: 500; color: var(--gold-700); background: var(--gold-50); border-radius: 999px; padding: 3px 10px; animation: ui-pop2 9s infinite; }
.ui-totp { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.ui-totp svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.ui-totp circle { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 94.2; animation: ui-totp 9s linear infinite; }
.ui-totp code { font-size: 12px; letter-spacing: .04em; }
@keyframes ui-pw { 0%, 8% { width: 0; } 30%, 100% { width: 16ch; } }
@keyframes ui-meter { 0%, 10% { width: 0; } 32%, 100% { width: 100%; } }
@keyframes ui-fade-in2 { 0%, 30% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes ui-fade-blink { 0%, 40% { opacity: 0; transform: scale(.8); } 44%, 70% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; } }
@keyframes ui-pop2 { 0%, 55% { opacity: 0; transform: translateY(6px); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes ui-totp { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 94.2; } }

/* web hosting browser */
.ui-web { margin-top: 26px; }
.ui-url { gap: 6px; }
.ui-addr { flex: 1; margin-left: 10px !important; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--body) !important; }
.ui-lock { width: 10px; height: 8px; border-radius: 2px; background: #2F9E44; position: relative; margin-top: 3px; animation: ui-fade-in2 9s infinite; }
.ui-lock::before { content: ""; position: absolute; left: 2px; top: -5px; width: 6px; height: 6px; border: 1.6px solid #2F9E44; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.ui-web__page { padding: 18px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; min-height: 170px; }
.ui-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, #F1EFEA, #F8F7F4, #F1EFEA); background-size: 200% 100%; animation: ui-sk 9s infinite; }
.ui-sk.h { grid-column: 1 / -1; height: 18px; width: 55%; background: #EBD2AE; }
.ui-sk.t1 { height: 10px; } .ui-sk.t2 { height: 10px; width: 80%; } .ui-sk.t3 { height: 10px; width: 65%; }
.ui-sk.img { grid-column: 2; grid-row: 2 / span 3; height: 100%; min-height: 84px; background: linear-gradient(135deg, #FDF3E8, #F7DDB8); }
.ui-web__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.ui-web__chips span { font-size: 11.5px; font-weight: 500; padding: 5px 10px 5px 24px; border-radius: 999px; position: relative; background: #E4F4EB; color: #2F7A55; opacity: 0; }
.ui-web__chips span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-web__chips .c1 { animation: ui-chip 9s 0s infinite; } .ui-web__chips .c2 { animation: ui-chip 9s .8s infinite; } .ui-web__chips .c3 { animation: ui-chip 9s 1.6s infinite; }
@keyframes ui-sk { 0% { opacity: 0; } 10% { opacity: 1; background-position: 100% 0; } 40%, 100% { opacity: 1; background-position: 0 0; } }
@keyframes ui-chip { 0%, 30% { opacity: 0; transform: translateY(6px); } 36%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@media (max-width: 680px) { .ui-vault__body { grid-template-columns: 1fr; } .ui-vault__list { display: none; } .ui-dc__node { padding: 7px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .ui-bar i, .ui-meter i { width: 100%; } .ui-st .r { opacity: 0; } .ui-pw code { width: 16ch; }
  .ui-web__chips span { opacity: 1; } .ui-dc__lines circle { display: none; }
}

/* migration */
.ui-mig { margin-top: 26px; }
.ui-mig .ui-win { padding: 18px; display: grid; gap: 14px; }
.ui-mig__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.ui-node { font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 10px; background: #F1F2F4; color: var(--body); border: 1px solid var(--line-2); }
.ui-node--v { background: var(--gold-50); color: var(--gold-700); border-color: #F0D9B8; }
.ui-mig__flow { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #E9C089 0 6px, transparent 6px 11px); }
.ui-mig__flow i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--gold); animation: ui-flow 2.4s linear infinite; }
.ui-mig__flow i:nth-child(2) { animation-delay: .8s; } .ui-mig__flow i:nth-child(3) { animation-delay: 1.6s; }
.ui-mig__jobs li { grid-template-columns: 34px 1fr; }
.ui-mig__jobs .ui-bar i { animation-name: ui-mig-job; animation-duration: 10s; }
@keyframes ui-mig-job { 0% { width: 0; } 48% { width: 100%; } 100% { width: 100%; } }
.ui-mig__foot { justify-items: start; font-size: 12.5px; font-weight: 500; }
.ui-mig__foot em { font-style: normal; } .ui-mig__foot .r { color: var(--muted); animation: ui-mig-r 10s infinite; } .ui-mig__foot .d { color: #2F7A55; animation: ui-mig-d 10s infinite; }
@keyframes ui-flow { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
@keyframes ui-mig-r { 0%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ui-mig-d { 0%, 55% { opacity: 0; } 58%, 100% { opacity: 1; } }

/* security log */
@property --threats { syntax: "<integer>"; initial-value: 0; inherits: false; }
.ui-sec { margin-top: 26px; }
.ui-sec__body { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px; }
.ui-sec__shield { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding-top: 6px; }
.ui-shield { width: 54px; height: 62px; background: linear-gradient(180deg, #F5A53F, var(--gold)); clip-path: path("M27 0 L54 10 V30 C54 46 42 57 27 62 C12 57 0 46 0 30 V10 Z"); position: relative; animation: ui-shield 10s infinite; }
.ui-shield::after { content: ""; position: absolute; left: 20px; top: 20px; width: 10px; height: 18px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ui-count { font-size: 26px; font-weight: 700; line-height: 1; animation: ui-count 10s infinite; counter-reset: t var(--threats); }
.ui-count::after { content: counter(t); }
.ui-sec__shield small { font-size: 11px; color: var(--muted); }
.ui-sec__log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-ev { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #FBFAF8; opacity: 0; animation: ui-ev 10s calc(var(--n) * 1.2s) infinite; }
.ui-ev__tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ui-ev--bad .ui-ev__tag { color: #B4402D; background: #FBE9E5; } .ui-ev--warn .ui-ev__tag { color: #A26011; background: var(--gold-50); } .ui-ev--ok .ui-ev__tag { color: #2F7A55; background: #E4F4EB; }
.ui-ev time { font-size: 11px; color: var(--muted); }
@keyframes ui-ev { 0% { opacity: 0; transform: translateX(10px); } 6%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes ui-count { 0%, 5% { --threats: 0; } 18% { --threats: 2; } 28%, 85% { --threats: 3; } 100% { --threats: 3; } }
@keyframes ui-shield { 0%, 100% { transform: none; } 8%, 20%, 32% { transform: scale(1.06); } 14%, 26% { transform: none; } }

/* cloud VPS */
.ui-vps__body { padding: 18px; display: grid; gap: 14px; min-height: 250px; }
.ui-vps__top { display: flex; justify-content: space-between; align-items: center; }
.ui-vps .ui-status { justify-content: flex-start; min-width: 0; color: #C9CCD2; }
.ui-vps__spec { font-size: 12.5px; font-weight: 600; }
.ui-vps__spec em { font-style: normal; } .ui-vps__spec .a { animation: ui-on 10s infinite reverse; animation-name: ui-spec-a; } .ui-vps__spec .b { color: var(--yellow); animation: ui-spec-b 10s infinite; }
.ui-gauge { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; font-size: 12px; color: #C9CCD2; }
.ui-gauge__bar { height: 8px; border-radius: 8px; background: #2A2E35; overflow: hidden; }
.ui-gauge__bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #F5A53F, var(--gold)); }
.ui-gauge .g1 { animation: ui-g1 10s infinite; } .ui-gauge .g2 { animation: ui-g2 10s infinite; } .ui-gauge .g3 { width: 38%; background: #6B7079; }
.ui-vps__foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ui-vps__foot .ui-press { font-size: 12px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--gold); color: #fff; background: rgba(232,145,38,.18); animation: ui-press-v 10s infinite; }
.ui-vps__done { font-size: 12px; color: #3DDC84; opacity: 0; animation: ui-vdone 10s infinite; }
@keyframes ui-g1 { 0% { width: 46%; } 10% { width: 74%; } 20% { width: 82%; } 30% { width: 88%; } 42% { width: 44%; } 60% { width: 38%; } 80% { width: 41%; } 100% { width: 46%; } }
@keyframes ui-g2 { 0%, 30% { width: 78%; } 42%, 100% { width: 40%; } }
@keyframes ui-press-v { 0%, 32% { transform: none; } 34% { transform: scale(.93); background: rgba(232,145,38,.45); } 37%, 100% { transform: none; } }
@keyframes ui-spec-a { 0%, 36% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes ui-spec-b { 0%, 36% { opacity: 0; } 39%, 100% { opacity: 1; } }
@keyframes ui-vdone { 0%, 38% { opacity: 0; } 42%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* domain search */
.ui-dom { margin-top: 26px; }
.ui-dom .ui-win { padding: 18px; }
.ui-dom__search { position: relative; display: flex; align-items: center; height: 44px; padding: 0 14px; border: 2px solid var(--gold); border-radius: 12px; background: #fff; }
.ui-dom__ph { position: absolute; left: 16px; font-size: 13px; color: var(--muted); animation: ui-ph 10s infinite; }
.ui-dom__q { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid var(--gold); animation: ui-type-d 10s steps(12) infinite; font-family: var(--f-ui); }
.ui-dom__res { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ui-dom__res li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; opacity: 0; animation: ui-res 10s calc(2.4s + var(--n) * .35s) infinite; }
.ui-dom__res b { font-weight: 600; }
.ui-dom__res .ok { font-size: 11.5px; font-weight: 600; color: #2F7A55; } .ui-dom__res .no { font-size: 11.5px; color: var(--muted); grid-column: 2 / 4; justify-self: end; }
.ui-add { font-size: 11.5px; font-weight: 500; color: #fff; background: var(--gold); padding: 4px 10px; border-radius: 7px; }
@keyframes ui-ph { 0%, 4% { opacity: 1; } 6%, 100% { opacity: 0; } }
@keyframes ui-type-d { 0%, 5% { width: 0; } 22%, 92% { width: 12ch; } 96%, 100% { width: 0; } }
@keyframes ui-res { 0% { opacity: 0; transform: translateY(6px); } 5%, 66% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; } }

/* MX fallback */
.ui-mx { max-width: 860px; margin: 34px auto 0; }
.ui-mx__map { position: relative; height: 230px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.ui-mx__node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: #FBFAF8; font-size: 13px; text-align: center; z-index: 2; }
.ui-mx__node b { font-weight: 600; } .ui-mx__node small { font-size: 18px; color: var(--muted); }
.m1 { left: 14%; } .m2 { left: 50%; top: 30%; } .m3 { left: 50%; top: 76%; border-color: #F0D9B8; background: var(--gold-50); }
.m3 b { color: var(--gold-700); }
.ui-mx__node { min-width: 150px; } .m1 { min-width: 100px; }
.ui-mx__st, .ui-mx__q { font-size: 11.5px; font-weight: 600; justify-items: center; }
.ui-mx__st em, .ui-mx__q em { font-style: normal; }
.ui-mx__st .off { color: #B4402D; animation: ui-mx-off 10s infinite; } .ui-mx__st .on { color: #2F7A55; animation: ui-mx-on 10s infinite; }
.ui-mx__q .q { color: var(--gold-700); animation: ui-mx-off 10s infinite; } .ui-mx__q .d { color: #2F7A55; animation: ui-mx-on 10s infinite; }
.ui-mx__env { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 13px; border-radius: 3px; background: var(--gold); z-index: 3; opacity: 0; }
.ui-mx__env::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 48%, rgba(255,255,255,.7) 50%, transparent 52%), linear-gradient(25deg, transparent 48%, rgba(255,255,255,.7) 50%, transparent 52%); }
.ui-mx__env.e1 { animation: ui-env 10s 0s infinite; } .ui-mx__env.e2 { animation: ui-env 10s .9s infinite; } .ui-mx__env.e3 { animation: ui-env 10s 1.8s infinite; }
@keyframes ui-mx-off { 0%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes ui-mx-on { 0%, 52% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes ui-env { 0% { left: 18%; top: 50%; opacity: 0; } 3% { opacity: 1; } 15% { left: 44%; top: 74%; opacity: 1; } 17% { left: 46%; top: 75%; opacity: 0; } 52% { left: 50%; top: 64%; opacity: 0; } 54% { left: 50%; top: 62%; opacity: 1; } 63% { left: 50%; top: 40%; opacity: 1; } 65%, 100% { left: 50%; top: 38%; opacity: 0; } }
@media (max-width: 680px) { .ui-sec__body { grid-template-columns: 1fr; } .ui-mx__map { height: 330px; } .m1 { left: 50%; top: 15%; } .m2 { top: 50%; } .m3 { top: 85%; } .ui-mx__env { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ui-ev, .ui-dom__res li, .ui-vps__done { opacity: 1; } .ui-dom__q { width: 12ch; border: 0; } .ui-dom__ph { opacity: 0; }
  .ui-count { --threats: 3; } .ui-mig__foot .r, .ui-mx__st .off, .ui-mx__q .q, .ui-vps__spec .a { opacity: 0; } .ui-mx__env { display: none; } .ui-gauge .g1 { width: 46%; } .ui-gauge .g2 { width: 40%; }
}

/* home hero composition (replaces the video): product cards around a vBoxxCloud window */
.ui-hero { margin-top: 4px; }
.ui-hero__stage { position: relative; aspect-ratio: 650 / 420; text-align: left; font-size: 13px; color: var(--ink); }
.uh-glow { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,145,38,.22), rgba(232,145,38,0)); filter: blur(10px); animation: uh-glow 8s ease-in-out infinite; }
.uh-win, .uh-card, .uh-chip { position: absolute; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 24px 50px -24px rgba(23,28,38,.35), var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.uh-win { left: 14%; top: 10%; width: 64%; border-radius: 14px; overflow: hidden; animation: uh-float 9s ease-in-out infinite; }
.uh-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #F6F5F2; border-bottom: 1px solid var(--line-2); }
.uh-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E2DFD8; }
.uh-bar span { margin-left: 8px; font-size: 11.5px; color: var(--muted); }
.uh-body { padding: 12px 14px 14px; }
.uh-folder { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.uh-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.uh-body li { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 6px; border-radius: 8px; opacity: 0; animation: uh-row .6s var(--ease) forwards; animation-delay: calc(.5s + var(--n) * .15s); }
.uh-body li:first-child { background: var(--gold-50); }
.uh-body b { font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh-body small { font-size: 11px; color: var(--muted); }
.uh-ext { font-size: 9px; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 5px; color: #B4402D; background: #FBE9E5; }
.uh-body li:nth-child(2) .uh-ext { color: #2F6E8A; background: #E5F1F6; } .uh-body li:nth-child(3) .uh-ext { color: #5B6270; background: #EEF0F3; }
.uh-up { position: absolute; left: 48px; right: 60px; bottom: 3px; height: 3px; border-radius: 3px; background: #EFEDE8; overflow: hidden; }
.uh-up i { display: block; height: 100%; width: 0; background: var(--gold); animation: uh-up 6s ease-in-out infinite; }
.uh-card { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; max-width: 58%; }
.uh-card small { display: block; font-size: 10.5px; color: var(--muted); }
.uh-card b { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.uh-mail { right: 0; top: 0; animation: uh-float 7s ease-in-out -2s infinite; }
.uh-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--gold-700); background: var(--gold-50); }
.uh-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(232,145,38,.5); animation: ui-ping 2s infinite; }
.uh-vault { left: 0; bottom: 14%; animation: uh-float 8s ease-in-out -4s infinite; }
.uh-key { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #1F232A; position: relative; }
.uh-key::before { content: ""; position: absolute; left: 8px; top: 9px; width: 9px; height: 9px; border: 2px solid var(--gold); border-radius: 50%; }
.uh-key::after { content: ""; position: absolute; left: 17px; top: 14px; width: 7px; height: 2px; background: var(--gold); }
.uh-vault code { display: block; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.uh-totp { display: grid; grid-template-columns: 22px auto; column-gap: 6px; align-items: center; padding-left: 10px; border-left: 1px solid var(--line-2); }
.uh-totp svg { grid-row: span 2; width: 22px; height: 22px; transform: rotate(-90deg); }
.uh-totp circle { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 94.2; animation: ui-totp 9s linear infinite; }
.uh-totp b { font-size: 12px; letter-spacing: .04em; }
.uh-backup { right: 3%; bottom: 4%; animation: uh-float 7.5s ease-in-out -1s infinite; }
.uh-check { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #E4F4EB; position: relative; }
.uh-check::after { content: ""; position: absolute; left: 11px; top: 7px; width: 7px; height: 12px; border: solid #2F7A55; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.uh-prog { display: block; width: 130px; height: 4px; border-radius: 4px; background: #ECEAE5; margin-top: 6px; overflow: hidden; }
.uh-prog i { display: block; height: 100%; width: 100%; background: #2F9E44; animation: uh-prog 8s ease-in-out infinite; }
.uh-chip { left: 6%; top: 0; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; animation: uh-float 10s ease-in-out -6s infinite; }
.uh-chip i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; margin-left: 4px; box-shadow: 0 0 6px #3DDC84; }
.uh-chip i:first-child { margin-left: 0; }
.uh-chip em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 4px; }
/* the card that matches the word in "Discover …" stands out */
.ui-hero[data-active="0"] .uh-mail, .ui-hero[data-active="1"] .uh-vault, .ui-hero[data-active="2"] .uh-cloud, .ui-hero[data-active="3"] .uh-backup { border-color: #EBC48E; box-shadow: 0 30px 60px -24px rgba(232,145,38,.45), var(--shadow-sm); z-index: 3; }
.ui-hero[data-active="0"] .uh-mail, .ui-hero[data-active="1"] .uh-vault, .ui-hero[data-active="3"] .uh-backup { transform: scale(1.05); }
@keyframes uh-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes uh-glow { 0%, 100% { opacity: .8; } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes uh-row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes uh-up { 0% { width: 0; } 70%, 100% { width: 100%; } }
@keyframes uh-prog { 0% { width: 0; } 40%, 100% { width: 100%; } }
@media (max-width: 980px) { .ui-hero__stage { aspect-ratio: 650 / 470; } }
@media (max-width: 520px) { .ui-hero__stage { aspect-ratio: auto; display: grid; gap: 10px; } .uh-win, .uh-card, .uh-chip { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; animation: none; } .uh-glow, .uh-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-hero *, .ui-hero { animation: none !important; } .uh-body li { opacity: 1; } .uh-up { display: none; } }

/* vBoxxCloud beta band */
.beta-band { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid #F0D9B8; background: linear-gradient(100deg, #FFF8EE, #FDF3E8 60%, #FBE9D2); color: var(--ink); text-decoration: none; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.beta-band:hover { box-shadow: var(--shadow-gold); transform: translateY(-2px); }
.beta-band__tag { flex: none; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--gold); padding: 4px 12px; border-radius: 999px; }
.beta-band__txt { font-size: 15px; line-height: 1.55; color: var(--body); }
.beta-band__txt b { color: var(--ink); font-weight: 600; }
.beta-band__go { flex: none; margin-left: auto; font-weight: 500; font-size: 15px; color: var(--gold-700); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.beta-band__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.beta-band:hover .beta-band__go svg { transform: translateX(4px); }
@media (max-width: 760px) { .beta-band { flex-wrap: wrap; } .beta-band__go { margin-left: 0; } }

@media (max-width: 680px) {
  .ui-cloud__body, .ui-mail__body { grid-template-columns: 1fr; }
  .ui-cloud__nav { display: none; }
  .ui-term { font-size: 11px; }
}
/* No motion: show the end state */
@media (prefers-reduced-motion: reduce) {
  .ui-demo * { animation: none !important; }
  .ui-prog, .ui-toast { display: none; }
  .ui-event__btn .a { opacity: 0; } .ui-status .s-re { opacity: 0; }
  .ui-term p { width: 100%; }
}

/* ---------- Language hint (main.js) ---------- */
.lang-hint { position: fixed; left: 20px; bottom: 20px; z-index: 90; max-width: 420px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(23,28,38,.35); opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.lang-hint.is-in { opacity: 1; transform: none; }
.lang-hint p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.lang-hint__globe { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-50); color: var(--gold-700); grid-row: span 2; align-self: start; }
.lang-hint__globe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-hint .btn { grid-column: 2; justify-self: start; }
.lang-hint__x { grid-column: 3; grid-row: 1; align-self: start; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--muted); }
.lang-hint__x:hover { background: var(--bg-soft); color: var(--ink); }
@media (max-width: 520px) { .lang-hint { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .lang-hint { transition: none; } }

/* ==========================================================================
   Motion
   Subtle entrance and hover animations. Only active when the head snippet has
   set .motion (JS on, no reduced-motion preference); without JS nothing hides.
   ========================================================================== */
:root { --rv-dist: 18px; --rv-dur: .7s; --rv-ease: cubic-bezier(.16, 1, .3, 1); }

/* Scroll reveal: main.js adds .rv to these elements and .is-in when they enter the viewport */
.motion:not(.motion-off) .rv { opacity: 0; transform: translateY(var(--rv-dist)); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease); transition-delay: var(--rv-delay, 0s); }
.motion:not(.motion-off) .rv.is-in { opacity: 1; transform: none; }
.motion:not(.motion-off) .rv--fade { transform: none; }
.motion:not(.motion-off) .rv--left { transform: translateX(calc(var(--rv-dist) * -1)); }
.motion:not(.motion-off) .rv--right { transform: translateX(var(--rv-dist)); }
.motion:not(.motion-off) .rv--scale { transform: scale(.97); }

/* Hero: content rises in on page load */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.motion:not(.motion-off) .p-hero .container > :not(.p-hero__cards):not(.dc-stats),
.motion:not(.motion-off) .post-hero__inner > *,
.motion:not(.motion-off) .hero__copy > *,
.motion:not(.motion-off) .hero__media { animation: rise .8s var(--rv-ease) both; }
.motion .p-hero .container > :nth-child(2), .motion .post-hero__inner > :nth-child(2), .motion .hero__copy > :nth-child(2) { animation-delay: .08s; }
.motion .p-hero .container > :nth-child(3), .motion .post-hero__inner > :nth-child(3), .motion .hero__copy > :nth-child(3) { animation-delay: .16s; }
.motion .p-hero .container > :nth-child(4), .motion .post-hero__inner > :nth-child(4), .motion .hero__copy > :nth-child(4), .motion .hero__media { animation-delay: .24s; }
.motion .p-hero .container > :nth-child(n+5) { animation-delay: .32s; }
.motion:not(.motion-off) .p-hero__cards > *, .motion:not(.motion-off) .dc-stats > * { animation: rise .8s var(--rv-ease) both; }
.motion .p-hero__cards > :nth-child(1), .motion .dc-stats > :nth-child(1) { animation-delay: .34s; }
.motion .p-hero__cards > :nth-child(2), .motion .dc-stats > :nth-child(2) { animation-delay: .42s; }
.motion .p-hero__cards > :nth-child(3), .motion .dc-stats > :nth-child(3) { animation-delay: .5s; }
.motion .p-hero__cards > :nth-child(4) { animation-delay: .58s; }

/* Hero ambient light drifts slowly */
@keyframes drift { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(2%, 3%, 0) scale(1.04); } 100% { transform: translate3d(0, 0, 0); } }
.p-hero--diag::before { animation: drift 18s ease-in-out infinite; will-change: transform; }

/* Highlighted words in headings get a soft underline sweep */
@keyframes sweep { from { background-size: 0 .12em; } to { background-size: 100% .12em; } }
.motion .p-hero h1 span { background-image: linear-gradient(rgba(232, 145, 38, .22), rgba(232, 145, 38, .22)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% .12em; animation: sweep 1s .5s var(--rv-ease) both; }

/* Cards: lift and icon nudge on hover */
.fcard, .help__card, .igrid__item, .dc-card, .ocard, .el-card, .post-card a, .pcard, .vcard { transition: transform .35s var(--rv-ease), box-shadow .35s var(--rv-ease), border-color .25s; }
.fcard:hover, .help__card:hover, .dc-card:hover, .ocard:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -24px rgba(23, 28, 38, .28); }
.fcard__icon, .checklist__icon, .igrid__item .ig-icon, .help__card .ig-icon, .mac-uses [data-i] { transition: transform .35s var(--rv-ease), background-color .25s, color .25s; }
.fcard:hover .fcard__icon, .igrid__item:hover .ig-icon, .help__card:hover .ig-icon, .mac-uses a:hover [data-i] { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.checklist li:hover .checklist__icon { transform: scale(1.08); background: var(--gold); color: #fff; }

/* Buttons: icon slides a little on hover, soft press */
.btn [data-i] { transition: transform .3s var(--rv-ease); }
.btn:hover [data-i="arrow"], .btn:hover [data-i="right"] { transform: translateX(3px); }
.btn:hover [data-i="cart"], .btn:hover [data-i="mail"], .btn:hover [data-i="calendar"], .btn:hover [data-i="apple"], .btn:hover [data-i="cloud"] { transform: translateY(-1px) rotate(-8deg); }
.btn:active { transform: translateY(0) scale(.98); }

/* Gold bands: slow sheen on hover */
.cta-band, .bundle { background-size: 160% 160%; background-position: 0% 50%; transition: background-position 1.2s var(--rv-ease), box-shadow .35s; }
.cta-band:hover, .bundle:hover { background-position: 100% 50%; }

/* FAQ: smooth open/close where the browser supports animating to auto height */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--rv-ease), content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Tables: rows highlight as you move over them */
.ptable tbody tr { transition: background-color .2s; }

/* Configurator: bays fill with a small pop, price changes fade */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.nas__bay.is-new { animation: pop .35s var(--rv-ease); }
@keyframes tick { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.nas__price b.is-changed { animation: tick .35s var(--rv-ease); }

/* Counters and stats */
.stat__num, .dc-stat b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .p-hero--diag::before { animation: none; }
  .fcard:hover, .help__card:hover, .dc-card:hover, .ocard:hover { transform: none; }
}
.price-row .bcalc p { font-family: var(--f-ui); max-width: none; }
.price-row .bcalc .bcalc__price { margin: 0 0 12px; line-height: 1.3; }
.price-row .bcalc .bcalc__price b { color: var(--ink); }
.price-row .bcalc .bcalc__more { font-size: 13px; line-height: 1.5; color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.search { align-content: center; }
.bcalc__cycle { margin: 0 0 14px; }

/* ---------- vBoxxCloud (new) interface rebuild: figure.vc, markup from vcdemo.py, scenes cycled by main.js ---------- */
.vc { --vo: #E8731F; --vt: #111827; --vm: #6B7280; --vl: #E5E7EB; --vbg: #F9FAFB; max-width: 1080px; margin: 0 auto; }
.vc-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.vc-tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--f-head); color: var(--body); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 11px 18px; cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s; }
.vc-tabs button[aria-selected="true"] { color: var(--ink); border-color: #EBC48E; box-shadow: var(--shadow-sm); }
.vc-tabs .vc-i { width: 17px; height: 17px; stroke: var(--gold); }
.vc-tabs__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); }
.vc.is-live .vc-tabs button[aria-selected="true"] .vc-tabs__bar { animation: vc-grow var(--vc-dur, 7s) linear forwards; }
@keyframes vc-grow { to { width: 100%; } }
.vc-win { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #DCDFE4; box-shadow: 0 40px 80px -40px rgba(23,28,38,.45), var(--shadow-sm); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; color: var(--vt); text-align: left; }
.vc-chrome { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #E8EEF8; }
.vc-chrome > i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; } .vc-chrome > i:nth-child(2) { background: #FEBC2E; } .vc-chrome > i:nth-child(3) { background: #28C840; }
.vc-addr { margin-left: 14px; flex: 0 1 380px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 12px; color: #374151; }
.vc-addr .vc-i { width: 12px; height: 12px; } .vc-addr em { font-style: normal; display: none; }
.vc[data-scene="0"] .vc-addr em[data-s="0"], .vc[data-scene="1"] .vc-addr em[data-s="1"], .vc[data-scene="2"] .vc-addr em[data-s="2"], .vc[data-scene="3"] .vc-addr em[data-s="3"], .vc[data-scene="4"] .vc-addr em[data-s="4"] { display: inline; }
.vc-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vc-app { display: grid; grid-template-columns: 196px 1fr; height: 620px; font-size: 13px; }
.vc-side { display: flex; flex-direction: column; border-right: 1px solid var(--vl); padding: 0 10px 12px; min-width: 0; }
.vc-brand { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 6px; border-bottom: 1px solid var(--vl); margin: 0 -10px 8px; padding-left: 16px; font-size: 15.5px; }
.vc-logo { width: 24px; height: 24px; flex: none; }
.vc-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.vc-nav li { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px; color: #1F2937; white-space: nowrap; }
.vc-nav li span { overflow: hidden; text-overflow: ellipsis; } .vc-nav li .vc-i:last-child:not(:first-child) { margin-left: auto; width: 13px; color: var(--vm); }
.vc-nav hr { border: 0; border-top: 1px solid var(--vl); margin: 4px 0; }
.vc-nav__on { background: #EEF2F8; color: #2B59C3 !important; }
.vc-nav__app .vc-logo { width: 18px; height: 18px; } .vc-nav__app em { width: 7px; height: 7px; border-radius: 50%; background: #D1D5DB; }
.vc[data-scene="2"] .vc-nav__on { background: none; color: #1F2937 !important; }
.vc[data-scene="2"] .vc-nav__sign { background: #EEF2F8; color: #2B59C3; }
.vc-me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 4px 8px; border-top: 1px solid var(--vl); }
.vc-me > span:nth-child(2) { min-width: 0; } .vc-me b, .vc-me small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-me b { font-weight: 600; font-size: 12.5px; } .vc-me small { font-size: 10.5px; color: var(--vm); } .vc-me > .vc-i { color: var(--vm); margin-left: auto; }
.vc-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: #B8326A; }
.vc-quota span { display: flex; justify-content: space-between; font-size: 11px; color: var(--vm); } .vc-quota em { font-style: normal; color: var(--vt); }
.vc-quota > i { display: block; height: 4px; border-radius: 4px; background: #EEF0F3; margin: 5px 0 4px; } .vc-quota > i b { display: block; width: 3%; height: 100%; border-radius: 4px; background: var(--vo); }
.vc-quota small { font-size: 10.5px; color: var(--vm); }
.vc-body { display: flex; flex-direction: column; min-width: 0; }
.vc-top { display: flex; align-items: center; gap: 16px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--vl); }
.vc-search { flex: 0 1 420px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; margin: 0 auto; border-radius: 8px; background: #F3F4F6; color: #9CA3AF; }
.vc-top__ic { display: flex; gap: 18px; color: #374151; } .vc-bell { position: relative; display: flex; }
.vc-bell em { position: absolute; top: -7px; right: -8px; min-width: 15px; height: 15px; border-radius: 9px; background: var(--vo); color: #fff; font: 600 9.5px/15px sans-serif; text-align: center; font-style: normal; }
.vc-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vc-scene { position: absolute; inset: 0; display: none; grid-template-columns: 1fr 230px; }
.vc[data-scene="0"] .vc-s0, .vc[data-scene="1"] .vc-s1, .vc[data-scene="3"] .vc-s3 { display: grid; }
.vc[data-scene="2"] .vc-s2 { display: block; }
.vc-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.vc-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--vl); }
.vc-bar b { display: flex; align-items: center; gap: 6px; font-weight: 500; } .vc-bar b .vc-i:first-child { color: var(--vo); } .vc-bar b .vc-i:last-child { width: 13px; }
.vc-muted { color: var(--vm); }
.vc-tools { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; }
.vc-tools > b { font-weight: 500; font-size: 14px; margin-right: auto; white-space: nowrap; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--vl); border-radius: 7px; background: #fff; font-weight: 500; white-space: nowrap; }
.vc-btn .vc-i { width: 14px; height: 14px; }
.vc-btn--or { background: var(--vo); border-color: var(--vo); color: #fff; } .vc-btn--flat { border-color: transparent; }
.vc-btn--blue { background: #EEF4FE; border-color: #DCE7FB; color: #2B59C3; }
.vc-btn--ghost { color: var(--vt); } .vc-btn--wide { width: 100%; height: 34px; }
.vc-box { width: 14px; height: 14px; border: 1.5px solid var(--vo); border-radius: 50%; }
.vc-views { display: flex; gap: 2px; padding-left: 8px; border-left: 1px solid var(--vl); color: #374151; }
.vc-views .vc-i, .vc-views em .vc-i { width: 15px; height: 15px; margin: 6px; } .vc-views em { background: #EEF2F8; border-radius: 6px; display: flex; }
.vc-filter { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 16px 6px; padding: 0 10px; border: 1px solid var(--vl); border-radius: 8px; color: #9CA3AF; }
.vc-rows { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.vc-rows li { position: relative; display: grid; grid-template-columns: 30px 1fr 64px 92px 40px; gap: 10px; align-items: center; height: 37px; padding: 0 16px; border-bottom: 1px solid #F0F1F3; white-space: nowrap; }
.vc-rows li > b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .vc-rows li > span:not(:first-child) { color: #4B5563; font-size: 12px; }
.vc-fold { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #FDF1E6; color: #EF9A3C; } .vc-fold .vc-i { width: 15px; }
.vc-doc { width: 26px; height: 22px; display: grid; place-items: center; border-radius: 4px; font: 700 7.5px/1 sans-serif; color: #B4402D; background: #FBE9E5; }
.vc-doc--xlsx { color: #1F7A4D; background: #E3F3EA; }
.vc-sel { background: #FFF6EE; }
.vc-up { display: none !important; }
.vc-prog { position: absolute; left: 56px; right: 160px; bottom: 5px; height: 3px; border-radius: 3px; background: #EEF0F3; overflow: hidden; } .vc-prog b { display: block; height: 100%; background: var(--vo); width: 0; }
.vc-detail { border-left: 1px solid var(--vl); padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.vc-detail__h { align-self: stretch; display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 -16px; padding: 0 14px; border-bottom: 1px solid var(--vl); color: var(--vm); }
.vc-detail__h span { margin-right: auto; } .vc-detail__h .vc-i { width: 15px; color: #374151; }
.vc-thumb { width: 118px; height: 120px; margin-top: 6px; padding: 12px 10px; border: 1px solid var(--vl); border-radius: 8px; display: grid; gap: 6px; align-content: start; box-shadow: var(--shadow-sm); }
.vc-thumb i { height: 5px; border-radius: 3px; background: #E5E7EB; } .vc-thumb i:first-child { width: 60%; background: #9CA3AF; } .vc-thumb i:nth-child(3n) { width: 75%; } .vc-thumb i:nth-child(4) { height: 18px; background: #F3F4F6; }
.vc-detail__n { font-weight: 500; text-align: center; font-size: 12.5px; word-break: break-all; } .vc-detail > small { color: var(--vm); font-size: 11px; margin-top: -6px; }
.vc-icons { display: flex; gap: 6px; } .vc-icons .vc-i { width: 28px; height: 28px; padding: 6px; border: 1px solid var(--vl); border-radius: 7px; }
.vc-detail dl { align-self: stretch; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--vl); font-size: 12px; } .vc-detail dt { color: var(--vm); } .vc-detail dd { margin: 0; text-align: right; }
/* scene 0: upload */
.vc-s0 .vc-btn--pulse { animation: vc-press 6.5s 1 both; }
.vc-s0 .vc-up { display: grid !important; animation: vc-row 6.5s 1 both; }
.vc-s0 .vc-prog b { animation: vc-fill 6.5s 1 both; }
.vc-s0 .vc-up .vc-prog { animation: vc-hide 6.5s 1 both; }
@keyframes vc-press { 0%, 8% { transform: none; box-shadow: none; } 11% { transform: scale(.94); box-shadow: 0 0 0 5px rgba(232,115,31,.25); } 15%, 100% { transform: none; box-shadow: none; } }
@keyframes vc-row { 0%, 15% { opacity: 0; height: 0; } 22%, 100% { opacity: 1; height: 37px; background: #FFF6EE; } }
@keyframes vc-fill { 0%, 20% { width: 0; } 70%, 100% { width: 100%; } }
@keyframes vc-hide { 0%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
/* scene 1: share */
.vc-dim { position: absolute; inset: 0; background: rgba(17,24,39,.55); animation: vc-fade .4s both; }
.vc-modal { position: absolute; left: 50%; top: 50%; width: 430px; translate: -50% -50%; background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); animation: vc-pop .45s .15s both; }
.vc-modal__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .vc-modal__h b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.vc-modal__h span { color: var(--vm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc-modal__h .vc-i { margin-left: auto; align-self: center; color: var(--vm); }
.vc-cap { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--vm); margin-bottom: 8px; }
.vc-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vc-quick span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px solid var(--vl); border-radius: 8px; font-size: 12px; } .vc-quick .vc-i { color: var(--vo); }
.vc-quick__pick { animation: vc-pick 7.5s both; }
@keyframes vc-pick { 0%, 20% { border-color: var(--vl); background: #fff; } 24%, 100% { border-color: var(--vo); background: #FFF4EB; } }
.vc-or { position: relative; text-align: center; margin: 12px 0; font-size: 11.5px; color: var(--vm); } .vc-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--vl); } .vc-or span { position: relative; background: #fff; padding: 0 10px; }
.vc-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 8px; background: #F3F4F6; margin-bottom: 12px; } .vc-seg span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 6px; color: var(--vm); font-size: 12px; } .vc-seg .on { background: #fff; color: var(--vt); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.vc-chk { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .vc-chk i { width: 15px; height: 15px; border: 1.5px solid var(--vo); border-radius: 4px; }
.vc-field { display: flex; align-items: center; gap: 10px; } .vc-field span { font-weight: 500; white-space: nowrap; } .vc-field em { flex: 1; font-style: normal; color: var(--vm); border: 1px solid var(--vl); border-radius: 7px; padding: 7px 10px; }
.vc-share__a { animation: vc-out 7.5s both; }
.vc-share__b { position: absolute; left: 20px; right: 20px; top: 52px; animation: vc-in 7.5s both; }
@keyframes vc-out { 0%, 30% { opacity: 1; visibility: visible; } 34%, 100% { opacity: 0; visibility: hidden; } }
@keyframes vc-in { 0%, 31% { opacity: 0; visibility: hidden; transform: translateY(8px); } 37%, 100% { opacity: 1; visibility: visible; transform: none; } }
.vc-active { padding: 14px; border: 1px solid #F6D9C3; border-radius: 10px; background: #FDF6F1; display: grid; gap: 10px; }
.vc-active__h { display: flex; align-items: center; gap: 6px; color: var(--vo); } .vc-active__h b { font-weight: 500; } .vc-active__h span { margin-left: auto; display: flex; gap: 4px; align-items: center; font-size: 11.5px; color: #D9534F; } .vc-active__h span .vc-i { width: 13px; }
.vc-url { display: flex; gap: 6px; } .vc-url code { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11.5px; padding: 7px 9px; background: #fff; border: 1px solid var(--vl); border-radius: 7px; } .vc-url span { display: grid; place-items: center; width: 32px; background: #fff; border: 1px solid var(--vl); border-radius: 7px; }
.vc-via { display: flex; align-items: center; gap: 6px; } .vc-via small { color: var(--vm); margin-right: 4px; } .vc-via .vc-btn { height: 28px; font-size: 12px; }
.vc-active > small { font-size: 11.5px; }
.vc-direct { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #F3E3D6; color: var(--vm); } .vc-direct .vc-i { width: 13px; }
.vc-tog { margin-left: auto; width: 30px; height: 17px; border-radius: 9px; background: #E5E7EB; position: relative; } .vc-tog::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.vc-close { display: block; text-align: right; margin-top: 12px; font-weight: 500; }
.vc-toast { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #fff; border-radius: 9px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); font-weight: 500; animation: vc-toast 7.5s both; }
.vc-toast .vc-i { width: 17px; height: 17px; padding: 3px; border-radius: 50%; background: #111827; color: #fff; stroke-width: 3; }
@keyframes vc-toast { 0%, 36% { opacity: 0; transform: translateY(14px); } 41%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes vc-fade { from { opacity: 0; } }
@keyframes vc-pop { from { opacity: 0; scale: .94; } }
/* scene 2: signing */
.vc-main--sign { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 210px; background: var(--vbg); }
.vc-signpage { position: relative; padding: 16px 22px; overflow: hidden; }
.vc-steps { list-style: none; margin: 0 auto 16px; padding: 0; display: flex; justify-content: center; gap: 46px; counter-reset: s; }
.vc-steps li { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--vm); position: relative; }
.vc-steps li + li::before { content: ""; position: absolute; right: calc(50% + 20px); top: 15px; width: 52px; border-top: 2px solid var(--vl); }
.vc-steps span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F3F4F6; }
.vc-steps li:nth-child(1) span { background: #E9F6EE; color: #2F9E44; } .vc-steps li:nth-child(2) { color: var(--vo); } .vc-steps li:nth-child(2) span { background: #FDEFE4; color: var(--vo); box-shadow: 0 0 0 2px var(--vo); }
.vc-steps li:nth-child(3) span { animation: vc-step3 8s both; }
@keyframes vc-step3 { 0%, 60% { background: #F3F4F6; color: var(--vm); } 64%, 100% { background: #E9F6EE; color: #2F9E44; } }
.vc-card { background: #fff; border: 1px solid var(--vl); border-radius: 12px; padding: 16px 18px; }
.vc-sigcard { display: grid; gap: 8px; animation: vc-out2 8s both; } .vc-sigcard > b { font-size: 14px; font-weight: 600; } .vc-sigcard > small { color: var(--vm); margin-top: -6px; }
@keyframes vc-out2 { 0%, 60% { opacity: 1; visibility: visible; } 64%, 100% { opacity: 0; visibility: hidden; } }
.vc-pad { position: relative; height: 110px; border: 1.5px solid var(--vo); border-radius: 9px; } .vc-pad svg { width: 100%; height: 100%; }
.vc-ink { fill: none; stroke: #1F232A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: vc-draw 8s both; }
@keyframes vc-draw { 0%, 6% { stroke-dashoffset: 900; } 32%, 100% { stroke-dashoffset: 0; } }
.vc-line { stroke: #E5E7EB; stroke-width: 1; } .vc-x { position: absolute; left: 16px; bottom: 8px; color: #9CA3AF; font-size: 13px; }
.vc-sigrow { display: flex; justify-content: space-between; align-items: center; }
.vc-ok { display: flex; align-items: center; gap: 5px; color: #2F9E44; font-weight: 500; animation: vc-show 8s both; } .vc-ok .vc-i { width: 14px; }
@keyframes vc-show { 0%, 34% { opacity: 0; } 38%, 100% { opacity: 1; } }
.vc-typed { padding: 8px 12px; border: 1px dashed var(--vl); border-radius: 8px; animation: vc-show2 8s both; } .vc-typed small { display: block; font-size: 11px; color: var(--vm); }
.vc-typed span { font: italic 22px/1.3 "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; }
@keyframes vc-show2 { 0%, 40% { opacity: 0; } 44%, 100% { opacity: 1; } }
.vc-signbtn { justify-self: end; height: 34px; padding: 0 22px; animation: vc-press2 8s both; }
@keyframes vc-press2 { 0%, 53% { transform: none; } 56% { transform: scale(.93); box-shadow: 0 0 0 5px rgba(232,115,31,.25); } 59%, 100% { transform: none; } }
.vc-thanks { position: absolute; left: 22px; right: 22px; top: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px; animation: vc-in2 8s both; }
@keyframes vc-in2 { 0%, 62% { opacity: 0; visibility: hidden; transform: translateY(10px); } 67%, 100% { opacity: 1; visibility: visible; transform: none; } }
.vc-bigcheck { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid #2F9E44; display: grid; place-items: center; color: #2F9E44; } .vc-bigcheck .vc-i { width: 22px; height: 22px; stroke-width: 2.6; }
.vc-thanks > b { font-size: 18px; font-weight: 600; } .vc-thanks > small { color: var(--vm); }
.vc-thanks__doc { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; background: #F3F4F6; border-radius: 9px; } .vc-thanks__doc > span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 500; overflow: hidden; white-space: nowrap; }
.vc-signside { border-left: 1px solid var(--vl); background: #fff; padding: 0 14px; }
.vc-signside__h { display: flex; align-items: center; gap: 8px; height: 56px; margin: 0 -14px 12px; padding: 0 14px; border-bottom: 1px solid var(--vl); } .vc-signside__h span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #FDEFE4; color: var(--vo); } .vc-signside__h b { font-weight: 600; }
.vc-part { display: flex; gap: 10px; padding: 10px; border: 1px solid #F6D9C3; background: #FDF6F1; border-radius: 9px; } .vc-part > span { min-width: 0; font-weight: 500; } .vc-part em { color: var(--vo); font-style: normal; font-weight: 400; } .vc-part small { display: block; color: var(--vm); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
/* scene 3: Alan */
.vc-alan { position: absolute; top: 0; right: 0; bottom: 0; width: 330px; background: #fff; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,.12); animation: vc-slide .45s .1s both; }
@keyframes vc-slide { from { transform: translateX(100%); } }
.vc-alan__h { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; } .vc-alan__h > .vc-i:first-child { color: var(--vo); width: 19px; height: 19px; } .vc-alan__h b { font-size: 15px; font-weight: 600; margin-right: auto; } .vc-alan__h .vc-i { color: #374151; }
.vc-model { display: flex; align-items: center; gap: 7px; margin: 0 14px 10px; padding: 7px 10px; border: 1px solid var(--vl); border-radius: 8px; font-size: 12px; } .vc-model .vc-i:last-child { margin-left: auto; width: 13px; } .vc-model .vc-i { width: 13px; }
.vc-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--vbg); border-top: 1px solid var(--vl); overflow: hidden; }
.vc-q { align-self: flex-end; max-width: 85%; padding: 10px 12px; border-radius: 12px; background: var(--vo); color: #fff; line-height: 1.45; animation: vc-msg 8s both; }
@keyframes vc-msg { 0%, 8% { opacity: 0; transform: translateY(8px); } 12%, 100% { opacity: 1; transform: none; } }
.vc-think { align-self: flex-start; display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 9px; background: #EEF0F3; color: var(--vm); font-size: 12px; animation: vc-think 8s both; }
.vc-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--vo); animation: vc-dot 1s infinite; } .vc-think i:nth-child(2) { animation-delay: .15s; } .vc-think i:nth-child(3) { animation-delay: .3s; margin-right: 4px; }
@keyframes vc-think { 0%, 14% { opacity: 0; display: flex; } 16%, 36% { opacity: 1; } 38%, 100% { opacity: 0; display: none; } }
@keyframes vc-dot { 50% { opacity: .3; } }
.vc-a { align-self: flex-start; max-width: 92%; padding: 10px 12px; border-radius: 12px; background: #EEF0F3; line-height: 1.5; animation: vc-a 8s both; } .vc-a p { margin: 0 0 5px; animation: vc-ap 8s both; animation-delay: calc(var(--n) * .45s); } .vc-a b { font-weight: 600; }
@keyframes vc-a { 0%, 37% { opacity: 0; } 39%, 100% { opacity: 1; } }
@keyframes vc-ap { 0%, 40% { opacity: 0; transform: translateY(4px); } 45%, 100% { opacity: 1; transform: none; } }
.vc-chips { display: flex; flex-wrap: nowrap; gap: 6px; padding: 10px 14px 6px; } .vc-chips span:nth-child(3) { display: none; }
.vc-chips span { white-space: nowrap; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--vl); border-radius: 7px; font-size: 11.5px; } .vc-chips .vc-i { width: 13px; }
.vc-input { display: flex; gap: 8px; margin: 4px 14px 4px; } .vc-input span { flex: 1; padding: 8px 10px; border: 1px solid var(--vl); border-radius: 8px; color: #9CA3AF; } .vc-input em { width: 34px; display: grid; place-items: center; border-radius: 8px; background: #F4B88C; color: #fff; }
.vc-note { text-align: center; font-size: 10px; color: var(--vm); padding: 0 10px 10px; }
/* paused when off screen (shared .ui-demo rule), mini version for the news card */
.vc--mini { display: block; position: absolute; left: 50%; top: 26px; width: 880px; translate: -50% 0; scale: .5; transform-origin: top center; pointer-events: none; }
.news-card__art { height: 230px !important; }
.news-card--cloud .news-card__art { place-items: start center; }
.vc--mini .vc-win { box-shadow: 0 30px 60px -20px rgba(162,96,17,.45); }
@media (max-width: 860px) {
  .vc-app { grid-template-columns: 1fr; height: 500px; } .vc-side, .vc-detail, .vc-signside { display: none; }
  .vc-scene { grid-template-columns: 1fr; } .vc-main--sign { grid-template-columns: 1fr; }
  .vc-rows li { grid-template-columns: 30px 1fr 56px; } .vc-rows li > span:nth-child(4), .vc-rows li > span:nth-child(5) { display: none; } .vc-prog { right: 80px; }
  .vc-modal { width: calc(100% - 24px); } .vc-alan { width: 100%; } .vc-views, .vc-btn--flat, .vc-top__ic { display: none; }
  .vc-steps { gap: 26px; } .vc-steps li + li::before { display: none; } .vc-addr { flex-basis: auto; }
  .vc-tabs { flex-wrap: nowrap; gap: 6px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .vc-tabs button { white-space: nowrap; flex: none; } .vc-tools > .vc-btn:first-of-type { display: none; } .vc-tabs button { padding: 9px 11px; font-size: 13px; gap: 6px; } .vc-tabs .vc-i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vc .vc-share__a, .vc .vc-sigcard, .vc .vc-think, .vc .vc-up .vc-prog { display: none !important; }
  .vc .vc-share__b, .vc .vc-thanks { position: static; opacity: 1; visibility: visible; } .vc .vc-ink { stroke-dashoffset: 0; }
}
/* the mini interface in the news card always uses the desktop layout, only smaller */
@media (max-width: 860px) {
  .vc--mini .vc-app { grid-template-columns: 196px 1fr; height: 620px; } .vc--mini .vc-side, .vc--mini .vc-detail { display: flex; } .vc--mini .vc-signside { display: block; }
  .vc--mini .vc-scene { grid-template-columns: 1fr 230px; } .vc--mini .vc-main--sign { grid-template-columns: 1fr 210px; }
  .vc--mini .vc-rows li { grid-template-columns: 30px 1fr 64px 92px 40px; } .vc--mini .vc-rows li > span:nth-child(4), .vc--mini .vc-rows li > span:nth-child(5) { display: block; } .vc--mini .vc-prog { right: 160px; }
  .vc--mini .vc-views, .vc--mini .vc-top__ic { display: flex; } .vc--mini .vc-btn--flat, .vc--mini .vc-tools > .vc-btn:first-of-type { display: inline-flex; }
  .vc--mini .vc-modal { width: 430px; } .vc--mini .vc-alan { width: 330px; } .vc--mini .vc-addr { flex-basis: 380px; }
}
@media (max-width: 520px) { .vc--mini { scale: .4; } .news-card--cloud .news-card__art { height: 200px !important; } }

/* ---------- vBoxxConnect interface rebuild (figure.vc.vx, markup from vxdemo.py) ---------- */
.vx .vc-scene { grid-template-columns: none; }
.vx .vc-scene.vx-s { display: none; }
.vx[data-scene="0"] .vc-s0, .vx[data-scene="1"] .vc-s1, .vx[data-scene="2"] .vc-s2, .vx[data-scene="3"] .vc-s3, .vx[data-scene="4"] .vc-s4 { display: block; }
.vx-a { animation: vx-in .35s var(--a, 0s) both; }
.vx-ab { animation: vx-in .35s var(--a, 0s) both, vx-out .3s var(--b, 99s) forwards; }
.vx-off { display: none !important; }
@keyframes vx-in { from { opacity: 0; transform: translateY(5px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }
@keyframes vx-out { to { opacity: 0; visibility: hidden; } }
.vx-type { font-style: normal; display: inline-block; vertical-align: bottom; white-space: nowrap; clip-path: inset(0 100% 0 0); animation: vx-type .7s steps(14) var(--a, 0s) forwards; }
.vx-type--long { animation-duration: 1.4s; animation-timing-function: steps(40); white-space: normal; clip-path: inset(0 100% 0 0); }
.vx-type.vx-ab { animation: vx-type .5s steps(6) var(--a) forwards, vx-out .2s var(--b) forwards; }
@keyframes vx-type { to { clip-path: inset(0 0 0 0); } }
/* sidebar: Connect expanded, active item per scene */
.vx .vc-nav__on { background: none; color: inherit !important; }
.vx-app { font-weight: 500; } .vx-app .vc-logo { width: 18px; height: 18px; } .vx-app em { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; } .vx-app .vc-i:last-child { margin-left: auto; width: 13px; color: var(--vm); }
.vx-sub { padding-left: 22px !important; }
.vx[data-sub="mail"] .vx-sub[data-sub="mail"], .vx[data-sub="cal"] .vx-sub[data-sub="cal"], .vx[data-sub="tasks"] .vx-sub[data-sub="tasks"], .vx[data-sub="contacts"] .vx-sub[data-sub="contacts"], .vx[data-sub="meet"] .vx-sub[data-sub="meet"] { background: #EEF2F8; color: #2B59C3; }
.vx-sub[data-sub="meet"] { padding-left: 8px !important; }
/* mail */
.vx-mail { position: absolute; inset: 0; display: grid; grid-template-columns: 172px 256px 1fr; }
.vx-fold { border-right: 1px solid var(--vl); padding: 12px 8px; } .vx-fold ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; }
.vx-new { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 8px; background: var(--vo); color: #fff; font-weight: 500; }
.vx-fold li { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 7px; white-space: nowrap; font-size: 12px; color: #374151; }
.vx-fold li span { overflow: hidden; text-overflow: ellipsis; } .vx-fold li.on { background: #FDF1E6; color: var(--vt); font-weight: 500; } .vx-fold li.on .vc-i { color: var(--vo); }
.vx-fold li em { margin-left: auto; font-style: normal; font-size: 10.5px; min-width: 18px; text-align: center; padding: 1px 4px; border-radius: 9px; background: #FDE7D5; color: #C2410C; }
.vx-list { border-right: 1px solid var(--vl); display: flex; flex-direction: column; min-width: 0; }
.vx-list__h { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--vl); } .vx-list__h b { font-weight: 600; margin-right: auto; } .vx-chk { border-color: #9CA3AF !important; border-radius: 4px !important; }
.vx-list__s { display: flex; align-items: center; gap: 7px; margin: 8px 10px; padding: 6px 9px; border-radius: 7px; background: #F3F4F6; color: #9CA3AF; }
.vx-list ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.vx-list li { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #F0F1F3; border-left: 3px solid transparent; }
.vx-list li > span:nth-child(2) { min-width: 0; } .vx-list li b, .vx-list li small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vx-list li b { font-weight: 500; } .vx-list li small { color: var(--vm); font-size: 11.5px; }
.vx-list li time { align-self: start; font-size: 10.5px; color: var(--vm); }
.vx-list li.on { background: #EEF2F8; border-left-color: var(--vo); }
.vx-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F8; color: #2B4C7E; font-size: 10.5px; font-weight: 600; }
.vx-av--vc { background: #fff; border: 1px solid var(--vl); } .vx-av--vc .vc-logo { width: 15px; height: 15px; }
.vx-fresh { animation: vx-fresh .6s .5s both; background: #FFF7F0; } .vx-fresh b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vo); margin-right: 6px; vertical-align: middle; }
@keyframes vx-fresh { from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; max-height: 60px; } }
.vx-read { position: relative; min-width: 0; display: flex; flex-direction: column; }
.vx-read__bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--vl); color: #374151; }
.vx-read__bar > span:first-child { display: flex; gap: 6px; align-items: center; font-weight: 500; }
.vx-ai { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #FDF1E6; border: 1px solid #F6D3B5; color: var(--vo); font-weight: 600; animation: vx-press 0.4s 1.5s both; } .vx-ai .vc-i { width: 14px; }
@keyframes vx-press { 50% { transform: scale(.92); box-shadow: 0 0 0 5px rgba(232,115,31,.2); } }
.vx-sp { flex: 1; }
.vx-menu { position: absolute; z-index: 3; left: 150px; top: 40px; width: 230px; padding: 6px; background: #fff; border: 1px solid var(--vl); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.3); }
.vx-menu small { display: block; padding: 6px 8px 3px; font-size: 10px; letter-spacing: .06em; color: var(--vm); }
.vx-menu span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; } .vx-menu span .vc-i { width: 14px; } .vx-menu span .vc-i:last-child:not(:first-child) { margin-left: auto; width: 12px; }
.vx-menu span:last-child .vc-i { color: var(--vo); } .vx-menu hr { border: 0; border-top: 1px solid var(--vl); margin: 4px 0; }
.vx-hit { animation: vx-hit .3s 3.2s both; } @keyframes vx-hit { to { background: #FDF1E6; color: var(--vo); } }
.vx-read__body { padding: 16px 20px; overflow: hidden; } .vx-read__body h4 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.vx-from { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--vl); }
.vx-from .vx-av { width: 34px; height: 34px; } .vx-from b { font-weight: 600; } .vx-from small { color: var(--vm); font-size: 11.5px; } .vx-from small + small { display: block; } .vx-from time { font-size: 11px; color: var(--vm); }
.vx-sum { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFF6EE; border: 1px solid #F6D9C3; }
.vx-sum > b { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--vo); font-size: 12.5px; } .vx-sum ul { margin: 6px 0 0; padding-left: 18px; } .vx-sum li { font-size: 12.5px; line-height: 1.5; animation: vx-in .35s var(--a) both; }
.vx-msg { padding-top: 12px; line-height: 1.55; color: #1F2937; } .vx-msg p { margin: 0 0 8px; }
.vx-att { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--vl); border-radius: 8px; font-weight: 500; } .vx-att .vc-i { color: #1F7A4D; } .vx-att small { color: var(--vm); font-weight: 400; }
/* compose */
.vx-dim { position: absolute; inset: 0; background: rgba(17,24,39,.55); animation: vc-fade .3s both; }
.vx-sc-cal .vx-dim, .vx-sc-contacts .vx-dim { z-index: 2; }
.vx-modal__h { display: flex; align-items: center; gap: 10px; } .vx-modal__h b { font-size: 15px; font-weight: 600; } .vx-modal__h small { color: var(--vm); font-size: 11.5px; } .vx-modal__h > .vc-i { margin-left: auto; color: var(--vm); }
.vx-compose { position: absolute; left: 50%; top: 18px; bottom: 18px; width: 600px; translate: -50% 0; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); animation: vc-pop .4s both; overflow: hidden; }
.vx-compose > .vx-modal__h { padding: 14px 18px; border-bottom: 1px solid var(--vl); }
.vx-field { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--vl); min-height: 38px; } .vx-field > span:first-child { width: 60px; color: var(--vm); }
.vx-to { flex: 1; display: flex; align-items: center; gap: 6px; position: relative; } .vx-to .vx-type { position: absolute; left: 0; }
.vx-field > small { color: var(--vm); font-size: 11.5px; } .vx-field > .vc-i { color: var(--vm); }
.vx-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #FDF1E6; color: var(--vo); font-size: 12px; font-weight: 500; white-space: nowrap; }
.vx-ac { position: absolute; z-index: 2; left: 90px; right: 120px; top: 34px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #EEF2F8; border: 1px solid #DCE3EE; border-radius: 8px; color: #2B59C3; font-weight: 500; box-shadow: 0 10px 24px -10px rgba(0,0,0,.25); }
.vx-ac b { font-size: 10px; color: #2B4C7E; } .vx-ac small { margin-left: auto; color: var(--vm); font-weight: 400; }
.vx-tb { display: flex; align-items: center; gap: 14px; padding: 8px 18px; border-bottom: 1px solid var(--vl); color: #374151; } .vx-tb .vc-i { width: 15px; } .vx-sep { width: 1px; height: 16px; background: var(--vl); }
.vx-cbody { flex: 1; padding: 14px 18px 0; overflow: hidden; } .vx-cbody p { margin: 0 0 10px; }
.vx-link { display: inline-flex; align-items: center; gap: 6px; color: var(--vo); text-decoration: underline; font-weight: 500; } .vx-link .vc-i { width: 14px; color: var(--vm); }
.vx-sig { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--vl); color: #1F2937; line-height: 1.5; font-size: 12.5px; } .vx-sig small { display: block; font-size: 10px; letter-spacing: .06em; color: var(--vm); margin-bottom: 4px; }
.vx-sigmark { display: block; margin-top: 2px; color: var(--vm); font-size: 12px; } .vx-sig b { font-weight: 600; }
.vx-cfoot { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 18px 14px; border-top: 1px solid var(--vl); color: #374151; } .vx-cfoot > span { display: flex; align-items: center; gap: 5px; }
.vx-cloudbtn { padding: 4px 8px; border-radius: 7px; animation: vx-cloud 10s both; } @keyframes vx-cloud { 0%, 34% { background: none; } 37%, 62% { background: #F3F4F6; } 64%, 100% { background: none; } }
.vx-send { margin-left: auto; display: flex; border-radius: 8px; overflow: hidden; color: #fff; } .vx-send b { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--vo); font-weight: 500; } .vx-send em { display: grid; place-items: center; padding: 0 8px; background: var(--vo); border-left: 1px solid rgba(255,255,255,.35); animation: vx-press .4s 6.8s both; }
.vx-later { position: absolute; right: 18px; bottom: 52px; width: 220px; padding: 6px; background: #fff; border: 1px solid var(--vl); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.3); } .vx-later b { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-weight: 600; font-size: 12px; }
.vx-later span { display: block; padding: 7px 8px; border-radius: 6px; } .vx-later hr { border: 0; border-top: 1px solid var(--vl); margin: 4px 0; }
.vx-hit2 { animation: vx-hit .3s 7.8s both; }
.vx-picker { position: absolute; z-index: 4; left: 50%; top: 50px; width: 470px; translate: -50% 0; padding: 16px 18px; background: #fff; border-radius: 12px; box-shadow: 0 30px 70px -10px rgba(0,0,0,.55); }
.vx-crumb { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--vl); color: var(--vm); } .vx-crumb b { color: var(--vt); font-weight: 500; } .vx-crumb .vc-i:nth-child(3) { width: 12px; }
.vx-picker ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .vx-picker li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; }
.vx-picker li .vc-i { color: #EF9A3C; } .vx-picker li .vc-i:last-child:not(:first-child) { margin-left: auto; width: 13px; color: var(--vm); } .vx-picker li small { margin-left: auto; color: var(--vm); font-size: 11.5px; }
.vx-pick { animation: vx-pick .3s 4.8s both; } @keyframes vx-pick { to { background: #FBEDE6; border-color: var(--vo); } }
.vx-picker__f { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vl); } .vx-picker__f > span:nth-child(2) { margin-right: auto; }
.vx-tog { flex: none; margin-left: 0; animation: vx-tog .3s 5.3s both; } .vx-tog::after { animation: vx-togk .3s 5.3s both; }
@keyframes vx-tog { to { background: var(--vo); } } @keyframes vx-togk { to { transform: translateX(13px); } }
.vx-ins { animation: vx-press .4s 5.9s both; }
.vx-toast { animation: vx-in .35s var(--a) both; z-index: 5; }
/* calendar */
.vx-cal { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vx-cal__bar { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border-bottom: 1px solid var(--vl); } .vx-cal__bar > b { font-size: 16px; font-weight: 600; margin-right: auto; }
.vx-views { display: flex; padding: 3px; border-radius: 8px; background: #F3F4F6; } .vx-views em { font-style: normal; padding: 4px 10px; border-radius: 6px; color: var(--vm); font-size: 12px; display: flex; } .vx-views em.on { background: #fff; color: var(--vt); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.vx-pulse { animation: vx-press .4s .1s both; }
.vx-cal__in { flex: 1; display: grid; grid-template-columns: 150px 1fr 190px; min-height: 0; }
.vx-cals { list-style: none; padding: 12px; border-right: 1px solid var(--vl); } .vx-cals small { display: block; font-size: 10px; letter-spacing: .06em; color: var(--vm); margin: 4px 0 8px; } .vx-cals small + li, .vx-cals li + small { margin-top: 0; }
.vx-cals li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; white-space: nowrap; overflow: hidden; } .vx-cals li em { margin-left: auto; font-style: normal; color: var(--vm); } .vx-cals li + small { margin-top: 14px; }
.vx-sq { flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--c, #9CA3AF); } .vx-sq--on { background: var(--vo); border-color: var(--vo); }
.vx-grid { padding: 10px; min-width: 0; display: flex; flex-direction: column; } .vx-days { display: grid; grid-template-columns: repeat(7, 1fr); } .vx-days b { font-size: 10.5px; font-weight: 500; color: var(--vm); padding: 0 6px 6px; }
.vx-cells { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; border: 1px solid var(--vl); border-radius: 10px; overflow: hidden; }
.vx-cell { border-right: 1px solid #EEF0F3; border-bottom: 1px solid #EEF0F3; padding: 5px; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .vx-cell > i { font-style: normal; font-size: 11.5px; }
.vx-cell.out > i { color: #C4C8CF; } .vx-cell.today > i { align-self: flex-start; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--vo); color: #fff; }
.vx-ev { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4B5563; } .vx-ev::before { content: "• "; color: #E7B84E; }
.vx-ev--new { display: flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 4px; background: #FDF1E6; border-left: 2px solid var(--vo); color: var(--vt); font-weight: 500; } .vx-ev--new::before { content: none; } .vx-ev--new .vc-i { width: 11px; color: var(--vo); }
.vx-day15 { animation: vx-day .3s 5.6s both; } @keyframes vx-day { to { box-shadow: inset 0 0 0 2px #F4B88C; } }
.vx-dayside { padding: 14px; border-left: 1px solid var(--vl); } .vx-dayside small { font-size: 10px; letter-spacing: .06em; color: var(--vm); } .vx-dayside > b { display: block; font-size: 15px; font-weight: 600; margin: 2px 0 12px; }
.vx-evcard { padding: 10px; border: 1px solid var(--vl); border-left: 3px solid var(--vo); border-radius: 8px; display: grid; gap: 4px; } .vx-evcard b { font-weight: 500; }
.vx-evcard small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--vm); letter-spacing: 0; } .vx-evcard .vc-i { width: 12px; } .vx-room { color: var(--vo) !important; word-break: break-all; }
.vx-event { position: absolute; z-index: 3; left: 50%; top: 14px; width: 420px; translate: -50% 0; padding: 16px 20px; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.vx-event label { display: flex; align-items: center; gap: 6px; margin: 11px 0 5px; font-weight: 500; } .vx-event label .vc-i { width: 14px; }
.vx-input { min-height: 34px; padding: 7px 10px; border: 1px solid var(--vl); border-radius: 8px; } .vx-input em { font-style: normal; } .vx-muted { color: #9CA3AF; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; min-height: 22px; } .vx-chips .vx-chip { font-size: 11px; }
.vx-online { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--vl); border-radius: 10px; animation: vx-onl .3s 2.6s both; } @keyframes vx-onl { to { background: #FFF6EE; border-color: #F6D9C3; } }
.vx-online b { display: block; font-weight: 500; } .vx-online small { display: block; font-size: 11px; color: var(--vm); line-height: 1.4; } .vx-online > span:nth-child(2) { flex: 1; }
.vx-cam { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F3F4F6; color: #4B5563; flex: none; }
.vx-tog--ev, .vx-tog--ev::after { animation-delay: 2.6s; }
.vx-event__f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .vx-create { animation: vx-press .4s 4.6s both; }
/* tasks */
.vx-tasks { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vx-tasks__h { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--vl); } .vx-tasks__h > b { font-size: 16px; font-weight: 600; } .vx-tasks__h > small { color: var(--vm); margin-right: auto; }
.vx-ts { display: flex; align-items: center; gap: 6px; width: 170px; height: 30px; padding: 0 10px; border: 1px solid var(--vl); border-radius: 8px; color: #9CA3AF; }
.vx-tasks__in { flex: 1; display: grid; grid-template-columns: 150px 1fr; min-height: 0; }
.vx-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; background: var(--vbg); }
.vx-col { position: relative; border-top: 3px solid var(--c); border-radius: 10px; background: #F3F4F6; padding: 10px 8px; min-width: 0; }
.vx-col h5 { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 10px; font-size: 13px; font-weight: 600; } .vx-col h5 em { font-style: normal; font-size: 11px; min-width: 20px; padding: 1px 6px; text-align: center; border-radius: 9px; background: #E5E7EB; }
.vx-cnt { display: grid; } .vx-cnt s { text-decoration: none; grid-area: 1 / 1; } .vx-cnt s:last-child { opacity: 0; animation: vx-cnt .2s 3.2s both; } .vx-cnt s:first-child { animation: vx-cnt2 .2s 3.2s both; }
@keyframes vx-cnt { to { opacity: 1; } } @keyframes vx-cnt2 { to { opacity: 0; } }
.vx-card { padding: 10px 12px; margin-bottom: 8px; background: #fff; border: 1px solid var(--vl); border-radius: 9px; display: grid; gap: 5px; } .vx-card b { font-weight: 500; }
.vx-card small { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #DC2626; } .vx-card small .vc-i { width: 12px; }
.vx-move { position: relative; z-index: 2; animation: vx-move 1.2s 2s both; } .vx-move .vx-ok { display: none; }
@keyframes vx-move { 0% { transform: none; box-shadow: none; } 25% { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 16px 30px -10px rgba(0,0,0,.3); } 90% { transform: translateX(calc(100% + 26px)) translateY(-4px) rotate(1deg); opacity: 1; } 100% { transform: translateX(calc(100% + 26px)); opacity: 0; } }
.vx-card--done b { text-decoration: line-through; color: var(--vm); } .vx-card--done small { color: #16A34A; }
.vx-none { margin: 14px 0 0; text-align: center; font-size: 11.5px; color: #9CA3AF; } .vx-col .vx-none.vx-a, .vx-col .vx-none.vx-ab { position: absolute; left: 0; right: 0; top: 40px; }
@media (max-width: 860px) {
  .vx-mail { grid-template-columns: 1fr; } .vx-fold, .vx-list { display: none; } .vx-menu { left: auto; right: 8px; } .vx-read__bar > .vc-i, .vx-read__bar > span:first-child { display: none; } .vx-from time { display: none; } .vx-from { grid-template-columns: 34px 1fr; } .vx-sc-compose .vx-mail { display: none; }
  .vx-compose { left: 8px; right: 8px; width: auto; translate: none; } .vx-picker { left: 8px; right: 8px; width: auto; translate: none; } .vx-hide-s, .vx-cfoot > span:nth-child(3) { display: none; }
  .vx-cal__in { grid-template-columns: 1fr; } .vx-cals, .vx-dayside { display: none; } .vx-event { left: 8px; right: 8px; width: auto; translate: none; } .vx-cal__bar .vx-views { display: none; }
  .vx-tasks__in { grid-template-columns: 1fr; } .vx-tasks__in > .vx-cals, .vx-ts, .vx-tasks__h .vx-views { display: none; } .vx-board { grid-template-columns: repeat(2, 1fr); } .vx-board .vx-col:nth-child(4), .vx-board .vx-col:nth-child(1) { display: none; }
  .vx-tb { gap: 10px; overflow: hidden; } .vx-field > small, .vx-field > .vc-i { display: none; } .vx-ac { left: 60px; right: 10px; } .vx-ac small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vx .vx-ab { display: none; } .vx .vx-type { clip-path: none; } }

.vx-dim.vx-ab { animation: vx-in .3s var(--a) both, vx-out .3s var(--b) forwards; }
.uh-mail { z-index: 4; }

/* contacts */
.vx-contacts { position: absolute; inset: 0; display: grid; grid-template-columns: 170px 300px 1fr; }
.vx-clist { border-right: 1px solid var(--vl); display: flex; flex-direction: column; min-width: 0; }
.vx-clist__h { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border-bottom: 1px solid var(--vl); } .vx-clist__h b { font-size: 15px; font-weight: 600; } .vx-clist__h small { color: var(--vm); margin-right: auto; }
.vx-cnewbtn { animation: vx-press .4s 2.8s both; }
.vx-clist ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.vx-letter { padding: 8px 14px 2px; font-size: 11px; font-weight: 600; color: var(--vm); }
.vx-crow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-left: 3px solid transparent; } .vx-crow > span:last-child { min-width: 0; } .vx-crow b, .vx-crow small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vx-crow b { font-weight: 500; } .vx-crow small { color: var(--vm); font-size: 11.5px; }
.vx-chit { animation: vx-chit .3s 1.4s both; } @keyframes vx-chit { to { background: #EEF2F8; border-left-color: var(--vo); } }
.vx-crow.vx-ab { animation: vx-out .3s var(--b) forwards; } .vx-letter.vx-ab { animation: vx-out .3s var(--b) forwards; }
.vx-crow.vx-ab, .vx-letter.vx-ab { animation-name: vx-gone; } @keyframes vx-gone { to { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } }
.vx-cnew { background: #FFF7F0; }
.vx-cdet { min-width: 0; display: flex; flex-direction: column; } .vx-cdet__h { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--vl); color: var(--vm); } .vx-cdet__h span { margin-right: auto; }
.vx-cdet__b { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 22px; }
.vx-bigav { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h, 215) 45% 93%); color: hsl(var(--h, 215) 45% 32%); font-size: 22px; font-weight: 600; }
.vx-cdet__b > b { font-size: 18px; font-weight: 600; } .vx-cbtns { display: flex; gap: 8px; }
.vx-cinfo { align-self: stretch; display: grid; gap: 8px; margin-top: 6px; } .vx-cinfo > span { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 10px 12px; border: 1px solid var(--vl); border-radius: 10px; }
.vx-cinfo .vc-i { grid-row: span 2; color: var(--vm); } .vx-cinfo small { font-size: 11px; color: var(--vm); } .vx-cinfo a { color: var(--vo); } .vx-cinfo b { font-weight: 500; }
.vx-cform { top: 60px; width: 380px; } .vx-csave { animation: vx-press .4s 5.1s both; }
/* video meeting */
.vx-meet { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 250px; background: #16181D; color: #E5E7EB; }
.vx-meet__main { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; gap: 10px; }
.vx-meet__h { display: flex; align-items: center; gap: 10px; } .vx-meet__h b { font-weight: 600; color: #fff; } .vx-meet__h small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9CA3AF; } .vx-meet__h small .vc-i { width: 12px; }
.vx-meet__h em { margin-left: auto; font-style: normal; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: #262A31; }
.vx-stagewrap { position: relative; flex: 1; min-height: 0; }
.vx-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; transition: none; animation: vx-tiles .6s 2.2s both; }
@keyframes vx-tiles { to { left: 72%; } }
.vx-tile { position: relative; display: grid; place-items: center; border-radius: 10px; background: #262A31; overflow: hidden; } .vx-tile .vx-bigav { width: 56px; height: 56px; font-size: 18px; }
.vx-tile small { position: absolute; left: 8px; bottom: 6px; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.vx-tile--talk { box-shadow: inset 0 0 0 2px var(--vo); } .vx-mic { position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--vo); animation: ui-ping 1.4s infinite; }
.vx-screen { position: absolute; left: 0; top: 0; bottom: 0; width: calc(72% - 10px); display: flex; flex-direction: column; gap: 6px; }
.vx-screen > small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vo); } .vx-screen > small .vc-i { width: 13px; }
.vx-slide { flex: 1; border-radius: 10px; background: #fff; color: var(--vt); padding: 18px 20px; } .vx-slide b { font-size: 18px; font-weight: 600; } .vx-slide ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.vx-slide li span { display: block; font-size: 12px; margin-bottom: 5px; } .vx-slide li i { display: block; height: 10px; border-radius: 5px; background: #FDE7D5; position: relative; overflow: hidden; }
.vx-slide li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--vo); border-radius: 5px; animation: vx-grow 1s 2.8s both; } @keyframes vx-grow { from { width: 0; } }
.vx-ctrl { display: flex; justify-content: center; gap: 10px; } .vx-ctrl span { display: flex; flex-direction: column; align-items: center; gap: 3px; } .vx-ctrl .vc-i { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: #262A31; }
.vx-ctrl small { font-size: 10px; color: #9CA3AF; } .vx-ctrl .vx-on .vc-i { animation: vx-shareon .3s 2s both; } @keyframes vx-shareon { to { background: var(--vo); color: #fff; } } .vx-ctrl .vx-leave .vc-i { background: #DC2626; color: #fff; }
.vx-mchat { display: flex; flex-direction: column; background: #fff; color: var(--vt); } .vx-mchat__h { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--vl); } .vx-mchat__h b { font-weight: 600; } .vx-mchat__h small { margin-left: auto; color: var(--vm); }
.vx-mchat ul { flex: 1; list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .vx-mchat li b { display: block; font-size: 11px; font-weight: 600; color: var(--vm); margin-bottom: 3px; }
.vx-mchat li span { display: inline-block; padding: 7px 10px; border-radius: 10px; background: #F3F4F6; font-size: 12px; line-height: 1.4; } .vx-mchat .vx-input { margin: 0 12px 12px; }
/* reports */
.vx-rep { position: absolute; inset: 0; display: flex; flex-direction: column; } .vx-rep__in { flex: 1; padding: 14px 16px; background: var(--vbg); display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.vx-rcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .vx-rcard { padding: 12px 14px; background: #fff; border: 1px solid var(--vl); border-radius: 10px; display: grid; gap: 2px; }
.vx-rcard small { font-size: 11px; color: var(--vm); } .vx-rcard b { font-size: 20px; font-weight: 600; } .vx-rcard em { font-style: normal; font-size: 11px; color: #16A34A; }
.vx-rgrid { flex: 1; display: grid; grid-template-columns: 1fr 250px; gap: 12px; min-height: 0; }
.vx-rchart, .vx-rside { background: #fff; border: 1px solid var(--vl); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; }
.vx-rchart__h { display: flex; align-items: center; gap: 12px; } .vx-rchart__h b { font-weight: 600; margin-right: auto; } .vx-rchart__h span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--vm); }
.vx-rchart__h i { width: 9px; height: 9px; border-radius: 3px; } .vx-rchart__h .s { background: var(--vo); } .vx-rchart__h .r { background: #F8C9A0; }
.vx-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding-top: 14px; border-bottom: 1px solid var(--vl); } .vx-bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 2px; }
.vx-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #F8C9A0; height: var(--r); animation: vx-bar .7s both; animation-delay: calc(.6s + var(--n) * .06s); transform-origin: bottom; } .vx-bars i:first-child { background: var(--vo); height: var(--s); }
@keyframes vx-bar { from { transform: scaleY(0); } }
.vx-virus { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--vl); } .vx-virus span { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #E9F6EE; color: #16A34A; }
.vx-virus small { font-size: 11px; color: var(--vm); } .vx-virus b { font-size: 18px; font-weight: 600; } .vx-rtop { margin: 12px 0 8px; font-weight: 600; }
.vx-boxes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .vx-boxes li { display: grid; grid-template-columns: 26px 1fr auto; column-gap: 8px; align-items: center; } .vx-boxes .vx-av { width: 26px; height: 26px; font-size: 9.5px; grid-row: span 2; }
.vx-boxes b { font-weight: 500; font-size: 12px; } .vx-boxes small { font-size: 11px; color: var(--vm); } .vx-boxes i { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: #EEF0F3; position: relative; overflow: hidden; }
.vx-boxes i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--vo); border-radius: 3px; animation: vx-grow 1s .8s both; }
/* single-scene panels in the feature tabs: the window at a fixed width, zoomed to the column by main.js */
.ftabs__panel:has(.vx-fit) { grid-template-columns: 1.35fr 1fr; gap: 44px; }
.vx-fit { min-width: 0; } .vx--panel { width: 1000px; }
@media (max-width: 860px) {
  .vx-contacts { grid-template-columns: 1fr; } .vx-contacts > .vx-cals, .vx-cdet { display: none; } .vx-cform { left: 8px; right: 8px; width: auto; translate: none; }
  .vx-meet { grid-template-columns: 1fr; } .vx-mchat { display: none; } .vx-meet__h small { display: none; } .vx-ctrl small { display: none; }
  .vx-rcards { grid-template-columns: 1fr 1fr; } .vx-rgrid { grid-template-columns: 1fr; } .vx-rside { display: none; }
}
@media (max-width: 980px) { .ftabs__panel:has(.vx-fit) { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- meetings (vx_meet): document, editing together, recording, transcript ---------- */
.vx-mbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 64px; gap: 10px; }
.vx-mstage { position: relative; min-width: 0; min-height: 0; border-radius: 10px; overflow: hidden; }
.vx-strip { display: grid; grid-auto-rows: 64px; gap: 8px; align-content: start; }
.vx-mini { display: grid; place-items: center; border-radius: 10px; background: #262A31; } .vx-mini b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: hsl(var(--h, 215) 45% 93%); color: hsl(var(--h, 215) 45% 32%); }
.vx-mini.talk { box-shadow: inset 0 0 0 2px var(--vo); }
.vx-ctrl--s .vc-i { width: 34px; height: 34px; padding: 8px; } .vx-ctrl .vx-on2 .vc-i { background: var(--vo); color: #fff; } .vx-ctrl .vx-rec .vc-i { background: #fff; color: #DC2626; }
.vx-recdot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #FCA5A5; } .vx-recdot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #EF4444; animation: ui-ping 1.4s infinite; }
/* document viewer */
.vx-viewer { position: absolute; inset: 0; display: flex; flex-direction: column; background: #2B2F36; }
.vx-viewer__h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 11.5px; color: #D1D5DB; } .vx-viewer__h > .vc-i { color: var(--vo); width: 14px; }
.vx-viewer__h b { margin-left: auto; display: flex; align-items: center; gap: 5px; font-weight: 500; color: #fff; } .vx-viewer__h b .vc-i { width: 13px; }
.vx-pg { display: grid; font-style: normal; padding: 2px 8px; border-radius: 6px; background: #3A3F47; } .vx-pg s { grid-area: 1 / 1; text-decoration: none; } .vx-pg s:last-child { opacity: 0; animation: vx-cnt .2s 2.4s both; } .vx-pg s:first-child { animation: vx-cnt2 .2s 2.4s both; }
.vx-pages { position: relative; flex: 1; overflow: hidden; }
.vx-page { position: absolute; left: 50%; top: 10px; bottom: -40px; width: 62%; translate: -50% 0; background: #fff; border-radius: 4px; padding: 26px 30px; color: var(--vt); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.vx-page b { font-size: 18px; font-weight: 600; margin-bottom: 6px; } .vx-page > i { height: 8px; border-radius: 4px; background: #E5E7EB; } .vx-page > i.s { width: 70%; }
.vx-pimg { height: 90px; border-radius: 6px; background: linear-gradient(135deg, #FDE7D5, #F8C9A0); margin-top: 6px; }
.vx-ptable { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 6px; } .vx-ptable i { height: 22px; border-radius: 4px; background: #F3F4F6; } .vx-ptable i:nth-child(4) { background: #FDE7D5; box-shadow: inset 0 0 0 2px var(--vo); }
.vx-p1 { animation: vx-pout .5s 2.3s both; } .vx-p2 { animation: vx-pin .5s 2.3s both; }
@keyframes vx-pout { to { transform: translateY(-110%); opacity: 0; } } @keyframes vx-pin { from { transform: translateY(110%); } to { transform: none; } }
.vx-note { position: absolute; right: 13%; top: 52%; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; background: #fff; color: var(--vt); font-size: 11.5px; font-weight: 500; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.vx-note b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: hsl(var(--h) 45% 93%); color: hsl(var(--h) 45% 32%); }
.vx-mfiles { list-style: none; margin: 0; padding: 10px; display: grid; gap: 4px; } .vx-mfiles li { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; font-size: 12px; } .vx-mfiles li .vc-i { color: #EF9A3C; } .vx-mfiles li.on { background: #FDF1E6; font-weight: 500; }
.vx-follow { display: flex; align-items: center; gap: 6px; margin: auto 12px 12px; padding: 8px 10px; border-radius: 8px; background: #F3F4F6; font-size: 11.5px; color: var(--vm); }
/* editor */
.vx-editor { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: var(--vt); }
.vx-editor__h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--vl); } .vx-editor__h > .vc-i { color: #2B59C3; } .vx-editor__h b { font-weight: 600; }
.vx-editor__h small { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11px; color: #16A34A; } .vx-editor__h small .vc-i { width: 12px; }
.vx-doc { flex: 1; padding: 18px 30px; overflow: hidden; } .vx-doc h4 { margin: 0 0 12px; font-size: 18px; font-weight: 600; } .vx-doc p { margin: 0 0 10px; line-height: 1.5; }
.vx-cline { position: relative; min-height: 20px; } .vx-cline .vx-type { color: var(--vt); }
.vx-caret { position: absolute; left: 0; top: -2px; display: flex; align-items: flex-start; animation-name: vx-in, vx-out; }
.vx-caret i { width: 2px; height: 20px; background: hsl(var(--h) 60% 45%); animation: vx-caret 1.4s steps(30) var(--a) forwards; transform: translateX(0); }
@keyframes vx-caret { to { transform: translateX(var(--cx, 260px)); } }
.vx-caret b { position: relative; top: -14px; padding: 1px 5px; border-radius: 4px; background: hsl(var(--h) 60% 45%); color: #fff; font-size: 9.5px; font-weight: 600; animation: vx-caret 1.4s steps(30) var(--a) forwards; }
.vx-eds { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 8px; } .vx-eds li { display: flex; align-items: center; gap: 8px; font-size: 12px; } .vx-eds .vx-mini { width: 28px; height: 28px; background: none; } .vx-eds .vx-mini b { width: 28px; height: 28px; font-size: 9.5px; }
.vx-eds li i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h) 60% 45%); }
/* recording */
.vx-rec1 { position: absolute; inset: 0; } .vx-tiles--still { animation: none; position: absolute; inset: 0; }
.vx-stop { position: absolute; left: 50%; bottom: 62px; translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #DC2626; color: #fff; font-weight: 500; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.vx-stop .vc-i { width: 15px; }
.vx-proc { position: absolute; left: 50%; top: 42%; translate: -50% 0; width: 360px; display: grid; grid-template-columns: 24px 1fr; gap: 8px 10px; align-items: center; padding: 16px 18px; background: #fff; color: var(--vt); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.vx-proc .vc-i { color: var(--vo); width: 22px; height: 22px; } .vx-proc i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #EEF0F3; overflow: hidden; } .vx-proc i b { display: block; height: 100%; width: 100%; background: var(--vo); animation: vx-grow 1.6s 2.3s both; }
.vx-recfiles { position: absolute; inset: 0; background: #fff; padding: 14px 18px; }
.vx-crumbs { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--vl); color: var(--vm); font-size: 12.5px; white-space: nowrap; overflow: hidden; } .vx-crumbs .vc-i { width: 12px; } .vx-crumbs span:last-of-type, .vx-crumbs b { color: var(--vt); font-weight: 500; }
.vx-recfiles ul { list-style: none; margin: 8px 0 0; padding: 0; } .vx-recfiles li { display: grid; grid-template-columns: 34px 1fr auto 30px; gap: 10px; align-items: center; height: 44px; padding: 0 6px; border-bottom: 1px solid #F0F1F3; }
.vx-recfiles li:first-child { background: #FFF6EE; } .vx-recfiles li b { font-weight: 500; } .vx-recfiles li small { color: var(--vm); font-size: 11.5px; } .vx-mp { color: var(--vo); }
/* transcript */
.vx-trans { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 300px; background: #fff; }
.vx-trans__l { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--vl); }
.vx-player { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #1F232A; color: #fff; } .vx-play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--vo); }
.vx-player > i { flex: 1; height: 4px; border-radius: 2px; background: #3A3F47; overflow: hidden; } .vx-player > i b { display: block; height: 100%; width: 48%; background: var(--vo); animation: vx-grow 8s linear both; } .vx-player small { font-size: 11px; color: #9CA3AF; }
.vx-trans .vx-list__s { margin: 0; }
.vx-tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow: hidden; }
.vx-tl { display: grid; grid-template-columns: 56px 28px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 8px; font-size: 12px; line-height: 1.45; animation: vx-in .35s var(--a) both, vx-tlon 1s var(--a) both; }
@keyframes vx-tlon { 0%, 90% { background: #FFF6EE; } 100% { background: transparent; } }
.vx-tl time { font-size: 10.5px; color: var(--vm); padding-top: 2px; } .vx-tl .vx-mini { width: 26px; height: 26px; background: none; } .vx-tl .vx-mini b { width: 26px; height: 26px; font-size: 9px; } .vx-tl > span:last-child b { display: block; font-size: 11px; color: var(--vm); font-weight: 600; }
.vx-trans__r { padding: 14px; background: var(--vbg); } .vx-trans__r .vx-sum { margin: 0; } .vx-trans__r h6 { margin: 10px 0 4px; font-size: 11px; letter-spacing: .04em; color: var(--vm); text-transform: uppercase; }
.vx-trans__r ul { margin: 0; padding-left: 16px; } .vx-trans__r li { font-size: 12.5px; line-height: 1.5; } .vx-acts { list-style: none; padding: 0 !important; display: grid; gap: 6px; } .vx-acts li { display: flex; gap: 8px; align-items: flex-start; }
.vx-box2 { flex: none; width: 13px; height: 13px; margin-top: 3px; border: 1.5px solid var(--vo); border-radius: 3px; }
@media (max-width: 860px) {
  .vx-mbody { grid-template-columns: 1fr; } .vx-strip { display: none; } .vx-page { width: 86%; padding: 18px; } .vx-proc { width: calc(100% - 30px); }
  .vx-trans { grid-template-columns: 1fr; } .vx-trans__r { display: none; } .vx-recfiles li { grid-template-columns: 34px 1fr 30px; } .vx-recfiles li small { display: none; }
  .vx-doc { padding: 14px 16px; }
}
.vx-mfiles li span { background: none; padding: 0; font-size: 12px; } .vx-editor__h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- vBoxx Meetings (vx_meet), after screenshots of the beta ---------- */
.vx[data-sub="room"] .vc-app { grid-template-columns: 1fr; } .vx[data-sub="room"] .vc-side, .vx[data-sub="room"] .vc-top { display: none; }
.mv-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; background: hsl(var(--h) 55% 90%); color: hsl(var(--h) 50% 30%); }
/* plan */
.mp { position: absolute; inset: 0; padding: 18px 22px; overflow: hidden; }
.mp-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .mp-h > div { margin-right: auto; } .mp-h b { display: block; font-size: 20px; font-weight: 600; } .mp-h small { color: var(--vm); font-size: 12px; }
.mp-live { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #F3DCC6; border-radius: 12px; background: linear-gradient(90deg, #FFF4EA, #fff 60%); margin-bottom: 12px; }
.mp-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #FDEBDD; color: var(--vo); flex: none; } .mp-ic--live { background: var(--vo); color: #fff; }
.mp-live > span:nth-child(2) { margin-right: auto; } .mp-live em { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: #16A34A; letter-spacing: .05em; } .mp-live b { display: block; font-weight: 600; font-size: 14px; } .mp-live small { color: var(--vm); font-size: 11px; }
.mp-avs { display: flex; } .mp-avs .mv-av { border: 2px solid #fff; margin-left: -8px; } .mp-end { color: var(--vm); padding: 0 6px; }
.mp-filters { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--vl); border-radius: 9px; margin-bottom: 12px; } .mp-filters span { padding: 5px 10px; border-radius: 7px; font-size: 12px; color: var(--vm); } .mp-filters em { font-style: normal; margin-left: 5px; font-size: 10.5px; color: #9CA3AF; } .mp-filters .on { background: #F3F4F6; color: var(--vt); font-weight: 500; }
.mp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 12px; }
.mp-card { border: 1px solid var(--vl); border-radius: 12px; padding: 12px; display: grid; gap: 4px; background: #fff; } .mp-card--new { border-color: #F4B88C; box-shadow: 0 10px 24px -14px rgba(232,115,31,.5); }
.mp-card__h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .mp-card__h .mp-ic { width: 26px; height: 26px; border-radius: 7px; } .mp-card__h b { font-weight: 600; font-size: 12.5px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-card__h em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--vo); background: #FDEFE4; border-radius: 999px; padding: 2px 7px; }
.mp-card small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--vm); } .mp-card small .vc-i { width: 12px; }
.mp-card__b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .mp-card__b .vc-btn { height: 28px; font-size: 11px; padding: 0 6px; }
.mp-new { width: 400px; top: 10px; padding: 14px 18px; } .mp-new label { margin: 8px 0 4px; } .mp-new .vx-input { min-height: 30px; padding: 5px 10px; } .mp-s { display: block; font-size: 11px; color: var(--vm); margin-top: 3px; }
.mp-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .mp-opts span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border: 1px solid var(--vl); border-radius: 8px; font-size: 11.5px; }
.mp-opts .on { background: var(--vo); border-color: var(--vo); color: #fff; } .mp-opts .vc-i { width: 13px; }
.mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mp-cal { margin-top: 10px; padding: 8px 10px; background: #FFF6EE; border-color: #F6D9C3; animation: none; } .mp-cal small { font-size: 10.5px; }
.vx-tog--on { background: var(--vo); animation: none; } .vx-tog--on::after { transform: translateX(13px); animation: none; }
.mp-go { animation: vx-press .4s 4.9s both; }
/* room */
.mr { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 230px; background: radial-gradient(120% 90% at 50% 0%, #1B1C20, #0F1012); color: #E5E7EB; font-size: 12px; }
.mr-main { position: relative; display: flex; flex-direction: column; padding: 10px 12px 10px; min-width: 0; gap: 8px; }
.mr-top { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.mr-pill { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: #1E1F23; border: 1px solid #2B2D32; } .mr-pill .vc-logo { width: 16px; height: 16px; } .mr-pill b { font-weight: 600; color: #fff; }
.mr-pill em { font-style: normal; font-size: 10px; font-weight: 600; color: #1F1300; background: #E8A33D; padding: 1px 7px; border-radius: 999px; }
.mr-recpill { margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #2A1416; border: 1px solid #5B2226; color: #FCA5A5; font-size: 11px; } .mr-recpill i { width: 7px; height: 7px; border-radius: 50%; background: #EF4444; animation: ui-ping 1.4s infinite; } .mr-recpill b { font-weight: 500; }
.mr-stage { flex: 1; min-height: 0; position: relative; }
.mr-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.mr-tile { position: relative; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #26272B, #1D1E22); border: 1.5px solid transparent; overflow: hidden; }
.mr-tile.talk { border-color: #E8A33D; box-shadow: 0 0 0 3px rgba(232,163,61,.15); }
.mr-av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 700; color: #fff; background: radial-gradient(circle at 35% 30%, hsl(var(--h) 75% 62%), hsl(var(--h) 60% 42%)); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.mr-tile small { position: absolute; left: 8px; bottom: 7px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 10.5px; color: #fff; }
.mr-tile::after { content: ""; position: absolute; right: 9px; bottom: 9px; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.mr-host { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #E8A33D; color: #1F1300; font-size: 10px; font-weight: 600; } .mr-host .vc-i { width: 11px; height: 11px; }
.mr-raised { position: absolute; left: calc(50% + 4px); top: calc(50% + 10px); display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #E8A33D; color: #1F1300; font-weight: 600; font-size: 11px; } .mr-raised .vc-i { width: 13px; }
.mr-react { position: absolute; left: 72%; top: 18%; font-size: 30px; animation-name: vx-in, vx-out, mr-float !important; animation-duration: .35s, .3s, 1.4s !important; animation-delay: var(--a), var(--b), var(--a) !important; animation-fill-mode: both, forwards, both !important; }
@keyframes mr-float { to { translate: 0 -30px; } }
.mr-bar { align-self: center; display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px; border-radius: 14px; background: #17181B; border: 1px solid #26282C; }
.mr-bar > span { display: flex; flex-direction: column; align-items: center; gap: 2px; } .mr-bar > span > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #26282C; } .mr-bar .vc-i { width: 14px; height: 14px; }
.mr-bar small { font-size: 8.5px; color: #9CA3AF; white-space: nowrap; } .mr-bar .off > i { background: #DC2626; } .mr-bar .on > i { background: #E8A33D; color: #1F1300; }
.mr-bar .recbtn > i { animation: mr-rec .3s .5s both; } @keyframes mr-rec { to { background: #DC2626; } } .mr-bar .recbtn small { color: #FCA5A5; }
.mr-leave { flex-direction: row !important; align-self: center; gap: 5px !important; padding: 7px 12px; border-radius: 999px; background: #DC2626; color: #fff; font-weight: 600; } .mr-leave .vc-i { width: 13px; }
.mr-side { background: #141518; border-left: 1px solid #222428; display: flex; flex-direction: column; min-width: 0; }
.mr-side__h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #222428; } .mr-side__h b { color: #fff; font-weight: 600; } .mr-side__h .vc-i { width: 13px; color: #9CA3AF; }
.mr-chat { flex: 1; list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .mr-chat li { display: flex; gap: 7px; align-items: flex-start; }
.mr-chat .mv-av { width: 22px; height: 22px; font-size: 8.5px; } .mr-chat li b { display: block; font-size: 10px; color: #9CA3AF; font-weight: 500; margin-bottom: 2px; } .mr-chat li span { background: #1F2024; border-radius: 9px; padding: 6px 9px; line-height: 1.4; font-size: 11px; }
.mr-input { display: flex; gap: 6px; margin: 10px; } .mr-input span { flex: 1; padding: 7px 9px; border-radius: 8px; background: #1C1D21; border: 1px solid #2B2D32; color: #6B7280; font-size: 11px; } .mr-input em { width: 30px; display: grid; place-items: center; border-radius: 8px; background: #E8A33D; color: #1F1300; } .mr-input .vc-i { width: 13px; }
.mr-cap { display: block; padding: 10px 14px 4px; font-size: 9.5px; letter-spacing: .06em; color: #9CA3AF; }
.mr-people { list-style: none; margin: 0; padding: 4px 10px; display: grid; gap: 6px; } .mr-people li { display: flex; align-items: center; gap: 8px; padding: 4px; } .mr-people .mv-av { width: 24px; height: 24px; font-size: 9px; }
.mr-people li > span:nth-child(2) { margin-right: auto; min-width: 0; } .mr-people b { display: block; font-weight: 500; color: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-people small { color: #E8A33D; font-size: 10px; } .mr-people .vc-i { width: 12px; color: #9CA3AF; }
.mr-toast { position: absolute; left: 38%; bottom: 74px; translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #1E1F23; border: 1px solid #2E3035; color: #E5E7EB; box-shadow: 0 10px 30px rgba(0,0,0,.5); white-space: nowrap; }
.mr-toast > .vc-i { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #16A34A; color: #fff; stroke-width: 3; }
.mr-toast--big { align-items: flex-start; white-space: normal; width: 300px; } .mr-toast--big b { display: block; color: #fff; margin-bottom: 2px; } .mr-toast--big span { font-size: 11px; color: #C4C7CC; line-height: 1.4; } .mr-toast--big em { display: flex; width: max-content; margin-top: 7px; height: 24px; font-size: 11px; font-style: normal; background: #26282C; border-color: #34363B; color: #fff; }
.mr-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #3A3C42; border-top-color: #E8A33D; animation: mr-spin .8s linear infinite; } @keyframes mr-spin { to { transform: rotate(360deg); } }
/* present & annotate */
.mr-present { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 110px; gap: 8px; } .mr-strip { display: grid; grid-auto-rows: 1fr; gap: 8px; } .mr-strip .mr-av { width: 38px; height: 38px; font-size: 13px; }
.md { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #1B1C20; border: 1.5px solid #E8A33D; min-height: 0; }
.md-bar { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: #17181B; color: #C4C7CC; } .md-bar b { color: #fff; font-weight: 600; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-bar .vc-i { width: 13px; }
.md-bar em { font-style: normal; font-size: 10px; font-weight: 600; color: #1F1300; background: #E8A33D; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .md-stop { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; background: #E8A33D; color: #1F1300; font-weight: 600; }
.md-pen { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #E8A33D; color: #1F1300; } .md-pg { display: grid; font-size: 10.5px; } .md-pg s { grid-area: 1 / 1; text-decoration: none; } .md-pg s:last-child { opacity: 0; animation: vx-cnt .2s 1.4s both; } .md-pg s:first-child { animation: vx-cnt2 .2s 1.4s both; }
.md-doc { position: relative; flex: 1; overflow: hidden; background: #2A2B30; }
.md-page { position: absolute; left: 6%; right: 6%; top: 10px; bottom: 0; background: #fff; border-radius: 3px 3px 0 0; padding: 18px 24px; display: flex; flex-direction: column; gap: 9px; }
.md-page h5 { margin: 0 0 2px; font: 600 17px/1.2 Georgia, "Times New Roman", serif; color: #111; } .md-page h6 { margin: 10px 0 2px; font: 600 15px/1.2 Georgia, serif; color: #111; } .md-page > i { height: 7px; border-radius: 4px; background: #E5E7EB; } .md-page > i.s { width: 64%; }
.md-p1 { animation: vx-pout .45s 1.3s both; } .md-p2 { animation: vx-pin .45s 1.3s both; }
.md-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .md-ink path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.md-o { stroke: #E8A33D; animation: vx-ink 1.2s 2.4s both; } .md-g { stroke: #22C55E; animation: vx-ink 1s 4.8s both; } @keyframes vx-ink { to { stroke-dashoffset: 0; } }
.md-tag { position: absolute; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 700; color: #fff; } .md-tag--o { left: 68%; top: 7%; background: #E8A33D; } .md-tag--g { left: 46%; top: 34%; background: #22C55E; }
.md-foot { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: #17181B; } .md-foot i { width: 13px; height: 13px; border-radius: 50%; } .md-foot i:first-child { box-shadow: 0 0 0 2px #17181B, 0 0 0 3.5px #E8A33D; } .md-foot span { margin-left: auto; font-size: 10.5px; padding: 2px 8px; border-radius: 6px; background: #26282C; }
/* replay */
.rp { position: absolute; inset: 0; display: flex; flex-direction: column; background: #121316; color: #E5E7EB; font-size: 12px; }
.rp-h { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #222428; } .rp-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #8B5CF6, #3B82F6); color: #fff; }
.rp-h > span:nth-child(2) { margin-right: auto; } .rp-h b { display: block; color: #fff; font-weight: 600; } .rp-h small { color: #9CA3AF; font-size: 10.5px; } .rp-h > .vc-i { width: 14px; color: #9CA3AF; }
.rp-dl { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px solid #2E3035; } .rp-dl .vc-i { width: 13px; } .rp-dl { animation: vx-press .4s 6.3s both; }
.rp-menu { position: absolute; z-index: 3; right: 40px; top: 44px; width: 250px; list-style: none; margin: 0; padding: 6px; background: #1C1D21; border: 1px solid #2E3035; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.rp-menu li { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; } .rp-menu li > i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--c); color: #fff; } .rp-menu .vc-i { width: 13px; }
.rp-menu b { display: block; font-weight: 500; color: #fff; font-size: 11.5px; } .rp-menu small { font-size: 10px; color: #9CA3AF; }
.rp-in { flex: 1; display: grid; grid-template-columns: 1fr 270px; grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
.rp-l { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; }
.rp-video { position: relative; flex: 1; border-radius: 10px; border: 1.5px solid #3B82F6; background: linear-gradient(180deg, #26272B, #1D1E22); display: grid; place-items: center; min-height: 0; }
.rp-focus { position: absolute; top: 8px; left: 50%; translate: -50% 0; font-size: 10.5px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; } .rp-faces .mr-tile { background: none; border: 0; box-shadow: none; } .rp-faces .mr-tile::after { display: none; }
.rp-ctl { display: flex; align-items: center; gap: 12px; color: #C4C7CC; } .rp-ctl .vc-i { width: 13px; } .rp-ctl .rp-t { font-style: normal; font-size: 11px; margin-right: auto; } .rp-ctl span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; }
.rp-moments { position: relative; display: grid; gap: 5px; padding-top: 4px; } .rp-moments small { font-size: 9px; letter-spacing: .06em; color: #6B7280; }
.rp-lane { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; } .rp-lane > span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #9CA3AF; white-space: nowrap; overflow: hidden; } .rp-lane > span i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.rp-lane em { position: relative; height: 6px; border-radius: 3px; } .rp-lane em b { position: absolute; top: 0; height: 6px; border-radius: 3px; }
.rp-head { position: absolute; left: calc(78px + 6%); top: 14px; bottom: -2px; width: 2px; background: #fff; animation: rp-head 9s linear both; } @keyframes rp-head { to { left: calc(78px + 62%); } }
.rp-r { overflow: hidden; border-left: 1px solid #222428; padding: 12px; display: flex; flex-direction: column; gap: 9px; min-width: 0; } .rp-r .vx-list__s { margin: 0; background: #1C1D21; color: #6B7280; }
.rp-tabs { display: flex; gap: 14px; border-bottom: 1px solid #222428; } .rp-tabs b, .rp-tabs span { display: flex; align-items: center; gap: 4px; padding-bottom: 7px; font-size: 11.5px; } .rp-tabs b { color: #fff; font-weight: 600; box-shadow: inset 0 -2px #fff; } .rp-tabs span { color: #9CA3AF; } .rp-tabs .vc-i { width: 12px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 5px; } .rp-chips span { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: hsl(var(--h) 40% 20%); color: hsl(var(--h) 70% 80%); }
.rp-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow: hidden; } .rp-tl li { padding: 6px 8px; border-left: 2px solid transparent; border-radius: 6px; font-size: 11px; line-height: 1.45; color: #C4C7CC; animation: vx-in .35s var(--a) both, rp-on 1.2s var(--a) both; }
@keyframes rp-on { 0%, 92% { background: #1C1D21; border-left-color: #3B82F6; } 100% { background: none; border-left-color: transparent; } }
.rp-tl b { display: block; font-size: 10.5px; color: hsl(var(--h) 70% 72%); font-weight: 600; } .rp-tl b small { color: #6B7280; font-weight: 400; margin-left: 4px; }
@media (max-width: 860px) {
  .mr { grid-template-columns: 1fr; } .mr-side { display: none; } .mr-bar > span:nth-child(n+4):nth-child(-n+9) { display: none; } .mr-av { width: 44px; height: 44px; font-size: 15px; } .mr-toast { left: 50%; } .mr-toast--big { width: calc(100% - 30px); }
  .mr-present { grid-template-columns: 1fr; } .mr-strip { display: none; } .md-bar em, .md-bar > .vc-i:nth-of-type(n+3) { display: none; }
  .rp-in { grid-template-columns: 1fr; } .rp-r { display: none; } .rp-menu { right: 8px; } .mp-cards { grid-template-columns: 1fr; } .mp-cards .mp-card:last-child, .mp-live .vc-btn, .mp-end, .mp-h .vx-ts { display: none; } .mp-new { left: 8px; right: 8px; width: auto; translate: none; }
}
/* header card has the same width as the content (1256px), its edges line up with the blocks below */
@media (min-width: 641px) {
  .header-card:not(.is-fixed) { padding-left: 28px; padding-right: 28px; }
  .header-card.is-fixed { width: min(var(--container) - 2 * var(--gutter), 100% - 2 * var(--gutter)); padding-left: 28px; padding-right: 28px; }
}

/* Synology configurator: the same breakdown as the HostBill order form */
.nas__bill { margin: 4px 0 14px; padding: 10px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 4px; font-size: 13.5px; }
.nas__bill div { display: flex; justify-content: space-between; gap: 12px; } .nas__bill dt { color: var(--body); } .nas__bill dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.nas__bill .is-sub { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line-2); font-weight: 600; } .nas__bill .is-tot dt, .nas__bill .is-tot dd { color: var(--muted); }
.nas__billnote { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.p-hero__demo { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--gold-700); text-decoration: none; }
.p-hero__demo i svg { width: 18px; height: 18px; }
.p-hero__demo i:last-child { transition: transform .2s; }
.p-hero__demo:hover { text-decoration: underline; }
.p-hero__demo:hover i:last-child { transform: translateX(3px); }

/* 404 */
.nf { padding: 70px 0 90px; overflow: hidden; }
.nf__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.nf h1 { font-family: var(--f-head); font-weight: 500; font-size: clamp(34px, 4vw, 54px); line-height: 1.12; margin: 14px 0 18px; }
.nf h1 span { color: var(--gold); }
.nf__lead { font-size: 18px; line-height: 1.65; color: var(--body); max-width: 560px; }
.nf__search { display: flex; align-items: center; gap: 10px; margin-top: 28px; max-width: 520px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 7px 7px 7px 16px; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; }
.nf__search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,145,38,.16), var(--shadow); }
.nf__search > i { color: var(--muted); display: flex; }
.nf__search > i svg { width: 19px; height: 19px; }
.nf__search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; background: transparent; color: var(--ink); }
.nf__guess { margin-top: 22px; }
.nf__guess p { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.nf__guess ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nf__guess a { display: inline-block; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-700); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.nf__guess a:hover { background: var(--gold); color: #fff; }
.nf__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nf__art { position: relative; min-height: 420px; display: grid; place-items: center; }
.nf__num { position: absolute; inset: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: .04em; font-family: var(--f-head); font-weight: 600; font-size: clamp(150px, 17vw, 240px); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(232,145,38,.35); letter-spacing: -.02em; user-select: none; }
.nf__zero { position: relative; width: .62em; height: .78em; border-radius: 50%; border: 2px solid rgba(232,145,38,.35); }
.nf__zero::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(232,145,38,.18); top: -9px; left: calc(50% - 9px); transform-origin: 9px calc(.39em + 9px); animation: nf-orbit 6s linear infinite; }
@keyframes nf-orbit { to { transform: rotate(360deg); } }
.nf-win { position: relative; margin-top: 150px; width: min(440px, 100%); background: #fff; border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(24,28,36,.28), var(--shadow); overflow: hidden; animation: nf-float 7s ease-in-out infinite; }
@keyframes nf-float { 50% { transform: translateY(-8px); } }
.nf-win__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); background: var(--bg-soft); }
.nf-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E3E1DC; }
.nf-win__bar span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.nf-win__path { padding: 12px 16px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; }
.nf-win__path small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nf-win__path code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-win__body { position: relative; padding: 18px 16px 26px; }
.nf-win__ghost b { display: block; height: 30px; border-radius: 8px; background: linear-gradient(90deg, #F3F2EF 0, #FAF9F7 40%, #F3F2EF 80%); background-size: 200% 100%; margin-bottom: 8px; opacity: .8; animation: nf-shimmer 2.4s linear infinite; }
.nf-win__ghost b:nth-child(2) { width: 82%; }
.nf-win__ghost b:nth-child(3) { width: 64%; opacity: .5; }
@keyframes nf-shimmer { to { background-position: -200% 0; } }
.nf-win__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 14px; }
.nf-win__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); margin-bottom: 6px; animation: nf-scan 3.2s ease-in-out infinite; }
.nf-win__icon svg { width: 22px; height: 22px; }
@keyframes nf-scan { 0%, 100% { transform: translateX(-14px) rotate(-8deg); } 50% { transform: translateX(14px) rotate(8deg); } }
.nf-win__empty strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.nf-win__empty small { font-size: 13px; color: var(--muted); max-width: 280px; }
.nf-pop .h-section { margin-bottom: 26px; }
.nf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nf-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.nf-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.nf-card > i:first-child { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); }
.nf-card > i svg { width: 20px; height: 20px; }
.nf-card span { flex: 1; min-width: 0; }
.nf-card b { display: block; font-weight: 600; color: var(--ink); }
.nf-card small { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.nf-card > i:last-child { color: var(--muted); transition: transform .2s, color .2s; }
.nf-card:hover > i:last-child { color: var(--gold); transform: translateX(3px); }
@media (max-width: 960px) {
  .nf__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nf__art { min-height: 0; order: -1; }
  .nf__num { position: static; font-size: 120px; }
  .nf-win { display: none; }
  .nf-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .nf { padding: 30px 0 60px; } .nf__num { font-size: 96px; } .nf-cards { grid-template-columns: 1fr; } .nf__search .btn { padding-inline: 14px; } }
@media (prefers-reduced-motion: reduce) { .nf__zero::after, .nf-win, .nf-win__ghost b, .nf-win__icon { animation: none; } }
.field__hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Login page */
.login { padding-bottom: 90px; }
.login__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 44px; text-align: left; align-items: start; }
.login__card { padding: 34px 36px; }
.login__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login__brand h2 { font-family: var(--f-head); font-weight: 600; font-size: 22px; margin: 0; }
.login__card .field { grid-column: 1 / -1; }
.login__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.login__forgot { font-size: 14px; color: var(--gold-700); font-weight: 500; }
.login__forgot:hover { text-decoration: underline; }
.login__secure { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
.login__secure i svg { width: 15px; height: 15px; }
.login__side { display: grid; gap: 12px; }
.login__h { font-family: var(--f-head); font-weight: 600; font-size: 18px; margin: 4px 0 4px; }
.login__help { margin-top: 10px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg-soft); font-size: 14.5px; line-height: 1.6; color: var(--body); }
.login__help p { margin: 0; }
.login__help p + p { margin-top: 10px; }
.login__help a { color: var(--gold-700); font-weight: 500; white-space: nowrap; }
@media (max-width: 860px) { .login__grid { grid-template-columns: minmax(0, 1fr); } .login__card { padding: 26px 22px; } }

/* Mobile nav: the header (z 50) holds the nav panel, so lift it above the backdrop (z 110) while open */
body.nav-open .site-header { z-index: 130; }
.login__intro { margin: 0 0 18px; color: var(--body); line-height: 1.6; }

/* vBoxxCloud access illustrations (syncdemo.py): sync folder + sync app + phone, WebDAV drive */
.sd { position: relative; width: 620px; height: 440px; margin-inline: auto; font-family: var(--f-head); color: var(--ink); --sd-t: 9s; }
.sd svg.vc-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd .vc-logo, .sd-bar svg:not(.vc-i), .sd-on svg:not(.vc-i), .sd-pop__h svg:not(.vc-i), .sd-phone__h svg:not(.vc-i) { width: 15px; height: 15px; flex: none; }
.sd-win { position: absolute; left: 0; top: 3%; width: 80%; height: 70%; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 50px -24px rgba(24,28,36,.3), var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.sd-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); background: #FAF9F7; }
.sd-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E3E1DC; }
.sd-bar span { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--body); }
.sd-body { flex: 1; display: grid; grid-template-columns: 30% 1fr; min-height: 0; }
.sd-side { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; background: #FBFAF8; border-right: 1px solid var(--line-2); font-size: 10.5px; color: var(--body); }
.sd-side small { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 6px 2px; }
.sd-side span, .sd-side b { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.sd-side .sd-on { background: var(--gold-50); color: var(--gold-700); font-weight: 600; }
.sd-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; align-content: start; }
.sd-grid li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.sd-grid b { font-size: 9.5px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-fold { color: #E89126; display: inline-flex; }
.sd-grid .sd-fold svg.vc-i { width: 34px; height: 34px; fill: #FDEBD3; stroke: #E89126; stroke-width: 1.3; }
.sd-grid .vc-doc { width: 30px; height: 36px; display: grid; place-items: end center; padding-bottom: 4px; font-size: 7.5px; border-radius: 4px; }
.sd-badge { position: absolute; top: 18px; left: calc(50% + 8px); width: 13px; height: 13px; }
.sd-badge svg, .sd-row__st svg, .sd-status svg, .sd-plist svg.sd-ok, .sd-chip svg.sd-ok { width: 13px; height: 13px; }
.sd-ok circle { fill: #2E9E5B; } .sd-ok path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-spin circle { fill: #3B82F6; } .sd-spin path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sd-badge--sync, .sd-row__st, .sd-status { position: relative; }
.sd-badge--sync svg, .sd-row__st:not(.sd-row__st--done) svg { position: absolute; inset: 0; }
.sd-badge--sync .sd-spin, .sd-row__st .sd-spin { animation: sd-a var(--sd-t) linear infinite; }
.sd-status__a { animation: sd-fa var(--sd-t) linear infinite; }
@keyframes sd-fa { 0%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
.sd-badge--sync .sd-ok, .sd-row__st:not(.sd-row__st--done) .sd-ok, .sd-status__b { animation: sd-b var(--sd-t) linear infinite; }
.sd-spin { transform-origin: center; }
@keyframes sd-a { 0% { opacity: 1; transform: rotate(0); } 54% { opacity: 1; transform: rotate(720deg); } 58%, 100% { opacity: 0; transform: rotate(760deg); } }
@keyframes sd-b { 0%, 55% { opacity: 0; transform: scale(.6); } 60%, 100% { opacity: 1; transform: scale(1); } }
.sd-pop { position: absolute; left: 31%; bottom: 0; width: 45%; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 28px 60px -22px rgba(24,28,36,.35), var(--shadow); padding: 11px 12px 12px; font-size: 10.5px; }
.sd-pop__h { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.sd-pop__h b { flex: 1; font-size: 11.5px; font-weight: 600; }
.sd-pop__h svg.vc-i { color: var(--muted); }
.sd-status { height: 18px; margin-bottom: 8px; }
.sd-status > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sd-status__a { color: #2563EB; } .sd-status__b { color: #2E9E5B; }
.sd-status__a svg { animation: sd-rot 1.2s linear infinite; transform-origin: center; }
@keyframes sd-rot { to { transform: rotate(360deg); } }
.sd-status em, .sd-chip { font-style: normal; }
.sd-quota i { display: block; height: 5px; border-radius: 3px; background: #F1EFEB; overflow: hidden; }
.sd-quota i b { display: block; width: 19%; height: 100%; background: var(--gold); border-radius: 3px; }
.sd-quota small { display: block; margin-top: 4px; font-size: 9.5px; color: var(--muted); }
.sd-pop__l { display: block; margin: 10px 0 5px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sd-rows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.sd-rows .vc-doc { width: 22px; height: 26px; display: grid; place-items: end center; padding-bottom: 3px; font-size: 6.5px; border-radius: 3px; }
.sd-rows li > span:nth-child(2) { min-width: 0; }
.sd-rows b { display: block; font-size: 10.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-rows small { font-size: 9px; color: var(--muted); }
.sd-row__st { width: 13px; height: 13px; display: block; }
.sd-prog { display: block; height: 3px; margin-top: 3px; background: #E8F0FE; border-radius: 2px; overflow: hidden; }
.sd-prog b { display: block; height: 100%; background: #3B82F6; animation: sd-prog var(--sd-t) linear infinite; }
@keyframes sd-prog { 0% { width: 4%; } 54%, 100% { width: 100%; } }
.sd-phone { position: absolute; right: 0; top: 12%; width: 25%; aspect-ratio: 9 / 18.5; background: #fff; border: 6px solid #1F2329; border-radius: 22px; box-shadow: 0 26px 50px -20px rgba(24,28,36,.45); overflow: hidden; display: flex; flex-direction: column; font-size: 9.5px; }
.sd-phone__notch { width: 34%; height: 9px; margin: 0 auto; background: #1F2329; border-radius: 0 0 8px 8px; }
.sd-phone__h { display: flex; align-items: center; gap: 6px; padding: 8px 9px 7px; border-bottom: 1px solid var(--line-2); }
.sd-phone__h b { flex: 1; font-size: 11px; font-weight: 600; }
.sd-phone .vc-av { width: 20px; height: 20px; font-size: 8px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 600; }
.sd-plist { list-style: none; margin: 0; padding: 4px 8px; flex: 1; display: grid; align-content: start; }
.sd-plist li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #F3F1EE; min-width: 0; }
.sd-plist b { font-weight: 500; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-plist small { font-size: 8px; color: var(--muted); }
.sd-plist .sd-fold svg.vc-i { width: 16px; height: 16px; fill: #FDEBD3; stroke: #E89126; stroke-width: 1.4; }
.sd-plist .vc-doc { width: 14px; height: 17px; font-size: 0; border-radius: 2px; }
.sd-plist svg.sd-ok { width: 10px; height: 10px; }
.sd-phone__nav { display: flex; justify-content: space-around; padding: 8px 4px 10px; border-top: 1px solid var(--line-2); color: var(--muted); }
.sd-phone__nav svg.vc-i:first-child { color: var(--gold); }
/* WebDAV */
.sd--dav .sd-win { width: 84%; height: 74%; }
.sd-dav { display: flex; flex-direction: column; min-width: 0; font-size: 10.5px; }
.sd-dav__h, .sd-dav__rows li { white-space: nowrap; display: grid; grid-template-columns: 1fr 52px 92px; gap: 8px; align-items: center; padding: 6px 12px; }
.sd-dav__h { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.sd-dav__rows { list-style: none; margin: 0; padding: 4px 0; }
.sd-dav__rows li { grid-template-columns: auto 1fr 52px 92px; padding: 5px 12px; color: var(--body); }
.sd-dav__h { grid-template-columns: 1fr 52px 92px; padding-left: 40px; }
.sd-dav__rows b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-dav__rows .sd-fold svg.vc-i { width: 18px; height: 18px; fill: #FDEBD3; stroke: #E89126; stroke-width: 1.4; }
.sd-dav__rows .vc-doc { width: 16px; height: 19px; font-size: 0; border-radius: 2px; }
.sd-dav__open { background: var(--gold-50); border-radius: 6px; margin: 0 6px; animation: sd-hl var(--sd-t) ease-in-out infinite; }
@keyframes sd-hl { 0%, 20% { background: transparent; } 30%, 80% { background: var(--gold-50); } 90%, 100% { background: transparent; } }
.sd-pop--dav { left: auto; right: 0; bottom: 0; width: 46%; display: grid; gap: 8px; }
.sd-drive { display: flex; align-items: center; gap: 9px; }
.sd-drive > svg.vc-i { width: 26px; height: 26px; color: var(--gold); }
.sd-drive b { display: block; font-size: 12px; font-weight: 600; }
.sd-drive small { font-size: 9.5px; color: var(--muted); }
.sd-chip { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 500; color: var(--body); }
.sd-chip svg.vc-i { color: #2E9E5B; }
.sd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(232,145,38,.5); animation: sd-pulse 1.8s ease-out infinite; flex: none; }
@keyframes sd-pulse { to { box-shadow: 0 0 0 7px rgba(232,145,38,0); } }
@media (prefers-reduced-motion: reduce) {
  .sd *, .sd *::before { animation: none !important; }
  .sd-badge--sync .sd-spin, .sd-row__st .sd-spin, .sd-status__a { opacity: 0; }
  .sd-prog b { width: 100%; }
}
.ftabs__panel:has(.sd) { grid-template-columns: 1.25fr 1fr; gap: 48px; }
.sd-fit { min-width: 0; }
.sd-drive > svg:not(.vc-i) { width: 26px; height: 26px; flex: none; }
@media (max-width: 980px) { .ftabs__panel:has(.sd) { grid-template-columns: 1fr; gap: 28px; } }

/* Server request form (other-servers) */
.srv-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.srv-pick label { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #D9DCE1; border-radius: 10px; cursor: pointer; }
.srv-pick label:has(input:checked) { border-color: var(--gold); background: var(--gold-50); }
.srv-pick input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.srv-pick [data-i] { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 1px; }
.srv-pick span { display: flex; flex-direction: column; gap: 2px; }
.srv-pick b { font-weight: 600; font-size: 15px; }
.srv-pick small { font-weight: 400; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.srv-pick label:last-child { grid-column: span 2; }
@media (max-width: 680px) { .srv-pick { grid-template-columns: 1fr; } .srv-pick label:last-child { grid-column: auto; } }