.bkx { --blue:#0f5bff; --blue-dark:#0a46cc; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --green:#10b981; --red:#ef4444; --amber:#f59e0b; }
  .bkx * { box-sizing:border-box; }
  .bkx { max-width:760px; margin:0 auto; padding:40px 20px 88px; font-family:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--ink); }
  .bkx .head { text-align:center; margin-bottom:26px; }
  .bkx .head img { height:38px; width:auto; margin:0 auto 18px; display:block; }
  .bkx .head h1 { font-size:2rem; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
  .bkx .head p { color:var(--blue); font-size:15px; font-weight:600; margin:0; }
  @media(max-width:560px){ .bkx .head h1{ font-size:1.5rem; } }

  .bkx .steps { display:flex; align-items:center; justify-content:center; margin:0 auto 26px; max-width:420px; }
  .bkx .stp { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .bkx .stp .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; background:#fff; border:2px solid var(--line); color:var(--muted); transition:all .2s; }
  .bkx .stp .lbl { font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
  .bkx .stp.active .dot { background:var(--blue); border-color:var(--blue); color:#fff; }
  .bkx .stp.active .lbl { color:var(--ink); }
  .bkx .stp.done .dot { background:var(--green); border-color:var(--green); color:#fff; }
  .bkx .stp-line { flex:1 1 auto; height:2px; background:var(--line); margin:0 12px; min-width:24px; }
  @media(max-width:560px){ .bkx .stp .lbl{ display:none; } }

  .bkx .card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:0 20px 60px rgba(31,72,140,.08); }
  .bkx .step { display:none; }
  .bkx .step.on { display:block; animation:bkfade .25s ease; }
  @keyframes bkfade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  .bkx .fld { margin-bottom:20px; }
  .bkx label { display:block; font-size:14px; font-weight:700; margin-bottom:8px; }
  .bkx label .rq { color:var(--red); }
  .bkx label .hint { font-weight:500; color:var(--muted); font-size:12.5px; margin-left:6px; }
  .bkx input, .bkx select, .bkx textarea {
    width:100%; padding:13px 15px; font-size:15px; font-family:inherit; color:var(--ink);
    border:1.5px solid #d5deee; border-radius:12px; background:#fff; -webkit-appearance:none; appearance:none;
  }
  .bkx textarea { min-height:82px; resize:vertical; }
  .bkx select { background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; }
  .bkx input:focus, .bkx select:focus, .bkx textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,91,255,.13); }
  .bkx .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .bkx .phone { display:flex; gap:10px; }
  .bkx .phone select { flex:0 0 175px; }
  @media(max-width:560px){ .bkx .row{ grid-template-columns:1fr; } .bkx .phone{ flex-direction:column; } .bkx .phone select{ flex:1; } }
  .bkx .err { display:none; font-size:12.5px; color:var(--red); font-weight:600; margin-top:6px; }
  .bkx .fld.bad .err { display:block; }
  .bkx .fld.bad input, .bkx .fld.bad select, .bkx .fld.bad textarea { border-color:var(--red); }
  .bkx .fld.bad .opt-grid { outline:1.5px solid var(--red); outline-offset:4px; border-radius:12px; }

  .bkx .opt-grid { display:grid; gap:10px; }
  .bkx .g2 { grid-template-columns:repeat(2,1fr); }
  .bkx .g3 { grid-template-columns:repeat(3,1fr); }
  .bkx .g5 { grid-template-columns:repeat(5,1fr); }
  @media(max-width:560px){ .bkx .g2, .bkx .g3{ grid-template-columns:1fr; } .bkx .g5{ grid-template-columns:repeat(2,1fr); } }
  .bkx .opt {
    display:flex; align-items:center; gap:10px; cursor:pointer; padding:14px 16px;
    border:1.5px solid var(--line); border-radius:12px; background:#f9fafb;
    font-size:14px; font-weight:600; color:var(--ink); transition:all .15s; line-height:1.35; user-select:none;
  }
  .bkx .opt .em { font-size:19px; flex:0 0 auto; line-height:1; }
  .bkx .opt .tx { flex:1 1 auto; }
  .bkx .opt .rd { flex:0 0 18px; width:18px; height:18px; border-radius:50%; border:2px solid #cbd5e1; transition:all .15s; }
  .bkx .opt:hover { border-color:var(--blue); background:#fff; }
  .bkx .opt.sel { background:var(--blue); border-color:var(--blue); color:#fff; }
  .bkx .opt.sel .rd { border-color:#fff; background:radial-gradient(circle at center, #fff 34%, transparent 38%); }
  .bkx .opt.center { justify-content:center; text-align:center; }

  .bkx .sub-wrap { margin-top:22px; padding-top:22px; border-top:1px dashed var(--line); }

  /* small-client deflection card */
  .bkx .deflect { margin-top:18px; background:#fffbeb; border:1.5px solid #fde68a; border-radius:14px; padding:20px; display:none; }
  .bkx .deflect.on { display:block; animation:bkfade .25s ease; }
  .bkx .deflect h4 { margin:0 0 6px; font-size:15.5px; font-weight:800; color:#92400e; }
  .bkx .deflect p { margin:0 0 14px; font-size:14px; color:#78500f; line-height:1.55; }
  .bkx .deflect .yt { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:#ff0000; color:#fff; border-radius:100px; font-size:14px; font-weight:800; text-decoration:none; }
  .bkx .deflect .yt:hover { background:#d90000; }

  .bkx .enq-wrap { margin-top:16px; display:none; }
  .bkx .enq-wrap.on { display:block; animation:bkfade .25s ease; }

  .bkx .nav-btns { display:flex; gap:12px; margin-top:26px; }
  .bkx .btn { flex:1; min-height:52px; border:none; border-radius:14px; font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; transition:all .16s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .bkx .btn-primary { background:var(--blue); color:#fff; box-shadow:0 14px 30px rgba(15,91,255,.26); }
  .bkx .btn-primary:hover { background:var(--blue-dark); }
  .bkx .btn-primary:disabled { opacity:.6; cursor:wait; }
  .bkx .btn-ghost { flex:0 0 auto; padding:0 28px; background:#fff; color:var(--ink); border:1.5px solid #d5deee; }
  .bkx .btn-ghost:hover { border-color:var(--blue); color:var(--blue); }

  .bkx .submit-err { display:none; margin:0 0 14px; padding:12px 14px; border:1.5px solid var(--red); border-radius:10px; background:#fef2f2; font-size:13.5px; font-weight:600; color:var(--red); }
  .bkx .submit-err a { color:var(--red); text-decoration:underline; }
  .bkx .assure { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:18px; font-size:12.5px; color:var(--muted); }
  .bkx .assure span::before { content:"\2713\00a0"; color:var(--green); font-weight:800; }

  /* calendar */
  .bkx .cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .bkx .cal-head .m { font-size:15px; font-weight:800; }
  .bkx .cal-head .tz { font-size:12px; color:var(--muted); font-weight:600; }
  .bkx .cal-nav { display:flex; gap:6px; }
  .bkx .cal-nav button { width:32px; height:32px; border-radius:9px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:15px; font-weight:800; cursor:pointer; display:grid; place-items:center; }
  .bkx .cal-nav button:hover:not(:disabled){ border-color:var(--blue); color:var(--blue); }
  .bkx .cal-nav button:disabled { opacity:.35; cursor:not-allowed; }
  .bkx .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .bkx .cal-dow { text-align:center; font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; padding:4px 0; }
  .bkx .cal-day { aspect-ratio:1; display:grid; place-items:center; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; border:1.5px solid transparent; background:#f9fafb; color:var(--ink); transition:all .12s; }
  .bkx .cal-day.empty { background:transparent; cursor:default; }
  .bkx .cal-day.off { color:#cbd5e1; background:transparent; cursor:not-allowed; }
  .bkx .cal-day:not(.off):not(.empty):hover { border-color:var(--blue); background:#fff; }
  .bkx .cal-day.sel { background:var(--blue); color:#fff; border-color:var(--blue); }
  .bkx .cal-day .pip { width:4px; height:4px; border-radius:50%; background:var(--blue); margin-top:2px; }
  .bkx .cal-day.sel .pip { background:#fff; }
  .bkx .slots-wrap { margin-top:20px; }
  .bkx .slots-title { font-size:13px; font-weight:800; margin-bottom:12px; }
  .bkx .slots { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  @media(max-width:560px){ .bkx .slots{ grid-template-columns:repeat(2,1fr); } }
  .bkx .slot { padding:11px 8px; text-align:center; border:1.5px solid var(--line); border-radius:10px; background:#f9fafb; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .12s; }
  .bkx .slot:hover { border-color:var(--blue); background:#fff; }
  .bkx .slot.sel { background:var(--blue); color:#fff; border-color:var(--blue); }
  .bkx .slots-empty { color:var(--muted); font-size:13.5px; padding:8px 0; }

  .bkx .done { display:none; text-align:center; padding:14px 0; }
  .bkx.finished .card, .bkx.finished .steps { display:none; }
  .bkx.finished .done { display:block; }
  .bkx .done .big { font-size:56px; margin-bottom:12px; }
  .bkx .done h2 { font-size:1.8rem; font-weight:800; margin:0 0 10px; }
  .bkx .done p { color:var(--muted); font-size:15px; max-width:460px; margin:0 auto 22px; }
  .bkx .done .cta-col { display:flex; flex-direction:column; gap:12px; max-width:360px; margin:0 auto; }
  .bkx .done .sched { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; background:var(--blue); color:#fff; border-radius:14px; font-size:15px; font-weight:800; text-decoration:none; }
  .bkx .done .sched:hover { background:var(--blue-dark); }
  .bkx .done .wa { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; background:#25D366; color:#fff; border-radius:14px; font-size:15px; font-weight:800; text-decoration:none; }
  .bkx .done .wa:hover { background:#1fb958; }

/* ---- additions for /training and /feature-request ---- */
.bkx .head .kicker { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:100px; background:#eef3ff; color:var(--blue); font-size:12.5px; font-weight:800; letter-spacing:.02em; margin-bottom:14px; }
.bkx .head .sub2 { color:var(--muted); font-weight:500; font-size:14.5px; max-width:520px; margin:8px auto 0; line-height:1.55; }
.bkx .perks { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px; }
@media(max-width:560px){ .bkx .perks{ grid-template-columns:1fr; gap:6px; } .bkx .perk{ display:flex; align-items:center; gap:10px; padding:10px 14px; } .bkx .perk .ic{ margin:0; } .bkx .perk span:not(.ic){ display:none; } .bkx .perk b{ margin:0; } }
.bkx .perk { background:#f7f9ff; border:1px solid #e3eafc; border-radius:14px; padding:14px 16px; }
.bkx .perk b { display:block; font-size:13.5px; margin-bottom:3px; }
.bkx .perk span { font-size:12.5px; color:var(--muted); line-height:1.45; }
.bkx .perk .ic { font-size:18px; display:block; margin-bottom:6px; }

.bkx .opt.tall { flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px 14px; position:relative; }
.bkx .opt.tall .em { font-size:22px; }
.bkx .opt.tall .ds { font-size:12.5px; font-weight:500; color:var(--muted); }
.bkx .opt.tall.sel .ds { color:rgba(255,255,255,.85); }
.bkx .opt.tall .rd { position:absolute; top:14px; right:14px; }

.bkx .note { display:flex; gap:12px; align-items:flex-start; background:#fffbeb; border:1.5px solid #fde68a; border-radius:14px; padding:14px 16px; font-size:13.5px; color:#78500f; line-height:1.5; margin-bottom:18px; }
.bkx .note .ic { font-size:18px; line-height:1.2; }
.bkx .note b { color:#92400e; }
.bkx .check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; font-weight:600; cursor:pointer; line-height:1.45; }
.bkx .check input { width:18px; height:18px; flex:0 0 18px; margin-top:1px; padding:0; border-radius:5px; -webkit-appearance:checkbox; appearance:auto; accent-color:var(--blue); }
.bkx .fld.bad .check { color:var(--red); }

.bkx .summary { border:1.5px solid var(--line); border-radius:14px; padding:4px 16px; margin-bottom:18px; background:#fbfcff; }
.bkx .summary div { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.bkx .summary div:last-child { border-bottom:none; }
.bkx .summary span { color:var(--muted); }
.bkx .summary b { text-align:right; }

.bkx .drop { border:2px dashed #cdd8f0; border-radius:14px; padding:22px 16px; text-align:center; background:#f9fbff; cursor:pointer; transition:all .15s; }
.bkx .drop:hover, .bkx .drop.over { border-color:var(--blue); background:#eef3ff; }
.bkx .drop .ic { font-size:24px; }
.bkx .drop p { margin:6px 0 0; font-size:13.5px; font-weight:700; }
.bkx .drop small { color:var(--muted); font-size:12px; }
.bkx .files { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.bkx .files li { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:#fff; }
.bkx .files li img { width:34px; height:34px; object-fit:cover; border-radius:6px; }
.bkx .files li .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.bkx .files li .sz { color:var(--muted); font-size:12px; }
.bkx .files li button { border:none; background:none; color:var(--muted); font-size:18px; cursor:pointer; padding:0 4px; }
.bkx .files li button:hover { color:var(--red); }
.bkx .counter { float:right; font-weight:500; color:var(--muted); font-size:12px; }
.bkx .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.bkx .done .ref { display:inline-block; margin:0 0 18px; padding:8px 16px; border-radius:10px; background:#eef3ff; color:var(--blue); font-weight:800; letter-spacing:.04em; }
.bkx .done .next { text-align:left; max-width:440px; margin:0 auto 24px; display:grid; gap:10px; }
.bkx .done .next div { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink); }
.bkx .done .next div span:first-child { flex:0 0 26px; height:26px; border-radius:50%; background:#eef3ff; color:var(--blue); font-weight:800; font-size:13px; display:grid; place-items:center; }
.bkx.finished .perks { display:none; }