/* ============================================================
   4BIGHA ADVISORY — CHECKOUT REDESIGN  (5 Sep 2026)
   This is where someone commits ₹45,000–₹1,50,000 to an advisory
   engagement. It was reading as a generic contact form on a 1000px
   column, with the plan prices buried a scroll below the fold and
   nothing on screen saying what the fee actually buys.

   What changed, and why:
   · A wider editorial grid with a sticky engagement rail. The buyer
     can always see the vertical, the plan, the fee, the GST and what
     is included — the three questions people actually re-ask before
     paying a large amount.
   · The stepper became a single progress rail instead of four boxes
     competing with the plan cards for attention.
   · Plan cards lead with the price and the deliverables, and the
     chosen one is unmistakable.
   · The capability matrix reads like a document, with a frozen first
     column, so it can be scanned rather than decoded.
   · Payment step is laid out like an invoice.
   No ids, handlers or markup semantics were changed — only how the
   page is drawn, plus one aside the script adds.
   ============================================================ */

:root{
  --adv-ink:#1d1526;
  --adv-deep:#2a0d5c;
  --adv-violet:#56299a;
  --adv-gold:#c9a84c;
  --adv-gold-d:#8f7018;
  --adv-line:#e8e2d6;
  --adv-line-2:#f1ece2;
  --adv-mut:#756e82;
  --adv-cream:#fbf9f5;
  --adv-paper:#ffffff;
  --adv-ok:#1f6d47;
  --adv-shadow:0 30px 70px -34px rgba(42,13,92,.34);
  --adv-ease:cubic-bezier(.22,.7,.28,1);
}

/* ---------- page ground ---------- */
body{
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(86,41,154,.055), transparent 62%),
    radial-gradient(760px 420px at -6% 8%, rgba(201,168,76,.09), transparent 60%),
    var(--adv-cream) !important;
  color:var(--adv-ink);
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1240px !important; padding:0 clamp(18px,3.4vw,40px) !important; }

/* ---------- masthead ---------- */
header{ padding:28px 0 4px !important; align-items:center !important; }
.tag{
  font-size:10.5px !important; letter-spacing:2.8px !important;
  color:var(--adv-gold-d) !important; font-weight:600;
}
.help{ font-size:12.5px; color:var(--adv-mut); }
.help a{ color:var(--adv-deep) !important; font-weight:700; border-bottom:1px solid rgba(42,13,92,.25); }

/* ---------- vertical picker ---------- */
.vpick{ margin-top:16px !important; gap:7px !important; }
.vpick a{
  font-size:12px !important; letter-spacing:.4px !important; padding:8px 16px !important;
  border-color:var(--adv-line) !important; color:var(--adv-mut) !important;
  transition:.22s var(--adv-ease) !important;
}
.vpick a:hover{ border-color:var(--adv-gold) !important; color:var(--adv-ink) !important; }
.vpick a.on{
  background:var(--adv-deep) !important; border-color:var(--adv-deep) !important;
  color:#fff !important; font-weight:600 !important;
  box-shadow:0 8px 20px -10px rgba(42,13,92,.7);
}

/* ---------- progress rail (was four boxes) ---------- */
.stepper{
  margin:26px 0 0 !important; gap:0 !important;
  background:transparent; position:relative; padding:0 0 4px;
}
.stepper::before{
  content:""; position:absolute; left:13px; right:13px; top:13px; height:2px;
  background:var(--adv-line); border-radius:2px;
}
.step{
  flex:1 1 0; min-width:0; background:transparent !important; border:none !important;
  box-shadow:none !important; padding:0 !important;
  display:flex !important; flex-direction:column; align-items:flex-start; gap:9px;
  position:relative; z-index:1;
}
.step .n{
  width:28px !important; height:28px !important; font-size:12.5px !important;
  background:#fff !important; color:var(--adv-mut) !important;
  border:2px solid var(--adv-line); box-shadow:0 0 0 5px var(--adv-cream);
  transition:.28s var(--adv-ease) !important;
}
.step.on .n{ background:var(--adv-deep) !important; color:#fff !important; border-color:var(--adv-deep); }
.step.done .n{ background:var(--adv-ok) !important; color:#fff !important; border-color:var(--adv-ok); }
.step .t{
  font-size:12.5px !important; font-weight:600 !important; letter-spacing:.1px;
  color:var(--adv-mut) !important; padding-right:14px;
}
.step.on .t{ color:var(--adv-deep) !important; }
.step.done{ cursor:pointer; }
.step .edit{ position:absolute; top:2px; left:36px; font-size:9.5px !important; }
@media(max-width:680px){
  .stepper::before{ top:13px; }
  .step .t{ display:none; }
  .step.on .t{ display:block; font-size:12px !important; }
}

/* ---------- the editorial grid ---------- */
.fbadv-lay{ display:block; }
@media(min-width:1080px){
  .fbadv-lay{
    display:grid;
    grid-template-columns:minmax(0,1fr) 342px;
    gap:28px;
    align-items:start;
  }
  #fbAdvRail{ position:sticky; top:22px; }
}

/* ---------- the card ---------- */
.card{
  border-radius:20px !important;
  border-color:var(--adv-line) !important;
  padding:clamp(24px,3.2vw,42px) !important;
  margin:22px 0 56px !important;
  box-shadow:var(--adv-shadow) !important;
}
.eyebrow{
  font-size:10.5px !important; letter-spacing:2.2px !important;
  color:var(--adv-gold-d) !important; font-weight:600;
}
h1{
  font-size:clamp(27px,3.1vw,40px) !important;
  letter-spacing:-.9px !important; line-height:1.08 !important;
  margin:12px 0 10px !important; color:var(--adv-deep) !important;
}
.lead{ font-size:15.5px !important; line-height:1.7 !important; color:var(--adv-mut) !important; max-width:60ch !important; }

.trust{ gap:7px !important; margin-bottom:26px !important; }
.trust span{
  font-size:12px !important; padding:7px 14px !important;
  background:#fff !important; border-color:var(--adv-line) !important;
  box-shadow:0 2px 6px -3px rgba(42,13,92,.18);
}

.sec-h{
  font-size:10.5px !important; letter-spacing:1.9px !important;
  color:var(--adv-ink) !important; font-weight:600; margin:34px 0 16px !important;
}
.sec-h::after{ background:var(--adv-line-2) !important; }

/* ---------- fields ---------- */
.grid2{ gap:18px !important; }
.field label{ font-size:9.5px !important; letter-spacing:1.3px !important; color:var(--adv-mut) !important; margin-bottom:7px !important; }
.field input,.field select,.field textarea{
  padding:14px 15px !important; border-radius:12px !important;
  border-color:var(--adv-line) !important; font-size:15px !important;
  background:#fff !important; transition:.2s var(--adv-ease) !important;
}
.field input::placeholder,.field textarea::placeholder{ color:#b3adbd; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#d8d0c0 !important; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--adv-deep) !important;
  box-shadow:0 0 0 4px rgba(42,13,92,.08) !important;
}
.field textarea{ min-height:110px !important; }

.pill{ padding:10px 18px !important; font-size:13.5px !important; border-color:var(--adv-line) !important; transition:.2s var(--adv-ease) !important; }
.pill.on{ background:var(--adv-deep) !important; border-color:var(--adv-deep) !important; color:#fff !important; }

/* ---------- plan cards ---------- */
.plans{ gap:18px !important; margin:6px 0 6px !important; }
.plan{
  border-radius:18px !important; padding:28px 22px 22px !important;
  border-color:var(--adv-line) !important;
  transition:.26s var(--adv-ease) !important;
}
.plan:hover{ transform:translateY(-4px) !important; box-shadow:0 26px 50px -28px rgba(42,13,92,.45) !important; }
.plan.on{
  border-color:var(--adv-deep) !important;
  box-shadow:0 30px 58px -26px rgba(42,13,92,.5) !important;
  background:linear-gradient(180deg,#fff, #fdfbff) !important;
}
.plan.on::after{ border-radius:18px !important; }
.plan .pn{
  font-size:12px !important; letter-spacing:1.6px !important; text-transform:uppercase;
  color:var(--adv-mut) !important; font-weight:700 !important;
}
.plan.on .pn{ color:var(--adv-violet) !important; }
.plan .pp{
  font-size:31px !important; letter-spacing:-1px !important;
  color:var(--adv-deep) !important; font-weight:800 !important; margin:10px 0 2px !important;
  line-height:1.05;
}
.plan .pp .per{ font-size:12px !important; letter-spacing:.2px !important; color:var(--adv-mut) !important; font-weight:500 !important; }
.plan .pnote{ font-size:13.5px !important; line-height:1.55 !important; color:var(--adv-mut) !important; margin-top:8px !important; }
.plan .sel{
  margin-top:auto !important; padding-top:18px !important;
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.3px;
  color:var(--adv-violet) !important;
}
.plan.on .sel{ color:var(--adv-ok) !important; }
.plan .pop{
  background:var(--adv-deep) !important; color:#fff !important;
  padding:5px 12px !important; border-radius:999px !important; letter-spacing:1.2px !important;
  box-shadow:0 8px 18px -8px rgba(42,13,92,.8);
}

/* ---------- capability matrix as a document ---------- */
.matrix-wrap{
  border:1px solid var(--adv-line); border-radius:16px; overflow:auto;
  background:#fff; box-shadow:0 14px 34px -26px rgba(42,13,92,.5);
  -webkit-overflow-scrolling:touch;
}
.matrix{ width:100%; border-collapse:separate !important; border-spacing:0 !important; font-size:13.5px; }
.matrix th,.matrix td{ padding:13px 16px !important; text-align:left; }
.matrix thead th{
  position:sticky; top:0; z-index:2;
  background:var(--adv-cream) !important; border-bottom:1px solid var(--adv-line) !important;
  font-size:10.5px !important; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--adv-mut) !important; font-weight:700;
}
.matrix thead th.hl{ color:var(--adv-deep) !important; background:#fff !important; }
.matrix tbody td{ border-bottom:1px solid var(--adv-line-2) !important; color:var(--adv-ink); }
.matrix tbody tr:last-child td{ border-bottom:none !important; }
.matrix tbody tr:hover td{ background:#fcfaff; }
.matrix td:first-child,.matrix th:first-child{
  position:sticky; left:0; background:#fff; z-index:1;
  font-weight:600; color:var(--adv-ink) !important; min-width:238px;
  box-shadow:1px 0 0 var(--adv-line-2);
}
.matrix thead th:first-child{ z-index:3; background:var(--adv-cream) !important; }
.matrix td.hl,.matrix th.hl{ background:rgba(86,41,154,.045) !important; }

/* ---------- payment ---------- */
.pay-lay{ gap:26px !important; }
.summary{
  border:1px solid var(--adv-line) !important; border-radius:16px !important;
  padding:22px !important; background:#fff !important;
  box-shadow:0 14px 34px -28px rgba(42,13,92,.5);
}
.summary .row,.summary div[class*="row"]{ font-size:14px; }
.note{ font-size:12.5px !important; color:var(--adv-mut) !important; margin-top:12px !important; }

/* ---------- buttons ---------- */
.btn{
  border-radius:12px !important; font-size:14.5px !important; font-weight:700 !important;
  padding:14px 24px !important; letter-spacing:.1px !important;
  transition:.22s var(--adv-ease) !important;
}
.btn-p{
  background:var(--adv-deep) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 16px 30px -16px rgba(42,13,92,.85) !important;
}
.btn-p:hover{ background:#20094a !important; transform:translateY(-2px); }
.btn-g{
  background:linear-gradient(135deg,#c9a84c,#e0c069) !important; color:#2a0d5c !important;
  border-color:transparent !important;
  box-shadow:0 16px 32px -16px rgba(201,168,76,.9) !important;
}
.btn-g:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn-o{ border-color:var(--adv-line) !important; color:var(--adv-mut) !important; background:#fff !important; }
.btn-o:hover{ border-color:var(--adv-deep) !important; color:var(--adv-deep) !important; }
.actions{ margin-top:30px !important; padding-top:24px !important; border-top:1px solid var(--adv-line-2) !important; }
.recap{ font-size:12.5px !important; color:var(--adv-mut) !important; }

/* ============================================================
   THE ENGAGEMENT RAIL
   Everything the buyer re-checks before paying a large fee, kept on
   screen instead of a scroll away.
   ============================================================ */
#fbAdvRail{ margin:22px 0 56px; display:grid; gap:14px; }
@media(max-width:1079px){ #fbAdvRail{ margin-top:0; } }

.fbr-card{
  background:#fff; border:1px solid var(--adv-line); border-radius:18px;
  padding:20px 20px 18px; box-shadow:var(--adv-shadow);
}
.fbr-k{
  font-size:10px; letter-spacing:1.9px; text-transform:uppercase;
  color:var(--adv-mut); font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; gap:9px;
}
.fbr-k::after{ content:""; flex:1; height:1px; background:var(--adv-line-2); }
.fbr-line{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px dashed var(--adv-line-2); font-size:13.5px;
}
.fbr-line:last-of-type{ border-bottom:none; }
.fbr-line .l{ color:var(--adv-mut); }
.fbr-line .r{ color:var(--adv-ink); font-weight:600; text-align:right; }
.fbr-total{
  margin-top:12px; padding-top:14px; border-top:1px solid var(--adv-line);
  display:flex; justify-content:space-between; align-items:baseline;
}
.fbr-total .l{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--adv-mut); font-weight:700; }
.fbr-total .r{ font-size:24px; font-weight:800; letter-spacing:-.7px; color:var(--adv-deep); }
.fbr-sub{ font-size:11.5px; color:var(--adv-mut); margin-top:6px; text-align:right; }
.fbr-inc{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fbr-inc li{ display:flex; gap:10px; font-size:13px; line-height:1.5; color:var(--adv-ink); }
.fbr-inc li svg{ flex:0 0 auto; margin-top:2px; color:var(--adv-ok); }
.fbr-inc li.off{ color:#b6b0c0; }
.fbr-inc li.off svg{ color:#d6d1de; }
.fbr-promise{
  background:linear-gradient(180deg,#2a0d5c,#3b1580); color:#fff;
  border-radius:18px; padding:20px; box-shadow:0 24px 50px -30px rgba(42,13,92,.9);
}
.fbr-promise .fbr-k{ color:rgba(255,255,255,.62); }
.fbr-promise .fbr-k::after{ background:rgba(255,255,255,.16); }
.fbr-promise p{ font-size:13.2px; line-height:1.62; color:rgba(255,255,255,.86); margin:0 0 14px; }
.fbr-promise a{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:#2a0d5c; background:#e9d79a; padding:10px 16px; border-radius:10px;
  transition:.2s var(--adv-ease);
}
.fbr-promise a:hover{ background:#f3e5b8; transform:translateY(-1px); }

/* ---------- confirmation ---------- */
.confirm .ok-ic{ box-shadow:0 20px 40px -20px rgba(31,109,71,.7); }
#fbAdvDash{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  background:var(--adv-deep); color:#fff; font-weight:700; font-size:14.5px;
  padding:14px 26px; border-radius:12px;
  box-shadow:0 18px 34px -18px rgba(42,13,92,.85);
  transition:.22s var(--adv-ease);
}
#fbAdvDash:hover{ background:#20094a; transform:translateY(-2px); }

@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .plan:hover,.btn:hover{ transform:none !important; }
}


/* ============================================================
   ADVISORY — BADGE, HERO, ACCOUNT GATE, COUPON   (6 Sep 2026)
   ============================================================ */

/* --- "Most chosen" was being struck through -----------------
   .plan.on::after is a full-bleed overlay with a 1.5px border,
   and it paints after every child. The badge sits half outside
   the card, so that top border ran straight across its text.
   The badge just needs to be above the overlay. ------------ */
.plan{ overflow:visible !important; }
.plan .pop{
  z-index:9 !important;
  top:-12px !important;
  font-size:9.5px !important;
  letter-spacing:1.1px !important;
  padding:6px 15px !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 10px 22px -12px rgba(42,13,92,.9) !important;
}
.plan.on::after{ z-index:1 !important; }
.plans{ padding-top:12px !important; }

/* --- the top of the page was three loose fragments ---------
   An eyebrow floating over a row of stray pills over a stepper.
   One band now: label + help on a line, verticals as a proper
   segmented control, then the rail. ------------------------- */
.wrap > header{
  padding:28px 0 0 !important;
  align-items:center !important;
}
.wrap > header .tag{
  font-size:10.5px !important; letter-spacing:2.6px !important;
  font-weight:700 !important; color:#8a6a12 !important; margin-top:0 !important;
}
.wrap > header .help{ font-size:12.5px !important; color:var(--adv-mut) !important; }
.wrap > header .help a{ color:var(--adv-deep) !important; font-weight:700 !important; }

.vpick{
  margin:15px 0 2px !important;
  display:inline-flex !important; gap:3px !important; padding:5px !important;
  background:#fff !important; border:1px solid var(--adv-line) !important;
  border-radius:999px !important;
  box-shadow:0 14px 30px -24px rgba(42,13,92,.7) !important;
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.vpick a{
  border:none !important; background:transparent !important;
  padding:9px 18px !important; border-radius:999px !important;
  font-family:inherit !important; font-size:13px !important;
  letter-spacing:0 !important; font-weight:600 !important;
  color:var(--adv-mut) !important; white-space:nowrap;
  transition:.22s var(--adv-ease) !important;
}
.vpick a:hover{ color:var(--adv-deep) !important; background:rgba(42,13,92,.055) !important; }
.vpick a.on{
  background:var(--adv-deep) !important; color:#fff !important; font-weight:700 !important;
  box-shadow:0 10px 20px -13px rgba(42,13,92,1) !important;
}

/* --- who is actually paying -------------------------------- */
.fbacc{
  display:flex; gap:15px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--adv-line); border-radius:15px;
  padding:15px 17px; background:#fff; margin:6px 0 20px;
  box-shadow:0 16px 34px -30px rgba(42,13,92,.6);
}
.fbacc .av{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--adv-deep); color:#fff; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.fbacc .m{ flex:1; min-width:190px; }
.fbacc .k{
  font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--adv-mut); font-weight:800;
}
.fbacc .v{ font-size:15px; color:var(--adv-deep); font-weight:700; margin-top:3px; }
.fbacc .s{ font-size:12.5px; color:var(--adv-mut); margin-top:3px; line-height:1.55; }
.fbacc.out{ background:#fffaf1; border-color:#f0e2c4; }
.fbacc.out .av{ background:#b8891a; }
.fbacc .go{ display:flex; gap:8px; flex-wrap:wrap; }
.fbacc .go a{
  text-decoration:none; font-weight:700; font-size:13px;
  padding:11px 17px; border-radius:11px; white-space:nowrap;
  transition:.2s var(--adv-ease);
}
.fbacc .go a.p{ background:var(--adv-deep); color:#fff; }
.fbacc .go a.p:hover{ background:#1e0947; }
.fbacc .go a.o{ border:1px solid var(--adv-line); color:var(--adv-deep); background:#fff; }
.fbacc .go a.o:hover{ border-color:var(--adv-deep); }

.fbwarn{
  border:1px solid #f0d9a8; background:#fffaf0; border-radius:13px;
  padding:13px 15px; font-size:13px; color:#7a5600; line-height:1.6; margin:0 0 20px;
}
.fbwarn b{ color:#4d3600; }

/* --- coupon ------------------------------------------------ */
.fbcp .row{ display:flex; gap:8px; flex-wrap:wrap; }
.fbcp input{
  flex:1; min-width:150px; padding:12px 14px; font-family:inherit;
  border:1px solid var(--adv-line); border-radius:11px;
  font-size:14px; letter-spacing:1.4px; text-transform:uppercase; background:#fff;
}
.fbcp input::placeholder{ letter-spacing:.2px; text-transform:none; color:#b3adbd; }
.fbcp input:focus{ outline:none; border-color:var(--adv-deep); box-shadow:0 0 0 4px rgba(42,13,92,.08); }
.fbcp button{
  padding:12px 20px; border-radius:11px; border:1px solid var(--adv-deep);
  background:#fff; color:var(--adv-deep); font-family:inherit;
  font-weight:700; font-size:13.5px; cursor:pointer; transition:.2s var(--adv-ease);
}
.fbcp button:hover{ background:var(--adv-deep); color:#fff; }
.fbcp .msg{ font-size:12.5px; margin-top:9px; min-height:15px; font-weight:600; }
.fbcp .locked{
  font-size:12.5px; color:var(--adv-mut); line-height:1.65;
  border:1px dashed var(--adv-line); border-radius:12px; padding:12px 14px; background:#fbfaff;
}
.fbcp .locked a{ color:var(--adv-deep); font-weight:700; }

#payBtn:disabled{ opacity:.45 !important; cursor:not-allowed !important; box-shadow:none !important; }

/* "✓ Selected" was green on a deep-violet fill — unreadable. */
.plan.on .sel{ color:#fff !important; }
.plan .sel{ text-align:center !important; }

/* ============================================================
   INLINE ACCOUNT STEP  (6 Sep 2026)
   Creating the account happens inside the checkout now, so it has
   to look like the checkout — not like a form bolted onto it.
   ============================================================ */
.fbacc.out{
  display:block !important;
  background:#fff !important;
  border-color:var(--adv-line) !important;
  padding:0 !important;
  overflow:hidden;
}
.fbauth{ padding:22px 24px 24px; }
.fbauth-h{
  display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:20px;
}
.fbauth-h .k{
  font-size:19px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  text-transform:none !important; color:var(--adv-deep) !important; line-height:1.2;
}
.fbauth-h .s{
  font-size:12.5px; color:var(--adv-mut); line-height:1.6;
  margin-top:6px; max-width:46ch;
}
.fbauth-tabs{
  display:inline-flex; gap:3px; padding:4px; flex-shrink:0;
  background:#f6f3fb; border:1px solid var(--adv-line); border-radius:999px;
}
.fbauth-tabs button{
  border:none; background:transparent; cursor:pointer; font-family:inherit;
  padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--adv-mut); transition:.2s var(--adv-ease); white-space:nowrap;
}
.fbauth-tabs button:hover{ color:var(--adv-deep); }
.fbauth-tabs button.on{
  background:#fff; color:var(--adv-deep);
  box-shadow:0 2px 8px -4px rgba(42,13,92,.5);
}

.fbauth-g{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px; border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:700; color:var(--adv-ink);
  background:#fff; border:1px solid var(--adv-line);
  transition:.2s var(--adv-ease);
}
.fbauth-g:hover{ border-color:#c9bfe0; box-shadow:0 10px 22px -14px rgba(42,13,92,.6); }

.fbauth-or{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 16px; color:var(--adv-mut);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.fbauth-or::before,.fbauth-or::after{ content:""; flex:1; height:1px; background:var(--adv-line-2); }

.fbauth-f{ margin-bottom:14px; }
.fbauth-f label{
  display:block; font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase;
  font-weight:700; color:var(--adv-mut); margin-bottom:7px;
}
.fbauth-f input{
  width:100%; padding:14px 15px; font-family:inherit; font-size:15px;
  border:1px solid var(--adv-line); border-radius:12px; background:#fff;
  color:var(--adv-ink); transition:.2s var(--adv-ease);
}
.fbauth-f input::placeholder{ color:#b3adbd; }
.fbauth-f input:focus{
  outline:none; border-color:var(--adv-deep);
  box-shadow:0 0 0 4px rgba(42,13,92,.08);
}

.fbauth-msg{ font-size:12.5px; font-weight:600; min-height:16px; margin:2px 0 10px; line-height:1.5; }

.fbauth-cta{
  width:100%; padding:14px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700;
  background:var(--adv-deep); color:#fff;
  box-shadow:0 16px 30px -16px rgba(42,13,92,.9);
  transition:.2s var(--adv-ease);
}
.fbauth-cta:hover:not(:disabled){ background:#1e0947; transform:translateY(-1px); }
.fbauth-cta:disabled{ opacity:.55; cursor:default; transform:none; }

.fbauth-note{
  font-size:12px; color:var(--adv-mut); line-height:1.6; margin-top:12px; text-align:center;
}
.fbauth-note a{ color:var(--adv-deep); font-weight:700; }

@media(max-width:620px){
  .fbauth{ padding:18px 16px 20px; }
  .fbauth-h{ flex-direction:column; gap:14px; }
  .fbauth-tabs{ width:100%; }
  .fbauth-tabs button{ flex:1; }
}