/* =============================================================================
   X3WEB — business models
   -----------------------------------------------------------------------------
   The /business-models hub and one page per model, in the Marketing Pack
   manner of x3.css: flat blocks that touch, hairline lists, spaced-capital
   labels, white square cards and orange pills.

   Every colour, shadow, space and easing comes from the tokens in x3.css.
   What is here is the furniture those blocks do not already provide: framed
   product screenshots, the income-stream cards, the tabbed switchers, the
   screenshot galleries, the pinned showcase, the hub's model cards and the
   lightbox.

   The website-management pages share the screenshot frames, splits, lists,
   callout, call-to-action row and lightbox, so those rules stay generic: they
   style the bm-* class wherever it appears.

   Product screens are framed and carry --shadow-2; cards rest on --shadow-1;
   the lightbox and the pins' labels sit on --shadow-3.
   ============================================================================= */


/* ── The one idea, directly under the hero ─────────────────────────────────── */

.bm-idea__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-muted);
}
.bm-idea__line > svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
}
.bm-idea__line > strong {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* The sentence takes its own line under the statement. */
.bm-idea__line > span { flex-basis: 100%; }


/* ── Screenshot frames ─────────────────────────────────────────────────────── */

/*
 * A product screen, drawn in a plain browser or phone frame so it reads as
 * software rather than as a loose picture. Frames are square, white and lifted
 * off the block on --shadow-2.
 */
.bm-shot {
  min-width: 0;
  margin: 0;
}

.bm-frame {
  position: relative;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}

.bm-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.75rem;
  padding-inline: 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--footer);
}
.bm-frame__bar > span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--line-strong);
}
.bm-frame__bar > span:first-child { background: var(--accent); }
/* Thumbnail-sized screens get a slimmer bar. */
.bm-strip .bm-frame__bar { gap: 0.3rem; height: 1.25rem; padding-inline: 0.5rem; }
.bm-strip .bm-frame__bar > span { width: 0.375rem; height: 0.375rem; }

.bm-frame__screen {
  position: relative;
  aspect-ratio: 1 / var(--bm-ratio, 0.625);
  background: var(--scene);
}
.bm-frame__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  cursor: zoom-in;
}

/* A phone: a white bezel with a speaker slot above the screen. */
.bm-frame--phone { padding: 0.5rem; }
.bm-frame__notch {
  width: 28%;
  height: 0.3125rem;
  margin: 0.125rem auto 0.5rem;
  border-radius: 999px;
  background: var(--line-strong);
}
.bm-frame--phone .bm-frame__screen { overflow: hidden; }

.bm-shot figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}


/* ── Screenshot beside text ────────────────────────────────────────────────── */

.bm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.25rem + 3.5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .bm-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-split--rev > .bm-split__media { order: 2; }
}
.bm-split__media,
.bm-split__copy { min-width: 0; }

/* Copy written with bare paragraphs reads as body text. Kept at zero
   specificity so a page's own classes always win. */
:where(.bm-split__copy, .bm-trip__copy) > p:not([class]) {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-muted);
}
:where(.bm-split__copy, .bm-trip__copy) > .x3-h2 + * { margin-top: 1.5rem; }
:where(.bm-split__copy, .bm-trip__copy) > p + p { margin-top: 1rem; }
/* Links inside the copy beside a screenshot: the orange text link. */
:where(.bm-split__copy, .bm-trip__copy) p a:not([class]) {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(196 63 0 / 0.45);
  transition: text-decoration-color 0.2s var(--ease);
}
:where(.bm-split__copy, .bm-trip__copy) p a:not([class]):hover { text-decoration-color: currentColor; }
:where(.bm-split__copy, .bm-trip__copy) > * + .bm-list { margin-top: 1.75rem; }

/* Screenshot, text, screenshot. Below 1100px the text leads and the two
   screens sit side by side under it. */
.bm-trip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}
.bm-trip > * { min-width: 0; }
.bm-trip__copy { order: -1; }
@media (min-width: 640px) {
  .bm-trip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-trip__copy { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bm-trip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
  }
  .bm-trip__copy { order: 0; grid-column: auto; }
}
/* A third of the width: the heading steps down so it does not stack word by word. */
.bm-trip__copy .x3-h2 { font-size: clamp(2rem, 1.45rem + 1.5vw, 2.875rem); }


/* ── Galleries of screens ──────────────────────────────────────────────────── */

.bm-grid2,
.bm-grid3,
.bm-bento,
.bm-strip {
  --bm-gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-gap);
  margin-top: clamp(2.75rem, 2rem + 2.4vw, 4.5rem);
}
.bm-strip {
  --bm-gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .bm-grid3,
  .bm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .bm-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .bm-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bm-bento > * { grid-column: span 2; }
  .bm-bento > .bm-bento--lg { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .bm-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Two across with an odd count: the last screen centres under the others
   instead of hanging off the left. */
@media (max-width: 639.98px) {
  .bm-strip > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--bm-gap)) / 2);
  }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .bm-grid3 > :last-child:nth-child(odd),
  .bm-bento > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--bm-gap)) / 2);
  }
}

/* One screen on its own, centred under a split. */
.bm-single {
  max-width: 54rem;
  margin: clamp(2.75rem, 2rem + 2.4vw, 4.5rem) auto 0;
}

/* A screen with a short heading and list under it. */
.bm-feature__title { margin: 1.75rem 0 1.25rem; }

/* Four phones, the middle two raised. Below 900px they become a row you
   swipe, with the scrollbar left visible so it is clear there is more. */
.bm-phones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  align-items: end;
  max-width: 66rem;
  margin: 0 auto;
  padding-top: 1.5rem;
}
.bm-phones > :nth-child(2),
.bm-phones > :nth-child(3) { transform: translateY(-1.5rem); }

.bm-swipe {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.bm-swipe svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  animation: bm-nudge 1.8s var(--ease) infinite;
}
@keyframes bm-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@media (max-width: 899.98px) {
  .bm-phones {
    display: flex;
    gap: 1rem;
    max-width: none;
    margin-inline: calc(var(--pad-x) * -1);
    padding: 1.75rem var(--pad-x) 2.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--line);
  }
  .bm-phones::-webkit-scrollbar { height: 6px; }
  .bm-phones::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; }
  .bm-phones::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
  .bm-phones > * {
    flex: 0 0 min(62%, 15rem);
    scroll-snap-align: center;
  }
  .bm-phones > :nth-child(2),
  .bm-phones > :nth-child(3) { transform: none; }
  .bm-swipe { display: flex; }
}


/* ── Lists ─────────────────────────────────────────────────────────────────── */

/* Hairline rows, each led by a short orange dash. */
.bm-list {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
}
.bm-list li {
  position: relative;
  padding: 0.875rem 0 0.875rem 2rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
}
.bm-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.875rem + 0.775em);
  width: 1rem;
  height: 1px;
  background: var(--accent);
}

/* "What's included": two columns of hairline rows, each with an orange tick. */
.bm-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  max-width: 64rem;
  margin-inline: auto;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 768px) {
  .bm-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bm-check li {
  position: relative;
  padding: 1rem 0 1rem 2.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
.bm-check li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: calc(1rem + 0.75em - 0.4rem);
  width: 0.8rem;
  height: 0.42rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}


/* ── The package: photograph and price, two touching panels ────────────────── */

/* The split itself is .x3-split with an .x3-media panel (x3.css); this is
   what sits in the copy panel. */
.bm-package__body .x3-h2 + .x3-lede { margin-top: 1.25rem; }
.bm-package__body .x3-lede + .bm-list { margin-top: 1.75rem; }

.bm-package__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: 2.25rem;
}
.bm-package__fig {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.bm-package__note {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.bm-package__host {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.bm-package__host strong { color: var(--ink); }

/* The price as one line, in a call-to-action block. */
.bm-price-line {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.bm-price-line strong {
  margin-right: 0.25rem;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 420;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bm-price-line span { margin-inline: 0.35rem; }

/* The price under "What's Included". */
.bm-included__price {
  max-width: 42rem;
  margin-inline: auto;
  text-wrap: balance;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.bm-included__price strong {
  margin-right: 0.15rem;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 420;
  letter-spacing: -0.03em;
  color: var(--ink);
}


/* ── Income streams ────────────────────────────────────────────────────────── */

.bm-streams {
  --bm-gap: clamp(0.875rem, 0.6rem + 0.9vw, 1.375rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-gap);
}
@media (min-width: 640px) {
  .bm-streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .bm-streams > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--bm-gap)) / 2);
  }
}
@media (min-width: 1024px) {
  .bm-streams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bm-stream {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.bm-stream:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
/* The streams that earn first carry an orange rule along the top. */
.bm-stream--lead { box-shadow: inset 0 3px 0 var(--accent), var(--shadow-1); }
.bm-stream--lead:hover { box-shadow: inset 0 3px 0 var(--accent), var(--shadow-2); }

/* "1 ——" */
.bm-stream__num {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bm-stream__num::after {
  content: '';
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
}
.bm-stream h3 {
  margin-top: 0.5rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bm-stream p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.bm-stream__who {
  align-self: stretch;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* "See the screen": a text link that opens the screenshot in the lightbox. */
.bm-stream__see {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgb(196 63 0 / 0.45);
  cursor: pointer;
  transition: text-decoration-color 0.2s var(--ease);
}
.bm-stream__see:hover { text-decoration-color: currentColor; }
.bm-stream__see svg { flex: none; width: 0.875rem; height: 0.875rem; transition: transform 0.25s var(--ease); }
.bm-stream__see:hover svg { transform: translateX(3px); }

.bm-streams__foot {
  margin-top: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  text-align: center;
}
.bm-streams__foot > strong {
  display: block;
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.bm-streams__foot .x3-btnrow { margin-top: 1.75rem; }


/* ── Three steps ───────────────────────────────────────────────────────────── */

/* The cards themselves are .x3-step (x3.css); this lays three across. */
.bm-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.875rem, 0.6rem + 0.9vw, 1.375rem);
}
@media (min-width: 768px) {
  .bm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bm-steps h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bm-steps + .x3-btnrow { margin-top: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem); }


/* ── Tabbed screens ────────────────────────────────────────────────────────── */

.bm-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin: 0 0 clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  list-style: none;
}
.bm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--line-control);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.25s var(--ease);
}
.bm-tab:hover {
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-1);
}
.bm-tab[aria-selected='true'] {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-ink);
}

/* A long set of tabs wraps onto balanced rows rather than leaving one alone. */
@media (min-width: 900px) {
  .bm-tabs__list {
    display: block;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  .bm-tabs__list > li {
    display: inline-block;
    margin: 0 0.25rem 0.625rem;
  }
  .bm-tabs__list { margin-bottom: clamp(1.125rem, 0.6rem + 1.5vw, 2.125rem); }
}

/* Never a sideways scroll: below the full row the tabs take equal widths,
   three across, then two on a phone, and a short last row stays centred.
   Every tab stays visible and tappable. */
@media (max-width: 899.98px) {
  .bm-tabs__list > li { flex: 0 0 calc((100% - 2 * 0.625rem) / 3); }
  .bm-tab { width: 100%; padding-inline: 0.75rem; }
}
@media (max-width: 559.98px) {
  .bm-tabs__list > li { flex-basis: calc((100% - 0.625rem) / 2); }
}

.bm-panel {
  display: none;
  max-width: 68rem;
  margin-inline: auto;
}
.bm-panel[data-active='true'] { display: block; }
.bm-panel__note {
  max-width: 44rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-muted);
}


/* ── Callout ───────────────────────────────────────────────────────────────── */

.bm-callout {
  max-width: 56rem;
  margin: clamp(2.25rem, 1.8rem + 1.5vw, 3rem) auto 0;
  padding: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem) clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  box-shadow: var(--shadow-1);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
}


/* ── The pinned showcase ───────────────────────────────────────────────────── */

.bm-pinwrap {
  position: relative;
  max-width: 72rem;
  margin-inline: auto;
}
.bm-pin {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 5px rgb(255 85 0 / 0.2), var(--shadow-accent);
  transition: background-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.bm-pin:hover,
.bm-pin[data-open='true'] {
  background: var(--accent-hover);
  box-shadow: 0 0 0 7px rgb(255 85 0 / 0.22), var(--shadow-accent-hover);
}
/* The pin's label: a white card above it. */
.bm-pin::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.875rem);
  padding: 0.5rem 0.875rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  translate: -50% 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), translate 0.22s var(--ease);
}
.bm-pin:hover::after,
.bm-pin:focus-visible::after,
.bm-pin[data-open='true']::after {
  opacity: 1;
  translate: -50% 0;
}


/* ── The hub: one card per business model ──────────────────────────────────── */

.bm-models {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
}
@media (min-width: 1024px) {
  .bm-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bm-model {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.bm-model:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
/* The screen sits on a warm stone panel at the top of the card. */
.bm-model__media {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  background: var(--stone-warm);
}
.bm-model__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);
}
.bm-model__body .x3-eyebrow { margin-bottom: 0.25rem; }
.bm-model__title {
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem);
  font-weight: 420;
  line-height: 1.08;
  letter-spacing: -0.034em;
  color: var(--ink);
}
.bm-model__line {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-muted);
}
.bm-model__count {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.bm-model__count::before {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
}
.bm-model__streams {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.bm-model__streams li {
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink);
}
.bm-model .x3-btnrow {
  margin-top: auto;
  padding-top: 1rem;
}


/* ── The call to action that closes a section ──────────────────────────────── */

.bm-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem 1rem;
  margin-top: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
}

/* "View the Live Site": the quiet pill, with a dot marking it as a live demo. */
.bm-live { gap: 0.625rem; }
.bm-live__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(255 85 0 / 0.18);
}


/* ── Lightbox ──────────────────────────────────────────────────────────────── */

.bm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: clamp(4rem, 3rem + 3vw, 5rem) clamp(1rem, 0.4rem + 3vw, 3.5rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  background: rgb(28 28 25 / 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.bm-lightbox[data-open='true'] { display: flex; }
.bm-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
  object-fit: contain;
  background: var(--card);
  box-shadow: var(--shadow-3);
}
.bm-lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
  right: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  box-shadow: var(--shadow-2);
  transition: transform 0.2s var(--ease);
}
.bm-lightbox__close:hover { transform: rotate(90deg); }
.bm-lightbox figcaption {
  max-width: min(100%, 44rem);
  padding: 0.625rem 1.125rem;
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}
.bm-lightbox figcaption:empty { display: none; }


/* ── Click-to-load walkthrough video ───────────────────────────────────────── */

.bm-video-head { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.bm-video {
  position: relative;
  overflow: hidden;
  max-width: 68rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--scene);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.bm-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bm-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* The play button covers the poster; its words sit on white cards so they
   read on any frame of the video. */
.bm-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 0;
  background: rgb(28 28 25 / 0.18);
  color: var(--ink);
}
.bm-video__disc {
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--shadow-accent-hover);
  transition: transform 0.25s var(--ease);
}
.bm-video__disc::before {
  content: '';
  margin-left: 0.3rem;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.3rem;
  border-color: transparent transparent transparent #fff;
}
.bm-video__play:hover .bm-video__disc { transform: scale(1.05); }
.bm-video__label,
.bm-video__note {
  padding: 0.35rem 0.875rem;
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.bm-video__label { font-size: 1.125rem; font-weight: 500; }
.bm-video__note { font-size: 0.875rem; color: var(--ink-muted); }


/* ── Phones: centred, as the rest of the site ──────────────────────────────── */

/*
 * Below 768px blocks centre their content (x3.css). The family's own parts
 * follow: lists lose their dash and centre between hairlines, as the Marketing
 * Pack's lists do; cards stack their contents on the centre line.
 */
@media (max-width: 767.98px) {
  .bm-list li,
  .bm-check li {
    padding-inline: 0;
    text-align: center;
  }
  .bm-list li::before,
  .bm-check li::before { display: none; }

  .bm-package__price { justify-content: center; }

  .bm-stream { align-items: center; }
  .bm-stream__see { align-self: center; }
  .bm-stream__num::before {
    content: '';
    flex: none;
    width: 2.5rem;
    height: 1px;
    background: var(--accent);
  }

  .bm-model__body { align-items: center; }
  .bm-model__streams { justify-content: center; }
  .bm-model__count { justify-content: center; }
  .bm-model__count::after {
    content: '';
    flex: none;
    width: 1.75rem;
    height: 1px;
    background: var(--accent);
  }

  /* The accent moves to the top edge, over centred text. */
  .bm-callout {
    border-left: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    text-align: center;
  }

  .bm-pin { width: 1.625rem; height: 1.625rem; font-size: 0.75rem; }
}