/* HubSuite buttons: one system for the whole page.
   Three kinds:
   - primary: glossy lime (navy in the light theme), light sweep on hover, soft breathing glow on key CTAs;
   - glass: translucent surface, a light spot runs along the border on hover;
   - icon: square glass buttons (theme, menu, arrows).
   Colours are two shades of one hue per theme, never a rainbow.
   ":not(#_)" only lifts specificity above the older per-component rules. */

@property --b-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --bp { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --b-hi: #ecff8a;   /* light shade */
  --b-mid: #ccff00;  /* brand lime */
  --b-lo: #9fcc00;   /* dark shade */
  --b-ink: #0a1400;
  --b-glow: 204 255 0;
  --b-r: 2px;
  --b-h: 52px;
}
[data-theme="light"] {
  --b-hi: #4a6cc4;
  --b-mid: #1d3a85;
  --b-lo: #0b1f4f;
  --b-ink: #fff;
  --b-glow: 29 58 133;
}
[data-theme="light"] .on-navy:not(.hs-anim) { --b-hi: #ecff8a; --b-mid: #ccff00; --b-lo: #9fcc00; --b-ink: #0a1400; --b-glow: 204 255 0; }


/* ---------- shared base ---------- */
:is(.pill-cta, .btn, .btn-box, .btn-lime, .btn-white, .x-btn, .cookie__btn, .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--b-r);
  font-family: var(--x-font, inherit);
  letter-spacing: 0;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease), box-shadow .35s, background-color .3s, border-color .3s, color .3s, filter .3s;
}
:is(.pill-cta, .btn, .btn-box, .btn-lime, .btn-white, .x-btn, .cookie__btn, .foot__soc a, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_):active { transform: translateY(1px) scale(.98); }
/* the press played before the action runs on touch screens (main.js holds the click for 240 ms there only) */
:is(.pill-cta, .btn, .btn-box, .btn-lime, .btn-white, .x-btn, .cookie__btn, .foot__soc a, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq, .chip):not(#_).is-pressing { animation: bPress .24s cubic-bezier(.3, .7, .4, 1) both; }
:is(.x-gc, .x-li, .x-cell--link):not(#_).is-pressing { animation: bPressSoft .24s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes bPress { 0% { transform: none; } 35% { transform: translateY(1px) scale(.94); filter: brightness(1.12); } 100% { transform: none; } }
@keyframes bPressSoft { 0% { scale: 1; } 35% { scale: .985; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .is-pressing:not(#_) { animation: none; } }

/* ---------- primary ---------- */
:is(.pill-cta, .btn--primary, .btn-lime, .btn-white, .x-btn--primary, .cookie__btn--main):not(#_) {
  --bp: 0;
  border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b-hi) 40%, var(--b-mid)) 0%, var(--b-mid) 55%, color-mix(in srgb, var(--b-lo) 30%, var(--b-mid)) 100%);
  color: var(--b-ink);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .4),
    inset 0 -1px 0 rgb(0 0 0 / .12),
    0 0 0 1px rgb(var(--b-glow) / .55),
    0 10px calc(26px + 18px * var(--bp)) -10px rgb(var(--b-glow) / calc(.45 + .35 * var(--bp)));
}
/* light sweep */
:is(.pill-cta, .btn--primary, .btn-lime, .btn-white, .x-btn--primary, .cookie__btn--main):not(#_)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .55) 48%, rgb(255 255 255 / .1) 56%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
:is(.pill-cta, .btn--primary, .btn-lime, .btn-white, .x-btn--primary, .cookie__btn--main):not(#_):hover {
  --bp: 1;
  animation: none;
  filter: none;
  transform: translateY(-1px);
}
:is(.pill-cta, .btn--primary, .btn-lime, .btn-white, .x-btn--primary, .cookie__btn--main):not(#_):hover::after { transform: translateX(120%); }

/* key CTAs breathe (brief: pulsing CTA buttons) */
:is(.pulse, .pulse-soft, .btn-lime--glow):not(#_) { animation: bBreath 3.2s ease-in-out infinite; }
@keyframes bBreath { 0%, 100% { --bp: 0; } 50% { --bp: .9; } }

/* arrow boxes inside primary buttons */
.btn-lime__box:not(#_), .btn-white__box:not(#_) { width: var(--b-h); height: var(--b-h); border-left: 1px solid rgb(0 0 0 / .14); border-radius: 0; }
[data-theme="light"] .btn-lime__box:not(#_), [data-theme="light"] .btn-white__box:not(#_) { border-left-color: rgb(255 255 255 / .18); }
[data-theme="light"] .on-navy:not(.hs-anim) .btn-lime__box:not(#_) { border-left-color: rgb(0 0 0 / .14); }
.btn-lime__box .i { left: 14px; top: 14px; }
.btn-lime__box .i + .i { left: -30px; }
.btn-lime:hover .btn-lime__box .i { transform: translateX(44px); }
.btn-lime:not(#_), .btn-white:not(#_) { gap: 20px; padding-left: 22px; font-size: 15px; }
.btn-lime--full:not(#_) { font-size: 16px; }

/* ---------- glass ---------- */
:is(.btn-box, .x-btn:not(.x-btn--primary), .cookie__btn:not(.cookie__btn--main):not(.cookie__btn--text), .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_) {
  border: 1px solid rgb(var(--fg) / .14);
  background: linear-gradient(180deg, rgb(var(--fg) / .08), rgb(var(--fg) / .03));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
[data-theme="light"] :is(.btn-box, .x-btn:not(.x-btn--primary), .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_) {
  background: linear-gradient(180deg, #fff, #f2f5fc);
  border-color: rgb(11 31 79 / .12);
  box-shadow: 0 1px 2px rgb(11 31 79 / .06), inset 0 1px 0 #fff;
}
[data-theme="light"] .on-navy:not(.hs-anim) :is(.btn-box, .x-btn:not(.x-btn--primary), .foot__soc a, .chip, .x-sq, .sq):not(#_) {
  background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .03));
  border-color: rgb(255 255 255 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}
/* light spot running along the border */
:is(.btn-box, .x-btn:not(.x-btn--primary), .cookie__btn:not(.cookie__btn--main):not(.cookie__btn--text), .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_)::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--b-ang), transparent 0deg, rgb(var(--b-glow) / 0) 40deg, var(--b-hi) 80deg, var(--b-mid) 110deg, rgb(var(--b-glow) / 0) 160deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
}
:is(.btn-box, .x-btn:not(.x-btn--primary), .cookie__btn:not(.cookie__btn--main):not(.cookie__btn--text), .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_):hover {
  border-color: rgb(var(--b-glow) / .25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 0 26px -8px rgb(var(--b-glow) / .45);
  background: linear-gradient(180deg, rgb(var(--fg) / .1), rgb(var(--fg) / .04));
  color: var(--text);
  transform: none;
}
:is(.btn-box, .x-btn:not(.x-btn--primary), .cookie__btn:not(.cookie__btn--main):not(.cookie__btn--text), .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_):hover::before {
  opacity: 1;
  animation: bSpin 2.4s linear infinite;
}
@keyframes bSpin { to { --b-ang: 360deg; } }

/* arrow box of the glass button: fills with the primary gradient on hover */
.btn-box:not(#_) { height: var(--b-h); }
.btn-box > span:first-child { padding: 0 20px; font-weight: 500; }
.btn-box__ic:not(#_) { width: var(--b-h); border-left: 1px solid rgb(var(--fg) / .12); }
.btn-box__ic .i { left: 14px; top: 14px; }
.btn-box__ic .i + .i { top: -38px; }
.btn-box:hover .btn-box__ic:not(#_) { background: linear-gradient(180deg, color-mix(in srgb, var(--b-hi) 40%, var(--b-mid)), var(--b-mid) 55%, color-mix(in srgb, var(--b-lo) 30%, var(--b-mid))); color: var(--b-ink); border-left-color: transparent; }
.btn-box:hover .btn-box__ic .i { translate: 0 52px; }

/* chips: glass pills, selected = primary */
.chip:not(#_) { border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; color: rgb(var(--fg) / .85); }
.chip.is-on:not(#_) {
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b-hi) 40%, var(--b-mid)) 0%, var(--b-mid) 55%, color-mix(in srgb, var(--b-lo) 30%, var(--b-mid)) 100%);
  color: var(--b-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 6px 18px -8px rgb(var(--b-glow) / .6);
}
.chip.is-on:not(#_)::before { display: none; }

/* ---------- sizes ---------- */
:is(.btn, .x-btn):not(#_) { height: var(--b-h); padding: 0 22px; font-size: 15px; }
.x-btn--primary:not(#_) .i { width: 18px; height: 18px; }
.btn-white:not(#_) { min-height: var(--b-h); }
.hdr .pill-cta:not(#_), .menu .pill-cta:not(#_) { height: 44px; min-height: 44px; padding: 0 18px; font-size: 14px; }
:is(.theme, .hdr-ic, .menu-btn, .menu-close, .x-sq):not(#_) { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.totop .sq:not(#_) { width: 44px; height: 44px; }
.totop:hover .sq:not(#_) { background: linear-gradient(180deg, rgb(var(--fg) / .1), rgb(var(--fg) / .04)); color: var(--text); }
.foot__soc a:not(#_) { padding: 8px 14px; font-size: 12.5px; }
.cookie__btn:not(#_) { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
.cookie__btn--text:not(#_) { background: none; border-color: transparent; box-shadow: none; }

/* language dropdown in the header and footer: glass box like the other icon buttons */
.hdr .lang:not(#_), .foot .lang:not(#_), .menu__prefs .lang:not(#_) {
  border-radius: var(--b-r);
  border: 1px solid rgb(var(--fg) / .14);
  background: linear-gradient(180deg, rgb(var(--fg) / .08), rgb(var(--fg) / .03));
}
.lang-toggle:not(#_) { border-radius: inherit; }
.lang-menu:not(#_) { border-radius: 14px; overflow: hidden; }

/* product UI inside demos keeps its own look */
:is(.pact, .chat__send, .x-step, .role, .x-tq):not(#_)::before { content: none; }

@media (max-width: 900px) {
  .hdr .pill-cta:not(#_) { height: 40px; min-height: 40px; padding: 0 14px; font-size: 13px; }
  :is(.hdr .theme, .hdr-ic, .hdr .menu-btn):not(#_) { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.pulse, .pulse-soft, .btn-lime--glow):not(#_) { animation: none; }
  :is(.btn-box, .x-btn, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq, .foot__soc a, .cookie__btn):not(#_):hover::before { animation: none; }
  :is(.pill-cta, .btn--primary, .btn-lime, .btn-white, .x-btn--primary, .cookie__btn--main):not(#_)::after { display: none; }
}

/* ---------- square corners everywhere (client requirement) ----------
   Only true circles stay round: switches, avatars, dots. */
body *:not(.hero *, .hero), body *:not(.hero *, .hero)::before, body *:not(.hero *, .hero)::after { border-radius: 0 !important; }
:is(.x-hr__av, .x-deal i, .chat__status span, .ptyping span):not(#_),
.x-fin__tip:not(#_)::after { border-radius: 50% !important; }


/* buttons: rectangles with rounded corners (client, 18.10.2026); cards and panels stay square.
   The arrow box inside is clipped by the button. */
:is(.pill-cta, .btn, .btn-box, .btn-lime, .btn-white, .x-btn, .cookie__btn, .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq, .lang-toggle, .x-gc__go):not(#_), .hdr .lang:not(#_), .foot .lang:not(#_), .menu__prefs .lang:not(#_) { border-radius: 10px !important; }
:is(.pill-cta, .btn, .btn-box, .btn-lime, .btn-white, .x-btn, .cookie__btn, .foot__soc a, .chip, .theme, .hdr-ic, .menu-btn, .menu-close, .x-sq, .sq):not(#_)::before { border-radius: 10px !important; }
.hero .btn-box__ic:not(#_) { border-radius: 0 !important; }

/* ---------- blocks follow the cursor: slight 3D tilt + light spot under the pointer (classes set by main.js) ---------- */
.x-tilt { position: relative; }
.x-tilt:not(.x-rv), .x-tilt.x-rv.in {
  transform: perspective(var(--persp, 1400px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease), opacity .8s var(--ease), border-color .35s, box-shadow .35s, scale .2s var(--ease), --bd1 .45s var(--ease), --bd2 .45s var(--ease);
}
.x-tilt.is-tilting { transition: transform .15s ease-out, opacity .8s var(--ease), border-color .35s, box-shadow .35s, scale .2s var(--ease), --bd1 .45s var(--ease), --bd2 .45s var(--ease); }
.x-tilt::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(var(--spot, 420px) circle at var(--mx, 50%) var(--my, 50%), rgb(var(--b-glow) / .14), rgb(var(--b-glow) / .04) 40%, transparent 70%);
}
.x-tilt.is-tilting::after { opacity: 1; }
.x-tilt.is-tilting { border-color: rgb(var(--b-glow) / .3); }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .x-tilt:not(.x-rv), .x-tilt.x-rv.in { transform: none; }
  .x-tilt::after { display: none; }
}

/* card arrow: the square stays put, the arrow inside turns */
.x-gc:hover .x-gc__go:not(#_) { transform: none; }
.x-gc__go .i { transition: transform .35s var(--ease); }
.x-gc:hover .x-gc__go .i { transform: rotate(45deg); }

/* ---------- switches: a round track and a round knob on every page (client, 23.10.2026) ---------- */
.x-tg:not(#_) {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: 999px !important;
  background: rgb(var(--fg) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--fg) / .14);
  transition: background .3s, box-shadow .3s;
}
.x-tg:not(#_)::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50% !important;
  background: rgb(var(--fg) / .75);
  box-shadow: 0 1px 2px rgb(0 0 0 / .35);
  transform: none;
  transition: transform .3s var(--ease), background .3s;
}
:is(.x-tg.is-on, .x-stage.is-added .x-row--new .x-tg, .cookie__opt .x-tg.is-on):not(#_) {
  background: var(--b-mid);
  box-shadow: inset 0 0 0 1px rgb(var(--b-glow) / .6), 0 0 12px -2px rgb(var(--b-glow) / .55);
}
:is(.x-tg.is-on, .x-stage.is-added .x-row--new .x-tg, .cookie__opt .x-tg.is-on):not(#_)::after {
  transform: translateX(16px);
  background: var(--b-ink);
}
.cookie__opt .x-tg:not(#_) { border-radius: 999px !important; }
.cookie__opt .x-tg:not(#_)::after { border-radius: 50% !important; }

/* ---------- arrow buttons: one shape everywhere (like "Переглянути можливості") ----------
   text | thin divider | square box with an arrow that slides through on hover */
:is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) {
  display: inline-flex; align-items: stretch; gap: 0; padding: 0;
  height: var(--b-h); min-height: var(--b-h);
  --ic-line: rgb(var(--fg) / .12);
}
:is(.x-btn--primary, .btn-lime, .btn-white):not(#_) { --ic-line: rgb(0 0 0 / .16); }
[data-theme="light"] :is(.x-btn--primary, .btn-lime, .btn-white):not(#_) { --ic-line: rgb(255 255 255 / .22); }
[data-theme="light"] .on-navy:not(.hs-anim) :is(.x-btn--primary, .btn-lime, .btn-white):not(#_) { --ic-line: rgb(0 0 0 / .16); }
:is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) > span:first-child { display: flex; align-items: center; padding: 0 22px; }
.btn-lime--full:not(#_) > span:first-child { flex: 1; }
:is(.x-btn__ic, .btn-lime__box, .btn-white__box, .btn-box__ic):not(#_) {
  position: relative; display: block; flex: none;
  width: var(--b-h); height: auto;
  overflow: hidden;
  border-left: 1px solid var(--ic-line);
  border-radius: 0 !important;
  transition: background .3s, color .3s, border-color .3s;
}
:is(.x-btn__ic, .btn-lime__box, .btn-white__box):not(#_) .i {
  position: absolute; left: calc(50% - 12px); top: calc(50% - 12px);
  width: 24px; height: 24px; margin: 0;
  transform: none; transition: transform .45s var(--ease);
}
:is(.x-btn__ic, .btn-lime__box, .btn-white__box):not(#_) .i + .i { left: calc(50% - 56px); }
:is(.x-btn--ic, .btn-lime, .btn-white):not(#_):hover :is(.x-btn__ic, .btn-lime__box, .btn-white__box) .i { transform: translateX(44px); }
:is(.x-btn--primary, .btn-lime, .btn-white):not(#_):hover :is(.x-btn__ic, .btn-lime__box, .btn-white__box) { background: rgb(0 0 0 / .07); }
[data-theme="light"] .x-sec:not(.on-navy) .x-btn--primary:not(#_):hover .x-btn__ic { background: rgb(255 255 255 / .08); }
.btn-box__ic:not(#_) .i { left: calc(50% - 12px); top: calc(50% - 12px); }
.btn-box__ic:not(#_) .i + .i { top: calc(50% - 64px); }

/* lighter button text */
:is(.pill-cta, .btn, .btn-box, .btn-lime, .btn-white, .x-btn, .cookie__btn, .foot__soc a, .chip, .menu-btn):not(#_),
:is(.btn-box, .btn-lime, .btn-white, .x-btn--ic):not(#_) > span:first-child { font-weight: 450; }

@media (max-width: 640px) {
  :is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) { height: auto; }
  :is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) > span:first-child { padding: 12px 16px; white-space: normal; line-height: 1.3; }
}

/* button font: Geist, the font of the headings (Manrope looked out of place next to Inter text, 19.10.2026) */
:root { --font-btn: "Geist", var(--font); }
:is(.btn, .btn-box > span:first-child, .x-btn, .pill-cta, .btn-lime, .btn-white, .cookie__btn):not(#_) { font-family: var(--font-btn); font-weight: 600; letter-spacing: 0; }
:is(.btn, .btn-box > span:first-child, .btn-lime > span:first-child, .btn-white > span:first-child):not(#_) { font-size: 15.5px; }
:is(.x-btn, .cookie__btn):not(#_) { font-size: 14.5px; }
.hdr .pill-cta:not(#_), .menu .pill-cta:not(#_) { font-size: 14px; }
@media (max-width: 640px) {
  :is(.btn, .btn-box > span:first-child, .x-btn > span:first-child):not(#_) { font-size: 14px; white-space: normal; text-align: center; line-height: 1.3; }
  .btn:not(#_) { min-height: 48px; height: auto; padding-block: 12px; }
  .btn-box:not(#_) { min-height: 48px; height: auto; }
  .btn-box > span:first-child:not(#_) { padding-block: 10px; }
}

/* rounded buttons (18.10.2026): a little more room for the text */
:is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) > span:first-child { padding-left: 26px; }
@media (max-width: 640px) { :is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) > span:first-child { padding-left: 20px; } }
:is(.btn, .x-btn:not(.x-btn--ic)):not(#_) { padding-inline: 26px; }

/* ---------- arrow in a circle (picked by the client 18.10.2026): no divider, a round badge at the right end ----------
   Colours (fourth round): the circle is a deeper shade of the button itself and the arrow contrasts with it:
   the lime primary gets a deeper lime circle with a navy arrow;
   the other buttons a quiet glass circle with a white arrow that fills white on hover.
   Light theme: the navy primary gets a lighter navy circle with a white arrow (no white circle), the other buttons a pale navy one. Options for the client: _variants/btn-arrow.html */
:root {
  --arr-p-bg: #b2e400; --arr-p-fg: #0b1f4f; --arr-p-hbg: #a3d400; --arr-p-hfg: #0b1f4f;
  --arr-s-bg: rgb(255 255 255 / .1); --arr-s-fg: #fff; --arr-s-hbg: #fff; --arr-s-hfg: #0b1f4f;
}
[data-theme="light"] {
  --arr-p-bg: #2b4ea3; --arr-p-fg: #fff; --arr-p-hbg: #3459b3; --arr-p-hfg: #fff;
  --arr-s-bg: rgb(11 31 79 / .07); --arr-s-fg: #1d3a85; --arr-s-hbg: #1d3a85; --arr-s-hfg: #fff;
}
[data-theme="light"] .on-navy:not(.hs-anim) {
  --arr-p-bg: #b2e400; --arr-p-fg: #0b1f4f; --arr-p-hbg: #a3d400; --arr-p-hfg: #0b1f4f;
  --arr-s-bg: rgb(255 255 255 / .1); --arr-s-fg: #fff; --arr-s-hbg: #fff; --arr-s-hfg: #0b1f4f;
}
:is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) > span:first-child { padding-right: 16px; }
:is(.x-btn__ic, .btn-lime__box, .btn-white__box, .btn-box__ic):not(#_):not(#_) {
  align-self: center; width: 38px; height: 38px; margin-right: 7px; border: 0;
  border-radius: 50% !important; overflow: hidden;
  background: var(--arr-p-bg); color: var(--arr-p-fg); box-shadow: inset 0 0 0 1.5px var(--arr-p-ring, transparent);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
:is(.btn-box__ic, .x-btn:not(.x-btn--primary) .x-btn__ic):not(#_):not(#_) { background: var(--arr-s-bg); color: var(--arr-s-fg); box-shadow: inset 0 0 0 1.5px var(--arr-s-ring, transparent); }
:is(.x-btn__ic, .btn-lime__box, .btn-white__box):not(#_):not(#_) .i { left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; }
:is(.x-btn__ic, .btn-lime__box, .btn-white__box):not(#_):not(#_) .i + .i { left: calc(50% - 54px); }
/* the box buttons point down (anchors): the arrow drops through the circle */
.btn-box__ic:not(#_):not(#_) .i { left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; }
.btn-box__ic:not(#_):not(#_) .i + .i { top: calc(50% - 62px); }
.btn-box:hover .btn-box__ic:not(#_) .i { translate: 0 52px; }
:is(.btn-box, .x-btn:not(.x-btn--primary)):not(#_):hover :is(.btn-box__ic, .x-btn__ic):not(#_):not(#_) { background: var(--arr-s-hbg); color: var(--arr-s-hfg); }
:is(.x-btn--primary, .btn-lime, .btn-white):not(#_):hover :is(.x-btn__ic, .btn-lime__box, .btn-white__box):not(#_):not(#_) { background: var(--arr-p-hbg); color: var(--arr-p-hfg); }
@media (max-width: 640px) { :is(.x-btn--ic, .btn-lime, .btn-white, .btn-box):not(#_) > span:first-child { padding-right: 12px; } }

/* 19.10.2026: one weight for every button label (the glass buttons came out thinner) */
:is(.btn, .x-btn, .btn-box, .pill-cta, .btn-lime, .btn-white):not(#_), :is(.x-btn, .btn-box, .btn-lime, .btn-white):not(#_) > span:first-child { font-family: var(--font-btn); font-weight: 600; }

/* 23.10.2026: a box button that leads to another page (not an anchor on this page) has its arrow pointing right,
   and on hover the arrow leaves to the right and a new one comes from the left */
.btn-box:not([href^="#"]) .btn-box__ic .i { rotate: 0deg; top: 11px; left: 11px; }
.btn-box:not([href^="#"]) .btn-box__ic .i + .i { top: 11px; left: -35px; }
.btn-box:not([href^="#"]):hover .btn-box__ic .i { translate: 46px 0; }