/* JBL case: "Try it", a working model of the in-store display (webflow/migration/jbl-try).
   The section around it speaks the site's design system (tokens from design-system/README.md); the kiosk itself (.k)
   is drawn at the Figma frame size, 1280 × 800, and scaled to fit, in JBL's own look: black, white, grey cards and the
   identity orange, with Archivo standing in for the kiosk's wide caps. Every rule is scoped to .jbt. */
.jbt { --k-or: #fa440e; --k-ink: #0c0c0c; --k-card: #efefef; --k-grey: #e8e8e8; --k-line: #d4d4d4; --k-blue: #1c8fe0; --k-green: #3cc72e;
  --k-font: Archivo, 'Arial Black', Helvetica, sans-serif;
  font-family: var(--font-text); font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--heading); -webkit-font-smoothing: antialiased; }
.jbt *, .jbt *::before, .jbt *::after { box-sizing: border-box; }
.jbt button { font: inherit; color: inherit; cursor: pointer; }
.jbt :is(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.jbt .jbt-sec { position: relative; max-width: 1200px; margin: 0 auto; padding-top: 140px; display: flex; flex-direction: column; gap: 22px; }
.jbt .jbt-label { margin: 0; font-family: var(--font-text); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }
.jbt .jbt-h2 { margin: 0; max-width: 760px; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.025em; font-weight: 500; color: var(--heading); text-wrap: balance; }
.jbt .jbt-h3 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; color: var(--heading); }
.jbt .jbt-p { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.jbt .jbt-small { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--body); }
.jbt .jbt-float { position: absolute; top: 110px; right: 0; z-index: 3; }
.jbt .ig-sticker[data-drag] { cursor: grab; touch-action: none; }
.jbt .ig-sticker.is-dragging { cursor: grabbing; transition: none; }

/* layout: the display, and the notes that light up beside it */
.jbt .jbt-try { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: start; margin-top: 14px; }
.jbt .jbt-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jbt .jbt-mode { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-card); }
.jbt .jbt-mode button { border: 0; background: none; padding: 7px 20px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--heading); transition: background-color var(--dur-fast), color var(--dur-fast); }
.jbt .jbt-mode button[aria-pressed="true"] { background: var(--heading); color: var(--white); }
.jbt .jbt-open { display: none; align-self: flex-start; border: 2px solid var(--heading); background: var(--orange); color: var(--on-orange); padding: 9px 22px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.jbt .jbt-notes { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 110px; }
.jbt .jbt-anno { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px; border-radius: 14px; background: var(--white); opacity: .5; transition: opacity var(--dur-base), translate var(--dur-base) var(--ease-out); }
.jbt .jbt-anno.is-on { opacity: 1; translate: -6px 0; }
.jbt .jbt-anno b { width: 28px; height: 28px; border-radius: 50%; background: var(--heading); color: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-size: 13px; font-weight: 500; }
.jbt .jbt-anno.is-on b { background: var(--orange); color: var(--on-orange); }

/* the tablet: 1280 × 800 inside a bezel, scaled to the column */
.jbt .jbt-device { position: relative; border-radius: 30px; padding: 16px; background: #111114; box-shadow: 0 28px 50px #181b2e40, inset 0 0 0 2px #3a3a3e; }
.jbt .jbt-device::before { content: ""; position: absolute; left: 50%; top: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2a2a2e; }
.jbt .jbt-fit { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: hidden; border-radius: 14px; background: #fff; }
.jbt .k { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; overflow: hidden; background: #fff;
  font-family: var(--k-font); font-stretch: 112%; font-weight: 700; color: var(--k-ink); line-height: 1.25; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.jbt .k * { margin: 0; }
/* the case template styles every p, h3 and img in the Body (.ig-case__body p / img): undo that inside the kiosk, at a
   specificity the rules below still beat */
.jbt .k :where(p, h3) { max-width: none; font: inherit; font-stretch: inherit; letter-spacing: inherit; color: inherit; }
.jbt .k :where(img) { border-radius: 0; background: none; }
.jbt .k :where(button) { border: 0; background: none; padding: 0; font-family: inherit; font-stretch: inherit; }
.jbt .k [hidden] { display: none !important; }
.jbt .k-scr { position: absolute; inset: 0; animation: k-in .45s var(--ease-out, ease-out); }
@keyframes k-in { from { opacity: 0; } to { opacity: 1; } }
.jbt .k-chev { display: inline-block; width: 22px; height: 22px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18l7-7 7 7M5 11l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18l7-7 7 7M5 11l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.jbt .k-chev--down { rotate: 180deg; }

/* speaker cards (welcome, display and staff strips share them) */
.jbt .k-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 6px 12px; border-radius: 8px; background: var(--k-card); outline: 2px solid transparent; outline-offset: -2px; font-size: 13px; letter-spacing: .01em; text-transform: uppercase; transition: outline-color .2s, background-color .2s; }
.jbt .k-card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; transition: scale .35s var(--ease-out, ease-out); }
.jbt .k-card:hover img { scale: 1.05; }
.jbt .k-card[aria-pressed="true"] { outline-color: var(--k-or); background: #fff; }
.jbt .k-card.is-empty { color: var(--k-or); justify-content: center; }
.jbt .k-rib { position: absolute; top: 14px; width: 130px; padding: 3px 0; font-size: 8px; line-height: 1.1; letter-spacing: .04em; color: #fff; text-align: center; pointer-events: none; }
.jbt .k-rib--new { right: -36px; rotate: 45deg; background: var(--k-or); }
.jbt .k-rib--wifi { left: -36px; rotate: -45deg; background: var(--k-blue); font-size: 7px; }

/* 1 · welcome */
.jbt .k-hero { position: absolute; left: 0; top: 0; width: 1280px; height: 370px; overflow: hidden; display: block; }
.jbt .k-hero__img { position: absolute; inset: -10px; background-size: cover; background-position: 50% 62%; animation: k-drift 16s ease-in-out infinite alternate; }
@keyframes k-drift { from { scale: 1; } to { scale: 1.07; translate: -14px 6px; } }
.jbt .k-touch { position: absolute; left: 0; top: 370px; width: 1280px; height: 113px; display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--k-or) !important; color: #fff; font-size: 38px; font-weight: 800; letter-spacing: .01em; }
.jbt .k-touch .k-chev { width: 34px; height: 34px; animation: k-nudge 1.6s ease-in-out infinite; }
@keyframes k-nudge { 0%, 100% { translate: 0 4px; } 50% { translate: 0 -5px; } }
.jbt .k-wstrip { position: absolute; left: 240px; top: 510px; width: 790px; height: 146px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.jbt .k-wstrip .k-card { font-size: 12px; }
.jbt .k-fav { position: absolute; left: 0; right: 0; top: 688px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.jbt .k-wbar { position: absolute; left: 0; right: 0; top: 742px; bottom: 0; background: var(--k-ink); }

/* 2 · the display */
.jbt .k-left { position: absolute; left: 0; top: 0; width: 928px; height: 652px; background: #fff; }
.jbt .k-strip { position: absolute; left: 67px; top: 18px; width: 775px; height: 140px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.jbt .k-tabs { position: absolute; left: 67px; top: 169px; width: 775px; height: 33px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--k-ink); border-radius: 6px; overflow: hidden; }
.jbt .k-tabs button { color: #fff; font-size: 13px; letter-spacing: .02em; border-radius: 5px; transition: background-color .2s; }
.jbt .k-tabs button[aria-selected="true"] { background: var(--k-or); }
.jbt .k-view { position: absolute; left: 67px; top: 210px; width: 775px; height: 433px; border-radius: 16px; overflow: hidden; }
.jbt .k-video { position: absolute; inset: 0; background: #9cc4e4; }
.jbt .k-video__img { position: absolute; inset: 0; background-size: cover; background-position: center; animation: k-drift 12s ease-in-out infinite alternate; }
.jbt .k-video.is-other .k-video__img { filter: blur(8px) saturate(1.1); inset: -20px; background-size: 260% auto; background-position: 100% 78%; }
.jbt .k-video__cut { position: absolute; left: 50%; bottom: 46px; width: 470px; height: 270px; translate: -50% 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 22px 16px #0006); transition: opacity .3s; }
.jbt .k-video:not(.is-other) .k-video__cut { display: none; }
.jbt .k-video__cut.is-swap { animation: k-swap .55s var(--ease-out, ease-out); }
@keyframes k-swap { from { opacity: 0; translate: -50% 22px; scale: .94; } to { opacity: 1; translate: -50% 0; scale: 1; } }
.jbt .k-video__head { position: absolute; left: 0; right: 0; top: 20px; text-align: center; color: #fff; font-stretch: 62%; font-weight: 700; font-size: 46px; line-height: 1; text-shadow: 0 2px 18px #0004; }
.jbt .k-video:not(.is-other) .k-video__head { display: none; }
.jbt .k-video__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff55; }
.jbt .k-video__bar i { display: block; height: 100%; width: 100%; background: var(--k-or); transform-origin: 0 50%; animation: k-prog 14s linear infinite; }
@keyframes k-prog { from { scale: 0 1; } to { scale: 1 1; } }
.jbt .k-cmp { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; background: #fff; padding: 2px 0 0; }
.jbt .k-col { display: flex; flex-direction: column; justify-content: space-around; padding: 6px 4px; text-align: center; border-radius: 8px; position: relative; transition: background-color .2s, outline-color .2s; outline: 2px solid transparent; outline-offset: -2px; }
.jbt .k-col + .k-col::before { content: ""; position: absolute; left: -6px; top: 4px; bottom: 4px; width: 1px; background: var(--k-line); }
.jbt .k-col.is-on { background: var(--k-card); outline-color: var(--k-or); }
.jbt .k-col.is-on::before, .jbt .k-col.is-on + .k-col::before { opacity: 0; }
.jbt .k-col dt { font-size: 11.5px; font-weight: 700; }
.jbt .k-col dd { margin: 4px 0 0; font-size: 11.5px; font-weight: 500; color: #444; min-height: 20px; display: flex; justify-content: center; align-items: center; }
.jbt .k-tick { width: 19px; height: 19px; border-radius: 50%; background: var(--k-or); display: grid; place-items: center; }
.jbt .k-tick::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; }
.jbt .k-360 { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, #fff 0%, #ededed 70%, #dcdcdc 100%); cursor: grab; touch-action: none; }
.jbt .k-360:active { cursor: grabbing; }
.jbt .k-360__floor { position: absolute; left: 50%; bottom: 62px; width: 420px; height: 40px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, #0003, transparent); }
.jbt .k-360__img { position: absolute; left: 50%; top: 40px; width: 480px; height: 330px; margin-left: -240px; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
.jbt .k-360__hint { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: 12px; letter-spacing: .12em; color: #777; }
.jbt .k-360__hint::before, .jbt .k-360__hint::after { content: "‹  "; color: var(--k-or); }
.jbt .k-360__hint::after { content: "  ›"; }
.jbt .k-lang { position: absolute; left: 0; top: 210px; width: 38px; height: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; border-radius: 0 10px 10px 0; background: var(--k-grey) !important; font-size: 15px; font-weight: 500; font-stretch: 100%; }
.jbt .k-lang__chev { font-size: 22px; line-height: 16px; transition: rotate .25s; }
.jbt .k-lang[aria-expanded="true"] .k-lang__chev { rotate: 180deg; }
.jbt .k-lang__flag { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: none; }
.jbt .k-lang__txt { writing-mode: vertical-rl; rotate: 180deg; }
.jbt .k-langmenu { position: absolute; left: 44px; top: 222px; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #0003; animation: k-in .2s; }
.jbt .k-langmenu button { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 8px; font-size: 15px; font-weight: 600; font-stretch: 100%; text-align: left; }
.jbt .k-langmenu button:hover, .jbt .k-langmenu button[aria-current="true"] { background: var(--k-card); }
.jbt .k-flag { width: 30px; height: 30px; border-radius: 50%; display: block; flex: none; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px #0002; }
.jbt .k-flag--uk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23012169' d='M0 0h60v60H0z'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='M0 0l60 60M60 0L0 60'/%3E%3Cpath stroke='%23C8102E' stroke-width='5' d='M0 0l60 60M60 0L0 60'/%3E%3Cpath stroke='%23fff' stroke-width='18' d='M30 0v60M0 30h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='10' d='M30 0v60M0 30h60'/%3E%3C/svg%3E"); }
.jbt .k-flag--nl { background-image: linear-gradient(#ae1c28 0 33.3%, #fff 0 66.6%, #21468b 0); }

.jbt .k-panel { position: absolute; left: 928px; top: 0; width: 352px; height: 652px; background: var(--k-grey); display: flex; flex-direction: column; }
.jbt .k-panel__head { height: 82px; flex: none; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 56px; }
.jbt .k-name { font-size: 25px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.jbt .k-name.is-swap { animation: k-in .4s; }
.jbt .k-flagbtn { position: absolute; right: 18px; top: 26px; border-radius: 50%; }
.jbt .k-orange { flex: none; height: 46px; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--k-or) !important; color: #fff; font-size: 14px; letter-spacing: .02em; border-radius: 16px 16px 0 0; }
.jbt .k-orange .k-chev { width: 18px; height: 18px; }
.jbt .k-songs, .jbt .k-specs { flex: 1; min-height: 0; overflow-y: auto; background: #fff; border-left: 1px solid var(--k-or); padding: 14px 14px 14px 13px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: #999 transparent; overscroll-behavior: contain; }
.jbt .k-specs { background: var(--k-grey); border-left: 0; padding: 4px 20px; gap: 0; }
.jbt .k-song { flex: none; display: grid; grid-template-columns: 98px 1fr; gap: 16px; align-items: center; height: 98px; border-radius: 6px; overflow: hidden; background: var(--k-card); text-align: left; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
.jbt .k-song.is-on { outline-color: var(--k-or); }
.jbt .k-song span:first-child { width: 98px; height: 98px; background: #333 center / cover; }
.jbt .k-song b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.jbt .k-song small { display: block; font-size: 12px; font-weight: 500; line-height: 1.45; color: #333; }
.jbt .k-spec { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--k-line); font-size: 14px; font-weight: 500; font-stretch: 100%; line-height: 1.45; animation: k-in .35s both; }
.jbt .k-spec:last-child { border-bottom: 0; }
.jbt .k-spec i { width: 30px; height: 30px; background: var(--k-or); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.jbt .k-songbtn { margin-top: auto; }
.jbt .k-now { flex: none; height: 72px; display: none; }
.jbt .k-vol { display: none; }

/* the bottom bar spans the display; now playing and volume sit at the panel's foot */
.jbt .k-bar { position: absolute; left: 0; top: 652px; width: 928px; height: 148px; background: var(--k-ink); color: #fff; }
.jbt .k-logo { position: absolute; left: 30px; top: 25px; width: 150px; height: 100px; background: center / contain no-repeat; }
.jbt .k-transport { position: absolute; left: 335px; top: 32px; display: flex; align-items: center; gap: 40px; }
.jbt .k-skip { width: 46px; height: 46px; background: var(--k-or) !important; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h3v16H4zM20 4v16L8 12z'/%3E%3C/svg%3E"); }
.jbt .k-skip--next { scale: -1 1; }
.jbt .k-skip:active { opacity: .7; }
.jbt .k-bigplay, .jbt .k-now__play { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--k-or) !important; transition: scale .15s; }
.jbt .k-bigplay:active, .jbt .k-now__play:active { scale: .94; }
.jbt .k-bigplay::after, .jbt .k-now__play::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--m) center / 40% no-repeat; mask: var(--m) center / 40% no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l14 8-14 8z'/%3E%3C/svg%3E"); }
.jbt .k.is-playing :is(.k-bigplay, .k-now__play)::after { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E"); }
.jbt .k-bt { position: absolute; left: 718px; top: 48px; width: 46px; height: 52px; background: #fff !important; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10-5 5V2l5 5L7 17'/%3E%3C/svg%3E"); transition: background-color .2s; }
.jbt .k-bt.is-on { background: var(--k-blue) !important; }
.jbt .k-pb { position: absolute; left: 806px; top: 38px; width: 74px; height: 74px; border-radius: 50%; background: var(--k-or) !important; color: #fff; font-size: 8.5px; font-weight: 700; font-stretch: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.jbt .k-pb__icon { width: 32px; height: 22px; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Ccircle cx='22' cy='10' r='7.5'/%3E%3C/svg%3E"); }
.jbt .k-main .k-now { display: flex; position: absolute; left: 928px; top: 652px; width: 352px; height: 72px; align-items: center; gap: 12px; padding: 0 16px 0 18px; background: #e0e0e0; }
.jbt .k-now__cover { width: 46px; height: 46px; flex: none; background: #a99 center / cover; }
.jbt .k-now__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jbt .k-now__txt b { font-size: 16px; font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbt .k-now__txt span { font-size: 15px; font-weight: 500; font-stretch: 100%; }
.jbt .k-now__play { width: 40px; height: 40px; flex: none; }
.jbt .k-eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; opacity: 0; transition: opacity .3s; }
.jbt .k-eq i { width: 4px; height: 100%; background: var(--k-or); transform-origin: bottom; scale: 1 .3; }
.jbt .k.is-playing .k-eq { opacity: 1; }
.jbt .k.is-playing .k-eq i { animation: k-eq .9s ease-in-out infinite alternate; }
.jbt .k.is-playing .k-eq i:nth-child(2) { animation-duration: .6s; } .jbt .k.is-playing .k-eq i:nth-child(3) { animation-duration: 1.1s; } .jbt .k.is-playing .k-eq i:nth-child(4) { animation-duration: .75s; }
@keyframes k-eq { from { scale: 1 .2; } to { scale: 1 1; } }
.jbt .k-main .k-vol { display: flex; position: absolute; left: 928px; top: 724px; width: 352px; height: 76px; align-items: center; gap: 10px; padding: 0 18px; background: #efefef; }
.jbt .k-vol__icon { width: 24px; height: 24px; flex: none; background: var(--k-ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.jbt .k-round { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #d9d9d9 !important; font-size: 22px; line-height: 1; font-weight: 500; }
.jbt .k-vol input { flex: 1; min-width: 0; height: 26px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; --p: 12%; }
.jbt .k-vol input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--k-or) var(--p), var(--k-ink) var(--p)); }
.jbt .k-vol input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--k-or) var(--p), var(--k-ink) var(--p)); }
.jbt .k-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--k-or); border: 0; }
.jbt .k-vol input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--k-or); border: 0; }

/* PartyBoost */
.jbt .k-overlay { position: absolute; left: 0; top: 0; width: 1280px; height: 652px; z-index: 5; overflow: hidden; background: #333; animation: k-in .4s; color: #fff; }
.jbt .k-overlay__top { position: absolute; left: 0; right: 0; top: 0; height: 75px; background: var(--k-or); z-index: 1; }
.jbt .k-overlay__img { position: absolute; left: 0; right: 0; top: 75px; bottom: 0; background: center 60% / cover; animation: k-drift 14s ease-in-out infinite alternate; }
.jbt .k-overlay__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0000 40%, #000a 100%), linear-gradient(#0005, #0000 45%); }
.jbt .k-close { position: absolute; right: 26px; top: 46px; z-index: 2; width: 62px; height: 62px; border-radius: 50%; background: #fff !important; color: var(--k-or); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .8; box-shadow: 0 6px 18px #0003; }
.jbt .k-close span { font-size: 40px; font-weight: 400; font-stretch: 100%; }
.jbt .k-close small { font-size: 7px; color: var(--k-ink); }
.jbt .k-overlay__head { position: absolute; left: 0; right: 0; top: 165px; text-align: center; font-stretch: 62%; font-size: 64px; line-height: 1.05; font-weight: 700; text-shadow: 0 2px 22px #0005; }
.jbt .k-overlay__head small { font-size: 50px; }
.jbt .k-overlay__pb { position: absolute; left: 0; right: 0; top: 478px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-stretch: 100%; }
.jbt .k-overlay__pb b { margin-top: 6px; font-size: 19px; font-weight: 800; }
.jbt .k-overlay__pb > span:not(.k-linked) { max-width: 600px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.jbt .k-pbring { width: 68px; height: 68px; border-radius: 50%; background: var(--k-or) !important; display: grid; place-items: center; box-shadow: 0 0 0 0 #fa440e99; animation: k-ping 1.8s infinite; }
@keyframes k-ping { 0% { box-shadow: 0 0 0 0 #fa440eaa; } 100% { box-shadow: 0 0 0 18px #fa440e00; } }
.jbt .k-linked { position: absolute; top: -46px; left: 50%; translate: -50% 0; white-space: nowrap; padding: 6px 14px; border-radius: 99px; background: #fff; color: var(--k-ink); font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .25s; }
.jbt .k-linked.is-on { opacity: 1; }
.jbt .k-toast { position: absolute; left: 464px; top: 600px; translate: -50% 0; z-index: 6; padding: 10px 18px; border-radius: 99px; background: #fff; color: var(--k-ink); font-size: 14px; font-weight: 700; font-stretch: 100%; box-shadow: 0 10px 26px #0003; opacity: 0; transition: opacity .25s, translate .25s; pointer-events: none; white-space: nowrap; }
.jbt .k-toast.is-on { opacity: 1; translate: -50% -8px; }

/* 3 · staff: the rollout tool, on black */
.jbt .k-staff { background: var(--k-ink); color: var(--k-ink); }
.jbt .k-sstrip { position: absolute; left: 43px; top: 27px; width: 1193px; height: 138px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.jbt .k-sstrip .k-card { background: #fff; font-size: 12px; }
.jbt .k-sstrip .k-card img { mix-blend-mode: normal; }
.jbt .k-table { position: absolute; left: 43px; top: 187px; width: 1193px; border-radius: 10px; overflow: hidden; background: #fff; }
.jbt .k-tr { display: grid; grid-template-columns: 297px 295px 305px 1fr; align-items: center; height: 66px; font-size: 18px; font-weight: 600; text-align: center; }
.jbt .k-tr > :nth-child(even) { background: #ececec; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.jbt .k-tr:nth-child(even) > :nth-child(odd) { background: #f7f7f7; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.jbt .k-th { height: 33px; font-size: 13px; font-weight: 700; }
.jbt .k-sel { width: 270px; height: 34px; padding: 0 30px 0 12px; border: 1px solid #333; border-radius: 3px; text-align: center; text-align-last: center; font: inherit; font-size: 17px; font-weight: 600; text-transform: uppercase; color: var(--k-ink); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: #f2f2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E") right 12px center / 10px no-repeat; }
.jbt .k-sel.is-set { border-color: transparent; background-color: transparent; background-image: none; }
.jbt .k-sel.is-off { color: var(--k-or); }
.jbt .k-sel:hover, .jbt .k-sel:focus { border-color: #333; }
.jbt .k-toggle { position: relative; width: 80px; height: 36px; border-radius: 99px; background: var(--k-or) !important; transition: background-color .25s; }
.jbt .k-toggle::after { content: ""; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: translate .25s var(--ease-out, ease-out); }
.jbt .k-toggle[aria-checked="true"] { background: var(--k-green) !important; }
.jbt .k-toggle[aria-checked="true"]::after { translate: 44px 0; }
.jbt .k-toggle:disabled { opacity: .35; cursor: default; }
.jbt .k-when { display: block; font-size: 10px; font-weight: 600; color: #666; margin-top: 3px; }
.jbt .k-newcell { flex-direction: column; }
.jbt .k-slogo { position: absolute; left: 22px; top: 690px; width: 150px; height: 100px; background: center / contain no-repeat; }
.jbt .k-preview { position: absolute; right: 44px; top: 724px; padding: 12px 26px; border-radius: 99px; background: var(--k-or) !important; color: #fff; font-size: 15px; }
.jbt .k-modal { position: absolute; inset: 0; z-index: 5; background: #0009; display: grid; place-items: center; animation: k-in .2s; }
.jbt .k-cal { width: 690px; background: #fff; border: 1px solid var(--k-or); border-radius: 4px; box-shadow: 0 20px 50px #0006; font-stretch: 100%; }
.jbt .k-cal__top { display: grid; grid-template-columns: 70px 1fr 1fr 40px; align-items: center; padding: 18px 10px 14px 0; border-bottom: 1px solid var(--k-or); }
.jbt .k-cal__icon { justify-self: center; width: 28px; height: 28px; background: var(--k-or); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M7 14h2M11 14h2M15 14h2M7 17h2M11 17h2'/%3E%3C/svg%3E"); }
.jbt .k-cal__top small { display: block; font-size: 11px; color: var(--k-or); letter-spacing: .04em; }
.jbt .k-cal__top b { font-size: 22px; font-weight: 500; }
.jbt .k-cal__x { font-size: 26px !important; font-weight: 400; }
.jbt .k-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 18px 26px 6px; }
.jbt .k-month h4 { display: flex; justify-content: center; gap: 14px; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.jbt .k-month h4 span { color: var(--k-or); }
.jbt .k-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; text-align: center; font-size: 12px; font-weight: 500; }
.jbt .k-days > span { color: #333; font-size: 11px; padding-bottom: 4px; }
.jbt .k-days button { height: 24px; font-size: 12px !important; font-weight: 500; color: #444; }
.jbt .k-days button:disabled { color: #bbb; cursor: default; }
.jbt .k-days button.is-in { background: #f7b69e !important; }
.jbt .k-days button.is-end { background: #f7b69e !important; box-shadow: inset 0 0 0 2px var(--k-or); border-radius: 50%; }
.jbt .k-cal__foot { display: flex; align-items: center; gap: 6px; padding: 8px 16px 14px; }
.jbt .k-cal__nav { width: 30px; height: 30px; font-size: 24px !important; font-weight: 500; }
.jbt .k-cal__apply { margin-left: auto; padding: 5px 22px; background: var(--k-or) !important; color: #fff; font-size: 12px; border-radius: 2px; }

/* full screen on a phone: the tablet turns sideways to fill it */
.jbt .jbt-device.is-full { position: fixed; inset: 0; z-index: 10000; border-radius: 0; padding: 0; background: #111114; box-shadow: none; display: grid; place-items: center; }
.jbt .jbt-device.is-full::before { display: none; }
.jbt .jbt-device.is-full .jbt-fit { position: absolute; left: 50%; top: 50%; width: 1280px; aspect-ratio: auto; height: 800px; border-radius: 0; transform-origin: 50% 50%; }
.jbt .jbt-shut { position: fixed; right: 14px; top: 14px; z-index: 10001; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 26px; line-height: 1; box-shadow: 0 6px 20px #0005; }

@media (max-width: 991px) {
  .jbt .jbt-try { grid-template-columns: minmax(0, 1fr); }
  .jbt .jbt-notes { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .jbt .jbt-anno.is-on { translate: 0 -4px; }
}
@media (max-width: 767px) {
  .jbt .jbt-float { position: static; display: flex; justify-content: flex-end; margin-bottom: -8px; }
  .jbt .jbt-sec { padding-top: 96px; }
  .jbt .jbt-device { padding: 8px; border-radius: 18px; }
  .jbt .jbt-fit { border-radius: 10px; }
  .jbt .jbt-open { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .jbt .k *, .jbt .k-scr, .jbt .jbt-anno { animation: none !important; transition: none !important; }
}