/* HJ Academy — "Buy now" pop-up (course pages). Logo colours: jade + black on white. */
.bn{ --bn-jade:#3EB489; --bn-accent:#18815E; --bn-ink:#0E1512; --bn-line:#DCE7E2; --bn-mint:#F1FAF6; --bn-muted:#56615B;
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; font-family:inherit; }
.bn[hidden]{ display:none; }
.bn *{ box-sizing:border-box; }
.bn-scrim{ position:absolute; inset:0; background:rgba(14,21,18,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s; }
.bn-box{ position:relative; width:min(460px, 100%); max-height:calc(100vh - 40px); overflow:auto; padding:26px 24px 20px; border-radius:24px; background:#fff; color:var(--bn-ink);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5); opacity:0; transform:translateY(18px) scale(.98); transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.bn.is-open .bn-scrim{ opacity:1; } .bn.is-open .bn-box{ opacity:1; transform:none; }
.bn-x{ position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%; border:0; background:var(--bn-mint); font-size:1.4rem; line-height:1; cursor:pointer; color:var(--bn-ink); }
.bn-steps{ display:flex; gap:6px; margin:0 0 16px; padding:0; list-style:none; font-size:.72rem; font-weight:700; color:var(--bn-muted); }
.bn-steps li{ display:flex; align-items:center; gap:5px; }
.bn-steps li + li::before{ content:""; width:16px; height:2px; background:var(--bn-line); border-radius:2px; }
.bn-steps b{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--bn-line); color:#fff; font-size:.68rem; }
.bn-steps .is-now{ color:var(--bn-ink); } .bn-steps .is-now b{ background:var(--bn-accent); box-shadow:0 0 0 4px #E3F4EC; }
.bn-kicker{ margin:0; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bn-accent); }
.bn-title{ margin:4px 0 6px; font-size:1.3rem; line-height:1.25; letter-spacing:-.01em; }
.bn-price{ margin:0 0 16px; } .bn-price b{ font-size:1.6rem; letter-spacing:-.02em; } .bn-price s{ margin-left:6px; color:var(--bn-muted); }
.bn-hp{ position:absolute; left:-9999px; }
.bn-field{ display:block; margin-bottom:11px; }
.bn-field > span{ display:block; margin-bottom:5px; font-size:.8rem; font-weight:700; }
.bn-field em{ font-style:normal; font-weight:500; color:var(--bn-muted); }
.bn-field input{ width:100%; height:48px; padding:0 14px; border:1.5px solid var(--bn-line); border-radius:12px; font:inherit; font-size:1rem; background:#fff; color:var(--bn-ink); }
.bn-field input:focus{ outline:none; border-color:var(--bn-accent); box-shadow:0 0 0 4px rgba(62,180,137,.18); }
.bn-phone{ display:flex; } .bn-phone b{ display:grid; place-items:center; padding:0 12px; border:1.5px solid var(--bn-line); border-right:0; border-radius:12px 0 0 12px; background:var(--bn-mint); }
.bn-phone input{ border-radius:0 12px 12px 0; }
.bn-field small, .bn-err{ display:block; margin-top:3px; font-size:.78rem; font-weight:600; color:#AD3B34; }
.bn-field.has-err input{ border-color:#E39B94; background:#FFF8F7; }
.bn-consent{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 4px; font-size:.76rem; line-height:1.5; color:var(--bn-muted); }
.bn-consent input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--bn-accent); }
.bn .bn-go{ margin-top:10px; background:linear-gradient(135deg, #22A374, var(--bn-accent)) !important; border-color:transparent !important; color:#fff !important; min-height:50px; font-weight:700; }
.bn .bn-go[disabled]{ opacity:.75; cursor:progress; }
.bn-fine{ margin:10px 0 0; font-size:.76rem; color:var(--bn-muted); text-align:center; line-height:1.5; }
.bn-fine a, .bn-consent a{ color:var(--bn-accent); }
.bn-msg{ min-height:0; margin:8px 0 0; font-size:.85rem; font-weight:600; color:#8A5D12; text-align:center; }
.bn-msg:empty{ display:none; }
@media (max-width:560px){
  .bn{ padding:0; align-items:flex-end; }
  .bn-box{ width:100%; border-radius:22px 22px 0 0; max-height:94vh; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){ .bn-box, .bn-scrim{ transition:none; } }
.bn .bn-field > .bn-phone{ display:flex; margin:0; font-weight:400; }
.bn .bn-phone input{ flex:1; min-width:0; }