/* =============================================================
   BUSINESS LANDING — vendor acquisition page
   Reuses: home.css (bk-calmock), content.css (bk-steps3, bk-content-cta)
   ============================================================= */

/* Hero */
/* Extend the hero background up behind the sticky header so the
   gradient is visible through the transparent menu bar at the top. */
.bk-vhero { margin-top: calc(-1 * var(--bk-header-h)); padding-block: calc(var(--bk-header-h) + var(--bk-space-16)) var(--bk-space-16); position: relative; overflow: hidden; background:
  radial-gradient(80% 110% at 90% -10%, var(--vp-primary, rgba(167, 139, 250, 0.35)), transparent 60%),
  radial-gradient(70% 90% at 5% 15%, var(--vp-secondary, rgba(244, 168, 216, 0.28)), transparent 55%),
  linear-gradient(180deg, #f4eefe 0%, var(--bk-bg) 100%); }
.bk-vhero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--bk-space-20);
  background: linear-gradient(to bottom, transparent, var(--bk-bg));
  pointer-events: none;
}
.bk-vhero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--bk-space-12); align-items: center; }
.bk-vhero__title { font-size: var(--bk-fs-display); font-weight: var(--bk-fw-extrabold); letter-spacing: -0.02em; line-height: var(--bk-lh-tight); margin-top: var(--bk-space-5); }
.bk-vhero__sub { color: var(--bk-text-muted); font-size: var(--bk-fs-lg); margin-top: var(--bk-space-4); max-width: 46ch; }

/* Animated typing line (item 9) — green rotating phrases, admin-editable. */
.bk-vhero__typing { margin-top: var(--bk-space-4); font-size: var(--bk-fs-xl, 1.5rem); font-weight: var(--bk-fw-bold); line-height: 1.5; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 1.6em; }
.bk-vhero__typing-prefix { color: var(--bk-text); }
.bk-vhero__typing-word { color: var(--bk-primary); }
.bk-vhero__caret { display: inline-block; width: 3px; height: 1.1em; background: var(--bk-primary); border-radius: 2px; margin-inline-start: 2px; animation: bk-caret-blink 1s steps(1) infinite; }
@keyframes bk-caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-vhero__caret { animation: none; } }
/* The mobile copy of the typing line is hidden on desktop (item: vhero typing). */
.bk-vhero__typing--mobile { display: none; }
.bk-vhero__actions { display: flex; gap: var(--bk-space-3); flex-wrap: wrap; margin-top: var(--bk-space-8); justify-content: center; }
.bk-vhero__stats { display: flex; gap: var(--bk-space-10); margin-top: var(--bk-space-10); justify-content: center; }
.bk-vhero__stat { text-align: center; }
.bk-vhero__stat strong { display: block; font-size: var(--bk-fs-h3); font-weight: var(--bk-fw-extrabold); }
.bk-vhero__stat span { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }

.bk-vhero__visual { position: relative; display: flex; justify-content: center; }
.bk-vhero__visual .bk-calmock { max-width: 480px; }
.bk-vhero__float {
  position: absolute; top: -16px; inset-inline-end: -10px;
  background: var(--bk-bg); border-radius: var(--bk-radius-pill);
  box-shadow: var(--bk-shadow-lg); padding: 9px 16px;
  font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-semibold);
  display: inline-flex; align-items: center; gap: 7px;
  animation: bk-vfloat 3.5s var(--bk-ease) infinite;
}
.bk-vhero__float i { color: var(--bk-success); }
@keyframes bk-vfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Section heads (centered) */
.bk-vsection-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--bk-space-10); }
.bk-vsection-head__title { font-size: var(--bk-fs-h2); font-weight: var(--bk-fw-bold); letter-spacing: -0.01em; margin-top: var(--bk-space-4); }
.bk-vsection-head__sub { color: var(--bk-text-muted); margin-top: var(--bk-space-3); }

/* Features */
.bk-vfeatures { background: var(--bk-surface); }
.bk-vfeatures__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-5); }
.bk-vfeature { background: var(--bk-bg); border-radius: var(--bk-radius-card); padding: var(--bk-space-6); box-shadow: var(--bk-shadow-xs); transition: transform var(--bk-dur-fast) var(--bk-ease), box-shadow var(--bk-dur-fast) var(--bk-ease); }
.bk-vfeature:hover { transform: translateY(-3px); box-shadow: var(--bk-shadow-md); }
.bk-vfeature__icon { width: 52px; height: 52px; border-radius: var(--bk-radius-input); background: var(--bk-primary-tint); color: var(--bk-primary-600); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: var(--bk-space-4); }
.bk-vfeature__title { font-weight: var(--bk-fw-bold); margin-bottom: var(--bk-space-2); }
.bk-vfeature__desc { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); line-height: var(--bk-lh-normal); }

/* Requirements */
.bk-vreqs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-5); }
.bk-vreq { border: 1px solid var(--bk-border); border-radius: var(--bk-radius-card); padding: var(--bk-space-6); }
.bk-vreq__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--bk-space-4); }
.bk-vreq__icon { width: 44px; height: 44px; border-radius: var(--bk-radius-circle); background: var(--bk-primary-tint); color: var(--bk-primary-600); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bk-vreq__title { font-weight: var(--bk-fw-bold); }
.bk-vreq__list { display: flex; flex-direction: column; gap: var(--bk-space-2); }
.bk-vreq__list li { display: flex; align-items: flex-start; gap: 8px; color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-vreq__list i { color: var(--bk-success); margin-top: 4px; font-size: 11px; }

/* 4-step variant */
.bk-steps3__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive */
@media (max-width: 980px) {
  .bk-vhero__grid { grid-template-columns: 1fr; gap: var(--bk-space-10); }
  .bk-vhero { padding-block: 120px var(--bk-space-10); }
  /* On mobile the typing line leads (under the menu), then the image, then the rest. */
  .bk-vhero__typing--desktop { display: none; }
  .bk-vhero__typing--mobile { display: flex; order: -2; margin-top: 0; justify-content: center; text-align: center; font-size: var(--bk-fs-display); font-weight: var(--bk-fw-extrabold); line-height: 1.4; }
  .bk-vhero__typing--mobile .bk-vhero__typing-prefix { display: block; width: 100%; }
  /* Reserve room for 2 lines up-front so the erase/re-type cycle (words of
     different lengths wrapping or not) never changes this box's height and
     shifts everything below it (item 12). inline-flex + centering keeps the
     actual word text (and the caret next to it) vertically centered in that
     reserved box — plain inline-block left the text sitting at the top of
     the tall box while the caret centered on the whole flex line, making
     the caret visibly sit lower than the word (item 5). */
  .bk-vhero__typing--mobile .bk-vhero__typing-word { display: inline-flex; align-items: center; min-height: 2.8em; }
  .bk-vhero__typing--mobile .bk-vhero__caret { height: 0.85em; margin-inline-start: 3px; align-self: center; }
  .bk-vhero__visual { order: -1; }
  .bk-vhero__float { inset-inline-end: 6px; }
  .bk-vfeatures__grid, .bk-vreqs__grid, .bk-steps3__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bk-vhero__stats { gap: var(--bk-space-6); flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .bk-vfeatures__grid, .bk-vreqs__grid, .bk-steps3__grid--4 { grid-template-columns: 1fr; }
}

/* Vendor CTA — support button stacked below the primary, smaller/lighter (item 5) */
/* A compact bordered button — smaller everything (font + height + padding), width
   auto to its text — so focus stays on the primary "free start" CTA.
   Higher specificity (`.bk-content-cta .bk-btn.bk-content-cta__support`) is needed
   to beat `.bk-content-cta .bk-btn { min-height:54px; font-size:md }` in content.css. */
.bk-content-cta__actions--stacked { flex-direction: column; align-items: center; gap: var(--bk-space-3); }
.bk-content-cta .bk-btn.bk-content-cta__support {
    width: auto;
    min-height: 0;
    height: auto;
    font-size: var(--bk-fs-xs, 12px);
    line-height: 1;
    min-height: 38px;
    padding: 10px 16px;
    padding-inline: 16px;
    gap: 5px;
    color: #fff;
}
.bk-content-cta .bk-btn.bk-content-cta__support i { font-size: 10px; }
.bk-content-cta .bk-btn.bk-content-cta__support:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* Media-feature section (item 22 — Fresha-style image-beside-text) */
.bk-mediafeat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-12); align-items: center; }
.bk-mediafeat--img-left .bk-mediafeat__media { order: -1; }
.bk-mediafeat__title { font-size: var(--bk-fs-h2); font-weight: var(--bk-fw-extrabold); letter-spacing: -0.02em; line-height: 1.25; }
.bk-mediafeat__hi { color: var(--bk-primary); }
.bk-mediafeat__sub { color: var(--bk-text-muted); font-size: var(--bk-fs-lg); margin-top: var(--bk-space-4); }
.bk-mediafeat__list { display: flex; flex-direction: column; gap: var(--bk-space-4); margin-top: var(--bk-space-6); }
.bk-mediafeat__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--bk-text); line-height: var(--bk-lh-normal); }
.bk-mediafeat__list i { color: var(--bk-primary); margin-top: 5px; flex: 0 0 auto; }
.bk-mediafeat__media { border-radius: var(--bk-radius-lg); overflow: hidden; }
.bk-mediafeat__media img { width: 100%; height: auto; display: block; }
.bk-mediafeat__media--placeholder { aspect-ratio: 4/3; background: var(--bk-surface-2); display: flex; align-items: center; justify-content: center; color: var(--bk-text-muted); font-size: 48px; }
@media (max-width: 860px) {
  .bk-mediafeat { grid-template-columns: 1fr; gap: var(--bk-space-6); }
  .bk-mediafeat--img-left .bk-mediafeat__media, .bk-mediafeat__media { order: -1; }
}

/* Dual-image (big+small) feature section (item 4 — Fresha "for-business" style) */
.bk-dualmedia-section {
  position: relative;
  overflow-x: hidden;
  padding: var(--bk-space-8) var(--bk-space-5);
  color: var(--bk-text-muted);
}
@media (min-width: 768px) { .bk-dualmedia-section { padding: var(--bk-space-10) var(--bk-space-8); } }
@media (min-width: 1024px) { .bk-dualmedia-section { padding: var(--bk-space-12) var(--bk-space-10); background: var(--bk-surface-2); } }
@media (min-width: 1280px) { .bk-dualmedia-section { padding: 128px 120px; } }

.bk-dualmedia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-12); align-items: center; }
.bk-dualmedia--text-left .bk-dualmedia__text { order: -1; }

.bk-dualmedia__media { position: relative; }
.bk-dualmedia__big { border-radius: var(--bk-radius-lg); overflow: hidden; box-shadow: var(--bk-shadow-md, 0 12px 32px rgba(0,0,0,0.12)); }
.bk-dualmedia__big img { width: 100%; height: auto; display: block; }
.bk-dualmedia__big--placeholder { aspect-ratio: 4/3; background: var(--bk-surface-2); display: flex; align-items: center; justify-content: center; color: var(--bk-text-muted); font-size: 48px; }
.bk-dualmedia__small {
  position: absolute; inset-inline-start: -8%; bottom: -10%;
  width: 42%; border-radius: var(--bk-radius-lg); overflow: hidden;
  box-shadow: var(--bk-shadow-md, 0 12px 32px rgba(0,0,0,0.16));
  border: 4px solid var(--bk-surface, #fff);
}
.bk-dualmedia--text-left .bk-dualmedia__small { inset-inline-start: auto; inset-inline-end: -8%; }
.bk-dualmedia__small img { width: 100%; height: auto; display: block; }
.bk-dualmedia__small--placeholder { aspect-ratio: 9/16; background: var(--bk-surface-2); display: flex; align-items: center; justify-content: center; color: var(--bk-text-muted); font-size: 28px; }

@media (max-width: 860px) {
  .bk-dualmedia { grid-template-columns: 1fr; gap: var(--bk-space-6); }
  .bk-dualmedia--text-left .bk-dualmedia__text { order: 0; }
  .bk-dualmedia__media { display: flex; flex-direction: column; gap: var(--bk-space-4); }
  .bk-dualmedia__small {
    position: static; width: 60%; margin-inline: auto; border-width: 2px;
  }
}

/* FAQ accordion (item 22) */
.bk-faq { max-width: 820px; margin-inline: auto; }
.bk-faq__title { font-size: var(--bk-fs-h2); font-weight: var(--bk-fw-extrabold); text-align: center; letter-spacing: -0.01em; }
.bk-faq__sub { color: var(--bk-text-muted); text-align: center; margin-top: var(--bk-space-3); }
.bk-faq__list { display: flex; flex-direction: column; gap: var(--bk-space-3); margin-top: var(--bk-space-8); }
.bk-faq__item { background: var(--bk-surface); border-radius: var(--bk-radius-card); border: 1px solid var(--bk-border); overflow: hidden; }
.bk-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--bk-space-5) var(--bk-space-6); font-weight: var(--bk-fw-semibold); cursor: pointer; list-style: none; }
.bk-faq__q::-webkit-details-marker { display: none; }
.bk-faq__q i { transition: transform var(--bk-dur-fast) var(--bk-ease); color: var(--bk-text-muted); flex: 0 0 auto; }
.bk-faq__item[open] .bk-faq__q i { transform: rotate(45deg); color: var(--bk-primary); }
.bk-faq__a { padding: 0 var(--bk-space-6) var(--bk-space-5); color: var(--bk-text-muted); line-height: var(--bk-lh-relaxed, 1.9); }

/* Service "image + caption" cards on the business page (admin-editable) */
.bk-vfeature--media { text-align: center; background: transparent; box-shadow: none; padding: 0; }
.bk-vfeature--media:hover { transform: none; box-shadow: none; }
.bk-vfeature__photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 12px; background: var(--bk-surface-2); box-shadow: var(--bk-shadow-sm); }
.bk-vfeature__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bk-dur-slow) var(--bk-ease); }
.bk-vfeature--media:hover .bk-vfeature__photo img { transform: scale(1.04); }
.bk-vfeature--media .bk-vfeature__title { font-size: var(--bk-fs-md); margin-bottom: 4px; }
.bk-vfeature--media .bk-vfeature__desc { font-size: var(--bk-fs-sm); }
/* Two columns on phones */
@media (max-width: 600px) {
  .bk-vfeatures__grid--media { grid-template-columns: repeat(2, 1fr); gap: var(--bk-space-4); }
}