/* Homepage and shared signature components: the Round, the people rail, the Leak, the Brand Switcher. */

/* ---------- Hero ---------- */
.h-home { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(56px, 6vw, 96px); }
.h-home__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); gap: clamp(32px, 4.5vw, 76px); align-items: center; }
@media (max-width: 1020px) { .h-home__grid { grid-template-columns: minmax(0, 1fr); } }
.h-home__copy { display: grid; gap: 22px; justify-items: start; }
.h-home .strike { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing: -.015em; line-height: 1; margin-bottom: -6px; }
.h-home .h-hero { font-size: clamp(2.7rem, 1.2rem + 4.6vw, 5.2rem); }
.h-home .lede { max-width: 50ch; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; padding-top: 22px; margin-top: 6px; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 4px; align-content: start; }
.facts b { font-family: var(--f-display); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.facts span { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts li { grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; } }

/* ---------- The Round (live speed-networking stage) ---------- */
.round { --pad: clamp(12px, 1.5vw, 18px); position: relative; isolation: isolate; margin: 0; border-radius: var(--r-xl); background: var(--stage); color: var(--stage-ink); border: 1px solid var(--stage-line); box-shadow: var(--shadow-lg); padding: var(--pad); display: grid; gap: var(--pad); }
.round__top { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--t-xs); color: var(--stage-ink-2); }
.round__ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--stage-ink); }
.round__ev small { font-weight: 500; color: var(--stage-ink-3); }
.round__sp { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--stage-line); font-family: var(--f-mono); font-size: 11.5px; color: var(--stage-ink-2); white-space: nowrap; flex: none; }
.pill b { color: var(--stage-ink); font-weight: 500; }
.pill--live { background: rgba(255, 92, 80, .14); border-color: rgba(255, 92, 80, .35); color: #ffb3ab; font-weight: 500; letter-spacing: .04em; }
.pill--live .live-dot, .pill--live .live-dot::after { background: #ff5c50; border-color: #ff5c50; }
.pill--live .live-dot::after { background: none; }
.tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vt { position: relative; aspect-ratio: 4 / 4.4; border-radius: 18px; overflow: hidden; background: var(--stage-3); border: 1px solid var(--stage-line); }
.vt video, .vt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.vt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 56%, rgba(5, 4, 11, .8)); }
.vt.is-speaking { box-shadow: 0 0 0 2px var(--mint-bright); border-color: transparent; }
.vt img { transition: opacity .5s var(--ease); }
.vt__tag { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
.vt__tag span { min-width: 0; display: grid; line-height: 1.3; }
.vt__tag b { font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt__tag small { font-size: .72rem; color: var(--stage-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; width: 18px; flex: none; padding: 3px; box-sizing: content-box; border-radius: 7px; background: rgba(0, 255, 198, .16); }
.eq i { width: 3px; border-radius: 2px; background: var(--mint-bright); height: 40%; animation: eq 1s var(--ease) infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.35s; } .eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0% { height: 25%; } 50% { height: 100%; } 100% { height: 45%; } }
.vt--you .eq { background: rgba(255,255,255,.1); } .vt--you .eq i { background: var(--stage-ink-3); animation: none; height: 30%; }
.clock { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -62%); width: clamp(88px, 10vw, 118px); aspect-ratio: 1; border-radius: 50%; background: rgba(11, 10, 22, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 6px var(--stage), 0 18px 40px -10px rgba(0,0,0,.7); display: grid; place-items: center; }
.clock svg { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); transform: rotate(-90deg); overflow: visible; }
.clock .track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; }
.clock .bar { fill: none; stroke: var(--mint-bright); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .4s; }
.clock.is-low .bar { stroke: #ffb547; }
.clock__t { position: relative; text-align: center; line-height: 1.05; }
.clock__t b { display: block; font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: clamp(1.1rem, .8rem + .9vw, 1.5rem); letter-spacing: -.03em; color: var(--stage-ink); font-variant-numeric: tabular-nums; direction: ltr; }
.clock__t small { font-size: 9.5px; font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stage-ink-3); }
.ice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(123, 82, 255, .14); border: 1px solid rgba(160, 135, 255, .34); }
.ice__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(160, 135, 255, .2); color: #cdbfff; }
.ice__ico svg { width: 19px; height: 19px; }
.ice__k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #b9a6ff; }
.ice__q { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.02rem, .92rem + .45vw, 1.25rem); letter-spacing: -.01em; line-height: 1.3; color: var(--stage-ink); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ice__q.is-out { opacity: 0; transform: translateY(6px); }
.ice__btn { height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--stage-line); background: rgba(255,255,255,.06); color: var(--stage-ink-2); font-size: .8rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.ice__btn:hover { color: var(--stage-ink); border-color: var(--stage-ink-3); }
.ice__btn svg { width: 14px; height: 14px; }
@media (max-width: 520px) { .ice { grid-template-columns: auto minmax(0, 1fr); } .ice__btn { grid-column: 1 / -1; justify-self: start; } }
.rstrip { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 2px 4px; font-size: var(--t-xs); color: var(--stage-ink-2); }
.segs { display: flex; gap: 6px; list-style: none; }
.segs li { position: relative; width: 40px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.segs li.done { background: var(--stage-ink-3); }
.segs li.now::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0%); background: var(--mint-bright); border-radius: inherit; transition: width 1s linear; }
.rstrip b { color: var(--stage-ink); font-weight: 600; }
.swap { position: absolute; inset: 0; z-index: 5; border-radius: inherit; display: grid; place-items: center; text-align: center; background: rgba(5, 4, 11, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.swap.is-on { opacity: 1; }
.swap b { display: block; font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; }
.swap small { color: var(--stage-ink-2); font-size: var(--t-sm); }
.swap .dots { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.swap .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-bright); animation: bob 1s var(--ease) infinite; }
.swap .dots i:nth-child(2) { animation-delay: .15s; } .swap .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 50% { transform: translateY(-6px); opacity: .5; } }
.round-note { margin-top: 12px; font-size: var(--t-xs); color: var(--ink-3); }
/* Fast-forward: the clock and round bar step every 100ms, so their easing shortens to match. */
.round.is-ff .clock .bar, .round.is-ff .segs li.now::after { transition-duration: .1s; }
.ff { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--mint-bright); background: rgba(0, 255, 198, .1); border: 1px solid rgba(0, 255, 198, .28); white-space: nowrap; }
.ff svg { width: 11px; height: 11px; fill: currentColor; }
.round.is-paused .ff { color: var(--stage-ink-3); background: rgba(255,255,255,.05); border-color: var(--stage-line); }
.round__pp { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--stage-line); background: rgba(255,255,255,.06); color: var(--stage-ink-2); cursor: pointer; }
.round__pp:hover { color: var(--stage-ink); border-color: var(--stage-ink-3); }
.round__pp svg { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.round__pp .i-pause { fill: none; }
.round__pp .i-play, .round.is-paused .round__pp .i-pause { display: none; }
.round.is-paused .round__pp .i-play { display: block; stroke: none; }
/* Round on phones: names wrap, the clock shrinks under 420px. */
@media (max-width: 560px) {
  .round .round__ev { white-space: normal; overflow: visible; line-height: 1.25; }
  .round .round__top { flex-wrap: wrap; row-gap: 6px; }
  .round .vt__tag b, .round .vt__tag small { white-space: normal; overflow: visible; }
  .round .vt__tag small { font-size: .68rem; }
}
@media (max-width: 420px) {
  .round .clock { width: 64px; transform: translate(-50%, -78%); box-shadow: 0 0 0 4px var(--stage), 0 10px 24px -8px rgba(0,0,0,.7); }
  .round .clock svg { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .round .clock__t b { font-size: .86rem; }
  .round .clock__t small { display: none; }
  .round .ice__q { font-size: .9rem; }
}
.rstrip__l { display: inline-flex; align-items: center; gap: 14px; }
.met { white-space: nowrap; }
.met b { display: inline-block; min-width: 1ch; color: var(--mint-bright); font-variant-numeric: tabular-nums; }
.met b.is-bump { animation: bump .6s var(--ease); }
@keyframes bump { 35% { transform: scale(1.6); } }
.saved { position: absolute; inset: 0; z-index: 5; border-radius: inherit; display: grid; place-items: center; padding: var(--pad); background: rgba(5, 4, 11, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.saved.is-on { opacity: 1; }
.saved__card { display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 100%; padding: 14px 20px 14px 14px; border-radius: 18px; background: var(--stage-2); border: 1px solid rgba(0, 255, 198, .34); box-shadow: 0 20px 50px rgba(0,0,0,.45); transform: translateY(14px) scale(.94); transition: transform .5s var(--ease); }
[dir="rtl"] .saved__card { padding: 14px 14px 14px 20px; }
.saved.is-on .saved__card { transform: none; }
.saved__card > span:last-child { display: grid; gap: 2px; min-width: 0; }
.saved__card small { font-size: var(--t-xs); color: var(--mint-bright); }
.saved__card b { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved__face { position: relative; flex: none; width: 56px; height: 56px; }
.saved__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 28%; }
.saved__face i { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-bright); color: #05040b; border: 2px solid var(--stage-2); }
.saved__face svg { width: 13px; height: 13px; }
.rsteps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.rsteps button { width: 100%; display: grid; gap: 3px; padding: 0 0 2px; border: 0; background: none; color: var(--ink-3); text-align: start; font: inherit; cursor: pointer; }
.rsteps__bar { position: relative; height: 3px; margin-bottom: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rsteps__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0%); border-radius: inherit; background: var(--violet); transition: width .1s linear; }
.rsteps b { font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); }
.rsteps small { font-size: var(--t-xs); line-height: 1.4; }
.rsteps .is-now b { color: var(--ink); }
.rsteps button:hover b { color: var(--ink); }
.rsteps button:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 480px) { .rsteps small { display: none; } .ff { display: none; } }

/* ---------- Real people ---------- */
.experts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1020px) { .experts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .experts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.expert { position: relative; display: block; aspect-ratio: 3 / 3.9; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; background: var(--surface-2); isolation: isolate; }
.expert img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); z-index: -1; }
.expert::after { content: ""; position: absolute; inset: 40% 0 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(8, 6, 20, .86)); }
.expert:hover img { transform: scale(1.05); }
.expert__txt { position: absolute; inset-inline: 14px; bottom: 13px; display: grid; gap: 2px; }
.expert__txt b { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.01em; }
.expert__txt small { font-size: .78rem; opacity: .82; }
.expert:nth-child(even) { transform: translateY(22px); }
@media (max-width: 520px) { .expert:nth-child(even) { transform: none; } }
.comms { display: flex; flex-wrap: wrap; gap: 12px; }
.comm { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
[dir="rtl"] .comm { padding: 8px 8px 8px 16px; }
.comm:hover { border-color: var(--line-2); transform: translateY(-2px); }
.comm img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.comm b { display: block; font-size: .92rem; font-weight: 650; line-height: 1.2; }
.comm small { display: block; font-size: .75rem; color: var(--ink-3); }
/* Community cards (homepage): real cover, icon, organizer and member count from each public community page. */
.ccards__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 18px; }
.ccards__h { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.015em; }
.ccards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ccard { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.ccard:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.ccard:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.ccard__cover { display: block; aspect-ratio: 12 / 5; background: var(--bg-2); overflow: hidden; }
.ccard__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ccard:hover .ccard__cover img { transform: scale(1.04); }
.ccard__body { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 30px 14px 14px; }
.ccard__icon { position: absolute; top: -24px; inset-inline-start: 12px; width: 48px; height: 48px; border-radius: 13px; object-fit: cover; background: var(--surface); border: 3px solid var(--surface); box-shadow: 0 4px 12px rgba(20, 14, 60, .14); }
.ccard__name { font-size: .98rem; font-weight: 650; line-height: 1.25; }
.ccard__meta { font-size: var(--t-xs); color: var(--ink-3); }
.ccard__host { display: flex; align-items: center; gap: 7px; margin-top: 8px; margin-bottom: 12px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.3; min-width: 0; }
.ccard__host img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ccard__host b { color: var(--ink-2); font-weight: 600; }
.ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); }
.ccard__foot b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.ccard__go { display: inline-flex; align-items: center; gap: 4px; color: var(--violet-ink); font-weight: 600; }
.ccard__go svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
[dir="rtl"] .ccard__go svg { transform: scaleX(-1); }
.ccard:hover .ccard__go svg { transform: translateX(3px); }
[dir="rtl"] .ccard:hover .ccard__go svg { transform: scaleX(-1) translateX(3px); }
@media (max-width: 1100px) { .ccards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; } .ccard { scroll-snap-align: start; } }
@media (max-width: 480px) { .ccards { grid-auto-columns: 78%; } }
.people-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }

/* ---------- Editorial statement ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
@media (max-width: 900px) { .statement { grid-template-columns: minmax(0, 1fr); } }
.statement .h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); }
.pains { display: grid; gap: 22px; }
.pain { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pain b { font-weight: 650; font-size: 1.04rem; }
.pain p { color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- The Leak: see "Leak v2" (.drop) below; the old canvas Leak (.leak) is retired ---------- */

/* ---------- Bento of the product ---------- */
.pt { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .3s var(--ease); }
.pt:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-3px); }
.pt__txt { display: grid; gap: 8px; padding: 24px 26px 20px; }
.pt__txt h3 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.012em; }
.pt__txt p { color: var(--ink-2); font-size: var(--t-sm); max-width: 48ch; }
.pt__media { position: relative; background: var(--stage); border-top: 1px solid var(--line); align-self: end; overflow: hidden; }
.pt__media video, .pt__media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mini-tags span { font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft, var(--surface-2)); color: var(--accent, var(--ink-2)); }
[lang="ar"] .mini-tags span { font-size: .78rem; }

/* ---------- Annotated product frame ---------- */
.annot { position: relative; }
.annot .note { position: absolute; z-index: 2; }

/* ---------- Brand Switcher (B2B) ---------- */
.bsw { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 960px) { .bsw { grid-template-columns: minmax(0, 1fr); } }
.bsw__controls { display: grid; gap: 18px; }
.bsw__field { display: grid; gap: 8px; }
.bsw__field label { font-size: var(--t-xs); font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stage-ink-3); }
[lang="ar"] .bsw__field label { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.bsw__input { width: 100%; height: 54px; border-radius: 14px; border: 1px solid var(--stage-line); background: rgba(255,255,255,.05); color: var(--stage-ink); padding: 0 16px; font: inherit; font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; }
.bsw__input::placeholder { color: var(--stage-ink-3); }
.bsw__input:focus { outline: none; border-color: var(--mint-bright); box-shadow: 0 0 0 3px rgba(0, 255, 198, .15); }
.bsw__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bsw__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--stage-line); background: transparent; color: var(--stage-ink-2); cursor: pointer; font-size: .86rem; font-weight: 600; }
[dir="rtl"] .bsw__chip { padding: 0 8px 0 14px; }
.bsw__chip i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.bsw__chip[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }
.bsw__stage { position: relative; }
.bsw__frame { --brand: #5a2ee0; border-radius: 16px; overflow: hidden; background: var(--stage-2); border: 1px solid var(--stage-line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.bsw__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: var(--stage-3); border-bottom: 1px solid var(--stage-line); }
.bsw__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--stage-line); flex: none; }
.bsw__url { flex: 1; min-width: 0; max-width: 420px; height: 24px; border-radius: 7px; background: var(--stage); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--stage-ink-2); overflow: hidden; white-space: nowrap; direction: ltr; margin-inline-start: 8px; }
.bsw__url em { font-style: normal; color: var(--stage-ink); }
.bsw__url [data-url] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsw__url svg { width: 11px; height: 11px; color: var(--mint-bright); flex: none; }
.bsw__tab { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 8px 8px 0 0; background: var(--stage-2); font-size: 11.5px; color: var(--stage-ink-2); align-self: end; max-width: 180px; overflow: hidden; white-space: nowrap; }
/* Under 480px a browser bar that carries an address drops its tab, so the address (the brand's own domain) reads whole. */
@media (max-width: 480px) { .bsw__tab:has(+ .bsw__url) { display: none; } .bsw__tab + .bsw__url { margin-inline-start: 4px; max-width: none; } }
.bsw__fav { width: 14px; height: 14px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 8px; font-weight: 800; display: grid; place-items: center; flex: none; font-family: var(--f-brand); }
.bsw__shots { position: relative; aspect-ratio: 16 / 10; background: var(--stage); }
.bsw__shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .5s var(--ease); }
.bsw__shots img:not(.is-on) { opacity: 0; }
.bsw__mark { position: absolute; top: 14px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 7px; padding-inline-end: 12px; border-radius: 12px; background: rgba(255,255,255,.96); color: #12101f; box-shadow: 0 8px 24px -8px rgba(0,0,0,.35); font-family: var(--f-brand); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; max-width: 70%; }
.bsw__mark span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsw__mono { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .82rem; flex: none; transition: background-color .4s; }
.bsw__caption { margin-top: 14px; display: flex; gap: 10px 20px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--stage-ink-3); }
.bsw__caption b { color: var(--stage-ink-2); font-weight: 600; }
.everywhere { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
@media (max-width: 900px) { .everywhere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ew { display: grid; gap: 10px; align-content: start; }
.ew__img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--stage-line); background: var(--stage-2); }
.ew__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ew b { font-size: .9rem; color: var(--stage-ink); font-weight: 650; }
.ew small { font-size: .8rem; color: var(--stage-ink-3); line-height: 1.45; }

/* ---------- Numbers ---------- */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
@media (max-width: 760px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nums > div { padding: 30px 22px 26px; display: grid; gap: 8px; border-inline-end: 1px solid var(--line); }
.nums > div:last-child { border-inline-end: 0; }
.nums b { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); line-height: .95; letter-spacing: -.025em; font-variant-numeric: lining-nums; }
.nums span { font-size: var(--t-sm); color: var(--ink-3); }
.nums-note { margin-top: 12px; font-size: var(--t-xs); color: var(--ink-4); }

/* ---------- Audience picker ---------- */
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); gap: 1px; }
@media (max-width: 900px) { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aud { grid-template-columns: minmax(0, 1fr); } }
.aud a { background: var(--surface); padding: 26px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; text-decoration: none; transition: background-color .2s; }
.aud a:hover { background: var(--surface-2); }
.aud b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em; }
.aud small { display: block; color: var(--ink-3); font-size: .86rem; line-height: 1.45; margin-top: 2px; }
.aud .go { width: 18px; height: 18px; color: var(--ink-4); transition: transform .2s var(--ease), color .2s; }
.aud a:hover .go { color: var(--violet); transform: translateX(3px); }
[dir="rtl"] .aud .go { transform: scaleX(-1); }
[dir="rtl"] .aud a:hover .go { transform: scaleX(-1) translateX(3px); }

/* ---------- Arabic band ---------- */
.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.langs span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .86rem; color: var(--ink-2); }

/* closing */
.closing .strike { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); color: rgba(244,242,255,.45); }
.closing h2 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem); }
.bsw__controls > .strike, .stack > .strike, .sec-head > .strike { justify-self: start; }

/* ---------- Homepage v5: audience chips, problem, drop, tabs, certificate, personas, languages ---------- */
.role-chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; align-self: start; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: .84rem; font-weight: 650; }
[dir="rtl"] .role-chip { padding: 0 10px 0 14px; }
.role-chip svg { width: 16px; height: 16px; }
.role-chip--stage { background: rgba(0, 255, 198, .1); color: var(--mint-bright); border: 1px solid rgba(0, 255, 198, .26); }

.prob__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .prob__grid { grid-template-columns: minmax(0, 1fr); } }
.prob__card { margin: 0; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.prob__card figcaption { display: grid; gap: 6px; align-content: start; padding: 22px 24px 24px; }
.prob__card figcaption b { font-family: var(--f-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.012em; }
.prob__card figcaption p { color: var(--ink-2); font-size: var(--t-sm); }
.role { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-live); }
[lang="ar"] .role { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: .82rem; font-weight: 600; }
.prob__vis { position: relative; height: 210px; background: var(--bg-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.prob__reqs { position: absolute; inset: 22px 22px auto; display: grid; gap: 8px; }
.req { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); opacity: .9; }
.req:nth-child(2) { opacity: .65; } .req:nth-child(3) { opacity: .4; }
.req i { width: 34px; height: 34px; border-radius: 50%; background: var(--line-2); }
.req > span { display: grid; gap: 6px; } .req b { display: block; width: 58%; height: 8px; border-radius: 4px; background: var(--line-2); } .req small { display: block; width: 36%; height: 6px; border-radius: 3px; background: var(--line); }
.req em { font-style: normal; font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-3); }
.prob__tally { position: absolute; inset-inline: 22px; bottom: 16px; display: flex; gap: 10px; justify-content: flex-end; }
.prob__tally span { display: grid; gap: 0; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); box-shadow: var(--shadow-sm); }
.prob__tally b { font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; line-height: 1.05; color: var(--ink); }
.prob__tally .is-zero b { color: var(--c-live); }
.prob__vis--tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 22px; align-content: center; }
.prob__vis--tools > span { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.prob__vis--tools > span:nth-child(odd) { transform: rotate(-2deg); } .prob__vis--tools > span:nth-child(even) { transform: rotate(1.5deg) translateY(4px); }
.prob__vis--tools svg { width: 22px; height: 22px; }
.prob__vis--tools small { font-size: .72rem; color: var(--ink-3); }
.prob__lock { position: absolute; top: -7px; inset-inline-end: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c-live); color: #fff; box-shadow: 0 0 0 3px var(--bg-2); }
.prob__lock svg { width: 12px; height: 12px; }

.drop { display: grid; gap: 28px; }
.drop__row { display: grid; gap: 12px; }
.drop__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.drop__label b { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--stage-ink); }
.drop__label span { font-size: var(--t-xs); color: var(--stage-ink-3); }
.drop__cols { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); border-radius: 18px; border: 1px solid var(--stage-line); background: var(--stage-2); overflow: hidden; }
.drop__row--one .drop__cols { border-color: rgba(0, 255, 198, .35); background: linear-gradient(90deg, rgba(0, 255, 198, .07), rgba(0, 255, 198, .03)); }
.drop__cols li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 8px 14px; border-inline-end: 1px dashed rgba(255, 255, 255, .1); min-width: 0; }
.drop__cols li:last-child { border-inline-end: 0; }
.drop__row--one .drop__cols li { border-inline-end-style: solid; border-color: rgba(0, 255, 198, .1); }
.drop__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--stage-ink-2); }
.drop__row--one .drop__ico { background: rgba(0, 255, 198, .12); color: var(--mint-bright); }
.drop__ico svg { width: 17px; height: 17px; }
.drop__cols b { font-size: .8rem; font-weight: 650; color: var(--stage-ink); text-align: center; line-height: 1.25; }
.drop__cols small { margin-top: -4px; font-size: .7rem; line-height: 1.3; color: var(--stage-ink-3); text-align: center; }
.drop__dots { display: grid; grid-template-columns: repeat(4, 18px); gap: 4px; height: calc(6 * 18px + 5 * 4px); align-content: end; }
.drop__dots i { width: 18px; height: 18px; border-radius: 50%; background: #2a2640 center / cover no-repeat; box-shadow: 0 0 0 1.5px #c9c1ff; transition: transform .8s var(--ease), opacity .8s var(--ease), filter .3s, box-shadow .3s; }
.drop__row--one .drop__dots i { box-shadow: 0 0 0 1.5px var(--mint-bright); }
.drop__dots i.is-out { filter: grayscale(1) brightness(.7); box-shadow: 0 0 0 1.5px #ff7b6e; transform: translateY(34px) rotate(-12deg); opacity: 0; }
.drop__n { font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--stage-ink); font-variant-numeric: tabular-nums; }
.drop__row--one .drop__n { color: var(--mint-bright); }
.drop__note { color: var(--stage-ink-3); }
@media (max-width: 700px) {
  .drop__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drop__cols li:nth-child(3) { border-inline-end: 0; }
  .drop__cols li:nth-child(-n+3) { border-bottom: 1px dashed rgba(255, 255, 255, .1); }
}
/* Leak option: .drop--four keeps four steps on one row on phones (smaller faces and gates). Columns follow --n (default 6). */
.drop--four .drop__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .drop--four .drop__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .drop--four .drop__cols li { border-bottom: 0 !important; padding: 12px 4px 10px; }
  .drop--four .drop__row--bad .drop__cols li:nth-child(3) { border-inline-end: 2px solid rgba(255, 123, 110, .55); }
  .drop--four .drop__row--bad .drop__cols li:last-child { border-inline-end: 0; }
  .drop--four .drop__cols b { font-size: .72rem; }
  .drop--four .drop__dots { grid-template-columns: repeat(4, 14px); gap: 3px; height: calc(6 * 14px + 5 * 3px); }
  .drop--four .drop__dots i { width: 14px; height: 14px; }
  .drop--four .drop__flow > i { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .drop--four .drop__gate { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .drop--four .drop__label b { font-size: 1.15rem; }
}

.htabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .htabs { grid-template-columns: minmax(0, 1fr); } }
.htabs__list { display: grid; gap: 6px; }
.htabs__list button { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .2s, border-color .2s; }
.htabs__list button:hover { background: var(--surface); }
.htabs__list button[aria-selected="true"] { background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.htabs__list button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.htabs__list b { display: block; font-size: 1rem; font-weight: 650; }
.htabs__list small { display: block; font-size: .84rem; color: var(--ink-3); line-height: 1.4; }
.htabs__list button[aria-selected="true"] small { color: var(--ink-2); }
/* Tabs on phones and tablets: one scrollable row of pills. */
.tp__media .crop { aspect-ratio: 16 / 10; }
.tp__txt .btn { margin-top: 6px; }
.htabs__list b { line-height: 1.3; }
@media (max-width: 900px) {
  .htabs__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut, 16px)); padding: 2px var(--gut, 16px) 6px; scroll-padding-inline: var(--gut, 16px); }
  .htabs__list::-webkit-scrollbar { display: none; }
  .htabs__list button { flex: none; width: auto; grid-template-columns: 30px auto; gap: 8px; min-height: 48px; padding: 8px 16px 8px 10px; border-radius: 999px; border-color: var(--line-2); background: var(--surface); }
  [dir="rtl"] .htabs__list button { padding: 8px 10px 8px 16px; }
  .htabs__list button .icon-tile { width: 30px; height: 30px; border-radius: 9px; }
  .htabs__list button .icon-tile svg { width: 16px; height: 16px; }
  .htabs__list small { display: none; }
  .htabs__list b { font-size: .92rem; white-space: nowrap; }
  .htabs__list button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .tp__txt { padding: 18px 18px 22px; }
  .tp__txt h3 { font-size: 1.35rem; }
}
.tp { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tp__media { position: relative; background: var(--stage); }
.tp__media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.tp__txt { display: grid; gap: 10px; justify-items: start; padding: 22px 26px 26px; }
.tp__txt h3 { font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.012em; }
.tp__txt p { color: var(--ink-2); font-size: var(--t-sm); max-width: 58ch; }
.js .tp:not([hidden]) { animation: tpIn .45s var(--ease); }
@keyframes tpIn { from { opacity: 0; transform: translateY(8px); } }

/* Certificate artwork: a custom design with the BrainsMingle mark (the product renders client-branded ones). */
.cert-art { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: clamp(14px, 3vw, 34px); background: radial-gradient(120% 90% at 20% 0%, #2a1f6b, #0d0b1c 70%); }
.cert-art__paper { --ink-c: #1b1733; position: relative; width: min(100%, 560px); display: grid; justify-items: center; gap: 4px; padding: clamp(16px, 3vw, 30px) clamp(16px, 3.4vw, 36px) clamp(14px, 2.4vw, 22px); border-radius: 6px; color: var(--ink-c); text-align: center;
  background: radial-gradient(circle at 50% 120%, rgba(90, 46, 224, .08), transparent 60%), repeating-radial-gradient(circle at 50% 50%, rgba(90, 46, 224, .045) 0 1px, transparent 1px 7px), #fbf8f1;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(27, 23, 51, .08), inset 0 0 0 7px #fbf8f1, inset 0 0 0 8px rgba(90, 46, 224, .35); }
.cert-art__top { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-bottom: clamp(6px, 1.4vw, 14px); }
.cert-art__brand { display: inline-flex; align-items: center; gap: 7px; font-family: Montserrat, var(--f-body); font-weight: 800; font-size: clamp(.7rem, .6rem + .3vw, .86rem); letter-spacing: -.01em; color: #1b1733; }
.cert-art__brand img { width: clamp(18px, 2.2vw, 24px); height: auto; }
.cert-art__no { font-family: "JetBrains Mono", monospace; font-size: clamp(.5rem, .45rem + .2vw, .64rem); letter-spacing: .08em; color: #6b6585; }
.cert-art__k { font-family: "JetBrains Mono", monospace; font-size: clamp(.5rem, .44rem + .25vw, .68rem); letter-spacing: .24em; text-transform: uppercase; color: #5a2ee0; }
.cert-art__name { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; }
.cert-art__for { font-size: clamp(.6rem, .55rem + .2vw, .76rem); color: #6b6585; margin-top: 2px; }
.cert-art__course { font-family: var(--f-display); font-weight: 700; font-size: clamp(.9rem, .75rem + .7vw, 1.3rem); line-height: 1.2; max-width: 26ch; }
.cert-art__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; width: 100%; margin-top: clamp(8px, 1.8vw, 18px); }
.cert-art__foot span { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid rgba(27, 23, 51, .25); font-size: clamp(.55rem, .5rem + .2vw, .72rem); }
.cert-art__foot b { font-weight: 650; } .cert-art__foot small { color: #6b6585; font-size: .9em; }
.cert-art__seal { width: clamp(42px, 6vw, 64px); height: auto; }
.cert-art__seal circle { fill: none; } .cert-art__seal .r1 circle { stroke: #5a2ee0; stroke-width: 6; stroke-dasharray: 2 4; }
.cert-art__seal .r2 { fill: #5a2ee0; } .cert-art__seal .tick { fill: none; stroke: #00e6b0; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.cert-art__verify { margin-top: clamp(6px, 1.2vw, 12px); font-family: "JetBrains Mono", monospace; font-size: clamp(.48rem, .44rem + .18vw, .62rem); color: #6b6585; }

.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .who { grid-template-columns: minmax(0, 1fr); } }
.who__card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px 16px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
[dir="rtl"] .who__card { padding: 16px 16px 16px 18px; }
.who__card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow); }
.who__card img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; object-position: 50% 25%; }
.who__txt { display: grid; gap: 2px; min-width: 0; }
.who__txt small { font-size: var(--t-xs); color: var(--ink-3); }
.who__txt b { font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em; line-height: 1.15; }
.who__q { font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.who__card .go { width: 18px; height: 18px; color: var(--ink-4); transition: transform .2s var(--ease), color .2s; }
.who__card:hover .go { color: var(--violet); transform: translateX(3px); }
[dir="rtl"] .who__card .go { transform: scaleX(-1); }
[dir="rtl"] .who__card:hover .go { transform: scaleX(-1) translateX(3px); }
.who__suite { margin-top: 18px; font-size: var(--t-sm); color: var(--ink-3); }

.langband { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .langband { grid-template-columns: minmax(0, 1fr); } }
/* The room (match phase): the whole event pairing up at once. */
.swap--room { place-items: stretch; background: rgba(5, 4, 11, .94); }
.swap--room canvas { position: absolute; inset: 8% 6% 34%; width: 88%; height: 58%; }
.swap__txt { position: absolute; inset-inline: 0; bottom: 20%; display: grid; gap: 4px; justify-items: center; padding: 0 16px; }
.swap__txt b { font-size: 1.35rem; }
.swap__match { margin-top: 6px; padding: 6px 14px; border-radius: 999px; font-size: var(--t-sm); font-weight: 600; color: var(--stage-ink-2); border: 1px solid var(--stage-line); transition: color .3s, background .3s, border-color .3s; }
.swap__match.is-on { color: #05040b; background: var(--mint-bright); border-color: transparent; }
.swap__legend { position: absolute; inset-inline: 0; bottom: 6%; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 0 16px; font-size: .72rem; color: var(--stage-ink-3); }
.swap__legend li { display: inline-flex; align-items: center; gap: 6px; }
.swap__legend li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (max-width: 480px) { .swap__txt b { font-size: 1.1rem; } .swap__legend { font-size: .66rem; gap: 4px 10px; } }
.req em::after { content: attr(data-l); }
/* Brand wall: four real surfaces re-skinned together (community, phone, certificate, invitation email). */
.wall { --brand: #0F6E6E; position: relative; padding-inline-end: 9%; padding-bottom: 27%; }
.wall > figure { margin: 0; }
.wall__comm { position: relative; z-index: 1; }
.wall__screen { position: relative; overflow: hidden; background: var(--stage); }
.wall__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .5s var(--ease); }
.wall__screen img:not(.is-on) { opacity: 0; }
.wall__phone { position: absolute; z-index: 3; inset-inline-end: 0; top: 12%; width: 23%; padding: 5px; border-radius: 24px; background: #0c0b14; border: 1px solid var(--stage-line); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.wall__phone .wall__screen { aspect-ratio: 1170 / 2532; border-radius: 19px; }
.wall__cert { position: absolute; z-index: 2; inset-inline-start: 3%; bottom: 0; width: 47%; border-radius: 12px; border: 1px solid var(--stage-line); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); }
.wall__cert .wall__screen { aspect-ratio: 1000 / 705; border-radius: 11px; }
.wall__mail { position: absolute; z-index: 2; inset-inline-end: 12%; bottom: 4%; width: 37%; border-radius: 14px; background: #ffffff; color: #15131f; box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); }
.wall__mailhead { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px 14px 0 0; background: var(--brand); color: #fff; font-size: .8rem; transition: background .5s var(--ease); }
.wall__mailhead b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall__mono { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: rgba(0,0,0,.28); font-size: .7rem; font-weight: 800; }
.wall__mailbody { display: grid; gap: 7px; padding: 12px 14px 14px; font-size: .74rem; color: #4a4760; }
.wall__mailbody b { font-size: .86rem; color: #15131f; }
.wall__mailbody i { display: block; height: 6px; border-radius: 3px; background: #e9e7f1; } .wall__mailbody i.s { width: 62%; }
.wall__btn { justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 650; transition: background .5s var(--ease); }
.wall__tag { position: absolute; z-index: 4; top: -10px; inset-inline-start: 12px; padding: 3px 9px; border-radius: 999px; background: var(--stage-3); border: 1px solid var(--stage-line); color: var(--stage-ink-2); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
[lang="ar"] .wall__tag { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: .72rem; }
/* The community tag sits on the top edge at the end side: at the bottom-start corner the certificate card covered it at every width. */
.wall__comm .wall__tag { inset-inline-start: auto; inset-inline-end: 14px; }
/* The community frame is a .bsw__frame (overflow: hidden), which clipped the top half of its tag. Let the frame overflow and clip its bar and screen instead, so the tag reads whole. */
.wall__comm.bsw__frame { overflow: visible; }
.wall__comm > .bsw__bar { border-radius: 15px 15px 0 0; }
.wall__comm > .bsw__shots { overflow: hidden; border-radius: 0 0 15px 15px; }
.wall.is-swap > figure { animation: wallSwap .8s var(--ease) both; }
.wall.is-swap > figure:nth-child(2) { animation-delay: .08s; } .wall.is-swap > figure:nth-child(3) { animation-delay: .16s; } .wall.is-swap > figure:nth-child(4) { animation-delay: .24s; }
@keyframes wallSwap { 35% { transform: translateY(-6px) scale(.985); box-shadow: 0 0 0 2px var(--brand), 0 30px 60px -20px rgba(0,0,0,.8); } }
@media (max-width: 600px) { .wall { padding-inline-end: 0; padding-bottom: 40%; } .wall__phone { width: 27%; top: 30%; } .wall__cert { width: 56%; inset-inline-start: 0; } .wall__mail { width: 46%; inset-inline-end: 0; bottom: 0; } .wall__mailbody i { display: none; } .wall__comm > .wall__tag { display: none; } }
/* Option .wall__mail--shot: the email card holds a .wall__screen of real email screenshots (brand-<slug>-email-1440, 1440x982) instead of the drawn mock (the fallback). */
.wall__mail--shot { background: #fff; overflow: visible; }
.wall__mail--shot .wall__screen { aspect-ratio: 1440 / 982; border-radius: 14px; background: #fff; }
.wall__mail--shot .wall__screen img { object-position: top left; transform: scale(1.3); transform-origin: 50% 40%; }
/* Option: interface language. data-ui="en|ar" on [data-wall] shows only the img[data-l] of that language; .bsw__uichip[data-ui] buttons inside the [data-brand] box switch it (signature.js). */
.wall[data-ui="en"] img[data-l="ar"], .wall[data-ui="ar"] img[data-l="en"] { display: none; }
.bsw__uichips { display: flex; flex-wrap: wrap; gap: 8px; }
.bsw__uichip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--stage-line); background: transparent; color: var(--stage-ink-2); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.bsw__uichip:hover { color: var(--stage-ink); }
.bsw__uichip[aria-pressed="true"] { background: var(--brand-ink, var(--stage-ink)); border-color: var(--brand-ink, var(--stage-ink)); color: #0b0a14; }
.bsw__uichip:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }
/* Persona index ("Where to start"): verb-led rows grouped by audience, with one real screen beside them. */
.idx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.idx__rows { list-style: none; display: grid; margin-top: 8px; }
.idx__group { padding: 22px 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-ink); }
[lang="ar"] .idx__group { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: .84rem; font-weight: 600; }
.idx__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 16px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.idx__rows > li:last-child { border-bottom: 1px solid var(--line); }
.idx__n { align-self: start; padding-top: 6px; font-family: var(--f-mono); font-size: .74rem; color: var(--ink-4); }
.idx__txt { display: grid; gap: 3px; min-width: 0; }
.idx__tag { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.idx__txt b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 1.05rem + .8vw, 1.75rem); line-height: 1.15; letter-spacing: -.015em; color: var(--ink-2); transition: color .2s; }
.idx__txt > span { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; }
.idx__go { width: 20px; height: 20px; color: var(--ink-4); transition: transform .25s var(--ease), color .2s; }
.idx__row.is-on b, .idx__row:hover b, .idx__row:focus-visible b { color: var(--ink); }
.idx__row.is-on .idx__tag { color: var(--violet-ink); }
.idx__row.is-on .idx__go, .idx__row:hover .idx__go { color: var(--violet); }
.idx__row:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 6px; }
.idx__thumb { display: none; }
.idx__frame { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); margin-top: 72px; }
.idx__shots { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--stage); }
/* Per-image zoom: style="--iz:1.6;--ix:50%;--iy:0%" shows part of a real screen (scale --iz around --ix --iy; defaults 1, 50%, 0%).
   --ix moves the crop sideways, so a narrow side panel (a participants list, a Live Now rail) can fill the frame.
   The row's phone thumb (.idx__thumb, a span around the img) reads the same variables: repeat the img's style on it. */
.idx__shots img, .idx__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; transform: scale(var(--iz, 1)); transform-origin: var(--ix, 50%) var(--iy, 0%); }
.idx__shots img { transition: opacity .4s var(--ease); }
.idx__shots img:not(.is-on) { opacity: 0; }
@media (max-width: 900px) {
  .idx { grid-template-columns: minmax(0, 1fr); }
  .idx__frame { display: none; }
  .idx__row { grid-template-columns: 26px minmax(0, 1fr) 92px; align-items: start; }
  .idx__thumb { display: block; position: relative; overflow: hidden; width: 92px; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid var(--line); background: var(--stage); }
  .idx__txt b { font-size: 1.2rem; }
}
/* Brand stage: the whole section takes the chosen brand's colour, the way a white-label tenant does. */
.brand-stage { --brand: #0F6E6E; --brand-ink: color-mix(in oklab, var(--brand) 42%, #ffffff); background-color: color-mix(in oklab, var(--brand) 30%, #05040b); background-image: radial-gradient(120% 80% at 85% 10%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 60%); transition: background-color .9s var(--ease); }
.brand-stage .eyebrow { color: var(--brand-ink); transition: color .6s; }
.brand-stage .bsw__input:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent); }
.brand-stage .bsw__chip[aria-pressed="true"] { background: var(--brand-ink); border-color: var(--brand-ink); color: #0b0a14; }
.brand-stage .btn--primary { --b-bg: color-mix(in oklab, var(--brand) 72%, #000000); --b-line: var(--b-bg); --b-fg: #ffffff; box-shadow: 0 8px 24px -10px var(--brand); transition: background .6s, border-color .6s; }
.brand-stage .btn--primary:hover { --b-bg: color-mix(in oklab, var(--brand) 86%, #000000); border-color: var(--b-bg); }
.bsw__chip { position: relative; overflow: hidden; }
.bsw__chip.is-timing::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%; background: color-mix(in oklab, var(--brand) 70%, #000000); transform-origin: left center; animation: chipTime var(--auto, 4500ms) linear both; }
[dir="rtl"] .bsw__chip.is-timing::after { transform-origin: right center; }
@keyframes chipTime { from { transform: scaleX(0); } }
.bsw__auto { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--stage-line); background: rgba(255,255,255,.06); color: var(--stage-ink-2); cursor: pointer; }
.bsw__auto:hover { color: var(--stage-ink); border-color: var(--stage-ink-3); }
.bsw__auto svg { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.bsw__auto .i-pause { fill: none; }
.bsw__auto .i-play, .bsw:not(.is-auto) .bsw__auto .i-pause { display: none; }
.bsw:not(.is-auto) .bsw__auto .i-play { display: block; stroke: none; }

/* Language demo: the real community page cycling through the six interface languages. */
.ldemo { display: grid; gap: 14px; min-width: 0; }
.ldemo__shots { position: relative; aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.ldemo__shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .45s var(--ease); }
.ldemo__shots img:not(.is-on) { opacity: 0; }
.ldemo__badge { position: absolute; inset-inline-start: 18px; bottom: 18px; display: grid; gap: 2px; padding: 14px 22px 14px 20px; border-radius: 16px; background: rgba(9, 8, 15, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); }
.ldemo__badge b { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.ldemo__badge small { font-size: var(--t-xs); font-weight: 600; color: var(--mint-bright); }
.ldemo__badge.is-pop { animation: ldPop .5s var(--ease); }
@keyframes ldPop { from { opacity: 0; transform: translateY(10px); } }
.ldemo__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ldemo__chip { position: relative; overflow: hidden; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.ldemo__chip:hover { color: var(--ink); }
.ldemo__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ldemo__chip.is-timing::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%; background: var(--violet); transform-origin: left center; animation: chipTime var(--auto, 2800ms) linear both; }
[dir="rtl"] .ldemo__chip.is-timing::after { transform-origin: right center; }
.ldemo__auto { border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
.ldemo__auto:hover { color: var(--ink); border-color: var(--ink-3); }
.ldemo:not(.is-auto) .ldemo__auto .i-pause { display: none; }
.ldemo:not(.is-auto) .ldemo__auto .i-play { display: block; stroke: none; }
.ldemo.is-auto .ldemo__auto .i-play { display: none; }
@media (max-width: 600px) { .ldemo__badge { inset-inline-start: 10px; bottom: 10px; padding: 8px 14px; border-radius: 12px; } .ldemo__badge b { font-size: 1.3rem; } }
.idx__more { padding: 0 0 18px 48px; }
[dir="rtl"] .idx__more { padding: 0 48px 18px 0; }
.idx__row[aria-expanded="true"] .idx__go { transform: rotate(180deg); color: var(--violet); }
.idx__go { transform: rotate(0); }
@media (max-width: 900px) { .idx__more { padding: 0 0 16px 40px; } [dir="rtl"] .idx__more { padding: 0 40px 16px 0; } }
@media (max-width: 900px) { .idx__go { display: none; } }
/* Option: an inline preview inside .idx__more on phones. .idx__pv is a .crop of the row's screen (shown under 900px, where the side frame hides); .idx__out is a short outcome list. Buttons in .idx__more are full .btn (44px), never .btn--sm. */
.idx__more .btn { min-height: 44px; max-width: 100%; white-space: normal; text-align: start; padding-block: 10px; }
.idx__pv { display: none; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 14px; }
.idx__out { list-style: none; display: grid; gap: 6px; margin: 0 0 14px; padding: 0; }
.idx__out li { position: relative; padding-inline-start: 18px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.idx__out li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 8px; height: 2px; border-radius: 2px; background: var(--violet); }
@media (max-width: 900px) { .idx__pv { display: block; } }
/* Homepage brand loop: a slim left column, the wall does the talking. */
.bsw--loop { grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); }
.bsw--loop .bsw__controls { gap: 16px; }
.bsw--loop .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.bsw--loop .cta-row { align-items: center; }
@media (max-width: 960px) { .bsw--loop { grid-template-columns: minmax(0, 1fr); } }

/* Match machine: a speed-networking room matched in parallel (illustration). */
.mm { display: grid; gap: 12px; min-width: 0; --g-v: var(--violet); --g-b: #2f7bf5; --g-a: #d98a00; --g-r: #e0457b; }
.mm__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: radial-gradient(120% 90% at 50% 0%, var(--violet-soft), transparent 60%), var(--surface-2); }
.mm__world { position: absolute; inset: 0; transition: transform .95s cubic-bezier(.65, 0, .2, 1); will-change: transform; }
.mm__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm__links line { stroke: var(--violet-line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset .7s ease, opacity .35s; }
.mm__links line.is-you { stroke: var(--mint); stroke-width: 2.5; }
.mm__links line.is-on { stroke-dashoffset: 0; opacity: 1; }
.mm__p { position: absolute; width: 11%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--g, var(--g-v)), 0 6px 16px rgba(12, 11, 23, .18); transition: left .9s cubic-bezier(.5, 0, .2, 1), top .9s cubic-bezier(.5, 0, .2, 1); }
.mm__p[data-g="b"] { --g: var(--g-b); } .mm__p[data-g="a"] { --g: var(--g-a); } .mm__p[data-g="r"] { --g: var(--g-r); }
.mm__p img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mm.is-lobby .mm__p img { animation: mm-bob 2.4s ease-in-out var(--b, 0s) infinite alternate; }
@keyframes mm-bob { to { transform: translateY(-6%); } }
.mm__p.is-you { z-index: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--mint), 0 6px 18px rgba(12, 11, 23, .22); }
.mm__p em { position: absolute; top: 100%; left: 50%; translate: -50% 5px; padding: 1px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 650 max(9px, 1.5cqw) / 1.5 var(--f-body); font-style: normal; white-space: nowrap; }
.mm.is-matched .mm__p em { opacity: 0; }
.mm__tag { position: absolute; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); font-size: clamp(9px, 1.45cqw, 12px); font-weight: 600; white-space: nowrap; opacity: 0; scale: .85; transition: opacity .3s, scale .3s; }
.mm__tag::before { content: ""; width: 1.1em; height: 1.1em; border-radius: 50%; flex: none; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.mm__tag.is-on { opacity: 1; scale: 1; }
.mm__tag.is-you { border-color: var(--mint); color: var(--ink); }
.mm__hud { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 3% 3.5% 0; font-size: clamp(10px, 1.6cqw, 13px); color: var(--ink-2); }
.mm__round { padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 650; white-space: nowrap; }
.mm__status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm__clock { font-family: var(--f-mono); font-weight: 600; color: var(--ink); padding: 3px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); direction: ltr; }
.mm__call { position: absolute; inset: 15% 6% 17%; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3%; padding: 2.4%; border-radius: 14px; background: #0e0c18; box-shadow: 0 18px 50px rgba(12, 11, 23, .45); opacity: 0; scale: .92; transition: opacity .4s, scale .45s cubic-bezier(.3, 1.3, .5, 1); pointer-events: none; }
.mm__call.is-on { opacity: 1; scale: 1; }
.mm__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4%; min-height: 0; }
.mm__tiles figure { position: relative; margin: 0; min-height: 0; border-radius: 10px; overflow: hidden; background: #222; }
.mm__tiles img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm__tiles figcaption { position: absolute; inset: auto 0 0; display: grid; padding: 18% 6% 5%; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; font-size: clamp(9px, 1.4cqw, 12px); line-height: 1.3; }
.mm__tiles figcaption b { font-size: 1.15em; }
.mm__tiles figcaption span { color: rgba(255, 255, 255, .82); }
.mm__ice { margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 1.6% 2.4%; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: clamp(10px, 1.7cqw, 14px); font-weight: 600; }
.mm__ice small { flex: none; color: var(--mint-bright); font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
:lang(ar) .mm__ice small { text-transform: none; letter-spacing: 0; }
.mm__met { position: absolute; inset: auto 0 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 3.5% 3%; font-size: clamp(9px, 1.4cqw, 12px); color: var(--ink-3); }
.mm__faces { display: flex; gap: 4px; min-height: 22px; }
.mm__faces img { width: clamp(18px, 3.6cqw, 28px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--mint); animation: mm-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mm-pop { from { scale: 0; } }
.mm__foot { display: flex; align-items: center; gap: 14px; }
.mm__steps { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: var(--t-sm); color: var(--ink-3); }
.mm__steps li { display: grid; gap: 6px; align-content: start; }
.mm__steps i { height: 3px; border-radius: 3px; background: var(--line); transition: background .3s; }
.mm__steps li.is-on { color: var(--ink); font-weight: 600; }
.mm__steps li.is-on i { background: var(--violet); }
.mm__auto { flex: none; border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
.mm__auto:hover { color: var(--ink); border-color: var(--ink-3); }
.mm:not(.is-auto) .mm__auto .i-pause { display: none; }
.mm:not(.is-auto) .mm__auto .i-play { display: block; stroke: none; }
.mm.is-auto .mm__auto .i-play { display: none; }
/* On a dark stage */
.stage .mm__steps { color: var(--stage-ink-3); }
.stage .mm__steps li.is-on { color: var(--stage-ink); }
.stage .mm__steps i { background: var(--stage-line); }
.stage .mm__steps li.is-on i { background: var(--mint-bright); }
.stage .mm__auto { background: rgba(255,255,255,.06); border-color: var(--stage-line); color: var(--stage-ink-2); }
.stage .mm__note { color: var(--stage-ink-3); }
/* Option: .mm--tall gives phones a square stage so faces and the call stay readable. */
@media (max-width: 560px) { .mm--tall .mm__stage { aspect-ratio: 1 / 1; } .mm--tall .mm__p { width: 14%; } }
.mm__note { color: var(--ink-4); margin: 0; }
.mm.is-still .mm__p, .mm.is-still .mm__tag, .mm.is-still .mm__world { transition: none; }
@container (max-width: 520px) {
  .mm__tag:not(.is-you) { font-size: 0; gap: 0; padding: 3px; }
  .mm__tag::before { width: 12px; height: 12px; }
  .mm__status { display: none; }
  .mm__hud { justify-content: space-between; }
}
@media (max-width: 560px) { .mm__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm.is-zoom .mm__tag { opacity: 0; }
.mm.is-zoom .mm__world { filter: blur(3px) saturate(.7); }
.mm__world { transition: transform .95s cubic-bezier(.65, 0, .2, 1), filter .6s; }

/* Leak v2: verdict lanes, sign-up gates, cost estimate */
.drop__verdict { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; background: rgba(255, 123, 110, .14); color: #ff9d93; border: 1px solid rgba(255, 123, 110, .4); align-self: center; }
.drop__verdict svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.drop__row--one .drop__verdict { background: rgba(0, 255, 198, .12); color: var(--mint-bright); border-color: rgba(0, 255, 198, .4); }
.drop__row--bad .drop__cols { border-color: rgba(255, 123, 110, .28); background: linear-gradient(90deg, rgba(255, 123, 110, .02), rgba(255, 123, 110, .08)); }
.drop__row--bad .drop__label b { text-decoration: line-through; text-decoration-color: rgba(255, 123, 110, .7); text-decoration-thickness: 2px; }
/* The gates people have to pass, and a live flow of faces walking through them */
.drop__key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; max-width: 78ch; font-size: var(--t-xs); line-height: 1.5; color: var(--stage-ink-2); }
.drop__box { position: relative; }
.drop__lane { width: 100%; height: 30px; }
.drop__row--bad .drop__cols li { border-inline-end: 2px solid rgba(255, 123, 110, .55); }
.drop__row--bad .drop__cols li:last-child { border-inline-end: 0; }
.drop__flow { position: absolute; inset: 0; pointer-events: none; }
.drop__flow::before { content: ""; position: absolute; inset-inline: 0; top: var(--lane, 0); height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px); }
.drop__row--one .drop__flow::before { background: rgba(0, 255, 198, .28); }
.drop__gate { position: absolute; z-index: 1; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: grid; place-items: center; background: #3a1820; border: 1.5px solid #ff7b6e; color: #ffb0a8; box-shadow: 0 0 14px rgba(255, 123, 110, .45); transition: transform .2s var(--ease), background-color .2s; }
.drop__row--one .drop__gate { background: #0f2126; border-color: rgba(0, 255, 198, .55); color: var(--mint-bright); box-shadow: none; }
.drop__gate svg, .drop__wall svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.drop__gate.is-hit { transform: scale(1.25); background: #6a2430; }
.drop__wall { display: inline-flex; }
.drop__wall b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid rgba(255, 123, 110, .55); background: #2a1620; color: #ffb0a8; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.drop__wall em { font-style: normal; }
.drop__flow > i { position: absolute; left: 0; top: 0; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #2a2640 center / cover no-repeat; box-shadow: 0 0 0 1.5px #c9c1ff, 0 4px 10px rgba(0, 0, 0, .5); }
.drop__row--one .drop__flow > i { box-shadow: 0 0 0 1.5px var(--mint-bright), 0 4px 10px rgba(0, 0, 0, .5); }
.drop__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.drop__auto { flex: none; }
.drop:not(.is-auto) .drop__auto .i-pause { display: none; }
.drop:not(.is-auto) .drop__auto .i-play { display: block; stroke: none; }
.drop.is-auto .drop__auto .i-play { display: none; }
.leakcalc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 32px; align-items: end; margin-top: 8px; padding: 24px; border-radius: 18px; border: 1px solid var(--stage-line); background: var(--stage-2); }
.leakcalc__h { grid-column: 1 / -1; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--stage-ink); }
.leakcalc__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.leakcalc label { display: grid; gap: 6px; font-size: var(--t-xs); color: var(--stage-ink-2); align-content: end; }
.leakcalc input { width: 100%; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--stage-line); background: rgba(255, 255, 255, .06); color: var(--stage-ink); font: 700 1.1rem var(--f-body); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.leakcalc input:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }
.leakcalc__out { display: block; font-size: 1.05rem; line-height: 1.45; color: var(--stage-ink-2); }
.leakcalc__out b { display: inline-block; font-family: var(--f-display); font-weight: 900; font-size: 1.9rem; line-height: 1.1; color: #ff9d93; font-variant-numeric: tabular-nums; }
.leakcalc__how { grid-column: 1 / -1; margin: 0; color: var(--stage-ink-3); max-width: 80ch; }
.leakcalc__how .link { color: var(--stage-ink-2); }
@media (max-width: 760px) { .leakcalc { grid-template-columns: 1fr; padding: 18px; } .leakcalc__in { grid-template-columns: 1fr; } }
/* Homepage brand loop: fast flips, so the re-skin itself is the message. */
.brand-stage { transition-duration: .45s; }
.brand-stage .eyebrow, .brand-stage .btn--primary, .brand-stage .wall__mailhead, .brand-stage .wall__btn { transition-duration: .3s; }
.brand-stage .wall__screen img { transition-duration: .22s; }
.brand-stage .wall.is-swap > figure { animation-duration: .45s; }
.brand-stage .wall.is-swap > figure:nth-child(2) { animation-delay: .04s; } .brand-stage .wall.is-swap > figure:nth-child(3) { animation-delay: .08s; } .brand-stage .wall.is-swap > figure:nth-child(4) { animation-delay: .12s; }

/* Self-identify hooks: "is this you?" cards that send creators and community owners to their page */
.hook { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 26px; margin-top: 28px; padding: 24px 28px; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent); background: linear-gradient(100deg, color-mix(in oklab, var(--violet) 12%, var(--surface)), var(--surface) 70%); }
.hook--community { border-color: color-mix(in oklab, var(--mint) 45%, transparent); background: linear-gradient(100deg, color-mix(in oklab, var(--mint) 14%, var(--surface)), var(--surface) 70%); }
.hook__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--violet); color: var(--on-violet); }
.hook--community .hook__ico { background: var(--mint); color: #0b0a14; }
.hook--event { border-color: color-mix(in oklab, var(--c-learn) 40%, transparent); background: linear-gradient(100deg, color-mix(in oklab, var(--c-learn) 12%, var(--surface)), var(--surface) 70%); }
.hook--event .hook__ico { background: var(--c-learn); color: var(--on-tone); }
.hook--watch { border-color: color-mix(in oklab, var(--c-live) 35%, transparent); background: linear-gradient(100deg, color-mix(in oklab, var(--c-live) 10%, var(--surface)), var(--surface) 70%); }
.hook--watch .hook__ico { background: var(--c-live); color: var(--on-tone); }
.hook__ico svg { width: 26px; height: 26px; }
.hook__txt { display: grid; gap: 8px; min-width: 0; }
.hook__k { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-ink); }
[lang="ar"] .hook__k { text-transform: none; letter-spacing: 0; }
.hook__h { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.hook__chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hook__chips li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.hook__sub { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.hook__btn { min-height: 44px; }
/* Options: .hook__btns holds two buttons; .hk-l / .hk-s give a button a long and a short (phone) label; .hooks stacks hooks with no top gap. */
.hook__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hook__btn .hk-s { display: none; }
.hooks { display: grid; gap: 0; }
.hooks .hook:first-child { margin-top: 0; }
@media (max-width: 820px) { .hook { grid-template-columns: auto minmax(0, 1fr); padding: 20px; } .hook__btn { grid-column: 1 / -1; justify-self: start; white-space: normal; } .hook__btns { grid-column: 1 / -1; } }
@media (max-width: 520px) { .hook__btn:has(.hk-s) { white-space: nowrap; } .hook__btn .hk-l { display: none; } .hook__btn .hk-s { display: inline; } }
@media (max-width: 480px) { .hook { grid-template-columns: minmax(0, 1fr); } .hook__ico { width: 46px; height: 46px; } }
/* Option: .hook--thumb puts .hook__thumb (a small real screen, a .crop) where .hook__ico sits; under 820px the screen hides. */
.hook__thumb { width: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.hook__thumb .crop { border-radius: 0; }
@media (max-width: 820px) { .hook--thumb { grid-template-columns: minmax(0, 1fr); } .hook__thumb { display: none; } }
@media (max-width: 700px) { .drop__row--bad .drop__cols li:nth-child(3) { border-inline-end: 0; } }


/* ============ HAPPENING: tabbed live block (events, Watch, experts, communities) ============ */
.ecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ecard{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.ecard:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.ecard:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.ecard__cover{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.ecard__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ecard:hover .ecard__cover img{transform:scale(1.04)}
.ecard__date{position:absolute;top:10px;inset-inline-start:10px;display:flex;flex-direction:column;align-items:center;min-width:48px;padding:6px 8px 5px;border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 4px 14px rgba(20,14,60,.18);line-height:1}
.ecard__date b{font-family:var(--f-display);font-size:1.45rem;font-weight:700;margin:2px 0 1px}
.ecard__date small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ecard__body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px}
.ecard__k{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-net)}
.ecard__k i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ecard__name{font-size:.98rem;font-weight:650;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ecard__go{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--violet-ink);font-weight:600}
.ecard__go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
[dir="rtl"] .ecard__go svg{transform:scaleX(-1)}
.ecard:hover .ecard__go svg{transform:translateX(3px)}
@media (max-width:1100px){.ecards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}.ecard{scroll-snap-align:start}}
@media (max-width:480px){.ecards{grid-auto-columns:80%}}

.ecard__play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,22,.62);color:#fff;backdrop-filter:blur(4px)}
.ecard__play svg{width:18px;height:18px;margin-inline-start:3px}
.ecard__dur{position:absolute;bottom:8px;inset-inline-end:8px;padding:3px 7px;border-radius:6px;background:rgba(11,10,22,.78);color:#fff;font-family:var(--f-mono);font-size:.68rem}
.ecard__k--watch{color:var(--c-live)}
.ecard__meta{font-size:var(--t-xs);color:var(--ink-3)}
.happ .tabs__panel{padding-top:22px}
.happ__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:16px}
.happ__foot .nums-note{margin:0}
.happ .hook{margin-top:22px}
.happ .experts+.happ__foot{margin-top:30px}
@media (max-width:600px){.happ .tabs__list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.happ .tabs__list::-webkit-scrollbar{display:none}.happ .tabs__btn{flex:none}}

/* ---------- The Leak, felt: each tool its own coloured lane with a gap between, people fall into
   every gap (grey, a red loss count); with BrainsMingle one green lane, everyone arrives smiling. ---------- */
.drop__row--bad .drop__cols { gap: 22px; border: 0; background: none; overflow: visible; }
.drop__row--bad .drop__cols li {
  --lc: #5b8cff; position: relative; overflow: visible; border: 0 !important; border-radius: 14px;
  border-top: 3px solid var(--lc) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 16%, var(--stage-2)), var(--stage-2) 70%);
}
.drop__row--bad .drop__cols li:nth-child(2) { --lc: #2ec4b6; }
.drop__row--bad .drop__cols li:nth-child(3) { --lc: #ffb020; }
.drop__row--bad .drop__cols li:nth-child(4) { --lc: #ff5fa2; }
.drop__row--bad .drop__cols li:nth-child(5) { --lc: #a78bfa; }
.drop__row--bad .drop__cols li:nth-child(6) { --lc: #ff8a4c; }
.drop__row--bad .drop__ico { background: color-mix(in srgb, var(--lc) 22%, transparent); color: var(--lc); }
.drop__row--bad .drop__dots i { box-shadow: 0 0 0 1.5px var(--lc); }
/* The gap before a lane: a pit, and how many people fell into it. */
.drop__row--bad .drop__cols li[data-lost]::before {
  content: "−" attr(data-lost); position: absolute; z-index: 3; inset-inline-start: -11px; bottom: 34px;
  transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: #3a1820; border: 1px solid #ff7b6e;
  color: #ffb0a8; font-weight: 800; font-size: .78rem; white-space: nowrap;
}
[dir="rtl"] .drop__row--bad .drop__cols li[data-lost]::before { transform: translateX(50%); }
.drop__row--bad .drop__cols li[data-lost]::after {
  content: ""; position: absolute; inset-inline-start: -22px; top: 30%; bottom: 0; width: 22px;
  background: linear-gradient(180deg, transparent, rgba(255, 123, 110, .16) 60%, rgba(255, 70, 60, .3));
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.drop__row--bad .drop__dots i.is-out { transform: translate(calc(var(--fall-x, -28px)), 120px) rotate(-38deg) scale(.85); opacity: 0; transition-duration: 1.2s; transition-timing-function: cubic-bezier(.5, 0, .75, 0); }
[dir="rtl"] .drop__row--bad .drop__dots i.is-out { --fall-x: 28px; }
.drop__row--bad .drop__n { color: #ff7b6e; }
.drop__row--bad .drop__flow::before { display: none; }

.drop__row--one .drop__cols { border: 1px solid rgba(0, 255, 198, .45); box-shadow: 0 0 40px -12px rgba(0, 255, 198, .35) inset; }
.drop__row--one .drop__cols li { border-inline-end: 0 !important; }
.drop__row--one .drop__flow::before { height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, rgba(0, 255, 198, .25), var(--mint-bright)); box-shadow: 0 0 14px rgba(0, 255, 198, .5); }
.drop__row--one .drop__dots i { position: relative; overflow: visible; }
.drop__row--one .drop__cols li:last-child .drop__dots i::after {
  content: ""; position: absolute; inset-inline-end: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mint-bright) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 11.5c1 1.6 2.4 2.4 4 2.4s3-.8 4-2.4' fill='none' stroke='%23062a22' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='7.5' r='1.3' fill='%23062a22'/%3E%3Ccircle cx='13' cy='7.5' r='1.3' fill='%23062a22'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.drop__row--one .drop__n { color: var(--mint-bright); text-shadow: 0 0 18px rgba(0, 255, 198, .45); }
.drop__row--one .drop__cols li:last-child .drop__n::after { content: " ✓"; font-size: .7em; }
@media (max-width: 700px) {
  .drop__row--bad .drop__cols { gap: 16px 18px; }
  .drop__row--bad .drop__cols li[data-lost]::after { display: none; }
  .drop__row--bad .drop__cols li[data-lost]::before { inset-inline-start: -9px; }
}
.drop__row--bad .drop__cols li[data-lost]::before { bottom: auto; top: 46%; }

/* ---------- The Leak as a scene (signature.js dropScene, from 701px): a canvas draws the cliffs and the
   crowd; the columns keep only their labels, and the count sits on each ledge. ---------- */
.drop--scene .drop__key, .drop--scene .drop__dots, .drop--scene .drop__lane, .drop--scene .drop__flow { display: none; }
.drop--scene .drop__box { position: relative; }
.drop__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[dir="rtl"] .drop__scene { transform: scaleX(-1); }
.drop--scene .drop__cols li { position: relative; z-index: 1; background: none !important; border-top: 0 !important; min-height: 380px; }
.drop--scene .drop__row--one .drop__cols li { min-height: 210px; }
.drop--scene .drop__row--bad .drop__cols { gap: 44px; }
.drop--scene .drop__row--one .drop__cols { background: none; border: 0; box-shadow: none; }
.drop--scene .drop__cols li[data-lost]::after { display: none; }
.drop--scene .drop__cols li[data-lost]::before { content: "−" attr(data-lost); inset-inline-start: -22px; top: 110px; padding: 5px 11px; font-size: .95rem; background: #ff4d3d; border: 0; color: #fff; box-shadow: 0 8px 24px -6px rgba(255, 60, 40, .7); }
.drop--scene .drop__n { position: absolute; bottom: 12px; inset-inline: 0; text-align: center; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); }
.drop--scene .drop__row--bad .drop__n { color: #ff6b5c; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.drop--scene .drop__row--one .drop__cols li:last-child .drop__dots i::after { display: none; }
.drop__tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 2px 0 4px; color: var(--stage-ink-2); font-size: var(--t-sm); }
.drop__tally b { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1; color: var(--stage-ink); font-variant-numeric: tabular-nums; }
.drop__tally i { font-style: normal; font-size: 1.6rem; color: var(--stage-ink-3); }
.drop__row--bad .drop__tally .is-end b, .drop__row--bad .drop__tally .is-cost b { color: #ff5b4c; }
.drop__row--bad .drop__tally .is-cost { margin-inline-start: auto; padding: 8px 14px; border-radius: 14px; background: rgba(255, 70, 60, .12); border: 1px solid rgba(255, 91, 76, .45); }
.drop__row--one .drop__tally .is-end b, .drop__row--one .drop__tally .is-cost b { color: var(--mint-bright); }
.drop__row--one .drop__tally .is-cost { margin-inline-start: auto; padding: 8px 14px; border-radius: 14px; background: rgba(0, 255, 198, .08); border: 1px solid rgba(0, 255, 198, .4); }
.drop__tally b, .drop--scene .drop__cols li[data-lost]::before { direction: ltr; unicode-bidi: isolate; }
/* Phones: the whole mountain in one row, icons and step names only. */
@media (max-width: 700px) {
  .drop--scene .drop__cols, .drop--four.drop--scene .drop__cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .drop--scene .drop__row--bad .drop__cols { gap: 14px; }
  .drop--scene .drop__cols li { min-height: 240px; padding: 10px 2px 8px; gap: 5px; border-bottom: 0 !important; }
  .drop--scene .drop__row--one .drop__cols li { min-height: 150px; }
  .drop--scene .drop__cols small { display: none; }
  .drop--scene .drop__cols b { font-size: .62rem; }
  .drop--scene .drop__ico { width: 26px; height: 26px; border-radius: 8px; }
  .drop--scene .drop__ico svg { width: 14px; height: 14px; }
  .drop--scene .drop__n { font-size: .95rem; bottom: 8px; }
  .drop--scene .drop__cols li[data-lost]::before { inset-inline-start: -7px; top: 66px; padding: 2px 6px; font-size: .66rem; }
  .drop__tally { gap: 4px 10px; }
  .drop__tally b { font-size: 1.6rem; }
  .drop__tally .is-cost { margin-inline-start: 0 !important; width: 100%; }
}