/* BOOK YOUR DEMO PAGE */

/* INTRO — white section under the shared hero (new/css/hero.css, */
/* Visually hidden, still read by screen readers and search (the page's h1; it has no hero). */
.bkd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bkd-intro {
  background: var(--bg);
  /* No hero above it: 118px of top padding clears the fixed header pill (104 / 100px on tablet / phone, as the compact hero does). */
  padding: 118px var(--site-pad-x) 16px;
  /* `#bkd-form` deep links land the card just below the fixed header pill. */
  scroll-margin-top: 88px;
}
.bkd-intro-grid {
  max-width: var(--site-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 64px;
  align-items: center;
}
/* 10 items now (was 3) — a single column at the original 44px icon/ */
.bkd-intro-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 22px;
}
.bkd-intro-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bkd-intro-check-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.bkd-intro-check-icon [data-lucide] { width: 18px; height: 18px; stroke-width: 2.3; }
.bkd-intro-checklist li > span:last-child {
  font-family: var(--p-font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-secondary);
  padding-top: 7px;
}
.bkd-intro-checklist li > span:last-child strong {
  color: var(--fg-primary);
  font-weight: 700;
}

/* ============================================================
   WATCH DEMO — the popup is styled after YouTube's watch page:
   a chip row of products on top, the player filling its column
   with the title, a channel row (avatar, product, action pills)
   and a description box under it, a compact "Chapters" list on
   the right, then a thumbnail grid. The surface is YouTube's
   neutral dark (#0f0f0f / #272727) in light and dark mode alike:
   it is a video-viewing overlay, not page chrome.
============================================================ */
.bkd-video-modal {
  --yt-bg: #0f0f0f;
  --yt-surface: #272727;
  --yt-surface-hi: #3f3f3f;
  --yt-hover: rgba(255, 255, 255, 0.1);
  --yt-text: #f1f1f1;
  --yt-muted: #aaaaaa;
  --yt-line: rgba(255, 255, 255, 0.1);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.bkd-video-modal.is-open { opacity: 1; visibility: visible; }
.bkd-video-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bkd-video-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1760px;
  /* Fixed to the window (less the gutter), so the popup is as big as the screen allows and the player is never sized by a
     guess about how much room the rest of the popup needs. dvh follows a phone's collapsing address bar. */
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  background: var(--yt-bg);
  color: var(--yt-text);
  border-radius: 16px;
  border: 1px solid var(--yt-line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.bkd-video-modal.is-open .bkd-video-modal-dialog { transform: translateY(0) scale(1); }

/* Top bar: the product chips, then the close button. */
.bkd-video-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 24px;
}
.bkd-video-modal-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--yt-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bkd-video-modal-close:hover { background: var(--yt-hover); }
.bkd-video-modal-close:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 2px; }
.bkd-video-modal-close [data-lucide] { width: 22px; height: 22px; pointer-events: none; }

.bkd-video-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 402px;
  grid-template-areas:
    "main    playlist"
    "explore explore"
    "contact contact";
  column-gap: 24px;
  /* One scrolling flow, nothing pinned: the video and its chapter list first, then Explore products, then the Contact Us
     call-to-action last. The chapter list is sized by the video row (see .bkd-video-playlist), not by its 45 chapters. */
  grid-template-rows: auto auto auto;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 24px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.bkd-video-modal-body::-webkit-scrollbar { width: 10px; }
.bkd-video-modal-body::-webkit-scrollbar-track { background: transparent; }
.bkd-video-modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 999px; border: 2px solid var(--yt-bg); }
/* A product with no video (everything except the Interactive Flat Panel): the chapter list goes and the live-demo card
   takes the full width, with Explore products and Contact Us under it. */
.bkd-video-modal-body.is-other {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "explore"
    "contact";
}
.bkd-video-modal-body.is-other .bkd-video-playlist,
.bkd-video-modal-body.is-other .bkd-video-player-wrap { display: none; }
.bkd-video-modal-body.is-ifp .bkd-prod-stage { display: none; }
.bkd-video-main {
  grid-area: main;
  min-width: 0;
}
.bkd-video-player-wrap {
  position: relative;
  /* The player fills its column (YouTube's way). It was sized from the window height before, which shrank it to a small box on
     any short window; now it only stops growing when it would be taller than the window leaves room for, and the picture
     letterboxes inside the black box instead of being cropped or squeezed. */
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: max(360px, calc(100vh - 200px));
  max-height: max(360px, calc(100dvh - 200px));
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.bkd-video-player { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }

/* Settings (quality) + custom fullscreen button — grouped into ONE pill
   (shared background/border) rather than two separate floating circles.
   This went through several bottom-right placements trying to sit near/on
   the native <video controls> bar's own row ("beside the speaker icon" /
   "same axis," owner asks) — but a page has no way to know that bar's real
   layout (browser-rendered chrome, not DOM), and the closest version
   (bottom: 8px) very likely ended up sitting on top of the native bar's
   own volume/mute button, since that's roughly where Chrome/Edge put it —
   blocking clicks to it, and very plausibly why audio access broke
   (owner-flagged: "audio is not coming from the video"; nothing in this
   page's own JS ever touches .muted/.volume, so a covered/misclicked
   native mute button was the most likely cause). Moved back to the
   top-right corner — clear of the native bar entirely, so this can never
   overlap a native control again — trading the "same row as native
   controls" look for guaranteed access to the native bar underneath it.
   See the comment on this cluster's markup for why fullscreen goes
   through .bkd-video-player-wrap rather than the bare <video>. */
.bkd-video-controls-extra {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 8, 22, 0.65);
}
.bkd-video-quality { position: relative; }
.bkd-video-quality-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bkd-video-quality-btn:hover,
.bkd-video-quality.is-open .bkd-video-quality-btn { background: rgba(255, 255, 255, 0.14); }
.bkd-video-quality-btn [data-lucide] { width: 17px; height: 17px; pointer-events: none; }
.bkd-video-quality-menu {
  /* Opens DOWNWARD again now that .bkd-video-controls-extra moved back to
     top: 12px (see its comment) — there's plenty of room below the gear
     within the video again. (It briefly opened upward while the gear sat
     near the wrap's bottom edge, where downward had nowhere to go before
     hitting overflow: hidden; that's no longer the case from up here.) */
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0F1524;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.bkd-video-quality.is-open .bkd-video-quality-menu { display: block; }
.bkd-video-quality-panel { display: flex; flex-direction: column; gap: 2px; }
/* Same author-stylesheet-beats-UA-[hidden] fix already used elsewhere on
   this page (.bkd-form-group[hidden], .bkd-otp-verify[hidden]) — the
   display: flex above has equal specificity to the browser's own
   [hidden] { display: none }, and author rules win that tie, so without
   this the JS-toggled sub-panel would stay visible. */
.bkd-video-quality-panel[hidden] { display: none; }

/* Level 1 — the single "Quality  ›  1080p HD" row the gear opens onto. */
.bkd-video-quality-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--p-font);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bkd-video-quality-row:hover { background: rgba(255, 255, 255, 0.08); }
.bkd-video-quality-row [data-lucide]:first-child { width: 16px; height: 16px; stroke: rgba(255, 255, 255, 0.7); flex-shrink: 0; pointer-events: none; }
.bkd-video-quality-row-label { font-size: 13.5px; font-weight: 600; }
.bkd-video-quality-row-value { margin-left: auto; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.bkd-video-quality-row-chevron { width: 16px; height: 16px; stroke: rgba(255, 255, 255, 0.4); flex-shrink: 0; pointer-events: none; }

/* Level 2 — back row + the actual 1080p/720p/480p choices with checkmarks. */
.bkd-video-quality-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-bottom: 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--p-font);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.bkd-video-quality-back [data-lucide] { width: 17px; height: 17px; stroke: #fff; pointer-events: none; }
.bkd-video-quality-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--p-font);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bkd-video-quality-option:hover { background: rgba(255, 255, 255, 0.08); }
.bkd-video-quality-option.is-active { color: var(--accent-cyan); }
.bkd-video-quality-hint { color: rgba(255, 255, 255, 0.4); font-weight: 500; font-size: 11.5px; }
.bkd-video-quality-option.is-active .bkd-video-quality-hint { color: var(--accent-cyan); opacity: 0.75; }
.bkd-video-quality-check { width: 16px; height: 16px; stroke: var(--accent-cyan); flex-shrink: 0; opacity: 0; pointer-events: none; }
.bkd-video-quality-option.is-active .bkd-video-quality-check { opacity: 1; }

/* Custom fullscreen toggle — same plain icon-button look as the gear, now
   that both share .bkd-video-controls-extra's own pill background/border
   instead of each carrying their own. Enter/exit icon swap is pure CSS
   off :fullscreen on the wrapper (see below), no JS icon-state handling
   needed. */
.bkd-video-fullscreen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bkd-video-fullscreen-btn:hover { background: rgba(255, 255, 255, 0.14); }
.bkd-video-fullscreen-btn [data-lucide] { width: 17px; height: 17px; pointer-events: none; }
.bkd-video-fullscreen-icon-exit { display: none; }
.bkd-video-player-wrap:fullscreen .bkd-video-fullscreen-icon-enter,
.bkd-video-player-wrap:-webkit-full-screen .bkd-video-fullscreen-icon-enter { display: none; }
.bkd-video-player-wrap:fullscreen .bkd-video-fullscreen-icon-exit,
.bkd-video-player-wrap:-webkit-full-screen .bkd-video-fullscreen-icon-exit { display: block; }

/* True fullscreen: the wrapper (not just the <video>) is what's
   fullscreened — see the markup comment on .bkd-video-controls-extra — so
   it needs its own sizing here rather than relying on the non-fullscreen
   width: min(100%, calc(60vh * 16/9)) rule above, which would otherwise
   leave it a small centered box on an otherwise-black fullscreen screen. */
.bkd-video-player-wrap:fullscreen,
.bkd-video-player-wrap:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  margin: 0;
}

.bkd-video-main-title {
  font-family: var(--h-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--yt-text);
  margin: 14px 0 0;
}
.bkd-video-main-desc {
  font-family: var(--p-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--yt-text);
  margin: 0;
}
/* YouTube's channel row: avatar, name over a grey line, the action pills at the end. */
.bkd-video-channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.bkd-video-channel-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-gradient);
  color: var(--on-accent);
  font-family: var(--p-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.bkd-video-channel-text { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.bkd-video-channel-name { font-family: var(--p-font); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--yt-text); }
.bkd-video-channel-sub { font-family: var(--p-font); font-size: 12px; line-height: 18px; color: var(--yt-muted); }
/* YouTube's description box: a soft grey block with a bold stats line. */
.bkd-video-desc-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--yt-hover);
}
.bkd-video-desc-meta { display: block; margin-bottom: 4px; font-family: var(--p-font); font-size: 14px; font-weight: 600; line-height: 20px; color: var(--yt-text); }

/* Contact frame — sits below the video's title/description, same dark
   gradient + dot-pattern + circular-icon treatment as the sitewide
   `.snl-help-bar` (global.css) so it reads as the same visual family,
   but page-local since the content (Contact Us + phone/email, no CTA
   button) and modal-scaled sizing don't fit that shared component.
   Owner ask, 2026-08-13. */
.bkd-video-contact {
  grid-area: contact;
  position: relative;
  /* clip, not hidden: a hidden grid item has an automatic minimum height of 0, so once a row follows Contact Us on a
     stacked layout its row collapsed to the padding and the card spilled over the next section */
  overflow: hidden;
  overflow: clip;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
  padding: 16px 20px;
  background: var(--grad-hero-bg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
}
.bkd-video-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 55%);
  mask-image: linear-gradient(to left, #000 0%, transparent 55%);
  pointer-events: none;
}
.bkd-video-contact-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(var(--accent-deep-rgb), 0.30);
}
.bkd-video-contact-icon [data-lucide] { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
.bkd-video-contact-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.bkd-video-contact-body h4 {
  font-family: var(--h-font);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.bkd-video-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--p-font);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}
.bkd-video-contact-row + .bkd-video-contact-row { margin-top: 4px; }
.bkd-video-contact-row [data-lucide] { width: 14px; height: 14px; stroke: var(--accent-cyan); flex-shrink: 0; }
.bkd-video-contact-row span { min-width: 0; overflow-wrap: break-word; }
.bkd-video-contact-row a { color: #fff; text-decoration: none; }
.bkd-video-contact-row a:hover { color: var(--accent-cyan); text-decoration: underline; }

/* ── Chapters: YouTube's "up next" panel — a header, then compact rows (thumbnail with a duration badge, title, grey line). ── */
.bkd-video-playlist {
  --ch-thumb: 168px;
  grid-area: playlist;
  min-height: 0;
  /* size containment: the 45 chapters add nothing to the row's height, so the row is as tall as the video column and the
     list stretches to it and scrolls inside */
  contain: size;
  padding: 0 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--yt-line);
  border-radius: 12px;
  counter-reset: bkd-chapter;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.bkd-video-playlist::-webkit-scrollbar { width: 6px; }
.bkd-video-playlist::-webkit-scrollbar-track { background: transparent; }
.bkd-video-playlist::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; }
.bkd-video-playlist::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }
.bkd-video-playlist-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -8px 4px;
  padding: 14px 16px 10px;
  background: var(--yt-bg);
  border-bottom: 1px solid var(--yt-line);
  font-family: var(--p-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--yt-text);
}
.bkd-video-playlist-count { font-size: 12px; font-weight: 400; color: var(--yt-muted); }
.bkd-video-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  counter-increment: bkd-chapter;
  transition: background 0.15s ease;
}
.bkd-video-item:hover { background: var(--yt-hover); }
.bkd-video-item.is-active { background: rgba(255, 255, 255, 0.16); }
.bkd-video-item:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: -2px; }

/* Real per-chapter thumbnails — frames extracted from the video itself at
   each chapter's timestamp (ffmpeg, 2026-09-29), not stock/unrelated stills. */
.bkd-video-item-thumb {
  position: relative;
  flex-shrink: 0;
  width: var(--ch-thumb);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
}
.bkd-video-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkd-video-item-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bkd-video-item:hover .bkd-video-item-play,
.bkd-video-item.is-active .bkd-video-item-play { opacity: 1; }
.bkd-video-item-play [data-lucide] { width: 22px; height: 22px; fill: #fff; pointer-events: none; }

.bkd-video-item-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
/* The chapter's start time sits on the thumbnail's corner like YouTube's duration badge; the item is exactly as tall as its
   thumbnail, so the badge is placed from the item's bottom-left. */
.bkd-video-item-time {
  position: absolute;
  left: calc(8px + var(--ch-thumb) - 4px);
  bottom: 10px;
  transform: translateX(-100%);
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.82);
  font-family: var(--p-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.bkd-video-item-title {
  font-family: var(--p-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--yt-text);
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bkd-video-item-meta::after {
  content: "Chapter " counter(bkd-chapter);
  font-family: var(--p-font);
  font-size: 12px;
  line-height: 18px;
  color: var(--yt-muted);
}

/* ── Chips: one per product of the form's dropdown (YouTube's chip row). ── */
.bkd-video-cats {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bkd-video-cats::-webkit-scrollbar { display: none; }
.bkd-video-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: none;
  background: var(--yt-surface);
  color: var(--yt-text);
  font-family: var(--p-font);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.bkd-video-cat [data-lucide] { width: 16px; height: 16px; pointer-events: none; }
.bkd-video-cat:hover { background: var(--yt-surface-hi); }
/* YouTube's selected chip is white with dark text. */
.bkd-video-cat.is-active { background: var(--yt-text); color: #0f0f0f; }
.bkd-video-cat:focus-visible,
.bkd-explore-card:focus-visible,
.bkd-prod-btn:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 2px; }

/* ── Live-demo card: stands in for the player on every product that has no walkthrough video. Same 16:9 box as the player. ── */
.bkd-prod-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: max(360px, calc(100vh - 200px));
  max-height: max(360px, calc(100dvh - 200px));
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.06) 45%, #050816 80%);
}
.bkd-prod-stage img { max-width: 78%; max-height: 82%; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5)); }
.bkd-prod-stage-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: var(--on-accent);
  font-family: var(--p-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* The action pills (YouTube's Subscribe / Share row). */
.bkd-prod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bkd-prod-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: none;
  background: var(--yt-surface);
  color: var(--yt-text);
  font-family: var(--p-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.bkd-prod-btn:hover { background: var(--yt-surface-hi); }
.bkd-prod-btn [data-lucide] { width: 16px; height: 16px; pointer-events: none; }
.bkd-prod-btn-primary { background: var(--cta-btn-bg); color: var(--on-cta); }
.bkd-prod-btn-primary:hover { background: var(--cta-btn-bg-hover); }

/* ── Explore products: YouTube's thumbnail grid, one card per product (thumbnail, bold title, grey line). The open one is marked. ── */
.bkd-video-explore {
  grid-area: explore;
  padding: 32px 0 0;
}
.bkd-video-explore-head {
  margin: 0 0 16px;
  font-family: var(--h-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--yt-text);
}
.bkd-video-explore-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px 16px;
}
.bkd-explore-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--yt-text);
  text-align: left;
  cursor: pointer;
}
.bkd-explore-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  /* the product photos are shot on white (the walkthrough's still on black), so the thumbnail takes the photo's own ground */
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.bkd-explore-card[data-product="ifp"] .bkd-explore-thumb { background: #000; }
.bkd-explore-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bkd-explore-card:hover .bkd-explore-thumb { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
.bkd-explore-card.is-current .bkd-explore-thumb { box-shadow: 0 0 0 2px var(--accent-cyan); }
/* The play mark is only on the card of the product that really has a video. */
.bkd-explore-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}
.bkd-explore-play [data-lucide] {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 12px;
  border-radius: 50%;
  background: var(--accent-gradient);
  stroke: var(--on-accent);
  fill: var(--on-accent);
  pointer-events: none;
}
.bkd-explore-now {
  display: none;
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: var(--p-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.bkd-explore-card.is-current .bkd-explore-now { display: block; }
.bkd-explore-name { font-family: var(--p-font); font-size: 14px; font-weight: 600; line-height: 20px; }
.bkd-explore-kind { margin-top: 2px; font-family: var(--p-font); font-size: 12px; line-height: 18px; color: var(--yt-muted); }

@media (min-width: 900px) {
  /* a product with no video: the live-demo card on the left, the title, channel row and description beside it */
  .bkd-video-modal-body.is-other .bkd-video-main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
    align-content: start;
  }
  .bkd-video-modal-body.is-other .bkd-prod-stage { grid-column: 1; grid-row: 1 / -1; }
  .bkd-video-modal-body.is-other .bkd-video-main-title { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 24px; line-height: 32px; }
  .bkd-video-modal-body.is-other .bkd-video-channel { grid-column: 2; grid-row: 2; }
  .bkd-video-modal-body.is-other .bkd-video-desc-box { grid-column: 2; grid-row: 3; }
}

/* Body scroll lock while the modal is open. */
body.bkd-modal-open { overflow: hidden; }

@media (max-width: 899px) {
  .bkd-video-bar { padding: 10px 12px 10px 16px; }
  .bkd-video-modal-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "playlist"
      "explore"
      "contact";
    /* four stacked rows, each sized to its content */
    grid-template-rows: auto auto auto auto;
    padding: 4px 16px 24px;
  }
  /* Stacked, the chapter list is a plain section under the video: it shows all its chapters (the whole popup scrolls as
     one, so no scroll area is nested inside another) instead of being sized by the video row. */
  .bkd-video-playlist { contain: none; overflow-y: visible; min-height: auto; margin-top: 20px; }
  .bkd-video-playlist-head { position: static; }
  .bkd-video-modal-body.is-other { grid-template-rows: auto auto auto; }
}
@media (max-width: 599px) {
  .bkd-video-modal { padding: 0; }
  /* height: 100% (of .bkd-video-modal's own inset:0 box) plus max-height:
     100vh both ultimately chase the STATIC viewport height — on mobile
     Safari in particular, 100vh includes the space behind the collapsible
     address bar, which isn't actually visible, so the dialog's real bottom
     edge rendered below the fold: "cropped." 100dvh tracks the ACTUAL
     visible viewport as browser chrome shows/hides; declared after the
     100vh fallback so older browsers keep the vh value. */
  .bkd-video-modal-dialog {
    border-radius: 0;
    border: none;
    height: 100vh;
    height: 100dvh;
  }
  .bkd-video-bar { padding: 8px 8px 8px 12px; }
  .bkd-video-modal-body { padding: 0 12px 20px; }
  /* the player runs edge to edge, as in YouTube's phone layout */
  .bkd-video-player-wrap,
  .bkd-prod-stage { width: calc(100% + 24px); margin-inline: -12px; border-radius: 0; max-height: none; }
  .bkd-video-playlist { --ch-thumb: 140px; }
  .bkd-video-main-title { font-size: 18px; line-height: 26px; }
  .bkd-prod-actions { margin-left: 0; flex: 1 1 100%; }
  .bkd-prod-btn { flex: 1 1 auto; justify-content: center; }
  .bkd-video-explore { padding-top: 24px; }
  .bkd-video-explore-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .bkd-video-contact { align-items: flex-start; padding: 14px 16px; }
  .bkd-video-contact-row { align-items: flex-start; }
  .bkd-video-contact-row [data-lucide] { margin-top: 4px; }
}

/* FORM CARD — right column of `.bkd-intro-grid`. `.bkd-form-card-wrap` */
.bkd-form-card-wrap { width: 100%; }
.bkd-form-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
}
.bkd-form-card-head { margin-bottom: 24px; }
.bkd-form-card-head h2 {
  font-family: var(--h-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 6px;
}
.bkd-form-card-head p {
  font-family: var(--p-font);
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 0;
}
.bkd-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.bkd-form-group[hidden] { display: none; } /* the explicit display:flex above otherwise beats the UA [hidden] rule */
.bkd-form-group label {
  font-family: var(--p-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-body);
}
.bkd-field-error {
  display: none;
  font-family: var(--p-font);
  font-size: 12.5px;
  font-weight: 600;
  color: #DC2626;
}
.bkd-form-group.has-error .bkd-field-error { display: block; }
.bkd-form-control {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--p-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-primary);
  background: var(--surface);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.bkd-form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  background: var(--surface-card);
}
.bkd-form-control::placeholder { color: var(--fg-faint); font-weight: 400; }
.bkd-form-control:disabled {
  background: var(--surface-2);
  color: var(--fg-muted);
  cursor: not-allowed;
}
/* "Choose Product" dropdown: the same pill as the inputs with our own chevron (the native arrow is dropped). The chevron is
   repeated for :focus because .bkd-form-control:focus resets `background` with a shorthand. */
.bkd-select,
.bkd-select:focus {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 46px;
  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='%2364748B' stroke-width='2.5' 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 18px center;
  background-size: 16px 16px;
}
.bkd-select:invalid { color: var(--fg-faint); font-weight: 400; } /* looks like the placeholders until a product is chosen */
.bkd-select option { color: var(--fg-primary); font-weight: 500; }

/* Styled "Choose Product" dropdown (book_a_demo.php builds it from the select above; the select stays as the form's real field,
   hidden, and the plain select styling above is the no-JS fallback). */
.bkd-dropdown { position: relative; }
.bkd-dropdown.is-open { z-index: 30; }
.bkd-dropdown.is-enhanced .bkd-select {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.bkd-dd-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 47px; /* matches the text inputs */
  padding-right: 46px;
  text-align: left;
  cursor: pointer;
}
.bkd-dd-trigger[aria-expanded='true'] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  background: var(--surface-card);
}
.bkd-dd-trigger-icon { display: inline-flex; flex-shrink: 0; color: var(--primary); }
.bkd-dd-trigger-icon:empty { display: none; }
.bkd-dd-trigger-icon svg { width: 18px; height: 18px; }
.bkd-dd-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkd-dd-value.is-placeholder { color: var(--fg-faint); font-weight: 400; }
.bkd-dd-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--fg-muted);
  transition: transform 0.25s ease, color 0.25s ease;
  pointer-events: none;
}
.bkd-dd-trigger[aria-expanded='true'] .bkd-dd-chevron { transform: rotate(180deg); color: var(--primary); }
.bkd-dd-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(340px, 60vh);
  overflow-y: auto;
  background: var(--surface-card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 22px 44px -14px rgba(15, 23, 42, 0.24), 0 4px 14px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.bkd-dropdown.is-open .bkd-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.bkd-dd-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  border-radius: 12px;
  font-family: var(--p-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}
.bkd-dd-option.is-active { background: rgba(var(--accent-rgb), 0.09); }
.bkd-dd-option.is-selected { font-weight: 700; }
.bkd-dd-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}
.bkd-dd-opt-icon svg { width: 18px; height: 18px; }
.bkd-dd-option.is-active .bkd-dd-opt-icon,
.bkd-dd-option.is-selected .bkd-dd-opt-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-deep) 100%);
  color: #fff;
}
.bkd-dd-opt-label { flex: 1; min-width: 0; }
.bkd-dd-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); opacity: 0; stroke-width: 2.6; }
.bkd-dd-option.is-selected .bkd-dd-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bkd-dd-panel, .bkd-dd-chevron { transition: none; }
}

/* OTP verification */
.bkd-otp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bkd-otp-row .bkd-form-control { flex: 1; min-width: 0; }
.bkd-otp-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
  color: #fff;
  font-family: var(--p-font);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.bkd-otp-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bkd-otp-send:active { filter: brightness(0.92); transform: translateY(0) scale(0.98); }
.bkd-otp-send:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  filter: none;
  transform: none;
}
.bkd-otp-send.is-verified {
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
}
.bkd-otp-send.is-verified:disabled {
  opacity: 1;
  cursor: default;
}
.bkd-otp-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bkd-otp-verify {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
  color: var(--fg-body);
  font-family: var(--p-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.bkd-otp-verify:hover { border-color: var(--primary); color: var(--primary); }
.bkd-otp-verify:disabled { cursor: not-allowed; opacity: 0.55; }
.bkd-otp-verify[hidden] { display: none; }
.bkd-otp-error {
  display: none;
  font-family: var(--p-font);
  font-size: 13px;
  font-weight: 600;
  color: #DC2626;
  margin-top: 8px;
}
.bkd-otp-error.is-visible { display: block; }
.bkd-otp-success {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--p-font);
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
  margin-top: 8px;
}
.bkd-otp-success.is-visible { display: flex; }
.bkd-otp-success [data-lucide] { width: 14px; height: 14px; stroke: #16A34A; }
.bkd-form-group.has-error .bkd-form-control { border-color: #DC2626; }

.bkd-form-submit {
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
  margin-top: 6px;
}

/* TRUSTED BY — logo carousel, ported verbatim from index.css */
.bkd-intro + .client-section { padding-top: 16px; }
.client-divider-label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px 20px;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid #e8eaf0;
}
.client-divider-label::before,
.client-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d1d5db;
}
.client-divider-label span {
  font-family: var(--p-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}
.client-carousel-block { position: relative; overflow: hidden; padding: 10px 0; }
.client-carousel-full { padding: 4px 0; }
.logo-track-wrapper { display: flex; flex-direction: column; }
.logo-track {
  display: flex;
  gap: 40px;
  width: max-content;
  will-change: transform;
}
.logo-track.row-1 { animation: scrollLeft 18s linear infinite; }
.logo-card {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  height: 72px;
  background: var(--plate);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 599px) {
  .client-divider-label {
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px 16px;
  }
  .client-divider-label::before,
  .client-divider-label::after { display: none; }
  .client-divider-label span {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
}
@media (max-width: 480px) {
  .logo-card { width: 118px; height: 72px; }
}

/* "PREFER TO SEE IT LIVE?" — end-of-page CTA. Deliberately reuses */

/* RESPONSIVE */
@media (max-width: 1100px) {
  .bkd-intro-grid { grid-template-columns: 1fr 480px; gap: 40px; }
  /* copy column narrows a lot here (form column goes fixed 480px); */
  .bkd-intro-checklist { grid-template-columns: 1fr; row-gap: 12px; }
  .bkd-intro-check-icon { width: 30px; height: 30px; }
  .bkd-intro-check-icon [data-lucide] { width: 14px; height: 14px; }
  .bkd-intro-checklist li > span:last-child { font-size: 13px; line-height: 1.4; padding-top: 4px; }
}
@media (max-width: 899px) {
  .bkd-intro { padding: 104px 16px 16px; }
  .bkd-intro-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Form card reads first on mobile/tablet (owner ask) — source order */
  .bkd-intro-copy { text-align: center; order: 2; }
  .bkd-intro-checklist li { text-align: left; }
  .bkd-form-card-wrap { max-width: 600px; margin: 0 auto; order: 1; }
}
@media (max-width: 599px) {
  .bkd-intro { padding: 100px 16px 16px; }
  .bkd-intro-checklist { grid-template-columns: 1fr; }
  .bkd-form-card { padding: 26px 20px; }
  .bkd-otp-row { flex-wrap: wrap; }
  .bkd-otp-send { flex: 1; }
  .bkd-otp-input-row { flex-wrap: wrap; }
  .bkd-otp-verify { flex: 1; }
}

/* CALL PILLS — compact secondary CTAs beside "Talk to an Expert" */
.snl-help-bar-calls {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.snl-help-bar-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--cta-btn-bg);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--on-cta) !important;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.snl-help-bar-call [data-lucide] { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.2; flex-shrink: 0; }
.snl-help-bar-call:hover { filter: brightness(1.08); transform: translateY(-1px); }
.snl-help-bar-call:active { filter: brightness(0.92); transform: translateY(0) scale(0.98); }
.snl-help-bar-call:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .55);
}
@media (max-width: 768px) {
  .snl-help-bar-calls { width: 100%; align-items: center; }
  .snl-help-bar-call { width: 100%; max-width: 280px; }
}
/* Tap targets — 44 px controls on touch screens */
@media (max-width: 767px), (pointer: coarse) {
  .snl-help-bar-call { min-height: 44px; }
}

/* Phones: the phone field and Get OTP share a row; give the field the room so "10-digit mobile number" isn't cut off. */
@media (max-width: 480px) {
  .bkd-otp-row { gap: 8px; }
  .bkd-otp-row .bkd-form-control { padding-left: 14px; padding-right: 10px; font-size: 14px; }
  .bkd-otp-row .bkd-form-control::placeholder { font-size: 13px; }
  .bkd-otp-send { padding: 0 12px; font-size: 13px; }
}