/* ═══════════════════════════════════════════════════════════════════════
   /contact/sales (booking) — the "Talk to sales" destination. Left-anchored
   editorial hero over the HubSpot Meetings scheduler, framed on a hairline
   container (never a card fill). The embed renders its own light iframe;
   we only frame it.
   ═══════════════════════════════════════════════════════════════════════ */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.bk-main { background: var(--background); }

.bk-hero {
  max-width: 1000px; margin-inline: auto;
  padding: clamp(120px, 15vh, 180px) clamp(20px, 5vw, 72px) clamp(28px, 4vh, 44px);
}
.bk-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 0.97; letter-spacing: -0.03em;
  color: var(--text-primary); margin: 0;
}
.bk-sub {
  font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.5; color: var(--text-secondary); margin: 22px 0 0; max-width: 54ch;
}

.bk-embed-wrap {
  max-width: 1000px; margin-inline: auto;
  padding: clamp(20px, 3vh, 32px) clamp(20px, 5vw, 72px) clamp(72px, 12vh, 140px);
}
/* No visible frame: the HubSpot embed paints its own internal padding
   (cross-origin, not stylable), so a border would read as an awkward inset.
   Letting it sit directly on the page makes that spacing blend in. The
   min-height only holds layout before the iframe loads. */
/* Left-aligned to the column; capped so it doesn't stretch on wide screens. */
.bk-embed { min-height: 640px; max-width: 920px; margin-inline: 0; }
.bk-embed .meetings-iframe-container { width: 100%; }
.bk-embed iframe { display: block; width: 100% !important; border: 0; }

.bk-alt {
  font-family: var(--font-base); font-size: 14px; line-height: 1.6;
  color: var(--text-tertiary); margin: 20px 0 0;
}
.bk-alt a { color: var(--text-secondary); text-decoration: none; transition: color 160ms ease; }
.bk-alt a:hover { color: var(--text-primary); }

/* ── Two-column: left = hero + scheduler, right = the call dial.
   Left-anchored to the rail; the dial fills the right on wide screens
   and is hidden on narrower ones (the scheduler is the mobile focus). */
.bk-side { display: none; }
@media (min-width: 1080px) {
  .bk-grid {
    display: grid;
    grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 104px);
    align-items: center;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: clamp(24px, 5vw, 88px);
  }
  .bk-lead .bk-hero,
  .bk-lead .bk-embed-wrap { max-width: none; margin-inline: 0; padding-inline: 0; }
  .bk-side { display: flex; align-items: center; justify-content: center; }
}

/* ── The call dial — a 30-minute ring: hairline dial + tick ring, a teal
   arc that sweeps in on load, a dot orbiting the rim, and the four call
   topics at the cardinal points lighting in sequence as the dot passes. */
.bk-dial { position: relative; width: min(74%, 380px); aspect-ratio: 1; }
.bk-dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bk-dial-ring { stroke: var(--border-subtle); stroke-width: 1; }
.bk-dial-ticks { stroke: var(--border-subtle); stroke-width: 3; stroke-dasharray: 1.5 21.1; stroke-linecap: round; opacity: 0.7; }
/* The arc IS the progress of the call: it fills clockwise from the top and
   its leading edge tracks the orbiting dot (same 14s period + phase), so the
   dot always sits at the tip of the growing arc, like a meeting timer. */
.bk-dial-arc { stroke: var(--zen-teal-5); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 666; stroke-dashoffset: 666; animation: bkFill 14s linear infinite; }
.bk-dial-orbit { transform-origin: 120px 120px; animation: bkOrbit 14s linear infinite; }
.bk-dial-dot { fill: var(--zen-teal-5); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--zen-teal-5) 80%, transparent)); }
.bk-dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.bk-dial-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5vw, 66px); line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); }
.bk-dial-unit { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.bk-dial-label { position: absolute; font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-quaternary); white-space: nowrap; animation: bkLabelPulse 14s ease-in-out infinite; }
.bk-dial-label--t { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 14px; animation-delay: 0s; }
.bk-dial-label--r { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 16px; animation-delay: 3.5s; }
.bk-dial-label--b { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; animation-delay: 7s; }
.bk-dial-label--l { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 16px; animation-delay: 10.5s; }
@keyframes bkFill { from { stroke-dashoffset: 666; } to { stroke-dashoffset: 8; } }
@keyframes bkOrbit { to { transform: rotate(360deg); } }
/* Each label peaks bright at the START of its (delayed) cycle — the moment
   the orbiting dot is at that cardinal point (delays 0 / 3.5 / 7 / 10.5s
   over a 14s orbit = top / right / bottom / left). */
@keyframes bkLabelPulse { 0% { color: var(--zen-teal-5); } 14%, 100% { color: var(--text-quaternary); } }
@media (prefers-reduced-motion: reduce) {
  .bk-dial-arc { animation: none; stroke-dashoffset: 104; }
  .bk-dial-orbit { animation: none; }
  .bk-dial-label { animation: none; }
}

@media (min-width: 1600px) { .bk-grid { max-width: 1680px; } }

@media (max-width: 600px) {
  .bk-embed, .bk-embed iframe { min-height: 900px; }
}