/* samtalebutler.css — the Samtalebutler page. The stage reuses .fs from stage.css (world,
   camera, intro, copy column, summary bubbles, controls) and swaps the illustration scenes for
   three lanes: the visitor's phone · Google/AI assistant · the butler in the fair's house,
   with the exhibitors' data as a fourth lane under the butler in Pro.
   State hooks set by samtalebutler.js on .fs--sb:
     data-phase intro|scene|sum · data-domain · data-pro 0|1 · data-step-id · data-focus
     (visitor|butler|data|page — which lane gets the room on phones) · .is-swap (content change) */

.fs--sb {
  --sb-copy: min(23rem, 22vw);
  --sb-top: 8.6rem;
  --sb-bot: 5.6rem;
  --sb-ink: var(--ug-neutral-10);
  --sb-paper: #fbfaf8;
  min-height: 46rem;
}
.fs--sb::after { background: linear-gradient(90deg, rgba(4,21,18,.5) 0%, rgba(4,21,18,.18) 28%, transparent 40%), radial-gradient(140% 100% at 50% 50%, transparent 58%, rgba(4,21,18,.4) 100%); }
.fs--sb .fs__intro { padding-top: 5rem; }
/* the domain selector sits over the top of the stage: keep the summary clear of it */
.fs--sb .fs__sum { padding-top: 8.5rem; }
.fs--sb .fs__title { max-width: 15ch; }
.fs--sb .fs__copy { width: var(--sb-copy); top: 53%; }
.fs--sb .fs__h { font-size: clamp(1.65rem, 2.35vw, 2.5rem); }
.fs--sb .fs__p { font-size: clamp(.98rem, 1.08vw, 1.12rem); max-width: 32ch; }
.fs--sb.is-swap .fs__copy { opacity: 0; transition: opacity .3s; }
.fs--sb .fs__ctrl { flex-wrap: wrap; width: var(--sb-copy); row-gap: .7rem; }
.fs--sb .fs__dots { flex: 1 0 100%; margin-right: 0; }
.fs--sb .fs__dot { width: auto; flex: 1; max-width: 2.4rem; }
.fs--sb .fs__dots { gap: .28rem; }
.fs__dot--pro i { background: rgba(234,114,70,.45); }
.fs__dot--pro i::after { background: var(--ug-accent-70); }

/* the rule that ends the story: the visitor decides */
.sb-rule { margin: 1.25rem 0 0; padding: .75rem .95rem .8rem; max-width: 34ch; border-left: 3px solid var(--ug-warning); border-radius: 0 .6rem .6rem 0; background: rgba(255,240,117,.09); color: #fff; font-size: var(--ug-text-m); line-height: 1.5; }
.sb-rule.is-in { animation: fs-rise .8s var(--fs-out) .9s both; }

/* ── Picker: domain pills + Pro switch ─────────────────────────────── */
.sb-pick { position: absolute; z-index: 5; top: 1rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--fs-gutter)); display: grid; justify-items: center; gap: .45rem; }
.sb-pick__q { margin: 0; font-size: var(--ug-text-m); font-weight: var(--ug-weight-semibold); color: var(--ug-on-brand-soft); letter-spacing: .01em; }
.sb-pick__row { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; padding: .3rem; border-radius: 1.6rem; background: rgba(4,21,18,.42); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px -18px rgba(0,0,0,.7); }
.sb-pick__pills { position: relative; display: flex; gap: .15rem; }
.sb-pick__thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--ug-radius-pill); background: #fff; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); transition: transform .55s cubic-bezier(.65,0,.35,1), width .55s cubic-bezier(.65,0,.35,1); }
.fs--sb:not(.is-ready) .sb-pick__thumb { transition: none; }
.sb-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; height: 2.45rem; padding: 0 1rem 0 .8rem; border-radius: var(--ug-radius-pill); color: #fff; text-decoration: none; font-weight: var(--ug-weight-semibold); font-size: var(--ug-text-m); white-space: nowrap; transition: color .35s, background .2s; }
.sb-pill svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: .75; transition: color .35s, opacity .35s; }
.sb-pill:hover { color: #fff; background: rgba(255,255,255,.1); }
.sb-pill[aria-checked="true"], .sb-pill[aria-checked="true"]:hover { color: var(--ug-brand); background: none; }
.sb-pill[aria-checked="true"] svg { color: var(--ug-accent-60); opacity: 1; }
.sb-pro { display: inline-flex; align-items: center; gap: .55rem; height: 2.45rem; padding: 0 1rem 0 .85rem; margin-left: .2rem; border: 0; border-left: 1px solid rgba(255,255,255,.16); border-radius: 0 var(--ug-radius-pill) var(--ug-radius-pill) 0; background: none; color: #fff; font: inherit; font-size: var(--ug-text-m); font-weight: var(--ug-weight-semibold); cursor: pointer; white-space: nowrap; }
.sb-pro__track { position: relative; flex: none; width: 2.35rem; height: 1.35rem; border-radius: var(--ug-radius-pill); background: rgba(255,255,255,.22); transition: background .3s; }
.sb-pro__track i { position: absolute; top: .15rem; left: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.sb-pro[aria-checked="true"] .sb-pro__track { background: var(--ug-accent-60); }
.sb-pro[aria-checked="true"] .sb-pro__track i { transform: translateX(1rem); }
.sb-pro__lab b { color: var(--ug-accent-70); margin-right: .15rem; }
.sb-pro:hover .sb-pro__track { background: rgba(255,255,255,.32); }
.sb-pro[aria-checked="true"]:hover .sb-pro__track { background: var(--ug-accent-70); }
.sb-pick__note { margin: 0; font-size: var(--ug-text-s); color: var(--ug-on-brand-soft); opacity: 0; transform: translateY(-.4rem); transition: opacity .4s, transform .5s var(--fs-out); pointer-events: none; }
.sb-pick__note a { color: var(--ug-accent-80); font-weight: var(--ug-weight-semibold); }
.fs--sb[data-pro="1"] .sb-pick__note { opacity: 1; transform: none; pointer-events: auto; }
.sb-chip-pro { --k: var(--ug-warning); }

/* ── Lanes ─────────────────────────────────────────────────────────── */
.sb-lanes {
  position: absolute; z-index: 3; top: var(--sb-top); bottom: var(--sb-bot);
  left: calc(var(--fs-gutter) + var(--sb-copy) + clamp(1.5rem, 3vw, 3.5rem)); right: var(--fs-gutter);
  display: grid; grid-template-columns: minmax(0, 1.08fr) 3.9rem minmax(0, .9fr) 3.9rem minmax(0, 1.16fr);
  font-size: clamp(.72rem, .82vw, .9rem); line-height: 1.38;
  opacity: 0; transform: translate3d(5%, 2%, 0) scale(.94); pointer-events: none;
  transition: opacity .8s ease, transform 1.4s var(--fs-out), filter .6s;
}
.fs--sb[data-phase="scene"] .sb-lanes { opacity: 1; transform: none; pointer-events: auto; transition-delay: .2s; }
.fs--sb[data-phase="sum"] .sb-lanes { transform: translate3d(-5%, 0, 0) scale(1.05); filter: blur(4px); }
.fs--sb.is-swap .sb-lanes { opacity: 0; transform: scale(.975); filter: blur(7px); transition: opacity .38s ease, transform .4s ease, filter .38s; }
.sb-col { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sb-lab { flex: none; display: flex; gap: .5em; margin: 0 0 .7em; font-family: var(--ug-mono); font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--ug-on-brand-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-lab span { color: var(--ug-accent-70); font-weight: 600; }

.sb-lane, .sb-phone { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sb-lane { flex: 1; border-radius: 1.1em; }
.sb-head { flex: none; display: flex; align-items: center; gap: .5em; padding: .7em .9em; border-bottom: 1px solid; font-size: .98em; }
.sb-head svg { width: 1.2em; height: 1.2em; flex: none; }
.sb-head b { white-space: nowrap; }
.sb-badge { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; padding: .15em .55em; border-radius: var(--ug-radius-pill); font-family: var(--ug-mono); font-size: .72em; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sb-badge svg { width: 1.05em; height: 1.05em; }
.sb-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .85em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em); mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em); }
.sb-set { display: contents; }

/* the ring a lane flashes when the travelling dot arrives */
.sb-ring { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; }
.sb-ring.is-ping { animation: sb-ping .9s ease-out; }
@keyframes sb-ping { 0% { box-shadow: inset 0 0 0 3px rgba(255,240,117,.95), inset 0 0 28px rgba(255,240,117,.45); } 100% { box-shadow: inset 0 0 0 3px rgba(255,240,117,0), inset 0 0 28px rgba(255,240,117,0); } }

/* lane 1 — the visitor's phone */
.sb-phone { flex: 1; width: 100%; max-width: 21rem; margin: 0 auto; background: var(--sb-paper); color: var(--sb-ink); border: .55em solid #06120f; border-radius: 2.3em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 34px 60px -26px rgba(0,0,0,.75), 0 12px 24px -14px rgba(0,0,0,.45); }
.sb-phone__bar { flex: none; position: relative; display: flex; justify-content: space-between; align-items: center; padding: .5em 1.4em .15em; font-size: .78em; }
.sb-phone__bar::after { content: ""; position: absolute; left: 50%; top: .35em; width: 28%; height: 1.15em; border-radius: 1em; background: #06120f; transform: translateX(-50%); }
.sb-phone__sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.sb-phone__sig i { width: 3px; border-radius: 1px; background: var(--sb-ink); }
.sb-phone__sig i:nth-child(1) { height: 5px; } .sb-phone__sig i:nth-child(2) { height: 7px; } .sb-phone__sig i:nth-child(3) { height: 9px; }
.sb-phone__app { flex: none; display: flex; align-items: center; gap: .45em; padding: .55em 1em .6em; border-bottom: 1px solid var(--ug-neutral-90); }
.sb-phone__app svg { width: 1.2em; height: 1.2em; color: var(--ug-accent-60); }
.sb-phone__app small { margin-left: auto; color: var(--ug-neutral-50); font-size: .8em; }
.sb-phone .sb-body { padding: .8em .75em; position: relative; z-index: 1; }
.sb-phone__hello { position: absolute; left: 0; right: 0; top: 34%; display: grid; justify-items: center; gap: .5em; color: var(--ug-neutral-60); font-size: 1.05em; font-weight: 600; text-align: center; transition: opacity .5s; }
.sb-phone__hello svg { width: 2.2em; height: 2.2em; color: var(--ug-accent-60); opacity: .75; }
.fs--sb:not([data-step-id="spoerg"]):not([data-phase="intro"]) .sb-phone__hello { opacity: 0; }
.sb-phone__input { flex: none; position: relative; z-index: 1; display: flex; align-items: center; gap: .5em; margin: 0 .7em .8em; padding: .5em .5em .5em .9em; border-radius: var(--ug-radius-pill); border: 1px solid var(--ug-neutral-80); background: #fff; color: var(--ug-neutral-60); font-size: .92em; }
.sb-phone__input span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-phone__input i { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; background: var(--ug-brand); color: #fff; }
.sb-phone__input svg { width: 1em; height: 1em; transform: rotate(-90deg); }

/* lane 2 — the assistant (glass, in the middle of nowhere) */
.sb-lane--assist { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.sb-lane--assist .sb-head { border-color: rgba(255,255,255,.14); }
.sb-lane--assist .sb-head svg { color: var(--ug-warning); }
.sb-lane--assist .sb-badge { border: 1px solid rgba(255,240,117,.5); color: var(--ug-warning); }

/* lane 3 — the butler, a lit room in the fair's house */
.sb-house { position: relative; flex: none; height: 2.9em; margin: 0 -.5em .5em; }
.sb-house svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-house path { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.92); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sb-house span { position: absolute; left: 50%; bottom: .45em; transform: translateX(-50%); font-family: var(--ug-mono); font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.sb-lane--butler { background: #fffdf9; color: var(--sb-ink); border-radius: .7em; outline: 2px solid rgba(255,255,255,.92); outline-offset: .5em;
  box-shadow: 0 0 60px -10px rgba(255,240,117,.28), 0 30px 60px -28px rgba(0,0,0,.6); }
.sb-lane--butler .sb-head { border-color: var(--ug-neutral-90); }
.sb-lane--butler .sb-head svg { color: var(--ug-accent-60); }
.sb-badge--ord { color: var(--ug-accent-40); background: var(--ug-accent-95); border: 1px solid var(--ug-accent-80); }
.sb-badge--ord.is-ping { animation: sb-badge 1.1s ease-out; }
@keyframes sb-badge { 0%, 100% { transform: none; } 30% { transform: scale(1.18); background: var(--ug-accent-60); color: #fff; } }

/* Pro — the exhibitors' data, imported by a tilbygning (pavilion) under the butler */
.sb-link--v { flex: none; height: 0; opacity: 0; overflow: visible; transition: height .7s var(--fs-out), opacity .4s; }
.sb-lane--data { flex: none; height: 0; opacity: 0; border: 1.5px dashed rgba(255,255,255,.5); border-radius: .7em; background: rgba(255,255,255,.06); color: #fff; transition: height .7s var(--fs-out), opacity .45s; }
.fs--sb[data-pro="1"] .sb-link--v { height: 2.6em; opacity: 1; }
.fs--sb[data-pro="1"] .sb-lane--data { height: 7.9em; opacity: 1; }
.sb-lane--data .sb-head { padding: .5em .8em; border-color: rgba(255,255,255,.14); font-size: .9em; }
.sb-lane--data .sb-head svg { color: var(--ug-accent-70); }
.sb-badge--pro { background: var(--ug-accent-60); color: #000; }
.sb-data { display: flex; flex-direction: column; gap: .3em; padding: .55em .7em; min-height: 0; }
.sb-srcs { display: flex; flex-wrap: wrap; gap: .3em; margin: 0; padding: 0; list-style: none; }
.sb-srcs li { display: inline-flex; align-items: center; gap: .35em; padding: .22em .6em .22em .4em; border-radius: var(--ug-radius-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-size: .84em; font-weight: 600; white-space: nowrap; }
.sb-srcs svg { width: 1.05em; height: 1.05em; color: var(--ug-accent-70); flex: none; }
.fs--sb[data-step-id^="pro-"] .sb-srcs li { animation: sb-src 1.5s ease-in-out calc(var(--i) * .22s) infinite; }
@keyframes sb-src { 50% { background: rgba(234,114,70,.4); border-color: var(--ug-accent-60); } }
.sb-data__status { margin: 0; font-size: .84em; font-style: italic; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: .35em; }
.sb-data__status svg { width: 1.1em; height: 1.1em; }
.sb-data__status--ok { color: var(--ug-gron-80); font-style: normal; font-weight: 700; }
.sb-data__status:has(~ .sb-data__status:not([hidden])) { display: none; }

/* ── Connectors and the travelling dot ─────────────────────────────── */
.sb-link { position: relative; z-index: 5; display: grid; place-items: center; color: rgba(255,255,255,.6); }
.sb-link__line { position: absolute; left: -.2em; right: -.2em; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.sb-link--v .sb-link__line { left: 50%; right: auto; top: -.2em; bottom: -.2em; width: 2px; height: auto; margin: 0 0 0 -1px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.sb-link[data-flow] .sb-link__line { background-image: repeating-linear-gradient(90deg, var(--ug-accent-60) 0 6px, transparent 6px 12px); animation: sb-dash-x .5s linear infinite; }
.sb-link--v[data-flow] .sb-link__line { background-image: repeating-linear-gradient(180deg, var(--ug-accent-60) 0 6px, transparent 6px 12px); animation-name: sb-dash-y; }
.sb-link[data-flow="l"] .sb-link__line { animation-direction: reverse; }
.fs--sb[data-pro="1"] .sb-link--v:not([data-flow]) .sb-link__line { animation: sb-dash-y 1.6s linear infinite reverse; } /* the nightly import keeps flowing */
@keyframes sb-dash-x { to { background-position: 12px 0; } }
@keyframes sb-dash-y { to { background-position: 0 12px; } }
.sb-link__arrow { position: relative; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--ug-brand-20); border: 1px solid rgba(255,255,255,.22); transition: background .3s, box-shadow .3s, color .3s; }
.sb-link__arrow svg { width: 1em; height: 1em; display: block; }
.sb-ico-r { display: none; }
.sb-link[data-flow="r"] .sb-ico-r, .sb-link[data-flow="l"] .sb-ico-r { display: block; }
.sb-link[data-flow="r"] .sb-ico-rl, .sb-link[data-flow="l"] .sb-ico-rl { display: none; }
.sb-link[data-flow="l"] .sb-ico-r { transform: rotate(180deg); }
.sb-link--v .sb-link__arrow > span { transform: rotate(90deg); }
.sb-link[data-flow] .sb-link__arrow { background: var(--ug-accent-60); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px rgba(234,114,70,.2); }
.sb-dot { position: absolute; z-index: 2; top: 50%; left: 50%; width: 2em; height: 2em; margin: -1em 0 0 -1em; border-radius: 50%; display: grid; place-items: center; background: var(--ug-warning); color: var(--ug-brand-10); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255,240,117,.22), 0 0 22px rgba(255,240,117,.65); }
.sb-dot svg { width: 1em; height: 1em; }
.sb-dot--t1, .sb-dot--t2 { width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; box-shadow: 0 0 12px rgba(255,240,117,.6); }
.sb-dot--t2 { width: .7em; height: .7em; margin: -.35em 0 0 -.35em; background: rgba(255,240,117,.7); }

/* ── Messages ──────────────────────────────────────────────────────── */
.sb-msg { flex: none; max-width: 93%; padding: .55em .8em; border-radius: 1em; }
.sb-msg p { margin: 0 0 .4em; }
.sb-msg ul { margin: .3em 0 .35em; padding-left: 1.1em; }
.sb-msg li { margin: .08em 0; }
.sb-msg small { display: block; color: var(--ug-neutral-50); font-size: .88em; }
.sb-msg--me { align-self: flex-end; background: var(--ug-brand); color: #fff; border-bottom-right-radius: .3em; }
.sb-msg--bot { align-self: flex-start; background: #efedea; color: var(--sb-ink); border-bottom-left-radius: .3em; }
.sb-msg--ask { align-self: flex-start; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); color: #fff; border-bottom-left-radius: .3em; }
.sb-msg--butler { align-self: flex-end; background: var(--ug-accent-95); border: 1px solid var(--ug-accent-80); color: var(--sb-ink); border-bottom-right-radius: .3em; }
.sb-note { flex: none; align-self: center; max-width: 92%; padding: .1em .4em; text-align: center; font-style: italic; font-size: .88em; color: rgba(255,255,255,.66); }
.sb-note--k { color: var(--ug-accent-40); }
.sb-chip { display: inline-flex; align-items: center; gap: .35em; width: fit-content; margin-top: .35em; padding: .3em .75em .3em .55em; border-radius: var(--ug-radius-pill); background: var(--ug-brand); color: #fff; font-weight: 600; font-size: .9em; }
.sb-chip svg { width: 1.05em; height: 1.05em; flex: none; }
.sb-chip--link { display: flex; background: var(--ug-accent-60); color: #000; box-shadow: 0 6px 14px -6px rgba(234,114,70,.8); }
.sb-links { display: flex; flex-wrap: wrap; gap: .3em; }
.sb-links .sb-chip { margin-top: .4em; font-size: .84em; }

.sb-res { list-style: none; margin: .25em 0 0; padding: 0; display: grid; gap: .32em; }
.sb-res li { display: grid; gap: .05em; padding: .42em .6em; border-radius: .6em; background: #fff; border: 1px solid var(--ug-neutral-90); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sb-res b { font-weight: 700; line-height: 1.25; }
.sb-res span { color: var(--ug-neutral-40); font-size: .9em; }
.sb-res em { width: fit-content; margin-top: .15em; padding: .05em .45em; border-radius: .3em; font-style: normal; font-size: .8em; font-weight: 700; color: var(--ug-brand); background: var(--ug-brand-95); }
.sb-res--compact { gap: 0; }
.sb-res--compact li { padding: .32em 0; background: none; border: 0; border-bottom: 1px dashed var(--ug-accent-80); border-radius: 0; box-shadow: none; }
.sb-res--compact li:last-child { border-bottom: 0; }

/* the dictionary beat */
.sb-tr { flex: none; align-self: stretch; padding: .7em .8em .75em; border-radius: .9em; border: 2px dashed var(--ug-accent-60); background: #fff; }
.sb-tr small { display: block; margin-bottom: .45em; font-family: var(--ug-mono); font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--ug-neutral-50); }
.sb-tr__row { display: flex; align-items: center; flex-wrap: wrap; gap: .45em; }
.sb-tr__fra { position: relative; padding: .25em .7em; border-radius: var(--ug-radius-pill); border: 1px solid var(--ug-neutral-80); background: var(--ug-neutral-95); transition: color .5s, opacity .5s; }
.sb-tr__fra::after { content: ""; position: absolute; left: .55em; right: .55em; top: 50%; height: 1.5px; background: var(--ug-accent-50); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65,0,.35,1); }
.sb-tr__fra.is-done { color: var(--ug-neutral-50); }
.sb-tr__fra.is-done::after { transform: scaleX(1); }
.sb-tr__pil { display: grid; color: var(--ug-accent-60); }
.sb-tr__pil svg { width: 1.2em; height: 1.2em; }
.sb-tr__til { display: inline-block; padding: .3em .9em; border-radius: var(--ug-radius-pill); background: var(--ug-accent-60); color: #fff; font-weight: 700; font-size: 1.14em; box-shadow: 0 8px 18px -8px rgba(234,114,70,.9); }
.sb-tr__filter { display: inline-block; margin-top: .45em; font-size: .82em; color: var(--ug-neutral-50); }

/* Pro: data sheet and prices */
.sb-src { font-family: var(--ug-mono); font-size: .7em !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ug-accent-40) !important; margin-bottom: .25em; }
.sb-spec { width: 100%; border-collapse: collapse; margin: .2em 0 .45em; font-size: .9em; }
.sb-spec th { text-align: left; font-weight: 500; color: var(--ug-neutral-40); padding: .17em .6em .17em 0; border-bottom: 1px solid var(--ug-neutral-90); white-space: nowrap; }
.sb-spec td { text-align: right; font-weight: 700; padding: .17em 0; border-bottom: 1px solid var(--ug-neutral-90); }
.sb-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: .22em; font-size: .9em; }
.sb-prices li { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; padding: .26em .55em; border-radius: .45em; background: #fff; border: 1px solid var(--ug-neutral-90); }
.sb-prices li span { color: var(--ug-neutral-40); }
.sb-prices li b { white-space: nowrap; }
.sb-prices li.is-best { border-color: var(--ug-accent-60); background: #fff4ef; }
.sb-prices li.is-best b { color: var(--ug-accent-40); }

/* ── The fair's own page, sliding up in the phone ──────────────────── */
.sb-pageset { display: contents; }
.sb-page { position: absolute; z-index: 3; inset: 1.85em 0 0; display: flex; flex-direction: column; background: #fff; border-radius: 1em 1em 0 0; box-shadow: 0 -14px 30px -10px rgba(0,0,0,.28); }
.sb-page__head { flex: none; display: flex; align-items: center; gap: .55em; padding: .75em .9em; background: var(--ug-brand); color: #fff; border-radius: 1em 1em 0 0; }
.sb-page__head > svg { width: 1.35em; height: 1.35em; flex: none; color: var(--ug-accent-70); }
.sb-page__head small { display: block; font-size: .74em; opacity: .75; }
.sb-page__head b { display: block; font-size: 1.08em; line-height: 1.15; }
.sb-tag { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; padding: .2em .55em; border-radius: var(--ug-radius-pill); background: var(--ug-warning); color: var(--ug-brand-10); font-size: .74em; font-weight: 700; white-space: nowrap; }
.sb-tag svg { width: 1em; height: 1em; }
.sb-page__body { flex: 1; min-height: 0; overflow: hidden; padding: .75em .9em 1em; display: flex; flex-direction: column; gap: .45em; }
.sb-page__body > * { flex: none; }
.sb-page__lab { display: block; margin-top: .2em; font-size: .74em; font-weight: 700; color: var(--ug-neutral-50); text-transform: uppercase; letter-spacing: .06em; }
.sb-field { position: relative; padding: .45em .65em; border-radius: .55em; border: 1px solid var(--ug-neutral-80); background: #fff; }
.sb-field__ph { color: var(--ug-neutral-60); }
.sb-field__typed { position: absolute; inset: -1px; padding: calc(.45em + 1px) calc(.65em + 1px); border-radius: inherit; border: 1.5px solid var(--ug-brand-60); background: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; }
.sb-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: .32em; }
.sb-picks li { display: flex; align-items: center; gap: .55em; font-size: .92em; line-height: 1.25; }
.sb-box { position: relative; flex: none; width: 1.3em; height: 1.3em; border-radius: .32em; border: 1.5px solid var(--ug-neutral-60); }
.sb-box__on { position: absolute; inset: -1.5px; border-radius: .32em; background: var(--ug-brand); color: #fff; display: grid; place-items: center; }
.sb-box__on svg { width: .95em; height: .95em; }
.sb-page__btns { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .2em; }
.sb-btn { padding: .45em .85em; border-radius: var(--ug-radius-pill); border: 1px solid var(--ug-neutral-80); font-weight: 600; font-size: .86em; white-space: nowrap; }
.sb-btn--pri { background: var(--ug-accent-60); border-color: transparent; color: #000; }
.sb-ok { display: flex; align-items: flex-start; gap: .55em; padding: .6em .75em; border-radius: .75em; background: var(--ug-gron-95); border: 1px solid var(--ug-gron-80); color: var(--ug-gron-30); font-size: .88em; font-weight: 600; line-height: 1.35; }
.sb-ok svg { flex: none; width: 1.35em; height: 1.35em; color: var(--ug-accent-60); }
.sb-map { padding: .35em .35em .25em; border-radius: .7em; background: var(--ug-neutral-95); border: 1px solid var(--ug-neutral-90); }
.sb-map svg { width: 100%; height: auto; display: block; }
.sb-map small { display: block; padding: .2em .25em 0; font-size: .76em; font-weight: 700; color: var(--ug-accent-40); }
.sb-map__hall { fill: #fff; stroke: var(--ug-neutral-80); stroke-width: 1.2; }
.sb-map__stand { fill: var(--ug-brand-95); stroke: var(--ug-brand-80); stroke-width: 1; }
.sb-map__route { fill: none; stroke: var(--ug-accent-60); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sb-map__pt circle { fill: var(--ug-brand); stroke: #fff; stroke-width: 2; }
.sb-map__pt--start circle { fill: var(--ug-gron-60); }
.sb-map__pt--maal circle { fill: var(--ug-accent-60); }
.sb-map__pt text { font-family: var(--ug-font); font-size: 10px; font-weight: 700; fill: var(--ug-brand-10); paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* ── Summary ───────────────────────────────────────────────────────── */
.sb-sum__btns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.75rem; }
.sb-sum__btns .fs__cta { margin: 0; }
.fs--sb[data-pro="1"] .sb-sum__pro { display: none; }

/* ── Phone / narrow: picker scrolls, lanes stack, the busy lane gets the room ── */
@media (max-width: 860px) {
  .fs--sb { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; padding-bottom: 5rem; }
  .fs--sb > * { min-width: 0; }
  .sb-pick { position: relative; grid-row: 1; top: auto; left: auto; transform: none; width: auto; max-width: none; justify-items: stretch; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding-top: 1rem; }
  .sb-pick__q { padding: 0 1.25rem; }
  .sb-pick__row { flex-direction: column; align-items: stretch; gap: .5rem; padding: 0; margin: 0 1rem; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sb-pick__pills { width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: .3rem; border-radius: var(--ug-radius-pill); background: rgba(4,21,18,.42); border: 1px solid rgba(255,255,255,.14); }
  .sb-pick__pills::-webkit-scrollbar { display: none; }
  .sb-pick__thumb { top: .3rem; bottom: .3rem; }
  .sb-pill { padding: 0 .85rem 0 .7rem; flex: none; }
  .sb-pro { align-self: flex-start; margin: 0; padding: 0 .5rem 0 .3rem; border: 0; height: 2rem; }
  .sb-pick__note { padding: 0 1.25rem; text-wrap: balance; }
  .fs--sb[data-pro="0"] .sb-pick__note { display: none; }
  .fs--sb[data-phase="scene"] .fs__intro { padding-top: .75rem; }
  .fs--sb[data-phase="scene"] .fs__intro :is(.fs__eyebrow, .fs__lede, .fs__chips) { display: none; }
  .fs--sb[data-phase="scene"] .fs__title { font-size: 1.65rem; max-width: none; }
  .fs--sb .fs__intro { grid-row: 2; padding-top: 1.25rem; }
  .fs--sb[data-phase="intro"] .sb-lanes { opacity: .55; height: 30rem; }
  .fs--sb .fs__title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .sb-lanes { position: relative; grid-row: 3; top: auto; bottom: auto; left: auto; right: auto; height: 44rem; margin: 1.25rem 1rem 0; font-size: .84rem;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 2.6rem minmax(0, 1fr) 2.6rem minmax(0, 1fr);
    opacity: 1; transform: none; pointer-events: auto; transition: grid-template-rows .6s var(--fs-out), opacity .4s, filter .4s; }
  .fs--sb[data-focus="visitor"] .sb-lanes { grid-template-rows: minmax(0, 2.5fr) 2.6rem minmax(0, .8fr) 2.6rem minmax(0, 1fr); }
  .fs--sb[data-focus="page"] .sb-lanes { grid-template-rows: minmax(0, 4fr) 2.6rem minmax(0, .55fr) 2.6rem minmax(0, .7fr); }
  .fs--sb[data-focus="butler"] .sb-lanes, .fs--sb[data-focus="data"] .sb-lanes { grid-template-rows: minmax(0, 1fr) 2.6rem minmax(0, .8fr) 2.6rem minmax(0, 2.6fr); }
  .fs--sb[data-phase="sum"] .sb-lanes { display: none; }
  .fs--sb .fs__copy, .fs--sb .fs__sum { grid-row: 4; width: auto; padding-top: 1rem; }
  .fs--sb .fs__ctrl { grid-row: 5; bottom: auto; }
  .sb-lab { margin-bottom: .35em; }
  .sb-house { display: none; }
  .sb-lane--butler { outline-offset: .3em; }
  .sb-phone { max-width: none; border-width: .42em; border-radius: 1.7em; }
  .sb-link .sb-link__line { left: 50%; right: auto; top: -.2em; bottom: -.2em; width: 2px; height: auto; margin: 0 0 0 -1px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
  .sb-link[data-flow] .sb-link__line { background-image: repeating-linear-gradient(180deg, var(--ug-accent-60) 0 6px, transparent 6px 12px); animation-name: sb-dash-y; }
  .sb-link .sb-link__arrow > span { transform: rotate(90deg); }
  .fs--sb[data-pro="1"] .sb-lane--data { height: 7.8em; }
}

/* ── Below the stage ───────────────────────────────────────────────── */
.sb-saadan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sb-saadan__kort { padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--ug-radius-l); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); }
.sb-saadan__ico { width: 2.75rem; height: 2.75rem; border-radius: var(--ug-radius); background: var(--ug-brand); color: #fff; display: grid; place-items: center; margin-bottom: .9rem; }
.sb-saadan__kort:nth-child(2) .sb-saadan__ico { background: var(--ug-warning); color: var(--ug-brand-10); }
.sb-saadan__kort:nth-child(3) .sb-saadan__ico { background: var(--ug-accent-60); color: #000; }
.sb-saadan__ico svg { width: 1.45rem; height: 1.45rem; }
.sb-saadan__kort h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; margin-bottom: .4rem; }
.sb-saadan__kort p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); margin: 0; }
.sb-laes { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 2.5rem; }
.sb-trinliste ol { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: .8rem; }
.sb-trinliste li { counter-increment: t; display: grid; grid-template-columns: 2rem 1fr; column-gap: .6rem; font-size: var(--ug-text-m); }
.sb-trinliste li::before { content: counter(t, decimal-leading-zero); grid-row: span 3; font-family: var(--ug-mono); color: var(--ug-accent-60); font-weight: 600; padding-top: .1rem; }
.sb-trinliste li b { color: var(--ug-text); }
.sb-trinliste li span { color: var(--ug-text-quiet); }
.sb-trinliste li .chip { padding: .05rem .4rem; font-size: var(--ug-text-xs); vertical-align: 1px; }
.sb-trinliste__note { margin-top: .3rem; padding: .4rem .6rem; border-left: 3px solid var(--ug-accent-60); background: var(--ug-accent-quiet); border-radius: 0 .4rem .4rem 0; color: var(--ug-text) !important; }

.sb-doms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.sb-dom { display: flex; flex-direction: column; gap: .55rem; padding: 1.15rem 1.15rem 1.2rem; border-radius: var(--ug-radius-l); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); color: inherit; text-decoration: none; transition: transform .2s var(--ug-ease), box-shadow .2s, border-color .2s; }
.sb-dom:hover { transform: translateY(-3px); box-shadow: var(--ug-shadow-pop); color: inherit; border-color: var(--ug-brand-line); }
.sb-dom.is-on { border-color: var(--ug-accent-60); box-shadow: 0 0 0 3px var(--ug-accent-quiet), var(--ug-shadow-pop); }
.sb-dom__top { display: flex; justify-content: space-between; align-items: center; }
.sb-dom__ico { width: 2.4rem; height: 2.4rem; border-radius: var(--ug-radius); background: var(--ug-brand); color: #fff; display: grid; place-items: center; }
.sb-dom.is-on .sb-dom__ico { background: var(--ug-accent-60); color: #000; }
.sb-dom__ico svg { width: 1.3rem; height: 1.3rem; }
.sb-dom__nr { font-family: var(--ug-mono); font-size: var(--ug-text-s); color: var(--ug-text-faint); }
.sb-dom h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; }
.sb-dom__kort { margin: 0; font-size: var(--ug-text-s); color: var(--ug-text-faint); }
.sb-dom q { font-size: var(--ug-text-m); color: var(--ug-text); font-style: italic; quotes: "«" "»"; }
.sb-dom__ord { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: var(--ug-text-s); }
.sb-dom__ord span { padding: .1rem .5rem; border-radius: var(--ug-radius-pill); background: var(--ug-surface-2); border: 1px solid var(--ug-border); }
.sb-dom__ord svg { width: .9rem; height: .9rem; color: var(--ug-accent-60); }
.sb-dom__ord b { padding: .1rem .55rem; border-radius: var(--ug-radius-pill); background: var(--ug-accent-60); color: #000; }
.sb-dom__ender, .sb-dom__pro { font-size: var(--ug-text-s); color: var(--ug-text-quiet); }
.sb-dom__pro .chip { padding: 0 .35rem; font-size: var(--ug-text-xs); margin-right: .2rem; }
.sb-dom__go { margin-top: auto; padding-top: .3rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: var(--ug-weight-semibold); font-size: var(--ug-text-m); color: var(--ug-brand-strong); }

.sb-pro-box { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.25rem; align-items: center; padding: 2.25rem; border-radius: var(--ug-radius-l); color: var(--ug-on-brand); background: radial-gradient(120% 120% at 100% 100%, var(--ug-brand-40), transparent 60%), var(--ug-brand); box-shadow: var(--ug-shadow-pop); }
.sb-pro-box .eyebrow { color: var(--ug-accent-80); }
.sb-pro-box h2 { color: #fff; max-width: 18ch; }
.sb-pro-box h2 .em { color: var(--ug-accent-70); }
.sb-pro-box p { color: var(--ug-on-brand-quiet); margin-top: .9rem; max-width: 56ch; }
.sb-pro-box__fod { font-size: var(--ug-text-m); color: var(--ug-on-brand-soft) !important; }
.sb-pro-box__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.sb-pro-box__pkt { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sb-pro-box__pkt li { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--ug-radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: var(--ug-text-m); color: var(--ug-on-brand-quiet); }
.sb-pro-box__pkt b { display: block; color: #fff; font-size: var(--ug-text-l); }
.sb-pro-box__ico { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ug-accent-60); color: #000; display: grid; place-items: center; }
.sb-pro-box__ico svg { width: 1.15rem; height: 1.15rem; }

/* Pro+ — agent payments (a possibility, not a product yet) */
.sb-pp { padding: 2.25rem; border-radius: var(--ug-radius-l); border: 1.5px dashed var(--ug-accent-line); background: linear-gradient(160deg, var(--ug-accent-quiet), var(--ug-surface) 55%); }
.sb-pp__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem; align-items: center; }
.sb-pp .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--ug-accent-40); }
html[data-theme="dark"] .sb-pp .eyebrow { color: var(--ug-accent-70); }
.sb-pp__status { padding: .15rem .55rem; border-radius: var(--ug-radius-pill); border: 1px dashed currentColor; font-size: var(--ug-text-xs); letter-spacing: .08em; }
.sb-pp h2 { max-width: 18ch; }
.sb-pp .lede { margin-top: .8rem; }
.sb-pp__bg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--ug-border-quiet); border-bottom: 1px solid var(--ug-border-quiet); }
.sb-pp__bg p { margin: 0; font-size: var(--ug-text-m); color: var(--ug-text-quiet); }
.sb-pp__lvls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sb-pp__lvl { position: relative; padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--ug-radius-l); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); }
.sb-pp__nr { position: absolute; top: 1.1rem; right: 1.2rem; font-family: var(--ug-mono); font-size: var(--ug-text-s); color: var(--ug-text-faint); }
.sb-pp__ico { width: 2.5rem; height: 2.5rem; border-radius: var(--ug-radius); background: var(--ug-accent-quiet); color: var(--ug-accent-40); border: 1px solid var(--ug-accent-line); display: grid; place-items: center; margin-bottom: .8rem; }
html[data-theme="dark"] .sb-pp__ico { color: var(--ug-accent-70); }
.sb-pp__ico svg { width: 1.3rem; height: 1.3rem; }
.sb-pp__lvl h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; margin-bottom: .35rem; }
.sb-pp__lvl p { margin: 0; color: var(--ug-text-quiet); font-size: var(--ug-text-m); }
.sb-pp__note { display: flex; gap: .6rem; align-items: flex-start; margin: 1.5rem 0 0; font-size: var(--ug-text-m); color: var(--ug-text-quiet); }
.sb-pp__note svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--ug-accent-60); }
.sb-pp__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

/* the 402 round trip: ask → 402 + price → wallet pays → 200 delivered, on a loop */
.sb-pp__ill { margin: 0; padding: 1.1rem 1.1rem 1rem; border-radius: var(--ug-radius-l); background: var(--ug-brand); color: #fff; box-shadow: var(--ug-shadow-pop); font-size: var(--ug-text-s); }
.sb-402 { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; position: relative; }
.sb-402::before { content: ""; position: absolute; left: 1.05rem; top: .8rem; bottom: .8rem; width: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0 5px, transparent 5px 10px); }
.sb-402__s { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; column-gap: .6rem; row-gap: .15rem; padding: .5rem .65rem; border-radius: .6rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.sb-402__who { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; white-space: nowrap; }
.sb-402__who svg { width: 1.1rem; height: 1.1rem; flex: none; padding: .15rem; box-sizing: content-box; border-radius: 50%; background: var(--ug-brand-20); color: var(--ug-warning); }
.sb-402__s code { font-family: var(--ug-mono); font-size: .92em; overflow-wrap: anywhere; color: rgba(255,255,255,.9); }
.sb-402__s b { grid-column: 2; color: var(--ug-warning); }
.sb-402__s--402 code { color: var(--ug-accent-80); }
.sb-402__s--ok code { color: var(--ug-gron-80); }
.sb-pp__ill.is-run .sb-402__s { animation: sb-402 7s cubic-bezier(.2,.85,.25,1) calc(var(--i) * 1.2s) infinite; }
@keyframes sb-402 {
  0% { opacity: .25; transform: translateX(-.4rem); border-color: rgba(255,255,255,.12); }
  6%, 18% { opacity: 1; transform: none; border-color: var(--ug-warning); background: rgba(255,240,117,.12); }
  30%, 86% { opacity: 1; transform: none; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); }
  100% { opacity: .25; transform: none; }
}
.sb-402__tal { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .85rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.14); }
.sb-402__tal > span:first-child { flex: 1 0 100%; font-family: var(--ug-mono); font-size: var(--ug-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ug-on-brand-faint); }
.sb-402__tal b { font-size: 1.35rem; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sb-402__sum { margin-left: auto; color: var(--ug-warning); }
.sb-402__sum.is-tick { animation: sb-tick .8s ease; }
@keyframes sb-tick { 0% { transform: scale(1.12); } 100% { transform: none; } }

.sb-persp-dom { font-size: .55em; font-weight: var(--ug-weight-regular); color: var(--ug-text-faint); letter-spacing: 0; }

.sb-cta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; padding: 2rem 2.25rem; border-radius: var(--ug-radius-l); background: var(--ug-accent-quiet); border: 1px solid var(--ug-accent-line); }
.sb-cta h2 { max-width: 22ch; }
.sb-cta .lede { margin-top: .75rem; font-size: var(--ug-text-l); }
.sb-cta__btns { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 1100px) {
  .sb-doms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-pp__head { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sb-saadan, .sb-laes, .sb-pro-box, .sb-pp__bg, .sb-pp__lvls { grid-template-columns: 1fr; }
  .sb-doms { grid-template-columns: 1fr 1fr; }
  .sb-pro-box, .sb-pp { padding: 1.5rem 1.25rem; }
}
@media (max-width: 520px) {
  .sb-doms { grid-template-columns: 1fr; }
  .sb-402__s { grid-template-columns: 1fr; }
  .sb-402::before { display: none; }
  .sb-402__s b { grid-column: 1; }
}

/* ── Reduced motion: final states, no loops ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sb-lanes, .sb-pick__thumb, .sb-lane--data, .sb-link--v, .sb-pick__note { transition: none !important; }
  .sb-link__line, .sb-srcs li, .sb-402__s, .sb-ring, .sb-badge--ord { animation: none !important; }
  .sb-pp__ill .sb-402__s { opacity: 1; }
}