/* =====================================================================
   assets/benefits.css · the membership benefits sections (owner, 1 Nov 2026: "show the benefits of the
   memberships, not only the courses, like a product marketing site").
   partials/sections/benefits-app.html (.bn--app: three whole phones, captions, proof points) and
   partials/sections/benefits-scenarios.html (.bn--scenes: six tabbed demos with who gets each one).
   Light mode. Purple for active states and progress, cyan for AI chips, gold-100 for "Coming soon".
   No magenta in either section: the page's one magenta action stays its Apply button (brand law 1).
   Cards carry no border. Logical properties throughout, so /ar/ mirrors. The CSS default is always the
   final frame of every demo: assets/benefits.js only plays the way in (WAAPI, fill backwards).
   Phone frames: assets/device.css (.iphone, --iphone-w, --iphone-fit = width x .936 / 390).
   ===================================================================== */

.bn{
  --bn-ink:var(--ink, #000);
  --bn-muted:var(--ink-muted, #4A4A68);
  --bn-purple:var(--purple, #3B06D4);
  --bn-ring:var(--purple-600, #5E5FFF);
  --bn-tint:var(--purple-50, #F3F2FF);
  --bn-ghost:var(--ghost-white, #F8F8FA);
  --bn-card:0 1px 2px rgba(17,12,46,.06), 0 14px 34px -18px rgba(17,12,46,.32);
  --bn-ez:var(--ease-emphasized, cubic-bezier(.3,0,0,1));
  position:relative;
}
/* grounds: the plan pages run paper (#included) > ground (app) > paper (scenes) > ground (#curriculum) */
.bn--app{ background:transparent; }
.bn--scenes{ background:var(--paper-2, #fff); border-block:1px solid var(--line-soft, rgba(0,0,0,.06)); }
/* /community: the five pillars (ground) > app (alt, white) > scenes (ground) > learning */
.bn--app[data-bn-here="membership"]{ background:var(--paper-2, #fff); border-block:1px solid var(--line-soft, rgba(0,0,0,.06)); }
.bn--scenes[data-bn-here="membership"]{ background:transparent; border-block:0; }

/* ---------- section head: the calmer scale (owner: "typography is very big") ---------- */
.bn-head{ max-inline-size:760px; margin-inline:auto; }
.bn .bn-h2{ font-size:clamp(28px, 1.4vw + 16px, 40px); font-weight:600; line-height:1.15; letter-spacing:var(--track-title, -.02em); margin:0; text-wrap:balance; }
.bn-sub{ margin:0; font-size:17px; line-height:1.55; color:var(--bn-muted); max-inline-size:620px; text-wrap:pretty; }

/* =====================================================================
   (a) the app: three whole phones
   ===================================================================== */
.bn-phones{ display:flex; justify-content:center; align-items:flex-start; gap:48px; outline-offset:6px; }
.bn-phone{ --iphone-w:240px; --iphone-fit:.576; margin:0; inline-size:var(--iphone-w); flex:none; display:flex; flex-direction:column; align-items:center; text-align:center; padding-block-start:56px; }
.bn-phone--mid{ --iphone-w:280px; --iphone-fit:.672; padding-block-start:0; }
.bn-phone figcaption{ margin-block-start:22px; display:flex; flex-direction:column; gap:4px; max-inline-size:250px; }
.bn-phone figcaption b{ font-size:15px; font-weight:600; line-height:1.35; color:var(--bn-ink); }
.bn-phone figcaption span{ font-size:14px; line-height:1.5; color:var(--bn-muted); }
.bn-dots{ display:none; }

.bn-proof{ list-style:none; margin:clamp(40px, 5vw, 64px) auto 0; padding:0; max-inline-size:960px; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.bn-proof li{ display:flex; align-items:flex-start; gap:14px; }
.bn-proof li > span:last-child{ display:flex; flex-direction:column; gap:2px; }
.bn-proof__ic{ flex:none; inline-size:40px; block-size:40px; border-radius:12px; display:grid; place-items:center; background:#fff; color:var(--bn-purple); box-shadow:var(--bn-card); }
.bn-proof__ic svg{ inline-size:20px; block-size:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bn-proof b{ font-size:15px; font-weight:600; line-height:1.35; padding-block-start:2px; }
.bn-proof li > span:last-child > span{ font-size:14px; line-height:1.5; color:var(--bn-muted); }
.bn-foot{ margin:28px 0 0; text-align:center; font-size:12px; color:var(--bn-muted); }

@media (min-width:768px) and (max-width:1023px){
  .bn-phones{ gap:24px; }
  .bn-phone{ --iphone-w:200px; --iphone-fit:.48; padding-block-start:44px; }
  .bn-phone--mid{ --iphone-w:230px; --iphone-fit:.552; padding-block-start:0; }
}
@media (max-width:767px){
  .bn-phones{
    justify-content:flex-start; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:16px; scrollbar-width:none;
    margin-inline:calc(50% - 50vw); padding:8px 16px 12px;
  }
  .bn-phones::-webkit-scrollbar{ display:none; }
  .bn-phone, .bn-phone--mid{ --iphone-w:230px; --iphone-fit:.552; padding-block-start:0; scroll-snap-align:start; }
  .bn-dots{ display:flex; justify-content:center; gap:8px; margin-block-start:14px; }
  .bn-dots i{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--silver, #D1D1D9); transition:background .2s, inline-size .2s; }
  .bn-dots i.is-on{ inline-size:18px; border-radius:3px; background:var(--bn-purple); }
  .bn-proof{ grid-template-columns:1fr; gap:18px; }
}

/* ---------- the HTML screens, drawn at 390 x 844 ---------- */
.bns{
  position:relative; inline-size:390px; block-size:844px; box-sizing:border-box; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; padding:64px 18px 0;
  background:#F6F6F9; color:#0B0B0D; text-align:start;
  font:400 14px/1.4 system-ui, -apple-system, "IBM Plex Sans", sans-serif;
}
.bns svg{ inline-size:22px; block-size:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bns__bar{ position:absolute; inset-block-start:0; inset-inline:0; block-size:54px; display:flex; align-items:center; justify-content:space-between; padding:0 30px 0 36px; font-size:15px; font-weight:600; direction:ltr; }
.bns__bar i{ inline-size:26px; block-size:12px; border-radius:3px; border:1.5px solid #0B0B0D; box-sizing:border-box; }
.bns__top{ display:flex; align-items:center; justify-content:space-between; padding-block-start:6px; }
.bns__top b{ font-size:30px; font-weight:700; letter-spacing:-.01em; }
.bns__new{ font-size:13px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--purple, #3B06D4); color:#fff; }
.bns__chips{ display:flex; gap:8px; }
.bns__chips span{ font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.bns__chips .is-on{ background:#0B0B0D; color:#fff; }
.bns__card{ position:relative; display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 20px -14px rgba(17,12,46,.3); }
.bns__card small{ font-size:14px; font-weight:600; color:#4A4A68; }
.bns__card b{ font-size:19px; font-weight:600; line-height:1.3; }
.bns__card > span{ font-size:15px; color:#4A4A68; }
.bns__card p{ margin:6px 0 2px; font-size:15px; line-height:1.45; }
.bns__card--tint{ background:var(--purple-50, #F3F2FF); }
.bns__card--tint small{ color:var(--purple, #3B06D4); }
.bns__btn{ align-self:flex-start; margin-block-start:10px; font-style:normal; font-size:14px; font-weight:600; padding:9px 18px; border-radius:10px; background:var(--purple, #3B06D4); color:#fff; }
.bns__who{ display:flex; align-items:center; gap:10px; }
.bns__who > span:last-child{ display:flex; flex-direction:column; }
.bns__who b{ font-size:15px; }
.bns__av{ inline-size:36px; block-size:36px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:13px; font-weight:700; background:var(--cyan-100, #C4F8FC); color:#0B0B0D; }
.bns__tabs{ position:absolute; inset-inline:0; inset-block-end:0; block-size:88px; display:flex; justify-content:space-around; padding:10px 8px 0; background:#fff; box-shadow:0 -1px 0 #ECECEF; }
.bns__tabs span{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#6B6B80; }
.bns__tabs .is-on{ color:var(--purple, #3B06D4); }
.bns__rooms{ list-style:none; margin:0; padding:6px 0; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.bns__rooms li{ display:flex; align-items:center; gap:12px; padding:11px 14px; }
.bns__rooms li + li{ box-shadow:0 -1px 0 #F0F0F4; }
.bns__rooms li > span{ inline-size:36px; block-size:36px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:12px; font-weight:700; background:#F0F0F6; color:#3B3B55; }
.bns__rooms li:nth-child(-n+3) > span{ background:var(--purple-50, #F3F2FF); color:var(--purple, #3B06D4); }
.bns__rooms b{ flex:1; font-size:16px; font-weight:600; }
.bns__dot{ inline-size:10px; block-size:10px; border-radius:50%; background:var(--purple, #3B06D4); }
.bns__rooms em{ display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:12px; font-weight:600; padding:4px 8px; border-radius:999px; background:#F0F0F4; color:#3B3B55; }
.bns__rooms em svg{ inline-size:13px; block-size:13px; }
.bns__rooms .is-locked b{ color:#4A4A68; }
.bns__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-block-start:10px; font-size:14px; font-weight:600; }
.bns__stack{ display:flex; }
.bns__stack img, .bns__stack i{ inline-size:30px; block-size:30px; background:#E2E2EA; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff; }
.bns__stack > * + *{ margin-inline-start:-8px; }
.bns__stack i{ display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:700; background:var(--purple, #3B06D4); color:#fff; }
.bns__week{ display:flex; justify-content:space-between; padding:10px 12px; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.bns__week span{ inline-size:36px; block-size:36px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:600; color:#4A4A68; }
.bns__week .is-on{ background:var(--purple, #3B06D4); color:#fff; }
.bns__swap{ display:grid; }
.bns__swap > *{ grid-area:1 / 1; margin:0; }
.bns__swap [data-bn-a]{ opacity:0; }
.bns__btn--done{ background:var(--purple-50, #F3F2FF); color:var(--purple, #3B06D4); }
.bns__toggle{ inline-size:44px; block-size:26px; border-radius:999px; background:#E2E2EA; position:relative; }
.bns__toggle::after{ content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; inline-size:20px; block-size:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }

/* =====================================================================
   (b) the scenes: tabs + stage + copy
   ===================================================================== */
.bn-scenes{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px, 4vw, 64px); align-items:start; }
.bn-tabs{ display:flex; flex-direction:column; gap:2px; position:sticky; inset-block-start:96px; }
.bn-tab{
  position:relative; display:flex; flex-direction:column; gap:6px; inline-size:100%;
  padding-block:16px; padding-inline:22px 18px; border:0; border-radius:12px; background:none;
  font:inherit; color:var(--bn-ink); text-align:start; cursor:pointer;
  transition:background-color var(--dur-quick, .2s) var(--ease-standard, ease);
}
.bn-tab::before{ content:""; position:absolute; inset-block:10px; inset-inline-start:0; inline-size:2px; border-radius:2px; background:var(--silver, #D1D1D9); }
.bn-tab b{ font-size:16px; font-weight:600; line-height:1.35; }
.bn-tab__d{ display:none; font-size:14px; line-height:1.5; color:var(--bn-muted); }
.bn-tab__bar{ position:absolute; inset-block:10px; inset-inline-start:0; inline-size:2px; border-radius:2px; background:var(--bn-ring); transform-origin:50% 0; transform:scaleY(0); }
.bn-tab:hover{ background:var(--bn-ghost); }
.bn-tab[aria-selected="true"]{ background:var(--bn-ghost); }
.bn-tab[aria-selected="true"] .bn-tab__d{ display:block; }
.bn-tab[aria-selected="true"] .bn-tab__bar{ transform:none; }
.bn-tab:focus-visible{ outline:3px solid var(--focus-ring, #3B06D4); outline-offset:2px; }
.bn--scenes[data-bn-here="membership"] .bn-tab:hover,
.bn--scenes[data-bn-here="membership"] .bn-tab[aria-selected="true"]{ background:#fff; box-shadow:var(--bn-card); }

.bn-panels{ position:relative; min-inline-size:0; max-inline-size:640px; }
.bn-panel{ outline-offset:6px; }
.bn-panel[hidden]{ display:none; }
.bn-panel:focus-visible{ outline:3px solid var(--focus-ring, #3B06D4); border-radius:16px; }

.bn-pause{
  position:absolute; z-index:4; inset-block-start:12px; inset-inline-end:12px;
  display:inline-flex; align-items:center; min-block-size:32px; padding:0 12px; border:0; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--bn-ink); font:600 13px/1 var(--font-sans, "IBM Plex Sans", sans-serif);
  box-shadow:0 1px 2px rgba(0,0,0,.08); cursor:pointer;
}
.bn-pause span{ display:inline-flex; align-items:center; gap:6px; }
.bn-pause svg{ inline-size:14px; block-size:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.bn-pause .bn-pause__r, .bn-pause.is-paused .bn-pause__p{ display:none; }
.bn-pause.is-paused .bn-pause__r{ display:inline-flex; }
.bn-pause:focus-visible{ outline:3px solid var(--focus-ring, #3B06D4); outline-offset:2px; }

/* JavaScript on, before a section first plays: the moving parts wait hidden, so they never flash in then out */
.bn-wait [data-bn-fx]{ opacity:0; }

/* no JavaScript: no tabs, the six panels stack, each with its final frame */
.bn:not(.bn-on) .bn-scenes{ grid-template-columns:1fr; }
.bn:not(.bn-on) .bn-tabs, .bn:not(.bn-on) .bn-pause{ display:none; }
.bn:not(.bn-on) .bn-panels{ max-inline-size:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap:48px 40px; }
/* once auto-advance stops for good, or under reduced motion: no pause button; reduced motion hides the progress lines */
.bn-manual .bn-pause, .bn-still .bn-pause{ display:none; }
.bn-still .bn-tab__bar, .bn-still .bn-tab::before{ display:none; }

/* ---------- the stage: one registered light duo per scene, white UI on top ---------- */
.bn-stage{
  position:relative; overflow:hidden; aspect-ratio:560 / 440; border-radius:16px;
  display:grid; place-items:center; padding:28px 24px; box-sizing:border-box;
  box-shadow:0 1px 2px rgba(17,12,46,.06), 0 18px 40px -26px rgba(17,12,46,.35);
  color:var(--bn-ink); font-size:13px; line-height:1.45;
}
.bn-stage--haze{ background:var(--duo-haze, linear-gradient(135deg, #F8F8FA 0%, #3B06D4 100%)); }
.bn-stage--dawn{ background:var(--duo-dawn, linear-gradient(135deg, #F8F8FA 0%, #F5C24B 100%)); }
.bn-stage--dew{ background:var(--duo-dew, linear-gradient(135deg, #F8F8FA 0%, #4CF3FE 100%)); }
.bn-stage--mist{ background:var(--duo-mist, linear-gradient(135deg, #FFFFFF 0%, #D1D1D9 100%)); }
/* RTL: the ghost anchor sits under the start of the Arabic UI */
[dir="rtl"] .bn-stage--haze{ background:linear-gradient(225deg, #F8F8FA 0%, #3B06D4 100%); }
[dir="rtl"] .bn-stage--dawn{ background:linear-gradient(225deg, #F8F8FA 0%, #F5C24B 100%); }
[dir="rtl"] .bn-stage--dew{ background:linear-gradient(225deg, #F8F8FA 0%, #4CF3FE 100%); }
[dir="rtl"] .bn-stage--mist{ background:linear-gradient(225deg, #FFFFFF 0%, #D1D1D9 100%); }
.bn-stage svg{ inline-size:16px; block-size:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.bn-in{ position:relative; inline-size:min(100%, 400px); display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.bn-ui{ position:relative; background:#fff; border-radius:14px; padding:14px; box-shadow:var(--bn-card); }
.bn-ui small, .bn-stage small{ font-size:12px; line-height:1.35; }

.bn-chip{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; inline-size:max-content; max-inline-size:100%; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--bn-tint); color:var(--bn-purple); }
.bn-chip--you{ background:var(--bn-purple); color:#fff; }
.bn-chip--soon{ background:var(--gold-100, #FFEDCA); color:var(--bn-ink); }
.bn-chip--ai{ background:var(--cyan-100, #C4F8FC); color:var(--bn-ink); }
.bn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-block-size:34px; padding:0 16px; border-radius:8px; font-style:normal; font-size:13px; font-weight:600; background:var(--bn-purple); color:#fff; white-space:nowrap; }
.bn-btn--done{ background:var(--bn-tint); color:var(--bn-purple); }
.bn-btn--ghost{ background:#fff; color:var(--bn-ink); box-shadow:inset 0 0 0 1px var(--silver, #D1D1D9); }
.bn-av{ inline-size:30px; block-size:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--bn-tint); color:var(--bn-purple); }
.bn-av--b{ background:var(--cyan-100, #C4F8FC); color:var(--bn-ink); }
.bn-av--c{ background:var(--gold-100, #FFEDCA); color:var(--bn-ink); }
.bn-av--lg{ inline-size:44px; block-size:44px; font-size:14px; }

/* 1 · chat */
.bn-roomchips{ display:flex; flex-wrap:wrap; gap:6px; }
.bn-roomchips span{ display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; background:rgba(255,255,255,.88); color:var(--bn-ink); }
.bn-roomchips .is-on{ background:var(--bn-ink); color:#fff; }
.bn-roomchips svg{ inline-size:12px; block-size:12px; }
.bn-chat{ display:flex; flex-direction:column; gap:9px; }
.bn-chat__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-block-end:8px; box-shadow:0 1px 0 #EFEFF4; }
.bn-chat__head b{ font-size:14px; }
.bn-chat__head span{ font-size:12px; color:var(--bn-muted); }
.bn-msg{ display:flex; align-items:flex-start; gap:9px; }
.bn-msg p{ margin:0; padding:7px 11px 8px; border-radius:12px; border-start-start-radius:4px; background:var(--bn-ghost); font-size:13px; line-height:1.45; }
.bn-msg p small{ display:block; font-weight:600; color:var(--bn-muted); margin-block-end:1px; }
.bn-slot{ position:relative; }
.bn-typing{ position:absolute; inset-block-start:4px; inset-inline-start:39px; display:flex; gap:4px; padding:10px 12px; border-radius:12px; background:var(--bn-ghost); opacity:0; }
.bn-typing i{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--bn-muted); }
.bn-live .bn-typing i{ animation:bn-dot 1s var(--ease-standard, ease) infinite; }
.bn-live .bn-typing i:nth-child(2){ animation-delay:.15s; }
.bn-live .bn-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bn-dot{ 0%, 60%, 100%{ transform:none; } 30%{ transform:translateY(-3px); } }
.bn-reacts{ display:flex; gap:6px; padding-inline-start:39px; }
.bn-reacts span{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--bn-ghost); }
.bn-reacts span:first-child{ background:var(--bn-tint); color:var(--bn-purple); }
.bn-reacts svg{ inline-size:13px; block-size:13px; }

/* 2 + 4 · event cards */
.bn-event{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.bn-event__top{ display:flex; align-items:center; gap:12px; }
.bn-event__top > span:last-child{ display:flex; flex-direction:column; }
.bn-event__top b{ font-size:15px; line-height:1.3; }
.bn-event__top small{ color:var(--bn-muted); }
.bn-event__ic{ inline-size:40px; block-size:40px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--bn-tint); color:var(--bn-purple); }
.bn-event__ic svg{ inline-size:20px; block-size:20px; }
.bn-event__row{ display:flex; align-items:center; gap:10px; }
.bn-event__row small{ color:var(--bn-muted); font-weight:600; }
.bn-event__when{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--bn-muted); }
.bn-stack{ display:flex; }
.bn-stack img, .bn-stack i{ inline-size:30px; block-size:30px; background:#E2E2EA; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff; }
.bn-stack > * + *{ margin-inline-start:-8px; }
.bn-stack i{ display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:700; background:var(--bn-purple); color:#fff; }
.bn-btnwrap{ position:relative; display:inline-flex; align-self:flex-start; }
.bn-press{ display:inline-flex; }
.bn-swap{ display:inline-grid; }
.bn-swap > *{ grid-area:1 / 1; }
.bn-swap [data-bn-a]{ opacity:0; }
.bn-toast{ display:flex; align-items:center; gap:8px; align-self:center; padding:10px 14px; border-radius:12px; font-size:13px; font-weight:600; }
.bn-toast svg{ color:var(--bn-purple); }
.bn-remind{ justify-content:space-between; padding-block-start:10px; box-shadow:0 -1px 0 #EFEFF4; }
.bn-remind b{ font-size:13px; }
.bn-toggle{ position:relative; display:block; inline-size:40px; block-size:24px; border-radius:999px; background:#E2E2EA; }
.bn-toggle::after{ content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; inline-size:18px; block-size:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.bn-toggle.is-on{ background:var(--bn-purple); }
.bn-toggle.is-on::after{ inset-inline-start:19px; }

/* the tap dot: travels in from data-bn-from, pulses on the target, then fades (final frame: hidden) */
.bn-tap{ position:absolute; inset-block-start:50%; inset-inline-start:50%; inline-size:14px; block-size:14px; margin:-7px; border-radius:50%; background:rgba(94,95,255,.35); box-shadow:0 0 0 2px rgba(94,95,255,.55); opacity:0; pointer-events:none; }

/* 3 · feed deck */
.bn-in--deck{ gap:10px; }
.bn-feed{ display:flex; flex-direction:column; gap:3px; padding:14px 16px; }
.bn-feed small{ color:var(--bn-muted); font-weight:600; }
.bn-feed b{ font-size:15px; line-height:1.3; }
.bn-feed > span{ color:var(--bn-muted); }
.bn-feed--top{ padding:16px; }
.bn-feed--top b{ font-size:17px; }
.bn-feed__k{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bn-feed__k small{ color:var(--bn-purple); }
.bn-start{ display:inline-flex; align-self:flex-start; margin-block-start:8px; }
.bn-in--deck .bn-feed:nth-child(2){ margin-inline:10px; opacity:.96; }
.bn-in--deck .bn-feed:nth-child(3){ margin-inline:20px; opacity:.92; }

/* 5 · credential */
.bn-profile{ display:flex; align-items:center; gap:12px; }
.bn-profile > span:last-child{ display:flex; flex-direction:column; }
.bn-profile b{ font-size:15px; }
.bn-profile small{ color:var(--bn-muted); }
/* Prestige (black -> gold): text held in the anchor half, the seal on the gold end */
.bn-cred{ position:relative; display:flex; flex-direction:column; gap:4px; padding-block:16px 18px; padding-inline:16px 72px; border-radius:14px; background:var(--duo-prestige, linear-gradient(135deg, #000 0%, #F5C24B 100%)); color:#fff; box-shadow:var(--bn-card); }
[dir="rtl"] .bn-cred{ background:linear-gradient(225deg, #000 0%, #F5C24B 100%); }
.bn-cred small{ font-family:var(--font-mono, "IBM Plex Mono", monospace); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.bn-cred b{ font-size:16px; line-height:1.3; max-inline-size:240px; }
.bn-cred span{ font-size:12px; }
.bn-seal{ position:absolute; inset-inline-end:16px; inset-block-end:16px; inline-size:44px; block-size:44px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#000; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.bn-seal svg{ inline-size:22px; block-size:22px; stroke-width:2.6; }
.bn-actions{ display:flex; gap:8px; justify-content:flex-end; }
.bn-illus{ position:absolute; inset-block-end:-18px; inset-inline-start:0; font-size:11px !important; color:var(--bn-muted); }

/* 6 · AI */
.bn-lib{ display:flex; flex-direction:column; gap:10px; }
.bn-lib > small{ font-weight:600; color:var(--bn-muted); }
.bn-lib__row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.bn-agent{ display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:10px; background:var(--bn-ghost); }
.bn-agent b{ font-size:12px; line-height:1.3; }
.bn-agent--more b{ color:var(--bn-muted); }
.bn-ai{ align-self:flex-start; font-style:normal; font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--cyan-100, #C4F8FC); color:var(--bn-ink); }
.bn-meter{ display:flex; flex-direction:column; gap:10px; }
.bn-meter__k{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 10px; }
.bn-meter__k b{ font-size:13px; }
.bn-meter__track{ display:block; block-size:10px; border-radius:999px; background:#EFEFF4; overflow:hidden; }
.bn-meter__track i{
  display:block; block-size:100%; inline-size:62%; border-radius:999px; transform-origin:0 50%;
  background:repeating-linear-gradient(-45deg, var(--gold-200, #FFDE9C) 0 6px, var(--gold-100, #FFEDCA) 6px 12px);
}
[dir="rtl"] .bn-meter__track i{ transform-origin:100% 50%; }
.bn-bubble{ display:flex; flex-direction:column; gap:8px; align-self:flex-end; max-inline-size:86%; border-end-end-radius:4px; font-size:13px; }

/* ---------- copy under the stage ---------- */
.bn-copy{ padding-block-start:24px; }
.bn .bn-h3{ margin:0; font-size:22px; font-weight:600; line-height:1.3; letter-spacing:-.01em; text-wrap:balance; }
.bn-copy > p{ margin:8px 0 0; font-size:16px; line-height:1.6; color:var(--bn-muted); max-inline-size:600px; }
.bn-copy .bn-tiers{ margin-block-start:16px; }
.bn-note{ font-size:14px !important; }
.bn-rows{ display:flex; flex-direction:column; gap:12px; margin-block-start:16px; }
.bn-row{ display:flex; flex-direction:column; gap:8px; }
.bn-row .bn-tiers{ margin:0; }
.bn-row__k{ font-size:14px; font-weight:600; }
.bn-dev{ font-style:normal; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; margin-inline-start:6px; background:var(--gold-100, #FFEDCA); }

/* ---------- who gets it ---------- */
.bn-tiers{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bn-tiers li{
  display:inline-flex; align-items:center; gap:6px; min-block-size:32px; padding:0 12px; box-sizing:border-box;
  border-radius:999px; font-size:13px; font-weight:600; line-height:1;
}
.bn-tiers svg{ inline-size:14px; block-size:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.bn-tiers .is-in{ background:var(--bn-tint); color:var(--bn-ink); }
.bn-tiers .is-in svg{ color:var(--bn-purple); }
.bn-tiers .is-out{ background:transparent; color:var(--bn-muted); border:1px dashed var(--slate-300, #A5A6C0); }
.bn-tiers .is-soon{ background:var(--gold-100, #FFEDCA); color:var(--bn-ink); }
.bn--scenes[data-bn-here="membership"] .bn-tiers .is-in{ background:#fff; box-shadow:0 1px 2px rgba(17,12,46,.08); }
.bn-you{ display:none; }
/* the page's own membership: a purple ring, said once for screen readers */
.bn[data-bn-here="free"] .bn-tiers [data-tier="free"],
.bn[data-bn-here="pro"] .bn-tiers [data-tier="pro"],
.bn[data-bn-here="max"] .bn-tiers [data-tier="max"],
.bn[data-bn-here="infinite"] .bn-tiers [data-tier="infinite"]{ box-shadow:0 0 0 2px var(--bn-ring); }
.bn[data-bn-here="free"] [data-tier="free"] .bn-you,
.bn[data-bn-here="pro"] [data-tier="pro"] .bn-you,
.bn[data-bn-here="max"] [data-tier="max"] .bn-you,
.bn[data-bn-here="infinite"] [data-tier="infinite"] .bn-you{ display:inline; position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bn-note{ margin:10px 0 0; color:var(--bn-muted); line-height:1.5; }

.bn-more{ margin:clamp(28px, 4vw, 44px) 0 0; text-align:center; }
.bn-more a{ font-size:15px; font-weight:600; color:var(--bn-ink); text-decoration:underline; text-decoration-color:var(--silver, #D1D1D9); text-underline-offset:4px; }
.bn-more a:hover{ text-decoration-color:currentColor; }
[dir="rtl"] .bn-more a span{ display:inline-block; transform:scaleX(-1); }

@media (min-width:1024px){ .bn-in{ inline-size:min(100%, 440px); } }

/* ---------- tablet ---------- */
@media (max-width:1023px){
  .bn-scenes{ grid-template-columns:2fr 3fr; gap:28px; }
  .bn-stage{ aspect-ratio:auto; min-block-size:360px; }
}
/* ---------- phone: chips over the stage ---------- */
@media (max-width:767px){
  .bn-scenes{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .bn-tabs{
    position:static; flex-direction:row; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
    margin-inline:calc(50% - 50vw); padding:2px 16px 6px; scroll-padding-inline:16px;
  }
  .bn-tabs::-webkit-scrollbar{ display:none; }
  .bn-tab{ flex:none; inline-size:auto; min-block-size:44px; justify-content:center; padding:0 16px; border-radius:999px; background:var(--bn-ghost); scroll-snap-align:start; }
  .bn-tab b{ font-size:14px; white-space:nowrap; }
  .bn-tab::before{ display:none; }
  .bn-tab[aria-selected="true"] .bn-tab__d{ display:none; }
  .bn-tab[aria-selected="true"]{ background:var(--bn-ink); color:#fff; }
  .bn-tab__bar{ inset-block:auto 5px; inset-inline:16px; inline-size:auto; block-size:2px; transform-origin:0 50%; transform:scaleX(0); background:var(--purple-300, #A3A8FF); }
  [dir="rtl"] .bn-tab__bar{ transform-origin:100% 50%; }
  .bn-tab[aria-selected="true"] .bn-tab__bar{ transform:none; }
  .bn--scenes[data-bn-here="membership"] .bn-tab{ background:#fff; }
  .bn--scenes[data-bn-here="membership"] .bn-tab[aria-selected="true"]{ background:var(--bn-ink); }
  .bn-stage{ aspect-ratio:auto; min-block-size:440px; padding:52px 16px 20px; }
  .bn-manual .bn-stage, .bn-still .bn-stage, .bn:not(.bn-on) .bn-stage{ padding-block-start:20px; }
  .bn-copy{ padding-block-start:18px; }
  .bn .bn-h3{ font-size:20px; }
  .bn-lib__row{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .bn-tab{ transition:none; }
  .bn-dots i{ transition:none; }
  .bn-typing i{ animation:none !important; }
}