/*
 * Brand System site — site-only styles (brand/assets/site.css).
 * Depends on core tokens.css + fonts.css + mb.css. Prefix: .bs-*. Everything sits in one layer
 * after the library layers, so it can extend components without !important.
 * Candidates for the shared library are marked "PROPOSAL" (see the report).
 */
@layer marta.site {

  /* ---------- page frame ---------- */
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body.mb-page { overflow-x: clip; }
  .bs-skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--mb-plum); color: #fff; padding: .7rem 1rem; border-radius: var(--mb-radius-pill); font-weight: 700; text-decoration: none; }
  .bs-skip:focus { top: 1rem; color: #fff; }
  .mb-root code, .bs-code { font: 600 .86em/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: color-mix(in srgb, var(--mb-ink) 7%, transparent); padding: .12em .45em; border-radius: 6px; overflow-wrap: anywhere; }
  .bs-clip { overflow: hidden; padding-block: 1.5rem clamp(3rem, 8vw, 6rem); }
  /* PROPOSAL for mb.css: anchor the hidden checkbox inside the toggle (it is absolutely positioned) */
  .mb-toggle { position: relative; }
  .bs-muted { color: var(--mb-ink-soft); }

  /* ---------- nav (built by site.js) ---------- */
  .bs-header { position: sticky; top: 0; z-index: 60; min-height: 64px; }
  .bs-header .mb-nav { min-height: 64px; }
  .bs-nav__brand svg { width: calc(var(--mb-logo-size, 56px) * .9); }
  .bs-nav__brand > span { font-size: calc(var(--mb-menu-size, 17px) * 1.06); }
  .bs-nav__brand span { display: grid; line-height: 1; }
  .bs-nav__brand small { font: 600 .72rem/1.2 var(--mb-font-text); color: var(--mb-ink-soft); letter-spacing: 0; }
  .bs-nav__links { display: none; }
  .bs-nav__links a { padding: .45rem .55rem; font-size: calc(var(--mb-menu-size, 17px) * .9); }
  .bs-nav__links a.bs-nav__cta { background: var(--mb-thread); color: #fff; margin-left: .2rem; }
  .bs-nav__links a.bs-nav__cta:hover, .bs-nav__links a.bs-nav__cta[aria-current="page"] { background: var(--mb-plum); color: #fff; }
  /* Home: back to martabarandiy.com */
  .bs-home { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: .4rem .85rem; border-radius: var(--mb-radius-pill);
    box-shadow: inset 0 0 0 1.5px var(--mb-line); color: var(--mb-ink); text-decoration: none; font: 700 calc(var(--mb-menu-size, 17px) * .9)/1 var(--mb-font-text); white-space: nowrap; }
  .bs-home:hover { box-shadow: inset 0 0 0 1.5px var(--mb-thread); }
  .bs-home:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .bs-header .mb-nav { gap: .6rem; }
  /* Brand left, the page links centred in the space between, Home and the menu button right. */
  .bs-header .bs-home { margin-left: auto; }
  @media (min-width: 1440px) {
    .bs-header .bs-nav__links { margin-inline: auto; }
    .bs-header .bs-home { margin-left: 0; }
  }
  .bs-menu__home { margin: .5rem 0 0; }
  .bs-home--menu { background: var(--mb-paper); }
  .bs-menu-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: var(--mb-radius-pill);
    background: var(--mb-plum); color: #fff; font: 700 .95rem/1 var(--mb-font-display); cursor: pointer; }
  .bs-menu-btn svg { width: 22px; height: 14px; }
  .bs-menu-btn path { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
  @media (max-width: 440px) { .bs-header .bs-nav__brand > span { display: none; } .bs-header .bs-home { padding-inline: .7rem; } }
  @media (min-width: 1440px) {
    .bs-nav__links { display: flex; }
    .bs-menu-btn { display: none; }
  }
  /* Ukrainian labels run longer: the full row needs more width, so the Menu button stays a little longer. */
  @media (min-width: 1440px) and (max-width: 1599px) {
    .bs-nav__links a { padding-inline: .4rem; } /* room for the EN | UA switch */
    :lang(uk) .bs-nav__links { display: none; }
    :lang(uk) .bs-menu-btn { display: inline-flex; }
    :lang(uk) .bs-header .bs-home { margin-left: auto; }
  }

  /* Full-screen menu: a thread runs down and the links hang from it */
  .bs-menu { position: fixed; inset: 0; z-index: 90; background: var(--mb-pink); color: var(--mb-plum); display: grid; grid-template-rows: auto 1fr auto;
    padding: .75rem var(--mb-gutter) 1.5rem; overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path var(--mb-dur-3) var(--mb-ease-silk), visibility 0s linear var(--mb-dur-3); }
  .bs-menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path var(--mb-dur-3) var(--mb-ease-silk), visibility 0s; }
  .bs-menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
  .bs-menu__thread { position: absolute; left: calc(var(--mb-gutter) + .2rem); top: 4.5rem; bottom: 4rem; width: 40px; pointer-events: none; }
  .bs-menu__thread path { fill: none; stroke: var(--mb-thread); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
  .bs-menu.is-open .bs-menu__thread path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--mb-ease-silk) .1s; }
  .bs-menu__list { list-style: none; margin: 1rem 0 0; padding: 0 0 0 3.2rem; align-self: center; }
  .bs-menu__list li { opacity: 0; transform: translateX(-12px); transition: opacity var(--mb-dur-3) var(--mb-ease-out), transform var(--mb-dur-3) var(--mb-ease-out); transition-delay: calc(var(--i) * 40ms + 160ms); }
  .bs-menu.is-open .bs-menu__list li { opacity: 1; transform: none; }
  .bs-menu__list a { position: relative; display: inline-block; padding: .12rem 0; font: 900 clamp(2rem, 9.5vw, 3.6rem)/1 var(--mb-font-display); letter-spacing: var(--mb-track-tight); text-decoration: none; }
  .bs-menu__list a::before { content: ""; position: absolute; left: -2.6rem; top: 50%; width: 1.6rem; height: 3px; border-radius: 3px; background: var(--mb-thread); transform: scaleX(0); transform-origin: left; transition: transform var(--mb-dur-2) var(--mb-ease-silk); }
  .bs-menu__list a:hover::before, .bs-menu__list a:focus-visible::before, .bs-menu__list a[aria-current="page"]::before { transform: scaleX(1); }
  .bs-menu__list a[aria-current="page"] { color: var(--mb-thread); }
  .bs-menu__foot { font-size: var(--mb-step--1); font-weight: 600; }
  .bs-menu-open { overflow: hidden; }

  /* ---------- page head: poster title that crops ---------- */
  .bs-head { position: relative; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); overflow: hidden; }
  .bs-head__title { font: 900 var(--mb-step-6)/.82 var(--mb-font-display); letter-spacing: var(--mb-track-poster); margin: 0 0 .25em; margin-left: -.04em; overflow-wrap: anywhere; }
  .bs-head__title--crop { white-space: nowrap; overflow-wrap: normal; margin-right: calc(-1 * var(--mb-gutter)); }
  .bs-head__lede { font-size: var(--mb-step-1); line-height: 1.4; max-width: 40ch; }
  .bs-head__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; font-weight: 600; font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  .bs-head--hot { background: var(--mb-hot); color: var(--mb-plum); }
  .bs-head--lavender { background: var(--mb-lavender); }
  .bs-head--pink { background: var(--mb-pink); }
  .bs-head--plum { background: var(--mb-plum); color: #FFF1F6; }
  .bs-head--plum .bs-head__meta { color: var(--mb-gold-soft); }
  .bs-head__sticker { position: absolute; right: var(--mb-gutter); top: clamp(1.5rem, 4vw, 3rem); }

  /* Section title with a short description to the side */
  .bs-sec { display: grid; gap: .75rem 3rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
  .bs-sec h2 { margin: 0; }
  .bs-sec p { margin: 0; color: var(--mb-ink-soft); }
  @media (min-width: 900px) { .bs-sec { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }

  /* Jump links inside a page */
  .bs-jump { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
  .bs-jump a { display: inline-flex; min-height: 40px; align-items: center; padding: .4rem .9rem; border-radius: var(--mb-radius-pill); background: color-mix(in srgb, var(--mb-surface) 70%, transparent); font-weight: 600; font-size: .9rem; text-decoration: none; }
  .bs-jump a:hover { background: var(--mb-plum); color: #fff; }

  /* ---------- footer ---------- */
  .bs-foot { background: var(--mb-plum); color: #FFF1F6; padding-block: clamp(3rem, 7vw, 5rem) 2rem; margin-top: 0; }
  .bs-foot a { color: inherit; }
  .bs-foot__big { font: 900 var(--mb-step-5)/.85 var(--mb-font-display); letter-spacing: var(--mb-track-poster); margin: 0 0 2rem; }
  .bs-foot__big span { display: block; color: var(--mb-pink); }
  .bs-foot__grid { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); font-size: var(--mb-step--1); }
  .bs-foot__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
  .bs-foot svg.mb-monogram { width: 5rem; }
  .bs-foot small { color: var(--mb-gold-soft); }
  .bs-foot__follow { margin: 0 0 .3rem; font: 800 var(--mb-step-0)/1.2 var(--mb-font-display); }
  .bs-foot__grid .bs-foot__social { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; margin: 0 0 1rem -.6rem; }
  .bs-foot__social a.is-featured { margin-left: .6rem; }
  .bs-foot__base .mb-credit { text-decoration: none; }
  .bs-foot__social a:hover { background: var(--mb-pink); color: var(--mb-plum); }
  .bs-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.5rem; padding-top: 1.2rem;
    border-top: 1px solid rgba(255,241,246,.2); }
  .bs-foot__base a { text-decoration: underline; text-decoration-color: var(--mb-pink); text-underline-offset: 3px; }

  /* ---------- reusable site pieces ---------- */
  /* Class tag */
  .bs-tag { display: inline-flex; align-items: center; font: 600 .78rem/1 ui-monospace, Menlo, Consolas, monospace; padding: .35em .6em; border-radius: 6px; background: var(--mb-surface); border: 1px solid var(--mb-line); color: var(--mb-ink); }
  .bs-tags { display: flex; flex-wrap: wrap; gap: .3rem; }

  /* Demo frame (components, motion) — PROPOSAL for the library as .mb-specimen */
  .bs-demo { display: grid; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: 0 0 0 1px var(--mb-line); overflow: hidden; }
  .bs-demo__stage { padding: clamp(1.25rem, 4vw, 2.5rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
  .bs-demo__stage--center { place-items: center; align-content: center; text-align: center; }
  .bs-knots-lg { gap: 10px; } .bs-knots-lg li { width: 34px; height: 34px; }
  .bs-demo__stage--paper { background: var(--mb-paper); }
  .bs-demo__stage--pink { background: var(--mb-pink); }
  .bs-demo__stage--lilac { background: var(--mb-lilac); }
  .bs-demo__stage--plum { background: var(--mb-plum); color: #FFF1F6; }
  .bs-demo__meta { display: grid; gap: .6rem; padding: 1rem clamp(1.25rem, 3vw, 1.5rem) 1.25rem; border-top: 1px dashed var(--mb-line); font-size: var(--mb-step--1); }
  .bs-demo__meta h3 { font-size: var(--mb-step-1); margin: 0; }
  .bs-demo__meta p { margin: 0; color: var(--mb-ink-soft); }
  .bs-demo__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
  .bs-copy { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .9rem; border-radius: var(--mb-radius-pill); border: 1.5px solid var(--mb-ink); background: transparent; color: var(--mb-ink); font: 700 .85rem/1 var(--mb-font-display); cursor: pointer; transition: background var(--mb-dur-2), color var(--mb-dur-2); }
  .bs-copy:hover { background: var(--mb-plum); color: #fff; }
  .bs-wp { font-size: .82rem; color: var(--mb-ink-soft); }
  .bs-wp strong { color: var(--mb-ink); }

  /* Do / don't */
  .bs-dd { display: grid; gap: 1rem; }
  @media (min-width: 760px) { .bs-dd { grid-template-columns: 1fr 1fr; } }
  .bs-dd__item { border-radius: var(--mb-radius); padding: 1.1rem 1.25rem 1.25rem; background: var(--mb-surface); position: relative; }
  .bs-dd__item > b { display: inline-flex; align-items: center; gap: .4rem; font: 800 .8rem/1 var(--mb-font-display); margin-bottom: .6rem; }
  .bs-dd__item--do { box-shadow: inset 4px 0 0 var(--mb-thread); }
  .bs-dd__item--dont { background: color-mix(in srgb, var(--mb-ink) 5%, transparent); color: var(--mb-ink-soft); }
  .bs-dd__item--dont > b { color: var(--mb-ink); }
  .bs-dd__item p:last-child { margin-bottom: 0; }

  /* ---------- INDEX: the measure story ---------- */
  .bs-story { position: relative; height: 340svh; background: var(--mb-pink); }
  .bs-story__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; }
  .bs-story__halftone { position: absolute; inset: 0; --dot: color-mix(in srgb, var(--mb-hot) 55%, transparent); opacity: calc(.25 + var(--p, 0) * .5);
    -webkit-mask: radial-gradient(120% 90% at 85% 100%, #000 10%, transparent 70%); mask: radial-gradient(120% 90% at 85% 100%, #000 10%, transparent 70%); }
  .bs-story__title { position: absolute; left: 0; right: 0; top: clamp(4.5rem, 12vh, 7rem); margin: 0; padding-inline: var(--mb-gutter); font: 900 clamp(3.6rem, 21vw, 15.5rem)/.8 var(--mb-font-display); letter-spacing: var(--mb-track-poster); color: var(--mb-plum); pointer-events: none; }
  .bs-story__title span { display: block; white-space: nowrap; transition: transform 60ms linear; }
  .bs-story__title span:nth-child(2) { color: var(--mb-hot); padding-left: .55em; -webkit-text-stroke: 0; }
  .bs-story__title span:nth-child(3) { margin-left: -.06em; }
  .bs-story__tape { position: absolute; left: -10vw; right: -10vw; top: 58%; height: clamp(46px, 7vw, 76px); transform-origin: 30% 50%;
    transform: translate3d(calc(var(--p2, 0) * -8vw), calc(var(--p2, 0) * 60vh), 0) rotate(calc(-4deg + var(--p2, 0) * 38deg)); opacity: calc(1 - var(--p2, 0) * 1.1); }
  .bs-story__tape svg { width: 100%; height: 100%; display: block; }
  .bs-story__tapelabel { position: absolute; left: 14vw; top: -1.9rem; font: 700 var(--mb-step--1)/1 var(--mb-font-text); color: var(--mb-plum); }
  .bs-story__mono { position: absolute; left: 50%; top: 56%; width: min(92vw, 820px); transform: translate(-50%, -50%); }
  .bs-story__mono path { fill: none; stroke: var(--mb-thread); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  @media (min-width: 900px) { .bs-story__mono { left: 62%; top: 52%; width: min(62vw, 860px); } .bs-story__mono path { stroke-width: 3.6; } }
  .bs-story__caps { position: absolute; left: var(--mb-gutter); right: var(--mb-gutter); bottom: clamp(1.5rem, 6vh, 3.5rem); display: grid; }
  .bs-story__cap { grid-area: 1 / 1; margin: 0; max-width: 26ch; font: 800 var(--mb-step-2)/1.08 var(--mb-font-display); letter-spacing: -.02em; color: var(--mb-plum);
    opacity: 0; transform: translateY(12px); transition: opacity var(--mb-dur-3) var(--mb-ease-out), transform var(--mb-dur-3) var(--mb-ease-out); }
  .bs-story__cap.is-on { opacity: 1; transform: none; }
  .bs-story__cap small { display: block; margin-top: .6rem; font: 600 var(--mb-step--1)/1.3 var(--mb-font-text); color: var(--mb-plum-2); }
  .bs-story__hint { position: absolute; right: var(--mb-gutter); bottom: clamp(1.5rem, 6vh, 3.5rem); font-weight: 700; font-size: var(--mb-step--1); display: flex; align-items: center; gap: .5rem; opacity: calc(1 - var(--p, 0) * 4); }
  .bs-story__hint i { width: 2px; height: 2.4rem; background: var(--mb-thread); border-radius: 2px; transform-origin: top; animation: bs-hint 1.8s var(--mb-ease-silk) infinite; }
  @keyframes bs-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  /* Static fallback: no JS or reduced motion shows the end state, no pinning */
  .bs-story.is-static { height: auto; }
  .bs-story.is-static .bs-story__stage { position: relative; height: auto; min-height: 100svh; }
  .bs-story.is-static .bs-story__tape { display: none; } /* end state: the tape has come loose */
  .bs-story.is-static .bs-story__cap:last-child { opacity: 1; transform: none; }
  .bs-story.is-static .bs-story__hint { display: none; }

  /* Gown section */
  .bs-gown { position: relative; background: var(--mb-hot); color: var(--mb-plum); overflow: hidden; }
  .bs-gown__grid { display: grid; gap: 2rem; align-items: center; }
  @media (min-width: 900px) { .bs-gown__grid { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
  .bs-gown__arch { position: relative; max-width: 440px; width: 100%; margin-inline: auto; aspect-ratio: 3 / 4.2; border-radius: var(--mb-arch); background: var(--mb-pink); overflow: hidden; isolation: isolate; }
  .bs-gown__arch::before { content: ""; position: absolute; inset: 0; --dot: var(--mb-hot); background-image: radial-gradient(circle at center, var(--dot) 30%, transparent 33%); background-size: 10px 10px; opacity: .55;
    -webkit-mask: linear-gradient(180deg, #000, transparent 75%); mask: linear-gradient(180deg, #000, transparent 75%); z-index: -1; }
  .bs-gown__arch img { position: absolute; left: 50%; bottom: -2%; height: 104%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 30px 30px rgba(58, 18, 48, .3)); }
  .bs-gown__thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .bs-gown__thread path { fill: none; stroke: var(--mb-thread); stroke-width: 3; stroke-linecap: round; }
  .bs-gown__poster { font: 900 var(--mb-step-5)/.84 var(--mb-font-display); letter-spacing: var(--mb-track-poster); margin: 0 0 1.5rem; }
  .bs-gown__poster span { display: block; }
  .bs-gown__poster span + span { color: var(--mb-paper); }
  .bs-gown .mb-rosette { position: absolute; right: 6%; top: 8%; --rosette-bg: var(--mb-acid); --rosette-fg: var(--mb-plum); --size: clamp(6rem, 14vw, 8.5rem); font-size: .9rem; z-index: 2; }

  /* Entry list: huge rows, not cards */
  .bs-entries { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--mb-ink); }
  .bs-entry { border-bottom: 2px solid var(--mb-ink); }
  .bs-entry a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; align-items: baseline; padding: clamp(.9rem, 2.4vw, 1.4rem) 0; text-decoration: none; overflow: hidden; isolation: isolate; }
  .bs-entry a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--mb-gutter)); background: var(--fill, var(--mb-pink)); z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform var(--mb-dur-3) var(--mb-ease-silk); }
  .bs-entry a:hover::before, .bs-entry a:focus-visible::before { transform: scaleY(1); }
  .bs-entry a:hover { color: var(--mb-ink); }
  .bs-entry__name { font: 900 var(--mb-step-4)/.9 var(--mb-font-display); letter-spacing: var(--mb-track-tight); transition: transform var(--mb-dur-3) var(--mb-ease-silk); }
  .bs-entry a:hover .bs-entry__name { transform: translateX(.3em); }
  .bs-entry__what { grid-column: 1 / -1; font-size: var(--mb-step-0); color: var(--mb-ink-soft); max-width: 52ch; }
  .bs-entry__count { font: 700 var(--mb-step--1)/1 var(--mb-font-text); color: var(--mb-ink-soft); }
  @media (min-width: 900px) { .bs-entry a { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem) auto; } .bs-entry__what { grid-column: auto; } }

  .bs-entries--stack .bs-entry a { grid-template-columns: 1fr; }
  .bs-entries--stack .bs-entry__what { grid-column: 1 / -1; }

  /* Three rules strip */
  .bs-rules { display: grid; gap: 0; }
  @media (min-width: 900px) { .bs-rules { grid-template-columns: 1.4fr 1fr 1fr; } }
  .bs-rule { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; align-content: space-between; gap: 1rem; }
  @media (min-width: 900px) { .bs-rule { min-height: 15rem; gap: 1.5rem; } }
  .bs-rule h3 { font-size: var(--mb-step-3); margin: 0; }
  .bs-rule p { margin: 0; }

  /* ---------- PROCESS ---------- */
  .bs-stages { position: relative; display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
  .bs-stages__thread { display: none; }
  .bs-stage-tabs { display: flex; gap: .4rem; flex-wrap: wrap; position: relative; }
  .bs-stage-tab { position: relative; display: grid; justify-items: start; gap: .2rem; min-height: 44px; padding: .7rem 1rem; border: 0; border-radius: var(--mb-radius-pill); background: var(--mb-surface); color: var(--mb-ink); font: 800 1rem/1 var(--mb-font-display); cursor: pointer; transition: background var(--mb-dur-2), color var(--mb-dur-2), transform var(--mb-dur-2) var(--mb-ease-spring); }
  .bs-stage-tab:hover { transform: translateY(-2px); }
  .bs-stage-tab[aria-selected="true"] { background: var(--mb-plum); color: #fff; }
  .bs-stage-panel { padding-top: 1.5rem; }
  .bs-stage-panel[hidden] { display: none; }
  .bs-stage-panel h3 { font-size: var(--mb-step-3); }
  .bs-dthread { width: 100%; height: 70px; display: block; margin-block: 1rem .5rem; }
  .bs-dthread path { fill: none; stroke: var(--mb-thread); stroke-width: 3; stroke-linecap: round; }
  .bs-dthread circle { fill: var(--mb-paper); stroke: var(--mb-thread); stroke-width: 3; transition: r var(--mb-dur-3) var(--mb-ease-spring), fill var(--mb-dur-2); }
  .bs-dthread circle.is-on { fill: var(--mb-thread); }
  .bs-pending { position: relative; border-radius: var(--mb-radius-lg); padding: clamp(1.25rem, 3vw, 2rem); background: repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--mb-ink) 5%, transparent) 12px 13px), var(--mb-surface); border: 2px dashed var(--mb-line); }
  .bs-pending .mb-sticker { margin-bottom: .8rem; }
  .bs-pending h3 { font-size: var(--mb-step-2); }
  .bs-pending ul { margin: 0; padding-left: 1.1rem; }
  .bs-hmw { display: grid; gap: 1rem; counter-reset: none; }
  .bs-hmw p { font: 800 var(--mb-step-2)/1.15 var(--mb-font-display); letter-spacing: -.02em; margin: 0; max-width: 30ch; }
  .bs-concepts { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .bs-concepts { grid-template-columns: 1.6fr 1fr 1fr; } }
  .bs-concept { border-radius: var(--mb-radius-lg); padding: 1.5rem; background: var(--mb-surface); display: grid; gap: .6rem; align-content: start; }
  .bs-concept--won { background: var(--mb-thread); color: #fff; }
  .bs-concept--won h3 { font-size: var(--mb-step-4); }
  .bs-concept h3 { margin: 0; }
  .bs-concept p { margin: 0; }
  .bs-concept .bs-verdict { font: 700 var(--mb-step--1)/1.3 var(--mb-font-text); opacity: .85; }
  .bs-mood { columns: 2 150px; column-gap: .8rem; }
  @media (min-width: 900px) { .bs-mood { columns: 4; } }
  .bs-mood figure { break-inside: avoid; margin: 0 0 .8rem; position: relative; border-radius: 14px; overflow: hidden; background: var(--mb-blush); }
  .bs-mood img { display: block; width: 100%; height: auto; transition: transform var(--mb-dur-4) var(--mb-ease-silk); }
  .bs-mood figure:hover img { transform: scale(1.04); }
  .bs-mood figcaption { position: absolute; left: .5rem; bottom: .5rem; right: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
  .bs-mood figcaption span { background: var(--mb-paper); color: var(--mb-plum); padding: .3em .6em; border-radius: var(--mb-radius-pill); font: 700 .74rem/1 var(--mb-font-text); }
  .bs-mood-filter { margin-bottom: 1.2rem; }
  .bs-mood figure.is-dim { opacity: .18; filter: grayscale(1); }
  .bs-mood figure { transition: opacity var(--mb-dur-3), filter var(--mb-dur-3); }
  .bs-test { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .bs-test { grid-template-columns: repeat(3, 1fr); } .bs-test > :first-child { grid-column: span 2; } }


  /* process: findings as posters */
  .bs-findings { display: grid; gap: 1rem; }
  @media (min-width: 760px) { .bs-findings { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bs-finding--big { grid-row: span 2; } .bs-finding--wide { grid-column: span 2; } }
  .bs-finding { background: var(--f); color: var(--mb-plum); border-radius: var(--mb-radius-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; align-content: space-between; gap: .8rem; min-height: 13rem; overflow: hidden; container-type: inline-size; }
  .bs-finding__num { font: 900 min(var(--mb-step-5), 30cqw)/.85 var(--mb-font-display); letter-spacing: var(--mb-track-poster); }
  .bs-finding--big .bs-finding__num { font-size: min(var(--mb-step-6), 36cqw); }
  .bs-finding__num--long { font-size: min(var(--mb-step-5), 19cqw); }
  .bs-finding p { margin: 0; font-weight: 500; max-width: 34ch; }
  .bs-finding a { font: 700 var(--mb-step--1)/1.2 var(--mb-font-text); color: var(--mb-plum); }
  .bs-persona { display: grid; gap: 1rem; padding-top: 1.5rem; }
  .bs-persona[hidden] { display: none; }
  @media (min-width: 900px) { .bs-persona { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
  .bs-persona__who { background: var(--f); border-radius: var(--mb-radius-lg) var(--mb-radius-lg) 0 var(--mb-radius-lg); padding: clamp(1.25rem, 4vw, 2.5rem); display: grid; gap: .6rem; align-content: start; }
  .bs-persona__who .mb-sticker { justify-self: start; }
  .bs-persona__who h3 { font-size: var(--mb-step-4); margin: .3rem 0 0; }
  .bs-persona__who p { margin: 0; }
  .bs-persona__q { font: italic 500 var(--mb-step-2)/1.2 var(--mb-font-display); margin-top: 1rem !important; }
  .bs-persona__q small { display: block; margin-top: .5rem; font: 600 .78rem/1.2 var(--mb-font-text); font-style: normal; color: var(--mb-plum-2); }
  .bs-persona__facts { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--mb-ink); }
  .bs-persona__facts div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--mb-line); }
  .bs-persona__facts dt { font: 800 1rem/1.3 var(--mb-font-display); }
  .bs-persona__facts dd { margin: 0; }
  @media (max-width: 480px) { .bs-persona__facts div { grid-template-columns: 1fr; gap: .2rem; } }
  .bs-empathy { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 1rem; }
  .bs-empathy > div { background: var(--f); border-radius: var(--mb-radius); padding: 1.25rem; }
  .bs-empathy h4 { margin: 0 0 .5rem; }
  .bs-empathy p { margin: 0; font-size: var(--mb-step--1); }
  .bs-journeys { display: grid; gap: 1.5rem; }
  .bs-journey h3 { font-size: var(--mb-step-2); margin: 0 0 .8rem; }
  .bs-journey h3 small { font: 600 var(--mb-step--1)/1 var(--mb-font-text); color: var(--mb-ink-soft); margin-left: .4rem; }
  .bs-journey ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  @media (min-width: 760px) { .bs-journey ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
  .bs-journey li { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem; background: var(--mb-surface); border-radius: var(--mb-radius); transition: background var(--mb-dur-3) var(--mb-ease-silk); }
  @media (min-width: 760px) { .bs-journey li { min-height: 7rem; border-radius: 0; border-right: 2px dashed var(--mb-line); } .bs-journey li:first-child { border-radius: var(--mb-radius) 0 0 var(--mb-radius); } .bs-journey li:last-child { border-radius: 0 var(--mb-radius) var(--mb-radius) 0; border-right: 0; } }
  .bs-journey li b { font: 800 .82rem/1 var(--mb-font-display); color: var(--mb-ink-soft); }
  .bs-journeys .is-designed { display: none; }
  .bs-journeys.is-on .is-designed { display: block; }
  .bs-journeys.is-on .is-today { display: none; }
  .bs-journeys.is-on li { background: var(--mb-plum); color: #FFF1F6; }
  .bs-journeys.is-on li b { color: var(--mb-pink); }
  .bs-pov { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--mb-ink); }
  .bs-pov li { padding: 1.1rem 0; border-bottom: 1px solid var(--mb-line); font-size: var(--mb-step-1); line-height: 1.35; max-width: 60ch; }
  .bs-pov b { font-family: var(--mb-font-display); font-weight: 800; color: var(--mb-thread); }
  .bs-hmw-wall { display: grid; gap: .6rem; margin-top: 1rem; }
  @media (min-width: 760px) { .bs-hmw-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .bs-hmw-wall p { margin: 0; padding: 1.25rem; border-radius: 72px 72px var(--mb-radius) var(--mb-radius); background: var(--mb-lilac); font: 800 var(--mb-step-1)/1.2 var(--mb-font-display); letter-spacing: -.015em; padding: 2.4rem 1.6rem 1.5rem; }
  .bs-hmw-wall p::before { content: "How might we "; display: block; font: 600 .78rem/1 var(--mb-font-text); color: var(--mb-ink-soft); margin-bottom: .5rem; letter-spacing: 0; }
  .bs-hmw-wall p:nth-child(3n+2) { background: var(--mb-pink); } .bs-hmw-wall p:nth-child(3n) { background: var(--mb-gold-soft); }
  .bs-principles8 { margin-top: 1rem; max-width: 52rem; }
  .bs-moodnotes { display: grid; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 900px) { .bs-moodnotes { grid-template-columns: repeat(3, 1fr); } }
  .bs-moodnotes p { margin: 0; }
  .bs-risk { display: grid; gap: 0; border-radius: var(--mb-radius-lg); overflow: hidden; box-shadow: var(--mb-shadow); }
  @media (min-width: 760px) { .bs-risk { grid-template-columns: 1fr 1fr; } }
  .bs-risk__side { background: var(--mb-bg); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: .8rem; align-content: start; }
  .bs-risk__side[data-register="policy"] { background: var(--mb-lilac); }
  .bs-risk__t { font: 900 var(--mb-step-3)/.95 var(--mb-font-display); letter-spacing: -.035em; margin: 0; }
  .bs-risk__side p { margin: 0; }

  /* ---------- IDENTITY ---------- */
  .bs-mono-lab { display: grid; gap: 1.5rem; }
  @media (min-width: 960px) { .bs-mono-lab { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
  .bs-mono-stage { position: relative; display: grid; place-items: center; min-height: 340px; border-radius: var(--mb-radius-lg); background: var(--mb-paper); box-shadow: 0 0 0 1px var(--mb-line); padding: 2rem; overflow: hidden; }
  .bs-mono-stage svg { width: min(100%, 520px); overflow: visible; }
  .bs-mono-stage .bs-grid, .bs-mono-stage .bs-clear, .bs-mono-stage .bs-nodes { opacity: 0; transition: opacity var(--mb-dur-3); }
  .bs-mono-stage.show-grid .bs-grid, .bs-mono-stage.show-clear .bs-clear, .bs-mono-stage.show-nodes .bs-nodes { opacity: 1; }
  .bs-grid line { stroke: var(--mb-violet); stroke-width: .3; opacity: .45; }
  .bs-clear rect { fill: color-mix(in srgb, var(--mb-lavender) 35%, transparent); stroke: var(--mb-violet); stroke-dasharray: 2 2; stroke-width: .6; }
  .bs-clear text, .bs-nodes text { font: 700 5px/1 var(--mb-font-text); fill: var(--mb-violet); }
  .bs-nodes circle { fill: var(--mb-paper); stroke: var(--mb-violet); stroke-width: .8; }
  .bs-size { display: grid; gap: 1rem; align-content: start; }
  .bs-size__view { display: grid; place-items: center; min-height: 170px; border-radius: var(--mb-radius); background: var(--mb-surface); box-shadow: 0 0 0 1px var(--mb-line); }
  .bs-size__view svg { display: block; transition: width 60ms linear; }
  .bs-size__out { font-weight: 700; }
  .bs-size__out.is-warn { color: var(--mb-thread); }
  .bs-misuse { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .bs-misuse figure { margin: 0; display: grid; gap: .5rem; }
  .bs-misuse__box { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: var(--mb-radius); background: var(--mb-surface); overflow: hidden; box-shadow: 0 0 0 1px var(--mb-line); }
  .bs-misuse__box svg { width: 62%; }
  .bs-misuse__box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--mb-thread) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)); opacity: .85; }
  .bs-misuse figcaption { font-size: var(--mb-step--1); font-weight: 600; }
  .bs-lockups { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .bs-lockups { grid-template-columns: 1.3fr 1fr; } }
  .bs-lockup { border-radius: var(--mb-radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1rem; align-content: center; min-height: 13rem; }
  .bs-lockup__h { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
  .bs-lockup__h svg { width: clamp(4rem, 10vw, 6rem); flex: none; }
  .bs-lockup__name { font: 800 clamp(1.6rem, 4.5vw, 2.8rem)/.95 var(--mb-font-display); letter-spacing: -.035em; }
  .bs-lockup__name small { display: block; margin-top: .35rem; font: 600 .82rem/1.2 var(--mb-font-text); letter-spacing: 0; color: inherit; opacity: .8; }
  .bs-lockup small { color: inherit; opacity: .85; }
  .bs-lockup__v { display: grid; justify-items: start; gap: .5rem; }
  .bs-lockup__v svg { width: 5rem; }
  .bs-usage { display: flex; height: 4.5rem; border-radius: var(--mb-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--mb-line); }
  .bs-usage > span { flex: var(--w) 1 0; display: flex; align-items: flex-end; padding: .5rem .6rem; font: 800 .8rem/1 var(--mb-font-display); min-width: 0; overflow: hidden; white-space: nowrap; }
  .bs-swatches { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 640px) { .bs-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .bs-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bs-swatch--big { grid-column: span 3; } }
  .bs-swatch { display: grid; align-content: space-between; gap: 1.6rem; min-height: 9rem; padding: .9rem; border: 0; border-radius: var(--mb-radius); background: var(--c); color: var(--on, var(--mb-plum)); text-align: left; cursor: pointer; font: inherit;
    box-shadow: inset 0 0 0 1px var(--mb-line); transition: transform var(--mb-dur-2) var(--mb-ease-spring), border-radius var(--mb-dur-3) var(--mb-ease-silk); }
  .bs-swatch:hover { transform: translateY(-3px); border-radius: var(--mb-radius) var(--mb-radius) 40px 40px; }
  .bs-swatch b { font: 800 1.05rem/1.1 var(--mb-font-display); }
  .bs-swatch span { display: grid; gap: .15rem; font: 600 .76rem/1.25 ui-monospace, Menlo, Consolas, monospace; }
  .bs-swatch--big { grid-column: span 2; min-height: 12rem; }
  .bs-pairs { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .bs-pair { border-radius: var(--mb-radius); padding: 1rem; background: var(--bg); color: var(--fg); display: grid; gap: .6rem; box-shadow: inset 0 0 0 1px var(--mb-line); }
  .bs-pair__sample { font: 800 1.6rem/1 var(--mb-font-display); letter-spacing: -.02em; }
  .bs-pair__res { display: flex; gap: .35rem; flex-wrap: wrap; font: 700 .74rem/1 var(--mb-font-text); }
  .bs-pair__res span { padding: .35em .6em; border-radius: var(--mb-radius-pill); background: var(--mb-paper); color: var(--mb-plum); }
  .bs-pair__res span.is-fail { background: var(--mb-plum); color: var(--mb-pink); text-decoration: line-through; }
  .bs-reg { display: grid; gap: 1rem; }
  .bs-reg__panel { border-radius: var(--mb-radius-lg); background: var(--mb-bg); color: var(--mb-ink); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.2rem; box-shadow: 0 0 0 1px var(--mb-line); transition: background var(--mb-dur-3) var(--mb-ease-silk), color var(--mb-dur-3); }
  @media (min-width: 900px) { .bs-reg__panel { grid-template-columns: 1.2fr 1fr; align-items: center; } }
  .bs-reg__panel .mb-card { background: var(--mb-surface); transition: background var(--mb-dur-3); }
  .bs-reg__panel h3 { font-size: var(--mb-step-4); margin: 0; }
  .bs-scale { display: grid; gap: 0; border-top: 1px solid var(--mb-line); }
  .bs-scale__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--mb-line); overflow: hidden; }
  @media (max-width: 600px) { .bs-scale__row { grid-template-columns: 1fr; gap: .3rem; } .bs-scale__row small { display: inline; margin-left: .5rem; } }
  .bs-scale__row code { font-size: .75rem; }
  .bs-scale__row small { display: block; margin-top: .25rem; }
  .bs-scale__sample { font-family: var(--mb-font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
  .bs-shapes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .bs-shape { display: grid; gap: .7rem; align-content: start; }
  .bs-shape__art { height: 12rem; display: grid; place-items: center; border-radius: var(--mb-radius); background: var(--mb-surface); box-shadow: 0 0 0 1px var(--mb-line); overflow: hidden; }
  .bs-shape h3 { font-size: var(--mb-step-1); margin: 0; }
  .bs-shape p { margin: 0; font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  @media (min-width: 600px) { .bs-photo__frame { aspect-ratio: 4 / 5; } }
  .bs-commissions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--mb-ink); }
  .bs-commission { display: grid; gap: .4rem 2rem; padding: 1.2rem 0; border-bottom: 2px solid var(--mb-ink); }
  @media (min-width: 900px) { .bs-commission { grid-template-columns: 1fr 1.4fr auto; align-items: baseline; } }
  .bs-commission h3 { font-size: var(--mb-step-2); margin: 0; }
  .bs-commission p { margin: 0; }
  .bs-dot { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--mb-line); vertical-align: -.15em; }
  .bs-photo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .bs-photo__frame { aspect-ratio: 3 / 2; border-radius: var(--mb-radius); position: relative; overflow: hidden; display: grid; align-items: end; padding: 1rem; font: 800 var(--mb-step-1)/1.05 var(--mb-font-display); }

  /* ---------- COMPONENTS ---------- */
  .bs-lib { display: grid; gap: 2rem; }
  @media (min-width: 1100px) { .bs-lib { grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; } }
  .bs-lib__toc { position: sticky; top: 5rem; align-self: start; display: none; }
  @media (min-width: 1100px) { .bs-lib__toc { display: block; } }
  .bs-lib__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
  .bs-lib__toc a { display: block; padding: .5rem .8rem; border-radius: 12px; text-decoration: none; font: 700 1rem/1.1 var(--mb-font-display); }
  .bs-lib__toc a:hover, .bs-lib__toc a.is-here { background: var(--mb-surface-2); color: var(--mb-ink); }
  .bs-group { padding-block: 1rem 3.5rem; }
  .bs-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
  .bs-group__head h2 { margin: 0; font-size: var(--mb-step-5); letter-spacing: var(--mb-track-poster); }
  .bs-group__head p { margin: 0; color: var(--mb-ink-soft); max-width: 40ch; }
  .bs-demos { display: grid; gap: 1rem; }
  @media (min-width: 760px) { .bs-demos { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bs-demos > * { grid-column: span 3; } .bs-demos > .is-wide { grid-column: span 6; } .bs-demos > .is-third { grid-column: span 2; } .bs-demos > .is-two { grid-column: span 4; } }

  /* ---------- MOTION ---------- */
  .bs-curves { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .bs-curve { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: 0 0 0 1px var(--mb-line); border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
  .bs-curve:hover { box-shadow: 0 0 0 2px var(--mb-ink); }
  .bs-curve svg { width: 100%; height: auto; overflow: visible; }
  .bs-curve .axis { stroke: var(--mb-line); stroke-width: 1; fill: none; }
  .bs-curve .c { stroke: var(--mb-thread); stroke-width: 2.5; fill: none; stroke-linecap: round; }
  .bs-curve .h { stroke: var(--mb-violet); stroke-width: 1; stroke-dasharray: 3 3; }
  .bs-curve .dot { fill: var(--mb-thread); }
  .bs-curve__track { position: relative; height: 26px; border-radius: 99px; background: var(--mb-blush); }
  .bs-curve__ball { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mb-plum); }
  .bs-curve b { font: 800 1.05rem/1.1 var(--mb-font-display); }
  .bs-curve small { display: block; }
  .bs-durs { display: grid; gap: .6rem; }
  .bs-dur code { white-space: nowrap; }
  .bs-dur { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; }
  .bs-dur__bar { height: 2.4rem; border-radius: 99px; background: var(--mb-lilac); position: relative; overflow: hidden; }
  .bs-dur__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--mb-violet); transform: scaleX(0); transform-origin: left; }
  .bs-dur__bar.is-run i { transform: scaleX(1); transition: transform var(--d) var(--mb-ease-silk); }
  .bs-motion-grid { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .bs-motion-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .bs-motion-grid > * { grid-column: span 6; } .bs-motion-grid > .is-7 { grid-column: span 7; } .bs-motion-grid > .is-5 { grid-column: span 5; } .bs-motion-grid > .is-4 { grid-column: span 4; } .bs-motion-grid > .is-8 { grid-column: span 8; } .bs-motion-grid > .is-12 { grid-column: span 12; } }
  .bs-hemwave { display: block; width: 100%; height: 80px; color: var(--mb-hot); }
  .bs-hemwave path { fill: currentColor; transform-origin: 50% 0; transform: scaleY(calc(.25 + var(--mb-wave, 0) * 3)); transition: transform 120ms linear; }
  .bs-wave-meter { font: 800 var(--mb-step-3)/1 var(--mb-font-display); min-width: 3ch; }
  .bs-tiltcard { min-height: 12rem; display: grid; align-content: end; transition: transform var(--mb-dur-2) var(--mb-ease-out); }
  .bs-calm *, .bs-calm *::before, .bs-calm *::after { transition-duration: 1ms !important; animation: none !important; }
  .bs-principles { display: grid; gap: 0; }
  @media (min-width: 900px) { .bs-principles { grid-template-columns: repeat(3, 1fr); } }
  .bs-principle { padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; min-height: 16rem; }
  .bs-principle h3 { font-size: var(--mb-step-3); margin: 0; }
  .bs-principle p { margin: 0; }
  .bs-silk-demo { height: 9rem; position: relative; border-radius: var(--mb-radius); background: var(--mb-blush); overflow: hidden; }
  .bs-silk-demo span { position: absolute; top: 50%; left: 6%; width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; border-radius: 999px 999px 10px 10px; background: var(--mb-thread); transition: left var(--mb-dur-4) var(--mb-ease-silk), border-radius var(--mb-dur-4) var(--mb-ease-silk); }
  .bs-silk-demo.is-b span { left: calc(94% - 3.6rem); border-radius: var(--mb-petal); }
  .bs-silk-demo span.is-bounce { transition-timing-function: cubic-bezier(.5, 2.2, .4, -.6); background: var(--mb-muted); top: 72%; }

  /* ---------- VOICE ---------- */
  .bs-flip { display: grid; gap: 1rem; }
  @media (min-width: 800px) { .bs-flip { grid-template-columns: 1fr 1fr; } }
  .bs-flip__card { border-radius: var(--mb-radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); min-height: 14rem; display: grid; align-content: space-between; gap: 1.2rem; background: var(--mb-surface); box-shadow: 0 0 0 1px var(--mb-line); }
  .bs-flip__say { font: 800 var(--mb-step-2)/1.1 var(--mb-font-display); letter-spacing: -.025em; margin: 0; max-width: 28ch; transition: opacity var(--mb-dur-2); }
  .bs-flip__card.is-dont { background: color-mix(in srgb, var(--mb-ink) 6%, transparent); box-shadow: none; }
  .bs-flip__card.is-dont .bs-flip__say { font-weight: 500; color: var(--mb-ink-soft); text-decoration: line-through; text-decoration-color: var(--mb-thread); text-decoration-thickness: 3px; }
  .bs-traits { display: grid; gap: 1px; background: var(--mb-ink); border: 2px solid var(--mb-ink); border-radius: var(--mb-radius-lg); overflow: hidden; }
  @media (min-width: 760px) { .bs-traits { grid-template-columns: 1fr 1fr; } }
  .bs-trait { background: var(--mb-bg); padding: 1.5rem; display: grid; gap: .5rem; }
  .bs-trait h3 { font-size: var(--mb-step-3); margin: 0; }
  .bs-trait p { margin: 0; }
  .bs-micro { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .bs-micro { grid-template-columns: 1fr 1fr; } }
  .bs-chatdemo { border-radius: var(--mb-radius-lg); background: var(--mb-cream); padding: clamp(1rem, 3vw, 1.75rem); min-height: 16rem; }
  .bs-names { width: 100%; border-collapse: collapse; font-size: var(--mb-step--1); }
  .bs-names th, .bs-names td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--mb-line); vertical-align: top; }
  .bs-names th { font: 800 .85rem/1.2 var(--mb-font-display); }
  .bs-tablewrap { overflow-x: auto; }
  .bs-tablewrap .bs-names { min-width: 560px; }

  /* ---------- APPLICATIONS ---------- */
  .bs-wall { display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
  @media (min-width: 900px) { .bs-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); } .bs-wall > * { grid-column: span var(--span, 12); } }
  @media (max-width: 899px) { .bs-mock:has(.bs-story-art), .bs-mock:has(.bs-badge) { max-width: 300px; width: 100%; justify-self: center; } }
  .bs-mock { display: grid; gap: .7rem; margin: 0; }
  .bs-mock figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: var(--mb-step--1); }
  .bs-mock figcaption b { font: 800 .95rem/1.2 var(--mb-font-display); }
  .bs-art { container-type: inline-size; position: relative; overflow: hidden; border-radius: 6px; box-shadow: var(--mb-shadow); isolation: isolate; }
  /* Instagram post 1080×1350 */
  .bs-ig { aspect-ratio: 1080 / 1350; background: var(--mb-pink); color: var(--mb-plum); }
  .bs-ig__ht { position: absolute; inset: 40% -10% -10% 30%; --dot: var(--mb-hot); border-radius: 50% 50% 0 0; opacity: .7; }
  .bs-ig__label { position: absolute; left: 6cqw; top: 6cqw; font: 700 3.1cqw/1.2 var(--mb-font-text); display: flex; gap: 2cqw; align-items: center; }
  .bs-ig__label svg { width: 11cqw; }
  .bs-ig__title { position: absolute; left: 5cqw; right: -6cqw; top: 22cqw; font: 900 17.5cqw/.82 var(--mb-font-display); letter-spacing: -.06em; margin: 0; }
  .bs-ig__title span { display: block; white-space: nowrap; }
  .bs-ig__title span:nth-child(2) { color: var(--mb-thread); }
  .bs-ig__foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; font: 600 3.2cqw/1.3 var(--mb-font-text); display: flex; justify-content: space-between; align-items: end; gap: 3cqw; }
  .bs-ig__foot b { font: 800 4cqw/1.1 var(--mb-font-display); display: block; max-width: 30ch; }
  .bs-ig .bs-sticker-cq { position: absolute; right: 7cqw; top: 70cqw; background: var(--mb-acid); padding: 1.6cqw 2.6cqw; border-radius: 1.5cqw; font: 800 3.4cqw/1 var(--mb-font-display); transform: rotate(-6deg); }
  /* Story 1080×1920 */
  .bs-story-art { aspect-ratio: 1080 / 1920; background: var(--mb-cream); color: var(--mb-plum); }
  .bs-story-art__arch { position: absolute; left: 12cqw; right: 12cqw; top: 9cqw; height: 92cqw; border-radius: 999px 999px 4cqw 4cqw; background: linear-gradient(180deg, var(--mb-pink), var(--mb-blush)); overflow: hidden; }
  .bs-story-art__arch img { position: absolute; left: 50%; bottom: -4cqw; height: 104%; width: auto; transform: translateX(-50%); max-width: none; }
  .bs-story-art__q { position: absolute; left: 8cqw; right: 6cqw; top: 108cqw; font: 900 11.5cqw/.92 var(--mb-font-display); letter-spacing: -.04em; margin: 0; }
  .bs-story-art__sub { position: absolute; left: 8cqw; right: 8cqw; top: 138cqw; font: 500 4.6cqw/1.3 var(--mb-font-text); }
  .bs-story-art__sub i { font-family: var(--mb-font-display); color: var(--mb-thread); font-weight: 500; }
  .bs-story-art__cta { position: absolute; left: 8cqw; bottom: 12cqw; padding: 3.6cqw 7cqw; border-radius: 99px; background: var(--mb-plum); color: #fff; font: 800 4.4cqw/1 var(--mb-font-display); }
  .bs-story-art__url { position: absolute; left: 8cqw; bottom: 5cqw; font: 600 3.2cqw/1 var(--mb-font-text); }
  /* LinkedIn 1200×627 */
  .bs-li { aspect-ratio: 1200 / 627; background: var(--mb-lavender); color: var(--mb-plum); }
  .bs-li__name { position: absolute; left: 5cqw; top: 6cqw; font: 800 2.6cqw/1 var(--mb-font-display); display: flex; align-items: center; gap: 1.5cqw; }
  .bs-li__name svg { width: 7cqw; }
  .bs-li__t { position: absolute; left: 4.4cqw; top: 14cqw; right: 34cqw; font: 900 7.2cqw/.88 var(--mb-font-display); letter-spacing: -.055em; margin: 0; }
  .bs-li__pill { position: absolute; right: -4cqw; top: 8cqw; width: 34cqw; height: 15cqw; border-radius: 99px; background: var(--mb-violet); }
  .bs-li__pill + .bs-li__pill { top: 26cqw; right: 6cqw; width: 22cqw; background: var(--mb-pink); }
  .bs-li__dots { position: absolute; right: 4cqw; bottom: 5cqw; width: 26cqw; height: 12cqw; --dot: var(--mb-plum); background-size: 2.4cqw 2.4cqw; }
  .bs-li__foot { position: absolute; left: 5cqw; bottom: 5cqw; font: 600 1.7cqw/1.3 var(--mb-font-text); }
  /* Slide 16:9 (stage register) */
  .bs-slide { aspect-ratio: 16 / 9; background: #24081D; color: #FFF1F6; }
  .bs-slide__t { position: absolute; left: 5cqw; top: 13cqw; right: 26cqw; font: 900 7.4cqw/.88 var(--mb-font-display); letter-spacing: -.05em; margin: 0; }
  .bs-slide__t span { color: var(--mb-gold-soft); }
  .bs-slide__meta { position: absolute; left: 5cqw; bottom: 5cqw; font: 600 1.6cqw/1.4 var(--mb-font-text); color: #E3BFD2; }
  .bs-slide__meta b { display: block; color: #FFF1F6; font: 800 2cqw/1.2 var(--mb-font-display); }
  .bs-slide__arch { position: absolute; right: 5cqw; bottom: 0; width: 20cqw; height: 40cqw; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, var(--mb-gold), var(--mb-gold-soft)); overflow: hidden; }
  .bs-slide__arch img { position: absolute; left: 50%; bottom: -3cqw; height: 104%; width: auto; transform: translateX(-50%); max-width: none; }
  .bs-slide__thread { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bs-slide__thread path { fill: none; stroke: #FF5A6E; stroke-width: .5; stroke-linecap: round; }
  /* A4 cover (policy register) */
  .bs-a4 { aspect-ratio: 210 / 297; }
  .bs-cover { background: var(--mb-lilac); color: var(--mb-plum); }
  .bs-cover__band { position: absolute; left: 0; right: 0; top: 0; height: 52cqw; background: var(--mb-lavender); }
  .bs-cover__pills { position: absolute; left: 8cqw; right: 8cqw; top: 12cqw; display: grid; gap: 2.4cqw; }
  .bs-cover__pills i { height: 7cqw; border-radius: 99px; background: var(--mb-violet); width: var(--w); }
  .bs-cover__pills i:nth-child(2) { background: var(--mb-paper); } .bs-cover__pills i:nth-child(3) { background: var(--mb-hot); }
  .bs-cover__kicker { position: absolute; left: 8cqw; top: 60cqw; font: 700 3cqw/1.2 var(--mb-font-text); }
  .bs-cover__t { position: absolute; left: 7cqw; right: 8cqw; top: 67cqw; font: 900 10.4cqw/.9 var(--mb-font-display); letter-spacing: -.05em; margin: 0; }
  .bs-cover__sub { position: absolute; left: 8cqw; right: 12cqw; top: 104cqw; font: 500 3.6cqw/1.3 var(--mb-font-text); }
  .bs-cover__foot { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; display: flex; justify-content: space-between; align-items: end; font: 700 2.8cqw/1.3 var(--mb-font-text); }
  .bs-cover__foot svg { width: 14cqw; }
  /* Letterhead */
  .bs-letter { background: #fff; color: var(--mb-plum); }
  .bs-letter__head { position: absolute; left: 9cqw; right: 9cqw; top: 9cqw; display: flex; justify-content: space-between; align-items: start; gap: 4cqw; }
  .bs-letter__head svg { width: 15cqw; }
  .bs-letter__who { font: 800 3.6cqw/1.05 var(--mb-font-display); text-align: right; }
  .bs-letter__who small { display: block; font: 500 2.2cqw/1.3 var(--mb-font-text); color: var(--mb-muted); margin-top: 1cqw; }
  .bs-letter__thread { position: absolute; left: 0; right: 0; top: 27cqw; height: 6cqw; width: 100%; }
  .bs-letter__thread path { fill: none; stroke: var(--mb-thread); stroke-width: .6; }
  .bs-letter__body { position: absolute; left: 9cqw; right: 9cqw; top: 42cqw; display: grid; gap: 2.6cqw; }
  .bs-letter__body b { font: 800 4.4cqw/1.05 var(--mb-font-display); letter-spacing: -.02em; }
  .bs-letter__body i { display: block; height: 1.3cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--mb-plum) 12%, transparent); width: var(--w, 100%); }
  .bs-letter__foot { position: absolute; left: 9cqw; right: 9cqw; bottom: 7cqw; display: flex; justify-content: space-between; font: 600 2cqw/1.3 var(--mb-font-text); color: var(--mb-muted); border-top: .3cqw solid var(--mb-pink); padding-top: 2cqw; }
  /* Email signature (real HTML, table-free here; the downloadable one uses tables) */
  .bs-sig { background: #fff; color: var(--mb-plum); padding: 1.25rem 1.4rem; border-radius: 10px; box-shadow: var(--mb-shadow); display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; font-size: .9rem; line-height: 1.4; }
  .bs-sig svg { width: 4.2rem; }
  .bs-sig b { font: 800 1.1rem/1.1 var(--mb-font-display); display: block; }
  .bs-sig a { color: var(--mb-thread); }
  .bs-sig__line { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mb-thread) 30%, var(--mb-pink) 30% 60%, var(--mb-lavender) 60%); }
  /* Badge */
  .bs-badge { aspect-ratio: 100 / 140; background: var(--mb-paper); color: var(--mb-plum); border-radius: 4cqw; }
  .bs-badge__hole { position: absolute; left: 50%; top: 5cqw; width: 18cqw; height: 4cqw; transform: translateX(-50%); border-radius: 99px; background: var(--mb-bg); box-shadow: inset 0 0 0 .6cqw var(--mb-line); background: #fff; }
  .bs-badge__arch { position: absolute; left: 10cqw; right: 10cqw; top: 15cqw; height: 54cqw; border-radius: 999px 999px 4cqw 4cqw; background: var(--mb-hot); display: grid; place-items: center; overflow: hidden; }
  .bs-badge__arch svg { width: 64%; }
  .bs-badge__name { position: absolute; left: 9cqw; right: 9cqw; top: 76cqw; font: 900 10cqw/.9 var(--mb-font-display); letter-spacing: -.045em; margin: 0; }
  .bs-badge__role { position: absolute; left: 9cqw; bottom: 9cqw; padding: 2cqw 4cqw; border-radius: 99px; background: var(--mb-thread); color: #fff; font: 800 4.4cqw/1 var(--mb-font-display); }
  .bs-badge__event { position: absolute; right: 9cqw; bottom: 9cqw; font: 600 3cqw/1.2 var(--mb-font-text); text-align: right; max-width: 40cqw; }
  .bs-wpflow { display: grid; gap: 0; margin: 0; padding: 0; }
  @media (min-width: 900px) { .bs-wpflow { grid-template-columns: repeat(4, 1fr); } }
  .bs-wpflow li { list-style: none; padding: 1.5rem; border-top: 3px solid var(--mb-thread); display: grid; gap: .5rem; align-content: start; }
  .bs-wpflow h3 { font-size: var(--mb-step-1); margin: 0; }
  .bs-wpflow p { margin: 0; font-size: var(--mb-step--1); }
  .bs-layers { display: grid; gap: .4rem; }
  .bs-layers > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: 14px; font-weight: 600; font-size: var(--mb-step--1); }
  .bs-layers code { background: transparent; padding: 0; }
  .bs-templates { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  .bs-templates li { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--mb-line); }
  .bs-templates li svg { width: 1.4rem; margin-top: .2rem; }

  /* ---------- APPS ---------- */
  .bs-principle-big { font: 900 var(--mb-step-6)/.82 var(--mb-font-display); letter-spacing: var(--mb-track-poster); margin: 0; }
  .bs-principle-big span { display: block; }
  .bs-principle-big s { text-decoration-color: var(--mb-thread); text-decoration-thickness: .08em; color: color-mix(in srgb, var(--mb-plum) 45%, transparent); }
  .bs-apps { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .bs-apps { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); } }
  .bs-app { position: relative; display: grid; align-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--mb-radius-lg); text-decoration: none; color: var(--mb-plum); overflow: hidden; isolation: isolate; min-height: 17rem;
    transition: transform var(--mb-dur-3) var(--mb-ease-out), border-radius var(--mb-dur-4) var(--mb-ease-silk); }
  .bs-app:hover { color: var(--mb-plum); transform: translateY(-4px); border-radius: var(--mb-radius-lg) var(--mb-radius-lg) 90px var(--mb-radius-lg); }
  .bs-app h3 { font-size: var(--mb-step-3); margin: 0; max-width: 14ch; }
  .bs-app p { margin: 0; max-width: 36ch; }
  .bs-app__q { font: 500 italic var(--mb-step-1)/1.25 var(--mb-font-display); }
  .bs-app__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; font: 700 var(--mb-step--1)/1.2 var(--mb-font-text); }
  .bs-app__status { padding: .4em .7em; border-radius: 99px; background: color-mix(in srgb, var(--mb-paper) 75%, transparent); }
  .bs-app--unbound { background: var(--mb-cream); }
  .bs-app--unbound img { position: absolute; right: -24%; bottom: -6%; height: 106%; width: auto; max-width: none; z-index: -1; opacity: .95; }
  .bs-app--unbound .bs-app__body { max-width: 56%; position: relative; }
  @media (min-width: 900px) { .bs-app--cv { grid-column: span 7; } .bs-app--unbound { grid-column: span 5; grid-row: span 2; } .bs-app--tpd { grid-column: span 4; } .bs-app--babies { grid-column: span 3; } .bs-app--book { grid-column: span 12; } }
  .bs-anatomy { display: grid; gap: 1.5rem; }
  @media (min-width: 960px) { .bs-anatomy { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; } }
  .bs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
  .bs-steps button { width: 100%; display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: start; text-align: left; padding: 1rem 1.1rem; border: 0; border-radius: var(--mb-radius); background: transparent; color: var(--mb-ink); font: inherit; cursor: pointer; transition: background var(--mb-dur-2); }
  .bs-steps button:hover { background: var(--mb-surface); }
  .bs-steps button[aria-pressed="true"] { background: var(--mb-surface); box-shadow: inset 4px 0 0 var(--mb-thread); }
  .bs-steps b { display: block; font: 800 var(--mb-step-1)/1.1 var(--mb-font-display); margin-bottom: .25rem; }
  .bs-steps span.bs-steps__t { color: var(--mb-ink-soft); font-size: var(--mb-step--1); }
  .bs-steps svg { width: 1.6rem; margin-top: .1rem; }
  .bs-steps svg path { fill: none; stroke: var(--mb-ink); stroke-width: 2.2; stroke-linecap: round; opacity: .3; transition: opacity var(--mb-dur-2), stroke var(--mb-dur-2); }
  .bs-steps button.is-done svg path, .bs-steps button[aria-pressed="true"] svg path { opacity: 1; stroke: var(--mb-thread); }
  .bs-phone { position: sticky; top: 6rem; width: 100%; max-width: 340px; margin-inline: auto; aspect-ratio: 9 / 15; border-radius: 42px; background: var(--mb-plum); padding: 10px; box-shadow: var(--mb-shadow-lift); }
  @media (max-width: 959px) { .bs-phone { order: -1; position: relative; top: 0; max-width: 290px; aspect-ratio: 9 / 13; } }
  .bs-phone__screen { width: 100%; height: 100%; border-radius: 33px; background: var(--mb-paper); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
  .bs-phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem .6rem; }
  .bs-phone__bar svg.mb-monogram { width: 2.2rem; }
  .bs-phone__view { padding: .6rem 1.1rem 1.2rem; display: grid; align-content: start; gap: .8rem; overflow: hidden; }
  .bs-phone__view > * { animation: bs-in var(--mb-dur-3) var(--mb-ease-out) both; }
  @keyframes bs-in { from { opacity: 0; transform: translateY(10px); } }
  .bs-phone h4 { font-size: 1.6rem; margin: 0; }
  .bs-phone .mb-stat__num { font-size: 4rem; }
  .bs-phone .mb-chip { font-size: .85rem; }
  .bs-phone .mb-knots li { width: 15px; height: 15px; }
  .bs-sources { font-size: .8rem; display: grid; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-menu, .bs-menu__list li { transition: none !important; }
  .bs-menu__list li { opacity: 1; transform: none; }
  .bs-menu__thread path { stroke-dashoffset: 0; }
  .bs-story__hint i { animation: none; }
  .bs-phone__view > * { animation: none; }
}

/* Menu row with Home and the EN | UA switch (decision 0011). */
.bs-menu__home { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }