/* ================= BOOK A FREE DEMO CLASS =================
   A floating modal that opens from the "Book a demo class" button in the nav.
   Two panels on a wide screen: a midnight-navy scene on the left, an ivory
   form on the right. On a phone it becomes a full-height sheet with a short
   visual header, so the keyboard never fights the fields.

   The palette is the site's own — navy ground, electric blue, gold — with the
   form surface lifted to ivory so it stays the most readable thing on screen.
   ========================================================== */
.bk{
  --bk-navy:#080c17;
  --bk-navy-2:#0d1426;
  --bk-blue:#4fd8ff;
  --bk-blue-deep:#2f7dff;
  --bk-gold:#c9a66b;
  --bk-ivory:#f8f5ee;
  --bk-ivory-2:#efeade;
  --bk-ink:#131a28;
  --bk-ink-soft:#5b6579;
  --bk-line:#ddd6c6;
  --bk-rose:#b4384f;
  --bk-green:#1f7a5a;
  --bk-ease:cubic-bezier(0.22, 1, 0.36, 1);

  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(0.75rem, 3vw, 2rem);
  font-family:'Space Grotesk', system-ui, sans-serif;
}
.bk[hidden]{ display:none; }

.bk-scrim{
  position:absolute; inset:0;
  background:rgba(5,8,14,0.74);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  opacity:0; transition:opacity .25s ease;
}
.bk.is-open .bk-scrim{ opacity:1; }

/* ---- the card ---- */
.bk-card{
  position:relative; z-index:1;
  width:min(940px, 100%); max-height:min(92vh, 780px);
  display:grid; grid-template-columns:minmax(0,0.68fr) minmax(0,1fr);
  grid-template-rows:minmax(0, 1fr);
  border-radius:20px; overflow:hidden;
  background:var(--bk-ivory);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.08);
  opacity:0; transform:translateY(14px) scale(0.99);
  transition:opacity .25s ease, transform .25s var(--bk-ease);
}
.bk.is-open .bk-card{ opacity:1; transform:none; }

/* the illuminated edge, drawn on top and never in the way */
.bk-card::after{
  content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:6;
  padding:1px;
  background:linear-gradient(140deg,
    rgba(79,216,255,0.75), rgba(201,166,107,0.4) 38%,
    rgba(255,255,255,0.08) 62%, rgba(79,216,255,0.5));
  background-size:220% 220%;
  animation:bkEdge 16s ease-in-out infinite alternate;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

@keyframes bkFloatCrest{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
@keyframes bkEdge{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

/* ================= THE SCENE ================= */
.bk-scene{
  position:relative; overflow:hidden; isolation:isolate; min-height:0;
  padding:2.2rem 1.9rem;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 80% 55% at 50% 8%, rgba(79,216,255,0.16), transparent 62%),
    radial-gradient(ellipse 70% 50% at 20% 100%, rgba(201,166,107,0.13), transparent 68%),
    linear-gradient(170deg, var(--bk-navy-2), var(--bk-navy));
  color:#eaf0fa;
}
/* very slow drift, so the panel is never quite static */
.bk-scene::before{
  content:''; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(79,216,255,0.10), transparent 45%);
  animation:bkDrift 18s ease-in-out infinite alternate;
}
@keyframes bkDrift{ from{ transform:translate3d(-3%, -2%, 0); } to{ transform:translate3d(4%, 3%, 0); } }

.bk-scene > *{ position:relative; z-index:2; }

.bk-eyebrow{
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--bk-gold); display:flex; align-items:center; gap:0.6rem; margin:0;
}
.bk-eyebrow::before{ content:''; width:18px; height:1px; background:currentColor; opacity:0.8; flex:none; }

.bk-scene h2{
  font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:clamp(1.55rem, 2.5vw, 2.05rem); line-height:1.16; letter-spacing:-0.02em;
  margin:0.85rem 0 0; color:#fbfdff;
}
.bk-lede{
  margin:0.8rem 0 0; font-size:0.86rem; line-height:1.65; color:#a9b7cf; max-width:34ch;
}

.bk-points{ list-style:none; margin:1.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.bk-points li{
  display:flex; align-items:center; gap:0.65rem;
  font-size:0.8rem; color:#cfd9ea;
}
.bk-points svg{ width:15px; height:15px; flex:none; stroke:var(--bk-blue); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---- the board and the knight ---- */
.bk-stage{
  position:relative; margin-top:auto; padding-top:1.6rem;
  height:190px; flex:none;
  perspective:760px;
}
.bk-board{
  position:absolute; left:50%; bottom:-6px; width:230px; height:230px;
  transform:translateX(-50%) rotateX(66deg) rotateZ(38deg);
  transform-style:preserve-3d;
  background-image:
    linear-gradient(rgba(79,216,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,216,255,0.16) 1px, transparent 1px);
  background-size:28.75px 28.75px;
  border:1px solid rgba(79,216,255,0.22);
  border-radius:3px;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 42%, transparent 78%);
          mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 42%, transparent 78%);
}
/* the path a knight travels, drawn once on open */
.bk-path{
  position:absolute; left:50%; bottom:6px; width:214px; height:150px;
  transform:translateX(-50%); overflow:visible;
}
.bk-path path{
  fill:none; stroke:var(--bk-blue); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:240; stroke-dashoffset:240;
  opacity:0.75; filter:drop-shadow(0 0 5px rgba(79,216,255,0.55));
}
.bk.is-open .bk-path path{ animation:bkDraw 2.4s var(--bk-ease) .45s forwards; }
@keyframes bkDraw{ to{ stroke-dashoffset:0; } }
.bk-path circle{ fill:var(--bk-gold); opacity:0; }
.bk.is-open .bk-path circle{ animation:bkDot .5s ease 2.5s forwards; }
@keyframes bkDot{ to{ opacity:0.9; } }

.bk-knight{
  position:absolute; left:50%; bottom:44px; width:74px;
  transform:translateX(-50%);
  animation:bkFloat 6s ease-in-out infinite;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(79,216,255,0.28));
}
@keyframes bkFloat{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(-9px); }
}
/* two pieces well out of focus, for depth only */
.bk-blur{
  position:absolute; bottom:30px; width:38px; opacity:0.32;
  filter:blur(3.5px); color:#8fb6d8;
}
.bk-blur.one{ left:12%; transform:scale(0.9); animation:bkFloat 7.5s ease-in-out infinite .8s; }
.bk-blur.two{ right:10%; transform:scale(0.78); animation:bkFloat 8.5s ease-in-out infinite 1.6s; }

/* ================= THE FORM ================= */
.bk-form-col{
  position:relative; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  background:var(--bk-ivory);
  color:var(--bk-ink);
}
.bk-close{
  position:absolute; top:0.85rem; right:0.9rem; z-index:8;
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--bk-line); border-radius:50%;
  background:rgba(255,255,255,0.7); color:var(--bk-ink-soft); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.bk-close:hover{ color:var(--bk-ink); border-color:var(--bk-ink-soft); background:#fff; }
.bk-close svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }

/* ---- progress ---- */
.bk-steps{
  display:flex; align-items:center; gap:0.7rem;
  padding:1.5rem 3.6rem 0 2rem;        /* right side clears the close button */
  flex:none;
}
.bk-step{ display:flex; align-items:center; gap:0.5rem; font-size:0.74rem; color:var(--bk-ink-soft); }
.bk-step .n{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--bk-line); font-size:0.7rem; background:#fff;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.bk-step.on{ color:var(--bk-ink); font-weight:500; }
.bk-step.on .n{ background:var(--bk-ink); border-color:var(--bk-ink); color:var(--bk-ivory); }
.bk-step.done .n{ background:var(--bk-green); border-color:var(--bk-green); color:#fff; }
.bk-rail{ flex:1; height:2px; border-radius:2px; background:var(--bk-line); overflow:hidden; }
.bk-rail i{
  display:block; height:100%; width:50%; border-radius:2px;
  background:linear-gradient(90deg, var(--bk-blue-deep), var(--bk-blue));
  transition:width .4s var(--bk-ease);
}

.bk-body{ padding:1.3rem 2rem 1.6rem; overflow-y:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch; }
.bk-pane{ display:none; }
.bk-pane.on{ display:block; animation:bkPane .32s var(--bk-ease); }
@keyframes bkPane{ from{ opacity:0; transform:translateX(9px); } to{ opacity:1; transform:none; } }
.bk-pane.back.on{ animation-name:bkPaneBack; }
@keyframes bkPaneBack{ from{ opacity:0; transform:translateX(-9px); } to{ opacity:1; transform:none; } }

.bk-body h3{
  font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:1.18rem; line-height:1.3; letter-spacing:-0.015em; margin:0 0 1.2rem;
  color:var(--bk-ink);
}

/* ---- fields ---- */
.bk-field{ margin-bottom:1.05rem; }
/* The two labels that are whole controls in their own right - the experience
   cards and the consent row - are excluded, or this rule (0,1,1) outranks
   their own (0,1,0) and flattens them back to blocks. */
.bk-field label:not(.bk-card-opt):not(.bk-consent), .bk-legend{
  display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.05em;
  color:var(--bk-ink); margin-bottom:0.42rem;
}
.bk-field label .opt, .bk-legend .opt{ font-weight:400; color:var(--bk-ink-soft); letter-spacing:0; }
.bk-field input, .bk-field select, .bk-field textarea{
  width:100%; padding:0.72rem 0.9rem; border-radius:9px;
  border:1px solid var(--bk-line); background:#fff; color:var(--bk-ink);
  font-family:inherit; font-size:0.92rem; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.bk-field textarea{ min-height:78px; resize:vertical; line-height:1.6; }
/* the stepper arrows crowd a 104px box and are no use on a touch keypad */
.bk-field input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.bk-field input[type=number]::-webkit-outer-spin-button,
.bk-field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus{
  border-color:var(--bk-blue-deep);
  box-shadow:0 0 0 3px rgba(47,125,255,0.18);
}
.bk-field input::placeholder, .bk-field textarea::placeholder{ color:#9aa3b2; }
.bk-field .help{ font-size:0.72rem; color:var(--bk-ink-soft); margin-top:0.35rem; line-height:1.5; }
.bk-row{ display:grid; grid-template-columns:1fr 104px; gap:0.8rem; }
.bk-row.phone{ grid-template-columns:132px 1fr; }

.bk-err{
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.74rem; color:var(--bk-rose); margin-top:0.38rem; min-height:0;
}
.bk-err:empty{ display:none; }
.bk-err::before{ content:'!'; width:14px; height:14px; flex:none; border-radius:50%;
  background:var(--bk-rose); color:#fff; font-size:0.62rem; font-weight:700;
  display:grid; place-items:center; }
.bk-field.bad input, .bk-field.bad select, .bk-field.bad textarea{ border-color:var(--bk-rose); }
.bk-field.bad input:focus, .bk-field.bad select:focus{ box-shadow:0 0 0 3px rgba(180,56,79,0.16); }

/* ---- experience cards ---- */
fieldset.bk-field{ border:none; padding:0; margin-bottom:1.05rem; }
.bk-cards{ display:grid; gap:0.55rem; }
.bk-card-opt{
  position:relative; display:flex; align-items:center; gap:0.8rem;
  padding:0.8rem 0.95rem; border-radius:10px; cursor:pointer;
  border:1px solid var(--bk-line); background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--bk-ease);
}
.bk-card-opt:hover{ border-color:#b9c3d4; transform:translateY(-1px); }
.bk-card-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.bk-card-opt .ic{
  width:34px; height:34px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:var(--bk-ivory-2); color:var(--bk-ink-soft);
  transition:background .2s ease, color .2s ease;
}
.bk-card-opt .ic svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bk-card-opt .tx{ min-width:0; display:flex; flex-direction:column; gap:0.1rem; }
.bk-card-opt .tt{ display:block; font-size:0.88rem; font-weight:500; line-height:1.3; }
.bk-card-opt .td{ display:block; font-size:0.73rem; color:var(--bk-ink-soft); line-height:1.4; }
.bk-card-opt .tick{
  margin-left:auto; width:20px; height:20px; flex:none; border-radius:50%;
  display:grid; place-items:center; background:var(--bk-blue-deep); color:#fff;
  opacity:0; transform:scale(0.6); transition:opacity .2s ease, transform .25s var(--bk-ease);
}
.bk-card-opt .tick svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.bk-card-opt:has(input:checked){
  border-color:var(--bk-blue-deep);
  box-shadow:0 0 0 2px rgba(47,125,255,0.18);
}
.bk-card-opt:has(input:checked) .ic{ background:rgba(47,125,255,0.12); color:var(--bk-blue-deep); }
.bk-card-opt:has(input:checked) .tick{ opacity:1; transform:none; }
.bk-card-opt:has(input:focus-visible){ outline:2px solid var(--bk-blue-deep); outline-offset:2px; }
/* a fallback for engines without :has() */
.bk-card-opt.is-on{ border-color:var(--bk-blue-deep); box-shadow:0 0 0 2px rgba(47,125,255,0.18); }
.bk-card-opt.is-on .ic{ background:rgba(47,125,255,0.12); color:var(--bk-blue-deep); }
.bk-card-opt.is-on .tick{ opacity:1; transform:none; }

/* ---- consent ---- */
.bk-consent{
  display:flex; align-items:flex-start; gap:0.7rem; cursor:pointer;
  padding:0.85rem 0.95rem; border-radius:10px;
  background:var(--bk-ivory-2); border:1px solid transparent;
  font-size:0.8rem; line-height:1.55; color:var(--bk-ink);
  transition:border-color .2s ease;
}
.bk-consent input{
  appearance:none; width:18px; height:18px; flex:none; margin-top:0.08rem;
  border:1px solid #b6ae9b; border-radius:4px; background:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease, border-color .2s ease;
}
.bk-consent input:checked{ background:var(--bk-blue-deep); border-color:var(--bk-blue-deep); }
.bk-consent input:checked::after{
  content:''; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(0.5px,-1px);
}
.bk-consent input:focus-visible{ outline:2px solid var(--bk-blue-deep); outline-offset:2px; }
.bk-field.bad .bk-consent{ border-color:var(--bk-rose); }

/* ---- footer ---- */
.bk-foot{
  flex:none; padding:1.1rem 2rem 1.5rem; border-top:1px solid var(--bk-line);
  background:linear-gradient(180deg, rgba(255,255,255,0.5), var(--bk-ivory));
}
.bk-actions{ display:flex; align-items:center; gap:0.7rem; }
.bk-go{
  flex:1; padding:0.88rem 1.3rem; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg, var(--bk-blue-deep), #1a63e0);
  color:#fff; font-family:inherit; font-size:0.92rem; font-weight:600; letter-spacing:0.01em;
  box-shadow:0 10px 22px -10px rgba(47,125,255,0.85);
  transition:transform .2s var(--bk-ease), box-shadow .3s ease, opacity .2s ease;
}
.bk-go:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(47,125,255,0.95); }
.bk-go:active{ transform:none; }
.bk-go[disabled]{ opacity:0.62; pointer-events:none; }
.bk-back{
  padding:0.88rem 1.1rem; border-radius:10px; cursor:pointer;
  border:1px solid var(--bk-line); background:#fff; color:var(--bk-ink-soft);
  font-family:inherit; font-size:0.88rem;
  transition:color .2s ease, border-color .2s ease;
}
.bk-back:hover{ color:var(--bk-ink); border-color:var(--bk-ink-soft); }
.bk-note{ margin:0.75rem 0 0; font-size:0.74rem; color:var(--bk-ink-soft); text-align:center; line-height:1.5; }

/* Buttons carry no border of their own, so the focus ring is the only thing a
   keyboard user has to go on. */
.bk-go:focus-visible, .bk-back:focus-visible, .bk-close:focus-visible, .bk-wa:focus-visible{
  outline:2px solid var(--bk-blue-deep); outline-offset:2px;
}
.bk-go:focus-visible{ outline-color:#0b3c9c; }

/* ---- the WhatsApp hand-off ---- */
.bk-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.82rem 1.2rem; border-radius:10px; cursor:pointer; text-decoration:none;
  border:1px solid rgba(31,122,90,0.45); background:rgba(31,122,90,0.08);
  color:var(--bk-green); font-family:inherit; font-size:0.88rem; font-weight:500;
  transition:background .2s ease, border-color .2s ease, transform .2s var(--bk-ease);
}
.bk-wa:hover{ background:rgba(31,122,90,0.15); border-color:var(--bk-green); transform:translateY(-1px); }
.bk-wa svg{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.bk-wa[hidden]{ display:none; }
/* when WhatsApp is how the booking reaches us, it is the main action */
.bk-wa.is-key{
  background:var(--bk-green); border-color:var(--bk-green); color:#fff;
  box-shadow:0 10px 22px -10px rgba(31,122,90,0.8);
}
.bk-wa.is-key:hover{ background:#1a6b4e; border-color:#1a6b4e; }
/* inside the failure notice it sits on its own line, under the sentence */
.bk-fail .bk-wa{ display:flex; margin-top:0.7rem; padding:0.6rem 1rem; font-size:0.82rem; }

/* the spinner that replaces the label while the request is out */
.bk-go .spin{
  width:14px; height:14px; margin-right:0.5rem; vertical-align:-2px;
  display:none; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff;
  border-radius:50%; animation:bkSpin .7s linear infinite;
}
.bk-go.is-busy .spin{ display:inline-block; }
@keyframes bkSpin{ to{ transform:rotate(360deg); } }

/* a failed send keeps everything and says what to do */
.bk-fail{
  margin:0 0 1rem; padding:0.8rem 0.95rem; border-radius:9px;
  background:rgba(180,56,79,0.08); border:1px solid rgba(180,56,79,0.3);
  font-size:0.8rem; line-height:1.55; color:#8a2a3d;
}
.bk-fail[hidden]{ display:none; }

/* said plainly when no endpoint is configured */
.bk-preview{
  margin:0 0 1rem; padding:0.6rem 0.8rem; border-radius:8px;
  background:rgba(201,166,107,0.14); border:1px solid rgba(201,166,107,0.45);
  font-size:0.74rem; line-height:1.5; color:#6b5524;
}
.bk-preview[hidden]{ display:none; }

/* ================= DONE =================
   A column, not a block: the heading and the button hold their place and only
   the summary scrolls. The button is the one thing that must never be cut
   off, however many lines the summary runs to. */
.bk-done{ display:none; }
.bk-done.on{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  padding:1.9rem 2rem 0; text-align:center;
  animation:bkPane .4s var(--bk-ease);
}
.bk-done .seal, .bk-done h3, .bk-done > p{ flex:none; }
.bk-done .seal{
  width:50px; height:50px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.3rem;
  background:linear-gradient(140deg, var(--bk-blue), var(--bk-blue-deep)); color:#fff;
  box-shadow:0 12px 26px -10px rgba(47,125,255,0.8);
}
.bk-done h3{ font-size:1.26rem; margin-bottom:0.55rem; }
.bk-done > p{ font-size:0.86rem; line-height:1.65; color:var(--bk-ink-soft); margin:0 auto; max-width:40ch; }
.bk-summary{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  margin:1.2rem 0 0; text-align:left;
  border:1px solid var(--bk-line); border-radius:11px; background:#fff;
}
.bk-summary div{
  display:grid; grid-template-columns:38% 1fr; gap:0.8rem;
  padding:0.55rem 0.95rem; border-top:1px solid var(--bk-ivory-2); font-size:0.8rem;
}
.bk-summary div:first-child{ border-top:none; }
.bk-summary dt{ color:var(--bk-ink-soft); }
.bk-summary dd{ margin:0; color:var(--bk-ink); word-break:break-word; }
/* The button lives in its own row rather than carrying margins as a flex
   item — a margin there was being clipped away and left it flush against the
   bottom edge of the card. A padded, non-shrinking row cannot be squeezed. */
.bk-done-actions{
  flex:none; padding:1.1rem 0 1.5rem;
  display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center;
}
.bk-done-actions > *{ flex:1 1 200px; max-width:260px; }

/* ================= PHONE ================= */
@media (max-width:760px){
  .bk{ padding:0; align-items:stretch; }
  .bk-card{
    width:100%; max-height:none; height:100%;
    grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr);
    border-radius:18px 18px 0 0; margin-top:auto;
  }
  .bk-card::after{ border-radius:18px 18px 0 0; }
  .bk-scene{ padding:1.5rem 1.4rem 1.2rem; padding-right:5.6rem; }
  .bk-scene h2{ font-size:1.32rem; margin-top:0.6rem; }
  .bk-lede{ font-size:0.82rem; max-width:none; }
  /* The board costs more height than a phone can spare next to a keyboard, but
     dropping the whole panel loses the one thing that carries the brand — so
     the knight stays on as a compact crest and only the board goes. */
  .bk-stage{
    position:absolute; top:1.1rem; right:1.1rem; bottom:auto; left:auto;
    width:58px; height:80px; margin:0; padding:0; perspective:none; z-index:1;
  }
  .bk-board, .bk-path, .bk-blur{ display:none; }
  .bk-knight{
    left:auto; right:0; bottom:0; width:52px; transform:none; opacity:0.92;
    animation-name:bkFloatCrest;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 12px rgba(79,216,255,0.26));
  }
  .bk-points{ flex-direction:row; flex-wrap:wrap; gap:0.5rem 1.1rem; margin-top:1rem; }
  .bk-points li{ font-size:0.74rem; }
  .bk-form-col{ min-height:0; }
  .bk-steps{ padding:1.1rem 3.3rem 0 1.3rem; }   /* clears the close button */
  .bk-body{ padding:1.1rem 1.3rem 1.4rem; }
  .bk-foot{ padding:0.9rem 1.3rem calc(1rem + env(safe-area-inset-bottom)); }
  .bk-done.on{ padding:1.6rem 1.3rem 0; }
  .bk-close{ top:0.75rem; right:0.8rem; }
  .bk-row.phone{ grid-template-columns:118px 1fr; }
}
@media (max-width:380px){
  .bk-row{ grid-template-columns:1fr; }
  .bk-row.phone{ grid-template-columns:110px 1fr; }
}

/* short landscape windows: let the whole card scroll rather than trapping it */
@media (max-height:560px) and (min-width:761px){
  .bk-card{ max-height:96vh; }
  .bk-stage{ height:120px; }
  .bk-knight{ width:56px; }
}

@media (prefers-reduced-motion: reduce){
  .bk-scrim, .bk-card{ transition:none; }
  .bk-card{ opacity:1; transform:none; }
  .bk-scene::before, .bk-knight, .bk-blur{ animation:none; }
  .bk-card::after{ animation:none; }
  .bk-wa:hover{ transform:none; }
  .bk-path path{ animation:none; stroke-dashoffset:0; }
  .bk-path circle{ animation:none; opacity:0.9; }
  .bk-pane.on, .bk-done.on{ animation:none; }
  .bk-go:hover, .bk-card-opt:hover{ transform:none; }
  .bk-go .spin{ animation-duration:1.6s; }
}