/* XFreedom v8 — premium polish: self-hosted variable fonts, crisp scaling to 4K, animated aurora, glass cards. */
@font-face{font-family:"XF Sans";src:url(/go/fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"XF Sans";src:url(/go/fonts/manrope-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"XF Sans";src:url(/go/fonts/manrope-cyrillic.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+20BD}
@font-face{font-family:"XF Arabic";src:url(/go/fonts/kufi-arabic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root{--xf-font:"XF Sans","XF Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--xf-tq:#3ff5e6;--xf-bl:#3aa8ff;--xf-vi:#9b8cff}
html,body,[dir="rtl"] body{font-family:var(--xf-font);font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[dir="rtl"] body{font-family:"XF Arabic","XF Sans",Tahoma,system-ui,sans-serif}
/* One family everywhere — kills the Georgia/serif fallback on titles, prices and chips */
h1,h2,h3,.plan-top h2,.plan-price,.sum-price,.bf-sum .sum-price,.stepper output,.builder-frame .chip-choice b,.preset b,.bf-head h2,.safety h2,.pricing-configuration strong,button,input,select,textarea,output{font-family:inherit!important}
.plan-price,.sum-price,.stepper output,.preset b,.chip-choice b{font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.plan-top h2,.bf-head h2{font-weight:750;letter-spacing:-.015em}
.plan-price{font-weight:800}
h1{font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
[dir="rtl"] h1,[dir="rtl"] .plan-price,[dir="rtl"] .plan-top h2{letter-spacing:0}
h1 .grad{background:linear-gradient(100deg,var(--xf-tq) 0%,var(--xf-bl) 55%,var(--xf-vi) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:xfShine 9s ease-in-out infinite alternate;filter:drop-shadow(0 0 28px #3ff5e633)}
@keyframes xfShine{to{background-position:100% 0}}
.brand span{font-weight:800;letter-spacing:-.02em}
.brand .logo{filter:drop-shadow(0 0 14px #3ff5e655)}

/* Aurora background: two blurred gradient layers, transform-only animation (GPU, ~0 CPU) */
.bg{overflow:hidden;background:radial-gradient(1200px 700px at 50% -12%,#0e3a3c 0%,transparent 62%),linear-gradient(180deg,#05080a,#070b0e 55%,#04070a)}
.bg::before,.bg::after{content:"";position:absolute;inset:-25%;pointer-events:none;will-change:transform;background:radial-gradient(38% 30% at 22% 28%,#19d3c52e,transparent 70%),radial-gradient(32% 28% at 80% 18%,#3a7bff24,transparent 70%),radial-gradient(30% 26% at 62% 78%,#8a6bff1c,transparent 70%);filter:blur(40px);animation:xfAurora 38s ease-in-out infinite alternate}
.bg::after{background:radial-gradient(1px 1px at 12% 22%,#ffffff55 50%,transparent 51%),radial-gradient(1px 1px at 68% 14%,#ffffff40 50%,transparent 51%),radial-gradient(1px 1px at 84% 62%,#ffffff38 50%,transparent 51%),radial-gradient(1px 1px at 32% 74%,#ffffff33 50%,transparent 51%),radial-gradient(1px 1px at 50% 40%,#ffffff2a 50%,transparent 51%);background-size:620px 620px;filter:none;opacity:.7;animation:xfDrift 120s linear infinite}
@keyframes xfAurora{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-4%,3%,0) rotate(-6deg) scale(1.02)}}
@keyframes xfDrift{to{transform:translate3d(0,-620px,0)}}
@media (prefers-reduced-motion:reduce){.bg::before,.bg::after,h1 .grad{animation:none!important}.pricing-card,.pricing-card:hover{transition:none!important;transform:none!important}}

/* Glass cards with a hairline gradient border + soft spotlight hover */
.pricing-card{border:1px solid #ffffff17!important;background-image:linear-gradient(160deg,#ffffff0f,#ffffff03 40%,#00000022)!important;background-color:#09121499!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff14,0 1px 0 #0006,0 24px 60px -28px #000c!important;border-radius:22px!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s!important;isolation:isolate}
.pricing-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(120% 70% at 50% -10%,#3ff5e61f,transparent 60%)}
.pricing-card:hover,.pricing-card:focus-within,.pricing-card.is-selected{transform:translateY(-6px)!important;border-color:#3ff5e655!important;box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px #3ff5e622,0 30px 80px -30px #19d3c599,0 18px 40px -24px #000!important}
.pricing-card:hover::after,.pricing-card:focus-within::after,.pricing-card.is-selected::after{opacity:1}
.pricing-card.is-popular{border-color:#3ff5e670!important;background-color:#0a1a1cb3!important;box-shadow:inset 0 1px 0 #ffffff22,0 0 0 1px #3ff5e633,0 0 60px -12px #19d3c566,0 30px 80px -30px #000!important}
.plan-crown{box-shadow:inset 0 1px 0 #ffffff22,0 0 18px -4px currentColor}
.plan-buy{border-radius:12px!important;font-weight:700!important;letter-spacing:.005em;transition:transform .2s,box-shadow .25s,filter .25s!important}
.plan-buy:not(:disabled):hover{filter:brightness(1.07);box-shadow:0 10px 30px -10px #19d3c5aa,inset 0 1px 0 #ffffff66!important}
.plan-buy:not(:disabled):active{transform:translateY(1px) scale(.99)}
/* Badge: centred in both LTR and RTL */
.pop-badge,.plan-freedom .pop-badge,[dir="rtl"] .plan-freedom .pop-badge{left:50%!important;right:auto!important;inset-inline-start:auto;transform:translateX(-50%)!important;letter-spacing:.06em;box-shadow:0 0 24px #3ff5e688,0 6px 16px -6px #000,inset 0 1px 0 #fff9!important}
.builder-frame{-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}

/* Crisp at large screens: scale the whole layout instead of leaving a tiny column on 2K/4K */
@media (min-width:1900px){body{zoom:1.35}}
@media (min-width:2500px){body{zoom:1.7}}
@media (min-width:3400px){body{zoom:2.1}}

/* v8b — all three plan cards visible on the first screen on phones (compact rows) */
@media (max-width:560px){
  header.top{flex-wrap:nowrap!important;justify-content:space-between!important;gap:12px;padding-top:10px;padding-bottom:4px;min-height:0;align-items:center}
  header.top .brand{min-width:0;flex:0 0 auto;gap:7px}
  header.top .brand .logo{width:30px;height:30px}
  header.top .brand span{font-size:17px}
  header.top .top-actions{flex-wrap:nowrap!important;gap:6px;margin:0}
  header.top .chip{min-height:36px;height:36px;padding:0 10px;font-size:13px}
  header.top #accountSuffix{display:none!important}
  header.top .lang-chip select{max-width:78px;font-size:13px}
  header.top .lang-chip .ic{display:none}
  header.top .brand{position:static!important;margin:0!important}
  header.top .top-actions{min-width:0;flex:0 1 auto}
  html body #plansGrid .pricing-card .plan-crown{display:grid!important}
  .hero{padding-top:10px!important;padding-bottom:0!important;margin-bottom:6px!important}
  .hero h1{font-size:clamp(26px,8.2vw,34px)!important;margin:4px 0 6px!important}
  #plansGrid.pricing-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:8px!important;padding-top:6px}
  html[data-layout] body #plansGrid > .pricing-card,html body #plansGrid > .pricing-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top price" "cap cap" "buy buy";align-items:center;column-gap:12px;row-gap:8px;padding:12px 14px!important;min-height:0!important;border-radius:18px!important}
  #plansGrid .pricing-card:hover,#plansGrid .pricing-card:focus-within,#plansGrid .pricing-card.is-selected{transform:translateY(-2px)!important}
  #plansGrid .plan-top{grid-area:top;gap:9px!important;margin:0!important;flex-wrap:nowrap!important;justify-content:flex-start!important;min-width:0}
  #plansGrid .plan-top h2{font-size:17px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #plansGrid .plan-crown{width:32px!important;height:32px!important;flex:0 0 32px;border-radius:10px!important}
  #plansGrid .plan-crown .ic{width:17px;height:17px}
  #plansGrid .plan-price{grid-area:price;font-size:24px!important;margin:0!important;text-align:end;line-height:1!important}
  #plansGrid .plan-price-caption{grid-area:cap;margin:-4px 0 0!important;font-size:11.5px!important;line-height:1.3;text-align:start;opacity:.8;min-width:0}
  html[data-layout] body #plansGrid .pricing-card .plan-buy,html body #plansGrid .pricing-card .plan-buy{grid-area:buy!important;grid-column:1 / -1!important;width:100%!important;min-width:0;min-height:40px!important;height:40px;margin:0!important;padding:0 14px!important;font-size:13.5px!important}
  #plansGrid .plan-description,#plansGrid .plan-meta,#plansGrid .plan-features{display:none!important}
  #plansGrid .pop-badge{top:-10px!important;font-size:9.5px!important;padding:4px 9px!important}
}
@media (max-width:370px){
  header.top .lang-chip .ic{display:none}
  header.top .chip{padding:0 8px}
  #plansGrid .plan-top h2{font-size:16px!important}
  #plansGrid .plan-price{font-size:22px!important}
}
@media (max-width:400px){
  header.top{gap:8px!important}
  header.top .top-actions{gap:4px!important}
  header.top .chip{padding:0 8px!important;font-size:12.5px!important}
  header.top .lang-chip{padding-inline:8px 4px!important}
  header.top .lang-chip select{max-width:62px!important;font-size:12.5px!important;text-overflow:ellipsis}
  header.top .brand span{font-size:16px!important}
  header.top .brand .logo{width:26px!important;height:26px!important}
}
@media (max-width:380px){ header.top #installBtn{display:none!important} }
