/* ==========================================================================
   Bookanic public pages (site.css)
   The home page, sign in / sign up, password pages, invite-only, not found
   and the paused-workshop page. brand.css is loaded first (tokens, buttons,
   icons, motion); this file only lays the pages out. Tokens only, so light
   and dark both work with no extra blocks.

   Contents
     1. Shared: container, skip link
     2. Auth + status pages (centred card)
     3. Home page: nav, hero, benefits, how it works, band, footer
     4. Paused workshop page (the workshop's own colour)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared
   -------------------------------------------------------------------------- */
.site-landing, .site-auth { --site-glow: color-mix(in srgb, var(--bk-accent) 8%, transparent); }
.site-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--bk-space-6); }
.site-skip {
  position: absolute; left: 16px; top: -60px; z-index: var(--bk-z-toast);
  background: var(--bk-surface); color: var(--bk-brand-text); padding: 10px 14px;
  border-radius: var(--bk-radius-sm); box-shadow: var(--bk-shadow-md); font-weight: var(--bk-fw-medium);
}
.site-skip:focus { top: 12px; }
[hidden] { display: none !important; }
/* an icon inside a button or link sits with the text */
.btn-primary .bk-icon, .bk-btn .bk-icon { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   2. Auth + status pages
   -------------------------------------------------------------------------- */
.site-auth {
  min-height: 100vh; min-height: 100dvh;
  /* anchored near the top (not centred), so a new message only grows the card downwards */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(48px, 14vh, 160px) var(--bk-space-4) var(--bk-space-8);
  background:
    radial-gradient(760px 420px at 50% -140px, color-mix(in srgb, var(--bk-brand) 15%, transparent), transparent 72%),
    radial-gradient(520px 360px at 100% 100%, var(--site-glow), transparent 70%),
    var(--bk-bg);
  background-repeat: no-repeat;
}
.auth-card {
  width: 100%; max-width: 432px;
  background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-xl); box-shadow: var(--bk-shadow-lg);
  padding: var(--bk-space-8) var(--bk-space-8) var(--bk-space-7);
}
.auth-card--wide { max-width: 540px; }

/* sign-up: the card with "Everything's included" beside it (left on wide screens, under it on phones) */
.auth-split { display: flex; flex-direction: column; align-items: center; gap: var(--bk-space-7); width: 100%; }
.auth-side { width: 100%; max-width: 540px; padding: 0 var(--bk-space-2); container-type: inline-size; }
.auth-side-kicker { margin: 0 0 var(--bk-space-4); color: var(--bk-brand-text); }
.auth-side-title {   /* the same size as the card's heading, and level with it on wide screens */
  margin: 0 0 var(--bk-space-5); font-family: var(--bk-font-display); font-size: var(--bk-fs-xl);
  font-weight: var(--bk-fw-bold); line-height: var(--bk-lh-tight); letter-spacing: var(--bk-tracking-tight); color: var(--bk-text);
}
.site-checks.auth-side-list { flex-direction: column; gap: var(--bk-space-3); margin: 0; font-size: var(--bk-fs-base); color: var(--bk-text); }
.auth-side-list li { align-items: flex-start; gap: 10px; }
.auth-side-list .bk-icon { margin-top: 3px; }
.auth-side .auth-side-frame { max-width: 340px; margin: var(--bk-space-7) 0 0; }
.auth-side-art { display: block; width: 100%; height: auto; }
/* the "Check your email" step stands on its own */
.auth-split:has(#signupStart[hidden]) .auth-side { display: none; }
@media (min-width: 1000px) {
  .auth-split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 540px); justify-content: center; align-items: start; gap: var(--bk-space-10); }
  .auth-split > .auth-card { grid-column: 2; grid-row: 1; }
  /* starts level with the card's heading, and stays beside the form as it scrolls */
  .auth-side { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: -4px; padding: 100px 0 0; }   /* stuck, the words sit 96px down */
  .auth-side .auth-side-frame { max-width: none; width: 105%; margin-left: -2.5%; }   /* the picture's own see-through edge trimmed, so it lines up with the list */
  .auth-split:has(#signupStart[hidden]) { grid-template-columns: minmax(0, 540px); }
  .auth-split:has(#signupStart[hidden]) > .auth-card { grid-column: 1; }
}
@media (max-width: 480px) {
  .auth-side .auth-side-frame { display: none; }   /* phones: the list is enough under a long form */
}

/* the lock-up at the top of the card */
.auth-brand {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--bk-space-7);
  font-size: 19px; text-decoration: none; border-radius: var(--bk-radius-sm);
}
.auth-brand .bf-mark { width: 28px; height: 28px; border-radius: 7px; }

.auth-card h1 {
  font-size: var(--bk-fs-xl); font-weight: var(--bk-fw-bold); line-height: var(--bk-lh-tight);
  letter-spacing: var(--bk-tracking-tight); margin: 0 0 var(--bk-space-2); color: var(--bk-text);
}
.auth-sub {
  color: var(--bk-muted); font-size: 14.5px; line-height: var(--bk-lh-base);
  margin: 0 0 var(--bk-space-6); overflow-wrap: anywhere;
}
.auth-sub b { color: var(--bk-text); font-weight: var(--bk-fw-medium); }
.auth-sub a, .auth-alt a, .auth-label-link { font-weight: var(--bk-fw-medium); text-decoration: none; }
.auth-sub a:hover, .auth-alt a:hover, .auth-label-link:hover { text-decoration: underline; }

/* a round tinted badge with an icon, above the heading of a status page */
.site-badge {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--bk-brand-tint); color: var(--bk-brand-text); margin-bottom: var(--bk-space-5);
}
.site-badge--warning { background: var(--bk-warning-bg); color: var(--bk-warning-text); }
.site-badge .bk-icon { width: 24px; height: 24px; }

/* Status pages (no form): everything centred */
.auth-card:not(:has(form)) { text-align: center; }
.auth-card:not(:has(form)) .site-badge { margin-left: auto; margin-right: auto; }
.auth-card:not(:has(form)) .auth-brand { margin-bottom: var(--bk-space-7); }
.auth-card:not(:has(form)) .auth-sub { margin-bottom: var(--bk-space-2); text-wrap: balance; }
/* sign-up's "Check your email" step: its card still holds the hidden form, so centre the logo here too */
.auth-card:has(#signupCheck:not([hidden])) { text-align: center; }
.auth-card:has(#signupCheck:not([hidden])) .auth-brand { margin-bottom: var(--bk-space-7); }

/* --- fields --- */
.auth-field { margin-top: var(--bk-space-4); }
.auth-field:first-child { margin-top: 0; }
.auth-card label {
  display: block; font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium);
  color: var(--bk-text); margin: 0 0 6px;
}
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bk-space-3); }
.auth-label-row label { margin-bottom: 6px; }
.auth-label-link { font-size: var(--bk-fs-xs); white-space: nowrap; }
.auth-card input, .auth-card select {
  display: block; width: 100%; min-height: 46px; padding: 10px 13px;
  border: 1px solid var(--bk-field-border); border-radius: var(--bk-radius-sm);   /* 3:1 edge (WCAG 1.4.11) */
  background: var(--bk-surface); color: var(--bk-text);
  font: inherit; font-size: 16px; /* 16px+ stops iPhones zooming in */
}
/* the same chevron as the app's selects (brand.css select.bk-input) */
.auth-card select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6E76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.auth-card input:hover, .auth-card select:hover { border-color: var(--bk-field-border-hover); }
.auth-card input:focus, .auth-card select:focus,
.auth-card input:focus-visible, .auth-card select:focus-visible {
  outline: none; border-color: var(--bk-brand); box-shadow: var(--bk-focus-ring);
}
.auth-card input[aria-invalid="true"], .auth-card select[aria-invalid="true"] { border-color: var(--bk-danger); }
.auth-card input[aria-invalid="true"]:focus, .auth-card select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-danger) 28%, transparent); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-3); margin-top: var(--bk-space-4); }
.auth-row .auth-field { margin-top: 0; }
.hint { font-size: var(--bk-fs-xs); color: var(--bk-muted); margin-top: 6px; line-height: var(--bk-lh-base); }

/* sign-up groups */
.auth-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.auth-group + .auth-group { margin-top: var(--bk-space-6); padding-top: var(--bk-space-5); border-top: 1px solid var(--bk-border-soft); }
.auth-group legend {
  float: left; width: 100%;   /* a floated legend sits inside the box, not in its border */
  padding: 0; margin: 0 0 var(--bk-space-3); font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold);
  letter-spacing: var(--bk-tracking-caps); text-transform: uppercase; color: var(--bk-muted);
}
.auth-group legend + * { clear: both; margin-top: 0; }

/* password show/hide (added by auth.js) */
.pw-field { position: relative; }
.pw-field input { padding-right: 68px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--bk-radius-xs);
  background: transparent; color: var(--bk-brand-text); font: inherit;
  font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); cursor: pointer;
}
.pw-toggle:hover { background: var(--bk-brand-tint); }
.pw-toggle:focus-visible { outline-offset: 0; }

/* --- the main button (a <button> or an <a>) --- */
.btn-primary {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--bk-space-2);
  width: 100%; min-height: 48px; margin-top: var(--bk-space-6); padding: 0 var(--bk-space-5);
  border: 1px solid var(--bk-brand); border-radius: var(--bk-radius-md);
  background: var(--bk-brand); color: var(--bk-on-brand); box-shadow: var(--bk-shadow-xs);
  font: inherit; font-size: var(--bk-fs-base); font-weight: var(--bk-fw-medium);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover:not(:disabled) { background: var(--bk-brand-strong); border-color: var(--bk-brand-strong); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary:focus-visible { outline: 2px solid var(--bk-focus); outline-offset: 2px; }
/* busy: the label hides and a spinner turns in its place */
.btn-primary.is-busy, .btn-primary.is-busy:disabled { color: transparent; opacity: 1; cursor: progress; }
.btn-primary.is-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--bk-on-brand); border-right-color: transparent;
  animation: bk-spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary.is-busy::after { animation: bk-spin 1.6s linear infinite !important; }
}

/* --- the message under a form: hidden until there is something to say --- */
.form-msg:empty { display: none; }
.form-msg {
  display: flex; align-items: flex-start; gap: 9px; margin-top: var(--bk-space-4);
  padding: 10px 13px; border-radius: var(--bk-radius-md);
  background: var(--bk-danger-bg); border: 1px solid var(--bk-danger-border); color: var(--bk-danger-text);
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); line-height: var(--bk-lh-base);
  text-align: left; animation: bk-rise-in var(--bk-dur-base) var(--bk-ease) both; --bk-rise: 4px;
}
.form-msg::before {   /* alert icon, drawn in the text colour */
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.2h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.2h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-msg.is-ok { background: var(--bk-success-bg); border-color: var(--bk-success-border); color: var(--bk-success-text); }
.form-msg.is-ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.6'/%3E%3C/svg%3E");
}

.auth-alt { text-align: center; font-size: var(--bk-fs-sm); color: var(--bk-muted); margin: var(--bk-space-6) 0 0; }
.auth-card:not(:has(form)) .btn-primary + .auth-alt { margin-top: var(--bk-space-5); }
.site-auth-foot { margin: var(--bk-space-6) 0 0; font-size: var(--bk-fs-xs); color: var(--bk-muted); text-align: center; }

/* --- the Terms tick box: box and words side by side --- */
.auth-check { display: flex; align-items: flex-start; gap: 11px; margin-top: var(--bk-space-6); }
.auth-card .auth-check label {
  margin: 0; padding-top: 1px; font-weight: var(--bk-fw-regular); line-height: var(--bk-lh-base);
  color: var(--bk-text-2); cursor: pointer;
}
.auth-check label a { font-weight: var(--bk-fw-medium); text-underline-offset: 2px; }
/* a phone number never breaks across two lines */
a[href^="tel:"] { white-space: nowrap; }
.auth-card input.bk-check { width: 22px; min-height: 0; padding: 0; }

/* sign-up: "1 Tell us · 2 Confirm · 3 Take bookings" */
.auth-steps {
  list-style: none; margin: calc(-1 * var(--bk-space-2)) 0 var(--bk-space-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--bk-space-2) var(--bk-space-4);
  font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-medium); color: var(--bk-text-2);
}
.auth-steps li { display: inline-flex; align-items: center; gap: 7px; }
.auth-steps-n {   /* a small hex nut, like .bk-hexstep */
  display: inline-grid; place-items: center; width: 23px; height: 20px; clip-path: var(--bk-hex);
  background: var(--bk-brand-tint); color: var(--bk-brand-text); font-size: 11px; font-weight: var(--bk-fw-bold);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.auth-steps li:first-child { color: var(--bk-text); }
.auth-steps li:first-child .auth-steps-n { background: var(--bk-brand); color: var(--bk-on-brand); }
.auth-template-hint { margin-top: 8px; padding: 9px 12px; border-radius: var(--bk-radius-sm); background: var(--bk-surface-3); border: 1px solid var(--bk-border-soft); }
.auth-field > .hint:first-of-type { margin-top: 6px; }

/* the message next to a box that needs fixing (added by auth.js) */
.auth-field-err {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 6px;
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-danger-text); line-height: var(--bk-lh-snug);
  animation: bk-drop-in var(--bk-dur-fast) var(--bk-ease) both;
}
.auth-check .auth-field-err { flex-basis: 100%; margin: 4px 0 0 33px; }
.auth-check { flex-wrap: wrap; }
.auth-check label { flex: 1; }
/* "Did you mean you@gmail.com?" */
.auth-suggest:empty { display: none; }
.auth-suggest { margin-top: 6px; font-size: var(--bk-fs-sm); color: var(--bk-warning-text); animation: bk-drop-in var(--bk-dur-fast) var(--bk-ease) both; }
.auth-suggest-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px; margin: -4px;
  border: 0; border-radius: var(--bk-radius-sm); background: none; font: inherit; font-weight: var(--bk-fw-bold); text-align: left;
  color: var(--bk-brand-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  overflow-wrap: anywhere;
}
.auth-reassure { margin: var(--bk-space-3) 0 0; text-align: center; font-size: var(--bk-fs-xs); color: var(--bk-muted); }
.auth-legal { margin-top: var(--bk-space-4); font-size: var(--bk-fs-xs); }

/* a finished step inside a card ("Check your email", "Email confirmed") */
.auth-centre, .auth-done, .auth-card:has(.auth-centre) { text-align: center; }
.auth-centre .site-badge, .auth-done .site-badge { margin-left: auto; margin-right: auto; }
.auth-done { outline: none; }
.auth-done .auth-sub { text-wrap: balance; margin-bottom: var(--bk-space-2); }
#signupCheckText { overflow-wrap: anywhere; word-break: break-word; }
/* a centred card that still has a tick box (updated terms): the box reads left to right */
.auth-card:has(.auth-centre) .auth-check { text-align: left; }
.auth-sub--quiet { font-size: var(--bk-fs-sm); }
.auth-tick { display: grid; place-items: center; margin: 0 auto var(--bk-space-5); }
.auth-tick .bk-tick { width: 60px; height: 60px; }
.btn-quiet, .btn-quiet:hover:not(:disabled) {
  background: var(--bk-surface); color: var(--bk-text); border-color: var(--bk-border-strong); box-shadow: none;
}
.btn-quiet:hover:not(:disabled) { background: var(--bk-surface-2); }

/* bigger tap targets for small links on touch screens (layout unchanged) */
@media (max-width: 640px), (pointer: coarse) {
  .auth-label-link, .auth-alt a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
  .site-footer-links a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

@media (max-width: 480px) {
  .site-auth { justify-content: flex-start; padding: var(--bk-space-6) var(--bk-space-4) var(--bk-space-7); }
  .auth-card { padding: var(--bk-space-7) var(--bk-space-5) var(--bk-space-6); border-radius: var(--bk-radius-lg); }
  .auth-brand, .auth-card:not(:has(form)) .auth-brand { margin-bottom: var(--bk-space-6); }
  .auth-row { grid-template-columns: 1fr; }
  /* the sign-up steps: three even columns, so "3 Take bookings" never drops to a line of its own */
  .auth-steps { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--bk-space-2); font-size: 12px; }
  .auth-steps li { gap: 5px; }
}
@media (max-width: 420px) {
  /* small phones: the step you're on keeps its words; the others are just their nuts,
     joined by a dashed line like the home page's steps (screen readers still hear every label) */
  .auth-steps { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--bk-space-2); }
  .auth-steps li + li::before { content: ""; width: 18px; border-top: 2px dashed var(--bk-border-strong); margin-right: 3px; }
  .auth-steps li:not([aria-current]) .auth-steps-lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Home page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html:has(.site-landing) { scroll-behavior: smooth; }
}
.site-landing {
  min-height: 100vh; overflow-x: clip;
  background:
    radial-gradient(900px 560px at 88% -6%, color-mix(in srgb, var(--bk-brand) 13%, transparent), transparent 70%),
    radial-gradient(720px 520px at -8% 18%, var(--site-glow), transparent 70%),
    var(--bk-bg);
  background-repeat: no-repeat;
}
#main, #how { scroll-margin-top: 76px; }

/* --- nav: sticky, frosted; gains a hairline once the page scrolls --- */
.site-nav {
  position: sticky; top: 0; z-index: var(--bk-z-sticky);
  background: color-mix(in srgb, var(--bk-bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  .site-nav { animation: site-nav-lift linear both; animation-timeline: scroll(); animation-range: 0 64px; }
}
@keyframes site-nav-lift {
  to { border-bottom-color: var(--bk-border); box-shadow: var(--bk-shadow-xs); }
}
.site-nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-4); min-height: 68px; }
.landing-brand { font-size: 20px; border-radius: var(--bk-radius-sm); }
.landing-brand .bf-mark { width: 28px; height: 28px; border-radius: 7px; }
.site-nav-links { display: flex; align-items: center; gap: var(--bk-space-1); }
.site-navlink {
  padding: 8px 12px; border-radius: var(--bk-radius-sm); text-decoration: none;
  color: var(--bk-text-2); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium);
}
.site-navlink:hover { background: var(--bk-surface-2); color: var(--bk-text); }
.site-nav-links .btn-small { margin-left: var(--bk-space-2); }
.site-nav-links > .site-navlink:last-child { margin-right: -12px; }   /* text lines up with the content edge */

/* --- hero --- */
.site-hero { padding: var(--bk-space-9) 0 var(--bk-space-10); }
.site-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--bk-space-9); align-items: center; }
.site-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 13px 6px 11px; border-radius: var(--bk-radius-pill);
  background: var(--bk-surface); border: 1px solid var(--bk-border); box-shadow: var(--bk-shadow-xs);
  font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-medium); color: var(--bk-text-2);
}
.site-eyebrow .bk-dot { color: var(--bk-accent); width: 7px; height: 7px; }
.site-hero h1 {
  font-size: var(--bk-fs-3xl); font-weight: var(--bk-fw-heavy); line-height: 1.06;
  letter-spacing: -0.032em; margin: var(--bk-space-5) 0 var(--bk-space-5); color: var(--bk-text);
  text-wrap: balance;
}
.site-hero h1 span { color: var(--bk-brand-text); }
.site-lede { font-size: 18px; line-height: var(--bk-lh-loose); color: var(--bk-text-2); margin: 0; max-width: 33em; text-wrap: pretty; }
.site-cta-row { display: flex; flex-wrap: wrap; gap: var(--bk-space-3); margin-top: var(--bk-space-7); }
.site-cta-row .bk-btn { min-height: 50px; padding: 0 22px; font-size: var(--bk-fs-base); }
.btn-hero .bk-icon, .site-price-cta .bk-icon, .site-band-cta .bk-icon, .site-band-signin .bk-icon { transition: transform var(--bk-dur-fast) var(--bk-ease); }
.btn-hero:hover .bk-icon, .site-price-cta .bk-btn:hover .bk-icon, .site-band-cta:hover .bk-icon, .site-band-signin:hover .bk-icon { transform: translateX(3px); }
.site-btn-quiet { background: var(--bk-surface); }
.site-checks {
  list-style: none; margin: var(--bk-space-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--bk-space-2) var(--bk-space-5);
  font-size: var(--bk-fs-sm); color: var(--bk-muted);
}
.site-checks li { display: inline-flex; align-items: center; gap: 6px; }
.site-checks .bk-icon { color: var(--bk-success); stroke-width: 2.4; }
.site-hero-art { container-type: inline-size; }
.site-hero-frame { display: block; max-width: 580px; margin-left: auto; }
.site-hero-frame img { display: block; width: 100%; height: auto; }
/* the picture comes in a light and a dark drawing; only one shows (dark mode is at the end) */
.site-hero-frame > .site-hero-img--dark { display: none; }

/* hero arrives in a quick cascade (all within ~180 ms; instant with reduced motion) */
.site-hero-copy > * { animation: bk-rise-in var(--bk-dur-slow) var(--bk-ease) both; }
.site-hero-copy > :nth-child(2) { animation-delay: 40ms; }
.site-hero-copy > :nth-child(3) { animation-delay: 80ms; }
.site-hero-copy > :nth-child(4) { animation-delay: 120ms; }
.site-hero-copy > :nth-child(5) { animation-delay: 150ms; }
.site-hero-art { animation: bk-rise-in var(--bk-dur-slow) var(--bk-ease) 100ms both; --bk-rise: 14px; }

/* --- sections --- */
.site-section { padding: var(--bk-space-10) 0; }
.site-section-head { max-width: 640px; margin: 0 auto var(--bk-space-8); text-align: center; }
.site-kicker { color: var(--bk-brand-text); margin: 0 0 var(--bk-space-3); }
.site-section-head h2 {
  font-size: clamp(24px, 3.4vw, var(--bk-fs-2xl)); font-weight: var(--bk-fw-bold); line-height: var(--bk-lh-tight);
  letter-spacing: var(--bk-tracking-tight); margin: 0; color: var(--bk-text); text-wrap: balance;
}
.site-section-head p:not(.site-kicker) { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-md); line-height: var(--bk-lh-base); color: var(--bk-text-2); text-wrap: pretty; }

/* --- benefit cards --- */
.site-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bk-space-5); }
.site-feature {
  background: var(--bk-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow-sm); padding: var(--bk-space-6) var(--bk-space-6) var(--bk-space-7);
  transition: translate var(--bk-dur-base) var(--bk-ease), box-shadow var(--bk-dur-base) var(--bk-ease), border-color var(--bk-dur-base) var(--bk-ease);
}
.site-feature:hover { translate: 0 -3px; box-shadow: var(--bk-shadow-md); border-color: var(--bk-border-strong); }
.site-feature-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--bk-brand-tint); color: var(--bk-brand-text);
}
.site-feature h3 {
  margin: var(--bk-space-5) 0 var(--bk-space-2); font-size: 17px; font-weight: var(--bk-fw-bold); line-height: var(--bk-lh-snug); color: var(--bk-text);
  text-wrap: balance;
}
@media (min-width: 1041px) {   /* four across: titles take two lines, so every card's text starts level */
  .site-feature h3 { min-height: calc(2em * 1.35); }
}
@media (min-width: 1160px) {   /* full width: every title fits on one line, so none breaks early */
  .site-feature h3 { font-size: 16px; min-height: 0; }
}
.site-feature p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bk-text-2); }

/* --- how it works --- */
.site-how { background: var(--bk-surface); border-top: 1px solid var(--bk-border-soft); border-bottom: 1px solid var(--bk-border-soft); }
.site-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bk-space-7);
}
.site-steps::before {   /* the dashed line joining the numbers */
  content: ""; position: absolute; top: 23px; left: calc(100% / 6); right: calc(100% / 6);
  border-top: 2px dashed var(--bk-border-strong);
}
.site-step { position: relative; text-align: center; padding: 0 var(--bk-space-2); }
/* the number: a hex nut (.bk-hexstep--lg) on a patch of the card's colour that breaks the dashed line */
.site-step-num {
  display: inline-grid; place-items: center; width: 68px; height: 48px; background: var(--bk-surface);
}
.site-step-num .bk-hexstep { font-size: var(--bk-fs-lg); }
.site-step h3 { margin: var(--bk-space-5) 0 var(--bk-space-2); font-size: 17px; font-weight: var(--bk-fw-bold); color: var(--bk-text); }
.site-step p { margin: 0 auto; max-width: 300px; font-size: 14.5px; line-height: 1.6; color: var(--bk-text-2); text-wrap: pretty; }

/* --- closing band (fixed brand teal, same in light and dark) --- */
.site-band-wrap { padding: var(--bk-space-10) 0; }
.site-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--bk-space-7); align-items: center;
  padding: var(--bk-space-8) var(--bk-space-9); border-radius: var(--bk-radius-xl);
  background:
    radial-gradient(520px 260px at 92% -30%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(420px 240px at 0% 130%, color-mix(in srgb, var(--bk-teal-bright) 22%, transparent), transparent 70%),
    linear-gradient(135deg, var(--bk-teal) 0%, var(--bk-teal-deep) 100%);
  color: var(--bk-ink-on-dark); box-shadow: var(--bk-shadow-lg);
  border: 1px solid rgba(255, 255, 255, .06);
}
.site-band-mark { width: 72px; height: 72px; display: block; opacity: .95; }
.site-band h2 {
  margin: 0; font-size: clamp(22px, 2.6vw, 27px); font-weight: var(--bk-fw-bold);
  line-height: var(--bk-lh-tight); letter-spacing: var(--bk-tracking-tight); color: #FFFFFF; text-wrap: balance;
}
.site-band p { margin: var(--bk-space-2) 0 0; font-size: var(--bk-fs-base); line-height: var(--bk-lh-base); color: rgba(243, 247, 247, .82); max-width: 36em; }
.site-band-action .bk-btn { min-height: 50px; padding: 0 22px; font-size: var(--bk-fs-base); }
.site-band-signin, .site-band-signin:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--bk-teal); box-shadow: var(--bk-shadow-sm); }
.site-band-signin:hover { background: var(--bk-teal-tint); border-color: var(--bk-teal-tint); }
.site-band :focus-visible { outline-color: #FFFFFF; }

/* --- footer --- */
.site-footer { border-top: 1px solid var(--bk-border); padding: var(--bk-space-8) 0 var(--bk-space-9); }
.site-footer-in { display: grid; grid-template-columns: 1fr auto; gap: var(--bk-space-5) var(--bk-space-7); align-items: start; }
.site-footer-brand .bk-lockup { font-size: 17px; border-radius: var(--bk-radius-sm); }
.site-footer-brand p { margin: var(--bk-space-2) 0 0; font-size: var(--bk-fs-sm); color: var(--bk-muted); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: var(--bk-space-1) var(--bk-space-5); padding-top: 3px; }
.site-footer-links a { color: var(--bk-text-2); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); text-decoration: none; }
.site-footer-links a:hover { color: var(--bk-brand-text); text-decoration: underline; }
.site-footer-copy { grid-column: 1 / -1; margin: 0; padding-top: var(--bk-space-5); border-top: 1px solid var(--bk-border-soft); font-size: var(--bk-fs-xs); color: var(--bk-muted); }

/* --- smaller screens --- */
@media (max-width: 1040px) {
  .site-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .site-hero { padding: var(--bk-space-7) 0 var(--bk-space-9); }
  .site-hero-in { grid-template-columns: 1fr; gap: var(--bk-space-8); }
  .site-hero-copy { text-align: center; }
  .site-lede { margin: 0 auto; }
  .site-cta-row, .site-checks { justify-content: center; }
  .site-hero-frame { margin: 0 auto; max-width: 520px; }
  .site-band { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: var(--bk-space-8) var(--bk-space-6); gap: var(--bk-space-5); }
  .site-band p { margin-left: auto; margin-right: auto; }
  .site-band-mark { width: 56px; height: 56px; }
}
@media (max-width: 900px) {
  .site-steps { grid-template-columns: 1fr; gap: var(--bk-space-6); max-width: 560px; margin: 0 auto; }
  /* stacked: one dashed piece under each number down to the next, so the line ends at the last one */
  .site-steps::before { display: none; }
  .site-step:not(:last-child)::after {
    content: ""; position: absolute; left: 23px; top: 54px; bottom: calc(8px - var(--bk-space-6));
    border-left: 2px dashed var(--bk-border-strong);
  }
  .site-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--bk-space-4); text-align: left; padding: 0; }
  .site-step-num { grid-row: span 2; width: 48px; }
  .site-step h3 { margin: 10px 0 var(--bk-space-1); }
  .site-step p { margin: 0; max-width: none; }
}
@media (max-width: 640px) {
  .site-container { padding: 0 var(--bk-space-4); }
  .site-hide-sm { display: none; }
  .site-nav-in { min-height: 60px; }
  .landing-brand { font-size: 18px; }
  .landing-brand .bf-mark { width: 26px; height: 26px; }
  .site-section, .site-band-wrap { padding: var(--bk-space-9) 0; }
  .site-section-head { margin-bottom: var(--bk-space-7); }
  .site-features { grid-template-columns: 1fr; gap: var(--bk-space-3); }
  .site-feature { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: var(--bk-space-4); padding: var(--bk-space-5); }
  .site-feature-icon { grid-row: span 2; }
  .site-feature h3 { margin: 2px 0 var(--bk-space-1); }
  .site-lede { font-size: var(--bk-fs-md); }
  .site-cta-row .bk-btn { flex: 1 1 100%; }
  .site-band-action, .site-band-action .bk-btn { width: 100%; }
  .site-footer-in { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. Paused workshop page: the workshop's colour leads, like its booking page
      (--ws and --ws-on are set on .site-ws by views.js)
   -------------------------------------------------------------------------- */
.site-ws {
  --bk-brand: var(--ws);
  --bk-brand-strong: color-mix(in srgb, var(--ws) 84%, #000);
  --bk-brand-text: var(--ws-text, var(--ws));   /* darkened by views.js when the colour is light */
  --bk-brand-tint: color-mix(in srgb, var(--ws) 11%, #FFFFFF);
  --bk-on-brand: var(--ws-on);
  --bk-focus: var(--ws);
  --bk-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ws) 32%, transparent);
  background: var(--bk-bg);
  padding: var(--bk-space-6) var(--bk-space-4) var(--bk-space-2);
}
.site-ws .auth-card { padding: var(--bk-space-7) var(--bk-space-7) var(--bk-space-6); box-shadow: var(--bk-shadow-md); }
.site-ws-name {
  display: block; margin-bottom: var(--bk-space-5); font-family: var(--bk-font-display);
  font-size: var(--bk-fs-md); font-weight: var(--bk-fw-bold); color: var(--bk-text); letter-spacing: -0.01em;
}
.site-ws .bk-powered { padding-bottom: 0; }
.site-ws .auth-sub a { text-decoration: underline; text-underline-offset: 2px; }
.site-ws-tel, .site-nowrap { white-space: nowrap; }
@media (max-width: 380px) {   /* fits a 420px-high embed on the smallest phones */
  .site-ws { padding: var(--bk-space-4) var(--bk-space-3) 0; }
  .site-ws .auth-card { padding: var(--bk-space-5) var(--bk-space-4) var(--bk-space-5); }
  .site-ws-name { margin-bottom: var(--bk-space-3); }
  .site-ws .site-badge { width: 40px; height: 40px; border-radius: 12px; margin-bottom: var(--bk-space-3); }
  .site-ws .site-badge .bk-icon { width: 20px; height: 20px; }
  .site-ws .auth-card h1 { font-size: var(--bk-fs-lg); }
  .site-ws .auth-sub { margin-bottom: var(--bk-space-1); }
  .site-ws .btn-primary { margin-top: var(--bk-space-4); }
  .site-ws .bk-powered { padding-top: var(--bk-space-3); }
}

/* --------------------------------------------------------------------------
   5. Home page: trial note, pricing, demo form, FAQ, testimonial, about
   -------------------------------------------------------------------------- */
#pricing, #demo { scroll-margin-top: 76px; }
/* sections on the same background follow on without a double gap */
.site-pricing + .site-demo, .site-demo + .site-faq, .site-demo + .site-about, .site-about + .site-faq { padding-top: 0; }
.site-hero-note { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text-2); }
.site-hero-demo { margin: var(--bk-space-2) 0 0; font-size: var(--bk-fs-sm); }
.site-hero-demo a { font-weight: var(--bk-fw-medium); color: var(--bk-brand-text); text-underline-offset: 3px; }

/* pricing: one card, price on the left, what's included on the right */
.site-price-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-width: 1000px; margin: 0 auto;
  background: var(--bk-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-xl);
  box-shadow: var(--bk-shadow-md); overflow: hidden;
}
.site-price-main { padding: var(--bk-space-8); }
.site-price-pill { margin: 0; }
.site-price-amount {
  margin: var(--bk-space-4) 0 var(--bk-space-2); font-family: var(--bk-font-display);
  font-size: clamp(30px, 4vw, 40px); font-weight: var(--bk-fw-heavy); line-height: 1.1;
  letter-spacing: -0.03em; color: var(--bk-text);
}
.site-price-note { margin: 0 0 var(--bk-space-2); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-muted); }
.site-price-sub { margin: 0; font-size: var(--bk-fs-base); line-height: var(--bk-lh-base); color: var(--bk-text-2); max-width: 30em; text-wrap: pretty; }
.site-price-cta { margin: var(--bk-space-6) 0 0; }
.site-price-cta .bk-btn { min-height: 48px; }
.site-price-side {
  padding: var(--bk-space-8); background: var(--bk-surface-3); border-left: 1px solid var(--bk-border-soft);
}
.site-price-side .bk-caps { margin: 0 0 var(--bk-space-4); }
.site-price-list { flex-direction: column; gap: var(--bk-space-3); margin: 0; font-size: var(--bk-fs-base); color: var(--bk-text); }
.site-price-list li { align-items: flex-start; gap: 10px; }
.site-price-list .bk-icon { margin-top: 3px; }

/* demo: words on the left, the form on the right, in one card */
.site-demo-card {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--bk-space-8);
  max-width: 1000px; margin: 0 auto; padding: var(--bk-space-8);
  background: var(--bk-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-xl);
  box-shadow: var(--bk-shadow-sm);
}
.site-demo-copy h2 {
  margin: 0; font-size: clamp(24px, 3vw, var(--bk-fs-2xl)); font-weight: var(--bk-fw-bold);
  line-height: var(--bk-lh-tight); letter-spacing: var(--bk-tracking-tight); color: var(--bk-text);
}
.site-demo-copy > p:not(.site-kicker) { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-md); line-height: var(--bk-lh-base); color: var(--bk-text-2); }
.site-demo-points { flex-direction: column; gap: var(--bk-space-2); margin-top: var(--bk-space-5); color: var(--bk-text-2); }
.site-demo-points a { font-weight: var(--bk-fw-medium); text-decoration: none; }
.site-demo-points li .bk-icon { color: var(--bk-success); }
.site-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-4) var(--bk-space-3); }
.site-demo-grid .auth-field { margin-top: 0; }
.site-demo-hint { margin: var(--bk-space-2) 0 0; }
.site-demo-form label {
  display: block; font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text); margin: 0 0 6px;
}
.site-opt { font-weight: var(--bk-fw-regular); color: var(--bk-muted); }
.site-demo-form input, .site-demo-form textarea {
  display: block; width: 100%; min-height: 46px; padding: 10px 13px;
  border: 1px solid var(--bk-field-border); border-radius: var(--bk-radius-sm);
  background: var(--bk-surface); color: var(--bk-text); font: inherit; font-size: 16px;
}
.site-demo-form textarea { min-height: 88px; resize: vertical; line-height: var(--bk-lh-base); }
.site-demo-form input:hover, .site-demo-form textarea:hover { border-color: var(--bk-field-border-hover); }
.site-demo-form input:focus, .site-demo-form textarea:focus { outline: none; border-color: var(--bk-brand); box-shadow: var(--bk-focus-ring); }
.site-demo-form [aria-invalid="true"] { border-color: var(--bk-danger); }
.site-demo-form .btn-primary { margin-top: var(--bk-space-5); }
.site-demo-done {
  grid-column: 2; align-self: center; text-align: center; padding: var(--bk-space-6);
  font-size: var(--bk-fs-md); font-weight: var(--bk-fw-medium); color: var(--bk-text); outline: none;
  animation: bk-rise-in var(--bk-dur-slow) var(--bk-ease) both;
}
.site-demo-done p { margin: 0; text-wrap: balance; }

/* FAQ: a quiet accordion */
.site-faq-list {
  max-width: 760px; margin: 0 auto; background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow-sm); overflow: hidden;
}
.site-faq-item + .site-faq-item { border-top: 1px solid var(--bk-border-soft); }
.site-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-4);
  min-height: 56px; padding: 14px var(--bk-space-6); cursor: pointer; list-style: none;
  font-size: var(--bk-fs-md); font-weight: var(--bk-fw-medium); color: var(--bk-text);
}
.site-faq-item summary::-webkit-details-marker { display: none; }
.site-faq-item summary::after {   /* a chevron that turns when open */
  content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-right: 4px;
  border: solid var(--bk-muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg);
  transition: transform var(--bk-dur-base) var(--bk-ease);
}
.site-faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--bk-brand-text); }
.site-faq-item summary:hover { background: var(--bk-surface-2); }
.site-faq-item summary:focus-visible { outline-offset: -2px; }
.site-faq-item p {
  margin: 0; padding: 0 var(--bk-space-6) var(--bk-space-5); font-size: var(--bk-fs-base);
  line-height: var(--bk-lh-loose); color: var(--bk-text-2); max-width: 62ch;
}
.site-faq-item[open] p { animation: bk-rise-in var(--bk-dur-base) var(--bk-ease) both; --bk-rise: 4px; }
.site-faq-more { margin: var(--bk-space-5) 0 0; text-align: center; font-size: var(--bk-fs-sm); color: var(--bk-muted); }
.site-faq-more a { font-weight: var(--bk-fw-medium); }

/* a workshop's words (only when content.json has one) */
.site-testimonial { padding-top: 0; }
.site-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.site-quote blockquote { margin: 0; }
.site-quote blockquote p {
  margin: 0; font-family: var(--bk-font-display); font-size: clamp(19px, 2.4vw, 24px); font-weight: var(--bk-fw-medium);
  line-height: var(--bk-lh-snug); color: var(--bk-text); text-wrap: balance;
}
.site-quote blockquote p::before { content: "\201C"; color: var(--bk-brand-text); }
.site-quote blockquote p::after { content: "\201D"; color: var(--bk-brand-text); }
.site-quote figcaption { margin-top: var(--bk-space-4); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-muted); }

/* who's behind it (only when content.json has it) */
.site-about { padding-bottom: 0; }
.site-about-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--bk-space-5); align-items: start;
  max-width: 760px; margin: 0 auto; padding: var(--bk-space-7);
  background: var(--bk-brand-tint); border-radius: var(--bk-radius-xl);
}
.site-about-mark { display: block; border-radius: 14px; }
.site-about h2 { margin: 0 0 var(--bk-space-2); font-size: var(--bk-fs-lg); font-weight: var(--bk-fw-bold); color: var(--bk-text); }
.site-about p { margin: 0; font-size: var(--bk-fs-base); line-height: var(--bk-lh-base); color: var(--bk-text-2); }
.site-about .site-about-contact { margin-top: var(--bk-space-3); font-weight: var(--bk-fw-medium); color: var(--bk-text); }
.site-about-contact a { text-decoration: none; }

@media (max-width: 900px) {
  .site-demo-card { grid-template-columns: 1fr; gap: var(--bk-space-6); padding: var(--bk-space-6); }
  .site-demo-done { grid-column: 1; }
}
@media (max-width: 720px) {
  .site-price-card { grid-template-columns: 1fr; }
  .site-price-main, .site-price-side { padding: var(--bk-space-6); }
  .site-price-side { border-left: 0; border-top: 1px solid var(--bk-border-soft); }
  .site-price-cta .bk-btn { width: 100%; }
}
@media (max-width: 640px) {
  .site-demo-card { padding: var(--bk-space-5); border-radius: var(--bk-radius-lg); }
  .site-demo-grid { grid-template-columns: 1fr; }
  .site-faq-item summary { padding: 14px var(--bk-space-4); font-size: var(--bk-fs-base); }
  .site-faq-item p { padding: 0 var(--bk-space-4) var(--bk-space-4); }
  .site-about-card { grid-template-columns: 1fr; padding: var(--bk-space-5); gap: var(--bk-space-3); }
  .site-about-mark { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   6. Reading pages: privacy, terms, help, desk download (views.docPage)
   -------------------------------------------------------------------------- */
.site-doc { min-height: 100vh; display: flex; flex-direction: column; background: var(--bk-bg); }
.site-doc-main { flex: 1; padding: var(--bk-space-9) 0 var(--bk-space-10); }
/* .site-legal-in keeps .site-container's width, so the words start on the logo's left edge */
.site-doc-head { max-width: 68ch; margin-bottom: var(--bk-space-8); }
.site-doc-head h1 {
  margin: 0; font-size: clamp(30px, 4.4vw, 42px); font-weight: var(--bk-fw-heavy); line-height: 1.1;
  letter-spacing: -0.03em; color: var(--bk-text);
}
.site-legal-updated { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-sm); color: var(--bk-muted); }
.site-doc-lede { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-md); line-height: var(--bk-lh-base); color: var(--bk-text-2); }

/* contents on the left (sticky), the words on the right */
.site-doc-body { display: grid; grid-template-columns: 240px minmax(0, 68ch); gap: var(--bk-space-9); align-items: start; }
.site-doc-body:not(:has(.site-doc-toc)) { grid-template-columns: minmax(0, 68ch); }
.site-doc-toc { position: sticky; top: 88px; font-size: var(--bk-fs-sm); }
.site-doc-toc .bk-caps { margin: 0 0 var(--bk-space-3); }
.site-doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bk-border); }
.site-doc-toc a {
  display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--bk-text-2); text-decoration: none; line-height: var(--bk-lh-snug);
}
.site-doc-toc a:hover { color: var(--bk-brand-text); border-left-color: var(--bk-brand); }

.site-doc-text { font-size: 16px; line-height: var(--bk-lh-loose); color: var(--bk-text-2); }
.site-doc-text section { scroll-margin-top: 88px; }
.site-doc-text section + section { margin-top: var(--bk-space-7); }
.site-doc-text h2 {
  margin: 0 0 var(--bk-space-3); font-size: var(--bk-fs-lg); font-weight: var(--bk-fw-bold);
  line-height: var(--bk-lh-tight); letter-spacing: -0.01em; color: var(--bk-text);
}
.site-doc-text p { margin: 0 0 var(--bk-space-3); text-wrap: pretty; overflow-wrap: anywhere; }
.site-doc-text a { font-weight: var(--bk-fw-medium); text-underline-offset: 2px; }
/* numbered headings on the legal pages, so people can say "section 6" */
.site-legal-text { counter-reset: legal; }
.site-legal-text section h2 { counter-increment: legal; }
.site-legal-text section h2::before { content: counter(legal) ". "; color: var(--bk-muted); font-variant-numeric: tabular-nums; }
.site-doc-also { margin-top: var(--bk-space-8) !important; padding-top: var(--bk-space-5); border-top: 1px solid var(--bk-border-soft); font-size: var(--bk-fs-sm); }

/* help */
.site-legal-in--wide .site-doc-head { max-width: 760px; }
.site-help-support {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bk-space-3) var(--bk-space-6);
  margin: 0 0 var(--bk-space-7); padding: var(--bk-space-5) var(--bk-space-6);
  background: var(--bk-brand-tint); border-radius: var(--bk-radius-lg);
}
.site-help-support p { margin: 0; font-size: var(--bk-fs-md); color: var(--bk-text); }
.site-help-support ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bk-space-2) var(--bk-space-5); }
.site-help-support li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--bk-fs-base); color: var(--bk-text-2); }
.site-help-support .bk-icon { color: var(--bk-brand-text); }
.site-help-support a { font-weight: var(--bk-fw-bold); text-decoration: none; }
.site-help-support a:hover { text-decoration: underline; }

.site-help-start {
  margin: 0 0 var(--bk-space-8); padding: var(--bk-space-6); background: var(--bk-surface);
  border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow-sm);
  scroll-margin-top: 88px;
}
.site-help-start-title { margin: 0 0 var(--bk-space-5); font-size: var(--bk-fs-lg); font-weight: var(--bk-fw-bold); color: var(--bk-text); }
.site-help-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bk-space-4); }
.site-help-steps li { display: flex; flex-direction: column; gap: 6px; font-size: var(--bk-fs-sm); line-height: var(--bk-lh-base); color: var(--bk-text-2); }
.site-help-steps .bk-hexstep { width: 32px; height: 28px; margin-bottom: 4px; font-size: var(--bk-fs-sm); }
.site-help-steps b { color: var(--bk-text); font-size: var(--bk-fs-base); line-height: var(--bk-lh-snug); }
.site-help-steps a { margin-top: auto; font-weight: var(--bk-fw-medium); text-decoration: none; }
.site-help-steps a:hover { text-decoration: underline; }

.site-help-toc { margin: 0 0 var(--bk-space-7); }
.site-help-toc .bk-caps { margin: 0 0 var(--bk-space-3); }
.site-help-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bk-space-2); }
.site-help-toc a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--bk-radius-pill);
  background: var(--bk-surface); border: 1px solid var(--bk-border); color: var(--bk-text-2);
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); text-decoration: none;
}
.site-help-toc a:hover { border-color: var(--bk-brand); color: var(--bk-brand-text); background: var(--bk-brand-tint); }
/* topics: two columns on mid-size screens, one on phones (860 px block), and from 1000 px
   one reading column in contents order with the contents list beside it (block below) */
.site-help-topics { columns: 2; column-gap: var(--bk-space-4); }
.site-help-topic {
  break-inside: avoid; margin: 0 0 var(--bk-space-4); display: block;
  padding: var(--bk-space-6); background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg); scroll-margin-top: 88px;
}
.site-help-topic:target { border-color: var(--bk-brand); box-shadow: 0 0 0 3px var(--bk-brand-tint); }
.site-help-topic h2 { margin: 0 0 var(--bk-space-3); font-size: var(--bk-fs-md); font-weight: var(--bk-fw-bold); line-height: var(--bk-lh-snug); color: var(--bk-text); }
.site-help-topic p { margin: 0 0 var(--bk-space-2); font-size: var(--bk-fs-base); line-height: var(--bk-lh-base); color: var(--bk-text-2); }
.site-help-topic .site-help-top { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-xs); }
.site-help-top a { color: var(--bk-muted); text-decoration: none; }
.site-help-top a:hover { color: var(--bk-brand-text); text-decoration: underline; }
@media (min-width: 1000px) {
  .site-legal-in--wide:has(> .site-help-topics) {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--bk-space-8); align-items: start;
  }
  .site-legal-in--wide:has(> .site-help-topics) > * { grid-column: 1 / -1; }
  .site-legal-in--wide > .site-help-toc { grid-column: 1; position: sticky; top: 88px; margin: 0; font-size: var(--bk-fs-sm); }
  .site-legal-in--wide > .site-help-topics {
    grid-column: 2; columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bk-space-4); max-width: 760px;
  }
  .site-legal-in--wide > .site-help-topics .site-help-topic { margin: 0; }
  /* the contents list sits alongside, so each topic doesn't need its own "Back to the top" */
  .site-legal-in--wide > .site-help-topics .site-help-top { display: none; }
  /* the first ten minutes: three across, then two, so each step's words have room */
  .site-help-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--bk-space-6); }
  /* the contents as a quiet list with a rule down its side, like the legal pages */
  .site-help-toc ul { display: block; border-left: 2px solid var(--bk-border); }
  .site-help-toc a {
    display: block; min-height: 0; padding: 6px 0 6px 14px; margin-left: -2px; border: 0; border-left: 2px solid transparent;
    border-radius: 0; background: none; color: var(--bk-text-2); line-height: var(--bk-lh-snug);
  }
  .site-help-toc a:hover { background: none; color: var(--bk-brand-text); border-left-color: var(--bk-brand); }
}

/* desk app download */
.site-download { max-width: 720px; }
.site-download-icon { display: block; width: 64px; height: 64px; margin-bottom: var(--bk-space-5); border-radius: 16px; box-shadow: var(--bk-shadow-md); }
.site-download-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bk-space-4); margin: var(--bk-space-6) 0 0; }
.site-download-cta .bk-btn { min-height: 50px; padding: 0 26px; }
.site-download-version { font-size: var(--bk-fs-sm); color: var(--bk-muted); }
.site-download-soon { margin: var(--bk-space-6) 0 0; display: block; font-size: var(--bk-fs-base); }
.site-download-soon a { font-weight: var(--bk-fw-bold); }
.site-download-h2 { margin: 0 0 var(--bk-space-5); font-size: var(--bk-fs-lg); font-weight: var(--bk-fw-bold); color: var(--bk-text); }
.site-download-steps { list-style: none; margin: 0; padding: 0; counter-reset: dl; }
.site-download-steps > li {
  counter-increment: dl; position: relative; padding: 0 0 var(--bk-space-6) 52px;
  font-size: var(--bk-fs-md); line-height: var(--bk-lh-base); color: var(--bk-text);
}
.site-download-steps > li::before {
  /* a hex nut, like .bk-hexstep */
  content: counter(dl); position: absolute; left: 0; top: -1px; width: 32px; height: 28px; clip-path: var(--bk-hex);
  display: grid; place-items: center; background: var(--bk-brand); color: var(--bk-on-brand);   /* solid, like the home and help pages */
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-bold); font-variant-numeric: tabular-nums; line-height: 1;
}
.site-download-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 33px; bottom: 6px; border-left: 2px dashed var(--bk-border-strong);
}
.site-download-note { margin: var(--bk-space-3) 0 0; font-size: var(--bk-fs-sm); color: var(--bk-muted); }
.site-download-note a { font-weight: var(--bk-fw-medium); }
/* the Windows warning, drawn small (always the Windows blue, in both themes) */
.site-smartscreen { margin: var(--bk-space-4) 0 0; max-width: 420px; }
.site-ss-box {
  padding: 18px 20px 16px; border-radius: var(--bk-radius-sm); background: #0F5CA8; color: #FFFFFF;
  font-family: "Segoe UI", var(--bk-font); box-shadow: var(--bk-shadow-md);
}
.site-ss-title { margin: 0 0 6px; font-size: 19px; font-weight: 600; line-height: 1.2; }
.site-ss-text { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; opacity: .92; }
.site-ss-link { margin: 0 0 14px; font-size: 12.5px; }
.site-ss-link span { text-decoration: underline; font-weight: 600; }
.site-ss-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.site-ss-run, .site-ss-dont { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; font-size: 12.5px; border: 1px solid rgba(255, 255, 255, .7); }
.site-ss-dont { background: #FFFFFF; color: #0F2238; }
.site-ss-tag {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%;
  background: var(--bk-amber); color: var(--bk-ink); font-size: 11.5px; font-weight: 800; font-family: var(--bk-font);
  box-shadow: 0 0 0 3px rgba(255, 178, 30, .35);
}
.site-ss-run .site-ss-tag { margin-left: 2px; }
.site-smartscreen figcaption { margin-top: var(--bk-space-2); font-size: var(--bk-fs-sm); color: var(--bk-text-2); }

@media (max-width: 1000px) {
  .site-help-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .site-doc-body { grid-template-columns: minmax(0, 1fr); gap: var(--bk-space-6); }
  .site-doc-toc { position: static; padding: var(--bk-space-4) var(--bk-space-5); background: var(--bk-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg); }
  .site-doc-toc ol { border-left: 0; columns: 2; column-gap: var(--bk-space-5); }
  .site-doc-toc a { padding: 6px 0; margin: 0; border: 0; }
  .site-help-topics { columns: 1; }
}
@media (max-width: 640px) {
  .site-doc-main { padding: var(--bk-space-7) 0 var(--bk-space-9); }
  .site-doc-head { margin-bottom: var(--bk-space-6); }
  .site-doc-toc ol { columns: 1; }
  .site-help-steps { grid-template-columns: 1fr; gap: var(--bk-space-5); }
  .site-help-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--bk-space-3); align-items: start; }
  .site-help-steps .bk-hexstep { grid-row: span 3; margin: 0; }
  .site-help-start, .site-help-topic { padding: var(--bk-space-5); }
  .site-help-support { padding: var(--bk-space-4) var(--bk-space-5); }
  .site-download-steps > li { padding-left: 46px; font-size: var(--bk-fs-base); }
  .site-download-cta .bk-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. Workshop pages: privacy notice and foot (the workshop's colour, light only)
   -------------------------------------------------------------------------- */
.site-ws-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 6px;
  padding: var(--bk-space-4) 0 var(--bk-space-2); font-size: var(--bk-fs-xs); color: var(--bk-muted);
}
.site-ws-foot .bk-powered { padding: 8px 6px; border-radius: var(--bk-radius-pill); }
.site-ws-foot .bk-powered:hover { background: var(--bk-surface-2); }
.site-ws-privacy { padding: 8px 6px; color: var(--bk-muted); font-weight: var(--bk-fw-medium); text-decoration: none; border-radius: var(--bk-radius-pill); }
.site-ws-privacy:hover { color: var(--bk-text); text-decoration: underline; }
.site-ws-dot { opacity: .6; }

.site-ws-doc { min-height: 100vh; padding: var(--bk-space-6) var(--bk-space-4) var(--bk-space-2); }
.site-ws-paper {
  max-width: 760px; margin: 0 auto; padding: var(--bk-space-7) var(--bk-space-8) var(--bk-space-8);
  background: var(--bk-surface); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-xl);
  box-shadow: var(--bk-shadow-sm); border-top: 4px solid var(--ws);
}
.site-ws-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 var(--bk-space-4) -8px; padding: 0 12px 0 8px;
  border-radius: var(--bk-radius-pill); color: var(--bk-brand-text); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); text-decoration: none;
}
.site-ws-back:hover { background: var(--bk-brand-tint); }
.site-flip { transform: scaleX(-1); }
.site-ws-paper .site-ws-name { margin-bottom: var(--bk-space-1); color: var(--bk-brand-text); font-size: var(--bk-fs-sm); }
.site-ws-paper h1 { margin: 0 0 var(--bk-space-3); font-size: var(--bk-fs-2xl); font-weight: var(--bk-fw-heavy); letter-spacing: -0.025em; color: var(--bk-text); }
.site-legal-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 var(--bk-space-6); font-size: var(--bk-fs-sm); color: var(--bk-muted); }
.site-ws-paper .site-doc-text { font-size: var(--bk-fs-base); }
.site-ws-paper .site-doc-text section + section { margin-top: var(--bk-space-6); }
.site-ws-paper .site-doc-text h2 { font-size: var(--bk-fs-md); }
.site-ws-backline { margin: var(--bk-space-7) 0 0; }
.site-ws-backline .btn-primary { display: inline-flex; width: auto; margin: 0; }
@media (max-width: 640px) {
  .site-ws-doc { padding: 0; background: var(--bk-surface); }
  .site-ws-paper { border: 0; border-top: 4px solid var(--ws); border-radius: 0; box-shadow: none; padding: var(--bk-space-5) var(--bk-space-4) var(--bk-space-6); }
  .site-ws-paper h1 { font-size: var(--bk-fs-xl); }
  .site-ws-backline .btn-primary { display: flex; width: 100%; }
}

/* Small headings (under 20 px) in the Text face: the Display face reads cramped that small */
.site-help-topic h2, .site-help-start-title, .site-doc-text h2, .site-about h2,
.site-download-h2, .site-ws-name { font-family: var(--bk-font); letter-spacing: 0; }

/* --------------------------------------------------------------------------
   8. Printing a reading page: just the words
   -------------------------------------------------------------------------- */
@media print {
  .site-nav, .site-footer, .site-skip, .site-doc-toc, .site-help-toc, .site-help-top, .site-ws-foot,
  .site-ws-back, .site-ws-backline, .site-download-cta { display: none !important; }
  .site-doc, .site-ws-doc, body { background: #FFFFFF !important; color: #000000; }
  .site-doc-main { padding: 0; }
  .site-doc-body { display: block; }
  .site-doc-text { font-size: 11pt; color: #000000; }
  .site-doc-text h2, .site-help-topic { break-after: avoid; break-inside: avoid; }
  .site-help-topics { display: block; columns: 1; }
  .site-help-topic, .site-ws-paper, .site-help-start { border: 0; box-shadow: none; padding: 0; margin-bottom: 14pt; }
  a { color: inherit; }
}

/* Dark mode (written twice, like brand.css):
   - the amber glow turns muddy on dark, so it becomes a faint teal one
   - the hero picture swaps to its dark drawing (hero-booking-dark.svg), so no light patch sits on the page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.bk-light-only) .site-landing,
  :root:not([data-theme="light"]):not(.bk-light-only) .site-auth { --site-glow: color-mix(in srgb, var(--bk-brand) 6%, transparent); }
  :root:not([data-theme="light"]):not(.bk-light-only) .site-hero-frame > img:not(.site-hero-img--dark) { display: none; }
  :root:not([data-theme="light"]):not(.bk-light-only) .site-hero-frame > .site-hero-img--dark { display: block; }
}
:root[data-theme="dark"]:not(.bk-light-only) .site-landing,
:root[data-theme="dark"]:not(.bk-light-only) .site-auth { --site-glow: color-mix(in srgb, var(--bk-brand) 6%, transparent); }
:root[data-theme="dark"]:not(.bk-light-only) .site-hero-frame > img:not(.site-hero-img--dark) { display: none; }
:root[data-theme="dark"]:not(.bk-light-only) .site-hero-frame > .site-hero-img--dark { display: block; }