/* HUCE Booking showcase. Loaded only by /booking.

   The screens on this page are screenshots of HUCE Booking actually running, taken from a demo
   tenant called Lyngstrand with real shifts and real bookings in it. They are retaken by the
   script in the booking repository's scratchpad when the product's screens change; there is
   nothing here that imitates the software in CSS, because an imitation is the one thing a
   prospect can tell at a glance.

   --brand-ink / --brand-accent / --brand-paper are set inline on the few elements that stand in
   for a tenant's own colours: they are the example customer's, not HUCE's, which is the point
   being made wherever they appear. */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.bk-hero {
  color: #fff;
  /* The same ground as the front page. A photograph of a building reads as somebody else's
     product, and a literal subject behind a screenshot of software is two pictures fighting;
     this one is light and colour and nothing else, so the calendar in front of it is the only
     thing with edges. */
  background: #111719 url('/images/huce-quiet-color.jpg') center center / cover no-repeat;
  padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(4.5rem, 8vw, 7rem);
  isolation: isolate;
}
.bk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: auto;
  height: auto;
  /* Darker towards the foot than the front page's, because a screenshot sits there and its own
     pale chrome needs something to sit against. */
  background: linear-gradient(90deg, rgba(7,17,23,.35), rgba(7,17,23,.1) 56%, transparent),
              linear-gradient(0deg, rgba(7,17,23,.8), rgba(7,17,23,.25) 45%, transparent 70%);
}
.bk-hero-inner { position: relative; }
.bk-hero-copy { max-width: 660px; }
.bk-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #cfdcd9;
  margin-bottom: 1.6rem;
}
.bk-status .solution-icon { width: 26px; height: 26px; color: #9ecbbd; }
.bk-status .status-dot { margin: 0 .5rem 0 .9rem; }
.bk-hero h1 {
  /* .subpage-hero h1 sets the foreground colour for the light subpages; this one is over a photo. */
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.045em;
  margin: 0;
}
.bk-hero-lede {
  margin: 1.5rem 0 2.2rem;
  max-width: 560px;
  color: #dee5e4;
  font-size: 1.05rem;
  line-height: 1.75;
}
.bk-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; }
.bk-hero .btn-huce-primary { background: #f5f6f2; color: #172125; border-color: #f5f6f2; }
.bk-hero .btn-huce-primary:hover { background: #dce7df; border-color: #dce7df; }

/* ── The fictional customer ───────────────────────────────────────────────── */
.bk-disclosure {
  margin: 1.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  line-height: 1.65;
  color: #6c7974;
}
.bk-example-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.4rem 2.6rem;
  background: var(--brand-paper);
  border: 1px solid #e7ded0;
  color: var(--brand-ink);
}
.bk-example-id { display: flex; flex-direction: column; gap: .7rem; }
.bk-wordmark {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-ink, #172125);
}
.bk-wordmark.small { font-size: .82rem; letter-spacing: .26em; }
.bk-example-kind { font-size: .85rem; color: #7b7065; }
.bk-figures { display: flex; flex-wrap: wrap; gap: 2.8rem; margin: 0; }
.bk-figures div { display: flex; flex-direction: column; gap: .3rem; }
.bk-figures dt { font-size: 2.1rem; font-weight: 300; letter-spacing: -.04em; color: var(--brand-accent); }
.bk-figures dd { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #8a7d70; }

/* ── The repeating two-column rhythm ──────────────────────────────────────── */
.bk-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.bk-split-copy h2 { margin: 0 0 1.2rem; }
.bk-split-copy .section-lede { margin: 0; font-size: 1.02rem; line-height: 1.8; color: #5d6a64; }
.bk-note {
  margin: 1.5rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  line-height: 1.75;
  color: #67736d;
}
.bk-points { margin: 0; padding: 0; list-style: none; }

/* The desk section is the dark band in the middle of the page; the screen it describes is the one
   already standing in the hero, so here there are only the three things worth saying about it. */
.bk-desk { background: #172b2c; color: #e8efec; }
.bk-desk h2 { color: #f4f8f5; }
.bk-desk .section-kicker { color: #9fbcb6; }
.bk-desk .section-lede { color: #b9cbca; }
.bk-desk .bk-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin-top: 1rem;
}
.bk-desk .bk-points li {
  padding-top: 1.4rem;
  border-top: 1px solid #2f4544;
  color: #b9cbca;
  font-size: .92rem;
  line-height: 1.72;
}

/* ── Screenshots of the product ───────────────────────────────────────────── */
.bk-shot { margin: 0; }
.bk-shot img, .bk-hero-shot img, .bk-strip img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(23, 33, 37, .1);
  border-radius: 4px;
  /* The screens are light and sit on light sections; the lift is what separates them. */
  box-shadow: 0 30px 60px -35px rgba(23, 45, 40, .38);
}
/* A console screen is 1360 wide and loses its point when squeezed into half a column. */
.bk-shot.wide { width: 100%; }

.bk-hero-shot { margin: 3.5rem 0 0; }
.bk-hero-shot img { border-color: rgba(255, 255, 255, .14); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); }

/* The three steps of the booking page, side by side. The screens are naturally different heights
   - a month grid is taller than a row of times - so they are cropped to one shape from the top,
   where the step, the heading and the choice all are. Ragged captions would read as three
   unrelated pictures rather than one sequence. */
.bk-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.bk-strip figure { margin: 0; }
.bk-strip img { aspect-ratio: 11 / 7; object-fit: cover; object-position: top center; }
.bk-strip figcaption {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1rem;
  font-size: .85rem;
  color: #5d6a64;
}
.bk-strip figcaption span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #c8d2cb;
  font-size: .7rem;
}

/* A band of words between two screens, so the page breathes. */
.bk-companies { background: #f1f4f0; text-align: center; }
.bk-companies .narrow-band { max-width: 760px; }
.bk-companies .section-lede { margin: 1.4rem auto 0; font-size: 1.02rem; line-height: 1.8; color: #5d6a64; }
.bk-companies h2 { margin: 0; }

/* Two brands, one product */
.bk-brand { background: #f1f4f0; }
.bk-brand-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bk-brand-card {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 1.8rem 1.5rem;
  background: var(--brand-paper);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 3px;
}
.bk-brand-card .bk-wordmark { color: var(--brand-ink); }
.bk-brand-btn {
  align-self: flex-start;
  padding: .6rem 1.1rem;
  font-size: .78rem;
  color: #fff;
  background: var(--brand-accent);
  border-radius: 2px;
}
.bk-brand-swatches { display: flex; gap: .4rem; margin-top: auto; }
.bk-brand-swatches span { width: 1.6rem; height: 1.6rem; border-radius: 2px; }
.bk-brand-swatches span:nth-child(1) { background: var(--brand-ink); }
.bk-brand-swatches span:nth-child(2) { background: var(--brand-accent); }
.bk-brand-swatches span:nth-child(3) { background: var(--brand-paper); border: 1px solid rgba(0,0,0,.12); }

/* Where the data lives */
.bk-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bk-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .9rem;
  row-gap: .3rem;
  padding: 1.6rem 1.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.bk-option strong { font-size: 1.02rem; font-weight: 500; }
.bk-option > span:last-child { grid-column: 2; font-size: .85rem; color: #7b857f; }
.bk-radio {
  grid-row: span 2;
  align-self: start;
  margin-top: .25rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1px solid #c8d2cb;
}
.bk-option.chosen { border-color: #4a7e6e; }
.bk-option.chosen .bk-radio { border: 5px solid #4a7e6e; }

/* ── The price list ───────────────────────────────────────────────────────── */
.bk-prices { background: #f1f4f0; }
.bk-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.bk-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2rem 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* The middle plan is the one most people should land on, so it is the one that stands up. */
.bk-plan.featured { border-color: #2b3c37; box-shadow: 0 30px 55px -40px rgba(23, 45, 40, .55); }
.bk-plan-flag {
  position: absolute;
  top: -.7rem;
  left: 2rem;
  padding: .25rem .7rem;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: #2b3c37;
  border-radius: 2px;
}
.bk-plan h3 { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.bk-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; }
.bk-plan-price strong { font-size: 2rem; font-weight: 400; letter-spacing: -.04em; color: #172125; }
.bk-plan-price span { font-size: .84rem; color: #77837c; }
.bk-plan-for { margin: .9rem 0 0; font-size: .86rem; line-height: 1.6; color: #67736d; min-height: 2.7em; }

.bk-plan-lines { margin: 1.6rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid #e7ebe6; list-style: none; }
.bk-plan-lines li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  column-gap: .7rem;
  padding: .55rem 0;
  font-size: .88rem;
  line-height: 1.45;
}
.bk-plan-mark { color: #4a7e6e; font-size: .8rem; line-height: 1.5; }
.bk-plan-lines .optional .bk-plan-mark,
.bk-plan-lines .absent .bk-plan-mark { color: #b3bcb6; }
.bk-plan-lines .absent .bk-plan-label { color: #9aa49e; }
.bk-plan-note { grid-column: 2; font-size: .74rem; color: #8b958f; margin-top: .15rem; }

.bk-plan-cta {
  margin-top: auto;
  padding-top: 1.8rem;
}
.bk-plan-cta {
  display: block;
  margin-top: auto;
  padding: .85rem 1rem;
  text-align: center;
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
  color: #172125;
  background: #eef1ec;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease;
}
.bk-plan-cta:hover { background: #dce7df; color: #172125; }
.bk-plan.featured .bk-plan-cta { color: #fff; background: #2b3c37; }
.bk-plan.featured .bk-plan-cta:hover { background: #3c524c; color: #fff; }
/* The list above pushes the button down, so plans of different length still line their buttons up. */
.bk-plan-lines { flex: 1; }

.bk-plan-extras, .bk-plan-vat { margin: 2rem auto 0; max-width: 760px; text-align: center; }
.bk-plan-extras { font-size: .88rem; line-height: 1.7; color: #5d6a64; }
.bk-plan-vat { margin-top: .6rem; font-size: .78rem; color: #8b958f; }

/* Capability grids */
.bk-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.bk-capability { padding-top: 1.4rem; border-top: 1px solid #cdd5ce; }
.bk-capability h3 { margin: 0 0 .9rem; font-size: 1.08rem; font-weight: 500; letter-spacing: -.02em; }
.bk-capability p { margin: 0; font-size: .89rem; line-height: 1.72; color: #606b6d; }
.bk-groundwork { background: #142024; color: #cfdad8; }
.bk-groundwork h2 { color: #f2f6f4; }
.bk-groundwork .section-kicker { color: #8fa6a3; }
.bk-capability.quiet { border-color: #2c3c40; }
.bk-capability.quiet h3 { color: #eef3f1; }
.bk-capability.quiet p { color: #a8b8b6; }

/* ── Narrower screens ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bk-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .bk-example-band { padding: 2rem; }
  .bk-figures { gap: 2rem; }
}

@media (max-width: 1040px) {
  .bk-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .bk-plan-for { min-height: 0; }
}

@media (max-width: 1000px) {
  /* Three console screens across is three unreadable console screens. */
  .bk-strip { grid-template-columns: 1fr; gap: 2.5rem; max-width: 620px; }
  .bk-desk .bk-points { grid-template-columns: 1fr; gap: 0; }
  .bk-desk .bk-points li { padding: 1.2rem 0; }
}

@media (max-width: 900px) {
  .bk-split-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* The screen always follows the words that explain it, whatever side it sits on wide. */
  .bk-split-grid.reversed .bk-split-copy { order: -1; }
  .bk-options, .bk-brand-pair { grid-template-columns: 1fr; }
  .bk-hero-shot { margin-top: 2.5rem; }
}

@media (max-width: 700px) {
  .bk-capability-grid { grid-template-columns: 1fr; }
  .bk-figures { width: 100%; justify-content: space-between; gap: 1.2rem; }
  .bk-figures dt { font-size: 1.7rem; }
}