/* Becomy Studio — public marketing site
   Theme: Neon Nightshift — near-black, neon yellow-green, video-first, Awwwards bar */

:root {
  --bm-bg: #0a0b0d;
  --bm-bg-2: #101216;
  --bm-bg-3: #15181d;
  --bm-ink: #f2f5ee;
  --bm-muted: #98a29a;
  --bm-neon: #d4ff3f;
  --bm-neon-soft: rgba(212, 255, 63, 0.16);
  --bm-neon-glow: rgba(212, 255, 63, 0.35);
  --bm-line: rgba(242, 245, 238, 0.12);
  --bm-line-soft: rgba(242, 245, 238, 0.07);
  --bm-radius: 20px;
  --bm-max: 1200px;
  --bm-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --bm-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--bm-neon); color: #0a0b0d; }

.bm-body {
  margin: 0;
  font-family: var(--bm-body);
  color: var(--bm-ink);
  background: var(--bm-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.bm-body a { color: inherit; text-decoration: none; }
.bm-body img { max-width: 100%; display: block; }

.bm-shell { min-height: 100vh; }

/* Film grain overlay */
.bm-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(/%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ————— Nav ————— */
.bm-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 13, 0.92);
  border-bottom: 1px solid var(--bm-line-soft);
}

.bm-nav-inner {
  max-width: var(--bm-max);
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.bm-logo {
  font-family: var(--bm-display);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
}
.bm-logo-mark {
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(212, 255, 63, 0.28));
}
.bm-logo:hover .bm-logo-mark {
  filter: drop-shadow(0 0 9px rgba(212, 255, 63, 0.52));
}
.bm-logo-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  color: currentColor;
}
.bm-logo-master {
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}
.bm-logo-product {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 0.96;
}

/* ————— Mega-menu ————— */
/* Surfaces resolve to the Open Daylight tokens on every marketing page; the
   fallbacks keep the panel readable if a page ships without the daylight sheet. */
.bm-nav {
  --bm-mega-surface: var(--bmh-panel, #ffffff);
  --bm-mega-quiet: var(--bmh-mist, #f1f3ea);
  --bm-mega-paper: var(--bmh-paper, #fbfcf7);
  --bm-mega-ink: var(--bmh-ink, #121511);
  --bm-mega-muted: var(--bmh-muted, #687067);
  --bm-mega-line: var(--bmh-line, #dde1d8);
  --bm-mega-accent: var(--bmh-acid-ink, #687a00);
}

.bm-nav-links {
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline-start: 14px;
}

.bm-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--bm-mega-muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.bm-nav-trigger:hover,
.bm-nav-trigger:focus-visible { color: var(--bm-mega-ink); background: rgba(18, 21, 17, 0.05); }
.bm-nav-trigger[aria-expanded="true"] { color: var(--bm-mega-ink); background: var(--bm-mega-quiet); }

.bm-nav-chevron { width: 9px; height: 9px; opacity: .55; transition: transform .18s ease; }
[aria-expanded="true"] > .bm-nav-chevron { transform: rotate(180deg); }

.bm-nav-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.bm-nav-login { font-size: 0.9rem; font-weight: 500; color: var(--bm-mega-muted); }
.bm-nav-login:hover { color: var(--bm-mega-ink); }

/* Dims the page below the open panel. Lives inside the panel so the header bar
   itself never darkens. */
.bm-mega-scrim {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: 100vh;
  background: rgba(18, 21, 17, 0.28);
}

.bm-mega {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 39;
  color: var(--bm-mega-ink);
  background: var(--bm-mega-surface);
  border-bottom: 1px solid var(--bm-mega-line);
  box-shadow: 0 26px 60px rgba(18, 21, 17, 0.10);
}

.bm-mega-inner {
  max-width: var(--bmh-max, var(--bm-max));
  margin: 0 auto;
  padding: 30px 22px 24px;
  display: grid;
  gap: 30px;
}

.bm-mega-inner--cards { grid-template-columns: minmax(0, 1fr) 268px; }
.bm-mega-inner--columns { grid-template-columns: minmax(0, 1fr) 252px; }

/* Community: a clear forum entrance, resources, and the members' reading shelf. */
.bm-community-menu { display: grid; grid-template-columns: 1.1fr 1fr .85fr; grid-template-areas: "forum explore reading" "personal personal personal"; gap: 24px 32px; }
.bm-community-feature { grid-area: forum; display: flex; flex-direction: column; border: 1px solid var(--bm-mega-line); border-radius: 14px; overflow: hidden; background: var(--bm-mega-quiet); color: var(--bm-mega-ink); }
img.bm-community-feature-image { display: block; width: 100%; height: 128px; object-fit: cover; object-position: 50% 42%; }
.bm-community-feature-copy { display: grid; gap: 8px; padding: 20px; }
.bm-community-feature-copy .bm-mega-kicker { margin: 0; }
.bm-community-feature-title { font-family: var(--bm-display); font-size: 1.45rem; line-height: 1.2; letter-spacing: -.025em; }
.bm-community-feature-lead { color: var(--bm-mega-muted); font-size: .9rem; line-height: 1.5; }
.bm-community-feature-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 4px; font-size: .95rem; font-weight: 650; }
.bm-community-menu svg, .bm-community-question svg { width: 23px; height: 23px; flex-shrink: 0; }
.bm-community-group--explore { grid-area: explore; }
.bm-community-group--reading { grid-area: reading; padding-inline-start: 24px; border-inline-start: 1px solid var(--bm-mega-line); }
.bm-community-group--personal { grid-area: personal; border-top: 1px solid var(--bm-mega-line); padding-top: 20px; }
.bm-community-group--personal .bm-community-group-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bm-community-group > .bm-mega-col-title { margin-block: 6px 16px; }
.bm-community-link { display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px; margin-inline: -8px; border-radius: 10px; transition: color .16s ease, background-color .16s ease; }
.bm-community-link strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.4; }
.bm-community-link small { display: block; margin-top: 4px; font-size: .85rem; line-height: 1.5; color: var(--bm-mega-muted); }
.bm-community-link-icon { color: var(--bm-mega-accent); display: flex; padding-top: 1px; }
a.bm-community-link:hover, a.bm-community-link:focus-visible { background: var(--bm-mega-quiet); color: var(--bm-mega-accent); }
.bm-community-feature { transition: border-color .16s ease, background-color .16s ease; }
.bm-community-feature:hover { border-color: var(--bm-mega-accent); background: #edf1df; }
.bm-community-feature:focus-visible, .bm-community-link:focus-visible, .bm-community-question:focus-visible { outline: 2px solid var(--bm-mega-accent); outline-offset: 4px; }
.bm-community-books { display: flex; align-items: flex-end; gap: 8px; padding-block: 5px 14px; }
.bm-community-books img { width: calc((100% - 16px) / 3); max-width: 72px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px 5px 5px 2px; box-shadow: 2px 4px 8px #1215111a; }
.bm-community-question { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--bm-mega-ink); margin-inline-start: auto; }
#bm-mega-community .bm-mega-bar-inner { flex-wrap: wrap; gap: 8px 20px; padding-block: 6px; }
@media (max-width: 1023px) {
  .bm-community-menu { grid-template-columns: 1fr; grid-template-areas: "forum" "explore" "reading" "personal"; gap: 20px; padding-top: 8px; }
  img.bm-community-feature-image { display: none; }
  .bm-community-feature-copy { padding: 16px; }
  .bm-community-feature-title { font-size: 1.25rem; }
  .bm-community-feature-lead, .bm-community-link small { font-size: .9rem; }
  .bm-community-group--reading { border-inline-start: 0; border-top: 1px solid var(--bm-mega-line); padding: 20px 0 0; }
  .bm-community-group--personal .bm-community-group-links { grid-template-columns: 1fr; gap: 0; }
  #bm-acc-community > .bm-community-question { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-community-feature, .bm-community-link { transition: none; }
}

.bm-mega-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.bm-mega-card { display: block; }
.bm-mega-card-media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--bm-mega-line);
  border-radius: 14px;
  background: var(--bm-mega-quiet);
  aspect-ratio: 4 / 3;
}
.bm-mega-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.bm-mega-card:hover .bm-mega-card-media img { transform: scale(1.03); }

.bm-mega-card-label {
  display: block;
  margin-top: 11px;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
a.bm-mega-card:hover .bm-mega-card-label { color: var(--bm-mega-accent); }
.bm-mega-card-lead {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bm-mega-muted);
}

.bm-mega-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: start;
}

.bm-mega-col { flex: 0 1 180px; min-width: 0; }
.bm-mega-col--dense { flex-basis: 388px; }

.bm-mega-col-title {
  margin: 0 0 11px;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bm-mega-muted);
}

.bm-mega-col--dense .bm-mega-col-links { column-count: 2; column-gap: 20px; }

.bm-mega-link {
  display: block;
  padding: 6px 9px;
  margin-inline-start: -9px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background .14s ease, color .14s ease;
}
a.bm-mega-link:hover { background: var(--bm-mega-quiet); color: var(--bm-mega-accent); }
.bm-mega-link small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bm-mega-muted);
}

/* Destinations that are not written yet: inert text, never a dead href. */
.is-soon { cursor: default; }
.bm-mega-link.is-soon,
.bm-acc-link.is-soon { color: color-mix(in srgb, var(--bm-mega-muted) 60%, transparent); }
.bm-mega-link.is-soon small { color: inherit; }

.bm-mega-more {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--bm-mega-accent);
  border-bottom: 1px solid rgba(104, 122, 0, 0.35);
}
.bm-mega-more:hover { border-bottom-color: currentColor; }

.bm-mega-rail {
  padding: 20px;
  border: 1px solid var(--bm-mega-line);
  border-radius: 16px;
  background: var(--bm-mega-quiet);
}
.bm-mega-kicker {
  margin: 0 0 10px;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-mega-accent);
}
.bm-mega-quote {
  margin: 0;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.bm-mega-sign { margin: 8px 0 0; font-size: 0.84rem; color: var(--bm-mega-muted); }
.bm-mega-rail-media {
  width: 100%;
  border: 1px solid var(--bm-mega-line);
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bm-mega-rail-title {
  margin: 12px 0 0;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.bm-mega-rail-lead { margin: 6px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--bm-mega-muted); }
.bm-mega-rail-lead b { color: var(--bm-mega-ink); font-weight: 600; }
.bm-mega-rail--poster { padding: 14px; }

.bm-mega-bar { border-top: 1px solid var(--bm-mega-line); background: var(--bm-mega-paper); }
.bm-mega-bar-inner {
  max-width: var(--bmh-max, var(--bm-max));
  margin: 0 auto;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--bm-mega-muted);
}
.bm-mega-bar-inner b { color: var(--bm-mega-ink); font-weight: 600; }
.bm-mega-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bm-mega-line); }

/* ————— Mobile drawer ————— */
.bm-drawer { border-top: 1px solid var(--bm-mega-line); background: var(--bm-mega-paper); }
.bm-drawer-scroll { max-height: 68vh; overflow-y: auto; padding: 4px 18px 10px; }
.bm-acc { border-bottom: 1px solid var(--bm-mega-line); }
.bm-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  border: 0;
  background: none;
  font-family: var(--bmh-headline, var(--bm-display));
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--bm-mega-ink);
  cursor: pointer;
}
.bm-acc-body { padding: 0 2px 12px; }
.bm-acc-group {
  margin: 10px 0 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-mega-accent);
}
.bm-acc-link { display: block; padding: 8px 0; font-size: 0.95rem; color: var(--bm-mega-muted); }
a.bm-acc-link { color: var(--bm-mega-ink); }
.bm-drawer-foot { padding: 16px 18px 20px; border-top: 1px solid var(--bm-mega-line); background: var(--bm-mega-surface); }
.bm-drawer-foot .bm-btn-primary { width: 100%; justify-content: center; padding: 14px 20px; }
.bm-drawer-trust { margin: 11px 0 0; text-align: center; font-size: 0.84rem; color: var(--bm-mega-muted); }
.bm-drawer-trust b { color: var(--bm-mega-ink); font-weight: 600; }

@media (min-width: 1024px) {
  .bm-nav-links { display: flex; }
  .bm-burger { display: none; }
  .bm-drawer { display: none; }
}

@media (max-width: 1023px) {
  .bm-mega { display: none; }
  .bm-nav-login { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-nav-scrim,
  .bm-mega-card-media img { transition: none; }
}

.bm-crumbs {
  max-width: var(--bm-max);
  margin: 0 auto;
  padding: 12px 22px 6px;
}
.bm-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bm-muted);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}
.bm-crumbs li {
  display: inline-flex;
  align-items: center;
}
.bm-crumbs li:not(:last-child)::after {
  margin: 0 0.55rem;
  color: var(--bm-muted);
  content: "/";
  opacity: 0.7;
}
.bm-crumbs a {
  color: var(--bm-muted);
  text-decoration: none;
}
.bm-crumbs a:hover {
  color: var(--bm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bm-crumbs [aria-current="page"] {
  color: var(--bm-ink);
  font-weight: 650;
}

/* ————— Buttons ————— */
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--bm-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1.2), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.bm-btn:hover { transform: translateY(-2px); }
.bm-btn:active { transform: translateY(0) scale(.98); }

/* `.bm-body a { color: inherit }` est plus spécifique qu'une classe seule :
   on préfixe pour garder le texte sombre sur fond néon. */
.bm-btn-primary,
.bm-body .bm-btn-primary {
  background: var(--bm-neon);
  color: #0a0b0d;
  box-shadow: 0 0 0 0 var(--bm-neon-glow);
}

.bm-btn-primary:hover {
  background: #e2ff6b;
  box-shadow: 0 8px 34px var(--bm-neon-glow);
}
.bm-nav-actions .bm-btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(212, 255, 63, 0.45),
    0 8px 22px rgba(126, 151, 0, 0.28),
    0 0 28px var(--bm-neon-glow);
}
.bm-nav-actions .bm-btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(212, 255, 63, 0.6),
    0 10px 34px var(--bm-neon-glow),
    0 0 36px rgba(212, 255, 63, 0.5);
}
.bm-nav-actions .bm-btn-primary::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  transform: translateX(-80%);
  mix-blend-mode: soft-light;
  animation: bm-nav-shine 3.6s ease-in-out infinite;
}
@keyframes bm-nav-shine {
  0%, 55% { transform: translateX(-80%); }
  75%, 100% { transform: translateX(80%); }
}

.bm-btn-secondary {
  background: transparent;
  border-color: var(--bm-line);
  color: var(--bm-ink);
}

.bm-btn-secondary:hover { border-color: var(--bm-neon); color: var(--bm-neon); }

.bm-btn-ghost {
  background: transparent;
  color: var(--bm-muted);
}

.bm-btn-ghost:hover { color: var(--bm-neon); background: rgba(212, 255, 63, 0.06); }

.bm-btn-dark {
  background: var(--bm-bg-3);
  border-color: var(--bm-line);
  color: var(--bm-ink);
}

.bm-btn-lg { padding: 15px 26px; font-size: 1.02rem; }

/* ————— Hero (video-first) ————— */
.bm-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.bm-hero-video-wrap {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  will-change: transform;
}

.bm-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Avoid continuous CSS filters on full-bleed video (compositor cost). */
}

.bm-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, 0.55) 0%, rgba(10, 11, 13, 0.25) 38%, rgba(10, 11, 13, 0.88) 82%, var(--bm-bg) 100%),
    radial-gradient(900px 420px at 12% 88%, rgba(212, 255, 63, 0.12), transparent 60%);
  pointer-events: none;
}

.bm-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--bm-max);
  margin: 0 auto;
  width: 100%;
  padding: 120px 22px 56px;
  display: grid;
  gap: 26px;
}

.bm-brand-mark {
  font-family: var(--bm-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 9.5vw, 7.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--bm-ink);
}

.bm-brand-mark em {
  font-style: normal;
  color: var(--bm-neon);
  text-shadow: 0 0 42px var(--bm-neon-glow);
}

.bm-hero h1 {
  font-family: var(--bm-display);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
  max-width: 30ch;
  color: var(--bm-ink);
}

.bm-hero-lead {
  font-size: 1.06rem;
  color: rgba(242, 245, 238, 0.78);
  margin: 0;
  max-width: 34rem;
}

.bm-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.bm-cta-note {
  width: 100%;
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--bm-muted);
}

/* Floating AI prompt card */
.bm-prompt {
  background: rgba(16, 18, 22, 0.92);
  border: 1px solid var(--bm-line);
  border-left: 3px solid var(--bm-neon);
  border-radius: 16px;
  padding: 16px 18px;
  max-width: 30rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.bm-prompt-label {
  margin: 0 0 6px;
  font-family: var(--bm-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-neon);
}

.bm-prompt p:last-child { margin: 0; color: rgba(242, 245, 238, 0.86); font-size: 0.98rem; }

/* Compact hero for inner pages (no video) */
.bm-hero--page { min-height: 56svh; align-items: center; }
.bm-hero--page .bm-hero-inner { padding: 100px 22px 60px; align-items: center; }
.bm-hero--page .bm-brand-mark { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }

/* ————— Sections ————— */
.bm-section {
  position: relative;
  padding: clamp(72px, 11vw, 130px) 22px;
}

.bm-section-inner {
  max-width: var(--bm-max);
  margin: 0 auto;
}

/* ————— Scènes d'ambiance en arrière-plan (frames Seedance) ————— */
.bm-has-scene { overflow: hidden; }
.bm-has-scene > :not(.bm-scene) { position: relative; z-index: 1; }

.bm-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bm-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.48;
  filter: saturate(0.9);
}

/* Voile + vignette : lisibilité du texte et fondu vers les sections noires voisines */
/* Scène du carrousel : une image par boutique, crossfade sur la boutique active */
.bm-scene--showcase img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.bm-scene--showcase img.is-visible { opacity: 0.68; }

/* Voile plus léger que les autres scènes : le paysage doit se voir */
.bm-scene--showcase::after {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10, 11, 13, 0.45) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, 0.85) 0%, rgba(10, 11, 13, 0.2) 26%, rgba(10, 11, 13, 0.2) 74%, rgba(10, 11, 13, 0.85) 100%);
}

.bm-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(10, 11, 13, 0.6) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, 0.95) 0%, rgba(10, 11, 13, 0.5) 28%, rgba(10, 11, 13, 0.5) 72%, rgba(10, 11, 13, 0.95) 100%);
}

.bm-kicker {
  font-family: var(--bm-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bm-neon);
  margin: 0 0 14px;
}

.bm-section h2 {
  font-family: var(--bm-display);
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 22ch;
}

.bm-section-lead {
  font-size: 1.08rem;
  color: var(--bm-muted);
  max-width: 40rem;
  margin: 0 0 34px;
}

/* ————— Film band : bande verticale 9:16, spotlight tournant ————— */
.bm-film-band { padding-bottom: 40px; }

.bm-film-rail {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: var(--bm-max);
  margin: 10px auto 0;
  padding: 0 22px;
}

.bm-film-panel {
  flex: none;
  width: calc((100% - 64px) / 5);
  cursor: pointer;
}

.bm-film-frame {
  position: relative;
  border-radius: var(--bm-radius);
  overflow: hidden;
  background: var(--bm-bg-2);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--bm-line-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}

.bm-film-panel:hover .bm-film-frame {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 255, 63, 0.25);
}

.bm-film-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Lime sleep wash via overlay (cheap) instead of multi-filter on decoded frames. */
  background:
    linear-gradient(180deg, transparent 55%, rgba(10, 11, 13, 0.72) 100%),
    rgba(18, 28, 8, 0.55);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.5s ease, background 0.5s ease;
  z-index: 1;
}

.bm-film-panel.is-live .bm-film-frame::after {
  background: linear-gradient(180deg, transparent 55%, rgba(10, 11, 13, 0.55) 100%);
  mix-blend-mode: normal;
}

.bm-film-video, .bm-film-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: opacity 0.35s ease;
}

/* Live panel: show video; idle: poster only (no decode). */
.bm-film-video {
  opacity: 0;
  pointer-events: none;
}

.bm-film-panel.is-live .bm-film-video { opacity: 1; }
.bm-film-panel.is-live .bm-film-poster { opacity: 0; }

/* Cadrage vertical : recentre les sujets des films tournés en 16:9 */
.bm-film-panel:nth-child(1) .bm-film-video { object-position: 62% 50%; }
.bm-film-panel:nth-child(4) .bm-film-video { object-position: 66% 50%; }
.bm-film-panel:nth-child(5) .bm-film-video { object-position: 42% 50%; }

.bm-film-panel.is-live .bm-film-frame {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(212, 255, 63, 0.55);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(212, 255, 63, 0.12);
}

.bm-film-panel .bm-film-caption { opacity: 0.45; transition: opacity 0.6s ease, color 0.6s ease; }
.bm-film-panel.is-live .bm-film-caption { opacity: 1; color: var(--bm-neon); }

@media (max-width: 767px) {
  .bm-film-rail {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .bm-film-rail::-webkit-scrollbar { display: none; }
  .bm-film-panel { width: 44vw; scroll-snap-align: center; }
}

.bm-film-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--bm-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--bm-neon);
  background: rgba(10, 11, 13, 0.82);
  border: 1px solid rgba(212, 255, 63, 0.3);
  border-radius: 8px;
  padding: 4px 9px;
}

.bm-film-caption {
  margin: 12px 2px 0;
  font-family: var(--bm-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bm-ink);
}

/* ————— Path (sticky numbers) ————— */
.bm-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.bm-path-step {
  display: grid;
  grid-template-columns: minmax(72px, 160px) 1fr;
  gap: 18px 28px;
  padding: 34px 0;
  border-top: 1px solid var(--bm-line-soft);
  align-items: start;
}

.bm-path-step:last-child { border-bottom: 1px solid var(--bm-line-soft); }

.bm-path-num {
  font-family: var(--bm-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bm-neon);
  transition: color .3s ease;
}

.bm-path-step:hover .bm-path-num { color: var(--bm-neon); }

.bm-path-step h3 {
  font-family: var(--bm-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
}

.bm-path-step p { margin: 0; color: var(--bm-muted); max-width: 46rem; }

/* ————— Features (alternating asymmetric grid) ————— */
.bm-feature-row {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: 34px 0;
}

.bm-feature-media {
  border-radius: var(--bm-radius);
  overflow: hidden;
  border: 1px solid var(--bm-line-soft);
  background: var(--bm-bg-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  transform: rotate(-1deg);
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}

.bm-feature-row--flip .bm-feature-media { transform: rotate(1deg); }
.bm-feature-row:hover .bm-feature-media { transform: rotate(0deg) scale(1.01); }

.bm-feature-media img { width: 100%; }

.bm-feature-copy h3 {
  font-family: var(--bm-display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 12px;
}

.bm-feature-copy p { color: var(--bm-muted); margin: 0 0 18px; max-width: 34rem; }

/* ————— Try (charcoal panel) ————— */
.bm-try {
  background: var(--bm-bg-2);
  border: 1px solid var(--bm-line-soft);
  border-radius: calc(var(--bm-radius) + 6px);
  padding: 22px;
}

.bm-try-hint { margin: 0 0 12px; color: var(--bm-muted); font-size: 0.95rem; }

.bm-try-form { display: flex; gap: 10px; flex-wrap: wrap; }

.bm-try-input {
  flex: 1 1 260px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--bm-line);
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: var(--bm-body);
  font-size: 0.98rem;
}

.bm-try-input:focus { outline: none; border-color: var(--bm-neon); box-shadow: 0 0 0 3px var(--bm-neon-soft); }
.bm-try-input::placeholder { color: rgba(152, 162, 154, 0.7); }

.bm-try-select {
  flex: 0 1 auto;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid var(--bm-line);
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: var(--bm-body);
  font-size: 0.92rem;
  cursor: pointer;
}

.bm-try-select:focus { outline: none; border-color: var(--bm-neon); box-shadow: 0 0 0 3px var(--bm-neon-soft); }

/* ————— Try : chat sandboxé ————— */
.bm-try-chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  margin: 0 0 14px;
  padding: 4px 2px;
  scroll-behavior: smooth;
}

.bm-try-bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bm-try-bubble--ai {
  align-self: flex-start;
  background: var(--bm-bg);
  border: 1px solid var(--bm-line-soft);
  color: var(--bm-ink);
  border-bottom-left-radius: 4px;
}

.bm-try-bubble--user {
  align-self: flex-end;
  background: var(--bm-neon);
  color: #0a0b0d;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}

.bm-try-bubble.is-pending {
  color: var(--bm-muted);
  animation: bm-try-pulse 1.2s ease-in-out infinite;
}

.bm-try-bubble.is-error { color: #ffb37a; border-color: rgba(255, 179, 122, 0.35); }

@keyframes bm-try-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.bm-try-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.bm-try-note { margin: 0; font-size: 0.88rem; color: var(--bm-muted); }
.bm-try-note-link { color: var(--bm-neon); font-weight: 600; text-decoration: none; }
.bm-try-note-link:hover { text-decoration: underline; }

.bm-try-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--bm-muted);
  white-space: nowrap;
}

.bm-try-quota-bar {
  width: 90px;
  height: 5px;
  border-radius: 999px;
  background: var(--bm-line-soft);
  overflow: hidden;
}

.bm-try-quota-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: var(--bm-neon);
  transition: width 0.5s ease;
}

.bm-try-quota-fill.is-hot { background: #ffb37a; }

.bm-try-quota-count { font-variant-numeric: tabular-nums; color: var(--bm-ink); }

/* ————— Try : recherche produits (lecture seule) ————— */
.bm-try-status { margin: 14px 0 0; font-size: 0.92rem; color: var(--bm-muted); }

.bm-try-results-meta {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--bm-muted);
  font-variant-numeric: tabular-nums;
}

.bm-try-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.bm-try-page-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--bm-line);
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: var(--bm-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.bm-try-page-btn:hover:not(:disabled) { border-color: var(--bm-neon); color: var(--bm-neon); }
.bm-try-page-btn:disabled { opacity: 0.35; cursor: default; }

.bm-try-page-indicator {
  font-size: 0.88rem;
  color: var(--bm-muted);
  font-variant-numeric: tabular-nums;
}

.bm-try-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.bm-try-product {
  background: var(--bm-bg);
  border: 1px solid var(--bm-line-soft);
  border-radius: 14px;
  padding: 10px;
  user-select: none;
  cursor: default;
}

.bm-try-product-media {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bm-bg-2);
  margin-bottom: 10px;
}

.bm-try-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.bm-try-product-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--bm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bm-try-product-prices { display: flex; flex-direction: column; gap: 3px; }

.bm-try-product-price {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.83rem;
}

.bm-try-product-price-label { color: var(--bm-muted); }
.bm-try-product-price-value { font-weight: 600; color: var(--bm-ink); }
.bm-try-product-price--resale .bm-try-product-price-value { color: var(--bm-neon); }

.bm-try-product-meta { margin: 8px 0 0; font-size: 0.78rem; color: var(--bm-muted); }

@media (max-width: 860px) {
  .bm-try-products { grid-template-columns: repeat(2, 1fr); }
  .bm-try-bubble { max-width: 92%; }
  .bm-try-select { flex: 1 1 40%; }
}

/* ————— Fullpage : une section = un écran (desktop uniquement) ————— */
@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* La nav ne doit plus consommer de hauteur de flux, sinon les slides
     100svh se décalent de sa hauteur et chaque tick devient un double pas. */
  body:has(.bm-fullpage) .bm-nav { position: fixed; top: 0; left: 0; right: 0; }

  .bm-fullpage > section {
    box-sizing: border-box;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 92px;
    padding-bottom: 44px;
  }

  .bm-fullpage > .bm-hero { padding: 0; }
  .bm-fullpage > .bm-serious-band { padding: 0; }
  .bm-fullpage > .bm-serious-band .bm-serious { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; padding-bottom: 44px; }

  /* Les visuels des slides feature ne doivent jamais dépasser l'écran */
  .bm-fullpage .bm-feature-media img {
    max-height: min(60svh, 620px);
    width: 100%;
    object-fit: cover;
  }

  /* Films : bande verticale dimensionnée par la hauteur d'écran */
  .bm-fullpage .bm-film-panel { width: min(48svh * 9 / 16, calc((100% - 64px) / 5)); }
  .bm-fullpage .bm-film-caption { font-size: 0.85rem; }

  /* Étapes : deux colonnes pour tenir sur un écran */
  .bm-fullpage .bm-path { grid-template-columns: 1fr 1fr; gap: 0 56px; }
  .bm-fullpage .bm-path-step { padding: 18px 0; }
  .bm-fullpage .bm-path-num { font-size: clamp(1.8rem, 4vw, 3rem); }
  .bm-fullpage #path .bm-section-lead { margin-bottom: 12px; }

  /* Boutiques exemples : header minimal, cartes maximales */
  .bm-fullpage #movement h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
  .bm-fullpage .bm-showcase { margin-top: 8px; }
  .bm-fullpage .bm-showcase-card { width: min(86vw, 52svh * 16 / 9); }
  .bm-fullpage .bm-showcase-track { padding: 6px calc((100vw - min(86vw, 52svh * 16 / 9)) / 2); }
  .bm-fullpage .bm-showcase-card figcaption { padding: 8px 14px; }
  .bm-fullpage .bm-move-note { margin-top: 6px; }

  /* Bibliothèque : cartes horizontales plus hautes, couverture dominante */
  .bm-fullpage #library .bm-section-lead { margin-bottom: 10px; max-width: 46rem; }
  .bm-fullpage .bm-books { margin-top: 14px; }
  .bm-fullpage .bm-books-track { padding: 12px calc((100vw - min(720px, 72vw)) / 2); gap: 26px; }
  .bm-fullpage .bm-bookcard {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    width: min(760px, 76vw);
    min-height: clamp(320px, 48svh, 440px);
  }
  .bm-fullpage .bm-bookcard-cover {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    padding: 24px 24px 24px 30px;
  }
  .bm-fullpage .bm-bookcard-cover img {
    height: clamp(260px, 44svh, 380px);
    width: auto;
    aspect-ratio: 2 / 3;
  }
  .bm-fullpage .bm-bookcard-body {
    padding: 28px 28px 10px 0;
    gap: 10px;
    justify-content: center;
  }
  .bm-fullpage .bm-bookcard-title { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
  .bm-fullpage .bm-bookcard-why { font-size: 1.02rem; max-width: 34ch; }
  .bm-fullpage .bm-bookcard-stars { margin-top: 12px; font-size: 1.05rem; }
  .bm-fullpage .bm-bookcard-buy { padding: 14px 28px 24px 0; border-top: none; }
  .bm-fullpage .bm-bookcard-price { font-size: 1.2rem; }
  .bm-fullpage .bm-books-note { margin-top: 10px; }

  /* One more thing : le credo respire, il tient seul sur l'écran */
  .bm-fullpage .bm-omt-kicker { font-size: 1.05rem; margin-bottom: 6px; }
  .bm-fullpage .bm-omt h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); margin-bottom: 10px; }
  .bm-fullpage .bm-omt .bm-section-lead { margin-bottom: 18px; max-width: 52rem; }
  .bm-fullpage .bm-omt-creed { margin-bottom: 18px; max-width: 60rem; }
  .bm-fullpage .bm-omt-creed-line { font-size: clamp(1.1rem, 1.9vw, 1.45rem); margin-bottom: 8px; }
  .bm-fullpage .bm-omt-oui { font-size: clamp(3rem, 7vw, 5rem); margin: 16px 0 10px; }
  .bm-fullpage .bm-omt-pledge { margin-top: 16px; }

  /* Inscription : formulaire compact, groupes de chips côte à côte */
  .bm-fullpage > .bm-serious-band .bm-serious { padding-top: 78px; padding-bottom: 32px; }
  .bm-fullpage .bm-serious h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: none; }
  .bm-fullpage .bm-serious .bm-section-lead { margin-bottom: 10px; max-width: 52rem; }
  .bm-fullpage .bm-trial-layout { grid-template-columns: 1.45fr 0.75fr; gap: 20px; }
  .bm-fullpage .bm-trial { padding: 18px 22px; }
  .bm-fullpage .bm-trial-steps { margin-bottom: 8px; }
  .bm-fullpage .bm-field { margin-bottom: 8px; }
  .bm-fullpage .bm-trial-actions { margin-top: 8px; }
  /* Chips auto-largeur sur une rangée : la grille fixe gaspillait la hauteur.
     L'état sélectionné (fond + bordure néon) remplace la puce radio. */
  .bm-fullpage .bm-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .bm-fullpage .bm-choice { flex: none; width: auto; padding: 8px 12px; font-size: 0.84rem; }
  .bm-fullpage .bm-choice input { position: absolute; opacity: 0; pointer-events: none; }

  /* Chat + recherche : remplir l'écran, scroll interne pour les résultats */
  .bm-fullpage #ask .bm-try-chat-log { min-height: 25svh; max-height: 38svh; }
  .bm-fullpage #find .bm-try-products { max-height: 42svh; overflow-y: auto; }
}

.bm-fullpage-dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 60;
}

@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bm-fullpage-dots { display: flex; }
}

.bm-fullpage-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--bm-line);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.bm-fullpage-dot:hover { border-color: var(--bm-neon); }

.bm-fullpage-dot.is-active {
  background: var(--bm-neon);
  border-color: var(--bm-neon);
  transform: scale(1.3);
}

/* ————— Movement / universes marquee ————— */
.bm-move { text-align: center; }
.bm-move h2 { margin-left: auto; margin-right: auto; }
.bm-move .bm-section-lead { margin-left: auto; margin-right: auto; }

.bm-marquee {
  overflow: hidden;
  margin: 26px calc(50% - 50vw) 0;
  width: 100vw;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bm-marquee + .bm-marquee { margin-top: 14px; }

.bm-marquee-track {
  display: inline-flex;
  gap: 14px;
  padding: 4px 0;
  white-space: nowrap;
  animation: bm-marquee 26s linear infinite;
  will-change: transform;
}

.bm-marquee--reverse .bm-marquee-track { animation-direction: reverse; }

@keyframes bm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.bm-marquee-chip {
  font-family: var(--bm-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bm-ink);
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  padding: 12px 26px;
  transition: all .2s ease;
}

.bm-marquee-chip:nth-child(odd) {
  color: var(--bm-neon);
  border-color: rgba(212, 255, 63, 0.35);
}

.bm-move-note {
  margin: 30px auto 0;
  color: var(--bm-muted);
  font-size: 0.95rem;
  max-width: 36rem;
}

/* ————— Showcase : carousel de boutiques d'exemple ————— */
.bm-showcase-hint {
  margin: 34px auto 0;
  font-family: var(--bm-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bm-neon);
}

.bm-showcase {
  overflow-x: auto;
  margin: 22px calc(50% - 50vw) 0;
  width: 100vw;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Frontière floue sur les bords : les cartes voisines s'évanouissent */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.bm-showcase::-webkit-scrollbar { display: none; }

.bm-showcase-track {
  display: inline-flex;
  gap: 24px;
  /* Marge interne pour que la première et la dernière carte puissent se centrer */
  padding: 10px calc((100vw - min(var(--bm-max), 86vw)) / 2);
}

.bm-showcase-card {
  flex: none;
  /* Une boutique quasi pleine largeur de section, les voisines dépassent sur les bords */
  width: min(var(--bm-max), 86vw);
  scroll-snap-align: center;
  margin: 0;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  background: var(--bm-bg-2);
  overflow: hidden;
  transition: opacity .6s ease, transform .6s cubic-bezier(.25,.8,.3,1), border-color .35s ease, box-shadow .35s ease;
}

.bm-showcase-card:hover {
  border-color: rgba(212, 255, 63, 0.4);
}

/* Carousel actif : la carte centrale est nette, les voisines en retrait */
.bm-showcase--live .bm-showcase-card {
  opacity: 0.5;
  transform: scale(0.95);
}

.bm-showcase--live .bm-showcase-card.is-active {
  opacity: 1;
  transform: none;
  border-color: rgba(212, 255, 63, 0.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.bm-showcase-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  display: block;
}

.bm-showcase-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--bm-line-soft);
}

.bm-showcase-brand {
  font-family: var(--bm-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bm-ink);
  white-space: nowrap;
}

.bm-showcase-cat {
  color: var(--bm-muted);
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-showcase-cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bm-neon, #c8f531);
  text-decoration: none;
  white-space: nowrap;
}
.bm-showcase-cta:hover { text-decoration: underline; }

/* ————— Slider de la vitrine ————— */
.bm-showcase-controls {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  padding: 0 22px;
}

.bm-showcase-range {
  -webkit-appearance: none;
  appearance: none;
  width: min(420px, 72vw);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--bm-neon) 0%,
    var(--bm-neon) var(--bm-fill, 0%),
    rgba(242, 245, 238, 0.14) var(--bm-fill, 0%));
  cursor: pointer;
  outline-offset: 6px;
}

.bm-showcase-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bm-neon);
  border: 5px solid var(--bm-bg);
  box-shadow: 0 0 0 1px rgba(212, 255, 63, 0.55), 0 0 18px rgba(212, 255, 63, 0.35);
  transition: transform .2s ease;
}

.bm-showcase-range::-webkit-slider-thumb:hover { transform: scale(1.15); }

.bm-showcase-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bm-neon);
  border: 5px solid var(--bm-bg);
  box-shadow: 0 0 0 1px rgba(212, 255, 63, 0.55), 0 0 18px rgba(212, 255, 63, 0.35);
  transition: transform .2s ease;
}

.bm-showcase-range::-moz-range-thumb:hover { transform: scale(1.15); }

/* Sur mobile, la <source> sert la maquette portrait : la carte suit.
   Aligné sur le breakpoint mobile global (767px). */
@media (max-width: 767px) {
  .bm-showcase {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .bm-showcase-track {
    padding-left: calc((100vw - min(86vw, 420px)) / 2);
    padding-right: calc((100vw - min(86vw, 420px)) / 2);
  }
  .bm-showcase-card { width: min(86vw, 420px); }
  .bm-showcase-card img { aspect-ratio: 2 / 3; }
}

/* Legacy chips (product/pricing fallback) */
.bm-move-chips {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.bm-move-chips li {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bm-ink);
  background: var(--bm-bg-2);
  border: 1px solid var(--bm-line);
  border-radius: 10px;
  padding: 8px 14px;
}

/* ————— Serious / CTA band (video bg) ————— */
.bm-serious-band { padding: 0; }

.bm-serious {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 14vw, 170px) 22px;
  text-align: center;
}

.bm-serious-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.bm-serious-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--bm-bg) 0%, rgba(10, 11, 13, 0.45) 30%, rgba(10, 11, 13, 0.45) 70%, var(--bm-bg) 100%);
}

.bm-serious-inner { position: relative; z-index: 2; max-width: var(--bm-max); margin: 0 auto; }

.bm-serious h2 {
  font-family: var(--bm-display);
  font-size: clamp(2rem, 5.6vw, 4rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 auto 14px;
  max-width: 18ch;
}

.bm-serious .bm-section-lead { margin: 0 auto 26px; }

/* ————— Books shelf : carousel horizontal de vraies couvertures ————— */
.bm-books {
  overflow-x: auto;
  margin: 26px calc(50% - 50vw) 0;
  width: 100vw;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.bm-books::-webkit-scrollbar { display: none; }

.bm-books-track {
  display: inline-flex;
  align-items: stretch;
  gap: 22px;
  /* Marge interne pour que la première et la dernière carte puissent se centrer */
  padding: 14px calc((100vw - min(300px, 74vw)) / 2);
}

.bm-bookcard {
  position: relative;
  flex: none;
  width: min(320px, 82vw);
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  text-decoration: none;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--bm-bg-3), var(--bm-bg-2));
  border: 1px solid var(--bm-line-soft);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s ease, opacity .35s ease;
}

.bm-bookcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--bm-neon);
  opacity: 0.85;
  z-index: 1;
}

.bm-bookcard:hover { transform: translateY(-6px); border-color: rgba(212, 255, 63, 0.4); }

/* Carousel actif : la carte centrée est nette, les voisines en retrait */
.bm-showcase--live .bm-bookcard { opacity: 0.55; transform: scale(0.96); }
.bm-showcase--live .bm-bookcard.is-active {
  opacity: 1;
  transform: none;
  border-color: rgba(212, 255, 63, 0.3);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.bm-showcase--live .bm-bookcard:hover { opacity: 1; transform: translateY(-6px); }

.bm-bookcard-cover {
  display: block;
  padding: 28px 28px 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 255, 63, 0.08), transparent 60%),
    var(--bm-bg-3);
}

.bm-bookcard-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  /* drop-shadow kept light — avoid heavy filter cost on many cards */
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.5));
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}

.bm-bookcard:hover .bm-bookcard-cover img { transform: translateY(-4px) rotate(-1deg); }

.bm-bookcard-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 18px 20px 14px;
}

.bm-bookcard-title {
  font-family: var(--bm-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bm-ink);
}

.bm-bookcard-author {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bm-neon);
}

.bm-bookcard-why {
  margin-top: 4px;
  color: var(--bm-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.bm-bookcard-stars {
  display: block;
  margin-top: 8px;
  color: #ffd60a;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 214, 10, 0.35);
}

.bm-bookcard-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--bm-line-soft);
}

.bm-bookcard-price {
  font-family: var(--bm-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--bm-neon);
  white-space: nowrap;
}

.bm-bookcard-amazon {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bm-muted);
  white-space: nowrap;
  transition: color .25s ease;
}

.bm-bookcard:hover .bm-bookcard-amazon { color: var(--bm-ink); }

.bm-books-note {
  margin: 14px auto 0;
  max-width: var(--bm-max);
  padding: 0 22px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--bm-muted);
  opacity: 0.75;
}

/* ————— One more thing ————— */
.bm-omt {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--bm-line-soft);
}

.bm-omt::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 90vw);
  height: 460px;
  background: radial-gradient(closest-side, rgba(212, 255, 63, 0.13), transparent 72%);
  pointer-events: none;
}

.bm-omt-kicker {
  font-family: var(--bm-display);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bm-neon);
  margin: 0 0 18px;
}

.bm-omt h2 { margin-left: auto; margin-right: auto; }
.bm-omt .bm-section-lead { margin-left: auto; margin-right: auto; }

/* Scène OMT : la foule face à l'aube doit rester lisible, voile allégé au centre */
.bm-scene--omt img { opacity: 0.62; filter: saturate(1); }
.bm-scene--omt::after {
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 42%, rgba(10, 11, 13, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, 0.92) 0%, rgba(10, 11, 13, 0.35) 30%, rgba(10, 11, 13, 0.3) 62%, rgba(10, 11, 13, 0.92) 100%);
}

.bm-omt-creed {
  max-width: 56rem;
  margin: 0 auto 48px;
}

.bm-omt-creed-line {
  font-family: var(--bm-display);
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--bm-ink);
  margin: 0 0 16px;
}

.bm-omt-oui {
  font-family: var(--bm-display);
  font-size: clamp(4rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bm-neon);
  text-shadow: 0 0 60px var(--bm-neon-glow), 0 0 120px rgba(212, 255, 63, 0.25);
  margin: 34px 0 16px;
}

/* Ligne d'engagements : le reçu discret sous le serment */
.bm-omt-pledge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 10px;
  row-gap: 6px;
  max-width: 60rem;
  margin: 26px auto 0;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--bm-muted);
}

.bm-omt-pledge span { white-space: nowrap; }

.bm-omt-pledge span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--bm-neon);
}

.bm-omt-punch {
  font-family: var(--bm-display);
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bm-ink);
  margin: 0;
}

.bm-omt-cta { justify-content: center; }

/* ————— Footer ————— */
.bm-footer {
  color: #a8ada4;
  background: #121511;
  border-top: 1px solid rgba(251, 252, 247, 0.08);
  padding: 72px 0 36px;
  overflow: hidden;
}

.bm-footer-inner {
  max-width: var(--bm-max);
  margin: 0 auto;
  padding: 0 22px;
}

.bm-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
  margin-bottom: 48px;
}

.bm-footer-brand {
  grid-column: 1 / -1;
  max-width: 22rem;
}

.bm-footer-logo,
.bm-body .bm-footer-logo {
  font-family: var(--bm-display);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  text-transform: uppercase;
  color: #fbfcf7;
}
.bm-footer-logo-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: block;
  overflow: visible;
}
.bm-footer-logo-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}
.bm-footer-logo-master {
  color: #fbfcf7;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1;
}
.bm-footer-logo-product {
  color: #fbfcf7;
  font-weight: 800;
  font-size: 1.44rem;
  letter-spacing: 0.035em;
  line-height: 0.94;
}
.bm-footer-legal-copy,
.bm-footer-tagline {
  margin: 14px 0 0;
  color: #8b9086;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.bm-footer-tagline { margin-top: 6px; }

.bm-footer-locale-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  min-width: 168px;
  border: 1px solid rgba(251, 252, 247, 0.38);
  border-radius: 4px;
  background: transparent;
  color: #fbfcf7;
}
.bm-footer-locale-icon {
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #c5c9bf;
}
.bm-footer-locale-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bm-footer-locale {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-block: 9px;
  padding-inline: 32px 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fbfcf7;
  font-family: var(--bm-body);
  font-size: 0.86rem;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c5c9bf' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
[dir="rtl"] .bm-footer-locale {
  background-position: left 10px center;
}
.bm-footer-locale:focus {
  outline: none;
}
.bm-footer-locale-wrap:focus-within {
  border-color: #d9ff43;
  box-shadow: 0 0 0 3px rgba(217, 255, 67, 0.22);
}

.bm-footer-cols h4,
.bm-footer-community h4 {
  font-family: var(--bm-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fbfcf7;
  margin: 0 0 14px;
}

.bm-footer-col a,
.bm-footer-community a {
  display: block;
  padding: 5px 0;
  color: #b4b8ae;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  width: fit-content;
  max-width: 100%;
  transition: color .18s ease;
}

.bm-footer-col a:hover,
.bm-footer-community a:hover { color: #fbfcf7; }

.bm-footer-col--stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bm-footer-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
  max-width: none;
}
.bm-footer-cta-headline {
  margin: 0;
  max-width: 12.5rem;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.bm-footer-register,
.bm-body .bm-footer-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 36px;
  border-radius: 999px;
  background: #fbfcf7;
  color: #121511;
  font-family: var(--bm-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background .18s ease, transform .18s ease;
}
.bm-footer-register:hover,
.bm-body .bm-footer-register:hover {
  background: #ffffff;
  color: #121511;
  transform: translateY(-1px);
}
.bm-footer-qr {
  margin: 4px 0 0;
  padding: 0;
}
.bm-footer-qr-svg {
  display: block;
  width: 112px;
  height: 112px;
  padding: 8px;
  background: #ffffff;
  border-radius: 2px;
}
.bm-footer-qr figcaption {
  margin-top: 10px;
  color: #8b9086;
  font-size: 0.78rem;
  line-height: 1.4;
}

.bm-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 252, 247, 0.1);
}
.bm-footer-community {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}
.bm-footer-community h4 { margin: 0; }
.bm-footer-community a { padding: 0; }

/* ————— Trial form ————— */
.bm-trial {
  position: relative;
  background: var(--bm-bg-2);
  border: 1px solid var(--bm-line-soft);
  border-radius: calc(var(--bm-radius) + 4px);
  padding: 24px;
  overflow: hidden;
}

.bm-trial-steps { display: flex; gap: 10px; margin-bottom: 20px; }

.bm-trial-step {
  font-family: var(--bm-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bm-muted);
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  padding: 7px 14px;
  transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s ease;
}

.bm-trial-step.is-active { color: #0a0b0d; background: var(--bm-neon); border-color: var(--bm-neon); transform: translateY(-1px); }
.bm-trial-step.is-done { color: var(--bm-neon); border-color: var(--bm-neon); }

.bm-trial-stage {
  position: relative;
  min-height: 12rem;
}

.bm-trial-pane {
  width: 100%;
}

.bm-trial-pane.is-enter,
.bm-trial-pane.is-leave {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  pointer-events: none;
}

.bm-trial-pane.is-enter {
  animation: bm-trial-enter .38s cubic-bezier(.22, 1, .36, 1) both;
}
.bm-trial-pane.is-leave {
  animation: bm-trial-leave .32s ease both;
}
.bm-trial-pane.is-from-end { --bm-trial-x: 28px; }
.bm-trial-pane.is-from-start { --bm-trial-x: -28px; }
.bm-trial-pane.is-to-start { --bm-trial-leave-x: -22px; }
.bm-trial-pane.is-to-end { --bm-trial-leave-x: 22px; }

@keyframes bm-trial-enter {
  from { opacity: 0; transform: translateX(var(--bm-trial-x, 28px)); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bm-trial-leave {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(var(--bm-trial-leave-x, -22px)); }
}

.bm-trial.is-creating .bm-trial-steps,
.bm-trial.is-creating #bm-trial-form {
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity .28s ease, transform .28s ease;
}

.bm-trial-creating {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 22px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(217, 255, 67, 0.22), transparent 55%),
    var(--bm-bg-2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.bm-trial-creating[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.bm-trial-creating.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bm-trial-creating__orb {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(10, 11, 13, 0.12);
  border-top-color: var(--bm-neon);
  animation: bm-trial-spin .85s linear infinite;
  margin-bottom: 6px;
}
.bm-trial-creating__title {
  margin: 0;
  font-family: var(--bm-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bm-ink);
}
.bm-trial-creating__hint {
  margin: 0;
  max-width: 28ch;
  color: var(--bm-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}
.bm-trial-creating__ticks {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  min-height: 1.4em;
}
.bm-trial-creating__ticks li {
  display: none;
  color: var(--bm-ink);
  font-size: 0.92rem;
  font-weight: 600;
}
.bm-trial-creating__ticks li.is-on {
  display: block;
  animation: bm-trial-tick-in .35s ease both;
}

@keyframes bm-trial-spin {
  to { transform: rotate(360deg); }
}
@keyframes bm-trial-tick-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-trial-pane.is-enter,
  .bm-trial-pane.is-leave,
  .bm-trial-creating__orb,
  .bm-trial-creating__ticks li.is-on {
    animation: none !important;
  }
}

.bm-field { margin-bottom: 16px; }

.bm-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.bm-field label,
.bm-field legend {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
  color: var(--bm-ink);
}

.bm-field input[type="text"],
.bm-field input[type="email"],
.bm-field input[type="tel"],
.bm-field input[type="password"] {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--bm-line);
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: var(--bm-body);
  font-size: 0.98rem;
}

.bm-field input:focus { outline: none; border-color: var(--bm-neon); box-shadow: 0 0 0 3px var(--bm-neon-soft); }

.bm-input-affix {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--bm-line);
  border-radius: 14px;
  background: var(--bm-bg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bm-input-affix:focus-within {
  border-color: var(--bm-neon);
  box-shadow: 0 0 0 3px var(--bm-neon-soft);
}
.bm-input-affix__input {
  flex: 1;
  min-width: 0;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 14px 8px 14px 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bm-input-affix__suffix {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 14px 0 4px;
  color: var(--bm-muted);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}

.bm-phone-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--bm-line);
  border-radius: 14px;
  background: var(--bm-bg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bm-phone-field:focus-within {
  border-color: var(--bm-neon);
  box-shadow: 0 0 0 3px var(--bm-neon-soft);
}
.bm-phone-field__dial {
  flex: 0 0 auto;
  min-width: 6.75rem;
  max-width: 42%;
  border: 0;
  border-right: 1px solid var(--bm-line);
  border-radius: 0;
  color: var(--bm-ink);
  font-family: var(--bm-body);
  font-size: 0.92rem;
  font-weight: 650;
  padding: 13px 28px 13px 14px;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.03);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.bm-phone-field__dial:focus {
  outline: none;
}
.bm-phone-field__national {
  flex: 1;
  min-width: 0;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 13px 14px !important;
}

.bm-field-hint { display: block; font-size: 0.85rem; color: var(--bm-muted); margin-top: 6px; }
.bm-field-hint strong { color: var(--bm-neon); }

.bm-url-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(217, 255, 67, 0.14);
  border: 1px solid rgba(145, 170, 21, 0.28);
  font-size: 0.88rem;
  color: var(--bm-muted);
  line-height: 1.35;
}
.bm-url-preview strong {
  color: #0a0b0d;
  font-weight: 700;
  word-break: break-all;
}

.bm-trial-foot {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--bm-muted);
}

.bm-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bm-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--bm-line);
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bm-muted);
  cursor: pointer;
  transition: all .18s ease;
}

.bm-choice input { accent-color: var(--bm-neon); }
.bm-choice:hover { border-color: var(--bm-neon); color: var(--bm-ink); }
.bm-choice.is-selected { border-color: var(--bm-neon); color: var(--bm-ink); background: var(--bm-neon-soft); }

.bm-trial-actions { display: flex; gap: 10px; margin-top: 20px; }

.bm-trial-layout { display: grid; gap: 32px; }

/* ————— Pillars / pricing cards ————— */
.bm-grid-3 { display: grid; gap: 16px; }

.bm-pillar {
  background: var(--bm-bg-2);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .3s ease, border-color .3s ease;
}

.bm-pillar:hover { transform: translateY(-4px); border-color: rgba(212, 255, 63, 0.35); }

.bm-pillar-num {
  font-family: var(--bm-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-neon);
}

.bm-pillar h3 {
  font-family: var(--bm-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.bm-pillar p { color: var(--bm-muted); margin: 0; }

/* ————— Misc / shared ————— */
.bm-dark-band {
  background: var(--bm-bg-2);
  border-top: 1px solid var(--bm-line-soft);
  border-bottom: 1px solid var(--bm-line-soft);
}

.bm-hero-stage {
  border-radius: var(--bm-radius);
  overflow: hidden;
  border: 1px solid var(--bm-line-soft);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.bm-hero-stage img { width: 100%; }

.bm-share-block {
  background: var(--bm-bg-2);
  border: 1px solid var(--bm-line-soft);
  border-left: 3px solid var(--bm-neon);
  border-radius: 16px;
  padding: 22px;
}

.bm-share-quote {
  font-family: var(--bm-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
}

.bm-share-mark {
  font-family: var(--bm-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin: 16px 0 0;
}

.bm-share-mark span { color: var(--bm-neon); }

.bm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ————— Mobile nav ————— */
.bm-mobile-nav {
  display: none;
  padding: 10px 18px 16px;
  background: rgba(10, 11, 13, 0.96);
  border-bottom: 1px solid var(--bm-line-soft);
}

.bm-mobile-nav.is-open { display: grid; gap: 4px; }

.bm-mobile-nav a {
  padding: 13px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--bm-ink);
}

.bm-mobile-nav a:hover { background: var(--bm-neon-soft); color: var(--bm-neon); }

.bm-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  border: 1px solid var(--bm-mega-line, var(--bm-line));
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.bm-burger span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--bm-mega-ink, var(--bm-ink));
}

/* ————— Scroll reveals ————— */
.bm-reveal.is-pending {
  opacity: 0;
  transform: translateY(18px);
}

.bm-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--bm-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .bm-reveal.is-pending { opacity: 1; transform: none; filter: none; }
  .bm-marquee-track { animation: none; }
  .bm-hero-video, .bm-serious-video, .bm-film-video { display: none; }
  .bm-nav-actions .bm-btn-primary::after { animation: none; }
}

/* ————— Desktop ————— */
@media (min-width: 768px) {
  .bm-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .bm-stat-row { grid-template-columns: repeat(3, 1fr); }
  .bm-footer-cols { gap: 40px 28px; }
  .bm-footer-brand { max-width: 28rem; }
  .bm-footer-cta { gap: 20px 36px; }
  .bm-trial-layout { grid-template-columns: 1fr 1.05fr; align-items: start; }

  .bm-hero-inner {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: end;
  }

  .bm-hero-copy { grid-column: 1; }
  .bm-hero-aside { grid-column: 2; justify-self: end; align-self: end; }

  /* alternating feature asymmetry: 7/5 then 5/7 */
  .bm-feature-row { grid-template-columns: 7fr 5fr; gap: 56px; padding: 44px 0; }
  .bm-feature-row--flip { grid-template-columns: 5fr 7fr; }
  .bm-feature-row--flip .bm-feature-media { order: 2; }
  .bm-feature-row--flip .bm-feature-copy { order: 1; }

  .bm-path-step { grid-template-columns: 200px 1fr; }
}

@media (min-width: 1024px) {
  .bm-footer-cols { grid-template-columns: 1.15fr 0.95fr 1.05fr 0.85fr 0.95fr; }
  .bm-footer-brand,
  .bm-footer-cta { grid-column: auto; }
  .bm-footer-cta {
    flex-direction: column;
    max-width: 16rem;
    gap: 16px;
  }
  .bm-footer-qr-svg {
    width: 132px;
    height: 132px;
  }
}

.bm-try-cta-row { margin: 10px 0 14px; }

/* ————— Mobile ————— */
@media (max-width: 767px) {
  .bm-nav-actions .bm-btn-ghost { display: none; }
  .bm-hero-inner { padding: 96px 20px 40px; }
  .bm-prompt { max-width: 100%; }
  .bm-film-panel,
  .bm-film-panel:nth-child(1),
  .bm-film-panel:nth-child(2) { grid-column: 1 / -1; }
  .bm-choice-grid { grid-template-columns: 1fr; }
  .bm-bookcard { width: min(300px, 84vw); }
  .bm-books-track { padding-left: calc((100vw - min(300px, 84vw)) / 2); padding-right: calc((100vw - min(300px, 84vw)) / 2); }
  .bm-bookcard-cover { padding: 30px 30px 0; }
  .bm-bookcard-title { font-size: 1.15rem; }
  .bm-omt-creed-line { font-size: 1.15rem; }
  .bm-omt-oui { font-size: clamp(3.2rem, 18vw, 5rem); }
  .bm-omt-pledge { flex-direction: column; align-items: center; }
  .bm-omt-pledge span + span::before { content: none; }
  .bm-section h2 { max-width: none; }
}

/* ————— E-commerce explorer · Open Daylight —————
   The captured interface and generated surroundings remain separate layers.
   Default content is visible; only an explicit entering state animates it. */
.bme-page,
.bme-dialog,
.bme-themes-return {
  --bme-ink: #121511;
  --bme-muted: #56604f;
  --bme-paper: #fbfcf7;
  --bme-mist: #f1f3ea;
  --bme-line: #d8ded0;
  --bme-acid: #d9ff43;
  --bme-fast: 140ms;
  --bme-change: 280ms;
  --bme-enter: 480ms;
  --bme-reveal: 640ms;
  --bme-ease: cubic-bezier(.2, .8, .2, 1);
  --bme-ease-reveal: cubic-bezier(.16, 1, .3, 1);
  color: var(--bme-ink);
  font-family: "Figtree", system-ui, sans-serif;
  line-height: 1.6;
}

.bme-page {
  --bm-ink: var(--bme-ink);
  --bm-muted: var(--bme-muted);
  --bm-line: var(--bme-line);
  --bm-neon: var(--bme-acid);
  inline-size: min(100%, 1360px);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 76px) clamp(20px, 3.4vw, 48px) 88px;
  background: var(--bme-paper);
}

.bme-page :where(h1, h2, h3, p, figure) { margin-block-start: 0; }
.bme-page :where(h1, h2, h3) {
  color: var(--bme-ink);
  font-family: "Syne", "Figtree", system-ui, sans-serif;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.bme-page :where(a, button, input, select, summary):focus-visible,
.bme-dialog :where(a, button):focus-visible,
.bme-themes-return a:focus-visible {
  outline: 2px solid #121511;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px #d9ff43;
}
.bme-page :where(button, input, select) { font: inherit; }
.bme-page :where(a, button, summary) { touch-action: manipulation; }
.bme-page .bm-btn {
  min-block-size: 46px;
  white-space: normal;
  text-align: center;
  font-family: inherit;
  transition: transform var(--bme-fast) var(--bme-ease), background-color var(--bme-fast), border-color var(--bme-fast);
}
.bme-page .bm-btn-secondary { color: var(--bme-ink); border-color: #adb7a4; }
.bme-page .bm-btn-secondary:hover { color: var(--bme-ink); background: #fff; border-color: var(--bme-ink); }
.bme-page .bm-btn-dark { color: #fff; background: var(--bme-ink); }
.bme-kicker {
  display: block;
  margin-block-end: 16px;
  color: var(--bme-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}
.bme-lead { max-inline-size: 51ch; margin-block-end: 24px; color: var(--bme-muted); font-size: clamp(1.02rem, 1.5vw, 1.16rem); }
.bme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-block-start: 28px; }
.bme-actions > a:not(.bm-btn) { padding-block: 10px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }

.bme-scene {
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bme-line, #d8ded0);
  border-radius: 24px;
  background: var(--bme-mist, #f1f3ea);
}
.bme-scene-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.035);
  transition: transform var(--bme-reveal, 640ms) var(--bme-ease-reveal, ease), opacity var(--bme-change, 280ms) ease;
}
.bme-scene-proof {
  position: absolute;
  z-index: 1;
  inset-inline-start: 4%;
  inset-block-start: 12%;
  display: block;
  inline-size: 46%;
  block-size: auto;
  max-block-size: 84%;
  object-fit: contain;
  object-position: top;
  border: 5px solid #fff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px #18201826;
  transform: rotate(-4deg) scale(.9);
  transform-origin: center;
  transition: transform var(--bme-reveal, 640ms) var(--bme-ease-reveal, ease);
}
.bme-scene.is-focused .bme-scene-proof { transform: rotate(0) scale(1); }
.bme-scene.is-focused .bme-scene-art { transform: translateY(12px) scale(1.035); opacity: .8; }
.bme-scene[data-feature-scene="mobile"] .bme-scene-proof { inset-block-start: 7%; inline-size: auto; block-size: 86%; max-inline-size: 38%; max-block-size: 86%; border: 6px solid #20251f; border-radius: 26px; box-shadow: 0 16px 36px #12151140, 0 0 0 1px #ffffffb3; }
.bme-scene[data-feature-scene="media"] .bme-scene-proof { inset-inline-start: 4%; inset-block-start: 9%; inline-size: 92%; max-block-size: 82%; transform: rotate(-2deg) scale(.94); }
.bme-scene[data-feature-scene="media"].is-focused .bme-scene-proof { transform: rotate(0) scale(1); }
@media (min-width: 600px) {
  .bme-scene[data-feature-scene="selector"][data-theme="peinturolo"] .bme-scene-proof,
  .bme-scene[data-feature-scene="shipping"] .bme-scene-proof { inset-block-start: 60%; max-block-size: 34%; }
}

.bme-proof button:not(.bm-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 10px 16px;
  border: 1px solid #adb7a4;
  border-radius: 999px;
  background: #fff;
  color: #121511;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.bme-result-count { margin-block: 0 22px; color: var(--bme-muted); font-size: .9rem; }

.bme-theme-options a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: 9px 15px;
  border: 1px solid var(--bme-line);
  border-radius: 999px;
  background: #fff;
  color: var(--bme-ink);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  transition: background-color var(--bme-fast), border-color var(--bme-fast), transform var(--bme-fast) var(--bme-ease);
}

.bme-theme-options a[aria-current]:not([aria-current="false"]) { border-color: var(--bme-acid); background: var(--bme-acid); color: #121511; }
.bme-feature { padding-block: clamp(36px, 6vw, 72px); border-block-start: 1px solid var(--bme-line); scroll-margin-block-start: 110px; }
.bme-feature-head { max-inline-size: 780px; margin-block-end: 30px; }
.bme-feature-head h1 { max-inline-size: 25ch; margin-block-end: 16px; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.045em; }
.bme-feature-head p { max-inline-size: 63ch; margin-block-end: 0; color: var(--bme-muted); font-size: 1.05rem; }
.bme-feature-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: clamp(26px, 4vw, 58px); }
.bme-feature-grid > * { min-inline-size: 0; }
.bme-feature-copy { font-size: 1.05rem; }
.bme-feature-copy > p { margin-block-end: 22px; }
.bme-feature-copy h3 { font-size: 1.4rem; line-height: 1.3; letter-spacing: -.025em; }
.bme-proof { margin: 0; min-inline-size: 0; }
.bme-proof > picture { display: block; overflow: hidden; border: 1px solid var(--bme-line); border-radius: 18px; background: #fff; }
.bme-proof > img,
.bme-proof > picture > img { display: block; inline-size: 100%; block-size: auto; object-fit: contain; }
.bme-proof > img { border: 1px solid var(--bme-line); border-radius: 18px; background: #fff; }
.bme-proof > figcaption { margin-block-start: 12px; color: var(--bme-muted); font-size: .86rem; line-height: 1.5; }
.bme-theme-options { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 22px; }
.bme-details { margin-block: 24px; border-block: 1px solid var(--bme-line); }
.bme-details summary { min-block-size: 52px; padding: 16px 0; color: var(--bme-ink); font-weight: 600; cursor: pointer; }
.bme-details summary::marker { color: #56604f; font-size: .8em; }
.bme-details-body { padding-block: 0 22px; color: var(--bme-muted); font-size: 1rem; }
.bme-details-body > :last-child { margin-block-end: 0; }
.bme-details-body :where(ul, ol) { padding-inline-start: 22px; }
.bme-details-body li + li { margin-block-start: 8px; }
.bme-example-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-block: 20px 0; }
.bme-example-links a { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: 9px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.bme-footer-cta { margin-block-start: 56px; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--bme-line); border-radius: 22px; background: var(--bme-mist); }
.bme-footer-cta h2 { max-inline-size: 23ch; margin-block-end: 18px; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.1; letter-spacing: -.045em; }
.bme-footer-cta p { max-inline-size: 60ch; margin-block-end: 0; color: var(--bme-muted); }
.bme-faq { max-inline-size: 880px; margin-block: 64px 0; }
.bme-faq > h2 { margin-block-end: 26px; font-size: clamp(1.65rem, 2.8vw, 2.5rem); line-height: 1.2; letter-spacing: -.035em; }
.bme-faq details { border-block-start: 1px solid var(--bme-line); }
.bme-faq summary { min-block-size: 56px; padding-block: 18px; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.bme-faq details > p,
.bme-faq details > div { max-inline-size: 70ch; padding-block-end: 22px; margin-block-end: 0; color: var(--bme-muted); }
.bme-empty { grid-column: 1 / -1; padding: 36px; border: 1px dashed #adb7a4; border-radius: 18px; background: #fff; color: var(--bme-muted); }
.bme-empty h2 { color: var(--bme-ink); }
.bme-empty a { text-decoration: underline; text-underline-offset: 4px; }

.bme-dialog {
  inline-size: min(1120px, calc(100vw - 32px));
  max-inline-size: calc(100vw - 32px);
  max-block-size: calc(100vh - 32px);
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--bme-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 90px #12151130;
}
.bme-dialog::backdrop { background: #121511ad; }
.bme-dialog button {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  margin-inline-start: auto;
  margin-block-end: 16px;
  padding: 10px 16px;
  border: 1px solid #adb7a4;
  border-radius: 999px;
  background: #fff;
  color: #121511;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bme-dialog img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; margin-inline: auto; }
.bme-themes-return { margin-block: 24px 36px; padding: 20px 24px; border: 1px solid var(--bme-line); border-radius: 16px; background: var(--bme-mist); }
.bme-themes-return a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.bme-themes-return p { margin-block: 6px 0; color: var(--bme-muted); }

/* This modifier only changes the capability menu; other panels retain their layout. */
.bm-mega--ecommerce .bm-mega-inner--columns { max-inline-size: 1360px; grid-template-columns: minmax(0, 1fr) 224px; gap: 26px; max-block-size: calc(100vh - 152px); max-block-size: calc(100svh - 152px); overflow-y: auto; overscroll-behavior: contain; }
.bm-mega--ecommerce .bm-mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.bm-mega--ecommerce .bm-mega-col { min-inline-size: 0; }
.bm-mega--ecommerce .bm-mega-col-title { font-size: .7rem; line-height: 1.5; letter-spacing: .075em; }
.bm-mega--ecommerce .bm-mega-col-links { column-count: auto; }
.bm-mega--ecommerce .bm-mega-link { min-block-size: 44px; padding: 10px 8px; margin-inline-start: -8px; font-size: .97rem; line-height: 1.4; overflow-wrap: break-word; }
.bm-mega--ecommerce .bm-mega-link small { margin-block-start: 5px; font-size: .85rem; line-height: 1.5; color: #56604f; }
.bm-mega--ecommerce .bm-mega-rail { align-self: start; min-inline-size: 0; }
.bm-mega--ecommerce .bm-mega-rail-media { max-block-size: 240px; object-fit: contain; }
.bm-mega--ecommerce :where(a, button):focus-visible { outline: 2px solid #121511; outline-offset: 3px; box-shadow: 0 0 0 5px #d9ff43; }

@keyframes bme-menu-enter {
  from { opacity: .55; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bm-mega--ecommerce:not([hidden]) .bm-mega-col { animation: bme-menu-enter 220ms cubic-bezier(.2, .8, .2, 1) both; }
.bm-mega--ecommerce:not([hidden]) .bm-mega-col:nth-child(2) { animation-delay: 35ms; }
.bm-mega--ecommerce:not([hidden]) .bm-mega-col:nth-child(3) { animation-delay: 70ms; }
.bm-mega--ecommerce:not([hidden]) .bm-mega-col:nth-child(4) { animation-delay: 105ms; }

@keyframes bme-enter {
  from { opacity: .4; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.bme-reveal.is-entering { animation: bme-enter var(--bme-enter, 480ms) var(--bme-ease-reveal, ease) both; }

@media (hover: hover) and (pointer: fine) {

  .bme-theme-options a:hover { border-color: #99a68b; transform: translateY(-2px); }

  .bme-proof button:not(.bm-btn):hover { background: #f1f3ea; }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  .bm-mega--ecommerce .bm-mega-inner--columns { grid-template-columns: minmax(0, 1fr); }
  .bm-mega--ecommerce .bm-mega-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
  .bm-mega--ecommerce .bm-mega-rail-media { inline-size: 130px; max-block-size: 110px; margin: 0; }
  .bm-mega--ecommerce .bm-mega-rail-lead { flex: 1 1 240px; margin: 0; }
}

@media (max-width: 959px) {
  .bme-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bme-feature-grid .bme-proof { max-inline-size: 720px; }
}

@media (max-width: 599px) {
  .bme-page { padding: 32px 20px 56px; }
  .bme-lead { font-size: 1rem; }
  .bme-kicker { margin-block-end: 12px; }
  .bme-actions { align-items: stretch; gap: 10px; }
  .bme-actions .bm-btn { flex: 1 1 auto; }
  .bme-scene { display: flex; flex-direction: column; aspect-ratio: auto; border-radius: 18px; padding: 14px; }
  .bme-scene-proof { position: relative; inset: auto; order: 1; inline-size: 100%; block-size: auto; max-block-size: none; margin: 0; border-width: 3px; border-radius: 8px; box-shadow: 0 5px 18px #18201814; transform: none; }
  .bme-scene-art { position: relative; inset: auto; order: 0; inline-size: 100%; block-size: 160px; margin-block-end: 14px; border-radius: 10px; object-position: center 20%; transform: none; }
  .bme-scene[data-feature-scene="mobile"] .bme-scene-proof { inset: auto; inline-size: min(88%, 260px); block-size: auto; max-inline-size: none; max-block-size: none; margin-inline: auto; }
  .bme-scene[data-feature-scene="mobile"] .bme-scene-art { block-size: auto; aspect-ratio: 3 / 2; object-fit: contain; }
  .bme-scene[data-feature-scene="media"] .bme-scene-proof { inset: auto; inline-size: 100%; max-block-size: none; transform: none; }
  .bme-scene.is-focused .bme-scene-proof,
  .bme-scene.is-focused .bme-scene-art { transform: none; opacity: 1; }
  .bme-feature { padding-block: 36px; scroll-margin-block-start: 90px; }
  .bme-feature-head { margin-block-end: 24px; }
  .bme-feature-head h1 { font-size: 1.9rem; }
  .bme-feature-head p,
  .bme-feature-copy { font-size: 1rem; }
  .bme-footer-cta { margin-block-start: 36px; padding: 26px; border-radius: 18px; }
  .bme-faq { margin-block-start: 42px; }
  .bme-empty { padding: 24px; }
  .bme-dialog { inline-size: calc(100vw - 16px); max-inline-size: calc(100vw - 16px); max-block-size: calc(100vh - 16px); max-block-size: calc(100dvh - 16px); padding: 12px; border-radius: 12px; }
  .bme-dialog img { max-inline-size: none; inline-size: max(100%, min(720px, var(--bme-proof-width, 720px))); }
  .bme-dialog button { inset-inline-end: 0; }
  .bme-themes-return { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bme-page *,
  .bme-page *::before,
  .bme-page *::after,
  .bme-dialog *,
  .bme-reveal.is-entering,
  .bm-mega--ecommerce * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bme-scene-proof,
  .bme-scene.is-focused .bme-scene-proof,
  .bme-scene-art,
  .bme-scene.is-focused .bme-scene-art,
  .bme-reveal.is-entering,
  .bme-page .bm-btn,
  .bme-theme-options a:hover { transform: none !important; }
}

/* Progressive enhancement helpers: keep controls outside the artwork crop. */
.bme-scene-wrap { min-inline-size: 0; }
.bme-sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#ecommerce-explorer, #ecommerce-detail { scroll-margin-block-start: 104px; }
.bme-page [hidden] { display: none !important; }
.bme-page .bme-dialog img { inline-size: auto; max-inline-size: none; min-inline-size: min(600px, 80vw); max-block-size: none; }
.bme-page[aria-busy="true"] .bme-result-count { opacity: .6; }
.bme-proof-reading { margin-block-start: 24px; padding-block: 20px; border-block: 1px solid var(--bme-line); }
.bme-proof-reading .bme-kicker { margin-block-end: 12px; }
.bme-proof-steps { display: none; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.is-enhanced .bme-proof-steps { display: flex; }
.bme-proof-steps button { gap: 8px; }
.bme-proof-steps button[aria-pressed="true"] { background: var(--bme-acid); border-color: var(--bme-acid); }
.bme-proof-steps button span { opacity: .65; font-size: .8em; }
.bme-step-explanation { min-block-size: 4.8em; margin: 0; color: var(--bme-muted); font-size: 1rem; }
.bme-feature-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-inline-size: 720px; margin: 30px auto 0; border-block-start: 1px solid var(--bme-line); text-align: start; }
.bme-feature-page { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; padding: 16px 0 0; border: 0; background: transparent; color: var(--bme-ink); font: inherit; text-align: start; text-decoration: none; transition: color var(--bme-fast), transform var(--bme-fast); }
.bme-feature-page span { color: var(--bme-muted); font-size: .8rem; }
.bme-feature-page strong { font-size: .95rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.bme-feature-page--next_feature { align-items: flex-end; text-align: end; }
.bme-feature-page:hover { color: #596f22; transform: translateY(-2px); }
.bme-feature-page:disabled { opacity: .45; cursor: default; }

/* Shipping: compare a configured destination and parcel, then read the fee. */
.bme-shipping-demo {
  min-inline-size: 0;
  margin-block: 24px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--bme-line);
  border-radius: 18px;
  background: #fff;
  color: var(--bme-ink);
}
.bme-shipping-demo h3 { margin-block: 0 10px; font-size: 1.3rem; line-height: 1.3; text-wrap: balance; }
.bme-shipping-demo > p { margin-block: 0 18px; font-size: .95rem; line-height: 1.55; }
.bme-shipping-form { display: grid; gap: 12px; margin-block: 20px 16px; }
.bme-shipping-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bme-shipping-fields label { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-inline-size: 0; font-size: .86rem; font-weight: 600; line-height: 1.4; }
.bme-shipping-fields select {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 48px;
  padding: 10px 12px;
  border: 1px solid #adb7a4;
  border-radius: 10px;
  background-color: #fff;
  color: var(--bme-ink);
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
}
.bme-shipping-form > .bm-btn { justify-self: start; max-inline-size: 100%; min-block-size: 44px; white-space: normal; }
.bme-shipping-demo .bme-shipping-weight { margin-block: 0 18px; padding: 12px 14px; border-radius: 8px; background: var(--bme-mist); font-size: .9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bme-shipping-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 0 18px; }
.bme-shipping-result > div { min-inline-size: 0; }
.bme-shipping-result dt { margin-block-end: 6px; color: var(--bme-muted); font-size: .8rem; line-height: 1.45; }
.bme-shipping-result dd { margin: 0; color: var(--bme-ink); font-size: 1rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bme-shipping-result .bme-shipping-fee {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block-start: 16px;
  border-block-start: 3px solid var(--bme-acid);
}
.bme-shipping-result .bme-shipping-fee dt { margin: 0; color: var(--bme-ink); font-size: .95rem; font-weight: 600; }
.bme-shipping-result .bme-shipping-fee dd { flex: 0 1 auto; font-family: "Syne", "Figtree", sans-serif; font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1.1; text-align: end; }
.bme-shipping-demo .bme-example-note { margin-block: 0 8px; color: var(--bme-muted); font-size: .875rem; line-height: 1.55; }
.bme-shipping-demo .bme-shipping-settings { display: inline-flex; align-items: center; min-block-size: 44px; max-inline-size: 100%; padding-block: 10px; font-size: .9rem; font-weight: 600; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 600px) {
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"] { aspect-ratio: 9 / 10; }
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"] .bme-scene-art { block-size: 55%; object-position: center 20%; transform: none; }
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"] svg.bme-scene-proof {
    inset-inline-start: auto;
    inset-inline-end: 4%;
    inset-block-start: auto;
    inset-block-end: 12%;
    inline-size: 47%;
    block-size: auto;
    max-block-size: none;
    transform: scale(.97);
  }

  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"].is-focused .bme-scene-proof { transform: none; }
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"].is-focused .bme-scene-art { transform: none; opacity: 1; }
}

@media (max-width: 599px) {
  .bme-shipping-fields { grid-template-columns: minmax(0, 1fr); }
  .bme-shipping-form > .bm-btn { inline-size: 100%; }
  .bme-shipping-demo > p,
  .bme-shipping-demo .bme-shipping-weight,
  .bme-shipping-demo .bme-example-note { font-size: 1rem; }
  .bme-shipping-demo .bme-shipping-weight { padding-inline: 12px; }
  .bme-shipping-result { column-gap: 12px; }
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"] .bme-scene-art { block-size: auto; aspect-ratio: 4 / 3; object-position: right center; }
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"] .bme-scene-proof { inline-size: 100%; block-size: auto; max-block-size: none; transform: none; }
}

/* Pickup: the actual address and hours lead; the chosen object stays beside them. */
.bme-scene[data-feature-scene="pickup"] {
  display: grid;
  grid-template-columns: minmax(0, 350fr) minmax(0, 298fr);
  align-items: start;
  gap: 16px 14px;
  aspect-ratio: auto;
  padding: 14px;
}
.bme-scene[data-feature-scene="pickup"] .bme-scene-art {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 12px;
  object-fit: cover;
  object-position: right center;
  transform: none;
  opacity: 1;
}
.bme-scene[data-feature-scene="pickup"] .bme-scene-proof,
.bme-scene[data-feature-scene="pickup"] .bme-scene-proof-secondary {
  position: relative;
  inset: auto;
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: none;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #fbfcf7;
  box-shadow: 0 5px 18px #18201814;
  transform: none;
}
.bme-scene[data-feature-scene="pickup"] .bme-scene-proof { grid-column: 1; grid-row: 2; }
.bme-scene[data-feature-scene="pickup"] .bme-scene-proof-secondary { grid-column: 2; grid-row: 2; }
.bme-scene[data-feature-scene="pickup"].is-focused .bme-scene-art { transform: scale(.985); opacity: 1; }
.bme-scene[data-feature-scene="pickup"].is-focused .bme-scene-proof,
.bme-scene[data-feature-scene="pickup"].is-focused .bme-scene-proof-secondary { transform: none; }

@media (max-width: 599px) {
  .bme-scene[data-feature-scene="pickup"] { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .bme-scene[data-feature-scene="pickup"] .bme-scene-art { border-radius: 0; }
  .bme-scene[data-feature-scene="pickup"] .bme-scene-proof { grid-row: 2; }
  .bme-scene[data-feature-scene="pickup"] .bme-scene-proof-secondary { grid-column: 1; grid-row: 3; max-inline-size: 298px; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bme-scene[data-feature-scene="pickup"] .bme-scene-art,
  .bme-scene[data-feature-scene="pickup"] .bme-scene-proof,
  .bme-scene[data-feature-scene="pickup"] .bme-scene-proof-secondary { transform: none !important; transition: none !important; }
}

/* Coupons: keep the entered code, discount and total together at reading size. */
.bme-coupon-demo {
  min-inline-size: 0;
  margin-block: 24px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--bme-line);
  border-radius: 18px;
  background: #fff;
  color: var(--bme-ink);
}
.bme-coupon-demo h3 { margin-block: 0 16px; font-size: 1.3rem; line-height: 1.3; text-wrap: balance; }
.bme-coupon-demo > p { margin-block: 14px 0; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.bme-coupon-ticket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 16px;
  border-block-start: 3px solid var(--bme-acid);
  border-radius: 10px;
  background: var(--bme-mist);
}
.bme-coupon-ticket > div { flex: 1 1 150px; min-inline-size: 0; }
.bme-coupon-ticket span { display: block; margin-block-end: 6px; color: var(--bme-muted); font-size: .9rem; line-height: 1.4; }
.bme-coupon-ticket code {
  display: inline-block;
  max-inline-size: 100%;
  padding: 0;
  background: transparent;
  color: var(--bme-ink);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .025em;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  user-select: all;
}
.bme-coupon-ticket > strong { flex: 1 1 180px; min-inline-size: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.bme-coupon-demo .bme-coupon-conditions { font-weight: 600; }
.bme-coupon-demo .bme-example-note { color: var(--bme-muted); font-size: .9375rem; line-height: 1.55; }
.bme-coupon-surfaces { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 20px; }
.bme-coupon-surfaces .bm-btn {
  flex: 1 1 140px;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 14px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bme-coupon-surfaces [aria-current="page"] { border-color: var(--bme-acid); background: var(--bme-acid); color: var(--bme-ink); }
.bme-coupon-surfaces a:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 3px; }
.bme-scene[data-feature-scene="coupons"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 16px;
  aspect-ratio: auto;
  padding: 14px;
}
.bme-scene[data-feature-scene="coupons"] .bme-scene-art {
  position: relative;
  inset: auto;
  grid-row: 1;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 12 / 5;
  margin: 0;
  border-radius: 12px;
  object-position: center 20%;
  transform: none;
  opacity: 1;
}
.bme-scene[data-feature-scene="coupons"] .bme-scene-proof {
  position: relative;
  inset: auto;
  grid-row: 2;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 380px;
  max-block-size: none;
  margin: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 5px 18px #18201814;
  transform: none;
}
.bme-scene[data-feature-scene="coupons"].is-focused .bme-scene-art { transform: scale(.985); opacity: 1; }
.bme-scene[data-feature-scene="coupons"].is-focused .bme-scene-proof { transform: none; }

@media (max-width: 599px) {
  .bme-coupon-demo { padding: 18px; }
  .bme-coupon-demo .bme-example-note { font-size: 1rem; }
  .bme-coupon-ticket { padding: 14px; }
  .bme-scene[data-feature-scene="coupons"] { padding: 0; }
  .bme-scene[data-feature-scene="coupons"] .bme-scene-art { aspect-ratio: 16 / 10; border-radius: 0; object-position: right center; }
}

@media (prefers-reduced-motion: reduce) {
  .bme-coupon-surfaces .bm-btn,
  .bme-scene[data-feature-scene="coupons"] .bme-scene-art,
  .bme-scene[data-feature-scene="coupons"] .bme-scene-proof { transform: none !important; transition: none !important; }
}

/* A daylight exhibition: one bold introduction, one immersive proof at a time. */
.bm-home-daylight.bme-page { overflow: visible; padding-block-start: clamp(20px, 2.5vw, 36px); }
.bme-explorer { display: block; max-inline-size: 1200px; margin-inline: auto; }
.bme-page #ecommerce-detail, .bme-page #ecommerce-next, .bme-page #ecommerce-additional { scroll-margin-block-start: 104px; }

/* A visible directory closes the demonstration; every function is a direct link. */
.bme-next { max-inline-size: 1100px; margin-inline: auto; margin-block: clamp(56px, 7vw, 88px) 0; padding-block-start: clamp(28px, 4vw, 48px); border-block-start: 1px solid var(--bme-line); }
.bme-next-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; }
.bme-next-heading .bme-kicker { grid-column: 1 / -1; margin: 0; color: #56604f; font-size: .72rem; letter-spacing: .1em; }
.bme-page .bme-next-heading h2 { min-inline-size: 0; max-inline-size: 25ch; margin: 0; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.bme-next-heading .bme-result-count { margin: 0; padding-block-end: 4px; color: var(--bme-muted); font-size: .9rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bme-next .bme-feature-list { display: block; }
.bme-next .bme-feature-group { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); align-items: start; gap: 12px 24px; min-inline-size: 0; padding-block: 16px; border-block-start: 1px solid var(--bme-line); }
.bme-next .bme-feature-group:last-child { border-block-end: 1px solid var(--bme-line); }
.bme-page .bme-next .bme-feature-group h3 { min-inline-size: 0; margin: 0; padding-block: 11px; color: var(--bme-ink); font-family: "Figtree", sans-serif; font-size: .9rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-wrap: initial; }
.bme-feature-choices { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; min-inline-size: 0; }
.bme-feature-choice { display: inline-grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--bme-ink); font-size: .9rem; line-height: 1.5; transition: background-color 160ms ease, border-color 160ms ease; }
.bme-feature-choice > span { min-inline-size: 0; overflow-wrap: anywhere; }
.bme-feature-choice:hover { border-color: #cad3bf; background: var(--bme-mist); }
.bme-feature-choice[aria-current="true"] { grid-template-columns: 22px minmax(0, 1fr) 16px; border-color: #bac994; background: var(--bme-acid); font-weight: 600; }
.bme-feature-choice[aria-current="true"]::after { content: '✓'; font-size: .9rem; }
.bme-choice-number { color: #56604f; font-size: .75rem; font-variant-numeric: tabular-nums; }
.bme-next .bme-feature-choice:focus-visible, .bme-feature-page:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 3px; }
.bme-explorer .bme-feature { min-inline-size: 0; padding: 0; border: 0; }
.bme-explorer .bme-feature-head { inline-size: 100%; max-inline-size: 1080px; margin-inline: auto; margin-block-end: 28px; text-align: center; }
.bme-explorer .bme-feature-head .bme-kicker { margin-block-end: 12px; color: #56604f; font-size: .72rem; letter-spacing: .1em; }
.bme-explorer .bme-feature-head h1 { max-inline-size: 32ch; margin-inline: auto; margin-block-end: 18px; font-size: clamp(2.4rem, 4.7vw, 3.75rem); line-height: 1.05; letter-spacing: -.055em; }
.bme-explorer .bme-feature-head h1:focus:not(:focus-visible) { outline: none; }
.bme-explorer .bme-feature-head h1:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 6px; border-radius: 4px; }
.bme-explorer .bme-feature-head .bme-lead { max-inline-size: 60ch; margin-inline: auto; margin-block-end: 0; font-size: 1.15rem; line-height: 1.6; }
.bme-example-label { margin: 0; color: var(--bme-muted); font-size: .85rem; line-height: 1.5; }
.bme-explorer .bme-feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(28px, 4vw, 48px); }
.bme-explorer .bme-proof { inline-size: 100%; max-inline-size: 1100px; margin-inline: auto; }
.bme-explorer .bme-feature-copy { inline-size: 100%; max-inline-size: 70ch; margin-inline: auto; font-size: 1rem; line-height: 1.7; }
.bme-explorer .bme-feature-copy > :first-child { margin-block-start: 0; }
.bme-explorer .bme-feature-copy h3 { font-size: 1.25rem; line-height: 1.35; }
.bme-explorer .bme-details--open { margin-block: 20px 0; padding-block: 20px 0; border-block-start: 1px solid var(--bme-line); border-block-end: 0; }
.bme-explorer .bme-details--open > h3 { margin-block: 0 14px; }
.bme-explorer .bme-details--open .bme-details-body { padding-block-end: 0; color: var(--bme-ink); font-size: 1rem; line-height: 1.7; }
.bme-explorer .bme-details-body p + p { margin-block-start: 16px; }
.bme-explorer .bme-feature-copy > .bme-example-note { margin-block: 20px 0; color: var(--bme-muted); font-size: .9rem; line-height: 1.6; }
.bme-explorer .bme-proof-reading { margin-block-start: 18px; padding-block: 18px; }
.bme-explorer .bme-step-explanation { min-block-size: 0; }

/* A photographic stage, real evidence in the foreground, one scene per function. */
.bme-explorer .bme-scene { display: block; position: relative; min-block-size: 620px; aspect-ratio: 16 / 10; padding: 0; border: 1px solid #12151114; border-radius: clamp(22px, 3vw, 36px); background: #edf1e7; box-shadow: 0 30px 70px #1820181f, 0 2px 6px #1820180a; }
.bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-art { position: absolute; inset-inline: 0; inset-block-start: -64px; inline-size: 100%; block-size: calc(100% + 128px); max-inline-size: none; aspect-ratio: auto; margin: 0; border-radius: 0; object-fit: cover; object-position: center center; opacity: 1; transform: translate3d(0, var(--bme-art-shift, 0px), 0) scale(1.02); transition: opacity 280ms ease; will-change: transform; }
.bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-proof { z-index: 2; box-shadow: 0 26px 66px #12151138, 0 3px 12px #12151114; transform: translate3d(0, var(--bme-proof-shift, 0px), 0); transition: box-shadow 280ms ease; will-change: transform; }
.bme-stage-index { position: absolute; z-index: 1; inset-inline-start: 24px; inset-block-start: 24px; color: var(--bme-acid); font-family: "Syne", "Figtree", sans-serif; font-size: clamp(110px, 15vw, 180px); font-weight: 700; line-height: .8; letter-spacing: -.085em; -webkit-text-stroke: 1px #12151135; text-shadow: 0 8px 22px #1215110a; pointer-events: none; user-select: none; }
.bme-explorer .bme-scene:is([data-feature-scene="coupons"], [data-feature-scene="pickup"], [data-feature-scene="checkout"], [data-feature-scene="shipping"][data-theme="capsule"]) { min-block-size: 680px; aspect-ratio: 16 / 10; }
.bme-explorer .bme-scene:is([data-feature-scene="coupons"], [data-feature-scene="checkout"], [data-feature-scene="shipping"][data-theme="capsule"]) .bme-scene-proof { position: absolute; inset-inline-start: 4%; inset-inline-end: auto; inset-block-start: 22%; inset-block-end: auto; inline-size: min(40%, 380px); block-size: auto; max-inline-size: none; max-block-size: none; margin: 0; border: 0; border-radius: 12px; transform: translate3d(0, var(--bme-proof-shift, 0px), 0); }
.bme-explorer .bme-scene[data-feature-scene="pickup"][data-theme] .bme-scene-proof { position: absolute; inset-inline-start: 4%; inset-inline-end: auto; inset-block-start: 22%; inset-block-end: auto; inline-size: min(36%, 380px); block-size: auto; max-inline-size: none; max-block-size: none; transform: translate3d(0, var(--bme-proof-shift, 0px), 0); }
.bme-explorer .bme-scene[data-feature-scene="pickup"][data-theme] .bme-scene-proof-secondary { position: absolute; z-index: 2; inset-inline-start: auto; inset-inline-end: 4%; inset-block-start: auto; inset-block-end: 5%; inline-size: min(30%, 320px); block-size: auto; max-inline-size: none; max-block-size: none; border: 0; border-radius: 12px; box-shadow: 0 26px 66px #12151130; transform: translate3d(0, var(--bme-proof-shift, 0px), 0); will-change: transform; }
.bme-explorer .bme-scene[data-feature-scene="pickup"][data-theme] .bme-stage-index { color: #fbfcf7; -webkit-text-stroke-color: #12151130; }
.bme-explorer .bme-scene[data-feature-scene][data-theme].is-focused .bme-scene-art { opacity: 1; transform: translate3d(0, var(--bme-art-shift, 0px), 0) scale(1.02); }
.bme-explorer .bme-scene[data-feature-scene][data-theme].is-focused .bme-scene-proof { transform: translate3d(0, var(--bme-proof-shift, 0px), 0); }

@media (max-width: 679px) {
  .bme-page #ecommerce-detail, .bme-page #ecommerce-next, .bme-page #ecommerce-additional { scroll-margin-block-start: 92px; }
  .bme-next-heading { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bme-next-heading .bme-result-count { padding-block-end: 0; }
  .bme-feature-pagination { gap: 14px; margin-block-start: 24px; }
  .bme-feature-page { padding-block-start: 13px; }
  .bme-feature-page span { font-size: .75rem; }
  .bme-feature-page strong { font-size: .84rem; }
  .bme-next .bme-feature-group { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 16px; }
  .bme-page .bme-next .bme-feature-group h3 { padding: 0; }
  .bme-feature-choices { gap: 4px; }
  .bme-feature-choice { padding-inline: 8px; }
  .bme-explorer .bme-feature-head { margin-block-end: 18px; }
  .bme-explorer .bme-feature-head h1 { font-size: clamp(2rem, 8.7vw, 2.8rem); margin-block-end: 16px; }
  .bme-explorer .bme-feature-head .bme-lead { font-size: 1rem; }
  .bme-example-label { flex-basis: 100%; font-size: .85rem; }
  .bme-explorer .bme-feature-grid { gap: 22px; }
  .bme-explorer .bme-feature-copy > .bme-example-note { font-size: 1rem; }
}
@media (max-width: 799px) {
  .bme-explorer .bme-proof { max-inline-size: 680px; }
  .bme-explorer .bme-scene[data-feature-scene][data-theme] { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; min-block-size: 0; aspect-ratio: auto; padding: 0; border-radius: 20px; box-shadow: 0 16px 38px #1820181a; }
  .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-art { position: relative; inset: auto; grid-column: 1; grid-row: 1; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; margin: 0; border-radius: 0; transform: none; will-change: auto; }
  .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-proof { position: relative; inset: auto; grid-column: 1; grid-row: 2; inline-size: 100%; max-inline-size: 420px; block-size: auto; max-block-size: none; margin: 0; border-width: 0; border-radius: 10px; transform: none; box-shadow: 0 10px 24px #18201818; will-change: auto; }
  .bme-explorer .bme-scene[data-feature-scene="mobile"][data-theme] .bme-scene-proof { inline-size: min(80%, 280px); border: 5px solid #20251f; border-radius: 24px; }
  .bme-explorer .bme-scene[data-feature-scene="media"][data-theme] .bme-scene-proof { max-inline-size: 100%; }
  .bme-explorer .bme-scene[data-feature-scene="pickup"][data-theme] .bme-scene-art { aspect-ratio: 4 / 3; }
  .bme-explorer .bme-scene[data-feature-scene="pickup"][data-theme] .bme-scene-proof-secondary { position: relative; inset: auto; grid-column: 1; grid-row: 3; inline-size: min(100%, 298px); block-size: auto; max-block-size: none; transform: none; will-change: auto; }
  .bme-stage-index { inset-inline-start: 16px; inset-block-start: 16px; font-size: clamp(72px, 14vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-art, .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-proof, .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-scene-proof-secondary { transform: none !important; transition: none !important; will-change: auto; }
  .bme-feature-choice, .bme-feature-page { transition: none; }
}

/* Annotated store evidence: the live-demo action belongs to the real capture. */
.bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-capture-wrap {
  position: absolute;
  z-index: 2;
  inset-inline-start: 4%;
  inset-block-start: 12%;
  inline-size: 46%;
  min-inline-size: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 26px 66px #12151138, 0 3px 12px #12151114;
  transform: translate3d(0, var(--bme-proof-shift, 0px), 0);
  will-change: transform;
}
.bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-capture-wrap > .bme-scene-proof {
  position: relative;
  inset: auto;
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: none;
  margin: 0;
  border: 0;
  border-radius: 12px 12px 0 0;
  object-fit: contain;
  background: #fff;
  box-shadow: none;
  transform: none;
  transition: none;
  will-change: auto;
}
.bme-explorer .bme-scene--preview[data-feature-scene][data-theme] .bme-capture-wrap > .bme-scene-proof { border-radius: 12px; }
.bme-demo-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: var(--bme-acid);
  color: var(--bme-ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease;
}
.bme-demo-link:hover { background: #e5ff80; }
.bme-demo-link:focus-visible { z-index: 3; outline: 3px solid var(--bme-ink); outline-offset: 4px; }
.bme-explorer .bme-scene:is([data-feature-scene="comparison"], [data-feature-scene="variants"])[data-theme] .bme-capture-wrap { inline-size: min(44%, 350px); }
.bme-explorer .bme-scene[data-feature-scene="mobile"][data-theme] .bme-capture-wrap { inset-block-start: 7%; inline-size: min(30%, 240px); border: 5px solid #20251f; border-radius: 24px; }
.bme-explorer .bme-scene[data-feature-scene="mobile"][data-theme] .bme-capture-wrap > .bme-scene-proof { border-radius: 18px 18px 0 0; }
.bme-explorer .bme-scene[data-feature-scene="mobile"][data-theme] .bme-demo-link { border-radius: 0 0 18px 18px; font-size: .875rem; }
.bme-explorer .bme-scene[data-feature-scene="media"][data-theme] .bme-capture-wrap { inset-block-start: 8%; inline-size: min(70%, 740px); }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] { min-block-size: 740px; aspect-ratio: auto; }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-capture-wrap { inset-inline-start: 8%; inset-block-start: 10%; inline-size: min(27%, 290px); border: 5px solid #222820; border-radius: 28px; box-shadow: 0 24px 54px #12151155; }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-capture-wrap > .bme-scene-proof { aspect-ratio: 390 / 620; block-size: auto; border-radius: 22px 22px 0 0; object-fit: cover; object-position: top; }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-demo-link { border-radius: 0 0 22px 22px; font-size: .85rem; }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-capture-source { inset-block-end: calc(100% + 12px); inset-inline-start: 0; inset-inline-end: auto; inline-size: max-content; max-inline-size: 90%; padding: 6px 12px; border-radius: 999px; box-shadow: 0 5px 16px #12151120; }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-scene-note { inset-inline-start: 55%; inset-block-end: 22%; inline-size: 230px; color: #fff; text-shadow: 0 1px 5px #121511, 0 2px 18px #121511; transform: rotate(-4deg); }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-note-arrow--upsell { inset-inline-start: -375px; inset-block-start: -145px; inset-block-end: auto; inline-size: 400px; block-size: 140px; color: #fff; filter: drop-shadow(0 1px 2px #121511cc); }
.bme-explorer .bme-scene[data-feature-scene="selector"][data-theme="peinturolo"] .bme-capture-wrap { inset-block-start: 58%; inline-size: min(46%, 460px); }
.bme-explorer .bme-scene:is([data-feature-scene="coupons"], [data-feature-scene="checkout"], [data-feature-scene="shipping"][data-theme="capsule"]) .bme-capture-wrap { inset-block-start: 14%; inline-size: min(40%, 380px); }
.bme-explorer .bme-scene[data-feature-scene="pickup"][data-theme] .bme-capture-wrap { inset-block-start: 14%; inline-size: min(36%, 380px); }
.bme-scene-note { position: absolute; z-index: 3; inset-inline-start: calc(100% + 28px); inset-block-end: 74px; inline-size: clamp(140px, 16vw, 180px); margin: 0; color: var(--bme-ink); font-family: "Caveat", cursive; font-size: clamp(1.4rem, 2.3vw, 1.9rem); font-weight: 600; line-height: 1.12; text-align: center; text-wrap: balance; text-shadow: 0 1px 10px #fbfcf7, 0 0 18px #fbfcf7; pointer-events: none; }
.bme-note-arrow { position: absolute; inset-inline-start: -24px; inset-block-end: -75px; inline-size: 120px; block-size: 90px; overflow: visible; color: var(--bme-ink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bme-note-arrow path { vector-effect: non-scaling-stroke; }
html[dir="rtl"] .bme-note-arrow { transform: scaleX(-1); }

.bme-variants { margin-block-start: 28px; text-align: center; }
.bme-variants-title { margin-block: 0 14px; color: var(--bme-ink); font-size: .9rem; font-weight: 600; line-height: 1.5; }
.bme-variants .bme-variant-options { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 14px; margin: 0; }
.bme-variants .bme-variant-options .bme-variant { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 5px; inline-size: 140px; min-inline-size: 0; min-block-size: 44px; padding: 0 0 9px; border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: transparent; color: var(--bme-ink); font-size: .9rem; line-height: 1.4; text-align: start; text-decoration: none; transition: border-color 160ms ease; }
.bme-variant-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; margin-block-end: 3px; overflow: hidden; border: 1px solid var(--bme-line); border-radius: 8px; background: #fff; object-fit: cover; object-position: top; }
.bme-variant > span { font-weight: 600; overflow-wrap: anywhere; }
.bme-variant small { color: var(--bme-muted); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.bme-variants .bme-variant-options .bme-variant:hover { border-block-end-color: #9ba88c; }
.bme-variants .bme-variant-options .bme-variant[aria-current="true"] { border-block-end-color: var(--bme-ink); background: transparent; }
.bme-variants .bme-variant-options .bme-variant:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 4px; }
.bme-variants + .bme-coupon-surfaces { justify-content: center; margin-block-start: 20px; }

@media (max-width: 799px) {
  .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-capture-wrap { position: relative; inset: auto; grid-column: 1; grid-row: 2; inline-size: 100%; max-inline-size: 420px; margin: 0; transform: none; box-shadow: 0 10px 24px #18201818; will-change: auto; }
  .bme-explorer .bme-scene[data-feature-scene="mobile"][data-theme] .bme-capture-wrap { inline-size: min(80%, 280px); }
  .bme-explorer .bme-scene[data-feature-scene="media"][data-theme] .bme-capture-wrap { max-inline-size: 100%; }
  .bme-scene-note { position: relative; inset: auto; inline-size: auto; max-inline-size: none; margin: 0; padding: 22px 54px 20px 16px; background: var(--bme-paper); font-size: 1.5rem; text-shadow: none; }
  .bme-note-arrow { inset-inline-start: auto; inset-inline-end: 12px; inset-block-start: 9px; inset-block-end: auto; inline-size: 42px; block-size: 34px; transform: rotate(90deg); }
  html[dir="rtl"] .bme-note-arrow { transform: rotate(-90deg) scaleX(-1); }
  .bme-variants { margin-block-start: 22px; }
  .bme-variants .bme-variant-options { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bme-explorer .bme-scene[data-feature-scene][data-theme] .bme-capture-wrap { transform: none !important; will-change: auto; }
  .bme-demo-link, .bme-variants .bme-variant-options .bme-variant { transition: none; }
}

/* A payment constellation: existing vector marks, a real storefront underneath. */
.bme-explorer .bme-scene.bme-scene--payments[data-feature-scene][data-theme] { min-block-size: 720px; aspect-ratio: auto; background: #f1f3ea; }
.bme-explorer .bme-scene--payments[data-feature-scene][data-theme] .bme-scene-art { object-position: right center; opacity: .92; -webkit-mask-image: linear-gradient(to right, transparent 20%, #000 78%); mask-image: linear-gradient(to right, transparent 20%, #000 78%); }
.bme-scene--payments .bme-stage-index { display: none; }
.bme-payment-universe { position: relative; z-index: 1; inline-size: 58%; padding: 18px 18px 0; }
.bme-payment-globe { position: relative; inline-size: 100%; aspect-ratio: 600 / 480; isolation: isolate; }
.bme-globe-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; stroke: #829477; stroke-width: .7; opacity: .5; transform: rotate(-12deg); }
.bme-pay-tile { position: absolute; left: var(--tile-x); top: var(--tile-y); z-index: var(--tile-layer); inline-size: 21%; border-radius: 10px; background: #fbfcf7; box-shadow: 0 8px 24px #12151112; transform: translate(-50%, -50%) scale(var(--tile-scale)); }
.bme-pay-tile img { display: block; inline-size: 100%; block-size: auto; }
.bme-payment-caption { position: relative; z-index: 2; max-inline-size: 42ch; margin: -4px auto 0; padding: 16px 18px; border-radius: 16px; background: #fbfcf7ed; }
.bme-payment-caption .bme-kicker { margin: 0 0 10px; font-size: .8rem; letter-spacing: .045em; }
.bme-payment-caption p:nth-of-type(2) { margin: 0; color: #4c5747; font-size: .875rem; line-height: 1.5; }
.bme-payment-demo-link { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 14px; padding-block-end: 3px; border-block-end: 1px solid currentColor; color: var(--bme-ink); font-size: .875rem; font-weight: 650; text-decoration: none; }
.bme-payment-demo-link:hover { border-block-end-width: 2px; }
.bme-payment-demo-link:focus-visible { outline: 3px solid var(--bme-ink); outline-offset: 4px; }
.bme-explorer .bme-scene--payments[data-feature-scene][data-theme] .bme-capture-wrap { inset-inline-start: auto; inset-inline-end: 5%; inset-block-start: auto; inset-block-end: 6%; inline-size: 45%; max-inline-size: 510px; }
.bme-scene--payments .bme-scene-note { inset-inline-start: auto; inset-inline-end: 4%; inset-block-end: calc(100% + 24px); inline-size: 190px; color: #121511; padding: 10px; border-radius: 14px; background: #fbfcf7e8; transform: rotate(-5deg); }
.bme-scene--payments .bme-note-arrow { inset-inline-start: -38px; inset-block-end: -66px; inline-size: 92px; block-size: 70px; }
.bme-scene.is-entering .bme-note-arrow path { animation: bme-annotation-draw 650ms ease 450ms both; }
.bme-scene.is-entering .bme-scene-note > span { animation: bme-annotation-write 380ms ease 580ms both; }
.bme-scene.is-entering .bme-pay-tile { animation: bme-payment-arrive 700ms cubic-bezier(.16,1,.3,1) var(--tile-delay) both; }
@keyframes bme-annotation-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes bme-annotation-write { from { opacity: 0; } to { opacity: 1; } }
@keyframes bme-payment-arrive { from { opacity: 0; transform: translate(-50%, -20%) scale(.65); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--tile-scale)); } }
@media (max-width: 799px) {
  .bme-explorer .bme-scene.bme-scene--payments[data-feature-scene][data-theme] { display: flex; flex-direction: column; gap: 0; min-block-size: 0; }
  .bme-explorer .bme-scene--payments[data-feature-scene][data-theme] .bme-scene-art { position: absolute; inset: 0; block-size: 280px; aspect-ratio: auto; object-position: right center; opacity: .22; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
  .bme-payment-universe { order: 0; inline-size: 100%; padding: 10px 12px 20px; }
  .bme-payment-globe { max-inline-size: 410px; margin-inline: auto; }
  .bme-payment-caption { margin-block-start: 10px; padding: 12px; max-inline-size: 44ch; background: #fbfcf7; }
  .bme-payment-caption p:nth-of-type(2) { font-size: 1rem; }
  .bme-explorer .bme-scene--payments[data-feature-scene][data-theme] .bme-capture-wrap { order: 1; position: relative; inset: auto; inline-size: 100%; max-inline-size: 510px; }
  .bme-scene--payments .bme-scene-note { position: relative; inset: auto; inline-size: auto; padding: 22px 54px 20px 16px; background: var(--bme-paper); border-radius: 0; transform: none; }
  .bme-scene--payments .bme-note-arrow { inset-inline-start: auto; inset-inline-end: 12px; inset-block-start: 9px; inset-block-end: auto; inline-size: 42px; block-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .bme-scene.is-entering .bme-pay-tile, .bme-scene.is-entering .bme-note-arrow path, .bme-scene.is-entering .bme-scene-note > span { animation: none; }
}

/* Annotation anchors follow the visible source, rather than the demo button.
   Each offset accounts for the 48px CTA and the arrow tip 60px below the note. */
.bme-explorer .bme-coupon-surfaces { inline-size: 100%; max-inline-size: 440px; margin-inline: auto; justify-content: center; }
.bme-explorer .bme-coupon-surfaces .bm-btn { flex: 1 1 180px; max-inline-size: 216px; }
@media (min-width: 800px) {
  .bme-scene[data-feature-scene="coupons"] { --bme-note-bottom: calc(26% + 96px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="coupons"][data-theme="aeterna"] { --bme-note-bottom: calc(24% + 96px); }
  .bme-scene[data-feature-scene="coupons"][data-coupon-surface="cart"] { --bme-note-bottom: calc(29% + 94px); }
  .bme-scene[data-feature-scene="shipping"][data-theme="capsule"] { --bme-note-bottom: calc(26% + 96px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="pickup"][data-theme="patine"] { --bme-note-bottom: calc(72% + 73px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="media"][data-theme="defrance"] { --bme-note-bottom: calc(100% + 30px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="variants"][data-theme="alcove"] { --bme-note-bottom: calc(36% + 91px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="variants"][data-theme="elan"] { --bme-note-bottom: calc(38% + 90px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="comparison"][data-theme="etabli"] { --bme-note-bottom: calc(33% + 92px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="selector"][data-theme="peinturolo"] { --bme-note-bottom: calc(21% + 98px); --bme-note-arrow-start: -60px; }
  .bme-scene[data-feature-scene="mobile"] { --bme-note-bottom: calc(50% + 84px); --bme-note-arrow-start: -60px; }
  .bme-scene:is([data-feature-scene="search"], [data-feature-scene="specifications"], [data-feature-scene="reviews"], [data-feature-scene="wishlist"], [data-feature-scene="account"], [data-feature-scene="invoices"], [data-feature-scene="refunds"], [data-feature-scene="digital"], [data-feature-scene="inventory"], [data-feature-scene="restock"]) { --bme-note-bottom: 160px; --bme-note-arrow-start: -110px; }
  .bme-scene:not(.bme-scene--payments) .bme-scene-note { inset-block-end: var(--bme-note-bottom, 74px); }
  .bme-scene:not(.bme-scene--payments) .bme-note-arrow { inset-inline-start: var(--bme-note-arrow-start, -24px); }
  .bme-scene:not(.bme-scene--payments)[data-feature-scene="order_bump"] .bme-note-arrow--order-bump { inset-inline-start: -520px; inset-block-end: 15px; inline-size: 520px; block-size: 110px; }
  .bme-explorer .bme-scene[data-feature-scene="media"][data-theme="defrance"] .bme-capture-wrap { inset-block-start: 20%; }
  .bme-scene[data-feature-scene="media"][data-theme="defrance"] .bme-scene-note { inset-inline-start: calc(42% + 48px); inline-size: 220px; }
  .bme-explorer .bme-scene[data-feature-scene="coupons"] .bme-stage-index { font-size: 56px; }
}
.bme-scene .bme-stage-index { display: none; }
.bme-technical-proof { position: absolute; z-index: 2; inset-inline-start: 7%; inset-block-start: 13%; display: grid; inline-size: min(58%, 680px); min-block-size: 52%; overflow: hidden; border: 1px solid #ffffff66; border-radius: 20px; background: #121914e8; color: #fff; box-shadow: 0 28px 75px #07100877; backdrop-filter: blur(18px); }
.bme-technical-proof-head { display: flex; align-items: center; gap: 12px; padding: 22px clamp(22px, 3vw, 38px); border-block-end: 1px solid #ffffff30; font-size: clamp(.9rem, 1.5vw, 1.1rem); font-weight: 650; letter-spacing: .01em; }
.bme-technical-proof-mark { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; background: #d8ff43; color: #121914; font-size: 1.35rem; }
.bme-technical-proof-body { display: grid; align-content: center; gap: 0; padding: 14px clamp(22px, 3vw, 38px); }
.bme-technical-proof-row { display: grid; grid-template-columns: minmax(82px, 25%) minmax(0, 1fr); align-items: center; gap: 16px; min-block-size: 54px; padding-block: 10px; border-block-end: 1px solid #ffffff27; overflow-wrap: anywhere; }
.bme-technical-proof-row:last-child { border: 0; }
.bme-technical-proof-row code { color: #d8ff43; font-size: .85rem; }
.bme-technical-proof-row strong, .bme-technical-proof-row span { font-size: clamp(.84rem, 1.4vw, 1rem); font-weight: 500; }
.bme-technical-proof-foot { align-self: end; margin: 0; padding: 15px clamp(22px, 3vw, 38px) 20px; border-block-start: 1px solid #ffffff30; color: #d6e0d1; font-size: .82rem; line-height: 1.4; }
.bme-technical-proof-foot a { color: #d8ff43; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bme-technical-proof-foot a:focus-visible { outline: 2px solid #d8ff43; outline-offset: 3px; }
.bme-technical-proof-body--graph { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bme-technical-proof-body--graph span, .bme-technical-proof-body--steps span { padding: 14px 16px; border: 1px solid #ffffff5c; border-radius: 10px; background: #ffffff0d; font-weight: 600; }
.bme-technical-proof-body--graph i { color: #d8ff43; font-style: normal; font-size: 1.5rem; }
.bme-technical-proof-body--steps { gap: 12px; }
.bme-technical-proof-body--steps b { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; margin-inline-end: 12px; border-radius: 8px; background: #d8ff43; color: #121914; font-size: .8rem; }
.bme-technical-proof-body--delivery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bme-technical-proof-body--delivery > div { display: grid; align-content: center; gap: 10px; padding: 18px 12px; border: 1px solid #ffffff5c; border-radius: 10px; background: #ffffff0d; }
.bme-technical-proof-body--delivery small { color: #d6e0d1; font-size: .72rem; }
.bme-technical-proof-body--delivery strong { font-size: clamp(.9rem, 1.5vw, 1.15rem); }
@media (max-width: 799px) {
  .bme-technical-proof { position: relative; inset: auto; grid-row: 2; inline-size: calc(100% - 30px); min-block-size: 0; margin: 60px auto 20px; border-radius: 16px; }
  .bme-technical-proof-body--delivery { grid-template-columns: 1fr; }
  .bme-technical-proof-body--graph { gap: 7px; }
  .bme-technical-proof-body--graph span { padding: 8px; }
}
@media (max-width: 799px) {
  /* In a single column the caption names the source; a pointer must not hit the CTA. */
  .bme-scene:not(.bme-scene--payments):is([data-feature-scene="coupons"], [data-feature-scene="shipping"][data-theme="capsule"], [data-feature-scene="pickup"][data-theme="patine"], [data-feature-scene="media"][data-theme="defrance"], [data-feature-scene="variants"], [data-feature-scene="comparison"][data-theme="etabli"], [data-feature-scene="selector"][data-theme="peinturolo"], [data-feature-scene="checkout"], [data-feature-scene="mobile"], [data-feature-scene="order_bump"], [data-feature-scene="search"], [data-feature-scene="specifications"], [data-feature-scene="reviews"], [data-feature-scene="wishlist"], [data-feature-scene="account"], [data-feature-scene="invoices"], [data-feature-scene="refunds"], [data-feature-scene="digital"], [data-feature-scene="inventory"], [data-feature-scene="restock"]) .bme-note-arrow { display: none; }
  .bme-scene:not(.bme-scene--payments) .bme-scene-note { padding-inline: 20px; }
  .bme-explorer .bme-coupon-surfaces .bm-btn { flex-basis: 140px; }
}

/* Joined RTL letterforms need space beyond the Latin display rhythm. */

html[dir="rtl"] .bme-page .bme-feature-head h1,
html[dir="rtl"] .bme-page .bme-next-heading h2 {
  line-height: 1.4;
  letter-spacing: normal;
}

/* Handwritten direction stays visible across both pale and dark art. */
@media (min-width: 800px) {
  .bme-scene:not(.bme-scene--payments) .bme-scene-note { color: #fff; text-shadow: 0 2px 2px #080b08, 0 2px 8px #080b08, 0 0 18px #080b08; }
  .bme-scene:not(.bme-scene--payments) .bme-note-arrow { color: #fff; filter: drop-shadow(0 1px 2px #121511cc); }
  .bme-scene:is([data-feature-scene="search"], [data-feature-scene="specifications"], [data-feature-scene="reviews"], [data-feature-scene="wishlist"], [data-feature-scene="account"], [data-feature-scene="invoices"], [data-feature-scene="refunds"], [data-feature-scene="digital"], [data-feature-scene="inventory"], [data-feature-scene="restock"]) .bme-scene-note { inset-inline-start: calc(100% + 130px); }
}

/* An editorial index for future demonstrations, with no inactive controls. */
.bme-additional { max-inline-size: 1100px; margin: 48px auto 0; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--bme-line); border-radius: 24px; background: var(--bme-mist); }
.bme-additional-heading { max-inline-size: 65ch; margin-block-end: 28px; }
.bme-additional-heading .bme-kicker { margin: 0 0 12px; color: #56604f; font-size: .75rem; letter-spacing: .1em; }
.bme-page .bme-additional-heading h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; }
.bme-additional-heading > p:last-child { margin: 0; color: #4c5747; font-size: 1rem; line-height: 1.6; }
.bme-additional-group { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px 24px; padding-block: 20px; border-block-start: 1px solid #d4dacc; }
.bme-additional-group:last-child { padding-block-end: 0; }
.bme-page .bme-additional-group h3 { margin: 0; color: #4c5747; font-family: "Figtree", sans-serif; font-size: .95rem; font-weight: 600; line-height: 1.6; letter-spacing: 0; }
.bme-additional-group ul { display: flex; flex-wrap: wrap; gap: 12px 26px; min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.bme-additional-group li { display: flex; align-items: baseline; gap: 9px; min-inline-size: 0; max-inline-size: 100%; color: var(--bme-ink); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.bme-additional-group li::before { content: ""; flex: 0 0 4px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: #6c7b5b; transform: translateY(-3px); }
html[dir="rtl"] .bme-additional-heading h2 { line-height: 1.4; letter-spacing: normal; }
@media (max-width: 679px) {
  .bme-additional { margin-block-start: 32px; padding: 24px 20px; border-radius: 18px; }
  .bme-additional-heading { margin-block-end: 24px; }
  .bme-additional-group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bme-additional-group ul { flex-direction: column; gap: 10px; }
}

/* Let questions breathe: a centred accordion with no stacked border rules. */
.bme-page .bme-faq { max-inline-size: 1200px; margin: 0 auto; padding-block: clamp(48px, 6vw, 80px) 0; border: 0; scroll-margin-block-start: 104px; }
.bme-page .bme-faq > h2 { inline-size: 100%; max-inline-size: none; margin: 0 auto 36px; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.18; letter-spacing: -.045em; text-align: center; text-wrap: balance; }
.bme-faq > .bme-details { max-inline-size: 920px; margin: 8px auto; padding: 0; border: 0; border-radius: 16px; background: transparent; transition: background-color 180ms ease; }
.bme-faq > .bme-details:hover { background: var(--bme-mist); }
.bme-faq > .bme-details[open] { background: #fff; }
.bme-faq > .bme-details > summary { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 76px; padding: 22px 64px; border-radius: 16px; list-style: none; color: var(--bme-ink); font-size: 1.125rem; font-weight: 600; line-height: 1.55; text-align: center; cursor: pointer; }
.bme-faq > .bme-details > summary::-webkit-details-marker { display: none; }
.bme-faq > .bme-details > summary::marker { content: ""; }
.bme-faq > .bme-details > summary::after { content: "+"; position: absolute; inset-inline-end: 16px; inset-block-start: 50%; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: #e8ecdf; color: var(--bme-ink); font-size: 1.35rem; font-weight: 400; line-height: 1; transform: translateY(-50%); }
.bme-faq > .bme-details[open] > summary::after { content: "−"; background: var(--bme-acid); }
.bme-faq > .bme-details > summary:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 3px; }
.bme-faq > .bme-details > .bme-details-body { max-inline-size: 68ch; margin-inline: auto; padding: 0 28px 28px; color: #4c5747; font-size: 1rem; line-height: 1.7; text-align: center; }
.bme-faq .bme-details-body p { margin: 0; }
html[dir="rtl"] .bme-page .bme-faq > h2 { line-height: 1.4; letter-spacing: normal; }
@media (max-width: 679px) {
  .bme-page .bme-faq { scroll-margin-block-start: 92px; }
  .bme-page .bme-faq > h2 { margin-block-end: 24px; }
  .bme-faq > .bme-details > summary { min-block-size: 72px; padding: 18px 48px; font-size: 1rem; }
  .bme-faq > .bme-details > summary::after { inset-inline-end: 8px; inline-size: 28px; block-size: 28px; }
  .bme-faq > .bme-details > .bme-details-body { padding: 0 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .bme-faq > .bme-details { transition: none; }
}

/* The selected capability is the entry point: no introductory hero to cross. */
.bme-page { padding-block-start: clamp(20px, 3vw, 40px); }
.bme-feature-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-block-end: 20px; text-align: start; }
.bme-explorer .bme-feature-meta .bme-kicker { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; max-inline-size: none; margin: 0; font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bme-feature-location { display: inline-flex; align-items: baseline; gap: 8px; color: var(--bme-ink); }
.bme-feature-location::before { content: '/'; color: #969e90; padding-inline-end: 8px; }
.bme-feature-counter { color: #687067; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bme-explorer .bme-feature-head .bme-lead { max-inline-size: 64ch; text-wrap: pretty; }
.bme-capture-source { position: absolute; inset-block-end: 100%; inset-inline: 0; margin: 0; padding: 8px 12px; border-radius: 10px 10px 0 0; background: #fbfcf7; color: #4c5747; font-size: .8125rem; font-weight: 500; line-height: 1.4; text-align: start; }
.bme-directory-link { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-block: 8px; color: #4c5747; font-size: .875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #bdc5b4; }
.bme-directory-link:hover { color: var(--bme-ink); text-decoration-color: currentColor; }
@media (max-width: 679px) {
  .bme-feature-meta { justify-content: center; gap: 0 20px; margin-block-end: 14px; text-align: center; }
  .bme-explorer .bme-feature-meta .bme-kicker { gap: 4px 12px; }
  .bme-feature-location { justify-content: center; }
  .bme-feature-location::before { display: none; }
}
@media (max-width: 799px) {
  .bme-capture-source { position: relative; inset: auto; border-radius: 0; padding-inline: 16px; font-size: .875rem; }
  .bme-explorer .bme-scene[data-feature-scene="media"][data-theme] { gap: 0; }
  .bme-explorer .bme-scene[data-feature-scene="media"][data-theme] .bme-scene-art { block-size: 140px; aspect-ratio: auto; object-position: center 38%; }
}
/* The decorative number follows the photograph's free space, not text direction. */
html[dir="rtl"] .bme-stage-index { inset-inline-start: auto; inset-inline-end: 24px; }
@media (max-width: 799px) {
  html[dir="rtl"] .bme-stage-index { inset-inline-end: 16px; }
}
@media (max-width: 799px) {
  .bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] { min-block-size: 0; }
  .bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-capture-wrap { position: relative; inset: auto; grid-row: 2; inline-size: min(74%, 300px); max-inline-size: 300px; margin-block: 44px 6px; border-width: 4px; }
  .bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-capture-wrap > .bme-scene-proof { max-inline-size: 100%; }
  .bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-capture-source { position: absolute; inset-block-end: calc(100% + 10px); inset-inline-start: 0; inline-size: max-content; }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-scene-note { position: relative; inset: auto; grid-row: 3; inline-size: 100%; margin: 0; padding: 10px 16px 20px; color: var(--bme-ink); background: transparent; text-shadow: none; transform: rotate(-3deg); }
.bme-explorer .bme-scene[data-feature-scene="upsell"][data-theme] .bme-note-arrow { display: none; }
}

/* The default E-commerce entry invites discovery; direct feature links start at the selected example. */
.bme-opening { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 56px); max-inline-size: 1200px; margin-inline: auto; padding-block: 22px 56px; }
.bme-opening-copy { min-inline-size: 0; }
.bme-opening-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #526248; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bme-opening-kicker::before { content: ''; flex: 0 0 32px; block-size: 2px; background: #96b34a; }
.bme-page .bme-opening h1 { margin: 0 0 23px; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: 1.05; letter-spacing: -.075em; }
.bme-opening h1 em { color: #688545; font-style: normal; }
.bme-opening-lead { max-inline-size: 55ch; margin: 0; color: #424f40; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.58; }
.bme-opening-quote { max-inline-size: 58ch; margin: 30px 0 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--bme-acid); }
.bme-opening-quote p { margin: 0; color: var(--bme-ink); font-size: .96rem; line-height: 1.65; }
.bme-opening-quote cite { display: block; margin-block-start: 9px; color: #5f6e5d; font-size: .84rem; font-style: normal; font-weight: 700; }
.bme-opening-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-block-start: 30px; }
.bme-opening-actions .bm-btn { min-block-size: 52px; }
.bme-opening-text-link { color: var(--bme-ink); font-size: .9rem; font-weight: 700; text-decoration: underline; text-decoration-color: #8a9a6e; text-underline-offset: 5px; }
.bme-opening-media { position: relative; isolation: isolate; min-block-size: 570px; overflow: hidden; border-radius: 26px; background: #b7ae9e; }
.bme-opening-backdrop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bme-opening-media::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, #26332228, #20302040); }
.bme-opening-media-label { position: absolute; z-index: 3; inset-block-start: 26px; inset-inline-start: 26px; padding: 9px 13px; border-radius: 8px; background: #fff; color: var(--bme-ink); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bme-opening-card { position: absolute; z-index: 2; overflow: hidden; margin: 0; border: 5px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 15px 40px #1118; transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
.bme-opening-card img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.bme-opening-card--product { inset-inline-start: 6%; inset-block-start: 18%; inline-size: 43%; block-size: 56%; transform: rotate(-5deg); }
.bme-opening-card--checkout { inset-inline-end: 5%; inset-block-start: 20%; inline-size: 45%; block-size: 60%; transform: rotate(4deg); }
.bme-opening-card--search { inset-inline-start: 26%; inset-block-end: 5%; inline-size: 47%; block-size: 26%; transform: rotate(-1deg); }
.bme-opening-card:hover { transform: rotate(0) translateY(-6px); }
.bme-page--editorial .bme-explorer { padding-block-start: clamp(48px, 6vw, 80px); border-block-start: 1px solid var(--bme-line); }
.bme-explorer .bme-feature-head h2 { max-inline-size: 32ch; margin-inline: auto; margin-block-end: 18px; font-size: clamp(2.4rem, 4.7vw, 3.75rem); line-height: 1.05; letter-spacing: -.055em; }
.bme-explorer .bme-feature-head h2:focus:not(:focus-visible) { outline: none; }
.bme-explorer .bme-feature-head h2:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 799px) {
  .bme-page--editorial .bme-explorer { padding-block-start: 50px; }
  .bme-explorer .bme-feature-head h2 { font-size: clamp(2rem, 8.7vw, 2.8rem); }
}
@media (prefers-reduced-motion: reduce) { .bme-opening-card { transition: none; } }

.bme-editorial-scene-wrap { inline-size: 100%; }
.bme-editorial-scene { position: relative; isolation: isolate; min-block-size: 650px; overflow: hidden; border-radius: 28px; background: #887967; }
.bme-editorial-scene::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #19201c45, #19201c08 55%, #19201c59); pointer-events: none; }
.bme-editorial-backdrop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 48%; }
.bme-editorial-full { position: absolute; z-index: 1; inset-block-start: 9%; inset-inline-start: 7%; inline-size: min(52%, 630px); margin: 0; padding: 8px; border-radius: 17px; background: #fff; box-shadow: 0 22px 65px #1c251f70; transform: rotate(-3deg); transition: transform 350ms cubic-bezier(.2,.8,.2,1); }
.bme-editorial-full > img { display: block; inline-size: 100%; block-size: auto; border-radius: 10px; }
.bme-editorial-full figcaption { padding: 8px 8px 3px; color: #4b574b; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bme-editorial-detail { position: absolute; z-index: 2; inset-block-start: 14%; inset-inline-start: 39%; inline-size: min(35%, 395px); block-size: auto; overflow: hidden; border: 7px solid #fff; border-radius: 14px; background: #f1f7fc; box-shadow: 0 21px 46px #1c251f77; transform: rotate(5deg); transition: transform 350ms cubic-bezier(.2,.8,.2,1); }
.bme-editorial-full:hover, .bme-editorial-detail:hover { transform: rotate(0) translateY(-6px); }
.bme-editorial-note { position: absolute; z-index: 3; inset-block-start: 25%; inset-inline-end: 5%; max-inline-size: 220px; margin: 0; color: #fff; font-family: "Caveat", cursive; font-size: 2rem; line-height: 1; text-shadow: 0 2px 10px #182217aa; transform: rotate(-5deg); }
.bme-editorial-note svg { display: block; inline-size: 145px; block-size: 105px; margin: 10px 0 0 -165px; overflow: visible; }
.bme-editorial-note path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #1119); }
.bme-editorial-try { display: flex; align-items: center; justify-content: space-between; gap: 18px; inline-size: fit-content; min-block-size: 52px; margin: 22px 0 0 auto; padding: 14px 22px; border-radius: 100px; background: var(--bme-acid); color: var(--bme-ink); font-size: .95rem; font-weight: 700; text-decoration: none; box-shadow: 0 10px 25px #b5da384d; transition: transform 180ms ease, box-shadow 180ms ease; }
.bme-editorial-try:hover { transform: translateY(-3px); box-shadow: 0 14px 28px #b5da3880; }
.bme-editorial-try:focus-visible { outline: 2px solid var(--bme-ink); outline-offset: 4px; }
@media (max-width: 799px) {
  .bme-opening { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 8px 38px; }
  .bme-opening-copy { display: contents; }
  .bme-opening-kicker { grid-row: 1; margin: 0; }
  .bme-page .bme-opening h1 { grid-row: 2; margin: 0; font-size: clamp(2.35rem, 10vw, 3.4rem); }
  .bme-opening-lead { grid-row: 3; }
  .bme-opening-media { grid-row: 4; min-block-size: 350px; margin-block: 3px 6px; }
  .bme-opening-quote { grid-row: 5; margin-block-start: 0; }
  .bme-opening-actions { grid-row: 6; margin-block-start: 0; }
  .bme-editorial-scene { min-block-size: 570px; border-radius: 22px; }
  .bme-editorial-backdrop { object-position: 65% center; }
  .bme-editorial-full { inset-block-start: 9%; inset-inline-start: 7%; inline-size: 83%; padding: 5px; transform: rotate(-2deg); }
  .bme-editorial-full figcaption { font-size: .56rem; }
  .bme-editorial-detail { inset-block-start: 31%; inset-inline-start: 31%; inline-size: 64%; border-width: 5px; }
  .bme-editorial-note { inset-block-start: auto; inset-block-end: 5%; inset-inline-end: 7%; max-inline-size: 175px; font-size: 1.55rem; }
  .bme-editorial-note svg { position: absolute; inset-inline-end: 55px; inset-block-end: 110px; inline-size: 85px; block-size: 65px; margin: 0; transform: rotate(180deg); }
  .bme-editorial-try { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bme-editorial-full, .bme-editorial-detail, .bme-editorial-try { transition: none; } }

/* The founder's method reads as a manifesto, not three product cards. */
.bme-method { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(36px, 5vw, 76px); min-block-size: 430px; max-inline-size: 1200px; margin: clamp(70px, 8vw, 110px) auto 0; padding: clamp(42px, 5vw, 72px) clamp(22px, 4vw, 48px); overflow: hidden; border-radius: 28px; background: #14231a; color: #f6f8ed; scroll-margin-block-start: 100px; }
.bme-method::before { content: ''; position: absolute; z-index: -1; inline-size: 58%; aspect-ratio: 1; inset-inline-end: -21%; inset-block-start: -82%; border: 1px solid #d9ff5229; border-radius: 50%; box-shadow: 0 0 0 72px #d9ff5208, 0 0 0 144px #d9ff5206, 0 0 0 216px #d9ff5205; pointer-events: none; }
.bme-method-copy .bme-kicker { margin: 0 0 15px; color: #d9ff52; font-size: .72rem; letter-spacing: .12em; }
.bme-method-copy .bme-kicker::before { content: '✳'; margin-inline-end: 9px; font-size: 1.05rem; }
.bme-page .bme-method h2 { max-inline-size: 13ch; margin: 0 0 17px; color: #f8faef; font-size: clamp(2.35rem, 3.7vw, 4.2rem); line-height: 1.04; letter-spacing: -.055em; }
.bme-method-copy > p:last-child { max-inline-size: 45ch; color: #d6e2d4; font-size: 1rem; line-height: 1.65; }
.bme-method-steps { display: block; margin: 0; padding: 0; list-style: none; }
.bme-method-steps li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0 22px; min-inline-size: 0; min-block-size: 112px; padding: 16px 0 18px; border: 0; border-block-start: 1px solid #b5d2b144; border-radius: 0; background: transparent; }
.bme-method-steps li:last-child { border-block-end: 1px solid #b5d2b144; }
.bme-method-steps li > span { display: block; grid-row: 1 / 3; align-self: start; margin: -10px 0 0; color: #d9ff52; font-family: 'Syne', sans-serif; font-size: clamp(2.4rem, 3.5vw, 3.7rem); font-weight: 600; line-height: 1; letter-spacing: -.08em; }
.bme-page .bme-method-steps h3 { margin: 0 0 10px; color: #f8faef; font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.2; }
.bme-method-steps p { max-inline-size: 48ch; margin: 0; color: #c9d7c8; font-size: .92rem; line-height: 1.55; }
.bme-next .bme-feature-choice { text-decoration: none; }
@media (max-width: 799px) {
  .bme-method { grid-template-columns: minmax(0, 1fr); gap: 32px; min-block-size: 0; padding: 42px 24px 36px; border-radius: 22px; }
  .bme-method::before { inline-size: 120%; inset-inline-end: -66%; inset-block-start: -22%; }
  .bme-page .bme-method h2 { max-inline-size: 16ch; font-size: clamp(2.25rem, 9vw, 3.4rem); }
  .bme-method-steps li { grid-template-columns: 62px minmax(0, 1fr); gap: 0 12px; min-block-size: 0; padding-block: 17px 19px; }
  .bme-method-steps li > span { margin-block-start: -4px; font-size: 2.6rem; }
  .bme-method-steps p { font-size: .89rem; }
}
@media (max-width: 679px) {
  .bme-next .bme-feature-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bme-next .bme-feature-choice { inline-size: 100%; min-block-size: 48px; padding-inline: 8px; font-size: 1rem; }
  .bme-next .bme-feature-group { padding-block: 21px; }
}

/* E-commerce menu: a store scene to enter, then three clear ways to explore. */
.bm-mega--ecommerce .bm-mega-inner--ecommerce { display: block; max-inline-size: 1360px; padding: 26px 24px 30px; }
.bm-ecommerce-menu { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 34px; }
.bm-ecommerce-menu-feature { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; min-block-size: 390px; overflow: hidden; border-radius: 20px; background: #999181; }
.bm-ecommerce-menu-backdrop { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bm-ecommerce-menu-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #141e16df, #141e1688 60%, #141e1622); }
.bm-ecommerce-menu-copy { min-inline-size: 0; padding: 34px; color: #fff; }
.bm-ecommerce-menu-copy .bm-mega-kicker { margin: 0; color: #e4f5cc; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bm-ecommerce-menu-copy h2 { max-inline-size: 12ch; margin: 17px 0; color: #fff; font-family: var(--bm-display, 'Syne', sans-serif); font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1.08; letter-spacing: -.055em; }
.bm-ecommerce-menu-copy > p:not(.bm-mega-kicker) { max-inline-size: 32ch; margin: 0; color: #fff; font-size: .94rem; line-height: 1.55; }
.bm-ecommerce-menu-action { display: inline-flex; align-items: center; gap: 12px; min-block-size: 44px; margin-block-start: 22px; padding: 11px 17px; border-radius: 100px; background: #d9ff43; color: #121511; font-size: .85rem; font-weight: 700; line-height: 1.35; }
.bm-mega--ecommerce .bm-ecommerce-menu-action { color: #121511; }
.bm-ecommerce-menu-action:hover { background: #ecffa0; }
.bm-mega--ecommerce .bm-ecommerce-proof { position: relative; align-self: center; justify-self: end; inline-size: min(100%, 205px); margin-inline-end: 24px; padding: 5px; border-radius: 12px; background: #fff; box-shadow: 0 15px 40px #1119; transform: rotate(4deg); transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
.bm-mega--ecommerce .bm-ecommerce-proof:hover { transform: rotate(0) translateY(-5px); }
.bm-mega--ecommerce .bm-ecommerce-proof img { display: block; inline-size: 100%; block-size: 224px; border-radius: 8px; object-fit: cover; object-position: top; }
.bm-ecommerce-proof > span { display: block; padding: 8px 5px 4px; color: #121511; font-size: .73rem; font-weight: 700; line-height: 1.3; }
.bm-ecommerce-menu-paths { display: grid; align-content: center; min-inline-size: 0; }
.bm-ecommerce-menu-paths > .bm-mega-kicker { margin: 0 0 16px; color: #637160; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bm-ecommerce-menu-path { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 13px; min-block-size: 105px; padding: 16px 5px; border-block-start: 1px solid var(--bm-mega-line); color: var(--bm-mega-ink); transition: color 160ms ease, padding-inline 160ms ease; }
.bm-ecommerce-menu-path:hover { color: #627d39; padding-inline-start: 10px; }
.bm-ecommerce-menu-path-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; background: #eaf1d3; color: #50642e; font-size: 1.2rem; }
.bm-ecommerce-menu-path strong { display: block; font-family: var(--bm-display, 'Syne', sans-serif); font-size: 1.2rem; line-height: 1.25; letter-spacing: -.025em; }
.bm-ecommerce-menu-path small { display: block; margin-block-start: 4px; color: #5f6d5c; font-size: .85rem; line-height: 1.42; }
.bm-ecommerce-menu-path-arrow { font-size: 1.3rem; }
.bm-mega--ecommerce .bm-mega-bar-inner { justify-content: space-between; }
.bm-mega--ecommerce .bm-mega-bar-inner > span { color: #5a6858; font-size: .82rem; }
.bm-ecommerce-drawer-feature { position: relative; display: block; min-block-size: 190px; overflow: hidden; border-radius: 14px; background: #273323; color: #fff; }
.bm-ecommerce-drawer-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #141e16e8, #141e1670); }
.bm-ecommerce-drawer-feature img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bm-ecommerce-drawer-feature > span { position: relative; z-index: 1; display: grid; align-content: center; gap: 9px; min-block-size: 190px; max-inline-size: 260px; padding: 22px; }
.bm-ecommerce-drawer-feature small { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bm-ecommerce-drawer-feature strong { font-family: var(--bm-display, 'Syne', sans-serif); font-size: 1.6rem; line-height: 1.12; }
.bm-drawer .bm-ecommerce-drawer-feature :is(strong, small) { color: #fff; }
.bm-ecommerce-drawer-feature b { color: #d9ff43; font-size: .84rem; }
.bm-ecommerce-drawer-path { display: flex; align-items: center; justify-content: space-between; min-block-size: 56px; border-block-end: 1px solid var(--bm-mega-line); font-weight: 700; }
.bm-ecommerce-drawer-all { display: inline-block; min-block-size: 44px; margin-block-start: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 1024px) and (max-width: 1200px) {
  .bm-ecommerce-menu { gap: 20px; }
  .bm-ecommerce-menu-feature { grid-template-columns: minmax(0, 1fr) 155px; }
  .bm-mega--ecommerce .bm-ecommerce-proof { inline-size: 145px; margin-inline-end: 12px; }
  .bm-mega--ecommerce .bm-ecommerce-proof img { block-size: 160px; }
  .bm-ecommerce-menu-copy { padding: 25px; }
}
@media (prefers-reduced-motion: reduce) { .bm-ecommerce-menu-path, .bm-mega--ecommerce .bm-ecommerce-proof { transition: none; } }

/* Give Community the same editorial entrance and momentum as E-commerce. */
@media (min-width: 1024px) {
  .bm-mega--community .bm-mega-inner--community { display: block; max-inline-size: 1360px; padding: 26px 24px 24px; }
  .bm-community-menu { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-rows: auto auto auto; grid-template-areas: 'forum explore' 'forum reading' 'personal personal'; gap: 0 34px; }
  .bm-community-feature { position: relative; isolation: isolate; align-self: stretch; justify-content: flex-end; min-block-size: 390px; border: 0; border-radius: 20px; background: #283429; color: #fff; }
  .bm-community-feature::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #142018de, #14201891 58%, #14201830), linear-gradient(0deg, #14201890, transparent 58%); }
  img.bm-community-feature-image { position: absolute; z-index: -2; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 43%; transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
  .bm-community-feature:hover { border: 0; background: #283429; color: #fff; }
  .bm-community-feature:hover img { transform: scale(1.04); }
  .bm-community-feature-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(28px, 3vw, 38px); }
  .bm-community-feature-copy .bm-mega-kicker { color: #e4f5cc; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .bm-community-feature-title { max-inline-size: 14ch; margin-block: 16px 14px; color: #fff; font-size: clamp(2rem, 3vw, 3.15rem); line-height: 1.08; letter-spacing: -.055em; }
  .bm-community-feature-lead { max-inline-size: 34ch; color: #fff; font-size: .95rem; line-height: 1.55; }
  .bm-community-feature-cta { display: inline-flex; justify-content: center; gap: 14px; min-block-size: 44px; margin-block-start: 24px; padding: 11px 18px; border-radius: 100px; background: #d9ff43; color: #121511; font-size: .86rem; font-weight: 700; }
  .bm-community-feature:hover .bm-community-feature-cta { background: #ecffa0; }
  .bm-community-feature-cta svg { inline-size: 18px; block-size: 18px; }
  .bm-community-group--explore { min-inline-size: 0; }
  .bm-community-group--explore > .bm-mega-col-title { margin: 6px 0 15px; color: #637160; font-size: .7rem; letter-spacing: .12em; }
  .bm-community-group--explore .bm-community-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 13px; min-block-size: 84px; margin: 0; padding: 11px 4px; border-block-start: 1px solid var(--bm-mega-line); border-radius: 0; transition: color 160ms ease, padding-inline 160ms ease; }
  .bm-community-group--explore .bm-community-link:hover { padding-inline-start: 10px; background: transparent; }
  .bm-community-group--explore .bm-community-link-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border-radius: 11px; background: #eaf1d3; color: #50642e; }
  .bm-community-group--explore .bm-community-link strong { font-family: var(--bm-display, 'Syne', sans-serif); font-size: 1.13rem; line-height: 1.25; letter-spacing: -.025em; }
  .bm-community-group--explore .bm-community-link small { margin-block-start: 4px; font-size: .84rem; line-height: 1.4; }
  .bm-community-link-arrow { justify-self: end; font-size: 1.3rem; line-height: 1; }
  .bm-community-group--reading { display: grid; grid-template-columns: 144px minmax(0, 1fr); grid-template-areas: 'label label' 'books link'; align-items: center; column-gap: 14px; min-inline-size: 0; padding: 12px 0 0; border: 0; border-block-start: 1px solid var(--bm-mega-line); }
  .bm-community-group--reading > .bm-mega-col-title { grid-area: label; margin: 0 0 7px; color: #637160; font-size: .7rem; letter-spacing: .12em; }
  .bm-community-books { grid-area: books; gap: 5px; padding: 0; }
  .bm-community-books img { max-inline-size: 43px; max-block-size: 65px; }
  .bm-community-group--reading .bm-community-group-links { grid-area: link; min-inline-size: 0; }
  .bm-community-group--reading .bm-community-link { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 5px; min-block-size: 72px; margin: 0; padding: 0; }
  .bm-community-group--reading .bm-community-link:hover { background: transparent; }
  .bm-community-group--reading .bm-community-link-icon { display: none; }
  .bm-community-group--reading .bm-community-link strong { font-family: var(--bm-display, 'Syne', sans-serif); font-size: 1.04rem; }
  .bm-community-group--reading .bm-community-link small { font-size: .8rem; line-height: 1.35; }
  .bm-community-group--personal { padding-block-start: 18px; margin-block-start: 22px; }
  .bm-community-group--personal > .bm-mega-col-title { margin: 0 0 8px; color: #637160; font-size: .7rem; letter-spacing: .12em; }
  .bm-community-group--personal .bm-community-group-links { gap: 12px; }
  .bm-community-group--personal .bm-community-link { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: start; gap: 10px; min-inline-size: 0; margin: 0; padding: 10px 4px; }
  .bm-community-group--personal .bm-community-link-arrow { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .bm-community-feature-image, .bm-community-group--explore .bm-community-link { transition: none; } }
@media (max-width: 1023px) { .bm-community-link-arrow { display: none; } }

.bm-community-feature-cta .bm-community-chat-bubbles { position: relative; flex: 0 0 30px; display: block; inline-size: 30px; block-size: 25px; }
.bm-community-feature-cta .bm-community-chat-bubbles svg { position: absolute; inline-size: 19px; block-size: 19px; stroke-width: 1.9; }
.bm-community-chat-bubbles svg:first-child { inset-block-start: 0; inset-inline-start: 0; transform: scaleX(-1); }
.bm-community-chat-bubbles svg:last-child { inset-block-end: 0; inset-inline-end: 0; }
@keyframes bm-community-chat-hello { 0% { opacity: 0; scale: .72; } 65% { opacity: 1; scale: 1.12; } 100% { scale: 1; } }
.bm-mega--community:not([hidden]) .bm-community-chat-bubbles { animation: bm-community-chat-hello 460ms 100ms both; }
@media (prefers-reduced-motion: reduce) { .bm-mega--community:not([hidden]) .bm-community-chat-bubbles { animation: none; } }