/* ts3musicbot.net v2 – tokens, base, shared components and the page shell.
   Tokens follow the bot webinterface's default skin (Modern Slate & Precision Navy);
   home.js may swap the accent tokens when a visitor slides through the skin gallery. */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --accent:#3b82f6; --accent-hover:#2563eb; --grad:linear-gradient(135deg,#3b82f6,#1d4ed8);
  --bg:#090d16; --bg2:#0f172a; --card:#1e293b; --side:#0b1120;
  --line:rgba(255,255,255,.08); --line-hover:rgba(59,130,246,.4);
  --text:#f8fafc; --muted:#94a3b8; --dim:#64748b;
  --r-card:14px; --r-sm:8px; --on-accent:#ffffff;
  --accent-soft:color-mix(in srgb,var(--accent) 50%,#ffffff);
  --accent-softer:color-mix(in srgb,var(--accent) 28%,#ffffff);
  --a10:color-mix(in srgb,var(--accent) 10%,transparent);
  --a18:color-mix(in srgb,var(--accent) 18%,transparent);
  --a30:color-mix(in srgb,var(--accent) 30%,transparent);
  --a45:color-mix(in srgb,var(--accent) 45%,transparent);
  --a60:color-mix(in srgb,var(--accent) 60%,transparent);
  --glass:color-mix(in srgb,var(--card) 55%,transparent);
  --glass-strong:color-mix(in srgb,var(--bg2) 88%,transparent);
  --ok:#22c55e; --ok-soft:#4ade80; --warn:#f59e0b; --danger:#f43f5e;
  --display:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,57.6px);
  /* content width: grows up to 1178 px (reached at 1280 px wide) and then stays put, so the
     header nav and the footer have the same room at 1280, 1440 and 1920 px */
  --wrap-max:calc(1178px + 2 * var(--gutter));
  --hdr-h:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.v2-body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .5s;overflow-x:hidden}
.v2-body img,.v2-body svg,.v2-body video{max-width:100%}
.v2-body img{height:auto}
.v2-body a{color:var(--accent-soft);text-decoration:none;transition:color .15s}
.v2-body a:hover{color:var(--accent-softer)}
/* element defaults without specificity, so component classes (.btn, .h1 …) always win */
:where(.v2-body) button{font:inherit;color:inherit;cursor:pointer}
:where(.v2-body) :focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
:where(.v2-body) :where(h1,h2,h3,h4){margin:0;text-wrap:balance;font-weight:700;line-height:1.2}
:where(.v2-body) p{margin:0}
::selection{background:var(--a45);color:#fff}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--grad);color:var(--on-accent)!important;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:860px}
.wrap.prose-w{max-width:900px}
.sec{padding-block:clamp(72px,9vw,120px)}
.stack{display:flex;flex-direction:column;gap:16px}
.center{text-align:center;align-items:center;justify-content:center}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.dots{background-color:var(--bg);background-image:radial-gradient(circle at var(--hx,50%) var(--hy,60%),var(--a30),transparent 44%),radial-gradient(color-mix(in srgb,var(--muted) 16%,transparent) 1px,transparent 1.3px);background-size:100% 100%,22px 22px}

/* ---------- type ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--muted) 72%,var(--dim))}
.h1{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(42px,7vw,88px)}
.h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.03;font-size:clamp(32px,4.4vw,54px)}
.h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);max-width:62ch}
.grad-text{background:linear-gradient(135deg,var(--accent-softer),var(--accent) 55%,var(--accent-hover));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- components ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;background:var(--a18);border:1px solid var(--a45);color:var(--accent-softer);font-size:12px;font-weight:600;white-space:nowrap}
.rail{display:inline-flex;align-items:stretch;min-height:34px;border-radius:9999px;border:1px solid var(--line);background:var(--glass-strong);font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--text) 82%,transparent);overflow:hidden}
.rail>*{display:flex;align-items:center;gap:7px;padding:0 13px;color:inherit}
.v2-body .rail a{color:inherit}
.v2-body .rail a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.rail>*+*{border-inline-start:1px solid var(--line)}
.rail.square{border-radius:10px}
.okdot{width:7px;height:7px;border-radius:4px;background:var(--ok);box-shadow:0 0 8px var(--ok);flex-shrink:0;animation:okpulse 2.4s ease-in-out infinite}
@keyframes okpulse{0%,100%{box-shadow:0 0 6px var(--ok)}50%{box-shadow:0 0 14px var(--ok),0 0 0 3px rgba(34,197,94,.18)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border-radius:12px;font-weight:600;font-size:15px;line-height:1.2;border:1px solid transparent;transition:transform .15s,box-shadow .2s,border-color .2s,filter .2s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px;border-radius:10px}
.btn-lg{min-height:54px;padding:0 26px;font-size:16px}
.v2-body .btn-primary{background:var(--grad);color:var(--on-accent);box-shadow:0 0 24px var(--a45),inset 0 1px 0 rgba(255,255,255,.2)}
.v2-body .btn-primary:hover{color:var(--on-accent);box-shadow:0 0 34px var(--a60),inset 0 1px 0 rgba(255,255,255,.25)}
.v2-body .btn-ghost{background:var(--glass);border-color:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text)}
.v2-body .btn-ghost:hover{color:var(--text);border-color:var(--line-hover)}
.v2-body .btn-light{background:var(--text);color:var(--bg)}
.v2-body .btn-light:hover{color:var(--bg)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card)}
.pad{padding:28px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:10px;background:var(--glass);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--text)}
.cmd{font-family:var(--mono);font-size:13px;padding:6px 10px;border-radius:8px;background:var(--a10);border:1px solid var(--a30);color:var(--accent-softer);white-space:nowrap}
.icontile{width:40px;height:40px;border-radius:10px;background:var(--grad);display:grid;place-items:center;box-shadow:0 0 16px var(--a45);color:var(--on-accent);flex-shrink:0}
.check{display:flex;gap:10px;align-items:flex-start}
.check svg{color:var(--accent);flex-shrink:0;margin-top:3px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:9999px;background:var(--a18);border:1px solid var(--a45);font-size:12.5px;font-weight:700;color:var(--accent-softer);width:max-content;max-width:100%}
.note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:var(--glass-strong);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.note svg{color:var(--accent-soft);flex-shrink:0;margin-top:1px}

/* ---------- announcement bar ---------- */
.announce{display:flex;align-items:center;justify-content:center;gap:10px 12px;flex-wrap:wrap;padding:9px 16px;background:var(--side);border-bottom:1px solid var(--line);font-size:13.5px;color:color-mix(in srgb,var(--text) 80%,transparent);text-align:center}
.v2-body .announce a{font-weight:600}
.announce-event{color:#fde68a;font-weight:600}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--side) 86%,transparent);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-soft) 50%,var(--accent) 70%,transparent);opacity:.9}
.hdr-inner{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.v2-body .brand,.v2-body .brand:hover{color:var(--text)}
.brand-mark{width:38px;height:38px;border-radius:11px;background:#0d1320;border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 1px var(--a10),0 0 18px var(--a18)}
.brand-text b{font-size:15.5px;letter-spacing:-.2px;display:block;line-height:1.2}
.brand-text small{font-size:11px;color:var(--dim);display:block;white-space:nowrap}
.mark .eq{transform-box:fill-box;transform-origin:50% 50%}
.brand:hover .eq1{animation:eq 1.1s ease-in-out infinite}
.brand:hover .eq2{animation:eq .9s ease-in-out infinite reverse}
.brand:hover .eq3{animation:eq 1.3s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
.menu{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.nav{display:flex;gap:2px;flex:1;min-width:0;font-size:14px;font-weight:500}
/* 8 px sides: the eight items also fit in the longer languages (logged in too) */
.v2-body .nav a{padding:8px;border-radius:8px;color:var(--muted);white-space:nowrap}
.v2-body .nav a:hover,.v2-body .nav a.on{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.hdr-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.v2-body .hdr-link{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap}
.v2-body .hdr-link:hover{color:var(--accent-softer)}
.v2-body .hdr-admin{color:#f9a8d4}
.rail-demo a{font-size:12.5px;white-space:nowrap}
.lang{position:relative}
.lang summary{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--glass-strong);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);cursor:pointer;list-style:none;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{color:var(--text);border-color:var(--line-hover)}
.lang-caret{transition:transform .2s}
.lang[open] .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:60;margin:0;padding:6px;list-style:none;width:max-content;min-width:220px;max-height:min(70vh,560px);overflow:auto;border-radius:14px;background:var(--side);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px var(--a10);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.v2-body .lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;color:color-mix(in srgb,var(--text) 82%,transparent);font-size:14px;font-weight:500;white-space:nowrap}
.v2-body .lang-menu a:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.v2-body .lang-menu a[aria-current="true"]{background:var(--a18);color:var(--text);box-shadow:inset 0 0 0 1px var(--a45)}
.lang-menu small{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--dim)}
.nav-toggle{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--glass-strong);place-items:center}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:inline}

/* The demo links only fit the header in the menu panel: next to the eight nav items
   they would cover Changelog, Hosters, News and Forum (the content is at most 1178 px). */
.hdr .rail-demo{display:none}
@media (max-width:1260px){
  .nav-toggle{display:grid}
  .hdr-inner{flex-wrap:wrap;gap:12px;padding-block:12px;min-height:0}
  .menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:16px;padding:8px 0 16px}
  .menu.open{display:flex}
  .nav{flex-direction:column;gap:2px;font-size:16px}
  .v2-body .nav a{padding:12px 12px}
  .hdr-actions{flex-wrap:wrap;gap:12px}
  .hdr .rail-demo{display:inline-flex;width:100%}
  .rail-demo a{flex:1;justify-content:center;min-height:42px}
  .hdr-actions .btn{flex:1}
  .lang{width:100%}
  .lang summary{min-height:44px;justify-content:center}
  .lang-menu{position:static;width:100%;margin-top:8px;max-height:none;box-shadow:none;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
/* Same panel on wider screens when the nav still does not fit (longer labels in other
   languages, the admin links): site.js sets .is-compact on the header. */
.hdr.is-compact .nav-toggle{display:grid}
.hdr.is-compact .hdr-inner{flex-wrap:wrap;gap:12px;padding-block:12px;min-height:0}
.hdr.is-compact .menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:16px;padding:8px 0 16px}
.hdr.is-compact .menu.open{display:flex}
.hdr.is-compact .nav{flex-direction:column;gap:2px;font-size:16px}
.hdr.is-compact .nav a{padding:12px 12px}
.hdr.is-compact .hdr-actions{flex-wrap:wrap;gap:12px}
.hdr.is-compact .rail-demo{display:inline-flex;width:100%}
.hdr.is-compact .rail-demo a{flex:1;justify-content:center;min-height:42px}
.hdr.is-compact .hdr-actions .btn{flex:1}
.hdr.is-compact .lang{width:100%}
.hdr.is-compact .lang summary{min-height:44px;justify-content:center}
.hdr.is-compact .lang-menu{position:static;width:100%;margin-top:8px;max-height:none;box-shadow:none;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* ---------- scripts and languages ----------
   The self-hosted Inter files cover Western European letters only. Languages with
   other letters use the system UI font for the whole text instead of mixing two
   fonts inside words. Tracking (letter-spacing) is for Latin display type: off for
   Arabic (it breaks the joined letters) and CJK. An element with its own lang
   attribute uses the fonts of its language: the names in the language menu, and the
   English parts of a page in another language (legacy bodies, changelog lines). */
:lang(en),:lang(de),:lang(fr),:lang(es),:lang(pt),:lang(it),:lang(nl),:lang(da),:lang(sv){
  --display:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:lang(pl),:lang(cs),:lang(hu),:lang(ro),:lang(tr),:lang(ru),:lang(uk){
  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}
:lang(ar){
  --display:"SF Arabic","Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;
  --body:"SF Arabic","Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;
  /* Arabic words inside code (labels such as "مثال:") in the Arabic UI font, not in the
     spaced-out glyphs of a generic monospace fallback */
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"SF Arabic","Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic",monospace;
}
:lang(ja){
  --display:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;
}
:lang(ko){
  --display:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --body:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
:lang(zh-Hans){
  --display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
/* the font family is resolved on body, so re-apply it where the variables changed */
html:lang(pl) body,html:lang(cs) body,html:lang(hu) body,html:lang(ro) body,html:lang(tr) body,html:lang(ru) body,html:lang(uk) body,
html:lang(ar) body,html:lang(ja) body,html:lang(ko) body,html:lang(zh-Hans) body,.v2-body [lang]{font-family:var(--body)}
/* the element's own language, so English fallback content inside these pages keeps its tracking */
*:lang(ar),*:lang(ja),*:lang(ko),*:lang(zh-Hans){letter-spacing:0!important}
:lang(ar) body{line-height:1.7}
/* break-word, not anywhere: "anywhere" also lets buttons and chips shrink below
   their longest Latin word (TeamSpeak) and break it in the middle */
:lang(ja) body,:lang(zh-Hans) body{line-break:strict;word-break:normal;overflow-wrap:break-word}
:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
.v2-body [lang]:is(:lang(en),:lang(de)){line-break:auto;word-break:normal}
/* display type: room for Arabic ascenders and descenders and for CJK glyphs (the
   html prefix outranks the tighter page rules such as .home .h1); headings break
   by phrase in Japanese (Chrome) and keep Korean words whole */
html:lang(ja) :is(.h1,.h2,.p-title,.p-h2,.wl-title,.hl-own-title,.ct-chat-title,.nw-version,.nw-fb-title,.auth-title,.auth-side-title),
html:lang(ko) :is(.h1,.h2,.p-title,.p-h2,.wl-title,.hl-own-title,.ct-chat-title,.nw-version,.nw-fb-title,.auth-title,.auth-side-title),
html:lang(zh-Hans) :is(.h1,.h2,.p-title,.p-h2,.wl-title,.hl-own-title,.ct-chat-title,.nw-version,.nw-fb-title,.auth-title,.auth-side-title){line-height:1.22}
html:lang(ar) :is(.h1,.h2,.p-title,.p-h2,.wl-title,.hl-own-title,.ct-chat-title,.nw-version,.nw-fb-title,.auth-title,.auth-side-title){line-height:1.32}
html:lang(ja) :is(h1,h2,h3,.h1,.h2,.h3,.lead,.btn,.pill,.badge,.chip,.rail,.eyebrow,.label){word-break:auto-phrase}
/* the system UI fonts (SF Pro, Segoe UI, Roboto) are already tight at display sizes:
   Inter's negative tracking would make their letters touch */
html:is(:lang(pl),:lang(cs),:lang(hu),:lang(ro),:lang(tr),:lang(ru),:lang(uk)) :is(.h1,.h2,.p-title,.p-h2,.wl-title,.hl-own-title,.ct-chat-title,.nw-version,.nw-fb-title,.auth-title,.auth-side-title,.bigprice,.home .s-title,.home .l-title,.home .bridge-title h3,.hub b){letter-spacing:-.02em}
/* no capitals in Arabic and CJK: uppercase would only shout the embedded Latin words
   (SERVERBRIDGE, BOT) */
:is(.eyebrow,.label):is(:lang(ar),:lang(ja),:lang(ko),:lang(zh-Hans)){text-transform:none}
/* Turkish casing would turn the i of brand names into İ (DİSCORD); site.js marks
   them lang="en" inside uppercase labels, in the label's font */
.v2-body [lang].tr-brand{font-family:inherit}
/* commands, URLs, prices and code stay left-to-right inside RTL text */
[dir="rtl"] :is(.cmd,.mono,.kw,.cmdword,.gal-id,code,kbd,samp,pre){direction:ltr;unicode-bidi:isolate}
/* arrows that point in the reading direction (→ in links and buttons) */
[dir="rtl"] .rtl-flip{display:inline-block;scale:-1 1}
@supports not (scale:-1 1){[dir="rtl"] .rtl-flip{transform:scaleX(-1)}}

/* ---------- inner page hero ---------- */
.page-hero{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,72px);--hy:0%}
.page-hero .lead{margin-inline:auto}

/* ---------- footer ---------- */
.foot{background:var(--side);border-top:1px solid var(--line);padding-block:64px 36px;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--a45),transparent)}
.foot-grid{display:flex;gap:48px 56px;flex-wrap:wrap}
.foot-grid>div{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-grid strong{color:color-mix(in srgb,var(--text) 88%,transparent);font-size:14px;margin-bottom:2px}
.v2-body .foot-grid a{color:var(--muted)}
.v2-body .foot-grid a:hover{color:var(--text)}
.foot-brand{flex:1 1 300px;max-width:380px;gap:16px!important}
.foot-brand p{line-height:1.65;font-size:13.5px}
.social{display:flex;gap:8px}
.v2-body .social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;color:var(--muted)}
.v2-body .social a:hover{color:var(--text);border-color:var(--line-hover)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.pay{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.paychip{padding:3px 8px;border-radius:6px;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--muted)}

/* ---------- forms (v2 pages and the restyled legacy forms) ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;font-weight:600;color:color-mix(in srgb,var(--text) 85%,transparent)}
.input,.v2-body .field input,.v2-body .field select,.v2-body .field textarea{width:100%;min-height:46px;padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:color-mix(in srgb,var(--bg) 70%,var(--bg2));color:var(--text);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}
.input:focus,.v2-body .field input:focus,.v2-body .field select:focus,.v2-body .field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--a30)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:720px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .pad{padding:22px}
  .foot-grid{gap:32px 40px}
  .foot-grid>div:not(.foot-brand){flex:1 1 140px}
}