/* ============================================================
   lm-bookings-guest.css

   Guest "How bookings work" promo page (bookings-guest-promo phase,
   2026-05-22). Shown when a logged-out visitor clicks Bookings in the
   sidebar; logged-in users get the real bookings list instead.

   Fully namespaced: every rule is scoped under `.lmbk-page`, every class
   carries the `lmbk-` prefix, and all design tokens are self-contained
   `--bk-*` custom properties declared on `.lmbk-page`. Nothing leaks into
   or out of the global theme. No global element resets (* / html / body /
   bare <a>) and no site nav/footer rules live here — the page renders
   inside the normal site chrome.
   ============================================================ */

.lmbk-page {
  --bk-primary: #0f6f4f;
  --bk-primary-strong: #0a5439;
  --bk-primary-text: #0a5439;
  --bk-primary-soft: #f3f8f5;
  --bk-primary-soft-2: #dcebe2;
  --bk-brand: #00363f;
  --bk-brand-soft: #e8eef0;
  --bk-bg: #ffffff;
  --bk-card: #ffffff;
  --bk-canvas: #f7f8fa;
  --bk-surface: #f8fafc;
  --bk-text: #0f172a;
  --bk-text-secondary: #475569;
  --bk-muted: #64748b;
  --bk-muted-2: #94a3b8;
  --bk-border: #e2e8f0;
  --bk-border-2: #eef2f6;
  --bk-navy: #0F172A;
  --bk-r-card: 14px;
  --bk-r-btn: 8px;
  --bk-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bk-font-serif: "Instrument Serif", "Iowan Old Style", Palatino, serif;
  --bk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bk-shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --bk-shadow-lift: 0 18px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);

  font-family: var(--bk-font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bk-text);
  background: var(--bk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lmbk-page * { box-sizing: border-box; }
/* Plain content links only. Buttons (.lmbk-btn*) are anchors too, so they get
   their own higher-specificity colour rules below — otherwise this green link
   colour would paint the button labels green (invisible on the green button). */
.lmbk-page a:not(.lmbk-btn) { color: var(--bk-primary); text-decoration: none; }
.lmbk-page a:not(.lmbk-btn):hover { text-decoration: underline; }

/* Headings render their colour explicitly (do not rely on inheritance — the
   Bootstrap reset can set a heading colour that wins over an inherited value). */
.lmbk-page h1, .lmbk-page h2, .lmbk-page h3, .lmbk-page h4 { color: var(--bk-text); }

.lmbk-wide { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 767px) { .lmbk-wide { padding: 0 20px; } }

/* ---------- Buttons ---------- */
.lmbk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font: 600 14px/1 var(--bk-font-sans);
  height: 44px;
  padding: 0 20px;
  border-radius: var(--bk-r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lmbk-btn:hover { text-decoration: none; }
.lmbk-btn-primary { background: var(--bk-primary); color: #fff; }
.lmbk-btn-primary:hover { background: var(--bk-primary-strong); color: #fff; }
.lmbk-btn-ghost { background: var(--bk-card); color: var(--bk-text); border-color: var(--bk-border); }
.lmbk-btn-ghost:hover { background: var(--bk-surface); border-color: #c9d3df; color: var(--bk-text); }
.lmbk-btn-dark { background: var(--bk-navy); color: #fff; }
.lmbk-btn-dark:hover { background: #0b1322; color: #fff; }
.lmbk-btn-ghost-dark {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.lmbk-btn-ghost-dark:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---------- Hero ---------- */
.lmbk-hero {
  padding: 56px 0 56px;
  border-bottom: 1px solid var(--bk-border-2);
}
.lmbk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.lmbk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--bk-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-primary);
}
.lmbk-eyebrow .lmbk-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--bk-primary);
  box-shadow: 0 0 0 4px var(--bk-primary-soft);
}
.lmbk-hero h1 {
  font: 500 50px/1.05 var(--bk-font-sans);
  letter-spacing: -0.025em;
  margin: 18px 0 22px;
  text-wrap: balance;
}
.lmbk-hero h1 em {
  font-family: var(--bk-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.lmbk-lead {
  font: 400 18px/1.6 var(--bk-font-sans);
  color: var(--bk-text-secondary);
  margin: 0 0 28px;
  max-width: 560px;
  text-wrap: pretty;
}
.lmbk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lmbk-actions .lmbk-btn { height: 48px; padding: 0 22px; font-size: 14.5px; }
.lmbk-trust-row {
  margin-top: 32px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--bk-border-2);
}
.lmbk-trust-row .lmbk-item {
  display: flex; align-items: center; gap: 8px;
  font: 500 12.5px/1.3 var(--bk-font-sans);
  color: var(--bk-text-secondary);
}
.lmbk-trust-row .lmbk-item svg { color: var(--bk-primary); flex: none; }
.lmbk-trust-row .lmbk-item b { color: var(--bk-text); font-weight: 600; }

@media (max-width: 900px) {
  .lmbk-hero { padding: 40px 0 40px; }
  .lmbk-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .lmbk-hero h1 { font-size: 40px; }
  .lmbk-lead { font-size: 16.5px; }
}
@media (max-width: 540px) {
  .lmbk-hero h1 { font-size: 32px; }
  .lmbk-actions .lmbk-btn { width: 100%; }
}

/* ---------- Image placeholders ---------- */
.lmbk-img {
  position: relative;
  width: 100%;
  border-radius: var(--bk-r-card);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #eef4f0 0 14px, #e6efea 14px 28px);
  border: 1px solid var(--bk-primary-soft-2);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.lmbk-img::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 100%);
  pointer-events: none;
}
.lmbk-img-meta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 18px;
  text-align: center;
}
.lmbk-img-meta .lmbk-tag {
  font: 700 10.5px/1 var(--bk-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-primary-strong);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--bk-primary-soft-2);
  padding: 6px 10px;
  border-radius: 999px;
}
.lmbk-img-meta .lmbk-label {
  font: 600 14px/1.4 var(--bk-font-sans);
  color: var(--bk-text);
  max-width: 280px;
  text-wrap: pretty;
}
.lmbk-img-meta .lmbk-ratio {
  font: 500 11.5px/1 var(--bk-font-mono);
  color: var(--bk-muted);
}
.lmbk-img.lmbk-r-hero { aspect-ratio: 4 / 5; }
.lmbk-img.lmbk-r-shot { aspect-ratio: 21 / 9; }

/* Real photo in the slot: show the whole image (no crop). */
.lmbk-img.has-photo { aspect-ratio: auto; background: none; }
.lmbk-img.has-photo::before { display: none; }
.lmbk-img.has-photo picture { display: contents; }
.lmbk-photo { display: block; width: 100%; height: auto; }
/* Product-shot slot now carries a baked 21:9 composition — drop the dashed
   placeholder frame. */
.lmbk-step-illu .lmbk-img.lmbk-r-shot.has-photo { border: none; }

.lmbk-hero-img-wrap { position: relative; }
.lmbk-hero-img-wrap .lmbk-img { box-shadow: var(--bk-shadow-lift); }
.lmbk-hero-img-wrap .lmbk-chip {
  position: absolute;
  bottom: 18px; left: 18px;
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 24px -8px rgba(15,23,42,0.18);
}
.lmbk-hero-img-wrap .lmbk-chip .lmbk-av {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--bk-primary-soft);
  border: 1px solid var(--bk-primary-soft-2);
  color: var(--bk-primary);
  display: grid; place-items: center;
  flex: none;
}
.lmbk-hero-img-wrap .lmbk-chip .lmbk-body {
  font: 500 12.5px/1.4 var(--bk-font-sans);
  color: var(--bk-text);
}
.lmbk-hero-img-wrap .lmbk-chip .lmbk-body .lmbk-meta {
  font: 500 11px/1.2 var(--bk-font-mono);
  color: var(--bk-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.lmbk-hero-img-wrap .lmbk-chip .lmbk-pill {
  font: 600 10.5px/1 var(--bk-font-sans);
  background: var(--bk-primary-soft);
  color: var(--bk-primary-text);
  border: 1px solid var(--bk-primary-soft-2);
  padding: 5px 9px;
  border-radius: 999px;
}

/* ---------- Sections ---------- */
.lmbk-section { padding: 72px 0; }
.lmbk-section.lmbk-tight { padding: 56px 0; }
@media (max-width: 700px) {
  .lmbk-section { padding: 48px 0; }
  .lmbk-section.lmbk-tight { padding: 40px 0; }
}
.lmbk-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  margin-bottom: 40px;
  align-items: end;
}
.lmbk-section-head .lmbk-lhs .lmbk-eyebrow {
  font: 700 11px/1 var(--bk-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-primary);
}
.lmbk-section-head h2 {
  font: 500 36px/1.1 var(--bk-font-sans);
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  text-wrap: balance;
}
.lmbk-section-head h2 em {
  font-family: var(--bk-font-serif);
  font-style: italic;
  font-weight: 400;
}
.lmbk-section-head .lmbk-rhs p {
  font: 400 16px/1.6 var(--bk-font-sans);
  color: var(--bk-text-secondary);
  margin: 0;
  text-wrap: pretty;
}
.lmbk-section-head .lmbk-rhs strong { color: var(--bk-text); font-weight: 600; }
@media (max-width: 800px) {
  .lmbk-section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .lmbk-section-head h2 { font-size: 28px; }
}

/* ---------- Steps ---------- */
.lmbk-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.lmbk-step {
  position: relative;
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-card);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.lmbk-step:hover { border-color: var(--bk-primary-soft-2); }
.lmbk-step .lmbk-head {
  display: flex; align-items: center; justify-content: space-between;
}
.lmbk-step .lmbk-num {
  font: 700 12px/1 var(--bk-font-mono);
  letter-spacing: 0.08em;
  color: var(--bk-muted);
  text-transform: uppercase;
}
.lmbk-step .lmbk-ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bk-primary-soft);
  border: 1px solid var(--bk-primary-soft-2);
  color: var(--bk-primary);
  display: grid; place-items: center;
}
.lmbk-step h3 {
  font: 600 17px/1.3 var(--bk-font-sans);
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
.lmbk-step p {
  margin: 0;
  font: 400 13.5px/1.55 var(--bk-font-sans);
  color: var(--bk-text-secondary);
  text-wrap: pretty;
}
.lmbk-step .lmbk-footnote {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--bk-border-2);
  display: flex; align-items: center; gap: 6px;
  font: 500 11.5px/1.4 var(--bk-font-mono);
  color: var(--bk-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lmbk-step .lmbk-footnote svg { color: var(--bk-primary); flex: none; }

.lmbk-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--bk-primary-soft-2);
  border-right: 1.5px solid var(--bk-primary-soft-2);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
  pointer-events: none;
}
.lmbk-step:last-child::after { display: none; }

@media (max-width: 1000px) {
  .lmbk-steps { grid-template-columns: 1fr 1fr; }
  .lmbk-step:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .lmbk-steps { grid-template-columns: 1fr; }
  .lmbk-step::after { display: none; }
}

.lmbk-step-illu {
  margin-top: 22px;
  position: relative;
  background: var(--bk-canvas);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-card);
  padding: 8px;
}
.lmbk-step-illu .lmbk-img.lmbk-r-shot { border: 1px dashed var(--bk-primary-soft-2); }

/* ---------- Trust / safety band ---------- */
.lmbk-trust {
  background: var(--bk-canvas);
  border-top: 1px solid var(--bk-border-2);
  border-bottom: 1px solid var(--bk-border-2);
}
.lmbk-escrow-flow {
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-card);
  padding: 28px;
  margin-bottom: 22px;
  box-shadow: var(--bk-shadow-sm);
}
.lmbk-escrow-flow .lmbk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.lmbk-escrow-flow .lmbk-head h3 {
  font: 600 18px/1.2 var(--bk-font-sans);
  letter-spacing: -0.01em;
  margin: 0;
}
.lmbk-escrow-flow .lmbk-head .lmbk-meta {
  font: 500 11px/1 var(--bk-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-muted);
}
.lmbk-flow-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.lmbk-flow-node {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-2);
  border-radius: 10px;
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.lmbk-flow-node.lmbk-active {
  background: var(--bk-primary-soft);
  border-color: var(--bk-primary-soft-2);
}
.lmbk-flow-node .lmbk-step-mono {
  font: 700 10px/1 var(--bk-font-mono);
  letter-spacing: 0.06em;
  color: var(--bk-muted);
  text-transform: uppercase;
}
.lmbk-flow-node .lmbk-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  color: var(--bk-text-secondary);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.lmbk-flow-node.lmbk-active .lmbk-ic { background: var(--bk-card); border-color: var(--bk-primary-soft-2); color: var(--bk-primary); }
.lmbk-flow-node .lmbk-label {
  font: 600 13.5px/1.3 var(--bk-font-sans);
  color: var(--bk-text);
}
.lmbk-flow-node .lmbk-sub {
  font: 400 12px/1.4 var(--bk-font-sans);
  color: var(--bk-muted);
}
.lmbk-flow-arrow {
  display: grid; place-items: center;
  color: var(--bk-muted-2);
  padding: 0 8px;
}
.lmbk-flow-arrow svg { display: block; }
@media (max-width: 900px) {
  .lmbk-flow-track { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
  .lmbk-flow-arrow { transform: rotate(90deg); padding: 4px 0; }
}

.lmbk-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.lmbk-pillar {
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-card);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.lmbk-pillar .lmbk-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bk-primary-soft);
  border: 1px solid var(--bk-primary-soft-2);
  color: var(--bk-primary);
  display: grid; place-items: center;
}
.lmbk-pillar h4 {
  font: 600 15px/1.3 var(--bk-font-sans);
  letter-spacing: -0.005em;
  margin: 4px 0 0;
}
.lmbk-pillar p {
  margin: 0;
  font: 400 13px/1.55 var(--bk-font-sans);
  color: var(--bk-text-secondary);
}
@media (max-width: 900px) { .lmbk-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .lmbk-pillars { grid-template-columns: 1fr; } }

/* ---------- For brands / for talent ---------- */
.lmbk-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) { .lmbk-sides { grid-template-columns: 1fr; } }

.lmbk-side-card {
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-card);
  padding: 28px 28px 26px;
  display: flex; flex-direction: column;
  position: relative;
}
.lmbk-side-card.lmbk-brand {
  background: linear-gradient(180deg, var(--bk-card) 0%, var(--bk-brand-soft) 100%);
  border-color: #cad7db;
}
.lmbk-side-card.lmbk-talent {
  background: linear-gradient(180deg, var(--bk-card) 0%, var(--bk-primary-soft) 100%);
  border-color: var(--bk-primary-soft-2);
}
.lmbk-side-card .lmbk-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bk-border-2);
  margin-bottom: 20px;
}
.lmbk-side-card.lmbk-brand .lmbk-head { border-bottom-color: #cad7db; }
.lmbk-side-card.lmbk-talent .lmbk-head { border-bottom-color: var(--bk-primary-soft-2); }
.lmbk-side-card .lmbk-head .lmbk-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
}
.lmbk-side-card.lmbk-brand .lmbk-head .lmbk-ic { color: var(--bk-brand); border-color: #cad7db; }
.lmbk-side-card.lmbk-talent .lmbk-head .lmbk-ic { color: var(--bk-primary); border-color: var(--bk-primary-soft-2); }
.lmbk-side-card .lmbk-head .lmbk-tagline {
  font: 700 11px/1 var(--bk-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-muted);
}
.lmbk-side-card.lmbk-brand .lmbk-head .lmbk-tagline { color: var(--bk-brand); }
.lmbk-side-card.lmbk-talent .lmbk-head .lmbk-tagline { color: var(--bk-primary-text); }
.lmbk-side-card h3 {
  font: 600 22px/1.25 var(--bk-font-sans);
  letter-spacing: -0.015em;
  margin: 4px 0 0;
}
.lmbk-side-card .lmbk-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.lmbk-side-card .lmbk-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 14px/1.5 var(--bk-font-sans);
  color: var(--bk-text);
}
.lmbk-side-card .lmbk-list li b { font-weight: 600; }
.lmbk-side-card .lmbk-list li .lmbk-ck {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--bk-primary-soft);
  border: 1px solid var(--bk-primary-soft-2);
  color: var(--bk-primary);
  display: grid; place-items: center;
  margin-top: 1px;
}
.lmbk-side-card.lmbk-brand .lmbk-list li .lmbk-ck { background: var(--bk-brand-soft); border-color: #cad7db; color: var(--bk-brand); }
.lmbk-side-card .lmbk-foot {
  /* Push the divider + CTA to the bottom of the card so both cards' footers
     line up regardless of how many bullets each list has. min 24px keeps it
     off the last bullet on the taller card. */
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--bk-border-2);
}
/* Breathing room above the footer divider even when margin-top:auto collapses
   on the taller card. */
.lmbk-side-card .lmbk-list { margin-bottom: 24px; }
.lmbk-side-card.lmbk-brand .lmbk-foot { border-top-color: #cad7db; }
.lmbk-side-card.lmbk-talent .lmbk-foot { border-top-color: var(--bk-primary-soft-2); }
.lmbk-side-card .lmbk-foot .lmbk-btn { width: 100%; }

/* ---------- Final CTA ---------- */
.lmbk-final {
  background: var(--bk-brand);
  color: #fff;
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
  border-radius: var(--bk-r-card);
}
.lmbk-final::before {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(15,111,79,0.22), transparent 60%);
  pointer-events: none;
}
.lmbk-final .lmbk-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.lmbk-final .lmbk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--bk-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-primary-soft-2);
  margin-bottom: 16px;
}
.lmbk-final .lmbk-eyebrow::before, .lmbk-final .lmbk-eyebrow::after {
  content: "";
  width: 22px; height: 1px;
  background: rgba(255,255,255,0.18);
}
.lmbk-page .lmbk-final h2 {
  font: 500 40px/1.1 var(--bk-font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
  color: #fff;
}
.lmbk-final h2 em {
  font-family: var(--bk-font-serif);
  font-style: italic;
  font-weight: 400;
  color: #b6e0c8;
}
.lmbk-final p {
  font: 400 16px/1.6 var(--bk-font-sans);
  color: rgba(255,255,255,0.72);
  margin: 0 auto 28px;
  max-width: 540px;
}
.lmbk-final .lmbk-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.lmbk-final .lmbk-actions .lmbk-btn { height: 48px; padding: 0 22px; font-size: 14.5px; }
.lmbk-final .lmbk-foot-note {
  margin-top: 22px;
  font: 500 12.5px/1 var(--bk-font-mono);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .lmbk-final { padding: 48px 0 56px; }
  .lmbk-final h2 { font-size: 28px; }
}

/* ============================================================
   DARK MODE — html[data-lm-theme="dark"], the LM modern-page toggle
   shared by lm-landing / lm-about / lm-discover (localStorage 'lm-theme',
   bootstrapped in _head.tpl). The whole promo recolours through the
   --bk-* tokens; the handful of hardcoded light values (image placeholder
   stripes, brand-card accents, ghost-button hover, dark button) are
   overridden explicitly here. The final-CTA block keeps its teal brand
   background in both modes, so its inner accents are pinned below.
   ============================================================ */
html[data-lm-theme="dark"] .lmbk-page {
  --bk-bg: #0d1117;
  --bk-card: #161b22;
  --bk-canvas: #12171e;
  --bk-surface: #1b222b;
  --bk-text: #e6edf3;
  --bk-text-secondary: #aeb9c4;
  --bk-muted: #8b949e;
  --bk-muted-2: #6e7681;
  --bk-border: #2a313c;
  --bk-border-2: #20262e;
  --bk-primary: #3fae87;
  --bk-primary-strong: #2f9a74;
  --bk-primary-text: #8fe0c0;
  --bk-primary-soft: rgba(63,174,135,0.14);
  --bk-primary-soft-2: rgba(63,174,135,0.34);
  --bk-brand-soft: #14222a;
  --bk-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --bk-shadow-lift: 0 18px 40px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  background: var(--bk-bg);
}

/* Image placeholders: dark stripes + dark vignette + dark tag chip */
html[data-lm-theme="dark"] .lmbk-page .lmbk-img {
  background: repeating-linear-gradient(135deg, #1b2730 0 14px, #16212a 14px 28px);
}
html[data-lm-theme="dark"] .lmbk-page .lmbk-img::before {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
}
html[data-lm-theme="dark"] .lmbk-page .lmbk-img-meta .lmbk-tag {
  background: rgba(22,27,34,0.92);
  color: var(--bk-primary-text);
}

/* Ghost button hover border on dark */
html[data-lm-theme="dark"] .lmbk-page .lmbk-btn-ghost:hover { border-color: #3a444f; }

/* Dark button: navy is too close to the dark card, lift it to slate */
html[data-lm-theme="dark"] .lmbk-page .lmbk-btn-dark { background: #283341; }
html[data-lm-theme="dark"] .lmbk-page .lmbk-btn-dark:hover { background: #313d4d; }

/* Brand side-card: its slate accents are hardcoded light — retint for dark */
html[data-lm-theme="dark"] .lmbk-page .lmbk-side-card.lmbk-brand { border-color: #2f3e44; }
html[data-lm-theme="dark"] .lmbk-page .lmbk-side-card.lmbk-brand .lmbk-head { border-bottom-color: #2f3e44; }
html[data-lm-theme="dark"] .lmbk-page .lmbk-side-card.lmbk-brand .lmbk-foot { border-top-color: #2f3e44; }
html[data-lm-theme="dark"] .lmbk-page .lmbk-side-card.lmbk-brand .lmbk-head .lmbk-ic {
  color: #8fc4cf; border-color: #2f3e44;
}
html[data-lm-theme="dark"] .lmbk-page .lmbk-side-card.lmbk-brand .lmbk-head .lmbk-tagline { color: #8fc4cf; }
html[data-lm-theme="dark"] .lmbk-page .lmbk-side-card.lmbk-brand .lmbk-list li .lmbk-ck {
  background: rgba(143,196,207,0.16); border-color: #2f3e44; color: #9fc6cf;
}

/* Final CTA keeps its teal brand bg in both modes — pin the dim eyebrow
   token back to a readable mint so it doesn't fade on dark. */
html[data-lm-theme="dark"] .lmbk-page .lmbk-final .lmbk-eyebrow { color: #cfe9da; }