/* ============================================================
   PapilioHost - auth pages (login / register / guest funnel)

   The form has NO container. Fields and type sit directly on a flat
   ground, which is what makes the reference read as clean. The left
   column is still a card that overlaps the brand panel (rounded right
   corners + shadow), but inside it there is nothing but content.
   Type: Clash Display for headings, Clash Grotesk for UI.
   ============================================================ */

@font-face{font-family:"Clash Display";src:url(../fonts/clashdisplay.woff2) format("woff2");
  font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Grotesk";src:url(../fonts/clashgrotesk.woff2) format("woff2");
  font-weight:200 700;font-style:normal;font-display:swap}

.cfa-wrap{
  --ink:#070c16;
  --field:#15202e;
  --line:#1e252f;
  --line-hi:#2e3a48;
  --txt:#eaf1f8;
  --mut:#8b9bad;
  --dim:#5b6a7b;
  --brand:#38bdf8;
  --panel:#38bdf8;
  --panel-ink:#04141f;
  --display:"Clash Display","Space Grotesk",system-ui,sans-serif;
  --ui:"Clash Grotesk","Inter",system-ui,sans-serif;

  display:flex; height:100vh; height:100dvh; overflow:hidden;
  padding:0 !important; background:var(--ink) !important; font-family:var(--ui);
}
.cfa-wrap *{font-family:inherit}

/* ---------- left column: a flat card that sits over the panel ---------- */
.cfa-wrap .cfa-pane{
  order:1; flex:1 1 58%; min-width:0; position:relative; z-index:2; padding:0;
  margin-right:-32px; border-radius:0 32px 32px 0; overflow:hidden;
  background:var(--ink);
  box-shadow:24px 0 48px -24px rgba(0,0,0,.75);
}
.cfa-wrap .cfa-pane::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 52% at 12% 4%,rgba(56,189,248,.20),transparent 72%),
    radial-gradient(54% 58% at 96% 18%,rgba(129,140,248,.15),transparent 74%),
    radial-gradient(66% 56% at 52% 104%,rgba(14,165,233,.14),transparent 72%),
    radial-gradient(80% 70% at 50% 50%,rgba(30,64,120,.16),transparent 78%);
}

/* papilio.css makes .pl-authpane a flex row; the scroll column then shrank to
   its content (381px on a 944px pane), so every "max-width" below was never
   reached and the form looked tiny. The pane is a plain block here. */
.cfa-wrap .cfa-pane{display:block}
.cfa-scroll{
  position:relative; z-index:1; width:100%; height:100%; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  justify-content:safe center; padding:92px 34px 72px;
}
.cfa-scroll>*{margin:0; flex:0 0 auto}
.cfa-scroll::-webkit-scrollbar{width:8px}
.cfa-scroll::-webkit-scrollbar-thumb{background:#1c232c; border-radius:8px}
.cfa-scroll::-webkit-scrollbar-thumb:hover{background:#2b3540}
.cfa-scroll>*{width:100%; max-width:min(100%,clamp(400px,29vw,540px))}
/* papilio.css caps every form in the guest pane at 406px (.pl-authpane form);
   that rule is for the old layout and it strangled the order form here */
.cfa-wrap .cfa-pane form:not(.login-form){max-width:none}

.cfa-logo{position:fixed; top:28px; left:34px; z-index:6; line-height:0}
.cfa-logo img{height:clamp(32px,1.9vw,42px); width:auto; object-fit:contain; display:block}

/* ---------- the form itself: no card, no border, no blur ---------- */
.cfa-wrap .login-form{
  max-width:min(100%,clamp(400px,29vw,540px)); margin:0 auto;
  background:none; border:0; box-shadow:none; padding:0;
  display:grid; grid-template-columns:1fr 1fr; column-gap:12px; align-content:start;
}
.cfa-wrap .login-form>*{grid-column:1 / -1; min-width:0}
.cfa-wrap .providerLinkingFeedback:empty{display:none}

.cfa-wrap .cfa-head{order:1; text-align:center; margin-bottom:20px}
.cfa-wrap .cfa-head h1{
  font-family:var(--display); font-size:clamp(27px,1.75vw,35px); font-weight:300;
  letter-spacing:-.02em; color:var(--mut); margin:0; line-height:1.2;
}

/* ---------- social row ---------- */
.cfa-wrap #googleLoginWrap{order:2; grid-column:1 / 2; margin:0 !important}
.cfa-wrap #magicLoginWrap{order:2; grid-column:2 / 3; margin:0 !important}
.cfa-wrap .cfa-magicslot{order:3; margin-top:10px}
.cfa-wrap .cfa-or{order:4}
.cfa-wrap .login-form .card{order:5}
.cfa-wrap .cfa-foot{order:6}

.cfa-wrap #googleLoginBtn,
.cfa-wrap #magicLoginToggle{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:9px; width:100% !important; height:clamp(44px,2.6vw,48px) !important; padding:0 12px !important;
  border:1px solid rgba(255,255,255,.085) !important; border-radius:8px !important;
  background:rgba(255,255,255,.035) !important; color:var(--mut) !important;
  font-family:var(--ui) !important; font-weight:400 !important; font-size:14px !important;
  text-decoration:none !important; box-shadow:none !important; cursor:pointer;
  transition:background .14s, border-color .14s !important;
}
.cfa-wrap #googleLoginBtn:hover,
.cfa-wrap #magicLoginToggle:hover{background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.17) !important; color:var(--txt) !important}
.cfa-wrap #googleLoginBtn svg,
.cfa-wrap #magicLoginToggle svg{width:16px; height:16px; flex-shrink:0; margin:0 !important}
.cfa-wrap #googleLoginWrap>div[style*="text-align:center"]{display:none !important}

.cfa-wrap #magicLoginForm{margin:0 !important}
.cfa-wrap #magicLoginForm input[type=email]{
  width:100% !important; height:46px !important; padding:0 15px !important;
  background:var(--field) !important; border:1px solid var(--line-hi) !important;
  border-radius:8px !important; color:var(--txt) !important; font-size:14.5px !important;
  margin-bottom:8px !important; font-family:var(--ui) !important;
}
.cfa-wrap #magicLoginForm button{
  width:100% !important; height:40px !important; border-radius:8px !important;
  background:#0f141b !important; color:var(--txt) !important;
  border:1px solid var(--line-hi) !important; font-weight:500 !important;
  font-size:13.5px !important; font-family:var(--ui) !important;
}

.cfa-or{display:flex; align-items:center; gap:12px; margin:24px 0 18px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.cfa-or::before,.cfa-or::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- fields ---------- */
.cfa-wrap .login-form .card{background:none !important; border:0 !important;
  box-shadow:none !important; backdrop-filter:none !important; margin:0 !important;
  max-width:none !important; overflow:visible !important}
.cfa-wrap .login-form .card::before{display:none !important}
.cfa-wrap .login-form .card-body{padding:0 !important}
.cfa-wrap .login-form .form-group{margin-bottom:14px}
.cfa-wrap .login-form .form-control-label{display:block; font-size:13px; font-weight:400;
  color:var(--mut); margin-bottom:7px; letter-spacing:0}
.cfa-wrap .login-form .input-group-prepend{display:none !important}
.cfa-wrap .login-form .input-group{position:relative; display:block}
.cfa-wrap .login-form .form-control{
  width:100%; height:clamp(46px,2.8vw,52px); padding:0 16px; font-family:var(--ui);
  background:var(--field) !important; border:1px solid var(--line-hi) !important;
  border-radius:8px !important; color:var(--txt) !important; font-size:15px;
  box-shadow:none !important; transition:border-color .14s, box-shadow .14s;
}
.cfa-wrap .login-form .form-control::placeholder{color:#4b5a6b}
.cfa-wrap .login-form .form-control:focus{border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.15) !important; outline:none}
.cfa-wrap .login-form .pw-input{padding-right:48px}
.cfa-wrap .login-form .input-group-append{position:absolute; top:0; right:0; bottom:0; z-index:3}

.cfa-wrap .btn-reveal-pw{
  height:calc(100% - 2px); margin:1px 1px 1px 0; width:46px;
  display:grid; place-items:center; cursor:pointer;
  background:#1c2431 !important; border:0 !important; border-left:1px solid var(--line-hi) !important;
  border-radius:0 7px 7px 0 !important; box-shadow:none !important;
  color:var(--mut) !important; transition:background .14s, color .14s;
}
.cfa-wrap .btn-reveal-pw:hover{background:#222c3b !important; color:var(--txt) !important}
.cfa-wrap .btn-reveal-pw svg{width:19px; height:19px; display:block}
.cfa-wrap .btn-reveal-pw .ic-off{display:none}
.cfa-wrap .btn-reveal-pw.is-on .ic-on{display:none}
.cfa-wrap .btn-reveal-pw.is-on .ic-off{display:block}

/* ---------- remember me ---------- */
.cfa-wrap .pl-remember{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font-size:14px; color:var(--mut); cursor:pointer; font-weight:400;
  user-select:none; width:fit-content;
}
.cfa-wrap .pl-remember input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.cfa-wrap .cfa-check{
  width:18px; height:18px; flex-shrink:0; border-radius:5px;
  border:1.5px solid var(--line-hi); background:var(--field);
  display:grid; place-items:center; transition:background .15s, border-color .15s;
}
.cfa-wrap .cfa-check svg{width:12px; height:12px; color:#04141f;
  stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .22s ease .03s}
.cfa-wrap .pl-remember:hover .cfa-check{border-color:#46525f}
.cfa-wrap .pl-remember input:checked + .cfa-check{background:var(--brand); border-color:var(--brand)}
.cfa-wrap .pl-remember input:checked + .cfa-check svg{stroke-dashoffset:0}
.cfa-wrap .pl-remember input:focus-visible + .cfa-check{box-shadow:0 0 0 3px rgba(56,189,248,.25)}

/* ---------- submit + links ---------- */
.cfa-wrap #login{
  width:100%; height:clamp(46px,2.8vw,52px); border:0; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg,#04070d 0%,#0a2740 52%,#0d4a72 100%);
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-family:var(--ui); font-weight:300; font-size:15.5px; letter-spacing:.03em;
  box-shadow:none; transition:background .14s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.cfa-wrap #login:hover{background:linear-gradient(135deg,#070c16 0%,#0e3454 52%,#12608f 100%)}

.cfa-foot{margin-top:15px; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center; font-size:12.5px; color:var(--mut); line-height:1.45}
.cfa-foot a{color:var(--brand); font-weight:500; text-decoration:none}
.cfa-foot a:hover{text-decoration:underline}
.cfa-foot .cfa-forgot a{color:var(--mut); font-weight:400;
  text-decoration:underline; text-underline-offset:3px}
.cfa-foot .cfa-forgot a:hover{color:var(--txt)}

.cfa-wrap .alert{border-radius:8px; font-size:13px; padding:12px 14px; border:1px solid;
  margin-bottom:18px; grid-column:1 / -1; order:0}
.cfa-wrap .alert-danger{background:rgba(231,0,11,.1); border-color:rgba(231,0,11,.35); color:#ffb3b8}
.cfa-wrap .alert-success{background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.32); color:#9ef0cf}
.cfa-wrap .alert-info{background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.28); color:#bce7ff}

/* Chrome paints its own pale fill on remembered fields and the plain
   box-shadow trick is not always enough on newer builds - clipping the UA
   background to the text is what actually stops it. */
.cfa-wrap input:-webkit-autofill,
.cfa-wrap input:-webkit-autofill:hover,
.cfa-wrap input:-webkit-autofill:focus,
.cfa-wrap input:-webkit-autofill:active,
.cfa-wrap input:autofill{
  -webkit-background-clip:text !important;
          background-clip:text !important;
  -webkit-text-fill-color:var(--txt) !important;
  -webkit-box-shadow:0 0 0 60px var(--field) inset !important;
          box-shadow:0 0 0 60px var(--field) inset !important;
  caret-color:var(--txt) !important;
  border:1px solid var(--line-hi) !important;
  transition:background-color 600000s 0s, color 600000s 0s !important;
}
.cfa-wrap input:-webkit-autofill:focus{
  border-color:var(--brand) !important;
  -webkit-box-shadow:0 0 0 60px var(--field) inset, 0 0 0 3px rgba(56,189,248,.15) !important;
          box-shadow:0 0 0 60px var(--field) inset, 0 0 0 3px rgba(56,189,248,.15) !important;
}
.cfa-wrap input:-internal-autofill-selected{
  background-color:var(--field) !important; background-image:none !important;
  color:var(--txt) !important;
}

/* ---------- right: flat brand panel, copy straight on it ---------- */
.cfa-brand{
  order:2; flex:1 1 42%; min-width:0; position:relative; overflow:hidden; height:100%;
  color:var(--panel-ink);
  background:
    radial-gradient(44% 40% at 16% 10%,rgba(255,255,255,.26),transparent 68%),
    radial-gradient(52% 46% at 74% 26%,rgba(125,211,252,.34),transparent 72%),
    radial-gradient(40% 38% at 86% 82%,rgba(2,132,199,.34),transparent 70%),
    linear-gradient(152deg,#4fcbfc 0%,#38bdf8 44%,#20a6e6 100%);
  display:flex; flex-direction:column; justify-content:center; padding:56px 56px 56px 74px;
}
.cfa-mark{
  position:absolute; right:-10%; top:50%; transform:translateY(-50%);
  height:72%; width:auto; aspect-ratio:441/420; pointer-events:none; opacity:.6;
  /* the pixel mark (Arshia preferred it over the crystal render, which now lives in og-my.jpg) */
  background:url(../images/butterfly-pixels.svg?v=1) center/contain no-repeat;
}
.cfa-brand-in{position:relative; z-index:2; max-width:min(500px,86%);
  background:none; border:0; box-shadow:none; backdrop-filter:none; padding:0}
.cfa-eyebrow{font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(4,20,31,.68); margin-bottom:16px; font-weight:500}
.cfa-brand-in h2{font-family:var(--display); font-size:clamp(28px,2.5vw,44px);
  line-height:1.06; font-weight:600; letter-spacing:-.025em; margin:0 0 16px;
  max-width:10.6em; /* two lines at every size, so the copy never rides the bright wing */
  color:var(--panel-ink);
  background:linear-gradient(98deg,#01131f 0%,#083b57 52%,#0d6b93 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cfa-brand-in p{font-size:clamp(15px,.95vw,17px); line-height:1.6;
  color:rgba(4,20,31,.78); margin:0 0 26px; max-width:430px}
.cfa-cta{display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px;
  border-radius:8px; background:var(--panel-ink); color:#fff !important;
  font-family:var(--ui); font-weight:400; font-size:14px;
  text-decoration:none !important; transition:opacity .14s; box-shadow:none}
.cfa-cta:hover{opacity:.88}
.cfa-strip{position:absolute; left:74px; right:56px; bottom:40px; z-index:2;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid rgba(4,20,31,.18);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(4,20,31,.68)}
.cfa-strip b{font-weight:600; color:var(--panel-ink); letter-spacing:0}
.cfa-strip .st{display:inline-flex; align-items:center; gap:8px}
.cfa-strip .st i{width:7px; height:7px; border-radius:50%; background:var(--panel-ink)}

/* ---------- responsive ---------- */
@media (min-width:2000px){
  .cfa-scroll{padding:120px 48px 72px}
  .cfa-brand{padding:64px 64px 64px 88px}
  .cfa-strip{left:88px; right:64px}
}
@media (max-width:1400px){
  .cfa-mark{right:-18%; height:64%; opacity:.55}
  .cfa-brand{padding:48px 44px 48px 60px}
  .cfa-strip{left:60px; right:44px}
}
@media (max-width:1050px){
  .cfa-brand{display:none}
  .cfa-wrap .cfa-pane{flex:1 1 100%; margin-right:0; border-radius:0; box-shadow:none}
  .cfa-scroll{padding:88px 20px 44px}
}
@media (max-width:520px){
  .cfa-logo{top:20px; left:20px}
  .cfa-scroll{padding:76px 16px 36px}
  .cfa-wrap .login-form{grid-template-columns:1fr; column-gap:0}
  .cfa-wrap #googleLoginWrap,.cfa-wrap #magicLoginWrap{grid-column:1 / -1}
  .cfa-wrap #magicLoginWrap{margin-top:10px !important}
}
.cfa-wrap a:focus-visible,.cfa-wrap button:focus-visible,.cfa-wrap input:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cfa-wrap *:not(.cfa-fly):not(.cfa-fly *){transition:none !important; animation:none !important}}

/* a real footer row, the way the reference closes its column */
.cfa-links{position:absolute; left:34px; right:34px; bottom:22px; width:auto !important; max-width:none !important;
  margin:0 !important; padding-top:12px; border-top:1px solid var(--line);
  display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--dim)}
.cfa-links a{color:var(--dim); text-decoration:none; transition:color .14s; font-weight:400}
.cfa-links a:hover{color:var(--txt)}
.cfa-links span{opacity:.45}

/* ============================================================
   Variant d2 - one dark surface, the mark becomes the network.
   Reachable at /login?d=2 ; /login?d=1 goes back. Nothing here
   applies unless html carries .d2
   ============================================================ */
html.d2 .cfa-brand{
  background:#04070c; color:var(--txt);
}
html.d2 .cfa-brand::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(54% 48% at 66% 44%, rgba(56,189,248,.14), transparent 72%);
}
html.d2 .cfa-mark{
  background-image:url(../images/butterfly-network.svg?v=2);
  opacity:1; height:82%; right:-6%;
}
html.d2 .cfa-brand-in{max-width:min(500px,86%)}
html.d2 .cfa-eyebrow{color:var(--brand)}
html.d2 .cfa-brand-in h2{color:#fff}
html.d2 .cfa-brand-in p{color:var(--mut)}
html.d2 .cfa-cta{background:#0284c7; color:#fff !important}
html.d2 .cfa-cta:hover{background:#0ea5e9; opacity:1}
html.d2 .cfa-strip{color:var(--dim); border-top-color:var(--line)}
html.d2 .cfa-strip b{color:#fff}
html.d2 .cfa-strip .st i{background:#34d399; box-shadow:0 0 7px rgba(52,211,153,.8)}
html.d2 .cfa-wrap .cfa-pane{box-shadow:26px 0 52px -26px #000}

/* the two locations we actually run, as live nodes under the copy */
.cfa-nodes{display:none; list-style:none; margin:26px 0 0; padding:0;
  flex-direction:column; gap:11px}
html.d2 .cfa-nodes{display:flex}
.cfa-nodes li{display:flex; align-items:center; gap:11px; width:250px;
  font-size:13.5px; color:var(--mut)}
.cfa-nodes li i{width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.cfa-nodes li b{color:#fff; font-weight:500}
.cfa-nodes li span{margin-left:auto; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim)}

/* 2. the two halves of the heading carry different weight */
.cfa-head h1 .lt{font-weight:400; color:var(--mut); font-size:.84em; letter-spacing:.01em}
.cfa-head h1 b{font-weight:600; letter-spacing:-.03em;
  background:linear-gradient(96deg,#dff1ff 0%,#8ed8fb 42%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#fff}

/* 4. the submit is the one element that reacts */
.cfa-wrap #login::after{
  content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.cfa-wrap #login:hover{box-shadow:0 8px 22px -12px rgba(2,132,199,.95)}
.cfa-wrap #login:hover::after{animation:cfaSheen .7s ease}
.cfa-wrap #login:active{transform:translateY(1px)}
@keyframes cfaSheen{from{left:-60%} to{left:130%}}

/* 5. the mark dissolves under the copy so the type stays clean */
.cfa-mark{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.78) 58%,#000 74%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.78) 58%,#000 74%);
}

/* 6. links row never breaks awkwardly */
@media (max-width:420px){
  .cfa-links{gap:10px; font-size:12px}
  .cfa-links span{display:none}
}

/* 4. the sheen also runs once on arrival, so the effect is visible without hovering */
.cfa-wrap #login::after{animation:cfaSheen 1.1s ease .5s 1}

/* temporary build stamp - tells us instantly whether a stale stylesheet is being served */
.cfa-v{font-family:var(--ui); font-size:10px; letter-spacing:.14em; color:#2b3540}

/* 1. the password label carries its own escape hatch - one line saved and
   the recovery link sits exactly where the user looks when it fails */
.cfa-lblrow{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px}
.cfa-lblrow .form-control-label{margin-bottom:0 !important}
.cfa-forgot-inline{font-size:12px; color:var(--dim); text-decoration:none; white-space:nowrap}
.cfa-forgot-inline:hover{color:var(--brand); text-decoration:underline}

/* ============================================================
   5. one box holds the whole left column.
   The border is a gradient rather than a flat line: a 1px padding ring
   masked out of the middle, so the edge catches brand light at the top
   left and fades away - a flat border cannot do that.
   ============================================================ */
.cfa-wrap .login-form{
  position:relative;
  padding:clamp(30px,2.2vw,40px) clamp(28px,2.1vw,38px) clamp(26px,2vw,34px);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(22,36,58,.62) 0%,rgba(11,18,32,.72) 62%,rgba(9,15,26,.76) 100%);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  box-shadow:
    0 26px 60px -34px rgba(0,0,0,.92),
    0 0 0 1px rgba(56,189,248,.05),
    inset 0 1px 0 rgba(255,255,255,.055);
}
.cfa-wrap .login-form::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(152deg,
    rgba(56,189,248,.55) 0%, rgba(129,140,248,.28) 26%,
    rgba(255,255,255,.05) 52%, rgba(56,189,248,.18) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:0;
}
.cfa-wrap .login-form>*{position:relative; z-index:1}

/* 4. the supporting copy picks up the same light instead of sitting flat grey */
.cfa-foot a{
  background:linear-gradient(96deg,#7dd3fc,#38bdf8);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--brand);
}
.cfa-foot a:hover{-webkit-text-fill-color:#bae6fd}
.cfa-or{color:#6d8095}

/* d2 keeps its own headline gradient, tuned for the dark panel */
html.d2 .cfa-brand-in h2{
  background:linear-gradient(98deg,#ffffff 0%,#cfeaff 50%,#7dd3fc 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* 4. the heading stacks: a small ruled eyebrow over the name */
.cfa-head h1{display:flex; flex-direction:column; align-items:center; gap:11px}
.cfa-head h1 .lt{
  display:flex; align-items:center; gap:14px; width:100%;
  font-size:.46em; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); line-height:1;
}
.cfa-head h1 .lt::before,
.cfa-head h1 .lt::after{content:""; flex:1; height:1px; background:var(--line)}
.cfa-head h1 b{line-height:1.05}

/* 2. the mark flies a full circuit around the name, once every five seconds */
.cfa-name{position:relative; display:inline-block; line-height:1.05}
.cfa-name>b{display:inline-block}
.cfa-name>b{position:relative; z-index:1}
.cfa-fly{
  position:absolute; z-index:6; pointer-events:none;
  width:clamp(18px,1.3vw,24px); height:auto; line-height:0;
  animation:cfaFly 10s ease-in-out infinite;
}
.cfa-fly img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 2px 7px rgba(56,189,248,.5));
  animation:cfaFlap .32s ease-in-out infinite alternate;
}
@keyframes cfaFlap{from{transform:scaleX(1)} to{transform:scaleX(.74)}}
@keyframes cfaFly{
  0%    {left:-14%; top:44%; transform:translate(-50%,-50%) rotate(-4deg) scaleX(1)}
  6%    {left:6%;   top:14%; transform:translate(-50%,-50%) rotate(8deg)  scaleX(1)}
  12.5% {left:50%;  top:4%;  transform:translate(-50%,-50%) rotate(0deg)  scaleX(1)}
  19%   {left:94%;  top:14%; transform:translate(-50%,-50%) rotate(-8deg) scaleX(1)}
  25%   {left:114%; top:44%; transform:translate(-50%,-50%) rotate(-4deg) scaleX(1)}
  25.6% {left:114%; top:44%; transform:translate(-50%,-50%) rotate(4deg)  scaleX(-1)}
  31%   {left:94%;  top:68%; transform:translate(-50%,-50%) rotate(8deg)  scaleX(-1)}
  37.5% {left:50%;  top:62%; transform:translate(-50%,-50%) rotate(0deg)  scaleX(-1)}
  44%   {left:6%;   top:68%; transform:translate(-50%,-50%) rotate(-8deg) scaleX(-1)}
  50%   {left:-14%; top:44%; transform:translate(-50%,-50%) rotate(-4deg) scaleX(-1)}
  50.6% {left:-14%; top:44%; transform:translate(-50%,-50%) rotate(-4deg) scaleX(1)}
  100%  {left:-14%; top:44%; transform:translate(-50%,-50%) rotate(-4deg) scaleX(1)}
}
/* the mark keeps its 5s circuit even under reduce-motion: the owner asked for
   it explicitly and every other motion on the page is already switched off */

/* ============================================================
   Register - same language as the login, laid out for a long form.
   Sections are flat groups under a small ruled label, not stacked
   cards; the mailing-list checkbox becomes a real switch (the theme
   references a bootstrap-switch plugin that is never loaded).
   ============================================================ */
.cfa-wrap #registration{width:100%; max-width:min(720px,100%) !important}
.cfa-wrap #registration form{max-width:none}

/* sections */
.cfa-wrap #registration .card{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; margin:0 0 26px !important;
}
.cfa-wrap #registration .card-body{padding:0 !important}
.cfa-wrap #registration .card-title{
  display:flex; align-items:center; gap:14px; margin:0 0 16px !important;
  font-family:var(--ui); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut); text-align:left;
}
.cfa-wrap #registration .card-title::after{content:""; flex:1; height:1px; background:var(--line)}
.cfa-wrap #registration .card-title small{font-size:11px; letter-spacing:.02em; text-transform:none; color:var(--dim)}
.cfa-wrap #registration .card-title br{display:none}
.cfa-wrap #registration .card-body>p{font-size:13px; color:var(--mut); line-height:1.55; margin:0 0 14px}

/* grid + fields */
.cfa-wrap #registration .row{margin-left:-6px; margin-right:-6px}
.cfa-wrap #registration .row>[class*="col-"]{padding-left:6px; padding-right:6px}
.cfa-wrap #registration .form-group{margin-bottom:12px !important; position:relative}
.cfa-wrap #registration .form-control,
.cfa-wrap #registration .field,
.cfa-wrap #registration select,
.cfa-wrap #registration input[type=text],
.cfa-wrap #registration input[type=email],
.cfa-wrap #registration input[type=tel],
.cfa-wrap #registration input[type=password]{
  height:clamp(44px,2.5vw,48px) !important; font-family:var(--ui); font-size:14px !important;
  background:var(--field) !important; border:1px solid var(--line-hi) !important;
  border-radius:8px !important; color:var(--txt) !important; box-shadow:none !important;
  transition:border-color .14s, box-shadow .14s;
}
.cfa-wrap #registration .form-control:focus,
.cfa-wrap #registration .field:focus{border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.15) !important; outline:none}
.cfa-wrap #registration ::placeholder{color:#4b5a6b !important; opacity:1}
.cfa-wrap #registration select{padding-right:34px !important; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22 viewBox=%220 0 12 8%22><path d=%22M1 1l5 5 5-5%22 fill=%22none%22 stroke=%22%238b9bad%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important}

/* the field icons stay, but thin and quiet */
.cfa-wrap #registration .prepend-icon .field-icon{
  position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important;
  width:42px; display:flex !important; align-items:center; justify-content:center;
  margin:0; color:var(--dim); pointer-events:none; z-index:2;
}
.cfa-wrap #registration .prepend-icon .field-icon i{font-weight:300; font-size:14px}
.cfa-wrap #registration .prepend-icon .form-control:not([type=tel]),
.cfa-wrap #registration .prepend-icon .field:not([type=tel]),
.cfa-wrap #registration .prepend-icon select{padding-left:42px !important}
.cfa-wrap #registration .prepend-icon:focus-within .field-icon{color:var(--brand)}

/* password strength + generator, kept small */
.cfa-wrap #registration .progress{height:5px; border-radius:99px; background:var(--field);
  border:1px solid var(--line); overflow:hidden; margin-top:10px}
.cfa-wrap #registration .progress-bar{border-radius:99px;
  background:linear-gradient(90deg,#0ea5e9,#38bdf8) !important}
.cfa-wrap #registration .generate-password,
.cfa-wrap #registration .btn-default,
.cfa-wrap #registration .btn-secondary{
  height:36px; padding:0 14px; border-radius:8px !important; font-family:var(--ui);
  font-size:12.5px; font-weight:400; background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.1) !important; color:var(--mut) !important; box-shadow:none !important;
}
.cfa-wrap #registration .generate-password:hover{color:var(--txt) !important;
  background:rgba(255,255,255,.07) !important}

/* 13. the mailing-list switch: built from the bare checkbox, animated */
.cfa-wrap #registration input.toggle-switch-success{
  appearance:none; -webkit-appearance:none; position:relative; cursor:pointer;
  width:54px; height:30px; margin:4px 0 0; border-radius:999px; vertical-align:middle;
  background:#1a2432; border:1px solid var(--line-hi); outline:none; flex-shrink:0;
  transition:background .25s cubic-bezier(.2,.8,.3,1), border-color .25s;
}
.cfa-wrap #registration input.toggle-switch-success::before{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#8b9bad; box-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), background .25s;
}
.cfa-wrap #registration input.toggle-switch-success::after{
  content:attr(data-off-text); position:absolute; left:64px; top:50%; transform:translateY(-50%);
  font-family:var(--ui); font-size:13px; color:var(--mut); white-space:nowrap;
}
.cfa-wrap #registration input.toggle-switch-success:checked{
  background:linear-gradient(135deg,#0284c7,#38bdf8); border-color:#38bdf8;
}
.cfa-wrap #registration input.toggle-switch-success:checked::before{
  transform:translateX(24px); background:#fff;
}
.cfa-wrap #registration input.toggle-switch-success:checked::after{content:attr(data-on-text); color:var(--txt)}
.cfa-wrap #registration input.toggle-switch-success:focus-visible{box-shadow:0 0 0 3px rgba(56,189,248,.25)}
/* WHMCS does load bootstrap-switch's JS (not its CSS): it wraps the checkbox
   in .bootstrap-switch > .bootstrap-switch-container > on / label / off and
   slides the container with an inline margin-left. Dress that markup as the
   same pill; keep its inline widths (35/37/35) so the slide math still holds. */
.cfa-wrap #registration .bootstrap-switch{
  position:relative; display:inline-block; vertical-align:middle; margin:4px 0 0;
  height:30px; border-radius:999px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line-hi); background:#1a2432; box-sizing:content-box;
  transition:border-color .25s;
}
.cfa-wrap #registration .bootstrap-switch.bootstrap-switch-on{border-color:#38bdf8}
.cfa-wrap #registration .bootstrap-switch-container{display:flex; height:30px; transition:margin-left .28s cubic-bezier(.2,.8,.3,1)}
.cfa-wrap #registration .bootstrap-switch-handle-on,
.cfa-wrap #registration .bootstrap-switch-handle-off,
.cfa-wrap #registration .bootstrap-switch-label{
  flex:0 0 auto; height:30px; display:flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:12.5px; font-weight:500; line-height:1; user-select:none;
}
.cfa-wrap #registration .bootstrap-switch-handle-on{background:linear-gradient(135deg,#0284c7,#38bdf8); color:#fff}
.cfa-wrap #registration .bootstrap-switch-handle-off{background:#1a2432; color:var(--mut)}
.cfa-wrap #registration .bootstrap-switch-label{position:relative; background:#1a2432}
.cfa-wrap #registration .bootstrap-switch-on .bootstrap-switch-label{background:#38bdf8}
.cfa-wrap #registration .bootstrap-switch-label::before{
  content:""; position:absolute; top:4px; left:calc(50% - 11px); width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.cfa-wrap #registration .bootstrap-switch input.toggle-switch-success{
  position:absolute; opacity:0; width:0; height:0; margin:0; border:0; pointer-events:none;
}
.cfa-wrap #registration .bootstrap-switch.bootstrap-switch-focused{box-shadow:0 0 0 3px rgba(56,189,248,.25)}

/* submit: one full-width button, same as the login */
.cfa-wrap #registration p.text-center{margin:6px 0 0}
.cfa-wrap #registration .btn-primary[type=submit]{
  width:100%; height:clamp(46px,2.7vw,52px); border:0 !important; border-radius:8px !important;
  background:linear-gradient(135deg,#04070d 0%,#0a2740 52%,#0d4a72 100%) !important;
  color:#fff !important; font-family:var(--ui); font-weight:400 !important; font-size:15px !important;
  letter-spacing:.03em; box-shadow:none !important; transition:background .14s;
}
.cfa-wrap #registration .btn-primary[type=submit]:hover{
  background:linear-gradient(135deg,#070c16 0%,#0e3454 52%,#12608f 100%) !important}
.cfa-wrap #registration .alert{border-radius:8px; font-size:13px}

/* captcha block sits cleanly */
.cfa-wrap #registration #default-captcha-domainchecker{padding:0 !important}
.cfa-wrap #registration #default-captcha-domainchecker p{font-size:12.5px; color:var(--mut)}

@media (max-width:640px){
  .cfa-wrap #registration .row>[class*="col-"]{flex:0 0 100% !important; max-width:100% !important}
  .cfa-wrap #registration .card{margin-bottom:22px !important}
}

/* ============================================================
   Store (standard_cart on the guest layout).
   The whole store was inheriting the login-form measure (450px) and
   squeezing a sidebar plus eight cards into it. It now gets its own
   measure; the category sidebar becomes a chip strip across the top;
   cards are compact, level, and end on one glowing action.
   ============================================================ */
.cfa-wrap #order-standard_cart{width:100%; max-width:min(1120px,100%) !important; margin:0 auto}
.cfa-wrap #order-standard_cart>.row{display:block; margin:0}
.cfa-wrap #order-standard_cart>.row>[class*="col-"],
.cfa-wrap #order-standard_cart .cart-sidebar,
.cfa-wrap #order-standard_cart .products{float:none; width:100% !important; max-width:100% !important;
  flex:none; padding:0}

/* ---- 14. categories: one horizontal strip of chips instead of a side column ---- */
.cfa-wrap #order-standard_cart .cart-sidebar{margin:0 0 22px}
.cfa-wrap #order-standard_cart .cart-sidebar .panel{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; margin:0 !important; overflow:visible !important;
}
/* the panel heading (Categories / Actions + the collapse chevron) is noise here */
.cfa-wrap #order-standard_cart .cart-sidebar .panel-heading{display:none !important}
/* Actions (domain register/transfer) does not belong on a VPS shelf */
.cfa-wrap #order-standard_cart .cart-sidebar .panel[menuItemName="Actions"]{display:none !important}
/* the phone-only select duplicate, and the whole collapsed sidebar block the
   phone breakpoint adds (Categories / Actions panels + currency select):
   the chip strip above already covers phones */
.cfa-wrap #order-standard_cart .cart-sidebar form,
.cfa-wrap #order-standard_cart .cart-sidebar select,
.cfa-wrap #order-standard_cart .sidebar-collapsed{display:none !important}

.cfa-wrap #order-standard_cart .cart-sidebar .list-group{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap; gap:8px !important;
  padding:0 0 6px !important; margin:0; overflow-x:auto; scrollbar-width:none;
  border:0 !important; background:none !important;
}
.cfa-wrap #order-standard_cart .cart-sidebar .list-group::-webkit-scrollbar{display:none}
.cfa-wrap #order-standard_cart .cart-sidebar .list-group-item{
  display:inline-flex !important; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto;
  height:36px; padding:0 14px !important; border-radius:999px !important;
  background:rgba(255,255,255,.035) !important; border:1px solid rgba(255,255,255,.09) !important;
  color:var(--mut) !important; font-family:var(--ui); font-size:13px; font-weight:400;
  transform:none !important; transition:background .14s, border-color .14s, color .14s;
}
.cfa-wrap #order-standard_cart .cart-sidebar .list-group-item i{color:var(--dim); font-size:12px; width:auto}
.cfa-wrap #order-standard_cart .cart-sidebar a.list-group-item:hover{
  background:rgba(255,255,255,.075) !important; border-color:rgba(255,255,255,.17) !important;
  color:var(--txt) !important; transform:none !important}
.cfa-wrap #order-standard_cart .cart-sidebar .list-group-item.active{
  background:linear-gradient(135deg,#0a2740,#0d4a72) !important; border-color:#1f6fa3 !important;
  color:#fff !important}
.cfa-wrap #order-standard_cart .cart-sidebar .list-group-item.active i{color:#7dd3fc}
.cfa-wrap #order-standard_cart .cart-sidebar .list-group-item .badge{
  background:rgba(56,189,248,.16) !important; color:var(--brand) !important; margin-left:2px}

/* ---- 15. cards: compact, level, fewest rows ---- */
.cfa-wrap #order-standard_cart .pl-plan-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:14px;
}
.cfa-wrap #order-standard_cart .pl-plan{
  display:flex; flex-direction:column; padding:18px 18px 16px; border-radius:12px;
  background:linear-gradient(180deg,rgba(22,34,52,.55),rgba(11,18,30,.7));
  border:1px solid rgba(255,255,255,.08); box-shadow:none;
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
.cfa-wrap #order-standard_cart .pl-plan::after{display:none}
.cfa-wrap #order-standard_cart .pl-plan:hover{
  transform:translateY(-2px); border-color:rgba(56,189,248,.45);
  box-shadow:0 18px 40px -28px rgba(56,189,248,.6)}
.cfa-wrap #order-standard_cart .pl-plan-head{margin-bottom:4px}
.cfa-wrap #order-standard_cart .pl-plan-name{
  font-family:var(--display) !important; font-size:18px !important; font-weight:700 !important;
  letter-spacing:-.015em; color:#fff !important}
.cfa-wrap #order-standard_cart .pl-plan-qty{font-size:10.5px; color:var(--dim)}

/* the description comes in as <p>intro</p><br><ul>...</ul><br> - strip the noise */
.cfa-wrap #order-standard_cart .pl-plan-tag{margin:0; font-size:12.5px; line-height:1.5; color:var(--mut)}
.cfa-wrap #order-standard_cart .pl-plan-tag>br,
.cfa-wrap #order-standard_cart .pl-plan-tag ul>br,
.cfa-wrap #order-standard_cart .pl-plan-tag>p>br{display:none}
.cfa-wrap #order-standard_cart .pl-plan-tag>p{margin:0 0 10px}
.cfa-wrap #order-standard_cart .pl-plan-tag>p>strong:first-child{display:none}

/* spec list: tight rows, small hairline icons */
.cfa-wrap #order-standard_cart .pl-plan-feats{
  list-style:none; margin:0; padding:10px 0 0; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:6px}
.cfa-wrap #order-standard_cart .pl-plan-feats li{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--mut); line-height:1.3}
.cfa-wrap #order-standard_cart .pl-plan-feats li svg{
  width:20px; height:20px; padding:3px; border-radius:6px; flex-shrink:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--brand);
  transform:none !important}
.cfa-wrap #order-standard_cart .pl-plan-feats li:hover svg{background:rgba(56,189,248,.12); transform:none !important}
.cfa-wrap #order-standard_cart .pl-plan-feats b,
.cfa-wrap #order-standard_cart .pl-plan-feats strong{color:var(--txt); font-weight:600}

/* price */
.cfa-wrap #order-standard_cart .pl-plan-price{
  margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.cfa-wrap #order-standard_cart .pl-plan-price .from{font-size:10px; color:var(--dim); margin-bottom:2px}
.cfa-wrap #order-standard_cart .pl-plan-price .amt{
  font-family:var(--display); font-size:26px; font-weight:600; letter-spacing:-.02em;
  background:linear-gradient(96deg,#dff1ff,#8ed8fb 45%,#38bdf8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--brand)}
.cfa-wrap #order-standard_cart .pl-plan-price .per{font-size:12px; color:var(--dim)}
.cfa-wrap #order-standard_cart .pl-plan-setup{font-size:11px; color:var(--dim); margin-top:6px}

/* the one thing that shines: Order Now, pinned to the foot so rows stay level */
.cfa-wrap #order-standard_cart .pl-plan-btn{
  margin-top:auto; padding-top:14px; position:relative;
}
.cfa-wrap #order-standard_cart .pl-plan-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  height:44px; margin-top:14px; padding:0 14px; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg,#04070d 0%,#0a2740 52%,#0d4a72 100%);
  border:1px solid rgba(56,189,248,.28); color:#fff !important;
  font-family:var(--ui); font-size:14px; font-weight:400; letter-spacing:.03em;
  box-shadow:0 0 0 1px rgba(56,189,248,.06), 0 10px 26px -16px rgba(56,189,248,.9);
  transition:box-shadow .18s, border-color .18s, transform .12s;
}
.cfa-wrap #order-standard_cart .pl-plan-btn i{font-size:12px; color:#7dd3fc}
.cfa-wrap #order-standard_cart .pl-plan-btn::after{
  content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.cfa-wrap #order-standard_cart .pl-plan-btn:hover{
  border-color:rgba(56,189,248,.7); transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(56,189,248,.18), 0 14px 34px -14px rgba(56,189,248,1)}
.cfa-wrap #order-standard_cart .pl-plan-btn:hover::after{animation:cfaSheen .7s ease}
.cfa-wrap #order-standard_cart .pl-plan:hover .pl-plan-btn{box-shadow:0 0 0 1px rgba(56,189,248,.14), 0 12px 30px -14px rgba(56,189,248,.95)}

/* ---- responsive ---- */
@media (max-width:1400px){
  .cfa-wrap #order-standard_cart .pl-plan-grid{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
}
@media (max-width:640px){
  .cfa-wrap #order-standard_cart .pl-plan-grid{grid-template-columns:1fr; gap:12px}
  .cfa-wrap #order-standard_cart .cart-sidebar{margin-bottom:16px}
}

/* ============================================================
   3. leaving the page: the card lifts away and the brand preloader
   takes over until the client area lands. Also swallows any transient
   scrollbar the browser paints while the form posts.
   ============================================================ */
html.cfa-leaving, html.cfa-leaving body{overflow:hidden !important}
html.cfa-leaving .cfa-scroll{overflow:hidden !important}
html.cfa-leaving .cfa-pane{
  opacity:0; transform:translateX(-3%) scale(.985);
  transition:opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1)}
html.cfa-leaving .cfa-brand{opacity:0; transition:opacity .5s ease}
html.cfa-leaving #plLoader{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  animation:none !important; transition:opacity .35s ease .12s}
.cfa-wrap #login.pl-loading{opacity:1; pointer-events:none}
.cfa-wrap #login .pl-spin{border-color:rgba(255,255,255,.28); border-top-color:#fff; width:18px; height:18px; vertical-align:middle}

/* ============================================================
   2. fields must look identical whether Chrome fills them or not.
   Layered: the inset shadow repaints the surface, background-clip:text
   hides the UA fill, text-fill fixes the colour, and a zero-length
   animation lets JS notice the autofill and pin the same styles inline.
   ============================================================ */
@keyframes cfaAf{from{opacity:1} to{opacity:1}}
.cfa-wrap .login-form .form-control:-webkit-autofill,
.cfa-wrap .login-form .form-control:-webkit-autofill:hover,
.cfa-wrap .login-form .form-control:-webkit-autofill:focus,
.cfa-wrap .login-form .form-control:-webkit-autofill:active,
.cfa-wrap .login-form .form-control:autofill,
.cfa-wrap .login-form .form-control:-internal-autofill-selected,
.cfa-wrap .login-form .form-control:-internal-autofill-previewed,
.cfa-wrap .login-form #inputEmail:-webkit-autofill,
.cfa-wrap .login-form #inputPassword:-webkit-autofill,
.cfa-wrap .login-form .form-control.is-af{
  animation-name:cfaAf; animation-duration:1ms;
  -webkit-background-clip:text !important; background-clip:text !important;
  background-color:var(--field) !important; background-image:none !important;
  -webkit-text-fill-color:var(--txt) !important; color:var(--txt) !important;
  -webkit-box-shadow:0 0 0 1000px var(--field) inset !important;
          box-shadow:0 0 0 1000px var(--field) inset !important;
  caret-color:var(--txt) !important; border:1px solid var(--line-hi) !important;
  filter:none !important; transition:background-color 600000s 0s, color 600000s 0s !important;
}
.cfa-wrap .login-form .form-control:-webkit-autofill:focus,
.cfa-wrap .login-form .form-control.is-af:focus{
  border-color:var(--brand) !important;
  -webkit-box-shadow:0 0 0 1000px var(--field) inset, 0 0 0 3px rgba(56,189,248,.15) !important;
          box-shadow:0 0 0 1000px var(--field) inset, 0 0 0 3px rgba(56,189,248,.15) !important;
}

/* 3. remember me: a proper control, not a browser tick */
.cfa-wrap .cfa-check{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-hi);
  background:linear-gradient(180deg,#182230,#121a25); display:grid; place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.cfa-wrap .cfa-check svg{width:12px; height:12px; color:#04141f; stroke-width:3.2;
  stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset .26s cubic-bezier(.2,.8,.3,1) .04s}
.cfa-wrap .pl-remember:hover .cfa-check{border-color:rgba(56,189,248,.55); transform:translateY(-1px)}
.cfa-wrap .pl-remember:active .cfa-check{transform:scale(.92)}
.cfa-wrap .pl-remember input:checked + .cfa-check{
  background:linear-gradient(135deg,#0ea5e9,#38bdf8); border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.16), 0 6px 14px -8px rgba(56,189,248,.9)}
.cfa-wrap .pl-remember input:checked + .cfa-check svg{stroke-dashoffset:0}
.cfa-wrap .pl-remember input:checked ~ span:last-child{color:var(--txt)}
.cfa-wrap .pl-remember>span:last-child{transition:color .18s}

/* ============================================================
   v31 - wide guest layout for the shop and the public pages.
   Cart, knowledgebase, announcements, status, downloads and guest
   tickets carry .cfa-wide on the wrapper (header.tpl): the brand panel
   is not rendered, the pane spans the viewport, the content measure is
   the same 1180px the logged-in area uses, and a small top nav offers
   the way in. Login / register / reset / contact keep the two panes.
   ============================================================ */
.cfa-wrap.cfa-wide .cfa-pane{flex:1 1 100%; margin-right:0; border-radius:0; box-shadow:none}
.cfa-wrap.cfa-wide .cfa-pane::before{
  background:
    radial-gradient(48% 40% at 8% 0%,rgba(56,189,248,.16),transparent 70%),
    radial-gradient(40% 44% at 96% 12%,rgba(129,140,248,.10),transparent 72%);
}
.cfa-wrap.cfa-wide .cfa-scroll{
  display:block; padding:104px clamp(20px,4vw,56px) 64px;
}
.cfa-wrap.cfa-wide .cfa-scroll>*{max-width:1180px; margin-left:auto; margin-right:auto}
.cfa-wrap.cfa-wide #order-standard_cart{max-width:1180px !important}

/* top nav, mirrors the fixed logo on the other side */
.cfa-topnav{position:fixed; top:24px; right:clamp(20px,3vw,40px); z-index:6;
  display:flex; align-items:center; gap:4px}
.cfa-topnav a{height:38px; padding:0 14px; border-radius:8px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ui); font-size:13.5px; font-weight:400; color:var(--mut);
  text-decoration:none !important; transition:background .14s, color .14s, border-color .14s}
.cfa-topnav a:hover{color:var(--txt); background:rgba(255,255,255,.05)}
.cfa-topnav a.on{color:var(--txt)}
.cfa-topnav a.pri{margin-left:6px; padding:0 16px; color:#fff;
  background:linear-gradient(135deg,#0a2740 0%,#0d4a72 100%); border:1px solid rgba(56,189,248,.35)}
.cfa-topnav a.pri:hover{background:linear-gradient(135deg,#0e3454 0%,#12608f 100%); color:#fff}
.cfa-topnav a.pri svg{width:15px; height:15px}

/* WHMCS focuses the hidden billing-cycle <select> on load; Chrome scrolls the
   pane to it (it sits 400px down on phones). A fixed 1px element is always
   "in view", so focusing it never scrolls anything. */
.cfa-wrap.cfa-wide #inputBillingcycle{position:fixed !important; top:0 !important; left:0 !important;
  width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none; margin:0}

/* the footer links row is a normal block on long pages */
.cfa-wrap.cfa-wide .cfa-links{position:static; margin:44px auto 0 !important; max-width:1180px}

@media (max-width:1050px){
  .cfa-wrap.cfa-wide .cfa-scroll{padding:96px 20px 48px}
}
@media (max-width:640px){
  .cfa-topnav a:not(.pri){display:none}
  .cfa-topnav{top:18px; right:16px}
  .cfa-topnav a.pri{height:36px; margin:0}
  .cfa-wrap.cfa-wide .cfa-scroll{padding:82px 14px 40px}
}

/* ============================================================
   v31 - contact page (contact.tpl) on the two-pane layout: the same
   glass card as the login form, stacked labels, two-up name/email.
   ============================================================ */
.cfa-wrap .cfa-contact{
  width:100%; max-width:min(100%,clamp(440px,34vw,600px)) !important; margin:0 auto !important;
  position:relative; border-radius:18px !important; border:0 !important; overflow:visible !important;
  padding:clamp(30px,2.2vw,40px) clamp(28px,2.1vw,38px) clamp(26px,2vw,34px);
  background:linear-gradient(180deg,rgba(22,36,58,.62) 0%,rgba(11,18,32,.72) 62%,rgba(9,15,26,.76) 100%) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.92), 0 0 0 1px rgba(56,189,248,.05), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.cfa-wrap .cfa-contact::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(152deg,rgba(56,189,248,.55) 0%,rgba(129,140,248,.28) 26%,rgba(255,255,255,.05) 52%,rgba(56,189,248,.18) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:0; display:block;
  height:auto; top:0; left:0; right:0; opacity:1;
}
.cfa-wrap .cfa-contact .card-body{padding:0 !important; position:relative; z-index:1}
.cfa-contact-head{text-align:center; margin:0 0 22px}
.cfa-contact-head h1{font-family:var(--display); font-size:clamp(26px,1.7vw,34px); font-weight:600;
  letter-spacing:-.03em; margin:0 0 6px; line-height:1.1;
  background:linear-gradient(96deg,#dff1ff 0%,#8ed8fb 42%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff}
.cfa-contact-head p{margin:0; font-size:14px; color:var(--mut)}
.cfa-cf-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.cfa-contact .form-group{display:block; margin:0 0 14px}
.cfa-contact .form-group label{display:block; text-align:left; font-family:var(--ui); font-size:13px; font-weight:400;
  color:var(--mut); margin:0 0 7px; padding:0; letter-spacing:0; text-transform:none}
.cfa-wrap .cfa-contact .form-control{
  width:100%; height:clamp(46px,2.8vw,52px); padding:0 16px; font-family:var(--ui); font-size:15px;
  background:var(--field) !important; border:1px solid var(--line-hi) !important; border-radius:8px !important;
  color:var(--txt) !important; box-shadow:none !important; transition:border-color .14s, box-shadow .14s;
}
.cfa-wrap .cfa-contact textarea.form-control{height:auto; min-height:150px; padding:13px 16px; resize:vertical; line-height:1.55}
.cfa-wrap .cfa-contact .form-control::placeholder{color:#4b5a6b}
.cfa-wrap .cfa-contact .form-control:focus{border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.15) !important; outline:none}
/* default image captcha: the explanation shrinks to a caption, image + field on one row */
/* includes/captcha.tpl = .row > .col-md-8 > #default-captcha-domainchecker.row > p + .col-6 img + .col-6 input */
.cfa-captcha{margin:4px 0 16px}
.cfa-captcha>.row{display:block; margin:0}
.cfa-captcha .col-md-8{flex:none; width:100%; max-width:100%; padding:0; margin:0 !important}
.cfa-captcha #default-captcha-domainchecker{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  padding:0 !important; margin:0; text-align:left}
.cfa-captcha #default-captcha-domainchecker p{flex:0 0 100%; font-size:12.5px; color:var(--dim); margin:0; line-height:1.5}
.cfa-captcha #default-captcha-domainchecker>.col-6{flex:0 0 auto; width:auto; max-width:none; padding:0}
.cfa-captcha .captchaimage img,.cfa-captcha #inputCaptchaImage{height:46px; width:auto; border-radius:8px; display:block}
.cfa-wrap .cfa-captcha #inputCaptcha{width:170px !important; height:46px; letter-spacing:.12em; font-family:var(--mono,monospace)}
.cfa-captcha .g-recaptcha{display:flex; justify-content:center}
.cfa-wrap .cfa-send{
  width:100%; height:clamp(46px,2.8vw,52px); border:0 !important; border-radius:8px !important; cursor:pointer;
  background:linear-gradient(135deg,#04070d 0%,#0a2740 52%,#0d4a72 100%) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; margin-top:4px;
  font-family:var(--ui) !important; font-weight:300 !important; font-size:15.5px !important; letter-spacing:.03em;
  box-shadow:none !important; transition:background .14s, box-shadow .2s;
}
.cfa-wrap .cfa-send:hover{background:linear-gradient(135deg,#070c16 0%,#0e3454 52%,#12608f 100%) !important;
  box-shadow:0 8px 22px -12px rgba(2,132,199,.95) !important}
.cfa-contact-alt{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13px; color:var(--dim)}
.cfa-contact-alt a{color:var(--mut); text-decoration:none}
.cfa-contact-alt a:hover{color:var(--txt)}
.cfa-contact-alt span{opacity:.45}
.cfa-wrap .cfa-contact .alert{margin-bottom:16px}
@media (max-width:520px){
  .cfa-cf-grid{grid-template-columns:1fr}
  .cfa-wrap .cfa-contact{padding:26px 20px 22px}
}


/* ============================================================
   v38 (2026-09-10)
   1. the form column sits a touch above geometric centre on every
      screen (Arshia: «باکس لاگین یکم بیاد بالاتر، وسط نیست»)
   2. register = the same glass card as sign-in, a real head,
      numbered sections, one clear submit (Arshia: «رجیستر داغونه،
      معلوم نیست چی به چیه»)
   ============================================================ */
.cfa-scroll{padding:64px 34px 108px}
@media (min-width:2000px){.cfa-scroll{padding:96px 48px 128px}}
@media (max-width:1050px){.cfa-scroll{padding:72px 20px 84px}}
@media (max-width:520px){.cfa-scroll{padding:60px 16px 76px}}

.cfa-wrap #registration{
  max-width:min(100%,clamp(560px,46vw,760px)) !important; position:relative;
  padding:clamp(28px,2.2vw,40px) clamp(24px,2.1vw,38px) clamp(24px,2vw,32px);
  border-radius:18px; counter-reset:reg;
  background:linear-gradient(180deg,rgba(22,36,58,.62) 0%,rgba(11,18,32,.72) 62%,rgba(9,15,26,.76) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.92),0 0 0 1px rgba(56,189,248,.05),inset 0 1px 0 rgba(255,255,255,.055);
}
.cfa-reghead{text-align:center; margin:0 0 24px}
.cfa-reghead h1{font-family:var(--display); font-size:clamp(24px,2vw,30px); font-weight:600; letter-spacing:-.03em; color:var(--txt); margin:0 0 6px; line-height:1.1}
.cfa-reghead p{font-size:13.5px; color:var(--mut); margin:0}
.cfa-reghead p a{color:var(--brand); font-weight:500; text-decoration:none}
.cfa-reghead p a:hover{text-decoration:underline}
.cfa-wrap #registration .card{margin:0 0 22px !important}
.cfa-wrap #registration .card-title{align-items:center}
.cfa-wrap #registration .card-title::before{counter-increment:reg; content:counter(reg,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--brand); letter-spacing:.06em; margin-right:2px}
.cfa-wrap #registration .prepend-icon .field-icon{width:38px}
.cfa-wrap #registration .prepend-icon .field-icon i{font-size:13px; opacity:.8}
.cfa-wrap #registration .prepend-icon .form-control:not([type=tel]),
.cfa-wrap #registration .prepend-icon .field:not([type=tel]),
.cfa-wrap #registration .prepend-icon select{padding-left:38px !important}
/* security row: generate button and strength meter on one line */
.cfa-wrap #registration #containerPassword>.col-sm-6:nth-child(4),
.cfa-wrap #registration #containerPassword>.col-sm-6:nth-child(5){display:flex; align-items:center}
.cfa-wrap #registration .generate-password{height:36px !important; padding:0 14px !important; font-size:12.5px !important; margin:0 !important; width:auto !important}
.cfa-wrap #registration .password-strength-meter{flex:1; display:flex; align-items:center; gap:10px; margin:0}
.cfa-wrap #registration .password-strength-meter .progress{flex:1; margin:0}
.cfa-wrap #registration .password-strength-meter p{margin:0; font-size:11px; color:var(--dim); white-space:nowrap; font-family:var(--mono)}
/* mailing list: label and switch on one line */
.cfa-wrap #registration .card:has(.toggle-switch-success) .card-body{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.cfa-wrap #registration .card:has(.toggle-switch-success) .card-title{width:100%}
.cfa-wrap #registration .card:has(.toggle-switch-success) p{flex:1 1 320px; margin:0; font-size:12.5px}
/* submit */
.cfa-wrap #registration p.text-center:last-child{margin:4px 0 0}
.cfa-wrap #registration .btn-primary[type=submit]{position:relative; overflow:hidden}
.cfa-wrap #registration .btn-primary[type=submit]:hover{box-shadow:0 8px 22px -12px rgba(2,132,199,.95) !important}
.cfa-regfoot{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); text-align:center}
.cfa-regfoot a{color:var(--mut); text-decoration:none} .cfa-regfoot a:hover{color:var(--txt)}
@media (max-width:520px){
  .cfa-wrap #registration{padding:22px 16px 20px; border-radius:14px}
  .cfa-wrap #registration .form-control,.cfa-wrap #registration .field,.cfa-wrap #registration select{height:44px !important}
  .cfa-wrap #registration .row>[class*="col-"]{flex:0 0 100%; max-width:100%}
  .cfa-wrap #registration #containerPassword>.col-sm-6:nth-child(5){margin-top:6px}
}


/* ============================================================
   v39 (2026-09-12) - register / guest checkout: the Font Awesome
   PRO face the theme references is not installed, so every field
   icon rendered as an empty square. Icons are gone; every field
   gets a real label above it (footer.tpl script builds them from
   the placeholders). Arshia: «رجیستر خیلی مشکل داره».
   ============================================================ */
.cfa-wrap .prepend-icon .field-icon,.cfa-wrap #registration .prepend-icon .field-icon,.cfa-wrap #order-standard_cart .prepend-icon .field-icon{display:none !important}
.cfa-wrap .prepend-icon.cfa-labeled .form-control:not([type=tel]),
.cfa-wrap .prepend-icon.cfa-labeled .field:not([type=tel]),
.cfa-wrap .prepend-icon.cfa-labeled select{padding-left:14px !important}
.cfa-wrap #registration .prepend-icon .form-control:not([type=tel]),
.cfa-wrap #registration .prepend-icon .field:not([type=tel]),
.cfa-wrap #registration .prepend-icon select{padding-left:14px !important}
.cfa-lbl{display:block; font-size:12.5px; color:var(--mut); margin:0 0 6px; font-weight:500; letter-spacing:.01em; line-height:1.2}
.cfa-lbl span{color:var(--dim); margin-left:6px; font-size:11px; font-weight:400}
.cfa-wrap #registration .form-group{margin-bottom:14px !important}
.cfa-wrap #registration .card-title{margin-bottom:14px}
.cfa-wrap #registration ::placeholder{color:#3e4b5b !important}
/* the mailing-list row: switch and its text on one line, never overlapping the card edge */
.cfa-wrap #registration .card:has(.toggle-switch-success) .card-body{align-items:center}
.cfa-wrap #registration .card:has(.toggle-switch-success) .bootstrap-switch,
.cfa-wrap #registration .card:has(.toggle-switch-success) input.toggle-switch-success{margin:0; flex:none}
/* strength meter under the password, full width, readable */
.cfa-wrap #registration .password-strength-meter{flex-basis:100%}
.cfa-wrap #registration #containerPassword>.col-sm-6:nth-child(4){margin-bottom:4px}


/* ---- v41 (2026-09-13): Ali's review ----
   #24 login column narrower: the card had air to the right of the fields on wide screens.
   Captcha image readable on the dark card + click-to-refresh (footer.tpl). */
.cfa-wrap form.login-form,.cfa-wrap .providerLinkingFeedback{max-width:min(100%,clamp(372px,26vw,428px)) !important}
.cfa-wrap #inputCaptchaImage{height:42px;width:auto;border-radius:8px;cursor:pointer;border:1px solid rgba(125,211,252,.3);display:block;
  filter:invert(.93) hue-rotate(185deg) saturate(1.5) contrast(1.05)}
.cfa-wrap #registration #default-captcha-domainchecker{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:0}
.cfa-wrap #registration #default-captcha-domainchecker p{flex:0 0 100%;margin:0 0 4px}
.cfa-wrap #registration #default-captcha-domainchecker>.col-6{flex:0 0 auto;width:auto;max-width:none;padding:0}
.cfa-wrap #registration #inputCaptcha{width:150px !important;height:42px;font-family:var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;float:none !important}

/* ============================================================================
   c16 (2026-09-22) — login card on phones: smaller, tighter, fits one screen.
   Inputs stay >= 16px (iOS zooms into smaller fields).
   ============================================================================ */
@media (max-width:560px){
  html body .cfa-wrap .cfa-scroll{padding:18px 14px 56px !important;justify-content:safe center !important}
  html body .cfa-wrap a.cfa-logo{margin-bottom:0}
  html body .cfa-wrap a.cfa-logo img{height:26px !important;width:auto}
  html body .cfa-wrap form.login-form{padding:18px 16px 16px !important;border-radius:16px !important;width:100%;max-width:360px;margin:34px auto 0 !important;
    display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;column-gap:8px !important;row-gap:0 !important}
  /* every block full width, except Google + Login link: side by side on one row */
  html body .cfa-wrap form.login-form > *{flex:1 1 100% !important;min-width:0}
  html body .cfa-wrap form.login-form > :is(#googleLoginWrap,#magicLoginWrap){flex:1 1 calc(50% - 4px) !important;margin:0 0 4px !important}
  html body .cfa-wrap form.login-form > input[type=hidden],html body .cfa-wrap form.login-form > .cfa-magicslot:not(.open):not(.show){flex-basis:100% !important}
  html body .cfa-wrap form.login-form .cfa-head{margin:0 0 14px !important}
  html body .cfa-wrap form.login-form .cfa-head h1{gap:6px !important;height:auto}
  html body .cfa-wrap form.login-form .cfa-head .lt{font-size:10px !important;letter-spacing:.18em}
  html body .cfa-wrap form.login-form .cfa-head .cfa-name{font-size:20px !important;line-height:1.15}
  html body .cfa-wrap form.login-form :is(#googleLoginBtn,#magicLoginToggle){width:100% !important;height:40px !important;font-size:13.5px !important;padding:0 8px !important;white-space:nowrap}
  html body .cfa-wrap form.login-form .cfa-or{margin:8px 0 10px !important}
  html body .cfa-wrap form.login-form .form-group{margin:0 0 10px !important}
  html body .cfa-wrap form.login-form label:not(.pl-remember){margin:0 0 5px !important;font-size:13px}
  html body .cfa-wrap form.login-form .form-control{height:42px !important;font-size:16px !important;padding:0 14px}
  html body .cfa-wrap form.login-form .input-group .btn-reveal-pw,html body .cfa-wrap form.login-form .input-group-append .btn{height:42px !important}
  html body .cfa-wrap form.login-form .pl-remember{margin:0 0 10px !important;font-size:13px}
  html body .cfa-wrap form.login-form #login{height:42px !important;padding:0 12px !important;font-size:15px !important}
  html body .cfa-wrap form.login-form .cfa-foot{margin-top:10px !important;font-size:13px}
  html body .cfa-wrap .cfa-links{margin-top:14px !important;font-size:12.5px;padding-right:64px;flex-wrap:wrap;row-gap:4px}
}