/* Landing page: styles for the parts wired to live data (pricing cards, demo
   form, login link). The rest of the design is inline in views/landing/*.ejs. */

.bk-login { font-weight: 600; }

/* Pricing ---------------------------------------------------------------- */
.bk-billing-toggle { display: flex; padding: 4px; border: 1.5px solid oklch(0.2 0.04 268); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; }
.bk-billing-toggle button { border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; background: transparent; color: oklch(0.2 0.04 268); font: inherit; }
.bk-billing-toggle button.on { background: oklch(0.2 0.04 268); color: #fff; }
.bk-billing-toggle button[data-interval="year"].on { background: oklch(0.52 0.19 268); }

.bk-plan { position: relative; border: 1.5px solid oklch(0.2 0.04 268); border-radius: 14px; padding: 30px; display: flex; flex-direction: column; gap: 24px; }
.bk-plan-white { background: #fff; box-shadow: 6px 6px 0 oklch(0.2 0.04 268); }
.bk-plan-indigo { background: oklch(0.52 0.19 268); color: #fff; box-shadow: 8px 8px 0 oklch(0.2 0.04 268); }
.bk-plan-navy { background: oklch(0.2 0.04 268); color: #fff; box-shadow: 6px 6px 0 oklch(0.52 0.19 268); }
.bk-plan-flag { position: absolute; top: -14px; left: 30px; padding: 5px 12px; border-radius: 999px; background: oklch(0.2 0.04 268); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
.bk-plan-price { font-family: 'Schibsted Grotesk', sans-serif; font-size: 52px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.bk-plan-white .bk-plan-sub, .bk-plan-white .bk-plan-unit { color: oklch(0.45 0.03 268); }
.bk-plan-white .bk-plan-note { color: oklch(0.5 0.03 268); }
.bk-plan-indigo .bk-plan-sub, .bk-plan-indigo .bk-plan-unit, .bk-plan-indigo .bk-plan-note { color: oklch(0.94 0.02 268); }
.bk-plan-navy .bk-plan-sub, .bk-plan-navy .bk-plan-note { color: oklch(0.82 0.03 268); }
.bk-plan-check { width: 20px; height: 20px; flex: none; border-radius: 50%; background: oklch(0.52 0.19 268); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.bk-plan-indigo .bk-plan-check { background: #fff; color: oklch(0.52 0.19 268); }
.bk-plan-cta { text-align: center; padding: 14px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; transition: transform .15s, box-shadow .15s, background .15s; }
.bk-plan-white .bk-plan-cta { border: 1.5px solid oklch(0.2 0.04 268); color: oklch(0.2 0.04 268); }
.bk-plan-white .bk-plan-cta:hover { background: oklch(0.2 0.04 268); color: #fff; }
.bk-plan-indigo .bk-plan-cta { background: #fff; color: oklch(0.2 0.04 268); border: 1.5px solid oklch(0.2 0.04 268); box-shadow: 4px 4px 0 oklch(0.2 0.04 268); }
.bk-plan-indigo .bk-plan-cta:hover { box-shadow: 1px 1px 0 oklch(0.2 0.04 268); transform: translate(3px, 3px); color: oklch(0.2 0.04 268); }
.bk-plan-navy .bk-plan-cta { background: oklch(0.52 0.19 268); color: #fff; padding: 15px 20px; }
.bk-plan-navy .bk-plan-cta:hover { background: oklch(0.45 0.19 268); color: #fff; }
.bk-plan-trial { text-align: center; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bk-plan-white .bk-plan-trial { color: oklch(0.45 0.03 268); }
.bk-plan-indigo .bk-plan-trial { color: #fff; }

/* Demo form -------------------------------------------------------------- */
.bk-demo {
  width: 100%; max-width: 640px; text-align: left; color: oklch(0.2 0.04 268);
  background: #fff; border: 1.5px solid oklch(0.2 0.04 268); border-radius: 16px;
  box-shadow: 8px 8px 0 oklch(0.2 0.04 268); padding: clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
}
.bk-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bk-demo-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.bk-demo-grid label.wide { grid-column: 1 / -1; }
.bk-demo input, .bk-demo select, .bk-demo textarea {
  font: inherit; font-size: 15px; font-weight: 400; color: oklch(0.2 0.04 268);
  border: 1px solid oklch(0.9 0.01 268); border-radius: 8px; padding: 11px 13px; background: #fff; width: 100%;
}
.bk-demo textarea { resize: vertical; }
.bk-demo input:focus, .bk-demo select:focus, .bk-demo textarea:focus { outline: none; border-color: oklch(0.52 0.19 268); box-shadow: 0 0 0 3px oklch(0.52 0.19 268 / 0.15); }
.bk-demo [aria-invalid="true"] { border-color: oklch(0.58 0.2 25); }
.bk-demo-submit {
  align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; cursor: pointer;
  background: oklch(0.52 0.19 268); color: #fff; border: 1.5px solid oklch(0.2 0.04 268);
  box-shadow: 4px 4px 0 oklch(0.2 0.04 268); padding: 15px 26px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 16px;
  transition: transform .15s, box-shadow .15s;
}
.bk-demo-submit:hover { box-shadow: 1px 1px 0 oklch(0.2 0.04 268); transform: translate(3px, 3px); }
.bk-demo-submit:disabled { opacity: .7; cursor: progress; }
.bk-demo-fine { font-size: 13px; color: oklch(0.45 0.03 268); margin: 0; }
.bk-demo-fine a { color: oklch(0.52 0.19 268); text-decoration: underline; }
.bk-demo-msg { padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.bk-demo-msg.ok { background: oklch(0.95 0.04 160); color: oklch(0.42 0.11 160); }
.bk-demo-msg.err { background: oklch(0.95 0.03 25); color: oklch(0.5 0.18 25); }
.bk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .bk-demo-grid { grid-template-columns: 1fr; } }

/* Phones: keep the header to logo, language, Log in and Book a demo. */
@media (max-width: 760px) {
  header nav > a[href^="#"]:not([href="#demo"]) { display: none; }
}